/* FolksKeeper — shared stylesheet for folkskeeper.com (Version 2 look)
   No JavaScript, no external fonts, no external CSS, no trackers, no cookies.
   Fonts are self-hosted below (Bricolage Grotesque 700, Figtree 400/600/700 — SIL Open Font
   License, see assets/fonts/OFL-*.txt). Local fallback @font-face rules further down give the
   fallback stack size-matched metrics so swapping in the webfont causes minimal layout shift.

   Layout: one grid up to 1280px wide (--grid-max) with fluid gutters, shared by the header, the footer, and every
   page. Ink plates (the home hero and the ER band) run edge to edge with their content on that grid. Type is fluid
   (clamp) from a phone to a wide window. Breakpoints: 640px (tablet), 960px (two-column hero, ER band),
   1100px (two-column register and sections, feature pages beside their screenshot). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-variable-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-variable-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/figtree-variable-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/figtree-variable-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/figtree-variable-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/figtree-variable-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/figtree-variable-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/figtree-variable-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Size-adjusted local fallback faces: metrics roughly matched to Bricolage Grotesque / Figtree so the
   fallback-to-webfont swap (font-display: swap) shifts layout as little as possible. */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local("Arial Bold"), local("Helvetica Neue Bold"), local("Arial");
  font-weight: 700;
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 28%;
}

@font-face {
  font-family: "Figtree Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 100%;
  ascent-override: 93%;
  descent-override: 25%;
}

:root {
  --page: #F3EEE7;
  --surface: #FFFDFA;
  --surface-flagged: #FFF6F0;
  --card-border: #E6DCCE;
  --rule: #E0D5C4;
  --rule-soft: #EFE7DB;
  --ink: #2F2963;
  --ink-secondary: #5B5470;
  --muted: #726757;
  --sage-text: #4E635C;
  --numeral-muted: #8A7454;
  --link: #454372;
  --button-fill: #454372;
  --on-button: #FDFAF6;
  --accent: #70877F;

  --plate-ink: #2F2963;
  --plate-ink-raised: #3A3472;
  --plate-rule: #4A4487;
  --plate-sage: #5E7570;
  --plate-indigo: #454372;
  --plate-indigo-subtitle: #C9C5E0;
  --paper: #C4A77D;
  --on-plate: #FDFAF6;
  --on-plate-secondary: #B9B3D6;
  --on-plate-tertiary: #ADA6CC;
  --on-paper: #2F2963;
  --on-paper-secondary: #4B3E26;

  --flag: #EF946C;
  --on-flag: #2F2963;
  --on-flag-secondary: #5A3018;
  --flag-text: #A5522A;
  --flag-border-soft: #E8C6B4;

  --focus: #454372;

  /* Layout grid: content up to 1280px wide, 20px gutters on a phone growing to 48px. */
  --grid-max: 80rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* Readable measure for running text: about 70 characters of Figtree. */
  --measure: 29em;
  --section-gap: clamp(3rem, 2rem + 4vw, 7rem);

  /* Fluid type, phone size to wide-window size. */
  --text-body: clamp(1.0625rem, 0.9875rem + 0.25vw, 1.1875rem);  /* 17px, 19px from 1280px */
  --text-lede: clamp(1.125rem, 0.95rem + 0.42vw, 1.25rem);        /* 18px, 20px from 1250px */
  --text-small: clamp(0.9rem, 0.85rem + 0.15vw, 1rem);
  --text-nav: clamp(1rem, 0.95rem + 0.12vw, 1.0625rem);           /* 16px, 17px from 1330px */
  --text-hero: clamp(2rem, 1.2rem + 3.2vw, 4.5rem);               /* 32px, 72px from 1650px */
  --text-h1: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);              /* 28px, 56px from 1530px */
  --text-section: clamp(1.5rem, 0.99rem + 2.1vw, 3rem);           /* 24px, 48px from 1530px */
  --text-h2: clamp(1.375rem, 1rem + 1.52vw, 2.5rem);              /* 22px, 40px from 1580px */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #16142A;
    --surface: #211E3A;
    --surface-flagged: #3A2A33;
    --card-border: #3A355C;
    --rule: #3A355C;
    --rule-soft: #2E2A48;
    --ink: #F5F0E8;
    --ink-secondary: #C9C2D8;
    --muted: #A8A0BB;
    --sage-text: #9DBAB0;
    --numeral-muted: #C4A77D;
    --link: #B7B4F0;
    --button-fill: #5B58A8;
    --on-button: #FFFFFF;
    --accent: #9DBAB0;

    --plate-ink: #29245A;
    --plate-rule: #565093;
    --plate-sage: #4F6560;
    --plate-indigo: #3B3970;

    --flag-text: #F2A27E;
    --flag-border-soft: #6B4A3E;

    --focus: #B7B4F0;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--page);
  color: var(--ink-secondary);
  font-family: "Figtree", "Figtree Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: var(--surface);
  color: var(--ink);
  padding: 0.75em 1.25em;
  border: 2px solid var(--focus);
  border-radius: 8px;
  z-index: 200;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.skip-link:focus {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* The shared grid: the same content width and gutters for the header, footer, page content, and plate content. */
.container,
.wrap,
header.site-header,
footer.site-footer {
  width: 100%;
  max-width: calc(var(--grid-max) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Header ---------- */

header.site-header {
  padding-top: clamp(1rem, 0.75rem + 0.8vw, 1.6rem);
  padding-bottom: clamp(1rem, 0.75rem + 0.8vw, 1.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem 2rem;
}

.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}

.brand:hover {
  text-decoration: none;
}

.brand-lockup {
  display: block;
  height: clamp(34px, 1.5rem + 1.2vw, 46px);
  width: auto;
}

.brand-lockup .mark-arch { fill: var(--link); }
.brand-lockup .mark-dot { fill: var(--flag); }
.brand-lockup .wordmark-folks { fill: var(--ink); }
.brand-lockup .wordmark-keeper { fill: var(--sage-text); }
.brand-lockup .tagline-svg { fill: var(--ink-secondary); text-transform: uppercase; }

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem clamp(1rem, 0.5rem + 1.5vw, 2.25rem);
  flex-wrap: wrap;
}

nav.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 0.25rem + 1.4vw, 2rem);
  margin: 0;
  padding: 0;
  font-size: var(--text-nav);
}

