/* Layout: a contractor's work order. Dark forest bands for the promise, paper pages for the detail,
   and a tape-measure rule that runs between sections: the pipeline is measured like a job. */
:root {
  --paper: #f3f6f1; --surface: #ffffff; --ink: #14201a; --ink-soft: #4b5a50; --line: #dbe3da;
  --band: #0f2d1a; --band-2: #163c25; --on-band: #eef4ef; --on-band-soft: #a8bcae;
  --green: #1b8740; --orange: #ee8f2a; --orange-ink: #1c1206; --gold: #e2b54e; --flag: #b4561a;
  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wrap: 1280px; --radius: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0b140e; --surface: #121f17; --ink: #e7eee8; --ink-soft: #a2b2a6; --line: #24362a;
  --band: #071209; --band-2: #0f2416; --on-band: #eef4ef; --on-band-soft: #9fb3a5;
  --green: #52b56a; --orange: #f39a3a; --orange-ink: #1c1206; --gold: #ebc263; --flag: #f0a35e; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #0b140e; --surface: #121f17; --ink: #e7eee8; --ink-soft: #a2b2a6; --line: #24362a;
  --band: #071209; --band-2: #0f2416; --on-band: #eef4ef; --on-band-soft: #9fb3a5;
  --green: #52b56a; --orange: #f39a3a; --orange-ink: #1c1206; --gold: #ebc263; --flag: #f0a35e; color-scheme: dark }

* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.22rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
.eyebrow { font: 500 0.74rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 62ch; }
section { padding-block: clamp(56px, 8vw, 96px); }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 40px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 11px; font: 700 0.98rem var(--display); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn-primary { background: var(--orange); color: var(--orange-ink); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }

/* preview strip */
.preview { background: var(--gold); color: #1d1607; font: 500 0.78rem/1.4 var(--mono); }
.preview .wrap { padding-block: 9px; display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* header */
header.site { background: var(--band); color: var(--on-band); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; border-bottom: 1px solid rgba(255,255,255,.08); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--band); }
header.site .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-inline: 2px; position: relative; z-index: 1; touch-action: manipulation; text-decoration: none; font: 800 1.05rem var(--display); white-space: nowrap; }
.brand img { width: 38px; height: 38px; border-radius: 9px; }
nav.primary { display: flex; gap: 4px; margin-left: 12px; }
nav.primary a { text-decoration: none; padding: 8px 11px; border-radius: 8px; font: 500 0.92rem var(--body); color: var(--on-band-soft); }
nav.primary a:hover { color: var(--on-band); background: rgba(255,255,255,.07); }
.utils { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.utils .login { text-decoration: none; font-weight: 500; font-size: .92rem; color: var(--on-band-soft); }
.utils .btn { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1.5px solid rgba(255,255,255,.3); color: var(--on-band); border-radius: 9px; min-height: 42px; padding: 0 14px; font: 600 .9rem var(--body); cursor: pointer; }
.drawer { display: none; border-top: 1px solid rgba(255,255,255,.1); }
.drawer .wrap { display: grid; gap: 4px; padding-block: 14px 20px; }
.drawer a { text-decoration: none; padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 500; }
.drawer .btn { margin-top: 10px; justify-content: center; }
@media (max-width: 1080px) { nav.primary, .utils { display: none; } .menu-btn { display: inline-flex; align-items: center; } header.site.open .drawer { display: block; } }

/* hero */
.hero { background: var(--band); color: var(--on-band); padding-block: clamp(48px, 7vw, 88px) clamp(56px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { margin-top: 16px; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero p.lede { color: var(--on-band-soft); margin-top: 20px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .ctas .btn-ghost { color: var(--on-band); border-color: rgba(255,255,255,.35); }
.hero .where { margin-top: 26px; font: 500 .78rem var(--mono); letter-spacing: .06em; color: var(--on-band-soft); }

.workorder { background: var(--band-2); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 22px; min-width: 0; }
.wo-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-band-soft); }
.wo-top b { color: var(--gold); font-weight: 500; }
.wo-job { display: flex; align-items: center; gap: 14px; margin: 16px 0 18px; }
.wo-job svg { flex: none; }
.wo-job strong { font: 700 1.1rem var(--display); display: block; }
.wo-job span { color: var(--on-band-soft); font-size: .9rem; }
.tape { position: relative; padding-left: 26px; display: grid; gap: 0; }
.tape::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 6px; border-radius: 3px; background: var(--gold);
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, rgba(29,22,7,.55) 7px 8px); }
.stage { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: .93rem; }
.stage:last-child { border-bottom: 0; }
.stage::before { content: ""; position: absolute; left: -24px; top: 15px; width: 10px; height: 2px; background: var(--on-band-soft); }
.stage .who { font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-band-soft); white-space: nowrap; align-self: center; }
.stage .who.you { color: var(--orange); }
.stage.lit { color: var(--on-band); }
.stage.lit::before { background: var(--orange); width: 14px; }
.wo-note { margin-top: 14px; font-size: .8rem; color: var(--on-band-soft); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* tape-measure divider between sections */
.rule { height: 18px; background: var(--paper);
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, var(--ink-soft) 0 1.5px, transparent 1.5px 96px);
  background-size: 100% 8px, 100% 16px; background-repeat: no-repeat; background-position: 0 0, 0 0; opacity: .7; }

/* problem */
.problem .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.chores { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.chores li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.chores li span:last-child { font: 500 .74rem var(--mono); color: var(--ink-soft); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; align-self: center; }
@media (max-width: 860px) { .problem .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.pillar { padding: 26px 24px 28px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.pillar:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.pillar .tag { font: 500 .72rem var(--mono); color: var(--green); letter-spacing: .1em; text-transform: uppercase; }
.pillar p { color: var(--ink-soft); }
@media (max-width: 860px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillar, .pillar:not(:nth-child(3n+1)) { padding: 22px 0; border-left: 0; } }

/* audiences */
.audiences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.aud { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 12px; grid-template-rows: auto auto 1fr auto; }
.aud .size { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.aud p { color: var(--ink-soft); }
.aud a { font: 700 .95rem var(--display); color: var(--green); text-decoration: none; }
.aud a:hover { text-decoration: underline; }
@media (max-width: 900px) { .audiences { grid-template-columns: minmax(0, 1fr); } }

/* models */
.models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.model { border-radius: var(--radius); padding: 28px; display: grid; gap: 14px; align-content: start; }
.model.now { background: var(--band); color: var(--on-band); }
.model.later { border: 1.5px dashed var(--line); background: transparent; }
.model .status { justify-self: start; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.model.now .status { background: var(--orange); color: var(--orange-ink); }
.model.later .status { border: 1px solid var(--flag); color: var(--flag); }
.model.now p, .model.now li { color: var(--on-band-soft); }
.model.later p, .model.later li { color: var(--ink-soft); }
.model ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
@media (max-width: 860px) { .models { grid-template-columns: minmax(0, 1fr); } }

/* process rail */
.rail-band { background: var(--band-2); color: var(--on-band); }
.rail-band .eyebrow { color: var(--gold); }
.rail-band .lede { color: var(--on-band-soft); }
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 4px; background: rgba(255,255,255,.14); border-radius: 2px; }
.rail li { position: relative; padding-right: 14px; display: grid; gap: 10px; align-content: start; }
.rail .dot { width: 42px; height: 42px; border-radius: 50%; background: var(--band); border: 2px solid rgba(255,255,255,.3); display: grid; place-items: center; font: 700 .9rem var(--display); position: relative; transition: background .3s, border-color .3s, color .3s; }
.rail li.on .dot { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.rail h3 { font-size: 1.02rem; }
.rail p { font-size: .88rem; color: var(--on-band-soft); }
.rail .owner { font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 960px) { .rail { grid-template-columns: minmax(0, 1fr); gap: 18px; } .rail::before { left: 19px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .rail li { grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; } .rail li > :not(.dot) { grid-column: 2; } .rail .dot { grid-row: 1 / span 3; } }

/* dashboard preview */
.dash { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.dash-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.sample { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--gold); color: #1d1607; padding: 5px 10px; border-radius: 6px; }
.dash-bar .org { font: 700 .98rem var(--display); }
.seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { background: transparent; color: var(--ink-soft); border: 0; padding: 8px 14px; font: 500 .85rem var(--body); cursor: pointer; min-height: 38px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric { padding: 18px 20px; border-right: 1px solid var(--line); display: grid; gap: 4px; }
.metric:last-child { border-right: 0; }
.metric .k { font-size: .8rem; color: var(--ink-soft); }
.metric .v { font: 800 1.7rem var(--display); font-variant-numeric: tabular-nums; }
.metric .d { font: 500 .72rem var(--mono); color: var(--ink-soft); }
.funnel { border-top: 1px solid var(--line); padding: 20px; display: grid; gap: 10px; }
.frow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; gap: 14px; align-items: center; font-size: .88rem; }
.ftrack { height: 14px; background: var(--paper); border-radius: 7px; overflow: hidden; }
.ffill { height: 100%; background: var(--green); border-radius: 7px; transition: width .4s ease; }
.frow .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dash-foot { border-top: 1px solid var(--line); padding: 12px 20px; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 980px) { .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .metric:nth-child(3) { border-right: 0; } .metric:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric { border-bottom: 1px solid var(--line); } .metric:nth-child(3) { border-right: 1px solid var(--line); } .metric:nth-child(2n) { border-right: 0; } .frow { grid-template-columns: 104px minmax(0, 1fr) 44px; } .seg { margin-left: 0; } }

/* stays yours */
.yours .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.ledger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.ledger div { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ledger div:nth-child(odd) { border-right: 1px solid var(--line); }
.ledger div:nth-last-child(-n+2) { border-bottom: 0; }
.ledger .h { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--paper); }
.ledger .h.you { color: var(--green); }
@media (max-width: 860px) { .yours .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* trades */
.trades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.trade-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 12px; }
.trade-feature .tag { justify-self: start; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.trade-feature ul { margin: 0; padding-left: 18px; color: var(--ink-soft); display: grid; gap: 4px; }
.trade-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: .9rem; background: var(--surface); }
.chip small { font: 500 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-left: 6px; }
@media (max-width: 760px) { .trades { grid-template-columns: minmax(0, 1fr); } }

/* onboarding */
.qualify .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; }
.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.checks li { padding-left: 26px; position: relative; color: var(--ink-soft); }
.checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border: 2px solid var(--green); border-radius: 3px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; border-left: 2px solid var(--line); }
.steps li { counter-increment: step; position: relative; padding: 0 0 26px 30px; display: grid; gap: 4px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(step); position: absolute; left: -17px; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); display: grid; place-items: center; font: 700 .85rem var(--display); }
.steps p { color: var(--ink-soft); }
@media (max-width: 860px) { .qualify .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* commercial */
.fees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.fee { padding: 22px; border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.fee:last-child { border-right: 0; }
.fee .what { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.fee p { color: var(--ink-soft); font-size: .94rem; }
.fees-note { margin-top: 16px; color: var(--ink-soft); font-size: .92rem; max-width: 70ch; }
@media (max-width: 900px) { .fees { grid-template-columns: minmax(0, 1fr); } .fee { border-right: 0; border-bottom: 1px solid var(--line); } .fee:last-child { border-bottom: 0; } }

/* trust */
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.trust-item { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); }
.trust-item p { color: var(--ink-soft); font-size: .94rem; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* faq */
.faq .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; }
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font: 700 1.04rem var(--display); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 500 1.4rem var(--body); color: var(--green); }
details[open] summary::after { content: "–"; }
details p { padding: 0 0 18px; color: var(--ink-soft); max-width: 64ch; }
@media (max-width: 860px) { .faq .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* final cta */
.final { background: var(--band); color: var(--on-band); text-align: left; }
.final .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
.final .lede { color: var(--on-band-soft); margin-top: 14px; }
.final .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.final .btn-ghost { color: var(--on-band); border-color: rgba(255,255,255,.35); }
@media (max-width: 860px) { .final .wrap { grid-template-columns: minmax(0, 1fr); } }

/* footer */
footer { background: var(--band); color: var(--on-band-soft); border-top: 1px solid rgba(255,255,255,.08); }
footer .wrap { padding-block: 48px 36px; display: grid; gap: 36px; }
.fcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.fcols h4 { margin: 0 0 10px; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-band); }
.fcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .92rem; }
.fcols a { text-decoration: none; }
.fcols a:hover { color: var(--on-band); }
.fbase { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; }
@media (max-width: 760px) { .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* placeholder link toast */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 10px; font-size: .9rem; max-width: calc(100% - 32px); z-index: 40; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- shared additions for the inner pages (no inline styles: the site's security policy allows only its own stylesheets) ---- */
.pt0 { padding-top: 0; }
.m0 { margin: 0; }
.mt14 { margin-top: 14px; }
figure.workorder { margin: 0; }
.more-link { font: 700 .95rem var(--display); color: var(--green); text-decoration: none; }
.more-link:hover { text-decoration: underline; }
.utils .home-link { text-decoration: none; font-size: .92rem; color: var(--on-band-soft); }
.utils .home-link:hover { color: var(--on-band); }
nav.primary a[aria-current="page"] { color: var(--on-band); background: rgba(255,255,255,.1); }

/* page hero for inner pages */
.page-hero { background: var(--band); color: var(--on-band); padding-block: clamp(44px, 6vw, 76px); }
.page-hero .eyebrow { color: var(--gold); }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: 14px; max-width: 22ch; }
.page-hero .lede { color: var(--on-band-soft); margin-top: 18px; }
.page-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.page-hero .btn-ghost { color: var(--on-band); border-color: rgba(255,255,255,.35); }
.crumbs { font: 500 .74rem var(--mono); letter-spacing: .06em; color: var(--on-band-soft); margin-bottom: 14px; }
.crumbs a { color: var(--on-band-soft); }

/* generic card grid */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; }
.card .tag { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.card .tag.later { color: var(--flag); }
.card p, .card li { color: var(--ink-soft); }
.card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.card dl { margin: 0; display: grid; gap: 8px; }
.card dt { font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.card dd { margin: 0; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards, .cards.two { grid-template-columns: minmax(0, 1fr); } }

/* responsibility table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.resp { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
table.resp th, table.resp td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.resp tr:last-child td { border-bottom: 0; }
table.resp th { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); }
table.resp td.you { color: var(--green); font-weight: 600; }

/* prose blocks */
.prose { max-width: 760px; display: grid; gap: 16px; }
.prose h2 { margin-top: 18px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* three trade modules */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.module { padding: 24px 22px 26px 0; display: grid; gap: 12px; align-content: start; }
.module + .module { padding-left: 22px; border-left: 1px solid var(--line); }
.module ol, .module ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-soft); }
@media (max-width: 900px) { .modules { grid-template-columns: minmax(0, 1fr); } .module, .module + .module { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* status notices */
.notice { border: 1.5px dashed var(--flag); border-radius: var(--radius); padding: 16px 18px; color: var(--ink); background: var(--surface); }
.notice strong { font-family: var(--display); }

/* forms */
form.inquiry { display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 30px); }
.field { display: grid; gap: 6px; }
.field label, .field legend { font: 600 .92rem var(--body); }
.field .hint { font-size: .84rem; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: 400 1rem var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 46px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.field .err { color: var(--flag); font-size: .86rem; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
fieldset.field { border: 0; padding: 0; margin: 0; }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.reasons label { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 500; cursor: pointer; background: var(--paper); }
.reasons input { width: auto; min-height: 0; margin: 0; accent-color: var(--green); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--green); flex: none; }
.form-status { font-weight: 600; }
.form-status.bad { color: var(--flag); }

/* legal draft */
.draft-badge { display: inline-block; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--flag); border: 1px solid var(--flag); border-radius: 999px; padding: 4px 10px; }
.legal-section { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 8px; }
.legal-section p { color: var(--ink-soft); }

.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: 8px; }

/* ---- EGIS demo promotion (--with-demo builds only): the button is gold so it stands apart from the orange "Grow My Business" ---- */
.btn-demo { background: var(--gold); color: #1d1607; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(226, 181, 78, .22); }
.btn-demo:hover { transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(226, 181, 78, .3); }
.btn-demo-sm { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.btn-demo-lg { min-height: 58px; padding: 0 30px; font-size: 1.12rem; }
.demo-mobile { display: none; }
@media (max-width: 1080px) { .demo-mobile { display: inline-flex; margin-left: auto; } .demo-mobile + .menu-btn { margin-left: 10px; } }
@media (max-width: 380px) { .brand { font-size: .95rem; } .demo-mobile { padding: 0 12px; } }

.demo-hero { display: grid; gap: 6px; margin-top: 26px; padding: 20px 22px; border-radius: 16px; text-decoration: none; color: var(--on-band);
  background: rgba(226, 181, 78, .10); border: 2px solid var(--gold); max-width: 560px; transition: background .15s ease, transform .15s ease; }
.demo-hero:hover { background: rgba(226, 181, 78, .18); transform: translateY(-1px); }
.demo-hero-tag { justify-self: start; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--gold); color: #1d1607; padding: 4px 10px; border-radius: 999px; }
.demo-hero strong { font: 800 1.35rem var(--display); }
.demo-hero span { color: var(--on-band-soft); }
.demo-hero .demo-hero-go { justify-self: start; margin-top: 6px; font: 700 1rem var(--display); color: var(--gold); }
.demo-hero .demo-hero-go::after { content: " \2192"; }
/* the extra header button: keep menu words on one line, and let the small "For homeowners" link live in the drawer and footer below 1360 px */
nav.primary a { white-space: nowrap; }
@media (max-width: 1360px) { .utils .home-link { display: none; } nav.primary { margin-left: 4px; } nav.primary a { padding: 8px 9px; } }
/* small phones: the logo name, "Try the demo" and "Menu" share one line (at 375 px the Menu button ran 7 px past the edge) */
@media (max-width: 440px) {
  header.site .wrap { gap: 10px; }
  .brand { gap: 8px; font-size: .92rem; }
  .brand img { width: 32px; height: 32px; }
  .demo-mobile { padding: 0 11px; font-size: .85rem; min-height: 40px; }
  .demo-mobile + .menu-btn { margin-left: 8px; padding: 0 11px; min-height: 40px; }
}

/* ---- the FEATURED VIDEO (--with-video builds; owner 2026-10-31: "a featured video ... autoplay ... the main attraction as soon as you open
   the page, and then you have to close it. Just like the Equity Geeks homepage video"). The viewer is the homeowner site's own
   /header-video-viewer.js; these are its rules from styles.css, in this site's tokens, plus the featured section it collapses back into. ---- */
.featured-video { padding-block: 0 clamp(32px, 5vw, 58px); }
.fv-head { display: grid; gap: 12px; max-width: 760px; margin-top: 22px; }
.fv-frame { position: relative; border-radius: 0 0 18px 18px; overflow: hidden; background: #000; border: 1px solid var(--line); border-top: 0; aspect-ratio: 16 / 9; max-width: 1100px; }
.fv-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.fv-sound { position: absolute; left: 14px; top: 14px; z-index: 2; min-height: 44px; padding: 0 16px; color: #fff; border-color: rgba(255,255,255,.7); background: rgba(8,28,16,.82); box-shadow: 0 4px 18px rgba(0,0,0,.3); }
.fv-sound span { color: #a8bcae; font-size: .78rem; }
.fv-sound[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.fv-sound[aria-pressed="true"] span { color: #18330f; }
.fv-open { position: absolute; right: 14px; top: 14px; color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .45); min-height: 40px; padding: 0 14px; font-size: .9rem; }
.fv-open:hover, .fv-open:focus-visible { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
@media (max-width: 520px) { .fv-sound { left: 8px; top: 8px; min-height: 40px; padding: 0 11px; font-size: .82rem; } .fv-open { right: 8px; top: 8px; min-height: 40px; padding: 0 10px; font-size: .8rem; } }

.header-video-viewer { align-items: center; background: rgba(3, 9, 5, .96); display: flex; inset: 0; justify-content: center; padding: clamp(14px, 3vw, 38px); position: fixed; z-index: 10000; }
.header-video-viewer[hidden] { display: none; }
.header-video-viewer-panel { background: #061009; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); display: flex; flex-direction: column; max-height: calc(100dvh - clamp(28px, 6vw, 76px)); max-width: min(1180px, calc(100vw - 28px)); overflow: hidden; width: 100%; }
.header-video-viewer-toolbar { align-items: center; background: #061009; display: flex; flex: 0 0 auto; gap: 16px; justify-content: space-between; min-height: 54px; padding: 8px 10px 8px 16px; position: relative; z-index: 2; }
.header-video-viewer-toolbar strong { color: #fff; flex: 0 0 auto; font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.header-video-viewer-sound-prompt { color: #dbe6de; flex: 1 1 auto; font-size: .86rem; line-height: 1.3; margin: 0; text-align: right; }
.header-video-viewer-sound { align-items: center; background: var(--orange); border: 1px solid var(--orange); border-radius: 8px; color: var(--orange-ink); cursor: pointer; display: inline-flex; flex: 0 0 auto; font: 800 .92rem var(--display); justify-content: center; min-height: 40px; padding: 8px 14px; }
.header-video-viewer-sound[aria-pressed="true"] { background: #1b8740; border-color: rgba(154, 240, 156, .72); color: #fff; }
.header-video-viewer-close { background: transparent; border: 1px solid rgba(245, 154, 47, .72); border-radius: 8px; color: #fff; cursor: pointer; font: 700 .92rem var(--display); min-height: 40px; padding: 8px 14px; }
.header-video-viewer-sound:hover, .header-video-viewer-sound:focus-visible, .header-video-viewer-close:hover, .header-video-viewer-close:focus-visible { background: #f59a2f; border-color: #f59a2f; color: #07120a; outline: none; }
.header-video-viewer-frame { aspect-ratio: 16 / 9; background: #000; flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; width: 100%; }
.header-video-viewer-media { display: block !important; height: 100% !important; inset: auto !important; object-fit: contain !important; object-position: center !important; position: static !important; width: 100% !important; }
body.header-video-viewer-open { overflow: hidden; }
@media (max-width: 680px) {
  .header-video-viewer { align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) 0 0; }
  .header-video-viewer-panel { border-left: 0; border-right: 0; border-radius: 0; max-height: calc(100dvh - max(10px, env(safe-area-inset-top))); max-width: 100vw; }
  .header-video-viewer-toolbar { align-items: stretch; flex-wrap: wrap; min-height: 52px; padding: 10px 10px 10px 14px; }
  .header-video-viewer-toolbar strong { font-size: .63rem; }
  .header-video-viewer-sound-prompt { flex-basis: 100%; font-size: .78rem; order: 3; text-align: left; }
  .header-video-viewer-sound, .header-video-viewer-close { flex: 1 1 0; }
  .fv-open { top: 10px; right: 10px; }
}