/* Layout concept: the logo's four stepped bars are the four risk bands. They open out on the home page
   into the band ladder, and the plan rows step the same way. Everything else stays quiet so the
   example card and its band colours carry the page. Band colours match the drawn product screens. */
:root {
  color-scheme: light;
  --ink: #10292e;
  --ink-soft: #46595d;
  --paper: #f3f6f5;
  --white: #ffffff;
  --line: #cfdad8;
  --brand: #0f766e;
  --brand-deep: #0b5a54;
  --on-ink: #e9f1ef;
  --on-ink-soft: #b4c7c4;
  --on-ink-brand: #7fdccf;

  --low-bg: #d9f2e3; --low-fg: #14532d;
  --med-bg: #fdf0c4; --med-fg: #674b00;
  --high-bg: #fbdcc2; --high-fg: #7c2d0a;
  --sev-bg: #b42318; --sev-fg: #ffffff;
  --none-bg: #e4e7eb; --none-fg: #323f4b;
  --note-bg: #fff4d1; --note-fg: #4d3a00;

  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --t-sm: .875rem; --t-base: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.625rem;
  --t-2xl: clamp(1.75rem, 4vw, 2.5rem);
  --t-3xl: clamp(2.375rem, 6.2vw, 4.25rem);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --step: 7%;
}
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/schibsted-grotesk.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
/* Letters Czech and Polish need, such as ř and ł, are in separate files */
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/schibsted-grotesk-latin-ext.woff2) format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-ext.woff2) format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-base)/1.55 var(--body); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.02em; hyphens: auto; overflow-wrap: break-word; }
.cover th, .cover td, .seg label { hyphens: auto; overflow-wrap: break-word; }
.plan h2 { hyphens: none; }
h1 { font-size: var(--t-3xl); font-weight: 800; }
h2 { font-size: var(--t-2xl); font-weight: 700; }
h3 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0; }
a { color: var(--brand-deep); text-underline-offset: .15em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: 1120px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.wrap-narrow { max-width: 760px; }
.label { font: 400 var(--t-sm)/1.3 var(--mono); letter-spacing: .02em; color: var(--brand-deep); }
.lead { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-soft); max-width: 58ch; }
.prose { max-width: 65ch; }
.fine { font-size: var(--t-sm); color: var(--ink-soft); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: var(--white); padding: .5rem .75rem; }

/* Review strip, removed for launch */
.draft { background: var(--note-bg); color: var(--note-fg); font-size: var(--t-sm); padding-block: .4rem; }

/* Language switcher: every language in its own name */
.lang-nav { background: var(--white); font-size: var(--t-sm); border-bottom: 1px solid var(--line); }
.lang-nav .wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .15rem .9rem; padding-block: .3rem; }
.lang-nav a { color: var(--ink-soft); text-decoration: none; padding-block: .25rem; min-height: 24px; }
.lang-nav a:hover { color: var(--ink); text-decoration: underline; }
.lang-nav a[aria-current] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }

/* Header */
.site-head { background: var(--white); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font: 800 1.125rem/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.logo svg { width: 30px; height: 30px; flex: none; }
.site-nav { display: flex; align-items: center; gap: 1.1rem; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; padding-block: .35rem; }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }

/* Buttons */
.btn { display: inline-block; font: 700 1rem/1.2 var(--display); text-decoration: none; padding: .8rem 1.15rem; border-radius: 6px; border: 2px solid transparent; text-align: center; }
.btn-main { background: var(--brand); color: var(--white); }
.btn-main:hover { background: var(--brand-deep); color: var(--white); }
.btn-on-ink { background: var(--on-ink-brand); color: var(--ink); }
.btn-on-ink:hover { background: var(--white); color: var(--ink); }
.btn-line-on-ink { border-color: var(--on-ink-soft); color: var(--on-ink); }
.btn-line-on-ink:hover { border-color: var(--white); color: var(--white); }
.btn[disabled] { background: var(--none-bg); color: var(--none-fg); border-color: var(--none-bg); cursor: not-allowed; }

