/* marketing.css
 * Public marketing presentation for harmelo.com. Presentation only: no selector here is used by
 * a console, the Command Centre, the field app or any authenticated surface, and nothing here
 * changes a form's controls, names or behaviour. Form wiring stays in lead-form.js.
 *
 * Palette is the established Harmelo palette. The bright brand teal (#00D4B8) is used only on the
 * navy ground, where it passes contrast. On light grounds the darker teal ink is used instead,
 * because #00D4B8 on white is 1.7:1 and fails for text and controls.
 */
:root{
  --navy:#0A0E17;
  --navy-2:#141B28;
  --navy-line:#263146;
  --paper:#F2F4F7;
  --white:#FFFFFF;
  --text:#18202B;
  --muted:#4A5566;
  --faint:#5F6978;
  --line:#D5DBE3;
  --line-soft:#E6EAF0;
  --teal:#00D4B8;
  --teal-ink:#00695C;
  --teal-ink-hover:#005248;
  --teal-wash:#E3F5F1;
  --amber:#E3A23C;
  --amber-ink:#7A4E00;
  --amber-wash:#FBF1DE;
  --error:#A61B1B;
  --error-wash:#FCEBEB;
  --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1180px;
  --measure:62ch;
  --r-sm:6px;
  --r:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink);text-underline-offset:3px}
a:hover{color:var(--teal-ink-hover)}
:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--teal)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--white);color:var(--navy);padding:10px 14px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- Navigation. The navigation rules ship inline in each page beside the markup they
   style (scripts/test-nav-css.js requires the rule and the markup in the same file). */

/* ---------- Buttons. One filled primary per page. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--r-sm);font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;line-height:1.2}
.btn-primary{background:var(--teal-ink);color:#fff}
.btn-primary:hover{background:var(--teal-ink-hover);color:#fff}
.on-dark .btn-primary{background:var(--teal);color:var(--navy)}
.on-dark .btn-primary:hover{background:#3DE3CC;color:var(--navy)}
.text-link{font-weight:600;text-decoration:underline;text-decoration-thickness:1px}
.on-dark .text-link{color:#E6EBF2}
.on-dark .text-link:hover{color:#fff}

/* ---------- Type */
h1,h2,h3{margin:0;color:inherit}
.h1{font-family:var(--serif);font-weight:600;font-size:clamp(36px,4.6vw,58px);line-height:1.06;letter-spacing:-.018em}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.4vw,42px);line-height:1.14;letter-spacing:-.012em}
.h3{font-family:var(--sans);font-weight:650;font-size:19px;line-height:1.3;letter-spacing:-.005em}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:var(--measure)}
.sub{color:var(--muted);max-width:var(--measure);margin:14px 0 0}
.sub+.sub{margin-top:12px}
.kicker{font-size:15px;font-weight:600;color:var(--teal-ink);margin:0 0 12px}
.on-dark .kicker,.mk-hero .kicker{color:var(--teal)}
.fine{font-size:14px;color:var(--faint);max-width:var(--measure)}

/* ---------- Sections */
.sec{padding:96px 0}
.sec-paper{background:var(--paper)}
.sec-navy{background:var(--navy);color:#E6EBF2}
.sec-navy .sub{color:#B7C1CF}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-tight{padding:72px 0}
@media (max-width:820px){.sec{padding:72px 0}.sec-tight{padding:56px 0}.wrap{padding:0 22px}.nav-inner{padding:0 22px}}
@media (max-width:420px){.wrap{padding:0 18px}.nav-inner{padding:0 18px}}

/* ---------- Hero. Light and product-led: the headline and one real current screen. */
.mk-hero{background:linear-gradient(180deg,#FFFFFF 0%,#EEF2F6 100%);color:var(--navy);padding:76px 0 88px;border-bottom:1px solid var(--line)}
.mk-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:center}
.mk-hero .eyebrow{display:inline-block;font-size:14.5px;font-weight:600;color:var(--teal-ink);background:var(--teal-wash);border-radius:999px;padding:5px 12px;margin:0 0 20px}
.mk-hero .h1{color:var(--navy)}
.mk-hero .lede{color:#2E3846;margin:24px 0 0}
.mk-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
.mk-hero .note{margin-top:20px;font-size:14px;color:var(--muted);max-width:56ch}
.hero-shot{margin:0;position:relative}
.hero-shot .shot{background:var(--navy);border-radius:14px;padding:22px 22px 0;box-shadow:0 30px 60px -30px rgba(10,14,23,.45)}
.hero-shot .shot img{border-radius:10px 10px 0 0;width:100%;height:auto;object-fit:contain}
.hero-shot figcaption{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.5}
@media (max-width:1100px){.mk-hero-grid{gap:44px}}
@media (max-width:980px){.mk-hero-grid{grid-template-columns:1fr}.mk-hero{padding:48px 0 60px}}
@media (max-width:420px){.hero-shot .shot{padding:14px 14px 0}}

/* Outcome cards directly under a hero. */
.outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin-top:-44px;position:relative;box-shadow:0 18px 40px -28px rgba(10,14,23,.35)}
.outcomes > div{padding:28px 28px 30px}
.outcomes > div + div{border-left:1px solid var(--line)}
.outcomes h2,.outcomes h3{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.2;color:var(--navy);margin:0 0 8px}
.outcomes p{margin:0;color:var(--muted);font-size:15.5px}
@media (max-width:900px){.outcomes{grid-template-columns:1fr;margin-top:-28px}.outcomes > div + div{border-left:0;border-top:1px solid var(--line)}}

/* Before, during and after: a visible workflow on the navy ground. */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--navy-line)}
.flow > div{padding:28px 28px 8px 0}
.flow > div + div{padding-left:28px;border-left:1px solid var(--navy-line)}
.flow .when{font-family:var(--serif);font-size:26px;font-weight:600;color:#fff;margin:0 0 4px}
.flow .when-sub{font-size:14.5px;color:var(--teal);margin:0 0 10px;font-weight:600}
@media (max-width:900px){.flow{grid-template-columns:1fr}.flow > div,.flow > div + div{padding:24px 0 8px;border-left:0}.flow > div + div{border-top:1px solid var(--navy-line)}}

/* Pain recognition: short scenes, the visitor should see their own week in them. */
.scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.scenes li{padding:18px 0 18px 34px;border-bottom:1px solid var(--line);position:relative;font-size:17px;line-height:1.5}
.scenes li::before{content:"";position:absolute;left:4px;top:27px;width:14px;height:2px;background:var(--amber)}
@media (max-width:760px){.scenes{grid-template-columns:1fr}}

/* Screens gallery. */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:900px){.shots{grid-template-columns:1fr}}
.big-statement{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.2vw,40px);line-height:1.18;letter-spacing:-.01em;max-width:24ch;color:var(--navy);margin:0}

/* ---------- The record illustration. Built in HTML so it is legible, translatable and clearly
   an illustration rather than a screenshot. Three evidence states are distinguished by label
   and by marker shape, never by colour alone. */
