/* CompanionAxis design system */

:root {
  /* Brand: Axis coral, a warm Airbnb-style "Rausch" family */
  --primary: #ff385c;        /* brand coral: accents, marks, highlights on dark panels (4.9:1 on --dk) */
  --primary-fill: #e61e4d;   /* buttons and filled surfaces with white text (4.5:1) */
  --primary-dark: #d70466;   /* hover on filled surfaces (5.2:1 with white) */
  --primary-ink: #c81345;    /* accent text on light surfaces (5.8:1 on white) */
  --primary-strong: #e61e4d; /* accent on large display text (4.5:1 on white) */
  --primary-soft: #ffeef1;
  --primary-wash: #fff5f7;

  --ink: #1c1b1a;
  --ink-2: #34312e;
  --muted: #6b6560;
  --muted-2: #8a847d;
  --faint: #a39d96;
  --line: #ece8e2;
  --line-2: #d9d4cd;
  --surface: #faf8f5;
  --surface-2: #f3efe9;
  --white: #fff;

  /* Theme roles: these change in dark mode (see the dark block below). */
  --page: #fff;            /* page background */
  --card: #fff;            /* cards, panels, inputs */
  --dk: #1c1b1a;           /* dark panels: stay dark in both modes */
  --inv: #1c1b1a;          /* inverse buttons: dark on light, light on dark */
  --on-inv: #fff;
  --on-primary: #fff;      /* text on --primary-fill */
  --bad-bg: #fde4e1;
  --bad-fg: #8f1d12;
  --glass: rgba(255, 255, 255, .92);
  --overlay-a: rgba(255, 255, 255, .97);
  --overlay-b: rgba(255, 245, 247, .97);

  --ok-bg: #e6f4ea;
  --ok-fg: #1b6b34;
  --warn-bg: #fdeede;
  --warn-fg: #8a4b00;

  --on-dark: #fff;
  --on-dark-muted: #b8b2ab;
  --dark-line: #34312e;
  --dark-line-2: #4a4642;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-panel: 0 28px 50px rgba(28, 27, 26, .14);
  --shadow-mock: 0 20px 60px rgba(28, 27, 26, .08);

  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --gutter: 32px;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary-ink); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--primary-fill); color: var(--on-primary); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--dk); color: var(--on-dark); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 8px; color: var(--on-dark); }

/* ---------- Layout ---------- */
.w { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding-top: 88px; }
.sec-sm { padding-top: 56px; }
.sec-end { padding-bottom: 88px; }
.stack > * + * { margin-top: var(--gap, 12px); }

.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

/* ---------- Type ---------- */
.eyebrow { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.eyebrow.ac { color: var(--primary-ink); font-weight: 600; }
.kicker { font-size: 14px; color: var(--primary-ink); font-weight: 500; }
.display { font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; max-width: 780px; }
.h1 { font-size: 46px; line-height: 1.08; font-weight: 600; letter-spacing: -.03em; max-width: 820px; }
.h2 { font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; max-width: 820px; }
.h3 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.subtitle { font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--muted); margin-top: 12px; max-width: 640px; }
.lede { font-size: 17px; color: var(--muted); max-width: 560px; }
.body { font-size: 15px; color: var(--muted); }
.small { font-size: 14px; color: var(--muted); }
b, strong { font-weight: 700; }
.mut { color: var(--muted); }
.ac { color: var(--primary-ink); }
.display .ac, .h1 .ac { color: var(--primary-strong); }
.num { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 18px; font: 600 14px var(--font); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--primary-fill); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); color: var(--on-primary); }
.btn-dark { background: var(--inv); color: var(--on-inv); }
.btn-dark:hover { background: var(--ink-2); color: var(--primary); }
.btn-ghost { background: var(--card); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost-dark { background: transparent; border-color: var(--dark-line-2); color: var(--on-dark); }
.btn-ghost-dark:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 13px 22px; font-size: 15px; }
.link-arrow { font-size: 14px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow span { transition: transform .15s; }
.link-arrow:hover span { transform: translateX(3px); }

/* ---------- Pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 99px; background: var(--ok-bg); color: var(--ok-fg); white-space: nowrap; }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.info { background: var(--primary-soft); color: var(--primary-ink); }
.pill.dark { background: var(--dk); color: var(--on-dark); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--surface); }
.card b, .card h3 { display: block; font-size: 16px; font-weight: 600; }
.card p { font-size: 14px; color: var(--muted); margin-top: 6px; }
a.card { transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--line-2); color: inherit; transform: translateY(-2px); }
a.card:hover .card-more { color: var(--primary-ink); }
.card-more { display: inline-block; font-size: 13px; color: var(--muted); margin-top: 12px; }
.thumb { height: 130px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); padding: 14px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bar { height: 10px; border-radius: 5px; background: var(--line); }
.bar.ac { background: var(--primary); }
.claims { padding: 24px; background: var(--card); }
.claims-hd { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.claims-hd b { font-size: 15px; }
.claims-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.claims-row b { display: block; font-size: 14px; font-weight: 600; }
.claims-row .small { font-size: 12.5px; }
.claims-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; }
.claims-ft { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; color: var(--muted); }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }

.feat { border-left: 2px solid var(--primary); padding-left: 18px; }
.feat b { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.feat p { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* ---------- Dark panels ---------- */
.dk { background: var(--dk); color: var(--on-dark); border-radius: var(--radius-lg); padding: 40px; }
.dk p { color: var(--on-dark-muted); }
.dk .label { color: var(--primary); font-size: 13px; margin-bottom: 14px; }
.dk-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-cols > * + * { border-left: 1px solid var(--dark-line); padding-left: 28px; }
.dk-cols > * { padding-right: 28px; }
.dk a:not(.btn) { color: var(--on-dark); font-size: 13px; }
.dk a:not(.btn):hover { color: var(--primary); }

/* ---------- Placeholder images ---------- */
.ph {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(28, 27, 26, .035) 14px 15px);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end;
}
.ph-tag { margin: 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--glass); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; font-size: 12px; color: var(--muted); max-width: calc(100% - 32px); }
.ph-tag svg { flex: none; }
.ph.dark { background-color: #24221f; border-color: var(--dark-line); background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .04) 14px 15px); }

/* ---------- Header ---------- */

.hd { position: sticky; top: 0; z-index: 40; background: var(--page); border-bottom: 1px solid var(--line); }
.hd-bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 12px; }
.logo { font-size: 20px; font-weight: 600; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 6px; }
.logo:hover { color: var(--ink); }
.logo-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); margin-right: 2px; }
.logo small { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.theme-btn { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; }
.theme-btn:hover { border-color: var(--ink); }
.menu-btn { display: none; border: 1px solid var(--line-2); background: var(--card); border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; font: 500 14px var(--font); }

@keyframes mpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.soon { font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: var(--warn-bg); color: var(--warn-fg); margin-left: 6px; vertical-align: 1px; }
.scrim { position: fixed; inset: 0; top: 0; background: rgba(28, 27, 26, .28); z-index: 30; animation: fade .16s ease-out; }
@keyframes fade { from { opacity: 0; } }


/* Mobile drawer */
.drawer { display: none; }

/* ---------- Footer ---------- */
.ft { padding-top: 72px; }
.ft-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 24px; }
.ft-grid b { font-size: 13px; font-weight: 600; display: block; }
.ft-grid a { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; }
.ft-grid a:hover { color: var(--primary-ink); }
.ft-grid a.logo { display: inline-flex; color: var(--ink); margin-top: 0; font-size: 20px; }
.ft-brand p { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: 260px; }
.ft-contact { margin-top: 16px; font-size: 13px; }
.ft-contact a { color: var(--ink); margin-top: 4px; }
.ft-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.ft-base nav { display: flex; gap: 18px; }
.ft-base a:hover { color: var(--primary-ink); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2e9e57; margin-right: 6px; vertical-align: 1px; }
.wordmark { height: min(170px, 14vw); overflow: hidden; margin-top: 24px; text-align: center; font-size: min(220px, 18vw); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--primary-wash); white-space: nowrap; user-select: none; }

