/* Black-and-white styling inspired by Stripe: white surfaces, black type and buttons, hairline
   grey borders, generous spacing. Colour only marks status (right / close / wrong). */
:root{
  --bg:#ffffff; --bg2:#ffffff; --bg3:#f4f4f5; --elev:#ffffff;
  --label:#09090b; --label2:#62626a; --label3:#a1a1aa; --label4:#d4d4d8;
  --sep:#e4e4e7; --fill:#d4d4d8; --fill2:#e4e4e7; --fill3:#f4f4f5; --fill4:#fafafa;
  --blue:#0a0a0a; --on-accent:#ffffff;
  --green:#15803d; --orange:#b45309; --red:#c2410c; --purple:#525252; --indigo:#404040; --teal:#525252; --pink:#525252; --yellow:#737373; --mint:#525252; --gray:#737373;
  --navy:#0a0a0a; --gold:#0a0a0a;
  --ring1:#0a0a0a; --ring2:#737373; --ring3:#a3a3a3;
  --sidebar:#ffffff; --sidebar-fg:#262626; --sidebar-muted:#8a8a8a; --sidebar-hover:#f4f4f5; --sidebar-active:#f0f0f1;
  --sidebar-line:#ececee; --sidebar-input:#fafafa; --sidebar-strong:#0a0a0a;
  --toolbar:rgba(255,255,255,.88);
  --card-shadow:0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  --sheet-shadow:0 30px 60px -12px rgba(0,0,0,.25), 0 18px 36px -18px rgba(0,0,0,.3);
  --font:Geist, Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif:var(--font);
  --mono:"Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0a0a0a; --bg2:#111111; --bg3:#1a1a1a; --elev:#111111;
  --label:#ededed; --label2:#a1a1a1; --label3:#6b6b6b; --label4:#3a3a3a;
  --sep:#242424; --fill:#3a3a3a; --fill2:#262626; --fill3:#1c1c1c; --fill4:#141414;
  --blue:#fafafa; --on-accent:#0a0a0a;
  --green:#4ade80; --orange:#fbbf24; --red:#fb7185; --purple:#a1a1a1; --indigo:#b3b3b3; --teal:#a1a1a1; --pink:#a1a1a1; --yellow:#a1a1a1; --mint:#a1a1a1; --gray:#8a8a8a;
  --navy:#fafafa; --gold:#fafafa;
  --ring1:#fafafa; --ring2:#8a8a8a; --ring3:#5a5a5a;
  --sidebar:#0a0a0a; --sidebar-fg:#d4d4d4; --sidebar-muted:#7a7a7a; --sidebar-hover:#161616; --sidebar-active:#1c1c1c;
  --sidebar-line:#1f1f1f; --sidebar-input:#111111; --sidebar-strong:#fafafa;
  --toolbar:rgba(10,10,10,.85);
  --card-shadow:none; --sheet-shadow:0 30px 60px -12px rgba(0,0,0,.8);
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0a0a0a; --bg2:#111111; --bg3:#1a1a1a; --elev:#111111;
  --label:#ededed; --label2:#a1a1a1; --label3:#6b6b6b; --label4:#3a3a3a;
  --sep:#242424; --fill:#3a3a3a; --fill2:#262626; --fill3:#1c1c1c; --fill4:#141414;
  --blue:#fafafa; --on-accent:#0a0a0a;
  --green:#4ade80; --orange:#fbbf24; --red:#fb7185; --purple:#a1a1a1; --indigo:#b3b3b3; --teal:#a1a1a1; --pink:#a1a1a1; --yellow:#a1a1a1; --mint:#a1a1a1; --gray:#8a8a8a;
  --navy:#fafafa; --gold:#fafafa;
  --ring1:#fafafa; --ring2:#8a8a8a; --ring3:#5a5a5a;
  --sidebar:#0a0a0a; --sidebar-fg:#d4d4d4; --sidebar-muted:#7a7a7a; --sidebar-hover:#161616; --sidebar-active:#1c1c1c;
  --sidebar-line:#1f1f1f; --sidebar-input:#111111; --sidebar-strong:#fafafa;
  --toolbar:rgba(10,10,10,.85);
  --card-shadow:none; --sheet-shadow:0 30px 60px -12px rgba(0,0,0,.8);
  color-scheme:dark; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--label);font:400 15px/1.55 var(--font);letter-spacing:-.006em;font-feature-settings:'ss01';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
svg.i{width:1.1em;height:1.1em;flex:none;vertical-align:-.18em}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

/* ---------- App frame ---------- */
.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;overflow:auto;background:var(--sidebar);color:var(--sidebar-fg);border-right:1px solid var(--sidebar-line);padding:18px 12px 14px;display:flex;flex-direction:column;gap:1px}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 16px;margin-bottom:6px;border-bottom:1px solid var(--sidebar-line)}
.brand .logo{width:30px;height:30px;flex:none;display:block}
.brand .logo rect{fill:var(--sidebar-strong)} .brand .logo path{stroke:var(--sidebar)} .brand .logo circle{fill:var(--sidebar)}
.brand b{display:block;font:650 15.5px/1.2 var(--font);color:var(--sidebar-strong);letter-spacing:-.02em}
.brand b span{font-weight:400;color:var(--sidebar-muted)}
.brand small{display:block;font-size:11.5px;color:var(--sidebar-muted);font-weight:500;margin-top:2px;letter-spacing:.02em}
.search{position:relative;margin:4px 4px 10px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--sidebar-muted);width:15px;height:15px}
.search input{width:100%;height:34px;border:1px solid var(--sidebar-line);border-radius:7px;background:var(--sidebar-input);color:var(--sidebar-fg);padding:0 10px 0 32px;font-size:13.5px;outline:none}
.search input:focus{border-color:var(--label3);background:var(--sidebar)}
.search input::placeholder{color:var(--sidebar-muted)}
.navhead{font-size:10.5px;font-weight:700;color:var(--sidebar-muted);padding:14px 10px 6px;letter-spacing:.09em;text-transform:uppercase}
.nav{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;color:var(--sidebar-fg);position:relative}
.nav:hover{background:var(--sidebar-hover)}
.nav[aria-current="true"]{background:var(--sidebar-active);color:var(--sidebar-strong);font-weight:600}
.nav[aria-current="true"]::before{content:none}
.nav .ic{width:20px;height:20px;display:grid;place-items:center;flex:none;background:none!important;color:var(--sidebar-muted)}
.sidebar .nav .ic[class]{color:var(--sidebar-muted)!important;background:none!important}
.sidebar .nav[aria-current="true"] .ic[class]{color:var(--sidebar-strong)!important}
.nav .ic svg{width:16px;height:16px}
.nav .cnt{margin-left:auto;font-size:12px;color:var(--sidebar-muted);font-variant-numeric:tabular-nums}
.nav .cnt.badge{background:var(--sidebar-strong);color:var(--sidebar);border-radius:4px;padding:0 6px;font-weight:700}
.nav .meter{width:34px;height:4px;border-radius:2px;background:var(--sidebar-line);overflow:hidden;margin-left:auto}
.nav .meter i{display:block;height:100%;background:var(--sidebar-strong)}
.nav .meter + .cnt{margin-left:8px;min-width:30px;text-align:right}
.sidebar .selectbtn{background-color:var(--sidebar-input);border-color:var(--sidebar-line);color:var(--sidebar-fg)}
.sidebar .selectbtn option{color:#0f172a;background:#fff}
.sidebar .grow{flex:1}
.sidebar .avatar{background:var(--sidebar-strong);color:var(--sidebar)}
.nav.acct .who small{color:var(--sidebar-muted)}

main{min-width:0;display:flex;flex-direction:column}
.toolbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;min-height:56px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:8px max(28px,env(safe-area-inset-right)) 8px max(28px,env(safe-area-inset-left));background:var(--toolbar);border-bottom:1px solid var(--sep)}
.toolbar .ttl{font-size:14px;font-weight:600;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:.01em}
.toolbar .sp{flex:1}
.tbtn{all:unset;box-sizing:border-box;cursor:pointer;height:32px;min-width:32px;padding:0 9px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--label2);font-size:14px;font-weight:500}
.tbtn:hover{background:var(--fill3);color:var(--label)}
.tbtn svg{width:18px;height:18px}
.content{width:100%;max-width:808px;margin:0 auto;padding:26px 24px 96px}   /* one 760px column on every app screen (it was 872 here, 760 there; audit 10-31) */
.largetitle{font:650 26px/1.2 var(--font);letter-spacing:-.035em;margin:0 0 4px;color:var(--label)}
.subtitle{color:var(--label2);font-size:14.5px;margin:0 0 20px;max-width:68ch;letter-spacing:-.01em}

