/* Recovery Mode · site v7. Bauhaus colour blocks + kinetic type on the navy ground.
   Layered on top of site.css: the shared components (flip-book, letter game, hint pages, sign-up) keep working,
   this file restyles them flat and adds the new landing page.
   Motion budget: one orchestrated entrance (the hero), one scroll-driven sequence (the charge section, pure CSS on the
   compositor), and motion that answers the visitor. Review pass 13 Oct 2026: alignment, rhythm, smoothness. */
:root{
  --navy:#0D152C; --navy-2:#111B38; --cobalt:#2452C8; --cobalt-2:#1E46B0; --sun:#F5B83D; --red:#E0412F; --brick:#B8321D; --cream:#F4ECDC; --ink7:#14213D; --mute7:#A6AEC4;
  --bg:#0D152C; --surface:#111B38; --surface-2:#111B38; --ink:#F4ECDC; --ink-2:#D9DDE8; --muted:#A6AEC4;
  --line:#2B3762; --line-2:#6B77A0;                      /* line-2 is a component boundary: 4.1:1 on navy */
  --accent:var(--sun); --accent-soft:rgba(245,184,61,.16);
  --radius:0px; --shadow:none;
  --e-out:cubic-bezier(.23,1,.32,1); --e-io:cubic-bezier(.77,0,.175,1);
  --wrap7:1240px; --gut:clamp(16px,4vw,48px); --sec:clamp(72px,9vw,128px);
}
html{-webkit-tap-highlight-color:transparent}
@media (max-width:860px){html{scroll-padding-bottom:96px}}

/* one container for every section and every page */
.wrap,.wrap7{max-width:var(--wrap7);margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.qp>.wrap.narrow{max-width:var(--wrap7)}
.qp>.wrap.narrow>*{max-width:760px}
body{font-size:18px}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:.95;letter-spacing:0}
.kicker{display:none}
.sec-head{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.nowrap{white-space:nowrap}

/* skip link */
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--sun);color:var(--ink7);padding:10px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{left:16px}

/* buttons: flat, pill, press sinks a little; hover only for a real pointer */
.btn{border-radius:999px;transition:transform .16s var(--e-out),background-color .2s ease,color .2s ease}
.btn-sun,.btn-sun:hover{box-shadow:none}
.btn-sun::after{display:none!important}
.btn-sun:hover{transform:none}
@media (hover:hover) and (pointer:fine){.btn-sun:hover{background:#FFC655}.g7 .btn-sun:hover{background:#000}.btn-ghost:hover{background:rgba(244,236,220,.08)}}
.btn:active{transform:scale(.97);transition-duration:.08s}
html.motion .rv{opacity:1!important;transform:none!important;transition:none!important}

/* header */
.top{background:var(--navy);box-shadow:none;border-bottom:1px solid var(--line);top:0;padding-top:env(safe-area-inset-top,0px)}
.top.scrolled{box-shadow:none}
.brand{min-height:44px}
.motion .home-top .toggle,.motion .home-top .toggle i,.motion .home-top .toggle b{animation:none!important}
.top .btn{transition:opacity .2s ease,transform .16s var(--e-out),background-color .2s ease}
@media (max-width:860px){.bar-on .top .btn{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}}

/* ===================================================== hero */
.h7{position:relative;background:var(--navy);overflow:clip;padding-block:clamp(32px,5vw,72px) clamp(48px,6vw,96px)}
.h7-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,64px);align-items:center}
.h7-for{font-size:1rem;color:var(--mute7);margin-bottom:20px;max-width:44ch;text-wrap:pretty}
.kt{font-family:var(--f-head);font-weight:700;text-transform:uppercase;font-size:clamp(3rem,5.6vw,6.1rem);line-height:.88;letter-spacing:-.005em;color:var(--cream);margin:0}
.kt .ln{display:block;white-space:nowrap}
.kt .ln:last-child{padding-bottom:.4em}                        /* room for the sagging word, so the gap below is real */
.kt .m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.2em;margin-bottom:-.2em}
.kt .m:has(.w-r1),.kt .m:has(.w-r2){padding:.2em .2em .2em;margin:-.2em -.2em -.2em}
.kt .m:has(.w-bor){padding:.2em .4em .6em 0;margin:-.2em -.4em -.6em 0}
.h7-done .kt .m{overflow:visible}
.kt .w{display:inline-block;transform-origin:50% 85%}
.kt .w-bor{color:var(--sun);transform:translateY(.09em) rotate(5.5deg);transform-origin:12% 90%}
.h7-sub{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;color:var(--ink-2);max-width:44ch;margin-top:clamp(14px,1.8vw,24px)}
.h7-cta{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:28px}
.h7-status{margin-top:16px;font-size:.95rem;color:var(--mute7);max-width:52ch;text-wrap:pretty}
.tlink{color:var(--cream)}

