/* Tests Wise v2 landing: static page served by Caddy at "/". Same tokens as the app
   (src/index.css); kept separate because public/ files are not processed by Vite. */
:root {
  color-scheme: light dark;
  --canvas: #f6f1e8; --surface-alt: #fbf8f2; --paper: #ffffff; --fill: #f1eadf;
  --ink: #1a120d; --ink-soft: #2a1f17; --ink-muted: #6f6358; --ink-faint: #8f8274;
  --hairline: #e9e1d4; --hairline-strong: #978872;
  --brand: #b8431a; --brand-hover: #9c3812; --on-brand: #fff7ed; --brand-soft: #fbe6da; --brand-ink: #86300f;
  --accent: #e8a33d; --accent-soft: #fcefd3; --accent-ink: #704306;
  --ember: #c0301d; --ember-soft: #fde3df;
  --status-running-ink: #7c4a00; --status-running-dot: #b86f05;
  --status-done-bg: #d9f0e6; --status-done-ink: #176a55;
  --priority-critical: #c0301d; --priority-high: #a04e00; --priority-low: #6f6358;
  --shadow-card: 0 0 0 1px #1a120d0d, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
  --shadow-raised: 0 0 0 1px #1a120d0d, 0 8px 24px -12px #1a120d40;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-48: 48px; --space-80: 80px;
  --container: 1280px;
  --radius-small: 6px; --radius-nested: 10px; --radius-pill: 18px; --radius-card: 24px; --radius-full: 9999px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #161110; --surface-alt: #1c1614; --paper: #221b18; --fill: #120e0c;
    --ink: #f3ebe1; --ink-soft: #e4d9cc; --ink-muted: #b9aa99; --ink-faint: #8c7e70;
    --hairline: #332925; --hairline-strong: #7d6c5d;
    --brand: #f08a5b; --brand-hover: #f6a07a; --on-brand: #2a1409; --brand-soft: #43200f; --brand-ink: #ffc9ad;
    --accent: #f0b45a; --accent-soft: #43310f; --accent-ink: #ffd98a;
    --ember: #ff9a8c; --ember-soft: #4a1a14;
    --status-running-ink: #ffd98a; --status-running-dot: #f0b45a;
    --status-done-bg: #143d31; --status-done-ink: #8fd9bd;
    --priority-critical: #ff9a8c; --priority-high: #ffb37a; --priority-low: #b9aa99;
    --shadow-card: 0 0 0 1px #00000066, 0 1px 3px #00000066, 0 1px 2px -1px #00000066;
    --shadow-raised: 0 0 0 1px #00000066, 0 8px 24px -12px #000000cc;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.43; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; overflow-x: hidden; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-24); }

.btn-primary, .btn-secondary, .btn-outline, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 36px; padding: 0 var(--space-16); border-radius: var(--radius-pill); font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; border: 1px solid transparent; transition: background-color .15s, color .15s; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); text-decoration: none; }
.btn-secondary { background: var(--fill); color: var(--ink); }
.btn-secondary:hover { background: var(--hairline); color: var(--ink); text-decoration: none; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-outline:hover { background: var(--fill); color: var(--ink); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink-muted); }
.btn-ghost:hover { background: var(--fill); color: var(--ink); text-decoration: none; }
.btn-lg { height: 44px; padding: 0 var(--space-24); font-size: 15px; }
.btn-sm { height: 30px; padding: 0 var(--space-12); font-size: 13px; }

.logo { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--ink); }
.logo:hover { text-decoration: none; color: var(--ink); }
.logo svg { display: block; flex: none; }
.wordmark { font-family: var(--font-display); font-variation-settings: "opsz" 144; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.nav { display: flex; gap: var(--space-4); align-items: center; }
.nav a { color: var(--ink-muted); font-weight: 500; font-size: 14px; height: 32px; display: inline-flex; align-items: center; padding: 0 var(--space-12); border-radius: var(--radius-pill); }
.nav a:hover { color: var(--ink); background: var(--fill); text-decoration: none; }
.spacer { flex: 1; }
.who { gap: var(--space-8); max-width: 260px; }
.who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
[hidden] { display: none !important; }
@media (max-width: 640px) { .who span:last-child { display: none; } }

.topbar { position: sticky; top: 0; background: var(--canvas); border-bottom: 1px solid var(--hairline); z-index: 2; }
.topbar .wrap { display: flex; align-items: center; gap: var(--space-20); min-height: 64px; flex-wrap: wrap; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.lang { display: inline-flex; background: var(--fill); border-radius: var(--radius-pill); padding: 2px; }
.lang button { font: inherit; font-size: 12px; font-weight: 500; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); cursor: pointer; }
.lang button.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }

