/* Self-hosted fonts — replaces Google Fonts to stop leaking visitor IPs
     to Google on every page load (see website/README.md, "Fonts are
     self-hosted"). Static weights only, no variable opsz axis: the site
     only ever uses the discrete weights below, and adding a build step
     just to ship a variable font isn't worth it for a no-build-step site. */
  @font-face{
    font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
    src:url('../fonts/fraunces-500.woff2') format('woff2');
  }
  @font-face{
    font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
    src:url('../fonts/fraunces-600.woff2') format('woff2');
  }
  @font-face{
    font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
    src:url('../fonts/manrope-400.woff2') format('woff2');
  }
  @font-face{
    font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
    src:url('../fonts/manrope-500.woff2') format('woff2');
  }
  @font-face{
    font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
    src:url('../fonts/manrope-600.woff2') format('woff2');
  }
  @font-face{
    font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
    src:url('../fonts/manrope-700.woff2') format('woff2');
  }
  @font-face{
    font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  }
  /* ==========================================================================
     NIGHT SKY THEME
     The whole site is one dark ground now, matching the "Guide & Sign" logo
     rather than using its colours only as an accent. --bg/--bg-2/--bg-3 are
     three steps of the same near-black navy (page / card surface / hover),
     the same two-tier relationship --paper/--white used to have. --brass-text
     is now the LIGHT gold (was --brass-light) since that's what reads on a
     dark ground; the old dark gold survives as --brass for decorative-only
     accents (dividers, icons) where full text contrast isn't required.
     ========================================================================== */
  :root{
    --bg:#0A121C;
    --bg-2:#1B2E42;
    --bg-3:#24384F;
    --ink:#F4F1E7;
    --slate:#D8DBDC;
    --brass:#B8863C;          /* decorative only — dividers, icons, thin rules */
    --brass-text:#D9AE6C;     /* text/buttons/links — the light gold, AA on dark */
    --brass-text-hover:#C89A56;
    --brass-light:#D9AE6C;    /* alias, same value — kept so existing references still resolve */
    --line:rgba(244,241,231,0.12);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;background:var(--bg);}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  /* No background-color on body, deliberately: body doesn't establish its
     own stacking context, so a background set here paints AFTER (on top
     of) the negative-z-index starfield canvas below, hiding it completely
     even though the canvas has real pixel data — a classic CSS gotcha.
     html's background is the only solid fill, and it sits at the true
     root of the paint order, beneath the canvas. */

  /* Fixed full-viewport canvas the StarField module (main.js) draws into.
     z-index:-1 keeps it beneath normal content but above body's own solid
     background fill, which is how a negative-z-index fixed descendant
     actually paints per the CSS stacking spec. */
  .ambient-sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;}
  .skip-link{
    position:absolute;left:-999px;top:auto;
    background:var(--bg-3);color:var(--ink);padding:12px 20px;
    z-index:200;border-radius:4px;font-size:14px;font-weight:600;
  }
  .skip-link:focus{left:16px;top:16px;}
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    margin:0;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1560px;margin:0 auto;padding:0 32px;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brass-text);
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow::before{content:"";width:16px;height:1px;background:var(--brass);display:inline-block;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:3px;
    font-weight:600;
    font-size:15px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn-primary{background:var(--brass-text);color:var(--bg);}
  .btn-primary:hover{background:var(--brass-text-hover);transform:translateY(-1px);}
  .btn-primary:focus-visible{outline:2px solid var(--brass-text);outline-offset:2px;}
  .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent;}
  .btn-ghost:hover{border-color:var(--brass-text);}
  .btn-ghost:focus-visible{outline:2px solid var(--brass-text);outline-offset:2px;}

  /* ===== NAV ===== */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(10,18,28,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav{
    max-width:1560px;margin:0 auto;padding:16px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    display:flex;align-items:center;gap:14px;
    font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--ink);
  }
  .logo svg{width:48px;height:48px;flex-shrink:0;}
  .logo.footer-brand svg{width:76px;height:76px;}
  .nav-links{display:flex;gap:36px;font-size:17px;font-weight:500;color:var(--slate);}
  .nav-links a:hover{color:var(--ink);}
  .nav-cta{display:flex;align-items:center;gap:20px;}
  @media (max-width:1000px){.nav-links{display:none;}}

  /* ===== HERO ===== */
  .hero{padding:88px 0 96px;}
  .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center;}
  @media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:48px;}}
  /* The hero text previously sat directly on the starfield canvas, so
     contrast varied with whatever was drawn behind it. A solid card, same
     tone used for every other text block on the site, fixes that. */
  .hero-grid > div:first-child{
    background:var(--bg-3);border:1px solid var(--line);
    border-radius:14px;padding:36px 40px;
  }
  @media (max-width:520px){.hero-grid > div:first-child{padding:28px 24px;}}
  .hero h1{font-size:clamp(34px,4.8vw,64px);line-height:1.06;margin-top:20px;}
  .hero-sub{margin-top:22px;font-size:19px;color:var(--slate);max-width:48ch;}
  .hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
  .hero-note{margin-top:18px;font-size:13px;color:var(--slate);font-family:'IBM Plex Mono',monospace;}

  /* Compass dial */
  .dial-wrap{display:flex;justify-content:center;}
  .dial{width:100%;max-width:360px;}
  .dial-ring{fill:none;stroke:var(--line);stroke-width:1;}
  .dial-tick{stroke:var(--slate);stroke-width:1;opacity:0.5;}
  .dial-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.08em;fill:var(--slate);}
  .dial-needle-pivot{
    transform-origin:180px 180px;
    transition:transform 1.6s cubic-bezier(.65,0,.35,1);
  }
  .dial-needle{
    transform-origin:180px 180px;
    animation:swing 2.4s cubic-bezier(.34,1.4,.4,1) 0.3s 1 both,
              needle-sway 6.5s ease-in-out 2.7s infinite;
  }
  @keyframes swing{
    0%{transform:rotate(-70deg);}
    60%{transform:rotate(15deg);}
    100%{transform:rotate(0deg);}
  }
  @keyframes needle-sway{
    0%{transform:rotate(0deg);}
    20%{transform:rotate(-2.6deg);}
    38%{transform:rotate(1.8deg);}
    55%{transform:rotate(-1.2deg);}
    74%{transform:rotate(2.4deg);}
    90%{transform:rotate(-0.8deg);}
    100%{transform:rotate(0deg);}
  }
  /* ======================================================================
     Brand mark — "Guide & Sign": a compass rose with a comet-gradient arc
     sweeping past it. The small header/footer nav mark and the legal-page
     header use just the rose + arc. The larger footer-brand mark adds the
     Polaris (Ursa Minor) and Libra constellations from the same design —
     see website/README.md's "Brand mark" section for the full rationale.
     ====================================================================== */
  .mk-rose-cardinal{fill:var(--brass-text);}
  .mk-rose-inter{fill:var(--brass);}
  .mk-rose-dot{fill:var(--ink);}
  .mk-arc-group{transform-box:fill-box;transform-origin:50% 50%;animation:mk-arc-spin 16s linear infinite;}
  @keyframes mk-arc-spin{to{transform:rotate(360deg);}}
  .mk-arrow{fill:var(--brass-text);}

  /* Footer-brand only: ambient stars, twinkling on their own cycle. Delay/
     opacity per star is set positionally rather than via inline style="",
     since the CSP (style-src 'self') blocks inline style attributes
     outright. These sit alongside the page-wide StarField canvas — this is
     the tight cluster woven directly into the mark itself. */
  .mk-star{fill:var(--ink);animation:mk-twinkle 4s ease-in-out infinite;}
  @keyframes mk-twinkle{0%,100%{opacity:var(--mk-op,0.5);}50%{opacity:calc(var(--mk-op,0.5) * 0.2);}}
  [data-footer-mark] .mk-star:nth-of-type(1){--mk-op:0.5;animation-delay:0.2s;}
  [data-footer-mark] .mk-star:nth-of-type(2){--mk-op:0.75;animation-delay:1.4s;}
  [data-footer-mark] .mk-star:nth-of-type(3){--mk-op:0.6;animation-delay:2.6s;}
  [data-footer-mark] .mk-star:nth-of-type(4){--mk-op:0.8;animation-delay:0.8s;}
  [data-footer-mark] .mk-star:nth-of-type(5){--mk-op:0.55;animation-delay:3.1s;}
  [data-footer-mark] .mk-star:nth-of-type(6){--mk-op:0.7;animation-delay:1.9s;}

  /* Footer-brand only: the two constellations (Polaris/Ursa Minor, Libra).
     JS drifts each <g data-const-drift> gently inside its own bounding box
     — see main.js BrandMark. It animates via the SVG transform= attribute,
     not element.style, for the same CSP reason as above. */
  .mk-const-star{fill:var(--brass-text);}
  .mk-const-line{stroke:var(--brass-text);stroke-width:1;opacity:0.6;fill:none;}
  .dial-center-stat{font-family:'Fraunces',serif;font-size:30px;fill:var(--ink);}
  .dial-center-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.1em;fill:var(--brass-text);}

  /* ===== SECTION SHARED ===== */
  section{padding:88px 0;}
  /* A soft dark overlay rather than a different solid colour — dims the
     starfield slightly for section-to-section rhythm without blocking it,
     since every plain section is deliberately transparent over the shared
     .ambient-sky canvas. */
  .section-alt{background:rgba(4,8,13,0.4);}
  .section-head{
    max-width:640px;margin-bottom:56px;
    background:var(--bg-3);border:1px solid var(--line);
    border-radius:14px;padding:32px 36px;
  }
  .section-head h2{font-size:clamp(26px,3.4vw,42px);margin-top:16px;}
  .section-head p{margin-top:16px;color:var(--slate);font-size:18px;}
  @media (max-width:520px){.section-head{padding:24px 22px;}}

  /* ===== PROBLEM SPLIT ===== */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
  @media (max-width:760px){.split{grid-template-columns:1fr;}}
  .split-col{background:var(--bg-2);padding:40px;}
  .split-col h3{font-size:22px;margin-top:10px;}
  .split-col .col-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--brass-text);}
  .stat-list{margin-top:28px;display:flex;flex-direction:column;gap:22px;}
  .stat-item{display:flex;gap:16px;align-items:baseline;border-top:1px solid var(--line);padding-top:18px;}
  .stat-item:first-child{border-top:none;padding-top:0;}
  .stat-num{font-family:'Fraunces',serif;font-size:26px;color:var(--ink);white-space:nowrap;min-width:120px;flex-shrink:0;}
  .stat-text{color:var(--slate);font-size:15px;}

  /* ===== INDUSTRY TOGGLE ===== */
  .audience-toggle{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:22px;margin-bottom:24px;}
  .audience-btn{
    font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:600;
    padding:9px 18px;border-radius:24px;border:none;background:transparent;
    color:var(--slate);cursor:pointer;transition:background .18s ease,color .18s ease;
  }
  .audience-btn.active{background:var(--brass-text);color:var(--bg);}
  .audience-btn:focus-visible{outline:2px solid var(--brass-text);outline-offset:2px;}
  .compliance-badge{
    display:inline-flex;align-items:center;gap:8px;margin-top:18px;
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.04em;color:var(--slate);
  }
  .compliance-badge::before{content:"✓";color:var(--brass-text);font-weight:700;}
  .split-col{transition:opacity .25s ease, box-shadow .25s ease;}
  .split-col.is-dimmed{opacity:0.45;}
  .split-col.is-active{box-shadow:inset 0 0 0 2px var(--brass);}

  /* ===== SERVICES ===== */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:auto auto;
    gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  }
  @media (max-width:860px){
    .services-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .services-grid{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .services-grid--preview{grid-template-columns:1fr;}
  }
  .service-card{background:var(--bg-2);padding:32px 28px;transition:background .18s ease;}
  .service-card:hover{background:var(--bg-3);}
  .service-mark{
    width:34px;height:34px;border-radius:50%;
    border:1px solid var(--brass-text);color:var(--brass-text);
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-size:12px;
  }
  .service-card h3{font-size:18px;margin-top:18px;}
  .service-card p{margin-top:10px;color:var(--slate);font-size:14.5px;}
  .service-card .service-example{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;font-style:italic;}
  .service-card .service-example strong{font-style:normal;color:var(--ink);}

  /* ===== HOW IT WORKS ===== */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media (max-width:760px){.steps{grid-template-columns:1fr;}}
  .step{
    position:relative;padding:28px 26px;
    background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--brass);
    border-radius:0 0 10px 10px;
  }
  .step-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--brass-text);letter-spacing:0.1em;}
  .step h3,.step h2{font-size:19px;margin-top:12px;}
  .step p{margin-top:10px;color:var(--slate);font-size:14.5px;}

  /* ===== TRUST ===== */
  .trust-bar{
    display:flex;align-items:center;gap:14px;margin-bottom:44px;flex-wrap:wrap;
    background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
    padding:16px 20px;
  }
  .stars{color:var(--brass-text);font-size:18px;letter-spacing:2px;}
  .trust-bar-text{font-size:14px;color:var(--slate);}
  .testimonial-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;}
  @media (max-width:760px){.testimonial-grid{grid-template-columns:1fr;}}
  .testimonial-card{
    background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
    padding:36px;display:flex;flex-direction:column;justify-content:space-between;
  }
  .testimonial-card p{font-family:'Fraunces',serif;font-size:19px;color:var(--ink);line-height:1.5;}
  .testimonial-attrib{margin-top:22px;font-size:13.5px;color:var(--slate);font-family:'IBM Plex Mono',monospace;}
  .stat-block{
    background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
    padding:36px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px;
  }
  .stat-block > div{text-align:center;}
  .stat-block .num{font-family:'Fraunces',serif;font-size:32px;color:var(--brass-text);}
  .stat-block .lbl{font-size:13px;color:var(--slate);margin-top:4px;}

  /* ===== PRICING ===== */
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media (max-width:860px){.pricing-grid{grid-template-columns:1fr;}}
  .price-card{
    background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
    padding:36px 30px;display:flex;flex-direction:column;
  }
  .price-card.featured{border-color:var(--brass-text);box-shadow:0 0 0 1px rgba(217,174,108,0.15),0 20px 40px -12px rgba(0,0,0,0.5);}
  .price-tier{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass-text);}
  .price-card h3{font-size:22px;margin-top:10px;}
  .price-card p{margin-top:16px;font-size:14.5px;color:var(--slate);}

  /* ===== FAQ ===== */
  .faq-list{display:flex;flex-direction:column;gap:14px;}
  .faq-item{
    background:var(--bg-2);border:1px solid var(--line);
    border-radius:10px;padding:24px 28px;
  }
  .faq-item h2,.faq-item h3{font-size:17px;font-weight:600;font-family:'Manrope',sans-serif;color:var(--ink);}
  .faq-item p{margin-top:10px;color:var(--slate);font-size:15px;max-width:70ch;}

  /* ===== CTA BAND ===== */
  .cta-band{
    background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
    padding:64px 48px;text-align:center;
  }
  .cta-band p{color:var(--slate);margin-top:14px;font-size:16px;}
  .cta-band .hero-actions{justify-content:center;margin-top:30px;}

  /* ===== FOOTER ===== */
  footer{padding:56px 0 40px;}
  .footer-grid{
    display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;
    background:var(--bg-3);border:1px solid var(--line);border-radius:14px;
    padding:36px 40px;
  }
  @media (max-width:520px){.footer-grid{padding:26px 22px;}}
  .footer-note{font-size:13px;color:var(--slate);max-width:40ch;}
  .footer-links{display:flex;gap:24px;font-size:14px;color:var(--slate);}
  .footer-links a:hover{color:var(--ink);}

  /* ===== SUB-PAGE HEADER (for dedicated pages) ===== */
  .page-header{
    margin:40px 0;padding:36px 40px;
    background:var(--bg-3);border:1px solid var(--line);border-radius:14px;
  }
  .page-header .eyebrow{margin-bottom:16px;}
  .page-header h1{font-size:clamp(30px,4.2vw,52px);line-height:1.08;}
  .page-header p{margin-top:18px;font-size:18px;color:var(--slate);max-width:58ch;}
  @media (max-width:520px){.page-header{padding:26px 22px;}}
  .breadcrumb{font-size:13px;color:var(--slate);margin-bottom:20px;}
  .breadcrumb a{color:var(--slate);}
  .breadcrumb a:hover{color:var(--ink);}
  .teaser-link{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--ink);margin-top:18px;}
  .teaser-link:hover{color:var(--brass-text);}
  .page-cta{background:rgba(4,8,13,0.4);padding:64px 0;text-align:center;}
  .page-cta .wrap{
    background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
    padding:56px 40px;max-width:720px;
  }
  @media (max-width:520px){.page-cta .wrap{padding:36px 24px;}}
  .page-cta h2{font-size:clamp(22px,2.8vw,30px);}
  .page-cta p{margin-top:12px;color:var(--slate);font-size:16px;}
  .page-cta .hero-actions{justify-content:center;margin-top:26px;}

