/* OwóBook website. Colors, type and layout from the Claude Design project
   "OwoBook Landing/Legal Review". Values match lib/app/theme.dart. */

:root {
  --page: #FAF7F1; --page2: #EDE8DE; --card: #FFFDF9; --card2: #F4EFE6;
  --ink: #1C1A16; --body: #4A443A; --muted: #6E6558;
  --line: #E8E1D2; --line2: #D8D1C2;
  --green: #1F6B45; --green-t: #1F6B45; --green-tint: #EDF1EB; --green-line: #BCD1C3;
  --amber-t: #82591B; --amber-tint: #FBF4E8; --amber-line: #C8892A;
  --red: #B4472E; --red-tint: #F9EEE9; --red-line: #E8C6BC;
  --bezel: #1C1A16; --band: #17150F; --gband: #1F6B45;
  --nav: rgba(250, 247, 241, .88); --shadow: rgba(28, 26, 22, .28);
  --gutter: clamp(20px, 4.4vw, 64px);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #14120E; --page2: #1A1813; --card: #1E1B16; --card2: #26231D;
    --ink: #F2EDE3; --body: #D6CEC0; --muted: #AAA08F;
    --line: #322E27; --line2: #3F3A31;
    --green: #2A7D52; --green-t: #6CC096; --green-tint: #1B2A20; --green-line: #2F4A39;
    --amber-t: #E0AE5C; --amber-tint: #2B2316; --amber-line: #8A6424;
    --red: #E0775C; --red-tint: #2E1C17; --red-line: #5A3328;
    --bezel: #000; --band: #0D0C09; --gband: #1B5E3D;
    --nav: rgba(20, 18, 14, .88); --shadow: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #14120E; --page2: #1A1813; --card: #1E1B16; --card2: #26231D;
  --ink: #F2EDE3; --body: #D6CEC0; --muted: #AAA08F;
  --line: #322E27; --line2: #3F3A31;
  --green: #2A7D52; --green-t: #6CC096; --green-tint: #1B2A20; --green-line: #2F4A39;
  --amber-t: #E0AE5C; --amber-tint: #2B2316; --amber-line: #8A6424;
  --red: #E0775C; --red-tint: #2E1C17; --red-line: #5A3328;
  --bezel: #000; --band: #0D0C09; --gband: #1B5E3D;
  --nav: rgba(20, 18, 14, .88); --shadow: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--body);
  font-family: Outfit, system-ui, sans-serif; font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--green-t); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--green-t); outline-offset: 3px; border-radius: 8px; }
strong { color: var(--ink); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--page); padding: 10px 16px; border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--page); }

