/* ===== casebound.xyz — design system (light · navy + amber, Inter) ===== */

@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/assets/fonts/jbmono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/assets/fonts/jbmono-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  color-scheme:light;
  --bg:#ffffff;
  --bg-alt:#f4f6f9;
  --bg-navy:#1F3A5F;
  --bg-navy-deep:#16263d;
  --ink:#16263d;
  --text:#3a4658;
  --text-muted:#5b6676;
  --accent:#E8A33D;
  --accent-hover:#d8902a;
  --accent-ink:#8a5a10;
  --accent-soft:rgba(232,163,61,.14);
  --navy-soft:rgba(31,58,95,.06);
  --border:#e4e8ee;
  --danger:#b42318;
  --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --container:1120px;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(22,38,61,.06), 0 14px 34px rgba(22,38,61,.08);
  --shadow-sm:0 1px 2px rgba(22,38,61,.06), 0 5px 14px rgba(22,38,61,.05);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:1.0625rem; line-height:1.65; }
img,svg{ max-width:100%; height:auto; }
h1,h2,h3,h4{ font-family:var(--font-sans); color:var(--ink); line-height:1.16; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em; }
h1{ font-size:clamp(2.2rem,5vw,3.15rem); }
h2{ font-size:clamp(1.6rem,3.5vw,2.2rem); }
h3{ font-size:1.18rem; font-weight:700; }
p,ul,ol{ margin:0 0 1em; }
a{ color:var(--bg-navy); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover{ color:var(--accent-ink); }
strong{ color:var(--ink); }
::selection{ background:var(--accent); color:var(--bg-navy); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 1.5rem; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--bg-navy); color:#fff; padding:.5rem 1rem; z-index:100; }
.skip-link:focus{ left:0; }
.icon{ width:100%; height:100%; display:block; }
.muted{ color:var(--text-muted); }
.center{ text-align:center; }

/* ---- header ---- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.1rem; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); font-weight:700; text-decoration:none; }
.brand-logo{ width:2.1rem; height:2.1rem; border-radius:8px; display:block; }
.brand-name{ font-size:1.2rem; color:var(--ink); letter-spacing:-.01em; }
.nav-toggle{ display:none; }
.site-nav ul{ display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.site-nav a{ color:var(--text); font-size:.96rem; font-weight:600; padding:.2rem 0; text-decoration:none; }
.site-nav a:hover{ color:var(--bg-navy); }
.site-nav a.active{ color:var(--bg-navy); box-shadow:inset 0 -2px 0 var(--accent); }
.nav-cta a{ color:var(--bg-navy) !important; }
@media (max-width:820px){
  .js .nav-toggle{ display:inline-flex; align-items:center; gap:.4rem; background:none; border:1px solid var(--border); border-radius:8px; color:var(--ink); font:600 .9rem var(--font-sans); padding:.4rem .8rem; cursor:pointer; }
  .js .site-nav{ display:none; width:100%; }
  .js .site-nav.open{ display:block; padding:.5rem 0 .75rem; }
  .js .site-nav ul{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .nav-cta{ margin-top:.3rem; }
}

/* ---- buttons ---- */
.btn{ display:inline-block; font-weight:700; font-size:.98rem; border-radius:var(--radius-sm); padding:.72rem 1.45rem; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease, border-color .12s ease; }
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:var(--bg-navy); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--accent-hover); color:var(--bg-navy); }
.btn-ghost{ border-color:var(--border); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--bg-navy); color:var(--bg-navy); }
.btn-navy{ background:var(--bg-navy); color:#fff; }
.btn-navy:hover{ background:var(--bg-navy-deep); color:#fff; }
.btn-sm{ padding:.5rem 1rem; font-size:.92rem; }
.cta-row{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.7rem; align-items:center; }

/* ---- shared ---- */
.eyebrow{ text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; font-weight:700; color:var(--accent-ink); margin:0 0 .9rem; }
.lede{ font-size:1.2rem; color:var(--text-muted); max-width:46rem; line-height:1.6; }
.section{ padding:4.5rem 0; }
.section-tight{ padding:3rem 0; }
.section-alt{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-head{ max-width:44rem; margin-bottom:2.4rem; }
.section-head.center{ margin-left:auto; margin-right:auto; }
.badge{ display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent); border-radius:999px; padding:.3em .7em; }

/* ---- home hero ---- */
.hero{ padding:4.2rem 0 3.5rem; overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.hero-copy h1{ margin-bottom:.32em; }
.hero-art svg{ width:100%; height:auto; filter:drop-shadow(0 18px 36px rgba(22,38,61,.14)); }
@media (max-width:880px){ .hero-inner{ grid-template-columns:1fr; gap:2.2rem; } .hero-art{ max-width:440px; margin:0 auto; } }

/* ---- inner-page hero ---- */
.page-hero{ padding:3.6rem 0 1rem; }
.page-hero .lede{ margin-top:.5rem; }

/* ---- trust bar ---- */
.trust-bar{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt); }
.trust-bar ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.4rem; list-style:none; margin:0; padding:1rem 0; }
.trust-bar li{ display:inline-flex; align-items:center; gap:.5rem; color:var(--ink); font-weight:600; font-size:.95rem; }
.trust-bar .icon-wrap{ width:1.2rem; height:1.2rem; color:var(--accent-ink); flex:none; }

/* ---- cards ---- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:0; padding:0; list-style:none; }
.cards-2{ grid-template-columns:repeat(2,1fr); }
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); }
.card-icon{ display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:11px; background:var(--accent-soft); color:var(--bg-navy); margin-bottom:1.1rem; }
.card-icon .icon{ width:1.55rem; height:1.55rem; }
.card h3{ color:var(--ink); margin-bottom:.4rem; }
.card p{ margin:0; color:var(--text-muted); font-size:1rem; }
.card p + p{ margin-top:.6rem; }
@media (max-width:880px){ .cards,.cards-2{ grid-template-columns:1fr; } }

/* ---- process (how it works) ---- */
.process{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; list-style:none; margin:0; padding:0; counter-reset:step; }
.process li{ counter-increment:step; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); }
.process li::before{ content:counter(step); display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); border:1.5px solid var(--accent); font-weight:700; margin-bottom:1rem; }
.process strong{ display:block; color:var(--ink); font-size:1.1rem; font-weight:700; margin-bottom:.35rem; }
.process span{ color:var(--text-muted); font-size:.97rem; }
@media (max-width:760px){ .process{ grid-template-columns:1fr; } }

