/* Feasibly homepage — self-contained (loaded alone by renderHome). Light, trust-first redesign. Hero concept A "Locate": a surveyor's crosshair finds the site, the parcel draws on, the verdict stamps in. Tokens defined here; the worker loads Inter + IBM Plex Mono from Google Fonts in . */ :root{ --ink:#0F1115; --cream:#F7F5F0; --paper:#FFFFFF; --red:#C8292E; --red-soft:rgba(200,41,46,.5); --green:#0a7d33; --amber:#b45309; --b:#3D4048; --mut:#656B75; --line:#E5E7EB; --line2:#D1D5DB; --g100:#F3F4F6; --grid:rgba(15,17,21,.06); --grid2:rgba(15,17,21,.09); --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --wrap:1080px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body.home{margin:0;background:var(--paper);color:var(--b);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden} body.home a{color:inherit;text-decoration:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem} .mono{font-family:var(--mono)} .eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:500;color:var(--mut)} /* ============ NAV ============ */ /* nav rules moved to chrome.css (2026-08-04) — the homepage no longer carries its own nav. */ /* ============ HERO ============ */ .hero{position:relative;min-height:94svh;display:flex;align-items:center;isolation:isolate;overflow:hidden;background:var(--paper)} .hero-grid{position:absolute;inset:-2px;z-index:-3; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(115% 120% at 74% 46%,#000 0%,#000 42%,transparent 78%); mask-image:radial-gradient(115% 120% at 74% 46%,#000 0%,#000 42%,transparent 78%); animation:gridDrift 26s linear infinite;opacity:0;transition:opacity 1.1s ease} .hero.play .hero-grid{opacity:1} @keyframes gridDrift{to{background-position:56px 56px}} .hero-grid.fine{background-size:280px 280px;background-image:linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px)} .hero.play .hero-grid.fine{opacity:.6} .hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(70% 80% at 76% 44%,rgba(200,41,46,.05),transparent 62%)} .scan{position:absolute;left:0;right:0;top:0;height:1px;z-index:-1;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,rgba(200,41,46,.35),transparent);box-shadow:0 0 16px 1px rgba(200,41,46,.18)} .hero.play .scan{animation:scanDown 1.6s cubic-bezier(.4,0,.2,1) .3s 1 forwards} @keyframes scanDown{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(82svh)}} .hero-inner{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:7rem 2rem 3rem;display:grid; grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center} @media(max-width:900px){.hero-inner{grid-template-columns:1fr;padding-top:6rem}} .hero-eyebrow{margin:0 0 1.5rem;display:flex;align-items:center;gap:.7rem;color:var(--mut);animation:heroIn .35s ease .06s both} .hero-eyebrow .live{width:7px;height:7px;background:var(--red);border-radius:50%;animation:pip 2.4s ease-out infinite} @keyframes pip{0%{box-shadow:0 0 0 0 rgba(200,41,46,.45)}70%{box-shadow:0 0 0 8px rgba(200,41,46,0)}100%{box-shadow:0 0 0 0 rgba(200,41,46,0)}} h1.hero-h{margin:0;font-weight:900;letter-spacing:-.045em;line-height:.98;color:var(--ink);font-size:clamp(2.8rem,6.6vw,5.2rem)} h1.hero-h .ln{display:block;overflow:hidden} h1.hero-h .w{display:inline-block;transform:translateY(115%);opacity:0} .hero.play h1.hero-h .w{animation:wordUp .5s cubic-bezier(.16,1,.3,1) forwards} @keyframes wordUp{to{transform:none;opacity:1}} /* Hero copy animates on LOAD via CSS keyframes, NOT via the JS-added .play class. Why: Lighthouse put 3,672 ms of a 4,300 ms mobile LCP in "render delay". The LCP element is

, and it was invisible until homepage.js ran — which on a 4x-throttled mobile CPU queues behind GA's 163 KB gtag.js. So third-party analytics was gating the largest text paint on our own hero. With `animation … both` the reveal starts as soon as CSS is parsed and never waits for a script. This is the skill's rule too: a reveal must enhance an already-visible default rather than gate content on a class-triggered transition. */ @keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .hero-sub-line{margin:1.6rem 0 0;font-size:clamp(1.05rem,1.7vw,1.28rem);font-weight:500;color:var(--ink);line-height:1.45;max-width:26ch;animation:heroIn .3s ease .3s both} .hero-sub{margin:1rem 0 0;font-size:.98rem;line-height:1.65;color:var(--mut);max-width:42ch;animation:heroIn .3s ease .38s both} .hero-ctas{margin:2rem 0 0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;animation:heroIn .3s ease .5s both} .hero-trustline{margin:1.3rem 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--mut);animation:heroIn .35s ease .62s both} .hero-trustline .ok{color:var(--green)} /* (hero copy no longer keys off .play — see @keyframes heroIn above) */ .btn{display:inline-flex;align-items:center;gap:.55rem;height:3rem;padding:0 1.5rem;font-size:.9rem;font-weight:600;letter-spacing:.01em;border:1px solid transparent;transition:.2s;cursor:pointer} .btn-primary{background:var(--red);color:#fff;border-color:var(--red)} /* body.home a{color:inherit} (0-1-1) outranks .btn-primary (0-1-0) for color — without this re-assert the label renders body grey on red (~1.9:1). */ body.home .btn-primary{color:#fff} .btn-primary:hover{background:#a51f24;border-color:#a51f24;color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(200,41,46,.6)} .btn-ghost{color:var(--b);border-color:var(--line2)} .btn-ghost:hover{border-color:var(--ink);color:var(--ink)} .btn .k{font-family:var(--mono);font-size:.72rem;opacity:.55} /* survey panel — hero concept A "Locate" (enlarged parcel) */ .survey{position:relative;height:min(60svh,500px)} /* Mobile: measured 2026-07-30 at 390×844 the survey box started at y=758, so 86px of a 340px illustration was above the fold — and that sliver contained only the axis ticks (144.90°E, PFI 4162773), not the ZONE / GRZ1 / MIN LOT chips that carry the meaning. The one asset that makes the product instantly legible was, in effect, below the fold. Shorter box + a translate lifts the parcel, crosshair and first chip row into view and crops the ticks instead. `overflow:hidden` so the shifted SVG can't overlap the trustline above it. */ @media(max-width:900px){ .survey{height:270px;margin-top:.5rem;overflow:hidden} /* -100px, not -58px: at -58 the ZONE/GRZ1 chip cleared the 844px fold by only 11px, which is not "visible". This puts the crosshair and both value chips fully in view and crops the top of the parcel instead — reads as a zoomed survey view. */ .survey svg{transform:translateY(-100px)} } .survey svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .tick{fill:var(--mut);font-family:var(--mono);font-size:9px;letter-spacing:.04em;opacity:0} .hero.play .tick{animation:fadeIn .5s ease forwards} .cross{opacity:0} .hero.play .cross{animation:fadeIn .5s ease .95s forwards} .cross .ring{transform-origin:center;transform-box:fill-box;animation:ringPulse 2.8s ease-out .95s infinite} @keyframes ringPulse{0%{transform:scale(.4);opacity:.85}80%{transform:scale(2.4);opacity:0}100%{opacity:0}} .parcel{fill:rgba(200,41,46,.045);stroke:var(--red);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;opacity:0} .hero.play .parcel{opacity:1;animation:draw .8s ease forwards;animation-delay:.5s} @keyframes draw{to{stroke-dashoffset:0}} .chip{opacity:0;transform:translateY(6px)} .hero.play .chip{animation:chipIn .5s cubic-bezier(.16,1,.3,1) forwards} @keyframes chipIn{to{opacity:1;transform:none}} @keyframes fadeIn{to{opacity:1}} .rd{fill:#fff;stroke:var(--line);stroke-width:1;filter:drop-shadow(0 8px 18px rgba(15,17,21,.10))} .rd-lbl{fill:var(--mut);font-family:var(--mono);font-size:9px;letter-spacing:.04em} .rd-val{fill:var(--ink);font-family:var(--mono);font-size:12.5px;font-weight:500} .rd-badge{fill:var(--green);font-family:var(--mono);font-size:8px;letter-spacing:.05em;font-weight:500} .rd-cite{fill:var(--mut);font-family:var(--mono);font-size:8.5px;letter-spacing:.02em} .survey .rd-lbl{font-size:10px}.survey .rd-val{font-size:15px}.survey .rd-badge{font-size:8.5px}.survey .rd-cite{font-size:9.5px} .scroll-cue{position:absolute;bottom:1.4rem;left:2rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--mut);text-transform:uppercase;display:flex;align-items:center;gap:.6rem;opacity:0;transition:.5s ease 1.05s} .hero.play .scroll-cue{opacity:1} .scroll-cue .bar{width:26px;height:1px;background:var(--line2);position:relative;overflow:hidden} .scroll-cue .bar::after{content:"";position:absolute;inset:0;width:10px;background:var(--red);animation:cue 1.8s ease-in-out infinite} @keyframes cue{0%{transform:translateX(-12px)}100%{transform:translateX(28px)}} /* ============ TRUST STRIP ============ */ .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream)} .trust .row{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;justify-content:center;padding:1.1rem 2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--mut)} .trust .row span{display:inline-flex;align-items:center;gap:.5rem} /* Data provenance strip — borrowed-authority proof (state government sources) */ .sources{background:var(--paper);border-bottom:1px solid var(--line);padding:2.7rem 0} .sources .wrap{text-align:center} .sources-label{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);margin:0 0 1.4rem} .sources-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.85rem 2rem} .src-mark{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--b);white-space:nowrap} .src-mark b{color:var(--ink);font-weight:600} .sources-cc{font-family:var(--mono);font-size:.6rem;letter-spacing:.03em;color:var(--mut);margin:1.4rem 0 0} .trust .ok{color:var(--green);font-weight:600} /* ============ SECTIONS ============ */ .light{background:var(--cream);color:var(--b)} .white{background:#fff;color:var(--b)} section.band{padding:100px 0;position:relative} .sec-eyebrow{margin:0 0 1.1rem} h2.sec-h{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:0;max-width:20ch;text-wrap:balance} .sec-lead{font-size:1.02rem;line-height:1.7;color:var(--b);max-width:54ch;margin:1.2rem 0 0} .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s} /* live demo */ .demo{margin-top:2.6rem;border:1px solid var(--line);background:#fff;box-shadow:0 30px 80px -46px rgba(15,17,21,.3)} .demo-bar{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);background:var(--cream)} .demo-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--line2)} .demo-url{flex:1;font-family:var(--mono);font-size:.72rem;color:var(--mut);background:#fff;border:1px solid var(--line);padding:.35rem .7rem} .demo-body{display:grid;grid-template-columns:1fr 1fr} @media(max-width:760px){.demo-body{grid-template-columns:1fr}} .demo-left{padding:1.6rem;border-right:1px solid var(--line)} @media(max-width:760px){.demo-left{border-right:none;border-bottom:1px solid var(--line)}} .demo-field{display:flex;align-items:center;gap:.6rem;border:1px solid var(--ink);padding:.8rem 1rem;font-family:var(--mono);font-size:.86rem;color:var(--ink)} .demo-field .caret{width:2px;height:1.05em;background:var(--red);animation:blink 1s step-end infinite} @keyframes blink{50%{opacity:0}} .demo-status{margin:1rem 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);min-height:1em} .demo-status .g{color:var(--green)} .demo-map{position:relative;height:150px;margin-top:1.1rem;border:1px solid var(--line);background:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;overflow:hidden} .demo-pin{position:absolute;left:44%;top:52%;width:12px;height:12px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%) scale(0);box-shadow:0 0 0 6px rgba(200,41,46,.16)} .demo-pin.on{animation:pinDrop .5s cubic-bezier(.16,1,.3,1) forwards} @keyframes pinDrop{0%{transform:translate(-50%,-140%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.3)}100%{transform:translate(-50%,-50%) scale(1)}} .demo-parcel{position:absolute;inset:0} .demo-parcel path{fill:rgba(200,41,46,.06);stroke:var(--red);stroke-width:1.4;stroke-dasharray:420;stroke-dashoffset:420} .demo-parcel.on path{animation:draw 1s ease forwards} .demo-right{padding:1.4rem;display:flex;flex-direction:column;gap:.55rem;background:var(--cream)} .drow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;background:#fff;border:1px solid var(--line);opacity:0;transform:translateY(8px)} .drow.on{animation:chipIn .5s cubic-bezier(.16,1,.3,1) forwards} .drow .lab{font-size:.8rem;color:var(--b)} .drow .val{font-family:var(--mono);font-size:.92rem;color:var(--ink);font-weight:500} .drow .cite{font-family:var(--mono);font-size:.58rem;color:var(--mut);border:1px solid var(--line2);padding:.05rem .35rem;margin-top:.2rem;display:inline-block} .badge{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:.55rem;font-weight:500;border:1px solid;padding:.12rem .4rem;white-space:nowrap;display:inline-block;margin-top:.3rem} .badge.green{color:var(--green);border-color:var(--green);background:rgba(10,125,51,.07)} .badge.amber{color:var(--amber);border-color:var(--amber);background:rgba(180,83,9,.08)} /* stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:3rem;border:1px solid var(--line);background:#fff} @media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{padding:1.8rem 1.4rem;border-right:1px solid var(--line)} .stat:last-child{border-right:none} @media(max-width:680px){.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}} .stat .n{font-family:var(--mono);font-size:2.1rem;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1} .stat .l{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--mut);margin-top:.6rem} /* citation moment */ .cite-line{font-size:clamp(1.4rem,3vw,2.1rem);font-weight:600;letter-spacing:-.02em;line-height:1.45;color:var(--ink);max-width:24ch} .hl{position:relative;white-space:nowrap} .hl::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.05em;height:.42em;background:rgba(200,41,46,.15);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1) .25s} .rv.in .hl::after{transform:scaleX(1)} .cite-tag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.6rem;color:var(--mut);border:1px solid var(--line2);padding:.15rem .45rem;vertical-align:middle;margin-left:.25rem} /* SQM validation */ .validate{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center} @media(max-width:820px){.validate{grid-template-columns:1fr;gap:2rem}} .validate blockquote{margin:0;font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:600;letter-spacing:-.02em;line-height:1.35;color:var(--ink)} .validate .attr{margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--mut);text-transform:uppercase} .validate .attr b{color:var(--ink);font-weight:500} .val-card{border:1px solid var(--line);background:#fff;padding:0} .val-card .vc-top{padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);display:flex;justify-content:space-between;align-items:center} .val-card .vc-top .g{color:var(--green)} .vc-row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.3rem;border-bottom:1px solid var(--line);font-size:.85rem} .vc-row:last-child{border-bottom:none} .vc-row .k{color:var(--mut)} .vc-row .v{font-family:var(--mono);color:var(--ink)} /* guarantee dark moment */ .moment{background:var(--ink);color:#fff;padding:110px 0;border-top:4px solid var(--red);position:relative;overflow:hidden} .moment::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:70px 70px} .moment .wrap{position:relative;z-index:1} .moment .eyebrow{color:var(--red)} .moment h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:#fff;max-width:17ch;margin:1.3rem 0 0} .moment h2 .red{color:var(--red)} .moment p{color:#AEB4BE;max-width:54ch;margin:1.4rem 0 0;line-height:1.7} .moment .eyebrow{color:#AEB4BE} .moment .g-stats{display:flex;gap:3rem;margin-top:2.6rem;flex-wrap:wrap} .moment .g-stats .n{font-family:var(--mono);font-size:1.9rem;color:#fff} .moment .g-stats .l{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:#AEB4BE;margin-top:.4rem} .moment-link{margin:2.2rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em} .moment-link a{color:#AEB4BE;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s} .moment-link a:hover{color:#fff} /* final */ .final{background:#fff;padding:110px 0;text-align:center} .final h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0 auto;max-width:16ch} .final-guar{font-style:italic;color:var(--mut);font-size:.85rem;margin-top:1.4rem} .final-contact{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--mut);margin-top:1.1rem} .final-contact a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .final-contact a:hover{color:var(--red)} /* ============ §02 THE OLD WAY (ritual vs lookup compare) ============ */ .ow{display:grid;grid-template-columns:1fr 1fr;margin-top:2.6rem;border:1px solid var(--line);background:#fff} @media(max-width:760px){.ow{grid-template-columns:1fr}} .ow-col{padding:1.6rem;border-right:1px solid var(--line)} .ow-col:last-child{border-right:none} @media(max-width:760px){.ow-col{border-right:none;border-bottom:1px solid var(--line)}.ow-col:last-child{border-bottom:none}} .ow-new{background:var(--cream)} .ow-head{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:0 0 1.1rem} .ow-row{display:flex;gap:.7rem;padding:.55rem 0;font-size:.88rem;color:var(--b);line-height:1.5} .ow-row .x{color:var(--mut);font-family:var(--mono)} .ow-row .ok{color:var(--green);font-family:var(--mono);font-weight:600} /* honesty tier note under the stats */ .tier-note{margin:1.6rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--mut);line-height:1.7;max-width:72ch} .tier-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .tier-note a:hover{color:var(--red)} /* ============ §04 WORKS WHERE YOU WORK (delivery cards) ============ */ .hiw{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem} @media(max-width:820px){.hiw{grid-template-columns:1fr}} .hiw-card{display:block;background:#fff;border:1px solid var(--line);padding:1.6rem;transition:border-color .2s,transform .2s} .hiw-card:hover{border-color:var(--ink);transform:translateY(-2px)} .hiw-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0} .hiw-t{font-size:1.05rem;font-weight:700;color:var(--ink);margin:.7rem 0 0;letter-spacing:-.01em} .hiw-d{font-size:.85rem;line-height:1.6;color:var(--b);margin:.6rem 0 0} .hiw-go{display:inline-block;font-family:var(--mono);font-size:.68rem;color:var(--red);margin-top:1rem} /* ============ §06 WHO IT'S FOR (persona cards) ============ */ .who{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem} @media(max-width:900px){.who{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.who{grid-template-columns:1fr}} .who-card{position:relative;display:block;background:#fff;border:1px solid var(--line);padding:1.4rem 1.5rem;transition:border-color .2s,transform .2s} .who-card:hover{border-color:var(--ink);transform:translateY(-2px)} .who-role{font-weight:700;color:var(--ink);margin:0;font-size:.98rem;letter-spacing:-.01em} .who-job{font-size:.83rem;line-height:1.55;color:var(--b);margin:.55rem 0 0;padding-right:1.2rem} .who-go{position:absolute;right:1.2rem;top:1.3rem;font-family:var(--mono);color:var(--red);font-size:.8rem;opacity:0;transition:opacity .2s} .who-card:hover .who-go{opacity:1} .who-more{margin:1.8rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--mut)} .who-more a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .who-more a:hover{color:var(--red)} /* ============ §08 FAQ (objection handling, zero-JS details/summary) ============ */ .faq{margin-top:2.4rem;background:#fff;border:1px solid var(--line);max-width:820px} .faq-item{border-bottom:1px solid var(--line)} .faq-item:last-child{border-bottom:none} .faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.4rem;font-weight:600;font-size:.95rem;color:var(--ink)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-family:var(--mono);color:var(--mut);font-size:1.05rem;transition:transform .2s;flex-shrink:0} .faq-item[open] summary::after{transform:rotate(45deg);color:var(--red)} .faq-item p{margin:0;padding:0 1.4rem 1.3rem;font-size:.88rem;line-height:1.65;color:var(--b);max-width:70ch} .faq-item a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .faq-item a:hover{color:var(--red)} /* final — secondary no-signup path */ .final-alt{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--mut);margin-top:1.1rem} .final-alt a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .final-alt a:hover{color:var(--red)} /* ============ FOOTER (dark 5-column — identical to every inner page, mirrors .feasibly-footer in base.css so the chrome is continuous) ============ */ /* footer rules moved to chrome.css (2026-08-04). */ /* ============ NO-JS FALLBACK ============ The reveal system starts everything at opacity:0 and homepage.js lifts it. layout.ts stamps html.js from an inline head script; when that never runs (JS off, script blocked, stale cache), content simply shows. */ /* No-JS: the hero copy now animates from CSS alone so it needs no fallback here, but `animation:none` is kept on the list so the no-JS path lands on the final state instantly rather than replaying a reveal for a user who may have JS off precisely because they want less motion. */ html:not(.js) .hero-eyebrow,html:not(.js) h1.hero-h .w,html:not(.js) .hero-sub-line,html:not(.js) .hero-sub,html:not(.js) .hero-ctas,html:not(.js) .hero-trustline,html:not(.js) .rv,html:not(.js) .drow,html:not(.js) .tick,html:not(.js) .chip,html:not(.js) .scroll-cue{opacity:1;transform:none;animation:none} /* ============ KEYBOARD ACCESS ============ */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;font-family:var(--mono);font-size:.78rem;padding:.7rem 1.1rem} .skip-link:focus{left:0} /* Fourth instance of the 0-1-1 vs 0-1-0 trap: `body.home a{color:inherit}` outranks `.skip-link`, so the skip target rendered body-grey on ink (1.82:1) — invisible, on the one control that exists purely for keyboard users. Found by contrast.spec.js. */ body.home .skip-link{color:#fff} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px} /* "You are here" — layout.ts sets aria-current="page" on the active nav item. */ /* ============ 404 (self-contained — no reveal system, no homepage.js) ============ */ .nf{min-height:60svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 2rem} .nf-eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600;margin:0} .nf-h{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:1rem 0 0;max-width:18ch} .nf-sub{color:var(--mut);margin:1rem 0 0;max-width:44ch} .nf-ctas{margin-top:2rem} /* ============ MID-PAGE CTA ============ Measured 2026-07-30: 6,768px (7.5 screens) separated the hero CTA from the closing one, with no button-shaped sign-up affordance in between. Two of these now sit after the problem section and after the persona grid. */ .band-cta{margin-top:3rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} .band-cta-alt{font-size:.85rem;color:var(--mut);border-bottom:1px solid var(--line2);transition:color .2s,border-color .2s} .band-cta-alt:hover{color:var(--ink);border-color:var(--ink)} @media(max-width:600px){ .band-cta{flex-direction:column;align-items:stretch;gap:1rem;text-align:center} .band-cta .btn{justify-content:center} } /* ============ STICKY CTA BAR ============ Takes over once the hero scrolls out, because .home-nav is absolute and does not follow. Revealed by homepage.js via IntersectionObserver on .hero; if JS never runs the bar simply stays hidden and the in-page CTAs still carry the page. */ .stickybar{ position:fixed;left:0;right:0;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding:.8rem 2rem;background:rgba(255,255,255,.96);backdrop-filter:blur(8px); border-bottom:1px solid var(--line); transform:translateY(-100%);visibility:hidden; transition:transform .28s ease,visibility 0s linear .28s; } .stickybar.on{transform:translateY(0);visibility:visible;transition:transform .28s ease} .stickybar-txt{margin:0;font-size:.85rem;color:var(--b)} .stickybar-acts{display:flex;align-items:center;gap:1rem} .stickybar-ghost{font-size:.82rem;color:var(--mut);transition:color .2s} .stickybar-ghost:hover{color:var(--ink)} .stickybar-cta{ background:var(--red);color:#fff;padding:.55rem 1.15rem;font-size:.82rem;font-weight:600; border:1px solid var(--red);transition:background .2s,border-color .2s;white-space:nowrap; } /* Same specificity trap that bit .btn-primary, and it bit this the same way: `body.home a{color:inherit}` (0-1-1) outranks `.stickybar-cta` (0-1-0), so the white above never applied and the label rendered body grey (#3D4048) on red — measured 1.88:1 live, against a 4.5:1 requirement. Any new anchor-based button on the homepage needs this re-assert. Guarded by verify-homepage.sh check 5. */ body.home .stickybar-cta{color:#fff} .stickybar-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff} /* Mobile: bottom of the screen, in thumb reach, elevated rather than bordered. */ @media(max-width:720px){ .stickybar{ top:auto;bottom:0;border-bottom:0;border-top:1px solid var(--line); padding:.7rem 1rem;gap:.75rem; box-shadow:0 -8px 24px -12px rgba(15,17,21,.25); transform:translateY(100%); } .stickybar-txt{display:none} .stickybar-acts{width:100%;gap:.75rem} .stickybar-ghost{flex:0 0 auto;padding:.6rem .4rem} .stickybar-cta{flex:1 1 auto;text-align:center;padding:.75rem 1rem;font-size:.9rem} } /* The mobile drawer is z-index 55 and covers the screen — don't float over it. */ body.nav-open .stickybar{visibility:hidden;transform:translateY(100%)} @media(prefers-reduced-motion:reduce){.stickybar{transition:none}} /* ============ MOBILE PASS (2026-07-30) ============ Measured at 390x844 against the live site. Three classes of defect, all touch-only. */ /* 1. Tap targets. 44px is the floor for a standalone control; inline links inside prose are exempt, but these are stand-alone CTAs sitting on their own row. */ @media(max-width:720px){ .stickybar-ghost{min-height:44px;display:inline-flex;align-items:center;padding:0 .6rem} .band-cta-alt{display:inline-flex;align-items:center;min-height:44px} } /* 2. Mono label floor. The small-caps mono labels are deliberate and stay small on desktop, but at 9.28-9.92px on a phone they stop being "quiet" and start being unreadable. Raised to ~11px on touch only — the desktop type scale is untouched. */ @media(max-width:720px){ .stat .l,.g-stats .l{font-size:.7rem} .demo .cite{font-size:.66rem} .ow-head{font-size:.7rem} .sources-label,.sources-cc{font-size:.7rem} } /* 3. Footer occlusion is handled in homepage.js — the bar stands down as soon as the closing CTA or the footer is on screen. Deliberately NOT solved with `body{padding-bottom}`: the footer has its own background, so reserving space below it would paint a 66px strip of page background under a finished page. */