nav.site-nav li {
  margin: 0;
}

nav.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15em;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

nav.site-nav a:hover,
nav.site-nav a[aria-current="page"] {
  text-decoration-color: var(--paper);
}

/* ---------- Call to action pill ---------- */

.cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background-color: var(--flag);
  color: var(--on-flag);
  font-weight: 800;
  font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.7em 1.3em;
  border-radius: 999px;
  min-height: 44px;
  white-space: normal;
  text-align: center;
}

a.cta-pill:hover,
a.cta-pill:focus-visible {
  text-decoration: underline;
}

.cta-pill--large {
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem);
  padding: 0.85em 1.7em;
}

.header-cta .cta-pill {
  font-size: clamp(0.85rem, 0.8rem + 0.18vw, 1rem);
  padding: 0.6em 1.15em;
  min-height: 44px;
}

/* ---------- Breadcrumb ---------- */

nav.breadcrumb {
  margin: 0;
  padding: 0;
}

nav.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: var(--text-small);
  color: var(--muted);
}

nav.breadcrumb li {
  display: flex;
  align-items: center;
  margin: 0;
}

nav.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: var(--rule);
}

nav.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--muted);
  font-weight: 600;
}

nav.breadcrumb li[aria-current="page"] {
  color: var(--ink-secondary);
  font-weight: 600;
}

/* ---------- Main / typography ---------- */

main {
  display: block;
}

