/* COPIED FROM mockups/brand-v3.html, word for word: tokens and shared pieces. */
/* Violet, lavender and lime. Lavender is the quiet colour: the unlit dots, the tints, the paper. Lime is the light. */
:root{
  /* Field: the brand's ground. On paper, the main action and the selected state. */
  --field-50:#F3EFFF; --field-100:#E7DFFF; --field-200:#D0C3FF; --field-300:#B09CFF; --field-400:#8A66FA;
  --field-500:#6A2EF5; --field-600:#5A22DE; --field-700:#4818B8;
  /* Light: it means "found" and nothing else. */
  --light-500:#C6FA4F; --light-400:#D5FC7A;
  /* Ink: all text on paper, and ordinary links. */
  --ink-900:#1B1533; --ink-700:#372F5C; --ink-500:#5E5782; --ink-400:#827BA6; --ink-300:#B8B1D6;
  /* Paper: where reading happens. */
  --paper-0:#FFFFFF; --paper-50:#F6F3FF; --paper-100:#ECE6FF; --line:#E1DAF8;
  /* On the field */
  --on-field:#FFFFFF; --on-field-2:#E9E3FF; --field-tint:rgba(255,255,255,.13); --field-line:rgba(255,255,255,.24);
  /* Quiet: the unlit dots and the tinted sections. Action: the one solid button on paper. */
  --mark-quiet:#CDC2FF; --paper-tint:#E7DFFF; --tint-line:#CFC3F5; --action:#6A2EF5; --action-hover:#5A22DE;
}
/* Plum: the same family at night. The field goes dark, and the text on it, the quiet colour and the ink steps shift with it. Violet stays the action colour. Set data-pal="plum" on a block. */
[data-pal="plum"]{
  --field-50:#F1EDFB; --field-100:#E4DDF6; --field-200:#CBC0EC; --field-300:#A397D0; --field-400:#6C6196;
  --field-500:#1F1838; --field-600:#352B5C; --field-700:#120D24;
  --light-500:#C6FA4F; --light-400:#D5FC7A;
  --ink-900:#1F1838; --ink-700:#3A325E; --ink-500:#615A85; --ink-400:#857EA8; --ink-300:#BAB3D8;
  --paper-0:#FFFFFF; --paper-50:#F6F3FF; --paper-100:#ECE6FF; --line:#E1DAF8;
  --on-field:#F6F3FF; --on-field-2:#CFC5F7; --field-tint:rgba(205,194,255,.14); --field-line:rgba(205,194,255,.26);
  --mark-quiet:#B7A8FF; --paper-tint:#E7DFFF; --tint-line:#CFC3F5; --action:#6A2EF5; --action-hover:#5A22DE;
}
:root{
  /* Type: two voices. Alan Sans speaks for us. Martian Mono speaks for the machine. */
  --sans:"Alan Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --display:"Alan Sans",ui-sans-serif,system-ui,sans-serif;
  --d-weight:800; --d-track:-.02em; --d-word:.04em; --d-lead:.9; --d-scale:.98; --d-case:none; --d-stretch:100%;
  --t-weight:700; --t-track:-.012em;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-quick:160ms; --t-base:320ms; --t-slow:900ms;

  --shadow-sheet:0 1px 0 rgba(10,15,51,.04),0 14px 34px -14px rgba(10,15,51,.22);
  --shadow-window:0 50px 110px -34px rgba(3,7,44,.62),0 0 0 1px rgba(255,255,255,.24);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-50);color:var(--ink-900);font:400 15px/1.5 var(--sans);word-spacing:var(--b-word,0);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.nb{white-space:nowrap}
::selection{background:var(--light-500);color:var(--ink-900)}
.mono{font-family:var(--mono)}

/* ---------- shared pieces ---------- */
/* the logo. Vector paths, no font. At rest: eight quiet dots, one lit, and a lime dot on the i.
   --s0 and --h0 scale a dot back to the equal size the scan starts from */
