@import url("/fonts/fonts.css");

/* Sixth brand v1: white pages, teal for actions and safe, red only for
   confirmed fakes, never orange. DM Serif Display for headings, Public Sans
   for reading, IBM Plex Mono for evidence. */
:root {
  --white: #FFFFFF; --mist: #F3F6F5; --line: #DCE5E2; --line-strong: #B7C7C3;
  --deep: #0E2A2F; --body: #2B4A4F; --muted: #5A7377;
  --teal: #0F6E63; --teal-dark: #0A4F47; --teal-tint: #E3F1EE; --aqua: #4CC9B0;
  --red: #B42318; --red-tint: #FBEAE8;
  --slate: #2E5A88; --slate-tint: #E8F0F8;   /* "pilot": blue-grey, never orange (Sixt rule) */
  --head: "DM Serif Display", Georgia, "Times New Roman", serif;
  --text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap: 1120px;
  --radius: 14px;
  color-scheme: light;
}
/* Type and spacing scale (11 Oct 2026): use these, not new px values. */
:root { --fs-micro: 11.5px; --fs-xs: 12px; --fs-label: 13px; --fs-sm: 14px; --fs-card: 15px; --fs-body: 17px; --fs-md: 18px; --fs-card-h: 21px;
        --s1h: 12px; --s2h: 20px; --s3h: 28px; --s4h: 40px; --s5h: 56px; --s8: 112px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--body); font: var(--fs-body)/1.65 var(--text); }
img, svg { max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; color: var(--deep); line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 6.4vw, 68px); letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 4.2vw, 44px); }
h3 { font-size: clamp(22px, 2.6vw, 27px); }
h4 { font: 600 var(--fs-body)/1.4 var(--text); color: var(--deep); margin: 0 0 .4em; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; margin: 0 0 1em; }
li { margin: 0 0 .35em; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3); }
.narrow { max-width: 760px; }
.lede { font-size: clamp(19px, 2.2vw, 22px); color: var(--body); max-width: 680px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.eyebrow { font: 600 var(--fs-label)/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 var(--s2); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); padding: var(--s1) var(--s1h); z-index: 10; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); height: 68px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 34px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--deep); text-decoration: none; font-weight: 500; font-size: var(--fs-card); padding: var(--s1) var(--s1h); border-radius: 8px; }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { background: var(--mist); }
/* the menu's pale hover must not reach the button: it keeps white on dark teal */
.nav .btn:hover, .nav .btn[aria-current="page"] { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white) !important; }
.nav .btn { margin-left: var(--s1); }
.menu-btn { display: none; background: none; border: 1px solid var(--line-strong); border-radius: 8px; padding: var(--s1) var(--s1h); font: 600 var(--fs-card) var(--text); color: var(--deep); }
@media (max-width: 960px) {
  .menu-btn { display: inline-block; }
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--white); border-bottom: 1px solid var(--line); padding: var(--s1) var(--s2) var(--s2); }
  .nav.open { display: flex; }
  .nav .btn { margin: var(--s1) 0 0; text-align: center; }
}

/* Buttons */
.btn { display: inline-block; background: var(--teal); color: var(--white) !important; text-decoration: none; font: 600 16px/1 var(--text); padding: var(--s2) var(--s3); border-radius: 10px; border: 2px solid var(--teal); cursor: pointer; }
.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn.ghost { background: transparent; color: var(--teal) !important; }
.btn.ghost:hover { background: var(--teal-tint); }
.btn.small { padding: var(--s1h) var(--s2); font-size: var(--fs-card); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s1h); margin-top: var(--s3h); }

/* Sections */
section { padding: clamp(56px, 8vw, 96px) 0; }
section.tint { background: var(--mist); }
section.deep { background: var(--deep); color: #D6E4E1; }
section.deep h2, section.deep h3, section.deep h4 { color: var(--white); }
section.deep a { color: var(--aqua); }
.hero { padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 88px); }
.hero h1 { max-width: 15ch; }
.head-row { max-width: 760px; margin-bottom: var(--s4h); }

/* Grids and cards */
.grid { display: grid; gap: var(--s2h); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3h); min-width: 0; }
section.tint .card { border-color: var(--line); }
.card h3 { margin-bottom: .35em; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .more { font-weight: 600; text-decoration: none; }
.card.link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card.link:hover { border-color: var(--teal); transform: translateY(-2px); }
.card .who { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s1h); }
.step-n { font: 500 var(--fs-label) var(--mono); color: var(--teal); letter-spacing: .06em; margin-bottom: var(--s1h); display: block; }

/* Status badges: what runs today vs pilot */
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-xs)/1 var(--text); letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.live { color: var(--teal-dark); background: var(--teal-tint); }
.badge.pilot { color: var(--slate); background: var(--slate-tint); }
.status-bar { display: flex; flex-wrap: wrap; gap: var(--s1h) var(--s3); align-items: center; padding: var(--s2) var(--s2h); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: var(--fs-card); margin-top: var(--s4h); }

/* Feature list */
.features { display: grid; gap: var(--s2); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s2); align-items: start; padding: var(--s2h) 0; border-top: 1px solid var(--line); }
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature h4 { margin: 0; }
.feature p { grid-column: 1 / -1; margin: 0; }

