/* 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;
  --ink:#F6EFEF; --muted:#9C9295; --faint:#6E6467;
  --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}

nav{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 1.5rem; max-width:64rem; margin:0 auto; flex-wrap:wrap; gap:1rem}
.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}
.brand .name{font-size:.82rem; letter-spacing:.22em; text-transform:uppercase}
.nav-links{display:flex; gap:1.4rem; font-size:.9rem; flex-wrap:wrap}
.nav-links a{color:var(--muted); text-decoration:none} .nav-links a:hover{color:var(--ink)}

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 .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}}