:root{
  --o-background-100:#ffffff;
  --o-background-200:#f9f8f6;
  --o-gray-100:#f9f8f6;
  --o-gray-200:#f2f1ef;
  --o-gray-300:#edecea;
  --o-gray-400:#d5d9e2;
  --o-gray-500:#bec2ca;
  --o-gray-600:#a8acb3;
  --o-gray-700:#93969d;
  --o-gray-800:#7d8187;
  --o-gray-900:#6b6f75;
  --o-gray-1000:#0a0a0a;
  --o-gray-alpha-100:rgba(10, 10, 10, 0.04);
  --o-gray-alpha-200:rgba(10, 10, 10, 0.05);
  --o-gray-alpha-300:rgba(10, 10, 10, 0.06);
  --o-gray-alpha-400:rgba(10, 10, 10, 0.1);
  --o-gray-alpha-500:rgba(10, 10, 10, 0.12);
  --o-gray-alpha-600:rgba(10, 10, 10, 0.15);
  --o-gray-alpha-700:rgba(10, 10, 10, 0.3);
  --o-gray-alpha-800:rgba(10, 10, 10, 0.45);
  --o-gray-alpha-900:rgba(10, 10, 10, 0.6);
  --o-gray-alpha-1000:rgba(10, 10, 10, 0.91);
  --o-blue-100:#ecf8ff;
  --o-blue-200:#def1ff;
  --o-blue-300:#cee9ff;
  --o-blue-400:#b3d9ff;
  --o-blue-500:#95c4ff;
  --o-blue-600:#70a9ff;
  --o-blue-700:#1a5fd6;
  --o-blue-800:#054fc5;
  --o-blue-900:#0f51c0;
  --o-blue-1000:#052867;
  --o-red-100:#ffefeb;
  --o-red-200:#ffe4dd;
  --o-red-300:#ffd6cd;
  --o-red-400:#ffbdb1;
  --o-red-500:#ffa093;
  --o-red-600:#ff7c6e;
  --o-red-700:#d0201f;
  --o-red-800:#be0008;
  --o-red-900:#af0004;
  --o-red-1000:#5e0002;
  --o-amber-100:#fff4e9;
  --o-amber-200:#ffecda;
  --o-amber-300:#fee2c8;
  --o-amber-400:#f7cfaa;
  --o-amber-500:#ebb989;
  --o-amber-600:#d99d60;
  --o-amber-700:#b26a00;
  --o-amber-800:#a25b00;
  --o-amber-900:#894800;
  --o-amber-1000:#482300;
  --o-green-100:#edfbf4;
  --o-green-200:#e0f6eb;
  --o-green-300:#d1f1e1;
  --o-green-400:#b7e4ce;
  --o-green-500:#99d3b8;
  --o-green-600:#73bd9c;
  --o-green-700:#1f8a65;
  --o-green-800:#007b57;
  --o-green-900:#006d4b;
  --o-green-1000:#003825;
  --o-sans:Geist, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --o-mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --o-heading-60:500 60px/60px var(--o-sans);
  --o-heading-36:500 36px/40px var(--o-sans);
  --o-heading-24:500 24px/32px var(--o-sans);
  --o-heading-16:500 16px/24px var(--o-sans);
  --o-copy-18:400 18px/29px var(--o-sans);
  --o-copy-16:400 16px/26px var(--o-sans);
  --o-label-16:400 16px/24px var(--o-sans);
  --o-label-14:400 14px/20px var(--o-sans);
  --o-label-13:400 13px/18px var(--o-sans);
  --o-label-12:400 12px/16px var(--o-sans);
  --o-label-13-mono:400 13px/18px var(--o-mono);
  --o-button-16:500 16px/24px var(--o-sans);
  --o-button-14:500 14px/20px var(--o-sans);
  --o-space-4:4px;
  --o-space-8:8px;
  --o-space-12:12px;
  --o-space-16:16px;
  --o-space-20:20px;
  --o-space-24:24px;
  --o-space-32:32px;
  --o-space-48:48px;
  --o-space-64:64px;
  --o-space-112:112px;
  --o-radius-base:16px;
  --o-radius-small:0px;
  --o-radius-medium:24px;
  --o-control-xs:28px;
  --o-control-sm:32px;
  --o-control-md:40px;
  --o-control-lg:44px;
  --o-icon-sm:16px;
  --o-icon-md:20px;
  --o-target:24px;
  --o-margin:24px;
  --o-gutter:20px;
  --o-content:1024px;
  --o-bar:64px;
  --o-fast:150ms ease;
  --o-base:250ms ease;
  --o-slow:420ms cubic-bezier(0.22, 1, 0.36, 1);
  --o-primary-hover:#262626; /* DESIGN.md Components: measured; outside the scales */
}

