/* screenshot.style · Screenshot Ultimate landing page · site shell (builder A)
   Tokens (spec B) first; everything below is A's components and sections. */

:root{
  color-scheme: dark;

  /* ---------- Color ---------- */
  --ink:#0A0818; --ink-2:#120E26; --ink-3:#1A1533; --ink-glass:rgba(20,16,40,.78);
  --text:#FFFFFF; --muted:rgba(255,255,255,.72); --faint:rgba(255,255,255,.60);   /* --faint: >=14px text only; .60 keeps 4.5:1 even over the brightest aurora */
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --violet:#6B3BFF; --orchid:#B03CF0; --pink:#FF4F8B; --sky:#38AAFF; --sky-2:#288CFF;
  --mac-blue:#0A84FF; --annot:#FF3B30; --highlight:#FFD60A; --danger:#FF453A;
  --focus-ring:#FFFFFF; --focus-ring-paper:#6B3BFF;
  --paper-1:#FCFBFF; --paper-2:#F3F0FF; --paper-text:#120E2A; --paper-muted:#4B4766;
  --paper-line:rgba(18,14,42,.10); --paper-line-2:rgba(18,14,42,.18);
  --glass-solid:#16122B;   /* prefers-contrast / prefers-reduced-transparency replacement */

  /* ---------- Gradients ---------- */
  --grad-brand: linear-gradient(135deg,#6B3BFF 0%,#B03CF0 55%,#FF4F8B 100%);
  --grad-icon:  linear-gradient(180deg,#6B3BFF 0%,#FF4F8C 100%);
  --grad-text:  linear-gradient(90deg,#A98BFF 0%,#E07BFF 50%,#FF8AB5 100%);        /* on ink, >=7:1 */
  --grad-text-paper: linear-gradient(90deg,#6B3BFF 0%,#B03CF0 55%,#FF4F8B 100%);   /* on paper: only >=36px bold */
  --grad-cta:   linear-gradient(100deg,#6B3BFF 0%,#8A3BF6 55%,#9A3BF2 100%);        /* white text >=4.8:1 everywhere */
  --grad-dot:   linear-gradient(135deg,#6B3BFF,#FF4F8B);
  --grad-paper: linear-gradient(180deg,#FCFBFF 0%,#F3F0FF 100%);
  --glass:      linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  --aurora-violet: radial-gradient(60vmax 50vmax at 12% 6%,  rgba(107,59,255,.50), transparent 70%);
  --aurora-pink:   radial-gradient(48vmax 42vmax at 94% 30%, rgba(255,79,139,.30), transparent 70%);
  --aurora-sky:    radial-gradient(55vmax 45vmax at 40% 108%,rgba(40,140,255,.24), transparent 70%);
  --dots:       radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px) 0 0/34px 34px;
  --dots-paper: radial-gradient(rgba(18,14,42,.07) 1px, transparent 1.2px) 0 0/34px 34px;

  /* ---------- Type ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --fs-display: min(clamp(2.75rem, 1rem + 6vw, 7.5rem), 11.5svh);   /* h1 */
  --fs-h2:   clamp(2.25rem, 1.1rem + 4.2vw, 5.25rem);
  --fs-stat: clamp(3rem, 1.4rem + 6vw, 7rem);
  --fs-h3:   clamp(1.375rem, 1rem + 1.2vw, 2rem);
  --fs-h4:   1.0625rem;
  --fs-lead: clamp(1.0625rem, .95rem + .55vw, 1.375rem);
  --fs-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-small: .875rem; --fs-micro: .8125rem; --fs-eyebrow: .75rem;
  --lh-display:.96; --lh-h2:1.02; --lh-h3:1.15; --lh-lead:1.45; --lh-body:1.55;
  --tr-display:-0.045em; --tr-h2:-0.035em; --tr-h3:-0.02em; --tr-eyebrow:.16em;

  /* ---------- Space & layout ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px; --s-11:192px;
  --gutter: clamp(16px, 4vw, 56px);
  --col-gap: clamp(16px, 2vw, 28px);
  --section-y: clamp(96px, 12vw, 184px);
  --max:1280px; --max-wide:1440px; --max-text:40rem;
  --nav-h:56px;

  /* ---------- Radii ---------- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-2xl:clamp(28px,4vw,48px); --r-pill:999px;

  /* ---------- Shadows / filters ---------- */
  --sh-window: 0 40px 120px -20px rgba(10,8,24,.85), 0 30px 160px -40px rgba(176,60,240,.40), 0 0 0 1px rgba(255,255,255,.08);
  --sh-card:   0 24px 60px -18px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.08);
  --sh-glass:  inset 0 1px 0 rgba(255,255,255,.22), 0 30px 80px -20px rgba(10,8,24,.80);
  --sh-cta:       inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(255,79,139,.60), 0 12px 40px -10px rgba(255,79,139,.55);
  --sh-cta-hover: inset 0 1px 0 rgba(255,255,255,.32), 0 0 0 1px rgba(255,79,139,.80), 0 16px 56px -10px rgba(255,79,139,.70);
  --sh-key:       inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #17122E, 0 6px 14px -6px rgba(0,0,0,.60);
  --sh-key-paper: inset 0 1px 0 #FFFFFF, 0 2px 0 #C9BEFF, 0 6px 12px -6px rgba(58,42,140,.35);
  --sh-paper-card: 0 1px 0 rgba(18,14,42,.04), 0 18px 40px -20px rgba(58,42,140,.30), 0 0 0 1px rgba(18,14,42,.08);
  --fx-vf: drop-shadow(0 0 10px rgba(169,139,255,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.40));
  --fx-icon: drop-shadow(0 40px 80px rgba(107,59,255,.45));

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(.16,1,.3,1);     /* GSAP: "expo.out" ("glide") */
  --ease-capture: cubic-bezier(.7,0,.2,1);      /* GSAP: CustomEase "capture" */
  --ease-snap:    cubic-bezier(.34,1.56,.64,1); /* GSAP: "back.out(1.6)" ("snap") */
  --ease-std:     cubic-bezier(.2,.7,.2,1);     /* GSAP: "power3.out" ("lift") */
  --d-1:120ms; --d-2:200ms; --d-3:320ms; --d-4:450ms; --d-5:700ms; --d-6:900ms; --d-7:1200ms;

  /* ---------- Z layers ---------- */
  --z-aurora:-1; --z-base:0; --z-gl:1; --z-content:2; --z-veil:3; --z-vf:4; --z-card:6;
  --z-nav:50; --z-toast:60; --z-flash:70; --z-skip:100;

  /* ---------- Viewfinder & hero ---------- */
  --vf-arm: clamp(18px, 2.4vw, 40px);
  --vf-stroke: clamp(3px, .3vw, 5px);
  --vf-pad: clamp(10px, 1.2vw, 16px);
  --vf-color: rgba(255,255,255,.95);
  --icon-size: clamp(150px, min(30svh, 36vw), 320px);
}
@media (min-width: 900px){ :root{ --nav-h:64px; } }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce){
  :root{ --glass: var(--glass-solid); --line:rgba(255,255,255,.5); --muted:rgba(255,255,255,.86); }
}

/* ---------- A: responsive token adjustments (mobile is first-class) ---------- */
:root{
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gutter: max(clamp(16px, 4vw, 56px), var(--safe-l), var(--safe-r));
  --hero-pb: clamp(56px, 8svh, 84px);
  /* white text on #0A84FF is only 3.65:1: text-bearing blue fills use Apple's web blue (4.7:1); icons/lines keep --mac-blue */
  --mac-blue-ui:#0071E3;
}
@media (min-width: 640px){ :root{ --icon-size: clamp(150px, min(25svh, 36vw), 300px); } }
@media (max-height: 760px){ :root{ --icon-size: clamp(120px, min(24svh, 36vw), 300px); --hero-pb: 20px; } }
@media (max-width: 639.98px){ :root{ --icon-size: clamp(96px, min(22svh, 34vw), 150px); --hero-pb: 56px; } }
@media (max-width: 639.98px) and (max-height: 700px){ :root{ --hero-pb: 20px; } }
@media (max-width: 639.98px) and (max-height: 600px){ :root{ --icon-size: clamp(80px, 16svh, 120px); } }
@media (max-width: 359.98px){ :root{ --fs-display: min(clamp(2.5rem, 1rem + 6vw, 7.5rem), 11.5svh); } }

/* ---------- Lenis (inlined from vendor/lenis.css) ---------- */
html.lenis, html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* ---------- Base ---------- */
*, *::before, *::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:#0A0818; color:var(--text);
  font:400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overflow-x:clip; min-height:100svh;
}
img, svg, video{max-width:100%}
img{height:auto}
p, h1, h2, h3, h4, figure, dl, dd{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent}
kbd{font:inherit}
pre{margin:0}
::selection{background:rgba(176,60,240,.45); color:#fff}

:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:inherit}
.paper :focus-visible{outline-color:var(--focus-ring-paper)}
[tabindex="-1"]:focus:not(:focus-visible), #main:focus{outline:none}

.sr-only{position:absolute !important; 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{
  position:fixed; top:calc(10px + var(--safe-t)); left:calc(10px + var(--safe-l)); z-index:var(--z-skip);
  padding:12px 20px; border-radius:var(--r-pill); background:#fff; color:#120E2A; font-weight:700; text-decoration:none;
  transform:translateY(calc(-100% - 40px));
}
.skip:focus, .skip:focus-visible{transform:none; outline-color:var(--violet)}
.skip-inline{position:absolute; left:var(--gutter); top:-56px; z-index:20; padding:12px 18px; border-radius:var(--r-pill); background:#fff; color:#120E2A; font-weight:700; text-decoration:none; opacity:0; pointer-events:none}
.skip-inline:focus, .skip-inline:focus-visible{opacity:1; pointer-events:auto; outline-color:var(--violet)}

/* ---------- Aurora ---------- */
.aurora{position:fixed; left:0; top:0; width:100%; height:100lvh; z-index:var(--z-aurora); pointer-events:none; overflow:hidden; background:#0A0818}
.aurora > div{position:absolute; inset:0}
.aurora__v{background:var(--aurora-violet)}
.aurora__p{background:var(--aurora-pink); opacity:.8}
.aurora__s{background:var(--aurora-sky); opacity:.6}
.aurora__dots{background:var(--dots); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent)}
.aurora__grain{background:url(/assets/img/grain-128.webp) 0 0/128px 128px repeat; opacity:.05}
@media (pointer:fine) and (min-width:900px){ .aurora__v, .aurora__p, .aurora__s{will-change:opacity} }

/* ---------- Typography ---------- */
h1{font-weight:800; font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--tr-display); text-wrap:balance}
h2{font-weight:800; font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2); text-wrap:balance}
h3{font-weight:700; font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--tr-h3)}
h4{font-weight:700; font-size:var(--fs-h4)}
.nw{white-space:nowrap}
.grad{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.paper .grad{background-image:var(--grad-text-paper)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:var(--fs-eyebrow); line-height:1.2; letter-spacing:var(--tr-eyebrow); text-transform:uppercase; color:var(--muted)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--grad-dot); flex:none}
.lead{font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--muted); max-width:36ch; text-wrap:pretty}
p{text-wrap:pretty}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto}
.wrap--wide{--max: var(--max-wide)}
.sec{position:relative; padding-block:var(--section-y)}
section[id], [id^="g-"]{scroll-margin-top:calc(var(--nav-h) + 16px)}

