/*
Theme Name: California Unclaimed Property Services
Theme URI: https://californiaunclaimedpropertyservices.org/
Author: California Unclaimed Property Services
Description: Custom theme for California Unclaimed Property Services — unclaimed property search, claim preparation and notarization. Navy #0A2440 / Gold #C9A22C, Public Sans + Source Serif 4, WCAG 2.1 AA.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: cups
Tags: business, custom-colors, accessibility-ready
*/

/* ==========================================================================
   California Unclaimed Property Services — design system
   Navy #0A2440 · Gold #C9A22C · Public Sans + Source Serif 4 · WCAG 2.1 AA
   ========================================================================== */

:root{
  /* ── THE TEN. Five tiers, two values each. Nothing else is decided. ── */
  /* 1 · GROUND */      --navy-800:#0A2440; --navy-900:#061527;
  /* 2 · ACTION */      --gold-500:#C9A22C; --gold-600:#856811;
  /* 3 · TEXT */        --ink-800:#242D38;  --ink-600:#525E6C;
  /* 4 · SURFACE */     --rule-200:#DEE3E9; --paper-50:#F7F9FB;
  /* 5 · SEMANTIC */    --success-700:#1B6642; --notice-700:#8C1D2C;

  /* ── DERIVED. Every value below is computed from the ten above. ── */
  --navy-hover:#273E57;    /* Navy 800 + 12% white  */
  --navy-tint:#F0F2F4;     /* Navy 800 @ 6% on white */
  --navy-line:#1F2C3D;     /* White @ 10% on Navy 900 */
  --on-navy:#D3D8DD;       /* White @ 82% on Navy 800 */
  --on-navy-dim:#A2ACB6;   /* White @ 62% on Navy 800 */
  --gold-tint:#F7F2E1;     /* Gold 500 @ 14% on white */
  --gold-line:#E1CC8B;     /* Gold 500 @ 55% on white */
  --ink-400:#626D7A;       /* Ink 600 @ 84% on white; AA on every light surface */
  --rule-strong:#BABFC4;   /* Ink 600 @ 40% on white */
  --rule-soft:#EDF0F3;     /* Rule 200 @ 55% on white */
  --ok-tint:#E8F0EC;       /* Success @ 10% on white */
  --no-tint:#F6EDEE;       /* Notice @ 8% on white */
  --hover-light:var(--rule-soft);  /* every hover on a light surface, ΔE 3.63 from white */
  --white:#FFFFFF;

  /* ── ALIASES. Legacy names map onto the ten so nothing else changes. ── */
  --navy-700:var(--navy-hover); --navy-600:var(--navy-800);
  --navy-100:var(--on-navy);    --navy-50:var(--navy-tint);
  --gold-400:var(--gold-500);   --gold-100:var(--gold-tint);
  --gray-900:var(--ink-800);    --gray-800:var(--ink-800);
  --gray-700:var(--ink-800);    --gray-600:var(--ink-600);
  --gray-500:var(--ink-600);    --gray-400:var(--ink-400);
  --gray-300:var(--rule-strong);--gray-200:var(--rule-200);
  --gray-100:var(--rule-soft);  --gray-50:var(--paper-50);
  --green-700:var(--success-700); --green-50:var(--ok-tint);
  --red-700:var(--notice-700);    --red-50:var(--no-tint);

  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --wrap:1320px; --prose:780px; --doc:820px;
  --r:4px;
  --sh:0 1px 2px rgba(10,36,64,.06),0 2px 8px rgba(10,36,64,.06);
  --sh-lg:0 2px 4px rgba(10,36,64,.06),0 12px 28px rgba(10,36,64,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--gray-800);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-600);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--navy-800)}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--navy-800);margin:0 0 .5em;line-height:1.2}
h1{font-size:clamp(34px,4.6vw,52px);font-weight:600;line-height:1.06;letter-spacing:-0.018em;margin:0 0 16px}
h2{font-size:clamp(26px,3.0vw,34px);font-weight:600;line-height:1.15;letter-spacing:-0.012em;margin:0 0 12px}
h3{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-0.005em;margin:0 0 8px}
h4{font-size:16px;font-family:var(--sans);font-weight:700;line-height:1.4;margin:0 0 6px}
p{margin:0 0 18px;max-width:74ch}
.lede{font-size:clamp(17.5px,1.4vw,19px);line-height:1.6;color:var(--gray-700);max-width:62ch}
h1+.lede,.page-hero h1+.lede,.hero h1+.lede{margin-top:0}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-600);margin:0 0 10px}
.eyebrow.on-dark{color:var(--gold-400)}
@media(max-width:640px){
  h1{margin-bottom:12px}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,3vw,40px)}
.prose{max-width:var(--prose)}
/* ---------- the document column ----------
   Reading text wants about 80 characters, which is far narrower than the grid
   shell the home page needs. Rather than strand that column against the left
   edge of a wide page, a document page centres heading, breadcrumbs and prose
   on one axis, so the margins read as deliberate rather than as dead space. */
.wrap.prose{max-width:var(--doc)}
.wrap.prose>*{max-width:var(--prose);margin-left:auto;margin-right:auto}
.wrap.prose>.tbl,.wrap.prose>div[style*='overflow-x'],.wrap.prose>.steps{max-width:none;width:100%}

/* The hero and breadcrumbs share that axis so nothing steps sideways as you
   scroll from the title into the body. */
.page-hero .wrap,.crumbs .wrap{max-width:var(--doc)}
.page-hero h1{max-width:none}

/* Wide furniture — full-bleed bands and grids — keeps the broad shell. */
.hero .wrap,.statband .wrap,.ctaband .wrap,.sitefoot .wrap,
.masthead .wrap,.utility .wrap,.trustbar .wrap,.stickysearch .wrap{max-width:var(--wrap)}
.section{padding:80px 0}
.section.tight{padding:36px 0}
.section.alt{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}
.section.navy{background:var(--navy-800);color:var(--navy-100)}
.section.navy h2,.section.navy h3{color:var(--white)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.screen-reader-text,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--gold-500);color:var(--navy-800);
  padding:10px 16px;border-radius:var(--r);font-weight:700;text-decoration:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.01em;
  padding:15px 28px;min-height:50px;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;text-align:center;transition:background .15s,color .15s}