.hero { position: relative; padding: var(--space-80) 0; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-48); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-8); background: var(--brand-soft); color: var(--brand-ink); height: 28px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; }
h1.hero-title { font-family: var(--font-display); font-variation-settings: "opsz" 144; font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; margin: var(--space-20) 0 var(--space-16); }
h1.hero-title em { font-style: italic; color: var(--brand); }
.lead { font-size: 16px; line-height: 1.5; color: var(--ink-muted); margin: 0 0 var(--space-24); max-width: 32rem; }
.cta { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.fine { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-12); }
.fine b { color: var(--ink); font-weight: 500; }
.shapes { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.shapes i { position: absolute; display: block; border-radius: var(--radius-full); }
.frame { position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); padding: var(--space-20); }
.crumbs { display: flex; align-items: center; gap: var(--space-8); font-size: 14px; color: var(--ink-muted); }
.crumbs .sep { color: var(--ink-faint); } .crumbs .current { color: var(--ink); font-weight: 500; }
.frame .crumbs { margin-bottom: var(--space-12); }
.frame .head { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-16); }
.frame .host { font-size: 24px; line-height: 1.33; font-weight: 600; letter-spacing: -.025em; }
.frame .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-bottom: var(--space-16); }
.stat.in-card { padding: var(--space-12) var(--space-16); background: var(--surface-alt); border-radius: var(--radius-nested); border: 1px solid var(--hairline); }
.stat-label { font-size: 12px; line-height: 1.33; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.stat-value { font-size: 24px; line-height: 1.33; font-weight: 600; letter-spacing: -.025em; margin-top: var(--space-4); }
.badge { display: inline-flex; align-items: center; gap: var(--space-4); height: 22px; padding: 0 var(--space-8); border-radius: var(--radius-pill); font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.badge .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.badge-done { background: var(--status-done-bg); color: var(--status-done-ink); }
.badge-running { background: var(--accent-soft); color: var(--status-running-ink); }
.badge-running .dot { background: var(--status-running-dot); animation: tw-pulse 1.6s ease-in-out infinite; }
.badge-solid { background: var(--ink-soft); color: var(--paper); } .badge-soft { background: var(--fill); color: var(--ink); }
.badge-priority { border-color: var(--hairline); }
.badge-critical { color: var(--priority-critical); } .badge-high { color: var(--priority-high); } .badge-low { color: var(--priority-low); }
@keyframes tw-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }
.scenario { border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--paper); }
.scenario + .scenario { margin-top: var(--space-8); }
.scenario summary { list-style: none; display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-20); cursor: pointer; flex-wrap: wrap; }
.scenario summary::-webkit-details-marker { display: none; }
.scenario .code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); min-width: 52px; }
.scenario .title { font-weight: 500; flex: 1; }
.scenario-body { padding: var(--space-12) var(--space-20) var(--space-20); border-top: 1px solid var(--hairline); }
.scenario-body h4 { margin: 0 0 var(--space-4); font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.progress { height: 6px; background: var(--fill); border-radius: var(--radius-small); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-small); }

