/* QuotaMath design system — shared inner-page styles */
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url(/fonts/SpaceGrotesk-500.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url(/fonts/SpaceGrotesk-700.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/Inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/fonts/Inter-500.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(/fonts/JetBrainsMono-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/fonts/JetBrainsMono-500.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(/fonts/JetBrainsMono-700.woff2) format("woff2"); }

:root {
  --paper: #F6F4ED; --ink: #16150F; --ink-60: #59574F; --ink-30: #9E9C91;
  --border-soft: #CCC7BA; --white: #FFFFFF; --orange: #E8481C;
  --green: #1E6B4F; --ramp-green: #A1C7B0;
  --grotesk: "Space Grotesk", system-ui, sans-serif;
  --inter: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--inter); background: var(--paper); color: var(--ink); line-height: 1.5; }
.shell { max-width: 1440px; margin: 0 auto; padding-left: 64px; padding-right: 64px; }
.prose-measure { max-width: 760px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mono { font-family: var(--mono); }

/* Nav */
nav.site { height: 72px; border-bottom: 1.5px solid var(--ink); background: var(--paper); position: sticky; top: 0; z-index: 40; }
nav.site .shell { height: 100%; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .badge { width: 30px; height: 30px; border-radius: 6px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.logo .word { font-family: var(--grotesk); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.navlinks { display: flex; gap: 24px; margin-left: auto; }
.navlinks a { font-family: var(--grotesk); font-weight: 500; font-size: 15px; text-decoration: none; color: var(--ink); }
.navlinks a:hover { color: var(--orange); }
.navlinks a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.nav-cta { margin-left: 8px; }

/* Buttons */
.btn { display: inline-block; font-family: var(--grotesk); font-weight: 500; font-size: 17px; text-decoration: none; border-radius: 10px; padding: 16px 28px; border: 1.5px solid var(--ink); cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #2c2a20; }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: rgba(22,21,15,0.06); }
.btn-accent { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-accent:hover { background: #cf3d15; }
.btn-sm { font-size: 15px; padding: 10px 18px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 32px 0; }

/* Type */
.kicker { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
h1 { font-family: var(--grotesk); font-weight: 700; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; letter-spacing: -0.02em; margin: 16px 0 18px; }
h2 { font-family: var(--grotesk); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.015em; margin: 56px 0 16px; }
h3 { font-family: var(--grotesk); font-weight: 700; font-size: 19px; margin: 28px 0 8px; }
p { font-size: 15.5px; line-height: 1.6; color: var(--ink-60); margin-bottom: 14px; }
p strong, li strong { color: var(--ink); }
.lead { font-size: 19px; line-height: 1.55; }
main a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }
main a:hover { color: var(--orange); }
.crumbs { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-30); margin: 28px 0 8px; }
.crumbs a { color: var(--ink-30); text-decoration: none; }
.updated { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-60); margin-top: 40px; line-height: 1.8; }
.updated a { color: var(--ink-60); }
.strike { text-decoration: line-through; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

/* Callout (definition) */
.callout { background: var(--white); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 20px 24px; margin: 26px 0; }
.callout p { margin: 0; }
.callout .mono-tag { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 8px; }

/* Tables */
table.qm { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 14.5px; }
table.qm th { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase; text-align: left; color: var(--ink); padding: 10px 12px; border-bottom: 1.5px solid var(--ink); }
table.qm td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); color: var(--ink-60); vertical-align: top; }
table.qm td .num, table.qm td strong.num { font-family: var(--mono); font-weight: 700; color: var(--ink); }
table.qm td .num.good { color: var(--green); }
table.qm td .num.bad { color: var(--orange); }

/* Formula board */
.formula-board { background: var(--ink); border-radius: 14px; padding: 28px 32px; font-family: var(--mono); font-weight: 500; font-size: clamp(13px, 1.35vw, 16px); line-height: 1.7; color: var(--paper); overflow-x: auto; margin: 24px 0; }
.formula-board .g { color: #4CAF87; }
.formula-board .rg { color: var(--ramp-green); }
.formula-board .o { color: #FF6B44; }

/* Benchmark strip */
.strip { background: var(--ink); color: var(--paper); padding: 48px 0; margin: 48px 0; }
.strip .shell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stat .num { font-family: var(--mono); font-weight: 700; font-size: 34px; }
.stat .num.punch { color: var(--orange); }
.stat .lbl { font-family: var(--mono); font-size: 12.5px; color: var(--ink-30); margin-top: 6px; line-height: 1.45; }

/* Feature list */
ul.feat { list-style: none; margin: 18px 0 24px; }
ul.feat li { padding: 8px 0 8px 32px; position: relative; font-size: 15.5px; color: var(--ink-60); }
ul.feat li::before { content: "\2713"; position: absolute; left: 0; font-family: var(--mono); font-weight: 700; color: var(--green); }

/* Price card */
.price-card { background: var(--white); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 32px; text-align: center; }
.price-card .price { font-family: var(--mono); font-weight: 700; font-size: 52px; letter-spacing: -0.02em; }
.price-card .sub { font-size: 14px; color: var(--ink-60); margin: 6px 0 20px; }
.price-card .note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-60); margin-top: 16px; }

/* Sheet mock */
.sheet-mock { font-family: var(--mono); font-size: 11px; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; margin: 24px 0; background: var(--white); }
.sheet-mock .rowh { display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); background: var(--ink); color: var(--paper); }
.sheet-mock .row { display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); border-top: 1px solid var(--border-soft); }
.sheet-mock span { padding: 6px 10px; text-align: right; white-space: nowrap; overflow: hidden; }
.sheet-mock span:first-child { text-align: left; }
.sheet-mock .row span.g { color: var(--green); }
.sheet-mock .row span.o { color: var(--orange); }

/* Footer */
footer { background: var(--ink); color: var(--paper); padding: 64px 0 0; margin-top: 96px; }
.foot-line { font-family: var(--mono); font-weight: 700; font-size: clamp(22px, 3vw, 34px); }
.foot-line .neq { color: var(--orange); }
.foot-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 44px; flex-wrap: wrap; }
.foot-grid .byline { font-size: 14px; color: var(--ink-30); line-height: 1.6; }
.foot-grid .byline b { color: var(--paper); font-family: var(--grotesk); font-size: 16px; display: block; margin-bottom: 6px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { font-family: var(--grotesk); font-weight: 500; font-size: 14px; color: var(--paper); text-decoration: none; }
.foot-links a:hover { color: var(--orange); }
.foot-strip { border-top: 1px solid rgba(246,244,237,0.18); margin-top: 44px; padding: 18px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-30); }

/* Two-column split */
.split { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }

@media (max-width: 1080px) {
  .shell { padding-left: 24px; padding-right: 24px; }
  .navlinks { display: none; }
  .strip .shell { grid-template-columns: 1fr; gap: 24px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
}