/* ==========================================================================
   COOKIE CONSENT CARD
   A small card anchored bottom-left rather than a full-width bar, with a
   Customize step that reveals real per-category toggles (Essential, always
   on; Analytics; Marketing). Styled after absoluteepm.com's pattern, at the
   user's request. Functional, not decorative: see main.js Consent module —
   each toggle's saved state actually gates whether that category's scripts
   are allowed to run, not just which button was clicked last.
   ========================================================================== */
.cookie-card{
  position:fixed;left:20px;bottom:20px;z-index:100;
  width:380px;max-width:calc(100vw - 40px);
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;padding:24px 24px 22px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.6);
}
.cookie-card[hidden]{display:none;}
.cookie-card h2{font-size:17px;margin:0 0 10px;}
.cookie-card__text{font-size:12.5px;line-height:1.55;color:var(--slate);margin:0 0 18px;}
.cookie-card__text a{color:var(--brass-text);text-decoration:underline;text-underline-offset:2px;}
.cookie-card__actions{display:flex;gap:8px;flex-wrap:wrap;}
.cookie-btn{
  font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:600;
  padding:10px 16px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  transition:border-color .18s ease,background .18s ease;
}
.cookie-btn:hover{border-color:var(--brass-text);}
.cookie-btn:focus-visible{outline:2px solid var(--brass-text);outline-offset:2px;}
.cookie-btn--accept{background:var(--brass-text);color:var(--bg);border-color:var(--brass-text);}
.cookie-btn--accept:hover{background:var(--brass-text-hover);border-color:var(--brass-text-hover);}

