:root {
  color-scheme: light;
  --paper: #f5f2e9;
  --sheet: #fcfaf5;
  --ink: #263a30;
  --muted: #555d53;
  --accent: #31573f;
  --line: #cacdbf;
  --tint: #e9ecdf;
  --night: #17251e;
  --night-muted: #c5cdbf;
  --night-accent: #b8d4a0;
  --serif: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Golden Ratio type scale: 16px x PHI^n */
  --t0: 1rem;
  --t1: 1.618034rem;
  --t2: 2.618034rem;
  --t3: 4.236068rem;

  /* Golden Ratio spacers: s6 = 1.5rem, s_n = 1.5 x PHI^(n-6) rem */
  --s3: 0.354102rem;
  --s4: 0.572949rem;
  --s5: 0.927051rem;
  --s6: 1.5rem;
  --s7: 2.427051rem;
  --s8: 3.927051rem;
  --s9: 6.354102rem;

  /* Golden Ratio line-heights (only these four, plus 1 for numeral boxes) */
  --lh-tight: 1.145898;
  --lh-snug: 1.236064;
  --lh-read: 1.381966;
  --lh-loose: 1.618034;

  /* Golden Grid column widths */
  --grp-5: 61.803398875%;
  --grp-4: 38.196601125%;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*, ::before, ::after { box-sizing: border-box; }
html { scroll-padding-top: var(--s7); }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--t0)/var(--lh-loose) var(--sans); -webkit-font-smoothing: antialiased; }
/* Film grain over everything; text contrast was checked with it on */
body::after { content: ""; position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .05; background-image: var(--grain); }
::selection { background: #d3ddc7; color: var(--ink); }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
p, li, summary { text-wrap: pretty; }
h1 { font-size: var(--t2); line-height: var(--lh-tight); letter-spacing: -.04em; }
h2 { font-size: var(--t1); line-height: var(--lh-snug); letter-spacing: -.02em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: var(--s3); }

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--s6); }
.skip-link { position: absolute; z-index: 20; top: 0; left: var(--s6); padding: var(--s4) var(--s5); background: var(--sheet); transform: translateY(-150%); }
.skip-link:focus { top: var(--s4); transform: none; }

/* Header: the brand, the menu (Home, Team headaches, How it works, About, Price) and the Book button.
   Under 48em the menu folds behind the Menu button. */
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s6); padding-block: var(--s6); border-bottom: 1px solid var(--line); }
.brand { margin-right: auto; font: var(--t1)/var(--lh-tight) var(--serif); letter-spacing: -.04em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand-name { display: block; }
.brand-by { display: block; margin-top: var(--s3); font: .6875rem/var(--lh-snug) var(--sans); letter-spacing: 0; color: var(--muted); }
/* True Frontier logo in the "powered by" line: 12px tall (.75rem), Kevin 2026-10-20. */
.tf-logo { display: inline-block; height: .75rem; width: auto; margin-left: .2em; vertical-align: -.15em; }
.nav ul, .site-footer ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); list-style: none; padding: 0; }
.nav a, .site-footer a, .nav-call { display: inline-block; text-decoration: none; white-space: nowrap; }
.nav a:hover, .site-footer a:hover { text-decoration: underline; }
/* The page you're on: a thicker underline in the accent green */
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.nav-call { padding: var(--s4) var(--s5); border: 1px solid var(--accent); }
.nav-call span[aria-hidden] { margin-left: var(--s4); }
/* The Menu button only shows on phones, and only when JavaScript can open it. Three bars: one line and two shadows. */
.nav-toggle { position: relative; display: none; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); background: var(--sheet); border: 1px solid var(--accent); color: var(--ink); font: 600 var(--t0)/var(--lh-snug) var(--sans); cursor: pointer; }
.nav-toggle::before { content: ""; width: 1rem; height: 2px; background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }
/* Open, the bars become a cross: the line turns one way, and ::after draws a second line turned the other. */
.nav-toggle[aria-expanded="true"]::before { box-shadow: none; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { content: ""; position: absolute; width: 1rem; height: 2px; background: currentColor; transform: rotate(-45deg); }

/* Phones: the brand, the Book button and the Menu button share the first line. The menu opens under them, full width. */
@media (max-width: 47.99em) {
  .site-header { gap: var(--s4); }
  .brand { font-size: var(--t1); }
  .nav-call { order: 1; }
  .nav-toggle { order: 2; }
  .nav { order: 3; flex-basis: 100%; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav-toggle[aria-expanded="false"] ~ .nav { display: none; }
  .js .nav ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); }
  .js .nav li + li { border-top: 1px solid var(--line); }
  .js .nav a { display: block; padding-block: var(--s5); }
}
/* Too narrow for all three at full size: the button reads "Book" and the Menu button shows only its bars.
   Screen readers still hear "Book a call" and "Menu". */