/* the Bauhaus construction. Every position is in width units of the art box (cqw), so it holds at every size:
   the disc, the bars and the art box share one bottom line; the half disc and bars share the right edge. */
.h7-art{position:relative;container-type:inline-size;width:100%;max-width:560px;height:auto;aspect-ratio:100/92.4;justify-self:end}
.b{position:absolute;display:block}
.b-sq{left:0;top:20.4cqw;width:72cqw;height:72cqw;border-radius:50%;background:var(--sun)}
.b-half{right:0;top:0;width:46cqw;height:23cqw;background:var(--red);border-radius:23cqw 23cqw 0 0}
.b-bars{right:0;top:30cqw;width:26cqw;height:62.4cqw;display:flex;flex-direction:column-reverse;gap:3.4cqw}
.b-bars i{flex:1;background:var(--cream);transform-origin:0 50%}
.b-bars i:first-child{background:var(--sun)}
.b-book{left:12cqw;top:6cqw;width:50cqw;transform:rotate(-6deg);box-shadow:10px 10px 0 #050A18}
.b-book img{display:block;width:100%;height:auto}
@media (max-width:860px){
  .h7-grid{grid-template-columns:1fr}
  .h7-art{max-width:440px;justify-self:start;margin-top:12px}
  .kt{font-size:clamp(2.9rem,13vw,4.6rem)}
}
@media (min-width:640px) and (max-width:860px){
  .h7-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .kt{font-size:clamp(2.9rem,8.4vw,4.6rem)}
  .h7-art{margin-top:0;justify-self:end}
}

/* before the hero sequence starts (the head script sets h7-wait; it clears itself after 2.5 s whatever happens) */
html.motion.h7-wait .h7 .kt .w,html.motion.h7-wait .h7 .b,html.motion.h7-wait .h7-for,html.motion.h7-wait .h7-sub,html.motion.h7-wait .h7-cta,html.motion.h7-wait .h7-status{opacity:0}
/* if the script is late, the failsafe fades the hero in instead of popping it (the entrance animations override this) */
html.motion .h7 .kt .w,html.motion .h7 .b,html.motion .h7-for,html.motion .h7-sub,html.motion .h7-cta,html.motion .h7-status{transition:opacity .3s ease}

/* ===================================================== contents band (sun yellow ticker) */
.mq{background:var(--sun);color:var(--ink7);border:0;padding-block:14px}
.mq-track span{font-family:var(--f-head);font-weight:700;text-transform:uppercase;font-size:1.35rem;letter-spacing:.02em;color:var(--ink7)}
.mq-track i{font-style:normal;color:var(--ink7);opacity:1;font-size:.9rem}
@supports (animation-timeline: scroll()){
  html.motion .mq-track{animation:mq-scroll linear both;animation-timeline:scroll(root block)}
  @keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-40%)}}
}

/* ===================================================== the charge (scroll-driven, Apple-style sticky sequence)
   Static fallback first: the four levels side by side under a full battery.
   Where scroll-driven animations exist and motion is welcome, the section becomes a tall track with a sticky stage:
   as you scroll, the battery charges one cell at a time and each level's line rises in, holds, and leaves.
   Only transform and opacity animate, on the compositor. */
.chg{background:var(--navy);color:var(--cream);position:relative;padding-block:0;
  --bw:clamp(4px,.6vw,7px);--bp:clamp(8px,1.2vw,14px);--bg:clamp(6px,1vw,12px);--nub:clamp(18px,2.4vw,30px)}
