/* =====================================================================
   FINMARO — Design System
   Minimal · Editorial · AI-native · Zero gradients · Zero shadows
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Surface — single bg used across every section, every page */
  --bg:            #F4F2EC;     /* warm paper */
  --surface:       #F4F2EC;     /* identical: no contrast surfaces */
  --surface-soft:  #ECE9E0;     /* used very sparingly for inputs */

  /* Ink */
  --ink:           #0E0E0C;
  --ink-2:         #2A2A26;
  --ink-3:         #5B5B53;
  --ink-4:         #8A8A82;

  /* Lines */
  --line:          #D9D5C9;
  --line-strong:   #B8B3A4;

  /* Accent — Finmaro forest ink */
  --accent:        #1F3A2E;
  --accent-ink:    #F4F2EC;

  /* State */
  --pos:           #1F3A2E;
  --neg:           #7A2E1F;
  --warn:          #6B5A1F;

  /* Type */
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale (4px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --s-11: 96px; --s-12: 128px;

  /* Radius */
  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px;

  /* Container */
  --container: 1200px;
  --container-narrow: 880px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background: var(--ink); color: var(--bg); }

/* ---------- Typography ---------- */
.serif{ font-family: var(--font-serif); font-weight:400; letter-spacing:-0.01em; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }

h1,h2,h3,h4,h5{ margin:0; font-weight:500; letter-spacing:-0.02em; color: var(--ink); }
.h-display{ font-family: var(--font-serif); font-weight:400; font-size: clamp(48px, 7vw, 96px); line-height: 1.02; letter-spacing:-0.025em; }
.h-1      { font-family: var(--font-serif); font-weight:400; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; letter-spacing:-0.022em; }
.h-2      { font-family: var(--font-serif); font-weight:400; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing:-0.02em; }
.h-3      { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 500; letter-spacing:-0.015em; }
.h-4      { font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing:-0.01em; }
.lead     { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }

p{ margin:0 0 1em; color: var(--ink-2); }
small{ font-size: 13px; color: var(--ink-3); }