@media (max-width: 34em) {
  .btn-more, .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-call, .nav-toggle { min-height: 2.75rem; }
  .nav-call { display: inline-flex; align-items: center; }
  .nav-call span[aria-hidden] { margin-left: var(--s3); }
}

/* Labels */
.eyebrow, .label { font-size: var(--t0); line-height: var(--lh-snug); font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--accent); }
.label span { margin-right: var(--s4); font-variant-numeric: lining-nums; color: var(--muted); }

/* Button: on hover a darker fill covers it, at once */
.button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: var(--s5) var(--s6); background: var(--accent); color: var(--sheet); font: 600 var(--t0)/var(--lh-snug) var(--sans); text-align: center; text-decoration: none; border: 1px solid var(--accent); }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateX(-101%); }
.button:hover::before, .button:focus-visible::before { transform: none; }

/* Photo credits */
figcaption { font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: var(--lh-snug); color: var(--muted); }
/* A problem photo comes in a <picture> (AVIF or WebP). Neither it nor its <source> adds a box, so the <img> lays out as before. */
picture { display: contents; }
picture source { display: none; }
/* Words only screen readers get, like which problem a "Read more" link opens */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Network portrait */
.network-portrait { flex: 0 0 9rem; }
.collaborators-list { list-style: none; padding: 0; }
.collaborators-list > li + li { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.collaborator-copy { margin-top: var(--s5); }
.collaborator-copy p + p { margin-top: var(--s5); }
/* A supplied photo's plain-text credit, under the person's card. Its file path breaks anywhere on a small phone. */
.collaborator-copy .credit { overflow-wrap: anywhere; }
@media (min-width: 48em) {
  .collaborators-list > li { display: flex; align-items: flex-start; gap: var(--s6); }
  .collaborator-copy { margin-top: 0; }
}
.network-portrait img { display: block; width: 9rem; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.network-portrait figcaption { margin-top: var(--s4); }

/* Top section: dark, with the street photo. Phones and tablets: photo above the text, fading into night. */
.top { background: var(--night); color: var(--paper); }
.top :focus-visible { outline-color: var(--night-accent); }
.top-photo { --ratio: 1.618034; position: relative; }
.top-photo img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: cover; object-position: 50% 60%; }
.top-photo::after { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: var(--ratio); background: linear-gradient(transparent 50%, var(--night)); }
.top-photo figcaption { padding-top: var(--s4); text-align: right; color: var(--night-muted); }
.top-inner { padding-block: var(--s7) var(--s8); }
.top .eyebrow { color: var(--night-accent); }
.top h1 { margin-top: var(--s5); }
.top h1 em { display: block; color: var(--night-accent); }
.top .split { margin-top: var(--s7); }
.lead { font: var(--t0)/var(--lh-loose) var(--serif); color: var(--night-muted); }
.top .button { margin-top: var(--s6); background: var(--night-accent); border-color: var(--night-accent); color: var(--night); }
.top .button::before { background: var(--paper); }
/* The line to the lead problem's page, beside the button: where the facts list used to sit */
.top .side { margin-top: var(--s7); padding-left: var(--s5); border-left: 1px solid var(--night-accent); color: var(--night-muted); line-height: var(--lh-read); }
.top .side a { color: var(--night-accent); }

/* Section rows: head + body */
.row { padding-block: var(--s7); border-top: 1px solid var(--line); }
.price + .row { border-top: 0; }
.row-head h2 { margin-top: var(--s5); }
.row-head > h2:first-child { margin-top: 0; }
.row-body { margin-top: var(--s6); }
.row-body > * + * { margin-top: var(--s6); }
.row-body p, .row-body li { color: var(--muted); }

.pains { list-style: none; padding: 0; }
.pains li { position: relative; padding-left: var(--s6); }
.pains li + li { margin-top: var(--s4); }
.pains li::before { content: ""; position: absolute; left: 0; top: calc(var(--lh-loose) * .5em); width: var(--s4); height: 1px; background: var(--accent); }
.quotes { list-style: none; padding-left: var(--s6); border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; line-height: var(--lh-read); }
.row-body .quotes li { color: var(--ink); }
.quotes li + li { margin-top: var(--s5); }
.after { font: italic var(--t1)/var(--lh-snug) var(--serif); }
.row-body .after { color: var(--ink); }

/* Steps: numeral box s7 + gap s6 = s8 indent */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { position: relative; min-height: var(--s7); padding-left: var(--s8); counter-increment: step; }
.steps li + li { margin-top: var(--s7); }
.steps li::before { content: counter(step); content: counter(step) / ""; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--s7); height: var(--s7); border: 1px solid var(--accent); color: var(--accent); font: var(--t1)/1 var(--serif); font-variant-numeric: lining-nums; }
.steps h3 { font: 600 var(--t0)/var(--lh-snug) var(--sans); color: var(--ink); }
.steps p { margin-top: var(--s4); }
.note { padding: var(--s5) var(--s6); background: var(--tint); border-left: 2px solid var(--accent); }
.row-body .note { color: var(--ink); }

