/* ============================================================
   Deftly legal pages: shared stylesheet.
   Tokens, type scale and components copied from the live
   homepage (public/index.html) so the legal pages sit in the
   same visual system. Plain static CSS, no build step.
   ============================================================ */

:root{
  /* Brand foundation */
  --cream:        #F7F3EE;
  --warm-alt:     #EDE8E1;
  --surface:      #FFFFFF;
  --text:         #1E1E1E;
  --text-2:       #6B6560;
  --muted:        #9B9590;
  --border:       #DDD8D2;
  --sage:         #7D8B75;
  --sage-hover:   #6B7965;
  --sage-text:    #56624F;
  --green:        #374231;
  --green-deep:   #2F3A29;
  --on-green:     #F3EFE8;
  --terracotta:   #B5564D;

  /* Derived */
  --hairline:     rgba(30,30,30,0.10);
  --sage-tint:    rgba(125,139,117,0.12);
  --green-shadow: rgba(47,58,41,0.18);

  /* Type scale (fluid) */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --step-4:  clamp(2.6rem, 2.05rem + 2.75vw, 4.6rem);

  /* Layout */
  --maxw: 1180px;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 14px;
  --radius-sm: 9px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--text);
  background-color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Paper grain, same as the homepage */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--text);
  font-optical-sizing:auto;
}
p{ margin:0; }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:1;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--sage);
  outline-offset:3px;
  border-radius:6px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible{
  outline-color:var(--on-green);
}

/* Skip link */
.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--green); color:var(--on-green);
  padding:0.7rem 1.1rem; border-radius:0 0 8px 0;
  font-size:var(--step--1); text-decoration:none;
}
.skip:focus{ left:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:"DM Sans", sans-serif;
  font-size:var(--step-0); font-weight:500; line-height:1;
  padding:0.95rem 1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--green); color:var(--on-green); }
.btn-primary:hover{ background:var(--green-deep); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--text); transform:translateY(-1px); }

/* ============================================================
   DRAFT BANNER
   Delete the two lines marked DRAFT-DELETE in each legal page
   to publish. This CSS can stay; it does nothing once the
   banner element is gone.
   ============================================================ */
.draft-banner{
  position:relative; z-index:5;
  background:var(--terracotta);
  color:#fff;
  font-size:var(--step--1);
  font-weight:500;
  line-height:1.5;
  letter-spacing:0.01em;
  padding:0.85rem var(--gutter);
  text-align:center;
}
.draft-banner strong{ text-transform:uppercase; letter-spacing:0.12em; font-weight:600; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:relative; z-index:10;
  border-bottom:1px solid var(--border);
  background:rgba(247,243,238,0.97);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  height:72px;
}
.wordmark{
  font-family:"Fraunces", serif;
  font-weight:600; font-size:1.6rem;
  letter-spacing:-0.025em; text-transform:lowercase;
  color:var(--text); text-decoration:none; line-height:1;
}
.wordmark .dot{ color:var(--sage); }
.nav-back{
  font-size:var(--step--1); font-weight:500;
  color:var(--text-2); text-decoration:none;
  transition:color .3s var(--ease);
}
.nav-back:hover{ color:var(--text); }

/* ============================================================
   PAGE HEAD
   ============================================================ */
.legal-head{ padding-block:clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.25rem); }
.legal-head h1{ font-size:var(--step-3); max-width:20ch; }
.eyebrow{
  font-family:"DM Sans", sans-serif;
  font-size:var(--step--1); font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--sage-text);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:0.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px;
  background:var(--sage-text); display:inline-block;
}
.legal-meta{
  margin-top:1.25rem;
  font-size:var(--step--1);
  color:var(--text-2);
}
.legal-lede{
  margin-top:1.25rem;
  max-width:var(--measure);
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--text-2);
}

