/* KlaroFlow website
   Built to KlaroFlow_Brand_Foundation_and_Identity.docx.

   Colour rule (this is the part that was inconsistent before):
     - deep navy is the ink and the dark ground
     - Klaro blue is the only accent that ever carries text on a light ground
     - cyan appears ONLY on navy - it does not have the contrast to be text or a
       link on white
     - green / amber / red are status colours and appear nowhere else

   Mark rule:
     - primary logo on light grounds only (its wordmark is near-black)
     - circular mark for favicons, badges and small surfaces, always on a plain
       white chip
*/

:root {
  --navy: #072353;
  --navy-2: #0b3175;
  --navy-3: #0d3b8c;
  --blue: #0070eb;
  --blue-ink: #0060cc;
  --blue-soft: #e4eefd;
  --cyan: #00cde6;

  --ink: #072353;
  --ink-2: #46597a;
  --ink-3: #7b8da9;
  --on-navy: #ffffff;
  --on-navy-2: #b7cdf0;

  --ground: #ffffff;
  --ground-2: #f4f8fd;
  --ground-3: #eaf1fa;
  --line: #e1e9f4;

  --good: #16ab65;
  --watch: #d79a00;
  --risk: #e82f3a;

  --shadow-sm: 0 1px 2px rgba(7, 35, 83, .05), 0 1px 10px rgba(7, 35, 83, .04);
  --shadow-md: 0 2px 8px rgba(7, 35, 83, .07), 0 18px 40px rgba(7, 35, 83, .08);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --max: 1160px;
}

* { box-sizing: border-box; }

/* display:flex on .form-result beat the hidden attribute, so an empty green bar
   sat under the form before anyone had submitted anything. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(29px, 4.1vw, 43px); font-weight: 700; }
h2 { font-size: clamp(22px, 2.8vw, 30px); }
h3 { font-size: clamp(16.5px, 1.6vw, 18.5px); }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--blue-ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.shell { max-width: var(--max); margin: 0 auto; padding-inline: 22px; }
.lede { font-size: clamp(15.5px, 1.4vw, 17px); color: var(--ink-2); max-width: 64ch; }
.muted { color: var(--ink-3); }
.center { text-align: center; margin-inline: auto; }

/* ---------- eyebrow: the one label style used everywhere ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-ink); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--blue); border-radius: 2px; }
.on-navy .eyebrow { color: var(--cyan); }
.on-navy .eyebrow::before { background: var(--cyan); }

/* ---------- header ---------- */

.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head-in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand-lockup { display: flex; align-items: center; flex: 0 0 auto; }
.brand-lockup img { height: 30px; width: auto; }
.site-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* :not(.btn) matters - without it this rule wins over .btn-primary on
   specificity and the call-to-action loses its white text. */
.site-nav a:not(.btn) {
  font-family: var(--display); font-size: 14.5px; font-weight: 500;
  color: var(--ink-2); text-decoration: none; padding: 8px 13px; border-radius: 999px;
}
.site-nav a:not(.btn):hover { background: var(--ground-2); color: var(--ink); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--ink); background: var(--ground-3); }
.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-ink); }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-ink); }
.btn-cyan { background: var(--cyan); color: var(--navy); }
.btn-cyan:hover { background: #fff; }
.btn-ghost-navy { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn-ghost-navy:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.btn-sm { font-size: 14px; padding: 9px 17px; }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- sections ---------- */

.section { padding-block: clamp(40px, 5.4vw, 66px); }
.section-tight { padding-block: clamp(32px, 4.2vw, 48px); }
.section-head { max-width: 64ch; margin-bottom: 30px; }
.section-head.center { text-align: center; }
.section-head h2 + p { margin-top: 12px; }
.band-soft { background: var(--ground-2); }
.band-line { border-top: 1px solid var(--line); }

.on-navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  color: var(--on-navy-2);
  position: relative; overflow: hidden;
}
.on-navy h1, .on-navy h2, .on-navy h3 { color: var(--on-navy); }
.on-navy .lede, .on-navy p { color: var(--on-navy-2); }
.on-navy::after {
  content: ""; position: absolute; right: -140px; top: -180px; width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(0, 205, 230, .22), transparent 66%);
  pointer-events: none;
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(56px, 9vw, 104px); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 52px; align-items: center; }
.hero-tagline {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 50px); line-height: 1.12; color: var(--on-navy);
}
.hero-tagline .second { color: var(--cyan); display: block; }
.hero-meaning {
  font-size: 15px; letter-spacing: .02em; color: var(--on-navy-2);
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16);
  max-width: 44ch;
}
.hero-lede { margin-top: 20px; font-size: clamp(16.5px, 1.7vw, 19px); max-width: 48ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--on-navy-2); opacity: .85; }

.flowcard {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg); padding: 26px;
}
.flowcard h3 { font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.flow-steps { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.flow-steps li { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.flow-steps li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.flow-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .1); color: var(--on-navy);
}
.flow-steps li:last-child .flow-num { background: var(--cyan); color: var(--navy); }
.flow-word { font-family: var(--display); font-weight: 600; color: var(--on-navy); font-size: 16px; }
.flow-say { font-size: 14px; color: var(--on-navy-2); }
.flowcard-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 26px; display: flex; flex-direction: column; gap: 10px;
}
.card h3 { font-size: 18px; }
.card p { font-size: 15px; }
.card-icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-ink); margin-bottom: 4px;
}
.card-icon svg { width: 21px; height: 21px; }
.card-link { margin-top: auto; padding-top: 8px; font-family: var(--display); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.card-link::after { content: " \2192"; }

.card-quiet { background: var(--ground-2); border-color: transparent; }
.on-navy .card { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.on-navy .card h3 { color: var(--on-navy); }
.on-navy .card p { color: var(--on-navy-2); }
.on-navy .card-icon { background: rgba(0, 205, 230, .16); color: var(--cyan); }/* ---------- problem list ---------- */

/* ---------- numbered steps ---------- */

/* ---------- product feature ---------- */

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 46px; align-items: center; }
.feature-media {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); background: var(--ground-2);
}
.feature-media img { width: 100%; }
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-ink);
}
.badge-live { background: rgba(22, 171, 101, .12); color: #0c7a46; }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.badge-soon { background: var(--ground-3); color: var(--ink-3); }
.on-navy .badge { background: rgba(255, 255, 255, .12); color: var(--on-navy); }

.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }
.ticks svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; color: var(--blue); }
.on-navy .ticks svg { color: var(--cyan); }
.on-navy .ticks li { color: var(--on-navy-2); }

/* ---------- Business Pulse preview panel ----------
   Real figures from the sample business in the product, shown in the product's
   own visual language so the page does not misrepresent what it looks like. */

.pulse-preview { background: #fff; padding: 24px 26px 20px; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.pp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue-ink);
}
.pp-eyebrow svg { width: 15px; height: 15px; }
.pp-pill {
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(232, 47, 58, .1); color: #c2151f;
  display: inline-flex; align-items: center; gap: 7px;
}
.pp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--risk); }
.pp-status { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--ink); }
.pp-detail { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.pp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.pp-kpi { background: var(--ground-2); border-radius: var(--r-sm); padding: 12px 14px; }
.pp-kpi span {
  display: block; font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.pp-kpi strong { display: block; font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 3px; }
.pp-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3);
}/* ---------- industry table ---------- */

.row-tag { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.row-questions { font-size: 15.5px; color: var(--ink); }
.row-data { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; }

/* ---------- quote ---------- */

.quote {
  border-left: 3px solid var(--cyan); padding: 4px 0 4px 24px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(19px, 2.3vw, 25px); line-height: 1.4; color: var(--ink);
  max-width: 34ch;
}
.on-navy .quote { color: var(--on-navy); }
.quote-by { display: block; margin-top: 14px; font-family: var(--body); font-size: 14.5px; font-weight: 400; color: var(--ink-3); }
.on-navy .quote-by { color: var(--on-navy-2); }

/* ---------- honest note ---------- */

.note-card {
  background: var(--ground-2); border-radius: var(--r-md); padding: 26px 28px;
  display: flex; gap: 18px; align-items: flex-start;
}
.note-card .mark-chip { flex: 0 0 auto; }
.note-card p { font-size: 15.5px; }
.mark-chip {
  width: 46px; height: 46px; border-radius: 13px; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center; padding: 6px;
}
.mark-chip img { width: 100%; height: 100%; }

/* ---------- forms ---------- */

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.label {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.input, .textarea {
  padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 15.5px; font-family: var(--body); width: 100%;
}
.input:hover, .textarea:hover { border-color: var(--ink-3); }
.textarea { min-height: 116px; resize: vertical; }
.checks { display: flex; gap: 9px; flex-wrap: wrap; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check span {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font-size: 14.5px; cursor: pointer;
}
.check input:checked + span { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-ink); font-weight: 500; }
.check input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.form-foot { grid-column: 1 / -1; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.form-note { font-size: 14px; color: var(--ink-3); max-width: 46ch; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-result {
  grid-column: 1 / -1; background: rgba(22, 171, 101, .1); color: #0c7a46;
  border-radius: var(--r-sm); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.form-result.is-bad { background: rgba(232, 47, 58, .09); color: #c2151f; }
.form-result strong { font-family: var(--display); font-size: 17px; }
.form-result .btn { align-self: flex-start; }

/* ---------- CTA band ---------- */

.cta-in { position: relative; z-index: 1; display: flex; gap: 34px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- footer ---------- */

.site-foot { background: var(--navy); color: var(--on-navy-2); padding-block: 48px 30px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 36px; }
.foot-mark { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.foot-mark .mark-chip { width: 42px; height: 42px; border-radius: 12px; }
.foot-name { font-family: var(--display); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: -.01em; }
.foot-tag { font-family: var(--display); font-weight: 600; font-size: 15px; color: #fff; }
.foot-tag span { color: var(--cyan); }
.foot-say { font-size: 14px; margin-top: 8px; max-width: 40ch; }
.foot-col h4 { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { color: var(--on-navy-2); text-decoration: none; font-size: 14.5px; }
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 13.5px;
}
.foot-flow { font-family: var(--display); letter-spacing: .06em; font-size: 12.5px; text-transform: uppercase; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-in, .feature { grid-template-columns: 1fr; gap: 34px; }
  .feature-media { order: -1; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 22px 18px;
    box-shadow: var(--shadow-md);
  }
  .site-head.is-open .site-nav { display: flex; }
  .site-nav a { padding: 11px 13px; }
  .site-nav .btn { margin-top: 8px; justify-content: center; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .shell { padding-inline: 18px; }
  .card { padding: 22px; }
  .foot-top { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------- motion ----------------
   Felt, not noticed: a short rise as a block enters, once. Everything is
   visible at rest first - the class is only added when the observer runs, so a
   reader with JS off or reduced motion on sees the finished page. */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal { opacity: 0; transform: translateY(8px); }
  .js-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
  }
  .js-reveal.is-in:nth-child(2) { transition-delay: .06s; }
  .js-reveal.is-in:nth-child(3) { transition-delay: .12s; }
  .js-reveal.is-in:nth-child(4) { transition-delay: .18s; }

  .card, .problem, .step, .offer-card, .pp-kpi { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .card:hover, .problem:hover { transform: translateY(-2px); }
  .card:hover { box-shadow: var(--shadow-md); border-color: var(--line); }
  .btn { transition: background .15s, border-color .15s, transform .12s, box-shadow .15s; }
  .btn-primary:hover, .btn-cyan:hover { box-shadow: 0 6px 18px rgba(0, 112, 235, .26); transform: translateY(-1px); }
  .feature-media { transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s; }
  .feature-media:hover { transform: translateY(-4px); }
  .flow-steps li { transition: background .2s; border-radius: 8px; }
  .flow-steps li:hover { background: rgba(255, 255, 255, .06); }
}



/* ---------------- founder ---------------- */

.founder { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 44px; align-items: center; }
.founder-frame { position: relative; }
.founder-photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: block;
}
.founder-frame::before {
  content: ""; position: absolute; inset: -14px -14px 34px 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--navy), var(--blue) 70%, var(--cyan));
  z-index: -1;
}
.founder-badge {
  position: absolute; left: -14px; bottom: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 10px 14px 10px 11px;
  display: flex; align-items: center; gap: 10px;
}
.founder-badge img { width: 30px; height: 30px; }
.founder-badge span { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.25; }
.founder-badge small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.founder-name { font-family: var(--display); font-size: clamp(24px, 3vw, 33px); font-weight: 700; color: var(--ink); }
.founder-role {
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-ink); margin-top: 6px;
}
.founder-quote {
  font-size: 16.5px; color: var(--ink-2); margin-top: 18px;
  border-left: 3px solid var(--cyan); padding-left: 18px;
}
.founder-quote + .founder-quote { margin-top: 14px; }

@media (max-width: 760px) {
  .founder { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .founder-frame { max-width: 300px; }
}

/* a single tick line used outside a <ul>; scoped so it cannot capture .ticks
   lists that live inside a grid elsewhere */
.tick-row { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; }
.tick-row svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; color: var(--blue); }

/* ---------------- the questions ----------------
   Real questions in the owner's own words, then one line saying we answer them. */

.questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; }
.question {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; font-family: var(--display); font-weight: 500;
  font-size: 16px; color: var(--ink); line-height: 1.35;
}
.question svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--blue); }

.answer-band {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 26px; padding: 24px 26px;
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  border-radius: var(--r-lg); color: var(--on-navy-2);
}
.answer-band h3 { color: var(--on-navy); font-size: 19px; }
.answer-band p { color: var(--on-navy-2); font-size: 15px; margin-top: 7px; max-width: 62ch; }
.answer-band > div { flex: 1 1 320px; min-width: 0; }
.answer-band .btn { flex: 0 0 auto; }

.honest-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 22px; font-size: 14px; color: var(--ink-2); max-width: 84ch;
}
.honest-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--ink-3); }
.honest-note strong { font-family: var(--display); color: var(--ink); }

/* ---------------- icon chips ----------------
   Icons are part of the brand, not decoration. They get real size, a soft
   KlaroFlow-blue chip, and the same treatment everywhere they appear. */

.card-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(140deg, var(--blue-soft), #f2f7ff);
  border: 1px solid rgba(0, 112, 235, .16);
  color: var(--blue-ink);
  display: grid; place-items: center; margin-bottom: 14px;
  flex: 0 0 auto;
}
.card-icon svg { width: 28px; height: 28px; stroke-width: 1.6; }
.card:hover .card-icon, .problem:hover .card-icon {
  background: linear-gradient(140deg, var(--blue), var(--navy-2));
  border-color: transparent; color: #fff;
}
.on-navy .card-icon {
  background: rgba(0, 205, 230, .14); border-color: rgba(0, 205, 230, .3); color: var(--cyan);
}
.problem .card-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 12px; }
.problem .card-icon svg { width: 24px; height: 24px; }

.ticks svg, .tick-row svg { width: 21px; height: 21px; }
.question svg { width: 24px; height: 24px; }
.eyebrow svg { width: 17px; height: 17px; }

/* ---------------- light hero ----------------
   White ground, the brand badge doing the work, and the product itself shown
   rather than described. */

.hero-light { background: #fff; padding-block: clamp(40px, 6vw, 72px) clamp(44px, 6vw, 76px); position: relative; overflow: hidden; }
.hero-light::before {
  content: ""; position: absolute; right: -180px; top: -220px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(0, 112, 235, .10), transparent 66%); pointer-events: none;
}
.hero-light::after {
  content: ""; position: absolute; left: -160px; bottom: -260px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(0, 205, 230, .12), transparent 68%); pointer-events: none;
}
.hero-light-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 48px; align-items: center;
}
.brand-stamp { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.brand-stamp img { width: 64px; height: 64px; }
.brand-kicker {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  color: var(--ink); line-height: 1.25;
}
.brand-kicker small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); }

/* One sentence per line, and never mid-sentence. The size is capped by the
   viewport so the longer line cannot wrap. */
.hero-light-title {
  font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  color: var(--navy); display: flex; flex-direction: column; gap: 2px;
  font-size: clamp(30px, 4.1vw, 54px);
}
.hero-light-title .line-one,
.hero-light-title .line-two { display: block; white-space: nowrap; }
.hero-light-title .line-two { color: var(--blue); }
.hero-light-lede { font-size: clamp(17px, 1.9vw, 21px); color: var(--ink-2); margin-top: 18px; max-width: 30ch; }
.hero-light-note { font-size: 14px; color: var(--ink-3); margin-top: 16px; }
.hero-building-note { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.btn-lg { font-size: 16px; padding: 14px 26px; }

/* the product, shown as a screen you can click */
.hero-shot {
  display: block; text-decoration: none; position: relative;
  border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(7, 35, 83, .06), 0 26px 60px rgba(7, 35, 83, .14);
}
.shot-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--ground-2); border-bottom: 1px solid var(--line);
}
/* :not(.shot-free) matters. The Free pill is a span in this same row, and
   without it this rule won - the pill came out as a grey 10px dot with the
   word Free spilling out of it. */