.btn-gold{background:var(--gold-500);color:var(--navy-900);border-color:var(--gold-500)}
.btn-gold:hover{background:var(--gold-400);color:var(--navy-900)}
.btn-navy{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn-navy:hover{background:var(--navy-700);color:#fff}
.btn-ghost{background:transparent;color:var(--navy-800);border-color:var(--gray-300)}
.btn-ghost:hover{border-color:var(--navy-800);color:var(--navy-800)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn-sm{padding:9px 16px;font-size:14px}

/* ---------- utility bar + header ---------- */
.utility{background:var(--navy-900);color:var(--navy-100);font-size:13.5px}
.utility .wrap{display:flex;gap:20px;align-items:center;min-height:38px;flex-wrap:wrap}
.utility a{color:var(--navy-100);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;min-height:24px;padding:0 2px}
.utility a:hover{color:var(--gold-400);text-decoration:underline}
.utility .sep{color:var(--on-navy-dim)}
.utility .right{margin-left:auto;color:var(--on-navy-dim)}

.masthead{background:var(--navy-800);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.masthead .wrap{display:flex;align-items:center;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand svg{width:44px;height:44px;flex:none}
.brand .bt{display:block;font-family:var(--sans);font-weight:800;font-size:15px;
  letter-spacing:1.4px;color:#fff;line-height:1.25}
.brand .bs{display:block;font-family:var(--sans);font-weight:600;font-size:12.5px;
  letter-spacing:1.4px;color:var(--gold-400);line-height:1.25}

.nav{margin-left:auto;display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.nav>li{list-style:none;position:relative}
.nav ul{margin:0;padding:0}
.nav>li>a{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;
  font-weight:600;font-size:15.5px;padding:12px 11px;border-radius:var(--r);
  /* A long label was breaking onto four lines and pushing the bar to 200px. */
  white-space:nowrap}
.nav>li>a:hover,.nav>li:focus-within>a{background:var(--navy-700);color:#fff}
.nav .caret{width:9px;height:9px;flex:none;opacity:.75}
.submenu{position:absolute;top:100%;left:0;min-width:262px;background:#fff;
  border:1px solid var(--gray-200);border-top:3px solid var(--gold-500);
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.14s}
.nav>li:hover .submenu,.nav>li:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu li{list-style:none}
.submenu a{display:block;padding:10px 12px;color:var(--gray-800);text-decoration:none;
  font-size:15px;font-weight:600;border-radius:3px}
.submenu a:hover{background:var(--hover-light);color:var(--navy-800);box-shadow:inset 3px 0 0 var(--gold-500)}
.nav-cta{margin-left:8px}
.nav>li.nav-cta>a.btn-gold{background:transparent;border:1.5px solid rgba(255,255,255,.42);
  color:#fff;font-size:14.5px;padding:10px 14px}
.nav>li.nav-cta>a.btn-gold:hover{background:rgba(255,255,255,.10);border-color:#fff;color:#fff}

.navtoggle{display:none;margin-left:auto;background:none;border:1.5px solid rgba(255,255,255,.4);
  color:#fff;border-radius:var(--r);padding:9px 13px;font-weight:700;font-size:14px}

/* ---------- breadcrumb ---------- */
.crumbs{background:var(--gray-50);border-bottom:1px solid var(--gray-200);font-size:13.5px}
.crumbs .wrap{padding-top:8px;padding-bottom:8px;display:flex;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--gray-600);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;min-height:24px}
.crumbs a:hover{color:var(--navy-800);text-decoration:underline}
.crumbs span{color:var(--gray-400);margin:0 7px}
.crumbs b{color:var(--gray-800);font-weight:700;display:inline-flex;align-items:center;min-height:24px}

/* ---------- hero ---------- */
.hero{background:var(--navy-800);color:#fff;padding:76px 0 72px;
  background-image:radial-gradient(circle at 88% 12%,rgba(201,162,44,.12),transparent 46%)}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:var(--on-navy);max-width:58ch}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.hero-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.hero-points li{padding-left:26px;position:relative;color:var(--on-navy);font-size:15.5px}
.hero-points li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
  border-left:2.4px solid var(--gold-400);border-bottom:2.4px solid var(--gold-400);
  transform:rotate(-45deg)}
.page-hero{background:var(--navy-800);color:#fff;padding:60px 0 56px}
.page-hero h1{color:#fff;max-width:22ch}
.page-hero .lede{color:var(--on-navy)}

/* ---------- search card ---------- */
.searchcard{background:#fff;border-radius:8px;box-shadow:var(--sh-lg);padding:28px;color:var(--gray-800)}
.searchcard h2{font-size:21px;margin-bottom:4px}
.searchcard .sub{font-size:14.5px;color:var(--gray-600);margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--gray-700);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;
  padding:12px 14px;border:1.5px solid var(--gray-300);border-radius:var(--r);background:#fff;color:var(--gray-900)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-600);outline:none;
  box-shadow:0 0 0 3px rgba(27,78,128,.15)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.searchcard .btn{width:100%}
.microcopy{font-size:13px;color:var(--gray-500);margin:12px 0 0;text-align:center}

/* ---------- trust bar ---------- */
.trustbar{background:var(--navy-900);color:var(--on-navy);padding:16px 0;font-size:14px}
.trustbar .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:space-between}
.trustbar .item{display:flex;align-items:center;gap:9px;font-weight:600}
.trustbar .item b{color:#fff;font-weight:700}
.trustbar .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-500);flex:none}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--gray-200);border-radius:6px;padding:26px;
  box-shadow:var(--sh);display:flex;flex-direction:column}
.card h3{margin-bottom:8px}
.card p{font-size:15.5px;color:var(--gray-600);margin-bottom:14px}
.card .more{margin-top:auto;font-weight:700;font-size:15px;text-decoration:none;color:var(--navy-600)}
.card .more:hover{text-decoration:underline}
.card.pick{border-color:var(--gold-500);border-width:2px}
.card .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--gold-600);background:var(--gold-100);
  padding:4px 9px;border-radius:11px;margin-bottom:10px;align-self:flex-start}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:#fff;border:1px solid var(--gray-200);border-radius:5px;padding:18px;
  text-decoration:none;display:block;transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:var(--navy-600);box-shadow:var(--sh)}
.tile b{display:block;font-size:15.5px;color:var(--navy-800);margin-bottom:3px}
.tile span{display:block;font-size:13.5px;color:var(--gray-500)}

/* ---------- steps ---------- */
/* Adapts to whatever column it lands in. A fixed four-up was fine in a 1320px
   wrap and gave 187px steps once the same block sat in an 876px article
   column, which the `.prose .steps` override below no longer caught. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;counter-reset:s}
.prose .steps{grid-template-columns:repeat(2,1fr);gap:26px 30px}
.prose .steps::before{display:none}
.step{position:relative;padding-top:8px}
.step .n{width:38px;height:38px;border-radius:50%;background:var(--navy-800);color:var(--gold-400);
  font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{font-size:17.5px;margin-bottom:5px}
.step p{font-size:15px;color:var(--gray-600);margin:0}
.section.navy .step .n{background:var(--gold-500);color:var(--navy-900)}
.section.navy .step p{color:var(--on-navy)}

/* ---------- disclosure ---------- */
/* The assurance block. Replaced the old "you can do this free" notice: same
   position, same weight, but it now states our own terms — capped fee, nothing
   owed unless we recover, and that we are a private firm rather than the State.
   .disclosure is kept as an alias so nothing that still uses it loses styling. */
.disclosure,.assurance{background:var(--gold-100);border:1px solid var(--gold-500);border-left-width:5px;
  border-radius:var(--r);padding:22px 26px}
.disclosure h2,.assurance h2{font-size:22px;margin-bottom:8px}
.disclosure p,.assurance p{font-size:16px;color:var(--gray-700);margin-bottom:8px}
.disclosure p:last-child,.assurance p:last-child{margin-bottom:0}
.disclosure a,.assurance a{font-weight:700}
.callout{background:var(--navy-50);border-left:4px solid var(--navy-600);border-radius:var(--r);
  padding:18px 22px;margin:24px 0}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:var(--red-50);border-left-color:var(--red-700)}
.callout.ok{background:var(--green-50);border-left-color:var(--green-700)}
.callout h3{font-size:17px;font-family:var(--sans);font-weight:800;margin-bottom:6px}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{background:#fff;border:1px solid var(--gray-200);border-radius:6px;padding:26px;
  display:flex;flex-direction:column;box-shadow:var(--sh)}
.tier.pick{border:2px solid var(--gold-500);box-shadow:var(--sh-lg)}
.tier .price{font-family:var(--serif);font-size:38px;font-weight:600;color:var(--navy-800);line-height:1.1;margin:6px 0 2px}
.tier .per{font-size:14px;color:var(--gray-500);margin-bottom:16px}
.tier ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.tier li{padding-left:24px;position:relative;font-size:15.5px;color:var(--gray-700)}
.tier li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2.2px solid var(--green-700);border-bottom:2.2px solid var(--green-700);transform:rotate(-45deg)}
.tier .btn{margin-top:auto}

/* ---------- tables & lists ---------- */
.tbl{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px}
.tbl th{text-align:left;background:var(--navy-800);color:#fff;font-weight:700;font-size:13.5px;
  letter-spacing:.4px;padding:11px 14px;border:1px solid var(--navy-800)}
.tbl td{padding:11px 14px;border:1px solid var(--gray-200);color:var(--gray-700);vertical-align:top}
.tbl tr:nth-child(even) td{background:var(--paper-50)}
.tbl tbody tr:hover td{background:var(--hover-light)}
.checklist{list-style:none;margin:16px 0;padding:0;display:grid;gap:10px}
.checklist li{padding-left:28px;position:relative;color:var(--gray-700)}
.checklist li::before{content:"";position:absolute;left:2px;top:8px;width:13px;height:8px;
  border-left:2.4px solid var(--green-700);border-bottom:2.4px solid var(--green-700);transform:rotate(-45deg)}
.faq{border-top:1px solid var(--gray-200);margin-top:24px}
.faq details{border-bottom:1px solid var(--gray-200)}
.faq summary:hover{color:var(--navy-800)}
.faq summary:hover::after{color:var(--gold-500)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:17px;color:var(--navy-800);
  list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-600);font-weight:800;font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px;color:var(--gray-700);max-width:68ch}
.faq .a p:last-child{margin-bottom:0}

/* ---------- CTA band + footer ---------- */
.ctaband{background:var(--navy-800);color:#fff;padding:48px 0;text-align:center}
.ctaband h2{color:#fff;margin-bottom:8px}
.ctaband p{color:var(--on-navy);max-width:58ch;margin:0 auto 22px}
.ctaband .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.sitefoot{background:var(--navy-900);color:var(--on-navy);font-size:14.5px;padding:48px 0 0}
.sitefoot h2,.sitefoot h4{color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;margin:0 0 14px}
.sitefoot a{color:var(--on-navy);text-decoration:none;display:inline-flex;
  align-items:center;min-height:24px}
.sitefoot a:hover{color:var(--gold-400);text-decoration:underline}
.sitefoot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footgrid{display:grid;grid-template-columns:1.5fr repeat(5,minmax(0,1fr));gap:30px}
.footbrand a{overflow-wrap:anywhere}
.footbrand p{font-size:14px;color:var(--on-navy-dim);max-width:34ch}
.footnote{border-top:1px solid var(--navy-line);margin-top:38px;padding:20px 0 34px;font-size:13px;color:var(--on-navy-dim)}
.footnote a{min-height:24px;display:inline-flex;align-items:center}
.footnote .row{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.footnote .row .right{margin-left:auto}
.notary-notice{border:1px solid var(--navy-line);border-radius:var(--r);padding:14px 18px;
  margin:26px 0 0;font-size:13px;color:var(--on-navy);background:var(--navy-900)}
.notary-notice b{color:#fff;display:block;margin-bottom:4px}

/* ---------- misc ---------- */
.meta{font-size:13.5px;color:var(--gray-500);margin-bottom:18px}
.pill{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 10px;border-radius:11px;background:var(--navy-50);color:var(--navy-600)}
.pill.free{background:var(--green-50);color:var(--green-700)}
.related{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:5px;padding:22px 24px;margin-top:34px}
.related h3{font-size:16px;font-family:var(--sans);font-weight:800;margin-bottom:12px}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
.aside{position:sticky;top:96px}
.aside .card{padding:20px}
.aside h3{font-size:17px}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* minmax(0,1fr), not 1fr: a plain 1fr cannot shrink below its content's
     min-width, so the search card forced a 393px track inside a 350px box and
     the page scrolled sideways on a phone. */
  .two-col{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
}
@media(max-width:1340px){
  .navtoggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy-800);
    flex-direction:column;align-items:stretch;padding:8px 16px 18px;gap:0;
    border-top:1px solid rgba(255,255,255,.12)}
  .nav.open{display:flex}
  .nav>li>a{padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:0;border-left:2px solid var(--gold-500);border-radius:0;
    margin:0 0 8px 8px;padding:4px 0 4px 10px}
  .submenu a{color:var(--on-navy);padding:8px 4px;font-size:14.5px}
  .submenu a:hover{background:transparent;color:#fff}
  .nav-cta{margin:12px 0 0}
  .nav .caret{display:none}
}
@media(max-width:900px){
  .g3,.g4,.g2,.tiers{grid-template-columns:1fr}
  .hero-points{display:none}
}
@media(max-width:640px){
  body{font-size:16px}
  .section{padding:48px 0}
  .tiles,.steps{grid-template-columns:1fr}
  .footgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-row{grid-template-columns:1fr}
  .utility .right{display:none}
}
@media print{
  .masthead,.utility,.ctaband,.sitefoot,.crumbs{display:none}
  body{font-size:12pt}
}

/* ---------- education + case studies ---------- */
.edu{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.edu .col{border-top:3px solid var(--gold-500);padding-top:16px}
.edu h3{font-size:18px;margin-bottom:8px}
.edu p{font-size:15.5px;color:var(--gray-600);margin-bottom:0}
.section.navy .edu p{color:var(--on-navy)}
.section.navy .edu .col{border-top-color:var(--gold-400)}

/* accordion of worked situations */
.caseacc{display:grid;gap:11px}
.caseacc details{background:#fff;border:1px solid var(--gray-200);border-radius:6px;
  box-shadow:var(--sh);overflow:hidden}
.caseacc details[open]{border-color:var(--navy-600);box-shadow:var(--sh-lg)}
.caseacc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:15px 20px;background:#fff}
.caseacc summary::-webkit-details-marker{display:none}
.caseacc summary:hover{background:var(--hover-light);box-shadow:inset 3px 0 0 var(--gold-500)}
.caseacc details[open] summary{background:var(--navy-50);border-bottom:1px solid var(--gray-200)}
.caseacc .lab{flex:none;font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--gold-600);background:var(--gold-100);border:1px solid var(--gold-500);
  border-radius:11px;padding:4px 10px;min-width:148px;text-align:center}
.caseacc .ttl{flex:1;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--navy-800);line-height:1.3}
.caseacc .dur{flex:none;font-size:13.5px;font-weight:700;color:var(--gray-600);white-space:nowrap}
.caseacc .ind{flex:none;width:27px;height:27px;border-radius:50%;background:var(--navy-50);
  color:var(--navy-600);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;line-height:1}
.caseacc .ind::before{content:"+"}
.caseacc details[open] .ind{background:var(--navy-800);color:#fff}
.caseacc details[open] .ind::before{content:"\2013"}
.caseacc .cb{padding:22px 20px 6px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.caseacc .row b{display:block;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--gray-500);margin-bottom:5px}
.caseacc .row p{font-size:15px;color:var(--gray-700);margin:0}
.caseacc .row.hard b{color:var(--red-700)}
.caseacc .row.hard p{color:var(--red-700)}
.caseacc .cf{border-top:1px solid var(--gray-200);background:var(--gray-50);padding:12px 20px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.caseacc .cf .t{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--gray-500)}
.caseacc .cf .v{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--navy-800)}
.caseacc .cf .n2{font-size:14px;color:var(--gray-600);font-weight:600}
.acc-hint{font-size:13.5px;color:var(--gray-500);margin:0 0 14px}

.illus{font-size:13.5px;color:var(--gray-500);margin:0 0 18px;padding-left:14px;border-left:3px solid var(--gray-300)}

.updates{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.updates .u{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:20px}
.updates .u h3{font-size:17px;margin-bottom:6px;color:#fff}
.updates .u p{font-size:15px;color:var(--on-navy);margin:0}
.holder{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0}
.holder span{font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:13px}
.holder .you{background:var(--gold-100);color:var(--gold-600)}
.holder .us{background:var(--navy-hover);color:var(--on-navy)}
.holder .st{background:var(--navy-hover);color:var(--on-navy)}

@media(max-width:1080px){
  .edu,.updates{grid-template-columns:1fr}
  .caseacc .cb{grid-template-columns:1fr;gap:18px}
}
@media(max-width:720px){
  .caseacc summary{flex-wrap:wrap;gap:9px 12px;padding:14px 16px}
  .caseacc .lab{min-width:0;order:1}
  .caseacc .dur{order:2;margin-left:auto}
  .caseacc .ttl{order:3;flex:1 0 100%;font-size:17px}
  .caseacc .ind{order:0}
}

/* ==========================================================================
   ADVANCED LAYER — engraving, elevation, motion, stateful components
   ========================================================================== */

/* ---------- scroll progress hairline ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-500) 60%,var(--gold-400));
  transition:width .08s linear}

/* ---------- hero engraving ---------- */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.guillowrap{position:absolute;top:50%;right:-72px;transform:translateY(-50%);
  z-index:1;pointer-events:none;opacity:.62;mix-blend-mode:screen}
.guillowrap svg{width:560px;height:560px;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 90% at 82% 50%,rgba(201,162,44,.10),transparent 62%),
    linear-gradient(180deg,rgba(6,21,39,0) 62%,rgba(6,21,39,.55) 100%)}
.rule-engraved{height:9px;background-repeat:repeat-x;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='9'%3E%3Cline x1='0' y1='1' x2='120' y2='1' stroke='%23C9A22C' stroke-width='1' opacity='0.55'/%3E%3Cline x1='0' y1='4' x2='120' y2='4' stroke='%23C9A22C' stroke-width='0.6' opacity='0.3'/%3E%3Cline x1='0' y1='7' x2='120' y2='7' stroke='%23C9A22C' stroke-width='0.4' opacity='0.2'/%3E%3C/svg%3E")}

/* ---------- freshness badge ---------- */
.fresh{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  color:var(--gold-400);background:rgba(201,162,44,.12);border:1px solid rgba(201,162,44,.42);
  border-radius:16px;padding:6px 14px 6px 11px;margin-bottom:20px;letter-spacing:.2px}
.fresh .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold-400);flex:none;position:relative}
.fresh .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--gold-400);opacity:0;animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.fresh.on-light{color:var(--gold-600);background:var(--gold-100);border-color:var(--gold-500)}
.fresh.on-light .pulse,.fresh.on-light .pulse::after{background:var(--gold-600);border-color:var(--gold-600)}

/* ---------- statistics band ---------- */
.statband{background:var(--navy-900);border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line);padding:34px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--navy-line);
  border:1px solid var(--navy-line);border-radius:6px;overflow:hidden}
