/* Restncare public website — platform sections (written by
   tool/build_website.cjs from tool/website_src/assets/platform.css).
   Tokens are the ones of site.css; nothing here defines a new colour. */

/* Header: the customer's account entry (Türkiye market only). */
.site-nav .nav-cta { background: var(--green); color: #fff; font-weight: 600; }
.site-nav .nav-cta:hover { background: #123630; }
@media (min-width: 980px) {
  .site-nav .nav-account:first-of-type { margin-left: 6px; }
  .site-nav .nav-account a:not(.nav-cta) { font-weight: 600; color: var(--green); }
}
@media (max-width: 979px) {
  .js .site-nav .nav-cta { margin-top: 10px; justify-content: center; border-radius: var(--pill); border-top: 0; }
  .js .site-nav .nav-account a:not(.nav-cta) { font-weight: 600; color: var(--green); }
}

/* Small buttons (account box). */
.btn.btn-sm { min-height: 44px; padding: 8px 20px; font-size: 0.9375rem; }
.account-box .stores-row { align-items: center; }

/* Regional page: the partner-applications line. */
.open-line { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 16px; padding: 8px 16px; border-radius: var(--pill); background: var(--green); color: #fff; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.open-line::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--beige); }

/* Nine categories: two columns on a phone, then a free-flowing row. */
@media (max-width: 559px) {
  .xcats.xcats-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xcats.xcats-wide li { padding-right: 10px; font-size: 0.875rem; }
}

/* Who offers services. */
.who-grid { display: grid; gap: 14px; margin: 0 0 clamp(32px, 5vw, 56px); }
@media (min-width: 640px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .who-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.who-grid > li { padding: 20px; border: 1px solid var(--outline-strong); border-radius: var(--radius-lg); background: var(--surface); }
.who-grid > li > i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 14px; background: var(--green-soft); color: var(--green); }
.who-grid > li > i .ico { width: 22px; height: 22px; }
.who-grid p { margin-top: 6px; color: var(--ink-muted); font-size: 0.9375rem; }

/* Feature cards in three columns. */
@media (min-width: 700px) { .feat.feat-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .feat.feat-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* App screens: real screenshots of the app, in a quiet device frame. */
.screens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 70%); gap: 16px; margin-top: clamp(32px, 5vw, 56px); padding-bottom: 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
@media (min-width: 640px) { .screens { grid-auto-columns: minmax(220px, 40%); } }
@media (min-width: 1000px) { .screens { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.screens.screens-2 { margin-top: 0; }
@media (min-width: 1000px) { .screens.screens-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.screen { scroll-snap-align: start; margin: 0; }
.screen img { display: block; width: 100%; height: auto; border: 6px solid var(--surface); border-radius: 26px; background: var(--beige-soft); box-shadow: 0 1px 0 var(--outline), 0 18px 40px -24px rgba(25, 68, 62, 0.45); }
.screen figcaption { margin-top: 10px; font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); text-align: center; }

/* The customer band on white: its text link in the brand green. */
.two-ways .band.light .band-link { color: var(--green); }
.two-ways .band.light .band-link:hover { color: #123630; }

/* Workspace and clinic sections: room between the feature cards and the screens. */
#workspace .split, .clinic-care .split { margin-top: clamp(40px, 6vw, 72px); }
.clinic-care .screen { max-width: 320px; }

/* ---------- Service and app pages ---------- */
.vhero { padding-block: clamp(32px, 6vw, 80px) clamp(40px, 6vw, 88px); }
.vhero-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .vhero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.vhero-copy .eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vhero-copy .display { font-size: clamp(2.25rem, 5vw, 3.5rem); text-wrap: balance; }
.vhero-copy .lead { margin-top: 18px; max-width: 36em; }
.vhero-art { width: 100%; max-width: 520px; height: auto; justify-self: center; border-radius: 32px; background: linear-gradient(165deg, #efe7d8 0%, #f6f1e7 55%, #e4ece5 100%); }
.vhero-shot { justify-self: center; width: min(100%, 300px); }

.vcards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .vcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vcards a { display: grid; gap: 8px; height: 100%; padding: 22px; border: 1px solid var(--outline-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.vcards a:hover { border-color: var(--green); }
@media (prefers-reduced-motion: no-preference) { .vcards a:hover { transform: translateY(-2px); } }
.vcards i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--green-soft); color: var(--green); }
.vcards i .ico { width: 22px; height: 22px; }
.vcards b { font-size: 1.125rem; }
.vcards span { color: var(--ink-muted); font-size: 0.9375rem; }
.vcards em { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-style: normal; font-weight: 600; color: var(--green); }
.vcards em .ico { width: 18px; height: 18px; }

.vlinks { display: flex; flex-wrap: wrap; gap: 10px; margin: calc(-1 * clamp(16px, 3vw, 32px)) 0 clamp(32px, 5vw, 56px); }
.vlinks a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--outline-strong); border-radius: var(--pill); background: var(--surface); color: var(--green); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.vlinks a:hover { border-color: var(--green); }
.vlinks .ico { width: 16px; height: 16px; }

.linkband { display: grid; gap: 18px; align-items: center; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--outline-strong); border-radius: var(--radius-lg); background: var(--beige-soft); }
@media (min-width: 800px) { .linkband { grid-template-columns: minmax(0, 1fr) auto; } }
.linkband p { margin-top: 6px; color: var(--ink-muted); }
.linkband .btn { justify-self: start; }

/* Screens: three phones, two phones side by side, desktop panels. */
@media (min-width: 1000px) {
  .screens.screens-3 { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; }
  .screens.screens-pair { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; align-items: start; }
  .screens.screens-pair:has(.screen-desk) { grid-template-columns: minmax(0, 300px) minmax(0, 560px); }
  .screens.screens-desk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.screens.screens-desk { grid-auto-columns: minmax(260px, 88%); }
@media (min-width: 640px) { .screens.screens-desk { grid-auto-columns: minmax(260px, 70%); } }
.screen-desk img { border-width: 4px; border-radius: 14px; }
.screen-solo { justify-self: center; width: min(100%, 300px); }

.dental-note { max-width: 46em; margin-top: clamp(32px, 5vw, 56px); padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); }
.dental-note p { margin-top: 10px; color: rgba(255, 255, 255, 0.86); }
.dental-note .sub-h { color: #fff; }

/* ---------- Public business pages (/p/…, rendered by the server) ---------- */
/* P2-13: a picture-led header band, cards with room around their headings. */
.pl-page .page-hero { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(120% 90% at 85% 0%, #f1ebdf 0%, rgba(241, 235, 223, 0) 60%), var(--bg); border-bottom: 1px solid var(--outline); }
.pl-page .page-hero::after { content: ""; position: absolute; z-index: -1; right: max(-40px, calc((100vw - 1180px) / 2)); bottom: -26%; width: min(38vw, 340px); aspect-ratio: 4 / 3; background: url("/assets/img/art/still-care.svg") right bottom / contain no-repeat; opacity: 0.55; pointer-events: none; }
@media (max-width: 699px) { .pl-page .page-hero::after { opacity: 0.25; } }
.pl-page .page-hero .display { overflow-wrap: anywhere; }
.pl-page .page-hero .hero-meta { justify-content: center; }
.pl-stack > .h2 + * { margin-top: 18px; }
.pl-stack > .h2 { padding-top: 4px; }
@media (min-width: 760px) { .pl-services { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.pl-service { display: flex; flex-direction: column; }
.pl-service-action { margin-top: auto; padding-top: 12px; }
.pl-page .pl-book { margin-top: clamp(32px, 5vw, 48px); padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--beige-soft); border: 1px solid var(--outline-strong); }
.pl-page .pl-book .h3 { margin-bottom: 8px; }
.pl-service > .chip { align-self: flex-start; }
.pl-page .page-hero .actions { justify-content: center; }