/* ═════════════════════════════════════════════════════════════════════
   VeraZK — "The Record"

   Three faces, three jobs, and the discipline is not mixing them:

     Newsreader     the voice. Display only, light weights, one italic.
     Archivo        anything a person wrote.
     IBM Plex Mono  anything a machine produced — labels, figures,
                    jurisdiction codes, service numbers, hashes.

   A reader learns in two seconds that mono means "this came from the
   system", which does the work an icon set would otherwise do badly.
   There is not one icon in this stylesheet, deliberately.
   ═════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200;0,6..72,300;0,6..72,400;1,6..72,200;1,6..72,300&family=Archivo:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  /* ── Paper ────────────────────────────────────────────────────── */
  --paper:#f6f4f8;
  --paper-card:#fdfcfe;
  --paper-tint:#f4f0fb;

  /* ── Ink ──────────────────────────────────────────────────────── */
  --ink:#191622;
  --ink-70:rgba(25,22,34,.70);
  --ink-68:rgba(25,22,34,.78);
  --ink-62:rgba(25,22,34,.74);
  --ink-60:rgba(25,22,34,.72);
  --ink-45:rgba(25,22,34,.62);
  --ink-40:rgba(25,22,34,.56);
  --ink-28:rgba(25,22,34,.28);

  /* ── Violet: the identity ─────────────────────────────────────── */
  --violet:#5231ad;
  --violet-deep:#3d2378;
  --violet-light:#a678ff;
  --violet-pale:#b49af0;
  --violet-22:rgba(61,35,120,.22);
  --violet-16:rgba(61,35,120,.16);
  --violet-14:rgba(61,35,120,.14);
  --violet-65:rgba(61,35,120,.82);

  /* The dark band is deep violet, not black. Black would read as a
     different brand dropped into the page; #241a3d is the ink with the
     violet still in it. */
  --band:#241a3d;
  --band-panel:#2c2148;
  --band-inset:#1e1633;
  --on-band:#f6f4f8;
  --on-band-62:rgba(246,244,248,.76);
  --on-band-40:rgba(246,244,248,.60);
  --rule-band:rgba(246,244,248,.16);

  /* Gold marks a verified state and nothing else. Used for decoration
     it stops meaning "this checks out". */
  --gold:#d9a55e;
  --rose:#9c3f5f;

  --rule:rgba(25,22,34,.14);
  --rule-soft:rgba(25,22,34,.12);

  --serif:Newsreader,Georgia,'Times New Roman',serif;
  --sans:Archivo,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --pad:44px;
  /* The content column. Widened on request. The register is the binding
     constraint -- much past this and the frameworks column drifts far enough
     from the service name that the eye loses the row. */
  --shell:min(94vw, 2160px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Clear the sticky masthead on every in-page jump. Without this the target
   heading scrolls up behind the nav and the reader lands mid-section. */
section[id],div[id],:target{scroll-margin-top:118px}
@media(max-width:900px){section[id],div[id],:target{scroll-margin-top:92px}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.64 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}

/* ── Masthead ───────────────────────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.masthead .shell{display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:32px;height:98px}
.masthead .mark img{height:52px;width:auto;display:block}
.masthead nav{display:flex;gap:30px;justify-content:center;
  font:500 12px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-62)}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--violet)}
.masthead .actions-right{display:flex;align-items:center;gap:24px;
  justify-self:end}
.masthead .social{display:flex;gap:10px;align-items:center}
.masthead .social a{color:var(--ink-62);display:flex}
.masthead .social a:hover{color:var(--violet)}
.masthead .social svg{width:18px;height:18px;fill:currentColor}
.masthead .start{font:600 12px/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;border:1px solid var(--violet);
  color:var(--violet);padding:11px 17px;white-space:nowrap}
.masthead .start:hover{background:var(--violet);color:var(--paper)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;
  font:600 12px/1 var(--mono);letter-spacing:.09em;color:var(--ink-62)}

/* ── Section header ─────────────────────────────────────────────
   Eyebrow, serif headline left, muted aside right, then one rule
   across the full width. This pattern is the page's spine — it is
   what makes nine sections read as a document rather than nine
   cards at identical weight. */
.eyebrow{font:600 11.5px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-45);margin:0 0 18px}
.eyebrow.v{color:var(--violet)}

.sechead{display:grid;grid-template-columns:1.35fr .65fr;
  gap:0 60px;align-items:end;padding-bottom:20px;
  border-bottom:1px solid var(--violet-22)}
/* A section with no aside is one column, not one column and a gap. */
.sechead:not(:has(.aside)){grid-template-columns:1fr}
.sechead h2{font:300 clamp(38px,3vw,58px)/1.1 var(--serif);letter-spacing:-.018em;
  max-width:22ch;text-wrap:pretty}
