/* quitta.ai — GENERATED FILE, DO NOT EDIT.
   Built by tools/build-css.py from:
     - css/tokens/colors.css
     - css/tokens/typography.css
     - css/tokens/spacing.css
     - css/tokens/effects.css
     - css/components.css
     - css/site.css
   Edit those sources and re-run: python3 tools/build-css.py */

/* ==================== css/tokens/colors.css ==================== */
/* Quitta color system — "The Settled Ledger". Base palette + semantic aliases.
   Lime (--quitado) is a VERDICT, not a decoration: settlement moments only, ≤8% of any layout.
   Never lime text on light surfaces (fails AA) — use --cedula there. */
:root{
  /* base */
  --tinta:#0B1F16;          /* dominant dark ink-green */
  --tinta-2:#10291D;        /* raised surface on ink */
  --cedula:#166534;         /* emerald accent */
  --cedula-escura:#0F3D22;  /* deep emerald (hover, judicial track) */
  --quitado:#A3E635;        /* electric lime — settlement only */
  --quitado-hover:#B4F04A;
  --recibo:#F4F7F4;         /* ledger paper */
  --branco:#FFFFFF;
  --sombra:#9DB3A5;         /* muted sage */
  --cinza-verde:#5B6B61;    /* muted body text on light */
  --verde-claro:#CFE0D4;    /* body text on emerald */
  /* hairlines */
  --hair:rgba(11,31,22,.12);
  --hair-dark:rgba(157,179,165,.22);
  --hair-lime:rgba(163,230,53,.45);
  /* semantic */
  --surface-page:var(--recibo);
  --surface-card:var(--branco);
  --surface-ink:var(--tinta);
  --surface-ink-raised:var(--tinta-2);
  --surface-emerald:var(--cedula-escura);
  --text-body:var(--tinta);
  --text-muted:var(--cinza-verde);
  --text-on-ink:var(--recibo);
  --text-muted-on-ink:var(--sombra);
  --text-accent:var(--cedula);      /* accent text on light */
  --text-verdict:var(--quitado);    /* accent text on dark only */
  --focus-ring:var(--cedula);
}

/* ==================== css/tokens/typography.css ==================== */
/* Quitta type system.
   Gloock = display only (max ~2 lines, never paragraphs). Outfit = body/UI.
   Geist Mono = ALL numbers, amounts, dates, IDs, percentages, registry labels. */
:root{
  --font-display:'Gloock',Georgia,serif;
  --font-body:'Outfit',system-ui,sans-serif;
  --font-mono:'Geist Mono','SFMono-Regular',ui-monospace,monospace;
  /* scale (from quitta.ai) */
  --text-h1:clamp(38px,4.6vw,58px);
  --text-h2:clamp(30px,3.4vw,42px);
  --text-display-num:52px;   /* big step numerals */
  --text-stat:34px;          /* panel-foot stat */
  --text-lead:18px;
  --text-body-lg:16.5px;
  --text-body-md:15px;
  --text-body-sm:14.5px;
  --text-caption:14px;
  --text-mono-md:13px;       /* ledger rows */
  --text-mono-label:12px;    /* eyebrows, registry labels */
  --text-mono-sm:11.5px;
  --text-mono-micro:11px;
  /* letterspacing — mono registry labels are always wide */
  --ls-eyebrow:.28em;
  --ls-tag:.2em;
  --ls-label:.18em;
  --ls-row-hdr:.16em;
  --ls-badge:.14em;
  /* leading */
  --lh-display:1.12;
  --lh-heading:1.18;
  --lh-body:1.6;
  --lh-relaxed:1.65;
}

