/* Sales Focus pages (focus/sales/ and its plan/, spotlight/, brief/ pages): one stylesheet so the four don't drift.
   Look: the CCA site as built 10/5 (apps/cca-site/drafts/tokens.css + site.css). Nothing in the shared
   brewerybrain.com chassis changes. */
:root {
  --ink: #101820;
  --deep: #0E3341;
  --teal: #1F617A;
  --teal-hover: #174d62;
  --mid: #1F7F94;
  --sea: #5BB8A0;
  --sage-logo: #C8E0D0;
  --sage: #E3F0E9;
  --pale: #E4EFF3;
  --white: #FFFFFF;
  --malt: #E07830;
  --malt-hover: #C8661F;
  --malt-ink: #A8521A;
  --malt-tint: #FDF1E7;
  --line: #CFDCE2;
  --rule: #B5C7CF;
  --rule-sage: #A9C2B4;
  --foot-text: #B9CFD8;
  --muted: #4A5A62;
  --on-tint: #25343B;
  --on-dark: #FFFFFF;
  --on-dark-soft: #DCEAF0;
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --body: 'Public Sans', 'Segoe UI', sans-serif;
  --stretch: 87.5%;
  --wrap: 1120px;
  --r: 2px;
  --fs-small: 15px;
  --fs-body: 18px;
  --fs-lede: 20px;
  --fs-title: 24px;
  --space-section: 92px;
  --space-section-phone: 64px;
  --logo-gradient: linear-gradient(90deg, var(--teal), var(--mid) 35%, var(--sea) 70%, var(--sage-logo));
  --shadow-card: 0 1px 2px rgba(16,24,32,.06), 0 12px 32px rgba(16,24,32,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { max-width: 100%; display: block; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.band-deep :focus-visible, .band-teal :focus-visible, header.site :focus-visible, footer :focus-visible { outline-color: var(--white); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.measure { max-width: 700px; }
h1, h2, h3 { font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; margin: 0; line-height: 1.12; letter-spacing: 0; text-wrap: pretty; }
h1 { font-size: clamp(34px, 4.4vw, 54px); max-width: 30ch; }
.hero h1 { font-size: clamp(34px, 3.6vw, 46px); max-width: none; }
h2 { font-size: clamp(28px, 3.6vw, 44px); max-width: 40ch; }
h3 { font-size: 22px; font-weight: 600; }
p { margin: 0 0 1em; }
p, li, strong, figcaption, summary { text-wrap: pretty; }
section { padding: var(--space-section) 0; }
.lede { font-size: var(--fs-lede); color: var(--muted); max-width: 680px; margin-top: 20px; }
@media (max-width: 720px) { body { font-size: 17px; } section { padding: var(--space-section-phone) 0; } .wrap { padding: 0 16px; } .lede { font-size: 18px; } }

/* section bands, as on the CCA site */
.band-deep { background: var(--deep); color: var(--on-dark); }
.band-teal { background: var(--teal); color: var(--on-dark); }
.band-sage { background: var(--sage); }
.band-pale { background: var(--pale); }
.band-deep .lede, .band-teal .lede { color: var(--on-dark-soft); }
.band-sage .lede, .band-pale .lede { color: var(--on-tint); }

/* buttons: square, solid */
.btn { display: inline-block; font-family: var(--body); font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; padding: 16px 26px; border-radius: var(--r); border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.btn-malt { background: var(--malt); color: var(--ink); }
.btn-malt:hover { background: var(--malt-hover); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-line { border-color: currentColor; color: inherit; }
.btn-line:hover { background: rgba(255,255,255,.12); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.arrow { display: inline-block; font-weight: 700; text-decoration: none; padding: 10px 0 6px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat; }
.arrow:hover { color: var(--teal-hover); }

/* header: lockup + one button, no nav (unlinked page) */
header.site { position: sticky; top: 0; z-index: 10; background: var(--deep); color: var(--on-dark); border-bottom: 1px solid rgba(255,255,255,.1); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.lockup { font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 22px; color: var(--white); line-height: 1.1; }
.lockup small { display: block; font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--foot-text); }
header.site .btn { padding: 12px 16px; font-size: 15px; white-space: nowrap; }
@media (max-width: 560px) { header.site .wrap { height: 60px; } .lockup { font-size: 19px; } header.site .btn { padding: 11px 12px; font-size: 14px; } }

/* hero: the promise on the left, a rep's Monday on the right */
.hero { padding: 84px 0 96px; border-bottom: 8px solid; border-image: var(--logo-gradient) 1; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 56px; align-items: center; }
.hero h1, .hero .lede, .hero .cta-row { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero .lede { animation-delay: .08s; } .hero .cta-row { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero h1, .hero .lede, .hero .cta-row { animation: none; } }
.hero .spot { box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 28px 60px rgba(0,0,0,.38); }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero .spot { max-width: 560px; } }
@media (max-width: 720px) { .hero { padding: 40px 0 48px; } }
/* phones: the sample Spotlight sits right under the lede, the buttons after it, so it's on the first screen */
@media (max-width: 720px) { .hero-grid { gap: 0; } .hero-copy { display: contents; } .hero .lede { margin-bottom: 0; } .hero .spot { order: 3; margin-top: 24px; } .hero .cta-row { order: 4; margin-top: 24px; } }

/* a Spotlight excerpt: typeset lines from the demo's Spotlight (sample brewery, sample data) */
.spot { margin: 0; background: var(--white); color: var(--ink); border-radius: var(--r); font-size: 16px; line-height: 1.5; border-top: 6px solid var(--teal); }
.spot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 16px 22px 12px; border-bottom: 1px solid var(--line); }
.spot-top b { white-space: nowrap; font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 18px; }
.spot-top span { font-size: 14px; color: var(--muted); white-space: nowrap; }
.spot-hi { padding: 16px 22px 4px; margin: 0; font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: 21px; line-height: 1.25; }
.spot-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px 22px; border-top: 1px solid #E6EEF1; }
.spot-row:first-of-type { border-top: 0; }
.spot-row .k { font-size: 13px; font-weight: 700; color: var(--teal); padding-top: 2px; }
.spot-row .v { margin: 0; }
.spot-row.go { background: var(--malt-tint); border-left: 4px solid var(--malt); padding-left: 18px; }
.spot-row.go .k { color: var(--malt-ink); }
.spot-row .tag { font-weight: 700; color: var(--malt-ink); }
.spot-foot { padding: 10px 22px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
/* the hero card opens the leader demo: one link in the foot, stretched over the whole card (10/7, final board fix 2) */
.hero .spot { position: relative; transition: transform .15s; }
.spot-link { display: block; margin-top: 6px; padding: 6px 0 2px; font-size: 16px; font-weight: 600; color: var(--teal); }
.spot-link::after { content: ""; position: absolute; inset: 0; }
.spot-link:focus-visible { outline: 0; }
.hero .spot:focus-within { outline: 3px solid var(--white); outline-offset: 4px; }
.hero .spot:hover .spot-link { text-decoration-thickness: 2px; color: var(--teal-hover); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .hero .spot:hover { transform: translateY(-2px); } }
@media (max-width: 480px) { .spot-row { grid-template-columns: 1fr; gap: 2px; } .spot-top { flex-wrap: wrap; } .spot-hi { font-size: 19px; } }

/* problem: heading holds on the left while the list runs on the right */
.problem-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.problem-grid .head { position: sticky; top: 108px; }
.pain-list { list-style: none; padding: 0; margin: 0; }
.pain-list li { padding: 20px 0; border-top: 2px solid var(--ink); }
.pain-list strong { display: block; font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: var(--fs-title); line-height: 1.25; margin-bottom: 6px; }
.pain-list span { color: var(--muted); }
/* the noise: a slice of one rep's depletions, the one row worth a visit picked out, under the pain list (10/7: the "industry is tough" block beside it is cut) */
.noise { margin: 56px 0 0; }
.noise table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; color: #6F818A; }
.noise thead th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 6px 8px; border-bottom: 2px solid var(--ink); }
.noise thead th[colspan] { text-align: right; }
.noise td, .noise tbody th { padding: 5px 6px; border-bottom: 1px solid #EEF3F5; text-align: right; white-space: nowrap; }
.noise tbody th { text-align: left; font-weight: 400; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.noise td.c, .noise th.c { text-align: left; }
.noise tbody tr:not(.hit) { opacity: .8; }
.noise tbody tr:nth-child(n+9):not(.hit) { opacity: .55; }
.noise tbody tr:nth-child(n+12):not(.hit) { opacity: .3; }
.noise tr.hit th, .noise tr.hit td { color: var(--ink); font-weight: 700; background: var(--malt-tint); border-bottom-color: #F3D2B8; }
.noise tr.hit th { box-shadow: inset 4px 0 0 var(--malt); padding-left: 12px; }
.noise tr.hit td.gap { color: var(--malt-ink); }
.hit-note { margin: 16px 0 0; padding-left: 12px; border-left: 4px solid var(--malt); font-size: 17px; color: var(--ink); }
.noise figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
@media (max-width: 560px) { .noise td.c, .noise th.c { display: none; } .noise table { font-size: 13px; } .noise td, .noise tbody th { padding: 5px 3px; } .noise tbody th { max-width: 132px; } .noise tr.hit th { padding-left: 8px; } }
@media (max-width: 880px) { .problem-grid { grid-template-columns: 1fr; gap: 28px; } .problem-grid .head { position: static; } .noise { margin-top: 40px; } }

/* what changes: deep band, four jobs */
.jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 56px; }
.jobs > div { padding-top: 22px; border-top: 4px solid var(--sea); }
.jobs > div:nth-child(1) { border-top-color: var(--sage-logo); }
.jobs > div:nth-child(4) { border-top-color: var(--malt); }
.jobs h3 { color: var(--white); font-size: var(--fs-title); margin-bottom: 12px; }
.jobs p { color: var(--on-dark-soft); font-size: 17px; margin: 0; }
.jobs .in { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); font-size: 15px; }
.jobs .in b { color: var(--white); font-weight: 600; }
.jobs .in + .in { margin-top: 6px; padding-top: 0; border-top: 0; }
.jobs .in a { color: var(--on-dark-soft); text-decoration-color: rgba(255,255,255,.45); }
.jobs .in a:hover { color: var(--white); text-decoration-color: currentColor; }
.changes .close { margin: 64px 0 0; font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.3; max-width: 860px; color: var(--white); }
@media (max-width: 960px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; } }
@media (max-width: 560px) { .jobs { grid-template-columns: 1fr; gap: 32px; } }

/* guide: the CCA about box, on sage */
.about-box { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; border-top: 6px solid var(--ink); padding-top: 40px; align-items: start; }
.photo { margin: 0; aspect-ratio: 4 / 5; background: var(--deep); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.about-box h2 { margin-bottom: 18px; }
.about-box p { color: var(--on-tint); }
.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule-sage); }
.creds b { display: block; font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--teal); }
.creds span { font-size: 16px; color: var(--on-tint); }
@media (max-width: 720px) { .about-box { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; } .photo { max-width: 150px; } .creds b { font-size: 26px; } }

/* the week: the video on white (Jeremy 10/5: a dark poster on a dark band doesn't stand out), then each reader */
.stage { margin: 40px 0 0; }
.frame16 { position: relative; aspect-ratio: 16 / 9; background: var(--deep); overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 18px 44px rgba(0,0,0,.16); }
.frame16 iframe, .poster, .poster img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.poster { display: block; cursor: pointer; }
.poster img { object-fit: cover; transition: opacity .2s; }
.poster:hover img { opacity: .9; }
.play { position: absolute; right: 6%; bottom: 9%; width: 96px; height: 96px; background: var(--white); display: grid; place-items: center; transition: background .15s; }
.play::before { content: ""; margin-left: 8px; border-style: solid; border-width: 18px 0 18px 30px; border-color: transparent transparent transparent var(--deep); }
.poster:hover .play { background: var(--malt); }
.poster:focus-visible { outline: 4px solid var(--malt); outline-offset: -4px; }
.stage figcaption { margin-top: 14px; font-size: var(--fs-small); color: var(--muted); max-width: 760px; }
@media (max-width: 820px) { .play { width: 64px; height: 64px; right: 5%; bottom: 8%; } .play::before { margin-left: 6px; border-width: 12px 0 12px 20px; } }

.readers { margin-top: 80px; display: grid; gap: 0; }
.reader { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; padding: 48px 0; border-top: 2px solid var(--ink); }
.reader:last-child { padding-bottom: 0; }
.reader h3 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.reader .who { font-weight: 700; color: var(--teal); margin-bottom: 6px; font-size: 16px; }
.reader p:last-child { margin-bottom: 0; }
.reader .spot { border: 1px solid var(--line); border-top: 6px solid var(--teal); box-shadow: var(--shadow-card); }
.reader:nth-child(2) .spot { border-top-color: var(--mid); }
.reader:nth-child(3) .spot { border-top-color: var(--sea); }
.watch { margin: 18px 0 0; }
.watch span { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 880px) { .reader { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; } .readers { margin-top: 56px; } .reader h3 { font-size: 24px; } }

/* the pieces (the Plan, the Spotlight, the Brief): one section pattern, so a later piece drops in the same way.
   Each is a section.piece: the rail (where it sits among the pieces; a later piece adds one item), heading, then either .piece-top (copy beside the video) + .frames + .piece-next,
   or (the week) the video full width and a reader per level. */
/* a number the section promises: big figure, plain label (color on the call-out only) */
.gains { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 24px 40px; margin-top: 28px; }
.gains > div, .gain { padding-left: 18px; border-left: 4px solid var(--malt); }
.gains b, .gain b { display: block; font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--ink); }
.gains span, .gain span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--on-tint); }
.gain { margin-top: 28px; }
@media (max-width: 560px) { .gains { grid-template-columns: 1fr; gap: 20px; } .gains b, .gain b { font-size: 30px; } }
/* the cadence line: one sentence over the three pieces, so they read as one set (a later piece adds a clause and a rail item) */
.set-intro { margin: 0 0 56px; padding-bottom: 40px; border-bottom: 2px solid var(--ink); }
.set-intro .cadence { margin: 0; font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: clamp(24px, 2.7vw, 34px); line-height: 1.28; max-width: 980px; }
.set-intro .same { margin: 14px 0 0; font-size: var(--fs-lede); color: var(--muted); }
@media (max-width: 720px) { .set-intro { margin-bottom: 40px; padding-bottom: 28px; } .set-intro .same { font-size: 18px; } }
.rail { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rail li { display: flex; align-items: center; }
.rail li + li::before { content: ""; width: 28px; height: 1px; margin: 0 12px; background: var(--rule); }
.rail a { display: inline-block; padding: 6px 0; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; }
.rail a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.rail a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.band-pale .rail a { color: var(--on-tint); }
.band-pale .rail a[aria-current] { color: var(--ink); }
@media (max-width: 560px) { .rail { gap: 0 18px; font-size: 13px; letter-spacing: .06em; } .rail li + li::before { display: none; } }
.zoom { display: block; cursor: zoom-in; }
.zoom:hover img { opacity: .92; }
.zoom:focus-visible { outline-offset: -3px; }
dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: min(460px, 92vw); max-height: calc(100vh - 128px); overflow: visible; }
dialog.lightbox::backdrop { background: rgba(16,24,32,.78); }
.lightbox .box { max-height: calc(100vh - 128px); overflow-y: auto; background: #FAFAF9; box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.lightbox img { width: 100%; height: auto; }
.lightbox p { margin: 0; padding: 14px 18px 18px; background: var(--white); font-size: var(--fs-small); color: var(--muted); }
.lightbox button { position: absolute; top: -52px; right: 0; padding: 10px 14px; border: 0; border-radius: var(--r); background: var(--white); color: var(--ink); font: 700 15px/1 var(--body); cursor: pointer; }
.lightbox button:hover { background: var(--malt); }
.piece-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: start; margin-top: 36px; }
.piece-copy { max-width: 700px; }
.piece-copy p:last-child { margin-bottom: 0; }
.piece-copy ul { list-style: none; margin: -4px 0 1em; padding: 0; }
.piece-copy li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line); line-height: 1.45; }
.piece-copy li:last-child { border-bottom: 1px solid var(--line); }
.piece-copy li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; background: var(--ink); }
.piece-top .stage { margin: 4px 0 0; position: sticky; top: 100px; }
.frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 72px 0 0; padding: 0; list-style: none; counter-reset: frame; align-items: start; }
/* each frame: its caption first, then the screen; subgrid keeps the four captions and the four screens on shared lines */
.frames li { margin: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 18px; }
.shot { margin: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 18px; }
.shot .screen { grid-row: 2; align-self: start; background: #FAFAF9; border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.shot img { width: 100%; height: auto; }
.shot figcaption { grid-row: 1; padding-top: 14px; border-top: 2px solid var(--ink); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.shot figcaption::before { counter-increment: frame; content: counter(frame); display: block; margin-bottom: 2px; font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--ink); }
.piece-next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; margin-top: 56px; padding-top: 28px; border-top: 2px solid var(--ink); }
.piece-next .watch { margin: 0; max-width: 440px; }
.piece-next .ask { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; font-weight: 600; }
@media (max-width: 960px) { .piece-top { grid-template-columns: 1fr; gap: 36px; } .piece-top .stage { position: static; } .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 56px; } }
/* phones: the four screens become a swipe row, each about one screen wide */
@media (max-width: 600px) {
  .frames { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 44px -16px 0; padding: 4px 16px 20px; scroll-padding: 0 16px; }
  .frames li { display: block; flex: 0 0 80%; scroll-snap-align: start; }
  .shot { display: flex; flex-direction: column; gap: 14px; }
  .shot figcaption { order: -1; }
  .piece-next { margin-top: 36px; }
}