.brand{display:inline-flex;align-items:center;line-height:1;flex:none}
.lg{display:block;overflow:visible;flex:none;--quiet:var(--mark-quiet);--light:var(--light-500);--on:var(--on-field)}
.lg .d{color:var(--quiet)}
.lg .hit{color:var(--light)}
.lg .q,.lg .lit,.lg .ch{fill:currentColor}
.lg .tt{fill:var(--light-500)}
.lg--tilelock .tt,.lg--paper .tt{fill:var(--action)}
.lg .tl{fill:var(--field-500)}
.lg .d,.lg .hit,.lg .q,.lg .lit{transform-box:fill-box;transform-origin:center}
/* only the mark moves, and it loops always. Timings are concept 02 of the round 2 board: a 5s loop,
   one dot checked every 200ms in reading order, then the find lights and the rest step back */
@keyframes flash{0%{fill:var(--light);scale:1.3}4%,100%{fill:currentColor;scale:1}}
@keyframes settle{0%,38%{color:var(--on);transform:scale(var(--s0))}46%,90%{color:var(--quiet);transform:scale(1)}97%,100%{color:var(--on);transform:scale(var(--s0))}}
@keyframes found{0%,20%{color:var(--on);transform:translateX(var(--hx)) scale(var(--h0))}21%,24%{color:var(--light);transform:translateX(var(--hx)) scale(calc(var(--h0)*1.3))}25%,38%{color:var(--on);transform:translateX(var(--hx)) scale(var(--h0));animation-timing-function:var(--ease-spring)}47%,90%{color:var(--light);transform:translateX(0) scale(1)}97%,100%{color:var(--on);transform:translateX(var(--hx)) scale(var(--h0))}}
.is-loop .q{animation:flash 5s linear infinite;animation-delay:calc(var(--i)*.2s)}
.is-loop .d{animation:settle 5s infinite}
.is-loop .hit{animation:found 5s infinite}
body.still .is-loop .q,body.still .is-loop .d,body.still .is-loop .hit{animation:none!important}

.light{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--light-500);margin-left:.045em;position:relative}
.light::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ring 4.5s 2.4s infinite}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:var(--r-full);border:0;font:600 15px/1 var(--sans);letter-spacing:-.012em;white-space:nowrap;cursor:pointer;transition:transform var(--t-quick) var(--ease-out),background var(--t-quick),box-shadow var(--t-quick)}
.btn svg{width:1em;height:1em;flex:none}
.btn:active{transform:translateY(1px)}
.btn-light{background:var(--light-500);color:var(--ink-900)}
.btn-light:hover{background:var(--light-400);transform:translateY(-1px)}
.btn-onfield{background:var(--field-tint);color:var(--on-field);box-shadow:inset 0 0 0 1px var(--field-line)}
.btn-onfield:hover{background:color-mix(in srgb,var(--on-field) 20%,transparent)}
.btn-plain-onfield{color:var(--on-field);padding:0 10px}
.btn-plain-onfield:hover svg{transform:translateX(3px)}
.btn-plain-onfield svg{transition:transform var(--t-quick) var(--ease-out)}
.btn-field{background:var(--action);color:#FFFFFF}
.btn-field:hover{background:var(--action-hover)}
.btn-line{background:var(--paper-0);color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--line)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink-300)}
.btn-text{color:var(--ink-900);padding:0 8px;font-weight:550;gap:5px}
.btn-text svg{width:.8em;height:.8em}
.btn-text:hover{text-decoration:underline;text-underline-offset:3px}
.btn-lg{height:58px;padding:0 30px;font-size:17px}
.btn-sm{height:36px;padding:0 15px;font-size:13.5px}
.btn-xl{height:52px;padding:0 24px;font-size:16px}

.chip-light{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--r-full);background:var(--light-500);color:var(--ink-900);font:600 12.5px/1 var(--sans);letter-spacing:-.005em}
.chip-line{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-700);font:500 11.5px/1 var(--sans)}

.status{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--mono);letter-spacing:.03em;color:var(--on-field-2);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--light-500);position:relative;flex:none}
.status i::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ring-s 2.4s infinite}