main.container {
  padding-top: 0.5rem;
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

main.home {
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.page-head {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
  margin-bottom: 0.5rem;
  max-width: 50rem;
}

.page-head .eyebrow {
  margin-bottom: 0.5rem;
}

/* Even line lengths in headings, so a title never ends on one stray word. */
h1,
h2,
h3 {
  text-wrap: balance;
}

h1 {
  font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-size: var(--text-h1);
  line-height: 1.06;
  margin: 0 0 0.4em;
  color: var(--ink);
}

h2 {
  font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: var(--text-h2);
  line-height: 1.12;
  margin: clamp(2.25rem, 1.5rem + 2vw, 3.75rem) 0 0.6em;
  color: var(--ink);
}

h3 {
  font-size: clamp(1.15rem, 1rem + 0.35vw, 1.4rem);
  line-height: 1.3;
  margin: 1.5rem 0 0.5rem;
  color: var(--ink);
}

.eyebrow + h1,
.eyebrow + h2 {
  margin-top: 0;
}

p, li {
  color: var(--ink-secondary);
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

/* Running text keeps a readable line length however wide the window is. */
main p,
main dt,
main dd,
main summary,
.prose li,
.feature-body li {
  max-width: var(--measure);
}

ul, ol {
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.5em;
}

strong {
  color: var(--ink);
}

.eyebrow {
  display: block;
  font-size: clamp(0.8rem, 0.75rem + 0.15vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 0.75rem;
}

.lede {
  font-size: var(--text-lede);
  color: var(--ink-secondary);
}

/* Support, Privacy, and Terms: one readable column on the shared grid. :where() keeps this rule weaker than the
   running-text measure above, so paragraphs and list items still stop at --measure. */
:where(.prose) > * {
  max-width: 44rem;
}

/* ---------- Cards / notices (shared by privacy, terms, support) ---------- */

/* Boxes are only as wide as their text's measure plus padding, so a wide window doesn't leave an empty right half. */
.card {
  --pad-x: clamp(1.4rem, 1rem + 1vw, 2.2rem);
  background-color: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.9rem) var(--pad-x);
  margin: 1.5rem 0;
  max-width: calc(var(--measure) + 2 * var(--pad-x) + 2px);
}

.card p:last-child {
  margin-bottom: 0;
}

.notice {
  --pad-x: clamp(1.25rem, 1rem + 0.8vw, 1.9rem);
  border-left: 4px solid var(--sage-text);
  background-color: var(--surface);
  border-radius: 8px;
  padding: clamp(1rem, 0.8rem + 0.6vw, 1.5rem) var(--pad-x);
  margin: 1.5rem 0;
  max-width: calc(var(--measure) + 2 * var(--pad-x) + 4px);
}

.notice p {
  margin-bottom: 0;
}

/* ---------- Buttons / links ---------- */

.btn {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  padding: 0.85em 1.4em;
  border-radius: 12px;
  min-height: 48px;
  line-height: 1.2;
  text-align: center;
}

.btn-primary {
  background-color: var(--button-fill);
  color: var(--on-button);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  text-decoration: none;
  filter: brightness(1.08);
}

.btn-outline {
  border: 1.5px solid var(--paper);
  color: var(--ink-secondary);
  background: transparent;
}

.underline-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--paper);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* ---------- Text on an ink plate ---------- */

.on-plate {
  color: var(--on-plate);
}

.on-plate .eyebrow {
  color: var(--on-plate-tertiary);
}

.on-plate h1,
.on-plate h2 {
  color: var(--on-plate);
}

.on-plate p {
  color: var(--on-plate-secondary);
}

/* Links on an ink plate use the plate's own text color (the page link color is ink too). */
.on-plate .underline-link {
  color: var(--on-plate);
}

/* ---------- Home hero: an edge-to-edge ink plate, the Today phone overlapping its bottom edge ----------
   One grid: the plate spans the full width as a decorative layer, and the copy and phone sit on the page grid
   above it. Phones and tablets stack the copy over the phone, which reaches 74px up into the plate. From 960px the
   phone moves beside the copy and hangs below the plate by --overhang. */

.hero {
  --phone-w: 220px;
  --bezel: 10px;
  --overlap: 74px;
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--grid-max)) [content-end] minmax(var(--gutter), 1fr) [full-end];
  grid-template-rows: auto var(--overlap) auto;
}