.statgrid .s{background:var(--navy-900);padding:22px 22px 20px;text-align:left}
.statgrid .v{font-family:var(--serif);font-size:36px;font-weight:600;color:var(--gold-400);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.statgrid .k{font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--on-navy-dim);margin-top:9px}
.statgrid .n{font-size:13px;color:var(--on-navy-dim);margin-top:7px;line-height:1.45}

/* ---------- certificate corner marks on key panels ---------- */
.marked{position:relative}
.marked::before,.marked::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none}
.marked::before{top:9px;left:9px;border-top:1.6px solid var(--gold-500);border-left:1.6px solid var(--gold-500)}
.marked::after{bottom:9px;right:9px;border-bottom:1.6px solid var(--gold-500);border-right:1.6px solid var(--gold-500)}

/* ---------- elevation + interaction ---------- */
.card,.tile,.tier,.case,.caseacc details{transition:transform .18s cubic-bezier(.2,.7,.3,1),
  box-shadow .18s ease,border-color .18s ease}
.card:hover,.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--rule-strong)}
.tier.pick{position:relative}
.tier:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.btn{position:relative;will-change:transform}
.btn-gold:hover,.btn-navy:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(10,36,64,.20)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-gold:active{background:#B08D22}
.more{position:relative}
.more::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1.5px;
  background:var(--navy-600);transition:width .2s ease}
.more:hover::after{width:100%}
.tile{position:relative;padding-left:20px}
.tile::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;
  background:var(--gold-500);opacity:0;transition:opacity .18s ease}
.tile:hover::before{opacity:1}

/* ---------- sticky compact search ---------- */
.stickysearch{position:fixed;left:0;right:0;top:0;z-index:60;background:var(--navy-900);
  border-bottom:1px solid var(--navy-line);transform:translateY(-100%);transition:transform .24s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 6px 20px rgba(6,21,39,.28)}
.stickysearch.show{transform:none}
.stickysearch .wrap{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px}
.stickysearch .lbl{font-size:13.5px;font-weight:700;color:var(--on-navy);white-space:nowrap}
.stickysearch input{flex:1;min-width:0;font-family:var(--sans);font-size:15px;padding:10px 13px;
  border:1.5px solid var(--navy-line);border-radius:var(--r);background:var(--navy-900);color:#fff}
.stickysearch input::placeholder{color:var(--on-navy-dim)}
.stickysearch input:focus{border-color:var(--gold-500);outline:none;box-shadow:0 0 0 3px rgba(201,162,44,.22)}
.stickysearch .btn{flex:none}
@media(max-width:640px){.stickysearch .lbl{display:none}}

/* ---------- back to top ---------- */
/* Sits directly above the assistant button, which is fixed bottom-right at
   20px and 46px tall. Both used to occupy the same corner and the assistant
   (z-index 80) simply buried this one. */
.totop{position:fixed;right:22px;bottom:78px;z-index:55;width:46px;height:46px;border-radius:50%;
  background:var(--navy-800);color:#fff;border:1.5px solid var(--gold-500);display:flex;
  align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.2s;box-shadow:var(--sh-lg)}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--navy-700)}
.totop svg{width:18px;height:18px}
/* Below 520px the assistant becomes a full-width bar at bottom:12px, so this
   has to clear its whole height rather than tuck beside it. */
@media(max-width:520px){
  .totop{right:12px;bottom:70px}
}
/* If the assistant is not rendered there is nothing to clear, so drop back
   into the corner it was always meant to occupy. */
body:not(.has-cups-bot) .totop{bottom:22px}

/* Cross-links between generated guides. What turns a thousand pages into a
   structure rather than a thousand islands. */
.guide-links{margin:44px 0 0;padding:28px 30px;background:var(--paper-50);
  border:1px solid var(--rule-200);border-top:3px solid var(--gold-500);border-radius:4px}
.guide-links h2{margin:0 0 20px;font-size:23px;color:var(--ink-800)}
.guide-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px 30px}
.guide-links-group h3{margin:0 0 9px;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold-600)}
.guide-links-group ul{margin:0;padding:0;list-style:none}
.guide-links-group li{margin:0 0 6px;font-size:14.5px;line-height:1.45}
.guide-links-group a{color:var(--navy-800);text-decoration:none;
  border-bottom:1px solid var(--rule-strong)}
.guide-links-group a:hover{border-bottom-color:var(--gold-500);color:var(--gold-600)}
@media(max-width:600px){
  .guide-links{padding:22px 18px}
  .guide-links-grid{grid-template-columns:1fr;gap:20px}
}
@media(max-width:520px){
  body:not(.has-cups-bot) .totop{bottom:22px;right:12px}
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}

/* ---------- steps connector ---------- */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:19px;right:19px;top:19px;height:1.5px;
  background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 12px);
  opacity:.28}
.step{position:relative;z-index:1}
.step .n{box-shadow:0 0 0 6px var(--navy-800)}
.section:not(.navy) .step .n{box-shadow:0 0 0 6px #fff}
.section.alt .step .n{box-shadow:0 0 0 6px var(--gray-50)}

/* ---------- accordion motion ---------- */
.caseacc details[open] .cb{animation:slidein .26s cubic-bezier(.2,.7,.3,1)}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.caseacc summary{transition:background .15s ease}

/* ---------- focus + motion preferences ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media(max-width:1080px){
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .guillowrap{display:none}
}
@media(max-width:640px){.statgrid{grid-template-columns:1fr}}

/* ---------- purchase panel ---------- */
.buypanel{background:#fff;border:1px solid var(--rule-200);border-radius:8px;padding:26px;
  box-shadow:var(--sh-lg);position:relative}
.buypanel .price{font-family:var(--serif);font-size:46px;font-weight:600;color:var(--navy-800);
  line-height:1;letter-spacing:-.02em;margin:2px 0 4px}
.buypanel .per{font-size:13.5px;color:var(--ink-600);margin-bottom:20px}
.buypanel .btn{width:100%;margin-bottom:16px}
.buypanel ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.buypanel li{padding-left:26px;position:relative;font-size:14.5px;color:var(--ink-800);line-height:1.45}
.buypanel li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;
  border-left:2.2px solid var(--success-700);border-bottom:2.2px solid var(--success-700);transform:rotate(-45deg)}
.buypanel .foot{font-size:12.5px;color:var(--ink-600);border-top:1px solid var(--rule-soft);
  padding-top:14px;margin:0;display:flex;align-items:flex-start;gap:9px}
.buypanel .foot svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--success-700)}
.buyagain{background:var(--paper-50);border:1px solid var(--rule-200);border-radius:6px;
  padding:24px 26px;margin:28px 0;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.buyagain .t{flex:1;min-width:240px}
.buyagain .t b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--navy-800);margin-bottom:4px}
.buyagain .t span{font-size:14.5px;color:var(--ink-600)}
.buyagain .btn{flex:none}
@media(max-width:1080px){
  .buypanel{margin-bottom:26px}
}

/* ---------- knowledge article ---------- */
.artmeta{display:flex;gap:22px;flex-wrap:wrap;align-items:center;font-size:13.5px;
  color:var(--on-navy-dim);margin-top:18px}
.artmeta span{display:inline-flex;align-items:center;gap:7px}
.artmeta svg{width:15px;height:15px;flex:none;color:var(--gold-500)}
.artmeta .src a{color:var(--gold-500);font-weight:700;display:inline-flex;
  align-items:center;min-height:24px}
.takeaways{background:var(--navy-tint);border:1px solid var(--rule-200);border-left:5px solid var(--navy-800);
  border-radius:var(--r);padding:24px 28px;margin:0 0 36px}
.takeaways h2{font-size:19px;margin-bottom:12px}
.takeaways ol{margin:0;padding-left:22px;display:grid;gap:9px}
.takeaways li{font-size:15.5px;color:var(--ink-800);line-height:1.55;padding-left:4px}
.takeaways li b{color:var(--navy-800)}
.tocwrap{position:sticky;top:100px}
.toc{border:1px solid var(--rule-200);border-radius:6px;padding:20px 22px;background:#fff}
.toc h2{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold-600);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:2px}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;padding:7px 8px;border-radius:3px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--ink-800);line-height:1.4;min-height:24px;align-items:flex-start}
.toc a::before{content:counter(t);font-size:11.5px;font-weight:800;color:var(--ink-400);flex:none;
  min-width:14px;padding-top:2px}
.toc a:hover{background:var(--hover-light);color:var(--navy-800);box-shadow:inset 3px 0 0 var(--gold-500)}
.toc a.on{background:var(--navy-tint);color:var(--navy-800)}
.toc a.on::before{color:var(--gold-600)}
.toc .foot{border-top:1px solid var(--rule-soft);margin-top:14px;padding-top:14px;font-size:13px;color:var(--ink-600)}
.toc>summary{display:none}
.article h2{scroll-margin-top:110px;padding-top:6px}
.article h2:not(:first-child){margin-top:38px}
.article>p:first-of-type{font-size:18px;color:var(--ink-800)}
.mythacc{display:grid;gap:9px;margin:18px 0}
.mythacc details{border:1px solid var(--rule-200);border-radius:5px;background:#fff;overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease}
.mythacc details[open]{border-color:var(--rule-strong);box-shadow:var(--sh)}
.mythacc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:14px 18px;transition:background .15s ease}
.mythacc summary::-webkit-details-marker{display:none}
.mythacc summary:hover{background:var(--hover-light);box-shadow:inset 3px 0 0 var(--gold-500)}
.mythacc details[open] summary{background:var(--no-tint);box-shadow:inset 3px 0 0 var(--notice-700)}
.mythacc .ind{flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy-tint);
  color:var(--navy-600);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;line-height:1}
.mythacc .ind::before{content:"+"}
.mythacc details[open] .ind{background:var(--notice-700);color:#fff}
.mythacc details[open] .ind::before{content:"\2013"}
.mythacc .k{flex:none;font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--notice-700);background:var(--no-tint);border:1px solid var(--notice-700);
  border-radius:11px;padding:3px 10px}
.mythacc details[open] .k{background:#fff}
.mythacc .q{flex:1;font-size:15.5px;font-weight:600;color:var(--ink-800);line-height:1.45}
.mythacc .a{padding:16px 18px 18px 56px;border-top:1px solid var(--rule-200);
  background:var(--ok-tint);animation:slidein .24s cubic-bezier(.2,.7,.3,1);position:relative}
.mythacc .a .k2{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--success-700);background:#fff;border:1px solid var(--success-700);
  border-radius:11px;padding:3px 10px;margin-bottom:9px}
.mythacc .a p{font-size:15.5px;color:var(--ink-800);line-height:1.6;margin:0;max-width:none}
.mythacc .a p b{color:var(--navy-800)}
@media(max-width:720px){
  .mythacc summary{flex-wrap:wrap;gap:9px 12px}
  .mythacc .q{flex:1 0 100%}
  .mythacc .a{padding-left:18px}
}
.gloss{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.gloss th{text-align:left;width:200px;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule-200);
  color:var(--navy-800);font-family:var(--serif);font-weight:600;font-size:16px;vertical-align:top}
.gloss td{padding:12px 0;border-bottom:1px solid var(--rule-200);color:var(--ink-800);line-height:1.55}
/* Three fixed columns left 187px of text per card once this sits inside the
   guide's article column. Let the cards decide how many fit. */
.nextsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin-top:18px}
@media(max-width:1080px){
  /* the contents list moves above the article and collapses so it costs one line, not a screen */
  .two-col>.tocwrap{order:-1}
  .tocwrap{position:static}
  .toc{margin:0 0 26px;padding:0;overflow:hidden}
  .toc>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
    list-style:none;cursor:pointer;padding:13px 18px;min-height:48px;background:var(--paper-50);
    transition:background .15s ease}
  .toc>summary::-webkit-details-marker{display:none}
  .toc>summary:hover{background:var(--hover-light)}
  .toc>summary h2{margin:0}
  .toc>summary .tgl{flex:none;width:9px;height:9px;margin-right:4px;
    border-right:2px solid var(--navy-800);border-bottom:2px solid var(--navy-800);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
  .toc[open]>summary{background:var(--navy-tint);border-bottom:1px solid var(--rule-200)}
  .toc[open]>summary .tgl{transform:rotate(-135deg) translate(-2px,-2px)}
  .tocbody{padding:10px 12px 16px;animation:slidein .22s cubic-bezier(.2,.7,.3,1)}
  .toc a{padding:9px 8px;min-height:44px;align-items:center;font-size:15px}
  .toc a::before{padding-top:0}
  .toc .foot{margin:12px 8px 0;padding-top:12px}
  .nextsteps{grid-template-columns:1fr}
  .mf{grid-template-columns:1fr}
  .mf .k{justify-content:flex-start;padding:9px 14px}
  .gloss th{display:block;width:auto;border-bottom:0;padding-bottom:2px}
  .gloss td{display:block;padding-top:0}
}

/* ---------- boxed article sections ---------- */
.knsec{background:#fff;border:1px solid var(--rule-200);border-radius:6px;
  padding:26px 30px 28px;margin:0 0 18px;box-shadow:var(--sh)}
.knsec:nth-of-type(even){background:var(--paper-50)}
.knsec>h2{display:flex;gap:16px;align-items:baseline;margin:0 0 18px;padding:0 0 14px;
  border-bottom:1px solid var(--rule-200);font-size:24px;scroll-margin-top:110px}
.knsec>h2 .no{flex:none;font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--gold-600);min-width:30px}
.knsec>p{max-width:70ch}
.knsec>p:last-child,.knsec>div:last-child,.knsec>ul:last-child{margin-bottom:0}
.knsec .callout{margin-bottom:0}
.knsec .steps::before{opacity:.2}
.knsec:nth-of-type(even) .step .n{box-shadow:0 0 0 6px var(--paper-50)}

/* three-up fact cards */
.factgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 0}
.factgrid .f{background:var(--navy-tint);border:1px solid var(--rule-200);border-top:3px solid var(--navy-800);
  border-radius:5px;padding:18px 20px}
.knsec:nth-of-type(even) .factgrid .f{background:#fff}
.factgrid .f b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;
  color:var(--navy-800);margin-bottom:6px;line-height:1.3}
.factgrid .f span{font-size:14.5px;color:var(--ink-600);line-height:1.5}

/* who-can-claim rows */
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 0}
.roles .r{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:baseline;
  padding:13px 16px;background:#fff;border:1px solid var(--rule-200);border-radius:5px}
.knsec:nth-of-type(even) .roles .r{background:#fff}
.roles .r b{font-size:14.5px;color:var(--navy-800);font-weight:700}
.roles .r span{font-size:14px;color:var(--ink-600);line-height:1.5}

/* numbered statutory rules */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0 0}
.rules .u{display:grid;grid-template-columns:30px 1fr;gap:13px;padding:15px 17px;
  background:var(--gold-tint);border:1px solid var(--gold-500);border-radius:5px;align-items:start}
.rules .u i{font-style:normal;font-weight:800;font-size:12.5px;color:var(--gold-600);background:#fff;
  border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.rules .u span{font-size:14.5px;color:var(--ink-800);line-height:1.5}
.rules .u span b{color:var(--navy-800)}

@media(max-width:1080px){
  .factgrid,.roles,.rules{grid-template-columns:1fr}
  .roles .r{grid-template-columns:1fr;gap:3px}
  .knsec{padding:22px 20px 24px}
  .knsec>h2{font-size:21px;gap:12px}
}

/* ---------- two doors: knowledge and service, equal weight ---------- */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
.door{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule-200);
  border-radius:8px;padding:30px 32px 26px;box-shadow:var(--sh);position:relative;overflow:hidden;
  transition:box-shadow .18s ease,border-color .18s ease}
.door:hover{box-shadow:var(--sh-lg);border-color:var(--rule-strong)}
.door::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.door.learn::before{background:var(--navy-800)}
.door.hire::before{background:var(--gold-500)}
.door>.eyebrow{margin:0 0 8px}
.door.learn>.eyebrow{color:var(--navy-800)}
.door h3{font-size:24px;line-height:1.25;margin:0 0 10px}
.door .d-lede{font-size:16px;color:var(--ink-600);line-height:1.6;margin:0 0 20px;max-width:46ch}
.dl-icons{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:2px}
.dl-icons li a{display:flex;align-items:center;gap:14px;padding:11px 8px;border-radius:6px;
  min-height:44px;text-decoration:none;transition:background .15s ease}
.dl-icons .ic{flex:none;width:38px;height:38px;border-radius:8px;background:var(--navy-tint);
  color:var(--navy-800);display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease}
.door.hire .dl-icons .ic{background:var(--gold-tint);color:var(--gold-600)}
.dl-icons .dl-ico{width:19px;height:19px;display:block}
.dl-icons .tx{flex:1;min-width:0}
.dl-icons b{display:block;font-size:15px;font-weight:700;color:var(--ink-800);line-height:1.35}
.dl-icons em{display:block;font-style:normal;font-size:13px;color:var(--ink-600);line-height:1.4;margin-top:1px}
.dl-icons .arw{flex:none;font-size:13px;font-weight:800;color:var(--ink-600)}
.dl-icons li a:hover{background:var(--hover-light)}
.dl-icons li a:hover b{color:var(--navy-800)}
.dl-icons li a:hover .ic{background:var(--navy-800);color:#fff}
.door.hire .dl-icons li a:hover .ic{background:var(--gold-500);color:var(--navy-900)}
.dl-icons li a:hover .arw{color:var(--gold-600)}
.door .btn{margin-top:auto;align-self:flex-start}
.door .dfoot{margin:14px 0 0;font-size:13.5px;color:var(--ink-600);max-width:none}
.readon{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--rule-200)}
.readon a{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy-800);
  text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.readon a::after{content:"\2192";margin-left:9px;color:var(--gold-600)}
.readon a:hover{text-decoration:underline}
.readon span{display:block;font-size:14px;color:var(--ink-600);margin-top:3px}
@media(max-width:900px){
  .doors{grid-template-columns:1fr;gap:18px}
  .door{padding:26px 22px 24px}
  .door h3{font-size:22px}
  .dl-icons li a{gap:12px;padding:10px 4px}
  .dl-icons .ic{width:34px;height:34px}
}

/* ---------- merged "how this works": two movements in one section ---------- */
.movement{margin:38px 0 20px;padding-top:24px;border-top:1px solid var(--rule-200)}
.movement .mk{display:block;font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-600);margin-bottom:7px}
.movement h3{margin:0;font-size:22px}
.movement p{margin:5px 0 0;font-size:15px;color:var(--ink-600);max-width:66ch}
.howpanel{background:var(--paper-50);border:1px solid var(--rule-200);border-radius:8px;
  padding:30px 32px 28px}
.howpanel .step .n{box-shadow:0 0 0 6px var(--paper-50)}
.howpanel .step p{color:var(--ink-600)}
@media(max-width:900px){
  .howpanel{padding:24px 20px 22px}
  .movement{margin:30px 0 18px;padding-top:20px}
  .movement h3{font-size:20px}
}

/* Two sections sharing a ground stack 80+80 of padding with no colour change to
   justify it. Halve the join; keep the full 80 wherever the ground actually changes. */
.section:not(.alt):not(.navy) + .section:not(.alt):not(.navy){padding-top:40px}
.section.alt + .section.alt{padding-top:40px}
.section.navy + .section.navy{padding-top:40px}
/* and trim the one above it too, so the join totals 80 like any single section.
   :has() is progressive — without it the join simply stays roomier. */
.section:not(.alt):not(.navy):has(+ .section:not(.alt):not(.navy)){padding-bottom:40px}
.section.alt:has(+ .section.alt){padding-bottom:40px}
.section.navy:has(+ .section.navy){padding-bottom:40px}


/* ==========================================================================
   WordPress integration layer — additions the static build did not need.
   ========================================================================== */

/* the guilloche is now an external file rather than 100KB of inline path */
.guillowrap img{width:560px;height:560px;display:block;max-width:none}

/* WP core output classes */
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:14.5px;color:var(--ink-600);margin-top:8px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;
  clip:auto;padding:12px 18px;background:var(--white);color:var(--navy-800);
  z-index:1000;border-radius:var(--r);box-shadow:var(--sh-lg)}
.admin-bar .stickysearch{top:32px}
@media(max-width:782px){.admin-bar .stickysearch{top:46px}}

/* editor-authored content inside .prose keeps the site's rhythm */
.prose > .wp-block-image,.prose > figure{margin:28px 0}
.prose > .wp-block-separator{border:0;border-top:1px solid var(--rule-200);margin:36px 0}

/* form feedback (contact + lead capture) */
.formnote{border-radius:var(--r);padding:14px 18px;margin:0 0 20px;font-size:15.5px;
  border:1px solid;line-height:1.55}
.formnote.ok{background:var(--ok-tint);border-color:var(--success-700);color:var(--success-700)}
.formnote.err{background:var(--no-tint);border-color:var(--notice-700);color:var(--notice-700)}
.formnote p{margin:0}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* search results (WordPress content search, not the claim search) */
.results{list-style:none;padding:0;margin:0}
.results li{padding:22px 0;border-bottom:1px solid var(--rule-200)}
.results li:first-child{border-top:1px solid var(--rule-200)}
.results h2{font-size:21px;margin:0 0 6px}
.results p{margin:0;color:var(--ink-600);font-size:16px}
.results .crumb{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-400);margin:0 0 6px}

/* pagination */
.pager{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 0}
.pager .page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--rule-200);
  border-radius:var(--r);text-decoration:none;color:var(--navy-800);font-weight:600;font-size:15px}
.pager .page-numbers:hover{background:var(--hover-light)}
.pager .page-numbers.current{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}

/* 404 */
.notfound{padding:76px 0 84px}
.notfound ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.notfound ul a{display:block;padding:14px 16px;border:1px solid var(--rule-200);
  border-radius:var(--r);text-decoration:none;font-weight:600;color:var(--navy-800)}
.notfound ul a:hover{background:var(--hover-light)}

/* ==========================================================================
   The authority layer — provenance, sources, explainer figures
   ========================================================================== */

/* ---------- provenance byline ----------
   Sits directly under the breadcrumbs. Government pages carry a review date
   and a source; private sites almost never do, which is exactly why it reads
   as credible. Kept plain — no badges, no seals we award ourselves. */
.provenance{background:var(--paper-50);border-bottom:1px solid var(--rule-200);
  padding:11px 0;font-size:13.5px;color:var(--ink-600)}
.provenance .wrap{max-width:var(--doc)}
.prov-line{margin:0;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline}
.prov-item{display:inline-flex;gap:6px;align-items:baseline}
.prov-item time{color:var(--ink-800);font-weight:600;font-variant-numeric:tabular-nums}
.prov-sources a{color:var(--navy-800);text-decoration:underline;text-underline-offset:2px}
.prov-sources a:hover{color:var(--gold-600)}
.prov-check{color:var(--ink-400);font-style:italic}
@media(max-width:700px){
  .prov-check{display:none}
  .provenance{font-size:12.5px}
}

/* ---------- source list at the foot of a page ---------- */
.sources{margin:44px 0 0;padding:24px 26px;border:1px solid var(--rule-200);
  border-left:3px solid var(--navy-800);border-radius:0 var(--r) var(--r) 0;
  background:var(--paper-50)}