/* ---------- Hero journey mock ---------- */
/* The journey canvas (components/journey/engine.js draws everything inside it) */
.jx { position: relative; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-mock); overflow: hidden; min-height: 600px; }
.jx-canvas { display: block; width: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (max-width: 599px) { .jx { min-height: 0; } }
.mock { position: relative; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-mock); display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; overflow: hidden; min-height: 600px; }
.mock-sb { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.mock-track { position: absolute; left: 27px; top: 50%; height: 504px; margin-top: -252px; width: 2px; background: var(--line); border-radius: 2px; }
.mock-track i { display: block; width: 2px; background: var(--primary); border-radius: 2px; }
.st { display: flex; align-items: center; gap: 12px; height: 56px; position: relative; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; width: 100%; }
.st-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; color: var(--on-primary); font-size: 12px; font-weight: 700; transition: background .25s, border-color .25s; }
.st-name { font-size: 14px; font-weight: 500; transition: color .25s; }
.st:hover .st-name { color: var(--primary-ink) !important; }
.st-time { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.mock-main { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; background: var(--card); }
.rec { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px 12px; background: var(--card); box-shadow: 0 12px 36px -18px rgba(28, 27, 26, .18); }
.rec-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; }
.rec-name { font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.chip { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 99px; white-space: nowrap; transition: background .3s, color .3s; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rec-row { overflow: hidden; }
.rec-row > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--surface-2); align-items: baseline; }
.rec-dept { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-ink); font-weight: 600; }
.rec-val { font-size: 14px; line-height: 1.35; }
.rec-ft { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--surface-2); padding-top: 10px; font-size: 12px; color: var(--muted); }
.mock-chat { border-left: 1px solid var(--line); padding: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; background: var(--card); }
.agent-hd { margin-bottom: auto; display: flex; align-items: center; gap: 10px; }
.agent-av { width: 28px; height: 28px; border-radius: 50%; background: var(--dk); position: relative; flex: none; }
.agent-av::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--primary); }
.agent-hd b { display: block; font-size: 13px; }
.agent-hd span { display: block; font-size: 11.5px; color: var(--muted-2); }
.bub { background: var(--surface-2); border-radius: 8px 8px 8px 2px; padding: 10px 12px; line-height: 1.4; }
.typing { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: 8px 8px 8px 2px; padding: 12px; align-self: flex-start; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.mock-mstrip { display: none; }
.rec { transition: none; will-change: transform, opacity; }
/* Data protection panel (replaces the agent chat) */
.mock-sec { border-left: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); }
.jx-sec-hd { display: flex; gap: 10px; align-items: center; }
.jx-sec-hd b { display: block; font-size: 14px; font-weight: 600; }
.jx-sec-hd span span { display: block; font-size: 12px; color: var(--muted); }
.jx-evs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.jx-ev { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.jx-ev b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-ink); margin-bottom: 2px; }
.jx-ev-ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--ok-bg); color: var(--ok-fg); display: inline-flex; align-items: center; justify-content: center; }
.jx-sec-ft { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.mock-secline { display: none; gap: 10px; align-items: flex-start; margin-top: 14px; min-height: 56px; font-size: 13px; line-height: 1.4; }
.mock-secline b { font-weight: 600; }
/* Title card before the journey starts */
.jx-intro { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 90% at 50% 40%, var(--overlay-a), var(--overlay-b)); cursor: pointer; }
.jx-intro-in { max-width: 700px; text-align: center; }
.jx-intro-t { font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 10px 0 12px; }
.jx-intro p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.jx-intro-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.jx-intro-steps span { font-size: 12px; padding: 5px 10px; border-radius: 99px; background: var(--surface); color: var(--faint); animation: jxStep .4s ease-out forwards; }
@keyframes jxStep { to { background: var(--primary-soft); color: var(--primary-ink); } }
.mock-ctrl { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--muted); align-items: center; }
.mock-ctrl button { border: 1px solid var(--line-2); background: var(--card); border-radius: 99px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.mock-ctrl button:hover { border-color: var(--ink); }

/* Email capture */
.capture { display: flex; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 5px 5px 14px; align-items: center; gap: 12px; background: var(--surface); }
.capture:focus-within { border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.capture input { border: 0; background: transparent; font: 14px var(--font); min-width: 0; flex: 1; width: 200px; outline: none; }
.capture input::placeholder { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Logos row */
.logos { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-weight: 500; color: var(--muted-2); }
/* Uploaded logos: the dark-mode version swaps in, or a one-colour logo turns white */
.lg { display: block; width: auto; height: auto; }
.lg-dark { display: none; }
.logo .lg { height: var(--logo-h, 28px); max-width: 220px; object-fit: contain; }
.logos > a, .logos > span { display: inline-flex; align-items: center; }
.logos .lg { height: 32px; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: opacity .2s, filter .2s; }
.logos > a:hover .lg { filter: none; opacity: 1; }
.ib.ib-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 8px; }
.ib-logo .lg { max-width: 100%; max-height: 100%; object-fit: contain; }
:root[data-theme="dark"] .lg-light { display: none; }
:root[data-theme="dark"] .lg-dark { display: block; }
:root[data-theme="dark"] .lg-invert { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .logos .lg-invert { filter: grayscale(1) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-light { display: none; } :root:not([data-theme="light"]) .lg-dark { display: block; } :root:not([data-theme="light"]) .lg-invert { filter: brightness(0) invert(1); } :root:not([data-theme="light"]) .logos .lg-invert { filter: grayscale(1) invert(1); } }

/* Tabs (segment) */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; text-align: center; }
.seg button { background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; padding: 16px; cursor: pointer; color: var(--muted); font: inherit; }
.seg button.on { border-top-color: var(--ink); color: var(--ink); }
.seg button:hover { color: var(--ink); }

/* Quote band */
.quote { border-radius: var(--radius-lg); min-height: 340px; background: linear-gradient(120deg, var(--dk) 30%, #6e1631); color: var(--on-dark); padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; }
.quote blockquote { margin: 0; font-size: 26px; line-height: 1.3; max-width: 680px; font-weight: 500; }
.quote cite { display: block; margin-top: 16px; font-size: 14px; color: var(--line-2); font-style: normal; }

/* CTA band */
.cta { border-radius: var(--radius-lg); background: linear-gradient(115deg, var(--dk) 0%, var(--dk) 58%, var(--primary-fill) 58.2%, var(--primary) 100%); color: var(--on-dark); padding: 56px 48px; }
.cta p { color: var(--line-2); max-width: 440px; font-size: 15px; margin: 14px 0 24px; }

/* Lists */
.numlist { border-top: 1px solid var(--line); font-size: 15px; }
.numlist li { padding: 14px 0; border-bottom: 1px solid var(--line); list-style: none; display: flex; gap: 14px; }
.numlist { padding: 0; margin: 0; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23c81345' stroke-width='1.8'/%3E%3C/svg%3E") center/16px no-repeat; }
.dk .checks li::before { background-color: rgba(255, 56, 92, .14); }

/* Page hero */
.phero { padding-top: 56px; }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--primary-ink); }
.phero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 28px; }

/* Icon badges */
.ib { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-ink); }
.ib-lg { width: 52px; height: 52px; border-radius: 14px; }
.ib-dark, .dk .ib { background: rgba(255, 56, 92, .12); color: var(--primary); }

/* Benefits — the primary value block */
.benefit { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; background: var(--card); }
.benefit h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; margin-top: 20px; }
.benefit p { font-size: 15px; color: var(--muted); margin-top: 8px; }

/* Icon item */
.iitem b { display: block; font-size: 16px; font-weight: 600; margin-top: 14px; }
.iitem p { font-size: 14px; color: var(--muted); margin-top: 6px; }
.dk .iitem b { color: var(--on-dark); }

/* Feature list — secondary detail */
.flist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.flist li { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.flist-ic { color: var(--primary-ink); flex: none; margin-top: 2px; }
.flist-hd { align-self: start; }
@media (min-width: 861px) { .flist-hd { position: sticky; top: 96px; } }
.flist b { display: block; font-weight: 600; font-size: 14px; }
.flist li span span { display: block; color: var(--muted); margin-top: 2px; }

/* Steps — icon timeline */
.steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding: 0; list-style: none; position: relative; }
.step { position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: 60px; width: calc(100% + 24px - 72px); height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.step-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card); border: 2px solid var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 6px var(--page); }
.step .num { display: block; margin-top: 16px; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.step b { display: block; font-size: 16px; font-weight: 600; margin-top: 4px; }
.step p { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--muted); font-size: 15px; max-width: 720px; }

