/* ==========================================================================
   ezOIG marketing — "Case File"
   Served to the public pages only (views/marketing.templ); the app keeps the
   Tailwind build in app.built.css. Plain CSS, no build step.

   Colour mode shares the app's mechanism: `html.dark` is set by the pre-paint
   themeScript from localStorage 'mode', else the OS preference, and toggled
   by app.js. With scripts off the page is light.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset). Manrope is a variable face.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/manrope-variable.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: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/special-elite-400.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/plex-mono-500.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Theme tokens
   -------------------------------------------------------------------------- */

:root {
  --paper: #fcfbf8;
  --ink: #2b2622;
  --ink2: #4d463f;
  --ink3: #736b62;
  --rule: #e8e3d8;
  --line: #d6d0c4;
  --manila: #efe3b8;
  --manila2: #e8d9a8;
  --edge: #cdbd86;
  --onmanila: #4a3f1c;
  /* The design's #e63946 measures 4.03:1 on paper and 4.17:1 under white
     text; this is the nearest same-hue red that clears WCAG AA (4.5:1) in
     every pairing on these pages, which the e2e suite enforces. */
  --red: #d71b29;
  --card: #ffffff;
  --sunken: #f5f1e8;
  /* Foreground for text on a --red fill. White here; near black in dark
     mode, where --red lightens to #ff6b76 and white would be 2.8:1. */
  --btnfg: #ffffff;
  color-scheme: light;
}

html.dark {
  --paper: #141310;
  --ink: #f6f1e6;
  --ink2: #dcd5c6;
  --ink3: #b3aa9a;
  --rule: #3a362e;
  --line: #544e42;
  --manila: #a08a45;
  /* Lifted from the design's #8a7639 so the 12px tab labels clear 4.5:1. */
  --manila2: #927e3e;
  --edge: #c4ac5a;
  --onmanila: #1a160a;
  --red: #ff6b76;
  --card: #1f1c16;
  --sunken: #1a1813;
  --btnfg: #141310;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cf-page {
  min-height: 100vh;
  background: var(--paper);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

svg { max-width: 100%; }

h1, h2, h3, h4 { text-wrap: balance; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.cf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cf-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 40;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  transition: top .2s;
}
.cf-skip:focus { top: 8px; color: var(--paper); }

/* Shared horizontal page gutter. Vertical padding lives on each section. */
.cf-pad { padding-inline: 48px; }

/* Tokens as SVG paint, so the inline drawings recolour with the theme. */
.cf-fill-red { fill: var(--red); }
.cf-fill-ink2 { fill: var(--ink2); }
.cf-fill-ink3 { fill: var(--ink3); }
.cf-fill-manila { fill: var(--manila); }
.cf-fill-manila2 { fill: var(--manila2); }
.cf-fill-onmanila { fill: var(--onmanila); }
.cf-stroke-red { stroke: var(--red); }
.cf-stroke-ink { stroke: var(--ink); }
.cf-stroke-ink3 { stroke: var(--ink3); }
.cf-stroke-line { stroke: var(--line); }
.cf-stroke-edge { stroke: var(--edge); }
.cf-sheet { fill: var(--card); stroke: var(--line); }
.cf-art-accent { stroke: var(--red); }
.cf-art-fill { fill: var(--manila); stroke: none; opacity: .9; }

/* --------------------------------------------------------------------------
   4. Type roles
   Special Elite carries the motif: eyebrows, stamps, folder tabs, captions,
   the wordmark. Manrope carries the reading load.
   -------------------------------------------------------------------------- */

.cf-type { font-family: 'Special Elite', 'Courier New', monospace; }

.cf-eyebrow {
  margin: 0 0 12px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--red);
}

.cf-h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.05;
}

.cf-h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
}

.cf-lede {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink2);
}
.cf-lede.cf-type { font-size: 14px; color: var(--ink3); }

/* --------------------------------------------------------------------------
   5. Surfaces & buttons
   -------------------------------------------------------------------------- */

/* Ruled notebook paper — page headers only, never behind body copy. */
.cf-ruled {
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px);
}

.cf-btn {
  display: inline-block;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
}

.cf-btn--red { background: var(--red); color: var(--btnfg); }
.cf-btn--red:hover { color: var(--btnfg); opacity: .9; }

.cf-btn--ink { background: var(--ink); color: var(--paper); }
.cf-btn--ink:hover { color: var(--paper); opacity: .88; }

.cf-btn--outline {
  padding: 12px 22px;
  border: 2px solid var(--ink);
  color: var(--ink);
}
.cf-btn--outline:hover { color: var(--red); border-color: var(--red); }

/* Outline button on the inverted CTA band. */
.cf-band .cf-btn--outline { border-color: var(--paper); color: var(--paper); }
.cf-band .cf-btn--outline:hover { opacity: .8; color: var(--paper); }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */

