/*
  Shared styles for the secondary pages: /optout, /privacy, /terms, /gdpr.
  Tokens, header, buttons and footer are lifted from index.html so these
  pages read as part of the same site. If the landing page's design tokens
  change, change them here too.
*/
:root{
  --paper:#F2F3EE;
  --paper-raised:#FBFBF9;
  --ink:#12151B;
  --ink-soft:#4A5160;
  --line:#DBDBD2;
  --dark:#0E1420;
  --dark-line:rgba(255,255,255,0.12);
  --cobalt:#1F3A93;
  --cobalt-deep:#152A6E;
  --cobalt-bright:#5C7CFA;
  --stamp:#D64A2A;
  --stamp-deep:#B23A1E;
  --mint:#2E8B57;
  --wrap:1240px;
  --serif:'Fraunces', Georgia, serif;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'IBM Plex Mono', 'Courier New', monospace;
}

*{box-sizing:border-box;}
/* Author display rules (form{display:flex}) would otherwise beat the UA's
   [hidden] rule, and a form set hidden by script would stay on screen. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth; scroll-padding-top:100px;}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}
::selection{background:var(--stamp); color:#fff;}
:focus-visible{outline:2.5px solid var(--cobalt-bright); outline-offset:3px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

.skip{position:absolute; left:-9999px;}
.skip:focus{left:1rem; top:1rem; background:#fff; padding:.6rem 1rem; border-radius:6px; z-index:999;}

.grain{
  position:fixed; inset:-10%; z-index:998; pointer-events:none; opacity:0.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (hover:none), (pointer:coarse){ .grain{display:none;} }

/* ---------- Header (same as index.html) ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(242,243,238,0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.header-row{display:flex; align-items:center; justify-content:space-between; height:80px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-0.01em; text-decoration:none;}
.logo-mark{width:30px; height:30px; flex:none;}
nav.main-nav{display:flex; gap:36px;}
nav.main-nav a{font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:500; text-decoration:none; color:var(--ink-soft); padding:6px 0; position:relative; white-space:nowrap;}
nav.main-nav a:hover{color:var(--ink);}
nav.main-nav a[aria-current=page]{color:var(--ink);}
nav.main-nav a[aria-current=page]::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--stamp); border-radius:2px;}
.header-actions{display:flex; align-items:center; gap:18px;}
.nav-mobile-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-mobile-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:transform .2s ease, opacity .2s ease;}
.nav-mobile-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-mobile-toggle[aria-expanded=true] span:nth-child(2){opacity:0;}
.nav-mobile-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{display:none; border-top:1px solid var(--line); background:rgba(242,243,238,.97); max-height:calc(100vh - 80px); overflow-y:auto;}
.mobile-nav.open{display:block;}
.mobile-nav .wrap{display:flex; flex-direction:column; padding-top:8px; padding-bottom:20px;}
.mobile-nav a:not(.btn){font-family:var(--mono); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; text-decoration:none; color:var(--ink-soft); padding:15px 4px; border-bottom:1px solid var(--line);}
.mobile-nav a:not(.btn):hover, .mobile-nav a[aria-current=page]{color:var(--ink);}
.mobile-nav a[aria-current=page]{box-shadow:inset 3px 0 0 var(--stamp); padding-left:14px;}
.mobile-nav-cta{display:flex; flex-direction:column; gap:12px; padding-top:18px;}
.mobile-nav-cta .btn{width:100%;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:0.95rem; padding:14px 26px; border-radius:999px; border:1.5px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .2s ease, border-color .2s ease, transform .2s ease;}
.btn-primary{background:var(--cobalt); color:#fff; box-shadow:0 10px 24px -8px rgba(31,58,147,0.55);}
.btn-primary:hover{background:var(--cobalt-deep);}
.btn-primary[disabled]{opacity:.6; cursor:default;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink-soft);}
.btn-sm{padding:10px 18px; font-size:0.86rem;}

/* ---------- Page hero ---------- */
.doc-hero{padding:96px 0 56px; border-bottom:1px solid var(--line);}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--cobalt); background:rgba(31,58,147,0.08); padding:7px 15px; border-radius:999px; margin-bottom:28px;}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--stamp);}
.doc-hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(2.3rem, 4.8vw, 4rem); line-height:1.08; letter-spacing:-0.015em; margin:0; max-width:860px;}
.doc-hero h1 em{font-style:italic; font-weight:600;}
.doc-lede{font-size:1.14rem; color:var(--ink-soft); max-width:620px; margin:24px 0 0;}
.doc-meta{display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); margin-top:30px;}
.doc-meta strong{color:var(--ink); font-weight:500;}