.chg-stage{min-height:auto;padding-block:var(--sec);display:flex;align-items:center}
.chg-in{width:100%;display:grid;gap:clamp(28px,4vw,48px)}
.chg-top{font-size:1.05rem;color:var(--mute7);max-width:46ch;text-wrap:pretty}
/* static layout: the four levels stand exactly over the four cells they belong to */
.chg-words{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bg);padding-inline:calc(var(--bw) + var(--bp));margin-right:var(--nub)}
.chg-line{display:flex;flex-direction:column;gap:10px;margin:0}
.chg-line small{font:700 1rem/1.1 var(--f-head);text-transform:uppercase;letter-spacing:.08em;color:var(--sun)}
.chg-line b{font:700 clamp(1.8rem,3vw,2.6rem)/.92 var(--f-head);text-transform:uppercase;text-wrap:balance}
.chg-bat{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--bg);padding:var(--bp);border:var(--bw) solid var(--cream);border-radius:clamp(14px,2vw,26px);margin-right:var(--nub);height:clamp(110px,16vw,210px)}
.chg-bat::after{content:"";position:absolute;right:calc(-1 * var(--nub) - var(--bw));top:30%;height:40%;width:clamp(12px,1.6vw,20px);background:var(--cream);border-radius:0 8px 8px 0}
.chg-bat i{display:block;border-radius:clamp(6px,1vw,12px);transform-origin:0 50%}
.chg-bat .c1{background:var(--red)}.chg-bat .c2{background:var(--sun)}.chg-bat .c3{background:var(--cobalt)}.chg-bat .c4{background:var(--cream)}
.chg-sh{display:none}
@media (max-width:760px){.chg-words{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;padding-inline:0;margin-right:0}}

/* the scroll sequence: a sticky stage; the statements roll through a masked window like a split-flap,
   the battery charges one cell per level, a Bauhaus shape per level turns in beside the words,
   and when the last cell lands the battery outline lights up: fully charged. */
@supports (animation-timeline: view()){
  html.motion .chg{height:320vh;view-timeline:--chg block;--fs:clamp(3.2rem,8.6vw,8.6rem);--lab:clamp(1rem,1.6vw,1.3rem);--E:cubic-bezier(.65,0,.35,1)}
  html.motion .chg-stage{position:sticky;top:0;height:100vh;height:100svh;padding-block:calc(var(--head-h) + 24px) 40px;overflow:clip}
  html.motion .chg-in{grid-template-columns:minmax(0,1fr) clamp(140px,19vw,270px);column-gap:clamp(24px,4vw,64px)}
  html.motion .chg-top{grid-column:1;grid-row:1}
  html.motion .chg-words{grid-column:1;grid-row:2;display:block;position:relative;padding:0;margin:0;overflow:clip;
    height:calc(var(--lab) + 14px + 1.72 * var(--fs) + 8px)}
  html.motion .chg-bat{grid-column:1/-1;grid-row:3}
  html.motion .chg-line{position:absolute;inset:0;justify-content:flex-start;gap:14px;transform:translateY(101%);overflow:clip}   /* each statement is clipped to its own window: lines can never print over each other */
  html.motion .chg-line b{font-size:var(--fs);line-height:.86}
  html.motion .chg-line small{font-size:var(--lab)}
  html.motion .chg-line.l1{transform:none;animation:chg-out var(--E) forwards;animation-timeline:--chg;animation-range:contain 20% contain 27%}
  html.motion .chg-line.l2{animation:chg-in var(--E) both,chg-out var(--E) forwards;animation-timeline:--chg,--chg;animation-range:contain 20% contain 27%,contain 45% contain 52%}
  html.motion .chg-line.l3{animation:chg-in var(--E) both,chg-out var(--E) forwards;animation-timeline:--chg,--chg;animation-range:contain 45% contain 52%,contain 70% contain 77%}
  html.motion .chg-line.l4{animation:chg-in var(--E) both;animation-timeline:--chg;animation-range:contain 70% contain 77%}
  @keyframes chg-in{from{transform:translateY(101%)}to{transform:none}}
  @keyframes chg-out{from{transform:none}to{transform:translateY(-101%)}}
  /* the cells charge as each statement arrives */
  html.motion .chg-bat i{transform:scaleX(0);animation:chg-cell var(--E) both;animation-timeline:--chg}
  html.motion .chg-bat .c1{transform:none;animation:none}
  html.motion .chg-bat .c2{animation-range:contain 20% contain 30%}
  html.motion .chg-bat .c3{animation-range:contain 45% contain 55%}
  html.motion .chg-bat .c4{animation-range:contain 70% contain 80%}
  @keyframes chg-cell{to{transform:none}}
  /* payoff: the outline turns sun yellow and the battery gives one confident beat */
  html.motion .chg-bat::before{content:"";position:absolute;inset:calc(-1 * var(--bw));border:var(--bw) solid var(--sun);border-radius:inherit;opacity:0;pointer-events:none;
    animation:chg-lit linear both;animation-timeline:--chg;animation-range:contain 80% contain 86%}
  @keyframes chg-lit{to{opacity:1}}
  html.motion .chg-bat{animation:chg-full var(--E) both;animation-timeline:--chg;animation-range:contain 80% contain 92%}
  @keyframes chg-full{0%,100%{transform:none}45%{transform:scale(1.025)}}
  /* one Bauhaus shape per level, in the colour of the cell it charges */
  html.motion .chg-sh{display:block;grid-column:2;grid-row:1/3;align-self:center;justify-self:center;width:100%;aspect-ratio:1;position:relative;
    transform:scale(.2) rotate(-90deg);opacity:0}
  html.motion .chg-sh.s1{border-radius:50%;background:var(--red)}
  html.motion .chg-sh.s2{background:var(--sun);width:86%}
  html.motion .chg-sh.s3{background:var(--cobalt);clip-path:polygon(50% 0,100% 100%,0 100%)}
  html.motion .chg-sh.s4{width:70%;border-radius:50%;background:var(--cream);translate:-14% 0}
  html.motion .chg-sh.s4::after{content:"";position:absolute;width:100%;aspect-ratio:1;border-radius:50%;background:var(--sun);left:42%;top:0;mix-blend-mode:normal;opacity:.96}
  html.motion .chg-sh.s1{transform:none;opacity:1;animation:sh-out var(--E) forwards;animation-timeline:--chg;animation-range:contain 20% contain 27%}
  html.motion .chg-sh.s2{animation:sh-in var(--E) both,sh-out var(--E) forwards;animation-timeline:--chg,--chg;animation-range:contain 21% contain 30%,contain 45% contain 52%}
  html.motion .chg-sh.s3{animation:sh-in var(--E) both,sh-out var(--E) forwards;animation-timeline:--chg,--chg;animation-range:contain 46% contain 55%,contain 70% contain 77%}
  html.motion .chg-sh.s4{animation:sh-in var(--E) both;animation-timeline:--chg;animation-range:contain 71% contain 80%}
  @keyframes sh-in{from{opacity:0;transform:scale(.2) rotate(-90deg)}30%{opacity:1}to{opacity:1;transform:none}}
  @keyframes sh-out{from{opacity:1;transform:none}70%{opacity:0}to{opacity:0;transform:translateY(-35%) rotate(60deg) scale(.6)}}
  /* phones and portrait tablets: the stage is tall and narrow, so the level shape gets its own row in the middle
     and the composition fills the screen top to bottom (no empty band above or below) */
  @media (max-width:860px){
    html.motion .chg{--fs:clamp(3.2rem,14vw,8rem)}
    html.motion .chg-stage{padding-block:calc(var(--head-h) + 20px) calc(env(safe-area-inset-bottom,0px) + 108px)}
    html.motion .chg-in{height:100%;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;row-gap:clamp(20px,3svh,36px)}
    html.motion .chg-top{grid-row:1}
    html.motion .chg-sh{grid-column:1;grid-row:2;align-self:center;justify-self:start;width:auto;height:min(100%,46vw,30svh);max-height:100%}
    html.motion .chg-sh.s2{width:auto;height:min(86%,40vw,26svh)}
    html.motion .chg-sh.s4{width:auto;height:min(80%,37vw,24svh);translate:0 0}
    html.motion .chg-words{grid-column:1;grid-row:3}
    html.motion .chg-bat{grid-row:4;height:clamp(104px,28vw,230px)}
  }
}