.rec{background:var(--white);color:var(--text);border-radius:var(--r);box-shadow:0 1px 0 rgba(0,0,0,.2),0 24px 60px -24px rgba(0,0,0,.6);overflow:hidden}
.rec-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--line-soft)}
.rec-unit{font-weight:650;font-size:17px}
.rec-where{font-size:13px;color:var(--muted)}
.rec-tag{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.rec-rows{list-style:none;margin:0;padding:6px 0}
.rec-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 12px;padding:11px 22px;align-items:start}
.rec-row+.rec-row{border-top:1px solid var(--line-soft)}
.rec-mark{width:12px;height:12px;margin-top:5px;border-radius:50%;background:var(--teal-ink)}
.rec-row.reported .rec-mark{background:var(--white);border:2px solid var(--teal-ink)}
.rec-row.unknown .rec-mark{border-radius:2px;background:var(--amber);transform:rotate(45deg)}
.rec-what{font-size:15px;font-weight:600;line-height:1.35}
.rec-meta{grid-column:2;font-size:13px;color:var(--muted);line-height:1.4}
.rec-state{font-family:var(--mono);font-size:12px;color:var(--teal-ink);white-space:nowrap;padding-top:2px}
.rec-row.unknown .rec-state{color:var(--amber-ink)}
.rec-row.reported .rec-state{color:var(--muted)}
.rec-foot{padding:12px 22px;background:var(--paper);font-size:12.5px;color:var(--muted);border-top:1px solid var(--line-soft)}
@media (max-width:420px){.rec-row{grid-template-columns:18px minmax(0,1fr);padding:11px 16px}.rec-state{grid-column:2;grid-row:auto}.rec-top{padding:16px}.rec-foot{padding:12px 16px}}

/* ---------- Lists and grids */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.grid-2,.grid-3{grid-template-columns:1fr}}
.loss{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--line)}
.loss li{padding:16px 0 16px 30px;border-bottom:1px solid var(--line);position:relative;color:var(--text)}
.loss li::before{content:"";position:absolute;left:4px;top:25px;width:12px;height:2px;background:var(--amber)}
@media (max-width:700px){.loss{grid-template-columns:1fr}}