@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--light-500) 55%,transparent)}55%,100%{box-shadow:0 0 0 .2em color-mix(in srgb,var(--light-500) 0%,transparent)}}
@keyframes ring-s{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--light-500) 60%,transparent)}70%,100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--light-500) 0%,transparent)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lineUp{from{transform:translateY(112%)}to{transform:none}}
@keyframes litOn{0%{transform:scale(0)}62%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes stageUp{from{opacity:0;transform:translateY(110px)}to{opacity:1;transform:none}}

/* intro choreography: runs when a view gets .is-in */
.is-in .a-rise{animation:rise var(--t-slow) var(--ease-out) both;animation-delay:calc(var(--d,0)*1ms)}
.is-in .a-fade{animation:fade 700ms ease both;animation-delay:calc(var(--d,0)*1ms)}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln>span{display:inline-block}
.is-in .ln>span{animation:lineUp 1000ms var(--ease-out) both;animation-delay:calc(var(--d,0)*1ms)}
.ln.done{overflow:visible}
.is-in .a-lit{animation:litOn 620ms var(--ease-spring) both;animation-delay:calc(var(--d,0)*1ms)}
body.still *,body.still *::before,body.still *::after{animation-delay:-30s!important;animation-play-state:paused!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* COPIED FROM mockups/brand-v3.html, word for word: the landing hero. */
/* ============================================================
   LANDING HERO
   ============================================================ */
.lp{background:var(--field-500);color:var(--on-field);position:relative;container-type:inline-size}
.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px;padding:0 clamp(20px,4cqw,56px);max-width:1480px;margin:0 auto}
.lp-nav .brand{font-size:25px}
.lp-links{display:flex;gap:34px;font:500 15px/1 var(--sans);color:var(--on-field-2)}
.lp-links a:hover{color:var(--on-field)}
.lp-hero{text-align:center;padding:clamp(20px,3.2vh,36px) 20px 0}
.pill{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 15px 0 13px;border-radius:var(--r-full);background:var(--field-tint);box-shadow:inset 0 0 0 1px var(--field-line)}
.pill .status{color:var(--on-field);text-transform:uppercase;letter-spacing:.07em;font-size:11.5px}
.pill b{font-weight:500;display:inline-block;white-space:nowrap;clip-path:inset(-8px 0);transition:opacity .25s,transform .25s var(--ease-out),width .34s var(--ease-out)}
.pill b.out{opacity:0;transform:translateY(-5px)}
.display{margin:22px 0 0;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(clamp(52px,10.6cqw,152px)*var(--d-scale));line-height:var(--d-lead)}
.lit-word{color:var(--light-500);font-weight:inherit}
.display .ln>span{white-space:nowrap}
.lp-sub{margin:clamp(18px,2.1cqw,26px) auto 0;max-width:min(calc(100cqw - 40px),37em);text-wrap:balance;font:400 clamp(16px,1.5cqw,21px)/1.42 var(--sans);letter-spacing:-.012em;color:var(--on-field-2)}
.lp-cta{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:clamp(20px,2.3cqw,28px)}
.lp-price{margin:15px auto 0;max-width:calc(100cqw - 40px);text-wrap:balance;line-height:1.5;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--on-field-2)}
.lp-picks{max-width:1236px;margin:0 auto -170px;padding:clamp(20px,3vh,32px) clamp(14px,4cqw,28px) 0;position:relative;z-index:2;text-align:left;color:var(--ink-900);font:400 14px/1.45 var(--sans)}
.lp-picks-h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 4px 14px;font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--on-field-2)}
.lp-picks-h .status{text-transform:uppercase;letter-spacing:.05em}
.lp-picks .acts{margin:0;padding:0}
.lp-picks .ocard{cursor:default}
.lp-picks .ocard:hover{transform:none;box-shadow:var(--shadow-sheet)}
.is-in .lp-picks .ocard{animation-delay:calc(1050ms + var(--i)*120ms)}
.is-in .lp-picks-h{animation:fade 700ms ease both;animation-delay:950ms}
.lp-facts{background:var(--paper-tint);color:var(--ink-900);padding:clamp(236px,21vw,280px) clamp(20px,4vw,56px) 130px}
.lp-facts-in{max-width:1180px;margin:0 auto}
.lp-facts h2{margin:0;max-width:16ch;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(clamp(34px,4.6vw,60px)*var(--d-scale));line-height:.98}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--ink-900)}
.fact{padding:22px 24px 0 0}
.fact+.fact{padding-left:24px;border-left:1px solid var(--tint-line)}
.fact b{display:block;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(clamp(30px,3.4vw,46px)*var(--d-scale));line-height:1;white-space:nowrap}
.fact p{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--ink-700);max-width:24ch}
.lp-note{margin:30px 0 0;font:400 12px/1.5 var(--mono);color:var(--ink-500)}
@container (max-width:860px){
  .lp-links{display:none}.lp-sub br{display:none}.lp-picks .acts{grid-template-columns:1fr}.lp-picks-h span:last-child{display:none}
}
@media (max-width:860px){
  .facts{grid-template-columns:1fr 1fr}.fact:nth-child(3){padding-left:0;border-left:0}.fact:nth-child(n+3){margin-top:22px;border-top:1px solid var(--tint-line)}
  .lp-facts{padding-top:226px}
}
/* the same hero, held still inside a frame */
.frame>.lp--static{min-height:100%}



