/*
 * Signed-out landing page (design/design-system/home.html, ported by the designer).
 * Standalone page — this is NOT loaded alongside app.css/daisyUI. Fonts are the
 * app's vendored Inter + JetBrains Mono (no CDN). See accounts/templates/landing.html.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter.260c81a4759b.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono.b636a65da4f0.woff2") format("woff2");
}

:root{
  --bg:#ffffff;--surface:#f7f7f7;--surface-warm:#eeeeee;--fg:#111111;--fg-2:#3a3a3a;--muted:#707070;
  --border:#d9d9d9;--border-soft:#eeeeee;--accent:#111111;--accent-on:#ffffff;
  --accent-hover:color-mix(in oklab,var(--accent),black 8%);
  --success:#168a46;--warn:#b7791f;--danger:#c53030;
  --font-display:Arial Black,Impact,sans-serif;--font-body:Inter,system-ui,sans-serif;
  --text-xs:12px;--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:24px;--text-2xl:36px;--text-3xl:54px;--text-4xl:76px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-12:48px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:9999px;
  --elev-raised:0 16px 40px rgba(0,0,0,.10);--focus-ring:0 0 0 3px rgba(17,17,17,.18);
  --motion:240ms;--ease:cubic-bezier(.2,0,0,1);--container:1180px;
  --primary:#0077bc;--primary-on:#fff;--secondary:#009866;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty}
.mono,code{font-family:var(--font-mono)}
.lucide{width:22px;height:22px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Buttons */
.btn{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;padding:12px 20px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:10px;line-height:1;text-decoration:none;transition:background var(--motion) var(--ease),transform var(--motion),box-shadow var(--motion),border-color var(--motion)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn .lucide{width:17px;height:17px}
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface);border-color:var(--fg)}
.btn-lg{padding:15px 26px;font-size:var(--text-base)}
.btn-onfg{background:var(--accent-on);color:var(--fg)}
.btn-onfg:hover{background:color-mix(in oklab,var(--accent-on),black 8%)}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--bg),transparent 4%);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-in{max-width:var(--container);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg)}
.brand img{width:32px;height:32px}
.wordmark{text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:var(--text-lg)}
.wordmark .t{color:var(--secondary)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--fg-2);text-decoration:none;font-size:var(--text-sm);font-weight:500}
.nav-links a:hover{color:var(--fg)}
.nav-cta{display:flex;align-items:center;gap:12px}
@media(max-width:820px){.nav-links{display:none}}

/* Hero */
.hero{padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero-copy{min-height:340px;display:flex;flex-direction:column;justify-content:center}
.rot-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:color-mix(in oklab,var(--primary),white 90%);color:color-mix(in oklab,var(--primary),black 6%);padding:6px 12px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;margin-bottom:20px}
.rot-tag .lucide{width:14px;height:14px}
.hero h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(38px,6.4vw,var(--text-4xl));line-height:.98;letter-spacing:-.025em;margin-bottom:20px}
.hero h1 .g{color:var(--secondary)}
.hero .sub{font-size:clamp(16px,2vw,var(--text-lg));color:var(--fg-2);max-width:52ch;margin-bottom:28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:var(--text-xs);color:var(--muted);margin-top:16px;display:flex;align-items:center;gap:8px}
.hero-note .lucide{width:14px;height:14px;color:var(--success)}
.fade{transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.fade.out{opacity:0;transform:translateY(6px)}
/* rotator controls */
.rot-ctrl{display:flex;align-items:center;gap:14px;margin-top:28px}
.dots{display:flex;gap:8px}
.dot{width:26px;height:5px;border-radius:var(--radius-pill);background:var(--surface-warm);border:0;padding:0;cursor:pointer;overflow:hidden;position:relative}
.dot.active{background:var(--border)}
.dot.active::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0);animation:fill var(--rotdur,5s) linear forwards}
.paused .dot.active::after{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.rot-count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}

