/* Helio Posts home page on the Helio design system (the one signed off for
   Helio SEO on 2026-09-01 and carried onto Helios): cool neutral ground, white
   cards with a hairline border and no 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 the demonstration workspace, 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;
  --r:10px;
  --display:'IBM Plex Sans','Instrument Sans',sans-serif;
  --white:#fff;
  /* shared-sheet overrides */
  --cream:#f4f6fa; --paper:#fff; --navy:#16181c; --navy-2:#1f2227; --ink-2:#5d6474; --ink-3:#8b909b;
  background:radial-gradient(60% 520px at 20% 0%,rgba(245,200,119,.45),transparent 70%) no-repeat,radial-gradient(36% 560px at 94% 520px,rgba(224,147,42,.16),transparent 70%) no-repeat,var(--bg);color:var(--ink);
}
body.home .mnav{padding:16px 0}
body.home .mnav .brand{color:var(--ink)}
body.home .mnav .brand span{color:var(--amber)}
body.home .mnav .btn{min-height:0;padding:11px 20px;font-size:14.5px}
body.home .mnav .btn .ic{display:none}
body.home .btn.primary{background:var(--gold);color:var(--ink)}
body.home .btn.primary:hover{background:#ffd98a;filter:none}
body.home .btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
body.home footer.m{border-top:1px solid var(--line);margin-top:0;padding-top:34px}
body.home .stickycta .tick{display:none}
body.home .stickycta .pts span{padding-right:20px;border-right:1px solid rgba(255,255,255,.14)}
body.home .stickycta .pts span:last-child{border-right:0}
body.home .stickycta .btn .ic{display:none}
body.home h1,body.home h2,body.home h3{font-family:var(--display);font-weight:600;margin:0}
body.home h2{font-size:clamp(28px,3.4vw,38px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
body.home p{margin:0}
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}
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)}
body.home .wrap{max-width:1180px;padding:0 20px}

.hm-head{margin-bottom:20px}
.hm-head .secsub{margin-top:12px}
.hm-head .secsub a,body.home .secsub a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}

/* 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);text-decoration:none}
.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 and shots */
.hm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.hm-shot{border-radius:var(--r);border:1px solid var(--line);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{color:#fff}

/* ── hero: copy first, the sign-off panel beside it, then the LinkedIn line,
   then the product shown plain (no browser chrome, no shadow) ── */
.hm-hero{background:transparent;color:var(--ink);padding:36px 0 0;position:relative;border-bottom:1px solid var(--line)}
.hm-hero .wrap{position:relative}
.hm-herocopy{align-self:center}
.hm-herogrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:end}
.hm-hero .hm-herowide .lead{max-width:none;clear:both}
.hm-heromini{float:right;width:440px;max-width:40%;margin:26px 0 14px 22px}
.hm-hero h1 .l2{display:block}
.hm-heromini img{width:100%;height:auto;display:block}
.hm-heromini .hm-cap{margin-top:8px}
.hm-herowide:after{content:"";display:block;clear:both}
@media(max-width:900px){.hm-heromini{float:none;width:auto;max-width:none;margin:0 0 22px}}
.hm-herowide .hm-ctas .fine{margin:0 0 0 8px}
.hm-herowide .hm-shotlead{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);max-width:none}
.hm-herowide .hm-shotlead h3{font-size:22px}
.hm-herowide .hm-shotlead p{max-width:none}
@media(max-width:760px){.hm-herowide .hm-ctas .fine{margin:6px 0 0;flex-basis:100%}}
.hm-hero .hm-intro{font-size:14.5px;color:var(--amber);font-weight:600;margin-bottom:10px}
.hm-hero h1{font-weight:600;font-size:clamp(34px,3vw,40px);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-hero .hm-who{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink2);font-size:14px;line-height:1.5;max-width:560px}
.hm-hero .hm-who b{color:var(--ink);font-weight:600}
.hm-heroside .hm-heronote{border-top:0;padding:10px 0 0}

