/* 다시 Dasi marketing site.
   Layout: one calm column on phones. On desktop each section becomes an editorial split:
   a quiet heading column on the left (sticky while you read) and the content on the right.
   The giant 다시 in the hero, with its faint blue "echo", is the one bold move.

   Colour tokens come in pairs: a fill colour (for bars, dots, borders) and an -ink colour
   (for text on the matching -soft tint). Every text pairing is checked to WCAG 2.1 AA in both themes.
   Semantics: blue = primary / today, green = done / 알아요, orange = 다시 배우기 only,
   gold = partial progress, red = form errors. */
:root {
  --paper: #f3f5f9;
  --surface: #ffffff;
  --sunk: #eaeef5;
  --ink: #111a2e;
  --muted: #4a5468;
  --line: #dce2ec;
  --line-strong: #c3ccdb;
  --accent: #2143c4;
  --on-accent: #ffffff;
  --accent-soft: #e6ecfc;
  --accent-ink: #1c3aa8;
  --echo: #d6e0fa;
  --good: #17804f;
  --on-good: #ffffff;
  --good-soft: #dff2e7;
  --good-ink: #11653f;
  --good-line: #a9d8bf;
  --warm: #d9702a;
  --warm-soft: #fdeadb;
  --warm-ink: #9a430b;
  --warm-line: #f1c29f;
  --gold: #d29a17;
  --danger: #b3261e;
  --lv1: #3a8f46;
  --lv2: #17857f;
  --lv3: #b27612;
  --lv4: #24583a;
  --shadow: 0 1px 2px rgba(17, 26, 46, .05), 0 18px 40px -20px rgba(17, 26, 46, .22);
  --f-display: "Gowun Batang", "Nanum Myeongjo", "AppleMyungjo", Georgia, "Times New Roman", serif;
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1120px;
  --gutter: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b101b; --surface: #141b2a; --sunk: #1b2336; --ink: #e9eef7; --muted: #a6b0c4;
    --line: #253049; --line-strong: #34405c;
    --accent: #8aa5ff; --on-accent: #0b101b; --accent-soft: #1c2747; --accent-ink: #a9bcff; --echo: #1d2a4f;
    --good: #4cc393; --on-good: #0b101b; --good-soft: #11301f; --good-ink: #7ddcb0; --good-line: #22573c;
    --warm: #f0995a; --warm-soft: #3b2315; --warm-ink: #f6b27e; --warm-line: #6a3d20;
    --gold: #e8b53d; --danger: #ff8f86;
    --lv1: #6cc478; --lv2: #4ac3bb; --lv3: #e3a83f; --lv4: #5fae7c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b101b; --surface: #141b2a; --sunk: #1b2336; --ink: #e9eef7; --muted: #a6b0c4;
  --line: #253049; --line-strong: #34405c;
  --accent: #8aa5ff; --on-accent: #0b101b; --accent-soft: #1c2747; --accent-ink: #a9bcff; --echo: #1d2a4f;
  --good: #4cc393; --on-good: #0b101b; --good-soft: #11301f; --good-ink: #7ddcb0; --good-line: #22573c;
  --warm: #f0995a; --warm-soft: #3b2315; --warm-ink: #f6b27e; --warm-line: #6a3d20;
  --gold: #e8b53d; --danger: #ff8f86;
  --lv1: #6cc478; --lv2: #4ac3bb; --lv3: #e3a83f; --lv4: #5fae7c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 var(--f-body);
  padding-inline: var(--gutter);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); color: var(--ink); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
