:root{ /* Ink on warm paper. Nine credibility-led sites in this category converge on a warm off-white ground rather than pure white; it is the cheapest single move away from a template look. The ink is faintly COOL against it, so the warm/cool tension reads as chosen rather than accidental. */ --paper:#FBFAF7; --panel:#F4F2ED; --ink:#111820; --body:#3D4550; --mute:#5E6773; --rule:#E2DFD8; --rule-hard:#CFCBC2; --edge:#8E887F; /* ONE accent, one job: it marks a MEASURED figure and nothing else. Deep petrol , the instrument colour. Deliberately not SaaS blue and not terracotta, the two defaults this category reaches for. */ --mark:#0E4A52; --wash:rgba(14,74,82,.13); /* The band's palette, and the one colour that leaves it. Interactive things are INDIGO, lifted from the scattered side of the band, so petrol keeps its single job of marking a measured figure. Brass is the crest of the ladder and appears nowhere in type at all. */ --link:#3B3A72; --link-dk:#26254F; --link-soft:rgba(59,58,114,.3); --crest:#8A6A2B; --warn:#8C2D22; --good:#15662f; --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --wrap:1080px; --read:64ch; /* legacy aliases: older fragments still reference these */ --bg:#FBFAF7; --accent:#0E4A52; --accent-dk:#0A343A; --line:#E2DFD8; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--body);font:17px/1.72 var(--sans); font-feature-settings:"kern" 1;text-rendering:optimizeLegibility} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99} a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-soft); text-underline-offset:.16em;text-decoration-thickness:1px} a:hover{color:var(--link-dk);text-decoration-color:var(--link-dk)} h1,h2,h3,h4{color:var(--ink);font-family:var(--serif);line-height:1.2; letter-spacing:-.015em;margin:0 0 .5em} h1{font-size:clamp(2.38rem,5.2vw,3.88rem);font-weight:600;letter-spacing:-.018em;max-width:22ch} h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:600;letter-spacing:-.01em;margin-top:0} h3{font-size:1.22rem;font-weight:600} p{margin:0 0 1.1em} .lede{font-size:clamp(1.1rem,1.9vw,1.32rem);line-height:1.55;color:var(--body)} /* header */ /* was rgba(255,255,255,.94): a near-WHITE bar floating over warm paper on all 14 pages. Tinted to the paper so the seam disappears. */ header.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(251,250,247,.92); backdrop-filter:saturate(160%) blur(8px);z-index:20} .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px} .brand{display:flex;flex-direction:column;line-height:1.15;text-decoration:none} .brand:hover{text-decoration:none} .brand-mark{font-family:var(--serif);font-weight:700;font-size:1.16rem;color:var(--ink);letter-spacing:-.01em} .brand-sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600} header nav{display:flex;gap:22px;align-items:center;font-size:.94rem;font-weight:500} header nav a{color:var(--body)} .nav-cta{background:var(--link);color:#fff!important;padding:9px 16px;border-radius:var(--r-pill)} .nav-cta:hover{background:var(--link-dk);text-decoration:none} /* The masthead mark. currentColor on the strokes so a reverse lockup needs no second file; petrol on the point only, never on the type. */ .brand{flex-direction:row;align-items:center;gap:10px} .brand-logo{flex:none;display:block} .brand-text{display:flex;flex-direction:column;line-height:1.15} /* sections */ section{padding:68px 0;border-bottom:1px solid var(--line)} section.hero{padding:84px 0 72px;border-bottom:1px solid var(--line)} section.tint{background:var(--panel)} .eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em; color:var(--mute);font-weight:500;margin-bottom:18px} .measure{max-width:var(--read)} .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px} /* A row of three must never wrap to two-plus-an-orphan. Three across, or one. */ .cols.three{grid-template-columns:repeat(3,1fr)} .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} /* .cols-3 was used by home.html and never defined, so three cards that were meant to sit in a row rendered as three full-width stacked blocks. */ .cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .priceline{font-family:var(--mono);font-size:.9rem;line-height:1.7;color:var(--ink); border-left:2px solid var(--mark);padding:2px 0 2px 16px;margin:26px 0 0} /* limits list: the longest section on the page, so it gets room to breathe rather than being compressed into a bullet list nobody reads */ .limits>div{padding:22px 0;border-top:1px solid var(--rule);max-width:60ch} .limits>div:first-child{border-top:0;padding-top:0} .limits h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;margin:0 0 6px} /* .98rem resolved to 15.7px: rem is ROOT-relative and the root is 16px, while body sets 17px. That put the page's longest section of prose under the 17px floor that is itself a logged accessibility fix. */ .limits p{margin:0;font-size:var(--fs-body)} /* buttons: the owner's MotionButton (2026-09-11), as CSS on the markup that is already here. A pill with no body of its own: an indigo circle with an arrow at the left, the label in ink beside it. On hover the circle grows to fill the pill, the arrow slides right and the label turns paper. The circle and the arrow are pseudo-elements, so every button on the site, hand-written or built, gets it with no markup change and no script. Indigo because it is interactive; petrol stays on measured figures. The arrow is Lucide's arrow-right (ISC), held as a mask so its colour is CSS. --h is the pill height; the circle is --h less the 4px inset; --ico the arrow, centred in the circle. */ .btn{--h:56px;--pad:4px;--ico:24px; position:relative;isolation:isolate;box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center; min-height:var(--h);padding:var(--pad) 24px var(--pad) calc(var(--h) + 10px); background:transparent;color:var(--ink);text-decoration:none; border:0;border-radius:var(--r-pill);cursor:pointer;font:inherit; font-weight:500;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2; transition:color .5s var(--ease),transform var(--dur) var(--ease)} .btn::before{content:"";position:absolute;z-index:-1;left:var(--pad);top:50%; width:calc(var(--h) - 2*var(--pad));height:calc(var(--h) - 2*var(--pad)); transform:translateY(-50%);border-radius:999px;background:var(--link); transition:width .5s var(--ease),background var(--dur) var(--ease)} .btn::after{content:"";position:absolute;top:50%; left:calc(var(--pad) + (var(--h) - 2*var(--pad) - var(--ico))/2); width:var(--ico);height:var(--ico);transform:translate(0,-50%);background:var(--paper); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .5s var(--ease),background var(--dur) var(--ease)} .btn:hover{color:var(--paper);text-decoration:none} .btn:hover::before{width:calc(100% - 2*var(--pad))} .btn:hover::after{transform:translate(.4rem,-50%)} .btn:active{transform:scale(.97)} .btn:focus-visible{outline:2px solid var(--link);outline-offset:3px} /* A disabled submit (the capture form before its endpoint exists) keeps the shape, loses the colour, and does not fill on hover. */ .btn:disabled,.btn[disabled]{cursor:not-allowed;color:var(--mute)} .btn:disabled::before,.btn[disabled]::before{background:var(--edge)} .btn:disabled:hover::before,.btn[disabled]:hover::before{width:calc(var(--h) - 2*var(--pad))} .btn:disabled:hover::after,.btn[disabled]:hover::after{transform:translate(0,-50%)} /* .secondary and .ghost: the same button with a hollow circle and an indigo arrow; on hover it fills like the primary. The 1.5px ring is not decorative: a fill-only grey circle drops under the 3:1 non-text contrast floor, which is a logged fix, not a preference. */ .btn.ghost::before,.btn.secondary::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--link)} .btn.ghost::after,.btn.secondary::after{background:var(--link)} .btn.ghost:hover::before,.btn.secondary:hover::before{background:var(--link)} .btn.ghost:hover::after,.btn.secondary:hover::after{background:var(--paper)} .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} /* Was .88rem = 14.08px, under the 17px prose floor, on every page that used it. A helper line under a button is still a sentence a reader has to read. */ .after-btn{font-size:var(--fs-body);color:var(--mute);margin-top:12px} /* hero: the argument on the left, the evidence on the right. The evidence panel is the page's anchor and it holds real sampled questions, not a product mock. */ .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start} .hero-grid h1{max-width:none} .evidence{border:1px solid var(--rule-hard);border-top:3px solid var(--mark); background:#fff;padding:30px 30px 26px;border-radius:3px} .evidence .qs-lab{font-family:var(--sans);font-size:.74rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--mute); margin:22px 0 12px;padding-top:20px;border-top:1px solid var(--rule)} .evidence .qs{list-style:none;margin:0;padding:0} .evidence .qs li{font-family:var(--mono);font-size:.79rem;line-height:1.5;color:var(--body); padding:0 0 12px 16px;position:relative} .evidence .qs li:last-child{padding-bottom:0} .evidence .qs li:before{content:"";position:absolute;left:0;top:.5em; width:6px;height:6px;background:var(--mark)} /* ========================================================================== MEASURED FIGURE , the signature component. Every number this site publishes carries its denominator, its instrument and its date, inline, in the same shape the report uses. It is the product's own method turned into the visual identity, and it is the only place the accent colour is allowed to appear. ========================================================================== */ .measured{margin:34px 0} .measured .fig{display:inline-block;font-family:var(--serif);font-weight:700; font-size:clamp(3.4rem,13vw,6.4rem);line-height:.9;color:var(--ink); font-variant-numeric:tabular-nums;letter-spacing:-.03em; background:linear-gradient(transparent 58%,var(--wash) 58%)} .measured .fig small{font-size:.42em;font-weight:600;letter-spacing:-.01em} .measured .claim{font-size:clamp(1.08rem,1.8vw,1.28rem);line-height:1.5; color:var(--ink);max-width:34ch;margin:14px 0 0} /* provenance. Real content, so it clears AA on both grounds. */ .prov{font-family:var(--mono);font-size:.775rem;line-height:1.6;color:var(--mute); border-top:1px solid var(--rule);padding-top:9px;margin-top:16px;max-width:56ch; font-variant-numeric:tabular-nums} .prov b{color:var(--ink);font-weight:500} /* a claim that rests on a measurement gets a mark; decorative nowhere else */ .marked{box-shadow:inset 0 -.42em 0 var(--wash)} /* data */ .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2px; background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:28px 0} .stat{background:var(--bg);padding:22px 20px} .stat b{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--ink);line-height:1;font-weight:700} .stat span{display:block;font-size:.86rem;color:var(--mute);margin-top:8px;line-height:1.4} table{width:100%;border-collapse:collapse;font-size:.95rem;margin:22px 0} th{text-align:left;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase; color:var(--mute);font-weight:700;padding:0 12px 9px 0;border-bottom:1px solid var(--line)} td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top} td.num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)} /* wide tables scroll inside themselves; the page body never scrolls sideways */ .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* honeypot: off-screen rather than display:none , bots skip hidden fields */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* numbered steps */ .steps{counter-reset:step;list-style:none;padding:0;margin:26px 0} .steps li{counter-increment:step;position:relative;padding:0 0 18px 44px; border-bottom:1px solid var(--line);margin-bottom:18px} .steps li:last-child{border-bottom:0} .steps li::before{content:counter(step);position:absolute;left:0;top:-2px; width:28px;height:28px;border-radius:50%;background:var(--panel); color:var(--accent);font-weight:700;font-size:.85rem; display:flex;align-items:center;justify-content:center} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; background:var(--panel);padding:2px 6px;border-radius:3px} /* callouts */ .note{border-left:3px solid var(--accent);background:var(--panel);padding:18px 20px;margin:26px 0; border-radius:0 6px 6px 0} .note.warn{border-left-color:var(--warn)} .note p:last-child{margin-bottom:0} .card{border:1px solid var(--line);border-radius:8px;padding:26px} .card h3{margin-top:0} .price{font-family:var(--serif);font-size:1.85rem;font-weight:700;color:var(--ink); display:block;margin:2px 0 10px} ul.plain{list-style:none;padding:0;margin:0} ul.plain li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line)} ul.plain li:before{content:"";position:absolute;left:4px;top:17px;width:7px;height:7px; border-radius:50%;background:var(--accent)} ul.no li:before{background:var(--warn)} blockquote{margin:0;background:var(--panel);border-left:3px solid #c9d3e2;padding:16px 18px; border-radius:0 6px 6px 0;font-size:.97rem;white-space:pre-wrap} /* footer */ footer.site{padding:52px 0 40px;background:var(--panel);border-top:1px solid var(--line)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px} .foot-grid h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase; color:var(--mute);font-weight:700;margin-bottom:12px} .foot-grid a{display:block;color:var(--body);font-size:.93rem;padding:4px 0} .foot-pos{font-size:.93rem;color:var(--mute);max-width:38ch;margin:10px 0 14px} .foot-addr{font-size:.83rem;color:var(--mute)} .foot-fine{margin-top:36px;padding-top:20px;border-top:1px solid var(--line); font-size:.83rem;color:var(--mute);max-width:78ch} @media (max-width:1000px){ .hero-grid{grid-template-columns:1fr;gap:36px} .cols-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} } @media (max-width:820px){ .cols-2{grid-template-columns:1fr;gap:30px} .cols.three{grid-template-columns:1fr} .cols-3{grid-template-columns:1fr;gap:18px} .evidence{padding:24px 22px 22px} .prov,.priceline{max-width:none} .foot-grid{grid-template-columns:1fr 1fr;gap:26px} header nav{gap:14px;font-size:.88rem} .brand-sub{display:none} section{padding:52px 0} } @media (max-width:520px){ .foot-grid{grid-template-columns:1fr} header nav a:not(.nav-cta){display:none} } /* forms */ form label{display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin:16px 0 0} form input,form select{display:block;width:100%;margin-top:6px;padding:11px 12px;font:inherit;font-size:.97rem; border:1.5px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)} form input:focus,form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--wash)} form small{display:block;font-weight:400;font-size:.83rem;color:var(--mute);margin-top:6px;line-height:1.45} form button{border:0;cursor:pointer;font-family:inherit} /* opt-in + capture */ label.check{display:flex;gap:10px;align-items:flex-start;margin-top:20px; font-weight:400;font-size:.9rem;color:var(--body);line-height:1.45;cursor:pointer} label.check input{width:auto;margin:2px 0 0;flex:0 0 auto;accent-color:var(--accent)} .inline-form{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0;max-width:540px} .inline-form input[type=email]{flex:1 1 260px;margin:0;padding:13px 14px} .inline-form button{flex:0 0 auto;white-space:nowrap} .capture-fine{font-size:.85rem;color:var(--mute);margin-top:14px} /* FAQ. Answers are visible by default rather than collapsed: hidden text is worse to extract, and extractability is the thing we sell. */ .faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:0 44px;margin-top:34px} .faq>div{padding:22px 0;border-top:1px solid var(--line)} .faq h3{margin:0 0 8px;font-size:1.08rem;line-height:1.35} .faq p{margin:0} /* ========================================================================== INTAKE FORM (/intake/) , generated from intake-spec.json. Deliberately denser than the marketing pages: this is a 49-field document someone works through, not a page they read. Wide labels and generous section padding turn 10 minutes of work into a page that LOOKS like an hour of work, and the abandonment risk is in section D, near the end. ========================================================================== */ .intake-shell{padding:40px 0 90px} .gate{padding:60px 0} .gate .loading{color:var(--mute)} .intake-head{max-width:74ch} .intake-head h1{margin-bottom:12px} .intake-body{display:grid;grid-template-columns:210px 1fr;gap:48px; align-items:start;margin-top:44px;max-width:1000px} .isecnav{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px; font-size:.88rem;border-left:2px solid var(--line);padding-left:0} .isecnav a{color:var(--mute);padding:7px 0 7px 14px;margin-left:-2px; border-left:2px solid transparent;line-height:1.3} .isecnav a b{color:var(--ink);font-family:var(--serif);margin-right:7px} .isecnav a.here{color:var(--ink);border-left-color:var(--accent);font-weight:600} .isecnav a:hover{text-decoration:none;color:var(--ink)} .isec{padding:0 0 46px;border-bottom:1px solid var(--line);margin-bottom:46px;scroll-margin-top:90px} .isec:last-of-type{border-bottom:0} .isec h2{display:flex;align-items:baseline;gap:12px;font-size:1.5rem} .secid{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em; color:var(--accent);background:var(--panel);border-radius:3px;padding:4px 8px} .secblurb{color:var(--mute);font-size:.95rem;max-width:62ch;margin-bottom:30px} .field{margin:0 0 26px;scroll-margin-top:100px;border-radius:6px} .field.missing{outline:2px solid var(--warn);outline-offset:10px} .field>label{display:block;font-weight:400;margin:0} .flab{display:block;font-size:.97rem;font-weight:600;color:var(--ink); margin-bottom:8px;line-height:1.4} .req{color:var(--warn);font-weight:700} .opt{font-weight:400;font-size:.8rem;color:var(--mute);letter-spacing:.02em} .field textarea,.field select{display:block;width:100%;margin-top:0;padding:11px 12px; font:inherit;font-size:.97rem;border:1.5px solid var(--line);border-radius:6px; background:#fff;color:var(--ink)} .field textarea{resize:vertical;min-height:76px;line-height:1.5} .field textarea:focus,.field select:focus,.field input:focus{outline:none; border-color:var(--accent);box-shadow:0 0 0 3px var(--wash)} .field input[type=text],.field input[type=number]{margin-top:0} .withpre{display:flex;align-items:stretch} .withpre .prefix{display:flex;align-items:center;padding:0 12px;background:var(--panel); border:1.5px solid var(--line);border-right:0;border-radius:6px 0 0 6px; color:var(--mute);font-weight:600} .withpre input{border-radius:0 6px 6px 0} .opt-row{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.94rem; color:var(--body);line-height:1.45;cursor:pointer;padding:6px 0;margin:0} .opt-row input{width:auto;margin:3px 0 0;flex:0 0 auto;accent-color:var(--accent)} .multi,.yn{display:flex;flex-direction:column;gap:0;margin-bottom:8px} .yn{flex-direction:row;gap:26px;margin-bottom:10px} .consent{padding:14px 16px;background:var(--panel);border-radius:6px; border:1.5px solid var(--line);font-size:.94rem} .matrix{display:grid;gap:6px} .mrow{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:center; font-size:.94rem;color:var(--body)} .mrow input{margin:0;padding:8px 10px} /* save state , quiet when fine, loud only when something did not save */ .saved{font-size:.85rem;min-height:1.3em;margin-top:18px;font-weight:600} .saved.ok{color:var(--good)} .saved.pending{color:var(--mute);font-weight:400} .saved.warn{color:var(--warn)} .submitbox{border:2px solid var(--ink);border-radius:8px;padding:30px 32px;margin-top:10px} .submitbox h2{margin-top:0} .submitbox .btn{margin-top:22px} .submitbox .btn.ghost{margin-left:10px} .submitbox ul.plain li{font-size:.94rem} #missing ul{margin:8px 0 0;padding-left:20px;font-size:.92rem} #missing li{margin-bottom:4px} .readback{margin-top:10px} .readback h3{margin:30px 0 8px;font-size:1.05rem} table.rb{font-size:.92rem;margin:0} table.rb th{width:38%;text-transform:none;letter-spacing:0;font-size:.9rem; color:var(--mute);font-weight:600;padding:10px 16px 10px 0;vertical-align:top; border-bottom:1px solid var(--line)} table.rb td{color:var(--ink)} @media (max-width:860px){ .intake-body{grid-template-columns:1fr;gap:24px} .isecnav{position:static;flex-direction:row;flex-wrap:wrap;border-left:0; border-bottom:1px solid var(--line);padding-bottom:10px;gap:4px 16px} .isecnav a{border-left:0;padding:4px 0;margin-left:0} .isecnav a.here{border-bottom:2px solid var(--accent)} .submitbox{padding:24px 20px} .submitbox .btn,.submitbox .btn.ghost{display:block;width:100%;text-align:center;margin-left:0;margin-top:12px} } /* ========================================================================== 2026-09-10 HOME REBUILD Tokens the file never had (spacing, radius, motion), the hero band, and the components the restructured home page needs. Appended so every base rule here precedes its own @media override: shipping an override ABOVE its base is the exact defect that broke the hero on 2026-09-08. ========================================================================== */ :root{ /* spacing, 4px base */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --sec-y:clamp(56px,7vw,96px); --sec-y-slab:clamp(72px,9vw,128px); --gut:clamp(20px,4vw,40px); /* radius, with the rule written down: buttons and labels are pills, cards and inputs are soft, measurement surfaces are square. An instrument is not a card. */ --r-pill:999px; --r-panel:10px; --r-instr:0; --lift:0 1px 2px rgba(17,24,32,.055),0 10px 28px rgba(17,24,32,.05); --ease:cubic-bezier(.16,1,.3,1); --dur:.22s; /* 17px against a 16px root. The floor, not a suggestion. */ --fs-body:1.0625rem; --wrap-wide:1240px; --read-narrow:52ch; --band-h:clamp(210px,21vw,330px); } /* ---- hero: centred stack over a full-bleed band -------------------------- section has no horizontal padding and no max-width (only .wrap does), so full bleed needs no negative margin and no 100vw. 100vw would include the scrollbar and scroll the body sideways, which is a logged defect. */ /* border-bottom:0 because the terms strip under the band already draws one, and two hairlines 1px apart reads as a rendering bug. */ section.hero.has-band{padding:clamp(52px,6.5vw,88px) 0 0;overflow:hidden;border-bottom:0} .hero-center{text-align:center;max-width:none} .hero-center h1{font-size:clamp(2.5rem,5.6vw,4.25rem);max-width:20ch; margin:0 auto .34em;letter-spacing:-.022em;text-wrap:balance} .hero-center .lede{max-width:56ch;margin:0 auto;text-wrap:pretty} .hero-center .btns{justify-content:center} .pill{display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em; color:var(--mute);border:1px solid var(--edge);border-radius:var(--r-pill); padding:6px 14px;margin:0 0 var(--s5)} .hero-band{position:relative;width:100%;height:var(--band-h); margin-top:clamp(28px,4vw,52px);background:var(--panel);overflow:clip;isolation:isolate} .hero-band-fig,.hero-band-gl{position:absolute;inset:0;width:100%;height:100%; display:block;z-index:0} /* The SVG is never hidden and never waits for a trigger: it IS the picture until the canvas has actually painted a frame. */ .hero-band-fig{opacity:1;transition:opacity .5s var(--ease)} .hero-band-gl{opacity:0;transition:opacity .4s var(--ease)} .hero-band[data-gl="on"] .hero-band-gl{opacity:1} .hero-band[data-gl="on"] .hero-band-fig{opacity:0} /* the index brightens toward the reader. --mx/--my default to 0, so with no JavaScript this is simply centred. */ .hero-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(210px 210px at calc(50% + var(--mx,0)*14px) calc(50% + var(--my,0)*-8px), rgba(251,250,247,.88),rgba(251,250,247,0) 66%)} /* The convergence point. The ONLY petrol in the band, and dimensionally the same move as .evidence's 3px border-top. Hairline, never an area. */ .hero-node{position:absolute;left:calc(50% + var(--mx,0)*14px);top:calc(50% + var(--my,0)*-8px); width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%; background:var(--mark);z-index:2;pointer-events:none} /* Grain lives in CSS, not the shader, so it survives every fallback path. */ .hero-band::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px;mix-blend-mode:multiply;opacity:.055} /* ---- terms strip: the slot a logo row would occupy, if we had one -------- */ .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--rule)} .strip div{padding:18px 24px;font-family:var(--mono);font-size:.82rem;line-height:1.6; color:var(--body);border-left:1px solid var(--rule)} .strip div:first-child{border-left:0;padding-left:0} .strip b{color:var(--ink);font-weight:500} /* ---- the sampled questions, as a rail ----------------------------------- */ .qrail{list-style:none;display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;margin:22px 0 0;padding:0 0 10px; /* The rail always holds more than fits. Fading the right edge makes the cut read as "there is more", instead of as a truncation bug. */ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent)} .qrail li{flex:0 0 clamp(232px,25vw,300px);scroll-snap-align:start;position:relative; padding:2px 26px 0 16px;border-left:1px solid var(--rule); /* .79rem when these were sidebar metadata in .evidence. They are the page's evidence now, so they scale with that promotion. */ font-family:var(--mono);font-size:.95rem;line-height:1.55;color:var(--body)} .qrail li:first-child{border-left:0;padding-left:0} /* No bullet marker here. A small square set tight against the start of a sampled query reads as an opening quotation mark, and this page renders these queries WITHOUT quotes on purpose: a literal quote around "my furnace is 20 years old" makes check_invented_figures.py treat the 20 as a quoted figure with no provenance. The border-left already divides them. */ .qs-lab{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--mute);margin:0;padding-top:22px; border-top:1px solid var(--rule)} /* ---- the measurement, promoted from a sidebar card to a section --------- */ /* auto, not a fraction: a fractional first column leaves ~330px of dead space between the figure and the claim it belongs to. */ .instrument{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(28px,5vw,72px);align-items:start} .instrument .measured{margin:0} .instrument h2{margin-top:-.1em} /* ---- deliverables: the quantity IS the illustration --------------------- Deliberately serif ink with NO wash and NO accent. These are scope numbers, not measurements, and if a reader can confuse the two then the .measured doctrine is dead. */ .spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,52px); margin-top:var(--s6)} .spec>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px; align-items:baseline;padding:20px 0;border-top:1px solid var(--rule)} .spec .qty{font-family:var(--serif);font-weight:700;font-size:2rem;line-height:1; color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;min-width:2.6ch} .spec p{margin:0;font-size:var(--fs-body)} /* ---- how it works: three across, rhyming with the ladder in the band ---- */ .ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(22px,3vw,40px); counter-reset:step;list-style:none;padding:0;margin:var(--s8) 0 0} .ladder li{counter-increment:step;position:relative;padding:24px 0 0; border-top:2px solid var(--rule-hard);font-size:var(--fs-body)} .ladder li::before{content:counter(step);position:absolute;top:-1.15em;left:0; padding-right:12px;background:var(--panel);font-family:var(--serif);font-weight:700; font-size:1.45rem;line-height:1;color:var(--mark)} /* ---- sticky CTA: last in-flow child of
, not fixed ---------------- position:sticky keeps it a normal element that pins while main scrolls and settles above the footer. No JavaScript, nothing at opacity 0, and with CSS off it degrades to a plain link row at the end of the page. */ .stickycta{position:sticky;bottom:0;z-index:15;background:rgba(251,250,247,.94); backdrop-filter:saturate(160%) blur(8px);border-top:1px solid var(--rule-hard)} .stickycta .wrap{display:flex;align-items:center;justify-content:space-between; gap:18px;padding-top:13px;padding-bottom:13px} .stickycta p{margin:0;font-family:var(--mono);font-size:.85rem;color:var(--ink)} .stickycta .btn{--h:44px;--ico:20px;font-size:.95rem;white-space:nowrap} /* ---- .capture was used by _capture.html and defined NOWHERE ------------- Same defect class as .cols-3 and .secondary before the 2026-09-08 pass: it rendered acceptably by inheriting .tint, so nothing ever failed. */ .capture .inline-form{margin-top:var(--s5)} .capture h2{margin-bottom:var(--s3)} @media (max-width:1000px){ .instrument{grid-template-columns:1fr;gap:26px} .spec{grid-template-columns:1fr} } @media (max-width:820px){ .ladder{grid-template-columns:1fr;gap:0} .ladder li{margin-bottom:26px} .strip{grid-template-columns:1fr} .strip div{border-left:0;border-top:1px solid var(--rule);padding:14px 0} .strip div:first-child{border-top:0} .stickycta .wrap{flex-direction:column;align-items:stretch;gap:10px} .stickycta p{text-align:center} .stickycta .btn{text-align:center} } @media (max-width:520px){ /* No canvas below 520px at all (hero.js bails), so this is the SVG's size. The grain tile is a real paint cost on a low-end phone for no gain. */ .hero-band{height:clamp(92px,26vw,150px)} .hero-band::after{display:none} .hero-center h1{font-size:clamp(2.1rem,9vw,2.7rem);max-width:none} .qrail li{flex-basis:78vw} } /* Reduced motion gets the composed final state. The band needs no special case: hero.js never starts, so the static SVG simply stays. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ============================================================================ THE SCENE (home hero, 2026-09-10) The owner's ruling was "new look leads, old system follows behind", so the hero speaks the cool-white glass language of the concept frames and the page returns to warm paper from the terms strip down. Two visual systems on one page only reads as intentional if the SEAM IS DRAWN, so the handover is a hard horizontal edge at .terms, never a gradient fade. The motion is a 15-second video loop of the same picture with the clouds drifting (2026-09-11). No JavaScript in it, which matters because the client JS budget is already at 7.9KB of an 8KB ceiling. A reader with reduced motion, no video support or JavaScript off gets the still. ========================================================================== */ :root{ --scene:#EDF2F6; /* cool white ground taken from the frames */ --scene-ink:#101A24; --scene-edge:#D2DDE5; --amber:#B9791F; /* the audit-finding accent. Used on NOTHING else */ } /* overflow:CLIP, never hidden. hidden makes the section a scroll container, and every view() timeline inside it then measures against a box that never scrolls: the crossfade and the band pill sat at their fallback states for a whole evening while the captures looked plausible. */ section.hero.scene{background:var(--scene);border-bottom:0;overflow:clip; padding:clamp(34px,4vw,58px) 0 0} .scene .hero-center h1{color:var(--scene-ink); font-size:clamp(2.3rem,4.4vw,3.5rem);margin-bottom:.34em} /* Minimum is the body token, not a rem guess: 1.06rem computed to 16.96px. */ .scene .hero-center .lede{font-size:clamp(var(--fs-body),1.5vw,1.2rem)} .scene .hero-center .btns{margin-top:20px} /* Two ledes in a row need air between them, and the price line's left rule was built for a left-aligned hero: centred, it sat orphaned at the wrap edge 370px from its own text. Petrol marks a measured figure, and a price is not one, so the rule goes rather than moves. */ .scene-fig{margin:clamp(18px,2.6vw,32px) 0 0} /* The stack exists so the video is sized by the IMAGE box, never by the figure (positioned against .scene-fig, a layer once spanned a caption too and sat 14px out of register). The image is the picture for a reader with reduced motion, no video support or JavaScript off; the video sits exactly on top of it and only loads where motion is welcome, via the media attribute on each . */ .scene-stack{position:relative;display:block} .scene-stack picture{display:block} .scene-layer{display:block;width:100%;height:auto} .scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* The seam. Warm paper resumes here and does not go back. */ .terms{background:var(--paper);border-bottom:1px solid var(--line); border-top:1px solid var(--scene-edge)} .terms .strip{margin:0} /* The band's new home: the measurement section, where converging questions and a ranked answer are what the surrounding copy is actually about. */ section.rank{padding-bottom:0;overflow:clip} /* clip, not hidden: see .scene */ .rank .hero-band{margin-top:clamp(34px,5vw,58px)} @media (prefers-reduced-motion:reduce){ .scene-video{display:none} .btn,.btn::before,.btn::after{transition:none} /* the button block sits above the band, and the base rule must precede any reduce block */ } @media (max-width:720px){ .scene-fig{margin-top:22px} } /* ============================================================================ SCENE LEADS (2026-09-10, owner: "start with the hero image") The picture opens the page and its headline is the page's h1, set as real text straight on the sky, exactly where and how the owner's plate has it (2026-09-11: "there's a box around the text on the left. I don't like that. It should be the same as the versions that I already provided"). The plate has no box, so there is no box: no panel, no blur, no border. The plate is a clean render with no painted text, so nothing has to be hidden. Its headline is a sans, so the scene h1 is Public Sans, the site's own sans, under the standing ruling "new look leads, old system follows". Every offset is in vw because the image is full bleed at 1672:941, so the plate's text block lives at fixed fractions of the viewport width: x 5%, y 11.5vw to 21vw. No dependence on any container's height. ========================================================================== */ section.hero.scene{position:relative;padding-top:0} .scene-fig{margin-top:0} .scene-copy{position:absolute;z-index:2;left:5vw;top:9.6vw;width:36vw} .scene-copy h1{color:var(--scene-ink);font-family:var(--sans);font-weight:500; font-size:clamp(1.6rem,4.05vw,4.5rem);line-height:1.05;letter-spacing:-.03em; margin:0 0 .42em;max-width:none} /* Prose, so it never drops under the body token even at 900px. */ .scene-sub{color:#56677A;font-size:clamp(var(--fs-body),1.55vw,1.65rem); line-height:1.4;letter-spacing:-.005em;margin:0} /* The section you scroll to. Same cool ground as the scene, so the seam back to warm paper stays where it was: the terms strip. */ section.pitch{background:var(--scene);border-bottom:0; padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px)} @media (max-width:699px){ /* Below 700px there is not enough sky to the left of the glass for the headline. It goes in flow above the picture, and the picture crops to its right side, which is where the glass is. Square, so the glass fills a phone's width. (Was 900px; a laptop window narrower than that, or a zoomed page, is still wide enough for the plate's own layout.) */ section.hero.scene{padding-top:clamp(28px,5vw,40px)} .scene-copy{position:static;width:auto;max-width:var(--wrap);margin:0 auto; padding:0 24px 18px} .scene-copy h1{font-size:clamp(2rem,7.2vw,2.6rem);max-width:16ch} .scene-stack{aspect-ratio:1/1;overflow:clip} .scene-layer,.scene-video{height:100%;object-fit:cover;object-position:96% 50%} } /* ============================================================================ BAND LABELS (2026-09-10, owner: "give them a reason for being there") Words, never digits, real HTML: never painted into the canvas or the SVG. The static one names the scatter. The moving one is the company: it rides from the scatter, through the point, up onto the top rung and out to the crest. On a device with a mouse the READER drives it (owner, 2026-09-11): hero.js moves it along the same path under the pointer's x while the pointer is over the band, and eases it home to the crest when it leaves; the band then carries data-pill="js" and the scroll animation below is off. On touch, with reduced motion, or with no JavaScript it rides the scroll the band itself resolves on, with the same keyframes. Its resting place, and the only place it exists for a browser without scroll timelines, is the crest: rank one, furthest right. ========================================================================== */ .band-label{position:absolute;z-index:4;font-family:var(--mono);font-size:.74rem; line-height:1;letter-spacing:.01em;color:var(--mute);white-space:nowrap;pointer-events:none} .band-label-left{left:4%;bottom:10%} .band-label-node{left:calc(50% + var(--mx,0)*14px);top:calc(50% + var(--my,0)*-8px + 14px); transform:translateX(-50%);color:var(--ink);font-weight:500;padding:2px 7px; background:rgba(251,250,247,.82);border-radius:var(--r-pill)} .band-mark{left:90%;top:11%;transform:translate(-50%,-50%); display:inline-flex;align-items:center;gap:7px;color:var(--ink); background:rgba(251,250,247,.94);border:1px solid var(--rule-hard); border-radius:var(--r-pill);padding:6px 11px 6px 9px} /* The dot is the point, and the point is the logo mark: petrol on the point only. */ .band-mark::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mark);flex:none} @supports (animation-timeline:view()){ .band-mark{animation:bandMark linear both;animation-timeline:view(); animation-range:entry 15% cover 72%} } .hero-band[data-pill="js"] .band-mark{animation:none} @keyframes bandMark{ 0%{left:6%;top:50%} 46%{left:50%;top:50%} 54%{left:50%;top:50%} 70%{left:67%;top:30%} 84%{left:82%;top:11%} 100%{left:90%;top:11%} } @media (prefers-reduced-motion:reduce){ .band-mark{animation:none} } @media (max-width:519px){ .band-label{font-size:.62rem} .band-label-node{top:calc(50% + var(--my,0)*-8px + 8px)} .band-mark{padding:4px 8px 4px 7px;gap:5px} } /* ============================================================================ ETCHED GLASS (2026-09-11, owner: "incorporate a lot of" the Stitch exploration, keeping the hero, the buttons and the band as they are) Stitch read the hero plate's frosted browser slabs into a component system: a warm "dawn and mist" wash on the page ground, travertine ledges between sections instead of tinted bands, and cards as etched glass: a translucent white gradient, a white inner bevel, an ink-tinted shadow, and on hover a lift with a faint amber ring. Everything below is that system on the markup already here. Kept from the old rules: petrol only on measured figures (the scope quantities stay ink), the 17px prose floor, answers always visible, nothing animated in on scroll. Changed with the owner's ask: gradient washes on surfaces are now allowed here, and amber (already a token) may ring a card on hover. backdrop-filter is on the two large slabs only: over a near-flat ground the blur is invisible on the small ones and it costs a compositor layer each. ========================================================================== */ body{background: radial-gradient(1200px 500px at 85% 0%,rgba(245,218,185,.35) 0%,rgba(237,242,247,0) 70%), radial-gradient(1000px 600px at 15% 15%,rgba(224,233,242,.45) 0%,rgba(250,249,246,0) 75%), radial-gradient(1400px 800px at 50% 55%,rgba(246,235,222,.28) 0%,rgba(250,249,246,0) 70%), radial-gradient(1100px 600px at 90% 85%,rgba(220,230,240,.35) 0%,rgba(250,249,246,0) 80%), var(--paper)} section.tint{background:transparent} /* the ledge: a stone edge, a white highlight under it, a breath of shadow */ main>section:not(.hero):not(.pitch){border-bottom:0;border-top:1px solid rgba(215,206,194,.6); box-shadow:0 -1px 0 rgba(255,255,255,.9),0 2px 10px rgba(17,24,32,.02)} main>section.rank{box-shadow:none} .terms{border-bottom:0} /* the glass */ .slab,.card,.spec>div,.ladder li,.faq>div,.limits,.instrument{ background:linear-gradient(135deg,rgba(255,255,255,.76) 0%,rgba(248,250,252,.58) 100%); border:1px solid rgba(255,255,255,.85);border-right-color:rgba(255,255,255,.65); border-bottom-color:rgba(255,255,255,.5); box-shadow:inset 0 1.5px 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px 0 rgba(17,24,32,.04), inset 1.5px 0 1.5px 0 rgba(255,255,255,.6),0 8px 32px -4px rgba(17,24,32,.06), 0 2px 8px -2px rgba(17,24,32,.03); border-radius:14px; transition:box-shadow .35s var(--ease),transform .35s var(--ease)} /* Hover only where a pointer can hover (mobile pass, 2026-09-11): on a touch screen :hover sticks to whatever was last tapped, so a card would stay lifted and ringed after a scroll-tap. Identical on every desktop. */ @media (hover:hover){ .slab:hover,.card:hover,.spec>div:hover,.ladder li:hover,.faq>div:hover{ box-shadow:inset 0 1.5px 1px 0 #fff,0 0 0 1.5px rgba(185,121,31,.55), 0 16px 42px -8px rgba(17,24,32,.12),0 0 24px rgba(185,121,31,.22); transform:translateY(-2px)} } .slab-lg{border-radius:18px;padding:clamp(26px,3.6vw,40px); backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)} .slab-lg:hover{transform:none} /* nested cells: the frosted panes inside the big slab */ .slab-lg .card{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(17,24,32,.03);border-radius:12px} @media (hover:hover){ .slab-lg .card:hover{background:rgba(255,255,255,.88);border-color:rgba(185,121,31,.4); box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(14,74,82,.08);transform:none} } /* the browser chrome: three dots and an etched line, the plate's window frame */ .chrome{display:flex;gap:8px;padding-bottom:18px;margin-bottom:22px; border-bottom:1px solid rgba(17,24,32,.05);box-shadow:0 1px 0 rgba(255,255,255,.75)} .chrome span{width:12px;height:12px;border-radius:50%;background:rgba(207,203,194,.8); border:1px solid #fff} .slab-lg h2{margin-top:0} .slab-lg .cols-3{margin-top:28px} .slab-foot{margin:26px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.75); box-shadow:0 -1px 0 rgba(17,24,32,.05)} /* the scope grid and the price slab beside it */ .spec-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:clamp(20px,3vw,32px);align-items:start;margin-top:var(--s6)} .spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:0} .spec>div{display:block;padding:22px 24px 24px;border-top:1px solid rgba(255,255,255,.85)} .spec .qty{display:block;text-align:left;min-width:0;font-size:2.6rem;margin:0 0 10px; letter-spacing:-.02em} .price{position:sticky;top:96px;padding:26px 26px 24px;border-top:2px solid rgba(185,121,31,.8); font:var(--fs-body)/1.6 var(--sans);color:var(--body)} /* an