/* ---- feature groups (rows with icon + lists) ---- */
.feature{ border-top:1px solid var(--border); padding:2.6rem 0; }
.feature:first-of-type{ border-top:0; padding-top:.5rem; }
.feature-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.feature-ic{ flex:none; display:grid; place-items:center; width:3rem; height:3rem; border-radius:12px; background:var(--accent-soft); color:var(--bg-navy); }
.feature-ic .icon{ width:1.6rem; height:1.6rem; }
.feature-head h2{ margin:0; font-size:1.45rem; }
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-top:.4rem; }
.feature-grid h3{ text-transform:uppercase; letter-spacing:.07em; font-size:.78rem; color:var(--accent-ink); margin-bottom:.7rem; }
.feature-grid p{ color:var(--text-muted); font-size:.98rem; margin:0; }
.feature-grid ul{ list-style:none; margin:0; padding:0; color:var(--text-muted); font-size:.98rem; }
@media (max-width:820px){ .feature-grid{ grid-template-columns:1fr; } }

/* check bullets (CSS mask of a same-origin svg — CSP-clean) */
.check-list{ list-style:none; margin:0 0 1em; padding:0; }
.feature-grid ul li, .check-list li{ position:relative; padding-left:1.7rem; margin-bottom:.55rem; color:var(--text-muted); }
.feature-grid ul li::before, .check-list li::before{ content:""; position:absolute; left:0; top:.35em; width:1.05rem; height:1.05rem; background-color:var(--accent-ink); -webkit-mask:url(/assets/img/icon-check.svg) no-repeat center / contain; mask:url(/assets/img/icon-check.svg) no-repeat center / contain; }