/* Forms */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; }
.field input, .field select, .field textarea { font: 15px var(--font); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 11px 12px; background: var(--card); width: 100%; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.notice { border-radius: 8px; padding: 14px 16px; background: var(--ok-bg); color: var(--ok-fg); font-size: 14px; }
/* Demo request dialog (links to /contact open it; the page itself still works) */
.dmodal { border: 0; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 24px 80px rgba(0,0,0,.28); overflow: auto; }
.dmodal::backdrop { background: rgba(10,12,14,.55); backdrop-filter: blur(2px); }
.dmodal[open] { animation: dm-in .22s ease-out; }
@keyframes dm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dmodal-in { padding: 28px; }
.dmodal-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.dmodal-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.dmodal-x:hover { border-color: var(--line-2); }
.dmodal-page { display: inline-block; margin-top: 16px; }
body:has(.dmodal[open]) { overflow: hidden; }
@media (max-width: 640px) { .dmodal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } .dmodal-in { padding: 20px 16px 28px; } }
@media (prefers-reduced-motion: reduce) { .dmodal[open] { animation: none; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; margin-top: 40px; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; background: var(--card); display: flex; flex-direction: column; }
.plan.featured { background: var(--dk); color: var(--on-dark); border-color: var(--dk); }
.plan.featured .mut, .plan.featured .small { color: var(--on-dark-muted); }
.plan.featured .ac, .dk .ac, .cta .ac { color: var(--primary); } /* coral text on dark panels: 4.9:1 */
.plan .price { font-size: 34px; font-weight: 500; letter-spacing: -.02em; margin-top: 18px; }
.plan .checks { margin: 22px 0 18px; flex: 1; }
.plan.featured .checks li::before { background-color: rgba(255, 56, 92, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23ff385c' stroke-width='1.8'/%3E%3C/svg%3E"); }

/* Misc */
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font-size: 13px; background: var(--card); }
a.tag:hover { border-color: var(--primary-ink); }
.code { background: var(--dk); color: #e9e5df; border-radius: var(--radius); padding: 20px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre; }
.prose { max-width: 720px; }
.prose h2 { font-size: 26px; letter-spacing: -.01em; margin: 40px 0 12px; }
.prose p { font-size: 17px; color: var(--ink-2); line-height: 1.65; margin-top: 14px; }
.prose ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* ---------- Dark mode ----------
   Follows the device unless a choice is set: <html data-theme="light|dark"> (the header toggle, or the
   site default chosen by the administrator). */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #f2eee8; --ink-2: #dcd6ce; --muted: #a8a199; --muted-2: #8e877f; --faint: #6f6963;
    --line: #2b2926; --line-2: #3d3a36; --surface: #171615; --surface-2: #22201e;
    --page: #0d0c0b; --card: #131211; --dk: #1b1a18; --inv: #f2eee8; --on-inv: #1c1b1a;
    --primary-ink: #ff7a93; --primary-strong: #ff5a75; --primary-soft: rgba(255, 56, 92, .16); --primary-wash: rgba(255, 56, 92, .08);
    --ok-bg: rgba(46, 158, 87, .18); --ok-fg: #7bd89b; --warn-bg: rgba(224, 160, 64, .18); --warn-fg: #f2bd6b;
    --bad-bg: rgba(192, 57, 43, .22); --bad-fg: #ff9e92;
    --glass: rgba(19, 18, 17, .9); --overlay-a: rgba(13, 12, 11, .96); --overlay-b: rgba(42, 10, 19, .96);
    --shadow-panel: 0 28px 50px rgba(0, 0, 0, .55); --shadow-mock: 0 20px 60px rgba(0, 0, 0, .5); } }
:root[data-theme="dark"] { --ink: #f2eee8; --ink-2: #dcd6ce; --muted: #a8a199; --muted-2: #8e877f; --faint: #6f6963;
    --line: #2b2926; --line-2: #3d3a36; --surface: #171615; --surface-2: #22201e;
    --page: #0d0c0b; --card: #131211; --dk: #1b1a18; --inv: #f2eee8; --on-inv: #1c1b1a;
    --primary-ink: #ff7a93; --primary-strong: #ff5a75; --primary-soft: rgba(255, 56, 92, .16); --primary-wash: rgba(255, 56, 92, .08);
    --ok-bg: rgba(46, 158, 87, .18); --ok-fg: #7bd89b; --warn-bg: rgba(224, 160, 64, .18); --warn-fg: #f2bd6b;
    --bad-bg: rgba(192, 57, 43, .22); --bad-fg: #ff9e92;
    --glass: rgba(19, 18, 17, .9); --overlay-a: rgba(13, 12, 11, .96); --overlay-b: rgba(42, 10, 19, .96);
    --shadow-panel: 0 28px 50px rgba(0, 0, 0, .55); --shadow-mock: 0 20px 60px rgba(0, 0, 0, .5); }

/* Dark panels keep their colour, so they get an outline to stand apart from the dark page. */
:root[data-theme="dark"] :is(.dk, .mp-dk, .cta, .quote, .plan.featured) { box-shadow: inset 0 0 0 1px var(--line-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.dk, .mp-dk, .cta, .quote, .plan.featured) { box-shadow: inset 0 0 0 1px var(--line-2); } }
/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .ft-grid { grid-template-columns: repeat(3, 1fr); }
  .ft-brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 40px; align-items: end; }
  .ft-brand .logo { grid-column: 1 / -1; }
  .ft-brand p { max-width: 520px; }
  .mock { grid-template-columns: 180px minmax(0, 1fr); }
  .mock-sec { display: none; }
  .mock-secline { display: flex; }
}
@media (max-width: 960px) {
  .isl, .ut-links, .hd-ctas .hide-m { display: none; }
  .menu-btn { display: inline-block; }
  .drawer { display: block; position: fixed; inset: var(--drawer-top, 64px) 0 0 0; background: var(--page); z-index: 45; overflow-y: auto; padding: 8px var(--gutter) 32px; border-top: 1px solid var(--line); }
  .drawer details { border-bottom: 1px solid var(--line); }
  .drawer summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; }
  .drawer summary::-webkit-details-marker { display: none; }
  .drawer summary::after { content: '+'; color: var(--muted); }
  .drawer details[open] summary::after { content: '–'; }
  .drawer .dlinks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding-bottom: 14px; }
  .drawer .dlinks a { padding: 6px 0; font-size: 14px; font-weight: 400; color: var(--ink-2); }
  .drawer .dlinks a:hover { color: var(--primary-ink); }
  .drawer .dlbl { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); margin-top: 14px; }
  .drawer > a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; }
  .drawer .dctas { display: grid; gap: 10px; margin-top: 24px; }
  .drawer .dctas .btn { justify-content: center; }
}
@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .sec { padding-top: 64px; }
  .sec-end { padding-bottom: 64px; }
  .display { font-size: 40px; }
  .h1 { font-size: 34px; }
  .h2 { font-size: 26px; }
  /* !important: some sections set their column widths inline, and they must still stack */
  .g2, .g3, .g4, .phero-grid, .form-row { grid-template-columns: 1fr !important; gap: 24px; }
  .guide-toc { position: static; order: -1; }
  .guide-toc nav { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .plans { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .step:not(:last-child)::after { top: 60px; bottom: -18px; left: 23px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 12px); }
  .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
  .step-ic { grid-row: span 3; }
  .step .num { margin-top: 2px; }
  .flist { grid-template-columns: 1fr; }
  .dk { padding: 28px; }
  .dk-cols { grid-template-columns: 1fr; gap: 28px; }
  .dk-cols > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--dark-line); padding-top: 28px; }
  .dk-cols > * { padding-right: 0; }
  .cta { padding: 40px 24px; background: linear-gradient(160deg, var(--dk) 0%, var(--dk) 70%, var(--primary-fill) 70.2%, var(--primary) 100%); }
  .quote { padding: 28px; min-height: 280px; }
  .quote blockquote { font-size: 21px; }
  .seg { grid-template-columns: repeat(2, 1fr); }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-template-columns: 1fr; }
  .wordmark { font-size: 18vw; height: 14vw; }
  .capture { flex-wrap: wrap; padding: 8px; }
  .capture input { width: 100%; padding: 4px 6px; }
  .capture .btn { width: 100%; justify-content: center; }

  .mock { grid-template-columns: 1fr; min-height: 380px; }
  .mock-sb { display: none; }
  .mock-main { padding: 16px; }
  .mock-mstrip { display: flex; gap: 6px; padding: 14px 16px 0; overflow-x: auto; scrollbar-width: none; }
  .mock-mstrip::-webkit-scrollbar { display: none; }
  .rec { padding: 16px 16px 10px; }
  .rec-row > div { grid-template-columns: 84px 1fr; }
  .rec-name { font-size: 19px; }
  .jx-intro-t { font-size: 22px; }
  .jx-intro p { font-size: 14px; }
}

.partner { padding: 14px; display: flex; gap: 12px; align-items: center; background: var(--card); }
.partner .ib { width: 34px; height: 34px; border-radius: 8px; }
.card .ib + b { margin-top: 0; }

.agent-hd .soon { display: inline-block; margin-left: 6px; }
@media (max-width: 860px) { .subtitle { font-size: 18px; } }
.step.is-soon .step-ic { border-style: dashed; border-color: var(--warn-fg); color: var(--warn-fg); }
.benefit h3 .soon, .iitem b .soon, .step b .soon, .flist b .soon { vertical-align: 2px; }