/* ==================== css/tokens/spacing.css ==================== */
/* Quitta spacing, radii, shadow, motion — exact values from quitta.ai. Generous margins, minimal decoration. */
:root{
  --wrap-max:1180px;
  --wrap-pad:28px;
  --section-pad:96px;
  --gap-grid:22px;      /* card grids */
  --gap-hero:64px;
  --gap-nav:34px;
  --nav-h:68px;
  --card-pad:32px 28px; /* pillar */
  --panel-pad:22px;
  /* radii */
  --radius-btn:8px;
  --radius-input:9px;
  --radius-icon:11px;
  --radius-card:14px;
  --radius-frame:16px;
  --radius-hero:20px;
  --radius-badge:6px;
  --radius-pill:99px;
  /* elevation — a single soft ink shadow; panels only */
  --shadow-panel:0 24px 60px -28px rgba(11,31,22,.28);
  /* motion */
  --ease-score:cubic-bezier(.2,.7,.2,1);
  --speed-fast:.15s;
  --speed-hover:.2s;
  --speed-strike:.45s;
  --speed-reveal:.7s;
}

/* ==================== css/tokens/effects.css ==================== */
/* Signature surfaces: horizontal ledger ruling on light; very low opacity (or none) on dark. */
:root{
  --ruling-light:repeating-linear-gradient(to bottom,transparent 0,transparent 87px,rgba(11,31,22,.035) 87px,rgba(11,31,22,.035) 88px);
  --ruling-dark:repeating-linear-gradient(to bottom,transparent 0,transparent 87px,rgba(244,247,244,.028) 87px,rgba(244,247,244,.028) 88px);
}
.q-ruling{background-color:var(--recibo);background-image:var(--ruling-light)}
.q-ruling-dark{background-color:var(--tinta);background-image:var(--ruling-dark)}
::selection{background:var(--quitado);color:var(--tinta)}