/* ---- highlight panel (legal production / privacy) ---- */
.panel{ background:var(--accent-soft); border:1px solid var(--accent); border-left:4px solid var(--accent); border-radius:var(--radius); padding:2rem 2.1rem; }
.panel h2{ margin-top:0; }
.panel.navy{ background:var(--bg-navy); border-color:var(--bg-navy-deep); border-left-color:var(--accent); color:#dbe4ef; }
.panel.navy h2{ color:#fff; }
.panel.navy strong{ color:#fff; }
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.6rem; align-items:center; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:1.6rem; } }

/* ---- navy CTA band ---- */
.cta-band{ background:var(--bg-navy); color:#fff; border-radius:var(--radius); padding:3rem 2rem; text-align:center; box-shadow:var(--shadow); }
.cta-band h2{ color:#fff; margin-bottom:.3em; }
.cta-band p{ color:#c7d2e0; max-width:40rem; margin:0 auto 1.4rem; }
.cta-band .cta-row{ justify-content:center; }

/* ---- pricing ---- */
.pricing-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; max-width:48rem; margin:0 auto; align-items:start; }
.price-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.price-card.featured{ border:2px solid var(--accent); box-shadow:var(--shadow); }
.price-card .tier{ font-weight:700; color:var(--ink); font-size:1.2rem; }
.price-card .tier-sub{ color:var(--text-muted); font-size:.95rem; margin:.2rem 0 1.1rem; }
.price{ display:flex; align-items:baseline; gap:.35rem; margin-bottom:.2rem; }
.price .amount{ font-size:2.6rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.price .per{ color:var(--text-muted); font-weight:600; }
.price-note{ color:var(--text-muted); font-size:.9rem; margin:0 0 1.3rem; }
.price-card .check-list{ flex:1 0 auto; }
.price-card .btn{ width:100%; text-align:center; }
@media (max-width:680px){ .pricing-grid{ grid-template-columns:1fr; } }

/* ---- faq (accordion) ---- */
.faq{ max-width:46rem; margin:0 auto; }
.faq details{ border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; margin-bottom:.8rem; box-shadow:var(--shadow-sm); }
.faq summary{ cursor:pointer; list-style:none; padding:1.1rem 1.3rem; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent-ink); font-weight:700; font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"\2212"; }
.faq details > p{ margin:0; padding:0 1.3rem 1.2rem; color:var(--text-muted); }

/* ---- download ---- */
.dl-box{ background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:2.2rem; text-align:center; max-width:34rem; margin:0 auto 2.5rem; }
.dl-box .req{ color:var(--text-muted); font-size:.92rem; margin:.9rem 0 0; }
.dl-note{ display:inline-block; background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent); border-radius:999px; padding:.25rem .8rem; font-size:.82rem; font-weight:700; margin-bottom:1.2rem; }
.steps{ list-style:none; margin:0; padding:0; counter-reset:ns; max-width:40rem; }
.steps li{ position:relative; padding:.75rem 0 .75rem 2.8rem; counter-increment:ns; color:var(--text-muted); border-bottom:1px solid var(--border); }
.steps li:last-child{ border-bottom:0; }
.steps li::before{ content:counter(ns); position:absolute; left:0; top:.7rem; width:1.8rem; height:1.8rem; border-radius:50%; display:grid; place-items:center; background:var(--bg-navy); color:#fff; font:700 .85rem var(--font-sans); }
.steps strong{ color:var(--ink); }
.reqs{ list-style:none; margin:0; padding:0; }
.reqs li{ padding:.5rem 0; border-bottom:1px solid var(--border); color:var(--text-muted); display:flex; justify-content:space-between; gap:1rem; }
.reqs li:last-child{ border-bottom:0; }
.reqs span{ color:var(--ink); font-weight:600; }
.mono{ font-family:var(--font-mono); }

/* ---- footer (navy) ---- */
.site-footer{ background:var(--bg-navy); color:#c7d2e0; margin-top:4rem; padding:3rem 0; }
.footer-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; list-style:none; margin:0 0 1.1rem; padding:0; }
.footer-nav a{ color:#dbe4ef; font-size:.95rem; font-weight:600; text-decoration:none; }
.footer-nav a:hover{ color:#fff; }
.footer-note{ color:#9fb0c4; font-size:.92rem; max-width:44rem; }
.footer-copy{ color:#9fb0c4; font-size:.88rem; margin:0; }
.footer-copy a{ color:var(--accent); }

/* ---- 404 ---- */
.error-page{ text-align:center; padding:6rem 1.5rem; max-width:40rem; margin:0 auto; }
.error-code{ font-weight:700; font-size:clamp(4rem,14vw,7rem); line-height:1; color:var(--accent); margin:0 0 .5rem; letter-spacing:-.03em; }
.error-page h1{ font-size:1.8rem; }
.error-page p{ color:var(--text-muted); }

/* ---- legal docs ---- */
.legal{ max-width:48rem; }
.legal h2{ font-size:1.32rem; margin-top:2.3rem; scroll-margin-top:5rem; }
.legal h3{ font-size:1.05rem; margin-top:1.5rem; }
.legal p, .legal li{ color:var(--text); }
.legal ul, .legal ol{ padding-left:1.2rem; margin-bottom:1.1rem; }
.legal li{ margin-bottom:.5rem; }
.legal .updated{ color:var(--text-muted); font-size:.92rem; margin-bottom:0; }
.legal .toc{ background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1.1rem 1.3rem 1.1rem 2.6rem; margin:1.6rem 0 2.2rem; }
.legal .toc li{ margin-bottom:.35rem; }
.legal .callout{ background:var(--accent-soft); border:1px solid var(--accent); border-left:4px solid var(--accent); border-radius:var(--radius-sm); padding:1rem 1.25rem; margin:1.5rem 0; }
.legal .callout p:last-child{ margin-bottom:0; }
.legal .callout strong{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
  .btn:hover{ transform:none; }
}