/* reframable.com — one stylesheet for every page, in the One Finance design
   language ("The Quiet Ledger", data-web-frontend DESIGN.md): structure does
   the branding through hairlines, spacing and hierarchy, and one blue means
   something because it is rare. Tokens are that system's, on its hue 255.
   Type is its mobile ramp's system stack (the CSP allows no third-party
   styles or fonts). Light and dark follow the device; reduced motion,
   transparency and contrast are respected. */

:root {
  --background: oklch(0.995 0.002 255);   /* Paper */
  --foreground: oklch(0.16 0.012 255);    /* Ink */
  --card: oklch(0.995 0.002 255);
  --muted: oklch(0.965 0.005 255);        /* Surface Muted: the background step */
  --muted-foreground: oklch(0.53 0.02 255); /* Quiet Gray, the floor for text */
  --border: oklch(0.915 0.008 255);       /* Hairline */
  --ring: oklch(0.53 0.02 255);
  --primary: oklch(0.5 0.155 255);        /* Ledger Blue: the one voice */
  --primary-hover: oklch(0.45 0.155 255);
  --primary-foreground: oklch(0.98 0.005 255);
  --link: oklch(0.5 0.155 255);
  --chrome: oklch(0.995 0.002 255 / 80%);
  --shadow-float: 0 4px 16px oklch(0.16 0.012 255 / 10%);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);  /* the signature curve */
  --font: -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --gutter: max(16px, env(safe-area-inset-left));
  --measure: 68ch;
  color-scheme: light dark;
}

/* Dark: a fill keeps its light-mode lightness, an ink lightens to clear the
   ground (rule/dark-fill). */
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.16 0.01 255);
    --foreground: oklch(0.97 0.004 255);
    --card: oklch(0.215 0.012 255);
    --muted: oklch(0.215 0.012 255);
    --muted-foreground: oklch(0.72 0.015 255);
    --border: oklch(1 0 0 / 10%);
    --ring: oklch(0.72 0.015 255);
    --primary: oklch(0.5 0.139 255);
    --primary-hover: oklch(0.56 0.139 255);
    --link: oklch(0.75 0.11 255);
    --chrome: oklch(0.16 0.01 255 / 80%);
    --shadow-float: 0 4px 16px oklch(0 0 0 / 40%);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--background);
  scroll-padding-top: 72px; /* anchors land below the sticky header */
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 1rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

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

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

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--card);
  color: var(--foreground);
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-float); /* it floats above the page */
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header: a translucent layer content scrolls under ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

/* The Re- wordmark every Reframable name shares (Reframable, Recount,
   Reroute): "Re" in Ledger Blue, the rest in ink, set tight and heavier
   than any heading because it is a logo, not type. The "Re" is an ink, so
   in dark it lightens with the links (rule/dark-fill). */
.brand {
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--foreground);
}
.brand-re { color: var(--link); }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.375rem;
  line-height: 1;
}
.wordmark:hover { text-decoration: none; }

.site-nav {
  display: flex;
  gap: 4px;
  font-size: 0.875rem;
}

.site-nav a {
  color: var(--muted-foreground);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.site-nav a:hover { color: var(--foreground); text-decoration: none; background: var(--muted); }
.site-nav a[aria-current="page"] { color: var(--foreground); font-weight: 500; }

/* Small phones: "Re" alone carries the brand so the nav fits. */
@media (max-width: 359px) {
  .wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .site-nav a { padding: 8px; }
}

/* ---------- Type: size promotes, weight stays quiet; only titles carry
   tracking (rule/weight-cap, rule/quiet-tracking) ---------- */

h1, h2, h3 { margin: 0; font-weight: 600; }

.display {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.headline {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.lede {
  font-size: clamp(1.125rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted-foreground);
  max-width: 36em;
}

/* The section overline: only across peer sections, and every peer takes it
   (rule/overline). Quiet Gray, not blue: blue is the one voice. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 12px;
}

.muted { color: var(--muted-foreground); }
p { margin: 0 0 1em; }

/* ---------- Sections ---------- */

.hero {
  padding-top: clamp(64px, 12vw, 128px);
  padding-bottom: clamp(48px, 8vw, 96px);
  text-align: center;
}
.hero .lede { margin: 24px auto 0; }

.section { padding: clamp(48px, 9vw, 96px) 0; }
.section.alt { background: var(--muted); border-block: 1px solid var(--border); }
.section-head { max-width: 40em; margin-bottom: clamp(32px, 5vw, 48px); }
.section-head .lede { margin-top: 12px; }

/* ---------- App feature (Recount) ---------- */

.app-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--border);
}

@media (min-width: 760px) {
  .app-card { grid-template-columns: auto 1fr; }
}

/* Stroke, not shadow: a resting surface separates with a ring. */
.app-icon {
  width: clamp(96px, 18vw, 168px);
  aspect-ratio: 1;
  border-radius: 22.5%;            /* the iOS icon's continuous corner, approximated */
  box-shadow: 0 0 0 1px var(--border);
}

.app-card h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.15; }
.app-card h2.brand { font-size: clamp(2.25rem, 5vw, 2.75rem); letter-spacing: -0.04em; line-height: 1.05; }
.app-card .tagline { font-size: 1.125rem; line-height: 1.5; color: var(--muted-foreground); margin: 8px 0 24px; }

/* A category is a neutral outline badge; a tint would mean state
   (rule/neutral-badge). Badges keep the pill (rule/pill-reservation). */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.badge {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.33;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--foreground);
}

