/* Job Counselor - warm near-black ground, coral through crimson.
   The hot sibling of Dating Counselor's rose and lavender. */
:root{
  --ground:#0D090A; --lift:#2E1418; --surface:#1A1416; --raised:#221A1D; --line:#2C2627;
  /* Body text was too dim against the warm black once the red wash sat on top
     of it. Muted and faint are both a step brighter than they were. */
  --ink:#F8F3F3; --muted:#B4AAAD; --faint:#8A8083;
  --coral:#FF7A5C; --crimson:#D4213C; --sage:#3F8F63; --sage-lite:#8FD3A8; --amber:#C4963A;
  --serif:ui-serif,"New York",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --measure:40rem;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55rem 36rem at 50% -12%, rgba(212,33,60,.16), transparent 60%)}
.wrap{position:relative; z-index:1; max-width:44rem; margin:0 auto; padding:0 1.5rem}
.wrap-wide{position:relative; z-index:1; max-width:64rem; margin:0 auto; padding:0 1.5rem}
a{color:var(--coral)} a:hover{text-decoration:underline}

/* The bar follows you down the page, because the page is long and the only
   thing it is asking for lives at the top right. */
.topbar{position:sticky; top:0; z-index:50; background:rgba(13,9,10,.82);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s ease}
.topbar.scrolled{border-bottom-color:var(--line)}
nav{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.5rem; max-width:64rem; margin:0 auto; gap:1rem}
.nav-cta{display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1rem; border-radius:999px;
  background:linear-gradient(120deg,var(--coral),var(--crimson)); color:#fff; font-weight:600;
  font-size:.84rem; text-decoration:none; white-space:nowrap; flex:none}
.nav-cta:hover{text-decoration:none; filter:brightness(1.07)}
.nav-cta svg{width:.85rem; height:.85rem; fill:#fff; flex:none}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--serif); color:var(--ink);
  text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:1.7rem; height:1.7rem; flex:none}
.brand .name{font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap}
.nav-links{display:flex; gap:1.4rem; font-size:.9rem}
.nav-links a{color:var(--muted); text-decoration:none; white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
/* On a phone the bar keeps only the two things that matter: who this is, and
   where to get it. The section links are a swipe away in the page itself. */
@media (max-width:48rem){
  .nav-links{display:none}
  nav{padding:.7rem 1.1rem}
  .brand .name{font-size:.72rem; letter-spacing:.18em}
}

header.page{padding:clamp(2.5rem,6vw,4.5rem) 0 1.5rem}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--coral); display:block; margin-bottom:1rem}
h1{font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.015em;
  font-size:clamp(2rem,5.4vw,3.2rem)}
.updated{color:var(--faint); font-family:var(--mono); font-size:.78rem; letter-spacing:.05em;
  margin-top:1rem}
.lede{font-size:1.15rem; color:var(--muted); max-width:var(--measure); margin-top:1.4rem}

section{padding:1.6rem 0}
h2{font-family:var(--serif); font-weight:600; font-size:1.35rem; margin:1.5rem 0 .8rem;
  letter-spacing:-.01em}
h3{font-family:var(--sans); font-weight:600; font-size:1rem; margin:1.2rem 0 .4rem; color:var(--ink)}
p{color:var(--muted); max-width:var(--measure); margin-bottom:1rem}
p strong{color:var(--ink)}
ul,ol{color:var(--muted); max-width:var(--measure); margin:0 0 1rem 1.2rem}
li{margin-bottom:.5rem}
li strong{color:var(--ink)}
.divider{height:1px; background:var(--line); border:0; margin:1rem 0}

.tldr{background:linear-gradient(180deg,rgba(255,122,92,.10),rgba(255,122,92,.03));
  border:1px solid rgba(255,122,92,.28); border-radius:1.1rem; padding:1.5rem 1.7rem; margin:2rem 0}
.tldr .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--coral); margin-bottom:.6rem}
.tldr p{font-family:var(--serif); font-size:1.2rem; line-height:1.45; color:var(--ink);
  max-width:var(--measure); margin:0}

.note{background:rgba(63,143,99,.08); border:1px solid rgba(63,143,99,.28); border-radius:1rem;
  padding:1.2rem 1.4rem; margin:1.5rem 0}
