/* iWhisk reading pages
 *
 * The document treatment for Privacy, Terms and Contact: pages that are read
 * rather than scrolled through. Same palette and type as the homepage, but no
 * photography, no panels and no reveal. A legal document should be quiet.
 *
 * Self-contained like footer.css, defining its own tokens under a --pg- prefix.
 * These pages previously depended on assets/site.css for the old sage palette,
 * and nothing here should inherit from it.
 */

:root {
  --pg-ink:       #18352A;
  --pg-ink-soft:  #315043;
  --pg-canvas:    #F7F2E9;
  --pg-paper:     #FFFDF8;
  --pg-lime:      #DCEA94;
  --pg-clay:      #BD6041;
  --pg-clay-link: #A04E33;
  --pg-line:      #DED5C9;
  /* Form control borders need their own, darker line. --pg-line is fine for
     decorative rules and dividers, which are exempt, but it measured 1.43:1
     against the field background and a control boundary needs 3:1 to be
     identifiable at all. This is 3.49:1. */
  --pg-field-line: #8F877C;
  --pg-gold:      #B08A3E;
  /* The arch outline at --pg-gold measured 2.87:1 on the canvas ground, just
     under the 3:1 for a graphical object. It is decorative framing and so
     arguably exempt, but the margin is too thin to argue about. */
  --pg-gold-line: #9C7229;
  --pg-text:      #252A27;
  --pg-text-soft: #55605A;
  /* Was only ever a fallback inside .form-note-warn, so the token it named did
     not exist. Defined properly now, because the founding-offer card wants the
     same oat tint and two components should not disagree about it. */
  --pg-oat-soft:  #F1E6D6;
  /* Carried across from guide.css for the comparison's Plus column tint.
     Decorative only: 1.18:1 against paper, so it can hint but never inform. */
  --pg-well:      #F1EADF;
  --pg-display:   'Literata', Georgia, serif;
  --pg-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  font-family: var(--pg-body);
  background: var(--pg-canvas);
  color: var(--pg-text);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100% }

/* The header is not defined here. assets/header.css owns it, shared across all
   38 pages. This file only styles what sits below it. */

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

/* One hero for every page below the homepage. About previously had its own,
   36px taller at the top and on a 900px measure instead of 860, which made it
   sit visibly lower than Contact and Privacy. Padding is also tighter than the
   first pass: the old 116 plus 88 put 204px of empty ink around three lines. */
.page-hero { background: var(--pg-ink); padding: clamp(52px, 7vh, 80px) 0 clamp(40px, 5vh, 60px) }
.ph-in { max-width: 860px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px) }
/* No leading rule. It used to draw a 22px dash before the label, which is a
   decoration that carries nothing and reads as a template signature. The guide
   already settled this across 45 pages: .art-label, .dept-name, .cover-kicker
   and .rail-l are all bare letterspaced small caps. Removing it makes the two
   halves of the site agree rather than inventing a third treatment.
   Letterspacing raised slightly, since the dash was doing some of the work of
   separating the label from the headline underneath it. */
.ph-eye {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pg-lime); margin-bottom: 20px;
}
.ph-ttl {
  font-family: var(--pg-display); font-weight: 900; color: var(--pg-canvas);
  font-size: clamp(38px, 6vw, 68px); line-height: 1.04; letter-spacing: -.02em;
  margin-bottom: 16px;
}
.ph-meta { font-size: 15px; color: rgba(247, 242, 233, .72) }

/* ---- Document ----------------------------------------------------------- */

.doc-body { max-width: 860px; margin: 0 auto; padding: clamp(40px, 5vh, 60px) clamp(24px, 5vw, 64px) clamp(56px, 8vh, 84px) }
.doc-section { margin-bottom: clamp(40px, 5vh, 60px) }
.doc-section:last-child { margin-bottom: 0 }
.doc-h2 {
  font-family: var(--pg-display); font-weight: 900; color: var(--pg-ink);
  font-size: clamp(22px, 2.6vw, 31px); line-height: 1.15; letter-spacing: -.015em;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--pg-line);
}
.doc-p { font-size: 17px; color: var(--pg-text-soft); line-height: 1.75; margin-bottom: 15px; max-width: 68ch }
.doc-p:last-child { margin-bottom: 0 }
.doc-ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 15px; max-width: 68ch }

