/* Ventar Solutions website, version 3 (2026-10-01).
   Plain white and mist sections, Newsreader for headlines, IBM Plex Sans for
   everything else. One signature element: the renewal ruler in the hero, a
   to-scale countdown of one policy's way to its renewal date. Everything else
   stays quiet: hairlines over cards, no gradient washes, no labels above
   headings. Plain CSS, no build step. Each home-page section is a
   self-contained block with its own class, so it can move into a WordPress
   Custom HTML block. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Version 4 (2026-10-09): the logo's own colours. Harbor ink (the V) for the
     dark bands, signal cyan (the diamond) on dark, a deeper teal for links and
     buttons on white, and marigold, the renewal date, for the main action. */
  --ink: #0b1626;          /* headings on light; the dark bands */
  --text: #33405a;         /* body copy */
  --muted: #586579;        /* 5.6:1 on white, 5.1:1 on mist */
  --line: #dde7ec;
  --line-2: #c5d4dc;
  --bg: #ffffff;
  --tint: #eef7f9;         /* mist: the lightest coloured band */
  --tint-blue: #eef7f9;
  --lagoon: #e0f1f5;       /* light aqua from the logo's cyan: hero and product bands */
  --sunrise: #fff5dc;      /* soft marigold: the warm band */
  --navy: #0b1626;
  --tide: #12304a;         /* surfaces inside the dark bands */
  --tide-line: rgba(255, 255, 255, .14);
  --on-dark: #c9d7e2;      /* body copy on ink, 10:1 */
  --on-dark-muted: #9fb3c4;
  --cyan: #2fb3d3;         /* accents on dark only */
  --blue: #0a6f8a;         /* teal: links and buttons on light, white text 5.7:1 */
  --blue-hover: #085a71;
  --blue-soft: #dcf0f5;
  --marigold: #f2b544;     /* the renewal date and the main action; ink text 9.9:1 */
  --marigold-hover: #ffc75c;
  --ok: #0f7a52;
  --ok-bg: #e2f5ec;
  --warn: #8a5a00;
  --warn-bg: #fdf1d3;
  --risk: #b42318;
  --risk-bg: #fdecea;
  --marker: #f2b544;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(11, 22, 38, .06);
  --shadow: 0 1px 2px rgba(11, 22, 38, .05), 0 14px 32px -16px rgba(11, 22, 38, .28);
  --shadow-dark: 0 24px 60px -24px rgba(0, 0, 0, .55);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --wrap: 1180px;
  --header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
figure { margin: 0; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; }
h1 { font-size: clamp(42px, 6vw, 68px); line-height: 1.04; }
h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
h4 { font-size: 15px; font-weight: 600; }
p { margin: 0 0 1em; }
.flush { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 520px) { .wrap { padding: 0 16px; } }
.wrap.narrow { max-width: 920px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 50; font-weight: 600; }
.skip:focus { left: 8px; }
/* Read by screen readers and search engines, not shown (keeps headings in order). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.fine { font-size: 14px; color: var(--muted); }
.center { text-align: center; }
.todo { background: #fff3bf; color: #7a4d00; border-radius: 3px; padding: 0 3px; font-weight: 600; }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff; text-decoration: none; font: 600 15.5px/1.2 var(--sans); padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer; transition: background .15s ease; white-space: nowrap; }
.btn:hover { background: var(--blue-hover); color: #fff; }
.btn.lg { padding: 15px 28px; font-size: 16.5px; }
.btn.small { padding: 9px 16px; font-size: 14.5px; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.btn.white { background: #fff; color: var(--navy); }
.btn.white:hover { background: var(--blue-soft); color: var(--navy); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 32px; }
.actions.center { justify-content: center; }
.text-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.text-link:hover { color: var(--blue); text-decoration-color: currentColor; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }
.wordmark img { display: block; width: auto; height: 44px; }
.site-footer .wordmark img { height: 52px; }
.wordmark:hover { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav a { color: var(--text); text-decoration: none; padding: 8px 14px; border-radius: 999px; font-size: 15.5px; font-weight: 500; }
.nav a:hover { color: var(--ink); background: var(--tint); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--tint); }
.head-actions { display: flex; align-items: center; gap: 6px; }
.login { color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 500; padding: 8px 14px; border-radius: 999px; }
.login:hover { color: var(--ink); background: var(--tint); }
.mnav { display: none; }
@media (max-width: 960px) {
  .nav, .head-actions .login { display: none; }
  .head-actions { margin-left: auto; }
  .mnav { display: block; position: relative; }
  .mnav summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav[open] summary { background: var(--tint); }
  .mnav .panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px; }
  .mnav .panel a { color: var(--ink); text-decoration: none; padding: 12px 14px; border-radius: 10px; font-weight: 500; }
  .mnav .panel a:hover { background: var(--tint); }
  .mnav .panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
}
@media (max-width: 420px) { .head-actions .btn { padding: 10px 14px; font-size: 14.5px; } .wordmark img { height: 36px; } }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.hero h1 { margin-bottom: 24px; font-size: clamp(42px, 5vw, 64px); max-width: 9em; }
.hero .lede { font-size: 19.5px; line-height: 1.6; color: var(--text); max-width: 32em; margin: 0; }
.assure { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14.5px; color: var(--muted); }
.assure li { display: inline-flex; align-items: center; gap: 8px; }
.assure li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a52' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.hero-visual { position: relative; max-width: 580px; margin: 0 0 40px auto; width: 100%; }
.hero-visual .photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--tint); }
.hero-visual .photo img { width: 100%; height: 100%; object-fit: cover; }
.float { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; font-size: 13.5px; color: var(--text); }
.float .t { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 8px; }
.float.reply { left: -40px; bottom: -40px; width: 292px; }
.float.reply q { display: block; font: italic 500 17px/1.35 var(--serif); color: var(--ink); margin-bottom: 10px; quotes: "\201C" "\201D"; }
.float.reply .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1180px) { .float.reply { left: -16px; } }
@media (max-width: 980px) {
  .hero { padding: 48px 0 32px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-visual { margin: 0 auto 44px; max-width: 560px; }
  .float.reply { left: -8px; }
}
@media (max-width: 520px) {
  .hero { padding: 32px 0 24px; }
  .hero .lede { font-size: 18px; }
  .hero .actions .btn { width: 100%; }
  .hero-visual { max-width: 100%; }
  .float.reply { left: -6px; bottom: -44px; width: 250px; padding: 10px 12px; }
  .float.reply q { font-size: 15.5px; }
}

/* The renewal ruler: days run left to right toward the renewal date. Each
   event and scale label is placed with --at, its share of a 135-day scale
   (120 days out to 15 days after). Labels hang from flag poles in two rows so
   neighbours never collide; "end" events hang to the left of their pole. */
