/* rabs.com.tr · Option A's "Salon" look (cream paper, navy ink, gold detail, big serif) with
   Option B's phone that stays in place while the story scrolls past it and changes its screen. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/fraunces-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/fraunces-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(fonts/fraunces-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(fonts/fraunces-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #F4EFE6;
  --paper-2: #FBF8F2;
  --ink: #122742;
  --ink-soft: #3B4A5E;
  --muted: #6E6758;
  --line: #DED5C4;
  --gold: #B8914E;
  --gold-deep: #A67F3F;   /* gold large enough to read on paper */
  --gold-ink: #86622A;    /* gold small text on paper */
  --gold-soft: #EADBBE;
  --gold-light: #D6B57A;  /* gold on navy */
  --navy: #122742;
  --navy-2: #0D1D33;
  --on-navy: #F4EFE6;
  --on-navy-soft: #C9CFD8;
  --blue: #1E4F8F;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Figtree", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --header-h: 76px;
  color-scheme: light;
}
@media (max-width: 860px) { :root { --header-h: 64px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* height:auto: the width/height attributes only reserve the shape; a picture is never stretched. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
.wrap { width: min(1180px, 100%); margin: 0 auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 18px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -0.02em; text-wrap: balance; font-optical-sizing: auto; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold-deep); }
h2 { font-size: clamp(36px, 5.6vw, 72px); line-height: 1.02; }
.lede { font-size: 19px; color: var(--ink-soft); max-width: 46ch; }
.soft { color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 26px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; border: 0; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--blue); }
.btn.line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn.line:hover { background: var(--ink); color: var(--paper); }
.btn.gold { background: var(--gold-light); color: var(--navy); }
.btn.gold:hover { background: var(--gold-soft); }
.btn.ghost-light { border: 1.5px solid rgba(244, 239, 230, .4); color: var(--on-navy); }
.btn.ghost-light:hover { background: rgba(244, 239, 230, .1); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.text-link { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--gold); padding-bottom: 2px; }
.text-link:hover { color: var(--blue); }

/* ── Header ─────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 30; background: rgba(244, 239, 230, .95); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; view-transition-name: top; }
.top.scrolled, .top.open { border-color: var(--line); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
.logo { font-family: var(--display); font-size: 34px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; }
.logo span { color: var(--gold); font-size: 20px; }
.menu { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.menu a { text-decoration: none; color: var(--ink-soft); padding-block: 6px; border-bottom: 1.5px solid transparent; }
.menu a:hover { color: var(--ink); }
.menu a[aria-current="page"] { color: var(--ink); border-color: var(--gold); }
.menu .menu-extra { display: none; }
.top-cta { padding: 10px 20px; min-height: 44px; font-size: 15px; }
.lang-link { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-grid; place-items: center; border-radius: 999px; }
.lang-link:hover { color: var(--ink); background: var(--paper-2); }
.lang-hint { background: var(--navy); color: var(--on-navy); font-size: 14px; }
.lang-hint .wrap { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; min-height: 44px; padding-block: 6px; }
.lang-hint a { color: var(--gold-light); font-weight: 600; }
.lang-hint button { margin-left: auto; font: inherit; color: var(--on-navy-soft); background: none; border: 0; cursor: pointer; min-height: 36px; padding: 0 6px; }
.menu-btn { display: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); background: transparent; border: 1.5px solid var(--line); border-radius: 999px; min-height: 44px; padding: 0 16px; cursor: pointer; align-items: center; gap: 8px; }
.menu-btn i { position: relative; width: 16px; height: 10px; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .25s ease, top .25s ease; }
.menu-btn i::before { top: 1px; } .menu-btn i::after { top: 7px; }
.menu-btn[aria-expanded="true"] i::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { top: 4px; transform: rotate(-45deg); }
@media (max-width: 960px) {
  .top-in { gap: 12px; }
  .logo { font-size: 30px; margin-right: auto; }
  .js .lang-link { display: none; }
  .top-cta { padding-inline: 16px; }
  /* Without script the menu is a row you can swipe; with script it opens as a sheet. */
  .menu { order: 3; flex-basis: 100%; margin: 0 -20px; padding: 0 20px 10px; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; }
  .top-in { flex-wrap: wrap; }
  .js .top-in { flex-wrap: nowrap; }
  .js .menu-btn { display: inline-flex; }
  /* Absolute to the sticky header (its blur would trap a fixed sheet anyway). */
  .js .menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--header-h)); margin: 0; padding: 28px 20px calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--paper); flex-direction: column; gap: 0; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .js .top.open .menu { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .js .menu a { font-family: var(--display); font-size: 34px; letter-spacing: -0.02em; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); }
  .js .menu a[aria-current="page"] { color: var(--gold-deep); border-color: var(--line); }
  .js .menu .menu-extra { display: block; font-family: var(--body); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); padding: 14px 0; }
}
@media (max-width: 420px) { .top-cta { font-size: 14px; padding-inline: 14px; } .menu-btn { padding: 0 12px; } .menu-btn span { display: none; } .menu-btn i { width: 18px; } }
body.menu-open { overflow: hidden; }

