/* Saku design tokens — the single source of style values for the marketing site.
   Mirrors docs/design/saku-design-system.md (and apps/mobile/lib/core/theme/tokens.dart).
   Never write a literal colour, radius, shadow or font stack at a call site: add or
   reuse a token here instead. */
:root {
  /* Paper & neutrals */
  --color-canvas: #F7F3EA;
  --color-surface: #FFFDF7;
  --color-ink: #2A2620;
  --color-hairline: #EAE1CF;
  --color-divider: #ECE4D4;
  --color-divider-soft: #F0E9DA;
  --color-chip-bg: #EAE4D6;
  --color-table-band: #F1EBDD;
  --color-sand: #C9BDA3;
  --color-off-state: #E6DCC8;
  --color-dots: #CABFA6;

  /* Text */
  --color-text: #2A2620;
  --color-body: #4A453E;
  --color-muted: #6B6459;
  --color-light: #A89A80;

  /* Primary — "rate blue", the one action colour */
  --color-primary: #3D8BFD;
  --color-primary-pressed: #2E6FD6;
  --color-primary-tint: #DCEBFF;
  --color-primary-tint-soft: #EAF2FF;
  --color-indigo-tint: #E5E2FB;
  --color-on-fill: #FFFFFF;

  /* Accent crayons — meaning only, never chrome */
  --color-indigo: #5B5BD6;
  --color-grass: #38B24A;
  --color-sun: #F7C948;
  --color-flame: #FF7A3D;
  --color-berry: #EF4A44;
  --color-pink: #FF6FB5;
  --color-ember: #E8792B;
  --color-pine: #3F6B49;
  --color-cream: #FFF6E6;

  /* Grade hues */
  --color-good-bg: #C9EFCE;
  --color-good-ink: #2F7D4E;
  --color-easy-bg: #DCEBFF;
  --color-hard-bg: #FFF0C2;
  --color-again-bg: #FFD6D4;

  /* Type */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-script: 'Fasthand', 'Brush Script MT', cursive;

  --text-hero: clamp(2.5rem, 7vw, 4rem);
  --text-title: clamp(1.75rem, 4.5vw, 2.6rem);
  --text-section: clamp(1.3rem, 3vw, 1.75rem);
  --text-lead: clamp(1.05rem, 2.2vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-chip: 0.8125rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --track-tight: -0.03em;
  --track-snug: -0.02em;
  --leading-tight: 1.1;
  --leading-body: 1.6;

  /* Shape */
  --radius-tile: 14px;
  --radius-card: 20px;
  --radius-pill: 9999px;
  --radius-phone: 30px;
  --border-sticker: 2px solid var(--color-ink);
  --border-hairline: 1px solid var(--color-hairline);

  /* Sticker shadows — ink, zero blur, offset only */
  --shadow-xs: 2px 2px 0 var(--color-ink);
  --shadow-sm: 3px 3px 0 var(--color-ink);
  --shadow-lg: 5px 5px 0 var(--color-ink);
  --shadow-slack: 8px; /* clip-safe padding wherever a sticker sits near an overflow edge */

  /* Space — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-20: 80px;

  --screen-pad: 20px;
  --content-max: 1080px;
  --prose-max: 42rem;
  --cta-height: 56px;
}

/* Saku marketing site — layout & components. Every value here references a token
   from tokens.css. Do not introduce literal colours, radii or shadows below. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-body);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
  overflow-x: hidden;
}

h1, h2, h3 {
  color: var(--color-text);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-snug);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0; }

a { color: var(--color-primary-pressed); }
a:hover { color: var(--color-primary); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  border: var(--border-sticker);
  border-radius: var(--radius-tile);
  padding: var(--space-2) var(--space-4);
  z-index: 10;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ---------- Layout ---------- */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--screen-pad);
  padding-right: var(--screen-pad);
}

.main { flex: 1 0 auto; }

.script {
  font-family: var(--font-script);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
  letter-spacing: 0;
}

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

.site-header { padding: var(--space-5) 0 var(--space-2); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--color-surface);
  border: var(--border-sticker);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-black);
  font-size: 1.25rem;
  letter-spacing: var(--track-snug);
  color: var(--color-text);
  text-decoration: none;
  margin-right: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--color-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--color-text); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-14) 0 var(--space-10);
}

.hero-title {
  font-size: var(--text-hero);
  letter-spacing: var(--track-tight);
  margin-top: var(--space-2);
}

.hero-lead {
  font-size: var(--text-lead);
  color: var(--color-body);
  margin-top: var(--space-5);
  max-width: 34rem;
}

.hero-points {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Chips & tags ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-surface);
  border: var(--border-sticker);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-chip);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}
.chip-blue { background: var(--color-primary-tint); }
.chip-green { background: var(--color-good-bg); color: var(--color-good-ink); }
.chip-sun { background: var(--color-hard-bg); }
.chip-indigo { background: var(--color-indigo-tint); }

/* ---------- Store badges ---------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-bottom: var(--shadow-slack);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--cta-height);
  padding: var(--space-2) var(--space-5);
  background: var(--color-surface);
  border: var(--border-sticker);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
}

.badge-mark { flex: 0 0 auto; }
.play-a { fill: var(--color-grass); }
.play-b { fill: var(--color-sun); }
.play-c { fill: var(--color-berry); }
.play-d { fill: var(--color-primary); }
.badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.badge-kicker {
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.badge-name { font-size: var(--text-body); font-weight: var(--weight-black); }

.badge-note {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* ---------- Phone mockup ---------- */