/* ---------- Controls ---------- */
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--fill3);border:1px solid var(--sep);border-radius:8px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 14px;font-size:13px;font-weight:600;border-radius:6px;white-space:nowrap;color:var(--label2)}
.seg button:hover{background:var(--fill3);color:var(--label)}
.seg button[aria-pressed="true"]{background:var(--blue);color:var(--on-accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--sep);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:8px 15px;font-size:14.5px;font-weight:600;background:var(--bg2);color:var(--label);min-height:38px;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--fill3)}
.btn.fill{background:var(--blue);border-color:var(--blue);color:var(--on-accent)}
.btn.fill:hover{background:color-mix(in srgb,var(--blue) 82%,var(--bg2))}
.btn.tint{background:var(--bg2);border-color:var(--fill);color:var(--label)}
.btn.tint:hover{background:var(--fill3);border-color:var(--label3)}
.btn.plain{background:none;border-color:transparent;box-shadow:none;padding-inline:8px;color:var(--label)}
.btn.plain:hover{background:var(--fill3)}
.btn.danger{color:var(--red)}
.btn.lg{min-height:44px;border-radius:8px;font-size:15.5px;padding:10px 20px}
.btn:disabled{opacity:.45;cursor:default}
.btn svg{width:17px;height:17px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.selectbtn{appearance:none;-webkit-appearance:none;border:1px solid var(--sep);background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center/11px;border-radius:6px;padding:6px 28px 6px 10px;font-size:13px;font-weight:500;max-width:100%}
.switch{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:11px;background:var(--fill);position:relative;flex:none;cursor:pointer;transition:background .2s;margin:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.switch:checked{background:var(--blue)}
.switch:checked::after{transform:translateX(16px)}

/* ---------- Cards & lists ---------- */
.card{background:var(--bg2);border:1px solid var(--sep);border-radius:12px;box-shadow:var(--card-shadow);padding:18px 20px;margin-bottom:16px}
.card.flush{padding:0;overflow:hidden}
.chead{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;margin-bottom:10px}
.chead .lbl{display:inline-flex;align-items:center;gap:6px}
.chead .aside{margin-left:auto;font-size:13px;color:var(--label2);font-weight:400}
.sechead{font-size:17px;font-weight:600;letter-spacing:-.025em;margin:30px 2px 12px;display:flex;align-items:baseline;gap:10px;color:var(--label)}
.sechead small{font-size:13px;font-weight:400;color:var(--label2)}
.list{background:var(--bg2);border:1px solid var(--sep);border-radius:12px;box-shadow:var(--card-shadow);overflow:hidden;margin-bottom:16px}
.li{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;position:relative;width:100%;text-align:left;border:0;background:none}
.li + .li{border-top:1px solid var(--sep)}
button.li:hover{background:var(--fill4)}
.li .lic{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;flex:none;margin-top:0;color:var(--label2);background:var(--fill3)}
.li .lic svg{width:16px;height:16px}
.li .lit{min-width:0;flex:1}
.li .lit b{display:block;font-weight:600;font-size:15px}
.li .lit span{display:block;font-size:13.5px;color:var(--label2);margin-top:2px}
.li .trail{margin-left:auto;color:var(--label3);font-size:13.5px;display:flex;align-items:center;gap:8px;white-space:nowrap;align-self:center}
.li .chev{width:8px;height:13px;color:var(--label3)}
/* Coloured squares become tinted icon chips: colour marks the topic without app-icon tiles. */
.c-blue{background:color-mix(in srgb,var(--blue) 12%,transparent)!important;color:var(--blue)!important}
.c-green{background:color-mix(in srgb,var(--green) 12%,transparent)!important;color:var(--green)!important}
.c-orange{background:color-mix(in srgb,var(--orange) 13%,transparent)!important;color:var(--orange)!important}
.c-red{background:color-mix(in srgb,var(--red) 11%,transparent)!important;color:var(--red)!important}
.c-purple{background:color-mix(in srgb,var(--purple) 12%,transparent)!important;color:var(--purple)!important}
.c-indigo{background:color-mix(in srgb,var(--indigo) 12%,transparent)!important;color:var(--indigo)!important}
.c-teal{background:color-mix(in srgb,var(--teal) 12%,transparent)!important;color:var(--teal)!important}
.c-pink{background:color-mix(in srgb,var(--pink) 11%,transparent)!important;color:var(--pink)!important}
.c-gray{background:var(--fill3)!important;color:var(--label2)!important}
.c-yellow{background:color-mix(in srgb,var(--yellow) 15%,transparent)!important;color:var(--yellow)!important}
.c-mint{background:color-mix(in srgb,var(--mint) 12%,transparent)!important;color:var(--mint)!important}
.t-blue{color:var(--blue)} .t-green{color:var(--green)} .t-orange{color:var(--orange)} .t-red{color:var(--red)} .t-purple{color:var(--purple)} .t-pink{color:var(--pink)} .t-teal{color:var(--teal)} .t-indigo{color:var(--indigo)} .t-gray{color:var(--label2)}

/* ---------- Question ---------- */
.qmeta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:16px;font-weight:600;padding:2px 10px;border-radius:6px;background:var(--fill3);border:1px solid color-mix(in srgb,var(--label) 18%,transparent);color:var(--label)}
.tag.accent{background:var(--fill3)}
.tag.firm{background:var(--fill3)}
.qtext{font:600 23px/1.35 var(--font);letter-spacing:-.025em;margin:2px 0 18px;text-wrap:pretty}
.hint{background:var(--fill4);border:1px solid var(--sep);border-left:3px solid var(--label);border-radius:8px;padding:10px 14px;font-size:14.5px;margin-top:12px;display:flex;gap:10px}
.hint svg{color:var(--label);margin-top:2px}
.mockbar{display:flex;gap:4px;margin:0 0 14px}
.mockbar i{flex:1;height:4px;border-radius:2px;background:var(--fill2)}
.mockbar i.done{background:var(--blue)} .mockbar i.cur{background:color-mix(in srgb,var(--blue) 45%,transparent)}
/* Mock interview self-view, like a video call: floated beside the question. */
.camtile{float:right;position:relative;margin:0 0 10px 16px;width:220px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#0a0a0a;border:1px solid var(--sep)}
.camtile video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.camtile .cambtn{all:unset;cursor:pointer;position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;font:600 12px/1.2 var(--font);color:#fff;background:rgba(10,10,10,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.camtile .cambtn:hover{background:rgba(10,10,10,.8)} .camtile .cambtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.camtile .cambtn .i{width:15px;height:15px}
.camtile .camlive{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:8px;font:600 11px/1.2 var(--font);color:#fff;background:rgba(10,10,10,.55)}
.camtile .camlive i{width:6px;height:6px;border-radius:50%;background:#ef4444}
.camtile.off{width:auto;aspect-ratio:auto;background:var(--bg2);border-radius:8px}
.camtile.off video,.camtile.off .camlive{display:none}
.camtile.off .cambtn{position:static;color:var(--label);background:transparent;padding:7px 12px;font-size:13px}
.camtile.off .cambtn:hover{background:var(--fill3)}
.camtile[hidden]{display:none}
.qcard .qfoot{clear:both}
@media (max-width:600px){
  .camtile{width:96px;aspect-ratio:3/4;margin-left:12px}
  .camtile .cambtn{left:4px;right:4px;bottom:4px;justify-content:center;padding:4px 6px;font-size:11px}
  .camtile .cambtn .i{display:none}
  .camtile .camlive{top:4px;left:4px;font-size:10px;padding:2px 6px}
  .camtile.off .cambtn{font-size:12px}
  .camtile.off .cambtn .i{display:inline}
}
.pres .preshead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pres .preshead b{display:block;font-size:16px;letter-spacing:-.01em}
.pres .preshead span:not(.score-chip){display:block;font-size:13px;color:var(--label2);margin-top:2px}
.pres .preshead .score-chip{flex:none}
.pres .preslabel{margin:16px 0 0;font-size:12px;font-weight:600;color:var(--label2)}
.pres .metrics{margin-top:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:560px){ .pres .metrics{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pres .metric .k{font-size:12px;color:var(--label2);font-weight:600}
.pres .prestips{margin:14px 0 0;box-shadow:none}
.presok{margin:14px 0 0;font-size:14px;color:var(--label2)}

/* ---------- Recorder ---------- */
.rec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start}
.recside{display:flex;flex-direction:column;align-items:center;gap:8px;width:118px;padding-top:4px}
.recbtn{width:68px;height:68px;border-radius:50%;border:0;background:var(--blue);display:grid;place-items:center;padding:0;position:relative;box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 14%,transparent);transition:background .2s,box-shadow .2s}
.recbtn::before{content:"";width:26px;height:26px;background:var(--on-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6-3.6a.9.9 0 1 0-1.8 0 4.2 4.2 0 0 1-8.4 0 .9.9 0 1 0-1.8 0 6 6 0 0 0 5.1 5.9V20H8.8a.9.9 0 1 0 0 1.8h6.4a.9.9 0 1 0 0-1.8h-2.3v-2.7a6 6 0 0 0 5.1-5.9Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6-3.6a.9.9 0 1 0-1.8 0 4.2 4.2 0 0 1-8.4 0 .9.9 0 1 0-1.8 0 6 6 0 0 0 5.1 5.9V20H8.8a.9.9 0 1 0 0 1.8h6.4a.9.9 0 1 0 0-1.8h-2.3v-2.7a6 6 0 0 0 5.1-5.9Z'/%3E%3C/svg%3E") center/contain no-repeat}
.recbtn:hover{background:color-mix(in srgb,var(--blue) 82%,var(--bg2))}
.recbtn.on{background:var(--red);box-shadow:0 0 0 6px color-mix(in srgb,var(--red) 16%,transparent)}
.recbtn.on::before{width:20px;height:20px;border-radius:3px;-webkit-mask:none;mask:none;background:#fff}
.clock{font:600 24px/1 var(--font);font-variant-numeric:tabular-nums}
.clock.over{color:var(--orange)}
.reclabel{font-size:12px;color:var(--label2);text-align:center}
.wave{display:flex;gap:2px;align-items:center;height:24px;width:100%;justify-content:center}
.wave i{display:block;width:3px;border-radius:1px;background:var(--blue);height:3px;opacity:.3;transition:height .08s}
.wave.on i{opacity:1;background:var(--label)}
textarea.ans{width:100%;min-height:176px;resize:vertical;border:1px solid var(--sep);border-radius:8px;background:var(--bg2);padding:12px 14px;font-size:15.5px;line-height:1.6;outline:none}
textarea.ans:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 15%,transparent)}
.tafoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:12.5px;color:var(--label2);margin:6px 2px 12px}
.note{font-size:13px;color:var(--label2);background:var(--fill4);border:1px solid var(--sep);border-radius:7px;padding:9px 12px;margin-top:10px}
@media (max-width:600px){ .rec{grid-template-columns:minmax(0,1fr)} .recside{width:100%;flex-direction:row;justify-content:center;gap:16px} .recside .wave{width:90px} }

/* ---------- Report ---------- */
.summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
@media (max-width:560px){ .summary{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center} .legend{justify-content:center} }
.rings{position:relative;width:132px;height:132px}
.rings svg{width:132px;height:132px;transform:rotate(-90deg)}
.rings circle{fill:none;stroke-linecap:butt}
.rings .big{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.rings .big b{font:600 38px/1 var(--font);letter-spacing:-.04em}
.rings .big small{display:block;font-size:10.5px;color:var(--label2);font-weight:700;margin-top:4px;letter-spacing:.08em}
.verdict{font:600 18px/1.4 var(--font);letter-spacing:-.02em;margin:6px 0 12px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--label2)}
.legend span{display:inline-flex;align-items:center;gap:6px;font-weight:500;background:var(--fill4);border:1px solid var(--sep);border-radius:6px;padding:4px 10px}
.legend i{display:none}
.legend b{font-variant-numeric:tabular-nums;color:var(--label)}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-top:18px}
.metric{background:var(--fill4);border:1px solid var(--sep);border-radius:8px;padding:10px 12px}
.metric .k{font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.05em}
.metric .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:4px}
.metric .v small{font-size:12.5px;font-weight:500;color:var(--label2);margin-left:3px}
.metric .s{font-size:12px;color:var(--label2)}
.lengthbar{position:relative;height:6px;border-radius:3px;background:var(--fill2);margin-top:8px}
.lengthbar .ok{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--green) 35%,transparent);border-radius:3px}
.lengthbar .dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--label);border:2px solid var(--bg2);transform:translate(-50%,-50%)}
.pts .li .lit b{font-weight:500}
.status{width:22px;height:22px;flex:none;margin-top:1px}
.transcript{font-size:15.5px;line-height:1.75;white-space:pre-wrap;word-wrap:break-word}
.transcript mark{background:none;color:inherit;border-radius:2px;padding:1px 0;cursor:help}
.transcript mark.filler{background:color-mix(in srgb,var(--orange) 20%,transparent);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--orange) 70%,transparent)}
.transcript mark.hedge{background:color-mix(in srgb,var(--purple) 16%,transparent);box-shadow:inset 0 -2px 0 var(--purple)}
.transcript mark.word{background:color-mix(in srgb,var(--blue) 12%,transparent);box-shadow:inset 0 -2px 0 var(--blue)}
.transcript mark.tangent{background:color-mix(in srgb,var(--gray) 18%,transparent);color:var(--label2)}
.keys{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--label2);margin-top:12px}
.keys span{display:inline-flex;align-items:center;gap:5px}
.keys i{width:14px;height:10px;border-radius:2px;display:inline-block}
.quote{font-size:15px;line-height:1.65;white-space:pre-wrap;background:var(--fill4);border:1px solid var(--sep);border-left:3px solid var(--label);border-radius:6px;padding:12px 16px}
.star{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.star div{border-radius:6px;padding:8px 6px;text-align:center;background:var(--fill4);border:1px solid var(--sep);font-size:12px;color:var(--label2)}
.star div b{display:block;font-size:19px;font-weight:700;color:var(--label3)}
.star div.on{background:color-mix(in srgb,var(--green) 10%,var(--bg2));border-color:color-mix(in srgb,var(--green) 35%,var(--sep));color:var(--label)}
.star div.on b{color:var(--green)}
.wordrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.wordrow .said{color:var(--red);text-decoration:line-through;text-decoration-thickness:1px;font-weight:500}
.wordrow .try{color:var(--green);font-weight:500}
.wordrow + .why{font-size:13px;color:var(--label2);margin-top:2px}
.thinking{display:flex;align-items:center;gap:10px;color:var(--label2);font-size:14.5px}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--fill2);border-top-color:var(--blue);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{color:var(--label2);font-size:14.5px;text-align:center;padding:30px 16px}
.err{color:var(--red);font-size:14px}
.fade-in{animation:fadein .3s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Bank / progress ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.qrow .lit b{font-weight:500;font-size:15px}
.qrow .lit span{font-size:13px}
.score-chip{font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:4px;font-variant-numeric:tabular-nums}
.scoretrail .score-chip,.scoretrail .scoreslot{display:inline-block;box-sizing:border-box;min-width:42px;text-align:center}
.sc-g{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green)}
.sc-w{background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange)}
.sc-b{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--bg2);border:1px solid var(--sep);border-radius:12px;box-shadow:var(--card-shadow);padding:14px 16px;display:flex;flex-direction:column}
.tile .v{margin-top:auto!important;padding-top:8px}   /* a label on two lines ("Really needs work") no longer pushes its number down */
.tile .k{font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.05em}
.tile .v{font:600 30px/1.1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:8px}
.tile .v small{font:500 13.5px var(--font);color:var(--label2);margin-left:3px}
.tile .s{font-size:12.5px;color:var(--label2)}
.bar{height:6px;border-radius:3px;background:var(--fill2);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:3px}
.spark{width:100%;height:60px;display:block}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--sep);vertical-align:top}
th{font-size:11.5px;color:var(--label2);font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ---------- Dialog (settings) ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:50;display:grid;place-items:center;padding:16px;animation:fadein .2s}
.sheet{background:var(--bg);border:1px solid var(--sep);border-radius:14px;box-shadow:var(--sheet-shadow);width:min(580px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:0 0 20px}
.sheethead{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--bg2);border-bottom:1px solid var(--sep);z-index:1}
.sheethead b{font:600 16px var(--font);letter-spacing:-.02em}
.sheet .grp{margin:0 18px 8px}
.sheet .grphead{font-size:11px;font-weight:700;color:var(--label2);margin:20px 22px 8px;text-transform:uppercase;letter-spacing:.08em}
.sheet .grpfoot{font-size:12.5px;color:var(--label2);margin:6px 22px 0}
.setrow{display:flex;align-items:center;gap:12px;padding:9px 16px;min-height:48px;position:relative}
.setrow + .setrow{border-top:1px solid var(--sep)}
.setrow label{flex:1;font-size:14.5px}
.setrow input[type=password],.setrow input[type=text]{flex:1;border:1px solid var(--sep);border-radius:6px;background:var(--bg2);padding:6px 9px;font-size:14px;outline:none;min-width:0}

/* ---------- Account ---------- */
.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font-size:10px;font-weight:700;background:var(--gray)}
.avatar.big{width:76px;height:76px;font-size:28px;margin:6px auto 10px}
.avatar.on{background:var(--blue)}
.nav.acct{padding-block:8px}
.nav.acct .who{min-width:0;line-height:1.25}
.nav.acct .who b{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav.acct .who small{display:block;font-size:11px}
.syncdot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px}
.syncdot.pending,.syncdot.saving,.syncdot.loading{background:var(--orange)} .syncdot.error{background:var(--red)}
.authhero{text-align:center;padding:8px 24px 8px}
.authhero h2{font:600 24px/1.25 var(--font);letter-spacing:-.03em;margin:4px 0 6px}
.authhero p{color:var(--label2);font-size:14.5px;margin:0}
.field{display:block;width:100%;border:0;background:none;font-size:15px;padding:12px 16px;outline:none}
.authform .list{margin:0 18px 10px}
/* the Cloudflare check: centered at its own 300px inside the form column, invisible until it needs a click */
.authform .captcha{display:flex;justify-content:center;margin:0 18px;max-width:calc(100% - 36px)}
.authform .captcha:has(iframe){margin:4px 18px 12px}
.authform .captcha iframe{max-width:100%}
.authform .li{padding:0}
.authmsg{font-size:13.5px;margin:4px 22px 0;min-height:20px}
.authmsg.bad{color:var(--red)} .authmsg.good{color:var(--green)}
.authactions{display:flex;flex-direction:column;gap:10px;margin:14px 18px 0}
.authactions .btn{width:100%}


/* ---------- Top bar (floating nav) ---------- */
.topbar{position:sticky;top:0;z-index:40;padding:12px 24px 10px;background:color-mix(in srgb,var(--bg) 94%,transparent)}   /* flat fill, no backdrop blur: re-blurring the animated ribbon under it on every scroll frame made the page lag (Caleb, 10-30) */
.topbar-in{max-width:1200px;margin:0 auto;container-type:inline-size;container-name:bar;display:flex;align-items:center;gap:6px;min-height:58px;padding:8px 10px 8px 16px;border:1px solid var(--sep);border-radius:14px;background:var(--bg2);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.topbar .brand{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;margin-right:14px;padding:0;border:0}
.topbar .brand .logo{width:28px;height:28px}
.topbar .brand .logo rect{fill:var(--label)} .topbar .brand .logo path{stroke:var(--bg2)} .topbar .brand .logo circle{fill:var(--bg2)}
.topbar .brand b{font:700 16px/1 var(--font);letter-spacing:-.04em;color:var(--label);white-space:nowrap}
.topbar .brand b span{font-weight:500;color:var(--label2)}
.topnav{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;flex:0 1 auto}
.toplink{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:7px;font-size:14px;font-weight:500;color:var(--label2);white-space:nowrap}
.toplink:hover{color:var(--label);background:var(--fill3)}
.toplink[aria-current="true"]{color:var(--label);background:var(--fill3);font-weight:600}
.toplink .badge{font-size:11px;font-weight:600;background:var(--fill3);color:var(--label2);border:1px solid var(--sep);border-radius:5px;padding:0 5px;line-height:16px}
.topbar .sp{flex:1}
.topsearch{position:relative}
.topsearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--label3)}
.topsearch input{width:190px;height:36px;border:1px solid var(--sep);border-radius:8px;background:var(--fill4);padding:0 10px 0 31px;font-size:13.5px;outline:none}
.topsearch input:focus{border-color:var(--label3);background:var(--bg2)}
.iconbtn{all:unset;box-sizing:border-box;cursor:pointer;width:36px;height:36px;border:1px solid var(--sep);border-radius:8px;display:grid;place-items:center;color:var(--label);background:var(--bg2);flex:none}
.iconbtn:hover{background:var(--fill3)}
.iconbtn svg{width:17px;height:17px}
.acctbtn{all:unset;box-sizing:border-box;cursor:pointer;height:36px;padding:0 14px;border-radius:8px;background:var(--label);color:var(--bg2);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.acctbtn.on{background:var(--bg2);color:var(--label);border:1px solid var(--sep);padding:0 10px 0 4px}
.acctbtn .avatar{width:26px;height:26px;font-size:10.5px}
#tbRight:empty{display:none}
#tbRight{margin-right:4px}
.toolbar{display:none!important}

/* ---------- Question card ---------- */
.qcard{padding:28px 30px 16px;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px -10px rgba(0,0,0,.12)}
.qcard .qtext{font:600 22px/1.4 var(--font);letter-spacing:-.025em;margin:0 0 14px}
.qcard .qmeta{margin:0 0 20px}
.qcard .showans{min-height:40px;padding:0 16px;font-size:14px;font-weight:500;margin-left:auto}
.qnav{display:flex;align-items:center;gap:8px;margin-top:12px}
.sqbtn{all:unset;box-sizing:border-box;cursor:pointer;width:40px;height:40px;border:1px solid var(--sep);border-radius:8px;display:grid;place-items:center;background:var(--bg2);box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--label)}
.sqbtn:hover{background:var(--fill3)}
.sqbtn[disabled]{opacity:.35;cursor:default}
.sqbtn svg{width:16px;height:16px}
.qnav .btn{min-height:40px}
.qfoot{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--sep);font-size:12px;color:var(--label2)}
.qfoot .lnk{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--label3)}
.qfoot .lnk:hover{color:var(--label)}
.kbd{font:500 11px var(--mono);border:1px solid var(--sep);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--fill4);color:var(--label)}

/* ---------- New-version bar ---------- */
.updbar{position:fixed;left:0;right:0;bottom:20px;margin:0 auto;width:max-content;z-index:9999;display:flex;gap:10px;align-items:center;background:var(--bg2);color:var(--label);border:1px solid var(--sep);border-radius:12px;padding:8px 8px 8px 14px;box-shadow:0 12px 32px -8px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.06);font-size:14px;font-weight:500;max-width:calc(100vw - 24px);animation:fadein .25s ease both}
.updbar .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.updbar .btn{min-height:32px;padding:5px 12px;font-size:13.5px}
@media (max-width:900px){ .updbar{bottom:calc(76px + env(safe-area-inset-bottom));font-size:13px} }

/* ---------- Brand: Daybreak, the Instagram grid's gradient ----------
   Light and accents only: the logo's dot, the home page's light, eyebrows, step numbers, the pass
   card. Status keeps its own colours (green covered, orange partly, red missed). */