.note .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-lite); margin-bottom:.5rem}
.note p:last-child{margin-bottom:0}

.warn{background:rgba(212,33,60,.08); border:1px solid rgba(212,33,60,.3); border-radius:1rem;
  padding:1.2rem 1.4rem; margin:1.5rem 0}
.warn .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--crimson); margin-bottom:.5rem}
.warn p:last-child{margin-bottom:0}

/* home */
.hero{padding:clamp(3rem,8vw,6rem) 0 2rem; text-align:left}
.hero .mark-big{width:4.5rem; height:4.5rem; margin-bottom:1.8rem}
.cta{display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem; padding:.95rem 1.6rem;
  border-radius:.9rem; background:linear-gradient(90deg,var(--coral),var(--crimson));
  color:#fff; text-decoration:none; font-weight:600; font-size:1rem}
.cta:hover{text-decoration:none; filter:brightness(1.06)}
.cta-note{color:var(--faint); font-size:.85rem; margin-top:.9rem}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin:1.5rem 0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:1.1rem; padding:1.4rem}
.card h3{margin-top:0}
.card p{margin-bottom:0; font-size:.95rem}
.card .n{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--coral);
  display:block; margin-bottom:.6rem}

.quote{font-family:var(--serif); font-size:1.15rem; line-height:1.5; color:var(--ink);
  border-left:3px solid var(--crimson); padding-left:1.2rem; margin:1.5rem 0; max-width:var(--measure)}
.quote .src{display:block; font-family:var(--sans); font-size:.85rem; color:var(--faint);
  margin-top:.6rem; font-style:normal}

.stat{font-family:var(--serif); font-size:2.6rem; line-height:1; color:var(--ink)}
.stat-label{color:var(--faint); font-size:.85rem}

footer{border-top:1px solid var(--line); margin-top:2.5rem; padding:2.5rem 0 4rem}
.foot-links{display:flex; gap:1.6rem; font-size:.9rem; flex-wrap:wrap}
.foot-links a{color:var(--muted); text-decoration:none} .foot-links a:hover{color:var(--ink)}
.foot-note{color:var(--faint); font-size:.8rem; margin-top:1.5rem; max-width:44rem}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px; border-radius:4px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- layout ---------- */
.section-head{max-width:44rem; margin-bottom:2.4rem}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
/* Anchors land below the sticky bar rather than under it. */
[id]{scroll-margin-top:5rem}
.section-head .eyebrow{display:block; margin-bottom:.9rem}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem); margin:0 0 .8rem}
.section-head p{font-size:1.05rem; margin:0}
section.band{padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--line)}
section.band:first-of-type{border-top:0}

/* ---------- hero ---------- */
.hero{padding:clamp(3rem,8vw,5.5rem) 0 clamp(2rem,5vw,3.5rem)}
.hero .mark-big{width:3.6rem; height:3.6rem; margin-bottom:1.6rem}
.hero h1{max-width:20ch; margin-bottom:1.4rem}
.hero .lede{margin-bottom:2rem; max-width:36rem}
.cta-row{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.5rem; border-radius:999px;
  background:linear-gradient(120deg,var(--coral),var(--crimson)); color:#fff; font-weight:600;
  font-size:.98rem; text-decoration:none; box-shadow:0 .8rem 2rem -.6rem rgba(212,33,60,.55);
  transition:transform .2s ease, box-shadow .2s ease}
.pill:hover{text-decoration:none; transform:translateY(-2px);
  box-shadow:0 1.2rem 2.6rem -.6rem rgba(212,33,60,.65)}
.pill svg{width:1.1rem; height:1.1rem; fill:#fff; flex:none}
.cta-side{color:var(--faint); font-size:.86rem}

/* ---------- the verdict widget ---------- */
.verdict{margin-top:3rem; background:linear-gradient(180deg,var(--surface),#150F11);
  border:1px solid var(--line); border-radius:1.5rem; padding:clamp(1.5rem,3vw,2.2rem);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.3rem,3vw,2.2rem); align-items:center;
  box-shadow:0 1.6rem 4rem -2rem rgba(0,0,0,.8)}
.verdict .src{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--crimson); margin-bottom:.7rem}
.verdict q{font-family:var(--serif); font-size:clamp(1.02rem,2vw,1.26rem); line-height:1.45;
  color:var(--ink); font-style:normal; quotes:none; display:block}