/* offers: pale band; the first step stands forward */
.offer-list { margin-top: 48px; }
.offer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; padding: 32px 0; border-top: 2px solid var(--ink); align-items: start; }
.offer.first { background: var(--white); border: 2px solid var(--ink); border-left: 10px solid var(--malt); padding: 32px 34px; margin-bottom: 24px; }
.offer.first + .offer { border-top: 0; padding-top: 16px; }
.offer h3 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.offer .when { font-weight: 700; color: var(--teal); font-size: 16px; margin-bottom: 12px; }
.offer p { color: var(--on-tint); }
.offer.first p { color: var(--muted); }
.offer p:last-child { margin-bottom: 0; }
.offer .side { font-size: 16px; }
.offer .side h4 { margin: 0 0 8px; font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--muted); }
.offer .side ul { list-style: none; margin: 0; padding: 0; }
.offer .side li { padding: 10px 0; border-top: 1px solid var(--line); font-weight: 600; line-height: 1.4; }
.offer .side li:last-child { border-bottom: 1px solid var(--line); }
.offer .side .arrow { font-size: 16px; }
.offers .thread { margin: 0; padding-top: 28px; border-top: 2px solid var(--ink); color: var(--on-tint); }
.offers .thread span { display: block; max-width: 760px; }
.offer .side .sub { margin: 4px 0 0; font-size: var(--fs-small); color: var(--on-tint); }
@media (max-width: 860px) { .offer { grid-template-columns: 1fr; gap: 18px; } .offer.first { padding: 24px 20px; border-left-width: 8px; } }

