/* CasePilot site tokens (see DESIGN.md) */
:root {
  --page:#F6F3EC; --surface:#FFFFFF; --ink:#0E1A33; --text:#1A2232; --muted:#4F5A6E;
  --rule:#D9D3C5; --accent:#C8962E; --link:#7A5410; --review-bg:#FBEFD2; --review-text:#5C3D06;
  --err-text:#8A1F1F; --err-bg:#FDECEC; --err-line:#F3C4C4; --ok-text:#1E5F35; --ok-bg:#E9F7EE;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:#0E1A33; --surface:#142444; --ink:#F6F3EC; --text:#E9EDF5; --muted:#B8C1D3;
    --rule:#2A3A5E; --accent:#E0B25A; --link:#E0B25A; --review-bg:#3A2E12; --review-text:#F5D98A;
    --err-text:#F5B5B5; --err-bg:#3A1A1A; --err-line:#6A2A2A; --ok-text:#B9E6C8; --ok-bg:#16361F;
  }
}
:root[data-theme="dark"] {
  --page:#0E1A33; --surface:#142444; --ink:#F6F3EC; --text:#E9EDF5; --muted:#B8C1D3;
  --rule:#2A3A5E; --accent:#E0B25A; --link:#E0B25A; --review-bg:#3A2E12; --review-text:#F5D98A;
  --err-text:#F5B5B5; --err-bg:#3A1A1A; --err-line:#6A2A2A; --ok-text:#B9E6C8; --ok-bg:#16361F;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--sans); font-size:17px; line-height:28px; color:var(--text); background:var(--page); overflow-x:hidden; }
a { color:var(--link); }
h1,h2,h3 { color:var(--ink); margin:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.serif { font-family:var(--serif); font-optical-sizing:auto; }

/* header */
header.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-weight:600; font-size:19px; letter-spacing:.01em; }
.brand img { width:36px; height:36px; display:block; }
nav.links { display:flex; align-items:center; gap:24px; font-size:15px; }
nav.links a { color:var(--muted); text-decoration:none; }
nav.links a:hover { color:var(--ink); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border-radius:6px; background:var(--ink); color:var(--page); font:600 16px/1 var(--sans); text-decoration:none; border:1px solid var(--ink); cursor:pointer; transition:background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.btn:hover { background:var(--text); border-color:var(--text); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--page); }
.btn.small { min-height:40px; padding:9px 16px; font-size:15px; }

/* type */
.eyebrow { font:600 13px/20px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--link); margin:0 0 16px; }
.display { font-family:var(--serif); font-weight:400; font-size:clamp(40px,5.2vw,60px); line-height:1.07; letter-spacing:-.01em; color:var(--ink); }
.h2 { font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,36px); line-height:1.17; color:var(--ink); }
.lead { font-size:19px; line-height:30px; color:var(--muted); max-width:62ch; margin:20px 0 0; }
p { margin:0 0 16px; max-width:68ch; }
.muted { color:var(--muted); }

/* review notice */
.review { display:inline-flex; gap:10px; align-items:flex-start; background:var(--review-bg); color:var(--review-text); padding:12px 16px; border-radius:6px; font-size:14px; line-height:22px; max-width:520px; }
.review b { font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:12px; white-space:nowrap; padding-top:1px; }

/* sections */
section.block { padding:96px 0; border-top:1px solid var(--rule); }
.head { display:grid; grid-template-columns:72px 1fr; gap:0 16px; margin-bottom:48px; }
.num { font-family:var(--serif); font-size:17px; color:var(--link); padding-top:10px; letter-spacing:.04em; }

/* hero */
.hero { padding:88px 0 96px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:64px; align-items:center; }
.hero .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }
.sheet { background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:32px; box-shadow:0 10px 30px rgba(14,26,51,.06); }
.sheet .top-line { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted); border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:20px; }
.sheet h3 { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.25; margin-bottom:14px; color:var(--ink); }
.sheet .src { font-size:14px; line-height:22px; color:var(--muted); border-left:2px solid var(--accent); padding-left:12px; margin:0 0 14px; }
.sheet .src b { color:var(--text); font-weight:600; }
.sheet .foot { margin-top:22px; }