.phone-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 var(--shadow-slack) var(--shadow-slack) 0;
}

.phone {
  flex: 0 0 auto;
  width: 232px;
  max-width: 62vw;
  background: var(--color-canvas);
  border: var(--border-sticker);
  border-radius: var(--radius-phone);
  box-shadow: var(--shadow-lg);
  /* No padding: the screenshot runs flush to the bezel. The border box clips it,
     so the shot picks up the frame's inner radius with no surface showing through. */
  overflow: hidden;
}

.phone-sm { width: 190px; }

.phone-screen {
  background: var(--color-canvas);
  line-height: 0;
}

.phone-screen img { display: block; width: 100%; height: auto; }

.phone-tilt-left { transform: rotate(-3deg); }
.phone-tilt-right { transform: rotate(3deg); }

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

.section { padding: var(--space-14) 0; }
.section-tight { padding: var(--space-10) 0; }

.section-head { max-width: 44rem; }
.section-head h2 { font-size: var(--text-title); }
.section-head p { margin-top: var(--space-4); font-size: var(--text-lead); color: var(--color-muted); }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-10) 0;
}

.feature-flip .feature-media { order: -1; }

.feature h3 { font-size: var(--text-section); margin-top: var(--space-3); }
.feature p { margin-top: var(--space-4); color: var(--color-body); }

.feature-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.feature-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-small);
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-tint);
  border: var(--border-sticker);
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: 0 var(--shadow-slack) var(--shadow-slack) 0;
}

.card {
  background: var(--color-surface);
  border: var(--border-sticker);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.card h3 { font-size: var(--text-section); }
.card p { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--text-small); }

.card-plan { display: flex; flex-direction: column; }
.card-plan .plan-price {
  margin-top: var(--space-2);
  font-size: 1.5rem;
  font-weight: var(--weight-black);
  color: var(--color-text);
  letter-spacing: var(--track-snug);
}
.card-plan .plan-price-note {
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-muted);
}

.plan-features {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  border-top: 2px solid var(--color-divider);
}
.plan-features li {
  border-bottom: 2px solid var(--color-divider);
  padding: var(--space-3) 0;
  font-size: var(--text-small);
  color: var(--color-body);
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
.plan-features li b {
  color: var(--color-text);
  font-weight: var(--weight-bold);
  flex: 0 0 auto;
}
.plan-features .no { color: var(--color-light); }

.card-highlight { background: var(--color-primary-tint-soft); }

/* ---------- Steps ---------- */

.steps { list-style: none; margin: var(--space-6) 0 0; padding: 0 var(--shadow-slack) var(--shadow-slack) 0; }
.steps li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-surface);
  border: var(--border-sticker);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-3);
}
.step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-fill);
  border: var(--border-sticker);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-chip);
  font-weight: var(--weight-black);
}
.step-body { font-size: var(--text-small); color: var(--color-body); }
.step-body b { color: var(--color-text); }

/* ---------- Callout ---------- */

.callout {
  background: var(--color-table-band);
  border: var(--border-sticker);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin: var(--space-8) var(--shadow-slack) var(--shadow-slack) 0;
}
.callout h2, .callout h3 { font-size: var(--text-section); }
.callout p { margin-top: var(--space-3); color: var(--color-body); }

.code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-small);
  background: var(--color-chip-bg);
  border: var(--border-hairline);
  border-radius: var(--radius-tile);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text);
  word-break: break-all;
}

/* ---------- Prose (legal + support) ---------- */

.prose { max-width: var(--prose-max); padding-top: var(--space-10); padding-bottom: var(--space-14); }
.prose h1 { font-size: var(--text-title); }
.prose h2 { font-size: var(--text-section); margin-top: var(--space-10); }
.prose h3 { font-size: var(--text-lead); margin-top: var(--space-8); }
.prose p, .prose li { margin-top: var(--space-4); color: var(--color-body); }
.prose ul, .prose ol { padding-left: var(--space-5); margin: 0; }
.prose li { margin-top: var(--space-2); }
.prose .muted { color: var(--color-muted); font-size: var(--text-small); }
.prose strong { color: var(--color-text); }

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

.site-footer {
  border-top: 2px solid var(--color-ink);
  background: var(--color-surface);
  padding: var(--space-10) 0;
  margin-top: var(--space-10);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: space-between;
}

.footer-col h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-chip);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: var(--weight-bold);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-top: var(--space-2); }
.footer-col a { color: var(--color-body); text-decoration: none; font-size: var(--text-small); }
.footer-col a:hover { color: var(--color-text); text-decoration: underline; }

.footer-tagline {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-muted);
}

.footer-note {
  margin-top: var(--space-8);
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-10); }
  .feature { grid-template-columns: 1fr; gap: var(--space-6); }
  .feature-flip .feature-media { order: 0; }
  .phone-row { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .nav { gap: var(--space-3); }
  .brand { font-size: 1.125rem; }
  .nav-links { gap: var(--space-3); }
  .phone { width: 190px; }
  .phone-sm { width: 150px; }
}

@media (max-width: 420px) {
  .phone { width: 168px; }
  .phone-sm { width: 132px; }
}

/* ---------- Small utilities (token-only, no literals) ---------- */
.kicker { font-size: var(--text-lead); }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* Step lists inside prose keep their sticker rows, not the prose list indent. */
.prose .steps { padding-left: 0; padding-right: var(--shadow-slack); }
.prose .steps li { margin-top: var(--space-3); }