.hero-plate {
  grid-column: full;
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
  background-color: var(--plate-ink);
  border-radius: 0 0 26px 26px;
}

.plate-ellipse {
  position: absolute;
  left: -18%;
  bottom: -55%;
  width: 140%;
  height: 90%;
  border-radius: 50%;
  background-color: var(--plate-ink-raised);
}

.hero-copy {
  grid-column: content;
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding: 2.5rem 0 calc(6.5rem - var(--overlap));
}

.hero h1 {
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 0.35em;
}

.hero-lede {
  font-size: var(--text-lede);
  max-width: var(--measure);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.hero-authorship {
  margin-top: clamp(1.5rem, 1rem + 1vw, 2.25rem);
  font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
  max-width: 40ch;
}

.hero-shot {
  grid-column: content;
  grid-row: 2 / 4;
  justify-self: center;
  position: relative;
  z-index: 2;
}

/* ---------- Phone screenshots ---------- */

.phone-frame {
  display: block;
  width: calc(var(--phone-w, 220px) + 2 * var(--bezel, 10px));
  max-width: 100%;
  padding: var(--bezel, 10px);
  border-radius: calc(var(--phone-w, 220px) * 0.13 + var(--bezel, 10px));
  background-color: var(--plate-ink);
  line-height: 0;
}

.phone-frame img {
  width: 100%;
  border-radius: calc(var(--phone-w, 220px) * 0.13);
}

/* Lift: only the phone that overlaps a plate gets a shadow. */
.hero-shot .phone-frame {
  box-shadow: 0 18px 34px rgba(47, 41, 99, 0.28);
}

.feature-shot,
.inline-shot {
  --phone-w: 220px;
  margin: 1.75rem 0 0.5rem;
}

.feature-shot .phone-frame,
.inline-shot .phone-frame {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- ER Packet highlight (tangerine card overlapping an edge-to-edge ink plate) ---------- */

.er-band {
  background-color: var(--plate-ink);
  margin-top: clamp(3rem, 2rem + 3vw, 5.5rem);
  padding-top: clamp(1.75rem, 1rem + 3vw, 4.5rem);
  padding-bottom: calc(70px + clamp(1.5rem, 1rem + 2vw, 3rem));
  border-radius: 0 0 26px 26px;
}

.er-band .eyebrow {
  margin-bottom: 0.6rem;
}

.er-band h2 {
  font-size: var(--text-section);
  margin: 0 0 0.5em;
}

.er-band p {
  font-size: var(--text-lede);
}

.er-card {
  margin-top: -70px;
  position: relative;
  z-index: 2;
}

.er-card-inner {
  background-color: var(--flag);
  color: var(--on-flag);
  border-radius: 18px;
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem) clamp(1.6rem, 1rem + 2vw, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  box-shadow: 0 10px 26px rgba(239, 148, 108, 0.35);
}

.er-card-inner h3 {
  font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback", sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  letter-spacing: -0.03em;
  margin: 0.15rem 0 0;
  color: var(--on-flag);
}

.er-card-inner .tag {
  font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.85rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-flag);
}

.er-card-inner .btn-primary {
  background-color: var(--plate-ink);
  color: var(--on-plate);
  white-space: nowrap;
}

/* ---------- Home sections ---------- */

.section {
  margin-top: var(--section-gap);
}

.section h2 {
  font-size: var(--text-section);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-top: 0;
}

/* ---------- Register (numbered, ruled) ---------- */

.register {
  list-style: none;
  padding: 0;
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0 0;
  border-top: 2px solid var(--ink);
}

.register li {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}

.register a {
  display: flex;
  align-items: baseline;
  gap: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.75rem) 0.25rem;
  text-decoration: none;
  color: inherit;
}