/* Hexagon bullet */
.hex-list { list-style: none; padding: 0; }
.hex-list li { position: relative; padding-left: var(--s3h); }
.hex-list li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 13.86px; background: var(--teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
section.deep .hex-list li::before { background: var(--aqua); }

/* Evidence / mock reply */
.evidence { font-family: var(--mono); font-size: var(--fs-label); line-height: 1.6; background: var(--deep); color: #CFE3DF; border-radius: var(--radius); padding: var(--s2h) var(--s3); overflow-x: auto; }
.evidence .bad { color: #FF9B91; }
.evidence .ok { color: var(--aqua); }
.reply { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); font-size: var(--fs-card); box-shadow: 0 10px 30px rgba(14,42,47,.06); }
.reply .verdict { border-left: 4px solid var(--red); background: var(--red-tint); color: var(--red); font-weight: 600; padding: var(--s1h) var(--s2); border-radius: 6px; margin-bottom: var(--s2); font-size: var(--fs-body); }
.reply .from { font-size: var(--fs-label); color: var(--muted); margin-bottom: var(--s1h); }

/* Stats */
.stat { border-top: 2px solid var(--teal); padding-top: var(--s2); }
.stat b { display: block; font: 400 clamp(34px, 4.2vw, 46px)/1 var(--head); color: var(--deep); margin-bottom: var(--s1); }
section.deep .stat b { color: var(--white); }
section.deep .stat { border-color: var(--aqua); }

/* Pricing */
.tiers { display: grid; gap: var(--s2h); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.tier { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3h); background: var(--white); display: flex; flex-direction: column; min-width: 0; }
.tier.pick { border: 2px solid var(--teal); }
.tier h3 { margin-bottom: 4px; }
.price { font: 400 40px/1.1 var(--head); color: var(--deep); margin: var(--s1h) 0 2px; }
.price small { font: 500 var(--fs-card) var(--text); color: var(--muted); }
.tier ul { margin: var(--s2) 0 0; }
.tier .note { font-size: var(--fs-sm); color: var(--muted); margin-top: auto; padding-top: var(--s2); }
table.prices { width: 100%; border-collapse: collapse; font-size: var(--fs-card); }
table.prices th, table.prices td { text-align: left; padding: var(--s1h) var(--s1h); border-bottom: 1px solid var(--line); vertical-align: top; }
table.prices th { font-weight: 600; color: var(--deep); font-size: var(--fs-sm); }
table.prices td.num { white-space: nowrap; font-weight: 600; color: var(--deep); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.table-wrap table { min-width: 560px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; padding: 3px; gap: 3px; background: var(--white); }
.seg button { border: 0; background: none; font: 600 var(--fs-sm) var(--text); color: var(--body); padding: var(--s1) var(--s1h); border-radius: 7px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--teal); color: var(--white); }

/* Forms */
form.enquiry { display: grid; gap: var(--s2h); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; color: var(--deep); font-size: var(--fs-card); }
.field .hint { font-size: var(--fs-label); color: var(--muted); }
input[type=text], input[type=email], select, textarea { font: 16px/1.4 var(--text); color: var(--deep); padding: var(--s1h) var(--s2); border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); width: 100%; }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.check { display: flex; gap: var(--s1h); align-items: flex-start; font-size: var(--fs-card); }
.check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { padding: var(--s2) var(--s2); border-radius: 10px; font-size: var(--fs-card); display: none; }
.form-msg.err { display: block; background: var(--red-tint); color: var(--red); }

/* Legal pages */
.legal h2 { font-size: 28px; margin-top: 1.6em; }
.legal h3 { font: 600 var(--fs-md)/1.4 var(--text); color: var(--deep); margin-top: 1.4em; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-card); margin-bottom: 1em; }
.legal th, .legal td { text-align: left; padding: var(--s1h); border-bottom: 1px solid var(--line); vertical-align: top; }
.draft-note { background: var(--slate-tint); color: var(--slate); padding: var(--s1h) var(--s2); border-radius: 10px; font-size: var(--fs-card); }

/* Footer */
.site-foot { background: var(--deep); color: #B9CCC8; padding: var(--s5h) 0 var(--s4h); font-size: var(--fs-card); }
.site-foot a { color: #E2EEEB; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-grid h4 { color: var(--white); font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; }
.foot-grid ul { list-style: none; padding: 0; }
.foot-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--s4h); padding-top: var(--s2h); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1h); font-size: var(--fs-label); }
.foot-brand img { height: 30px; width: auto; }

/* Hero with an example finding beside the text */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5h); align-items: start; }
/* Every hero card starts level with the top of the eyebrow, on every page. */
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4h); } }
.finding { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(14,42,47,.08); overflow: hidden; font-size: var(--fs-sm); }
.finding .top { display: flex; justify-content: space-between; align-items: center; gap: var(--s1h); padding: var(--s2) var(--s2h); border-bottom: 1px solid var(--line); }
.finding .tag-red { color: var(--red); background: var(--red-tint); font: 600 var(--fs-xs)/1 var(--text); letter-spacing: .05em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; }
.finding dl { margin: 0; padding: 6px var(--s2h) 4px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s2); }
.finding dt { color: var(--muted); padding: 9px 0; border-bottom: 1px solid var(--mist); }
.finding dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--mist); color: var(--deep); font-family: var(--mono); font-size: var(--fs-label); overflow-wrap: anywhere; }
.finding .shot { margin: var(--s2) var(--s2h); border: 1px solid var(--line); border-radius: 10px; padding: var(--s2); background: var(--mist); }
.finding .shot .bar { height: 8px; border-radius: 4px; background: var(--line-strong); margin-bottom: var(--s1); }
.finding .shot .field { height: 28px; border-radius: 6px; background: var(--white); border: 1px solid var(--line); margin-top: var(--s1); }
.finding .foot { padding: var(--s1h) var(--s2h); background: var(--teal-tint); color: var(--teal-dark); font-weight: 600; font-size: var(--fs-sm); }

