/* Hallmark · shape: Catalogue · genre: editorial · theme: Ink (deal 1/3, seed lead-response-agent-local-49a0) · redesign: full
 * hero: Settled · nav: wordmark + status pill + one ink action · footer: ruled mast · imagery: none (built lists) · signature: the channels as a ruled catalogue with teal "live" pills · ink: paper
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E1 S2 R2 V2 · weakest: resting shadows dropped for flat paper; teal reserved for in/live state only */
/* waive 22 · ink and greys at zero chroma · a notice board is printed in plain black */
/* CloseReply shared design system — Ink. White paper, hueless black, one teal that means live.
   Legacy dark-theme token names remapped to the Ink palette so old markup re-themes. */
@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  color-scheme:light;
  /* ── Ink palette ────────────────────────────────────────────────────── */
  --color-paper:oklch(98.4% 0.008 85);--color-paper-2:oklch(96.3% 0.011 82);--color-paper-3:oklch(93.4% 0.013 80);
  --color-ink:oklch(25% 0.02 55);--color-ink-2:oklch(36% 0.02 58);--color-muted:oklch(51% 0.018 62);
  --color-rule:oklch(88% 0.012 78);--color-rule-2:oklch(92% 0.01 80);
  --color-accent:oklch(56% 0.12 196);--color-accent-ink:oklch(99% 0.006 90);--color-accent-soft:oklch(91% 0.06 192);--color-accent-soft-ink:oklch(32% 0.07 198);
  --color-warm:oklch(70% 0.145 62);--color-warm-ink:oklch(32% 0.09 55);--color-warm-soft:oklch(92% 0.06 72);--color-warm-soft-ink:oklch(40% 0.1 55);
  --color-focus:oklch(56% 0.12 196);
  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-display:"Epilogue",ui-sans-serif,system-ui,sans-serif;--font-body:var(--font-display);
  --font-outlier:"IBM Plex Mono",ui-monospace,monospace;
  --display-weight:700;--tracking-display:-0.04em;
  --text-xs:0.8125rem;--text-sm:0.9rem;--text-md:1.02rem;--text-lg:1.25rem;
  --text-title:clamp(1.25rem,0.75vw + 0.9rem,1.6rem);--text-lead:clamp(1.1rem,0.4vw + 1rem,1.35rem);
  --text-section:clamp(2rem,2.6vw + 1rem,3.4rem);--text-display:clamp(2.9rem,5.4vw + 1rem,5.4rem);--text-display-s:clamp(2.2rem,3.6vw + 0.6rem,3.6rem);
  /* ── Space / layout / motion ────────────────────────────────────────── */
  --space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--space-3xl:96px;--space-4xl:144px;
  --container:1140px;--gutter:48px;--gap-columns:20px;
  --section-gap-s:80px;--section-gap:104px;--section-gap-l:136px;
  --radius-card:12px;--radius-input:10px;--radius-pill:999px;--rule-hair:1px;--radius:12px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-micro:120ms;--dur-short:220ms;--dur-long:420ms;--z-nav:300;--z-modal:400;
  --shadow-card:0 20px 40px oklch(20% 0 0 / 0.16);

  /* ── Legacy aliases remapped to Ink (flat paper, no resting shadow) ───── */
  --bg:var(--color-paper);--surface:var(--color-paper-2);--surface2:var(--color-paper-3);
  --glass:var(--color-paper-2);--glass2:var(--color-paper-3);
  --border:var(--color-rule);--border2:var(--color-rule);
  --text:var(--color-ink);--muted:var(--color-muted);--muted2:var(--color-ink-2);
  --brand:var(--color-accent);--brand2:var(--color-accent);--brand3:var(--color-accent);
  --green:var(--color-accent);--green-light:var(--color-accent);
  --green-dim:var(--color-accent-soft);--green-glow:var(--color-accent-soft);
  --gold:var(--color-ink);--purple:var(--color-accent);
  --grad:var(--color-ink);--grad-soft:var(--color-ink);--grad-text:var(--color-ink);
  --shadow:none;--shadow-glow:none;
  /* Coral-era token aliases → Ink, so templates built in the Coral pass render flat/Ink */
  --color-cotton:var(--color-paper-2);--color-desk:var(--color-warm-soft);--color-print:var(--color-ink-2);
  --color-board:var(--color-ink);--color-board-type:var(--color-paper);
  --color-accent-2:var(--color-accent);--color-accent-soft-2:var(--color-warm-soft);--color-paid:var(--color-accent);--color-gold:var(--color-warm);--color-accent-3:var(--color-warm);
  --radius-stock:var(--radius-input);
  --edge-stock:inset 0 0 0 1px var(--color-rule);--cast-stock:0 0 #0000;--cast-stock-lift:0 10px 24px oklch(25% 0.02 55 / 0.08);--press-groove:inset 0 0 0 1px var(--color-rule);
  --shade:25% 0 0;--lit:100% 0 0;--deep:0% 0 0;
}