:root{
  --sun:#ffb020; --ember:#ff5c28; --rose:#f2367f; --iris:#7c4dff; --cobalt:#3355ff;
  --daybreak:linear-gradient(90deg,#ffb020 0%,#ff5c28 26%,#f2367f 52%,#7c4dff 78%,#3355ff 100%);
  --daybreak-v:linear-gradient(180deg,#ffb020 0%,#ff5c28 26%,#f2367f 52%,#7c4dff 78%,#3355ff 100%);
  --lp-a:.2;   /* how strong the home page's light is */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --lp-a:.3 } }
:root[data-theme="dark"]{ --lp-a:.3 }
.brand .logo circle{fill:url(#sdrDot)}

/* ---------- Home ---------- */
/* v5, approved by Caleb on 10-29 ("Yes, use the room"): a full-bleed photo of a Midtown conference
   room, then the sections from launch/homepage/v5. The brand is the Daybreak gradient (Caleb,
   10-29: "make sure all branding keeps the gradient"); solid #ff5c28 only where one colour is needed.
   Every class is v5- (the prototype's .btn, .card, .plan… are the app's own). Surfaces and text use
   the app's tokens, so dark mode follows them; the v5 tokens below switch with them. The home view
   drops .content's width so its sections run edge to edge (no 100vw, so no sideways scroll). */
:root{
  --v5-a:#ff5c28; --v5-amber:#ffb020; --v5-at:#c2410c; --v5-ink:#0b0b0d; --v5-ink2:#3f3f46;
  --v5-warm:var(--daybreak,linear-gradient(90deg,#ffb020 0%,#ff5c28 26%,#f2367f 52%,#7c4dff 78%,#3355ff 100%));
  --v5-day:linear-gradient(135deg,#ffb020 0%,#ff5c28 26%,#f2367f 52%,#7c4dff 78%,#3355ff 100%);
  --v5-dot:linear-gradient(135deg,#ffb020,#ff5c28 55%,#f2367f);
  --v5-wash:#fff1e8; --v5-dim:#a8a29e; --v5-firm:#8a857f; --v5-ok:#15803d; --v5-ui:var(--bg2);
  --v5-hl:#ffe9d6; --v5-hlt:#9a3412; --v5-hedge:#fde7ef; --v5-hedget:#9d174d;
  --v5-btn-bg:#0b0b0d; --v5-btn-fg:#fff;
  --v5-glass:rgba(255,255,255,.82); --v5-glass-hover:#fff; --v5-glass-fg:#0b0b0d; --v5-glass-line:rgba(11,11,13,.1);
  --v5-photo:#d8c3ab; --v5-screen:linear-gradient(180deg,#fff 0%,#fffaf6 100%); --v5-edge:transparent;
  --v5-glow-a:.28; --v5-blob-a:.45; --v5-logo-f:brightness(0); --v5-logo-a:.58;
  --v5-shadow:0 1px 2px rgba(11,11,13,.06),0 10px 30px -12px rgba(11,11,13,.2);
  --v5-shadow-lg:0 2px 4px rgba(11,11,13,.06),0 30px 60px -20px rgba(11,11,13,.32);
  /* the photo's scrim: light at the top for the bar, and behind the words at the bottom left */
  --v5-scrim:linear-gradient(180deg,rgba(255,250,244,.6) 0%,rgba(255,250,244,0) 22%),
    radial-gradient(85% 85% at 0% 100%,rgba(255,248,240,.95) 0%,rgba(255,248,240,.72) 40%,rgba(255,248,240,0) 78%);
  --v5-scrim-m:linear-gradient(180deg,rgba(255,250,244,.62) 0%,rgba(255,250,244,0) 20%),
    linear-gradient(0deg,rgba(255,248,240,.96) 0%,rgba(255,248,240,.78) 42%,rgba(255,248,240,0) 72%);
  --v5-tab:0px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --v5-at:#ff8a3d; --v5-ink2:#d4d4d8; --v5-wash:#2a170b; --v5-dim:#78716c; --v5-firm:#8f8a84; --v5-ok:#4ade80; --v5-ui:#171615;
  --v5-hl:rgba(255,138,61,.2); --v5-hlt:#ffc39e; --v5-hedge:rgba(244,114,182,.18); --v5-hedget:#f9a8d4;
  --v5-btn-bg:#fafafa; --v5-btn-fg:#0b0b0d;
  --v5-glass:rgba(16,15,14,.5); --v5-glass-hover:rgba(30,28,26,.72); --v5-glass-fg:#f4f4f5; --v5-glass-line:rgba(255,255,255,.2);
  --v5-photo:#17120e; --v5-screen:linear-gradient(180deg,#141414 0%,#17110c 100%); --v5-edge:rgba(255,255,255,.09);
  --v5-glow-a:.16; --v5-blob-a:.24; --v5-logo-f:brightness(0) invert(1); --v5-logo-a:.66; --v5-rib-a:.7;
  --v5-shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -12px rgba(0,0,0,.85);
  --v5-shadow-lg:0 2px 4px rgba(0,0,0,.5),0 30px 60px -20px rgba(0,0,0,.95);
  --v5-scrim:linear-gradient(180deg,rgba(9,8,7,.72) 0%,rgba(9,8,7,0) 26%),
    radial-gradient(90% 90% at 0% 100%,rgba(9,8,7,.94) 0%,rgba(9,8,7,.74) 42%,rgba(9,8,7,0) 80%),linear-gradient(rgba(9,8,7,.24),rgba(9,8,7,.24));
  --v5-scrim-m:linear-gradient(180deg,rgba(9,8,7,.72) 0%,rgba(9,8,7,0) 22%),
    linear-gradient(0deg,rgba(9,8,7,.96) 0%,rgba(9,8,7,.8) 42%,rgba(9,8,7,0) 74%),linear-gradient(rgba(9,8,7,.22),rgba(9,8,7,.22)); } }
:root[data-theme="dark"]{
  --v5-at:#ff8a3d; --v5-ink2:#d4d4d8; --v5-wash:#2a170b; --v5-dim:#78716c; --v5-firm:#8f8a84; --v5-ok:#4ade80; --v5-ui:#171615;
  --v5-hl:rgba(255,138,61,.2); --v5-hlt:#ffc39e; --v5-hedge:rgba(244,114,182,.18); --v5-hedget:#f9a8d4;
  --v5-btn-bg:#fafafa; --v5-btn-fg:#0b0b0d;
  --v5-glass:rgba(16,15,14,.5); --v5-glass-hover:rgba(30,28,26,.72); --v5-glass-fg:#f4f4f5; --v5-glass-line:rgba(255,255,255,.2);
  --v5-photo:#17120e; --v5-screen:linear-gradient(180deg,#141414 0%,#17110c 100%); --v5-edge:rgba(255,255,255,.09);
  --v5-glow-a:.16; --v5-blob-a:.24; --v5-logo-f:brightness(0) invert(1); --v5-logo-a:.66; --v5-rib-a:.7;
  --v5-shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -12px rgba(0,0,0,.85);
  --v5-shadow-lg:0 2px 4px rgba(0,0,0,.5),0 30px 60px -20px rgba(0,0,0,.95);
  --v5-scrim:linear-gradient(180deg,rgba(9,8,7,.72) 0%,rgba(9,8,7,0) 26%),
    radial-gradient(90% 90% at 0% 100%,rgba(9,8,7,.94) 0%,rgba(9,8,7,.74) 42%,rgba(9,8,7,0) 80%),linear-gradient(rgba(9,8,7,.24),rgba(9,8,7,.24));
  --v5-scrim-m:linear-gradient(180deg,rgba(9,8,7,.72) 0%,rgba(9,8,7,0) 22%),
    linear-gradient(0deg,rgba(9,8,7,.96) 0%,rgba(9,8,7,.8) 42%,rgba(9,8,7,0) 74%),linear-gradient(rgba(9,8,7,.22),rgba(9,8,7,.22)); }
@media (max-width:900px){ :root{ --v5-tab:calc(57px + env(safe-area-inset-bottom)) } html[data-guest]{ --v5-tab:0px } }

/* the frame: full width, and the app's own top bar floats clear over the photo until it scrolls away */
html[data-view="home"]{overflow-x:clip}
html[data-view="home"] .content{max-width:none;padding:0}
html[data-view="home"] .topbar{position:fixed;top:0;left:0;right:0;transition:background-color .3s,box-shadow .3s}
html[data-view="home"] .topbar-in{transition:background-color .3s,border-color .3s,box-shadow .3s}
html[data-view="home"][data-bar="clear"] .topbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html[data-view="home"][data-bar="clear"] .topbar-in{background:transparent;border-color:transparent;box-shadow:none}
html[data-view="home"][data-bar="clear"] :is(.toplink,#menuBtn){color:var(--label)}
html[data-view="home"][data-bar="clear"] .toplink:hover{background:color-mix(in srgb,var(--bg2) 60%,transparent)}
html[data-view="home"][data-bar="clear"] :is(.iconbtn,.topsearch input:not(:focus)){background:color-mix(in srgb,var(--bg2) 62%,transparent);border-color:color-mix(in srgb,var(--label) 14%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.v5{color:var(--label);font-feature-settings:normal;letter-spacing:normal}
.v5-defs{position:absolute;width:0;height:0;overflow:hidden}
.v5-wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.v5-sec{position:relative;scroll-margin-top:72px}
.v5-center{text-align:center}
.v5 :is(button,a):focus-visible{outline:2px solid var(--v5-a);outline-offset:3px}

/* type and buttons */
.v5-kicker{margin:0;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v5-at)}
.v5-h2{margin:0;font:600 clamp(38px,4.8vw,64px)/1.02 var(--font);letter-spacing:-.045em;color:var(--label)}
.v5-kicker + .v5-h2{margin-top:14px}
.v5-sub{margin:16px 0 0;max-width:560px;font-size:19px;line-height:1.5;color:var(--label2)}
.v5-center .v5-sub{margin-left:auto;margin-right:auto}
.v5-grad{background:var(--v5-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.v5-muted{color:var(--v5-dim)}
.v5-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--font);letter-spacing:-.01em;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background-color .2s}
.v5-btn-ink{background:var(--v5-btn-bg);color:var(--v5-btn-fg);box-shadow:0 10px 24px -10px rgba(11,11,13,.6)}
.v5-btn-ink:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(242,54,127,.55)}
.v5-btn-light{background:var(--v5-glass);color:var(--v5-glass-fg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--v5-glass-line) inset}
.v5-btn-light:hover{background:var(--v5-glass-hover)}
.v5-btn-white{background:#fff;color:var(--v5-ink);box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
.v5-btn-white:hover{transform:translateY(-1px)}
.v5-btn:disabled{opacity:.6;cursor:default;transform:none}
.v5-go{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-right:-8px;border-radius:50%;background:var(--v5-day);color:#fff;transition:transform .2s}
.v5-go svg{width:15px;height:15px}
.v5-btn:hover .v5-go{transform:translateX(3px)}
.v5-g .glogo,.v5-g .glogo svg{width:19px;height:19px}

/* 1. the room */
.v5-hero{position:relative;isolation:isolate;overflow:hidden;height:100vh;height:100svh;min-height:720px;max-height:1100px;color:var(--label)}
.v5-hero-bg{position:absolute;inset:0;z-index:-2;background:var(--v5-photo)}
.v5-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform-origin:50% 45%;animation:v5kb 22s cubic-bezier(.25,.6,.3,1) both;animation-delay:calc(var(--v5-t,0) * -1ms)}
@keyframes v5kb{from{transform:scale(1.06)}to{transform:none}}
.v5-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--v5-scrim)}
/* the room dissolves into the page instead of ending on a hard line (Caleb, 10-30) */
.v5-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(70px,11vh,120px);z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 0%,var(--bg) 100%)}
.v5-hero-in{position:absolute;left:0;right:0;bottom:clamp(64px,11vh,120px)}
.v5-title{margin:0;max-width:11ch;font:600 clamp(46px,6.1vw,92px)/.94 var(--font);letter-spacing:-.055em;color:var(--label)}
.v5-pdot{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;vertical-align:baseline;background:var(--v5-dot);box-shadow:0 0 .18em rgba(255,92,40,.95),0 0 .55em rgba(242,54,127,.5);animation:v5glow 3.2s ease-in-out infinite;animation-delay:calc(var(--v5-t,0) * -1ms)}
@keyframes v5glow{0%,100%{box-shadow:0 0 .14em rgba(255,92,40,.9),0 0 .4em rgba(242,54,127,.4)}50%{box-shadow:0 0 .22em rgba(255,92,40,1),0 0 .8em rgba(242,54,127,.65)}}
.v5-hero-sub{margin:22px 0 0;max-width:520px;font-size:clamp(18px,1.6vw,22px);line-height:1.55;font-weight:500;color:var(--v5-ink2)}
.v5-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.v5-ctas .gwrap{margin:0}

/* 2. try one now: the first question on a phone, with the example report around it */
.v5-try{padding:120px 0 90px;background:radial-gradient(60% 60% at 85% 30%,var(--v5-wash) 0%,transparent 70%)}
.v5-try-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:50px;align-items:center}
/* how it works: cal.com's step anatomy (a numbered chip, a bold title, one grey line), stacked beside the
   demo; the step the demo is on gets a soft panel and an ink chip (opacity only) */
.v5-howsteps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px}
.v5-howsteps li{position:relative;isolation:isolate;display:flex;align-items:flex-start;gap:16px;margin-left:-16px;padding:14px 16px}
.v5-howsteps li::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px;background:var(--fill4);box-shadow:0 0 0 1px var(--sep) inset;opacity:0;transition:opacity .35s}
.v5-howsteps li.on::before{opacity:1}
.v5-stepno{position:relative;isolation:isolate;flex:none;display:grid;place-items:center;min-width:34px;height:26px;margin-top:1px;padding:0 6px;border-radius:7px;background:var(--fill3);font:500 12px/1 var(--mono);color:var(--label2);transition:color .35s}
.v5-stepno::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--v5-btn-bg);opacity:0;transition:opacity .35s}
.v5-howsteps li.on .v5-stepno{color:var(--v5-btn-fg)}
.v5-howsteps li.on .v5-stepno::after{opacity:1}
.v5-howsteps b{display:block;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--label)}
.v5-howsteps b + span{display:block;margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--label2)}
.v5-try-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px}
.v5-try-cta > span{font-size:14px;color:var(--label2)}
.v5-stage{position:relative;height:640px}
.v5-phone{position:absolute;left:50%;top:6px;transform:translateX(-45%);width:310px;height:620px;padding:11px;border-radius:46px;background:#0c0c0f;box-shadow:var(--v5-shadow-lg),0 0 0 1px #2a2a30 inset,0 0 0 1px var(--v5-edge)}
.v5-screen{position:relative;height:100%;display:flex;flex-direction:column;padding:46px 20px 18px;border-radius:36px;overflow:hidden;background:var(--v5-screen)}
.v5-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:20px;background:#0c0c0f}
.v5-apptop{display:flex;align-items:center;justify-content:space-between;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label2)}
.v5-logo svg{display:block;width:24px;height:24px}
.v5-chiprow{margin-top:18px}
.v5-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--fill3);color:var(--v5-ink2);font:600 11px/1 var(--font)}
.v5-chip i{width:6px;height:6px;border-radius:50%;background:var(--v5-dot)}
.v5-qtext{margin:16px 0 6px;font:700 25px/1.12 var(--font);letter-spacing:-.03em;color:var(--label)}
.v5-qsub{margin:0;font-size:13px;line-height:1.45;color:var(--label2)}
.v5-mic{all:unset;box-sizing:border-box;position:relative;isolation:isolate;flex:none;display:grid;place-items:center;width:92px;height:92px;margin:30px auto 0;border-radius:50%;color:#fff;cursor:pointer;transition:transform .15s}
.v5-mic::before{content:"";position:absolute;inset:-7px;z-index:-3;border-radius:50%;background:conic-gradient(#ffb020,#ff5c28,#f2367f,#7c4dff,#3355ff,#7c4dff,#f2367f,#ff5c28,#ffb020);animation:v5spin 5s linear infinite;animation-delay:calc(var(--v5-t,0) * -1ms)}
.v5-mic::after{content:"";position:absolute;inset:-3px;z-index:-2;border-radius:50%;background:var(--bg2)}
.v5-core{position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--v5-ink)}
.v5-micon{display:grid}
.v5-micon svg{width:32px;height:32px}
button.v5-mic:hover{transform:scale(1.04)}
@keyframes v5spin{to{transform:rotate(360deg)}}
.v5-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:56px;margin-top:22px}
.v5-wave b{display:block;width:5px;border-radius:4px;background:var(--v5-warm);background-size:230px 100%;opacity:.6;transform:scaleY(.28);animation:v5bar 1.6s ease-in-out infinite}
@keyframes v5bar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
.v5-timer{margin:8px 0 0;text-align:center;font:500 12.5px/1 var(--mono);color:var(--label2)}
.v5-type{all:unset;cursor:pointer;align-self:center;margin-top:auto;padding:4px 6px;font-size:13px;font-weight:600;color:var(--label)}
.v5-type u{text-underline-offset:3px;text-decoration-color:var(--v5-a)}
.v5-float{position:absolute;z-index:2;padding:14px 16px;border-radius:18px;background:var(--bg2);box-shadow:var(--v5-shadow-lg),0 0 0 1px var(--v5-edge);font-size:13px;color:var(--label);animation:v5bob 6s ease-in-out infinite}
@keyframes v5bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.v5-t{display:block;font:500 10.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label2)}
/* The three cards keep off the phone's words (audit 10-31: they covered the question mid-word and the firm
   chip): the score and the delivery card sit above the phone's top edge, each held by its bottom so a
   longer card grows upward; the key points sit bottom left, clear of "Tap to answer" and "Answer in writing". */