.band { padding: var(--space-80) 0; }
.band.alt { background: var(--surface-alt); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
h2.display { font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -.05em; margin: 0 0 var(--space-12); }
.sub { font-size: 16px; line-height: 1.5; color: var(--ink-muted); max-width: 38rem; margin: 0 0 var(--space-48); }
.center { text-align: center; } .center .sub { margin-left: auto; margin-right: auto; }
.card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-20); box-shadow: var(--shadow-card); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); text-align: left; }
.step .n { width: 36px; height: 36px; border-radius: var(--radius-nested); background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 16px; font-weight: 600; margin-bottom: var(--space-16); }
.step:nth-child(2) .n { background: var(--accent); color: #1a120d; }
.step:nth-child(3) .n { background: var(--status-done-bg); color: var(--status-done-ink); }
.step h3 { font-size: 18px; line-height: 1.56; margin: 0 0 var(--space-4); font-weight: 500; }
.step p { margin: 0; color: var(--ink-muted); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.bento .card { display: flex; flex-direction: column; gap: var(--space-12); }
.bento .wide { grid-column: span 2; }
.bento .icn { width: 36px; height: 36px; border-radius: var(--radius-nested); background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; }
.bento .icn svg { width: 18px; height: 18px; }
.bento h3 { margin: 0; font-size: 18px; line-height: 1.56; font-weight: 500; }
.bento p { margin: 0; color: var(--ink-muted); }
.bento .mock { margin-top: auto; background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: var(--radius-nested); padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); }
.bento .sheet { display: grid; grid-template-columns: 64px 1fr 72px; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-small); overflow: hidden; font-family: var(--font-mono); font-size: 11px; }
.bento .sheet span { background: var(--paper); padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento .sheet .h { background: var(--fill); color: var(--ink-muted); font-family: var(--font-sans); font-weight: 500; }
.bento .mock .label { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.bento .mock .input { display: flex; align-items: center; height: 32px; padding: 0 var(--space-12); background: var(--fill); border: 1px solid var(--hairline); border-radius: var(--radius-pill); font-size: 13px; }
.bento .verdicts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bento .verdicts span { display: flex; align-items: center; gap: var(--space-8); }
.row { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.tw-mono { font-family: var(--font-mono); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: stretch; text-align: left; }
.plans .card { padding: var(--space-24); }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.plan.is-current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-raised); }
.plan .price { font-size: 36px; line-height: 1.11; font-weight: 600; letter-spacing: -.025em; }
.plan .price small { font-size: 14px; font-weight: 400; color: var(--ink-muted); letter-spacing: 0; }
.plan ul { margin: var(--space-8) 0 var(--space-16); padding: 0; list-style: none; color: var(--ink-muted); font-size: 14px; }
.plan li { display: flex; gap: var(--space-8); align-items: center; padding: var(--space-4) 0; }
.plan li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: var(--radius-full); background: var(--status-done-bg); box-shadow: inset 0 0 0 1px var(--status-done-ink); }
.plan .ribbon { position: absolute; top: -11px; left: var(--space-20); background: var(--brand); color: var(--on-brand); height: 22px; display: inline-flex; align-items: center; padding: 0 var(--space-8); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; }
.plan .btn-primary, .plan .btn-secondary, .plan .btn-outline { margin-top: auto; }
.final { background: var(--ink-soft); color: var(--paper); border-radius: var(--radius-card); padding: var(--space-48); display: flex; align-items: center; justify-content: space-between; gap: var(--space-48); position: relative; overflow: hidden; }
.final h2 { color: inherit; margin: 0 0 var(--space-8); }
.final p { margin: 0; color: var(--hairline); font-size: 16px; }
.final .btn-lg { background: var(--brand); color: var(--on-brand); position: relative; }
.final .deco { position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: var(--radius-full); background: var(--brand); }
.final .deco2 { position: absolute; right: 180px; bottom: -140px; width: 220px; height: 220px; border-radius: var(--radius-full); background: var(--accent); opacity: .9; }
@media (prefers-color-scheme: dark) { .final { background: var(--paper); color: var(--ink); } .final p { color: var(--ink-muted); } }
footer { padding: var(--space-48) 0; border-top: 1px solid var(--hairline); color: var(--ink-muted); font-size: 13px; }
footer .wrap { display: flex; align-items: center; gap: var(--space-20); flex-wrap: wrap; }
footer a { color: var(--ink-muted); }

/* Legal pages */
.legal { max-width: 44rem; margin: 0 auto; padding: var(--space-48) var(--space-24); font-size: 15px; line-height: 1.55; }
.legal h1 { font-size: 36px; line-height: 1.11; font-weight: 600; letter-spacing: -.025em; margin: 0 0 var(--space-8); }
.legal h2 { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; margin: var(--space-24) 0 var(--space-8); }
.legal p, .legal li { color: var(--ink); }
.legal .meta { color: var(--ink-muted); font-size: 13px; margin-bottom: var(--space-24); }
.notice-draft { background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius-card); padding: var(--space-12) var(--space-16); font-size: 14px; margin-bottom: var(--space-24); }

@media (max-width: 960px) {
  .hero { padding: var(--space-48) 0; }
  .hero .wrap { grid-template-columns: 1fr; }
  h1.hero-title { font-size: 40px; line-height: 1.1; }
  h2.display { font-size: 32px; line-height: 1.15; letter-spacing: -.03em; }
  .steps, .bento, .plans { grid-template-columns: 1fr; }
  .bento .wide { grid-column: span 1; }
  .plans .plan.is-current { order: -1; }
  .final { flex-direction: column; align-items: flex-start; padding: var(--space-24); }
  .band { padding: var(--space-48) 0; }
  .topbar .nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .badge-running .dot { animation: none; } }