:root{--navy:#101e2b;--navy-2:#172b3d;--cream:#f7f6f2;--ink:#172634;--muted:#586570;--orange:#fc8a4c;--line:#d9ddd9;--white:#fff;--max:1240px;--brass:var(--orange)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--cream);font:16px/1.65 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ba5019;outline-offset:6px}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.07;letter-spacing:-.055em}h1,h2{font-weight:500}h2{font-size:clamp(36px,4.2vw,58px);margin-bottom:28px}h3{font-size:25px}h2 em,h1 em{font-family:Georgia,serif;font-weight:400}p{margin-bottom:20px}.wrap{max-width:var(--max);margin:auto;width:calc(100% - 96px)}.section{padding:105px 0}.eyebrow,.micro{font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;font-weight:600}.eyebrow{color:#bac8d1;margin-bottom:27px}.dark-label{color:#536573}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:18px 25px;background:var(--orange);color:var(--navy);border-radius:4px;font-size:15px;font-weight:700;transition:background .2s,transform .2s}.button:hover{background:#ffa570;transform:translateY(-2px);text-decoration:none}.button span{font-size:22px}.under-link{display:inline-flex;gap:25px;border-bottom:1px solid var(--ink);padding-bottom:6px;font-size:14px;font-weight:700}.skip{position:absolute;top:-100px;z-index:100;background:white;padding:15px}.skip:focus{top:0}
header{background:var(--navy);color:#f4f6f7;border-bottom:1px solid #ffffff1c;position:relative;z-index:10}.nav{height:90px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{font-weight:700;font-size:23px;letter-spacing:-1px;white-space:nowrap;display:inline-flex;align-items:baseline}.brand>span:not(.mark):not(.brand-dot){color:var(--orange)}.brand-dot{color:var(--orange);font-size:33px;line-height:1}.mark{display:flex;align-items:end;gap:3px;width:25px;height:23px;margin-right:12px;transform:skewY(-14deg)}.mark i{width:6px;background:var(--orange);height:10px}.mark i:nth-child(2){height:17px}.mark i:nth-child(3){height:24px}header nav{display:flex;gap:30px;font-size:13px;color:#c2cbd2}.nav-cta{border:1px solid #64707a;border-radius:4px;padding:10px 17px;display:flex;gap:26px;font-size:13px}.menu{display:none}.hero{background:var(--navy);color:white;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:45px;align-items:center;padding-top:74px;padding-bottom:60px}.hero h1{font-size:clamp(65px,7.2vw,100px);letter-spacing:-.065em;line-height:.98;margin-bottom:30px}.hero h1 em{color:var(--orange)}.hero .eyebrow{font-size:10px;display:flex;align-items:center;gap:10px;margin-bottom:27px}.status-dot,.small-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0}.intro{font-size:17px;line-height:1.8;color:#c4cfd7;max-width:450px}.actions{display:flex;align-items:center;gap:30px;margin-top:30px}.text-link{font-size:13px}.text-link span{margin-left:12px}.hero-location{font-size:11px;color:#a4b3bf;margin-top:25px;margin-bottom:0}.hero-foot{display:flex;gap:45px;border-top:1px solid #ffffff20;padding:23px 0;color:#aabac7;font:10px/1.5 ui-monospace,monospace;letter-spacing:.13em}.hero-foot a{margin-left:auto;letter-spacing:0;color:#dce3e8}.hero-foot a span{margin-left:22px}
.flow-visual{height:510px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 55% 48%,#2d4354 0%,#142534 58%,#101e2b 80%);border-radius:8px}.flow-top{position:absolute;left:24px;right:18px;top:16px;display:flex;justify-content:space-between}.flow-top .eyebrow{font-size:9px}.flow-index{font:10px ui-monospace,monospace;color:#8b9dab}.orbit{position:absolute;border:1px solid #91a8b319;border-radius:50%;z-index:-1;transform:rotate(-25deg)}.orbit-one{width:520px;height:310px;left:-10px;top:85px}.orbit-two{width:370px;height:490px;left:80px;top:0;transform:rotate(40deg)}.flow-axis{position:absolute;top:85px;bottom:95px;left:50%;width:1px;background:linear-gradient(#f38b4b00,#f38b4b,#f38b4b00)}.flow-node{display:flex;align-items:center;gap:16px;position:absolute;background:#1d3040;border:1px solid #8eabb338;border-radius:7px;padding:22px 20px;box-shadow:0 18px 38px #0003;width:365px}.node-one{top:76px;left:0;transform:rotate(-3deg)}.node-two{top:213px;right:0;background:#f0eee7;color:var(--navy);z-index:2;transform:rotate(2deg);box-shadow:0 22px 48px #0005}.node-three{bottom:42px;left:22px;transform:rotate(-2deg)}.node-icon{display:grid;place-items:center;width:41px;height:44px;background:#ffffff0b;border:1px solid #ffffff14;color:var(--orange);font-size:26px;flex-shrink:0}.node-two .node-icon{background:#ecd9c6;border-color:#d8c6b9;color:#853912}.flow-node .micro{font-size:8px;color:#b7c3cd;letter-spacing:.12em}.node-two .micro{color:#655c50}.flow-node h3{font-size:18px;letter-spacing:-.035em;margin:6px 0}.flow-node p{font-size:10px;color:#bac6ce;margin:0}.node-two p{color:#59636a}.node-tick{margin-left:auto;font-size:12px;color:#acc1b6}.node-two .node-tick{color:#476752}.flow-bottom{position:absolute;bottom:0;left:28px;right:0;display:flex;align-items:center;gap:8px;font-size:10px;color:#c5d0d9}.example{margin-left:auto;font-size:9px;color:#a1b2bf}.small-dot{width:4px;height:4px}
.proof{background:#eceee8;border-bottom:1px solid var(--line);padding:60px 0}.proof-grid{display:grid;grid-template-columns:.8fr 1.3fr .8fr;gap:50px;align-items:center}.big-number{font-size:128px;line-height:.9;letter-spacing:-.09em;font-weight:500}.big-number span{display:block;font-size:15px;letter-spacing:0;margin-top:19px}.proof .eyebrow{font-size:9px;margin-bottom:20px}.client-label{font:9px ui-monospace,monospace;letter-spacing:.1em;color:#596965;margin-bottom:15px}.proof h2{font-size:32px;margin-bottom:15px}.proof-copy>p:not(.client-label){font-size:13px;line-height:1.8}.proof .under-link{font-size:11px}.proof-list{border-left:1px solid #ccd3cb;padding-left:30px;font-size:12px}.proof-list span{display:block;padding:13px 0;border-bottom:1px solid #d4dad3}.proof-list span:last-child{border:0}.section-head{display:flex;justify-content:space-between;gap:50px;margin-bottom:42px;align-items:end}.section-head h2{margin-bottom:0}.section-head>p{max-width:355px;color:var(--muted);font-size:15px;margin-bottom:5px}.section-head .eyebrow{margin-bottom:20px}.system-explorer{display:grid;grid-template-columns:1fr 1.12fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.step-buttons{padding:28px 45px 28px 0;display:flex;flex-direction:column;justify-content:center}.step{display:flex;gap:24px;align-items:center;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:26px 6px;color:#657078}.step:last-child{border-bottom:0}.step strong{font-size:17px;font-weight:500;letter-spacing:-.03em}.step>span{font:10px ui-monospace,monospace}.step b{margin-left:auto;font-size:19px;font-weight:400}.step.active{color:var(--ink)}.step.active>span{color:#a74613}.step.active b{background:var(--orange);border-radius:50%;width:28px;height:28px;text-align:center}.step-panel{background:#e9ede9;padding:42px 40px;min-height:333px;display:flex;flex-direction:column;justify-content:center}.step-panel>.micro{color:#5e6f65;font-size:9px}.step-panel h3{font-size:30px;font-weight:500;line-height:1.18;margin:16px 0}.step-panel p{font-size:13px;max-width:390px;color:#53605a}.route{display:flex;align-items:center;gap:12px;margin-top:12px}.route span{font:10px ui-monospace,monospace;border:1px solid #cad3ca;border-radius:4px;padding:9px;background:#f5f6f1}.route i{font-style:normal;color:#7a847c}.step-panel .panel-note{font-size:10px;color:#5b6a60;margin:17px 0 0}.capabilities{display:flex;justify-content:space-between;gap:30px;padding-top:28px;align-items:center;font-size:11px}.capabilities p{margin:0;color:var(--muted)}.capabilities p>span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;color:var(--ink)}.capabilities .under-link{font-size:11px;white-space:nowrap}
.research{background:#e9e9e1;padding:64px 0}.research-grid{display:grid;grid-template-columns:1fr 1.4fr;column-gap:80px}.research h2{font-size:36px}.research p{font-size:13px;color:#526159;max-width:340px}.research-findings{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}.research-findings strong{font-size:80px;letter-spacing:-.07em;font-weight:400}.research-findings strong span{font-size:25px;color:#617167;margin-left:8px;letter-spacing:-.04em}.research-findings p{max-width:230px}.research .eyebrow{font-size:9px}.research-detail{grid-column:1/-1;border-top:1px solid #cdd2c9;margin-top:15px}.research-detail summary{font-size:12px;padding:18px 0}.research-detail p{max-width:850px}.research-caveat{grid-column:1/-1;max-width:none!important;font-size:10px!important;margin:0}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.founder-art{height:430px;position:relative;background:#dce2dd;padding:28px;overflow:hidden}.founder-art .eyebrow{color:#40544d;font-size:9px;position:relative;z-index:2}.initials{font-size:190px;letter-spacing:-.11em;line-height:1.3;font-weight:500;position:relative;z-index:2}.initials span{color:#a95027}.founder-name{position:absolute;bottom:25px;font-size:20px;line-height:1.5;z-index:2}.founder-name span{display:block;font-size:11px;color:#52645b}.art-lines{position:absolute;right:-80px;top:0;width:270px;height:100%;transform:skewX(-26deg);display:flex;gap:23px}.art-lines i{width:50px;height:100%;background:#c3cec5}.art-lines i:nth-child(2){background:#aabfb0}.art-lines i:nth-child(3){background:#88a290}.about h2{font-size:46px}.about-copy>p:not(.eyebrow){font-size:15px;color:var(--muted)}.about .under-link{margin-top:12px}.training{background:var(--navy);color:#f2f3ef}.training-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px}.training h2{font-size:43px}.training p:not(.eyebrow){font-size:14px;color:#b9c6cf;max-width:470px}.training-close{border-left:2px solid var(--orange);padding-left:20px;margin-top:30px}.asks{padding:0;margin:0;list-style:none;counter-reset:questions}.asks li{counter-increment:questions;padding:25px 0;border-bottom:1px solid #ffffff24;font-size:21px;line-height:1.45;letter-spacing:-.025em;position:relative;padding-left:35px}.asks li:before{content:'0' counter(questions);position:absolute;left:0;top:30px;color:var(--orange);font:9px ui-monospace,monospace}.asks li:first-child{padding-top:0}.asks li:first-child:before{top:5px}.pricing .section-head{margin-bottom:45px}.oftwo{display:grid;grid-template-columns:1fr 1fr;border:1px solid #c9d0cd;border-radius:7px;overflow:hidden}.ofcard{padding:36px 40px;background:#eeefe9}.ofcard.rent{background:#fff;border-left:1px solid #c9d0cd}.tag{text-transform:uppercase;font:10px ui-monospace,monospace;letter-spacing:.12em;color:#4e6055;margin-bottom:30px}.amt{font-size:64px;line-height:1;letter-spacing:-.06em;margin-bottom:25px}.amt small{font-size:13px;letter-spacing:0;margin-left:15px;color:#53665c}.wh{font-size:16px;line-height:1.55;min-height:50px}.ofcard ul{list-style:none;padding:0;margin:25px 0}.ofcard li{font-size:13px;line-height:1.65;margin:13px 0;padding-left:21px;position:relative}.ofcard li:before{content:'✓';position:absolute;left:0;color:#617769}.kp{font-size:12px;line-height:1.8;border-top:1px solid #cad2cb;padding-top:22px;margin-bottom:0;color:#495c50}.usage{padding:28px 0 8px;font-size:12px}.usage .lbl2{font-size:13px;font-weight:700}.usage ul{padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-bottom:20px}.usage li b{display:block;font-size:10px;color:#55655e;margin-bottom:7px;text-transform:uppercase;letter-spacing:.04em}.usage>p:last-child{color:var(--muted)}.scope-note{border-top:1px solid var(--line);padding-top:25px;font-size:13px;margin:0;color:#4c5e53}
.details-section{padding:70px 0 95px;border-top:1px solid var(--line)}.detail-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.detail-grid h2{font-size:42px}.detail-grid>div>p:not(.eyebrow){font-size:13px;color:var(--muted)}.boundary{font-size:11px!important;border-left:2px solid #aaa;padding-left:17px;margin-top:30px}details{border-bottom:1px solid var(--line)}summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;list-style:none;font-size:15px;padding:22px 0;font-weight:500}summary::-webkit-details-marker{display:none}summary span{font-size:20px;font-weight:400}details[open] summary span{transform:rotate(45deg)}.accordions details:first-child{border-top:1px solid var(--line)}.accordions p{font-size:13px;color:var(--muted)}.accordions h3{font-size:17px;letter-spacing:-.02em}.do{position:relative;padding:10px 0 5px 30px}.do .num{position:absolute;left:0;font-size:10px;color:#6b7d6f}.do h3{margin-bottom:8px}.tw{font-size:12px;font-weight:bold}.tl{border-bottom:1px solid var(--line);padding:8px 0}.tl p{margin:5px 0}.contact{background:var(--navy);color:#fff;padding:90px 0}.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:60px}.contact h2{font-size:65px}.contact h2 em{color:var(--orange)}.contact p:not(.eyebrow){font-size:14px;max-width:440px;color:#bac7d0}.contact-actions{display:flex;align-items:start;flex-direction:column;gap:12px}.contact-actions .button{min-width:250px;margin-bottom:15px}.contact-actions>a:not(.button){font-size:14px}.contact-actions .calculator{margin-top:20px;color:#bac7d0;font-size:12px!important}footer{background:var(--navy);color:#bdc8d1}.footer-top{border-top:1px solid #ffffff24;padding:35px 0;display:flex;justify-content:space-between;gap:35px;align-items:center}.footer-top p{font-size:11px;margin:0}.footer-top nav{display:flex;gap:20px;font-size:10px}.footer-top .brand{color:#f0f4f6}.footer-bottom{padding:20px 0;border-top:1px solid #ffffff15;display:flex;justify-content:space-between;font:9px ui-monospace,monospace;letter-spacing:.04em;color:#a6b7c4}
@media(min-width:1500px){.hero-grid{gap:95px}}@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero-grid{gap:25px}.flow-node{width:315px;padding:20px 15px;gap:12px}.flow-node h3{font-size:16px}.flow-node p{font-size:9px}.hero h1{font-size:80px}.proof-grid{gap:30px}.proof-list{padding-left:20px}.about-grid,.training-grid{gap:55px}.section-head>p{max-width:300px}header nav{gap:18px}.nav{gap:18px}.hero .eyebrow{font-size:9px}.contact h2{font-size:56px}.research-grid{column-gap:45px}}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.nav{height:76px;gap:20px}.brand{font-size:21px}.mark{display:none}.nav-cta{margin-left:auto;font-size:11px;gap:15px}.menu{display:block;order:3;background:none;border:0;color:white;padding:8px;font-size:12px}.menu span{margin-left:8px}.nav nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--navy);padding:20px;flex-direction:column;border-top:1px solid #ffffff25;box-shadow:0 20px 25px #0003}.nav nav.open{display:flex}.hero-grid{grid-template-columns:1fr;gap:30px;padding-top:45px;padding-bottom:35px}.hero h1{font-size:clamp(65px,12vw,93px)}.intro{max-width:510px}.hero-copy{max-width:620px}.flow-visual{max-width:530px;width:100%;margin:auto;height:440px}.flow-node{width:350px}.node-one{top:60px;left:2%}.node-two{top:180px;right:2%}.node-three{bottom:45px;left:8%}.flow-node h3{font-size:18px}.flow-node p{font-size:10px}.orbit-one{width:100%;height:270px}.orbit-two{width:70%;height:400px}.flow-top{top:5px;left:12px}.hero-foot{gap:25px}.hero-foot a{display:none}.proof{padding:45px 0}.proof-grid{grid-template-columns:.65fr 1fr;gap:25px}.proof-list{display:none}.big-number{font-size:106px}.proof-copy>p:not(.client-label){font-size:12px}.proof h2{font-size:28px}.proof .eyebrow{font-size:8px}.section{padding:65px 0}.section-head{align-items:start;flex-direction:column;gap:25px}.section-head>p{max-width:550px}.system-explorer{grid-template-columns:1fr}.step-buttons{padding:10px 0}.step{padding:17px 4px}.step-panel{padding:30px;min-height:300px}.capabilities{align-items:start;flex-direction:column;gap:17px}.research-grid{grid-template-columns:1fr;gap:15px}.research-findings{gap:30px}.research-findings strong{font-size:70px}.research p{max-width:520px}.research-findings p{max-width:260px}.research h2 br{display:none}.about-grid{grid-template-columns:.7fr 1fr;gap:30px}.founder-art{height:380px;padding:20px}.initials{font-size:125px;line-height:1.6}.about h2{font-size:36px}.about-copy>p:not(.eyebrow){font-size:13px}.training-grid{grid-template-columns:1fr;gap:35px}.training h2{font-size:38px}.asks li{font-size:20px}.ofcard{padding:28px 24px}.amt{font-size:48px}.amt small{font-size:10px;margin-left:8px}.usage ul{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr;gap:30px}.contact-grid{grid-template-columns:1fr;gap:25px}.contact h2{font-size:55px}.contact{padding:65px 0}.footer-top{flex-wrap:wrap;justify-content:start}.footer-top nav{width:100%}.footer-bottom{gap:20px;font-size:8px}}
@media(max-width:480px){.hero h1{font-size:68px}.hero .eyebrow{font-size:8px;letter-spacing:.12em}.actions{gap:22px}.actions .button{padding:15px 20px;gap:22px;font-size:13px}.text-link{font-size:11px}.hero-location{font-size:9px}.intro{font-size:15px}.flow-visual{height:423px}.flow-node{width:290px;padding:18px 14px;gap:12px}.flow-node h3{font-size:16px}.flow-node p{font-size:9px}.node-icon{width:34px;height:38px;font-size:23px}.node-one{left:0;top:60px}.node-two{right:0;top:174px}.node-three{left:3%;bottom:44px}.flow-bottom{left:10px;font-size:9px}.example{font-size:8px}.hero-foot{font-size:8px;gap:24px}.proof-grid{grid-template-columns:1fr;gap:30px}.proof-grid>div:first-child{display:flex;align-items:center;justify-content:space-between}.proof .eyebrow{max-width:100px;font-size:9px;line-height:1.9}.big-number{font-size:100px;display:flex;align-items:end;gap:15px}.big-number span{font-size:12px;line-height:2}.proof h2 br{display:none}.proof-copy>p:not(.client-label){font-size:13px}.proof h2{font-size:33px}.research-findings strong{font-size:65px}.research-findings strong span{font-size:20px}.research-findings p{font-size:12px}.about-grid{grid-template-columns:1fr}.founder-art{height:280px}.initials{font-size:133px;line-height:1.1}.founder-name{right:25px;bottom:22px}.art-lines{right:20px}.about h2{font-size:38px}.oftwo{grid-template-columns:1fr}.ofcard.rent{border-left:0;border-top:1px solid #c9d0cd}.amt{font-size:64px}.amt small{font-size:13px}.wh{min-height:0}.route{gap:8px}.route span{font-size:9px;padding:8px 6px}.step-panel{padding:25px 20px}.contact h2{font-size:47px}.footer-bottom{flex-direction:column;gap:10px}.nav-cta{padding:8px 11px}.nav-cta span{display:none}.nav{gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media(max-width:480px){.hero h1{font-size:58px}.hero-grid{padding-top:38px}.hero .eyebrow{margin-bottom:22px}}
#step-title{white-space:pre-line}
@media(max-width:800px){.menu,.nav-cta{min-height:44px}.menu{min-width:54px}}
@media(max-width:480px){.flow-node{width:min(290px,calc(100% - 10px))}}
/* ---- legacy token aliases: old names, new palette ------------------------
Every rule inherited from the previous stylesheet reads these. Re-pointing
them here re-skins all of it at once. Do not delete one without checking
what still reads it. */
:root{
--paper:var(--cream); /* page ground */
--card:var(--white);
--raised:#eceee8; /* the alternating band the new design uses */
--body:var(--ink); /* body copy is the same ink now */
--mute:var(--muted);
--brass:var(--orange); /* the accent, everywhere */
--brass-soft:#fdeee4;
--brass-line:#f0b68e;
--rust:#a74613; /* the darker orange, for text on cream */
--rust-soft:#fbe7dc;
--ok:#2f6b4f; --ok-soft:#e2eee8;
--deep:var(--navy); /* the dark sections */
--deep-ink:#f2f3ef;
--deep-mute:#b9c6cf;
--r:6px;
}
/* ---- legacy components, re-skinned through the aliases above ---------- */
*{box-sizing:border-box}
/* An inline display: beats the browser's own rule for [hidden], so an element
hidden by attribute and laid out with inline flex renders anyway. Declaring
it here is the fix; it bit the QR pane, which opened on page load. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
h2{font-size:clamp(27px,3.7vw,40px)}
h3{font-size:21px;letter-spacing:-.018em}
p{margin:0 0 18px}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
outline:3px solid var(--brass);outline-offset:3px}
img{max-width:100%;height:auto}
.narrow{max-width:760px}
/* mono labels carry the report voice */
.lbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
letter-spacing:.19em;text-transform:uppercase;font-weight:600;color:var(--brass)}
.serif{font-family:Fraunces,Georgia,serif;font-style:italic}
/* NOT inline-flex. Flex turns "Fix", Trust and "Pro" into three
separate items, so any gap spaces the wordmark out as "Fix Trust Pro" and
letter-spacing stops applying across the joins. Plain inline keeps the text
one run and the svg just sits in it.
The mark is INLINE svg so it inherits var(--ink)/var(--brass) and follows the
theme. An ![]()
would render it with no vars resolved, i.e. invisible. */
.brand .bmark{width:30px;height:30px;vertical-align:-7px;margin-right:9px;overflow:visible}
.brand span{color:var(--brass)}
.brand:hover{text-decoration:none}
.btn{display:inline-block;background:var(--brass);color:var(--navy);font-family:Archivo,sans-serif;
font-weight:700;font-size:17px;padding:16px 28px;border-radius:11px;border:0;cursor:pointer;
text-align:center;line-height:1.25}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn.big{font-size:19px;padding:19px 34px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
section{padding:72px 0}
section.tight{padding:48px 0}
.deep{background:var(--deep);color:var(--deep-ink)}
.deep h1,.deep h2,.deep h3{color:var(--deep-ink)}
.deep .lbl{color:var(--brass-line)}
.deep p{color:var(--deep-mute)}
.deep .btn.ghost{color:var(--deep-ink);border-color:#3d4c57}
/* hero */
.hero{padding:78px 0 60px}
.hero .kick{margin-bottom:20px}
.hero p.lede{font-size:21px;line-height:1.55;max-width:640px;margin-top:22px;color:var(--body)}
/* the finding: his own scan, set like data */
.finds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:34px}
.find{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.find .n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
font-size:38px;font-weight:600;line-height:1;color:var(--rust);letter-spacing:-.03em}
.find .n small{font-size:18px;color:var(--mute);font-weight:500}
.find p{margin:11px 0 0;font-size:15.5px;line-height:1.45;color:var(--body)}
.src{font-size:13.5px;color:var(--mute);margin-top:18px;line-height:1.5}
/* list of what gets installed */
/* 2x2 on purpose: auto-fit put three across and left the fourth card
stranded on its own row, which reads as a mistake. */
.does{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
@media(min-width:720px){.does{grid-template-columns:repeat(2,1fr)}}
.do{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.do h3{margin-bottom:9px}
.do p{margin:0;font-size:16px;color:var(--body)}
.do .num{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--brass);
font-weight:600;letter-spacing:.1em;display:block;margin-bottom:12px}
/* the honest limits block: this is the credibility move, keep it blunt */
.not{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.not ul{margin:0;padding-left:22px}
.not li{margin-bottom:11px;font-size:17px}
.not li:last-child{margin-bottom:0}
/* price */
.price{background:var(--card);border:2px solid var(--brass-line);border-radius:18px;padding:36px}
.price .fig{display:flex;gap:36px;flex-wrap:wrap;align-items:flex-end;margin:6px 0 22px}
.price .amt{font-family:Archivo,sans-serif;font-weight:900;font-size:52px;letter-spacing:-.04em;
color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.price .amt small{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;
letter-spacing:.15em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-top:9px}
/* the offer is two things. rent on the left, own on the right. */
/* align-items is stated EXPLICITLY. The global .two rule further down sets
align-items:start, and when this block was called .two that leaked in and
left the two cards at different heights. Renamed AND stated. */
.price .oftwo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 24px;
align-items:stretch}
.price .ofcard{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--paper)}
.price .ofcard.own{border:2px solid var(--brass-line);background:var(--brass-soft)}
.price .tag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;font-weight:600;color:var(--mute);margin:0 0 10px}
.price .ofcard.own .tag{color:var(--brass)}
.price .ofcard .amt{font-size:44px}
.price .ofcard .amt small{margin-top:7px}
.price .wh{font-size:16.5px;color:var(--ink);font-weight:600;margin:14px 0 10px}
.price .ofcard ul{margin:0;padding-left:18px}
/* 🔴 25 Sep 2026, amended 30 Sep 2026.
The setup column ran about twice the height of the monthly column, leaving a
tall empty block. The four closing paragraphs were never specific to it
anyway: the AI limit, the capability note, the acceptance checks and the
ownership statement apply to the whole offer. They live in a shared band
under the cards.
🔴 THIS FILE IS SERVED PUBLICLY as /assets/site.css, comments included. The
original note here quoted the withdrawn Upgrade prices and was still being
downloaded by every visitor after the tier came off the site. Do not write a
price into a comment in this file. */
/* ⚠️ UNPREFIXED ON PURPOSE. The homepage pricing section carries design.css's
`pricing` class, not this file's legacy `price`, so every `.price .x` rule in
this file is DEAD on that page. design.css loads first and this file after,
so an unprefixed selector at equal specificity wins. The first version of
these two rules was written `.price .amt-pair` and silently did nothing. */
.amt-pair{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start}
.amt-pair .amt{margin-bottom:14px}
/* The Standard column runs longer than the monthly one because it lists the
whole build. Giving it more width shortens it and shrinks the empty block
beside the monthly card. */
.oftwo{grid-template-columns:1.18fr .82fr}
@media (max-width:480px){.oftwo{grid-template-columns:1fr}}
.terms-band{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}
.terms-band .lbl2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);margin:0 0 14px}
.terms-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.terms-grid p{font-size:12.5px;line-height:1.8;color:#495c50;margin:0 0 12px}
@media (max-width:720px){.terms-grid{grid-template-columns:1fr;gap:18px}
.price .amt-pair{gap:24px}}
.price .ofcard li{font-size:14.5px;line-height:1.5;margin-bottom:7px;color:var(--body)}
.price .kp{font-size:14px;line-height:1.55;color:var(--mute);margin:14px 0 0;
padding-top:13px;border-top:1px solid var(--line)}
.price .usage{border:1px dashed var(--line);border-radius:12px;padding:18px 20px;margin:22px 0}
.price .lbl2{font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 10px}
.price .usage ul{margin:0;padding-left:18px}
.price .usage li{font-size:14.5px;line-height:1.6;color:var(--body)}
.price .usage li b{color:var(--ink);font-weight:600}
@media (max-width:720px){.price .oftwo{grid-template-columns:1fr;gap:14px}
.price .ofcard .amt{font-size:38px}.price{padding:24px}}
/* card: the two-price split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 0}
.split>div{border:1px solid var(--line);border-radius:11px;padding:13px}
.split>div.o{border:2px solid var(--brass-line);background:var(--brass-soft)}
.split .p{font-family:Archivo,sans-serif;font-weight:900;font-size:27px;color:var(--ink);
letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.split .u{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
text-transform:uppercase;color:var(--mute);margin-left:6px}
.split .t{display:block;font-size:13.5px;line-height:1.45;color:var(--body);margin-top:8px}
@media (max-width:460px){.split{grid-template-columns:1fr}}
/* scope + risk grids, and the timeline. All three exist because a $10,000
decision needs "what do I get", "how long" and "what if it fails" answered
before the buyer has to ask. */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sgrid .si,.sgrid .rk{border:1px solid var(--line);border-radius:13px;padding:19px 20px;background:var(--card)}
.sgrid .rk{border-color:var(--brass-line)}
.sgrid h4{font-family:Archivo,sans-serif;font-weight:800;font-size:16.5px;margin:0 0 7px;color:var(--ink)}
.sgrid p{margin:0;font-size:15px;line-height:1.5;color:var(--body)}
.tlist{display:grid;gap:2px}
.tl{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:15px 0;border-top:1px solid var(--line)}
.tl:first-child{border-top:0}
.tw{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--brass);font-weight:600;padding-top:3px}
.tl p{margin:0;font-size:16px;line-height:1.5}
@media (max-width:720px){.sgrid{grid-template-columns:1fr}
.tl{grid-template-columns:1fr;gap:5px}}
.scope{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:18.5px;
line-height:1.45;color:var(--brass);margin:0 0 16px}
/* the A2P opt-in form. The consent block is deliberately visually distinct:
a reviewer should be able to find it in one glance, and so should a customer. */
.optin{display:grid;gap:15px;max-width:560px}
.optin label{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.optin .opt{font-weight:400;color:var(--mute);font-size:13.5px}
.optin input[type=text],.optin input[type=email],.optin input[type=tel],.optin textarea{
width:100%;margin-top:7px;padding:12px 13px;border:1.5px solid var(--line);border-radius:11px;
background:var(--card);color:var(--ink);font:400 16px/1.45 inherit}
.optin input:focus,.optin textarea:focus{outline:2.5px solid var(--brass);outline-offset:1px}
.optin .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{border:1.5px solid var(--brass-line);background:var(--brass-soft);border-radius:12px;padding:16px}
.consent .cb{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:14.5px;line-height:1.5}
.consent .cb input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--brass)}
.consent .fine{margin:11px 0 0;font-size:13px;line-height:1.55;color:var(--mute)}
.optin button{justify-self:start}
.asks{margin:0;padding:0;list-style:none}
.asks li{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:21px;line-height:1.4;
color:var(--ink);padding:13px 0 13px 22px;border-left:3px solid var(--brass-line);margin-bottom:9px}
@media (max-width:720px){.asks li{font-size:18px}}
.stage{display:inline-block;font-family:"IBM Plex Mono",monospace;font-style:normal;
font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
color:var(--brass);background:var(--brass-soft);border:1px solid var(--brass-line);
border-radius:100px;padding:3px 9px;margin-left:8px;vertical-align:3px}
/* proof: the outcome line. Deliberately louder than the feature list above it,
because "what it changed" is the thing a $10k buyer is actually reading for. */
.outcome{margin:16px 0 0;padding:15px 17px;border-radius:12px;background:var(--ok-soft);
border:1px solid var(--ok);font-size:16.5px;line-height:1.5;color:var(--ink)}
.outcome b{color:var(--ok)}
/* proof */
.proof-list{margin:0;padding:0;list-style:none}
.proof-list li{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line);font-size:16.5px}
.proof-list li:first-child{border-top:0}
.proof-list .tick{color:var(--brass);flex:none;font-weight:700}
/* score tool */
.tool{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px}
.fld{margin-bottom:20px}
.fld label{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:16px;
color:var(--ink);margin-bottom:5px}
.fld .hint{font-size:14px;color:var(--mute);margin-bottom:9px;line-height:1.45}
.fld input,.fld select{width:100%;padding:15px 16px;border:1.5px solid var(--line);border-radius:11px;
background:var(--paper);color:var(--ink);font:500 18px Archivo,sans-serif;
font-variant-numeric:tabular-nums}
.out{margin-top:8px;border-radius:16px;overflow:hidden;border:2px solid var(--rust)}
.out .top{background:var(--rust-soft);padding:28px}
.out .big{font-family:Archivo,sans-serif;font-weight:900;font-size:clamp(38px,7vw,60px);
color:var(--rust);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.out .cap{font-size:16px;color:var(--body);margin-top:12px}
.out .work{background:var(--card);padding:24px 28px;font-family:"IBM Plex Mono",monospace;
font-size:14px;line-height:1.85;color:var(--mute);font-variant-numeric:tabular-nums}
.out .work b{color:var(--ink);font-weight:600}
.honest{background:var(--raised);border-left:3px solid var(--brass);padding:18px 22px;
border-radius:0 11px 11px 0;margin-top:20px;font-size:16px}
/* faq */
details{border-bottom:1px solid var(--line);padding:20px 0}
details summary{font-family:Archivo,sans-serif;font-weight:700;font-size:18.5px;color:var(--ink);
cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--brass);font-weight:700;flex:none;font-size:24px;line-height:1}
details[open] summary::after{content:"\2013"}
details .a{padding-top:13px;max-width:70ch}
details .a p:last-child{margin-bottom:0}
.quote{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:clamp(21px,3vw,29px);
line-height:1.42;color:var(--ink);max-width:22ch}
.two{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
footer a{color:var(--deep-ink)}
footer h4{color:var(--deep-ink);font-size:14px;margin-bottom:14px;letter-spacing:0}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer .fine{margin-top:36px;padding-top:22px;border-top:1px solid #ffffff24;font-size:13.5px;line-height:1.7}
/* Hard breaks that read well at desktop width strand one or two words on a
phone. These are hints: honoured when there is room, ignored when there is
not. The break between the scene and the question is NOT one of these,
because that pause is the whole line. */
@media(max-width:700px){ br.bp{display:none} }
/* Screens of the real software. Framed like a window so a flat screenshot
reads as an application rather than a picture pasted onto the page. */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.shot{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.shot .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--raised);
border-bottom:1px solid var(--line)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.shot img{display:block;width:100%;height:auto;border:0}
.shot p{margin:0;padding:15px 18px;font-size:15px;line-height:1.5;color:var(--body)}
@media(max-width:820px){.shots{grid-template-columns:1fr}}
.brainwrap{position:relative;border:1px solid var(--line);border-radius:16px;
background:var(--card);overflow:hidden;margin-top:8px}
.brainwrap canvas{display:block;width:100%;height:auto}
.brainstat{display:flex;gap:26px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--line);
background:var(--raised)}
.brainstat div{font-family:"IBM Plex Mono",monospace}
.brainstat b{display:block;font-family:Archivo,sans-serif;font-weight:900;font-size:26px;
color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.brainstat span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);
font-weight:600}
.brainkey{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--mute)}
.brainkey i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
/* The voice exchanges. Shaped like a message thread because that is literally
what it is: you talk, it answers. */
.vx{margin-top:8px}
.vrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
padding:16px 0;border-top:1px solid var(--line)}
.vrow:first-child{border-top:0}
.vsay{background:var(--brass-soft);border:1px solid var(--brass-line);border-radius:14px 14px 14px 4px;
padding:14px 17px;font-size:16.5px;line-height:1.45;color:var(--ink)}
.vsay b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--brass);margin-bottom:7px;font-weight:600}
.vdid{padding:14px 4px;font-size:16px;line-height:1.5;color:var(--body)}
.vdid b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--mute);margin-bottom:7px;font-weight:600}
@media(max-width:720px){.vrow{grid-template-columns:1fr;gap:8px}.vdid{padding:2px 4px 0}}
@media(max-width:860px){
.two{grid-template-columns:1fr;gap:32px}
footer .fgrid{grid-template-columns:1fr;gap:28px}
nav.top{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:10px}
nav.top.open{display:flex}
nav.top a{padding:13px 12px;border-radius:10px}
.menu{display:block}
.bar{flex-wrap:wrap}
section{padding:54px 0}
.price .fig{gap:26px}
.btn{width:100%}
.cta-row{flex-direction:column}
}
.ofcard.entry{border:2px solid var(--brass-line); background:var(--brass-soft);
margin-bottom:22px}
.ofcard.entry .tag{color:var(--rust)}
.ofcard.entry .amt-pair{display:flex; gap:26px; flex-wrap:wrap}
@media(max-width:640px){.ofcard.entry .amt-pair{gap:14px}}
.halves,.floorgrid,.limgrid{display:grid;gap:18px;margin:20px 0 4px;align-items:stretch}
.halves{grid-template-columns:1fr 1fr}
.floorgrid,.limgrid{grid-template-columns:1fr 1fr}
.half,.fl,.lim{border:1px solid var(--line);border-radius:14px;padding:22px 24px;
background:var(--paper)}
.half .tag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--rust);margin:0 0 8px}
.half h3,.fl h3,.lim h3{font-size:1.06rem;line-height:1.3;margin:0 0 7px}
.half p:last-child,.fl p:last-child,.lim p:last-child{margin:0;color:var(--muted)}
.lim{background:var(--card)}
.lim h3{color:var(--rust)}
.floorgrid .fl:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:760px){
.halves,.floorgrid,.limgrid{grid-template-columns:1fr}
.floorgrid .fl:last-child:nth-child(odd){grid-column:auto}
}
footer nav{flex-wrap:wrap; row-gap:12px}
@media(max-width:720px){
footer .footer-top nav{gap:12px 18px}
footer .footer-top nav a{padding:2px 0}
}
.hero h1{font-size:clamp(36px,3.7vw,52px); line-height:1.08}
@media(max-width:700px){ .hero h1{font-size:clamp(32px,7.4vw,40px); line-height:1.12} }
.hero-explorer{align-self:start; padding-top:8px}
.hx-head{font-size:clamp(24px,2.1vw,30px); line-height:1.15; margin:0 0 18px; color:var(--deep-ink)}
.hero-explorer .system-explorer{display:block}
.hero-explorer .step-buttons{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.hero-explorer .step-panel{background:var(--cream); color:var(--ink); border-radius:12px;
padding:20px 22px}
.hero-explorer .step-panel h3{font-size:clamp(19px,1.5vw,23px); line-height:1.2; margin:6px 0 9px}
.hero-explorer .step-panel p{font-size:14px; line-height:1.6; margin:0}
.hero-explorer .panel-note{margin:12px 0 0; font-size:12px; color:var(--muted)}
/* 🔴 The explorer was built for a LIGHT section and now sits on navy. Its own
colours came through unchanged: the step labels computed at 1.10:1 against
rgb(16,30,43), which is invisible. Exactly the "Start here" failure again,
one section over. Light text on dark, orange for the selected state. */
.hero-explorer .step{padding:13px 4px; border-bottom:1px solid rgba(255,255,255,.14)}
.hero-explorer .step strong{color:var(--deep-ink); font-size:15px}
.hero-explorer .step span{color:var(--deep-mute)}
.hero-explorer .step.active strong{color:var(--white)}
.hero-explorer .step.active span{color:var(--orange)}
.hero-explorer .step b{color:var(--deep-mute)}
/* The active step already gets an ORANGE FILLED CIRCLE from the original
design. Setting the glyph orange too made the arrow invisible on its own
background. Dark glyph on the orange dot. */
.hero-explorer .step.active b{color:var(--navy)}
.hero-explorer .step:hover strong{color:var(--white)}
.hero-explorer .route span{color:var(--ink)}
.context.section .ctx-lead{max-width:62ch; margin:0 0 18px}
@media(max-width:800px){
/* Codex: headline, intro, actions, THEN the explorer. */
.hero .hero-grid{display:flex; flex-direction:column}
.hero .hero-copy{order:1}
.hero-explorer{order:2}
.hx-head{font-size:24px}
}
.showcase-band{overflow-x:clip}
.showcase-band .atelier{max-width:1100px; margin-inline:auto}
/* ---- motion ------------------------------------------------------------ */
/* Hide-to-reveal is scoped under .js, which is set by an inline script at the
top of the page. So the default state is VISIBLE: no JavaScript, a blocked
script, or a syntax error anywhere on the page all leave the content on
screen. Hiding by default and revealing with script means one bad line makes
half the page permanently invisible, which is far worse than no animation. */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none;transition:none}}
.clockwrap{display:flex;justify-content:center;align-items:center;padding:6px 0 0}
.clock{width:min(300px,74vw);height:auto;overflow:visible}
.clock .track{fill:none;stroke:var(--line);stroke-width:13}
.clock .cov{fill:none;stroke:var(--brass);stroke-width:13;stroke-linecap:butt}
.clock .gap{fill:none;stroke:var(--rust);stroke-width:13;stroke-linecap:butt}
.clock text{font-family:"IBM Plex Mono",monospace;font-weight:600}
.clock .hr{font-size:9px;fill:var(--mute)}
.clock .big{font-size:23px;fill:var(--ink);font-family:Archivo,sans-serif;font-weight:900}
.clock .cap{font-size:8.5px;fill:var(--mute);letter-spacing:.13em}
.legend{display:flex;gap:18px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mute)}
.legend i{width:11px;height:11px;border-radius:3px;display:block}
/* the day, revealed on scroll */
.day{border-left:2px solid var(--line);margin-top:26px;padding-left:0}
.mo{position:relative;padding:0 0 34px 26px}
.js .mo{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .mo.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .mo{opacity:1;transform:none;transition:none}}
.mo:last-child{padding-bottom:4px}
.mo::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;
border-radius:50%;background:var(--brass);border:2px solid var(--paper);transition:background .4s}
.js .mo::before{background:var(--line)}
.js .mo.in::before{background:var(--brass)}
.mo .t{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
color:var(--brass);font-weight:600}
.mo h3{margin:7px 0 10px;font-size:20px}
.mo .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mo .box{border-radius:11px;padding:15px 16px;font-size:15px;line-height:1.5}
.mo .no{background:var(--rust-soft);border:1px solid var(--rust)}
.mo .no b{color:var(--rust)}
.mo .yes{background:var(--ok-soft);border:1px solid var(--ok)}
.mo .yes b{color:var(--ok)}
@media(max-width:720px){.mo .pair{grid-template-columns:1fr}}
/* ============ SEPT 30 2026: the sales-floor route and the homepage dialer card.
Every colour here is an existing token or one of the on-navy literals already
used by design.css for the header and hero (#c2cbd2, #aabac7, #ffffff20).
🔴 The last band added to this site was written against --accent / --ink-2,
which do not exist on this stylesheet, so every declaration died silently and
the text shipped at 1.08:1. Tokens used below were checked against theme.CSS. */
/* the compact route under the nav, on navy, homepage only */
/* The shortest headline on the site was set at the size of a two-line one, so
at 1440px it filled about a third of the width and left half the screen empty.
A four-word declarative headline in a narrow hero wants to be bigger, not the
same. Scoped to this one h1 so no other hero moves. */
.hero h1.floorhead{font-size:clamp(44px,6.2vw,86px);line-height:1.02;letter-spacing:-.035em}
@media(max-width:700px){.hero h1.floorhead{font-size:clamp(38px,10vw,54px);line-height:1.06}}
/* 🔴 HOMEPAGE HERO ALIGNMENT, 1 Oct 2026. Codex's live review, measured.
design.css sets .hero-grid{align-items:center}. The two columns are very
different heights (copy 422px, explorer 655px), so centring the short one
left 446px of empty navy above the headline on an 800px screen, put the
explorer heading 117px ABOVE the h1, and pushed the explorer panel below the
fold. Columns now share a top edge and the composition rises.
FIXES loads after DESIGN, so this wins at equal specificity.
⚠️ Do NOT put this in hero_showcase.py: that module's style block is not
emitted on the homepage any more. See its header. */
.hero-grid{align-items:start;padding-top:48px;padding-bottom:52px}
/* TWO paddings were stacking: .hero carries 78px top for the NARROW heroes
(/sales-teams, /proof, /start), and .hero-grid adds its own on the homepage.
126px of navy before the first word. Only the grid hero loses it, so the
narrow heroes keep the breathing room they are designed around. */
.hero:has(> .hero-grid){padding-top:0}
@media(max-width:820px){.hero-grid{align-items:stretch;padding-top:34px}}
/* Conversational AI sample, 1 Oct 2026. Codex brief. No audio exists, so the
lines reveal on a timer and nothing plays sound.
🔴 ACCESSIBILITY: the whole transcript is in the DOM at all times. Turns are
dimmed, never display:none, so a screen reader and a no-JS visitor get the
complete conversation without pressing anything. */
.aisample .aslede{font-size:17px;line-height:1.7;color:var(--body);max-width:56ch;margin:14px 0 0}
.asplayer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0 20px}
.asbtn{font:600 15px/1 Archivo,system-ui,sans-serif;padding:14px 22px;border-radius:10px;
border:2px solid var(--orange);background:transparent;color:var(--ink);cursor:pointer}
.asbtn:hover{background:var(--orange)}
.asnote{font-size:12px;line-height:1.5;color:var(--muted);margin:0;max-width:42ch}
.astranscript{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
/* 🔴 0.28 gave a 1.77 contrast ratio. Before anyone presses the button the
WHOLE transcript sat there unreadable, which is worse than not dimming at
all. 0.68 measures 5.1 against this cream, clearing the 4.5 minimum, and the
step up to full opacity still clearly marks the current line. Measured, not
guessed: 0.6 is 4.09 and fails. */
.turn{padding:11px 0 11px 18px;margin:0;opacity:.68;transition:opacity .35s ease}
.turn.on{opacity:1}
.turn.on p{font-weight:500}
.turn .who{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px}
.turn.ai .who{color:var(--orange)}
.turn p{margin:0;font-size:16px;line-height:1.6;color:var(--ink);max-width:54ch}
.asfoot{display:flex;gap:20px;margin-top:16px}
.aslink{background:none;border:0;padding:0;font:500 13px/1 Archivo,system-ui,sans-serif;
color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line)}
.aslimit{font-size:13px;line-height:1.6;color:var(--muted);margin-top:18px;max-width:58ch}
/* With JS off, or reduced motion, every line is simply readable. */
.no-js .turn,.astranscript.all .turn{opacity:1}
@media(prefers-reduced-motion:reduce){.turn{transition:none}}
@media(max-width:700px){.asplayer{gap:12px}.asbtn{width:100%}}
.floor-route{background:var(--navy);border-top:1px solid #ffffff1c;
border-bottom:1px solid #ffffff20}
.floor-route .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:11px 0;font-size:13px;line-height:1.4}
.floor-route span{color:#c2cbd2}
.floor-route a{color:var(--orange);font-weight:500;text-decoration:none;
border-bottom:1px solid color-mix(in srgb,var(--orange) 45%,transparent);
padding-bottom:1px}
.floor-route a:hover{border-bottom-color:var(--orange)}
.floor-route a b{font-weight:400;margin-left:6px}
/* the dialer card, on the light page body between the hero and contractor detail */
.floor-card{background:var(--raised);border-bottom:1px solid var(--line);
padding-top:64px;padding-bottom:64px}
.floor-grid{display:grid;grid-template-columns:1fr .82fr;gap:44px;align-items:center}
.floor-copy h2{font-size:clamp(30px,3.1vw,44px);letter-spacing:-.03em;line-height:1.05;
margin:14px 0 18px;color:var(--ink)}
.floor-copy h2 em{color:var(--orange);font-style:normal}
.floor-copy > p:not(.eyebrow){font-size:17px;line-height:1.7;color:var(--body);
max-width:52ch;margin:0}
.floor-copy .actions{margin-top:26px}
.floor-price{border-left:3px solid var(--orange);padding:4px 0 4px 22px}
.floor-num{font-size:clamp(19px,1.7vw,23px);line-height:1.35;font-weight:700;
letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.floor-note{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
@media (max-width:820px){
.floor-grid{grid-template-columns:1fr;gap:28px}
.floor-price{border-left:0;border-top:3px solid var(--orange);padding:18px 0 0}
.floor-route .wrap{padding:10px 0;font-size:12.5px}
}
/* ---- rebuild patches --------------------------------------------------- */
/* .lede is the sentence under an h1. On the navy page headers it was ink on
navy and completely unreadable. It inherits on dark, and stays muted on
cream. Found on /about, present on every interior page. */
/* .hero p.lede in the legacy sheet is (0,2,1) and beat a (0,2,0) selector,
so this matches its shape exactly. Specificity, not order, was the bug. */
.deep p.lede,.hero p.lede,.deep .lede,.hero .lede{color:#c4cfd7}
.lede{font-size:19px;line-height:1.65;color:var(--muted);max-width:60ch}
/* 🔴 The mono eyebrow. Aliasing --brass to the bright orange put it at 2.2:1
on cream, which fails AA badly. On LIGHT it uses the deep burnt orange; on
the navy bands it keeps the bright one, where bright is the readable choice.
Measured in the browser, not eyeballed. */
.lbl,.lbl2{color:var(--rust)}
.deep .lbl,.hero .lbl,.training .lbl,.contact .lbl,footer .lbl{color:var(--orange)}
/* the legacy accent used for small print on dark bands */
.deep a{color:#f4f6f7}
.deep .fine,.deep .src{color:#9fb0bd}
/* the value comparison under the two offer cards */
.comps{border-top:1px solid var(--line);margin-top:34px;padding-top:26px}
.comps-note{font-size:13px;color:var(--muted);max-width:60ch;margin-bottom:18px}
.complist{list-style:none;padding:0;margin:0 0 18px}
/* The dollar column is gone, so the space-between layout that held it is gone
too: a name stretched across 1180px with a rule under it is a price row with
the price missing. This is a list of inclusions now. */
.complist{max-width:660px}
.complist li{display:block;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.complist li:last-child{border-bottom:0}
.complist b{font-weight:500;white-space:nowrap;color:var(--muted)}
.complist.mo{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.comptotal{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
font-size:30px;letter-spacing:-.04em;margin:18px 0}
.comptotal span{font:10px ui-monospace,monospace;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted)}
.comptotal span:last-of-type{margin-left:18px;color:var(--rust)}
.comps-src{font-size:11px;color:var(--muted);margin:0;max-width:70ch}
@media(max-width:480px){.comptotal{font-size:24px}.complist li{font-size:12px}}
/* ---- the ask at the price, and after the training questions -------------
Codex's conversion pass, 15 Sep 2026. Measured before writing: four
consecutive sections asked for nothing, including the two where a buyer is
actually deciding. These are the two asks that were added, not a button on
every section.
🔴 .training p:not(.eyebrow) is (0,2,0) and caps body copy at 470px in a
muted blue. The ask's paragraph rules match that specificity and sit later
in the composed sheet, which is the only reason they win. */
.priceask{border-top:1px solid var(--line);margin-top:30px;padding-top:30px;max-width:660px}
.priceask h3{font-size:26px;letter-spacing:-.03em;margin-bottom:14px}
.priceask p{font-size:14px;line-height:1.7;color:var(--muted);max-width:58ch}
.priceask .button{margin-top:4px}
.priceask .askfine{font-size:12px;line-height:1.65;margin:20px 0 0;color:#4c5e53}
.priceask.onnavy{border-top-color:#ffffff24;margin-top:55px;padding-top:34px}
.training .priceask h3{color:#f2f3ef}
.training .priceask p{color:#b9c6cf;max-width:58ch}
/* 🔴 THE THREE TRAINING QUESTIONS WERE AT 1.10:1 ON THE NAVY BAND.
Measured in the browser, 15 Sep 2026. The legacy rule sets
color:var(--ink), which the aliases now point at near-navy, so the strongest
moment on the page was ink on navy and effectively invisible. Exactly the
wordmark bug and the .lede bug again: a variable-based legacy rule landing on
a dark section, which no hardcoded-colour check can find.
The legacy left border is dropped with it: design.css places the counter at
left:0 and the border sat underneath it. Padding returns to the 35px the
counter needs. The serif italic is LEFT ALONE deliberately: it is a design
choice, not a defect, and it is Codex's to make. .asks appears on one page in
one section, so scoping to .training costs nothing. */
.training .asks li{color:#f2f3ef;border-left:0;padding-left:35px}
/* 🔴 "Since August 2026" WAS PRINTING ON TOP OF THE CARD HEADINGS on /proof.
Two stylesheets both claim .do and the composition produced what neither
intended. design.css styles .do as a NUMBERED STEP: position:relative with
.do .num absolutely placed at left:0 inside a 30px gutter. The legacy sheet
comes later and overrides the padding to 26px of card padding, but not the
positioning, so .num stayed absolute at left:0 with no gutter reserved.
Two characters ("01") fit in 26px, which is why every numbered use looks fine
and why this was never caught. "Since August 2026" is about 90px wide and
lands straight on the h3.
The /proof label is not a step number, so it no longer borrows the class that
says it is. It reads as the eyebrow it always was. Every numeric .num use is
untouched. */
.do .since{display:block;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;
letter-spacing:.11em;text-transform:uppercase;color:var(--rust);margin-bottom:9px}
/* The calculator's entry point, inside pricing and deliberately subordinate to
the Talk with Ian button above it. Codex's placement call: a useful choice at
the cost decision, without making the tool a prerequisite for talking, and
without a fifth nav item or a competing hero button. */
.numbersfirst{border-top:1px solid var(--line);margin-top:26px;padding-top:22px;max-width:58ch}
.numbersfirst h4{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.numbersfirst p{font-size:13px;line-height:1.65;color:var(--muted);margin-bottom:12px}
.numbersfirst a{font-size:13px;font-weight:700;color:var(--rust);
border-bottom:1px solid var(--brass-line);padding-bottom:3px}
.numbersfirst a:hover{text-decoration:none;border-bottom-color:var(--rust)}
/* the email invitation beside the mailto in the close */
/* 🔴 .contact p:not(.eyebrow) is (0,2,1), because :not() counts its argument.
A (0,2,0) selector loses to it no matter how late it sits, which is the same
trap .hero p.lede sprang during the rebuild. Match the shape, do not reorder. */
.contact-actions p.mailnote{font-size:12px;line-height:1.6;color:#9fb0bd;
margin:16px 0 0;max-width:34ch}
/* /score: the closing invitation above the actions */
.scoreask{font-size:16px;line-height:1.7;max-width:62ch;margin:30px 0 18px;color:var(--body)}
/* ---- /websites ------------------------------------------------------------ */
.web-hero .wrap.narrow{max-width:860px}
.web-hero h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.045em;line-height:1.02;margin-bottom:24px}
.web-hero .web-sub{color:#c4cfd7;font-size:16px;line-height:1.7;max-width:60ch}
.web-from{display:flex;flex-wrap:wrap;gap:10px 26px;margin:28px 0 30px;
font:600 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.web-from span{border-top:1px solid #3d4c57;padding-top:10px}
.web-src{display:inline-flex;gap:6px;margin:6px 18px 0 0;font:600 11px/1.5 "IBM Plex Mono",ui-monospace,monospace;
letter-spacing:.06em;color:var(--rust);text-decoration:none;border-bottom:1px solid var(--line)}
.web-src:hover{border-bottom-color:var(--rust)}
.web-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--line);padding-top:34px}
.web-why-grid h3,.web-std h3,.web-terms h3{font-size:17px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.web-why-grid p,.web-std p,.web-terms p{font-size:15px;line-height:1.7;color:var(--muted)}
.web-limit{border-left:3px solid var(--orange);padding-left:14px;color:var(--ink)!important}
.web-standard{background:var(--raised)}
.web-std-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.web-std{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:26px 24px}
.web-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.web-tier,.web-care-card{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:30px 26px;
display:flex;flex-direction:column}
.web-tag{font:600 11px/1.5 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase;
color:var(--rust);margin-bottom:14px}
.web-amt{font-family:Archivo,Arial,sans-serif;font-weight:900;font-size:50px;line-height:1;letter-spacing:-.04em;
color:var(--ink);margin:0 0 22px;font-variant-numeric:tabular-nums}
.web-amt small{font:500 13px/1 Arial,sans-serif;letter-spacing:0;color:var(--muted);margin-left:8px}
.web-tier dl{margin:0;flex:1}
.web-tier dl div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.web-tier dt{font:600 11px/1.6 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.web-tier dd{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.web-flag{margin:18px 0 0;padding:10px 12px;background:var(--rust-soft);color:var(--rust);border-radius:4px;
font:600 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.web-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:40px;
border-top:1px solid var(--line);padding-top:30px}
.web-proof .section-head{align-items:start}
.web-proof .section-head>p{color:#c4cfd7;max-width:520px;font-size:16px;line-height:1.7}
.web-proof h2{color:var(--deep-ink)}
.web-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #3d4c57}
.web-stat{padding:30px 28px 10px 0}
.web-stat+.web-stat{padding-left:28px;border-left:1px solid #3d4c57}
.web-stat-n{display:block;font-family:Archivo,Arial,sans-serif;font-weight:900;font-size:clamp(64px,8vw,104px);
line-height:.95;letter-spacing:-.05em;color:var(--orange);font-variant-numeric:tabular-nums}
.web-stat p{color:#c4cfd7;font-size:15px;line-height:1.6;margin-top:14px;max-width:30ch}
.web-proof-note{margin-top:34px;font:500 12px/1.7 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;color:#9fb0bd}
.web-proof-note a{color:#f4f6f7}
.web-care{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.web-care-card p:last-child{font-size:15px;line-height:1.7;color:var(--muted);margin:0}
.web-review{margin-top:24px;font-size:14px;line-height:1.7;color:var(--muted);max-width:70ch}
.web-tuneup{background:var(--raised)}
.web-tuneup-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:60px;align-items:start}
.web-tuneup-grid h2{margin-bottom:26px}
.web-intro{display:inline-block;margin:-6px 0 0;padding:8px 12px;background:var(--rust-soft);color:var(--rust);border-radius:4px;font:600 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.web-tu-copy p{font-size:16px;line-height:1.75;color:var(--ink)}
.web-tuneup-grid .button{margin-top:10px}
.web-faq h2{margin-bottom:24px}
.web-close{margin-top:46px;border-top:1px solid var(--line);padding-top:32px}
.web-close p{color:var(--muted);max-width:58ch}
@media(max-width:900px){
.web-why-grid,.web-std-grid,.web-tiers,.web-care,.web-terms,.web-tuneup-grid{grid-template-columns:1fr}
.web-why-grid,.web-tuneup-grid{gap:30px}
.web-stats{grid-template-columns:1fr}
.web-stat,.web-stat+.web-stat{padding:24px 0 6px;border-left:0}
.web-stat+.web-stat{border-top:1px solid #3d4c57}
}
@media(max-width:480px){
.web-amt{font-size:42px}
.web-tier,.web-care-card,.web-std{padding:24px 20px}
.web-tier dl div{grid-template-columns:80px 1fr}
}
.offer-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.offer-comparison .ofcard{margin:0;min-width:0}
.offer-comparison h3{font-size:clamp(24px,3vw,32px);line-height:1.15}
.offer-price{font-size:18px;line-height:1.6}
.offer-details{margin-top:24px;border-block:1px solid var(--line);padding:20px 0}
.offer-details>summary{cursor:pointer;font-weight:700;padding:8px 0}
.offer-details>summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.offer-details[open]>summary{margin-bottom:24px}
@media(max-width:700px){.offer-comparison{grid-template-columns:1fr}}
@media print{.offer-details::details-content{display:block}}
.floor-capabilities{padding:30px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.floor-capabilities h3{font-size:clamp(25px,3vw,34px);line-height:1.15;margin:12px 0 20px}
.floor-capabilities ul{padding-left:20px;margin-bottom:24px}
.floor-capabilities li{margin-bottom:14px;line-height:1.6}
.call-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:30px}
.call-path-grid article{border-top:2px solid var(--line);padding-top:22px;min-width:0}
.call-path-grid h3{font-size:25px;line-height:1.2;margin:14px 0}
.call-path-grid p{line-height:1.65}
.call-path .panel-note{margin-top:24px}
#capabilities,#pricing{scroll-margin-top:100px}
@media(max-width:760px){.call-path-grid{grid-template-columns:1fr}.floor-capabilities{padding:24px}}