/* ===========================================================================
   2nd Circuit — shared styles for the standalone legal pages
   (legal/terms.html, legal/privacy.html).

   Tokens, nav and footer rules are kept in sync with the inline <style> block
   in index.html. If the nav or footer changes there, mirror it here — those are
   the only two places that chrome is defined.
   =========================================================================== */

:root{
  --primary-900:#0A044A; --primary-700:#201F6B; --primary-500:#2D2E7D; --primary-400:#4A4B8F;
  --accent-500:#00BFD1; --accent-300:#20D3DC; --accent-50:#DEF8F9; --accent-900:#006261;
  --text-secondary:#6B6C86; --text-muted:#9596AC;
  --on-dark:#FFFFFF; --on-dark-soft:#BCBCD7;
  --bg-page:#FFFFFF; --bg-soft:#F5F6FB; --bg-tint:#EEEFF8;
  --stroke:#EBEDF2;
  --grad-cta:linear-gradient(90deg,#2d2e7d 0%,#1013a0 52%,#13144d 100%);
  --grad-cta-rim:conic-gradient(from var(--cds-angle,-90deg),#fff,#abacff,#fff,#abacff,#fff);
  --shadow-card:0 1px 2px rgba(0,0,0,.15), 0 3px 5px rgba(0,0,0,.05), 0 16px 18px -2px rgba(26,103,231,.10), 0 40px 44px -8px rgba(26,103,231,.07);
  --maxw:1280px;
  --gutter:clamp(20px, 4.5vw, 80px);
  /* long-form reading tone — darker than --text-secondary, still in palette */
  --prose:#3A3B58;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--primary-900);background:var(--bg-page);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}

/* legal pages are long — give keyboard users a bypass past the nav */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--primary-900);
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;box-shadow:var(--shadow-card)}
.skip:focus{left:0}

/* ----- shared bits ----- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--primary-500);background:#fff;border:1px solid var(--stroke);padding:7px 15px;border-radius:999px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-500)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:"Inter Tight","Geist",sans-serif;font-weight:600;font-size:15px;border-radius:999px;padding:13px 24px;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .2s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn i{width:17px;height:17px}
@property --cds-angle{syntax:'<angle>';inherits:false;initial-value:-90deg}
.btn-primary{background:var(--grad-cta) padding-box,var(--grad-cta-rim) border-box;color:#fff;border:1px solid transparent;box-shadow:0 1px 1px rgba(0,0,0,.10),-1px 2px 2px rgba(0,0,0,.09),-2px 5px 3px rgba(0,0,0,.05),-4px 9px 4px rgba(0,0,0,.012)}
.btn-primary:hover{box-shadow:0 12px 28px -6px rgba(45,46,125,.55);transform:translateY(-1px)}
@media (hover:hover){.btn-primary:hover{animation:cds-spin 2.4s linear infinite}}
@keyframes cds-spin{to{--cds-angle:270deg}}
@media (prefers-reduced-motion: reduce){.btn-primary:hover{animation:none;transform:none}}
.btn-ghost{background:#fff;color:var(--primary-700);border-color:var(--stroke)}
.btn-ghost:hover{box-shadow:0 8px 22px -8px rgba(10,4,74,.18)}

/* ----- nav (mirrors index.html) ----- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:18px;will-change:transform}
.nav-pill{display:flex;align-items:center;justify-content:space-between;margin:0 auto;max-width:100%;background:#fff;border:1px solid var(--stroke);border-radius:999px;padding:10px 12px 10px 24px;box-shadow:0 8px 24px -6px rgba(10,4,74,.10);backdrop-filter:saturate(140%) blur(8px)}
.logo{flex:1 1 0;height:34px;display:flex;align-items:center}
.logo img{height:34px;width:auto;flex-shrink:0}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--text-secondary);font-weight:500;font-size:15px}
.nav-links a:hover{color:var(--primary-900)}
.nav-right{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.menu-toggle{display:none;width:44px;height:44px;border-radius:12px;background:var(--grad-cta) padding-box,var(--grad-cta-rim) border-box;border:1px solid transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px -6px rgba(10,4,74,.18)}
.menu-toggle i{width:22px;height:22px}
.mobile-menu{display:none;position:fixed;inset:0 0 auto 0;top:84px;z-index:55;margin:0 var(--gutter);background:#fff;border:1px solid var(--stroke);border-radius:24px;box-shadow:var(--shadow-card);padding:14px 14px 18px}
.mobile-menu.open{display:block}
.mobile-menu a:not(.btn){display:block;padding:15px 14px;border-radius:12px;font-weight:500;font-size:18px;color:var(--primary-900)}
.mobile-menu a:not(.btn):hover{background:var(--bg-soft)}
.mobile-menu .btn{width:100%;margin-top:6px;justify-content:flex-start}

/* ----- nav animation states (mirrors index.html) ----- */
/* Hidden pre-state is gated behind .anim-ready, set by the head script only
   when motion is allowed, so the bar renders normally without JS. */
.anim-ready .nav-pill{opacity:0}
.nav-pill{transition:max-width .45s cubic-bezier(.4,0,.2,1),box-shadow .35s ease}
.nav-pill.scrolled{box-shadow:0 12px 30px -8px rgba(10,4,74,.22)}
.nav-pill.shrink{max-width:1000px}
@media (prefers-reduced-motion: reduce){
  .anim-ready .nav-pill{opacity:1}
}

/* ----- page header ----- */
.legal-head{background:linear-gradient(180deg,#C4DBFF 0%,#E6F0FF 45%,#FFFFFF 92%);padding:148px 0 52px}
.legal-head .inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:820px}
.legal-head h1{font-size:50px;font-weight:600;letter-spacing:-.022em;line-height:1.05}
.legal-head .sub{color:var(--text-secondary);font-size:17px;line-height:1.55;max-width:640px}
.legal-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px;color:var(--text-secondary)}
.legal-meta .sep{color:var(--text-muted)}
.legal-meta strong{color:var(--primary-700);font-weight:600}

/* ----- body: sticky contents + prose ----- */
.legal-body{padding:52px 0 96px}
.legal-grid{display:grid;grid-template-columns:252px minmax(0,1fr);gap:64px;align-items:start}

.toc{position:sticky;top:100px;max-height:calc(100vh - 132px);overflow-y:auto;
  border:1px solid var(--stroke);border-radius:18px;padding:20px;background:var(--bg-soft)}
.toc h2{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;padding:0 8px}
.toc ul{display:flex;flex-direction:column;gap:2px}
.toc a{display:block;padding:6px 8px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--text-secondary)}
.toc a:hover{background:#fff;color:var(--primary-700)}

.prose{max-width:76ch;min-width:0}
/* scroll-margin keeps the fixed nav from covering a jumped-to heading */
.prose h2{font-size:23px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--primary-900);
  border-bottom:1px solid var(--stroke);padding-bottom:10px;margin:42px 0 16px;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16.5px;font-weight:600;margin:24px 0 8px;color:var(--primary-700)}
