/* Helio Posts front page (8 Oct 2026). The same design language as the Helio
   Guard sales site, whose stylesheet this began as.
   Real photos with the product floating over them. Helio family colours:
   navy, amber gradient, Outfit lettering. One light look, painted explicitly. */

:root {
  --ink: #121417;
  --ink-2: #353A42;
  --soft: #5D636D;
  /* Cool off-white tinted toward Helio navy (4 Oct 2026): the warm cream read as AI-template. */
  --ground: #F3F5F8;
  --paper: #FFFFFF;
  --line: rgba(18, 20, 23, 0.09);
  --navy: #12203C;
  --navy-2: #1B2440;
  --amber: #F0A73A;
  --gold-1: #FFD98A;
  --gold-2: #E8A13F;
  --gold-ink: #94570A;
  --ok: #1F6B45;
  --ok-bg: #E3F1E8;
  --stop: #A3361C;
  --stop-bg: #FBE7E1;
  --wait: #6B4A0C;
  --wait-bg: #FBEFD9;
  --shadow: 0 30px 60px -22px rgba(20, 16, 12, 0.42), 0 0 0 1px rgba(0, 0, 0, 0.05);
  /* Libre Franklin (picked 4 Oct 2026): classic, not the AI-template look.
     Outfit stays only in the Helio family wordmark. */
  --display: 'Libre Franklin', 'Franklin Gothic Medium', 'Segoe UI', system-ui, sans-serif;
  --body: 'Libre Franklin', 'Segoe UI', system-ui, sans-serif;
  --brand: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 6px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15.5px; text-decoration: none; border: 0; cursor: pointer; transition: transform 160ms ease, background 160ms ease; }
.btn:hover { transform: translateY(-1px); background: #000; }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { background: #ECEFF4; }
.btn.gold { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--navy); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.sm { padding: 10px 18px; font-size: 14.5px; }

/* ---------- header ---------- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(243, 245, 248, 0.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 42px; height: 42px; }
.wm { font-family: var(--brand); font-weight: 700; font-size: 24px; letter-spacing: -0.025em; white-space: nowrap; }
.wm span { color: var(--gold-2); }
.nav { display: flex; gap: 28px; font-size: 15.5px; font-weight: 500; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.hdr-cta { flex: none; }
/* "Sign in", beside the header button once sign-ups open (scripts/guard_site_launch.py). */
.hdr-signin { flex: none; font-size: 15px; font-weight: 600; color: inherit; text-decoration: none; opacity: .85; margin-right: 4px; }
.hdr-signin:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 480px) { .hdr-signin { display: none; } }
@media (max-width: 960px) { .nav { display: none; } }
@media (max-width: 480px) { .wm { font-size: 21px; } .brand img { width: 36px; height: 36px; } .hdr-cta { padding: 9px 14px; font-size: 14px; } }