/* What the record holds: a definition list, because each item is a term and its meaning. */
.holds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border-top:2px solid var(--navy)}
.holds div{padding:22px 24px 24px 0;border-bottom:1px solid var(--line)}
.holds dt{font-weight:650;font-size:17px;margin-bottom:6px}
.holds dd{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
@media (max-width:980px){.holds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.holds{grid-template-columns:1fr}.holds div{padding-right:0}}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.sec-paper .card{border-color:var(--line)}
.card .h3{margin-bottom:8px}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.card p+p{margin-top:10px}
.card .gets{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);color:var(--text);font-size:15px}
.card .gets b{color:var(--teal-ink)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;border-top:2px solid var(--teal-ink)}
.steps li::before{content:counter(s);display:block;font-family:var(--serif);font-size:30px;font-weight:600;color:var(--teal-ink);line-height:1;margin-bottom:12px}
.steps h3{font-size:18px;font-weight:650;margin-bottom:6px}
.steps p{margin:0;color:var(--muted);font-size:15.5px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.checks{list-style:none;margin:18px 0 0;padding:0}
.checks li{position:relative;padding:9px 0 9px 28px;color:var(--text)}
.checks li::before{content:"";position:absolute;left:2px;top:15px;width:11px;height:6px;border-left:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(-45deg)}
.sec-navy .checks li{color:#E6EBF2}
.sec-navy .checks li::before{border-color:var(--teal)}

/* ---------- Product proof. Every figure carries a visible demonstration-data label. */
.proof{margin:0}
.proof-frame{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px;overflow:hidden}
.sec-paper .proof-frame{background:var(--white)}
.proof img{border-radius:8px;box-shadow:0 1px 2px rgba(10,14,23,.08);background:#fff}
.proof figcaption{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.5;max-width:var(--measure)}
.demo-flag{display:inline-block;font-size:12px;font-weight:700;color:var(--amber-ink);background:var(--amber-wash);border:1px solid #EACB92;border-radius:4px;padding:1px 7px;margin-right:8px;white-space:nowrap}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split.wide-right{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.split.narrow-right{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media (max-width:980px){.split,.split.wide-right,.split.narrow-right{grid-template-columns:1fr;gap:36px}}
.qualify{margin-top:18px;padding:12px 16px;border-left:3px solid var(--line);color:var(--muted);font-size:15px;max-width:var(--measure)}

/* ---------- Audience index */
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.aud a{display:block;padding:22px 22px 22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.aud a:hover .aud-t{color:var(--teal-ink);text-decoration:underline}
.aud-t{font-weight:650;font-size:17px}
.aud-d{display:block;color:var(--muted);font-size:15px;margin-top:4px}
@media (max-width:980px){.aud{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.aud{grid-template-columns:1fr}}

.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rel .card{background:transparent;border-color:var(--navy-line);color:#E6EBF2}
.rel .card p{color:#B7C1CF}
.rel .card a{color:var(--teal)}
@media (max-width:900px){.rel{grid-template-columns:1fr}}

.recog{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recog b{font-weight:650}
.recog span{color:var(--muted);font-size:15px}

/* ---------- Governed inquiry form. The form's controls, names, ids and consent wording are
   unchanged; this only draws them. Required fields are marked from the markup's own
   `required` attribute, so the visual marker cannot disagree with the control. */
.req-sec{background:var(--paper);border-top:1px solid var(--line)}
.req-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
@media (max-width:980px){.req-grid{grid-template-columns:1fr;gap:28px}}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px}
@media (max-width:560px){.form-card{padding:22px 18px}}
.form-card form{display:block}
.lf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
@media (max-width:620px){.lf-two{grid-template-columns:1fr}}
.lf-f{margin:0 0 18px}
.lf-f label{display:block;font-size:14.5px;font-weight:600;color:var(--text);margin:0 0 6px}
.lf-f:has(> input[required]) > label::after,.lf-f:has(> textarea[required]) > label::after{content:" (required)";font-weight:500;color:var(--muted)}
.lf-opt{font-weight:500;color:var(--muted)}
.lf-f input,.lf-f textarea,.lf-f select{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--white);border:1px solid #9AA5B4;border-radius:var(--r-sm);padding:11px 13px;min-height:48px;transition:border-color .12s,box-shadow .12s}
.lf-f textarea{min-height:104px;resize:vertical;line-height:1.5}
.lf-f input:hover,.lf-f textarea:hover{border-color:#6B7584}
.lf-f input:focus,.lf-f textarea:focus{outline:none;border-color:var(--teal-ink);box-shadow:0 0 0 3px rgba(0,105,92,.22)}
.lf-f input::placeholder,.lf-f textarea::placeholder{color:#8A94A3}
.lf-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.lf-consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;color:var(--text);line-height:1.5;margin:0 0 14px;cursor:pointer}
.lf-consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--teal-ink);cursor:pointer}
.lf-selfreport{font-size:13.5px;color:var(--muted);line-height:1.5;margin:4px 0 18px;padding:10px 12px;background:var(--paper);border-radius:var(--r-sm)}
.lf-go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border:0;border-radius:var(--r-sm);background:var(--teal-ink);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.lf-go:hover{background:var(--teal-ink-hover)}
.lf-go:disabled{background:#8B96A5;cursor:not-allowed}
.lf-go[aria-busy="true"]{cursor:progress}
.lead-status{margin-top:16px;font-size:15px;line-height:1.5}
.lead-status:empty{display:none}
.lead-status[data-state]{padding:12px 14px;border-radius:var(--r-sm);border:1px solid}
.lead-status[data-state="accepted"]{background:var(--teal-wash);border-color:#9ED7CC;color:#004C43;font-weight:600}
.lead-status[data-state="pending"],.lead-status[data-state="limited"]{background:var(--amber-wash);border-color:#EACB92;color:var(--amber-ink)}
.lead-status[data-state="failed"],.lead-status[data-state="offline"],.lead-status[data-state="toolarge"],.lead-status[data-state="needPrivacy"],.lead-status[data-state="needEmail"]{background:var(--error-wash);border-color:#E7B4B4;color:var(--error)}
.lead-status:focus{outline:3px solid currentColor;outline-offset:2px}
.lf-alt{margin-top:18px;font-size:14.5px;color:var(--muted)}
.req-points{list-style:none;margin:22px 0 0;padding:0}
.req-points li{padding:10px 0;border-top:1px solid var(--line);color:var(--text);font-size:15.5px}

/* ---------- Footer */
.mk-foot{background:var(--navy);color:#B7C1CF;padding:64px 0 36px;font-size:14.5px}
.mk-foot a{color:#E6EBF2;text-decoration:none}
.mk-foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-brand .nm{font-family:var(--serif);font-size:22px;font-weight:600;color:#fff}
.foot-brand p{margin:8px 0 0;max-width:34ch}
.foot-col h2{font-family:var(--sans);font-size:13.5px;font-weight:650;color:#fff;margin:0 0 12px}
.foot-col a{display:block;padding:4px 0}
.foot-related{margin-top:40px;padding-top:22px;border-top:1px solid var(--navy-line);line-height:1.7}
.foot-legal{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13px;color:#8D99AB}
.foot-tm{margin-top:14px;font-size:12.5px;color:#7D899B;max-width:90ch}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* Wide interface strips read at full content width, never squeezed into a half column. The text
   sits in two columns above them on desktop so the section stays compact. */
.stack{display:block}
.stack-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:start}
.stack-text > .kicker,.stack-text > .h2,.stack-text > .h3{grid-column:1}
.stack-text > .sub,.stack-text > .qualify,.stack-text > .fine{grid-column:1}
.stack-text > .checks{grid-column:2;grid-row:1 / span 6;margin-top:0;align-self:end}
.stack-text > p:last-child:not(.sub){grid-column:1}
.stack > .proof{margin-top:40px}
@media (max-width:900px){.stack-text{display:block}.stack-text > .checks{margin-top:18px}}
.shots{grid-template-columns:1fr}

/* What each party receives: an editorial three-column list, read across. Not cards. */
.roles{margin:0;border-top:2px solid var(--navy)}
.role{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr);gap:8px 40px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.role dt{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy);line-height:1.25}
.role dd{margin:0;font-size:16px;line-height:1.55}
.role-does{color:var(--muted)}
.role-gets{color:var(--text)}
.role-gets b{color:var(--teal-ink)}
@media (max-width:820px){.role{grid-template-columns:1fr;gap:6px}.role dt{font-size:20px}}

/* Contractor commitments: a restrained statement list with a quiet rule, no icons. The list is
   ordered only for reading; the markers are hidden because the items are not a sequence. */
.pledges{list-style:none;margin:0;padding:0;max-width:880px;border-top:1px solid var(--line)}
.pledges li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:6px 40px;padding:20px 0;border-bottom:1px solid var(--line)}
.pledge{margin:0;font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--navy)}
.pledge strong{font-weight:600}
.pledge-why{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55;padding-top:3px}
@media (max-width:760px){.pledges li{grid-template-columns:1fr}.pledge{font-size:18.5px}}

/* The three-product comparison keeps three distinct cards side by side until a phone width,
   so no card is ever orphaned on its own row. */
.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.compare .card{border-top:3px solid var(--line)}
.compare .card:first-child{border-top-color:var(--teal-ink);background:var(--teal-wash)}

/* Responsive product proof. Phones receive the console's own phone-width rendering of the same
   screen and demonstration data (picture/source), so the meaning is visible without scrolling.
   The full desktop row of the units-to-plan strip stays available in a disclosure, as a
   labelled, keyboard-scrollable region. */
picture{display:block}
.proof-full{display:none;margin-top:12px}
.proof-full summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--teal-ink);padding:8px 0;min-height:44px;display:flex;align-items:center}
.proof-full summary:focus-visible{outline:3px solid var(--teal-ink);outline-offset:2px}
.proof-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px}
.proof-scroll img{width:720px;max-width:none}
.proof-scroll-cue{font-size:13.5px;color:var(--faint);margin:8px 0 0}
@media (max-width:760px){.proof-full{display:block}}
.proof,.shots > *,.split > *,.grid-2 > *,.grid-3 > *,.compare > *{min-width:0}
.shots{grid-template-columns:minmax(0,1fr)}

/* Product comparison, founder responsive ruling: three equal columns at 820px and above, one
   stacked column below. Never two-plus-one, never scrolled. Actions align to the card foot. */
.compare{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.compare .card{display:flex;flex-direction:column}
.compare .card .h3{min-height:2.6em;display:flex;align-items:flex-end}
.compare .card p:last-child:has(a){margin-top:auto;padding-top:14px}
@media (max-width:819px){.compare{grid-template-columns:minmax(0,1fr)}.compare .card .h3{min-height:0;display:block}}
.proof-frame[tabindex]:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}

/* While a resend is in flight, the previous error is not left on screen beside "Sending...".
   Presentation only: lead-form.js still owns every state and message. */
form:has([data-lead-submit][aria-busy="true"]) [data-lead-status]:not([data-state="accepted"]){display:none}

/* Contractor commitments as three positive themes (founder ruling, 24 September 2026). */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--navy)}
.theme{padding:22px 28px 6px 0}
.theme + .theme{padding-left:28px;border-left:1px solid var(--line)}
.theme h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy);margin:0 0 8px}
.theme p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media (max-width:820px){.themes{grid-template-columns:1fr}.theme,.theme + .theme{padding:20px 0 4px;border-left:0}.theme + .theme{border-top:1px solid var(--line)}}
.proof-second{margin-top:28px}

/* Remaining public pages (second redesign pass). */
.mk-hero > .wrap:not(.mk-hero-grid) .hero-copy{max-width:780px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:15px;color:var(--text)}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.steps-3{grid-template-columns:1fr}}
.form-grid form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.form-grid form > *{grid-column:1 / -1}
.form-grid form > .lf-f:has(> input){grid-column:auto}
@media (max-width:620px){.form-grid form{grid-template-columns:minmax(0,1fr)}.form-grid form > .lf-f:has(> input){grid-column:1 / -1}}
.letter{max-width:680px}
.letter p{font-family:var(--serif);font-size:19px;line-height:1.7;color:var(--text);margin:0 0 18px}
.letter .sign{font-family:var(--sans);font-size:15px;color:var(--muted)}
.founder{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:48px;align-items:start}
.founder img{border-radius:var(--r)}
@media (max-width:820px){.founder{grid-template-columns:1fr}.founder img{max-width:220px}}
.proof-full summary{list-style:none;gap:8px}
.proof-full summary::-webkit-details-marker{display:none}
.proof-full summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--teal-ink);border-radius:4px;font-size:15px;line-height:1}
.proof-full[open] summary::before{content:"\2212"}
.form-grid form > .lf-go{justify-self:start}
.form-grid .lf-opt::before{content:"("}
.form-grid .lf-opt::after{content:")"}
.h1,.h2,.h3,.big-statement,.theme h3{text-wrap:balance}

/* Institutional pricing (founder ruling, 24 September 2026). */
.price-rule{color:var(--text);font-weight:600}
.price-terms{margin:0;border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.price-terms > div{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 20px}
.price-terms > div + div{border-top:1px solid var(--line-soft)}
.price-terms dt{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy);white-space:nowrap}
.price-terms dd{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.price-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:16px}
.price-examples > div{background:var(--paper);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.price-examples span{font-size:13.5px;color:var(--muted)}
.price-examples b{font-size:18px;color:var(--text)}
.price-examples em{font-style:normal;font-size:13px;color:var(--faint)}
@media (max-width:420px){.price-terms > div{grid-template-columns:minmax(0,96px) minmax(0,1fr);padding:12px 14px;gap:12px}.price-terms dt{font-size:21px}.price-examples{grid-template-columns:1fr}}

/* =====================================================================================
   INTERACTION SYSTEM (experience pass). Everything that hides or moves content is scoped
   under html.mx, which only marketing.js sets. Without JavaScript nothing below hides
   anything. Motion is opacity and transform only, 150 to 400ms, and is removed entirely
   under prefers-reduced-motion.
   ===================================================================================== */

/* ---- Controls: stronger hover, active and focus feedback on genuine interactive elements */
.btn,.lf-go,.tab,.rec-ctl,.nav-cta{transition:background-color .18s ease,box-shadow .18s ease,transform .15s ease,color .18s ease,border-color .18s ease}
.btn-primary:hover,.lf-go:hover{box-shadow:0 6px 16px -8px rgba(0,105,92,.55);transform:translateY(-1px)}
.btn-primary:active,.lf-go:active,.tab:active,.rec-ctl:active{transform:translateY(0) scale(.985);box-shadow:none}
.text-link{transition:text-decoration-color .18s ease,color .18s ease;text-decoration-color:rgba(0,105,92,.45)}
.text-link:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.aud a{transition:background-color .18s ease}
.aud a:hover{background:rgba(0,105,92,.05)}

/* ---- Tabs (before/during/after, stakeholder selector, product proof). Without JS the panels
        simply stack, all visible. */
.tabs-block{margin-top:8px}
.tab-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tab{appearance:none;border:1px solid var(--line);background:var(--white);color:var(--text);font:inherit;font-size:15px;font-weight:600;padding:10px 16px;border-radius:999px;cursor:pointer;min-height:44px}
.tab:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
.tab[aria-selected="true"]{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.tab:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}
.on-dark .tab{background:transparent;border-color:#4B5A72;color:#E6EBF2}
.on-dark .tab:hover{border-color:var(--teal);color:#fff}
.on-dark .tab[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:var(--navy)}
.on-dark .tab:focus-visible{outline-color:var(--teal)}
[data-tab-panel]:focus-visible{outline:3px solid var(--teal-ink);outline-offset:6px;border-radius:6px}
.on-dark [data-tab-panel]:focus-visible{outline-color:var(--teal)}
.tabs-block:not(.is-tabbed) > [data-tab-panel] + [data-tab-panel],
.tabs-block:not(.is-tabbed) > .tab-panels > [data-tab-panel] + [data-tab-panel]{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.on-dark .tabs-block:not(.is-tabbed) > [data-tab-panel] + [data-tab-panel]{border-top-color:var(--navy-line)}
.nojs-label{font-family:var(--serif);font-size:22px;font-weight:600;margin:0 0 10px}
html.mx .is-tabbed .nojs-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.mx .tab-in{animation:mx-fade .22s ease both}
@keyframes mx-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Before, during, after as a stepper on the navy band */
.flow-steps .step-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 48px;align-items:start}
.flow-steps .step-kicker{font-family:var(--serif);font-size:30px;font-weight:600;color:#fff;margin:0}
.flow-steps .step-sub{color:var(--teal);font-weight:600;margin:4px 0 0}
.flow-steps .checks{margin-top:0}
@media (max-width:760px){.flow-steps .step-panel{grid-template-columns:1fr}}

/* Stakeholder pathway selector */
.path-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--navy)}
.path-panel > div{padding:18px 24px 6px 0}
.path-panel > div + div{padding-left:24px;border-left:1px solid var(--line)}
.path-panel dt{font-size:13.5px;font-weight:700;color:var(--teal-ink);text-transform:none;margin-bottom:6px}
.path-panel dd{margin:0;font-size:16px;line-height:1.55;color:var(--text)}
.path-go{margin-top:18px}
@media (max-width:820px){.path-panel{grid-template-columns:1fr}.path-panel > div,.path-panel > div + div{padding:16px 0 4px;border-left:0}.path-panel > div + div{border-top:1px solid var(--line)}}

/* Product proof tabs */
.proof-tabs [data-tab-panel] .proof{max-width:100%}
.proof-tabs .proof-frame img{margin:0 auto}
.proof-tabs .proof-tall .proof-frame{display:flex;justify-content:center}
.proof-tabs .proof-tall .proof-frame img{max-width:460px}
.proof-why{margin:10px 0 0;color:var(--text);font-size:15.5px;max-width:var(--measure)}

/* ---- Continuing record timeline */
.record-tl{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px 18px;box-shadow:0 24px 50px -32px rgba(10,14,23,.4)}
.record-tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.record-tl-title{font-weight:650;font-size:17px}
.record-tl-note{font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.record-meter{height:4px;background:var(--line-soft);border-radius:4px;overflow:hidden;margin:10px 0 6px}
.record-meter span{display:block;height:100%;width:100%;background:var(--teal-ink);transform-origin:left center;transform:scaleX(var(--record-progress,1));transition:transform .35s ease}
.record-count{font-size:13px;color:var(--muted);margin:0 0 10px}
.record-list{list-style:none;margin:0;padding:0;position:relative}
.record-list::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--line)}
.record-entry{position:relative;padding:9px 0 9px 32px;transition:opacity .3s ease,transform .3s ease}
.record-entry::before{content:"";position:absolute;left:3px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--teal-ink);box-shadow:0 0 0 3px var(--white)}
.record-entry b{display:block;font-size:15px;line-height:1.35}
.record-entry span{display:block;font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.record-foot{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted)}
.record-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rec-ctl{appearance:none;font:inherit;font-size:14px;font-weight:600;padding:8px 14px;min-height:40px;border-radius:6px;border:1px solid var(--line);background:var(--white);color:var(--text);cursor:pointer}
.rec-ctl:hover:not(:disabled){border-color:var(--teal-ink);color:var(--teal-ink)}
.rec-ctl:disabled{color:#8A94A3;cursor:not-allowed}
.rec-ctl:focus-visible{outline:3px solid var(--teal-ink);outline-offset:2px}
html.mx .record-tl.is-enhanced .record-entry.is-future{opacity:1}
html.mx .record-tl.is-enhanced .record-entry.is-future::before{background:var(--white);box-shadow:0 0 0 2px var(--line) inset}
html.mx .record-tl.is-enhanced .record-entry.is-future span{visibility:hidden}
html.mx .record-tl.is-enhanced .record-entry.is-future b{color:var(--faint);font-weight:500}
html.mx .record-tl.is-enhanced .record-entry.is-current::before{box-shadow:0 0 0 3px var(--white),0 0 0 6px rgba(0,105,92,.22)}
html.mx .record-tl.is-enhanced .record-entry.is-current{animation:mx-fade .3s ease both}

/* ---- Why now: the operational cost of carrying on as before */
.why-now{margin:0;padding:18px 22px;border-left:4px solid var(--amber);background:var(--amber-wash);border-radius:0 var(--r) var(--r) 0;max-width:820px}
.why-now b{display:block;font-size:14px;color:var(--amber-ink);margin-bottom:4px}
.why-now p{margin:0;font-size:16.5px;color:var(--text);line-height:1.55}

/* ---- Header action (founder ruling): an outline only on pages whose first screen has their own
        filled primary action, so there is one obvious primary action. Pages without one (terms)
        keep the filled header action. Decided by the page's content, not applied blindly. */
body:has(.mk-hero .btn-primary) .nav .nav-cta{background:transparent;color:var(--teal-ink);border:1.5px solid var(--teal-ink);padding:8.5px 14.5px}
body:has(.mk-hero .btn-primary) .nav .nav-cta:hover{background:var(--teal-ink);color:#fff}

@media (prefers-reduced-motion:reduce){
  .record-meter span,.record-entry,.btn,.lf-go,.tab,.rec-ctl{transition:none!important}
  .btn-primary:hover,.lf-go:hover{transform:none}
  html.mx .tab-in,html.mx .record-entry.is-current{animation:none!important}
}
@media print{html.mx [data-tab-panel][hidden]{display:block!important}}
html.mx [data-tab-panel][hidden]{display:none!important}

/* Field-record proof (final visual review): larger unedited image with its label, caption and
   "why it matters" beside it; stacks on phones. */
.proof-tabs .proof-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center}
.proof-tabs .proof-duo .proof-frame{padding:18px}
.proof-tabs .proof-duo .proof-frame img{width:100%;max-width:560px;margin:0 auto}
.proof-tabs .proof-duo figcaption{margin-top:0;font-size:15.5px;color:var(--text)}
.proof-tabs .proof-duo .proof-why{margin-top:14px}
@media (max-width:820px){.proof-tabs .proof-duo{grid-template-columns:minmax(0,1fr);gap:16px}}


/* =====================================================================================
   MOBILE REPAIR PASS (founder ruling: mobile experience not approved). Every rule below fixes a
   defect recorded in the mobile defect ledger.
   ===================================================================================== */
/* M1. Browsers give <figure> 40px side margins. The continuing-record card and any figure
       without its own margin were squeezed on phones. */
figure{margin:0}
/* M2 is applied at the hero rules above: the max-height and object-fit:cover that cropped the
   hero product image on phones and tablets are removed; the whole image shows, contained. */
/* M3. Record controls were 40px high; every control is at least 44px. */
.rec-ctl{min-height:44px}
/* M4. Anchored headings sat 13px under the 71px header; give them clear room. */
html{scroll-padding-top:96px}
/* M5. On narrow phones the record card's title wrapped to four lines beside its tag; stack them. */
@media (max-width:420px){.record-tl-head{flex-direction:column;align-items:flex-start;gap:6px}}

/* =====================================================================================
   STAKEHOLDER REBUILD (round 1). Trust strip, publication cards, cost of the status quo,
   workflow steps, receive lists, labelled proof figures, and the "does not replace" note.
   ===================================================================================== */
.trust-strip{background:var(--white);border-bottom:1px solid var(--line)}
.trust-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-top:22px;padding-bottom:22px}
.trust-items{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.trust-item{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text);font-weight:600}
.trust-item .ti-mark{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--navy);background:var(--paper)}
.trust-item a{color:inherit;text-decoration:none}
.trust-item a:hover{color:var(--teal-ink);text-decoration:underline}
.trust-note{font-size:13px;color:var(--muted);max-width:420px}
.press{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.press-card{display:flex;flex-direction:column;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:var(--r);background:var(--white);padding:22px;text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease}
.press-card:hover{border-top-color:var(--teal-ink);box-shadow:0 10px 24px -18px rgba(10,14,23,.45)}
.press-card:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}
.press-pub{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.press-title{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.3;color:var(--navy);margin:8px 0 10px}
.press-why{font-size:15px;color:var(--muted);line-height:1.55;margin:0 0 14px}
.press-meta{margin-top:auto;font-size:13.5px;color:var(--text);font-weight:600}
@media (max-width:900px){.press{grid-template-columns:minmax(0,1fr)}}
.cost-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--navy)}
.cost-grid > div{padding:20px 24px 8px 0}
.cost-grid > div + div{padding-left:24px;border-left:1px solid var(--line)}
.cost-grid b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--navy);line-height:1.3;margin-bottom:6px}
.cost-grid p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.55}
@media (max-width:820px){.cost-grid{grid-template-columns:minmax(0,1fr)}.cost-grid > div,.cost-grid > div + div{padding:16px 0 6px;border-left:0}.cost-grid > div + div{border-top:1px solid var(--line)}}
.flow-list{list-style:none;margin:0;padding:0;counter-reset:fl;display:grid;gap:0}
.flow-list li{counter-increment:fl;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.flow-list li::before{content:counter(fl);grid-row:span 2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--teal-wash);color:var(--teal-ink);font-weight:700}
.flow-list b{font-size:16.5px;color:var(--text)}
.flow-list span{font-size:15px;color:var(--muted);line-height:1.55}
.receive{columns:2;column-gap:36px;list-style:none;margin:0;padding:0}
.receive li{break-inside:avoid;position:relative;padding:8px 0 8px 28px;font-size:15.5px;line-height:1.5;color:var(--text)}
.receive li::before{content:"";position:absolute;left:4px;top:15px;width:10px;height:6px;border-left:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(-45deg)}
@media (max-width:760px){.receive{columns:1}}
.proof-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
@media (max-width:900px){.proof-pair{grid-template-columns:minmax(0,1fr)}}
.proof.phone .proof-frame{display:flex;justify-content:center;padding:18px}
.proof.phone .proof-frame img{max-width:320px;width:100%}
.demo-flag.alt{background:#EEF2F6;color:var(--navy);border-color:#D5DDE8}
.notrep{border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;background:var(--white);max-width:860px}
.notrep b{display:block;font-size:14px;color:var(--navy);margin-bottom:4px}
.notrep p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.55}
.diagram{border:1px dashed #B9C4D3;border-radius:var(--r);background:var(--white);padding:22px}
.diagram-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-bottom:12px}
.diagram-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.diagram-node{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--paper)}
.diagram-node b{display:block;font-size:14.5px;color:var(--navy)}
.diagram-node span{font-size:13.5px;color:var(--muted);line-height:1.45}
@media (max-width:820px){.diagram-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:420px){.diagram-row{grid-template-columns:minmax(0,1fr)}}
/* Rebuild layout fixes: a wide product strip in a hero spans the full width under the copy, so it
   stays legible; receive lists inside a stack use the full row; paired proofs align centrally. */