.prose p{color:var(--prose);font-size:15.5px;line-height:1.7;margin-bottom:14px}
.prose ul{margin:0 0 14px;display:flex;flex-direction:column;gap:9px}
.prose ul li{position:relative;padding-left:22px;color:var(--prose);font-size:15.5px;line-height:1.65}
.prose ul li::before{content:"";position:absolute;left:5px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent-500)}
.prose a{color:var(--primary-500);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#2d2e7d55}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{color:var(--primary-900);font-weight:600}

/* the source marks its must-read clauses with a tinted box — keep that emphasis */
.callout{border:1px solid #CFD6EB;border-left:3px solid var(--accent-500);background:#F3F5FD;
  border-radius:0 14px 14px 0;padding:18px 22px;margin:0 0 14px}
.callout p{color:#1E205A;font-size:14px;line-height:1.65;margin-bottom:10px}
.callout p:last-child{margin-bottom:0}
.callout-label{font-size:11px!important;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted)!important;margin-bottom:8px!important}
.contact-block{font-style:normal;color:var(--prose);font-size:15px;line-height:1.75}
.contact-block a{color:var(--primary-500);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ----- footer (mirrors index.html) ----- */
footer{background:var(--primary-900);color:#fff;padding:72px 0 64px}
.foot-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.foot-top{display:flex;justify-content:space-between;gap:64px}
.foot-brand{max-width:345px;display:flex;flex-direction:column;gap:20px}
.foot-brand img{width:208px;height:48px;object-fit:contain;object-position:left center;align-self:flex-start}
.foot-brand p{font-size:15px;color:var(--on-dark-soft);line-height:1.55}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:14px}
.foot-col h5{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--on-dark)}
.foot-col a{font-size:14px;color:var(--on-dark-soft)}
.foot-col a:hover{color:#fff}
.foot-col a[aria-current="page"]{color:#fff;font-weight:500}
.foot-div{border:none;border-top:1px solid #FFFFFF14}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-bot .copy{font-size:14px;color:var(--on-dark-soft)}
.foot-disc{font-size:12px;color:var(--on-dark-soft);line-height:1.6}

/* =================== responsive =================== */
@media (max-width:1200px){
  .legal-grid{grid-template-columns:224px minmax(0,1fr);gap:44px}
}
@media (max-width:960px){
  .nav-links{display:none}
  .nav-right .btn{display:none}
  .menu-toggle{display:inline-flex}
  .legal-head{padding:118px 0 40px}
  .legal-head h1{font-size:38px}
  .legal-body{padding:36px 0 72px}
  .legal-grid{grid-template-columns:1fr;gap:28px}
  /* the sidebar becomes a plain two-column index above the text */
  .toc{position:static;max-height:none;overflow:visible}
  .toc ul{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
  .foot-top{flex-direction:column;gap:40px}
  .foot-cols{gap:40px 56px}
}
@media (max-width:560px){
  .legal-head{padding:100px 0 32px}
  .legal-head h1{font-size:29px;letter-spacing:-.01em}
  .legal-head .sub{font-size:15px}
  .legal-body{padding:28px 0 56px}
  .prose h2{font-size:20px;margin:32px 0 14px}
  .prose p,.prose ul li{font-size:15px}
  .toc ul{grid-template-columns:1fr}
  .callout{padding:16px 18px}
  .foot-cols{gap:32px}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:12px}
}