.sources h2{font-size:18px;margin:0 0 8px}
.sources>p{margin:0 0 14px;font-size:15px;color:var(--ink-600)}
.sources ul{margin:0;padding-left:20px;font-size:15.2px}
.sources li{margin:0 0 7px}
.sources li a{color:var(--navy-800)}
.sources-note{margin:16px 0 0!important;padding-top:14px;border-top:1px solid var(--rule-200);
  font-size:13.5px;color:var(--ink-400)}

/* ---------- the one-page summary ----------
   The cards are 1080x1350 handouts with their own header, footer and body
   copy. Shrunk into a text column their type falls to about seven pixels, so
   they are offered as a sheet to open rather than pretended to be an
   illustration. The thumbnail is an affordance, not the delivery. */
.onepager{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:start;
  margin:40px 0 0;padding:22px 24px;border:1px solid var(--rule-200);
  border-radius:var(--r);background:#fff;box-shadow:var(--sh);max-width:none!important}
.onepager-thumb{display:block;line-height:0;border-radius:3px;overflow:hidden;
  border:1px solid var(--rule-200);transition:box-shadow .15s ease}
.onepager-thumb:hover{box-shadow:var(--sh-lg)}
.onepager-thumb img{width:100%;height:auto;display:block}
.onepager-body .eyebrow{margin-bottom:6px}
.onepager-body h3{font-size:19px;margin:0 0 8px}
.onepager-body p{margin:0 0 14px;font-size:15px;color:var(--ink-600)}
@media(max-width:600px){
  .onepager{grid-template-columns:1fr;gap:16px}
  .onepager-thumb{max-width:150px}
}

/* ---------- statute citation ---------- */
.statute{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ==========================================================================
   Home page: statement hero, then the search
   ==========================================================================
   The search used to sit beside the headline, which made the front door look
   like a form. A visitor who has never heard the term "unclaimed property"
   needs to be told what this is before being asked to type a name into it.
   So the hero states the case, and the search gets a band of its own directly
   below — the pattern the State Controller's own site uses. */

.hero-statement{padding:74px 0 66px}
.hero-statement .wrap{position:relative;z-index:2;max-width:var(--wrap)}
.hero-statement .fresh{margin-bottom:22px}
.hero-statement h1{max-width:19ch;font-size:clamp(36px,5.2vw,58px);margin-bottom:20px}
.hero-statement .lede{max-width:62ch;font-size:clamp(17px,1.35vw,19.5px);color:var(--on-navy)}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.hero-note{margin:22px 0 0;max-width:60ch;font-size:14.5px;color:var(--on-navy-dim)}

/* The rosette moves right and grows now that no card sits over it. */
.hero-statement .guillowrap{right:-140px;opacity:.5}
.hero-statement .guillowrap img{width:660px;height:660px}
@media(max-width:1240px){.hero-statement .guillowrap{display:none}}

/* ---------- the search band ---------- */
.searchband{background:var(--paper-50);border-bottom:1px solid var(--rule-200);
  padding:60px 0 64px;scroll-margin-top:20px}
.searchband-head{max-width:var(--doc);margin:0 auto 28px;text-align:center}
.searchband-head .eyebrow{margin-bottom:10px}
.searchband-head h2{margin-bottom:12px}
.searchband-head .lede{margin:0 auto;max-width:66ch;color:var(--ink-600)}
.searchband-form{max-width:660px;margin:0 auto}
/* The card already carries its own shadow; inside a tinted band it only needs
   a border to sit on. */
.searchband-form .searchcard{border:1px solid var(--rule-200)}
.searchband-form .searchcard h2{font-size:21px}
.searchband-foot{max-width:66ch;margin:22px auto 0;text-align:center;
  font-size:14.5px;color:var(--ink-600)}

@media(max-width:640px){
  .hero-statement{padding:52px 0 46px}
  .hero-actions .btn{width:100%;text-align:center}
  .searchband{padding:44px 0 48px}
}

/* ==========================================================================
   The scale band
   ==========================================================================
   A question on the left, the State's own figures on the right. The numbers
   are the loudest thing on the page and they are allowed to be, because they
   are the whole argument: this is not a lottery, it is a very large pile of
   money the State is holding and publishing a list of.

   Gold is reserved for the figures. Everything else in the band stays quiet so
   they carry. */

.scaleband{background:var(--navy-900);color:var(--on-navy);padding:66px 0;
  border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line);
  position:relative;overflow:hidden}

/* An engraved hairline across the top, the same device as the hero rule. */
.scaleband::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-500) 22%,var(--gold-500) 78%,transparent);
  opacity:.55}

.scaleband .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center}

.scaleband-ask h2{color:#fff;font-size:clamp(23px,2.5vw,31px);line-height:1.24;
  margin:0 0 14px;max-width:22ch}
.scaleband-ask p{margin:0 0 24px;color:var(--on-navy-dim);font-size:16px;max-width:46ch}

.scaleband-figures{display:flex;flex-direction:column;gap:26px}
.scaleband .fig .v{
  font-family:var(--sans);
  font-size:clamp(30px,4.2vw,50px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--gold-500);
  font-variant-numeric:tabular-nums;
  /* Digits change width as the counter runs; fixing the baseline stops the
     label beneath it from jittering. */
  min-height:1.05em;
}
.scaleband .fig .k{margin-top:8px;font-size:15px;color:var(--on-navy);max-width:34ch;line-height:1.45}

.scaleband-src{margin:6px 0 0;font-size:13px;color:var(--on-navy-dim);max-width:44ch;line-height:1.5}
.scaleband-src a{color:var(--gold-400);text-decoration:underline;text-underline-offset:2px}
.scaleband-src a:hover{color:#fff}

@media(max-width:900px){
  .scaleband .wrap{grid-template-columns:1fr;gap:36px}
  .scaleband{padding:48px 0}
  .scaleband-ask h2{max-width:none}
  .scaleband-ask .btn{width:100%;text-align:center}
}

/* ==========================================================================
   The about / trust band
   ==========================================================================
   Two columns that do different jobs: what we do, and how to check that we are
   who we say. The right column is deliberately the denser of the two — in this
   category, verifiable detail is the persuasion. */

.aboutband{border-top:1px solid var(--rule-200)}
.aboutband-head{max-width:var(--doc);margin-bottom:44px}
.aboutband-head h2{margin-bottom:12px}
.aboutband-head .lede{max-width:70ch;color:var(--ink-600)}

.aboutband-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
.aboutband-cols h3{font-size:20px;margin:0 0 16px;padding-bottom:12px;
  border-bottom:2px solid var(--gold-500);display:inline-block}

/* ---------- what we do: a numbered sequence, because it is one ---------- */
.aboutband-steps{list-style:none;counter-reset:abt;margin:0;padding:0}
.aboutband-steps li{counter-increment:abt;position:relative;padding:0 0 22px 46px}
.aboutband-steps li::before{
  content:counter(abt);
  position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--sans);font-size:13.5px;font-weight:700;
  background:var(--navy-800);color:#fff;
}
/* A hairline joining the steps, so it reads as a process rather than a list. */
.aboutband-steps li:not(:last-child)::after{
  content:"";position:absolute;left:15px;top:36px;bottom:8px;width:1px;
  background:var(--rule-200);
}
.aboutband-steps b{display:block;font-size:16.5px;color:var(--navy-800);margin-bottom:4px}
.aboutband-steps span{display:block;font-size:15px;color:var(--ink-600);line-height:1.6}

/* ---------- why you can check us ---------- */
.aboutband-why-lede{margin:0 0 18px;font-size:15px;color:var(--ink-600);max-width:52ch}
.aboutband-proof{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--rule-200);border:1px solid var(--rule-200);border-radius:var(--r);overflow:hidden}
.aboutband-proof li{background:#fff;padding:15px 18px}
.aboutband-proof b{display:block;font-size:15.5px;color:var(--navy-800);margin-bottom:3px}
.aboutband-proof span{display:block;font-size:14.5px;color:var(--ink-600);line-height:1.55}
.aboutband-proof a{color:var(--navy-800);text-decoration:underline;text-underline-offset:2px}
.aboutband-proof a:hover{color:var(--gold-600)}

/* ---------- what the site is for ---------- */
.aboutband-purpose{margin-top:52px;padding:30px 34px;background:var(--paper-50);
  border-left:3px solid var(--navy-800);border-radius:0 var(--r) var(--r) 0}
.aboutband-purpose h3{font-size:20px;margin:0 0 12px}
.aboutband-purpose p{margin:0 0 12px;max-width:76ch;color:var(--ink-600);font-size:15.8px}
.aboutband-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

@media(max-width:900px){
  .aboutband-cols{grid-template-columns:1fr;gap:40px}
  .aboutband-purpose{padding:24px 22px;margin-top:40px}
  .aboutband-actions .btn{width:100%;text-align:center}
}

/* ==========================================================================
   Locations
   ========================================================================== */

.cups-locations{margin:0 0 8px;max-width:none!important}
.loc-region{margin:0 0 40px}
.loc-region h2{font-size:21px;margin:0 0 16px;padding-bottom:10px;
  border-bottom:1px solid var(--rule-200)}
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}

.loc-card{background:#fff;border:1px solid var(--rule-200);border-radius:var(--r);
  padding:20px 22px;display:flex;flex-direction:column;scroll-margin-top:90px}
.loc-card h3{font-size:18px;margin:0 0 8px}
.loc-card address{font-style:normal;font-size:15.2px;color:var(--ink-800);line-height:1.55;margin:0 0 10px}
.loc-note{margin:0 0 10px;font-size:13.8px;color:var(--ink-600);line-height:1.5}
.loc-hours{margin:0 0 16px;font-size:13.5px;color:var(--ink-400);
  font-variant-numeric:tabular-nums;padding-top:10px;border-top:1px solid var(--rule-soft)}
.loc-actions{margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.loc-map{font-size:14px;color:var(--navy-800);text-decoration:underline;text-underline-offset:2px}
.loc-map:hover{color:var(--gold-600)}

/* The telephone option is not one of seven — it is the alternative to all of
   them, so it gets the full width and a different ground. */
.loc-phone .loc-card-wide{background:var(--paper-50);border-left:3px solid var(--gold-500);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px}
.loc-phone p{margin:0 0 10px;font-size:15.5px;color:var(--ink-600);max-width:74ch}

@media(max-width:560px){
  .loc-grid{grid-template-columns:1fr}
}

/* ---------- Data tables + link lists ----------
   Added for the holder reporting calendar and the runs of official-source
   links. A statutory deadline table is reference material: it gets tabular
   figures, a caption that stands as a source line, and its own horizontal
   scroll so a narrow phone never pushes the page sideways. */
.tablewrap{overflow-x:auto;margin:20px 0;border:1px solid var(--rule-200);border-radius:var(--r);
  background:var(--white);-webkit-overflow-scrolling:touch}
.datatable{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.datatable caption{caption-side:top;text-align:left;padding:14px 18px 12px;
  font-size:13px;letter-spacing:.02em;color:var(--ink-600);border-bottom:1px solid var(--rule-200)}
.datatable th,.datatable td{padding:12px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule-soft);font-variant-numeric:tabular-nums}
.datatable thead th{background:var(--navy-tint);color:var(--navy-800);font-weight:700;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.datatable tbody th{font-weight:700;color:var(--navy-800);white-space:nowrap}
.datatable tbody tr:last-child th,.datatable tbody tr:last-child td{border-bottom:0}
.datatable tbody tr:hover{background:var(--paper-50)}
.tablenote{margin:-6px 0 22px;font-size:14.5px;color:var(--ink-600)}

/* A list of links to somewhere other than this site. Marked with a rule rather
   than a bullet, so it reads as a set of sources and not as body copy. */
.linklist{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:2px}
.linklist li{padding:10px 0 10px 18px;border-left:2px solid var(--rule-200);color:var(--ink-600);
  font-size:15.5px;transition:border-color .15s ease}
.linklist li:hover{border-left-color:var(--gold-500)}
.linklist li a{font-weight:600}

@media(max-width:640px){
  .datatable{font-size:14.5px}
  .datatable th,.datatable td{padding:10px 14px}
}

/* ---------- Masthead on narrow phones ----------
   The brand lock-up was flex:none, so at 375px the 44px mark plus a 247px
   wordmark plus the menu button measured 413px against a 375px viewport and
   every page on the site scrolled sideways by 38px. Scaling the lock-up down
   and letting it shrink fixes it at the source; nothing above 560px changes. */
@media(max-width:560px){
  .masthead .wrap{gap:12px}
  .brand{flex:0 1 auto;min-width:0}
  .brand svg{width:36px;height:36px}
  .brand .bw{min-width:0}
  .brand .bt{font-size:13px;letter-spacing:.9px}
  .brand .bs{font-size:10.5px;letter-spacing:.6px}
  .navtoggle{padding:8px 11px;font-size:13.5px}
}
/* Adding the Claim Property button spent the room the shrunk wordmark had left,
   and the lock-up broke onto four lines under the button. The seal alone reads
   at this width; the full name is still in the page title and the footer. */
@media(max-width:520px){
  .brand .bw{display:none}
  .brand svg{width:38px;height:38px}
}

/* ---------- Generated guide pages ----------
   The answer box is the first thing on the page and the thing an AI assistant
   lifts, so it is set apart and typographically calm — no colour shouting, just
   a clear boundary and a slightly larger measure. */
.answerbox{margin:0 0 26px;padding:22px 26px;background:var(--paper-50);
  border-left:3px solid var(--gold-500);border-radius:0 var(--r) var(--r) 0}
.answerbox .eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--gold-600)}
.answerbox .a{margin:0;font-size:18.5px;line-height:1.55;color:var(--ink-800);font-family:var(--serif)}