.verdict .by{margin-top:.9rem; font-size:.82rem; color:var(--faint)}
@media (max-width:34rem){.verdict{grid-template-columns:1fr; justify-items:start}}

.dial{position:relative; width:132px; height:132px; flex:none}
.dial svg{width:132px; height:132px; transform:rotate(160deg)}
.dial .val{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding-top:.4rem}
.dial .num{font-family:var(--serif); font-size:2.15rem; letter-spacing:-.02em; font-weight:600; color:var(--ink); line-height:1}
.dial .cap{font-family:var(--mono); font-size:.55rem; letter-spacing:.18em; color:var(--faint);
  margin-top:.3rem; text-transform:uppercase}

/* ---------- steps ---------- */
.steps{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.step{background:var(--surface); border:1px solid var(--line); border-radius:1.1rem;
  padding:1.6rem; position:relative; overflow:hidden}
.step::after{content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg,var(--coral),var(--crimson))}
.step .idx{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--coral);
  text-transform:uppercase}
.step h3{margin:.9rem 0 .5rem; font-size:1.1rem; font-family:var(--serif); font-weight:600}
.step p{color:var(--muted); font-size:.94rem; margin:0}
.step .when{margin-top:.9rem; font-size:.78rem; color:var(--faint); font-family:var(--mono)}

/* ---------- phone mockups ---------- */
.shots{display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  align-items:start}
.shots figure{margin:0}
.shots figcaption{margin-top:1.1rem; color:var(--muted); font-size:.92rem; text-align:center;
  max-width:20rem; margin-left:auto; margin-right:auto}
.shots figcaption b{color:var(--ink); display:block; font-family:var(--serif); font-size:1.02rem;
  margin-bottom:.25rem}

.phone{position:relative; width:100%; max-width:17.5rem; margin:0 auto; aspect-ratio:9/18.6;
  background:#0B0708; border:9px solid #191315; border-radius:2.4rem; overflow:hidden;
  box-shadow:0 1.8rem 4.5rem -1.6rem rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.045)}
.phone::before{content:""; position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
  width:32%; height:1.05rem; background:#050303; border-radius:999px; z-index:3}
.scr{position:absolute; inset:0; padding:2.1rem .8rem .8rem; overflow:hidden;
  background:radial-gradient(18rem 12rem at 50% 0%, rgba(212,33,60,.16), transparent 65%), #0D090A;
  font-size:.62rem; line-height:1.45}
.scr .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem}
.scr .eyeb{font-family:var(--mono); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted)}
.scr .bar{height:2px; background:var(--line); border-radius:2px; margin-bottom:.85rem; overflow:hidden}
.scr .bar i{display:block; height:100%; width:38%;
  background:linear-gradient(90deg,var(--coral),var(--crimson))}
.scr .q{font-family:var(--serif); font-size:.92rem; line-height:1.25; color:var(--ink);
  margin-bottom:.5rem}
.scr .sub{color:var(--muted); font-size:.58rem; margin-bottom:.7rem}
.opt{border:1px solid var(--line); background:var(--surface); border-radius:.6rem;
  padding:.45rem .55rem; margin-bottom:.35rem; display:flex; gap:.4rem; align-items:flex-start}
.opt.sel{background:var(--raised); border-color:rgba(255,122,92,.65)}
.opt .em{flex:none; font-size:.66rem}
.opt b{display:block; color:var(--ink); font-weight:600; font-size:.63rem}
.opt span{color:var(--muted); font-size:.55rem; display:block}
.opt .rad{margin-left:auto; width:.6rem; height:.6rem; border-radius:50%;
  border:1.5px solid var(--faint); flex:none; margin-top:.1rem}
.opt.sel .rad{border-color:var(--coral); background:var(--coral); box-shadow:inset 0 0 0 2px var(--surface)}
.callout{border-left:2px solid var(--crimson); background:var(--surface); border-radius:0 .5rem .5rem 0;
  padding:.5rem .6rem; margin-top:.55rem}