@font-face{font-family:Geist;src:url(/assets/fonts/Geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:80px;color-scheme:light}body{min-width:320px}
body{position:relative;background:var(--o-background-100);color:var(--o-gray-1000);font:var(--o-label-16);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
img{display:block}
.ic{display:block;flex-shrink:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--o-margin)}
.h60{font:var(--o-heading-60);letter-spacing:-.01em;text-wrap:balance}
.h36{font:var(--o-heading-36);letter-spacing:-.01em;text-wrap:balance}
.h16{font:var(--o-heading-16)}
.c18{font:var(--o-copy-18);text-wrap:pretty}
.c16{font:var(--o-copy-16);text-wrap:pretty}
.l14{font:var(--o-label-14)}
.l13{font:var(--o-label-13)}
.st{font-weight:500}
.muted{color:var(--o-gray-900)}
.ul{text-decoration:underline;text-underline-offset:2px;color:var(--o-gray-1000)}
.col{display:flex;flex-direction:column}
.rowx{display:flex;align-items:center}
.center{align-items:center;text-align:center}
.g8{gap:var(--o-space-8)}.g12{gap:var(--o-space-12)}.g16{gap:var(--o-space-16)}.g24{gap:var(--o-space-24)}
.g32{gap:var(--o-space-32)}.g48{gap:var(--o-space-48)}
/* top bar: material small */
.bar{position:absolute;top:0;left:0;right:0;height:var(--o-bar);z-index:10;background:rgba(255,255,255,.85);backdrop-filter:blur(12px)}
.bar .wrap{height:100%;display:flex;align-items:center;gap:var(--o-space-32)}
.mark{font:var(--o-heading-16);letter-spacing:-.01em}
.nav{display:flex;gap:var(--o-space-4);margin-left:calc(var(--o-space-16) * -1)}
.nav a{padding:6px 12px;font:var(--o-label-14);font-weight:500;color:var(--o-gray-900)}
.bar .btn{margin-left:auto}
/* pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.btn.lg{height:var(--o-control-lg);padding:0 24px;font:var(--o-button-16)}
.btn.md{height:var(--o-control-md);padding:0 18px;font:var(--o-button-14)}
.btn.sm{height:var(--o-control-sm);padding:0 12px;font:var(--o-button-14)}
.btn.primary{background:var(--o-gray-1000);color:var(--o-background-100)}
.btn.quiet{background:var(--o-gray-200)}
.btn.busy{background:var(--o-primary-hover)}
.spin{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);border-top-color:var(--o-background-100)}
/* waitlist form */
.wl{width:688px;display:flex;flex-direction:column;gap:var(--o-space-12);text-align:left}
.wl-row{display:flex;align-items:center;gap:var(--o-space-8)}
.wl-row .wl-field{flex:1;min-width:0}
/* the switcher: two equal halves and one white thumb that slides between them */
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;flex-shrink:0;width:232px;height:var(--o-control-lg);padding:2px;
  border-radius:999px;background:var(--o-gray-200);box-shadow:inset 0 0 0 1px var(--o-gray-400);isolation:isolate}
.seg::before{content:"";position:absolute;left:2px;top:2px;width:calc(50% - 2px);height:40px;border-radius:999px;z-index:-1;
  background:var(--o-background-100);box-shadow:0 1px 2px rgba(0, 0, 0, 0.08),inset 0 0 0 1px var(--o-gray-400);
  transition:transform 320ms cubic-bezier(0.22, 1, 0.36, 1)}
.wl[data-role="give"] .seg::before{transform:translateX(100%)}
.seg button{height:40px;border-radius:999px;font:var(--o-button-14);color:var(--o-gray-900);white-space:nowrap;text-align:center;
  transition:color 320ms cubic-bezier(0.22, 1, 0.36, 1)}