/* questions */
.faq-list { margin-top: 36px; border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: 22px; line-height: 1.3; }
.faq-list summary:hover { color: var(--teal); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--body); font-weight: 400; font-size: 30px; color: var(--teal); }
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list details p { margin: 0; padding-bottom: 22px; max-width: 720px; color: var(--on-tint); }
.faq-list details p + p { margin-top: -10px; }
@media (max-width: 720px) { .faq-list summary { font-size: 20px; } }

/* closing band */
.start { border-top: 8px solid; border-image: var(--logo-gradient) 1; }
.start p { max-width: 700px; color: var(--on-dark-soft); }
.start .mail { margin-top: 22px; font-size: 16px; }
.start .mail a { color: var(--white); display: inline-block; padding: 10px 0; }

footer { background: var(--ink); color: var(--foot-text); padding: 56px 0 40px; font-size: var(--fs-small); }
footer .lockup { margin-bottom: 18px; }
footer p { max-width: 600px; }
footer a { color: var(--white); display: inline-block; padding: 10px 0; }
footer a:hover { color: var(--sage-logo); }

/* the pieces as one system (main page): cadence line, the lead video, then one card per piece.
   Each piece keeps its own colour wherever it sits in the row (Plan teal, Spotlight mid, Brief sea), same as the strip links.
   The row takes any number of cards side by side (a fourth piece is one more article), stacked on phones. */