.cf-nav {
  display: flex;
  align-items: center;
  height: 64px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: transform .32s cubic-bezier(.2, 0, 0, 1);
}
/* Slides away once the visitor scrolls past it; returns at the top. */
.cf-nav.is-hidden { transform: translateY(-100%); }

.cf-brand { display: flex; align-items: center; gap: 10px; }
.cf-brand:hover { color: inherit; }

.cf-brand-mark {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  flex-shrink: 0;
}
.cf-brand-mark svg { width: 17px; fill: var(--paper); }

.cf-wordmark {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 20px;
}

.cf-navlinks {
  margin-left: 40px;
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 700;
}
.cf-navlinks a[aria-current="page"] { border-bottom: 2px solid var(--red); }

.cf-navactions {
  margin-left: auto;
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}
.cf-navactions .cf-btn--red { padding: 9px 16px; }

/* Colour-mode toggle — a small manila tab. Both icons are in the DOM; the
   one for the current mode shows. */
.cf-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  background: var(--manila);
  color: var(--onmanila);
  border: 0;
  border-bottom: 3px solid var(--edge);
  border-radius: 3px 3px 0 0;
  font: inherit;
}
.cf-theme:hover { background: var(--manila2); }
.cf-theme svg { width: 17px; height: 17px; display: block; }
.cf-theme .cf-theme-dark { display: none; }
html.dark .cf-theme .cf-theme-dark { display: block; }
html.dark .cf-theme .cf-theme-light { display: none; }

/* Mobile menu — a native <details>; app.js closes it on an outside click. */
.cf-menu { position: relative; }
.cf-menu > summary {
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.cf-menu > summary::-webkit-details-marker { display: none; }
.cf-menu > summary svg { width: 22px; }

.cf-menu-panel {
  position: absolute;
  right: 0;
  top: 48px;
  width: 220px;
  background: var(--card);
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 700;
}
.cf-menu-panel a {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cf-menu-panel a:last-child {
  border-bottom: 0;
  background: var(--red);
  color: var(--btnfg);
}

/* --------------------------------------------------------------------------
   7. Page header (Features / Pricing / Contact / legal)
   -------------------------------------------------------------------------- */

.cf-head {
  padding-block: 64px 48px;
  border-bottom: 2px solid var(--ink);
}

.cf-head--split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

/* Pricing sits a little tighter above the billing band. */
.cf-head--rates { padding-bottom: 40px; gap: 32px; }

.cf-head-art { width: 240px; }
.cf-head-art--invoice { width: 180px; }

/* --------------------------------------------------------------------------
   8. CTA band
   -------------------------------------------------------------------------- */

.cf-band {
  margin: 64px 48px;
  padding: 48px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.cf-band h2 { margin: 0; }
.cf-band p { margin: 10px 0 0; max-width: 480px; font-size: 15.5px; line-height: 1.6; opacity: .8; }
.cf-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cf-band--tight { padding: 40px 48px; }
.cf-band--tight h2 { font-size: clamp(26px, 3vw, 36px); }
.cf-band--tight p { margin: 8px 0 0; font-size: 15px; }

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.cf-footer {
  border-top: 2px solid var(--ink);
  padding-block: 48px 32px;
}

.cf-footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}

.cf-footer-blurb {
  margin: 10px 0 0;
  max-width: 300px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink2);
}

.cf-footer-mail {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--red);
}

.cf-footer h4 {
  margin: 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink3);
  font-weight: 400;
}

.cf-footer ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.cf-footer-base {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  color: var(--ink3);
}

/* --------------------------------------------------------------------------
   10. Landing page
   -------------------------------------------------------------------------- */

.cf-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding-block: 36px 28px;
  /* Sized so the registries strip below sits at the bottom of the first screen. */
  min-height: calc(100svh - 64px - 170px);
}

.cf-hero h1 {
  margin: 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  text-wrap: balance;
  min-height: 2.1em;
}

.cf-caret {
  display: inline-block;
  width: .08em;
  height: .85em;
  vertical-align: -0.08em;
  margin-left: 4px;
  background: var(--red);
  animation: cfBlink 1s steps(1) infinite;
}
.cf-caret[hidden] { display: none; }

.cf-hero p {
  margin: 28px 0 0;
  max-width: 460px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink2);
}

.cf-hero-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cf-hero-actions .cf-btn--outline { padding: 12px 20px; }

.cf-hero-terms {
  margin: 24px 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 14px;
  color: var(--ink);
}
.cf-hero-terms .cf-dot { color: var(--ink3); }

.cf-chip {
  background: var(--manila);
  color: var(--onmanila);
  padding: 4px 10px;
  border-bottom: 2px solid var(--edge);
}

.cf-registries {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
}

/* Registries wrap onto as many rows as they need: the list grows as the
   product adds them, so the label takes its own row and each entry is a ruled
   line rather than a fixed column. */
/* The strip is a wrapping row rather than a grid: auto-fit would keep adding
   empty columns past the last registry on a wide display and drift the row
   apart, and the count is set in Go, not here. */