.register a:hover .register-title,
.register a:focus-visible .register-title {
  text-decoration: underline;
}

.register-num {
  font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--numeral-muted);
  flex: none;
  width: 1.4em;
}

.register-body {
  flex: 1;
}

.register-title {
  display: block;
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  color: var(--ink);
}

.register-detail {
  display: block;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem);
  color: var(--ink-secondary);
  margin-top: 0.2rem;
  max-width: 36em;
}

/* ---------- Staggered binder index tabs (related-page links) ---------- */

.index-tabs {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.index-tabs li:nth-child(4n+2) { margin-right: 2.5rem; }
.index-tabs li:nth-child(4n+3) { margin-right: 1.2rem; }
.index-tabs li:nth-child(4n+4) { margin-right: 3.2rem; }

.index-tab {
  display: block;
  border-radius: 4px 16px 16px 4px;
  padding: clamp(0.9rem, 0.75rem + 0.4vw, 1.15rem) clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  color: var(--on-plate);
}

.index-tab .tab-sub {
  display: block;
  font-weight: 500;
  font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.975rem);
  margin-top: 0.15rem;
}

.index-tab:hover,
.index-tab:focus-visible {
  text-decoration: underline;
}

.index-tab--sage { background-color: var(--plate-sage); }
.index-tab--indigo { background-color: var(--plate-indigo); }
.index-tab--fawn { background-color: var(--paper); color: var(--on-paper); }
.index-tab--fawn .tab-sub { color: var(--on-paper-secondary); }
.index-tab--flag { background-color: var(--flag); color: var(--on-flag); }
.index-tab--flag .tab-sub { color: var(--on-flag-secondary); }

/* ---------- Screens strip ---------- */

.screens-strip {
  --phone-w: 150px;
  --bezel: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 0.75rem;
  margin: clamp(1.75rem, 1rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.screens-strip li {
  margin: 0;
  text-align: center;
}

.screens-strip figure {
  margin: 0;
}

.screens-strip .phone-frame {
  margin: 0 auto;
}

.screens-strip figcaption {
  margin: 0.75rem auto 0;
  max-width: 24em;
  font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
  font-weight: 600;
  color: var(--ink-secondary);
}

/* ---------- Stripe card (ink, privacy) ---------- */

.stripe-card {
  --pad-x: clamp(1.4rem, 1rem + 1.5vw, 2.5rem);
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
  margin: 1.5rem 0;
  max-width: calc(var(--measure) + 2 * var(--pad-x) + 8px);
}

.stripe-card-bar {
  width: 8px;
  flex: none;
  background-color: var(--accent);
}

.stripe-card--flag .stripe-card-bar {
  background-color: var(--flag);
}

.stripe-card-body {
  padding: clamp(1.25rem, 1rem + 1vw, 2.25rem) var(--pad-x);
}

.stripe-card--ink {
  background-color: var(--plate-ink);
  color: var(--on-plate);
}

.stripe-card--ink h2,
.stripe-card--ink h3 {
  color: var(--on-plate);
  margin-top: 0;
}

.stripe-card--ink p {
  color: var(--on-plate-secondary);
  margin-bottom: 0;
}

.stripe-card--ink a {
  color: var(--paper);
}

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  grid-template-columns: 1fr;
  margin: 1.5rem 0;
}

.price-card {
  background-color: var(--surface);
  border: 1.5px solid var(--card-border);
  border-radius: 18px;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.75rem) clamp(1.6rem, 1rem + 2vw, 3rem);
}

.price-card--featured {
  border-color: var(--flag);
  border-width: 2px;
}

.price-card h3 {
  margin-top: 0;
  font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback", sans-serif;
  font-size: clamp(1.3rem, 1rem + 0.9vw, 1.9rem);
  letter-spacing: -0.02em;
}