.eyebrow{
  display:inline-flex; align-items:center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before{ content:""; width:18px; height:1px; background: var(--ink-3); display:inline-block; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow{ width:100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

.section{ padding: var(--s-11) 0; border-top: 1px solid var(--line); }
.section:first-of-type{ border-top: 0; }
.section-tight{ padding: var(--s-9) 0; }

.grid{ display:grid; gap: var(--s-6); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.row{ display:flex; gap: var(--s-4); align-items:center; }
.row-between{ display:flex; gap: var(--s-4); align-items:center; justify-content:space-between; }
.stack{ display:flex; flex-direction:column; gap: var(--s-4); }
.stack-lg{ display:flex; flex-direction:column; gap: var(--s-7); }

@media (max-width: 900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; }
  .section{ padding: var(--s-9) 0; }
}

/* ---------- Top bar (announcement) ---------- */
.topbar{
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding: 10px 24px; }
.topbar a{ color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.topbar .dot{ width:6px; height:6px; background: var(--accent); border-radius:50%; display:inline-block; margin-right:8px; vertical-align: middle; }

/* ---------- Navbar ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content: space-between;
  height: 64px;
}
.brand{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: var(--font-serif); font-size: 22px; letter-spacing:-0.01em;
}
.brand-mark{
  width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 50%;
  position:relative; display:inline-block;
}
.brand-mark::after{
  content:""; position:absolute; inset:5px; border: 1.5px solid var(--ink); border-radius: 50%;
  border-top-color: transparent; border-right-color: transparent;
}
.nav-links{ display:flex; gap: 28px; align-items:center; }
.nav-links a{ font-size: 14px; color: var(--ink-2); }
.nav-links a:hover{ color: var(--ink); }
.nav-cta{ display:flex; gap: 12px; align-items:center; }

.nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius: var(--r-2); }
.nav-toggle span{ width:16px; height:1px; background: var(--ink); position:relative; }
.nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:0; width:16px; height:1px; background: var(--ink); }
.nav-toggle span::before{ top:-5px; } .nav-toggle span::after{ top:5px; }

@media (max-width: 900px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-open .nav-links{
    display:flex; flex-direction:column; position:absolute; top: 64px; left:0; right:0;
    background: var(--bg); border-bottom:1px solid var(--line); padding: 20px 24px; gap: 14px;
  }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  padding: 10px 16px; border-radius: var(--r-2);
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--ink); color: var(--bg); }
.btn-primary:hover{ background: var(--accent); }
.btn-secondary{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover{ background: var(--ink); color: var(--bg); }
.btn-ghost{ color: var(--ink-2); padding: 10px 12px; }
.btn-ghost:hover{ color: var(--ink); }
.btn-lg{ padding: 14px 22px; font-size: 15px; }
.btn .arrow{ transition: transform .15s ease; }
.btn:hover .arrow{ transform: translateX(2px); }

/* ---------- Hero ---------- */
.hero{ padding: var(--s-11) 0 var(--s-10); border-top: 0; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-9); align-items:start; }
.hero h1{ margin-top: 16px; }
.hero .lead{ margin-top: 20px; }
.hero-actions{ margin-top: 28px; display:flex; gap: 12px; flex-wrap: wrap; }
.hero-meta{ margin-top: 28px; display:flex; gap: 24px; flex-wrap: wrap; }
.hero-meta .item{ font-size: 13px; color: var(--ink-3); display:flex; gap:8px; align-items:center; }
.hero-meta .item::before{ content:""; width:6px; height:6px; background: var(--accent); border-radius:50%; }
@media (max-width: 900px){
  .hero{ padding: var(--s-9) 0; }
  .hero-grid{ grid-template-columns: 1fr; }
}

/* ---------- Mock CFO panel (Hero visual) ---------- */
.mock{
  border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--bg); overflow:hidden;
}
.mock-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.mock-head .dots{ display:flex; gap:6px; }
.mock-head .dots span{ width:8px; height:8px; border:1px solid var(--line-strong); border-radius:50%; }
.mock-body{ padding: 20px; }
.mock-kpis{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; border:1px solid var(--line); border-radius: var(--r-2); }
.mock-kpi{ padding: 14px 16px; border-right: 1px solid var(--line); }
.mock-kpi:last-child{ border-right: 0; }
.mock-kpi .label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.mock-kpi .value{ font-family: var(--font-serif); font-size: 26px; margin-top: 4px; }
.mock-kpi .delta{ font-size: 11px; color: var(--accent); margin-top: 2px; font-family: var(--font-mono); }

.mock-chart{ height: 130px; margin-top: 16px; border:1px solid var(--line); border-radius: var(--r-2); padding: 12px; position:relative; }
.mock-chart svg{ width:100%; height:100%; }

.mock-chat{ margin-top: 16px; border:1px solid var(--line); border-radius: var(--r-2); }
.mock-chat .msg{ padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mock-chat .msg:last-child{ border-bottom: 0; }
.mock-chat .who{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.mock-chat .agent .who{ color: var(--accent); }

/* ---------- Cards / Grids ---------- */
.card{
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  background: var(--bg);
}
.card h3{ margin-bottom: 8px; }
.card .mono{ margin-bottom: 12px; display:block; }

.feature{
  border-top: 1px solid var(--line);
  padding: var(--s-7) 0;
  display:grid; grid-template-columns: 200px 1fr 1fr; gap: var(--s-6);
}
.feature .num{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: .12em; }
.feature h3{ font-size: 22px; font-weight: 500; }
.feature p{ color: var(--ink-3); margin: 0; max-width: 52ch; }
@media (max-width: 900px){ .feature{ grid-template-columns: 1fr; gap: 12px; } }

/* ---------- Bento ---------- */
.bento{ display:grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
.bento .cell{ border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-6); min-height: 220px; }
.bento .cell-wide{ grid-column: span 4; }
.bento .cell-med{  grid-column: span 3; }
.bento .cell-sm{   grid-column: span 2; }
.bento h3{ font-size: 20px; margin-bottom: 8px; }
.bento p{ font-size: 14px; color: var(--ink-3); margin: 0; }
@media (max-width: 900px){
  .bento{ grid-template-columns: 1fr; }
  .bento .cell-wide,.bento .cell-med,.bento .cell-sm{ grid-column: span 1; }
}

/* ---------- Pricing ---------- */
.price-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; border:1px solid var(--line); border-radius: var(--r-3); overflow:hidden; }
.price{ padding: var(--s-7); border-right: 1px solid var(--line); }
.price:last-child{ border-right: 0; }
.price .tier{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.price .amount{ font-family: var(--font-serif); font-size: 56px; line-height: 1; margin-top: 12px; letter-spacing: -0.02em; }
.price .per{ font-size: 13px; color: var(--ink-3); }
.price ul{ list-style:none; padding:0; margin: 24px 0; }
.price li{ font-size: 14px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); display:flex; gap:10px; align-items:flex-start; }
.price li::before{ content:"+"; color: var(--accent); font-family: var(--font-mono); font-size: 12px; margin-top: 2px; }
.price .btn{ width: 100%; justify-content: center; }
.price.featured{ background: var(--bg); }
.price.featured .tier{ color: var(--accent); }
@media (max-width: 900px){ .price-grid{ grid-template-columns: 1fr; } .price{ border-right:0; border-bottom:1px solid var(--line); } .price:last-child{ border-bottom:0; } }

/* ---------- Logo bar ---------- */
.logos{ display:flex; gap: var(--s-9); flex-wrap: wrap; justify-content: space-between; align-items:center; padding: var(--s-7) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logos span{ font-family: var(--font-serif); font-size: 22px; color: var(--ink-3); letter-spacing: -0.01em; }

/* ---------- FAQ ---------- */
.faq-item{ border-top: 1px solid var(--line); padding: 20px 0; cursor: pointer; }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; gap: 24px; }
.faq-q h4{ font-size: 18px; font-weight: 500; }
.faq-toggle{ font-family: var(--font-mono); color: var(--ink-3); font-size: 16px; }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .25s ease, margin .25s ease; color: var(--ink-3); }
.faq-item.open .faq-a{ max-height: 400px; margin-top: 12px; }
.faq-item.open .faq-toggle{ transform: rotate(45deg); }

/* ---------- Footer ---------- */
.footer{ border-top: 1px solid var(--line); padding: var(--s-10) 0 var(--s-7); margin-top: var(--s-9); }
.footer-grid{ display:grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--s-7); }
.footer h5{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; font-weight: 500; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ padding: 6px 0; font-size: 14px; }
.footer li a{ color: var(--ink-2); }
.footer li a:hover{ color: var(--ink); }
.footer-bottom{ border-top: 1px solid var(--line); margin-top: var(--s-7); padding-top: 20px; display:flex; justify-content:space-between; align-items:center; font-size: 12px; color: var(--ink-3); }
.footer-bottom .mono{ margin:0; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } .footer-bottom{ flex-direction:column; gap:8px; align-items:flex-start; } }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 16px; }
.field label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.input, .textarea, .select{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  width: 100%;
}
.input:focus, .textarea:focus, .select:focus{ outline:none; border-color: var(--ink); }
.textarea{ min-height: 140px; resize: vertical; }

