:root{
    --accent:        #2563EB;
    --accent-dark:   #1D3FD1;
    --accent-soft:   rgba(37,99,235,.08);
    --accent-line:   rgba(37,99,235,.20);
    --navy:          #172033;
    --alert-red:     #B45309;
    --alert-red-bg:  #FFF8ED;
    --alert-red-line:#F4D6A7;

    --ink:           #293449;
    --ink-soft:      #64748B;
    --ink-faint:     #8A97AA;

    --paper:         #FFFFFF;
    --paper-warm:    #F8FAFC;
    --line:          #DFE6EF;
    --line-soft:     #EAF0F6;

    --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
    --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);

    background:#F3F6FA;

    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--accent);text-decoration:none;}
  a:hover{color:var(--accent-dark);text-decoration:underline;}



  .wrap{
    max-width:840px;
    margin:0 auto;
    padding:56px 24px 120px;
  }

  .eyebrow{
    display:inline-flex;
    padding:8px 13px;
    border:1px solid var(--accent-line);
    border-radius:999px;
    background:var(--accent-soft);
    font-family:var(--mono);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--accent-dark);
    margin-bottom:14px;
  }
  h1{
    font-size:38px;
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 10px;
    color:var(--navy);
  }
  .meta{
    font-family:var(--mono);
    font-size:13px;
    color:var(--ink-faint);
    margin-bottom:40px;
  }
  .meta strong{color:var(--navy);}

  .intro{
    font-size:16px;
    color:var(--ink-soft);
    border-left:3px solid var(--accent);
    padding-left:18px;
    margin-bottom:44px;
  }

  .toc{
    background:var(--paper-warm);
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px 28px;
    margin-bottom:56px;
    box-shadow:0 2px 5px rgba(15,23,42,.025), 0 12px 32px rgba(15,23,42,.045);
  }
  .toc h2{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin:0 0 14px;
    font-weight:600;
  }
  .toc ol{
    margin:0;
    padding-left:20px;
    columns:2;
    column-gap:24px;
  }
  .toc li{
    font-size:14px;
    margin-bottom:8px;
    break-inside:avoid;
  }
  .toc a{color:var(--ink);}
  .toc a:hover{color:var(--accent);}

  section{
    margin-bottom:40px;
    scroll-margin-top:90px;
  }
  section h2{
    font-size:20px;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0 0 14px;
    display:flex;
    align-items:baseline;
    gap:10px;
    color:var(--navy);
  }
  section h2 .num{
    font-family:var(--mono);
    font-size:14px;
    color:var(--accent);
    font-weight:600;
  }
  section h3{
    font-size:15px;
    font-weight:700;
    margin:20px 0 8px;
    color:var(--navy);
  }
  section p{
    font-size:15px;
    color:var(--ink);
    margin:0 0 12px;
  }
  section ul, section ol{
    font-size:15px;
    padding-left:22px;
    margin:0 0 12px;
    color:var(--ink);
  }
  section li{margin-bottom:6px;}

  .callout{
    background:var(--accent-soft);
    border:1px solid var(--accent-line);
    border-left:3px solid var(--accent);
    border-radius:12px;
    padding:14px 18px;
    font-size:14px;
    color:var(--ink-soft);
    margin:16px 0;
  }
  .callout.red{
    background:var(--alert-red-bg);
    border-color:var(--alert-red-line);
    border-left-color:var(--alert-red);
    color:var(--alert-red);
  }

  code, .placeholder{
    font-family:var(--mono);
    font-size:13px;
    background:var(--paper-warm);
    border:1px solid var(--line);
    padding:1px 6px;
    border-radius:4px;
    color:var(--ink-soft);
  }

  hr.div{
    border:none;
    border-top:1px solid var(--line);
    margin:48px 0;
  }

  /*=========================================
      CONTACT BOX
      Same navy gradient card as privacy.css's
      .legal-contact-card (#172033 -> #202C45),
      which also matches the footer's --sf-ink
      (#101828 family) it sits above.
  =========================================*/
  .contact-box{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 90% 0%, rgba(255,255,255,.11), transparent 30%),
        linear-gradient(135deg, #172033 0%, #202C45 100%);
    color:#B9C3D3;
    border-radius:12px;
    padding:28px 30px;
    box-shadow:0 18px 45px rgba(23,32,51,.15);
  }
  .contact-box::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--accent), #6A8BFF);
  }
  .contact-box h2{color:#fff;}
  .contact-box .num{color:#82A6FF;}
  .contact-box p{color:#B9C3D3;}
  .contact-box a{color:#82A6FF;}

  

  @media (max-width:640px){
    .wrap{padding:36px 18px 90px;}
    h1{font-size:28px;}
    .toc ol{columns:1;}
  }