/* ==================== css/components.css ==================== */
/* Quitta component classes — mirrored 1:1 from quitta.ai (q- prefix). */
/* eyebrow / registry label */
.q-eyebrow{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--cedula);font-weight:500}
.q-eyebrow--dark{color:var(--quitado)}
/* buttons */
.q-btn{display:inline-block;background:var(--tinta);color:var(--recibo);font-family:var(--font-body);font-weight:600;font-size:15px;padding:13px 26px;border-radius:var(--radius-btn);border:none;cursor:pointer;text-decoration:none;transition:transform var(--speed-fast) ease,background var(--speed-fast) ease}
.q-btn:hover{background:var(--cedula-escura);transform:translateY(-1px)}
.q-btn--lime{background:var(--quitado);color:var(--tinta)}
.q-btn--lime:hover{background:var(--quitado-hover)}
.q-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* form fields (native: dark CTA form) */
.q-input,.q-select{font-family:var(--font-body);font-size:15px;padding:15px 18px;border-radius:var(--radius-input);border:1px solid var(--hair-dark);background:var(--tinta-2);color:var(--recibo);width:100%}
.q-input::placeholder{color:var(--cinza-verde)}
.q-input--light,.q-select--light{background:var(--branco);border-color:var(--hair);color:var(--tinta)}
.q-input:focus-visible,.q-select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* settlement strike — lime diagonal across a settled amount */
.q-strike{position:relative;white-space:nowrap}
.q-strike::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:.12em;min-height:2.5px;background:var(--quitado);border-radius:var(--radius-pill);transform:rotate(-4deg)}
/* QUITADO rubber stamp */
.q-stamp{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;padding:6px 14px;border:2px solid var(--cedula);border-radius:var(--radius-badge);color:var(--cedula);transform:rotate(-4deg)}
.q-stamp--dark{border-color:var(--quitado);color:var(--quitado)}
.q-stamp--fill{background:var(--quitado);color:var(--tinta);border-color:var(--quitado);transform:none;padding:4px 10px;letter-spacing:.1em}
/* commitment chip */
.q-chip{border-top:2.5px solid var(--quitado);padding-top:18px}
.q-chip .k{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:var(--ls-tag);color:var(--sombra);text-transform:uppercase}
.q-chip .v{font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--branco);margin-top:8px;line-height:1.5}
.q-chip--light .k{color:var(--cinza-verde)}
.q-chip--light .v{color:var(--tinta)}
/* diagnostic panel */
.q-panel{background:var(--branco);border:1px solid var(--hair);border-radius:var(--radius-card);box-shadow:var(--shadow-panel);overflow:hidden}
.q-panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--hair)}
.q-panel-head .t{font-family:var(--font-mono);font-size:12px;letter-spacing:var(--ls-label);color:var(--cinza-verde)}
.q-pulse{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;color:var(--cedula)}
.q-pulse i{width:8px;height:8px;border-radius:50%;background:var(--quitado);animation:q-pl 1.8s infinite}
@keyframes q-pl{0%,100%{opacity:1}50%{opacity:.35}}
.q-panel-foot{display:flex;justify-content:space-between;align-items:flex-end;padding:18px 22px 20px;background:var(--tinta)}
.q-panel-foot .l{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--ls-row-hdr);color:var(--sombra)}
.q-panel-foot .big{font-family:var(--font-display);font-size:var(--text-stat);color:var(--quitado);line-height:1;margin-top:6px}
.q-panel-foot .r{font-family:var(--font-mono);font-size:11.5px;color:var(--sombra);text-align:right;line-height:1.7}
/* ledger rows — dashed dividers between data rows */
.q-ledger{padding:8px 22px 4px}
.q-lrow{display:grid;grid-template-columns:1.25fr .7fr 1fr .85fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--hair);font-family:var(--font-mono);font-size:var(--text-mono-md)}
.q-lrow.hdr{font-size:10.5px;letter-spacing:var(--ls-row-hdr);color:var(--sombra);border-bottom:1px solid var(--hair)}
.q-lrow .tid{color:var(--tinta);font-weight:500}
.q-lrow .vint{color:var(--cinza-verde)}
.q-scorebar{height:6px;background:var(--recibo);border-radius:var(--radius-pill);overflow:hidden}
.q-scorebar i{display:block;height:100%;background:var(--cedula);border-radius:var(--radius-pill);transition:width 1s var(--ease-score)}
.q-scorebar.hot i{background:var(--quitado)}
.q-verd{text-align:right;color:var(--cinza-verde);position:relative}
.q-verd.q{color:var(--cedula);font-weight:700}
.q-verd.q::after{content:"";position:absolute;left:8%;right:-2%;top:52%;height:2.5px;background:var(--quitado);border-radius:var(--radius-pill);transform:rotate(-4deg)}
/* hairline rules: solid between sections, dashed between data rows */
.q-hairline{border:none;border-top:1px solid var(--hair)}
.q-dashed{border:none;border-top:1px dashed var(--hair)}
.q-hairline--dark{border-top-color:var(--hair-dark)}
.q-dashed--dark{border-top-color:var(--hair-dark)}
/* default links */
a.q-link{color:var(--cedula);text-decoration:none}
a.q-link:hover{color:var(--cedula-escura);text-decoration:underline}

/* ==================== css/site.css ==================== */
/* quitta.ai site layout.
   Page-level composition only — section patterns (hero, pillars, steps, tracks, CTA, nav,
   footer) that the design system deliberately leaves to the UI kit rather than shipping as
   primitives. Everything here is built from tokens; no raw palette values.
   Primitives live in components.css (q-*). */

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-weight:400;
  line-height:var(--lh-body);background-image:var(--ruling-light)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}
.mono{font-family:var(--font-mono)}
.mark{display:inline-block;vertical-align:middle}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(244,247,244,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:11px;font-weight:600;font-size:21px;letter-spacing:.01em}
.logo .dot{color:var(--cedula)}
.nav-links{display:flex;gap:var(--gap-nav);font-size:var(--text-body-sm);font-weight:500;color:var(--text-muted)}
.nav-links a:hover{color:var(--tinta)}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-lang{font-family:var(--font-mono);font-size:var(--text-mono-label);letter-spacing:.15em;
  color:var(--text-muted);font-weight:500}