.system .set-intro { margin-bottom: 48px; }
.lead-video { margin: 0 0 56px; }
/* the data foundation: first thing under the cadence line, before the video (ruling 3, 10/7) */
.foundation { margin: 0 0 48px; padding: 26px 28px; background: var(--pale); border-left: 6px solid var(--teal); }
.foundation h3 { font-size: var(--fs-title); line-height: 1.22; margin-bottom: 10px; }
.foundation p { margin: 0; max-width: 860px; color: var(--on-tint); }
@media (max-width: 720px) { .foundation { margin-bottom: 32px; padding: 20px 18px; } }
/* what changes: the leader version's list, at the foot of the pieces, then the one-line rep cascade (ruling 6) */
.what-changes { margin: 48px 0 0; padding-top: 28px; border-top: 2px solid var(--ink); scroll-margin-top: 96px; }
.what-changes h3 { font-size: var(--fs-title); line-height: 1.22; margin-bottom: 14px; }
.what-changes ul { margin: 0; padding-left: 1.2em; max-width: 860px; }
.what-changes li { margin: 0 0 10px; color: var(--on-tint); }
.what-changes li::marker { color: var(--teal); }
.what-changes .cascade { margin: 18px 0 0; max-width: 860px; font-weight: 600; color: var(--ink); }
@media (max-width: 720px) { .what-changes { margin-top: 36px; padding-top: 22px; } }
.pieces { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.piece-card { display: flex; flex-direction: column; padding: 26px 26px 22px; background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--teal); box-shadow: var(--shadow-card); scroll-margin-top: 96px; }
.piece-card#week { border-top-color: var(--mid); }
.piece-card#share { border-top-color: var(--sea); }
.piece-card .cad, .piece-link .cad { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.piece-card h3 { font-size: var(--fs-title); line-height: 1.22; margin-bottom: 14px; }
.piece-card > p:not(.cad):not(.card-links):not(.gain) { font-size: 17px; color: var(--on-tint); }
.piece-card .gain { margin: 4px 0 20px; }
.piece-card .gain b { font-size: 28px; }
.piece-card .gain span { font-size: 15px; }
.card-links { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.card-links .demo { display: inline-block; padding: 8px 0; font-size: 16px; font-weight: 600; }
@media (max-width: 900px) { .pieces { grid-auto-flow: row; grid-auto-columns: auto; gap: 24px; } .piece-card { padding: 22px 20px 18px; } }

/* a piece on its own page: back link, the piece's section on white, the other pieces, the closing band */
.piece-solo { padding-top: 48px; }
.piece-solo h1 { font-size: clamp(30px, 3.6vw, 44px); max-width: 40ch; }
.back { margin: 0 0 22px; font-size: 16px; font-weight: 700; }
.back a { display: inline-block; padding: 8px 0; text-decoration: none; }
.back a:hover { text-decoration: underline; }
.others { padding: 56px 0; }
.piece-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
.piece-link { display: flex; flex-direction: column; padding: 22px 24px; background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--teal); color: var(--ink); text-decoration: none; transition: box-shadow .15s; }
.piece-link[href$="/spotlight/"] { border-top-color: var(--mid); }
.piece-link[href$="/brief/"] { border-top-color: var(--sea); }
.piece-link .cad { margin-bottom: 8px; }
.piece-link .ttl { font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 22px; line-height: 1.25; }
.piece-link .go { margin-top: 14px; font-weight: 700; color: var(--teal); }
.piece-link:hover { box-shadow: var(--shadow-card); }
.piece-link:hover .go { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .piece-solo { padding-top: 32px; } .piece-row { grid-auto-flow: row; grid-auto-columns: auto; gap: 16px; } .others { padding: 40px 0; } }

/* ways to start: each offer compact, the rest behind "What it looks like" */
.offer .more summary { list-style: none; cursor: pointer; position: relative; padding: 10px 36px 10px 0; font-weight: 700; color: var(--teal); border-bottom: 1px solid var(--line); }
.offer .more summary::-webkit-details-marker { display: none; }
.offer .more summary::after { content: "+"; position: absolute; right: 4px; top: 2px; font-weight: 400; font-size: 26px; }
.offer .more[open] summary::after { content: "\2013"; }
.offer .more summary:hover { color: var(--teal-hover); }
.offer .more .side { padding-top: 14px; }
.offer .more .side > p:not(.sub) { margin: 0 0 14px; color: var(--on-tint); }
.offer .more .side h4 { margin-top: 4px; }
.offer > div > p:last-child { margin-bottom: 0; }

/* phones (10/7): the system section sits right under the hero, so the hero and the section's intro are tightened
   until the lead video's poster shows on the second screen at 390 */
@media (max-width: 720px) {
  .hero { padding: 32px 0 40px; }
  .hero .lede { margin-top: 14px; }
  .hero .spot { margin-top: 20px; }
  .hero .cta-row { margin-top: 20px; gap: 10px; }
  .system { padding-top: 36px; }
  .system .set-intro { margin-bottom: 20px; padding-bottom: 16px; }
  .system .set-intro .same { margin-top: 10px; font-size: 17px; }
}
@media (max-width: 480px) {
  .hero .spot { font-size: 15px; line-height: 1.45; }
  .hero .spot-top { padding: 12px 18px 10px; }
  .hero .spot-hi { padding: 12px 18px 2px; }
  .hero .spot-row { padding: 9px 18px; }
  .hero .spot-row.go { padding-left: 14px; }
  .hero .spot-foot { padding: 8px 18px 10px; }
}

/* the turn from the pains into the guide (10/7: the four-jobs section was dropped, its closing line kept) */
#problem .turn { margin: 56px 0 0; font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.3; max-width: 860px; color: var(--ink); }

/* 10/7: the outcome line heads the video section (Jeremy's option A); the cadence line reads as its explanation */
.set-intro .promise { margin: 0; font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.22; max-width: 1000px; }
.set-intro p.cadence { margin: 18px 0 0; font-family: var(--body); font-stretch: normal; font-weight: 400; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); max-width: 860px; }
@media (max-width: 720px) { .set-intro p.cadence { font-size: 18px; } }