.sec-head{border-top:1px solid var(--line); padding-top:var(--s-5); margin-bottom:clamp(40px, 6vw, 88px)}
.sec-head__meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:clamp(18px, 2.4vw, 28px)}
.sec-head__num{font:500 14px/1.2 var(--font-mono); color:var(--faint); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.sec-head__main h2 + .lead{margin-top:clamp(16px, 2vw, 26px)}
.sec-head .lead{max-width:44ch}
@media (min-width:1100px){
  .sec-head:not(.sec-head--stack){display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap)}
  .sec-head:not(.sec-head--stack) .sec-head__meta{grid-column:1 / 4; flex-direction:column; align-items:flex-start; gap:14px; margin:0; padding-top:.5em}
  .sec-head:not(.sec-head--stack) .sec-head__main{grid-column:4 / 13}
}

/* ---------- Keycaps, chips, glass, window ---------- */
.key{
  display:inline-grid; place-items:center; min-width:32px; height:32px; padding:0 8px; border-radius:var(--r-sm);
  background:linear-gradient(180deg,#3A3163,#241D45); color:#E9E4FF; box-shadow:var(--sh-key);
  font:600 15px/1 var(--font-sans); letter-spacing:0; white-space:nowrap; vertical-align:middle; text-transform:none;
}
.key--sm{min-width:26px; height:26px; padding:0 6px; border-radius:7px; font-size:13px}
.paper .key{background:linear-gradient(180deg,#FFFFFF,#ECE8FF); color:#3A2A8C; box-shadow:var(--sh-key-paper)}
.combo{display:inline-flex; gap:3px; vertical-align:middle; font:inherit}
.chip{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid var(--line); font:600 14px/1 var(--font-sans); color:var(--text); white-space:nowrap;
}
.chip .key--sm{height:22px; min-width:22px; font-size:12px; margin-left:-7px; border-radius:6px}
.chip__dot{width:8px; height:8px; border-radius:50%; background:var(--grad-dot); flex:none}
.chip--sm{height:26px; padding:0 10px; font-size:13px}
.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.paper .chip{background:#fff; border-color:var(--paper-line-2); color:var(--paper-text)}
.glass{background:var(--glass); border:1px solid rgba(255,255,255,.14); box-shadow:var(--sh-glass); border-radius:var(--r-xl)}
.window{border-radius:clamp(10px, 1.1vw, 16px); box-shadow:var(--sh-window); overflow:hidden}
img.window{display:block; width:100%; height:auto; overflow:clip}

/* ---------- CTA: download button, badge, row, meta ---------- */
/* the .vf brackets reach --vf-pad past the button: keep them (and their glow) out of the badge's clear space */
.cta-row{display:flex; align-items:center; justify-content:center; gap:calc(var(--vf-pad) + 12px); flex-wrap:wrap}
.cta-frame{position:relative; display:inline-flex}
.btn-dl{
  position:relative; display:inline-flex; align-items:center; gap:12px; height:60px; padding:0 28px 0 14px;
  border-radius:var(--r-pill); background:var(--grad-cta); color:#fff; box-shadow:var(--sh-cta); text-decoration:none;
  isolation:isolate; overflow:hidden; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform var(--d-3) var(--ease-std), box-shadow var(--d-3) var(--ease-std);
}
.btn-dl::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%);
}
@media (hover:hover){
  .btn-dl:hover{transform:translateY(-2px); box-shadow:var(--sh-cta-hover)}
  .btn-dl:hover::after{transform:translateX(120%); transition:transform .6s var(--ease-std)}
}
.btn-dl:active{transform:translateY(0) scale(.98)}
.btn-dl.is-sheen::after{animation:sheen 1.2s var(--ease-std) 1}
@keyframes sheen{from{transform:translateX(-120%)} to{transform:translateX(120%)}}
.btn-dl__glyph{width:32px; height:32px; flex:none; border-radius:50%; background:rgba(255,255,255,.18); fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round}
.btn-dl__br{stroke-width:2.4}
.btn-dl__ar{stroke-width:2.2}
.btn-dl__text{display:flex; flex-direction:column; align-items:flex-start; text-align:left}
.btn-dl__main{font-size:19px; font-weight:700; line-height:1.1; letter-spacing:-.01em}
.btn-dl__sub{display:block; font-size:12.5px; font-weight:600; line-height:1.2; opacity:.88; margin-top:2px}
.btn-dl:focus-visible{outline-offset:4px}

.badge{display:inline-block; padding:12px; line-height:0; border-radius:14px; flex:none}
.badge img{display:block; height:48px; width:auto}
.cta-meta{font-size:var(--fs-micro); color:var(--faint); margin-top:var(--s-3); text-align:center}

@media (max-width:639.98px){
  .cta-row{flex-direction:column; gap:24px; width:100%}
  .cta-frame{width:min(100% - 2 * var(--vf-pad) - 8px, 400px)}
  .btn-dl{height:56px; width:100%; justify-content:center}
  .badge{padding:11px}
  .badge img{height:44px}
}

/* ---------- Viewfinder (B.3) ---------- */
.vf{position:absolute; inset:calc(-1 * var(--vf-pad)); pointer-events:none; z-index:var(--z-vf)}
.vf__c{position:absolute; width:var(--vf-arm); height:var(--vf-arm); max-width:none; fill:none; stroke:var(--vf-color); stroke-width:var(--vf-stroke); stroke-linecap:round; stroke-linejoin:round; overflow:visible; filter:var(--fx-vf)}
.vf__c path{vector-effect:non-scaling-stroke; transform-box:view-box; transform-origin:50% 50%}
.vf__c--tl{left:0; top:0}
.vf__c--tr{right:0; top:0}
.vf__c--br{right:0; bottom:0}
.vf__c--bl{left:0; bottom:0}
.vf__c--tr path{transform:rotate(90deg)}
.vf__c--br path{transform:rotate(180deg)}
.vf__c--bl path{transform:rotate(270deg)}
.vf__line{position:absolute; background:var(--mac-blue); opacity:0}
.vf__line--t, .vf__line--b{left:0; right:0; height:1px}
.vf__line--l, .vf__line--r{top:0; bottom:0; width:1px}
.vf__line--t{top:calc(var(--vf-arm) * .06)}
.vf__line--b{bottom:calc(var(--vf-arm) * .06)}
.vf__line--l{left:calc(var(--vf-arm) * .06)}
.vf__line--r{right:calc(var(--vf-arm) * .06)}
.vf--lines .vf__line{opacity:.9}
.vf__label{
  position:absolute; left:calc(var(--vf-arm) + 6px); top:100%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:6px; background:rgba(0,0,0,.78); color:#fff;
  font:600 12px/1 var(--font-mono); font-variant-numeric:tabular-nums; padding:5px 8px; border-radius:6px; white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 6px 16px -6px rgba(0,0,0,.6);
}
.vf__dot{width:6px; height:6px; border-radius:50%; background:var(--grad-dot); flex:none}
.vf__label.is-px .vf__dot{display:none}
.paper .vf{--vf-color:var(--violet); --fx-vf: drop-shadow(0 0 8px rgba(107,59,255,.35))}

/* Hero frame failsafe (C.1): hidden until JS takes over; shown at 2.5 s if JS never arrives */
html.js:not(.rm) .vf--hero, html.js:not(.rm) .vf--finale{opacity:0; animation:vf-failsafe 0s 2.5s forwards}
@keyframes vf-failsafe{to{opacity:1}}
html.vf-js .vf--hero, html.vf-js .vf--finale{animation:none}
html.vf-static .vf--hero, html.vf-static .vf--finale{opacity:1}
html.is-cinematic .vf--hero{visibility:hidden}

/* ---------- Segmented switch ---------- */
.seg{display:inline-flex; padding:0; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid var(--line); box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.seg__btn{position:relative; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:var(--r-pill); color:var(--muted); font:600 14px/1 var(--font-sans); isolation:isolate; transition:color var(--d-2)}
.seg__btn::before{content:""; position:absolute; inset:4px; z-index:-1; border-radius:inherit; background:transparent; transition:background-color var(--d-2), box-shadow var(--d-2)}
.seg__btn[aria-pressed="true"]{color:#fff}
.seg__btn[aria-pressed="true"]::before{background:var(--mac-blue-ui); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -6px rgba(10,132,255,.7)}
.seg__btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){ .seg__btn[aria-pressed="false"]:hover{color:var(--text)} }

/* ---------- Nav ---------- */
.nav-sentinel{position:absolute; left:0; top:0; width:1px; height:24px; pointer-events:none}
.nav{
  position:fixed; inset:0 0 auto; z-index:var(--z-nav);
  height:calc(var(--nav-h) + var(--safe-t)); padding:var(--safe-t) var(--gutter) 0;
  display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:16px;
  border-bottom:1px solid transparent;
  transition:background-color var(--d-3) ease, border-color var(--d-3) ease, -webkit-backdrop-filter var(--d-3) ease, backdrop-filter var(--d-3) ease;
}
html:not(.js) .nav, .nav--solid{background:rgba(10,8,24,.62); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border-bottom-color:var(--line)}
.nav--solid.nav--paper{background:rgba(10,8,24,.86)}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce){ .nav--solid{background:rgba(10,8,24,.96)} }
.nav__brand{display:inline-flex; align-items:center; gap:10px; justify-self:start; min-height:44px; min-width:44px; text-decoration:none; font-size:15px; font-weight:700; letter-spacing:-.01em; border-radius:10px}
.nav__brand img{width:28px; height:28px; border-radius:7px; filter:drop-shadow(0 4px 10px rgba(107,59,255,.45))}
.nav__links{display:none}
.nav__links ul{list-style:none; margin:0; padding:0; display:flex; gap:2px}
.nav__links a{position:relative; display:inline-flex; align-items:center; height:44px; padding:0 12px; font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; border-radius:10px; transition:color var(--d-2)}
.nav__links a[aria-current="true"]{color:var(--text)}
.nav__links a[aria-current="true"]::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:2px; background:var(--grad-dot)}
@media (hover:hover){ .nav__links a:hover{color:var(--text)} }
.nav__cta{
  position:relative; justify-self:end; display:inline-flex; align-items:center; height:40px; margin:2px 0; padding:0 18px;
  border-radius:var(--r-pill); font-size:14px; font-weight:700; text-decoration:none; color:#fff; white-space:nowrap;
  background:var(--grad-cta); box-shadow:var(--sh-cta); border:1px solid transparent;
  transition:background-color var(--d-3), box-shadow var(--d-3), border-color var(--d-3);
}
.nav__cta::before{content:""; position:absolute; inset:-3px -2px; border-radius:inherit}
html.js .nav__cta:not(.nav__cta--filled){background:transparent; box-shadow:none; border-color:rgba(255,255,255,.3)}
@media (hover:hover){ html.js .nav__cta:not(.nav__cta--filled):hover{border-color:rgba(255,255,255,.6)} }
@media (min-width:1024px){
  .nav{grid-template-columns:1fr auto 1fr}
  .nav__links{display:block}
}
@media (max-width:379.98px){ .nav__name{display:none} }

/* ---------- Scene: hero + tour (static by default) ---------- */
.scene{position:relative}
.scene__sticky{position:relative}
.gl-stage{position:absolute; inset:0; z-index:var(--z-gl); pointer-events:none}
.scene .gl-stage, .veil__wrap, .vf--scene, .pcard{display:none}

.hero{
  position:relative; z-index:var(--z-content); display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:calc(var(--nav-h) + var(--safe-t) + clamp(8px, 3svh, 40px)) var(--gutter) var(--hero-pb);
  min-height:min(100svh, 980px);
}
html.js:not(.rm):not(.save-data) .hero{min-height:100svh}
.hero__inner{margin-block:auto; width:100%; display:flex; flex-direction:column; align-items:center}
.icon3d{position:relative; width:var(--icon-size); aspect-ratio:1; flex:none}
.icon3d::before{content:""; position:absolute; inset:-20%; z-index:-1; border-radius:50%; pointer-events:none; opacity:var(--glow-o, 1);
  background:radial-gradient(closest-side, rgba(107,59,255,.45), rgba(255,79,139,.18) 60%, transparent); filter:blur(24px)}
.icon3d__fallback{display:block; width:100%; height:100%; filter:var(--fx-icon); animation:float 6s ease-in-out infinite; transition:opacity .45s var(--ease-out)}
@keyframes float{50%{translate:0 -6px}}
.hero__eyebrow{margin-top:clamp(16px, 3svh, 32px)}
.hero h1{margin-top:14px}
.hero__lead{margin-top:clamp(14px, 2svh, 22px); max-width:34ch}
.hero__lead .combo{vertical-align:-.12em; margin-inline:2px}
.hero__cta{margin-top:clamp(20px, 3.5svh, 36px)}
.hero__meta{margin-top:24px}
.scroll-cue{position:absolute; left:50%; bottom:clamp(12px, 3svh, 28px); transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--faint); letter-spacing:.02em; white-space:nowrap; pointer-events:none}
.scroll-cue__b{width:9px; height:18px; fill:none; stroke:var(--faint); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
html.js:not(.rm) .scroll-cue__b{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.9)}}
@media (max-height:760px){ .scroll-cue{display:none} .hero__meta{margin-top:16px} }
@media (max-width:639.98px){
  .hero__inner{margin-block:0 auto}
  .hero__lead{max-width:40ch}
  .hero__meta{margin-top:18px}
}
@media (max-width:639.98px) and (max-height:760px){ .scroll-cue{display:none} }
/* phone landscape: two-column hero so the download button stays above the fold */
@media (max-height:520px) and (min-width:640px) and (orientation:landscape){
  .hero{padding-top:calc(var(--nav-h) + var(--safe-t) + 14px); padding-bottom:20px; min-height:0 !important}
  .hero__inner{display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:clamp(24px, 4vw, 48px); align-items:center; text-align:left; justify-items:start; max-width:980px; margin:0 auto}
  .hero .icon3d{--icon-size:clamp(96px, 30svh, 140px); grid-row:1 / span 5}
  .hero__eyebrow{margin-top:0}
  .hero h1{margin-top:10px; font-size:min(var(--fs-display), 12svh)}
  .hero__lead{max-width:52ch; margin-top:10px}
  .hero__cta{margin-top:16px; justify-content:flex-start}
  .hero__meta{margin-top:20px; text-align:left}
}