.shot-chrome > span:not(.shot-free) { width: 10px; height: 10px; border-radius: 50%; background: #d7e0ee; }
.shot-chrome em {
  margin-left: 8px; font-style: normal; font-family: var(--display); font-weight: 600;
  font-size: 12.5px; color: var(--ink-3); letter-spacing: .04em;
}
.hero-shot .pulse-preview { padding: 22px 24px 18px; }
.shot-cta {
  display: block; padding: 12px 24px 16px;
  font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--blue-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-shot { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s; }
  .hero-shot:hover { transform: translateY(-6px); box-shadow: 0 4px 10px rgba(7,35,83,.08), 0 34px 74px rgba(7,35,83,.20); }
  .hero-copy > * { animation: kf-rise .6s cubic-bezier(.22,.61,.36,1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .07s; }
  .hero-copy > *:nth-child(3) { animation-delay: .14s; }
  .hero-copy > *:nth-child(4) { animation-delay: .21s; }
  .hero-copy > *:nth-child(5) { animation-delay: .28s; }
  .hero-shot { animation: kf-rise .7s .1s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes kf-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ---------------- the three-question strip ---------------- */

.strip { background: var(--ground-2); border-block: 1px solid var(--line); }
.strip-in { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.strip-lead {
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); flex: 0 0 auto;
}
.strip-items { display: flex; gap: 26px; flex-wrap: wrap; flex: 1 1 auto; }/* ---------------- founder strip on the home page ---------------- */

.founder-line { font-size: 15px; color: var(--ink); margin-top: 14px; }
.founder-line strong { font-family: var(--display); }
.founder-cred { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; max-width: 60ch; }
.founder-strip .card-link { display: inline-block; margin-top: 12px; }
.founder-strip .quote { border-left-color: var(--blue); font-size: clamp(17px, 1.9vw, 21px); max-width: 46ch; }

@media (max-width: 900px) {
  .hero-light-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .founder-strip { grid-template-columns: minmax(0, 1fr); gap: 22px; text-align: left; }
  .founder-mini { width: 140px; height: 170px; }
}

/* ---------------- KlaroFlow icon set ----------------
   Colour comes from the brand's own language: "deep navy with blue-to-cyan and
   teal gradients". Green, amber and red are status colours and never used for
   decoration, so variety comes from four gradients inside the family. */

.card-icon {
  width: 68px; height: 68px; border-radius: 20px;
  background: linear-gradient(145deg, #e3efff 0%, #c9e0fb 100%);
  border: none; color: #0b3175;
  display: grid; place-items: center; margin-bottom: 16px; flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(11, 49, 117, .10);
}
.card-icon svg { width: 34px; height: 34px; stroke-width: 1.7; }

/* Soft tinted chips with a deep brand-blue glyph.
   The earlier version put a white glyph on pale gradients, which measured
   1.4:1 - the icon washed out. A dark glyph keeps the soft look she asked for
   and stays legible on a phone in daylight. */
.icon-deep { background: linear-gradient(145deg, #dfe9fa 0%, #c3d5f2 100%); color: #10306b; }
.icon-blue { background: linear-gradient(145deg, #e0efff 0%, #c2ddfd 100%); color: #0b56b8; }
.icon-cyan { background: linear-gradient(145deg, #dcf6fb 0%, #b8ebf5 100%); color: #06627c; }
.icon-teal { background: linear-gradient(145deg, #dcf3f7 0%, #bfe2f2 100%); color: #0a5a86; }
.icon-sky  { background: linear-gradient(145deg, #e8f2ff 0%, #cfe4ff 100%); color: #14549f; }
.icon-ink  { background: linear-gradient(145deg, #dde5f5 0%, #c2cfe8 100%); color: #14294f; }

.card:hover .card-icon, .problem:hover .card-icon { transform: scale(1.05) rotate(-2deg); }
@media (prefers-reduced-motion: no-preference) {
  .card-icon { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
}
.on-navy .card-icon { box-shadow: none; }/* ---------------- problem -> what you get ---------------- */

.pair-get {
  background: linear-gradient(90deg, rgba(228, 238, 253, 0), var(--blue-soft) 22%);
  margin: -18px -22px -18px 0; padding: 18px 22px 18px 24px; height: 100%;
}
.pair-get .pair-label { color: var(--blue-ink); }
.pair-get .pair-text { color: var(--blue-ink); }
.pair .card-icon { margin-bottom: 0; width: 56px; height: 56px; border-radius: 17px; }
.pair .card-icon svg { width: 27px; height: 27px; stroke-width: 1.8; }
@media (prefers-reduced-motion: no-preference) {
  .pair-arrow svg { transition: transform .2s, background .2s; }
  .pair:hover .pair-arrow svg { transform: translateX(3px); background: var(--navy-2); }
}

@media (max-width: 860px) {
  .pair { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px; }
  .pair-arrow { grid-column: 2; justify-self: start; transform: rotate(90deg); margin: 4px 0; }
  .pair-arrow::before { display: none; }
  .pair-get { grid-column: 2; margin: 0; padding: 14px 16px; border-radius: var(--r-md);
    background: var(--blue-soft); height: auto; }
}

/* ---------------- free emphasis ---------------- */

.shot-free {
  margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: var(--blue); padding: 5px 11px; border-radius: 999px;
}
.free-flag {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--blue-ink);
  background: var(--blue-soft); padding: 8px 16px; border-radius: 999px;
}
.free-flag strong { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; }
.free-flag svg { width: 17px; height: 17px; }

/* ---------------- card with the icon beside the text ----------------
   Stacking the icon above the heading left a band of dead space to its right.
   Side by side uses the width and scans faster. */

.card-row {
  display: grid; grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 20px; row-gap: 8px; align-items: start;
}
.card-row .card-icon { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
.card-row > :not(.card-icon) { grid-column: 2; }
.card-row h3 { margin-top: 4px; }
@media (max-width: 520px) {
  .card-row { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .card-row .card-icon { width: 56px; height: 56px; border-radius: 16px; }
  .card-row .card-icon svg { width: 28px; height: 28px; }
}/* ---------------- the arrow that carries the eye across ----------------
   A hairline connector plus a filled arrow head, so "this becomes that" is
   read rather than guessed. */

@media (prefers-reduced-motion: no-preference) {
  .pair-arrow svg { transition: background .2s, transform .2s; }
  .pair:hover .pair-arrow svg { transform: translateX(3px); }
}
@media (max-width: 820px) {
  .pair-arrow::before { display: none; }
}

/* ---------------- contact on one screen ----------------
   The separate "start a conversation" band said the same thing as the form, so
   they are one block now: why on the left, the form on the right. */

.contact-grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 48px; align-items: start;
}
.contact-intro h1 { font-size: clamp(28px, 3.4vw, 42px); }
.contact-next { margin-top: 24px; }
.contact-next li { font-size: 15px; }
.contact-ways { display: grid; gap: 12px; margin-top: 26px; }
.contact-way {
  display: flex; align-items: center; gap: 15px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px;
}
.contact-way:hover { border-color: var(--blue); }
.contact-way .card-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 0; }
.contact-way .card-icon svg { width: 24px; height: 24px; }
.contact-way span strong {
  display: block; font-family: var(--display); font-size: 15px; color: var(--ink);
}
.contact-way span { font-size: 14px; color: var(--ink-2); }
.contact-or { margin-top: 20px; font-size: 14.5px; color: var(--ink-3); }

.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; box-shadow: var(--shadow-md);
}
.contact-card .form { gap: 14px; }
select.input { appearance: none; cursor: pointer; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }/* ---------------- founder credibility ---------------- */

.founder-photo { aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .contact-card { padding: 22px; }
}/* ---------------- compact values + flow strip ---------------- */

.flow-chip.is-last { background: rgba(0, 205, 230, .14); border-color: rgba(0, 205, 230, .38); }
.flow-chip.is-last b { color: var(--cyan); }

/* ---------------- who it is for ----------------
   The "what we do" page opens by naming the reader, because the most common
   worry is "this is for bigger companies than mine". */

.who-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.who-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px 10px 14px; box-shadow: var(--shadow-sm);
  font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink);
}
.who-chip svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--blue); }
.who-note { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); max-width: 74ch; }

/* ---------------- diagrams ----------------
   Two pages explained a process in paragraphs. One picture does it faster, so
   the flow and the four steps are drawn instead. Inline SVG, not an image
   file: it scales, it stays sharp, and the words in it are real text that a
   screen reader and a search engine can both read.

   Text sizes are set here rather than on the SVG so they stay in one place. */

.diagram { margin: 0; }
.diagram svg {
  display: block; width: 100%; height: auto;
  font-family: var(--display); font-weight: 500;
}
.diagram figcaption {
  margin-top: 18px; text-align: center;
  font-size: 14px; color: var(--ink-2);
}

.diagram .d-cap { font-size: 13px; font-weight: 600; fill: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.diagram .d-note { font-size: 12.5px; fill: var(--ink-3); }

.diagram .d-source rect { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.diagram .d-source text { font-size: 14px; fill: var(--ink-2); }

.diagram .d-flow { stroke: #8aa6cc; stroke-width: 2; stroke-dasharray: 6 5; fill: none; }

.diagram .d-mid-title { font-size: 21px; font-weight: 600; fill: #fff; }
.diagram .d-mid-sub { font-size: 13px; fill: var(--on-navy-2); }
.diagram .d-pill rect { fill: rgba(255, 255, 255, .11); stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.diagram .d-pill text { font-size: 13px; fill: #fff; }

.diagram .d-out { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.diagram .d-out-label { font-size: 12.5px; fill: var(--ink-3); }
.diagram .d-out-value { font-size: 17px; font-weight: 600; fill: var(--ink); }
.diagram .d-bar { fill: #c9ddf8; }
.diagram .d-bar.is-now { fill: var(--blue); }
.diagram .d-next { fill: var(--blue-soft); stroke: rgba(0, 112, 235, .2); stroke-width: 1.5; }
.diagram .d-next-label { font-size: 12.5px; fill: var(--blue-ink); font-weight: 600; }
.diagram .d-next-text { font-size: 14px; fill: var(--ink-2); }

.diagram .d-track { stroke: var(--line); stroke-width: 3; fill: none; }
.diagram .d-dot { fill: var(--navy-2); }
.diagram .d-dot.is-2 { fill: var(--navy-3); }
.diagram .d-dot.is-3 { fill: var(--blue-ink); }
.diagram .d-dot.is-4 { fill: var(--blue); }
.diagram .d-num { font-size: 19px; font-weight: 600; fill: #fff; }
.diagram .d-step-title { font-size: 17px; font-weight: 600; fill: var(--ink); }
.diagram .d-step-sub { font-size: 13px; fill: var(--ink-2); }

/* Under ~700px the wide flow gets unreadable, so it scrolls sideways inside its
   own frame rather than shrinking the words to nothing. The page itself never
   scrolls sideways. */
@media (max-width: 720px) {
  .diagram-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px;
    border-radius: var(--r-md);
  }
  .diagram-scroll svg { min-width: 660px; }
  /* a phone shows about half the picture, so say so rather than letting the
     rest go unnoticed */
  .diagram figcaption::before {
    content: "Swipe the picture sideways to see all of it \2192";
    display: block; margin-bottom: 8px;
    font-family: var(--display); font-weight: 500; color: var(--blue-ink);
  }
}

/* a quiet source line under a card, e.g. "From sales and stock records" */
.card-meta {
  display: block; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}

/* When a card ends in a source line, the rows were content-sized, so the line
   sat at a different height in every card of the row. Letting the paragraph's
   row absorb the slack drops every source line to the same baseline. */
.card-row:has(.card-meta) { grid-template-rows: auto minmax(0, 1fr) auto; }
.card-row .card-meta { align-self: end; }

/* The question icons were bare 24px strokes next to 68px chips everywhere else,
   which read as an afterthought. Same chip treatment, sized for the row. */
.question { gap: 15px; padding: 15px 20px 15px 15px; }
.question svg {
  width: 44px; height: 44px; padding: 10px; box-sizing: border-box;
  border-radius: 13px; background: var(--blue-soft); color: var(--blue-ink);
  stroke-width: 1.7;
}
@media (max-width: 640px) {
  .question svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; }
}

/* ---------------- numbered cards ----------------
   The seven questions build on each other, so the cards carry their position.
   The number sits in the corner rather than in the heading: it guides the eye
   without becoming part of the sentence. */

.num-card { position: relative; }
.num-card::after {
  content: attr(data-num);
  position: absolute; top: 16px; right: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-ink);
  font-family: var(--display); font-weight: 600; font-size: 13px;
  line-height: 1;
}
/* the heading must not run under the number */
.num-card h3 { padding-right: 34px; }

/* "Free" said where it counts, not as a whisper in a badge */
.badge-free { background: rgba(0, 112, 235, .12); color: var(--blue-ink); }
.free-tag {
  display: inline-block; margin-left: 12px; vertical-align: 5px;
  padding: 5px 13px; border-radius: 999px;
  background: var(--blue); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* The mark shown as itself. It used to sit inside a white chip, which put a
   dark disc on the page; the K now stands on its own ground. */
.mark-show { display: flex; gap: 18px; align-items: center; margin-bottom: 10px; }
.mark-show img { width: 76px; height: 76px; flex: 0 0 auto; }
.mark-show p { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }

/* the footer and note-card chips hold the same transparent K, so they need a
   little more room inside than the old disc did */
.mark-chip { padding: 5px; }
.founder-badge img { object-fit: contain; }

/* ---------------- the people asking ----------------
   The questions used to be a list of chips. They start life in a meeting, so
   the page now opens with the meeting: a few figures and the things they ask.
   Deliberately faceless - no age, no gender, no assumption about who is
   running the business. */

.diagram .d-person circle, .diagram .d-person path { fill: #b9cee9; }
.diagram .d-person.is-front circle, .diagram .d-person.is-front path { fill: var(--navy-2); }
.diagram .d-ground { stroke: var(--line); stroke-width: 3; fill: none; }

.diagram .d-bubble rect, .diagram .d-bubble circle {
  fill: #fff; stroke: var(--line); stroke-width: 1.5;
}
.diagram .d-bubble text { font-size: 15px; fill: var(--ink); font-weight: 500; }
/* two of them carry the brand blue so the eye has somewhere to land first */
.diagram .d-bubble.is-key rect, .diagram .d-bubble.is-key circle {
  fill: var(--blue); stroke: var(--blue);
}
.diagram .d-bubble.is-key text { fill: #fff; }

/* ---------------- questions, side by side ----------------
   The picture and the list say the same thing two ways, so they belong on one
   screen rather than one after the other: the meeting on the left, the
   questions written out on the right. */

.who-label {
  margin-top: 26px; margin-bottom: 12px;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}

.q-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
.q-pair .q-art { margin: 0; }
.q-pair .q-art figcaption { margin-top: 12px; }

.questions.is-stack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* tighter than the full-width version, so the column finishes about where the
   picture beside it does */
.q-pair .question { padding: 12px 18px 12px 13px; gap: 13px; font-size: 15.5px; }
.q-pair .question svg { width: 38px; height: 38px; padding: 9px; border-radius: 12px; }

@media (max-width: 900px) {
  .q-pair { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .q-pair .question { padding: 15px 18px; }
  .q-pair .question svg { width: 40px; height: 40px; }
}

/* the portrait picture fits a phone without scrolling, so it opts out of the
   sideways-scroll frame the wide diagrams need */
@media (max-width: 720px) {
  .q-art .diagram-scroll { overflow-x: visible; }
  .q-art .diagram-scroll svg { min-width: 0; }
  .q-art figcaption::before { content: none; }
}

/* The portrait picture is half a column wide, so it scales down a long way on
   a phone. Its text is set larger in the drawing to survive that: at 375px it
   lands near 12px instead of under 10px, which is the difference between
   readable and decorative. */
.q-art .d-bubble text { font-size: 18px; }

/* ---------------- grouped questions ----------------
   The questions arrive in three waves in a real meeting: what is happening,
   then how do we change it, then can I trust the number. The page follows the
   same order. */

.q-group-label {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 14px;
}
.q-group-label strong { color: var(--blue-ink); }/* a question with the answer under it: the question alone leaves the reader
   wondering what they would actually get back */

/* the data-quality group is a quieter aside, not a second sales pitch */
.qa.is-quiet { background: var(--ground-2); border-color: transparent; }
.qa.is-quiet .qa-q svg { background: #fff; color: var(--ink-2); }

/* an icon inside the step circle says what the step is; the small number keeps
   the reading order, which the plain circles used to carry on their own */
.diagram .d-step-icon {
  fill: none; stroke: #fff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.diagram .d-step-num-bg { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.diagram .d-step-num { font-size: 13px; font-weight: 600; fill: var(--navy-2); }

/* the customer line inside an example card */
.card-cust { font-size: 14px; color: var(--ink-2); }
.card-cust strong { font-family: var(--display); color: var(--blue-ink); }

/* four cards under an auto-fit grid landed 3 + 1, which reads as a mistake */
.qa-grid.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .qa-grid.is-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Cards that also carry a customer line have four rows, not three. The old
   rule put the stretch slack in the description row, which left a hole in the
   middle of every card shorter than the tallest one. The slack belongs in the
   last row, just above the quiet source line. */
.card-row:has(.card-cust) { grid-template-rows: auto auto auto minmax(0, 1fr); }
.card-row .card-cust { margin-top: 2px; }

/* ---------------- products ---------------- */

.badge-custom { background: rgba(7, 35, 83, .08); color: var(--navy-2); }
.feature-note { margin-top: 16px; font-size: 14px; color: var(--ink-3); }

.prod-grid { gap: 20px; }
/* the status badge sits between the name and the description, so the reader
   knows whether a thing exists before reading what it does */
.prod .badge { justify-self: start; align-self: start; margin-bottom: 2px; }
.prod h3 { margin-bottom: 2px; }
.card-row:has(.badge) { grid-template-rows: auto auto auto minmax(0, 1fr); }

/* ---------------- founder, smaller ----------------
   The portrait was taking a third of a wide screen, which made the page about
   the photograph. Narrower frame, more room for the words. */

.founder.is-compact { grid-template-columns: minmax(0, 236px) minmax(0, 1fr); gap: 38px; align-items: start; }
.founder.is-compact .founder-photo { aspect-ratio: 4 / 5; }
.founder-story { font-size: 15.5px; color: var(--ink-2); margin-top: 14px; max-width: 68ch; }

@media (max-width: 780px) {
  .founder.is-compact { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .founder.is-compact .founder-frame { max-width: 220px; }
}

/* The img carries height="950" for layout stability while loading, and that
   presentational attribute became a real CSS height - so aspect-ratio was
   ignored and the portrait rendered nearly a thousand pixels tall. height:auto
   hands control back to the ratio. */
.founder-photo, .founder-mini { height: auto; }

/* ---------------- even cards, with a fold ----------------
   Cards in a marked grid all get the same compact box. Anything that does not
   fit folds behind a chevron rather than setting the height of the whole row,
   which is what left the short cards looking half empty.

   The height is fixed rather than "as tall as the tallest", because letting one
   long card size the grid is how the boxes got too big in the first place. */

.grid.is-even { --even-h: 296px; }
.grid.is-even > .card { height: var(--even-h); position: relative; padding-bottom: 44px; }
.grid.is-even > .card.is-open { height: auto; }

/* one row rule for these cards, so the earlier :has() rules cannot fight it */
.grid.is-even > .card.card-row { grid-template-rows: minmax(0, 1fr) auto; }
.grid.is-even > .card > .card-body { grid-column: 2; min-height: 0; overflow: hidden; position: relative; }
.grid.is-even > .card > .card-meta,
.grid.is-even > .card > .card-link { grid-column: 2; align-self: end; margin-top: 10px; }

/* a soft fade shows there is more before you notice the chevron */
.grid.is-even > .card.has-more > .card-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 82%);
  pointer-events: none;
}
.grid.is-even > .card.is-open > .card-body::after { opacity: 0; }

.card-more {
  position: absolute; right: 16px; bottom: 11px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--blue-ink);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s, color .15s;
}
.card-more svg { width: 17px; height: 17px; transition: transform .2s; }
.card-more:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.card.is-open .card-more svg { transform: rotate(180deg); }

/* a card with nothing to fold does not need the reserved strip */
.grid.is-even > .card:not(.has-more):not(.is-open) { padding-bottom: 26px; }

@media (max-width: 560px) {
  .grid.is-even { --even-h: auto; }
  .grid.is-even > .card { height: auto; padding-bottom: 26px; }
  .grid.is-even > .card > .card-body { overflow: visible; }
  .grid.is-even .card-more { display: none; }
  .grid.is-even > .card.has-more > .card-body::after { content: none; }
}

/* ---------------- home: the product's own tabs ----------------
   The panel walks through the report so the breadth is visible before anyone
   clicks. */

/* Keep one steady dashboard tab row. On narrow screens it scrolls sideways,
   keeping each label and its tap target easy to select. */
.shot-tabs {
  display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--line);
}
.shot-tabs button {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  padding: 8px 10px; min-height: 36px; border-radius: 7px;
  font-family: var(--display); font-weight: 500; font-size: 12px;
  color: var(--ink-3); white-space: nowrap; transition: color .15s, background .15s;
}
.shot-tabs button:hover { color: var(--ink-2); }
.shot-tabs button.is-on { color: #fff; background: var(--blue); }

/* JS fits the viewport to the selected panel; the height eases between slides. */
.shot-panels {
  position: relative; padding: 16px 18px 6px; min-height: 236px;
  transition: height .34s cubic-bezier(.22, .61, .36, 1);
}
.shot-panel { display: none; }
.shot-panel.is-on { display: block; animation: shotIn .34s ease both; }
@keyframes shotIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .shot-panel.is-on { animation: none; } }

/* little charts inside the panel */
/* The month labels are absolute at bottom: -17px, so they live outside this
   box. 10px underneath meant they landed on top of the line below. */
.shot-bars { display: flex; align-items: flex-end; gap: 9px; height: 84px; margin: 14px 0 27px; }
.shot-bars span {
  flex: 1 1 0; height: var(--h); background: #cfe0f7; border-radius: 4px 4px 0 0;
  position: relative;
}
.shot-bars span.is-now { background: var(--blue); }
.shot-bars i {
  position: absolute; left: 0; right: 0; bottom: -17px; text-align: center;
  font-style: normal; font-size: 10.5px; color: var(--ink-3);
}

.shot-rank { display: grid; gap: 9px; margin-top: 14px; }
.shot-rank div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.shot-rank span { font-size: 12.5px; color: var(--ink-2); }
.shot-rank b {
  font-family: var(--display); font-size: 12.5px; color: var(--ink); justify-self: end;
  position: relative; padding-left: 74px;
}
/* --bar is a plain number, not a percentage, and that is the whole point.
   A percentage here resolves against this element's own width, and this
   element is the amount - so the longer the number, the longer its bar, until
   the bar ran underneath the digits. 100 now means 64px, inside the 74px of
   padding the number sits behind, so the longest bar still clears the text. */
.shot-rank b::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: calc(var(--bar) * .64px); height: 7px; border-radius: 4px; background: var(--blue);
  opacity: .78;
}

.shot-split { display: flex; gap: 5px; margin: 16px 0 14px; }
.shot-split span {
  width: var(--w); padding: 7px 9px; border-radius: 7px;
  font-size: 11.5px; font-family: var(--display); font-weight: 600; white-space: nowrap;
}
.shot-split .is-paid { background: rgba(22, 171, 101, .14); color: #0c7a46; }
.shot-split .is-open { background: rgba(215, 154, 0, .16); color: #8a6400; }

.shot-list { display: grid; gap: 8px; margin-top: 14px; counter-reset: shot; }
.shot-list div {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.shot-list div:last-child { border-bottom: 0; }
.shot-list span { color: var(--ink-2); }
.shot-list b { font-family: var(--display); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.shot-list b.is-risk { color: var(--risk); }
.shot-list.is-numbered span::before {
  counter-increment: shot; content: counter(shot) ". ";
  font-family: var(--display); font-weight: 600; color: var(--blue-ink);
}

.hero-shot .shot-cta { display: block; }

/* ---------------- questions, two columns ----------------
   The list first, the explanation under it. A reader scans the questions to
   find their own, then reads why it matters - in that order, not interleaved. */

.q-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px; margin-top: 46px; align-items: start;
}
.q-col {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 28px 24px;
}
.q-col.is-quiet { background: var(--ground-2); border-color: transparent; }

.q-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 2px; }
.q-list li {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--ink);
  line-height: 1.32;
}
.q-list li:last-child { border-bottom: 0; }
.q-list svg {
  width: 34px; height: 34px; flex: 0 0 auto; padding: 8px; box-sizing: border-box;
  border-radius: 11px; background: var(--blue-soft); color: var(--blue-ink); stroke-width: 1.7;
}
.q-col.is-quiet .q-list li { border-bottom-color: #dde6f3; }
.q-col.is-quiet .q-list svg { background: #fff; color: var(--ink-2); }

.q-summary { display: flex; gap: 13px; align-items: flex-start; padding-top: 18px; border-top: 2px solid var(--blue-soft); }
.q-summary svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; color: var(--blue); }
.q-summary p { font-size: 14.5px; color: var(--ink-2); }
.q-summary strong { font-family: var(--display); color: var(--ink); }
.q-col.is-quiet .q-summary { border-top-color: #dde6f3; }
.q-col.is-quiet .q-summary svg { color: var(--ink-3); }

@media (max-width: 860px) {
  .q-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ---------------- the four steps, given some weight ----------------
   Flat circles with a hairline glyph read as a diagram of a process nobody has
   been through. A gradient disc, a soft halo that breathes, and glyphs with a
   second detail in them make it look like something that actually happens. */

/* a gradient stroke needs a bounding box with height; on a flat horizontal
   line it renders as nothing, so the rails were invisible and only the
   arrowheads showed */
.diagram .d-rail { stroke: #c6d8f0; stroke-width: 3; fill: none; stroke-linecap: round; }
.diagram .d-halo { fill: var(--blue); opacity: .09; transform-box: fill-box; transform-origin: center; }
.diagram .d-step-icon { fill: none; stroke: #fff; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.diagram .d-step-icon circle { fill: #fff; stroke: none; }
.diagram .d-step-num-bg { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.diagram .d-step-num { font-size: 13.5px; font-weight: 600; fill: var(--navy-2); }

.diagram .d-halo { opacity: .09; }

/* ---------------- products, one per row ----------------
   Each product gets a whole row, the way Business Pulse does above it, so the
   name and the explanation sit side by side instead of being squeezed into a
   column and folded. */

.prod-rows { display: grid; gap: 14px; }
.prod-row {
  display: grid;
  grid-template-columns: 30px 64px minmax(190px, 250px) minmax(0, 1fr);
  gap: 20px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 26px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.prod-row:hover { border-color: #cfe0f7; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.prod-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 3px;
  background: var(--blue-soft); color: var(--blue-ink);
  font-family: var(--display); font-weight: 600; font-size: 13px;
}
.prod-row .card-icon { margin-bottom: 0; width: 64px; height: 64px; }
.prod-row .card-icon svg { width: 32px; height: 32px; }
.prod-head { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.prod-head h3 { font-size: 18px; line-height: 1.25; }
.prod-say p { font-size: 15px; }
.prod-say .card-meta { margin-top: 12px; }
.prod-say .card-link { display: inline-block; margin-top: 12px; }

@media (max-width: 880px) {
  .prod-row { grid-template-columns: 30px 56px minmax(0, 1fr); gap: 14px 16px; padding: 20px; }
  .prod-row .card-icon { width: 56px; height: 56px; }
  .prod-row .card-icon svg { width: 28px; height: 28px; }
  .prod-head { grid-column: 3; }
  .prod-say { grid-column: 1 / -1; }
}


/* ================= design pass ==================================
   One rhythm for the whole site, replacing the per-page inline margins that
   had crept in at 12, 14, 16 and 20px. Set once here so every page opens the
   same way. */

h1 + .lede, h2 + .lede, h3 + .lede { margin-top: 13px; }
.lede + .lede { margin-top: 14px; }
.eyebrow + h1, .eyebrow + h2 { margin-top: 0; }
.ticks + .lede { margin-top: 16px; }

/* a centred section head centres its own eyebrow - this was being done with
   an inline style on every single one */
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lede { margin-inline: auto; }

/* The page opener, identical on every page. The reading-width cap goes on the
   text itself, not on the shell - putting it on the shell narrowed the whole
   band and left the opener indented against every section below it. */
.page-head { max-width: var(--max); }
.page-head > .eyebrow, .page-head > h1, .page-head > .lede { max-width: 66ch; }
.page-head .lede { margin-top: 13px; }

/* two-column blocks that carry a card on one side */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
.card-lg { padding: 28px; }
.gap-top { margin-top: 22px; }

/* the hero was built before the scale came down */
.hero-light { padding-block: clamp(30px, 4.4vw, 56px) clamp(34px, 4.6vw, 60px); }

/* nothing should have a bigger gap than the section that contains it */
.q-cols { margin-top: 34px; }
.answer-band { margin-top: 30px; }
.honest-note { margin-top: 18px; }

/* ---------------- the three products, as one picture ----------------
   Clean it, understand it, learn it. The widths differ because the names do;
   forcing three equal boxes would have cramped the longest one. */

.diagram .kp rect { stroke: none; }
.diagram .kp-icon { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.diagram .kp-name { font-size: 21px; font-weight: 600; fill: #fff; }
.diagram .kp-say { font-size: 14px; fill: rgba(255, 255, 255, .82); }

/* a product row that carries a list, not just a line */
.prod-row.is-lead { align-items: start; padding: 26px 28px; }
.prod-row.is-lead .prod-head { gap: 7px; }
.prod-row.is-lead h3 { font-size: 21px; }
.prod-tag { font-size: 14px; color: var(--ink-3); }
.prod-row .ticks { margin-top: 14px; }
.prod-row .ticks li { font-size: 14.5px; }
.prod-row .card-meta { margin-top: 14px; }

/* ================= sections that must fit one screen =======================
   The questions and the real examples are each meant to be taken in at a
   glance, not scrolled through. Everything here is sized backwards from a
   900px laptop: 900 less the 69px header leaves 831, so the padding, the
   head and the content are trimmed to land inside that. */

/* sized in vh, not px: a fixed budget fits a 900px laptop and overflows an
   800px one. These shrink with the screen so the section lands inside it
   either way. */
.section.is-one-view { padding-block: clamp(22px, 4.4vh, 40px); }
.section.is-one-view .section-head { margin-bottom: clamp(14px, 2.4vh, 22px); }

/* the question list: eight rows have to sit beside the picture, so each one
   gets a smaller chip and tighter padding */
.is-one-view .q-pair .question { padding: clamp(6px, 1vh, 9px) 16px clamp(6px, 1vh, 9px) 10px; gap: 11px; font-size: 15px; }
.is-one-view .q-pair .question svg { width: 32px; height: 32px; padding: 7px; border-radius: 10px; }
.is-one-view .questions.is-stack { gap: clamp(4px, 0.8vh, 7px); }

/* the picture matches the list rather than setting its own height */
.is-one-view .q-art .diagram-scroll svg { max-height: clamp(330px, 54vh, 486px); width: auto; margin-inline: auto; }

/* six example cards in two rows of three, inside the same budget */
.is-one-view .grid.is-even { --even-h: clamp(190px, 25vh, 243px); }
.is-one-view .note-card { padding: clamp(13px, 1.8vh, 18px) 20px; margin-top: clamp(12px, 1.8vh, 18px); }
.is-one-view .note-card p { font-size: 14.5px; }

@media (max-width: 1000px) {
  /* a phone scrolls anyway; let everything breathe again */
  .section.is-one-view { padding-block: clamp(32px, 4.2vw, 48px); }
  .is-one-view .q-art .diagram-scroll svg { max-height: none; width: 100%; }
  .is-one-view .q-pair .question { padding: 14px 18px; }
  .is-one-view .q-pair .question svg { width: 40px; height: 40px; padding: 9px; }
}

/* the how / data-quality columns, sized to the same one-screen budget */
.is-one-view .q-col { padding: clamp(16px, 2.2vh, 24px) 22px clamp(14px, 2vh, 20px); }
.is-one-view .q-list { margin-bottom: clamp(12px, 1.8vh, 18px); }
.is-one-view .q-list li { padding: clamp(5px, 1vh, 9px) 0; font-size: 15px; }
.is-one-view .q-list svg { width: clamp(26px, 3.4vh, 30px); height: clamp(26px, 3.4vh, 30px); padding: 6px; border-radius: 9px; }
.is-one-view .q-cols { margin-top: 0; gap: 20px; }
.is-one-view .q-summary { padding-top: clamp(11px, 1.6vh, 16px); }
.is-one-view .q-summary p { font-size: 14px; }
.is-one-view .answer-band { margin-top: clamp(14px, 2vh, 22px); padding: clamp(14px, 2vh, 20px) 24px; }
.is-one-view .answer-band p { font-size: 14.5px; margin-top: 5px; }
.is-one-view .honest-note { margin-top: clamp(10px, 1.4vh, 16px); font-size: 13.5px; }

@media (max-width: 1000px) {
  .is-one-view .q-list li { padding: 11px 0; }
  .is-one-view .q-list svg { width: 34px; height: 34px; padding: 8px; }
}

/* the four services, inside the same one-screen budget */
.is-one-view .prod-rows { gap: clamp(7px, 1vh, 14px); }
/* the rate matters more than the floor here: 2vh is already 16px at 800,
   so raising the floor changed nothing. 1.4vh is what actually shrinks. */
.is-one-view .prod-row.is-lead { padding: clamp(11px, 1.4vh, 22px) 26px; }
.is-one-view .prod-row.is-lead h3 { font-size: clamp(17px, 2.1vh, 19px); }
.is-one-view .prod-row .card-icon { width: clamp(46px, 6vh, 56px); height: clamp(46px, 6vh, 56px); }
.is-one-view .prod-row .card-icon svg { width: 26px; height: 26px; }
.is-one-view .prod-row .prod-say p { font-size: 14.5px; }
.is-one-view .prod-row .card-meta { margin-top: clamp(6px, 1vh, 10px); }
.is-one-view .prod-tag { font-size: 13.5px; }


/* ---- Real examples: let the whole description be read ----
   Three of the six cards were folding behind a chevron - Logistics needed
   201px of a 112px budget - so the sentence she asked for about a trucking
   dashboard was the part being hidden. The budget comes from the row height,
   so the way to show the text is to make the text take less room: smaller
   type, tighter leading, and the customer line no longer kept apart from the
   sentence above it. */
.examples-grid .card-row p,
.examples-grid .card-row .card-cust {
  font-size: 13.5px; line-height: 1.5;
}
.examples-grid .card-row h3 { font-size: 16.5px; line-height: 1.3; }
.examples-grid .card-row .card-cust { margin-top: 6px; }
.examples-grid .card-row .card-meta { font-size: 12px; }
/* the cards keep the row's height from the tallest of them, which is what
   grid does on its own - nothing is capped, so nothing collapses. */
.examples-grid > .card-row { align-content: start; }


/* ---- How we work: the four steps, written out ----
   The diagram shows the order. It cannot hold enough words to tell anyone what
   actually happens, so each step says it plainly underneath: what we do, and
   the one thing we need back. */
.step-notes { margin-top: 30px; align-items: start; }
.step-note {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px 20px;
}
.step-note-num {
  margin: 0 0 6px; font-family: var(--display); font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
}
.step-note h3 { margin: 0 0 8px; font-size: 16.5px; line-height: 1.3; }
.step-note p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.step-note-you {
  margin: 0; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3);
}
.step-note-you strong { font-family: var(--display); color: var(--ink); font-weight: 600; }

/* a service that needs a second paragraph - the honest limit after the promise */
.prod-say p + p { margin-top: 10px; }


/* ---- the services, read across ----
   Six stacked rows meant reading one, scrolling, reading the next, and never
   seeing them beside each other. Three cards to a row compares them at a
   glance. No fixed height here on purpose - grid makes a row's cards match
   without anything being capped, which is what collapsed the example cards. */
.plan-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px; align-items: stretch;
}
.plan-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px 24px 22px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.plan-card:hover {
  border-color: #cfe0f7; box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.plan-top { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.plan-card .card-icon { margin-bottom: 0; width: 54px; height: 54px; }
.plan-card .card-icon svg { width: 27px; height: 27px; }
.plan-num {
  width: 26px; height: 26px; border-radius: 50%; margin-left: auto;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-ink);
  font-family: var(--display); font-weight: 600; font-size: 13px;
}
.plan-card h3 { margin: 0 0 6px; font-size: 18.5px; line-height: 1.3; }
.plan-tag { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-3); }
.plan-list { margin: 0 0 18px; gap: 9px; }
.plan-list li { font-size: 14px; line-height: 1.5; gap: 9px; align-items: flex-start; }
.plan-list svg { width: 17px; height: 17px; margin-top: 2px; }
/* the time note sits on the floor of every card, so the line is level across
   the row however long the list above it runs */
.plan-meta {
  margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}


/* The message we wrote, kept where it can always be reached. A clipboard call
   can refuse quietly; a textarea cannot. */
.form-copy-wrap { margin-top: 14px; }
.form-copy-wrap summary {
  cursor: pointer; font-family: var(--display); font-weight: 600;
  font-size: 13.5px; color: var(--blue-ink);
}
.form-copy {
  display: block; width: 100%; margin: 10px 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--ink-2);
  resize: vertical;
}


/* ---- A or B ----
   Six cards in two rows meant scrolling to compare the two ways of working.
   They are one choice, so they are one row: A on the left, B on the right,
   everything each one includes visible without moving.

   No fixed height and no data-equal. Grid matches the two cards on its own;
   pinning a height is what collapsed the example cards. */
.pick-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 22px; align-items: stretch;
}
.pick-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 28px 24px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pick-card:hover { border-color: #cfe0f7; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.pick-card.is-b { background: linear-gradient(180deg, #f7fafe 0%, #fff 42%); }

.pick-top { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.pick-letter {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 14px; background: var(--blue); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1;
}
.pick-card.is-b .pick-letter { background: var(--navy); }
.pick-name h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.pick-tag { margin: 3px 0 0; font-size: 14px; color: var(--ink-3); }

.pick-list { margin: 0 0 18px; gap: 14px; }
.pick-list li { align-items: flex-start; gap: 10px; font-size: 14px; }
.pick-list svg { width: 18px; height: 18px; margin-top: 2px; }
.pick-list strong {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 15px; color: var(--ink); line-height: 1.3;
}
.pick-list em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.pick-when {
  display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 99px;
  background: var(--blue-soft); color: var(--blue-ink);
  font-family: var(--display); font-weight: 600; font-size: 11.5px;
}
/* the closing line sits on the floor of both cards, so it reads as one row */
.pick-foot {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.pick-foot strong { font-family: var(--display); color: var(--ink); font-weight: 600; }
.pick-note {
  margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--ink-3);
}


/* the dashboards she has actually built */
.founder-cred-label {
  margin: 18px 0 8px; font-family: var(--display); font-weight: 600;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.founder-built {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 5px 20px; margin: 0; padding: 0; list-style: none;
}
.founder-built li {
  position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.founder-built li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}


/* ---- Contact on one screen ----
   It was a banner, then the page, then the footer: 1350px against a 1000px
   window. The banner is gone and its heading now opens the left column, so
   the question and the form are on screen together and nobody has to scroll
   to find out where to type. */
.contact-page { padding-block: clamp(14px, 1.7vh, 30px); }
.contact-title {
  font-size: clamp(30px, 3.4vw, 41px); line-height: 1.1; margin: 6px 0 12px;
  letter-spacing: -.02em;
}
.contact-page .lede { margin-bottom: clamp(12px, 1.8vh, 22px); max-width: 46ch; }
.contact-next-label { margin-bottom: 10px; }
.contact-page .contact-next { margin-top: 0; gap: clamp(7px, 1.1vh, 11px); }
.contact-page .contact-next li { font-size: 14.5px; }
.contact-page .contact-ways { margin-top: clamp(14px, 2vh, 20px); }


/* On Contact the footer was 318px of links the reader had just used, and it
   was what pushed the form off the screen. Here it steps back to a line. */
body:has(.contact-page) .site-foot { padding-top: 16px; padding-bottom: 14px; }
body:has(.contact-page) .foot-top { gap: 18px; }
/* The two link columns repeat the header nav this reader has just used, and
   they are 161px of the reason the form will not fit a shorter window. On
   this one page the footer is the brand line and the contact line. */
body:has(.contact-page) .foot-col { display: none; }
body:has(.contact-page) .foot-top { padding-bottom: 12px; }
/* Hiding .foot-say saved nothing while the link columns were still setting the
   row height. With those gone the brand block is the row, so it saves its full
   46px - the same change, worth making only in the right order. */
body:has(.contact-page) .foot-say { display: none; }


/* ================= phones =================================================
   Measured at 375px before writing any of this. The page itself was sound -
   no sideways scroll anywhere, body text at 15.5px - so nothing here is a
   rewrite. Two things were genuinely wrong: things you tap were too small
   for a thumb, and four lines of real text were under 13px.

   What is deliberately NOT touched: the 56 small-text nodes inside the hero
   mockup. That is a picture of the product, not text to read. Scaling it up
   would stop it looking like a screenshot, which is the whole point of it. */
@media (max-width: 760px) {
  /* 44px is the smallest a thumb reliably hits. The footer links were 19. */
  .foot-col li a {
    display: flex; align-items: center; min-height: 44px;
  }
  .site-head .brand-lockup { display: flex; align-items: center; min-height: 44px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }

  /* The mockup's tabs are 28px and must stay 28px or the card stops looking
     like a screenshot. The tap area grows instead of the button: this box is
     invisible, centred on the tab, and 44px tall. */
  .shot-tabs button { position: relative; }
  .shot-tabs button::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }

  /* The real lines that were under 13px, across every page. Each was beaten by
     a more specific rule than a bare tag, so these name the element. 13px is
     the floor; the small-caps labels keep their letter-spacing, just bigger. */
  .foot-flow,
  .foot-col h4,
  .free-flag strong,
  .eyebrow,
  .card-meta,
  .examples-grid .card-row .card-meta,
  .pick-when,
  .badge,
  .label,
  .founder-role,
  .founder-cred-label,
  .founder-badge small,
  .kf-rail-label { font-size: 13px; }

  /* Contact form: the inputs were 21px and the labels sat on them. A taller
     field and a little space is the whole fix - a 21px input is a miss on a
     phone. */
  .input, .select, select.input { min-height: 46px; }
  textarea.input { min-height: 96px; }
  .contact-or a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* Give the executive KPIs enough room to read like dashboard measures rather
   than narrow tiles. The same two-column rhythm continues on phones. */
.shot-panel[data-view="pulse"] .pp-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px;
}
.shot-panel[data-view="pulse"] .pp-kpis > * {
  min-width: 0; min-height: 78px; padding: 13px 15px;
}
.shot-panel[data-view="pulse"] .pp-kpi span { font-size: 10.5px; letter-spacing: .08em; }
.shot-panel[data-view="pulse"] .pp-kpi strong {
  font-size: clamp(19px, 2.2vw, 23px); font-variant-numeric: tabular-nums;
}

/* ================= the home page, past the hero =========================
   The home page was the hero and then the footer: a visitor saw one screen
   and had to guess where to go. These sections take them through it in the
   order trust is built - what we believe, that we know their questions, how
   we work, that we have done it, and that starting is small. Built from the
   parts the other pages already use, so it reads as one site. */

/* how we think */
.philo { text-align: center; }
.philo .eyebrow { justify-content: center; }
.philo-big {
  margin: 4px 0 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.02em; color: var(--ink);
}
.philo-then {
  margin: 14px auto 0; max-width: 32ch; font-family: var(--display); font-weight: 500;
  font-size: clamp(19px, 2vw, 25px); line-height: 1.35; color: var(--blue);
}
.philo-why { margin: 22px auto 0; max-width: 58ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }

/* the questions, as the things people actually say */
.ask-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 880px; margin: 4px auto 24px;
}
.ask {
  padding: 11px 18px; border: 1px solid var(--line); background: #fff;
  border-radius: 18px 18px 18px 5px; box-shadow: var(--shadow-sm);
  font-family: var(--display); font-weight: 500; font-size: 15.5px; color: var(--ink);
}
.ask:nth-child(3n+2) { background: var(--blue); border-color: var(--blue); color: #fff; border-radius: 18px 18px 5px 18px; }
.more-link {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--blue-ink); text-decoration: none;
}
.more-link:hover { text-decoration: underline; }
.more-link svg { width: 16px; height: 16px; order: 2; }

/* four steps, compact */
.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.flow-step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 17px; }
.flow-step b {
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px;
  border-radius: 50%; background: var(--blue); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 14px;
}
.flow-step h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.flow-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* built and in use */
/* three things to open: the free tool, the public-data dashboard, the sample */
.proof-feature, .split-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
@media (max-width: 980px) { .proof-feature, .split-3 { grid-template-columns: minmax(0, 1fr); } }
.proof-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.proof-tile {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  font-family: var(--display); font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--ink);
}
.proof-tile .card-icon { width: 40px; height: 40px; flex: 0 0 auto; margin: 0; border-radius: 12px; }
.proof-tile .card-icon svg { width: 20px; height: 20px; }
.proof-note { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ink-3); }

/* two ways to start */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.way {
  display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.way:hover { border-color: #cfe0f7; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.way h3 { margin: 0 0 5px; font-size: 19px; }
.way p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.way em { display: inline-block; margin-top: 10px; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--blue-ink); }
.pick-letter.is-b { background: var(--navy); }

@media (max-width: 980px) {
  .flow-steps, .proof-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .flow-steps, .proof-tiles, .proof-feature, .ways { grid-template-columns: minmax(0, 1fr); }
  .ask { font-size: 14.5px; }
}

/* Business Pulse home tour */
.pulse-tour { background: var(--ground-2); }
.pulse-tour-head { max-width: 72ch; margin-bottom: 26px; }
.pulse-tour-sticky {
  position: sticky; top: 68px; z-index: 30;
  margin: 0 0 20px; padding: 9px 0;
  background: rgba(244, 248, 253, .95); backdrop-filter: blur(12px);
  border-block: 1px solid rgba(225, 233, 244, .9);
}
.pulse-tour-tabs {
  display: flex; align-items: center; gap: 5px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pulse-tour-tabs::-webkit-scrollbar { display: none; }
.pulse-tour-tabs a {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-height: 42px; padding: 8px 14px;
  border: 1px solid transparent; border-radius: 999px;
  color: var(--ink-2); font: 600 13.5px var(--display); text-decoration: none;
  white-space: nowrap; transition: color .18s, background .18s, border-color .18s;
}
.pulse-tour-tabs a:hover { color: var(--blue-ink); background: #fff; border-color: var(--line); }
.pulse-tour-tabs a[aria-current="location"] {
  color: #fff; background: var(--blue); border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(0, 112, 235, .16);
}
.pulse-tour-view {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center; gap: clamp(24px, 4vw, 52px);
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 300px; margin-top: 16px; padding: clamp(22px, 3.2vw, 38px);
  border: 1px solid var(--line); border-radius: 22px; background: #fff;
  box-shadow: var(--shadow-sm); scroll-margin-top: 150px;
}
.pulse-tour-view:nth-child(even) { background: #f9fbff; }
.pulse-tour-view::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 340px; height: 340px; right: -178px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 112, 235, .1), transparent 70%);
}
.pulse-tour-view:nth-child(even)::before {
  right: auto; left: -190px; top: auto; bottom: -220px;
  background: radial-gradient(circle, rgba(0, 205, 230, .12), transparent 70%);
}
.pulse-tour-view.is-cost::before {
  background: radial-gradient(circle, rgba(232, 47, 58, .09), transparent 70%);
}
.pulse-tour-view.is-collections::before {
  background: radial-gradient(circle, rgba(215, 154, 0, .1), transparent 70%);
}
.pulse-tour-view:nth-child(even) .pulse-tour-copy { order: 2; }
.pulse-tour-copy, .pulse-tour-visual { min-width: 0; }
.pulse-view-kicker {
  margin: 0 0 11px; color: var(--blue-ink);
  font: 700 11.5px var(--display); letter-spacing: .12em; text-transform: uppercase;
}
.pulse-tour-copy h3 { max-width: 18ch; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.18; }
.pulse-tour-copy > p:not(.pulse-view-kicker):not(.pulse-view-question) {
  margin-top: 12px; max-width: 45ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.65;
}
.pulse-view-question {
  margin-top: 18px; padding: 12px 14px;
  border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0;
  background: var(--ground-2); color: var(--ink-2); font-size: 14px;
}
.pulse-view-question strong { color: var(--ink); }
.pulse-tour-visual {
  position: relative; padding: clamp(17px, 2.2vw, 24px);
  border: 1px solid rgba(225, 233, 244, .95); border-radius: 18px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 10px 28px rgba(7, 35, 83, .07);
}
.pulse-visual-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  color: var(--ink-3); font: 600 11.5px var(--display); letter-spacing: .045em;
  text-transform: uppercase;
}
.pulse-badge {
  display: inline-flex; align-items: center; min-height: 27px; padding: 4px 10px;
  border-radius: 999px; color: var(--blue-ink); background: var(--blue-soft);
  font: 700 10.5px var(--display); letter-spacing: .04em; white-space: nowrap;
}
.pulse-badge.is-risk { color: #bb222d; background: rgba(232, 47, 58, .1); }
.pulse-badge.is-watch { color: #8a6400; background: rgba(215, 154, 0, .14); }
.pulse-net {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: rgba(232, 47, 58, .055);
}
.pulse-net span { color: var(--ink-3); font: 600 11px var(--display); letter-spacing: .07em; text-transform: uppercase; }
.pulse-net strong { grid-column: 1; color: var(--risk); font: 700 clamp(22px, 2.6vw, 30px) var(--display); font-variant-numeric: tabular-nums; }
.pulse-net small { grid-column: 2; grid-row: 1 / span 2; max-width: 18ch; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.pulse-tour-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.pulse-tour-kpis > div {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-width: 0; min-height: 65px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--ground-2);
}
.pulse-tour-kpis span { color: var(--ink-3); font: 600 10px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pulse-tour-kpis strong { color: var(--ink); font: 700 clamp(16px, 1.7vw, 20px) var(--display); font-variant-numeric: tabular-nums; }
.pulse-month-chart {
  display: flex; align-items: flex-end; gap: clamp(8px, 1.5vw, 16px);
  height: 176px; margin: 18px 5px 10px; padding: 0 6px;
  border-bottom: 1px solid var(--line);
}
.pulse-month-chart > div {
  display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 9px; height: 100%; min-width: 0;
}
.pulse-month-chart i {
  display: block; width: min(100%, 42px); height: var(--bar-height); min-height: 15px;
  border-radius: 7px 7px 2px 2px; background: #cadcf5; transform-origin: bottom;
}
.pulse-month-chart .is-current i { background: var(--blue); }
.pulse-month-chart span { color: var(--ink-3); font: 500 11px var(--display); }
.pulse-chart-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; color: var(--ink-2); font-size: 13px; }
.pulse-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--blue); }
.pulse-rank-list { display: grid; gap: 15px; margin-top: 18px; }
.pulse-rank-row > div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; color: var(--ink-2); font-size: 13px; }
.pulse-rank-row strong { color: var(--ink); font: 700 14px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pulse-rank-row > i { display: block; height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--ground-3); }
.pulse-rank-row > i::before { content: ""; display: block; width: var(--fill); height: 100%; border-radius: inherit; background: var(--blue); transform-origin: left; }
.pulse-rank-row.is-cost > i::before { background: var(--navy-2); }
.pulse-collection-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 17px 0 13px; }
.pulse-collection-total strong { color: var(--ink); font: 700 clamp(25px, 3vw, 34px) var(--display); font-variant-numeric: tabular-nums; }
.pulse-collection-total span { color: var(--ink-3); font-size: 13px; }
.pulse-collection-track {
  display: flex; overflow: hidden; min-height: 40px; border-radius: 10px; background: rgba(215, 154, 0, .12);
}
.pulse-collection-track span {
  display: flex; align-items: center; min-width: 0; flex: 0 0 var(--share);
  padding: 7px 10px; font: 700 12px var(--display); white-space: nowrap;
}
.pulse-collection-track .is-collected { color: #087b4b; background: rgba(22, 171, 101, .15); }
.pulse-collection-track .is-open { justify-content: center; padding-inline: 6px; color: #805d00; font-size: 10.5px; }
.pulse-stock-list { display: grid; gap: 0; margin-top: 6px; }
.pulse-stock-list > div {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center;
  gap: 10px; min-height: 53px; border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: 13px;
}
.pulse-stock-list > div:last-child { border-bottom: 0; }
.pulse-stock-list strong { color: var(--ink); font: 700 13px var(--display); white-space: nowrap; }
.pulse-stock-list strong.is-low { color: #bb222d; }
.pulse-stock-glyph { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.pulse-stock-glyph i { display: block; width: 8px; height: 15px; border-radius: 2px; background: #c4d8f3; }
.pulse-stock-glyph i:nth-child(2) { height: 21px; }
.pulse-stock-glyph i:nth-child(3) { height: 12px; }
.pulse-action-list { display: grid; gap: 0; margin: 7px 0 0; padding: 0; list-style: none; counter-reset: none; }
.pulse-action-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pulse-action-list li:last-child { border-bottom: 0; }
.pulse-action-list li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink); font: 700 13px var(--display); }
.pulse-action-list strong { display: block; color: var(--ink); font: 600 13.5px var(--display); }
.pulse-action-list small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }
.pulse-tour-views { display: grid; gap: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .pulse-tour-view.js-reveal {
    opacity: 0; transform: translateY(12px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
  }
  .pulse-tour-view.js-reveal.is-in { opacity: 1; transform: none; }
  .pulse-tour-view.js-reveal .pulse-month-chart i { transform: scaleY(.08); transition: transform .75s cubic-bezier(.22, .61, .36, 1); }
  .pulse-tour-view.js-reveal.is-in .pulse-month-chart i { transform: scaleY(1); }
  .pulse-tour-view.js-reveal .pulse-rank-row > i::before { transform: scaleX(.02); transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
  .pulse-tour-view.js-reveal.is-in .pulse-rank-row > i::before { transform: scaleX(1); }
  .pulse-tour-view.js-reveal .pulse-collection-track span { flex-basis: 0; transition: flex-basis .7s cubic-bezier(.22, .61, .36, 1); }
  .pulse-tour-view.js-reveal.is-in .pulse-collection-track .is-collected { flex-basis: 86%; }
  .pulse-tour-view.js-reveal.is-in .pulse-collection-track .is-open { flex-basis: 14%; }
}
@media (max-width: 900px) {
  .pulse-tour-view { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pulse-tour-view:nth-child(even) .pulse-tour-copy { order: 0; }
}
@media (max-width: 640px) {
  .pulse-tour-sticky { top: 68px; margin-inline: -18px; padding-inline: 18px; }
  .pulse-tour-tabs a { min-height: 44px; padding-inline: 12px; font-size: 12.5px; }
  .pulse-tour-view { min-height: 0; padding: 20px 16px; border-radius: 17px; scroll-margin-top: 138px; }
  .pulse-tour-copy h3 { font-size: 23px; }
  .pulse-tour-visual { padding: 15px 13px; border-radius: 14px; }
  .pulse-month-chart { height: 148px; gap: 7px; margin-inline: 0; }
  .pulse-tour-kpis { gap: 7px; }
  .pulse-tour-kpis > div { min-height: 61px; padding: 9px 10px; }
  .pulse-tour-kpis span { font-size: 9.5px; }
  .pulse-tour-kpis strong { font-size: 17px; }
  .pulse-net { grid-template-columns: minmax(0, 1fr); }
  .pulse-net small { grid-column: 1; grid-row: auto; max-width: none; }
  .pulse-stock-list > div { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 7px; font-size: 12px; }
}

/* ---- business -> data -> insight -> action -> improvement ----
   The journey the whole site argues for, said once, under the idea it
   comes from. Five steps across, an arrow between each, no decoration. */
.journey {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  max-width: 1040px; margin: 34px auto 0; padding: 0; list-style: none; counter-reset: none;
}
.journey li {
  position: relative; padding: 16px 16px 15px; text-align: left;
  background: #fff; border: 1px solid var(--line);
}
.journey li:first-child { border-radius: 14px 0 0 14px; }
.journey li:last-child { border-radius: 0 14px 14px 0; }
.journey li + li { border-left: 0; }
.journey li:not(:last-child)::after {
  content: ""; position: absolute; right: -7px; top: 50%; z-index: 1;
  width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg);
  background: #fff; border-top: 1px solid var(--line); border-right: 1px solid var(--line);
}
.journey b {
  display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 700;
  font-size: 15.5px; color: var(--blue-ink);
}
.journey span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

/* ---- the five questions ----
   Each card names the view that answers it, so a visitor can check the
   claim in one click rather than take it on trust. */
.five-q { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.fq {
  display: flex; flex-direction: column; padding: 18px 18px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fq:hover { border-color: #cfe0f7; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.fq-num {
  display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 12px;
  border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink);
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
}
.fq h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.25; }
.fq p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.fq em {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
  font-style: normal; font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--blue-ink);
}

.cta-stage { margin: 12px 0 0; font-size: 14px; color: var(--on-navy-2, #aac0e6); }

@media (max-width: 1100px) {
  .five-q { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* the journey turns to a column: arrows point down instead of across */
  .journey { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .journey li, .journey li:first-child, .journey li:last-child { border-radius: 0; }
  .journey li:first-child { border-radius: 14px 14px 0 0; }
  .journey li:last-child { border-radius: 0 0 14px 14px; }
  .journey li + li { border-left: 1px solid var(--line); border-top: 0; }
  .journey li:not(:last-child)::after {
    right: auto; left: 50%; top: auto; bottom: -7px;
    transform: translateX(-50%) rotate(135deg);
  }
  .five-q { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .five-q { grid-template-columns: minmax(0, 1fr); }
  .fq em { font-size: 13px; }
}


/* ---- home on a phone: designed, not just stacked ----
   Everything collapsing to one column made the home page 7,859px - almost ten
   screens. Short items do not need a full row each on a phone: the eight
   dashboard names sit two to a row, the journey and the five questions lose
   the padding that was sized for desktop, and the question cards lay out as
   number beside text instead of number above it. */
@media (max-width: 640px) {
  .proof-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .proof-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: 13.5px; }
  .proof-tile .card-icon { width: 34px; height: 34px; border-radius: 10px; }
  .proof-tile .card-icon svg { width: 17px; height: 17px; }

  .journey { margin-top: 24px; }
  .journey li { padding: 11px 15px; }
  .journey b { font-size: 15px; margin-bottom: 2px; }
  .journey span { font-size: 13px; }

  .five-q { gap: 10px; }
  .fq { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 14px 15px; }
  .fq-num { grid-row: 1 / span 3; margin: 0; }
  .fq h3 { margin-bottom: 3px; font-size: 16px; }
  .fq p { margin-bottom: 8px; font-size: 13.5px; }
  .fq em { grid-column: 2; padding-top: 7px; }

  .flow-step { padding: 14px 15px; }
  .flow-step b { width: 26px; height: 26px; margin-bottom: 8px; font-size: 13px; }

  .philo-why { font-size: 15.5px; }
}


/* ================= home: life and motion =================
   Drawn scenes, not stock pictures: each one is the step it sits under,
   moving the way that step moves. Everything is visible at rest, so a
   browser that never paints (or a reader who turned motion off) still gets
   the whole page; motion only ever adds. */

/* -- hero: a quiet sky behind the words -- */
.hero-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background-image: radial-gradient(circle, rgba(7, 35, 83, .075) 1px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, #000 20%, transparent 75%); }
.hero-sky i { position: absolute; border-radius: 50%; display: block; }
.hero-sky i:nth-child(1) { width: 520px; height: 520px; right: -120px; top: -200px; background: radial-gradient(circle, rgba(0, 112, 235, .13), transparent 66%); }
.hero-sky i:nth-child(2) { width: 460px; height: 460px; left: 36%; bottom: -260px; background: radial-gradient(circle, rgba(0, 205, 230, .14), transparent 66%); }
.hero-sky i:nth-child(3) { width: 300px; height: 300px; left: -80px; top: 10%; background: radial-gradient(circle, rgba(7, 35, 83, .07), transparent 66%); }
.hero-light::before, .hero-light::after { display: none; }

/* -- the journey, with a scene in each step -- */
.journey.has-scenes li { padding-top: 12px; }
.scene { display: block; width: 100%; height: auto; margin: 0 0 10px; overflow: visible; }
.scene .ln { fill: var(--line); }
.scene .f-soft { fill: var(--blue-soft); } .scene .f-blue { fill: var(--blue); } .scene .f-navy { fill: var(--navy); }
.scene .f-white { fill: #fff; } .scene .f-good { fill: var(--good); } .scene .f-ink3 { fill: var(--ink-3); }
.scene .st { stroke: var(--line); stroke-width: 1.2; }
.scene .s-line { stroke: var(--line); stroke-width: 1.4; fill: none; }
.scene .s-line2 { stroke: #cfe0f7; stroke-width: 3; stroke-linecap: round; fill: none; }
.scene .s-blue { stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.scene .s-white { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.scene .s-navy-thin { stroke: #9fb3d3; stroke-width: 2; stroke-linecap: round; fill: none; }
.scene .s-navy-fat { stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.scene .s-navy-dash { stroke: var(--navy); stroke-width: 2.2; fill: none; stroke-dasharray: 58 24; stroke-linecap: round; }
.s-data .hl { fill: rgba(0, 205, 230, .32); }
.s-data .flow { stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; fill: none; stroke-dasharray: 5 5; }
.s-insight .trend { stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.s-action .box { fill: #fff; stroke: #9fb3d3; stroke-width: 1.4; }
.s-action .chk { stroke: var(--good); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.s-action .arm { stroke: var(--blue); stroke-width: 6; stroke-linecap: round; }
.s-improve .rise { stroke: var(--blue); stroke-width: 2.8; stroke-linecap: round; fill: none; }
.s-improve .head { stroke: var(--blue); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.s-improve .spark { fill: var(--cyan); }

/* -- five questions: the mark beside the number -- */
.fq-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fq-top .fq-num { margin-bottom: 0; }
.fq-art { width: 30px; height: 30px; color: var(--navy); opacity: .75; display: grid; place-items: center; }
.fq-art svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* -- open one now: motion on top of each card -- */
.card-lg.has-art { padding-top: 0; overflow: hidden; }
.card-art { margin: 0 -28px 20px; height: 112px; background: linear-gradient(180deg, var(--ground-2), #fff); border-bottom: 1px solid var(--line); }
.card-art svg { width: 100%; height: 100%; display: block; }
.art-pulse .bars rect { fill: #cfe0f7; transform-box: fill-box; transform-origin: 50% 100%; }
.art-pulse .bars rect.is-top { fill: var(--blue); }
.art-pulse .base { stroke: var(--line); stroke-width: 2; }
.art-pulse .pill rect { fill: rgba(215, 154, 0, .16); } .art-pulse .pill circle { fill: var(--watch); }
.art-pulse .pill text { font-family: var(--display); font-weight: 600; font-size: 11px; fill: #8a6400; }
.art-flood .hill { fill: #e6efdc; }
.art-flood .house path { fill: var(--navy); } .art-flood .house rect { fill: #fff; }
.art-flood .person circle, .art-flood .person rect { fill: var(--navy); }
.art-flood .w1 { fill: rgba(0, 112, 235, .40); } .art-flood .w2 { fill: rgba(0, 205, 230, .40); }
.art-flood .rain path { stroke: #9fb3d3; stroke-width: 1.6; stroke-linecap: round; }
.art-health .grid { stroke: var(--line); stroke-width: 1.5; }
.art-health .beat { stroke: var(--blue); stroke-width: 2.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.art-health .dot { fill: var(--risk); }
.art-health .heart path { fill: var(--risk); transform-box: fill-box; transform-origin: center; }

/* -- the close: light moving behind the ask -- */
.cta-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cta-glow i { position: absolute; border-radius: 50%; display: block; }
.cta-glow i:nth-child(1) { width: 560px; height: 560px; right: -160px; top: -240px; background: radial-gradient(circle, rgba(0, 205, 230, .22), transparent 64%); }
.cta-glow i:nth-child(2) { width: 480px; height: 480px; left: -140px; bottom: -280px; background: radial-gradient(circle, rgba(0, 112, 235, .30), transparent 64%); }

/* -- motion, for those who have not turned it off -- */
@media (prefers-reduced-motion: no-preference) {
  .hero-sky i:nth-child(1) { animation: kfDrift 22s ease-in-out infinite; }
  .hero-sky i:nth-child(2) { animation: kfDrift 26s ease-in-out infinite reverse; }
  .hero-sky i:nth-child(3) { animation: kfDrift 19s ease-in-out infinite 3s; }
  .cta-glow i:nth-child(1) { animation: kfDrift 24s ease-in-out infinite; }
  .cta-glow i:nth-child(2) { animation: kfDrift 28s ease-in-out infinite reverse; }
  @keyframes kfDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } }

  .js-reveal.is-in:nth-child(5) { transition-delay: .24s; }

  /* business: two people, taking turns */
  .s-talk .bub { transform-box: fill-box; transform-origin: 50% 100%; }
  .s-talk .ba { animation: kfBubA 4.8s ease-in-out infinite; }
  .s-talk .bb { animation: kfBubB 4.8s ease-in-out infinite; }
  @keyframes kfBubA { 0%, 6% { opacity: 0; transform: translateY(4px) scale(.96); } 14%, 44% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: translateY(4px) scale(.96); } }
  @keyframes kfBubB { 0%, 54% { opacity: 0; transform: translateY(4px) scale(.96); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px) scale(.96); } }
  .s-talk .pa, .s-talk .pb { transform-box: fill-box; transform-origin: 50% 100%; animation: kfSway 4.8s ease-in-out infinite; }
  .s-talk .pb { animation-delay: 2.4s; }
  @keyframes kfSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg); } }

  /* data: the spreadsheet is read row by row, the clean table is confirmed */
  .s-data .hl { animation: kfRows 3.6s steps(4, end) infinite; }
  @keyframes kfRows { from { transform: translateY(0); } to { transform: translateY(48px); } }
  .s-data .flow { animation: kfDash 1s linear infinite; }
  @keyframes kfDash { to { stroke-dashoffset: -10; } }
  .s-data .tick { transform-box: fill-box; transform-origin: center; animation: kfPop 3.6s ease-out infinite; }
  @keyframes kfPop { 0%, 70% { transform: scale(.6); opacity: 0; } 80%, 100% { transform: scale(1); opacity: 1; } }

  /* insight: bars settle, the line is drawn, the glass looks closer */
  .s-insight .bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: kfSettle 5s ease-in-out infinite; }
  .s-insight .bars rect:nth-child(2) { animation-delay: .15s; } .s-insight .bars rect:nth-child(3) { animation-delay: .3s; }
  .s-insight .bars rect:nth-child(4) { animation-delay: .45s; } .s-insight .bars rect:nth-child(5) { animation-delay: .6s; }
  @keyframes kfSettle { 0% { transform: scaleY(.35); } 18%, 100% { transform: scaleY(1); } }
  .s-insight .trend { stroke-dasharray: 180; animation: kfDraw 5s ease-in-out infinite; }
  @keyframes kfDraw { 0%, 15% { stroke-dashoffset: 180; } 55%, 100% { stroke-dashoffset: 0; } }
  .s-insight .mag { transform-box: fill-box; transform-origin: center; animation: kfLook 5s ease-in-out infinite; }
  @keyframes kfLook { 0%, 50% { transform: translate(-30px, 14px) scale(.92); opacity: 0; } 65%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }

  /* action: the list is ticked off, one line at a time */
  .s-action .chk { stroke-dasharray: 14; stroke-dashoffset: 14; animation: kfTick 6s ease-out infinite; }
  .s-action .i2 .chk { animation-delay: 1.2s; } .s-action .i3 .chk { animation-delay: 2.4s; }
  @keyframes kfTick { 0%, 20% { stroke-dashoffset: 14; } 30%, 80% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 14; } }
  .s-action .arm { transform-box: fill-box; transform-origin: 0% 100%; animation: kfPoint 6s ease-in-out infinite; }
  @keyframes kfPoint { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(10deg); } 40% { transform: rotate(-4deg); } 60% { transform: rotate(6deg); } }

  /* improvement: the line climbs, the check-again loop keeps turning */
  .s-improve .rise { stroke-dasharray: 200; animation: kfClimb 6s ease-in-out infinite; }
  .s-improve .head { stroke-dasharray: 30; animation: kfHead 6s ease-in-out infinite; }
  @keyframes kfClimb { 0%, 10% { stroke-dashoffset: 200; } 55%, 100% { stroke-dashoffset: 0; } }
  @keyframes kfHead { 0%, 50% { stroke-dashoffset: 30; } 62%, 100% { stroke-dashoffset: 0; } }
  .s-improve .loop { transform-box: fill-box; transform-origin: center; animation: kfTurn 9s linear infinite; }
  @keyframes kfTurn { to { transform: rotate(360deg); } }
  .s-improve .spark { animation: kfSpark 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes kfSpark { 0%, 30% { opacity: 0; transform: scale(.4); } 40%, 60% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(.4); } }

  /* five questions: the mark nods when the card is hovered */
  .fq:hover .fq-art { animation: kfNod .7s cubic-bezier(.22,.61,.36,1); }
  @keyframes kfNod { 0% { transform: none; } 35% { transform: translateY(-4px) rotate(-6deg); } 100% { transform: none; } }

  /* open one now */
  .art-pulse .bars rect { animation: kfBreath 4s ease-in-out infinite; }
  .art-pulse .bars rect:nth-child(2) { animation-delay: .2s; } .art-pulse .bars rect:nth-child(3) { animation-delay: .4s; }
  .art-pulse .bars rect:nth-child(4) { animation-delay: .6s; } .art-pulse .bars rect:nth-child(5) { animation-delay: .8s; }
  .art-pulse .bars rect:nth-child(6) { animation-delay: 1s; } .art-pulse .bars rect:nth-child(7) { animation-delay: 1.2s; }
  @keyframes kfBreath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.78); } }
  .art-pulse .pill { transform-box: fill-box; transform-origin: center; animation: kfFloat 4s ease-in-out infinite; }
  @keyframes kfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  .art-flood .w1 { animation: kfWave 3.2s linear infinite; } .art-flood .w2 { animation: kfWave 4.6s linear infinite reverse; }
  @keyframes kfWave { to { transform: translateX(-40px); } }
  .art-flood .water { animation: kfTide 7s ease-in-out infinite; }
  @keyframes kfTide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .art-flood .rain path { stroke-dasharray: 9; animation: kfRain 1.1s linear infinite; }
  .art-flood .rain path:nth-child(2n) { animation-delay: .4s; } .art-flood .rain path:nth-child(3n) { animation-delay: .7s; }
  @keyframes kfRain { from { stroke-dashoffset: 9; opacity: 0; } 30% { opacity: 1; } to { stroke-dashoffset: -9; opacity: 0; } }
  .art-health .beat { stroke-dasharray: 700; animation: kfBeatLine 4s linear infinite; }
  @keyframes kfBeatLine { from { stroke-dashoffset: 700; } to { stroke-dashoffset: -700; } }
  .art-health .dot { transform-box: fill-box; transform-origin: center; animation: kfPulse 1.3s ease-out infinite; }
  @keyframes kfPulse { 0% { transform: scale(.7); opacity: 1; } 70% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(.7); opacity: 0; } }
  .art-health .heart path { animation: kfHeart 1.3s ease-in-out infinite; }
  @keyframes kfHeart { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }

  /* two ways: the letter breathes, the arrow leans in */
  .way .pick-letter { animation: kfFloat 5s ease-in-out infinite; }
  .way:nth-child(2) .pick-letter { animation-delay: 2.5s; }
  .way em { transition: transform .2s; display: inline-block; }
  .way:hover em { transform: translateX(4px); }
}

@media (max-width: 900px) {
  .journey.has-scenes li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .journey.has-scenes li > .scene { grid-row: 1 / 3; margin: 0; }
  .journey.has-scenes b { align-self: end; }
  .journey.has-scenes span { align-self: start; }
}
@media (max-width: 640px) {
  .journey.has-scenes li { grid-template-columns: 92px minmax(0, 1fr); padding: 10px 14px; }
  .fq-top { display: contents; }
  .fq-art { display: none; }
  .card-art { height: 92px; margin-inline: -20px; }
}


/* ================= how we work: one step at a time, drawn big =================
   Her five steps, her words. A rail of tabs across the top, the active step
   below it as a large scene beside the text. The first step is on without
   JavaScript, so the section is never empty. */
.work { position: relative; overflow: hidden; }
.work .philo-why { margin-bottom: 30px; }

.work-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 1080px; margin: 0 auto 22px; }
.work-rail button {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink-2);
  transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; overflow: hidden; min-height: 58px;
}
.work-rail button:hover { border-color: #cfe0f7; transform: translateY(-1px); }
.work-rail button.is-on { border-color: var(--blue); background: #fff; color: var(--ink); box-shadow: 0 10px 28px rgba(7, 35, 83, .08); }
.work-rail-num { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--blue-ink); flex: 0 0 auto; }
.work-rail button.is-on .work-rail-num { color: #fff; background: var(--blue); border-radius: 8px; padding: 2px 7px; }
.work-rail-title { font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1.2; }
.work-rail button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--blue), var(--cyan)); }

.work-slides { display: grid; max-width: 1080px; margin: 0 auto; }
.work-slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 34px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 34px 28px 28px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(28px);
}
.work-slide.is-back { transform: translateX(-28px); }
.work-slide.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.work-scene .scene { margin: 0; }
.work-num { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--blue-ink); margin-bottom: 10px; }
.work-text h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin: 0 0 12px; color: var(--navy); }
.work-text p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.work-time { margin-top: 18px !important; padding: 12px 14px; border-radius: 12px; background: var(--ground-2); font-size: 14px !important; }
.work-time b { display: block; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }

.work-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.work-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 18px; cursor: pointer; transition: border-color .2s, transform .2s; }
.work-btn:hover { border-color: var(--blue); transform: translateY(-1px); }
.work-count { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink-3); min-width: 84px; text-align: center; }

/* the big scenes: thicker lines, a few more colours */
.scene.big .f-room { fill: var(--ground-2); }
.scene.big .f-navy2 { fill: var(--navy-2); }
.scene.big .st2 { stroke: var(--line); stroke-width: 2; }
.scene.big .s-line { stroke-width: 2; } .scene.big .s-line2 { stroke-width: 6; }
.scene.big .s-blue { stroke-width: 5; } .scene.big .s-white { stroke-width: 4.5; }
.scene.big .s-navy-thin { stroke-width: 3; } .scene.big .s-navy-fat { stroke-width: 6; }
.scene.big .s-navy-dash { stroke-width: 5; stroke-dasharray: 160 66; }
.scene.big .s-good { stroke: var(--good); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.scene.big .f-risk { fill: var(--risk); } .scene.big .f-risk-soft { fill: rgba(232, 47, 58, .12); }
.scene.big .f-watch { fill: var(--watch); } .scene.big .f-watch-soft { fill: rgba(215, 154, 0, .16); }
.scene.big .f-grey-soft { fill: var(--ground-3); }
.scene.big text { font-family: var(--display); font-weight: 600; font-size: 15px; fill: var(--ink); }
.scene.big .t-white { fill: #fff; font-size: 18px; }
.scene.big.s-data .hl { fill: rgba(0, 205, 230, .30); }
.scene.big.s-insight .trend { stroke-width: 5; }
.scene.big .box { stroke-width: 2.4; }
.scene.big .chk { stroke-width: 5; }
.scene.big .arm { stroke: var(--blue); stroke-width: 14; stroke-linecap: round; }
.scene.big .focus { fill: none; stroke: var(--cyan); stroke-width: 3; opacity: 0; }
.scene.big .rise, .scene.big .head { stroke-width: 6; }
.scene.big .spark { fill: var(--cyan); }
.scene.big .pupil { opacity: .9; }

@media (prefers-reduced-motion: no-preference) {
  .work-slide { transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s; }
  .work-slide.is-on { transition: opacity .6s cubic-bezier(.22,.61,.36,1) .12s, transform .6s cubic-bezier(.22,.61,.36,1) .12s, visibility 0s; }
  .work-rail button.is-on i { animation: kfProgress 7.6s linear forwards; }
  .work.is-held .work-rail button.is-on i { animation-play-state: paused; }
  @keyframes kfProgress { from { width: 0; } to { width: 100%; } }

  /* scenes only move while their step is showing, and start over each time */
  .work-slide:not(.is-on) .scene * { animation-play-state: paused !important; }

  .scene.big.s-talk .ba { animation-duration: 7s; } .scene.big.s-talk .bb { animation-duration: 7s; }
  .scene.big.s-talk .pa, .scene.big.s-talk .pb { animation-duration: 7s; } .scene.big.s-talk .pb { animation-delay: 3.5s; }

  .scene.big.s-data .hl { animation: kfRowsBig 6s steps(5, end) infinite; }
  @keyframes kfRowsBig { from { transform: translateY(0); } to { transform: translateY(130px); } }
  .scene.big.s-data .flag { transform-box: fill-box; transform-origin: 0 50%; opacity: 0; animation: kfFlag 6s ease-out infinite; }
  .scene.big.s-data .f2 { animation-delay: 1.2s; } .scene.big.s-data .f3 { animation-delay: 2.4s; }
  @keyframes kfFlag { 0%, 18% { opacity: 0; transform: translateX(-10px) scale(.96); } 28%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
  .scene.big.s-data .tick { animation-duration: 6s; }

  .scene.big.s-insight .bars rect { animation-duration: 7s; }
  .scene.big.s-insight .trend { stroke-dasharray: 420; animation: kfDrawBig 7s ease-in-out infinite; }
  @keyframes kfDrawBig { 0%, 15% { stroke-dashoffset: 420; } 55%, 100% { stroke-dashoffset: 0; } }
  .scene.big.s-insight .mag { animation: kfLookBig 7s ease-in-out infinite; }
  @keyframes kfLookBig { 0%, 48% { transform: translate(-70px, 40px) scale(.9); opacity: 0; } 62%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
  .scene.big.s-insight .why { transform-box: fill-box; transform-origin: 50% 100%; animation: kfPop 7s ease-out infinite; }
  .scene.big.s-insight .arm { transform-box: fill-box; transform-origin: 100% 100%; animation: kfPoint 7s ease-in-out infinite; }

  .scene.big.s-action .chk { stroke-dasharray: 34; stroke-dashoffset: 34; animation: kfTick 7s ease-out infinite; }
  .scene.big.s-action .i2 .chk { animation-delay: 1.4s; } .scene.big.s-action .i3 .chk { animation-delay: 2.8s; }
  .scene.big.s-action .arm { animation-duration: 7s; }
  .scene.big.s-action .focus { transform-box: fill-box; transform-origin: center; animation: kfFocus 7s ease-out infinite; }
  @keyframes kfFocus { 0%, 10% { opacity: 0; transform: scale(.6); } 20% { opacity: .9; transform: scale(1); } 32%, 100% { opacity: 0; transform: scale(1.5); } }

  .scene.big.s-improve .rise { stroke-dasharray: 520; animation: kfClimbBig 7s ease-in-out infinite; }
  .scene.big.s-improve .head { stroke-dasharray: 60; animation: kfHeadBig 7s ease-in-out infinite; }
  @keyframes kfClimbBig { 0%, 10% { stroke-dashoffset: 520; } 55%, 100% { stroke-dashoffset: 0; } }
  @keyframes kfHeadBig { 0%, 50% { stroke-dashoffset: 60; } 62%, 100% { stroke-dashoffset: 0; } }
  .scene.big.s-improve .loop { animation-duration: 12s; }
  .scene.big.s-improve .spark { animation-duration: 7s; }
  .scene.big.s-improve .cal { transform-box: fill-box; transform-origin: center; animation: kfFloat 5s ease-in-out infinite; }
}

@media (max-width: 1000px) {
  .work-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .work-rail-title { display: none; }
  .work-rail button { justify-content: center; min-height: 48px; padding: 10px; }
  .work-slide { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .work-scene { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .work-slide { padding: 14px 16px 18px; border-radius: 18px; }
  .work-text h3 { font-size: 22px; }
  .work-text p { font-size: 15px; }
  .work-btn { width: 48px; height: 48px; }
}

/* who is who in the scenes: KlaroFlow wears its mark, the business its shop front */
.scene.big .tag rect { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.scene.big .tag text { font-family: var(--display); font-weight: 600; font-size: 13.5px; fill: var(--navy); }
.scene.big .tag-kf rect { stroke: #bcd3f5; }
.scene.big .tag-biz .shop-a { fill: var(--blue); } .scene.big .tag-biz .shop-b { fill: var(--navy); } .scene.big .tag-biz .shop-d { fill: #fff; }


/* ---- the five questions, told the same way as How we work ---- */
.work.is-questions .section-head { margin-bottom: 26px; }
.work.is-questions .work-slide { box-shadow: var(--shadow-sm); }
.work-link { margin-top: 18px; }
.scene.big .t-screen { font-size: 14px; fill: var(--ink-2); }
.scene.big .months text { font-size: 12px; fill: var(--ink-3); text-anchor: middle; }
.scene.big .t-sm { font-size: 12.5px; }
.scene.big .t-n { font-size: 14px; }
.scene.big.s-q2 .fill { fill: var(--blue); transform-box: fill-box; transform-origin: 0 50%; }
.scene.big.s-q2 .rank text { font-size: 13px; fill: var(--ink-2); }
.scene.big.s-q3 .past { stroke: var(--navy); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.scene.big.s-q3 .next, .scene.big.s-q3 .head { stroke: var(--blue); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 10 10; }
.scene.big.s-q3 .head { stroke-dasharray: none; }
.scene.big.s-q3 .now { fill: var(--cyan); }
.scene.big.s-q4 .row { transform-box: fill-box; transform-origin: 0 50%; }
.scene.big.s-q5 .chk { transform-box: fill-box; transform-origin: 0 50%; }

@media (prefers-reduced-motion: no-preference) {
  .scene.big.s-q1 .bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: kfSettle 7s ease-in-out infinite; }
  .scene.big.s-q1 .bars rect:nth-child(2) { animation-delay: .2s; } .scene.big.s-q1 .bars rect:nth-child(3) { animation-delay: .4s; }
  .scene.big.s-q1 .bars rect:nth-child(4) { animation-delay: .6s; } .scene.big.s-q1 .bars rect:nth-child(5) { animation-delay: .8s; } .scene.big.s-q1 .bars rect:nth-child(6) { animation-delay: 1s; }
  .scene.big .pop { transform-box: fill-box; transform-origin: 50% 100%; animation: kfPop 7s ease-out infinite; }
  .scene.big.s-q3 .pop { animation-delay: 1s; }
  .scene.big.s-q2 .fill { animation: kfFill 7s cubic-bezier(.22,.61,.36,1) infinite; }
  .scene.big.s-q2 .fill:nth-of-type(2) { animation-delay: .25s; } .scene.big.s-q2 .fill:nth-of-type(3) { animation-delay: .5s; }
  @keyframes kfFill { 0% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }
  .scene.big.s-q2 .mag { transform-box: fill-box; transform-origin: center; animation: kfLookBig 7s ease-in-out infinite; }
  .scene.big.s-q3 .past { stroke-dasharray: 240; animation: kfPast 7s ease-in-out infinite; }
  @keyframes kfPast { 0%, 8% { stroke-dashoffset: 240; } 40%, 100% { stroke-dashoffset: 0; } }
  .scene.big.s-q3 .next { animation: kfNext 7s ease-in-out infinite; }
  @keyframes kfNext { 0%, 40% { opacity: 0; } 55%, 100% { opacity: 1; } }
  .scene.big.s-q3 .head { animation: kfNext 7s ease-in-out infinite; }
  .scene.big.s-q3 .now { transform-box: fill-box; transform-origin: center; animation: kfPulse 2s ease-out infinite; }
  .scene.big.s-q4 .row { animation: kfSlide 7s ease-out infinite; }
  .scene.big.s-q4 .r2 { animation-delay: .5s; } .scene.big.s-q4 .r3 { animation-delay: 1s; }
  @keyframes kfSlide { 0%, 8% { opacity: 0; transform: translateX(-24px); } 20%, 100% { opacity: 1; transform: none; } }
  .scene.big.s-q4 .tick { transform-box: fill-box; transform-origin: center; animation: kfPop 7s ease-out infinite; }
  .scene.big.s-q5 .chk { animation: kfSlide 7s ease-out infinite; }
  .scene.big.s-q5 .c2 { animation-delay: .4s; } .scene.big.s-q5 .c3 { animation-delay: .8s; } .scene.big.s-q5 .c4 { animation-delay: 1.2s; }
  .scene.big.s-q5 .shield { transform-box: fill-box; transform-origin: center; animation: kfPop 7s ease-out infinite; }
}

/* the badge over the heart, and the name under the feet */
.scene.big .badge circle { fill: #fff; stroke: rgba(7, 35, 83, .12); stroke-width: 1.2; }
.scene.big .badge .shop-a { fill: var(--blue); } .scene.big .badge .shop-b { fill: var(--navy); } .scene.big .badge .shop-d { fill: #fff; }
.scene.big .name { font-family: var(--display); font-weight: 600; font-size: 13px; fill: var(--ink-2); text-anchor: middle; }
.scene.big .tag { display: none; }

/* ---- each carousel fits one screen: shorter heading, shorter scene, tighter gaps ---- */
.section.work { padding-block: 26px 30px; }
.work .eyebrow { margin-bottom: 6px; }
.work .philo-big { font-size: clamp(24px, 2.8vw, 34px); margin: 0 0 6px; }
.work .philo-then { font-size: clamp(16px, 1.6vw, 20px); margin: 0 0 10px; }
.work .philo-why { font-size: 15px; line-height: 1.5; max-width: 74ch; margin: 0 auto 16px; }
.work.is-questions .section-head { margin-bottom: 14px; }
.work.is-questions .section-head h2 { font-size: clamp(24px, 2.8vw, 34px); }
.work.is-questions .section-head .lede { font-size: 15px; margin-top: 6px; }
.work-rail { margin-bottom: 12px; gap: 6px; }
.work-rail button { min-height: 46px; padding: 8px 12px 10px; gap: 8px; }
.work-rail-title { font-size: 13px; }
.work-rail-num { font-size: 14px; }
.work-slide { padding: 14px 24px 14px 18px; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.work-scene { max-width: 400px; margin: 0 auto; width: 100%; }
.work-num { margin-bottom: 6px; font-size: 12px; }
.work-text h3 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 8px; }
.work-text p { font-size: 14.5px; line-height: 1.5; }
.work-time { margin-top: 10px !important; padding: 8px 11px; font-size: 13px !important; }
.work-link { margin-top: 12px; }
.work-nav { margin-top: 8px; gap: 10px; }
.work-btn { width: 36px; height: 36px; font-size: 16px; }
@media (max-width: 1000px) { .work-scene { max-width: 380px; } }


/* ---- the five questions: tabs down the left, the answer wide on the right ---- */
.work.is-questions .work-body { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1080px; margin: 0 auto; }
.work.is-questions .work-rail { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.work.is-questions .work-rail button { min-height: 58px; padding: 10px 14px 12px; }
.work.is-questions .work-rail-title { display: block; font-size: 14px; }
.work.is-questions .work-slides { max-width: none; margin: 0; width: 100%; }  /* auto margins would stop it stretching */
.work.is-questions .work-slide { display: block; padding: 16px 20px 16px; }
.work.is-questions .work-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.work.is-questions .work-num { margin: 0; }
.work.is-questions .work-text h3 { margin: 0; font-size: clamp(20px, 2vw, 24px); }
.work.is-questions .work-text p { margin: 0 0 12px; }
.work.is-questions .work-scene { max-width: none; margin: 0; }
.work.is-questions .work-link { margin-top: 12px; }
.scene.wide { display: block; width: 100%; height: auto; }
.scene.wide .f-ground { fill: var(--ground-2); }
.scene.wide .st2 { stroke: var(--line); stroke-width: 1.5; }
.scene.wide .s-line { stroke: var(--line); stroke-width: 1.5; fill: none; }
.scene.wide .f-risk { fill: var(--risk); } .scene.wide .f-risk-soft { fill: rgba(232, 47, 58, .12); }
.scene.wide .f-watch { fill: var(--watch); } .scene.wide .f-watch-soft { fill: rgba(215, 154, 0, .16); }
.scene.wide .f-grey-soft { fill: var(--ground-3); }
.scene.wide .t-screen { font-family: var(--display); font-weight: 600; font-size: 14px; fill: var(--ink); }
.scene.wide .t-dim { font-family: var(--body); font-size: 12.5px; fill: var(--ink-3); }
.scene.wide .t-h { font-family: var(--display); font-weight: 700; font-size: 16px; fill: var(--navy); }
.scene.wide .t-s { font-family: var(--body); font-size: 13.5px; fill: var(--ink-2); }
.scene.wide .t-k { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-3); }
.scene.wide .t-v { font-family: var(--display); font-weight: 700; font-size: 20px; fill: var(--navy); }
.scene.wide .t-n { font-family: var(--display); font-weight: 600; font-size: 13px; fill: var(--ink); }
.scene.wide .t-white { font-family: var(--display); font-weight: 600; font-size: 13px; fill: #fff; }
.scene.wide .kpi.is-risk .t-v { fill: #b3121c; } .scene.wide .kpi.is-watch .t-v { fill: #8a6400; }
.scene.wide .months text { font-family: var(--body); font-size: 12px; fill: var(--ink-3); text-anchor: middle; }
.scene.wide .s-white-thin { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.scene.wide .s-white { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.scene.wide .fill { fill: var(--blue); transform-box: fill-box; transform-origin: 0 50%; }
.scene.wide .past { stroke: var(--navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.scene.wide .next { stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 8 8; }
.scene.wide .head { stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.scene.wide .now { fill: var(--cyan); }
.scene.wide .row, .scene.wide .chk, .scene.wide .first, .scene.wide .shield, .scene.wide .kpi, .scene.wide .share { transform-box: fill-box; transform-origin: 0 50%; }
.scene.wide .band { transform-box: fill-box; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .scene.wide .bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: kfSettle 7s ease-in-out infinite; }
  .scene.wide .bars rect:nth-child(2) { animation-delay: .15s; } .scene.wide .bars rect:nth-child(3) { animation-delay: .3s; }
  .scene.wide .bars rect:nth-child(4) { animation-delay: .45s; } .scene.wide .bars rect:nth-child(5) { animation-delay: .6s; } .scene.wide .bars rect:nth-child(6) { animation-delay: .75s; }
  .scene.wide .pop { transform-box: fill-box; transform-origin: 50% 100%; animation: kfPop 7s ease-out infinite; }
  .scene.wide .fill { animation: kfFill 7s cubic-bezier(.22,.61,.36,1) infinite; }
  .scene.wide .rank .fill:nth-of-type(2) { animation-delay: .2s; } .scene.wide .rank .fill:nth-of-type(3) { animation-delay: .4s; } .scene.wide .rank .fill:nth-of-type(4) { animation-delay: .6s; }
  .scene.wide .share .fill { animation-delay: 1s; }
  .scene.wide .past { stroke-dasharray: 340; animation: kfPast 7s ease-in-out infinite; }
  .scene.wide .next, .scene.wide .head { animation: kfNext 7s ease-in-out infinite; }
  .scene.wide .now { transform-box: fill-box; transform-origin: center; animation: kfPulse 2s ease-out infinite; }
  .scene.wide .row, .scene.wide .chk { animation: kfSlide 7s ease-out infinite; }
  .scene.wide .r2, .scene.wide .c2 { animation-delay: .4s; } .scene.wide .r3, .scene.wide .c3 { animation-delay: .8s; } .scene.wide .c4 { animation-delay: 1.2s; }
  .scene.wide .kpi, .scene.wide .first, .scene.wide .shield, .scene.wide .share { animation: kfSlide 7s ease-out infinite; }
  .scene.wide .kpi:nth-of-type(2) { animation-delay: .2s; } .scene.wide .kpi:nth-of-type(3) { animation-delay: .4s; } .scene.wide .kpi:nth-of-type(4) { animation-delay: .6s; }
  .scene.wide .first, .scene.wide .shield { animation-delay: .9s; }
  .scene.wide .band { animation: kfBand 7s ease-out infinite; }
  @keyframes kfBand { 0%, 22% { opacity: 0; transform: translateY(8px); } 34%, 100% { opacity: 1; transform: none; } }
}
@media (max-width: 1000px) {
  .work.is-questions .work-body { grid-template-columns: minmax(0, 1fr); }
  .work.is-questions .work-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .work.is-questions .work-rail-title { display: none; }
  .work.is-questions .work-rail button { min-height: 48px; justify-content: center; }
}


/* ---- open one now: the dashboard itself, big, then the words ---- */
.section.proof { padding-block: 30px 38px; }
.proof .section-head { margin-bottom: 18px; }
.proof .section-head h2 { font-size: clamp(24px, 2.8vw, 34px); }
.proof .section-head .lede { font-size: 15px; margin-top: 6px; }
.proof-feature { gap: 16px; margin-bottom: 0; }
.proof-card { padding: 0 22px 22px; overflow: hidden; display: flex; flex-direction: column; }
.card-shot { margin: 0 -22px 16px; height: 232px; background: #fff; border-bottom: 1px solid var(--line); }
.card-shot svg { width: 100%; height: 100%; display: block; }
.proof-card h3 { margin: 0 0 6px; font-size: 19px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.proof-card h3 small { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-soft); padding: 3px 8px; border-radius: 999px; }
.proof-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.proof-card .btn { margin-top: auto; align-self: flex-start; }

/* colours the three thumbnails share */
.shot { --m0: #eef3fa; --m1: #cfe0f7; --m2: #8fbcf0; --m3: #3b8de8; --m4: #0b3175; }
.shot text { font-family: var(--body); font-size: 10.5px; fill: var(--ink-2); }
.shot .t-dim { fill: var(--ink-3); font-family: var(--display); font-weight: 600; font-size: 10px; }
.shot .t-tiny { font-size: 8.5px; fill: var(--ink-3); } .shot .t-tiny-white { font-size: 8px; fill: #fff; font-family: var(--display); font-weight: 700; }
.shot .t-tiny-risk { font-size: 8px; fill: #b3121c; font-family: var(--display); font-weight: 700; letter-spacing: .06em; }
.shot .t-eye { font-family: var(--display); font-weight: 600; font-size: 7.5px; letter-spacing: .1em; fill: var(--ink-3); }
.shot .t-strong { font-family: var(--display); font-weight: 700; font-size: 12px; fill: var(--navy); }
.shot .t-small { font-size: 9px; fill: var(--ink-2); }
.shot .t-val { font-family: var(--display); font-weight: 700; font-size: 13px; fill: var(--navy); }
.shot .t-cap { font-family: var(--display); font-weight: 600; font-size: 11px; fill: var(--navy); }
.shot .sm { font-size: 9px; fill: var(--ink-3); }
.shot .f-blue { fill: var(--blue); } .shot .f-risk { fill: var(--risk); } .shot .f-risk-soft { fill: rgba(232, 47, 58, .12); }
/* business pulse */
.shot-pulse .win { fill: #fff; stroke: var(--line); stroke-width: 1.2; }
.shot-pulse .bar { fill: var(--ground-2); } .shot-pulse .dot { fill: #d7e0ee; }
.shot-pulse .tile { fill: var(--ground-2); }
.shot-pulse .bars rect { fill: #cfe0f7; transform-box: fill-box; transform-origin: 50% 100%; } .shot-pulse .bars rect.is-top { fill: var(--blue); }
/* flood */
.shot-flood .map path { stroke: #fff; stroke-width: .5; }
.shot-flood .lg text { font-family: var(--display); font-weight: 600; font-size: 11px; fill: var(--navy); }
.shot-flood .scale line { stroke: var(--ink-3); stroke-width: 1; } .shot-flood .scale text { font-size: 8.5px; fill: var(--ink-3); }
.shot-flood .person circle, .shot-flood .person rect { fill: var(--navy); }
.shot-flood .water { transform: translateY(100px); } .shot-flood .water rect { fill: rgba(0, 112, 235, .40); } .shot-flood .water .w1 { fill: rgba(0, 205, 230, .55); }
.shot-flood .cap { font-size: 9px; fill: var(--ink-3); }
/* health */
.shot-health .skin { fill: #eef3fa; stroke: #9fb3d3; stroke-width: 1.5; }
.shot-health .spots circle { fill: var(--risk); fill-opacity: .5; stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.shot-health .spots text { font-family: var(--display); font-weight: 700; font-size: 12px; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(7, 35, 83, .35); stroke-width: 2; }
.shot-health .line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.shot-health .den { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; opacity: .8; }
.shot-health .peak { fill: var(--risk); } .shot-health .t-peak { font-family: var(--display); font-weight: 600; font-size: 9px; fill: #b3121c; }

@media (prefers-reduced-motion: no-preference) {
  .shot-pulse .bars rect { animation: kfBreath 4s ease-in-out infinite; }
  .shot-pulse .bars rect:nth-child(2) { animation-delay: .2s; } .shot-pulse .bars rect:nth-child(3) { animation-delay: .4s; } .shot-pulse .bars rect:nth-child(4) { animation-delay: .6s; } .shot-pulse .bars rect:nth-child(5) { animation-delay: .8s; }
  .shot-pulse .pill { transform-box: fill-box; transform-origin: center; animation: kfFloat 3s ease-in-out infinite; }
  .shot-flood .water { animation: kfRiseFall 8s ease-in-out infinite; }
  @keyframes kfRiseFall { 0%, 100% { transform: translateY(150px); } 45%, 60% { transform: translateY(10px); } }
  .shot-flood .water .w1 { animation: kfWave 3s linear infinite; }
  .shot-health .spots circle { animation: breatheSoft 2.8s ease-in-out infinite; }
  .shot-health .spots circle.s1 { animation-duration: 1.4s; }
  @keyframes breatheSoft { 50% { transform: scale(1.07); } }
  .shot-health .line { stroke-dasharray: 220; animation: kfDrawLine 6s ease-in-out infinite; }
  .shot-health .den { stroke-dasharray: 220; animation: kfDrawLine 6s ease-in-out infinite 1s; }
  @keyframes kfDrawLine { 0%, 8% { stroke-dashoffset: 220; } 45%, 100% { stroke-dashoffset: 0; } }
}
@media (max-width: 980px) { .proof-feature { grid-template-columns: minmax(0, 1fr); } .card-shot { height: 220px; } }
/* every home section starts at the left, the way How we work does */
.work .philo-then, .work .philo-why { margin-left: 0; margin-right: 0; }
.work.is-questions .section-head, .proof .section-head { margin-left: 0; }

/* the flood and health previews as product windows, like the Pulse one */
.shot .win { fill: #fff; stroke: var(--line); stroke-width: 1.2; }
.shot .bar { fill: var(--ground-2); } .shot .dot { fill: #d7e0ee; } .shot .tile { fill: var(--ground-2); }
.shot .tagpill { fill: var(--blue-soft); } .shot .t-tiny-blue { font-family: var(--display); font-weight: 700; font-size: 7.5px; letter-spacing: .06em; fill: var(--blue-ink); }
.shot .t-seg { font-family: var(--display); font-weight: 600; font-size: 8px; fill: var(--ink-3); } .shot .t-seg-on { font-family: var(--display); font-weight: 600; font-size: 8px; fill: #fff; }
.shot .seg .on { fill: var(--blue); }
.shot .trk { fill: var(--blue-soft); } .shot .hair { stroke: var(--line); stroke-width: 1; }
.shot .t-n { font-family: var(--display); font-weight: 600; font-size: 9px; fill: var(--ink); }
.shot .t-n-risk { font-family: var(--display); font-weight: 600; font-size: 9px; fill: #b3121c; } .shot .t-n-watch { font-family: var(--display); font-weight: 600; font-size: 9px; fill: #8a6400; } .shot .t-n-blue { font-family: var(--display); font-weight: 600; font-size: 9px; fill: var(--blue-ink); }
.shot .t-val-sm { font-family: var(--display); font-weight: 700; font-size: 11px; fill: var(--navy); } .shot .t-risk { fill: #b3121c; }
.shot-flood .map path { stroke: #fff; stroke-width: .4; transition: fill .5s; } .shot-flood .map path.sel { stroke: var(--navy); stroke-width: 1; }
.shot-flood .sh { fill: var(--risk); } .shot-flood .sm { fill: var(--watch); } .shot-flood .sl { fill: var(--blue); }
.shot-health .skin { fill: #eef3fa; stroke: #9fb3d3; stroke-width: 4; }
.shot-health .dotr { fill: var(--risk); fill-opacity: .6; } .shot-health .barr { fill: var(--risk); fill-opacity: .7; transform-box: fill-box; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .shot-flood .map path.sel { animation: kfSelPulse 2.4s ease-in-out infinite; }
  @keyframes kfSelPulse { 50% { stroke-width: 2; } }
  .shot-flood .sh, .shot-flood .sm, .shot-flood .sl { transform-box: fill-box; transform-origin: 0 50%; animation: kfFill 6s cubic-bezier(.22,.61,.36,1) infinite; }
  .shot-health .barr { animation: kfFill 6s cubic-bezier(.22,.61,.36,1) infinite; }
  .shot-health .list .barr:nth-of-type(2) { animation-delay: .15s; }
}


/* ---- two ways, the same A/B cards on the home and on What we build ---- */
.ways-section { padding-block: 30px 36px; }
.ways-section .section-head { margin-bottom: 18px; }
.ways-section .section-head h2 { font-size: clamp(24px, 2.8vw, 34px); }
.pick-row.is-home .pick-card { display: flex; flex-direction: column; }
.pick-row.is-home .pick-list { margin-bottom: 14px; gap: 10px; }
.pick-row.is-home .pick-list em { font-size: 13.5px; }
.pick-row.is-home .pick-card .btn { margin-top: auto; align-self: flex-start; }
.pick-note { margin-top: 14px; }
/* the honest note sits under the five steps on What we do */
.work .honest-note.gap-top { margin-top: 16px; }

.shot-health .limb-o { fill: none; stroke: #9fb3d3; stroke-width: 38; stroke-linecap: round; stroke-linejoin: round; }
.shot-health .limb { fill: none; stroke: #eef3fa; stroke-width: 35; stroke-linecap: round; stroke-linejoin: round; }


/* ---- the hero screen, every tab like the insight report ---- */
.shot-panels { padding: 14px 18px 4px; }
.pp-head { margin-bottom: 10px; }
.pp-status { font-size: 18px; }
.pp-pill.is-watch { background: rgba(215, 154, 0, .14); color: #8a6400; } .pp-pill.is-watch::before { background: var(--watch); }
.pp-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 14px; align-items: start; margin-top: 10px; }
.pp-side { display: grid; gap: 8px; }
.pp-side .pp-kpi { padding: 10px 12px; } .pp-side .pp-kpi strong { font-size: 17px; }
.pp-kpi strong.is-risk { color: #b3121c; } .pp-kpi strong.is-watch { color: #8a6400; }
.shot-panel[data-view="pulse"] .pp-kpis { margin-top: 12px; }
.pp-insight { display: flex; gap: 11px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--blue-soft); }
.pp-insight i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; font-style: normal; }
.pp-insight i svg { width: 14px; height: 14px; color: #fff; stroke: currentColor; }
.pp-insight b { display: block; font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--navy); line-height: 1.3; }
.pp-insight small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.shot-rank.is-wide { margin-top: 4px; gap: 10px; }
.shot-rank.is-wide div { grid-template-columns: 104px minmax(0, 1fr) auto; }
.shot-rank.is-wide i { display: block; height: 9px; border-radius: 5px; background: var(--blue-soft); position: relative; overflow: hidden; }
.shot-rank.is-wide i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--bar) * 1%); background: var(--blue); border-radius: 5px; transform-origin: left; }
.shot-rank.is-wide b { padding-left: 0; }
.shot-rank.is-wide b::before { display: none; }
.shot-bars { margin: 6px 0 24px; height: 76px; }
.shot-bars span { transform-origin: bottom; }
.shot-list { margin-top: 4px; }
.shot-list b.is-watch { color: #8a6400; }
@media (prefers-reduced-motion: no-preference) {
  .shot-panel.is-on .shot-rank.is-wide i::before { animation: ppGrow .7s cubic-bezier(.22,.61,.36,1) both; }
  .shot-panel.is-on .shot-bars span { animation: ppUp .6s cubic-bezier(.22,.61,.36,1) both; }
  .shot-panel.is-on .shot-bars span:nth-child(2) { animation-delay: .06s; } .shot-panel.is-on .shot-bars span:nth-child(3) { animation-delay: .12s; }
  .shot-panel.is-on .shot-bars span:nth-child(4) { animation-delay: .18s; } .shot-panel.is-on .shot-bars span:nth-child(5) { animation-delay: .24s; } .shot-panel.is-on .shot-bars span:nth-child(6) { animation-delay: .3s; }
  .shot-panel.is-on .pp-insight { animation: kf-rise .5s .25s cubic-bezier(.22,.61,.36,1) both; }
  .shot-panel.is-on .pp-side .pp-kpi { animation: kf-rise .5s .12s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes ppGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes ppUp { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
}
@media (max-width: 560px) { .pp-body { grid-template-columns: minmax(0, 1fr); } .pp-side { grid-template-columns: 1fr 1fr; } .shot-rank.is-wide div { grid-template-columns: 84px minmax(0, 1fr) auto; } }

/* ---- month by month: values on the bars, the best month and now called out ---- */
.shot-bars.is-rich { height: 92px; margin: 18px 0 26px; gap: 10px; padding-top: 14px; box-sizing: content-box;
  background: linear-gradient(to top, var(--line) 1px, transparent 1px) bottom / 100% 25% repeat-y; border-bottom: 1px solid #cfe0f7; }
.shot-bars.is-rich span { border-radius: 5px 5px 0 0; background: #dbe7f8; }
.shot-bars.is-rich span.is-best { background: var(--blue); }
.shot-bars.is-rich span.is-now { background: #fff; box-shadow: inset 0 0 0 2px var(--navy); }
.shot-bars.is-rich em { position: absolute; left: -6px; right: -6px; bottom: calc(100% + 3px); text-align: center; font-style: normal;
  font-family: var(--display); font-weight: 600; font-size: 10px; color: var(--ink-2); white-space: nowrap; }
.shot-bars.is-rich span.is-best em { color: var(--blue-ink); }
.shot-bars.is-rich u { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 5px; border-radius: 999px; }
.shot-bars.is-rich span.is-best u { background: rgba(255, 255, 255, .9); color: var(--blue-ink); }
.shot-bars.is-rich span.is-now u { background: var(--navy); color: #fff; }
.shot-bars.is-rich span:not(.is-best):not(.is-now) u { display: none; }

/* ---- two ways, said once on the home; the detail lives on What we build ---- */
.ways-strip { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; }
.ways-item { display: flex; align-items: center; gap: 14px; flex: 1 1 300px; min-width: 0; }
.ways-item b { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--navy); }
.ways-item span:not(.pick-letter) { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.ways-strip .btn { flex: 0 0 auto; margin-left: auto; }
.proof-card p strong { color: var(--navy); font-family: var(--display); font-weight: 600; }
@media (max-width: 760px) { .ways-strip .btn { margin-left: 0; } }


/* ================= spacing pass: less air everywhere, one screen per section =================
   The header mark reads at 30px like a favicon; the navy close and the footer
   were carrying 50-100px of empty padding; the example and A/B cards ran past
   the fold on her laptop. */
.brand-lockup img { height: 42px; }
.site-head-in { min-height: 72px; }
.section.on-navy { padding-block: 34px 38px; }
.cta-in { gap: 24px; }
.site-foot { padding-block: 30px 22px; }
.foot-top { gap: 28px; }
.foot-mark { margin-bottom: 10px; }
.foot-bottom { margin-top: 22px; padding-top: 16px; align-items: center; }
.foot-flow { line-height: 1.4; }
.section-tight { padding-block: clamp(24px, 3.2vw, 36px); }
.page-head h1 { margin-bottom: 8px; }

/* what we do: six examples in one screen */
.examples-grid { gap: 12px; }
.examples-grid .card-row { padding: 14px 16px; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
.examples-grid .card-row .card-icon { width: 44px; height: 44px; border-radius: 12px; }
.examples-grid .card-row .card-icon svg { width: 22px; height: 22px; }
.examples-grid .card-row h3 { font-size: 16px; margin: 2px 0 4px; }
.examples-grid .card-row p { font-size: 13.5px; line-height: 1.45; margin: 0 0 6px; }
.examples-grid .card-cust { font-size: 13px; }
.examples-grid .card-meta { font-size: 12px; margin-top: 6px; padding-top: 8px; }
.note-card.gap-top { margin-top: 12px; padding: 12px 16px; }
.note-card h3 { font-size: 15px; } .note-card p { font-size: 13.5px; }

/* what we build: the A/B cards and the dashboards, each one screen */
.pick-card { padding: 18px 20px 16px; }
.pick-top { margin-bottom: 12px; }
.pick-list { gap: 10px; margin-bottom: 12px; }
.pick-list em { font-size: 13px; line-height: 1.4; }
.pick-list strong { font-size: 14.5px; }
.pick-when { margin-top: 4px; font-size: 11.5px; padding: 2px 8px; }
.pick-foot { font-size: 13.5px; padding-top: 12px; }
.pick-note { margin-top: 12px; font-size: 13.5px; }
.proof-card p { font-size: 13.5px; line-height: 1.45; margin-bottom: 8px; }
.card-shot { height: 212px; }
.section.proof .section-head .lede { max-width: 70ch; }

/* second pass of the spacing: section padding down everywhere; the two pages that still ran over */
.section { padding-block: clamp(28px, 3.6vw, 44px); }
.section.is-one-view { padding-block: clamp(22px, 3.2vh, 34px); }
.section.is-one-view .section-head { margin-bottom: 14px; }
.examples-grid .card-row { padding: 12px 14px; }
.examples-grid .card-row h3 { font-size: 15px; margin: 1px 0 3px; }
.examples-grid .card-row p { font-size: 13px; line-height: 1.4; margin: 0 0 4px; }
.examples-grid .card-cust { font-size: 12.5px; }
.examples-grid .card-meta { display: none; }
.pick-list li { gap: 9px; }
.pick-list em { font-size: 12.5px; line-height: 1.35; }
.pick-list strong { font-size: 14px; }
.pick-when { margin-top: 3px; }
.pick-foot { padding-top: 10px; font-size: 13px; }
.section.proof { padding-block: 28px 32px; }
/* contact stays one screen with its footer: only the bottom line of the footer */
body:has(.contact-page) .foot-top { display: none; }
body:has(.contact-page) .foot-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
body:has(.contact-page) .site-foot { padding-block: 18px; }

/* last inches: What we build and Contact under the fold */
.pick-row { gap: 14px; }
.pick-card { padding: 16px 18px 14px; }
.pick-card .section-head, .page-head + .section .section-head { margin-bottom: 14px; }
.section.proof { padding-block: 24px 28px; }
.proof .card-shot { height: 200px; margin-bottom: 12px; }
.proof-card p { margin-bottom: 6px; }
body:has(.contact-page) .section { padding-block: 22px 16px; }
body:has(.contact-page) .site-foot { padding-block: 12px; }

.pick-card { padding: 14px 18px 12px; }
.pick-list { gap: 8px; }
.proof .card-shot { height: 190px; }
@media (max-width: 760px) { .shot-tabs button { min-height: 44px; } .work-btn, .work-rail button, .story-btn { min-height: 44px; } }

/* ---- real examples: five lines of business in one row, the pain first ---- */
.examples-grid.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.examples-grid.is-five .ex-tile { display: block; padding: 14px 14px 12px; }
.examples-grid.is-five .ex-tile .card-icon { width: 40px; height: 40px; border-radius: 11px; margin: 0 0 10px; }
.examples-grid.is-five .ex-tile .card-icon svg { width: 20px; height: 20px; }
.examples-grid.is-five .ex-tile h3 { font-size: 15px; line-height: 1.25; margin: 0 0 8px; }
.examples-grid.is-five .ex-tile p { font-size: 12.5px; line-height: 1.45; margin: 0 0 7px; color: var(--ink-2); }
.examples-grid.is-five .ex-tile p strong { color: var(--navy); font-family: var(--display); font-weight: 600; }
.examples-grid.is-five .ex-tile .ex-pain strong { color: #8a6400; }
.examples-grid.is-five .ex-tile .card-cust { margin: 0; padding-top: 7px; border-top: 1px solid var(--line); }
.examples-grid.is-five .ex-tile .card-cust strong { color: var(--blue-ink); }
@media (max-width: 1000px) { .examples-grid.is-five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .examples-grid.is-five { grid-template-columns: minmax(0, 1fr); } }

/* ---- phones: the step card stacks, scene above words ---- */
@media (max-width: 1000px) {
  .work-slide { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .work-scene { max-width: 420px; margin: 0 auto; }
  .work-text h3 { font-size: 21px; }
  .work-time { margin-top: 10px !important; }
}
@media (max-width: 640px) {
  .work-slide { padding: 14px; border-radius: 16px; }
  .work-text p { font-size: 15px; }
  .work-rail button { min-height: 46px; }
}

.proof-card .card-data { font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.proof-card .card-data strong { color: var(--ink-2); }

/* products page: the three cards and the head in one screen */
.proof.is-tight { padding-block: 20px 24px; }
.proof.is-tight .section-head { margin-bottom: 14px; }
.proof.is-tight .section-head .lede { margin-top: 4px; }
.proof.is-tight .card-shot { height: 176px; margin-bottom: 10px; }
.proof.is-tight .proof-card p { font-size: 13px; line-height: 1.42; margin-bottom: 5px; }
.proof.is-tight .proof-card .card-data { font-size: 12px; padding-top: 6px; }
.proof.is-tight .proof-card .btn { margin-top: 8px; }


/* ---- editor's review, October 2026: the pieces the new copy needed ---- */
.work-note { text-align: center; font-size: 13.5px; color: var(--ink-3); margin-top: 10px; }
.page-head .lede.is-second { margin-top: 10px; color: var(--ink); max-width: 60ch; }
.ways-strip.is-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 22px; }
.ways-strip.is-three .ways-item { flex: none; }
.ways-strip.is-three .btn { margin-left: 0; }
.pick-letter.is-c { background: var(--navy-2, #0b3175); }
.pick-row.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-card.is-c { background: linear-gradient(180deg, #f3f9ff 0%, #fff 42%); }
.scope-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; margin-top: 16px; }
.scope-notes.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scope-notes p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; padding: 10px 14px; background: var(--ground-2, #f4f8fd); border-radius: 12px; }
.scope-notes strong { font-family: var(--display); color: var(--navy); font-weight: 600; }
.offer-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.offer-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13px; }
.offer-table th, .offer-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; line-height: 1.4; }
.offer-table thead th { background: var(--ground-2, #f4f8fd); font-family: var(--display); font-weight: 600; color: var(--navy); font-size: 13.5px; }
.offer-table thead th small { display: block; font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.offer-table thead th:first-child { width: 26%; }
.offer-table tbody th { font-weight: 500; color: var(--ink); }
.offer-table tbody th .offer-n { display: inline-block; vertical-align: top; margin-right: 9px; }
.offer-table tbody th .offer-f { display: inline-block; vertical-align: top; max-width: calc(100% - 44px); }
.offer-table tbody th .offer-n { font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--blue-ink); background: var(--blue-soft); border-radius: 6px; padding: 2px 6px; flex: 0 0 auto; margin-top: 1px; }
.offer-table tbody th .offer-f { font-family: var(--display); font-weight: 600; }
.offer-table tbody th small { display: block; font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.offer-table td { color: var(--ink-2); }
.offer-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(22, 171, 101, .14); color: #0c7a46; font-weight: 700; }
.offer-no { color: var(--ink-3); }
.offer-legend { font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.offer-legend .offer-yes { width: 18px; height: 18px; font-size: 11px; vertical-align: middle; }
#compare .section-head { margin-bottom: 14px; }
#compare .scope-notes { margin-top: 12px; }
.q-cols.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.q-closing { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 18px; background: var(--ground-2, #f4f8fd); border-radius: 14px; font-size: 14.5px; color: var(--ink-2); }
.q-closing svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--blue); }
.contact-files { margin-top: 14px; font-size: 14px; color: var(--ink-2); padding: 10px 14px; background: var(--blue-soft); border-radius: 12px; }
.contact-way strong { display: block; }
.label abbr { text-decoration: none; color: var(--blue-ink); }
.label small { font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.form-req { display: inline-block; margin-left: 8px; color: var(--ink-3); }
.contact-card .contact-or { margin-top: 16px; }
.shot-bars.is-nine { gap: 6px; }
.shot-bars.is-nine span i { font-size: 9.5px; }
.shot-bars.is-nine em { font-size: 9px; left: -8px; right: -8px; }
@media (max-width: 980px) {
  .ways-strip.is-three { grid-template-columns: 1fr; }
  .pick-row.is-three { grid-template-columns: 1fr; }
  .scope-notes, .scope-notes.is-two { grid-template-columns: 1fr; }
  .q-cols.is-three { grid-template-columns: 1fr; }
}

/* What we build: the three cards and the comparison each inside one screen */
#three-ways.section { padding-block: 24px 26px; }
#three-ways .section-head { margin-bottom: 14px; }
.pick-row.is-three .pick-card { padding: 14px 16px 12px; }
.pick-row.is-three .pick-list { gap: 8px; margin-bottom: 10px; }
.pick-row.is-three .pick-list em { font-size: 12.5px; line-height: 1.4; }
.pick-row.is-three .pick-list strong { font-size: 13.5px; }
.pick-row.is-three .pick-tag, .pick-row.is-three .pick-foot { font-size: 12.5px; }
.scope-notes { margin-top: 12px; gap: 10px; }
.scope-notes p { font-size: 12.5px; padding: 8px 12px; }

/* contact and the comparison, back inside one screen after the review copy */
.contact-page .contact-files { margin-top: 10px; padding: 8px 12px; font-size: 13px; }
.contact-page .contact-next-label { margin-top: 18px; }
.contact-page .contact-ways { margin-top: 12px; gap: 8px; }
.contact-page .contact-way { padding: 8px 12px; }
.contact-page .checks { gap: 6px; }
.contact-page .check { padding: 5px 10px; font-size: 13px; min-height: 34px; }
.contact-page .textarea { min-height: 78px; }
.contact-page .form-foot { margin-top: 10px; gap: 8px 14px; }
.contact-page .form-note { font-size: 12.5px; }
.contact-page .field { margin-bottom: 0; }
.contact-page .form { gap: 10px 14px; }
.contact-card .contact-or { margin-top: 10px; font-size: 13.5px; }

.contact-page { padding-block: 14px 16px; }
.contact-page .form { gap: 8px 12px; }
.contact-page .input { padding: 9px 12px; }
.contact-page .field { gap: 4px; }
.contact-page .check span { padding: 5px 10px; font-size: 12.5px; min-height: 32px; display: inline-flex; align-items: center; }
.contact-page .textarea { min-height: 70px; }
.contact-page .form-foot { margin-top: 6px; }
.contact-card .contact-or { margin-top: 6px; }
.contact-page .contact-next li { font-size: 14px; }
.contact-page .contact-intro h1 { font-size: clamp(26px, 3vw, 36px); }

/* the comparison table, readable: 14.5px text, 12.5px supporting text, roomy rows */
.offer-table { font-size: 14.5px; min-width: 820px; }
.offer-table th, .offer-table td { padding: 12px 14px; line-height: 1.45; }
.offer-table thead th { font-size: 15px; }
.offer-table thead th small, .offer-table tbody th small { font-size: 12.5px; }
.offer-table tbody th .offer-n { font-size: 11.5px; }
.offer-legend { font-size: 13px; margin-top: 14px; }
.offer-table tbody th { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.offer-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
.contact-page .check span { min-height: 40px; font-size: 13.5px; padding: 7px 12px; }
.pick-row.is-three .pick-list li > span:last-child { font-size: 14px; line-height: 1.45; }
.name-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: center; }
.name-row img { width: 120px; height: 120px; }
.name-row .lede { max-width: 60ch; }
@media (max-width: 980px) {
  .offer-table tbody th { max-width: 180px; }
  .name-row { grid-template-columns: 1fr; justify-items: start; }
  .name-row img { width: 88px; height: 88px; }
}


/* ===================== refresh: one approach on every page =====================
   A clear question, a useful visual, a short takeaway, supporting details on
   request. The shared report cards live in pages/partials/report-cards.html. */

/* ---- home: the overview preview ---- */
.ov-preview { padding: 14px 18px 12px; }
.ov-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ov-title { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--navy); }
.ov-sample { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-soft); padding: 4px 10px; border-radius: 999px; }
.ov-first { background: var(--navy); color: #fff; border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 6px 16px; align-items: center; }
.ov-eyebrow { grid-column: 1 / -1; font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #7fe3f2; }
.ov-first b { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.25; color: #fff; }
.ov-bars { display: grid; gap: 6px; }
.ov-bars div { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 11.5px; color: rgba(255, 255, 255, .85); }
.ov-bars i { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .14); position: relative; overflow: hidden; }
.ov-bars i::before { content: ""; position: absolute; inset: 0; width: var(--w); background: #00cde6; border-radius: 5px; }
.ov-bars .is-second i::before { background: #ffd87a; }
.ov-bars em { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 11.5px; color: #fff; white-space: nowrap; }
.ov-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ov-tile { background: var(--ground-2); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.ov-tile > span { display: block; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ov-tile strong { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--navy); margin-top: 2px; }
.ov-tile small { display: block; font-size: 11px; color: var(--ink-2); line-height: 1.35; margin-top: 6px; }
.ov-months { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 7px; }
.ov-months i { flex: 1 1 0; background: #dbe7f8; border-radius: 2px 2px 0 0; height: var(--h); }
.ov-months i.is-best { background: var(--blue); } .ov-months i.is-now { background: var(--navy); }
.ov-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 12px; background: rgba(215, 154, 0, .35); }
.ov-split i { display: block; width: var(--w); background: var(--blue); }
.ov-stock { display: grid; gap: 4px; margin-top: 7px; font-size: 11px; color: var(--ink-2); }
.ov-stock span { display: flex; justify-content: space-between; gap: 6px; }
.ov-stock b { color: #8a6400; font-family: var(--display); font-weight: 600; white-space: nowrap; }

/* ---- shared report cards ---- */
.report-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.report-card { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.rc-q { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.25; margin: 0; color: var(--navy); }
.rc-shot { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.rc-shot svg { width: 100%; height: auto; display: block; }
.rc-desc { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.rc-label { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.rc-label svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--blue-ink); }
.report-card .btn { margin-top: auto; align-self: flex-start; }
.shot .bars9 rect { fill: #cfe0f7; } .shot .bars9 rect.is-top { fill: var(--blue); } .shot .bars9 rect.is-now { fill: var(--navy); }
.shot .f-watch { fill: var(--watch); } .shot .barb { fill: var(--blue); } .shot .dotb { fill: var(--blue); }
.shot .t-n-blue { font-family: var(--display); font-weight: 600; font-size: 9px; fill: var(--blue-ink); }
.shot-health .line { stroke-width: 1.8; }

/* ---- how we work: one scene, five visible steps ---- */
.work-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: center; margin-bottom: 16px; }
.work .work-intro .philo-big, .work .work-intro .philo-then, .work .work-intro .philo-why { text-align: left; margin-left: 0; margin-right: 0; }
.work .work-intro .eyebrow { justify-content: flex-start; }
.work-art .scene { max-width: 400px; margin: 0 0 0 auto; display: block; width: 100%; height: auto; }
.scene .arm { fill: none; stroke: var(--navy); stroke-width: 9; stroke-linecap: round; }
.scene .arm-b { stroke: var(--blue); }
.steps-five { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.steps-five li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.step-icon { grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 11px; background: var(--blue-soft); color: var(--blue-ink); display: grid; place-items: center; }
.step-icon svg { width: 20px; height: 20px; }
.step-no { grid-column: 2; grid-row: 1; font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; color: var(--blue-ink); }
.steps-five h3 { grid-column: 2; grid-row: 2; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.2; margin: 0; color: var(--navy); }
.steps-five p { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.work .work-note { margin-top: 12px; }

/* ---- three ways, compact ---- */
.ways-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ways-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; min-height: 64px; }
.ways-card:hover { border-color: var(--blue); transform: translateY(-1px); }
.ways-card > span:not(.pick-letter) { min-width: 0; }
.ways-card b { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--navy); }
.ways-card span span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.ways-shared { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.ways-shared svg { width: 18px; height: 18px; color: #0c7a46; flex: 0 0 auto; }
.ways-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: 12px; }
.ways-foot .ways-shared { margin: 0; }

/* ---- what we do: three equal question cards ---- */
.q-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.q-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.q-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.q-no { font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; color: var(--blue-ink); margin: 0 0 2px; }
.q-card h3 { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 0; color: var(--navy); }
.q-card .card-icon { width: 48px; height: 48px; margin: 0; border-radius: 13px; flex: 0 0 auto; }
.q-card .card-icon svg { width: 24px; height: 24px; }
.q-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.q-card li { font-size: 15px; color: var(--ink); padding: 10px 12px; background: var(--ground-2); border-radius: 10px; line-height: 1.4; }
.q-line { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.q-line svg { width: 18px; height: 18px; color: var(--blue); flex: 0 0 auto; }
.examples-grid.is-five .ex-tile .ex-q { font-family: var(--display); font-weight: 600; font-size: 13.5px; line-height: 1.4; color: var(--navy); margin: 0; }

/* ---- what we build: scope behind a fold, lines around the table ---- */
.scope-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 2px 18px; }
.scope-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 0; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--blue-ink); min-height: 44px; }
.scope-details summary::-webkit-details-marker { display: none; }
.scope-details summary::before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-soft); font-weight: 700; flex: 0 0 auto; }
.scope-details[open] summary::before { content: "\2013"; }
.scope-details .scope-notes { margin: 2px 0 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-line { font-size: 14.5px; color: var(--ink-2); margin: 0 0 12px; max-width: 80ch; }
.offer-line.is-after { margin: 12px 0 0; }
#three-ways .ways-shared { margin-top: 12px; }

/* ---- about: the K in a white badge, the process note with its link ---- */
.name-row .mark-chip.is-lg { width: 120px; height: 120px; border-radius: 28px; padding: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.name-row .mark-chip.is-lg img { width: 100%; height: 100%; object-fit: contain; }
.process-note { align-items: center; }
.process-note > div { flex: 1 1 280px; min-width: 0; }
.process-note .btn { flex: 0 0 auto; margin-left: auto; }

/* ---- phones and narrow screens ---- */
@media (max-width: 900px) {
  .work-intro { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .work-art .scene { margin: 0 auto; max-width: 340px; }
  .steps-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-cards, .ways-cards, .q-three { grid-template-columns: minmax(0, 1fr); }
  .ov-first { grid-template-columns: minmax(0, 1fr); }
  .process-note .btn { margin-left: 0; }
}
@media (max-width: 620px) {
  .steps-five { grid-template-columns: minmax(0, 1fr); }
  .steps-five li { padding: 12px 14px; }
  .ov-tiles { grid-template-columns: minmax(0, 1fr); }
  .ov-bars div { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .ov-head { gap: 6px; }
  /* one offer column reads in full beside the sticky feature column */
  .offer-table { min-width: 680px; }
  .offer-table thead th:first-child, .offer-table tbody th { width: 150px; min-width: 150px; max-width: 150px; }
  .offer-table td { min-width: 180px; }
  .offer-table tbody th .offer-f { max-width: calc(100% - 36px); }
  .scope-details .scope-notes { grid-template-columns: minmax(0, 1fr); }
  .name-row { grid-template-columns: minmax(0, 1fr); }
  .name-row .mark-chip.is-lg { width: 96px; height: 96px; border-radius: 22px; padding: 12px; }
}

/* ---- price and household previews on the shared report cards ---- */
.shot .barg { fill: #0c7a46; fill-opacity: .7; } .shot .barl { fill: #9fc3f3; }
.shot .t-n-good { font-family: var(--display); font-weight: 600; font-size: 9px; fill: #0c7a46; }
.shot .ci { stroke: var(--ink-2); stroke-width: 1.4; }
.shot-price .line, .shot-econ .line { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linejoin: round; }

/* ---- what we do: three question groups as rows, one worked example, roomy industry cards ---- */
.q-cols.is-groups { margin-top: 0; gap: 16px; }
.q-cols.is-groups .q-col { padding: 20px 22px 14px; }
.q-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.q-head .card-icon { width: 44px; height: 44px; margin: 0; border-radius: 12px; flex: 0 0 auto; }
.q-head .card-icon svg { width: 22px; height: 22px; }
.q-head h3 { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 0; color: var(--navy); line-height: 1.2; }
.q-cols.is-groups .q-list { margin-bottom: 0; }
.q-cols.is-groups .q-list li { font-size: 15px; padding: 10px 0; }
.q-cols.is-groups .q-list svg { width: 30px; height: 30px; padding: 7px; border-radius: 9px; }
.sample-q { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 22px 32px; align-items: start; margin-top: 22px; padding: 24px 26px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.sample-q-text h3 { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2vw, 23px); line-height: 1.25; margin: 6px 0 14px; color: var(--navy); }
.sample-q-steps { margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.sample-q-steps > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; }
.sample-q-steps dt { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); padding-top: 2px; }
.sample-q-steps dt svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sample-q-steps dd { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.5; }
.sample-q-chart { background: var(--ground-2); border-radius: 14px; padding: 16px 18px 14px; min-width: 0; }
.sample-q-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--navy); margin-bottom: 12px; }
.rc-label-pill { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-soft); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.sample-bars { display: grid; gap: 9px; }
.sample-bars > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.sample-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-bars i { display: block; height: 11px; border-radius: 6px; background: var(--blue-soft); position: relative; overflow: hidden; }
.sample-bars i::before { content: ""; position: absolute; inset: 0; width: var(--w); background: #9fc3f3; border-radius: 6px; }
.sample-bars .is-top i::before { background: var(--blue); }
.sample-bars .is-top span, .sample-bars .is-top b { color: var(--navy); font-weight: 600; }
.sample-bars b { font-family: var(--display); font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.sample-q-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); }
.examples-grid.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.examples-grid.is-wide .ex-tile { display: block; padding: 20px 20px 18px; }
.examples-grid.is-wide .ex-tile .card-icon { width: 46px; height: 46px; border-radius: 13px; margin: 0 0 12px; }
.examples-grid.is-wide .ex-tile .card-icon svg { width: 23px; height: 23px; }
.examples-grid.is-wide .ex-tile h3 { font-size: 17px; line-height: 1.25; margin: 0 0 8px; }
.examples-grid.is-wide .ex-tile p { font-size: 14.5px; line-height: 1.5; margin: 0; color: var(--ink-2); }
.examples-grid.is-wide .ex-note { margin: 0; align-self: stretch; display: flex; align-items: center; }
@media (max-width: 980px) {
  .q-cols.is-groups { grid-template-columns: minmax(0, 1fr); }
  .sample-q { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 16px; }
  .examples-grid.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .examples-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
  .sample-bars > div { grid-template-columns: 112px minmax(0, 1fr) 48px; font-size: 12.5px; }
  .sample-q-steps > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.shot-build .line, .shot-port .line { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linejoin: round; }

.all-reports { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 0; }
.all-reports span { font-size: 14px; color: var(--ink-2); }

/* ===== bigger, emphasised report thumbnails =====
   The preview comes first and fills the card; the first report is featured
   across the full width. Two columns elsewhere, one on a phone. */
.report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.report-card { padding: 0 0 22px; gap: 10px; border-radius: 22px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.report-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(7, 35, 83, .13); border-color: #cfe0f7; }
.report-card > *:not(.rc-shot) { margin-left: 24px; margin-right: 24px; }
.report-card .rc-shot { order: -1; position: relative; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: linear-gradient(160deg, #eaf3ff 0%, #f6fbff 60%, #fff 100%); padding: 22px 22px 0; }
.report-card .rc-shot svg { border-radius: 14px 14px 0 0; box-shadow: 0 -2px 0 rgba(255,255,255,.6), 0 14px 34px rgba(7, 35, 83, .14); transition: transform .35s ease; transform-origin: 50% 100%; }
.report-card:hover .rc-shot svg { transform: scale(1.025); }
.report-card .rc-shot::before { content: "Interactive report"; position: absolute; left: 16px; top: 12px; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--navy); padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(7,35,83,.2); }
.report-card .rc-q { margin-top: 14px; font-size: 20px; line-height: 1.25; }
.report-card .rc-desc { font-size: 15px; }
.report-card .btn { margin-top: 6px; }
/* the first report spans the row, picture left and words right */
.report-cards > .report-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 0; align-content: start; padding: 0; }
.report-cards > .report-card:first-child .rc-shot { grid-column: 1; grid-row: 1 / span 6; border-bottom: 0; border-right: 1px solid var(--line); padding: 30px 26px 0; display: flex; align-items: flex-end; }
.report-cards > .report-card:first-child > *:not(.rc-shot) { grid-column: 2; margin-left: 30px; margin-right: 30px; }
.report-cards > .report-card:first-child .rc-q { margin-top: 30px; font-size: 24px; }
.report-cards > .report-card:first-child .btn { margin-bottom: 30px; }
.report-cards > .report-card:first-child .rc-shot::before { content: "Featured · Interactive report"; }
@media (max-width: 900px) {
  .report-cards { grid-template-columns: minmax(0, 1fr); }
  .report-cards > .report-card:first-child { display: flex; flex-direction: column; padding: 0 0 22px; }
  .report-cards > .report-card:first-child .rc-shot { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 18px 0; }
  .report-cards > .report-card:first-child > *:not(.rc-shot) { margin-left: 20px; margin-right: 20px; }
  .report-cards > .report-card:first-child .rc-q { margin-top: 14px; font-size: 20px; }
  .report-cards > .report-card:first-child .btn { margin-bottom: 0; }
  .report-card > *:not(.rc-shot) { margin-left: 20px; margin-right: 20px; }
  .report-card .rc-shot { padding: 18px 14px 0; }
}
@media (prefers-reduced-motion: reduce) { .report-card, .report-card .rc-shot svg { transition: none; } .report-card:hover, .report-card:hover .rc-shot svg { transform: none; } }

/* ===== a picture on each offer ===== */
.pick-art { margin: -4px -4px 14px; border-radius: 14px; background: linear-gradient(160deg, #eaf3ff, #f7fbff); padding: 10px 10px 4px; }
.pick-card.is-b .pick-art { background: linear-gradient(160deg, #e3e9f6, #f5f8fd); }
.pick-card.is-c .pick-art { background: linear-gradient(160deg, #dcf6fb, #f4fcfe); }
.pick-art svg { width: 100%; height: auto; display: block; }
.pick-art .pa-card { fill: #fff; stroke: #d3dfef; stroke-width: 1.2; }
.pick-art .pa-line { stroke: #cfdcee; stroke-width: 3; stroke-linecap: round; }
.pick-art .pa-blue { fill: var(--blue); } .pick-art .pa-soft { fill: #b9d5f7; } .pick-art .pa-navy { fill: var(--navy); } .pick-art .pa-cyan { fill: var(--cyan); }
.pick-art .pa-good { fill: var(--good); } .pick-art .pa-amber { fill: var(--watch); }
.pick-art .pa-stroke { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pick-art .pa-arrow { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pick-art text { font-family: var(--display); font-weight: 600; font-size: 10px; fill: var(--ink-2); }

/* Home keeps the three reports on one screen: the featured one wide on top,
   the other two as shorter side-by-side cards with the picture on the left. */
@media (min-width: 901px) {
  .is-home-reports .report-cards { gap: 16px; }
  .is-home-reports .report-cards > .report-card:first-child .rc-shot { padding: 26px 24px 0; justify-content: center; }
  .is-home-reports .report-cards > .report-card:first-child .rc-shot svg { max-height: clamp(200px, 31vh, 300px); width: auto; max-width: 100%; }
  .is-home-reports .report-cards > .report-card:first-child .rc-q { margin-top: 24px; }
  .is-home-reports .report-cards > .report-card:first-child .btn { margin-bottom: 24px; }
  .is-home-reports .report-cards > .report-card:not(:first-child) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-content: center; padding: 0; gap: 8px 0; }
  .is-home-reports .report-cards > .report-card:not(:first-child) .rc-shot { grid-column: 1; grid-row: 1 / span 5; border-bottom: 0; border-right: 1px solid var(--line); padding: 30px 14px 0; display: flex; align-items: flex-end; }
  .is-home-reports .report-cards > .report-card:not(:first-child) .rc-shot::before { font-size: 9.5px; left: 10px; top: 8px; }
  .is-home-reports .report-cards > .report-card:not(:first-child) > *:not(.rc-shot) { grid-column: 2; margin-left: 18px; margin-right: 18px; }
  .is-home-reports .report-cards > .report-card:not(:first-child) .rc-q { margin-top: 16px; font-size: 17px; }
  .is-home-reports .report-cards > .report-card:not(:first-child) .rc-desc { display: none; }
  .is-home-reports .report-cards > .report-card:not(:first-child) .btn { margin-bottom: 16px; justify-self: start; }
}
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-bottom: 30px; }
.head-row .section-head { margin-bottom: 0; }
.head-row .all-reports { margin: 0; flex-direction: column; align-items: flex-end; text-align: right; gap: 8px; max-width: 36ch; }
.is-one-view .head-row { margin-bottom: clamp(14px, 2.4vh, 22px); }
@media (min-width: 901px) {
  .is-home-reports .report-cards > .report-card:first-child .rc-shot svg { max-height: clamp(190px, 28vh, 290px); }
}
@media (max-width: 900px) {
  .head-row .all-reports { align-items: flex-start; text-align: left; max-width: none; }
}
@media (min-width: 901px) {
  .is-home-reports .report-cards > .report-card:not(:first-child) .rc-q { margin-top: 12px; }
  .is-home-reports .report-cards > .report-card:not(:first-child) .btn { margin-bottom: 12px; }
  .is-home-reports .report-cards > .report-card:first-child .rc-shot svg { max-height: clamp(190px, 27vh, 290px); }
}
@media (max-width: 900px) {
  .report-card .rc-shot, .report-cards > .report-card:first-child .rc-shot { padding-top: 44px; }
  .report-card .rc-shot::before { top: 12px; }
}