.mk-hero.hero-wide .mk-hero-grid{grid-template-columns:minmax(0,1fr)}
.mk-hero.hero-wide .hero-copy{max-width:820px}
.mk-hero.hero-wide .hero-shot{max-width:1000px}
.stack-text > .receive{grid-column:1 / -1}
.proof-pair{align-items:center}

/* =====================================================================================
   ECOSYSTEM ANIMATION (homepage hero). Adapted from Harmelo_Light_Animation_Prototype_v2:
   centered halo, two orbits, the building over the halo, five stakeholder nodes and moving
   signals. Artwork is one SVG that scales with its column; node labels are HTML at a fixed,
   readable size. Signals move only when marketing.js starts them and reduced motion is off.
   ===================================================================================== */
.eco{margin:0;position:relative}
.eco-visual{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:520/560;perspective:1200px}
.eco-scene{position:absolute;inset:0;transform:rotateX(var(--eco-mx,0deg)) rotateY(var(--eco-my,0deg));transform-style:preserve-3d;transition:transform .18s ease-out}
.eco-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eco-plate{position:absolute;left:50%;top:60.5%;transform:translateX(-50%);width:max-content;max-width:62%;padding:8px 12px;border:1px solid rgba(0,105,92,.35);border-radius:9px;background:rgba(255,255,255,.95);box-shadow:0 10px 26px rgba(10,14,23,.10);text-align:center;z-index:2}
.eco-plate small{display:block;color:var(--muted);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.eco-plate strong{display:block;margin-top:3px;color:var(--navy);font-size:12px;letter-spacing:.04em}
.eco-nodes{list-style:none;margin:0;padding:0}
.eco-node{position:absolute;z-index:3;min-width:140px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.97);box-shadow:0 10px 24px rgba(10,14,23,.09)}
.eco-node b{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--text)}
.eco-node b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px rgba(0,212,184,.6)}
.eco-node span{display:block;margin-top:3px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.eco-n1{left:0;top:7%}.eco-n2{right:0;top:7%}.eco-n3{right:0;top:47%}.eco-n4{right:6%;bottom:2%}.eco-n5{left:2%;bottom:4%}
.eco-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:980px){.eco-visual{max-width:520px}}
@media (max-width:620px){
  .eco-visual{aspect-ratio:auto;height:auto}
  .eco-scene{position:relative;inset:auto;aspect-ratio:520/560;transform:none}
  .eco-nodes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:14px}
  .eco-node{position:static;min-width:0}
  .eco-nodes li:last-child{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.eco-scene{transition:none;transform:none!important}}

