/* ============================================================================
   Slug Sync — shared shell for every page except the homepage.

   The homepage carries its own inline <style> because it is one long document
   and the critical CSS is worth inlining there. Every other page is short,
   cacheable and reuses this file instead, so the tokens below are a verbatim
   copy of the homepage's :root block. If a colour changes on the homepage it
   has to change here too — that is the cost of not splitting index.html up.
   ========================================================================= */

@font-face{
  font-family:"Sunborn Sans One";
  src:url("/fonts/Sunborn-SansOne.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --orange:#f53e02;
  --navy:#0b0f43;
  --white:#fff;

  --bg:var(--white);
  --bg-2:rgba(11,15,67,.035);
  --ink:var(--navy);
  --muted:rgba(11,15,67,.66);
  --dim:rgba(11,15,67,.48);
  --line:rgba(11,15,67,.10);
  --line-2:rgba(11,15,67,.20);
  --accent:var(--orange);
  /* See index.html: brand orange is 3.77:1 on white, too low for small text. */
  --accent-ink:#dc3802;
  --accent-soft:rgba(245,62,2,.09);

  --display:"Sunborn Sans One","Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --body:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --r:16px;
  --maxw:1120px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit; text-decoration:none}
code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.87em; background:var(--accent-soft); color:var(--orange);
  padding:.12em .42em; border-radius:5px; border:1px solid rgba(245,62,2,.16);
  overflow-wrap:anywhere;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:var(--white); padding:12px 18px; border-radius:0 0 10px 0;
  font-size:.9rem; font-weight:500;
}
.skip:focus{left:0}
#main{flex:1}
#main:focus{outline:none}

/* ================= nav ================= */
header{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
header.stuck{border-bottom-color:var(--line); box-shadow:0 1px 20px -8px rgba(11,15,67,.22)}
.nav{display:flex; align-items:center; gap:14px; height:72px}
.logo{display:flex; align-items:center}
.logo img{height:60px; width:auto; display:block}
.nav nav{margin-left:auto; display:flex; gap:4px; align-items:center}
.nav nav a{
  padding:9px 14px; border-radius:9px; color:var(--muted); font-size:.93rem; font-weight:500;
  transition:color .18s, background .18s;
}
.nav nav a:hover{color:var(--ink); background:var(--bg-2)}
.nav nav a[aria-current=page]{color:var(--ink); background:var(--bg-2)}
.nav .ghost{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--navy); border:1px solid var(--navy); color:var(--white);
}
.nav .ghost:hover{background:var(--navy); border-color:var(--navy); color:var(--white); filter:brightness(1.4)}
.nav .ghost svg{width:15px; height:15px; flex:none}
.nav .ghost .lbl-short{display:none}
@media (max-width:760px){ .nav nav a.hide-sm{display:none} }
  /* Below 760px the links become a dropdown panel rather than disappearing,
   and the coffee button goes with them — it was the only thing left in the
   bar on a phone, which made the whole nav look like a single advert. The
   same nav element is reused as the panel, so there is one set of links to keep
   in step rather than two. */
.burger{display:none; padding:0; background:none; border:0; cursor:pointer}
.burger .x{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger[aria-expanded="true"] .bars{display:none}
@media (max-width:760px){
  .nav{position:relative}
  .burger{
    display:grid; place-items:center; margin-left:auto;
    width:40px; height:40px; border-radius:10px; color:var(--ink);
    border:1px solid var(--line); background:var(--white);
    transition:border-color .18s, background .18s;
  }
  .burger:hover{border-color:var(--line-2); background:var(--bg-2)}
  .burger svg{width:19px; height:19px}
  .nav nav{
    position:absolute; top:100%; left:0; right:0; z-index:2;
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    margin:0; padding:10px 24px 16px;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 20px 34px -24px rgba(11,15,67,.45);
  }
  .nav nav.open{display:flex}
  .nav nav.open a.hide-sm{display:block}
  .nav nav a{padding:12px 14px; font-size:.98rem}
  .nav .ghost{justify-content:center; margin-top:8px}
  .nav nav.open .lbl-full{display:inline}
  .nav nav.open .lbl-short{display:none}
}
@media (max-width:560px){
  .logo img{height:46px}
  .nav .ghost .lbl-full{display:none}
  .nav .ghost .lbl-short{display:inline}
}

/* ================= buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-size:.95rem; font-weight:500; cursor:pointer;
  padding:13px 24px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--white); color:var(--ink);
  transition:transform .14s var(--ease), border-color .2s, background .2s, box-shadow .25s;
}
.btn:hover{background:var(--bg-2); border-color:var(--navy); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px; height:16px}
.btn.primary{
  background:var(--accent); border-color:var(--accent); color:var(--white); font-weight:500;
  box-shadow:0 8px 22px -10px rgba(245,62,2,.75);
}
.btn.primary:hover{filter:brightness(.92); box-shadow:0 12px 30px -10px rgba(245,62,2,.85)}
.btn.navy{background:var(--navy); border-color:var(--navy); color:var(--white)}
.btn.navy:hover{filter:brightness(1.35)}
.btn:disabled{opacity:.55; cursor:default; transform:none}
.row{display:flex; gap:12px; flex-wrap:wrap}

/* ================= page head ================= */
.page-head{padding:64px 0 40px; border-bottom:1px solid var(--line); position:relative; isolation:isolate}
.page-head::before{
  content:""; position:absolute; inset:-260px 0 auto; height:620px; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 40% at 50% 46%, rgba(245,62,2,.11) 0%, rgba(245,62,2,.035) 42%, transparent 72%);
}
.eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 12px;
}
.page-head h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.85rem,4.4vw,2.6rem); letter-spacing:0; line-height:1.15; margin:0;
}
.page-head .lede{max-width:640px; margin:16px 0 0; color:var(--muted); font-weight:300}
.updated{margin:18px 0 0; font-size:.83rem; color:var(--dim)}