.v5-f-score{left:-30px;bottom:calc(100% - 30px);display:flex;align-items:center;gap:12px;animation-delay:-1s}
.v5-chips3{display:flex;flex-wrap:wrap;gap:6px;max-width:176px;margin-top:7px}
.v5-chips3 span{padding:5px 6px;border-radius:6px;background:var(--fill3);color:var(--v5-ink2);font:500 10.5px/1 var(--mono)}
.v5-f-um{right:-10px;bottom:calc(100% - 40px);width:226px;animation-delay:-3s}
.v5-f-um p{margin:8px 0 0;line-height:1.6;color:var(--v5-ink2)}
.v5-f-check{left:-30px;bottom:24px;width:226px;animation-delay:-2s}
.v5-f-check ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.v5-f-check li{display:flex;align-items:flex-start;gap:8px;line-height:1.35;color:var(--v5-ink2)}
.v5-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.v5 mark{padding:0 3px;border-radius:4px;background:var(--v5-hl);color:var(--v5-hlt)}
.v5 mark.v5-hedge{background:var(--v5-hedge);color:var(--v5-hedget)}
.v5-st{flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%}
.v5-st svg{width:18px;height:18px}
.v5-st.ok{color:var(--v5-ok)} .v5-st.part{color:var(--v5-amber)}
.v5-st.miss{box-shadow:inset 0 0 0 2px var(--label3)}
.v5-ring{position:relative;flex:none;display:grid;place-items:center}
.v5-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.v5-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.v5-ring .v5-trk{stroke:var(--fill3)}
.v5-ring .v5-val{stroke:url(#v5Warm)}
.v5-ring b{position:relative;font-weight:700;line-height:1;letter-spacing:-.03em}

/* 3. the firms: logos since Caleb's call on 10-29 (he weighed the endorsement risk), names as the
   fallback. Every logo is one ink: black in light mode, white in dark (the files keep their colours). */
.v5-firms{padding:34px 0 20px;text-align:center;background:var(--fill4);border-top:1px solid var(--sep);border-bottom:1px solid var(--sep)}
.v5-firmhead{margin:0 auto;font-size:14px;color:var(--label2)}
.v5-firmhead b{font-weight:600;color:var(--label)}
.v5-marquee{overflow:hidden;margin:18px auto 0;max-width:1160px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.v5-track{display:flex;width:max-content;animation:v5scroll 160s linear infinite;animation-delay:calc(var(--v5-t,0) * -1ms)}
.v5-set{flex:none;display:flex;gap:48px;padding-right:48px}
.v5-set span{display:inline-flex;align-items:center;gap:48px;font:600 22px/1.25 var(--font);letter-spacing:-.025em;white-space:nowrap;color:var(--v5-firm)}
.v5-set span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--v5-dot);opacity:.7}
@keyframes v5scroll{to{transform:translateX(-50%)}}
.v5-more{display:none}
.v5-marquee:hover .v5-track{animation-play-state:paused}
.v5-logos{--v5-ls:1}
.v5-logos .v5-set{align-items:center;gap:68px;padding-right:68px}
.v5-flogo{flex:none;display:flex;align-items:center;height:52px}
.v5-flogo img{display:block;width:auto;max-width:none;filter:var(--v5-logo-f);opacity:var(--v5-logo-a);transition:opacity .2s;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.v5-flogo:hover img{opacity:.9}
.v5-logos .v5-more{display:block;margin:12px 0 0;font-size:13.5px;color:var(--label2)}
.v5-fine{margin:16px auto 0;font-size:12.5px;line-height:1.5;color:var(--label2)}

/* 4. topics */
.v5-topics{padding:110px 0 30px}
/* even columns, so six topics sit 3 + 3 (2 + 2 + 2 on a phone) instead of leaving one alone on a row (audit 10-31) */
.v5-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:780px;margin:38px auto 0}
@media (max-width:640px){ .v5-chips{grid-template-columns:repeat(2,minmax(0,1fr))} }
.v5-tchip{all:unset;box-sizing:border-box;cursor:pointer;display:flex;min-width:0;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:16px;background:var(--bg2);text-align:left;font:600 15px/1.15 var(--font);color:var(--label);box-shadow:0 0 0 1px var(--sep) inset,0 4px 0 var(--sep);transition:transform .12s,box-shadow .12s}
.v5-tchip small{display:block;margin-top:3px;font:500 12px/1.2 var(--font);color:var(--label2)}
.v5-tchip:hover{transform:translateY(-2px)}
.v5-tchip:active{transform:translateY(4px);box-shadow:0 0 0 2px var(--v5-a) inset,0 0 0 var(--sep)}
.v5-badge{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;font:700 12px/1 var(--font);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.v5-o1{background:linear-gradient(135deg,#ffb020,#ff5c28)} .v5-o2{background:linear-gradient(135deg,#ff5c28,#f2367f)}
.v5-o3{background:linear-gradient(135deg,#f2367f,#7c4dff)} .v5-o4{background:linear-gradient(135deg,#7c4dff,#3355ff)}

/* Below the topics, every section is modelled on a named section of a real site (Caleb, 10-29: no
   sections "simply designed by ai"); the captures are in launch/homepage/inspo/ref-*.png. Colour stays
   for the brand moments only: the logo dot, the glowing dots and the primary button. */
/* 5. what every answer gets back: Stripe's product grid (stripe.com, "Flexible solutions for every business
   model"): a two-tone heading at reading size, then hairline cards with one plain title each and the
   product inside */
.v5-bento-sec{padding:96px 0 24px}
.v5-bento-head{max-width:760px}
.v5-bento-head .v5-h2{font-size:clamp(26px,2.6vw,36px);font-weight:600;line-height:1.2;letter-spacing:-.022em}
.v5-note{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--label2)}
.v5-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.v5-card{position:relative;display:flex;flex-direction:column;min-height:330px;padding:26px;border-radius:12px;background:var(--fill4);box-shadow:0 0 0 1px var(--sep) inset}
.v5-card.v5-span2{grid-column:span 2}
.v5-card h3{margin:0;max-width:440px;font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--label)}
.v5-ui{position:relative;margin-top:auto;padding:18px;border-radius:10px;background:var(--bg2);box-shadow:0 0 0 1px var(--sep),0 10px 26px -14px rgba(11,11,13,.22)}
.v5-card .v5-ui{margin-top:26px}
.v5-scoreui{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.v5-subs{flex:1;min-width:220px;display:grid;gap:10px}
.v5-subs div{display:grid;grid-template-columns:86px minmax(0,1fr) 42px;align-items:center;gap:10px;font-size:13px;color:var(--v5-ink2)}
.v5-subs b{font:500 12px/1 var(--mono);text-align:right;color:var(--label)}
.v5-bar{display:block;height:6px;overflow:hidden;border-radius:6px;background:var(--fill3)}
.v5-bar span{display:block;height:100%;border-radius:inherit;background:var(--label)}
.v5-bento .v5-ring .v5-val{stroke:var(--label)}
.v5-verdict{flex-basis:100%;margin:0;font-size:13.5px;line-height:1.5;color:var(--label)}
.v5-verdict em{margin-right:6px;padding:4px 7px;border-radius:6px;background:var(--fill3);color:var(--label);font:600 11px/1 var(--font)}
.v5-transcript p{margin:0;font-size:14.5px;line-height:1.75;color:var(--v5-ink2)}
.v5-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.v5-legend span{padding:6px 9px;border-radius:999px;background:var(--fill3);color:var(--v5-ink2);font:600 11px/1 var(--font)}
.v5-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14px;line-height:1.4;color:var(--v5-ink2)}
.v5-checks li{display:flex;align-items:flex-start;gap:10px}
.v5-add{display:block;margin-top:2px;font-size:12.5px;color:var(--label2)}
.v5-compare{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.v5-said,.v5-tight{padding:14px;border-radius:10px;font-size:14px;line-height:1.5}
.v5-said{background:var(--fill3);color:var(--v5-ink2)}
.v5-said s{color:var(--label2);text-decoration-thickness:1.5px}
.v5-tight{box-shadow:0 0 0 1.5px var(--label) inset;color:var(--label)}
.v5-lab{display:block;margin-bottom:8px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label2)}
.v5-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--v5-btn-bg);color:var(--v5-btn-fg)}
.v5-arrow svg{width:15px;height:15px}

/* 9. pricing: Linear's plan columns (linear.app/pricing): one frame split by hairlines, the plan's name and
   price on top, a hairline, the list with round checks, the button at the foot. No shadows, no colour */
.v5-pricing{padding:100px 0 24px}
.v5-pricing .pricing{max-width:960px;margin:40px auto 0}
.v5-pricing .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;max-width:none;overflow:hidden;border-radius:16px;background:var(--sep);box-shadow:0 0 0 1px var(--sep)}
.v5-pricing .plan{display:flex;flex-direction:column;gap:0;padding:28px;border:0;border-radius:0;background:var(--bg2);box-shadow:none}
.v5-pricing .plan.hot{border:0;background:var(--fill4);box-shadow:none}
.v5-pricing .planname{font-size:20px;font-weight:600;letter-spacing:-.015em}
.v5-pricing .plansub{display:block;margin-top:6px;font-size:14px;font-weight:400;color:var(--label2)}
.v5-pricing .planprice{gap:6px;margin:18px 0 0;padding-bottom:20px;border-bottom:1px solid var(--sep)}
.v5-pricing .planprice span{font:600 34px/1 var(--font);letter-spacing:-.03em}
.v5-pricing .planprice small{font-size:14px;color:var(--label2)}
.v5-pricing .planlist{gap:12px;margin:20px 0 28px}
.v5-pricing .planlist li{font-size:14.5px;line-height:1.45}
.v5-pricing .planlist .chk{display:grid;place-items:center;flex:none;width:17px;height:17px;margin-top:2px;border-radius:50%;background:var(--label);color:var(--bg2)}
.v5-pricing .planlist .chk svg{display:none}
.v5-pricing .planlist .chk::after{content:"";width:7px;height:4px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-1px) rotate(-45deg)}
.v5-pricing .plan .btn{gap:10px;min-height:46px;margin-top:auto;border-radius:999px;font-size:15px}
.v5-pricing .plan .btn:not(.fill){border-color:var(--sep);background:var(--bg2);box-shadow:none}
.v5-pricing .plan .btn.fill::after{content:"";flex:none;width:24px;height:24px;margin-right:-8px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13.5M13 6.5 18.5 12 13 17.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,var(--v5-day)}
.v5-pricing .plan .btn.fill:disabled::after{display:none}
.v5-pricing .pricefine{margin:18px 0 0;text-align:center;font-size:13.5px}
.v5-soon{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:auto 0 0;border-radius:999px;background:var(--fill3);color:var(--label2);font-size:15px;font-weight:600}
.v5-soon i{width:7px;height:7px;border-radius:50%;background:var(--label3)}

/* 10. questions: Apple's "Questions? Answers." (apple.com/apple-one): one big centred line, then plain rows
   at reading size with a circled plus on the right and hairlines between */
.v5-faq{padding:100px 0 24px}
.v5-faq .v5-h2{font-size:clamp(40px,5vw,72px);letter-spacing:-.045em}
.v5-faq .faq{max-width:680px;margin:44px auto 0;border-bottom:0}
.v5-faq .faq details{padding:0;border-top:0;border-bottom:1px solid var(--sep)}
.v5-faq .faq summary{align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 0;font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.012em}
.v5-faq .faq summary::after{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;color:var(--label);
  box-shadow:0 0 0 1.5px currentColor inset;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;transition:transform .25s}
.v5-faq .faq details[open] summary::after{content:"";transform:rotate(45deg)}
.v5-faq .faq details p{max-width:none;margin:0 0 24px;font-size:17px;line-height:1.55;color:var(--label2)}
.v5-faq .faq a{color:var(--label);text-decoration:underline;text-underline-offset:3px}

/* 11. the last banner: an apple.com homepage tile: the line, one sentence and two pills centred at the top,
   the photo (a candid golden-hour Midtown street, which replaced the desk at dawn) filling the rest */
.v5-final{padding:80px 14px 14px}
.v5-finalbox{position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;min-height:640px;border-radius:28px;color:#fff;background:#1c1714;text-align:center}
.v5-fbg{position:absolute;inset:0;z-index:-2}
.v5-fbg img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 60%}
.v5-shade{position:absolute;inset:0;z-index:-1;pointer-events:none}
.v5-final .v5-shade{background:linear-gradient(180deg,rgba(10,8,6,.78) 0%,rgba(10,8,6,.5) 36%,rgba(10,8,6,.05) 68%)}
.v5-final-in{position:relative;max-width:820px;padding:72px 28px 0}
.v5-final .v5-h2{font-size:clamp(34px,4.4vw,60px);line-height:1.04;color:#fff}
.v5-final p{margin:14px 0 0;font-size:clamp(17px,1.6vw,21px);color:rgba(255,255,255,.86)}
.v5-final-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.v5-btn-line{color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.75) inset}
.v5-btn-line:hover{background:rgba(255,255,255,.12)}

/* sections fade up once as they come into view */
.v5 .v5-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.v5 .v5-reveal.in{opacity:1;transform:none}

/* Motion as you scroll (Caleb, 10-29: "i want there to be a lot of motion things happening as you
   scroll"). Opacity and transform only, through the translate/scale/rotate properties so hover
   transforms and the floats' bob keep working. app.js (v5Reveal) adds .in, .lit and .play once, as
   things come into view; the photos drift with scroll-driven animations where the browser has them. */
/* groups: their children rise in one after another (--d is set per child) */
.v5 .v5-stagger > *{transition:opacity .7s ease var(--d,0s),translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),scale .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .2s,box-shadow .2s}
.v5 .v5-stagger:not(.in) > *{opacity:0;translate:0 26px;scale:.98}
/* meters fill and score rings close as their card arrives; numbers count up (app.js) */
.v5-bar span{transform-origin:left center;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .25s)}
.v5 :is(.v5-stagger,.v5-reveal):not(.in) .v5-bar span{transform:scaleX(0)}
.v5-ring .v5-val{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .3s)}
.v5 :is(.v5-stagger,.v5-reveal):not(.in) .v5-ring .v5-val,.v5-stage:not(.play) .v5-ring .v5-val{stroke-dashoffset:282.7px}
.v5-firmhead b,.v5-ring b{font-variant-numeric:tabular-nums}
/* the phone demo plays once it's in view: the mic goes, then the delivery notes, the key points and the
   score arrive, and the ribbon sweeps in behind */
.v5-try{overflow:clip}   /* the ribbon stays inside its section (it starts above the phone) */
.v5-stage{isolation:isolate}
.v5-stage .v5-float{transition:opacity .6s ease,translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1)}
.v5-stage:not(.play) .v5-float{opacity:0;translate:0 22px;scale:.94}
.v5-stage .v5-f-um{transition-delay:3.5s}
.v5-stage .v5-f-check{transition-delay:4.1s}
.v5-stage .v5-f-score{transition-delay:4.8s}
.v5-stage .v5-ring .v5-val{transition-delay:5.1s}
.v5-stage .v5-f-check li{transition:opacity .45s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
.v5-stage:not(.play) .v5-f-check li{opacity:0;translate:-10px 0}
.v5-stage .v5-f-check li:nth-child(1){transition-delay:4.3s}
.v5-stage .v5-f-check li:nth-child(2){transition-delay:4.55s}
.v5-stage .v5-f-check li:nth-child(3){transition-delay:4.8s}
.v5-stage .v5-f-check li:nth-child(n+4){transition-delay:5.05s}
.v5-stage:not(.play) .v5-wave b{animation-play-state:paused}
.v5-stage.play .v5-screen .v5-mic{animation:v5press .7s ease 1s}
@keyframes v5press{40%{transform:scale(.9)}}
/* The ribbon fills the whole section, behind the text and the phone, like stripe.com's hero: it comes in at the top
   and runs off the right edge of the screen, so it never visibly starts or stops (Caleb, 10-30). Only the top 90px
   fade, where the section meets the one above. */
.v5-try{position:relative}
.v5-try > .v5-wrap{position:relative;z-index:1}
/* a soft page-coloured scrim behind the copy, so the fibres never fight the text */
.v5-try-grid > :first-child{position:relative;isolation:isolate}
.v5-try-grid > :first-child::before{content:"";position:absolute;inset:-60px -80px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--bg) 55%,transparent)}
.v5-ribbon{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;opacity:var(--v5-rib-a,.9);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 70px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 70px),transparent);
  transition:opacity 1.2s ease,translate 1.6s cubic-bezier(.2,.8,.2,1)}
.v5-try:has(.v5-stage:not(.play)) .v5-ribbon{opacity:0;translate:4% 0}
/* the still: in at the top between the copy and the phone, out past the right edge; a slow transform-only drift */
.v5-ribbon-img{position:absolute;top:-6%;right:-16%;height:114%;width:auto;max-width:none;will-change:transform;
  animation:v5ribdrift 20s ease-in-out infinite alternate}
@keyframes v5ribdrift{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-24px,18px,0) rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){ .v5-ribbon-img{animation:none} }
@media (max-width:820px){   /* one column: the text sits above the phone, so the ribbon starts below the text */
  .v5-ribbon{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 44%,#000 58%,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(180deg,transparent 0,transparent 44%,#000 58%,#000 calc(100% - 60px),transparent)}
  .v5-ribbon-img{top:auto;bottom:-4%;right:-70%;height:auto;width:190%;
    /* the image's own top edge sat mid-section as a hard line on phones (QA P1-8): fade it in */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%)}
}
.v5-ribbon svg{display:block;width:100%;height:100%;animation:v5drift 14s ease-in-out infinite alternate;animation-delay:calc(var(--v5-t,0) * -1ms)}
@keyframes v5drift{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-30px,18px,0) rotate(-2deg)}}
/* the room drifts slower than the page and the line lifts away. Scroll-driven, so nothing runs in a scroll handler (and nothing at all
   where the browser lacks it) */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .v5-hero-bg{animation:v5para linear both;animation-timeline:scroll(root);animation-range:0px 100vh}
    .v5-hero-in{animation:v5lift linear both;animation-timeline:scroll(root);animation-range:0px 50vh}   /* gone before it reaches the clear bar */
  }
}
@keyframes v5para{to{transform:translate3d(0,20vh,0)}}
@keyframes v5lift{to{transform:translate3d(0,-10vh,0);opacity:0}}