/* EVIDENCE FLOW (homepage and climate). Five stages with one signal crossing them. */
.evflow{position:relative;container-type:inline-size;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:40px}
.evflow-track{position:absolute;left:6%;right:6%;top:30px;height:2px;background:linear-gradient(90deg,var(--teal),var(--teal-ink),var(--amber));container-type:inline-size;z-index:0}
.evflow-dot{position:absolute;left:6%;top:24px;z-index:3;width:14px;height:14px;border-radius:50%;background:var(--teal-ink);box-shadow:0 0 12px rgba(0,212,184,.7)}
html.mx .evflow-dot{animation:ev-across 7s ease-in-out infinite}
@keyframes ev-across{from{transform:translateX(0)}to{transform:translateX(calc(88cqw - 14px))}}
.evflow-step{position:relative;z-index:1;padding:20px 18px;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:0 12px 30px -18px rgba(10,14,23,.25)}
.evflow-step::before{content:attr(data-step);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:13px}
.evflow-step h3{margin:14px 0 6px;font-size:16px;color:var(--text)}
.evflow-step p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.evflow-out{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.evflow-out span{padding:8px 13px;border:1px solid rgba(0,105,92,.28);border-radius:999px;background:var(--white);color:var(--teal-ink);font-size:13.5px;font-weight:600}
.evflow-bound{margin-top:22px;padding:14px 18px;border-left:3px solid var(--amber);background:var(--white);color:var(--muted);font-size:14.5px;line-height:1.55;max-width:900px}
.evflow-bound strong{color:var(--text)}
@media (max-width:900px){.evflow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.evflow-track,.evflow-dot{display:none}}
@media (max-width:560px){.evflow{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){html.mx .evflow-dot{animation:none}}
.proof-wide-idr{max-width:900px;margin:34px auto 0}

/* =====================================================================================
   PORTFOLIO EVIDENCE (owners and operators) and BUILDING HANDOVER (builders), adapted
   from Harmelo_Animation_Prototype_v4_Evidence. Illustrations, not product screens.
   Without JavaScript every state and every package is shown in order. With JavaScript one
   portfolio state is shown at a time (chosen by the visitor), and the handover plays once
   when it comes into view, then stays under the visitor's control.
   ===================================================================================== */
.v4-box{border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 50% 42%,rgba(0,212,184,.10),transparent 40%),linear-gradient(#fff,#F6F8F9);overflow:hidden}
.v4-tag{display:inline-block;margin:18px 0 0 20px;font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:#fff}
.v4-under{padding:0 22px 22px}
.v4-status{text-align:center;margin:6px auto 14px;max-width:640px}
.v4-status strong{display:block;color:var(--navy);font-size:16px}
.v4-status span{display:block;margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.5}
.v4-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.v4-controls button{appearance:none;font:inherit;font-size:14.5px;font-weight:600;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);cursor:pointer}
.v4-controls button[aria-pressed="true"]{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.v4-controls button:focus-visible,.hv-person:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}
.v4-controls .hv-count{align-self:center;font-size:14px;color:var(--muted);min-width:56px;text-align:center}
.v4-bound{margin:14px auto 0;max-width:860px;font-size:13.5px;color:var(--muted);line-height:1.5;text-align:center}
/* drawn buildings */
.v4-bldg{position:relative;width:130px;height:150px;filter:drop-shadow(0 14px 14px rgba(10,14,23,.14))}
.v4-bldg i{position:absolute;display:block}
.v4-bldg .r{left:11px;top:6px;width:108px;height:58px;background:linear-gradient(135deg,#8399a9,#34566e);clip-path:polygon(50% 0,100% 37%,50% 76%,0 37%)}
.v4-bldg .f,.v4-bldg .s{top:51px;height:80px;width:54px;border:1px solid #75909d}
.v4-bldg .f{left:11px;background:linear-gradient(#edf2f2,#cbdadd);transform:skewY(27deg);transform-origin:top right}
.v4-bldg .s{right:11px;background:linear-gradient(#dce7e8,#b8ccd0);transform:skewY(-27deg);transform-origin:top left}
.pv-sig{position:absolute;right:-12px;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:15px;border:2px solid #fff}
.pv-sig.attn{background:var(--amber-ink,#9A5B08)}
/* portfolio states */
.pv-view{position:relative;margin:10px 20px 0}
.pv-layer{padding:18px 0}
.pv-layer + .pv-layer{border-top:1px dashed var(--line)}
.pv-layer-name{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 10px}
html.mx .pv-view{height:440px}
html.mx .pv-layer{position:absolute;inset:0;padding:0;border:0;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .5s ease;pointer-events:none}
html.mx .pv-layer.active{opacity:1;transform:none;pointer-events:auto}
html.mx .pv-layer-name{display:none}
.pv-town{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:24px 40px;padding-top:30px}
.pv-town .v4-bldg:nth-child(3){transform:scale(1.15)}
.pv-legend{display:flex;justify-content:center;gap:18px;margin-top:22px;font-size:13.5px;color:var(--muted)}
.pv-legend b{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--navy);vertical-align:-1px;margin-right:6px}
.pv-legend b.attn{background:#9A5B08}
.pv-prop{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;height:100%;padding:10px 30px}
.pv-prop .v4-bldg{transform:scale(1.5);margin:40px auto}
.v4-cards{display:grid;gap:12px}
.v4-card{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 8px 20px -14px rgba(10,14,23,.3)}
.v4-card small{display:block;color:var(--teal-ink);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.v4-card strong{display:block;margin-top:4px;font-size:16px;color:var(--text)}
.v4-card span{display:block;margin-top:3px;color:var(--muted);font-size:14px;line-height:1.45}
.pv-sys{display:grid;grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);gap:18px;align-items:center;height:100%;padding:10px 20px}
.pv-core{display:grid;place-items:center;width:180px;height:180px;margin:auto;border-radius:50%;border:1px solid rgba(0,105,92,.35);background:radial-gradient(circle,#fff 55%,rgba(0,212,184,.14));text-align:center;font-weight:700;color:var(--navy);font-size:15px;padding:24px;box-shadow:0 0 0 14px rgba(0,212,184,.06)}
.pv-sys .v4-cards{gap:14px}
.pv-eq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:34px;align-items:center;height:100%;padding:10px 30px}
.pv-unit{position:relative;width:190px;height:220px;margin:auto;border:1px solid #80939d;border-radius:16px;background:linear-gradient(145deg,#fff,#dbe5e6);box-shadow:0 22px 34px -20px rgba(10,14,23,.4)}
.pv-unit i{position:absolute;left:50%;top:40px;width:96px;height:96px;transform:translateX(-50%);border:14px solid var(--navy);border-radius:50%;box-shadow:inset 0 0 0 11px #fff,inset 0 0 0 13px var(--teal-ink)}
.pv-unit b{position:absolute;left:18px;right:18px;bottom:18px;padding:8px;border:1px solid #91a4ac;border-radius:6px;background:#fff;color:var(--navy);font:700 11px/1.35 var(--mono,ui-monospace),monospace;text-align:center}
.pv-events{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.pv-events::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--teal),var(--teal-ink),#C8942F)}
.pv-events li{position:relative;margin:0 0 10px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:#fff}
.pv-events li::before{content:"";position:absolute;left:-24px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--teal-ink);box-shadow:0 0 0 3px #fff}
.pv-events b{font-size:14.5px;color:var(--text)}
.pv-events span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
@media (max-width:820px){
  html.mx .pv-view{height:auto}
  html.mx .pv-layer{position:static;display:none;opacity:1;transform:none;transition:none}
  html.mx .pv-layer.active{display:block}
  .pv-prop,.pv-sys,.pv-eq{grid-template-columns:minmax(0,1fr);padding:0;gap:18px}
  .pv-prop .v4-bldg{transform:none;margin:0 auto}
  .pv-town{gap:18px 26px;padding-top:12px}
  .pv-town .v4-bldg{transform:scale(.8)!important;margin:-10px -8px}
  .pv-core{width:150px;height:150px}
}
/* handover */
.hv-scene{position:relative;margin:8px 20px 0}
.hv-house{position:relative;width:220px;height:200px;margin:0 auto;filter:drop-shadow(0 20px 20px rgba(10,14,23,.15))}
.hv-house i{position:absolute;display:block}
.hv-house .roof{left:14px;top:8px;width:192px;height:98px;background:linear-gradient(135deg,#7892a5,#31536c);clip-path:polygon(50% 0,100% 48%,91% 54%,50% 12%,9% 54%,0 48%)}
.hv-house .body{left:35px;top:70px;width:150px;height:108px;border:1px solid #8ba0aa;background:linear-gradient(90deg,#edf2f2,#c7d8db)}
.hv-house .door{left:93px;top:120px;width:34px;height:58px;border:1px solid #718995;background:#fff}
.hv-house .win{left:140px;top:98px;width:34px;height:30px;border:2px solid var(--teal-ink);background:rgba(0,212,184,.2)}
.hv-label{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;padding:8px 14px;border:1px solid rgba(0,105,92,.35);border-radius:9px;background:#fff;text-align:center;box-shadow:0 8px 20px -12px rgba(10,14,23,.35)}
.hv-label small{display:block;color:var(--muted);font-size:11px;letter-spacing:.1em}
.hv-label b{display:block;color:var(--navy);font-size:12.5px}
.hv-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px}
.hv-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:stretch}
.hv-person{appearance:none;font:inherit;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);cursor:pointer;min-height:44px}
.hv-person b{display:block;font-size:15px}
.hv-person span{display:block;margin-top:3px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hv-person.active{border-color:var(--teal-ink);box-shadow:0 12px 26px -16px rgba(0,105,92,.6)}
.hv-pkg{padding:12px 14px;border:1px solid rgba(0,105,92,.3);border-radius:12px;background:#fff}
.hv-pkg b{display:block;color:var(--teal-ink);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.hv-pkg span{display:block;margin-top:3px;color:var(--muted);font-size:14px;line-height:1.4}
html.mx .hv-pkg{opacity:.28;transition:opacity .35s ease}
html.mx .hv-pkg.visible{opacity:1}
html.mx .hv-pkg:not(.visible) span{visibility:hidden}
.hv-traveller{position:absolute;z-index:6;padding:7px 10px;border:1px solid var(--teal-ink);border-radius:8px;background:#fff;color:var(--teal-ink);font-size:12px;font-weight:700;pointer-events:none;opacity:0;box-shadow:0 10px 24px -12px rgba(0,105,92,.5)}
@media (min-width:1200px){
  .hv-scene{height:640px}
  .hv-house{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%)}
  .hv-halo{position:absolute;left:50%;top:40%;width:380px;height:380px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(0,105,92,.18);background:radial-gradient(circle,rgba(0,212,184,.14),rgba(0,212,184,.04) 55%,transparent 72%)}
  .hv-steps{margin:0;display:block}
  .hv-step{display:contents}
  .hv-person{position:absolute;width:190px;z-index:5}
  .hv-pkg{position:absolute;width:190px;z-index:3;background:rgba(255,255,255,.97)}
  .hv-s1 .hv-person{left:0;top:4%}.hv-s1 .hv-pkg{left:21%;top:1%}
  .hv-s2 .hv-person{left:0;top:56%}.hv-s2 .hv-pkg{left:20%;top:72%}
  .hv-s3 .hv-person{left:50%;bottom:0;transform:translateX(-50%)}.hv-s3 .hv-pkg{left:50%;top:63%;transform:translateX(-50%)}
  .hv-s4 .hv-person{right:0;top:56%}.hv-s4 .hv-pkg{right:20%;top:72%}
  .hv-s5 .hv-person{right:0;top:4%}.hv-s5 .hv-pkg{right:21%;top:1%}
}
@media (max-width:1199px){.hv-halo{display:none}.hv-traveller{display:none}}
@media (max-width:520px){.hv-step{grid-template-columns:minmax(0,1fr)}.hv-pkg{margin-left:14px}}
@media (prefers-reduced-motion:reduce){html.mx .pv-layer,html.mx .hv-pkg{transition:none}.hv-traveller{display:none}}
/* Round 3 depth: stronger spacing for major sections, inspector scope lanes, emphasis bands. */
main > .sec:not(.sec-tight){padding-top:96px;padding-bottom:96px}
@media (max-width:760px){main > .sec:not(.sec-tight){padding-top:64px;padding-bottom:64px}}
.scope-lanes > *{border-top:4px solid var(--teal-ink);padding-top:16px}
.scope-lanes > *:nth-child(2){border-top-color:#A8751A}
.scope-lanes > *:nth-child(3){border-top-color:var(--navy)}
.cost-grid{background:var(--white);border-radius:0 0 var(--r) var(--r)}
.sec-paper .cost-grid{background:transparent}
.split .diagram-row,.hero-shot .diagram-row{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:420px){.split .diagram-row,.hero-shot .diagram-row{grid-template-columns:minmax(0,1fr)}}

/* Moving signals are shown only once they are moving; at rest they would sit at the drawing's corner. */
.eco-sigs{opacity:0}
.eco-visual.is-live .eco-sigs{opacity:1}
/* Credibility and publications directly under the homepage hero (one place, no badge strip). */
.ideas-top{background:var(--white);border-bottom:1px solid var(--line)}
.ally-line{margin:0 0 22px;padding:12px 16px;border-left:3px solid var(--teal-ink);background:var(--teal-wash);color:var(--text);font-size:15px;line-height:1.5;max-width:860px}
.ally-line strong{color:var(--teal-ink)}
/* Portfolio levels: content sits in the middle of the stage, and each level has its own motion
   (only with JavaScript on and reduced motion off). */
html.mx .pv-layer{display:flex;flex-direction:column;justify-content:center}
.pv-town{position:relative}
.pv-pulse{position:absolute;left:0;top:58%;width:10px;height:10px;border-radius:50%;background:var(--teal-ink);box-shadow:0 0 12px rgba(0,212,184,.8);opacity:0}
.pv-core{position:relative}
.pv-core .pv-orbit{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal-ink);opacity:0}
@media (prefers-reduced-motion:no-preference){
  html.mx .pv-layer.active .pv-pulse{opacity:1;animation:pvPulse 4.5s ease-in-out infinite}
  html.mx .pv-layer.active .pv-core .pv-orbit{opacity:1;animation:pvOrbit 5s linear infinite}
  html.mx .pv-layer.active .v4-card,html.mx .pv-layer.active .pv-events li{animation:pvPop .5s ease both}
  html.mx .pv-layer.active .v4-card:nth-child(2),html.mx .pv-layer.active .pv-events li:nth-child(2){animation-delay:.12s}
  html.mx .pv-layer.active .v4-card:nth-child(3),html.mx .pv-layer.active .pv-events li:nth-child(3){animation-delay:.24s}
  html.mx .pv-layer.active .pv-events li:nth-child(4){animation-delay:.36s}
  html.mx .pv-layer.active .pv-events li:nth-child(5){animation-delay:.48s}
}
@keyframes pvPulse{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(min(640px,80vw));opacity:0}}
@keyframes pvOrbit{from{transform:rotate(0) translateX(104px)}to{transform:rotate(360deg) translateX(104px)}}
@keyframes pvPop{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (max-width:820px){.pv-pulse{display:none}.pv-core .pv-orbit{display:none}}
/* The Elo mark beside the Ask Elo section on the owners page. */
.elo-mark{float:right;width:160px;height:auto;margin:0 0 12px 32px}
@media (max-width:760px){.elo-mark{float:none;display:block;width:110px;margin:0 0 16px}}

/* =====================================================================================
   BRAND COLOUR PASS (founder request, 25 September 2026). Logo teal #338D8E and logo orange
   #F79B4D are brought into the page so key blocks stand apart from the white and grey
   sections. White text is only ever set on the deep logo teal (6.76:1); the orange is used
   for decoration and accents, never for text.
   ===================================================================================== */
:root{--logo-teal:#338D8E;--logo-teal-deep:#1E6566;--logo-orange:#F79B4D;--orange-wash:#FEF1E6;--orange-ink:#8A4A0F;--teal-soft:#E6F2F2}
/* a short teal-to-orange rule under every section heading */
.sec-head .h2::after{content:"";display:block;width:56px;height:4px;margin-top:16px;border-radius:2px;background:linear-gradient(90deg,var(--logo-teal),var(--logo-orange))}
.on-dark .sec-head .h2::after{background:linear-gradient(90deg,var(--teal),var(--logo-orange))}
/* kickers carry a small orange marker */
.kicker::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--logo-orange);margin-right:8px;vertical-align:1px}
/* "What it costs today": each cost becomes its own card with an orange top edge */
.cost-grid{border-top:0;gap:18px;background:transparent}
.cost-grid > div,.cost-grid > div + div{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--logo-orange);border-left:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:0 10px 26px -20px rgba(10,14,23,.35)}
.sec-paper .cost-grid{background:transparent}
@media (max-width:820px){.cost-grid{gap:14px}.cost-grid > div,.cost-grid > div + div{border-top:4px solid var(--logo-orange);padding:18px 18px 14px}}
/* "What you receive" lists sit in a soft teal panel */
.receive{background:var(--teal-soft);border-left:4px solid var(--logo-teal);border-radius:0 var(--r) var(--r) 0;padding:14px 20px}
.receive li::before{border-color:var(--logo-teal-deep)}
/* "What Harmelo does not replace": a deep teal band that reads as the boundary */
.notrep{background:var(--logo-teal-deep);border:0;border-left:4px solid var(--logo-orange);color:#fff}
.notrep b{color:#CFEDEE;font-size:14px;letter-spacing:.02em}
.notrep p{color:#fff}
.notrep a{color:#fff}
/* "Why start now": warm orange panel */
.why-now{border-left-color:var(--logo-orange);background:var(--orange-wash)}
.why-now b{color:var(--orange-ink)}
/* numbered workflow steps use the logo teal */
.flow-list li::before{background:var(--logo-teal-deep);color:#fff}
/* three-part explainer boxes get a teal top edge */
.themes > *{border-top:3px solid var(--logo-teal)}
.scope-lanes > *:nth-child(1){border-top-color:var(--logo-teal)}
/* hero: a quiet teal and orange glow behind the content */
.mk-hero{background-image:radial-gradient(640px 360px at 88% 18%,rgba(51,141,142,.12),transparent 70%),radial-gradient(420px 260px at 6% 92%,rgba(247,155,77,.10),transparent 70%),linear-gradient(180deg,#FFFFFF 0%,#EEF2F6 100%)}
/* the credibility section under the homepage hero */
.ally-line{border-left-color:var(--logo-orange);background:var(--teal-soft)}
.press-card{border-top-color:var(--logo-teal)}
.press-card:hover{border-top-color:var(--logo-orange)}
/* three-part explainers become separate cards so they stand off the section background */
.themes{border-top:0;gap:18px}
.themes > .theme,.themes > .theme + .theme{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--logo-teal);border-radius:var(--r);padding:18px 20px;box-shadow:0 10px 26px -22px rgba(10,14,23,.35)}
.scope-lanes > *:nth-child(2){border-top-color:#A8751A}
.scope-lanes > *:nth-child(3){border-top-color:var(--navy)}

/* WIP29 founder visual corrections. Efficiency Canada gets its own credibility box; Elo gets its own feature card with the
   logo directly beside the paragraph it supports, materially larger. New classes only; no existing rule changes. */
.ally-box{max-width:560px;margin:0 auto;padding:22px 26px;border:1px solid var(--line,#D6DDE4);border-left:5px solid var(--teal-ink,#0B7F73);border-radius:12px;background:var(--surface,#fff);text-align:left}
.ally-title{margin:0 0 6px;font-size:22px;line-height:1.25}
.ally-text{margin:0;font-size:15.5px}
.elo-feature{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center;padding:32px;border:1px solid var(--line,#D6DDE4);border-radius:16px;background:var(--surface,#fff)}
.elo-feature-logo{width:220px;height:auto;display:block}
.elo-feature-body .sub{margin-bottom:0}
@media(max-width:760px){.elo-feature{grid-template-columns:1fr;gap:18px;padding:22px}.elo-feature-logo{width:168px}}