/* ================= prose ================= */
.prose{max-width:760px; padding:52px 0 88px}
.prose h2{
  font-family:var(--display); font-weight:400; letter-spacing:0;
  font-size:clamp(1.25rem,2.6vw,1.5rem); line-height:1.25;
  margin:52px 0 14px; scroll-margin-top:96px;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1rem; font-weight:700; margin:32px 0 10px; scroll-margin-top:96px}
.prose p{margin:0 0 16px; color:var(--muted); font-weight:300}
.prose strong{color:var(--ink); font-weight:500}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere}
.prose a:hover{text-decoration-thickness:2px}
/* Buttons and card headings are links too, but they are not body links and
   must not inherit the underline the paragraph rule above applies. */
.prose .btn{color:var(--ink); text-decoration:none}
.prose .btn.primary,.prose .btn.navy{color:var(--white)}
.prose .card h3 a{color:inherit; text-decoration:none}
.prose .card h3 a:hover{color:var(--accent)}
.prose ul{margin:0 0 16px; padding:0 0 0 22px; color:var(--muted); font-weight:300}
.prose li{margin:0 0 9px}
.prose li::marker{color:var(--accent)}
.prose hr{border:0; border-top:1px solid var(--line); margin:44px 0}

/* Definition rows: "the thing" on the left, what happens to it on the right. */
.rows{display:grid; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:0 0 20px; background:var(--white)}
.rows > div{display:grid; grid-template-columns:190px 1fr; gap:20px; padding:18px 22px}
.rows > div + div{border-top:1px solid var(--line)}
.rows dt,.rows b{font-weight:500; color:var(--ink); font-size:.92rem}
.rows dd,.rows span{margin:0; color:var(--muted); font-weight:300; font-size:.92rem}
@media (max-width:620px){ .rows > div{grid-template-columns:1fr; gap:6px} }

/* A short aside that should not read as body copy. */
.note{
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 12px 12px 0;
  padding:18px 22px; margin:0 0 24px; background:var(--bg-2);
}
.note p{margin:0; font-size:.92rem}
.note p + p{margin-top:10px}

/* In-page contents for the two long legal documents. */
.toc{border:1px solid var(--line); border-radius:14px; padding:22px 24px; margin:0 0 44px; background:var(--white)}
.toc h2{font-family:var(--body); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 14px}
.toc ol{margin:0; padding:0; list-style:none; columns:2; column-gap:32px}
.toc li{margin:0 0 8px; font-size:.9rem; break-inside:avoid}
.toc a{color:var(--muted); text-decoration:none}
.toc a:hover{color:var(--accent)}
@media (max-width:620px){ .toc ol{columns:1} }

/* ================= forms ================= */
.form{max-width:560px}
.field{margin:0 0 18px}
.field label{display:block; font-size:.88rem; font-weight:500; margin:0 0 7px}
.field input,.field textarea,.field select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line-2);
  font:inherit; font-size:.92rem; color:var(--ink); background:var(--white);
}
.field textarea{min-height:150px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.form-note{margin:14px 0 0!important; font-size:.85rem; color:var(--dim)}
.form-note.warn{color:var(--accent); font-weight:500}
.hp{position:absolute !important; left:-9999px; opacity:0; height:0; width:0}
/* data-size=flexible fills the width of this element, so it must be given the
   full width rather than being sized by its content. */
.cf-holder:not(:empty){margin:0 0 18px; width:100%}
.sent{display:flex; gap:12px; align-items:flex-start; padding:16px 18px;
  background:var(--white); border:1px solid var(--line); border-radius:12px}
.sent svg{width:19px; height:19px; margin-top:3px; color:var(--accent); flex:none}
.sent b{display:block; color:var(--ink); font-size:.95rem; margin-bottom:2px}
.sent span{display:block; color:var(--muted); font-size:.88rem; line-height:1.55; font-weight:300}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ================= cards ================= */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 0 28px}
@media (max-width:900px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .cards{grid-template-columns:1fr} }
.card{
  border:1px solid var(--line); border-radius:14px; padding:24px; background:var(--white);
  transition:border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.card:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:0 14px 32px -20px rgba(11,15,67,.3)}
.card h3{margin:0 0 6px; font-size:.98rem; font-weight:700}
.card p{margin:0; color:var(--muted); font-size:.88rem; font-weight:300}

/* ================= ad slots =================
   Nothing is served into these yet — no <ins> is placed anywhere on the site.
   The reservation exists so that when a unit is dropped in, the space is
   already accounted for in layout and the ad cannot push content down and
   cost a CLS score. See /js/ads.js for the loader that is live today. */
.ad{
  display:block; margin:40px auto; text-align:center;
  min-height:280px; /* matches a responsive unit's typical mobile height */
  max-width:970px;
}
.ad::before{
  content:"Advertisement"; display:block;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  margin:0 0 8px;
}
.ad ins{display:block}
@media (max-width:700px){ .ad{min-height:250px} }

/* ================= footer ================= */
footer{border-top:1px solid var(--line); padding:36px 0; font-size:.86rem; color:var(--dim)}
.foot{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.foot img{height:22px; width:auto; opacity:.85}
.foot a:hover{color:var(--ink)}
.foot .sp{margin-left:auto}
.foot-links{display:flex; gap:18px; flex-wrap:wrap}
@media (max-width:700px){
  .foot{flex-direction:column; align-items:stretch; text-align:center; gap:14px}
  .foot img{display:block; margin:0 auto}
  .foot .sp{margin-left:0}
  .foot-links{justify-content:center; gap:11px 13px}
}