/* NOT flex on the li. Several of these items open with a bold label followed by
   running text: "<strong>Account information:</strong> name, email address...".
   Under display:flex the strong and the text node become two separate flex
   items, so they lay out as two columns with a gap and the label wraps. The
   bullet is absolutely positioned instead, leaving the label and its sentence
   to flow as one line of text. */
.doc-ul li {
  position: relative; padding-left: 22px;
  font-size: 16px; color: var(--pg-text-soft); line-height: 1.7;
}
.doc-ul li::before {
  content: ''; position: absolute; left: 2px; top: .66em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pg-clay);
}
/* One rule for every place bold can appear in this stylesheet's copy. It used
   to be three identical declarations, and two of them matched nothing, because
   only the list currently uses a bold lead-in. Kept for paragraphs rather than
   deleted as dead: legal copy is still being revised, and the alternative is a
   bold lead-in that renders soft grey in a paragraph and dark in a list. */
.doc-p strong, .doc-ul li strong, .ab-body strong { color: var(--pg-text); font-weight: 700 }

/* Body links use a deeper clay than the accent. --pg-clay measured 3.83:1 on
   the canvas ground, under the 4.5 needed for body-size text. */
.doc-body a { color: var(--pg-clay-link); text-decoration: underline; text-underline-offset: 2px }
.doc-body a:hover, .doc-body a:focus-visible { color: var(--pg-ink) }

/* ---- Contact: form and info column ------------------------------------- */
/* Only contact.html uses these. Kept in this file rather than a fourth
   stylesheet because it is the same document treatment with two extra
   components, and the reading pages already share everything above. */

.ph-sub { font-size: clamp(16px, 1.6vw, 19px); color: rgba(247, 242, 233, .82); max-width: 48ch; line-height: 1.65 }

.contact-body {
  max-width: 1140px; margin: 0 auto;
  padding: clamp(40px, 5vh, 60px) clamp(24px, 5vw, 64px) clamp(56px, 8vh, 84px);
  display: grid; grid-template-columns: minmax(0, 1fr) 370px;
  gap: clamp(32px, 5vw, 72px); align-items: start;
}

.form-row { margin-bottom: 20px }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.form-label { display: block; font-size: 13px; font-weight: 700; color: var(--pg-ink); margin-bottom: 7px }
.form-input, .form-select, .form-textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--pg-text);
  background: var(--pg-paper); border: 1.5px solid var(--pg-field-line);
  border-radius: 12px; padding: 13px 16px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible {
  border-color: var(--pg-ink-soft); box-shadow: 0 0 0 3px rgba(49, 80, 67, .16);
}
/* The chevron is inlined rather than fetched, and its stroke is --pg-text-soft
   so it moves with the palette instead of staying the old sage grey. */
.form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2355605A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 38px;
}
.form-textarea { resize: vertical; min-height: 150px; line-height: 1.6 }
.form-submit {
  width: 100%; height: 54px; margin-top: 8px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700;
  background: var(--pg-ink); color: var(--pg-canvas);
  border: none; border-radius: 12px;
  transition: background .2s, transform .15s;
}
.form-submit:hover, .form-submit:focus-visible { background: var(--pg-ink-soft); transform: translateY(-1px) }
.form-submit:active { transform: none }
.form-note { font-size: 13px; color: var(--pg-text-soft); margin-top: 12px; text-align: center }

/* The success block that used to live here is gone. It was shown by a script
   that transmitted nothing, so the page claimed "Message sent!" when no mail
   had been sent. contact.php now renders the confirmation itself, and only
   after the mail has actually been accepted. */

/* Honeypot. Moved off-screen rather than display:none, because some bots skip
   fields that are display:none and this one needs to look fillable to them.
   aria-hidden and tabindex="-1" in the markup keep it away from real users. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.info-card {
  background: var(--pg-paper); border: 1px solid var(--pg-line);
  border-radius: 18px; padding: 26px; margin-bottom: 18px;
}
.info-card:last-child { margin-bottom: 0 }
.info-card-ttl { font-family: var(--pg-display); font-size: 17px; font-weight: 900; color: var(--pg-ink); margin-bottom: 8px }
.info-card-body { font-size: 14px; color: var(--pg-text-soft); line-height: 1.7 }
.info-card a { color: var(--pg-clay-link); text-decoration: underline; text-underline-offset: 2px }
.info-card a:hover, .info-card a:focus-visible { color: var(--pg-ink) }
.info-divider { height: 1px; background: var(--pg-line); margin: 14px 0 }
.info-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px }
.info-row:last-child { margin-bottom: 0 }
.info-row-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--pg-lime); color: #26311C;
  display: flex; align-items: center; justify-content: center;
}
.info-row-label { font-size: 12px; font-weight: 600; color: var(--pg-text-soft); margin-bottom: 2px }
.info-row-val { font-size: 14px; font-weight: 700; color: var(--pg-ink) }

@media (max-width: 920px) {
  .contact-body { grid-template-columns: 1fr }
  .info-section { order: -1 }
}
@media (max-width: 560px) {
  .form-row-2 { grid-template-columns: 1fr }
}

/* ---- About ------------------------------------------------------------- */
/* No photography on this page by decision, so it carries on type and one
   structural motif: the arch from the homepage doorway, reused to frame the
   closing line. That ties the page to the brand without inventing imagery. */