.tour{position:relative; z-index:var(--z-content); display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(20px, 3vw, 40px); padding:var(--section-y) var(--gutter)}
.tour__head{display:flex; flex-direction:column; align-items:center; gap:12px; max-width:52rem}
.tour__sub{color:var(--muted); font-size:var(--fs-lead); line-height:var(--lh-lead); max-width:46ch}
.tour__frame{position:relative; width:min(1120px, 100%); border-radius:var(--r-lg); padding:10px; background:var(--glass); border:1px solid rgba(255,255,255,.14); box-shadow:var(--sh-window)}
.tour__video{display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:calc(var(--r-lg) - 8px); background:#0A0818; object-fit:cover}
.tour__play{
  position:absolute; left:24px; bottom:24px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-glass); border:1px solid var(--line-2); color:#fff; box-shadow:0 8px 24px -8px rgba(0,0,0,.6);
  transition:transform var(--d-2) var(--ease-std), background-color var(--d-2);
}
@media (hover:hover){ .tour__play:hover{transform:scale(1.06); background:rgba(36,30,70,.9)} }
.tour__icon{width:20px; height:20px; fill:currentColor}
.tour__icon--pause{display:none}
.tour__play[data-state="playing"] .tour__icon--play{display:none}
.tour__play[data-state="playing"] .tour__icon--pause{display:block}