.keypoints{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:9px}
.keypoints li{position:relative;padding-left:26px;color:var(--ink-800);font-weight:500}
.keypoints li::before{content:"";position:absolute;left:3px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--gold-500)}

.datacard{margin:0 0 34px;padding:24px 26px 10px;border:1px solid var(--rule-200);
  border-top:3px solid var(--navy-800);border-radius:var(--r);background:var(--white)}
.datacard .eyebrow{margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--navy-800)}
.datacard .tablewrap{margin:0 0 16px}
.datacard .tablenote{margin:0 0 18px}
.datacard .btn{margin-bottom:16px}

@media(max-width:640px){
  .answerbox{padding:18px 20px}
  .answerbox .a{font-size:17px}
  .datacard{padding:18px 18px 6px}
}

/* ---------- The DIY-or-us comparison ----------
   Two panels that are deliberately near-equal in weight. Making the
   do-it-yourself side look like the poor relation would undercut the only
   thing this section is for, which is being believed. The one asymmetry is a
   gold rule on our side — enough to mark it, not enough to argue. */
.compare-band .decide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:30px 0 44px}
.d-panel{padding:28px 30px;border:1px solid var(--rule-200);border-radius:var(--r);background:var(--white)}
.d-panel .eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.d-panel h3{margin:0 0 16px;font-size:21px}
.d-panel .checklist{margin:0 0 18px}
.d-panel .d-note{margin:0;padding-top:16px;border-top:1px solid var(--rule-soft);
  font-size:15px;color:var(--ink-600)}
.d-self{background:var(--paper-50)}
.d-self .eyebrow{color:var(--ink-600)}
.d-us{border-top:3px solid var(--gold-500)}
.d-us .eyebrow{color:var(--gold-600)}

.compare-h{margin:0 0 14px;font-size:20px}
.comparetable th[scope="row"]{width:24%;min-width:180px}
.comparetable td{width:38%}
.comparetable tbody tr:hover{background:var(--paper-50)}
.compare-foot{margin:18px 0 0;font-size:15.5px;color:var(--ink-600);max-width:68ch}

@media(max-width:820px){
  .compare-band .decide{grid-template-columns:1fr;gap:16px}
  .d-panel{padding:22px 22px}
}

/* ---------- The two objections, answered up front ----------
   Measured before this existed, a phone put "why pay you" at screen 13 and
   "you can do this free" at screen 22. Both now sit inside the first four. */

.verifyband{background:var(--paper-50);border-top:1px solid var(--rule-200);
  border-bottom:1px solid var(--rule-200)}
.verify-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.v-card{background:var(--white);border:1px solid var(--rule-200);border-radius:var(--r);padding:26px 28px}
.v-card h3{margin:0 0 16px;font-size:20px}
.v-card .checklist{margin:0 0 16px}
.v-check{border-top:3px solid var(--navy-800)}
.v-note{margin:0;padding-top:14px;border-top:1px solid var(--rule-soft);font-size:14.8px;color:var(--ink-600)}

.v-list{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:baseline}
.v-list dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--ink-600);white-space:nowrap}
.v-list dd{margin:0;font-weight:600;color:var(--ink-800);font-variant-numeric:tabular-nums}
.v-small{display:block;font-size:13.5px;font-weight:400;color:var(--ink-600);margin-top:2px}
.v-links{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px}

.decideband .decide{margin-bottom:14px}
.decide-more{margin:0;font-size:15.5px}

/* ---------- The business lane ---------- */
.bizband{background:var(--navy-900);color:var(--on-navy)}
.bizband h2{color:#fff;max-width:20ch}
.bizband .eyebrow{color:var(--gold-400)}
.bizband p{color:var(--on-navy)}
.bizband strong{color:#fff}
.bizband a:not(.btn){color:var(--gold-400)}
.biz-inner{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:46px;align-items:start}
.biz-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.biz-side{background:rgba(255,255,255,.05);border:1px solid var(--navy-line);
  border-radius:var(--r);padding:24px 26px}
.biz-dates{margin:0 0 14px}
.biz-dates dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--gold-400);margin-top:14px}
.biz-dates dt:first-child{margin-top:0}
.biz-dates dd{margin:3px 0 0;color:#fff;font-variant-numeric:tabular-nums}
.bizband .v-small{color:var(--on-navy-dim)}

/* ---------- Collapsible detail on small screens ----------
   Content stays in the DOM and stays open by default, so no-JS and search
   engines see all of it. A small script closes these below 820px, where the
   eight-row comparison alone was four screens of scrolling. */
.compare-wrap>summary,.aboutband-fold>summary{display:none}
.compare-wrap>summary::-webkit-details-marker{display:none}

@media(max-width:820px){
  .verify-grid{grid-template-columns:1fr;gap:16px}
  .v-card{padding:22px 22px}
  .v-list{grid-template-columns:1fr;gap:4px 0}
  .v-list dd{margin-bottom:10px}
  .biz-inner{grid-template-columns:1fr;gap:26px}
  .bizband h2{max-width:none}

  .compare-wrap>summary,.aboutband-fold>summary{display:flex;align-items:center;
    justify-content:space-between;gap:14px;cursor:pointer;list-style:none;
    padding:15px 18px;margin:8px 0 0;background:var(--white);
    border:1px solid var(--rule-200);border-radius:var(--r);
    font-weight:700;color:var(--navy-800);font-size:15.5px}
  .compare-wrap>summary::after,.aboutband-fold>summary::after{content:"+";color:var(--gold-600);
    font-size:22px;font-weight:800;line-height:1;flex:none}
  .compare-wrap[open]>summary::after,.aboutband-fold[open]>summary::after{content:"–"}
  .compare-wrap>summary .cw-close,.compare-wrap[open]>summary .cw-open{display:none}
  .compare-wrap[open]>summary .cw-close{display:inline}
  .aboutband-fold>summary .af-close,.aboutband-fold[open]>summary .af-close{display:none}
  .aboutband-fold[open]>summary .af-open{display:none}
  .aboutband-fold[open]>summary .af-close{display:inline}
}

/* Generic mobile fold. Ships open; the script closes it below 820px only. */
.mfold>summary{display:none}
.mfold>summary::-webkit-details-marker{display:none}
@media(max-width:820px){
  .mfold>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
    cursor:pointer;list-style:none;padding:15px 18px;margin:6px 0 0;background:var(--white);
    border:1px solid var(--rule-200);border-radius:var(--r);
    font-weight:700;color:var(--navy-800);font-size:15.5px}
  .mfold>summary::after{content:"+";color:var(--gold-600);font-size:22px;font-weight:800;line-height:1;flex:none}
  .mfold[open]>summary::after{content:"–"}
  .section.alt .mfold>summary,.aboutband .mfold>summary{background:var(--paper-50)}
}

/* ---------- Homepage enquiry ---------- */
.enquireband{background:var(--paper-50);border-top:1px solid var(--rule-200)}
.enquire-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;
  align-items:start;margin-top:28px}
.enquire-side h3{margin:0 0 14px;font-size:20px}
.enquire-steps{margin:0 0 24px;padding:0 0 0 20px;display:grid;gap:11px;color:var(--ink-800)}
.enquire-steps li{padding-left:4px}
.enquire-call{padding:18px 20px;background:var(--navy-800);border-radius:var(--r);margin:0 0 20px}
.enquire-call .eyebrow{margin:0 0 4px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--gold-400)}
.enquire-tel{display:inline-block;font-family:var(--serif);font-size:26px;font-weight:600;
  color:#fff;text-decoration:none;letter-spacing:.01em}
.enquire-tel:hover{color:var(--gold-400)}
.enquire-call .v-small{color:var(--on-navy-dim);margin:4px 0 0}
.enquire-assure{padding-top:18px;border-top:1px solid var(--rule-200);font-size:14.8px;
  color:var(--ink-600)}
.enquire-assure p{margin:0 0 9px}
.enquire-assure p:last-child{margin:0}
.enquire-assure b{color:var(--ink-800)}
.enquire-form .searchcard{margin:0}

@media(max-width:900px){
  .enquire-grid{grid-template-columns:1fr;gap:24px}
}

/* ---------- The mission section ----------
   Three figures that state the problem, then what we are building about it.
   The numbers lead because the case is quantitative: the gap between what is
   held and what gets returned is the reason the business exists. */
.missionband{background:var(--paper-50);border-top:1px solid var(--rule-200);
  border-bottom:1px solid var(--rule-200)}
.mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:30px 0 34px}
.m-card{background:var(--white);border:1px solid var(--rule-200);border-top:3px solid var(--gold-500);
  border-radius:var(--r);padding:24px 26px}
.m-card h3{margin:0 0 10px;font-size:17px;line-height:1.35}
.m-card p{margin:0 0 10px;font-size:15px;color:var(--ink-600)}
.m-card p:last-child{margin-bottom:0}
/* Scoped to .m-card, because a bare .m-n loses to .m-card p on specificity and
   the figure silently renders as body copy — which is exactly what happened. */