/* ---------- hero ---------- */
.hero{padding:84px 0 var(--section-pad);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-hero);align-items:center}
h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-h1);line-height:var(--lh-display);
  letter-spacing:-.005em;margin:22px 0 24px}
/* headline strike — shallower and longer-origin than the verdict strike (q-strike) */
h1 .risco{position:relative;white-space:nowrap}
h1 .risco::after{content:"";position:absolute;left:-2%;right:-2%;top:56%;height:.09em;background:var(--quitado);
  border-radius:var(--radius-pill);transform:rotate(-2.2deg);transform-origin:left center}
.hero p.sub{font-size:var(--text-lead);color:var(--text-muted);max-width:34em;line-height:var(--lh-relaxed)}
.hero-ctas{display:flex;gap:16px;align-items:center;margin-top:36px;flex-wrap:wrap}
.hero-note{font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)}

/* diagnostic panel — animation layer over the q-panel primitive */
.q-lrow{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.q-lrow.show{opacity:1;transform:none}
.q-lrow.hdr{opacity:1;transform:none}
.q-scorebar i{width:0}
.q-verd.q::after{transform:rotate(-4deg) scaleX(0);transform-origin:left center;
  transition:transform var(--speed-strike) ease .5s}
.q-lrow.show .q-verd.q::after{transform:rotate(-4deg) scaleX(1)}

/* ---------- section scaffolding ---------- */
section{padding:var(--section-pad) 0}
.sec-head{max-width:640px;margin-bottom:56px}
h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-h2);line-height:var(--lh-heading);
  margin:18px 0 16px}
.sec-head p{color:var(--text-muted);font-size:17px}
.dark{background:var(--surface-ink);color:var(--text-on-ink);background-image:none}
.dark h2{color:var(--branco)}
.dark .sec-head p{color:var(--text-muted-on-ink)}

/* ---------- intelligence pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.pillar{background:var(--surface-ink-raised);border:1px solid var(--hair-dark);border-radius:var(--radius-card);
  padding:var(--card-pad);display:flex;flex-direction:column;gap:14px;
  transition:transform var(--speed-hover) ease,border-color var(--speed-hover) ease}
.pillar:hover{transform:translateY(-3px);border-color:var(--hair-lime)}
.pillar .ic{width:46px;height:46px;border-radius:var(--radius-icon);background:var(--surface-ink);
  border:1px solid var(--hair-dark);display:flex;align-items:center;justify-content:center}
.pillar h3{font-size:19px;font-weight:600;color:var(--branco);letter-spacing:.01em}
.pillar p{font-size:var(--text-body-sm);color:var(--text-muted-on-ink);line-height:var(--lh-relaxed)}
.pillar .tag{font-family:var(--font-mono);font-size:var(--text-mono-micro);letter-spacing:var(--ls-tag);
  color:var(--quitado)}

/* ---------- flow steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hair);
  border-radius:var(--radius-frame);overflow:hidden;background:var(--surface-card)}
.step{padding:36px 28px 40px;border-right:1px solid var(--hair);position:relative;
  transition:background var(--speed-hover) ease}
.step:last-child{border-right:none}
.step:hover{background:#fbfdfa}
.step .num{font-family:var(--font-display);font-size:var(--text-display-num);color:var(--sombra);opacity:.55;
  line-height:1}
.step h3{font-size:18.5px;font-weight:600;margin:18px 0 10px;line-height:1.35}
.step p{font-size:var(--text-caption);color:var(--text-muted);line-height:var(--lh-relaxed)}
.step .cred{margin-top:18px;font-family:var(--font-mono);font-size:var(--text-mono-sm);letter-spacing:.06em;
  color:var(--cedula);border-top:1px dashed var(--hair);padding-top:14px}
.step.final{background:var(--surface-ink);color:var(--text-on-ink)}
.step.final .num{color:var(--quitado);opacity:1}
.step.final h3{color:var(--branco)}
.step.final p{color:var(--text-muted-on-ink)}
.step.final .cred{color:var(--quitado);border-top-color:var(--hair-dark)}

/* ---------- dual track ---------- */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);margin-top:8px}
.track{border:1px solid var(--hair);border-radius:var(--radius-card);padding:34px 30px;background:var(--surface-card)}
.track.jud{background:var(--surface-emerald);border-color:transparent;color:var(--text-on-ink)}
.track h3{font-size:20px;font-weight:600;display:flex;align-items:center;gap:12px}
.track.jud h3{color:var(--branco)}
.track ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.track li{font-size:var(--text-body-sm);color:var(--text-muted);padding-left:26px;position:relative;line-height:1.55}
.track.jud li{color:var(--verde-claro)}
/* list bullets are lime dashes rotated -18deg, echoing the tally diagonal */
.track li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:2.5px;background:var(--quitado);
  border-radius:var(--radius-pill);transform:rotate(-18deg)}
