/* ============================================================
   TBDS — tokens (straight from the Mini Brand Guideline)
   Shades marked (derived) are tints/shades of brand values,
   used only for surfaces and body text.
   ============================================================ */
:root{
  --navy:      #244253;
  --navy-deep: #1a3140;  /* derived */
  --teal:      #0d7797;
  --blue:      #2872ad;
  --sky:       #80bfea;
  --mist:      #e0e3ed;
  --white:     #ffffff;

  --ink:       #244253;
  --ink-soft:  #5c7382;  /* derived */
  --ink-faint: #8fa2ad;  /* derived */
  --surface:   #f7f8fb;  /* derived */
  --line:      #dfe4ea;  /* derived */

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --pad-x: clamp(20px, 5vw, 64px);
  --maxw: 1180px;

  --shadow: 0 1px 2px rgba(36,66,83,.04), 0 12px 32px -12px rgba(36,66,83,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;
  font-family:'Poppins',-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* ---------- type ---------- */
.eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 18px;
}
.eyebrow-light{color:var(--sky)}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.08}
h1{font-size:clamp(2.5rem,5.4vw,4.5rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:1.2rem; letter-spacing:-.01em; line-height:1.35}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--ink-soft); max-width:56ch; margin:22px 0 0}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x)}
.section{padding-block:clamp(64px,8vw,120px)}
.section-dark{background:var(--navy); color:var(--white)}
.section-tint{background:var(--surface)}
.section-dark .lede{color:rgba(255,255,255,.72)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:inherit; font-weight:500; font-size:.95rem;
  padding:13px 26px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:focus-visible{outline:2px solid var(--sky); outline-offset:3px}
.btn-primary{background:var(--teal); color:var(--white)}
.btn-primary:hover{background:var(--blue); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,.3)}
.btn-ghost:hover{border-color:var(--sky); color:var(--sky)}
.btn-quiet{background:var(--white); color:var(--navy); border-color:var(--line)}
.btn-quiet:hover{border-color:var(--teal); color:var(--teal)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(36,66,83,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-in{
  max-width:var(--maxw); margin-inline:auto; padding:14px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--white)}
.brand-logo{display:block; height:34px; width:auto}
.footer .brand-logo{height:30px}
.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.nav-links a{
  text-decoration:none; font-size:.9rem; font-weight:400;
  color:rgba(255,255,255,.76); transition:color .18s;
}
.nav-links a:hover{color:var(--sky)}
.nav-cta{padding:9px 20px; font-size:.85rem}
@media (max-width:860px){ .nav-links{display:none} }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--navy);
  color:var(--white);
  position:relative; overflow:hidden;
  padding-block:clamp(72px,10vw,140px);
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:56px; align-items:center;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:48px} }
.hero h1 .accent{
  background:linear-gradient(96deg,var(--sky),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero-note{margin:22px 0 0; font-size:.85rem; color:rgba(255,255,255,.5)}

/* the logo mark — hero ornament, gentle float (stilled under reduced-motion) */
.hero-logo{width:100%; max-width:360px; height:auto; margin-inline:auto; animation:floaty 6s ease-in-out infinite}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ---------- credential strip ---------- */
.strip{border-top:1px solid rgba(255,255,255,.09); background:var(--navy-deep); color:var(--white)}
.strip-in{
  max-width:var(--maxw); margin-inline:auto; padding:22px var(--pad-x);
  display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  color:rgba(255,255,255,.62);
}
.strip-in span{display:flex; align-items:center; gap:9px}
.dot{width:5px; height:5px; background:var(--sky); flex:none}

/* ============================================================
   CARDS / SERVICES
   ============================================================ */
.head{max-width:62ch; margin-bottom:clamp(40px,5vw,64px)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:860px){ .cards{grid-template-columns:1fr} }
.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px 28px 34px;
}
.card-ico{
  width:38px; height:38px; margin-bottom:22px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
}
.card-ico i{background:var(--mist); border-radius:1px}
.card-ico i:nth-child(3n+1){background:var(--sky)}
.card-ico i:nth-child(5){background:var(--teal)}
.card p{margin:12px 0 0; color:var(--ink-soft); font-size:.96rem}
/* service card tags: distinguish the live product from on-request capabilities */
.card-tag{
  display:inline-block; font-size:.62rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill); margin-bottom:16px;
}
.card-tag-live{background:rgba(13,119,151,.1); color:var(--teal)}
.card-tag-soon{background:var(--surface); color:var(--ink-faint); border:1px solid var(--line)}
.card-feature{border-color:var(--teal); box-shadow:var(--shadow)}
.card-soon{background:var(--surface)}
.card-soon h3{font-size:1.08rem}
.card-more{margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:860px){ .card-more{grid-template-columns:1fr} }
.card-link{display:inline-block; margin-top:16px; font-size:.86rem; font-weight:500; color:var(--teal); text-decoration:none}
.card-link:hover{text-decoration:underline}
.who{margin-top:34px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 26px; font-size:.92rem; color:var(--ink-soft); line-height:1.65}
.who b{color:var(--ink); font-weight:600}