.cf-registries-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 36px;
  padding-block: 36px;
}

.cf-registries-grid > .cf-registry {
  flex: 1 1 230px;
  max-width: 100%;
}

.cf-registries-grid > .cf-registries-label {
  flex: 0 0 100%;
  padding-bottom: 14px;
}

.cf-registries-label {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--red);
}

.cf-registry {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.cf-registry-tab {
  flex-shrink: 0;
  width: 30px;
  height: 22px;
  margin-top: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--manila);
  border-bottom: 3px solid var(--edge);
}

.cf-registry-name {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cf-registry-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  vertical-align: 2px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink3);
}

.cf-registry-detail {
  display: block;
  margin-top: 5px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12.5px;
  color: var(--ink3);
}

.cf-steps { display: grid; grid-template-columns: repeat(3, 1fr); }

.cf-step { padding-block: 40px; border-right: 1px solid var(--line); }
.cf-step:last-child { border-right: 0; }
.cf-step > svg { width: 56px; display: block; }
.cf-step-n {
  margin-top: 20px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 13px;
  color: var(--red);
}
.cf-step h3 { margin: 8px 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.cf-step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }

.cf-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}
.cf-section-note {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 13px;
  color: var(--ink3);
}

.cf-caps {
  border-top: 2px solid var(--ink);
  padding-block: 72px;
}

.cf-caps-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cf-cap {
  position: relative;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 28px 28px 24px;
}
.cf-cap-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.cf-cap-top svg { width: 48px; display: block; grid-column: 2; }
.cf-cap-badge { justify-self: end; }
.cf-cap h3 {
  margin: 8px 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}
.cf-cap p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink2); text-align: center; }

.cf-soon {
  display: inline-block;
  border: 1.5px solid var(--red);
  color: var(--red);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 11px;
  padding: 3px 8px;
  transform: rotate(3deg);
}
.cf-soon--ccw { transform: rotate(-3deg); }

.cf-why {
  border-top: 2px solid var(--ink);
  background: var(--sunken);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-block: 72px;
  align-items: center;
}
.cf-why > div > p { margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink2); }
.cf-why ul { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.cf-why li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.cf-why-n {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 14px;
  color: var(--red);
  padding-top: 2px;
}
.cf-why-title { font-size: 15.5px; font-weight: 800; }
.cf-why-body { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--ink2); }

.cf-cabinet { width: 100%; max-width: 520px; justify-self: center; display: block; }

.cf-final {
  margin: 72px 48px;
  padding: 56px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cf-final h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.05;
}
.cf-final p { margin: 16px 0 0; max-width: 520px; font-size: 16px; line-height: 1.6; opacity: .8; }
.cf-final-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.cf-final-actions .cf-btn--outline { border-color: var(--paper); color: var(--paper); }
.cf-final-actions .cf-btn--outline:hover { opacity: .8; color: var(--paper); }
.cf-final-stamp { width: 220px; }

/* --------------------------------------------------------------------------
   11. Features page
   -------------------------------------------------------------------------- */

.cf-toc { margin: 0; padding: 0; list-style: none; }

.cf-toc > li {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 24px 40px;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.cf-toc-n {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 13px;
  color: var(--red);
  line-height: 1.8;
}

.cf-toc-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cf-toc-title h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 2.6vw, 32px);
}

.cf-toc p { margin: 14px 0 0; max-width: 520px; font-size: 15.5px; line-height: 1.6; color: var(--ink2); }

.cf-checks {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink2);
}
.cf-checks li { display: flex; gap: 10px; }
.cf-check {
  color: var(--red);
  font-family: 'Special Elite', 'Courier New', monospace;
}

