/* Hyper public website: shared page components. Builds on the tokens in layout.css. */

/* ---------- Section scaffolding ---------- */
.s{padding:clamp(64px,8vw,104px) 0}
.s.tight{padding:clamp(48px,6vw,76px) 0}
.s.alt{background:var(--paper);border-block:1px solid var(--line)}
.s.dark{background:var(--ink);color:#fff}
.sHead{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.sHead h2{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.035em;line-height:1.06}
.sHead p:not(.tag){color:var(--mut2);font-size:clamp(16px,1.25vw,18px);line-height:1.7;margin:16px 0 0;max-width:640px}
.sHead.split{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,5vw,72px);align-items:end}
.sHead.split>p:not(.tag),.sHead.split>div>p:not(.tag){margin:0}
.sHead.flush{margin-bottom:0}
.s.dark .sHead p:not(.tag){color:#cfcabc}
.s.dark em{color:var(--acc)}
.tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.s.dark .tag{color:#fff}
.lead,.heroLead{font-size:clamp(16px,1.3vw,18.5px);line-height:1.7;color:var(--mut2);margin:0 0 26px;max-width:560px}
.sectionLink{margin:28px 0 0}

/* ---------- Heroes: shared ---------- */
.hero{position:relative;padding:clamp(44px,6vw,84px) 0 clamp(52px,6vw,84px);overflow:hidden}
.hero h1{font-size:clamp(38px,5.1vw,66px);line-height:1.03;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.hero h1 em{font-weight:500}
.heroActions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.proofList{list-style:none;margin:30px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;font-size:14.5px;font-weight:500}
.proofList li{display:flex;align-items:flex-start;gap:10px}
.proofList .ico{color:var(--accDeep);margin-top:2px}

/* Home: copy on the left, the orbit on the right */
.heroHome .heroGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.heroHome h1{max-width:620px}
.heroHome .heroLead{margin-top:22px}

/* Features: headline with a module directory */
.heroIndex .heroGrid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:start}
.moduleIndex{list-style:none;margin:6px 0 0;padding:0;border-top:1.5px solid var(--ink);counter-reset:none}
.moduleIndex a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);transition:background-color .18s,padding .18s var(--ease)}
.moduleIndex a:hover{background:var(--paper);padding-left:12px}
.moduleIndex b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.moduleIndex span{grid-column:1;font-size:14px;color:var(--mut2);line-height:1.5}
.moduleIndex .ico{grid-column:2;grid-row:1/3;color:var(--accDeep);transition:transform .18s var(--ease)}
.moduleIndex a:hover .ico{transform:translateY(2px)}

/* How it works: headline above a five stage journey rail */
.heroJourney h1{max-width:900px}
.heroJourney .heroTop{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);align-items:end}
.journey{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.journey::before{content:"";position:absolute;left:20px;right:calc(20% - 20px);top:19px;height:2px;background:var(--line)}
.journey li{position:relative;padding:0 18px 0 0}
.journey a{display:block}
.journeyDot{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink);font:600 16px Fraunces,Georgia,serif;transition:background-color .18s,color .18s}
.journey a:hover .journeyDot{background:var(--ink);color:#fff}
.journey small{display:block;margin:16px 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accDeep)}
.journey b{display:block;font-size:18px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.journey p{margin:0;font-size:14px;line-height:1.6;color:var(--mut2)}

/* Time savings: headline with the calculation as a typographic statement */
.heroFormula .heroGrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.formula{margin:0 10px 10px 0;padding:clamp(22px,3vw,32px);background:var(--ink);color:#fff;border-radius:14px;box-shadow:10px 10px 0 var(--acc)}
.formula figcaption{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#cfcabc;margin-bottom:18px}
.formulaRow{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;font:500 clamp(20px,2.3vw,28px)/1.25 Fraunces,Georgia,serif}
.formulaRow span{color:#cfcabc;font-family:Roboto,Arial,sans-serif;font-size:.62em}
.formulaRow b{font-weight:600}
.formulaRow .hl{color:var(--acc)}
.formulaRule{height:1px;background:var(--lineDark);margin:20px 0}
.formulaNote{margin:0;font-size:13.5px;line-height:1.6;color:#b9b4a6}

/* Plain pages (privacy, search, not found) */
.heroPlain{padding-bottom:clamp(28px,4vw,48px)}
.heroPlain h1{font-size:clamp(34px,4.4vw,56px);max-width:820px}
.heroPlain .heroLead{margin-top:18px}

/* ---------- Home hero orbit ---------- */
.orbit{position:relative;margin:0 auto;width:min(100%,560px);container-type:inline-size}
.orbitStage{position:relative;width:100%;aspect-ratio:1/1}
.orbitRings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbitRings circle{fill:none;vector-effect:non-scaling-stroke}
.orbitRings .rOuter{stroke:var(--ink);stroke-opacity:.28;stroke-width:1.25}
.orbitRings .rInner{stroke:var(--ink);stroke-opacity:.38;stroke-width:1.25}
.orbitRings .rFaint{stroke:var(--ink);stroke-opacity:.12;stroke-width:1;stroke-dasharray:2 5}
.orbitSpin,.orbitSweep{position:absolute;inset:0}
.orbitSpin{animation:orbitCw 120s linear infinite}
.orbitItem{position:absolute;left:50%;top:50%;width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw;transform:rotate(var(--a)) translateY(-25cqw) rotate(calc(var(--a) * -1))}
.orbitItemBody{display:grid;justify-items:center;align-content:center;gap:1.2cqw;width:100%;height:100%;animation:orbitCcw 120s linear infinite}
.orbitLogo{display:grid;place-items:center;width:10.5cqw;height:10.5cqw;max-width:56px;max-height:56px;border-radius:50%;background:var(--bg);color:var(--ink)}
.orbitLogo .ico{width:6.2cqw;height:6.2cqw;max-width:30px;max-height:30px}
.orbitLogo .ico:not(.solid){stroke-width:1.6}
.orbitItem small{font-size:clamp(10px,2.25cqw,12.5px);font-weight:600;letter-spacing:.02em;color:var(--mut2);white-space:nowrap;background:var(--bg);padding:0 .35em;border-radius:3px}
.orbitCore{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:23cqw;height:23cqw;margin:-11.5cqw 0 0 -11.5cqw;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);box-shadow:0 0 0 1.4cqw var(--bg),0 0 0 calc(1.4cqw + 1px) var(--line)}
.orbitCore .logo{font-size:clamp(17px,5cqw,28px)}
.orbitCore .logoDot{width:1.5cqw;height:1.5cqw;max-width:9px;max-height:9px}
.orbitSweep{animation:orbitCcw 36s linear infinite}
.orbitSweep i{position:absolute;left:50%;top:calc(50% - 40cqw);width:2.6cqw;height:2.6cqw;max-width:14px;max-height:14px;margin:-1.3cqw 0 0 -1.3cqw;border-radius:50%;background:var(--acc);box-shadow:0 0 0 .9cqw rgba(212,166,63,.22)}
.orbitLabels{list-style:none;margin:0;padding:0}
.orbitLabels li{position:absolute;transform:translate(-50%,-50%);padding:.35em .7em;border-radius:99px;background:var(--bg);font-size:clamp(11.5px,2.75cqw,15px);font-weight:600;letter-spacing:-.005em;line-height:1.2;white-space:nowrap;color:var(--ink);animation:orbitLit 36s linear infinite;animation-delay:var(--d)}
@keyframes orbitCw{to{transform:rotate(360deg)}}
@keyframes orbitCcw{to{transform:rotate(-360deg)}}
@keyframes orbitLit{0%,8.5%,100%{color:var(--ink);background-color:var(--bg)}3%,5.5%{color:var(--ink);background-color:var(--accSoft)}}
.orbitStage:hover *,.orbit.isPaused .orbitStage *,.orbit.isOffscreen .orbitStage *{animation-play-state:paused}
.orbitToggle{position:relative;display:flex;width:max-content;margin:10px 0 0 auto;align-items:center;gap:6px;padding:6px 10px;border:1.5px solid var(--line);border-radius:99px;background:var(--paper);font-size:12.5px;font-weight:600;color:var(--mut2);transition:border-color .18s,color .18s}
.orbitToggle:hover{border-color:var(--ink);color:var(--ink)}
.orbitToggle .ico{width:14px;height:14px}
.orbitToggle [data-when=paused],.orbit.isPaused .orbitToggle [data-when=running]{display:none}
.orbit.isPaused .orbitToggle [data-when=paused]{display:inline-flex}
.orbitToggle span{display:inline-flex;align-items:center;gap:6px}
.orbitNote{margin:10px 0 0;font-size:12.5px;color:var(--mut);text-align:center}
@media(prefers-reduced-motion:reduce){.orbitSpin,.orbitItemBody,.orbitSweep,.orbitLabels li{animation:none!important}.orbitToggle{display:none}}

/* ---------- Product illustration (mock interface) ---------- */
.mock{background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;box-shadow:8px 8px 0 var(--line);overflow:hidden}
.mockBar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--ink);color:#fff;font-size:12.5px}
.mockBar b{font-weight:600}
.sampleTag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#e9dcb8;white-space:nowrap}
.sampleTag i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.mockBody{padding:18px}
.mockRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.mockRow:first-child{border-top:0;padding-top:0}
.mockRow span{color:var(--mut2)}
.mockRow b{font-weight:600;text-align:right}
.mockField{padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--bg);margin-bottom:8px}
.mockField small{display:block;font-size:11px;color:var(--mut)}
.mockField b{font-size:13.5px;font-weight:600}
.mockBtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mockBtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1.5px solid var(--ink);border-radius:6px;font-size:12.5px;font-weight:700;background:transparent}
.mockBtn.gold{background:var(--acc)}
.mockStages{display:grid;gap:6px;margin:4px 0 12px}
.mockStage{display:flex;align-items:center;gap:8px;font-size:13px}
.mockStage i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-style:normal;font-size:10.5px;font-weight:700;background:var(--accSoft);color:var(--accDeep);flex:none}
.mockStage.cur i{background:var(--ink);color:#fff}
.mockStage.todo i{background:var(--line);color:var(--mut)}

/* Status pills: meaning is always in the text; colour only supports it */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.pill.ok{background:var(--ink);color:#fff}
.pill.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.pill.warn{background:var(--warnBg);color:var(--warnInk)}
.pill.info{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.pill.n{background:var(--sand);color:var(--mut2)}

/* ---------- Grids and cards ---------- */
.grid2,.grid3,.grid4{display:grid;gap:20px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);padding:24px;box-shadow:5px 5px 0 var(--ink)}
.card h3{font-size:19px;line-height:1.25;letter-spacing:-.02em;margin:0}
.card p{margin:0;color:var(--mut2);font-size:15px;line-height:1.65}
.card .cardLink{margin-top:auto;padding-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;border-bottom:2px solid var(--acc);transition:border-color .18s}
.card .cardLink:hover{border-color:var(--ink)}
.card.flat{box-shadow:none;border-color:var(--line);transition:border-color .18s}
.card.flat:hover{border-color:#b9b1a0}
.cardIcon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accSoft);color:var(--accDeep)}
.cardIcon .ico{width:20px;height:20px}
.cardKicker{margin:0!important;font-size:12px!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accDeep)!important}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:28px;font-size:15px;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--accSoft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e5e0f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.s.dark .ticks li::before{background-color:var(--ink3)}

