/* KINCLUTCH marketing site — compact, vivid and launch-ready. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
}
:root {
  --ink: #090b12;
  --ink-2: #121522;
  --ink-3: #1b1e2d;
  --gold: #d8a248;
  --gold-bright: #f4ca77;
  --gold-deep: #a76d17;
  --gold-text: #8b5a10;
  --paper: #ffffff;
  --cream: #fbf7ef;
  --cream-2: #f5ecdc;
  --blush: #f9e9e4;
  --plum: #6c294e;
  --plum-bright: #9e426d;
  --blue: #246e8c;
  --blue-bright: #62c4dd;
  --leaf: #477951;
  --text: #171820;
  --text-soft: #4f5360;
  --text-faint: #707480;
  --on-ink: #fffaf0;
  --on-ink-soft: #c9c8cb;
  --line: rgba(18, 20, 29, .12);
  --line-strong: rgba(18, 20, 29, .22);
  --line-ink: rgba(255, 255, 255, .14);
  --display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 52px);
  --section-y: clamp(48px, 5vw, 72px);
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 32px;
  --shadow-sm: 0 2px 4px rgba(10, 11, 16, .06), 0 10px 24px rgba(10, 11, 16, .07);
  --shadow: 0 16px 40px rgba(10, 11, 16, .13), 0 42px 90px rgba(10, 11, 16, .11);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.58; -webkit-font-smoothing: antialiased; }
img, picture, video, svg { display: block; max-width: 100%; }
figure, figcaption, blockquote, dl, dd { margin: 0; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); text-wrap: balance; }
h1, h2 { font-weight: 800; letter-spacing: -.045em; line-height: .99; }
h1 { font-size: clamp(3rem, 5.1vw, 4.65rem); }
h2 { font-size: clamp(2.2rem, 3.6vw, 3.25rem); }
h3 { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.2; letter-spacing: -.025em; }
a { color: var(--gold-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
:where(a, button, summary, video):focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 8px; }
::selection { background: var(--gold-bright); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap); }
.section { position: relative; padding-block: var(--section-y); }
.section-paper { background: var(--paper); }
.section-goldwash { background:
  radial-gradient(circle at 84% 12%, rgba(98,196,221,.13), transparent 22rem),
  radial-gradient(circle at 70% 88%, rgba(158,66,109,.09), transparent 26rem),
  linear-gradient(135deg, #f7edda, #fff9f0 44%, #f8e6dd); }
.mt { margin-top: clamp(30px, 3.5vw, 48px); }
.mt-l { margin-top: clamp(38px, 4vw, 58px); }
.em { color: var(--gold-text); }
.brand-text { white-space: nowrap; }
.brand-text > span:first-child { color: var(--gold-text); }
.brand-text > span:last-child { color: var(--text); }

.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--gold-text); font-size: .77rem; font-weight: 800; letter-spacing: .125em; line-height: 1.4; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 29px; height: 2px; flex: none; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr); align-items: end; gap: clamp(32px, 7vw, 110px); }
.intro-copy { display: grid; gap: 14px; }
.intro-copy p { color: var(--text-soft); font-size: 1.04rem; }
.lede { max-width: 36rem; color: var(--text-soft); font-size: 1.08rem; }

/* Rich, dark navigation rail with a quiet woven texture and dimensional controls. */
.nav { position: sticky; top: 0; z-index: 60; color: var(--on-ink); background:
  linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.035) 34.2% 34.5%, transparent 34.7% 100%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px),
  linear-gradient(90deg, #080a10, #161824 52%, #080a10);
  border-bottom: 1px solid rgba(244, 202, 119, .27);
  box-shadow: 0 6px 24px rgba(7, 8, 12, .14);
  transition: box-shadow .2s ease, background .2s ease;
}
.nav::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .55; }
.nav.is-stuck { box-shadow: 0 10px 30px rgba(7, 8, 12, .25); }
.nav-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brandmark { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brandmark .emblem { width: auto; height: 40px; aspect-ratio: 1203 / 1526; flex: none; }
.brandmark .wordmark { width: auto; height: 20px; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav-links a { display: block; position: relative; padding: 11px 14px; color: #e6e4e1; font-size: .86rem; font-weight: 650; text-decoration: none; }
.nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--gold-bright); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { min-height: 44px; display: grid; place-items: center; padding: 0 17px; border: 1px solid rgba(244,202,119,.44); border-radius: 10px; color: #fff7e8; background: rgba(255,255,255,.06); font-size: .82rem; font-weight: 750; list-style: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary { border-color: var(--gold-bright); background: rgba(244,202,119,.13); }
.mobile-menu-panel { position: absolute; z-index: 80; top: calc(100% + 11px); right: 0; width: min(330px, calc(100vw - 40px)); display: grid; padding: 10px; border: 1px solid rgba(244,202,119,.3); border-radius: 16px; background: linear-gradient(145deg, #171a27, #080a10); box-shadow: 0 24px 54px rgba(4,5,9,.42); }
.mobile-menu-panel a { padding: 12px 14px; border-radius: 9px; color: #efede8; font-size: .91rem; font-weight: 650; text-decoration: none; }
.mobile-menu-panel a:hover { color: #fff; background: rgba(255,255,255,.07); }
.mobile-menu-panel .mobile-menu-cta { margin-top: 6px; color: #17120a; background: linear-gradient(145deg, #f8d88e, #d79b3d 58%, #b9781e); box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 7px 18px rgba(0,0,0,.24); }

.btn { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 23px; border: 1px solid transparent; border-radius: 12px; font: 700 .91rem/1 var(--sans); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { color: #17120a; background: linear-gradient(145deg, #f8d88e, #d79b3d 58%, #b9781e); border-color: #ffd991; box-shadow: inset 0 1px 0 rgba(255,255,255,.58), inset 0 -2px 0 rgba(91,49,3,.2), 0 7px 18px rgba(117,72,10,.25); }
.btn-primary:hover { color: #090704; background: linear-gradient(145deg, #ffe5aa, #e9ad4a 58%, #c88726); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(91,49,3,.18), 0 11px 25px rgba(117,72,10,.31); }
.btn-secondary, .btn-quiet { color: var(--text); background: linear-gradient(145deg, #fffefb, #f4e8d7); border-color: rgba(167,109,23,.34); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(112,69,10,.11), 0 7px 18px rgba(56,39,16,.12); }
.btn-secondary:hover, .btn-quiet:hover { color: var(--ink); border-color: var(--gold-deep); background: linear-gradient(145deg, #fff, #f8eddd); box-shadow: inset 0 1px 0 #fff, 0 11px 24px rgba(56,39,16,.17); }
.nav .btn { min-height: 45px; padding-inline: 19px; border-radius: 10px; }

.launch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.launch-actions .btn, .close-actions .btn { min-width: 190px; }
.platform-status { flex-basis: 100%; color: var(--text-faint); font-size: .8rem; line-height: 1.45; }
.trust-line { color: var(--text-faint); font-size: .84rem; }
[hidden] { display: none !important; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn { min-height: 58px; display: inline-flex; align-items: center; gap: 12px; padding: 7px 21px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; box-shadow: var(--shadow-sm); }
.store-btn svg { width: 25px; fill: currentColor; }
.store-btn span { display: block; line-height: 1.1; }
.store-kicker { color: var(--gold-bright); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.store-name { font-weight: 650; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; font-weight: 750; text-decoration: none; }
.text-link span { transition: transform .2s var(--ease); }
.text-link:hover span { transform: translateX(4px); }

/* Hero: tightly tucked under the rail; phone is 11% larger than the previous 620px cap. */
.hero { position: relative; overflow: hidden; padding: clamp(28px, 3.6vw, 48px) 0 clamp(24px, 2.2vw, 34px); background:
  radial-gradient(circle at 73% 21%, rgba(244,202,119,.26), transparent 27rem),
  radial-gradient(circle at 7% 84%, rgba(98,196,221,.11), transparent 30rem),
  linear-gradient(135deg, #fffaf2, #fbf5eb 55%, #f5eadb); }
.hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; top: -170px; border: 1px solid rgba(167,109,23,.15); border-radius: 50%; box-shadow: 0 0 0 48px rgba(216,162,72,.035), 0 0 0 96px rgba(216,162,72,.025); }
.hero-inner { position: relative; z-index: 1; min-height: 690px; display: grid; grid-template-columns: minmax(0, .97fr) minmax(460px, .83fr); align-items: center; gap: clamp(30px, 5vw, 76px); }
.hero-copy { align-self: start; padding-top: 30px; }
.hero h1 { max-width: 13ch; margin-bottom: 22px; font-size: clamp(2.85rem, 4.05vw, 3.75rem); }
.hero-sub { max-width: 35rem; color: var(--text-soft); font-size: clamp(1.08rem, 1.35vw, 1.23rem); line-height: 1.55; }
.checks { display: grid; gap: 10px; list-style: none; }
.hero-checks { margin: 23px 0 28px; }
.checks li { position: relative; padding-left: 28px; color: var(--text-soft); font-size: .93rem; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .44em; width: 14px; height: 8px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); }
.hero-stage { position: relative; min-height: 690px; display: flex; align-items: center; justify-content: center; }
.hero-halo { position: absolute; width: 430px; height: 610px; border-radius: 48% 52% 48% 52% / 43% 44% 56% 57%; background: linear-gradient(155deg, #ffd689, #ee7e60 48%, #7bc6d8); opacity: .62; transform: rotate(8deg); box-shadow: inset 0 1px 1px rgba(255,255,255,.7); }
.phone { position: relative; width: auto; flex: none; padding: 9px; border-radius: 48px; aspect-ratio: 1290 / 2796; background: linear-gradient(145deg, #555966, #111218 31%, #2b2e38 65%, #08090d); box-shadow: 0 20px 45px rgba(11,10,16,.23), 0 60px 110px rgba(11,10,16,.2), inset 0 0 0 1px rgba(255,255,255,.17); transform: translateZ(0); }
.phone-hero { height: min(76vh, 690px); z-index: 3; margin-left: -10%; }
.phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 39px; background: #08090d; contain: paint; transform: translateZ(0); backface-visibility: hidden; }
.phone-screen video, .phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; }
.phone::after { content: ""; position: absolute; z-index: 4; top: 23px; left: 50%; width: 31%; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #07080b; }
.photo-frame { position: relative; overflow: hidden; border: 5px solid rgba(255,255,255,.9); border-radius: 24px; background: var(--cream-2); box-shadow: var(--shadow); transform: translateZ(0); }
.photo-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.72); border-radius: inherit; pointer-events: none; }
.photo-frame img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-photo { position: absolute; z-index: 2; right: -2%; bottom: 2%; width: min(44%, 260px); transform: rotate(3deg); }
.hero-note { position: absolute; z-index: 5; left: 1%; top: 23%; display: grid; grid-template-columns: 10px auto; column-gap: 9px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: rgba(255,255,255,.9); backdrop-filter: blur(9px); box-shadow: var(--shadow-sm); color: var(--text); font-size: .73rem; line-height: 1.3; }
.hero-note-dot { grid-row: 1 / 3; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: #4d9e61; box-shadow: 0 0 0 4px rgba(77,158,97,.14); }
.hero-note strong { font-family: var(--display); font-size: .8rem; }
.hero-note span:last-child { color: var(--text-faint); }
.hero-proof { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border-block: 1px solid rgba(137,89,14,.18); }
.hero-proof div { display: grid; gap: 2px; padding: 20px clamp(14px, 2.5vw, 34px); }
.hero-proof div + div { border-left: 1px solid rgba(137,89,14,.18); }
.hero-proof strong { font-family: var(--display); font-size: .93rem; }
.hero-proof span { color: var(--text-faint); font-size: .78rem; }

.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.problem { padding-block: clamp(42px, 3.6vw, 56px); }
.problem .intro { align-items: start; }
.problem-card { min-height: 235px; position: relative; padding: clamp(24px, 3vw, 38px); background: #fff; }
.problem-card:nth-child(2) { background: #fff8ef; }
.problem-card:nth-child(3) { background: #f2f8fa; }
.problem-card + .problem-card { border-left: 1px solid var(--line); }
.problem-card h3 { margin: 12px 0 9px; font-size: 1.28rem; }
.problem-card p { color: var(--text-soft); font-size: .93rem; }
.card-num { display: block; color: var(--gold-deep); font: 800 2.2rem/1 var(--display); opacity: .76; }

.how-layout { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(360px, .72fr) minmax(600px, 1.28fr); align-items: start; gap: clamp(28px, 4vw, 58px); }
.how-layout::after { content: ""; position: absolute; z-index: -1; top: -14px; right: calc(var(--gutter) - 18px); width: 58%; aspect-ratio: 16 / 9; border: 1px solid rgba(167,109,23,.25); border-radius: 34px; background: linear-gradient(135deg, rgba(244,202,119,.15), rgba(98,196,221,.09) 55%, rgba(158,66,109,.11)); transform: rotate(1.4deg); }
.how-layout .campaign-frame { margin-top: 0; }
.steps { position: relative; display: grid; gap: 4px; }
.steps::before { content: ""; position: absolute; left: 20px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(var(--gold), rgba(216,162,72,.12)); }
.steps article { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 14px 0; }
.steps article > span { z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #e7be76; border-radius: 50%; background: #fffaf0; color: var(--gold-deep); font: 800 .84rem/1 var(--display); box-shadow: 0 3px 12px rgba(122,76,12,.1); }
.steps h3 { margin-bottom: 5px; }
.steps p { color: var(--text-soft); font-size: .91rem; }
.campaign-frame { overflow: hidden; position: relative; border: 6px solid rgba(255,255,255,.72); border-radius: var(--r-lg); background: #ddd; box-shadow: var(--shadow); }
.campaign-frame picture, .campaign-frame img { width: 100%; }
.campaign-frame img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.campaign-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.65); border-radius: inherit; pointer-events: none; }
.campaign-frame figcaption { position: absolute; z-index: 2; inset: auto 20px 20px; display: grid; gap: 1px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.58); border-radius: 14px; background: rgba(9,11,18,.82); color: #fff; backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.campaign-frame figcaption strong { font-family: var(--display); font-size: .9rem; }
.campaign-frame figcaption span { color: #d7d4cf; font-size: .75rem; }

.people { background: var(--cream); }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.people-card { min-width: 0; }
.people-card .photo-frame { border-width: 4px; border-radius: 20px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s ease; }
.people-card:nth-child(even) { margin-top: 28px; }
.people-card:hover .photo-frame { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--shadow); }
.people-card figcaption { padding: 17px 6px 0; }
.people-card h3 { margin-bottom: 6px; }
.people-card p { color: var(--text-soft); font-size: .86rem; }

.demo-section { overflow: hidden; color: var(--on-ink); background:
  radial-gradient(circle at 78% 32%, rgba(216,162,72,.22), transparent 30rem),
  radial-gradient(circle at 8% 90%, rgba(36,110,140,.24), transparent 32rem),
  repeating-linear-gradient(135deg, rgba(255,255,255,.017) 0 1px, transparent 1px 10px),
  var(--ink); }
.demo-section .eyebrow, .demo-section .em { color: var(--gold-bright); }
.demo-layout { min-height: 670px; display: grid; grid-template-columns: minmax(0, .88fr) minmax(440px, .72fr); align-items: center; gap: clamp(38px, 7vw, 110px); }
.demo-lede { max-width: 34rem; margin-top: 19px; color: var(--on-ink-soft); font-size: 1.05rem; }
.demo-tabs { display: grid; gap: 9px; margin-top: 30px; }
.demo-tab { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 11px; padding: 16px 18px; border: 1px solid var(--line-ink); border-radius: 14px; background: rgba(255,255,255,.035); color: var(--on-ink); text-align: left; font-family: var(--sans); cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s var(--ease); }
.demo-tab:hover { transform: translateX(3px); background: rgba(255,255,255,.065); border-color: rgba(244,202,119,.45); }
.demo-tab.is-active { border-color: var(--gold); background: linear-gradient(90deg, rgba(216,162,72,.17), rgba(255,255,255,.035)); box-shadow: inset 3px 0 0 var(--gold); }
.demo-tab > span { grid-row: 1 / 3; color: var(--gold-bright); font-size: .72rem; font-weight: 800; letter-spacing: .05em; }
.demo-tab strong { font-size: .93rem; }
.demo-tab small { color: #aaaab1; font-size: .78rem; }
.demo-tab::after { content: "Details ↗"; grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--gold-bright); font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .72; transition: opacity .18s ease, transform .18s var(--ease); }
.demo-tab:hover::after, .demo-tab:focus-visible::after { opacity: 1; transform: translateX(2px); }
.demo-stage { position: relative; min-height: 670px; display: grid; place-items: center; }
.phone-demo { z-index: 2; height: min(74vh, 650px); }
.demo-orbit { position: absolute; border: 1px solid rgba(244,202,119,.18); border-radius: 50%; }
.orbit-one { width: 510px; height: 510px; }
.orbit-two { width: 650px; height: 650px; border-color: rgba(98,196,221,.12); }
.trust-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 24px; overflow: hidden; padding-inline: var(--gutter); border-radius: 22px; background: var(--line-ink); }
.trust-panel > div { position: relative; padding: 26px 26px 25px 62px; background: #151823; }
.trust-panel > div[data-explainer] { cursor: pointer; transition: background .2s ease, box-shadow .2s ease, transform .2s var(--ease); }
.trust-panel > div[data-explainer]:hover { z-index: 1; background: #1b1e2a; box-shadow: inset 0 0 0 1px rgba(244,202,119,.32); transform: translateY(-2px); }
.trust-panel > div > span { position: absolute; left: 24px; top: 28px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(244,202,119,.42); border-radius: 50%; color: var(--gold-bright); font-size: .78rem; }
.trust-panel strong { display: block; font-family: var(--display); font-size: .91rem; }
.trust-panel p { margin-top: 3px; color: #aaaab1; font-size: .75rem; }

.close-section { background: #fff; }
.close-grid { display: grid; grid-template-columns: minmax(460px, 1fr) minmax(400px, .87fr); align-items: center; gap: clamp(38px, 6vw, 84px); }
.close-image { transform: rotate(-1.2deg); }
.close-copy h2 { margin-bottom: 22px; }
.faq { display: grid; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 2px; list-style: none; cursor: pointer; font-size: .95rem; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--gold-deep); font-size: 1.25rem; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq-body { max-width: 66ch; padding: 0 2px 18px; color: var(--text-soft); font-size: .89rem; }
.faq-body p + p { margin-top: 11px; }
.close-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }

/* Live App Store proof. The whole section is hidden until real rating data or an
   approved written review exists, so the pre-listing build never ships fake social proof. */
.app-store-voices { overflow: hidden; color: var(--on-ink); background:
  radial-gradient(circle at 14% 5%, rgba(98,196,221,.13), transparent 25rem),
  radial-gradient(circle at 86% 84%, rgba(216,162,72,.18), transparent 31rem),
  repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 10px),
  linear-gradient(135deg, #080a11, #141724 58%, #090a10); }
.app-store-voices::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-block: 1px solid rgba(244,202,119,.19); }
.app-store-voices .eyebrow, .app-store-voices .em, .app-store-voices .text-link { color: var(--gold-bright); }
.app-store-voices-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(28px, 6vw, 90px); }
.app-store-voices-head h2 { max-width: 16ch; }
.app-store-voices-lede { max-width: 49rem; margin-top: 18px; color: var(--on-ink-soft); font-size: 1.03rem; }
.app-store-rating { min-width: 270px; display: flex; align-items: center; gap: 17px; padding: 20px 22px; border: 1px solid rgba(244,202,119,.32); border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 22px 50px rgba(0,0,0,.23); }
.app-store-rating > strong { color: #fff; font: 800 clamp(2.4rem, 4vw, 3.5rem)/1 var(--display); letter-spacing: -.06em; }
.app-store-rating p { margin-top: 3px; color: var(--on-ink-soft); font-size: .78rem; }
.rating-stars { position: relative; width: max-content; color: #545560; font-size: 1.1rem; letter-spacing: .08em; line-height: 1; }
.rating-stars span + span { position: absolute; inset: 0; width: var(--rating-fill, 0%); overflow: hidden; color: var(--gold-bright); white-space: nowrap; }
.app-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 48px); }
.app-review-card { position: relative; padding: clamp(22px, 2.5vw, 30px); border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 20px 44px rgba(0,0,0,.2); }
.app-review-stars { margin-bottom: 16px; color: var(--gold-bright); font-size: .82rem; letter-spacing: .16em; }
.app-review-card h3 { color: #fff; }
.app-review-card blockquote { margin-top: 12px; color: var(--on-ink-soft); font-size: .92rem; }
.app-review-author { margin-top: 20px; color: #fff; font-size: .78rem; font-weight: 750; }
.app-review-author span { color: var(--on-ink-soft); font-weight: 400; }
.app-store-voices-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; color: var(--on-ink-soft); font-size: .78rem; }
.app-store-voices-foot .text-link { margin-top: 0; }

/* Product pages: the same compact rhythm as home, with richer editorial hierarchy. */
.subhero { overflow: hidden; padding-block: clamp(34px, 4.2vw, 58px); background:
  radial-gradient(circle at 7% 92%, rgba(98,196,221,.12), transparent 28rem),
  radial-gradient(circle at 83% 12%, rgba(216,162,72,.21), transparent 26rem),
  linear-gradient(135deg, #fffaf2, #f7ecda 58%, #f6e8e2); }
.subhero-grid { min-height: 585px; display: grid; grid-template-columns: minmax(0,.84fr) minmax(540px,1.05fr); align-items: center; gap: clamp(36px,5vw,74px); }
.subhero-copy h1 { max-width: 12ch; }
.subhero-lede { max-width: 38rem; margin: 22px 0 27px; color: var(--text-soft); font-size: clamp(1.05rem,1.25vw,1.2rem); line-height: 1.6; }
.preview-note { max-width: 58ch; margin-top: 20px; padding: 13px 15px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.68); color: var(--text-soft); font-size: .78rem; line-height: 1.5; }
.preview-note strong { color: var(--text); }
.preview-note-ink { border-color: var(--gold-bright); background: rgba(255,255,255,.07); color: var(--on-ink-soft); }
.preview-note-ink strong { color: var(--gold-bright); }
.subhero-media { width: 100%; }
.compact-intro { align-items: start; }
.compact-intro h2 { max-width: 16ch; }
.journey-grid { display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.journey-card { min-height: 310px; display: flex; flex-direction: column; padding: clamp(28px,3vw,40px); background: #fff; }
.journey-card[data-explainer] { cursor: pointer; transition: transform .24s var(--ease), box-shadow .24s ease; }
.journey-card[data-explainer]:hover { z-index: 1; transform: translateY(-4px); box-shadow: var(--shadow); }
.journey-card[data-explainer]::after { content: "Open details ↗"; margin-top: 13px; color: var(--gold-deep); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.journey-card:nth-child(2) { background: #fff7e9; }
.journey-card:nth-child(3) { background: #f0f7f9; }
.journey-card + .journey-card { border-left: 1px solid var(--line); }
.journey-card > span { color: var(--gold-deep); font: 800 2.25rem/1 var(--display); opacity: .72; }
.journey-card h3 { margin: 22px 0 10px; font-size: 1.35rem; }
.journey-card p { color: var(--text-soft); font-size: .93rem; }
.journey-card strong { margin-top: auto; padding-top: 25px; color: var(--gold-text); font-size: .78rem; letter-spacing: .075em; text-transform: uppercase; }
.product-split { min-height: 640px; display: grid; grid-template-columns: minmax(0,.86fr) minmax(430px,.68fr); align-items: center; gap: clamp(40px,7vw,105px); }
.product-copy h2 { max-width: 14ch; }
.checks-ink li { color: var(--on-ink-soft); }
.checks-ink li::before { border-color: var(--gold-bright); }
.on-ink-link { color: var(--gold-bright); }
.on-ink-link:hover { color: #fff; }
.product-phone-stage { min-height: 630px; }
.promise-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(430px,.7fr); align-items: start; gap: clamp(46px,8vw,120px); }
.promise-copy h2 { max-width: 12ch; }
.promise-copy .lede { margin-top: 20px; }
.promise-list { display: grid; overflow: hidden; border: 1px solid rgba(121,74,10,.18); border-radius: 22px; background: rgba(255,255,255,.67); box-shadow: var(--shadow-sm); }
.promise-list article { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 22px 24px; }
.promise-list article + article { border-top: 1px solid var(--line); }
.promise-list article > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold-bright); font-size: .75rem; }
.promise-list h3 { margin-bottom: 4px; }
.promise-list p { color: var(--text-soft); font-size: .87rem; }

.subhero-ink { color: var(--on-ink); background:
  radial-gradient(circle at 73% 37%, rgba(216,162,72,.25), transparent 26rem),
  radial-gradient(circle at 8% 95%, rgba(36,110,140,.25), transparent 31rem),
  repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 10px), var(--ink); }
.subhero-ink .eyebrow, .subhero-ink .em { color: var(--gold-bright); }
.subhero-ink .subhero-lede { color: var(--on-ink-soft); }
.btn-on-ink { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.btn-on-ink:hover { color: #fff; border-color: var(--gold); background: rgba(255,255,255,.12); }
.gift-stage { position: relative; min-height: 625px; }
.phone-gift { position: absolute; z-index: 2; right: 5%; top: 50%; height: 600px; transform: translateY(-50%); }
.gift-editorial { position: absolute; left: 2%; bottom: 0; width: 48%; max-width: 310px; transform: rotate(-3deg); }
.gift-editorial img { aspect-ratio: 4/5; object-fit: cover; }
.signal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.signal-card { min-height: 245px; padding: 29px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(155deg,#fff,#fffaf2); box-shadow: var(--shadow-sm); }
.signal-card > span { color: var(--gold-text); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }
.signal-card h3 { margin: 35px 0 10px; font-size: 1.32rem; }
.signal-card p { color: var(--text-soft); font-size: .9rem; }
.result-layout { display: grid; grid-template-columns: minmax(0,.72fr) minmax(520px,.82fr); align-items: center; gap: clamp(42px,7vw,100px); }
.result-copy h2 { max-width: 14ch; }
.result-copy .lede { margin-top: 20px; }
.result-stack { display: grid; gap: 12px; }
.result-stack article { position: relative; padding: 23px 25px 23px 90px; border: 1px solid rgba(121,74,10,.17); border-radius: 17px; background: rgba(255,255,255,.77); box-shadow: var(--shadow-sm); }
.result-stack article::before { content: counter(result); position: absolute; left: 26px; top: 24px; color: var(--gold-deep); font: 800 1.8rem/1 var(--display); opacity: .7; }
.result-stack { counter-reset: result; }
.result-stack article { counter-increment: result; }
.result-stack article > span { color: var(--gold-text); font-size: .63rem; font-weight: 800; letter-spacing: .11em; }
.result-stack h3 { margin: 5px 0 5px; }
.result-stack p { color: var(--text-soft); font-size: .84rem; }
.privacy-band { display: grid; grid-template-columns: 120px minmax(0,1fr) minmax(220px,.45fr); align-items: center; gap: clamp(30px,5vw,70px); }
.privacy-mark { width: 108px; height: 108px; margin: 0; border-radius: 30px; box-shadow: var(--shadow); }
.privacy-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.privacy-band h2 { max-width: 14ch; }
.privacy-band .lede { margin-top: 18px; }
.privacy-facts { display: grid; gap: 9px; padding: 22px; border-left: 1px solid var(--line); }
.privacy-facts strong { font-size: .85rem; }
.privacy-facts a { margin-top: 8px; font-size: .82rem; font-weight: 750; text-decoration: none; }

.app-hero { color: var(--on-ink); background:
  radial-gradient(circle at 70% 42%, rgba(216,162,72,.24), transparent 25rem),
  radial-gradient(circle at 10% 95%, rgba(36,110,140,.26), transparent 30rem),
  repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 10px), var(--ink); }
.app-hero .eyebrow, .app-hero .em { color: var(--gold-bright); }
.app-hero .subhero-lede { color: var(--on-ink-soft); }
.app-hero-grid { min-height: 690px; display: grid; grid-template-columns: minmax(0,.85fr) minmax(470px,.7fr); align-items: center; gap: clamp(36px,6vw,90px); }
.app-phone-stage { min-height: 690px; }
.phone-app-page { z-index: 2; height: min(76vh,660px); }
.capability-spotlight { overflow: hidden; padding-block: clamp(48px,5.6vw,82px); }
.spotlight-grid { display: grid; grid-template-columns: minmax(0,.98fr) minmax(420px,.72fr); align-items: center; gap: clamp(42px,7vw,108px); }
.spotlight-grid-reverse { grid-template-columns: minmax(420px,.72fr) minmax(0,.98fr); }
.spotlight-copy h2 { max-width: 15ch; }
.spotlight-copy .lede { max-width: 39rem; margin-top: 20px; color: var(--text-soft); font-size: 1rem; }
.spotlight-points { display: grid; gap: 8px; margin: 27px 0 22px; }
.spotlight-points button { width: 100%; display: grid; gap: 3px; padding: 16px 17px; border: 1px solid rgba(121,74,10,.18); border-radius: 14px; color: var(--text); background: rgba(255,255,255,.72); text-align: left; font-family: var(--sans); cursor: pointer; box-shadow: 0 8px 24px rgba(63,41,14,.045); transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.spotlight-points button:hover { transform: translateX(4px); border-color: rgba(167,109,23,.52); background: #fff; box-shadow: var(--shadow-sm); }
.spotlight-points strong { padding-right: 24px; font: 750 .93rem/1.35 var(--display); }
.spotlight-points strong::after { content: "↗"; float: right; margin-right: -24px; color: var(--gold-deep); }
.spotlight-points span { color: var(--text-soft); font-size: .81rem; line-height: 1.5; }
.spotlight-points-ink button { border-color: var(--line-ink); color: var(--on-ink); background: rgba(255,255,255,.04); box-shadow: none; }
.spotlight-points-ink button:hover { border-color: rgba(244,202,119,.48); background: rgba(255,255,255,.075); box-shadow: inset 3px 0 0 var(--gold); }
.spotlight-points-ink strong::after { color: var(--gold-bright); }
.spotlight-points-ink span { color: var(--on-ink-soft); }
.spotlight-stage { min-height: 650px; isolation: isolate; }
.spotlight-stage::before { content: ""; position: absolute; z-index: -2; width: 470px; height: 470px; border: 1px solid rgba(167,109,23,.2); border-radius: 50%; box-shadow: 0 0 0 52px rgba(216,162,72,.045); }
.phone-spotlight { z-index: 2; height: min(72vh,620px); }
.film-note { position: absolute; z-index: 3; right: 0; bottom: 6%; display: grid; gap: 2px; max-width: 270px; padding: 12px 14px; border: 1px solid rgba(121,74,10,.17); border-radius: 13px; color: var(--text); background: rgba(255,255,255,.88); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }
.film-note strong { font: 750 .77rem/1.3 var(--display); }
.film-note span { color: var(--text-soft); font-size: .66rem; line-height: 1.4; }
.film-note-ink { border-color: rgba(255,255,255,.16); color: var(--on-ink); background: rgba(15,17,24,.9); }
.film-note-ink span { color: var(--on-ink-soft); }
.app-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.app-feature { min-height: 240px; padding: 27px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.app-feature[data-explainer] { position: relative; padding-bottom: 55px; cursor: pointer; transition: transform .24s var(--ease), border-color .24s ease, box-shadow .24s ease; }
.app-feature[data-explainer]:hover { transform: translateY(-4px); border-color: rgba(167,109,23,.42); box-shadow: var(--shadow); }
.app-feature[data-explainer]::after { content: "Open details ↗"; position: absolute; left: 24px; bottom: 23px; color: var(--gold-deep); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.app-feature strong { color: var(--gold-text); font-size: .68rem; letter-spacing: .12em; }
.app-feature h3 { margin: 32px 0 10px; font-size: 1.18rem; }
.app-feature p { color: var(--text-soft); font-size: .86rem; }
.media-callout { display: grid; grid-template-columns: minmax(480px,.9fr) minmax(0,.7fr); align-items: center; gap: clamp(38px,6vw,80px); }
.media-callout h2 { max-width: 14ch; }
.media-callout .lede { margin: 20px 0 26px; }

/* Apple-device ecosystem: real Watch capture beside a compact, code-native widget. */
.device-ecosystem { overflow: hidden; color: var(--on-ink); background:
  radial-gradient(circle at 78% 46%, rgba(216,162,72,.24), transparent 28rem),
  radial-gradient(circle at 12% 88%, rgba(36,110,140,.22), transparent 30rem),
  repeating-linear-gradient(135deg,rgba(255,255,255,.017) 0 1px,transparent 1px 10px),
  var(--ink); }
.device-ecosystem .eyebrow, .device-ecosystem .em { color: var(--gold-bright); }
.device-ecosystem .lede { margin-top: 20px; color: var(--on-ink-soft); }
.ecosystem-grid { min-height: 610px; display: grid; grid-template-columns: minmax(0,.92fr) minmax(470px,.68fr); align-items: center; gap: clamp(42px,7vw,104px); }
.ecosystem-copy h2 { max-width: 14ch; }
.ecosystem-points { display: grid; gap: 1px; margin-top: 28px; overflow: hidden; border: 1px solid var(--line-ink); border-radius: 20px; background: var(--line-ink); }
.ecosystem-points article { display: grid; gap: 3px; padding: 18px 20px; background: rgba(20,23,34,.94); }
.ecosystem-points strong { color: var(--on-ink); font: 700 .92rem/1.3 var(--display); }
.ecosystem-points span { color: var(--on-ink-soft); font-size: .82rem; line-height: 1.5; }
.wrist-privacy { margin-top: 18px; color: #aeadb2; font-size: .79rem; line-height: 1.55; }
.wrist-privacy strong { color: var(--gold-bright); }
.explainer-inline { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 18px; padding: 12px 15px; border: 1px solid rgba(167,109,23,.28); border-radius: 12px; color: var(--text); background: #fff; font: 750 .78rem/1.2 var(--sans); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), border-color .2s ease, background .2s ease; }
.explainer-inline:hover { transform: translateX(3px); border-color: var(--gold-deep); }
.explainer-inline span { color: var(--gold-deep); font-size: 1rem; }
.explainer-inline-ink { color: var(--on-ink); border-color: rgba(244,202,119,.28); background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.explainer-inline-ink:hover { border-color: var(--gold-bright); background: rgba(255,255,255,.09); }
.explainer-inline-ink span { color: var(--gold-bright); }
.ecosystem-stage { position: relative; min-height: 570px; display: grid; place-items: center; isolation: isolate; }
.ecosystem-stage::before { content: ""; position: absolute; z-index: -2; width: 470px; height: 470px; border: 1px solid rgba(244,202,119,.25); border-radius: 50%; box-shadow: 0 0 0 58px rgba(216,162,72,.035); }
.widget-card { position: absolute; z-index: -1; top: 5%; right: 0; width: min(390px,78%); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 22px; border: 1px solid rgba(244,202,119,.3); border-radius: 25px; background: linear-gradient(145deg,#242019,#101117 56%,#18141a); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 48px rgba(0,0,0,.34); transform: rotate(2deg); }
.widget-card > div { display: grid; gap: 3px; }
.widget-kicker { color: var(--gold-bright); font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.widget-card strong { font-family: var(--display); font-size: 1.15rem; }
.widget-card small { color: #aaaab1; font-size: .72rem; }
.widget-days { width: 54px; height: 54px; display: grid; place-items: center; flex: none; border: 1px solid rgba(244,202,119,.4); border-radius: 50%; color: var(--gold-bright); background: rgba(216,162,72,.11); font: 800 1.45rem/1 var(--display); }
.watch-shell { position: relative; z-index: 2; width: min(330px,66%); padding: 20px 17px; border: 1px solid rgba(255,255,255,.22); border-radius: 37% / 31%; background: linear-gradient(145deg,#5d6069,#16171d 25%,#08090c 75%,#343640); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.47); }
.watch-crown { position: absolute; right: -17px; top: 33%; width: 18px; height: 58px; border: 2px solid #15161c; border-radius: 0 10px 10px 0; background: repeating-linear-gradient(0deg,#3c3f48 0 2px,#16171d 2px 4px); }
.watch-screen { overflow: hidden; aspect-ratio: 416 / 496; border: 1px solid rgba(255,255,255,.12); border-radius: 34% / 28%; background: #050609; transform: translateZ(0); }
.watch-screen video { width: 100%; height: 100%; object-fit: cover; }
.ecosystem-caption { position: absolute; right: 0; bottom: 8%; display: grid; gap: 1px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(15,17,24,.88); backdrop-filter: blur(8px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.ecosystem-caption strong { font: 700 .78rem/1.3 var(--display); }
.ecosystem-caption span { color: #aaaab1; font-size: .68rem; }

.status-hero { padding-block: clamp(40px,5vw,68px); background:
  radial-gradient(circle at 12% 20%,rgba(98,196,221,.14),transparent 23rem),
  radial-gradient(circle at 84% 25%,rgba(216,162,72,.24),transparent 28rem),
  linear-gradient(135deg,#fffaf2,#f6ecdd 58%,#f7e7e3); }
.status-hero-inner { min-height: 480px; display: grid; grid-template-columns: 210px minmax(0,760px); align-items: center; justify-content: center; gap: clamp(38px,6vw,82px); }
.status-icon { position: relative; }
.status-icon::before { content:""; position:absolute; inset:-28px; border:1px solid rgba(167,109,23,.2); border-radius:45px; transform:rotate(-5deg); }
.status-icon img { position:relative; width: 180px; height: 180px; border-radius: 40px; box-shadow: var(--shadow); }
.status-hero h1 { max-width: 13ch; }
.availability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.availability-card { min-height: 260px; padding: 31px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.availability-card > span { color: var(--gold-text); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.availability-card h2 { margin: 42px 0 12px; font-size: 1.7rem; }
.availability-card p { color: var(--text-soft); font-size: .9rem; }
.launch-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(490px,.8fr); gap: clamp(44px,7vw,100px); }
.launch-grid h2 { max-width: 15ch; }
.launch-grid .lede { margin-top: 20px; }
.launch-list { display: grid; list-style: none; }
.launch-list li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(121,74,10,.16); }
.launch-list li > span { color: var(--gold-deep); font: 800 1.25rem/1 var(--display); }
.launch-list h3 { margin-bottom: 4px; }
.launch-list p { color: var(--text-soft); font-size: .86rem; }

.footer { padding: 62px 0 27px; color: var(--on-ink-soft); background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 1px, transparent 1px 10px), var(--ink); border-top: 1px solid rgba(244,202,119,.28); }
.footer .brandmark .emblem { height: 37px; }
.footer .brandmark .wordmark { height: 19px; }
.footer-top { display: grid; grid-template-columns: 1.55fr repeat(3, 1fr); gap: clamp(24px, 4vw, 54px); }
.footer h4 { margin-bottom: 13px; color: var(--gold-bright); font-size: .71rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer ul { display: grid; gap: 8px; list-style: none; }
.footer a { color: var(--on-ink-soft); font-size: .86rem; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer-brand p { max-width: 28ch; margin-top: 14px; font-size: .84rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-ink); font-size: .76rem; }

/* Support, privacy and terms retain a calmer reading surface without oversized gaps. */
.doc { padding-block: clamp(42px, 5vw, 68px); background:
  radial-gradient(circle at 12% 4%,rgba(98,196,221,.08),transparent 25rem),
  linear-gradient(180deg,var(--cream),#fff 34rem); }
.doc h1 { margin-bottom: 12px; }
.doc .updated { margin-bottom: 28px; color: var(--text-faint); font-size: .86rem; }
.doc h2 { margin: 38px 0 11px; font-size: clamp(1.5rem, 2.4vw, 2rem); scroll-margin-top: 105px; }
.doc h3 { margin: 26px 0 8px; }
.doc p, .doc li { color: var(--text-soft); }
.doc p + p { margin-top: 13px; }
.doc ul, .doc ol { display: grid; gap: 8px; margin: 13px 0 0 22px; }
.doc .wrap-narrow > p:not(.eyebrow):not(.updated),
.doc .wrap-narrow > ul,
.doc .wrap-narrow > ol { max-width: 82ch; }
.doc .callout { margin: 26px 0; padding: 21px 24px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: #fff; box-shadow: var(--shadow-sm); }
.doc .callout p { color: var(--text); }
.doc .faq { margin-top: 8px; }
.legal-summary { margin: 22px 0 26px; padding: 22px 24px; border: 1px solid rgba(121,74,10,.18); border-radius: 18px; background: linear-gradient(135deg,#fff,#fff7e9); box-shadow: var(--shadow-sm); }
.legal-summary strong { display: block; margin-bottom: 6px; color: var(--gold-text); font-family: var(--display); font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; }
.legal-summary p { color: var(--text); }
.doc-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }
.doc-index a { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.8); color: var(--text-soft); font-size: .75rem; font-weight: 650; text-decoration: none; }
.doc-index a:hover { border-color: var(--gold-deep); color: var(--text); }
.support-path { margin-top: 42px; padding: 28px; border: 1px solid rgba(121,74,10,.18); border-radius: 22px; background: linear-gradient(135deg,#fff7e9,#eef7f9); box-shadow: var(--shadow-sm); }
.support-path h2 { max-width: 16ch; margin-top: 0; }
.support-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.support-steps span { padding: 8px 12px; border-radius: 999px; background: var(--ink); color: var(--gold-bright); font-size: .74rem; font-weight: 750; }
.support-email { margin-top: 18px; color: var(--text); font-weight: 650; }
.support-email a { color: var(--gold-deep); font-weight: 800; }

.router { min-height: 65vh; display: grid; place-items: center; padding-block: clamp(58px, 8vw, 105px); text-align: center; background: radial-gradient(circle at 50% 10%, rgba(216,162,72,.16), transparent 28rem), var(--cream); }
.router-card { max-width: 650px; }
.router .eyebrow { justify-content: center; }
.router .lede { margin: 18px auto 0; }
.router .launch-actions, .router .stores { justify-content: center; margin-top: 28px; }
.router .platform-status { text-align: center; }

/* Context sidecar: it flies out of the selected control, then settles against the
   viewport edge. It is intentionally non-modal so the matching product video remains
   visible and continues playing beside the explanation. */
.explainer-panel { --fly-x: 24px; --fly-y: 0px; position: fixed; z-index: 1200; top: max(92px, 8vh); right: clamp(68px, 5vw, 96px); width: min(390px, calc(100vw - 40px)); max-height: calc(100dvh - 122px); overflow: auto; overscroll-behavior: contain; padding: 31px 27px 25px; border: 1px solid rgba(244,202,119,.42); border-radius: 24px; color: var(--on-ink); background: radial-gradient(circle at 100% 0,rgba(216,162,72,.2),transparent 15rem), repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px), rgba(15,17,25,.985); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(0,0,0,.2); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(var(--fly-x), var(--fly-y)) scale(.72); transform-origin: 50% 50%; transition: opacity .2s ease, transform .42s var(--ease), visibility 0s linear .42s; }
.explainer-panel[hidden] { display: none; }
.explainer-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0,0) scale(1); transition-delay: 0s; }
.explainer-panel.is-measuring { opacity: 0 !important; visibility: hidden !important; transform: none !important; transition: none !important; }
.explainer-panel.is-swapping { animation: explainer-swap .3s var(--ease); }
@keyframes explainer-swap { 0% { transform: scale(1); } 45% { transform: scale(.975); } 100% { transform: scale(1); } }
.explainer-accent { position: absolute; left: 27px; right: 72px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg,var(--gold-bright),var(--gold-deep),transparent); }
.explainer-close { position: sticky; z-index: 2; top: 0; float: right; width: 34px; height: 34px; display: grid; place-items: center; margin: -10px -7px 4px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: rgba(255,255,255,.07); font: 300 1.45rem/1 var(--sans); cursor: pointer; backdrop-filter: blur(8px); transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s var(--ease); }
.explainer-close:hover { color: var(--gold-bright); border-color: rgba(244,202,119,.55); background: rgba(216,162,72,.12); transform: rotate(4deg) scale(1.04); }
.explainer-eyebrow { margin: 2px 44px 9px 0; color: var(--gold-bright); font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.explainer-panel h2 { max-width: 15ch; color: #fff; font-size: clamp(1.55rem,2.2vw,2rem); line-height: 1.04; letter-spacing: -.035em; }
.explainer-copy { display: grid; gap: 10px; margin-top: 17px; }
.explainer-copy p { color: #c9c8cb; font-size: .86rem; line-height: 1.58; }
.explainer-points { display: grid; gap: 9px; margin-top: 18px; list-style: none; }
.explainer-points li { position: relative; padding-left: 22px; color: #e5e1da; font-size: .78rem; line-height: 1.4; }
.explainer-points li::before { content: "✓"; position: absolute; left: 0; top: .05em; color: var(--gold-bright); font-weight: 900; }
.explainer-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 21px; padding: 12px 14px; border: 1px solid rgba(244,202,119,.34); border-radius: 12px; color: #101117; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); font-size: .78rem; font-weight: 850; text-decoration: none; box-shadow: 0 10px 25px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .18s var(--ease), box-shadow .18s ease; }
.explainer-link:hover { color: #05060a; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6); }
[data-explainer]:focus-visible, .explainer-close:focus-visible, .explainer-link:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .56s var(--ease), transform .56s var(--ease); transition-delay: calc(var(--i, 0) * 65ms); }
.reveal-scale { transform: scale(.977) translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 100; left: 12px; top: -60px; padding: 11px 18px; border-radius: 0 0 9px 9px; background: #fff; color: var(--ink); }
.skip-link:focus { top: 0; }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .mobile-menu { display: block; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(390px, .75fr); }
  .hero-stage { transform: scale(.94); }
  .how-layout { grid-template-columns: 1fr; }
  .how-layout::after { display: none; }
  .campaign-frame { max-width: 820px; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .people-card:nth-child(even) { margin-top: 0; }
  .demo-layout { grid-template-columns: 1fr 400px; }
  .close-grid { grid-template-columns: 1fr; }
  .close-image { max-width: 820px; }
  .subhero-grid,
  .app-hero-grid,
  .product-split,
  .promise-grid,
  .result-layout,
  .media-callout,
  .launch-grid,
  .spotlight-grid,
  .spotlight-grid-reverse,
  .ecosystem-grid { grid-template-columns: 1fr; }
  .subhero-grid,
  .app-hero-grid,
  .product-split { min-height: 0; }
  .subhero-media,
  .gift-stage,
  .media-callout .campaign-frame { max-width: 820px; }
  .product-phone-stage,
  .app-phone-stage { min-height: 650px; }
  .privacy-band { grid-template-columns: 108px 1fr; }
  .privacy-facts { grid-column: 2; }
  .app-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight-grid-reverse .spotlight-copy { order: 1; }
  .spotlight-grid-reverse .spotlight-stage { order: 2; }
  .spotlight-stage { min-height: 610px; max-width: 760px; width: 100%; }
  .ecosystem-stage { min-height: 570px; max-width: 760px; width: 100%; }
}

@media (max-width: 800px) {
  .intro { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .hero-inner { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding-top: 5px; }
  .hero h1 { max-width: 13ch; }
  .hero-stage { min-height: 640px; margin-top: 18px; transform: none; }
  .phone-hero { height: 620px; margin-left: 0; }
  .hero-halo { width: 390px; height: 550px; }
  .hero-photo { right: 4%; width: 225px; }
  .hero-note { left: 10%; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { min-height: 0; }
  .problem-card + .problem-card { border-left: 0; border-top: 1px solid var(--line); }
  .demo-layout { grid-template-columns: 1fr; }
  .demo-stage { min-height: 650px; }
  .app-store-voices-head { grid-template-columns: 1fr; align-items: start; }
  .app-store-rating { min-width: 0; width: 100%; max-width: 370px; }
  .app-review-grid { grid-template-columns: 1fr; }
  .app-store-voices-foot { align-items: flex-start; flex-direction: column; }
  .explainer-panel { top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(76dvh, 650px); border-radius: 24px; transform-origin: 50% 100%; }
  .trust-panel { grid-template-columns: 1fr; }
  .journey-grid,
  .signal-grid,
  .availability-grid { grid-template-columns: 1fr; }
  .journey-card { min-height: 0; }
  .journey-card + .journey-card { border-left: 0; border-top: 1px solid var(--line); }
  .gift-stage { min-height: 590px; }
  .phone-gift { right: 8%; height: 560px; }
  .gift-editorial { width: 42%; }
  .privacy-band { grid-template-columns: 1fr; }
  .privacy-mark { width: 88px; height: 88px; border-radius: 24px; }
  .privacy-facts { grid-column: auto; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .status-hero-inner { grid-template-columns: 150px 1fr; }
  .status-icon img { width: 140px; height: 140px; border-radius: 32px; }
  .ecosystem-stage { min-height: 520px; }
  .widget-card { right: 2%; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  body { font-size: 16px; }
  .nav-inner { min-height: 70px; }
  .nav .brandmark .emblem { height: 34px; }
  .nav .brandmark .wordmark { height: 17px; }
  .nav .btn { min-height: 42px; padding-inline: 14px; font-size: .8rem; }
  .nav-actions { display: none; }
  .hero { padding-top: 23px; }
  .launch-actions { align-items: stretch; }
  .launch-actions .btn { width: 100%; }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-proof div + div { border-left: 0; border-top: 1px solid rgba(137,89,14,.18); }
  .hero-stage { min-height: 585px; }
  .phone-hero { height: 565px; }
  .hero-halo { width: 330px; height: 490px; }
  .hero-photo { width: 165px; right: -5%; bottom: 4%; }
  .hero-note { left: 0; top: 18%; }
  .people-grid { grid-template-columns: 1fr; }
  .people-card .photo-frame { max-height: 480px; }
  .people-card .photo-frame img { object-position: center 38%; }
  .demo-stage { min-height: 600px; }
  .phone-demo { height: 585px; }
  .orbit-one { width: 380px; height: 380px; }
  .orbit-two { width: 520px; height: 520px; }
  .demo-tab { grid-template-columns: 30px 1fr auto; padding: 14px; }
  .demo-tab::after { content: "↗"; font-size: .9rem; }
  .close-actions .btn { width: 100%; }
  .subhero { padding-top: 28px; }
  .subhero-grid { gap: 28px; }
  .subhero-copy h1 { font-size: clamp(2.65rem, 14vw, 3.6rem); }
  .signal-card,
  .availability-card,
  .app-feature { min-height: 0; }
  .gift-stage { min-height: 575px; }
  .phone-gift { right: 0; height: 555px; }
  .gift-editorial { left: -4%; width: 47%; }
  .product-phone-stage,
  .app-phone-stage { min-height: 600px; }
  .phone-app-page { height: 585px; }
  .spotlight-stage { min-height: 590px; }
  .phone-spotlight { height: 565px; }
  .spotlight-stage::before { width: 340px; height: 340px; box-shadow: 0 0 0 36px rgba(216,162,72,.045); }
  .film-note { right: -4px; bottom: 2%; max-width: 230px; }
  .app-feature-grid { grid-template-columns: 1fr; }
  .ecosystem-stage { min-height: 440px; }
  .ecosystem-stage::before { width: 320px; height: 320px; box-shadow: 0 0 0 34px rgba(216,162,72,.035); }
  .watch-shell { width: 240px; padding: 14px 12px; }
  .watch-crown { right: -12px; width: 13px; height: 44px; }
  .widget-card { top: 0; width: 88%; padding: 15px 16px; }
  .widget-card strong { font-size: .94rem; }
  .widget-card small { font-size: .65rem; }
  .widget-days { width: 44px; height: 44px; font-size: 1.1rem; }
  .ecosystem-caption { bottom: 1%; }
  .result-stack article { padding-left: 72px; }
  .status-hero-inner { grid-template-columns: 1fr; text-align: left; }
  .status-icon { width: 105px; }
  .status-icon img { width: 100px; height: 100px; border-radius: 24px; }
  .status-icon::before { inset: -14px; border-radius: 28px; }
  .support-path { padding: 22px 20px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer ul { gap: 0; }
  .footer a { min-height: 44px; display: flex; align-items: center; }
  .doc-index a { min-height: 44px; display: inline-flex; align-items: center; }
  .eyebrow { font-size: .8rem; }
  .people-card p,
  .app-feature p,
  .availability-card p,
  .launch-list p,
  .result-stack p,
  .promise-list p,
  .journey-card p { font-size: .875rem; }
  .demo-tab { font-size: .875rem; }
  .demo-tab small,
  .trust-panel p,
  .wrist-privacy,
  .explainer-inline,
  .preview-note,
  .footer-bottom { font-size: .8125rem; }
  .widget-card small { font-size: .75rem; }
  .spotlight-points strong { font-size: .9rem; }
  .spotlight-points span,
  .film-note span { font-size: .8125rem; }
  .doc .updated,
  .trust-line { font-size: .875rem; }
}

@media (max-width: 360px) {
  .nav .brandmark { gap: 7px; }
  .nav .brandmark .emblem { height: 27px; }
  .nav .brandmark .wordmark { height: 12px; }
  .spotlight-stage { min-height: 540px; }
  .phone-spotlight { height: 520px; }
  .film-note { max-width: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-scale { opacity: 1; transform: none; }
  .explainer-panel, .explainer-panel.is-open { transform: none; }
}

@media print {
  .nav, .footer, video, .hero-halo, .demo-orbit, .explainer-panel { display: none !important; }
  body { background: #fff; color: #000; }
}