/* Home — scene styles. Builds on index.html's own classes; every colour,
   radius, shadow and font here is a fitboard-tokens.css variable. */
.lenis.lenis-smooth{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}

/* masked lines for headlines */
[data-line]{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
[data-line]>span{display:block}
.hero-title em,.sec-title em{font-style:italic;color:var(--primary)}
.hero-title{font-size:clamp(2.6rem,5.6vw,4.6rem)}
.sec-title{font-size:clamp(1.9rem,3.4vw,2.75rem)}

/* hero story — pick → scan → score → improve → new score → apply → the call */
[data-story]{position:relative;max-width:500px;margin-left:auto}
[data-steps]{list-style:none;display:grid;grid-template-columns:repeat(8,1fr);position:relative;margin:0 0 1.1rem;padding:0}
[data-steps]::before{content:'';position:absolute;left:7%;right:7%;top:15px;height:2px;background:var(--border)}
[data-steps-fill]{position:absolute;left:7%;top:15px;height:2px;width:0;background:var(--primary)}
[data-step]{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.68rem;text-align:center;line-height:1.15;font-weight:600;color:var(--text-muted)}
[data-step] i{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-raised);border:1.5px solid var(--border);font-size:.8rem;transition:background .35s,color .35s,border-color .35s,transform .35s}
[data-step][data-on] i{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.12)}
[data-step][data-done] i{background:var(--terra-50);border-color:var(--terra-200);color:var(--primary)}
[data-step][data-on],[data-step][data-done]{color:var(--text)}
[data-stage]{position:relative;height:330px;background:var(--surface-raised);border:1.5px solid var(--border);border-radius:var(--r16);box-shadow:0 6px 16px rgba(168,83,31,0.07),0 28px 64px rgba(168,83,31,0.16);overflow:visible}
[data-stage] .hero-jd-stamp{z-index:3;top:14px;right:16px}
[data-scene]{position:absolute;inset:0;padding:1.4rem 1.5rem;overflow:hidden;border-radius:var(--r16)}
[data-sk]{font-size:var(--text-label-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-sub);margin-bottom:.9rem}
[data-srow]{display:flex;align-items:center;gap:10px;padding:.75rem .9rem;border:1px solid var(--border-soft);border-left:3px solid transparent;border-radius:var(--r12);margin-bottom:.55rem;background:var(--surface-base);transition:background .3s,border-color .3s}
[data-srow]>div{flex:1;min-width:0}
[data-srow] b{display:block;font-size:var(--text-title-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-srow] small{font-size:var(--text-caption);color:var(--text-sub)}
[data-srow] em{font-style:normal;font-size:var(--text-label-sm);font-weight:700;color:var(--success-700);background:var(--success-50);padding:2px 8px;border-radius:var(--r12)}
[data-srow="on"]{background:var(--terra-50);border-color:var(--terra-200);border-left-color:var(--primary)}
[data-srow="on"] b{color:var(--primary)}
[data-cursor]{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--slate-900);box-shadow:0 0 0 4px rgba(17,28,40,.12);opacity:0;pointer-events:none}
[data-jd-t]{font-family:'Bricolage Grotesque',var(--font);font-size:1.25rem;font-weight:500;color:var(--text);line-height:1.2;margin-bottom:.8rem}
[data-skel]{display:flex;flex-direction:column;gap:9px}
[data-skel] i{display:block;height:8px;border-radius:var(--r6);background:var(--surface-sunken)}
[data-beam]{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,transparent,rgba(194,101,42,.16) 70%,var(--terra-300) 100%);opacity:0;pointer-events:none}
[data-found]{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.1rem}
[data-found] .sv-tag{margin-left:0;font-size:var(--text-caption);padding:4px 10px}
[data-found] .sv-tag.good{background:var(--success-50);color:var(--success-700)}
[data-found] .sv-tag.bad{background:var(--error-50);color:var(--error-700)}
[data-found] [data-unsaid]{background:var(--warning-50);color:var(--warning-700)}
[data-score-row]{display:grid;grid-template-columns:150px 1fr;gap:1.4rem;align-items:center}
[data-sdial]{position:relative;width:150px;height:150px}
[data-sdial] svg{width:100%;height:100%;transform:rotate(-90deg)}
[data-sdial] circle{fill:none;stroke-width:10;stroke-linecap:round}
[data-sdial-track]{stroke:var(--surface-sunken)}
[data-sdial-arc]{stroke:var(--success-500);transition:stroke .4s}
[data-sdial-n]{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:52px;font-family:'Bricolage Grotesque',var(--font);font-size:2.6rem;font-weight:600;color:var(--text);line-height:1}
[data-sdial-n] small{font-size:.8rem;color:var(--text-sub);margin-left:2px}
[data-sbars]>div{margin-bottom:.6rem}
[data-sbars] span{display:flex;justify-content:space-between;font-size:var(--text-label-sm);font-weight:600;color:var(--text-body);margin-bottom:4px}
[data-sbars] span small{color:var(--text-sub);font-weight:500}
[data-sbars] i{display:block;height:6px;border-radius:var(--r6);background:var(--surface-sunken);overflow:hidden}
[data-sbar]{display:block;height:100%;border-radius:var(--r6);background:var(--primary);transform-origin:left}
[data-verdict]{display:inline-block;margin-top:.3rem;font-size:var(--text-label-sm);font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r20)}
[data-verdict="go"]{background:var(--success-50);color:var(--success-700)}
[data-verdict="mid"]{background:var(--warning-50);color:var(--warning-700)}
[data-fix-line] small{display:block;font-size:var(--text-eyebrow);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-sub);margin:.2rem 0 .35rem}
[data-before]{position:relative;font-size:var(--text-body-md);color:var(--text-sub);padding:.55rem .75rem;background:var(--error-50);border-radius:var(--r8);margin-bottom:.7rem}
[data-strike]{position:absolute;left:.75rem;right:.75rem;top:50%;height:2px;background:var(--error-500);transform-origin:left}
[data-after]{font-size:var(--text-body-md);color:var(--text);padding:.55rem .75rem;background:var(--success-50);border-radius:var(--r8);line-height:1.55}
[data-after] b{color:var(--success-700)}
[data-added]{display:inline-block;margin:.9rem 0 0;font-size:var(--text-caption);padding:5px 11px;background:var(--success-50);color:var(--success-700)}
[data-apply-meta]{font-size:var(--text-body-sm);color:var(--text-sub);margin:-.4rem 0 1.4rem}
[data-apply][data-applied]{background:var(--success-500);border-color:var(--success-500)}
[data-tracked]{font-size:var(--text-label-md);font-weight:600;color:var(--success-700);margin-top:.9rem;opacity:0}
[data-call]{display:flex;gap:12px;align-items:flex-start;background:var(--success-50);border:1px solid var(--success-100);border-radius:var(--r12);padding:.9rem 1rem;box-shadow:var(--shadow-md)}
[data-call-ico]{width:38px;height:38px;border-radius:var(--r8);background:var(--success-500);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-call] b{display:block;font-size:var(--text-title-md);color:var(--text)}
[data-call] small{font-size:var(--text-body-sm);color:var(--text-sub);line-height:1.5}
[data-call-big]{font-family:'Bricolage Grotesque',var(--font);font-size:2.4rem;font-weight:500;color:var(--text);text-align:center;margin-top:2.6rem;letter-spacing:-.02em}
[data-confetti]{position:absolute;left:50%;top:62%;width:0;height:0}
[data-confetti] i{position:absolute;width:8px;height:12px;border-radius:2px}
[data-caption]{margin-top:1rem;text-align:center;font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--text-body);min-height:1.6em}
[data-score-for]{font-size:var(--text-title-sm);font-weight:600;color:var(--text);margin-bottom:.6rem;line-height:1.35}
[data-sent]{display:flex;flex-direction:column;gap:6px}
[data-tick]{font-size:var(--text-body-sm);color:var(--text-body);display:flex;gap:8px}
[data-tick]::before{content:'✓';color:var(--success-500);font-weight:800}
[data-file]{display:flex;gap:12px;align-items:center;padding:.8rem .9rem;border:1px solid var(--border);border-radius:var(--r12);background:var(--surface-base);margin-bottom:.9rem}
[data-file-ico]{width:40px;height:46px;border-radius:var(--r8);background:var(--error-50);color:var(--error-700);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
[data-file] b{display:block;font-size:var(--text-title-sm);color:var(--text)}
[data-file] small{font-size:var(--text-caption);color:var(--text-sub)}
[data-changes]{margin-bottom:1rem}
[data-dl][data-done]{background:var(--success-500);border-color:var(--success-500)}
[data-apply-meta] i{font-size:.75rem;margin-right:4px;color:var(--primary)}
/* without motion: show the finished score */
html:not(.hm-motion) [data-scene]:not([data-scene="2"]){display:none}
html:not(.hm-motion) [data-stage] .hero-jd-stamp{display:block}

/* live pool count */
[data-count-row]{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:end}
[data-odo]{font-family:'Bricolage Grotesque',var(--font);font-weight:500;font-size:clamp(4rem,11vw,9rem);line-height:.85;letter-spacing:-.04em;color:var(--text);display:flex}
[data-d]{display:inline-block;overflow:hidden;height:.86em}
[data-d]>span{display:block}
[data-d]>span>span{display:block;height:.86em;line-height:.86em}

/* I. why — dark, horizontal */
[data-dark]{background:linear-gradient(150deg,var(--slate-900),var(--surface-dark));overflow:hidden}
[data-dark] [data-on-dark].sec-title{color:#fff}
[data-dark] .sec-title em{color:var(--terra-200)}
[data-on-dark].sec-badge{background:rgba(255,255,255,.06);color:var(--terra-200);border-color:rgba(255,255,255,.12)}
[data-hpin]{min-height:100svh;display:flex;align-items:center}
[data-htrack]{display:flex;gap:2.5rem;padding:0 2rem;will-change:transform}
[data-panel]{flex:0 0 min(76vw,920px);min-height:min(62svh,500px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r24);background:rgba(255,255,255,.04);padding:2.5rem 2.75rem;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;column-gap:2.5rem;color:#fff}
[data-panel-n]{grid-row:1/4;font-family:'Bricolage Grotesque',var(--font);font-size:clamp(5rem,10vw,9rem);font-weight:500;line-height:.85;color:var(--terra-200);letter-spacing:-.04em}
[data-panel] h3{font-family:'Bricolage Grotesque',var(--font);font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:500;line-height:1.1}
[data-panel] p{color:rgba(255,255,255,.65);line-height:1.7;margin-top:.75rem;max-width:460px;font-size:var(--text-body-lg)}
[data-demo]{align-self:center;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:1.4rem 0;display:flex;flex-direction:column;gap:.5rem}
[data-demo] small{font-size:var(--text-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
[data-say]{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.15}
[data-say="them"]{color:var(--success-200);font-style:italic}
[data-say="dim2"]{color:rgba(255,255,255,.55)}
[data-say="dim"]{color:rgba(255,255,255,.45);text-decoration:line-through;text-decoration-color:var(--terra-400)}
[data-fix]{font-size:var(--text-body-md);color:rgba(255,255,255,.85);display:flex;align-items:center;gap:10px}
[data-fix]::before{content:'Fitboard';font-size:var(--text-eyebrow);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-900);background:var(--terra-200);padding:3px 9px;border-radius:var(--r20)}

/* II. score dial */
[data-dial]{position:relative;width:min(40vw,440px);aspect-ratio:1;justify-self:center}
[data-dial] svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
[data-dial] circle{fill:none;stroke-width:14}
[data-arc="track"]{stroke:var(--surface-sunken)}
[data-arc="1"]{stroke:var(--primary)}[data-arc="2"]{stroke:var(--warning-500)}[data-arc="3"]{stroke:var(--success-500)}
[data-dial-c]{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
[data-dial-n]{font-family:'Bricolage Grotesque',var(--font);font-weight:500;font-size:clamp(4rem,8vw,7rem);line-height:.9;letter-spacing:-.04em;color:var(--text)}
[data-dial-n] sup{font-size:.25em;color:var(--text-sub);letter-spacing:0;margin-left:2px}
[data-dial-l]{font-size:var(--text-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-sub);margin-top:.5rem}
.score-factor [data-sf]:nth-child(1) .sf-weight{color:var(--primary)}
.score-factor [data-sf]:nth-child(2) .sf-weight{color:var(--warning-500)}
.score-factor [data-sf]:nth-child(3) .sf-weight{color:var(--success-500)}

/* III. before / after */
[data-delta]{display:flex;align-items:baseline;gap:14px;margin-top:2rem;font-family:'Bricolage Grotesque',var(--font);font-size:clamp(2.6rem,5vw,4rem);font-weight:500;line-height:1;color:var(--text-sub)}
[data-delta] small{font-family:var(--font);font-size:var(--text-label-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-sub)}
[data-ba] .sv-b-after{position:relative}

/* IV. job watch mini app */
[data-app]{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r24);box-shadow:var(--shadow-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;min-height:400px}
[data-app-list]{border-right:1px solid var(--border-soft)}
[data-row]{display:flex;gap:10px;align-items:center;padding:.85rem 1rem;border-bottom:1px solid var(--border-soft);border-left:3px solid transparent;cursor:pointer;transition:background .3s,border-color .3s}
[data-row="on"]{background:var(--terra-50);border-left-color:var(--primary)}
[data-row]>div{flex:1;min-width:0}
[data-row] b{display:block;font-size:var(--text-title-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-row="on"] b{color:var(--primary)}
[data-row] small{display:block;font-size:var(--text-caption);color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-row] em{font-style:normal;font-size:var(--text-label-sm);font-weight:700;color:var(--success-700);background:var(--success-50);padding:2px 8px;border-radius:var(--r12)}
[data-row] em[data-mid]{color:var(--warning-700);background:var(--warning-50)}
[data-qv]{padding:1.25rem 1.4rem;display:flex;flex-direction:column;gap:.85rem}
[data-qv-k]{font-size:var(--text-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-sub)}
[data-qv-t]{font-family:'Bricolage Grotesque',var(--font);font-size:1.35rem;font-weight:500;line-height:1.15;color:var(--text)}
[data-qv-c]{font-size:var(--text-body-sm);font-weight:600;color:var(--primary)}
[data-qv-stats]{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
[data-qv-stats]>div{background:var(--surface-base);border:1px solid var(--border-soft);border-radius:var(--r12);padding:.6rem .4rem;text-align:center}
[data-qv-stats] b{display:block;font-family:'Bricolage Grotesque',var(--font);font-size:1.25rem;font-weight:600;color:var(--text)}
[data-qv-stats] small{font-size:var(--text-eyebrow);letter-spacing:.06em;text-transform:uppercase;color:var(--text-sub)}
[data-qv-skills]{display:flex;flex-wrap:wrap;gap:6px}
[data-qv-skills] .sv-tag{margin-left:0;font-size:var(--text-caption);padding:3px 10px}
[data-qv-skills] .sv-tag.good{background:var(--success-50);color:var(--success-700)}
[data-qv-skills] .sv-tag.bad{background:var(--error-50);color:var(--error-700)}

/* V. jobs near you */
[data-near-ctl]{margin-top:1.75rem}
[data-near-k]{font-size:var(--text-label-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-sub);margin:1rem 0 .5rem}
[data-chips]{display:flex;flex-wrap:wrap;gap:8px}
[data-chip].btn{padding:7px 15px;font-size:var(--text-label-md);border-color:var(--border);color:var(--text-body);background:var(--surface-raised)}
[data-chip="on"].btn{background:var(--primary);border-color:var(--primary);color:#fff}
[data-near-card]{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r24);box-shadow:var(--shadow-lg);padding:1.5rem;display:grid;grid-template-columns:220px 1fr;gap:1.25rem;align-items:center}
[data-radar]{position:relative}
[data-radar] svg{width:100%;height:auto;display:block}
[data-ring]{fill:none;stroke:var(--border);stroke-dasharray:3 5}
[data-reach]{fill:var(--terra-50);stroke:var(--terra-300);stroke-width:1.5;transition:r .8s cubic-bezier(.22,1,.36,1)}
[data-pin]{fill:var(--primary)}
[data-pin-pulse]{fill:var(--terra-300);opacity:.5;transform-origin:150px 150px;animation:hmNearPulse 2.2s ease-out infinite}
@keyframes hmNearPulse{from{transform:scale(1);opacity:.5}to{transform:scale(3.2);opacity:0}}
[data-dot]{transition:opacity .5s,fill .5s}
[data-radar-l]{text-align:center;font-size:var(--text-label-md);font-weight:600;color:var(--text);margin-top:.4rem}
[data-near-list]{display:flex;flex-direction:column;gap:6px;min-height:260px}
[data-near-job]{display:flex;align-items:center;gap:10px;padding:.65rem .8rem;border:1px solid var(--border-soft);border-radius:var(--r12);background:var(--surface-base)}
[data-near-job]>div{flex:1;min-width:0}
[data-near-job] b{display:block;font-size:var(--text-title-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-near-job] small{font-size:var(--text-caption);color:var(--text-sub)}
[data-near-job] small em{font-style:normal;font-weight:600;color:var(--success-500)}
[data-near-job] i{font-style:normal;font-size:var(--text-label-sm);font-weight:700;color:var(--success-700);background:var(--success-50);padding:2px 8px;border-radius:var(--r12)}
[data-near-empty]{font-size:var(--text-body-sm);color:var(--text-sub);padding:1rem .2rem}

/* VI. tools */
[data-tile]{display:block;text-decoration:none;position:relative;overflow:hidden;min-height:280px;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
[data-tile]:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
[data-tile] .insight-quote{color:var(--primary);font-weight:600;font-style:normal;font-family:var(--font);border-left-color:var(--terra-200)}
[data-bars]{position:absolute;right:1.5rem;bottom:0;width:150px;height:110px;display:flex;align-items:flex-end;gap:8px}
[data-bars] span{flex:1;background:var(--terra-100);border-radius:var(--r6) var(--r6) 0 0;transform-origin:bottom}
[data-bars] span[data-hi]{background:var(--primary)}
[data-wave]{position:absolute;right:0;bottom:1rem;width:220px;height:90px}
[data-wave] path{fill:none;stroke:var(--success-500);stroke-width:2.5}

/* paste sheet */
[data-sheet]{position:fixed;inset:0;z-index:300;background:rgba(17,28,40,.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1.25rem}
[data-sheet][data-open]{display:flex}

/* motion start states — only once the script has armed the page */
html.hm-motion [data-reveal]{opacity:0}
html.hm-motion [data-line]>span{transform:translateY(105%)}

@media(max-width:960px){
  [data-count-row]{grid-template-columns:1fr;gap:1rem}
  [data-hpin]{min-height:0;padding-bottom:2rem}
  [data-htrack]{flex-direction:column;gap:1.25rem;padding:0 1.25rem}
  [data-panel]{flex:none;min-height:0;grid-template-columns:1fr;row-gap:1rem;padding:1.75rem 1.5rem}
  [data-panel-n]{grid-row:auto;font-size:4.5rem}
  [data-dial]{width:min(78vw,380px)}
  [data-app]{grid-template-columns:1fr;min-height:0}
  [data-qv]{display:none}
  [data-near-card]{grid-template-columns:1fr}
  [data-radar]{max-width:240px;margin:0 auto}
  [data-story]{margin:0 auto}
  .insight-grid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  [data-steps] span{font-size:.6rem}
  [data-step] i{width:26px;height:26px;font-size:.7rem}
  [data-steps]::before,[data-steps-fill]{top:12px}
  [data-scene]{padding:1.1rem 1rem}
  [data-score-row]{grid-template-columns:120px 1fr;gap:1rem}
  [data-sdial]{width:120px;height:120px}
  [data-sdial-n]{padding-top:40px;font-size:2rem}
  [data-stage]{height:340px}
}

/* small screens: keep the top menu inside the screen, give the hero side space */
.hero .hero-jd-inner{padding:0 2rem;width:100%}
@media(max-width:640px){
  .hero .hero-jd-inner{padding:0 1.25rem}
  #topnav .btn-lg{padding:7px 12px;font-size:var(--text-label-md)}
  #topnav .nav-inner{padding:0 .875rem;gap:.5rem}
  #topnav .nav-logo img{height:28px}
}
@media(max-width:400px){#nav-signin{display:none!important}}