/* ============================================================
   TRACE — SHARED DESIGN SYSTEM (base.css)
   Single source of truth for tokens, reset, nav, buttons,
   and footer across index / product / pricing / access.
   Page-specific rules stay in each page's inline <style>.
   ============================================================ */

:root{
  --paper:      #F7F7F5;   /* app --bg-default (light) */
  --paper-2:    #EBEBE7;   /* deeper neutral tint panels */
  --ink:        #121212;   /* app dark — neutral, no tint (panels, footer, buttons) */
  --ink-warm:   #3A3C4A;   /* app --text-dark — display titles on light (matches original home page) */
  --ink-card:   #1C1C1C;   /* app --bg-paper — cards on dark */
  --ink-border: rgba(255,255,255,0.08);
  --cream:      #ECE9E3;   /* on-dark text */
  --ink-soft:   rgba(18,18,18,0.68);
  --ink-mute:   rgba(18,18,18,0.45);
  --cream-soft: rgba(236,233,227,0.68);
  --cream-mute: rgba(236,233,227,0.42);
  --accent:     #5338FF;
  --accent-tint:#E9E5FF;
  --line:       rgba(18,18,18,0.10);

  --display: 'Bricolage Grotesque', 'Usual', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', 'SF Mono', ui-monospace, monospace;

  --r-tag: 5px;
  --r-btn: 6px;
  --r-card: 8px;
  --r-panel: 10px;
  --r-full: 9999px;

  --max-w: 1240px;
  --gutter: 20px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

h1,h2,h3,.disp{
  font-family:var(--display);
  font-weight:800;
  line-height:1.0;
  letter-spacing:-0.015em;
  text-wrap:balance;
  color:var(--ink-warm);
}
p{ text-wrap:pretty; }

.container{ max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); }

/* ---- scroll reveal (name deliberately NOT .reveal) ---- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.rv.rv-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
}

/* ============ NAV — three-zone, Palmetto-style ============ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(247,247,245,0.88);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter);
  height:64px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.nav__links{ display:flex; gap:26px; justify-self:center; }
.nav__links a{ position:relative; font-weight:600; font-size:.95rem; color:var(--ink); opacity:.85; transition:opacity .18s ease; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .22s ease; }
.nav__links a:hover, .nav__links a[aria-current="page"]{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ color:var(--accent); }
.nav__logo{ justify-self:start; }
.nav__logo img{ height:17px; width:auto; display:block; }
.nav__right{ display:flex; gap:10px; align-items:center; justify-self:end; }
.nav__ghost{ font-weight:600; font-size:.95rem; padding:9px 14px; border-radius:var(--r-btn); transition:background .18s ease; }
.nav__ghost:hover{ background:rgba(18,18,18,0.06); }

.btn{
  display:inline-block;
  font-weight:600; font-size:.92rem;
  padding:9px 16px;
  border-radius:var(--r-btn);
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  text-align:center;
}
.btn:hover{ transform:translateY(-1px); }
.btn--ink{ background:var(--ink); color:var(--cream); }
.btn--ink:hover{ background:#000; }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:#4128E0; }
.btn--cream{ background:var(--cream); color:var(--ink); }
.btn--cream:hover{ background:#fff; }
.btn--outline{ border:1.5px solid var(--ink); padding:7.5px 14.5px; }
.btn--outline:hover{ background:var(--ink); color:var(--cream); }
.btn--lg{ font-size:.98rem; padding:11px 20px; }
.btn--outline.btn--lg{ padding:9.5px 18.5px; }

.nav__burger{ display:none; justify-self:end; width:40px; height:40px; position:relative; }
.nav__burger span{ position:absolute; left:9px; right:9px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease; }
.nav__burger span:nth-child(1){ top:13px; } .nav__burger span:nth-child(2){ top:19px; } .nav__burger span:nth-child(3){ top:25px; }
.nav__burger.open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ top:19px; transform:rotate(-45deg); }
.nav__drawer{ display:none; }

/* ---- shared utilities (used by access; generic) ---- */
.container--narrow{ max-width:820px; }
.btn--outline-cream{ border:1.5px solid var(--cream-mute); color:var(--cream); padding:7.5px 14.5px; }
.btn--outline-cream:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--outline.btn--lg, .btn--outline-cream.btn--lg{ padding:9.5px 18.5px; }
.doc-link{ display:inline-block; font-weight:600; font-size:.95rem; color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-mute); text-decoration-thickness:1.5px; text-underline-offset:5px; transition:text-decoration-color .18s ease; }
.doc-link:hover{ text-decoration-color:var(--ink); }
.panel--ink .doc-link, .cta .doc-link{ color:var(--cream); text-decoration-color:var(--cream-mute); }
.panel--ink .doc-link:hover, .cta .doc-link:hover{ text-decoration-color:var(--cream); }
/* button + doc-link centred on one row */
.action-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