.callout .k{font-family:var(--mono); font-size:.47rem; letter-spacing:.14em; color:var(--crimson);
  margin-bottom:.2rem}
.callout p{color:var(--muted); font-size:.55rem; margin:0; line-height:1.4}
.callout p b{color:var(--ink)}

.btn-m{margin-top:.5rem; border-radius:.55rem; padding:.42rem; text-align:center;
  font-size:.6rem; font-weight:600; color:#fff;
  background:linear-gradient(90deg,var(--coral),var(--crimson))}
.rowm{display:flex; align-items:center; gap:.45rem; background:var(--surface);
  border:1px solid var(--line); border-radius:.6rem; padding:.45rem .55rem; margin-top:.35rem}
.rowm .ic{width:1.1rem; text-align:center; color:var(--coral); font-size:.7rem; flex:none}
.rowm b{color:var(--ink); font-size:.6rem; display:block}
.rowm span{color:var(--muted); font-size:.52rem}
.spread{background:var(--surface); border:1px solid var(--line); border-radius:.6rem;
  padding:.5rem .55rem; margin-top:.4rem}
.spread .k{font-family:var(--mono); font-size:.46rem; letter-spacing:.14em; color:var(--faint);
  text-transform:uppercase; margin-bottom:.3rem}
.spread div.r{display:flex; justify-content:space-between; font-size:.55rem; color:var(--muted);
  margin-top:.16rem}
.spread div.r b{font-weight:600}
.scr .bigscore{display:flex; flex-direction:column; align-items:center; margin:.5rem 0 .8rem}
.scr .bigscore .n{font-family:var(--serif); font-size:2.3rem; color:var(--ink); line-height:1}
.scr .bigscore .c{font-family:var(--mono); font-size:.48rem; letter-spacing:.16em; color:var(--faint);
  text-transform:uppercase}
.stagerow{display:flex; align-items:center; gap:.5rem; background:var(--surface);
  border:1px solid var(--line); border-radius:.6rem; padding:.45rem .55rem; margin-bottom:.35rem}
.stagerow .pipn{width:1.5rem; height:1.5rem; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:.55rem; color:var(--ink); font-family:var(--serif)}
.stagerow b{color:var(--ink); font-size:.62rem; font-weight:600; display:block}
.stagerow span{color:var(--muted); font-size:.53rem}
.tilegrid{display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-top:.5rem}
.tile-m{background:var(--surface); border:1px solid var(--line); border-radius:.6rem; padding:.5rem}
.tile-m .n{font-family:var(--serif); font-size:1.05rem; color:var(--ink); line-height:1.1}
.tile-m b{display:block; color:var(--ink); font-size:.55rem; margin-top:.15rem}
.tile-m span{color:var(--faint); font-size:.5rem}
.hero-num{background:var(--surface); border:1px solid var(--line); border-radius:.7rem; padding:.6rem}
.hero-num .k{font-family:var(--mono); font-size:.46rem; letter-spacing:.14em; color:var(--faint);
  text-transform:uppercase}
.hero-num .n{font-family:var(--serif); font-size:1.7rem; color:var(--ink); line-height:1.1}
.hero-num p{color:var(--muted); font-size:.53rem; margin:.2rem 0 0; line-height:1.4}

/* ---------- rules ---------- */
.rules{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.rule-c{background:var(--surface); border:1px solid var(--line); border-radius:1rem;
  padding:1.2rem 1.3rem; position:relative; overflow:hidden}
.rule-c::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--crimson)}
.rule-c.amber::before{background:var(--amber)}
.rule-c.green::before{background:var(--sage)}
.rule-c .k{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--crimson); margin-bottom:.5rem}
.rule-c.amber .k{color:var(--amber)} .rule-c.green .k{color:var(--sage-lite)}
.rule-c .cond{color:var(--faint); font-size:.82rem; margin-bottom:.55rem}
.rule-c .cond b{color:var(--muted)}
.rule-c p{margin:0; color:var(--ink); font-size:.95rem; line-height:1.55}

/* ---------- features ---------- */
.features{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:1.1rem; padding:1.4rem}
.feat .fico{width:2.1rem; height:2.1rem; border-radius:.65rem; display:grid; place-items:center;
  background:rgba(255,122,92,.12); margin-bottom:.9rem}