.m-card p.m-n{margin:0 0 10px;font-family:var(--serif);font-size:34px;line-height:1.05;
  font-weight:600;color:var(--navy-800);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.mission-statement{background:var(--navy-800);color:var(--on-navy);border-radius:var(--r);
  padding:32px 36px}
.mission-statement h3{margin:0 0 14px;color:#fff;font-size:22px}
.mission-statement p{margin:0 0 14px;color:var(--on-navy);max-width:74ch}
.mission-statement strong{color:#fff}
.mission-statement a:not(.btn){color:var(--gold-400)}
.m-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0!important}
.mission-statement .btn-navy{background:var(--gold-500);color:var(--navy-800);border-color:var(--gold-500)}
.mission-statement .btn-navy:hover{background:var(--gold-400)}
.mission-statement .btn-ghost,
.bizband .btn-ghost{border-color:rgba(255,255,255,.42);color:#fff}
.mission-statement .btn-ghost:hover,
.bizband .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}

@media(max-width:900px){
  .mission-grid{grid-template-columns:1fr;gap:14px}
  .m-card{padding:20px 22px}
  .m-n{font-size:30px}
  .mission-statement{padding:24px 24px}
}

/* ---------- Data charts on generated pages ----------
   Inline SVG scales to its container on its own; the figure just gives it room
   and a horizontal escape hatch on very narrow screens. */
.cups-chart-fig{margin:0 0 22px;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cups-chart{display:block;width:100%;min-width:420px;height:auto}
@media(max-width:520px){.cups-chart{min-width:340px}}

/* ---------- Latest articles rail ----------
   A grid on a wide screen, a scroll-snapping row on a narrow one. No script:
   a carousel that needs JavaScript shows an empty box when the script fails,
   and a crawler sees nothing at all. */
.latestposts{background:var(--paper-50);border-top:1px solid var(--rule-200)}
.lp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.lp-head .eyebrow{margin:0 0 4px}
.lp-head h2{margin:0}
.lp-all{flex:none;font-weight:700;font-size:15.5px;text-decoration:none;white-space:nowrap}
.lp-all:hover{text-decoration:underline}

.lp-rail{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.lp-card{margin:0}
.lp-card>a{display:flex;flex-direction:column;height:100%;gap:8px;text-decoration:none;
  background:var(--white);border:1px solid var(--rule-200);border-radius:var(--r);
  padding:20px 22px;transition:border-color .15s ease,transform .15s ease}
.lp-card>a:hover{border-color:var(--gold-500);transform:translateY(-2px)}
.lp-date{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ink-600);font-variant-numeric:tabular-nums}
.lp-title{font-family:var(--serif);font-size:18px;line-height:1.3;font-weight:600;
  color:var(--navy-800);text-wrap:balance}
.lp-lede{font-size:14.5px;line-height:1.55;color:var(--ink-600);flex:1}
.lp-more{font-size:14px;font-weight:700;color:var(--gold-600);margin-top:2px}

@media(prefers-reduced-motion:reduce){.lp-card>a{transition:none}.lp-card>a:hover{transform:none}}

@media(max-width:820px){
  .lp-head{flex-direction:column;align-items:flex-start;gap:8px}
  /* Swipeable row. The negative margin lets cards bleed to the screen edge so
     the last one is visibly cut off, which is what tells a thumb to scroll. */
  .lp-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:12px;
    margin-inline:calc(clamp(20px,3vw,40px) * -1);
    padding-inline:clamp(20px,3vw,40px);padding-bottom:6px;
    scrollbar-width:none}
  .lp-rail::-webkit-scrollbar{display:none}
  .lp-card{flex:0 0 78%;max-width:300px;scroll-snap-align:start}
}

/* ---------- Match confidence ----------
   The search is deliberately broad, because a missed record costs someone their
   money. These labels are what keep breadth from reading as noise: every result
   says how good a match it is, so a weak one is informative rather than
   misleading. */
.cups-tier{margin:0 0 5px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.cups-tier-exact .cups-tier{color:var(--success-700)}
.cups-tier-close .cups-tier{color:var(--gold-600)}
.cups-tier-possible .cups-tier{color:var(--ink-600)}
.cups-tier-exact{border-left:3px solid var(--success-700)}
.cups-tier-close{border-left:3px solid var(--gold-500)}
.cups-tier-possible{border-left:3px solid var(--rule-200)}
.cups-hit.cups-tier-exact,.cups-hit.cups-tier-close,.cups-hit.cups-tier-possible{padding-left:17px}

/* ---------- Booking triage ----------
   Set apart from the contact fields: these three answers decide the paperwork,
   and the follow-ups appear beneath them as they are answered. */
.bk-triage{margin:26px 0;padding:22px 24px;background:var(--paper-50);
  border:1px solid var(--rule-200);border-radius:var(--r)}
.bk-triage h3{margin:0 0 4px;font-size:18px}
.bk-triage>.field:first-of-type{margin-top:14px}
.bk-followups:not(:empty){margin-top:6px;padding-top:16px;border-top:1px solid var(--rule-200)}
.bk-triage .req{color:var(--notice-700)}
.bk-triage .microcopy{display:block;margin-top:5px}

/* The booking deposit. Gold-tinted so it reads as money rather than as
   another form field, and stated above the button, never below it. */
.bk-deposit{margin:26px 0 18px;padding:18px 20px;background:var(--gold-tint);
  border:1px solid var(--gold-line);border-radius:4px}
.bk-deposit-amt{margin:0 0 10px;font-size:17px;color:var(--ink-800)}
.bk-deposit-amt strong{font-weight:700}
.bk-deposit ul{margin:0;padding-left:19px;font-size:14px;line-height:1.6;color:var(--ink-600)}
.bk-deposit li{margin:0 0 5px}
.bk-deposit li:last-child{margin-bottom:0}
.cups-choice-fee{display:block;margin-top:3px;font-size:12px;font-style:normal;
  color:var(--ink-600);white-space:nowrap}

/* ── Claim wizard ────────────────────────────────────────────────────── */
.cw{max-width:760px}
.cw h2{margin:0 0 6px;font-size:27px}
.cw .cw-lede{margin:0 0 22px;color:var(--ink-600);font-size:16px;line-height:1.6;max-width:62ch}
.cw-h3{margin:34px 0 6px;font-size:20px}
.cw-steps{display:flex;gap:0;list-style:none;margin:0 0 30px;padding:0;
  border-bottom:1px solid var(--rule-200);flex-wrap:wrap}
.cw-steps li{display:flex;align-items:center;gap:7px;padding:0 16px 12px 0;font-size:13.5px;color:var(--ink-400)}
.cw-steps li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:11.5px;font-weight:700;background:var(--rule-soft);color:var(--ink-600)}
.cw-steps li.current{color:var(--ink-800);font-weight:600}
.cw-steps li.current span{background:var(--navy-800);color:#fff}
.cw-steps li.done span{background:var(--gold-500);color:var(--navy-800)}
.cw-card{padding:24px 26px;background:var(--paper-50);border:1px solid var(--rule-200);
  border-radius:5px;margin:0 0 20px}
.cw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 20px}
.cw .field{margin:0 0 16px}
.cw .field label{display:block;margin:0 0 5px;font-weight:600;font-size:14.5px;color:var(--ink-800)}
.cw .field input,.cw .field select,.cw .field textarea{width:100%;padding:11px 13px;font-size:15.5px;
  border:1px solid var(--rule-strong);border-radius:4px;background:#fff;color:var(--ink-800)}
.cw .field input:focus,.cw .field select:focus,.cw .field textarea:focus{
  outline:2px solid var(--gold-500);outline-offset:1px;border-color:var(--gold-500)}
.cw-opt{font-weight:400;color:var(--ink-400);font-size:12.5px}
.cw-check{display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;font-size:14.5px;color:var(--ink-800)}
.cw-check input{margin-top:3px;flex:none}
.cw-pid{margin:0 0 24px;padding:14px 18px;background:#fff;border:1px solid var(--rule-200);border-radius:4px}
.cw-pid summary{cursor:pointer;font-weight:600;color:var(--navy-800);font-size:14.5px}
.cw-pid form{margin-top:14px}
.cw-list{list-style:none;margin:0 0 18px;padding:0;border:1px solid var(--rule-200);border-radius:4px;overflow:hidden}
.cw-list li{border-bottom:1px solid var(--rule-200)}
.cw-list li:last-child{border-bottom:0}
.cw-list label{display:grid;grid-template-columns:26px 1fr auto;gap:4px 12px;padding:14px 16px;
  cursor:pointer;align-items:center}
.cw-list label:hover{background:var(--hover-light)}
.cw-list input{grid-row:1/3;justify-self:center}
.cw-r-name{font-weight:600;color:var(--ink-800)}
.cw-r-amt{grid-row:1/3;font-weight:700;color:var(--navy-800);font-variant-numeric:tabular-nums;text-align:right}
.cw-r-meta,.cw-r-id{grid-column:2;font-size:12.5px;color:var(--ink-600)}
.cw-r-id{color:var(--ink-400)}
.cw-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.cw-table th,.cw-table td{padding:11px 12px;border-bottom:1px solid var(--rule-200);text-align:left}
.cw-table thead th{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-600)}
.cw-table .num{text-align:right;font-variant-numeric:tabular-nums}
.cw-table .cw-total td{border-bottom:0;border-top:2px solid var(--rule-strong)}
.cw-preview{margin:4px 0 20px;padding:16px 18px;background:var(--gold-tint);
  border:1px solid var(--gold-line);border-left:3px solid var(--gold-500);border-radius:4px}
.cw-preview h3{margin:0 0 8px;font-size:15px;color:var(--ink-800)}
.cw-preview ul{margin:0 0 8px;padding-left:19px;font-size:14px;color:var(--ink-800);line-height:1.55}
.cw-disclose{margin:22px 0 20px;padding:18px 20px;background:#fff;
  border:1px solid var(--rule-200);border-left:3px solid var(--navy-800);border-radius:4px}
.cw-disclose h3{margin:0 0 10px;font-size:16px;color:var(--ink-800)}
.cw-disclose ul{margin:0 0 14px;padding-left:19px;font-size:14px;line-height:1.6;color:var(--ink-600)}
.cw-disclose li{margin:0 0 6px}
.cw-skip{margin:20px 0 0;font-size:14.5px}
.cw-err{border-left-color:var(--notice-700)}
.cw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The primary action, in the masthead. */
.nav-claim{margin-left:14px;flex:none;white-space:nowrap;padding:11px 20px;font-size:14.5px}
/* Once the menu collapses, Claim Property keeps its place beside the brand and
   the Menu button moves to the far right. It must stay auto-width: width:100%
   in a nowrap flex masthead overflowed the viewport instead of wrapping. */
/* Between the collapse breakpoint and ~1460px the eight menu items, the
   consultation button and Claim Property together measured wider than the
   1380px content column and pushed the page into a sideways scroll. Tighten
   the bar rather than collapsing a full desktop layout to a hamburger. This
   applies at every desktop width: above ~1460 the wrap stops growing, so the
   untightened bar overflowed its container even on a 1920px screen. */
@media(min-width:1341px){
  .masthead .wrap{gap:12px}
  .nav>li>a{font-size:14.5px;padding:11px 7px}
  .nav>li.nav-cta>a.btn-gold{font-size:13.5px;padding:9px 11px}
  .nav-claim{margin-left:9px;padding:10px 14px;font-size:14px}
}
@media(max-width:1340px){
  .nav-claim{order:2;margin-left:auto;width:auto;padding:10px 16px;font-size:14px}
  .navtoggle{order:3;margin-left:10px}
}
@media(max-width:420px){
  .nav-claim{padding:9px 12px;font-size:13px}
  .navtoggle{padding:8px 10px;font-size:13px}
}
@media(max-width:600px){
  .cw-card{padding:18px 16px}
  .cw-grid{grid-template-columns:1fr}
  .cw-list label{grid-template-columns:24px 1fr;gap:3px 10px}
  .cw-r-amt{grid-row:auto;grid-column:2;text-align:left}
}

/* Name watch — the only audience we own rather than rent. */
.cups-watch{margin:30px 0 4px;padding:24px 26px;background:var(--navy-tint);
  border:1px solid var(--rule-200);border-left:3px solid var(--gold-500);border-radius:4px}
.cups-watch h3{margin:0 0 8px;font-size:20px;color:var(--ink-800)}
.cups-watch>p{margin:0 0 16px;color:var(--ink-600);font-size:15px;max-width:62ch}
.cups-watch-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.cups-watch-row input{flex:1 1 210px;min-width:0;padding:11px 13px;font-size:15px;
  border:1px solid var(--rule-strong);border-radius:4px;background:#fff;color:var(--ink-800)}
.cups-watch-row input:focus{outline:2px solid var(--gold-500);outline-offset:1px;border-color:var(--gold-500)}
.cups-watch-row .btn{flex:0 0 auto}
.cups-watch .microcopy{display:block;margin-top:9px;font-size:12.5px;color:var(--ink-600)}
.cups-watch-done{margin:30px 0 4px;padding:20px 24px;background:var(--ok-tint);
  border:1px solid #BEDACB;border-left:3px solid var(--success-700);border-radius:4px}
.cups-watch-done p{margin:0;color:var(--ink-800)}

/* ── Data hub ────────────────────────────────────────────────────────── */
.hub-headline{text-align:center;padding:44px 0 40px;border-bottom:1px solid var(--rule-200);margin-bottom:44px}
.hub-eyebrow{margin:0 0 14px;font-size:11.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold-600)}
.hub-figure{margin:0 0 16px;font-family:var(--serif,Georgia,serif);font-weight:600;
  font-size:clamp(40px,9vw,78px);line-height:1;color:var(--navy-800);letter-spacing:-.02em}
.hub-sub{margin:0 auto 12px;max-width:56ch;font-size:19px;line-height:1.55;color:var(--ink-800)}
.hub-note{margin:0 auto;max-width:52ch;font-size:14.5px;color:var(--ink-600)}
.hub-block{margin:0 0 48px}
.hub-block h2{margin:0 0 6px;font-size:27px}
.hub-lede{margin:0 0 20px;color:var(--ink-600);max-width:64ch}
.hub-caveat{margin:16px 0 0;padding:13px 16px;background:var(--paper-50);
  border-left:3px solid var(--rule-strong);border-radius:3px;
  font-size:13.5px;line-height:1.6;color:var(--ink-600)}
.hub-bars{display:grid;gap:9px}
.hub-bar{display:grid;grid-template-columns:minmax(96px,168px) 1fr minmax(80px,auto);
  gap:12px;align-items:center}
.hub-bar-name{font-size:14.5px;color:var(--ink-800);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hub-bar-track{height:20px;background:var(--rule-soft);border-radius:3px;overflow:hidden}
.hub-bar-fill{display:block;height:100%;background:var(--navy-800);border-radius:3px}
.hub-bar:nth-child(-n+3) .hub-bar-fill{background:var(--gold-500)}
.hub-bar-val{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink-600);text-align:right}
.hub-table-wrap{overflow-x:auto}
.hub-table{width:100%;border-collapse:collapse;font-size:15px}
.hub-table th,.hub-table td{padding:11px 14px;border-bottom:1px solid var(--rule-200);text-align:left}
.hub-table thead th{font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-600);border-bottom:2px solid var(--rule-strong)}
.hub-table tbody th{font-weight:600;color:var(--ink-800)}
.hub-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hub-table .go{text-align:right;white-space:nowrap}
.hub-table tbody tr:hover{background:var(--hover-light)}
.hub-two{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.hub-cta{margin:8px 0 0;padding:34px 32px;background:var(--navy-tint);
  border:1px solid var(--rule-200);border-radius:5px;text-align:center}
.hub-cta h2{margin:0 0 8px;font-size:26px}
.hub-cta p{margin:0 auto 18px;max-width:56ch;color:var(--ink-600)}
.hub-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:0}
@media(max-width:820px){
  .hub-two{grid-template-columns:1fr;gap:34px}
  .hub-bar{grid-template-columns:minmax(84px,124px) 1fr auto;gap:9px}
  .hub-bar-name{font-size:13.5px}
  .hub-bar-val{font-size:12.5px}
  .hub-headline{padding:32px 0 30px;margin-bottom:34px}
  .hub-cta{padding:26px 20px}
}
@media(max-width:600px){
  .cups-watch{padding:20px 18px}
  .cups-watch-row{flex-direction:column}
  .cups-watch-row .btn{width:100%}
}
.bk-paid{display:inline-block;padding:3px 9px;border-radius:3px;font-size:12.5px;
  font-weight:700;background:var(--ok-tint);color:var(--success-700)}
.bk-await{display:inline-block;padding:3px 9px;border-radius:3px;font-size:12.5px;
  font-weight:700;background:var(--gold-tint);color:var(--gold-600)}

/* Appointment confirmation on the thank-you page. */
.bk-thanks{margin:0 0 34px;padding:26px 28px;background:var(--paper-50);
  border:1px solid var(--rule-200);border-left:3px solid var(--gold-500);border-radius:4px}
.bk-thanks h2{margin:0 0 8px;font-size:25px}
.bk-thanks-lede{margin:0 0 20px;color:var(--ink-600)}
.bk-thanks-meta{margin:0 0 18px;display:grid;gap:11px}
.bk-thanks-meta>div{display:flex;gap:14px;align-items:baseline}
.bk-thanks-meta dt{flex:none;min-width:104px;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-600)}
.bk-thanks-meta dd{margin:0;color:var(--ink-800)}
.bk-thanks-policy{margin:0 0 18px;padding-left:19px;font-size:14px;
  line-height:1.6;color:var(--ink-600)}
.bk-thanks-policy li{margin:0 0 5px}
@media(max-width:600px){
  .bk-thanks{padding:20px 18px}
  .bk-thanks-meta>div{flex-direction:column;gap:2px}
  .bk-thanks-meta dt{min-width:0}
}

/* ---------- Coverage disclosure ----------
   What our copy of the State's file does and does not contain. It appears
   under the search box, inside an empty result, on a failed property-ID
   lookup and on the data hub, so it has to read well both as a page section
   and as a note inside another card. */
.cups-coverage-line{margin:14px 0 0;font-size:14.5px;color:var(--ink-400)}
.cups-coverage-line a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cups-coverage-line a:hover{color:var(--navy-700)}

.cups-coverage{margin:28px 0 0}
.cups-coverage h2{margin:0 0 12px}
.cups-coverage h3{margin:0 0 10px;font-size:20px}
.cups-coverage h4{margin:0 0 8px;font-size:16px;font-family:var(--sans);
  font-weight:700;letter-spacing:.2px}
.cups-coverage p{margin:0 0 12px}
.cups-coverage-inline{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px}
.cups-coverage-gap{margin-top:18px;padding:18px 20px;border-radius:var(--r);
  background:rgba(201,162,44,.09);border-left:3px solid var(--gold-500)}
.cups-coverage-gap p:last-child{margin-bottom:0}
.cups-coverage-gap .btn{margin:2px 0 10px}
.cups-coverage .cups-smallprint{font-size:14px;color:var(--ink-400);margin-bottom:0}
@media(max-width:640px){
  .cups-coverage-inline{padding:16px}
  .cups-coverage-gap{padding:14px 15px}
}

/* The kit offer inside a coverage block. It leads on an empty name search and
   sits second on a property-ID miss, so it has two weights. */
.cups-diy-cta{margin-top:18px;padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:#fff}
.cups-diy-cta.is-lead{border:1px solid var(--gold-500);background:rgba(201,162,44,.07)}
.cups-diy-cta h4{margin:0 0 8px}
.cups-diy-cta p{margin:0 0 12px}
.cups-diy-cta .btn{margin:2px 0 8px}
.cups-diy-cta .cups-smallprint{margin-bottom:0}
@media(max-width:640px){
  .cups-diy-cta{padding:15px}
  .cups-diy-cta .btn{display:block;text-align:center}
}

/* On an empty search the free-State route stays a link, not a second button:
   two buttons side by side made the free exit compete with the kit. */
.cups-state-link{color:var(--navy-700);text-decoration:underline;
  text-underline-offset:2px;font-weight:600}
.cups-state-link:hover{color:var(--navy-900)}

/* ---------- Outbound landing page ----------
   The page a letter recipient arrives at. It already knows their property, so
   the amount leads and the only decision left is yes or no. */
.cups-found{max-width:760px}
.cups-found-eyebrow{font-family:var(--sans);font-size:13px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-400);margin:0 0 10px}
.cups-found h2{margin:0 0 10px}
.cups-found-lede{font-size:18px;margin:0 0 26px}
.cups-found-figure{padding:26px 28px;border-radius:var(--r);background:var(--navy-900);
  color:#fff;margin:0 0 26px}
.cups-found-amount{display:block;font-family:var(--serif);font-size:52px;line-height:1.05;
  color:var(--gold-500)}
.cups-found-type{display:block;margin-top:8px;font-size:15px;color:var(--on-navy-dim,#C4CEDA)}
.cups-found-table{width:100%;border-collapse:collapse;margin:0 0 28px}
.cups-found-table th{text-align:left;padding:12px 16px 12px 0;color:var(--ink-400);
  font-weight:600;font-size:15px;vertical-align:top;width:46%}
.cups-found-table td{padding:12px 0;border-bottom:1px solid var(--line)}
.cups-found-table .cups-dim{color:var(--ink-400);font-size:14px}
.cups-found-net th,.cups-found-net td{font-size:19px;font-weight:700;border-bottom:0}
.cups-found-honest{padding:22px 24px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--line);margin:0 0 30px}
.cups-found-honest h3{margin:0 0 10px}
.cups-found-honest p:last-child{margin-bottom:0}
.cups-found-form{padding:26px 28px;border:1.5px solid var(--gold-500);border-radius:var(--r);
  background:rgba(201,162,44,.06)}
.cups-found-form h3{margin:0 0 18px}
.cups-found-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cups-found-agree{margin:20px 0;font-size:15px;line-height:1.55}
.cups-found-agree input{margin-right:8px}
.cups-found-optout{margin-top:24px;font-size:14px}
.cups-found-optout a{color:var(--ink-400)}
.cups-found-code{max-width:520px}
.cups-found-thanks{max-width:640px}
@media(max-width:640px){
  .cups-found-figure{padding:20px}
  .cups-found-amount{font-size:40px}
  .cups-found-form{padding:18px}
  .cups-found-table th{width:52%;padding-right:10px}
}

/* The "what the fee buys" band: two columns that must not collapse into a
   wall of text on a phone. */
.paidfor{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:38px;margin-top:34px}
.paidfor-col h3{margin:0 0 12px}
.paidfor-col > p:first-of-type{margin-top:0}
.paidfor-cta{margin-top:22px}
@media(max-width:720px){ .paidfor{gap:30px} }

/* ---------- Surname pages ----------
   One page per surname, built from the index. These are the inbound engine, so
   the figures have to read at a glance and the free-search call has to be the
   obvious next move. */
.sn-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 26px}
.sn-tile{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.sn-tile-k{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-400)}
.sn-tile-v{display:block;font-family:var(--serif);font-size:26px;margin-top:4px;color:var(--navy-900)}
.sn-cta-line{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 34px}
.sn-cta-note{font-size:14.5px;color:var(--ink-400)}
.sn-holders{list-style:none;padding:0;margin:0 0 30px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.sn-holders li{padding:12px 14px;border-left:3px solid var(--gold-500);background:var(--paper)}
.sn-holders li span{display:block;font-size:14px;color:var(--ink-400);margin-top:2px}
.sn-firsts{line-height:2.1;margin-bottom:30px}
.sn-firsts a{white-space:nowrap}
@media(max-width:640px){
  .sn-tile-v{font-size:22px}
  .sn-cta-line .btn{width:100%;text-align:center}
}

/* Offered on an empty search when the surname itself is well represented. */
.cups-sn-offer{margin:0 0 20px;padding:14px 16px;border-left:3px solid var(--gold-500);
  background:rgba(201,162,44,.07);border-radius:0 var(--r) var(--r) 0}

/* Honeypot. Positioned off-canvas rather than display:none, because some bots
   now skip anything that is display:none and some screen readers announce it
   anyway; aria-hidden plus tabindex -1 keeps it away from real people. */
.cups-hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
.cups-captcha{margin:18px 0}

/* ---------- Glossary ---------- */
.gloss-lede{font-size:18px;max-width:65ch;margin:0 0 28px}
.gloss-index{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;padding:18px 20px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.gloss-index a{font-size:14.5px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  background:#fff;text-decoration:none;white-space:nowrap}
.gloss-index a:hover{border-color:var(--gold-500);color:var(--navy-900)}
.gloss-list{margin:0}
.gloss-item{padding:22px 0;border-top:1px solid var(--line)}
.gloss-item:first-child{border-top:0;padding-top:0}
.gloss-item dt{font-family:var(--serif);font-size:23px;color:var(--navy-900);margin:0 0 8px;
  scroll-margin-top:100px}
.gloss-also{font-family:var(--sans);font-size:14px;color:var(--ink-400);font-style:italic;
  margin-left:10px;font-weight:400}
.gloss-item dd{margin:0;max-width:68ch}
.gloss-item dd p{margin:0 0 8px}
.gloss-more{font-size:14.5px;color:var(--ink-400)}
.gloss-more a{margin-right:4px}
.gloss-foot{margin-top:36px;padding:18px 20px;border-left:3px solid var(--gold-500);
  background:rgba(201,162,44,.07);border-radius:0 var(--r) var(--r) 0}
@media(max-width:640px){ .gloss-item dt{font-size:20px} .gloss-index{padding:14px} }

/* ---------- Surname directory ----------
   The crawl path to the 13,126 surname pages. It has to be plain anchors: a
   filter widget or anything JS-driven is invisible to a crawler, which is how
   those pages ended up orphaned in the first place. */
.nameaz{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.nameaz a,.nameaz-off{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:56px;padding:9px 8px;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;background:#fff;font-weight:700;color:var(--navy-900)}
.nameaz a span{font-weight:400;font-size:11.5px;color:var(--ink-400);margin-top:2px}
.nameaz a:hover{border-color:var(--gold-500)}
.nameaz a.is-on{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.nameaz a.is-on span{color:var(--on-navy-dim,#C4CEDA)}
.nameaz-off{opacity:.32;font-weight:400}
.namehint{margin:0 0 24px}
.namepager{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0}
.namepager a,.namepager span{padding:7px 12px;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;font-size:14.5px;background:#fff}
.namepager span.is-on{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}