.sechead .aside{font:400 15px/1.64 var(--sans);color:var(--ink-62);
  text-align:right;text-wrap:pretty}

section{padding:82px 0}
section.tight{padding:60px 0}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1.12fr .88fr;gap:58px;
  padding:78px 0 54px;align-items:start}
.hero h1{font:300 clamp(64px,5.2vw,104px)/.96 var(--serif);letter-spacing:-.02em;margin:0 0 26px}
.hero h1 em{font-style:italic;font-weight:200;color:var(--violet)}
.hero .lede{font:400 17px/1.64 var(--sans);color:var(--ink-68);
  margin:0 0 32px;max-width:52ch;text-wrap:pretty}

.actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn{font:600 13px/1 var(--sans);letter-spacing:.03em;
  background:var(--violet-deep);color:var(--paper);padding:15px 24px;
  display:inline-block}
.btn:hover{background:var(--violet)}
.btn.line{background:transparent;color:var(--ink);
  border:1px solid var(--ink-28);padding:14px 22px}
.btn.line:hover{border-color:var(--violet);color:var(--violet)}
.btn.pale{background:var(--paper-tint);color:var(--ink)}
.btn.pale:hover{background:#fff}
.link{font:500 13.5px/1 var(--sans);color:var(--violet);
  border-bottom:1px solid rgba(82,49,173,.35);padding:0 0 3px}

/* ── The hero card ──────────────────────────────────────────────── */
.card{background:var(--paper-card);border:1px solid var(--violet-22);
  box-shadow:0 1px 0 rgba(61,35,120,.08)}
.card .head{display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:13px 20px;background:var(--paper-tint);
  border-bottom:1px solid var(--violet-16)}
.card .head b{font:600 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--violet-65)}
.card .head span{font:700 11px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--violet)}
.card .body{padding:26px 20px 22px}
.card .claim{font:300 clamp(22px,1.5vw,28px)/1.34 var(--serif);margin:0 0 22px;text-wrap:pretty}
.figures{display:grid;grid-template-columns:auto 1fr;margin:0;
  font:400 12.5px/1 var(--mono)}
.figures dt{border-top:1px solid var(--rule-soft);padding:13px 0;
  color:var(--ink-45);letter-spacing:.08em;text-transform:uppercase}
.figures dd{border-top:1px solid var(--rule-soft);padding:13px 0;margin:0;
  text-align:right;font-weight:600;font-size:15px}
.figures dd.hi{color:var(--violet)}
.card .note{margin:22px 0 0;padding:14px;background:var(--paper-tint);
  border:1px solid var(--violet-14);font:400 13.5px/1.6 var(--sans);
  color:var(--ink-70)}

/* ── Strip ──────────────────────────────────────────────────────── */
.strip{display:flex;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.strip div{flex:1;padding:19px 0 19px 24px;
  font:600 12px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-62);
  border-left:1px solid var(--rule)}
.strip div:first-child{border-left:0;padding-left:0}

/* ── Argument: heading left, points stacked right ────────────────
   Three points spread across the full width read as a feature grid.
   Stacked beside the heading they read as reasoning, which is what
   that section is doing. */
.argument{display:grid;grid-template-columns:.85fr 1.15fr;gap:0 76px;
  align-items:start}
.argument .lead h2{font:300 clamp(36px,2.8vw,54px)/1.12 var(--serif);letter-spacing:-.018em;
  margin:0 0 22px;max-width:15ch;text-wrap:pretty}
.argument .lead p{font:400 16px/1.66 var(--sans);color:var(--ink-62);
  max-width:42ch;text-wrap:pretty}
.argument .points > div{display:grid;grid-template-columns:52px 1fr;
  border-top:1px solid var(--rule);padding:22px 0 26px}
.argument .points .n{font:400 12px/1.75 var(--mono);letter-spacing:.12em;
  color:var(--ink-40)}
.argument .points h3{font:600 16.5px/1.35 var(--sans);margin:0 0 8px}
.argument .points p{font:400 15px/1.64 var(--sans);color:var(--ink-62)}
@media(max-width:900px){
  .argument{grid-template-columns:1fr;gap:34px}
  .argument .lead h2{font-size:clamp(28px,7.5vw,38px);max-width:none}
}