/* Price tables become stacked cards on phones */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; border: 0; background: none; }
  .table-wrap table { min-width: 0; }
  table.prices thead { display: none; }
  table.prices, table.prices tbody, table.prices tr, table.prices td { display: block; width: 100%; }
  table.prices tr { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px var(--s2); margin-bottom: var(--s1h); }
  table.prices td { border: 0; padding: 6px 0; }
  table.prices td[data-label]::before { content: attr(data-label); display: block; font: 600 var(--fs-xs) var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  table.prices td:first-child::before { display: none; }
  table.prices td:first-child { font-size: var(--fs-md); padding-top: var(--s1h); }
}
/* Legal tables (privacy providers) stack the same way; only the last column keeps its label. */
@media (max-width: 640px) {
  .legal table.stack thead { display: none; }
  .legal table.stack, .legal table.stack tbody, .legal table.stack tr, .legal table.stack td { display: block; width: 100%; }
  .legal table.stack tr { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px var(--s2); margin-bottom: var(--s1h); }
  .legal table.stack td { border: 0; padding: 6px 0; }
  .legal table.stack td:last-child[data-label]::before { content: attr(data-label); display: block; font: 600 var(--fs-xs) var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .legal table.stack td:first-child { font-size: var(--fs-md); font-weight: 600; color: var(--deep); padding-top: var(--s1h); }
}

/* ---------- Motion and atmosphere (10 Oct 2026) ----------
   Subtle by design: slow drifts, short reveals. Everything stops for
   people who ask their device to reduce motion. */
:root {
  --hex-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16.2 L56 48.5 L28 64.7 L0 48.5 L0 16.2 Z M28 64.7 L28 97' fill='none' stroke='%230F6E63' stroke-opacity='.085' stroke-width='1'/%3E%3C/svg%3E");
  --hex-line-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16.2 L56 48.5 L28 64.7 L0 48.5 L0 16.2 Z M28 64.7 L28 97' fill='none' stroke='%234CC9B0' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");
}
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -10% -5% 0; z-index: -2;
  background:
    radial-gradient(38% 46% at 82% 30%, rgba(76,201,176,.20), transparent 70%),
    radial-gradient(34% 40% at 12% 85%, rgba(15,110,99,.12), transparent 70%),
    radial-gradient(30% 36% at 55% 0%, rgba(160,214,204,.25), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3%,2%,0) scale(1.05); } 100% { transform: translate3d(2%,-1%,0) scale(1.02); } }
@keyframes hexdrift { from { background-position: 0 0; } to { background-position: 56px 97px; } }

section.tint { background: linear-gradient(180deg, #F3F6F5 0%, #EEF5F3 55%, #F3F6F5 100%); }
section.deep { position: relative; overflow: hidden; isolation: isolate; }
section.deep::after { content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -200px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,201,176,.22), transparent 65%); animation: glow 14s ease-in-out infinite alternate; }
@keyframes glow { from { transform: translate3d(0,0,0) scale(1); opacity: .8; } to { transform: translate3d(-80px,60px,0) scale(1.15); opacity: 1; } }

/* Live dot on "Running now" */
.badge.live::before { animation: pulse 2.4s ease-out infinite; box-shadow: 0 0 0 0 rgba(15,110,99,.45); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(15,110,99,.45); } 70% { box-shadow: 0 0 0 7px rgba(15,110,99,0); } 100% { box-shadow: 0 0 0 0 rgba(15,110,99,0); } }

