/* v1 "Gallery". Layout: one calm column on the app's grey ground; real photos float, then
   glide into the app; every later screen holds one idea and one picture.
   Tokens come from ../shared/base.css (the app's Tokens.kt). */
:root{
  --gutter:clamp(20px,5vw,40px);
  --maxw:1120px;
  --r-card:25px; --r-sheet:28px; --r-tile:12px;
  --shadow-card:0 2px 4px rgba(0,0,0,.06);
  --shadow-float:0 18px 40px -18px rgba(0,0,0,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
  --bar-h:64px;
}
html{scroll-padding-top:var(--bar-h)}
body{overflow-x:clip}
::selection{background:var(--sw-accent);color:var(--sw-on-ink)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{margin:0;color:var(--sw-title);text-wrap:balance;letter-spacing:-.045em}
p{margin:0}
a{color:inherit}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--sw-ink);color:var(--sw-on-ink);padding:10px 14px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- type ---------- */
h1{font:700 clamp(44px,11.6vw,104px)/.98 var(--font-sans);letter-spacing:-.05em}
h2{font:700 clamp(36px,8vw,72px)/1.02 var(--font-sans);letter-spacing:-.048em}
h3{font:600 21px/1.25 var(--font-sans);letter-spacing:-.035em}
.lede{font:500 clamp(17px,2.1vw,20px)/1.45 var(--font-sans);color:var(--sw-muted);max-width:30em;letter-spacing:-.025em}
.sub{font:500 clamp(17px,1.9vw,19px)/1.45 var(--font-sans);color:var(--sw-muted);letter-spacing:-.025em;max-width:32em}
.label{font:500 12px/1 var(--font-mono);letter-spacing:-.01em;color:var(--sw-meta);text-transform:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--font-mono);color:var(--sw-quiet-text);background:var(--sw-quiet);border-radius:999px;padding:8px 12px 8px 10px;letter-spacing:-.01em}
.dot{width:8px;height:8px;border-radius:50%;display:block;background:#34C759;box-shadow:0 0 0 3px rgba(52,199,89,.18);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.8)}}
.meta{font:500 14px/1.4 var(--font-sans);color:var(--sw-meta)}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 var(--font-mono);letter-spacing:-.01em;border-radius:999px;padding:8px 11px;background:var(--sw-quiet);color:var(--sw-quiet-text);white-space:nowrap}
.chip-photo{background:rgba(255,255,255,.94);color:#0A0A0A;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.chip-after{background:#0A0A0A;color:#fff}

/* ---------- buttons and badges ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;text-decoration:none;font:500 15px/1 var(--font-sans);letter-spacing:-.03em;padding:12px 16px;white-space:nowrap;transition:transform .25s var(--ease),opacity .25s}
.pill:active{transform:scale(.97)}
.pill-ink{background:var(--sw-ink);color:var(--sw-on-ink)}
.pill-lg{font-size:19.5px;padding:18px 26px;min-height:60px}
.pill .ig{width:20px;height:20px;flex:none}
/* ---------- text shine on the main buttons: the button stays still, a light passes through the words ---------- */
.shine > span{background:linear-gradient(100deg,var(--sw-on-ink) 0 40%,color-mix(in srgb,var(--sw-on-ink) 35%,var(--sw-ink)) 50%,var(--sw-on-ink) 60% 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-block:.14em .22em;margin-block:-.14em -.22em;
  animation:shine 3.6s ease-in-out infinite;animation-delay:var(--shine-delay,.6s)}
@keyframes shine{0%,30%{background-position:100% 0}70%,100%{background-position:0 0}}
.bar-cta{--shine-delay:2.4s}
@media (prefers-reduced-motion:reduce){.shine > span{animation:none;background:none;color:inherit}}

.badges{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px 8px 14px;border-radius:14px;background:#0A0A0A;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);position:relative}
.badge svg{width:22px;height:22px;flex:none}
.badge span{display:flex;flex-direction:column;gap:3px;text-align:left}
.badge small{font:500 10.5px/1 var(--font-sans);letter-spacing:-.005em;opacity:.8}
.badge b{font:600 17px/1 var(--font-sans);letter-spacing:-.03em}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge{background:#1d1e21}}
:root[data-theme="dark"] .badge{background:#1d1e21}
/* Device-aware visibility: android, ios, and desktop (the no-JS default). */
html[data-device="android"] .badge:not(.vis-a),
html[data-device="ios"] .badge:not(.vis-i),
html:not([data-device="android"]):not([data-device="ios"]) .badge:not(.vis-d){display:none}
html[data-device="android"] .only-desktop,html[data-device="ios"] .only-desktop{display:none!important}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) var(--gutter) 10px;min-height:var(--bar-h);
  background:color-mix(in srgb,var(--sw-ground) 72%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.bar.scrolled{border-bottom-color:var(--sw-divider)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--sw-title);font:700 19px/1 var(--font-sans);letter-spacing:-.045em}
.brand .mark{width:36px;height:auto;display:block}
.bar-right{display:flex;align-items:center;gap:8px}
.theme{appearance:none;border:0;width:42px;height:42px;border-radius:50%;background:var(--sw-quiet);color:var(--sw-quiet-text);display:grid;place-items:center;cursor:pointer;padding:0}
.theme svg{width:19px;height:19px;grid-area:1/1;transition:transform .5s var(--ease),opacity .3s}
.theme .moon{opacity:0;transform:rotate(-60deg) scale(.6)}
:root[data-theme="dark"] .theme .sun{opacity:0;transform:rotate(60deg) scale(.6)}
:root[data-theme="dark"] .theme .moon{opacity:1;transform:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .sun{opacity:0;transform:rotate(60deg) scale(.6)}
  :root:not([data-theme="light"]) .theme .moon{opacity:1;transform:none}}
.bar-cta .short{display:none}
@media (max-width:560px){.bar-cta .long{display:none}.bar-cta .short{display:inline}.bar-cta{padding:12px 18px}}

/* The theme switch reveals the new theme in a circle from the button (main.js). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------- 1 · stage ---------- */
.stage{position:relative}
.sticky{position:relative}
.hero-area{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:calc(var(--bar-h) + 24px) var(--gutter) 56px}
.tiles{position:absolute;inset:0;pointer-events:none;--mx:0;--my:0}
.tile{position:absolute;left:var(--mx0);top:var(--my0);width:var(--ms);aspect-ratio:1;margin-left:calc(var(--ms)/-2);margin-top:calc(var(--ms)/-2);
  transform-origin:0 0;will-change:transform,opacity;--calm:1}
.par{width:100%;height:100%;transform:translate3d(calc(var(--mx)*var(--d)*26px*var(--calm)),calc(var(--my)*var(--d)*20px*var(--calm)),0) rotate(calc(var(--r)*var(--calm)))}
.drift{width:100%;height:100%;animation:drift 11s ease-in-out infinite alternate;animation-delay:var(--dl)}
.drift img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-tile);box-shadow:var(--shadow-float);background:var(--sw-quiet)}
@keyframes drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(6px,-9px,0)}100%{transform:translate3d(-5px,7px,0)}}
/* The quieter layer: smaller, softer, each photo fading in and out on its own clock. */
.ghost{z-index:0;transform-origin:50% 50%}
.ghost .drift img{box-shadow:0 6px 18px -8px rgba(0,0,0,.25);animation:ghost 14s ease-in-out infinite;animation-delay:var(--gl)}
@keyframes ghost{0%,100%{opacity:0;transform:scale(.94)}18%,58%{opacity:.85;transform:scale(1)}76%{opacity:0;transform:scale(.97)}}
@media (max-width:899px){.ghost.wide-only{display:none}}
@media (min-width:900px){.tile{left:var(--dx0);top:var(--dy0);width:var(--ds);margin-left:calc(var(--ds)/-2);margin-top:calc(var(--ds)/-2)}.drift img{border-radius:18px}}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:860px}
.hero-copy h1{margin-top:2px}
.hero-copy .lede{max-width:27em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:6px}
/* Phones and tablets: the buttons stack, so give them more air between them. */
@media (max-width:1023px){.cta-row{gap:20px}.badges{gap:14px}}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:8px;font:500 11px/1 var(--font-mono);color:var(--sw-meta)}
.scroll-hint span{width:1.5px;height:28px;background:linear-gradient(var(--sw-meta),transparent);animation:hint 2s var(--ease) infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.phone-area{display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px var(--gutter) 72px}
.phone-slot{--sw-w:min(300px,68vw)}
.phone-cap{text-align:center;font:600 clamp(22px,3vw,30px)/1.2 var(--font-sans);letter-spacing:-.04em;color:var(--sw-title);max-width:16em;text-wrap:balance}
.phone-cap b{font-weight:700;color:var(--sw-ink)}
.phone-cap span{display:block;margin-top:8px;font:500 16px/1.4 var(--font-sans);color:var(--sw-muted);letter-spacing:-.02em}

/* Pinned version of the hero moment: only with JS and when motion is welcome. */
@media (prefers-reduced-motion:no-preference){
  .js .stage{height:290svh}
  .js .sticky{position:sticky;top:0;height:100svh;overflow:hidden}
  .js .hero-area{position:absolute;inset:0;min-height:0;z-index:3}
  .js .hero-copy{will-change:transform,opacity}
  .js .scroll-hint{display:flex}
  @media (max-width:560px){.js .scroll-hint{display:none}}
  .js .phone-area{position:absolute;inset:0;padding:calc(var(--bar-h) + 8px) var(--gutter) 20px;justify-content:center;gap:18px;will-change:transform;pointer-events:none}
  .js .phone-slot{--sw-w:min(300px,64vw,calc((100svh - var(--bar-h) - 150px) * 440 / 956))}
  .js .phone-cap{opacity:0;will-change:opacity,transform}
  .js .phone-area .sw-quad img[data-target]{opacity:0}
}
@media (min-width:900px){
  .phone-area{flex-direction:row;justify-content:center;gap:72px}
  .phone-cap{text-align:left;max-width:12em}
  .js .phone-area{gap:72px}
  .js .phone-slot{--sw-w:min(330px,calc((100svh - var(--bar-h) - 60px) * 440 / 956))}
}

/* ---------- 2 · local ---------- */
.local{padding-block:clamp(110px,16vw,200px)}
.local .wrap{max-width:980px;display:flex;flex-direction:column;gap:22px}
.lit{font:700 clamp(34px,6.4vw,64px)/1.1 var(--font-sans);letter-spacing:-.045em;color:var(--sw-title);text-wrap:pretty}
.lit .w{transition:opacity .2s linear}
.plane{display:inline-flex;align-items:center;gap:.28em;vertical-align:.06em;background:var(--sw-quiet);color:var(--sw-quiet-text);border-radius:999px;padding:.12em .2em .12em .38em;font-size:.62em;letter-spacing:-.03em;white-space:nowrap}
.plane svg{width:.9em;height:.9em;flex:none;transition:transform .5s var(--ease)}
.plane .knob{position:relative;width:1.7em;height:1em;border-radius:999px;background:var(--sw-ring);flex:none;transition:background .35s}
.plane .knob::after{content:"";position:absolute;top:.12em;left:.12em;width:.76em;height:.76em;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.plane.on{color:var(--sw-ink)}
.plane.on svg{transform:rotate(45deg)}
.plane.on .knob{background:var(--sw-accent)}
.plane.on .knob::after{transform:translateX(.7em);background:var(--sw-on-ink)}

/* ---------- 3 · proof ---------- */
.proof{padding-block:clamp(40px,8vw,100px) clamp(110px,14vw,180px)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.ba{position:relative;overflow:hidden;border-radius:var(--r-sheet);aspect-ratio:4/5;background:var(--sw-quiet);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;box-shadow:var(--shadow-card)}
@media (min-width:700px){.ba{aspect-ratio:16/10}}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-after{position:absolute;inset:0;overflow:hidden;transform:translate3d(calc(var(--pos)*100%),0,0)}
.ba-after .ba-img{transform:translate3d(calc(var(--pos)*-100%),0,0)}
.ba-chip{position:absolute;left:0;top:16px;z-index:2;will-change:transform}
.ba-handle{position:absolute;inset:0;pointer-events:none;transform:translate3d(calc(var(--pos)*100%),0,0)}
.ba-handle::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.25)}
.ba-knob{position:absolute;left:-24px;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:50%;background:#fff;color:#0A0A0A;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ba-knob svg{width:22px;height:22px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:pan-y}
.ba:has(.ba-range:focus-visible){outline:2px solid var(--sw-accent);outline-offset:4px}
.ba-foot{margin-top:22px;font:500 clamp(17px,1.9vw,19px)/1.45 var(--font-sans);color:var(--sw-muted);text-align:center}

/* ---------- 4 · ask ---------- */
.ask{padding-block:clamp(40px,8vw,100px) clamp(110px,14vw,180px)}
.ask-grid{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.ask-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px}}
.sheet-scene{position:relative;border-radius:var(--r-sheet);overflow:hidden;aspect-ratio:4/5;background:#0B0B0C;display:grid;place-items:center;padding:20px;isolation:isolate;max-width:520px;width:100%;justify-self:center}
.sheet-scene > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:-1}
.file-chip{position:absolute;top:18px;left:50%;transform:translateX(-50%);font:500 12px/1 var(--font-mono);color:#C6C6CB;border:1px solid rgba(255,255,255,.22);background:rgba(11,11,12,.55);border-radius:999px;padding:9px 12px;white-space:nowrap}
.sheet{width:min(100%,360px);background:#fff;color:#0A0A0A;border-radius:var(--r-sheet);padding:26px 22px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);transition:transform .5s var(--ease),opacity .4s}
.sheet-title{font:700 23px/1.2 var(--font-sans);letter-spacing:-.045em}
.sheet-body{font:500 15.5px/1.45 var(--font-sans);color:#6E6E73;letter-spacing:-.03em;margin-bottom:8px}
.sheet-btn{appearance:none;border:0;border-radius:999px;font:500 18px/1 var(--font-sans);letter-spacing:-.035em;min-height:56px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .2s var(--ease),background .3s}
.sheet-btn:active{transform:scale(.98)}
.sheet-yes{background:#0A0A0A;color:#fff}
.sheet-yes svg{width:18px;height:18px}
.sheet-no{background:#E9E9E8;color:#0A0A0A}
.sheet-scene.done .sheet{transform:translate3d(0,26px,0) scale(.94);opacity:0;pointer-events:none}
.saved-toast{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-30%,0) scale(.96);opacity:0;background:#fff;color:#0A0A0A;border-radius:999px;padding:14px 20px;font:500 16px/1.2 var(--font-sans);letter-spacing:-.03em;white-space:nowrap;box-shadow:0 20px 50px -18px rgba(0,0,0,.6);transition:transform .55s var(--ease) .15s,opacity .35s .15s;pointer-events:none}
.saved-toast b{color:#0A0A0A;font-weight:700}
.sheet-scene.done .saved-toast{transform:translate3d(-50%,-50%,0) scale(1);opacity:1}
.ask-copy{display:flex;flex-direction:column;gap:22px}
.facts{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.facts li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;gap:6px;padding:18px 0;border-top:1px solid var(--sw-divider);font:600 clamp(18px,2vw,21px)/1.35 var(--font-sans);letter-spacing:-.035em;color:var(--sw-title)}
.facts li:last-child{border-bottom:1px solid var(--sw-divider)}
.facts span{font:500 12px/1 var(--font-mono);color:var(--sw-meta);letter-spacing:-.01em}

/* ---------- 5 · duo ---------- */
.duo{position:relative}
.duo-sticky{display:flex;flex-direction:column}
.duo-layer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:clamp(80px,10vw,120px) var(--gutter)}
.duo-light{background:#F3F3F2;color:#0A0A0A}
.duo-dark{background:#0B0B0C;color:#F2F2F0}
.duo-light h2{color:#151515}.duo-light .sub{color:#6E6E73}.duo-light .label{color:#7A7A80}
.duo-dark h2{color:#EDEDEB}.duo-dark .sub{color:#9D9DA3}.duo-dark .label{color:#8F8F96}
.duo-copy{display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
.duo-phone{--sw-w:min(280px,64vw)}
@media (min-width:900px){.duo-layer{flex-direction:row;gap:96px}.duo-copy{text-align:left;align-items:flex-start;min-width:340px}}
@media (prefers-reduced-motion:no-preference){
  .js .duo{height:230svh}
  .js .duo-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:block}
  .js .duo-layer{position:absolute;inset:0;padding-top:calc(var(--bar-h) + 10px);padding-bottom:20px;gap:24px}
  .js .duo-dark{opacity:0;will-change:opacity}
  .js .duo-phone{--sw-w:min(280px,62vw,calc((100svh - var(--bar-h) - 210px) * 440 / 956))}
  .js .duo-copy{will-change:transform}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){.js .duo-layer{gap:96px}.js .duo-phone{--sw-w:min(310px,calc((100svh - var(--bar-h) - 70px) * 440 / 956))}}

/* ---------- 6 · more ---------- */
.more{padding-block:clamp(110px,14vw,180px)}
.cards3{display:grid;gap:16px}
@media (min-width:860px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.fcard{background:var(--sw-surface);border-radius:var(--r-card);padding:14px 14px 26px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-card)}
.fcard h3{padding:14px 10px 0}
.fcard p{padding:0 10px;color:var(--sw-muted);font-size:16.5px;line-height:1.45;letter-spacing:-.025em}
.fvis{position:relative;aspect-ratio:5/4;border-radius:18px;background:var(--sw-ground);overflow:hidden}
.alike figure{position:absolute;margin:0;width:44%;top:16%;display:flex;flex-direction:column;gap:7px;transition:transform .6s var(--ease),opacity .6s}
.alike .a1{left:7%}.alike .a2{right:7%}
.alike img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block}
.alike figcaption{font:500 11.5px/1.2 var(--font-mono);color:var(--sw-meta);letter-spacing:-.01em}
.alike .a1 img{object-position:30% 50%}.alike .a2 img{object-position:62% 50%}
.alike .best{position:absolute;left:9%;top:calc(16% + 8px);background:var(--sw-accent);color:var(--sw-on-ink);transform:scale(.6);opacity:0;transition:transform .5s var(--ease) .5s,opacity .4s .5s}
.fcard.on .alike .a2{transform:translate3d(0,6%,0) scale(.94);opacity:.38}
.fcard.on .alike .best{transform:none;opacity:1}
.layouts .lay{position:absolute;inset:12px 12px 48px;transition:opacity .6s var(--ease),transform .6s var(--ease);opacity:0;transform:scale(.97)}
.layouts[data-l="0"] .lay-cards,.layouts[data-l="1"] .lay-grid,.layouts[data-l="2"] .lay-bento{opacity:1;transform:none}
.lay-cards{display:flex;flex-direction:column;gap:7px}
.lc{flex:1;min-height:0;display:flex;align-items:center;gap:10px;background:var(--sw-surface);border-radius:12px;padding:6px}
.lc .q{height:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;flex:none}
.lc .q img{width:100%;height:100%;object-fit:cover;display:block}
.lt{display:flex;flex-direction:column;gap:3px;min-width:0}.lt b{font:600 14px/1.1 var(--font-sans);letter-spacing:-.035em;color:var(--sw-title)}.lt small{font:500 12px/1 var(--font-sans);color:var(--sw-meta);letter-spacing:-.02em}
.lay-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}
.lay-grid img,.lay-bento img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:10px;display:block}
.lay-bento{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:6px}
.lay-bento img:first-child{grid-row:1/4}
.lay-name{position:absolute;left:12px;bottom:10px;background:var(--sw-surface);color:var(--sw-ink);display:grid}
.lay-name i{font-style:normal;grid-area:1/1;transition:opacity .4s,transform .4s var(--ease);opacity:0;transform:translateY(4px)}
.layouts[data-l="0"] .lay-name i:nth-child(1),.layouts[data-l="1"] .lay-name i:nth-child(2),.layouts[data-l="2"] .lay-name i:nth-child(3){opacity:1;transform:none}
.otd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.otd-ring{width:46%;aspect-ratio:1;border-radius:50%;padding:7px;background:conic-gradient(var(--sw-accent) var(--deg,360deg),var(--sw-ring) 0);display:block}
.otd-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;border:4px solid var(--sw-ground)}
.otd-cap{font:500 14px/1 var(--font-sans);color:var(--sw-muted);letter-spacing:-.02em}
.otd-cap b{color:var(--sw-ink);font-weight:600}
.fcard.on .otd-ring{animation:ring 1.4s var(--ease) both}
@keyframes ring{from{transform:scale(.9) rotate(-30deg);opacity:.6}to{transform:none;opacity:1}}

/* ---------- 7 · final ---------- */
.final{padding-block:clamp(40px,8vw,100px) clamp(80px,10vw,140px)}
.final-card{background:var(--sw-surface);border-radius:clamp(28px,4vw,44px);padding:clamp(36px,6vw,80px) clamp(22px,5vw,72px);display:grid;gap:40px;align-items:center;box-shadow:var(--shadow-card)}
.final-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.final-copy .cta-row{justify-content:flex-start}
.final-copy .badges{justify-content:flex-start}
@media (min-width:900px){.final-card{grid-template-columns:minmax(0,1fr) auto}}
.qr-card{display:none;flex-direction:column;align-items:center;gap:14px;background:var(--sw-ground);border-radius:var(--r-card);padding:26px;width:248px}
.qr-card img{width:180px;height:180px;image-rendering:pixelated;background:#fff;padding:14px;border-radius:16px;box-sizing:content-box;display:block}
.qr-card p{font:500 14px/1.3 var(--font-sans);color:var(--sw-muted);text-align:center;letter-spacing:-.02em}
@media (min-width:900px){.qr-card{display:flex}}

/* ---------- footer ---------- */
.foot{padding-block:36px 56px;border-top:1px solid var(--sw-divider)}
.foot-row{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.foot nav{display:flex;gap:22px}
.foot nav a{text-decoration:none;color:var(--sw-muted);font-size:15px}
.foot nav a:hover{color:var(--sw-ink)}
.foot p{font:500 13px/1.6 var(--font-sans);color:var(--sw-meta);letter-spacing:-.01em;flex-basis:100%}
@media (min-width:900px){.foot p{flex-basis:auto;text-align:right}}

@media (prefers-reduced-motion:reduce){
  .drift,.dot,.scroll-hint span,.ghost .drift img{animation:none}
  .ghost .drift img{opacity:.7}
  *{transition-duration:.01ms!important}
}