.cookie-customize{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;
}
.cookie-customize[hidden]{display:none;}
.cookie-customize-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.cookie-customize-row .row-label{font-size:13px;font-weight:600;color:var(--ink);}
.cookie-customize-row .row-desc{font-size:11.5px;color:var(--slate);margin-top:3px;line-height:1.45;}
.cookie-customize .cookie-btn--accept{margin-top:2px;}

/* Accessible toggle switch: a real checkbox, visually hidden, driving a
   styled track+thumb via the adjacent-sibling selector — keyboard and
   screen-reader operable, not a div pretending to be a control. */
.toggle-switch{position:relative;flex-shrink:0;display:inline-flex;align-items:center;}
.toggle-switch input{
  position:absolute;opacity:0;width:36px;height:20px;margin:0;cursor:pointer;
}
.toggle-switch input:disabled{cursor:not-allowed;}
.toggle-track{
  width:36px;height:20px;border-radius:20px;
  background:var(--bg-3);border:1px solid var(--line);
  position:relative;transition:background .18s ease,border-color .18s ease;
  pointer-events:none;
}
.toggle-thumb{
  position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;
  background:var(--slate);transition:transform .18s ease,background .18s ease;
}
.toggle-switch input:checked + .toggle-track{background:var(--brass-text);border-color:var(--brass-text);}
.toggle-switch input:checked + .toggle-track .toggle-thumb{transform:translateX(16px);background:var(--bg);}
.toggle-switch input:disabled + .toggle-track{opacity:0.55;}
.toggle-switch input:focus-visible + .toggle-track{outline:2px solid var(--brass-text);outline-offset:2px;}