/* Hero */
.hero { background: var(--ink); color: var(--on-ink); padding-block: clamp(2.5rem, 7vw, 5rem) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.hero-copy { display: grid; gap: 1.25rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.hero .label { color: var(--on-ink-brand); }
.hero .lead { color: var(--on-ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-note { font-size: var(--t-sm); color: var(--on-ink-soft); }
.hero-card { margin: 0 0 clamp(2.5rem, 6vw, 5rem); display: grid; gap: .6rem; }
.hero-card figcaption { font-size: var(--t-sm); color: var(--on-ink-soft); }

/* The product card, as drawn in the journeys */
.card { background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 40px -22px rgba(16, 41, 46, .55); font-size: .9375rem; line-height: 1.45; }
.card-rec { padding: .85rem 1rem .75rem; border-bottom: 1px solid var(--line); background: #f8fafa; border-radius: 8px 8px 0 0; }
.card-rec strong { display: block; font-family: var(--display); font-size: 1.0625rem; }
.card-rec span { font: 400 .8125rem/1.3 var(--mono); color: var(--ink-soft); }
.card-body { padding: .85rem 1rem 1rem; display: grid; gap: .8rem; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.card-name { font: 700 .9375rem/1 var(--display); }
.card .card-h { margin: 0 0 .15rem; font: 700 .75rem/1.3 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.src { display: block; font: 400 .75rem/1.4 var(--mono); color: var(--ink-soft); margin-top: .15rem; }
.card .fine { font-size: .8125rem; }
.card-link { color: var(--brand-deep); text-decoration: underline; }
.chip { display: inline-block; padding: .08rem .55rem; border-radius: 99px; font: 700 .8125rem/1.5 var(--body); white-space: nowrap; }
.chip-low { background: var(--low-bg); color: var(--low-fg); }
.chip-med { background: var(--med-bg); color: var(--med-fg); }
.chip-high { background: var(--high-bg); color: var(--high-fg); }
.chip-sev { background: var(--sev-bg); color: var(--sev-fg); }

/* Sections */
.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band-white { background: var(--white); border-block: 1px solid var(--line); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink .lead, .band-ink .fine { color: var(--on-ink-soft); }
.band-ink .label { color: var(--on-ink-brand); }
.sec-head { display: grid; gap: .6rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); max-width: 720px; }

/* Steps: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.steps li { display: grid; gap: .45rem; align-content: start; position: relative; }
.stepno { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--white); font: 800 1.125rem/1 var(--display); margin-bottom: .5rem; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--paper); }
.step-act .stepno { background: var(--sev-bg); }
/* The joining line: from each circle to the next one */
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.375rem; left: 2.75rem; right: -1.75rem; border-top: 2px dashed var(--brand); opacity: .55; }

/* Band ladder */
.ladder { display: grid; gap: .5rem; }
.rung { padding: 1rem 1.15rem; border-radius: 6px; display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: .25rem 1rem; }
.rung h3 { font-size: var(--t-xl); }
.rung p { max-width: 70ch; }
.rung-low { background: var(--low-bg); color: var(--low-fg); width: calc(100% - 3 * var(--step)); }
.rung-med { background: var(--med-bg); color: var(--med-fg); width: calc(100% - 2 * var(--step)); }
.rung-high { background: var(--high-bg); color: var(--high-fg); width: calc(100% - 1 * var(--step)); }
.rung-sev { background: var(--sev-bg); color: var(--sev-fg); width: 100%; }
.ladder-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: 1.25rem; }

/* What lands in HubSpot */
.lands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.lands > div { display: grid; gap: .4rem; align-content: start; }

/* Note mock */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split-copy { display: grid; gap: 1rem; }

/* Countries */
.tbl-note { margin-top: 1rem; }
.second-card { margin: 2rem 0 0; max-width: 28rem; display: grid; gap: .6rem; }
.cover { width: 100%; border-collapse: collapse; font-size: .9688rem; }
.cover caption { text-align: left; }
.cover th, .cover td { text-align: left; vertical-align: top; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--line); }
.cover thead th { font: 400 var(--t-sm)/1.3 var(--mono); color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.cover tbody th { font-weight: 600; font-family: var(--body); }
.cover .group th { font: 700 var(--t-base)/1.3 var(--display); padding-top: 1.5rem; border-bottom: 1px solid var(--ink); }
.cover .none { color: var(--ink-soft); }

/* Pricing */
.state { position: absolute; opacity: 0; width: 1px; height: 1px; }
.controls { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--white); }
.seg label { padding: .55rem .95rem; font-weight: 600; cursor: pointer; border-left: 1px solid var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.seg label:first-child { border-left: 0; }
#per-m:checked ~ .controls [for="per-m"], #per-y:checked ~ .controls [for="per-y"],
#cur-gbp:checked ~ .controls [for="cur-gbp"], #cur-eur:checked ~ .controls [for="cur-eur"], #cur-usd:checked ~ .controls [for="cur-usd"] { background: var(--ink); color: var(--white); }
#per-m:focus-visible ~ .controls [for="per-m"], #per-y:focus-visible ~ .controls [for="per-y"],
#cur-gbp:focus-visible ~ .controls [for="cur-gbp"], #cur-eur:focus-visible ~ .controls [for="cur-eur"], #cur-usd:focus-visible ~ .controls [for="cur-usd"] { outline: 3px solid var(--brand); outline-offset: -3px; }

.price { display: none; }
#cur-gbp:checked ~ .plans .gbp, #cur-eur:checked ~ .plans .eur, #cur-usd:checked ~ .plans .usd { display: inline; }
.yr { display: none; }
#per-y:checked ~ .plans .yr { display: block; }
#per-y:checked ~ .plans .mo { display: none; }

.plans { display: grid; gap: .5rem; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.15rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; align-items: baseline; }
.plan:nth-child(1) { width: calc(100% - 4 * var(--step)); }
.plan:nth-child(2) { width: calc(100% - 3 * var(--step)); }
.plan:nth-child(3) { width: calc(100% - 2 * var(--step)); }
.plan:nth-child(4) { width: calc(100% - 1 * var(--step)); }
.plan h2 { font-size: var(--t-xl); }
.plan-size { color: var(--ink-soft); }
.plan-size b { color: var(--ink); font-family: var(--mono); font-weight: 400; }
.plan-cost { text-align: right; grid-row: 1 / span 2; grid-column: 2; }
.plan-cost .big { font: 800 var(--t-xl)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.plan-cost .per { font-size: var(--t-sm); color: var(--ink-soft); display: block; }
.plan-quote { background: transparent; border-style: dashed; border-color: var(--ink-soft); grid-template-columns: minmax(0, 1fr); }
.plan-quote .plan-cost { grid-row: auto; grid-column: auto; text-align: left; margin-top: .4rem; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
.facts > div { display: grid; gap: .3rem; align-content: start; }

/* Forms */
.form { display: grid; gap: 1rem; max-width: 34rem; }
.field { display: grid; gap: .3rem; }
.field label { font-weight: 600; }
.field input, .field textarea, .field select { font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--ink-soft); border-radius: 4px; padding: .6rem .7rem; width: 100%; }
.field textarea { min-height: 8rem; resize: vertical; }
.tick { display: flex; gap: .6rem; align-items: flex-start; }
.tick input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; accent-color: var(--brand); }
.review-note { background: var(--note-bg); color: var(--note-fg); padding: .85rem 1rem; border-radius: 6px; display: grid; gap: .35rem; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-side { display: grid; gap: 1.5rem; }
.contact-side > div { display: grid; gap: .25rem; }
.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) 0; display: grid; gap: .75rem; }

/* Privacy */
.legal { display: grid; gap: 1.75rem; }
.legal section { display: grid; gap: .5rem; }
.legal ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

/* Footer */
.site-foot { background: var(--ink); color: var(--on-ink-soft); padding-block: 2.5rem; font-size: var(--t-sm); }
.site-foot .wrap { display: grid; gap: 1.25rem; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-foot .logo { color: var(--on-ink); }
.site-foot a { color: var(--on-ink); }
.site-foot a:hover { color: var(--white); }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.site-foot address { font-style: normal; }

@media (max-width: 900px) {
  .hero-grid, .split, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .steps li { padding-left: 4rem; min-height: 2.75rem; }
  .stepno { position: absolute; left: 0; top: 0; margin: 0; }
  .steps li:not(:last-child)::after { top: 2.75rem; bottom: -1.5rem; left: 1.375rem; right: auto; border-top: 0; border-left: 2px dashed var(--brand); }
  .lands { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .hero-copy { padding-bottom: 0; }
}
@media (max-width: 640px) {
  :root { --step: 3%; }
  .ladder-notes, .facts { grid-template-columns: minmax(0, 1fr); }
  .rung { grid-template-columns: minmax(0, 1fr); }
  .site-head .wrap { flex-wrap: wrap; row-gap: .4rem; }
  .site-nav { gap: .85rem; flex-wrap: wrap; width: 100%; }
  .btn { width: 100%; }
  .hero-actions { display: grid; }

  /* The coverage table reads as one block per country */
  .cover thead { position: absolute; left: -9999px; }
  .cover, .cover tbody, .cover tr, .cover th, .cover td { display: block; width: 100%; }
  .cover tr { padding-block: .7rem; border-bottom: 1px solid var(--line); }
  .cover tr.group { border-bottom: 1px solid var(--ink); padding-bottom: .3rem; }
  .cover th, .cover td { border: 0; padding: .1rem 0; }
  .cover .group th { padding-top: 1rem; border: 0; }
  .cover tbody td { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); gap: .75rem; }
  .cover tbody td::before { content: attr(data-label); font: 400 .8125rem/1.5 var(--mono); color: var(--ink-soft); }
  .cover tbody th[scope="row"] { font-size: 1.0625rem; font-weight: 700; margin-bottom: .2rem; }
  .plan-cost .big { font-size: var(--t-lg); }
}
.captcha-slot { border: 1px dashed var(--ink-soft); border-radius: 6px; padding: .75rem 1rem; margin: 0 0 1rem; }


/* Home page example cards: stacked, one shown, sliding in from the right and out to the left. */
.card-stage { display: grid; }
/* The hidden cards wait 28px to the side; clip them so phones never scroll sideways. */
.hero { overflow-x: clip; }
.card-stage > .card { grid-area: 1 / 1; }
.cards-live .card-stage > .card { opacity: 0; transform: translateX(28px) scale(.98); transition: opacity .6s ease, transform .6s ease; pointer-events: none; visibility: hidden; }
.cards-live .card-stage > .card.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.cards-live .card-stage > .card.is-out { opacity: 0; transform: translateX(-28px) scale(.98); visibility: visible; }
.card-controls { display: none; align-items: center; gap: .75rem; }
.cards-live .card-controls { display: flex; }
.card-dots { display: flex; gap: .45rem; }
.card-dot { width: .6rem; height: .6rem; border-radius: 50%; border: 0; padding: 0; background: var(--on-ink-soft); opacity: .45; cursor: pointer; }
.card-dot[aria-current="true"] { opacity: 1; background: var(--on-ink-brand); }
.card-pause { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--on-ink-soft); background: transparent; cursor: pointer; position: relative; }
.card-pause::before { content: ""; position: absolute; inset: 0; margin: auto; width: .45rem; height: .55rem; border-left: 2px solid var(--on-ink); border-right: 2px solid var(--on-ink); }
.card-pause.is-stopped::before { width: 0; height: 0; border: 0; border-left: .5rem solid var(--on-ink); border-top: .3rem solid transparent; border-bottom: .3rem solid transparent; margin-left: .55rem; }
@media (prefers-reduced-motion: reduce) { .cards-live .card-stage > .card { transition: none; } }

.field select { appearance: none; -webkit-appearance: none; height: 2.9rem; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2346595d' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: .8rem auto; }
.field input { height: 2.9rem; }


/* Design review, 3 Nov 2026 ------------------------------------------------------------------ */
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Second line of a headline in the accent colour */
.h-accent { display: block; color: var(--brand); }
.hero .h-accent, .band-ink .h-accent { color: var(--on-ink-brand); }

/* Line icons */
.i { width: 1.5rem; height: 1.5rem; flex: none; }
.ico { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 8px; background: #e2f1ee; color: var(--brand-deep); margin-bottom: .35rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.ticks .i { width: 1.25rem; height: 1.25rem; color: var(--brand); margin-top: .15rem; }

/* Hero: the card sits in a plain, unbranded company page */
.crm { background: #e8eeed; border-radius: 10px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7); color: var(--ink); overflow: visible; }
.crm-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-bottom: 1px solid #d3dcdb; }
.crm-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #b9c6c4; }
.crm-pill { height: .5rem; width: 3.2rem; border-radius: 99px; background: #cfd9d7; }
.crm-pill:last-child { margin-left: auto; width: 4.5rem; }
.crm-body { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); }
.crm-side { display: flex; flex-direction: column; gap: .4rem; padding: .9rem .75rem; border-right: 1px solid #d3dcdb; background: #f1f5f4; border-radius: 0 0 0 10px; min-width: 0; }
.crm-avatar { width: 2.1rem; height: 2.1rem; border-radius: 6px; background: #cfd9d7; margin-bottom: .2rem; }
.crm-line { height: .45rem; border-radius: 99px; background: #d6dfdd; width: 90%; }
.crm-short { width: 55%; }
.crm-acts { display: flex; gap: .3rem; margin: .3rem 0 .55rem; }
.crm-acts i { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid #c2cecc; }
.crm-label { font: 400 .6875rem/1.2 var(--body); color: #63777a; margin-top: .35rem; overflow-wrap: anywhere; hyphens: auto; }
.crm-main { padding: .85rem; min-width: 0; }
.crm .card { box-shadow: 0 10px 26px -18px rgba(16, 41, 46, .6); position: relative; }
.card-flag { position: absolute; z-index: 2; right: -1.4rem; top: -1.55rem; max-width: 17rem; display: flex; align-items: center; gap: .45rem; background: var(--white); color: var(--ink); border-radius: 8px; padding: .4rem .65rem; font: 600 .8125rem/1.3 var(--body); box-shadow: 0 10px 24px -10px rgba(16, 41, 46, .55); border: 1px solid var(--line); }
.flag-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.dot-low { background: #3aa66a; } .dot-med { background: #e0b100; } .dot-high { background: #e07a2f; } .dot-sev { background: var(--sev-bg); }
.cards-live .card-stage > .card .card-flag { transform: translateY(6px); opacity: 0; transition: opacity .4s ease .35s, transform .4s ease .35s; }
.cards-live .card-stage > .card.is-on .card-flag { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cards-live .card-stage > .card .card-flag { transition: none; transform: none; } }

/* Before and after */
.ba { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1rem, 3vw, 1.75rem); max-width: 860px; }
.ba-rec { display: grid; gap: .1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.ba-rec strong { font: 700 var(--t-lg)/1.2 var(--display); }
.ba-rec span { font: 400 .8125rem/1.3 var(--mono); color: var(--ink-soft); }
.ba-head, .ba-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 2rem minmax(0, 1.3fr); gap: .75rem; align-items: center; }
.ba-head { padding-top: .9rem; font: 400 var(--t-sm)/1.3 var(--mono); color: var(--ink-soft); }
.ba-rows { margin: 0; }
.ba-row { padding-block: .75rem; border-bottom: 1px solid var(--line); }
.ba-row dt { font-weight: 700; }
.ba-row dd { margin: 0; }
.ba-old { color: var(--ink-soft); }
.ba-old s { text-decoration-thickness: 1.5px; }
.ba-old .chip { opacity: .6; text-decoration: line-through; }
.ba-arrow { color: var(--brand); display: grid; }
.ba-new strong { color: var(--sev-bg); }
.ba .src { margin-top: .75rem; }

/* Where the data comes from */
.sources { background: var(--paper); border-bottom: 1px solid var(--line); padding-block: 1.6rem; }
.sources-in { display: grid; gap: .8rem; }
.sources-h { font: 400 var(--t-sm)/1.3 var(--mono); color: var(--brand-deep); letter-spacing: .02em; }
.sources-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sources-list li { background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: .3rem .7rem; font: 700 .9063rem/1.3 var(--display); display: inline-flex; gap: .45rem; align-items: baseline; }
.sources-list span { font: 400 .75rem/1 var(--mono); color: var(--ink-soft); }
.sources-more { font-size: var(--t-sm); color: var(--ink-soft); }

/* Who it helps: one panel per role. Tabs when the script runs, stacked panels without it. */
.roles { display: grid; gap: 1.5rem; }
.role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: start; border-top: 4px solid; padding-top: 1.25rem; }
.role-credit { border-color: var(--sev-bg); }
.role-sales { border-color: #e0b100; }
.role-comp { border-color: #3aa66a; }
.role-copy { display: grid; gap: 1rem; align-content: start; }
.role-copy h3 { display: flex; align-items: center; gap: .7rem; font-size: var(--t-xl); }
.role-copy h3 .ico { margin: 0; }
.role-card .card-hi { background: #f1f8f6; border-left: 3px solid var(--brand); margin-inline: -.5rem; padding: .45rem .5rem; border-radius: 0 4px 4px 0; }
.card-btn { display: inline-block; margin-top: .3rem; border: 1px solid var(--ink-soft); border-radius: 4px; padding: .1rem .6rem; font-weight: 600; font-size: .8125rem; }
.roles-note { margin-top: 1rem; }
.tabs-live .role { border-top: 0; padding-top: 0; }
.tabs-live .role-copy h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tabs-live .role:focus-visible { outline-offset: 6px; }
.role-tabs { display: flex; gap: .5rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.role-tab { flex: none; display: inline-flex; align-items: center; gap: .55rem; font: 700 1.0625rem/1.2 var(--display); color: var(--ink-soft); background: transparent; border: 0; border-top: 4px solid transparent; padding: .8rem 1rem .85rem; cursor: pointer; border-radius: 6px 6px 0 0; min-height: 44px; }
.role-tab .ico { width: 2rem; height: 2rem; margin: 0; background: transparent; }
.role-tab .i { width: 1.3rem; height: 1.3rem; }
.role-tab:hover { color: var(--ink); background: var(--paper); }
.role-tab[aria-selected="true"] { color: var(--ink); background: var(--paper); }
.role-tab.tab-credit[aria-selected="true"] { border-top-color: var(--sev-bg); }
.role-tab.tab-sales[aria-selected="true"] { border-top-color: #e0b100; }
.role-tab.tab-comp[aria-selected="true"] { border-top-color: #3aa66a; }
.role-tab:focus-visible { outline-offset: -3px; }

/* Inside HubSpot: icon over each item */
.lands-ico > div { align-content: start; }

/* Facts you can check */
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.trust li { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.trust li > a { margin-top: auto; padding-top: .25rem; }
.trust h3 { font-size: var(--t-base); line-height: 1.25; }
.trust p { font-size: .9688rem; color: var(--ink-soft); }
.trust a { font-size: var(--t-sm); font-weight: 600; }
.side-trust { gap: .75rem !important; }
.side-trust .trust { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.side-trust .trust li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .15rem .85rem; padding: .85rem 1rem; }
.side-trust .trust .ico { grid-row: span 3; margin: 0; }
.side-trust .trust li > a { margin-top: 0; padding-top: 0; }

/* Pricing: chooser and what every plan includes */
.chooser { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.15rem; margin-bottom: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem 2rem; align-items: center; }
.chooser label { font: 700 var(--t-lg)/1.25 var(--display); grid-column: 1; }
.chooser-in { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: center; grid-column: 1; }
.chooser-in input[type="number"] { font: 400 1.0625rem var(--mono); border: 1px solid var(--ink-soft); border-radius: 4px; padding: .55rem .6rem; height: 2.9rem; width: 100%; color: var(--ink); background: var(--white); }
.chooser-in input[type="range"] { width: 100%; accent-color: var(--brand); min-height: 44px; }
.chooser-out { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: .2rem; justify-items: end; text-align: right; }
.chooser-fit { color: var(--ink-soft); }
.chooser-fit strong { color: var(--ink); font: 800 var(--t-xl)/1.1 var(--display); }
.chooser-cost .big { font: 800 var(--t-xl)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.chooser-cost .per { font-size: var(--t-sm); color: var(--ink-soft); display: block; }
#cur-gbp:checked ~ .chooser .gbp, #cur-eur:checked ~ .chooser .eur, #cur-usd:checked ~ .chooser .usd { display: inline; }
#per-y:checked ~ .chooser .yr { display: block; }
#per-y:checked ~ .chooser .mo { display: none; }
.plan { transition: box-shadow .25s ease, border-color .25s ease; }
.plan.is-fit { border: 2px solid var(--brand); background: #f1f8f6; box-shadow: 0 10px 26px -18px rgba(15, 118, 110, .8); }
@media (prefers-reduced-motion: reduce) { .plan { transition: none; } }
.includes { margin-top: 2rem; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem 1.25rem 1.4rem; display: grid; gap: 1rem; }
.includes h2 { font-size: var(--t-xl); }
.ticks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1.5rem; }

@media (max-width: 900px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role { grid-template-columns: minmax(0, 1fr); }
  .role-card { max-width: 28rem; }
  .card-flag { right: -.5rem; }
}
@media (max-width: 640px) {
  .crm-body { grid-template-columns: minmax(0, 1fr); }
  .crm-side { display: none; }
  .crm-main { padding: .6rem; padding-top: 1.6rem; }
  .card-flag { right: .5rem; max-width: calc(100% - 1rem); }
  .ba-head { display: none; }
  .ba-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .ba-arrow { transform: rotate(90deg); width: 1.5rem; }
  .trust, .ticks-grid { grid-template-columns: minmax(0, 1fr); }
  .chooser { grid-template-columns: minmax(0, 1fr); }
  .chooser-out { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; }
  .role-tab { padding-inline: .7rem; font-size: 1rem; }
  .role-tab .ico { display: none; }
  .trust li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .15rem .85rem; padding: .85rem 1rem; }
  .trust .ico { grid-row: span 3; margin: 0; }
  .trust li > a { margin-top: 0; padding-top: 0; }
}