/* ===================================================== energy levels: the charge selector */
.lv{background:var(--navy);padding-block:var(--sec)}
.chg+.lv{padding-top:clamp(24px,4vw,56px)}
.lv-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 56px;align-items:last baseline;margin-bottom:40px}
.lv-head p{color:var(--ink-2);max-width:46ch}
@media (max-width:860px){.lv-head{grid-template-columns:1fr}}
.sel7{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:3px solid var(--cream);border-radius:999px;padding:5px;gap:0;max-width:none}
.sel7-knob{position:absolute;top:5px;left:5px;width:calc((100% - 10px)/4);height:calc(100% - 10px);border-radius:999px;background:var(--sun);transition:transform .32s var(--e-out)}
.sel7 button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:8px 10px;border:0;background:none;color:var(--cream);font:700 1.05rem/1.05 var(--f-head);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;border-radius:999px;white-space:nowrap;transition:color .2s ease,transform .12s var(--e-out)}
.sel7 button:active{transform:scale(.97)}
.sel7 button[aria-selected=true]{color:var(--ink7)}
.sel7 button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.sel7 .gl{flex:none;display:block}
@media (hover:hover) and (pointer:fine){.sel7 button:not([aria-selected=true]):hover{color:var(--sun)}}
@media (max-width:860px){.sel7{border-radius:28px;grid-template-columns:repeat(2,minmax(0,1fr))}.sel7-knob{width:calc((100% - 10px)/2);height:calc((100% - 10px)/2);border-radius:22px}.sel7 button{min-height:54px;font-size:.98rem;border-radius:22px}}
@media (max-width:420px){.sel7 button{flex-direction:column;gap:5px;min-height:70px;padding:8px 6px;font-size:.92rem;letter-spacing:.02em}}