/* ============================================================
   Home (/) and About (/about/), 10/9: the same system, extended here rather than forked.
   Everything below is scoped to body.home / body.about or to classes only those pages use,
   so the four sales pages render exactly as before.
   ============================================================ */
a.lockup { display: block; text-decoration: none; }
a.lockup:hover, a.lockup:hover small { color: var(--sage-logo); }
.site-nav { display: flex; align-items: center; gap: 6px 26px; }
.site-nav a:not(.btn) { color: var(--on-dark-soft); font-weight: 600; font-size: 16px; text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current] { color: var(--white); border-bottom-color: var(--sea); }
:is(.home, .about) header.site .lockup { white-space: nowrap; }
@media (max-width: 560px) { .site-nav { gap: 14px; } .site-nav a:not(.btn) { font-size: 15px; } }
@media (max-width: 520px) { .site-nav a[href="/about/"] { display: none; } }
@media (max-width: 480px) {
  :is(.home, .about) header.site .lockup small { display: none; }
  :is(.home, .about) header.site .wrap { height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
  .site-nav { gap: 14px; }
  header.site .site-nav .btn { white-space: normal; text-align: center; max-width: 140px; min-height: 44px; padding: 7px 12px; font-size: 14px; line-height: 1.25; }
}
@media (max-width: 359px) { .site-nav a[href="/focus/sales/"] { display: none; } }
@media (min-width: 481px) and (max-width: 560px) { header.site .site-nav .btn { padding-top: 12px; padding-bottom: 12px; } }

/* hero: the promise, then what it connects to (the systems, and what the team knows, feeding one line) */
.home-hero { padding: 96px 0 104px; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 72px; align-items: center; }
.home-hero h1 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.06; max-width: 30ch; }
.home-hero .lede { max-width: 640px; font-size: 21px; }
.feeds { margin: 0; position: relative; padding-right: 30px; animation: rise .7s .24s cubic-bezier(.2,.7,.2,1) both; }
.feeds figcaption { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--foot-text); margin-bottom: 10px; }
.feeds ul { list-style: none; margin: 0; padding: 0; }
.feeds li { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.16); font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--white); }
.feeds li::after { content: ""; flex: 1; min-width: 24px; height: 2px; background: linear-gradient(90deg, rgba(91,184,160,0), var(--sea)); }
.feeds li.knows { color: var(--sage-logo); border-top: 1px dashed rgba(200,224,208,.5); }
.feeds li.knows::after { background: linear-gradient(90deg, rgba(224,120,48,0), var(--malt)); }
.feeds::after { content: ""; position: absolute; right: 0; top: 34px; bottom: 6px; width: 6px; background: linear-gradient(180deg, var(--teal), var(--mid) 35%, var(--sea) 70%, var(--malt)); }
@media (prefers-reduced-motion: reduce) { .feeds { animation: none; } }
@media (max-width: 960px) { .home-hero-grid { grid-template-columns: 1fr; gap: 48px; } .feeds { max-width: 520px; } }
@media (max-width: 720px) {
  .home-hero { padding: 44px 0 48px; }
  .home-hero h1 { font-size: 36px; }
  .home-hero .lede { font-size: 18px; }
  .home .hero-copy { display: block; }
  .home .hero .cta-row { margin-top: 24px; }
  .feeds { padding-right: 0; }
  .feeds::after { display: none; }
  .feeds ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .feeds li { padding: 7px 12px; border: 1px solid rgba(255,255,255,.28); font-size: 16px; }
  .feeds li::after { display: none; }
  .feeds li.knows { border: 1px dashed var(--sage-logo); }
}

