/* ============================================================
   miya.life — marketing v7.
   Light-first modern product site: white canvas, friendly Inter
   type, soft shadows, pastel feature panels, gold primary.
   Dark mode via [data-theme=dark].
   ============================================================ */
:root{
  --bg:#FFFFFF; --soft:#F8F7F4; --soft2:#F3F1EC;
  --card:#FFFFFF; --line:rgba(16,28,51,.10); --line2:rgba(16,28,51,.06);
  --ink:#111C33; --dim:#525E74; --faint:#8A94A6;
  --gold:#B8873C; --gold2:#D9A860; --goldink:#8A5E20;
  --gbtn:linear-gradient(135deg,#DCAC61,#C08A45 60%,#A87834);
  --shadow:0 24px 70px rgba(24,34,62,.10);
  --shadow-sm:0 10px 30px rgba(24,34,62,.08);
  --tint-gold:#FBF3E4; --tint-mint:#EAF6F1; --tint-steel:#ECF3F9; --tint-rose:#FAEFF4; --tint-violet:#F2EFFA;
  --r:20px;
}
html[data-theme="dark"]{
  --bg:#080D17; --soft:#0C1220; --soft2:#0F1626;
  --card:#111A2C; --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.06);
  --ink:#F3F5F9; --dim:#9BA6BA; --faint:#66718A;
  --gold:#CE9C55; --gold2:#E4BD80; --goldink:#E4BD80;
  --shadow:0 30px 80px rgba(0,0,0,.5);
  --shadow-sm:0 12px 34px rgba(0,0,0,.4);
  --tint-gold:#191D22; --tint-mint:#0E1B1B; --tint-steel:#0E1826; --tint-rose:#1A1220; --tint-violet:#141327;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 background:var(--bg);color:var(--ink);font-size:16.5px;line-height:1.6;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
 transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.022em;color:var(--ink)}
h1{font-size:clamp(38px,5.6vw,64px)}
h2{font-size:clamp(28px,3.8vw,44px)}
h3{font-size:19px;font-weight:700;letter-spacing:-.012em}
.lede{font-size:clamp(17px,1.8vw,19.5px);color:var(--dim);line-height:1.6}
.lede b{color:var(--ink);font-weight:600}
.au{color:var(--goldink)}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--goldink);background:var(--tint-gold);border:1px solid rgba(184,135,60,.25);border-radius:100px;padding:7px 16px}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--gold);font-style:normal;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
section{padding:96px 0}
section.tight{padding:64px 0}
.center{text-align:center}
.sec-head{max-width:780px;margin:0 auto}
.sec-head h2{margin:16px 0 14px}
.center .lede{margin-left:auto;margin-right:auto;max-width:58ch}
.soft{background:var(--soft)}

/* reveal + stagger */
.rv{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv2{transition-delay:.08s}.rv3{transition-delay:.16s}.rv4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:15.5px;letter-spacing:-.01em;border:0;border-radius:14px;padding:13px 26px;cursor:pointer;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,background .18s;position:relative;overflow:hidden}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn.p{background:var(--gbtn);color:#fff;box-shadow:0 10px 26px rgba(184,135,60,.35)}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(184,135,60,.45)}
.btn.p::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .55s cubic-bezier(.22,1,.36,1)}
.btn.p:hover::after{left:135%}
.btn.g{background:rgba(16,28,51,.06);color:var(--ink)}
.btn.g:hover{background:rgba(16,28,51,.1);transform:translateY(-2px)}
html[data-theme="dark"] .btn.g{background:rgba(255,255,255,.09)}
html[data-theme="dark"] .btn.g:hover{background:rgba(255,255,255,.14)}
.btn.big{padding:16px 34px;font-size:17px;border-radius:16px}
.btn.sm{padding:9px 18px;font-size:14px;border-radius:12px}
.alink{color:var(--goldink);font-weight:700;font-size:16px}
.alink::after{content:" →";transition:margin .2s}
.alink:hover::after{margin-left:3px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.undercta{font-size:13.5px;color:var(--faint);margin-top:14px}/* nav */
nav{position:sticky;top:0;z-index:60;background:var(--bg);background:color-mix(in srgb,var(--bg) 96%,transparent);
  border-bottom:1px solid transparent;transition:border-color .25s}
nav.scrolled{border-bottom-color:var(--line2)}
nav .wrap{display:flex;align-items:center;gap:34px;height:64px}
.wordmark{font-weight:800;font-size:20px;letter-spacing:-.02em}
.wordmark b{color:var(--gold)}
nav .links{display:flex;gap:26px;align-items:center;margin-left:auto}
nav .links a{font-size:14.5px;font-weight:600;color:var(--dim);transition:color .15s}
nav .links a:hover,nav .links a.on{color:var(--ink)}
.thm{appearance:none;border:0;cursor:pointer;width:36px;height:36px;border-radius:12px;background:rgba(16,28,51,.06);color:var(--ink);font-size:15px;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
html[data-theme="dark"] .thm{background:rgba(255,255,255,.09)}
@media(hover:hover){.thm:hover{transform:rotate(12deg)}}
.thm .sun{display:none}.thm .moon{display:inline}
html[data-theme="dark"] .thm .sun{display:inline}
html[data-theme="dark"] .thm .moon{display:none}
.navtoggle{display:none;margin-left:auto;background:transparent;border:0;color:var(--ink);font-size:20px;cursor:pointer;padding:6px 10px}
@media(max-width:920px){
  nav .links{position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 16px;display:none;box-shadow:var(--shadow)}
  nav .links.open{display:flex}
  nav .links a{padding:11px 2px;width:100%;font-size:14px}
  nav .links .btn,nav .links .thm{margin-top:10px}
  .navtoggle{display:block}
}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff;padding:10px 18px;border-radius:0 0 12px 0;z-index:100;font-weight:700}
.skip:focus{left:0}.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:color-mix(in srgb,var(--bg) 92%,transparent);border-top:1px solid var(--line);padding:10px 18px calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;gap:12px;transform:translateY(110%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ctabar.show{transform:none}
.ctabar span{font-size:13px;color:var(--dim);flex:1;line-height:1.35}
.ctabar span b{color:var(--ink)}
@media(max-width:720px){.ctabar{display:flex}}

/* hero */
.hero{position:relative;padding:88px 0 40px;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg i{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.hero-bg .a{width:520px;height:520px;left:-140px;top:-160px;background:radial-gradient(circle,#F3DCB2,transparent 65%);animation:dr1 40s ease-in-out infinite alternate}
.hero-bg .b{width:560px;height:560px;right:-160px;top:-80px;background:radial-gradient(circle,#CFE3F2,transparent 65%);animation:dr2 52s ease-in-out infinite alternate}
.hero-bg .c{width:480px;height:480px;left:34%;bottom:-300px;background:radial-gradient(circle,#D9EFE5,transparent 65%);animation:dr3 46s ease-in-out infinite alternate}
html[data-theme="dark"] .hero-bg i{opacity:.22}
@keyframes dr1{to{transform:translate(60px,40px) scale(1.12)}}
@keyframes dr2{to{transform:translate(-70px,50px) scale(.94)}}
@keyframes dr3{to{transform:translate(40px,-60px) scale(1.1)}}
.hero .wrap{position:relative;max-width:880px}
.hero h1{margin:22px 0 18px}
.hero .lede{max-width:54ch;margin:0 auto}
.hero .cta-row{justify-content:center;margin-top:32px}
.hero-copy{animation:up .7s cubic-bezier(.22,1,.36,1) both}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* hero visual: framed mosaic of the real 40 */
.hv{position:relative;max-width:1000px;margin:64px auto 0;padding:0 24px;animation:up .8s .15s cubic-bezier(.22,1,.36,1) both}
.frame{background:var(--card);border:1px solid var(--line2);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;text-align:left}
.frame-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line2)}
.fdot{width:11px;height:11px;border-radius:50%}
.fdot:nth-child(1){background:#F2645A}.fdot:nth-child(2){background:#F5BF4F}.fdot:nth-child(3){background:#63C554}
.frame-bar .url{margin-left:12px;font-size:12.5px;font-weight:600;color:var(--faint)}
.frame-bar .url b{color:var(--gold)}
.mosaic{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;padding:20px}
@media(max-width:860px){.mosaic{grid-template-columns:repeat(5,1fr)}}
@media(max-width:560px){.mosaic{grid-template-columns:repeat(4,1fr);gap:7px;padding:14px}}
.mo{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px 11px;border-radius:14px;background:var(--soft);transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,box-shadow .25s}
.mo em{font-style:normal;font-size:21px;line-height:1;transition:transform .25s}
.mo span{font-size:10px;font-weight:600;color:var(--dim);text-align:center;line-height:1.2;letter-spacing:-.01em}
.mo:hover{transform:translateY(-3px);background:var(--tint-gold);box-shadow:var(--shadow-sm)}
.mo:hover em{transform:scale(1.2)}
.mo.lit{background:var(--tint-gold);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.mo.lit em{transform:scale(1.2)}
html[data-theme="dark"] .mo{background:rgba(255,255,255,.045)}
html[data-theme="dark"] .mo.lit,html[data-theme="dark"] .mo:hover{background:rgba(206,156,85,.14)}
/* floating capability chips around the frame */
.fc{position:absolute;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line2);border-radius:100px;box-shadow:var(--shadow-sm);padding:9px 16px;font-size:13px;font-weight:700;color:var(--ink);animation:floaty 6s ease-in-out infinite alternate}
.fc em{font-style:normal;font-size:15px}
.fc1{top:-16px;left:-6px;animation-delay:.4s}
.fc2{top:80px;right:-14px;animation-delay:1.3s}
.fc3{bottom:-14px;left:10%;animation-delay:.9s}
.fc4{bottom:60px;right:6%;animation-delay:2s}
@keyframes floaty{from{transform:translateY(-5px)}to{transform:translateY(6px)}}
@media(max-width:900px){.fc{display:none}}

/* counters + platforms */
.counters{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 56px;padding-top:64px}
.cnt{text-align:center}
.cnt b{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--goldink);line-height:1.05}
.cnt span{font-size:12.5px;font-weight:600;color:var(--faint);letter-spacing:.02em;text-transform:uppercase}
.platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:44px;font-size:13.5px;font-weight:600;color:var(--faint)}
.platforms span{display:inline-flex;gap:7px;align-items:center}
.platforms em{font-style:normal;font-size:15px}

/* slips cards */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:48px;text-align:left}
.cardx{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.cardx:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.cardx .tagw{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#C25E3A;background:#FBEDE6;border-radius:100px;padding:4px 12px}
html[data-theme="dark"] .cardx .tagw{background:rgba(194,94,58,.16)}
.cardx h3{margin:14px 0 8px}
.cardx p{font-size:14.5px;color:var(--dim)}
.cardx .fix{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);font-size:14px}
.cardx .fix b{color:var(--goldink)}

/* feature rows with pastel panels */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:64px 0}
.feat.rev .fpanel{order:-1}
@media(max-width:880px){.feat{grid-template-columns:1fr;gap:30px;padding:48px 0}.feat.rev .fpanel{order:0}}
.feat .k{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--goldink)}
.feat h2{margin:12px 0 14px}
.feat .lede{font-size:17px}
.flist{list-style:none;margin-top:22px;display:grid;gap:12px}
.flist li{padding-left:32px;position:relative;font-size:15.5px;color:var(--dim)}
.flist li b{color:var(--ink)}
.flist li::before{content:"✓";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:var(--tint-gold);color:var(--goldink);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fpanel{border-radius:26px;padding:40px 34px;min-height:340px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;overflow:hidden}
.fpanel::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-90px;top:-90px;background:rgba(255,255,255,.45);}
html[data-theme="dark"] .fpanel::after{background:rgba(255,255,255,.05)}
.fp-gold{background:var(--tint-gold)}.fp-mint{background:var(--tint-mint)}.fp-steel{background:var(--tint-steel)}.fp-rose{background:var(--tint-rose)}.fp-violet{background:var(--tint-violet)}
.fpanel>*{position:relative}
/* voice states visual */
.vstate{display:flex;flex-direction:column;gap:12px;align-items:center}
.vorb{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#EFCF9A,#C08A45 70%);box-shadow:0 18px 44px rgba(184,135,60,.45);display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;animation:orb 3.2s ease-in-out infinite}
@keyframes orb{0%,100%{transform:scale(1);box-shadow:0 18px 44px rgba(184,135,60,.45)}50%{transform:scale(1.06);box-shadow:0 22px 56px rgba(184,135,60,.6)}}
.vchips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.vchip{font-size:13px;font-weight:700;border-radius:100px;padding:8px 18px;background:var(--card);color:var(--faint);border:1px solid var(--line2);transition:.35s;box-shadow:var(--shadow-sm)}
.vchip.on{color:var(--goldink);background:var(--tint-gold);border-color:rgba(184,135,60,.4);transform:scale(1.06)}
.vwave{display:inline-flex;align-items:flex-end;gap:4px;height:22px;margin-top:2px}
.vwave i{width:4px;height:6px;border-radius:3px;background:rgba(184,135,60,.35);transition:.3s}
.vwave.go i{background:var(--gold);animation:wv .9s ease-in-out infinite}
.vwave.go i:nth-child(2){animation-delay:.1s}.vwave.go i:nth-child(3){animation-delay:.2s}
.vwave.go i:nth-child(4){animation-delay:.3s}.vwave.go i:nth-child(5){animation-delay:.4s}
@keyframes wv{0%,100%{height:6px}50%{height:20px}}
/* chip cloud (share groups) */
.chipcloud{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chipcloud span{font-size:13px;font-weight:700;background:var(--card);border:1px solid var(--line2);border-radius:100px;padding:8px 16px;color:var(--dim);box-shadow:var(--shadow-sm);transition:transform .2s}
.chipcloud span:hover{transform:translateY(-2px);color:var(--goldink)}
/* scenes & palettes visuals */
.scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.scene{height:58px;border-radius:14px;overflow:hidden;background:linear-gradient(140deg,var(--s1),var(--s2));background-size:200% 200%;animation:scenemove 8s ease-in-out infinite alternate;display:flex;align-items:flex-end;padding:7px 10px;box-shadow:var(--shadow-sm);transition:transform .2s}
.scene:hover{transform:scale(1.06)}
.scene span{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 5px rgba(0,0,0,.55)}
@keyframes scenemove{from{background-position:0 0}to{background-position:100% 100%}}
.pals{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pal{display:flex;width:54px;height:28px;border-radius:9px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s}
.pal:hover{transform:scale(1.12)}
.pal i{flex:1}
/* briefing sun rows — abstract, no invented content */
.sunrows{display:grid;gap:10px}
.sunrow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:13px 16px;box-shadow:var(--shadow-sm);font-size:14px;font-weight:600;color:var(--dim)}
.sunrow em{font-style:normal;font-size:16px}

/* explorer */
.xp-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:44px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line2);border-radius:100px;padding:4px;gap:2px;flex-wrap:wrap;justify-content:center;box-shadow:var(--shadow-sm)}
.seg button{appearance:none;border:0;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--dim);background:transparent;border-radius:100px;padding:9px 17px;cursor:pointer;transition:.2s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--gbtn);color:#fff;box-shadow:0 6px 16px rgba(184,135,60,.35)}
.xsearch{background:var(--card);border:1px solid var(--line2);border-radius:100px;padding:11px 20px;font-family:inherit;font-size:14px;color:var(--ink);min-width:210px;box-shadow:var(--shadow-sm)}
.xsearch::placeholder{color:var(--faint)}
.xsearch:focus{outline:none;border-color:rgba(184,135,60,.5)}
.xp{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:26px;margin-top:34px;align-items:start;text-align:left}
@media(max-width:900px){.xp{grid-template-columns:1fr}}
.xp-list{max-height:620px;overflow-y:auto;padding:6px;margin:-6px;scrollbar-width:thin}
.xp-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.xt{appearance:none;font-family:inherit;text-align:left;background:var(--card);border:1px solid var(--line2);border-radius:15px;padding:11px 12px;cursor:pointer;display:flex;align-items:center;gap:11px;box-shadow:var(--shadow-sm);transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .2s,background .2s,box-shadow .22s;color:var(--ink)}
.xt:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.xt.on{border-color:rgba(184,135,60,.55);background:var(--tint-gold)}
.xt .xi{width:36px;height:36px;flex:none;border-radius:11px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:17px}
html[data-theme="dark"] .xt .xi{background:rgba(255,255,255,.06)}
.xt.on .xi{background:rgba(184,135,60,.16)}
.xt .xn{display:block;font-size:10.5px;font-weight:700;color:var(--faint)}
.xt .xm{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.xt.on .xm{color:var(--goldink)}
.xp.rv.in .xt{animation:tin .5s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes tin{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.xp-side{position:sticky;top:84px}
@media(max-width:900px){.xp-side{position:relative;top:0;order:-1}.xp-list{max-height:330px}}
.xview{background:var(--card);border:1px solid var(--line2);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.xv-cover{position:relative;height:150px;background:linear-gradient(135deg,var(--g1),var(--g2));background-size:180% 180%;animation:scenemove 8s ease-in-out infinite alternate;display:flex;align-items:center;justify-content:center}
.xv-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 8%,rgba(255,255,255,.35),transparent 55%)}
.xv-cover .big{font-size:52px;position:relative;filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));animation:bob 5s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
.xv-num{position:absolute;left:20px;top:14px;font-size:12px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.9)}
.xv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 26px 0}
.xv-name{font-size:21px;font-weight:800;letter-spacing:-.02em}
.xv-g{font-size:12px;font-weight:800;color:var(--goldink);background:var(--tint-gold);border-radius:100px;padding:5px 13px}
.xv-desc{padding:12px 26px 6px;font-size:15.5px;color:var(--dim);line-height:1.65}
.xv-hl{display:flex;flex-wrap:wrap;gap:8px;padding:12px 26px 22px}
.xv-hl span{font-size:12.5px;font-weight:700;color:var(--goldink);background:var(--tint-gold);border:1px solid rgba(184,135,60,.22);border-radius:100px;padding:6px 14px}
.xv-foot{border-top:1px solid var(--line2);padding:14px 26px 17px;font-size:12.5px;color:var(--faint)}
.xview.swap .xv-cover,.xview.swap .xv-bar,.xview.swap .xv-desc,.xview.swap .xv-hl{animation:xin .45s cubic-bezier(.22,1,.36,1) both}
@keyframes xin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* platform grid */
.grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:48px;text-align:left}
.g6{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.g6:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.g6 .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:16px}
.g6 h3{margin-bottom:8px}
.g6 p{font-size:14.5px;color:var(--dim)}
.ic-gold{background:var(--tint-gold)}.ic-mint{background:var(--tint-mint)}.ic-steel{background:var(--tint-steel)}.ic-rose{background:var(--tint-rose)}.ic-violet{background:var(--tint-violet)}

/* pricing */
.billswitch{display:inline-flex;background:var(--card);border:1px solid var(--line2);border-radius:100px;padding:5px;gap:3px;box-shadow:var(--shadow-sm)}
.billswitch button{appearance:none;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--dim);background:transparent;border:0;border-radius:100px;padding:10px 22px;cursor:pointer;transition:.2s;display:inline-flex;gap:8px;align-items:center}
.billswitch button em{font-style:normal;font-size:11px;font-weight:800;color:var(--goldink)}
.billswitch button.on{background:var(--gbtn);color:#fff;box-shadow:0 6px 16px rgba(184,135,60,.35)}
.billswitch button.on em{color:#FFF3DC}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:44px;align-items:stretch;text-align:left}
.plan{background:var(--card);border:1px solid var(--line2);border-radius:24px;padding:34px 30px;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.plan.hi{border-color:rgba(184,135,60,.5);box-shadow:var(--shadow);background:linear-gradient(180deg,var(--tint-gold),var(--card) 55%)}
.plan .tag{position:absolute;top:-13px;left:30px;background:var(--gbtn);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:6px 14px;border-radius:100px;box-shadow:0 6px 16px rgba(184,135,60,.4)}
.plan h3{font-size:19px}
.plan .pr{font-size:50px;font-weight:800;letter-spacing:-.035em;margin:12px 0 4px;line-height:1}
.plan .pr small{font-size:15.5px;font-weight:600;color:var(--dim);letter-spacing:-.01em}
.plan .sub{font-size:14px;color:var(--dim);min-height:42px}
.plan ul{list-style:none;margin:22px 0 28px;display:grid;gap:11px}
.plan li{font-size:14.5px;padding-left:30px;position:relative;color:var(--dim)}
.plan li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--tint-gold);color:var(--goldink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.plan .btn{margin-top:auto}
.paystripe{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:20px 24px;margin:34px auto 0;font-size:14.5px;color:var(--dim);max-width:800px;line-height:1.6;box-shadow:var(--shadow-sm);text-align:left}
.paystripe b{color:var(--ink)}
.paystripe .lock{font-size:18px}

/* steps / faq / prose / dl */
.steps{counter-reset:s;margin-top:44px;display:grid;gap:16px;text-align:left}
.step{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow-sm)}
.step::before{content:counter(s);width:40px;height:40px;border-radius:13px;background:var(--tint-gold);color:var(--goldink);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.step h3{margin-bottom:6px}
.step p{font-size:15px;color:var(--dim)}
.step code,.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;background:rgba(16,28,51,.06);border-radius:7px;padding:2px 7px}
html[data-theme="dark"] .step code,html[data-theme="dark"] .prose code{background:rgba(255,255,255,.09)}
.faq{margin-top:36px;text-align:left;display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:19px 52px 19px 22px;font-weight:700;font-size:16.5px;letter-spacing:-.01em;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:14px;font-size:23px;font-weight:400;color:var(--gold);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 22px;font-size:15px;color:var(--dim);line-height:1.65}
.prose{text-align:left}
.prose h2{font-size:25px;margin:42px 0 12px}
.prose p,.prose li{font-size:15.5px;color:var(--dim);line-height:1.7}
.prose ul,.prose ol{margin:12px 0 12px 22px;display:grid;gap:8px}
.prose b{color:var(--ink)}
.note{background:var(--tint-gold);border:1px solid rgba(184,135,60,.3);border-radius:16px;padding:18px 22px;font-size:15px;margin:24px 0;line-height:1.6;text-align:left}
.pull{font-size:21px;line-height:1.5;font-weight:700;color:var(--ink)}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:48px;text-align:left}
.dl-card{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.dl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.dl-card.dl-you{border-color:rgba(184,135,60,.55);box-shadow:var(--shadow)}
/* ---- install page: the live line, and the phone hand-off ---- */
.jump{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:26px 0 4px}
.dl-live{max-width:820px;margin:0 auto 22px;padding:13px 18px;border-radius:14px;
  background:var(--card);border:1px solid var(--line2);color:var(--ink);
  font-size:14.5px;line-height:1.55;text-align:left}
.dl-live-steps{margin:8px 0 0;padding-left:20px;line-height:1.6}
.dl-live-steps li{margin:4px 0}
.dl-live-note{display:block;margin-top:8px;font-size:13px;color:var(--mut)}
.dl-live.ok{border-color:rgba(120,180,130,.42)}
.dl-live.warn{border-color:rgba(214,168,104,.5)}
.dl-live a{color:var(--goldink);text-decoration:underline}
.dl-grid > .dl-hand,.dl-grid > .dl-note{grid-column:1/-1}   /* span every column, whatever the count */
.dl-hand{display:flex;gap:26px;align-items:center;text-align:left;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
  padding:24px 26px;margin:26px auto 0;max-width:820px;box-shadow:var(--shadow-sm)}
.dl-qr{flex:0 0 132px;width:132px;height:132px;padding:12px;border-radius:14px;
  background:#fff;color:#0B1322;display:flex;align-items:center;justify-content:center}
.dl-qr .qr{width:100%;height:100%;display:block}
.dl-handtx h3{margin:0 0 8px;font-size:19px}
.dl-handtx p{margin:0 0 8px;font-size:14.5px;line-height:1.6;color:var(--mut)}
@media(max-width:640px){
  .dl-hand{flex-direction:column;text-align:center;gap:18px}
  .dl-handtx h3,.dl-handtx p{text-align:center}
}
.dl-badge{position:absolute;top:16px;right:18px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--goldink);opacity:0}
.dl-you .dl-badge{opacity:1}
.dl-os{font-size:30px;line-height:1}
.dl-card>p{font-size:14px;color:var(--dim)}
.dl-how{font-size:12px;color:var(--faint);border-top:1px solid var(--line2);padding-top:12px;margin-top:auto;width:100%}

/* page hero + subnav + cta band + footer */
.page-hero{padding:78px 0 56px;text-align:center;position:relative;overflow:hidden}
.page-hero h1{margin:18px 0 16px;font-size:clamp(34px,4.8vw,54px)}
.page-hero p{color:var(--dim);font-size:clamp(16.5px,1.8vw,19px);max-width:58ch;margin:0 auto;line-height:1.6}
.ctaband{margin:0 24px 96px}
.ctaband .in{max-width:1072px;margin:0 auto;background:linear-gradient(135deg,#151F38,#0B1220);border-radius:28px;padding:72px 32px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.ctaband .in::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;left:-160px;top:-260px;background:radial-gradient(circle,rgba(216,168,96,.35),transparent 65%);}
.ctaband .in::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;right:-140px;bottom:-260px;background:radial-gradient(circle,rgba(80,130,190,.3),transparent 65%);}
.ctaband h2{color:#fff;position:relative;font-size:clamp(30px,4.4vw,48px)}
.ctaband p{color:#B9C3D6;position:relative;max-width:50ch;margin:14px auto 0;font-size:17px}
.ctaband .cta-row{position:relative;justify-content:center;margin-top:32px}
.ctaband .undercta{color:#7E8AA2;position:relative}
footer{border-top:1px solid var(--line2);background:var(--soft)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding:56px 24px 40px}
.fbrand p{font-size:13.5px;color:var(--faint);margin:14px 0 22px;max-width:32ch;line-height:1.6}
.fcol{display:flex;flex-direction:column;gap:12px}
.fcol h4{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.fcol a{font-size:14px;color:var(--dim);font-weight:600}
.fcol a:hover{color:var(--ink)}
.fnote{font-size:12px;color:var(--faint);line-height:1.6;margin-top:4px}
.fbase{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;border-top:1px solid var(--line2);padding:22px 24px 28px;font-size:12.5px;color:var(--faint)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
#totop{position:fixed;right:20px;bottom:22px;z-index:54;width:46px;height:46px;border-radius:16px;border:1px solid var(--line2);background:var(--card);color:var(--gold);font-size:17px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s,transform .25s;box-shadow:var(--shadow-sm)}
#totop.show{opacity:1;pointer-events:auto;transform:none}
@media(max-width:720px){#totop{bottom:78px}}

/* ============================================================
   v8 — apple.com/mac anatomy: SF type, product rail,
   mega hero, "Get to know" card rail + modals, black finale
   ============================================================ */
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(32px,4.6vw,52px)}
.lede{letter-spacing:-.012em}
section{padding:110px 0}
.badge{background:transparent;border:0;padding:0;font-size:15px;font-weight:700;color:var(--goldink);letter-spacing:-.01em}
.badge i{display:none}

/* ---------- horizontal rails ---------- */
.railwrap{position:relative}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:6px max(24px,calc((100vw - 1180px)/2)) 26px;scroll-padding-left:max(24px,calc((100vw - 1180px)/2))}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:none}.rarr{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:color-mix(in srgb,var(--card) 88%,transparent);box-shadow:var(--shadow-sm);color:var(--ink);font-size:17px;display:flex;align-items:center;justify-content:center;transition:.2s;opacity:.95}
.rarr:hover{transform:translateY(-50%) scale(1.08)}
.rarr.l{left:14px}.rarr.r{right:14px}
.rarr[disabled]{opacity:0;pointer-events:none}
@media(max-width:720px){.rarr{display:none}}

/* systems strip (product family) */
.sysrail{border-bottom:1px solid var(--line2);background:var(--bg)}
.sysrail .rail{padding-top:18px;padding-bottom:18px;gap:8px}
.si{display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;padding:14px 6px 12px;border-radius:16px;cursor:pointer;background:transparent;border:0;font-family:inherit;transition:background .2s,transform .2s}
.si em{font-style:normal;font-size:27px;line-height:1;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.si span{font-size:11.5px;font-weight:600;color:var(--dim);text-align:center;line-height:1.25;letter-spacing:-.01em}
.si:hover{background:var(--soft)}
.si:hover em{transform:scale(1.22) translateY(-2px)}
html[data-theme="dark"] .si:hover{background:rgba(255,255,255,.05)}

/* ---------- mega hero ---------- */
.mega{padding:120px 0 96px;text-align:center;position:relative;overflow:hidden}
.mega .wrap{max-width:980px;position:relative}
.mega h1{font-size:clamp(38px,6.6vw,84px);line-height:1.05;letter-spacing:-.03em;margin:18px 0 22px}
.mega h1 .au{background:linear-gradient(96deg,#E2B267,#B8873C 55%,#8A5E20);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 8s ease-in-out infinite alternate}
@keyframes shine{from{background-position:0 0}to{background-position:100% 0}}
html[data-theme="dark"] .mega h1 .au{background:linear-gradient(96deg,#F0D5A4,#CE9C55 55%,#A87834);-webkit-background-clip:text;background-clip:text}
.mega .lede{font-size:clamp(18px,2.1vw,23px);max-width:44ch;margin:0 auto}
.mega .cta-row{justify-content:center;margin-top:34px}
.megastats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;margin-top:56px}
.megastats .cnt b{font-size:clamp(24px,2.8vw,34px)}

/* ---------- get to know rail ---------- */
.know{background:var(--soft);padding:100px 0 90px}
.know .khead{max-width:1180px;margin:0 auto 34px;padding:0 24px}
.know .khead h2{font-size:clamp(30px,4.2vw,48px)}
.kcard{position:relative;width:min(400px,86vw);min-height:500px;border-radius:28px;overflow:hidden;color:#fff;display:flex;flex-direction:column;padding:34px 30px;box-shadow:0 26px 70px rgba(10,16,34,.28);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.kcard:hover{transform:scale(1.015)}
.kcard .ke{font-size:13px;font-weight:700;letter-spacing:.02em;opacity:.75}
.kcard h3{font-size:clamp(26px,2.6vw,32px);font-weight:700;letter-spacing:-.022em;line-height:1.12;margin-top:8px;color:#fff;max-width:11ch}
/* Three lines of heading in every card, whatever the title's length, so the scene under it
   starts on the same line across a whole rail. Four-line titles still grow; nothing clips. */
.kcard h3{min-height:3.4em;display:flex;align-items:flex-end}
.kcard .kv{margin-top:auto;display:flex;flex-direction:column;gap:14px;align-items:flex-start}.kplus{position:absolute;right:20px;bottom:20px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.22);color:#fff;font-size:22px;font-weight:400;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.kplus:hover{transform:scale(1.12);background:rgba(255,255,255,.34)}
/* card themes */
.kc-voice{background:radial-gradient(130% 120% at 84% -10%,#E2B267 0%,#8A5E20 34%,#241A0C 72%,#120D06 100%)}
/* the cards that came with Files, the daily view, templates, Talk and quiet hours */
.kc-files{background:radial-gradient(130% 120% at 84% -10%,#9FB4CF 0%,#4C627E 34%,#1A2130 72%,#0D111A 100%)}
.kc-daily{background:radial-gradient(130% 120% at 84% -10%,#E4BD80 0%,#9A6E2E 34%,#241B0E 72%,#120E07 100%)}
.kc-tpl{background:radial-gradient(130% 120% at 84% -10%,#B9A0D8 0%,#5E4780 34%,#1E1830 72%,#0F0C18 100%)}
.kc-talk{background:radial-gradient(130% 120% at 84% -10%,#7FC7A8 0%,#2F6B52 34%,#132217 72%,#0A120C 100%)}
.kc-quiet{background:radial-gradient(130% 120% at 84% -10%,#8FA6C4 0%,#39506E 34%,#151C29 72%,#0A0E15 100%)}
.kc-nodeadend{background:radial-gradient(130% 120% at 84% -10%,#8FC7B4 0%,#2F6B5C 34%,#132220 72%,#0A1210 100%)}
.kc-undo{background:radial-gradient(130% 120% at 84% -10%,#D8A0A0 0%,#7E4747 34%,#2A1818 72%,#140C0C 100%)}


.kc-ai{background:radial-gradient(130% 120% at 80% -10%,#7FA6C8 0%,#2E5678 36%,#0D1B2A 76%,#080F18 100%)}
.kc-40{background:radial-gradient(130% 130% at 50% -20%,#2A3A5C 0%,#101A30 55%,#05080F 100%)}
.kc-family{background:radial-gradient(130% 120% at 82% -10%,#D98CB0 0%,#8A4666 38%,#231018 78%,#120810 100%)}
.kc-priv{background:radial-gradient(130% 120% at 80% -10%,#4FB58A 0%,#1F5C42 38%,#0A1C14 78%,#060F0A 100%)}
/* Language. A teal nobody else on the rail is using: every kc-* carries its own
   radial or the card renders white beside its neighbours. */
.kc-lang{background:radial-gradient(130% 120% at 84% -10%,#6FD0CE 0%,#1F6060 36%,#0A1E1E 76%,#061010 100%)}
/* THIS ROUND'S THREE. Each carries its own radial or the card renders white
   beside its neighbours, and each scene box has a real height because .sfx is
   position:relative with none of its own. Hues chosen off the rail's used set. */
.kc-nwall{background:radial-gradient(130% 120% at 84% -10%,#8E7CE0 0%,#3A2C78 36%,#150F2E 76%,#0A0718 100%)}
.kc-nwidg{background:radial-gradient(130% 120% at 82% -10%,#6FB0E8 0%,#1F4E7A 36%,#0A1B2C 76%,#060E17 100%)}
.kc-nsize{background:radial-gradient(130% 120% at 86% -10%,#E0A66F 0%,#7A4A1F 36%,#2C1A0A 76%,#170E06 100%)}

/* a clip looping behind the board: a frame, a moving sheen, a play mark */
/* THE HOUSE .sfx RULE IS height:112px;display:flex AND IT COMES LATER IN THIS
   FILE, so a scene written as a bare .nfx-* class loses both to it on equal
   specificity: the widget scene asked for display:grid, was handed flex, and
   rendered as nothing at all. Scoped through .kcard so these win. */
.kcard .nfx-nwall{position:relative;width:100%;height:96px;border-radius:12px;overflow:hidden;
  background:linear-gradient(120deg,rgba(142,124,224,.34),rgba(20,14,44,.55));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kcard .nfx-nwall .swp{position:absolute;top:-30%;bottom:-30%;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  animation:nwPlay 3.6s ease-in-out infinite}
.kcard .nfx-nwall .pl{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%);
  border-left:13px solid rgba(255,255,255,.86);border-top:9px solid transparent;border-bottom:9px solid transparent}
@keyframes nwPlay{0%{left:-40%}100%{left:104%}}

/* widgets: tiles that fill with real lines */
.kcard .nfx-nwidg{display:grid;grid-template-columns:2fr 1fr;gap:8px;width:100%;height:96px;align-items:stretch}
.kcard .nfx-nwidg span{border-radius:10px;background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);position:relative;overflow:hidden}
.kcard .nfx-nwidg i{position:absolute;left:9px;height:4px;border-radius:3px;background:rgba(255,255,255,.62);
  animation:nwGrid 4.2s ease-in-out infinite;animation-delay:var(--d,0ms)}
.kcard .nfx-nwidg .r1{top:14px;width:44%}.nfx-nwidg .r2{top:26px;width:62%}.nfx-nwidg .r3{top:38px;width:52%}
@keyframes nwGrid{0%,100%{opacity:.25;transform:translateX(-4px)}45%{opacity:1;transform:none}}

/* the size stepper: the same board drawn at three sizes */
.kcard .nfx-nsize{display:flex;align-items:flex-end;justify-content:center;gap:14px;width:100%;height:96px;padding-bottom:12px}
.kcard .nfx-nsize span{display:grid;gap:3px;align-content:end}
.kcard .nfx-nsize i{border-radius:3px;background:rgba(255,255,255,.55);animation:nzStep 4.8s ease-in-out infinite;
  animation-delay:var(--d,0ms)}
.kcard .nfx-nsize .a{grid-template-columns:repeat(4,9px)}.kcard .nfx-nsize .a i{height:9px}
.kcard .nfx-nsize .b{grid-template-columns:repeat(3,15px)}.kcard .nfx-nsize .b i{height:15px}
.kcard .nfx-nsize .c{grid-template-columns:repeat(2,23px)}.kcard .nfx-nsize .c i{height:23px}
@keyframes nzStep{0%,100%{opacity:.32}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .kcard .nfx-nwall .swp,.kcard .nfx-nwidg i,.kcard .nfx-nsize i{animation:none}
  .kcard .nfx-nwidg i,.kcard .nfx-nsize i{opacity:.8}}
.sfx-lang{width:100%;height:74px;display:flex;align-items:center;justify-content:center;pointer-events:none;
  border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
/* the greetings sit ON the scene box, which is why the box needs a real height:
   .sfx is position:relative with none of its own, so an absolutely positioned
   CONTAINER collapses to nothing and the card renders with an empty hole */
.sfx-lang i{position:absolute;font-style:normal;font-weight:600;font-size:19px;color:rgba(255,255,255,.94);
  opacity:0;animation:lgIn 8s ease-in-out infinite;animation-delay:var(--d,0ms);white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.45)}
@keyframes lgIn{0%,100%{opacity:0;transform:translateY(6px) scale(.96)}
  6%{opacity:.95;transform:none}18%{opacity:.95;transform:none}26%{opacity:0;transform:translateY(-6px) scale(.98)}}
@media(prefers-reduced-motion:reduce){
  .sfx-lang i{animation:none;opacity:0}
  .sfx-lang i:last-child{opacity:1}}
.lgrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.lgrow span{font-size:11px;letter-spacing:.02em;padding:2px 8px;border-radius:99px;
  border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.82)}
.kc-yours{background:radial-gradient(130% 120% at 82% -10%,#9B8CD9 0%,#4E3F82 38%,#161028 78%,#0B0816 100%)}
.kc-any{background:radial-gradient(130% 120% at 80% -10%,#C98A6A 0%,#7A4630 40%,#1E100A 78%,#100805 100%)}
.kc-cap{background:radial-gradient(130% 120% at 80% -10%,#9C8AC8 0%,#4E3E78 38%,#150F2A 76%,#0B0818 100%)}
/* in-card visuals */
.kmini{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%}.kmini em{font-style:normal;font-size:20px;background:rgba(255,255,255,.1);border-radius:11px;height:44px;display:flex;align-items:center;justify-content:center;}
.kchips{display:flex;flex-wrap:wrap;gap:8px}.kchips span{font-size:12.5px;font-weight:700;background:rgba(255,255,255,.16);border-radius:100px;padding:7px 14px;}
.kscenes{display:flex;gap:8px;width:100%}
.kscenes .scene{flex:1;height:64px;box-shadow:none}.krow{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border-radius:12px;padding:10px 14px;font-size:13.5px;font-weight:600;width:100%}
.krow em{font-style:normal}
.kcard .vorb{width:78px;height:78px;font-size:29px}
.kcard .vchips{justify-content:flex-start}
.kcard .vchip{background:rgba(255,255,255,.14);border:0;color:rgba(255,255,255,.75);box-shadow:none}
.kcard .vchip.on{background:rgba(255,255,255,.92);color:#5C3F12}
.kcard .vwave i{background:rgba(255,255,255,.35)}
.kcard .vwave.go i{background:#F3D9A8}
.kplats{display:flex;flex-wrap:wrap;gap:9px}.kplats span{font-size:13px;font-weight:700;background:rgba(255,255,255,.16);border-radius:12px;padding:9px 14px;display:inline-flex;gap:7px;align-items:center;}
.kplats em{font-style:normal}
.klock{font-size:44px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}

/* ---------- modal ---------- */
.kmodal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:22px}
.kmodal.open{display:flex}
.kmodal .kback{position:absolute;inset:0;background:rgba(8,10,16,.62);animation:fadein .25s both}
.kmodal .kbox{position:relative;background:var(--card);border-radius:26px;max-width:620px;width:100%;max-height:86vh;overflow-y:auto;padding:38px 36px 34px;box-shadow:0 40px 120px rgba(0,0,0,.4);animation:popin .35s cubic-bezier(.22,1,.36,1) both}
@keyframes fadein{from{opacity:0}}
@keyframes popin{from{opacity:0;transform:translateY(22px) scale(.97)}}
.kbox .ke{font-size:13.5px;font-weight:700;color:var(--goldink)}
.kbox h3{font-size:27px;letter-spacing:-.02em;margin:6px 0 16px}
.kbox .flist{margin-top:6px}
.kclose{position:absolute;right:18px;top:18px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:rgba(16,28,51,.07);color:var(--ink);font-size:17px;display:flex;align-items:center;justify-content:center;transition:.2s}
html[data-theme="dark"] .kclose{background:rgba(255,255,255,.1)}
.kclose:hover{transform:scale(1.1)}
body.kopen{overflow:hidden}

/* why-us mini cards */
.whys{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:44px;text-align:left}
.why{background:var(--card);border:1px solid var(--line2);border-radius:20px;padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.why:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.why em{font-style:normal;font-size:25px;display:block;margin-bottom:12px}
.why h3{font-size:16.5px;margin-bottom:6px}
.why p{font-size:13.5px;color:var(--dim)}

/* black finale (index) */
.blackout{background:#0B0F18;padding:130px 24px;text-align:center;position:relative;overflow:hidden}
.blackout::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;left:50%;top:-380px;transform:translateX(-50%);background:radial-gradient(circle,rgba(216,168,96,.3),transparent 65%);}
.blackout h2{color:#fff;font-size:clamp(40px,6.6vw,84px);letter-spacing:-.03em;position:relative}
.blackout p{color:#9AA5BC;font-size:19px;max-width:46ch;margin:18px auto 0;position:relative}
.blackout .cta-row{justify-content:center;margin-top:36px;position:relative}
.blackout .undercta{color:#6C7890;position:relative}

/* ============================================================
   v9 — apple.com/apps language for the systems sections:
   gradient app icons, floating icon collage, grouped app wall
   ============================================================ */
.appic{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
 border-radius:24%;background:linear-gradient(var(--a,140deg),var(--c1,#C89A5C),var(--c2,#E4BD80));
 box-shadow:0 10px 24px rgba(16,24,48,.22),inset 0 1px 1px rgba(255,255,255,.5),inset 0 -6px 14px rgba(0,0,0,.14)}
html[data-theme="dark"] .appic{box-shadow:0 12px 28px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.35),inset 0 -6px 14px rgba(0,0,0,.22)}
.appic em{font-style:normal;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}
.appic.a28{width:28px;height:28px}.appic.a28 em{font-size:15px}
.appic.a40{width:40px;height:40px}.appic.a40 em{font-size:20px}
.appic.a48{width:48px;height:48px}.appic.a48 em{font-size:24px}
.appic.a56{width:56px;height:56px}.appic.a56 em{font-size:28px}
.appic.a64{width:64px;height:64px}.appic.a64 em{font-size:32px}
.appic.a76{width:76px;height:76px}.appic.a76 em{font-size:38px}
.appic.ring{outline:3px solid rgba(255,255,255,.55);outline-offset:0}

/* system strip → app dock */
.si{width:104px;gap:9px;padding:14px 6px 12px}
.si .appic{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.si:hover{background:transparent}
.si:hover .appic{transform:scale(1.16) translateY(-4px)}
.si em{font-size:inherit}

/* explorer tiles as apps */
.xt .xi{background:transparent!important;width:auto;height:auto;border-radius:0}
.xt.on .appic{outline:2.5px solid var(--gold);outline-offset:2px}

/* detail cover icon */
.xv-cover .big{font-size:inherit;animation:none}
.xv-cover .appic{animation:bob 5s ease-in-out infinite alternate}

/* floating icon collage */
.cloud{position:relative;height:170px;max-width:1080px;margin:0 auto 10px;pointer-events:none}
.cloud .appic{position:absolute;animation:cfloat var(--t,6s) ease-in-out var(--dl,0s) infinite alternate;opacity:0;animation-fill-mode:both}
.rv.in .cloud .appic,.cloud.now .appic{opacity:1;transition:opacity .8s ease var(--dl,0s)}
@keyframes cfloat{from{transform:translateY(-7px) rotate(-2deg)}to{transform:translateY(8px) rotate(2.5deg)}}
@media(max-width:760px){.cloud{height:120px}.cloud .hidem{display:none}}

/* grouped app wall (apple.com/apps explore grid) */
.wallsec{margin-top:70px;text-align:left}
.wallsec .gh{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:54px 0 8px}
.wallsec .gh h3{font-size:23px;letter-spacing:-.018em}
.wallsec .gh em{font-style:normal;font-size:14px;color:var(--faint);font-weight:600}
.wallsec .gh:first-child{margin-top:0}
.appwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:16px}
.aw{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;font-family:inherit;text-align:left;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}
.aw:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.aw:hover .appic{transform:scale(1.06)}
.aw .appic{transition:transform .22s}
.aw b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.aw p{font-size:12.5px;color:var(--dim);line-height:1.45;margin-top:3px}

/* ============================================================
   v10 — apple.com/apps card rails replace the master-detail
   ============================================================ */
.grail{margin-top:46px;text-align:left}
.grail .gh{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:0 24px}
.grail .gh h3{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.02em}
.grail .gh em{font-style:normal;font-size:14px;color:var(--faint);font-weight:600}
.grail .railwrap{margin-top:14px}
.acard{position:relative;width:280px;min-height:340px;height:auto;border-radius:26px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow-sm);padding:26px 24px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:0;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.acard::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;background:radial-gradient(120% 130% at 50% -30%,color-mix(in srgb,var(--c1) 34%,transparent),transparent 72%);pointer-events:none}
html[data-theme="dark"] .acard::before{background:radial-gradient(120% 130% at 50% -30%,color-mix(in srgb,var(--c1) 26%,transparent),transparent 72%)}
.acard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.acard>*{position:relative}
.acard .appic{margin-bottom:18px}
.acard b{font-size:19px;font-weight:800;letter-spacing:-.018em;line-height:1.2}
.acard .gsm{font-size:11.5px;font-weight:700;color:var(--faint);letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.acard p{font-size:13.5px;color:var(--dim);line-height:1.55;margin-top:10px}
.acard .achips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
.acard .achips span{font-size:11.5px;font-weight:700;color:var(--goldink);background:var(--tint-gold);border-radius:100px;padding:5px 11px}
html[data-theme="dark"] .acard .achips span{background:rgba(206,156,85,.14)}
.aplus{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:rgba(16,28,51,.07);color:var(--ink);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;z-index:2}
html[data-theme="dark"] .aplus{background:rgba(255,255,255,.1)}
.aplus:hover{transform:scale(1.14);background:rgba(184,135,60,.2)}
.acard.flash{animation:aflash 1.6s ease}
@keyframes aflash{0%,60%{box-shadow:0 0 0 3px var(--gold),var(--shadow)}100%{box-shadow:var(--shadow-sm)}}
/* dynamic system modal */
#sysmodal .kbox{text-align:left}
#sysmodal .smhead{display:flex;align-items:center;gap:16px;margin-bottom:6px}
#sysmodal .smhead .xv-g{flex:none}
#sysmodal h3{margin:0}
#sysmodal .smd{font-size:15.5px;color:var(--dim);line-height:1.65;margin:12px 0 6px}

/* ============================================================
   v11 — svg icon polish, artwork layers, apple-grade refinements
   ============================================================ */
.appic{color:#fff}
.appic em{display:none}
.appic svg{width:54%;height:54%;filter:drop-shadow(0 1.5px 3px rgba(0,0,0,.3))}
.vorb svg{width:40px;height:40px}
.klock{color:#fff}
.klock svg{width:46px;height:46px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
/* artwork layers */
.heroart{position:absolute;inset:0;background:url('art-hero.jpg') center/cover no-repeat;opacity:.9;pointer-events:none;
 -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
html[data-theme="dark"] .heroart{opacity:.10}
.mega{background:transparent}
.bandart{position:absolute;inset:0;background:url('art-band.jpg') center/cover no-repeat;opacity:.55;pointer-events:none}
.blackout{overflow:hidden}
.blackout>*{position:relative}
/* refinement pass */
.mega h1{font-weight:800}
.acard{width:300px;border-radius:28px}
.acard .appic{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.acard:hover .appic{transform:scale(1.07) rotate(-2deg)}
.grail+.grail{margin-top:64px}
.si span{color:var(--ink);opacity:.75;font-weight:600}
.kcard{box-shadow:0 30px 80px rgba(10,16,34,.32)}
.kmini{grid-template-columns:repeat(5,1fr);gap:10px}
.kmini .appic{width:100%;height:auto;aspect-ratio:1;border-radius:22%}
.know .rail{padding-bottom:34px}
.why em{font-size:22px}
.faq summary{font-weight:700}
nav .wrap{height:60px}

/* ============================================================
   v12 — ribbon background animation (echoes the app's living
   wallpapers), aligned chips, AI-inside marks, more motion
   ============================================================ */
/* flowing ribbons behind everything */
.ribbons{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ribbons i{position:absolute;left:-20%;width:140%;height:32vh;border-radius:50%;opacity:.5;will-change:transform}
.ribbons .r1{top:4%;background:linear-gradient(90deg,transparent,#F1D8AC 30%,#EAC489 55%,transparent 85%);transform:rotate(-7deg);animation:rib1 44s ease-in-out infinite alternate}
.ribbons .r2{top:38%;background:linear-gradient(90deg,transparent 8%,#CFE3F2 38%,#BBD6EC 62%,transparent 90%);transform:rotate(5deg);animation:rib2 56s ease-in-out infinite alternate}
.ribbons .r3{top:70%;background:linear-gradient(90deg,transparent 5%,#D9EFE5 35%,#C3E6D6 60%,transparent 88%);transform:rotate(-4deg);animation:rib3 50s ease-in-out infinite alternate}
@keyframes rib1{to{transform:rotate(-3deg) translate(4%,3vh) scaleY(1.15)}}
@keyframes rib2{to{transform:rotate(8deg) translate(-5%,-4vh) scaleY(.9)}}
@keyframes rib3{to{transform:rotate(-8deg) translate(5%,-3vh) scaleY(1.12)}}
html[data-theme="dark"] .ribbons i{opacity:.14}
html[data-theme="dark"] .ribbons .r1{background:linear-gradient(90deg,transparent,#8A5E20 30%,#C89A5C 55%,transparent 85%)}
html[data-theme="dark"] .ribbons .r2{background:linear-gradient(90deg,transparent 8%,#1E3A5C 38%,#2E5678 62%,transparent 90%)}
html[data-theme="dark"] .ribbons .r3{background:linear-gradient(90deg,transparent 5%,#1F5C42 35%,#2E7D64 60%,transparent 88%)}
/* let the page sections breathe over the ribbons */
body{background:transparent}
html{background:var(--bg)}
section,.know,.sysrail,footer,nav,.ctabar{background-color:color-mix(in srgb,var(--bg) 72%,transparent)}
section.soft,.know{background-color:color-mix(in srgb,var(--soft) 82%,transparent)}
nav{background:color-mix(in srgb,var(--bg) 80%,transparent)}
footer{background:color-mix(in srgb,var(--soft) 90%,transparent)}

/* aligned capability chips — always stacked, always identical */
.acard{min-height:372px}
.acard .achips{flex-direction:column;align-items:flex-start;gap:7px;margin-top:auto;padding-top:16px}
.acard .achips span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.acard .achips .aich{color:#fff;background:linear-gradient(135deg,#DCAC61,#B0833F);box-shadow:0 4px 12px rgba(184,135,60,.35)}
html[data-theme="dark"] .acard .achips .aich{background:linear-gradient(135deg,#CE9C55,#8A5E20)}

/* staggered card entrances per rail */
.grail.rv.in .acard{animation:cardin .6s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes cardin{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

/* Sixty-five icons drift in the hero. Once it is off screen they are paying for movement
   nobody can see, so they hold still until it comes back. */
body.past-hero .cloud .appic{animation-play-state:paused}

/* Know cards: the ambient pan runs on the card you are pointing at, not on all fifty at
   once. Background-position cannot be composited, so fifty of them repaint continuously
   and a phone gives up halfway down the page. */
@media(hover:hover){ .kcard:hover{animation:kpan 14s ease-in-out infinite alternate} }
.kcard{background-size:160% 160%;}
@keyframes kpan{from{background-position:0% 0%}to{background-position:100% 60%}}
.kcard:hover{box-shadow:0 36px 90px rgba(10,16,34,.4)}

/* modal AI callout */
.smai{display:flex;gap:12px;align-items:flex-start;background:var(--tint-gold);border:1px solid rgba(184,135,60,.3);border-radius:14px;padding:14px 16px;margin:4px 0 14px}
html[data-theme="dark"] .smai{background:rgba(206,156,85,.1)}
.smai span{font-size:17px;line-height:1.2}
.smai p{font-size:13.5px;color:var(--dim);line-height:1.55;margin:0}
.smai p,.smai{text-align:left}

/* blackout aurora sweep */
.blackout::after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(216,168,96,.12) 80deg,transparent 160deg,rgba(80,130,190,.1) 240deg,transparent 320deg);animation:sweep 26s linear infinite;pointer-events:none}
@keyframes sweep{to{transform:rotate(360deg)}}

/* hero headline entrance letters-ish: soft rise cascade */
.mega .badge{animation:up .6s .05s cubic-bezier(.22,1,.36,1) both}
.mega h1{animation:up .7s .12s cubic-bezier(.22,1,.36,1) both}
.mega .lede{animation:up .7s .22s cubic-bezier(.22,1,.36,1) both}
.mega .cta-row{animation:up .7s .32s cubic-bezier(.22,1,.36,1) both}
.mega .megastats{animation:up .8s .45s cubic-bezier(.22,1,.36,1) both}

/* ============================================================
   v13 — intelligence section, faithful shell, marquee,
   duotone glyphs, progress bar, more motion
   ============================================================ */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;background:linear-gradient(90deg,#E2B267,#B8873C);border-radius:0 3px 3px 0;box-shadow:0 0 12px rgba(216,168,96,.55)}
.appic svg .halo{stroke:rgba(255,255,255,.30);stroke-width:4.6}
.vorb svg .halo,.klock svg .halo,.sh-mic svg .halo{stroke:rgba(255,255,255,.30);stroke-width:4.6}
.sec-head .badge{display:table}
.center .sec-head .badge,.aisec .sec-head .badge{margin-left:auto;margin-right:auto}
.sec-head h2{position:relative;display:inline-block}
.sec-head h2::after{content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%) scaleX(0);width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,#E2B267,#B8873C);transition:transform .7s .25s cubic-bezier(.22,1,.36,1)}
.sec-head.rv.in h2::after{transform:translateX(-50%) scaleX(1)}

/* marquee */
.mq{overflow:hidden;border-block:1px solid var(--line2);padding:13px 0;background:color-mix(in srgb,var(--bg) 72%,transparent)}
.mq-in{display:flex;width:max-content;animation:mqmove 60s linear infinite}
.mq-in>span{display:flex;gap:26px;padding-right:26px}
.mq:hover .mq-in{animation-play-state:paused}
.mqi{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--dim);white-space:nowrap}
@keyframes mqmove{to{transform:translateX(-50%)}}

/* faithful shell */
.hv{max-width:820px;margin:64px auto 0;perspective:1200px}
.shell{background:var(--card);border:1px solid var(--line2);border-radius:22px;box-shadow:0 40px 100px rgba(16,24,48,.22);overflow:hidden;text-align:left;animation:shellfloat 9s ease-in-out infinite;transition:box-shadow .5s ease}
@keyframes shellfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){.shell{animation:none}}
.hv:hover .shell{box-shadow:0 48px 120px rgba(16,24,48,.32)}
html[data-theme="dark"] .shell{box-shadow:0 40px 100px rgba(0,0,0,.55)}
.sh-body{display:grid;grid-template-columns:172px 1fr;min-height:330px}
.sh-side{border-right:1px solid var(--line2);padding:14px 10px;display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--soft) 70%,transparent)}
.sh-side .mi{font-size:12.5px;font-weight:600;color:var(--dim);padding:7px 12px;border-radius:9px}
.sh-side .mi.act{background:var(--tint-gold);color:var(--goldink);font-weight:700}
.sh-main{padding:16px;display:flex;flex-direction:column;gap:12px}
.sh-panel{border:1px solid var(--line2);border-radius:14px;padding:13px 15px;background:var(--card)}
.sh-panel h4{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sh-panel .live{font-size:10px;font-weight:800;color:var(--goldink);background:var(--tint-gold);border-radius:100px;padding:2px 8px;letter-spacing:.04em}
.sh-ask{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.sh-ask .ph{font-size:12.5px;color:var(--faint);flex:1;display:flex;align-items:center}
.caret{display:inline-block;width:1.5px;height:14px;background:var(--goldink);margin-left:3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sh-mic{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#DCAC61,#B0833F);color:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.sh-mic svg{width:15px;height:15px}
.sh-mic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(216,168,96,.5);animation:pulse 2.2s ease-out infinite}
.dotp{width:7px;height:7px;border-radius:50%;background:#D96C6C;animation:pulse2 1.8s ease-in-out infinite}
@keyframes pulse2{50%{opacity:.35;transform:scale(.8)}}
.sh-bars{display:flex;flex-direction:column;gap:7px}
.sh-bars i{height:9px;border-radius:5px;background:color-mix(in srgb,var(--dim) 18%,transparent)}
.sh-bars.sm i{height:7px}
.sh-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.sh-blocks{display:flex;gap:7px}
.sh-blocks i{flex:1;height:34px;border-radius:8px;background:var(--tint-gold)}
.sh-blocks i:nth-child(2){background:color-mix(in srgb,#7FA6C8 22%,transparent)}
.sh-blocks i:nth-child(3){background:color-mix(in srgb,#7FC9B2 22%,transparent)}
.sh-dock{display:flex;gap:10px;justify-content:center;padding:12px;border-top:1px solid var(--line2);background:color-mix(in srgb,var(--soft) 70%,transparent)}
.shcap{font-size:13px;color:var(--faint);text-align:center;margin-top:16px}
@media(max-width:680px){.sh-body{grid-template-columns:1fr}.sh-side{display:none}}

/* intelligence section */
.aisec{position:relative;overflow:hidden;background:color-mix(in srgb,var(--soft) 82%,transparent)}
.aisec .au{background:linear-gradient(96deg,#E2B267,#B8873C 55%,#8A5E20);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .aisec .au{background:linear-gradient(96deg,#F0D5A4,#CE9C55 55%,#A87834);-webkit-background-clip:text;background-clip:text}
.spark i{position:absolute;width:5px;height:5px;border-radius:50%;background:#DCAC61;opacity:.5;animation:sparkf var(--t,9s) ease-in-out var(--dl,0s) infinite}
.spark i:nth-child(1){left:6%;top:18%;--t:8s}.spark i:nth-child(2){left:14%;top:70%;--t:11s;--dl:1s}
.spark i:nth-child(3){left:28%;top:34%;--t:9s;--dl:2s}.spark i:nth-child(4){left:46%;top:12%;--t:12s;--dl:.5s}
.spark i:nth-child(5){left:62%;top:76%;--t:10s;--dl:1.6s}.spark i:nth-child(6){left:76%;top:26%;--t:8.5s;--dl:.8s}
.spark i:nth-child(7){left:88%;top:58%;--t:11.5s;--dl:2.4s}.spark i:nth-child(8){left:95%;top:14%;--t:9.5s;--dl:1.2s}
@keyframes sparkf{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-26px) scale(1.5);opacity:.9}}
.aigrid2{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;max-width:1040px;margin:40px auto 0}
@media(max-width:860px){.aigrid2{grid-template-columns:1fr}}
.drawer{background:var(--card);border:1px solid var(--line2);border-radius:22px;box-shadow:var(--shadow);padding:24px;text-align:left;max-width:430px;margin:0 auto}
.dw-head{display:flex;gap:13px;align-items:center;margin-bottom:16px}
.dw-sp{font-size:22px;animation:bob 3.4s ease-in-out infinite alternate}
.dw-head b{font-size:16.5px;display:block}
.dw-head span{font-size:12px;color:var(--faint)}
.dw-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.dw-b{font-size:12.5px;font-weight:700;border-radius:100px;padding:8px 14px;border:1px solid var(--line);color:var(--dim)}
.dw-b.pri{background:linear-gradient(135deg,#DCAC61,#B0833F);color:#fff;border:0;box-shadow:0 6px 16px rgba(184,135,60,.35)}
.dw-ask{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-size:13px;color:var(--faint)}
.dw-ask b{color:var(--goldink)}
.dw-save{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:7px 13px}
.dw-cap{font-size:11.5px;color:var(--faint);margin-top:16px}
.aistats{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 54px;margin:54px 0 10px}
.wiredwall{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:26px auto 0}
.ww{position:relative;display:inline-flex}
.ww i{position:absolute;right:-5px;top:-6px;font-style:normal;font-size:11px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.ww.off{opacity:1}
.ww:hover{transform:translateY(-3px) scale(1.12);transition:transform .2s;z-index:2}

/* ============================================================
   v14 — crisp icons (halo off, no blur filters), key caps
   ============================================================ */
.appic svg{width:56%;height:56%;filter:none;shape-rendering:geometricPrecision}
.appic svg .halo{display:none}
.appic svg g{stroke:#fff}
.appic{box-shadow:0 8px 20px rgba(16,24,48,.2),inset 0 1px 1px rgba(255,255,255,.55),inset 0 -5px 12px rgba(0,0,0,.16)}
.appic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 46%);pointer-events:none}
.vorb svg .halo,.klock svg .halo,.sh-mic svg .halo{display:none}
.vorb svg,.klock svg,.sh-mic svg{filter:none}
.ww i{font-size:12px}
.kbds{display:inline-flex;gap:6px;align-items:center}
.kbds kbd{font-family:inherit;font-weight:800;font-size:15px;line-height:1;padding:8px 11px;border-radius:9px;background:var(--card);border:1px solid var(--line);box-shadow:0 2px 0 var(--line2);color:var(--ink)}

/* ============================================================
   v15 — mobile hardening: spacing, tap targets, perf, fit
   ============================================================ */
html,body{overflow-x:clip}
.navtoggle{width:42px;height:42px;font-size:19px;display:none;align-items:center;justify-content:center;background:transparent;border:0;color:var(--ink);cursor:pointer;border-radius:12px}
@media(max-width:920px){.navtoggle{display:inline-flex}}
.thm{width:40px;height:40px}
.aplus{width:38px;height:38px;font-size:20px}
.fbase{display:flex;flex-wrap:wrap;gap:6px 18px}

@media(max-width:760px){
  section{padding:70px 0}
  .mega{padding:82px 0 60px}
  .know{padding:60px 0 52px}
  .blackout{padding:88px 20px}
  .ribbons i{opacity:.36}
  html[data-theme="dark"] .ribbons i{opacity:.1}
  .grail+.grail{margin-top:44px}
  .hv{margin-top:44px}
  .megastats{gap:10px 26px;margin-top:40px}
  .aistats{gap:14px 34px;margin:40px 0 8px}
  .whys{gap:12px}
}
@media(max-width:520px){
  .kbox{padding:28px 20px 24px;border-radius:22px}
  .kclose{right:12px;top:12px}
  .drawer{padding:20px 16px}
  .kcard{min-height:460px;padding:28px 24px}
  .si{width:86px}
  .si span{font-size:10.8px}
  .mqi b{font-size:12px}
  .sh-cols{grid-template-columns:1fr}
  .sh-main{padding:12px;gap:10px}
  .shcap{padding:0 18px}
  .btn.big{padding:14px 22px;font-size:15.5px}
  .mega .lede,.sec-head .lede{font-size:16.5px}
}
@media(max-width:420px){
  .wiredwall{gap:7px}
  .ww .appic.a40{width:34px;height:34px}
  .acard{width:262px;min-height:352px}
  .kchips span{font-size:11.5px;padding:6px 11px}
  .kplats span{font-size:11.5px;padding:7px 11px}
}
/* touch devices: no hover-lift jank, generous hit areas */
@media(hover:none){
  .acard:hover,.why:hover,.kcard:hover{transform:none}
  .aw{padding:16px}
  .faq summary{padding:18px 20px}
}

/* v9: phones get proportionate app icons everywhere */
@media(max-width:640px){
  .appic.a64{width:44px;height:44px}.appic.a64 em{font-size:22px}
  .appic.a56{width:40px;height:40px}.appic.a56 em{font-size:20px}
  .appic.a40{width:32px;height:32px}.appic.a40 em{font-size:16px}
  .si{width:72px;padding:10px 4px 9px;gap:6px}
  .si span{font-size:10.5px}
}

/* v11: card-rail icons carry the assistant badge; a touch smaller on desktop */
.acard .aico{position:relative;display:inline-flex}
.acard .aico>i{position:absolute;right:-7px;top:-7px;font-style:normal;font-size:15px;line-height:1;filter:drop-shadow(0 2px 4px rgba(20,14,4,.28))}
.acard .appic.a64{width:54px;height:54px}
.acard .appic.a64 em{font-size:27px}
@media(max-width:640px){.acard .appic.a64{width:42px;height:42px}.acard .appic.a64 em{font-size:21px}.acard .aico>i{font-size:13px;right:-5px;top:-5px}}

/* ---------- v14: every reason card moves; capture card; problem redo ---------- */
/* problem cards: warm, scannable, before/after */
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1280px;margin:26px auto 0}
@media(max-width:1100px){.pcards{grid-template-columns:repeat(2,1fr);max-width:760px}}
@media(max-width:640px){.pcards{grid-template-columns:1fr;max-width:520px}}
.pcard{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--card);border:1px solid var(--line2);border-radius:20px;box-shadow:var(--shadow-sm);padding:24px 24px 20px;transition:transform .25s,box-shadow .25s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pcard .pico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:color-mix(in srgb,var(--pc) 14%,transparent);border:1px solid color-mix(in srgb,var(--pc) 26%,transparent);margin-bottom:14px}
.pcard h3{font-size:18px;letter-spacing:-.015em;margin-bottom:8px}
.pcard>p{font-size:14.5px;color:var(--dim);line-height:1.55;margin-bottom:16px}
.pcard .pfix{margin-top:auto;background:var(--tint-gold);border:1px solid rgba(184,135,60,.28);border-radius:14px;padding:11px 14px;font-size:13.5px;line-height:1.5}
.pcard .pfix b{display:block;color:var(--goldink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.pcard .pfix span{color:var(--ink)}
html[data-theme="dark"] .pcard .pfix{background:rgba(206,156,85,.1)}
/* capture card visual */
.kc-cap .kcap{margin-top:auto}.kcapbar{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:11px 14px;}
.kcapbar i{font-style:normal;opacity:.75}
.kcapws{position:relative;flex:1;height:1.35em;overflow:hidden}
.kcapws em{position:absolute;inset:0;font-style:normal;font-size:13.5px;white-space:nowrap;opacity:0;animation:kcapcycle 10.5s infinite}
.kcapws em:nth-child(2){animation-delay:3.5s}
.kcapws em:nth-child(3){animation-delay:7s}
@keyframes kcapcycle{0%{opacity:0;transform:translateY(6px)}4%,28%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-6px)}}
.kcaret{width:2px;height:1.1em;background:currentColor;animation:kblink 1.1s steps(1) infinite}
@keyframes kblink{50%{opacity:0}}
.kcapnote{font-size:12px;opacity:.85;margin-top:10px}
/* motion for every reason card (reduced-motion users get stillness) */
@media (prefers-reduced-motion: no-preference){
 .kc-ai .kr{animation:krglow 6.6s ease-in-out infinite}
 .kc-ai .kr:nth-child(2){animation-delay:2.2s}
 .kc-ai .kr:nth-child(3){animation-delay:4.4s}
 @keyframes krglow{0%,20%{background:rgba(255,255,255,.10)}8%{background:rgba(255,255,255,.26);transform:translateX(3px)}28%,100%{background:rgba(255,255,255,.10);transform:none}}
 .kc-40 .kmini .appic{animation:kbob 4.8s ease-in-out infinite}
 .kc-40 .kmini .appic:nth-child(2n){animation-delay:.6s}.kc-40 .kmini .appic:nth-child(3n){animation-delay:1.2s}
 .kc-40 .kmini .appic:nth-child(4n){animation-delay:1.8s}.kc-40 .kmini .appic:nth-child(5n){animation-delay:2.4s}
 @keyframes kbob{0%,100%{transform:none}50%{transform:translateY(-5px) scale(1.05)}}
 .kc-family .kchips span{animation:kshare 7.2s ease-in-out infinite}
 .kc-family .kchips span:nth-child(2){animation-delay:1.2s}.kc-family .kchips span:nth-child(3){animation-delay:2.4s}
 .kc-family .kchips span:nth-child(4){animation-delay:3.6s}.kc-family .kchips span:nth-child(5){animation-delay:4.8s}
 .kc-family .kchips span:nth-child(6){animation-delay:6s}
 @keyframes kshare{0%,14%,100%{box-shadow:none}7%{box-shadow:0 0 0 3px rgba(255,255,255,.35);transform:scale(1.06)}}
 .kc-priv .klock{animation:klockb 4.5s ease-in-out infinite}
 @keyframes klockb{0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}50%{filter:drop-shadow(0 0 14px rgba(255,255,255,.5));transform:scale(1.05)}}
 .kc-yours .kscenes .scene{animation:kscn 8.4s ease-in-out infinite}
 .kc-yours .kscenes .scene:nth-child(2){animation-delay:2.8s}
 .kc-yours .kscenes .scene:nth-child(3){animation-delay:5.6s}
 @keyframes kscn{0%,26%,100%{transform:none;box-shadow:none}9%{transform:scale(1.07);box-shadow:0 8px 22px rgba(0,0,0,.35)}}
 .kc-any .kplats span{animation:kdev 6.9s ease-in-out infinite}
 .kc-any .kplats span:nth-child(2){animation-delay:1.15s}.kc-any .kplats span:nth-child(3){animation-delay:2.3s}
 .kc-any .kplats span:nth-child(4){animation-delay:3.45s}.kc-any .kplats span:nth-child(5){animation-delay:4.6s}
 @keyframes kdev{0%,14%,100%{opacity:.85;transform:none}7%{opacity:1;transform:translateY(-3px);text-shadow:0 0 12px rgba(255,255,255,.6)}}
}

/* ---------- v15: mobile geometry hardening ---------- */
html,body{overflow-x:clip}
.mega h1,.sec-head h2,.page-hero h1{text-wrap:balance}
@media(max-width:640px){
  .wrap{padding-left:18px;padding-right:18px}
  .megastats,.aistats{justify-content:center;text-align:center}
  .cnt{min-width:88px}
  .plans{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .cta-row{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
  .cta-row .btn{width:100%;justify-content:center;text-align:center}
  .hero .cta-row,.mega .cta-row{margin-top:26px}
  .pcards{gap:14px}
  .pcard{padding:20px 20px 18px}
  .fbase{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .kcapws em{font-size:12.5px}
  .kbds{display:inline-flex;gap:5px}
  .faq summary{font-size:15px}
  .paystripe{flex-direction:column;text-align:center;gap:10px}
  img,svg,video{max-width:100%;height:auto}
}
@media(max-width:400px){
  .kcard{width:min(340px,92vw)}
  .btn.big{padding:13px 18px;font-size:15px}
}

/* ---------- v17: legibility, alignment, compact stat strip, ambient motion ---------- */
/* ghost button on the dark band: actually readable */
.ctaband .btn.g{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.35)}
.ctaband .btn.g:hover{background:rgba(255,255,255,.22);color:#fff}
/* install cards: bottoms align regardless of copy length */
.dl-card p{flex:1}
.dl-card .btn{align-self:stretch;justify-content:center;text-align:center}
.dl-card .dl-how{margin-top:10px}/* the stat strip: one slim divided bar, one line even on phones */
.megastats{display:flex;flex-wrap:nowrap;justify-content:center;gap:0;margin:46px auto 0;max-width:700px;border:1px solid var(--line2);border-radius:18px;background:color-mix(in srgb,var(--card) 78%,transparent);box-shadow:var(--shadow-sm);padding:16px 8px}
.megastats .cnt{flex:1;min-width:0;padding:0 6px;position:relative;text-align:center}
.megastats .cnt+.cnt::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--line2)}
.megastats .cnt b{font-size:clamp(22px,3vw,30px);background:linear-gradient(120deg,#E2B267,#B8873C);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .megastats .cnt b{background:linear-gradient(120deg,#F0D5A4,#CE9C55);-webkit-background-clip:text;background-clip:text}
.megastats .cnt span{font-size:9.5px;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
@media(max-width:640px){
  .megastats{padding:12px 4px;margin-top:34px}
  .megastats .cnt{padding:0 4px}
  .megastats .cnt b{font-size:19px}
  .megastats .cnt span{font-size:7.8px;letter-spacing:.06em}
}
/* ambient motion, everywhere it earns it (stills for reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  /* these were two 72px blurs being animated; a soft radial does the same work for free */
.page-hero::before,.page-hero::after{content:'';position:absolute;border-radius:50%;opacity:.42;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%)}
  .page-hero::before{width:440px;height:440px;left:-140px;top:-140px;background:radial-gradient(circle,#F3DCB2,transparent 65%);animation:dr1 40s ease-in-out infinite alternate}
  .page-hero::after{width:480px;height:480px;right:-150px;top:-60px;background:radial-gradient(circle,#CFE3F2,transparent 65%);animation:dr2 50s ease-in-out infinite alternate}
  html[data-theme="dark"] .page-hero::before,html[data-theme="dark"] .page-hero::after{opacity:.15}
  .page-hero .wrap{position:relative}
  .ctaband .in::before{animation:dr2 34s ease-in-out infinite alternate}
  .ctaband .in::after{animation:dr1 42s ease-in-out infinite alternate}
  .pcard .appic{animation:kbob 6.2s ease-in-out infinite}
  .pcard.rv2 .appic{animation-delay:1.4s}.pcard.rv3 .appic{animation-delay:2.8s}.pcard.rv4 .appic{animation-delay:4.2s}
  .paystripe .lock{display:inline-block;animation:klockb 5s ease-in-out infinite}
  .plan.hi{animation:planbreathe 7s ease-in-out infinite alternate}
  @keyframes planbreathe{from{box-shadow:var(--shadow-sm)}to{box-shadow:0 18px 48px rgba(184,135,60,.22)}}
  .dl-card .dl-badge{animation:kblink 2.6s ease-in-out infinite}
  .counters .cnt b{transition:transform .3s}
  .counters .cnt:hover b{transform:translateY(-3px) scale(1.06)}
}

/* v20: hero subline under the gold line */
.herosub{font-size:clamp(15px,1.9vw,19px);font-weight:600;color:var(--dim);margin:2px 0 0;letter-spacing:-.01em}
.herosub b{color:var(--goldink);letter-spacing:.04em}

/* v21: problem cards wear the real system icons */
.pcard .appic{margin-bottom:16px}
.pcard h3{min-height:2.6em}
@media(max-width:1100px){.pcard h3{min-height:0}}

/* ---------- v22: geography + geometry, everywhere ---------- */
.dl-note{max-width:640px;margin:26px auto 0;font-size:13.5px;color:var(--faint);text-align:center;line-height:1.6}
/* the neural lattice - intelligence, quietly everywhere */
.neural{position:fixed;left:-4%;top:-6%;width:108%;height:114%;z-index:-1;pointer-events:none}
.neural .ne line{stroke:var(--ink);opacity:.05;stroke-width:1}
html[data-theme="dark"] .neural .ne line{stroke:#BFD0E8;opacity:.09}
.neural .nn circle{transform-box:fill-box;transform-origin:center}
.neural .nn .ni{fill:var(--ink);opacity:.14}
.neural .nn .ng{fill:#B8873C;opacity:.3}
.neural .nn .nb{fill:#5C88B8;opacity:.26}
html[data-theme="dark"] .neural .nn .ni{fill:#BFD0E8;opacity:.2}
html[data-theme="dark"] .neural .nn .ng{fill:#E2B267;opacity:.4}
html[data-theme="dark"] .neural .nn .nb{fill:#7FA6C8;opacity:.34}
.neural .nr{fill:none;stroke:#B8873C;opacity:.1;stroke-width:1;transform-box:fill-box;transform-origin:center}
html[data-theme="dark"] .neural .nr{stroke:#E2B267;opacity:.14}
.neural .np{stroke:#C89A5C;stroke-width:1.6;opacity:0;stroke-dasharray:6 120}

/* fine dot grid across the whole canvas */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,currentColor .8px,transparent .95px);background-size:28px 28px;color:var(--ink);opacity:.032}
html[data-theme="dark"] body::before{opacity:.05}
/* hairline geometry inside the dark CTA band */
.ctaband .in{background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 90px),linear-gradient(135deg,#151F38,#0B1220)}
.aisec{position:relative;overflow:hidden}
.know{position:relative;overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .neural{animation:neuraldrift 80s ease-in-out infinite alternate}
  @keyframes neuraldrift{from{transform:translate3d(-10px,-6px,0)}to{transform:translate3d(12px,8px,0)}}
  .neural .nn circle{animation:nodepulse 6.5s ease-in-out infinite}
  @keyframes nodepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.55)}}
  .neural .nr{animation:ringpulse 9s ease-in-out infinite}
  @keyframes ringpulse{0%,100%{opacity:.04;transform:scale(.85)}50%{opacity:.2;transform:scale(1.2)}}
  .neural .np{opacity:.5;animation-name:npmove;animation-timing-function:linear;animation-iteration-count:infinite}
  html[data-theme="dark"] .neural .np{stroke:#E2B267;opacity:.55}
  @keyframes npmove{from{stroke-dashoffset:0}to{stroke-dashoffset:-126}}
  /* slow dashed orbits on the dark intelligence section */
  .aisec::before{content:'';position:absolute;width:640px;height:640px;left:-250px;top:110px;border:1.5px dashed rgba(255,255,255,.10);border-radius:50%;animation:spinslow 150s linear infinite;pointer-events:none}
  .aisec::after{content:'';position:absolute;width:400px;height:400px;right:-150px;bottom:40px;border:1.5px dashed rgba(255,255,255,.08);border-radius:50%;animation:spinslow 110s linear infinite reverse;pointer-events:none}
  @keyframes spinslow{to{transform:rotate(360deg)}}
  /* drifting two-tone constellation behind the reasons rail */
  .know::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(184,135,60,.18) 1.1px,transparent 1.5px),radial-gradient(circle,rgba(80,130,190,.14) 1.1px,transparent 1.5px);background-size:130px 130px,180px 180px;background-position:0 0,70px 90px;animation:constel 70s linear infinite}
  @keyframes constel{to{background-position:130px 130px,250px 270px}}
}

/* v25: install steps as columns; real platform logos */
.dl-steps{margin:0 0 16px;padding-left:20px;flex:1;text-align:left}
.dl-steps li{font-size:13.5px;color:var(--dim);line-height:1.55;margin-bottom:9px}
.dl-card .dl-os{display:flex;align-items:center}
.dl-card .dl-os svg{width:27px;height:27px;display:block;color:var(--ink)}

/* v30: install-page notes become tidy info boxes, not floating centered text */
.dl-note{max-width:600px;margin:28px auto 0;font-size:13.5px;color:var(--dim);text-align:left;line-height:1.65;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:15px 19px;box-shadow:var(--shadow-sm)}
.dl-note b{color:var(--ink)}
@media(max-width:640px){.dl-note{margin:22px 16px 0;padding:13px 15px;font-size:13px}}

/* v33: the first install note runs the full content width */
.dl-note.dl-wide{max-width:1060px}


/* ---- explorer deck: seven compact group cards, systems paged inside ---- */
.gdeckrow{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:8px 2px 22px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;margin-inline:calc(50% - 50vw);padding-inline:40px}
.gdeckrow .grail{flex:0 0 max(240px,calc((100vw - 128px)/4));width:max(240px,calc((100vw - 128px)/4));max-width:none;min-width:0;margin:0;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden}
.gdeckrow .grail+.grail{margin-top:0}
.gdeckrow .gh{max-width:none;padding:0}
.gdeckrow .railwrap{flex:1;min-width:0;width:100%}
.gdeckrow .rail{width:100%;scroll-behavior:smooth}
.gdeckrow .railwrap{position:relative;padding-bottom:38px}
.gdeckrow .rarr{top:auto;bottom:2px;transform:none;width:30px;height:30px;font-size:14px;opacity:.9}
.gdeckrow .rarr:hover{transform:scale(1.08)}
.gdeckrow .rarr.l{left:calc(50% - 34px)}
.gdeckrow .rarr.r{right:calc(50% - 34px)}
.gdeckrow .rarr:disabled{opacity:.3;pointer-events:none}
.gdeckrow .acard{max-width:100%;display:flex;flex-direction:column}
.gdeckrow .gh{display:block}
.gdeckrow .gh em{display:block;min-height:2.8em}
.gdeckrow .rail{height:100%}
.gdeckrow .achips{margin-top:auto;padding-top:10px}
.grail .acard .gsm{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
.grail{background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:14px 14px 12px;margin:0}
.grail .gh{margin:0 0 10px}
.grail .gh h3{font-size:16.5px;margin:0}
.grail .gh em{font-size:11.5px;display:block;margin-top:2px}
.grail .railwrap{margin:0}
.grail .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:2px;scrollbar-width:none}
.grail .rail::-webkit-scrollbar{display:none}
.grail .acard{flex:0 0 100%;width:auto;min-width:0;scroll-snap-align:start}
.grail .rarr{width:26px;height:26px;font-size:15px}
@media(max-width:760px){
  .gdeckrow{gap:12px;padding-inline:16px;scroll-snap-type:x mandatory}
  .gdeckrow .grail{flex-basis:min(88vw,360px);width:min(88vw,360px);padding:12px 10px 10px}
  .gdeckrow .rail{padding:2px 0;gap:10px;scroll-padding-left:0}
  .gdeckrow .acard{flex:0 0 100%;width:100%;box-sizing:border-box;padding:20px 16px 18px;min-height:0}
  .gdeckrow .aplus{right:10px;top:10px;width:32px;height:32px;font-size:17px}
  .gdeckrow .railwrap{padding-bottom:44px}
  .gdeckrow .rarr{display:flex;width:40px;height:40px;font-size:17px}
  .gdeckrow .rarr.l{left:calc(50% - 46px)}
  .gdeckrow .rarr.r{right:calc(50% - 46px)}
  .wiredwall{gap:8px}
}
.wiredwall{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin-left:auto;margin-right:auto}
.wiredwall .ww{transition:transform .25s ease}
.wiredwall .ww:hover{transform:translateY(-3px)}

/* the scroll-progress hairline reads as a stray line above the header: retired */
#progress{display:none}

/* the deck's own scroller: a slim gold rail instead of the browser's default slab */
.gdeckrow::-webkit-scrollbar{height:10px}
.gdeckrow::-webkit-scrollbar-track{background:transparent}
.gdeckrow::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--gold2),var(--gold));border:3px solid transparent;background-clip:content-box;border-radius:99px;opacity:.85}
.gdeckrow::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,var(--gold),var(--gold2));background-clip:content-box}
.gdeckrow{scroll-behavior:smooth}
@media(max-width:760px){
  .gdeckrow{scrollbar-width:none;padding-bottom:10px}
  .gdeckrow::-webkit-scrollbar{height:0}
}

/* ---- mobile menu: footer-weight type, dividers, a real theme row ---- */
@media(max-width:900px){
  .links.open{display:flex}
  .links a{font-weight:600;color:var(--dim);border-bottom:1px solid var(--line2);letter-spacing:0}
  .links a:last-of-type{border-bottom:0}
  .links a:active{color:var(--ink)}
  .links .btn.p.sm{margin-top:12px;width:100%;justify-content:center;padding:12px 16px;font-size:14.5px;border-bottom:0}
  /* the bare icon square read as a stray button: a plain settings row instead */
  .links .thm{width:100%;height:auto;transform:none!important;border-radius:0;background:transparent;
    border-bottom:1px solid var(--line2);justify-content:space-between;gap:10px;padding:11px 2px;
    font-size:14px;font-weight:600;color:var(--dim);transition:none}
  .links .thm::before{content:"Appearance";font-size:14px;font-weight:600;color:var(--dim)}
  .links .thm .sun,.links .thm .moon{width:32px;height:32px;border-radius:10px;display:inline-flex;
    align-items:center;justify-content:center;background:transparent;border:1px solid var(--line2);color:var(--gold)}
  .links .thm .sun svg,.links .thm .moon svg{width:15px;height:15px;display:block}
  /* no grey wash when the row is tapped, focused or held */
  .links .thm,.links .thm:hover,.links .thm:active,.links .thm:focus,.links .thm:focus-visible{background:transparent;outline:none;box-shadow:none}
  .links .thm:active .sun,.links .thm:active .moon{background:transparent}
}

/* the toggle draws a line icon in the brand gold, never a full-color emoji glyph */
.thm{color:var(--gold)}
.thm .sun,.thm .moon{display:none;line-height:0}
html[data-theme="dark"] .thm .sun{display:inline-flex}
html:not([data-theme="dark"]) .thm .moon{display:inline-flex}

.thm{-webkit-tap-highlight-color:transparent}
.links a{-webkit-tap-highlight-color:transparent}

/* the group deck: always leave the next group peeking, so a phone knows to swipe */
@media(max-width:760px){
  .gdeckrow .grail{flex-basis:min(80vw,340px);width:min(80vw,340px)}
}

/* the security rail IS the "get to know" component: same size, same rhythm */
#safety .kcard h3{max-width:13ch}
#safety .krow{font-size:13px}
#safety .kv{gap:10px}

/* ---- security cards: each one demonstrates its own guarantee ---- */
#safety .kv{gap:12px}
#safety .sfx{position:relative}
/* Every scene occupies the same block, so cards in a rail line up whatever is drawn
   inside them: same height, same top edge, contents centred within it. */
.sfx{position:relative;margin:12px 0 16px;height:112px;display:flex;align-items:center;
  justify-content:flex-start;overflow:hidden}
.sfx > svg{display:block}
.kcard .kv{display:flex;flex-direction:column}
.kcard .kv .krow:first-of-type{margin-top:2px}
/* ============================================================================
   Scenes for "Doing, not filing" and "The interface".
   One per card, and each one depicts the thing the card is actually about:
   a command being typed and filing itself, a tile being tapped, a pin dropping,
   a star filling, a key pressing. Nothing here is a generic bar chart.
   ============================================================================ */

/* a line typed into the bar, which then files itself away with a tick */
.sfx-cmd{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace)}
.sfx-cmd .bar{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;
  border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.sfx-cmd .txt{font-size:14px;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;
  width:0;animation:sfxCmdType 6s steps(24,end) infinite}
.sfx-cmd .car{width:2px;height:18px;background:rgba(255,255,255,.9);animation:sfxCmdCar 1s step-end infinite}
.sfx-cmd .done{position:absolute;right:12px;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.92);opacity:0;transform:scale(.4);animation:sfxCmdDone 6s ease-out infinite}
.sfx-cmd .done::after{content:"";position:absolute;left:6px;top:9px;width:5px;height:9px;
  border:2px solid #14301f;border-top:0;border-left:0;transform:rotate(42deg)}
@keyframes sfxCmdType{0%{width:0}34%{width:13ch}72%{width:13ch}80%,100%{width:0}}
@keyframes sfxCmdCar{50%{opacity:0}}
@keyframes sfxCmdDone{0%,60%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(1)}}

/* a tile on the board being tapped, its count dropping by one */




/* when this happens, do that: a spark leaves the trigger and lands on the action */
.sfx-wire{display:flex;align-items:center;gap:12px}
.sfx-wire .node{flex:0 0 auto;padding:9px 13px;border-radius:11px;font-size:12px;font-weight:700;
  color:rgba(255,255,255,.9);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24)}
.sfx-wire .node.b{background:rgba(255,255,255,.10);animation:sfxWireLand 3.4s ease-out infinite}
.sfx-wire .ln{flex:1;height:2px;background:rgba(255,255,255,.22);position:relative;border-radius:2px}
.sfx-wire .ln::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9);animation:sfxWireSpark 3.4s ease-in-out infinite}
@keyframes sfxWireSpark{0%{left:0;opacity:0}12%{opacity:1}68%{left:calc(100% - 8px);opacity:1}80%,100%{left:calc(100% - 8px);opacity:0}}
@keyframes sfxWireLand{0%,64%{transform:scale(1);background:rgba(255,255,255,.10)}72%{transform:scale(1.09);background:rgba(255,255,255,.30)}92%,100%{transform:scale(1);background:rgba(255,255,255,.10)}}

/* things that moved, arriving newest first */
.sfx-feed{display:flex;flex-direction:column;gap:7px;overflow:hidden}
.sfx-feed .fr{display:flex;align-items:center;gap:9px;height:22px;padding:0 10px;border-radius:8px;
  background:rgba(255,255,255,.14);animation:sfxFeedIn 4.4s ease-out infinite;animation-delay:var(--d,0ms)}
.sfx-feed .fr b{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85);flex:0 0 auto}
.sfx-feed .fr span{height:6px;border-radius:3px;background:rgba(255,255,255,.4)}
@keyframes sfxFeedIn{0%{transform:translateY(-16px);opacity:0}16%,84%{transform:none;opacity:1}100%{opacity:.35}}

/* two panes, and the edge between them being dragged */
.sfx-panes{display:flex;gap:0;align-items:stretch}
.sfx-panes .pn{border-radius:12px 0 0 12px;background:rgba(255,255,255,.18);flex:3;
  animation:sfxPaneA 5.4s ease-in-out infinite}
.sfx-panes .pn.two{border-radius:0 12px 12px 0;background:rgba(255,255,255,.30);flex:2;
  animation:sfxPaneB 5.4s ease-in-out infinite}
.sfx-panes .grip{flex:0 0 8px;display:flex;align-items:center;justify-content:center}
.sfx-panes .grip i{width:3px;height:34px;border-radius:3px;background:rgba(255,255,255,.85);
  animation:sfxGrip 5.4s ease-in-out infinite}
@keyframes sfxPaneA{0%,100%{flex-grow:3}50%{flex-grow:1.6}}
@keyframes sfxPaneB{0%,100%{flex-grow:2}50%{flex-grow:3.4}}
@keyframes sfxGrip{0%,100%{height:34px;opacity:.6}50%{height:48px;opacity:1}}

/* the same place, picked up on the other device */


/* the assistant, asked from inside a system */
.sfx-ask{position:relative}
.sfx-ask .panel{position:absolute;inset:0 0 18px 0;border-radius:12px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20)}
.sfx-ask .lines{position:absolute;left:12px;top:14px;display:flex;flex-direction:column;gap:7px}
.sfx-ask .lines i{height:6px;border-radius:3px;background:rgba(255,255,255,.35)}
.sfx-ask .lines i:nth-child(1){width:78px}.sfx-ask .lines i:nth-child(2){width:54px}
.sfx-ask .orb{position:absolute;right:14px;top:12px;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,rgba(255,255,255,.55));animation:sfxAskOrb 3.4s ease-in-out infinite}
.sfx-ask .ring{position:absolute;right:14px;top:12px;width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);opacity:0;animation:sfxAskRing 3.4s ease-out infinite;animation-delay:var(--d,0ms)}
.sfx-ask .reply{position:absolute;left:12px;bottom:0;height:9px;width:0;border-radius:4px;
  background:rgba(255,255,255,.85);animation:sfxAskReply 3.4s ease-out infinite}
@keyframes sfxAskOrb{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}}
@keyframes sfxAskRing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}
@keyframes sfxAskReply{0%,40%{width:0}70%{width:120px}92%,100%{width:120px;opacity:.4}}

/* the sun coming up over the day's first line */
.sfx-dawn{position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.16))}
.sfx-dawn .sun{position:absolute;left:26px;bottom:-20px;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 40% 36%,#fff,rgba(255,255,255,.6));
  box-shadow:0 0 26px rgba(255,255,255,.45);animation:sfxDawn 6.5s ease-in-out infinite}
.sfx-dawn .hz{position:absolute;left:0;right:0;bottom:26px;height:2px;background:rgba(255,255,255,.5)}
.sfx-dawn .task{position:absolute;left:16px;bottom:8px;height:8px;width:0;border-radius:4px;
  background:rgba(255,255,255,.85);animation:sfxDawnTask 6.5s ease-out infinite}
@keyframes sfxDawn{0%{transform:translateY(0);opacity:0}20%{opacity:1}55%{transform:translateY(-46px)}100%{transform:translateY(-46px);opacity:1}}
@keyframes sfxDawnTask{0%,45%{width:0}70%{width:104px}100%{width:104px}}

/* the moon, and the day's list closing itself */
.sfx-dusk{position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}
.sfx-dusk .moon{position:absolute;right:26px;top:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:inset -9px 2px 0 0 rgba(255,255,255,.12)}
.sfx-dusk .row{position:absolute;left:16px;height:8px;border-radius:4px;background:rgba(255,255,255,.6)}
.sfx-dusk .row:nth-child(2){top:20px;width:88px;animation:sfxStrike 5.2s ease-in-out infinite}
.sfx-dusk .row:nth-child(3){top:40px;width:66px;animation:sfxStrike 5.2s ease-in-out infinite .5s}
.sfx-dusk .row:nth-child(4){top:60px;width:76px;opacity:.4}
@keyframes sfxStrike{0%,30%{opacity:.85;filter:none}55%,100%{opacity:.3}}

/* a voice, and the shape of it */
.sfx-wave{display:flex;align-items:center;gap:5px}
.sfx-wave i{flex:1;max-width:9px;border-radius:5px;background:rgba(255,255,255,.75);
  height:14px;animation:sfxWave 1.5s ease-in-out infinite;animation-delay:var(--d,0ms)}
@keyframes sfxWave{0%,100%{height:12px;opacity:.55}50%{height:56px;opacity:1}}

/* a briefing, written a line at a time */
.sfx-brief{display:flex;flex-direction:column;gap:8px;justify-content:center}
.sfx-brief i{height:9px;border-radius:5px;background:rgba(255,255,255,.7);width:0;
  animation:sfxBrief 5.6s cubic-bezier(.3,0,.2,1) infinite;animation-delay:var(--d,0ms)}
@keyframes sfxBrief{0%{width:0;opacity:.4}22%{width:var(--w,80%);opacity:1}86%{width:var(--w,80%);opacity:1}100%{width:var(--w,80%);opacity:.35}}

/* the board stepping back, its groups gathering */
.sfx-board{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sfx-board i{border-radius:8px;background:rgba(255,255,255,.22);
  animation:sfxBoard 5s cubic-bezier(.3,0,.2,1) infinite;animation-delay:var(--d,0ms)}
.sfx-board i.g{background:rgba(255,255,255,.42)}
@keyframes sfxBoard{0%,38%{transform:scale(1);opacity:.55;border-radius:8px}58%,86%{transform:scale(.8);opacity:1;border-radius:5px}100%{transform:scale(1);opacity:.55}}

/* a tile that carries the thing itself, not a number */
.sfx-live{position:relative}
.sfx-live .tl{position:absolute;inset:0 auto 0 0;width:104px;border-radius:14px;
  background:linear-gradient(155deg,rgba(255,255,255,.28),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.24)}
.sfx-live .bars{position:absolute;left:14px;bottom:16px;display:flex;align-items:flex-end;gap:5px;height:38px}
.sfx-live .bars i{width:8px;border-radius:3px;background:rgba(255,255,255,.85);
  animation:sfxLive 3.2s ease-in-out infinite;animation-delay:var(--d,0ms)}
.sfx-live .cap{position:absolute;left:14px;top:14px;font-size:11px;font-weight:700;color:rgba(255,255,255,.75)}
@keyframes sfxLive{0%,100%{height:10px}50%{height:34px}}

/* two tiles trading places */
.sfx-swap{position:relative}
.sfx-swap i{position:absolute;top:14px;width:62px;height:62px;border-radius:14px;
  background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.22)}
.sfx-swap i:first-child{left:0;animation:sfxSwapA 4.2s cubic-bezier(.5,0,.3,1) infinite}
.sfx-swap i:last-child{left:76px;background:rgba(255,255,255,.42);animation:sfxSwapB 4.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes sfxSwapA{0%,20%{transform:none}55%,100%{transform:translateX(76px)}}
@keyframes sfxSwapB{0%,20%{transform:none}55%,100%{transform:translateX(-76px)}}

/* a pin, dropping onto the board */
.sfx-pin{position:relative}
.sfx-pin .tl{position:absolute;left:0;bottom:6px;width:96px;height:60px;border-radius:14px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.24)}
.sfx-pin .pn{position:absolute;left:38px;top:0;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7);animation:sfxPinDrop 3.8s cubic-bezier(.4,0,.3,1) infinite}
.sfx-pin .pn::after{content:"";position:absolute;left:7px;top:16px;width:4px;height:16px;border-radius:2px;background:#fff}
@keyframes sfxPinDrop{0%{transform:translateY(-22px);opacity:0}18%{opacity:1}44%{transform:translateY(20px)}52%{transform:translateY(14px)}70%,100%{transform:translateY(16px)}}

/* a star, filling */
.sfx-star{display:flex;align-items:center;justify-content:center}
.sfx-star svg{width:74px;height:74px;overflow:visible}
.sfx-star .out{fill:none;stroke:rgba(255,255,255,.7);stroke-width:2.4;stroke-linejoin:round}
.sfx-star .fil{fill:#fff;transform-origin:50% 55%;animation:sfxStarPop 3.6s cubic-bezier(.3,1.4,.4,1) infinite}
@keyframes sfxStarPop{0%,26%{transform:scale(0);opacity:0}44%{transform:scale(1.16);opacity:1}54%,88%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}

/* a key, pressed */
.sfx-key{display:flex;align-items:center;gap:12px}
.sfx-key .cap{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:20px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.3);box-shadow:0 5px 0 rgba(255,255,255,.18);
  animation:sfxKeyPress 3s cubic-bezier(.3,0,.3,1) infinite}
.sfx-key .to{height:10px;width:0;border-radius:5px;background:rgba(255,255,255,.85);
  animation:sfxKeyGo 3s ease-out infinite}
@keyframes sfxKeyPress{0%,40%{transform:none;box-shadow:0 5px 0 rgba(255,255,255,.18)}52%{transform:translateY(5px);box-shadow:0 0 0 rgba(255,255,255,.18)}66%,100%{transform:none;box-shadow:0 5px 0 rgba(255,255,255,.18)}}
@keyframes sfxKeyGo{0%,50%{width:0}72%{width:96px}92%,100%{width:96px;opacity:.4}}

/* a corner, rounding and sharpening */
.sfx-corner{display:flex;align-items:center;justify-content:center}
.sfx-corner i{width:74px;height:74px;background:linear-gradient(155deg,rgba(255,255,255,.34),rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.28);animation:sfxCorner 4.4s ease-in-out infinite}
@keyframes sfxCorner{0%,42%{border-radius:20px}58%,100%{border-radius:2px}}

/* a tile trying colors on */
.sfx-hue{display:flex;align-items:center;gap:10px}
.sfx-hue .tl{width:74px;height:74px;border-radius:16px;animation:sfxHue 6s linear infinite}
.sfx-hue .sw{display:flex;flex-direction:column;gap:6px}
.sfx-hue .sw i{width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.35);
  animation:sfxHueSw 6s linear infinite;animation-delay:var(--d,0ms)}
@keyframes sfxHue{0%{background:hsl(38,60%,55%)}33%{background:hsl(200,55%,55%)}66%{background:hsl(320,50%,58%)}100%{background:hsl(38,60%,55%)}}
@keyframes sfxHueSw{0%,100%{opacity:.35;transform:scale(1)}12%{opacity:1;transform:scale(1.25)}}

/* three starting sets, fanned out */
.sfx-preset{position:relative}
.sfx-preset i{position:absolute;top:14px;left:0;width:66px;height:62px;border-radius:12px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.26);transform-origin:bottom left;
  animation:sfxFan 5s ease-in-out infinite;animation-delay:var(--d,0ms)}
@keyframes sfxFan{0%,100%{transform:rotate(0) translateX(0)}50%{transform:rotate(var(--r,0deg)) translateX(var(--x,0))}}

/* where you were, waiting for you */
.sfx-recent{display:flex;flex-direction:column;gap:8px;justify-content:center}
.sfx-recent .rr{display:flex;align-items:center;gap:9px}
.sfx-recent .rr i{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.3)}
.sfx-recent .rr span{height:8px;border-radius:4px;background:rgba(255,255,255,.5)}
.sfx-recent .rr:first-child i{background:rgba(255,255,255,.85);animation:sfxRecent 3.4s ease-in-out infinite}
@keyframes sfxRecent{0%,100%{transform:scale(1)}45%{transform:scale(1.16)}}

/* a small thing worth noticing */
.sfx-spark{position:relative}
.sfx-spark .cen{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.85);animation:sfxSparkC 3.2s ease-in-out infinite}
.sfx-spark i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;
  background:rgba(255,255,255,.9);animation:sfxSparkOut 3.2s ease-out infinite;animation-delay:var(--d,0ms)}
@keyframes sfxSparkC{0%,100%{transform:scale(.85);opacity:.7}45%{transform:scale(1.2);opacity:1}}
@keyframes sfxSparkOut{0%{transform:translate(0,0) scale(1);opacity:0}20%{opacity:1}100%{transform:translate(var(--tx,30px),var(--ty,-24px)) scale(.3);opacity:0}}

/* a month, with things landing on their days */
.sfx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;align-content:center}
.sfx-cal i{aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.16);position:relative}
.sfx-cal i.on::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;
  border-radius:50%;background:#fff;animation:sfxCalDot 4.6s ease-out infinite;animation-delay:var(--d,0ms)}
@keyframes sfxCalDot{0%{transform:scale(0);opacity:0}14%{transform:scale(1.3);opacity:1}30%,84%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}

/* a line of sessions, climbing */
.sfx-train{position:relative;display:flex;align-items:flex-end;gap:6px}
.sfx-train i{flex:1;border-radius:4px 4px 0 0;background:rgba(255,255,255,.5);
  animation:sfxTrain 4.4s cubic-bezier(.3,0,.2,1) infinite;animation-delay:var(--d,0ms)}
.sfx-train i:last-child{background:#fff}
@keyframes sfxTrain{0%{height:8px;opacity:.5}30%{opacity:1}55%,86%{height:var(--h,40px)}100%{height:var(--h,40px);opacity:.6}}

/* the palette itself */
.sfx-palette{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sfx-palette i{width:30px;height:30px;border-radius:9px;animation:sfxPal 4.6s ease-in-out infinite;animation-delay:var(--d,0ms)}
@keyframes sfxPal{0%,100%{transform:scale(.86);opacity:.5}45%{transform:scale(1.06);opacity:1}}

/* the day's paper, read and set aside */
.sfx-paper{position:relative}
.sfx-paper .sh{position:absolute;left:0;top:8px;width:96px;height:74px;border-radius:8px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  animation:sfxPaperSlide 5.2s ease-in-out infinite;animation-delay:var(--d,0ms)}
.sfx-paper .sh::after{content:"";position:absolute;left:12px;right:12px;top:14px;height:6px;border-radius:3px;
  background:rgba(255,255,255,.45);box-shadow:0 14px 0 rgba(255,255,255,.32),0 28px 0 rgba(255,255,255,.22)}
@keyframes sfxPaperSlide{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(var(--x,26px)) rotate(var(--r,5deg))}}

/* something kept, dropping into place */
.sfx-save{position:relative}
.sfx-save .tray{position:absolute;left:0;right:0;bottom:8px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26)}
.sfx-save .it{position:absolute;left:50%;top:0;width:44px;height:30px;margin-left:-22px;border-radius:8px;
  background:rgba(255,255,255,.85);animation:sfxSaveDrop 3.8s cubic-bezier(.4,0,.3,1) infinite}
@keyframes sfxSaveDrop{0%{transform:translateY(-16px);opacity:0}20%{opacity:1}55%{transform:translateY(34px)}64%{transform:translateY(28px)}80%,100%{transform:translateY(30px);opacity:1}}

@media(prefers-reduced-motion:reduce){
  .sfx-cmd .txt,.sfx-cmd .car,.sfx-cmd .done,  .sfx-cmd .txt{width:13ch}
  .sfx-star .fil{transform:none;opacity:1}
  .sfx-train i{height:var(--h,40px)}
  .sfx-brief i{width:var(--w,80%)}
}



/* the six digit code, with the thirty second window draining under it */
.sfx-code{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sfx-code .cdg{width:38px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:19px;color:#fff;background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);animation:cdflip 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes cdflip{0%,72%,100%{transform:none;background:rgba(255,255,255,.16)}
  78%{transform:translateY(-5px) scale(1.04);background:rgba(255,255,255,.3)}86%{transform:none}}
.sfx-code .cdbar{flex:0 0 100%;height:4px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:6px}
.sfx-code .cdbar i{display:block;height:100%;width:100%;border-radius:3px;background:rgba(255,255,255,.85);
  transform-origin:left;animation:cddrain 6s linear infinite}
@keyframes cddrain{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* the envelope seals itself, then the check draws */
.sfx-mail svg{width:150px;height:90px;overflow:visible}
.sfx-mail .env{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.4);stroke-width:2}
.sfx-mail .flap{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:130;stroke-dashoffset:130;animation:draw 5s ease-in-out infinite}
.sfx-mail .seal{fill:rgba(255,255,255,.9);opacity:0;transform-origin:96px 52px;animation:pop 5s ease-in-out infinite}
.sfx-mail .tick{fill:none;stroke:#12303f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;animation:tick 5s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:130}35%,100%{stroke-dashoffset:0}}
@keyframes pop{0%,42%{opacity:0;transform:scale(.4)}52%,100%{opacity:1;transform:scale(1)}}
@keyframes tick{0%,55%{stroke-dashoffset:22}70%,100%{stroke-dashoffset:0}}

/* the padlock closes as the passcode fills */
.sfx-lock{display:flex;align-items:center;gap:16px}
.sfx-lock svg{width:74px;height:74px;overflow:visible}
.sfx-lock .shk{fill:none;stroke:rgba(255,255,255,.75);stroke-width:6;stroke-linecap:round;
  transform-origin:45px 40px;animation:shackle 4.4s ease-in-out infinite}
.sfx-lock .body{fill:rgba(255,255,255,.9)}
.sfx-lock .hole{fill:#2b2350}
@keyframes shackle{0%,30%{transform:translateY(-9px) scaleY(1.25)}48%,100%{transform:none}}
.sfx-lock .dots{display:flex;gap:9px}
.sfx-lock .dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.28);animation:fill 4.4s ease-in-out infinite}
.sfx-lock .dots i:nth-child(2){animation-delay:.16s}
.sfx-lock .dots i:nth-child(3){animation-delay:.32s}
.sfx-lock .dots i:nth-child(4){animation-delay:.48s}
@keyframes fill{0%,6%{background:rgba(255,255,255,.28);transform:none}
  16%,72%{background:#fff;transform:scale(1.18)}86%,100%{background:rgba(255,255,255,.28);transform:none}}

/* records line up and leave as one file */
.sfx-data{display:flex;flex-direction:column;gap:7px;position:relative;padding-right:44px}
.sfx-data .fbar{height:11px;border-radius:6px;background:rgba(255,255,255,.22);width:100%;
  transform-origin:left;animation:slidein 4.6s ease-in-out infinite;animation-delay:var(--d)}
.sfx-data .fbar:nth-child(2){width:84%}.sfx-data .fbar:nth-child(3){width:92%}.sfx-data .fbar:nth-child(4){width:70%}
@keyframes slidein{0%{opacity:0;transform:translateX(-14px)}18%,74%{opacity:1;transform:none}92%,100%{opacity:.25;transform:translateX(10px)}}
.sfx-data .dl{position:absolute;right:2px;bottom:2px;width:30px;height:30px;fill:none;
  stroke:rgba(255,255,255,.9);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:bobWave 2.4s ease-in-out infinite}
@keyframes bobWave{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* the card leaves for Stripe: a sheen passes and nothing stays behind */
.sfx-card .paycard{position:relative;display:block;width:170px;height:104px;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 14px 30px rgba(0,0,0,.25);animation:tilt 6s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-5px)}}
.sfx-card .paycard .stripe{position:absolute;left:0;right:0;top:22px;height:16px;background:rgba(0,0,0,.35)}
.sfx-card .paycard .chip{position:absolute;left:16px;bottom:16px;width:26px;height:20px;border-radius:5px;background:rgba(255,255,255,.75)}
.sfx-card .paycard .sheen{position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);animation:sweepShine 3.4s ease-in-out infinite}
@keyframes sweepShine{0%{left:-60%}60%,100%{left:120%}}

/* permissions granted one at a time, the rest staying dark */
.sfx-fam{display:flex;flex-wrap:wrap;gap:8px}
.sfx-fam .gchip{font-size:12.5px;font-weight:700;border-radius:100px;padding:8px 15px;
  background:rgba(255,255,255,.14);color:rgba(255,255,255,.72);animation:grant 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes grant{0%,10%{background:rgba(255,255,255,.14);color:rgba(255,255,255,.72);transform:none}
  18%,32%{background:#fff;color:#3a1b2a;transform:translateY(-3px)}42%,100%{background:rgba(255,255,255,.14);color:rgba(255,255,255,.72);transform:none}}

/* depth on the whole rail: a soft light follows the card that is hovered */
@media(hover:hover){
  #safety .kcard{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
  #safety .kcard:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 40px 90px rgba(6,10,22,.5)}
  #safety .kcard:hover .kplus{transform:scale(1.12);background:rgba(255,255,255,.34)}
}
@media (prefers-reduced-motion: reduce){
  #safety .sfx *,#safety .sfx{animation:none!important}
  .sfx-code .cdbar i{transform:scaleX(.5)}
  .sfx-mail .flap,.sfx-mail .tick{stroke-dashoffset:0}
  .sfx-mail .seal{opacity:1;transform:none}
}

/* ---- the explorer deck wears the same clothes as the security and "get to know" rails ---- */
#explore .sec-head{max-width:1180px;margin:0 auto 30px;padding:0 24px;text-align:left}
#explore .sec-head h2,#explore .sec-head .lede{margin-left:0;margin-right:0}
#explore .sec-head .lede{max-width:62ch}

/* the group card itself: kcard proportions, kcard depth, its own family gradient */
.gdeckrow{gap:20px;padding-bottom:26px}
.gdeckrow .grail{flex-basis:min(400px,86vw);width:min(400px,86vw);max-width:400px;min-height:560px;
  border-radius:28px;padding:30px 26px 22px;color:#fff;border:0;
  box-shadow:0 26px 70px rgba(10,16,34,.28);position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.gdeckrow .grail:nth-child(1){background:radial-gradient(130% 120% at 84% -10%,#E2B267 0%,#8A5E20 34%,#241A0C 72%,#120D06 100%)}
.gdeckrow .grail:nth-child(2){background:radial-gradient(130% 120% at 82% -10%,#EE8F8F 0%,#8A3B3B 38%,#2A1214 78%,#150A0B 100%)}
.gdeckrow .grail:nth-child(3){background:radial-gradient(130% 120% at 80% -10%,#7BD9B0 0%,#1F5C42 38%,#0A1C14 78%,#060F0A 100%)}
.gdeckrow .grail:nth-child(4){background:radial-gradient(130% 120% at 80% -10%,#93BCF0 0%,#2E5678 36%,#0D1B2A 76%,#080F18 100%)}
.gdeckrow .grail:nth-child(5){background:radial-gradient(130% 130% at 50% -20%,#C4CFDE 0%,#3E4A5E 40%,#131A26 78%,#080C12 100%)}
.gdeckrow .grail:nth-child(6){background:radial-gradient(130% 120% at 82% -10%,#F0B3D0 0%,#8A4666 38%,#231018 78%,#120810 100%)}
.gdeckrow .grail:nth-child(7){background:radial-gradient(130% 120% at 82% -10%,#BCA9F0 0%,#4E3F82 38%,#161028 78%,#0B0816 100%)}
@media(hover:hover){.gdeckrow .grail:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 40px 90px rgba(6,10,22,.5)}}

/* its header now reads like a kcard header */
.gdeckrow .gh h3{font-size:clamp(24px,2.3vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.14;color:#fff;text-transform:none}
.gdeckrow .gh em{font-size:13px;font-weight:600;color:rgba(255,255,255,.72);min-height:2.6em}

/* the system inside sits on glass, not on another dark slab */
.gdeckrow .railwrap{margin-top:14px}
.gdeckrow .acard{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);
  box-shadow:none;border-radius:20px;padding:20px 18px 16px;min-height:0}  /* no backdrop-filter: fifty blurred layers crashed the tab */
.gdeckrow .acard b,.gdeckrow .acard h3{color:#fff}
.gdeckrow .acard p{color:rgba(255,255,255,.82)}
.gdeckrow .acard .gsm{color:rgba(255,255,255,.6)}
.gdeckrow .achips span{background:rgba(255,255,255,.16);color:#fff;border:0}.gdeckrow .aplus{background:rgba(255,255,255,.22);color:#fff}
@media(hover:hover){.gdeckrow .grail:hover .aplus{background:rgba(255,255,255,.34);transform:scale(1.1)}}.gdeckrow .rarr{background:rgba(255,255,255,.18);color:#fff;border:0;}
.gdeckrow .rarr:disabled{opacity:.3}

/* the app icon keeps its own color, and gains the same gentle float as the hero cloud */
.gdeckrow.vis .acard:nth-child(-n+12) .aico{animation:floaty 5.6s ease-in-out infinite alternate}

@media(max-width:760px){
  .gdeckrow .grail{min-height:520px;padding:24px 20px 18px;flex-basis:min(84vw,360px);width:min(84vw,360px)}
  .gdeckrow .acard{padding:18px 15px 14px}
}
@media (prefers-reduced-motion: reduce){ .gdeckrow .acard .aico{animation:none} }

/* ---- the problem rail: every row pinned to the same line across all cards ---- */
#problem .kcard.pk{justify-content:flex-start}
/* the headline reserves three lines, so the icon under it starts at one height */
#problem .pk h3{max-width:15ch;font-size:clamp(23px,2.2vw,29px);margin:6px 0 0;min-height:3.3em;display:flex;align-items:flex-start}
/* the body fills what is left: icon, then the story, then the answer pinned to the floor */
#problem .pk .kv{margin-top:26px;flex:1;display:flex;flex-direction:column;gap:14px;justify-content:flex-start}
/* Whatever a card carries, the skeleton is the same: icon first, its dial under it,
   any scene in the middle, and the story pinned to the bottom edge. Cards in a rail
   then line up: icons at one height, stories at another, scenes filling between. */
.pk .kv .sfx{order:3;margin:0}
.pk .pkico{order:1}
.pk .pfx{order:2}
.pk .pkline{order:4;margin-top:auto}
.pk .krow.pkfix{order:5}
#problem .pkico{display:block;margin:0 0 6px;height:64px}
#problem .pkico .appic{animation:floaty 6s ease-in-out infinite alternate}
#problem .pkline{font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);margin:0}
#problem .pkfix{margin-top:auto;background:rgba(255,255,255,.16);border-left:3px solid rgba(255,255,255,.55);
  font-weight:500;font-size:13px;line-height:1.5;align-items:flex-start}
#problem .pkfix b{font-weight:800;letter-spacing:.01em;margin-right:6px}
@media(hover:hover){
  #problem .kcard:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 40px 90px rgba(6,10,22,.5)}
  #problem .kcard:hover .pkfix{background:rgba(255,255,255,.24)}
}
@media (prefers-reduced-motion: reduce){ #problem .pkico .appic{animation:none} }

/* the same discipline on the security rail, so the two sections read as one family */
#safety .kcard h3{min-height:2.3em}
#safety .kcard .kv{margin-top:auto}
@media(max-width:760px){ #problem .pk h3{min-height:4.5em} }

@media(max-width:760px){ #problem .pk .kv{margin-top:20px} }

/* ================= problem-card scenes: each one acts out its own story ================= */
.pfx{position:relative;width:100%;max-width:210px;height:56px;display:flex;align-items:center}

/* a month, and the one square that matters lighting up while a bell leans in */
.pfx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;max-width:150px;height:auto}
.pfx-cal i{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.16)}
.pfx-cal i.on{background:#fff;animation:calpop 4s ease-in-out infinite}
@keyframes calpop{0%,55%{background:rgba(255,255,255,.16);transform:none}65%,90%{background:#fff;transform:scale(1.35)}100%{background:rgba(255,255,255,.16);transform:none}}
.pfx-cal .bell{position:absolute;right:0;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;opacity:.9;
  transform-origin:50% 0;animation:ring 4s ease-in-out infinite}
@keyframes ring{0%,58%{transform:rotate(0)}64%{transform:rotate(18deg)}70%{transform:rotate(-14deg)}76%{transform:rotate(8deg)}82%,100%{transform:rotate(0)}}

/* a cycle that fills round, phase by phase */
.pfx-ring svg{width:56px;height:56px;transform:rotate(-90deg)}
.pfx-ring .tr{fill:none;stroke:rgba(255,255,255,.2);stroke-width:7}
.pfx-ring .pr{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-dasharray:188;stroke-dashoffset:188;animation:fillring 6s ease-in-out infinite}
@keyframes fillring{0%{stroke-dashoffset:188}70%,100%{stroke-dashoffset:52}}
.pfx-ring .pd{position:absolute;left:64px;width:9px;height:9px;border-radius:50%;background:#fff;opacity:.5;animation:pulse 2.4s ease-in-out infinite}

/* doses ticking off one at a time */
.pfx-dose{gap:10px}
.pfx-dose i{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
  animation:tickin 6s ease-in-out infinite;animation-delay:var(--d)}
.pfx-dose svg{width:17px;height:17px;fill:none;stroke:#1b2a1f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;animation:tickdraw 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tickin{0%,8%{background:rgba(255,255,255,.18)}18%,86%{background:#fff}96%,100%{background:rgba(255,255,255,.18)}}
@keyframes tickdraw{0%,8%{stroke-dashoffset:20}20%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:20}}

/* charges leaving every month, one of them the one you forgot */
.pfx-bills{flex-direction:column;gap:7px;max-width:190px}
.pfx-bills .row{display:flex;align-items:center;gap:8px;width:100%}
.pfx-bills .row i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4)}
.pfx-bills .row b{height:8px;border-radius:5px;background:rgba(255,255,255,.2);flex:1}
.pfx-bills .row:nth-child(2) b{width:74%;flex:none}
.pfx-bills .row:nth-child(3) b{width:88%;flex:none}
.pfx-bills .lit i{background:#fff;animation:pulse 2.6s ease-in-out infinite}
.pfx-bills .lit b{background:rgba(255,255,255,.6);animation:charge 3.2s ease-in-out infinite}
@keyframes charge{0%,100%{background:rgba(255,255,255,.28)}50%{background:rgba(255,255,255,.75)}}

/* cover draining toward the sixty day mark */
.pfx-drain{max-width:190px}
.pfx-drain .bar{position:relative;height:9px;border-radius:6px;background:rgba(255,255,255,.18);flex:1;overflow:hidden}
.pfx-drain .bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;animation:drain 6s linear infinite}
@keyframes drain{0%{transform:scaleX(1)}100%{transform:scaleX(.12)}}
.pfx-drain .mark{position:absolute;left:calc(12% - 1px);top:-4px;width:2px;height:17px;border-radius:2px;background:rgba(255,255,255,.85)}

/* the trip, drawn as it happens */
.pfx-fly svg{width:190px;height:52px;overflow:visible}
.pfx-fly .path{fill:none;stroke:rgba(255,255,255,.45);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round}
.pfx-fly .dot{fill:#fff}

/* a pulse crossing the card */
.pfx-vital svg{width:190px;height:44px}
.pfx-vital .ecg{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:230;stroke-dashoffset:230;animation:ecg 3.4s linear infinite}
@keyframes ecg{0%{stroke-dashoffset:230}60%,100%{stroke-dashoffset:-230}}

/* a document being stamped */
.pfx-doc{gap:14px}
.pfx-doc .sheet{width:44px;height:54px;border-radius:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 8px}
.pfx-doc .sheet i{height:4px;border-radius:3px;background:rgba(255,255,255,.5)}
.pfx-doc .sheet i:nth-child(2){width:70%}
.pfx-doc .stamp{font-size:11px;font-weight:800;letter-spacing:.14em;color:#fff;border:2px solid #fff;border-radius:6px;
  padding:4px 8px;transform:rotate(-12deg) scale(1.6);opacity:0;animation:stamp 4.4s ease-in-out infinite}
@keyframes stamp{0%,42%{opacity:0;transform:rotate(-12deg) scale(1.6)}52%,88%{opacity:.95;transform:rotate(-12deg) scale(1)}100%{opacity:0;transform:rotate(-12deg) scale(1.6)}}

/* two people, and the one thing they share */
.pfx-two{max-width:150px}
.pfx-two .p{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.6)}
.pfx-two .p.b{margin-left:-12px;background:rgba(255,255,255,.14)}
.pfx-two .link{position:absolute;left:20px;width:34px;height:34px;border-radius:50%;background:#fff;opacity:.22;animation:share 4s ease-in-out infinite}
@keyframes share{0%,100%{opacity:.14;transform:scale(.9)}50%{opacity:.4;transform:scale(1)}}

/* everything orbiting one centre */
.pfx-orbit{justify-content:center;max-width:120px}
.pfx-orbit .core{width:14px;height:14px;border-radius:50%;background:#fff}
.pfx-orbit i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:rgba(255,255,255,.75);
  animation:orbitgo 7s linear infinite;animation-delay:calc(var(--i) * -1.16s)}
@keyframes orbitgo{from{transform:rotate(0) translateX(38px)}to{transform:rotate(360deg) translateX(38px)}}

/* ---- the family motifs used across the fifty ---- */
.pfx-clock .dial{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.45);position:relative}
.pfx-clock .dial i{position:absolute;left:50%;top:50%;width:2px;height:16px;background:#fff;transform-origin:50% 100%;
  margin:-16px 0 0 -1px;animation:hand 4s linear infinite}
@keyframes hand{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.pfx-stack{gap:6px;align-items:flex-end;height:48px}
.pfx-stack i{width:14px;border-radius:4px 4px 0 0;background:rgba(255,255,255,.55);height:14px;animation:grow 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes grow{0%,100%{height:12px;opacity:.55}50%{height:40px;opacity:1}}
.pfx-pages{flex-direction:column;gap:6px;max-width:150px}
.pfx-pages i{height:7px;border-radius:4px;background:rgba(255,255,255,.35);width:100%;transform-origin:left;
  animation:turn 4.4s ease-in-out infinite;animation-delay:var(--d)}
.pfx-pages i:nth-child(2){width:82%}.pfx-pages i:nth-child(3){width:92%}.pfx-pages i:nth-child(4){width:68%}
@keyframes turn{0%,100%{opacity:.35;transform:scaleX(1)}45%{opacity:1;transform:scaleX(1.03)}}
.pfx-rise{gap:7px;align-items:flex-end;height:48px}
.pfx-rise i{width:12px;border-radius:3px;background:rgba(255,255,255,.5);height:10px;animation:rise 4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes rise{0%,100%{height:10px}50%{height:42px;background:#fff}}

#problem .pk .kv{gap:12px}
#problem .pkico{margin-bottom:0}
@media(max-width:760px){ .pfx{max-width:170px;height:48px} }
@media (prefers-reduced-motion: reduce){ .pfx *,.pfx{animation:none!important} .pfx-ring .pr{stroke-dashoffset:52} .pfx-vital .ecg{stroke-dashoffset:0} .pfx-doc .stamp{opacity:.95;transform:rotate(-12deg)} }

/* ================= the explorer deck gets its own quiet motion ================= */
.gdeckrow .grail::after{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0;
  background:radial-gradient(38% 30% at 24% 20%,rgba(255,255,255,.22),transparent 70%),
             radial-gradient(30% 26% at 78% 68%,rgba(255,255,255,.14),transparent 72%);
  animation:auroradrift 14s ease-in-out infinite alternate}
@keyframes auroradrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6%,4%,0) scale(1.12)}}
.gdeckrow .grail>*{position:relative;z-index:1}
@keyframes sheenspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.gdeckrow .acard{transition:background .3s,border-color .3s}
.gdeckrow.vis .acard:nth-child(-n+12) .achips span{animation:chipglow 5.5s ease-in-out infinite}
.gdeckrow .acard:nth-child(2) .achips span:nth-child(2){animation-delay:1.1s}
@keyframes chipglow{0%,100%{background:rgba(255,255,255,.16)}50%{background:rgba(255,255,255,.26)}}
@media(hover:hover){ .gdeckrow .grail:hover .acard{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24)} }
@media (prefers-reduced-motion: reduce){ .gdeckrow .grail::after,.gdeckrow .achips span{animation:none} }

/* the scene only belongs in the deck, and it yields on small cards */
.gdeckrow .acard .gsx{margin:8px 0 10px;height:52px;display:flex;align-items:center;overflow:hidden}
@media(max-width:760px){ .gsx{height:36px} .gsx-home .room{width:24px;height:22px} }
@media (prefers-reduced-motion: reduce){ .gsx *,.gsx{animation:none!important} .gsx-health .ln{stroke-dashoffset:0} }

/* ================= one scene per system: fifty designs, fifty different ideas =================
   Rules this block follows, because breaking them is what went wrong before:
   every wrapper holding an absolutely positioned child sets position:relative itself,
   and nothing draws taller than the 50px strip. */
.gsx{position:relative;height:50px;margin:10px 0 12px;display:flex;align-items:center;overflow:hidden}
.gsx svg{overflow:visible}
@keyframes gTick{0%,8%{background:rgba(255,255,255,.18)}20%,86%{background:#fff}96%,100%{background:rgba(255,255,255,.18)}}
@keyframes gDraw{0%,8%{stroke-dashoffset:20}22%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:20}}
@keyframes gPop{0%,58%{opacity:.22;transform:scale(.78)}70%,92%{opacity:1;transform:scale(1)}100%{opacity:.22;transform:scale(.78)}}
@keyframes gSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes gBeat{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.3);opacity:1}}

/* Tasks: boxes ticking off */
.gsp-check{gap:10px}
.gsp-check i{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;animation:gTick 6s ease-in-out infinite;animation-delay:var(--d)}
.gsp-check svg{width:16px;height:16px;fill:none;stroke:#1d2433;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;animation:gDraw 6s ease-in-out infinite;animation-delay:var(--d)}
/* Calendar: a fortnight, two days claimed */
.gsp-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:20px;gap:4px;max-width:150px;height:auto}
.gsp-grid i{border-radius:4px;background:rgba(255,255,255,.16)}
.gsp-grid i.on{background:#fff;animation:gPop 4.4s ease-in-out infinite}
.gsp-grid i.on ~ i.on{animation-delay:1.3s}
/* Habits: a streak of squares, and the day it broke */
.gsp-streak{gap:6px}
.gsp-streak i{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.2);animation:gTick 5.6s ease-in-out infinite;animation-delay:var(--d)}
.gsp-streak i.gap{animation:none;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
/* Focus: an arc running down */
.gsp-arc svg{width:44px;height:44px;transform:rotate(-90deg)}
.gsp-arc .tr{fill:none;stroke:rgba(255,255,255,.2);stroke-width:6}
.gsp-arc .pr{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:132;animation:gArc 5s linear infinite}
@keyframes gArc{0%{stroke-dashoffset:0}100%{stroke-dashoffset:132}}
/* Goals: climbing toward the flag */
.gsp-target .bar{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.18);width:170px;overflow:hidden}
.gsp-target .bar i{position:absolute;left:0;top:0;bottom:0;background:#fff;width:100%;transform-origin:left;animation:gClimb 5.4s ease-in-out infinite}
@keyframes gClimb{0%{transform:scaleX(.08)}55%,85%{transform:scaleX(.76)}100%{transform:scaleX(.08)}}
.gsp-target .flag{position:absolute;right:20%;top:-5px;width:2px;height:20px;background:#fff;border-radius:2px}
/* Projects: milestones lighting along the line */
.gsp-nodes{position:relative;justify-content:space-between;width:172px}
.gsp-nodes .ln{position:absolute;left:7px;right:7px;top:50%;height:2px;background:rgba(255,255,255,.22)}
.gsp-nodes i{position:relative;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.25);animation:gTick 6s ease-in-out infinite;animation-delay:var(--d)}
/* Countdowns: days flipping away */
.gsp-flip{gap:9px;perspective:300px}
.gsp-flip i{width:26px;height:32px;border-radius:5px;background:rgba(255,255,255,.6);animation:gFlip 4.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gFlip{0%,45%{transform:rotateX(0);opacity:1}70%{transform:rotateX(-88deg);opacity:.35}100%{transform:rotateX(0);opacity:1}}
/* Alarms: a bell and the rings coming off it */
.gsp-bell .wrap{position:relative;width:60px;height:40px;display:flex;align-items:center;justify-content:center}
.gsp-bell .b{width:20px;height:20px;border-radius:7px 7px 3px 3px;background:#fff;transform-origin:50% 0;animation:gRing 3.6s ease-in-out infinite}
@keyframes gRing{0%,60%{transform:rotate(0)}68%{transform:rotate(20deg)}76%{transform:rotate(-16deg)}84%{transform:rotate(9deg)}92%,100%{transform:rotate(0)}}
.gsp-bell .w,.gsp-bell .w2{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:gWave 3.6s ease-out infinite}
.gsp-bell .w2{animation-delay:.6s}
@keyframes gWave{0%{transform:scale(.5);opacity:0}20%{opacity:.85}100%{transform:scale(1.9);opacity:0}}
/* Notes: lines written, with the caret still going */
.gsp-write .pad{position:relative;display:flex;flex-direction:column;gap:6px;width:150px}
.gsp-write i{height:5px;border-radius:3px;background:rgba(255,255,255,.55);transform-origin:left;transform:scaleX(0);animation:gWrite 5.2s ease-in-out infinite;animation-delay:var(--d)}
.gsp-write i:nth-child(2){width:78%}.gsp-write i:nth-child(3){width:94%}.gsp-write i:nth-child(4){width:56%}
@keyframes gWrite{0%{transform:scaleX(0)}22%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.gsp-write .caret{position:absolute;left:0;bottom:0;width:2px;height:11px;background:#fff;animation:gCaret 5.2s ease-in-out infinite}
@keyframes gCaret{0%{left:0;opacity:1}70%{left:56%;opacity:1}80%,100%{opacity:0}}
/* Journal: one day, one mood, changing */
.gsp-mood{position:relative;gap:12px}
.gsp-mood .face{width:30px;height:30px;border-radius:50%;background:#fff;animation:gFace 7s ease-in-out infinite}
@keyframes gFace{0%,100%{background:rgba(255,255,255,.35);transform:scale(.86)}30%{background:#fff;transform:scale(1.08)}62%{background:rgba(255,255,255,.6);transform:scale(.95)}}
.gsp-mood .trail{width:96px;height:5px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.7));animation:gTrail 7s ease-in-out infinite}
@keyframes gTrail{0%,100%{opacity:.4}45%{opacity:1}}
/* Weekly review: seven days lighting, then the week is summed */
.gsp-week{gap:6px}
.gsp-week i{width:15px;height:15px;border-radius:4px;background:rgba(255,255,255,.22);animation:gDay 5.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gDay{0%,6%{background:rgba(255,255,255,.22)}18%,74%{background:#fff}88%,100%{background:rgba(255,255,255,.22)}}
.gsp-week .sum{width:34px;height:8px;border-radius:5px;margin-left:8px;background:rgba(255,255,255,.25);transform-origin:left;animation:gSum 5.6s ease-in-out infinite}
@keyframes gSum{0%,60%{transform:scaleX(0);background:rgba(255,255,255,.25)}78%,92%{transform:scaleX(1);background:#fff}100%{transform:scaleX(0)}}
/* Vision board: the picture assembling */
.gsp-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:20px;gap:5px;max-width:120px;height:auto}
.gsp-mosaic i{border-radius:5px;background:rgba(255,255,255,.5);animation:gPop 5.2s ease-in-out infinite;animation-delay:var(--d)}
/* Appointments: a booking sliding into its slot */
.gsp-slots{position:relative;padding-left:2px}
.gsp-slots .col{display:flex;flex-direction:column;gap:6px;width:150px}
.gsp-slots .col b{height:7px;border-radius:4px;background:rgba(255,255,255,.18)}
.gsp-slots .appt{position:absolute;left:0;top:15px;width:96px;height:7px;border-radius:4px;background:#fff;animation:gBook 5.4s cubic-bezier(.5,0,.2,1) infinite}
@keyframes gBook{0%{transform:translateX(-110%);opacity:0}18%,80%{transform:none;opacity:1}100%{transform:translateX(-110%);opacity:0}}
/* Health: capsules filling as each dose is taken */
.gsp-pill{gap:14px}
.gsp-pill .cap{position:relative;width:56px;height:22px;border-radius:12px;border:2px solid rgba(255,255,255,.55);overflow:hidden}
.gsp-pill .cap i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff;transform-origin:left;transform:scaleX(0);animation:gCap 6s ease-in-out infinite}
.gsp-pill .two i{animation-delay:1.6s}
@keyframes gCap{0%,10%{transform:scaleX(0)}28%,84%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* Cycle: the ring filling by phase */
.gsp-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.gsp-ring .tr{fill:none;stroke:rgba(255,255,255,.2);stroke-width:6}
.gsp-ring .pr{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:132;stroke-dashoffset:132;animation:gFill 6s ease-in-out infinite}
@keyframes gFill{0%{stroke-dashoffset:132}70%,100%{stroke-dashoffset:38}}
/* Meditate: a breath in and out */
.gsp-breath{justify-content:center}
.gsp-breath .o{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.3);animation:gBreath 7s ease-in-out infinite}
@keyframes gBreath{0%,100%{transform:scale(.7);box-shadow:0 0 0 0 rgba(255,255,255,.3)}50%{transform:scale(1.12);box-shadow:0 0 0 12px rgba(255,255,255,0)}}
/* Hydration: the glass filling, drop by drop */
.gsp-fill{position:relative;gap:16px}
.gsp-fill .glass{position:relative;width:28px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:4px 4px 9px 9px;overflow:hidden}
.gsp-fill .glass i{position:absolute;left:0;right:0;bottom:0;background:#fff;height:15%;animation:gPour 6s ease-in-out infinite}
@keyframes gPour{0%{height:12%}55%,85%{height:80%}100%{height:12%}}
.gsp-fill .drip{width:8px;height:11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(255,255,255,.8);animation:gDrip 2s ease-in infinite}
@keyframes gDrip{0%{transform:translateY(-14px);opacity:0}40%{opacity:1}100%{transform:translateY(14px);opacity:0}}
/* Fasting: the eating window moving across the day */
.gsp-window .tr{position:relative;height:11px;border-radius:6px;background:rgba(255,255,255,.18);width:170px;overflow:hidden}
.gsp-window .tr i{position:absolute;top:0;bottom:0;left:0;width:32%;border-radius:6px;background:#fff;animation:gWin 7s ease-in-out infinite}
@keyframes gWin{0%{left:0}50%{left:68%}100%{left:0}}
/* Workouts: the bar going up and down */
.gsp-lift{justify-content:center}
.gsp-lift .bar{position:relative;width:120px;height:6px;border-radius:4px;background:#fff;animation:gLift 4s ease-in-out infinite}
.gsp-lift b{position:absolute;top:-10px;width:14px;height:26px;border-radius:4px;background:rgba(255,255,255,.8)}
.gsp-lift b:first-child{left:-2px}.gsp-lift b:last-child{right:-2px}
@keyframes gLift{0%,100%{transform:translateY(9px)}50%{transform:translateY(-9px)}}
/* Finance: the month, against its average */
.gsp-bars{position:relative;gap:6px;align-items:flex-end;height:40px;padding-bottom:2px}
.gsp-bars i{width:11px;border-radius:3px 3px 0 0;background:rgba(255,255,255,.45);height:12px;animation:gRise 4.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gRise{0%,100%{height:10px;background:rgba(255,255,255,.42)}50%{height:32px;background:#fff}}
.gsp-bars .avg{position:absolute;left:0;width:124px;height:2px;border-radius:2px;background:rgba(255,255,255,.85);bottom:18px;animation:gAvg 4.4s ease-in-out infinite}
@keyframes gAvg{0%,100%{bottom:14px}50%{bottom:24px}}
/* Bills: money leaving, month after month */
.gsp-rows{flex-direction:column;gap:8px;align-items:flex-start}
.gsp-rows .r{position:relative;height:8px;border-radius:5px;background:rgba(255,255,255,.22);width:150px}
.gsp-rows .r:nth-child(2){width:116px}.gsp-rows .r:nth-child(3){width:134px}
.gsp-rows .r em{position:absolute;right:-4px;top:-3px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.55);animation:gCoin 4.4s ease-in-out infinite}
.gsp-rows .r:nth-child(2) em{animation-delay:.9s}.gsp-rows .r:nth-child(3) em{animation-delay:1.8s}
@keyframes gCoin{0%,30%{transform:none;opacity:.5}55%{transform:translateX(16px) scale(.7);opacity:1}80%,100%{transform:translateX(30px) scale(.5);opacity:0}}
.gsp-rows .lit{background:#fff;animation:gLit 3.4s ease-in-out infinite}
@keyframes gLit{0%,100%{background:rgba(255,255,255,.35)}50%{background:#fff}}
/* Invoices: sent, and finally paid */
.gsp-send{gap:16px}
.gsp-send .pg{width:30px;height:38px;border-radius:5px;background:rgba(255,255,255,.6);animation:gSend 5.4s ease-in-out infinite}
@keyframes gSend{0%,14%{transform:none;opacity:.6}45%{transform:translateX(18px) rotate(7deg);opacity:1}80%,100%{transform:none;opacity:.6}}
.gsp-send .tick{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;animation:gTick 5.4s ease-in-out infinite;animation-delay:1.6s}
.gsp-send svg{width:15px;height:15px;fill:none;stroke:#1d2433;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;animation:gDraw 5.4s ease-in-out infinite;animation-delay:1.6s}
/* Shopping: items struck off the list */
.gsp-list{flex-direction:column;gap:8px;align-items:flex-start}
.gsp-list .li{position:relative;display:flex;align-items:center;gap:8px}
.gsp-list .li i{width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.25);animation:gTick 6s ease-in-out infinite;animation-delay:var(--d)}
.gsp-list .li b{height:6px;border-radius:4px;background:rgba(255,255,255,.5);width:120px}
.gsp-list .li:nth-child(2) b{width:92px}.gsp-list .li:nth-child(3) b{width:108px}
.gsp-list .li::after{content:"";position:absolute;left:20px;top:50%;height:2px;width:0;background:#fff;animation:gStrike 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gStrike{0%,18%{width:0}34%,86%{width:118px}100%{width:0}}
/* Insurance: the cover closing over */
.gsp-shield{justify-content:center}
.gsp-shield svg{width:38px;height:42px}
.gsp-shield .sh{fill:rgba(255,255,255,.16);stroke:#fff;stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:150;stroke-dashoffset:150;animation:gShield 5.4s ease-in-out infinite}
@keyframes gShield{0%{stroke-dashoffset:150;fill:rgba(255,255,255,.04)}55%,88%{stroke-dashoffset:0;fill:rgba(255,255,255,.24)}100%{stroke-dashoffset:150;fill:rgba(255,255,255,.04)}}
/* Tax: receipts filed away, torn edge and all */
.gsp-paper{gap:8px;align-items:flex-end}
.gsp-paper i{width:24px;height:32px;background:rgba(255,255,255,.6);
  clip-path:polygon(0 0,100% 0,100% 88%,86% 100%,72% 88%,58% 100%,44% 88%,30% 100%,16% 88%,0 100%);
  animation:gFileUp 5.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gFileUp{0%{transform:translateY(14px);opacity:0}24%,80%{transform:none;opacity:1}100%{transform:translateY(-10px);opacity:0}}
/* Wishlist: wants catching the light */
.gsp-twinkle{gap:14px}
.gsp-twinkle i{width:16px;height:16px;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:gTwinkle 4.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gTwinkle{0%,100%{opacity:.25;transform:scale(.75) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(18deg)}}
/* Home care: rooms lighting one at a time */
.gsp-rooms{gap:9px}
.gsp-rooms .rm{width:28px;height:24px;border-radius:6px;border:2px solid rgba(255,255,255,.45);animation:gRoom 5.6s ease-in-out infinite}
.gsp-rooms .rm:nth-child(2){animation-delay:1.4s}.gsp-rooms .rm:nth-child(3){animation-delay:2.8s}.gsp-rooms .rm:nth-child(4){animation-delay:4.2s}
@keyframes gRoom{0%,70%,100%{background:transparent;border-color:rgba(255,255,255,.45)}80%{background:rgba(255,255,255,.85);border-color:#fff}}
/* Vehicle: the road going by */
.gsp-road{gap:18px}
.gsp-road .dash{width:26px;height:6px;border-radius:4px;background:rgba(255,255,255,.7);animation:gRoad 2.2s linear infinite}
.gsp-road .dash:nth-child(2){animation-delay:.55s}.gsp-road .dash:nth-child(3){animation-delay:1.1s}.gsp-road .dash:nth-child(4){animation-delay:1.65s}
@keyframes gRoad{0%{transform:translateX(48px);opacity:0}15%,85%{opacity:1}100%{transform:translateX(-48px);opacity:0}}
/* Warranties: cover draining toward the mark */
.gsp-drainbar .bar{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.18);width:170px}
.gsp-drainbar .bar i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:6px;background:#fff;transform-origin:left;animation:gDrain 6s linear infinite}
@keyframes gDrain{0%{transform:scaleX(1)}100%{transform:scaleX(.12)}}
.gsp-drainbar .mk{position:absolute;left:12%;top:-5px;width:2px;height:20px;border-radius:2px;background:#fff}
/* Plants: water, then leaves */
.gsp-grow{gap:16px;align-items:flex-end;padding-bottom:4px}
.gsp-grow .drop{width:9px;height:13px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#fff;animation:gDropFall 4s ease-in infinite}
@keyframes gDropFall{0%{transform:translateY(-16px);opacity:0}35%{opacity:1}70%,100%{transform:translateY(14px);opacity:0}}
.gsp-grow .stem{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.gsp-grow .stem i{height:6px;border-radius:4px;background:rgba(255,255,255,.65);transform-origin:left;transform:scaleX(0);animation:gLeaf 4s ease-in-out infinite}
.gsp-grow .stem i:nth-child(1){width:30px}
.gsp-grow .stem i:nth-child(2){width:22px;animation-delay:.5s}
.gsp-grow .stem i:nth-child(3){width:14px;animation-delay:1s}
@keyframes gLeaf{0%,10%{transform:scaleX(0)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* Pets: paws crossing the card */
.gsp-paw{gap:15px}
.gsp-paw i{width:13px;height:13px;border-radius:52% 52% 44% 44%;background:rgba(255,255,255,.8);animation:gPaw 3.8s ease-in-out infinite;animation-delay:var(--d)}
.gsp-paw i:nth-child(even){transform:translateY(11px)}
@keyframes gPaw{0%,100%{opacity:.15}28%,58%{opacity:1}}
/* Gifts: the lid lifting off */
.gsp-gift{justify-content:center}
.gsp-gift .bx{position:relative;width:40px;height:30px;border-radius:5px;background:rgba(255,255,255,.6)}
.gsp-gift .lid{position:absolute;left:-3px;right:-3px;top:-8px;height:9px;border-radius:4px;background:#fff;animation:gLid 4.2s ease-in-out infinite}
@keyframes gLid{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-11px) rotate(-7deg)}}
.gsp-gift .bx i{position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:rgba(255,255,255,.85);border-radius:3px}
/* Emergency: a pulse crossing */
.gsp-ecg svg{width:100%;height:36px}
.gsp-ecg .ln{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:gEcg 3.4s linear infinite}
@keyframes gEcg{0%{stroke-dashoffset:240}55%,100%{stroke-dashoffset:-240}}
/* Pantry: jars running down */
.gsp-jars{gap:13px;align-items:flex-end}
.gsp-jars .j{position:relative;width:22px;height:36px;border:2px solid rgba(255,255,255,.55);border-radius:4px 4px 6px 6px;overflow:hidden}
.gsp-jars .j i{position:absolute;left:0;right:0;bottom:0;background:#fff;height:70%;animation:gEmpty 5.6s ease-in-out infinite}
.gsp-jars .j:nth-child(2) i{animation-delay:1.1s}.gsp-jars .j:nth-child(3) i{animation-delay:2.2s}
@keyframes gEmpty{0%{height:78%}60%,85%{height:12%}100%{height:78%}}
/* People: a signal reaching across */
.gsp-signal .wrap{position:relative;display:flex;align-items:center;gap:30px;padding:0 4px}
.gsp-signal .n{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.55);animation:gBeat 3s ease-in-out infinite}
.gsp-signal .n:nth-child(2){animation-delay:.5s}.gsp-signal .n:nth-child(3){animation-delay:1s}
.gsp-signal .edge{position:absolute;left:16px;top:50%;height:2px;width:0;background:rgba(255,255,255,.8);animation:gReach 4.6s ease-in-out infinite}
@keyframes gReach{0%{width:0;opacity:0}18%{opacity:1}55%{width:90px;opacity:1}80%,100%{width:90px;opacity:0}}
/* Messages: replies landing on both sides */
.gsp-bubbles{flex-direction:column;gap:6px;align-items:flex-start;width:160px}
.gsp-bubbles .bb{height:13px;border-radius:8px 8px 8px 3px;background:rgba(255,255,255,.35);width:98px;animation:gPop 5.4s ease-in-out infinite}
.gsp-bubbles .r{align-self:flex-end;border-radius:8px 8px 3px 8px;width:76px;background:#fff;animation-delay:1.4s}
.gsp-bubbles .bb:nth-child(3){width:112px;animation-delay:2.8s}
/* Trips: the journey travelled */
.gsp-path svg{width:100%;height:40px}
.gsp-path .pth{fill:none;stroke:rgba(255,255,255,.45);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round}
.gsp-path .dt{fill:#fff}
/* Recipes: something on the stove */
.gsp-steam .wrap{position:relative;width:70px;height:44px;display:flex;align-items:flex-end;justify-content:center}
.gsp-steam .pot{width:40px;height:18px;border-radius:4px 4px 10px 10px;background:rgba(255,255,255,.7)}
.gsp-steam .sm{position:absolute;bottom:18px;left:22px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);animation:gSteam 3.6s ease-in-out infinite}
.gsp-steam .sm.two{left:38px;animation-delay:1.2s}
@keyframes gSteam{0%{transform:translateY(0) scale(.6);opacity:0}25%{opacity:.9}100%{transform:translateY(-24px) scale(1.35);opacity:0}}
/* Map: a pin landing */
.gsp-pin .wrap{position:relative;width:60px;height:44px;display:flex;align-items:center;justify-content:center}
.gsp-pin .pn{width:16px;height:16px;border-radius:50% 50% 50% 0;background:#fff;animation:gPin 4s ease-in-out infinite}
@keyframes gPin{0%{transform:rotate(-45deg) translateY(-20px);opacity:0}28%{opacity:1}48%,100%{transform:rotate(-45deg) translateY(0);opacity:1}}
.gsp-pin .rp{position:absolute;left:50%;bottom:6px;width:30px;height:11px;margin-left:-15px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:gRipple 4s ease-out infinite}
@keyframes gRipple{0%,42%{transform:scale(.4);opacity:0}56%{opacity:.85}100%{transform:scale(1.8);opacity:0}}
/* Lent: something going out, and coming back */
.gsp-pass .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;width:170px}
.gsp-pass .a,.gsp-pass .b{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.6)}
.gsp-pass .obj{position:absolute;left:22px;width:12px;height:12px;border-radius:3px;background:#fff;animation:gPass 5s ease-in-out infinite}
@keyframes gPass{0%,6%{left:22px}44%,56%{left:134px}94%,100%{left:22px}}
/* Photos: the pile going by */
.gsp-shuffle .wrap{position:relative;width:110px;height:40px}
.gsp-shuffle .ph{position:absolute;top:5px;left:0;width:38px;height:30px;border-radius:5px;background:rgba(255,255,255,.6);animation:gShuffle 5.6s ease-in-out infinite}
.gsp-shuffle .two{animation-delay:1.9s;background:rgba(255,255,255,.45)}
.gsp-shuffle .three{animation-delay:3.8s;background:rgba(255,255,255,.3)}
@keyframes gShuffle{0%{transform:translateX(0) rotate(-7deg);opacity:0}18%{opacity:1}62%{transform:translateX(34px) rotate(4deg);opacity:1}100%{transform:translateX(68px) rotate(-2deg);opacity:0}}
/* School: the grade curve going up */
.gsp-curve svg{width:100%;height:42px}
.gsp-curve .ax{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-linecap:round}
.gsp-curve .cv{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:210;stroke-dashoffset:210;animation:gCurve 5.4s ease-in-out infinite}
@keyframes gCurve{0%{stroke-dashoffset:210}50%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:210}}
/* Library: books landing on the shelf */
.gsp-shelf{gap:5px;align-items:flex-end;height:44px;padding-bottom:2px}
.gsp-shelf i{width:9px;height:28px;border-radius:2px;background:rgba(255,255,255,.55);transform-origin:bottom;animation:gShelf 5.2s ease-in-out infinite;animation-delay:var(--d)}
.gsp-shelf i:nth-child(2){height:34px}.gsp-shelf i:nth-child(4){height:22px}.gsp-shelf i:nth-child(6){height:32px}
@keyframes gShelf{0%{transform:translateY(-16px) rotate(-16deg);opacity:0}22%,80%{transform:none;opacity:1}100%{transform:translateY(-16px) rotate(-16deg);opacity:0}}
/* News: an edition passing through */
.gsp-feed .win{position:relative;width:160px;height:44px;overflow:hidden;display:flex;flex-direction:column;gap:7px;justify-content:center}
.gsp-feed .hl{height:8px;border-radius:4px;background:rgba(255,255,255,.5);width:150px;animation:gFeed 5s ease-in-out infinite}
.gsp-feed .two{width:116px;animation-delay:1.3s}.gsp-feed .three{width:138px;animation-delay:2.6s}
@keyframes gFeed{0%{opacity:0;transform:translateY(14px)}22%,68%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}
/* Vault: the dial turning */
.gsp-lock{justify-content:center}
.gsp-lock svg{width:40px;height:40px}
.gsp-lock .dial{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:2.6;stroke-dasharray:24 13;transform-origin:50% 50%;animation:gSpin 9s linear infinite}
.gsp-lock .nub{stroke:#fff;stroke-width:3;stroke-linecap:round}
/* World: three cities, three times */
.gsp-clocks{gap:13px}
.gsp-clocks .c{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.gsp-clocks .c i{position:absolute;left:50%;top:50%;width:2px;height:9px;background:#fff;transform-origin:50% 100%;margin:-9px 0 0 -1px;animation:gSpin 3.4s linear infinite}
.gsp-clocks .two i{animation-duration:5.4s}.gsp-clocks .three i{animation-duration:7.6s}
/* Business: the pipeline filling */
.gsp-pipe{gap:7px;width:170px}
.gsp-pipe i{height:13px;border-radius:7px;flex:1;background:rgba(255,255,255,.2);animation:gPipe 5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gPipe{0%,8%{background:rgba(255,255,255,.2);transform:scaleY(.65)}22%,80%{background:#fff;transform:scaleY(1)}94%,100%{background:rgba(255,255,255,.2);transform:scaleY(.65)}}
/* Deals: one deal moving along */
.gsp-advance .wrap{position:relative;display:flex;align-items:center;width:170px;height:24px}
.gsp-advance .track{height:8px;border-radius:5px;background:rgba(255,255,255,.2);width:100%}
.gsp-advance .chip{position:absolute;left:0;width:28px;height:18px;border-radius:6px;background:#fff;animation:gAdvance 5.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes gAdvance{0%,10%{left:0}35%{left:30%}60%{left:60%}85%,100%{left:84%}}
/* Contracts: the signature going down */
.gsp-sign svg{width:100%;height:38px}
.gsp-sign .rule{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-linecap:round}
.gsp-sign .sg{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;animation:gSign 5.6s ease-in-out infinite}
@keyframes gSign{0%{stroke-dashoffset:300}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:300}}
/* Expenses: receipts dropping into the tray */
.gsp-tray{position:relative;gap:8px;align-items:flex-start;padding-top:2px}
.gsp-tray i{width:20px;height:24px;border-radius:3px;background:rgba(255,255,255,.6);animation:gDrop2 5.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gDrop2{0%{transform:translateY(-16px);opacity:0}22%{opacity:1}62%,100%{transform:translateY(16px);opacity:0}}
.gsp-tray .tr{position:absolute;left:0;bottom:4px;width:130px;height:4px;border-radius:3px;background:rgba(255,255,255,.7)}

.gdeckrow .acard .gsx{margin:8px 0 10px;height:52px;display:flex;align-items:center;overflow:hidden}
@media(max-width:760px){ .gsx{height:44px} .gsp-rooms .rm{width:24px;height:21px} .gsp-target .bar,.gsp-window .tr,.gsp-drainbar .bar{width:150px} }
@media (prefers-reduced-motion: reduce){
  .gsx *,.gsx{animation:none!important}
  .gsp-write i,.gsp-pill .cap i,.gsp-grow .stem i{transform:scaleX(1)}
  .gsp-ecg .ln,.gsp-curve .cv,.gsp-sign .sg,.gsp-shield .sh{stroke-dashoffset:0}
  .gsp-ring .pr{stroke-dashoffset:38}
}

/* ================= the four assurance cards: an icon, and a scene that proves it ================= */
.why .wico{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);background:var(--soft);border:1px solid var(--line2);margin-bottom:14px}
.why .wico svg{width:20px;height:20px;display:block}
.wfx{position:relative;margin-top:16px;height:44px;display:flex;align-items:center;overflow:hidden;color:var(--gold)}

/* thirty days, filling one by one, and nothing asked for */
.wfx-days{display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:9px;gap:4px;height:auto;max-width:210px}
.wfx-days i{border-radius:2px;background:var(--line2);animation:wDay 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wDay{0%,4%{background:var(--line2)}12%,72%{background:var(--gold)}84%,100%{background:var(--line2)}}

/* three plans, all of them full: no tiers to climb */
.wfx-plans{gap:12px;align-items:flex-end;height:44px}
.wfx-plans .col{position:relative;width:34px;height:40px;border-radius:6px;background:var(--line2);overflow:hidden}
.wfx-plans .col i{position:absolute;left:0;right:0;bottom:0;background:var(--gold);height:0;animation:wPlan 4.6s ease-in-out infinite}
.wfx-plans .col:nth-child(2) i{animation-delay:.18s}.wfx-plans .col:nth-child(3) i{animation-delay:.36s}
@keyframes wPlan{0%,8%{height:0}40%,82%{height:100%}100%{height:0}}

/* the card leaves for Stripe and nothing stays behind */
.wfx-away{gap:0}
.wfx-away .ghost{position:absolute;left:0;width:56px;height:34px;border-radius:7px;border:2px dashed var(--line2)}
.wfx-away .crd{position:absolute;left:0;width:56px;height:34px;border-radius:7px;background:var(--gold);
  box-shadow:0 6px 16px rgba(184,135,60,.35);animation:wAway 5s cubic-bezier(.5,0,.2,1) infinite}
@keyframes wAway{0%,14%{left:0;opacity:1}62%{left:118px;opacity:1}76%,100%{left:118px;opacity:0}}
.wfx-away .vault{position:absolute;left:130px;width:34px;height:34px;border-radius:9px;border:2px solid var(--gold);
  animation:wLock 5s ease-in-out infinite}
@keyframes wLock{0%,58%{background:transparent}70%,92%{background:rgba(184,135,60,.22)}100%{background:transparent}}

/* every record, out to a file you keep */
.wfx-out{gap:14px}
.wfx-out .rowset{display:flex;flex-direction:column;gap:5px;width:110px}
.wfx-out .rowset i{height:6px;border-radius:4px;background:var(--line2);transform-origin:left;animation:wOut 5.2s ease-in-out infinite}
.wfx-out .rowset i:nth-child(2){animation-delay:.4s;width:82%}
.wfx-out .rowset i:nth-child(3){animation-delay:.8s;width:92%}
@keyframes wOut{0%,10%{background:var(--line2);transform:translateX(0);opacity:1}
  45%{background:var(--gold);transform:translateX(0);opacity:1}
  72%,100%{background:var(--gold);transform:translateX(26px);opacity:0}}
.wfx-out .file{width:30px;height:38px;border-radius:5px;border:2px solid var(--gold);position:relative;animation:wFile 5.2s ease-in-out infinite}
.wfx-out .file::after{content:"";position:absolute;left:50%;top:52%;width:9px;height:9px;margin:-5px 0 0 -5px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg)}
@keyframes wFile{0%,55%{background:transparent}70%,92%{background:rgba(184,135,60,.16)}100%{background:transparent}}

@media(hover:hover){ .why:hover{transform:translateY(-4px)} }
@media(max-width:760px){ .wfx{height:40px} .wfx-days{max-width:180px} }
@media (prefers-reduced-motion: reduce){
  .wfx *,.wfx{animation:none!important}
  .wfx-days i{background:var(--gold)} .wfx-plans .col i{height:100%} .wfx-out .rowset i{background:var(--gold)}
}

/* ================= plans: the featured one alive, every tick arriving ================= */
/* NOT overflow:hidden - the "Most people" badge deliberately sits outside the card */
.plan .tag{animation:tagbob 4.4s ease-in-out infinite}
@keyframes tagbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* a slow warm light moving under the featured plan */
.plan.hi::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:radial-gradient(58% 46% at 26% 22%,rgba(184,135,60,.30),transparent 68%),
             radial-gradient(46% 38% at 82% 78%,rgba(184,135,60,.20),transparent 70%);
  clip-path:inset(0 round 24px);animation:planlight 9s ease-in-out infinite alternate}
.plan>*{position:relative;z-index:1}
@keyframes planlight{0%{transform:translate3d(-10%,-6%,0) scale(1)}100%{transform:translate3d(12%,8%,0) scale(1.15)}}
/* the price lands, rather than just sitting there */
.plan.hi{animation:planedge 9s ease-in-out infinite alternate}
@keyframes planedge{0%{box-shadow:0 18px 50px rgba(6,10,22,.28),0 0 0 1px rgba(184,135,60,.35)}
  100%{box-shadow:0 24px 64px rgba(6,10,22,.34),0 0 0 1.5px rgba(184,135,60,.6),0 0 26px rgba(184,135,60,.18)}}
.plan .pr{animation:pricein 5s ease-in-out infinite}
@keyframes pricein{0%,72%,100%{transform:none}80%{transform:scale(1.07)}88%{transform:scale(.99)}}
/* each promise ticks in, one after the next */
.plan ul li{position:relative}
/* the tick is always there; a warm glow just travels down the list */
.plan li::before{animation:tickglow 6s ease-in-out infinite;animation-delay:calc(var(--li,0) * 300ms)}
@keyframes tickglow{0%,100%{background:var(--tint-gold);color:var(--goldink);box-shadow:none;transform:none}
  46%{background:var(--gbtn);color:#fff;box-shadow:0 4px 14px rgba(184,135,60,.4);transform:scale(1.12)}}
.plan ul li:nth-child(1){--li:0}.plan ul li:nth-child(2){--li:1}.plan ul li:nth-child(3){--li:2}
.plan ul li:nth-child(4){--li:3}.plan ul li:nth-child(5){--li:4}.plan ul li:nth-child(6){--li:5}

@media(hover:hover){.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}}

/* ================= get started: a line drawn down the steps ================= */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:56px;top:26px;bottom:26px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),rgba(184,135,60,.15));transform-origin:top;transform:scaleY(0);
  animation:steplinedraw 6s ease-in-out infinite}
@keyframes steplinedraw{0%{transform:scaleY(0)}45%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.step{position:relative;z-index:1;animation:stepcard 6s ease-in-out infinite;animation-delay:calc(var(--s,0) * 700ms)}
@keyframes stepcard{0%,10%{border-color:var(--line2);transform:none}
  22%,80%{border-color:rgba(184,135,60,.55);transform:translateX(4px)}
  92%,100%{border-color:var(--line2);transform:none}}
.step::before{position:relative;animation:stepnum 6s ease-in-out infinite;animation-delay:calc(var(--s,0) * 700ms)}
.step:nth-child(1){--s:0}.step:nth-child(2){--s:1}.step:nth-child(3){--s:2}
.step:nth-child(4){--s:3}.step:nth-child(5){--s:4}.step:nth-child(6){--s:5}
@keyframes stepnum{0%,8%{background:var(--tint-gold);color:var(--goldink);transform:scale(1)}
  16%{transform:scale(1.12)}
  22%,84%{background:var(--gbtn);color:#fff;transform:scale(1);box-shadow:0 6px 16px rgba(184,135,60,.35)}
  94%,100%{background:var(--tint-gold);color:var(--goldink);box-shadow:none}}
@media(max-width:760px){ .steps::before{left:44px} }
@media (prefers-reduced-motion: reduce){
  .plan .tag,.plan .pr,.plan ul li,.plan.hi::after,.steps::before,.step::before{animation:none!important}
  .steps::before{transform:scaleY(1)}
}

/* ================= a scene per plan, the way the security cards do it ================= */
.plfx{position:relative;height:62px;margin:-6px 0 22px;display:flex;align-items:center;color:var(--gold)}

/* Free trial: thirty days handed over, one at a time */
.plfx-30{display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:11px;gap:5px;height:auto;max-width:230px}
.plfx-30 i{border-radius:3px;background:var(--line2);animation:p30 8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes p30{0%,3%{background:var(--line2);transform:scale(.86)}
  10%,70%{background:var(--gold);transform:scale(1)}
  84%,100%{background:var(--line2);transform:scale(.86)}}

/* Solo: one login, and everything circling it */
.plfx-one{justify-content:center}
.plfx-one .core{width:18px;height:18px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(184,135,60,.4);animation:pCore 4.4s ease-in-out infinite}
@keyframes pCore{0%,100%{box-shadow:0 0 0 0 rgba(184,135,60,.4)}55%{box-shadow:0 0 0 13px rgba(184,135,60,0)}}
.plfx-one i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;
  background:var(--gold);opacity:.75;animation:pOrbit 9s linear infinite;animation-delay:calc(var(--i) * -1.5s)}
@keyframes pOrbit{from{transform:rotate(0) translateX(44px) rotate(0)}to{transform:rotate(360deg) translateX(44px) rotate(-360deg)}}

/* Family: five people, each granted their own things */
.plfx-five{gap:16px;align-items:flex-end}
.plfx-five .pp{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.plfx-five .pp b{width:20px;height:20px;border-radius:50%;background:var(--line2);animation:pWho 6s ease-in-out infinite;animation-delay:var(--d)}
.plfx-five .pp em{width:26px;height:6px;border-radius:4px;background:var(--line2);animation:pGrant 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes pWho{0%,8%{background:var(--line2);transform:none}
  20%,72%{background:var(--gold);transform:translateY(-3px)}88%,100%{background:var(--line2);transform:none}}
@keyframes pGrant{0%,12%{background:var(--line2);width:14px}
  26%,72%{background:var(--gold);width:30px}88%,100%{background:var(--line2);width:14px}}

@media(max-width:760px){ .plfx{height:54px} .plfx-30{max-width:200px} }
@media (prefers-reduced-motion: reduce){
  .plfx *,.plfx{animation:none!important}
  .plfx-30 i,.plfx-five .pp b,.plfx-five .pp em{background:var(--gold)}
  .plfx-one i{display:none}
}

/* ---- scenes idle until they are actually on screen ----
   Seventy-two scenes with several hundred infinite animations were running at once,
   which is what took the page down half way through. They now start when they scroll
   into view and stop when they leave. */
.gsx *,.pfx *,.sfx *,.plfx *,.wfx *,
/* animation-play-state does not inherit, so pausing the container left every child
   animating: fifty scenes ran at once whether or not they were on screen. */
/* Nothing animates unless it is on screen. animation-play-state does not inherit, so
   the children have to be named too, or fifty scenes run at once behind your back. */
.gsx,.pfx,.sfx,.plfx,.wfx,.ifxt,.gsx *,.pfx *,.sfx *,.plfx *,.wfx *,.ifxt *{animation-play-state:paused}
.gsx.anim *,.pfx.anim *,.sfx.anim *,.plfx.anim *,.wfx.anim *,
.gsx.anim,.pfx.anim,.sfx.anim,.plfx.anim,.wfx.anim,.anim *{animation-play-state:running}
/* the interface tiles float only while the section is in view */
.ifxgrid.anim .ifxt,.ifxgrid.anim .ifxt *{animation-play-state:running}
/* offscreen rail cards cost nothing to keep around */
.gdeckrow .grail,#problem .kcard,#safety .kcard{content-visibility:auto;contain-intrinsic-size:560px 400px}

/* ---- mobile menu: the Appearance row carries no tile of its own ---- */
@media(max-width:900px){
  html .links .thm,html[data-theme="dark"] .links .thm,html[data-theme="light"] .links .thm,
  html .links .thm:hover,html .links .thm:active,html .links .thm:focus{background:transparent;box-shadow:none;outline:0}
  html .links .thm .sun,html .links .thm .moon,
  html[data-theme="dark"] .links .thm .sun,html[data-theme="dark"] .links .thm .moon{
    background:transparent;border:0;width:auto;height:auto;color:var(--gold)}
  .links .thm .sun svg,.links .thm .moon svg{width:19px;height:19px}
}

/* ---- the hero sits on the same deep blue as the bands below it ---- */
.mega{background:var(--soft)}   /* flat, the same blue as the bands below */

/* ---- a network drawn behind the words: nodes, links, and traffic ---- */
.netart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}
.hero-copy{position:relative;z-index:1}
.netart .nl{stroke:var(--gold);stroke-width:1;opacity:.10;stroke-dasharray:4 6;
  animation:netline 9s ease-in-out infinite;animation-delay:var(--d)}
@keyframes netline{0%,100%{opacity:.06}45%{opacity:.30}}
.netart .nn{fill:var(--gold);opacity:.35;animation:netnode 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes netnode{0%,100%{opacity:.22;transform:scale(.85)}50%{opacity:.9;transform:scale(1.15)}}
.netart .nn{transform-box:fill-box;transform-origin:center}
.netart .np{fill:var(--gold2);opacity:.85}
@media(max-width:760px){ .netart{opacity:.38} }
@media (prefers-reduced-motion: reduce){ .netart .nl,.netart .nn{animation:none} .netart .np{display:none} }

/* ================= the page loader: a network assembling, then curtains parting ================= */
html.plon,html.plon body{overflow:hidden}
#pl{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:#070C16;color:#fff;overflow:hidden}
html[data-theme="light"] #pl{background:#0A1120}
#pl .pl-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:plIn .7s cubic-bezier(.22,1,.36,1) both}
@keyframes plIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pl-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55}
.pl-l line{stroke:#C89A5C;stroke-width:1.1;stroke-dasharray:220;stroke-dashoffset:220;opacity:0;
  animation:plLine 2.4s cubic-bezier(.22,1,.36,1) forwards}
.pl-l line:nth-child(2){animation-delay:.07s}.pl-l line:nth-child(3){animation-delay:.14s}
.pl-l line:nth-child(4){animation-delay:.21s}.pl-l line:nth-child(5){animation-delay:.28s}
.pl-l line:nth-child(6){animation-delay:.35s}.pl-l line:nth-child(7){animation-delay:.42s}
.pl-l line:nth-child(8){animation-delay:.49s}.pl-l line:nth-child(9){animation-delay:.56s}
.pl-l line:nth-child(n+10){animation-delay:.63s}
@keyframes plLine{0%{opacity:0;stroke-dashoffset:220}35%{opacity:.6}100%{opacity:.34;stroke-dashoffset:0}}
.pl-d circle{fill:#E4BD80;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:plDot 1.8s ease-out forwards}
.pl-d circle:nth-child(odd){animation-delay:.28s}.pl-d circle:nth-child(even){animation-delay:.46s}
@keyframes plDot{0%{opacity:0;transform:scale(.2)}60%{opacity:1}100%{opacity:.65;transform:scale(1)}}
/* the mark: two rings closing around a core */
.pl-mark{position:relative;width:64px;height:64px}
.pl-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(200,154,92,.25);
  border-top-color:#C89A5C;animation:plSpin 1.5s cubic-bezier(.6,.1,.35,.9) infinite}
.pl-ring.two{inset:9px;border-color:rgba(228,189,128,.2);border-bottom-color:#E4BD80;
  animation:plSpin 2.1s linear infinite reverse}
@keyframes plSpin{to{transform:rotate(360deg)}}
.pl-core{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#E4BD80;
  animation:plCore 1.9s ease-in-out infinite}
@keyframes plCore{0%,100%{box-shadow:0 0 0 0 rgba(228,189,128,.45);transform:scale(1)}
  55%{box-shadow:0 0 0 14px rgba(228,189,128,0);transform:scale(1.12)}}
/* the wordmark, letter by letter */
.pl-word{font-size:clamp(28px,5vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1}
.pl-word b{color:#C89A5C;font-weight:800}
.pl-sub{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);
  opacity:0;animation:plIn .6s cubic-bezier(.22,1,.36,1) .45s both}
.pl-bar{width:min(220px,54vw);height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:4px}
.pl-bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);border-radius:2px;
  background:linear-gradient(90deg,#C89A5C,#E4BD80);animation:plBar 2.6s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes plBar{0%{transform:scaleX(0)}60%{transform:scaleX(.72)}100%{transform:scaleX(.96)}}
/* the exit: two curtains part, content is already behind them */
.pl-curtain{position:absolute;left:0;right:0;height:50%;background:#070C16;z-index:3;transition:transform .75s cubic-bezier(.7,0,.2,1)}
.pl-curtain.a{top:0}
.pl-curtain.b{bottom:0}
#pl.out .pl-in,#pl.out .pl-net{opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}
#pl.out .pl-curtain.a{transform:translateY(-100%)}
#pl.out .pl-curtain.b{transform:translateY(100%)}
#pl.out{pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .pl-l line{stroke-dashoffset:0;opacity:.3;animation:none}
  .pl-d circle,.pl-sub{opacity:.7;animation:none}
  .pl-ring,.pl-core,.pl-bar i{animation:none}
  .pl-bar i{transform:scaleX(.9)}
  #pl.out .pl-curtain{transition:none;transform:translateY(0);opacity:0}
}

/* ---- loader, second pass: the rings are gone; systems assemble instead ---- */
.pl-grid{width:104px;height:104px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;flex:0 0 auto}
.pl-grid i{border-radius:11px;background:linear-gradient(150deg,#E4BD80,#C89A5C);opacity:0;
  transform:scale(.3) rotate(-16deg);box-shadow:0 8px 20px rgba(200,154,92,.3);
  animation:plTile .85s cubic-bezier(.34,1.56,.5,1) forwards, plBreathe 3.4s ease-in-out infinite;
  animation-delay:calc(var(--n) * 115ms), calc(2.3s + var(--n) * 95ms)}
.pl-grid i:nth-child(5){background:linear-gradient(150deg,#fff,#E4BD80)}
@keyframes plTile{0%{opacity:0;transform:scale(.3) rotate(-16deg)}70%{opacity:1;transform:scale(1.09) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes plBreathe{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.74;filter:brightness(1.2)}}
/* the wordmark arrives a letter at a time, then a light passes over it */
.pl-word{position:relative;display:inline-flex;align-items:baseline;overflow:hidden}
.pl-word span{display:inline-block;opacity:0;transform:translateY(14px);
  animation:plLetter .6s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(1.35s + var(--n) * 95ms)}
.pl-word b{opacity:0;transform:translateY(14px);display:inline-block;
  animation:plLetter .6s cubic-bezier(.22,1,.36,1) 1.85s forwards}
@keyframes plLetter{to{opacity:1;transform:none}}
.pl-sheen{position:absolute;top:0;bottom:0;left:-40%;width:36%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:plSheen 2.4s ease-in-out 2.2s infinite}
@keyframes plSheen{0%{left:-40%}55%,100%{left:130%}}
.pl-sub{animation-delay:2.15s!important}
.pl-bar i{animation-duration:3.6s!important}
@media (prefers-reduced-motion: reduce){
  .pl-grid i{opacity:1;transform:none;animation:none}
  .pl-word span,.pl-word b{opacity:1;transform:none;animation:none}
  .pl-sheen{display:none}
}

/* ---- the loader reports what it is actually waiting for ---- */
.pl-meta{display:flex;align-items:baseline;justify-content:space-between;width:min(220px,54vw);margin-top:8px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pl-meta .pl-pct{font-weight:700;color:#E4BD80;font-variant-numeric:tabular-nums}
.pl-meta .pl-pct::after{content:"%";opacity:.5;margin-left:1px}
/* the bar is driven by real progress now, not a canned animation */
.pl-bar i{animation:none!important;width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
/* and the sequence lands quickly, so a fast page is not held up by choreography */
.pl-grid i{animation:plTile .5s cubic-bezier(.34,1.56,.5,1) forwards, plBreathe 2.8s ease-in-out infinite!important;
  animation-delay:calc(var(--n) * 55ms), calc(.9s + var(--n) * 70ms)!important}
.pl-word span{animation-delay:calc(.55s + var(--n) * 60ms)!important}
.pl-word b{animation-delay:.85s!important}
.pl-sub{animation-delay:.95s!important}
.pl-sheen{animation-delay:1.2s!important}


/* ================= Meet Miya: a scene inside each sliding card ================= */
.mfx{position:relative;height:56px;display:flex;align-items:center;margin-bottom:4px}
.mfx-ask{flex-direction:column;align-items:flex-start;gap:6px}
.mfx-ask .q{width:120px;height:11px;border-radius:6px;background:rgba(255,255,255,.7)}
.mfx-ask .a{height:8px;border-radius:5px;background:rgba(255,255,255,.28);width:170px;transform-origin:left;
  animation:mAsk 5s ease-in-out infinite;animation-delay:calc(var(--n) * 320ms)}
.mfx-ask .a:nth-of-type(3){width:140px}
@keyframes mAsk{0%,10%{transform:scaleX(0);opacity:0}30%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:0}}
.mfx-sun{justify-content:flex-start;padding-left:6px}
.mfx-sun .disc{width:30px;height:30px;border-radius:50%;background:#fff;animation:mRise 6s ease-in-out infinite}
@keyframes mRise{0%,100%{transform:translateY(14px);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.mfx-sun .ray{position:absolute;left:6px;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  animation:mRay 6s ease-out infinite}
.mfx-sun .ray.two{animation-delay:.8s}.mfx-sun .ray.three{animation-delay:1.6s}
@keyframes mRay{0%{transform:scale(.6);opacity:0}25%{opacity:.7}100%{transform:scale(2.2);opacity:0}}
.mfx-moon{gap:14px}
.mfx-moon .mn{width:26px;height:26px;border-radius:50%;background:#fff;animation:mBeat 5s ease-in-out infinite}
@keyframes mBeat{0%,100%{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
.mfx-moon i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.4;
  animation:mTwink 4s ease-in-out infinite;animation-delay:calc(var(--n) * 700ms)}
@keyframes mTwink{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
.mfx-wave{gap:5px;align-items:center}
.mfx-wave i{width:5px;height:10px;border-radius:3px;background:#fff;opacity:.85;
  animation:mWave 1.3s ease-in-out infinite;animation-delay:calc(var(--n) * 90ms)}
@keyframes mWave{0%,100%{height:9px;opacity:.5}50%{height:34px;opacity:1}}
.mfx-paper{flex-direction:column;align-items:flex-start;gap:5px}
.mfx-paper i{height:7px;border-radius:4px;background:rgba(255,255,255,.55);width:170px;
  animation:mFeed 5.5s ease-in-out infinite;animation-delay:calc(var(--n) * 300ms)}
.mfx-paper i:nth-child(2){width:130px}.mfx-paper i:nth-child(3){width:155px}.mfx-paper i:nth-child(4){width:110px}
@keyframes mFeed{0%{opacity:0;transform:translateY(8px)}25%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.mfx-save{gap:10px}
.mfx-save .bub{width:44px;height:26px;border-radius:9px 9px 3px 9px;background:rgba(255,255,255,.35)}
.mfx-save .arrow{width:22px;height:2px;background:#fff;position:relative;animation:mPush 4.4s ease-in-out infinite}
.mfx-save .arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg)}
@keyframes mPush{0%,100%{transform:translateX(-4px);opacity:.5}50%{transform:translateX(4px);opacity:1}}
.mfx-save .note{width:30px;height:36px;border-radius:5px;background:#fff;opacity:.85;animation:mLand 4.4s ease-in-out infinite}
@keyframes mLand{0%,35%{opacity:.35;transform:scale(.9)}55%,90%{opacity:.95;transform:scale(1)}100%{opacity:.35;transform:scale(.9)}}

/* ================= Inside the app: the six windows slide, each with a live pulse ================= */
.mskrail{align-items:stretch}
.mslide{flex:0 0 min(420px,86vw);width:min(420px,86vw);scroll-snap-align:start;position:relative;
  animation:mSlideIn .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--n) * 60ms)}
@keyframes mSlideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mfx-live{position:absolute;left:18px;bottom:14px;height:auto;gap:5px;align-items:flex-end;margin:0}
.mfx-live i{width:4px;height:8px;border-radius:2px;background:var(--gold);opacity:.85;animation:mWave 1.6s ease-in-out infinite}
.mfx-live i:nth-child(2){animation-delay:.2s}.mfx-live i:nth-child(3){animation-delay:.4s}
.mfx-live .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold2);margin-left:4px;
  animation:mPulse 2.4s ease-in-out infinite}
@keyframes mPulse{0%,100%{box-shadow:0 0 0 0 rgba(228,189,128,.45)}55%{box-shadow:0 0 0 9px rgba(228,189,128,0)}}
@media(max-width:760px){ .mslide{flex-basis:88vw;width:88vw} }
@media (prefers-reduced-motion: reduce){ .mfx *,.mfx,.mslide{animation:none!important} }

/* ---- the hero is flat navy in dark mode: the photo wash and the blurred blobs were
       what made it read as a light gradient, not the background color ---- */
html .mega{background:var(--soft)}
html[data-theme="dark"] .mega .heroart{display:none}
html[data-theme="dark"] .mega .hero-bg{display:none}
html[data-theme="dark"] .mega::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0%,rgba(200,154,92,.07),transparent 70%)}
.mega>.wrap,.mega .netart{position:relative;z-index:1}

/* ================= the board, as color and movement (full width) =================
   Everything is built from blocks that are two units wide and two units tall. Every
   variant fills its block exactly, so there is never a half row or a hole, at any width. */
.ifxwrap{padding:0}
.ifxpanel{position:relative;width:100%;margin:0 0 36px;content-visibility:auto;contain-intrinsic-size:auto 520px;
  padding:30px clamp(14px,3vw,40px);overflow:hidden;border-radius:0}
.ifxglow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38% 62% at 16% 18%,rgba(200,154,92,.16),transparent 72%),
             radial-gradient(36% 58% at 84% 80%,rgba(120,160,220,.14),transparent 74%)}
/* eight square blocks: four across, then two, then one. Each division is exact. */
.ifxgrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ifxblk{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:1;
  container-type:inline-size}
.ifxt{position:relative;display:flex;align-items:center;justify-content:center;border-radius:14px;overflow:hidden;
  color:#fff;min-width:0;min-height:0;
  animation:ifxFloat 7s ease-in-out infinite;animation-delay:calc(var(--i) * 240ms);
  background:radial-gradient(130% 100% at 20% 6%,hsla(var(--h),92%,80%,.32),transparent 60%),
             linear-gradient(155deg,hsl(var(--h),62%,56%),hsl(var(--h),58%,44%));
  box-shadow:inset 0 1px 0 hsla(var(--h),92%,88%,.3), 0 14px 30px hsla(var(--h),60%,10%,.28)}
html[data-theme="light"] .ifxt{color:hsl(var(--h),64%,26%);
  background:radial-gradient(130% 100% at 20% 6%,hsla(0,0%,100%,.96),transparent 62%),
             linear-gradient(150deg,hsl(var(--h),72%,92%),hsl(var(--h),56%,82%));
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.95), 0 12px 26px hsla(var(--h),44%,52%,.2)}
@keyframes ifxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* the four shapes, each one exactly filling its part of the block */
.ifxt-l{grid-column:1 / span 2;grid-row:1 / span 2}
.ifxt-w{grid-column:1 / span 2;grid-row:1}
.ifxt-t{grid-column:1;grid-row:1 / span 2}
.ifxt-s{grid-column:auto;grid-row:auto}
/* a highlight crosses a few of them, not all at once */
.ifxt:nth-child(3n+1)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,hsla(0,0%,100%,.2) 48%,transparent 62%);
  transform:translateX(-130%);animation:ifxSweep 12s ease-in-out infinite;animation-delay:calc(var(--i) * 800ms)}
@keyframes ifxSweep{0%,82%{transform:translateX(-130%)}93%,100%{transform:translateX(130%)}}
@media(hover:hover){ .ifxt:hover{transform:translateY(-5px) scale(1.03);transition:transform .2s cubic-bezier(.22,1,.36,1)} }
/* A scene is laid out in a box up to 172px wide; a small tile on a phone is about 75px,
   so left alone it is simply cut off at the tile edge. Each scene gets one fixed box,
   centred, scaled to what the tile can hold. The scale follows the block's own width
   rather than the viewport, so it is right at every size instead of at chosen ones. */
.ifxt{padding:8px}
.ifxt .gsx{width:150px;height:44px;margin:0;flex:0 0 auto;justify-content:center;overflow:visible;
  opacity:.94;transform:scale(var(--ifxs,.22));transform-origin:center}
.ifxt-l .gsx,.ifxt-t .gsx,.ifxt-w .gsx{--ifxs:.55}
@container (min-width:150px){ .ifxt .gsx{--ifxs:.32} .ifxt-l .gsx,.ifxt-t .gsx,.ifxt-w .gsx{--ifxs:.68} }
@container (min-width:210px){ .ifxt .gsx{--ifxs:.52} .ifxt-l .gsx,.ifxt-t .gsx,.ifxt-w .gsx{--ifxs:.85} }
@container (min-width:280px){ .ifxt .gsx{--ifxs:.68} .ifxt-l .gsx,.ifxt-t .gsx,.ifxt-w .gsx{--ifxs:1.05} }
@container (min-width:340px){ .ifxt .gsx{--ifxs:.78} .ifxt-l .gsx,.ifxt-t .gsx,.ifxt-w .gsx{--ifxs:1.2} }
@media(prefers-reduced-motion:reduce){
  .ifxt,.ifxt::after{animation:none}
  .ifxt::after{opacity:0}
}
@media(max-width:1100px){
  .ifxgrid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:640px){
  .ifxpanel{padding:22px 12px}
  .ifxgrid{grid-template-columns:repeat(2,1fr);gap:9px}
  .ifxblk{gap:8px}
  .ifxt{border-radius:11px;padding:6px}
  .ifxblk{gap:8px}
}

/* Scenes whose children are absolutely placed need the band to be their positioning
   context and to fill its width; those built from flex children need a resting size so
   they are visible before, during and after their animation. */
.sfx-tile,.sfx-dawn,.sfx-dusk,.sfx-paper,.sfx-save,.sfx-pin,.sfx-live,.sfx-swap,.sfx-preset,.sfx-spark,.sfx-hop,.sfx-ask{
  display:block;width:100%;height:112px}
.sfx-board,.sfx-cal{width:100%;height:112px}
.sfx-wave{width:100%;align-items:center}
.sfx-wave i{min-width:7px;height:16px}
.sfx-train{width:100%;height:112px;align-items:flex-end}
.sfx-train i{min-width:10px;height:var(--h,40px)}
.sfx-board i,.sfx-cal i{min-height:0}
.sfx-panes{width:100%;height:96px}
.sfx-panes .pn{min-width:40px}
.sfx-wire{width:100%}
.sfx-feed{width:100%;height:112px;justify-content:center}
.sfx-cmd{width:100%;display:block}
.sfx-cmd .bar{width:100%}
.sfx-recent,.sfx-brief{width:100%;height:112px;justify-content:center}
.sfx-palette,.sfx-hue,.sfx-key,.sfx-corner,.sfx-star{width:100%;height:112px}

/* Verified in the browser: .sfx centres its children, which collapses grid scenes to
   nothing, and a few scenes had no resting size so they were invisible between beats. */
.sfx-board{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:7px;padding:8px 0;align-items:stretch}
.sfx-cal{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:5px;padding:12px 0;align-items:stretch}
.sfx-board i{min-height:18px}
.sfx-cal i{aspect-ratio:1;justify-self:center;width:100%;max-width:22px}
.sfx-panes{align-items:stretch;padding:12px 0}
.sfx-panes .pn{height:auto}
.sfx-dawn .sun{bottom:10px}
.sfx-dawn .hz{bottom:34px}
.sfx-dawn .task{width:104px}
.sfx-save .tray{width:100%}
.sfx-save .it{top:10px}

/* A card is a fixed-height slide, so a long title used to push its rows out of the bottom.
   It keeps its size as a minimum and grows only when it genuinely has to. */
.kcard{height:auto;min-height:500px}

/* "On the tile": the job itself, ticked where it sits, without opening anything */
.sfx-tap2{position:relative;display:block;width:100%;height:112px}
.sfx-tap2 .card{position:absolute;left:0;top:14px;width:190px;height:84px;border-radius:14px;
  background:linear-gradient(155deg,rgba(255,255,255,.26),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.26);animation:tapPress 4s cubic-bezier(.3,0,.3,1) infinite}
.sfx-tap2 .box{position:absolute;left:16px;top:20px;width:22px;height:22px;border-radius:7px;
  border:2px solid rgba(255,255,255,.8)}
.sfx-tap2 .tick{position:absolute;left:5px;top:8px;width:7px;height:12px;border:2.5px solid #fff;
  border-top:0;border-left:0;transform:rotate(42deg) scale(0);transform-origin:center;
  animation:tapTick 4s cubic-bezier(.3,1.5,.4,1) infinite}
.sfx-tap2 .ln{position:absolute;left:50px;top:26px;height:8px;width:112px;border-radius:4px;
  background:rgba(255,255,255,.8);animation:tapStrike 4s ease-in-out infinite}
.sfx-tap2 .ln.short{top:48px;width:74px;background:rgba(255,255,255,.34);animation:none}
.sfx-tap2 .ripple{position:absolute;left:16px;top:20px;width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);opacity:0;animation:tapRip 4s ease-out infinite}
@keyframes tapPress{0%,40%{transform:scale(1)}48%{transform:scale(.975)}58%,100%{transform:scale(1)}}
@keyframes tapTick{0%,46%{transform:rotate(42deg) scale(0)}60%{transform:rotate(42deg) scale(1.15)}70%,92%{transform:rotate(42deg) scale(1)}100%{transform:rotate(42deg) scale(0)}}
@keyframes tapStrike{0%,52%{opacity:.85;width:112px}66%,92%{opacity:.4;width:112px}100%{opacity:.85}}
@keyframes tapRip{0%,42%{transform:scale(.5);opacity:0}52%{opacity:.85}82%,100%{transform:scale(3.6);opacity:0}}

/* "It follows you": a phone hands the work to a laptop, which wakes to receive it */
.sfx-hand{position:relative;display:block;width:100%;height:112px}
.sfx-hand .ph{position:absolute;left:6px;bottom:16px;width:40px;height:68px;border-radius:9px;
  border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.10)}
.sfx-hand .ph i{position:absolute;inset:6px 5px 10px;border-radius:4px;background:rgba(255,255,255,.55);
  animation:handFrom 4.6s ease-in-out infinite}
.sfx-hand .lp{position:absolute;right:6px;bottom:22px;width:112px;height:66px;border-radius:8px;
  border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.10)}
.sfx-hand .lp::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-9px;height:5px;
  border-radius:3px;background:rgba(255,255,255,.6)}
.sfx-hand .lp i{position:absolute;inset:6px;border-radius:4px;background:rgba(255,255,255,.2);
  animation:handTo 4.6s ease-in-out infinite}
.sfx-hand .path{position:absolute;left:52px;right:126px;top:26px;height:34px;
  border-top:2px dashed rgba(255,255,255,.32);border-radius:50%/100% 100% 0 0}
.sfx-hand .pip{position:absolute;left:52px;top:24px;width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.9);opacity:0;
  animation:handPip 4.6s cubic-bezier(.4,0,.4,1) infinite;animation-delay:var(--d,0ms);
  offset-path:none}
@keyframes handFrom{0%,14%{background:rgba(255,255,255,.75)}40%,100%{background:rgba(255,255,255,.2)}}
@keyframes handTo{0%,52%{background:rgba(255,255,255,.2)}70%,100%{background:rgba(255,255,255,.7)}}
@keyframes handPip{0%{left:52px;top:34px;opacity:0;transform:scale(.6)}
  10%{opacity:1;transform:scale(1)}
  50%{top:16px}
  84%{left:calc(100% - 132px);top:34px;opacity:1}
  92%,100%{left:calc(100% - 132px);top:34px;opacity:0}}

@media(prefers-reduced-motion:reduce){
  .sfx-tap2 .card,.sfx-tap2 .tick,.sfx-tap2 .ln,.sfx-tap2 .ripple,
  .sfx-hand .ph i,.sfx-hand .lp i,.sfx-hand .pip{animation:none}
  .sfx-tap2 .tick{transform:rotate(42deg) scale(1)}
  .sfx-hand .pip{opacity:1;left:50%}
}

/* ============================================================
   What's new  (v130)
   Seven cards in the house idiom: gradient face, pure CSS
   demonstration, plus button to a modal. No app screenshots.
   ============================================================ */
.kc-nlock{background:radial-gradient(130% 120% at 84% -10%,#8FA7C8 0%,#3E5471 34%,#161E2B 72%,#0B1018 100%)}
.kc-nsnap{background:radial-gradient(130% 120% at 84% -10%,#7FC0B4 0%,#356D63 34%,#12241F 72%,#0A1310 100%)}
.kc-ntile{background:radial-gradient(130% 120% at 84% -10%,#E4BD80 0%,#9A6E2E 34%,#241B0E 72%,#120E07 100%)}
.kc-nway{background:radial-gradient(130% 120% at 84% -10%,#C89ADA 0%,#6B4483 34%,#22182A 72%,#110C15 100%)}
.kc-ntour{background:radial-gradient(130% 120% at 84% -10%,#8FB6E4 0%,#3C5F8C 34%,#141F2E 72%,#0A1017 100%)}
.kc-nwire{background:radial-gradient(130% 120% at 84% -10%,#E39C9C 0%,#8A4141 34%,#2A1616 72%,#150B0B 100%)}
.kc-nfast{background:radial-gradient(130% 120% at 84% -10%,#D8CE7C 0%,#8A7F2A 34%,#242110 72%,#121007 100%)}

#whatsnew .khead .lede{max-width:640px;margin-top:10px}

/* the lock: a clock, a shackle closing, a PIN filling in */
.nfx-lock{width:100%;height:112px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.nfx-lock .nl-face{text-align:center;color:#fff;line-height:1.1;animation:nlfade 5s ease-in-out infinite}
.nfx-lock .nl-face b{display:block;font-size:26px;font-weight:300;letter-spacing:.01em}
.nfx-lock .nl-face i{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.66}
.nfx-lock .nl-shackle{position:absolute;top:16px;width:26px;height:18px;border:3px solid rgba(255,255,255,.85);
  border-bottom:0;border-radius:14px 14px 0 0;opacity:0;animation:nlshackle 5s ease-in-out infinite}
.nfx-lock .nl-body{position:absolute;top:33px;width:38px;height:30px;border-radius:8px;background:rgba(255,255,255,.9);
  opacity:0;animation:nlbody 5s ease-in-out infinite;display:flex;align-items:center;justify-content:center}
.nfx-lock .nl-body em{width:4px;height:9px;border-radius:2px;background:rgba(20,26,38,.75)}
.nfx-lock .nl-dots{display:flex;gap:9px;margin-top:4px}
.nfx-lock .nl-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);
  animation:nldot 5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes nlfade{0%,42%{opacity:1}52%,100%{opacity:0}}
@keyframes nlshackle{0%,46%{opacity:0;transform:translateY(6px)}56%,88%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes nlbody{0%,48%{opacity:0;transform:scale(.86)}58%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes nldot{0%,58%{background:transparent}70%,88%{background:rgba(255,255,255,.92)}100%{background:transparent}}

/* snap: four panes arriving into a grid */
.nfx-snap{width:100%;height:112px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px}
.nfx-snap i{border-radius:9px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);
  /* sized outright rather than leaning on grid stretch, which was not reaching
     these and left four hairlines where four panes should be */
  display:block;width:100%;height:100%;align-self:stretch;justify-self:stretch;min-height:0;
  transform:scale(.6);opacity:0;animation:nsnap 4.2s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--d)}
@keyframes nsnap{0%{transform:scale(.6);opacity:0}18%,74%{transform:scale(1);opacity:1}92%,100%{transform:scale(.6);opacity:0}}

/* tiles: a small board of live tiles, one of them a picture */
.nfx-tile{width:100%;height:138px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:9px;align-items:stretch;justify-items:stretch}
.nfx-tile .nt{width:100%;height:100%;min-height:0;border-radius:12px;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.24);padding:9px 11px;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:1px;color:#fff;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.14);animation:ntpop 5s ease-in-out infinite}
.nfx-tile .nt b{font-size:20px;font-weight:400;line-height:1.05;letter-spacing:-.01em}
.nfx-tile .nt i{font-style:normal;font-size:9.5px;opacity:.72;letter-spacing:.05em;line-height:1.2}
.nfx-tile .s1{animation-delay:0ms}.nfx-tile .s2{animation-delay:120ms}
.nfx-tile .s3{animation-delay:240ms}.nfx-tile .s4{animation-delay:360ms}
/* the picture tile: a photo, not an empty slab */
.nfx-tile .pic{padding:0;border-color:rgba(255,255,255,.3);position:relative;
  background:linear-gradient(150deg,#6E97CE 0%,#A9789E 52%,#D2A06A 100%)}
.nfx-tile .pic em{position:absolute;right:9px;top:9px;width:13px;height:13px;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.nfx-tile .pic:after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(12,10,8,.42))}
@keyframes ntpop{0%{transform:translateY(7px);opacity:0}16%,80%{transform:translateY(0);opacity:1}96%,100%{transform:translateY(7px);opacity:0}}

/* the way back: a question, an answer filling, a code */
.nfx-key{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:11px;color:#fff}
.nfx-key .nk-q{font-size:13px;opacity:.9}
.nfx-key .nk-a{display:flex;gap:6px}
.nfx-key .nk-a i{width:15px;height:20px;border-radius:4px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);animation:nkfill 4.6s ease-in-out infinite}
.nfx-key .nk-a i:nth-child(1){animation-delay:0ms}.nfx-key .nk-a i:nth-child(2){animation-delay:90ms}
.nfx-key .nk-a i:nth-child(3){animation-delay:180ms}.nfx-key .nk-a i:nth-child(4){animation-delay:270ms}
.nfx-key .nk-a i:nth-child(5){animation-delay:360ms}.nfx-key .nk-a i:nth-child(6){animation-delay:450ms}
.nfx-key .nk-a i:nth-child(7){animation-delay:540ms}
.nfx-key .nk-code{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.1em;opacity:.62}
@keyframes nkfill{0%,10%{background:rgba(255,255,255,.16)}26%,72%{background:rgba(255,255,255,.92)}88%,100%{background:rgba(255,255,255,.16)}}

/* answers: a half typed question and results settling under it */
.nfx-ask{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:6px;color:#fff;align-items:stretch;overflow:hidden}
.nfx-ask .na-in{font-size:12.5px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);display:flex;align-items:center}
.nfx-ask .na-in .cur{width:1.5px;height:13px;background:#fff;margin-left:3px;animation:nacur 1.1s steps(1) infinite}
.nfx-ask .na-r{font-size:10.5px;padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.1);
  opacity:0;transform:translateY(5px);animation:nares 4.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes nacur{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes nares{0%{opacity:0;transform:translateY(5px)}22%,76%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(5px)}}

/* connected: one record, three lines drawing out to what it touches */
.nfx-wire{width:100%;height:112px;position:relative;display:flex;flex-direction:column;align-items:center;color:#fff}
.nfx-wire .nw-c{font-size:12px;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.32)}
.nfx-wire svg{position:absolute;top:24px;left:0;width:100%;height:58px;overflow:visible}
.nfx-wire .ln{fill:none;stroke:rgba(255,255,255,.78);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:130;stroke-dashoffset:130;
  animation:nwdraw 4.6s ease-in-out infinite;animation-delay:var(--d,0ms)}
.nfx-wire .nw-row{display:flex;gap:6px;margin-top:auto;padding-bottom:2px}
.nfx-wire .nw-row i{font-style:normal;font-size:9.5px;padding:5px 7px;border-radius:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);opacity:0;
  animation:nwchip 4.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes nwdraw{0%{stroke-dashoffset:130}30%,76%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:130}}
@keyframes nwchip{0%{opacity:0;transform:translateY(5px)}34%,76%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(5px)}}

/* speed: the old bar draining down to the new one */
.nfx-fast{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:11px;color:#fff;align-items:stretch}
.nfx-fast .nf-bar{width:100%;position:relative;height:26px;border-radius:7px;background:rgba(255,255,255,.12);overflow:hidden;
  display:flex;align-items:center}
.nfx-fast .nf-bar b{position:relative;z-index:2;font-size:11px;font-weight:500;padding-left:10px;letter-spacing:.04em}
.nfx-fast em{position:absolute;left:0;top:0;bottom:0;border-radius:7px}
.nfx-fast .was{width:100%;background:rgba(255,255,255,.3);animation:nfwas 4.4s ease-in-out infinite}
.nfx-fast .is{width:9%;background:linear-gradient(90deg,#EFE3A0,#C9B24E);animation:nfis 4.4s ease-in-out infinite}
.nfx-fast .nf-note{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
@keyframes nfwas{0%,14%{width:0}40%,80%{width:100%}96%,100%{width:0}}
@keyframes nfis{0%,22%{width:0}44%,80%{width:9%}96%,100%{width:0}}

@media(max-width:760px){
  .nfx-lock,.nfx-snap,.nfx-key,.nfx-ask,.nfx-wire,.nfx-fast{height:112px}
  .nfx-tile{height:124px;gap:8px}
  .nfx-tile .nt b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .nfx-lock .nl-face,.nfx-lock .nl-shackle,.nfx-lock .nl-body,.nfx-lock .nl-dots i,
  .nfx-snap i,.nfx-tile .nt,.nfx-key .nk-a i,.nfx-ask .na-in .cur,.nfx-ask .na-r,
  .nfx-wire .ln,.nfx-wire .nw-row i,.nfx-fast .was,.nfx-fast .is{animation:none!important}
  .nfx-lock .nl-face{opacity:1}
  .nfx-lock .nl-shackle,.nfx-lock .nl-body{opacity:0}
  .nfx-snap i,.nfx-tile .nt,.nfx-ask .na-r,.nfx-wire .nw-row i{opacity:1;transform:none}
  .nfx-key .nk-a i{background:rgba(255,255,255,.92)}
  .nfx-wire .ln{stroke-dashoffset:0}
  .nfx-fast .was{width:100%}.nfx-fast .is{width:9%}
}

/* ---- three more What's new cards (v131) ---- */
.kc-nsay{background:radial-gradient(130% 120% at 84% -10%,#E0A97C 0%,#8A522A 34%,#2A1A0F 72%,#150D07 100%)}
.kc-nthumb{background:radial-gradient(130% 120% at 84% -10%,#8ED0C0 0%,#3B7A6B 34%,#142622 72%,#0A1311 100%)}
.kc-nroom{background:radial-gradient(130% 120% at 84% -10%,#A9A0DC 0%,#544B86 34%,#1D1930 72%,#0F0C18 100%)}

/* a notice that appears, with the action beside it */
.nfx-say{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:10px;
  align-items:stretch;color:#fff}
.nfx-say .ns-bar{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:11px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  animation:nsIn 4.6s ease-in-out infinite}
.nfx-say .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#F0C27B;
  box-shadow:0 0 0 4px rgba(240,194,123,.22);animation:nsPulse 1.8s ease-in-out infinite}
.nfx-say .ns-t{font-size:11.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfx-say .ns-do{font-size:10px;padding:4px 8px;border-radius:7px;flex:0 0 auto;
  background:rgba(255,255,255,.9);color:#2A1A0F;letter-spacing:.02em}
.ns-sub{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
@keyframes nsIn{0%{opacity:0;transform:translateY(6px)}18%,82%{opacity:1;transform:translateY(0)}98%,100%{opacity:0;transform:translateY(6px)}}
@keyframes nsPulse{0%,100%{box-shadow:0 0 0 4px rgba(240,194,123,.22)}50%{box-shadow:0 0 0 7px rgba(240,194,123,.08)}}

/* a small target growing into a real one */
.nfx-thumb{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:11px;
  align-items:flex-start;color:#fff}
.nfx-thumb .nb{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);font-size:10.5px;letter-spacing:.03em}
.nfx-thumb .small{height:21px;padding:0 12px;opacity:.5}
.nfx-thumb .big{height:44px;padding:0 20px;position:relative;background:rgba(255,255,255,.24);
  animation:nbGrow 4.4s ease-in-out infinite}
.nfx-thumb .big i{position:absolute;right:-9px;bottom:-9px;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.9);animation:nbTap 4.4s ease-in-out infinite}
@keyframes nbGrow{0%,12%{height:21px}30%,86%{height:44px}98%,100%{height:21px}}
@keyframes nbTap{0%,30%{transform:scale(.4);opacity:0}44%{transform:scale(1);opacity:.95}62%,100%{transform:scale(1.5);opacity:0}}

/* a shelf that keeps taking pictures - deliberately no meter, no ceiling,
   no sense that adding one costs you another */
.nfx-room{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:12px;
  align-items:stretch;color:#fff}
.nfx-room .nr-shelf{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;
  gap:8px;height:92px}
.nfx-room .nr-shelf i{border-radius:9px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.26);box-shadow:0 2px 8px rgba(0,0,0,.16);
  opacity:0;transform:scale(.82);animation:nrIn 5.4s cubic-bezier(.22,1,.36,1) infinite}
.nfx-room .nr-shelf i:after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,transparent,rgba(10,8,16,.4))}
.nfx-room .p1{background:linear-gradient(150deg,#7E9AD6,#B98FC0);animation-delay:0ms}
.nfx-room .p2{background:linear-gradient(150deg,#D6A97E,#C77E7E);animation-delay:150ms}
.nfx-room .p3{background:linear-gradient(150deg,#8CC7B4,#5E93B8);animation-delay:300ms}
.nfx-room .p4{background:linear-gradient(150deg,#C9B27E,#A88ACB);animation-delay:450ms}
.nfx-room .p5{background:linear-gradient(150deg,#9DB6E0,#7EC0A8);animation-delay:600ms}
.nfx-room .p6{background:linear-gradient(150deg,#D69BB4,#8E86CC);animation-delay:750ms}
@keyframes nrIn{0%{opacity:0;transform:scale(.82)}14%,84%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.82)}}

@media(max-width:760px){ .nfx-say,.nfx-thumb,.nfx-room{height:112px} }
@media(prefers-reduced-motion:reduce){
  .nfx-say .ns-bar,.nfx-say .dot,.nfx-thumb .big,.nfx-thumb .big i,
  .nfx-room .nr-shelf i{animation:none!important}
  .nfx-say .ns-bar{opacity:1;transform:none}
  .nfx-thumb .big{height:44px}.nfx-thumb .big i{opacity:0}
  .nfx-room .nr-shelf i{opacity:1;transform:none}
}

/* ------------------------------------------------------------------
   A badge that escaped its wrapper, corrected from the stylesheet.

   The markup fix (moving <i> inside .aico) is the real one. This is
   here so a page still serving the OLD html renders correctly the
   moment this stylesheet loads, rather than waiting for the html to
   be re-uploaded and un-cached.

   Guarded by @supports: where :has() is unavailable nothing changes,
   so the worst case stays exactly as it is today rather than losing
   the badge altogether.
   ------------------------------------------------------------------ */
@supports selector(:has(*)){
  .aico:has(+ i)::after{content:"\2728";position:absolute;right:-7px;top:-7px;
    font-style:normal;font-size:15px;line-height:1;pointer-events:none;
    filter:drop-shadow(0 2px 4px rgba(20,14,4,.28))}
  .aico + i{display:none}
}
@media(max-width:760px){
  @supports selector(:has(*)){ .aico:has(+ i)::after{font-size:13px;right:-5px;top:-5px} }
}

/* ------------------------------------------------------------------
   Footer links on a phone.

   Measured at 390px: every one of the eleven was 354 wide and 22 tall.
   Full width is not the problem; height is. A 22px row is half what a
   thumb needs, and the footer is where Security, Privacy and Terms
   live, so these are links people reach for deliberately.

   Scoped to coarse pointers, so the desktop footer keeps its tighter
   rhythm.
   ------------------------------------------------------------------ */
@media(max-width:760px) and (pointer:coarse){
  .fcol a{display:flex;align-items:center;min-height:40px}
}

/* ============================================================
   What's new — six additions from the calls and systems work.
   Same rules as every other scene here: drawn in CSS, no images,
   no JS, and each one occupies the standard 112px block so the
   rail lines up.
   ============================================================ */

/* Video calls: a face panel with a self-view tucked into the corner,
   because that little rectangle is the thing that tells you the
   camera is really on. */
.nfx-vid{width:100%;height:112px;display:flex;align-items:center;justify-content:center}
.nfx-vid .nv-stage{position:relative;width:186px;height:106px;border-radius:12px;overflow:hidden;
  background:linear-gradient(150deg,#4E6FA8,#7E5E9C);border:1px solid rgba(255,255,255,.24);
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.nfx-vid .nv-head{position:absolute;left:50%;top:26px;width:38px;height:38px;margin-left:-19px;
  border-radius:50%;background:rgba(255,255,255,.72)}
.nfx-vid .nv-body{position:absolute;left:50%;bottom:0;width:74px;height:36px;margin-left:-37px;
  border-radius:38px 38px 0 0;background:rgba(255,255,255,.58)}
.nfx-vid .nv-self{position:absolute;right:8px;bottom:8px;width:52px;height:34px;border-radius:7px;
  background:linear-gradient(150deg,#D6A97E,#C77E7E);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 3px 9px rgba(0,0,0,.28);animation:nvSelf 4.8s ease-in-out infinite}
.nfx-vid .nv-self:after{content:"";position:absolute;left:50%;top:7px;width:13px;height:13px;
  margin-left:-6.5px;border-radius:50%;background:rgba(255,255,255,.8)}
.nfx-vid .nv-dot{position:absolute;left:10px;top:10px;width:8px;height:8px;border-radius:50%;
  background:#5FD08A;box-shadow:0 0 0 0 rgba(95,208,138,.6);animation:nvLive 2.2s ease-out infinite}
@keyframes nvSelf{0%,72%{opacity:0;transform:translateY(6px) scale(.9)}
  80%,100%{opacity:1;transform:none}}
@keyframes nvLive{0%{box-shadow:0 0 0 0 rgba(95,208,138,.55)}
  70%,100%{box-shadow:0 0 0 9px rgba(95,208,138,0)}}

/* Presence: four dots that differ by SHAPE as well as color, because
   color alone is no use to anyone who cannot separate red from green. */
.nfx-pres{width:100%;height:112px;display:flex;align-items:center;justify-content:center;gap:16px}
.nfx-pres span{display:flex;flex-direction:column;align-items:center;gap:7px;
  font:600 10px/1 ui-sans-serif,system-ui;color:rgba(255,255,255,.82);letter-spacing:.04em;
  opacity:0;animation:npIn 5s ease-out infinite}
.nfx-pres i{width:17px;height:17px;border-radius:50%;display:block}
.nfx-pres .p-on i{background:#5FD08A}
.nfx-pres .p-busy i{background:#D2504B}
.nfx-pres .p-away i{background:transparent;border:3px solid #E0A33E}
.nfx-pres .p-off i{background:transparent;border:3px solid rgba(255,255,255,.42)}
.nfx-pres .p-on{animation-delay:0ms}.nfx-pres .p-busy{animation-delay:140ms}
.nfx-pres .p-away{animation-delay:280ms}.nfx-pres .p-off{animation-delay:420ms}
@keyframes npIn{0%{opacity:0;transform:translateY(7px)}
  12%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}

/* Cook mode: one step, big, with the ingredients ticking off beside it. */
.nfx-cook{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:9px;color:#fff}
.nfx-cook .nc-step{font:600 15px/1.3 ui-serif,Georgia,serif;color:rgba(255,255,255,.95)}
.nfx-cook .nc-ing{display:flex;flex-direction:column;gap:6px}
.nfx-cook .nc-ing b{display:flex;align-items:center;gap:8px;font:500 11px/1 ui-sans-serif,system-ui;
  color:rgba(255,255,255,.72)}
.nfx-cook .nc-ing b:before{content:"";width:13px;height:13px;border-radius:4px;
  border:2px solid rgba(255,255,255,.5);background:transparent;transition:none;
  animation:ncTick 5.2s ease-out infinite}
.nfx-cook .nc-ing b:nth-child(1):before{animation-delay:400ms}
.nfx-cook .nc-ing b:nth-child(2):before{animation-delay:1000ms}
.nfx-cook .nc-ing b:nth-child(3):before{animation-delay:1600ms}
@keyframes ncTick{0%,8%{background:transparent;border-color:rgba(255,255,255,.5)}
  16%,92%{background:#5FD08A;border-color:#5FD08A}
  100%{background:transparent;border-color:rgba(255,255,255,.5)}}

/* A set at a time: rows filling in, with the rest clock counting down. */
.nfx-lift{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.nfx-lift .nl-row{display:flex;align-items:center;gap:8px;
  font:600 11px/1 ui-sans-serif,system-ui;color:rgba(255,255,255,.86)}
.nfx-lift .nl-row em{font-style:normal;width:16px;color:rgba(255,255,255,.5)}
.nfx-lift .nl-row s{text-decoration:none;padding:4px 9px;border-radius:6px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.nfx-lift .nl-row u{text-decoration:none;margin-left:auto;padding:4px 9px;border-radius:6px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.55);font-size:10px}
.nfx-lift .nl-row.done u{background:#5FD08A;color:#0A2216}
.nfx-lift .r1{animation:nlIn 5.4s ease-out infinite;animation-delay:200ms;opacity:0}
.nfx-lift .r2{animation:nlIn 5.4s ease-out infinite;animation-delay:900ms;opacity:0}
.nfx-lift .nl-rest{font:600 10px/1 ui-sans-serif,system-ui;color:#E0A33E;letter-spacing:.06em;
  animation:nlIn 5.4s ease-out infinite;animation-delay:1600ms;opacity:0}
@keyframes nlIn{0%{opacity:0;transform:translateX(-6px)}
  10%,88%{opacity:1;transform:none}100%{opacity:0}}

/* Supply: a bottle emptying, which is the whole point — you can see it
   coming before it happens. */
.nfx-pill{width:100%;height:112px;display:flex;align-items:center;justify-content:center;gap:18px}
.nfx-pill .np-jar{position:relative;width:56px;height:78px;border-radius:10px 10px 13px 13px;
  border:2px solid rgba(255,255,255,.5);overflow:hidden;background:rgba(255,255,255,.06)}
.nfx-pill .np-jar:before{content:"";position:absolute;left:12px;top:-9px;width:32px;height:9px;
  border-radius:3px 3px 0 0;background:rgba(255,255,255,.5)}
.nfx-pill .np-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#8CC7B4,#5E93B8);
  animation:npDrain 5.6s ease-in-out infinite}
.nfx-pill .np-txt{font:600 11px/1.5 ui-sans-serif,system-ui;color:rgba(255,255,255,.82)}
.nfx-pill .np-txt b{display:block;font-size:19px;color:#fff}
.nfx-pill .np-txt s{text-decoration:none;display:block;color:#E0A33E;font-size:10px;
  animation:npWarn 5.6s ease-out infinite}
@keyframes npDrain{0%{height:86%}70%{height:22%}100%{height:86%}}
@keyframes npWarn{0%,58%{opacity:0}70%,94%{opacity:1}100%{opacity:0}}

/* A pipeline: cards moving right, one column at a time. */
.nfx-pipe{width:100%;height:112px;display:flex;align-items:stretch;gap:7px}
.nfx-pipe .nq-col{flex:1;border-radius:9px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);padding:7px 6px;display:flex;flex-direction:column;gap:5px}
.nfx-pipe .nq-col b{font:600 8.5px/1 ui-sans-serif,system-ui;color:rgba(255,255,255,.6);
  letter-spacing:.05em;text-transform:uppercase}
.nfx-pipe .nq-card{height:19px;border-radius:5px;background:linear-gradient(150deg,#7E9AD6,#B98FC0);
  box-shadow:0 2px 6px rgba(0,0,0,.2)}
.nfx-pipe .nq-move{animation:nqMove 5.4s cubic-bezier(.22,1,.36,1) infinite}
.nfx-pipe .nq-col:last-child .nq-card{background:linear-gradient(150deg,#8CC7B4,#5FD08A)}
@keyframes nqMove{0%,14%{opacity:0;transform:translateX(-16px)}
  26%,88%{opacity:1;transform:none}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .nfx-vid .nv-self,.nfx-vid .nv-dot,.nfx-pres span,.nfx-cook .nc-ing b:before,
  .nfx-lift .r1,.nfx-lift .r2,.nfx-lift .nl-rest,.nfx-pill .np-fill,.nfx-pill .np-txt s,
  .nfx-pipe .nq-move{animation:none!important;opacity:1!important;transform:none!important}
  .nfx-pill .np-fill{height:46%}
  .nfx-cook .nc-ing b:before{background:#5FD08A;border-color:#5FD08A}
}

/* Each what's-new card carries its own dark ground; the scenes inside are drawn
   in white, so a card without one leaves the whole thing invisible. */
.kc-nvid{background:radial-gradient(130% 120% at 84% -10%,#8FA7C8 0%,#41557E 34%,#171E31 72%,#0B0F1A 100%)}
.kc-npres{background:radial-gradient(130% 120% at 84% -10%,#7FC7A8 0%,#356D55 34%,#12241C 72%,#0A130F 100%)}
.kc-ncook{background:radial-gradient(130% 120% at 84% -10%,#D6B08A 0%,#8A6142 34%,#2A1D14 72%,#150E09 100%)}
.kc-nlift{background:radial-gradient(130% 120% at 84% -10%,#C89AA0 0%,#7E4A55 34%,#28171C 72%,#140B0E 100%)}
.kc-npill{background:radial-gradient(130% 120% at 84% -10%,#9BC0D6 0%,#3F6B85 34%,#15242E 72%,#0A1218 100%)}
.kc-npipe{background:radial-gradient(130% 120% at 84% -10%,#B0A6DC 0%,#5A4F8A 34%,#1E1A32 72%,#0F0D19 100%)}

/* ---- whatsnew: the v5 feedback batch ---- */
.kc-ngrp{background:radial-gradient(130% 120% at 84% -10%,#8FB5D6 0%,#3D5C85 34%,#141D30 72%,#0A0F1A 100%)}
.kc-nalarm{background:radial-gradient(130% 120% at 84% -10%,#E0BC7E 0%,#8A6B33 34%,#291F0F 72%,#140F07 100%)}
.kc-nemer{background:radial-gradient(130% 120% at 84% -10%,#D98F8F 0%,#8A4646 34%,#2A1414 72%,#150A0A 100%)}
.kc-ntrip{background:radial-gradient(130% 120% at 84% -10%,#E0A3C4 0%,#8A4E6E 34%,#2A1622 72%,#150B11 100%)}
.kc-ncal{background:radial-gradient(130% 120% at 84% -10%,#D6B08A 0%,#7E6242 34%,#251C12 72%,#120E09 100%)}
.kc-nvault{background:radial-gradient(130% 120% at 84% -10%,#B3A3E0 0%,#5E4E8A 34%,#1C1630 72%,#0E0B18 100%)}
.kc-nins{background:radial-gradient(130% 120% at 84% -10%,#8FCBB3 0%,#3D7460 34%,#122420 72%,#091210 100%)}

.nfx-grp{width:100%;height:112px;display:grid;grid-template-columns:repeat(2,86px);grid-auto-rows:52px;gap:8px;align-content:center;justify-content:center}
.nfx-grp .ng-tile{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(150deg,#4E6FA8,#6E5E9C);border:1px solid rgba(255,255,255,.24)}
.nfx-grp .ng-tile i{position:absolute;left:50%;bottom:-8px;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:rgba(255,255,255,.62)}
.nfx-grp .ng-tile i::before{content:"";position:absolute;left:50%;top:-16px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:inherit}
.nfx-grp .ng-tile::after{content:"";position:absolute;inset:0;border-radius:10px;border:2px solid rgba(255,255,255,0);animation:ngSpeak 2.4s ease-in-out infinite;animation-delay:var(--d)}
.nfx-grp .ng-tile.you{background:linear-gradient(150deg,#D6A97E,#C77E7E)}
@keyframes ngSpeak{0%,100%{border-color:rgba(255,255,255,0)}18%{border-color:rgba(255,255,255,.75)}36%{border-color:rgba(255,255,255,0)}}

.nfx-alarm{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:center}
.nfx-alarm .na-bell{position:relative;width:44px;height:44px}
.nfx-alarm .na-bell i{position:absolute;inset:0;border-radius:50% 50% 8px 8px;background:rgba(255,255,255,.78);transform-origin:50% 8%;animation:naSwing 2.6s ease-in-out infinite}
.nfx-alarm .na-w{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid rgba(255,255,255,.55);opacity:0;animation:naRing 1.8s ease-out infinite;animation-delay:var(--d)}
.nfx-alarm .na-notes{position:absolute;right:18%;top:22%;display:flex;gap:9px}
.nfx-alarm .na-notes b{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.85);opacity:0;animation:naNote 2.4s ease-out infinite;animation-delay:var(--d)}
@keyframes naSwing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes naRing{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@keyframes naNote{0%{transform:translateY(6px);opacity:0}25%{opacity:.95}70%{transform:translateY(-14px);opacity:0}100%{opacity:0}}

.nfx-emer{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:center}
.nfx-emer .ne-card{position:absolute;left:calc(50% - 52px);top:22px;width:70px;height:86px;border-radius:9px;background:rgba(255,255,255,.92);
  transform:translateX(var(--x)) rotate(var(--r));box-shadow:0 6px 16px rgba(0,0,0,.28);animation:neLift 5.2s ease-in-out infinite;animation-delay:var(--d)}
.nfx-emer .ne-card i{position:absolute;left:8px;top:8px;width:16px;height:16px;border-radius:5px;background:#D45C5C}
.nfx-emer .ne-card i::before,.nfx-emer .ne-card i::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.nfx-emer .ne-card i::before{width:8px;height:2.4px}
.nfx-emer .ne-card i::after{width:2.4px;height:8px}
.nfx-emer .ne-card b{position:absolute;left:8px;right:10px;top:36px;height:5px;border-radius:3px;background:rgba(20,28,44,.28)}
.nfx-emer .ne-card b.s{top:48px;right:24px;background:rgba(20,28,44,.18)}
@keyframes neLift{0%,100%{margin-top:0}50%{margin-top:-6px}}

.nfx-trip{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:center;gap:16px}
.nfx-trip .nt-spark{font-size:26px;animation:ntGlow 2.8s ease-in-out infinite}
.nfx-trip .nt-col{display:flex;flex-direction:column;gap:9px}
.nfx-trip .nt-col i{width:120px;height:12px;border-radius:6px;background:rgba(255,255,255,.7);transform-origin:0 50%;transform:scaleX(0);animation:ntLine 4.8s ease-out infinite;animation-delay:var(--d)}
.nfx-trip .nt-col i:nth-child(2){width:96px}
.nfx-trip .nt-col i:nth-child(4){width:104px}
@keyframes ntGlow{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes ntLine{0%{transform:scaleX(0)}12%,86%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

.nfx-ncal{width:100%;height:112px;display:flex;flex-direction:column;gap:11px;align-items:center;justify-content:center}
.nfx-ncal .nc-row{display:flex;align-items:center;gap:10px}
.nfx-ncal .nc-row i{width:14px;height:14px;border-radius:5px;background:var(--c)}
.nfx-ncal .nc-row b{width:104px;height:9px;border-radius:5px;background:rgba(255,255,255,.6)}
.nfx-ncal .nc-row.off{animation:ncOff 5.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ncOff{0%,42%,100%{opacity:1}54%,86%{opacity:.22}}

.nfx-vault{position:relative;width:100%;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.nfx-vault .nu-doc{position:relative;width:66px;height:56px;border-radius:9px;background:rgba(255,255,255,.9)}
.nfx-vault .nu-doc i{position:absolute;left:10px;right:12px;top:14px;height:5px;border-radius:3px;background:rgba(20,28,44,.26)}
.nfx-vault .nu-doc i+i{top:26px;right:24px;background:rgba(20,28,44,.16)}
.nfx-vault .nu-pins{display:flex;gap:8px}
.nfx-vault .nu-pins b{width:9px;height:9px;border-radius:50%;border:1.6px solid rgba(255,255,255,.7);background:transparent;animation:nuFill 4.6s ease-out infinite;animation-delay:var(--d)}
@keyframes nuFill{0%,8%{background:transparent}18%,82%{background:rgba(255,255,255,.9)}94%,100%{background:transparent}}

.nfx-nins{width:100%;height:112px;display:flex;align-items:flex-end;justify-content:center;gap:9px;padding-bottom:22px}
.nfx-nins i{width:16px;height:var(--h);border-radius:5px 5px 0 0;background:rgba(255,255,255,.45);transform-origin:50% 100%;transform:scaleY(0);animation:niGrow .7s ease-out forwards;animation-delay:var(--d)}
.nfx-nins i.top{background:#E4BD80;box-shadow:0 0 14px rgba(228,189,128,.5)}
.nfx-nins i.low{background:rgba(255,255,255,.22)}
@keyframes niGrow{to{transform:scaleY(1)}}

@media (prefers-reduced-motion: reduce){
  .nfx-grp .ng-tile::after,.nfx-alarm .na-bell i,.nfx-alarm .na-w,.nfx-alarm .na-notes b,
  .nfx-emer .ne-card,.nfx-trip .nt-spark,.nfx-trip .nt-col i,.nfx-ncal .nc-row.off,
  .nfx-vault .nu-pins b,.nfx-nins i{animation:none}
  .nfx-trip .nt-col i,.nfx-nins i{transform:none}
  .nfx-vault .nu-pins b{background:rgba(255,255,255,.9)}
}

/* ---- whatsnew v139: mental health + goals ---- */
.kc-nmind{background:radial-gradient(130% 120% at 84% -10%,#C7A3E0 0%,#6E4E8A 34%,#221630 72%,#110B18 100%)}
.kc-ngoal{background:radial-gradient(130% 120% at 84% -10%,#E0C08A 0%,#8A7033 34%,#292110 72%,#141007 100%)}

.nfx-mind{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:center}
.nfx-mind .nm-wheel{width:88px;height:88px;border-radius:50%;
  background:conic-gradient(#E4BD80 0 45deg,#7FC7A8 0 90deg,#9B8CD9 0 135deg,#8FB5D6 0 180deg,#93A1B5 0 225deg,#A8B56E 0 270deg,#D98C8C 0 315deg,#D6A97E 0 360deg);
  -webkit-mask:radial-gradient(circle at center, transparent 26px, #000 27px);mask:radial-gradient(circle at center, transparent 26px, #000 27px);
  animation:nmTurn 22s linear infinite}
.nfx-mind .nm-word{position:absolute;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#1A2233;
  font-size:12px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.28);opacity:0;animation:nmWord 5.2s ease-in-out infinite;animation-delay:var(--d)}
.nfx-mind .nm-word.two{background:rgba(228,189,128,.95)}
@keyframes nmTurn{to{transform:rotate(360deg)}}
@keyframes nmWord{0%,8%{opacity:0;transform:translateY(6px) scale(.92)}16%,42%{opacity:1;transform:translateY(0) scale(1)}52%,100%{opacity:0;transform:translateY(-6px) scale(.96)}}

.nfx-goal{width:100%;height:112px;display:flex;align-items:center;justify-content:center;gap:9px}
.nfx-goal .ngl{padding:7px 12px;border-radius:999px;border:1.6px solid rgba(255,255,255,.55);color:rgba(255,255,255,.9);
  font-size:12px;font-weight:700;opacity:.35;animation:nglOn 5.6s ease-out infinite;animation-delay:var(--d)}
.nfx-goal .ngl.gold{border-color:#E4BD80;color:#E4BD80}
@keyframes nglOn{0%,6%{opacity:.35;background:transparent}14%,82%{opacity:1;background:rgba(255,255,255,.12)}94%,100%{opacity:.35;background:transparent}}

@media (prefers-reduced-motion: reduce){
  .nfx-mind .nm-wheel,.nfx-mind .nm-word,.nfx-goal .ngl{animation:none}
  .nfx-mind .nm-word{opacity:1}
  .nfx-mind .nm-word.two{display:none}
  .nfx-goal .ngl{opacity:1}
}

/* ---- the seven v5.27-v5.31 cards: each its own color, each its own motion ---- */
.kc-nincome{background:radial-gradient(130% 120% at 84% -10%,#9ED6A8 0%,#3E7A4C 34%,#12291A 72%,#09140D 100%)}
.kc-nschool{background:radial-gradient(130% 120% at 84% -10%,#9FB4E8 0%,#4A5FA0 34%,#161D33 72%,#0A0E1C 100%)}
.kc-nfar{background:radial-gradient(130% 120% at 84% -10%,#8AD6CE 0%,#3A7F78 34%,#122927 72%,#091413 100%)}
.kc-nvisbulk{background:radial-gradient(130% 120% at 84% -10%,#E0A3C0 0%,#8A4E6E 34%,#301622 72%,#180B11 100%)}
.kc-nsyslock{background:radial-gradient(130% 120% at 84% -10%,#D68F8F 0%,#7A3A3A 34%,#291212 72%,#140909 100%)}
.kc-ndevsz{background:radial-gradient(130% 120% at 84% -10%,#8FC3D6 0%,#3E6E7F 34%,#132229 72%,#0A1114 100%)}
.kc-nprov{background:radial-gradient(130% 120% at 84% -10%,#A8A3E8 0%,#5A50A8 34%,#1B1833 72%,#0D0B1C 100%)}

/* income: in-bar, out-bar, and the leftover pill that is the point */
.nfx-income{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:9px;color:#fff;align-items:stretch}
.nfx-income .ni-bar{position:relative;height:26px;border-radius:7px;background:rgba(255,255,255,.1);overflow:hidden;display:flex;align-items:center}
.nfx-income .ni-bar b{position:relative;z-index:2;font-size:11px;font-weight:600;padding-left:10px;letter-spacing:.03em}
.nfx-income .ni-bar em{position:absolute;left:0;top:0;bottom:0;border-radius:7px;transform-origin:left;animation:niFill 5.6s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--d)}
.nfx-income .ni-in em{width:100%;background:rgba(158,214,168,.5)}
.nfx-income .ni-out em{width:64%;background:rgba(255,255,255,.28)}
.nfx-income .ni-left{align-self:flex-start;padding:6px 12px;border-radius:999px;background:#9ED6A8;color:#0D2114;font-size:12px;font-weight:800;opacity:0;animation:niPop 5.6s ease-out infinite;animation-delay:2.1s}
@keyframes niFill{0%,6%{transform:scaleX(0)}30%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes niPop{0%,34%{opacity:0;transform:translateY(6px) scale(.9)}44%,86%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(-4px) scale(.94)}}

/* school: the date, then what it carries arriving one by one */
.nfx-school{width:100%;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px}
.nfx-school .ns-date{padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.92);color:#1A2233;font-size:12.5px;font-weight:800}
.nfx-school .ns-row{display:flex;gap:8px}
.nfx-school .ns-b{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:15px;opacity:0;animation:nsPop 5.4s ease-out infinite;animation-delay:var(--d)}
@keyframes nsPop{0%,10%{opacity:0;transform:scale(.6)}20%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.8)}}

/* calendar horizon: rows arriving, then the month that keeps extending */
.nfx-far{width:100%;height:112px;display:flex;flex-direction:column;justify-content:center;gap:7px;align-items:stretch}
.nfx-far .nc2-row{height:18px;border-radius:6px;background:rgba(255,255,255,.14);position:relative;overflow:hidden;opacity:0;animation:ncIn 5.8s ease-out infinite;animation-delay:var(--d)}
.nfx-far .nc2-row i{position:absolute;left:7px;top:4px;bottom:4px;width:34%;border-radius:4px;background:rgba(138,214,206,.65)}
.nfx-far .nc2-row.b i{width:52%;left:24%}
.nfx-far .nc2-row.c i{width:22%;left:58%}
.nfx-far .nc2-more{align-self:center;margin-top:3px;padding:5px 13px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);color:#fff;font-size:11px;font-weight:700;animation:ncPulse 5.8s ease-in-out infinite}
@keyframes ncIn{0%,6%{opacity:0;transform:translateY(7px)}16%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
@keyframes ncPulse{0%,38%{opacity:.4}50%,80%{opacity:1;transform:scale(1.05)}92%,100%{opacity:.4;transform:scale(1)}}

/* vision bulk: four pictures landing on the board in one move */
.nfx-visbulk{width:100%;height:112px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-content:center}
.nfx-visbulk .nv-sq{aspect-ratio:1;border-radius:11px;opacity:0;animation:nvDrop 5.2s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--d);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.nfx-visbulk .nv-sq:nth-child(1){background:linear-gradient(150deg,#E0A3C0,#8A4E6E)}
.nfx-visbulk .nv-sq:nth-child(2){background:linear-gradient(150deg,#9FB4E8,#4A5FA0)}
.nfx-visbulk .nv-sq:nth-child(3){background:linear-gradient(150deg,#E4BD80,#8A7033)}
.nfx-visbulk .nv-sq:nth-child(4){background:linear-gradient(150deg,#8AD6CE,#3A7F78)}
@keyframes nvDrop{0%,8%{opacity:0;transform:translateY(-16px) scale(.85) rotate(-3deg)}20%,86%{opacity:1;transform:translateY(0) scale(1) rotate(0)}95%,100%{opacity:0;transform:translateY(6px) scale(.92)}}

/* per-system lock: one tile, six digits, open for the sitting */
.nfx-syslock{width:100%;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.nfx-syslock .nk-row{display:flex;gap:8px}
.nfx-syslock .nk-tile{padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:6px;animation:nkOn 5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes nkOn{0%,8%{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}16%,80%{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.6)}92%,100%{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}}
.nfx-syslock .nk-tile i{font-style:normal;font-size:13px}
.nfx-syslock .nk-dots{display:flex;gap:8px}
.nfx-syslock .nk-dots b{width:11px;height:11px;border-radius:50%;border:1.6px solid rgba(255,255,255,.6);background:transparent;animation:nkDot 5s ease-out infinite;animation-delay:var(--d)}
@keyframes nkDot{0%,10%{background:transparent}18%,80%{background:#fff;border-color:#fff}92%,100%{background:transparent}}

/* per-device sizes: the phone tile grows, the desktop one holds still */
.nfx-devsz{width:100%;height:112px;display:flex;align-items:center;justify-content:center;gap:14px}
.nfx-devsz .nd-frame{border:1.6px solid rgba(255,255,255,.4);border-radius:11px;padding:8px;display:flex;align-items:flex-start;gap:6px}
.nfx-devsz .nd-desk{width:118px;height:74px}
.nfx-devsz .nd-phone{width:46px;height:86px;flex-direction:column}
.nfx-devsz .nd-t{border-radius:6px;background:rgba(255,255,255,.35)}
.nfx-devsz .nd-desk .nd-t{width:30px;height:26px}
.nfx-devsz .nd-phone .nd-t{width:100%;height:22px}
.nfx-devsz .nd-phone .nd-t.big{animation:ndSize 5.4s ease-in-out infinite}
.nfx-devsz .nd-lbl{position:absolute;font-size:0}
@keyframes ndSize{0%,18%{height:22px;background:rgba(255,255,255,.35)}34%,78%{height:44px;background:rgba(143,195,214,.75)}92%,100%{height:22px;background:rgba(255,255,255,.35)}}

/* providers: the names take turns; the last word is yours */
.nfx-prov{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:center}
.nfx-prov .np-ring{width:74px;height:74px;border-radius:50%;border:2px dashed rgba(255,255,255,.35);animation:npTurn 26s linear infinite}
.nfx-prov .np-word{position:absolute;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:#1B1833;font-size:12.5px;font-weight:800;opacity:0;animation:npWord 6.4s ease-in-out infinite;animation-delay:var(--d)}
.nfx-prov .np-word.own{background:#A8A3E8}
@keyframes npTurn{to{transform:rotate(360deg)}}
@keyframes npWord{0%,4%{opacity:0;transform:translateY(6px) scale(.92)}9%,22%{opacity:1;transform:translateY(0) scale(1)}28%,100%{opacity:0;transform:translateY(-6px) scale(.96)}}

/* ---- animate only what is on screen; skip painting what is not ----
   Everything decorative pauses while off-screen (all scene families, not just
   sfx/gsx), and on phones the off-screen scenes are removed from the layer tree
   entirely. Scene wrappers have fixed heights, so nothing shifts. */
html.kobs .kcard:not(.klive) *,html.kobs .acard:not(.klive) *,html.kobs .ifxpanel:not(.klive) *{animation-play-state:paused}
@media (max-width:760px){
  html.kobs .kcard:not(.klive) .sfx *,html.kobs .kcard:not(.klive) .pfx *,html.kobs .kcard:not(.klive) .pkico *,
  html.kobs .acard:not(.klive) .gsx *,html.kobs .ifxpanel:not(.klive) .ifxgrid *{display:none}
  /* the board mock: still tiles on phones, inner scenes still play when visible */
  .ifxt{animation:none}
  .kcard{box-shadow:0 12px 32px rgba(10,16,34,.22)}
}
@supports (content-visibility:auto){
  @media (max-width:760px){
    .kcard{content-visibility:auto;contain-intrinsic-size:400px 500px}
    .acard{content-visibility:auto;contain-intrinsic-size:300px 340px}
  }
}

.kc-nflow{background:radial-gradient(130% 120% at 84% -10%,#8FB5D6 0%,#3E5A7A 34%,#131F2B 72%,#0A1016 100%)}
.nfx-flow{width:100%;height:112px;position:relative;overflow:hidden;border-radius:14px}
.nfx-flow .nw-band{position:absolute;left:-30%;right:-30%;height:46px;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  top:8px;animation:nwFlow 9s ease-in-out infinite;animation-delay:var(--d)}
.nfx-flow .nw-band.b{top:38px;background:linear-gradient(90deg,transparent,rgba(143,181,214,.5),transparent)}
.nfx-flow .nw-band.c{top:68px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
@keyframes nwFlow{0%,100%{transform:translateX(-7%) scaleY(.9)}50%{transform:translateX(7%) scaleY(1.1)}}


/* tables in the policies: dense, readable, and they must survive a phone */
.ptab{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:15px}
.ptab th,.ptab td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.ptab th{font-weight:600;color:var(--ink);white-space:nowrap}
.ptab td{color:var(--dim)}
.ptab tr:last-child td{border-bottom:0}
@media(max-width:640px){
  .ptab,.ptab tbody,.ptab tr,.ptab td{display:block;width:100%}
  .ptab thead{display:none}
  .ptab tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:4px 2px}
  .ptab td{border:0;padding:6px 12px}
  .ptab td:first-child{color:var(--ink);font-weight:600}
}
#money h3{margin-top:26px}
.mny-hero .eyebrow{letter-spacing:.18em;font-size:12px;color:var(--gold,#CE9C55)}


/* Anchored policy sections: a sticky header eats the top of whatever a jump link
   lands on, so the heading you asked for arrives hidden behind the nav. */
#money, #money h3[id], .prose h2[id], .prose h3[id]{ scroll-margin-top:96px }
/* the Money policy: a callout should look like one, and the numbered sections
   need room to breathe apart from each other */
#money .pull{ margin:18px 0 22px; padding:16px 18px; border-left:3px solid var(--gold,#C89A5C);
  background:rgba(200,154,92,.07); border-radius:0 12px 12px 0; font-size:19px }
#money .note{ background:rgba(200,154,92,.08); border:1px solid rgba(200,154,92,.28);
  border-radius:12px; padding:12px 16px; font-size:15px; line-height:1.9 }
#money .note a{ white-space:nowrap }
#money h3{ margin-top:34px; padding-top:14px; border-top:1px solid var(--line) }
#money h3:first-of-type{ border-top:0 }
#money .badge{ display:inline-block; margin-bottom:10px }
#money ul{ margin:10px 0 16px }
#money li{ margin-bottom:7px }


/* --- v168: meals, live banks, Money inside --- */
.kc-nfood{background:radial-gradient(130% 120% at 84% -10%,#8FCBA0 0%,#3C7A55 34%,#14251B 72%,#0A130E 100%)}
.kc-nbanklive{background:radial-gradient(130% 120% at 84% -10%,#8FB7E0 0%,#35608F 34%,#12202F 72%,#0A1016 100%)}
.kc-ninapp{background:radial-gradient(130% 120% at 84% -10%,#E4BD80 0%,#8A6229 34%,#22190C 72%,#110C06 100%)}

/* Point the camera at lunch: a lens focusing, then the read-out arriving. */
.nfx-food{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:flex-start;gap:18px;padding-left:6px}
.nfx-food .nf-lens{position:relative;width:52px;height:52px;border-radius:14px;
  border:2px solid rgba(255,255,255,.72);animation:nfShot 4.4s ease-in-out infinite}
.nfx-food .nf-lens i{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;background:rgba(255,255,255,.85)}
.nfx-food .nf-rings b{position:absolute;left:32px;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;border:2px solid rgba(255,255,255,.5);opacity:0;
  animation:nfRing 4.4s ease-out infinite;animation-delay:var(--d)}
.nfx-food .nf-out{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.nfx-food .nf-out b{font:600 11px/1 ui-sans-serif,system-ui;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.14);border-radius:999px;padding:5px 9px;opacity:0;
  animation:nfPop 4.4s ease-out infinite;animation-delay:var(--d)}
@keyframes nfShot{0%,60%{transform:scale(1)}68%{transform:scale(.9)}76%,100%{transform:scale(1)}}
@keyframes nfRing{0%{transform:scale(.6);opacity:0}30%{opacity:.75}60%,100%{transform:scale(1.35);opacity:0}}
@keyframes nfPop{0%,18%{opacity:0;transform:translateY(6px)}30%,86%{opacity:1;transform:none}100%{opacity:0}}

/* Your bank fills it in: rows arriving down a line from the bank. */
.nfx-bank{position:relative;width:100%;height:112px;display:flex;align-items:center;gap:14px;padding:0 6px}
.nfx-bank .nb-inst{display:flex;flex-direction:row;gap:5px;align-items:flex-end;justify-content:center;
  width:42px;height:34px;padding-bottom:6px;border-bottom:2px solid rgba(255,255,255,.78);flex:0 0 auto}
.nfx-bank .nb-inst i{width:7px;height:22px;background:rgba(255,255,255,.78);display:block;border-radius:2px 2px 0 0}
.nfx-bank .nb-pipe{position:relative;flex:0 0 auto;width:40px;height:2px;background:rgba(255,255,255,.22)}
.nfx-bank .nb-pipe em{position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--gold);opacity:0;animation:nbFlow 2.6s linear infinite;animation-delay:var(--d)}
.nfx-bank .nb-rows{flex:1;display:flex;flex-direction:column;gap:7px}
.nfx-bank .nb-rows b{height:9px;border-radius:5px;background:rgba(255,255,255,.32);opacity:0;
  transform:translateX(10px);animation:nbRow 2.6s ease-out infinite;animation-delay:var(--d)}
.nfx-bank .nb-rows b:nth-child(1){width:82%}
.nfx-bank .nb-rows b:nth-child(2){width:64%}
.nfx-bank .nb-rows b:nth-child(3){width:73%}
@keyframes nbFlow{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1;transform:translateX(32px)}100%{opacity:0;transform:translateX(32px)}}
@keyframes nbRow{0%,20%{opacity:0;transform:translateX(10px)}36%,88%{opacity:1;transform:none}100%{opacity:0}}

/* The accountant moved in: Money settling inside the app shell. */
.nfx-inapp{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:center}
.nfx-inapp .ni-shell{position:relative;display:flex;width:148px;height:80px;border-radius:12px;
  border:2px solid rgba(255,255,255,.62);overflow:hidden;background:rgba(255,255,255,.06)}
.nfx-inapp .ni-rail{width:26px;background:rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.22)}
.nfx-inapp .ni-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 10px;
  animation:niSettle 5s ease-out infinite}
.nfx-inapp .ni-body em{height:8px;border-radius:4px;background:var(--gold);opacity:.85;
  transform:scaleX(.2);transform-origin:left;animation:niBar 5s ease-out infinite;animation-delay:var(--d)}
.nfx-inapp .ni-body em:nth-child(2){background:rgba(255,255,255,.4)}
.nfx-inapp .ni-body em:nth-child(3){background:rgba(255,255,255,.28)}
.nfx-inapp .ni-tag{position:absolute;left:0;right:0;bottom:2px;text-align:center;font:600 10px/1 ui-sans-serif,system-ui;
  letter-spacing:.04em;color:rgba(255,255,255,.66)}
@keyframes niSettle{0%{opacity:0;transform:translateY(10px)}18%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes niBar{0%,20%{transform:scaleX(.2)}38%,90%{transform:scaleX(1)}100%{transform:scaleX(.2)}}


/* the three cards added in v169 take the same radial recipe as the rest of the
   rail, in hues the rail was not already using: a violet, a slate and a rose */
.kc-nwalk{background:radial-gradient(130% 120% at 84% -10%,#B9A6E8 0%,#5B4894 34%,#1E1830 72%,#0E0B18 100%)}
.kc-ndense{background:radial-gradient(130% 120% at 84% -10%,#A9BCC9 0%,#4A6474 34%,#18242B 72%,#0B1114 100%)}
.kc-ncyc{background:radial-gradient(130% 120% at 84% -10%,#E9A9BE 0%,#93445F 34%,#2C1620 72%,#160B10 100%)}

/* ===== three scenes for the cards added in v169 =====
   Same rules as the rest of the rail: pure CSS, no images, no script, and every
   animation keyed off a --d so the parts arrive in sequence rather than at once.
   Names are prefixed nw/nd/ny so they cannot collide with an existing keyframe,
   which has caught this file out before. */
.nfx-walk{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:center;gap:14px}
.nfx-walk .nw-scr{position:relative;width:132px;height:82px;border-radius:12px;overflow:hidden;
  border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.nfx-walk .nw-scr i{position:absolute;inset:8px;border-radius:7px;background:rgba(255,255,255,.16);
  opacity:0;animation:nwSlide 3.6s ease-in-out infinite;animation-delay:var(--d)}
.nfx-walk .nw-scr i:nth-child(2){background:var(--gold);opacity:0}
.nfx-walk .nw-scr i:nth-child(3){background:rgba(255,255,255,.26)}
.nfx-walk .nw-rail{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 7px;border-radius:99px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.nfx-walk .nw-rail b{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.5);display:block;
  animation:nwPing 3.6s ease-in-out infinite}
.nfx-walk .nw-rail b.dn{animation-delay:1.8s}
.nfx-walk .nw-rail em{font-style:normal;font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.66)}
@keyframes nwSlide{0%{opacity:0;transform:translateX(26px)}12%,30%{opacity:1;transform:translateX(0)}
  42%,100%{opacity:0;transform:translateX(-26px)}}
@keyframes nwPing{0%,100%{transform:scale(1);background:rgba(255,255,255,.5)}
  50%{transform:scale(1.25);background:var(--gold)}}

.nfx-dense{position:relative;width:100%;height:112px;display:flex;align-items:center;justify-content:center;gap:12px}
.nfx-dense .nd-old{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nfx-dense .nd-old i{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2)}
.nfx-dense .nd-arrow{width:22px;height:2px;background:rgba(255,255,255,.4);position:relative}
.nfx-dense .nd-arrow:after{content:'';position:absolute;right:-1px;top:-3px;width:8px;height:8px;
  border-top:2px solid rgba(255,255,255,.4);border-right:2px solid rgba(255,255,255,.4);transform:rotate(45deg)}
.nfx-dense .nd-new{display:flex;flex-direction:column;gap:5px;width:132px}
.nfx-dense .nd-new b{height:9px;border-radius:5px;background:rgba(255,255,255,.22);display:block;
  transform:scaleX(.25);transform-origin:left;animation:ndRow 4.4s ease-out infinite;animation-delay:var(--d)}
.nfx-dense .nd-new b:nth-child(odd){background:var(--gold);opacity:.8}
@keyframes ndRow{0%{transform:scaleX(.25);opacity:.25}18%,72%{transform:scaleX(1);opacity:1}
  92%,100%{transform:scaleX(1);opacity:.35}}

.nfx-cyc{position:relative;width:100%;height:112px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px}
.nfx-cyc .ny-track{position:relative;width:170px;height:8px;border-radius:99px;background:rgba(255,255,255,.16)}
.nfx-cyc .ny-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--gold);
  width:22%;animation:nyFill 4.6s ease-in-out infinite}
.nfx-cyc .ny-track b{position:absolute;top:14px;font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.6)}
.nfx-cyc .ny-track b.ny-a{left:0}
.nfx-cyc .ny-track b.ny-b{right:0;opacity:0;animation:nyEnd 4.6s ease-in-out infinite}
.nfx-cyc .ny-days{display:flex;gap:7px}
.nfx-cyc .ny-days em{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.18);display:block;
  animation:nyDay 4.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes nyFill{0%{width:16%}55%,100%{width:78%}}
@keyframes nyEnd{0%,50%{opacity:0}62%,100%{opacity:1}}
@keyframes nyDay{0%{background:rgba(255,255,255,.18)}20%,100%{background:var(--gold);opacity:.85}}


/* ===== FAQ, in sections (v172) =====
   Thirty-four questions in one flat column meant scrolling past the money ones
   to reach the data ones. They are grouped now, and the headings have to carry
   the same weight as the rest of the page rather than inventing a new scale. */
.faqh{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;margin:38px 0 4px}
.faqh:first-of-type{margin-top:6px}
.faqs{color:var(--dim);margin:0 0 14px;font-size:15px}
.faq + .faqh{margin-top:42px}


/* ============ THE APPEARANCE CARDS ============
   Four small pieces of motion for the surfaces work. They follow the same rules
   as every other effect on this page: no images, no libraries, and everything
   stops for anyone who has asked their device for less movement. */

/* the run of materials: six plates, each made of something different */
.sfx-mats{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sfx-mats i{width:34px;height:34px;border-radius:11px;display:block;
  animation:matLift 4.6s var(--d,0ms) ease-in-out infinite;
  box-shadow:0 4px 12px rgba(6,12,24,.28)}
.sfx-mats .m1{background:linear-gradient(160deg,hsla(210,82%,62%,.62),hsla(210,78%,38%,.72));
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.46),0 4px 12px rgba(6,12,24,.28)}
.sfx-mats .m2{background:linear-gradient(104deg,hsl(38,46%,34%),hsl(38,58%,58%) 38%,hsl(38,44%,32%) 62%,hsl(38,52%,46%));
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.30),0 4px 12px rgba(6,12,24,.28)}
.sfx-mats .m3{background:repeating-linear-gradient(118deg,hsla(0,0%,100%,.14) 0 1px,transparent 1px 8px),
  linear-gradient(160deg,hsl(200,20%,74%),hsl(200,16%,56%))}
.sfx-mats .m4{background:repeating-linear-gradient(91deg,hsla(24,40%,20%,.20) 0 2px,transparent 2px 7px),
  linear-gradient(160deg,hsl(28,36%,42%),hsl(28,32%,28%))}
.sfx-mats .m5{background:radial-gradient(70% 55% at 26% 14%,hsla(0,0%,100%,.55),transparent 62%),
  linear-gradient(146deg,hsla(300,60%,72%,.75),hsla(190,54%,66%,.8) 55%,hsla(38,58%,66%,.8))}
.sfx-mats .m6{background:linear-gradient(160deg,hsla(330,60%,16%,.94),hsla(330,70%,9%,.96));
  box-shadow:inset 0 0 0 1px hsl(330,90%,58%),inset 0 0 14px hsla(330,95%,55%,.32),0 0 12px hsla(330,95%,50%,.28)}
@keyframes matLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* one tile out of four takes a surface of its own */
.sfx-onemat{display:flex;align-items:center;gap:9px}
.sfx-onemat .t{width:36px;height:30px;border-radius:9px;display:block;
  background:linear-gradient(160deg,hsl(210,44%,44%),hsl(210,46%,32%));
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.16)}
.sfx-onemat .pick{background:repeating-linear-gradient(104deg,hsla(0,0%,100%,.16) 0 1px,transparent 1px 5px),
  linear-gradient(104deg,hsl(38,50%,38%),hsl(38,62%,62%) 40%,hsl(38,48%,36%));
  animation:oneSwap 4.4s ease-in-out infinite;
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.34),0 5px 14px rgba(6,12,24,.34)}
@keyframes oneSwap{0%,18%{transform:scale(1)}30%{transform:scale(1.12)}46%,100%{transform:scale(1)}}

/* a page with two panels sitting on a field that changes underneath them */
.sfx-sysbg{position:relative;height:62px;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,hsl(210,26%,18%),hsl(210,30%,12%))}
.sfx-sysbg .fld{position:absolute;inset:0;
  background:radial-gradient(60% 52% at 22% 20%,hsla(210,64%,52%,.42),transparent 62%),
             radial-gradient(56% 48% at 82% 84%,hsla(210,54%,42%,.36),transparent 62%);
  background-size:190% 190%;animation:sysDrift 11s ease-in-out infinite alternate}
.sfx-sysbg .pnl{position:absolute;left:12px;right:12px;top:11px;height:16px;border-radius:7px;
  background:hsla(210,30%,84%,.20);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.10)}
.sfx-sysbg .pnl.two{top:34px;height:16px;right:64px}
@keyframes sysDrift{from{background-position:0% 40%,100% 60%}to{background-position:100% 0%,0% 100%}}

/* a clip looping behind the board */
.sfx-wall{display:flex;align-items:center;justify-content:center}
.sfx-wall .frame{position:relative;width:100%;max-width:180px;height:60px;border-radius:12px;overflow:hidden;
  box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.12),0 6px 16px rgba(6,12,24,.32)}
.sfx-wall .sky{position:absolute;inset:0;
  background:linear-gradient(170deg,hsl(214,58%,30%),hsl(238,52%,18%) 60%,hsl(268,44%,14%))}
.sfx-wall .mv{position:absolute;inset:-30%;
  background:radial-gradient(38% 30% at 30% 40%,hsla(190,90%,72%,.44),transparent 66%),
             radial-gradient(30% 26% at 74% 62%,hsla(320,80%,70%,.34),transparent 66%);
  animation:wallPan 9s ease-in-out infinite alternate}
@keyframes wallPan{from{transform:translate3d(-6%,-4%,0) scale(1.04)}to{transform:translate3d(7%,5%,0) scale(1.1)}}

@media (prefers-reduced-motion:reduce){
  .sfx-mats i,.sfx-onemat .pick,.sfx-sysbg .fld,.sfx-wall .mv{animation:none}
}


/* ============ WHAT HAS JUST LANDED ============
   A short band near the top of the page for the newest work, so someone who has
   been here before can see what changed without reading the whole page again.
   Three cards, no carousel: if it needs scrolling it is not a highlight. */
.whatsnew{padding-top:6px}
.wnrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media (max-width:900px){.wnrow{grid-template-columns:1fr}}
.wncard{display:block;text-decoration:none;color:inherit;position:relative;
  padding:20px 20px 18px;border-radius:18px;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(4,10,20,.28);
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s,box-shadow .22s}
.wncard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.20);
  box-shadow:0 22px 54px rgba(4,10,20,.36)}
.wncard .wne{display:inline-block;font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  opacity:.72;margin-bottom:9px}
.wncard h3{margin:0 0 8px;font-size:19px;line-height:1.25}
.wncard p{margin:0;font-size:14px;line-height:1.55;opacity:.80}
.wnswatch{display:flex;gap:7px;margin-top:16px}
.wnswatch i{width:30px;height:30px;border-radius:9px;display:block;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 3px 9px rgba(4,10,20,.30)}
.wnswatch .s1{background:linear-gradient(160deg,hsla(210,82%,64%,.66),hsla(210,76%,40%,.76))}
.wnswatch .s2{background:linear-gradient(104deg,hsl(38,46%,36%),hsl(38,58%,60%) 40%,hsl(38,44%,34%))}
.wnswatch .s3{background:repeating-linear-gradient(118deg,rgba(255,255,255,.14) 0 1px,transparent 1px 8px),
  linear-gradient(160deg,hsl(200,20%,76%),hsl(200,16%,58%))}
.wnswatch .s4{background:radial-gradient(70% 55% at 26% 14%,rgba(255,255,255,.55),transparent 62%),
  linear-gradient(146deg,hsla(300,60%,74%,.78),hsla(190,54%,68%,.82) 55%,hsla(38,58%,68%,.82))}
.wnswatch .s5{background:linear-gradient(160deg,hsla(330,60%,17%,.94),hsla(330,70%,10%,.96));
  box-shadow:inset 0 0 0 1px hsl(330,88%,58%),inset 0 0 12px hsla(330,95%,55%,.30)}
.wnswatch .s6{background:repeating-linear-gradient(104deg,rgba(255,255,255,.16) 0 1px,transparent 1px 5px),
  linear-gradient(104deg,hsl(150,44%,34%),hsl(150,56%,56%) 40%,hsl(150,42%,32%))}
.wnswatch.alt .on{transform:scale(1.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 6px 16px rgba(4,10,20,.42)}
.wnswatch.grad i{width:44px}
.wnswatch .g1{background:radial-gradient(60% 52% at 22% 20%,hsla(210,64%,58%,.62),transparent 62%),hsl(210,28%,20%)}
.wnswatch .g2{background:repeating-linear-gradient(180deg,rgba(255,255,255,.10) 0 1px,transparent 1px 6px),hsl(210,26%,22%)}
.wnswatch .g3{background:linear-gradient(180deg,hsl(210,24%,16%),hsla(210,58%,50%,.66) 46%,hsl(210,24%,16%))}


/* ============ THE PAGE LOADER, TIGHTENED ============
   The network and the grid already carried the motion; the words were doing
   too much of the talking. The mark now matches the app and Money exactly, four
   small tiles lifting in turn, and the type steps back so the animation is what
   you notice. The percentage is real, driven by images actually arriving, so it
   stays; it just stops shouting. */
#pl .pl-word{font-size:clamp(22px,3.4vw,32px)}
#pl .pl-sub{font-size:10.5px;letter-spacing:.20em;color:rgba(255,255,255,.38)}
#pl .pl-meta{display:flex;align-items:center;gap:8px;margin-top:7px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.40)}
#pl .pl-pct{font-variant-numeric:tabular-nums;color:rgba(228,189,128,.72)}
#pl .pl-pct::after{content:"%";opacity:.6;margin-left:1px}
#pl .pl-bar{margin-top:10px}


/* ============ THE LOADER MARK IS THE BOARD ============
   The nine cells were all one gold. They are the app's board in miniature, so
   they take the family colors instead, and a wave crosses them the way the
   real tiles settle when a board opens. Nothing is added to the layout: the
   same nine cells, doing more.
   Keyframes here are prefixed mk- because @keyframes is global and this
   stylesheet is large: a generic name silently replaces someone else's. */
#pl .pl-grid i:nth-child(1){background:linear-gradient(150deg,hsl(210,72%,72%),hsl(210,62%,50%))}
#pl .pl-grid i:nth-child(2){background:linear-gradient(150deg,#F0D8AC,#C89A5C)}
#pl .pl-grid i:nth-child(3){background:linear-gradient(150deg,hsl(150,58%,68%),hsl(150,50%,46%))}
#pl .pl-grid i:nth-child(4){background:linear-gradient(150deg,hsl(330,62%,74%),hsl(330,54%,54%))}
#pl .pl-grid i:nth-child(5){background:linear-gradient(150deg,#fff,#E4BD80)}
#pl .pl-grid i:nth-child(6){background:linear-gradient(150deg,hsl(266,58%,74%),hsl(266,50%,54%))}
#pl .pl-grid i:nth-child(7){background:linear-gradient(150deg,hsl(186,62%,70%),hsl(186,54%,48%))}
#pl .pl-grid i:nth-child(8){background:linear-gradient(150deg,hsl(28,74%,70%),hsl(28,64%,50%))}
#pl .pl-grid i:nth-child(9){background:linear-gradient(150deg,hsl(96,50%,68%),hsl(96,44%,46%))}
#pl .pl-grid i{box-shadow:0 3px 10px rgba(4,10,20,.42),inset 0 1px 0 rgba(255,255,255,.34)}
/* the wave: a diagonal ripple, so it reads as one motion rather than nine */
#pl .pl-grid i{--w:calc((var(--n) - (3 * floor(var(--n) / 3))) + floor(var(--n) / 3))}
#pl .pl-grid i::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,255,255,.85);opacity:0;
  animation:mkWave 2.4s calc(var(--w) * 190ms) ease-out infinite}
#pl .pl-grid i{position:relative;overflow:hidden}
@keyframes mkWave{0%{opacity:0}12%{opacity:.55}40%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#pl .pl-grid i::after{animation:none}}


/* v187: scenes for the operating-layer cards */
.kcard .nfx-attn .r>*,.kcard .nfx-rule .r>*,.kcard .nfx-rule .tg,.kcard .nfx-tape .r>*,
.kcard .nfx-dose .p,.kcard .nfx-dose .cal i,.kcard .nfx-ics .f,.kcard .nfx-ics .ar,.kcard .nfx-ics .g i{display:block}
.kcard .nfx-attn .r b,.kcard .nfx-rule .r b,.kcard .nfx-tape .r b{flex:0 1 auto}
.kcard .nfx-attn{position:relative;width:100%;height:96px;border-radius:12px;overflow:hidden;padding:12px 14px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;background:linear-gradient(120deg,rgba(120,150,220,.22),rgba(10,16,34,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kcard .nfx-attn .r{display:flex;align-items:center;gap:9px;opacity:0;transform:translateX(-8px);animation:attnRow 5.2s ease infinite}
.kcard .nfx-attn .r i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.kcard .nfx-attn .r b{height:7px;border-radius:4px;background:rgba(255,255,255,.32)}
.kcard .nfx-attn .r1{animation-delay:.2s}.kcard .nfx-attn .r1 i{background:rgba(255,118,108,.95);box-shadow:0 0 0 0 rgba(255,118,108,.5);animation:attnPing 5.2s ease infinite .2s}.kcard .nfx-attn .r1 b{width:64%}
.kcard .nfx-attn .r2{animation-delay:.7s}.kcard .nfx-attn .r2 i{background:rgba(255,198,110,.95)}.kcard .nfx-attn .r2 b{width:48%}
.kcard .nfx-attn .r3{animation-delay:1.2s}.kcard .nfx-attn .r3 i{background:rgba(128,220,160,.95)}.kcard .nfx-attn .r3 b{width:38%}
@keyframes attnRow{0%,4%{opacity:0;transform:translateX(-8px)}14%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-8px)}}
@keyframes attnPing{16%{box-shadow:0 0 0 0 rgba(255,118,108,.5)}40%{box-shadow:0 0 0 8px rgba(255,118,108,0)}100%{box-shadow:0 0 0 0 rgba(255,118,108,0)}}

.kcard .nfx-rule{position:relative;width:100%;height:96px;border-radius:12px;overflow:hidden;padding:12px 14px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;background:linear-gradient(120deg,rgba(90,120,190,.20),rgba(10,16,34,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kcard .nfx-rule .tg{width:34px;height:18px;border-radius:10px;background:rgba(255,255,255,.20);position:relative;flex:0 0 auto;animation:ruleTrack 5.6s ease infinite}
.kcard .nfx-rule .tg i{position:absolute;top:2.5px;left:3px;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.9);animation:ruleFlip 5.6s ease infinite}
.kcard .nfx-rule .r{display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(5px);animation:ruleRow 5.6s ease infinite}
.kcard .nfx-rule .r u{width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.16);position:relative;flex:0 0 auto}
.kcard .nfx-rule .r u:after{content:"";position:absolute;left:2.6px;top:2.4px;width:6px;height:3.4px;border-left:2px solid rgba(150,225,175,.95);border-bottom:2px solid rgba(150,225,175,.95);transform:rotate(-45deg);opacity:0;animation:ruleTick 5.6s ease infinite}
.kcard .nfx-rule .r b{height:7px;border-radius:4px;background:rgba(255,255,255,.30)}
.kcard .nfx-rule .r1{animation-delay:1s}.kcard .nfx-rule .r1 u:after{animation-delay:1.5s}.kcard .nfx-rule .r1 b{width:58%}
.kcard .nfx-rule .r2{animation-delay:1.5s}.kcard .nfx-rule .r2 u:after{animation-delay:2s}.kcard .nfx-rule .r2 b{width:44%}
@keyframes ruleTrack{0%,12%{background:rgba(255,255,255,.20)}22%,92%{background:rgba(198,158,92,.75)}100%{background:rgba(255,255,255,.20)}}
@keyframes ruleFlip{0%,12%{left:3px}22%,92%{left:18px}100%{left:3px}}
@keyframes ruleRow{0%,16%{opacity:0;transform:translateY(5px)}28%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ruleTick{0%,24%{opacity:0}34%,88%{opacity:1}96%,100%{opacity:0}}

.kcard .nfx-tape{position:relative;width:100%;height:96px;border-radius:12px;overflow:hidden;padding:11px 14px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;background:linear-gradient(120deg,rgba(155,140,217,.26),rgba(16,10,36,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kcard .nfx-tape .r{display:flex;align-items:center;gap:9px;opacity:0;animation:tapeRow 6s ease infinite}
.kcard .nfx-tape .r em{width:24px;height:6px;border-radius:3px;background:rgba(255,255,255,.5);flex:0 0 auto}
.kcard .nfx-tape .r b{height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
.kcard .nfx-tape .r1{animation-delay:.3s}.kcard .nfx-tape .r1 b{width:56%}
.kcard .nfx-tape .r2{animation-delay:1s}.kcard .nfx-tape .r2 b{width:40%}
.kcard .nfx-tape .r3{animation-delay:1.7s}.kcard .nfx-tape .r3 b{width:62%}
.kcard .nfx-tape .r4{animation-delay:2.4s}.kcard .nfx-tape .r4 b{width:34%}
@keyframes tapeRow{0%,3%{opacity:0;transform:translateY(4px)}12%,86%{opacity:1;transform:none}94%,100%{opacity:0}}

.kcard .nfx-dose{position:relative;width:100%;height:96px;border-radius:12px;overflow:hidden;padding:14px;display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:flex-start;gap:8px 8px;background:linear-gradient(120deg,rgba(110,200,150,.20),rgba(8,22,16,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kcard .nfx-dose .p{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);position:relative;display:inline-block}
.kcard .nfx-dose .p:after{content:"";position:absolute;left:3.6px;top:3.4px;width:7px;height:4px;border-left:2px solid rgba(255,255,255,.95);border-bottom:2px solid rgba(255,255,255,.95);transform:rotate(-45deg);opacity:0}
.kcard .nfx-dose .p1{animation:dosePill 6s ease infinite .4s}.kcard .nfx-dose .p1:after{animation:doseTick 6s ease infinite .4s}
.kcard .nfx-dose .p2{animation:dosePill 6s ease infinite 1.1s}.kcard .nfx-dose .p2:after{animation:doseTick 6s ease infinite 1.1s}
.kcard .nfx-dose .p3{animation:dosePill 6s ease infinite 1.8s}.kcard .nfx-dose .p3:after{animation:doseTick 6s ease infinite 1.8s}
.kcard .nfx-dose .p4{animation:dosePill 6s ease infinite 2.5s}.kcard .nfx-dose .p4:after{animation:doseTick 6s ease infinite 2.5s}
.kcard .nfx-dose .cal{display:flex;gap:5px;flex-basis:100%;margin-top:6px}
.kcard .nfx-dose .cal i{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);animation:doseCal 6s ease infinite}
.kcard .nfx-dose .cal i:nth-child(1){animation-delay:2.9s}.kcard .nfx-dose .cal i:nth-child(2){animation-delay:3.05s}.kcard .nfx-dose .cal i:nth-child(3){animation-delay:3.2s}.kcard .nfx-dose .cal i:nth-child(4){animation-delay:3.35s}.kcard .nfx-dose .cal i:nth-child(5){animation-delay:3.5s}.kcard .nfx-dose .cal i:nth-child(6){animation-delay:3.65s}.kcard .nfx-dose .cal i:nth-child(7){animation-delay:3.8s}
@keyframes dosePill{0%,6%{background:rgba(255,255,255,.16)}16%,88%{background:rgba(130,215,165,.85)}96%,100%{background:rgba(255,255,255,.16)}}
@keyframes doseTick{0%,8%{opacity:0}18%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes doseCal{0%,4%{background:rgba(255,255,255,.10)}10%,86%{background:rgba(130,215,165,.55)}94%,100%{background:rgba(255,255,255,.10)}}

.kcard .nfx-ics{position:relative;width:100%;height:96px;border-radius:12px;overflow:hidden;padding:14px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;background:linear-gradient(120deg,rgba(215,150,95,.22),rgba(30,14,6,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kcard .nfx-ics .f{width:26px;height:34px;border-radius:5px;background:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);position:relative;flex:0 0 auto}
.kcard .nfx-ics .f:before{content:"";position:absolute;left:5px;top:8px;width:16px;height:2px;background:rgba(255,255,255,.55);box-shadow:0 6px 0 rgba(255,255,255,.45),0 12px 0 rgba(255,255,255,.35)}
.kcard .nfx-ics .ar{width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.35);position:relative;flex:0 0 auto;overflow:visible}
.kcard .nfx-ics .ar:before{content:"";position:absolute;right:-1px;top:-3.4px;border-left:7px solid rgba(255,255,255,.7);border-top:4.4px solid transparent;border-bottom:4.4px solid transparent}
.kcard .nfx-ics .ar:after{content:"";position:absolute;left:0;top:-1px;width:9px;height:4px;border-radius:3px;background:rgba(255,255,255,.85);animation:icsRun 4.8s linear infinite}
.kcard .nfx-ics .g{display:grid;grid-template-columns:repeat(7,14px);gap:5px}
.kcard .nfx-ics .g i{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);position:relative}
.kcard .nfx-ics .g i:after{content:"";position:absolute;left:4.5px;top:4.5px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.85);opacity:0;animation:icsDot 4.8s ease infinite}
.kcard .nfx-ics .g i:nth-child(2):after{animation-delay:.5s}.kcard .nfx-ics .g i:nth-child(5):after{animation-delay:.8s}.kcard .nfx-ics .g i:nth-child(7):after{animation-delay:1.1s}.kcard .nfx-ics .g i:nth-child(9):after{animation-delay:1.4s}.kcard .nfx-ics .g i:nth-child(12):after{animation-delay:1.7s}.kcard .nfx-ics .g i:nth-child(14):after{animation-delay:2s}
.kcard .nfx-ics .g i:nth-child(1):after,.kcard .nfx-ics .g i:nth-child(3):after,.kcard .nfx-ics .g i:nth-child(4):after,.kcard .nfx-ics .g i:nth-child(6):after,.kcard .nfx-ics .g i:nth-child(8):after,.kcard .nfx-ics .g i:nth-child(10):after,.kcard .nfx-ics .g i:nth-child(11):after,.kcard .nfx-ics .g i:nth-child(13):after{animation:none}
@keyframes icsRun{0%{left:0;opacity:0}8%{opacity:1}46%{left:16px;opacity:1}54%,100%{left:16px;opacity:0}}
@keyframes icsDot{0%,8%{opacity:0;transform:scale(.4)}18%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* v187: the Why a Personal OS progression */
#whatos .wo-row{display:flex;align-items:stretch;gap:14px;max-width:1060px;margin:34px auto 0;padding:0 22px}
#whatos .wo-step{flex:1;border-radius:18px;padding:26px 22px 24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm);display:flex;flex-direction:column;gap:10px;min-width:0}
#whatos .wo-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--soft2);color:var(--dim)}
#whatos .wo-ic svg{width:22px;height:22px}
#whatos .wo-step em{font-style:normal;font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.01em}
#whatos .wo-step p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.55}
#whatos .wo-hi{box-shadow:inset 0 0 0 1.5px var(--gold),0 18px 54px rgba(184,135,60,.22);animation:woGlow 3.6s ease-in-out infinite}
#whatos .wo-hi em{color:var(--goldink,var(--gold))}
#whatos .wo-hi .wo-ic{background:rgba(184,135,60,.14);color:var(--gold)}
#whatos .wo-ln{align-self:center;flex:0 0 auto;width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line),var(--gold))}
@keyframes woGlow{0%,100%{box-shadow:inset 0 0 0 1.5px var(--gold),0 18px 54px rgba(184,135,60,.16)}50%{box-shadow:inset 0 0 0 1.5px var(--gold),0 18px 60px rgba(184,135,60,.34)}}
@media (max-width:760px){#whatos .wo-row{flex-direction:column;gap:12px}#whatos .wo-ln{width:2px;height:18px;background:linear-gradient(180deg,var(--line),var(--gold))}}

/* ---- design cards inside The interface: the same cards, now alive ---- */





@keyframes dcsheen{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}



@keyframes dcbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}





/* ---- why a personal os: one highlighted, breathing card ---- */
.wo-glow .wo-row{position:relative;max-width:1010px;margin:30px auto 0;padding:26px 24px;border-radius:24px;
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden}
.wo-glow .wo-row::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;
  background:linear-gradient(120deg,rgba(214,168,96,0) 0%,rgba(214,168,96,.65) 28%,rgba(120,150,220,.35) 55%,rgba(214,168,96,.65) 82%,rgba(214,168,96,0) 100%);
  background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:woborder 9s linear infinite;pointer-events:none}
@keyframes woborder{0%{background-position:0% 0}100%{background-position:220% 0}}
.wo-glow .wo-step{background:rgba(10,16,28,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:transform .5s}

@media (prefers-reduced-motion:reduce){
  .wnrow .wncard::after,.wnswatch i,.wo-glow .wo-row::before,.wo-glow .wo-step:last-child{animation:none}
  .wnrow.rv .wncard{opacity:1;transform:none}}

/* the migrated cards live inside a full-bleed section: give the row its page width */


/* ---- the carousel tiles get the same life as the design cards ---- */
.kcard::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.10) 47%,rgba(255,255,255,.04) 53%,transparent 68%);
  transform:translateX(-130%);animation:dcsheen 7.5s ease-in-out infinite}
.kcard:nth-child(odd)::after{animation-delay:2.6s}
.kcard:hover{transform:scale(1.015) translateY(-4px);box-shadow:0 32px 80px rgba(10,16,34,.4)}@media (prefers-reduced-motion:reduce){.kcard::after{animation:none}}/* three completion cards */
.kc-flow{background:radial-gradient(130% 120% at 80% -10%,#5FA8C9 0%,#2C5D78 38%,#0B1D28 76%,#060F16 100%)}
.kc-open{background:radial-gradient(130% 120% at 80% -10%,#9B7FD4 0%,#513C82 38%,#150F28 76%,#0B0818 100%)}
.kc-safe{background:radial-gradient(130% 120% at 80% -10%,#6BBF8A 0%,#2F6647 38%,#0B1F14 76%,#06130B 100%)}

/* animated visuals for the completion cards */
.kviz{position:relative;height:96px;margin:14px 0 4px;width:100%}
.kviz-flow i{position:absolute;left:8%;right:8%;height:3px;border-radius:3px;top:22px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 14px,transparent 14px 30px);
  background-size:200% 100%;animation:flowr 3.2s linear infinite;opacity:.85}
.kviz-flow i:nth-child(2){top:40px;animation-delay:.5s;opacity:.55}
.kviz-flow i:nth-child(3){top:58px;animation-delay:1s;opacity:.35}
.kviz-flow i.back{background:repeating-linear-gradient(90deg,rgba(160,220,255,.65) 0 14px,transparent 14px 30px);
  background-size:200% 100%;animation:flowl 3.6s linear infinite}
.kviz-flow i.back:nth-child(4){top:22px;opacity:.0}
.kviz-flow i.back:nth-child(5){top:76px;animation-delay:.3s;opacity:.5}
.kviz-flow i.back:nth-child(6){top:76px;display:none}
@keyframes flowr{from{background-position:0 0}to{background-position:60px 0}}
@keyframes flowl{from{background-position:0 0}to{background-position:-60px 0}}
.kviz-open{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kviz-open .tok{font-family:ui-monospace,monospace;font-size:14px;font-weight:700;padding:9px 13px;border-radius:10px;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);animation:tokpulse 3.8s ease-in-out infinite}
.kviz-open .tok.t2{animation-delay:1.4s;opacity:.85}
.kviz-open .cur{width:10px;height:20px;background:rgba(255,255,255,.85);animation:blink 1.1s steps(1) infinite}
@keyframes tokpulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 16px 1px rgba(255,255,255,.12)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.kviz-safe{display:grid;place-items:center}
.kviz-safe .env{width:52px;height:36px;border-radius:7px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);position:relative;z-index:2}
.kviz-safe .env::after{content:"";position:absolute;left:3px;right:3px;top:3px;height:16px;
  clip-path:polygon(0 0,50% 100%,100% 0);background:rgba(255,255,255,.5)}
.kviz-safe .ring{position:absolute;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  animation:ringout 3s ease-out infinite}
.kviz-safe .ring.r2{animation-delay:1.5s}
@keyframes ringout{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.kviz-flow i,.kviz-open .tok,.kviz-open .cur,.kviz-safe .ring{animation:none}}

/* three more, each with something moving in it */
.kc-fam{background:radial-gradient(130% 120% at 80% -10%,#E0A0B4 0%,#7C4258 38%,#25101A 76%,#140A0F 100%)}
.kc-start{background:radial-gradient(130% 120% at 80% -10%,#7FC7B8 0%,#356A61 38%,#0D211E 76%,#071312 100%)}
.kc-body{background:radial-gradient(130% 120% at 80% -10%,#8FB4E8 0%,#3C5A87 38%,#101A29 76%,#080E17 100%)}

/* family: a week of days, entries landing on them one after another */
.kviz-fam{position:relative;height:104px}
.kviz-fam .fday{position:absolute;top:8px;width:14%;height:26px;border-radius:7px;background:rgba(255,255,255,.12)}
.kviz-fam .d1{left:2%}.kviz-fam .d2{left:20%}.kviz-fam .d3{left:38%}.kviz-fam .d4{left:56%}.kviz-fam .d5{left:74%}
.kviz-fam .fpill{position:absolute;font-size:11px;font-weight:600;padding:5px 9px;border-radius:8px;
  background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  opacity:0;transform:translateY(-8px);animation:famdrop 6s ease-in-out infinite}
.kviz-fam .p1{left:2%;top:46px}
.kviz-fam .p2{left:38%;top:46px;animation-delay:1.1s}
.kviz-fam .p3{left:56%;top:74px;animation-delay:2.2s}
@keyframes famdrop{0%{opacity:0;transform:translateY(-8px)}12%{opacity:1;transform:translateY(0)}
  72%{opacity:1;transform:translateY(0)}84%,100%{opacity:0;transform:translateY(-8px)}}

/* getting started: a list ticking itself off */
.kviz-start{display:flex;flex-direction:column;gap:8px;height:auto;margin:14px 0 6px}
.kviz-start .srow{display:flex;align-items:center;gap:9px;font-size:12px;opacity:.55;
  animation:startlit 7s ease-in-out infinite}
.kviz-start .srow i{width:16px;height:16px;flex:0 0 16px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);position:relative}
.kviz-start .srow i::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;
  font-size:10px;color:#0B1524;opacity:0}
.kviz-start .s2{animation-delay:.9s}.kviz-start .s3{animation-delay:1.8s}.kviz-start .s4{animation-delay:2.7s}
@keyframes startlit{0%,8%{opacity:.55}14%{opacity:1}70%{opacity:1}82%,100%{opacity:.55}}
.kviz-start .s1 i,.kviz-start .s2 i,.kviz-start .s3 i,.kviz-start .s4 i{animation:startick 7s ease-in-out infinite}
.kviz-start .s2 i{animation-delay:.9s}.kviz-start .s3 i{animation-delay:1.8s}.kviz-start .s4 i{animation-delay:2.7s}
@keyframes startick{0%,10%{background:transparent}16%{background:#EAF3EF;box-shadow:inset 0 0 0 1.5px #EAF3EF}
  70%{background:#EAF3EF;box-shadow:inset 0 0 0 1.5px #EAF3EF}82%,100%{background:transparent}}
.kviz-start .s1 i::after,.kviz-start .s2 i::after,.kviz-start .s3 i::after,.kviz-start .s4 i::after{
  animation:startickmark 7s ease-in-out infinite}
.kviz-start .s2 i::after{animation-delay:.9s}.kviz-start .s3 i::after{animation-delay:1.8s}.kviz-start .s4 i::after{animation-delay:2.7s}
@keyframes startickmark{0%,12%{opacity:0}18%,70%{opacity:1}82%,100%{opacity:0}}

/* the body: a month filling in, and one day being corrected */
.kviz-body{position:relative;display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:14px 0 6px}
.kviz-body .bcell{height:14px;border-radius:4px;background:rgba(255,255,255,.12);
  animation:bodyfill 6.5s ease-in-out infinite}
.kviz-body .bcell:nth-child(2n){animation-delay:.25s}
.kviz-body .bcell:nth-child(3n){animation-delay:.5s}
.kviz-body .bcell:nth-child(5n){animation-delay:.75s}
.kviz-body .bcell:nth-child(7n){animation-delay:1s}
@keyframes bodyfill{0%,10%{background:rgba(255,255,255,.12)}
  30%,66%{background:rgba(143,180,232,.8)}86%,100%{background:rgba(255,255,255,.12)}}
.kviz-body .bpen{position:absolute;left:32%;top:18px;width:12px;height:12px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.75);animation:bodypen 6.5s ease-in-out infinite}
@keyframes bodypen{0%,40%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}
  66%{opacity:1}76%,100%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){
  .kviz-fam .fpill,.kviz-start .srow,.kviz-start .srow i,.kviz-start .srow i::after,
  .kviz-body .bcell,.kviz-body .bpen{animation:none}
  .kviz-fam .fpill{opacity:1;transform:none}
}

/* status page verdicts */
.st-line{font-weight:600}
.st-line.good{color:#7FD1A6}
.st-line.warn{color:#E8C989}
.st-line.bad{color:#E88A8A}

/* the Store button: the same shape as every other button on the page, with the
   four squares set into it so it reads as the Store without shouting */
.ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.ms-btn .ms-logo{width:17px;height:17px;flex:0 0 17px;display:block}
.dl-card .ms-btn{width:100%}
.ms-btn span{white-space:nowrap}
@media (max-width:420px){ .ms-btn span{white-space:normal} }

/* Recently shipped, on the features page.
   A release feed rather than a wall of identical pills. One <li> is one item:
   the class carries the dot color, the <span> names the area it touched. Built
   only from theme tokens, so dark mode needs no second set of rules. */
.shipbar{position:relative;max-width:1120px;margin:0 auto 30px;padding:22px 24px 24px;
  border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);overflow:hidden;text-align:left}
.shipbar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold2),var(--gold) 46%,transparent)}
.ship-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:20px}
.ship-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--goldink)}
.ship-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--gold);
  animation:pulse 2s ease-in-out infinite}
.shipbar h3{margin:8px 0 0;font-size:clamp(19px,2.1vw,25px);letter-spacing:-.02em;line-height:1.15}
.ship-all{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  color:var(--goldink);text-decoration:none;white-space:nowrap;padding-bottom:3px}
.ship-all span{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.ship-all:hover span{transform:translateX(4px)}
.ship-when{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.ship-when b{font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--ink)}
.ship-when i{flex:1;height:1px;background:var(--line2)}
.ship-new{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--goldink);background:var(--tint-gold);border:1px solid var(--line2);
  border-radius:100px;padding:3px 9px}
.ship-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.ship-list li{position:relative;padding:11px 13px 12px 17px;border-radius:13px;
  background:var(--soft);border:1px solid var(--line2);font-size:13.5px;font-weight:600;
  line-height:1.32;color:var(--ink);
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s}
.ship-list li::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:3px;
  border-radius:3px;background:var(--dot,var(--gold))}
.ship-list li span{display:block;margin-top:4px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ship-list li:hover{transform:translateY(-2px);background:var(--card);border-color:var(--line)}
.ship-back{margin-top:20px;padding-top:16px;border-top:1px solid var(--line2)}
.ship-back>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:10px;font-size:13px;font-weight:700;color:var(--dim)}
.ship-back>summary::-webkit-details-marker{display:none}
.ship-back>summary em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.ship-back>summary::after{content:"";width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.ship-back>summary:hover{color:var(--ink)}
.ship-back>summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.ship-back[open]>summary{margin-bottom:16px;color:var(--ink)}
.ship-back[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.ship-back[open] .ship-wave{animation:shipin .4s cubic-bezier(.22,1,.36,1) both}
.shipbar .s-day{--dot:#C89A5C}
.shipbar .s-health{--dot:#D45C5C}
.shipbar .s-money{--dot:#4FB58A}
.shipbar .s-people{--dot:#D98CB0}
.shipbar .s-mind{--dot:#9B8CD9}
.shipbar .s-home{--dot:#93A1B5}
.shipbar .s-board{--dot:#4A86D9}
.shipbar .s-key{--dot:#6C7A96}
.shipbar.rv.in .ship-wave.now .ship-list li{animation:shipin .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,0ms)}
@keyframes shipin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* On a phone the cards become a plain list with hairlines between them. Four
   columns of boxes would push the sixty systems below two screens of scroll. */
@media (max-width:760px){
  .shipbar{margin-bottom:24px;padding:18px 16px 18px;border-radius:16px}
  .ship-top{margin-bottom:16px;align-items:flex-start;flex-direction:column;gap:8px}
  .shipbar h3{font-size:19px}
  .ship-list{grid-template-columns:1fr;gap:0}
  .ship-list li{background:none;border:0;border-radius:0;padding:9px 0 9px 14px;font-size:13.5px}
  .ship-list li+li{border-top:1px solid var(--line2)}
  .ship-list li::before{left:0;top:10px;bottom:10px}
  .ship-list li span{display:inline;margin:0 0 0 7px;white-space:nowrap}
  .ship-list li span::before{content:"\00b7";margin-right:7px;opacity:.55}
  .ship-list li:hover{transform:none;background:none;border-color:transparent}
  .ship-back{margin-top:14px;padding-top:14px}
}

/* Held still where nobody is looking. See idle.js: a section far off screen
   keeps its layout and its look and stops asking for frames. Animation only,
   so nothing here can move, resize or hide anything. */
/* A pseudo-element is not matched by `*`, so for as long as this rule said only
   `.dormant *` the 183 animations that live on ::before and ::after carried on
   running the whole way down the page — every one holding a composited layer and
   asking for frames off screen. That is the thing this file was written to stop,
   and it was stopping barely half of it. */
.dormant,.dormant *,
.dormant::before,.dormant::after,
.dormant *::before,.dormant *::after{animation-play-state:paused!important}

/* THEME CARDS THAT MOVE
   Each is the same idea as the wallpaper in the app: broad diagonal bands that
   travel. Done with one oversized gradient and a slow background-position, so
   it costs a compositor layer and nothing else, and it stops dead for anyone
   who has asked for less motion. */
.thmcards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
/* on the home page these sit in a full-width section, so they take the same
   measure and the same gutter as the heading above them rather than running
   off both edges */
.know .thmcards{max-width:1180px;margin:0 auto;padding:0 24px;gap:14px}
.thmcard{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 10px 26px rgba(4,10,20,.28)}
.thmcard i{position:absolute;inset:-40%;display:block;
  background-image:linear-gradient(115deg,var(--a) 0%,var(--b) 26%,var(--c) 50%,var(--b) 74%,var(--a) 100%);
  background-size:300% 300%;animation:thmflow 14s ease-in-out infinite}
.thmcard:nth-child(2n) i{animation-duration:18s;animation-direction:reverse}
.thmcard:nth-child(3n) i{animation-duration:22s}
.thmcard b{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;font-size:13px;font-weight:600;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 12px rgba(0,0,0,.35);letter-spacing:.01em}
/* a scrim only under the label, so a pale theme still reads its own name */
.thmcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(8,14,26,.42));pointer-events:none}
@keyframes thmflow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}}
.thmcard.t-spring{--a:#2E6B44;--b:#7BC08A;--c:#E8F5EA}
.thmcard.t-summer{--a:#A87415;--b:#E8C25A;--c:#FBF3DA}
.thmcard.t-autumn{--a:#8C3A1E;--b:#D97A4E;--c:#F8E4D8}
.thmcard.t-winter{--a:#1F5A66;--b:#69B0BE;--c:#E6F4F6}
.thmcard.t-deep{--a:#14375E;--b:#4A86C4;--c:#DCEBF8}
.thmcard.t-study{--a:#6E2E12;--b:#C07A42;--c:#F6E6D6}
.thmcard.t-market{--a:#6E1352;--b:#D250A6;--c:#F9DCEF}
.thmcard.t-alpine{--a:#4A2A6B;--b:#9E7BC8;--c:#EFE6F8}
@media (max-width:700px){ .thmcards{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion:reduce){ .thmcard i{animation:none} }

/* the line under a card rail: same measure as the lede above it */
.kfoot{max-width:62ch;margin:16px auto 0;text-align:center;color:var(--dim);
  font-size:15.5px;line-height:1.6}
.kfoot a{color:var(--gold,#C89A5C);text-decoration:none;white-space:nowrap}
.kfoot a:hover{text-decoration:underline}
@media (max-width:700px){ .kfoot{font-size:14.5px;text-align:left} }

/* THEMES CARD
   Four panels, each running the same travelling-band gradient the app draws, at
   its own speed and direction. One oversized gradient per panel and a slow
   background-position, so the whole thing is a compositor job and nothing more,
   and it holds still for anyone who has asked for less motion. */
.kc-nthemes{background:radial-gradient(130% 120% at 82% -12%,#7FB8D8 0%,#3E6FA8 30%,#1B2B49 68%,#0E1526 100%)}
.nfx-theme{width:100%;height:138px;display:grid;grid-template-columns:1fr 1fr;
  /* stretch spelled out, the way the tile mock does it: something up the
     cascade sets these otherwise and every panel collapses to no height */
  grid-template-rows:1fr 1fr;gap:9px;align-items:stretch;justify-items:stretch}
.nfx-theme .th{position:relative;border-radius:10px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.nfx-theme .th::before{content:"";position:absolute;inset:-45%;
  background-image:linear-gradient(115deg,var(--a) 0%,var(--b) 28%,var(--c) 52%,var(--b) 76%,var(--a) 100%);
  background-size:300% 300%;animation:thmflow 15s ease-in-out infinite}
.nfx-theme .t1{--a:#2E6B44;--b:#7BC08A;--c:#EAF6EC}
.nfx-theme .t2{--a:#A87415;--b:#E8C25A;--c:#FCF4DC}
.nfx-theme .t3{--a:#14375E;--b:#4A86C4;--c:#DEECF9}
.nfx-theme .t4{--a:#6E1352;--b:#D250A6;--c:#FADEF0}
.nfx-theme .t2::before{animation-duration:19s;animation-direction:reverse}
.nfx-theme .t3::before{animation-duration:23s}
.nfx-theme .t4::before{animation-duration:17s;animation-direction:reverse}
@media (prefers-reduced-motion:reduce){ .nfx-theme .th::before{animation:none} }

/* ---- the five newest cards get a drawn thing that moves, in the site's own
   idiom: a token travelling into a container, a code assembling itself, dots
   finding each other. All decorative, all still when motion is reduced. ---- */
.kc-nhouse .kv,.kc-nqr .kv,.kc-nreach .kv,.kc-nacct .kv,.kc-nimport .kv{position:relative}
/* THE DRAWN THING BELONGS ABOVE THE WORDS. Pinned to the bottom it sat behind
   the three lines and, on a phone where those lines wrap, underneath them. It
   now hangs in the space over them, which is where the other cards put theirs. */
.kfx{position:relative;height:64px;margin:0 0 12px;pointer-events:none;opacity:.95}
@media (max-width:560px){ .kfx{height:56px;margin-bottom:10px} }
.kfx i{position:absolute;border-radius:50%;background:rgba(255,255,255,.9);width:7px;height:7px;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.kfx.in i{animation:kfxIn 4.2s cubic-bezier(.5,0,.3,1) infinite;animation-delay:var(--d,0s)}
@keyframes kfxIn{0%{left:2%;bottom:8px;opacity:0;transform:scale(.6)}12%{opacity:1}70%{left:78%;bottom:34px;opacity:1;transform:scale(1)}100%{left:88%;bottom:38px;opacity:0;transform:scale(.5)}}
.kfx .box{position:absolute;right:6%;bottom:20px;width:34px;height:26px;border:1.5px solid rgba(255,255,255,.75);border-radius:7px}
.kfx .box::after{content:"";position:absolute;left:6px;right:6px;top:-1px;height:6px;border-radius:3px;background:rgba(255,255,255,.35)}
.kfx.qr b{position:absolute;width:9px;height:9px;border-radius:2px;background:rgba(255,255,255,.85);animation:kfxQr 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxQr{0%,10%{opacity:0;transform:scale(.4) rotate(-20deg)}30%,70%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.4) rotate(20deg)}}
.kfx.link s{position:absolute;left:8%;height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.kfx.link s i{position:absolute;inset:0;background:rgba(255,255,255,.9);transform-origin:left;animation:kfxLinkFill 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxLinkFill{0%{transform:scaleX(0);opacity:0}18%{opacity:1}72%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes kfxLine{0%{transform:scaleX(0);opacity:0}25%{opacity:.85}60%{transform:scaleX(1);opacity:.85}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){ .kfx.in i,.kfx.qr b,.kfx.link s{animation:none} .kfx.in i{left:60%;bottom:26px} }

/* the newest system cards carry a small drawn motion of their own, so a family
   rail shows at a glance where something has just been added. Decorative, and
   still when motion is reduced. */
.acard .afx{position:absolute;right:18px;top:18px;width:54px;height:54px;pointer-events:none;opacity:.55}
.acard .afx i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);animation:afxRing 3.4s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes afxRing{0%{transform:scale(.35);opacity:0}18%{opacity:.9}70%{transform:scale(1);opacity:0}100%{opacity:0}}
.acard .afx b{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:rgba(255,255,255,.95)}
@media (prefers-reduced-motion:reduce){ .acard .afx i{animation:none;transform:scale(.8);opacity:.5} }

/* NINE OF ITS OWN. Each new system draws a thing only it draws: reusing another
   card's animation reads as a stand-in, which is what it was. All decorative,
   all still when motion is reduced. */
.gsn{display:flex;align-items:flex-end;gap:4px;height:52px}
.gsn i,.gsn b,.gsn s,.gsn em{display:block}
/* Sleep: a night falling and lifting */
.gsn-sleep{align-items:center;gap:3px}
.gsn-sleep i{width:9px;border-radius:3px;background:rgba(255,255,255,.85);animation:gsnSleep 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes gsnSleep{0%,100%{height:10px;opacity:.45}45%{height:34px;opacity:1}}
/* Medicines: a week of doses, ticking off one at a time */
.gsn-meds{align-items:center;gap:6px}
.gsn-meds i{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);animation:gsnDose 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes gsnDose{0%,8%{background:transparent;transform:scale(1)}18%{background:#fff;transform:scale(1.25)}30%,100%{background:rgba(255,255,255,.9);transform:scale(1)}}
/* Worth: a line that climbs and a dot that follows it */
.gsn-worth{position:relative;width:132px}
.gsn-worth s{position:absolute;left:0;bottom:8px;height:2px;width:100%;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.85))}
.gsn-worth i{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;bottom:6px;animation:gsnClimb 4s ease-in-out infinite}
@keyframes gsnClimb{0%{left:2%;bottom:6px}60%{left:70%;bottom:26px}100%{left:96%;bottom:34px;opacity:.2}}
/* Time: an hour sweeping */
.gsn-time{align-items:center}
.gsn-time s{position:relative;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.gsn-time s i{position:absolute;left:calc(50% - 1px);top:50%;width:2px;height:16px;background:#fff;transform-origin:top center;animation:gsnSweep 3s linear infinite}
.gsn-time s b{position:absolute;left:calc(50% - 1px);top:50%;width:2px;height:11px;background:rgba(255,255,255,.7);transform-origin:top center;animation:gsnSweep 18s linear infinite}
@keyframes gsnSweep{to{transform:rotate(360deg)}}
/* Watchlist: a queue advancing into the frame */
.gsn-watch{align-items:center;gap:6px}
.gsn-watch i{width:26px;height:34px;border-radius:4px;background:rgba(255,255,255,.55);animation:gsnQueue 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes gsnQueue{0%{transform:translateX(10px);opacity:0}25%,70%{transform:none;opacity:1}100%{transform:translateX(-14px);opacity:0}}
/* Career: three stages, one lighting at a time */
.gsn-career{align-items:center;gap:10px}
.gsn-career i{width:22px;height:10px;border-radius:5px;background:rgba(255,255,255,.35);animation:gsnStage 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes gsnStage{0%,100%{background:rgba(255,255,255,.3)}30%,55%{background:rgba(255,255,255,.95)}}
/* Household: rooms lighting one after another */
.gsn-house{align-items:flex-end;gap:5px}
.gsn-house i{width:20px;border-radius:3px 3px 0 0;background:rgba(255,255,255,.4);animation:gsnRoom 3.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes gsnRoom{0%,100%{height:14px;background:rgba(255,255,255,.35)}40%{height:32px;background:rgba(255,255,255,.9)}}
/* Learn: a card turning over */
.gsn-learn{align-items:center}
.gsn-learn s{width:56px;height:36px;border-radius:5px;background:rgba(255,255,255,.85);animation:gsnFlip 3.4s ease-in-out infinite;transform-style:preserve-3d}
@keyframes gsnFlip{0%,20%{transform:rotateY(0)}55%,80%{transform:rotateY(180deg)}100%{transform:rotateY(0)}}
/* Rules: a trigger travelling to what it makes */
.gsn-rules{position:relative;width:140px;align-items:center}
.gsn-rules s{position:absolute;left:8px;right:8px;top:50%;height:2px;background:rgba(255,255,255,.35)}
.gsn-rules b{position:absolute;left:4px;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9)}
.gsn-rules em{position:absolute;right:4px;width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.5);animation:gsnMade 3.4s ease-in-out infinite}
.gsn-rules i{position:absolute;left:10px;width:7px;height:7px;border-radius:50%;background:#fff;animation:gsnRun 3.4s ease-in-out infinite}
@keyframes gsnRun{0%{left:10px;opacity:0}12%{opacity:1}70%,100%{left:120px;opacity:0}}
@keyframes gsnMade{0%,60%{background:rgba(255,255,255,.35)}75%,100%{background:rgba(255,255,255,.95)}}
@media (prefers-reduced-motion:reduce){ .gsn i,.gsn s,.gsn b,.gsn em,.gsn s::after{animation:none!important} }

/* THE NEW CARDS WERE TRANSPARENT: every other card carries its own light, and
   these had none, so they read as holes in the rail. Each takes the colour of
   the family it speaks for. */
.kc-nmeds{background:radial-gradient(130% 120% at 84% -10%,#EE8F8F 0%,#A34747 34%,#2C1414 72%,#150A0A 100%)}
.kc-nwatch{background:radial-gradient(130% 120% at 84% -10%,#BCA9F0 0%,#6A5AA8 34%,#1E1930 72%,#100D19 100%)}
.kc-ncareer{background:radial-gradient(130% 120% at 84% -10%,#E4BD80 0%,#9A6E2E 34%,#241B0E 72%,#120E07 100%)}
.kc-nhouse{background:radial-gradient(130% 120% at 84% -10%,#8FB8A8 0%,#4A6E60 34%,#17211D 72%,#0C110F 100%)}
.kc-nqr{background:radial-gradient(130% 120% at 84% -10%,#9FB4CF 0%,#4C627E 34%,#1A2130 72%,#0D111A 100%)}
.kc-nreach{background:radial-gradient(130% 120% at 84% -10%,#7FC7C0 0%,#3E7A76 34%,#14211F 72%,#0A1110 100%)}
.kc-nacct{background:radial-gradient(130% 120% at 84% -10%,#7BD9B0 0%,#33886A 34%,#12241D 72%,#09120F 100%)}
.kc-nimport{background:radial-gradient(130% 120% at 84% -10%,#E2B267 0%,#8A5E20 34%,#241A0C 72%,#120D06 100%)}
.kc-ndoor{background:radial-gradient(130% 120% at 84% -10%,#C9A0D9 0%,#6E4A80 34%,#221828 72%,#110C14 100%)}

/* one drawn thing per card, none of them shared */
.kfx.dose i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.9);bottom:18px;animation:kfxDose 3.6s ease-in-out infinite;animation-delay:var(--d,0s);position:absolute}
@keyframes kfxDose{0%,10%{opacity:.25;transform:scale(.7)}30%,70%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(.7)}}
.kfx.frame s{position:absolute;bottom:14px;width:26px;height:34px;border-radius:4px;background:rgba(255,255,255,.55);animation:kfxFrame 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxFrame{0%{transform:translateX(26px);opacity:0}25%,65%{transform:none;opacity:1}100%{transform:translateX(-26px);opacity:0}}
.kfx.stage i{position:absolute;bottom:20px;width:22px;height:10px;border-radius:5px;background:rgba(255,255,255,.3);animation:kfxStage 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxStage{0%,100%{background:rgba(255,255,255,.28)}30%,55%{background:rgba(255,255,255,.95)}}
.kfx.rooms i{position:absolute;bottom:12px;width:18px;border-radius:3px 3px 0 0;background:rgba(255,255,255,.4);animation:kfxRoom 3.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxRoom{0%,100%{height:12px;background:rgba(255,255,255,.35)}45%{height:30px;background:rgba(255,255,255,.92)}}
.kfx.door s{position:absolute;left:8%;width:76%;height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.kfx.door s i{position:absolute;inset:0;background:rgba(255,255,255,.95);transform-origin:left;animation:kfxDoorFill 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxDoorFill{0%{transform:scaleX(0)}18%{opacity:1}70%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes kfxDoor{0%{width:0;opacity:0}20%{opacity:.9}70%{width:76%;opacity:.9}100%{width:76%;opacity:0}}
@media (prefers-reduced-motion:reduce){ .kfx i,.kfx s,.kfx b{animation:none!important} }

.kfx.mail s{position:absolute;bottom:16px;left:6%;width:30px;height:20px;border-radius:4px;border:1.5px solid rgba(255,255,255,.8);animation:kfxMail 3.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxMail{0%{transform:translateX(0) translateY(0);opacity:0}15%{opacity:1}70%{transform:translateX(150px) translateY(-14px);opacity:1}100%{transform:translateX(190px) translateY(-20px);opacity:0}}
.kfx.mail b{position:absolute;right:8%;bottom:14px;width:34px;height:24px;border-radius:5px;border:1.5px dashed rgba(255,255,255,.55)}

/* SIX CARDS DREW NOTHING ABOVE THEIR WORDS. Each draws its own subject now, in
   the flow above the rows, the way the rest of the rail does. */
.kfx.webhook s{position:absolute;left:8%;height:4px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.kfx.webhook s i{position:absolute;inset:0;background:rgba(255,255,255,.9);transform-origin:left;animation:kfxRun 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxRun{0%{transform:scaleX(0);opacity:0}16%{opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.kfx.post{}
.kfx.post b{position:absolute;right:8%;bottom:12px;width:44px;height:32px;border-radius:5px;border:1.5px solid rgba(255,255,255,.7)}
.kfx.post i{position:absolute;bottom:20px;width:14px;height:10px;border-radius:2px;background:rgba(255,255,255,.92);animation:kfxPost 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxPost{0%{left:10%;opacity:0}14%{opacity:1}68%{left:72%;opacity:1}100%{left:80%;opacity:0}}
.kfx.shared s{position:absolute;bottom:12px;width:30px;height:36px;border-radius:5px;border:1.5px solid rgba(255,255,255,.65)}
.kfx.shared i{position:absolute;bottom:24px;width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.9);animation:kfxLit 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxLit{0%,100%{opacity:.22}42%,58%{opacity:1}}
.kfx.choose s{position:absolute;left:8%;height:14px;border-radius:7px;background:rgba(255,255,255,.2);overflow:hidden}
.kfx.choose s i{position:absolute;inset:0;background:rgba(255,255,255,.85);transform-origin:left;animation:kfxPick 4.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxPick{0%,100%{transform:scaleX(.32);opacity:.55}40%,60%{transform:scaleX(1);opacity:1}}
.kfx.grid i{position:absolute;width:11px;height:11px;border-radius:2px;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);animation:kfxCell 4.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxCell{0%,28%{background:rgba(255,255,255,.18)}44%,100%{background:rgba(255,255,255,.85)}}
.kfx.ladder i{position:absolute;bottom:14px;width:24px;border-radius:4px 4px 0 0;background:rgba(255,255,255,.4);animation:kfxStep 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfxStep{0%,100%{height:12px;background:rgba(255,255,255,.35)}45%,62%{height:34px;background:rgba(255,255,255,.95)}}
@media (prefers-reduced-motion:reduce){ .kfx i,.kfx s,.kfx b{animation:none!important} }

/* ============================================================
   THE EIGHT NEW CARDS, DRAWN PROPERLY.
   The old ones were absolutely positioned inside a box with no
   width, so they collapsed to nothing: a picture nobody could
   see. These follow the pattern the rest of the rail uses, the
   one the medication card draws with: a real panel, padded,
   laid out in flow, so it is always the same size and always
   in the same place. Each one draws its own subject.
   ============================================================ */
.msx{position:relative;width:100%;height:96px;margin:0 0 12px;border-radius:12px;overflow:hidden;
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.msx *{box-sizing:border-box}
.msx .col{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.msx .rowline{height:6px;border-radius:3px;background:rgba(255,255,255,.28)}

/* An evening: three posters, the first one playing */
.msx-watch{gap:8px}
.msx-watch .poster{width:44px;height:62px;border-radius:6px;background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);position:relative;animation:msxPoster 5s ease-in-out infinite}
.msx-watch .poster:nth-child(2){animation-delay:.5s}.msx-watch .poster:nth-child(3){animation-delay:1s}
.msx-watch .poster .play{position:absolute;left:50%;top:50%;width:0;height:0;margin:-7px 0 0 -4px;
  border-left:12px solid rgba(255,255,255,.92);border-top:8px solid transparent;border-bottom:8px solid transparent}
@keyframes msxPoster{0%,100%{opacity:.45;transform:translateY(3px)}40%,60%{opacity:1;transform:none}}
.msx-watch .who{flex:1;display:flex;flex-direction:column;gap:6px}
.msx-watch .chip{height:16px;border-radius:8px;background:rgba(255,255,255,.2);width:78%}
.msx-watch .chip.s{width:54%;background:rgba(255,255,255,.14)}

/* Day one: a contact, a task and a bookmark sliding into one stack */
.msx-import .feed{flex:1;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.msx-import .feed span{height:14px;border-radius:4px;background:rgba(255,255,255,.75);
  animation:msxSlide 4.6s cubic-bezier(.4,0,.2,1) infinite}
.msx-import .feed span:nth-child(1){width:72%}
.msx-import .feed span:nth-child(2){width:86%;animation-delay:.45s;background:rgba(255,255,255,.55)}
.msx-import .feed span:nth-child(3){width:60%;animation-delay:.9s;background:rgba(255,255,255,.4)}
@keyframes msxSlide{0%{transform:translateX(-26px);opacity:0}22%,68%{transform:none;opacity:1}100%{transform:translateX(30px);opacity:0}}
.msx-import .stack{width:62px;height:66px;border-radius:8px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:6px}
.msx-import .stack i{height:5px;border-radius:3px;background:rgba(255,255,255,.5);animation:msxLand 4.6s ease-in-out infinite}
.msx-import .stack i:nth-child(2){animation-delay:.45s}.msx-import .stack i:nth-child(3){animation-delay:.9s}
@keyframes msxLand{0%,40%{opacity:0;transform:translateY(6px)}60%,100%{opacity:1;transform:none}}

/* The job: an application moving through its stages, and evidence kept */
.msx-career{flex-direction:column;align-items:stretch;gap:10px;justify-content:center}
.msx-career .track{display:flex;align-items:center;gap:0}
.msx-career .track i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
  background:transparent;animation:msxStageDot 4.4s ease-in-out infinite}
.msx-career .track i:nth-child(3){animation-delay:.5s}.msx-career .track i:nth-child(5){animation-delay:1s}
.msx-career .track i:nth-child(7){animation-delay:1.5s}
.msx-career .track s{flex:1;height:2px;background:rgba(255,255,255,.25);text-decoration:none}
@keyframes msxStageDot{0%,20%{background:transparent}35%,100%{background:rgba(255,255,255,.95)}}
.msx-career .ev{display:flex;gap:6px}
.msx-career .ev b{height:10px;border-radius:5px;background:rgba(255,255,255,.3);animation:msxEv 4.4s ease-in-out infinite}
.msx-career .ev b:nth-child(1){width:34%}.msx-career .ev b:nth-child(2){width:26%;animation-delay:.6s}
.msx-career .ev b:nth-child(3){width:30%;animation-delay:1.2s}
@keyframes msxEv{0%,40%{background:rgba(255,255,255,.22)}60%,100%{background:rgba(255,255,255,.7)}}

/* One set of accounts: two ledgers, one figure */
.msx-acct{justify-content:space-between}
.msx-acct .led{width:38%;display:flex;flex-direction:column;gap:5px}
.msx-acct .led b{height:8px;border-radius:4px;background:rgba(255,255,255,.28)}
.msx-acct .led b.big{height:14px;background:rgba(255,255,255,.85);animation:msxAgreeBar 4.6s ease-in-out infinite}
.msx-acct .led:last-child b.big{animation-delay:.5s}
@keyframes msxAgreeBar{0%,100%{width:52%;opacity:.6}45%,65%{width:88%;opacity:1}}
.msx-acct .eq{width:22px;display:flex;flex-direction:column;gap:4px;align-items:center}
.msx-acct .eq i{width:16px;height:2px;background:rgba(255,255,255,.75);animation:msxEq 4.6s ease-in-out infinite}
.msx-acct .eq i:nth-child(2){animation-delay:.2s}
@keyframes msxEq{0%,30%{opacity:.25}55%,100%{opacity:1}}

/* Every day: the doses, and the week behind them */
.msx-meds{flex-direction:column;align-items:stretch;gap:10px;justify-content:center}
.msx-meds .pills{display:flex;gap:8px}
.msx-meds .pills i{width:34px;height:15px;border-radius:8px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
  position:relative;overflow:hidden;animation:msxTake 5s ease-in-out infinite}
.msx-meds .pills i:nth-child(2){animation-delay:.6s}.msx-meds .pills i:nth-child(3){animation-delay:1.2s}
.msx-meds .pills i:nth-child(4){animation-delay:1.8s}
@keyframes msxTake{0%,12%{background:transparent}26%,100%{background:rgba(255,255,255,.9)}}
.msx-meds .week{display:flex;gap:5px}
.msx-meds .week b{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);animation:msxDay7 5s ease-in-out infinite}
.msx-meds .week b:nth-child(1){animation-delay:2.2s}.msx-meds .week b:nth-child(2){animation-delay:2.35s}
.msx-meds .week b:nth-child(3){animation-delay:2.5s}.msx-meds .week b:nth-child(4){animation-delay:2.65s}
.msx-meds .week b:nth-child(5){animation-delay:2.8s}.msx-meds .week b:nth-child(6){animation-delay:2.95s}
.msx-meds .week b:nth-child(7){animation-delay:3.1s}
@keyframes msxDay7{0%,20%{background:rgba(255,255,255,.14)}35%,100%{background:rgba(255,255,255,.8)}}

/* Yours to take: a key, and everything leaving through the door it opens */
.msx-door .key{width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;position:relative}
.msx-door .key::after{content:"";width:22px;height:3px;background:rgba(255,255,255,.7);position:absolute;left:44px;border-radius:2px}
.msx-door .out{flex:1;display:flex;flex-direction:column;gap:8px;padding-left:22px;overflow:hidden}
.msx-door .out span{height:12px;border-radius:4px;background:rgba(255,255,255,.7);animation:msxOut 4.4s cubic-bezier(.4,0,.2,1) infinite}
.msx-door .out span:nth-child(1){width:64%}
.msx-door .out span:nth-child(2){width:80%;animation-delay:.5s;background:rgba(255,255,255,.5)}
.msx-door .out span:nth-child(3){width:52%;animation-delay:1s;background:rgba(255,255,255,.35)}
@keyframes msxOut{0%{transform:translateX(-18px);opacity:0}20%,60%{transform:none;opacity:1}100%{transform:translateX(48px);opacity:0}}

/* Household: one roof, and everyone under it */
.msx-house .home{width:74px;height:64px;position:relative}
.msx-house .home .roof{position:absolute;top:0;left:6px;right:6px;height:22px;
  background:rgba(255,255,255,.22);clip-path:polygon(50% 0,100% 100%,0 100%)}
.msx-house .home .body{position:absolute;bottom:0;left:10px;right:10px;height:44px;border-radius:4px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px}
.msx-house .home .body i{border-radius:2px;background:rgba(255,255,255,.18);animation:msxWindow 4.6s ease-in-out infinite}
.msx-house .home .body i:nth-child(2){animation-delay:.55s}.msx-house .home .body i:nth-child(3){animation-delay:1.1s}
.msx-house .home .body i:nth-child(4){animation-delay:1.65s}
@keyframes msxWindow{0%,25%{background:rgba(255,255,255,.16)}45%,75%{background:rgba(255,255,255,.9)}100%{background:rgba(255,255,255,.16)}}
.msx-house .folk{flex:1;display:flex;gap:8px;align-items:center}
.msx-house .folk b{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
  animation:msxFolk 4.6s ease-in-out infinite}
.msx-house .folk b:nth-child(2){animation-delay:.5s}.msx-house .folk b:nth-child(3){animation-delay:1s}
@keyframes msxFolk{0%,100%{background:transparent;transform:scale(.92)}45%{background:rgba(255,255,255,.75);transform:none}}

/* Codes: the card assembling itself, and the beam that reads it */
.msx-qr{gap:14px}
.msx-qr .code{width:68px;height:68px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
  gap:3px;position:relative;padding:2px}
.msx-qr .code i{border-radius:2px;background:rgba(255,255,255,.85);animation:msxCell2 4.8s ease-in-out infinite}
.msx-qr .code i.off{background:rgba(255,255,255,.12)}
.msx-qr .beam{position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.95);
  box-shadow:0 0 8px rgba(255,255,255,.7);animation:msxBeam 4.8s ease-in-out infinite}
@keyframes msxCell2{0%,8%{opacity:0;transform:scale(.6)}22%,100%{opacity:1;transform:none}}
@keyframes msxBeam{0%,20%{top:2px;opacity:0}30%{opacity:1}70%{top:64px;opacity:1}80%,100%{opacity:0}}
.msx-qr .said{flex:1;display:flex;flex-direction:column;gap:7px}
.msx-qr .said b{height:9px;border-radius:5px;background:rgba(255,255,255,.32);animation:msxSaid 4.8s ease-in-out infinite}
.msx-qr .said b:nth-child(1){width:76%}
.msx-qr .said b:nth-child(2){width:58%;animation-delay:.4s}
.msx-qr .said b:nth-child(3){width:66%;animation-delay:.8s}
@keyframes msxSaid{0%,55%{background:rgba(255,255,255,.22)}72%,100%{background:rgba(255,255,255,.75)}}

@media (max-width:560px){ .msx{height:84px;padding:10px 12px;gap:8px} .msx-watch .poster{width:36px;height:54px}
  .msx-import .stack{width:52px;height:56px} .msx-house .home{width:62px;height:54px} .msx-qr .code{width:58px;height:58px} }
@media (prefers-reduced-motion:reduce){ .msx *{animation:none!important} }

/* ---- What arrived lately: eight cards, each with a small drawing that moves ---- */
.kc-lsheet{background:radial-gradient(130% 120% at 84% -10%,#9DC3F0 0%,#3D6EA8 34%,#14243A 72%,#0B1421 100%)}
.kc-ltoday{background:radial-gradient(130% 120% at 84% -10%,#F0D08F 0%,#A67A2C 34%,#2C2010 72%,#150F07 100%)}
.kc-lrecords{background:radial-gradient(130% 120% at 84% -10%,#F0A3A3 0%,#A83D3D 34%,#3A1414 72%,#210B0B 100%)}
.kc-llearn{background:radial-gradient(130% 120% at 84% -10%,#B7E3C8 0%,#3F8C63 34%,#14301F 72%,#0B1A11 100%)}
.kc-lnew{background:radial-gradient(130% 120% at 84% -10%,#C9B6F2 0%,#6A4FB0 34%,#241B3A 72%,#130E21 100%)}
.kc-lspeak{background:radial-gradient(130% 120% at 84% -10%,#F5C6A0 0%,#B8672C 34%,#3A2212 72%,#1F1208 100%)}
.kc-ldoors{background:radial-gradient(130% 120% at 84% -10%,#A9E1E8 0%,#2E8A96 34%,#12303A 72%,#0A1B20 100%)}
.kc-lprivate{background:radial-gradient(130% 120% at 84% -10%,#D0D6E2 0%,#5A6A86 34%,#1E2633 72%,#0F141C 100%)}
.kcard .klede{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);margin:0}
.lx{position:relative;width:100%;height:112px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);overflow:hidden;color:#fff}
.lx-sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:10px}
.lx-sheet i{display:block;border-radius:7px;background:rgba(255,255,255,.28);animation:lxbreath 5s ease-in-out infinite}
.lx-sheet i:nth-child(2n){animation-delay:.6s}.lx-sheet i:nth-child(3n){animation-delay:1.2s}
.lx-sheet i.mv{background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.35);animation:lxmove 5s ease-in-out infinite;z-index:2}
@keyframes lxbreath{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes lxmove{0%,15%{transform:none}35%,60%{transform:translate(-118%,0) scale(1.08)}80%,100%{transform:translate(-236%,0) scale(1)}}
.lx-today{padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.lx-today .ln{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.55);opacity:0;animation:lxline 6s ease-in-out infinite}
.lx-today .l1{width:46%}.lx-today .l2{width:78%;animation-delay:.5s}.lx-today .l3{width:64%;animation-delay:1s}
.lx-today .pill{align-self:flex-start;font-size:10.5px;padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);opacity:0;animation:lxline 6s ease-in-out infinite;animation-delay:1.6s}
@keyframes lxline{0%{opacity:0;transform:translateY(6px)}12%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.lx-records{display:flex;align-items:center;gap:12px;padding:14px}
.lx-records .card{flex:1;height:60px;border-radius:10px;background:rgba(255,255,255,.2);display:flex;align-items:center;padding:0 10px}
.lx-records .card svg{width:100%;height:30px;color:#fff;stroke-dasharray:260;stroke-dashoffset:260;animation:lxbeat 4s linear infinite}
@keyframes lxbeat{to{stroke-dashoffset:0}}
.lx-records .page{width:54px;height:76px;border-radius:6px;background:#fff;display:flex;flex-direction:column;gap:6px;padding:10px 8px;transform:translateX(70px);animation:lxpage 6s ease-in-out infinite}
.lx-records .page b{display:block;height:5px;border-radius:3px;background:rgba(40,60,90,.35)}.lx-records .page b:first-child{width:60%}
@keyframes lxpage{0%,20%{transform:translateX(70px);opacity:0}40%,85%{transform:none;opacity:1}100%{transform:translateX(70px);opacity:0}}
.lx-learn{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.lx-learn .bar{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.2);overflow:hidden}
.lx-learn .bar i{display:block;height:100%;width:0;border-radius:5px;background:#fff;animation:lxfill 5s ease-in-out infinite}
@keyframes lxfill{0%{width:0}60%,90%{width:66%}100%{width:0}}
.lx-learn .dots{display:flex;gap:6px}.lx-learn .dots b{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.25)}
.lx-learn .dots b:nth-child(-n+3){background:#fff}.lx-learn .dots b:nth-child(4){animation:lxdot 5s ease-in-out infinite}
@keyframes lxdot{0%,50%{background:rgba(255,255,255,.25)}70%,100%{background:#fff}}
.lx-learn .pay{position:absolute;right:12px;top:10px;width:110px;height:34px;color:#fff}.lx-learn .pay svg{width:100%;height:100%;stroke-dasharray:140;stroke-dashoffset:140;animation:lxbeat 5s ease-in-out infinite}
.lx-new{display:flex;align-items:center;justify-content:space-around;padding:14px}
.lx-new span{width:44px;height:44px;color:#fff}.lx-new svg{width:100%;height:100%}
.lx-new .fork{animation:lxtilt 4s ease-in-out infinite}
@keyframes lxtilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.lx-new .batt{width:52px;height:24px;border:2px solid #fff;border-radius:6px;padding:3px;position:relative}
.lx-new .batt::after{content:"";position:absolute;right:-6px;top:7px;width:4px;height:8px;background:#fff;border-radius:2px}
.lx-new .batt i{display:block;height:100%;width:20%;border-radius:2px;background:#fff;animation:lxcharge 4s ease-in-out infinite}
@keyframes lxcharge{0%{width:20%}50%{width:92%}100%{width:20%}}
.lx-new .key{animation:lxkey 4s ease-in-out infinite}
@keyframes lxkey{0%,100%{transform:rotate(0)}50%{transform:rotate(-30deg)}}
.lx-speak{display:flex;align-items:center;gap:16px;padding:14px 18px}
.lx-speak .waves{display:flex;align-items:center;gap:4px;height:44px}
.lx-speak .waves i{width:6px;height:10px;border-radius:3px;background:#fff;animation:lxwave 1.2s ease-in-out infinite}
.lx-speak .waves i:nth-child(2){animation-delay:.15s}.lx-speak .waves i:nth-child(3){animation-delay:.3s}.lx-speak .waves i:nth-child(4){animation-delay:.45s}.lx-speak .waves i:nth-child(5){animation-delay:.6s}
@keyframes lxwave{0%,100%{height:10px}50%{height:38px}}
.lx-speak .log{display:flex;flex-direction:column;gap:6px}.lx-speak .log b{font-weight:500;font-size:10.5px;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.18);opacity:0;animation:lxline 6s ease-in-out infinite}
.lx-speak .log b:nth-child(2){animation-delay:.6s}.lx-speak .log b:nth-child(3){animation-delay:1.2s}
.lx-doors{padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lx-doors .src{font-size:10.5px;padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);animation:lxbreath 4s ease-in-out infinite}
.lx-doors .src:nth-child(2){animation-delay:.5s}.lx-doors .src:nth-child(3){animation-delay:1s}
.lx-doors .arrow{width:100%;height:14px;position:relative}.lx-doors .arrow::before{content:"";position:absolute;left:12%;right:12%;top:6px;height:2px;background:rgba(255,255,255,.6);background:linear-gradient(90deg,transparent,#fff,transparent);background-size:40% 100%;animation:lxflow 2s linear infinite}
@keyframes lxflow{from{background-position:-40% 0}to{background-position:140% 0}}
.lx-doors .box{font-size:11px;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.9);color:#12202e}.lx-doors .box em{font-style:normal;font-weight:700}
.lx-private{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.lx-private .lock{position:relative;width:44px;height:48px}
.lx-private .shackle{position:absolute;left:8px;top:0;width:28px;height:26px;border:4px solid #fff;border-bottom:0;border-radius:14px 14px 0 0;transform-origin:left bottom;animation:lxshackle 5s ease-in-out infinite}
.lx-private .body{position:absolute;left:0;top:20px;width:44px;height:28px;border-radius:7px;background:#fff}
@keyframes lxshackle{0%,20%{transform:translateY(-8px) rotate(-14deg)}45%,100%{transform:none}}
.lx-private .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.85)}
@media (prefers-reduced-motion:reduce){ .lx *{animation:none!important} }


/* the hero's gold line is a line of its own, under the promise, not the promise continuing */
.mega h1 .au.au-sub{display:block;font-size:.5em;line-height:1.25;margin:.55em auto 0;font-weight:600;max-width:760px}

/* the window under the hero: Today as the app draws it */
.sh-line{font-size:13px;color:#c8d2e0;margin:2px 4px 10px}.sh-line b{color:#fff}.sh-ok{color:#E4BD80}
.sh-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-top:1px solid rgba(255,255,255,.06)}.sh-row:first-of-type{border-top:0}
.sh-n{width:16px;font-size:11px;color:#8ea0b6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.sh-t{flex:1;display:flex;flex-direction:column;gap:2px}.sh-t b{font-size:12.5px;color:#fff;font-weight:600}.sh-t i{font-style:normal;font-size:11px;color:#8ea0b6}
.sh-done{font-size:11px;padding:4px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.18);color:#fff}
.sh-since{font-size:12px;color:#c8d2e0;line-height:1.45}.sh-since b{color:#fff}