@import "tailwindcss";

@theme {
  --color-paper: #f3eee4;
  --color-card: #fffdf8;
  --color-ink: #101828;
  --color-muted: #3f4a5a;
  --color-line: #d9d0be;
  --color-amber: #9a6418;
  --color-navy: #1B365D;
  --color-good: #1f6b4a;
  --color-focus: #0b57d0;
  --font-display: Georgia, "Iowan Old Style", Palatino, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) { cursor: pointer; }
}

:root { --ink:#101828; --muted:#3f4a5a; --paper:#f3eee4; --card:#fffdf8; --line:#d9d0be; --amber:#9a6418; --navy:#1B365D; --good:#1f6b4a; --focus:#0b57d0;
  --shadow-border: 0 0 0 1px rgba(16,24,40,.06), 0 1px 2px -1px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.04);
  --shadow-hover: 0 0 0 1px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.08);
}
* { box-sizing: border-box; }
html { font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--paper); color:var(--ink); line-height:1.55; }
body.lg { font-size: 20px; }
body.xl { font-size: 22px; }
a { color:var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
p { text-wrap: pretty; }
.skip { position:absolute; left:-999px; top:8px; z-index:50; background:var(--navy); color:#fff; padding:8px 12px; border-radius:8px; }
.skip:focus { left:8px; }
.bar { position:sticky; top:0; z-index:20; background:rgba(243,238,228,.92); border-bottom:1px solid var(--line); backdrop-filter: blur(10px); }
header.nav { max-width:1120px; margin:0 auto; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.04em; text-decoration:none; color:var(--ink); font-size:17px; }
.brand img { width:28px; height:28px; border-radius:8px; }
nav { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
nav a { text-decoration:none; color:var(--muted); font-size:14px; white-space:nowrap; padding:8px 10px; border-radius:8px; transition:color 150ms ease, background-color 150ms ease; }
nav a:hover { color:var(--ink); background: rgba(255,253,248,.7); }
nav a[aria-current="page"] { color:var(--ink); font-weight:650; background:#fff; }
.nav-toggle { display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 9px; }
.nav-toggle span { display:block; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; }
.tools { display:flex; gap:8px; align-items:center; }
.tools button { font:inherit; font-size:13px; padding:6px 10px; min-height:36px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; transition:scale 150ms ease-out, background-color 150ms ease; }
.tools button:active { scale: 0.96; }
.btn { display:inline-flex; align-items:center; justify-content:center; background:var(--navy); color:#fff !important; text-decoration:none; border:0; padding:14px 18px; border-radius:10px; cursor:pointer; font-family:inherit; font-size:16px; font-weight:650; min-height:44px; letter-spacing:.01em; transition:scale 150ms ease-out, background-color 150ms ease; }
.btn:hover { background: #1c3c6c; }
.btn:active { scale: 0.96; }
.btn.sec { background:#fff; color:var(--ink) !important; border:1px solid var(--line); }
.btn.sec:hover { background: #fffdf8; }
.btn.full { width:100%; text-align:center; }
.btn.tiny { min-height: 36px; padding: 8px 12px; font-size: 14px; }
.price { font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; margin:4px 0 8px; }
.legal-ol { padding-left:1.2em; }
.legal-ol li { margin:8px 0; }
input, select { font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; width:100%; max-width:320px; min-height:44px; }
label.field { display:block; margin:10px 0; font-size:15px; color:var(--muted); }
@media print { .bar, footer, .btn, .tools, .pin-board, .nav-toggle, .dock, .skip, .sp-toast { display:none !important; } *, *::before, *::after { animation:none !important; transition:none !important; } }
main { max-width:1120px; margin:0 auto; padding:16px 20px 72px; }
h1, h2, h3 { font-family: Georgia, "Iowan Old Style", Palatino, serif; text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-size:clamp(32px,5.2vw,52px); line-height:1.12; margin:12px 0 14px; }
h2 { font-size:26px; margin:0 0 10px; }
.lead { font-size:1.05rem; color:var(--muted); max-width:36em; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:20px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.card { background:var(--card); border:1px solid transparent; border-radius:18px; padding:22px; box-shadow: var(--shadow-border); transition: box-shadow 180ms ease, transform 180ms ease; }
.plan:hover, .audience .card:hover, .how .card:hover, .mock-card:hover {
  box-shadow: var(--shadow-hover); transform: translateY(-3px);
}
.muted { color:var(--muted); }
.hero-img { width:100%; border-radius:16px; border:1px solid var(--line); margin:8px 0 22px; }
.q { font-size:1.18rem; margin:0 0 16px; font-family: Georgia, "Iowan Old Style", Palatino, serif; line-height: 1.45; }
.choices label { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:14px; margin:8px 0; cursor:pointer; background:#fff; transition:border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; position: relative; }
.choices label:hover { border-color:var(--navy); box-shadow: var(--shadow-border); }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices label:has(input:checked) { border-color: var(--navy); background: #eef3fb; }
.choices .ch {
  flex-shrink:0; width:28px; height:28px; border-radius:8px; background:#f3eee4; color:var(--navy);
  display:grid; place-items:center; font-weight:700; font-size:13px;
}
.choices .ct { flex: 1; }
.choices label.ok { border-color: var(--good); background: #e7f3ec; }
.choices label.bad { border-color: #9a3b2a; background: #f8e8e4; }
.choices label.ok .ch { background: var(--good); color: #fff; }
.choices label.bad .ch { background: #9a3b2a; color: #fff; }
.stat { font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; }
footer { max-width:1120px; margin:0 auto; padding:28px 20px 40px; color:var(--muted); font-size:13px; }
.tag { display:inline-block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); font-weight:700; }
.ok { color:var(--good); }
.passage { font-family: Georgia, "Iowan Old Style", serif; font-size:1.05rem; line-height:1.7; max-width:42em; white-space:pre-wrap; }
.split { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; }
.bar-track { height:8px; background:#e7dfcf; border-radius:99px; overflow:hidden; margin:8px 0 16px; }
.bar-fill { height:100%; background:var(--navy); transform-origin:left center; animation:growX 400ms cubic-bezier(0.2,0,0,1) both; }
.warn { border-color:#c9842a; background:#fff8ee; }
body.focus .bar nav a, body.focus footer, body.focus .dock { display:none; }
.week-head, .assign-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.week-head h3, .assign-head h3 { margin:0; }
.week-count { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.week-count strong { font-size:28px; display:block; line-height:1; color:var(--navy); }
.week-count span { font-size:13px; color:var(--muted); }
.week-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.week-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px 4px 12px; min-height:88px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; text-align:center; color:var(--muted); user-select:none; transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.week-day input { appearance:none; -webkit-appearance:none; position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; border:0; background:transparent; }
.week-day:has(input:checked), .week-day.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.week-day.today { box-shadow:0 0 0 2px var(--amber); }
.week-day .dname { font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:11px; }
.week-day .dmark { font-size: 11px; min-height: 18px; display:flex; align-items:center; justify-content:center; }
.assign-list { display:flex; flex-direction:column; gap:10px; }
.assign-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:14px 16px; border-radius:12px; background:#fff; box-shadow: var(--shadow-border); }
.assign-item:has(input:checked), .assign-item.done { background:#f7f4ec; }
.assign-item strong { display:block; margin:2px 0 4px; }
.assign-check { display:flex; padding-top:4px; }
.assign-check input { width:22px; height:22px; accent-color:var(--navy); cursor:pointer; }
.assign-kind { display:inline-block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--amber); font-weight:700; }
.assign-empty { padding:18px 16px; border:1px dashed var(--line); border-radius:12px; background:#fff; color:var(--muted); }
.assign-form { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.assign-form .span2 { grid-column:1 / -1; }
.assign-form input, .assign-form select { max-width:none; }
.legal-list { background:var(--card); border-radius:14px; padding:8px 22px; box-shadow: var(--shadow-border); }
.legal-row { display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:16px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); }
.legal-row:last-child { border-bottom:0; }
.legal-row a { text-decoration:none; color:var(--navy); font-family:Georgia,"Iowan Old Style",serif; font-size:22px; }
.faq { background:var(--card); border-radius:14px; padding:8px 22px; box-shadow: var(--shadow-border); }
.faq-row { padding:16px 0; border-bottom:1px solid var(--line); }
.faq-row:last-child { border-bottom:0; }
.faq-row h3 { margin:0 0 6px; font-size:20px; }
.faq-row p { margin:0; }
.script { font-family:Georgia,"Iowan Old Style",serif; font-size:1.15rem; margin:0; }
.desk-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:4px 0 22px; }
.step { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 8px 4px; }
.step .dot { width:36px; height:36px; border-radius:50%; border:2px solid var(--line); background:#fff; color:var(--muted); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; position:relative; z-index:1; }
.step .lab { margin-top:10px; font-size:15px; font-weight:650; color:var(--ink); line-height:1.25; }
.step .n { font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:4px 0 0; }
.step.on .dot { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 0 0 4px #eef3fb; }
.step.on .n { color:var(--navy); }
.step.done .dot { background:var(--good); border-color:var(--good); color:#fff; }
.step.done .n { color:var(--good); }
.step::before, .step::after { content:""; position:absolute; top:25px; height:2px; background:var(--line); z-index:0; }
.step::before { left:0; right:50%; }
.step::after { left:50%; right:0; }
.step:first-child::before, .step:last-child::after { display:none; }
.step.done::before, .step.done::after, .step.on::before { background:var(--good); }
.how { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:8px 0 22px; }
.how .n { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--amber); }
.how h3 { margin:6px 0 8px; font-size:22px; }
.how .card { display:grid; grid-template-columns:36px 1fr; gap:2px 14px; align-items:start; }
.how-num { width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; grid-row:1 / span 4; }
.how .n, .how h3, .how p { grid-column:2; }
.how h3 { margin:0 0 8px; }
.nextbar { background:var(--navy); color:#fff; border-radius:14px; padding:18px 20px; margin:8px 0 18px; }
.nextbar h3, .nextbar p { color:#fff; }
.nextbar h3 { margin:0 0 6px; }
.nextbar p { margin:0 0 12px; opacity:.9; }
.nextbar .btn { background:#fff; color:var(--navy) !important; }
.nextbar .btn.sec { background:transparent; color:#fff !important; border-color:rgba(255,255,255,.35); }
details.more { margin-top:16px; border-radius:14px; background:var(--card); padding:4px 20px 16px; box-shadow: var(--shadow-border); }
details.more > summary { cursor:pointer; padding:14px 0; font-weight:600; font-family:Georgia,serif; font-size:20px; }
.done-line { display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); }
.kicker { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:8px 0 14px; }
.kicker li { padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:13px; font-weight:650; color:var(--muted); }
.auth-slot { display:flex; align-items:center; gap:10px; }
.auth-slot a.signin { text-decoration:none; color:var(--navy); font-weight:650; font-size:14px; white-space:nowrap; }
.save-pill { font-size:12px; font-weight:650; color:var(--good); white-space:nowrap; }
.who-row { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px; }
.who-chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; min-height:44px; cursor:pointer; font:inherit; color:var(--ink); }
.who-chip.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.account-card { box-shadow: 0 0 0 1px var(--navy), var(--shadow-border); }
.sp-boot { min-height:60vh; display:grid; place-items:center; color:var(--muted); font-family:Georgia, serif; font-size:22px; }
label.btn { display:inline-flex; align-items:center; cursor:pointer; }
header.nav .tools { margin-left:auto; }

.walk { display:flex; flex-direction:column; gap:36px; margin:18px 0 32px; }
.walk-step { display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.18fr); gap:28px; align-items:center; }
.walk-step:nth-child(even) { grid-template-columns:minmax(0,1.18fr) minmax(0,0.92fr); }
.walk-step:nth-child(even) .walk-copy { order:2; }
.walk-copy .n { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--amber); margin:10px 0 6px; }
.walk-copy h2 { font-size:clamp(22px, 3vw, 30px); margin:0 0 10px; line-height:1.2; }
.walk-copy p { margin:0 0 16px; color:var(--muted); max-width:34em; }
.walk-num { width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
.walk-shot { margin:0; background:var(--navy); border-radius:18px; padding:10px 10px 12px; box-shadow:0 18px 40px rgba(16,24,40,.18); display:flex; flex-direction:column; min-height: 320px; }
.walk-shot .chrome { display:flex; align-items:center; gap:6px; padding:2px 8px 10px; flex-shrink:0; }
.walk-shot .chrome i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.38); display:block; }
.walk-shot .chrome span { margin-left:8px; color:rgba(255,255,255,.72); font-size:11px; letter-spacing:.04em; }
.walk-shot img { width:100%; border-radius:10px; display:block; background:var(--paper); flex:1 1 auto; min-height: 260px; height: 0; object-fit:cover; object-position:top left; }
.login-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:22px; align-items:start; margin-top:8px; }
.login-form .field { max-width:none; }
.login-form input { max-width:none; }
.linkish { background:none; border:0; padding:0; margin-top:14px; font:inherit; font-size:14px; color:var(--navy); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.login-aside { background:var(--card); border-radius:14px; padding:22px; box-shadow: var(--shadow-border); }
.login-aside .n { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--amber); margin:0 0 8px; }
.login-steps { margin:0 0 14px; padding-left:1.15em; }
.login-steps li { margin:8px 0; }

.dash { max-width: 1120px; }
.dash-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 18px; position: sticky; top: 56px; z-index: 15;
  padding: 8px 0 10px; background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
}
.dash-tabs {
  display:flex; gap:6px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%;
}
.dash-tabs a {
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 650;
}
.dash-tabs a.on, .dash-tabs a[aria-current="page"] { background: var(--navy); color: #fff; }
.dash-tabs a { flex-direction: column; gap: 1px; line-height: 1.15; min-height: 44px; padding: 6px 14px; }
.dash-tabs a span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .65; }
.dash-tabs a.on span { opacity: .9; color: #d4c4a0; }
.next-act {
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background: #fff; border-radius: 16px; padding: 12px 16px; margin: 0 0 16px;
  box-shadow: var(--shadow-border);
}
.next-act p { margin: 0; max-width: 40em; }
.next-act.done { background: #e7f3ec; }
.who-split { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 24px; }
.who-card {
  display:block; text-decoration:none; color: inherit;
  background: var(--card); border-radius: 22px; padding: 24px;
  box-shadow: var(--shadow-border); transition: box-shadow 180ms ease, transform 180ms ease;
}
.who-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.who-card .n { margin: 0 0 6px; }
.who-card h2 { margin: 0 0 8px; }
.who-card p { color: var(--muted); margin: 0 0 16px; }
.who-card.student { background: var(--navy); color: #fff; }
.who-card.student p, .who-card.student .n { color: #d4c4a0; }
.who-card.student h2 { color: #fff; }
.who-card.student .btn { background: #f3eee4; color: var(--navy) !important; }
.more-tonight { margin: 8px 0 16px; }
.more-tonight summary {
  cursor: pointer; font-weight: 650; padding: 12px 4px; color: var(--navy);
}
.crumb-sep { color: var(--muted); margin: 0 8px; }
body.member nav a.btn.tiny { display: none; }
body.member .offer-bar { display: none; }
@media (max-width: 720px) {
  .who-split { grid-template-columns: 1fr; }
}
.dash-who { display:flex; align-items:center; gap:10px; }
.dash-who strong { display:block; font-size:14px; line-height:1.2; }
.dash-who span { font-size:12px; color: var(--muted); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; letter-spacing:.04em; flex-shrink:0;
}
.dash-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin: 0 0 8px; }
.dash-head h1 { margin: 8px 0 8px; }
.dash-head-side { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.pill {
  display:inline-flex; align-items:center; min-height:32px; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #eef3fb; color: var(--navy);
}
.pill.good { background: #e7f3ec; color: var(--good); }
.pill.mid { background: #fff4e5; color: var(--amber); }
.pill.low { background: #f8e8e4; color: #9a3b2a; }
.meta-chip {
  display:inline-flex; align-items:center; min-height:32px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-size: 13px; color: var(--muted);
}
.dash-hero {
  display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(165deg, #1c3c6c 0%, var(--navy) 58%, #102038 100%);
  color: #fff; border-radius: 24px; padding: 26px 28px; margin: 8px 0 18px;
  box-shadow: 0 18px 40px rgba(22,48,88,.22);
  position: relative; overflow: hidden;
}
.dash-hero::after {
  content: ""; position: absolute; inset: auto -20% -40% 40%; height: 180px; width: 180px;
  background: radial-gradient(circle, rgba(243,238,228,.12), transparent 70%);
  pointer-events: none;
}
.dash-hero h2 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); color: #fff; }
.dash-hero p { margin: 0; color: rgba(255,255,255,.82); max-width: 38em; }
.dash-hero .n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #c9d4e4; margin: 0 0 6px; }
.dash-hero .btn { background: #fff; color: var(--navy) !important; }
.dash-hero .btn.sec { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.35); }
.hero-steps { display:flex; gap:16px; flex-wrap:wrap; margin: 14px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.88); font-size: 13px; }
.hero-steps li { display:flex; align-items:center; gap:8px; }
.hero-steps li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c9d4e4; display:block; }
.rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 10px; }
.ring {
  background: var(--card); border-radius: 20px; padding: 16px 12px 14px; text-align: center;
  box-shadow: var(--shadow-border); transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.ring:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.ring-dial { position: relative; width: 88px; height: 88px; margin: 0 auto 8px; }
.ring-dial svg { display: block; }
.ring-bg { fill: none; stroke: #e7dfcf; stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--navy); stroke-width: 8; stroke-linecap: round; }
.ring-fg.good { stroke: var(--good); }
.ring-fg.mid { stroke: var(--amber); }
.ring-fg.low { stroke: #9a3b2a; }
.ring-tick { stroke: #cfc6b4; stroke-width: 1.4; }
.ring-val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: 20px; line-height: 1; color: var(--ink);
}
.ring-val span { font-size: 11px; color: var(--muted); margin-left: 1px; }
.ring-lab { font-weight: 650; font-size: 14px; }
.ring-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dash-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-top: 8px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin: 4px 0 16px; }
.legend .lg { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.legend .lg.good { background: var(--good); }
.legend .lg.mid { background: var(--amber); }
.legend .lg.low { background: #9a3b2a; }
.save-card { margin: 0 0 16px; }
.spark { display:flex; align-items:flex-end; gap:6px; height: 88px; }
.spark-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.spark-bar { width:100%; max-width:28px; background: var(--navy); border-radius: 6px 6px 2px 2px; min-height:4px; }
.spark-col.today .spark-bar { background: var(--amber); }
.spark-col span { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.spark-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.trend-svg { width: 100%; height: 88px; display:block; }
.trend-svg path { fill: none; stroke: var(--navy); stroke-width: 2; }
.trend-svg circle { fill: var(--navy); }
.trend-svg text { fill: var(--muted); font-size: 9px; font-family: inherit; }
.trend-empty { padding: 8px 0 4px; }
.err-bars, .sec-bars { display: flex; flex-direction: column; gap: 12px; }
.err-bar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 28px; gap: 8px; align-items: center; }
.err-lab { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err-track { display: block; height: 8px; background: #e7dfcf; border-radius: 99px; overflow: hidden; }
.err-track i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }
.err-n { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); text-align: right; }
.sec-bar-lab { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; align-items: center; }
.sec-chip { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: #eef3fb; color: var(--navy); }
.sec-chip.good { background: #e7f3ec; color: var(--good); }
.sec-chip.mid { background: #fff4e5; color: var(--amber); }
.sec-chip.low { background: #f8e8e4; color: #9a3b2a; }
.sec-bar-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.bar-fill.good { background: var(--good); }
.bar-fill.mid { background: var(--amber); }
.bar-fill.low { background: #9a3b2a; }
.todo-list { display: flex; flex-direction: column; gap: 10px; }
.todo-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-border);
}
.todo-item.done { background: #f7f4ec; }
.todo-item.done strong { text-decoration: line-through; color: var(--muted); }
.todo-item.due { box-shadow: 0 0 0 1px var(--amber); }
.activity { list-style: none; margin: 0; padding: 0; display:flex; flex-direction:column; gap: 12px; }
.activity li { display:flex; gap: 10px; align-items:flex-start; }
.activity .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); margin-top: 7px; flex-shrink:0; }
.activity .miss .dot { background: #9a3b2a; }
.activity .todo .dot { background: var(--good); }
.activity .score .dot { background: var(--amber); }
.activity strong { display:block; font-size: 14px; }
.activity span { font-size: 12px; color: var(--muted); }
.week-strip { display:flex; gap: 4px; }
.week-strip .ws {
  width: 26px; height: 26px; border-radius: 8px; display:grid; place-items:center;
  font-size: 11px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line);
}
.week-strip .ws.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.week-strip .ws.today { box-shadow: 0 0 0 2px var(--amber); }
.fridge {
  position: relative; background: #fffdf6; border-radius: 20px; padding: 28px 24px 22px;
  box-shadow: var(--shadow-border), 0 12px 28px rgba(16,24,40,.08);
}
.fridge-pin {
  position: absolute; top: 10px; left: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: #9a3b2a; transform: translateX(-50%); box-shadow: 0 2px 0 rgba(16,24,40,.12);
}
.sunday-row { display:grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-top: 16px; align-items: stretch; }
.callout {
  background: #fff8ee; border-radius: 16px; padding: 14px 16px; margin: 0 0 16px;
  box-shadow: 0 0 0 1px rgba(154,100,24,.18);
}
.callout strong { display:block; margin-bottom: 4px; }
.callout p { margin: 0; color: var(--muted); }
.res-h { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); margin: 16px 0 10px; font-weight: 700; font-family: inherit; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.res-card {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-border); transition: transform 150ms ease, box-shadow 150ms ease;
}
.res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.res-thumb { position: relative; display: block; aspect-ratio: 16/9; background: var(--navy); overflow: hidden; }
.res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-thumb.empty { display: grid; place-items: center; color: #fff; text-decoration: none; }
.res-thumb.empty span { font-weight: 700; letter-spacing: .08em; font-size: 18px; opacity: .8; }
.res-thumb .play {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgba(16,24,40,.72);
}
.res-thumb .play::after {
  content: ""; position: absolute; left: 18px; top: 14px; border-style: solid;
  border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #fff;
}
.res-body { padding: 12px 14px 14px; }
.res-body strong { display: block; margin: 4px 0 6px; font-size: 16px; line-height: 1.3; }
.res-body .muted { margin: 0; font-size: 13px; }
h4.res-h { font-family: ui-sans-serif, system-ui, sans-serif; }
.lib-filters { display:flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.lib-filters button {
  min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font: inherit; font-size: 14px; font-weight: 650; color: var(--muted);
}
.lib-filters button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.set-chrome { display:flex; flex-wrap:wrap; gap: 10px 16px; align-items:center; font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.set-chrome a { font-weight: 650; text-decoration: none; }
.set-sec { color: var(--ink); font-weight: 650; }
.set-clock { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); min-width: 4ch; }
.set-track { margin-bottom: 16px; }
.q-card { padding: 26px; }
.q-num { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 700; color: var(--amber); margin: 0 0 10px; }
.q-num span { color: var(--muted); font-weight: 650; }

.mission {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center;
  background: var(--card); border-radius: 28px; padding: 26px 30px; margin: 8px 0 20px; box-shadow: var(--shadow-border);
}
.mission.is-done { background: #e7f3ec; }
.mission-copy h2 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 36px); }
.mission-copy p { margin: 0 0 8px; color: var(--muted); max-width: 36em; }
.mission-copy .n { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--amber); margin: 0 0 6px; }
.mission-copy .row { margin: 12px 0 0; }
.big-dial { position: relative; width: 140px; height: 140px; }
.big-dial svg { display: block; }
.big-dial .ring-bg { stroke-width: 10; }
.big-dial .ring-fg { stroke-width: 10; }
.big-val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 750; font-variant-numeric: tabular-nums; font-size: 28px; line-height: 1; color: var(--ink);
}
.path {
  display: flex; list-style: none; padding: 0; margin: 14px 0 4px;
  max-width: 340px; position: relative; justify-content: space-between;
}
.path::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 13px;
  height: 2px; background: var(--line); z-index: 0;
}
.path li {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted);
}
.path li.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.path li.now { box-shadow: 0 0 0 4px #eef3fb; }
.path li.now:not(.on) { border-color: var(--amber); color: var(--amber); animation: pulseNow 1.8s ease-in-out infinite; }
.dash-hero .path { margin-top: 16px; }
.dash-hero .path::before { background: rgba(255,255,255,.22); }
.dash-hero .path li { background: transparent; border-color: rgba(255,255,255,.4); color: #c9d4e4; }
.dash-hero .path li.on { background: #fff; border-color: #fff; color: var(--navy); }
.dash-hero .path li.now { box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.dash-hero .path li.now:not(.on) { border-color: #e8c98a; color: #e8c98a; }
@keyframes pulseNow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(154,100,24,.35); }
  50% { box-shadow: 0 0 0 7px rgba(154,100,24,0); }
}

.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.2fr);
  gap: 32px; align-items: center; margin: 12px 0 36px;
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 8px 0; }
.hero-copy .eyebrow {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); margin: 0 0 14px;
}
.hero-copy h1 { font-size: clamp(38px, 5.8vw, 56px); line-height: 1.04; margin: 0 0 12px; max-width: 12ch; }
.hero-copy .subhead { font-family: Georgia, "Iowan Old Style", Palatino, serif; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; margin: 0 0 14px; color: var(--navy); }
.hero-copy .subhead em { font-style: italic; color: var(--amber); }
.hero-copy .row { margin-top: 4px; }
.hero-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch;
}
.mock-card {
  background: #fff; border-radius: 22px; padding: 20px 18px 18px;
  box-shadow: 0 18px 40px rgba(22,48,88,.12), 0 0 0 1px rgba(22,48,88,.06);
  color: var(--ink);
}
.mock-card header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; color: var(--navy); }
.mock-card header span { font-weight: 700; font-size: 16px; }
.mock-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--amber); margin: 10px 0 2px; }
.mock-num { font-size: 40px; font-weight: 700; line-height: 1; margin: 0; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.mock-num.sm { font-size: 28px; }
.mock-sub { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.mock-sub span { color: var(--amber); font-weight: 650; }
.mock-spark { width: 100%; height: 64px; display: block; margin: 8px 0 4px; }
.mock-bar { height: 6px; background: #efe6d4; border-radius: 99px; margin-top: 8px; overflow: hidden; }
.mock-bar i { display:block; height:100%; background: var(--amber); border-radius: 99px; }
.mock-card.practice .mock-q { font-family: Georgia, "Iowan Old Style", Palatino, serif; font-size: 16px; line-height: 1.4; margin: 0 0 12px; color: var(--ink); }
.mock-choices { list-style:none; padding:0; margin:0 0 14px; }
.mock-choices li { display:flex; align-items:center; gap:10px; font-size: 14px; padding: 6px 0; color: var(--ink); }
.mock-choices i { width:16px; height:16px; border-radius:50%; border:2px solid var(--line); display:block; flex-shrink:0; }
.mock-choices .on i { border-color: var(--navy); box-shadow: inset 0 0 0 4px var(--navy); }
.mock-timer {
  background: #f7f0e2; border-radius: 14px; padding: 12px 14px; text-align: center; margin-bottom: 12px;
}
.mock-timer span { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color: var(--amber); }
.mock-timer strong { display:block; font-size: 32px; color: var(--amber); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mock-submit { background: var(--navy); color: #fff; text-align:center; border-radius: 10px; padding: 12px; font-weight: 650; font-size: 14px; }
.setup-strip {
  background: var(--card); border-radius: 20px; padding: 22px 24px;
  box-shadow: var(--shadow-border); margin: 0 0 28px; scroll-margin-top: 88px;
}
.setup-strip .tag { margin: 0 0 10px; }
.setup-ol {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: setup;
}
.setup-ol li { counter-increment: setup; padding-left: 44px; position: relative; }
.setup-ol li::before {
  content: counter(setup); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
.setup-ol strong { display: block; font-size: 16px; margin-bottom: 4px; }
.setup-ol span { display: block; font-size: 14px; color: var(--muted); }
.audience {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 28px;
}
.audience h3 { margin: 6px 0 8px; font-size: 22px; }
.audience p { margin: 0; color: var(--muted); }
.site-foot { border-top: 1px solid var(--line); margin-top: 12px; }
.contact-card ol { margin: 8px 0 16px; padding-left: 20px; }
.contact-card li { margin: 8px 0; }
.foot-grid { display: grid; grid-template-columns: 1.3fr .85fr .85fr; gap: 28px; }
.foot-grid strong { display: block; color: var(--ink); margin-bottom: 8px; font-size: 14px; }
.foot-grid a { display: inline-block; margin: 4px 10px 4px 0; }

.pin-card { max-width:380px; margin: 0 auto; padding: 28px 22px; }
.pin-screen { max-width: 440px; margin: 0 auto; text-align: center; }
.pin-hero { margin: 8px 0 12px; }
.pin-hero .avatar { width: 56px; height: 56px; font-size: 22px; margin: 0 auto 10px; }
.pin-hero h1 { margin: 8px 0 6px; }
.pin-hero .lead { margin-left: auto; margin-right: auto; }
.pin-dots { display:flex; gap:14px; justify-content:center; margin:8px 0 18px; }
.pin-dots span { width:16px; height:16px; border-radius:50%; border:2px solid var(--navy); background:transparent; transition: background-color 150ms ease, transform 150ms ease; }
.pin-dots span.on { background:var(--navy); transform: scale(1.08); }
.pin-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.pin-grid button { min-height:64px; font-size:24px; font-weight:700; border:1px solid var(--line); background:#fff; border-radius:16px; color:var(--ink); font-family:inherit; }
.pin-card.shake { animation: pinShake 420ms cubic-bezier(0.2,0,0,1); }
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.timer-bar {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  background: var(--navy); color: #fff; border-radius: 16px; padding: 14px 18px; margin: 0 0 16px;
}
.timer-bar .n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #c9d4e4; }
.timer-bar strong { font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timer-bar span { color: rgba(255,255,255,.8); font-size: 14px; }
.timer-bar.low { background: #9a3b2a; }
.setup-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; margin: 4px 0 18px;
}
.setup-hero h1 { margin: 8px 0 10px; }
.plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin: 8px 0 8px; }
.plan { display:flex; flex-direction:column; }
.plan h2 { margin: 6px 0 4px; }
.plan .price { margin: 4px 0 10px; }
.plan .price span { font-size: 16px; font-weight: 650; color: var(--muted); margin-left: 4px; }
.plan .price s { color: var(--muted); font-size: 18px; margin-right: 8px; font-weight: 500; }
.plan ul { padding-left: 1.15em; margin: 8px 0 16px; }
.plan li { margin: 7px 0; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.featured { box-shadow: 0 0 0 2px var(--navy), 0 16px 40px rgba(22,48,88,.12); }
.offer-bar {
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background: var(--navy); color: #f3eee4; border-radius: 16px; padding: 14px 18px; margin: 0 0 18px;
}
.offer-bar p { margin:0; max-width: 42em; }
.offer-bar strong { font-weight: 750; }
.offer-bar span { display:inline; margin-left: .4em; color: #d4c4a0; }
.offer-bar .btn { background: #f3eee4; color: var(--navy) !important; }
.offer-bar .btn:hover { background: #fff; }
.offer-stack { margin: 14px 0 4px; }
.offer-price { font-family: Georgia, "Iowan Old Style", Palatino, serif; font-size: clamp(22px, 3.2vw, 30px); margin: 0; letter-spacing: -0.01em; color: var(--ink); }
.offer-price .offer-code { font-size: 1.05em; }
.offer-price s { color: var(--muted); font-size: .55em; margin-right: 8px; }
.offer-price strong { color: var(--navy); }
.offer-then { margin: 4px 0 0; color: var(--muted); }
.offer-code-line { margin: 6px 0 0; font-size: 15px; font-weight: 650; color: var(--ink); }
.offer-code {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--navy); color: #f3eee4; font-weight: 750; letter-spacing: .04em;
  font-size: 13px; vertical-align: 1px;
}
.mock-week {
  display: flex; gap: 4px; margin: 6px 0 8px;
}
.mock-week span {
  flex: 1; text-align: center; font-size: 11px; font-weight: 700;
  padding: 8px 0; border-radius: 8px; background: #eef1f6; color: var(--muted);
}
.mock-week span.on { background: var(--navy); color: #f3eee4; }
.close-offer {
  background: var(--navy); color: #f3eee4; border-radius: 22px; padding: 28px 24px; margin: 28px 0 8px;
}
.close-offer .tag { color: #d4c4a0; }
.close-offer h2 { color: #fff; margin: 6px 0 10px; }
.close-offer p { color: #d9e0ea; max-width: 36em; }
.close-offer .btn { background: #f3eee4; color: var(--navy) !important; }
.close-offer .btn:hover { background: #fff; }
.close-offer .btn.sec { background: transparent; color: #f3eee4 !important; border-color: rgba(243,238,228,.35); }
nav .btn.tiny { padding: 8px 12px; min-height: 36px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.type-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.type-chip {
  display:inline-flex; align-items:center; gap:8px;
  min-height:40px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font:inherit; font-size:13px; font-weight:650; color:var(--ink); cursor:pointer;
}
.type-chip span { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.type-chip:hover { border-color: var(--navy); background: #eef3fb; }
.why-tonight { margin: 8px 0 0; max-width: 34em; }

.pin-board { background: var(--card); border-radius: 20px; padding: 22px; margin: 18px 0; box-shadow: var(--shadow-border); }
.pin-board.installed { background: #e7f3ec; }
.pin-actions { display:flex; flex-wrap:wrap; gap:10px; margin: 14px 0; }
.install-hero { display:grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.install-steps { padding-left: 1.2em; }
.install-steps li { margin: 10px 0; }
.phone-home {
  width: 180px; background: var(--navy); border-radius: 28px; padding: 18px 14px 22px;
  box-shadow: 0 18px 40px rgba(22,48,88,.22);
}
.phone-home.large { width: 220px; padding: 22px 16px 26px; }
.ph-notch { width: 48px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.2); margin: 0 auto 16px; }
.ph-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ph-app { display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; font-size:11px; }
.ph-app img { width: 52px; height: 52px; border-radius: 12px; background:#fff; }
.ph-app.on img { box-shadow: 0 0 0 3px #e8c98a; }

.dock {
  display: none; position: sticky; bottom: 0; z-index: 18;
  background: rgba(243,238,228,.94); border-top: 1px solid var(--line); backdrop-filter: blur(10px);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  justify-content: space-around;
}
.dock a {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; color:var(--muted); font-size:11px; font-weight:650; padding:6px 12px; border-radius:12px; min-width:64px;
}
.dock a[aria-current="page"] { color: var(--navy); background: #eef3fb; }
.sp-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px;
  opacity: 0; pointer-events: none; z-index: 40; transition: opacity 200ms ease, transform 200ms ease;
}
.sp-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes popIn {
  from { opacity:0; transform:scale(0.25); }
  to { opacity:1; transform:scale(1); }
}
@keyframes growX {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}
main.enter .steps, main.enter .how .card, main.enter .mission, main.enter .dash-hero, main.enter .audience .card {
  animation:fadeInUp 360ms cubic-bezier(0.2,0,0,1) both;
}

@media (max-width: 900px){
  .hero-split { grid-template-columns: 1fr; gap: 22px; min-height: 0; }
  .hero-copy h1 { max-width: none; font-size: clamp(32px, 9vw, 44px); }
  .hero-pair { grid-template-columns: 1fr; }
  .hero-frame img { min-height: 240px; max-height: 52vh; }
  .setup-ol { grid-template-columns: 1fr; gap: 14px; }
  .audience { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid, .sunday-row { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .walk-step, .walk-step:nth-child(even) { grid-template-columns: 1fr; }
  .walk-step:nth-child(even) .walk-copy { order: 0; }
  .login-grid { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .install-hero { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nav-toggle { display:block; }
  header.nav nav, header.nav .tools { display:none; }
  header.nav.open nav, header.nav.open .tools { display:flex; width:100%; }
  header.nav { flex-wrap: wrap; }
  .dock { display:flex; }
  .mission { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 18px; gap: 14px; }
  .mission-copy .path { margin-left: auto; margin-right: auto; }
  .mission-copy .row { justify-content: center; }
  .setup-hero { grid-template-columns: 1fr; }
  body.standalone main { padding-bottom: 96px; }
  body.standalone .dock { display:flex; }
}
@media (max-width: 520px){
  .foot-grid { grid-template-columns: 1fr; }
  .dash-tabs { width: 100%; }
  .dash-tabs a { flex: 1; padding: 8px 10px; }
  .dash-top { top: 0; }
  .week-grid { gap:4px; }
  .week-day { min-height:72px; padding:10px 2px; }
  .assign-form, .legal-row { grid-template-columns:1fr; }
  .steps { gap: 0; }
  .step .lab { font-size:12px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .path li.now { animation: none; }
  .pin-card.shake { animation: none; }
}

.heat-board { margin: 4px 0 8px; }
.heat-head, .heat-row {
  display: grid; grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center;
}
.heat-head { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-align: center; margin-bottom: 6px; }
.heat-lab { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.heat { display: contents; }
.heat-cell {
  min-height: 36px; aspect-ratio: 1; border-radius: 8px; background: #efe8d8; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em;
}
.heat-cell.lv1 { background: #c9d4e4; color: var(--navy); }
.heat-cell.lv2 { background: #7f93b3; color: #fff; }
.heat-cell.lv3 { background: var(--navy); color: #fff; }
.heat-cell.today { box-shadow: 0 0 0 2px var(--amber); }
.nights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nights li {
  display: grid; grid-template-columns: 7.5em 1fr auto; gap: 10px; align-items: baseline;
  padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-border);
}
.nights .n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--amber); }
.nights strong { font-size: 15px; }
.nights span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.set-dots { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 12px; }
.set-dots i {
  width: 12px; height: 12px; border-radius: 50%; background: #e7dfcf; display: block;
}
.set-dots i.on { background: var(--navy); }
.set-dots i.now { background: var(--amber); box-shadow: 0 0 0 3px rgba(154,100,24,.18); }
.coach {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #eef3fb; color: var(--navy); font-size: 14px;
}
.coach.ok { background: #e7f3ec; color: var(--good); }
.coach.bad { background: #fff4e5; color: var(--amber); }
.keys { display: flex; gap: 6px; margin: 8px 0 0; }
.keycap {
  min-width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted);
}
.miss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.miss-card { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-border); }
.miss-card .n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--amber); margin: 0 0 6px; }
.miss-card p { margin: 0; color: var(--muted); font-size: 14px; }
.desk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.desk-stats .card { padding: 18px; }
.desk-stats .stat { font-size: 28px; margin: 4px 0 0; }
.legend-heat { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.legend-heat i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-heat i.a { background: #efe8d8; }
.legend-heat i.b { background: #c9d4e4; }
.legend-heat i.c { background: #7f93b3; }
.legend-heat i.d { background: var(--navy); }
.week-day .dmark { font-size: 13px; min-height: 18px; font-weight: 700; }
.week-day.on .dmark { color: #fff; }
.set-chrome .left, .set-chrome .right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.trend-wrap { margin-top: 4px; }
.todo-due {
  display: block; margin-top: 4px; font-size: 12px; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.todo-due.late { color: #9a3b2a; }
.count-card {
  background: var(--navy); color: #fff; border-radius: 20px; padding: 18px 20px;
  box-shadow: 0 16px 36px rgba(22,48,88,.18);
}
.count-card .n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #c9d4e4; margin: 0 0 6px; }
.count-card .count-num { font-size: 44px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; margin: 4px 0 8px; }
.count-card p { margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }
.count-card.good { background: var(--good); }
.count-card.mid { background: var(--navy); }
.count-card.low { background: #9a3b2a; }
.streak-rail { margin: 10px 0 4px; }
.streak-dots { display: flex; gap: 6px; }
.streak-dots i {
  flex: 1; height: 10px; border-radius: 99px; background: #e7dfcf; display: block;
}
.streak-dots i.on { background: var(--navy); }
.streak-rail p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.desk-stats .streak-rail { margin-top: 12px; }
.desk-stats .streak-dots i.on { background: var(--amber); }
.pace { margin: 0 0 16px; }
.pace-lab { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.pace-lab strong { font-size: 14px; }
.pace-lab span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.set-left {
  font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px; background: #eef3fb; color: var(--navy); font-weight: 650;
}
.res-thumb.has-play { position: relative; }
.lib-group[hidden] { display: none; }
main.enter .count-card, main.enter .pace, main.enter .streak-rail {
  animation: fadeInUp 360ms cubic-bezier(0.2,0,0,1) both;
}
@media (max-width: 720px){
  .count-card .count-num { font-size: 36px; }
}
main.enter .ring { animation: fadeInUp 360ms cubic-bezier(0.2,0,0,1) both; }
main.enter .ring:nth-child(1) { animation-delay: 40ms; }
main.enter .ring:nth-child(2) { animation-delay: 80ms; }
main.enter .ring:nth-child(3) { animation-delay: 120ms; }
main.enter .ring:nth-child(4) { animation-delay: 160ms; }
main.enter .nights li { animation: fadeInUp 320ms cubic-bezier(0.2,0,0,1) both; }
main.enter .nights li:nth-child(2) { animation-delay: 60ms; }
main.enter .nights li:nth-child(3) { animation-delay: 120ms; }
@media (max-width: 720px){
  .nights li { grid-template-columns: 1fr auto; }
  .nights .n { grid-column: 1 / -1; }
  .desk-stats { grid-template-columns: 1fr; }
  .heat { gap: 4px; }
}
.bank-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 8px 0 28px;
}
.bank-strip div {
  background: var(--card); border-radius: 16px; padding: 16px 14px;
  box-shadow: var(--shadow-border); text-align: center;
}
.bank-strip strong {
  display: block; font-size: 28px; font-variant-numeric: tabular-nums; color: var(--navy); line-height: 1.1;
}
.bank-strip span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
@media (max-width: 720px){
  .bank-strip { grid-template-columns: 1fr 1fr; }
}
.include-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 0 0 20px;
}
.include-strip div {
  background: var(--card); border-radius: 16px; padding: 16px 14px;
  box-shadow: var(--shadow-border);
}
.include-strip strong { display: block; font-size: 15px; margin-bottom: 4px; }
.include-strip span { display: block; font-size: 13px; color: var(--muted); }
.cmp { display: grid; gap: 0; margin-top: 8px; }
.cmp-row {
  display: grid; grid-template-columns: minmax(7em, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: start;
}
.cmp-row.head { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--amber); border-bottom-color: var(--navy); }
.cmp-row span:first-child { color: var(--muted); font-weight: 650; }
@media (max-width: 720px){
  .include-strip { grid-template-columns: 1fr 1fr; }
  .cmp-row { grid-template-columns: 1fr; gap: 2px; }
  .cmp-row.head { display: none; }
  .cmp-row span:first-child { margin-top: 8px; color: var(--amber); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
}

body:not(.member) .dock { display: none !important; }

/* Mobile marketing — cards + $19 first, app-like header */
.nav-cta { display: none; }
@media (max-width: 720px) {
  .nav-cta { display: inline-flex; margin-left: auto; min-height: 40px; padding: 8px 14px; font-size: 14px; }
  header.nav { padding: 10px 14px; gap: 8px; }
  header.nav nav {
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 0 12px;
  }
  header.nav.open nav a { padding: 12px 10px; font-size: 16px; }
  header.nav.open .tools { padding-bottom: 10px; }
  .offer-bar { display: none !important; }
  main { padding: 10px 16px 80px; }
  .hero-split {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 4px 0 24px;
  }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { display: none; }
  .hero-copy h1 {
    order: 1;
    font-size: 28px;
    line-height: 1.12;
    max-width: none;
    margin: 4px 0 2px;
  }
  .hero-copy .subhead {
    order: 2;
    font-size: 18px;
    margin: 0 0 8px;
  }
  .hero-lead { display: none; }
  .hero-gets { order: 3; margin: 4px 0 2px; }
  .hero-gets li { font-size: 14px; padding: 4px 0 4px 20px; }
  .nav-cta {
    background: var(--navy) !important; color: #f3eee4 !important;
    border: 0; box-shadow: 0 1px 0 rgba(16,24,40,.12); font-weight: 750;
  }
  .nav-cta:hover { background: #1c3c6c !important; color: #fff !important; }
  .offer-stack { order: 4; margin: 4px 0 2px; }
  .offer-price { font-size: 20px; }
  .offer-code-line { font-size: 14px; margin: 4px 0 0; }
  .offer-then { font-size: 13px; margin: 4px 0 0; color: var(--ink); font-weight: 550; }
  .hero-cta { order: 5; margin: 10px 0 2px; }
  .hero-cta .btn { width: 100%; font-weight: 750; }
  .hero-fine {
    display: block; order: 6;
    margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted);
  }
  .hero-pair {
    order: 7;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
  }
  .mock-card { padding: 12px 10px 10px; border-radius: 16px; }
  .mock-card header { margin-bottom: 8px; font-size: 12px; }
  .mock-num { font-size: 26px; }
  .mock-week { gap: 3px; margin: 4px 0 6px; }
  .mock-week span { padding: 6px 0; font-size: 10px; border-radius: 6px; }
  body:not(.member) .dock { display: none !important; }
  body:not(.member) .sticky-buy { display: flex; }
  body:not(.member) main { padding-bottom: 88px; }
}


.hero-gets {
  margin: 12px 0 4px; padding: 0; list-style: none; max-width: 36em;
}
.hero-gets li {
  position: relative; padding: 6px 0 6px 22px; font-size: 15px; line-height: 1.4; color: var(--ink);
}
.hero-gets li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--navy);
}
.close-soft { margin: 14px 0 0; font-size: 13px; color: #b8c4d4; }
.close-soft a { color: #e8eef8; text-decoration: underline; text-underline-offset: 2px; }
.home-founder { margin-top: 18px; font-size: 13px; }
.sticky-buy {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(27,54,93,.97); color: #f3eee4;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(16,24,40,.18);
  align-items: center; justify-content: space-between; gap: 12px;
}
.sticky-buy p { margin: 0; font-size: 13px; font-weight: 650; }
.sticky-buy .btn {
  background: #f3eee4; color: var(--navy) !important; flex-shrink: 0;
  min-height: 44px; font-weight: 750;
}

.hero-product { align-items: center; gap: 28px; }
.hero-shot, .feature-shot {
  margin: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(22,48,88,.12), 0 0 0 1px rgba(22,48,88,.06);
  background: #fff;
}
.hero-shot img, .feature-shot img {
  display: block; width: 100%; height: auto; vertical-align: middle;
}
.hero-shot figcaption {
  padding: 10px 14px 12px; font-size: 13px; color: var(--muted); background: #fff;
  border-top: 1px solid var(--line);
}
.feature-block {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center;
  margin: 36px 0; padding: 8px 0;
}
.feature-block.reverse { grid-template-columns: 1.15fr 1fr; }
.feature-block.reverse .feature-copy { order: 2; }
.feature-block.reverse .feature-shot { order: 1; }
.feature-copy h2 { margin: 6px 0 10px; max-width: 18em; }
.feature-copy > p { max-width: 36em; color: var(--ink); }
.feature-list {
  margin: 14px 0 0; padding: 0; list-style: none; max-width: 34em;
}
.feature-list li {
  position: relative; padding: 8px 0 8px 22px; font-size: 15px; line-height: 1.4;
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--navy);
}
@media (max-width: 900px) {
  .feature-block, .feature-block.reverse {
    grid-template-columns: 1fr; gap: 16px;
  }
  .feature-block.reverse .feature-copy,
  .feature-block.reverse .feature-shot { order: unset; }
  .hero-shot figcaption { font-size: 12px; }
}
@media (max-width: 720px) {
  .hero-product .hero-shot { order: 8; margin-top: 6px; }
  .hero-product .hero-cta { order: 5; }
  .hero-product .hero-cta .btn { width: auto; flex: 1; }
  .hero-product .hero-cta .btn.sec { flex: 0.7; }
}


.land-lead { max-width: 34em; margin: 0 0 8px; }
.land-walk { margin-top: 10px; }
.land-walk .feature-list { margin-top: 4px; }
.land-walk .walk-shot { min-height: 280px; }
/* DOM is shot then copy — image first for ad traffic */
.land-walk .walk-step {
  grid-template-columns: minmax(0,1.2fr) minmax(0,0.9fr);
}
.land-walk .walk-step:nth-child(even) {
  grid-template-columns: minmax(0,0.9fr) minmax(0,1.2fr);
}
.land-walk .walk-step:nth-child(even) .walk-copy { order: 1; }
.land-walk .walk-step:nth-child(even) .walk-shot { order: 2; }
.land-walk .walk-num { margin-bottom: 4px; }
@media (max-width: 720px) {
  .land-walk { gap: 32px; margin-top: 8px; }
  .land-walk .walk-step,
  .land-walk .walk-step:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .land-walk .walk-step:nth-child(even) .walk-copy,
  .land-walk .walk-step:nth-child(even) .walk-shot { order: unset; }
  /* shot is first in DOM → visual lands above copy on phones */
  .land-walk .walk-shot { min-height: 200px; padding: 8px; margin: 0 0 4px; }
  .land-walk .walk-shot img { min-height: 170px; }
  .land-walk .walk-copy { padding-top: 4px; }
  .land-lead { font-size: 16px; line-height: 1.45; margin-bottom: 4px; }
  body:not(.member) .sticky-buy { display: flex; }
}
/* Practice set polish (ScorePath) */
.q-progress { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.02em; }
.q-card .q { font-size: 1.12rem; line-height: 1.55; margin: 14px 0 18px; max-width: 42em; }
.q-actions { margin-top: 8px; gap: 10px; flex-wrap: wrap; }
.choices { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.choices label { min-height: 52px; padding: 14px 16px; }
.choices label:has(input:checked) { border-color: var(--navy); background: #e8eef8; box-shadow: 0 0 0 1px var(--navy); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choices .ch { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: #eef1f6; color: var(--navy); }
.choices label:has(input:checked) .ch { background: var(--navy); color: #fff; }
.set-progress { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.set-clock { font-size: 15px; padding: 2px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.coach { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.recap-parent .recap-stats { margin: 10px 0 8px; padding-left: 1.1em; }
.recap-parent .recap-stats li { margin: 6px 0; }
.tonight-status { font-weight: 650; color: var(--ink); margin: 8px 0 6px; }
.timed-done { display: block; margin-top: 6px; font-size: 13px; color: var(--amber); font-weight: 650; }
.week-day.today:not(.on):not(:has(input:checked)) { background: #fffaf0; }
@media (max-width: 640px) {
  .q-card { padding: 18px 16px; }
  .choices label { padding: 12px 12px; min-height: 48px; }
  .set-chrome .right { font-size: 12px; gap: 8px; }
}