/* pains: the sales page's sticky-head list, six items in two columns on wide screens */

/* the three steps: copy on the left, a typeset piece of the demo on the right, one logo color each */
.steps-sec .lede { margin-bottom: 0; }
/* one thread in the logo colors runs down the three steps (each builds on the one before) */
.steps-list { margin-top: 56px; }
.step { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; padding: 8px 0 72px 40px; }
.step:last-child { padding-bottom: 8px; }
.step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--teal), var(--mid)); }
.step.s2::before { background: linear-gradient(180deg, var(--mid), var(--sea)); }
.step.s3::before { background: linear-gradient(180deg, var(--sea), var(--sage-logo)); }
.step::after { content: ""; position: absolute; left: -7px; top: 14px; width: 20px; height: 20px; background: var(--white); border: 6px solid var(--teal); box-sizing: border-box; }
.step.s2::after { border-color: var(--mid); }
.step.s3::after { border-color: var(--sea); }
.step h3 { font-size: 30px; font-weight: 700; line-height: 1.15; margin-bottom: 14px; }
.step-copy p { color: var(--on-tint); font-size: var(--fs-lede); max-width: 520px; margin: 0; }
.demo-piece { margin: 0; }
.piece-body { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); padding: 24px 26px; font-variant-numeric: tabular-nums; }
.demo-piece figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); }
.piece-k { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.piece-k.later { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.fig-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.fig { font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 40px; line-height: 1.05; color: var(--malt-ink); }
.fig.big { font-size: 52px; color: var(--ink); }
.fig-row span { font-size: 17px; color: var(--on-tint); }
.fig-row .down { font-weight: 700; color: var(--malt-ink); }
.note { margin: 18px 0 0; padding: 14px 18px; background: var(--sage); border-left: 4px solid var(--sea); }
.note p { margin: 0; font-size: 17px; line-height: 1.5; }
.note .note-by { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.parts { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 16px; }
.parts caption { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.parts th, .parts td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: baseline; }
.parts th { font-weight: 700; padding-left: 0; }
.parts td:nth-child(2) { white-space: nowrap; font-weight: 700; }
.parts .say { color: var(--muted); font-size: 15px; }
.parts tr.hit th, .parts tr.hit td { background: var(--malt-tint); }
.parts tr.hit th { box-shadow: inset 4px 0 0 var(--malt); padding-left: 12px; }
.parts tr.hit td:nth-child(2) { color: var(--malt-ink); }
.parts td.up { color: var(--teal); }
.parts.check { margin-top: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.act { margin: 0 0 12px; font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 24px; line-height: 1.2; }
.act-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.act-meta dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.act-meta dd { margin: 0; font-size: 16px; }
.story-video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 64px; padding-top: 48px; border-top: 2px solid var(--ink); }
.story-video figcaption { margin: 0; font-size: var(--fs-lede); color: var(--on-tint); max-width: 440px; }
.story-video figcaption b { display: block; margin-bottom: 8px; font-family: var(--display); font-stretch: var(--stretch); font-size: 28px; line-height: 1.2; color: var(--ink); }
@media (max-width: 960px) { .step { grid-template-columns: 1fr; gap: 24px; padding: 8px 0 56px 32px; } .step:last-child { padding-bottom: 8px; } .story-video { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 560px) {
  .step h3 { font-size: 25px; }
  .step-copy p { font-size: 18px; }
  .piece-body { padding: 18px 16px; }
  .fig { font-size: 34px; } .fig.big { font-size: 42px; }
  .parts tr { display: grid; grid-template-columns: auto 1fr; }
  .parts td:nth-child(2) { text-align: right; }
  .parts td.say { grid-column: 1 / -1; border-top: 0; padding: 0 0 10px; }
  .parts tr.hit td.say { box-shadow: inset 4px 0 0 var(--malt); padding-left: 12px; }
  .story-video figcaption b { font-size: 23px; }
}

/* how it bridges: the statement on deep blue, three inputs, the connections, the live-today line */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 56px; }
.trio > div { padding-top: 20px; border-top: 4px solid var(--sea); }
.trio > div:nth-child(2) { border-top-color: var(--sage-logo); }
.trio > div:nth-child(3) { border-top-color: var(--malt); }
.trio h3 { color: var(--white); font-size: var(--fs-title); margin-bottom: 10px; }
.trio p { color: var(--on-dark-soft); font-size: 17px; margin: 0; }
.conn-head { margin: 72px 0 0; font-size: 14px; font-family: var(--body); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--foot-text); }
.conns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.conns > div { background: var(--deep-2); padding: 22px 22px 24px; }
.conns .src { margin: 0 0 10px; font-family: var(--display); font-stretch: var(--stretch); font-weight: 700; font-size: 22px; color: var(--white); line-height: 1.15; }
.conns .src span { display: block; font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--foot-text); margin-top: 2px; }
.conns p:last-child { margin: 0; font-size: 16px; color: var(--on-dark-soft); }
.bridge .live { margin: 48px 0 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--malt); max-width: 820px; font-size: var(--fs-lede); color: var(--white); }
.bridge .live p { margin: 0; }
.bridge .live p + p { margin-top: 12px; }
.bridge .live b { color: var(--malt); }
/* v2: each step opens on the problem it answers */
.step .pain { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 520px; }
.step .pain b { color: var(--malt-ink); }
@media (max-width: 960px) { .trio { grid-template-columns: 1fr; gap: 28px; } .conns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .conns { grid-template-columns: 1fr; } .bridge .live { font-size: 18px; } .conn-head { margin-top: 56px; } }

