/* ============================================================
   ACCELERO — design system
   Ink (instrument dark) / Paper (cool, clinical) / Signal (red-orange)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink: #14161C;
  --ink-2: #1B1E26;
  --ink-line: rgba(243,244,242,0.12);
  --paper: #E9EDEC;
  --paper-2: #DCE2E0;
  --paper-line: rgba(20,22,28,0.12);
  --signal: #FF5A36;
  --signal-dim: #C7431F;
  --data: #71C0F8;
  --green: #0E7C5A;
  --text-ink: #F3F4F2;
  --text-ink-soft: #9AA0AC;
  --text-paper: #14161C;
  --text-paper-soft: #4B515C;

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --max: 1120px;
  --radius: 4px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  font-family: var(--body);
  background: var(--paper);
  color: var(--text-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}
ul{list-style:none;}

.wrap{max-width: var(--max); margin: 0 auto; padding: 0 28px;}

h1,h2,h3{font-family: var(--display); line-height:1.08; letter-spacing:-0.01em; font-weight:700;}
h1{font-size: clamp(2.4rem, 5.2vw, 4.4rem);}
h2{font-size: clamp(1.7rem, 3.2vw, 2.6rem);}
h3{font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight:600;}

p{max-width: 60ch;}
.lede{font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-paper-soft);}

.mono{font-family: var(--mono);}
.eyebrow{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  display:flex; align-items:center; gap:8px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width:14px; height:1px; background: var(--green);
  display:inline-block;
}
.on-ink .eyebrow{color:#0E7C5A;}

.eyebrow2{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  display:flex; align-items:center; gap:8px;
  margin-bottom: 14px;
}
.eyebrow2::before{
  content:"";
  width:14px; height:1px; background: var(--data);
  display:inline-block;
}
.on-ink .eyebrow2{color:#71C0F8;}

.eyebrow3{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  display:flex; align-items:center; gap:8px;
  margin-bottom: 14px;
}
.eyebrow3::before{
  content:"";
  width:14px; height:1px; background: var(--signal);
  display:inline-block;
}
.on-ink .eyebrow3{color:#FF5A36;}

/* ---------------- Buttons ---------------- */
.btn{
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 13px 22px;
  border-radius: var(--radius);
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover{transform: translateY(-1px);}
.btn:focus-visible{outline:2px solid var(--signal); outline-offset:2px;}
.btn-primary{background: var(--signal); color:#FFFFFF;}
.btn-primary:hover{background: var(--signal-dim);}
.btn-ghost-ink{border-color: var(--ink-line); color: var(--text-ink); background:transparent;}
.btn-ghost-ink:hover{border-color: var(--text-ink);}
.btn-ghost-paper{border-color: var(--paper-line); color: var(--text-paper); background:transparent;}
.btn-ghost-paper:hover{border-color: var(--text-paper);}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}
.btn-arrow{transition: transform 0.15s ease;}
.btn:hover .btn-arrow{transform: translateX(3px);}
.btn-primary1{background: var(--green); color:#FFFFFF;}
.btn-primary2{background: var(--data); color:#FFFFFF;}

/* ---------------- Nav ---------------- */
header.site-nav{
  position: sticky; top:0; z-index:50;
  background: rgba(20,22,28,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px;
  max-width: var(--max); margin:0 auto;
}
.logo{
  font-family: var(--display); font-weight:700; font-size:1.1rem;
  color: var(--text-ink); text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.logo-dot{width:8px; height:8px; border-radius:50%; background: var(--signal); display:inline-block;
  animation: pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{
  font-family: var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--text-ink-soft); text-decoration:none; transition: color 0.15s ease;
}
.nav-links a:hover{color: var(--text-ink);}
.nav-links a.current{color: var(--signal);}
.nav-cta{
  font-family:var(--mono); font-size:0.78rem; color:var(--text-ink);
  border:1px solid var(--ink-line); padding:9px 16px; border-radius:var(--radius);
  text-decoration:none; text-transform:uppercase; letter-spacing:0.06em;
}
.nav-cta:hover{border-color:var(--text-ink);}
.nav-toggle{display:none; background:none; border:none; color:var(--text-ink); font-family:var(--mono); font-size:1.4rem; cursor:pointer;}

@media (max-width: 780px){
  .nav-links{
    position:fixed; inset: 61px 0 0 0; background: var(--ink);
    flex-direction:column; align-items:flex-start; padding: 30px 28px; gap:22px;
    transform: translateY(-8px); opacity:0; pointer-events:none; transition: all 0.2s ease;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-toggle{display:block;}
  .nav-cta{margin-top:4px;}
}

/* ---------------- Sections ---------------- */
section{padding: 88px 0;}
section.tight{padding: 64px 0;}
.on-ink{background: var(--ink); color: var(--text-ink);}
.on-ink p{color: var(--text-ink-soft);}
.on-ink h1, .on-ink h2, .on-ink h3{color: var(--text-ink);}
.on-paper-2{background: var(--paper-2);}
.divider{height:1px; background: var(--paper-line);}
.divider.on-ink{background: var(--ink-line);}

/* ---------------- Hero ---------------- */
.hero{padding-top: 108px; padding-bottom: 72px;}
.hero-kicker{color: var(--text-ink-soft); font-family:var(--mono); font-size:0.85rem; letter-spacing:0.04em; margin-bottom:20px;}
.hero h1{max-width: 15ch; margin-bottom: 22px;}
.hero .lede{color: var(--text-ink-soft); max-width:52ch;}

/* Drag gauge — signature element */
.gauge{
  margin-top: 56px;
  border: 1px solid var(--ink-line);
  border-radius: 6px;
  padding: 22px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  max-width: 620px;
}
.gauge-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
.gauge-label{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-ink-soft);}
.gauge-readout{font-family:var(--mono); font-size:1.6rem; color:#fff; font-variant-numeric: tabular-nums;}
.gauge-readout .unit{font-size:0.9rem; color: var(--text-ink-soft); margin-left:6px;}
.gauge-track{position:relative; height:6px; background: var(--ink-line); border-radius:3px; overflow:hidden;}
.gauge-fill{position:absolute; left:0; top:0; height:100%; width:88%; background: linear-gradient(90deg, var(--signal), #FF8A6B); border-radius:3px; transition: width 1.4s cubic-bezier(.2,.8,.2,1);}
.gauge.settled .gauge-fill{width:14%;}
.gauge-scale{display:flex; justify-content:space-between; margin-top:8px; font-family:var(--mono); font-size:0.68rem; color: var(--text-ink-soft);}

/* ---------------- Proof bar ---------------- */
.proof-bar{
  border-top: 1px solid var(--ink-line);
  padding: 26px 0;
}
.proof-list{display:flex; flex-wrap:wrap; gap: 34px; font-family:var(--mono); font-size:0.85rem; color: var(--text-ink-soft);}
.proof-list b{color: var(--text-ink); font-weight:600;}

/* ---------------- Stat bar (paper) ---------------- */
.stat-bar{display:flex; flex-wrap:wrap; gap:40px; padding: 30px 0; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);}
.stat{font-family:var(--mono);}
.stat .num{font-size:1.7rem; font-weight:600; font-variant-numeric: tabular-nums; display:block;}
.stat .lbl{font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-paper-soft);}

/* ---------------- Grid / cards ---------------- */
.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start;}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;}
@media (max-width: 860px){
  .grid-2{grid-template-columns: 1fr; gap: 40px;}
  .grid-3{grid-template-columns: 1fr;}
}

.tool-card{
  background: #fff; border:1px solid var(--paper-line); border-radius: 8px;
  padding: 32px; display:flex; flex-direction:column; gap:14px;
}
.tool-card .swatch{width:34px; height:34px; border-radius:8px;}
.swatch.cleansheets{background: var(--green);}
.swatch.pie{background: var(--data);}
.tool-card h3{margin-top:6px;}
.tool-card p{color: var(--text-paper-soft); font-size:0.96rem;}

.door-card{
  background: var(--ink-2); border:1px solid var(--ink-line); border-radius:8px;
  padding: 34px 30px; display:flex; flex-direction:column; height:100%;
}
.door-card .eyebrow{margin-bottom:18px;}
.door-card .price{font-family:var(--mono); font-size:1.05rem; color: var(--text-ink-soft); margin: 4px 0 20px;}
.door-card ul{margin: 18px 0 8px; display:flex; flex-direction:column; gap:10px;}
.door-card li{font-size:0.92rem; color: var(--text-ink-soft); padding-left:18px; position:relative;}
.door-card li::before{content:"—"; position:absolute; left:0; color: var(--green);}
.door-card .fit{margin-top:auto; padding-top:20px; font-size:0.82rem; color: var(--text-ink-soft); font-style:italic;}
.door-card .btn{margin-top:20px; align-self:flex-start;}
.door-card.featured{border-color: var(--green);}

.door-card2{
  background: var(--ink-2); border:1px solid var(--ink-line); border-radius:8px;
  padding: 34px 30px; display:flex; flex-direction:column; height:100%;
}
.door-card2 .eyebrow{margin-bottom:18px;}
.door-card2 .price{font-family:var(--mono); font-size:1.05rem; color: var(--text-ink-soft); margin: 4px 0 20px;}
.door-card2 ul{margin: 18px 0 8px; display:flex; flex-direction:column; gap:10px;}
.door-card2 li{font-size:0.92rem; color: var(--text-ink-soft); padding-left:18px; position:relative;}
.door-card2 li::before{content:"—"; position:absolute; left:0; color: var(--data);}
.door-card2 .fit{margin-top:auto; padding-top:20px; font-size:0.82rem; color: var(--text-ink-soft); font-style:italic;}
.door-card2 .btn{margin-top:20px; align-self:flex-start;}
.door-card2.featured{border-color: var(--data);}

.door-card3{
  background: var(--ink-2); border:1px solid var(--ink-line); border-radius:8px;
  padding: 34px 30px; display:flex; flex-direction:column; height:100%;
}
.door-card3 .eyebrow{margin-bottom:18px;}
.door-card3 .price{font-family:var(--mono); font-size:1.05rem; color: var(--text-ink-soft); margin: 4px 0 20px;}
.door-card3 ul{margin: 18px 0 8px; display:flex; flex-direction:column; gap:10px;}
.door-card3 li{font-size:0.92rem; color: var(--text-ink-soft); padding-left:18px; position:relative;}
.door-card3 li::before{content:"—"; position:absolute; left:0; color: var(--signal);}
.door-card3 .fit{margin-top:auto; padding-top:20px; font-size:0.82rem; color: var(--text-ink-soft); font-style:italic;}
.door-card3 .btn{margin-top:20px; align-self:flex-start;}
.door-card3.featured{border-color: var(--signal);}


/* ---------------- Quotes ---------------- */
.quote{border-left: 2px solid var(--signal); padding-left: 20px; font-size:1.05rem; color: var(--text-paper); margin: 18px 0;}
.quote cite{display:block; font-family:var(--mono); font-size:0.78rem; color: var(--text-paper-soft); margin-top:10px; font-style:normal;}

/* ---------------- FAQ ---------------- */
.faq-item{border-bottom: 1px solid var(--paper-line);}
.faq-item summary{
  font-family:var(--display); font-weight:600; font-size:1.02rem;
  padding: 22px 0; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--mono); font-size:1.3rem; color: var(--signal); flex-shrink:0; transition: transform 0.2s ease;}
.faq-item[open] summary::after{transform: rotate(45deg);}
.faq-item .a{padding-bottom: 22px; color: var(--text-paper-soft); max-width:64ch;}

/* ---------------- Reveal on scroll ---------------- */
.reveal{opacity:0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------------- Footer ---------------- */
footer{background: var(--ink); color: var(--text-ink-soft); padding: 50px 0 34px;}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:center;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:0.78rem;}
.footer-links a{text-decoration:none; color: var(--text-ink-soft);}
.footer-links a:hover{color: var(--text-ink);}
.footer-bottom{margin-top:26px; font-family:var(--mono); font-size:0.72rem; color:#565C68;}

/* ---------------- Newsletter ---------------- */
.newsletter-box{
  border:1px solid var(--ink-line); border-radius:8px; padding: 34px;
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-form input{
  font-family: var(--mono); font-size:0.88rem;
  background: var(--ink); border:1px solid var(--ink-line); color: var(--text-ink);
  padding: 13px 16px; border-radius: var(--radius); min-width:240px;
}
.newsletter-form input:focus-visible{outline:2px solid var(--signal); outline-offset:2px;}

/* ---------------- Pricing tiers ---------------- */
.price-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items:stretch;}
@media (max-width: 860px){.price-grid{grid-template-columns: 1fr;}}
.price-card{
  position:relative; background:#fff; border:1px solid var(--paper-line); border-radius:8px;
  padding: 34px 30px; display:flex; flex-direction:column; height:100%;
}
.price-card.featured{border-color: var(--signal); border-width:2px; padding-top:44px;}
.price-badge{
  position:absolute; top:-13px; left:30px;
  background: var(--signal); color:#fff; font-family:var(--mono); font-size:0.68rem;
  letter-spacing:0.1em; text-transform:uppercase; padding:6px 12px; border-radius: 20px;
}
.price-amount{font-family:var(--display); font-weight:700; font-size:2.2rem; margin: 10px 0 6px; color: var(--text-paper);}
.price-amount .unit{font-family:var(--mono); font-size:0.78rem; font-weight:400; color: var(--text-paper-soft); margin-left:6px; letter-spacing:0.06em;}
.price-desc{font-size:0.9rem; color: var(--text-paper-soft); min-height:2.6em;}
.price-list{margin: 22px 0 8px; display:flex; flex-direction:column; gap:11px; flex-grow:1;}
.price-list li{font-size:0.9rem; padding-left:24px; position:relative; color: var(--text-paper);}
.price-list li.off{color: #B9BEC2;}
.price-list li::before{
  content:"✓"; position:absolute; left:0; color: var(--signal); font-family:var(--mono); font-size:0.85rem;
}
.price-list li.off::before{content:"—"; color:#C7CBCE;}
.price-card .btn{margin-top:22px; justify-content:center;}

/* ---------------- Misc page helpers ---------------- */
.section-head{max-width:640px; margin-bottom:44px;}
.centered{text-align:center; margin-left:auto; margin-right:auto;}