/* ---------- product cards that float over photos ---------- */
.logo { display: inline-block; width: 18px; height: 18px; background: var(--c, #121417); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
.badge { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--t, #F2F2F2); }
.pop { position: absolute; opacity: 0; transform: translateY(16px) scale(0.94); transition: opacity 450ms ease, transform 650ms cubic-bezier(.2, 1.2, .3, 1); pointer-events: none; }
.pop.on { opacity: 1; transform: none; pointer-events: auto; }
.card { width: 100%; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; position: relative; font-size: 15px; line-height: 1.45; color: var(--ink); }
/* The moment Helio Guard acts: an amber ring that fades. */
.card.hit::after { content: ""; position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--amber); animation: flash 1400ms ease-out forwards; pointer-events: none; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.head .tool { font-weight: 700; font-size: 15px; }
.head .meta { margin-left: auto; font-size: 12.5px; color: var(--soft); white-space: nowrap; }
.body { padding: 8px 14px 14px 58px; }
.body b { display: block; font-size: 16px; line-height: 1.3; }
.body .d { display: block; font-size: 13.5px; color: var(--soft); margin-top: 3px; }
.act { display: inline-block; margin-top: 10px; padding: 7px 11px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; }
.tag { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 6px; font: 600 11px var(--mono); letter-spacing: 0.05em; }
.tag.out { background: var(--ok-bg); color: var(--ok); }
.tag.stop { background: var(--stop-bg); color: var(--stop); }
.msg { position: relative; overflow: hidden; margin: 10px 14px 14px 58px; padding: 11px 13px; border-radius: 13px; background: #F0F1F3; font-size: 15px; line-height: 1.5; }
.chip { display: inline-block; background: var(--amber); color: #121417; border-radius: 5px; padding: 0 7px; font: 600 11.5px var(--mono); letter-spacing: 0.05em; vertical-align: 2px; animation: chip 380ms cubic-bezier(.2, 1.5, .4, 1); }
@keyframes chip { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
.hl { background: rgba(240, 167, 58, 0.32); border-radius: 4px; padding: 0 3px; }
.msg.scan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -40%; background: linear-gradient(90deg, rgba(240,167,58,0) 0%, rgba(240,167,58,0.35) 70%, rgba(240,167,58,0.9) 100%); animation: scan 800ms cubic-bezier(.4, 0, .4, 1) forwards; }
@keyframes scan { to { left: 102%; } }
.verdict { display: flex; gap: 11px; align-items: center; margin: 0 14px 14px; padding: 11px 13px; border-radius: 12px; background: var(--navy); color: #fff; }
.verdict img { width: 26px; height: 26px; flex: none; }
.verdict b { font-size: 14px; display: block; }
.verdict small { font-size: 12px; color: #B8C0D0; }
/* Results stay folded until Helio Guard acts, then open. */
.res { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 500ms cubic-bezier(.2, .8, .2, 1), opacity 400ms ease; }
.res > div { overflow: hidden; min-height: 0; }
.hit .res, .res.open { grid-template-rows: 1fr; opacity: 1; }
.prog { display: block; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, transparent 0 30%, #9AA1AD 30% 60%, transparent 60%) 0 0 / 200% 100% #ECEDEF; animation: prog 1100ms linear infinite; }
@keyframes prog { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.hit .prog { display: none; }

/* ---------- hero ---------- */
.hero { padding-inline: 24px; }
/* Sized so the AI logo line under it is on the first screen of a laptop (5 Oct
   2026): header 76 + strip about 100 come off the screen height. */
.frame { position: relative; max-width: 1392px; margin: 0 auto; height: min(calc(100vh - 192px), 840px); min-height: 520px; border-radius: 28px; overflow: hidden; background: #cfcac2; }
.frame > .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.frame .grade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,10,8,0.62) 0%, rgba(14,10,8,0.38) 30%, rgba(14,10,8,0) 55%); }
/* The words sit high on the left, in the open space above the laptop (4 Oct). */
.frame .words { position: absolute; left: 56px; top: 16%; max-width: 560px; color: #fff; z-index: 2; }
.frame h1 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.015em; font-weight: 700; }
.frame .sub { margin: 16px 0 24px; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,0.92); max-width: 520px; }
.frame .meta-line { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,0.8); }
.slot { position: absolute; z-index: 3; }
.slot-a { right: 40px; top: 36px; width: 440px; height: 250px; }
.slot-b { right: 40px; top: 310px; width: 340px; height: 190px; }
.slot-c { left: 43%; bottom: 40px; width: 340px; height: 160px; }
.slot-c .pop { bottom: 0; }
.slot .pop { width: 100%; }
.count { position: absolute; right: 40px; bottom: 40px; z-index: 3; width: 280px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.94); backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.4); }
.count .k { font-size: 13px; color: var(--soft); }
.count .n { display: inline-block; font-family: var(--display); font-size: 52px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; transform-origin: left center; }
.count .n.bump { animation: bump 600ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: #C77A0E; } 100% { transform: scale(1); } }
.count .last { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); min-height: 2.3em; }
@media (max-width: 1300px) { .slot-c { display: none; } }
/* 5 Oct 2026: on a laptop the frame is shorter than the three right-hand cards
   (a 13-inch MacBook: the upload card sat under the count). Below this height the
   upload story is left to the Files tab further down. */
@media (min-width: 901px) and (max-height: 830px) { .slot-b { display: none; } }
@media (min-width: 901px) and (max-width: 1280px) { .slot-a { width: 380px; } .slot-b { width: 300px; } .frame .words { max-width: 440px; } .frame .sub { font-size: 17px; } }
@media (min-width: 901px) and (max-width: 1060px) { .slot-a { width: 340px; right: 28px; } .frame .words { left: 40px; max-width: 380px; } }
@media (max-width: 900px) {
  .hero { padding-inline: 12px; }
  .frame { height: auto; min-height: 0; display: flex; flex-direction: column; border-radius: 22px; }
  .frame > .photo { position: relative; height: 300px; object-position: 62% 40%; }
  .frame .grade { display: none; }
  .frame .words { position: relative; left: auto; bottom: auto; padding: 22px 20px 26px; background: var(--navy); max-width: none; order: 3; }
  .slot-a { position: relative; right: auto; top: auto; width: auto; height: auto; margin: -110px 12px 0; order: 2; }
  .slot-a .pop { position: relative; display: none; }
  .slot-a #p1 { display: block; }
  .slot-b, .slot-c, .count { display: none; }
}

/* ---------- AI logo strip ---------- */
.tools { padding: 22px 0 16px; text-align: center; }
.tools p { margin: 0 0 10px; font-size: 13px; color: var(--soft); }
.tools .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 40px; }
/* Below that, two even rows of five, never eight and an orphaned two (5 Oct 2026). */
@media (min-width: 601px) and (max-width: 1199px) { .tools .row { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; } }
/* One line wherever all ten fit (5 Oct 2026). */
@media (min-width: 1200px) { .tools .row { flex-wrap: nowrap; gap: 0 30px; } }
.tools .row div { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 14px; font-weight: 600; color: #3A3F47; letter-spacing: 0; }
.tools .row .logo { width: 18px; height: 18px; }
@media (max-width: 600px) { .tools .row { gap: 12px 22px; } .tools .row div { font-size: 14px; } .tools .row .logo { width: 18px; height: 18px; } }

/* ---------- section scaffolding ---------- */
.sec { padding: 92px 0 0; }
.eyebrow { display: block; font: 600 16px var(--body); color: var(--gold-ink); margin-bottom: 14px; }
.sec h2 { font-size: clamp(28px, 2.6vw, 36px); }
.lede { margin-top: 18px; font-size: 19px; color: var(--ink-2); max-width: 34em; }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; counter-reset: s; }
.steps li { position: relative; padding-left: 44px; color: var(--ink-2); counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font: 700 13px var(--body); color: var(--ink); }
.steps b { color: var(--ink); }
.note { margin-top: 22px; font-size: 14.5px; color: var(--soft); }

/* A feature: words on one side, a photo with the product floating over it. */
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.feat.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feat.flip .copy { order: 2; }
.scene { position: relative; }
.scene > .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 26px; }
.scene .fl { position: absolute; z-index: 2; }
.scene.wide > .ph { aspect-ratio: 3 / 2; }
@media (max-width: 960px) {
  .sec { padding-top: 80px; }
  .feat, .feat.flip { grid-template-columns: 1fr; gap: 32px; }
  .feat.flip .copy { order: 0; }
}
@media (max-width: 760px) {
  .scene > .ph, .scene.wide > .ph { aspect-ratio: 4 / 3; border-radius: 20px; }
  .scene .fl { position: relative; inset: auto !important; width: auto !important; margin: -48px 12px 0; }
  .scene .fl + .fl { margin-top: 12px; }
  .scene .pin, .scene .fl.desk { display: none; }
}

/* ---------- try it ---------- */
.try { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.tool { background: var(--paper); border-radius: 24px; box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgba(20,16,12,0.35); overflow: hidden; }
.tool-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tool-bar button { font: 600 14px var(--body); padding: 8px 14px; border-radius: 999px; border: 0; background: #E9EDF3; color: var(--ink); cursor: pointer; }
.tool-bar button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tool-bar button.clear { margin-left: auto; background: transparent; color: var(--soft); }
.panes { display: grid; grid-template-columns: 1fr 1fr; }
.pane { padding: 18px; min-height: 250px; }
.pane + .pane { border-left: 1px solid var(--line); background: #F8FAFC; }
.pane label, .pane .lbl { display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--body); color: var(--soft); margin-bottom: 10px; }
.pane .lbl .logo { width: 14px; height: 14px; }
.pane textarea { width: 100%; min-height: 200px; border: 0; resize: vertical; font: 400 16px/1.55 var(--body); color: var(--ink); background: transparent; outline: none; padding: 0; }
.pane .out { white-space: pre-wrap; font-size: 16px; line-height: 1.55; }
.pane .out .chip-l { display: inline-block; background: var(--amber); color: #121417; border-radius: 5px; padding: 0 7px; font: 600 11.5px var(--mono); letter-spacing: 0.05em; vertical-align: 2px; animation: chip 380ms cubic-bezier(.2, 1.5, .4, 1); }
.pane .out .empty { color: var(--soft); }
.sum { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 15px; min-height: 52px; }
.sum .seen-like { display: block; color: var(--soft); font-size: 14px; margin-top: 2px; }
.tool-foot { padding: 0 18px 16px; font-size: 13.5px; color: var(--soft); }
@media (max-width: 960px) { .try { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) { .panes { grid-template-columns: 1fr; } .pane + .pane { border-left: 0; border-top: 1px solid var(--line); } .pane { min-height: 0; } }

/* ---------- files ---------- */
.file { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #F4F5F7; font-size: 13.5px; }
.file .xl { width: 26px; height: 30px; border-radius: 4px; background: #1D6F42; color: #fff; font: 700 9px var(--mono); display: grid; place-items: end center; padding-bottom: 4px; flex: none; }
.file .fn { font-weight: 600; }
.file .fs { color: var(--soft); margin-left: auto; font-size: 12.5px; }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.tally div { padding: 7px 8px; border-radius: 8px; background: #F4F5F7; font-size: 12px; color: var(--soft); }
.tally b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--navy); color: #fff; box-shadow: var(--shadow); font-size: 14px; }
.toast img { width: 24px; height: 24px; flex: none; }
.toast small { display: block; color: #B8C0D0; font-size: 12.5px; }

/* ---------- AI sites ---------- */
.rules .rh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.rules .rh b { font-size: 15.5px; }
.rules .rh span { font-size: 12.5px; color: var(--soft); }
.rule { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 600; }
.rule:last-child { border-bottom: 0; }
.rule .badge { width: 30px; height: 30px; border-radius: 9px; }
.rule .badge .logo { width: 16px; height: 16px; }
.state { margin-left: auto; padding: 4px 10px; border-radius: 999px; font: 600 11px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; transition: background 300ms, color 300ms; white-space: nowrap; }
.state[data-s="approved"] { background: var(--ok-bg); color: var(--ok); }
.state[data-s="allowed"] { background: #EEF0F3; color: #464C55; }
.state[data-s="send"] { background: var(--wait-bg); color: var(--wait); }
.state[data-s="blocked"] { background: var(--stop-bg); color: var(--stop); }
.state.flip { animation: flipst 420ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes flipst { 0% { transform: scale(0.7); } 100% { transform: none; } }
.rule.live { background: #FFF8EC; }
.legend { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.legend li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); }
.legend .state { margin-left: 0; flex: none; width: 140px; text-align: center; }

/* ---------- policy ---------- */
.policy .ph-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; font-size: 12.5px; color: var(--soft); }
.policy .ph-top img { width: 22px; height: 22px; }
.policy h3 { font-size: 21px; padding: 8px 16px 0; letter-spacing: -0.02em; }
.policy .intro { padding: 4px 16px 0; color: var(--ink-2); font-size: 14.5px; }
.policy ul { margin: 10px 16px 0; padding: 0 0 0 18px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }
.policy .btns { display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; }
.policy .agree { padding: 9px 16px; border-radius: 9px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; transition: transform 140ms; }
.policy .agree.press { transform: scale(0.94); background: #000; }
.policy .full { font-size: 13.5px; color: var(--soft); text-decoration: underline; }
.policy .done { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; padding: 10px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: 14px; }
.ledger .lh { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 8px; }
.ledger .lh b { font-size: 15px; }
.ledger .lh span { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.ledger .bar { height: 6px; margin: 0 16px 8px; border-radius: 6px; background: #EEF0F3; overflow: hidden; }
.ledger .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); border-radius: 6px; transition: width 700ms cubic-bezier(.2, .8, .2, 1); }
.ledger ol { list-style: none; margin: 0; padding: 0 0 6px; }
.ledger li { display: flex; justify-content: space-between; padding: 7px 16px; font-size: 13.5px; border-top: 1px solid var(--line); }
.ledger li span { color: var(--soft); font-variant-numeric: tabular-nums; }
.ledger li.new { animation: rowin 600ms cubic-bezier(.2, 1, .3, 1); background: #FFF8EC; }
@keyframes rowin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- dashboard + report ---------- */
.split-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: end; margin-bottom: 44px; }
.split-head .lede { margin-top: 0; }
@media (max-width: 960px) { .split-head { grid-template-columns: 1fr; gap: 18px; } }
.dash .dh { padding: 14px 16px 0; font-size: 13px; color: var(--soft); }
.dash .big { padding: 2px 16px 0; font-family: var(--display); font-size: 58px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.dash .sub { padding: 4px 16px 12px; font-size: 13px; color: var(--soft); border-bottom: 1px solid var(--line); }
.kinds { padding: 10px 16px 14px; display: grid; gap: 8px; }
.kind { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; }
.kind span { font-variant-numeric: tabular-nums; font-weight: 600; }
.kind i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: #EEF0F3; overflow: hidden; }
.kind i b { display: block; height: 100%; width: var(--w); background: var(--navy-2); border-radius: 6px; transition: width 900ms cubic-bezier(.2, .8, .2, 1); }
.mail .mh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--soft); }
.mail .mh img { width: 28px; height: 28px; }
.mail .mh b { color: var(--ink); font-size: 13.5px; display: block; }
.mail .subj { padding: 12px 14px 0; font-weight: 700; font-size: 16px; line-height: 1.3; }
.mail .lines { padding: 8px 14px 0; display: grid; gap: 4px; font-size: 13.5px; }
.mail .lines div { display: flex; gap: 8px; }
.mail .lines b { font-variant-numeric: tabular-nums; min-width: 1.4em; }
.mail .next { margin: 12px 14px 14px; padding: 10px 12px; border-radius: 10px; background: var(--wait-bg); color: var(--wait); font-size: 13.5px; }
.mail .next b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }

/* ---------- install ---------- */
/* A pin: an amber dot exactly on the screen, the label just above it. */
.pin { position: absolute; z-index: 2; width: 0; height: 0; }
.pin::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(255,255,255,0.95), 0 4px 10px rgba(0,0,0,0.45); transform: scale(0); transition: transform 400ms cubic-bezier(.2, 1.6, .4, 1); }
.pin span { position: absolute; left: 0; bottom: 12px; width: max-content; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(255,255,255,0.96); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.55); font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px) scale(0.6); transform-origin: 50% 100%; transition: opacity 300ms 80ms, transform 500ms 80ms cubic-bezier(.2, 1.6, .4, 1); }
.pin img { width: 20px; height: 20px; }
.pin.on::before { transform: scale(1); }
.pin.on span { opacity: 1; transform: translate(-50%, 0); }
.deploy .dh { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; }
.deploy .dh b { font-size: 15.5px; }
.deploy .dh span { font: 600 12px var(--mono); color: var(--soft); font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: 4px; padding: 0 16px; }
.tabs span { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--soft); background: #F4F5F7; }
.tabs span.on { background: var(--ink); color: #fff; }
.deploy dl { margin: 12px 16px 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.deploy dt { color: var(--soft); }
.deploy dd { margin: 0; font-weight: 600; }
.deploy .pbar { height: 8px; margin: 14px 16px 6px; border-radius: 8px; background: #EEF0F3; overflow: hidden; }
.deploy .pbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); border-radius: 8px; }
.deploy .pc { padding: 0 16px 14px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rulesent .rh { padding: 12px 14px 4px; font-weight: 700; font-size: 14.5px; }
.rulesent div.r { display: flex; justify-content: space-between; gap: 12px; padding: 6px 14px; font-size: 13px; }
.rulesent div.r span:last-child { font-weight: 600; }
.rulesent .ok { margin: 8px 14px 12px; font-size: 13px; color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.three div { padding-top: 18px; border-top: 2px solid var(--ink); }
.three b { display: block; font-family: var(--display); font-size: 21px; letter-spacing: -0.015em; margin-bottom: 6px; }
.three p { color: var(--ink-2); }
/* The trust strip under Install (5 Oct 2026): the shield, on navy, gold keyline. */
.signed { display: flex; gap: 16px; align-items: flex-start; margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--navy); color: #C9D1E0; box-shadow: inset 0 0 0 1px rgba(240,167,58,0.35); }
.signed img { width: 38px; height: 38px; flex: none; padding: 6px; border-radius: 11px; background: #fff; }
.signed b { display: block; color: #fff; font-size: 16px; }
.signed span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; }
.signed small { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; line-height: 1.5; color: #9FAABD; }
@media (max-width: 860px) { .three { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- privacy (navy band) ---------- */
.band { margin-top: 96px; background: var(--navy); color: #E9EDF5; padding: 88px 0; }
.band .eyebrow { color: var(--gold-1); }
.band .band h2 { color: #fff; }
.band .lede { color: #B8C0D0; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch; margin-top: 48px; }
.flow .arrow { align-self: center; color: var(--gold-1); font: 600 13px var(--body); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flow .arrow svg { width: 40px; height: 14px; }
.box { background: #1A2A4A; border-radius: 18px; padding: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.box .bl { font: 600 14px var(--body); color: #9FB0CF; margin-bottom: 10px; }
.box .txt { background: #fff; color: var(--ink); border-radius: 12px; padding: 12px 13px; font-size: 15px; line-height: 1.5; }
.box .foot { margin-top: 10px; font-size: 13.5px; color: #B8C0D0; }
.box dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 14px; }
.box dt { color: #9FB0CF; }
.box dd { margin: 0; color: #fff; font-weight: 600; }
.box dd.never { color: var(--gold-1); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; margin-top: 64px; }
.facts dt { font-family: var(--display); font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.015em; margin-bottom: 6px; }
.facts dd { margin: 0; color: #B8C0D0; font-size: 15.5px; }
@media (max-width: 960px) { .flow { grid-template-columns: 1fr; } .flow .arrow { flex-direction: row; } .flow .arrow svg { transform: rotate(90deg); } .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .band { padding: 72px 0; margin-top: 80px; } .facts { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- pricing ---------- */
.prices { display: grid; grid-template-columns: 7fr 5fr; gap: 22px; margin-top: 44px; }
.price { background: var(--paper); border-radius: 26px; padding: 34px; box-shadow: 0 1px 0 var(--line); display: flex; flex-direction: column; }
.price.main { background: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 30px 60px -40px rgba(20,16,12,0.4); }
.price .who { font: 600 15px var(--body); color: var(--soft); }
.price .amt { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.price .amt .px { font-family: var(--display); font-size: 72px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.price .amt small { font-size: 16px; color: var(--soft); }
.price .terms { margin-top: 10px; color: var(--ink-2); }
.price ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px; }
.price li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); }
.price li::before { content: ""; flex: none; width: 16px; height: 9px; border-left: 2.5px solid var(--gold-2); border-bottom: 2.5px solid var(--gold-2); transform: rotate(-45deg) translateY(-3px); }
.price .btn { margin-top: auto; align-self: flex-start; }
.price-note { margin-top: 16px; font-size: 14px; color: var(--soft); }
@media (max-width: 860px) { .prices { grid-template-columns: 1fr; } .price { padding: 26px; } .price .amt .px { font-size: 60px; } }

/* ---------- IT providers ---------- */
.clients .ch { padding: 14px 16px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.clients .ch b { font-size: 15.5px; }
.clients .ch span { font-size: 12.5px; color: var(--soft); }
.clients table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.clients th { text-align: left; font: 600 12px var(--body); color: var(--soft); padding: 6px 16px; border-top: 1px solid var(--line); }
.clients td { padding: 9px 16px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.clients td:first-child { font-weight: 600; }
.clients th:not(:first-child), .clients td:not(:first-child) { text-align: right; }
.clients tr.rise { animation: rowin 500ms cubic-bezier(.2, 1, .3, 1) both; }
.clients .fine { padding: 8px 16px 12px; font-size: 12px; color: var(--soft); border-top: 1px solid var(--line); }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; margin-top: 40px; }
.faq details { border-top: 1px solid rgba(18,20,23,0.14); padding: 18px 0; }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--soft); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 10px; color: var(--ink-2); max-width: 36em; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ---------- closing ---------- */
.closing { padding: 110px 24px 0; }
.closing .frame { height: 560px; min-height: 0; }
.closing .frame > .photo { object-position: 50% 45%; }
.closing .grade { background: linear-gradient(90deg, rgba(18,32,60,0.88) 0%, rgba(18,32,60,0.6) 42%, rgba(18,32,60,0) 72%); }
.closing .words { top: 50%; bottom: auto; transform: translateY(-50%); }
.closing h2 { font-size: clamp(30px, 3vw, 40px); color: #fff; }
.closing .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 900px) {
  .closing { padding: 80px 12px 0; }
  .closing .frame { height: auto; }
  .closing .words { transform: none; }
}

/* ---------- footer ---------- */
.ftr { padding: 64px 0 48px; }
.ftr-in { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center; }
.ftr-brand p { margin-top: 8px; color: var(--soft); font-size: 15px; }
.ftr-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; }
.ftr-nav a { text-decoration: none; color: var(--ink-2); }
.ftr-co { grid-column: 1 / -1; font-size: 13.5px; color: var(--soft); padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .ftr-in { grid-template-columns: 1fr; } }

/* ---------- legal pages ---------- */
.legal { padding: 56px 0 40px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: 44px; margin-bottom: 10px; }
.legal h2 { font-size: 24px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
.legal p + p { margin-top: 12px; }
.legal .meta { color: var(--soft); font-size: 14.5px; margin-bottom: 24px; }
.legal .draft, .legal .todo { background: var(--wait-bg); color: var(--wait); border-radius: 6px; padding: 1px 6px; }

/* Compare and pricing pages (6 Oct 2026): one reading column, a wide table. */
.guide { padding: 48px 0 40px; }
.guide .wrap { max-width: 860px; }
.guide h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.1; margin-bottom: 16px; text-wrap: balance; }
.guide h2 { font-size: 24px; margin: 40px 0 12px; text-wrap: balance; }
.guide p, .guide li { color: var(--ink-2); line-height: 1.65; }
.guide p + p { margin-top: 12px; }
.guide ul, .guide ol { padding-left: 22px; display: grid; gap: 6px; }
.guide .lede { font-size: 19px; color: var(--ink); max-width: 68ch; }
.guide .credo { margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--amber); background: var(--paper); border-radius: 0 10px 10px 0; font-size: 15px; color: var(--soft); }
.guide .crumbs { font-size: 14px; color: var(--soft); margin-bottom: 14px; }
.guide .crumbs a { color: var(--soft); }
.guide sup a { font-size: 11px; color: var(--gold-ink); text-decoration: none; padding: 0 1px; }
.tablewrap { position: relative; overflow-x: auto; margin-top: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); }
.vs { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.vs th, .vs td { text-align: left; vertical-align: top; padding: 12px 14px; border-top: 1px solid var(--line); line-height: 1.5; }
.vs thead th { border-top: 0; font-size: 14px; color: var(--soft); font-weight: 600; background: var(--ground); }
.vs tbody th { width: 22%; font-weight: 600; color: var(--ink); }
.vs td.us { background: #FFF8EC; color: var(--ink); }
.guide .diff li b { color: var(--ink); }
.guide .faq { display: grid; grid-template-columns: 1fr; gap: 8px; }
.guide .faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.guide .faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.guide .faq details p { margin-top: 8px; }
.guide .src { font-size: 14px; }
.guide .src a { color: var(--ink-2); overflow-wrap: anywhere; }
.guide .cards { list-style: none; padding: 0; display: grid; gap: 12px; margin: 24px 0; }
.guide .cards a { display: grid; gap: 4px; padding: 18px 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; }
.guide .cards a:hover { border-color: var(--amber); }
.guide .cards b { color: var(--ink); font-size: 18px; }
.guide .cards span { color: var(--soft); font-size: 15px; }
.guide .cta-box { margin-top: 48px; padding: 28px; border-radius: 18px; background: var(--navy); color: #fff; display: grid; gap: 10px; justify-items: start; }
.guide .cta-box h2 { color: #fff; margin: 0; }
.guide .cta-box p { color: #D5DAE4; }
.guide .cta-box .btn { background: var(--amber); color: var(--navy); }

/* The page at rest: with reduced motion, everything shows in its finished state. */
@media (prefers-reduced-motion: reduce) {
  .pop, .pin { transition: none; }
  .prog, .chip, .card.hit::after, .msg.scan::after { animation: none; }
}

/* Privacy: how and why, set as two plain rows under the diagram. */
.how { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14); }
.how + .how { margin-top: 28px; }
.how h3 { font-size: 28px; color: var(--gold-1); }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: h; }
.how li { counter-increment: h; color: #B8C0D0; font-size: 15.5px; }
.how li::before { content: counter(h); display: block; font: 700 14px var(--body); color: var(--gold-1); margin-bottom: 8px; }
.how li b { display: block; color: #fff; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.how .why { font-family: var(--display); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: #fff; letter-spacing: -0.015em; max-width: 30em; }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; gap: 12px; } .how ol { grid-template-columns: 1fr; gap: 20px; } }

/* Privacy band sits high on the page, straight after the AI tools. */
.band { margin-top: 56px; }
.flow .arrow { position: relative; }
.pkt { position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--gold-1); box-shadow: 0 0 0 6px rgba(255, 217, 138, 0.18); opacity: 0; }
.pkt.go { animation: pkt 900ms cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes pkt { 0% { opacity: 0; transform: translateX(-34px); } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(34px); } }
@media (max-width: 960px) { @keyframes pkt { 0% { opacity: 0; transform: translateY(-16px); } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } } .pkt { top: 50%; left: 30px; } }
.box { transition: box-shadow 400ms, opacity 400ms; }
.box.lit { box-shadow: inset 0 0 0 1.5px var(--gold-1); }
.box.dim { opacity: 0.45; }
.box [data-clean] { transition: opacity 400ms; }
.box dl > * { transition: opacity 300ms; }
.stays { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 217, 138, 0.16); color: var(--gold-1); font: 600 12px var(--body); }
.box dd.never.flash { animation: never 1200ms ease-out; }
@keyframes never { 0% { background: rgba(255, 217, 138, 0.5); } 100% { background: transparent; } }

/* The navy shield needs a light tile on navy notes, like an app icon. */
.verdict img, .toast img { width: 30px; height: 30px; padding: 3px; border-radius: 9px; background: #fff; }

/* The problem, and the four things Helio Guard fixes. */
.problem { padding: 72px 0 0; }
.problem h2 { font-size: clamp(28px, 2.6vw, 36px); max-width: 24em; }
.fixes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.fixes > div { display: flex; flex-direction: column; padding: 24px 22px 20px; border-radius: 20px; background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 24px 48px -38px rgba(20, 16, 12, 0.4); }
.fixes .fx-n { font: 700 14px var(--body); color: var(--gold-ink); margin-bottom: 12px; }
.fixes > div > b { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; }
.fixes > div > p:not(.fx-n):not(.fx-proof) { color: var(--ink-2); font-size: 15.5px; }
.fx-proof { margin-top: auto; padding-top: 16px; font-size: 13.5px; color: var(--soft); border-top: 1px solid var(--line); margin-block-start: 18px; }
.fx-proof b { color: var(--ink); font-weight: 700; }
@media (max-width: 1100px) { .fixes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fixes { grid-template-columns: 1fr; } .problem { padding-top: 56px; } }
.band h2 { font-size: clamp(28px, 2.6vw, 36px); }
.fixes > div { position: relative; transition: transform 400ms cubic-bezier(.2, 1.2, .3, 1); }
.fixes > div.lit { transform: translateY(-4px); }
.fixes > div.hit::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 2px var(--amber); animation: flash 1400ms ease-out forwards; pointer-events: none; }
.fx-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-t { margin-right: 4px; }
.fx-b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--t); transition: opacity 300ms, transform 450ms cubic-bezier(.2, 1.6, .4, 1); }
.fx-b .logo { width: 16px; height: 16px; }
.fx-b.off { opacity: 0; transform: scale(0.4); }
.fx-bar { display: block; height: 6px; border-radius: 6px; background: #EEF0F3; overflow: hidden; margin-bottom: 10px; }
.fx-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); border-radius: 6px; transition: width 800ms cubic-bezier(.2, .8, .2, 1); }
.fx-n2, .fx-n4 { font-variant-numeric: tabular-nums; }

/* How it works: one stage, five tabs. Each tab plays its scene while a
   line fills, then hands on to the next. Click any tab to stay on it. */
.tour h2 { margin-bottom: 28px; }
.tour-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tour-tabs button { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 0 0 12px; border: 0; background: none; cursor: pointer; color: var(--soft); font: inherit; }
.tour-tabs .tbar { display: block; height: 3px; border-radius: 3px; background: rgba(18, 20, 23, 0.1); overflow: hidden; margin-bottom: 12px; }
.tour-tabs .tbar i { display: block; height: 100%; width: 0; background: var(--gold-2); }
.tour-tabs button.on .tbar i { width: 100%; }
.tour-tabs button.playing .tbar i { width: 0; animation: tbar var(--d, 9s) linear forwards; }
@keyframes tbar { to { width: 100%; } }
.tour-tabs b { font-size: 17px; color: var(--ink); font-weight: 700; }
.tour-tabs span:last-child { font-size: 14px; line-height: 1.35; }
.tour-tabs button:not(.on) b { color: var(--soft); }
.tour-tabs button:hover b { color: var(--ink); }
.tour-stage { margin-top: 10px; }
.tour-stage > .scene > .ph { aspect-ratio: 16 / 9 !important; }
.tour-copy { margin-top: 30px; }
/* 5 Oct 2026: an author display rule beats the browser's own [hidden], so every
   tour panel showed at once, stacked (feedback: "quite gappy", "not aligning"). */
[hidden] { display: none !important; }
.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 56px; align-items: start; }
.panel h3 { font-size: 24px; }
.panel .lede { font-size: 17px; margin-top: 10px; }
.panel .steps, .panel .legend { margin-top: 0; }

@media (max-width: 960px) {
  .tour-tabs { display: flex; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .tour-tabs button { flex: 0 0 170px; }
  .panel { grid-template-columns: 1fr; }
}
.tabs span { white-space: nowrap; font-size: 12px; padding: 6px 9px; }

/* How it works, side by side (5 Oct 2026). feedback: the text under each photo
   needed a scroll after every tab. The photo keeps its 16:9 crop (the install
   pins are placed on it), the words sit beside it, and a tab fits one screen. */
@media (min-width: 1100px) {
  .tour-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-top: 10px; }
  .tour-stage { margin-top: 0; }
  .tour-stage .fl { zoom: 0.8; }
  .tour-stage .pin { zoom: 0.9; }
  .tour-copy { margin-top: 0; }
  .tour-copy .panel { display: block; }
  .tour-copy .panel h3 { font-size: 22px; }
  .tour-copy .panel-more { margin-top: 22px; }
  .tour-copy .steps { gap: 12px; }
  .tour-copy .legend .state { width: 128px; }
}

/* IT providers see "Partner rates", not a number (5 Oct 2026: a public
   half price would annoy everyone paying full price). */
.amt .word { font-family: var(--display); font-size: clamp(30px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.guide .tablewrap + p { margin-top: 14px; }

/* ---- What Helio Posts adds: the rotating examples, the report card, the calendar. */
.frame > .photo { object-position: 50% 34%; }
.frame .grade { background: linear-gradient(90deg, rgba(14,10,8,0.74) 0%, rgba(14,10,8,0.52) 34%, rgba(14,10,8,0.06) 62%), linear-gradient(0deg, rgba(14,10,8,0.28), rgba(14,10,8,0) 40%); }
.slot-a { height: auto; } .slot-b { height: auto; top: 280px; width: 380px; }
.slot-a .pop, .slot-b .pop { position: static; width: auto; }
.slot-a .card, .slot-b .card { padding-bottom: 16px; }
.card .li { width: 18px; height: 18px; display: block; }
.flow.levels { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.flow.levels .box .txt { min-height: 4.6em; }
.card dl.found { margin: 12px 16px 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.card dl.found dt { color: var(--soft); } .card dl.found dd { margin: 0; color: var(--ink); font-weight: 500; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.shots figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--paper); box-shadow: 0 20px 50px -30px rgba(18,32,60,.35); }
.shots img { width: 100%; display: block; }
.scene.plain { background: none; display: grid; place-items: center; min-height: 0; }
.card.report { width: min(520px, 100%); padding-bottom: 14px; }
.card.report .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 16px 6px; }
.card.report .nums b { display: block; font-family: var(--display); font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
.card.report .nums span { font-size: 12.5px; color: var(--soft); }
.card.report table.rows { width: calc(100% - 32px); margin: 8px 16px 0; border-collapse: collapse; font-size: 13.5px; }
.card.report table.rows th { text-align: left; font-weight: 600; font-size: 12px; color: var(--soft); padding: 8px 0; border-top: 1px solid var(--line); }
.card.report table.rows td { padding: 8px 0; border-top: 1px solid var(--line); } .card.report table.rows td + td, .card.report table.rows th + th { text-align: right; padding-left: 14px; font-variant-numeric: tabular-nums; }
.card.report .demo { margin: 10px 16px 0; font-size: 12px; color: var(--soft); }
@media (max-width: 900px) { .flow.levels, .shots { grid-template-columns: 1fr; } }
.scenes .scene { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.scenes .scene.on { opacity: 1; }
.scenes .slot { position: absolute; z-index: 3; }
.scenes .slot .card { padding-bottom: 16px; }
.dots { position: absolute; right: 40px; bottom: 30px; display: flex; gap: 7px; z-index: 4; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); display: block; }
.dots i.on { background: #fff; width: 22px; border-radius: 4px; }
.card .from { font-size: 16px; }
.card table.cal { margin: 12px 16px 0; border-collapse: separate; border-spacing: 0 8px; width: calc(100% - 32px); font-size: 13.5px; color: var(--ink-2); }
.card table.cal th { font-weight: 600; font-size: 12.5px; color: var(--soft); text-align: center; padding-bottom: 2px; }
.card table.cal td { text-align: center; } .card table.cal td:first-child { text-align: left; color: var(--ink); font-weight: 500; }
.c { display: inline-block; width: 30px; height: 30px; border-radius: 9px; vertical-align: middle; position: relative; }
.c.done { background: #E3F1E8; } .c.done::after { content: ""; position: absolute; left: 11px; top: 7px; width: 6px; height: 11px; border: solid #1F6B45; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.c.booked { background: #E8EDF8; } .c.booked::after { content: ""; position: absolute; left: 9px; top: 9px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid #4A5E8C; box-sizing: border-box; }
.c.writing { background: #FFF3DC; } .c.writing::after { content: ""; position: absolute; left: 8px; top: 13px; width: 14px; height: 4px; border-radius: 2px; background: var(--amber); }
.card .key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 16px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--soft); }
.card .key span { display: inline-flex; align-items: center; gap: 6px; } .card .key .c { width: 14px; height: 14px; border-radius: 4px; } .card .key .c::after { display: none; }
.card.kept { padding: 16px 18px; } .card.kept .k { font-size: 13px; color: var(--soft); }
.card.kept .n { font-family: var(--display); font-size: 52px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: 6px; } .card.kept .n span { font-size: 22px; font-weight: 600; letter-spacing: 0; color: var(--soft); }
.card.kept .last { font-size: 13px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
.slot-a { width: 380px; } .slot-b { top: 228px; width: 410px; }
.card .did { list-style: none; margin: 10px 16px 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.card .did li { padding-left: 26px; position: relative; }
.card .did li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #E3F1E8; }
.card .did li::after { content: ""; position: absolute; left: 6.5px; top: 6px; width: 4px; height: 7px; border: solid #1F6B45; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.card .post p { margin: 8px 0 0; }
.card .post .pts { padding-left: 14px; border-left: 3px solid var(--amber); color: var(--ink-2); line-height: 1.7; }
.card .from, .card .post, .card .ok { margin-left: 16px; margin-right: 16px; }
.card .from { font-size: 15px; line-height: 1.45; color: var(--ink); padding: 12px 14px; background: #F2F3F5; border-radius: 12px; margin-top: 10px; }
.card .from small { display: block; margin-top: 6px; color: var(--soft); font-size: 12.5px; }
.card .post { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.card .post b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.card .ok { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.card .ok svg { flex: none; }
.tools .row div img { width: 18px; height: 18px; }
.tools p b { color: var(--ink); font-weight: 600; }
.brand svg { flex: none; display: block; }
.ftr-brand p a { color: inherit; }

/* ---- The hero on a phone: photo, the words and the button, then the examples
   stacked underneath in the same navy panel, one scene showing at a time. */
@media (max-width: 900px) {
  .frame > .photo { height: 230px; object-position: 60% 30%; }
  .scenes { order: 4; position: relative; display: grid; background: var(--navy); padding: 0 12px 46px; }
  .scenes .scene { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; }
  .scenes .slot, .scenes .slot-a, .scenes .slot-b { position: static; display: block; width: auto !important; height: auto; margin: 0; order: 0; }
  .scenes .slot .card { width: auto; }
  .dots { left: 0; right: 0; bottom: 18px; justify-content: center; }
  .frame .words { padding-bottom: 22px; }
  .card .head .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
.shots { align-items: center; }

/* A short laptop screen (8 Oct 2026). The rule inherited from Guard hid the
   second card below 830px of height, which left each example half shown.
   Here the frame keeps enough height for both cards. */
@media (min-width: 901px) {
  .hero .frame { min-height: 690px; }
  .scenes .slot-b { display: block; }
}

/* ---- The hero examples play out (8 Oct 2026). Only under .anim, which the
   script adds, so with no script every card simply shows. Opacity and transform
   only: nothing changes size, so the page never jumps. */
.scenes.anim .rise { opacity: 0; transform: translateY(18px) scale(0.94); transition: opacity 450ms ease, transform 650ms cubic-bezier(.2, 1.2, .3, 1); }
.scenes.anim .rise.in { opacity: 1; transform: none; }
.scenes.anim .st { opacity: 0; transform: translateY(7px); transition: opacity 380ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1); }
.scenes.anim .st.in { opacity: 1; transform: none; }
.scenes.anim .ch { opacity: 0; }
.scenes.anim .ch.in { opacity: 1; }
.scenes.anim table.cal .c { opacity: 0; transform: scale(0.3); transition: opacity 250ms ease, transform 480ms cubic-bezier(.2, 1.6, .4, 1); }
.scenes.anim table.cal .c.in { opacity: 1; transform: none; }
.card .from { position: relative; overflow: hidden; }
.card .from.scan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -40%; background: linear-gradient(90deg, rgba(240,167,58,0) 0%, rgba(240,167,58,0.35) 70%, rgba(240,167,58,0.9) 100%); animation: scan 800ms cubic-bezier(.4, 0, .4, 1) forwards; }
.card.kept .n b { display: inline-block; font-weight: inherit; font-variant-numeric: tabular-nums; transform-origin: left center; }
.card.kept .n b.bump { animation: bump 600ms cubic-bezier(.2, 1.4, .4, 1); }
.scenes .scene { transition: opacity .45s ease; }

/* ---- The whole hero on one laptop screen (8 Oct 2026). The script marks the
   frame .fit and sets --k from its height; the cards scale by it from the top
   right. Without the script the frame stays tall enough for full-size cards. */
.slot-a { --top: 36px; } .slot-b { --top: 228px; }
@media (min-width: 901px) {
  .hero .frame.fit { min-height: 480px; }
  .frame.fit .scenes .slot { top: calc(var(--top) * var(--k, 1)); transform: scale(var(--k, 1)); transform-origin: top right; }
}
.tools .row svg { flex: none; }
@media (min-width: 601px) and (max-width: 1199px) { .tools .row { grid-template-columns: repeat(2, auto); gap: 10px 36px; } }
@media (max-width: 600px) { .tools .row { flex-direction: column; gap: 9px; } }