/* Hero product card */
.hero-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--elev-raised);overflow:hidden;transform:rotate(.4deg)}
.hc-top{background:var(--fg);color:var(--accent-on);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hc-top .a{font-family:var(--font-mono);font-size:var(--text-xs);color:rgba(255,255,255,.65)}
.hc-top .s{font-family:var(--font-mono);font-weight:700;font-size:var(--text-lg);font-variant-numeric:tabular-nums}
.hc-top .s .d{color:rgba(255,255,255,.5);font-weight:400}
.hc-body{padding:20px}
.hc-crit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hc-crit .n{font-weight:700;display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:var(--radius-sm)}
.chip.ai{background:color-mix(in oklab,var(--primary),white 88%);color:color-mix(in oklab,var(--primary),black 6%)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;background:color-mix(in oklab,var(--warn),white 84%);color:var(--warn)}
.pill .lucide{width:13px;height:13px}
.meter{height:6px;background:var(--surface-warm);border-radius:var(--radius-pill);overflow:hidden;margin:6px 0 16px}
.meter i{display:block;height:100%;width:50%;background:var(--warn);border-radius:var(--radius-pill)}
.hc-hint{border:1px solid color-mix(in oklab,var(--primary),white 62%);background:color-mix(in oklab,var(--primary),white 92%);border-radius:var(--radius-md);padding:14px 16px}
.hc-hint .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in oklab,var(--primary),black 12%);display:flex;align-items:center;gap:7px;margin-bottom:6px}
.hc-hint .l .lucide{width:14px;height:14px}
.hc-hint p{font-size:var(--text-sm);color:color-mix(in oklab,var(--primary),black 24%);line-height:1.5}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-copy{min-height:0}.hero-card{transform:none;max-width:520px}}

/* Trust strip */
.trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.trust-in{max-width:var(--container);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:center;gap:14px 28px;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);letter-spacing:.03em;text-align:center}
.trust-in b{color:var(--fg-2);font-weight:500}
.trust-in .sep{width:4px;height:4px;border-radius:50%;background:var(--border)}

/* Section */
section.block{padding:clamp(56px,9vw,104px) 0}
.sec-head{max-width:640px;margin-bottom:48px}
.sec-head h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(28px,4.4vw,var(--text-2xl));line-height:1.05;letter-spacing:-.02em;margin:10px 0 14px}
.sec-head p{color:var(--muted);font-size:var(--text-lg)}

/* Features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.feat{background:var(--bg);padding:28px 26px 30px;transition:background var(--motion)}
.feat:hover{background:var(--surface)}
.feat .ic{width:42px;height:42px;border-radius:var(--radius-md);background:var(--surface-warm);display:grid;place-items:center;color:var(--fg);margin-bottom:18px}
.feat.pri .ic{background:color-mix(in oklab,var(--primary),white 88%);color:color-mix(in oklab,var(--primary),black 6%)}
.feat.sec .ic{background:color-mix(in oklab,var(--secondary),white 86%);color:color-mix(in oklab,var(--secondary),black 6%)}
.feat h3{font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.feat p{color:var(--fg-2);font-size:var(--text-sm);line-height:1.6}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}

/* How it works */
.how{background:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.step{position:relative}
.step .num{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--border);line-height:1;margin-bottom:14px}
.step .ic{color:var(--primary);margin-bottom:12px}
.step h3{font-size:var(--text-base);font-weight:700;margin-bottom:6px}
.step p{color:var(--fg-2);font-size:var(--text-sm)}
.step:not(:last-child)::after{content:"";position:absolute;top:14px;right:-14px;width:12px;height:12px;border-top:2px solid var(--border);border-right:2px solid var(--border);transform:rotate(45deg)}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}.step:not(:last-child)::after{display:none}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 32px;background:var(--bg)}
.panel .tag{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.panel h3{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-xl);letter-spacing:-.01em;margin-bottom:16px}
.panel ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.panel li{display:flex;gap:11px;font-size:var(--text-sm);color:var(--fg-2);line-height:1.5}
.panel li .lucide{width:18px;height:18px;color:var(--secondary);margin-top:1px}
.panel.dark li .lucide{color:var(--primary)}
@media(max-width:760px){.split{grid-template-columns:1fr}}

/* Philosophy band */
.philo{background:var(--fg);color:var(--accent-on);text-align:center;padding:clamp(64px,10vw,120px) 0}
.philo .eyebrow{color:rgba(255,255,255,.5)}
.philo blockquote{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(34px,6vw,68px);line-height:1.02;letter-spacing:-.02em;margin:18px auto 0;max-width:16ch}
.philo blockquote .gt{color:var(--secondary)}
.philo .by{margin-top:24px;font-family:var(--font-mono);font-size:var(--text-xs);color:rgba(255,255,255,.5);letter-spacing:.08em}

/* CTA */
.cta{text-align:center}
.cta h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(30px,5vw,var(--text-3xl));line-height:1.02;letter-spacing:-.02em;margin-bottom:16px}
.cta p{color:var(--muted);font-size:var(--text-lg);max-width:48ch;margin:0 auto 30px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Footer */
footer.foot{border-top:1px solid var(--border);padding:48px 0 40px}
.foot-in{max-width:var(--container);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center}
.foot .tagline{color:var(--muted);font-size:var(--text-sm)}
.foot .tagline .wm{text-transform:uppercase;font-weight:700;color:var(--fg);letter-spacing:.02em}
.foot .tagline .wm .t{color:var(--secondary)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{color:var(--fg-2);text-decoration:none;font-size:var(--text-sm)}
.foot-links a:hover{color:var(--fg)}
.foot .ver{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}