/* ---------- Document layout ---------- */
.doc-layout{display:grid; grid-template-columns:230px minmax(0,1fr); gap:72px; padding-top:64px; padding-bottom:110px; align-items:start;}
.doc-aside{position:sticky; top:112px;}
.doc-aside h2{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); font-weight:500; margin:0 0 14px;}
.doc-aside ul{list-style:none; margin:0 0 34px; padding:0; border-left:1px solid var(--line);}
.doc-aside li a{display:block; padding:8px 0 8px 16px; margin-left:-1px; border-left:2px solid transparent; font-size:0.92rem; color:var(--ink-soft); text-decoration:none;}
.doc-aside li a:hover{color:var(--ink);}
.doc-aside li a[aria-current=page]{color:var(--ink); font-weight:600; border-left-color:var(--stamp);}
.doc-aside .toc a{font-size:0.86rem; padding:6px 0 6px 16px;}

/* Body copy. Sections number themselves, like the cards on the landing page. */
.doc-body{max-width:720px; counter-reset:sec;}
.doc-body > p:first-child{font-size:1.1rem; color:var(--ink);}
.doc-body h2{counter-increment:sec; font-family:var(--serif); font-weight:500; font-size:1.65rem; letter-spacing:-0.01em; line-height:1.2; margin:56px 0 16px; padding-top:28px; border-top:1px solid var(--line);}
.doc-body h2::before{content:counter(sec, decimal-leading-zero); display:block; font-family:var(--mono); font-size:0.74rem; font-weight:500; letter-spacing:0.08em; color:var(--stamp-deep); margin-bottom:10px;}
.doc-body > h2:first-child{margin-top:0;}
.doc-body p, .doc-body li{color:var(--ink-soft); font-size:1.02rem; line-height:1.72;}
.doc-body p{margin:0 0 16px;}
.doc-body strong{color:var(--ink); font-weight:600;}
.doc-body a{color:var(--cobalt); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
.doc-body a:hover{color:var(--stamp-deep);}
.doc-body ul{list-style:none; padding:0; margin:0 0 20px;}
.doc-body ul li{position:relative; padding-left:26px; margin-bottom:10px;}
.doc-body ul li::before{content:"→"; position:absolute; left:0; top:0; font-family:var(--mono); color:var(--stamp);}

.table-wrap{overflow-x:auto; margin:20px 0 24px; border:1px solid var(--line); border-radius:14px; background:var(--paper-raised);}
.doc-body table{width:100%; border-collapse:collapse; font-size:0.95rem; min-width:460px;}
.doc-body th, .doc-body td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top;}
.doc-body th{font-family:var(--mono); font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); background:rgba(31,58,147,0.04);}
.doc-body td{color:var(--ink-soft); line-height:1.55;}
.doc-body td:first-child{color:var(--ink); font-weight:500; width:44%;}
.doc-body tr:last-child td{border-bottom:0;}

/* Highlighted statement inside a document. */
.doc-note{background:var(--paper-raised); border:1px solid var(--line); border-left:4px solid var(--stamp); border-radius:12px; padding:18px 22px; margin:22px 0 26px;}
.doc-note p{margin:0; color:var(--ink);}