@media (max-width:1000px){
  .v5-try-grid,.v5-bento{grid-template-columns:minmax(0,1fr)}
  .v5-card.v5-span2{grid-column:auto}
}
@media (max-width:900px){
  .v5-wrap{padding:0 24px}
  .v5-hero{min-height:620px}
  .v5-hero-in{bottom:calc(var(--v5-tab) + 40px)}
}
@media (max-width:640px){
  .v5-wrap{padding:0 18px}
  .v5-hero-bg img{object-position:30% 50%;transform-origin:30% 50%}
  .v5-scrim{background:var(--v5-scrim-m)}
  .v5-title{font-size:clamp(38px,11.4vw,54px)}
  .v5-logos{--v5-ls:.72}
  .v5-logos .v5-set{gap:46px;padding-right:46px}
  .v5-flogo{height:42px}
  .v5-hero-sub{margin-top:18px;font-size:17px}
  .v5-ctas{margin-top:28px}
  .v5-ctas .v5-btn,.v5-ctas .gwrap{width:100%}
  .v5-sub{font-size:17px}
  .v5-try{padding:84px 0 56px}
  .v5-stage{height:900px}   /* the score above the phone, the Key points below it: neither covers the phone's words */
  .v5-phone{top:100px;width:272px;height:552px;transform:translateX(-50%)}
  .v5-screen{padding:44px 16px 16px}
  .v5-qtext{font-size:22px}
  .v5-mic{width:84px;height:84px;margin-top:24px}
  .v5-f-score{left:-6px;top:0;bottom:auto;padding:12px 14px}
  .v5-f-um{display:none}
  .v5-f-check{left:auto;right:-6px;top:672px;bottom:auto;width:236px;padding:12px 14px}
  .v5-topics,.v5-bento-sec{padding-top:80px}
  .v5-pricing,.v5-faq{padding-top:76px}
  .v5-chips{gap:10px}
  .v5-card{padding:22px}
  .v5-compare{grid-template-columns:minmax(0,1fr)}
  .v5-arrow{justify-self:center;transform:rotate(90deg)}
  .v5-pricing .plan{padding:24px}
  .v5-faq .faq summary{font-size:16.5px}
  .v5-final{padding-top:64px}
  .v5-finalbox{min-height:600px;border-radius:24px}
  .v5-fbg img{object-position:60% 60%}
  .v5-final .v5-shade{background:linear-gradient(180deg,rgba(10,8,6,.82) 0%,rgba(10,8,6,.55) 48%,rgba(10,8,6,.08) 80%)}
  .v5-final-in{padding:48px 22px 0}
  .v5-final p{font-size:17px}
  .v5-final-ctas .v5-btn{width:100%}
}
/* no Ken Burns, marquee, glow or bob (the app's rule stops every animation); the firms sit still */
@media (prefers-reduced-motion:reduce){
  .v5 .v5-reveal{opacity:1;transform:none}
  .v5-marquee{-webkit-mask-image:none;mask-image:none}
  .v5-track{width:auto;justify-content:center}
  .v5-set{flex-wrap:wrap;justify-content:center;gap:10px 28px;padding:0 24px}
  .v5-set[aria-hidden]{display:none}
  .v5-set span{gap:0;font-size:19px}
  .v5-set span::after{display:none}
  .v5-set span:nth-child(n+21){display:none}
  .v5-more{display:block;margin:12px 0 0;font-size:14px;color:var(--label2)}
  .v5-set{flex:1 1 100%;min-width:0}
  .v5-logos .v5-set{gap:14px 40px;padding:0 24px}
  /* the scroll motion in its final state (app.js also adds every class at once) */
  .v5 .v5-stagger:not(.in) > *{opacity:1;translate:none;scale:none}
  .v5 :is(.v5-stagger,.v5-reveal):not(.in) .v5-bar span{transform:none}
  .v5-stage:not(.play) .v5-float,.v5-stage:not(.play) .v5-f-check li{opacity:1;translate:none;scale:none}
  .v5-try:has(.v5-stage:not(.play)) .v5-ribbon{opacity:var(--v5-rib-a,.9);translate:none}
}
/* the bank's empty state (not the home page) */
.empty .lnk{all:unset;cursor:pointer;color:var(--label);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.homefoot{font-size:13.5px;color:var(--label2);margin:18px 0 0}
.faq{border-bottom:1px solid var(--sep);max-width:760px}
.faq details{border-top:1px solid var(--sep)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:15px 2px;font-weight:600;font-size:15.5px;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--label3);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 2px 16px;font-size:14.5px;line-height:1.6;color:var(--label2);max-width:68ch}

/* ---------- Plans + paywall ---------- */
.pricing{margin:44px 0 0}
.pricehead{font:700 24px/1.2 var(--font);letter-spacing:-.035em;margin:0 0 14px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:920px}
.plan{border:1px solid var(--sep);border-radius:12px;padding:20px;background:var(--bg2);display:flex;flex-direction:column;gap:14px}
.plan.hot{border-color:var(--label);box-shadow:0 0 0 1px var(--label)}
.planname{font-size:15px;letter-spacing:-.02em}
.plansub{display:block;margin-top:2px;font-size:13px;color:var(--label2);font-weight:400}
.planprice{display:flex;align-items:baseline;gap:3px}
.planprice span{font:700 34px/1 var(--font);letter-spacing:-.04em}
.planprice small{font-size:14px;color:var(--label2)}
.planprice.center{justify-content:center;margin:6px 0 4px}
.planlist{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1;align-content:start}
.planlist li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.4}
.planlist .chk{flex:none;color:var(--green);display:inline-flex;margin-top:1px}
.planlist .chk svg{width:17px;height:17px}
.plan .btn{width:100%}
.plan.hot{border:1.5px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--daybreak) border-box;box-shadow:0 30px 60px -38px rgba(242,54,127,.6)}
/* Continue with Google, drawn the way Google's sign-in guidelines ask (light and dark) */
.gwrap{margin:0 16px 6px}
.authactions .gwrap{margin:0}
.gbtn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-height:44px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;border:1px solid #747775;background:#fff;color:#1f1f1f;font:500 15px/1 var(--font);letter-spacing:-.005em;transition:background .15s}
.gbtn:hover{background:#f6f7f7}
.gbtn:focus-visible{outline:2px solid var(--label);outline-offset:2px}
.gbtn:disabled{opacity:.6;cursor:default}
.glogo,.glogo svg{display:block;width:18px;height:18px}
.ordiv{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-size:12.5px;color:var(--label3)}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--sep)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gbtn{background:#131314;border-color:#8e918f;color:#e3e3e3} :root:not([data-theme="light"]) .gbtn:hover{background:#1d1d1f} }
:root[data-theme="dark"] .gbtn{background:#131314;border-color:#8e918f;color:#e3e3e3}
:root[data-theme="dark"] .gbtn:hover{background:#1d1d1f}
.paylist{margin:12px 32px 4px}
.paybody{margin:10px 26px 0;text-align:center;font-size:14.5px;line-height:1.55;color:var(--label2)}
.paybody b{color:var(--label);font-weight:600}
.planpick{display:grid;gap:8px;margin:16px 18px 0}
.planopt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--sep);border-radius:10px;background:var(--bg2)}
.planopt:hover{border-color:var(--label3)}
.planopt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.planopt[aria-checked="true"]{border-color:var(--label);box-shadow:0 0 0 1px var(--label)}
.planopt .radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--label3);flex:none;display:grid;place-items:center}
.planopt[aria-checked="true"] .radio{border-color:var(--label)}
.planopt[aria-checked="true"] .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--label)}
.planopt .what{min-width:0}
.planopt b{display:block;font-size:15px;letter-spacing:-.015em}
.planopt small{display:block;font-size:13px;color:var(--label2)}
.planopt .amt{margin-left:auto;font:700 18px/1 var(--font);letter-spacing:-.02em;white-space:nowrap}
.planopt .amt small{display:inline;font:500 12.5px var(--font);letter-spacing:0;color:var(--label2)}
.payfine{margin:2px 0 0;text-align:center;font-size:12.5px;color:var(--label2)}
.payfine a,.pricefine a{color:inherit;text-underline-offset:3px}
.pricefine{font-size:13px;color:var(--label2);margin:14px 0 0}
.freeleft{font-size:13.5px;color:var(--label2);margin:4px 0 16px}
.freeleft .lnk{all:unset;cursor:pointer;color:var(--label);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){ .plans{grid-template-columns:1fr} .paylist{margin:12px 22px 4px} .paybody{margin:10px 20px 0} .planpick{margin:16px 14px 0} }