.price-card .price {
  font-family: "Bricolage Grotesque", "Bricolage Grotesque Fallback", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: block;
  margin: 0.35rem 0 0.9rem;
}

.price-card .price small {
  font-family: "Figtree", sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-secondary);
}

.price-card ul {
  padding-left: 1.2em;
}

.price-card p:last-child {
  margin-bottom: 0;
}

/* ---------- FAQ (native <details>/<summary>, no JavaScript) ---------- */

.faq-list {
  margin: 1.5rem 0;
}

.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 0.3rem 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
  list-style: revert;
  padding: clamp(0.6rem, 0.45rem + 0.4vw, 0.9rem) 0;
}

.faq-item summary::marker {
  color: var(--sage-text);
}

.faq-item[open] summary {
  margin-bottom: 0.1rem;
}

.faq-item p {
  margin: 0 0 0.6rem;
}

/* ---------- Legacy dl.faq (support.html — content unchanged) ---------- */

dl.faq dt {
  font-weight: 700;
  color: var(--ink);
  margin-top: 1.5rem;
}

dl.faq dd {
  margin: 0.35rem 0 0;
  color: var(--ink-secondary);
}

/* ---------- Tables (privacy/terms/pricing) ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
}

caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

th, td {
  text-align: left;
  padding: 0.6em 0.75em;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-secondary);
}

th {
  color: var(--ink);
}

/* ---------- CTA section (repeated near the end of every page) ---------- */

.cta-section {
  text-align: center;
  background-color: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: clamp(2rem, 1.25rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  margin: var(--section-gap) 0 0;
}

.cta-section h2 {
  font-size: var(--text-section);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 22ch;
  margin: 0 auto 0.5em;
}

.cta-section p {
  margin-left: auto;
  margin-right: auto;
}

.cta-section .cta-pill {
  margin-top: 0.75rem;
}

/* ---------- Related links list ---------- */

.related-links {
  margin: 1.5rem 0;
  padding-left: 0;
  list-style: none;
}

.related-links li {
  margin: 0;
}

.related-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* ---------- Footer ---------- */

footer.site-footer {
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  color: var(--ink-secondary);
  font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.0625rem);
}

footer.site-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem clamp(2rem, 1rem + 5vw, 6rem);
  margin-bottom: 1.5rem;
  padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-top: 1px solid var(--rule);
}

footer.site-footer h2 {
  font-family: "Figtree", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin: 0 0 0.25rem;
}

footer.site-footer nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer.site-footer nav li {
  margin: 0;
}

footer.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink-secondary);
  font-weight: 600;
  text-decoration: none;
}

footer.site-footer nav a:hover {
  text-decoration: underline;
}

footer.site-footer .footer-legal {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

/* ---------- Utility ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Tablets: 640px and up ---------- */

@media (min-width: 640px) {
  .hero,
  .feature-shot,
  .inline-shot {
    --phone-w: 260px;
  }

  .screens-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem 1.5rem;
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Two-column hero and ER band: 960px and up ---------- */

@media (min-width: 960px) {
  .hero {
    --phone-w: clamp(300px, 24vw, 400px);
    --bezel: 12px;
    --overhang: clamp(4.5rem, 6vw, 7rem);
    --shot-col: calc(var(--phone-w) + 2 * var(--bezel));
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] minmax(0, calc(var(--grid-max) - var(--shot-col)))
      [shot-start] var(--shot-col)
      [content-end] minmax(var(--gutter), 1fr)
      [full-end];
    grid-template-rows: auto var(--overhang);
  }

  .hero-plate {
    grid-row: 1;
  }

  .hero-copy {
    grid-column: content-start / shot-start;
    grid-row: 1;
    align-self: center;
    padding: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 5vw, 5rem) clamp(3rem, 5vw, 5rem) 0;
  }

  .hero-shot {
    grid-column: shot-start / content-end;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: end;
    padding-top: clamp(2.5rem, 4vw, 4rem);
  }

  /* The eyebrow runs above both columns; the heading and its paragraph start on the same line. */
  .er-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  .er-band-inner .eyebrow {
    grid-column: 1 / -1;
  }

  .er-band-inner h2 {
    grid-column: 1;
    grid-row: 2;
  }

  .er-band-inner p {
    grid-column: 2;
    grid-row: 2;
    margin: 0.3em 0 0;
  }
}