.seg button:hover,.seg button[aria-checked="true"]{color:var(--o-gray-1000)}
.seg button:focus-visible{outline:2px solid var(--o-blue-700);outline-offset:2px}
.seg:active::before{transform:scale(.97)}
.wl[data-role="give"] .seg:active::before{transform:translateX(100%) scale(.97)}
.wl-field{height:var(--o-control-lg);border-radius:999px;background:var(--o-gray-100);box-shadow:inset 0 0 0 1px var(--o-gray-400);
  display:flex;align-items:center;padding:0 4px 0 20px;gap:var(--o-space-8)}
.wl-field .v{flex:1;min-width:0;font:var(--o-label-16);white-space:nowrap;overflow:hidden}
.wl-field .v.ph{color:var(--o-gray-900)}
.wl-field .btn{height:36px;padding:0 16px;font:var(--o-button-14)}
.wl-field.focus{box-shadow:inset 0 0 0 1px var(--o-gray-600),0 0 0 2px var(--o-background-100),0 0 0 4px var(--o-blue-700)}
.wl-field.err{box-shadow:inset 0 0 0 1px var(--o-red-700)}
.caret{display:inline-block;width:1.5px;height:20px;background:var(--o-gray-1000);vertical-align:-4px;margin-left:1px}
.wl-msg{display:flex;align-items:flex-start;justify-content:center;gap:var(--o-space-8);font:var(--o-label-13)}
.wl-msg .ic{margin-top:1px}
.wl-msg.err{color:var(--o-red-900)}
.wl-done{min-height:var(--o-control-lg);border-radius:var(--o-radius-base);background:var(--o-gray-100);display:flex;align-items:center;gap:var(--o-space-12);padding:var(--o-space-12) var(--o-space-20)}
.wl-done .ok{color:var(--o-green-900)}
.wl-done .inf{color:var(--o-blue-900)}
/* phones: the On Me screen under the iPhone frame, scaled */
.phone{--s:.76;position:relative;flex:none;width:calc(436.67px * var(--s));height:calc(889.01px * var(--s))}
.phone>div{position:absolute;left:0;top:0;width:436.67px;height:889.01px;transform:scale(var(--s));transform-origin:0 0}
.phone .scr{isolation:isolate;z-index:0;position:absolute;left:21.83px;top:18.51px;width:393px;height:852px;border-radius:55.09px;overflow:hidden;background:#000}
.phone .scr img{width:393px;height:852px}
.phone .shell{z-index:1;position:absolute;inset:0;width:100%;height:100%}
/* sections */
.lockup{display:flex;align-items:center;gap:var(--o-space-8)}
.logo{display:block;flex-shrink:0}
/* On Me's icon set into the headline, as the Mobbin Clone hero sets its icons: at 60px type,
   a 52 icon between two word spaces, dropped 4 below the baseline (Mobbin: 68 in 100, 6, at 80px) */
.slot{position:relative;display:inline-block;width:52px;height:0;vertical-align:baseline;margin-left:.25em;user-select:none}
.slot-in{position:absolute;left:50%;bottom:-4px;width:52px;height:52px;transform:translateX(-50%)}
.hero{padding-top:152px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .lead{max-width:680px;text-wrap:balance}
.hl{display:block}
.amz{display:inline-block;height:23px;width:auto;vertical-align:-7px;margin-left:2px}
.sec-head .c18{text-wrap:balance}
/* brand photos (DESIGN.md Icons and imagery): medium corners, a phone overlapping */
.hero-art{position:relative;width:100%;height:560px;margin-top:var(--o-space-48);margin-bottom:156px}
.hero-art>img,.art>img{width:100%;height:100%;object-fit:cover;border-radius:var(--o-radius-medium)}
.hero-art .phone{position:absolute;left:50%;top:64px;margin-left:calc(436.67px * var(--s) / -2)}
/* the one phone: it starts on the hero photo, sticks in the centre through the story, then leaves with it */
.flow{position:relative}
.track{position:absolute;left:0;right:0;top:64px;bottom:80px;z-index:5;pointer-events:none}
.track .phone{position:sticky;top:var(--phone-top,144px);margin:0 auto}
.flow .hero-art{margin-bottom:0}
.scr .layer{position:absolute;inset:0;width:393px;height:852px;opacity:0}
/* the phone's own status bar and home indicator, above every screen and its transitions */
.scr .sb{position:absolute;left:0;top:0;width:393px;height:54px;z-index:3;pointer-events:none;transition:color 420ms cubic-bezier(0.22, 1, 0.36, 1)}
.scr .sb .time{position:absolute;left:0;top:18.2px;width:142.4px;text-align:center;
  font:590 17px/22px -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}
.scr .sb svg{position:absolute;display:block;fill:currentColor}
.scr .home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:139px;height:5px;border-radius:3px;z-index:3;
  pointer-events:none;transition:background-color 420ms cubic-bezier(0.22, 1, 0.36, 1)}
.scr .layer.on{opacity:1}
.finger{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;z-index:4;
  background:var(--o-gray-alpha-700);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9),0 2px 10px rgba(0,0,0,.25);opacity:0;
  transition:left 520ms cubic-bezier(0.22, 1, 0.36, 1),top 520ms cubic-bezier(0.22, 1, 0.36, 1),opacity var(--o-base),transform var(--o-fast)}