.feat .fico svg{width:1.1rem; height:1.1rem; stroke:var(--coral); fill:none; stroke-width:1.7}
.feat h3{margin:0 0 .4rem; font-size:1rem}
.feat p{margin:0; color:var(--muted); font-size:.92rem}

/* ---------- numbers band ---------- */
.numbers{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.numb{background:var(--surface); border:1px solid var(--line); border-radius:1.1rem; padding:1.4rem}
.numb .n{font-family:var(--serif); font-size:2.1rem; color:var(--ink); line-height:1}
.numb b{display:block; margin-top:.4rem; font-size:.92rem}
.numb span{color:var(--faint); font-size:.84rem}

/* ---------- pledge ---------- */
.pledge{background:linear-gradient(180deg,rgba(63,143,99,.09),rgba(63,143,99,.03));
  border:1px solid rgba(63,143,99,.28); border-radius:1.4rem; padding:clamp(1.6rem,3.5vw,2.4rem)}
.pledge ul{list-style:none; margin:1.2rem 0 0; padding:0; max-width:none;
  display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.pledge li{display:flex; gap:.6rem; align-items:flex-start; margin:0; color:var(--muted);
  font-size:.94rem}
.pledge li svg{width:1rem; height:1rem; flex:none; margin-top:.28rem; stroke:var(--sage-lite);
  fill:none; stroke-width:2}

/* ---------- closing ---------- */
.close-cta{text-align:center; padding:clamp(3rem,7vw,5rem) 0}
.close-cta h2{font-size:clamp(1.7rem,4vw,2.5rem); max-width:20ch; margin:0 auto 1rem}
.close-cta p{margin:0 auto 1.8rem; max-width:34rem}
.close-cta .cta-row{justify-content:center}

/* ---------- contact form ---------- */
.c-form{margin-top:1.4rem; display:grid; gap:1rem; max-width:34rem}
.c-form .field{display:grid; gap:.35rem}
.c-form label{font-size:.86rem; color:var(--ink)}
.c-form label span{color:var(--faint)}
.c-form input,.c-form select,.c-form textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:.7rem; padding:.7rem .85rem; width:100%}
.c-form textarea{resize:vertical; min-height:8rem}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{
  outline:none; border-color:var(--coral)}
.c-form button{font:inherit; font-weight:600; font-size:.98rem; color:#fff; cursor:pointer;
  border:0; border-radius:.8rem; padding:.85rem 1.5rem; justify-self:start;
  background:linear-gradient(90deg,var(--coral),var(--crimson))}
.c-form button:disabled{opacity:.6; cursor:progress}
.c-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{font-size:.9rem; margin:0}
.form-note{font-size:.82rem; color:var(--faint); margin:0}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .65s ease, transform .65s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* =====================================================================
   Home page. Everything below is only used by index.html.
   ===================================================================== */

.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem)}
@media (max-width:56rem){.hero-grid{grid-template-columns:1fr; gap:2.6rem}}
.hero-copy h1{max-width:16ch; margin-bottom:1.3rem}
.hero-copy .lede{margin-bottom:2rem; max-width:34rem}
.ghost{display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.3rem;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); font-weight:600; font-size:.95rem; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease}
.ghost:hover{text-decoration:none; border-color:var(--coral); transform:translateY(-2px)}
.ghost svg{width:.95rem; height:.95rem; stroke:var(--coral); fill:none; stroke-width:2}

.chips{display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin-top:2rem; padding:0; list-style:none}
.chips li{display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:999px;
  padding:.35rem .75rem; margin:0}
.chips svg{width:.75rem; height:.75rem; stroke:var(--sage-lite); fill:none; stroke-width:2.4;
  flex:none}

/* The hero device, a little larger and brighter than the ones further down. */
.hero-phone{margin:0 auto; max-width:19.5rem}
.hero-phone .phone{max-width:19.5rem; aspect-ratio:9/17.3}
.hero-phone .scr{font-size:.66rem; padding-bottom:2.6rem}
.phone-cap{margin-top:1rem; text-align:center; font-size:.82rem; color:var(--faint)}