.checks { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.checks li { position: relative; padding: var(--s5) 0 var(--s5) var(--s7); border-bottom: 1px solid var(--line); }
.row-body .checks li { color: var(--ink); }
.row-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.618034; object-fit: cover; background: var(--tint); }
.row-photo figcaption, .portrait figcaption, .intro-photo figcaption, .panel-photo figcaption, .credit { margin-top: var(--s4); }
/* Photo credits ("Photo by Name on Unsplash"): clearly small (11px) and muted, still readable. Name captions keep their size. */
.top-photo figcaption, .row-photo figcaption, .intro-photo figcaption, .panel-photo figcaption, .credit { font-size: .6875rem; font-variant-caps: normal; letter-spacing: .01em; line-height: var(--lh-read); }
.credit { display: block; color: var(--muted); }
#problem .row-photo img { object-position: 15% 50%; }

.checks li::before { content: ""; position: absolute; left: var(--s3); top: calc(var(--s5) + var(--s4)); width: var(--s3); height: var(--s4); border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Price band */
.price { background: var(--tint); border-block: 1px solid var(--line); }
.price .split { padding-block: var(--s8); }
.price h2 { margin-top: var(--s5); }
.amount { display: block; margin-block: var(--s5) var(--s4); font: var(--t1)/var(--lh-tight) var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; color: var(--accent); }
/* The launch price (offer.json, ALL-1): "Launch price:", then the price large on a line of its own, then the spots left,
   the end date and the price after it in the smaller type */
.amount strong { display: block; font-size: var(--t2); font-weight: 400; letter-spacing: -.04em; }
.price .col-4 { margin-top: var(--s6); }
.price .col-4 p { color: var(--muted); }
.price .col-4 > * + * { margin-top: var(--s5); }
.price .button { margin-top: var(--s6); }

/* About */
.portrait { margin-top: var(--s6); }
.portrait img { display: block; width: 100%; height: auto; background: var(--tint); }

/* FAQ */
details { padding-block: var(--s5); border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
.row-body > details + details { margin-top: 0; }
/* The padding makes a taller row to tap, and the negative margin keeps the layout where it was (IS-CU-02). list-item,
   not block, so the open and close triangle stays. */
summary { display: list-item; padding-block: var(--s4); margin-block: calc(-1 * var(--s4)); cursor: pointer; font-weight: 600; line-height: var(--lh-snug); color: var(--ink); }
details > div { padding-top: var(--s4); }

/* Closing */
.closing { padding-block: var(--s9); border-top: 2px solid var(--accent); text-align: center; }
.closing h2 { font-size: var(--t2); line-height: var(--lh-tight); }
.closing p { margin-top: var(--s5); color: var(--muted); }
.closing .button { margin-top: var(--s6); }
.closing .closing-note { margin-top: var(--s7); }

/* Booking page (/book) and the top of the problem pages (/problems/) */
.book, .intro { padding-block: var(--s7) var(--s8); }
.book h1, .intro h1 { margin-top: var(--s5); }
.book h1 em, .intro h1 em { display: block; color: var(--accent); }
.book .col-4, .intro .col-4 { margin-top: var(--s6); }
.book-lead, .intro-lead { font: var(--t0)/var(--lh-loose) var(--serif); }
.book-problem { margin-bottom: var(--s5); }
.intro .split { margin-top: var(--s6); }
/* A problem page's photo (and /book's, from a problem page): a wide band under the headline */
.intro-photo { margin-top: var(--s7); }
.intro-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.618034; object-fit: cover; background: var(--tint); }
.intro .button { margin-top: var(--s6); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); list-style: none; padding: 0; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s4); }