/* ============================================================
   THE CRAFT PASS. One rhythm. 40px headings. Drawn objects. Violet only at the top and the close.
   ============================================================ */
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper-50);color:var(--ink-900);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--light-500);outline-offset:3px;border-radius:4px}
.lp :focus-visible{outline-color:#fff}
.lp-nav{display:grid;grid-template-columns:1fr auto 1fr}
.lp-nav .brand{justify-self:start}
.lp-nav .btn{justify-self:end}
.lp-links a{padding:14px 0;cursor:pointer}
@container (max-width:860px){.lp-nav{display:flex}}
.lp-cta,.lp-price{display:none}
.lp-hero{padding-top:clamp(28px,4vh,48px)}
.lp-sub{margin-top:clamp(16px,1.8cqw,22px)}

/* the rhythm */
.sec{padding:96px clamp(20px,4vw,56px)}
.sec.alt{background:var(--paper-0)}
.sec.alt .obj{box-shadow:0 1px 2px rgba(27,21,51,.04),0 24px 48px -32px rgba(27,21,51,.25);background:var(--paper-50)}
.sec.alt .angle.still{background:var(--paper-50)}
.sec.alt .angle.still .asks li,.sec.alt .angle.still .ang{background:var(--paper-0)}
.in{max-width:1120px;margin:0 auto}
.lab{margin:0;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.h{margin:16px 0 0;max-width:22ch;font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:40px;line-height:1.1;text-wrap:balance}
.p{margin:16px 0 0;max-width:34em;font-size:18px;line-height:1.6;color:var(--ink-700);text-wrap:pretty}
.obj{margin-top:40px;background:var(--paper-0);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(27,21,51,.04),0 24px 48px -32px rgba(27,21,51,.25)}
.cap{margin:12px 0 0;font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-500)}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.two .obj{margin-top:0}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* the hero's box and list */
.ask{margin:clamp(36px,4cqw,56px) auto clamp(44px,6vh,72px);max-width:720px;padding:0 20px}
.ask-box{display:flex;align-items:center;gap:10px;background:var(--paper-0);border-radius:var(--r-full);padding:6px 6px 6px 22px;box-shadow:var(--shadow-sheet)}
.ask-box label{font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);white-space:nowrap}
.ask-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 20px/1.3 var(--sans);letter-spacing:-.012em;color:var(--ink-900);padding:12px 4px}
.ask-box input::placeholder{color:var(--ink-300)}
.ask-box .btn{flex:none}
.ask-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px;align-items:center}
.ask-chips span{font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--on-field);margin-right:4px}
.ask-chips button{font:500 14px/1 var(--sans);color:var(--on-field);background:var(--field-tint);box-shadow:inset 0 0 0 1px var(--field-line);border:0;border-radius:var(--r-full);padding:10px 14px;cursor:pointer;transition:background var(--t-quick)}
.ask-chips button:hover,.ask-chips button[aria-pressed=true]{background:#fff;color:var(--field-500)}
.lp-picks{color:var(--ink-900);margin-bottom:-200px;max-width:1176px}
.lp-picks-h{color:var(--on-field);font-size:12px}
.lp-picks-h .status{color:var(--on-field)}
.lp-picks-h.flash{animation:flash 900ms ease}
@keyframes flash{0%{opacity:.2}100%{opacity:1}}
.lp-picks .acts{display:block}
.picks{list-style:none;margin:0;padding:0;background:var(--paper-0);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(27,21,51,.04),0 24px 48px -32px rgba(27,21,51,.25);overflow:hidden}
.picks>li{border-top:1px solid var(--line)}
.picks>li:first-child{border-top:0}
.row{display:grid;grid-template-columns:40px minmax(0,1fr) 200px 136px;gap:0 24px;align-items:center;padding:20px 24px;cursor:pointer;transition:background var(--t-quick)}
.row:hover,.open>.row{background:var(--paper-50)}
.row .rk{font:500 13px/1 var(--mono);color:var(--ink-500);text-align:center}
.row h3{margin:0;font:600 18px/1.3 var(--sans);letter-spacing:-.012em;text-wrap:balance}
.row p{margin:4px 0 0;font-size:14px;color:var(--ink-500)}
.row .fx{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:14px}
.row .fx span::before{content:"✓";margin-right:6px;font-weight:600;color:var(--field-500)}
.row .fx span.no::before{content:"✕";color:#B23A48}
.row .fx span.no{color:#8A2F3A}
.row .fx span.plain::before{content:"";margin:0}
.row .fx span.plain{color:var(--ink-500)}
.row .pay{font:600 17px/1.2 var(--sans);letter-spacing:-.012em;text-align:right;font-variant-numeric:tabular-nums}
.row .see{justify-self:end;font:600 14px/1 var(--sans);color:var(--field-500);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.row .see svg{width:14px;height:14px;transition:transform var(--t-quick)}
.open>.row .see svg{transform:rotate(180deg)}
.picks-note{margin:12px 2px 0;font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-500);max-width:70em}
.lp-go{margin:24px 0 0}

/* the angle, drawn */
.angle{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:8px 24px 28px 88px;background:var(--paper-50);border-top:1px solid var(--line)}
.open>.angle{display:grid}
.angle h4{margin:0 0 12px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.asks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.asks li{padding:10px 12px;border-radius:10px;background:var(--paper-0);border:1px solid var(--line);font-size:15px;line-height:1.45;transition:background var(--t-base),border-color var(--t-base)}
.asks li.lit{background:#F3FFD6;border-color:var(--light-500)}
.a-facts{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px;color:var(--ink-700)}
.a-facts li b{font-weight:600;color:var(--ink-900)}
.a-facts li.u{color:var(--ink-500)}
.ang{background:var(--paper-0);border:1px solid var(--line);border-radius:12px;padding:18px 20px 16px;display:flex;flex-direction:column;min-height:200px}
.ang-lines{flex:1;font-size:16px;line-height:1.55}
.ang-lines p{margin:0 0 10px;min-height:1.55em}
.ang-lines .cur::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--field-500);vertical-align:-.2em;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ang-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-500)}
.for{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-500);padding-bottom:12px;border-bottom:1px solid var(--line)}
.angle.still{display:grid;padding:24px;background:var(--paper-0);border:0;gap:24px}
.angle.still .asks li{background:var(--paper-50)}
.angle.still .ang{background:var(--paper-50)}

/* one night: the funnel drawn */
.funnel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.f{padding:24px 24px 22px;border-left:1px solid var(--line)}
.f:first-child{border-left:0}
.f b{display:block;font-family:var(--display);font-weight:var(--d-weight);letter-spacing:var(--d-track);font-size:36px;line-height:1;font-variant-numeric:tabular-nums}
.f span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--ink-700)}
.marks{display:flex;flex-wrap:wrap;gap:12px 32px;padding:18px 24px;border-top:1px solid var(--line)}
.marks li{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--sans);color:var(--ink-700);list-style:none}
.marks .mk{width:18px;height:18px;flex:none;fill:currentColor}
.marks .in{width:18px;height:18px;border-radius:4px;background:currentColor;display:grid;place-items:center;flex:none}
.marks .in::before{content:"in";color:var(--paper-0);font:700 11px/1 var(--sans);letter-spacing:-.04em}
.marks{margin:0}
.nights{display:grid}
.nh,.nr{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));gap:0 24px;align-items:baseline;padding:16px 24px}
.nh{font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-500);border-bottom:1px solid var(--line)}
.nr{border-bottom:1px solid var(--line)}
.nr b{font-family:var(--display);font-weight:var(--d-weight);letter-spacing:var(--d-track);font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.nr b.nd{font:500 13px/1 var(--mono);letter-spacing:.04em;color:var(--ink-700)}
.hand{padding:8px 24px}
.hr{display:grid;grid-template-columns:190px minmax(0,1fr) 110px;gap:20px;align-items:center;padding:18px 0;font-size:15px;color:var(--ink-700)}
.hr+.hr{border-top:1px solid var(--line)}
.hr b{font:600 17px/1 var(--sans);color:var(--ink-900);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hb{height:12px;border-radius:6px;background:transparent}
.hb i{display:block;height:12px;border-radius:6px;background:var(--field-200)}
.hb i.k{background:var(--field-500);min-width:6px}
.pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:22px;padding-top:22px;border-top:1px solid var(--line);position:relative}
.pipe::before{content:"";position:absolute;left:5px;right:calc(20% - 5px);top:27px;border-top:1px solid var(--field-200)}
.pipe div{position:relative}
.pipe i{display:block;width:11px;height:11px;border-radius:50%;background:var(--paper-0);box-shadow:inset 0 0 0 2px var(--field-500);position:relative}
.pipe .won i{background:var(--field-500)}
.pipe b{display:block;margin-top:14px;font-family:var(--display);font-weight:var(--d-weight);font-size:26px;line-height:1;letter-spacing:var(--d-track);font-variant-numeric:tabular-nums}
.pipe span{display:block;margin-top:6px;font-size:13px;color:var(--ink-500)}

/* how it works: three rhythms, each with a drawn object */
.steps{display:grid;gap:80px;margin-top:0}
.ans{list-style:none;margin:0;padding:8px 0}
.ans li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:12px 24px;border-top:1px solid var(--line);font-size:15px}
.ans li:first-child{border-top:0}
.ans b{font:500 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-700)}
.ans span{color:var(--ink-500)}
.ans li.on span{color:var(--ink-900)}
.ans-h{display:flex;justify-content:space-between;padding:16px 24px 8px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.morn{padding:24px}
.morn-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.morn-h b{font-family:var(--display);font-weight:var(--d-weight);letter-spacing:var(--d-track);font-size:24px;line-height:1.1}
.morn-h span{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--ink-500)}
.nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.nums b{display:block;font-family:var(--display);font-weight:var(--d-weight);font-size:28px;line-height:1;letter-spacing:var(--d-track);font-variant-numeric:tabular-nums}
.nums span{display:block;margin-top:6px;font-size:13px;color:var(--ink-500)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.mrow:first-of-type{margin-top:20px}
.mrow b{display:block;font-weight:600}
.mrow span{display:block;margin-top:2px;font-size:13px;color:var(--ink-500)}
.mrow .chip{font:500 12px/1 var(--sans);color:var(--field-500);border:1px solid var(--line);border-radius:var(--r-full);padding:8px 12px;white-space:nowrap}

/* the price, drawn */
.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.plan-top{padding:28px 24px;border-right:1px solid var(--line)}
.plan-top b{display:block;font-family:var(--display);font-weight:var(--d-weight);letter-spacing:var(--d-track);font-size:40px;line-height:1}
.plan-top span{display:block;margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink-700);max-width:28em}
.plan-top .btn{margin-top:24px}
.plan-rows{padding:12px 24px}
.plan-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.plan-row:first-child{border-top:0}
.plan-row b{font:500 12px/1.7 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-700)}
.plan-row span{color:var(--ink-700)}