/* ---------- Legal pages ---------- */
.legal{padding:6px 22px 4px;font-size:14.5px;line-height:1.6;color:var(--label2)}
.legal h3{font-size:15.5px;letter-spacing:-.015em;color:var(--label);margin:22px 0 6px}
.legal p{margin:0 0 10px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal li{margin:0 0 6px}
.legal strong{color:var(--label);font-weight:600}
.legal a{color:var(--label);text-underline-offset:3px}

/* ---------- Save-progress card ---------- */
.nudge{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;background:var(--fill4)}
.nudge b{display:block;font-size:15px;letter-spacing:-.015em}
.nudge span{display:block;font-size:13.5px;color:var(--label2)}

/* ---------- Footer ----------
   Columns of real pages, like the SEO pages' footer: the question hubs, guides, firms, free tools and
   the company links (How it works and Pricing are home page sections, the legal pages are static). */
.sitefoot{width:100%;max-width:1160px;margin:0 auto;padding:44px 24px 90px;font-size:13.5px;color:var(--label3);border-top:1px solid var(--sep)}
.footabout{max-width:72ch;margin:0 0 28px;font-size:14px;line-height:1.55;color:var(--label2)}
.footcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 24px}
.footcols h2{margin:0 0 12px;font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.footcols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footbase{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;margin-top:34px;padding-top:18px;border-top:1px solid var(--sep);font-size:12.5px}
.sitefoot button,.sitefoot a{all:unset;cursor:pointer;color:var(--label2);line-height:1.4}
.sitefoot button:hover,.sitefoot a:hover{color:var(--label);text-decoration:underline;text-underline-offset:3px}
.sitefoot button:focus-visible,.sitefoot a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
@media (max-width:900px){ .sitefoot{padding-bottom:110px} .footcols{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- Answer composer ---------- */
.composer{padding:0;overflow:hidden;border-radius:14px}
.composer textarea.ans{border:0;border-radius:0;min-height:190px;padding:18px 20px;font-size:15.5px;background:var(--bg2);box-shadow:none}
.composer textarea.ans:focus{box-shadow:none}
.composer:focus-within{border-color:var(--label3)}
.composer.listening{border-color:var(--label3)}
.composer textarea.ans.listening{cursor:default}
.composer textarea.ans.listening::placeholder{color:var(--label);font-weight:500}
.cbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px 10px 12px;border-top:1px solid var(--sep);background:var(--fill4)}
.cbar .meta{font-size:12.5px;color:var(--label2);display:flex;gap:6px;align-items:center;white-space:nowrap}
.cbar .meta .dot{color:var(--label4)}
.cbar .sp{flex:1}
.recpill{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px 0 12px;border-radius:8px;background:var(--label);color:var(--bg2);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.recpill:hover{background:color-mix(in srgb,var(--label) 85%,var(--bg2))}
.recpill .micdot{width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6-3.6a.9.9 0 1 0-1.8 0 4.2 4.2 0 0 1-8.4 0 .9.9 0 1 0-1.8 0 6 6 0 0 0 5.1 5.9V20H8.8a.9.9 0 1 0 0 1.8h6.4a.9.9 0 1 0 0-1.8h-2.3v-2.7a6 6 0 0 0 5.1-5.9Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6-3.6a.9.9 0 1 0-1.8 0 4.2 4.2 0 0 1-8.4 0 .9.9 0 1 0-1.8 0 6 6 0 0 0 5.1 5.9V20H8.8a.9.9 0 1 0 0 1.8h6.4a.9.9 0 1 0 0-1.8h-2.3v-2.7a6 6 0 0 0 5.1-5.9Z'/%3E%3C/svg%3E") center/contain no-repeat}
.recpill .clock{font:500 13px/1 var(--mono);opacity:.75;color:inherit}
.recpill.on{background:#dc2626;color:#fff}
.recpill.on .micdot{-webkit-mask:none;mask:none;width:10px;height:10px;border-radius:2px;background:#fff}
.recpill.on .clock{opacity:1}
.composer .wave{width:auto;height:20px;justify-content:flex-start}
.composer .wave i{width:2px;background:var(--label3)}
.composer .wave.on i{background:var(--label)}
.composer .note{margin:0;border:0;border-top:1px solid var(--sep);border-radius:0;background:var(--bg2);padding:10px 16px}

/* ---------- Course breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13.5px;color:var(--label2);margin:0 0 6px}
.crumbs button{all:unset;cursor:pointer;color:var(--label2)}
.crumbs button:hover{color:var(--label);text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{color:var(--label4)}
.crumbs b{color:var(--label);font-weight:600}
.crumbs .aside{margin-left:auto;display:flex;gap:14px;align-items:center}
.crumbline{height:3px;border-radius:2px;background:var(--fill2);overflow:hidden;margin:0 0 18px}
.crumbline i{display:block;height:100%;background:var(--label);border-radius:2px}

.topics-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0 0 2px;align-items:center}   /* wraps: a sideways row was cut off at the edge with no hint (audit 10-31) */
.topics-strip::-webkit-scrollbar{display:none}
.topics-strip button{flex:none;border:1px solid var(--sep);border-radius:8px;padding:6px 12px;font-size:13.5px;font-weight:500;background:var(--bg2);color:var(--label2)}
.topics-strip button:hover{color:var(--label);background:var(--fill3)}
.topics-strip button[aria-pressed="true"]{background:var(--label);border-color:var(--label);color:var(--bg2)}
.topics-strip .selectbtn{margin-left:auto;flex:none}
.topics-strip .selectbtn + .selectbtn{margin-left:0}

/* Desktop: the top bar replaces the sidebar. Phones keep the sidebar as the menu drawer. */
@media (min-width:901px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none}
  .content{padding-top:22px}
}
/* The bar adapts to its own width: search folds into a magnifier that opens on click, then the
   account shows just the initial, so nothing ever sits on top of the links. */
.topsearch,.iconbtn,.acctbtn,#tbRight{flex:none}
@container bar (max-width:1150px){
  .topsearch{width:36px;height:36px}
  .topsearch input{position:absolute;right:0;top:0;width:36px;padding:0 0 0 34px;color:transparent;cursor:pointer;transition:width .18s ease}
  .topsearch input::placeholder{color:transparent}
  .topsearch input:focus{width:240px;padding-right:10px;color:var(--label);cursor:text;background:var(--bg2);z-index:5;box-shadow:0 8px 24px -8px rgba(0,0,0,.15)}
  .topsearch input:focus::placeholder{color:var(--label3)}
  .topsearch svg{z-index:6;pointer-events:none;color:var(--label)}
}
@container bar (max-width:960px){ .acctbtn .lbl{display:none} .acctbtn.on{padding:0 4px} }
@container bar (max-width:900px){ .toplink{padding:6px 7px;font-size:13.5px} .topbar .brand{margin-right:6px} }

/* ---------- Mobile: bottom nav + drawer ---------- */
.tabbar{display:none}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:60;transform:translateX(-105%);transition:transform .25s ease}
  .sidebar.open{transform:none;box-shadow:var(--sheet-shadow)}
  .drawer-scrim{position:fixed;inset:0;background:rgba(10,10,10,.4);z-index:55}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg2);border-top:1px solid var(--sep);padding:6px 0 max(6px,env(safe-area-inset-bottom))}
  .tabbar button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;min-width:0;font-weight:600;color:var(--label3);padding:2px 0}
  .tabbar button svg{width:22px;height:22px}
  .tabbar button[aria-current="true"]{color:var(--blue)}
  .topbar{padding:8px 10px 8px} .topbar-in{min-height:52px;padding:6px 8px} .topnav{display:none} .topbar .brand{margin-right:0}
  .topics-strip::-webkit-scrollbar{display:none}
  .largetitle{font-size:26px}
  .qtext{font-size:21px}
  .content{padding:18px 16px 96px}
  .toolbar{padding-left:12px;padding-right:12px}
  .qcard{padding:20px 18px 14px}
  .cbar .meta .tgt{display:none}
  .cbar .sp{display:none} .cbar .btn.plain{margin-left:auto}
  .composer .wave{display:none}
}
@media (min-width:901px){ #menuBtn{display:none} }
@media (max-width:900px){ .topbar .acctbtn span.lbl{display:none} #tbRight{display:none} .topbar .brand b{font-size:15px} .topbar-in{gap:4px} }
/* "Superday Room" in full on phones too (QA P1-9, 10-31: "Superday" alone reads as Superday AI, a
   competitor): a little smaller instead of dropping "Room". */
@media (max-width:420px){ .topbar .brand{gap:7px} .topbar .brand b{font-size:14px;letter-spacing:-.03em} .topbar .brand .logo{width:24px;height:24px} }
@media (max-width:350px){ .topbar .brand b{font-size:13px} }
@media (max-width:370px){ .topbar .acctbtn{padding:0 10px} .topbar .iconbtn{width:33px;height:33px} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

/* ---------- Brand: the Daybreak gradient, site-wide (Caleb, 10-29: "make sure all branding keeps the gradient") ----------
   One accent everywhere, through the shared tokens: --blue is the app's accent token (now orange),
   the score rings carry the brand, and the warm neutrals replace the cool greys. Status keeps its own
   hues, kept apart from the brand: green done or right, yellow-amber partly, red wrong.
   Orange text on white is #c2410c (5.2:1); the bright #ff5c28 is for fills, rings and focus only. */
:root{
  --accent:#ff5c28; --accent-2:#ff8a3d; --accent-text:#c2410c; --amber:#ffb020;
  --warm:linear-gradient(90deg,#ffb020 0%,#ff5c28 26%,#f2367f 52%,#7c4dff 78%,#3355ff 100%);
  --dotgrad:linear-gradient(135deg,#ffb020,#ff5c28 55%,#f2367f);
  --daybreak:var(--warm); --daybreak-v:linear-gradient(180deg,#ffb020 0%,#ff5c28 26%,#f2367f 52%,#7c4dff 78%,#3355ff 100%);
  --blue:#c2410c; --orange:#a16207; --yellow:#a16207; --red:#dc2626;
  --ring1:#ff5c28; --ring2:#7c4dff; --ring3:#f2367f;
  --bg3:#f5f4f2; --sep:#e7e5e4; --fill:#d6d3d1; --fill2:#e7e5e4; --fill3:#f5f4f2; --fill4:#fbf8f4;
  --sidebar-hover:#f5f4f2; --sidebar-active:#fbf1ea; --sidebar-line:#ece9e6;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --accent-text:#ff8a3d; --blue:#ff8a3d; --orange:#facc15; --yellow:#facc15;
  --ring1:#ff7a3d; --ring2:#9d7bff; --ring3:#ff5c9b; --sidebar-active:#24160f; } }
:root[data-theme="dark"]{
  --accent-text:#ff8a3d; --blue:#ff8a3d; --orange:#facc15; --yellow:#facc15;
  --ring1:#ff7a3d; --ring2:#9d7bff; --ring3:#ff5c9b; --sidebar-active:#24160f; }
/* the mark: a white S on black with the orange dot, in both themes */
.brand .logo rect{fill:#0b0b0d} .brand .logo path{stroke:#fff}
:root[data-theme="dark"] .brand .logo rect{stroke:rgba(255,255,255,.22);stroke-width:1.2}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand .logo rect{stroke:rgba(255,255,255,.22);stroke-width:1.2} }
:focus-visible{outline-color:var(--accent)}
/* buttons: black pills; the main one gets the orange glow on hover */
.btn{border-radius:999px}
.btn.fill{background:#0b0b0d;border-color:#0b0b0d;color:#fff}
.btn.fill:hover{background:#26262b;border-color:#26262b;box-shadow:0 10px 24px -12px rgba(255,92,40,.7)}
:root[data-theme="dark"] .btn.fill{background:#fafafa;border-color:#fafafa;color:#0b0b0d}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.fill{background:#fafafa;border-color:#fafafa;color:#0b0b0d} }
.recpill{border-radius:999px}
/* picked chips, progress and quotes in the accent */
.topics-strip button[aria-pressed="true"]{background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--daybreak) border-box;border-color:transparent;color:var(--accent-text)}
.seg button[aria-pressed="true"]{color:var(--accent-text)}
.crumbline i{background:var(--warm)}
.hint,.quote{border-left-color:var(--accent)}
.hint svg{color:var(--accent-text)}
.wave.on i,.composer .wave.on i{background:var(--accent)}
.updbar .dot{background:var(--accent)}
.legal a,.freeleft .lnk,.qfoot .lnk{color:var(--accent-text);text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.plan.hot{background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--warm) border-box}
.sidebar .nav[aria-current="true"]{color:var(--accent-text)}
/* the Season Pass, once, under a free user's first report */
.upsell{background:linear-gradient(var(--fill4),var(--fill4)) padding-box,var(--warm) border-box;border:1.5px solid transparent}
.upsell-k{margin:0;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.upsell h3{margin:8px 0 6px;font:650 21px/1.2 var(--font);letter-spacing:-.03em}
.upsell-b{margin:0 0 14px;color:var(--label2);font-size:14.5px;max-width:62ch}
.upsell-a{gap:8px;flex-wrap:wrap}
/* Opening things smoothly (Caleb, 10-29: dropdowns looked "chopped"). The backdrop only fades (it
   used to slide 4 px with its blur, which made the whole page lurch); the sheet rises on its own;
   expandable rows grow open instead of jumping where the browser can animate it, and simply open
   elsewhere. Reduced motion turns all of it off (rule above). */
.scrim{animation:sdrFade .18s ease}
.sheet{animation:sdrRise .24s cubic-bezier(.2,.8,.2,1)}
@keyframes sdrFade{from{opacity:0}}
@keyframes sdrRise{from{opacity:0;transform:translateY(12px) scale(.985)}}
:root{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow-y:clip;transition:block-size .28s ease,content-visibility .28s allow-discrete}
details[open]::details-content{block-size:auto}
.selectbtn{border-radius:999px;padding:7px 30px 7px 13px;background-position:right 11px center}

/* ---------- App flows (10-29): sign in first, the 5 free answers, the report's next step ----------
   From the persona simulation (launch/sim). The answer box's place when signed out or out of free
   answers; the next step under the score; "Opens soon" in the Pro sheet while checkout is off. */
/* ONE card for everything that stands in for the answer box (sign in to answer, check your email, not ready, the
   5-free limit, mock prompts): centered at the question column's width, brand gradient hairline, full-width stacked
   buttons of equal width (Caleb, 10-31: "not centered ui issues") */
.gatecard{position:relative;overflow:hidden;max-width:560px;margin:24px auto;padding:30px 26px 20px;text-align:center}
.gatecard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#ffb078,#ff7a3d,#ff5c28,#f2357f,#d65ced,#7d6bff)}
.gatecard h2{margin:0 0 8px;font-size:22px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.gatecard p{margin:0 auto 18px;color:var(--label2);font-size:15px;max-width:46ch}
.gateacts{display:flex;flex-direction:column;gap:10px;width:100%}
.gateacts .gwrap{margin:0;width:100%}
.gateacts > .btn, .gateacts .gwrap > *, .gatecard .btn.wide{width:100%;justify-content:center}
.gatecard > .btn.plain{display:block;margin:12px auto 0;padding:6px 10px;color:var(--label2)}
/* the 5-free paywall card: centered at the question column's width, brand gradient hairline and dot (10-30) */
.paycard{position:relative;overflow:hidden;max-width:560px;margin:24px auto;padding:30px 26px 20px;text-align:center}
.paycard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#ffb078,#ff7a3d,#ff5c28,#f2357f,#d65ced,#7d6bff)}
.paycard .paydot{display:block;width:12px;height:12px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,#ff7a3d,#f2357f 55%,#7d6bff)}
.paycard h2{font-size:22px}
.paycard p{margin:0 auto 18px}
.paycard .btn.wide{width:100%;justify-content:center}
.paycard .paysoon{font-size:14px}
.paycard .paysoon a{color:var(--label);text-decoration:underline;text-underline-offset:3px}
.paycard > .btn.plain{margin:12px auto 0;padding:6px 10px;color:var(--label2)}
.limitcard.inreport{display:block;padding:16px 18px}
.limitcard.inreport span{color:var(--label2)}
.limitcard.inreport .row{margin-top:12px}
.limitcard .freeleft{margin:0;color:var(--label2)}
.limitcard .freeleft b{color:var(--label)}
/* the free-answer count: under the answer box before answering, in the report after */
.freecount{margin:-6px 4px 14px;font-size:13px;color:var(--label2)}
.freecount.last,.freeleft.last{color:var(--label);font-weight:600}
.repnext{gap:8px;margin:-4px 0 18px;flex-wrap:wrap}
.soonline{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:4px 24px 0;border-radius:999px;background:var(--fill3);color:var(--label2);font-size:15px;font-weight:600}
.soonline i{width:7px;height:7px;border-radius:50%;background:var(--label3)}
.inappnote{margin:0 24px 10px;font-size:13px;color:var(--label2);text-align:center}
.inappopt{display:flex;align-items:center;gap:10px;margin:0 16px 12px;padding:10px 12px;border:1px solid var(--sep);border-radius:12px;background:var(--fill4)}
.inappopt p{margin:0;flex:1;font-size:13px;line-height:1.4;color:var(--label2)}
.inappopt p b{color:var(--label);font-weight:600}
.inappopt .btn{flex:none;min-height:34px;padding:6px 12px;font-size:13.5px}
.inappopt .field{width:150px;padding:6px 8px;border:1px solid var(--sep);border-radius:8px}
.waitbox{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0 16px 8px;padding:16px;border:1px solid var(--sep);border-radius:14px;background:var(--fill4);text-align:center}
.waitbox b{font-size:18px;letter-spacing:-.01em}
.waitbox p{margin:0 0 4px;color:var(--label2);font-size:14.5px}
/* The in-app browser notice sits at the top, under the bar: at the bottom it covered the hero's
   second button and the answer box's controls on phones. */
.updbar.inapp{top:calc(72px + env(safe-area-inset-top));bottom:auto;z-index:45}   /* under a sheet's scrim (50), so it never hides "Not now" */
/* A visible focus ring on every control, including the ones styled with all:unset (the record
   button, the tab bar, the top links). :where() keeps it below the home page's own ring. */
body :where(button,[role=button],[role=radio],a,summary,select):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* No layout shift on load: until app.js draws the home view, keep the view a screen tall so the static
   footer doesn't show at the top and then jump (desktop CLS 1.07 -> 0.07, 2026-10-29). The public build
   also pre-renders the home view into the page (src/prerender.mjs), so this is the fallback. */
html[data-view="home"] #view:empty{min-height:100vh}
/* Before the first draw (shell.html sets data-boot): no footer at the top of an empty page */
html[data-boot] .sitefoot{display:none}
html[data-boot] #view{min-height:100vh}
/* Opening on a question (a guide's /?q= link, #drill, back from sign-in): the pre-rendered home page
   stays hidden until the app draws the question, instead of showing the home hero for seconds */
html[data-boot]:not([data-view="home"]) #view > *{display:none}
/* "Skip to content": the first Tab stop, shown only when focused (it was 13 Tabs to the main button) */
.skiplink{position:fixed;left:12px;top:-80px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--bg2);color:var(--label);font-weight:600;font-size:14px;box-shadow:0 8px 24px -8px rgba(0,0,0,.3),0 0 0 1px var(--sep);text-decoration:none}
.skiplink:focus{top:12px}
#view:focus{outline:none}
/* Segmented controls (Sign in / Create account, Mark this question, Mastery filters): the picked one is
   a neutral raised pill with ink text. The brand override above set orange text on the orange fill,
   so the picked label disappeared. Orange stays for brand moments. */
.seg button[aria-pressed="true"]{background:var(--bg2);color:var(--label);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--sep)}
/* 320 px phones: "Sign in" ran past the screen's edge. The theme switch (also in Settings) and the
   search icon (also in the menu) step aside there. */
@media (max-width:340px){ .topbar #themeBtn,.topbar .topsearch{display:none} }
/* Short phones: the answer box is shorter, so "Answer out loud" sits above the tab bar, not under it */
@media (max-width:480px) and (max-height:760px){ .composer textarea.ans{min-height:120px} }
/* Footer links: 24 px tall tap targets (WCAG 2.2 target size) at the same spacing as before */
.footcols ul{gap:2px}
.footcols li a{display:inline-block;padding:3px 0}

/* ---------- App screens, launch QA (10-29): Safari's engine, phones, contrast ----------
   Checked in Playwright WebKit at 320-1366 px, light and dark (launch/qa). References: the sheets follow
   Apple's iPhone page sheet and Linear's sign-in (launch/qa/refs/ref-linear-login-*.png), the picked
   topic LeetCode's problem list (ref-leetcode-problemset-*.png), the report Hemingway's grade-then-issues
   (ref-hemingway-*.png). */
/* status text reads at 4.5:1 on its tint (red #dc2626 was 4.4:1 on the light chips) */
:root{--red:#b91c1c}
.sc-g{color:color-mix(in srgb,var(--green) 72%,var(--label))}
.sc-w{color:color-mix(in srgb,var(--orange) 72%,var(--label))}
.sc-b{color:color-mix(in srgb,var(--red) 80%,var(--label))}
/* the tab bar's other tabs, "or with email", initials on the orange avatar: all under 4.5:1 before */
.tabbar button{color:var(--label2)}
.ordiv{color:var(--label2)}
.avatar.on{color:var(--on-accent)}
/* the gradient stays for brand moments: a picked topic is ink, like LeetCode's picked filter */
.topics-strip button[aria-pressed="true"]{background:var(--label);border-color:var(--label);color:var(--bg2)}
.crumbline i{background:var(--label)}
/* one button shape: pills, as on the home page (the large ones were 8 px rectangles) */
.btn.lg,.gbtn{border-radius:999px}
/* metric labels in one neutral colour (they were teal, orange, purple and blue), like Stripe's tiles */
.tile .k[class*="t-"],.metric .k[class*="t-"]{color:var(--label2)}
/* sheet titles centred between the two sides (they sat left of centre) */
.sheethead{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
.sheethead > :first-child{justify-self:start}
.sheethead > :last-child{justify-self:end}
.sheet,.scrim{overscroll-behavior:contain}
/* while a sheet is open on a phone, a drag on the dimmed page doesn't scroll the page behind it */
@media (pointer:coarse){ html:has(#layer .scrim){overflow:hidden} }
/* the sign-in sheet: the mark instead of an empty avatar, like Linear's sign-in */
.authmark{display:block;width:40px;height:40px;margin:10px auto 12px}
.authmark rect{fill:#0b0b0d} .authmark path{stroke:#fff}
:root[data-theme="dark"] .authmark rect{stroke:rgba(255,255,255,.22);stroke-width:1.2}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .authmark rect{stroke:rgba(255,255,255,.22);stroke-width:1.2} }
/* "Check your email" is the whole sheet while it waits (the sign-in headline above it is hidden then) */
.waitbox{margin:26px 18px 8px;padding:0;border:0;background:none}
.waitbox > b:first-child{font-size:22px;letter-spacing:-.02em}
.waitbox b.addr{font-size:inherit;letter-spacing:0;color:var(--label);word-break:break-all}
.waitbox .mailbtn{text-decoration:none}
/* the report: the one fix that matters most, right under the score */
.fixfirst{margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--fill4);border:1px solid var(--sep);text-align:left}
.fixfirst .k{margin:0 0 4px;font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.fixfirst b{display:block;font-size:16px;letter-spacing:-.01em}
.fixfirst p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--label2);white-space:pre-line}
.fixfirst .then{margin-top:10px;font-size:13.5px;color:var(--label2);white-space:normal}
.fixfirst .then b{display:inline;font-size:inherit;font-weight:600;color:var(--label)}
.summary .legend{margin-top:12px}
.scorewhy{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--label2)}
@media (max-width:560px){ .summary .row{justify-content:center} }   /* the label sat left of the centred score */
/* Mock interview on a phone with the camera off or unavailable: the camera button gets its own line above
   the question (floated beside it, it squeezed the question into one word a line) */
@media (max-width:600px){ .camtile.off{float:none;display:inline-flex;margin:0 0 12px} }
/* After Analyze the page scrolls to the report: the score stops below the sticky top bar (the bar covered it) */
#report,#reveal{scroll-margin-top:92px}
/* "Pro opens soon": room around the price (it sat on the paragraph and the pill) */
.planprice.soonprice{margin:18px 0 10px}
/* The notices (in-app browser, new version, toasts): the text wraps, the buttons don't ("Copy / link") */
.updbar .btn{white-space:nowrap;flex:none}
/* A list row's trailing value (Mastery's averages, counts) in the secondary ink: it was 2.6:1 */
.li .trail{color:var(--label2)}
/* Analyze while it works: a spinner and "Grading…", full strength (not the faded disabled look) */
.btn[aria-busy]{opacity:1;cursor:progress}
.btn .spinner{width:14px;height:14px;border-width:2px;border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor}
.subtitle,.qtext,.verdict{text-wrap:pretty}   /* no one-word last lines ("prove / it.") where the browser can */
/* App screens end with a slim footer: the guide and firm links stay on the home page */
html:not([data-view="home"]) .footabout,html:not([data-view="home"]) .footcols > nav:not(:last-child),html:not([data-view="home"]) .footcols h2{display:none}
html:not([data-view="home"]) .footcols{display:block}
html:not([data-view="home"]) .footcols ul{display:flex;flex-wrap:wrap;gap:2px 18px}
html:not([data-view="home"]) .sitefoot{padding-top:22px}
html:not([data-view="home"]) .footbase{margin-top:14px}
/* Phones and tablets: inputs at 16 px, or iOS zooms the page on every tap into a field; 44 px targets */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important}
  .btn,.inappopt .btn,.updbar .btn,.sheethead .tbtn,.gbtn,.qnav .btn,.qcard .showans,.camtile.off .cambtn,.topbar .brand{min-height:44px}
  .sheethead .tbtn{padding:0 12px}
  .seg button{min-height:44px}
  .topbar .acctbtn{min-width:44px;justify-content:center}   /* the signed-in avatar button was 36 px wide */
  .topics-strip button,.topics-strip .selectbtn,.filters .selectbtn,.setrow .selectbtn{min-height:40px}
  .sqbtn{width:44px;height:44px}
  .recpill{height:44px}
  .qfoot .lnk{display:none}   /* keyboard shortcuts: there's no keyboard */
}
/* iOS keeps :hover after a tap, so the record button stayed grey after Stop and the main button glowed */
@media (hover:none){
  .recpill:hover{background:var(--label)} .recpill.on:hover{background:#dc2626}
  .btn.fill:hover{box-shadow:none}
}
/* Settings: a long option (“Most accurate (slower, 172 MB once)”) pushed its menu past the sheet's edge */
.setrow label{min-width:0}
.setrow .selectbtn{flex:0 1 auto;min-width:0;max-width:58%}
/* Phones: the top bar keeps the menu, the mark, Settings and the account, at 44 px (search and the theme
   switch are in the menu and in Settings) */
@media (max-width:480px){ .topbar #themeBtn,.topbar .topsearch{display:none} }
@media (max-width:900px) and (pointer:coarse){
  .topbar .iconbtn,.topbar #menuBtn{width:44px;height:44px}
  .topbar .acctbtn{height:44px}
}
/* The question's buttons: the arrows keep their size and "Show answer" wraps to the next line on a
   320 px phone (the arrows were squeezed to 27 px and "Show answer" broke over two lines) */
.qnav{flex-wrap:wrap}
.sqbtn{flex:none}
.qcard .showans{white-space:nowrap}
/* Short phones: the topic's one-line description steps aside on a question, so the answer box is higher */
@media (max-width:480px) and (max-height:700px){ html[data-view="drill"] .content > .subtitle{display:none} }
/* Phones: a bank row is the question and its score; the per-row level menu (155 px) squeezed the question
   to a few words a line (the level is still set from the question's report) */
@media (max-width:600px){ .qrow .trail .selectbtn{display:none} }
/* Phones: the bank's four sources (Extended practice, Study guides, Core drills, All) as a 2×2 switch; in
   one row they were 398 px wide and pushed the page sideways at 320-390 px */
@media (max-width:600px){ .filters .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;width:100%} }
/* Phones: the answer box's bar puts “Answer out loud” and Analyze side by side (Analyze used to wrap
   alone onto a second line), with the count, the target and Clear under them */
@media (max-width:900px){
  .cbar{row-gap:8px}
  .cbar .recpill{order:1;flex:1 1 auto;justify-content:center}
  .cbar .btn.fill{order:2;flex:0 0 auto}
  .cbar .meta{order:3}
  .cbar .meta .tgt{display:inline}
  .cbar .btn.plain{order:4;margin-left:auto}
}
@media (max-width:360px){ .cbar .btn.fill{flex:1 1 100%} }
/* Phones: sheets open as Apple's iPhone page sheet, full height from just under the top, so the form
   sits high and stays above the keyboard; the page behind can't scroll */
@media (max-width:600px){
  .scrim{place-items:stretch;padding:max(10px,env(safe-area-inset-top)) 0 0}
  .sheet{width:100%;max-height:none;border-radius:14px 14px 0 0;border-bottom:0;padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
/* iPhone in landscape: viewport-fit=cover runs the page under the notch, so the bars and the content keep
   clear of it (the insets are 0 in portrait, so nothing moves there) */
.topbar{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.content{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.tabbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.sitefoot{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
@media (max-width:900px){
  .topbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .content{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .sidebar{padding-left:max(12px,env(safe-area-inset-left))}
}
/* Firms tab and the bank's filters (app.js "Explore") */
.firmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:8px}
.firmcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--bg2);border:1px solid var(--sep);border-radius:12px;box-shadow:var(--card-shadow);padding:14px 16px;min-height:44px}
.firmcard:hover{border-color:var(--label3)}
.firmcard:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.firmsearch{position:relative;max-width:420px;margin:-6px 0 18px}
.firmsearch>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--label3);pointer-events:none}
.firmsearch>span svg{width:16px;height:16px;display:block}
.firmsearch input{box-sizing:border-box;width:100%;height:42px;border:1px solid var(--sep);border-radius:10px;background:var(--bg2);box-shadow:var(--card-shadow);padding:0 40px 0 36px;font-size:15px;outline:none;-webkit-appearance:none;appearance:none}
.firmsearch input::-webkit-search-cancel-button,.firmsearch input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.firmsearch input::placeholder{color:var(--label3)}
.firmsearch input:focus{border-color:var(--label3)}
.fsclear{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--label2)}
.fsclear[hidden]{display:none}
.fsclear:hover{background:var(--fill4)}
.fsclear:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.fsclear svg{width:14px;height:14px}
.firmnone{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
.firmnone[hidden],.firmgrid[hidden],.sechead[hidden],.firmcard[hidden]{display:none}
.firmcard b{font-weight:600;font-size:15px;color:var(--label)}
.firmcard > span:not(.tag){font-size:13.5px;color:var(--label2)}
.tag.recent{color:var(--green);margin-top:2px}
.firmacts{flex-wrap:wrap;gap:8px;margin-bottom:12px}
.drillbar{flex-wrap:wrap;gap:8px;margin:-4px 0 14px}
.subtitle .lnk{all:unset;cursor:pointer;color:var(--label);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){ .firmgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .firmacts .btn{flex:1 1 100%} }
/* ---------- The question screen, "A Focus" (Caleb's pick, 10-30; launch/practice-ui/a-focus.html) ----------
   One quiet column: a thin gradient progress bar with an ✕, a crumb line, the question large and centred,
   its tags as one muted line, the gradient-ringed mic, quiet text links and a footer. Focus on this screen
   (and in Settings) is an ink ring, not the orange one. */
:root{--grad-f:linear-gradient(90deg,#ffb078,#ff7a3d 20%,#ff5c28 40%,#f2357f 60%,#d65ced 80%,#7d6bff)}
html:is([data-view="drill"],[data-view="mock"]) .content{max-width:808px}
.fbar{display:flex;align-items:center;gap:16px;margin:0 0 6px}
.fx{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:36px;height:36px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;color:var(--label2)}
.fx:hover{background:var(--fill3);color:var(--label)}
.fx svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.ftrack{flex:1;height:6px;border-radius:9px;background:var(--fill3);overflow:hidden}
.ftrack > i{display:block;height:100%;border-radius:9px;background:var(--grad-f);transition:width .3s ease}
.ftrack.mockbar{display:flex;gap:4px;margin:0;background:none;overflow:visible}
.ftrack.mockbar i{flex:1;height:6px;border-radius:9px;background:var(--fill3)}
.ftrack.mockbar i.done{background:var(--grad-f)}
.ftrack.mockbar i.cur{background:color-mix(in srgb,var(--accent) 45%,var(--fill3))}
.fcount{flex:none;font:500 12px/1 var(--mono);color:var(--label2);font-variant-numeric:tabular-nums}
/* small caps, not uppercase: the crumb's h1 keeps its own spelling for screen readers and tests */
.crumb{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 8px;margin:44px 0 0;font:500 15px/1.4 var(--mono);letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--label2);text-align:center}
.crumb b,.crumb .accent{color:var(--accent-text);font-weight:500}
.crumb .sep{color:var(--label3)}
.crumb h1.largetitle{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.crumb button{all:unset;cursor:pointer;color:inherit}
.crumb button:hover{color:var(--label);text-decoration:underline;text-underline-offset:3px}
.fnote{margin:8px auto 0;max-width:62ch;text-align:center;font-size:13px;color:var(--label2)}
.fnote.pass{color:var(--green)} .fnote.fail{color:var(--red)}
.fnote .lnk{all:unset;cursor:pointer;color:var(--label);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--label4)}
html:is([data-view="drill"],[data-view="mock"]) .content > .subtitle.scope{margin:8px auto 0;text-align:center;font-size:13px}
html:is([data-view="drill"],[data-view="mock"]) .content > .topics-strip{max-width:760px;margin:0 auto 28px;justify-content:safe center}
.qcard{background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin:18px auto 0;max-width:720px;text-align:center}
.qcard .qtext{font:600 clamp(26px,4.2vw,38px)/1.18 var(--font);letter-spacing:-.025em;margin:0 auto 14px;max-width:680px;text-wrap:balance}
.qcard .qmeta{display:block;margin:0;font-size:14px;line-height:1.6;color:var(--label2)}
.qcard .qmeta .tag{display:inline;padding:0;border:0;border-radius:0;background:none;font:inherit;color:var(--label2);white-space:nowrap}
.qcard .qmeta .tag:not(:last-child)::after{content:"·";margin:0 3px 0 7px;color:var(--label3)}
.qcard .qmeta .tag.firm{color:var(--label);font-weight:500}
.qcard .hint{text-align:left;max-width:620px;margin:18px auto 0}
.composer.voice{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;padding:0;margin:52px auto 0;display:flex;flex-direction:column;align-items:center}
.bigmic{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:8px 20px 4px;border-radius:24px;-webkit-tap-highlight-color:transparent}
.bigmic .ring{display:block;width:136px;height:136px;border-radius:50%;padding:5px;background:var(--grad-f);box-shadow:0 18px 50px -12px rgba(242,53,127,.45);transition:transform .15s ease,box-shadow .2s ease}
.bigmic .core{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#0b0b0d}
.bigmic .micdot{width:40px;height:40px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6-3.5a1 1 0 1 1 2 0 8 8 0 0 1-7 7.94V21h2a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2v-1.56a8 8 0 0 1-7-7.94 1 1 0 1 1 2 0 6 6 0 0 0 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6-3.5a1 1 0 1 1 2 0 8 8 0 0 1-7 7.94V21h2a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2v-1.56a8 8 0 0 1-7-7.94 1 1 0 1 1 2 0 6 6 0 0 0 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
.bigmic:hover .ring{transform:scale(1.03);box-shadow:0 22px 56px -12px rgba(242,53,127,.55)}
.bigmic:active .ring{transform:scale(.98)}
.bigmic .say{margin-top:22px;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--label)}
.bigmic .clock{display:none;margin-top:6px;font:500 14px/1 var(--mono);color:var(--label2)}
.bigmic.on .clock{display:block}
.bigmic.on .core{background:#dc2626}
.bigmic.on .micdot{-webkit-mask:none;mask:none;width:30px;height:30px;border-radius:7px}
.bigmic.on .ring{animation:sdrPulse 1.6s ease-in-out infinite}
@keyframes sdrPulse{50%{box-shadow:0 18px 64px -4px rgba(242,53,127,.7)}}
.bigmic[aria-busy=true]{cursor:progress} .bigmic[aria-busy=true] .ring{opacity:.7}
.composer.voice .wave{display:none;height:28px;max-width:220px;margin-top:10px}
.composer.voice.listening .wave{display:flex}
.composer.voice .wave i{width:4px;border-radius:2px}
.composer.voice .voicestat{margin:6px 0 0;font-size:14px;font-weight:600}
.composer.voice .voicestat:empty{display:none}
.composer.voice .voicehint{margin:6px 0 0;font-size:14px;color:var(--label2);text-align:center}
.composer.voice .note{align-self:stretch;margin-top:18px;border:1px solid var(--sep);border-radius:10px}
.composer.typing{max-width:720px;margin:36px auto 0}
.composer.typing textarea.ans{min-height:120px}
.cbar .typelink{all:unset;cursor:pointer;font-size:13.5px;color:var(--label2);text-decoration:underline;text-underline-offset:3px;padding:6px 10px;border-radius:999px}
.cbar .typelink:hover{color:var(--label)}
.qlinks{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:40px}
.qcard .qlinks{margin-top:24px}
.composer.typing + .qlinks{margin-top:14px}
.qlink{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:9px 14px;border-radius:999px;font-size:14px;color:var(--label2)}
.qlink:hover{background:var(--fill3);color:var(--label)}
.qlink[disabled]{opacity:.4;cursor:default} .qlink[disabled]:hover{background:none;color:var(--label2)}
.qlink svg{width:16px;height:16px;color:var(--amber)}
.qlinks .showans{margin-left:0;padding:9px 14px}   /* the old card's rule pushed it right */
.qlink.typelink{color:var(--label);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--label4)}
.ffoot{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:760px;margin:48px auto 28px;font-size:13px;color:var(--label2)}
.ffoot .freecount{margin:0;font-size:13px;color:var(--label2)}
.ffoot .freecount b{color:var(--label);font-weight:600}
.ffoot .freecount.last{color:var(--label);font-weight:600}
.fnav{display:flex;gap:6px;margin-left:auto}
.ffoot .sqbtn{width:40px;height:40px;border-radius:50%;background:none;box-shadow:none;color:var(--label2)}
.ffoot .sqbtn:hover{background:var(--fill3);color:var(--label)}
@media (pointer:coarse){ .ffoot .sqbtn{width:44px;height:44px} .qlink{min-height:44px} }
@media (hover:none){ .qlink:hover,.fx:hover,.ffoot .sqbtn:hover{background:none} .bigmic:hover .ring{transform:none} }   /* iOS keeps :hover after a tap */
@media (max-width:480px){
  .crumb{margin-top:28px}
  .composer.voice{margin-top:40px}
  .bigmic .ring{width:120px;height:120px}
  .qlinks{margin-top:28px}
  .ffoot{flex-direction:column;gap:14px;margin-top:36px;text-align:center}
  .fnav{margin:0}
}
/* Settings (10-30, "easy and dumb to navigate"): each row a name, one plain line on what it does, and a
   segmented pill control in place of a menu. */
.setlbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.setlbl b{font-weight:600;font-size:14.5px;color:var(--label)}
.setlbl span{font-size:13px;line-height:1.45;color:var(--label2)}
.pickrow{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.pills{display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:999px;background:var(--fill3);border:1px solid var(--sep)}
.pills button{all:unset;box-sizing:border-box;cursor:pointer;min-height:34px;padding:7px 16px;border:1.5px solid transparent;border-radius:999px;font-size:13.5px;font-weight:500;line-height:1.3;color:var(--label2);text-align:center;white-space:nowrap}
.pills button:hover{color:var(--label)}
.pills button[aria-checked="true"]{background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad-f) border-box;color:var(--label);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (max-width:600px){ .pickrow .pills{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr} }
@media (pointer:coarse){ .pills button{min-height:40px} }
/* The remaining menus (the bank's filters, question order): pills that open a styled list where the
   browser can draw one (customizable select), and the system's own picker elsewhere. */
@supports (appearance:base-select){
  select.selectbtn,select.selectbtn::picker(select){appearance:base-select}
  select.selectbtn{display:inline-flex;align-items:center;cursor:pointer}
  select.selectbtn::picker-icon{display:none}
  select.selectbtn::picker(select){margin-top:6px;padding:6px;border:1px solid var(--sep);border-radius:14px;background:var(--bg2);color:var(--label);box-shadow:0 18px 40px -12px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.06);max-height:min(60vh,420px);min-width:anchor-size(width)}
  select.selectbtn option{padding:8px 12px;border-radius:9px;font-size:14px;font-weight:400;color:var(--label)}
  select.selectbtn option:hover,select.selectbtn option:focus-visible{background:var(--fill3);outline:none}
  select.selectbtn option:checked{font-weight:600}
  select.selectbtn option::checkmark{color:var(--accent-text)}
}
/* an ink focus ring on this screen's controls and in Settings */
:is(.fx,.bigmic,.qlink,.cbar .typelink,.ffoot .sqbtn,.crumb button,.fnote .lnk,.pills button,.selectbtn,.setrow .switch):focus-visible{outline:2px solid var(--label);outline-offset:3px}
.bigmic.pfocus:focus-visible{outline:none}   /* focused by the page, not the keyboard (quietFocus in app.js) */

/* ---------- Signed in (10-31): a wait screen, the free plan's Try page, the Pro dashboard ----------
   The first script marks a stored session (data-auth="in") and opens on data-view="wait", so the
   pre-rendered home page never paints for someone signed in; app.js sets data-tier once it knows the
   plan (free, pro, out, or wait while it asks). Free: the logo, Get Pro and the account, nothing else. */
html[data-view="wait"] #view > :not(.waitview){display:none}
html[data-boot][data-view="wait"] #view::before,.waitview .spin{content:"";display:block;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--fill2);border-top-color:var(--accent);animation:spin .8s linear infinite}
html[data-boot][data-view="wait"] #view::before{margin:32vh auto 0}
.waitview{min-height:62vh;display:grid;place-items:center;align-content:center;gap:12px;color:var(--label2);font-size:14px}
html:is([data-tier="free"],[data-tier="wait"]) :is(#menuBtn,#navTop,#tbRight,.topsearch,#themeBtn,#topSettings,.tabbar),
html[data-auth="in"]:not([data-tier]) :is(#menuBtn,#navTop,#tbRight,.topsearch,#themeBtn,#topSettings,.tabbar){display:none!important}
/* signed out on the public site (data-guest): a marketing page, the logo and Sign in only (audit 10-31) */
html[data-guest] :is(#menuBtn,#navTop,#tbRight,.topsearch,#themeBtn,#topSettings,.tabbar){display:none!important}
html:is([data-tier="free"],[data-guest]) .sidebar{display:none!important}
html[data-auth="in"]:not([data-tier]) #topAccount,html[data-tier="wait"] #topAccount:not(.on){visibility:hidden}
.getpro{all:unset;box-sizing:border-box;cursor:pointer;flex:none;height:36px;padding:0 16px;margin-right:2px;border-radius:999px;border:1.5px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--warm) border-box;color:var(--label);font-size:14px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
.getpro:hover{box-shadow:0 8px 20px -10px rgba(242,54,127,.55)}
.getpro[hidden]{display:none}
@media (max-width:480px){ .getpro{height:40px;padding:0 14px} }
html:is([data-view="try"],[data-view="dash"]) .content{max-width:808px}
html[data-view="try"] .sechead,html[data-view="dash"] .sechead{margin-top:34px}
.tryhead{text-align:center;max-width:640px;margin:22px auto 0}
.tryhead .largetitle{font-size:clamp(28px,4.6vw,40px);line-height:1.08;letter-spacing:-.04em}
.tryhead .subtitle{margin:12px auto 18px;font-size:15.5px}
.trycount{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:6px 13px;border-radius:999px;border:1px solid var(--sep);background:var(--fill4);color:var(--label2);font-size:13.5px}
.trycount b{color:var(--label)}
.trycount i{width:8px;height:8px;border-radius:50%;background:var(--dotgrad)}
.trylead{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;width:min(100%,460px);margin:0 auto;padding:18px 24px 16px;border-radius:22px;background:var(--label);color:var(--bg2);box-shadow:0 26px 50px -30px rgba(242,54,127,.85),0 0 0 1.5px transparent;transition:transform .15s ease}
.trylead:hover{transform:translateY(-1px)}
.trylead .go{display:inline-flex;align-items:center;gap:10px;font:650 18px/1.1 var(--font);letter-spacing:-.02em}
.trylead .go svg{width:18px;height:18px}
.trylead small{font-size:13.5px;opacity:.72;text-align:center}
.trypicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.trypick{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-height:122px;padding:16px 16px 14px;border:1px solid var(--sep);border-radius:14px;background:var(--bg2);box-shadow:var(--card-shadow);transition:border-color .15s,transform .15s}
.trypick:hover{border-color:var(--label3);transform:translateY(-1px)}
.trypick b{font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--label)}
.trypick .go{margin-top:auto;font-size:13px;font-weight:600;color:var(--accent-text)}
.tryreports .lit span{white-space:normal}
.trypro{margin:34px 0 16px;padding:24px 24px 18px;border:1.5px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--warm) border-box}
.trypro.big{margin-top:22px}
.trypro h2{margin:8px 0 4px;font:650 22px/1.2 var(--font);letter-spacing:-.03em}
.tryprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:8px 0 14px}
.tryprice b{font:700 34px/1 var(--font);letter-spacing:-.04em}
.tryprice span{color:var(--label2);font-size:14px}
.trypro .planlist{margin:0 0 18px}
.trypro .btn.wide{width:100%;justify-content:center}
.trypro .payfine{margin:10px 0 0;font-size:12.5px;color:var(--label3);text-align:center}
/* The Course, the test-out path (11-01): the next checkpoint with one Continue, six units with a bar each,
   a checkpoint line under a path question's tags, and the next step on its report */
.pathcont{margin-bottom:8px}
.pathsum{font-size:13px;color:var(--label2)}
.pathunit{padding-top:14px;padding-bottom:14px}
.pathbar{display:flex;height:6px;margin-top:9px}
.pathbar i{border-radius:0}
.pathbar i.po{background:var(--green)}
.pathbar i.pw{background:var(--orange)}
.pathskip{all:unset;cursor:pointer;display:inline-block;margin-top:9px;font-size:13px;font-weight:600;color:var(--label);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--label4)}
.pathskip:focus-visible{outline:2px solid var(--label);outline-offset:3px}
.qcard .pathcp{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--label2)}
.pathcp-k{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label3);margin-right:4px}
.pathnext{margin:0 0 12px;padding:11px 14px;border:1px solid var(--sep);border-radius:12px;background:var(--bg2);font-size:14px;font-weight:600;color:var(--label)}
.pathnext.ok{border-color:var(--green)}
.pathwhy{font-weight:400;color:var(--label2)}
/* Pro dashboard (10-31): one calm column, one filled button (Continue), quiet numbers, recent answers, tiles */
.dashv{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.dhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
.dhead .largetitle{margin:0}
.dhside{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.dpill{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--sep);font-size:13px;font-weight:600;color:var(--label)}
.dpill .i{width:15px;height:15px;color:#ff5c28}
.dgoal{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--sep);font-size:13px;font-weight:600;color:var(--label)}
.dgoal i{width:8px;height:8px;border-radius:50%;background:var(--warm)}
.dgoal:hover,.dtile:hover,.dstrip:hover{border-color:var(--label3)}
.dgoaladd{font-size:13.5px}
.dsec{margin:0;display:flex;flex-direction:column;gap:10px}
.dk{margin:0;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--label2)}
.dsechead{display:flex;align-items:center;justify-content:space-between}
.dashv .lnk{all:unset;cursor:pointer;color:var(--accent-text);font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.dashv .lnk:focus-visible{outline:2px solid var(--label);outline-offset:3px}
.dsechead .lnk{font-size:13px}
.dstrip .chev{width:8px;height:13px;color:var(--label3)}
.drecent .li{min-height:0;padding-top:11px;padding-bottom:11px}
.dcont{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border:1.5px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--warm) border-box}
.dcont-t{display:flex;flex-direction:column;gap:8px;min-width:0}
.dcont-what{font:650 18px/1.3 var(--font);letter-spacing:-.02em}
.dcont .btn{flex:none}
.dstrip{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;padding:14px 18px;border:1px solid var(--sep);border-radius:14px;background:var(--bg2)}
.dnum{flex:1;display:flex;align-items:baseline;gap:7px;min-width:0}
.dnum b{font:650 20px/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dnum span{font-size:13px;color:var(--label2)}
.dstrip > :last-child{flex:none;color:var(--label3)}
.drecent{margin:0;padding:0;overflow:hidden}
.drecent .li .lit{min-width:0}
.dtrunc{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:550}
.dempty{margin:0;padding:16px 18px;color:var(--label2);font-size:14px}
.dtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dtile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--sep);border-radius:14px;background:var(--bg2);font-size:14.5px}
.dtile b{font-weight:600}
.dtile-i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--fill3);flex:none}
.dtile-i .i{width:17px;height:17px}
:is(.dtile,.dstrip,.dgoal):focus-visible{outline:2px solid var(--label);outline-offset:3px}
@media (max-width:700px){
  .dashv{gap:20px}
  .dcont{flex-direction:column;align-items:stretch;padding:18px}
  .dcont .btn{justify-content:center}
  .dstrip{padding:12px 14px}
  .dnum{flex-direction:column;gap:3px}
  .dnum span{font-size:12px}
  .dtiles{gap:8px}
  .dtile{flex-direction:column;justify-content:center;gap:6px;padding:12px 6px;font-size:13px;text-align:center}
}
/* The firm a question was reported at, under the question (10-31) */
.qcard .qbadge{display:flex;justify-content:center;margin:0 0 12px}
.qbadge-in{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1.5px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--warm) border-box;font-size:14px;font-weight:600;color:var(--label);cursor:help}
.qbadge-dot{width:8px;height:8px;border-radius:50%;background:var(--warm);flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* No refunds (10-31): what the purchase is, right above each buy button, and the box before checkout */
.buydisc{margin:0 0 8px;text-align:center;font-size:13px;font-weight:600;color:var(--label);text-wrap:balance}
.buydisc span{white-space:nowrap}
.trypro .buydisc,.limitcard .buydisc{margin:4px 0 10px}
.upsell .buydisc{text-align:left;margin:0 0 10px}
.waiver{margin:0 0 10px;padding:10px 12px;border:1px solid var(--sep);border-radius:12px;text-align:left}
.waiver.bad{border-color:var(--red,#e5484d)}
.waiverow{display:flex;align-items:flex-start;gap:10px}
.waiverow input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--label)}
.waiverow label{font-size:13.5px;line-height:1.4;color:var(--label);cursor:pointer}
.waivenote{margin:6px 0 0 28px;font-size:12.5px;color:var(--red,#e5484d)}
.waivenote:empty{display:none}
:is(.trylead,.trypick,.getpro):focus-visible{outline:2px solid var(--label);outline-offset:3px}
@media (max-width:700px){ .tryhead{margin-top:8px} .trypicks{grid-template-columns:minmax(0,1fr)} .trypick{min-height:0} }
/* Report extras (10-31, launch/strategy/product-gap.md): the VP's read, How we grade, the retake's
   before and after, the pinned fix, the free questions as dots, the three optional questions and the
   interview line, Add to Home Screen, the share sheet, and the phone's bottom bar. */
.vpread{margin-top:18px;padding-top:16px;border-top:1px solid var(--sep);text-align:left}
.vpread .k{margin:0 0 8px;font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label2)}
.vprow{display:flex;align-items:flex-start;gap:12px}
.vpchip{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;border:1.5px solid currentColor}
.vpchip.vp-advance{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.vpchip.vp-borderline{color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,transparent)}
.vpchip.vp-ding{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.vpline{margin:2px 0 0;font:500 16px/1.45 var(--font);letter-spacing:-.01em;color:var(--label);text-wrap:pretty}
.vpnote{margin:8px 0 0;font-size:12px;color:var(--label3)}
@media (max-width:480px){ .vprow{flex-direction:column;gap:8px} }
.howgrade{padding:0}
.howgrade summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 20px;font-weight:600;font-size:15px}
.howgrade summary::-webkit-details-marker{display:none}
.howgrade summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--label3);border-bottom:2px solid var(--label3);transform:rotate(45deg);align-self:center;transition:transform .2s}
.howgrade[open] summary::after{transform:rotate(225deg)}
.howgrade summary small{font-weight:400;font-size:13px;color:var(--label2)}
.howgrade summary:focus-visible{outline:2px solid var(--label);outline-offset:-2px;border-radius:12px}
.howgrade > p,.howgrade .bands{margin:0 20px 12px;font-size:14px;line-height:1.55;color:var(--label2)}
.howgrade > p b{color:var(--label)}
.howgrade > p:last-child{margin-bottom:16px}
.bands{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:baseline}
.bands dt{font:700 20px/1 var(--font);letter-spacing:-.03em;color:var(--label);min-width:22px;text-align:center}
.bands dd{margin:0}
.retrydelta{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 4px;font-size:14px;color:var(--label2)}
.retrydelta b{font:700 20px/1.2 var(--font);letter-spacing:-.02em;color:var(--label);font-variant-numeric:tabular-nums}
.retrydelta .dv{font-weight:700;padding:1px 8px;border-radius:999px;background:var(--fill3);color:var(--label)}
.retrydelta.up .dv{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.retrydelta.down .dv{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.retrydelta .dfix{flex-basis:100%;font-size:13px}
@media (max-width:560px){ .retrydelta{justify-content:center} }
.pinfix{margin:16px auto 0;max-width:560px;padding:14px 16px;border:1.5px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad-f) border-box}
.pinfix .k{margin:0 0 4px;font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.pinfix .k span{color:var(--label3)}
.pinfix b{display:block;font-size:16px;letter-spacing:-.01em}
.pinfix p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--label2);white-space:pre-line}
.btn.fixretry{border:1.5px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad-f) border-box;font-weight:600}
.freedots{display:inline-flex;gap:4px;align-items:center;vertical-align:middle;margin-right:8px}
.freedots span{width:8px;height:8px;border-radius:50%;background:var(--fill);box-shadow:inset 0 0 0 1px var(--sep)}
.freedots span.on{background:var(--dotgrad);box-shadow:none}
.trycount .freedots{margin-right:0}
.ffoot .freecount .freedots{margin-right:6px}
.goalcard{border:1.5px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--warm) border-box}
.goalcard h3{margin:0;font:650 18px/1.25 var(--font);letter-spacing:-.02em}
.goalsub{margin:4px 0 14px;font-size:13.5px;color:var(--label2)}
.goalq{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 14px}
.goalq > label,.goalq .lbl{font-size:14px;font-weight:600}
.goalpick{display:flex;flex-wrap:wrap;gap:6px}
.goalpick #goalDay{min-width:72px}
/* the stage pills fill the card's width and share it, so "Not scheduled" fits a 390px phone (it ran 15px past the card) */
.goalq .pills{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;max-width:100%}
.goalq .pills button{padding:7px 12px}
@media (max-width:420px){ .goalq .pills{width:100%} .goalq .pills button{padding:7px 6px} }
.goalfirms,.goaldates{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
:is(.goalfirms,.goaldates) button{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 12px;border-radius:999px;border:1px solid var(--sep);background:var(--bg2);font-size:13.5px;font-weight:500}
:is(.goalfirms,.goaldates) button[aria-pressed="true"]{border-color:transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad-f) border-box;border:1.5px solid transparent;font-weight:600}
:is(.goalfirms,.goaldates) button:disabled{opacity:.4;cursor:default}
:is(.goalfirms,.goaldates) button:focus-visible{outline:2px solid var(--label);outline-offset:2px}
.goalfirms .selectbtn{max-width:170px}
.goalacts{gap:8px;margin-top:4px}
.goalthanks{margin:0 0 16px;font-size:13.5px;color:var(--label2)}
.goalline{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 16px;font-size:14px}
.goalline .gl{display:inline-flex;align-items:center;gap:8px}
.goalline .gl i{width:8px;height:8px;border-radius:50%;background:var(--dotgrad)}
.goalline .gl b{font-weight:650;letter-spacing:-.01em}
.goalline .lnk{all:unset;cursor:pointer;color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.goalline .glacts{display:inline-flex;flex-wrap:wrap;gap:8px}
.goalline .goalcard{flex-basis:100%;margin:0}
.tryhead .goalline{justify-content:center}
.a2hs{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.a2hs .a2icon svg{width:44px;height:44px;display:block}
.a2hs .a2txt{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.a2hs .a2txt span{font-size:13.5px;color:var(--label2)}
.a2hs .a2acts{gap:6px}
.sharebtn{margin-left:auto}
.sharebody{padding:16px 20px 0}
.shareimg{display:block;width:min(100%,340px);aspect-ratio:1080/1350;margin:0 auto 14px;border-radius:12px;border:1px solid var(--sep);background:#0b0b0d}
.sharetick{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--sep);border-bottom:1px solid var(--sep)}
.shareacts{justify-content:center;margin-top:14px}
.shareacts .btn{min-width:180px;justify-content:center}
.sharemsg{margin:10px 0 0;text-align:center;font-size:13.5px;color:var(--label2);min-height:1em}
.bigmic .clocktgt{display:none;margin-top:4px;font:500 12px/1 var(--mono);color:var(--label3)}
.bigmic.on .clocktgt{display:block}
.repbar{display:none}
.leavesheet{width:min(420px,100%)}
.leaveacts{justify-content:center;gap:8px;margin:18px 20px 0;flex-wrap:wrap}
@media (max-width:820px){
  .repbar.show{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px 16px max(10px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg2) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--sep);animation:sdrRise .2s ease}
  html:not([data-tier="free"]):not([data-tier="wait"]):not([data-guest]) .repbar.show{bottom:var(--v5-tab,0px)}
  .repbar .btn{flex:1 1 0;justify-content:center;min-height:44px;white-space:nowrap}
  .sharebtn{margin-left:0}
}