/* D-04: subsetted WOFF2 (Basic Latin, Latin-1 Supplement, Latin Extended-A/B, Latin Extended Additional for Vietnamese precomposed diacritics, General Punctuation, Currency Symbols, and the few Geometric Shapes/Letterlike glyphs the original font actually ships, e.g. the dotted-circle nav icon) replaces the former raw .ttf; the unicode-range below lets a browser skip the font download entirely for any text outside this coverage (CJK, Arabic, Devanagari, etc. fall straight back to the OS font, never tofu). The .ttf stays as the last @font-face src entry only for a browser too old for WOFF2 -- a modern browser never requests it. */ @font-face{font-family:RolivaSans;src:url('/assets/NotoSans-Regular.7ecbaf5de9.woff2') format('woff2'),url('/assets/NotoSans-Regular.ttf') format('truetype');font-weight:400;font-display:optional;unicode-range:U+0020-007E,U+00A0-024F,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2100-214F,U+25A0-25FF} @font-face{font-family:RolivaSans;src:url('/assets/NotoSans-Bold.f53482cd59.woff2') format('woff2'),url('/assets/NotoSans-Bold.ttf') format('truetype');font-weight:600 800;font-display:optional;unicode-range:U+0020-007E,U+00A0-024F,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2100-214F,U+25A0-25FF} /* D-03 (review Defect 1 fix): a same-metrics local(Arial) stand-in for the swap period before RolivaSans's WOFF2 arrives, sized via size-adjust/ascent-override/descent-override/line-gap-override. size-adjust is deliberately NOT derived from the two fonts' declared OS/2.xAvgCharWidth (that ratio, 131.85%/130.19%, measured ~27% too wide in real Chromium -- xAvgCharWidth is each font's own weighted-average-character metadata field, not a reliable cross-font proxy for how a specific rendered string actually measures). Instead it is the empirically measured ratio of real rendered widths (RolivaSans vs plain local Arial, no override) across the site's actual h1/h2/body strings at their real font-size/letter-spacing in headless Chromium -- verified to keep the fallback's rendered width within ~2% of the webfont's across every sample tested (see F1-review.md Defect 1). ascent-override/ descent-override/line-gap-override are then this size-adjust divided out of RolivaSans's own OS/2/hhea vertical metrics, so they stay internally consistent with it. Arial is the practical target: it is Windows/macOS's actual local fallback, and Linux's common substitutes (Liberation Sans, metric-compatible with Arial by design; DejaVu Sans, close but not identical) are close enough that this is still a meaningful improvement over no override, even though it was only verified empirically against Arial. */ @font-face{font-family:'RolivaSans Fallback';src:local('Arial');font-weight:400;ascent-override:99.99%;descent-override:27.41%;line-gap-override:0%;size-adjust:106.91%} @font-face{font-family:'RolivaSans Fallback';src:local('Arial Bold'),local('Arial');font-weight:600 800;ascent-override:103.68%;descent-override:28.42%;line-gap-override:0%;size-adjust:103.11%} :root{--paper:#f7f8f3;--white:#fff;--ink:#19382d;--text:#364b41;--muted:#58695e;--line:#dce2d8;--green:#244f3e;--lime:#e1edba;--soft:#edf1e7;--warm:#ede5d7;--red:#953d35;--radius:14px;--shadow:0 12px 38px #183b2b0a;font-family:RolivaSans,'RolivaSans Fallback',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:15px;line-height:1.65}a{color:inherit;text-underline-offset:4px}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}input,select,textarea{width:100%;padding:12px 14px;border:1px solid #cbd5c7;background:white;color:var(--ink);border-radius:8px;min-width:0}input[type=checkbox]{width:24px;height:24px;flex-shrink:0;accent-color:var(--green)}textarea{resize:vertical;min-height:112px}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600}label.check{display:flex;flex-direction:row;gap:10px;align-items:flex-start;font-weight:400;font-size:13px}.check a{display:contents}form{display:grid;gap:18px}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{font-weight:500;line-height:1.15;letter-spacing:-.04em}h1{font-size:clamp(42px,4.9vw,72px);margin-bottom:26px}h2{font-size:clamp(30px,3.25vw,48px);margin-bottom:22px}h3{font-size:24px}h4{font-size:19px;letter-spacing:-.025em}em{font-family:Georgia,serif;font-weight:400}p{color:var(--text)}:focus-visible{outline:3px solid #477556;outline-offset:4px}.skip-link{position:fixed;left:16px;top:-60px;z-index:99;background:var(--green);color:white;padding:12px}.skip-link:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.site-header{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:25px 5.5%;border-bottom:1px solid var(--line)}.brand{font-size:31px;font-weight:700;letter-spacing:-1.8px;display:inline-flex;gap:9px;align-items:center;text-decoration:none;line-height:1}.brand-mark{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--green);color:var(--paper);border-radius:10px 10px 10px 2px;font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:35px;padding-bottom:5px}.brand-dot{font-size:9px;align-self:flex-start;letter-spacing:0;margin-left:-5px;margin-top:4px}.site-header nav,.header-actions{display:flex;align-items:center;gap:25px;font-size:13px}.site-header nav a,.header-actions>a:not(.button){text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;background:var(--green);color:#fff;border:1px solid var(--green);border-radius:7px;padding:14px 20px;text-decoration:none;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;transition:background .2s,transform .2s}.button:hover{background:#173d2d;transform:translateY(-1px)}.button.secondary{color:var(--green);background:transparent;border-color:#bdcabc}.button.secondary:hover{background:var(--soft)}.button.small{padding:9px 13px;font-size:12px;gap:12px}.button.danger{background:var(--red);border-color:var(--red)}.header-actions .button{padding:11px 17px}.eyebrow,.small-label{font-size:10px;font-weight:600;letter-spacing:.14em;line-height:1.5;color:var(--muted)}.eyebrow{margin-bottom:25px;display:flex;align-items:center;gap:9px}.pill-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6a9566}.hero{max-width:1440px;margin:auto;padding:75px 5.5% 70px;display:grid;grid-template-columns:1.12fr 1fr;gap:6%;align-items:center}.hero .lead{max-width:505px}.lead{font-size:16px;line-height:1.8;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:30px}.hero-note{font-size:10px;color:var(--muted);margin:20px 0 0}.graph-panel{background:#eef1e7;border:1px solid #d4ddcf;border-radius:150px 150px 14px 14px;min-height:545px;display:flex;flex-direction:column;position:relative;overflow:hidden}.graph-top{display:flex;flex-direction:column;gap:7px;align-items:center;padding-top:50px}.graph-top .eyebrow{font-size:9px;margin:0}.status-dot{font-size:9px;color:var(--muted)}.status-dot:before{content:'';display:inline-block;background:#779765;border-radius:50%;width:5px;height:5px;margin-right:6px}.graph-stage{position:relative;flex:1;min-height:345px}.graph-stage canvas,.graph-fallback{width:100%;height:100%;position:absolute;inset:0}.graph-stage canvas{opacity:0}.graph-stage.is-ready canvas{opacity:1}.graph-stage.is-ready .graph-fallback{opacity:0}.graph-label{position:absolute;background:#fbfcf7ed;box-shadow:0 4px 20px #3152370c;border:1px solid #e0e5da;padding:7px 12px;border-radius:6px;font-size:10px;pointer-events:none}.graph-experience{left:9%;top:34%}.graph-skills{right:11%;top:16%}.graph-opportunity{right:3%;bottom:15%;background:var(--green);color:white;border-color:var(--green);padding:12px 15px}.graph-opportunity b{margin-left:12px}.graph-path{left:10%;bottom:11%;font-size:8px;background:transparent;border:0;box-shadow:none}.graph-bottom{border-top:1px solid #d5dece;margin:0 24px;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.graph-bottom .small-label{font-size:8px;max-width:90px}.graph-bottom>span:last-child{font-size:10px;line-height:1.6}.value-strip{max-width:1282px;margin:auto;padding:25px 1%;display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:20px;font-size:11px;color:var(--muted)}.value-strip span:before{content:'◈';margin-right:12px;color:#70886c}.section{max-width:1440px;margin:auto;padding:90px 5.5%}.section-heading{display:grid;grid-template-columns:1.7fr 1fr;column-gap:12%;align-items:end}.section-heading>.eyebrow{grid-column:1/-1;margin-bottom:18px}.section-heading>p:last-child{font-size:14px;color:var(--muted);max-width:340px;padding-bottom:8px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}.feature-card{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:27px 24px 22px;min-height:265px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.feature-card .small-label{font-size:8px;margin-bottom:36px}.feature-card h3{font-size:23px;line-height:1.3;max-width:180px;margin-bottom:14px}.feature-card p{font-size:12px;color:var(--muted)}.round-arrow{align-self:flex-end;border:1px solid var(--line);border-radius:50%;width:29px;height:29px;display:grid;place-items:center;margin-top:auto}.split-section{max-width:1282px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:11%;align-items:center;padding:35px 0 30px}.quote-card{background:var(--warm);border-radius:var(--radius);padding:50px;min-height:500px;display:flex;flex-direction:column;justify-content:space-between}.quote-card p{font-size:clamp(32px,3.15vw,46px);color:var(--ink);line-height:1.25;letter-spacing:-.04em;margin:40px 0}.tiny-node{font-size:13px;letter-spacing:12px;color:#44633f}.steps{counter-reset:step;list-style:none;padding:0;margin:30px 0}.steps li{position:relative;padding-left:45px;margin-bottom:26px}.steps li:before{counter-increment:step;content:'0' counter(step);position:absolute;left:0;top:0;font-size:11px;color:var(--muted);padding-top:4px}.steps b{font-weight:600;font-size:14px}.steps p{font-size:12px;color:var(--muted);margin:5px 0}.role-links{display:grid;grid-template-columns:repeat(3,1fr);gap:0 35px}.role-links a{padding:18px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;text-decoration:none;font-size:14px}.closing{text-align:center;background:var(--green);color:var(--paper);padding:75px 20px;display:flex;align-items:center;flex-direction:column}.closing .eyebrow{color:#becfb8}.closing h2{font-size:clamp(42px,4.6vw,66px)}.closing .button{background:var(--lime);border-color:var(--lime);color:var(--ink);margin:7px 0 22px}.closing>a:last-child{font-size:11px;color:#d6dfcf}.site-footer{max-width:1440px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;padding:65px 5.5%}.site-footer p{font-size:12px;margin-top:18px}.site-footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.site-footer strong{font-size:11px;font-weight:600;margin-bottom:7px}.site-footer a:not(.brand){font-size:11px;text-decoration:none;color:var(--muted)}.site-footer a:hover{text-decoration:underline}.muted{color:var(--muted);font-size:12px}.editorial-intro{max-width:1000px;margin:auto;text-align:center;padding:85px 40px 60px}.editorial-intro .eyebrow{justify-content:center}.editorial-intro h1{font-size:clamp(40px,5vw,68px)}.editorial-intro .lead{max-width:730px;margin:0 auto}.editorial-intro.compact{padding-bottom:30px}.editorial-body{max-width:900px;margin:auto;padding:0 30px 55px}.editorial-body article{display:grid;grid-template-columns:60px 1fr;gap:15px;border-top:1px solid var(--line);padding:34px 0}.editorial-body .small-label{padding-top:8px}.editorial-body h2{font-size:27px;letter-spacing:-.025em}.editorial-body p{color:var(--muted);font-size:14px;line-height:1.85}.mini-cta{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--soft);padding:40px 6%}.mini-cta h2{font-size:28px;margin:0 20px 0 0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}.toolbar h2{font-size:30px;margin:0}.toolbar select{min-width:95px}.pricing-section{padding-top:10px;padding-bottom:40px}.notice{padding:15px 19px;border:1px solid #d4dec5;background:#eef2e5;border-radius:8px;font-size:12px;line-height:1.8;color:var(--text)}.notice.warning{background:#faf1df;border-color:#e9d6ac}.notice.error{background:#fbebe8;border-color:#e8c3b8;color:#832f25}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}.price-card{padding:32px;background:white;border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column}.price-card.recommended{background:var(--green);color:white}.price-card.recommended p,.price-card.recommended .small-label,.price-card.recommended li{color:#dce6d5}.price-card.recommended .button{background:var(--lime);color:var(--ink);border-color:var(--lime)}.price-card h3{font-size:26px}.price{font-size:42px;letter-spacing:-.045em;line-height:1.3}.price small{font-size:11px;letter-spacing:0}.price-card ul{padding:12px 0 20px 18px;flex:1}.price-card li{font-size:13px;margin:8px 0;color:var(--text)}.waitlist-section{max-width:650px;margin:30px auto 70px;padding:30px}.waitlist-section h2{font-size:32px}.compact-form{margin-top:24px}.compact-form .button{justify-self:start}.auth-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12%;max-width:1150px;padding:90px 35px;margin:auto;align-items:center;min-height:650px}.auth-aside h1{font-size:52px}.auth-aside p:last-child{max-width:360px;color:var(--muted)}.auth-card{padding:32px;background:white;border:1px solid var(--line);border-radius:var(--radius)}.auth-card h2{font-size:30px;margin-top:20px}.auth-card p,.auth-card>a{font-size:12px}.auth-card form{margin-bottom:16px}.form-feedback{margin:0;font-size:13px}.form-feedback:empty{display:none}.search-bar{display:flex;gap:12px;flex-wrap:wrap}.search-bar input{flex:1;min-width:200px}.search-bar select{width:auto}.job-search{padding-top:20px}.job-list{display:grid;gap:12px;margin-top:25px}.job-card{border:1px solid var(--line);border-radius:12px;background:white;padding:23px;display:flex;align-items:center;gap:20px;justify-content:space-between}.job-card .company-logo{width:43px;height:43px;background:var(--soft);border-radius:9px;display:grid;place-items:center;font-size:19px;flex-shrink:0}.job-main{flex:1;min-width:0}.job-card h3{font-size:19px;letter-spacing:-.025em;margin:3px 0 8px;line-height:1.4}.job-card p{font-size:11px;margin:0;color:var(--muted)}.job-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}.tag{display:inline-flex;align-items:center;background:var(--soft);border:1px solid var(--line);padding:3px 8px;border-radius:5px;font-size:10px;font-weight:400;color:var(--text);line-height:1.5}.tag.good{background:#e1edcf;border-color:#d0dfba;color:#325c29}.tag.warning{background:#f6ecd6;border-color:#e7d3a5;color:#785621}.match-score{font-size:22px;line-height:1.3;min-width:60px;text-align:center}.match-score small{display:block;font-size:9px;color:var(--muted);font-weight:400}.job-card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.demo-shell{max-width:1100px;margin:15px auto 85px;padding:0 25px}.demo-tabs{display:flex;gap:8px;padding:12px;background:var(--soft);border:1px solid var(--line);border-radius:12px 12px 0 0;overflow:auto}.demo-tabs button{border:0;background:transparent;border-radius:7px;padding:12px 17px;white-space:nowrap;font-size:12px;color:var(--muted)}.demo-tabs [aria-selected=true]{background:var(--green);color:white}#demo-panel{background:white;border:1px solid var(--line);border-top:0;padding:35px;border-radius:0 0 12px 12px;min-height:370px}.demo-columns{display:grid;grid-template-columns:1fr 1.8fr;gap:30px}.demo-profile{padding:25px;background:var(--soft);border-radius:10px}.demo-profile h3{margin-top:20px}.demo-profile p{font-size:12px}.avatar{display:grid;place-items:center;background:var(--lime);border-radius:50%;width:48px;height:48px;font-size:18px}.demo-label{font-size:10px;letter-spacing:.1em;color:var(--muted);margin-bottom:22px}.prose{font-size:14px;line-height:1.9}.prose h3{margin-top:26px}.prose ul{padding-left:20px}.prose p{white-space:pre-wrap;overflow-wrap:anywhere}.prose blockquote{padding:15px 20px;margin:20px 0;background:var(--soft);border-left:3px solid var(--green)}#toast{position:fixed;bottom:22px;right:22px;z-index:100;max-width:420px;background:var(--ink);color:white;border-radius:10px;box-shadow:var(--shadow);padding:14px 20px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}.loading-state{padding:80px 30px;text-align:center;color:var(--muted)} .app-body{background:#f6f7f2}.app-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.sidebar{padding:28px 17px;background:#eef1e8;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}.sidebar .brand{margin:0 15px 33px}.sidebar nav{display:grid;gap:3px}.sidebar nav a{display:flex;gap:12px;text-decoration:none;font-size:12px;padding:10px 13px;border-radius:6px;color:#516357}.sidebar nav a:hover{background:#e4eadd}.sidebar nav a[aria-current=page]{background:var(--green);color:#fff}.nav-icon{width:17px;text-align:center;font-size:13px;opacity:.8}.sidebar-bottom{margin-top:auto;padding:25px 13px 0;display:flex;flex-direction:column;gap:10px;font-size:11px}.sidebar-bottom a{text-decoration:none;color:var(--muted)}.app-area{min-width:0}.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 38px;background:#ffffff8c;border-bottom:1px solid var(--line);font-size:12px}.app-topbar>div{display:flex;gap:14px;align-items:center}.app-topbar a{text-decoration:none}.app-topbar .avatar{height:30px;width:30px;font-size:12px}.app-content{max-width:1350px;margin:auto;padding:38px}.app-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:27px}.app-title h1{font-size:35px;margin:8px 0 10px}.app-title p{margin:0;color:var(--muted);font-size:13px}.app-title .eyebrow{font-size:9px}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:25px;margin-bottom:22px;min-width:0}.panel h2{font-size:24px;margin-bottom:18px}.panel h3{font-size:20px}.panel p{font-size:13px}.panel .toolbar h2{margin-bottom:0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:25px}.stat{background:white;border:1px solid var(--line);padding:20px;border-radius:12px}.stat span{font-size:11px;color:var(--muted)}.stat strong{display:block;font-size:32px;font-weight:500;line-height:1.5;letter-spacing:-.045em}.stat small{font-size:10px;color:var(--muted)}.two-col{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.full-width{grid-column:1/-1}.section-label{display:block;font-size:11px;color:var(--muted);padding-bottom:10px;margin:10px 0;border-bottom:1px solid var(--line);font-weight:600}.empty-state{padding:32px 18px;border:1px dashed #cbd7c1;border-radius:10px;text-align:center;margin:16px 0;color:var(--muted);font-size:13px}.empty-state p{max-width:500px;margin:10px auto 20px}.evidence-card{border-top:1px solid var(--line);padding:20px 0;display:grid;gap:12px}.evidence-card p{white-space:pre-wrap;overflow-wrap:anywhere}.inline-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.text-button{border:0;background:transparent;color:var(--green);font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:5px}.text-button.danger{color:var(--red)}.field-help{font-size:11px;color:var(--muted);margin:4px 0 0}.data-list{list-style:none;margin:0;padding:0}.data-list li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:12px}.data-list li:last-child{border-bottom:0}.data-list p{margin:5px 0}.data-list strong{font-weight:600}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted);background:#f6f8f1}th,td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}td{min-width:100px}td:first-child{min-width:180px}.table-wrap h3{font-size:15px;line-height:1.4;margin:0 0 6px}.table-wrap p{font-size:11px;margin:0}.table-wrap select{padding:7px;font-size:11px}.progress{height:6px;border-radius:10px;background:var(--soft);overflow:hidden;margin:10px 0 18px}.progress span{display:block;height:100%;background:#8da668}.detail-heading{display:flex;justify-content:space-between;gap:25px;align-items:start}.detail-heading h1{font-size:36px}.detail-columns{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:25px}.detail-description{white-space:pre-wrap;font-size:13px;line-height:1.85;max-height:900px;overflow:auto}.small-caps{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.answer-card{padding:18px;border:1px solid var(--line);border-radius:9px;margin-top:12px}.answer-card>p{white-space:pre-wrap;overflow-wrap:anywhere}.studio-picker{max-width:730px}.studio-result{margin-top:22px}.review-banner{padding:13px 18px;border:1px solid #d8d5b0;background:#f8f5e5;border-radius:8px;font-size:12px;margin-bottom:22px}.artifact-section{padding:20px 0;border-top:1px solid var(--line)}.artifact-section h3{font-size:22px}.artifact-section h4{font-size:16px}.artifact-item{margin:15px 0;padding:16px;background:#f6f8f1;border-radius:8px;font-size:13px}.artifact-item p{margin:5px 0 10px;white-space:pre-wrap}.artifact-item ul{padding-left:20px}.artifact-item li{margin:7px 0}.modal-backdrop{position:fixed;inset:0;background:#16362866;display:flex;align-items:center;justify-content:center;z-index:80;padding:20px}.modal{max-height:90vh;overflow:auto;background:var(--paper);border-radius:16px;padding:30px;width:min(690px,100%);box-shadow:0 25px 90px #11271c33}.modal h2{font-size:28px}.modal-close{float:right;border:0;background:transparent;font-size:22px;color:var(--green);padding:4px;border-radius:6px}.modal-close:focus{outline:3px solid #477556;outline-offset:2px}.roli-box{border:1px solid var(--line);border-radius:10px;padding:18px;background:#f4f7ed}.roli-box form{display:flex;gap:8px}.roli-box input{flex:1}.mobile-menu{display:none}.status-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.page-spinner{display:inline-block;width:14px;height:14px;border:2px solid #9aad90;border-top-color:transparent;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} @media(min-width:1500px){.split-section{max-width:1282px}}@media(max-width:1180px){.site-header nav{gap:15px}.header-actions .button{display:none}.hero{gap:4%;padding-top:55px}.hero h1{font-size:54px}.graph-panel{min-height:500px}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-card{min-height:245px}.feature-card h3{max-width:none}.split-section{margin:0 5.5%;gap:7%}.quote-card{padding:35px;min-height:450px}.app-shell{grid-template-columns:195px minmax(0,1fr)}.app-content{padding:28px}.app-topbar{padding:20px 28px}.two-col,.detail-columns{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.site-header{padding:20px 6%;gap:15px}.site-header nav{display:none}.brand{font-size:28px}.site-header .header-actions{gap:10px}.hero{grid-template-columns:1fr;padding:45px 6% 40px;gap:35px}.hero h1{font-size:48px}.hero .lead{font-size:15px;max-width:500px}.eyebrow{font-size:9px}.actions{gap:10px}.button{padding:13px 16px;gap:16px}.graph-panel{max-width:500px;width:100%;justify-self:center;min-height:440px;border-radius:100px 100px 14px 14px}.graph-top{padding-top:30px}.graph-stage{min-height:300px}.value-strip{margin:0 6%;display:grid;grid-template-columns:1fr 1fr;font-size:10px;gap:18px}.value-strip span:before{margin-right:6px}.section{padding:55px 6%}.section-heading{display:block}.section-heading>p:last-child{max-width:none}.feature-grid{gap:12px}.feature-card{padding:21px 17px;min-height:240px}.feature-card .small-label{font-size:7px;margin-bottom:28px}.feature-card h3{font-size:21px}.feature-card p{font-size:11px}.split-section{grid-template-columns:1fr;gap:35px}.quote-card{min-height:360px;padding:30px}.quote-card p{font-size:37px;margin:25px 0}.split-section>div:last-child{padding:15px 0}.role-links{grid-template-columns:1fr;gap:0}.closing{padding:55px 20px}.site-footer{grid-template-columns:1fr 1fr;gap:35px 20px;padding:40px 6%}.site-footer>div:first-child{grid-column:1/-1}.editorial-intro{padding:50px 6% 30px}.editorial-intro h1{font-size:40px}.editorial-intro .lead{font-size:15px}.editorial-body{padding:0 6% 35px}.editorial-body article{grid-template-columns:28px 1fr;gap:10px;padding:28px 0}.editorial-body h2{font-size:25px}.mini-cta{justify-content:flex-start;padding:35px 6%}.mini-cta h2{width:100%;margin-bottom:10px}.pricing-grid{grid-template-columns:1fr}.price-card{padding:27px}.pricing-section{padding-top:20px}.auth-wrap{grid-template-columns:1fr;padding:45px 6%;gap:30px;min-height:0}.auth-aside h1{font-size:38px}.auth-aside p:last-child{font-size:13px}.auth-card{padding:25px}.search-bar{display:grid;grid-template-columns:1fr 1fr}.search-bar input{grid-column:1/-1;width:100%}.search-bar select{width:100%;min-width:0}.job-card{padding:18px;gap:12px;flex-wrap:wrap}.job-card h3{font-size:17px}.job-card-actions{width:100%;margin-left:55px}.job-card .company-logo{width:38px;height:38px}.job-card .match-score{font-size:18px}.demo-shell{padding:0 6%;margin-bottom:50px}#demo-panel{padding:22px}.demo-columns{grid-template-columns:1fr}.demo-profile{display:none}.demo-tabs button{padding:9px 11px}.app-shell{display:block}.sidebar{height:auto;position:relative;border-right:0;border-bottom:1px solid var(--line);padding:16px}.sidebar .brand{margin:0 0 15px;font-size:25px}.sidebar nav{display:flex;overflow-x:auto;gap:5px}.sidebar nav a{white-space:nowrap;padding:9px 12px}.sidebar-bottom{display:none}.app-topbar{padding:13px 20px;font-size:11px}.app-topbar .avatar{display:none}.app-content{padding:25px 18px}.app-title h1{font-size:31px}.app-title{align-items:start}.panel{padding:20px}.form-grid{grid-template-columns:1fr}.full-width{grid-column:auto}.stats-grid{gap:12px}.stat{padding:16px}.stat strong{font-size:28px}.detail-heading{display:block}.detail-heading h1{font-size:30px}.roli-box form{display:grid}.toolbar{gap:12px}.toolbar h2{font-size:24px}.modal{padding:22px}.modal-backdrop{padding:12px}.app-title .button{font-size:11px;padding:9px 12px}.notice{padding:12px 15px}#toast{left:16px;right:16px;bottom:16px;max-width:none}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.feature-card:hover,.button:hover{transform:none}} #pricing-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.price-card{min-width:0}.price .annual-price{display:block;font-size:13px;letter-spacing:normal;line-height:1.5;margin:7px 0;color:inherit}@media(max-width:1100px){#pricing-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){#pricing-cards{grid-template-columns:1fr}} label.check{display:block;position:relative;padding-left:34px;min-height:24px}label.check input[type=checkbox]{position:absolute;left:0;top:0;margin:0}label.check a{display:inline}.modal{border:1px solid var(--line)}dialog::backdrop{background:#16362866} [hidden]{display:none!important} .mobile-menu{display:none;position:relative}.mobile-menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:13px;min-height:44px;display:flex;align-items:center}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:grid;gap:2px;min-width:220px;padding:10px;background:var(--paper,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.08)}.mobile-menu nav a{padding:12px 10px;text-decoration:none;min-height:44px}@media(max-width:760px){.mobile-menu{display:block}} .facts{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:8px 18px;margin:18px 0 0}.facts dt{font-weight:600}.facts dd{margin:0}.preview-note{margin:20px 5.5% 0}@media(max-width:760px){.facts{grid-template-columns:1fr}.facts dd{margin-bottom:8px}} .breadcrumbs{margin:24px 5.5% 0;font-size:13px}.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}.breadcrumbs li+li:before{content:"›";margin-right:6px;color:var(--muted,#666)}.pagination{display:flex;justify-content:space-between;gap:16px;margin:24px 0}.job-description p{max-width:72ch}.job-detail .actions{display:flex;flex-wrap:wrap;gap:12px} @media(max-width:760px){.button{white-space:normal;text-align:center;max-width:100%}}.site-footer>div:not(:first-child),.sidebar-bottom{gap:4px}.site-footer a:not(.brand),.sidebar-bottom a,.app-topbar a{padding-block:3px}.site-header nav a,.header-actions>a:not(.button){padding-block:10px}.auth-card>a{display:inline-block;padding-block:4px}.breadcrumbs a{padding-block:3px} .detail-heading{margin-bottom:18px} /* Discovery pages (role, location, employer) and job-page explore links */.discovery-stats,.discovery-jobs,.discovery-related,.browse-hub,.job-explore{padding-top:36px;padding-bottom:36px}.discovery-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 40px;margin-top:8px}.discovery-facts h3,.browse-hub h3{font-size:19px;margin:18px 0 8px}.discovery-facts .data-list a{text-decoration:underline}.discovery-facts strong small{font-weight:400;color:var(--muted)}.discovery-method{margin-top:22px;max-width:760px}.role-links a span{color:var(--muted)}.discovery-jobs .pagination{align-items:center}@media(max-width:760px){.discovery-stats,.discovery-jobs,.discovery-related,.browse-hub,.job-explore{padding-top:24px;padding-bottom:24px}.discovery-facts{grid-template-columns:1fr;gap:6px}} [data-discovery] .actions{justify-content:center} /* === W4 app polish === */ /* F-1: sidebar closing tagline was clipped at the 1440px viewport bottom edge — the nav's total height (960px) exceeded a 900px-tall viewport by 60px, so the last line sat past the fold with no visible scroll cue. Tightening the sidebar's vertical rhythm (still comfortably above the 24px touch-target minimum) removes the overflow outright instead of just relying on the container's overflow:auto scroll. */ .sidebar{padding:18px 17px 12px} .sidebar .brand{margin:0 15px 20px} .sidebar nav{gap:1px} .sidebar nav a{padding:8px 13px} .sidebar-bottom{padding-bottom:26px} /* F-QA-1 (independent audit): the 900px-height fix above still overflowed at shorter desktop heights (e.g. 1440x768, 1440x720 — total sidebar content is a fixed 833px regardless of viewport height, so anything under ~833px tall clips the tagline below the fold). Tighten further and hide the decorative tagline line on short viewports rather than shrinking nav link touch targets below 24px. */ @media(max-height:820px){ .sidebar{padding:12px 17px 8px} .sidebar .brand{margin:0 15px 14px} .sidebar nav{gap:0} .sidebar nav a{padding:6px 13px} .sidebar-bottom{padding-bottom:12px;gap:6px} .sidebar-bottom span.muted{display:none} } /* F-2/F-3: horizontally scrollable tables (Admin records, Billing usage) need a visible scroll affordance, not just an accessible label. The scroll behaviour and aria-label/tabindex already come from .table-wrap + JS; this adds a persistent edge fade so sighted users notice there is more to the right. */ .table-wrap{position:relative} .table-wrap[data-scrollable]:after{content:'';position:absolute;top:0;right:0;bottom:0;width:26px;background:linear-gradient(to left,#0000001c,transparent);pointer-events:none} .table-scroll-note{display:none;font-size:11px;color:var(--muted);margin:0 0 10px} .table-scroll-note.is-visible{display:block} /* F-4: the job-detail description card was stretched by CSS grid's default stretch to match the taller sidebar column, leaving empty white space below the (short) description text. */ .detail-columns>.panel{align-self:start} /* F-5: the support page's "What do you need?" radios rendered as unstyled native browser controls; style them like the design system's checkboxes (native input kept for accessibility). */ input[type=radio]{width:24px;height:24px;flex-shrink:0;accent-color:var(--green)} label.check input[type=radio]{position:absolute;left:0;top:0;margin:0} /* end W4 */ /* --- T-WEB-W1 begin: landing proof/preview/FAQ, footer additions, consent banner (trust/consent batch) --- */ .proof-strip{max-width:1282px;margin:34px auto 0;padding:0 5.5%}.proof-strip ul{display:flex;flex-wrap:wrap;gap:28px 40px;list-style:none;padding:0;margin:0}.proof-strip li{display:flex;flex-direction:column;gap:2px}.proof-strip strong{font-size:32px;letter-spacing:-.03em;color:var(--ink);line-height:1.2}.proof-strip span{font-size:11px;color:var(--muted)}.proof-strip>p{margin:16px 0 0;font-size:11px;color:var(--muted)} .pricing-note{max-width:1282px;margin:0 auto;padding:0 5.5% 6px}.pricing-note p{font-size:13px;color:var(--muted);margin:0}.pricing-note strong{color:var(--ink)}.pricing-note a{text-decoration:underline;text-underline-offset:3px} .faq-list{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--line);max-width:820px}.faq-item{border-bottom:1px solid var(--line)}.faq-item summary{cursor:pointer;list-style:none;padding:18px 4px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:24px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'+';font-size:20px;color:var(--muted);flex-shrink:0}.faq-item[open] summary:after{content:'−'}.faq-item p{padding:0 4px 20px;color:var(--muted);font-size:13px;line-height:1.8;margin:0;max-width:70ch}.faq-item p a{text-decoration:underline;text-underline-offset:3px;color:inherit} .footer-copyright{margin-top:4px!important} .link-button{display:inline-block;background:none;border:0;padding:3px 0;font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px;font-weight:400}.link-button:hover{color:var(--ink)} .consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink);padding:20px 5.5%;box-shadow:0 -8px 30px rgba(0,0,0,.25);display:grid;gap:16px;max-height:80vh;overflow:auto} .consent-banner p{margin:0;font-size:12px;line-height:1.7;color:#e4e9df;max-width:800px}.consent-banner a{color:#fff} .consent-options label.check{color:#e4e9df} .consent-actions{display:flex;gap:12px;flex-wrap:wrap} .consent-actions button{min-height:44px;padding:11px 22px;border-radius:7px;font-size:13px;font-weight:600;border:1px solid #fff;background:#fff;color:var(--ink);cursor:pointer} .consent-actions button:hover{background:#dfe6d7} @media(max-width:760px){.consent-banner{padding:10px 5%;gap:8px}.consent-banner p{font-size:12px;line-height:1.3;max-width:480px}.consent-actions{gap:8px}.consent-actions button{padding:9px 16px;min-height:44px}.proof-strip{padding:0 6%}.pricing-note{padding:0 6% 6px}} /* --- T-WEB-W1 end --- */ /* --- T-WEB-W2 begin: job search filters, skeleton/error states, job card metadata (job search batch) --- */ .job-search-more{margin-top:16px}.job-search-more summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--green);padding:6px 0;list-style:none}.job-search-more summary::-webkit-details-marker{display:none}.job-search-more summary:before{content:'▸';display:inline-block;margin-right:7px;transition:transform .15s}.job-search-more[open] summary:before{transform:rotate(90deg)}.job-search-more .form-grid{margin-top:14px}.job-search-more .button.secondary.small{align-self:end} .job-list-skeleton{display:grid;gap:12px}.skeleton-card{pointer-events:none}.skeleton-card .company-logo{background:var(--soft)}.skeleton-line{display:block;height:12px;border-radius:5px;background:linear-gradient(90deg,var(--soft) 25%,#e4e9dc 37%,var(--soft) 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;margin:8px 0;max-width:260px}.skeleton-line.short{max-width:120px}@keyframes skeleton-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.skeleton-line{animation:none}} .error-state{border-color:#e8c3b8;background:#fbebe8}.error-state h3{color:#832f25} @media(max-width:760px){.job-search-more .form-grid{grid-template-columns:1fr}} /* --- T-WEB-W2 end --- */ /* === Tracker board === */ /* List/board toggle (view-toggle) reuses the .text-button look inside a pill; aria-pressed marks the active view. */ .view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:white} .view-toggle .text-button{border-radius:0;text-decoration:none;padding:9px 16px;margin:0} .view-toggle .text-button[aria-pressed=true]{background:var(--green);color:#fff} /* Board region: always a labelled, keyboard-focusable horizontal scroller (WCAG scrollable-region-focusable), so the *page* never gains horizontal scroll even with the grouped columns below — only this region scrolls. */ /* contain:layout stops this region's large internal content (one flex column per backend stage, easily >2000px) from inflating document.documentElement.scrollWidth — every ancestor up to already reports a clean, contained scrollWidth without it, but Chromium's root viewport scrollWidth otherwise still reflects the nested scroller's full content width unless layout containment is explicit. */ .board-scroll{overflow-x:auto;max-width:100%;contain:layout} .board{display:flex;gap:16px;align-items:flex-start;min-width:min-content} .board-column{flex:0 0 250px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0} .board-column h3{font-size:13px;margin:0;display:flex;align-items:center;justify-content:space-between;gap:8px;letter-spacing:0} .board-count{background:white;border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:11px;color:var(--muted);font-weight:600;flex-shrink:0} .board-cards{display:flex;flex-direction:column;gap:10px;min-height:36px} .board-card{background:white;border:1px solid var(--line);border-radius:10px;padding:13px;display:flex;flex-direction:column;gap:6px} .board-card h3{font-size:14px;margin:0;letter-spacing:0;line-height:1.3} .board-card>p{font-size:11px;margin:0;color:var(--muted)} .board-stage-tag{align-self:flex-start} .board-followup{font-size:11px;color:var(--muted)} .board-followup.overdue{color:var(--red);font-weight:600} .board-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px} .board-move{width:auto;flex:1;min-width:110px;padding:7px 8px;font-size:11px} .board-empty{font-size:11px;text-align:center;padding:10px 4px;margin:0;color:var(--muted)} /* Closed column: a native
/ (same disclosure pattern as the FAQ list and the mobile nav menu) — collapsed by default, expands on click or Enter/Space with no extra script. */ .board-column-collapsible summary{cursor:pointer;list-style:none;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px;letter-spacing:0} .board-column-collapsible summary::-webkit-details-marker{display:none} .board-column-collapsible summary:after{content:'▸';color:var(--muted);font-size:11px;flex-shrink:0} .board-column-collapsible[open] summary:after{content:'▾'} @media(max-width:760px){.board-column{flex:0 0 220px}.view-toggle .text-button{padding:8px 12px;font-size:11px}} /* === end tracker === */ /* === W3 job page === */ .job-secondary-actions{margin-top:14px;align-items:center} .save-job-status,.share-status{font-size:11px;color:var(--muted)} .job-company .data-list a{text-decoration:underline;text-underline-offset:3px} .safety-tips{margin:14px 0 0;padding-left:20px;font-size:13px;color:var(--text);line-height:1.8} .safety-tips li{margin:8px 0} /* === Admin/reporting (C) === */ .data-list.compact{border:1px solid var(--line);border-radius:8px;padding:2px 14px} .data-list.compact li{padding:9px 0;font-size:11px} /* === end Admin/reporting (C) === */ /* === end W3 === */ /* === Freshness/search (FRESH-02) === */ /* "New jobs available" banner (app-jobs.mjs): a lightweight, dismiss-on-refresh notice above the feed. Reuses .notice's look; the button is the entire clickable target (min 44px tall for touch), not just its text. */ .fresh-jobs-banner{display:flex;align-items:center;margin:0 0 14px} .fresh-jobs-banner .text-button{min-height:44px;padding:8px 4px;font-weight:600} /* Honest empty state for a tight added_within window (jobs.mjs's addedWithinEmptyState) — same shape as the generic .empty-state, with a calmer accent than the "no results at all" dashed border, since this is an expected, temporary state rather than a dead end. */ .freshness-empty-state{border-style:solid;border-color:var(--line);background:var(--soft)} /* Freshness