/* see it working: the video beside Sam's Spotlight, then the three ways in */
.see-video { margin: 44px 0 0; }
.see-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 64px; padding-top: 48px; border-top: 2px solid var(--ink); }
.see-spot { border: 1px solid var(--line); border-top: 6px solid var(--teal); box-shadow: var(--shadow-card); }
.see-side { align-self: start; }
.see-links { list-style: none; margin: 0; padding: 0; }
.see-links li { border-top: 1px solid var(--line); }
.see-links li:last-child { border-bottom: 1px solid var(--line); }
.see-links a { display: block; padding: 16px 28px 16px 0; position: relative; font-weight: 700; font-size: 18px; line-height: 1.35; text-decoration: none; color: var(--ink); }
.see-links a span { display: block; margin-top: 2px; font-weight: 400; font-size: 15px; color: var(--muted); }
.see-links a::after { content: "\2192"; position: absolute; right: 2px; top: 15px; color: var(--teal); font-size: 20px; transition: transform .15s; }
.see-links a:hover { color: var(--teal); }
.see-links a:hover::after { transform: translateX(3px); }
.see .next { margin: 32px 0 0; padding-left: 16px; border-left: 4px solid var(--sea); font-family: var(--display); font-stretch: var(--stretch); font-weight: 600; font-size: 22px; line-height: 1.3; }
@media (max-width: 960px) { .see-grid { grid-template-columns: 1fr; gap: 40px; } .see-spot { max-width: 560px; } }
@media (max-width: 560px) { .see-grid { margin-top: 48px; padding-top: 36px; } .see .next { font-size: 20px; } }