/* Coordinated care loop diagram */
.loop > svg { width: 100%; height: auto; display: block; overflow: visible; }
.loop-out, .loop-back { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; animation: flow 1.4s linear infinite; }
.loop-out { stroke: var(--primary); }
.loop-back { stroke: #fff; opacity: .7; animation-duration: 1.8s; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.loop-hub { fill: var(--primary-fill); }
.loop-hub-ic { color: #fff; }
.loop-hub-t { font: 600 15px var(--font); fill: #fff; }
.loop-hub-n { font: 500 11.5px var(--font); fill: rgba(255, 255, 255, .88); }
.loop-node { fill: #2a2825; stroke: var(--dark-line-2); }
.loop-node-ic { color: var(--primary); }
.loop-node-t { font: 600 13px var(--font); fill: #fff; }
.loop-node-n { font: 400 11px var(--font); fill: var(--on-dark-muted); }
.loop-key { display: flex; gap: 20px; justify-content: center; margin-top: 14px; font-size: 12px; color: var(--on-dark-muted); flex-wrap: wrap; }
.loop-key i { display: inline-block; width: 18px; height: 0; border-top: 2.5px dotted; vertical-align: middle; margin-right: 8px; }
.k-out { color: var(--primary); }
.k-back { color: var(--on-dark); }
.care { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.care-points { list-style: none; padding: 0; margin: 26px 0 28px; display: grid; gap: 16px; }
.care-points li { display: flex; gap: 14px; }
.care-points b { display: block; color: var(--on-dark); font-size: 15px; }
.care-points p { font-size: 14px; margin-top: 2px; }
@media (max-width: 860px) { .care { grid-template-columns: 1fr; gap: 28px; } }
.flist .soon { display: inline-block; margin-left: 6px; }
.loop-list { display: none; list-style: none; padding: 0; margin: 0; }
@media (max-width: 600px) {
  .loop > svg { display: none; }
  .loop-list { display: grid; gap: 10px; }
  .loop-list li { display: flex; align-items: center; gap: 12px; border: 1px solid var(--dark-line-2); border-radius: 12px; padding: 12px; background: #2a2825; }
  .loop-list li > span:nth-child(2) { flex: 1; }
  .loop-list b { display: block; color: var(--on-dark); font-size: 14px; }
  .loop-list li > span:nth-child(2) span { display: block; font-size: 12px; color: var(--on-dark-muted); }
  .loop-arrows { display: grid; gap: 6px; }
  .loop-arrows i { display: block; width: 26px; border-top: 2.5px dotted; }
}

/* Trust and compliance */
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 40px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { color: var(--primary-ink); }
a.trust-row:hover { color: var(--ink); }
.trust-hero { margin-top: 24px; border: 0; padding: 0; color: var(--muted); font-size: 12.5px; }
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cert { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; background: var(--card); box-shadow: 0 12px 36px -24px rgba(28, 27, 26, .25); scroll-margin-top: 90px; display: flex; flex-direction: column; }
.cert-hd { display: flex; gap: 16px; align-items: center; }
.cert-ref { margin-top: 18px; align-self: flex-start; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.cert-links { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.cert-links .small:hover { color: var(--primary-ink); }
@media (max-width: 860px) { .certs { grid-template-columns: 1fr; } .cert { padding: 24px; } }

/* Dedicated trust pages */
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--warn-fg); background: var(--warn-bg); border-radius: 8px; padding: 10px 14px; max-width: 640px; }
.note svg { flex: none; margin-top: 1px; }
.clist { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 14px; }
.clist-item { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; background: var(--card); break-inside: avoid; }
.clist-hd { display: flex; align-items: center; gap: 14px; }
.clist-hd .num { font-size: 13px; }
.clist-hd h3 { font-size: 18px; font-weight: 600; }
.clist-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 18px 0 0; }
.clist-body dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.clist-body dd { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.clist-body .by-us { background: var(--primary-soft); border-radius: 10px; padding: 12px 14px; margin: -12px -14px; }
.clist-body .by-us dt { color: var(--primary-ink); }
.ready { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.ready-grp + .ready-grp { border-top: 1px solid var(--line); }
.ready-lbl { padding: 14px 20px 6px; }
.ready-row { display: flex; gap: 12px; align-items: center; padding: 10px 20px; font-size: 14px; border-top: 1px solid var(--surface-2); }
.ready-row:first-of-type { border-top: 0; }
.ready-row .ok { color: var(--ok-fg); flex: none; }
.soon-row { color: var(--muted); }
.soon-row svg { color: var(--warn-fg); flex: none; }
@media (max-width: 860px) {
  .clist-body { grid-template-columns: 1fr; gap: 14px; }
  .clist-body .by-us { margin: 0; }
}
@media print {
  .announce, .hd, footer, .no-print, .drawer, .scrim, .faq summary::after { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .faq details { display: block; }
  .faq details p { display: block; }
  body { font-size: 12px; }
  .sec { padding-top: 28px; }
  .benefit, .clist-item { box-shadow: none; }
}

/* Working-day plan (home): areas of the organisation mapped to modules */
.fp { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; margin-top: 36px; }
.fp-plan { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 118px; gap: 2px; background: var(--dk); border: 2px solid var(--dk); border-radius: 4px; overflow: hidden; }
.fp-room { grid-column: var(--dc); grid-row: var(--dr); background: var(--surface); border: 0; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; text-align: left; cursor: pointer; min-width: 0; font: inherit; color: var(--ink); transition: background .15s; }
.fp-room:hover { background: var(--primary-soft); }
.fp-room.on { background: var(--primary-fill); color: #fff; }
.fp-room:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 0; }
.fp-label { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.25; }
.fp-count { font-size: 12px; color: var(--muted-2); }
.fp-room.on .fp-count { color: rgba(255, 255, 255, .88); }
.fp-panel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.fp-panel-hd { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-ink); }
.fp-panel-hd i { width: 8px; height: 8px; border-radius: 2px; background: var(--primary); }
.fp-note { font-size: 15px; color: var(--muted); line-height: 1.45; }
.fp-more { align-self: flex-start; margin-top: 4px; }
.fp-more span { transition: transform .2s; }
.fp-more:hover span { transform: translateX(3px); }
.fp-mod { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.fp-mod-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; }
.fp-mod:hover .fp-mod-name { color: var(--primary-ink); }
.fp-soon { font-size: 11.5px; font-weight: 500; color: var(--warn-fg); }
.fp-mod-desc { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
@media (max-width: 860px) {
  .fp { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .fp-plan { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 68px; }
  .fp-room { grid-column: var(--mc); grid-row: var(--mr); padding: 10px; }
  .fp-label { font-size: 10.5px; }
}

/* Module index (/platform): every module by category */
.mi-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.mi-filter { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 8px; }
.mi-filter button { padding: 7px 13px; border: 0; border-radius: 6px; font: 500 14px var(--font); cursor: pointer; background: transparent; color: var(--muted); }
.mi-filter button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(28, 27, 26, .12); }
.mi-cols { columns: 3; column-gap: 48px; margin-top: 56px; }
.mi-cat { break-inside: avoid; display: flex; flex-direction: column; padding-bottom: 44px; }
.mi-cat-hd { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.mi-cat-hd h3 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mi-cat-hd span { font-size: 12px; color: var(--muted-2); }
.mi-mod { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.mi-mod-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mi-mod-name b { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.mi-soon { font-size: 11.5px; font-weight: 500; color: var(--warn-fg); background: var(--warn-bg); padding: 2px 8px; border-radius: 99px; }
.mi-mod p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.mi-mod .link-arrow { margin-top: 2px; align-self: flex-start; }
@media (max-width: 1000px) { .mi-cols { columns: 2; } }
@media (max-width: 640px) { .mi-cols { columns: 1; margin-top: 36px; } }

.show-touch { display: none; }
@media (hover: none) { .show-touch { display: inline; } .hide-touch { display: none; } }

/* Help centre */
.help-hero { background: linear-gradient(180deg, var(--primary-wash), var(--page)); padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.hs { position: relative; }
.hs-field { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px 6px 6px 16px; box-shadow: 0 10px 30px -18px rgba(28, 27, 26, .3); }
.hs-field:focus-within { border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.hs-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 17px var(--font); color: var(--ink); padding: 8px 0; }
.hs-sm .hs-field, .hs-field.hs-sm { border-radius: 10px; box-shadow: none; }
.hs-sm .hs-field input, .hs-field.hs-sm input { font-size: 15px; padding: 5px 0; }
.hs-ic { color: var(--muted); flex: none; }
.hs-kbd { font: 12px ui-monospace, Menlo, monospace; border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 7px; color: var(--muted); }
.hs-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-panel); max-height: 420px; overflow-y: auto; }
.hs-item { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.hs-item.on { background: var(--surface-2); }
.hs-type { color: var(--primary-ink); flex: none; margin-top: 3px; }
.hs-main b { display: block; font-size: 14px; font-weight: 600; }
.hs-main span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.hs-empty { padding: 12px; font-size: 14px; color: var(--muted); }
.hs-empty a { color: var(--primary-ink); }
.hs-all { padding: 10px; font-size: 13px; font-weight: 500; color: var(--primary-ink); border-top: 1px solid var(--line); margin-top: 4px; cursor: pointer; }
mark { background: var(--primary-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.card.start { background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.card.start .ib { margin-bottom: 10px; }
.help-sec { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); transition: border-color .15s; }
.help-sec:hover { border-color: var(--primary-ink); color: var(--ink); }
.help-sec b { display: block; font-size: 15px; font-weight: 600; }
.help-sec .small { display: block; font-size: 12.5px; }
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.help-aside { position: sticky; top: 90px; }
.guide-toc { position: sticky; top: 90px; }
.guide-toc nav { display: grid; gap: 6px; font-size: 13px; }
.help-aside .card b { display: block; font-size: 15px; }
.help-aside .card p { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.help-rel { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 14px; }
.help-arts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.help-arts li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 6px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.help-arts li b { font-weight: 600; font-size: 15px; }
.help-arts li.planned b { color: var(--muted); font-weight: 400; }
.help-arts li.ready a:hover b { color: var(--primary-ink); }
.help-arts li:target, .help-arts li.is-target { background: var(--primary-soft); border-radius: 8px; }
.faq-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.faq-tools .mi-filter { flex-wrap: wrap; }
.faq-group { margin-top: 36px; }
.faq-group .faq { border-top: 0; }
.sr { list-style: none; padding: 0; margin: 28px 0 0; max-width: 820px; }
.sr li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.sr-title { display: inline-block; font-size: 18px; font-weight: 500; margin: 4px 0 6px; color: var(--primary-ink); }
.sr-title:hover { text-decoration: underline; }
.helpful { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 48px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.helpful b { margin-right: 6px; font-size: 15px; }
.helpful p { margin: 0 !important; font-size: 15px; }
@media (max-width: 860px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-aside { position: static; }
  .hs-kbd { display: none; }
  .hs-field .btn { padding: 9px 12px; }
  .help-arts li { grid-template-columns: 1fr auto; }
  .help-arts li .num { grid-column: 1 / -1; }
}

/* Integrations */
.int-status { display: flex; gap: 20px; margin-top: 22px; font-size: 14px; font-weight: 500; }
.int-status span { display: inline-flex; align-items: center; gap: 8px; }
.dot-live, .dot-soon { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-live { background: #2e9e57; }
.dot-soon { background: #e0a040; }
.int-live { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.int-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; background: var(--card); box-shadow: 0 12px 36px -24px rgba(28, 27, 26, .25); display: flex; flex-direction: column; scroll-margin-top: 90px; }
.int-card-hd { display: flex; align-items: center; gap: 16px; }
.int-does { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.int-does > div { display: flex; gap: 12px; font-size: 14px; color: var(--muted); }
.int-does .ok { color: var(--ok-fg); flex: none; margin-top: 1px; }
.int-does b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.int-meta { margin: 22px 0 0; display: grid; gap: 14px; background: var(--surface); border-radius: 10px; padding: 16px 18px; }
.int-meta dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.int-meta dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.int-meta ul { margin: 0; padding-left: 18px; }
.int-next { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; }
.int-up { columns: 3; column-gap: 32px; margin-top: 32px; }
.int-grp { break-inside: avoid; margin-bottom: 28px; }
.int-grp-hd { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.int-grp-hd svg { color: var(--primary-ink); }
.int-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.int-item b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.int-item p { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
@media (max-width: 1000px) { .int-up { columns: 2; } }
@media (max-width: 860px) { .int-live { grid-template-columns: 1fr; } .int-card { padding: 22px; } }
@media (max-width: 600px) { .int-up { columns: 1; } }

.notice-soon { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: var(--warn-bg); }
.notice-soon p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.help-arts li.planned a b { color: var(--ink-2); }
.help-arts li a:hover b { color: var(--primary-ink) !important; }
@media (max-width: 860px) { .notice-soon { grid-template-columns: 1fr; } }

/* Support level on pricing cards, and the support-by-plan table */
.plan-support { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 10px 12px; border-radius: 8px; background: var(--surface); margin-bottom: 18px; }
.plan-support span { color: var(--muted); }
.plan.featured .plan-support { background: rgba(255, 255, 255, .08); color: var(--on-dark); }
.plan.featured .plan-support span { color: var(--on-dark-muted); }
.sup-table { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.sup-row { display: grid; grid-template-columns: 1fr 1.1fr .9fr 2.4fr; gap: 16px; padding: 14px 20px; font-size: 14px; border-top: 1px solid var(--line); align-items: center; }
.sup-row span { display: flex; align-items: center; gap: 6px; }
.sup-head { border-top: 0; background: var(--surface); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
@media (max-width: 860px) {
  .sup-row { grid-template-columns: 1fr 1fr; }
  .sup-head { display: none; }
  .sup-row span:last-child { grid-column: 1 / -1; }
}

/* Careers */
.roles { margin-top: 28px; border-top: 1px solid var(--line); }
.role { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.role b { display: block; font-size: 17px; font-weight: 600; }
.role .small { display: block; margin-top: 2px; }
.roles-empty { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 28px; padding: 24px; }
.roles-empty b { font-size: 17px; }
.plan .price-text { font-size: 26px; line-height: 1.2; padding-top: 6px; }

/* System status */
.status-dot.t-warn { background: #e0a040; } .status-dot.t-bad { background: #c0392b; } .status-dot.t-info { background: var(--primary-ink); }
.st-banner { display: flex; gap: 16px; align-items: center; padding: 22px 24px; border-radius: var(--radius-lg); }
.st-banner b { font-size: 20px; font-weight: 600; }
.st-banner p { font-size: 13.5px; margin-top: 2px; opacity: .85; }
.st-banner.t-ok { background: var(--ok-bg); color: var(--ok-fg); }
.st-banner.t-warn { background: var(--warn-bg); color: var(--warn-fg); }
.st-banner.t-bad { background: var(--bad-bg); color: var(--bad-fg); }
.st-banner.t-info { background: var(--primary-soft); color: var(--primary-ink); }
.st-block { margin-top: 44px; }
.st-list { list-style: none; padding: 0; margin: 16px 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.st-list li { padding: 16px 20px; border-top: 1px solid var(--line); }
.st-list li:first-child { border-top: 0; }
.st-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.st-row b { display: block; font-size: 15px; font-weight: 600; }
.st-row .small { display: block; font-size: 13px; }
.st-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.st-pill i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.st-pill.t-ok { color: var(--ok-fg); } .st-pill.t-warn { color: var(--warn-fg); } .st-pill.t-bad { color: var(--bad-fg); } .st-pill.t-info { color: var(--primary-ink); }
.st-hist { margin-top: 12px; }
.st-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 30px; }
.st-bars i { border-radius: 2px; background: #3fb96b; }
.st-bars i.t-warn { background: #e0a040; } .st-bars i.t-bad { background: #c0392b; } .st-bars i.t-info { background: var(--primary-dark); }
.st-hist-ft { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted-2); margin-top: 6px; }
.st-inc { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--card); margin-top: 14px; }
.st-inc-hd { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.st-inc-hd b { font-size: 16px; font-weight: 600; }
.st-updates { list-style: none; padding: 0; margin: 14px 0 0; border-left: 2px solid var(--line); }
.st-updates li { padding: 0 0 12px 16px; position: relative; }
.st-updates li::before { content: ''; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-2); }
.st-when { font-size: 12px; font-weight: 600; color: var(--muted); }
.st-updates p { font-size: 14px; margin-top: 2px; }
@media (max-width: 600px) { .st-row { flex-direction: column; align-items: flex-start; gap: 6px; } .st-bars { height: 24px; gap: 1px; } .st-hist-ft span:nth-child(2) { display: none; } }
@media (max-width: 1140px) {
  .hd-left { gap: 14px; }
  .nb { padding: 8px 8px; }
  .hd-ctas { gap: 8px; }
  .hd-ctas .btn { padding: 8px 12px; }
}
.trial-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; padding: 12px 16px; border-radius: 10px; background: var(--primary-soft); color: var(--ink-2); font-size: 14px; max-width: 760px; }
.trial-note svg { color: var(--primary-ink); flex: none; }
.trial-note > span:nth-child(2) { flex: 1; min-width: 220px; }
.trial-note .ac { font-weight: 600; white-space: nowrap; }
.trial-note:hover { color: var(--ink); }

/* Country switcher and geo suggestion (components/CountrySwitcher.jsx, CountryBanner.jsx) */
.cs { position: relative; }
.cs-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 600 13px var(--font); cursor: pointer; }
.cs-btn:hover { border-color: var(--ink); }
.cs-footer .cs-btn { background: transparent; color: inherit; border-color: currentColor; opacity: .85; }
.cs-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-panel); }
.cs-footer .cs-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.cs-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink); font: 500 14px var(--font); }
.cs-menu button:hover, .cs-menu button.on { background: var(--surface-2); }
.cs-menu button.on { font-weight: 600; }
.cs-name { display: flex; flex-direction: column; }
.cs-name small { font-size: 12px; color: var(--muted); font-weight: 400; }
.geo-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--primary-wash); border-bottom: 1px solid var(--primary-soft); font-size: 14px; color: var(--ink); }
/* Switcher inside the mobile drawer: full width, menu opens in the flow */
.drawer .cs { margin: 12px 0 4px; }
.drawer .cs-btn { width: 100%; justify-content: space-between; height: 44px; }
.drawer .cs-menu { position: static; margin-top: 6px; box-shadow: none; }

/* ==========================================================================================================
   Image-led design (components/media.jsx). Big rounded media surfaces, photos that carry the story, text set
   on images with a gradient, and frosted UI chips floating over photos. Until photography lands, every photo
   slot shows an art-directed placeholder in its tone with the brief, so layouts read as they will with images.
   ========================================================================================================== */
:root {
  --r-media: 28px;
  --r-media-sm: 20px;
  --tint-rose: #fff0f2; --tint-rose-2: #ffe1e7;
  --tint-sand: #f6efe6; --tint-sand-2: #ecdfcf;
  --tint-sage: #edf2ea; --tint-sage-2: #dae5d4;
  --tint-sky: #edf2f8; --tint-sky-2: #dbe6f2;
  --tint-lilac: #f1eef8; --tint-lilac-2: #e3ddf2;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --tint-rose: #2a1d20; --tint-rose-2: #3a2328; --tint-sand: #26221d; --tint-sand-2: #332d26; --tint-sage: #1e241e; --tint-sage-2: #283028;
  --tint-sky: #1c2128; --tint-sky-2: #252d37; --tint-lilac: #221f2a; --tint-lilac-2: #2d2838;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --tint-rose: #2a1d20; --tint-rose-2: #3a2328; --tint-sand: #26221d; --tint-sand-2: #332d26; --tint-sage: #1e241e; --tint-sage-2: #283028;
  --tint-sky: #1c2128; --tint-sky-2: #252d37; --tint-lilac: #221f2a; --tint-lilac-2: #2d2838;
} }

/* ── Photo ─────────────────────────────────────────────────────────────── */
.photo { position: relative; overflow: hidden; border-radius: var(--r-media-sm); isolation: isolate; background: #cbb8a5; }
.photo-fill { position: absolute; inset: 0; border-radius: inherit; }
.photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-ph { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; }
/* Tonal scene: base gradient, a window of light, a soft figure, film grain. Reads as "photo goes here", not as a grey box. */
.photo-ph::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 22% 26% at 62% 44%, var(--ph-figure) 0 60%, transparent 62%),
    radial-gradient(ellipse 34% 42% at 62% 96%, var(--ph-figure) 0 58%, transparent 60%),
    radial-gradient(ellipse 18% 22% at 30% 52%, var(--ph-figure-2) 0 60%, transparent 62%),
    radial-gradient(ellipse 28% 38% at 30% 100%, var(--ph-figure-2) 0 58%, transparent 60%),
    radial-gradient(circle at 78% 18%, var(--ph-light), transparent 46%),
    linear-gradient(160deg, var(--ph-a), var(--ph-b) 55%, var(--ph-c));
  filter: blur(18px) saturate(1.05); transform: scale(1.12); }
.photo-ph::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .22; mix-blend-mode: overlay; }
.photo[data-tone="warm"]  { --ph-a: #f1dcc6; --ph-b: #c99a72; --ph-c: #7b4d33; --ph-light: rgba(255, 244, 222, .75); --ph-figure: rgba(74, 44, 30, .55); --ph-figure-2: rgba(120, 72, 48, .45); }
.photo[data-tone="sage"]  { --ph-a: #e6ecdc; --ph-b: #9fb394; --ph-c: #4c6450; --ph-light: rgba(255, 255, 238, .7); --ph-figure: rgba(40, 58, 42, .5); --ph-figure-2: rgba(70, 94, 72, .4); }
.photo[data-tone="dusk"]  { --ph-a: #3c2f52; --ph-b: #7a4466; --ph-c: #d3796f; --ph-light: rgba(255, 196, 160, .55); --ph-figure: rgba(24, 16, 34, .6); --ph-figure-2: rgba(50, 30, 60, .5); }
.photo[data-tone="night"] { --ph-a: #2b2a2e; --ph-b: #1b1a1d; --ph-c: #3c2c26; --ph-light: rgba(255, 186, 140, .35); --ph-figure: rgba(0, 0, 0, .55); --ph-figure-2: rgba(70, 52, 44, .5); }
.photo[data-tone="coral"] { --ph-a: #ffe2e6; --ph-b: #ff8ea0; --ph-c: #c81345; --ph-light: rgba(255, 246, 238, .8); --ph-figure: rgba(110, 22, 49, .45); --ph-figure-2: rgba(160, 40, 70, .38); }
.photo[data-tone="sky"]   { --ph-a: #eef4fa; --ph-b: #a9c3dc; --ph-c: #4f6f93; --ph-light: rgba(255, 255, 255, .85); --ph-figure: rgba(32, 48, 70, .45); --ph-figure-2: rgba(60, 84, 110, .38); }
.photo[data-tone="sand"]  { --ph-a: #faf4ec; --ph-b: #e7d6c1; --ph-c: #b99673; --ph-light: rgba(255, 255, 255, .85); --ph-figure: rgba(110, 80, 56, .4); --ph-figure-2: rgba(150, 112, 82, .32); }
.photo-tag { position: relative; z-index: 1; margin: 14px; display: inline-flex; gap: 7px; align-items: flex-start; max-width: min(340px, calc(100% - 28px));
  padding: 7px 10px; border-radius: 10px; background: rgba(20, 18, 16, .42); color: rgba(255, 255, 255, .92); font-size: 11.5px; line-height: 1.35;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.photo-tag svg { flex: none; margin-top: 1px; opacity: .85; }
.photo-tag span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Device ────────────────────────────────────────────────────────────── */
.dev { position: relative; background: var(--card); box-shadow: 0 30px 70px -30px rgba(28, 27, 26, .45), 0 0 0 1px rgba(28, 27, 26, .06); }
.dev-browser { border-radius: 14px; overflow: hidden; }
.dev-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.dev-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.dev-url { margin-left: 14px; height: 16px; flex: 0 1 260px; border-radius: 8px; background: var(--card); }
.dev-browser .dev-screen { aspect-ratio: 16 / 10; position: relative; }
.dev-phone { width: 100%; max-width: 280px; aspect-ratio: 9 / 19; border-radius: 42px; padding: 11px; background: #161514; }
.dev-phone .dev-screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: var(--card); }
.dev-notch { position: absolute; z-index: 2; top: 20px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 99px; background: #161514; }
.dev-img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.dev-ph { position: absolute; inset: 0; background: var(--card); display: flex; flex-direction: column; justify-content: flex-end; }
.dev-ui { position: absolute; inset: 0; display: flex; gap: 14px; padding: 16px; }
.dev-phone .dev-ui { padding: 54px 14px 14px; }
.dev-side { width: 22%; border-radius: 8px; background: var(--surface-2); }
.dev-rows { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.dev-rows i { height: 34px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.dev-rows i:first-child { height: 20px; width: 46%; background: var(--line); border: 0; }
.dev-rows i:nth-child(3) { border-left: 3px solid var(--primary); }
.dev-tag { position: relative; z-index: 1; margin: 12px; display: inline-flex; gap: 7px; align-items: flex-start; align-self: flex-start; max-width: calc(100% - 24px);
  padding: 7px 10px; border-radius: 10px; background: var(--dk); color: var(--on-dark); font-size: 11.5px; line-height: 1.35; opacity: .92; }
.dev-tag svg { flex: none; margin-top: 1px; color: var(--primary); }
.dev-tag span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Glass chips ───────────────────────────────────────────────────────── */
.glass { border-radius: 18px; padding: 16px 18px; background: rgba(255, 255, 255, .78); color: #1c1b1a; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); font-size: 13px; }
.glass-dark { background: rgba(24, 22, 20, .58); color: #fff; border-color: rgba(255, 255, 255, .14); }
.glass-title { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.glass-line { display: block; margin-top: 3px; opacity: .85; }
.glass-lbl { display: block; font-size: 12.5px; opacity: .75; }
.glass-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.glass:not(.glass-dark) .glass-row { background: rgba(255, 255, 255, .6); border-color: rgba(28, 27, 26, .06); }
.glass-live { width: 14px; height: 14px; border-radius: 50%; background: #3fd37a; box-shadow: 0 0 0 6px rgba(63, 211, 122, .2); flex: none; }
.glass-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; text-align: center; }
.glass-val { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.glass--event { display: flex; gap: 14px; }
.glass-bar { flex: none; width: 4px; border-radius: 4px; background: var(--primary); }
.glass-meta { display: flex; gap: 6px; align-items: center; margin-top: 10px; opacity: .85; }

/* ── Media cards ───────────────────────────────────────────────────────── */
.mrow { display: grid; gap: 24px; }
.mrow-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mrow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcard { position: relative; display: flex; flex-direction: column; min-height: 560px; border-radius: var(--r-media); overflow: hidden; isolation: isolate;
  background: var(--tint-sand); color: var(--ink); transition: transform .25s ease, box-shadow .25s ease; }
a.mcard:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgba(28, 27, 26, .5); }
.mrow-3 .mcard { min-height: 520px; }
.mcard-hd { position: relative; z-index: 2; padding: 36px 36px 0; }
.mcard-eyebrow { display: block; font-size: 14px; font-weight: 500; opacity: .8; }
.mcard-title { margin-top: 10px; font-size: 27px; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; max-width: 520px; }
.mrow-3 .mcard-title { font-size: 23px; }
.mcard-body { margin-top: 10px; font-size: 15px; line-height: 1.5; opacity: .82; max-width: 460px; }
.mcard-cta { display: inline-flex; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.mcard-cta span { transition: transform .15s; }
a.mcard:hover .mcard-cta span { transform: translateX(3px); }
.mcard-media { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 28px 36px 0; min-height: 260px; }
.mcard-inset { position: absolute; inset: 28px 0 0; border-radius: 0; }
.mcard-dev-browser { width: 118%; margin-right: -28%; margin-bottom: -44px; }
.mcard-dev-phone { width: 62%; max-width: 250px; margin-bottom: -120px; }
.mcard-chip { position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 28px; }
.mcard-chip-dev { left: auto; right: 24px; bottom: 24px; max-width: 260px; }
.mcard-light { background: var(--surface); }
.mcard-tint { background: linear-gradient(180deg, var(--tint-rose), var(--tint-rose-2)); }
.mcard-brand { background: radial-gradient(circle at 80% 0%, #ff6b85, transparent 55%), linear-gradient(160deg, var(--primary-fill), #9e0f36); }
.mcard-dark { background: radial-gradient(circle at 85% 0%, #3a2a2e, transparent 60%), var(--dk); }
.mcard.on-dark { color: #fff; }
.mcard-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 12, 10, .72) 0%, rgba(14, 12, 10, .2) 38%, rgba(14, 12, 10, 0) 55%, rgba(14, 12, 10, .35) 100%); }
.mcard-bg .photo-tag { position: absolute; top: auto; right: 0; bottom: 0; z-index: 2; }
.mcard-bg .mcard-chip { z-index: 3; }
.mcard-bg:has(.mcard-chip) .photo-tag { bottom: auto; top: 50%; }

/* ── Showcase (text beside a tinted panel with a device bleeding off it) ── */
.show { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.show-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.show-left .show-panel { order: -1; }
.show-panel { position: relative; min-height: 520px; border-radius: var(--r-media); overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.show-panel[data-tint="rose"]  { background: radial-gradient(circle at 20% 10%, #fff, transparent 55%), linear-gradient(160deg, var(--tint-rose), var(--tint-rose-2)); }
.show-panel[data-tint="sand"]  { background: linear-gradient(160deg, var(--tint-sand), var(--tint-sand-2)); }
.show-panel[data-tint="sage"]  { background: linear-gradient(160deg, var(--tint-sage), var(--tint-sage-2)); }
.show-panel[data-tint="sky"]   { background: linear-gradient(160deg, var(--tint-sky), var(--tint-sky-2)); }
.show-panel[data-tint="lilac"] { background: linear-gradient(160deg, var(--tint-lilac), var(--tint-lilac-2)); }
.show-panel[data-tint="dark"]  { background: radial-gradient(circle at 80% 10%, #3a2a2e, transparent 60%), var(--dk); }
.show-dev-browser { position: absolute; left: 12%; top: 13%; width: 108%; }
.show-left .show-dev-browser { left: auto; right: 12%; }
.show-dev-phone { position: absolute; left: 50%; top: 9%; width: 44%; max-width: 270px; margin-left: -22%; }
.show-photo { border-radius: inherit; }
.show-chip { position: absolute; z-index: 3; left: 24px; bottom: 24px; max-width: min(340px, calc(100% - 48px)); }
.show-text .h2 { margin-top: 8px; }

/* ── Photo banner ──────────────────────────────────────────────────────── */
.pbanner { position: relative; min-height: 460px; border-radius: var(--r-media); overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; color: #fff; }
.pbanner-tall { min-height: 600px; }
.pbanner-bg::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(14, 12, 10, .72) 0%, rgba(14, 12, 10, .35) 45%, rgba(14, 12, 10, 0) 70%), linear-gradient(0deg, rgba(14, 12, 10, .6), rgba(14, 12, 10, 0) 55%); }
.pbanner-bg .photo-tag { position: absolute; right: 0; top: 0; z-index: 2; }
.pbanner-text { position: relative; z-index: 2; padding: 48px; max-width: 680px; }
.pbanner-eyebrow { font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.pbanner-title { font-size: 44px; line-height: 1.08; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.pbanner-accent { color: var(--primary); }
.pbanner-body { margin-top: 16px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 520px; }
.pbanner .actions { margin-top: 26px; }
.pbanner-chip { position: absolute; z-index: 3; right: 40px; bottom: 40px; width: 320px; }
.pbanner .btn-ghost { background: #fff; color: var(--ink); border-color: #fff; }
.pbanner .btn-ghost:hover { background: transparent; color: #fff; }
.pbanner-link { color: #fff; font-size: 14px; font-weight: 500; }
.pbanner-link:hover { color: var(--primary); }

/* ── Hero media (page heroes) ──────────────────────────────────────────── */
.hmedia { position: relative; min-height: 460px; border-radius: var(--r-media); overflow: hidden; isolation: isolate; }
.hmedia .show-dev-browser { top: 14%; left: 10%; width: 112%; }
.hmedia-photo .photo-fill { border-radius: inherit; }
.hmedia-float { position: absolute; z-index: 3; right: 24px; bottom: 24px; width: 58%; }
.hmedia-float .dev-browser .dev-screen { aspect-ratio: 16 / 11; }
.hmedia-float .dev-tag span { -webkit-line-clamp: 2; }
.hmedia .photo-tag { position: absolute; top: 0; left: 0; }

/* ── Photo-topped cards (indexes: solutions, careers teams, blog) ──────── */
.pcard { display: flex; flex-direction: column; border-radius: var(--r-media-sm); overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
a.pcard:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 24px 50px -32px rgba(28, 27, 26, .45); }
.pcard .photo { border-radius: 0; }
.pcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard-body b { font-size: 17px; font-weight: 600; }
.pcard-body p { font-size: 14px; color: var(--muted); }
.pcard-body .card-more { margin-top: auto; padding-top: 10px; }

/* Section header centred over a row of media cards */
.sec-hd-c { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.sec-hd-c .h2 { margin: 0 auto; }
.sec-hd-c p { margin: 14px auto 0; font-size: 17px; color: var(--muted); max-width: 620px; }

@media (max-width: 1000px) {
  .mrow-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrow-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .show, .show-left { grid-template-columns: 1fr; gap: 32px; }
  .show-left .show-panel { order: 0; }
}
@media (max-width: 860px) {
  .mrow-2, .mrow-3 { grid-template-columns: 1fr; }
  .mcard, .mrow-3 .mcard { min-height: 480px; }
  .mcard-hd { padding: 28px 24px 0; }
  .mcard-title, .mrow-3 .mcard-title { font-size: 23px; }
  .mcard-media { padding: 24px 24px 0; }
  .mcard-chip { left: 18px; right: 18px; bottom: 18px; }
  .show-panel { min-height: 400px; }
  .pbanner, .pbanner-tall { min-height: 520px; }
  .pbanner-text { padding: 28px 24px; }
  .pbanner-title { font-size: 32px; }
  .pbanner-chip { position: relative; right: auto; bottom: auto; width: auto; margin: 0 24px 24px; display: none; }
  .hmedia { min-height: 340px; }
  .hmedia-float { width: 76%; right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .mcard, .pcard { transition: none; } a.mcard:hover, a.pcard:hover { transform: none; } }

/* Home: the example claim card floating on its photo panel; quotes set on a photo of the provider type */
.show-card { position: absolute; z-index: 2; left: 9%; right: 9%; top: 50%; transform: translateY(-50%); box-shadow: 0 30px 60px -28px rgba(28, 27, 26, .55); border-radius: var(--radius); }
.show-card .claims { border: 0; }
.show-panel > .photo-fill .photo-tag { position: absolute; right: 0; bottom: 0; }
.quote { position: relative; overflow: hidden; isolation: isolate; }
.quote > * { position: relative; z-index: 1; }
.quote > .quote-bg { position: absolute; z-index: 0; }
.quote-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(28, 27, 26, .86) 0%, rgba(28, 27, 26, .55) 55%, rgba(110, 22, 49, .35) 100%); }
.quote-bg .photo-tag { position: absolute; right: 0; top: 0; z-index: 2; }
.mcard-quiet .mcard-title { font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: 0; }
.mrow-3 .mcard-quiet .mcard-title { font-size: 17px; }
@media (max-width: 860px) { .show-card { left: 5%; right: 5%; } }

/* Phones bleed off their card: their screenshot label sits under the notch, not at the hidden bottom */
.dev-phone .dev-ph { justify-content: flex-start; }
.dev-phone .dev-tag { margin-top: 48px; }
.dev-phone .dev-ui { padding-top: 120px; }
/* Devices bleeding off a card or panel: the screenshot label sits at the top, where it stays visible */
.mcard-dev .dev-ph, .show-dev .dev-ph { justify-content: flex-start; }
.mcard-dev .dev-tag, .show-dev .dev-tag { margin-top: 12px; }
.mcard-dev .dev-ui, .show-dev-browser .dev-ui { padding-top: 64px; }
/* A screenshot thumbnail heading a card (recommended modules): the window bleeds off a tinted header */
.pcard-dev { height: 170px; overflow: hidden; padding: 22px 0 0 22px; background: linear-gradient(160deg, var(--tint-rose), var(--tint-sand)); }
.pcard-dev .dev { box-shadow: 0 14px 30px -18px rgba(28, 27, 26, .45); }
.pcard-dev .dev-ui { padding-top: 12px; }
.pcard-dev .dev-tag { display: none; }
.pcard:nth-child(3n+2) .pcard-dev { background: linear-gradient(160deg, var(--tint-sage), var(--tint-sky)); }
.pcard:nth-child(3n) .pcard-dev { background: linear-gradient(160deg, var(--tint-lilac), var(--tint-sky)); }
.photo-lg { border-radius: var(--r-media); }
.contact-photo { margin-top: 28px; border-radius: var(--r-media-sm); }
.contact-photo .photo-tag { position: absolute; top: 0; right: 0; }
.ph-photo { border-radius: var(--r-media-sm); }
/* A dark panel with a photograph filling its right half (solution pages, "day to day") */
.dk-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: stretch; padding: 40px 40px 40px 48px; }
.dk-photo > div:first-child { padding: 12px 0; }
.dk-photo-img { min-height: 360px; border-radius: var(--r-media-sm); }
@media (max-width: 860px) { .dk-photo { grid-template-columns: 1fr; padding: 28px; } .dk-photo-img { min-height: 260px; } }

/* Blog posts written in Markdown (content/<country>/blog): what the editor can produce */
.prose-md { margin-top: 8px; }
.prose-md h3 { font-size: 20px; font-weight: 600; margin: 28px 0 8px; }
.prose-md a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose-md ol { margin: 14px 0 0; padding-left: 22px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.prose-md li + li { margin-top: 6px; }
.prose-md blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--primary); font-size: 19px; color: var(--ink); }
.prose-md img { border-radius: var(--r-media-sm); margin: 24px 0; }
.prose-md hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.prose-md code { font-size: 14px; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
.prose-md table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
.prose-md th, .prose-md td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }

/* ── Free public tools (pages/Tools.jsx) ─────────────────────────────────────────────────────────────────────────── */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tool-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tool-card { display: flex; flex-direction: column; gap: 4px; background: var(--card); transition: border-color .2s, transform .2s; }
.tool-card:hover { border-color: var(--line-2); transform: translateY(-2px); color: inherit; }
.tool-card .ib { margin-bottom: 10px; }
.tool-card-lg { padding: 26px; min-height: 210px; }
.tool-card-lg .link-arrow { margin-top: auto; padding-top: 14px; font-size: 14px; }
.tool-sample { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 10px 14px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-fg); font-size: 14px; font-weight: 500; }
.tool-note { display: block; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.tool-note svg { vertical-align: -3px; }
.tool-note.ok { background: var(--ok-bg); color: var(--ok-fg); }
.tool-note.bad { background: var(--bad-bg); color: var(--bad-fg); }
.tool-disclaimer { margin-top: 28px; font-size: 13px; color: var(--muted); max-width: 820px; }
.tool-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tool-filters .field { flex: 0 0 auto; width: auto; }
.tool-filters .field select { width: auto; }
.tool-filters .tool-q { flex: 1 1 280px; }
.tool-filters select { padding: 10px 12px; }
.tool-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tool-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tool-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tool-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.tool-table tbody tr:first-child td { border-top: 0; }
.tool-table tbody tr:hover td { background: var(--surface); }
.tool-table .num-c { text-align: right; }
.tool-table .nowrap, .nowrap { white-space: nowrap; }
.tool-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); vertical-align: 1px; }
.tool-h { margin: 36px 0 12px; }
.tool-item { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; margin-top: 8px; }
.tool-price { display: flex; flex-direction: column; gap: 2px; margin: 22px 0 20px; }
.tool-price .tnum { font-size: 40px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.tool-facts { position: sticky; top: 90px; background: var(--card); }
.tool-facts dl { display: grid; gap: 12px; margin: 0; }
.tool-facts dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tool-facts dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); text-transform: none; }
.tool-related { display: grid; gap: 6px; font-size: 13px; }
.tool-related a { color: var(--ink-2); }
.tool-changes { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.tool-faq { display: grid; gap: 16px; max-width: 760px; }
.tool-faq b { font-size: 16px; }
.tool-faq p { margin-top: 4px; color: var(--ink-2); line-height: 1.6; }
.tool-calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tool-form { display: grid; gap: 14px; background: var(--card); }
.tool-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tool-form .field > label { font-size: 13px; font-weight: 500; }
.tool-form .field { display: grid; gap: 6px; align-content: start; }
.tool-form select:disabled { opacity: .6; }
.tool-result { position: sticky; top: 90px; }
.tool-how ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.tool-receipt { background: var(--card); display: grid; gap: 4px; }
.tool-line { padding: 14px 0; border-bottom: 1px dashed var(--line-2); display: grid; gap: 4px; }
.tool-line-hd { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.tool-line-hd .tnum { font-weight: 600; font-size: 16px; }
.tool-seg { padding-left: 10px; border-left: 2px solid var(--line); }
.tool-check { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-fg); }
.tool-check.fail { background: var(--bad-bg); color: var(--bad-fg); }
.tool-noteline { color: var(--ink-2); }
.tool-total { padding-top: 14px; }
.tool-total .tnum { font-size: 26px; color: var(--ink); }
.tool-mmm { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tool-mmm.mmm-1, .tool-mmm.mmm-2 { background: var(--ok-bg); color: var(--ok-fg); }
.tool-mmm.mmm-6 { background: var(--warn-bg); color: var(--warn-fg); }
.tool-mmm.mmm-7 { background: var(--bad-bg); color: var(--bad-fg); }
.tool-mmm-key { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 20px; font-size: 14px; color: var(--ink-2); }
.tool-mmm-key > div { display: flex; gap: 10px; align-items: center; }
.tool-feed { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.tool-sub { position: sticky; top: 90px; background: var(--card); }
.tool-sub p { margin-top: 0; }
.tool-kinds { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.tool-kinds legend { margin-bottom: 6px; }
.tool-kinds label { display: flex; gap: 8px; align-items: center; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tool-chip { font: 500 13px var(--font); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); cursor: pointer; }
.tool-chip.on { background: var(--ink); border-color: var(--ink); color: var(--card); }
.tool-post { padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.tool-post:first-of-type { border-top: 0; padding-top: 4px; }
.tool-post h2 { margin: 8px 0 8px; }
.tool-post > p { color: var(--ink-2); line-height: 1.6; margin-top: 6px; }
.tool-post-meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.tool-kind { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.tool-kind.k-price_change { background: var(--primary-soft); color: var(--primary-ink); }
.tool-kind.k-provider_alert { background: var(--warn-bg); color: var(--warn-fg); }
.tool-kind.k-product { background: var(--ok-bg); color: var(--ok-fg); }
@media (max-width: 900px) {
  .tool-item, .tool-calc, .tool-feed { grid-template-columns: 1fr; }
  .tool-facts, .tool-result, .tool-sub { position: static; }
}
@media (max-width: 560px) {
  .tool-row3 { grid-template-columns: 1fr; }
  .tool-price .tnum { font-size: 32px; }
}

/* Free tools, phase 2 (pages/Tools2.jsx) */
.tool-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--muted); cursor: pointer; }
.tool-x:hover { color: var(--bad-fg); border-color: var(--bad-fg); }
.tool-rowx { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; }
.tool-sup { position: relative; display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.tool-sup > .tool-x { position: absolute; top: 10px; right: 10px; }
.tool-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.tool-pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.tool-pill.bad { background: var(--bad-bg); color: var(--bad-fg); }
.tool-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); }
.tool-kv .neg { color: var(--bad-fg); }
.tool-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.tool-bar i { display: block; height: 100%; background: var(--ok-fg); border-radius: 99px; }
.tool-bar i.bad { background: var(--bad-fg); }
.tool-inv input { font: 14px var(--font); color: var(--ink); border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 8px; background: var(--card); width: 100%; min-width: 0; }
.tool-inv td { vertical-align: middle; padding: 8px 8px; }
.tool-inv tr.bad > td:first-child { box-shadow: inset 3px 0 0 var(--bad-fg); }
.tool-inv tr.ok > td:first-child { box-shadow: inset 3px 0 0 var(--ok-fg); }
.tool-inv tbody tr.tool-inv-res td { border-top: 0; padding-top: 0; }
.tool-inv tbody tr.tool-inv-res .tool-check { margin-top: 6px; }
.tool-check-row { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; flex-wrap: wrap; }
.tool-due { font-size: 15px; color: var(--ink-2); }
.tool-due b { color: var(--ink); }
.tool-hol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tool-hol-card { background: var(--card); display: grid; gap: 10px; align-content: start; }
.tool-hol-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.tool-hol-card ul .tnum { display: inline-block; min-width: 92px; color: var(--muted); }
.tool-hol-years { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.tool-ev { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.tool-ev p { color: var(--ink-2); line-height: 1.6; margin-top: 4px; }
.tool-ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 76px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary-ink); }
.tool-ev-date .tnum { font-size: 28px; font-weight: 700; line-height: 1; }
.tool-ev-date span:last-child { font-size: 12px; font-weight: 600; margin-top: 4px; }
@media (max-width: 560px) {
  .tool-rowx { grid-template-columns: 1fr; }
  .tool-ev { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
}

/* Free tools, phase 3: code blocks and the embeddable price lookup (/embed/price-lookup) */
.tool-code { margin: 12px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--ink); color: var(--card); font-size: 13px; overflow-x: auto; white-space: pre; }
.tool-code code { background: none; padding: 0; color: inherit; }
.emb { font: 14px var(--font); color: #1c1b1a; background: #fff; padding: 14px; border: 1px solid #ece8e2; border-radius: 12px; }
.emb-dark { color: #f3efe9; background: #1c1b1a; border-color: #34312e; }
.emb-q { width: 100%; font: 15px var(--font); padding: 10px 12px; border: 1px solid #d9d4cd; border-radius: 8px; background: inherit; color: inherit; }
.emb-sample { margin-top: 8px; font-size: 12px; color: #8a4b00; background: #fdeede; padding: 6px 10px; border-radius: 6px; }
.emb-list { list-style: none; margin: 10px 0 0; padding: 0; }
.emb-list a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid rgba(127,127,127,.2); color: inherit; text-decoration: none; }
.emb-list li:first-child a { border-top: 0; }
.emb-list a:hover .emb-name { color: #c81345; }
.emb-name small { display: block; font-size: 11px; opacity: .65; margin-top: 2px; }
.emb-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emb-none { padding: 10px 2px; opacity: .7; }
.emb-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11px; opacity: .8; flex-wrap: wrap; }
.emb-foot a { color: #c81345; }
.tool-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .tool-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Header (components/Header.jsx): utility strip, nav island and the deck ─────────────────────────────────────── */
.ut { background: var(--dk); color: var(--on-dark); font-size: 12.5px; }
.ut-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 38px; }
.ut a { color: var(--on-dark); }
.ut a:hover { color: var(--primary); }
.ut-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-note .new { color: var(--primary); font-weight: 600; margin-right: 8px; }
.ut-links { display: flex; align-items: center; gap: 18px; flex: none; }
.ut-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ccf91; margin-right: 6px; box-shadow: 0 0 0 3px rgba(60, 207, 145, .18); }
.ut .theme-btn { width: 28px; height: 28px; background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, .25); }
.ut .theme-btn:hover { border-color: var(--on-dark); }
.cs-utility .cs-btn { height: 28px; background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, .25); font-size: 12px; }
.cs-utility .cs-btn:hover { border-color: var(--on-dark); }

.hd-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.hd-bar .logo { justify-self: start; }
.hd-ctas { display: flex; align-items: center; gap: 10px; justify-self: end; }
.isl { justify-self: center; position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.isl-b { position: relative; z-index: 1; font: 600 14px var(--font); color: var(--ink-2); background: transparent; border: 0; border-radius: 999px; padding: 8px 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.isl-b:hover, .isl-b.on { color: var(--ink); }
.isl-b svg { transition: transform .2s; opacity: .7; }
.isl-b.on svg { transform: rotate(180deg); }
.isl-glide { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2);
  box-shadow: 0 2px 6px rgba(28, 27, 26, .08); transition: transform .28s cubic-bezier(.3, .7, .2, 1), width .28s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }

.nd-wrap { position: absolute; left: 0; right: 0; top: 100%; padding: 12px var(--gutter) 0; pointer-events: none; }
.nd-notch { position: absolute; top: 5px; width: 15px; height: 15px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg); z-index: 2; transition: left .25s cubic-bezier(.3, .7, .2, 1); }
.nd { pointer-events: auto; position: relative; max-width: 1120px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-panel); display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; overflow: hidden; animation: ndIn .2s cubic-bezier(.3, .7, .2, 1); }
@keyframes ndIn { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.nd-rail { background: var(--surface); border-right: 1px solid var(--line); padding: 14px; display: grid; gap: 4px; align-content: start; }
.nd-tab { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 12px; cursor: pointer; font: 500 14px var(--font); color: var(--ink-2); transition: background .15s, box-shadow .15s; }
.nd-tab:hover { background: var(--surface-2); }
.nd-tab.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(28, 27, 26, .06); }
.nd-tab-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); }
.nd-tab.on .nd-tab-ic { background: var(--primary-soft); color: var(--primary-ink); }
.nd-tab-n { font-size: 11px; font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.nd-list { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: start; max-height: min(64vh, 520px); overflow-y: auto; }
.nd-list[data-n="1"], .nd-list[data-n="2"], .nd-list[data-n="3"], .nd-list[data-n="4"] { grid-template-columns: 1fr; }
.nd-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.nd-item:hover, .nd-item.hot { background: var(--surface); border-color: var(--line); color: inherit; }
.nd-item-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.nd-item-t .soon { margin-left: 8px; }
.nd-item.hot .nd-item-t { color: var(--primary-ink); }
.nd-item-s { font-size: 12.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nd-prev { padding: 16px; border-left: 1px solid var(--line); background: linear-gradient(180deg, var(--primary-wash), var(--card) 70%); display: flex; flex-direction: column; gap: 8px; }
.nd-prev-media { position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.nd-prev-media .photo { position: absolute; inset: 0; border-radius: 0; }
.nd-prev-dev { width: 88%; transform: translateY(14%); }
.nd-prev-dev.is-phone { width: 46%; transform: translateY(18%); }
.nd-prev-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--card); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(28, 27, 26, .08); }
.nd-prev-t { font-size: 16px; font-weight: 600; line-height: 1.3; }
.nd-prev p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.nd-prev-go { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--primary-ink); }
@media (max-width: 1180px) { .nd { grid-template-columns: 210px minmax(0, 1fr) 250px; } .isl-b { padding: 8px 11px; } }
@media (max-width: 1060px) { .nd-prev { display: none; } .nd { grid-template-columns: 210px minmax(0, 1fr); } }
@media (max-width: 960px) {
  .hd-bar { display: flex; justify-content: space-between; }
  .ut-in { min-height: 34px; }
  .drawer .dutil { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .isl-glide, .nd-notch, .nd { transition: none; animation: none; } }

/* The journey's participant photo (components/HeroJourney.jsx) */
.jx-wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.jx-photo { position: relative; margin: 0; border-radius: var(--r-media-sm); overflow: hidden; min-height: 420px; background: var(--surface-2); }
.jx-photo-l { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.jx-photo-l.on { opacity: 1; }
.jx-photo-l .photo { position: absolute; inset: 0; border-radius: 0; }
.jx-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 18px 34px; display: grid; gap: 4px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3;
  background: linear-gradient(180deg, transparent, rgba(20, 18, 16, .78)); }
.jx-photo-tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #ffd0da; }
.jx-dots { position: absolute; left: 18px; bottom: 14px; display: flex; gap: 6px; }
.jx-dots i { width: 18px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); transition: background .3s, width .3s; }
.jx-dots i.on { width: 30px; background: #fff; }
@media (max-width: 860px) { .jx-wrap { grid-template-columns: 1fr; } .jx-photo { min-height: 0; aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .jx-photo-l { transition: none; } }
.jx-photo .photo-ph { align-items: flex-start; justify-content: flex-start; }

/* Product and solution imagery (components/Shots.jsx) */
.shots { display: grid; gap: 20px; margin-top: 36px; }
.shots-browser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shots-phone { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 980px; margin-left: auto; margin-right: auto; }
.shot { margin: 0; display: grid; gap: 10px; }
.shot figcaption { font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: center; }
.shots-phone .dev-phone { width: 100%; max-width: 220px; justify-self: center; }
.mapp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 48px; border-radius: var(--r-media); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mapp-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 12px; background: var(--ink); color: var(--card); font-weight: 600; font-size: 16px; line-height: 1.1; min-width: 168px; }
.store:hover { color: var(--card); opacity: .9; }
.store small { display: block; font-size: 10.5px; font-weight: 500; opacity: .8; letter-spacing: .02em; }
.store-soon { background: transparent; color: var(--ink); border: 1px dashed var(--line-2); cursor: default; }
.store-soon small { color: var(--warn-fg); opacity: 1; font-weight: 600; text-transform: uppercase; }
.mapp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-media-sm); padding: 28px; }
.mapp-steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.mapp-steps li { display: flex; gap: 14px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.mapp-steps .num { flex: none; }
.inprac { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-top: 36px; }
.inprac .photo { aspect-ratio: 4 / 5; border-radius: var(--r-media-sm); }
.inprac-0 { aspect-ratio: auto !important; }
@media (max-width: 860px) {
  .shots-phone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots-browser { grid-template-columns: 1fr; }
  .mapp { grid-template-columns: 1fr; padding: 28px 20px; }
    .inprac { grid-template-columns: 1fr 1fr; }
  .inprac-0 { grid-column: 1 / -1; aspect-ratio: 16 / 9 !important; }
}

/* Comparison pages (pages/Compare.jsx) */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-media-sm); background: var(--card); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.cmp th, .cmp td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: center; vertical-align: middle; }
.cmp thead th { border-top: 0; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--surface); }
.cmp tbody th { text-align: left; font-weight: 500; color: var(--ink); width: 30%; }
.cmp .ours { background: var(--primary-wash); }
.cmp thead th.ours { color: var(--primary-ink); background: var(--primary-soft); font-size: 14px; }
.cmp-yes { color: var(--ok-fg); display: inline-flex; }
.cmp-yes.ours { color: var(--primary-ink); }
.cmp-no { color: var(--muted-2); font-size: 18px; }
.cmp-txt { color: var(--ink-2); font-size: 13px; }
.cmp-src { display: block; font-size: 11px; color: var(--primary-ink); margin-top: 4px; }
/* Phones and small tablets: the drawer carries the nav, calls to action, site links and country (after the rules above). */
@media (max-width: 960px) {
  .isl, .ut-links, .hd-ctas .hide-m { display: none; }
  .ut-note { white-space: normal; padding: 6px 0; }
}
.ut-login { display: none; }
@media (max-width: 960px) {
  .ut-login { display: inline-flex; flex: none; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); font-weight: 600; }
  .ut-note { font-size: 12px; line-height: 1.35; }
}