/* ── Numbered grid ──────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px;
  margin-top:46px}
.grid3 > div{border-top:1px solid var(--rule);padding:16px 0 30px}
.grid3 .n{font:500 10px/1 var(--mono);letter-spacing:.16em;
  color:var(--ink-40);margin:0 0 14px}
.grid3 h3{font:300 clamp(23px,1.5vw,29px)/1.24 var(--serif);margin:0 0 12px}
.grid3 p{font:400 15px/1.65 var(--sans);color:var(--ink-62)}
.grid3 .seal{display:inline-block;margin-top:14px;
  font:500 10px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--violet)}
.grid3 .seal::before{content:"✓  "}
.grid3 .seal.gold{color:var(--gold)}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 44px;
  margin-top:46px}
.grid4 > div{border-top:1px solid var(--rule);padding:16px 0 26px}
.grid4 .n{font:500 10px/1 var(--mono);letter-spacing:.16em;
  color:var(--ink-40);margin:0 0 12px}
.grid4 h3{font:600 14.5px/1.35 var(--sans);margin:0 0 6px}
.grid4 p{font:400 14.5px/1.62 var(--sans);color:var(--ink-60)}

/* ── The register ───────────────────────────────────────────────── */
.catalogue{display:grid;grid-template-columns:230px 1fr;gap:0 44px;
  margin-top:40px}
.filter .label{font:500 9.5px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-40);margin:0 0 16px}
.filter button{display:flex;justify-content:space-between;align-items:center;
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:11px 12px;font:400 14px/1 var(--sans);color:var(--ink-70);
  border-bottom:1px solid var(--rule-soft)}
.filter button:hover{color:var(--violet)}
.filter button:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.filter button{transition:background .12s,color .12s}
.filter button b{font:500 11px/1 var(--mono);color:var(--ink-40);font-weight:500}
.filter button[aria-pressed="true"]{background:var(--violet-deep);
  color:var(--paper)}
.filter button[aria-pressed="true"] b{color:rgba(246,244,248,.7)}
.filter .foot{margin-top:26px;font:400 13px/1.6 var(--sans);
  color:var(--ink-60)}

.register{width:100%;border-collapse:collapse;border-left:1px solid var(--rule);
  padding-left:44px}
.reg-wrap{border-left:1px solid var(--rule);padding-left:44px;overflow-x:auto}
.register th{text-align:left;padding:0 20px 14px 0;
  border-bottom:1px solid var(--rule);
  font:600 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-40)}
.register td{padding:19px 20px 19px 0;border-bottom:1px solid var(--rule-soft);
  vertical-align:baseline}
.register tbody tr:hover{background:var(--paper-tint)}
.register .no{font:400 12.5px/1 var(--mono);color:var(--ink-40);width:54px}
.register .svc{font:600 16.5px/1.3 var(--sans);white-space:nowrap}
.register .fam{font:600 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet);white-space:nowrap}
.register .who{font:400 14.5px/1.5 var(--sans);color:var(--ink-60)}
.register .fw{font:400 12px/1.6 var(--mono);letter-spacing:.05em;
  color:var(--violet-65)}
.reg-foot{display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;padding-top:22px}
.reg-foot .all{font:600 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet)}
.reg-foot .note{font:400 11px/1.6 var(--mono);letter-spacing:.05em;
  color:var(--ink-45)}

/* ── The dark band ──────────────────────────────────────────────── */
.band{background:var(--band);color:var(--on-band);padding:88px 0}
.band .eyebrow{color:var(--violet-light)}
.band h2{color:var(--on-band)}
.band .sechead{border-bottom-color:var(--rule-band)}
.band .sechead .aside{color:var(--on-band-62)}
.band .split{display:grid;grid-template-columns:1fr 1fr;gap:66px;
  align-items:start}
.band h2.big{font:300 clamp(42px,3.4vw,64px)/1.08 var(--serif);letter-spacing:-.02em;
  max-width:16ch;margin:0 0 26px}
.band .lede{font:400 16px/1.65 var(--sans);color:var(--on-band-62);
  margin:0 0 30px;max-width:46ch}
.checks{list-style:none;margin:0 0 34px;padding:0}
.checks li{position:relative;padding:0 0 15px 26px;
  font:400 14px/1.6 var(--sans);color:var(--on-band-62)}
.checks li::before{content:"✓";position:absolute;left:0;
  color:var(--violet-light);font-size:13px}

