/* Helio Posts marketing surface — the warm Helios-family language:
   cream ground, navy hero band, pastel blocks, Outfit + Instrument Sans,
   pastel eyebrow pills, floatchips. Distinct from the app work-surface. */
:root {
  --cream: #fbf7f0;
  --paper: #ffffff;
  --navy: #12203c;
  --navy-2: #1c2f52;
  --ink: #16233d;
  --ink-2: #55617a;
  --ink-3: #8790a4;
  --blue: #2c5ef0;
  --amber: #E8A13F;
  --amber-soft: #fdeccd;
  --sky: #e7f0ff;
  --sage: #e2f1e4;
  --blush: #ffe7dc;
  --violet: #efe8fd;
  --line: #ece5da;
  --font-body: 'Instrument Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', var(--font-body);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.62 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
.mnav { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
/* gap:0 on purpose. The mark, the word Helio and the word Posts are three
   separate flex items, so a flex `gap` lands BETWEEN THE TWO WORDS as well as
   after the mark, on top of the ordinary space in the markup. The mark spaces
   itself with a margin instead, and the wordmark keeps a normal word space. */
.mnav .brand { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.mnav .brand > svg { margin-right: 9px; }
/* A flex container strips the whitespace between its items, so the ordinary
   space in `Helio <span>Posts</span>` vanishes with gap:0. Put a real word
   space back, sized in em so it tracks the font rather than a magic pixel. */
.mnav .brand span { color: var(--amber); margin-left: .26em; }
.mnav .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.btn { display: inline-flex; align-items: center; gap: 7px; font: 600 15px/1 var(--font-body); border-radius: 999px; padding: 13px 22px; cursor: pointer; border: 0; min-height: 46px; }
.btn.primary { background: var(--amber); color: #3a2609; }
.btn.primary:hover { filter: brightness(1.04); text-decoration: none; }
.btn.light { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.btn.dark { background: var(--navy); color: #fff; }
.btn.ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.btn .ic { width: 17px; height: 17px; }
.ic { width: 1em; height: 1em; vertical-align: -.16em; }

/* hero */
.hero { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; border-radius: 26px; margin: 8px 0 0; padding: 62px 40px 66px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(232,161,63,.34), transparent 62%); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--amber-soft); color: #7a4f10; font-weight: 700; font-size: 13px; padding: 5px 13px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(34px, 5.4vw, 54px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 16px; font-weight: 700; max-width: 16ch; }
.hero p { font-size: 18px; color: #cdd6e8; max-width: 52ch; margin: 0 0 26px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.floatchips { position: absolute; right: 44px; bottom: 40px; display: none; flex-direction: column; gap: 10px; }
@media (min-width: 940px){ .floatchips { display: flex; } .hero { padding-right: 300px; } }
.fchip { background: rgba(255,255,255,.96); color: var(--ink); border-radius: 14px; padding: 11px 15px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.fchip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.fchip .ic { width: 17px; height: 17px; color: var(--blue); }

/* sections */
section { padding: 54px 0 8px; }
.kicker { display: inline-flex; align-items:center; gap:7px; color: var(--amber); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
h2.big { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 34px); letter-spacing: -.025em; margin: 0 0 10px; font-weight: 700; }
.lead { color: var(--ink-2); font-size: 17px; max-width: 60ch; margin: 0 0 24px; }

.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 680px){ .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px){ .cards { grid-template-columns: 1fr 1fr 1fr; } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.card .badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.card .badge .ic { width: 22px; height: 22px; }
.card:nth-child(6n+1) .badge { background: var(--sky); color: var(--blue); }
.card:nth-child(6n+2) .badge { background: var(--amber-soft); color: #8a5a12; }
.card:nth-child(6n+3) .badge { background: var(--sage); color: #1c7a3d; }
.card:nth-child(6n+4) .badge { background: var(--violet); color: #6b2fc9; }
.card:nth-child(6n+5) .badge { background: var(--blush); color: #b3502f; }
.card:nth-child(6n+6) .badge { background: var(--sky); color: var(--blue); }
.card h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 6px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* navy band (how it works) */
.band { background: var(--navy); color: #fff; border-radius: 24px; padding: 44px 40px; margin-top: 20px; }
.band h2 { color: #fff; }
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
@media (min-width: 780px){ .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px; }
.step .num { font-family: var(--font-display); font-weight: 700; color: var(--amber); font-size: 15px; margin-bottom: 8px; }
.step p { margin: 0; color: #cdd6e8; font-size: 14.5px; }

.note { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 16px; padding: 22px 26px; margin-top: 22px; }
.note h3 { font-family: var(--font-display); margin: 0 0 6px; }
.note p { margin: 0; color: var(--ink-2); }

footer.m { text-align: center; color: var(--ink-3); font-size: 13px; padding: 40px 0 60px; }

/* ============================================================
   SALES v2 — panel-driven rebuild: floatchip mobile reflow,
   before/after duo, cadence band + week strip, bento grid,
   founder strip, step tags, FAQ, closing band, footer rows.
   ============================================================ */

/* hero: second glow so the chip column never sits in dead navy */
.hero::before { content: ""; position: absolute; left: -140px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(44,94,240,.28), transparent 65%); }
.hero .inner-z { position: relative; z-index: 1; }

/* floatchips: column on wide, static wrap row on narrow (never display:none) */
@media (max-width: 939px) {
  .floatchips { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .fchip { font-size: 12.5px; padding: 9px 12px; box-shadow: 0 10px 22px -16px rgba(0,0,0,.55); }
}

/* ---- note in, post out ---- */
.duo { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; margin-top: 26px; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 44px 1fr; } }
.duo .arrow { display: grid; place-items: center; color: var(--amber); }
.duo .arrow svg { width: 30px; height: 30px; transform: rotate(90deg); }
@media (min-width: 860px) { .duo .arrow svg { transform: none; } }
.notepanel { background: var(--amber-soft); border-radius: 18px; padding: 24px; border: 1px solid #f2ddb4; }
.notepanel .from { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a5a12; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.notepanel .who { font-family: var(--font-display); font-weight: 700; margin-bottom: 8px; }
.notepanel .rawnote { font-size: 16px; line-height: 1.55; color: #4b3a15; }
.notepanel .photo { margin-top: 16px; height: 84px; border-radius: 12px; background: #fff8ea; border: 1.5px dashed #dfc286; display: flex; align-items: center; gap: 10px; padding: 0 16px; color: #a07b31; font-size: 13.5px; font-weight: 600; }
.postpanel { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 22px 44px -30px rgba(18,32,60,.35); }
.postpanel .phead { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.postpanel .pava { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.postpanel .pname { font-weight: 700; font-size: 14.5px; }
.postpanel .psub { font-size: 12px; color: var(--ink-3); }
.postpanel .pbody { font-size: 15px; line-height: 1.55; white-space: pre-line; }
.postpanel .pchip { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; background: var(--sage); color: #1c7a3d; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 13px; }
.duo-caption { text-align: center; color: var(--ink-2); font-size: 14.5px; margin-top: 18px; }

/* ---- cadence band (sky) + week strip ---- */
.cadband { background: var(--sky); border-radius: 24px; padding: 44px 40px; margin-top: 20px; }
.cadband .lead { color: #37507e; }
.weekstrip { display: flex; gap: 12px; margin-top: 26px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.wtile { flex: 0 0 172px; background: var(--paper); border: 1px solid #d3e2f8; border-radius: 14px; padding: 14px 15px; }
.wtile .wday { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; }
.wtile .wstate { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 11px; }
.wtile .wstate.done { background: var(--sage); color: #1c7a3d; }
.wtile .wstate.sched { background: var(--sky); color: #2450cc; }
.wtile .wstate.risk { background: var(--amber-soft); color: #8a5a12; }
.wtile .wstate.empty { background: #f1f3f7; color: #7a8398; }
.wtile .wnote { font-size: 12px; color: var(--ink-3); margin-top: 9px; line-height: 1.45; }
.wtile.riskcard { border-color: #e6c07a; border-style: dashed; background: #fffaf0; }
.riskcall { margin-top: 14px; font-size: 14px; font-weight: 600; color: #8a5a12; display: flex; align-items: center; gap: 8px; }
.cad-shot { margin-top: 28px; background: var(--navy); border-radius: 18px; padding: 18px; }
.cad-shot img { width: 100%; height: auto; display: block; border-radius: 10px; }
.cad-shot .shotcap { color: #cdd6e8; font-size: 12.5px; margin-top: 12px; text-align: center; }

/* ---- bento differentiators ---- */
.bento { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 780px) { .bento { grid-template-columns: 1fr 1fr; } }
.bfeature { border-radius: 18px; padding: 26px; border: 1px solid transparent; }
.bfeature.sky { background: var(--sky); border-color: #d3e2f8; }
.bfeature.butter { background: var(--amber-soft); border-color: #f2ddb4; }
.bfeature h3 { font-family: var(--font-display); font-size: 21px; letter-spacing: -.015em; margin: 0 0 8px; }
.bfeature p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.bfeature.sky p { color: #37507e; } .bfeature.butter p { color: #6b4c14; }
.bfeature .minichip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; background: rgba(255,255,255,.75); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; }
.bfeature.sky .minichip { color: #8a5a12; } .bfeature.butter .minichip { color: #2450cc; }
.bgrid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
@media (min-width: 680px) { .bgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .bgrid { grid-template-columns: repeat(4, 1fr); } }

/* ---- founder strip ---- */
.founder { background: var(--blush); border-radius: 18px; padding: 24px 28px; margin-top: 44px; display: flex; gap: 18px; align-items: center; }
.founder blockquote { margin: 0; font-family: var(--font-display); font-size: 19px; letter-spacing: -.01em; line-height: 1.45; }
.founder .sig { font-size: 13.5px; color: #9c4a2e; font-weight: 700; margin-top: 6px; }

/* ---- how-it-works step tags + connectors ---- */
.step { position: relative; }
.step .tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.step .tag.them { background: rgba(232,161,63,.18); color: var(--amber); }
.step .tag.posts { background: rgba(125,211,252,.16); color: #7dd3fc; }
.step .tag.you { background: rgba(74,222,128,.16); color: #4ade80; }
.step.gate { border-color: rgba(232,161,63,.55); }
@media (min-width: 780px) {
  .steps { gap: 22px; }
  .step:not(:last-child)::after { content: ""; position: absolute; right: -17px; top: 50%; width: 12px; height: 12px;
    border-top: 2.5px solid var(--amber); border-right: 2.5px solid var(--amber); transform: translateY(-50%) rotate(45deg); }
}

/* ---- FAQ ---- */
.faq { margin-top: 26px; display: grid; gap: 22px; max-width: 760px; }
.faq h3 { font-family: var(--font-display); font-size: 18.5px; letter-spacing: -.01em; margin: 0 0 6px; }
.faq p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.62; }

/* ---- closing band + footer ---- */
.band.close { text-align: center; padding: 52px 40px; }
.band.close .lead { color: #cdd6e8; margin: 10px auto 24px; max-width: 52ch; }
.band.close .reassure { color: #8d9bb8; font-size: 13.5px; margin-top: 14px; }
footer.m { display: grid; gap: 8px; }
footer.m .fam { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; color: var(--ink-2); }

/* ---- polish: tighter mobile padding, varied rhythm ---- */
@media (max-width: 680px) {
  .hero, .band, .cadband { padding-left: 24px; padding-right: 24px; }
}
section.tight { padding-top: 34px; }
section.roomy { padding-top: 72px; }

/* ============================================================
   HERO v3 — two-column, real product-glimpse card (no overlap).
   Supersedes the floatchip approach above.
   ============================================================ */
.hero { padding: 46px 44px 26px; }
@media (min-width: 940px) { .hero { padding-right: 44px; } }  /* undo old chip gutter */
.herogrid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 940px) { .herogrid { grid-template-columns: 1.08fr .92fr; gap: 44px; } }
.hero h1 { margin-top: 4px; }
.herocopy .cta { margin-top: 4px; }
/* the floating chips are retired; keep the rule harmless if any linger */
.floatchips { display: none !important; }

/* product-glimpse card */
.herocard { background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.hc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; }
.hc-head .t { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.hc-head .wk { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.hrow { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 12px; margin: 4px; position: relative; }
.hrow + .hrow { margin-top: 0; }
.hrow .rail { width: 4px; align-self: stretch; border-radius: 4px; flex: none; }
.hrow.done { background: #f2faf3; } .hrow.done .rail { background: #46b46a; }
.hrow.sched { background: #f2f6ff; } .hrow.sched .rail { background: var(--blue); }
.hrow.risk { background: #fffaf0; } .hrow.risk .rail { background: var(--amber); border: none; }
.hrow .rmain { flex: 1; }
.hrow .day { font-weight: 700; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.hrow .day .st { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.hrow.done .st { background: var(--sage); color: #1c7a3d; }
.hrow.sched .st { background: var(--sky); color: #2450cc; }
.hrow.risk .st { background: var(--amber-soft); color: #8a5a12; }
.hrow .sub2 { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.hrow .ic { width: 15px; height: 15px; }
.hc-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 13px; color: #8a5a12; font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line); margin: 6px 8px 2px; }
.hc-foot .ic { width: 15px; height: 15px; color: var(--amber); }

/* ============================================================
   HERO v4 — full-bleed navy with the faded large composite
   (the house style: big product shot dissolving off the right).
   Supersedes the two-column herocard (v3).
   ============================================================ */
.hero { position: relative; overflow: hidden; margin: 0; border-radius: 0;
  background: linear-gradient(158deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: 0 0 clamp(58px, 7vw, 96px); }
.hero::before, .hero::after { display: none; }  /* retire the v1/v3 glows */
.hero > .wrap { position: relative; z-index: 3; }
.hero .mnav.onhero { padding: 20px 0 0; }
.hero .mnav.onhero .brand { color: #fff; }
.hero .mnav.onhero .brand span { color: var(--amber); }
.hero .mnav.onhero .btn.ghost { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); color: #fff; }
.herocopy { max-width: min(32rem, 45vw); padding-top: clamp(30px, 4.5vw, 58px); padding-bottom: clamp(20px, 4vw, 44px); }
.herogrid { display: block; }  /* neutralise v3 grid if cached */
.hero .herocard { display: none; }  /* v3 card retired */

/* the faded composite: clear near the copy, dissolving off the right + bottom.
   left + copy width are coupled: the copy column ends (~45vw) before the shot's
   clear region begins (~55vw) so they never overlap. */
.hero-shot {
  position: absolute; z-index: 1; top: clamp(104px, 11vw, 176px); left: 55%;
  width: min(56vw, 60rem); height: auto; border-radius: 14px;
  box-shadow: 0 44px 100px -46px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 84%),
                      linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 84%),
                      linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  pointer-events: none;
}
@media (max-width: 1100px) { .hero-shot { left: 60%; } .herocopy { max-width: min(30rem, 52vw); } }
.hero-glow { position: absolute; z-index: 0; right: -6%; top: -22%; width: 58%; height: 125%;
  background: radial-gradient(50% 55% at 56% 46%, rgba(232,161,63,.30), transparent 66%);
  filter: blur(8px); pointer-events: none; }
.hero-glow.blue { right: auto; left: -14%; bottom: -30%; top: auto; height: 90%; width: 46%;
  background: radial-gradient(50% 55% at 40% 50%, rgba(44,94,240,.26), transparent 68%); }

@media (max-width: 900px) {
  .hero-shot, .hero-glow { display: none; }
  .herocopy { max-width: none; padding-top: 26px; }
  .hero { background: linear-gradient(158deg, var(--navy), var(--navy-2)); }
}

/* ============================================================
   HERO v5 — framed composite showcase (the Helio SEO / Helios
   pattern): a framed product screenshot with floating white
   callout cards overlapping it. Supersedes the bleed-off shot.
   ============================================================ */
.herogrid2 { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center;
  padding-top: clamp(18px, 2.6vw, 36px); }
@media (min-width: 960px) { .herogrid2 { grid-template-columns: 0.92fr 1.08fr; gap: 40px; } }
.herogrid2 .herocopy { max-width: 34rem; padding: 0; }

.showcase { position: relative; }
.scshot { display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 40px 90px -44px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 92%); }

/* 2026-08-19. The shot used to sit inside its grid column with a 6% nudge, so it
   read as a picture placed on the page rather than a product running past the
   edge of it. Helios and Helio SEO both take the art out of flow and let it run
   off the right of the viewport, faded out at the bottom; this is that pattern.
   The copy column keeps the grid to itself and the hero reserves the height the
   absolutely-positioned art no longer contributes, or the copy collides with it. */
@media (min-width: 960px) {
  .herogrid2 { grid-template-columns: 1fr; position: relative;
    /* Tall enough that the shot's bottom fade FINISHES inside the hero. At 0.60
       the hero clipped 66px early and left a hard horizontal edge across the
       artwork, which is the one thing this pattern must not do. */
    /* 2026-08-24 (2). The reserve was sized to the art's FULL box, but the
       bottom quarter of that box is faded to transparent, so we were holding
       open 90-170px of empty navy under the copy (measured). The mask now
       finishes higher (62-92%), so the reserve can too, and the fold moves up
       by that much. Still ~20px of slack at every width between where the fade
       completes and where the hero ends. */
    min-height: calc(min(60vw, 1040px) * 0.52 + 44px); }
  /* 2026-08-24. The art starts at 50% + 18px, so a FIXED copy width is a
     collision waiting for the right viewport: at 960-1000 the frame landed 50px
     and 30px inside the paragraph (measured, not eyeballed). Tie the copy to the
     same 50% the art is positioned from and the gap can never close again. */
  .herogrid2 .herocopy { max-width: min(33rem, calc(50% - 40px)); }
  .showcase { position: absolute; top: 32px; left: calc(50% + 18px);
    width: min(60vw, 1040px); margin-right: 0; }
}

.zoomcard { position: absolute; background: #fff; border-radius: 14px;
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.55); border: 1px solid rgba(18,32,60,.06);
  color: var(--ink); }
.zoomcard.za { top: 12%; right: -5%; left: auto; display: flex; align-items: center; gap: 11px;
  padding: 12px 16px 12px 13px; background: #fff7ea; border-color: #f2ddb4; width: 58%; }
.zoomcard.za .zbadge { width: 30px; height: 30px; border-radius: 9px; background: var(--amber-soft);
  color: #8a5a12; display: grid; place-items: center; flex: none; }
.zoomcard.za .zbadge .ic { width: 17px; height: 17px; }
.zoomcard.za .zt { font-weight: 700; font-size: 13.5px; font-family: var(--font-display); }
.zoomcard.za .zs { font-size: 12px; color: var(--ink-2); }
.zoomcard.zb { bottom: 10%; right: -5%; left: auto; width: 58%; padding: 14px 16px; }
.zoomcard.zb .zhead { font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-bottom: 9px; }
.zoomcard.zb .zrow { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); padding: 4px 0; }
.zoomcard.zb .zrow b { color: var(--ink); font-weight: 600; }
.zoomcard.zb .zdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zoomcard.zb .zdot.done { background: #46b46a; }
.zoomcard.zb .zdot.sched { background: var(--blue); }
.zoomcard.zb .zdot.draft { background: var(--amber); }

/* The zoom cards hung off the RIGHT of the frame, which since 2026-08-19 is the
   edge that runs off the screen, so they went with it. Straddle the LEFT edge
   instead, the way the Helios hero chips do: they land on the visible part of
   the shot and tie it back to the copy. Must come after the base rules above —
   same specificity, so source order is what decides. */
@media (min-width: 960px) {
  /* Straddles the TOP edge of the frame rather than sitting inside it, so it
     stops covering the workspace name in the shot underneath. */
  /* 46% not 56%: at the wider size its right edge reached x1204 and ran under
     the Sign in button at x1136. The copy is two short lines, so the narrower
     card loses nothing and keeps the straddle high on the frame. */
  /* 2026-08-24: 46% of a frame that keeps growing means the card keeps growing
     too, and past 1600 its right edge went under the Sign in button again (10px
     at 1600, 46px at 1920). The percentage was never the point, the straddle
     was, so cap the actual width. */
  .zoomcard.za { top: -16px; left: -34px; right: auto; width: min(46%, 384px); }
  /* Card B sits over the RIGHT half of the shot, not straddling the left edge
     like card A. Once the shot was cropped shallower its bottom-left landed
     squarely on the body paragraph. Keeping it right of the copy is what
     matters; the straddle is card A's job. */
  /* 2026-08-24: was bottom:-10%, hanging below the frame. Once the mask started
     fading at 62% that put it over transparent nothing, and once the feature bar
     was lifted onto the hero edge the two collided from 1512 up (measured, 220x36
     at the worst). Sitting it ON the art is both more coherent and clear of the bar. */
  .zoomcard.zb { bottom: 10%; left: 30%; right: auto; width: 44%; }
}

@media (max-width: 959px) {
  .showcase { max-width: 560px; margin: 0 auto; }
  .zoomcard.za { right: 0; top: -16px; width: 66%; }
  .zoomcard.zb { right: 0; bottom: 6%; width: 66%; }
}
@media (max-width: 600px) { .zoomcard { display: none; }
  .scshot { -webkit-mask-image: none; mask-image: none; } }
/* retire the v4 bleed-shot rules if cached */
.hero-shot { display: none; }

/* Helio family cross-sell band */
.famcross { display: flex; gap: 26px; align-items: center; background: var(--paper);
  border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px;
  box-shadow: 0 20px 50px -40px rgba(18,32,60,.5); }
.famcross .famhelio { flex: none; width: 90px; height: 90px; border-radius: 20px; background: #12203c;
  display: grid; place-items: center; }
.famcross .fambody { flex: 1; }
.famcross .btn.dark { background: var(--navy); color: #fff; }
.famcross .btn.dark:hover { filter: brightness(1.12); text-decoration: none; }
@media (max-width: 680px) { .famcross { flex-direction: column; text-align: center; align-items: center; } .famcross .fambody .kicker { justify-content: center; } }

/* image cards + carousels showcase */
.imgshow { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
@media (min-width: 720px) { .imgshow { grid-template-columns: repeat(3, 1fr); } }
.imgshow figure { margin: 0; }
.imgshow img { width: 100%; border-radius: 16px; border: 1px solid var(--line); display: block;
  box-shadow: 0 26px 56px -34px rgba(18,32,60,.5); }
.imgshow figcaption { text-align: center; font-size: 13.5px; color: var(--ink-2); font-weight: 600; margin-top: 12px; }
.imgshow .carou { position: relative; }
.imgshow .carbadge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(18,32,60,.82); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 12px; }
.imgshow .carbadge .ic { width: 13px; height: 13px; }

/* "reads your website first" grounding band */
.groundband { display: grid; grid-template-columns: 1fr; gap: 22px; background: var(--sage);
  border: 1px solid #cfe6d3; border-radius: 20px; padding: 30px 32px; }
@media (min-width: 820px) { .groundband { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 34px; } }
.groundband .gtext h2 { margin-bottom: 8px; }
.glearned { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 20px 44px -34px rgba(18,32,60,.5); }
.glearned .glhead { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 12px; }
.glearned .glhead .ic { color: var(--amber); }
.glearned .glrow { font-size: 14px; color: var(--ink-2); padding: 8px 0; border-top: 1px solid var(--line); line-height: 1.5; }
.glearned .glrow:first-of-type { border-top: 0; }
.glearned .glrow b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); margin-bottom: 2px; }
/* mini section head inside a section */
.sec-mini { margin: 46px 0 18px; }

/* ── Site nav links (2026-08-19, when Helio Posts grew past one page) ── */
.navlinks { display: none; gap: 22px; margin-left: 30px; font-size: 14.5px; font-weight: 500; }
.navlinks a { color: var(--ink-2); text-decoration: none; }
.navlinks a:hover, .navlinks a.on { color: var(--ink); }
.mnav.onhero .navlinks a { color: #cdd6e8; }
.mnav.onhero .navlinks a:hover, .mnav.onhero .navlinks a.on { color: #fff; }
@media (min-width: 860px) { .navlinks { display: flex; } }

.fnav { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 10px 0; font-size: 14px; }
.fnav a { color: var(--ink-2); text-decoration: none; }
.fnav a:hover { color: var(--ink); }

/* ── Capability ribbon, the beat the other two sites carry under the hero ──
   Deliberately "what's included" rather than "integrates with": Helio Posts connects
   to LinkedIn and nothing else, so an integrations bar would be one logo and a
   lot of white space. The capabilities are the honest equivalent. */
/* 2026-08-24. Two problems, one move. Measured, the bar needed 32-91px of
   scroll to be fully visible at every real laptop size, and it read as a pale
   block of small print rather than the "you get all of it" claim it actually
   is. Lifting it onto the hero's bottom edge fixes both: it climbs above the
   fold, and a white card against the navy carries far more weight than a tint
   on the cream did. */
/* Centred, not flush left: the row wraps unevenly (measured, the second row
   stopped 253px short of the right edge while starting hard against the left),
   which reads as a bar that has been knocked out of alignment. */
.featurebar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 11px 20px;
  background: #fff; border: 1px solid rgba(18,32,60,.07); border-radius: 18px;
  padding: 20px 26px; margin-top: -54px; position: relative; z-index: 4;
  box-shadow: 0 34px 64px -30px rgba(10,20,45,.55); }
.featurebar .fblabel { font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  margin-right: 6px; white-space: nowrap; }
.featurebar .fbitem { display: inline-flex; align-items: center; gap: 7px; font-size: 14px;
  font-weight: 600; color: var(--ink); white-space: nowrap; }
/* Full-strength amber, not a 75%-opacity grey. The icons are the only colour in
   the row and they are what makes it read as a list of things you get. */
.featurebar .fbitem .ic { width: 15px; height: 15px; flex: none; color: var(--amber); opacity: 1; }
.featurenote { text-align: center; color: var(--ink-3); font-size: 13.5px; margin-top: 14px; }
@media (max-width: 700px) { .featurebar { padding: 16px 18px; } }

/* ── Sub-page opening block ── */
.pagehead { padding-top: 26px; }
.pagehead h1 { font-family: var(--font-display); font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.06; letter-spacing: -.03em; margin: 10px 0 14px; font-weight: 700; max-width: 20ch; }
.pagehead p { font-size: 18px; color: var(--ink-2); max-width: 60ch; margin: 0; }

/* ── Sticky CTA bar (2026-08-20) ──────────────────────────────────────────
   Same reasoning as Helio SEO: a 8,500px page where only 2 of 12 sections
   offered a next step, so anyone convinced halfway down had to scroll hunting
   for a button. Hidden while the hero is on screen — the hero has its own
   buttons and a second competing one is noise. */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);
  color:#fff;padding:11px 0;box-shadow:0 -8px 26px rgba(8,15,35,.3);
  transform:translateY(110%);transition:transform .28s ease;
  padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.stickycta.on{transform:none}
.stickycta .inner{max-width:1180px;margin:0 auto;padding:0 40px;display:flex;
  align-items:center;gap:20px}
.stickycta .pts{display:none;gap:20px;font-size:13.5px;color:#cdd6e8}
.stickycta .pts span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.stickycta .pts b{color:#fff;font-weight:600}
.stickycta .tick{color:var(--amber);font-weight:700}
.stickycta .go{margin-left:auto}
.stickycta .btn{padding:11px 22px;font-size:14.5px;min-height:0}
@media(min-width:980px){.stickycta .pts{display:flex}}
@media(max-width:760px){
  .stickycta .inner{padding:0 18px}
  .stickycta .go{width:100%}
  .stickycta .btn{width:100%;justify-content:center}
}
body.has-stickycta{padding-bottom:74px}
@media(prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* Section-level CTAs: the step that follows from what was just read. */
.seclink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:15px;font-weight:600;color:var(--blue);text-decoration:none}
.seclink:hover{text-decoration:underline}
.seclink.centred{display:flex;justify-content:center}
.band .seclink,.groundband .seclink{color:var(--amber)}

/* ── The page itself, shown rather than described (2026-08-20) ────────────
   The Helio Posts equivalent of the Helio SEO assistant answer. The whole pitch is
   "a feed that never goes quiet", and the page said that in words while never
   showing a feed. A company page going quiet has a very recognisable look —
   the gap between the dates — and that gap IS the argument. */
.feedgrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:26px}
@media(min-width:940px){.feedgrid{grid-template-columns:1fr 1fr;gap:22px}}

.feedwin{background:#fff;border:1px solid rgba(18,32,60,.10);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 16px 40px -20px rgba(8,15,35,.45);color:var(--ink)}
.feedbar{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid rgba(18,32,60,.08)}
.feedbar img{width:18px;height:18px}
.feedbar .nm{font-family:var(--font-display);font-weight:700;font-size:14px}
.feedbar .st{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-radius:999px;padding:4px 10px}
.feedwin.quiet .st{background:#ffe3d6;color:#8a3b1c}
.feedwin.alive .st{background:#dff0e4;color:#1d5b2a}

.fpage{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid rgba(18,32,60,.08)}
.fpage .av{width:38px;height:38px;border-radius:8px;background:var(--navy);color:#fff;flex:none;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:15px}
.fpage b{display:block;font-family:var(--font-display);font-size:14.5px}
.fpage small{color:var(--ink-3);font-size:12.5px}

.fposts{padding:6px 16px 14px}
.fpost{padding:13px 0;border-bottom:1px solid rgba(18,32,60,.07)}
.fpost:last-child{border-bottom:0}
.fpost .when{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.fpost.stale .when{color:#c2502a}
.fpost p{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.fpost .react{margin-top:7px;font-size:12px;color:var(--ink-3)}
.fgap{text-align:center;padding:22px 10px;color:#c2502a;font-size:13px;font-weight:600;
  background:repeating-linear-gradient(135deg,#fff,#fff 9px,#fdf1ec 9px,#fdf1ec 18px);
  border-radius:10px;margin:10px 0}
.feedfoot{margin-top:auto;padding:12px 16px;display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;border-top:1px solid rgba(18,32,60,.08)}
.feedwin.quiet .feedfoot{background:#fdf4f1;color:#8a3b1c}
.feedwin.alive .feedfoot{background:#f2faf4;color:#14532d}
.feedfoot .dot{width:19px;height:19px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-size:11px;font-weight:700}
.feedwin.quiet .feedfoot .dot{background:#c2502a}
.feedwin.alive .feedfoot .dot{background:#2f8a45}

/* ── What it costs any other way (2026-08-20) ─────────────────────────────
   "Free" needs an anchor or it reads as "worth nothing". Same honesty rule as
   Helio SEO's version: typical UK market ranges, described as such, and no
   invented total-value number. */
.costrow{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px}
@media(min-width:860px){.costrow{grid-template-columns:repeat(3,1fr);gap:16px}}
.costcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.costcard .who{font-family:var(--font-display);font-weight:700;font-size:16.5px}
.costcard .fig{font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,3.2vw,31px);line-height:1.1;margin:12px 0 4px;letter-spacing:-.02em}
.costcard .per{font-size:13.5px;color:var(--ink-3)}
.costcard p{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:12px}
.costcard.us{background:var(--navy);border-color:var(--navy);color:#fff}
.costcard.us .fig{color:var(--amber)}
.costcard.us .per,.costcard.us p{color:#cdd6e8}

/* ── Objection sub-bullets under a claim (2026-08-20) ─────────────────────
   Borrowed from the competitor teardown, and the one technique of theirs worth
   copying outright: answer the doubt directly under the claim that causes it,
   rather than leaving it to an FAQ the reader may never reach. "Nothing posts
   without a human" invites "yes but really?", so the answer sits right there. */
.subpoints{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.subpoints li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.55;
  color:var(--ink-2)}
.subpoints li .ic{width:15px;height:15px;flex:none;margin-top:3px;color:var(--amber)}
.subpoints li b{color:var(--ink);font-weight:600}