.cf-art {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.cf-art svg { width: 100%; max-width: 280px; }

/* --------------------------------------------------------------------------
   12. Pricing page
   -------------------------------------------------------------------------- */

/* Figures on the rate card: counts and rates line up in the mono face. */
.cf-num {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  color: var(--ink2);
}

.cf-billing {
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
  padding-block: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}

.cf-billing-label {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 14px;
  color: var(--ink2);
}

/* Two links, so the switch works with scripts off. */
.cf-switch {
  display: inline-flex;
  border: 2px solid var(--ink);
  background: var(--card);
  font-size: 17px;
  font-weight: 800;
}
.cf-switch a {
  padding: 16px 32px;
  min-width: 150px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.cf-switch a:hover { color: var(--red); }
.cf-switch a[aria-current="true"],
.cf-switch a[aria-current="true"]:hover { background: var(--red); color: var(--btnfg); }

.cf-save {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 400;
  border: 1.5px solid currentColor;
  padding: 2px 7px;
  transform: rotate(-4deg);
  white-space: nowrap;
}

.cf-plans {
  padding-block: 64px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px;
  align-items: end;
}

.cf-plan { position: relative; }

/* The tab row. The sheets filed behind the folder live here too: plan N
   sits on 2N sheets that peek above the folder's top edge, to the right of
   the tab, 3px a sheet, so the bigger the plan the thicker the file. --n is
   the sheet count (set per rank), --k the sheet's index from the back. */
.cf-plan-top { position: relative; height: 26px; z-index: 0; }
.cf-plan-sheets { position: absolute; inset: 0; pointer-events: none; }
.cf-plan-sheet {
  --d: calc((var(--n) - var(--k)) * 3px);
  position: absolute;
  left: calc(200px + var(--k) * 4px);
  right: calc(10px + var(--d));
  top: calc(26px - var(--d));
  height: calc(var(--d) + 20px);
  background: var(--card);
  border: 1px solid var(--line);
}
.cf-plan-sheet:nth-child(1) { --k: 0; }
.cf-plan-sheet:nth-child(2) { --k: 1; }
.cf-plan-sheet:nth-child(3) { --k: 2; }
.cf-plan-sheet:nth-child(4) { --k: 3; }
.cf-plan-sheet:nth-child(5) { --k: 4; }
.cf-plan-sheet:nth-child(6) { --k: 5; }
.cf-plan[data-rank="1"] .cf-plan-sheets { --n: 2; }
.cf-plan[data-rank="2"] .cf-plan-sheets { --n: 4; }
.cf-plan[data-rank="3"] .cf-plan-sheets { --n: 6; }

.cf-plan-tab {
  /* 150px in the design; sized to the label so "BINDER · ANNUALLY" is never
     truncated — a folder tab fits its label. */
  position: relative;
  min-width: 150px;
  width: max-content;
  max-width: 100%;
  height: 26px;
  background: var(--manila2);
  border-radius: 6px 6px 0 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  line-height: 12px;
  padding: 7px 14px;
  color: var(--onmanila);
  white-space: nowrap;
}

/* The folder paints over the sheets' lower edge. */
.cf-plan-folder {
  position: relative;
  z-index: 1;
  background: var(--manila2);
  padding: 10px;
  border-top: 1px solid var(--edge);
}

.cf-plan--featured .cf-plan-tab,
.cf-plan--featured .cf-plan-folder { background: var(--manila); }

.cf-plan-body {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 28px 24px;
  position: relative;
}

.cf-plan-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  min-height: 26px;
  margin: -6px 0 8px;
}
.cf-plan-no {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink3);
  padding-top: 6px;
}

.cf-stamp-badge {
  display: inline-block;
  border: 2.5px solid var(--red);
  color: var(--red);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  padding: 4px 10px;
}
/* A static tilt: the badge is a label, not a verdict, so it never stamps. */
.cf-stamp-badge--tilt { transform: rotate(-3deg); }

.cf-plan h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; font-size: 26px; }
.cf-plan-cap { margin: 6px 0 0; font-size: 14px; color: var(--ink3); }
.cf-plan-price { margin-top: 24px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cf-plan-amount { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.cf-plan-per { font-size: 15px; color: var(--ink3); }
.cf-plan-billing {
  margin: 8px 0 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12.5px;
  color: var(--ink3);
}
.cf-plan-rate {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px dotted var(--line);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink3);
}

.cf-plan-cta {
  display: block;
  margin-top: 24px;
  text-align: center;
  padding: 14px;
  font-weight: 700;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.cf-plan--featured .cf-plan-cta { background: var(--ink); color: var(--paper); }
.cf-plan-cta:hover { color: var(--red); }
.cf-plan--featured .cf-plan-cta:hover { color: var(--paper); opacity: .88; }

.cf-plans-note {
  margin: 0;
  padding-bottom: 56px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink3);
}
.cf-plans-note a { color: var(--red); font-weight: 700; }

/* "In every file": the bundle stated once as a ledger, since the plans do
   not differ by feature. */
.cf-bundle {
  border-top: 1px solid var(--line);
  padding-block: 56px 64px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px 48px;
}
.cf-bundle-lede {
  margin: 16px 0 0;
  max-width: 420px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink2);
}
.cf-bundle-points { margin-top: 32px; display: grid; gap: 18px; max-width: 420px; }
.cf-bundle-points p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink2); }
.cf-bundle-label {
  margin: 0 !important;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px !important;
  letter-spacing: .1em;
  color: var(--ink3) !important;
}

.cf-ledger {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 8px 28px 22px;
}
.cf-ledger-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 10px;
  border-bottom: 2px solid var(--ink);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink3);
}
.cf-ledger-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.cf-ledger-item { flex: 1 1 120px; min-width: 0; color: var(--ink); }
.cf-ledger-dots {
  flex: 1 1 24px;
  min-width: 24px;
  border-bottom: 1px dotted var(--ink3);
  transform: translateY(-4px);
}
.cf-ledger-value {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
  text-align: right;
  text-wrap: balance;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink2);
}
.cf-ledger-value--red { color: var(--red); }
.cf-ledger-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink2);
  text-wrap: pretty;
}
.cf-ledger-note + .cf-ledger-note { margin-top: 10px; }
.cf-ledger-mark {
  font-family: 'Special Elite', 'Courier New', monospace;
  color: var(--red);
}