/* "More" links to another page, like "See how it works" */
.more a { font-weight: 600; }
.more a::after { content: " \2192"; }

/* A problem page's related problems: a small photo of each beside its name */
.related { list-style: none; padding: 0; }
.related li + li { margin-top: var(--s6); }
.related a { display: flex; align-items: center; gap: var(--s6); }
.related img { flex: 0 0 8rem; width: 8rem; height: auto; aspect-ratio: 1.5; object-fit: cover; background: var(--tint); }
/* The Plain answers index: each page's one-line answer under its name */
.related p { margin-top: var(--s4); }

/* One problem per screen, on the homepage and on /problems/: each panel is about a screen tall (never over 56rem) and
   short enough to fit a 375x667 phone under the scroll padding. Phones get the photo on top in a wide, short crop (2:1, and
   2.4:1 on short screens); from 48em it sits beside the text, on alternating sides. */
.panel { display: flex; align-items: center; min-height: clamp(26rem, calc(100svh - var(--s7)), 56rem); padding-block: var(--s6); border-top: 1px solid var(--line); }
.panel > .wrap { display: flex; flex-wrap: wrap; width: 100%; }
.panel-photo, .panel-text { flex: 0 0 100%; min-width: 0; }
.panel-photo { margin-bottom: var(--s5); }
/* The frame holds the crop, so motion.js can drift the photo inside it without moving anything around it. */
.panel-frame { overflow: hidden; aspect-ratio: 2; background: var(--tint); }
.panel-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The counter, then a thin accent line to the end of the column. motion.js fills it as the panel scrolls into place. */
.panel .eyebrow { display: flex; align-items: center; gap: var(--s5); }
.panel-line { flex: 1; height: 1px; background: var(--accent); transform-origin: left center; }
.panel h3 { margin-top: var(--s5); font-size: var(--t1); line-height: var(--lh-snug); letter-spacing: -.02em; }
.panel h3 em { display: block; color: var(--accent); }
.panel-lede { margin-top: var(--s5); font: var(--t0)/var(--lh-loose) var(--serif); color: var(--muted); }
.panel-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4) var(--s7); margin-top: var(--s6); }
.panel-more { font-weight: 600; }
.panel-more::after { content: " \2192"; }
.panel-book { color: var(--ink); }
@media (max-width: 47.99em) and (max-height: 45em) {
  .panel { padding-block: var(--s5); }
  .panel-frame { aspect-ratio: 2.4; }
}
/* The smallest phones (375px wide and under): a panel no longer has to fill the screen, and its headline runs on one
   line with a half-step smaller size, so the photo keeps its room (IS-CU-01). 1.272rem is the half-step between --t0 and --t1. */
@media (max-width: 23.4375em) {
  .panel { min-height: 0; padding-block: var(--s6); }
  .panel h3 { font-size: clamp(1.272rem, 0.9rem + 1.9vw, 1.618rem); }
  .panel h3 em { display: inline; }
}
.book-note { margin-top: var(--s5); color: var(--muted); }
/* /book's one link to Calendly (ALL-8): nothing from Calendly loads until it's clicked. */
.book-cta { margin-top: var(--s7); }

/* /privacy/ and /terms/: Legal's text at a reading width */
.legal { padding-block: var(--s7) var(--s9); }
.legal > * { max-width: 42rem; }
.legal > * + * { margin-top: var(--s5); }
.legal > h2 { margin-top: var(--s7); }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4) var(--s6); padding-block: var(--s6) var(--s7); border-top: 1px solid var(--line); line-height: var(--lh-read); color: var(--muted); }
/* The footer's menu takes its own line, over the credit and legal lines */
.site-footer nav { flex-basis: 100%; }

