/* Mantas Auk LLC — client portal. Brand tokens match mantasauk.com, with a quieter,
   more consultative rhythm: deeper navy, hairline rules, generous whitespace. */
:root {
  --ink: #0b1220;
  --ink-2: #111a33;
  --text: #1f2937;
  --muted: #5b6578;
  --line: #e6e8ee;
  --line-soft: #eef0f5;
  --bg: #ffffff;
  --bg-soft: #f7f8fb;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --good: #10b981;
  /* readable on white; --good itself is 2.54:1 and is for fills and borders */
  --good-ink: #047857;
  --warn: #f59e0b;
  /* readable on white; --warn itself is 2.15:1 and is for fills and borders */
  --warn-ink: #b45309;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .06), 0 4px 14px rgba(11, 18, 32, .05);
  --shadow-lg: 0 24px 60px rgba(11, 18, 32, .14);
  --f-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1140px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h, 68px) + var(--jump-h, 0px) + 14px); }
body { margin: 0; font-family: var(--f-body); color: var(--text); background: var(--bg); font-size: 16.5px; line-height: 1.7; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--f-display); color: var(--ink); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .6rem; text-wrap: balance; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }
.muted { color: var(--muted); }
.eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.prose { max-width: 74ch; }
.prose p { color: var(--text); }
.fineprint { font-size: .84rem; color: var(--muted); max-width: 74ch; margin-top: 1.25rem; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; font-family: var(--f-body); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(37, 99, 235, .28); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37, 99, 235, .34); }
.btn-outline { border-color: rgba(255, 255, 255, .28); color: #fff; }
.pp-section .btn-outline, .pp-doc .pp-section .btn-outline { border-color: rgba(11, 18, 32, .16); color: var(--ink); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .18); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn-link { background: none; border: 0; color: rgba(255, 255, 255, .6); font-size: .82rem; cursor: pointer; font-family: var(--f-body); padding: 0; }
.btn-link:hover { color: #fff; text-decoration: underline; }

/* ---------- login ---------- */
.pp-login-body { min-height: 100vh; display: grid; place-items: center; background:
    radial-gradient(1000px 600px at 80% -10%, rgba(37, 99, 235, .30), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(37, 99, 235, .16), transparent 60%),
    linear-gradient(160deg, #0b1220 0%, #111a33 100%); padding: 2rem 1rem; }
.login-shell { width: min(470px, 100%); }
.login-card { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-lg); padding: 2.5rem 2.25rem; backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); }
.login-logo { margin-bottom: 1.75rem; opacity: .95; }
.login-client-logo { max-height: 62px; width: auto; margin-bottom: 1.25rem; }
.login-client-logo:not(.is-light) { background: #fff; padding: .45rem .7rem; border-radius: 10px; }
.login-eyebrow { color: #93b4fd; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin: 0 0 .4rem; }
.login-title { color: #fff; font-size: 1.7rem; margin: 0 0 .6rem; }
.login-lead { color: rgba(255, 255, 255, .72); font-size: .96rem; margin-bottom: 1.75rem; }
.login-label { display: block; color: rgba(255, 255, 255, .78); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .45rem; }
.login-input { width: 100%; padding: .95rem 1.1rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); color: #fff; font-size: 1.05rem; letter-spacing: .08em; font-family: var(--f-body); margin-bottom: 1.1rem; }
.login-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: rgba(255, 255, 255, .1); }
.login-error { color: #fecaca; background: rgba(220, 38, 38, .16); border: 1px solid rgba(248, 113, 113, .35); padding: .7rem .9rem; border-radius: 10px; font-size: .88rem; margin: 0 0 1rem; }
.login-help { color: rgba(255, 255, 255, .55); font-size: .84rem; margin: 1.5rem 0 0; }
.login-help a { color: #93b4fd; }
.login-foot { text-align: center; color: rgba(255, 255, 255, .38); font-size: .78rem; margin-top: 1.5rem; }

/* ---------- nav ---------- */
.pp-nav { position: sticky; top: 0; z-index: 40; background: rgba(11, 18, 32, .92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nav-inner { display: flex; align-items: center; gap: 1.25rem; padding: .75rem 0; }
.nav-brand img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 1.25rem; margin-left: auto; }
.nav-links a { color: rgba(255, 255, 255, .7); text-decoration: none; font-size: .92rem; font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: #fff; }
.nav-links a.is-active { color: #fff; border-bottom-color: var(--accent); }
.nav-cta { display: flex; align-items: center; gap: .6rem; margin-left: 1.25rem; }
.nav-cta .btn { padding: .55rem 1.05rem; font-size: .86rem; }
.nav-logout { margin: 0; }

/* ---------- hero ---------- */
.pp-hero { position: relative; background: linear-gradient(160deg, #0b1220 0%, #111a33 100%); color: #fff; overflow: hidden; padding: 5.5rem 0 5rem; }
.pp-hero.is-compact { padding: 3.5rem 0 3rem; }
.hero-bg { position: absolute; inset: 0; background:
    radial-gradient(900px 520px at 78% 0%, rgba(37, 99, 235, .38), transparent 62%),
    radial-gradient(600px 400px at 6% 100%, rgba(37, 99, 235, .16), transparent 60%); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(70% 60% at 60% 30%, #000 30%, transparent 75%); }
.hero-inner { position: relative; }
.hero-logos { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2.25rem; }
.hero-logo-client { max-height: 54px; width: auto; background: #fff; padding: .5rem .8rem; border-radius: 10px; }
.hero-logo-client.is-light { background: none; padding: 0; max-height: 60px; }
.hero-logo-ma { max-height: 38px; width: auto; }
.hero-logo-x { color: rgba(255, 255, 255, .35); font-size: 1.1rem; }
.hero-logo-text { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: #fff; }
.hero-eyebrow { color: #93b4fd; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 .75rem; }
.hero-title { color: #fff; font-size: clamp(2rem, 4.6vw, 3.35rem); max-width: 20ch; margin-bottom: 1.1rem; }
.pp-hero.is-compact .hero-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); max-width: none; }
.hero-lead { color: rgba(255, 255, 255, .78); font-size: 1.08rem; max-width: 62ch; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.75rem 0; color: rgba(255, 255, 255, .6); font-size: .88rem; }
.hero-meta strong { color: rgba(255, 255, 255, .85); font-weight: 600; margin-right: .35rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- sections ---------- */
.pp-section { padding: 4.5rem 0; border-bottom: 1px solid var(--line-soft); }
.pp-section.pp-soft { background: var(--bg-soft); }
.sec-head { margin-bottom: 2.25rem; max-width: 70ch; }
.pp-final { background: linear-gradient(160deg, #0b1220 0%, #111a33 100%); color: #fff; padding: 4.5rem 0; text-align: center; }
.pp-final h2 { color: #fff; }
.pp-final .prose { margin-inline: auto; color: rgba(255, 255, 255, .75); }
.pp-final .eyebrow { color: #93b4fd; }
.final-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.75rem 0 1.25rem; }
.final-contact { color: rgba(255, 255, 255, .6); display: flex; gap: .6rem; justify-content: center; font-size: .95rem; }
/* 26px was a small target for the two links a client is most likely to tap. */
.final-contact a { color: #93b4fd; text-decoration: none; display: inline-block; padding: .35rem 0; }

/* ---------- summary ---------- */
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin-top: 2rem; }
.sum-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); }
.sum-k { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: .5rem; }
.sum-card p { margin: 0; font-size: .96rem; }

/* ---------- findings ---------- */
.find-charts { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; margin: 1rem 0 1.5rem; }
.chart-donut { margin: 0; text-align: center; }
.chart-donut svg { width: 168px; height: 168px; }
.donut-value { font-family: var(--f-display); font-size: 34px; font-weight: 800; fill: var(--ink); }
.donut-sub { font-size: 13px; fill: var(--muted); }
.chart-donut figcaption { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
.read-note { font-size: .88rem; line-height: 1.65; color: var(--muted); background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin: .9rem 0 0; }
.read-note strong { color: var(--ink); }
.read-note em { font-style: normal; font-weight: 600; color: var(--ink); }
.chart-note { font-size: .88rem; color: var(--muted); text-align: center; max-width: 78ch; margin-inline: auto; }
.find-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; margin-top: 2rem; }
.find-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.find-label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.find-value { font-family: var(--f-display); font-size: 2rem; font-weight: 800; color: var(--ink); margin: .35rem 0 .5rem; line-height: 1.1; }
.find-card.is-good .find-value { color: var(--good-ink); }
.find-card.is-warn .find-value { color: var(--warn-ink); }
.find-text { font-size: .94rem; color: var(--muted); margin: 0; }

/* ---------- charts ---------- */
.chart-bars { display: grid; gap: .55rem; margin: 1.5rem 0; }
.bar-row { display: grid; grid-template-columns: minmax(150px, 26%) 1fr auto; align-items: center; gap: 1rem; }
.bar-label { font-size: .9rem; color: var(--text); }
.bar-track { background: rgba(11, 18, 32, .07); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, var(--accent)); }
.bar-row.is-highlight .bar-fill { background: linear-gradient(90deg, #34d399, var(--good)); }
.bar-row.is-zero .bar-fill { background: rgba(11, 18, 32, .18); }
.bar-value { font-weight: 700; font-size: .92rem; color: var(--ink); min-width: 3.2rem; text-align: right; }
.chart-lines svg { width: 100%; height: auto; }
.chart-lines .axis { font-size: 12px; fill: var(--muted); font-family: var(--f-body); }
.legend { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; margin-top: .75rem; font-size: .88rem; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---------- kpi ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.35rem; box-shadow: var(--shadow-sm);
  /* the number is sized against this card, not against the window, so a
     five-figure sum cannot outgrow the box it sits in */
  container-type: inline-size; }
/* one- and two-line labels reserve the same height, so every number in the row
   sits on the same baseline */
.kpi-label { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700;
  line-height: 1.35; min-height: 2.7em; }
.kpi-value { display: block; font-family: var(--f-display); font-weight: 800; color: var(--ink); line-height: 1.1; margin: .3rem 0;
  font-size: 1.9rem; font-size: clamp(1.35rem, 15cqi, 2.2rem);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-value em { font-style: normal; font-size: 1.1rem; color: var(--accent); margin-left: .5rem; }
.kpi-sub { display: block; font-size: .88rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 720px) { .kpi-label { min-height: 0; } }
.delta { display: inline-block; font-size: .8rem; font-weight: 700; margin-left: .35rem; }
.delta.is-up { color: var(--good-ink); }
.delta.is-down { color: #dc2626; }
.delta.is-flat { color: var(--muted); font-weight: 500; }

/* ---------- problem / solution ---------- */
.prob-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.prob-item { display: grid; grid-template-columns: 54px 1fr; gap: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.prob-n { font-family: var(--f-display); font-weight: 800; color: var(--accent); background: var(--accent-soft); width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; }
.prob-item h3 { margin-bottom: .35rem; }
.prob-item p { margin: 0; color: var(--muted); }
.sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.sol-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.sol-card p { color: var(--muted); font-size: .96rem; }
ul.tick { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .4rem; }
ul.tick li { position: relative; padding-left: 1.6rem; font-size: .93rem; color: var(--text); }
ul.tick li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

/* ---------- preview ---------- */
.prev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.prev-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.prev-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.prev-kind { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.prev-card strong { display: block; margin: .4rem 0 .3rem; font-family: var(--f-display); }
.prev-url { font-size: .85rem; color: var(--muted); word-break: break-all; }
.prev-note { display: block; font-size: .85rem; color: var(--muted); margin-top: .5rem; }

/* ---------- timeline ---------- */
.tl { display: grid; gap: 1rem; }
.tl-item { display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.tl-phase { display: flex; align-items: center; gap: .6rem; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.tl-when { font-family: var(--f-display); font-weight: 700; color: var(--ink); }
.tl-outcome { margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line-soft); font-size: .93rem; color: var(--muted); }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; margin-top: 2rem; align-items: start; }
.price-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem 1.7rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.price-card.is-rec { border-color: var(--accent); box-shadow: 0 20px 50px rgba(37, 99, 235, .18); }
.price-flag { position: absolute; top: -13px; left: 1.7rem; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .85rem; border-radius: 999px; }
.price-tag { color: var(--muted); font-size: .92rem; margin: 0 0 .75rem; }
.price-amount { font-family: var(--f-display); font-size: 2.5rem; font-weight: 800; color: var(--ink); margin: .5rem 0 1rem; line-height: 1; }
.price-amount span { font-size: .95rem; font-weight: 500; color: var(--muted); margin-left: .3rem; }
.price-for, .price-intensity { font-size: .9rem; color: var(--muted); }
.price-card .btn { margin-top: auto; }
.price-card ul.tick { margin-bottom: 1.25rem; }
.budget { margin-top: 2.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.budget h3 { margin-bottom: 1rem; }
.budget-table { width: 100%; border-collapse: collapse; }
.budget-table th, .budget-table td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line-soft); font-size: .94rem; vertical-align: top; }
.budget-table th { width: 30%; font-weight: 600; color: var(--ink); }
.bn-note { color: var(--muted); font-size: .88rem; }

/* ---------- roi ---------- */
.roi { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem; box-shadow: var(--shadow-sm); margin-top: 1.5rem; }
.roi-inputs { display: grid; gap: 1.1rem; align-content: start; }
.roi-inputs label { font-size: .88rem; font-weight: 600; color: var(--ink); display: grid; gap: .4rem; }
.roi-field { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 10px; padding: .1rem .8rem; background: var(--bg-soft); }
.roi-field span { color: var(--muted); font-weight: 600; }
.roi-field input { border: 0; background: transparent; padding: .7rem 0; font-size: 1.05rem; font-family: var(--f-body); width: 100%; color: var(--ink); font-weight: 600; }
.roi-field input:focus { outline: none; }
.roi-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1rem; align-content: start; }
.roi-stat { background: var(--bg-soft); border-radius: var(--radius); padding: 1.2rem; }
.roi-stat span { display: block; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.roi-stat strong { display: block; font-family: var(--f-display); font-size: 1.7rem; color: var(--ink); margin-top: .35rem; }
.roi-stat.is-primary { background: var(--accent-soft); }
.roi-stat.is-primary strong { color: var(--accent); }

/* ---------- why ---------- */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); gap: 3rem; align-items: start; }
.fact-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .55rem; }
.fact-list li { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-soft); font-size: .94rem; }
.fact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-list strong { color: var(--ink); }
.fact-list span { color: var(--muted); }
.why-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem 1.4rem; text-align: center; box-shadow: var(--shadow-sm);
  margin-top: 0; }
.why-grid .sec-head { margin-bottom: 1.1rem; }
/* inline-block eyebrows sit inside a line box, which drops the text a few px
   below the card edge next to it */
.why-grid .sec-head .eyebrow { display: block; line-height: 1.2; }
.why-card h3 { font-size: 1.1rem; margin: 0 0 .15rem; }
.why-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto .7rem; }
.why-role { font-size: .84rem; line-height: 1.45; color: var(--muted); margin: 0; }
.why-sig { font-family: 'Caveat', cursive; font-size: 1.7rem; color: var(--ink); margin: .55rem 0 .9rem; }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 2rem; }
.quote { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.quote blockquote { margin: 0 0 .9rem; font-size: .96rem; color: var(--text); }
.quote figcaption { font-size: .86rem; color: var(--muted); }
.quote figcaption a { color: var(--muted); display: inline-block; padding: .3rem 0; }

/* ---------- tables & data ---------- */
.table-scroll { overflow-x: auto; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.data-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.data-table th, .data-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line-soft); font-size: .92rem; vertical-align: top; }
.data-table thead th { background: var(--bg-soft); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); position: sticky; top: 0; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
/* Digits line up column to column, and a figure never breaks across two lines.
   Prose columns are marked .muted and keep wrapping; the table itself scrolls
   inside .table-scroll, so nothing is lost off the side of the page. */
.data-table { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.data-table td:not(:first-child):not(.muted) { white-space: nowrap; }
.data-table td:first-child { min-width: 8.5rem; overflow-wrap: anywhere; }
.data-table td.muted { min-width: 9rem; }
.data-table tr.is-branded td, .data-table tr.is-you td { background: var(--accent-soft); }
.tag-you { background: var(--accent); color: #fff; font-size: .68rem; padding: .1rem .45rem; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; }
.mini-bar { display: inline-block; width: 60px; height: 8px; background: rgba(11, 18, 32, .08); border-radius: 999px; margin-right: .5rem; vertical-align: middle; overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: var(--accent); }
.period-picker { margin-top: 1.5rem; display: flex; align-items: center; gap: .6rem; color: rgba(255, 255, 255, .7); font-size: .9rem; }
.period-picker select { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; padding: .5rem .8rem; font-family: var(--f-body); }
.period-picker option { color: #111; }

/* ---------- gaps / movement ---------- */
.gap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.gap-item { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.gap-n { font-family: var(--f-display); font-weight: 800; color: var(--accent); }
.gap-q { margin: 0 0 .3rem; font-weight: 600; color: var(--ink); }
.gap-meta { margin: 0; font-size: .84rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.gap-fix { margin: .5rem 0 0; font-size: .9rem; color: var(--text); }
.more { margin-top: 1.5rem; }
.more summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.plain-list { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: .92rem; display: grid; gap: .35rem; }
.move-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.move-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.move-col h3 { margin-bottom: .75rem; }
.move-col.is-win h3 { color: var(--good-ink); }
.move-col.is-loss h3 { color: #dc2626; }
.move-col ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: .92rem; color: var(--text); }
.empty-note { background: var(--accent-soft); border: 1px solid rgba(37, 99, 235, .2); border-radius: var(--radius); padding: 1.25rem 1.5rem; color: var(--text); }
.empty-note p { margin: 0; }

/* ---------- footer ---------- */
.pp-footer { background: #0b1220; color: rgba(255, 255, 255, .6); padding: 2.5rem 0; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.footer-logo { opacity: .9; margin-bottom: .75rem; }
.footer-note { font-size: .84rem; margin: 0; max-width: 52ch; }
.footer-contact { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.footer-contact a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.footer-contact a:hover { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* the three views become a pill row of their own so switching stays one tap */
  .nav-inner { flex-wrap: wrap; gap: .55rem .8rem; padding: .6rem 0; }
  .nav-brand { margin-right: auto; }
  .nav-brand img { height: 26px; }
  .nav-cta { margin-left: 0; gap: .55rem; }
  .nav-cta .btn { padding: .5rem .95rem; font-size: .84rem; white-space: nowrap; }
  /* four views no longer fit one row on a phone, so the pills wrap instead of
     scrolling half a label out of sight */
  .nav-links { order: 3; width: 100%; margin-left: 0; gap: .3rem; flex-wrap: wrap; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 1 1 auto; min-width: calc(50% - .15rem); text-align: center; white-space: nowrap; font-size: .8rem;
    padding: .42rem .6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .07); }
  .nav-links a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .why-grid, .roi, .tl-item { grid-template-columns: 1fr; }
  .pp-section { padding: 3.25rem 0; }
  .hero-title { font-size: clamp(1.75rem, 7vw, 2.3rem); }
  .find-charts { gap: 1.5rem; }
  .chart-donut svg { width: 132px; height: 132px; }
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-row .bar-track { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .nav-cta .btn-print { display: none; }
  .nav-logout .btn-link { font-size: .78rem; }
  .offer-card { padding: 1rem 1.15rem; width: 100%; }
  .offer-price { font-size: 2.1rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .svc-head { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .hero-logos { gap: 1rem; }
  .hero-logo-client { max-height: 42px; }
  .prob-item { grid-template-columns: 1fr; }
  .fact-list li { grid-template-columns: 1fr; gap: .1rem; }
}

/* ---------- print / PDF ---------- */
@media print {
  @page { margin: 14mm; }
  .pp-nav, .final-cta, .nav-cta, .more, .period-picker, .roi-inputs { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  .pp-hero, .pp-final { background: #0b1220 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: 2rem 0; }
  .pp-section { padding: 1.5rem 0; page-break-inside: avoid; border-bottom: 1px solid #ddd; }
  .price-card, .sol-card, .find-card, .kpi, .tl-item, .prob-item, .quote { box-shadow: none; page-break-inside: avoid; }
  .table-scroll { overflow: visible; }
  .data-table { min-width: 0; }
  .data-table th, .data-table td { padding: .65rem .7rem; font-size: .88rem; }
  .data-table td:first-child { min-width: 7.5rem; }
  .data-table td.muted { min-width: 7.5rem; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #666; word-break: break-all; }
  .btn { display: none; }
}

/* ---- AI scorecard question list ---------------------------------------- */
.sec-lead { max-width: 62ch; color: var(--muted); margin: .55rem 0 0; }
.q-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.4rem 0 1.1rem; }
.q-chip { font: inherit; font-size: .85rem; font-weight: 600; letter-spacing: .01em; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 999px; padding: .48rem .95rem; display: inline-flex; align-items: center; gap: .45rem;
  transition: border-color .15s ease, background .15s ease, color .15s ease; }
.q-chip span { font-variant-numeric: tabular-nums; font-size: .78rem; color: #475569;
  background: var(--bg-soft); border-radius: 999px; padding: .1rem .42rem; }
.q-chip:hover { border-color: var(--accent); }
.q-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.q-chip.is-active span { background: rgba(255,255,255,.18); color: #fff; }
.q-group { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); margin-left: auto; }
.q-group select { font: inherit; font-size: .85rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: .42rem .6rem; max-width: 15rem; }
.q-list { display: grid; gap: .8rem; }
.q-item { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 14px; padding: 1.05rem 1.2rem; }
.q-item[data-state="top3"] { border-left-color: #16a34a; }
.q-item[data-state="named"] { border-left-color: #d97706; }
.q-item[data-state="missing"] { border-left-color: #dc2626; }
.q-head { display: flex; gap: .7rem; align-items: baseline; }
.q-n { font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2ch; }
.q-text { font-size: 1.02rem; line-height: 1.45; margin: 0; font-weight: 600; }
.q-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: .6rem 0 0; padding-left: 2.7ch; }
.q-badge { font-size: .74rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: .2rem .6rem; }
.q-badge.is-top3 { background: #dcfce7; color: #14532d; }
.q-badge.is-named { background: #fef3c7; color: #78350f; }
.q-badge.is-missing { background: #fee2e2; color: #7f1d1d; }
.q-tag { font-size: .74rem; color: var(--muted); background: var(--bg-soft); border-radius: 999px; padding: .2rem .6rem; }
.q-companies { margin: .7rem 0 0; padding-left: 2.7ch; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.q-companies-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.q-company { display: inline-flex; align-items: baseline; gap: .35rem; background: var(--bg-soft);
  border-radius: 8px; padding: .2rem .55rem; font-weight: 600; }
.q-company em { font-style: normal; font-size: .7rem; color: var(--muted); }
.q-company.is-you { background: #dcfce7; color: #14532d; }
.q-company.is-you em { color: #14532d; }
.q-note { margin: .6rem 0 0; padding-left: 2.7ch; font-size: .88rem; color: var(--muted); }
.q-action { margin: .6rem 0 0; padding-left: 2.7ch; font-size: .88rem; line-height: 1.55; }
.q-action strong { color: var(--ink); }
.q-more { margin-top: 1.1rem; }
.q-empty { margin-top: 1.2rem; color: var(--muted); background: #fff; border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; text-align: center; }
.q-empty p { margin: 0 0 .9rem; }
.q-reset { border-color: var(--line); color: var(--ink); background: #fff; padding: .55rem 1.2rem; font-size: .88rem; }
.q-reset:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
  /* label above the dropdown, and the dropdown gets the whole row: side by side
     they add up to more than a 320px screen has */
  .q-group { margin-left: 0; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: .3rem; }
  .q-group select { width: 100%; }
  .q-meta, .q-companies, .q-note, .q-action { padding-left: 0; }
}
@media print {
  .q-filters, .q-more { display: none; }
  .q-item[hidden] { display: block !important; }
}

/* ---- in-page section menu ---------------------------------------------- */
.pp-jump { position: sticky; top: var(--nav-h, 68px); z-index: 30;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, background .2s ease; }
.pp-jump::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(37, 99, 235, 0)); opacity: .55; }
.pp-jump.is-stuck { background: rgba(247, 248, 251, .96); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(11, 18, 32, .10); }
.jump-inner { display: flex; align-items: center; gap: 1.1rem; padding: .7rem 0; }
.jump-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; }
.jump-label::before { content: ''; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; }
.jump-links { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.jump-links::-webkit-scrollbar { display: none; }
.jump-links a { font-size: .88rem; font-weight: 600; color: var(--text); text-decoration: none;
  white-space: nowrap; padding: .48rem .95rem; border-radius: 999px; border: 1px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease; }
.jump-links a:hover { color: var(--ink); background: var(--bg); border-color: var(--line); }
.jump-links a.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }
@media (max-width: 720px) {
  .jump-inner { gap: .55rem; padding: .6rem 0; }
  .jump-label { display: none; }
  .jump-links a { font-size: .84rem; padding: .42rem .8rem; }
}
@media print { .pp-jump { display: none; } }

/* ---- proposal: offer-first layout -------------------------------------- */
.pp-hero.is-offer { padding-top: 2.6rem; padding-bottom: 3rem; }
.pp-hero.is-offer .hero-logos { margin-bottom: .9rem; }
.pp-hero.is-offer .hero-title { max-width: 24ch; font-size: clamp(1.7rem, 3.3vw, 2.45rem); margin-bottom: .4rem; }
.pp-hero.is-offer .hero-meta { margin-top: 1rem; }
.offer-card { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius); padding: .9rem 1.3rem; margin: 1.15rem 0 .3rem; backdrop-filter: blur(6px); }
.offer-flag { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #93c5fd; }
.offer-plan { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; color: #fff; margin: .3rem 0 0; }
.offer-price { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; color: #fff; margin: .1rem 0 0; line-height: 1.05; }
.offer-price span { font-size: .95rem; font-weight: 600; color: rgba(255, 255, 255, .72); margin-left: .25rem; }
.offer-note { font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .82); margin: .4rem 0 0; max-width: 46ch; }

/* On a wide screen the logos and the price share a column beside the headline,
   so the hero stops running down the page and the right side is not empty. The
   column is taken out of flow rather than given a grid track, because a spanning
   grid item stretches the rows next to it and opens a gap under the heading. */
@media (min-width: 900px) {
  .pp-hero.is-offer .hero-inner.is-split { position: relative; padding-right: 26rem; }
  .hero-inner.is-split > .hero-side { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 23rem; }
  .hero-inner.is-split > .hero-side .hero-logos { margin: 0 0 1.1rem; gap: 1.1rem; }
  .hero-inner.is-split > .hero-side .offer-card { width: 100%; margin: 0; padding: 1.6rem 1.7rem; display: block;
    background: linear-gradient(160deg, rgba(37, 99, 235, .32), rgba(255, 255, 255, .05));
    box-shadow: 0 22px 55px rgba(3, 8, 20, .5); }
  .hero-inner.is-split .offer-price { font-size: 3rem; }
  .hero-inner.is-split .offer-plan { font-size: 1.25rem; }
  .hero-inner.is-split .offer-note { max-width: none; }
  .pp-hero.is-offer .hero-title { max-width: 20ch; }
  .pp-hero.is-offer { padding-top: 3rem; padding-bottom: 3.25rem; }
}
@media (max-width: 899px) {
  /* the side column dissolves so the phone keeps logos, headline, price, buttons */
  .hero-inner.is-split { display: flex; flex-direction: column; }
  .hero-inner.is-split > .hero-side { display: contents; }
  .hero-inner.is-split > .hero-side > .hero-logos { order: -3; }
  .hero-inner.is-split > .hero-eyebrow { order: -2; }
  .hero-inner.is-split > .hero-title { order: -1; }
  .hero-inner.is-split > .hero-lead { order: 0; }
  .hero-inner.is-split > .hero-side > .offer-card { order: 1; }
  .hero-inner.is-split > .hero-cta { order: 2; }
  .hero-inner.is-split > .hero-meta { order: 3; }
}

.find-grid.is-three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.find-text { font-size: .92rem; color: var(--muted); margin: 0; }

.svc-list { display: grid; gap: .75rem; margin-top: 1.6rem; }
.svc-row { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.svc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.svc-head h3 { margin: 0; }
/* a price can be a sentence ("billed separately at actual cost"), and nowrap on
   a sentence is what pushed the page wider than the screen */
.svc-price { font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--ink);
  white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.svc-price.is-free { color: var(--good-ink); }
.svc-text { font-size: .94rem; color: var(--muted); margin: .5rem 0 0; }
.svc-row .tick { margin: .7rem 0 0; }

.step-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .9rem;
  list-style: none; padding: 0; margin: 1.8rem 0 0; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 1.15rem 1.3rem 1.2rem; display: grid; gap: .3rem; overflow: hidden; }
.step::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(37, 99, 235, .15)); }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent);
  font-family: var(--f-display); font-size: .8rem; font-weight: 700; line-height: 1; }
.step strong { font-family: var(--f-display); font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; }
.step span:not(.step-n) { font-size: .89rem; line-height: 1.55; color: var(--muted); }

.prev-card.is-accent { border-color: var(--accent); background: var(--accent-soft); }
.ba-table th { font-weight: 600; }
.ba-before { color: var(--muted); }
.ba-after { color: var(--ink); font-weight: 600; }
.ba-arrow { color: var(--accent); width: 2rem; text-align: center; }

.offer-main { position: relative; background: #fff; border: 2px solid var(--accent); border-radius: var(--radius-lg);
  padding: 1.9rem 2.1rem; box-shadow: 0 20px 44px rgba(37, 99, 235, .10); margin-top: 1.7rem; }
.offer-main-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-bottom: 1.15rem; border-bottom: 1px solid var(--line-soft); }
.offer-main .price-flag { position: static; display: inline-block; margin: 0 0 .6rem; }
.offer-main-head h3 { font-size: 1.55rem; margin: 0; letter-spacing: -.02em; }
.offer-main .price-tag { margin: .25rem 0 0; font-size: .95rem; }
.offer-main .price-amount { margin: 0; font-size: clamp(2.2rem, 3.4vw, 2.9rem); letter-spacing: -.03em; }
.offer-main .price-amount span { font-size: 1rem; }
.offer-main .price-for { margin: 1.1rem 0 0; font-size: .94rem; color: var(--text); }
.offer-main .tick.two-col { display: block; columns: 2; column-gap: 2.6rem; margin: 1.15rem 0 1.6rem; }
.offer-main .tick.two-col li { break-inside: avoid; margin-bottom: .45rem; }
.payback { font-size: .95rem; line-height: 1.6; color: var(--ink); background: var(--accent-soft);
  border-radius: 14px; padding: .95rem 1.25rem; margin: 1.1rem 0 0; }

.alt-plans { margin-top: 1.9rem; }
.alt-title { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .75rem; }
.alt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .9rem; }
.alt-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.3rem;
  transition: border-color .15s ease, box-shadow .15s ease; }
.alt-card:hover { border-color: rgba(37, 99, 235, .35); box-shadow: var(--shadow-sm); }
.alt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.alt-card h4 { font-family: var(--f-display); margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.alt-price { font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); margin: 0; letter-spacing: -.02em; }
.alt-price span { font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: .15rem; }
.alt-tag { font-size: .84rem; color: var(--accent); font-weight: 600; margin: .35rem 0 0; }
.alt-for { font-size: .88rem; line-height: 1.55; color: var(--muted); margin: .45rem 0 0; }
.alt-cta { margin-top: .9rem; width: 100%; padding: .6rem 1rem; font-size: .86rem;
  border-color: var(--line); color: var(--ink); background: #fff; }
.alt-cta:hover { border-color: var(--accent); color: var(--accent); }

/* year -> month -> week, so a picker still works at fifty-two weeks a year */
/* the sticky section menu would otherwise cover whatever we just jumped to */
.pp-section[id] { scroll-margin-top: 4.5rem; }
.period-nav { scroll-margin-top: 9rem;   /* clears the sticky section menu, measured at 133px */
  display: grid; gap: .55rem; margin: 1.2rem 0 1.5rem; padding: .95rem 1.1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.period-row { display: grid; grid-template-columns: 5.5rem 1fr; align-items: start; gap: .75rem; }
.period-row-label { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-top: .45rem; }
.period-chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.period-nav .period-tab { display: inline-flex; align-items: center; padding: .38rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .84rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.period-nav .period-tab:hover { border-color: var(--accent); color: var(--accent); }
.period-nav .period-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 720px) {
  .period-nav { padding: .8rem .85rem; }
  .period-row { grid-template-columns: 1fr; gap: .3rem; }
  .period-row-label { padding-top: 0; }
  .period-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
}


/* ---- proposal: outcomes before implementation -------------------------- */
.fee-note { background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 1rem 1.25rem; margin: 1.4rem 0 0; font-size: .95rem;
  line-height: 1.65; color: var(--ink); }

/* shaped like the invoice, so there is nothing left to work out */
.invoice { margin: 1.4rem 0 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.invoice-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line-soft); }
.invoice-row:last-child { border-bottom: 0; }
.invoice-label { font-size: .98rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.invoice-label span { display: block; margin-top: .3rem; font-size: .86rem; font-weight: 400;
  line-height: 1.55; color: var(--muted); }
.invoice-value { font-family: var(--f-display); font-size: 1.35rem; font-weight: 800; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.invoice-row.is-total { background: var(--accent-soft); border-top: 2px solid var(--accent); }
.invoice-row.is-total .invoice-value { color: var(--accent); font-size: 1.55rem; }
@media (max-width: 560px) {
  .invoice-row { flex-direction: column; gap: .4rem; padding: 1rem 1.1rem; }
  .invoice-value { font-size: 1.45rem; }
}

.plan-chain { margin: 1.2rem 0 0; padding: .95rem 1.2rem; border-radius: 12px;
  background: var(--bg-soft); border: 1px dashed var(--line);
  font-size: .95rem; line-height: 1.7; font-weight: 600; color: var(--ink); }

.worked-example { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.7rem; margin-top: 1.6rem; box-shadow: var(--shadow-sm); }
.worked-example h3 { font-family: var(--f-display); font-size: 1.15rem; margin: 0 0 1.1rem;
  letter-spacing: -.01em; }
.ex-lines { display: grid; gap: .95rem; margin: 0; }
.ex-line dt { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .25rem; }
.ex-line dd { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--ink); }

/* two columns, so four cards read as two tidy rows rather than three-plus-one */
.outcome-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; margin-top: 1.6rem; align-items: stretch; }
@media (max-width: 900px) { .outcome-grid { grid-template-columns: 1fr; } }
.outcome-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease; }
.outcome-card:hover { border-color: rgba(37, 99, 235, .35); box-shadow: var(--shadow); }
.outcome-card h3 { font-family: var(--f-display); font-size: 1.1rem; margin: 0 0 .7rem;
  letter-spacing: -.01em; line-height: 1.3; }
/* the benefit is the message; the method is the footnote */
.outcome-benefit { font-size: 1rem; line-height: 1.65; color: var(--ink); margin: 0; font-weight: 500; }
.outcome-how { font-size: .89rem; line-height: 1.6; color: var(--muted); margin: .9rem 0 0;
  padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.outcome-how-label { font-weight: 700; color: var(--ink); }
.outcome-flag { display: inline-block; margin: .9rem 0 0; font-size: .8rem; font-weight: 600;
  color: #b45309; background: #fef3c7; border-radius: 999px; padding: .3rem .75rem; line-height: 1.4; }

.measure-callout { background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 1.7rem 1.9rem; margin-top: 1.6rem; }
.measure-callout h3 { font-family: var(--f-display); font-size: 1.2rem; margin: 0 0 .9rem;
  color: #fff; letter-spacing: -.01em; }
.measure-callout p { font-size: .96rem; line-height: 1.7; margin: 0 0 .8rem;
  color: rgba(255, 255, 255, .88); }
.measure-callout p:last-child { margin-bottom: 0; }
.measure-callout-note { font-size: .87rem !important; color: rgba(255, 255, 255, .66) !important;
  padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .16); }

.includes { margin-top: 1.6rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); }
.includes > summary { list-style: none; cursor: pointer; padding: 1.05rem 1.4rem;
  font-weight: 700; font-size: .95rem; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.includes > summary::-webkit-details-marker { display: none; }
.includes > summary::after { content: '\002B'; margin-left: auto; font-size: 1.15em; color: var(--accent); }
.includes[open] > summary::after { content: '\2212'; }
.includes > summary:hover { color: var(--accent); }
.includes-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.4rem; padding: 0 1.4rem 1.5rem; }
.includes-group h4 { font-size: .82rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.includes-group .tick { margin: 0; }
.includes-group .tick li { font-size: .89rem; line-height: 1.55; }

@media (max-width: 720px) {
  .outcome-grid, .includes-body { grid-template-columns: 1fr; }
  .outcome-card { padding: 1.2rem 1.15rem; }
  .worked-example, .measure-callout { padding: 1.25rem 1.2rem; }
}

/* ---- where buyers are looking ----------------------------------------- */
#buyers .sec-lead { max-width: 62ch; margin-bottom: 1.4rem; }
#buyers .takeaway { margin-bottom: 1.1rem; }
.buyer-need strong { display: block; font-size: .95rem; color: var(--ink); line-height: 1.35; }
.buyer-sub { display: block; font-size: .84rem; line-height: 1.45; color: var(--muted); margin-top: .2rem; }
.buyer-example { font-style: italic; }
/* The columns are proportioned by what they carry, not by how long their
   headings are: the buyer situation and the example question get the room, the
   three counts need only their digits. */
.buyer-table table { table-layout: fixed; min-width: 0; }
.buyer-table .col-need { width: 25%; }
.buyer-table .col-example { width: 29%; }
.buyer-table .col-num { width: 11%; }
.buyer-table .col-link { width: 13%; }
.buyer-table thead th { white-space: normal; line-height: 1.3; vertical-align: bottom; }
.buyer-table td { vertical-align: top; }
.data-table td.buyer-need { min-width: 0; white-space: normal; }
.data-table td.buyer-example { min-width: 0; max-width: none; white-space: normal;
  font-size: .88rem; line-height: 1.5; }
.data-table td.is-missed { font-weight: 700; color: #b45309; }
.data-table td.is-zero, .buyer-figures dd.is-zero { color: #b91c1c; font-weight: 700; }
/* "View questions" is the one link that moves a reader from a summary row to
   the evidence behind it, and it was a 24px target on a phone. */
.q-jump { display: inline-block; font-size: .84rem; font-weight: 700; color: var(--accent);
  padding: .45rem 0; text-decoration: none; border-bottom: 1px solid rgba(37, 99, 235, .35); }
.q-jump:hover { border-bottom-color: var(--accent); }

/* six columns cannot be read on a phone, so the same rows become cards */
.buyer-cards { display: none; }
.buyer-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.1rem 1.15rem; box-shadow: var(--shadow-sm); min-width: 0; }
.buyer-card h4 { font-family: var(--f-display); font-size: 1.02rem; margin: 0; letter-spacing: -.01em; }
.buyer-card .buyer-sub { margin-top: .35rem; }
.buyer-card .buyer-example { font-size: .88rem; line-height: 1.5; color: var(--ink); margin: .7rem 0 0;
  padding-left: .7rem; border-left: 2px solid var(--line); }
/* 1fr is really minmax(auto, 1fr), so a long label such as "Opportunities"
   sets a floor the track cannot go under: the three columns came out 70/78/97
   instead of equal, pushed the card 22px past its container and made the whole
   page scroll sideways at 320px. minmax(0, 1fr) lets the tracks shrink, and the
   labels wrap instead. */
.buyer-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  margin: .9rem 0 .9rem; font-variant-numeric: tabular-nums; }
.buyer-figures dt, .buyer-figures dd { min-width: 0; overflow-wrap: anywhere; }
.buyer-figures dt { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); line-height: 1.3; }
.buyer-figures dd { margin: .2rem 0 0; font-family: var(--f-display); font-size: 1.4rem; font-weight: 800; color: var(--ink); }
/* Below this the six columns stop being comfortable long before they stop
   fitting, so the cards take over while there is still room to spare. */
@media (max-width: 960px) {
  .buyer-table { display: none; }
  .buyer-cards { display: grid; gap: .85rem; }
}

/* Fixed proportions, or the browser hands the long URL the narrowest column and
   breaks it over ten lines. The link needs the room; the other two do not. */
/* On a phone the guide opens as one line: where you are, and a tap for the
   rest. The three cards duplicate the menu directly above them, and together
   they pushed the first sentence most of a screen down. */
.guide-peek { display: none; }
@media (max-width: 720px) {
  /* On a phone the top strip should offer the three pages and nothing else.
     "Save as PDF" is a desktop habit, and signing out belongs at the end of the
     visit, not before the first sentence of it. */
  .pp-nav .nav-cta .btn-print, .pp-nav .nav-cta .nav-logout { display: none; }
  /* the client knows whose portal this is; on a phone the logo only costs a row */
  .pp-nav .nav-brand { display: none; }
  /* The logo pair costs 70px of a phone screen and repeats what the line
     directly under it already says in words: "Prepared exclusively for …".
     The login page keeps its client logo — there it is the only branding. */
  .pp-hero .hero-logos { display: none; }
  /* the three page links were wrapping onto two rows, which is most of why the
     strip was 149px tall; one scrollable row keeps them all reachable */
  .pp-nav .nav-links { flex-wrap: nowrap; overflow-x: auto; gap: .35rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pp-nav .nav-links::-webkit-scrollbar { display: none; }
  /* each link was being stretched to 173px; sized to its own text all three fit */
  .pp-nav .nav-links a { white-space: nowrap; font-size: .84rem; padding: .4rem .6rem;
    flex: 0 0 auto; width: auto; min-width: 0; text-align: center; }
  .pp-nav .nav-cta { gap: .5rem; }
  /* The one control a phone user taps to find their way around was 22px tall.
     Padding, not a bigger font, so the strip still reads as one quiet line. */
  .guide-peek { display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: .75rem; background: none; border: 0; padding: .7rem 0; min-height: 44px; cursor: pointer;
    font-family: inherit; text-align: left; }
  /* This strip sits on the dark navy guide, not on white. --ink is #0b1220 and
     the background is #0e1729, so the page name was black on near-black at a
     contrast of 1.05 - invisible on every mobile page. The accent blue on the
     same ground only reached 3.46, below the 4.5 small text needs. */
  .guide-peek-label { font-size: .68rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #93c5fd;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* A flex item shrinks below its content by default, which clipped the last
     letters of the page name at 320px. The name must never be cut; the label
     beside it may ellipsis instead. */
  .guide-peek-here { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem;
    font-weight: 700; color: #f1f5f9; flex: 0 0 auto; white-space: nowrap; }
  .guide-peek-here::after { content: '\203A'; transform: rotate(90deg); color: var(--accent);
    font-size: 1.1em; line-height: 1; }
  .pp-guide[data-open="1"] .guide-peek-here::after { transform: rotate(-90deg); }
  /* everything else waits until it is asked for */
  .pp-guide:not([data-open="1"]) .guide-head,
  .pp-guide:not([data-open="1"]) .guide-grid,
  .pp-guide:not([data-open="1"]) .guide-foot,
  .pp-guide:not([data-open="1"]) .guide-close { display: none; }
  .pp-guide .guide-inner { padding-top: .8rem; padding-bottom: .8rem; }
}

.pl-filter { display: grid; gap: .5rem; margin: 0 0 .9rem; }
.pl-filter .period-tab { cursor: pointer; font-family: inherit; }
.pl-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0 0; }
.pl-more { border-color: var(--line); color: var(--ink); background: #fff; padding: .55rem 1.2rem; font-size: .88rem; }
.pl-more:hover { border-color: var(--accent); color: var(--accent); }
.pl-download { padding: .55rem 1.2rem; font-size: .88rem; }
.pl-none { margin-top: 1rem; }
.pl-table table { table-layout: fixed; min-width: 46rem; }
.pl-table .col-pl-url { width: 52%; }
.pl-table .col-pl-anchor { width: 28%; }
.pl-table .col-pl-target { width: 20%; }
/* The general rule "numbers never wrap" is written as
   .data-table td:not(:first-child):not(.muted), which outranks a plain class.
   These three need the same weight to win, or the anchor text and the
   destination path push the table sideways. */
.pl-table .data-table td.pl-url { white-space: normal; overflow-wrap: anywhere; font-size: .88rem; min-width: 0; }
.pl-table .data-table td.pl-url a { color: var(--accent); text-decoration: none; }
.pl-table .data-table td.pl-url a:hover { text-decoration: underline; }
.pl-table .data-table td.pl-anchor { white-space: normal; overflow-wrap: anywhere; color: var(--ink); font-weight: 600; }
.pl-table .data-table td.pl-target { white-space: normal; overflow-wrap: anywhere; font-size: .86rem; color: var(--muted); }
/* On a phone the three columns only fit by making the reader swipe sideways.
   The destination is the least useful of the three, so it steps out and the
   link and its anchor keep the full width. */
@media (max-width: 640px) {
  .pl-table table { min-width: 0; }
  .pl-table .col-pl-url { width: 62%; }
  .pl-table .col-pl-anchor { width: 38%; }
  .pl-table .col-pl-target,
  .pl-table thead th:nth-child(3),
  .pl-table .data-table td.pl-target { display: none; }
}

.trend-up { color: var(--good-ink); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.trend-down { color: #b91c1c; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.trend-flat { color: var(--muted); font-weight: 600; font-size: .82rem; white-space: nowrap; }
.data-table tr.is-current > td { background: rgba(37, 99, 235, .06); }
.data-table td.is-warn { color: #b45309; font-weight: 600; }

.measure-list { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 1.4rem 0 0; }
.measure-list li { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: .8rem 1.1rem; font-size: .95rem; }
@media (max-width: 720px) {
  .offer-main .tick.two-col { columns: 1; }
  .offer-main-head { gap: .6rem; }
}

.win-none { color: var(--good-ink); font-weight: 600; }
.win-unknown { color: var(--muted); font-style: italic; }

/* ---- scorecard: read-it-in-ten-seconds layer --------------------------- */
.kpi-read { position: relative; }
.kpi-read .kpi-value { font-size: clamp(1.35rem, 15cqi, 2.35rem); }
.kpi-verdict { display: block; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line-soft);
  font-size: .82rem; font-weight: 600; color: var(--muted); }
.kpi-read.is-good .kpi-verdict { color: #047857; }
.kpi-read.is-warn .kpi-verdict { color: #b45309; }
.kpi-read.is-bad .kpi-verdict { color: #b91c1c; }

.takeaway { display: grid; gap: .3rem; margin: 1.6rem 0 0; padding: 1.15rem 1.4rem;
  background: var(--ink); color: #fff; border-radius: var(--radius); }
.takeaway-label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #93c5fd; }
.takeaway p { margin: 0; font-size: 1.02rem; line-height: 1.55; max-width: 82ch; }

.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; margin-top: 2rem; }
.chart-cell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.chart-cell .chart-note { text-align: left; margin: .9rem 0 0; }

.chart-stack { margin: 0; }
.stack-bar { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); }
.stack-seg { display: block; height: 100%; }
.stack-key { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .35rem; font-size: .9rem; color: var(--muted); }
.stack-key li { display: flex; align-items: baseline; gap: .5rem; }
.stack-key strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.stack-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.prio { font-size: .74rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: .2rem .6rem; white-space: nowrap; }
.prio.is-high { background: #fee2e2; color: #7f1d1d; }
.prio.is-medium { background: #fef3c7; color: #78350f; }
.prio.is-low { background: var(--bg-soft); color: var(--muted); }

.q-facts { margin: .8rem 0 0; display: grid; gap: .45rem; }
.q-facts > div { display: grid; grid-template-columns: 13rem 1fr; gap: .8rem; align-items: baseline; }
.q-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.q-facts dd { margin: 0; font-size: .92rem; }
.q-badge.is-top3 { background: #dcfce7; color: #14532d; }
.q-badge.is-named { background: #fef3c7; color: #78350f; }
.q-badge.is-missing { background: #fee2e2; color: #7f1d1d; }
.q-chip.is-priority { border-color: var(--accent); color: var(--accent); }
/* The count badge inside this chip is white on white-18%-over-accent, which
   came out 3.76:1 at 12.5px. A darker blue for the active state fixes the badge
   and the label together without changing the accent anywhere else. */
.q-chip.is-priority.is-active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

.method { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: .3rem 1.2rem; }
.method summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--muted); padding: .8rem 0; list-style: none; }
.method summary::-webkit-details-marker { display: none; }
.method summary::before { content: '+'; color: var(--accent); margin-right: .45rem; }
.method[open] summary::before { content: '–'; }
.method p { font-size: .88rem; color: var(--muted); margin: 0 0 1rem; }
@media (max-width: 720px) {
  .q-facts > div { grid-template-columns: 1fr; gap: .15rem; }
  .takeaway { padding: 1rem 1.1rem; }
}

/* ---- start-here guide --------------------------------------------------- */
[hidden] { display: none !important; }
.pp-guide { background: #0e1729; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #e2e8f0; }
.guide-inner { position: relative; padding: .65rem 0 .7rem; }
.guide-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding-right: 2.4rem; }
.guide-eyebrow { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #0e1729; background: #93c5fd; border-radius: 999px; padding: .18rem .55rem; margin: 0; white-space: nowrap; }
.guide-lead { font-size: .84rem; line-height: 1.4; color: rgba(226, 232, 240, .8); margin: 0; max-width: 92ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .6rem 0 .5rem; }
.guide-card { display: grid; gap: .1rem; text-decoration: none; border-radius: 11px; padding: .55rem .8rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  transition: background .15s ease, border-color .15s ease; }
.guide-card:hover { background: rgba(255, 255, 255, .11); border-color: rgba(147, 197, 253, .5); }
.guide-card.is-active { background: rgba(37, 99, 235, .22); border-color: var(--accent); }
.guide-card-title { font-family: var(--f-display); font-weight: 700; font-size: .9rem; color: #fff;
  display: flex; align-items: baseline; gap: .35rem; }
.guide-card-title em { font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #93c5fd; }
.guide-card-text { font-size: .78rem; line-height: 1.35; color: rgba(226, 232, 240, .68); }
.guide-foot { font-size: .76rem; color: rgba(226, 232, 240, .55); margin: 0; }
.guide-close { position: absolute; top: .45rem; right: 0; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #e2e8f0;
  font-size: 1.1rem; line-height: 1; cursor: pointer; }
.guide-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.nav-guide { white-space: nowrap; }
@media (max-width: 860px) {
  /* the bar must stay a signpost on a phone, so the copy is clamped rather than dropped */
  .guide-inner { padding: .65rem 0 .7rem; }
  .guide-grid { grid-template-columns: 1fr; gap: .35rem; margin: .5rem 0 .4rem; }
  .guide-card { padding: .45rem .7rem; }
  .guide-card-title { font-size: .86rem; }
  .guide-lead { font-size: .8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .guide-card-text { font-size: .75rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .guide-foot { font-size: .72rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* the header link is the only way back once it is closed, so it stays on mobile */
  .nav-guide { font-size: .74rem; order: 2; }
}
@media (max-width: 560px) {
  /* on a phone the three names are the signpost; the descriptions wait for desktop */
  .guide-card-text { display: none; }
  .guide-card { padding: .5rem .8rem; }
  .guide-lead { -webkit-line-clamp: 2; }
}
@media print { .pp-guide, .nav-guide { display: none !important; } }

/* ---- mobile ergonomics -------------------------------------------------- */
@media (max-width: 900px) {
  /* nothing tappable smaller than a finger */
  .nav-logout .btn-link, .nav-guide { min-height: 40px; display: inline-flex; align-items: center; }
  .footer-contact a { min-height: 40px; display: inline-flex; align-items: center; }
  .guide-close { width: 38px; height: 38px; top: .3rem; font-size: 1.3rem; }
  .q-group select { min-height: 40px; }
  .period-picker select { min-height: 40px; }
  .prev-card, .alt-card, .svc-row, .q-item { -webkit-tap-highlight-color: rgba(37, 99, 235, .12); }
  /* micro-labels stay legible instead of shrinking with the layout */
  .guide-eyebrow, .offer-flag, .jump-label, .prev-kind, .find-label, .kpi-label { font-size: .7rem; }
  .q-facts dt { font-size: .72rem; }
}

/* ---- a second, variable budget alongside the fixed fee ------------------ */
.offer-extra { background: #fff; border: 1px dashed var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-top: 1rem; }
.offer-extra-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.offer-extra-flag { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #b45309; background: #fef3c7; border-radius: 999px; padding: .2rem .6rem; }
.offer-extra-head h3 { font-size: 1.2rem; margin: .4rem 0 0; }
.offer-extra .price-amount { margin: 0; font-size: 2rem; color: var(--ink); }
.offer-extra-text { font-size: .94rem; line-height: 1.6; color: var(--muted); margin: .9rem 0 0; }
.offer-total { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-top: 1rem; padding: 1rem 1.3rem; border-radius: var(--radius); background: var(--ink); color: #fff; }
.offer-total-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #93c5fd; }
.offer-total-value { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.offer-total-value em { font-style: normal; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.7); margin-left: .2rem; }
.offer-total-note { font-size: .85rem; color: rgba(255,255,255,.75); flex: 1 1 100%; }
.invest-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .9rem; margin-top: 1.2rem; }
.invest-note { background: var(--bg-soft); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.invest-note h4 { font-family: var(--f-display); font-size: 1rem; margin: 0 0 .4rem; }
.invest-note p { font-size: .9rem; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 720px) {
  .offer-extra-head { gap: .5rem; }
  .offer-total { padding: .9rem 1.1rem; }
}

/* ---- Google Ads report --------------------------------------------------- */
.sec-head.has-gap { margin-top: 3rem; }
.ads-status { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .18rem .55rem; white-space: nowrap; }
.ads-status.is-on { background: #dcfce7; color: #14532d; }
.ads-status.is-off { background: var(--bg-soft); color: var(--muted); }
.ads-download { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 1.6rem 0 0; font-size: .88rem; }
.ads-sub { font-family: var(--f-display); font-size: 1.05rem; margin: 2rem 0 .2rem; }
.data-table tr.is-win td:first-child { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) { .ads-download .btn { width: 100%; justify-content: center; } }

/* ---- sortable table headers -------------------------------------------- */
.data-table th.is-sortable { cursor: pointer; user-select: none; padding-right: 1.5rem; position: relative; }
.data-table th.is-sortable:hover { color: var(--ink); }
.data-table th.is-sortable::after { content: '\2195'; position: absolute; right: .5rem; opacity: .35; font-size: .85em; }
.data-table th.is-sortable.is-desc::after { content: '\2193'; opacity: 1; color: var(--accent); }
.data-table th.is-sortable.is-asc::after { content: '\2191'; opacity: 1; color: var(--accent); }
.data-table th.is-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* sources an answer leaned on, kept apart from the companies it recommended */
.q-sources { display: flex; flex-wrap: wrap; gap: .35rem; }
.q-sources span { font-size: .8rem; color: var(--muted); background: var(--bg-soft);
  border-radius: 6px; padding: .12rem .45rem; }

/* ---- programme status on the tracker ------------------------------------ */
.program-status { display: grid; gap: .25rem; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--muted); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.program-status.is-progress { border-left-color: var(--accent); }
.program-status.is-done { border-left-color: var(--good); }
.program-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.program-status strong { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); }
.program-note { font-size: .92rem; color: var(--muted); }
.program-steps { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .8rem; counter-reset: pstep; }
.program-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.program-step-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.program-step-head strong { font-family: var(--f-display); font-size: 1.02rem; color: var(--ink); }
.program-step p { font-size: .92rem; color: var(--muted); margin: .45rem 0 0; }
.program-badge { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; white-space: nowrap;
  background: var(--bg-soft); color: var(--muted); }
.program-badge.is-progress { background: var(--accent-soft); color: var(--accent); }
.program-badge.is-done { background: #dcfce7; color: #14532d; }
/* Blocked on the client reads differently from not-yet-started, and
   not-applicable should recede rather than look like an omission. */
.program-badge.is-waiting { background: #fef3c7; color: #78350f; }
.program-badge.is-na { background: var(--bg-soft); color: var(--muted); opacity: .75; }
.program-status.is-waiting { border-left-color: var(--warn); }
.program-step.is-na { opacity: .72; }

/* Links inside data tables were 18px tall - fine with a mouse, awkward with a
   thumb. The padding sits inside the cell's own padding, so no row grows. */
.data-table td a, .data-table th a { display: inline-block; padding: .3rem 0; }
/* Footer sign-out was a 16px target. */
.footer-logout .btn-link { display: inline-block; padding: .45rem 0; }

/* What applies to most of the providers, said once rather than per row. */
.comp-shared { margin-top: .9rem; display: grid; gap: .5rem; }
.comp-shared-lead { font-weight: 700; color: var(--ink) !important; background: none !important; padding: 0 !important; }
.comp-shared p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--muted);
  background: var(--bg-soft); border-radius: var(--radius); padding: .8rem 1rem; }

/* ---- the honesty disclosure ------------------------------------------- */
.pp-section.is-tight { padding-top: 0; }
.method-callout { margin: 0; background: #fff7ed; border: 1px solid #fed7aa;
  border-left: 3px solid var(--warn); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-size: .92rem; line-height: 1.65; color: #7c2d12; }
.method-note { font-weight: 600; }

/* ---- the tags under a question --------------------------------------- */
.q-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem;
  padding-top: .8rem; border-top: 1px solid var(--line); }
.q-tag { font-size: .72rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px;
  padding: .22rem .6rem; background: var(--bg-soft); color: #475569; }
.q-tag.is-market { background: #eef2ff; color: #3730a3; }
/* Measured and estimated must not look alike at a glance. */
.q-tag.is-live { background: #dcfce7; color: #14532d; }
.q-tag.is-estimate { background: #fef3c7; color: #78350f; }

/* ---- the $0 website offer, the payback inputs, the fee note ------------- */
.site-offer { background: var(--ink); color: #fff; border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem; margin-bottom: 1.4rem; }
.site-offer-head { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .6rem; }
.site-offer-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #93c5fd; }
/* The price wraps rather than scrolling on a 320px screen. */
.site-offer-price { margin: 0; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.6rem, 8vw, 2.1rem); line-height: 1; }
.site-offer-price span { font-size: .5em; font-weight: 600; opacity: .75; margin-left: .35rem; }
.site-offer-note { margin: .8rem 0 0; font-size: .92rem; line-height: 1.6; color: #cbd5e1; }
.breakeven-inputs { margin: .8rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem;
  font-size: .89rem; color: var(--muted); }
.fee-note { margin-top: 1.6rem; background: var(--bg-soft); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.fee-note h3 { margin: 0 0 .5rem; font-family: var(--f-display); font-size: 1.02rem; color: var(--ink); }
.fee-note p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--muted); }

/* A workbook filename has no spaces to break at, so it ran past the screen
   edge on the methodology note and on one ads page. */
code { overflow-wrap: anywhere; word-break: break-word; }

/* ---- three optional proposal blocks ------------------------------------ */
.find-conclusion { margin: 1.4rem 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink);
  background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 1rem 1.2rem; }
.price-why, .alt-why { margin: 1rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: .9rem; }
.breakeven { margin: 1.5rem 0 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.35rem; }
.breakeven-title { margin: 0 0 .5rem; font-family: var(--f-display); font-size: 1rem; color: var(--ink); }
/* The sum has to survive a 320px screen, so it wraps instead of scrolling. */
.breakeven-sum { margin: 0; font-weight: 600; color: var(--accent); line-height: 1.55;
  font-size: clamp(.92rem, 3.4vw, 1.05rem); overflow-wrap: anywhere; }
.breakeven-note { margin: .7rem 0 0; font-size: .88rem; color: var(--muted); }

/* ---- nothing may be wider than the screen ------------------------------- */
/* Grid and flex children default to min-width:auto, so one long word inside a
   card pushes the whole page wider than the viewport. */
.svc-list, .svc-row, .svc-head, .svc-text, .svc-row .tick, .svc-row .tick li,
.step-strip, .step, .offer-main, .offer-extra, .alt-grid, .alt-card,
.invest-notes, .invest-note, .find-grid, .find-card, .prev-grid, .prev-card,
.program-steps, .program-step, .kpi-row, .kpi, .q-list, .q-item, .q-facts, .q-facts > div {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.svc-row, .svc-text, .svc-row .tick li, .q-text, .q-note, .q-action,
.program-step p, .invest-note p, .offer-extra-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.svc-head { flex-wrap: wrap; }

/* a long group name must not make the select wider than its column.
   max-width alone is not enough: a flex item's min-width defaults to auto, so
   the select refuses to shrink below its longest option and pushes the page
   sideways on a 320px screen. */
.q-group select, .period-picker select { max-width: 100%; min-width: 0; flex: 1 1 auto;
  text-overflow: ellipsis; }
.q-group { max-width: 100%; min-width: 0; flex: 1 1 12rem; }
/* two dropdowns now: only the first is pushed to the right */
.q-group + .q-group { margin-left: 0; }

/* ---- period buttons: the filter has to be seen, not found --------------- */
.hero-hint { font-size: .9rem; color: rgba(255, 255, 255, .68); margin: .6rem 0 0; }
.period-tabs { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .9rem; margin: 0 0 1.5rem; }
.period-tabs-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.period-tabs-list { display: flex; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.period-tab { font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .9rem; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.period-tab:hover { border-color: var(--accent); color: var(--accent); }
.period-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 720px) {
  .period-tabs { gap: .55rem; padding: .65rem .8rem; }
  .period-tabs-label { flex: 1 1 100%; }
  .period-tab { font-size: .82rem; padding: .42rem .75rem; }
}

/* ---- what a plan does not cover, and why the pricier one earns it ------- */
.not-included { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.not-included-title { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .5rem; }
ul.cross { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
ul.cross li { position: relative; padding-left: 1.5rem; font-size: .9rem; color: var(--muted); }
ul.cross li::before { content: '\00d7'; position: absolute; left: .25rem; top: -.05em;
  color: #b91c1c; font-weight: 700; font-size: 1.05em; }
.compare { background: var(--bg-soft); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-top: 1.4rem; }
.compare h3 { font-family: var(--f-display); font-size: 1.05rem; margin: 0 0 .5rem; }
.compare p { font-size: .94rem; line-height: 1.65; color: var(--text); margin: 0; }
.compare .tick { margin-top: .8rem; }
.payback-inputs { margin-top: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; }
.payback-inputs-title { font-size: .88rem; font-weight: 600; color: var(--ink); margin: 0 0 .5rem; }
.payback-inputs ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--muted); display: grid; gap: .3rem; }