.lv-panels{position:relative;margin-top:28px;display:grid;overflow:clip}
.lvp{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);color:var(--ink7);position:relative;overflow:hidden;z-index:0}
.lvp[hidden]{display:grid!important;visibility:hidden;pointer-events:none}       /* every panel keeps its height: the box is always the tallest */
.lvp[hidden].lvp-under{visibility:visible}
.lvp:not([hidden]){z-index:1}
.lvp-LOW{background:var(--sun)}.lvp-HALF{background:var(--cream)}.lvp-FULL{background:var(--cobalt);color:var(--cream)}.lvp-MULTI{background:var(--brick);color:#FFF6E6}
.lvp-txt{padding:clamp(28px,4.5vw,64px);display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
.lvp-time{font:700 1.15rem/1 var(--f-head);letter-spacing:.04em;text-transform:uppercase}
.lvp h3{font:700 clamp(2.4rem,5vw,4.4rem)/.9 var(--f-head);text-transform:uppercase;margin:0}
@media (min-width:861px){.lvp h3{white-space:nowrap}}
.lvp p{max-width:440px;font-size:1.06rem}
.lvp-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:0;max-width:440px}
.lvp-list li{padding:11px 0;border-top:2px solid currentColor;font-weight:600}
.lvp-list li:last-child{border-bottom:2px solid currentColor}
.lvp-art{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,48px)}
.lvp-art .shape{position:absolute;z-index:0}
.lvp-LOW .shape{width:78%;aspect-ratio:1;border-radius:50%;background:var(--red);right:-14%;top:-10%}
.lvp-HALF .shape{width:70%;aspect-ratio:1;background:var(--cobalt);right:-8%;bottom:-12%}
.lvp-FULL .shape{width:0;height:0;border-left:min(22vw,300px) solid transparent;border-bottom:min(30vw,420px) solid var(--sun);right:0;bottom:0}
.lvp-MULTI .shape{width:46%;aspect-ratio:1;border-radius:50%;background:var(--sun);right:-6%;top:6%}
.lvp-MULTI .lvp-art::after{content:"";position:absolute;z-index:0;width:30%;aspect-ratio:1;border-radius:50%;background:var(--cream);right:30%;top:44%}
.lvp-shot{position:relative;z-index:1;display:block;width:min(100%,360px);padding:10px;border:0;background:#fff;cursor:zoom-in;box-shadow:12px 12px 0 rgba(13,21,44,.85);transform:rotate(2.5deg);transition:transform .2s var(--e-out)}
.lvp-shot img{display:block;width:100%;height:auto}
@media (hover:hover) and (pointer:fine){.lvp-shot:hover{transform:rotate(0) translateY(-4px)}}
.lvp-shot:focus-visible{outline:3px solid var(--navy);outline-offset:6px}
.lvp-FULL .lvp-shot:focus-visible,.lvp-MULTI .lvp-shot:focus-visible{outline-color:var(--cream)}
@media (max-width:860px){.lvp{grid-template-columns:1fr}.lvp-art{padding-top:0;padding-bottom:40px}.lvp-shot{width:min(78%,320px)}}
@media (max-width:420px){.lvp-FULL .shape{border-left-width:120px;border-bottom-width:160px}.lvp-art{padding-bottom:44px}}

/* ===================================================== look inside: flip-book + feature cards, flattened */
#inside{background:var(--navy);padding-block:var(--sec)}
#inside>.wrap:first-child{position:relative;padding-top:clamp(40px,5vw,64px)}
.feat article{background:var(--navy-2);border:2px solid var(--line);border-radius:0;box-shadow:none}
.feat .shot{background:var(--cream)}
.feat .num{color:var(--sun)}
.bk-btn{border-radius:50%}
.bk-dots button[aria-current=true],.bk-dot.on{background:none}
.bk-ind{background:color-mix(in srgb,var(--sun) 28%,var(--navy))}
.bk-ind i{background:var(--sun)}
.bk-foot{width:100%;max-width:var(--wrap7);padding-inline:var(--gut);margin-inline:auto;box-sizing:border-box}
@media (max-width:420px){.bk-cta p span{display:block}}
@media (pointer:coarse){.bk-dots{--pitch:34px}}
.bk-btn,.bk-dot,.w{touch-action:manipulation;-webkit-user-select:none;user-select:none}

/* ===================================================== the letter game */
#try{background:var(--cobalt);padding-block:var(--sec)}
#try .intro-text,#try .sec-head p{color:#E6EBFA;max-width:62ch}
#try .tally,#try .log .row,#try .win{background:var(--navy);border-color:transparent;border-radius:0}
#try .tally{min-height:64px}
#try .log .row{grid-template-columns:32px 1fr}
#try .letter{box-shadow:14px 14px 0 #0D152C;border-radius:0}
#try .linkish{color:var(--cream)}
@media (max-width:900px){#try .tally.pin{top:calc(var(--head-h) + 1px)}}
.postmark{color:#4A5878;border-color:#4A5878}
@media (max-width:520px){.postmark{font-size:.56rem}}
.w{position:relative}
.w::after{content:"";position:absolute;inset:-5px -3px}
.w:active{background:rgba(36,82,200,.16)}

/* ===================================================== gift */
.g7{background:var(--cream);color:var(--ink7);padding-block:var(--sec)}
.g7 :focus-visible{outline-color:var(--ink7)}
.g7-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center}
.g7 h2{color:var(--ink7)}
.g7 p.lead7{font-size:1.15rem;line-height:1.55;max-width:42ch;margin-top:20px;color:#2A3352}
.g7-steps{list-style:none;counter-reset:s;padding:0;margin:32px 0;display:grid;gap:0;max-width:520px}
.g7-steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;align-items:baseline;padding:14px 0;border-top:2px solid var(--ink7);font-weight:600}
.g7-steps li:last-child{border-bottom:2px solid var(--ink7)}
.g7-steps li::before{content:counter(s);font:700 1.6rem/1 var(--f-head);color:var(--cobalt)}
.g7 .btn-sun{background:var(--ink7);color:var(--cream)}
.g7 .muted{color:#4A5370}
.g7-art{position:relative;aspect-ratio:1;width:100%;max-width:480px;justify-self:end}
.g7-art .s1{position:absolute;left:0;top:0;width:58%;aspect-ratio:1;border-radius:50%;background:var(--cobalt)}
.g7-art .s2{position:absolute;right:0;bottom:0;width:52%;height:52%;background:var(--red)}
.g7-art .s3{position:absolute;right:6%;top:8%;width:30%;height:10%;background:var(--sun)}
.g7-tag{position:absolute;left:16%;top:30%;width:64%;background:#fff;border:3px solid var(--ink7);padding:26px 26px 22px;transform:rotate(-4deg);box-shadow:10px 10px 0 var(--ink7)}
.g7-tag small{display:block;font-size:.85rem;color:#4A5370;margin-bottom:8px}
.g7-tag p{font-family:var(--f-hand);font-weight:500;font-size:1.8rem;line-height:1.15;color:var(--ink7)}
.g7-tag p+p{margin-top:10px;font-size:1.5rem}
.g7-tag::before{content:"";position:absolute;left:22px;top:-12px;width:18px;height:18px;border-radius:50%;border:3px solid var(--ink7);background:var(--cream)}
@media (max-width:860px){.g7-grid{grid-template-columns:1fr}.g7-art{max-width:380px;justify-self:start}}
@media (max-width:420px){.g7-tag{top:24%;padding:20px 18px 16px}.g7-tag p{font-size:1.45rem}}

/* ===================================================== hints band */
#hints.band{background:var(--navy);border:0;padding-block:var(--sec)}
#hints>.wrap{position:relative;padding-top:clamp(40px,5vw,64px)}
#hints .sec-head{margin-bottom:28px}
#hints .steps li{background:none;border:0;border-top:2px solid var(--cream);border-radius:0;padding:14px 0 0}
#hints .steps .n{background:none;border:2px solid var(--sun);color:var(--sun);border-radius:50%}
#hints .phone{box-shadow:14px 14px 0 var(--cobalt)}
@media (min-width:861px){.qr-grid>.demo-ctl{grid-column:2;margin-top:-12px}}
.vf .paper{flex-direction:column;gap:8px;padding:14px;text-align:center;border-radius:0}
.vf .ptxt{align-items:center;min-width:0}
.vf .ptxt b{text-wrap:balance}
/* the demo opens its hints without animating layout */
.phone .scr{contain:layout paint}
.phone .hs .pt .body{display:grid;grid-template-rows:0fr;max-height:none;opacity:0;transition:grid-template-rows .32s var(--e-out),opacity .24s ease;will-change:auto}
.phone .hs .pt .body>.bi{overflow:hidden;min-height:0}
.phone .hs .pt.open .body{grid-template-rows:1fr;opacity:1}

/* ===================================================== the fine print */
.fp{background:var(--navy);padding-block:var(--sec)}
.fp>.wrap7{position:relative;padding-top:clamp(40px,5vw,64px)}
.fp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px;border-top:2px solid var(--line-2);border-bottom:2px solid var(--line-2)}
.fp-grid article{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:28px 28px 28px 0;border-bottom:1px solid #3A4875}
.fp-grid article:nth-last-child(-n+2){border-bottom:0}
.fp-grid article:nth-child(odd){border-right:1px solid #3A4875}
.fp-grid article:nth-child(even){padding-left:28px}
.fp-grid h3{font:700 1.35rem/1.1 var(--f-head);text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px}
.fp-grid p{color:var(--ink-2)}
.fp .sh{display:block;width:34px;height:34px;margin-top:2px}
.sh-c{border-radius:50%;background:var(--sun)}.sh-s{background:var(--cobalt)}
.sh-t{width:0!important;height:0!important;border-left:19px solid transparent;border-right:19px solid transparent;border-bottom:34px solid var(--red)}
.sh-b{height:16px!important;margin-top:11px!important;background:var(--cream)}
@media (max-width:760px){.fp-grid{grid-template-columns:1fr}.fp-grid article{padding:22px 0!important;border-right:0!important;border-bottom:1px solid #3A4875!important}.fp-grid article:last-child{border-bottom:0!important}}

/* ===================================================== FAQ */
#faq{background:var(--navy);padding-block:var(--sec)}
#faq>.wrap{position:relative;padding-top:clamp(40px,5vw,64px)}
.faq{max-width:880px}
.faq details{background:transparent;border:0;border-top:2px solid var(--line);border-radius:0;padding-inline:0}
.faq details:last-child{border-bottom:2px solid var(--line)}
.faq summary{font-family:var(--f-body);font-weight:700;font-size:1.15rem;text-transform:none;letter-spacing:0;padding-block:20px}
.faq summary::after{color:var(--sun)}

/* ===================================================== closing */
.close{background:var(--cobalt);background-image:none;padding-block:var(--sec)}
.close h2{font-size:clamp(2.6rem,7vw,6rem)}
.close h2 .ln{display:block}
@media (max-width:420px){.close h2{font-size:2.3rem}}
.close .copy{display:flex;flex-direction:column;gap:20px}
.close .lead{font-family:var(--f-body);font-style:normal;font-size:1.15rem;line-height:1.5;color:#E6EBFA;max-width:42ch}
.bigswitch{box-shadow:inset 0 0 0 2.5px var(--cream);background:var(--navy)}
.bigswitch i{box-shadow:none}
.signup{background:var(--navy);border:0;border-radius:0;box-shadow:14px 14px 0 #0A1024}
.signup input[type=email],.find input{border-radius:0;border:2px solid var(--line-2)}
.signup input[type=email]:focus,.find input:focus{border-color:var(--sun);outline:0}
.signup input[type=email]::placeholder{color:#A6AEC4;opacity:1}
.qp .signup{background:var(--navy-2);box-shadow:none;border:2px solid var(--line-2)}
footer{background:var(--navy);border-top:1px solid var(--line)}
@media (max-width:640px){
  .signup{box-shadow:8px 8px 0 #0A1024}
  #try .letter{box-shadow:8px 8px 0 #0D152C}
  #hints .phone{box-shadow:8px 8px 0 var(--cobalt)}
  .lvp-shot{box-shadow:8px 8px 0 rgba(13,21,44,.85)}
}

/* ===================================================== sticky buy bar (phones) */
.buybar{box-shadow:none;border-top:2px solid var(--sun);background:var(--navy);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));transition:transform .3s cubic-bezier(.32,.72,0,1)}
.buybar:not(.show){transition:transform .2s var(--e-out),visibility 0s .2s}
@media (max-width:860px){body.has-bar footer{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}}

/* ===================================================== hint pages, play, 404: the same flat language */
.hint-page .card,.tier,.pt,.qp .box,.qp [class*=card],.timer,.dial button,.sus label,.ev label{border-radius:0}
.tier{border-color:#34417F}
.tier[open]{box-shadow:none;border-color:var(--sun)}
.timer .row2 .btn{padding-inline:12px;white-space:nowrap}
.after a{display:inline-block;padding-block:12px}
.pairs li span{text-wrap:balance}
html:has(dialog.zoom[open]){overflow:hidden}

/* ===================================================== reduced motion: gentler, not dead */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color,outline-color!important;transition-duration:.15s!important;transition-delay:0s!important}
  .sel7-knob{transition:none!important}
}

/* section dividers sit on the content column (inside the gutters), not across the padding box */
#inside>.wrap:first-child::before,#hints>.wrap::before,.fp>.wrap7::before,#faq>.wrap::before{content:"";position:absolute;top:0;height:3px;background:var(--cream);left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px))}

/* ===================================================== verify pass (13 Oct): alignment, rhythm, typography */
p,li,dd{text-wrap:pretty}
@media (min-width:861px){.lvp-txt{justify-content:center}}
.lvp-MULTI .lvp-art::after{right:auto;top:auto;left:4%;bottom:6%;width:32%}
@media (min-width:640px) and (max-width:860px){
  .lvp{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
  .lvp-art{padding-top:clamp(24px,4vw,48px)}
}
.bk{padding-inline:0}
.said .kb{display:none}
#try:focus-within .said .kb{display:inline}
@media (max-width:900px){#try .letter{max-width:none}}
@media (max-width:860px){#hints .phone{margin-inline:0;justify-self:start}}
#inside,#hints,.fp,#faq{padding-top:clamp(32px,4vw,56px)}
.tip,.hub li a,.hub .pg,.qp .crumb{border-radius:0}
.close h2{font-size:clamp(2.3rem,5vw,5.2rem)}
@media (min-width:1100px){.close h2 .ln{white-space:nowrap}}
@media (hover:none){.top nav a:hover{color:var(--ink-2)}.hub li a:hover{border-color:var(--line)}}
/* closing switch: stays flat (no glow, no drop shadow); the knob slide and the ON/OFF fades remain */
html.motion .close.rv-sw.in .bigswitch{animation:none}
/* FAQ: the answer fades and rises (compositor only) instead of animating the height */
.faq details::details-content{transition:none}
html.motion .faq details[open]>p{animation:faq-in .26s cubic-bezier(.23,1,.32,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}}
/* phone demo: the scan line moves with transform, the tap ring starts visible */
.vf{container-type:inline-size}
@keyframes scan{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(78cqw);opacity:0}}
@keyframes tap{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* ===================================================== wow, part 2: the story continues while you scroll
   As the hero leaves, "boring." droops further and the battery bars drain one by one,
   so the charge section below reads as the recharge. Section rules draw in, headings rise once. */
@supports (animation-timeline: view()){
  html.motion .h7{view-timeline:--hero block}
  html.motion .h7-done .w-bor{animation:bor-droop linear both;animation-timeline:--hero;animation-range:exit 0% exit 70%}
  @keyframes bor-droop{to{rotate:7deg;translate:0 .1em}}
  html.motion .h7-done .b-bars i{animation:bar-drain cubic-bezier(.65,0,.35,1) both;animation-timeline:--hero}
  html.motion .h7-done .b-bars i:nth-child(4){animation-range:exit 0% exit 18%}
  html.motion .h7-done .b-bars i:nth-child(3){animation-range:exit 10% exit 28%}
  html.motion .h7-done .b-bars i:nth-child(2){animation-range:exit 20% exit 38%}
  html.motion .h7-done .b-bars i:nth-child(1){animation-range:exit 30% exit 52%}
  @keyframes bar-drain{to{scale:0 1}}

  html.motion :is(#inside>.wrap:first-child,#hints>.wrap,.fp>.wrap7,#faq>.wrap){view-timeline:--sec block}
  html.motion :is(#inside>.wrap:first-child,#hints>.wrap,.fp>.wrap7,#faq>.wrap)::before{transform-origin:0 50%;animation:rule-draw cubic-bezier(.23,1,.32,1) both;animation-timeline:--sec;animation-range:entry 0% entry 30%}
  @keyframes rule-draw{from{transform:scaleX(0)}}
  html.motion :is(main>section:not(.h7):not(.chg) h2){animation:h-rise cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 0% entry 60%}
  html.motion :is(.g7-steps li,#hints .steps li,.fp-grid article){animation:h-rise cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes h-rise{from{opacity:0;translate:0 .5em}}
}

/* the navy cover needs an edge on the navy page */
img[src$="cover-toggle.webp"]{outline:1.5px solid rgba(244,236,220,.28);outline-offset:-1.5px}