/* ---------- steps (a real sequence, so it's numbered) ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.step{padding:30px 26px 34px; border-right:1px solid var(--line)}
.step:last-child{border-right:0}
@media (max-width:860px){ .step{border-right:0; border-bottom:1px solid var(--line)} }
.step-n{
  font-size:.72rem; font-weight:600; letter-spacing:.2em;
  color:var(--teal); margin-bottom:16px;
}
.step p{margin:9px 0 0; color:var(--ink-soft); font-size:.93rem}

/* ============================================================
   PRICING
   ============================================================ */
.credit-def{
  display:flex; gap:28px; align-items:center; flex-wrap:wrap;
  background:var(--navy); color:var(--white);
  border-radius:var(--r-lg); padding:30px 34px; margin-bottom:44px;
}
.credit-def .cd-sq{width:20px;height:20px;background:var(--sky);flex:none;border-radius:2px}
.credit-def p{margin:0; font-size:1.05rem; font-weight:500}
.credit-def small{display:block; font-weight:300; color:rgba(255,255,255,.6); font-size:.85rem; margin-top:5px; letter-spacing:0; text-transform:none}

/* VAT toggle */
.vat-row{display:flex; justify-content:flex-end; margin-bottom:20px}
.toggle{
  display:inline-flex; background:var(--mist); border-radius:var(--r-pill); padding:3px;
}
.toggle button{
  font:inherit; font-size:.8rem; font-weight:500; cursor:pointer;
  padding:7px 18px; border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--ink-soft); transition:.18s;
}
.toggle button[aria-pressed="true"]{background:var(--white); color:var(--navy); box-shadow:0 1px 3px rgba(36,66,83,.14)}
.toggle button:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

/* plans */
.plans{display:grid; grid-template-columns:1fr 1.25fr; gap:20px}
@media (max-width:860px){ .plans{grid-template-columns:1fr} }
.plan{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:34px 32px 36px; box-shadow:var(--shadow);
}
.plan-feature{border-color:var(--teal)}
.plan-tag{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--teal); margin-bottom:14px;
}
.price{display:flex; align-items:baseline; gap:6px; margin:20px 0 4px}
.price .cur{font-size:1.1rem; font-weight:500; color:var(--ink-soft)}
.price .val{font-size:3rem; font-weight:700; letter-spacing:-.04em; line-height:1}
.price .per{font-size:.88rem; color:var(--ink-soft); font-weight:400}
.price-sub{font-size:.82rem; color:var(--ink-faint); margin:0}
.tier-split{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0 4px}
@media (max-width:520px){ .tier-split{grid-template-columns:1fr} }
.tier{border:1px solid var(--line); border-radius:var(--r-md); padding:18px 18px 16px}
.tier-hi{background:var(--surface); border-color:var(--teal)}
.tier h4{margin:0 0 10px; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.tier-hi h4{color:var(--teal)}
.tier .price{margin:0}
.tier .price .val{font-size:2rem}
.feat{list-style:none; margin:26px 0 30px; padding:0}
.feat li{
  position:relative; padding-left:24px; margin-bottom:11px;
  font-size:.93rem; color:var(--ink-soft);
}
.feat li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; background:var(--sky); border-radius:1px;
}
.feat li.no::before{background:var(--mist)}