.cf-faqs {
  border-top: 2px solid var(--ink);
  background: var(--sunken);
  padding-block: 64px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}
.cf-faqs-art { width: 200px; margin-top: 28px; display: block; }

.cf-faq-list { border-top: 1px solid var(--ink); }
.cf-faq { border-bottom: 1px solid var(--line); }
.cf-faq > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 800;
  list-style: none;
}
.cf-faq > summary::-webkit-details-marker { display: none; }
.cf-faq-mark {
  font-family: 'Special Elite', 'Courier New', monospace;
  color: var(--red);
  flex-shrink: 0;
}
.cf-faq p { margin: 0 0 20px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--ink2); }

/* --------------------------------------------------------------------------
   13. Contact page
   -------------------------------------------------------------------------- */

.cf-contact {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  padding-block: 64px;
}

.cf-contact-aside { display: grid; gap: 20px; align-content: start; }
.cf-contact-art { width: 100%; max-width: 320px; }

.cf-note-folder { background: var(--manila); padding: 10px; }
.cf-note-folder--alt { background: var(--manila2); }
.cf-note {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 20px 22px;
}
.cf-note-label {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink3);
}
.cf-note-value { margin: 8px 0 0; font-size: 18px; font-weight: 800; display: block; }
.cf-note p { margin: 6px 0 0; font-size: 14px; color: var(--ink2); }

.cf-form {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 36px 40px;
}
.cf-form h2 { margin: 0; font-weight: 800; letter-spacing: -0.01em; font-size: 28px; }
.cf-form > p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink2); }
.cf-form-link { color: var(--red); font-weight: 700; }

.cf-fields {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
}
/* Contact form only: its labels wrap their inputs. The signed-out forms use
   .cf-field with a sibling label instead. */
.cf-form .cf-fields label { display: grid; gap: 4px; }
.cf-field--wide { grid-column: 1 / -1; }

.cf-field-label {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink3);
}

.cf-form input,
.cf-form select,
.cf-form textarea,
.cf-auth input,
.cf-auth select,
.cf-auth textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  padding: 10px 0;
  width: 100%;
  outline: none;
  border-radius: 0;
}
.cf-form input:focus,
.cf-form select:focus,
.cf-form textarea:focus,
.cf-auth input:focus,
.cf-auth select:focus,
.cf-auth textarea:focus { border-bottom-color: var(--red); }
.cf-form input::placeholder,
.cf-form textarea::placeholder,
.cf-auth input::placeholder { color: var(--ink3); opacity: 1; }
.cf-form textarea { resize: vertical; line-height: 1.6; }
.cf-form option,
.cf-auth option { color: var(--ink); background: var(--card); }

.cf-form-submit { margin-top: 28px; }
.cf-form .cf-field-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink3); }
.cf-form .cf-field-error { margin: 0; }
.cf-form > form > .cf-notice { margin-top: 24px; }
/* Turnstile collapses to nothing unless Cloudflare asks for a click. */
.cf-form .cf-captcha { margin-top: 20px; }
.cf-form .cf-captcha:empty { margin-top: 0; }
/* Honeypot: a field no person sees or tabs to. Bots that fill every input
   fill this one, and the server drops the submission. Moved off-canvas rather
   than display:none, which some form-fillers skip. */
.cf-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   13b. Signed-out pages — sign in, password reset, verification, signup
   One folder-tabbed record card on ruled paper (views/auth.templ).
   -------------------------------------------------------------------------- */

button.cf-btn { border: 0; cursor: pointer; font-family: inherit; }
button.cf-btn--outline { border: 2px solid var(--ink); background: transparent; }
.cf-btn--block { display: block; width: 100%; }
.cf-btn--google { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cf-google-mark { width: 18px; height: 18px; flex: none; }
.cf-btn:disabled { opacity: .6; cursor: default; }

.cf-link { color: var(--red); font-weight: 700; }
.cf-link--small { font-size: 13px; }
.cf-strong { color: var(--ink); font-weight: 800; }
.cf-req { color: var(--red); margin-left: 2px; }

.cf-auth-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}

.cf-auth {
  min-height: calc(100vh - 64px);
  padding-block: 48px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cf-auth-card { width: 100%; max-width: 460px; }
.cf-auth-card--wide { max-width: 700px; }

/* The folder: tab, manila surround, card. Same shape as a pricing plan. */
.cf-folder-tab {
  display: inline-block;
  min-width: 150px;
  max-width: 100%;
  height: 26px;
  background: var(--manila);
  border-radius: 6px 6px 0 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: .06em;
  padding: 7px 14px;
  color: var(--onmanila);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.cf-folder { background: var(--manila); padding: 10px; }
.cf-folder-body {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 32px 36px 28px;
}

.cf-auth h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 28px;
  line-height: 1.1;
}
.cf-auth-lede {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink2);
}
/* Inline links in running text get a little vertical padding so two on
   adjacent lines still clear the 24px tap-target rule on a phone. */