.panel{background:var(--band-panel);border:1px solid var(--rule-band)}
.panel .head{display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:15px 22px;border-bottom:1px solid var(--rule-band);
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.panel .head b{color:var(--on-band);font-weight:500}
.panel .head span{color:var(--on-band-40);text-transform:none;
  letter-spacing:.06em}
.panel .body{padding:24px 22px 26px}
.panel .subject{background:var(--band-inset);border:1px solid var(--rule-band);
  padding:18px 20px;margin:0 0 22px}
.panel .subject h3{font:600 15px/1.3 var(--sans);margin:0 0 8px;
  color:var(--on-band)}
.panel .subject p{font:400 13px/1.6 var(--sans);color:var(--on-band-62)}
.panel .run{display:block;width:100%;text-align:center;
  background:var(--violet-light);color:var(--band);border:0;cursor:pointer;
  padding:17px;font:600 12px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase}
.panel .run:hover{background:var(--violet-pale)}
.panel ol{list-style:none;margin:24px 0 0;padding:0;counter-reset:p}
.panel ol li{counter-increment:p;display:grid;
  grid-template-columns:26px 1fr auto;gap:0 12px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--rule-band);
  font:400 14px/1.4 var(--sans);color:var(--on-band)}
.panel ol li::before{content:counter(p);font:400 11px/1 var(--mono);
  color:var(--on-band-40)}
.panel ol li em{font-style:normal;color:var(--on-band-40);
  font:400 12.5px/1 var(--mono)}
.panel .ready{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;
  margin:24px 0 0;padding:16px 18px;background:var(--band-inset);
  border:1px solid var(--rule-band)}
.panel .ready b{font:600 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-band)}
.panel .ready span{font:400 11px/1.5 var(--mono);letter-spacing:.04em;
  color:var(--on-band-40)}

/* ── Prose (FAQ, legal) ─────────────────────────────────────────── */
.prose{max-width:74ch;margin-top:46px}
.prose h3{font:300 clamp(25px,1.6vw,31px)/1.26 var(--serif);margin:44px 0 12px}
.prose h3:first-child{margin-top:0}
.prose p{font:400 15px/1.68 var(--sans);color:var(--ink-68);margin:0 0 14px}

/* ── Jurisdiction table ─────────────────────────────────────────── */
.jur{width:100%;border-collapse:collapse;margin-top:46px}
.jur th{text-align:left;padding:0 24px 14px 0;
  border-bottom:1px solid var(--rule);font:500 9.5px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40)}
.jur td{padding:20px 24px 20px 0;border-bottom:1px solid var(--rule-soft);
  vertical-align:baseline}
.jur .reg{font:300 clamp(23px,1.5vw,29px)/1.2 var(--serif);white-space:nowrap}
.jur .auth{font:400 11px/1.7 var(--mono);letter-spacing:.06em;
  color:var(--violet-65)}
.jur .live{font:400 13.5px/1.55 var(--sans);color:var(--ink-62)}

/* ── Footer ─────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);margin-top:20px}
footer .shell{display:flex;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-top:34px;padding-bottom:34px;
  font:400 11px/1.7 var(--mono);letter-spacing:.06em;color:var(--ink-45)}
footer a:hover{color:var(--violet)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

/* ── Responsive ─────────────────────────────────────────────────── */
@media(max-width:1100px){
  .grid3{grid-template-columns:1fr 1fr;gap:0 40px}
  .grid4{grid-template-columns:1fr 1fr;gap:0 40px}
  .catalogue{grid-template-columns:1fr;gap:36px}
  .reg-wrap{border-left:0;padding-left:0}
  .filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .filter .label{width:100%;margin:0}
  .filter button{width:auto;border:1px solid var(--rule);gap:10px;
    padding:9px 14px}
  .filter .foot{display:none}
}
@media(max-width:900px){
  :root{--pad:22px}
  .masthead .social{display:none}
  .masthead .shell{display:flex;height:76px;gap:16px}
  .masthead .mark img{height:40px}
  .masthead nav{display:none}
  .masthead nav.open{display:flex;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--rule);padding:8px var(--pad) 18px}
  .masthead nav.open a{padding:13px 0;border-bottom:1px solid var(--rule-soft)}
  .burger{display:block;margin-left:auto}
  .masthead .start{display:none}
  .hero{grid-template-columns:1fr;gap:40px;padding-top:48px}
  .hero h1{font-size:clamp(42px,11vw,62px)}
  .sechead{grid-template-columns:1fr;gap:18px;align-items:start}
  .sechead h2{font-size:clamp(28px,7.5vw,38px)}
  .sechead .aside{text-align:left}
  .grid3,.grid4{grid-template-columns:1fr;gap:0}
  .strip{display:grid;grid-template-columns:1fr 1fr}
  .strip div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .strip div:first-child,.strip div:nth-child(2){border-top:0}
  .band .split{grid-template-columns:1fr;gap:44px}
  .band h2.big{font-size:clamp(32px,8vw,44px)}
  .jur .reg{white-space:normal}
}