/* ---------- calculator ---------- */
.calc{
  margin-top:64px; background:var(--navy); color:var(--white);
  border-radius:var(--r-lg); overflow:hidden;
}
.calc-grid{display:grid; grid-template-columns:1fr 1fr}
@media (max-width:960px){ .calc-grid{grid-template-columns:1fr} }
.calc-controls{padding:clamp(28px,3.4vw,44px)}
.calc-viz{
  padding:clamp(28px,3.4vw,44px);
  background:var(--navy-deep); border-left:1px solid rgba(255,255,255,.07);
}
@media (max-width:960px){ .calc-viz{border-left:0; border-top:1px solid rgba(255,255,255,.07)} }

.field{margin-bottom:32px}
.field label{
  display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; color:rgba(255,255,255,.55); margin-bottom:14px;
}
.stepper{display:flex; align-items:center; gap:14px}
.stepper button{
  width:40px; height:40px; flex:none; cursor:pointer;
  border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.22);
  background:transparent; color:var(--white); font:inherit; font-size:1.2rem; line-height:1;
  transition:.18s;
}
.stepper button:hover:not(:disabled){background:var(--teal); border-color:var(--teal)}
.stepper button:disabled{opacity:.28; cursor:not-allowed}
.stepper button:focus-visible{outline:2px solid var(--sky); outline-offset:2px}
.stepper output{font-size:2rem; font-weight:700; min-width:2.6ch; text-align:center; letter-spacing:-.03em}
.stepper .unit{font-size:.85rem; color:rgba(255,255,255,.5)}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px;
  background:rgba(255,255,255,.18); border-radius:2px; outline:none; margin:14px 0 8px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--sky); cursor:pointer; border:3px solid var(--navy-deep);
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--sky);
  cursor:pointer; border:3px solid var(--navy-deep);
}
input[type=range]:focus-visible{outline:2px solid var(--sky); outline-offset:6px}
.range-val{display:flex; justify-content:space-between; align-items:baseline}
.range-val b{font-size:1.9rem; font-weight:700; letter-spacing:-.03em}
.range-val span{font-size:.8rem; color:rgba(255,255,255,.45)}

.readout{border-top:1px solid rgba(255,255,255,.1); padding-top:24px}
.line{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; font-size:.92rem}
.line span{color:rgba(255,255,255,.6)}
.line b{font-weight:500}
.line-total{
  border-top:1px solid rgba(255,255,255,.14); margin-top:12px; padding-top:20px;
  align-items:baseline;
}
.line-total span{color:var(--white); font-weight:500; font-size:1rem}
.line-total b{font-size:1.9rem; font-weight:700; letter-spacing:-.03em}
.eff{font-size:.8rem; color:var(--sky); text-align:right; margin:2px 0 0}
.tip{
  margin-top:22px; padding:16px 18px; border-radius:var(--r-md);
  background:rgba(128,191,234,.1); border:1px solid rgba(128,191,234,.3);
  font-size:.88rem; color:var(--sky); line-height:1.55;
}
.tip[hidden]{display:none}
.tip b{color:var(--white); font-weight:600}

/* the signature: one square = one trace */
.viz-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px}
.viz-head h4{margin:0; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:rgba(255,255,255,.55)}
.viz-head em{font-style:normal; font-size:.78rem; color:var(--sky)}
.viz-stage{position:relative; min-height:200px}
.block{
  display:grid; grid-template-columns:repeat(25,1fr); gap:3px;
  width:100%; max-width:320px;
}
.block i{
  aspect-ratio:1; background:rgba(255,255,255,.09); border-radius:1px;
  transition:background .3s ease;
}
.block i.used{background:var(--teal)}
/* top-up requirement: literal light-blue blocks, same grid as the included block */
.topwrap{margin-top:20px}
.topwrap[hidden]{display:none}
.topwrap-label{
  margin:0 0 12px; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500; color:var(--sky);
}
.topblock{
  display:grid; grid-template-columns:repeat(25,1fr); gap:3px;
  width:100%; max-width:320px;
}
.topblock i{aspect-ratio:1; background:var(--sky); border-radius:1px; display:none}
.topblock i.on{display:block}
.viz-legend{display:flex; gap:22px; margin-top:26px; font-size:.78rem; color:rgba(255,255,255,.5)}
.viz-legend span{display:flex; align-items:center; gap:8px}
.sw{width:10px; height:10px; border-radius:1px; flex:none}
.sw-inc{background:var(--teal)}
.sw-top{background:var(--sky)}
.sw-un{background:rgba(255,255,255,.14)}
.overflow-count{margin-top:18px; font-size:.82rem; color:var(--sky)}
.overflow-count[hidden]{display:none}