[lang="ko"], h1, h2, h3, .chip, .mark-btn { word-break: keep-all; overflow-wrap: anywhere; }
p { margin: 0; text-wrap: pretty; }
.wrap { max-width: var(--maxw); margin-inline: auto; }
.en-sub { color: var(--muted); font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); border-radius: 6px; }
.brand .mark { font: 700 26px/1 var(--f-display); letter-spacing: -.02em; }
.brand .word { font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.nav a:not(.btn) { color: var(--muted); text-decoration: none; padding-block: 6px; border-bottom: 1.5px solid transparent; transition: color .15s ease, border-color .15s ease; }
.nav a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--line-strong); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 600 15px/1.2 var(--f-body); padding: 12px 22px; min-height: 48px;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 16px -8px var(--accent); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 10px 22px -10px var(--accent); }
.btn-primary:disabled { filter: saturate(.4); cursor: progress; }
.btn-small { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.ghost { background: var(--surface); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (max-width: 640px) { .nav .hide-sm { display: none; } }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 72px; align-items: center; padding-block: 48px 104px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--accent-ink);
  background: var(--accent-soft); padding: 6px 12px 6px 10px; border-radius: 999px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.hero h1 { margin-top: 22px; }
/* The one bold move: a huge 다시 with a faint offset "echo", the way a word comes back to you. */
.hero .giant {
  display: block; font: 700 clamp(104px, 16vw, 196px)/.88 var(--f-display);
  letter-spacing: -.045em; color: var(--ink);
  text-shadow: .05em .05em 0 var(--echo);
  margin-left: -.04em;
}
.hero .again { display: block; margin-top: 18px; font: 400 clamp(28px, 3.6vw, 40px)/1.15 var(--f-display); color: var(--muted); letter-spacing: -.01em; }
.hero .again em { font-style: normal; color: var(--accent); }
.lead { margin-top: 24px; font-size: 18px; line-height: 1.6; max-width: 32em; color: var(--ink); }
.join { margin-top: 32px; max-width: 30em; }
.join label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.join-row { display: flex; gap: 8px; flex-wrap: wrap; }
.join input {
  flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 10px 18px;
  font: 400 16px var(--f-body); color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.join input::placeholder { color: var(--muted); opacity: 1; }
.join input:hover { border-color: var(--muted); }
.join input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.join .note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.join .msg { margin-top: 12px; font-size: 14px; font-weight: 500; }
.join .msg.ok { color: var(--good-ink); }
.join .msg.err { color: var(--danger); }

/* ---------- Demo flashcard ---------- */
.demo {
  background: var(--surface); border-radius: 24px; box-shadow: var(--shadow);
  border: 1px solid var(--line); padding: 20px 20px 16px; position: relative;
}
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.demo-top span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.demo-bar { height: 4px; background: var(--sunk); border-radius: 4px; margin-top: 12px; overflow: hidden; }
.demo-bar span { display: block; height: 100%; width: 20%; background: var(--accent); border-radius: 4px; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.card { padding: 28px 4px 8px; text-align: center; }
/* The one purposeful motion: each new card settles in. Off for reduced motion. */
.card.enter { animation: card-in .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card .emoji { font-size: 34px; line-height: 1; }
.ko-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; }
.card .ko { font: 700 46px/1.1 var(--f-display); letter-spacing: -.02em; }
.spk {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; flex: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.spk:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.spk svg { width: 18px; height: 18px; }
.spk.is-playing { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.card .en { margin-top: 6px; font-size: 17px; color: var(--muted); }
.ex { margin-top: 22px; padding: 14px 16px; background: var(--sunk); border-radius: 14px; text-align: left; }
.ex .lab { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.ex .exko { margin-top: 4px; font-size: 16px; }
.ex .exen { font-size: 14px; color: var(--muted); }
.marks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.mark-btn {
  min-height: 56px; border-radius: 14px; border: 0; cursor: pointer;
  font: 600 15px/1.25 var(--f-body); padding: 8px 10px;
  transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.mark-btn:active { transform: translateY(1px); }
.mark-btn small { display: block; font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.mark-btn.relearn { background: var(--warm-soft); color: var(--warm-ink); box-shadow: inset 0 0 0 1.5px var(--warm-line); }
.mark-btn.relearn:hover { box-shadow: inset 0 0 0 1.5px var(--warm); }
.mark-btn.know { background: var(--good-soft); color: var(--good-ink); box-shadow: inset 0 0 0 1.5px var(--good-line); }
.mark-btn.know:hover { box-shadow: inset 0 0 0 1.5px var(--good); }
.mark-btn.relearn:focus-visible { outline-color: var(--warm); }
.mark-btn.know:focus-visible { outline-color: var(--good); }
.keys { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (hover: none) { .keys { display: none; } }
.demo-done { text-align: center; padding: 40px 8px 20px; }
.demo-done .big { font: 700 32px/1.2 var(--f-display); color: var(--good-ink); }
.demo-done p { margin: 10px auto 0; color: var(--muted); max-width: 28em; }
.demo-done .btn { margin-top: 22px; }

/* ---------- Sections: editorial split on desktop ---------- */
.section { padding-block: 88px; border-top: 1px solid var(--line); }
.sec-head { max-width: 40em; }
.sec-head h2 { display: block; }
.sec-head .ko-label { display: block; font: 700 clamp(30px, 3.4vw, 40px)/1.18 var(--f-display); letter-spacing: -.02em; }
.sec-head .en-label { display: block; margin-top: 6px; font-size: 17px; line-height: 1.4; color: var(--muted); font-weight: 400; }
.sec-head p { margin-top: 16px; color: var(--muted); }
@media (min-width: 960px) {
  .section { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .section > .sec-head { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 32px; }
  .section > :not(.sec-head) { grid-column: 2; }
  .section > .sec-head + * { margin-top: 6px; }
}

/* Daily flow: a real sequence, so it is numbered */
.flow { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 40px; counter-reset: step; }
.flow li { counter-increment: step; min-width: 0; border-top: 1.5px solid var(--ink); padding-top: 16px; }
.flow li::before { content: "0" counter(step); display: block; font: 700 14px/1 var(--f-body); letter-spacing: .06em; color: var(--accent); font-variant-numeric: tabular-nums; }
.flow h3 { margin-top: 12px; font: 700 21px/1.3 var(--f-display); }
.flow h3 .en-sub { display: block; font: 400 15px/1.4 var(--f-body); margin-top: 2px; }
.flow p { margin-top: 10px; font-size: 15px; color: var(--muted); }
.tpill { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--ink); background: var(--sunk); border-radius: 999px; padding: 3px 11px; font-variant-numeric: tabular-nums; }

/* Levels: bars drawn to scale against a 300-word track */
.levels { margin-top: 40px; display: grid; }
.phase {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-top: 22px; padding-bottom: 4px;
}
.phase::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.phase:first-child { margin-top: 0; }
.lvrow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) max-content; gap: 20px; align-items: center; padding-block: 12px; }
.lvname { font-weight: 600; font-size: 16px; line-height: 1.4; }
.lvname .en-sub { display: block; font-size: 14px; }
.lvbar {
  height: 10px; border-radius: 3px; overflow: hidden;
  /* faint gridlines at 100 and 200 words */
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), var(--paper) calc(33.333% - .5px), var(--paper) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(to right, transparent calc(66.666% - .5px), var(--paper) calc(66.666% - .5px), var(--paper) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    var(--line);
}
.lvbar span { display: block; height: 100%; border-radius: 3px; }
.lv1 .lvbar span { background: var(--lv1); } .lv2 .lvbar span { background: var(--lv2); } .lv3 .lvbar span { background: var(--lv3); } .lv4 .lvbar span { background: var(--lv4); }
.lvnum { font-size: 13.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.4; min-width: 9.5em; }
.lvnum .lvw, .lvnum .lvs { display: block; white-space: nowrap; }
.lvnum .lvw { font-size: 14.5px; color: var(--ink); }
.lvnum b { font-weight: 700; }
.totals { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.totals div { font-size: 14px; color: var(--muted); padding: 20px 16px 0 0; }
.totals div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.totals b { display: block; font: 700 38px/1.1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-bottom: 4px; }

/* Habits: visual on the left, words on the right */
.habits { margin-top: 40px; display: grid; gap: 0; }
.habit { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; padding-block: 24px; border-top: 1px solid var(--line); }
.habit:first-child { border-top: 0; padding-top: 0; }
.habit > .streak, .habit > .chiprow { grid-row: 1 / span 2; align-self: start; margin: 2px 0 0; }
.habit h3 { font: 700 21px/1.3 var(--f-display); }
.habit h3 .en-sub { display: block; font: 400 15px/1.4 var(--f-body); margin-top: 2px; }
.habit p { margin-top: 10px; font-size: 15px; color: var(--muted); max-width: 36em; }
.streak { display: flex; gap: 6px; flex-wrap: wrap; }
.dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--on-good); flex: none; }
.dot.done { background: var(--good); }
.dot.q1 { background: conic-gradient(var(--gold) 0 25%, var(--sunk) 0); }
.dot.q2 { background: conic-gradient(var(--gold) 0 50%, var(--sunk) 0); }
.dot.q3 { background: conic-gradient(var(--gold) 0 75%, var(--sunk) 0); }
.dot.q1, .dot.q2, .dot.q3 { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.dot.none { border: 1.5px dashed var(--line-strong); }
.dot.today { border: 2.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; align-content: flex-start; }
.chip { font-size: 13px; font-weight: 500; line-height: 1.4; border-radius: 999px; padding: 5px 12px; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.chip.good { background: var(--good-soft); color: var(--good-ink); }
.chip.warm { background: var(--warm-soft); color: var(--warm-ink); }

/* Pricing */
.plans { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { padding: 28px 28px 30px; border-radius: 20px; border: 1px solid var(--line-strong); background: transparent; display: flex; flex-direction: column; }
.plan.featured { background: var(--surface); border: 2px solid var(--accent); padding: 27px 27px 29px; box-shadow: var(--shadow); }
.plan h3 { font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.plan h3 .en-sub { font-size: 15px; }
.price { margin-top: 18px; font: 700 44px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price small { font: 400 15px var(--f-body); color: var(--muted); letter-spacing: 0; }
.alt { margin-top: 8px; font-size: 14px; color: var(--muted); }
.plan ul { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 10px; font-size: 15px; }
.plan li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; line-height: 1.5; }
.plan li::before {
  content: ""; width: 12px; height: 7px; margin-top: 7px;
  border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg);
}
.fine { margin-top: 20px; font-size: 13.5px; color: var(--muted); max-width: 52em; }

/* FAQ */
.faq { margin-top: 32px; max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 18px; border-radius: 6px; transition: color .15s ease;
}
.faq summary:hover { color: var(--accent-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--muted);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; margin-top: -4px; color: var(--muted); font-size: 15.5px; max-width: 62ch; }

/* Closing */
.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-block: 88px; border-top: 1px solid var(--line); }
.closing h2 { font: 700 clamp(32px, 5vw, 52px)/1.12 var(--f-display); letter-spacing: -.02em; }
.closing p { margin-top: 10px; color: var(--muted); font-size: 17px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding-block: 32px 48px; font-size: 14px; line-height: 1.7; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; }
.foot nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.foot a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.foot .copy-email {
  font: inherit; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.foot .copy-email:hover { text-decoration-color: currentColor; }
.foot .copied { color: var(--good-ink); font-weight: 500; white-space: nowrap; }

/* ---------- Legal pages ---------- */
.legal { max-width: 700px; margin-inline: auto; padding-block: 40px 88px; }
.legal h1 { font: 700 clamp(34px, 5.5vw, 48px)/1.12 var(--f-display); letter-spacing: -.02em; }
.legal h1 .en-sub { display: block; font: 400 20px/1.4 var(--f-body); margin-top: 8px; letter-spacing: 0; }
.legal .updated { margin-top: 16px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.legal .summary {
  margin-top: 32px; padding: 20px 22px; border-radius: 4px 16px 16px 4px;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); font-size: 15.5px;
}
.legal .summary strong { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.legal .summary ul { margin: 10px 0 0; padding-left: 20px; }
.legal .summary p { margin-top: 8px; }
.legal h2 { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font: 700 23px/1.3 var(--f-display); letter-spacing: -.01em; scroll-margin-top: 24px; }
.legal h3 { margin-top: 26px; font-size: 16.5px; font-weight: 600; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.72; color: var(--ink); }
.legal p { margin-top: 14px; max-width: 68ch; }
.legal ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; max-width: 68ch; }
.legal li::marker { color: var(--muted); }
.legal .table-wrap {
  overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.legal table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal tbody tr:last-child td { border-bottom: 0; }
.legal td:first-child { font-weight: 500; }
.legal th { font-weight: 600; color: var(--ink); background: var(--sunk); font-size: 13px; letter-spacing: .02em; white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 959px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 28px 72px; }
  .demo { max-width: 480px; }
  .section { padding-block: 72px; }
}
@media (max-width: 640px) {
  .top { padding-block: 16px; }
  .hero { padding-block: 20px 64px; gap: 40px; }
  .lead { font-size: 17px; }
  .section, .closing { padding-block: 60px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .lvrow { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding-block: 14px; }
  .lvbar { grid-column: 1 / -1; grid-row: 2; }
  .lvnum { min-width: 0; }
  .totals { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .totals div { padding: 14px 0; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; }
  .totals div + div { padding-left: 0; border-left: 0; }
  .totals b { font-size: 30px; margin: 0; min-width: 3.2em; }
  .habit { grid-template-columns: minmax(0, 1fr); padding-block: 28px; }
  .habit:first-child { padding-top: 0; }
  .habit > .streak, .habit > .chiprow { grid-row: auto; margin-bottom: 16px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan, .plan.featured { padding: 24px 22px 26px; }
  .plan.featured { padding: 23px 21px 25px; }
  .closing { flex-direction: column; align-items: flex-start; }
  .legal { padding-block: 24px 64px; }
  .legal h2 { margin-top: 40px; font-size: 21px; }
  .legal p, .legal li { font-size: 16px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}