/* ---------- Problem list ---------- */
.problems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.problem{padding:24px 24px 24px 0;border-bottom:1px solid var(--line)}
.problem:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--line)}
.problem b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.problem p{margin:0;color:var(--mut2);font-size:15px;line-height:1.65}

/* ---------- Five stage summary (home) ---------- */
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.stage{display:flex;flex-direction:column;gap:8px;padding:22px 20px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);transition:border-color .18s,transform .18s var(--ease)}
.stage:hover{border-color:var(--ink);transform:translateY(-2px)}
.stageNum{display:flex;align-items:center;justify-content:space-between;font:600 30px/1 Fraunces,Georgia,serif;color:var(--ink)}
.stageNum small{font:700 11.5px Roboto,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accDeep)}
.stage b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.stage p{margin:0;font-size:14px;line-height:1.6;color:var(--mut2)}
.stage a{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border-bottom:2px solid var(--acc)}

/* ---------- Feature modules ---------- */
.pillar{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(44px,5vw,64px) 0;border-top:1px solid var(--line)}
.pillar:first-child{border-top:0;padding-top:0}
.pillar:last-child{padding-bottom:0}
.pillar.flip>:first-child{order:2}
.pillar h2{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em;line-height:1.1;margin:0 0 14px}
.pillar>div>p{color:var(--mut2);font-size:16px;line-height:1.7;margin:0 0 18px}
.featureValue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:clamp(24px,3vw,36px);background:var(--paper);border:1.5px solid var(--ink);border-radius:12px}
.featureValue h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em}
.featureValue p{margin:10px 0 0;color:var(--mut2);max-width:620px}

