:root {
  --paper: #F3F5F8;
  --ink: #22252B;
  --accent: #FFC72C;
  --accent-ink: #9A6F00;
  --green: #2BA36B;
  --red: #E0473B;
  --muted: rgba(34, 37, 43, 0.7);
  --card: rgba(255, 255, 255, 0.8);
  --card-edge: rgba(34, 37, 43, 0.1);
  --shadow: 0 18px 50px -20px rgba(34, 37, 43, 0.35);
  --well: rgba(34, 37, 43, 0.045);
  --p1: var(--accent);
  --p2: var(--green);
  --p3: var(--red);
  --p4: #7C8798;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14171C;
    --ink: #E9ECF1;
    --accent-ink: #FFC72C;
    --green: #3DBF80;
    --red: #F0655A;
    --muted: rgba(233, 236, 241, 0.7);
    --card: rgba(255, 255, 255, 0.06);
    --card-edge: rgba(255, 255, 255, 0.12);
    --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
    --well: rgba(255, 255, 255, 0.05);
    --p4: #9AA4B5;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 24px 16px 64px;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main { max-width: 40rem; margin: 0 auto; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 1.2rem 0 0.4rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.4rem; }
p, ul { margin: 0.6rem 0; }
ul { padding-left: 1.3rem; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
.meta { color: var(--muted); font-size: 0.9rem; }
nav { font-size: 0.95rem; }
/* The wordmark (scripts/make-site-logo.swift) keeps room for the receipt's tilt
   and glow around the letters; the negative margin lets that room overlap the
   nav's padding instead of making the bar taller. */
.brand { display: inline-block; vertical-align: middle; }
.brand picture { display: block; }
.brand .logo { display: block; width: auto; height: 44px; margin: -7px -6px; }
@media (max-width: 480px) { .brand .logo { height: 28px; margin: -4px -3px; } }
/* Below 360px the translated links need the room: keep the receipt, the
   lockup's first part, by cropping the same image to its left end. */
@media (max-width: 360px) { .brand .logo { width: 20px; object-fit: cover; object-position: left center; } }

/* Landing page: scoped to body.landing so /privacy and /support keep the plain layout */
.landing { padding: 0; overflow-x: hidden; }
.landing main { max-width: 68rem; padding: 0 20px; }

/* A perforated receipt edge across the top of the page */
.edge {
  height: 14px;
  background: radial-gradient(circle at 50% 0, var(--paper) 6px, transparent 6.5px) 0 0 / 20px 14px repeat-x, var(--accent);
}

.site-nav-wrap { padding: 0 12px; }
.site-nav {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px auto 0;
  padding: 10px 18px;
  max-width: 68rem;
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  background: var(--card);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow);
}
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.site-nav .nav-links { white-space: nowrap; }
.site-nav .nav-links a { margin-left: 1.2rem; font-weight: 500; color: var(--muted); }
.site-nav .nav-links a:hover { color: var(--accent-ink); }
.site-nav .nav-language svg { width: 18px; height: 18px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  padding: 56px 0 24px;
}
.eyebrow {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: var(--card);
  font-size: 0.85rem;
  color: var(--muted);
}
.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 1rem 0 0.8rem;
}
.mark { background: var(--accent); color: #22252B; padding: 0 0.18em; border-radius: 0.14em; }
/* Japanese breaks anywhere by default; keep a headline's phrases whole where supported. */
:lang(ja) h1 { word-break: auto-phrase; }
.hero .lead { font-size: 1.2rem; margin: 0 0 1.4rem; max-width: 32rem; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  box-shadow: var(--shadow);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cta .button { padding: 0.75rem 1.3rem; box-shadow: var(--shadow); }
/* Apple's badge rules: no shadow or other effect on the artwork, clear space of
   a quarter of its height (the .cta gap, 12px, at build-site.py's 48px). The
   img's width and height attributes size it. */
.app-store { display: inline-flex; }
.app-store img { display: block; }
.ghost {
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; }
.chip {
  color: var(--ink);
  text-decoration: none;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  font-size: 0.85rem;
}
.chip::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 0.45rem; border-radius: 50%; background: var(--dot); }

.stage { position: relative; display: flex; justify-content: center; padding: 10px 0 0; }
.stage::before {
  content: "";
  position: absolute;
  inset: 8% 6% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 199, 44, 0.4), transparent);
  filter: blur(30px);
}
.shot { position: relative; display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow); }
.stage .shot { max-width: 300px; }
.stage .back {
  position: absolute;
  width: 56%;
  max-width: 190px;
  right: -2%;
  bottom: 10%;
  transform: rotate(7deg);
  animation: float 7s ease-in-out infinite;
}
.stage .front { transform: rotate(-3deg); animation: float 7s ease-in-out infinite reverse; }
@keyframes float { 50% { translate: 0 -10px; } }

