@import url("fonts.css");
:root{
  --cream:#f8edda;
  --cream-soft:#fdeedf;
  --paper:#fff6ea;
  --ink:#2e1a0e;
  --cocoa:#572010;
  --cocoa-soft:#7a3a1e;
  --honey:#ffc24b;
  --brick:#b23a27;
  --teal:#376f67;
  --display:"Alfa Slab One",serif;
  --body:"Hanken Grotesk",sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1)
}

*,*::before,*::after{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased
}

a{
  color:inherit
}

img,svg{
  display:block;
  max-width:100%
}

:focus-visible{
  outline:3px solid var(--honey);
  outline-offset:4px;
  border-radius:4px
}

.skip-link{
  position:fixed;
  z-index:20;
  left:16px;
  top:12px;
  translate:0 -150%;
  padding:10px 16px;
  border-radius:999px;
  background:var(--paper);
  font-weight:800
}

.skip-link:focus{
  translate:0
}

.legal-header{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:76px;
  padding:12px clamp(18px,4vw,60px);
  background:var(--cocoa);
  color:var(--cream-soft)
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-family:var(--display);
  font-size:clamp(19px,2vw,27px);
  text-transform:uppercase;
  line-height:1
}

.brand img{
  width:42px;
  height:42px;
  object-fit:contain
}

.legal-nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,3vw,30px);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.legal-nav a{
  text-decoration:none
}

.legal-nav a:hover{
  text-decoration:underline
}

.legal-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(64px,10vw,132px) clamp(18px,6vw,86px) clamp(58px,8vw,100px);
  background:var(--honey)
}

.legal-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(58vw,680px);
  aspect-ratio:1;
  right:-10%;
  top:-52%;
  border:2px dashed rgba(87,32,16,.2);
  border-radius:50%;
  animation:spin 28s linear infinite
}

.legal-hero::after{
  content:"✦";
  position:absolute;
  right:clamp(20px,7vw,90px);
  bottom:26px;
  color:var(--brick);
  font-size:clamp(34px,6vw,74px)
}

@keyframes spin{
  to{
    rotate:360deg
  }
}

.kicker{
  margin:0 0 16px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brick)
}

h1{
  max-width:11ch;
  margin:0;
  font:400 clamp(50px,10vw,136px)/.85 var(--display);
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--cocoa)
}

.hero-note{
  max-width:58ch;
  margin:28px 0 0;
  font-size:clamp(16px,1.6vw,20px)
}

.legal-layout{
  display:grid;
  grid-template-columns:minmax(190px,260px) minmax(0,760px);
  justify-content:center;
  gap:clamp(34px,7vw,100px);
  padding:clamp(52px,8vw,96px) clamp(18px,5vw,72px);
  background:var(--cream)
}

.legal-aside{
  align-self:start;
  position:sticky;
  top:24px;
  padding:20px;
  border:1px solid rgba(87,32,16,.18);
  border-radius:20px;
  background:var(--paper)
}

.legal-aside strong{
  display:block;
  margin-bottom:12px;
  font:400 20px var(--display);
  text-transform:uppercase
}

.legal-aside a{
  display:block;
  padding:7px 0;
  text-decoration:none;
  font-size:13px;
  font-weight:700
}

.legal-aside a:hover{
  text-decoration:underline
}

.legal-copy section+section{
  margin-top:48px
}

.legal-copy h2{
  margin:0 0 12px;
  font:400 clamp(27px,4vw,42px)/.94 var(--display);
  text-transform:uppercase;
  color:var(--cocoa)
}

.legal-copy p,.legal-copy li{
  max-width:68ch
}

.legal-copy ul{
  padding-left:20px
}

.concept-callout{
  margin:0 0 48px;
  padding:22px 24px;
  border-left:6px solid var(--brick);
  border-radius:0 18px 18px 0;
  background:var(--paper)
}

.concept-callout strong{
  display:block;
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.1em
}

.updated{
  margin-top:52px;
  font-size:13px;
  font-weight:700;
  color:var(--cocoa-soft)
}

@media(max-width:700px){
  .legal-header{
    align-items:flex-start
  }
  .brand span{
    max-width:8ch
  }
  .legal-nav{
    flex-direction:column;
    align-items:flex-end;
    gap:5px
  }
  .legal-hero{
    padding-top:58px
  }
  .legal-hero::before{
    width:92vw;
    right:-42%;
    top:-18%
  }
  .legal-layout{
    grid-template-columns:1fr;
    gap:28px
  }
  .legal-aside{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px
  }
  .legal-aside strong{
    grid-column:1/-1
  }
  .legal-copy section+section{
    margin-top:38px
  }
}

@media(max-width:420px){
  .brand img{
    width:36px;
    height:36px
  }
  .legal-nav{
    font-size:10px
  }
  .legal-aside{
    grid-template-columns:1fr
  }
  .legal-hero::after{
    font-size:32px
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  .legal-hero::before{
    animation:none
  }
}

/* ============================================================
   Card-over-card footer reveal (matches index.html): the page
   body is opaque and sits above, the footer is pinned to the
   bottom underneath, so content slides off it as you scroll.
   ============================================================ */
main{
  position:relative;
  z-index:2;
  background:var(--cream)
}