/* Footer button styled as a link (cookie preferences re-open) */
.link-button{
  background:none;border:none;padding:0;
  font:inherit;color:inherit;cursor:pointer;
}
.link-button:hover{color:var(--ink);}
.link-button:focus-visible{outline:2px solid var(--brass-text);outline-offset:2px;}

/* Footer legal/company line */
.footer-legal{
  margin-top:14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
}

/* Footer brand mark spacing */
.footer-brand{margin-bottom:10px;}

/* Utility: lightweight left-aligned in-page CTA, its own smaller card
   rather than the full-width band .page-cta normally is */
.cta-inline{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:32px 36px;text-align:left;max-width:none;
}
.cta-inline .teaser-link{margin-top:14px;}

/* ==========================================================================
   LEGAL PAGES (privacy policy, cookie policy)
   Narrow prose layout. Scoped under .legal so these rules never leak into
   the marketing pages, and so both share the same design tokens above
   rather than redeclaring them.
   ========================================================================== */
.legal{line-height:1.65;}
.legal .wrap{max-width:760px;padding:56px 24px 96px;}
/* The whole document reads as one continuous piece of prose, so it gets
   one card rather than boxing each heading separately. */
.legal-doc{
  background:var(--bg-3);border:1px solid var(--line);border-radius:14px;
  padding:40px 44px;
}
@media (max-width:520px){.legal-doc{padding:28px 24px;}}
.legal .legal-header{border-bottom:1px solid var(--line);padding:20px 0;background:rgba(10,18,28,0.88);backdrop-filter:blur(8px);}
.legal .legal-header__inner{
  max-width:760px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:10px;
  font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:var(--ink);
}
.legal .legal-header__inner svg{width:26px;height:26px;}
.legal .back-link{display:inline-block;margin-bottom:28px;font-size:14px;color:var(--slate);}
.legal .back-link:hover{color:var(--ink);}
.legal h1{font-size:32px;margin:0 0 8px;}
.legal h2{font-size:20px;margin:40px 0 12px;}
.legal .updated{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;color:var(--slate);margin-bottom:40px;
}
.legal p,
.legal li{font-size:15.5px;color:var(--ink);}
.legal ul{padding-left:20px;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--brass-text);text-decoration:underline;}
.placeholder{
  background:#3A2E12;padding:1px 5px;border-radius:3px;
  color:#F0C96B;font-family:'IBM Plex Mono',monospace;font-size:inherit;
}
.legal .note{
  background:var(--bg-2);border-left:3px solid var(--brass-text);
  padding:18px 20px;font-size:14px;color:var(--slate);
  margin:32px 0;border-radius:0 6px 6px 0;
}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;}
.legal th,
.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.legal th{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--slate);
}