.chapters{list-style:none; margin:0; padding:0; flex-shrink:0; display:flex; gap:4px; max-width:100%; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain}
.chapters::-webkit-scrollbar{display:none}
.chapters li{flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 12px; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap}
.chapters li:first-child{margin-left:auto}
.chapters li:last-child{margin-right:auto}
.chapters__t{font:500 12.5px/1 var(--font-mono); color:var(--faint); font-variant-numeric:tabular-nums}
.chapters li.has-btn{padding:0}
.chapters button{position:relative; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-radius:12px; color:var(--muted); font-weight:600; transition:color var(--d-2), background-color var(--d-2)}
.chapters button::after{content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; border-radius:2px; background:var(--grad-dot); transform:scaleX(var(--p, 0)); transform-origin:left center; opacity:0; transition:opacity var(--d-2)}
.chapters button[aria-current="true"]{color:var(--text); background:rgba(255,255,255,.06)}
.chapters button[aria-current="true"]::after{opacity:1}
@media (hover:hover){ .chapters button:hover{color:var(--text)} }
.chapters button:focus-visible, .guide-nav ul a:focus-visible{outline-offset:-3px}
@media (min-width:900px){ .chapters li, .chapters button{height:40px} }
@media (max-width:899.98px){ .chapters{width:100%} }
.chapters.has-more{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 36px), transparent)}
@media (min-width:900px) and (max-width:1365.98px){ .chapters button{padding:0 9px; font-size:12.5px} .chapters button::after{left:9px; right:9px} }

/* ---------- Scene: cinematic mode ---------- */
html.is-cinematic .scene{height:260svh}
@media (max-width:899.98px){ html.is-cinematic .scene{height:210svh} }
/* Reserve the cinematic height from the first layout (html.js is set by the inline boot script, before parsing):
   otherwise a deep link (/#tool-…) jumps on the static layout and everything shifts when main.js adds is-cinematic.
   Same conditions as main.js; vf-static (motion off / GSAP missing) releases it. */
@media (prefers-reduced-motion: no-preference) and (min-height:560px){
  html.js:not(.rm):not(.save-data):not(.vf-static) .scene{min-height:260svh}
}
@media (prefers-reduced-motion: no-preference) and (min-height:560px) and (max-width:899.98px){
  html.js:not(.rm):not(.save-data):not(.vf-static) .scene{min-height:210svh}
}
html.is-cinematic .scene__sticky{position:sticky; top:0; height:100svh; overflow:clip}
html.is-cinematic .scene .gl-stage, html.is-cinematic .veil__wrap, html.is-cinematic .vf--scene{display:block}
html.is-cinematic .hero{position:absolute; inset:0; min-height:0}
html.is-cinematic .tour{position:absolute; inset:0; justify-content:center; padding:calc(var(--nav-h) + var(--safe-t) + 12px) var(--gutter) 20px; gap:clamp(12px, 2svh, 24px); pointer-events:none}
html.is-cinematic .scene.is-tour .tour{pointer-events:auto}
html.is-cinematic .scene.is-tour .hero{pointer-events:none}
html.is-cinematic .tour__head{gap:8px}
html.is-cinematic .tour__head h2{font-size:min(var(--fs-h2), 6.4svh)}
html.is-cinematic .tour__sub{display:none}
@media (min-height:820px){ html.is-cinematic .tour__sub{display:block; font-size:min(var(--fs-lead), 2.4svh)} }
html.is-cinematic .tour__frame{width:min(1120px, 100%, (100svh - 17rem) * 16 / 9)}
/* with the two-line subtitle the column is ~167px + 17.5svh plus the frame: keep it inside 100svh so the chapter row is never squeezed */
@media (min-height:820px){ html.is-cinematic .tour__frame{width:min(1120px, 100%, (82svh - 200px) * 16 / 9)} }

.veil__wrap{position:absolute; inset:0; z-index:var(--z-veil); pointer-events:none; overflow:hidden}
.veil{position:absolute; inset:0; opacity:0}
.veil__p{position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(6,4,16,.58); transform-origin:0 0; will-change:transform}

.vf--scene{inset:auto; left:0; top:0; width:0; height:0; overflow:visible}
.vf--scene .vf__c{left:0; top:0; right:auto; bottom:auto; will-change:transform}
.vf--scene .vf__line{left:0; top:0; right:auto; bottom:auto; width:1px; height:1px; transform-origin:0 0; will-change:transform, opacity}
.vf--scene .vf__label{left:0; top:0; transform:none; will-change:transform}

.pcard{position:absolute; right:var(--gutter); bottom:calc(24px + var(--safe-b)); width:clamp(230px, 22vw, 320px); z-index:var(--z-card); container-type:inline-size;
  background:var(--ink-glass); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:10px; box-shadow:var(--sh-card)}