/* The tab bar is what stops the hero device looking like a screenshot that ran
   out halfway down, which is how it read before at phone widths. */
.tabbar{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around;
  padding:.45rem .4rem .6rem; border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(13,9,10,.6),var(--ground))}
.tabbar div{display:flex; flex-direction:column; align-items:center; gap:.15rem;
  font-family:var(--mono); font-size:.42rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint)}
.tabbar div.on{color:var(--coral)}
.tabbar svg{width:.85rem; height:.85rem; fill:none; stroke:currentColor; stroke-width:1.8}

/* ---------- the six-question test ---------- */
.test{display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:clamp(1.4rem,3vw,2.4rem);
  align-items:start}
/* On a phone the score has to lead, not trail: it stays pinned under the bar
   while you answer, so the number moves in front of you rather than somewhere
   below the fold. */
@media (max-width:56rem){
  .test{display:flex; flex-direction:column}
  .verdict-panel{order:-1; position:sticky; top:3.6rem; z-index:20; padding:1rem .9rem}
  .verdict-panel .gauge{width:7rem; height:7rem; margin:.4rem auto 0}
  .verdict-panel .gauge .num{font-size:2rem}
  .verdict-panel .v-flags{display:none}
  .verdict-panel .v-line{font-size:.84rem}
}

.qcard{background:var(--surface); border:1px solid var(--line); border-radius:1.2rem;
  padding:clamp(1.1rem,2.4vw,1.5rem); margin-bottom:.9rem}
.qcard .qstep{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; color:var(--coral);
  text-transform:uppercase; background:none; border:0; padding:0; display:block}
.qcard h3{font-family:var(--serif); font-weight:600; font-size:1.12rem; margin:.5rem 0 .3rem;
  color:var(--ink); line-height:1.3}
.qcard .qsub{color:var(--faint); font-size:.84rem; margin:0 0 .9rem; max-width:44rem}
.opts{display:grid; gap:.4rem}
.opt-b{display:flex; align-items:flex-start; gap:.6rem; width:100%; text-align:left; cursor:pointer;
  font:inherit; color:var(--muted); background:var(--raised); border:1px solid var(--line);
  border-radius:.75rem; padding:.62rem .8rem; transition:border-color .18s ease,
  background .18s ease, color .18s ease}
.opt-b:hover{border-color:rgba(255,122,92,.45); color:var(--ink)}
.opt-b .mk{flex:none; width:1rem; height:1rem; border-radius:50%; border:1.5px solid var(--faint);
  margin-top:.22rem; transition:border-color .18s ease, background .18s ease}
.opt-b.box .mk{border-radius:.3rem}
.opt-b b{display:block; color:var(--ink); font-weight:600; font-size:.92rem; line-height:1.35}
.opt-b i{display:block; font-style:normal; color:var(--faint); font-size:.8rem; margin-top:.1rem}
.opt-b[aria-pressed="true"]{background:rgba(255,122,92,.1); border-color:rgba(255,122,92,.6);
  color:var(--ink)}
.opt-b[aria-pressed="true"] .mk{border-color:var(--coral); background:var(--coral);
  box-shadow:inset 0 0 0 2.5px var(--raised)}
.opt-b.danger[aria-pressed="true"]{background:rgba(212,33,60,.14); border-color:var(--crimson)}
.opt-b.danger[aria-pressed="true"] .mk{border-color:var(--crimson); background:var(--crimson)}

/* The verdict panel rides alongside the questions on a wide screen. */
.verdict-panel{position:sticky; top:5.2rem; background:linear-gradient(180deg,var(--surface),#140E10);
  border:1px solid var(--line); border-radius:1.3rem; padding:1.5rem 1.3rem; text-align:center;
  box-shadow:0 1.4rem 3.4rem -1.8rem rgba(0,0,0,.85)}
@media (max-width:56rem){.verdict-panel{position:static}}
.verdict-panel .k{font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint)}
.gauge{position:relative; width:11rem; height:11rem; margin:.7rem auto .2rem}
.gauge svg{width:100%; height:100%; transform:rotate(135deg)}
.gauge .track{fill:none; stroke:var(--line); stroke-width:10; stroke-linecap:round}
.gauge .fill{fill:none; stroke-width:10; stroke-linecap:round;
  transition:stroke-dashoffset .55s cubic-bezier(.22,.9,.3,1), stroke .35s ease}