.hm-heropub{margin-top:22px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;font-size:14px;color:var(--ink2)}
.hm-heropub b{color:var(--ink);font-weight:600}
.hm-heropub .logos{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hm-heropub .logos span{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink);font-size:13.5px}
.hm-heropub .logos img{width:18px;height:18px}
.hm-heropub .hm-link{margin-left:auto}
.hm-heroshot{margin-top:26px}
.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:1440/655;object-fit:cover;object-position:top}
.hm-heronote{padding:10px 0 34px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line)}
@media(max-width:900px){.hm-herogrid{grid-template-columns:1fr;gap:28px}.hm-heropub .hm-link{margin-left:0}}
@media(max-width:760px){.hm-hero{padding-top:20px}.hm-heroshot img{aspect-ratio:auto}}

/* ── the quiet page: dark band, the three-week strip, the Monday warning ── */
.hm-dark{background:var(--rail);color:#fff}
body.home .hm-dark h2{color:#fff}
body.home .hm-dark .secsub{color:#d6dae2;max-width:none;line-height:1.6}
.hm-dark .secsub b{color:#fff}
.hm-dark .hm-cap{color:#b7bcc7}
.hm-dark .hm-cap b{color:#fff}
.hm-dark .hm-shot{border-color:transparent}
.hm-weeks{margin-top:8px}
.hm-quietrow{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-quietrow h3{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.hm-quietrow p{color:#b7bcc7;font-size:16px;line-height:1.6}
.hm-quietrow p b{color:#fff;font-weight:600}
.hm-quietrow p+p{margin-top:12px}
@media(max-width:860px){.hm-quietrow{grid-template-columns:1fr}}

/* ── copy beside a screenshot (draft review, results) ── */
.hm-proof{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.hm-proof.flip{grid-template-columns:1.1fr .9fr}
.hm-proof.flip>.copy{order:2}
.hm-proof .stack{display:grid;gap:16px}
.hm-proof .stack .hm-cap{margin-top:0}
.hm-points{list-style:none;margin:22px 0 0;padding:0;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,.hm-proof.flip{grid-template-columns:1fr}.hm-proof.flip>.copy{order:0}}

/* ── brand images: three examples, flush ── */
/* Three example images share one height; the carousel slide is taller, so widths vary. */
.hm-images{display:flex;gap:16px;justify-content:space-between}
.hm-images img{height:400px;width:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
@media(max-width:1000px){.hm-images img{height:300px}}
@media(max-width:760px){.hm-images{flex-direction:column;align-items:flex-start}.hm-images img{height:auto;width:100%;max-width:420px}}

/* ── 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-headshot{margin-top:22px}
.hm-headshot img{width:100%;height:auto;display:block}
.hm-steplist{list-style:none;counter-reset:step;border-top:1px solid var(--line);margin:0;padding:0}
.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-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}
.hm-draftrow{margin-bottom:26px;align-items:start}
.hm-draftrow .hm-points{margin-top:6px;max-width:none}
body.home .hm-headlink{margin:34px 0 0}
@media(max-width:900px){.hm-howrow{grid-template-columns:1fr;gap:28px}}

/* ── pricing ── */
.hm-cost{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:16px}
.hm-costcard{padding:22px 24px;display:flex;flex-direction:column}
.hm-costcard .who{font-size:14px;font-weight:600;color:var(--ink2)}
.hm-costcard .fig{font-family:var(--display);font-size:32px;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 p b{color:#fff;font-weight:600}
.hm-costcard.us .fig{color:var(--gold)}
.hm-costcard.us .hm-btn{margin-top:18px;align-self:flex-start}
.hm-pricefoot{margin-top:22px;font-size:14px;color:var(--ink2);max-width:72ch;line-height:1.55}
.hm-pricefoot b{color:var(--ink);font-weight:600}
@media(max-width:860px){.hm-cost{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}
body.home .hm-final .secsub{color:#c9ced8;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;line-height:1.55}
.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: the observer at the bottom of the page 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}}
body.home footer.m a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
body.home footer.m .fnav a{text-decoration:none;color:var(--ink2)}
body.home footer.m .fnav a:hover{color:var(--ink)}

/* Hero side, post variant: a feed post as it lands on LinkedIn, then the trail
   of what happened to get it there. The post uses the system font on purpose. */
.hm-lipost{background:#fff;border:1px solid #e0dfdc;border-radius:8px;font-family:-apple-system,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;color:rgba(0,0,0,.9);overflow:hidden}
.hm-lipost .head{display:grid;grid-template-columns:48px 1fr auto;gap:10px;padding:12px 14px 6px;align-items:start}
.hm-lipost .ava{width:48px;height:48px;background:#1b2a4a;color:#fff;font-weight:700;font-size:20px;display:grid;place-items:center;border-radius:2px}
.hm-lipost .who{display:grid;line-height:1.35}
.hm-lipost .who b{font-size:14px;font-weight:600}
.hm-lipost .who span{font-size:12px;color:rgba(0,0,0,.6);display:inline-flex;align-items:center;gap:4px}
.hm-lipost .more{color:rgba(0,0,0,.6);font-weight:700;letter-spacing:1px;font-size:14px}
.hm-lipost .body{padding:4px 14px 10px;font-size:14px;line-height:1.45;margin:0}
.hm-lipost .fold{color:rgba(0,0,0,.6)}
.hm-lipost .pic{width:100%;height:auto;display:block}
.hm-lipost .social{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:12px;color:rgba(0,0,0,.6);border-bottom:1px solid #e0dfdc}
.hm-lipost .social .cm{margin-left:auto}
.hm-lipost .rx{display:inline-flex}
.hm-lipost .rx i{width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;margin-right:-4px;display:block}
.hm-lipost .rx .r1{background:#378fe9}.hm-lipost .rx .r2{background:#6dae4f}.hm-lipost .rx .r3{background:#df704d}
.hm-lipost .acts{display:flex;justify-content:space-around;padding:6px 8px;font-size:13px;font-weight:600;color:rgba(0,0,0,.6)}
.hm-trail{list-style:none;margin:14px 0 0;padding:0;font-size:13.5px;line-height:1.4;color:var(--ink)}
.hm-trail li{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.hm-trail li span{color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-trail li.pub{font-weight:600}
@media(max-width:600px){.hm-trail li{grid-template-columns:1fr;gap:2px}}
/* A laptop shell around the post: dark bezel, feed-grey screen, a thin base. */
.hm-laptop{margin:0 6px}
.hm-laptop .screen{background:#1c1e23;border-radius:12px 12px 4px 4px;padding:12px 12px 10px;position:relative;border:1px solid #33363d}
.hm-laptop .screen:before{content:"";position:absolute;top:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#3a3d45}
.hm-laptop .disp{background:#f4f2ee;aspect-ratio:16/10;overflow:hidden;position:relative;border-radius:2px}
.hm-laptop .libar{height:28px;background:#fff;border-bottom:1px solid #e0dfdc;display:flex;align-items:center;gap:8px;padding:0 5%}
.hm-laptop .libar b{width:20px;height:20px;border-radius:3px;background:#0a66c2;color:#fff;font:700 12px/20px -apple-system,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;text-align:center}
.hm-laptop .libar i{width:150px;height:18px;border-radius:3px;background:#eef3f8}
.hm-laptop .libar u{margin-left:auto;display:flex;gap:16px}
.hm-laptop .libar u:before,.hm-laptop .libar u:after{content:"";width:16px;height:16px;border-radius:3px;background:#dcdcd8}
.hm-laptop .hm-lipost{position:absolute;left:50%;top:36px;transform:translateX(-50%);width:326px;font-size:11px}
.hm-laptop .hm-lipost .pic{height:138px;object-fit:cover;object-position:left top}
.hm-laptop .hm-lipost .head{grid-template-columns:36px 1fr auto;gap:8px;padding:9px 11px 3px}
.hm-laptop .hm-lipost .ava{width:36px;height:36px;font-size:15px}
.hm-laptop .hm-lipost .who b{font-size:12px}
.hm-laptop .hm-lipost .who span{font-size:10px}
.hm-laptop .hm-lipost .body{font-size:11.5px;padding:2px 11px 7px}
.hm-laptop .hm-lipost .social{font-size:10px;padding:5px 11px}
.hm-laptop .hm-lipost .rx i{width:13px;height:13px}
.hm-laptop .hm-lipost .acts{font-size:11px;padding:5px 6px}
.hm-laptop .base{height:9px;background:linear-gradient(#3a3d45,#24262c);border-radius:0 0 10px 10px;margin:0 -14px;position:relative}
.hm-laptop .base i{position:absolute;left:50%;top:0;width:80px;height:4px;margin-left:-40px;background:#4a4d56;border-radius:0 0 4px 4px}
@media(max-width:420px){.hm-laptop .hm-lipost{width:92%}}
.hm-note{margin:16px 0 0;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.hm-note .from{color:var(--ink2);font-size:12.5px;margin-bottom:4px}
.hm-note .from b{color:var(--ink);font-weight:600}
.hm-note p{margin:0}
.hm-note .att{margin-top:8px;font-size:12px;color:var(--ink2);padding-left:18px;position:relative}
.hm-note .arrow{position:absolute;left:100%;top:50%;width:28px;height:16px;margin:-8px 0 0 8px;color:var(--ink2);display:none}
@media(min-width:901px){.hm-note .arrow{display:block}}
.hm-note .att:before{content:"";position:absolute;left:0;top:2px;width:12px;height:10px;border:1.5px solid var(--ink2);border-radius:2px}

/* the line-to-post flow under #draft: drawn, not screenshotted */
.hm-flow{display:grid;grid-template-columns:.8fr 1.1fr .95fr;gap:0 34px;align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px 28px}
.hm-flowcol{min-width:0}
.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-phone{border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden;max-width:290px;font-size:13px}
.hm-phonebar{padding:14px 16px 10px;font-weight:600;font-size:13.5px;border-bottom:1px solid var(--line)}
.hm-phonebar span{display:block;font-weight:400;color:var(--ink2);font-size:12px;margin-top:2px}
.hm-phonebody{padding:14px 16px 16px}
.hm-phonebody label{display:block;font-size:11.5px;color:var(--ink2);margin:0 0 5px}
.hm-phonetext{border:1px solid var(--line);border-radius:8px;padding:10px 11px;line-height:1.45;margin-bottom:12px;color:var(--ink)}
.hm-phonefile{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:14px;line-height:1.25}
.hm-phonefile .th{width:34px;height:34px;border-radius:6px;flex:none;background:linear-gradient(160deg,#c9d3df 0%,#8b98a8 55%,#4f5b6b 100%)}
.hm-phonefile small{display:block;color:var(--ink2);font-size:11px;margin-top:2px}
.hm-phonebtn{background:var(--rail);color:#fff;text-align:center;border-radius:999px;padding:10px;font-weight:600;font-size:13.5px}
.hm-phonewho{text-align:center;color:var(--ink2);font-size:11.5px;margin-top:10px}
.hm-lipost{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 16px 12px;font-size:13.5px;line-height:1.5}
.hm-lihead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hm-lihead .av{width:38px;height:38px;border-radius:50%;background:#12203c;color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--display);flex:none}
.hm-lihead b{display:block;font-size:13.5px}
.hm-lihead small{display:block;color:var(--ink2);font-size:11.5px}
.hm-lipost p{margin:0 0 9px}
.hm-lipost .more{color:var(--ink2)}
.hm-lipost img{display:block;width:100%;height:auto;border-radius:6px;margin:4px 0 10px}
.hm-litags{color:#1d4ed8;font-size:13px}
.hm-mail{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13px}
.hm-mailhead{background:#12203c;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-mailpost{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:12px;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:#1c7a3d;color:#fff}
.hm-mailbtns .no{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.hm-flowdone{margin-top:14px;font-size:13px;color:var(--ink2);line-height:1.45;padding-left:12px;border-left:3px solid #1c7a3d}
.hm-flowdone b{color:var(--ink);font-weight:600;display:block}
@media(max-width:900px){.hm-flow{grid-template-columns:1fr;gap:24px;padding:20px}.hm-phone{max-width:none}}

/* results flow: numbers back + ledger + report */
.hm-linums{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:11.5px;color:var(--ink2);line-height:1.3}
.hm-linums span b{display:block;font-family:var(--display);font-size:17px;color:var(--ink);font-weight:600}
.hm-linums small{flex-basis:100%;font-size:11.5px;color:var(--ink2)}
.hm-ledger{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:12.5px;overflow:hidden}
.hm-flowres{grid-template-columns:.72fr 1.4fr .8fr}
/* Declared after the .hm-flow phone rule above, so it must stack itself too: until 2026-09-04
   the three columns stayed side by side on a phone, each about 110px wide. */
@media(max-width:900px){.hm-flowres{grid-template-columns:1fr}}
.hm-ledgerhead,.hm-ledgerrow{display:grid;grid-template-columns:1fr 50px 42px 64px;gap:0 8px;align-items:center;padding:9px 12px}
.hm-ledgerhead{font-size:10.5px;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);background:var(--bg)}
.hm-ledgerrow{border-bottom:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.hm-ledgerrow:last-child{border-bottom:0}
.hm-ledgerrow span:not(:first-child),.hm-ledgerhead span:not(:first-child){text-align:right}
.hm-ledgerrow span:first-child{min-width:0}
.hm-ledgerrow b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.hm-ledgerrow small{display:block;color:var(--ink2);font-size:11px;margin-top:1px}
.hm-ledgerrow.is-new{background:#fbf5e6}
.hm-ledgerrow.is-new b{font-weight:600}
/* Phone: the four-column ledger becomes title on one line, then the three figures with their
   words, the same shape as the numbers under the post card. */
@media(max-width:600px){
  .hm-ledgerhead{display:none}
  .hm-ledgerrow{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 12px 11px}
  .hm-ledgerrow span:first-child{flex-basis:100%}
  .hm-ledgerrow b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hm-ledgerrow span:not(:first-child){text-align:left;font-weight:600;color:var(--ink);font-size:12.5px}
  .hm-ledgerrow span:not(:first-child)::after{font-weight:400;color:var(--ink2)}
  .hm-ledgerrow span:nth-child(2)::after{content:" seen by"}
  .hm-ledgerrow span:nth-child(3)::after{content:" clicks"}
  .hm-ledgerrow span:nth-child(4)::after{content:" reactions"}
}
.hm-report{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;font-size:13px}
.hm-reporthead{padding:14px 16px 12px;font-family:var(--display);font-weight:600;font-size:16px;border-bottom:1px solid var(--line)}
.hm-reporthead span{display:block;font-family:inherit;font-weight:400;font-size:12px;color:var(--ink2);margin-top:3px;font-family:var(--body,inherit)}
.hm-reportgrid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.hm-reportgrid div{padding:12px 16px 11px;font-size:11.5px;color:var(--ink2);line-height:1.3;border-bottom:1px solid var(--line)}
.hm-reportgrid div:nth-child(odd){border-right:1px solid var(--line)}
.hm-reportgrid b{display:block;font-family:var(--display);font-size:24px;line-height:1.1;color:var(--amber);font-weight:600;margin-bottom:3px}
.hm-reportfoot{padding:11px 16px 13px;font-size:12px;color:var(--ink2);line-height:1.45}
/* setup story under the how headline */
.hm-setup{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:18px 20px 20px;font-size:13px;max-width:520px}
.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 #1c7a3d}
.hm-setupdone b{color:var(--ink);font-weight:600}
@media(max-width:900px){.hm-setup{max-width:none}}
/* secondary pages on the same grammar (body.home.sub) */
.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}
body.home.sub .mnav .navlinks a.on{color:var(--ink);font-weight:600}
.hm-rowgap{margin-top:44px;padding-top:44px;border-top:1px solid var(--line)}
.hm-stepside{max-width:440px}
.hm-stepside .hm-phone{max-width:320px}
.hm-setupwide{margin-top:0;max-width:none}
.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:#1c7a3d}
.hm-toggle.on i{left:20px}
.hm-switchcard p{margin:0;color:var(--ink2)}
@media(max-width:900px){.hm-stepside{max-width:none}.hm-rowgap{margin-top:28px;padding-top:28px}}
body.home .hm-dark + .hm-dark{border-top:1px solid rgba(255,255,255,.12)}
/* sub pages: text column runs past centre, the drawn screen sits hard right */
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}
.hm-stepside{max-width:none}
.hm-stepside .hm-phone{max-width:none}
@media(max-width:1000px){body.home.sub .hm-draftrow{grid-template-columns:1fr;gap:28px}}

/* ── secondary pages: why, pricing, agencies, compare (2026-09-02) ── */
.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-dark .hm-prose p{color:#d6dae2}
.hm-dark .hm-prose p b{color:#fff}
.hm-ctas.sub{margin-top:26px}
/* a forward calendar: the thing a scheduler does not have */
.hm-cal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hm-calhead{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-calhead span{font-weight:400;color:var(--ink2)}
.hm-calrow{display:grid;grid-template-columns:96px 1fr auto;gap:0 14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px}
.hm-calrow:last-child{border-bottom:0}
.hm-calrow .d{font-weight:600;font-variant-numeric:tabular-nums}
.hm-calrow .d small{display:block;font-weight:400;color:var(--ink2);font-size:12px}
.hm-calrow .t{min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-calrow .t small{color:var(--ink2)}
.hm-calrow .s{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.hm-calrow .s.ok{background:#e7f3ea;color:#1c7a3d}
.hm-calrow .s.wait{background:#fbf5e6;color:#9a6a12}
.hm-calrow .s.risk{background:#fbe9e7;color:#b3261e}
.hm-calrow.is-risk{background:#fffaf9}
.hm-calfoot{padding:11px 16px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line);background:var(--bg)}
.hm-calfoot b{color:var(--ink);font-weight:600}
/* one row per client: the agency roster */
.hm-roster{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hm-rosterhead{display:grid;grid-template-columns:1fr 92px 120px;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 92px 120px;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>div:first-child{min-width:0}
.hm-rosterrow small{display:block;color:var(--ink2);font-size:12.5px}
.hm-rosterrow .w{font-variant-numeric:tabular-nums;color:var(--ink)}
.hm-rosterrow .w small{display:inline;color:var(--ink2)}
.hm-rosterrow .s{font-size:12.5px;font-weight:600;color:#1c7a3d}
.hm-rosterrow .s.risk{color:#b3261e}
.hm-rosterrow.is-risk{background:#fffaf9}
/* 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)}
/* the page connection, the honest bit about the API */
.hm-connect{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;max-width:460px}
.hm-connect .row{display:flex;align-items:center;gap:12px}
.hm-connect .li{width:36px;height:36px;border-radius:6px;background:#0a66c2;color:#fff;font-weight:700;font-family:var(--display);display:grid;place-items:center;flex:none}
.hm-connect .row b{display:block;font-weight:600}
.hm-connect .row small{display:block;color:var(--ink2);font-size:12.5px}
.hm-connect .st{margin-left:auto;font-size:12.5px;font-weight:600;color:#1c7a3d;white-space:nowrap}
.hm-connect dl{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.hm-connect dt{color:var(--ink2)}
.hm-connect dd{margin:0}
.hm-connect .rv{margin-top:12px;font-size:13px;color:var(--ink2)}
.hm-connect .rv u{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px;color:var(--ink)}
/* head to head list */
.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:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
/* side by side table */
.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)}
.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-vsfoot{margin-top:12px;font-size:13.5px;color:var(--ink2);max-width:80ch}
.hm-pointsgrid{grid-template-columns:1fr 1fr;gap:14px 40px;max-width:none}
@media(max-width:900px){.hm-vslist,.hm-pointsgrid{grid-template-columns:1fr}.hm-role{grid-template-columns:1fr}.hm-rosterhead,.hm-rosterrow{grid-template-columns:1fr 70px 100px}}
body.home .hm-dark .secsub a{color:#fff;text-decoration-color:var(--gold)}
/* Phone: roster and calendar rows stack, so a client name or a post title is never cut short.
   Until 2026-09-04 the roster pushed the whole page sideways and the calendar showed "Ola's ch...". */
@media(max-width:600px){
  .hm-rosterhead{display:none}
  .hm-rosterrow{display:flex;flex-wrap:wrap;gap:4px 14px;padding:11px 14px 12px}
  .hm-rosterrow>div{flex-basis:100%;min-width:0}
  .hm-rosterrow b{white-space:normal}
  .hm-rosterrow .w::before{content:"Next ";color:var(--ink2)}
  .hm-rosterrow .s{margin-left:auto}
  .hm-calrow{grid-template-columns:1fr auto;grid-template-areas:"d s" "t t";gap:2px 10px;padding:11px 14px}
  .hm-calrow .d{grid-area:d;white-space:nowrap}
  .hm-calrow .d small{display:inline;margin-left:6px}
  .hm-calrow .t{grid-area:t;white-space:normal;margin-top:2px}
  .hm-calrow .s{grid-area:s;justify-self:end}
}

/* ── Blog: index and article ──────────────────────────────────────────────
   Added 2026-09-08 when /blog stopped being the Helio SEO embed and started
   serving the articles from this domain. The embed rendered only a list of
   links to helioseo.io, so the rankings belonged to the wrong platform.

   ⚠️ EVERY selector here is prefixed body.home ON PURPOSE. This file sets its
   base rules that way (`body.home p{margin:0}`, `body.home .wrap{max-width:
   1180px}`), which is specificity (0,2,1). A bare component class is (0,2,0)
   and loses silently: the first cut of this page rendered 1180px lines with no
   paragraph spacing, and nothing in the markup looked wrong. Do not drop the
   prefix, and do not reach for !important instead. */
body.home .bloglist{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px}
body.home .bloglist a{display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);
  padding:20px 22px;transition:box-shadow .15s ease,transform .15s ease}
body.home .bloglist a:hover{box-shadow:0 8px 24px rgba(19,27,44,.08);transform:translateY(-1px)}
body.home .bl-date{display:block;font-size:13px;color:var(--ink-3);margin:0 0 5px}
body.home .bl-title{display:block;font-family:var(--display);font-size:20px;font-weight:700;
  line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
body.home .bl-sum{display:block;margin:7px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
body.home .bl-empty{color:var(--ink-2);margin:30px 0 0}

body.home .bl-post{padding:34px 0 70px}
body.home .bl-post .wrap{max-width:760px}
body.home .bl-crumbs{font-size:13.5px;color:var(--ink-3);margin:0 0 18px}
body.home .bl-crumbs a{color:var(--ink-2);text-decoration:none}
body.home .bl-crumbs a:hover{text-decoration:underline}
body.home .bl-post h1{font-family:var(--display);font-size:clamp(28px,4.2vw,42px);line-height:1.12;
  letter-spacing:-.02em;margin:0 0 10px}
body.home .bl-meta{font-size:14.5px;color:var(--ink-3);margin:0 0 32px}
body.home .bl-back{margin:40px 0 0}
body.home .bl-back a{color:var(--ink-2);text-decoration:none;font-weight:600}
body.home .bl-back a:hover{text-decoration:underline}

/* The body is HTML from the writer, so these reach into it by element. */
body.home .bl-body{font-size:17px;line-height:1.7;color:var(--ink)}
body.home .bl-body h2{font-family:var(--display);font-size:clamp(21px,2.8vw,27px);line-height:1.25;
  letter-spacing:-.01em;margin:38px 0 13px}
body.home .bl-body h3{font-family:var(--display);font-size:19px;margin:28px 0 10px}
body.home .bl-body p{margin:0 0 17px}
body.home .bl-body ul,body.home .bl-body ol{margin:0 0 19px;padding-left:22px}
body.home .bl-body li{margin:0 0 8px}
body.home .bl-body a{color:var(--amber-ink)}
body.home .bl-body strong{font-weight:600}
body.home .bl-body blockquote{margin:24px 0;padding:4px 0 4px 18px;
  border-left:3px solid var(--amber);color:var(--ink-2)}
body.home .bl-body .callout{background:var(--bg);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:var(--r);padding:16px 20px;margin:0 0 20px}
body.home .bl-body .callout p{margin:0}
/* Wide tables scroll inside themselves; the page never scrolls sideways. */
body.home .bl-body table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;
  margin:0 0 20px;font-size:15.5px}
body.home .bl-body th,body.home .bl-body td{border:1px solid var(--line);padding:9px 12px;
  text-align:left;vertical-align:top}
body.home .bl-body th{background:var(--bg);font-weight:600}
body.home .bl-body img{max-width:100%;height:auto;border-radius:var(--r)}

body.home .bl-cta{margin:44px 0 0;background:var(--rail);color:#fff;border-radius:var(--r);
  padding:26px 30px}
body.home .bl-cta p{margin:0 0 12px;color:#c9ced8;line-height:1.6}
body.home .bl-cta p:last-child{margin:0}
body.home .bl-cta .bl-cta-h{font-family:var(--display);font-size:19px;font-weight:700;color:#fff}
body.home .bl-cta a{color:var(--gold)}
body.home .bl-cta a.btn{display:inline-block;margin-top:6px;background:var(--gold);
  color:var(--rail);border-radius:999px;padding:11px 22px;font-weight:600;text-decoration:none}
body.home .bl-cta a.btn:hover{filter:brightness(.95)}