/* The trailing ellipsis on the About headline, picked out in lime. */
/* The lime ellipsis rule was removed: a second colour inside a heading is the
   same decoration-as-emphasis trick as the homepage headline had. */
.ab-dateline {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247, 242, 233, .74);
}
.ab-dateline::before { content: ''; width: 26px; height: 1px; background: var(--pg-gold) }

.ab-story { max-width: 860px; margin: 0 auto; padding: clamp(40px, 5vh, 60px) clamp(24px, 5vw, 64px) clamp(16px, 2vh, 28px) }
/* No drop cap here, deliberately. The guide's articles use one, but this
   paragraph opens on "iWhisk" and ::first-letter would blow the lowercase "i"
   up to 3.6em and wreck the brand name. Size the whole lead instead. */
.ab-lead { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.6; color: var(--pg-text); max-width: 60ch; margin-bottom: 26px }
.ab-body { font-size: 17px; line-height: 1.78; color: var(--pg-text-soft); max-width: 66ch; margin-bottom: 18px }
.ab-body:last-child { margin-bottom: 0 }

/* Food waste figures on the About page.
 *
 * Two only. A third was cut because it was the price, and a price sitting
 * beside "$2,913 wasted" reads as a promise to recover it. We have no usage
 * data, so that claim is not one we can substantiate.
 *
 * minmax(min(200px, 100%), 1fr) rather than a bare 200px floor: a plain pixel
 * minimum will not let a track shrink below itself, so "$2,913" at display size
 * pushes the grid wider than its container instead of wrapping. Same trap the
 * deck hit.
 */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(20px, 4vw, 46px);
  margin: 30px 0 18px;
  max-width: 66ch;
}
.ab-stats > * { min-width: 0 }
.ab-stat-n {
  display: block;
  font-family: var(--pg-display);
  font-size: clamp(34px, 4.6vw, 50px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pg-text);
}
.ab-stat-l {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--pg-text-soft);
  max-width: 30ch;
}
/* Attribution, not fine print. Readable size and a real contrast ratio,
   because an unreadable source line is the same as no source line. */
.ab-src {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pg-text-soft);
  max-width: 66ch;
  margin: 0 0 26px;
  padding-top: 14px;
  border-top: 1px solid var(--pg-line);
}
.ab-src cite { font-style: italic }

/* The bowl. A hairline curve echoing the logo mark, which is flat on top and
   rounded below. Decorative framing for the line that closes the story. */
.ab-arch-wrap { padding: clamp(18px, 3vh, 32px) clamp(24px, 5vw, 64px) clamp(44px, 6vh, 68px); display: flex; justify-content: center }
/* A bowl, not an arch. The first version curved the other way and read as an
   umbrella, which means nothing here. The logo mark's own path is flat across
   the top and rounded below, so a bowl echoes it directly: square corners on
   top, the curve underneath, and the weight of the padding below the text to
   fill it. */
.ab-arch {
  position: relative; width: min(100%, 460px);
  padding: clamp(30px, 5vw, 44px) clamp(30px, 6vw, 54px) clamp(58px, 9vw, 92px);
  border: 1px solid var(--pg-gold-line);
  border-radius: 18px 18px 999px 999px;
  text-align: center;
}
.ab-quote {
  font-family: var(--pg-display); font-style: italic; font-weight: 700;
  font-size: clamp(23px, 3.4vw, 34px); line-height: 1.25; letter-spacing: -.01em;
  color: var(--pg-ink); margin: 0;
}

/* ---- Studio credit ----------------------------------------------------- */