html.is-cinematic .pcard:not([hidden]){display:block}
.pcard__thumb{position:relative; cursor:pointer}
.pcard__thumb img{display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:14px; object-fit:cover}
.pcard__size{position:absolute; left:8px; bottom:8px; padding:4px 7px; border-radius:6px; background:rgba(0,0,0,.78); color:#fff; font:600 12px/1 var(--font-mono); font-variant-numeric:tabular-nums}
.pcard__btns{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px}
@container (min-width:258px){ .pcard__btns{grid-template-columns:repeat(4, minmax(0,1fr)); gap:5px} .pcard__btn{font-size:12.5px; padding:0 2px} }
.pcard__btn{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 8px; border-radius:12px; background:rgba(255,255,255,.10); color:#fff; font:600 14px/1 var(--font-sans); text-decoration:none; white-space:nowrap; transition:background-color var(--d-2)}
.pcard__btn--edit{background:var(--mac-blue-ui)}
.pcard__btn--del{color:#FF6961}   /* macOS high-contrast red: 5.2:1 on the card (--danger is 4.3:1) */
@media (hover:hover){ .pcard__btn:hover{background:rgba(255,255,255,.18)} .pcard__btn--edit:hover{background:#0066CC} }

.flash{position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:var(--z-flash)}

/* ---------- 3D swap (D.1) ---------- */
.gl-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; opacity:0; transition:opacity .45s var(--ease-out)}
[data-gl-stage][data-gl="live"] .gl-canvas{opacity:1}
[data-gl-anchor][data-gl="live"] .icon3d__fallback{opacity:0; animation:none}
/* the hero sits above the GL stage, so the CSS glow would wash out the glass: B's canvas paints the same glow behind the icon */
[data-gl-anchor][data-gl="live"]::before{opacity:0; transition:opacity .45s var(--ease-out)}   /* fades only on the switch to live; the fallback scrub stays immediate */

/* ---------- Facts ---------- */
.facts-sec{position:relative; padding-block:var(--s-9)}
.facts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-block:1px solid var(--line)}
.facts__item{container-type:inline-size; min-width:0}
.facts__item:nth-child(even){border-left:1px solid var(--line)}
.facts__item:nth-child(n+3){border-top:1px solid var(--line)}
.facts__cell{display:flex; flex-direction:column; gap:10px; padding:clamp(20px, 3vw, 36px) clamp(14px, 2vw, 28px); height:100%; text-decoration:none; border-radius:4px}
.facts__num{font-size:min(var(--fs-stat), 16cqi); font-weight:800; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap}
.facts__label{font-size:var(--fs-small); color:var(--muted); line-height:1.35}
.facts__cell--link{transition:transform var(--d-3) var(--ease-std)}
.facts__cell--link .facts__label::after{content:"\00a0→"; color:var(--faint)}
@media (hover:hover){ .facts__cell--link:hover{transform:translateY(-2px)} }
@media (min-width:900px){
  .facts{grid-template-columns:repeat(4, minmax(0,1fr))}
  .facts__item:nth-child(n+3){border-top:0}
  .facts__item + .facts__item{border-left:1px solid var(--line)}
}

/* ---------- 01 Capture ---------- */
.capture__grid{display:grid; gap:clamp(28px, 4vw, 48px)}
.captabs{display:flex; gap:4px; padding:4px; width:max-content; max-width:100%; border-radius:var(--r-pill); background:rgba(255,255,255,.06); border:1px solid var(--line)}
.captabs__tab{height:40px; padding:0 16px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap; transition:color var(--d-2), background-color var(--d-2), box-shadow var(--d-2)}
.captabs__tab[aria-selected="true"]{color:#fff; background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -8px rgba(0,0,0,.6)}
@media (hover:hover){ .captabs__tab[aria-selected="false"]:hover{color:var(--text)} }
@media (max-width:639.98px){
  .captabs{width:100%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
  .captabs__tab{height:44px; padding:0 6px; font-size:13px; white-space:normal; line-height:1.1}
  html.js .captabs[hidden]{display:grid !important}
}
.capstage{position:relative; margin-top:20px; margin-bottom:6%}
html.no-js .captabs[hidden] + .capstage{margin-top:0}
/* JS-only controls keep their space from the first layout (no shift when JS un-hides them) */
html.js .captabs[hidden]{display:flex !important; visibility:hidden}
html.js .seg--editor[hidden], html.js .seg--guide[hidden]{display:inline-flex !important; visibility:hidden}
html.js .guide-search[hidden], html.js .guide-count[hidden]{display:block !important; visibility:hidden}
.capstage__win{position:relative; aspect-ratio:2400/1559; background:#140F2B}
.capstage__img{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .45s var(--ease-std)}
.capstage__img.is-active{opacity:1}
img.capstage__img, .capstage__full > img{display:block; width:100%; height:100%; object-fit:cover}
.capstage__full .vf--capture{inset:3%}
.capstage__card{position:absolute; right:3%; bottom:-6%; width:34%; height:auto; z-index:2; filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.2))}
.capture__card h3{font-size:clamp(1.25rem, 1rem + .8vw, 1.625rem); margin-bottom:10px}
.capture__card p{color:var(--muted)}
.keyline{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px; font-size:var(--fs-small); font-weight:600; color:var(--text) !important}
.keyline__item{display:inline-flex; align-items:center; gap:8px}
.keyline__sep{color:var(--faint)}
@media (min-width:1100px){
  .capture__grid{grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); row-gap:32px; grid-template-rows:auto auto 1fr; align-items:start}
  .capture__head{grid-column:1 / 6; grid-row:1; margin-bottom:0}
  .capture__chips{grid-column:1 / 6; grid-row:2}
  .capture__card{grid-column:1 / 6; grid-row:3}
  .capture__stage{grid-column:6 / 13; grid-row:1 / 4; border-top:1px solid var(--line); padding-top:var(--s-5)}
  .capture__head .lead{max-width:40ch}
}
@media (max-width:1099.98px){ .capture__head{margin-bottom:0} }

/* ---------- 02 Mark up (playground mount; C styles the rest) ---------- */
.markup__body{position:relative; margin-top:clamp(-40px, -2vw, -16px)}
.pg{max-width:1240px; margin-inline:auto; position:relative}
/* Reserve the mounted playground's height while it loads, so swapping the fallback for C's UI shifts nothing
   (Safari has no scroll anchoring, so growth above the viewport would jump the page). Measured: compact = stage/1.6 + bars
   + missions + 88 (C caps the compact stage at (100svh - 132px) x 1.6); window = W/1.6 + 66 (+54 while the missions wrap). Mirrors C's rule: window mode = root >= 860px, fine pointer. */
html.js .pg:not(.pg--win):not(.pg--compact):not(.pg--failed){--pg-w:min(1240px, 100vw - 2 * var(--gutter)); --pg-cw:min(var(--pg-w), max(280px, (100svh - 132px) * 1.6)); min-height:calc(var(--pg-cw) / 1.6 + 432px)}
@media (min-width:552px){ html.js .pg:not(.pg--win):not(.pg--compact):not(.pg--failed){min-height:calc(var(--pg-cw) / 1.6 + 404px)} }
@media (min-width:1000px) and (pointer:coarse){ html.js .pg:not(.pg--win):not(.pg--compact):not(.pg--failed){min-height:calc(var(--pg-cw) / 1.6 + 354px)} }
@media (min-width:935px) and (pointer:fine){ html.js .pg:not(.pg--win):not(.pg--compact):not(.pg--failed){min-height:calc(var(--pg-w) / 1.6 + 120px)} }
@media (min-width:1100px) and (pointer:fine){ html.js .pg:not(.pg--win):not(.pg--compact):not(.pg--failed){min-height:calc(var(--pg-w) / 1.6 + 66px)} }
.pg-fallback img{display:block; width:100%; height:auto; border-radius:clamp(10px, 1.1vw, 16px); box-shadow:var(--sh-window)}
.pg-fallback figcaption{margin-top:14px; text-align:center; font-size:var(--fs-small); color:var(--faint)}
.markup__note{margin-top:22px; text-align:center; font-size:var(--fs-small); color:var(--faint)}

/* ---------- Comparator ---------- */
.compare{position:relative; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.compare__fig img{display:block; width:100%; height:auto; border-radius:12px}
.compare__fig figcaption{margin-top:8px; text-align:center; font:600 12px/1 var(--font-mono); color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.compare__handle{display:none}
html.js .compare{display:block; aspect-ratio:var(--ar, 1.6); overflow:hidden; border-radius:var(--r-md); isolation:isolate; --v:.5; --pos:calc(22px + (100% - 44px) * var(--v)); box-shadow:var(--sh-card)}
html.js .compare__fig{position:absolute; inset:0}
html.js .compare__fig img{width:100%; height:100%; object-fit:cover; border-radius:0}
html.js .compare__fig--after{clip-path:inset(0 0 0 var(--pos))}
html.js .compare__fig figcaption{position:absolute; top:12px; left:12px; margin:0; padding:5px 8px; border-radius:6px; background:rgba(0,0,0,.78); color:#fff; letter-spacing:.04em; z-index:1}
html.js .compare__fig--after figcaption{left:auto; right:12px}
html.js .compare__handle{display:block; position:absolute; inset:0; z-index:2; pointer-events:none; transform:translateX(calc(22px + var(--v) * (100% - 44px)))}
html.js .compare__handle::before{content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(10,8,24,.18), 0 0 18px rgba(10,8,24,.4)}
.compare__knob{position:absolute; left:0; top:50%; width:44px; height:44px; translate:-50% -50%; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(40,32,80,.86), rgba(20,16,40,.86)); border:1px solid rgba(255,255,255,.42); box-shadow:var(--sh-glass)}
.compare__knob svg{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.compare__range{position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; -webkit-appearance:none; appearance:none; background:transparent}
.compare__range::-webkit-slider-runnable-track{height:100%; background:transparent; border:0}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:44px; height:2000px; background:transparent; border:0}
.compare__range::-moz-range-track{height:100%; background:transparent; border:0}
.compare__range::-moz-range-thumb{width:44px; height:2000px; background:transparent; border:0}
.compare__range:focus-visible ~ .compare__handle .compare__knob{outline:3px solid var(--focus-ring); outline-offset:3px}
.compare--privacy{--ar:956/440}
.compare--remover{--ar:16/10}
.compare--retouch{--ar:16/10}
.compare--appearance{--ar:1.6; box-shadow:none !important; border-radius:clamp(10px, 1.1vw, 16px)}
html.js .compare--appearance .compare__fig img{object-fit:contain}
html.js .compare--mini .compare__fig figcaption{top:8px; left:8px; font-size:11px; padding:4px 6px}
html.js .compare--privacy .compare__fig figcaption{position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%)}
.compare__legend{display:none}
html.js .compare__legend{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; font:600 12px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.compare__legend span{display:inline-flex; align-items:center; gap:8px}
.compare__legend i{width:18px; height:1px; background:currentColor; opacity:.6}
html.js .compare--mini .compare__fig--after figcaption{left:auto; right:8px}

/* ---------- 03 Hide & erase ---------- */
.hide__grid{display:grid; gap:clamp(20px, 3vw, 32px)}
.hide__main{min-width:0}
.hide__chips{margin-top:20px}
.caption{margin-top:12px; font-size:var(--fs-small); color:var(--faint)}
.hide__side{display:grid; gap:clamp(20px, 3vw, 28px); min-width:0}
@media (min-width:1100px){ .hide__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start} }
.erase, .ocr{padding:clamp(20px, 2.4vw, 28px); min-width:0}
.card-title{display:flex; align-items:center; gap:12px; font-size:clamp(1.25rem, 1rem + .8vw, 1.5rem); margin-bottom:10px}
.erase > p, .ocr > p{color:var(--muted); font-size:.9688rem}
.erase__fig{position:relative; margin-top:18px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.erase__pic img{display:block; width:100%; height:auto; border-radius:12px}
.erase__pic figcaption{margin-top:6px; font:600 12px/1 var(--font-mono); color:var(--muted); text-align:center; text-transform:uppercase; letter-spacing:.08em}
html.js .erase__fig{display:block; aspect-ratio:760/489; border-radius:14px; overflow:hidden; --cx:45%; --cy:57%; box-shadow:0 0 0 1px rgba(255,255,255,.1)}
html.js .erase__pic{position:absolute; inset:0}
html.js .erase__pic img{width:100%; height:100%; object-fit:cover; border-radius:0}
html.js .erase__pic figcaption{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
html.js .erase__pic--after{clip-path:circle(0% at var(--cx) var(--cy))}
.erase.is-erased .erase__pic--after{clip-path:circle(150% at var(--cx) var(--cy))}
.erase__hit{position:absolute; left:39.2%; top:42.3%; width:12.1%; height:29.7%; border-radius:12px; z-index:2; touch-action:manipulation; transition:box-shadow var(--d-2)}
/* the person is only ~30-38px wide on phones: extend the hit area to >= 48px around it */
.erase__hit::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, 48px); height:max(100%, 48px); transform:translate(-50%, -50%); border-radius:14px}
.erase__hit::after{content:""; position:absolute; inset:-6px; border-radius:16px; border:2px solid rgba(255,255,255,.9); opacity:0; pointer-events:none}
.erase__hit:hover, .erase__hit:focus-visible{outline:2px solid var(--mac-blue); outline-offset:0; box-shadow:0 0 12px var(--mac-blue), inset 0 0 0 999px rgba(10,132,255,.12)}
.erase__hit:hover::after, .erase__hit:focus-visible::after{animation:ring 1.4s var(--ease-std) infinite}
@media (hover:none){ .erase__hit{outline:2px solid rgba(10,132,255,.9); box-shadow:0 0 12px var(--mac-blue)} .erase__hit::after{animation:ring 1.4s var(--ease-std) infinite} }
@keyframes ring{0%{opacity:.9; transform:scale(.92)} 100%{opacity:0; transform:scale(1.18)}}
.erase__hint{position:absolute; left:calc(51.3% + 14px); top:46%; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 8px; border-radius:var(--r-pill); background:#fff; color:#120E2A; font-size:12.5px; font-weight:700; white-space:nowrap; box-shadow:0 8px 20px -8px rgba(0,0,0,.55); pointer-events:none}
.erase__hint::before{content:""; width:0; height:0; border-block:5px solid transparent; border-right:7px solid #fff; margin-left:-15px}
.erase__done{position:absolute; left:12px; top:12px; z-index:2; padding:6px 10px; border-radius:var(--r-pill); background:rgba(0,0,0,.78); color:#fff; font-size:12.5px; font-weight:700; opacity:0; transform:translateY(-4px); transition:opacity var(--d-3), transform var(--d-3) var(--ease-out); pointer-events:none}
.erase__done:empty{padding:0}
.erase.is-erased .erase__done{opacity:1; transform:none}
.erase__undo{position:absolute; right:12px; bottom:12px; z-index:3; height:44px; padding:0 18px; border-radius:var(--r-pill); background:rgba(0,0,0,.78); color:#fff; font-size:14px; font-weight:700; border:1px solid rgba(255,255,255,.25)}
@media (hover:hover){ .erase__undo:hover{background:rgba(0,0,0,.9)} }

.ocr__row{display:grid; gap:14px; margin-top:18px}
.crop{overflow:hidden; aspect-ratio:var(--ar, 1.6)}
.crop img{display:block; width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%)}
.crop--ocr{--ar:840/440; --op:0 0}
.ocr__shot{position:relative; border-radius:12px; box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.ocr__scan{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.ocr__scan::before{content:""; position:absolute; left:0; right:0; top:0; height:100%; transform:translateY(-101%); opacity:0;
  background:linear-gradient(180deg, transparent calc(100% - 28px), rgba(176,60,240,.16) calc(100% - 3px), transparent calc(100% - 3px)),
             linear-gradient(90deg, #6B3BFF, #FF4F8B) bottom / 100% 2px no-repeat;
  filter:drop-shadow(0 0 8px rgba(176,60,240,.8))}
.ocr.is-scanning .ocr__scan::before{animation:scan 1.6s ease-in-out 2}
@keyframes scan{0%{transform:translateY(-101%); opacity:1} 92%{opacity:1} 100%{transform:translateY(0); opacity:0}}
.ocr__out{border-radius:12px; background:rgba(8,6,20,.6); border:1px solid var(--line); padding:12px 14px; min-width:0}
.ocr__out figcaption{font:600 11.5px/1 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; font-size:12px}
.ocr__out pre{font:500 12.5px/1.75 var(--font-mono); color:#EDEAFF; overflow-x:auto; user-select:text; -webkit-user-select:text; scrollbar-width:thin}
.ocr__line{display:inline-block}

/* ---------- 04 Share ---------- */
.share__grid{display:grid; gap:clamp(28px, 4vw, 48px)}
.share__head{margin-bottom:0}
.rows{border-bottom:1px solid var(--line)}
.rows__row{display:grid; grid-template-columns:1fr; gap:6px; padding:18px 0; border-top:1px solid var(--line)}
.rows__row dt{display:flex; align-items:center; gap:14px; font-weight:700; font-size:1.0625rem}
.rows__keys{display:inline-flex; min-width:88px}
.rows__row dd{color:var(--muted)}
@media (min-width:640px){ .rows__row{grid-template-columns:15rem 1fr; gap:20px; align-items:center} }
.share__note{margin-top:20px; font-size:var(--fs-small); color:var(--faint)}
.share__visual{position:relative; width:100%; max-width:600px; margin-inline:auto}
.share__canvas{position:relative; aspect-ratio:600/480}
.stack{position:absolute; left:11%; top:14%; width:78%; aspect-ratio:768/508}
.stack__card{position:absolute; inset:0; width:100%; height:auto; transform-origin:50% 0}
.stack__card--1{filter:drop-shadow(0 28px 44px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.25))}
.stack__card--2{transform:translateY(-14px) scale(.96); opacity:.7}
.stack__card--3{transform:translateY(-28px) scale(.92); opacity:.45}
.share__path{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.share__path path{fill:none; stroke:var(--annot); stroke-width:3; stroke-dasharray:2 8; stroke-linecap:round}
.share__targets{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.share__targets .chip{background:rgba(255,255,255,.08)}
@media (min-width:1100px){
  .share__grid{grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); grid-template-rows:auto 1fr; align-items:start; row-gap:40px}
  .share__head{grid-column:1 / 7; grid-row:1}
  .share__list{grid-column:1 / 7; grid-row:2}
  .share__visual{grid-column:7 / 13; grid-row:1 / 3; align-self:center}
}

/* ---------- 05 Advanced ---------- */
.adv{display:flex; flex-direction:column; align-items:center; gap:clamp(20px, 3vw, 32px)}
.adv__figure{position:relative; width:100%; max-width:1240px; display:grid; gap:28px}
.adv__shot figcaption{margin-top:12px; text-align:center; font-size:var(--fs-small); color:var(--faint)}
html.js .adv__figure{display:block; aspect-ratio:1.6}
html.js .adv__shot{position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease-std)}
html.js .adv__shot.is-active{opacity:1}
html.js .adv__shot figcaption{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.tiles{list-style:none; margin:clamp(48px, 7vw, 96px) 0 0; padding:0; display:grid; gap:var(--col-gap); grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .tiles{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1100px){ .tiles{grid-template-columns:repeat(3, minmax(0,1fr))} }
.tile{padding:12px 12px 26px; min-width:0}
.tile__pic{border-radius:14px; overflow:hidden; aspect-ratio:16/10; margin-bottom:20px; background:#16122B; box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.tile h3{font-size:clamp(1.1875rem, 1rem + .5vw, 1.375rem); margin:0 12px 8px}
.tile p{margin:0 12px; color:var(--muted); font-size:.9688rem}
.crop--layers{--op:100% 30%}
.crop--select{--op:50% 50%}
.crop--brush{--op:50% 30%}
.crop--adjust{--op:100% 50%}
html.js .tile__pic.compare{border-radius:14px; box-shadow:0 0 0 1px rgba(255,255,255,.08)}

/* ---------- 06 Built for the Mac ---------- */
.bento{list-style:none; margin:0; padding:0; display:grid; gap:var(--col-gap); grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .bento{grid-template-columns:repeat(2, minmax(0,1fr))} .bento__tile--wide{grid-column:span 2} }
@media (min-width:1100px){ .bento{grid-template-columns:repeat(3, minmax(0,1fr))} }
.bento__tile{position:relative; padding:clamp(20px, 2.4vw, 32px); display:flex; flex-direction:column; gap:10px; min-width:0; overflow:hidden}
.bento__tile h3{font-size:clamp(1.1875rem, 1rem + .6vw, 1.5rem)}
.bento__tile p{color:var(--muted); font-size:.9688rem}
.bento__tile > h3{margin-top:auto; padding-top:8px}
.bento__tile--appearance{gap:20px}
@media (min-width:900px){
  .bento__tile--appearance{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); align-items:end; gap:28px}
  .bento__tile--appearance .bento__copy{padding-bottom:6px}
}
.bento__copy{display:flex; flex-direction:column; gap:10px}
.keywall{display:grid; grid-template-columns:repeat(5, max-content); gap:8px; justify-content:start; margin-bottom:18px}
.keywall .key{width:38px; height:38px; font-size:15px; border-radius:9px}
.bento__pic{border-radius:14px; overflow:hidden; margin:-4px -4px 14px; box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.bento__pic img{display:block; width:100%; height:auto}
.bento__glyph{display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:72px; margin-bottom:18px}
.bento__glyph .combo{gap:4px}
.pinch{position:relative; width:84px; height:56px; border-radius:12px; border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.04)}
.pinch i{position:absolute; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 12px rgba(169,139,255,.8)}
.pinch i:first-child{left:22px}
.pinch i:last-child{right:22px}
html.js:not(.rm) .pinch i:first-child{animation:pinch-l 2.6s var(--ease-std) infinite}
html.js:not(.rm) .pinch i:last-child{animation:pinch-r 2.6s var(--ease-std) infinite}
@keyframes pinch-l{50%{transform:translateX(-12px)}}
@keyframes pinch-r{50%{transform:translateX(12px)}}
.menubar{display:flex; align-items:center; gap:14px; height:36px; padding:0 14px; margin:0 0 18px; border-radius:10px; background:rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.menubar__vf{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.menubar__cam{fill:#fff; stroke:none}
.menubar__lens{fill:#2a2350; stroke:none}
.menubar__icons{display:inline-flex; gap:10px; margin-left:auto}
.menubar__icons i{width:14px; height:10px; border-radius:3px; background:rgba(255,255,255,.35)}
.menubar__clock{font:600 13px/1 var(--font-mono); color:#fff}
.bento__tile--universal{justify-content:space-between}
@media (min-width:640px){ .bento__tile--universal{flex-direction:row; align-items:flex-end; gap:28px} .bento__tile--universal .bento__copy{max-width:22rem} }
.bento__tile .bento__big{font-size:var(--fs-h2); font-weight:800; letter-spacing:-.05em; line-height:.95; white-space:nowrap; color:transparent}
.mac__strip{margin:clamp(40px, 6vw, 72px) auto 0; max-width:44ch; text-align:center; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--muted)}

/* ---------- 07 Private by design ---------- */
.privacy__panel{position:relative; padding:clamp(24px, 5vw, 72px); display:grid; gap:clamp(28px, 4vw, 48px)}
@media (min-width:1100px){ .privacy__panel{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center} }
.privacy__list{list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px, 2.6vw, 30px)}
.privacy__list li{display:flex; align-items:baseline; gap:16px; font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-h3); letter-spacing:var(--tr-h3)}
.privacy__list li::before{content:""; width:10px; height:10px; flex:none; border-radius:50%; background:var(--grad-dot); transform:translateY(-.18em)}
.privacy__txt{display:block; min-width:0}
.privacy__label{padding:clamp(22px, 3vw, 36px); border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.privacy__shield{width:48px; height:48px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; margin-bottom:8px; filter:drop-shadow(0 6px 18px rgba(107,59,255,.6))}
.privacy__cap{font-size:var(--fs-small); color:var(--muted); font-weight:600}
.privacy__big{font-size:var(--fs-h3); font-weight:800; letter-spacing:-.025em; line-height:1.1}
.privacy__link{margin-top:10px; display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--text); text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:4px}
@media (hover:hover){ .privacy__link:hover{text-decoration-color:#fff} }
.vf--privacy{--vf-arm:clamp(22px, 3vw, 44px)}
.privacy__foot{margin-top:24px; text-align:center; font-size:var(--fs-small); color:var(--faint)}

/* ---------- 08 Button Guide (paper) ---------- */
.paper{
  position:relative; z-index:var(--z-content); background:var(--grad-paper); color:var(--paper-text); color-scheme:light;
  border-radius:var(--r-2xl); margin-inline:clamp(0px, 1.5vw, 24px); padding-block:var(--section-y);
  box-shadow:0 -40px 120px -40px rgba(107,59,255,.55);
}
@media (min-width:900px){
  .paper::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:var(--dots-paper);
    -webkit-mask-image:linear-gradient(180deg, #000, transparent 560px); mask-image:linear-gradient(180deg, #000, transparent 560px)}
}
.paper .eyebrow, .paper .lead, .paper .sec-head__num{color:var(--paper-muted)}
.paper .sec-head{border-top-color:var(--paper-line-2)}
.paper .seg{background:#ECE8FF; border-color:var(--paper-line); box-shadow:inset 0 1px 2px rgba(58,42,140,.12)}
.paper .seg__btn{color:var(--paper-muted)}
.paper .seg__btn[aria-pressed="true"]{color:#fff}
@media (hover:hover){ .paper .seg__btn[aria-pressed="false"]:hover{color:var(--paper-text)} }
.paper .cta-meta{color:var(--paper-muted)}
.paper .btn-dl:focus-visible{outline-color:var(--focus-ring-paper)}

.guide{position:relative; display:grid; gap:20px}
.guide-main{min-width:0}
.guide-nav{min-width:0}
.guide-nav ul{list-style:none; margin:0; padding:0}
.guide-nav a{display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none; color:var(--paper-muted); font-weight:600; font-size:14px; border-radius:10px; position:relative; transition:color var(--d-2), background-color var(--d-2)}
.guide-nav__count{font:600 12px/1 var(--font-mono); padding:4px 6px; border-radius:6px; background:rgba(18,14,42,.06); color:var(--paper-muted); font-variant-numeric:tabular-nums}
.guide-nav a[aria-current="true"]{color:var(--paper-text); background:rgba(107,59,255,.09)}
.guide-nav a[aria-current="true"] .guide-nav__count{background:var(--violet); color:#fff}
.guide-nav a.is-empty{opacity:.45}
@media (hover:hover){ .guide-nav a:hover{color:var(--paper-text)} }
/* touch: every tappable control >= 44px (H.2). Guide cards: the name link stretches over the whole card */
@media (pointer:coarse){
  .captabs__tab{height:44px}
  .chapters li, .chapters button{height:44px}
  .entry__link::after{content:""; position:absolute; inset:0; border-radius:16px}
}
.guide-nav__search{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 0 0 1px var(--paper-line-2); color:var(--paper-text)}
.guide-nav__search svg, .guide-search__icon{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}

.guide-bar{display:grid; gap:12px; margin-bottom:28px}
.guide-search{position:relative}
.guide-search__icon{position:absolute; left:16px; top:50%; translate:0 -50%; color:var(--paper-muted); pointer-events:none}
.guide-search input{
  width:100%; height:48px; padding:0 120px 0 46px; border-radius:var(--r-pill); border:1px solid var(--paper-line-2); background:#fff;
  font:500 16px/1 var(--font-sans); color:var(--paper-text); -webkit-appearance:none; appearance:none;
  box-shadow:0 1px 0 rgba(18,14,42,.04), 0 12px 28px -18px rgba(58,42,140,.45); transition:border-color var(--d-2), box-shadow var(--d-2);
}
.guide-search input::placeholder{color:#6E6A88}
.guide-search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.guide-search input:focus-visible{outline:3px solid var(--focus-ring-paper); outline-offset:2px; border-color:var(--violet)}
.guide-search__hint{position:absolute; right:14px; top:50%; translate:0 -50%}
@media (pointer:coarse){ .guide-search__hint{display:none} }
.guide-search__clear{position:absolute; right:2px; top:50%; translate:0 -50%; height:44px; padding:0 14px; border-radius:var(--r-pill); font-size:13px; font-weight:700; color:var(--violet); background:rgba(107,59,255,.08)}
.guide-search.has-q .guide-search__hint{display:none}
.guide-bar__row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.guide-count{font:600 13px/1 var(--font-mono); color:var(--paper-muted); font-variant-numeric:tabular-nums}
.guide-empty{padding:40px 24px; border-radius:20px; background:#fff; box-shadow:var(--sh-paper-card); text-align:center; color:var(--paper-muted); font-size:1.0625rem}

.guide-group + .guide-group{margin-top:clamp(40px, 5vw, 56px)}
.guide-group__head h3{font-size:var(--fs-h3)}
.guide-group__head p{margin-top:6px; color:var(--paper-muted)}
.guide-group__list{display:grid; gap:12px; margin-top:18px; grid-template-columns:minmax(0,1fr)}
.entry{position:relative; padding:16px 18px 18px; border-radius:16px; background:#fff; box-shadow:var(--sh-paper-card); scroll-margin-top:calc(var(--nav-h) + 24px); min-width:0; transition:box-shadow var(--d-2)}
.entry__head{display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap}
.entry__keys{display:inline-flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; margin-left:auto}
.entry__name{order:-1; flex:0 1 auto; min-width:0}
.entry__keys .key{min-width:28px; height:28px; font-size:14px; border-radius:7px}
.entry__keys .combo{gap:3px}
.entry__sep{color:var(--paper-muted); font-weight:600; font-size:14px}
.chip--mode{height:28px; padding:0 10px; font-size:12.5px; font-weight:700; color:#3A2A8C !important; background:#F0ECFF !important; border-color:#DCD3FF !important}
.entry__name{font-size:var(--fs-h4); line-height:1.25; letter-spacing:-.01em}
.entry__link{color:inherit; text-decoration:none; border-radius:4px}
.entry:has(.entry__link:focus-visible){outline:3px solid var(--focus-ring-paper); outline-offset:3px}
@supports selector(:has(a)){ .entry__link:focus-visible{outline:none} }
@media (hover:hover){ .entry:hover{box-shadow:0 1px 0 rgba(18,14,42,.04), 0 22px 44px -22px rgba(58,42,140,.45), 0 0 0 1px rgba(107,59,255,.28)} }
.entry__desc{margin-top:8px; color:var(--paper-text); font-size:.9688rem; line-height:1.5}
.entry__more{margin-top:6px; color:var(--paper-muted); font-size:var(--fs-small); line-height:1.5}
.entry__pic{margin-top:14px; position:relative; z-index:1; pointer-events:none}
.entry__pic img{display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 0 0 1px var(--paper-line)}
.entry mark{background:rgba(255,214,10,.55); color:inherit; border-radius:3px; padding:0 1px}
.entry--best{box-shadow:0 0 0 2px var(--violet), 0 18px 40px -20px rgba(58,42,140,.45)}
.entry.is-active{box-shadow:0 0 0 2px rgba(107,59,255,.5), 0 18px 40px -20px rgba(58,42,140,.4)}
.entry.is-flash{animation:entry-flash 1.2s var(--ease-std) 1}
@keyframes entry-flash{0%, 70%{outline:2px solid var(--violet); outline-offset:4px} 100%{outline:2px solid transparent; outline-offset:10px}}
html.rm .entry.is-flash{outline:2px solid var(--violet); outline-offset:4px; animation:none}

.guide-pane{min-width:0}
.pane{background:#fff; border-radius:20px; box-shadow:var(--sh-paper-card); padding:12px; display:grid; gap:12px}
.pane__media{position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:radial-gradient(120% 90% at 30% 0%, #2A2052 0%, #15112A 70%)}
.pane__img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .25s ease}
.pane__img.is-on{opacity:1}
.pane__extra{position:absolute; right:10px; bottom:10px; width:44%; height:auto; border-radius:8px; box-shadow:0 10px 24px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.18)}
.pane__keys{position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .25s ease; background:radial-gradient(90% 80% at 50% 30%, #FFFFFF, #ECE8FF)}
.pane__keys.is-on{opacity:1}
.pane__keys > span{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; padding:20px; transform:scale(1.6)}
.pane__keys .chip--mode{height:32px; font-size:14px}
.pane__card{background:rgba(36,32,48,.94); color:#fff; border-radius:14px; padding:14px 16px 16px}
.pane__title{display:flex; align-items:center; justify-content:space-between; gap:12px}
.pane__name{font-size:15px; font-weight:700}
.pane__key{display:inline-flex; gap:4px; flex:none}
.pane__key .key{background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); color:#fff; height:24px; min-width:24px; font-size:12.5px; border-radius:6px}
.pane__key .chip{height:24px; font-size:12px; background:rgba(255,255,255,.1) !important; color:#fff !important; border-color:rgba(255,255,255,.25) !important}
.pane__key .combo{gap:3px}
.pane__key .entry__sep{color:rgba(255,255,255,.6); font-size:12px}
.pane__desc{margin-top:6px; font-size:13px; font-weight:500; line-height:1.45; color:rgba(255,255,255,.74)}
html.rm .pane__img, html.rm .pane__keys{transition:none}

@media (min-width:1100px){
  .guide{grid-template-columns:clamp(180px, 16vw, 220px) minmax(0,1fr); gap:clamp(24px, 2.4vw, 36px); align-items:start}
  /* the pane depends only on width, so with JS the three-column layout applies from the first layout */
  .guide.has-pane, html.js .guide{grid-template-columns:clamp(180px, 16vw, 220px) minmax(0,1fr) clamp(300px, 28vw, 400px)}
  .guide.has-pane .entry__pic, html.js .guide .entry__pic{display:none}
  .guide-nav, .guide-pane{position:sticky; top:calc(var(--nav-h) + 20px)}
  .guide-nav ul{display:grid; gap:2px}
  .guide-nav a{padding:10px 10px 10px 14px}
  .guide-nav a[aria-current="true"]::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--violet)}
  .guide-nav__search{display:none}
}
@media (min-width:1440px){ .guide-group__list{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:1099.98px){
  html.js .guide-nav__search[hidden]{display:grid !important; visibility:hidden}
  .guide-nav{position:sticky; top:calc(var(--nav-h) + var(--safe-t)); z-index:5; display:flex; align-items:center; gap:8px;
    margin-inline:calc(-1 * var(--gutter)); padding:6px var(--gutter); background:rgba(250,248,255,.96); border-block:1px solid var(--paper-line); margin-bottom:20px}
  .guide-nav ul{display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain; flex:1; min-width:0;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right:24px}
  .guide-nav ul::-webkit-scrollbar{display:none}
  .guide-nav li{flex:none; scroll-snap-align:start}
  .guide-nav a{height:44px; padding:0 8px 0 14px; white-space:nowrap; background:#fff; box-shadow:0 0 0 1px var(--paper-line-2); border-radius:var(--r-pill)}
  .guide-nav a[aria-current="true"]{background:#F0ECFF; box-shadow:0 0 0 1.5px var(--violet)}
  .guide-group{scroll-margin-top:calc(var(--nav-h) + 76px)}
  .entry{scroll-margin-top:calc(var(--nav-h) + 84px)}
}
@media (min-width:640px) and (max-width:1099.98px){ .guide-group__list{grid-template-columns:repeat(2, minmax(0,1fr))} }

.guide-end{margin-top:clamp(72px, 9vw, 128px); display:flex; flex-direction:column; align-items:center; text-align:center}
.guide-end h3{font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight:800; letter-spacing:-.03em; margin-bottom:clamp(28px, 4vw, 40px)}
.guide-end .cta-meta{margin-top:28px}

/* ---------- Finale ---------- */
.finale{overflow-x:clip; text-align:center}
.finale__inner{display:flex; flex-direction:column; align-items:center}
.finale__stage{position:relative; width:var(--icon-size); aspect-ratio:1; margin:0 auto clamp(28px, 4vw, 48px)}
.finale__stage .gl-stage{position:absolute; inset:-60%; pointer-events:none; z-index:var(--z-gl)}
.finale .icon3d{position:relative; z-index:var(--z-content); width:100%}
.finale h2{margin-top:16px; font-size:clamp(2.5rem, 1.2rem + 5vw, 6rem); line-height:.98}
.finale__lead{margin:clamp(16px, 2vw, 24px) auto 0; max-width:40ch}
.finale__cta{margin-top:clamp(28px, 4vw, 44px)}
.finale .cta-meta{margin-top:28px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line); padding:var(--s-9) var(--gutter) calc(var(--s-7) + var(--safe-b)); position:relative}
.footer__inner{max-width:var(--max); margin-inline:auto; display:grid; gap:40px}
.footer__row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px}
.footer__brand{display:flex; align-items:center; gap:12px}
.footer__brand img{width:28px; height:28px; border-radius:7px}
.footer__brand p{display:flex; flex-direction:column; line-height:1.25}
.footer__brand strong{font-size:15px}
.footer__brand span{font-size:var(--fs-small); color:var(--faint)}
.footer__nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 8px}
.footer__nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 10px; color:var(--muted); font-size:var(--fs-small); font-weight:600; text-decoration:none; border-radius:10px}
.footer__nav a[data-cta]{color:var(--text)}
@media (hover:hover){ .footer__nav a:hover{color:var(--text)} }
.footer__row--legal{align-items:flex-end; padding-top:28px; border-top:1px solid var(--line)}
.footer__legal{display:grid; gap:6px; font-size:var(--fs-small); color:var(--faint); max-width:46rem}
.footer__sign{font-size:clamp(1.5rem, 1rem + 2vw, 2.5rem); font-weight:700; letter-spacing:-.03em; line-height:1}
@media (max-width:639.98px){ .footer__nav a{padding:0 8px} .footer__nav ul{margin-left:-8px} }

/* ---------- 404 ---------- */
.nf-body{display:flex; flex-direction:column; min-height:100svh}
.nf{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:calc(48px + var(--safe-t)) var(--gutter) 48px}
.nf__icon{width:160px; height:160px; filter:var(--fx-icon); margin-bottom:28px}
.nf h1{font-size:clamp(2.25rem, 1rem + 5vw, 4.5rem); line-height:1}
.nf__lead{margin-top:18px; max-width:38ch}
.nf__actions{margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px 20px}
.pill-link{display:inline-flex; align-items:center; height:56px; padding:0 24px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:700; text-decoration:none; transition:border-color var(--d-2), background-color var(--d-2)}
@media (hover:hover){ .pill-link:hover{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.05)} }
.nf__foot{padding:24px var(--gutter) calc(28px + var(--safe-b)); text-align:center; font-size:var(--fs-small); color:var(--faint); display:grid; gap:4px}
@media (max-width:639.98px){ .nf__actions{flex-direction:column-reverse; width:100%} .nf__actions .cta-frame{width:min(100% - 2 * var(--vf-pad) - 8px, 400px)} .pill-link{width:min(100% - 2 * var(--vf-pad) - 8px, 400px); justify-content:center} }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(24px + var(--safe-b)); z-index:var(--z-toast); max-width:min(92vw, 420px);
  padding:12px 18px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:#fff; text-align:center;
  background:rgba(20,16,40,.72); border:1px solid rgba(255,255,255,.16); box-shadow:var(--sh-glass);
  -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%);
  transform:translate(-50%, 16px); opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity var(--d-3) var(--ease-out), transform var(--d-4) var(--ease-out), visibility 0s linear var(--d-4);
}
.toast.is-on{opacity:1; transform:translate(-50%, 0); visibility:visible; transition:opacity var(--d-3) var(--ease-out), transform var(--d-4) var(--ease-out), visibility 0s}
.toast:empty{display:none}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .icon3d__fallback{animation:none}
}
html.rm .icon3d__fallback, html.vf-static .icon3d__fallback{animation:none}

/* ---------- Print ---------- */
@media print{
  .aurora, .nav, .scroll-cue, .gl-stage, .veil__wrap, .vf--scene, .pcard, .flash, .toast{display:none !important}
  body{background:#fff; color:#000}
}