.finger.show{opacity:1}
.finger.down{transform:scale(.78);background:var(--o-gray-alpha-800)}
.ripple{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--o-gray-alpha-700)}
.story{position:relative;margin-top:var(--o-space-48)}
.stage{position:sticky;top:0;height:100svh}
.stage .wrap{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 332px minmax(0,1fr);gap:var(--o-space-64);align-items:center;padding-top:var(--o-bar)}
.chap{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:var(--o-space-32);width:400px;max-width:100%;justify-self:end;
  transition:opacity var(--o-base)}
.chap.off,.pic.off{opacity:0;visibility:hidden;pointer-events:none}
.chap .list>div{transition:color var(--o-fast)}
.chap .list>div:not(.on) h3{color:var(--o-gray-900)}
.chap .list>div p{display:none}
.chap .list>div.on p{display:block}
.chap .list>div.on{box-shadow:inset 2px 0 0 var(--o-gray-1000);padding-left:var(--o-space-16)}
.chap .list>div{padding-left:var(--o-space-16);box-shadow:inset 2px 0 0 transparent}
.pic{grid-column:3;grid-row:1;width:100%;max-width:400px;height:560px;transition:opacity var(--o-slow)}
.pic img{width:100%;height:100%;object-fit:cover;border-radius:var(--o-radius-medium)}
.mid{grid-column:2;grid-row:1}
.still .stage{position:relative}
.parts{display:grid;grid-template-columns:1fr 1fr;gap:var(--o-space-12);margin-bottom:var(--o-space-8)}
.part{display:flex;flex-direction:column;gap:var(--o-space-8);font:var(--o-label-14);font-weight:500;color:var(--o-gray-900);
  transition:color var(--o-base)}
.part span{display:flex;align-items:center;gap:var(--o-space-8);white-space:nowrap}
.part b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font:var(--o-label-12);
  font-weight:500;background:var(--o-gray-200);color:var(--o-gray-900);transition:background-color var(--o-base),color var(--o-base)}
.part.on{color:var(--o-gray-1000)}
.part.on b{background:var(--o-gray-1000);color:var(--o-background-100)}
.part i{position:relative;display:block;height:2px;border-radius:2px;background:var(--o-gray-400);overflow:hidden}
.part i::after{content:"";position:absolute;inset:0;background:var(--o-gray-1000);transform-origin:left;transform:scaleX(var(--f));
  transition:transform var(--o-slow)}