.cf-auth-lede a,
.cf-auth-alt a { color: var(--red); padding-block: 3px; }
.cf-auth-centred { text-align: center; }
.cf-auth-centred .cf-auth-lede { margin-inline: auto; max-width: 420px; }
.cf-auth-envelope { width: 120px; display: block; margin: 0 auto 12px; }

.cf-auth-subhead {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cf-auth-form { margin-top: 24px; display: grid; gap: 20px; }
.cf-auth-form .cf-auth-form { margin-top: 0; }
.cf-auth-inline-form { margin-top: 12px; }
.cf-auth-action { margin-top: 24px; }
.cf-auth-actions { display: flex; justify-content: flex-end; gap: 12px; }

.cf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.cf-fields--3 { grid-template-columns: 1fr 1fr 1fr; }
.cf-field { display: grid; gap: 4px; }
.cf-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cf-field-error { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--red); }
.cf-field-error--slot { min-height: 18px; }
.cf-auth [aria-invalid="true"] { border-bottom-color: var(--red); }

.cf-fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 20px; min-width: 0; }
.cf-legend {
  padding: 0;
  margin-bottom: 4px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--red);
}

/* Notices: neutral on sunken paper; danger in red ink; ok on a manila slip
   with a small typewriter tag. */
.cf-notice {
  margin-top: 20px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  background: var(--sunken);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink2);
}
.cf-notice p { margin: 0; }
.cf-notice p + p { margin-top: 4px; }
.cf-notice-title { font-weight: 800; color: inherit; }
.cf-notice--danger { border-color: var(--red); background: transparent; color: var(--red); }
.cf-notice--ok { border-color: var(--edge); background: var(--manila); color: var(--onmanila); }
.cf-notice-tag {
  display: inline-block;
  margin-bottom: 6px;
  border: 1.5px solid var(--red);
  color: var(--red);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 2px 7px;
  transform: rotate(-2deg);
}
.cf-auth-form > .cf-notice { margin-top: 0; }
/* The status on an error page (views/error_page.templ): a label, not a verdict. */
.cf-errorpage-code { margin: 0 0 18px; }

.cf-auth-foot {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  color: var(--ink3);
}
.cf-auth-foot svg { width: 13px; fill: var(--ink3); }
.cf-auth-alt { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--ink2); }
.cf-auth-divider { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.cf-auth-fine { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--ink3); }

/* Sign-in methods (views/login.templ). Without scripts both panels show,
   the single sign-on one under an OR rule; case-file.js unhides the tablist, adds
   .is-tabbed and hides whichever panel is not selected. */
.cf-signin-tabs {
  display: flex;
  margin-top: 24px;
  border-bottom: 1px solid var(--line);
}
.cf-signin-tabs[hidden] { display: none; }
.cf-signin-tabs [role="tab"] {
  flex: 1;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cf-signin-tabs [role="tab"]:hover { color: var(--ink); }
.cf-signin-tabs [role="tab"][aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.cf-signin-panel[hidden] { display: none; }
.cf-signin-panel:focus-visible { outline-offset: 6px; }

.cf-signin-sso { margin-top: 28px; }
.cf-signin-providers { display: grid; gap: 10px; }
.cf-signin-or,
.cf-passkey-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink3);
}
.cf-signin-or::before,
.cf-signin-or::after,
.cf-passkey-or::before,
.cf-passkey-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.cf-signin-head { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.cf-signin-copy { margin: 8px 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink2); }
.cf-signin-note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink3); }
.cf-signin-note a { padding-block: 3px; }

.cf-signin.is-tabbed .cf-signin-sso { margin-top: 24px; }
.cf-signin.is-tabbed .cf-signin-or,
.cf-signin.is-tabbed .cf-signin-head { display: none; }