/* ── Base (Floor) ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--color-paper);color:var(--color-ink-2);font-family:var(--font-body);font-size:var(--text-md);
  font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--color-accent)}
::selection{background:var(--color-accent-soft);color:var(--color-accent-soft-ink)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:3px}
a{color:inherit;text-decoration:none;font-weight:600}
a:hover{text-decoration:underline;text-decoration-color:var(--color-accent)}
img,video,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--tracking-display);
  line-height:1.02;color:var(--color-ink);overflow-wrap:break-word;min-width:0;text-wrap:balance;font-synthesis:none}
p{text-wrap:pretty}
.fig,.num{font-family:var(--font-outlier);font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container,.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section,.sec{padding-block:var(--section-gap);position:relative}
.section-head{max-width:40rem;margin-bottom:var(--space-2xl)}
.section-head.center{margin-inline:auto;text-align:center}
.label,.lbl{display:inline-block;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;letter-spacing:0;text-transform:none;color:var(--color-muted);margin-bottom:var(--space-md)}
.title,.ttl{font-size:var(--text-section)}
.title .g,.ttl span,.g{color:var(--color-ink)}
.lead{font-size:var(--text-lead);line-height:1.5;color:var(--color-ink-2);max-width:52ch}
.muted{color:var(--color-muted)}

/* ── Controls (ink / paper pair, flat) ──────────────────────────────────── */
.btn,.btn-primary,.btn-green,.nav-cta,.pbtn,.cta-btn,.btn-ghost,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-input);font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);
  cursor:pointer;text-align:center;background:var(--color-paper-2);color:var(--color-ink);text-decoration:none;
  transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.btn-primary,.btn-green,.nav-cta,.pbtn,.cta-btn,.btn--primary{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.nav-cta,.pbtn{min-height:40px;padding:0 18px}
.btn-primary:hover,.btn-green:hover,.nav-cta:hover,.pbtn:hover,.cta-btn:hover{background:var(--color-ink-2);color:var(--color-paper);text-decoration:none}
.btn-ghost:hover,.btn-secondary:hover{border-color:var(--color-ink);text-decoration:none}

/* ── Cards / wells / grids (flat paper) ─────────────────────────────────── */
.grid{display:grid;gap:var(--gap-columns)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.ch-card,.feat-card,a.ic,.well{background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);
  padding:26px;transition:border-color var(--dur-short) var(--ease-out)}
.card:hover,.ch-card:hover,.feat-card:hover,a.ic:hover{border-color:var(--color-ink)}
.card-icon,.ch-icon,.feat-icon,.ic-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-input);background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule);margin-bottom:16px}
.card-title,.ch-title,.feat-title,.ic-name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:8px;color:var(--color-ink)}
.card-desc,.ch-desc,.feat-desc,.ic-desc{font-size:var(--text-sm);color:var(--color-ink-2);line-height:1.6}

/* state tags/pills */
.badge,.feat-plan,.plan-tag,.tag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:600;padding:3px 10px;border-radius:var(--radius-pill);letter-spacing:0;text-transform:none;background:var(--color-paper-3);color:var(--color-ink-2)}
.tag--in,.badge-all,.feat-plan.all{background:var(--color-accent-soft);color:var(--color-accent-soft-ink)}
.tag--out{background:transparent;box-shadow:inset 0 0 0 1px var(--color-rule);color:var(--color-muted)}
.tag--on,.feat-plan.pro,.feat-plan.growth,.badge-pro,.badge-growth{background:var(--color-ink);color:var(--color-paper)}

/* ── Ruled list (the catalogue) ─────────────────────────────────────────── */
.ruled{border-top:var(--rule-hair) solid var(--color-ink)}
.ruled>*{border-bottom:var(--rule-hair) solid var(--color-rule)}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label,.form-label{font-size:var(--text-sm);font-weight:500;color:var(--color-ink-2)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=search],textarea,select{
  width:100%;min-height:46px;background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-input);
  padding:12px 14px;color:var(--color-ink);font-size:var(--text-md);transition:border-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
input::placeholder,textarea::placeholder{color:var(--color-muted)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
textarea{min-height:120px;resize:vertical}

/* ── Table ──────────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th,.table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--color-rule)}
.table thead th{border-bottom:1px solid var(--color-ink)}
.table th{font-family:var(--font-display);font-weight:600;color:var(--color-ink);text-transform:none;letter-spacing:0}
.table td{color:var(--color-ink-2)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer,footer.cr-footer{border-top:var(--rule-hair) solid var(--color-ink);padding-block:var(--space-3xl) var(--space-xl);margin-top:var(--section-gap)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:var(--space-2xl)}
.footer-col h4{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;margin-bottom:16px;color:var(--color-ink)}
.footer-col a{display:block;color:var(--color-muted);font-size:var(--text-sm);padding:5px 0;font-weight:400}
.footer-col a:hover{color:var(--color-ink)}
.footer-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:var(--rule-hair) solid var(--color-rule);color:var(--color-muted);font-size:var(--text-sm)}

/* ── Motion (state only) ────────────────────────────────────────────────── */
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.reveal{animation:up var(--dur-long) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){*:not(.keep-motion),*:not(.keep-motion)::before,*:not(.keep-motion)::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:60rem){:root{--gutter:24px;--section-gap-s:64px;--section-gap:80px;--section-gap-l:104px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-xl)}}
@media (max-width:40rem){:root{--gutter:16px;--section-gap-s:48px;--section-gap:64px;--gap-columns:14px}.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-lg)}}