/* ============================================================
   QUEST OUTSIDE — legal pages (/terms, /privacy)
   Shared by both so the chrome and type only exist once.
   Tokens mirror index.html and the Figma variables.
   Layout from "Privacy Policy — Desktop" (node 3001:4654).
   ============================================================ */

:root{
  color-scheme: light;

  --brand-primary:#2F2BCC;
  --brand-primary-hover:#2723A8;
  --brand-tint:#ECEBFB;

  --surface-1:#FFFFFF;
  --surface-2:#F6F8FC;

  --text-primary:#151829;
  --text-secondary:#4A5468;
  --text-tertiary:#8B95A8;

  --border-default:#DEE4EF;

  --space-4:4px;  --space-8:8px;   --space-12:12px; --space-16:16px;
  --space-24:24px;--space-32:32px; --space-40:40px; --space-48:48px; --space-64:64px;

  --radius-sm:8px;
  --radius-lg:16px;
  --radius-full:999px;

  --page-max:1200px;
  --gutter:64px;
  --measure:760px;          /* the content column in the Figma frame */

  --font-sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--surface-1);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:18px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

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

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

.shell{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-8);
  padding:var(--space-12) var(--space-16);
  border-radius:var(--radius-sm);
  font-size:15px;line-height:1.2;font-weight:600;font-family:inherit;
  text-decoration:none;white-space:nowrap;
  border:1.5px solid transparent;cursor:pointer;
  transition:background-color .15s ease;
}
.btn--primary{background:var(--brand-primary);color:#fff}
.btn--primary:hover{background:var(--brand-primary-hover)}
.btn--secondary{background:transparent;border-color:var(--brand-primary);color:var(--brand-primary)}
.btn--secondary:hover{background:var(--brand-tint)}

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:100;
  background:var(--surface-1);
  border-bottom:1px solid var(--border-default);
}
.site-header .shell{
  height:88px;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-24);
}
.wordmark{
  font-size:32px;line-height:1.25;font-weight:600;
  color:var(--brand-primary);text-decoration:none;letter-spacing:-.01em;
}
.nav-actions{display:flex;gap:var(--space-12);align-items:center}

/* ============================================================
   LEGAL CONTENT
   ============================================================ */

.legal{padding-block:80px var(--space-64)}

.legal__inner{max-width:var(--measure)}

.legal__title{
  font-size:48px;line-height:1.15;font-weight:700;
  color:var(--text-primary);
  margin:0 0 var(--space-12);
  text-wrap:balance;
}
.legal__meta{
  font-size:15px;line-height:1.45;
  color:var(--text-tertiary);
  margin:0 0 var(--space-40);
}

/* One section = a heading plus its body, 40px from the next. */
.legal section{margin-bottom:var(--space-40)}
.legal section:last-child{margin-bottom:0}

.legal h2{
  font-size:24px;line-height:1.3;font-weight:600;
  color:var(--text-primary);
  margin:0 0 var(--space-12);
  text-wrap:balance;
}
.legal h3{
  font-size:18px;line-height:1.3;font-weight:600;
  color:var(--text-primary);
  margin:var(--space-24) 0 var(--space-8);
}
.legal p{
  font-size:18px;line-height:1.45;
  color:var(--text-secondary);
  margin:0 0 var(--space-16);
}
.legal p:last-child{margin-bottom:0}

.legal a{color:var(--brand-primary);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--brand-primary-hover)}

/* Lettered sub-clauses. The markers are part of the legal text, so they
   are written into the markup rather than generated by a list-style. */
.legal ol.clauses{
  list-style:none;
  margin:0 0 var(--space-16);
  padding:0;
  display:flex;flex-direction:column;gap:var(--space-12);
}
.legal ol.clauses > li{
  font-size:18px;line-height:1.45;
  color:var(--text-secondary);
  padding-left:var(--space-32);
  text-indent:calc(var(--space-32) * -1);
}

/* Statutory emphasis. These blocks are set in capitals in the executed
   document — conspicuousness is legally load-bearing, so the casing is
   reproduced verbatim and only the leading is opened up to help. */
.legal .caps{
  line-height:1.55;
  letter-spacing:.005em;
}

.legal .consent{
  line-height:1.55;
  letter-spacing:.005em;
  color:var(--text-primary);
  font-weight:600;
  background:var(--surface-2);
  border-left:3px solid var(--brand-primary);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:var(--space-16) var(--space-24);
  margin-bottom:var(--space-40);
}

/* ---------- Footer (matches the landing page) ---------- */

.site-footer{
  background:var(--surface-2);
  border-top:1px solid var(--border-default);
}
.site-footer .shell{
  padding-block:var(--space-48);
  display:flex;gap:var(--space-64);align-items:flex-start;
}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-24);align-items:flex-start}
.footer-brand .wordmark{font-size:20px;line-height:1.2}
.social{display:flex;gap:var(--space-8)}
.social a{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
  border-radius:var(--radius-sm);
  transition:color .15s ease,background-color .15s ease;
}
.social a:hover{color:var(--brand-primary);background:rgba(47,43,204,.08)}
.social svg{width:24px;height:24px;display:block}

.footer-columns{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-48);
  flex:1 1 auto;min-width:0;
}
.footer-col{display:flex;flex-direction:column;gap:var(--space-12);align-items:flex-start}
.footer-col a{color:var(--text-secondary);text-decoration:none}
.footer-col a:hover{color:var(--brand-primary);text-decoration:underline}

.t-label-strong{
  font-size:12px;line-height:1.2;font-weight:600;margin:0;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.t-body-sm{font-size:15px;line-height:1.45;font-weight:400;margin:0;color:var(--text-secondary)}
.t-caption{font-size:12px;line-height:1.4;font-weight:400;margin:0;color:var(--text-tertiary)}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1180px){
  :root{--gutter:40px}
}

@media (max-width:880px){
  :root{--gutter:24px}
  .legal{padding-block:56px var(--space-48)}
  .legal__title{font-size:38px}
  .site-footer .shell{flex-direction:column;gap:var(--space-32)}
  .footer-columns{grid-template-columns:1fr 1fr;gap:var(--space-32)}
}

@media (max-width:560px){
  :root{--gutter:16px}
  body{font-size:16px}
  .legal__title{font-size:30px}
  .legal h2{font-size:21px}
  .legal p,.legal ol.clauses > li{font-size:16px}
  .site-header .shell{height:72px}
  .wordmark{font-size:24px}
  .nav-actions .btn--secondary{display:none}
  .footer-columns{grid-template-columns:1fr}
  .legal ol.clauses > li{padding-left:var(--space-24);text-indent:calc(var(--space-24) * -1)}
}