/* Example finding: a scan line over the page and a ticking timeline */
.finding { position: relative; animation: float 7s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.finding .shot { position: relative; overflow: hidden; }
.finding .shot::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(76,201,176,.28), transparent); animation: scan 3.6s ease-in-out infinite; }
@keyframes scan { 0% { top: -40%; } 60%,100% { top: 110%; } }
.finding .live { display: inline-flex; align-items: center; gap: 6px; }
.finding .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse-red 1.8s ease-out infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(180,35,24,.45); } 70% { box-shadow: 0 0 0 7px rgba(180,35,24,0); } 100% { box-shadow: 0 0 0 0 rgba(180,35,24,0); } }
.finding .foot { display: grid; }
.finding .foot span { grid-area: 1 / 1; opacity: 0; transition: opacity .6s; }
.finding .foot span.on { opacity: 1; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.card.link, .tier { transition: border-color .2s, transform .2s, box-shadow .2s; }
.card.link:hover, .tier:hover { box-shadow: 0 14px 34px rgba(14,42,47,.08); }
.tier:hover { transform: translateY(-2px); }

/* Underline that grows under nav links */
.nav a:not(.btn) { position: relative; }
.btn { transition: background .2s, border-color .2s, transform .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,110,99,.22); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Honeycomb system ----------
   One lattice everywhere: the brand's point-up hexagon. Cells light up and
   fade in the brand colours. Added by script into heroes, tinted bands,
   dark sections and the footer. */
section.tint, .site-foot { position: relative; overflow: hidden; isolation: isolate; }
.hexfield { position: absolute; inset: -97px -56px; z-index: -1; pointer-events: none;
  background-image: var(--hex-line); background-size: 56px 97px;
  animation: hexfloat 48s ease-in-out infinite alternate; }
.hexfield.on-dark { background-image: var(--hex-line-light); }
.hexfield.hero-f { opacity: .9; -webkit-mask-image: radial-gradient(65% 85% at 78% 38%, #000 0%, rgba(0,0,0,.45) 45%, transparent 78%); mask-image: radial-gradient(65% 85% at 78% 38%, #000 0%, rgba(0,0,0,.45) 45%, transparent 78%); }
.hexfield.band-f { -webkit-mask-image: radial-gradient(45% 70% at 100% 0%, #000, transparent 80%), radial-gradient(40% 60% at 0% 100%, #000, transparent 80%); mask-image: radial-gradient(45% 70% at 100% 0%, #000, transparent 80%), radial-gradient(40% 60% at 0% 100%, #000, transparent 80%); }
.hexfield.deep-f { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 55%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 55%, #000 100%); }
.hexfield.foot-f { -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }
.hexfield > i { position: absolute; width: 56px; height: 64.7px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0;
  animation: twinkle var(--d, 8s) ease-in-out var(--w, 0s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; } 45%, 55% { opacity: var(--o, .5); } }
@keyframes hexfloat { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-28px, 18px, 0); } }

/* Hexagon step markers */
.step-n { display: inline-flex; align-items: center; gap: var(--s1); }
.step-n::before { content: ""; width: 12px; height: 13.86px; background: var(--teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: spin-hex 9s linear infinite; }
@keyframes spin-hex { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(60deg); } }

/* A hexagon fills in at the corner of a card on hover */
.card.link, .tier { position: relative; overflow: hidden; }
.card.link::after, .tier::after { content: ""; position: absolute; right: -14px; top: -16px; width: 56px; height: 64.7px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--teal-tint);
  transform: scale(.6) rotate(-30deg); opacity: .0; transition: transform .45s ease, opacity .45s ease, background .45s; }
.card.link:hover::after, .tier:hover::after { transform: scale(1) rotate(0); opacity: 1; background: rgba(76,201,176,.28); }
.tier.pick::after { opacity: 1; transform: scale(.85) rotate(0); background: rgba(76,201,176,.22); }

/* Stats sit on a small hexagon */
.stat { position: relative; }
.stat::before { content: ""; position: absolute; right: 0; top: 14px; width: 22px; height: 25.4px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: currentColor; opacity: .08; }
section.deep .stat::before { background: var(--aqua); opacity: .25; }

/* Footer lattice reads on dark */
.site-foot .wrap { position: relative; }
@media (prefers-reduced-motion: reduce) { .hexfield > i { opacity: calc(var(--o, .5) * .5); } }

/* Live counters band */
.live-band { padding: clamp(40px, 6vw, 64px) 0; }
.live-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s3); margin-bottom: var(--s3h); }
.h-small { font-size: clamp(24px, 3vw, 30px); margin: 0; display: inline-flex; align-items: center; gap: var(--s1h); }
.live-head p { margin: 0; color: #9FB8B3; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 0 rgba(76,201,176,.6); animation: pulse-aqua 2s ease-out infinite; }
@keyframes pulse-aqua { 0% { box-shadow: 0 0 0 0 rgba(76,201,176,.6); } 70% { box-shadow: 0 0 0 10px rgba(76,201,176,0); } 100% { box-shadow: 0 0 0 0 rgba(76,201,176,0); } }
.counter { border-top: 2px solid var(--aqua); padding-top: var(--s2); position: relative; }
.counter::before { content: ""; position: absolute; right: 0; top: 14px; width: 22px; height: 25.4px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--aqua); opacity: .22; }
.counter b { display: block; font: 400 clamp(28px, 3.4vw, 40px)/1.1 var(--head); color: var(--white); font-variant-numeric: tabular-nums; margin-bottom: 6px; min-height: 1.1em; }
.counter span { color: #C4D8D4; font-size: var(--fs-card); }
.live-note { margin: var(--s3) 0 0; color: #9FB8B3; min-height: 1.4em; }

.counters { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .counters .counter:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .counter b { font-size: 26px; } }
.pilot-note { font-style: normal; color: #9FB8B3; }
/* The hero's cells light up as visibly as the dark band's. */
.hexfield.hero-f { -webkit-mask-image: radial-gradient(75% 95% at 80% 35%, #000 0%, rgba(0,0,0,.7) 50%, transparent 85%); mask-image: radial-gradient(75% 95% at 80% 35%, #000 0%, rgba(0,0,0,.7) 50%, transparent 85%); }

/* Three products flow into one engine */
.flow { height: 96px; margin: 4px 0 -2px; }
.flow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.flow path { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 5 7; opacity: .45; vector-effect: non-scaling-stroke; animation: dash 1.6s linear infinite; }
.flow circle { fill: var(--aqua); }
@keyframes dash { to { stroke-dashoffset: -24; } }
.engine { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center; background: var(--deep); color: #D6E4E1; border-radius: var(--radius); padding: var(--s3h) var(--s4); position: relative; overflow: hidden; }
.engine h3 { color: var(--white); margin-bottom: .3em; }
.engine p { margin: 0; max-width: 820px; }
.engine::after { content: ""; position: absolute; inset: 0; background-image: var(--hex-line-light); background-size: 56px 97px; opacity: .6; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); pointer-events: none; }
/* The S mark (brand: S + hexagon where the word will not fit). Only its
   hexagon full stop turns, a sixth of a turn at a time. */
.engine-mark { width: 64px; height: 64px; display: block; overflow: visible; }
.engine-mark .s { fill: var(--white); }
.engine-mark .dot, .avatar-mark .dot { fill: var(--aqua); transform-box: fill-box; transform-origin: center; animation: turn-hex 6s ease-in-out infinite; }
@keyframes turn-hex { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(60deg); } }
.from-row { display: flex; gap: var(--s1h); align-items: center; margin-bottom: var(--s2); }
.avatar { width: 40px; height: 40px; border-radius: 10px; background: var(--deep); flex: none; display: grid; place-items: center; }
.avatar-mark { width: 40px; height: 40px; }
.avatar-mark .s { fill: var(--white); }
.reply .from { margin: 0; }
@media (max-width: 640px) { .flow { height: 56px; } .engine { grid-template-columns: minmax(0, 1fr); padding: var(--s3); } }
@media (prefers-reduced-motion: reduce) { .flow circle { display: none; } }

/* ---------- One spacing system (10 Oct 2026) ----------
   Every page uses these and nothing else: no spacing written into pages.
   Scale: 8 · 16 · 24 · 32 · 48 · 64 · 96. */
:root { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
        --section: clamp(64px, 8vw, 96px); --pad: 28px; --gap: var(--s3); --split: clamp(32px, 5vw, 64px); }
section { padding: var(--section) 0; }
.hero { padding: clamp(64px, 9vw, 112px) 0 var(--section); }
.hero.compact { padding-bottom: var(--s4); }
section.flush-top { padding-top: 0; }
.head-row { margin-bottom: var(--s5); }
.head-row > *:last-child { margin-bottom: 0; }
h2 { margin-bottom: var(--s2); }
.grid { gap: var(--gap); }
.split { gap: var(--split); }
.split.center { align-items: center; }
.card, .tier, .reply { padding: var(--pad); }
.engine { padding: var(--pad) var(--s4); }
.evidence { padding: var(--s3); }
.features .feature { padding: var(--s3) 0; }
.intro { max-width: 680px; }
.after { margin-top: var(--s2); }
.actions { margin-top: var(--s4); }
section.deep .eyebrow { color: var(--aqua); }
.fineprint { margin-top: var(--s4); color: #9FB8B3; font-size: var(--fs-sm); }
.evidence .caption { color: #8FB0AA; }
.finding .shot .bar.w40 { width: 40%; } .finding .shot .bar.w70 { width: 70%; }
figure.finding { margin: 0; }
.step-badge { margin-bottom: var(--s1h); }
.reply p { margin-bottom: var(--s1); }
.reply ul { margin-bottom: var(--s2); }
.reply > p:last-child { margin-bottom: 0; }
.cta { text-align: center; }
.cta .lede { margin: 0 auto; }
.cta .actions { justify-content: center; }
.foot-blurb { margin-top: var(--s2); max-width: 34ch; }
/* Status lists on About */
.status-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.status-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: var(--s2) 0; border-top: 1px solid var(--line); margin: 0; }
.status-list li:last-child { border-bottom: 1px solid var(--line); }
.status-list b { color: var(--deep); font-weight: 600; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1h) var(--s3); margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--deep); font-weight: 500; }
/* One left edge everywhere: narrow sections keep the page's left margin
   and only limit the width of their text. */
.wrap.narrow { max-width: var(--wrap); }
.wrap.narrow > * { max-width: 760px; }
.wrap.narrow.cta > * { margin-left: auto; margin-right: auto; }
.form-msg.err:empty { display: none; }
/* Status pills sit at the foot of a card, so headings line up across a row. */
.card { display: flex; flex-direction: column; }
.card > .card-foot { margin-top: auto; padding-top: var(--s2); margin-bottom: 0; }

/* Feature stages: each stage's promise on the left, its feature cards in
   two columns on the right. Benefit-first headings, feature name as a
   small label, status pill at the foot. */
.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--split); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.stage:first-of-type { border-top: 0; padding-top: 0; }
.stage-head { position: sticky; top: 96px; align-self: start; }
.stage-head h3 { margin: var(--s1) 0 var(--s1); }
.stage-head p { color: var(--muted); margin: 0; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.fcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; }
.fcard:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(14,42,47,.08); }
.ficon { width: 44px; height: 50.8px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--teal-tint); color: var(--teal); display: grid; place-items: center; margin-bottom: var(--s2); }
.ficon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fcard:hover .ficon { background: var(--teal); color: var(--white); }
.fname { font: 500 var(--fs-xs)/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--teal); margin: 0 0 6px; }
.fcard h4 { font: 400 var(--fs-card-h)/1.2 var(--head); color: var(--deep); margin: 0 0 var(--s1); }
.fcard > p:not(.fname):not(.card-foot) { font-size: var(--fs-card); margin: 0; }
.fcard > .card-foot { margin-top: auto; padding-top: var(--s2); margin-bottom: 0; }
@media (max-width: 960px) { .stage { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .stage-head { position: static; } }
@media (max-width: 640px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }
.head-row + .stage { border-top: 0; padding-top: 0; }

/* ---------- Detail polish (design review, 10 Oct 2026) ---------- */
/* 1. Compact heroes fade into the page instead of ending in a hard edge. */
.hero.compact { padding-bottom: var(--s5); }
.hero.compact::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, var(--white)); z-index: -1; pointer-events: none; }
/* 2. No stranded words in headings or the ends of paragraphs. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.eyebrow { text-wrap: balance; }
/* 3 + 4. Price units and "from" sit under the number. */
.price small { display: block; margin-top: 6px; font-size: var(--fs-sm); }
.price .from { display: block; font: 500 var(--fs-sm) var(--text); color: var(--muted); margin-bottom: 2px; }
/* 6 + 18. Breathing room after tier grids. */
.tiers + .table-wrap { margin-top: var(--s3); }
.after { margin-top: var(--s3); }
/* 7. A lone last card spans the row. */
.fgrid > .fcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fgrid > .fcard:last-child:nth-child(odd) > p { max-width: 60ch; }
/* 8. Only links move on hover. */
.tier:hover, .fcard:hover { transform: none; box-shadow: none; }
.fcard:hover { border-color: var(--line); }
/* 9. Home product cards: headings and prices line up across the row. */
.g3 > .card.link { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; }
.g3 > .card.link .more { align-self: end; padding-top: var(--s2); }
/* 10. Status bar sentences start at the same x. */
.status-bar { flex-direction: column; align-items: stretch; }
.status-bar > span { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: center; gap: var(--s1h); }
.status-bar .badge { justify-self: start; }
/* 11. Counter and stat labels read as text, not captions. */
.counter span { display: block; line-height: 1.45; }
.stat { font-size: var(--fs-card); line-height: 1.5; }
/* 12. The picked tier's hexagon sits inside the card; border without the 1px shift. */
.tier.pick { border: 1px solid var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.tier.pick::after { right: 22px; top: 24px; width: 22px; height: 25.4px; transform: none; background: rgba(76,201,176,.35); }
/* 13–15. Price tables: steady columns, inset text, right-aligned numbers. */
table.prices { table-layout: fixed; }
table.prices th { white-space: nowrap; }
table.prices td:first-child { width: 24%; }
table.prices :is(th, td):first-child { padding-left: var(--s2h); }
table.prices :is(th, td):last-child { padding-right: var(--s2h); }
table.prices :is(td, th).num { font-variant-numeric: tabular-nums; }
.num-grid table.prices :is(td, th).num { text-align: right; }
table.prices td:nth-child(2) { width: 22%; }
/* 16. Heroes end at the same depth. */
.hero .head-row, .hero .wrap > :last-child, .hero .head-row > :last-child { margin-bottom: 0; }
/* 17. The About facts card keeps its own height. */
.split > .card { align-self: start; }
/* 19. The wordmark's internal padding no longer pushes it off the edge. */
.brand img, .foot-brand img { margin-left: -5px; }
/* 20. Stage labels line up with the first card's icon row. */
.stage-head { padding-top: var(--pad); }
/* 21. One style for arrow links. */
a.more { font-weight: 600; text-decoration: none; }
a.more:hover { text-decoration: underline; }
/* 22. Engine text at a readable line length. */
.engine p { max-width: 68ch; }
/* 24. Checkbox aligns with the fields. */
.check input { margin: 4px 0 0; }
/* 25. Hexagon bullets on legal pages too; tighter eyebrows on phones. */
.legal ul { list-style: none; padding-left: 0; }
.legal ul li { position: relative; padding-left: var(--s3h); }
.legal ul li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 13.86px; background: var(--teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
@media (max-width: 640px) {
  .eyebrow { letter-spacing: .08em; }
  table.prices td:first-child { width: 100%; font-weight: 600; color: var(--deep); }
  table.prices :is(td, th).num { text-align: left; }
  .status-bar > span { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Engine panel: the S mark as the heading's badge, four points across the
   width (text stays left-aligned for reading). */
.engine { display: block; padding: var(--s4); }
.engine-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.engine-head h3 { margin: 0; }
.engine-head .engine-mark { width: 44px; height: 44px; flex: none; }
.engine-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.engine-points > div { border-top: 1px solid rgba(76,201,176,.35); padding-top: var(--s2); }
.engine-points .step-n { color: var(--aqua); }
.engine-points .step-n::before { background: var(--aqua); }
.engine-points p { margin: 0; color: #D6E4E1; font-size: var(--fs-card); max-width: none; }
@media (max-width: 960px) { .engine-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .engine-points { grid-template-columns: minmax(0, 1fr); } }
/* Engine panel: planned AI under each point, marked Pilot */
.engine-points .next { margin-top: var(--s1h); font-size: var(--fs-sm); color: #9FB8B3; }
.engine-points .next .badge { margin-right: 6px; }
.engine-points .next { text-wrap: wrap; }
.engine-head .engine-link { margin-left: auto; color: var(--aqua); white-space: nowrap; }
@media (max-width: 520px) { .engine-head { flex-wrap: wrap; } .engine-head h3 { flex: 1; min-width: 0; } .engine-head .engine-link { margin-left: 0; flex-basis: 100%; } }

/* ---------- System type (10 Oct 2026) ----------
   One mono style for machine data: domains, addresses, timestamps and the
   verdict labels in example cards, and the evidence blocks. Body copy and
   headings keep their own fonts. */
.sys, .finding dd, .evidence { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sys { font-size: .9em; }
.finding dd .sys, .evidence .sys { font-size: 1em; }
.finding .tag-red.sys, .reply .verdict { font-family: var(--mono); letter-spacing: .02em; }
.reply .verdict { font-size: var(--fs-card); }
/* The scale lives at the end of this file ("System type: one scale"). */

/* Example label sits in the reply card's top padding, clear of the sender. */
.reply { position: relative; }
.reply > .ex { position: absolute; top: 6px; right: var(--s2); font-size: var(--fs-xs); margin: 0; }

/* Brand hero: example lookalike feed */
.feed { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(14,42,47,.08); overflow: hidden; font-size: var(--fs-sm); position: relative; animation: float 7s ease-in-out infinite; }
.feed .top { display: flex; justify-content: space-between; align-items: center; gap: var(--s1h); padding: var(--s2) var(--s2h); border-bottom: 1px solid var(--line); }
.feed-title { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; color: var(--deep); }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: pulse 2.4s ease-out infinite; }
.feed-cols { display: flex; justify-content: space-between; gap: var(--s1h); padding: var(--s1h) var(--s2h) 6px; color: var(--muted); }
.feed-rows { list-style: none; margin: 0; padding: 0 var(--s2h); position: relative; overflow: hidden; }
.feed-rows li { margin: 0; padding: var(--s1h) 0; border-bottom: 1px solid var(--mist); animation: row-in .6s ease both; }
.feed-rows li:nth-child(1) { animation-delay: .9s; }
.feed-rows li:nth-child(2) { animation-delay: .6s; }
.feed-rows li:nth-child(3) { animation-delay: .4s; }
.feed-rows li:nth-child(4) { animation-delay: .2s; }
@keyframes row-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.feed-main { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1h); }
.feed-main .dom { overflow-wrap: anywhere; min-width: 0; }
.feed-main time { color: var(--muted); flex: none; }
.feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s1h); margin-top: 4px; color: var(--muted); }
.chip { display: inline-block; font-size: var(--fs-micro); line-height: 1; padding: 5px var(--s1); border-radius: 999px; background: var(--mist); color: var(--body); border: 1px solid var(--line); }
.chip.bad { background: var(--red-tint); color: var(--red); border-color: transparent; }
.feed-rows li.hot { position: relative; }
.feed-rows li.hot::before { content: ""; position: absolute; left: -18px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.feed-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s1h); margin-top: var(--s1); color: var(--slate); }
.feed-next .badge { font-size: var(--fs-micro); padding: 4px 7px; }
.feed-rows::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(76,201,176,.16), transparent); animation: scan 4.8s ease-in-out 1.6s infinite; }
.feed-wait { margin: 0; padding: var(--s1h) var(--s2h) var(--s1h); color: var(--muted); }
.feed-wait::before { content: "> "; color: var(--teal); }
.caret { display: inline-block; width: 7px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--teal); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.feed-foot { display: grid; gap: var(--s1); padding: var(--s1h) var(--s2h); background: var(--teal-tint); color: var(--teal-dark); font-weight: 600; font-size: var(--fs-sm); }
.feed-foot > span { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: center; gap: var(--s1h); }
.feed-foot .badge { justify-self: start; }
@media (max-width: 400px) { .feed-foot > span { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.reply .sys { white-space: nowrap; }
/* Foldable common questions */
.faq { border-top: 1px solid var(--line); margin: var(--s2) 0 var(--s3); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2h) 0; font-weight: 600; color: var(--deep); font-size: var(--fs-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--text); color: var(--teal); flex: none; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
.faq details p { margin: 0 0 var(--s2h); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- System type: one scale (10 Oct 2026) ----------
   Every example card (home finding, the feed cards on Brand, Business and
   How it works, the evidence block, the Scam Check reply) sets machine data
   in IBM Plex Mono by role, never by card. Plex Mono ships 400 and 500
   only, so nothing asks it for 600 (that renders as a faked bold).
     value  13.5px / 500  what a row is about: domain, amount
            13.5px / 400  other values: finding details, evidence lines
     meta   12.5px / 400  times, sources, accounts, AI and status lines
     label  11.5px / 500  verdict tags, column heads, chips
   In running text .sys stays at .9em of the sentence around it. */
:root { --sys-value: 13.5px; --sys-meta: 12.5px; --sys-label: 11.5px; }
.finding dd, .evidence, .dom, .amt { font-size: var(--sys-value); }
.dom, .amt { font-family: var(--mono); font-weight: 500; color: var(--deep); font-variant-numeric: tabular-nums; }
.amt { flex: none; }
.feed-main time, .feed-meta .sys, .feed-next .sys, .feed-wait, .finding .foot time { font-size: var(--sys-meta); font-weight: 400; }
.finding .foot time { font-weight: 500; }
.finding .tag-red.sys, .feed-cols, .chip.sys { font-family: var(--mono); font-size: var(--sys-label); font-weight: 500; }
.finding .tag-red.sys, .feed-cols { text-transform: uppercase; letter-spacing: .06em; }
.chip.sys { letter-spacing: 0; }
.evidence .bad, .reply .verdict { font-weight: 500; }
/* A domain inside a column-head row keeps its own case and size. */
.feed-cols .dom { text-transform: none; letter-spacing: 0; font-size: var(--sys-value); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.feed-cols:has(.dom) { flex-wrap: wrap; align-items: baseline; gap: 2px var(--s1h); padding-bottom: var(--s1h); border-bottom: 1px solid var(--mist); }
.feed-cols .dom { flex: none; overflow-wrap: normal; }
/* Field names in the home finding are labels, like the feed's column heads. */
.finding dt { font: 500 var(--sys-label)/22px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.finding dd { line-height: 22px; }
.feed-foot > span > span:last-child { text-wrap: balance; }

/* Payment watch: the payee is a name, so it reads in the body face. */
.feed-main .payee { color: var(--deep); font-weight: 600; min-width: 0; }

/* How it works hero: one lookalike moves through the four steps. The
   step markers are the page's own; a teal bar walks down the rows. */
.feed.steps .feed-main { align-items: center; }
.feed.steps .step-n { margin: 0; }
.feed.steps .feed-rows li:nth-child(1) { animation-delay: .2s; }
.feed.steps .feed-rows li:nth-child(2) { animation-delay: .4s; }
.feed.steps .feed-rows li:nth-child(3) { animation-delay: .6s; }
.feed.steps .feed-rows li:nth-child(4) { animation-delay: .8s; }
.feed.steps .feed-rows li { position: relative; }
.feed.steps .feed-rows li::before { content: ""; position: absolute; left: -18px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--teal); opacity: 0; animation: step-on 10s ease-in-out infinite; }
.feed.steps .feed-rows li:nth-child(2)::before { animation-delay: 2.5s; }
.feed.steps .feed-rows li:nth-child(3)::before { animation-delay: 5s; }
.feed.steps .feed-rows li:nth-child(4)::before { animation-delay: 7.5s; }
@keyframes step-on { 0% { opacity: 0; } 4%, 22% { opacity: 1; } 27%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feed.steps .feed-rows li:first-child::before { opacity: 1; } }

/* ---------- Consistency sweep (10 Oct 2026) ---------- */
/* Engine panel: the points share rows (label, text, Pilot line), so each
   Pilot line starts under a thin rule on one line across the row, however
   long the text above it. */
.engine-points > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
.engine-points > div > p:not(.next) { margin-bottom: var(--s2); }
.engine-points > div > .next { margin-top: 0; align-self: start; padding-top: var(--s2); border-top: 1px solid rgba(76,201,176,.35); }
/* Card titles: one style for every card, the same as the feature cards. */
.card > h4 { font: 400 var(--fs-card-h)/1.2 var(--head); color: var(--deep); margin: 0 0 var(--s1); }
/* Plan cards share rows across the grid: names, prices, lists, notes and
   status pills line up card to card. */
.tiers > .tier, .grid > .tier { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 0; align-content: start; }
.tier > .note { margin-top: 0; }
.tier > .card-foot { grid-row: 5; margin: 0; padding-top: var(--s2); }
/* A price without "from" keeps the same height as one with it. */
@media (min-width: 961px) { .tiers:has(.from) .price:not(:has(.from))::before { content: "\00a0"; display: block; font: 500 var(--fs-sm) var(--text); margin: 6px 0 2px; } }
/* A lone third card in a two-column row spans the row. */
@media (min-width: 641px) and (max-width: 960px) { .g3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Price tables on phones: every stacked line starts at the same edge. */
@media (max-width: 640px) {
  table.prices td, table.prices td:first-child, table.prices td:nth-child(2) { width: 100%; }
  table.prices :is(th, td):first-child, table.prices :is(th, td):last-child { padding-left: 0; padding-right: 0; }
  .num-grid table.prices :is(td, th).num { text-align: left; }
}
/* Evidence block: field names in one column, values hang beside them. */
.evidence > span { display: block; }
.evidence .ev { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 1.5ch; margin: 0; }
.evidence .ev dt { margin: 0; }
.evidence .ev dd { margin: 0; overflow-wrap: anywhere; }
/* Banded sections clip their lattice without becoming scroll boxes, so the
   stage headings stay level with their cards and stick as designed. */
section.tint, section.deep { overflow: clip; }

/* The Sixth console band (Brand Protection): real screenshots of the console with made-up brands. */
.console-band { background: var(--deep); color: #CFE3DF; }
.console-band h2 { color: #fff; }
.console-band .eyebrow { color: #7FD3C6; }
.console-band .head-row p { color: #B9CFCB; }
.console-status { display: flex; flex-wrap: wrap; gap: var(--s1h) var(--s3); margin-top: var(--s2); }
.console-status > span { display: inline-flex; align-items: center; gap: var(--s1); color: #CFE3DF; font-size: var(--fs-sm); }
.console-band .badge.live { color: #0b3b35; background: #8FE3D4; }
.console-band .badge.pilot { color: #24303a; background: #C9D4DD; }
.console-shot { margin: 0; }
.console-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.35); background: #0b1a1a; }
.console-shot figcaption { margin-top: var(--s1h); font-size: var(--fs-sm); line-height: 1.5; color: #B9CFCB; max-width: 62ch; }
.console-pair { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s3h); margin-top: var(--s4h); align-items: start; }
.console-note { margin: var(--s3h) 0 0; font-size: var(--fs-label); color: #8FB0AA; }
@media (max-width: 760px) {
  .console-pair { grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s3); }
  .console-shot img { border-radius: 10px; }
}

/* Self-serve price under each Brand Protection plan (Pilot). */
.price .selfserve { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s1); font: 500 var(--fs-sm)/1.3 var(--text); color: var(--body); }

/* Platform: the console, feature by feature. */
.console-band .console-shot.main { margin-bottom: var(--s6); }
.feature-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s5); align-items: center; padding: var(--s4h) 0; border-top: 1px solid rgba(255,255,255,.08); }
.feature-row.flip .feature-text { order: 2; }
.feature-text h3 { color: #fff; font-size: 26px; margin: 0 0 var(--s1h); }
.feature-text p { color: #B9CFCB; margin: 0 0 var(--s2); }
.feature-chips { display: flex; gap: var(--s1); flex-wrap: wrap; }
/* A fixed height (not max-height) keeps the space before a lazy image loads, so the page doesn't jump. */
.feature-row .console-shot img { height: 560px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; }
section.pointer { padding-top: 0; }
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--s2h); padding: var(--s3h) 0; }
  .feature-row.flip .feature-text { order: 0; }
  .feature-row .console-shot img { height: auto; max-height: none; width: 100%; }
}
.feature-row.wide { grid-template-columns: 1fr; gap: var(--s2h); }
.feature-row.wide .console-shot img { height: auto; max-height: none; width: 100%; }

/* Prices (src/prices.mjs): the product chooser on the pricing page, and each product's extras. */
.chooser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
@media (max-width: 960px) { .chooser { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }
.choose { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: var(--body); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.choose:hover, .choose:focus-visible { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(14,42,47,.08); }
@media (prefers-reduced-motion: reduce) { .choose, .choose:hover { transition: none; transform: none; } }
.choose-label { display: flex; align-items: center; gap: var(--s1h); font: 600 var(--fs-label) var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); }
.choose-label::before { content: ""; width: 12px; height: 13.86px; background: var(--teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.choose-who { font-size: var(--fs-card); color: var(--muted); }
.choose-from { font: 400 32px/1.1 var(--head); color: var(--deep); margin-top: auto; padding-top: var(--s1); }
.choose-from small { font: 500 var(--fs-sm) var(--text); color: var(--muted); }
.choose-go { font: 600 var(--fs-card) var(--text); color: var(--teal); }
.intro + .tiers, .intro + .grid { margin-top: var(--s4); }
.extras { margin-top: var(--s4); }
.extras-title { font: 600 var(--fs-label) var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); }
.extras dl { margin: 0; border-top: 1px solid var(--line); }
.extras dl > div { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1h) 0; border-bottom: 1px solid var(--line); }
.extras dt { color: var(--body); }
.extras dd { margin: 0; font-weight: 600; color: var(--deep); white-space: nowrap; }
@media (max-width: 600px) { .extras dl > div { flex-direction: column; gap: 2px; } .extras dd { white-space: normal; } }
.head-row .intro { margin-top: var(--s2); }

/* Inbox Watch: one wide plan card while its price is to be announced (11 Oct 2026) */
.tier.wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s3) var(--split); margin-bottom: var(--s3); }
.tier.wide .price { margin-top: var(--s1); }
.tier.wide .note { margin-top: var(--s2); padding-top: 0; }
.tier.wide .card-foot { margin: var(--s2) 0 0; }
.tier.wide ul { margin: 0; }
.tiers + .tier.wide, .extras + .tier.wide { margin: var(--s3) 0 0; }
@media (max-width: 760px) { .tier.wide { grid-template-columns: minmax(0, 1fr); } }

/* Module model (11 Oct 2026): two doors, the Sixth account, bundles and modules */
.badge.planned { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge.planned::before { background: var(--line-strong); }
.chooser.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .chooser.two { grid-template-columns: minmax(0, 1fr); } }
.tier .who { font-size: var(--fs-card); color: var(--muted); margin: var(--s1) 0 0; }
.price .tba { font: 600 var(--fs-body)/1.3 var(--text); color: var(--muted); }
.sub-h { margin: var(--s5) 0 var(--s3); }
.mprices, .mprice { display: block; }
.mprices { margin: var(--s2) 0 0; font-size: var(--fs-card); }
.fcard.module > p.mprices { font-size: var(--fs-card); margin: var(--s2) 0 0; }
.mprice { font-weight: 600; color: var(--deep); }
.mprice + .mprice { margin-top: 4px; }
.mprice .muted { font-weight: 500; }
.mprice .badge { margin-left: 4px; }
table.prices.modules td.num { white-space: normal; min-width: 12rem; }
table.prices.modules tr.group td { background: var(--mist); font: 600 var(--fs-label) var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); padding: var(--s1h); }
.quote .card, .free .card { display: flex; flex-direction: column; }
.quote .card h4, .free .card h4 { margin-bottom: var(--s1); }
.quote .card > .card-foot, .free .card > .card-foot { margin-top: auto; padding-top: var(--s2); margin-bottom: 0; }
@media (max-width: 640px) {
  table.prices.modules tr.group { background: none; border: 0; padding: 0; margin: var(--s3) 0 var(--s1); }
  table.prices.modules tr.group td { background: none; padding: 0; }
  table.prices.modules td.num { min-width: 0; }
}

.nowrap { white-space: nowrap; }
table.prices .mprice { font-size: var(--fs-card); }
.extras.add dd { white-space: normal; text-align: right; }
@media (max-width: 600px) { .extras.add dd { text-align: left; } }

/* Under reduced motion the timeline on the home example shows every step, stacked. */
@media (prefers-reduced-motion: reduce) { .finding .foot span { grid-area: auto; opacity: 1; } }
/* The arrow after links and prices, drawn in CSS (Public Sans has no U+2192). */
.arr { display: inline-block; width: .85em; height: .85em; vertical-align: -.08em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9.5 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9.5 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Running today / Coming with founding clients (rewrite, 11 Oct 2026) */
.status-groups { align-items: start; }
.status-h { display: flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s2); font: 600 var(--fs-body)/1.3 var(--text); color: var(--deep); }
.status-list b { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.counters.four { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .counters.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .counters.four .counter:first-child { grid-column: auto; } }

.status-h.live { color: var(--teal-dark); }
@media (max-width: 900px) { .status-groups { grid-template-columns: minmax(0, 1fr); } }