@media (prefers-reduced-motion:reduce){.finger,.chap,.pic{transition:none}}
.split{display:grid;grid-template-columns:560px minmax(0,1fr);gap:var(--o-space-112);align-items:center}
.split.rev{grid-template-columns:minmax(0,1fr) 560px}
.art{position:relative;height:720px}
.art .phone{position:absolute;bottom:-48px;right:-80px}
.split.rev .art .phone{right:auto;left:-80px}
.sec-text{display:flex;flex-direction:column;gap:var(--o-space-32);max-width:520px}
.sec-text .c18{text-wrap:balance}
.list{border-bottom:1px solid var(--o-gray-400)}
.list>div{border-top:1px solid var(--o-gray-400);padding:20px 0;display:flex;flex-direction:column;gap:var(--o-space-8)}
.pcard{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:var(--o-space-48);background:var(--o-gray-100);border-radius:var(--o-radius-medium);padding:var(--o-space-8) var(--o-space-8) var(--o-space-8) var(--o-space-48)}
.pcard>.col{padding:var(--o-space-48) 0}
.pcard>img{width:100%;height:100%;min-height:520px;object-fit:cover;border-radius:calc(var(--o-radius-medium) - var(--o-space-8))}
.facts{display:flex;flex-direction:column;gap:var(--o-space-24)}
.facts>div{display:flex;flex-direction:column;gap:var(--o-space-4)}
.sec{padding-top:var(--o-space-112)}
.sec-head{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:var(--o-space-16);text-align:center;align-items:center}
.card{background:var(--o-gray-100);border-radius:var(--o-radius-medium);padding:var(--o-space-48)}
.faq{max-width:var(--o-content);margin:var(--o-space-48) auto 0;border-bottom:1px solid var(--o-gray-400)}
.faq>details{border-top:1px solid var(--o-gray-400)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--o-space-24);padding:20px 0;width:100%}
.faq-q .ic{color:var(--o-gray-900)}
.faq-a{max-width:672px;padding-bottom:var(--o-space-24);color:var(--o-gray-900)}
.foot{margin-top:var(--o-space-112);border-top:1px solid var(--o-gray-400)}
.foot .wrap{height:96px;display:flex;align-items:center;gap:var(--o-space-24);font:var(--o-label-13);color:var(--o-gray-900)}
.foot .links{margin-left:auto;display:flex;gap:var(--o-space-24)}

.bar{position:fixed}

@keyframes title-reveal{0%{opacity:.15;filter:blur(8px);transform:translateY(.25em)}}
@keyframes supporting-reveal{0%{opacity:0;filter:blur(8px);transform:translateY(12px)}}
@keyframes img-reveal{0%{opacity:0;filter:blur(8px);transform:translateY(40px)}}
@keyframes pop-in{0%{opacity:0;transform:scale(.72);filter:blur(7px)}45%{opacity:1;transform:scale(1.02);filter:blur(0)}
  68%{transform:scale(.995)}85%{transform:scale(1.001)}100%{opacity:1;transform:none;filter:none}}
@keyframes slot-open{0%{width:0}100%{width:52px}}
.hero .slot{animation:slot-open 260ms cubic-bezier(.16, 1, .3, 1) 1.4s both}
.hero .slot .logo{animation:pop-in 440ms ease-out 1.49s both}
.hero .hl{animation:title-reveal .5s ease .12s backwards}
.hero .hl+.hl{animation-delay:.18s}
.hero .lead,.hero .cta{animation:supporting-reveal .5s ease .3s both}
.hero .amz{animation:pop-in 440ms ease-out 1.6s both}
.track .phone{animation:img-reveal .8s ease .7s both}
.hero-art{animation:img-reveal .8s ease 1.35s both}
.bar{animation:supporting-reveal .5s ease both}
@media (prefers-reduced-motion:reduce){.hero *,.track .phone,.hero-art,.bar{animation:none!important}}

/* Static placements from the approved prototype. */
.prototype-1{margin-top:32px}
.prototype-2{left:282px;top:23.34px;width:19.33px;height:12px}
.prototype-3{left:309px;top:23px;width:16.62px;height:12.3px}
.prototype-4{left:333px;top:23px;width:27.3px;height:12.7px}
.prototype-5{object-position:50% 70%}
.prototype-6{--f:0.000}
.prototype-7{object-position:0% 60%}
.prototype-8{object-position:50% 35%}
.prototype-9{object-position:60% 50%}
.prototype-10{color:var(--o-gray-1000)}