/* Passkey sign-in, under the password form (views/passkeys.templ). */
.cf-passkey { margin-top: 20px; }
.cf-passkey[hidden] { display: none; }
.cf-btn--passkey { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cf-passkey-mark { width: 18px; height: 18px; flex: none; }
.cf-passkey-status { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.cf-passkey-status:empty { display: none; }
.cf-passkey-status.is-error { color: var(--red); }

/* Signup progress: four folder tabs in a row. */
.cf-progress {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.cf-progress-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px 6px 0 0;
  border-bottom: 3px solid var(--line);
  background: var(--sunken);
  color: var(--ink3);
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cf-progress-tab.is-current { background: var(--manila); color: var(--onmanila); border-color: var(--edge); }
.cf-progress-tab.is-done { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.cf-progress-n { flex-shrink: 0; }
.cf-progress-tab.is-done .cf-progress-n { color: var(--red); }
.cf-progress-label { overflow: hidden; text-overflow: ellipsis; }

.cf-plan-notice {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--edge);
  border-left-width: 6px;
  background: var(--sunken);
  font-size: 14px;
  color: var(--ink);
}
.cf-plan-notice strong { font-weight: 800; }
.cf-plan-notice-price { color: var(--ink3); }
.cf-plan-notice .cf-chip {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
}

.cf-plan-options { display: grid; gap: 10px; }
.cf-plan-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  background: var(--card);
  cursor: pointer;
}
.cf-plan-option:hover { border-color: var(--ink); }
.cf-plan-option:has(:checked) { border-color: var(--red); background: var(--sunken); }
.cf-plan-option-main { display: flex; align-items: center; gap: 12px; }
.cf-auth .cf-plan-option input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--red);
  flex-shrink: 0;
}
.cf-plan-option-name { display: block; font-size: 15px; font-weight: 800; }
.cf-plan-option-cap {
  display: block;
  font-size: 12.5px;
  color: var(--ink2);
}
.cf-plan-option-interval {
  display: block;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  color: var(--ink3);
}
.cf-plan-option-price { text-align: right; }
.cf-plan-option-amount { display: block; font-size: 15px; font-weight: 800; }
.cf-plan-option-save {
  display: block;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  color: var(--red);
}

/* Stripe mounts its iframe here; the input colours come from the tokens via
   app.js so it reads like the fields around it in both modes. */
.cf-card-element {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 14px;
}

.cf-summary {
  border: 1px solid var(--line);
  background: var(--sunken);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
}
.cf-summary-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.cf-summary-label {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink3);
}
.cf-summary-value { font-weight: 800; }

/* Two-step sign-in (views/twofactor_login.templ). The QR code carries its own
   white ground in both themes: scanners read dark modules on a light one. */
.cf-2fa-steps {
  margin: 20px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink2);
}
.cf-2fa-qr {
  width: 216px;
  max-width: 100%;
  margin: 20px auto 16px;
  padding: 6px;
  border: 1px solid var(--line);
  background: var(--card);
}
.cf-2fa-qr svg { display: block; width: 100%; height: auto; }
.cf-2fa-secret,
.cf-2fa-codes {
  border: 1px solid var(--line);
  background: var(--sunken);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
}
.cf-2fa-secret {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}
.cf-2fa-codes {
  margin: 20px 0 0;
  padding: 14px 16px;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 15px;
  letter-spacing: .04em;
  text-align: center;
}
@media (max-width: 380px) {
  .cf-2fa-codes { grid-template-columns: 1fr; }
}
.cf-2fa-phone { white-space: nowrap; }

/* --------------------------------------------------------------------------
   14. Legal pages
   -------------------------------------------------------------------------- */

.cf-legal { padding-block: 48px 80px; }

.cf-prose { max-width: 760px; }
.cf-prose h2 {
  margin: 44px 0 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 24px;
  line-height: 1.2;
}
.cf-prose h2:first-child { margin-top: 0; }
.cf-prose h3 {
  margin: 28px 0 8px;
  font-weight: 800;
  font-size: 17px;
}
.cf-prose p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink2);
}
.cf-prose ul {
  margin: 0 0 16px;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink2);
}
.cf-prose li { margin: 4px 0; }
.cf-prose li::marker { color: var(--red); }
.cf-prose strong { color: var(--ink); font-weight: 800; }
.cf-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}
.cf-prose code {
  font-family: "Special Elite", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The Cookie Policy's tables scroll inside their own box on a phone rather
   than widening the page. */
.cf-table-wrap { overflow-x: auto; margin: 0 0 20px; }
.cf-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink2);
}
.cf-table th {
  text-align: left;
  font-family: "Special Elite", ui-monospace, monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 12px 8px 0;
  border-bottom: 2px solid var(--ink);
}
.cf-table td {
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
}
/* A cookie name is copied, not read: never break it mid-word. The table
   scrolls in its wrapper instead. */
.cf-table code { white-space: nowrap; overflow-wrap: normal; }

/* --------------------------------------------------------------------------
   15. Motion
   -------------------------------------------------------------------------- */