/* Dark card pointing recipients at /optout. */
.doc-cta{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--dark); color:#fff; border-radius:18px; padding:30px 32px; margin:30px 0 8px; position:relative; overflow:hidden;}
.doc-cta::after{content:"off"; position:absolute; right:-6px; bottom:-38px; font-family:var(--serif); font-style:italic; font-weight:700; font-size:7rem; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.1); pointer-events:none;}
.doc-cta-text{position:relative; z-index:1; max-width:380px;}
.doc-cta-text strong{display:block; font-family:var(--serif); font-weight:500; font-size:1.3rem; margin-bottom:4px; color:#fff;}
.doc-cta-text span{color:rgba(255,255,255,0.62); font-size:0.94rem;}
.doc-body .doc-cta a.btn{position:relative; z-index:1; background:#fff; color:var(--cobalt-deep); text-decoration:none; box-shadow:none;}
.doc-body .doc-cta a.btn:hover{background:#E9ECF7; color:var(--cobalt-deep);}

/* ---------- Opt-out page ---------- */
.optout-hero{padding:96px 0 80px;}
.optout-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:72px; align-items:center;}
.optout-grid > *{min-width:0;}
.optout-copy h1{font-family:var(--serif); font-weight:500; font-size:clamp(2.3rem, 4.6vw, 3.8rem); line-height:1.08; letter-spacing:-0.015em; margin:0;}
.optout-copy h1 em{font-style:italic; font-weight:600; position:relative; display:inline-block; z-index:1;}
.optout-copy h1 em::after{content:""; position:absolute; left:-3%; right:-3%; top:10%; bottom:0; background:rgba(214,74,42,0.22); border-radius:255px 15px 225px 15px/15px 225px 15px 255px; z-index:-1;}
.optout-copy .doc-lede{margin-top:26px;}
.optout-facts{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:12px;}
.optout-facts li{display:flex; gap:12px; align-items:flex-start; font-size:0.98rem; color:var(--ink-soft);}
.optout-facts li svg{flex:none; margin-top:4px;}
.optout-facts strong{color:var(--ink); font-weight:600;}

.optout-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:34px 32px 30px; box-shadow:0 30px 60px -34px rgba(20,24,31,0.35); position:relative;}
.optout-card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); padding-bottom:16px; margin-bottom:22px; border-bottom:1px dashed var(--line);}
.optout-card-head .live{display:inline-flex; align-items:center; gap:6px; color:var(--mint);}
.optout-card.done .live{visibility:hidden;}
.optout-card-head .live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mint);}
.optout-card h2{font-family:var(--serif); font-weight:500; font-size:1.45rem; letter-spacing:-0.01em; margin:0 0 6px;}
.optout-card > p{color:var(--ink-soft); font-size:0.94rem; margin:0 0 22px;}
.optout-card label{display:block; font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-soft); margin-bottom:8px;}
.optout-form{display:flex; flex-direction:column; gap:14px;}
.optout-form input{display:block; width:100%; padding:14px 16px; font:inherit; font-size:1rem; color:var(--ink); border:1px solid var(--line); border-radius:12px; background:#fff;}
.optout-form input:focus{outline:2px solid var(--cobalt); outline-offset:-1px; border-color:transparent;}
.optout-form .btn{width:100%;}
.optout-fine{font-size:0.8rem; color:var(--ink-soft); margin:18px 0 0; line-height:1.55;}
.optout-fine a{color:var(--cobalt);}

.msg{margin-top:18px; padding:14px 16px; border-radius:12px; font-size:0.94rem; line-height:1.55;}
.msg.ok{background:rgba(46,139,87,0.09); border:1px solid rgba(46,139,87,0.35); color:#1F6B42;}
.msg.err{background:rgba(214,74,42,0.08); border:1px solid rgba(214,74,42,0.3); color:var(--stamp-deep);}

/* Stamp that lands on the card once the opt-out is confirmed. */
.optout-stamp{position:absolute; top:-26px; right:-22px; width:104px; height:104px; border-radius:50%; border:3px solid var(--stamp); color:var(--stamp); background:rgba(251,251,249,0.92); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--mono); font-size:0.7rem; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; line-height:1.3; transform:rotate(-14deg); animation:stamp-in .45s cubic-bezier(.2,1.4,.4,1) both;}
.optout-stamp::before{content:""; position:absolute; inset:6px; border:1px solid var(--stamp); border-radius:50%; opacity:0.5;}
.optout-stamp strong{display:block; font-size:0.9rem; font-weight:600;}
@keyframes stamp-in{from{transform:rotate(-14deg) scale(1.5); opacity:0;} to{transform:rotate(-14deg) scale(1); opacity:1;}}

.steps-band{background:var(--dark); color:#fff; padding:80px 0;}
.steps-band .section-eyebrow{font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:#FF8A65; display:block; margin-bottom:14px;}
.steps-band h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.2vw,2.6rem); letter-spacing:-0.015em; margin:0 0 50px; max-width:620px;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; position:relative;}
.steps::before{content:""; position:absolute; top:30px; left:6%; right:6%; height:1px; background:var(--dark-line);}
.step{position:relative;}
.step-num{font-family:var(--serif); font-size:3rem; font-weight:500; line-height:1; margin-bottom:18px; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,0.55); background:var(--dark); display:inline-block; padding-right:14px;}
.step h3{font-weight:600; font-size:1.12rem; margin:0 0 8px;}
.step p{color:rgba(255,255,255,0.62); font-size:0.96rem; margin:0;}

