/* Helio SEO homepage on the product's own design system (signed off 2026-09-01):
   cool neutral ground, white 14px cards with a soft shadow, a near-black panel
   colour that matches the app's rail, and gold as the one accent. The rest of
   the marketing site still runs on sales.css; this file only styles the home
   page, and the token block below retints the shared nav, footer and sticky bar
   so the page reads as one piece. Every screenshot on the page is the real
   product, shot from a real customer site, not a CSS mock-up. */
body.home{
  --bg:#f4f6fa; --surface:#fff; --ink:#131b2c; --ink2:#5d6474; --line:#e3e8f0;
  --rail:#16181c; --rail2:#1f2227; --gold:#f5c877; --amber:#e0932a; --amber-ink:#8a5a0b;
  --blue:#2c5ef0; --green:#1a7f3c; --red:#c2410c;
  --shadow:none;
  --r:10px;
  --display:'IBM Plex Sans','Instrument Sans',sans-serif;
  --white:#fff;
  /* shared-sheet overrides */
  --navy:#16181c; --navy2:#1f2227; --blue-dark:#2f3238; --grey:#5d6474;
}
body.home .navbar{background:rgba(244,246,250,.94)}
body.home footer{background:#fff}
body.home .annbar{background:var(--rail)}
body.home .annbar .butter,body.home .annbar .annpill{color:var(--ink)}
body.home .annbar .butter{color:var(--gold)}
body.home .annbar .annpill{display:none}
body.home .stickycta .btn.blue{background:var(--gold);color:var(--ink)}
body.home .stickycta .btn.blue:hover{background:#ffd98a}
body.home h1,body.home h2,body.home h3{font-family:var(--display);font-weight:600}
body.home h2{font-size:clamp(28px,3.4vw,38px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
body.home .hm-head[style*="center"] h2{margin-left:auto;margin-right:auto}
body.home .secsub{color:var(--ink2);max-width:78ch;text-wrap:pretty;font-size:17px;line-height:1.55}
body.home section{padding:44px 0}
/* alternate the ground so the sections read as separate pieces */
body.home section.hm-white{background:var(--white)}
body.home section.hm-white + section.hm-white,body.home section:not(.hm-white):not(.hm-dark) + section:not(.hm-white):not(.hm-dark){border-top:1px solid var(--line)}
@media(max-width:760px){body.home section{padding:44px 0}}

.hm-head{margin-bottom:20px}
.hm-head .secsub{margin-top:12px}

/* buttons */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:15.5px;text-decoration:none;transition:transform .15s,background .15s;color:var(--ink);white-space:nowrap}
.hm-btn:hover{transform:translateY(-1px)}
.hm-btn.gold{background:var(--gold);color:var(--ink)}
.hm-btn.gold:hover{background:#ffd98a}
.hm-btn.dark{background:var(--rail);color:#fff}
.hm-btn.dark:hover{background:#2a2e35}
.hm-btn.ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.hm-btn.ghost:hover{border-color:#fff}
.hm-btn.line{border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.hm-btn.line:hover{border-color:var(--ink)}
.hm-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* cards */
.hm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.hm-shot{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;background:var(--surface)}
.hm-shot img{width:100%;height:auto;display:block}
.hm-cap{font-size:13px;color:var(--ink2);margin-top:12px;line-height:1.5}
.hm-cap b{color:var(--ink);font-weight:600}
.hm-link{color:var(--ink);font-weight:600;font-size:15px;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.hm-link:hover{text-decoration-color:var(--ink)}
.hm-dark .hm-link,.hm-askproof .hm-link{color:#fff}
body.home .secsub a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}

/* ── hero: on the page's own white ground, copy first, then the product shown
   plain (no browser chrome, no shadow, no glow), then the integrations line ── */
.hm-hero{background:var(--bg);color:var(--ink);padding:26px 0 0;position:relative;border-bottom:1px solid var(--line)}
.hm-herogrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.hm-hero .hm-who{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink2);display:block}
.hm-hero .hm-who p{margin:0 0 8px;font-size:13.5px}
.hm-hero .hm-who span{color:var(--ink);margin-right:22px;font-size:14.5px}
.hm-hero .hm-who img{filter:none;width:18px;height:18px}
.hm-hero .hm-ask{border:1px solid var(--line);box-shadow:none}
/* the one warm note in the hero: the answer card's bar in the app's dark rail
   colour with the gold wordmark treatment, so it reads as the product speaking */
.hm-hero .hm-ask .bar{background:var(--rail);color:#fff;border-bottom-color:var(--rail)}
.hm-hero .hm-ask .bar img{filter:brightness(0) invert(1)}
.hm-hero .hm-ask.hit .bar .st{background:#d7f0de;color:#12662f}
.hm-hero .hm-ask.hit .foot{background:#eef8f1;color:var(--green);border-top-color:#cfe9d7}
.hm-hero .hm-ask .a{color:var(--ink)}
.hm-heroask .hm-heronote{border-top:0;padding:10px 0 0}
.hm-hero .hm-intro{font-size:14.5px;color:var(--ink2);margin-bottom:10px}
.hm-hero h1{font-weight:600;font-size:clamp(34px,3.6vw,50px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
.hm-hero .lead{margin-top:14px;font-size:16.5px;line-height:1.5;color:var(--ink2);max-width:640px;text-wrap:pretty}
.hm-hero .lead b{color:var(--ink);font-weight:600}
.hm-hero .hm-ctas{margin-top:16px;gap:22px}
.hm-hero .fine{margin-top:12px;font-size:13.5px;color:var(--ink2)}
.hm-heropub{margin-top:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:flex-start}
.hm-heropub .logos{justify-content:flex-start}
.hm-heropub .hm-link{margin-left:auto}
.hm-heroshot{margin-top:28px}
.hm-shotlead{margin-bottom:16px;max-width:64ch}
.hm-shotlead h3{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.hm-shotlead p{margin-top:8px;font-size:16px;line-height:1.5;color:var(--ink2)}
.hm-heroshot img{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0;aspect-ratio:2/1;object-fit:cover;object-position:top}
.hm-heronote{padding:10px 0 12px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line)}
@media(max-width:900px){.hm-herogrid{grid-template-columns:1fr;gap:28px}}
@media(max-width:760px){
  .hm-hero{padding-top:28px}
  .hm-heroshot img{aspect-ratio:auto}
}

/* ── the four parts of the score: a table, with the demo's own numbers ── */
.hm-parts{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.hm-parts .row{display:grid;grid-template-columns:150px 150px 1.25fr 1fr;gap:24px;padding:16px 22px;align-items:center;border-top:1px solid var(--line)}
.hm-parts .row.hd{padding:10px 22px;font-size:12.5px;font-weight:600;color:var(--ink2);border-top:0;background:var(--bg)}
.hm-parts .k{font-family:var(--display);font-weight:700;font-size:17px}
.hm-parts .sc{display:grid;gap:6px}
.hm-parts .sc b{font-family:var(--display);font-size:20px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.hm-parts .sc i{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.hm-parts .sc i::after{content:"";display:block;height:100%;width:var(--v);background:var(--c);border-radius:3px}
.hm-parts .sc.na b{color:var(--ink2);font-size:14px;font-family:'Instrument Sans',sans-serif;font-weight:500}
.hm-parts p{font-size:14.5px;line-height:1.5;color:var(--ink)}
.hm-parts p.how{color:var(--ink2);font-size:13.5px}
.hm-parts + .hm-cap{margin-top:10px}
@media(max-width:900px){.hm-parts .row{grid-template-columns:130px 110px 1fr;gap:16px}.hm-parts .row .how,.hm-parts .row.hd span:last-child{display:none}}
@media(max-width:600px){.hm-parts .row{grid-template-columns:1fr 100px;padding:14px 16px}.hm-parts .row p{grid-column:1/-1}.hm-parts .row.hd{display:none}}
.hm-scorerow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:36px}
.hm-scorerow .copy h3{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.hm-scorerow .copy p{margin-top:12px;color:var(--ink2);font-size:16px;line-height:1.6}
.hm-scorerow .copy p b{color:var(--ink);font-weight:600}
@media(max-width:980px){.hm-scorerow{grid-template-columns:1fr}}

/* ── the AI front door ── */
.hm-dark{background:var(--rail);color:#fff}
.hm-dark h2{color:#fff;max-width:none}
#ai .secsub{max-width:none}
.hm-dark .secsub{color:#b7bcc7}
.hm-dark .secsub b{color:#fff}
.hm-askgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:stretch}
.hm-named{background:var(--surface);color:var(--ink);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.hm-named .bar{padding:12px 20px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600}
.hm-named ul{list-style:none;margin:0;padding:8px 20px}
.hm-named li{display:grid;grid-template-columns:190px 1fr 44px;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.hm-named li:last-child{border-bottom:0}
.hm-named li i{display:block;height:8px;border-radius:4px;background:var(--bg);position:relative;overflow:hidden}
.hm-named li i::after{content:"";position:absolute;inset:0;width:var(--v);background:#6d4fd8;border-radius:4px}
.hm-named li b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink2)}
.hm-named p{margin:auto 0 0;padding:14px 20px 16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink2)}
.hm-ask{background:var(--surface);color:var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hm-ask .bar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600}
.hm-ask .bar img{width:18px;height:18px}
.hm-ask .bar .st{margin-left:auto;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.hm-ask.miss .bar .st{background:#fbe9e2;color:var(--red)}
.hm-ask.hit .bar .st{background:#e2f3e7;color:var(--green)}
.hm-ask .pane{padding:18px 20px 6px}
.hm-ask .q{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:15.5px}
.hm-ask .q .ico{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--ink2)}
.hm-ask .a{margin-top:14px;padding-left:38px;font-size:14.5px;line-height:1.6;color:#333a48}
.hm-ask .a p+p{margin-top:8px}
.hm-ask .a b{font-weight:600;color:var(--ink)}
.hm-ask .cite{display:inline-block;font-size:10.5px;font-weight:700;line-height:1;padding:3px 5px;border-radius:5px;background:var(--bg);border:1px solid var(--line);color:var(--ink2);margin-left:3px;vertical-align:2px}
.hm-ask .cite.you{background:#fff3da;border-color:#f3d9a3;color:var(--amber-ink)}
.hm-ask .src{padding:12px 20px 14px 58px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink2)}
.hm-ask .src .lbl{width:100%;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.hm-ask .src span:not(.lbl){display:inline-flex;align-items:center;gap:6px}
.hm-ask .src i{width:8px;height:8px;border-radius:50%;background:#c8ced9}
.hm-ask .src .you{color:var(--amber-ink);font-weight:600}
.hm-ask .src .you i{background:var(--amber)}
.hm-ask .foot{padding:12px 20px;border-top:1px solid var(--line);font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:center}
.hm-ask.miss .foot{color:var(--red)}
.hm-ask.hit .foot{color:var(--green)}
.hm-askproof{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;margin-top:40px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1)}
.hm-askproof h3{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.hm-askproof p{margin-top:0;color:#b7bcc7;font-size:16px;line-height:1.6}
.hm-askproof p b{color:#fff;font-weight:600}
.hm-who{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13.5px;color:#8b909b}
.hm-who span{display:inline-flex;align-items:center;gap:7px;color:#d5d8de;font-weight:600}
.hm-who img{width:16px;height:16px;filter:brightness(0) invert(1)}
@media(max-width:860px){.hm-askgrid,.hm-askproof{grid-template-columns:1fr}}

/* ── question in, article out (two real screens) ── */
.hm-flow{display:grid;gap:30px}
.hm-flow .lbl{font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.hm-flow .lbl .n{color:var(--ink2);font-weight:600}
.hm-pub{margin-top:34px;display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--ink2)}
.hm-pub b{color:var(--ink);font-weight:600}
.hm-pub .logos{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.hm-pub .logos span{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);font-size:13.5px}
.hm-pub .logos img{width:18px;height:18px}

/* ── proof from Google ── */
.hm-proof{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.hm-proof .stack{display:grid;gap:16px}
.hm-idxrow{display:grid;grid-template-columns:1fr;gap:12px;max-width:340px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.hm-idxrow .hm-cap{margin:0;font-size:14px;line-height:1.5}
@media(max-width:560px){.hm-idxrow{grid-template-columns:1fr}}
.hm-points{list-style:none;margin-top:22px;display:grid;gap:12px;max-width:52ch}
.hm-points li{font-size:15.5px;line-height:1.55;color:var(--ink2)}
.hm-points li b{color:var(--ink);font-weight:600}
@media(max-width:900px){.hm-proof{grid-template-columns:1fr}}

/* ── how it works: heading left, the four steps as a plain numbered list ── */
.hm-howrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.hm-howrow .hm-head{margin-bottom:0}
.hm-steplist{list-style:none;counter-reset:step;border-top:1px solid var(--line)}
.hm-steplist li{counter-increment:step;display:grid;grid-template-columns:32px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.hm-steplist li::before{content:counter(step) ".";font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink2);line-height:1.2}
.hm-steplist h3{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.hm-steplist p{margin-top:5px;font-size:15px;line-height:1.55;color:var(--ink2)}
.hm-steplist p b{color:var(--ink);font-weight:600}
@media(max-width:900px){.hm-howrow{grid-template-columns:1fr;gap:28px}}

/* ── pricing ── */
.hm-cost{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:36px}
.hm-costcard{padding:20px 22px}
.hm-costcard .who{font-size:14px;font-weight:600;color:var(--ink2)}
.hm-costcard .fig{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums}
.hm-costcard .per{font-size:13.5px;color:var(--ink2);margin-top:2px}
.hm-costcard p{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink2)}
.hm-costcard.us{background:var(--rail);color:#fff;border-color:var(--rail)}
.hm-costcard.us .who,.hm-costcard.us .per,.hm-costcard.us p{color:#b7bcc7}
.hm-costcard.us .fig{color:var(--gold)}
.hm-plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hm-plan{padding:30px 32px 32px;position:relative;display:flex;flex-direction:column}
.hm-plan .name{font-family:var(--display);font-weight:700;font-size:20px}
.hm-plan .price{margin-top:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hm-plan .price b{font-family:var(--display);font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hm-plan .price>span{font-size:14px;color:var(--ink2)}
.hm-plan .price .px{font-size:inherit;color:inherit}
.hm-plan .pace{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--bg);font-size:14.5px;font-weight:600}
.hm-plan ul{list-style:none;margin-top:18px}
.hm-plan li{padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--ink2)}
.hm-plan li:last-child{border-bottom:1px solid var(--line)}
.hm-plan li b{color:var(--ink);font-weight:600}
.hm-plan .hm-btn{width:100%;margin-top:auto}
.hm-plan ul{margin-bottom:26px}
.hm-plan.pro{background:var(--rail);color:#fff;border-color:var(--rail)}
.hm-plan.pro .price>span,.hm-plan.pro li{color:#b7bcc7}
.hm-plan.pro li b{color:#fff}
.hm-plan.pro li{border-color:rgba(255,255,255,.12)}
.hm-plan.pro .pace{background:rgba(255,255,255,.07);color:#fff}
.hm-plan.pro .price b{color:var(--gold)}
.hm-plan .name .pick{font-family:'Instrument Sans',sans-serif;font-weight:500;font-size:14px;color:#b7bcc7;margin-left:10px}
.hm-pricefoot{margin-top:22px;font-size:14px;color:var(--ink2);max-width:72ch}
.hm-pricefoot b{color:var(--ink);font-weight:600}
@media(max-width:860px){.hm-cost,.hm-plans{grid-template-columns:1fr}}

/* ── faq ── */
.hm-faq{max-width:780px}
.hm-faq details{border-bottom:1px solid var(--line)}
.hm-faq summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--display);font-weight:600;font-size:18px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary::after{content:"+";font-size:22px;color:var(--ink2);flex:none;transition:transform .2s}
.hm-faq details[open] summary::after{transform:rotate(45deg)}
.hm-faq details p{padding:0 0 20px;font-size:15.5px;line-height:1.62;color:var(--ink2);max-width:70ch}
.hm-faq details p a{color:var(--blue);font-weight:600;text-decoration:none}
.hm-faq details p a:hover{text-decoration:underline}

/* ── final band ── */
.hm-final .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.hm-final h2{color:#fff}
.hm-final .secsub{color:#b7bcc7;margin-top:12px}
.hm-final .secsub b{color:#fff}
.hm-final img{width:150px;height:150px;justify-self:end}
.hm-final .also{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:#8b909b}
.hm-final .also a{color:var(--gold);font-weight:600;text-decoration:none}
.hm-final .also a:hover{text-decoration:underline}
@media(max-width:760px){.hm-final .wrap{grid-template-columns:1fr}.hm-final img{justify-self:start;width:110px;height:110px}}

/* reveal: shared observer in the base adds .is-visible */
html.js body.home .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
html.js body.home .reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js body.home .reveal{opacity:1;transform:none;transition:none}}

/* ── secondary pages on the same grammar (body.home.sub), 2026-09-02.
   Ported from Helio Posts' home.css so the two sites share one vocabulary.
   Everything below that looks like a screen is drawn in HTML from the
   Bedminster demonstration workspace, never a screenshot of a form. ── */
body.home.sub .navlinks a.on{color:var(--ink);font-weight:600}
.hm-pagehead{padding:34px 0 26px}
.hm-pagehead h1{font-size:clamp(34px,3.4vw,42px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;max-width:20ch}
.hm-pagehead .lead{margin-top:16px;max-width:66ch;font-size:18px;line-height:1.55;color:var(--ink2);text-wrap:pretty}
.hm-pagehead .lead b{color:var(--ink);font-weight:600}
.hm-pagehead .hm-ctas{margin-top:22px}
.hm-pagehead .fine{margin-top:12px;font-size:13.5px;color:var(--ink2)}
.hm-prose{max-width:66ch}
.hm-prose p{font-size:17px;line-height:1.6;color:var(--ink2)}
.hm-prose p+p{margin-top:14px}
.hm-prose p b{color:var(--ink);font-weight:600}
.hm-prose p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hm-dark .hm-prose p{color:#d6dae2}
.hm-dark .hm-prose p b{color:#fff}
.hm-dark .hm-prose p a{color:#fff}
.hm-ctas.sub{margin-top:26px}
body.home .hm-dark .secsub a{color:#fff;text-decoration-color:var(--gold)}
body.home .hm-dark + .hm-dark{border-top:1px solid rgba(255,255,255,.12)}
.hm-rowgap{margin-top:44px;padding-top:44px;border-top:1px solid var(--line)}
/* text column runs past centre, the drawn screen sits hard right */
.hm-draftrow{align-items:start}
body.home.sub .hm-draftrow{grid-template-columns:minmax(0,1fr) 460px;gap:64px}
body.home.sub .hm-draftrow .hm-head .secsub{max-width:none}
body.home.sub .hm-draftrow .hm-points{max-width:none;margin-top:18px}
.hm-stepside{max-width:none}
.hm-flowlab{font-size:12.5px;color:var(--ink2);margin-bottom:12px;line-height:1.4}
.hm-flowlab b{color:var(--ink);font-weight:600;display:block}
.hm-flowdone{margin-top:14px;font-size:13px;color:var(--ink2);line-height:1.45;padding-left:12px;border-left:3px solid var(--green)}
.hm-flowdone b{color:var(--ink);font-weight:600;display:block}
@media(max-width:1000px){body.home.sub .hm-draftrow{grid-template-columns:1fr;gap:28px}}
@media(max-width:900px){.hm-rowgap{margin-top:28px;padding-top:28px}}
/* the setup story: the address goes in, what it found comes back */
.hm-setup{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:18px 20px 20px;font-size:13px}
.hm-setuplab{font-size:12.5px;color:var(--ink2);margin-bottom:10px;line-height:1.4}
.hm-setuplab b{color:var(--ink);font-weight:600;display:block}
.hm-setuplab2{margin-top:18px}
.hm-setupurl{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:4px 4px 4px 12px;font-size:13.5px;color:var(--ink)}
.hm-setupurl span{flex:1}
.hm-setupurl i{font-style:normal;background:var(--rail);color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12.5px}
.hm-setupfound{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;line-height:1.45}
.hm-setupfound dt{color:var(--ink2);font-size:12px;white-space:nowrap;padding-top:1px}
.hm-setupfound dd{margin:0;color:var(--ink)}
.hm-setupdone{margin-top:14px;font-size:13px;color:var(--ink2);line-height:1.45;padding-left:12px;border-left:3px solid var(--green)}
.hm-setupdone b{color:var(--ink);font-weight:600}
/* a draft waiting for a decision: the review screen, drawn */
.hm-draft{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13.5px;line-height:1.5}
.hm-drafthead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.hm-drafthead b{color:var(--ink);font-weight:600}
.hm-drafthead .st{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:#fbf5e6;color:#9a6a12;white-space:nowrap}
.hm-draftbody{padding:16px 16px 14px}
.hm-draftbody h4{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0 0 10px}
.hm-draftbody dl{margin:0 0 12px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12.5px}
.hm-draftbody dt{color:var(--ink2);white-space:nowrap}
.hm-draftbody dd{margin:0;color:var(--ink)}
.hm-draftbody dd small{color:var(--green);font-weight:600}
.hm-draftbody p{margin:0;padding-top:12px;border-top:1px solid var(--line);color:var(--ink)}
.hm-draftbody p .more{color:var(--ink2)}
.hm-draftbtns{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px}
.hm-draftbtns span{border-radius:7px;padding:8px 13px;font-weight:600;font-size:13px;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.hm-draftbtns .ok{background:var(--green);color:#fff;border-color:var(--green)}
/* the one switch */
.hm-switchcard{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px 18px;font-size:13px;line-height:1.5;color:var(--ink2)}
.hm-switchrow{display:flex;gap:14px;align-items:flex-start;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.hm-switchrow b{display:block;color:var(--ink);font-size:14px;font-weight:600}
.hm-switchrow small{display:block;font-size:12.5px;margin-top:2px}
.hm-toggle{flex:none;width:40px;height:22px;border-radius:999px;background:#c7ccd6;position:relative;margin-top:2px}
.hm-toggle i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff}
.hm-toggle.on{background:var(--green)}
.hm-toggle.on i{left:20px}
.hm-switchcard p{margin:0;color:var(--ink2)}
/* an email, drawn */
.hm-mail{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13px}
.hm-mailhead{background:var(--rail);color:#fff;padding:12px 16px;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.hm-mailhead span{display:block;text-transform:none;letter-spacing:0;font-size:15px;margin-top:3px}
.hm-mailbody{padding:14px 16px 16px;line-height:1.5}
.hm-mailbody p{margin:0 0 10px;color:var(--ink)}
.hm-mailbtns{display:flex;gap:8px;flex-wrap:wrap}
.hm-mailbtns span{border-radius:7px;padding:8px 13px;font-weight:600;font-size:13px}
.hm-mailbtns .ok{background:var(--green);color:#fff}
.hm-mailbtns .no{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
/* the six checks and the fix that gets written */
.hm-checks{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13.5px}
.hm-checkshead{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.hm-checkshead span{font-weight:400;color:var(--ink2)}
.hm-checkrow{display:grid;grid-template-columns:1fr auto;gap:0 14px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.hm-checkrow .n{font-variant-numeric:tabular-nums;font-weight:600;color:var(--green);white-space:nowrap}
.hm-checkrow .n.short{color:var(--red)}
.hm-checkrow.is-short{background:#fffaf9}
.hm-checkfix{padding:12px 16px 14px;background:var(--bg);font-size:13px;line-height:1.5;color:var(--ink2)}
.hm-checkfix b{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}
.hm-checkfix .fix{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--ink);margin-top:6px}
.hm-checkfix .fix small{display:block;color:var(--green);font-weight:600;margin-top:5px;font-size:12px}
/* the curve: drawn, and labelled as drawn */
.hm-curve{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.hm-curvehead{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.hm-curvehead span{font-weight:400;color:var(--ink2)}
.hm-curverow{padding:12px 16px 6px}
.hm-curverow .lbl{font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:7px;margin-bottom:6px}
.hm-curverow .lbl i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.hm-curverow .lbl b{color:var(--ink);font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums}
.hm-curverow svg{display:block;width:100%;height:auto}
.hm-curvefoot{padding:11px 16px 13px;font-size:12.5px;color:var(--ink2);border-top:1px solid var(--line);background:var(--bg);line-height:1.5}
/* the two doors on a results page: an ad and an article */
.hm-serp{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13.5px}
.hm-serpbar{display:flex;align-items:center;gap:10px;margin:14px 16px 0;padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:14px;background:var(--bg)}
.hm-serprow{padding:14px 16px;border-top:1px solid var(--line);margin-top:14px}
.hm-serprow+.hm-serprow{margin-top:0}
.hm-serprow .meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--ink2);margin-bottom:4px}
.hm-serprow .meta .tag{font-weight:700;color:var(--ink)}
.hm-serprow .meta .tag.you{color:var(--amber-ink)}
.hm-serprow b{display:block;font-size:15.5px;font-weight:600;color:#1a0dab;line-height:1.3}
.hm-serprow.you b{color:var(--ink)}
.hm-serprow .note{display:block;margin-top:5px;font-size:12.5px;color:var(--red);font-weight:600}
.hm-serprow.you .note{color:var(--green)}
.hm-serprow.you{background:#fdfaf2}
.hm-serpghost{padding:14px 16px 18px;border-top:1px solid var(--line)}
.hm-serpghost i{display:block;height:9px;border-radius:5px;background:var(--bg);margin-top:7px;width:70%}
.hm-serpghost i+i{width:45%}
/* who came up instead, on the free check */
.hm-lines{display:grid;gap:0;border-top:1px solid var(--line);max-width:52ch}
.hm-lines li{list-style:none;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink)}
.hm-lines li small{display:block;color:var(--ink2);font-size:13.5px;margin-top:2px}
/* a month of assignments, on the sector pages */
.hm-month{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:14px}
.hm-monthhead{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.hm-monthhead span{font-weight:400;color:var(--ink2)}
.hm-monthrow{display:grid;grid-template-columns:34px 1fr;gap:0 10px;align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.hm-monthrow:last-of-type{border-bottom:0}
.hm-monthrow .d{color:var(--ink2);font-variant-numeric:tabular-nums;font-size:13px}
.hm-monthfoot{padding:11px 16px;font-size:12.5px;color:var(--ink2);border-top:1px solid var(--line);background:var(--bg);line-height:1.5}
/* client sites on the agency page */
.hm-roster{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hm-rosterhead{display:grid;grid-template-columns:1fr 78px 110px;gap:0 12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);font-weight:600}
.hm-rosterrow{display:grid;grid-template-columns:1fr 78px 110px;gap:0 12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.hm-rosterrow:last-child{border-bottom:0}
.hm-rosterrow b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-rosterrow small{display:block;color:var(--ink2);font-size:12.5px}
.hm-rosterrow .w{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.hm-rosterrow .s{font-size:12.5px;font-weight:600;color:var(--green)}
.hm-rosterrow .s.wait{color:#9a6a12}
.hm-rosterfoot{padding:11px 16px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line);background:var(--bg)}
.hm-rosterfoot b{color:var(--ink);font-weight:600}
/* who sees what */
.hm-roles{display:grid;gap:10px}
.hm-role{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start;font-size:14px}
.hm-role b{font-weight:600;display:block}
.hm-role small{display:block;color:var(--ink2);font-size:12.5px;margin-top:2px}
.hm-role p{color:var(--ink2);font-size:13.5px;line-height:1.5}
.hm-role p b{display:inline;color:var(--ink)}
/* head to head list, and the side by side table */
.hm-vslist{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line)}
.hm-vslist a{display:block;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.hm-vslist a b{display:block;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.015em}
.hm-vslist a span{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.hm-vslist a small{display:block;margin-top:6px;font-size:13px;color:var(--ink2)}
.hm-vslist a:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hm-vslist.one{grid-template-columns:1fr;max-width:66ch}
.hm-vswrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.hm-vs{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.hm-vs th,.hm-vs td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.hm-vs tbody tr:last-child th,.hm-vs tbody tr:last-child td{border-bottom:0}
.hm-vs thead th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);font-weight:600;background:var(--bg);white-space:nowrap}
.hm-vs thead th.us{color:var(--ink)}
.hm-vs tbody th{font-weight:600;width:22%;color:var(--ink)}
.hm-vs td{color:var(--ink2);width:39%}
.hm-vs td.us{color:var(--ink);background:#fdfaf2}
.hm-vs.wide{min-width:960px}
.hm-vs.wide tbody th{width:17%}
.hm-vs.wide td{width:auto;font-size:14px}
.hm-vsfoot{margin-top:12px;font-size:13.5px;color:var(--ink2);max-width:80ch}
.hm-vsfoot a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hm-pointsgrid{grid-template-columns:1fr 1fr;gap:14px 40px;max-width:none}
/* the setup guide and legal pages: a document, on the same ground */
.hm-doc{max-width:760px}
body.home .hm-doc section{padding:28px 0;border-top:1px solid var(--line)}
body.home .hm-doc section:first-child{border-top:0;padding-top:0}
.hm-doc h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.hm-doc h3 img{width:22px;height:22px}
.hm-doc .dsub{margin-top:8px;font-size:16px;line-height:1.55;color:var(--ink2)}
.hm-doc .dsub b{color:var(--ink);font-weight:600}
.hm-doc p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.hm-doc p b{color:var(--ink);font-weight:600}
.hm-doc p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hm-doc ol{margin:14px 0 0;padding-left:22px;display:grid;gap:8px}
.hm-doc ol li{font-size:15.5px;line-height:1.55;color:var(--ink2);padding-left:4px}
.hm-doc ol li b{color:var(--ink);font-weight:600}
.hm-code{margin-top:14px;background:var(--rail);color:#e6e9ef;border-radius:var(--r);padding:16px 18px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-x:auto}
.hm-docnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hm-docnav a{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none}
.hm-docnav a:hover{border-color:var(--ink)}
/* the blog index */
.hm-bloglist{border-top:1px solid var(--line);max-width:780px}
.hm-bloglist article{padding:22px 0;border-bottom:1px solid var(--line)}
.hm-bloglist .when{font-size:13px;color:var(--ink2)}
.hm-bloglist .when b{color:var(--amber-ink);font-weight:600;margin-right:10px}
.hm-bloglist h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-top:6px}
.hm-bloglist h3 a{color:var(--ink);text-decoration:none}
.hm-bloglist h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hm-bloglist p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.hm-article{max-width:780px}
.hm-article .prosein{margin-top:6px}
.hm-artcard{margin-top:44px;padding:22px 24px;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.hm-artcard b{color:var(--ink);font-weight:600}
.hm-artcard a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hm-artcard .hm-ctas{margin-top:16px}
/* the free check: form, wait, result */
.hm-visform{max-width:520px;padding:22px 24px 24px}
.hm-visform label{display:block;font-size:13.5px;font-weight:600;margin-top:16px}
.hm-visform label:first-child{margin-top:0}
.hm-visform label span{font-weight:400;color:var(--ink2)}
.hm-visform input[type=text],.hm-visform input[type=email]{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15.5px;color:var(--ink);background:var(--surface)}
.hm-visform input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.hm-visform .cb{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px;font-weight:400;line-height:1.5;color:var(--ink)}
.hm-visform .cb input{margin-top:4px}
.hm-visform .cb em{font-style:normal;color:var(--ink2)}
.hm-visform button{margin-top:20px;border:0;cursor:pointer;font-family:inherit}
.hm-visform .fine{margin-top:12px;font-size:13px;color:var(--ink2)}
.hm-visbig{font-family:var(--display);font-size:64px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--green)}
.hm-visbig.none{color:var(--red)}
.hm-vistop{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.hm-vistop p{font-size:15.5px;line-height:1.55;color:var(--ink2)}
.hm-vistop p b{color:var(--ink);font-weight:600}
.hm-visq{padding:6px 24px}
.hm-visq .q{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5}
.hm-visq .q:last-child{border-bottom:0}
.hm-visq .q .t{font-weight:700;color:var(--green)}
.hm-visq .q.miss .t{color:var(--red)}
.hm-visq .q em{display:block;font-style:normal;font-size:13px;color:var(--ink2)}
.hm-visboard{padding:6px 24px 18px}
.hm-visboard h3{font-family:var(--display);font-size:16px;font-weight:700;padding:14px 0 6px}
.hm-visrow{display:grid;grid-template-columns:190px 1fr 48px;gap:14px;align-items:center;padding:8px 0;font-size:14px}
.hm-visrow i{display:block;height:8px;border-radius:4px;background:var(--bg);position:relative;overflow:hidden}
.hm-visrow i::after{content:"";position:absolute;inset:0;width:var(--v);background:#6d4fd8;border-radius:4px}
.hm-visrow b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink2)}
.hm-visnext{margin-top:28px;max-width:66ch}
.hm-visnext h3{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.hm-visnext p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink2)}
.hm-visnote{margin-top:22px;font-size:13.5px;color:var(--ink2);max-width:66ch;line-height:1.5}
@media(max-width:900px){.hm-vslist,.hm-pointsgrid{grid-template-columns:1fr}.hm-role{grid-template-columns:1fr}.hm-vistop{grid-template-columns:1fr}.hm-visrow{grid-template-columns:120px 1fr 48px}}

/* results page: Google's own words, and the three phases as a labelled list */
.hm-quote{max-width:70ch}
.hm-quote .q{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);line-height:1.35;font-weight:600;color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.hm-quote .q b{color:var(--amber-ink)}
.hm-quote .from{margin-top:16px;font-size:15.5px;color:var(--ink2);line-height:1.55}
.hm-quote .from a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hm-phases{display:grid;gap:10px;margin-top:26px}
.hm-phase{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
.hm-phase .m{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);line-height:1.3}
.hm-phase .m small{display:block;font-family:'Instrument Sans',sans-serif;font-weight:500;color:var(--ink2);font-size:12.5px;margin-top:3px}
.hm-phase p{color:var(--ink2);font-size:14.5px;line-height:1.55}
.hm-phase p b{color:var(--ink);font-weight:600}
@media(max-width:900px){.hm-phase{grid-template-columns:1fr}}
.hm-twocol{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:26px}
.hm-twocol h3{font-size:19px;letter-spacing:-.01em}
.hm-twocol .hm-points{margin-top:14px;max-width:none}
@media(max-width:900px){.hm-twocol{grid-template-columns:1fr;gap:28px}}
body.home .hm-article .prosein{color:var(--ink2);font-size:17px;line-height:1.7}
body.home .hm-article .prosein h2{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
body.home .hm-article .prosein h3{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink)}
body.home .hm-article .prosein a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
body.home .hm-article .prosein b,body.home .hm-article .prosein strong{color:var(--ink)}