/* ── Home hero ──────────────────────────────────────────── */
.hero { padding-block: 56px 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(64px, 11vw, 150px); line-height: .9; letter-spacing: -0.045em; font-weight: 300; }
.hero h1 em { font-weight: 400; }
.hero .lede { margin-top: 28px; }
.search { margin-top: 34px; display: flex; align-items: center; gap: 10px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 7px 7px 24px; max-width: 520px; box-shadow: 0 18px 40px -26px rgba(18, 39, 66, .45); }
.search:focus-within { border-color: var(--gold); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); outline: none; }
.search input::placeholder { color: var(--muted); }
.search .btn { padding: 11px 22px; }
.hero-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.hero-art { position: relative; padding-left: 20px; }
.arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(18, 39, 66, .6); background: var(--gold-soft); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; transform: scale(1.08); animation: breathe 14s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1) translateY(-10px); } }
.slot-card { position: absolute; left: -34px; bottom: 44px; background: var(--paper-2); border-radius: 20px; padding: 18px 22px; box-shadow: 0 24px 50px -24px rgba(18, 39, 66, .5); display: grid; gap: 2px; animation: float 6s ease-in-out infinite alternate; }
.slot-card small { font-size: 11px; letter-spacing: .16em; font-weight: 700; color: var(--gold-ink); }
.slot-card strong { font-family: var(--display); font-size: 32px; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.slot-card span { font-size: 14px; color: var(--muted); }
@keyframes float { to { transform: translateY(-12px); } }
.star { position: absolute; right: -6px; top: 8%; font-size: 44px; line-height: 1; color: var(--gold); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .hero { padding-top: 36px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { padding-left: 0; max-width: 460px; }
  .slot-card { left: 12px; bottom: 18px; }
  .star { right: 6px; }
}

.marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: 18px; margin-top: 48px; }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: slide 38s linear infinite; font-family: var(--display); font-size: 28px; font-style: italic; color: var(--ink-soft); white-space: nowrap; }
.marquee-track span::after { content: "✦"; color: var(--gold); font-style: normal; font-size: 16px; margin-left: 48px; vertical-align: middle; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Inner page hero ────────────────────────────────────── */
.page-hero { padding-block: 72px 56px; }
.page-hero h1 { font-size: clamp(52px, 8.6vw, 112px); line-height: .94; letter-spacing: -0.04em; font-weight: 300; max-width: 14ch; }
.page-hero .lede { margin-top: 26px; }
.page-hero.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.page-hero.small h1 { font-size: clamp(44px, 6.4vw, 84px); max-width: 18ch; }
@media (max-width: 860px) { .page-hero { padding-block: 44px 36px; } .page-hero.split { grid-template-columns: 1fr; gap: 36px; } }

/* ── Section heads ──────────────────────────────────────── */
.section { padding-block: 110px; }
.section.tight { padding-block: 70px; }
.head-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
@media (max-width: 860px) { .section { padding-block: 72px; } .head-2 { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; } }

/* ── The story: a phone that stays while the steps scroll past ── */
.story { --story-bg: var(--paper); position: relative; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 290px); column-gap: clamp(40px, 8vw, 120px); }
.story-steps { grid-column: 1; grid-row: 1; }
.stage { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + max(24px, (100svh - var(--header-h) - 600px) / 2)); align-self: start; }
.story-step { min-height: 78vh; display: grid; align-content: center; padding-block: 40px; }
.step-body { display: grid; gap: 16px; transition: opacity .45s ease, transform .45s ease; }
.story.ready .story-step:not(.on) .step-body { opacity: .3; }
.step-n { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.story-step h3 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.03em; }
.story-step p { font-size: 19px; color: var(--ink-soft); max-width: 40ch; }
.story-step .text-link { justify-self: start; margin-top: 6px; }
.device { position: relative; border-radius: 46px; padding: 10px; background: linear-gradient(160deg, #24395A, #0D1B2E); box-shadow: 0 50px 90px -45px rgba(18, 39, 66, .65), inset 0 0 0 1px rgba(255, 255, 255, .09); transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px)); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
/* The earpiece sits in the frame, so it never covers the app's own header. */
.device::before { content: ""; position: absolute; top: 4px; left: 50%; width: 54px; height: 3px; margin-left: -27px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.screen { position: relative; aspect-ratio: 390 / 740; border-radius: 37px; overflow: hidden; background: var(--paper-2); }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: translateY(5%) scale(.98); transition: opacity .55s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }
.screen img.on { opacity: 1; transform: none; }
.screen img.gone { transform: translateY(-4%) scale(.98); }
.stage-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-inline: 6px; font-size: 14px; color: var(--muted); }
.dots { display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .35s ease, background .35s ease; }
.dots i.on { width: 22px; background: var(--gold); }
.inline-shot { display: none; }
@media (max-width: 860px) {
  .story-grid { display: block; }
  /* Small enough that the words below keep room, even with Safari's bars showing (svh). */
  .stage { position: sticky; top: var(--header-h); z-index: 2; margin-inline: -20px; padding: 10px 20px 26px; background: linear-gradient(var(--story-bg) 82%, transparent); display: flex; flex-direction: column; align-items: center; }
  .device { width: min(40vw, 20svh, 180px); padding: 6px; border-radius: 26px; }
  .device::before { top: 2px; width: 36px; height: 2px; margin-left: -18px; }
  .screen { border-radius: 21px; }
  .stage-foot { width: min(70vw, 260px); margin-top: 8px; font-size: 13px; }
  .story-step { min-height: 62svh; align-content: end; padding-block: 24px 14svh; }
  .story-step:last-child { padding-bottom: 8svh; }
  .story-step h3 { font-size: clamp(28px, 8vw, 36px); }
  .story-step p { font-size: 17px; }
}

/* Dark (navy) version for the shop side. */
.navy { background: var(--navy); color: var(--on-navy); }
.navy h2, .navy h3 { color: var(--on-navy); }
.navy h2 em, .navy h3 em { color: var(--gold-light); }
.navy .eyebrow, .navy .step-n { color: var(--gold-light); }
.navy .lede, .navy .story-step p { color: var(--on-navy-soft); }
.navy .text-link { border-color: var(--gold-light); }
.navy .text-link:hover { color: var(--gold-soft); }
.navy .story { --story-bg: var(--navy); }
.navy .device { background: linear-gradient(160deg, #3A5378, #16263F); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.navy .stage-foot { color: var(--on-navy-soft); }
.navy .dots i { background: rgba(244, 239, 230, .22); }
.navy .dots i.on { background: var(--gold-light); }
.rounded-top { border-radius: 40px 40px 0 0; }
@media (max-width: 860px) { .rounded-top { border-radius: 28px 28px 0 0; } }

/* ── 45 minutes demo ────────────────────────────────────── */
.time-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 32px; padding: clamp(24px, 5vw, 56px); display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.time-card h2 { font-size: clamp(34px, 4.4vw, 56px); }
.time-card .lede { margin-top: 18px; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slots button { font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.slots button:hover:not(:disabled) { border-color: var(--gold); }
.slots button.start { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.slots button.held { background: var(--gold-soft); border-color: var(--gold-soft); }
.slots button:disabled { text-decoration: line-through; color: var(--muted); cursor: not-allowed; background: transparent; }
.time-result { margin-top: 18px; font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; }
.time-small { margin-top: 6px; font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .time-card { grid-template-columns: 1fr; gap: 32px; } }

/* ── Photo steps (01 02 03) ─────────────────────────────── */
.step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { display: grid; gap: 16px; align-content: start; }
.step .num { font-family: var(--display); font-size: 88px; line-height: 1; color: var(--gold-soft); font-weight: 300; }
.step h3 { font-size: 30px; }
.step p { color: var(--ink-soft); }
.step figure { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gold-soft); }
.step figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.step:hover figure img { transform: scale(1.05); }
@media (max-width: 860px) { .step-list { grid-template-columns: 1fr; gap: 44px; } }

/* ── Categories ─────────────────────────────────────────── */
.cat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.cat { position: relative; display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; color: var(--on-navy); background: var(--navy); }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.cat:hover img { transform: scale(1.06); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 39, 66, 0) 45%, rgba(18, 39, 66, .85)); }
.cat div { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; display: grid; gap: 2px; }
.cat h3 { font-size: 36px; }
.cat span { font-size: 15px; opacity: .88; }
@media (max-width: 860px) { .cat-row { grid-template-columns: 1fr; } .cat { aspect-ratio: 16 / 10; } }

/* ── Feature grids and cards ────────────────────────────── */
.features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; }
.features li { border-top: 1px solid var(--line); padding-top: 16px; }
.features b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
.features span { font-size: 16px; color: var(--ink-soft); }
.navy .features li { border-color: rgba(244, 239, 230, .18); }
.navy .features span { color: var(--on-navy-soft); }
.features.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features, .features.two { grid-template-columns: 1fr; } }

.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(244, 239, 230, .18); border-radius: 28px; overflow: hidden; }
.promise-grid div { background: var(--navy); padding: 34px 30px; display: grid; gap: 10px; align-content: start; }
.promise-grid h3 { font-size: 26px; color: var(--gold-soft); }
.promise-grid p { color: var(--on-navy-soft); font-size: 15px; }
@media (max-width: 860px) { .promise-grid { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fact { background: var(--paper-2); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: grid; gap: 8px; align-content: start; }
.fact b { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -0.03em; }
.fact span { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .fact { padding: 20px; } .fact b { font-size: 38px; } }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 26px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.card h3 { font-size: 26px; line-height: 1.15; }
.card p { color: var(--ink-soft); font-size: 16px; }
.card .btn, .card .text-link { justify-self: start; margin-top: 8px; }
.card .big { font-family: var(--display); font-size: 24px; text-decoration: none; border-bottom: 1.5px solid var(--gold); justify-self: start; word-break: break-all; }
.cards.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .cards, .cards.two { grid-template-columns: 1fr; } }

.numbered { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: n; }
.numbered li { counter-increment: n; display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.numbered li::before { content: "0" counter(n); font-family: var(--display); font-size: 56px; line-height: 1; color: var(--gold-soft); font-weight: 300; }
.navy .numbered li { border-color: rgba(244, 239, 230, .18); }
.navy .numbered li::before { color: rgba(214, 181, 122, .5); }
.numbered b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; }
.numbered span { color: var(--ink-soft); }
.navy .numbered span { color: var(--on-navy-soft); }
@media (max-width: 860px) { .numbered { grid-template-columns: 1fr; } }

/* Two lanes: what the customer sees, what the shop sees. */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lane { background: var(--paper-2); border: 1px solid var(--line); border-radius: 28px; padding: 30px; }
.lane.dark { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.lane h3 { font-size: 30px; margin-bottom: 18px; }
.lane ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lane li { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding-block: 14px; border-top: 1px solid var(--line); }
.lane.dark li { border-color: rgba(244, 239, 230, .16); }
.lane time { font-family: var(--display); font-size: 18px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.lane.dark time { color: var(--gold-light); }
.lane li span { color: var(--ink-soft); }
.lane.dark li span { color: var(--on-navy-soft); }
.lane li b { color: var(--ink); font-weight: 600; }
.lane.dark li b { color: var(--on-navy); }
@media (max-width: 860px) { .lanes { grid-template-columns: 1fr; } .lane { padding: 24px; } .lane li { grid-template-columns: 88px 1fr; gap: 10px; } }

/* Laptop that stands up as you scroll (Option B's hero move). */
.laptop { margin: 0 auto; width: min(980px, 100%); perspective: 1400px; }
.laptop-lid { border-radius: 22px 22px 8px 8px; padding: 12px 12px 16px; background: linear-gradient(180deg, #26395A, #0F1C31); box-shadow: 0 50px 100px -50px rgba(18, 39, 66, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); transform-origin: bottom center; }
.laptop-lid img { border-radius: 10px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.laptop-base { height: 16px; margin: 0 -4%; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #C9C1B2, #A99F8E); box-shadow: 0 24px 40px -24px rgba(18, 39, 66, .6); }
@supports (animation-timeline: view()) {
  .laptop-lid { animation: stand linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  /* The lid starts leaning back, away from you, and stands up. */
  @keyframes stand { from { transform: rotateX(28deg) scale(.96); } to { transform: none; } }
}

.ahead { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.howto { background: var(--paper-2); border: 1px solid var(--line); border-radius: 26px; padding: 28px; }
.howto h3 { font-size: 26px; margin-bottom: 12px; }
.howto ol { margin: 0; padding-left: 22px; color: var(--ink-soft); display: grid; gap: 6px; }
@media (max-width: 860px) { .ahead { grid-template-columns: 1fr; } }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 280px 1fr; gap: 56px; }
.faq + .faq { margin-top: 72px; }
.faq h2 { font-size: clamp(32px, 4vw, 48px); }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 0; font-family: var(--display); font-size: 22px; line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--body); font-size: 20px; color: var(--gold-ink); transition: transform .3s ease, background-color .3s ease; }
.qa[open] summary::after { transform: rotate(45deg); background: var(--gold-soft); }
.qa summary:hover { color: var(--blue); }
.qa div { padding: 0 52px 22px 0; color: var(--ink-soft); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 20px; } .qa summary { font-size: 19px; } .qa div { padding-right: 0; } }

/* ── Legal texts ────────────────────────────────────────── */
.legal { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 64px; padding-bottom: 110px; }
.legal.no-toc { grid-template-columns: minmax(0, 760px); }
.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 4px; font-size: 14px; }
.toc b { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc a { text-decoration: none; color: var(--ink-soft); padding: 6px 0 6px 12px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--ink); border-color: var(--gold); }
.draft-note { display: flex; gap: 12px; align-items: flex-start; background: var(--gold-soft); color: var(--ink); border-radius: 16px; padding: 14px 18px; font-size: 15px; margin-bottom: 36px; }
.draft-note::before { content: "✦"; color: var(--gold-ink); }
.prose { font-size: 17px; color: var(--ink-soft); }
.prose h2 { font-size: clamp(28px, 3.4vw, 38px); color: var(--ink); margin: 52px 0 16px; line-height: 1.12; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 24px; color: var(--ink); margin: 34px 0 12px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.prose ul ul { margin: 8px 0 0; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--blue); text-underline-offset: 3px; }
.prose code { font-size: .9em; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.prose mark { background: var(--gold-soft); color: var(--ink); border-radius: 4px; padding: 0 4px; }
.table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.prose .kv { min-width: 0; }
.prose .kv td:first-child { width: 38%; color: var(--muted); }
/* minmax(0, …): a wide table scrolls inside its frame instead of widening the page. */
@media (max-width: 860px) { .legal, .legal.no-toc { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 72px; } .toc { position: static; } }

/* ── Closing, footer ────────────────────────────────────── */
.closing { padding-block: 130px 100px; text-align: center; }
.closing h2 { font-size: clamp(64px, 12vw, 160px); font-weight: 300; letter-spacing: -0.05em; line-height: .9; }
.closing .actions { justify-content: center; margin-top: 44px; }
footer { border-top: 1px solid var(--line); padding-block: 56px calc(48px + env(safe-area-inset-bottom, 0px)); }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h2 { margin: 0 0 12px; font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.foot a:not(.logo) { display: block; text-decoration: none; color: var(--ink-soft); padding-block: 5px; font-size: 15px; }
.foot a:not(.logo):hover { color: var(--ink); }
.foot p { color: var(--muted); font-size: 14px; max-width: 34ch; margin-top: 14px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot-bottom a { color: var(--muted); }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }

/* ── Motion: things settle into place as you scroll; they are never hidden. ── */
@supports (animation-timeline: view()) {
  .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  @keyframes rise { from { transform: translateY(46px); } to { transform: none; } }
  .parallax img { animation: drift linear both; animation-timeline: view(); }
  @keyframes drift { from { transform: scale(1.12) translateY(-4%); } to { transform: scale(1.12) translateY(4%); } }
}

/* Moving between pages: the header stays, the page slides in. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-in both page-out; }
::view-transition-new(root) { animation: 360ms cubic-bezier(.2, .7, .2, 1) both page-in; }
@keyframes page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}