/* 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; }
/* is-tight: the thinnest possible offer hero — the message, nothing else */
.pp-hero.is-offer.is-tight { padding-top: 1.5rem; padding-bottom: 1.9rem; }
.pp-hero.is-offer.is-tight .hero-eyebrow,
.pp-hero.is-offer.is-tight .hero-meta { display: none; }
.pp-hero.is-offer.is-tight .hero-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 30ch; margin: 0 0 .6rem; }
.pp-hero.is-offer.is-tight .hero-lead { font-size: 1rem; }
.pp-hero.is-offer.is-tight .hero-cta { margin-top: 1.1rem; }
.pp-hero.is-offer.is-tight .hero-inner.is-split > .hero-side .offer-card { padding: 1.1rem 1.25rem; }
.pp-hero.is-offer.is-tight .fact-rows li { padding: .38rem 0; font-size: .88rem; }
.pp-hero.is-offer.is-tight .fact-rows li strong { font-size: .98rem; }
.pp-hero.is-offer.is-tight .hero-inner.is-split > .hero-side .hero-logos { display: none; }

/* hero fact card: who is taking the customers today */
.fact-rows { list-style: none; margin: .5rem 0 0; padding: 0; }
.fact-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .92rem; }
.fact-rows li:last-child { border-bottom: 0; }
.fact-rows li strong { font-family: var(--f-display); font-size: 1.05rem; white-space: nowrap; }
.fact-rows li.is-you { color: #fca5a5; }
.fact-rows li.is-you strong { color: #fca5a5; }

/* price breakdown: my fee and the ad budget are two different pockets */
.pay-plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.35rem 1.35rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.pay-plan.is-pick { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); }
.pay-plan-name { font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; color: var(--ink);
  margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pay-flag { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--accent); color: #fff; border-radius: 999px; padding: .28rem .7rem; }
.pay-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pay-col { border-radius: 12px; padding: .95rem 1.05rem; min-width: 0; }
.pay-col.is-fee { background: var(--accent-soft); border: 1px solid #dbeafe; }
.pay-col.is-budget { background: var(--bg-soft); border: 1px dashed var(--line); }
.pay-col-k { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.pay-col.is-fee .pay-col-k { color: var(--accent); }
.pay-col-v { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem;
  color: var(--ink); line-height: 1.15; }
.pay-col-note { display: block; font-size: .85rem; color: var(--muted); margin-top: .45rem; line-height: 1.55; }
.pay-plan-note { margin: .85rem .1rem 0; font-size: .89rem; color: var(--text); line-height: 1.6; }
.pay-cta { margin-top: .95rem; }
@media (max-width: 640px) { .pay-cols { grid-template-columns: 1fr; } }

.find-card.is-link { display: block; color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.find-card.is-link:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.find-go { display: inline-block; margin-top: .8rem; font-size: .86rem; font-weight: 700;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 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-photo { 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; }
/* The signature is the real logo file, not a lookalike Google font. */
.why-sig-img { width: 150px; height: auto; display: block; margin: .8rem auto .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-badge.is-planned { background: #e2e8f0; color: #334155; }
.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 { flex: 1 1 auto; min-width: 0; display: flex; gap: .2rem; overflow-x: auto;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.jump-links.fade-l { --fade-l: 40px; }
.jump-links.fade-r { --fade-r: 56px; }
.jump-links::-webkit-scrollbar { display: none; }
.jump-links a { flex: 0 0 auto; font-size: .86rem; font-weight: 600; color: var(--text); text-decoration: none;
  white-space: nowrap; padding: .44rem .85rem; 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; }
  .pp-hero.is-offer.is-tight .hero-inner.is-split { padding-right: 24rem; }
  .pp-hero.is-offer.is-tight .hero-inner.is-split > .hero-side { width: 21.5rem; }
  .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: 1.1rem; margin: 0; }
.ex-line { padding-left: .9rem; border-left: 3px solid var(--accent); }
.ex-line dt { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .3rem; }
.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; }

.pp-section.ss-section { padding-top: 2.25rem; padding-bottom: 2.5rem; }
.ss-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 12px 32px rgba(11, 18, 32, .06); overflow: hidden; }
.ss-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.ss-stat { display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem 1.6rem; border-left: 1px solid var(--line); margin-left: -1px; }
.ss-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ss-stat > strong { font-size: 2rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-note { font-size: .85rem; line-height: 1.4; color: var(--muted); }
.ss-change { font-size: .8rem; font-weight: 600; }
.ss-card + .chart, .ss-card + figure, .ss-card + div { margin-top: 1.5rem; }
.ss-stat.is-good > strong { color: #047857; }
.ss-stat.is-warn > strong { color: #b45309; }
.ss-card.is-spaced { margin-top: 1.75rem; }
.ss-stat.is-link { text-decoration: none; color: inherit; transition: background .15s; }
.ss-stat.is-link:hover { background: #f8fafc; }
.ss-go { margin-top: auto; padding-top: .4rem; font-size: .82rem; font-weight: 600; color: var(--accent); }
.ss-note strong { color: var(--ink); font-weight: 600; }
.ss-stat.is-bad > strong { color: #b91c1c; }
.ss-take { display: grid; gap: .45rem; padding: 1.3rem 1.6rem 1.5rem; border-top: 1px solid var(--line); background: #fafbfc; }
.ss-take p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); max-width: 90ch; }
@media (max-width: 560px) {
  .ss-stats { grid-template-columns: 1fr 1fr; }
  .ss-stat { padding: 1rem 1.1rem; border-top: 1px solid var(--line); margin-top: -1px; }
  .ss-stat > strong { font-size: 1.3rem; }
  .ss-note { font-size: .8rem; }
  .ss-take { padding: 1.1rem 1.1rem 1.25rem; }
  .ss-card.is-wide .ss-stats { grid-template-columns: 1fr; }
  .ss-card.is-wide .ss-stat { border-left: 0; margin-left: 0; }
}

.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-badge.is-planned { background: #e2e8f0; color: #334155; }
.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; }
/* by-city month table: a rule above each city's first month */
.data-table tr.city-first:not(:first-child) > td { border-top: 2px solid var(--line); }
.data-table td.city-cell { vertical-align: top; }
.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; }

/* ---- one real question, above every table ------------------------------ */
/* The takeaway and this block sit one under the other. Same near-black on both
   read as a single slab, so this one is a shade lighter and carries an accent
   edge — it is the thing on the page a reader should stop at. */
.example-q { margin-top: 2rem; background: #16233d; color: #fff;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg); padding: 1.5rem 1.7rem; }
.example-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #93c5fd; }
.example-question { margin: .6rem 0 1.1rem; font-family: var(--f-display);
  font-size: clamp(1.1rem, 4.4vw, 1.45rem); line-height: 1.35; font-weight: 700; }
.example-lines { margin: 0; display: grid; gap: .7rem; }
.example-lines > div { display: grid; gap: .2rem; }
.example-lines dt { font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #94a3b8; }
.example-lines dd { margin: 0; font-size: .95rem; line-height: 1.55; color: #e2e8f0; }
.example-lines .q-company { display: inline-block; background: rgba(255,255,255,.12);
  border-radius: 999px; padding: .15rem .65rem; margin-right: .35rem; font-weight: 600; }

/* ---- the three widest gaps, as sentences ------------------------------- */
.gap-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1rem; margin-top: 1.6rem; }
.gap-row { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; min-width: 0; }
.gap-row h3 { margin: 0; font-family: var(--f-display); font-size: 1.02rem;
  line-height: 1.3; color: var(--ink); }
.gap-count { margin: .5rem 0 0; font-weight: 700; color: var(--warn-ink); font-size: .95rem; }
.gap-example { margin: .7rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--muted);
  font-style: italic; }

.comp-more { margin-top: 1rem; }

/* ---- everything else, one click away ----------------------------------- */
.deep-dive > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.25rem; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(.95rem, 3.6vw, 1.05rem); color: var(--ink); min-height: 44px; }
.deep-dive > summary::-webkit-details-marker { display: none; }
.deep-dive > summary::after { content: '\203A'; margin-left: auto; transform: rotate(90deg);
  color: var(--accent); font-size: 1.3em; line-height: 1; }
.deep-dive[open] > summary::after { transform: rotate(-90deg); }
.deep-dive > summary:hover { border-color: var(--accent); }
.deep-body { padding-top: 1.6rem; display: grid; gap: 2.6rem; }
.deep-part { min-width: 0; }

/* ---- 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; }

/* A repeated recommended action collapses to one quiet line; the first card
   in the current view keeps the full sentence. */
.q-action.is-dup dd { display: none; }
.q-action.is-dup::after { content: attr(data-same); display: block; font-size: .85rem;
  font-style: italic; color: #64748b; margin-top: .1rem; }

/* The page on the client's site that answers the question. */
.q-answer dd a { font-weight: 700; color: var(--accent); text-decoration: none; }
.q-answer dd a:hover { text-decoration: underline; }

/* ---- 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; }

/* payback planner: type a few numbers, see the answer at once */
.pb { background: #fff; border: 2px solid var(--accent); border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem 1.4rem; margin: 1.4rem 0; box-shadow: var(--shadow-sm); }
.pb-title { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); margin: 0 0 1rem; }
.pb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.pb-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.pb-field > span { font-size: .78rem; font-weight: 700; color: var(--muted); line-height: 1.35; }
.pb-field input, .pb-field select { width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .7rem; font: inherit; font-weight: 700; color: var(--ink); background: var(--bg-soft); }
.pb-field input:focus, .pb-field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.pb-hint { font-size: .74rem; color: var(--muted); font-style: normal; }
.pb-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.1rem; }
.pb-out > div { background: var(--accent-soft); border-radius: 12px; padding: .8rem .9rem; text-align: center; }
.pb-out span { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; color: var(--ink); }
.pb-out em { display: block; font-size: .74rem; font-style: normal; font-weight: 700; color: var(--muted); margin-top: .2rem; }
.pb-verdict { margin: 1rem 0 0; font-size: 1rem; font-weight: 700; border-radius: 10px; padding: .75rem .9rem; }
.pb-verdict.is-good { background: #ecfdf5; color: var(--good-ink); }
.pb-verdict.is-bad { background: #fee2e2; color: #991b1b; }
.pb-verdict.is-note { background: var(--accent-soft); color: var(--ink-2); font-weight: 600; }
.pb-note { margin: .8rem 0 0; font-size: .8rem; color: var(--muted); }
@media (max-width: 860px) { .pb-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pb-grid, .pb-out { grid-template-columns: 1fr; } }

/* red-tinted no-risk line under the pricing cards (investmentGuarantee) */
/* a reassurance ("no contract, month-3 checkpoint"), so calm green — the red
   alert style made every proposal's guarantee read as a warning (2026-09-16) */
.payback.is-guarantee { background: #ecfdf5; color: #14532d; border: 1px solid #bbf7d0; }
.payback.is-guarantee strong { color: #166534; }

/* ---------- free analysis page ---------- */
/* The analysis hero carries no price, so it is shorter than the proposal's. */
.pp-hero.is-analysis { padding-top: 3.2rem; padding-bottom: 3.4rem; }
.pp-hero.is-analysis .hero-title { max-width: 26ch; font-size: clamp(1.7rem, 3.3vw, 2.45rem); }
.pp-hero.is-analysis .hero-logos { margin-bottom: .9rem; }
.sum-card.is-good .find-value { color: var(--good-ink); }
.sum-card.is-warn .find-value { color: var(--warn-ink); }
.sum-card.is-bad .find-value { color: #b91c1c; }
.sum-card .find-value { font-family: var(--f-display); font-size: 1.9rem; font-weight: 800;
  color: var(--ink); margin: 0 0 .35rem; letter-spacing: -.02em; }
.sum-card .find-text { color: var(--muted); font-size: .93rem; }
.prob-item strong { font-family: var(--f-display); font-size: 1.06rem; color: var(--ink);
  display: block; margin-bottom: .3rem; letter-spacing: -.01em; }

/* severity is the one thing a reader scans for, so it is a colour and a word */
.sev { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px; white-space: nowrap; }
.sev-critical { background: #fee2e2; color: #991b1b; }
.sev-high { background: #ffedd5; color: #9a3412; }
.sev-medium { background: #fef3c7; color: #854d0e; }
.sev-low { background: var(--accent-soft); color: #1e40af; }

/* Six prose columns overflowed the page at 1440px and cut the last one off,
   and auto layout then let one cell run underneath its neighbour. Fixed widths
   are the only thing that holds six columns of sentences in one row. */
.prio-table { table-layout: fixed; }
/* .data-table td:not(:first-child):not(.muted) sets nowrap at (0,3,1); a
   plainer selector here loses to it and the text ran under the next column. */
.prio-table td:not(:first-child):not(.muted),
.prio-table th { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.prio-table td { min-width: 0; overflow-wrap: anywhere; }
.prio-table th:nth-child(1), .prio-table td:nth-child(1) { width: 3.5%; }
.prio-table th:nth-child(2), .prio-table td:nth-child(2) { width: 30%; }
.prio-table th:nth-child(3), .prio-table td:nth-child(3) { width: 10%; }
.prio-table th:nth-child(4), .prio-table td:nth-child(4) { width: 24%; }
.prio-table th:nth-child(5), .prio-table td:nth-child(5) { width: 16.5%; }
.prio-table th:nth-child(6), .prio-table td:nth-child(6) { width: 16%; }
.prio-n { font-family: var(--f-display); font-weight: 800; color: var(--accent); font-size: 1.05rem; }
.prio-where { display: block; font-size: .84rem; color: var(--muted); font-weight: 400;
  margin-top: .2rem; white-space: normal; }

/* one finding = what is wrong, how to fix it, why it is worth fixing */
.fnd-group { margin-top: 2.5rem; }
.fnd-group:first-of-type { margin-top: 2rem; }
.fnd-group-head { border-left: 3px solid var(--accent); padding-left: 1rem; margin-bottom: 1.1rem; }
.fnd-group-head h3 { font-size: 1.32rem; margin-bottom: .25rem; }
.fnd-group-head p { margin: 0; color: var(--muted); max-width: 70ch; font-size: .95rem; }
.fnd { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.fnd-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.fnd-head h4 { font-family: var(--f-display); font-size: 1.06rem; color: var(--ink);
  margin: 0; letter-spacing: -.01em; line-height: 1.3; }
.fnd-facts { margin: 0 0 1rem; padding-left: 1.15rem; display: grid; gap: .35rem;
  font-size: .95rem; color: var(--text); }
.fnd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.fnd-part { border-radius: 12px; padding: 1rem 1.1rem; }
.fnd-part.is-fix { background: var(--accent-soft); }
.fnd-part.is-why { background: var(--bg-soft); }
.fnd-part p { margin: 0; font-size: .93rem; }
.fnd-label { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.fnd-part.is-fix .fnd-label { color: var(--accent); }
.fnd-steps { margin: 0; padding-left: 1.15rem; display: grid; gap: .35rem; font-size: .93rem; }
.fnd-check { margin: .9rem 0 0; font-size: .89rem; color: var(--muted); }
/* A screenshot from the client's own account, shown as evidence under the facts. */
.fnd-shot { margin: 0 0 1.1rem; }
.fnd-shot a { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.fnd-shot img { display: block; width: 100%; height: auto; }
.fnd-shot figcaption { margin-top: .5rem; font-size: .86rem; color: var(--muted); }
@media print { .fnd-shot { break-inside: avoid; } }
/* ------------------------------------------------ the problems, one block each
   Every block has the same four rows in the same order. The label sits in a
   narrow left column so the eye can run down "what is wrong" or "how to fix it"
   without reading everything. */
.pb-cards { display: grid; gap: 1.5rem; margin-top: 2rem; }
.pb-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.pb-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center;
  padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); }
.pb-n { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; }
.pb-head h3 { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.42rem); line-height: 1.25; }
.pb-stat { text-align: right; padding-left: 1.2rem; border-left: 1px solid var(--line); }
.pb-stat strong { display: block; font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.1; color: #b91c1c; white-space: nowrap; }
.pb-stat span { display: block; margin-top: .2rem; font-size: .8rem; color: var(--muted); max-width: 17ch; margin-left: auto; line-height: 1.35; }
.pb-row { display: grid; grid-template-columns: 172px 1fr; gap: 1.2rem; padding: 1.05rem 1.6rem; }
.pb-row + .pb-row, .pb-proof + .pb-row { border-top: 1px solid var(--line-soft); }
.pb-tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding-top: .28rem; display: flex; gap: .5rem; align-items: baseline; }
.pb-tag::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; transform: translateY(1px); }
.pb-row.is-wrong .pb-tag { color: #b91c1c; }
.pb-row.is-why .pb-tag { color: var(--warn-ink); }
.pb-row.is-fix .pb-tag { color: #1d4ed8; }
.pb-row.is-check .pb-tag { color: var(--good-ink); }
.pb-text p { margin: 0; max-width: 78ch; }
.pb-text ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; max-width: 78ch; }
.pb-text ol li::marker { font-weight: 700; color: #1d4ed8; }
.pb-row.is-fix { background: var(--accent-soft); }
.pb-row.is-check { background: #f0fdf4; }
.pb-row.is-check .pb-text p { color: var(--text); }
.pb-proof { padding: 1.1rem 1.6rem 1.2rem; border-top: 1px solid var(--line-soft); background: var(--bg-soft); }
.pb-proof .fnd-shot { margin: 0; }
.pb-proof .fnd-shot + .pb-table { margin-top: 1.2rem; }
.pb-table-title { font-family: var(--f-display); font-weight: 700; color: var(--ink); margin: 0 0 .6rem; font-size: .98rem; }
.pb-table .data-table td { font-size: .92rem; }
.pb-minor { margin-top: 3rem; }
.pb-minor > h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.pb-minis { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.pb-mini { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm); }
.pb-mini h4 { font-family: var(--f-display); font-size: 1.02rem; color: var(--ink); margin: 0 0 .4rem; line-height: 1.3; }
.pb-mini p { margin: 0; font-size: .94rem; color: var(--text); }
.pb-mini-fix { margin-top: .7rem !important; padding: .7rem .85rem; background: var(--accent-soft); border-radius: 10px; }
.pb-mini-fix span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1d4ed8; margin-bottom: .15rem; }
@media (max-width: 760px) {
  .pb-head { grid-template-columns: auto 1fr; padding: 1.1rem 1.15rem; }
  .pb-stat { grid-column: 1 / -1; text-align: left; padding: .8rem 0 0; border-left: 0; border-top: 1px solid var(--line); display: flex; gap: .7rem; align-items: baseline; }
  .pb-stat span { margin: 0; max-width: none; }
  .pb-row { grid-template-columns: 1fr; gap: .35rem; padding: .95rem 1.15rem; }
  .pb-proof { padding: .95rem 1.15rem 1.05rem; }
}
@media print { .pb-card, .pb-mini { break-inside: avoid; box-shadow: none; } }
/* links inside the dark plan cards need a lighter blue to be readable */
.pp-moves a { color: #93c5fd; }
/* evidence rows as text: the telling rows are tinted and carry a short verdict */
.pb-ev + .pb-table, .pb-proof .fnd-shot + .pb-ev { margin-top: 1.3rem; }
.pb-ev-table td { font-size: .95rem; vertical-align: middle; }
.pb-ev-table td:first-child { font-weight: 600; color: var(--ink); }
.pb-ev-table tr.is-bad td { background: #fef2f2; }
.pb-ev-table tr.is-bad td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.pb-ev-table tr.is-warn td { background: #fffbeb; }
.pb-ev-table tr.is-warn td:first-child { box-shadow: inset 4px 0 0 #d97706; }
.pb-ev-table tr.is-good td { background: #f0fdf4; }
.pb-ev-table tr.is-good td:first-child { box-shadow: inset 4px 0 0 #059669; }
.pb-pill { display: inline-block; font-size: .76rem; font-weight: 700; line-height: 1.3; padding: .2rem .6rem;
  border-radius: 999px; background: var(--bg-soft); color: var(--muted); white-space: nowrap; }
.is-bad .pb-pill { background: #fee2e2; color: #991b1b; }
.is-warn .pb-pill { background: #fef3c7; color: #854d0e; }
.is-good .pb-pill { background: #dcfce7; color: #166534; }
.pb-ev-cap { margin: .6rem 0 0; font-size: .86rem; color: var(--muted); }
@media (max-width: 760px) { .pb-pill { white-space: normal; } }
.fnd-table-title { font-family: var(--f-display); font-size: 1.05rem; color: var(--ink);
  margin: 1.6rem 0 .7rem; }
.author-spec { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.5rem 1.6rem; margin-top: 1.8rem; box-shadow: var(--shadow-sm); }
.author-spec h3 { margin-bottom: .4rem; }
.author-spec > p { color: var(--muted); max-width: 70ch; }

@media (max-width: 640px) {
  .fnd { padding: 1.15rem 1.15rem; }
  .fnd-group-head { padding-left: .8rem; }
}

/* Six columns of sentences are unreadable on a phone, so below 760px the same
   priority rows render as cards. Same data, one view at a time. */
.prio-cards { display: none; }
@media (max-width: 760px) {
  #priorities .table-scroll { display: none; }
  .prio-cards { display: grid; gap: .8rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
  .prio-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
  .prio-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
  .prio-card h4 { font-family: var(--f-display); font-size: 1.02rem; color: var(--ink);
    margin: 0 0 .25rem; letter-spacing: -.01em; line-height: 1.3; }
  .prio-card .prio-where { display: block; font-size: .84rem; color: var(--muted); margin: 0 0 .5rem; }
  .prio-result { margin: 0 0 .5rem; font-size: .92rem; }
  .prio-meta { margin: 0; font-size: .82rem; color: var(--muted); font-weight: 600; }
}

/* ============================================================== the letter
   A free analysis that opens with a scoreboard reads like a bill. It opens
   with a letter instead: what we did, what it means, what to do next. */
.pp-letter { padding-top: clamp(2.6rem, 5vw, 4.2rem); }
.letter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.letter-body { max-width: 68ch; }
.letter-hi { font-size: 1.12rem; font-weight: 600; color: var(--ink); margin: 0 0 1rem; }
.letter-prose p { font-size: 1.04rem; line-height: 1.78; }
.letter-prose p + p { margin-top: 1rem; }
.letter-signoff { margin-top: 1.6rem; font-size: 1.02rem; color: var(--ink); }
.letter-ps { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .95rem; color: var(--muted); }
.letter-card { position: sticky; top: calc(var(--nav-h, 68px) + var(--jump-h, 0px) + 18px); }
.letter-contacts { list-style: none; margin: 1rem 0 1.2rem; padding: 0; display: grid; gap: .55rem;
  text-align: left; font-size: .9rem; }
.letter-contacts li { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline;
  padding-bottom: .55rem; border-bottom: 1px solid var(--line-soft); }
.letter-contacts li:last-child { border-bottom: 0; padding-bottom: 0; }
.letter-contacts span { color: var(--muted); white-space: nowrap; }
.letter-contacts strong { word-break: break-word; }
.letter-contacts strong { color: var(--ink); font-weight: 600; text-align: right; }
.letter-card-note { font-size: .82rem; color: var(--muted); margin: .9rem 0 0; line-height: 1.5; }

/* =========================================================== the mock-up
   Two screenshots of the same moment. This is the part of the page that does
   not need reading. */
.mock-open { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap;
  margin: 0 0 clamp(1.8rem, 3vw, 2.6rem); }
.mock-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem;
  color: var(--muted); word-break: break-all; }
.shot-pair { margin: 0 0 clamp(2rem, 3.5vw, 3rem); }
.shot-label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); margin: 0 0 .9rem; }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
.shot { border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  overflow: hidden; box-shadow: var(--shadow-sm); }
.shot img { width: 100%; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.shot-tag { display: block; padding: .7rem 1rem; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--muted); background: var(--bg-soft); }
.shot-tag.is-after { color: #fff; background: var(--ink); }
.shot.is-after { border-color: var(--ink); }
.shot-note { margin: 0; padding: .9rem 1.1rem 1.1rem; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.shot-note strong { color: var(--ink); }
.mock-help { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ========================================================= the IT section
   Written to be forwarded on its own and still make sense. */
.tech-group { margin: 0 0 clamp(2rem, 3.5vw, 2.8rem); }
.tech-group h3 { font-size: 1.14rem; margin: 0 0 .4rem; }
.tech-lead { color: var(--muted); margin: 0 0 1.1rem; max-width: 74ch; font-size: .96rem; }
.tech-table th:first-child, .tech-table td.tech-what { width: 26%; }
.tech-table td.tech-what { color: var(--ink); font-weight: 600; }
.tech-code { background: var(--ink); color: #e8ecf6; border-radius: var(--radius); padding: 1.1rem 1.3rem;
  overflow-x: auto; font-size: .84rem; line-height: 1.6; margin: 1rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 860px) {
  .letter-grid { grid-template-columns: 1fr; }
  .letter-card { position: static; }
  .tech-table th:first-child, .tech-table td.tech-what { width: auto; }
}

/* the list of changes: one card each, because five columns of sentences is
   not readable at any width */
.mock-rows { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; counter-reset: none; }
.mock-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .4rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.mock-n { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; color: var(--accent);
  line-height: 1.4; }
.mock-row h4 { font-size: 1.06rem; margin: 0 0 .9rem; color: var(--ink); }
.mock-ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mock-side { background: var(--bg-soft); padding: .95rem 1.1rem; }
.mock-side.is-after { background: #fff; }
.mock-side-tag { display: block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: .4rem; }
.mock-side.is-after .mock-side-tag { color: var(--accent); }
.mock-side p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); }
.mock-side.is-after p { color: var(--ink); }
.mock-why { margin: .95rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.mock-why span { display: block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--ink); margin-bottom: .25rem; }
@media (max-width: 640px) {
  .mock-row { grid-template-columns: 1fr; padding: 1.2rem 1.2rem; }
  .mock-n { font-size: .95rem; }
}

/* ============================================================ the three moves
   Ten priorities all marked critical read as "everything is broken". Three
   moves, with the small items folded underneath each, read as a plan. */
.pp-moves { background: var(--ink); color: rgba(255,255,255,.8); }
.pp-moves .sec-head h2, .pp-moves h3 { color: #fff; }
.pp-moves .sec-lead { color: rgba(255,255,255,.72); }
.move-cards { display: grid; gap: var(--gap, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 1.6rem; }
.move-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 1.7rem 1.7rem 1.5rem; display: flex; flex-direction: column; }
.move-card-n { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700;
  color: var(--warn); letter-spacing: .04em; }
.move-card h3 { font-size: 1.16rem; margin: .5rem 0 .7rem; line-height: 1.25; }
.move-what { margin: 0 0 1rem; font-size: .95rem; line-height: 1.62; color: rgba(255,255,255,.74); }
.move-items { margin: 0 0 1.1rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
.move-items li { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.68); }
.move-gain { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .92rem; line-height: 1.55; color: #fff; }
.move-gain span { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--warn); margin-bottom: .3rem; }
.pp-moves .chart-note { color: rgba(255,255,255,.55); }

/* the technical appendix opens a section at a time */
details.tech-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: .6rem; padding: .2rem 0; }
details.tech-group > summary::-webkit-details-marker { display: none; }
details.tech-group > summary::before { content: "›"; font-size: 1.5rem; line-height: 1;
  color: var(--muted); transition: transform .18s; }
details.tech-group[open] > summary::before { transform: rotate(90deg); }
details.tech-group > summary h3 { display: inline; margin: 0; }
details.tech-group[open] > summary { margin-bottom: .9rem; }

/* ====================================================== the forecast table
   Three plans that differ only in volume cannot be told apart from a feature
   list. This compares outcomes, and marks the column being recommended. */
.fc-table th:first-child { width: 30%; text-align: left; vertical-align: top; }
.fc-table thead th { font-size: .88rem; }
.fc-table td, .fc-table tbody th { vertical-align: top; font-size: .93rem; line-height: 1.55; }
.fc-table tbody th { font-weight: 600; color: var(--ink); }
.fc-note { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: .2rem; }
.fc-table .is-pick { background: var(--accent-soft); }
.fc-table thead .is-pick { color: var(--accent); }
.fc-table tr.is-strong td, .fc-table tr.is-strong th { font-weight: 700; color: var(--ink); }
.fc-basis { margin-top: clamp(1.6rem, 3vw, 2.4rem); background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.5rem 1.7rem; }
.fc-basis h3 { font-size: 1.06rem; margin: 0 0 .8rem; }
.fc-basis ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.fc-basis li { font-size: .95rem; line-height: 1.6; color: var(--muted); }
.fc-basis li strong { color: var(--ink); }
.fc-basis-note { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line-soft);
  font-size: .88rem; color: var(--muted); }
@media (max-width: 720px) { .fc-table th:first-child { width: auto; } }

/* the three problem cards: a label that wraps to two lines must not push its number below its neighbours (2026-09-17) */
.find-label { display: block; min-height: 2.6em; }

/* a plan with only the fee column (no ad budget) uses the full width */
.pay-cols > .pay-col:only-child { grid-column: 1 / -1; }

/* ---------- call my clients (references) ---------- */
.pp-refs { background: var(--bg-soft, #f7f8fb); }
.ref-google { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: 1.1rem 0 1.6rem;
  padding: .75rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; font-size: .95rem; }
.ref-google:hover { border-color: var(--accent); }
.ref-google span:last-child { color: var(--accent); font-weight: 600; }
.ref-stars { color: #f5a623; letter-spacing: .08em; font-size: 1.05rem; }
.ref-grid { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .9rem; }
.ref-card { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.ref-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.ref-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft);
  color: var(--accent); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.ref-body { display: grid; gap: .12rem; min-width: 0; }
.ref-name { color: var(--ink); font-size: 1rem; }
.ref-company { color: var(--muted); font-size: .88rem; text-decoration: none; overflow-wrap: anywhere; }
.ref-company:hover { color: var(--accent); text-decoration: underline; }
.ref-work { font-size: .8rem; color: var(--muted); }
.ref-phone { margin-top: .35rem; font-weight: 650; font-size: .98rem; color: var(--accent); text-decoration: none;
  display: inline-block; padding: .2rem 0; }
.ref-phone:hover { text-decoration: underline; }
/* trust strip right under the price cards */
.ref-strip { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .85rem 1.2rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none; }
.ref-strip:hover { border-color: var(--accent); }
.ref-faces { display: inline-flex; }
.ref-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; }
.ref-faces img:first-child { margin-left: 0; }
.ref-strip-text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; font-size: .95rem; }
.ref-strip-cta { margin-left: auto; color: var(--accent); font-weight: 650; font-size: .95rem; white-space: nowrap; }
@media (max-width: 560px) { .ref-strip-cta { margin-left: 0; } }

/* ---------- plans as side-by-side price columns ---------- */
.plan-cols { display: grid; gap: 1rem; margin: 1.6rem 0 0; align-items: stretch; }
.plan-cols.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-cols.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-cols.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-col { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.5rem 1.35rem 1.4rem; box-shadow: var(--shadow-sm); min-width: 0; }
.plan-col.is-pick { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); }
.plan-col-flag { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--accent); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .32rem .8rem; border-radius: 999px; }
.plan-col-name { font-size: 1.25rem; margin: 0 0 .2rem; }
.plan-col-tag { margin: 0 0 .9rem; font-size: .88rem; color: var(--muted); line-height: 1.45; min-height: 2.6em; }
.plan-col-price { font-family: var(--f-display); font-size: 2.3rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em;
  line-height: 1; margin: 0 0 1rem; }
.plan-col-price span { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: .3rem; }
.plan-col-expect { background: var(--accent-soft); border-radius: 12px; padding: .8rem .95rem; display: grid; gap: .1rem; margin-bottom: 1rem; }
.plan-col-expect strong { font-family: var(--f-display); font-size: 1.35rem; color: var(--ink); }
.plan-col-expect-note { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.plan-col-k { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.plan-col-cta { margin: 0 0 1.2rem; }
.plan-col-list { margin: .5rem 0 0; padding: 0; font-size: .88rem; line-height: 1.5; }
.plan-col-list li { margin-bottom: .4rem; }
.plan-col-note { margin: auto 0 0; padding-top: .9rem; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 980px) { .plan-cols.n3, .plan-cols.n4 { grid-template-columns: 1fr; } .plan-col.is-pick { order: -1; } .plan-col-tag { min-height: 0; } }
@media (max-width: 720px) { .plan-cols.n2 { grid-template-columns: 1fr; } .plan-col.is-pick { order: -1; } }
/* three-step "how it works" line above the prices (replaces the How I fix it cards) */
.how-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.how-steps li { display: flex; gap: .65rem; align-items: center; background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: .75rem .95rem; font-size: .93rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.how-steps span { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem;
  font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 720px) { .how-steps { grid-template-columns: 1fr; } }
/* trust line under the hero buttons */
.hero-trust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: 1.1rem; color: rgba(255,255,255,.88);
  font-size: .9rem; font-weight: 600; text-decoration: none; }
.hero-trust:hover { color: #fff; text-decoration: underline; }
.hero-trust-faces { display: inline-flex; }
.hero-trust-faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.9); margin-left: -7px; }
.hero-trust-faces img:first-child { margin-left: 0; }
/* break-even line above the calculator */
.break-even { display: grid; gap: .2rem; margin: 0 0 1rem; padding: 1rem 1.2rem; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 12px 12px 0; }
.break-even strong { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); }
.break-even span { font-size: .86rem; color: var(--muted); }
/* what happens after you say yes + owner questions, inside the final section */
.after-yes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; text-align: left; margin: 1.8rem auto 2rem; max-width: 980px; }
.after-yes-title { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 .7rem; }
.after-yes ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; color: rgba(255,255,255,.92); font-size: .95rem; line-height: 1.5; }
.yes-faq { border-bottom: 1px solid rgba(255,255,255,.14); padding: .6rem 0; }
.yes-faq summary { cursor: pointer; font-weight: 650; color: #fff; font-size: .95rem; list-style-position: inside; }
.yes-faq p { margin: .45rem 0 .2rem; color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.5; }
@media (max-width: 760px) { .after-yes { grid-template-columns: 1fr; } }

/* ---------- sales mode ---------- */
.hero-plan { margin: .9rem 0 0; color: rgba(255,255,255,.9); font-size: 1.02rem; line-height: 1.55; max-width: 46rem; }
.hero-plan strong { color: #fff; }
.ex-intro { margin: 1.8rem 0 .8rem; font-weight: 650; color: var(--ink); }
.ex-chain { display: grid; gap: .35rem; max-width: 760px; }
.ex-step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .95rem 1.2rem; box-shadow: var(--shadow-sm); }
.ex-step.is-goal { border-color: var(--accent); background: var(--accent-soft); }
.ex-step p { margin: .25rem 0 0; font-size: 1rem; color: var(--ink); line-height: 1.5; }
.ex-k { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.ex-today { display: block; margin-top: .4rem; font-size: .84rem; color: var(--muted); }
.ex-arrow { justify-self: center; color: var(--accent); font-weight: 800; font-size: 1.1rem; line-height: 1; }
.phase-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.phase { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.2rem; box-shadow: var(--shadow-sm); }
.phase-k { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #fff;
  background: var(--accent); border-radius: 999px; padding: .25rem .7rem; margin-bottom: .7rem; }
.phase h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.phase p { margin: 0; font-size: .93rem; color: var(--text); line-height: 1.55; }
.phase-note { margin: 1rem 0 0; font-size: .84rem; color: var(--muted); }
@media (max-width: 860px) { .phase-list { grid-template-columns: 1fr; } }
.compare-wrap { margin: 1.4rem 0 .4rem; }
.compare-table { min-width: 560px; }
.compare-table th[scope="row"] { font-weight: 650; color: var(--ink); width: 26%; }
.compare-table thead th { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); }
.compare-table thead th span { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: .15rem; }
.compare-table .is-pick { background: var(--accent-soft); }
.compare-table td { font-weight: 600; color: var(--ink); }
.plan-col-purpose { margin: -.4rem 0 .6rem; font-size: .92rem; color: var(--ink); font-weight: 650; line-height: 1.4; }
.plan-col-pays { margin: 0 0 1rem; font-size: .84rem; color: #0f7a3d; font-weight: 700; }
.recommend-why { margin: 1.2rem 0 0; padding: 1rem 1.2rem; border-radius: 12px; background: var(--accent-soft); border-left: 4px solid var(--accent);
  font-size: .97rem; line-height: 1.55; color: var(--ink); }
.plan-footnote { margin: .9rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.pp-final .final-cta { margin-top: 1.4rem; }
@media (min-width: 861px) {
  .ex-chain { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; max-width: none; gap: .6rem; }
  .ex-arrow { align-self: center; transform: rotate(-90deg); }
}

/* analysis: hand the technical section to a developer */
.tech-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem; }
.tech-tools .btn { font-size: .92rem; }

/* summary card values: long ones ("8 treatments · 0 conditions") wrap instead of being cut off by the card */
.ss-stat > strong { white-space: normal; text-wrap: balance; overflow-wrap: break-word; }
/* plan comparison on a phone: fit the screen (3 plans), only 4+ plans scroll */
@media (max-width: 560px) {
  .compare-table { min-width: 0; font-size: .8rem; }
  .compare-table.n4, .compare-table.n5 { min-width: 520px; }
  .compare-table th, .compare-table td { padding: .55rem .45rem; vertical-align: top; }
  .compare-table thead th { font-size: .82rem; }
  .compare-table th[scope="row"] { width: auto; font-size: .76rem; }
}

/* next step on the dark band: .prose p sets a dark ink color, so the text vanished on navy (QA 2026-10-16) */
.pp-final .prose p { color: rgba(255, 255, 255, .8); }
/* calculator: the plan menu holds the longest text ("Growth · $2,000/mo (recommended)"), give it the wider column */
@media (min-width: 861px) { .pb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); } }
/* on a phone the plan cards below carry the same facts, stacked; the side-by-side table only fits wider screens */
@media (max-width: 640px) { .compare-wrap { display: none; } }
/* plan comparison: cells wrap so four plans fit a 1280px laptop without a sideways scroll */
.compare-table th, .compare-table td { white-space: normal; }
.compare-table { table-layout: fixed; width: 100%; }
.compare-table th[scope="row"] { width: 17%; }
/* beat .data-table td:not(:first-child):not(.muted) (0,3,1) and .data-table thead th nowrap */
.data-table.compare-table td:not(:first-child):not(.muted), .data-table.compare-table thead th { white-space: normal; overflow-wrap: break-word; }

/* ===== Google & AI (search.js): Search Console performance inside the portal ===== */
.gs-page { padding-top: 2.2rem; }
.gs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.2rem; }
.gs-head h1 { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .2rem 0 .2rem; color: var(--ink); }
.gs-site { margin: 0; color: var(--muted); font-size: .95rem; }
.gs-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.gs-tab, .gs-range, .gs-dim { font: 600 .88rem var(--f-body); padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; }
.gs-tab.is-on, .gs-range.is-on, .gs-dim.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.gs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); margin-bottom: 1rem; }
.gs-ranges { display: flex; flex-wrap: wrap; gap: .35rem; }
.gs-range { padding: .4rem .75rem; font-size: .84rem; }
.gs-custom { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--muted); }
.gs-custom input { font: inherit; color: var(--text); padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.gs-compare { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--text); cursor: pointer; }
.gs-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.3rem 0 1rem; }
.gs-chip { font: 600 .82rem var(--f-body); padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-app.is-busy { opacity: .55; transition: opacity .15s; }
.gs-loading, .gs-empty { padding: 2.5rem 1.2rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.gs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-bottom: .9rem; }
.gs-card { text-align: left; display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; font: inherit; min-width: 0; }
.gs-card.is-on { background: var(--m); border-color: var(--m); color: #fff; }
.gs-card.is-static { cursor: default; max-width: 320px; }
.gs-card-label { display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 600; }
.gs-check { width: 14px; height: 14px; border-radius: 3px; border: 2px solid currentColor; flex: none; }
.gs-card.is-on .gs-check { background: #fff; box-shadow: inset 0 0 0 2px var(--m); }
.gs-card strong { font: 700 clamp(1.4rem, 2.6vw, 1.9rem)/1.05 var(--f-display); font-variant-numeric: tabular-nums; }
.gs-card-prev { font-size: .78rem; opacity: .85; }
.gs-delta { font-weight: 700; } .gs-card:not(.is-on) .gs-delta.is-up { color: var(--good-ink); } .gs-card:not(.is-on) .gs-delta.is-down { color: #b91c1c; }
.gs-chart-card, .gs-table-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1rem 1.1rem; margin-bottom: 1rem; position: relative; }
.gs-range-label { font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.gs-chart { position: relative; min-height: 220px; }
.gs-chart svg { display: block; overflow: visible; }
.gs-grid { stroke: var(--line-soft); stroke-width: 1; }
.gs-tick { font: 11px var(--f-body); fill: var(--muted); }
.gs-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.gs-dot { stroke: #fff; stroke-width: 2; }
.gs-tip { position: absolute; top: 6px; display: grid; gap: .2rem; padding: .55rem .7rem; background: var(--ink); color: #fff; border-radius: 10px; font-size: .8rem; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap; }
.gs-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; }
.gs-tip em { opacity: .7; font-style: normal; }
.gs-note { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); }
.gs-dims { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.gs-dim { padding: .4rem .8rem; font-size: .84rem; }
.gs-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.gs-table-tools input { flex: 1 1 220px; min-width: 0; font: inherit; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; }
.gs-count { font-size: .82rem; color: var(--muted); }
.gs-dl { font: 600 .82rem var(--f-body); padding: .45rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.gs-table-wrap { overflow-x: auto; }
.gs-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.gs-table th { text-align: left; font: 700 .72rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .55rem .6rem; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.gs-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.gs-table .r { text-align: right; }
.gs-table tr.is-click { cursor: pointer; } .gs-table tr.is-click:hover td { background: var(--accent-soft); }
.gs-key { max-width: 0; width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-key a { color: var(--accent); }
.gs-none { text-align: center; color: var(--muted); padding: 1.4rem; }
@media (max-width: 760px) {
  .gs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-bar { padding: .7rem; }
  .gs-key { width: 45%; }
  .gs-table { font-size: .82rem; }
}
@media print { .gs-bar, .gs-tabs, .gs-table-tools, .gs-filters { display: none !important; } }

/* ===== client pages: contact card (layout.js) and the link plan (tracker.js) ===== */
.team-card { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.team-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding-block: .7rem; }
.team-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.team-who { display: grid; gap: 1px; min-width: 0; margin-right: auto; }
.team-label { font: 700 .68rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.team-who strong { font: 700 1.02rem var(--f-display); color: var(--ink); }
.team-who strong a { color: inherit; text-decoration: none; }
.team-title { font-size: .84rem; color: var(--muted); }
.team-reach { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .9rem; }
.team-reach a:not(.btn) { color: var(--accent); }
.btn-sm { padding: .45rem .9rem; font-size: .85rem; }
.plan-month, .plan-group { border: 1px solid var(--line); border-radius: 12px; padding: .2rem .9rem; margin-bottom: .6rem; background: #fff; }
.plan-month > summary, .plan-group > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 0; }
.plan-pill { font: 700 .74rem var(--f-body); padding: .2rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.plan-pill.is-live { background: #ecfdf5; color: var(--good-ink); }
.plan-table td { vertical-align: top; }
.plan-anchors { display: flex; flex-wrap: wrap; gap: .3rem; }
.plan-chip { font-size: .8rem; padding: .2rem .5rem; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line-soft); white-space: normal; }
@media print { .team-card .btn { display: none; } }

.data-table.plan-table td, .data-table.plan-table td:not(:first-child):not(.muted) { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .team-inner { flex-wrap: nowrap; align-items: flex-start; gap: .75rem; padding-block: .6rem; }
  .team-photo { width: 44px; height: 44px; }
  .team-who { margin-right: 0; }
  .team-inner { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
  .team-reach { grid-column: 2; font-size: .85rem; gap: .2rem .9rem; }
}
@media (max-width: 640px) {
  .gs-table th:nth-child(4), .gs-table td:nth-child(4), .gs-table th:nth-child(5), .gs-table td:nth-child(5) { display: none; }
  .gs-key { width: 62%; white-space: normal; overflow-wrap: anywhere; }
}


/* ---------- client pages: Monthly report and Links placed (rp-) ----------
   Light, quiet, one idea per block; every block carries one line saying how to read it. */
.rp-body { background: #fff; }
.rp-hero { background: linear-gradient(180deg, #f4f6fb 0%, #fff 100%); border-bottom: 1px solid var(--line); padding: 2.6rem 0 1.4rem; }
.rp-eyebrow { font: 700 .74rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
.rp-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 .5rem; }
.rp-sofar { font: 500 1rem var(--f-body); color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.rp-lead { color: var(--muted); font-size: 1.05rem; max-width: 60ch; margin: 0 0 1.4rem; }
.rp-months { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.rp-months-label { font: 700 .7rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex: none; }
.rp-months-row { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin; padding: .2rem 0 .5rem; min-width: 0; }
.rp-month { flex: none; padding: .42rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rp-month:hover { border-color: var(--accent); color: var(--accent); }
.rp-month.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.rp-section { padding: 2.6rem 0; }
.rp-section + .rp-section { border-top: 1px solid var(--line-soft); }
.rp-soft { background: var(--bg-soft); }
.rp-head { margin-bottom: 1.1rem; }
.rp-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 0 0 .35rem; }
.rp-sub { font-size: 1rem; margin: 1.4rem 0 .7rem; }
.rp-sub:first-of-type { margin-top: .4rem; }
.rp-help { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: .9rem; line-height: 1.55; color: var(--muted); max-width: 72ch; }
.rp-i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 .7rem/18px var(--f-display); text-align: center; font-style: italic; }
.rp-section > .wrap > .rp-help { margin-top: 1.1rem; }

.rp-guide { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: .9rem 1.2rem; margin-bottom: 2rem; }
.rp-guide summary { cursor: pointer; font: 700 .95rem var(--f-display); color: var(--ink); list-style: none; display: flex; align-items: center; gap: .5rem; }
.rp-guide summary::-webkit-details-marker { display: none; }
.rp-guide summary::before { content: '?'; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; display: grid; place-items: center; flex: none; }
.rp-guide summary::after { content: '\25BE'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.rp-guide:not([open]) summary::after { transform: rotate(-90deg); }
.rp-guide ul { margin: .7rem 0 .1rem; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .92rem; color: var(--text); }

.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.rp-kpis.is-ai { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); }
.rp-kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.15rem 1.25rem 1.2rem; display: grid; gap: .25rem; align-content: start; box-shadow: 0 1px 2px rgba(11, 18, 32, .04); }
.rp-kpi-label { font: 600 .82rem var(--f-body); color: var(--muted); }
.rp-kpi-value { font: 800 2.1rem/1.1 var(--f-display); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-kpi-value small { font: 600 1rem var(--f-body); color: var(--muted); letter-spacing: 0; }
.rp-kpi-change { min-height: 1.3em; font-size: .85rem; }
.rp-kpi-note { font-size: .84rem; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: .55rem; margin-top: .2rem; }
.rp-delta { font-weight: 700; color: var(--muted); white-space: nowrap; }
.rp-delta.is-up { color: var(--good-ink); }
.rp-delta.is-down { color: #b91c1c; }
.rp-was { color: var(--muted); white-space: nowrap; }

.rp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; position: relative; }
.rp-legend { display: flex; gap: 1.2rem; font-size: .84rem; font-weight: 600; color: var(--text); margin-bottom: .4rem; }
.rp-legend span::before { content: ''; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: .45rem; vertical-align: middle; }
.rp-legend .is-clicks::before { background: #2563eb; }
.rp-legend .is-impr::before { background: #8b5cf6; }
.rp-chart { position: relative; }
.rp-section[hidden] { display: none; }
.rp-chart svg { display: block; overflow: visible; touch-action: pan-y; }
.rp-grid { stroke: var(--line-soft); stroke-width: 1; }
.rp-axis { stroke: var(--line); stroke-width: 1; }
.rp-line-clicks { fill: none; stroke: #2563eb; stroke-width: 2.4; stroke-linejoin: round; }
.rp-line-impr { fill: none; stroke: #8b5cf6; stroke-width: 2; stroke-linejoin: round; opacity: .85; }
.rp-area-clicks { fill: rgba(37, 99, 235, .08); }
.rp-area-impr { fill: rgba(139, 92, 246, .06); }
.rp-tick { font: 500 11px var(--f-body); fill: var(--muted); }
.rp-cross { stroke: var(--muted); stroke-dasharray: 3 3; }
.rp-dot-clicks { fill: #2563eb; stroke: #fff; stroke-width: 2; }
.rp-dot-impr { fill: #8b5cf6; stroke: #fff; stroke-width: 2; }
.rp-tip { position: absolute; top: 0; background: var(--ink); color: #fff; border-radius: 10px; padding: .5rem .7rem; font-size: .8rem; line-height: 1.45; display: grid; pointer-events: none; box-shadow: var(--shadow-sm); white-space: nowrap; }
.rp-tip[hidden] { display: none; }
.rp-tip .is-clicks { color: #a5c4ff; }
.rp-tip .is-impr { color: #d4c4ff; }
.rp-loading { color: var(--muted); font-size: .92rem; margin: 0; padding: 1.4rem .2rem; }
.rp-empty { background: #fff; border: 1px dashed var(--line); border-radius: 14px; padding: 1.1rem 1.25rem; color: var(--muted); font-size: .94rem; }
.rp-more { margin: 1rem 0 0; font-size: .92rem; font-weight: 600; }
.rp-more a { text-decoration: none; }
.rp-more a:hover { text-decoration: underline; }

.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.rp-two > div { min-width: 0; }
.rp-list { padding: .3rem .4rem; }
.rp-top { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; table-layout: fixed; }
.rp-top th { font: 700 .68rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.rp-top th:first-child { text-align: left; width: 64%; }
.rp-top td { padding: .55rem .5rem; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.rp-top tr:last-child td { border-bottom: 0; }
.rp-top td:first-child { text-align: left; position: relative; white-space: normal; }
.rp-bar { position: absolute; left: 0; top: 18%; bottom: 18%; width: var(--w); background: var(--accent-soft); border-radius: 4px; z-index: 0; }
.rp-key { position: relative; z-index: 1; display: block; overflow-wrap: anywhere; color: var(--ink); padding-left: .35rem; }
.rp-key a { color: var(--ink); text-decoration: none; }
.rp-key a:hover { color: var(--accent); text-decoration: underline; }

.rp-work { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rp-work li { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .9rem; align-items: baseline; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; font-size: .92rem; }
.rp-work .rp-date { font-weight: 700; color: var(--muted); font-size: .82rem; }
.rp-work a { font-size: .85rem; overflow-wrap: anywhere; text-align: right; }
.rp-links-table { min-width: 560px; background: #fff; }
.rp-links-table td { padding-block: .62rem; vertical-align: middle; }
.rp-links-table td.rp-site { white-space: nowrap; overflow-wrap: normal; width: 30%; }
.rp-month-block > summary { list-style: none; cursor: pointer; }
.rp-month-block > summary::-webkit-details-marker { display: none; }
.rp-month-block > summary .rp-month-head::after { content: '\25BE'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.rp-month-block:not([open]) > summary .rp-month-head::after { transform: rotate(-90deg); }
.rp-month-block:not([open]) .rp-month-head { margin-bottom: 0; }
.rp-month-block:not([open]) { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1.1rem; }
.rp-links-table td.rp-site a { font-weight: 600; color: var(--ink); text-decoration: none; }
.rp-links-table td.rp-site a:hover { color: var(--accent); text-decoration: underline; }
.rp-links-table td.rp-page a { color: var(--muted); }
.rp-soft .table-scroll { background: #fff; border-radius: 14px; }

.rp-month-block + .rp-month-block { margin-top: 2rem; }
.rp-month-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .7rem; }
.rp-month-head h2 { font-size: 1.3rem; margin: 0; }
.rp-count { font-size: .82rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: .15rem .6rem; border-radius: 999px; white-space: nowrap; }
.rp-plan { border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1.1rem; background: #fff; }
.rp-plan + .rp-plan { margin-top: .6rem; }
.rp-plan summary { cursor: pointer; display: flex; align-items: center; gap: .7rem; font-size: .98rem; color: var(--ink); }
.rp-plan ul { list-style: none; margin: .8rem 0 .2rem; padding: 0; display: grid; gap: .7rem; }
.rp-plan li { display: grid; gap: .35rem; border-top: 1px solid var(--line-soft); padding-top: .7rem; }
.rp-plan li > a { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.rp-phrases { display: flex; flex-wrap: wrap; gap: .35rem; }
.rp-phrases span { font-size: .8rem; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: .1rem .55rem; color: var(--text); }
.rp-ask p { margin: 0; color: var(--muted); font-size: .95rem; }

@media (max-width: 860px) {
  .rp-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rp-hero { padding: 1.8rem 0 1rem; }
  .rp-months { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .rp-months-row { max-width: 100%; }
  .rp-section { padding: 1.9rem 0; }
  .rp-kpis { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .rp-kpi { padding: .9rem .95rem; }
  .rp-kpi-value { font-size: 1.6rem; }
  .rp-kpi-note { font-size: .78rem; }
  .rp-kpis.is-ai { grid-template-columns: 1fr; }
  .rp-top th:first-child { width: 62%; }
  .rp-work li { grid-template-columns: 1fr; gap: .2rem; }
  .rp-work a { text-align: left; }
}
@media (max-width: 640px) {
  /* links as cards on a phone: website, the linked words, your page */
  .table-scroll:has(.rp-links-table) { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .rp-links-table { min-width: 0; background: transparent; }
  .rp-links-table thead { display: none; }
  .rp-links-table, .rp-links-table tbody, .rp-links-table tr, .rp-links-table td { display: block; width: 100%; }
  .rp-links-table tr { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; margin-bottom: .4rem; }
  .rp-links-table td { border: 0 !important; padding: .05rem 0 !important; line-height: 1.45; white-space: normal !important; min-width: 0 !important; }
  .rp-links-table td.rp-site a { font-size: .95rem; }
  .rp-links-table td:nth-child(2):not(.rp-site) { color: var(--ink); }
  .rp-links-table td.rp-page { font-size: .82rem; }
  .rp-links-table td.muted { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
}
@media (max-width: 380px) { .rp-kpis { grid-template-columns: 1fr; } }
@media print { .rp-guide, .rp-months, .rp-more { display: none !important; } .rp-section { padding: 1.2rem 0; } }

/* Google & AI: what each number means, in one line each */
.gs-help { list-style: none; margin: .2rem 0 1.2rem; padding: .85rem 1.1rem; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1.6rem; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.gs-help strong { color: var(--ink); font-weight: 700; }
.gs-help .gs-help-how { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .45rem; margin-top: .2rem; }
@media (max-width: 640px) { .gs-help { grid-template-columns: 1fr; } }

/* year + month picker: years in one row, the twelve months of that year January to December below */
.rp-picker { display: grid; gap: .55rem; }
.rp-pick-row { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.rp-pick-label { flex: none; width: 3.6rem; font: 700 .7rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rp-chips { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.rp-chips.is-months { display: grid; grid-template-columns: repeat(12, minmax(3.3rem, 1fr)); flex: 1; max-width: 52rem; }
.rp-chips.is-months:has(.is-wide) { grid-template-columns: auto repeat(12, minmax(3.1rem, 1fr)); max-width: 60rem; }
.rp-chip { display: inline-flex; align-items: center; justify-content: center; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.rp-chip:hover { border-color: var(--accent); color: var(--accent); }
.rp-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.rp-chip.is-on:hover { color: #fff; }
.rp-chip.is-off { color: #b8bfcc; background: transparent; border-style: dashed; border-color: var(--line-soft); cursor: default; }
.rp-chips.is-months .rp-chip { padding-inline: .3rem; }
.rp-chip.is-wide { padding-inline: .9rem; }
@media (max-width: 860px) {
  .rp-chips.is-months, .rp-chips.is-months:has(.is-wide) { grid-template-columns: repeat(6, 1fr); max-width: none; }
  .rp-chips.is-months .rp-chip.is-wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rp-pick-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .rp-pick-row .rp-chips { width: 100%; }
}
@media print { .rp-picker { display: none !important; } }

/* Google positions (keyword.com): only the phrases that moved up */
.rk-wrap { margin-top: 1rem; }
.rk-table { min-width: 560px; background: #fff; }
.rk-table td { vertical-align: middle; }
.rk-phrase { font-weight: 600; color: var(--ink); }
.rk-table td .rk-url { display: block; margin-top: 2px; padding: 0; font-weight: 400; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.rk-pos { display: inline-block; min-width: 2.6rem; text-align: center; font: 800 .95rem var(--f-display); color: var(--ink); background: var(--bg-soft); border-radius: 8px; padding: .15rem .45rem; }
.rk-pos.is-p1 { background: var(--accent-soft); color: var(--accent); }
.rk-pos.is-top { background: #e7f8ef; color: var(--good-ink); }
.rk-maps { display: inline-block; margin-left: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--good-ink); background: #e7f8ef; border-radius: 999px; padding: .05rem .45rem; vertical-align: middle; }
@media (max-width: 640px) {
  .rk-table { min-width: 0; }
  .rk-table th:nth-child(5), .rk-table td:nth-child(5) { display: none; }
}

/* Pages & articles: the question each page answers, grouped by topic */
.ct-intro { background: var(--accent-soft); border: 1px solid #dbe7ff; border-radius: 16px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; }
.ct-intro p { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.65; max-width: 80ch; }
.ct-group { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.25rem; }
.ct-group + .ct-group { margin-top: .8rem; }
.ct-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; }
.ct-group > summary::-webkit-details-marker { display: none; }
.ct-group > summary h2 { font-size: 1.15rem; margin: 0; }
.ct-group > summary::after { content: '\25BE'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.ct-group:not([open]) > summary::after { transform: rotate(-90deg); }
.ct-gwhy { margin: .7rem 0 .2rem; font-size: .9rem; color: var(--text); background: var(--bg-soft); border-radius: 10px; padding: .6rem .8rem; max-width: 90ch; }
.ct-gwhy strong { color: var(--accent); font-weight: 700; }
.ct-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; }
.ct-item { padding: .75rem 0; border-top: 1px solid var(--line-soft); }
.ct-list.is-short { gap: .5rem; }
.ct-list.is-short .ct-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; }
.ct-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.ct-date { font-size: .78rem; font-weight: 700; color: var(--muted); min-width: 3.4rem; }
.ct-kind { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--bg-soft); border-radius: 999px; padding: .08rem .5rem; }
.ct-kind.is-article { color: var(--accent); background: var(--accent-soft); }
.ct-kind.is-service, .ct-kind.is-home { color: var(--good-ink); background: #e7f8ef; }
.ct-title { font-weight: 650; color: var(--ink); text-decoration: none; }
.ct-title:hover { color: var(--accent); text-decoration: underline; }
.ct-links { font-size: .72rem; font-weight: 700; color: var(--good-ink); }
.ct-q { display: flex; gap: .5rem; margin: .3rem 0 0; font-size: .92rem; color: var(--ink); }
.ct-q span { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 6px; background: var(--ink); color: #fff; font: 800 .7rem/1.25rem var(--f-display); text-align: center; margin-top: .1rem; }
.ct-why { margin: .2rem 0 0 1.75rem; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.ct-mix { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.ct-mix span { font-size: .82rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; color: var(--text); }
.ct-mix b { color: var(--ink); }
@media (max-width: 640px) {
  .ct-group { padding: .85rem .9rem; }
  .ct-why { margin-left: 0; }
}

/* Search & AI visibility: one page, green = working, red = needs work */
.vs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.vs-card { position: relative; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 16px; padding: 1.1rem 1.25rem; display: grid; gap: .25rem; align-content: start; }
.vs-card.is-good { border-top-color: var(--good); }
.vs-card.is-bad { border-top-color: #ef4444; }
.vs-card .rp-kpi-value small { font: 600 1rem var(--f-body); color: var(--muted); }
.vs-tag { justify-self: start; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .1rem .55rem; margin-bottom: .2rem; }
.vs-card.is-good .vs-tag { color: var(--good-ink); background: #e7f8ef; }
.vs-card.is-bad .vs-tag { color: #b91c1c; background: #fdecec; }
.vs-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.vs-list { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; }
.vs-list h3 { margin: 0 0 .6rem; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.vs-list h3::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.vs-list.is-good h3::before { background: var(--good); }
.vs-list.is-bad h3::before { background: #ef4444; }
.vs-list.is-next { border-color: #cfe0ff; background: var(--accent-soft); }
.vs-list.is-next h3::before { background: var(--accent); }
.vs-list ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: .93rem; line-height: 1.55; color: var(--text); }
.vs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.2rem 0 0; }
.vs-cta span { color: var(--muted); font-size: .9rem; }
.vs-miss { font-size: .82rem; font-weight: 600; color: #b91c1c; }
.vs-segs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; margin-bottom: .9rem; }
.vs-segs div { display: flex; justify-content: space-between; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .75rem; font-size: .88rem; }
.vs-segs b { color: var(--good-ink); }
.vs-comp { font-size: .92rem; color: var(--text); margin: 0; }
@media (max-width: 760px) { .vs-lists { grid-template-columns: 1fr; } }

/* Google rankings page: range chips, three lines, AI competitors as bars */
.rk-ranges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.rk-ranges .rp-chip { cursor: pointer; font-family: var(--f-body); }
.rk-legend .is-a::before { background: #059669 !important; }
.rk-legend .is-b::before { background: #2563eb !important; }
.rk-legend .is-c::before { background: #818cf8 !important; }
.rk-line-a { fill: none; stroke: #059669; stroke-width: 2.6; stroke-linejoin: round; }
.rk-line-b { fill: none; stroke: #2563eb; stroke-width: 2.2; stroke-linejoin: round; }
.rk-line-c { fill: none; stroke: #a5b4fc; stroke-width: 2; stroke-linejoin: round; }
.rk-area-a { fill: rgba(5, 150, 105, .08); }
.rk-ytick { font: 500 11px var(--f-body); fill: var(--muted); }
.cp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.2rem; display: grid; gap: .55rem; }
.cp-row { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr 3rem; align-items: center; gap: .8rem; font-size: .92rem; }
.cp-name { color: var(--ink); overflow-wrap: anywhere; }
.cp-name em { font-style: normal; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .05rem .45rem; margin-left: .3rem; }
.cp-bar { height: 12px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.cp-bar i { display: block; height: 100%; background: #cbd5e1; border-radius: 999px; }
.cp-row.is-you .cp-bar i { background: var(--accent); }
.cp-row.is-you .cp-name { font-weight: 700; }
.cp-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 640px) { .cp-row { grid-template-columns: 1fr 2.5rem; } .cp-bar { grid-column: 1 / -1; grid-row: 2; } }

/* rankings chart, lighter: soft gradient areas, round ends, the latest numbers at the right */
.rk-chart-card { background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.rk-end { font: 800 12px var(--f-display); }
.rk-end.is-a { fill: #047857; } .rk-end.is-b { fill: #1d4ed8; } .rk-end.is-c { fill: #6366f1; }
.rk-dot-a { fill: #059669; stroke: #fff; stroke-width: 2; } .rk-dot-b { fill: #2563eb; stroke: #fff; stroke-width: 2; } .rk-dot-c { fill: #818cf8; stroke: #fff; stroke-width: 2; }
.rk-line-a, .rk-line-b, .rk-line-c { stroke-linecap: round; }
.rk-line-c { stroke: #818cf8; stroke-width: 2.2; }

/* AI Scorecard: the monthly tests as tiles, September -> October -> ... -> the next one */
.sc-months-sec { padding: 1.8rem 0 1.2rem; }
.sc-months-head h2 { font-size: 1.3rem; margin: 0 0 .3rem; }
.sc-months-head p { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; max-width: 80ch; }
.sc-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.sc-month { display: grid; gap: .15rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; text-decoration: none; color: var(--ink); }
a.sc-month:hover { border-color: var(--accent); }
.sc-month.is-on { border: 2px solid var(--ink); }
.sc-m-name { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.sc-month strong { font: 800 1.6rem/1.1 var(--f-display); }
.sc-month strong small { font: 600 .9rem var(--f-body); color: var(--muted); }
.sc-month.is-old { background: var(--bg-soft, #f6f7f9); border-style: dashed; }
.sc-month.is-old strong { color: var(--muted); }
.sc-old-note { margin: .9rem 0 0; font-size: .9rem; color: var(--muted); max-width: 62ch; }
.sc-m-note { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.sc-month.is-next { border-style: dashed; background: transparent; color: var(--muted); }

/* client menu: one line, never wrapped; tighter on a laptop, scrolls sideways if it still does not fit */
.pp-nav.is-client .nav-links { gap: 1.05rem; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pp-nav.is-client .nav-links::-webkit-scrollbar { display: none; }
.pp-nav.is-client .nav-links a { white-space: nowrap; flex: 0 0 auto; }
.pp-nav.is-client .nav-cta { flex: none; margin-left: 1rem; }
.pp-nav.is-client .nav-cta .btn { white-space: nowrap; }
.pp-nav.is-client .nav-logout .btn-link { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 901px) {
  .pp-nav.is-client .nav-cta .btn-print { display: none; }
  .pp-nav.is-client .nav-links { gap: .85rem; }
  .pp-nav.is-client .nav-links a { font-size: .88rem; }
}

/* ---------- one look for every client page (AI Scorecard, Google & AI, Google Ads read like the Monthly report) ---------- */
body.is-client { background: #fff; }
body.is-client .pp-hero { background: linear-gradient(180deg, #f4f6fb 0%, #fff 100%); color: var(--ink); border-bottom: 1px solid var(--line); padding: 2.6rem 0 1.6rem; }
body.is-client .pp-hero .hero-bg { display: none; }
body.is-client .pp-hero .hero-eyebrow { color: var(--accent); font-size: .74rem; letter-spacing: .14em; margin-bottom: .5rem; }
body.is-client .pp-hero .hero-title { color: var(--ink); font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 .5rem; max-width: none; }
body.is-client .pp-hero .hero-lead { color: var(--muted); font-size: 1.05rem; max-width: 64ch; }
body.is-client .pp-hero .hero-hint { color: var(--muted); }
body.is-client .period-picker { color: var(--muted); }
body.is-client .period-picker select { background: #fff; color: var(--ink); border-color: var(--line); }
body.is-client .pp-section { padding: 2.6rem 0; }
body.is-client .sec-head { margin-bottom: 1.2rem; }
body.is-client .sec-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); }
body.is-client .sec-head .eyebrow { font-size: .7rem; }
body.is-client .pp-final { background: var(--bg-soft); color: var(--ink); border-top: 1px solid var(--line); padding: 2.6rem 0; }
body.is-client .pp-final h2 { color: var(--ink); }
body.is-client .pp-final .eyebrow { color: var(--accent); }
body.is-client .pp-final .btn-outline { color: var(--ink); border-color: rgba(11, 18, 32, .16); }
body.is-client .pp-jump { background: #fff; }
@media (max-width: 640px) { body.is-client .pp-hero { padding: 1.8rem 0 1.1rem; } body.is-client .pp-section { padding: 1.9rem 0; } }
@media print { body.is-client .pp-hero { background: #fff !important; } }

/* the article a link sits in, under the website */
.rp-links-table td.rp-site { white-space: normal; }
.rp-art { display: block; font-size: .78rem; color: var(--muted); line-height: 1.35; margin-top: 2px; max-width: 34ch; }

/* 2026-10-18 price-first proposals and shorter analyses */
.hero-offer-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; margin-top: 1.1rem; padding: .7rem 1rem;
  border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; max-width: 34rem; }
.hero-offer-strip:hover { background: rgba(255,255,255,.14); }
.hero-offer-strip .hos-k { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.hero-offer-strip strong { font: 800 1.12rem/1.2 var(--f-display); }
.hero-offer-strip .hos-cta { font-size: .9rem; font-weight: 600; margin-left: auto; }
body.is-client .hero-offer-strip, .pp-hero.is-light .hero-offer-strip { color: var(--ink); border-color: var(--line); background: #fff; }
.hero-findings { margin: .8rem 0 0; font-size: .95rem; }
.hero-findings a { color: inherit; opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
.hero-findings a:hover { opacity: 1; }
/* a folded section: the header stays, the content opens on a click */
details.sec-fold { margin-top: .4rem; }
details.sec-fold > summary, details.letter-more > summary, details.ref-more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--accent);
  padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
details.sec-fold > summary::-webkit-details-marker, details.letter-more > summary::-webkit-details-marker, details.ref-more > summary::-webkit-details-marker { display: none; }
details.sec-fold > summary::after, details.letter-more > summary::after, details.ref-more > summary::after { content: "▾"; font-size: .85rem; transition: transform .15s; }
details.sec-fold[open] > summary::after, details.letter-more[open] > summary::after, details.ref-more[open] > summary::after { transform: rotate(180deg); }
details.sec-fold[open] > summary { margin-bottom: 1.4rem; }
details.letter-more { margin-top: 1rem; }
details.letter-more[open] > summary { margin-bottom: 1rem; }
details.letter-more > p + p { margin-top: 1rem; }
details.ref-more { margin-top: 1.2rem; }
details.ref-more[open] > summary { margin-bottom: 1.2rem; }
/* problems: one line each, open on a click */
details.pb-card > summary.pb-head { cursor: pointer; list-style: none; border-bottom: 0; }
details.pb-card > summary.pb-head::-webkit-details-marker { display: none; }
details.pb-card[open] > summary.pb-head { border-bottom: 1px solid var(--line); }
details.pb-card > summary.pb-head::after { content: "▾"; color: var(--muted); font-size: 1rem; transition: transform .15s; grid-column: -1; }
details.pb-card[open] > summary.pb-head::after { transform: rotate(180deg); }
details.pb-card > summary.pb-head { grid-template-columns: auto 1fr auto auto; }
details.pb-card + details.pb-card { margin-top: 0; }
@media (max-width: 640px) {
  .hero-offer-strip .hos-cta { margin-left: 0; width: 100%; }
  details.pb-card > summary.pb-head { grid-template-columns: auto 1fr auto; }
  details.pb-card > summary.pb-head .pb-stat { grid-column: 2 / -1; text-align: left; padding-left: 0; border-left: 0; }
}
/* proposals on a phone: headline, then the price and the two buttons, then the explanation (2026-10-18) */
@media (max-width: 899px) {
  .pp-hero.is-offer .hero-inner.is-split > .hero-side > .offer-card { order: 0; margin: .9rem 0 0; padding: 1rem 1.15rem; }
  .pp-hero.is-offer .hero-inner.is-split > .hero-cta { order: 1; margin-top: 1rem; }
  .pp-hero.is-offer .hero-inner.is-split > .hero-lead { order: 2; margin-top: 1.4rem; }
  .pp-hero.is-offer .hero-inner.is-split > .hero-plan { order: 2; }
  .pp-hero.is-offer .hero-inner.is-split > .hero-findings,
  .pp-hero.is-offer .hero-inner.is-split > .hero-trust { order: 3; }
  .pp-hero.is-offer .hero-inner.is-split > .hero-meta { order: 4; }
  .pp-hero.is-offer .offer-card .offer-price { font-size: 2.2rem; }
}

/* Jūratė's review, 2026-10-18 */
.offer-compare { display: inline-flex; align-items: center; gap: .3rem; margin-top: .75rem; font-weight: 700; font-size: .95rem;
  color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.offer-compare:hover { color: #bfdbfe; }
/* results for other clients stand apart from the blue/white sections: green = what the work has done */
#proof.pp-section { background: #effaf3; }
#proof .eyebrow { color: #15803d; }
#proof .sec-head h2 { color: #0b1f14; }
#proof a[class*="card"], #proof .proof-card, #proof li[class*="card"] { border-color: #bbe5c8; }
.pp-refs { background: #fffaf1; }
.pp-refs .eyebrow { color: #b45309; }
/* the logos in the hero side card never clip */
.hero-inner.is-split > .hero-side .hero-logos { flex-wrap: wrap; row-gap: .6rem; max-width: 100%; overflow: visible; }
.hero-logos .hero-logo-ma { max-width: 100%; height: auto; object-fit: contain; }
.hero-logos .hero-logo-text { min-width: 0; }
.guide-lead { white-space: normal; }
/* folded parts must look clickable: a clear button, not a faint link */
details.sec-fold > summary, details.letter-more > summary, details.ref-more > summary {
  font-size: 1rem; padding: .75rem 1.2rem; background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .22); }
details.sec-fold > summary:hover, details.letter-more > summary:hover, details.ref-more > summary:hover { filter: brightness(1.08); }
details[open].sec-fold > summary, details[open].letter-more > summary, details[open].ref-more > summary {
  background: #fff; color: var(--accent); box-shadow: none; }
details.pb-card > summary.pb-head::after { content: "Details ▾"; font-size: .82rem; font-weight: 700; color: var(--accent);
  padding: .4rem .75rem; border: 1px solid #c7d7fe; border-radius: 999px; background: #eef3ff; white-space: nowrap; transform: none; }
details.pb-card[open] > summary.pb-head::after { content: "Hide ▴"; transform: none; background: #fff; }
details.pb-card > summary.pb-head:hover { background: #f8faff; }
@media (min-width: 900px) { .hero-offer-strip { display: inline-flex; flex-wrap: nowrap; max-width: none; } }
.tech-draft-note { margin: .2rem 0 1rem; padding: .7rem 1rem; border-left: 3px solid #f59e0b; background: #fffbeb; border-radius: 8px; font-size: .92rem; color: #78350f; }
details.pb-minor-fold { margin-top: 1.6rem; }
/* open points answered on the call, shown as a calm note (2026-10-18) */
.to-confirm { display: inline; padding: .05em .45em; border: 1px dashed #e0a526; border-radius: 6px; background: #fff8e6; color: #7a4b00; font-size: .92em; white-space: normal; }
.to-confirm::before { content: "? "; font-weight: 800; }

/* "Go deeper": the reference sections as one row of cards; a card opens its section below (Jūratė, 2026-10-18) */
.pp-deep .deep-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 1.2rem; }
.deep-card { display: grid; gap: .35rem; align-content: start; padding: 1.2rem 1.25rem; border: 1px solid var(--line); border-radius: 16px;
  background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.deep-card:hover { border-color: var(--accent); box-shadow: 0 10px 26px rgba(37, 99, 235, .14); transform: translateY(-2px); }
.deep-k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.deep-card strong { font: 700 1.12rem/1.3 var(--f-display); }
.deep-d { font-size: .92rem; color: var(--muted); }
.deep-open { margin-top: .5rem; justify-self: start; font-size: .88rem; font-weight: 700; color: #fff; background: var(--accent);
  padding: .45rem .9rem; border-radius: 999px; }
.pp-section.is-deep { display: none; }
.pp-section.is-deep:target { display: block; scroll-margin-top: 110px; animation: deep-in .2s ease; }
@keyframes deep-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.deep-close { display: inline-flex; margin: 0 0 1.2rem; font-weight: 700; color: var(--accent); text-decoration: none;
  padding: .45rem .9rem; border: 1px solid #c7d7fe; border-radius: 999px; background: #eef3ff; }
.deep-card:has(+ .deep-card) { }
@media print { .pp-section.is-deep { display: block !important; } .deep-close, .pp-deep { display: none !important; } }
.deep-card { grid-template-rows: auto auto 1fr auto; }
.deep-open { align-self: end; }

/* "Questions for our call": the owner's open facts in one calm card (2026-10-18) */
.pp-questions { padding-top: clamp(1.6rem, 3vw, 2.4rem); padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.oq-card { border: 1px solid #f1d38a; background: #fffbef; border-radius: 18px; padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.9rem); max-width: 860px; }
.oq-head { display: flex; gap: .9rem; align-items: flex-start; }
.oq-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #f5b82e; color: #3d2a00; font-weight: 800; font-size: 1.2rem; }
.oq-head h2 { font-size: clamp(1.15rem, 2.1vw, 1.35rem); margin: 0 0 .2rem; }
.oq-head p { margin: 0; color: #6b5413; font-size: .95rem; }
.oq-list { margin: 1rem 0 0; padding-left: 1.3rem; display: grid; gap: .55rem; }
.oq-list li { line-height: 1.5; }
/* real calls from clients' Google profiles, above the AI-impression cards (2026-10-18) */
.call-proof { margin: 0 0 1.4rem; }
.call-proof-lead { font-size: .95rem; color: var(--muted); margin: 0 0 .7rem; }
.call-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.call-card { display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: #fff; border: 1px solid #9fd8b4; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.call-card .prev-kind { color: #15803d; }
.call-card strong { font: 700 1.12rem/1.3 var(--f-display); color: #0b1f14; }

/* the prospect's own pages under the results: two buttons, not cards mixed in with other clients' numbers */
.proof-own { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(22, 101, 52, .14); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.proof-own-k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #64748b); }
.proof-own-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.proof-btn { background: #fff; padding: .7rem 1.2rem; }
.proof-btn:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) { .proof-own-btns, .proof-btn { width: 100%; } }

/* folding on phones (data-m-fold, see proposal.js): a summary that looks like the old heading on a computer and becomes a
   tap row with a chevron on a phone */
.plan-incl > summary, details.compare > summary, details.invest-note > summary { list-style: none; }
.plan-incl > summary::-webkit-details-marker, details.compare > summary::-webkit-details-marker, details.invest-note > summary::-webkit-details-marker { display: none; }
details.compare > summary h3, details.invest-note > summary h4 { margin: 0; }
details.compare > summary { margin-bottom: .6rem; }
details.invest-note > summary { margin-bottom: .4rem; }
@media (min-width: 721px) { .plan-incl > summary, details.compare > summary, details.invest-note > summary { pointer-events: none; } }
.plan-incl:not([data-m-fold]) > summary { pointer-events: none; } /* the recommended plan: a heading, never folds */
@media (max-width: 720px) {
  details[data-m-fold] > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 44px; }
  details[data-m-fold] > summary::after { content: '\25BE'; color: var(--accent); font-size: 1.05rem; line-height: 1; transition: transform .2s ease; }
  details[data-m-fold][open] > summary::after { transform: rotate(180deg); }
  details[data-m-fold]:not([open]) > summary { margin-bottom: 0; }
  .plan-col:not(.is-pick) .plan-col-cta { margin-bottom: .6rem; }
  .yes-faq summary { display: flex; align-items: center; min-height: 44px; padding: .2rem 0; }
}

/* phones: scorecard tables as cards (proposal.js adds is-stacked and the data-l labels) */
@media (max-width: 720px) {
  table.data-table.is-stacked, table.data-table.is-stacked tbody, table.data-table.is-stacked tr, table.data-table.is-stacked td { display: block; width: 100%; }
  table.data-table.is-stacked { min-width: 0; }
  table.data-table.is-stacked thead { display: none; }
  table.data-table.is-stacked tr { border: 1px solid var(--line); border-radius: 12px; padding: .65rem .85rem; margin: 0 0 .6rem; background: #fff; }
  table.data-table.is-stacked td { border: 0; padding: .18rem 0; text-align: left; white-space: normal; }
  table.data-table.is-stacked td:first-child { font-weight: 700; font-size: 1rem; color: var(--ink); padding-bottom: .3rem; }
  table.data-table.is-stacked td[data-l]:not(:first-child)::before { content: attr(data-l); display: block; font-size: .7rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .05rem; }
  .table-scroll:has(> table.is-stacked) { overflow: visible; }
  table.data-table.is-stacked td.ba-arrow { display: none; }
}