.wrap { max-width: 1200px; margin: 0 auto; }
.eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-t);
}
.label {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* Responsive switches. The landing page swaps layouts at 760px, legal pages at 900px. */
@media (max-width: 759px) { .dsk { display: none !important; } }
@media (min-width: 760px) { .mob { display: none !important; } }
@media (max-width: 899px) { .ldsk { display: none !important; } }
@media (min-width: 900px) { .lmob { display: none !important; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20; background: var(--nav);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-nav {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); height: 68px;
  display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { border-radius: 9px; border: 1px solid var(--line); display: block; }
.brand span { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); }
.brand:hover { color: var(--ink); }
.nav-links { display: flex; gap: 4px; margin-inline-start: auto; }
.nav-links a {
  color: var(--body); text-decoration: none; font-weight: 500; padding: 8px 14px; border-radius: 999px;
}
.nav-links a:hover { color: var(--ink); background: var(--card2); }
.btn-dl {
  background: var(--green); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 10px 20px; border-radius: 12px;
}
.btn-dl:hover { color: #fff; filter: brightness(1.1); }
.menu-btn {
  margin-inline-start: auto; width: 44px; height: 44px; border: 1px solid var(--line2);
  background: var(--card); border-radius: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0;
}
.menu-btn span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.mobile-menu {
  border-top: 1px solid var(--line); background: var(--page); padding: 12px 20px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu > a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 19px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
}

/* Store badges */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.badge { display: block; line-height: 0; }
.badge img { display: block; }
.badge-apple img { height: 52px; width: auto; }
.badge-google { margin: -10px -9px; }
.badge-google img { height: 73px; width: auto; }
.badges.sm { gap: 12px; padding-top: 16px; }
.badges.sm .badge-apple img { height: 44px; }
.badges.sm .badge-google { margin: -9px -8px; }
.badges.sm .badge-google img { height: 62px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--page2); border-top: 1px solid var(--line);
  padding: clamp(56px, 6vw, 88px) var(--gutter) 40px;
}
.site-footer.on-page { background: var(--page); }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.footer-brand { flex: 2 1 260px; display: flex; flex-direction: column; gap: 14px; }
.footer-brand p { margin: 0; color: var(--muted); max-width: 22em; }
.footer-col { flex: 1 1 140px; display: flex; flex-direction: column; gap: 10px; }
.footer-col .label { margin-bottom: 4px; }
.footer-col a { color: var(--body); text-decoration: none; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-col .muted { color: var(--muted); }
.break-all { word-break: break-all; }
.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-wrap: wrap;
  gap: 12px 32px; justify-content: space-between; color: var(--muted); font-size: 15px;
}

/* ---------- Shared bits ---------- */
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.tick {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green-tint);
  color: var(--green-t); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-top: 1px;
}
.btn-outline {
  color: var(--ink); font-weight: 600; text-decoration: none; border: 1.5px solid var(--line2);
  padding: 12px 18px; border-radius: 14px; background: transparent;
}
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-green {
  background: var(--green); color: #fff; text-decoration: none; font-weight: 600;
  padding: 15px 24px; border-radius: 14px;
}
.btn-green:hover { color: #fff; filter: brightness(1.1); }

/* Paper receipt: mono type, dashed rules, scalloped edges */
.receipt {
  background: #FFFDF9; color: #1C1A16; font-family: var(--mono); font-size: 11px; line-height: 1.7;
  padding: 22px 18px;
  -webkit-mask: radial-gradient(circle at 6px 0, transparent 4.5px, #000 5px) 0 0 / 12px 51% repeat-x,
                radial-gradient(circle at 6px 100%, transparent 4.5px, #000 5px) 0 100% / 12px 51% repeat-x;
  mask: radial-gradient(circle at 6px 0, transparent 4.5px, #000 5px) 0 0 / 12px 51% repeat-x,
        radial-gradient(circle at 6px 100%, transparent 4.5px, #000 5px) 0 100% / 12px 51% repeat-x;
}
.receipt.bottom-edge {
  font-size: 11.5px; line-height: 1.75; padding: 18px 16px 22px; border-radius: 2px 2px 0 0;
  -webkit-mask: radial-gradient(circle at 6px 100%, transparent 4.5px, #000 5px) 0 100% / 12px 100% repeat-x;
  mask: radial-gradient(circle at 6px 100%, transparent 4.5px, #000 5px) 0 100% / 12px 100% repeat-x;
}
.receipt .c { text-align: center; }
.receipt .rule { border-top: 1.5px dashed #C6BCA8; margin: 8px 0; }
.receipt .row { display: flex; justify-content: space-between; gap: 8px; }
.receipt .dim { color: #6E6558; }
.receipt .paid { color: #1F6B45; }
.receipt .due { color: #B4472E; }
.receipt .total { font-weight: 600; font-size: 13px; }

/* ---------- Landing ---------- */
.hero { padding: clamp(48px, 6.5vw, 104px) var(--gutter); }
.hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(48px, 5vw, 80px); }
.hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  margin: 0; color: var(--ink); font-weight: 700; font-size: clamp(46px, 6.1vw, 92px);
  line-height: .98; letter-spacing: -0.035em;
}
.serif-accent {
  font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; color: var(--green-t);
}
.hero-lede { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; max-width: 30em; }
.platforms { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero-art { flex: 1 1 420px; min-width: 0; position: relative; display: flex; justify-content: center; padding-block: 12px; }
.hero-art .pad {
  position: absolute; inset: 8% 6% 0; background: var(--green-tint);
  border: 1px solid var(--green-line); border-radius: 40px;
}
.hero-phone {
  position: relative; width: min(330px, 72%); margin-inline-start: auto; margin-inline-end: 6%;
  background: var(--bezel); padding: 10px; border-radius: 56px; box-shadow: 0 40px 60px -40px var(--shadow);
}
.hero-phone img { width: 100%; height: auto; display: block; border-radius: 46px; }
.hero-receipt {
  position: absolute; inset-inline-start: 2%; bottom: 9%; width: min(232px, 50%);
  transform: rotate(-5deg); filter: drop-shadow(0 18px 24px var(--shadow));
}

.strip { border-block: 1px solid var(--line); background: var(--page2); padding: 28px var(--gutter); }
.strip-inner { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: baseline; justify-content: space-between; }
.strip-group { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.strip-group.wide { gap: 6px 40px; }
.strip-item { color: var(--ink); font-weight: 600; font-size: 18px; }

.features {
  padding: clamp(72px, 8.5vw, 128px) var(--gutter); display: flex; flex-direction: column;
  gap: clamp(80px, 9vw, 136px);
}
.feature { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5.5vw, 96px); }
.feature.flip { flex-direction: row-reverse; }
.feature-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.h2 {
  margin: 0; color: var(--ink); font-weight: 700; font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.02; letter-spacing: -0.03em;
}
.lede { margin: 0; font-size: clamp(17px, 1.35vw, 20px); max-width: 28em; }
.feature-art {
  flex: 1 1 380px; min-width: 0; border-radius: 32px; padding: clamp(32px, 4vw, 56px) 24px 0;
  display: flex; justify-content: center; overflow: hidden; aspect-ratio: 1 / 1.02;
}
.feature-art.green { background: var(--green); }
.feature-art.paper { background: var(--page2); border: 1px solid var(--line); }
.feature-art.amber { background: var(--amber-tint); border: 1px solid var(--line); }
.phone-top {
  width: min(300px, 78%); background: var(--bezel); padding: 9px 9px 0;
  border-radius: 50px 50px 0 0; align-self: flex-start;
}
.phone-top img { width: 100%; height: auto; display: block; border-radius: 42px 42px 0 0; }

.more { background: var(--page2); border-block: 1px solid var(--line); padding: clamp(72px, 8.5vw, 128px) var(--gutter); }
.more-inner { display: flex; flex-direction: column; gap: 20px; }
.more-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; max-width: 640px; }
.bento-row { display: flex; flex-wrap: wrap; gap: 20px; }
.tile {
  flex: 1 1 300px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.tile.wide { flex: 2 1 560px; flex-direction: row; flex-wrap: wrap; gap: 28px; align-items: center; }
.tile.wide > .tile-copy { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; }
.tile.stats { flex-direction: row; flex-wrap: wrap; gap: 32px; align-items: center; }
.tile.stats > .tile-copy { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.tile-num { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.h3 { margin: 0; color: var(--ink); font-weight: 700; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; }
.tile p { margin: 0; }
.tile p.gap { margin: 0 0 14px; }
.crop {
  margin-top: auto; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line2);
}
.crop img { width: 100%; height: auto; display: block; }
.tile.wide .crop { flex: 0 1 330px; margin-top: 0; }
.tile.stats .crop { flex: 1 1 440px; aspect-ratio: 7 / 4; margin-top: 0; background: #EDE8DE; }
.statement-wrap { margin-top: auto; background: var(--page2); border-radius: 18px; padding: 22px 18px 0; border: 1px solid var(--line); }
.statement-wrap .rule { margin: 7px 0; }

.band { background: var(--band); color: #D6CEC0; padding: clamp(72px, 8.5vw, 128px) var(--gutter) 0; }
.band :focus-visible { outline-color: #fff; }
.band a:hover { color: #fff; }
.band-grid { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5.5vw, 96px); }
.band-copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding-bottom: clamp(0px, 4vw, 64px); }
.band .eyebrow { color: #C8892A; }
.band h2 { margin: 0; color: #F2EDE3; font-weight: 700; font-size: clamp(36px, 4.2vw, 62px); line-height: 1; letter-spacing: -0.03em; }
.band .lede { color: #E0AE5C; font-size: clamp(17px, 1.4vw, 21px); max-width: 26em; }
.band .tick { background: #1F3A2A; color: #8FD0AC; }
.band-art { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; align-self: flex-end; }
.band-phone { width: min(320px, 80%); background: #000; padding: 9px 9px 0; border-radius: 52px 52px 0 0; border: 1px solid #322E27; border-bottom: 0; }
.band-phone img { width: 100%; height: auto; display: block; border-radius: 44px 44px 0 0; max-height: 560px; object-fit: cover; object-position: top; }
.stats-row { border-top: 1px solid #322E27; display: flex; flex-wrap: wrap; }
.stat { flex: 1 1 260px; padding: clamp(32px, 3.5vw, 52px) 0; display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-family: var(--serif); font-size: clamp(72px, 7.5vw, 120px); line-height: .95; color: #F2EDE3; letter-spacing: -0.02em; }
.stat-num.it { font-style: italic; }
.stat-num.g { color: #8FD0AC; }
.stat-label { font-size: 18px; }

.premium { padding: clamp(72px, 8.5vw, 128px) var(--gutter); }
.premium-inner { display: flex; flex-direction: column; gap: clamp(40px, 4vw, 56px); }
.premium-head { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.plans { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.plan {
  flex: 1 1 340px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 28px;
  padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 24px;
}
.plan.featured { border: 2px solid var(--green); }
.plan-head { display: flex; flex-direction: column; gap: 6px; }
.plan-name { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.plan.featured .plan-name { color: var(--green-t); }
.plan-price { color: var(--ink); font-weight: 700; font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -0.025em; line-height: 1.1; }
.plan-sub { color: var(--muted); }
.plan-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-t); background: var(--amber-tint); padding: 4px 10px; border-radius: 999px;
}
.plan-cta { text-align: center; padding: 14px 20px; }
.plan .btn-green { text-align: center; padding: 15px 20px; }
.plan-list { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.plan-list li { display: flex; gap: 12px; }
.plan-list .ok { color: var(--green-t); font-weight: 700; }
.plan-list .lead { color: var(--ink); font-weight: 600; }
.roles { display: flex; flex-wrap: wrap; gap: 6px; }
.role { font-size: 14px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink); }

.faq { background: var(--page2); border-top: 1px solid var(--line); padding: clamp(72px, 8.5vw, 128px) var(--gutter); }
.faq-inner { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 96px); }
.faq-head { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.faq-list { flex: 2 1 520px; min-width: 0; border-top: 1px solid var(--line2); }
.faq-item { border-bottom: 1px solid var(--line2); }
.faq-item h3 { margin: 0; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; padding: 22px 0; cursor: pointer; font: inherit;
  font-size: clamp(18px, 1.4vw, 21px); font-weight: 600; color: var(--ink); text-align: start;
}
.faq-sign {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 400; color: var(--green-t);
}
.faq-a { padding: 0 0 24px; max-width: 40em; }
.faq-a[hidden] { display: none; }
.faq-a p { margin: 0; }
.faq-a p + p { margin-top: 12px; }

.cta { background: var(--gband); color: #DCE9E0; padding: clamp(72px, 8vw, 120px) var(--gutter); text-align: center; }
.cta :focus-visible { outline-color: #fff; }
.cta-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cta h2 { margin: 0; color: #fff; font-weight: 700; font-size: clamp(38px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.035em; }
.cta p { margin: 0; font-size: clamp(17px, 1.4vw, 21px); }
.cta .badges { justify-content: center; margin-top: 8px; }

/* ---------- Legal pages ---------- */
.legal-main { padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(72px, 8vw, 120px); line-height: 1.65; }
.legal-grid { max-width: 1080px; margin: 0 auto; display: flex; gap: 72px; align-items: flex-start; }
.toc {
  flex: 0 0 240px; position: sticky; top: 100px; align-self: flex-start;
  max-height: calc(100vh - 120px); overflow: auto;
}
.toc .label { margin-bottom: 14px; }
.toc nav { display: flex; flex-direction: column; border-inline-start: 1px solid var(--line2); }
.toc a {
  text-decoration: none; font-size: 15px; line-height: 1.35; padding: 7px 0; padding-inline-start: 16px;
  margin-inline-start: -1px; border-inline-start: 2px solid transparent; color: var(--muted);
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current="location"] { border-inline-start-color: var(--green-t); color: var(--ink); font-weight: 600; }
.legal-article { flex: 1 1 auto; min-width: 0; max-width: 720px; }
.legal-article .eyebrow { margin-bottom: 16px; }
.legal-article h1 {
  margin: 0; color: var(--ink); font-weight: 700; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.035em;
}
.meta {
  margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.meta > div { display: flex; gap: 8px; flex-wrap: wrap; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; color: var(--ink); font-weight: 500; }

.mtoc {
  position: sticky; top: 68px; z-index: 10; margin: 28px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter);
  background: var(--nav); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.mtoc-btn {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 10px 16px;
  font: inherit; color: var(--ink); cursor: pointer; text-align: start;
}
.mtoc-btn .txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1 1 auto; }
.mtoc-btn .label { font-size: 11px; letter-spacing: .14em; font-weight: 400; }
.mtoc-btn .cur { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtoc-btn .sign { font-size: 20px; color: var(--green-t); }
.mtoc-list {
  margin-top: 8px; background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 6px;
  display: flex; flex-direction: column; max-height: 60vh; overflow: auto;
}
.mtoc-list[hidden] { display: none; }
.mtoc-list a { text-decoration: none; padding: 12px; border-radius: 10px; font-size: 16px; color: var(--muted); }
.mtoc-list a[aria-current="location"] { color: var(--ink); font-weight: 600; background: var(--green-tint); }

.legal-article section { scroll-margin-top: 96px; }
.legal-article h2 {
  margin: 56px 0 16px; color: var(--ink); font-weight: 700; font-size: clamp(24px, 2vw, 28px);
  line-height: 1.15; letter-spacing: -0.02em;
}
.legal-article h3 { margin: 28px 0 12px; color: var(--ink); font-size: 18px; font-weight: 600; }
.legal-article p { margin: 0 0 16px; }
.legal-article ul.list { margin: 0 0 16px; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 10px; }
.legal-article .anchor { color: inherit; text-decoration: none; }
.legal-article .anchor:hover::after { content: " #"; color: var(--muted); font-weight: 400; }

.summary {
  margin-top: 36px; background: var(--green-tint); border: 1px solid var(--green-line);
  border-radius: 22px; padding: clamp(24px, 2.6vw, 36px);
}
.legal-article .summary h2 {
  margin: 0 0 16px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-t); line-height: 1.4;
}
.summary ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }

.contact-card {
  margin-top: 56px; background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(24px, 2.6vw, 36px); display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: center; justify-content: space-between;
}
.contact-card > div { display: flex; flex-direction: column; gap: 6px; }
.legal-article .contact-card h2 {
  margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
.contact-name { color: var(--ink); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.contact-mail { font-size: 18px; font-weight: 500; word-break: break-all; }

.confirm {
  background: var(--amber-tint); color: var(--amber-t); border: 1px dashed var(--amber-line); border-radius: 6px;
  padding: 1px 6px; font-family: var(--mono); font-size: .86em; font-weight: 500;
}

.table-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); margin-bottom: 24px; }
.table-card table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-card thead tr { background: var(--card2); }
.table-card th[scope="col"] {
  text-align: start; padding: 14px 16px; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.table-card tbody tr { border-top: 1px solid var(--line); vertical-align: top; }
.table-card th[scope="row"] { text-align: start; padding: 14px 16px; color: var(--ink); font-weight: 600; }
.table-card td { padding: 14px 16px; }
.table-card td.ink { color: var(--ink); }
.table-card .links { display: flex; flex-direction: column; gap: 4px; }
.table-card.compact th[scope="col"], .table-card.compact td { padding: 12px 16px; }

.svc-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.svc {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5;
}
.svc-name { color: var(--ink); font-weight: 600; font-size: 17px; }
.svc .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; }
.svc .links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

.law-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.law { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.law .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.legal-article .law h3 { margin: 0 0 8px; }
.legal-article .law p { margin: 0; }

/* Delete account */
.warn {
  margin-top: 20px; background: var(--red-tint); border: 1px solid var(--red-line); border-radius: 22px;
  padding: 22px 24px; display: flex; gap: 16px; align-items: flex-start;
}
.warn-icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.warn > div { display: flex; flex-direction: column; gap: 4px; }
.warn strong { font-size: 19px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.steps li {
  flex: 1 1 150px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.step-n { font-family: var(--serif); font-size: 56px; line-height: .9; color: var(--green-t); }
.step-t { color: var(--ink); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.step-d { font-size: 15px; line-height: 1.5; }
.legal-article .after-steps { margin: 16px 0 0; }
.two-col { display: flex; flex-wrap: wrap; gap: 12px; }
.col-card { flex: 1 1 300px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.legal-article .col-card h2 { margin: 0 0 14px; font-size: 22px; }
.marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.marks li { display: flex; gap: 12px; align-items: flex-start; }
.mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;
}
.mark.yes { background: var(--green-tint); color: var(--green-t); }
.mark.no { background: var(--card2); color: var(--muted); }
.legal-article .small { font-size: 15px; }
.premium-note {
  margin-top: 56px; background: var(--amber-tint); border: 1px solid var(--line); border-radius: 22px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.legal-article .premium-note h2 { margin: 0; font-size: 22px; }
.legal-article .premium-note p { margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn-outline { background: var(--card); }
.mail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; }
.legal-article .note { margin: 12px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- Support centre ---------- */
.legal-article .help-hero h2 { margin-bottom: 10px; }
.help-lede { margin: 0 0 20px; color: var(--ink); font-size: 18px; }
.legal-article .help-hero .note { margin-top: 14px; }
.topic-k {
  display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-t);
}
.qa-list { display: flex; flex-direction: column; gap: 10px; }
.qa { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; }
.legal-article .qa h3 { margin: 0 0 6px; font-size: 17px; }
.legal-article .qa p { margin: 0; }

/* ---------- 404 and download ---------- */
.center-main {
  min-height: calc(100vh - 69px - 220px); display: flex; align-items: center;
  padding: clamp(48px, 7vw, 112px) var(--gutter);
}
.center-wrap {
  max-width: 1000px; margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(40px, 6vw, 88px);
}
.center-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.center-copy h1 {
  margin: 0; color: var(--ink); font-weight: 700; font-size: clamp(40px, 5vw, 72px);
  line-height: 1; letter-spacing: -0.035em;
}
.center-copy .note { margin: 4px 0 0; font-size: 15px; color: var(--muted); max-width: 32em; }
.nf-receipt {
  flex: 0 0 auto; width: min(280px, 80vw); font-size: 12px; padding: 26px 22px;
  transform: rotate(-4deg); filter: drop-shadow(0 22px 28px var(--shadow));
}
.nf-links { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 8px; border-top: 1px solid var(--line); }
.nf-links a { color: var(--body); text-decoration: none; font-weight: 500; padding-top: 12px; }
.nf-links a:hover { color: var(--ink); text-decoration: underline; }
.dl-icon img {
  display: block; width: clamp(96px, 14vw, 160px); height: auto; border-radius: 28%;
  box-shadow: 0 30px 50px -30px var(--shadow); border: 1px solid var(--line);
}
.center-wrap.stack { flex-direction: column; gap: 28px; text-align: center; }
.stack .center-copy { flex: none; max-width: 560px; align-items: center; }
.stack .badges, .stack .btn-row { justify-content: center; }
@media (max-width: 759px) {
  .center-copy { text-align: center; align-items: center; }
  .btn-row.center, .badges.center, .nf-links { justify-content: center; }
}

/* ---------- Motion ----------
   Everything below runs only when the visitor hasn't asked for reduced motion.
   Scroll reveals hide content only once site.js has flagged <html class="js">. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .22s ease both; }
  ::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }

  /* Small interactive transitions */
  a, button, .nav-links a, .btn-dl, .btn-green, .btn-outline, .footer-col a, .toc a, .mtoc-list a, .faq-q {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, filter .2s ease,
                transform .2s var(--ease-out), box-shadow .25s ease;
  }
  .btn-dl:hover, .btn-green:hover, .btn-outline:hover { transform: translateY(-1px); }
  .btn-dl:active, .btn-green:active, .btn-outline:active, .menu-btn:active, .mtoc-btn:active { transform: scale(.97); }
  .badge { transition: transform .25s var(--ease-out), filter .25s ease; }
  .badge:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 12px var(--shadow)); }
  .brand img { transition: transform .5s var(--ease-spring); }
  .brand:hover img { transform: rotate(-8deg) scale(1.06); }

  /* Header gains depth once the page scrolls */
  .site-header { transition: box-shadow .3s ease, background-color .3s ease; }
  .site-header.scrolled { box-shadow: 0 10px 30px -22px var(--shadow); }

  /* Burger turns into a close icon */
  .menu-btn span { transition: transform .3s var(--ease-out), opacity .2s ease; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu:not([hidden]) { animation: drop-in .3s var(--ease-out) both; }
  .mobile-menu:not([hidden]) > * { animation: fade-up .4s var(--ease-out) both; }
  .mobile-menu:not([hidden]) > :nth-child(2) { animation-delay: .04s; }
  .mobile-menu:not([hidden]) > :nth-child(3) { animation-delay: .08s; }
  .mobile-menu:not([hidden]) > :nth-child(4) { animation-delay: .12s; }

  /* Hero entrance */
  .hero-copy > * { animation: fade-up .8s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .18s; }
  .hero-copy > :nth-child(4) { animation-delay: .28s; }
  .hero-copy > :nth-child(5) { animation-delay: .36s; }
  .serif-accent { display: inline-block; animation: ink-in 1.1s .35s var(--ease-out) both; }
  .hero-art .pad { animation: pad-in 1s .1s var(--ease-out) both; }
  .hero-phone { animation: rise 1s .2s var(--ease-out) both; }
  .hero-receipt { animation: receipt-in .9s .7s var(--ease-spring) both, float 6s 1.6s ease-in-out infinite alternate; }

  /* Scroll reveals */
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .feature-art.reveal { transform: translateY(28px) scale(.97); }
  .js .feature-art.reveal.in { transform: none; }
  .js .feature-art .phone-top, .js .band-phone { transform: translateY(70px); transition: transform 1.1s .2s var(--ease-out); }
  .js .feature-art.in .phone-top, .js .band-art.in .band-phone { transform: none; }

  /* Hover lift on cards */
  .tile, .plan, .col-card, .steps li, .law, .svc, .feature-art {
    transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease,
                opacity .8s var(--ease-out);
  }
  .tile:hover, .plan:hover, .col-card:hover, .steps li:hover, .law:hover, .svc:hover {
    transform: translateY(-4px); box-shadow: 0 22px 40px -28px var(--shadow);
  }
  .js .reveal.in.tile:hover, .js .reveal.in.plan:hover, .js .reveal.in.col-card:hover,
  .js .steps li.reveal.in:hover, .js .reveal.in.law:hover, .js .reveal.in.svc:hover {
    transform: translateY(-4px); transition: transform .35s var(--ease-out), box-shadow .35s ease;
  }
  .crop img { transition: transform .7s var(--ease-out); transform-origin: 50% 0; }
  .tile:hover .crop img { transform: scale(1.04); }
  .feature-art.in:hover .phone-top { transform: translateY(-8px); transition-delay: 0s; transition-duration: .5s; }
  .plan.featured { position: relative; }
  .plan.featured::before {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 0 var(--green); animation: glow 3.2s 1s ease-in-out infinite;
  }
  .tick, .plan-list .ok { transition: transform .4s var(--ease-spring); }
  .reveal.in .tick { animation: pop .5s var(--ease-spring) both; }
  .reveal.in .checks li:nth-child(1) .tick { animation-delay: .35s; }
  .reveal.in .checks li:nth-child(2) .tick { animation-delay: .45s; }
  .reveal.in .checks li:nth-child(3) .tick { animation-delay: .55s; }
  .step-n { display: inline-block; }
  .steps li.in .step-n { animation: pop .6s var(--ease-spring) both; animation-delay: calc(var(--d, 0s) + .25s); }

  /* FAQ */
  .faq-sign { transition: transform .35s var(--ease-out), background-color .2s ease, border-color .2s ease; }
  .faq-q:hover .faq-sign { border-color: var(--green-t); }
  .faq-q[aria-expanded="true"] .faq-sign { transform: rotate(180deg); background: var(--green-tint); border-color: var(--green-line); }
  .faq-a:not([hidden]) { animation: fade-down .4s var(--ease-out) both; }

  /* Legal pages */
  .toc a { transition: color .2s ease, border-color .3s ease, padding .3s var(--ease-out); }
  .toc a[aria-current="location"] { padding-inline-start: 20px; }
  .mtoc-btn .sign { display: inline-block; transition: transform .3s var(--ease-out); }
  .mtoc-btn[aria-expanded="true"] .sign { transform: rotate(180deg); }
  .mtoc-list:not([hidden]) { animation: drop-in .25s var(--ease-out) both; }
  .legal-article > .eyebrow, .legal-article > h1, .legal-article > .meta { animation: fade-up .7s var(--ease-out) both; }
  .legal-article > h1 { animation-delay: .06s; }
  .legal-article > .meta { animation-delay: .14s; }
  .warn-icon { animation: nudge 2.4s 1s ease-in-out 2; }
  .center-copy > * { animation: fade-up .7s var(--ease-out) both; }
  .center-copy > :nth-child(2) { animation-delay: .07s; }
  .center-copy > :nth-child(3) { animation-delay: .14s; }
  .center-copy > :nth-child(4) { animation-delay: .21s; }
  .center-copy > :nth-child(5) { animation-delay: .28s; }
  .nf-receipt { animation: nf-drop 1s .15s var(--ease-spring) both, nf-sway 5s 1.2s ease-in-out infinite alternate; }
  .dl-icon img { animation: rise .9s var(--ease-out) both; }
  .qa { transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease; }
  .qa:hover { border-color: var(--green-line); }
  section:target > h2, section:target.contact-card { animation: highlight 1.6s ease both; }
}

@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes ink-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pad-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(60px) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes receipt-in { from { opacity: 0; transform: translate(-30px, 40px) rotate(-14deg); } to { opacity: 1; transform: rotate(-5deg); } }
@keyframes float { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(-3.5deg) translateY(-10px); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px var(--green-tint); } }
@keyframes nudge { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }
@keyframes highlight { 0% { background: var(--amber-tint); } 100% { background: transparent; } }
@keyframes nf-drop { from { opacity: 0; transform: translateY(-80px) rotate(8deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes nf-sway { from { transform: rotate(-4deg); } to { transform: rotate(-1.5deg) translateY(-6px); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media print {
  .site-header, .site-footer, .toc, .mtoc, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .legal-main { padding: 0; }
  .legal-article { max-width: none; }
  a { color: #000; }
  .legal-article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}