/* ── CTA band ────────────────────────────────────────────────────────
   The one repeated moment. Sits above the footer on every page and is
   the last thing a reader sees before the link list. */
.cta{background:var(--band);color:var(--on-band);
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  padding:44px 52px;margin:0 var(--pad) 84px}
.cta-outer{max-width:var(--shell);margin:0 auto}
.cta h2{font:300 clamp(30px,2.2vw,42px)/1.2 var(--serif);letter-spacing:-.015em;margin:0 0 10px}
.cta h2 em{font-style:italic;font-weight:200;color:var(--violet-light)}
.cta p{font:400 14px/1.6 var(--sans);color:var(--on-band-62)}
.cta .actions{flex-wrap:nowrap}

/* ── Footer ──────────────────────────────────────────────────────── */
footer{background:var(--band);color:var(--on-band);border-top:0;margin:0}
footer .cols{max-width:var(--shell);margin:0 auto;padding:72px var(--pad) 0;
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:0 56px}
footer .brand img{height:56px;width:auto;display:block;margin:0 0 22px}
footer .brand p{font:400 14.5px/1.7 var(--sans);color:var(--on-band-62);
  max-width:34ch}
footer h4{font:600 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-band-40);margin:0 0 22px;
  font-weight:600}
footer .cols ul{list-style:none;margin:0;padding:0}
footer .cols li{margin:0 0 16px}
footer .cols li a{font:400 13.5px/1.5 var(--sans);color:var(--on-band-62)}
footer .cols li a:hover{color:var(--on-band)}
footer .bar{max-width:var(--shell);margin:0 auto;
  padding:26px var(--pad) 34px;margin-top:52px;
  border-top:1px solid var(--rule-band);
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap}
footer .bar .legal{font:400 11px/1.7 var(--mono);letter-spacing:.05em;
  color:var(--on-band-40);display:flex;gap:10px;flex-wrap:wrap}
footer .bar .legal a:hover{color:var(--on-band)}
footer .bar .right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
footer .bar .social{display:flex;gap:12px;align-items:center}
footer .bar .social a{color:var(--on-band-40);display:flex}
footer .bar .social a:hover{color:var(--violet-light)}
footer .bar .social svg{width:16px;height:16px;fill:currentColor}
footer .badge{font:600 9.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-band-62);
  border:1px solid var(--rule-band);padding:9px 13px}

/* ── FAQ accordion ───────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:46px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:19px 30px 19px 0;
  position:relative;font:600 14.5px/1.4 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:17px;
  font:400 17px/1 var(--mono);color:var(--violet)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 30px 22px 0;font:400 15px/1.68 var(--sans);
  color:var(--ink-62);margin:0}

/* ── Contact ─────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:0 56px;
  margin-top:46px;align-items:start}
.form{border:1px solid var(--rule);background:var(--paper-card);
  padding:34px 32px 36px}
.form .pair{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.form label{display:block;margin:0 0 20px}
.form .lab{display:block;font:600 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin:0 0 9px}
.form input,.form select,.form textarea{width:100%;
  font:400 14px/1.5 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);padding:11px 13px}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:0;border-color:var(--violet)}
.form textarea{min-height:112px;resize:vertical}
.form button{margin-top:6px;font:600 13px/1 var(--sans);letter-spacing:.03em;
  background:var(--violet-deep);color:var(--paper);padding:15px 24px;
  border:0;cursor:pointer}
.form button:hover{background:var(--violet)}

.facts{display:grid;grid-template-columns:auto 1fr;
  font:400 12.5px/1 var(--mono)}
.facts dt{border-top:1px solid var(--rule-soft);padding:16px 0;
  color:var(--ink-45);letter-spacing:.08em;text-transform:uppercase}
.facts dd{border-top:1px solid var(--rule-soft);padding:16px 0;margin:0;
  text-align:right;font:600 13px/1 var(--sans)}
.expect{margin:26px 0 0;padding:20px;background:var(--paper-tint);
  border:1px solid var(--violet-14);font:400 13px/1.66 var(--sans);
  color:var(--ink-70)}
.expect b{color:var(--violet)}

@media(max-width:1100px){
  footer .cols{grid-template-columns:1fr 1fr;gap:44px 40px}
  .faq{grid-template-columns:1fr;gap:0}
  .contact{grid-template-columns:1fr;gap:44px}
}
@media(max-width:900px){
  .cta{grid-template-columns:1fr;gap:26px;padding:34px 26px;
    margin:0 var(--pad) 60px}
  .cta h2{font-size:clamp(26px,7vw,32px)}
  footer .cols{grid-template-columns:1fr;gap:38px}
  .form .pair{grid-template-columns:1fr;gap:0}
}