/* ==========================================================================
   PROSE LINKS
   The global `a{color:inherit;text-decoration:none}` is right for nav and
   buttons, but inside body copy a link must be distinguishable by more than
   colour alone (WCAG 1.4.1).
   ========================================================================== */
.faq-item p a,
.section-head p a,
.split-col a:not(.btn),
.service-card p a{
  color:var(--brass-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
.faq-item p a:hover,
.section-head p a:hover{color:var(--brass-text-hover);}

/* ==========================================================================
   MOBILE NAVIGATION
   Previously .nav-links was simply hidden below 760px, leaving phone users
   with no way to reach any page. Now hidden behind a real disclosure button.
   ========================================================================== */
.nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;               /* 44px min touch target */
  padding:0;border:1px solid var(--line);border-radius:4px;
  background:transparent;cursor:pointer;color:var(--ink);
}
.nav-toggle:focus-visible{outline:2px solid var(--brass-text);outline-offset:2px;}
.nav-toggle svg{width:20px;height:20px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

@media (max-width:1000px){
  nav{flex-wrap:wrap;gap:12px;}
  .nav-toggle{display:inline-flex;order:3;}
  .nav-cta{order:2;}
  .nav-cta .btn{padding:11px 18px;font-size:14px;}

  .nav-links{
    display:none;
    order:4;flex-basis:100%;
    flex-direction:column;gap:0;
    border-top:1px solid var(--line);
    margin-top:4px;padding-top:4px;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{
    padding:14px 4px;
    border-bottom:1px solid var(--line);
    font-size:15px;
  }
  .nav-links a:last-child{border-bottom:none;}
}

@media (max-width:520px){
  .wrap{padding:0 20px;}
  .nav-cta .btn{padding:10px 14px;font-size:13.5px;}
}

/* ==========================================================================
   RESPONSIVE REFLOW
   Audience toggle and footer links previously had no wrapping behaviour and
   overflowed on narrow screens / at 200% zoom (WCAG 1.4.4, 1.4.10).
   ========================================================================== */
@media (max-width:620px){
  .audience-toggle{
    display:flex;flex-wrap:wrap;width:100%;
    border-radius:8px;gap:4px;
  }
  .audience-btn{flex:1 1 auto;min-height:44px;font-size:12.5px;padding:9px 12px;}
}

.footer-links{flex-wrap:wrap;}

@media (max-width:620px){
  .footer-grid{flex-direction:column;}
  .footer-links{flex-direction:column;gap:14px;align-items:flex-start;}
  .cookie-card{left:12px;right:12px;bottom:12px;width:auto;max-width:none;}
}

/* Trust section with no testimonial yet — single column rather than 2fr/1fr */
.testimonial-grid--solo{grid-template-columns:1fr;}

/* Qualifier on marketing statistics (ASA/CAP substantiation) */
.claims-note{
  margin-top:24px;font-size:12.5px;color:var(--slate);
  max-width:70ch;line-height:1.5;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:14px 18px;
}