/* questions, drawn */
.qa{display:grid;grid-template-columns:1fr 1fr}
.qa div{padding:22px 24px;border-top:1px solid var(--line)}
.qa div:nth-child(2n){border-left:1px solid var(--line)}
.qa div:nth-child(-n+2){border-top:0}
.qa h3{margin:0;font:600 16px/1.4 var(--sans);letter-spacing:-.01em}
.qa p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--ink-700)}

/* the close */
.close{background:var(--field-500);color:var(--on-field);text-align:center;padding:120px clamp(20px,4vw,56px) 0}
.close .h2{margin:0 auto;max-width:12ch;color:var(--on-field);font-family:var(--display);font-weight:var(--d-weight);font-stretch:var(--d-stretch);letter-spacing:var(--d-track);word-spacing:var(--d-word);text-transform:var(--d-case);font-size:calc(clamp(40px,6.6vw,88px)*var(--d-scale));line-height:.96;text-wrap:balance}
.close .h2 .light{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--light-500);margin-left:.06em}
.close .go{margin:32px 0 0}
.foot{max-width:1120px;margin:88px auto 0;border-top:1px solid var(--field-line);padding:28px 0 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font:400 14px/1 var(--sans);color:#E9E3FF;text-align:left}
.foot .brand{font-size:22px}
.foot nav{display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:center}
.foot a{color:#E9E3FF;padding:12px 0}
.foot a:hover{color:#fff}
.foot .mono{font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}

/* the review strip: not part of the page */
.rev{background:#05071C;color:#fff;padding:40px clamp(20px,4vw,56px) 60px;font:400 15px/1.55 var(--sans)}
.rev .in{display:grid;gap:22px}
.rev h2{margin:0;font:600 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#C6FA4F}
.rev ol,.rev ul{margin:0;padding-left:20px;display:grid;gap:6px;max-width:72em}
.rev li b{font-weight:600;color:#fff}
.rev p{margin:0;max-width:72em;color:rgba(255,255,255,.72)}

@media (prefers-reduced-motion:reduce){.ang-lines .cur::after{animation:none}}
@media (max-width:1100px){.row{grid-template-columns:36px minmax(0,1fr) 150px;gap:0 16px}.row .see{grid-column:2;justify-self:start;margin-top:8px}}
@media (max-width:860px){
  .sec{padding:72px clamp(20px,4vw,56px)}
  .two,.plan,.qa{grid-template-columns:minmax(0,1fr)}
  .two .obj{margin-top:32px}
  .plan-top{border-right:0;border-bottom:1px solid var(--line)}
  .qa div:nth-child(2n){border-left:0}
  .qa div:nth-child(2){border-top:1px solid var(--line)}
  .funnel{grid-template-columns:1fr 1fr}
  .f:nth-child(3){border-left:0}
  .f:nth-child(n+3){border-top:1px solid var(--line)}
  .nh{display:none}
  .nr{grid-template-columns:1fr 1fr 1fr;gap:6px 12px}
  .nr b.nd{grid-column:1 / -1}
  .nr b{font-size:24px}
  .nr b:not(.nd)::after{display:block;margin-top:6px;font:500 11px/1.3 var(--mono);letter-spacing:.02em;color:var(--ink-500)}
  .nr b:nth-child(2)::after{content:"read"}
  .nr b:nth-child(3)::after{content:"fit"}
  .nr b:nth-child(4)::after{content:"worth a reply"}
  .hr{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .hr .hb{grid-column:1 / -1;order:3}
  .pipe span{font-size:12px}
  .row{grid-template-columns:minmax(0,1fr);gap:4px 0;padding:16px 18px}
  .row .rk{display:none}
  .row .pay,.row .see{grid-column:1;justify-self:start;text-align:left}
  .angle{grid-template-columns:1fr;padding:8px 18px 22px}
  .angle.still{padding:18px}
  .ask-box{flex-wrap:wrap;border-radius:16px;padding:14px 16px}
  .ask-box label{width:100%}
  .ask-box .btn{width:100%;justify-content:center}
  .foot{justify-content:center;text-align:center}
  .ans li{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:620px){.funnel{grid-template-columns:1fr}.f{border-left:0}.f:nth-child(n+2){border-top:1px solid var(--line)}}