/* ---------- Wide windows: 1100px and up ---------- */

@media (min-width: 1100px) {
  /* 01–06 read down the left column, then the right. */
  .register {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: clamp(3rem, 6vw, 6rem);
    border-top: 0;
  }

  .register li:nth-child(3n+1) {
    border-top: 2px solid var(--ink);
  }

  .screens-strip {
    --phone-w: clamp(220px, 18vw, 280px);
    --bezel: 10px;
    gap: clamp(3rem, 4vw, 4.5rem) clamp(2rem, 4vw, 4rem);
  }

  /* Heading beside its content: .split wraps the two sides; .rail puts a section's own h2 on the left. */
  .split,
  .rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(58%, 40rem));
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  .split-head h2,
  .rail > h2 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .split > .split-body,
  .rail > :not(h2) {
    margin-top: 0;
  }

  .rail > h2 {
    grid-column: 1;
    grid-row: 1 / span 8;
  }

  .rail > :not(h2) {
    grid-column: 2;
  }

  .rail {
    margin-top: clamp(3rem, 2rem + 3vw, 5.5rem);
  }

  .rail.section {
    margin-top: var(--section-gap);
  }

  /* Feature pages: the article beside a screenshot that stays in view while the page scrolls. The phone is never
     taller than the window. */
  .feature-layout {
    --phone-w: min(clamp(280px, 22vw, 340px), calc((100vh - 6rem) * 0.44));
    --bezel: 12px;
    display: grid;
    grid-template-columns: minmax(0, 42rem) minmax(calc(var(--phone-w) + 2 * var(--bezel)), 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 5vw, 6rem);
  }

  .feature-layout > .page-head {
    grid-column: 1;
    grid-row: 1;
  }

  .feature-layout > .feature-shot {
    --phone-w: inherit;
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    padding-top: clamp(2rem, 1rem + 2vw, 3.5rem);
  }

  .feature-layout > .feature-body {
    grid-column: 1;
    grid-row: 2;
  }

  .feature-shot .phone-frame {
    position: sticky;
    top: 2rem;
  }

  /* Footer: link columns on the left, the company lines on the right, under one rule. */
  footer.site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  footer.site-footer::before {
    content: "";
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
  }

  footer.site-footer .footer-grid,
  footer.site-footer .footer-legal {
    border-top: 0;
    margin-bottom: 0;
    padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  }
}

/* ---------- Small screens down to 320px wide ---------- */

@media (max-width: 480px) {
  nav.site-nav ul {
    gap: 0.75rem;
  }

  th, td {
    padding: 0.55em 0.45em;
  }

  .er-card-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .index-tabs li:nth-child(4n+2),
  .index-tabs li:nth-child(4n+3),
  .index-tabs li:nth-child(4n+4) {
    margin-right: 0;
  }
}

/* Pricing's three-column table on screens narrower than 375px, where its natural column widths don't fit: set
   column widths, long words hyphenated, 16px text. */
@media (max-width: 374px) {
  .compare-table {
    table-layout: fixed;
    font-size: 1rem;
  }

  .compare-table th,
  .compare-table td {
    padding-left: 0.3em;
    padding-right: 0.3em;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .compare-table thead th:nth-child(1) { width: 33%; }
  .compare-table thead th:nth-child(2) { width: 29%; }
  .compare-table thead th:nth-child(3) { width: 38%; }
}