@keyframes cfStamp {
  0%   { opacity: 0; transform: scale(2.4) rotate(-7deg); filter: blur(3px); }
  45%  { opacity: 1; transform: scale(.9) rotate(1deg); filter: blur(0); }
  60%  { transform: scale(1.05); }
  75%  { transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cfRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cfBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cfPull {
  from { opacity: 0; transform: translateY(110px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-stamp] {
  animation: cfStamp .55s cubic-bezier(.2, .9, .3, 1.2) both;
  animation-delay: var(--d, 1.1s);
  transform-origin: center;
  transform-box: fill-box;
}

[data-rise] {
  animation: cfRise .6s cubic-bezier(.2, 0, 0, 1) both;
  animation-delay: var(--d, .1s);
}

/* Pieces held back until first seen: case-file.js sets "off" before they
   are reached and "on" once, then never touches them again. Without the
   script the attribute has no value, so they simply play on load. "off"
   sets animation:none, so flipping to "on" starts the animation fresh. */
[data-pull="on"] { animation: cfPull .9s cubic-bezier(.2, .8, .2, 1) both; }
[data-pull="off"],
[data-pull="off"] [data-stamp],
[data-filed="off"] {
  opacity: 0 !important;
  visibility: hidden;
  animation: none !important;
}

/* Continuous, low-key motion on the Features illustrations. */
@keyframes cfFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-5px) rotate(-.6deg); }
}
@keyframes cfDrift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1.5px, -2px); }
}
@keyframes cfDrawLoop {
  0%   { stroke-dashoffset: var(--len); opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  82%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: var(--len); opacity: 0; }
}
@keyframes cfSlideUp {
  0%, 15%   { transform: translateY(0); }
  45%, 62%  { transform: translateY(-18px); }
  90%, 100% { transform: translateY(0); }
}
@keyframes cfFlap {
  0%, 18%   { opacity: 0; }
  42%, 64%  { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes cfDrop {
  0%   { transform: translateY(-10px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(8px); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}
@keyframes cfPing {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes cfShackle {
  0%, 30%   { transform: translateY(0); }
  48%, 70%  { transform: translateY(-10px); }
  88%, 100% { transform: translateY(0); }
}

/* Paused by default; case-file.js flips data-draw="on" while on screen so
   nothing burns frames off-screen. */
[data-draw] {
  animation: cfFloat 7s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
}
[data-draw] [data-fill] {
  animation: cfDrift 5.5s ease-in-out infinite;
  animation-play-state: paused;
}
[data-draw] [data-anim] {
  animation-play-state: paused;
  transform-origin: center;
  transform-box: fill-box;
}
/* --len is copied from data-len by the script; until then the dash rules are
   invalid and the accent simply shows, which is the no-script rendering. */
[data-anim="draw"] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: cfDrawLoop 3.8s ease-in-out infinite;
}
[data-anim="slideUp"] { animation: cfSlideUp 4.4s ease-in-out infinite; }
[data-anim="flap"]    { animation: cfFlap 4.4s ease-in-out infinite; }
[data-anim="drop"]    { animation: cfDrop 2.6s ease-in infinite; }
[data-anim="ping"]    { animation: cfPing 2s ease-out infinite; }
[data-anim="shackle"] { animation: cfShackle 4.6s ease-in-out infinite; }

[data-draw="on"],
[data-draw="on"] [data-fill],
[data-draw="on"] [data-anim] { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .cf-nav { transition: none; }
  [data-stamp],
  [data-rise],
  [data-pull],
  .cf-caret { animation: none !important; }
  [data-pull="off"],
  [data-pull="off"] [data-stamp],
  [data-filed="off"] { opacity: 1 !important; visibility: visible; }
  [data-draw],
  [data-draw] [data-fill],
  [data-draw] [data-anim] {
    animation: none !important;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   16. Responsive — a single breakpoint at 820px, as designed.
   -------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .cf-menu { display: none !important; }
}

@media (max-width: 820px) {
  .cf-navlinks,
  .cf-navactions .cf-desk { display: none !important; }

  .cf-navactions { gap: 8px; }

  .cf-pad { padding-inline: 20px; }

  .cf-head--split,
  .cf-hero,
  .cf-steps,
  .cf-caps-grid,
  .cf-why,
  .cf-final,
  .cf-faqs,
  .cf-bundle,
  .cf-contact,
  .cf-fields,
  .cf-toc > li { grid-template-columns: 1fr !important; }

  /* One registry a row: the strip is flex, so the grid reset above cannot
     reach it. */
  .cf-registries-grid > .cf-registry { flex-basis: 100%; }

  .cf-footer-cols { grid-template-columns: 1fr 1fr !important; }

  .cf-step { border-right: none; border-bottom: 1px solid var(--line); }
  .cf-step:last-child { border-bottom: 0; }

  .cf-band { margin-inline: 20px; padding-inline: 20px; }
  .cf-final { margin-inline: 20px; padding-inline: 20px; }

  .cf-form { padding-inline: 20px; }

  .cf-auth { padding-block: 28px 56px; }
  .cf-folder-body { padding: 24px 20px 22px; }
  .cf-fields,
  .cf-fields--3 { grid-template-columns: 1fr; }
  .cf-auth-actions .cf-btn { width: 100%; }

  .cf-switch { width: 100%; }
  .cf-switch a { flex: 1; min-width: 0; padding: 16px 12px; }
}

@media (max-width: 400px) {
  .cf-switch { flex-wrap: wrap; }
  .cf-switch a { flex-basis: 100%; }
}

/* Narrow phones: the progress tabs keep their numbers; only the current
   step keeps its label. */
@media (max-width: 520px) {
  .cf-progress-tab { padding-inline: 8px; gap: 6px; }
  .cf-progress-tab:not(.is-current) .cf-progress-label { display: none; }
  .cf-progress-tab.is-current { flex-grow: 2.5; }
}