.ab-studio { background: var(--pg-ink); padding: clamp(48px, 6vh, 72px) clamp(24px, 5vw, 64px) }
.ab-studio-in { max-width: 860px; margin: 0 auto }
.ab-studio h2 {
  font-family: var(--pg-display); font-weight: 900; color: var(--pg-canvas);
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: 18px;
}
.ab-studio-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pg-lime); margin-bottom: 20px;
}
.ab-studio-label::before { content: ''; width: 22px; height: 1px; background: var(--pg-lime) }
.ab-studio p { font-size: 17px; line-height: 1.75; color: rgba(247, 242, 233, .82); max-width: 62ch }

/* The studio name links out to egostudio.ai. rel="noopener noreferrer" is not
   optional with target="_blank": without noopener the opened page can reach
   back through window.opener. Underlined rather than colour-only, so it does
   not depend on colour perception to read as a link. */
.ab-studio-link {
  color: var(--pg-lime); text-decoration: underline; text-underline-offset: 3px;
  font-weight: 600;
}
.ab-studio-link:hover, .ab-studio-link:focus-visible { color: var(--pg-canvas) }

/* Announced by screen readers, invisible on screen. A link that opens a new tab
   should say so: an unannounced change of context is disorienting for anyone
   not watching the tab bar. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Personal note card -------------------------------------------------- */
/* Same construction as the guide's .pnote (guide/assets/guide.css): a solid
   ink card is the one thing on the page not styled as body copy, which is
   what a first-person aside needs in order to read as one voice speaking
   rather than another paragraph of the page. Rebuilt here under --pg- tokens
   because guide.css is not loaded on marketing pages. */
.pn-wrap { padding: clamp(20px, 4vh, 40px) clamp(24px, 5vw, 64px) clamp(56px, 8vh, 84px) }
.pn-card {
  background: var(--pg-ink); color: var(--pg-canvas);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px);
  max-width: 860px; margin: 0 auto;
}
.pn-eye {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pg-lime); margin-bottom: 18px;
}
.pn-card p { font-size: 16.5px; line-height: 1.75; color: rgba(247, 242, 233, .92); margin: 0 0 1.1em }
.pn-card p:first-of-type {
  font-family: var(--pg-display); font-size: 21px; font-weight: 700; line-height: 1.4; margin-bottom: .7em;
}
.pn-card p:last-of-type { margin-bottom: 0 }
.pn-card a { color: var(--pg-lime); text-decoration: underline; text-underline-offset: 2px }
.pn-card a:hover, .pn-card a:focus-visible { color: var(--pg-canvas) }
.pn-sig {
  display: block; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(220, 234, 148, .32);
  font-family: var(--pg-display); font-size: 17px; font-weight: 700; font-style: italic;
  color: var(--pg-lime);
}
.pn-sig span {
  display: block; margin-top: 6px; font-family: var(--pg-body); font-size: 11.5px;
  font-weight: 600; font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247, 242, 233, .72);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .form-input, .form-select, .form-textarea, .form-submit { transition: none }
}

/* Cloudflare Turnstile widget spacing. The widget renders in an iframe at a
   fixed size, so it only needs room, not styling. */
.cf-turnstile { margin: 20px 0 4px }
.form-note-warn {
  color: #6B4A12; background: var(--pg-oat-soft, #F1E6D6);
  border: 1px solid #C08A2E; border-radius: 10px;
  padding: 11px 14px; text-align: left; margin-top: 14px;
}
.form-note-warn a { color: #6B4A12; font-weight: 700 }

/* ---- Pricing ------------------------------------------------------------ */
/* Same reasoning as the Contact and About blocks above: this is the document
   treatment with three extra components, not a different page type, so it lives
   here rather than in a fifth stylesheet.
   Two rule weights are load bearing, borrowed from guide.css and used here for
   the first time. --pg-line (1.43:1 on paper) separates rows a reader can lose
   without losing information. --pg-field-line (3.49:1) carries the group
   boundaries and the table head, which do inform. */

.pr-lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.6;
  color: var(--pg-text); max-width: 60ch; margin-bottom: 28px }

/* --- Tier cards --- */
/* Collapses at 640, not the 560 that .form-row-2 uses. That precedent holds two
   short text inputs which stay usable at any width. Measured here at 561px each
   card gets 192px of text, and a 40px price would wrap onto two lines. */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 24px); align-items: stretch; margin-bottom: 18px }