/* ---------- Feature grid ---------- */

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* ---------- Screens: iPhone screenshots, a swipeable row on phones ---------- */

.screens {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter)) clamp(32px, 5vw, 48px);
  padding: 4px var(--gutter) 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(62vw, 240px);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.screens::-webkit-scrollbar { display: none; }
.screens li { scroll-snap-align: start; }
.screens figure { margin: 0; }
.screens img {
  display: block;
  width: 100%;
  height: auto;
  /* The iPhone's own corner, as a share of the screen's width and height. */
  border-radius: 13.5% / 6.2%;
  box-shadow: 0 0 0 1px var(--border);
  background: var(--muted);
}
.screens figcaption {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  text-align: center;
}
/* Wide screens: rows of four inside the page width, a short last row centred. */
@media (min-width: 1000px) {
  .screens {
    margin-inline: 0;
    padding-inline: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 32px;
    overflow: visible;
  }
  .screens li { flex: 0 0 calc((100% - 3 * 16px) / 4); }
}

.tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
}

/* The seal: a glyph in a framed tile, never a bare icon. */
.tile-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.tile-icon svg { width: 20px; height: 20px; stroke-width: 1.75; }

.tile h3 { font-size: 1rem; line-height: 1.3; margin-bottom: 4px; }
.tile p { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; margin: 0; }

/* ---------- Buttons: one primary per view; press is a 1px nudge
   (rule/one-primary, rule/one-press) ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                /* a touch target; every button in a row matches */
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease), translate 150ms var(--ease);
}
.button:hover { text-decoration: none; }
@media (hover: hover) {
  .button:hover { background: var(--primary-hover); }
}
.button:active { translate: 0 1px; }

.button.secondary {
  background: var(--background);
  color: var(--foreground);
  border-color: var(--border);
}
@media (hover: hover) {
  .button.secondary:hover { background: var(--muted); }
}

.button[aria-disabled="true"] {
  background: var(--muted);
  color: var(--muted-foreground);
  border-color: var(--border);
  cursor: default;
}
.button[aria-disabled="true"]:active { translate: none; }

/* ---------- Cards (link page, misc) ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 4vw, 32px);
  margin: 24px 0;
}

.code {
  font: 500 clamp(1.75rem, 8vw, 2.5rem)/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  margin: 8px 0 24px;
  word-break: break-all;
}

.steps { padding-left: 1.25em; margin: 0; line-height: 1.6; }
.steps li + li { margin-top: 8px; }

/* ---------- Narrow pages (legal, link, 404) ---------- */

.page {
  max-width: calc(var(--measure) + 2 * 16px);
  margin: 0 auto;
  padding: clamp(32px, 7vw, 64px) var(--gutter) 64px;
}

.crumbs { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 16px; }
.crumbs a { color: inherit; }

.page h1 {
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

/* Metadata under a title: Label size, Quiet Gray, weight 400 (rule/metadata). */
.updated {
  font-size: 0.75rem;
  line-height: 1.33;
  color: var(--muted-foreground);
  margin-bottom: 24px;
}

/* The reading register: a document read on its own. */
.doc { line-height: 1.7; }
.doc h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 48px 0 8px;
}
.doc p { margin-bottom: 0.75em; }

.toc {
  border: 1px solid var(--border);
  background: var(--muted);
  border-radius: var(--radius-xl);
  padding: 16px 24px;
  margin: 8px 0;
}
.toc summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " +"; color: var(--muted-foreground); }
.toc[open] summary::after { content: " −"; }
.toc ol { margin: 12px 0 0; padding-left: 1.25em; columns: 2 220px; column-gap: 24px; }
.toc li { margin-bottom: 4px; break-inside: avoid; font-size: 0.875rem; line-height: 1.6; }

.app-icon.small { width: 88px; margin-bottom: 24px; }
.subhead { font-size: 1rem; font-weight: 500; margin: 32px 0 12px; }
.spaced { margin-top: 24px; }

/* ---------- Calm state (404, a link with no code): one centred stack —
   seal, title, one line why, the next step in one row, anything secondary a
   quiet link under it (rule/calm-state) ---------- */

.calm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(48px, 14vh, 128px);
}
.calm .tile-icon { margin-bottom: 16px; }
.calm h1 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 8px; }
.calm .why { color: var(--muted-foreground); max-width: 34em; margin-bottom: 24px; }
.calm .actions { justify-content: center; }
.calm .quiet-link { margin-top: 16px; font-size: 0.875rem; color: var(--muted-foreground); }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0 calc(48px + env(safe-area-inset-bottom));
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}
.site-footer .wrap { display: grid; gap: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-links a { color: var(--foreground); }
.site-footer p { margin: 0; }

/* ---------- Motion: one entrance, on a page seen rarely, opacity only
   (rule/rare-moment, rule/fade-not-move) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .enter-fade {
    animation: enter-fade 0.35s var(--ease) both;
    animation-delay: var(--enter-delay, 0ms);
  }
  /* A class, not an inline style: the CSP allows no inline styles. */
  .enter-later { --enter-delay: 90ms; }
  @keyframes enter-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ---------- Accessibility preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .button:active { translate: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--background); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --border: currentColor; --muted-foreground: var(--foreground); }
  .site-header { background: var(--background); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media print {
  .site-header, .site-footer, .toc, .skip { display: none; }
  body { background: #fff; color: #000; }
}