.landing h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.015em; line-height: 1.12; margin: 0 0 0.6rem; }
.section { padding: 72px 0 0; }
.section > p { max-width: 38rem; color: var(--muted); }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 1.8rem; }
.card, .case, .flow li {
  padding: 1.3rem;
  border: 1px solid var(--card-edge);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.card {
  grid-column: span 2;
  padding-bottom: 1.4rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--dot, var(--accent)); }
.card.wide-card { grid-column: span 3; }
.card::before { content: ""; display: block; width: 34px; height: 5px; margin-bottom: 0.9rem; border-radius: 3px; background: var(--dot, var(--accent)); }
.card h3, .flow h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.card p, .flow p { margin: 0; color: var(--muted); font-size: 0.97rem; }

/* Use cases: each card is one situation in the user's words, a small
   diagram and Sliptab's answer. The four person colors (--p1 to --p4) mean
   the same people in every diagram; fill paints the SVG ones, background the
   HTML ones. */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 1.8rem; }
/* Each card spans four rows of the grid and shares them with its neighbour
   (subgrid), so the quotes, diagrams and answers of two cards side by side
   line up whatever each language's text length. */
.case {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 1rem;
  scroll-margin-top: 96px;
}
.case-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.case-tag { font-weight: 600; }
.case-num { font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--card-edge); font-variant-numeric: tabular-nums; }
.case-quote { margin: 0; font-size: 1.15rem; font-weight: 650; line-height: 1.35; }
.case-visual { display: grid; align-content: center; margin: 0; padding: 16px; border-radius: 16px; background: var(--well); }
.case-answer { margin: 0; padding-left: 1.9rem; position: relative; color: var(--muted); font-size: 0.97rem; }
.case-answer::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--green); }
.case-answer::after { content: ""; position: absolute; left: 0.4rem; top: 0.48rem; width: 0.5rem; height: 0.28rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.case-answer small { display: block; margin-top: 0.3rem; font-size: 0.85rem; }

.viz { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.case-visual .p1 { fill: var(--p1); background: var(--p1); }
.case-visual .p2 { fill: var(--p2); background: var(--p2); }
.case-visual .p3 { fill: var(--p3); background: var(--p3); }
.case-visual .p4 { fill: var(--p4); background: var(--p4); }
.case-visual .c1 { background: var(--accent); }
.case-visual .c2 { background: rgba(255, 199, 44, 0.62); }
.case-visual .c3 { background: rgba(255, 199, 44, 0.34); }
.viz circle[class^="p"] { stroke: var(--paper); stroke-width: 3; }
.viz .tangle { fill: none; stroke: var(--red); stroke-width: 2; opacity: 0.55; }
.viz .guide, .office-arrow .guide { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
.viz .guide-head, .office-arrow .guide-head { fill: var(--muted); }
.viz .transfer { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linecap: round; }
.viz .transfer-head { fill: var(--green); }
.viz .flow-in { fill: none; stroke: var(--green); stroke-width: 2.5; opacity: 0.7; }
.viz .flow-out { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.viz .jar { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }
.viz .jar-fill { fill: var(--accent); }
.viz .slip { fill: var(--card); stroke: var(--muted); stroke-width: 1.8; stroke-linejoin: round; }
.viz .dash { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.viz .phone { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }
.viz .link { fill: var(--accent); }
.viz .link-mark { fill: none; stroke: #22252B; stroke-width: 3; stroke-linecap: round; }

.viz-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 0.6rem; font-size: 0.85rem; font-weight: 700; }
.viz-labels.center { justify-content: center; }
/* Under the trip diagram each label sits below its half of the 320-wide drawing. */
.viz-labels.split, .viz-labels.ends { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
.viz-labels.split > span { width: 44%; text-align: center; }
.is-before { color: var(--red); }
.is-after { color: var(--green); }

.bars { display: grid; gap: 14px; }
.bar-row > span { display: flex; justify-content: space-between; margin-bottom: 0.35rem; font-size: 0.85rem; font-weight: 700; }
.bar-row > span::after { font-weight: 800; }
.bar-row.is-wrong > span::after { content: "\2715"; color: var(--red); }
.bar-row.is-right > span::after { content: "\2713"; color: var(--green); }
.bar { display: flex; gap: 3px; height: 16px; }
.bar i { flex: 1; border-radius: 4px; }
.is-wrong .bar { opacity: 0.35; }

.households { display: flex; gap: 10px; }
.households > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.households .people { display: flex; justify-content: center; gap: 4px; }
.households .people i { width: 16px; height: 16px; border-radius: 50%; }
.households b { display: block; height: 16px; border-radius: 4px; }

.budget { display: flex; gap: 3px; height: 26px; }
.budget i { border-radius: 5px; }
.budget .left { background: transparent; border: 2px dashed var(--green); }

.rank { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; font-size: 0.85rem; font-weight: 700; }
.rank b { display: block; width: var(--w); height: 14px; border-radius: 4px; }

.office { display: flex; align-items: center; gap: 12px; }
.office > div { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; font-weight: 700; }
.office > div:first-child { flex: 1; }
.office-end { align-items: center; text-align: center; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 200px; }
.days i { aspect-ratio: 1; border-radius: 4px; }
.office-arrow { width: 32px; flex: none; }
.done { width: 56px; height: 56px; }
.done circle { fill: var(--green); }
.done path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.flow { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.flow li { position: relative; }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 2.65rem; right: -17px; width: 18px; border-top: 2.5px dashed var(--accent-ink); }
.flow .step { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin-bottom: 0.9rem; border-radius: 50%; background: var(--accent); color: #22252B; font-size: 1.35rem; font-weight: 800; }
.flow + .bento { margin-top: 16px; }

.promo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 1.6rem; border-radius: 28px; background: #22252B; box-shadow: var(--shadow); }
.showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 2rem; align-items: start; max-width: 44rem; margin-left: auto; margin-right: auto; }
.showcase figure { margin: 0; }
.showcase figure:nth-child(2) { margin-top: 48px; }
.showcase figcaption { margin-top: 0.8rem; text-align: center; color: var(--muted); font-size: 0.95rem; }

.private {
  margin-top: 72px;
  padding: 2.4rem 1.6rem;
  border-radius: 32px;
  background: #22252B;
  color: #F3F5F8;
  text-align: center;
  box-shadow: var(--shadow);
  background-image: radial-gradient(30rem 16rem at 50% 0, rgba(255, 199, 44, 0.3), transparent 70%);
}
.private h2 { color: #F3F5F8; }
.private p { color: rgba(243, 245, 248, 0.75); max-width: 36rem; margin: 0.6rem auto; }
.private a { color: var(--accent); }
.zeros { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; margin: 1.6rem 0 1rem; }
.zeros div { font-size: 0.95rem; color: rgba(243, 245, 248, 0.75); }
.zeros strong { display: block; font-size: 3rem; line-height: 1; color: #F3F5F8; font-variant-numeric: tabular-nums; }

.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 1.8rem; }
.plans .card { grid-column: auto; }
.plans ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.plans li { padding: 0.35rem 0 0.35rem 1.5rem; position: relative; color: var(--muted); }
.plans li::before { content: ""; position: absolute; left: 0; top: 0.78rem; width: 10px; height: 6px; border-left: 2.5px solid var(--dot); border-bottom: 2.5px solid var(--dot); transform: rotate(-45deg); }
.note { margin-top: 2rem; text-align: center; }
.landing footer { margin: 56px 0 0; padding: 28px 0 40px; border-top: 1px solid var(--card-edge); }
.landing footer a { color: var(--ink); margin: 0 0.8rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
.languages { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; margin: 1rem auto; max-width: 36rem; font-size: 0.92rem; }
.landing footer .languages a { margin: 0; color: var(--muted); text-decoration: none; }
.landing footer .languages a:hover { color: var(--accent-ink); }
.landing footer .languages a[aria-current] { color: var(--ink); font-weight: 600; }

@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes rise { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage .shot, .reveal { animation: none; }
  .card { transition: none; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 36px; text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .cta, .chips { justify-content: center; }
  .bento, .cases, .flow { grid-template-columns: 1fr; }
  .flow li:not(:last-child)::after { top: auto; right: auto; bottom: -17px; left: 2.65rem; width: 0; height: 18px; border-top: 0; border-left: 2.5px dashed var(--accent-ink); }
  .card, .card.wide-card { grid-column: auto; }
  .showcase { max-width: 20rem; grid-template-columns: 1fr; }
  .showcase figure:nth-child(2) { margin-top: 0; }
  .plans { grid-template-columns: 1fr; }
  .site-nav { margin-left: 12px; margin-right: 12px; }
}
/* Use cases, Video and Features jump to sections just below. With all three
   the French bar needs about 730px; Use cases alone fits every language down
   to 560px, and on a phone none fit next to Privacy, Support and the globe. */
@media (max-width: 760px) { .site-nav .nav-links .nav-secondary { display: none; } }
@media (max-width: 560px) { .site-nav .nav-links .nav-section { display: none; } }
@media (max-width: 480px) { .site-nav .nav-links a { margin-left: 0.8rem; font-size: 0.9rem; } }
@media (max-width: 360px) { .site-nav { padding: 10px 14px; } .site-nav .nav-links a { margin-left: 0.6rem; } }

.button {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: #22252B;
  font-weight: 700;
  text-decoration: none;
}