/* Cross-links between the legal pages */
.legal-nav{
  list-style:none; margin:2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:0.6rem;
}
.legal-nav a{
  display:inline-block;
  font-size:var(--step--1); font-weight:500;
  text-decoration:none;
  color:var(--sage-text);
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:999px;
  padding:0.45rem 1rem;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.legal-nav a:hover{ border-color:var(--sage); color:var(--text); }
.legal-nav a[aria-current="page"]{
  background:var(--sage-tint);
  border-color:var(--sage);
  color:var(--text);
}

/* ============================================================
   BODY COPY
   ============================================================ */
.prose{
  max-width:var(--measure);
  padding-bottom:clamp(3rem, 7vw, 5.5rem);
}
.prose section{ padding-top:clamp(2rem, 4.5vw, 3rem); }
.prose h2{
  font-size:var(--step-2);
  margin-bottom:1rem;
  scroll-margin-top:1.5rem;
}
.prose h3{
  font-size:var(--step-1);
  margin:1.9rem 0 0.6rem;
}
.prose p + p,
.prose ul + p,
.prose ol + p,
.prose p + ul,
.prose p + ol,
.prose .callout + p{ margin-top:1rem; }
.prose ul, .prose ol{
  margin:1rem 0 0;
  padding-left:1.35rem;
}
.prose li{ margin-bottom:0.6rem; }
.prose li:last-child{ margin-bottom:0; }
.prose a{ color:var(--sage-text); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--text); }
.prose strong{ font-weight:600; }

/* Numbered top-level sections */
.prose section > h2 .num{
  font-family:"DM Sans", sans-serif;
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:0.1em;
  color:var(--sage);
  display:block;
  margin-bottom:0.5rem;
}

/* Emphasis card */
.callout{
  margin-top:1.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--sage);
  border-radius:var(--radius-sm);
  padding:1.1rem 1.25rem;
}
.callout p + p{ margin-top:0.75rem; }
.callout-warn{ border-left-color:var(--terracotta); }

/* Definition list, used for the trading identity block */
.identity{
  margin-top:1.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:1.25rem 1.4rem;
}
.identity dl{ margin:0; display:grid; gap:0.7rem; }
.identity dt{
  font-size:var(--step--1);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--sage-text);
  font-weight:600;
}
.identity dd{ margin:0.15rem 0 0; }

/* Unfilled facts. Impossible to miss on the page. */
.todo{
  display:inline;
  background:#FFE9A8;
  color:#5A4300;
  border-bottom:2px solid #C9A227;
  padding:0.05em 0.3em;
  border-radius:3px;
  font-weight:600;
  font-size:0.94em;
}

/* Key-terms summary at the top of the money pages */
.summary{
  margin-top:1.5rem;
  border-top:1px solid var(--border);
}
.summary div{
  display:flex; flex-wrap:wrap; gap:0.35rem 1.25rem;
  justify-content:space-between;
  padding:0.85rem 0;
  border-bottom:1px solid var(--border);
}
.summary dt{ font-weight:600; }
.summary dd{ margin:0; color:var(--text-2); text-align:right; flex:1 1 14rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--green);
  color:var(--on-green);
  padding-block:clamp(1.75rem, 3.5vw, 2.5rem);
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; inset:0; z-index:0;
  opacity:0.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n4)'/%3E%3C/svg%3E");
}
.footer-grid{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:1.1rem;
  align-items:flex-start;
}
.footer-line{
  font-family:"Fraunces",serif; font-weight:500;
  font-size:var(--step-1); color:var(--on-green);
  letter-spacing:-0.015em; line-height:1.1;
}
.footer-line em{ font-style:italic; font-weight:400; color:#aebfa3; }
.footer-links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:0.9rem 1.6rem;
}
.footer-links a{
  text-decoration:none;
  color:rgba(243,239,232,0.82);
  font-size:var(--step-0); font-weight:500;
  transition:color .3s var(--ease);
}
.footer-links a:hover{ color:#fff; }
.footer-bottom{
  position:relative; z-index:1;
  margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid rgba(243,239,232,0.16);
  display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:0.8rem;
  font-size:var(--step--1);
  color:rgba(243,239,232,0.75);
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

@media (min-width:768px){
  .footer-grid{ flex-direction:row; justify-content:space-between; align-items:flex-start; }
}