.ruler { position: relative; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
/* On wide screens the caption sits in the quiet stretch before the window opens. */
.ruler figcaption { position: absolute; left: 0; top: 32px; width: 19%; display: grid; gap: 4px; line-height: 1.4; }
.ruler figcaption b { color: var(--ink); font-weight: 600; font-size: 16px; }
.ruler figcaption span { color: var(--muted); font-size: 14px; }
.track { position: relative; height: 296px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; bottom: 44px; height: 2px; background: var(--line-2); }
.track::after { content: ""; position: absolute; left: 22.2%; width: 66.7%; bottom: 43px; height: 4px; border-radius: 2px; background: var(--blue); transform-origin: left center; }
.scale { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 7.4074%) top left / 100% 8px no-repeat; }
.scale span { position: absolute; left: var(--at); top: 14px; transform: translateX(-50%); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scale span:first-child { transform: none; }
.scale span.due { color: var(--warn); font-weight: 600; }
.events { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 45px; }
.ev { position: absolute; bottom: 0; left: var(--at); width: min(214px, 19%); padding-left: 14px; display: grid; align-content: start; gap: 1px; font-size: 14px; line-height: 1.4; }
.ev.r1 { padding-bottom: 148px; }
.ev.r2 { padding-bottom: 28px; }
.ev::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 0; width: 1px; background: var(--line-2); }
.ev::after { content: ""; position: absolute; left: -6px; bottom: -6px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.ev.end { left: auto; right: calc(100% - var(--at)); padding-left: 0; padding-right: 14px; text-align: right; }
.ev.end::before { left: auto; right: 0; }
.ev.end::after { left: auto; right: -6px; }
.ev .day { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev b { color: var(--ink); font-size: 15.5px; font-weight: 600; }
.ev .what { color: var(--text); }
.ev.risk::after { border-color: var(--risk); }
.ev.risk .day { color: var(--risk); }
.ev.warn::after { border-color: var(--warn); }
.ev.warn .day { color: var(--warn); }
.ev.due::after { width: 18px; height: 18px; right: -9px; bottom: -8px; border: 3px solid #fff; border-radius: 3px; background: var(--marker); transform: rotate(45deg); box-shadow: 0 0 0 1px var(--warn); }
.ev.due .day { color: var(--warn); }
@media (prefers-reduced-motion: no-preference) {
  .track::after { animation: ruler-fill 1.1s cubic-bezier(.2, .7, .2, 1) .25s both; }
  .ev { animation: ruler-flag .5s ease both; }
  .ev:nth-child(1) { animation-delay: .35s; }
  .ev:nth-child(2) { animation-delay: .5s; }
  .ev:nth-child(3) { animation-delay: .8s; }
  .ev:nth-child(4) { animation-delay: 1.15s; }
  .ev:nth-child(5) { animation-delay: 1.35s; }
}
@keyframes ruler-fill { from { transform: scaleX(0); } }
@keyframes ruler-flag { from { opacity: 0; translate: 0 8px; } }
@media (max-width: 900px) {
  .ruler { margin-top: 48px; padding-top: 28px; }
  .ruler figcaption { position: static; width: auto; }
  .track { height: auto; margin-top: 20px; }
  .track::before { left: 5px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .track::after, .scale { display: none; }
  .events { position: static; display: grid; gap: 20px; }
  .ruler .ev, .ruler .ev.end { position: relative; left: auto; right: auto; bottom: auto; width: auto; padding: 0 0 0 32px; text-align: left; }
  .ruler .ev::before { display: none; }
  .ruler .ev::after, .ruler .ev.end::after { left: 0; right: auto; top: 4px; bottom: auto; }
  .ruler .ev.due::after { left: -2px; top: 2px; }
}

/* Works-with strip */
.works { padding: 40px 0 8px; text-align: center; }
.works p { font-size: 14.5px; color: var(--muted); margin: 0 0 14px; }
.works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; }
.works li { font-weight: 600; font-size: 17px; color: var(--muted); }

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
.section.tint { background: var(--tint); }
.section.tight-top { padding-top: 40px; }
@media (max-width: 720px) { .section { padding: 64px 0; } .section.tight-top { padding-top: 24px; } }
.head { max-width: 760px; margin: 0 0 48px; }
.head p { font-size: 18.5px; color: var(--text); margin: 0; max-width: 38em; }
@media (max-width: 720px) { .head { margin-bottom: 32px; } .head p { font-size: 17.5px; } }

/* Before / after */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; }
.compare > div { padding-top: 22px; border-top: 2px solid var(--line-2); }
.compare .with { border-top-color: var(--blue); }
.compare h3 { font-size: 16px; color: var(--muted); margin-bottom: 18px; }
.compare .with h3 { color: var(--blue); }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.compare li { position: relative; padding-left: 32px; }
.compare li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; }
.compare .without li::before { background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7d' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 10px no-repeat; }
.compare .with li { color: var(--ink); }
.compare .with li::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (max-width: 760px) { .compare { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* Feature rows: text beside a product card */
.features { display: grid; gap: 104px; }
.feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.feature.flip > :first-child { order: 2; }
.feature h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 36px); line-height: 1.14; letter-spacing: -.015em; margin-bottom: 16px; }
.feature > div:first-child p { font-size: 17.5px; }
.feature .points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.feature .points li { position: relative; padding-left: 22px; font-size: 16px; }
.feature .points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 2px; background: var(--blue); }
.stage { max-width: 540px; width: 100%; justify-self: center; }
@media (max-width: 980px) { .features { gap: 72px; } .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; } .feature.flip > :first-child { order: 0; } }
@media (max-width: 600px) { .features { gap: 56px; } .feature .points { display: none; } .ui .extract .lab span:last-child { display: none; } }