.tier { display: flex; flex-direction: column; background: var(--pg-paper);
  border: 1px solid var(--pg-line); border-radius: 18px; padding: 26px }
/* Plus is marked by inverting the ground, never by an accent. Lime on canvas is
   1.16:1 and disappears entirely in greyscale, so it cannot be the thing that
   says "this one". Paper to ink is 11.91:1 and survives greyscale and every form
   of colour blindness. Lime appears inside this card only against ink, at
   10.27:1, where it decorates a meaning it is not carrying. */
.tier-plus { background: var(--pg-ink); border-color: var(--pg-ink) }

.tier-eye { font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pg-text-soft); margin-bottom: 14px }
.tier-plus .tier-eye { color: var(--pg-lime) }
.tier-name { font-family: var(--pg-display); font-weight: 900;
  font-size: clamp(24px, 2.8vw, 30px); line-height: 1.1; letter-spacing: -.015em;
  color: var(--pg-ink); margin-bottom: 12px }
.tier-plus .tier-name { color: var(--pg-canvas) }
.tier-price { font-family: var(--pg-display); font-weight: 900;
  font-size: clamp(34px, 4vw, 44px); line-height: 1; letter-spacing: -.02em;
  color: var(--pg-ink); display: flex; align-items: baseline; gap: 7px;
  flex-wrap: wrap }
.tier-plus .tier-price { color: var(--pg-canvas) }
.tier-per { font-family: var(--pg-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0; color: var(--pg-text-soft) }
.tier-plus .tier-per { color: rgba(247, 242, 233, .82) }
.tier-alt { font-size: 14px; color: var(--pg-text-soft); margin-top: 10px }
.tier-plus .tier-alt { color: rgba(247, 242, 233, .82) }
.tier-rule { height: 1px; background: var(--pg-line); margin: 18px 0 }
.tier-plus .tier-rule { background: rgba(247, 242, 233, .22) }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 10px }
.tier-list li { position: relative; padding-left: 22px; font-size: 15px;
  line-height: 1.6; color: var(--pg-text-soft) }
.tier-plus .tier-list li { color: rgba(247, 242, 233, .86) }
.tier-list li::before { content: ''; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pg-clay) }
.tier-plus .tier-list li::before { background: var(--pg-lime) }

/* margin-top:auto puts both buttons on one baseline whatever the bullet count. */
.tier-cta { margin-top: auto; padding-top: 22px }
/* The rule further up this file colours every anchor inside .doc-body
   --pg-clay-link. On the ink ground of the Plus card that is 2.30:1, a flat
   failure, so both colour and underline are overridden here. The other half of
   the fix is editorial: no prose link goes inside .tier-plus at all. */
/* Scoped to .tier deliberately. `.doc-body a` is a class plus a type selector,
   so it scores (0,1,1) and beats a bare `.tier-btn` at (0,1,0). Written flat
   first, and the Free button duly rendered clay and underlined. */
.tier .tier-btn { display: block; text-align: center; font-size: 16px;
  font-weight: 700; padding: 15px 22px; border-radius: 12px;
  text-decoration: none; background: var(--pg-ink); color: var(--pg-canvas);
  transition: background .2s, transform .15s }
