/* fold — marketing site. Tokens from docs/design handoff (Fold Site.dc.html). */
:root {
  --ink: #211d17;
  --ink-hover: #3a3227;
  --ink-alt: #332a1e;
  --body: #4a4338;
  --body-strong: #3f382d;
  --paper: #fdfaf3;
  --ground: #e6e0d3;
  --ground-light: #efe8d9;
  --ground-dark: #ded7c7;
  --accent: #b35a2a;
  --accent-deep: #8e4520;
  --accent-text: #7a3a1a;
  --accent-light: #e08a4e;
  --accent-light-hover: #eb975b;
  --card: rgba(253, 250, 243, .62);
  --card-border: rgba(33, 29, 23, .09);
  --hairline: rgba(33, 29, 23, .1);
  --grid: rgba(90, 74, 48, .14);
  --on-dark: rgba(253, 250, 243, .74);
  --on-dark-fine: rgba(253, 250, 243, .66);
  --sans: Archivo, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
p { margin: 0; }
h1, h2, h3 { margin: 0; }

.page {
  min-height: 100vh;
  overflow-x: clip;
  background: radial-gradient(120% 70% at 78% 0%, var(--ground-light) 0%, var(--ground) 46%, var(--ground-dark) 100%);
}
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* Header */
.header { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.wordmark { font: 800 25px/1 var(--sans); letter-spacing: -.05em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav a { font: 500 13.5px/1 var(--sans); color: var(--body); }
.nav a:hover { color: var(--ink); }
.nav .cta { padding: 11px 17px; border-radius: 11px; background: var(--ink); font: 600 13.5px/1 var(--sans); color: var(--paper); }
.nav .cta:hover { background: var(--ink-hover); color: var(--paper); }

/* Type */
.eyebrow { font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.h1 { font: 800 clamp(42px, 6.4vw, 68px)/.98 var(--sans); letter-spacing: -.05em; margin-top: 18px; text-wrap: balance; }
.h2 { font: 700 clamp(28px, 3.6vw, 40px)/1.08 var(--sans); letter-spacing: -.04em; margin-top: 14px; max-width: 22ch; text-wrap: balance; }
.lede { font: 400 17.5px/1.6 var(--sans); color: var(--body); margin-top: 20px; max-width: 44ch; text-wrap: pretty; }
.intro { font: 400 16px/1.6 var(--sans); color: var(--body); margin-top: 14px; max-width: 52ch; text-wrap: pretty; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 11px; padding: 15px 22px; border-radius: 14px; font: 600 15px/1 var(--sans); letter-spacing: -.01em; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-hover); color: var(--paper); }
.btn-outline { border: 1px solid rgba(33, 29, 23, .2); color: var(--body-strong); }
.btn-outline:hover { background: rgba(255, 255, 255, .55); color: var(--body-strong); }
.btn-orange { padding: 16px 24px; background: var(--accent-light); color: var(--ink); font-weight: 700; gap: 10px; }
.btn-orange:hover { background: var(--accent-light-hover); color: var(--ink); }
.btn-ghost { padding: 16px 24px; border: 1px solid rgba(253, 250, 243, .26); color: var(--paper); }
.btn-ghost:hover { background: rgba(253, 250, 243, .08); color: var(--paper); }
.btn-row { display: flex; gap: 11px; margin-top: 30px; flex-wrap: wrap; }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 48px; align-items: center; padding-top: 36px; padding-bottom: 20px; }
.stats { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.stat { display: flex; align-items: baseline; gap: 7px; }
.stat b { font: 700 19px/1 var(--sans); }
.stat span { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--body); }

.illo-wrap { display: flex; justify-content: center; min-width: 0; }
@media (max-width: 340px) { .illo { transform: scale(.85); transform-origin: top center; } }
.illo { position: relative; width: 288px; height: 288px; animation: fd-float 7s ease-in-out infinite; }
@keyframes fd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .illo { animation: none; } }
.illo .sheet { position: absolute; left: 72px; top: 0; width: 216px; height: 288px; border-radius: 4px; background: linear-gradient(150deg, #fdfaf3, #f5f0e3); box-shadow: 0 26px 50px -22px rgba(60, 48, 30, .55), 0 2px 6px rgba(60, 48, 30, .16); }
.illo .grid { position: absolute; left: 72px; top: 0; width: 216px; height: 288px; border-radius: 4px; background-image: repeating-linear-gradient(90deg, rgba(90, 74, 48, .13) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(90, 74, 48, .13) 0 1px, transparent 1px 72px); }
.tile { position: absolute; width: 42px; height: 42px; border-radius: 6px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; font: 700 20px/1 var(--sans); }
.t1 { background: rgba(33, 29, 23, .05); border-color: rgba(33, 29, 23, .26); color: var(--ink); }
.t2 { background: #f1e3ce; border-color: #dcc6a4; color: #3a2f20; }
.t4 { background: #eccfa6; border-color: #d8b37c; color: #39291a; }
.t8 { background: #e7a86a; border-color: #d1914e; color: #2c2116; }
.illo .contact { position: absolute; left: 72px; top: 5px; width: 54px; height: 278px; background: rgba(52, 38, 16, .3); filter: blur(9px); border-radius: 6px; }
.illo .flap { position: absolute; left: 0; top: 0; width: 72px; height: 288px; border-radius: 4px; background: linear-gradient(104deg, #fdfaf3 0%, #f0e9d9 62%, #e5dcc8 100%); box-shadow: 0 22px 34px -14px rgba(60, 48, 30, .5); transform: perspective(900px) rotateY(46deg); transform-origin: 100% 50%; }
.illo .flap .lines { position: absolute; inset: 0; border-radius: 4px; background-image: repeating-linear-gradient(0deg, rgba(90, 74, 48, .13) 0 1px, transparent 1px 72px); }
.illo .flap .shine { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .42) 54%, rgba(255, 255, 255, 0) 80%); }
.illo .crease { position: absolute; left: 71px; top: -10px; width: 2px; height: 308px; background: rgba(179, 90, 42, .85); border-radius: 2px; }

/* Sections */
.section { padding-top: 72px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; margin-top: 34px; }
.card { padding: 24px; border-radius: 19px; background: var(--card); border: 1px solid var(--card-border); }
.card .diagram { position: relative; width: 100%; height: 112px; display: flex; align-items: center; justify-content: center; }
.card h3 { font: 600 17.5px/1.25 var(--sans); letter-spacing: -.02em; margin-top: 8px; }
.card p { font: 400 14.5px/1.6 var(--sans); color: var(--body); margin-top: 8px; text-wrap: pretty; }
.mini { position: relative; border-radius: 3px; background: linear-gradient(150deg, #fdfaf3, #f4eee0); box-shadow: 0 10px 20px -10px rgba(60, 48, 30, .5); }
.mini .lines { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 56px); }
.mini .tile { width: 42px; height: 42px; border-radius: 5px; font-size: 18px; }
.mini .crease { position: absolute; top: -9px; width: 2px; height: 74px; background: rgba(179, 90, 42, .8); border-radius: 2px; }
.solved { width: 64px; height: 64px; border-radius: 6px; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 22px -10px rgba(120, 52, 18, .7); font: 700 26px/1 var(--sans); color: var(--paper); letter-spacing: -.03em; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.feature { padding: 28px; border-radius: 19px; background: var(--card); border: 1px solid var(--card-border); }
.feature .eyebrow { font-size: 10px; letter-spacing: .18em; }
.feature h3 { font: 700 25px/1.1 var(--sans); letter-spacing: -.035em; margin-top: 13px; }
.feature p { font: 400 14.5px/1.6 var(--sans); color: var(--body); margin-top: 11px; text-wrap: pretty; }
.feature.dark { background: var(--ink); border: 0; }
.feature.dark .eyebrow { color: var(--accent-light); }
.feature.dark h3 { color: var(--paper); }
.feature.dark p { color: var(--on-dark); }
.feature.accent { background: rgba(179, 90, 42, .1); border: 1px solid rgba(179, 90, 42, .28); }
.stars { display: flex; gap: 5px; font: 400 19px/1 var(--sans); color: var(--accent); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; margin-top: 30px; }
.plan { position: relative; padding: 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--hairline); }
.plan .name { font: 600 15px/1 var(--sans); }
.plan .price { font: 700 34px/1 var(--sans); letter-spacing: -.04em; margin-top: 14px; }
.plan .note { font: 400 12.5px/1.4 var(--sans); color: var(--body); margin-top: 8px; }
.plan ul { margin: 14px 0 0; padding: 0; list-style: none; font: 400 13.5px/1.55 var(--sans); color: var(--body); }
.plan li::before { content: '· '; color: var(--accent); }
.plan.featured { background: var(--paper); border: 1.5px solid var(--accent); box-shadow: 0 16px 34px -20px rgba(60, 48, 30, .6); }
.plan.featured .price { color: var(--accent-text); }
.badge { position: absolute; top: -11px; left: 22px; padding: 4px 9px; border-radius: 7px; background: var(--accent); font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }

.panel { padding: clamp(32px, 5vw, 58px); border-radius: 24px; background: linear-gradient(160deg, var(--ink), var(--ink-alt)); text-align: center; }
.panel .mark { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.panel h2 { font: 700 clamp(26px, 3.6vw, 38px)/1.1 var(--sans); letter-spacing: -.04em; color: var(--paper); margin-top: 20px; text-wrap: balance; }
.panel p { font: 400 15.5px/1.6 var(--sans); color: var(--on-dark); margin: 13px auto 0; max-width: 44ch; text-wrap: pretty; }
.panel .btn-row { justify-content: center; margin-top: 26px; }
.fine { font: 400 11px/1 var(--mono); letter-spacing: .1em; color: var(--on-dark-fine); margin-top: 20px; }

/* Footer */
.footer { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--hairline); margin-top: 64px; padding-top: 52px; padding-bottom: 56px; }
.footer .stamp { display: flex; align-items: center; gap: 10px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--body); }
.footer .links { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.footer .links a { font: 500 13px/1 var(--sans); color: var(--body); }
.footer .links a:hover { color: var(--ink); }

/* Long-form pages: support, privacy */
.doc { max-width: 720px; padding-top: 28px; padding-bottom: 8px; }
.doc .h1 { font-size: clamp(36px, 5vw, 52px); }
.doc .meta { font: 400 11px/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--body); margin-top: 18px; }
.doc .lede { max-width: 60ch; }
.doc h2 { font: 700 clamp(22px, 2.6vw, 28px)/1.15 var(--sans); letter-spacing: -.03em; margin-top: 52px; text-wrap: balance; }
.doc h3 { font: 600 17.5px/1.3 var(--sans); letter-spacing: -.02em; margin-top: 30px; }
.doc p, .doc li { font: 400 16px/1.65 var(--sans); color: var(--body); text-wrap: pretty; }
.doc p { margin-top: 12px; }
.doc ul { margin: 12px 0 0; padding-left: 20px; }
.doc li { margin-top: 6px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 16px; font: 400 14.5px/1.5 var(--sans); color: var(--body); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); }
.doc th { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); padding-top: 0; }
.doc .callout { margin-top: 22px; padding: 22px 24px; border-radius: 19px; background: var(--card); border: 1px solid var(--card-border); }
.doc .callout p { margin-top: 8px; }
.doc .callout p:first-child { margin-top: 0; }
.doc .contact { margin-top: 28px; padding: 26px 28px; border-radius: 19px; background: var(--ink); }
.doc .contact .eyebrow { color: var(--accent-light); }
.doc .contact h3 { color: var(--paper); margin-top: 12px; }
.doc .contact p { color: var(--on-dark); }
.doc .contact a.btn { margin-top: 18px; }
.doc .toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.doc .toc a { padding: 9px 13px; border-radius: 13px; background: var(--card); border: 1px solid var(--card-border); font: 500 12.5px/1 var(--sans); color: var(--body); }
.doc .toc a:hover { background: var(--paper); color: var(--ink); }
.doc code { font: 400 .92em var(--mono); background: rgba(33, 29, 23, .06); padding: 1px 5px; border-radius: 5px; }