/* services list */
.rows { border-top:1px solid var(--rule); }
.row { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) auto; gap:24px; padding:24px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.row h3 { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.25; }
.row p { margin:0; color:var(--muted); }
.tag { font:600 13px/20px var(--sans); color:var(--ink); white-space:nowrap; padding:4px 10px; border:1px solid var(--rule); border-radius:4px; }
.tag.later { color:var(--muted); border-style:dashed; }

/* two-column statements */
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:64px; }
.points { list-style:none; margin:0; padding:0; counter-reset:p; }
.points li { position:relative; padding:20px 0 20px 48px; border-bottom:1px solid var(--rule); color:var(--text); }
.points li:first-child { border-top:1px solid var(--rule); }
.points li::before { counter-increment:p; content:counter(p, decimal-leading-zero); position:absolute; left:0; top:22px; font-family:var(--serif); color:var(--link); font-size:16px; }
.points strong { display:block; color:var(--ink); font-weight:600; margin-bottom:4px; }

/* three principles */
.principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--rule); }
.principles > div { padding:28px 28px 0 0; }
.principles h3 { font-size:18px; line-height:26px; margin-bottom:8px; }
.principles p { margin:0; color:var(--muted); font-size:16px; line-height:26px; }

/* phases */
.phases { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative; margin-top:16px; }
.phase { padding-top:28px; position:relative; }
.phase::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--rule); }
.phase::after { content:""; position:absolute; top:-5px; left:0; width:11px; height:11px; border-radius:50%; background:var(--page); border:2px solid var(--accent); }
.phase.now::after { background:var(--accent); }
.phase .when { font:600 13px/20px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--link); margin-bottom:8px; }
.phase h3 { font-size:18px; line-height:26px; margin-bottom:8px; }
.phase p { margin:0; color:var(--muted); font-size:15px; line-height:24px; padding-right:20px; }
.audience { margin-top:48px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; }
.audience div { border-top:1px solid var(--rule); padding:20px 0; }
.audience h3 { font-size:18px; line-height:26px; margin-bottom:4px; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.audience p { margin:0; color:var(--muted); font-size:16px; line-height:26px; }

/* call band */
.band { background:var(--ink); color:var(--page); border-radius:8px; padding:56px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.band h2 { color:var(--page); font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,34px); line-height:1.2; max-width:22ch; }
.band p { color:#C9D1E0; margin:12px 0 0; }
.band .btn { background:var(--page); color:var(--ink); border-color:var(--page); }
.band .btn:hover { background:#FFFFFF; border-color:#FFFFFF; }

footer.site { padding:48px 0 56px; border-top:1px solid var(--rule); font-size:14px; line-height:22px; color:var(--muted); }
footer.site .cols { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
footer.site p { max-width:70ch; margin:0 0 12px; }

/* reveal on scroll (transform and opacity only) */
.reveal { opacity:0; transform:translateY(12px); transition:opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.enter { animation:enter 560ms var(--ease-out) both; }
.enter.d1 { animation-delay:80ms; }
.enter.d2 { animation-delay:160ms; }
@keyframes enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* login and onboarding */
.panel { max-width:520px; margin:48px auto; background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:32px; box-shadow:0 10px 30px rgba(14,26,51,.06); }
.panel h1 { margin:0 0 6px; font:400 28px/1.2 var(--serif); color:var(--ink); }
.panel p.sub { margin:0 0 22px; color:var(--muted); }
.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--ink); }
.field input, .field select, .field textarea { width:100%; padding:11px 12px; border:1px solid #B9B2A3; border-radius:6px; font-size:16px; font-family:inherit; background:var(--surface); color:var(--text); }
.field small { color:var(--muted); display:block; margin-top:4px; font-size:13px; }
.err { background:var(--err-bg); color:var(--err-text); border:1px solid var(--err-line); padding:12px 14px; border-radius:6px; margin:12px 0; font-size:14px; display:none; }
.ok { background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-text); padding:12px 14px; border-radius:6px; margin:12px 0; font-size:14px; display:none; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); margin:18px 0; }
.check input { margin-top:4px; }

/* responsive */
@media (max-width:1000px) {
  .hero { grid-template-columns:1fr; gap:48px; padding:64px 0 72px; }
  .split { grid-template-columns:1fr; gap:32px; }
  .phases { grid-template-columns:1fr 1fr; row-gap:40px; }
  .principles { grid-template-columns:1fr; }
  .principles > div { padding:24px 0; border-bottom:1px solid var(--rule); }
}
@media (max-width:760px) {
  body { font-size:16px; line-height:26px; }
  .wrap { padding:0 16px; }
  nav.links a.hide-sm { display:none; }
  section.block { padding:64px 0; }
  .head { grid-template-columns:1fr; gap:8px; margin-bottom:32px; }
  .num { padding-top:0; }
  .row { grid-template-columns:1fr; gap:8px; }
  .audience { grid-template-columns:1fr; }
  .phases { grid-template-columns:1fr; }
  .phase p { padding-right:0; }
  .band { padding:32px 24px; }
  .sheet { padding:24px; }
  .display { font-size:clamp(38px,11vw,44px); }
  .lead { font-size:17px; line-height:27px; }
  .panel { margin:24px 0; padding:24px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .enter { opacity:1; transform:none; animation:none; transition:none; }
  .btn { transition:none; }
}

/* accounts: sign-in, sign-up, waiting */
.auth { min-height:calc(100vh - 96px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center; padding:24px 0 80px; }
.auth-side h1 { font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,50px); line-height:1.1; color:var(--ink); letter-spacing:-.01em; }
.auth-side p { color:var(--muted); font-size:18px; line-height:29px; max-width:44ch; margin-top:20px; }
.auth-side .facts { margin-top:36px; border-top:1px solid var(--rule); }
.auth-side .facts div { padding:14px 0; border-bottom:1px solid var(--rule); font-size:15px; color:var(--muted); }
.auth-side .facts b { color:var(--ink); font-weight:600; }
.card-form { background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:36px; box-shadow:0 14px 40px rgba(14,26,51,.07); }
.card-form h2 { font-family:var(--serif); font-weight:400; font-size:28px; color:var(--ink); margin:0 0 6px; }
.card-form .sub { color:var(--muted); margin:0 0 24px; font-size:15px; line-height:24px; }
.choice-legend { font-weight:600; font-size:14px; color:var(--ink); margin:0 0 10px; display:block; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.choices label { position:relative; border:1px solid var(--rule); border-radius:6px; padding:14px 14px 14px 40px; cursor:pointer; font-size:15px; line-height:22px; color:var(--text); background:var(--surface); }
.choices label b { display:block; color:var(--ink); font-weight:600; }
.choices label span { color:var(--muted); font-size:13px; }
.choices input { position:absolute; left:14px; top:18px; margin:0; accent-color:var(--ink); }
.choices label:has(input:checked) { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.choices label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.form-split { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.hidden { display:none !important; }
.muted-note { font-size:14px; color:var(--muted); line-height:22px; margin:0 0 16px; }
.switch { margin-top:22px; font-size:15px; color:var(--muted); }
.btn.block { width:100%; }

/* workspace-type strip on the home page */
.desks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ink); }
.desk { padding:28px 24px 0 0; border-right:1px solid var(--rule); margin-right:24px; }
.desk:last-child { border-right:0; margin-right:0; }
.desk h3 { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.2; margin-bottom:10px; }
.desk p { margin:0; color:var(--muted); font-size:15px; line-height:24px; }
.desk .state { display:inline-block; margin-top:18px; font:600 12px/18px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--link); }
.desk .state.off { color:var(--muted); }

@media (max-width:1000px) {
  .auth { grid-template-columns:1fr; gap:40px; padding-bottom:56px; }
  .desks { grid-template-columns:1fr 1fr; }
  .desk:nth-child(2) { border-right:0; margin-right:0; }
  .desk { padding-bottom:28px; border-bottom:1px solid var(--rule); }
}
@media (max-width:760px) {
  .card-form { padding:24px; }
  .choices, .form-split { grid-template-columns:1fr; }
  .desks { grid-template-columns:1fr; }
  .desk { border-right:0; margin-right:0; padding-right:0; }
}

/* home: first impression */
.hero-dark { background:var(--ink); color:var(--page); padding:0 0 0; position:relative; overflow:hidden; }
.hero-dark .nav-row { display:flex; justify-content:space-between; align-items:center; padding:20px 0; gap:16px; }
.hero-dark .brand { color:var(--page); }
.hero-dark nav.links a { color:#C9D1E0; }
.hero-dark nav.links a:hover { color:#FFFFFF; }
.hero-dark .btn { background:var(--page); color:var(--ink); border-color:var(--page); }
.hero-dark .btn:hover { background:#FFFFFF; border-color:#FFFFFF; }
.hero-dark .btn.ghost { background:transparent; color:var(--page); border-color:rgba(246,243,236,.5); }
.hero-dark .btn.ghost:hover { background:var(--page); color:var(--ink); }
.hero-main { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:64px; align-items:center; padding:72px 0 96px; }
.hero-dark .eyebrow { color:var(--accent); }
.hero-dark h1 { font-family:var(--serif); font-weight:400; font-size:clamp(44px,6vw,76px); line-height:1.02; letter-spacing:-.02em; color:var(--page); }
.hero-dark h1 em { font-style:italic; color:var(--accent); }
.hero-dark .lead { color:#C9D1E0; font-size:20px; line-height:32px; margin-top:28px; max-width:36ch; }
.hero-dark .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:40px; }
.hero-dark .small-print { margin-top:20px; font-size:14px; color:#A9B4C8; }
.ticker { border-top:1px solid rgba(246,243,236,.16); border-bottom:1px solid rgba(246,243,236,.16); overflow:hidden; white-space:nowrap; padding:18px 0; }
.ticker-track { display:inline-flex; gap:48px; animation:slide 38s linear infinite; font-family:var(--serif); font-size:24px; color:#DDE3EE; }
.ticker-track span { display:inline-flex; align-items:center; gap:48px; }
.ticker-track span::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
@keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.notice-card { background:var(--page); color:var(--text); border-radius:8px; padding:32px; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.notice-card .top-line { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:20px; }
.notice-card h3 { font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.2; color:var(--ink); margin-bottom:18px; }
.severity { display:inline-flex; align-items:center; gap:8px; font:600 13px/20px var(--sans); color:#7A2A0E; background:#FBE4D8; padding:4px 10px; border-radius:4px; margin-bottom:18px; }
.notice-card dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:15px; line-height:24px; }
.notice-card dt { color:var(--muted); }
.notice-card dd { margin:0; color:var(--ink); }
.notice-card .review { margin-top:22px; max-width:none; }
.notice-card .example { position:absolute; }

/* light sections, new styling */
.statement { font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.8vw,46px); line-height:1.16; color:var(--ink); letter-spacing:-.01em; max-width:24ch; }
.statement em { color:var(--link); font-style:italic; }
.tasks { border-top:1px solid var(--rule); }
.tasks div { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:24px; padding:24px 0; border-bottom:1px solid var(--rule); }
.tasks h3 { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.2; }
.tasks p { margin:0; color:var(--muted); }
.why { background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.why-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
.why-list h3 { font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.2; margin-bottom:12px; }
.why-list p { margin:0; color:var(--muted); font-size:16px; line-height:26px; }
.why-list .bar { width:40px; height:2px; background:var(--accent); margin-bottom:22px; }
.cta-band { background:var(--page); padding:0 0 96px; }
.cta-band .band { background:var(--ink); }
@media (max-width:1000px) {
  .hero-main { grid-template-columns:1fr; gap:48px; padding:48px 0 64px; }
  .why-list { grid-template-columns:1fr; gap:36px; }
  .tasks div { grid-template-columns:1fr; gap:8px; }
}
@media (max-width:760px) {
  .hero-dark h1 { font-size:clamp(38px,11vw,46px); }
  .hero-dark .lead { font-size:17px; line-height:27px; }
  .ticker-track { font-size:20px; gap:32px; }
  .notice-card { padding:24px; }
  .notice-card dl { grid-template-columns:1fr; gap:2px; }
  .notice-card dt { margin-top:10px; }
  .hero-dark .nav-row nav.links a.btn.ghost { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation:none; }
}
.hero-dark nav.links a.btn { color:var(--ink); }
.hero-dark nav.links a.btn.ghost { color:var(--page); }
.hero-dark nav.links a.btn.ghost:hover { color:var(--ink); }