.always{margin-top:26px;display:flex;align-items:center;gap:14px;font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:var(--ls-badge);color:var(--cedula)}

/* ---------- commitment strip ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin-top:var(--gap-hero)}

/* ---------- CTA ---------- */
.cta-card{background:var(--surface-ink);border-radius:var(--radius-hero);padding:72px 64px;display:grid;
  grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;overflow:hidden}
.cta-card::after{content:"";position:absolute;right:-60px;top:-70px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(163,230,53,.14),transparent 65%)}
.cta-card h2{color:var(--branco);margin-top:14px}
.cta-card p{color:var(--text-muted-on-ink);font-size:var(--text-body-lg);max-width:30em}
.cta-form{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.cta-form .q-btn{margin-top:6px}
.cta-small{font-family:var(--font-mono);font-size:var(--text-mono-sm);color:var(--text-muted-on-ink);margin-top:4px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair);padding:44px 0;background:var(--surface-page)}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.foot-tag{font-family:var(--font-display);font-style:normal;font-size:17px;color:var(--text-muted)}
.foot-mono{font-family:var(--font-mono);font-size:var(--text-mono-label);color:var(--sombra);letter-spacing:.08em}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--speed-reveal) ease,transform var(--speed-reveal) ease}
.reveal.in{opacity:1;transform:none}

/* ---------- 404 ---------- */
body.page-404{min-height:100vh;display:flex;flex-direction:column}
body.page-404 nav{position:static;backdrop-filter:none}
body.page-404 .nav-in{justify-content:flex-start}
body.page-404 main{flex:1;display:flex;align-items:center;padding:80px 0}
body.page-404 .wrap{width:100%}
/* the 404 headline is a smaller display cut and carries no negative tracking */
body.page-404 h1{font-size:clamp(34px,4.4vw,52px);line-height:1.14;margin:20px 0 18px;max-width:16em;
  letter-spacing:normal}
/* the LP footer masks the ledger ruling behind a solid surface; the 404 lets it run through */
body.page-404 footer{background:transparent}
body.page-404 p.sub{font-size:17.5px;color:var(--text-muted);max-width:34em}
body.page-404 p.sub .en{display:block;margin-top:10px;font-size:15.5px;color:var(--sombra)}
body.page-404 .ctas{display:flex;gap:16px;align-items:center;margin-top:36px;flex-wrap:wrap}
body.page-404 footer{padding:34px 0}
/* tighter wrap gap — keeps the footer height (and the vertically-centred main) unchanged */
body.page-404 .foot-in{gap:14px}

/* ---------- motion preferences ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .q-lrow,.reveal{opacity:1!important;transform:none!important}
  .q-scorebar i{width:var(--w)!important}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .pillars{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid var(--hair)}
  .tracks{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr;padding:48px 32px}
  .nav-links{display:none}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  /* scoped to the hero — the 404 headline keeps its own clamp */
  .hero h1{font-size:36px}
}