/* ways to start, and who builds it */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 40px; max-width: 980px; }
.ways > div { padding-top: 18px; border-top: 4px solid var(--sea); }
.ways > div:first-child { border-top-color: var(--malt); }
.ways h3 { color: var(--white); font-size: var(--fs-title); margin-bottom: 8px; }
.ways p { margin: 0; }
.built { display: flex; align-items: center; gap: 22px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.2); max-width: 820px; }
.built img { width: 84px; height: 84px; object-fit: cover; object-position: 50% 18%; flex: none; }
.built p { margin: 0; font-size: 17px; }
.built a, .home-start .mail a { color: var(--white); }
.built a:hover, .home-start .mail a:hover { color: var(--sage-logo); }
@media (max-width: 720px) { .ways { grid-template-columns: 1fr; } .built { align-items: flex-start; } .built img { width: 64px; height: 64px; } }

footer .foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; max-width: none; }

/* about: two sentences beside the headshot */
.about-page { padding: 88px 0 96px; }
.about-page .about-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.about-page .photo { max-width: 220px; }
.about-page h1 { font-size: clamp(32px, 3.8vw, 48px); margin-bottom: 20px; }
.about-page p { font-size: var(--fs-lede); color: var(--on-tint); max-width: 680px; }
@media (max-width: 720px) { .about-page { padding: 48px 0 64px; } .about-page .about-grid { grid-template-columns: 1fr; gap: 24px; } .about-page .photo { max-width: 140px; } }

/* 10/9 board fixes: the forecast story link under the margin video; the setup line on the ask */
.story-video .story-next { display: table; margin-top: 18px; font-size: 18px; }
.home-start .setup { margin: 28px 0 0; max-width: 760px; font-size: 17px; }

/* 10/9 pre-ship pass */
:root { --deep-2: #12404F; }  /* the connection panels: deep blue, one step lighter */
.skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 10px 14px; background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 10px; }
@media (min-width: 561px) { .parts.check th { white-space: nowrap; } }
@media (max-width: 480px) { .spot-top b, .spot-top span { white-space: normal; } }