/* ---------- top-ups ---------- */
.topup{display:grid; grid-template-columns:.9fr 1.1fr; gap:20px; margin-top:24px}
@media (max-width:860px){ .topup{grid-template-columns:1fr} }
.packs{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.pack{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 18px; text-align:center; flex:1 1 84px; background:var(--white);
}
.pack b{display:block; font-size:1.25rem; font-weight:700; letter-spacing:-.02em}
.pack span{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.rate-table{width:100%; border-collapse:collapse; margin-top:20px}
.rate-table th{
  text-align:left; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--ink-faint); padding:0 0 12px; border-bottom:1px solid var(--line);
}
.rate-table th:last-child, .rate-table td:last-child{text-align:right}
.rate-table td{padding:15px 0; border-bottom:1px solid var(--line); font-size:.95rem}
.rate-table tr:last-child td{border-bottom:0}
.rate-table td b{font-weight:600}

/* ---------- fine print ---------- */
.fine{margin-top:52px; border-top:1px solid var(--line); padding-top:32px}
.fine ul{
  columns:2; column-gap:44px; list-style:none; margin:18px 0 0; padding:0;
  font-size:.86rem; color:var(--ink-soft); line-height:1.6;
}
@media (max-width:760px){ .fine ul{columns:1} }
.fine li{break-inside:avoid; margin-bottom:13px; padding-left:16px; position:relative}
.fine li::before{content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; background:var(--mist)}
.todo{background:#fff6d6; border-radius:2px; padding:0 4px; color:#7a5c00}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:24px 40px 24px 0; position:relative;
  font-weight:500; font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:10px; height:10px;
  border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.faq p{margin:0 0 26px; color:var(--ink-soft); font-size:.95rem; max-width:68ch}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{text-align:center}
.cta .lede{margin-inline:auto}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px}
.footer{background:var(--navy-deep); color:rgba(255,255,255,.6); padding-block:56px 40px; font-size:.86rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr} }
.footer h5{
  margin:0 0 18px; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:rgba(255,255,255,.4);
}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:10px}
.footer a{text-decoration:none; transition:color .18s}
.footer a:hover{color:var(--sky)}
.foot-bar{
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.78rem; color:rgba(255,255,255,.4);
}

/* ============================================================
   DOCUMENT PAGES  —  legal / policy pages (privacy, terms,
   PAIA, information officer). Prose-first, quiet, printable.
   ============================================================ */
.doc-head{background:var(--navy); color:var(--white); padding-block:clamp(54px,7vw,86px)}
.doc-head .eyebrow{color:var(--sky)}
.doc-head h1{font-size:clamp(2rem,4vw,3.2rem); max-width:20ch}
.doc-meta{
  margin:26px 0 0; font-size:.84rem; color:rgba(255,255,255,.55);
  display:flex; flex-wrap:wrap; gap:6px 26px;
}
.doc-meta b{font-weight:500; color:rgba(255,255,255,.8)}

.doc-body{padding-block:clamp(48px,6vw,84px)}
.doc-grid{display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start}
@media (max-width:900px){ .doc-grid{grid-template-columns:1fr; gap:32px} }

/* jump list */
.toc{position:sticky; top:90px; font-size:.86rem}
@media (max-width:900px){
  .toc{position:static; border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; background:var(--surface)}
}
.toc h2{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--ink-faint); margin:0 0 16px}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.toc li{margin-bottom:9px; counter-increment:toc}
.toc a{
  text-decoration:none; color:var(--ink-soft); display:block; line-height:1.45;
  transition:color .18s;
}
.toc a::before{content:counter(toc) ". "; color:var(--ink-faint)}
.toc a:hover{color:var(--teal)}