.tier .tier-btn:hover { background: var(--pg-ink-soft); transform: translateY(-1px) }
.tier-plus .tier-btn { background: var(--pg-lime); color: #26311C }
.tier-plus .tier-btn:hover { background: #E8F5A0 }
/* The offset puts the focus ring on the card's own ground, so each card needs
   its own ring colour: ink on paper 13.06:1, lime on ink 10.27:1. */
.tier-btn:focus-visible { outline: 2px solid var(--pg-ink); outline-offset: 3px }
.tier-plus .tier-btn:focus-visible { outline-color: var(--pg-lime) }
.tier-hold { font-size: 14px; line-height: 1.6; color: rgba(247, 242, 233, .86);
  text-align: center; padding: 15px 0 0 }
.tier-foot { font-size: 13px; color: var(--pg-text-soft); margin-top: 11px;
  text-align: center }
.tier-plus .tier-foot { color: rgba(247, 242, 233, .82) }
.pr-note { font-size: 14px; line-height: 1.7; color: var(--pg-text-soft);
  max-width: 68ch }

/* --- Comparison --- */
.cmp-wrap { background: var(--pg-paper); border: 1px solid var(--pg-line);
  border-radius: 18px; padding: 24px 26px 26px }
.cmp-group + .cmp-group { margin-top: 30px; padding-top: 26px;
  border-top: 1.5px solid var(--pg-field-line) }
.cmp-grp { font-family: var(--pg-display); font-weight: 900; font-size: 19px;
  line-height: 1.25; letter-spacing: -.01em; color: var(--pg-ink);
  margin-bottom: 7px; scroll-margin-top: 96px }
.cmp-why { font-size: 14px; line-height: 1.65; color: var(--pg-text-soft);
  max-width: 64ch; margin-bottom: 16px }

/* table-layout:fixed is doing real work. Under fixed layout no cell content can
   widen a column, so horizontal overflow is impossible at any viewport and no
   overflow-x scroller is needed. A scroller would in turn have needed
   tabindex="0" and an accessible name to be reachable by keyboard. */
.cmp { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px }
.cmp .cmp-v { width: 23% }
.cmp .cmp-hl { background: var(--pg-well) }
.cmp thead th { font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pg-text-soft); text-align: left;
  vertical-align: bottom; padding: 0 12px 11px 0;
  border-bottom: 1.5px solid var(--pg-field-line) }
.cmp tbody th { font-weight: 600; font-size: 15px; line-height: 1.45;
  color: var(--pg-ink); text-align: left; vertical-align: top;
  padding: 13px 12px 13px 0; border-bottom: 1px solid var(--pg-line) }
.cmp tbody td { font-size: 15px; line-height: 1.45; color: var(--pg-text-soft);
  vertical-align: top; overflow-wrap: break-word;
  padding: 13px 12px 13px 0; border-bottom: 1px solid var(--pg-line);
  border-left: 1px solid var(--pg-line) }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0 }
.cmp td:last-child, .cmp thead th:last-child { padding-right: 0 }
.cmp thead th + th, .cmp tbody td { padding-left: 12px }

/* --- Founding offer --- */
.fo-card { background: var(--pg-oat-soft); border: 1px solid var(--pg-gold-line);
  border-radius: 18px; padding: 24px 26px }
.fo-flag { display: inline-block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; background: var(--pg-ink);
  color: var(--pg-canvas); padding: 6px 12px; border-radius: 100px;
  margin-bottom: 16px }
.fo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 18px }
.fo-k { font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #6B4A12; margin-bottom: 6px }
.fo-v { font-size: 16px; line-height: 1.55; color: var(--pg-text) }
.fo-v strong { font-weight: 800; color: var(--pg-text) }
.fo-note { font-size: 14px; line-height: 1.7; color: #5A3E0F; max-width: 64ch }

/* --- FAQ --- */
.faq-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 28px }
.faq-jump a { display: inline-block; padding: 7px 14px; border-radius: 100px;
  font-size: 13.5px; font-weight: 600; background: var(--pg-paper);
  border: 1px solid var(--pg-field-line); color: var(--pg-clay-link);
  text-decoration: none }
.faq-jump a:hover, .faq-jump a:focus-visible { background: var(--pg-ink);
  border-color: var(--pg-ink); color: var(--pg-canvas) }
.faq-jump a:focus-visible { outline: 2px solid var(--pg-ink); outline-offset: 2px }
.faq-item { padding-top: 24px; margin-top: 24px;
  border-top: 1px solid var(--pg-line) }
.faq-item:first-of-type { padding-top: 0; margin-top: 0; border-top: 0 }
/* The header is fixed, so an anchor jump would otherwise land the question
   underneath it. Nothing else on this site is fragment-linked, so this is the
   first place scroll-margin has been needed. */
.faq-q { font-family: var(--pg-display); font-weight: 900;
  font-size: clamp(18px, 2vw, 21px); line-height: 1.3; letter-spacing: -.01em;
  color: var(--pg-ink); margin-bottom: 9px; scroll-margin-top: 96px }

@media (max-width: 640px) {
  .tiers { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
  .cmp-wrap { padding: 18px 14px 20px; border-radius: 14px }
  .cmp { font-size: 13px }
  .cmp .cmp-v { width: 27% }
  .cmp tbody th, .cmp tbody td { padding: 11px 8px 11px 0 }
  .cmp thead th + th, .cmp tbody td { padding-left: 8px }
  .fo-grid { grid-template-columns: 1fr; gap: 16px }
  .fo-card { padding: 20px 18px }
  .faq-q, .cmp-grp { scroll-margin-top: 108px }
}
@media (prefers-reduced-motion: reduce) {
  .tier-btn { transition: none }
}