/* ---------- Detailed workflow (how it works) ---------- */
.timeline{list-style:none;margin:0;padding:0}
.tlStep{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 24px;position:relative;padding-bottom:40px;scroll-margin-top:calc(var(--hdrH) + 24px)}
.tlNum{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;font:600 20px Fraunces,Georgia,serif;grid-row:1/4}
.tlStep::after{content:"";position:absolute;left:25px;top:60px;bottom:8px;width:2px;background:var(--line)}
.tlStep:last-child::after{display:none}
.tlStep h3{font-size:clamp(21px,2.3vw,27px);letter-spacing:-.025em;margin:10px 0 10px}
.tlStage{display:block;margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accDeep)}
.tlMeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tlBody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tlBody div{padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.tlBody small{display:block;margin-bottom:6px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.tlBody p{margin:0;font-size:14.5px;line-height:1.6}
.tlStep:target .tlNum{background:var(--acc);color:var(--ink)}

/* ---------- Value tiles ---------- */
.valueTiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.valueTile{padding:22px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--acc);border-radius:var(--r)}
.valueTile b{display:block;font:600 clamp(28px,3vw,38px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.02em;margin-bottom:6px}
.valueTile span{font-size:14px;color:var(--mut2)}
.exampleNote{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--mut)}

/* ---------- Security ---------- */
.secList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.secItem{padding:22px;border:1px solid #4a473e;border-radius:var(--r);background:var(--ink2)}
.secItem .ico{color:var(--acc);width:22px;height:22px;margin-bottom:12px}
.secItem b{display:block;font-size:17px;font-weight:600;margin-bottom:8px;color:#fff}
.secItem p{margin:0;font-size:14.5px;line-height:1.65;color:#cfcabc}
.secNote{margin:24px 0 0;font-size:14px;color:#b9b4a6}

/* ---------- Integrations ---------- */

/* ---------- FAQ (accessible disclosure; works without JavaScript) ---------- */
.faq{padding:clamp(56px,7vw,92px) 0}
.faqInner{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:start}
.faqIntro h2{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.035em;line-height:1.08}
.faqIntro p:not(.tag){margin:14px 0 0;color:var(--mut2);font-size:15px;line-height:1.65}
.faqList{border-top:1.5px solid var(--ink)}
.faqList details{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdrH) + 24px)}
.faqList summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;padding:18px 2px;cursor:pointer}
.faqList summary::-webkit-details-marker{display:none}
.faqList summary h3{margin:0;font-size:16.5px;font-weight:600;line-height:1.45;letter-spacing:-.01em}
.faqList summary:hover h3{color:var(--accDeep)}
.faqToggle{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1.5px solid var(--line);border-radius:50%;color:var(--accDeep);transition:transform .2s var(--ease),border-color .18s,background-color .18s}
.faqList summary:hover .faqToggle{border-color:var(--ink)}
.faqToggle .ico{width:16px;height:16px}
.faqList details[open] .faqToggle{transform:rotate(45deg);background:var(--ink);border-color:var(--ink);color:#fff}
.faqAnswer{padding:0 54px 20px 2px}
.faqAnswer p{margin:0;color:var(--mut2);font-size:15px;line-height:1.7}
.faqAnswer a{color:var(--ink);border-bottom:1px solid var(--acc)}

/* ---------- Call to action ---------- */
.cta{padding:clamp(56px,7vw,88px) 0}
.ctaBox{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:32px;align-items:center;padding:clamp(30px,4.5vw,56px);background:var(--ink);color:#fff;border-radius:14px}
.ctaBox::before{content:"";position:absolute;right:-160px;top:50%;width:460px;height:460px;margin-top:-230px;border-radius:50%;background:radial-gradient(circle closest-side,transparent calc(62% - 1px),rgba(212,166,63,.34) 62%,transparent calc(62% + 1px),transparent calc(99% - 1px),rgba(212,166,63,.2) 99%,transparent 100%);pointer-events:none}
.ctaBox>*{position:relative}
.ctaBox h2{font-size:clamp(28px,3.3vw,44px);letter-spacing:-.035em;line-height:1.08}
.ctaBox em{color:var(--acc)}
.ctaBox p{margin:14px 0 0;color:#cfcabc;font-size:16px;line-height:1.7;max-width:600px}
.ctaActions{display:flex;flex-direction:column;gap:12px}
.ctaActions .btn{width:100%}
.ctaBox .btn:not(.btnLight){color:#fff;border-color:rgba(255,255,255,.85)}
.ctaBox .btn:not(.btnLight):hover{box-shadow:3px 3px 0 var(--acc)}
.ctaBox .btnLight:hover{box-shadow:3px 3px 0 #fff}

/* ---------- Forms ---------- */
.form{display:grid;gap:14px}
.formRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}
.field{display:grid;grid-template-columns:max-content 1fr;column-gap:4px;row-gap:6px;align-items:baseline;font-size:14px;font-weight:600}
.field>small,.field>input,.field>select,.field>textarea,.field>.fieldMsg{grid-column:1/-1}
.field small{font-weight:400;color:var(--mut)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-weight:400;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid #8f897a;border-radius:var(--r);padding:11px 12px;min-height:46px;transition:border-color .18s,box-shadow .18s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--accSoft)}
.field input[aria-invalid=true]{border-color:var(--badInk)}
.fieldMsg{font-size:13px;font-weight:500;color:var(--badInk)}
.field .req{color:var(--badInk)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;font-weight:400}
.check input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--ink)}
.check a{border-bottom:1px solid var(--acc)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);font-size:14.5px;line-height:1.55}
.alert>.ico{margin-top:2px}
.alert.ok{background:var(--accTint);color:var(--ink);border:1px solid var(--acc)}
.alert.ok>.ico{color:var(--accDeep)}
.alert.bad{background:var(--badBg);color:var(--badInk);border:1px solid #f0aa98}
.alert ul{margin:6px 0 0;padding-left:18px}
.formNote{margin:0;font-size:13px;color:var(--mut);line-height:1.55}

/* ---------- Content pages ---------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;margin:36px 0 12px}
.prose p,.prose li{font-size:16px;line-height:1.75;color:#3d3a33}
.prose ul{padding-left:20px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:12px 0}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{background:var(--paper)}
.prose a{border-bottom:1px solid var(--acc);font-weight:500}
.pageSearch{max-width:720px;margin-top:24px}
.pageSearch .searchResults{max-height:none}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .stages{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid4,.valueTiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .secList{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .heroHome .heroGrid,.heroIndex .heroGrid,.heroFormula .heroGrid,.heroJourney .heroTop,.sHead.split,.pillar,.ctaBox,.faqInner,.featureValue{grid-template-columns:1fr}
  .heroHome .orbit{width:min(100%,520px);margin-top:8px}
  .pillar.flip>:first-child{order:0}
  .grid3,.problems{grid-template-columns:1fr 1fr}
  .problem,.problem:not(:nth-child(3n+1)){padding:20px 16px 20px 0;border-left:0}
  .problem:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
  .tlBody{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr;gap:0}
  .journey::before{left:19px;right:auto;top:20px;bottom:42px;width:2px;height:auto}
  .journey li{padding:0 0 22px}
  .journey a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 16px}
  .journeyDot{grid-row:1/4}
  .journey small{margin-top:2px}
  .ctaBox::before{display:none}
}
@media(max-width:600px){
  .grid2,.grid3,.grid4,.valueTiles,.secList,.problems,.stages,.formRow{grid-template-columns:1fr}
  .problem:nth-child(2n){padding-left:0;border-left:0}
  .tlStep{grid-template-columns:42px minmax(0,1fr);gap:0 14px}
  .tlNum{width:38px;height:38px;font-size:16px}
  .tlStep::after{left:18px;top:46px}
  .card{padding:20px;box-shadow:4px 4px 0 var(--ink)}
  .card.flat{box-shadow:none}
  .faqAnswer{padding-right:8px}
  .mockRow{flex-wrap:wrap}
}
@media print{.orbit,.orbitToggle{display:none}.faqList details{border:0}.faqList details>*{display:block}}