/* prose */
.prose{max-width:72ch; font-size:.97rem}
.prose h2{
  font-size:1.3rem; letter-spacing:-.01em; margin:0 0 16px;
  padding-top:8px; scroll-margin-top:90px;
}
.prose section{margin-bottom:46px}
.prose section:last-child{margin-bottom:0}
.prose h3{font-size:1rem; margin:28px 0 10px; font-weight:600}
.prose p{margin:0 0 15px; color:var(--ink-soft); line-height:1.75}
.prose ul,.prose ol{margin:0 0 16px; padding-left:22px; color:var(--ink-soft); line-height:1.7}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--ink-faint)}
.prose a{color:var(--teal); text-decoration:underline; text-underline-offset:2px}
.prose strong{color:var(--ink); font-weight:600}
.prose table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.9rem}
.prose th{
  text-align:left; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--ink-faint); padding:0 14px 11px 0; border-bottom:1px solid var(--line);
  vertical-align:bottom;
}
.prose td{padding:13px 14px 13px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top}
.prose tr:last-child td{border-bottom:0}
.prose .table-wrap{overflow-x:auto; margin-bottom:18px}
.prose .table-wrap table{margin-bottom:0}

/* definition-style contact block */
.contact-block{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:24px 26px; margin:0 0 18px;
}
.contact-block dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px; font-size:.92rem}
@media (max-width:560px){ .contact-block dl{grid-template-columns:1fr; gap:2px} }
.contact-block dt{color:var(--ink-faint); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; padding-top:3px}
.contact-block dd{margin:0; color:var(--ink-soft)}
.contact-block dd b{color:var(--ink); font-weight:600}

/* callouts */
.note{
  border-left:3px solid var(--teal); background:var(--surface);
  padding:18px 22px; margin:0 0 18px; font-size:.9rem; color:var(--ink-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.note b{color:var(--ink)}
/* unresolved content the client/attorney must supply — never ship these visible */
.confirm{
  background:#fff6d6; border-left:3px solid #d9a900; border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:16px 20px; margin:0 0 18px; font-size:.88rem; color:#6b5200; line-height:1.6;
}
.confirm b{color:#4d3b00; font-weight:600}
.confirm code{background:rgba(0,0,0,.06); padding:1px 5px; border-radius:3px; font-size:.92em}
mark.confirm-inline{background:#fff2c2; color:#6b5200; padding:1px 5px; border-radius:3px; font-weight:500}

/* download row */
.dl-row{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 18px}
.dl{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 20px;
  background:var(--white); transition:border-color .18s;
}
.dl:hover{border-color:var(--teal)}
.dl-ico{width:26px; height:26px; flex:none; display:grid; grid-template-columns:repeat(2,1fr); gap:2px}
.dl-ico i{background:var(--mist); border-radius:1px}
.dl-ico i:nth-child(1){background:var(--sky)}
.dl-ico i:nth-child(4){background:var(--teal)}
.dl-txt{line-height:1.35}
.dl-txt b{display:block; font-size:.92rem; font-weight:600; color:var(--ink)}
.dl-txt span{font-size:.76rem; color:var(--ink-faint)}
.dl[aria-disabled="true"]{opacity:.55; pointer-events:none}

/* cross-links between the legal pages */
.doc-nav{border-top:1px solid var(--line); margin-top:52px; padding-top:28px}
.doc-nav p{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; font-weight:500}
.doc-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px}
.doc-nav a{font-size:.9rem; color:var(--ink-soft); text-decoration:none}
.doc-nav a:hover{color:var(--teal)}
.doc-nav a[aria-current="page"]{color:var(--ink); font-weight:600}

@media print{
  .nav,.doc-nav,.toc,.footer,.confirm{display:none!important}
  .doc-head{background:none!important; color:var(--ink)!important; padding-block:0 24px}
  .doc-head h1,.doc-head .eyebrow,.doc-meta,.doc-meta b{color:var(--ink)!important}
  .doc-grid{grid-template-columns:1fr}
  .prose{max-width:none; font-size:10.5pt}
  .prose section{margin-bottom:22px; break-inside:avoid}
}