/* ---------- Tags / Badges ---------- */
.tag{ display:inline-flex; align-items:center; gap: 6px; border:1px solid var(--line); padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; color: var(--ink-3); }
.badge{ display:inline-flex; align-items:center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border:1px solid var(--accent); padding: 3px 8px; border-radius: var(--r-pill); }

/* ---------- Tables ---------- */
.table{ width:100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td{ text-align: left; padding: 14px 12px; border-top: 1px solid var(--line); }
.table th{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.table tr:last-child td{ border-bottom: 1px solid var(--line); }
.table .check{ color: var(--accent); }
.table .dash{ color: var(--ink-4); }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap: 0; border:1px solid var(--line); border-radius: var(--r-3); padding: 4px; width: max-content; }
.tab{ font-size: 13px; padding: 8px 14px; border-radius: var(--r-2); color: var(--ink-3); cursor: pointer; }
.tab.active{ background: var(--ink); color: var(--bg); }

/* ---------- Workflow diagram ---------- */
.flow{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border:1px solid var(--line); border-radius: var(--r-3); overflow:hidden; }
.flow .step{ padding: var(--s-6); border-right: 1px solid var(--line); position:relative; }
.flow .step:last-child{ border-right:0; }
.flow .step .num{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.flow .step h4{ margin-top: 14px; font-size: 18px; }
.flow .step p{ margin-top: 8px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px){ .flow{ grid-template-columns: 1fr; } .flow .step{ border-right:0; border-bottom:1px solid var(--line); } .flow .step:last-child{ border-bottom:0; } }

/* ---------- Misc ---------- */
.divider{ height:1px; background: var(--line); }
.muted{ color: var(--ink-3); }
.text-center{ text-align:center; }
.max-narrow{ max-width: 720px; }

.kbd{ font-family: var(--font-mono); font-size: 11px; border:1px solid var(--line); padding: 2px 6px; border-radius: 3px; color: var(--ink-2); }

/* ---------- Page header (sub pages) ---------- */
.page-head{ padding: var(--s-10) 0 var(--s-8); }
.page-head .eyebrow{ margin-bottom: 16px; }
.page-head h1{ font-family: var(--font-serif); font-size: clamp(40px, 6vw, 80px); line-height: 1.04; max-width: 16ch; letter-spacing:-0.022em; font-weight:400; }
.page-head .lead{ margin-top: 20px; max-width: 60ch; }

/* ---------- Doc layout ---------- */
.doc{ display:grid; grid-template-columns: 240px 1fr; gap: var(--s-8); }
.doc-side{ border-right: 1px solid var(--line); padding-right: var(--s-6); position:sticky; top:80px; align-self:start; }
.doc-side h5{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 8px; }
.doc-side a{ display:block; padding: 6px 0; font-size: 14px; color: var(--ink-2); }
.doc-side a:hover{ color: var(--ink); }
.doc-body h2{ font-family: var(--font-serif); font-size: 36px; margin: 40px 0 12px; }
.doc-body h3{ font-size: 20px; margin: 28px 0 10px; }
.doc-body code{ font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-soft); padding: 1px 6px; border-radius: 3px; }
.doc-body pre{ font-family: var(--font-mono); font-size: 12.5px; border:1px solid var(--line); border-radius: var(--r-2); padding: 16px; overflow:auto; background: var(--bg); }
@media (max-width: 900px){ .doc{ grid-template-columns: 1fr; } .doc-side{ border-right:0; border-bottom:1px solid var(--line); padding: 0 0 16px; position:static; } }

/* ---------- Auth ---------- */
.auth{ max-width: 420px; margin: var(--s-10) auto; border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-7); }
.auth h2{ font-family: var(--font-serif); font-size: 32px; margin-bottom: 8px; }
.auth .sub{ font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.auth .btn{ width: 100%; justify-content: center; }
.auth .divider-text{ display:flex; align-items:center; gap: 12px; margin: 20px 0; color: var(--ink-4); font-size: 12px; }
.auth .divider-text::before, .auth .divider-text::after{ content:""; flex:1; height:1px; background: var(--line); }
.auth .foot{ margin-top: 20px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ---------- Dashboard preview ---------- */
.dash{ border: 1px solid var(--line); border-radius: var(--r-3); display:grid; grid-template-columns: 240px 1fr; min-height: 600px; overflow:hidden; }
.dash-side{ border-right: 1px solid var(--line); padding: 20px; }
.dash-side h5{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; }
.dash-side a{ display:flex; align-items:center; gap: 10px; padding: 8px 10px; border-radius: var(--r-2); font-size: 13px; color: var(--ink-2); }
.dash-side a.active{ background: var(--surface-soft); color: var(--ink); }
.dash-side a::before{ content:""; width: 6px; height: 6px; background: var(--ink-4); border-radius: 50%; }
.dash-side a.active::before{ background: var(--accent); }
.dash-main{ padding: 24px; }
.dash-main .kpi-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border:1px solid var(--line); border-radius: var(--r-2); }
.dash-main .kpi{ padding: 16px; border-right: 1px solid var(--line); }
.dash-main .kpi:last-child{ border-right: 0; }
.dash-main .kpi .l{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.dash-main .kpi .v{ font-family: var(--font-serif); font-size: 28px; margin-top: 4px; }
.dash-main .panel{ border:1px solid var(--line); border-radius: var(--r-2); padding: 20px; margin-top: 20px; }
.dash-main .panel h3{ font-size: 16px; margin-bottom: 14px; }
@media (max-width: 900px){
  .dash{ grid-template-columns: 1fr; }
  .dash-side{ border-right:0; border-bottom: 1px solid var(--line); }
  .dash-main .kpi-row{ grid-template-columns: repeat(2, 1fr); }
  .dash-main .kpi:nth-child(2){ border-right:0; }
  .dash-main .kpi:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
}

/* ---------- Changelog / Roadmap ---------- */
.log-item{ display:grid; grid-template-columns: 200px 1fr; gap: var(--s-6); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.log-item .mono{ margin: 0; }
.log-item h3{ font-size: 22px; margin-bottom: 8px; }
.log-item p{ color: var(--ink-3); margin: 0; }
.log-item ul{ margin: 12px 0 0; padding-left: 18px; }
.log-item li{ font-size: 14px; color: var(--ink-3); padding: 4px 0; }
@media (max-width: 900px){ .log-item{ grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Callout / CTA strip ---------- */
.cta-strip{ border:1px solid var(--ink); border-radius: var(--r-3); padding: var(--s-9); display:flex; justify-content:space-between; align-items:center; gap: var(--s-6); }
.cta-strip h2{ font-family: var(--font-serif); font-size: clamp(28px, 3vw, 44px); max-width: 22ch; letter-spacing: -0.02em; }
@media (max-width: 900px){ .cta-strip{ flex-direction: column; align-items:flex-start; padding: var(--s-7); } }