/* Settled landing (design-loop v2). Tokens and rules copied from
   design/ai-loop/index.html on the design/ai-loop branch — do not invent new ones.
   privacy.html and 404.html also load it (plus pages.css). */
:root{
  --bg:#ffffff;
  --bg-subtle:#fafafa;
  --border:#e4e4e7;
  --border-input:#949499;
  --text:#18181b;
  --text-muted:#71717a;
  --accent:#4f46e5;
  --accent-hover:#4338ca;
  --accent-subtle:#eef2ff;
  --danger:#b91c1c;
  --danger-subtle:#fef2f2;
  --success:#15803d;
  --success-subtle:#f0fdf4;
  --warning:#a16207;
  --warning-subtle:#fefce8;
  --ease:cubic-bezier(0.2,0,0,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.num{font-variant-numeric:tabular-nums;}
a{color:inherit;text-decoration:none;}

/* ---------- Nav ---------- */
.nav{border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:20;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;}
.wordmark{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;}
.wordmark .glyph{color:var(--accent);font-size:14px;}
.nav-links{display:flex;gap:24px;font-size:14px;color:var(--text-muted);}
.nav-links a{transition:color 150ms var(--ease);}
.nav-links a:hover{color:var(--text);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 16px;border-radius:6px;
  font-size:14px;font-weight:500;font-family:inherit;
  cursor:pointer;border:1px solid transparent;
  transition:background-color 150ms var(--ease),border-color 150ms var(--ease),color 150ms var(--ease),opacity 150ms var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-secondary{background:#fff;border-color:var(--border-input);color:var(--text);}
.btn-secondary:hover{border-color:var(--text);}
.btn-block{width:100%;}

/* ---------- Sections ---------- */
section{padding:64px 0;}
.eyebrow{font-size:13px;font-weight:500;color:var(--accent);letter-spacing:0.02em;margin-bottom:12px;}
h1{font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-0.02em;}
h2{font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-0.015em;margin-bottom:12px;}
h3{font-size:16px;font-weight:600;}
.subline{font-size:16px;color:var(--text-muted);max-width:560px;margin-top:16px;}

/* ---------- Hero ---------- */
.hero{padding:80px 0 64px;}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center;}
.hero-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.hero-note{margin-top:16px;font-size:13px;color:var(--text-muted);}

/* Notification card */
.notify{
  background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:24px;max-width:400px;width:100%;justify-self:end;
}
.notify-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.notify-brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-muted);}
.notify-brand .glyph{color:var(--accent);font-size:12px;}
.notify-time{font-size:13px;color:var(--text-muted);}
.notify-title{font-size:16px;font-weight:600;margin-bottom:4px;}
.notify-sub{font-size:13px;color:var(--text-muted);margin-bottom:16px;}
.notify-amount{font-size:36px;font-weight:600;line-height:1;letter-spacing:-0.01em;margin-bottom:12px;}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;border-radius:9999px;
  font-size:13px;font-weight:500;
}
.pill + .pill{margin-left:6px;}
.pill-success{background:var(--success-subtle);color:var(--success);}
.pill-warning{background:var(--warning-subtle);color:var(--warning);}
.notify-meta{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:grid;gap:8px;}
.notify-row{display:flex;justify-content:space-between;font-size:13px;gap:16px;}
.notify-row .label{color:var(--text-muted);font-weight:500;}
.notify-link{margin-top:16px;display:inline-block;color:var(--accent);font-size:13px;font-weight:500;transition:color 150ms var(--ease);}
.notify-link:hover{color:var(--accent-hover);}

/* ---------- Stat strip ---------- */
.stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-subtle);padding:48px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.stat{padding-left:24px;border-left:1px solid var(--border);}
.stat:first-child{padding-left:0;border-left:none;}
.stat-label{font-size:13px;font-weight:500;color:var(--text-muted);margin-bottom:8px;}
.stat-value{font-size:36px;font-weight:600;line-height:1.1;letter-spacing:-0.01em;margin-bottom:8px;}
.stat-value.small{font-size:28px;padding-top:5px;}
.trend{font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;}
.trend.success{color:var(--success);}
.trend-caption{font-size:13px;color:var(--text-muted);margin-top:4px;}