.optout-more{padding:80px 0 100px;}
.optout-more-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.more-card{display:block; background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; padding:28px 26px; text-decoration:none; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.more-card:hover{border-color:var(--cobalt); box-shadow:0 22px 36px -22px rgba(20,24,31,0.28); transform:translateY(-2px);}
.more-card .k{font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--stamp-deep);}
.more-card h3{font-family:var(--serif); font-weight:500; font-size:1.25rem; margin:10px 0 8px;}
.more-card p{color:var(--ink-soft); font-size:0.92rem; margin:0;}
.more-card .go{display:inline-block; margin-top:16px; font-family:var(--mono); font-size:0.76rem; color:var(--cobalt);}

/* ---------- Footer (same as index.html) ---------- */
footer.site{background:var(--dark); color:#fff; padding:70px 0 34px;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:50px;}
.footer-brand{max-width:300px;}
.footer-brand .logo{margin-bottom:16px; color:#fff;}
.footer-brand p{color:rgba(255,255,255,0.55); font-size:0.92rem;}
.footer-cols{display:flex; gap:70px; flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.45); margin:0 0 18px; font-weight:600;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.footer-col a{text-decoration:none; font-size:0.93rem; color:rgba(255,255,255,0.85);}
.footer-col a:hover{color:#FF8A65;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--dark-line); flex-wrap:wrap; gap:14px;}
.footer-bottom p{font-size:0.82rem; color:rgba(255,255,255,0.4); margin:0; font-family:var(--mono);}

/* ---------- Responsive ---------- */
@media (min-width:981px) and (max-width:1180px){
  nav.main-nav{gap:18px;}
  nav.main-nav a{font-size:0.74rem; letter-spacing:0.04em;}
  .header-actions{gap:10px;}
  .header-actions .btn-sm{padding:10px 14px;}
}
@media (max-width:980px){
  nav.main-nav{display:none;}
  .nav-mobile-toggle{display:block;}
  .header-actions .btn{display:none;}
  .doc-layout{grid-template-columns:1fr; gap:0; padding-top:40px;}
  .doc-aside{position:static; margin-bottom:8px;}
  .doc-aside .toc-block{display:none;}
  .doc-aside ul{display:flex; flex-wrap:wrap; gap:8px; border-left:0; margin-bottom:28px;}
  .doc-aside li a{border:1px solid var(--line); border-radius:999px; padding:7px 14px; margin:0; font-size:0.85rem; background:var(--paper-raised);}
  .doc-aside li a[aria-current=page]{border-color:var(--ink); background:var(--ink); color:#fff;}
  .optout-grid{grid-template-columns:1fr; gap:48px;}
  .optout-card{max-width:560px;}
  .steps{grid-template-columns:1fr; gap:34px;}
  .steps::before{display:none;}
  .optout-more-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .wrap{padding-left:22px; padding-right:22px;}
  .doc-hero, .optout-hero{padding:64px 0 44px;}
  .doc-layout{padding-bottom:70px;}
  .doc-body h2{font-size:1.4rem; margin-top:44px;}
  .optout-card{padding:28px 22px 24px;}
  .optout-stamp{right:-6px; top:-30px; width:88px; height:88px; font-size:0.62rem;}
  .steps-band, .optout-more{padding:60px 0;}
  .doc-cta{padding:26px 22px;}
}
@media (hover:none),(pointer:coarse){
  .btn-sm{padding:12px 18px;}
}