.footer{ background:var(--ink); color:var(--cream); margin-top:12px; padding:clamp(48px,6vw,72px) 0 36px; }
.footer__nav{ display:flex; gap:8px 30px; flex-wrap:wrap; justify-content:center; }
.footer__nav a{ font-weight:600; font-size:.95rem; color:var(--cream); opacity:.8; transition:opacity .18s ease; }
.footer__nav a:hover{ opacity:1; }
.footer__mark{ margin:clamp(40px,5vw,64px) auto; width:min(520px, 72%); }
.footer__mark img{ width:100%; height:auto; display:block; filter:brightness(0) invert(1); opacity:.95; }
.footer__legal{
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center;
  padding-top:26px; border-top:1px solid var(--ink-border);
  font-size:.8rem; color:var(--cream-mute); text-align:center;
}
.footer__legal a:hover{ color:var(--cream); }
.footer__cb{
  display:flex; align-items:center; gap:12px; justify-content:center;
  margin-top:22px;
  font-size:.82rem; color:var(--cream-mute);
  flex-wrap:wrap;
}
.footer__cb img{ height:15px; width:auto; opacity:.7; display:block; }
.footer__cb a:hover{ color:var(--cream); }

/* ============ Legal pages ============ */
.legal-hero{
  padding:clamp(72px, 10vw, 132px) 0 clamp(32px, 4vw, 52px);
  border-bottom:1px solid var(--line);
}
.legal-shell{ max-width:980px; }
.legal-hero h1{
  font-size:clamp(2.7rem, 6vw, 5.8rem);
  max-width:12ch;
  margin:0;
}
.legal-intro{
  max-width:720px;
  margin-top:22px;
  color:var(--ink-soft);
  font-size:1.08rem;
  line-height:1.55;
}
.legal-date{
  display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
  margin-top:18px;
  color:var(--ink-soft);
  font-size:1.05rem;
}
.legal-date span:first-child{ font-weight:700; color:var(--ink); }
.legal-main{ padding:clamp(38px, 6vw, 76px) 0 clamp(72px, 8vw, 112px); }
.legal-copy{
  background:#FCFCFB;
  border:1px solid rgba(18,18,18,0.08);
  border-radius:var(--r-panel);
  padding:clamp(28px, 5vw, 64px);
  color:var(--ink-soft);
  box-shadow:0 22px 60px -48px rgba(18,18,18,0.45);
}
.legal-copy p,
.legal-copy li{
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.72;
  text-wrap:auto;
}
.legal-copy p{ margin:0 0 1rem; }
.legal-copy strong{ color:var(--ink); font-weight:700; }
.legal-copy em{ color:var(--ink); }
.legal-copy a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.legal-copy figure{
  float:right;
  max-width:118px;
  margin:0 0 24px 28px;
}
.legal-copy figure img{ border-radius:var(--r-card); }
.legal-copy ol{
  counter-reset:item;
  list-style:none;
  padding-left:0;
  margin:1rem 0;
}
.legal-copy ol > li{
  counter-increment:item;
  position:relative;
  padding-left:3rem;
  margin:0 0 .9rem;
}
.legal-copy ol ol > li{ padding-left:4rem; }
.legal-copy ol > li::before{
  content:counters(item, ".") " ";
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  color:var(--ink);
  font-weight:700;
}
.legal-copy > ol > li::before{ content:counters(item, ".") ". "; }
.legal-copy ul{
  list-style:none;
  padding-left:0;
  margin:1rem 0;
}
.legal-copy ul > li{
  list-style:none;
  padding-left:0;
  margin:0 0 .75rem;
}
.legal-copy .w-embed{ overflow-x:auto; margin:1.25rem 0; }
.legal-copy table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  color:var(--ink-soft);
  font-size:.92rem;
  line-height:1.55;
}
.legal-copy th,
.legal-copy td{
  text-align:left;
  vertical-align:top;
  border:1px solid rgba(18,18,18,0.12);
  padding:14px 16px;
}
.legal-copy th{
  background:var(--paper-2);
  color:var(--ink);
  font-weight:700;
}
.legal-copy td ul{ margin:0; }
.legal-copy td li{ font-size:.92rem; line-height:1.55; margin-bottom:.45rem; }
.legal-copy > *:first-child{ margin-top:0; }
.legal-copy > *:last-child{ margin-bottom:0; }

/* ============ Responsive — shared nav → burger/drawer ============
   Page-specific responsive rules live in each page's inline <style>. */
@media (max-width: 720px){
  .nav__inner{ grid-template-columns:auto 1fr auto; }
  .nav__links, .nav__right{ display:none; }
  .nav__logo{ justify-self:start; }
  .nav__burger{ display:block; }
  .nav__drawer{
    display:flex; flex-direction:column; gap:6px;
    position:fixed; top:64px; left:0; right:0; z-index:55;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:18px var(--gutter) 24px;
    transform:translateY(-110%); transition:transform .3s cubic-bezier(.2,.6,.2,1);
  }
  .nav__drawer.open{ transform:none; }
  .nav__drawer a{ font-weight:600; padding:12px 6px; font-size:1.05rem; }
  .nav__drawer .primary{ background:var(--ink); color:var(--cream); border-radius:var(--r-btn); text-align:center; margin-top:8px; padding:13px; }
  .nav__drawer .ghost{ border:1.5px solid var(--ink); border-radius:var(--r-btn); text-align:center; margin-top:8px; padding:11.5px; }
  .legal-hero h1{ max-width:100%; }
  .legal-copy{ padding:24px 18px; }
  .legal-copy p,
  .legal-copy li{ font-size:.94rem; line-height:1.68; }
  .legal-copy ol > li{ padding-left:2.45rem; }
  .legal-copy ol ol > li{ padding-left:3.15rem; }
  .legal-copy figure{ float:none; margin:0 0 22px; }
}