/* Product cards (illustrations built in HTML, sample data) */
.ui { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; font-size: 14.5px; color: var(--text); }
.ui-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ui-head span:first-child { font-weight: 600; color: var(--ink); }
.ui-body { padding: 18px 20px; }
.ui .from { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; color: #fff; background: var(--navy); }
.avatar.b { background: #6e4fd8; }
.avatar.c { background: #0f7a52; }
.ui .from b { color: var(--ink); display: block; font-size: 14px; line-height: 1.2; }
.ui .from span span { font-size: 12.5px; color: var(--muted); }
.ui .subject { font-weight: 600; color: var(--ink); font-size: 15.5px; margin-bottom: 8px; }
.ui .qs { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.ui .qs li { padding-left: 2px; }
.ui .sig { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.ui .bubble { background: var(--tint); border-radius: 14px 14px 14px 4px; padding: 12px 14px; color: var(--ink); }
.ui .extract { margin-top: 14px; border: 1px dashed var(--line-2); border-radius: 12px; padding: 12px 14px; }
.ui .extract .lab { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; }
.ui .extract ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ui .route { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; }
.ui .big { font: 500 46px/1 var(--serif); color: var(--risk); letter-spacing: -.02em; }
.ui .kv2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 14px 0 0; font-size: 14px; }
.ui .kv2 dt { color: var(--muted); }
.ui .kv2 dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ui .talk { margin-top: 14px; background: var(--tint); border-radius: 12px; padding: 12px 14px; }
.ui .talk b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 4px; }
.ui .talk ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.tile { background: var(--tint); border-radius: 10px; padding: 10px 12px; }
.tile .n { font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile .l { font-size: 12px; color: var(--muted); line-height: 1.35; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.tag { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tag.risk { background: var(--risk-bg); color: var(--risk); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.info { background: var(--blue-soft); color: var(--blue); }
.sample { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-body { padding: 14px; } .ui .big { font-size: 38px; } }

/* Lines of business, with photos */
.lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.line-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 20px; }
.line-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.line-card h3 small { font-size: 13.5px; font-weight: 600; color: var(--blue); }
.line-card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15.5px; }
@media (max-width: 980px) { .lines { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 40px; } }

/* Photo beside a checklist */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.split .photo { border-radius: var(--radius-lg); overflow: hidden; }
.split .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 980px) { .split { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6f8a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.checks strong { color: var(--ink); font-weight: 600; }
.after-list { margin: 28px 0 0; }
.gap-top { margin-top: 48px; }

/* Retention calculator: the case on the left, the sum on the right */
.worth { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.worth .head { margin: 0; }
@media (max-width: 900px) { .worth { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.calc { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 32px; }
.calc h3 { margin-bottom: 4px; }
.calc .inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 8px; }
.calc .out { display: grid; margin: 0; }
.calc .out div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.calc .out div:last-child { border-bottom: 0; padding-bottom: 0; }
.calc .out dt { color: var(--text); }
.calc .out dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.calc .out .lead { padding: 18px 0; }
.calc .out .lead dd { font: 500 clamp(28px, 3vw, 36px)/1.1 var(--serif); letter-spacing: -.015em; }
@media (max-width: 520px) {
  .calc { padding: 22px 18px; }
  .calc .inputs { grid-template-columns: minmax(0, 1fr); }
  .calc .out div { display: grid; gap: 2px; }
  .calc .out dd { text-align: left; }
}

/* Pricing: four packages, each its own card with its own button. The slider
   (and the calculator above) light up the one that fits; without JavaScript
   the cards simply sit side by side. */
.sizer { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 22px 28px; margin-bottom: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px 32px; align-items: center; }
.sizer label { font-weight: 600; color: var(--ink); font-size: 16px; }
.sizer-row { display: flex; align-items: center; gap: 16px; }
.sizer input[type="range"] { flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.sizer output { flex: none; min-width: 3.2em; text-align: right; font: 500 30px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.sizer .fit-line { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15px; color: var(--text); }
@media (max-width: 760px) { .sizer { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; } }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 30px 24px 24px; display: flex; flex-direction: column; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.plan:hover { border-color: var(--ink); }
.plan.fit { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); transform: translateY(-4px); }
.plan .fit-tag { visibility: hidden; position: absolute; top: 0; left: 22px; transform: translateY(-50%); margin: 0; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--blue); padding: 4px 12px; border-radius: 999px; }
.plan.fit .fit-tag { visibility: visible; }
.plan h3 { font-size: 18px; margin-bottom: 4px; }
.plan .for { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.plan .price { font: 500 46px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; margin-top: auto; }
.plan .price .from { display: block; font-size: 13px; margin-bottom: 6px; }
.plan .price small { font: 500 15px var(--sans); color: var(--muted); letter-spacing: 0; }
.plan .setup { font-size: 14.5px; color: var(--text); margin: 14px 0 0; }
.plan .credits { font-size: 14px; color: var(--muted); margin: 4px 0 20px; }
.plan .btn { white-space: normal; text-align: center; }
.plan.fit .btn { background: var(--blue); color: #fff; box-shadow: none; }
.plan.fit .btn:hover { background: var(--blue-hover); }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 18px 20px; }
  .plan.fit { transform: none; }
  .plans { gap: 18px; }
  .plan { padding: 22px 20px 18px; }
  .plan h3, .plan .for { grid-column: 1; margin: 0; }
  .plan h3 { grid-row: 1; }
  .plan .for { grid-row: 2; }
  .plan .price { grid-column: 2; grid-row: 1 / span 2; font-size: 34px; text-align: right; }
  .plan .setup, .plan .credits, .plan .btn { grid-column: 1 / -1; }
  .plan .setup { grid-row: 3; margin-top: 8px; }
  .plan .credits { grid-row: 4; margin: 2px 0 14px; }
  .plan .btn { grid-row: 5; }
}
@media (prefers-reduced-motion: reduce) { .plan { transition: none; } .plan.fit { transform: none; } }
.includes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 32px; align-items: baseline; margin-top: 28px; }
.includes h3 { font-size: 15.5px; margin: 0; }
.includes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 15px; }
.includes li { display: inline-flex; align-items: center; gap: 8px; }
.includes li::before { content: ""; width: 15px; height: 15px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6f8a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 760px) { .includes { grid-template-columns: minmax(0, 1fr); } .includes ul { display: grid; gap: 8px; } }
.package-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--blue-soft); color: var(--navy); font-size: 15px; font-weight: 500; }
.plan-note { color: var(--muted); font-size: 15px; margin: 18px 0 0; max-width: 52em; }

/* Setup in three steps (a real sequence, so numbered) */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: s3; }
.steps3 li { counter-increment: s3; padding-top: 20px; border-top: 2px solid var(--ink); }
.steps3 li::before { content: counter(s3); display: block; color: var(--ink); font: 500 30px/1 var(--serif); margin-bottom: 14px; }
.steps3 h3 { margin-bottom: 6px; }
.steps3 p { margin: 0; font-size: 16px; }
@media (max-width: 860px) { .steps3 { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Plain terms */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; margin: 0; }
.term { padding-top: 18px; border-top: 1px solid var(--line-2); }
.term dt { font-size: 17.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.term dd { margin: 0; font-size: 15.5px; }
@media (max-width: 760px) { .terms { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-wrap .head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.faq-wrap .head p { font-size: 17px; margin-top: 10px; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } .faq-wrap .head { position: static; } }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 4px; font-weight: 600; font-size: 17px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b2d' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .2s ease; }
.section.tint .faq summary::after { background-color: #fff; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 4px 20px; max-width: 42em; }

/* Closing call to action */
.cta-card { border-radius: 28px; padding: 72px 48px; text-align: center; color: #fff; background: var(--navy); }
.cta-card h2 { color: #fff; margin-bottom: 14px; }
.cta-card p { color: #d6e3f7; font-size: 18.5px; max-width: 34em; margin: 0 auto; }
.cta-card .actions { justify-content: center; }
@media (max-width: 600px) { .cta-card { padding: 48px 22px; border-radius: 22px; } .cta-card .btn { width: 100%; } }

/* ---------- Inner pages ---------- */
.page-hero { padding: 80px 0 64px; border-bottom: 1px solid var(--line); }
.page-hero.flat { border-bottom: 0; }
.page-hero h1 { font-size: clamp(40px, 5.4vw, 60px); max-width: 15em; }
.page-hero .lede { font-size: 19.5px; max-width: 38em; margin: 0; }
.page-hero.center { padding: 110px 0 130px; text-align: center; }
.page-hero.center h1, .page-hero.center .lede { margin-left: auto; margin-right: auto; }
.page-hero.center .lede { margin-bottom: 10px; }
.page-hero + .section { padding-top: 80px; }
@media (max-width: 720px) { .page-hero + .section { padding-top: 48px; } }
@media (max-width: 600px) { .page-hero { padding: 48px 0 40px; } .page-hero .lede { font-size: 18px; } .page-hero.center { padding: 72px 0 88px; } }

/* How it works: numbered steps (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; border-top: 1px solid var(--line-2); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 24px; padding: 32px 0; border-bottom: 1px solid var(--line-2); }
.steps > li::before { content: counter(step); font: 500 36px/1 var(--serif); color: var(--blue); grid-row: 1 / span 2; }
.steps h3 { margin: 4px 0 6px; font-size: 20px; }
.steps p { margin: 0; }
@media (max-width: 600px) { .steps > li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 24px 0; } .steps > li::before { font-size: 28px; } }

/* Book a demo */
.book { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
@media (max-width: 980px) { .book { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.book .lede { margin-bottom: 32px; }
.book .photo { border-radius: var(--radius-lg); overflow: hidden; margin-top: 28px; }
.book .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: ag; }
.agenda li { counter-increment: ag; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; }
.agenda li::before { content: counter(ag); grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-weight: 700; font-size: 14px; }
.agenda b { color: var(--ink); font-weight: 600; }
.agenda span { font-size: 15.5px; }
.form-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 36px; }
@media (max-width: 520px) { .form-card { padding: 22px 18px; } }
.form-card h2 { font-size: 30px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.field .hint { font-size: 13px; color: var(--muted); }
.req { color: var(--risk); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10, 111, 138, .18); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--risk); }
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; font-weight: 500 !important; color: var(--text) !important; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-weight: 600; color: var(--ink); }
.form-status.error { color: var(--risk); }
.notice { background: var(--tint); border-radius: 12px; padding: 12px 16px; margin: 0 0 22px; font-size: 14.5px; }
.step-two { display: none; text-align: center; padding: 20px 0 6px; }
.step-two.show { display: block; }
.step-two .big-check { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 16px; }
.meet { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.meet .mark { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; flex: none; }
.meet .mark svg { width: 20px; height: 20px; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.ways { display: grid; border-top: 1px solid var(--line-2); }
.way { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.way .ic { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.way .ic svg { width: 22px; height: 22px; }
.way h3 { font-size: 16.5px; margin: 0; }
.way p { margin: 0; font-size: 15.5px; }
.ways .fine { margin: 16px 0 0; }
.contact .photo { border-radius: var(--radius-lg); overflow: hidden; }
.contact .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Legal pages: contents on the side, text in a reading column */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 72px; justify-content: center; padding: 64px 24px 112px; max-width: var(--wrap); margin: 0 auto; }
.toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; font-size: 14.5px; }
.toc summary { list-style: none; font-weight: 600; color: var(--ink); margin-bottom: 12px; cursor: default; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line); display: grid; gap: 8px; }
.toc a { color: var(--muted); text-decoration: none; display: block; line-height: 1.4; }
.toc a:hover { color: var(--blue); }
.legal h2 { font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 48px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 17px; margin: 24px 0 8px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal .summary { background: var(--tint-blue); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 8px; }
.legal .summary h2 { margin-top: 0; font-size: 18px; }
.legal .summary ul { margin: 0; }
.table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 16px 0 20px; }
.table.flush { margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--tint); font-size: 13.5px; font-weight: 600; color: var(--ink); }
tr:last-child td { border-bottom: 0; }
@media (max-width: 960px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 24px 80px; }
  .toc { position: static; background: var(--tint); border-radius: var(--radius); padding: 14px 18px; }
  .toc summary { cursor: pointer; margin: 0; display: flex; justify-content: space-between; }
  .toc summary::after { content: "Show"; color: var(--blue); font-weight: 600; }
  .toc[open] summary::after { content: "Hide"; }
  .toc[open] summary { margin-bottom: 12px; }
}
@media (max-width: 520px) { .legal-layout { padding: 24px 16px 64px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--tint); border-top: 1px solid var(--line); padding: 72px 0 32px; font-size: 15px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--blue); }
.site-footer .wordmark, .site-footer .wordmark:hover { color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-grid .slogan { font: italic 500 22px/1.3 var(--serif); color: var(--ink); margin: 16px 0 0; max-width: 14em; }
.foot-grid .social { display: flex; gap: 10px; margin: 20px 0 0; }
.site-footer .social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); background: #fff; }
.site-footer .social a:hover { color: var(--blue); border-color: var(--blue); }
.foot-grid h2 { font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: normal; color: var(--ink); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid li { color: var(--text); }
.foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13.5px; color: var(--muted); }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-bottom nav a { color: var(--muted); }
.foot-bottom .fine-print { flex-basis: 100%; margin: 0; font-size: 12.5px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer { padding-top: 52px; } .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }

/* ---------- Client area (preview) ---------- */
.preview-bar { background: var(--ink); color: #fff; text-align: center; font-size: 14px; font-weight: 500; padding: 9px 16px; }
.portal-top .site-header { position: static; background: #fff; }
.who { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.who-name { color: var(--muted); font-size: 15px; }
@media (max-width: 560px) { .who-name { display: none; } }
.portal-head { background: var(--tint); border-bottom: 1px solid var(--line); padding: 36px 0 0; }
.portal-head h1 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 4px; }
.portal-head p { color: var(--muted); margin: 0; }
.tabs { display: flex; gap: 4px; margin-top: 26px; flex-wrap: wrap; }
.tabs a { color: var(--text); text-decoration: none; padding: 12px 18px; font-weight: 600; font-size: 15.5px; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue); }
.portal { padding-top: 36px; padding-bottom: 56px; }
.panel-view { display: none; }
.panel-view.active { display: block; }
.panel-view > * + * { margin-top: 20px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.box h2 { font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
.box .label { font-size: 13px; font-weight: 600; color: var(--muted); }
.box .value { font: 500 34px/1.15 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.box .value.sm { font-size: 22px; }
.box .value .of { font: 600 18px var(--sans); color: var(--muted); letter-spacing: 0; }
.box .sub { color: var(--muted); font-size: 14.5px; }
.stack { display: grid; gap: 16px; }
.meter { height: 10px; border-radius: 999px; background: var(--tint); overflow: hidden; margin: 12px 0 8px; }
.meter span { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 10px 20px; margin: 0; font-size: 15.5px; }
.kv.tight { grid-template-columns: minmax(110px, 140px) minmax(0, 1fr); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; color: var(--ink); }
.kv dd .meter { max-width: 360px; }
.kv dd .sub { display: block; font-weight: 400; }
@media (max-width: 560px) { .kv, .kv.tight { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 10px; } }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
.settings-grid .field + .field { margin-top: 14px; }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toggle:last-child { border-bottom: 0; }
.toggle strong { display: block; font-size: 15.5px; color: var(--ink); }
.toggle span { color: var(--muted); font-size: 14px; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; background: var(--line-2); border-radius: 999px; transition: background .15s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch input:checked + i { background: var(--blue); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--blue); outline-offset: 2px; }
.portal-help { margin-top: 40px; color: var(--muted); font-size: 15px; }
/* Team tab: who can sign in to the agency's client area */
.team-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.team-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.team-list .team-email { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 600; font-size: 15.5px; }
.team-list .team-email .muted { font-weight: 400; color: var(--muted); }
.team-list select { width: auto; padding: 8px 12px; font-size: 15px; }
.team-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px 20px; align-items: start; }
.team-form .actions, .team-form .form-status { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) {
  .team-form { grid-template-columns: minmax(0, 1fr); }
  .team-list li { flex-wrap: wrap; }
  .team-list .team-email { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq summary::after { transition: none; }
}

/* ---------- Sign in, create account, reset password ---------- */
.auth { padding: 64px 16px 40px; }
.auth-card { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 36px 36px 28px; }
.auth-card.center { text-align: center; }
.auth-card h1 { font-size: clamp(30px, 4vw, 38px); margin-bottom: 8px; }
.auth-card h1:focus { outline: none; }
.auth-card > p { margin-bottom: 20px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card .form-status { margin: 0; min-height: 1.4em; font-size: 15px; }
.auth-foot { margin: 20px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; text-align: center; }
.auth-aside { max-width: 440px; margin: 16px auto 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.auth-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.auth-row .btn { flex: 1 1 auto; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row a { font-size: 14px; }
.pw { position: relative; }
.pw input { padding-right: 72px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--blue); font: 600 14px var(--sans); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.pw-toggle:hover { background: var(--tint); }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; color: var(--text); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.btn.google { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); padding: 13px 20px; gap: 12px; }
.btn.google:hover { background: var(--tint); color: var(--ink); }
.or { display: flex; align-items: center; gap: 14px; margin: 20px 0 !important; color: var(--muted); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.profile { padding-bottom: 32px; }
.profile > h2 { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 8px 0 16px; }
.profile h3 { font-size: 17px; margin-bottom: 14px; }
.actions.tight { margin-top: 10px; }
.note-after { margin-top: 16px; }
.danger summary { cursor: pointer; color: var(--risk); font-weight: 600; font-size: 15px; }
.danger form { display: grid; gap: 12px; margin-top: 12px; }
.btn.danger-btn { background: var(--risk); }
.btn.danger-btn:hover { background: #8f1c13; }
.auth + .profile { margin-top: -8px; }
.preview-bar a { color: #fff; }
@media (max-width: 520px) { .auth { padding: 32px 16px 24px; } .auth-card { padding: 26px 18px 20px; border-radius: 16px; } }

/* /see-it-work/: the 25-second product video */
.demo-video { display: block; width: 100%; height: auto; border-radius: 14px; background: #0B1626; box-shadow: 0 18px 40px rgba(11, 22, 38, .18); }
.demo-video + .fine { margin: 10px 0 36px; }
.demo-video ~ .checks { margin-bottom: 28px; }

/* Demo page: a little air between the agenda and the "not ready" line */
.after-agenda { margin-top: 22px; }

/* =====================================================================
   Version 5 (2026-10-09): light and warm. White, lagoon (a light aqua
   from the logo's cyan), mist and sunrise (a soft marigold) take turns as
   section backgrounds; navy is for text only. Marigold marks the main
   action and the hand-drawn highlight under a few key words. The logo's
   diamond appears as a soft white shape behind the hero photo.
   Chapters: lagoon (hero), white (the problem), lagoon (the product at
   work), white (questions), sunrise (your team), mist (worth and price),
   white (getting started), mist (FAQ), lagoon (call to action), footer.
   ===================================================================== */

/* The main action */
.btn.accent { background: var(--marigold); color: var(--ink); }
.btn.accent:hover { background: var(--marigold-hover); color: var(--ink); }

/* The highlight under key words: a marigold brush stroke */
.hl {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 45 9, 95 8, 138 10 S 186 13, 196 8' fill='none' stroke='%23f2b544' stroke-width='11' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") no-repeat 0 92% / 100% .42em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .04em;
}

/* Section backgrounds */
.lagoon { background: var(--lagoon); }
.sunrise { background: var(--sunrise); }
.section.tint { background: var(--tint); }
.section { padding: 96px 0; }
@media (max-width: 720px) { .section { padding: 64px 0; } }

/* The logo's diamond, as soft shapes */
.diamond { position: absolute; aspect-ratio: 1; border-radius: 40px; transform: rotate(45deg); background: rgba(255, 255, 255, .78); pointer-events: none; }
.spark { position: absolute; width: 30px; aspect-ratio: 1; border-radius: 6px; transform: rotate(45deg); background: var(--cyan); box-shadow: 0 8px 18px -6px rgba(10, 111, 138, .55); pointer-events: none; }

/* Chapter 1: hero */
.hero { position: relative; overflow: hidden; background: var(--lagoon); padding: 80px 0 0; }
.hero h1 { font-size: clamp(46px, 5.6vw, 76px); line-height: 1.02; max-width: 9em; }
.hero-visual .diamond { width: 420px; right: -150px; top: -190px; z-index: 0; }
.hero-visual .spark { left: -15px; top: 34px; z-index: 3; }
.hero-visual .photo { position: relative; z-index: 1; box-shadow: var(--shadow); }
.hero-visual .float { z-index: 3; }
.float.chip { right: -20px; top: -24px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--ink); white-space: nowrap; }
.float.chip b { color: var(--risk); font-size: 15px; }
@media (max-width: 1180px) { .float.chip { right: -8px; } }
@media (max-width: 980px) { .hero { padding-top: 48px; } .hero-visual .diamond { display: none; } }
@media (max-width: 520px) { .hero { padding-top: 32px; } .float.chip { right: 8px; top: -18px; font-size: 12.5px; padding: 8px 10px; } .hero-visual .spark { width: 24px; left: -8px; } }

/* The renewal ruler sits in a white panel on the lagoon */
.hero .ruler { margin-top: 76px; padding: 28px 32px 22px; border-top: 0; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.hero .ruler figcaption { left: 32px; top: 28px; width: calc(19% - 12px); }
@media (max-width: 900px) { .hero .ruler { margin-top: 56px; padding: 22px 20px; } }

/* Works-with, closing the hero */
.hero .works { padding: 36px 0 44px; }

/* Chapter 2: the problem */
.problem .compare .without { padding-top: 26px; }
.problem .compare .without li { color: var(--muted); }
.problem .compare .with { padding: 26px 30px 32px; background: var(--lagoon); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
@media (max-width: 760px) { .problem .compare .with { padding: 22px 20px 26px; } }

/* Chapter 3: the product screens float on the lagoon */
.tour .ui { border-color: transparent; }

/* Chapter 6: worth and price */
.money .calc { border-top: 4px solid var(--marigold); box-shadow: var(--shadow); }
.money .calc .out .lead dd { color: var(--blue); }
.money .pricing { margin-top: 112px; }
@media (max-width: 720px) { .money .pricing { margin-top: 72px; } }
.plan.fit { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow); }
.plan .fit-tag { background: var(--marigold); color: var(--ink); }
.plan.fit .btn { background: var(--marigold); color: var(--ink); }
.plan.fit .btn:hover { background: var(--marigold-hover); color: var(--ink); }

/* Chapter 7: getting started (a real sequence, so numbered) and the terms */
.start .steps3 li { border-top: 3px solid var(--marigold); }
.start .steps3 li::before { color: var(--blue); }
.terms-wrap { margin-top: 96px; padding-top: 72px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .terms-wrap { margin-top: 56px; padding-top: 48px; } }

/* Chapter 9: the call to action */
.cta-band { position: relative; overflow: hidden; background: var(--lagoon); text-align: center; padding: 120px 0; }
.cta-band .wrap { position: relative; }
.cta-band h2, .cta-band p, .cta-band .actions { position: relative; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { font-size: 18.5px; max-width: 34em; margin: 0 auto; }
.cta-band .actions { justify-content: center; }
.cta-band .diamond { left: 50%; top: 50%; width: 420px; translate: -50% -50%; }
@media (max-width: 600px) { .cta-band { padding: 80px 0; } .cta-band .btn { width: 100%; } .cta-band .diamond { width: 300px; } }
.cta-band + * { border-top: 0; }

/* Inner pages open on the lagoon too, with the diamond at the edge */
.page-hero { position: relative; overflow: hidden; background: var(--lagoon); border-bottom: 0; }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero::after { content: ""; position: absolute; right: -140px; top: -170px; width: 420px; aspect-ratio: 1; border-radius: 40px; transform: rotate(45deg); background: rgba(255, 255, 255, .7); pointer-events: none; }
.page-hero.flat::after { display: none; }
@media (max-width: 600px) { .page-hero::after { width: 260px; right: -120px; top: -120px; } }

/* ---------- Motion ----------
   When the home page opens, the hero plays one short sequence: headline,
   the highlight drawing under "at renewal", the photo, the diamond, the
   two sample cards, and the renewal ruler filling toward renewal day. As
   the page scrolls, headings, cards and product screens rise into place
   once and the highlights draw in (site.js marks them as they arrive).
   With "reduce motion" asked for, things only fade; nothing slides. */
@keyframes hero-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes photo-in { from { opacity: 0; transform: translateY(20px) scale(.97); } }
@keyframes diamond-in { from { opacity: 0; transform: rotate(20deg) scale(.7); } }
@keyframes spark-in { from { opacity: 0; transform: rotate(45deg) scale(0); } 60% { transform: rotate(45deg) scale(1.25); } }
@keyframes float-in { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes hl-draw { from { background-size: 0 .42em; } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero .actions, .hero .assure { animation: hero-in .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .lede { animation-delay: .12s; }
  .hero .actions { animation-delay: .22s; }
  .hero .assure { animation-delay: .32s; }
  .hero h1 .hl { animation: hl-draw .9s cubic-bezier(.3, .7, .2, 1) .55s both; }
  .hero-visual .photo { animation: photo-in 1s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .hero-visual .diamond { animation: diamond-in 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-visual .spark { animation: spark-in .6s cubic-bezier(.2, .8, .3, 1) .8s both; }
  .hero-visual .float.reply { animation: float-in .6s cubic-bezier(.2, .9, .3, 1.25) 1s both; }
  .hero-visual .float.chip { animation: float-in .6s cubic-bezier(.2, .9, .3, 1.25) 1.3s both; }
  .page-hero h1, .page-hero .lede { animation: hero-in .7s cubic-bezier(.2, .7, .2, 1) both; }
  .page-hero .lede { animation-delay: .08s; }

  .motion .reveal, .motion .reveal-kids > * { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .motion .reveal:not(.is-in), .motion .reveal-kids > :not(.is-in) { opacity: 0; transform: translateY(28px); }
  .motion .feature:not(.flip) .stage.reveal:not(.is-in) { transform: translateX(56px); }
  .motion .feature.flip .stage.reveal:not(.is-in) { transform: translateX(-56px); }
  @media (max-width: 980px) { .motion .feature .stage.reveal:not(.is-in) { transform: translateY(28px); } }
  .motion h2 .hl { transition: background-size 1s cubic-bezier(.3, .7, .2, 1) .35s; }
  .motion h2 .hl:not(.is-in) { background-size: 0 .42em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .lede, .hero .actions, .hero .assure, .hero-visual { animation: fade-in .9s ease both; }
  .hero .lede { animation-delay: .1s; }
  .hero .actions, .hero .assure { animation-delay: .2s; }
  .hero-visual { animation-delay: .25s; }
  .motion .reveal, .motion .reveal-kids > * { transition: opacity .7s ease; transition-delay: calc(var(--i, 0) * 80ms); }
  .motion .reveal:not(.is-in), .motion .reveal-kids > :not(.is-in) { opacity: 0; }
}
.motion .no-anim { transition: none !important; }

/* Between pages (browsers with cross-document view transitions; others just load) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: page-out .2s ease-in both; }
  ::view-transition-new(root) { animation: page-in .42s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: page-fade-out .2s ease both; }
  ::view-transition-new(root) { animation: fade-in .3s ease both; }
}
@keyframes page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes page-fade-out { to { opacity: 0; } }