/* ---------- Features ---------- */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.feature-card{
  background:#fff;border:1px solid var(--border);border-radius:8px;padding:24px;
  transition:transform 150ms var(--ease),border-color 150ms var(--ease);
}
.feature-card:hover{transform:translateY(-2px);border-color:var(--border-input);}
.feature-icon{
  width:36px;height:36px;border-radius:8px;background:var(--accent-subtle);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.feature-card p{font-size:14px;color:var(--text-muted);margin-top:8px;}

/* ---------- Explained ---------- */
.explained{background:var(--bg-subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.explained-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.checklist{list-style:none;margin-top:32px;display:grid;gap:20px;}
.checklist li{display:flex;gap:12px;align-items:flex-start;}
.check{
  flex:none;width:20px;height:20px;border-radius:9999px;background:var(--success-subtle);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.checklist strong{font-weight:600;display:block;}
.checklist span{font-size:14px;color:var(--text-muted);}

.breakdown-card{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.breakdown-head{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-subtle);gap:12px;}
.breakdown-head .id{font-size:14px;font-weight:600;}
.breakdown-rows{padding:8px 24px;}
.b-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;gap:16px;}
.b-row:last-child{border-bottom:none;}
.b-row .b-label{color:var(--text-muted);}
.b-row .b-label.strong{color:var(--text);font-weight:600;}
.b-row .b-amt{font-weight:500;text-align:right;white-space:nowrap;}
.b-row .b-amt.neg{color:var(--danger);}
.b-row.deposit .b-amt{font-weight:600;font-size:16px;}
.breakdown-foot{padding:16px 24px;border-top:1px solid var(--border);background:var(--bg-subtle);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.breakdown-foot .dest{font-size:13px;color:var(--text-muted);font-weight:500;}

/* ---------- Pricing ---------- */
.pricing-head{text-align:center;max-width:560px;margin:0 auto;}
.pricing-head .subline{margin-left:auto;margin-right:auto;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:start;}
.price-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:24px;position:relative;}
.price-card.featured{border-color:var(--accent);}
.badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:13px;font-weight:500;
  height:24px;padding:0 12px;border-radius:9999px;display:flex;align-items:center;white-space:nowrap;
}
.price-name{font-size:16px;font-weight:600;}
.price-desc{font-size:13px;color:var(--text-muted);margin-top:4px;min-height:36px;}
.price-amount{margin:16px 0 4px;display:flex;align-items:baseline;gap:4px;}
.price-amount .dollars{font-size:36px;font-weight:600;letter-spacing:-0.01em;}
.price-amount .per{font-size:13px;color:var(--text-muted);font-weight:500;}
.price-billing{font-size:13px;color:var(--text-muted);margin-bottom:20px;}
.price-features{list-style:none;margin:20px 0 0;display:grid;gap:10px;border-top:1px solid var(--border);padding-top:20px;}
.price-features li{display:flex;gap:10px;font-size:14px;color:var(--text);align-items:flex-start;}
.price-features li .check{margin-top:1px;}
.price-card .btn{margin-top:20px;}

/* ---------- FAQ + CTA ---------- */
.faq-section{background:var(--bg-subtle);border-top:1px solid var(--border);}
.faq-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:48px;align-items:start;}
.faq-list{margin-top:32px;border-top:1px solid var(--border);}
details{border-bottom:1px solid var(--border);}
summary{
  list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;
  font-size:16px;font-weight:600;gap:16px;
}
summary::-webkit-details-marker{display:none;}
summary .plus{flex:none;width:20px;height:20px;color:var(--text-muted);transition:transform 150ms var(--ease);}
details[open] summary .plus{transform:rotate(45deg);}
details p{padding:0 32px 20px 0;font-size:14px;color:var(--text-muted);}
.cta-card{
  background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:32px;text-align:left;position:sticky;top:84px;margin-top:32px;
}
.cta-card h3{font-size:24px;font-weight:600;letter-spacing:-0.015em;line-height:1.25;margin-bottom:12px;}
.cta-card p{font-size:14px;color:var(--text-muted);margin-bottom:24px;}
.cta-card .fine{font-size:13px;color:var(--text-muted);margin-top:12px;margin-bottom:0;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border);background:var(--bg-subtle);padding:48px 0 32px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.footer-tag{font-size:13px;color:var(--text-muted);margin-top:12px;max-width:220px;}
.footer-col h3,.footer-col h4{font-size:13px;font-weight:500;color:var(--text-muted);margin-bottom:12px;}
.footer-col ul{list-style:none;display:grid;gap:8px;}
.footer-col a{font-size:14px;color:var(--text);transition:color 150ms var(--ease);}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid,.explained-grid,.faq-grid{grid-template-columns:1fr;gap:40px;}
  .notify{justify-self:start;}
  .features-grid,.pricing-grid{grid-template-columns:1fr;max-width:480px;}
  .stats-grid{grid-template-columns:1fr;gap:24px;}
  .stat{padding-left:0;border-left:none;padding-top:24px;border-top:1px solid var(--border);}
  .stat:first-child{padding-top:0;border-top:none;}
  .cta-card{position:static;margin-top:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  h1{font-size:32px;}
  .nav-links{display:none;}
}
@media (max-width:480px){
  .container{padding:0 16px;}
  section{padding:48px 0;}
  .hero{padding:56px 0 48px;}
  h1{font-size:28px;}
  h2{font-size:24px;}
  .stat-value{font-size:28px;}
  .stat-value.small{font-size:24px;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-ctas .btn{flex:1;}
  .pill + .pill{margin-left:4px;}
  .b-row .b-label{font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Brand imagery (icon, hero, promo strip) ---------- */
.brand-icon{border-radius:22%;object-fit:cover;flex:none;vertical-align:middle;margin-right:6px}
.brand-hero{max-width:1120px;margin:8px auto 56px;padding:0 24px}
.brand-hero img{display:block;width:100%;height:auto;border-radius:16px}
.brand-promo{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1120px;margin:0 auto 64px;padding:0 24px}
.brand-promo figure{margin:0}
.brand-promo img{display:block;width:100%;height:auto;border-radius:16px}
@media(max-width:720px){.brand-promo{grid-template-columns:1fr}}