.gauge .mid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center}
.gauge .num{font-family:var(--serif); font-size:3rem; line-height:1; color:var(--ink);
  font-weight:600; letter-spacing:-.02em}
.gauge .cap{font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; color:var(--faint);
  text-transform:uppercase; margin-top:.35rem}
.v-label{font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin-top:.2rem}
.v-line{color:var(--muted); font-size:.88rem; margin:.5rem 0 0; line-height:1.5}
.v-flags{list-style:none; margin:1.1rem 0 0; padding:.9rem 0 0; border-top:1px solid var(--line);
  text-align:left; display:grid; gap:.45rem}
.v-flags li{display:flex; gap:.5rem; align-items:flex-start; font-size:.84rem; color:var(--muted);
  margin:0; line-height:1.45}
.v-flags li::before{content:""; width:.45rem; height:.45rem; border-radius:50%; flex:none;
  margin-top:.45rem; background:var(--crimson)}
.v-flags li.good::before{background:var(--sage-lite)}
.v-flags li.amb::before{background:var(--amber)}
.v-scam{background:rgba(212,33,60,.14); border:1px solid rgba(212,33,60,.5); border-radius:.8rem;
  padding:.8rem .9rem; margin-top:1rem; text-align:left}
.v-scam .k{color:var(--crimson); text-align:left; margin-bottom:.3rem}
.v-scam p{color:var(--ink); font-size:.85rem; margin:0; line-height:1.5}
.v-reset{margin-top:1rem; background:none; border:0; color:var(--faint); font-size:.82rem;
  cursor:pointer; font-family:var(--sans); text-decoration:underline}
.v-reset:hover{color:var(--ink)}
.test-note{color:var(--faint); font-size:.82rem; margin:1.2rem 0 0; max-width:44rem}
.test-cta{margin-top:1.4rem}

/* ---------- numbers ---------- */
.numbers{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin-top:2rem}

/* ---------- scam list ---------- */
.asks{display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-top:1.6rem; list-style:none; padding:0}
.asks li{display:flex; gap:.6rem; align-items:flex-start; margin:0; color:var(--ink);
  background:rgba(212,33,60,.07); border:1px solid rgba(212,33,60,.26); border-radius:.8rem;
  padding:.65rem .85rem; font-size:.9rem}
.asks li svg{width:.95rem; height:.95rem; flex:none; margin-top:.22rem; stroke:var(--crimson);
  fill:none; stroke-width:2.2}

/* ---------- in-app browser escape ---------- */
.iab{position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  padding:1.5rem; background:rgba(5,3,4,.82)}
.iab.show{display:flex}
.iab-card{max-width:23rem; width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:1.4rem; padding:1.9rem 1.6rem; text-align:center}
.iab-card .mark{width:2.6rem; height:2.6rem; margin:0 auto 1rem; display:block}
.iab-card h3{font-family:var(--serif); font-size:1.25rem; margin:0 0 .5rem}
.iab-card .sub{color:var(--muted); font-size:.92rem; margin:0 auto 1.2rem}
.iab-steps{text-align:left; display:grid; gap:.7rem; margin:0 auto 1.3rem; padding:0; max-width:19rem}
.iab-steps li{display:flex; gap:.6rem; align-items:flex-start; list-style:none; margin:0;
  font-size:.9rem; color:var(--ink); line-height:1.4}
.iab-steps .n{font-family:var(--mono); font-size:.72rem; color:#fff; width:1.4rem; height:1.4rem;
  flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(120deg,var(--coral),var(--crimson))}
.iab-btn{display:block; width:100%; padding:.85rem 1.2rem; border-radius:999px; border:0;
  cursor:pointer; font-family:var(--sans); font-weight:600; font-size:.95rem; color:#fff;
  background:linear-gradient(120deg,var(--coral),var(--crimson))}
.iab-dismiss{margin-top:.9rem; background:none; border:0; color:var(--faint); font-size:.84rem;
  cursor:pointer; font-family:var(--sans)}