/* Publication: responsive layout, real navigation, and concept disclosure. */
:root { --o-phone-ink:#000000; --o-amazon-ink:#0f1111; --o-dialog-backdrop:rgba(10,10,10,.48); }
:focus-visible { outline:2px solid var(--o-blue-700); outline-offset:4px; }
a,button,summary { touch-action:manipulation; }
.btn.primary:hover,.wl-field:hover .btn.primary { background:var(--o-primary-hover); }
.btn.quiet:hover { background:var(--o-gray-300); }
.nav a:hover,.foot a:hover,.step-label:hover { color:var(--o-gray-1000); text-decoration:underline; text-underline-offset:4px; }
.skip-link { position:fixed; top:8px; left:8px; padding:12px 16px; z-index:20; background:var(--o-gray-1000); color:var(--o-background-100); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.wl { max-width:100%; }
/* Original live-count presentation; the concept dialog explains the demonstration data. */
.wl-stats{display:flex;align-items:center;justify-content:center;gap:var(--o-space-12);margin-top:var(--o-space-8);font:var(--o-label-16);color:var(--o-gray-900);font-variant-numeric:tabular-nums;white-space:nowrap}
.wl-stats .live{display:inline-flex;align-items:center;gap:var(--o-space-8);color:var(--o-green-900);font-weight:500;margin-right:var(--o-space-4)}
.wl-stats .live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--o-green-700)}
.wl-stats .live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--o-green-700);animation:live 2s ease-out infinite}
@keyframes live{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}
.wl-stats .stat{display:inline-flex;align-items:baseline;gap:6px;transition:color 320ms cubic-bezier(0.22,1,0.36,1)}
.wl-stats .n{display:inline-grid;overflow:hidden;font-weight:500;color:var(--o-gray-900);transition:color 320ms cubic-bezier(0.22,1,0.36,1)}
.wl-stats .n>span{grid-area:1/1}
.wl[data-role="get"] .stat[data-k="get"],.wl[data-role="give"] .stat[data-k="give"]{color:var(--o-gray-1000)}
.wl[data-role="get"] .stat[data-k="get"] .n,.wl[data-role="give"] .stat[data-k="give"] .n{color:var(--o-gray-1000)}
.wl-stats .stat.bump .n{color:var(--o-green-900)}
/* The footer supplies the shared vector, without adding a new visible brand lockup. */
.logo-source { display:none; }
.story { height:calc(5460px + 100svh); }
.step-label { text-align:left; width:100%; }
.part { text-align:left; }
[data-tone="ink"] { --chrome:var(--o-phone-ink); }
[data-tone="paper"] { --chrome:var(--o-background-100); }
[data-tone="amazon"] { --chrome:var(--o-amazon-ink); }
.scr .sb { color:var(--chrome); }
.scr .home { background:var(--chrome); }
.faq-q { cursor:pointer; list-style:none; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q .ic { transition:transform var(--o-base); }
details[open] .faq-q .ic { transform:rotate(180deg); }
.foot .wrap { height:auto; min-height:96px; flex-wrap:wrap; padding-top:24px; padding-bottom:24px; }
.studio-brand { --logo-gap:var(--o-background-100); display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--o-gray-1000); }
.mf-mark { width:24px; height:24px; flex:none; }
.logo-gap-stroke { stroke:var(--logo-gap); }
.logo-gap-fill { fill:var(--logo-gap); }
dialog { margin:auto; width:min(620px,calc(100% - 40px)); max-height:calc(100svh - 40px); padding:44px; border:1px solid var(--o-gray-400); border-radius:var(--o-radius-medium); background:var(--o-background-100); color:var(--o-gray-1000); overflow:auto; overscroll-behavior:contain; }
dialog::backdrop { background:var(--o-dialog-backdrop); backdrop-filter:blur(8px); }
.dialog-close { position:absolute; right:12px; top:12px; width:44px; height:44px; border-radius:50%; font-size:28px; text-align:center; }
.dialog-close:hover { background:var(--o-gray-200); }
.dialog-brand { gap:12px; font-size:24px; font-weight:500; }
.dialog-brand .mf-mark { width:32px; height:32px; }
.dialog-brand:hover span { text-decoration:underline; text-underline-offset:4px; }
dialog h2 { margin-top:24px; font:var(--o-heading-36); letter-spacing:-.02em; }
dialog p { margin-top:20px; font:var(--o-copy-16); }
.dialog-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.doc-bar { position:relative; }
.doc { max-width:780px; padding-top:64px; padding-bottom:64px; }
.doc h1 { margin-bottom:24px; font:var(--o-heading-36); }
.doc h2 { margin-top:32px; margin-bottom:12px; font:var(--o-heading-24); }
.doc p,.doc ul { margin-top:16px; font:var(--o-copy-16); }
.doc ul { padding-left:24px; }
.doc a:not(.btn) { text-decoration:underline; text-underline-offset:3px; }
.doc .btn { margin-top:32px; }
.doc small { display:block; margin-top:32px; color:var(--o-gray-900); }
html:not(.enhanced) .story { height:auto; }
html:not(.enhanced) .stage { position:static; height:auto; }
html:not(.enhanced) .stage .wrap { display:block; }
html:not(.enhanced) .chap { width:auto; max-width:720px; margin:32px auto; opacity:1; visibility:visible; }
html:not(.enhanced) .chap .list>div p { display:block; }
html:not(.enhanced) .track,html:not(.enhanced) .pic,html:not(.enhanced) .parts { display:none; }
@media (max-width:1200px) and (min-width:901px) {
  .stage .wrap { grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr); gap:24px; }
  .chap .h36 { font:var(--o-heading-24); }
  .parts { grid-template-columns:1fr; }
  .part span { white-space:normal; }
  .pic { height:440px; }
  .pcard { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-height:760px) and (min-width:901px) {
  .chap,.chap .col { gap:16px; }
  .chap .h36 { font:var(--o-heading-24); }
  .chap .list>div { padding-top:12px; padding-bottom:12px; }
  .pic { height:min(480px,70svh); }
}
@media (max-width:900px) {
  .nav { display:none; }
  .hero { padding-top:128px; }
  .h60 { font-size:clamp(34px,7.2vw,54px); line-height:1.08; }
  .hero .lead { max-width:600px; }
  .hero-art { height:400px; }
  .stage .wrap { display:block; position:relative; }
  .chap { position:absolute; bottom:24px; left:24px; right:24px; width:auto; max-width:none; gap:16px; }
  .chap .h36 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .chap .col { gap:0; }
  .chap .list>div:not(.on) { display:none; }
  .chap .list>div { padding-top:12px; padding-bottom:12px; }
  .parts { margin-bottom:0; }
  .part span { white-space:normal; }
  .pic { display:none; }
  .pcard { grid-template-columns:1fr; padding:24px; gap:24px; }
  .pcard>.col { padding:8px 0; gap:32px; }
  .pcard>img { min-height:0; height:auto; aspect-ratio:3/2; }
  .sec { padding-top:72px; }
  .foot { margin-top:72px; }
  html:not(.enhanced) .chap { position:static; }
  html:not(.enhanced) .chap .h36 { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
  html:not(.enhanced) .chap .list>div { display:flex; }
}
@media (max-width:560px) {
  :root { --o-heading-36:500 30px/34px var(--o-sans); }
  .bar .wrap { gap:12px; }
  .bar .btn { min-height:44px; }
  .cta { width:100%; }
  .wl-row { flex-direction:column; gap:12px; }
  .wl-field { width:100%; flex-basis:auto!important; flex-shrink:0; }
  .wl-stats { flex-wrap:wrap; gap:8px 12px; font:var(--o-label-14); }
  .wl-stats .live { justify-content:center; flex-basis:100%; }
  .wl-stats>span[aria-hidden] { display:none; }
  .hero .lead { font:var(--o-copy-16); }
  .hero-art { height:320px; }
  .track { top:32px; }
  .card { padding:32px 20px; }
  .part { font:var(--o-label-12); font-weight:500; }
  .part b { flex:none; }
  .chap .list p { font:var(--o-label-14); }
  .foot .links { width:100%; margin:0; flex-wrap:wrap; gap:20px; }
  dialog { padding:56px 24px 28px; }
  .dialog-actions { flex-direction:column; align-items:stretch; }
}
@media (max-width:360px) {
  .wl-stats { flex-direction:column; gap:6px; }
  .wl-field { padding-left:12px; gap:4px; }
  .wl-field .v { font:var(--o-label-13); }
  .wl-field .btn { padding:0 12px; font:var(--o-label-13); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .finger,.ripple { display:none; }
}