/* Golden Grid: 5 + 4 tracks, gutters as padding inside, no gap */
@media (min-width: 48em) {
  .wrap { padding-inline: var(--s7); }
  .split { display: flex; align-items: flex-end; }
  .row { display: flex; align-items: flex-start; padding-block: var(--s8); }
  .col-5, .row-body { flex: 0 0 var(--grp-5); max-width: var(--grp-5); }
  .col-4, .row-head { flex: 0 0 var(--grp-4); max-width: var(--grp-4); }
  .col-5 { padding-right: var(--s7); }
  .col-4 { padding-left: var(--s6); }
  .top-photo { --ratio: 2.618034; }
  .top .side, .price .col-4 { margin-top: 0; }
  .price .split { align-items: flex-start; }
  .row-head { position: sticky; top: var(--s6); padding-right: var(--s8); }
  .row-body { margin-top: 0; }
  .amount strong { font-size: var(--t3); }
  .book .col-4, .intro .col-4 { margin-top: 0; }
  .intro-photo img { aspect-ratio: 2.618034; }
  /* Panels: the photo in a grp-5 track and the text in a grp-4 track, the photo on the right on every second one */
  .panel-photo { flex-basis: var(--grp-5); max-width: var(--grp-5); margin: 0; padding-right: var(--s7); }
  .panel-text { flex-basis: var(--grp-4); max-width: var(--grp-4); align-self: center; }
  .panel:nth-of-type(even) .panel-photo { order: 2; padding: 0 0 0 var(--s7); }
  .panel { padding-block: var(--s7); }
  .panel-frame { aspect-ratio: auto; height: clamp(20rem, calc(100svh - var(--s9) * 2), 36rem); }
}

/* Just above the phone menu, the brand, the menu and the Book button only just fit one line, so their gaps tighten a step.
   With "Team headaches" in the menu, the header now fits one line from 812px (it wrapped up to 812px before). */
@media (min-width: 48em) and (max-width: 56em) {
  .site-header, .nav ul { column-gap: var(--s5); }
}

/* Desktop: photo behind a big headline, content anchored low-left */
@media (min-width: 64em) {
  .wrap { padding-inline: var(--s8); }
  .top { position: relative; isolation: isolate; }
  .top-photo { position: absolute; inset: 0; z-index: -1; }
  .top-photo img { height: 100%; aspect-ratio: auto; object-position: 50% 40%; }
  /* Scrim in --night (23 37 30). The text block is under 30rem tall at every width from 64em,
     so the scrim stays strong for the bottom 32rem and only lightens above it. */
  .top-photo::after { inset: 0; aspect-ratio: auto; background: linear-gradient(to top, rgb(23 37 30 / .88), rgb(23 37 30 / .8) 32rem, rgb(23 37 30 / .3) 46rem); }
  .top-photo figcaption { position: absolute; z-index: 1; inset: auto 0 var(--s5); padding-top: 0; }
  .top-inner { display: flex; flex-direction: column; min-height: 40rem; min-height: min(calc(100svh - var(--s9)), 50rem); }
  .top .eyebrow { margin-top: auto; }
  .top h1 { font-size: var(--t3); }
  .lead, .book-lead { font-size: var(--t1); line-height: var(--lh-read); }
}

/* Motion. Every animation is in js/motion.js (GSAP), inside a gsap.context(): the page top's entrance, the panels, the
   steps and related problems. Hover states change at once, with no CSS transition. CSS keeps only smooth anchor jumps and
   the panels' gentle snap, inside no-preference, so "reduce motion" turns them off (and motion.js runs no tweens then).
   Nothing here hides anything. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Pages with panels snap to one only when you stop scrolling near it. Scrolling itself stays free. */
  html:has(.panel) { scroll-snap-type: y proximity; }
  .panel { scroll-snap-align: start; }
}

@media print {
  body { background: #fff; color: #222; }
  body::after, .skip-link, .nav, .nav-toggle, .site-footer nav, .crumbs, .portrait, .top-photo, .row-photo, .intro-photo, .panel-photo { display: none; }
  .top, .price { background: none; }
  .top, .top .eyebrow, .top h1 em, .lead, .top .side, .top .side a { color: #222; }
  .top .button { background: none; color: #222; }
  .row-head { position: static; }
  .button { background: none; color: #222; }
  .button::before { display: none; }
  h2, h3, summary { break-after: avoid; }
}