/* ============================================================
   AUTHORIZED DEALERS PAGE — page-specific layout only.
   Reuses tokens.css, base.css and the header / drawer / footer from
   sections.css. Everything here is scoped with .dl- (or #dl-) so it
   cannot reach the main site. No raw px: every spacing and size below
   is a token from tokens.css.
   ============================================================ */

/* the current page in the nav — champagne, with its underline already drawn */
.mainnav a[aria-current]{color:var(--gold)}
.mainnav a[aria-current]::after{width:100%}
#drawer a[aria-current]{color:var(--gold)}

/* ---------- agent registration banner ---------- */
/* The first section on the page, so it carries the header clearance that the
   register used to (see .dl-page below).

   The one band on this site that is green rather than near-black: it belongs
   to ABS, not to Kaaf, and the switch is what tells an agent at a glance that
   they have arrived somewhere different from the rest of the site. */
.ar{
  position:relative;
  padding-top:calc(var(--space-6) + var(--header-h));
  background:var(--pine-deep);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* The render, held far back behind the green. Flat colour plus one faded
   image — no gradient. Kept at low opacity so every piece of text on top of
   it still clears 4.5:1 against the brightest part of the sky. */
.ar::before{
  content:'';
  position:absolute;inset:0;
  background-image:url('../assets/tower.webp');
  background-size:cover;
  /* 62%, not the top of the frame: the render carries its own BURJ QUAID
     wordmark in the upper left, which landed behind the header as a smudge. */
  background-position:center 62%;
  opacity:.10;
  pointer-events:none;
}
.ar > .wrap{position:relative;z-index:1}
/* --gold clears 4.5:1 on the near-black body, but only reaches 4.36:1 against
   the brightest point of the render composited over the green. --gold-lift is
   the same champagne one stop up and measures 6.23:1 there, so the gold copy
   on this band — and only on this band — uses it. */
.ar .ar-kicker,
.ar .ar-claim,
.ar .ar-quote figcaption b{color:var(--gold-lift)}
/* The outline button's label is --gold too, and measured 4.36:1 here — it
   fails the same way the copy did, so it takes the same lift. Its border goes
   up with it, since --gold-dim is faint against the render. */
.ar .btn-o{color:var(--gold-lift);border-color:var(--gold-dim)}
.ar .btn-o:hover{border-color:var(--gold-lift)}

.ar-grid{
  display:grid;
  grid-template-columns:1fr minmax(0,var(--card-max));
  gap:var(--space-7);
  align-items:center;
}

/* ---- the ABS lockup: the largest thing on the banner ---- */
.ar-dev{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.ar-abs{display:block;width:100%;height:auto}
.ar-dev-note{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  line-height:var(--leading-snug);
  color:var(--text-faint);
  text-align:center;
  max-width:34ch;
}

/* ---- Kaaf, underneath the offer ---- */
.ar-partner{
  display:flex;align-items:center;gap:var(--space-4);
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:1px solid var(--line);
  max-width:46ch;
}
.ar-partner img{height:34px;width:auto;flex:none}
.ar-partner span{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  line-height:var(--leading-snug);
  color:var(--text-faint);
}
.ar-partner b{color:var(--gold-lift);font-weight:var(--weight-medium)}
@media(max-width:900px){
  .ar-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .ar{padding-top:calc(var(--space-4) + var(--header-h))}
  /* ABS leads on a phone too — it is the whole point of the banner — but the
     lockup is capped hard. The artwork is 16:9 with generous transparent
     margins, so at full width it would eat the fold on its own. */
  .ar-dev{order:-1;gap:var(--space-3)}
  .ar-abs{max-width:230px;margin-inline:auto}
  .ar-dev-note{display:none}
}

/* "Agent Registration" is the label, "Burj Quaid" is the headline. The label
   is set larger than the site's usual eyebrow because this banner has to read
   as a call to join from across a phone screen, not as a section marker. */
.ar-kicker{
  font-family:var(--font-mono);
  font-size:var(--text-base);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--gold);
}
.ar-title{margin-top:var(--space-4)}
.ar-claim{
  margin-top:var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-base);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--gold);
}
/* The invitation, set as a quotation with his face beside it. He is the draw
   here — an agent recognises him before they recognise a certificate — so the
   line is one step off the page title rather than body copy, and the gold rule
   down the left marks it as speech and not another data label. */
.ar-quote{
  display:flex;
  align-items:flex-start;
  gap:var(--space-5);
  margin-top:var(--space-5);
  padding-left:var(--space-5);
  border-left:1px solid var(--gold);
}
/* Larger than a byline avatar on purpose — an agent recognises him before
   they recognise a certificate, so his face is doing real work here. */
.ar-face{
  flex:none;
  width:112px;height:112px;
  border-radius:50%;
  border:1px solid var(--gold-dim);
  /* cropped out of the podium photo — the numbers are the crop, not spacing,
     so they are not on the token scale */
  background-image:url('../assets/subayyal-ikram.jpg');
  background-size:350%;
  background-position:91% 73%;
}
.ar-quote blockquote{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  line-height:var(--leading-head);
  letter-spacing:var(--tracking-tight);
  color:var(--ivory);
}
/* the substance under the headline — what joining actually means, and the two
   companies an agent is joining */
.ar-quote-sub{
  margin-top:var(--space-3);
  color:var(--text-muted);
  max-width:52ch;
}
.ar-quote figcaption{
  margin-top:var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.ar-quote figcaption b{display:block;font-weight:var(--weight-medium);color:var(--gold)}
.ar-quote figcaption span{display:block;margin-top:var(--space-1);color:var(--text-faint)}

/* A laptop with browser chrome and a bookmarks bar leaves roughly 620px of
   viewport, and the banner overran it by 37px — the buttons fell off the
   bottom. Every gap steps down one token. Nothing is reordered: his invitation
   stays above the buttons, because that order is the point of the banner.

   This block has to sit AFTER the rules it overrides. Media queries carry no
   extra specificity, so when it was written above them the base rules simply
   won and only the .ar padding actually changed. */
@media(min-width:901px) and (max-height:720px){
  .ar{padding-top:calc(var(--space-4) + var(--header-h))}
  .ar-title{margin-top:var(--space-3)}
  .ar-claim{margin-top:var(--space-2)}
  .ar-quote{margin-top:var(--space-4)}
  .ar-quote-sub{margin-top:var(--space-2)}
  .ar-quote figcaption{margin-top:var(--space-2)}
  .ar-acts{margin-top:var(--space-4)}
  /* one step down puts the invitation on a single line instead of two, which
     is the 60px that decides whether the buttons clear the fold here */
  .ar-quote blockquote{font-size:var(--text-xl)}
}

/* On a phone the quotation stays a row — stacking it cost ~90px of height and
   the buttons have to share the first screen with it. The face comes down to
   64px and the line to --text-xl so the text still gets a usable measure
   beside it; the sub-line drops to --text-sm, which is where the site already
   sets supporting copy. */
@media(max-width:640px){
  /* Every gap in the banner steps down one token so the whole offer — name,
     claim, his invitation and both buttons — clears the fold on a 640px
     phone viewport. The buttons keep their full height: they are the touch
     target, and shrinking those to win 30px is the wrong 30px. */
  .ar{padding-top:calc(var(--space-2) + var(--header-h))}
  .ar-grid{gap:var(--space-3)}
  .ar-title{margin-top:var(--space-3)}
  .ar-claim{margin-top:var(--space-2)}
  .ar-quote{gap:var(--space-3);padding-left:var(--space-4);margin-top:var(--space-3)}
  .ar-face{width:64px;height:64px}
  .ar-quote blockquote{font-size:var(--text-xl)}
  /* The one thing that gives on a phone. Fitting the ABS lockup, the tower
     name, his invitation AND both buttons into ~570px means something has to
     go, and this sentence is the only supporting line among them — the button
     states the action, and Kaaf is still named in the partner strip below.
     Everything else on the banner survives at full size. */
  .ar-quote-sub{display:none}
  .ar-quote figcaption{margin-top:var(--space-2)}
  .ar-acts{margin-top:var(--space-3);gap:var(--space-2)}
}
.ar-acts{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}
.ar-credit{
  margin-top:var(--space-5);
  font-size:var(--text-sm);
  color:var(--text-faint);
  max-width:52ch;
}
.ar-credit b{color:var(--text-muted);font-weight:var(--weight-medium)}

.ar-shot img{
  display:block;
  width:100%;height:auto;
  border:1px solid var(--line);
}

@media(max-width:640px){
  .ar-acts{flex-direction:column;align-items:stretch}
  .ar-acts .btn{width:100%}
}

/* The page opens directly under the fixed header, so like the home page's hero
   this section clears it with its own top padding. It uses --space-6 rather
   than the full --section-y the hero uses: this page leads with a tool, not a
   picture, and the register has to be in view — a --section-y + --header-h top
   pushed the first certificate off the bottom of a laptop screen. */
.dl-page{padding-top:calc(var(--space-6) + var(--header-h))}
/* ...unless the banner is above it, in which case the banner has already
   cleared the header and this only needs ordinary section spacing. */
.ar + .dl-page{padding-top:var(--section-y)}

/* the title and the search sit side by side on a laptop and up — stacked, they
   spent the entire first screen before the register began */
.dl-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start}
@media(max-width:1000px){.dl-top{grid-template-columns:1fr;gap:var(--space-5)}}

/* An h2, not an h1: the agent-registration banner above owns the page's only
   h1. It keeps the h1's size on purpose — it is still the title of the
   verification tool, just no longer the title of the page. em.stack comes
   free from base.css at this level. */
.dl-intro h2{
  margin-top:var(--space-4);
  max-width:18ch;
  font-size:var(--text-3xl);
  line-height:var(--leading-tight);
}
.dl-intro .lede{margin-top:var(--space-4);max-width:62ch}

/* ---------- the verification panel ---------- */
/* A bar, not a hero: the panel is the search plus one line of fine print, so
   the register underneath stays on the first screen. */
.dl-panel{
  background:var(--pine-deep);
  border:1px solid var(--line);
  padding:var(--space-5);
}
.dl-hint{
  font-size:var(--text-sm);
  color:var(--text-faint);
  margin-top:var(--space-3);
}
.dl-hint a{color:var(--gold);white-space:nowrap}
.dl-hint a:hover{color:var(--gold-lift);text-decoration:underline;text-underline-offset:3px}

/* sections.css styles the bare `form` element for the reserve panel — a bordered
   box with its own padding and a full-width submit. This search is a single
   inline field, so it opts out of all three. */
.dl-form{
  display:flex;
  gap:var(--space-3);
  margin-top:var(--space-5);
  flex-wrap:wrap;
  background:none;
  border:0;
  padding:0;
  margin-top:0;
}
/* basis is small enough that the field and the Verify button stay on one row
   inside the half-width panel */
.dl-field{flex:1 1 200px;min-width:0}
.dl-field label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:var(--space-2);
}
.dl-field input{
  width:100%;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ivory);
  font-family:var(--font-mono);
  font-size:var(--text-base);
  letter-spacing:.08em;
  padding:var(--space-3);
  transition:border-color .4s var(--ease);
}
.dl-field input::placeholder{color:var(--text-faint);letter-spacing:.04em}
.dl-field input:focus{outline:none;border-color:var(--gold)}
.dl-field input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dl-form .btn{align-self:flex-end;width:auto;margin-top:0;padding:var(--space-3) var(--space-6)}

/* ---------- the result states ---------- */
.dl-result{display:none}
.dl-result.on{
  display:block;
  margin-top:var(--space-5);
  border:1px solid var(--line);
  border-left-width:var(--space-1);
  background:rgba(11,15,14,.55);
  padding:var(--space-5);
}
.dl-result h3{color:var(--ivory);margin-top:var(--space-3)}
.dl-msg{color:var(--text-muted);margin-top:var(--space-3);max-width:62ch}
.dl-msg b{color:var(--ivory);font-weight:var(--weight-semi)}
.dl-result .mono{font-family:var(--font-mono);letter-spacing:.06em}

.dl-result.ok{border-color:var(--gold-dim);border-left-color:var(--gold)}
.dl-result.warn,
.dl-result.fail{border-color:var(--alert-dim);border-left-color:var(--alert);background:var(--alert-wash)}
.dl-result.hint{border-color:var(--line);border-left-color:var(--gold-dim)}
.dl-result.hint .dl-msg{margin-top:0}

/* the badge — the one thing a visitor reads before anything else */
.dl-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  padding:var(--space-2) var(--space-3);
  border:1px solid transparent;
}
.dl-badge span{font-size:var(--text-sm);line-height:1}
.dl-badge.ok{color:var(--gold);border-color:var(--gold-dim);background:rgba(173,156,119,.09)}
.dl-badge.warn,
.dl-badge.fail{color:var(--alert-lift);border-color:var(--alert-dim);background:var(--alert-wash)}
.dl-badge.sm{padding:var(--space-1) var(--space-2)}

/* the key/value list shared by the result panel and the gallery cards */
/* capped like a paragraph — without it the label and its value sit at opposite
   ends of a 1100px row on a wide monitor and stop reading as a pair */
.dl-rows{margin-top:var(--space-4);display:grid;gap:var(--space-3);max-width:56ch}
.dl-rows > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-4);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--line-soft);
}
.dl-rows dt{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-faint);
  flex:none;
}
.dl-rows dd{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:.06em;
  color:var(--ivory);
  text-align:right;
  overflow-wrap:anywhere;
}

.dl-acts{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}

/* the verified result's certificate thumbnail, beside the detail column */
.dl-ok-grid{display:grid;grid-template-columns:1fr minmax(0,320px);gap:var(--space-6);align-items:start}
.dl-ok-shot,
.dl-card-shot{
  display:block;
  width:100%;
  padding:0;
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.dl-ok-shot:hover,
.dl-card-shot:hover{border-color:var(--gold)}
/* no certificate file on record — the tile is the placeholder, not a control */
.dl-ok-shot.no-cert,
.dl-card-shot.no-cert{cursor:default}
.dl-ok-shot.no-cert:hover,
.dl-card-shot.no-cert:hover{border-color:var(--line)}
.no-cert .dl-view{display:none}
/* stacked, the certificate sits under the details — held to card width so it
   stays a preview rather than filling the panel */
@media(max-width:860px){
  .dl-ok-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .dl-ok-shot{max-width:var(--card-max)}
}

/* ---------- certificate thumbnails ---------- */
/* Sized to the certificate's own landscape proportion so nothing is cropped
   awkwardly, and deliberately kept at "a view, not a download": the full file
   only opens when the visitor asks for it. */
.dl-thumb{display:block;position:relative;aspect-ratio:1.42/1;background:var(--ink)}
.dl-thumb .dl-shot{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  transition:transform .6s var(--ease),opacity .4s;
}
.dl-ok-shot:hover .dl-shot,
.dl-card-shot:hover .dl-shot{transform:scale(1.03)}

/* what shows when the certificate file is missing — the img removes itself */
.dl-thumb-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-2);
  background:var(--ink);
  border-bottom:1px solid var(--line-soft);
  padding:var(--space-4);
  text-align:center;
}
.dl-thumb-ph img{height:var(--space-6);width:auto;opacity:.55}
.dl-thumb-ph b{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-faint);font-weight:var(--weight-normal);
}
.dl-thumb-ph i{font-style:normal;font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.06em;color:var(--gold)}

/* the "View" chip that fades up over a thumbnail */
.dl-view{
  position:absolute;left:var(--space-3);bottom:var(--space-3);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--void);background:var(--gold);
  padding:var(--space-2) var(--space-3);
  opacity:0;transform:translateY(var(--space-2));
  transition:.45s var(--ease);
  pointer-events:none;
}
.dl-ok-shot:hover .dl-view,
.dl-card-shot:hover .dl-view,
.dl-ok-shot:focus-visible .dl-view,
.dl-card-shot:focus-visible .dl-view{opacity:1;transform:none}
/* touch devices never hover — show the chip permanently there */
@media(hover:none){.dl-view{opacity:1;transform:none}}

/* ---------- the gallery ---------- */
/* a hairline and one spacing step, not a full section break — see .dl-page */
.dl-register{
  margin-top:var(--space-6);
  padding-top:var(--space-6);
  border-top:1px solid var(--line);
}
.dl-lhead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap}
.dl-register h2{margin-top:var(--space-3)}
.dl-count{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);
}
/* 320px, not 340px: at a 768px tablet the grid track is 691px, which is
   eight pixels short of fitting two 340px columns. That dropped the register
   to a single 400px card with a dead 290px gutter beside it, repeated down
   the page. 320 clears two columns from 768px up. */
.dl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--space-5);
  margin-top:var(--space-5);
}
@media(max-width:420px){.dl-grid{grid-template-columns:1fr}}
/* No max-width here: a card fills its grid track. auto-fill above already
   decides how many columns there are, so capping the card only stripes dead
   space down the right whenever the track is wider than the cap — which is
   every width from 600px to 766px, where the grid is one column wide. */
.dl-card{border:1px solid var(--line);background:var(--ink);display:flex;flex-direction:column}
.dl-card .dl-card-shot{border:0;border-bottom:1px solid var(--line)}
.dl-card-body{padding:var(--space-4)}
.dl-card-body h3{color:var(--ivory);margin-top:var(--space-3)}
.dl-empty{color:var(--text-muted)}

/* the authenticity note under the gallery */
.dl-note{
  margin-top:var(--space-6);
  border:1px solid var(--line);
  border-left-width:var(--space-1);
  border-left-color:var(--gold);
  padding:var(--space-4) var(--space-5);
  background:rgba(16,61,56,.28);
}
.dl-note b{
  display:block;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gold);
  font-weight:var(--weight-normal);
  margin-bottom:var(--space-3);
}
.dl-note p{color:var(--text-muted);max-width:78ch}
.dl-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------- the fraud / termination clause ---------- */
/* Deliberately the loudest block on the page: it borrows the alert palette the
   "not verified" result already uses, so a tampered certificate and the clause
   that voids it read as the same colour of consequence. The heading is one step
   down from the register's h2 (--text-xl, not --text-2xl) — the panel earns
   attention from its colour, not from out-shouting the section above it. */
.dl-clause{
  margin-top:var(--space-6);
  border:1px solid var(--alert-dim);
  border-left-width:var(--space-1);
  border-left-color:var(--alert);
  background:var(--alert-wash);
  padding:var(--space-5);
}
.dl-clause h2{
  margin-top:var(--space-3);
  font-size:var(--text-xl);
  color:var(--ivory);
  max-width:34ch;
}
/* Each clause's own title. A mono label rather than a serif heading: these are
   the names of legal instruments, not editorial headings, and the same
   treatment identifies them inside the opening dialog. */
.dl-clause-item{margin-top:var(--space-5)}
.dl-clause-item + .dl-clause-item{
  margin-top:var(--space-5);
  padding-top:var(--space-5);
  border-top:1px solid var(--line-soft);
}
.dl-clause-item h3,
.gate-clause h3{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  line-height:var(--leading-snug);
  color:var(--alert-lift);
}
/* Legal text, so it stays at body size and full contrast rather than shrinking
   to fine print — a clause nobody can read is a clause nobody is bound by. */
.dl-clause-item p{
  margin-top:var(--space-3);
  color:var(--text-muted);
  max-width:78ch;
}
.dl-clause-more{margin-top:var(--space-5)}
.dl-clause-more a{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--alert-lift);
}
.dl-clause-more a:hover{color:var(--ivory)}

/* ---------- the opening notice ---------- */
/* Raised once per browser session. It borrows the lightbox's shell wholesale —
   same overlay, same centring, same scroll behaviour — because a visitor who
   has opened one dialog on this page should not have to learn a second one. */
#dl-gate{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(11,15,14,.94);
  display:none;
  padding:var(--space-5) var(--gutter);
  overflow:auto;
}
#dl-gate.on{display:flex;align-items:center;justify-content:center}
.gate-card{
  width:min(100%,680px);
  /* the card owns the viewport height so the clause list scrolls INSIDE it —
     otherwise the actions sit below the fold on a phone and the dialog looks
     like it cannot be dismissed */
  max-height:calc(100dvh - var(--space-8));
  display:flex;flex-direction:column;
  background:var(--ink);
  border:1px solid var(--alert-dim);
  border-top:var(--space-1) solid var(--alert);
  padding:var(--space-5);
}
/* the card is a flex column, so the badge has to opt out of stretching or it
   becomes a full-width bar instead of a chip */
.gate-card > .dl-badge{align-self:flex-start}
.gate-card h2{
  margin-top:var(--space-3);
  font-size:var(--text-xl);
  color:var(--ivory);
}
.gate-lede{
  margin-top:var(--space-3);
  color:var(--text-faint);
  font-size:var(--text-sm);
}
.gate-scroll{
  overflow-y:auto;
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  padding-right:var(--space-3);
  border-top:1px solid var(--line-soft);
}
.gate-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gate-clause + .gate-clause{
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--line-soft);
}
.gate-clause p{margin-top:var(--space-3);color:var(--text-muted)}
/* the cut-edge cue. display:none until JS confirms the clauses overflow, so it
   never claims there is more to read when there isn't. */
.gate-more{
  display:none;
  margin-top:var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--alert-lift);
}
.gate-more.on{display:block}
.gate-acts{
  display:flex;gap:var(--space-3);
  margin-top:var(--space-5);
  flex-wrap:wrap;
}
.gate-acts .btn{flex:1 1 auto;justify-content:center}

/* ---------- the certificate lightbox ---------- */
#dl-box{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(11,15,14,.94);
  display:none;
  padding:var(--space-6) var(--gutter);
  overflow:auto;
}
#dl-box.on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4)}
#dl-box img{
  max-width:min(100%,1100px);
  max-height:72vh;
  width:auto;height:auto;
  border:1px solid var(--line);
  object-fit:contain;
}
#dl-box-cap{text-align:center}
#dl-box-cap b{display:block;font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-normal);color:var(--ivory)}
#dl-box-cap span{
  display:block;margin-top:var(--space-2);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.12em;color:var(--text-faint);
}
#dl-box-close{
  position:fixed;top:var(--space-4);right:var(--gutter);
  background:none;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--text-sm);
  letter-spacing:var(--tracking-label);color:var(--gold);
}
#dl-box-open{margin-bottom:var(--space-4)}

@media(max-width:640px){
  /* on a phone the page title is the tallest thing above the search — one step
     down the scale, and one step tighter everywhere above the register, keeps
     the register heading on the first screen */
  .dl-intro h2{font-size:var(--text-2xl);margin-top:var(--space-3)}
  .dl-intro .lede{margin-top:var(--space-3)}
  .dl-register{margin-top:var(--space-5);padding-top:var(--space-5)}
  .dl-clause{padding:var(--space-4)}
  .dl-panel{padding:var(--space-4)}
  .gate-card{padding:var(--space-4)}
  /* stacked, so neither action ends up a two-word-wide column */
  .gate-acts{flex-direction:column}
  .dl-hint a{white-space:normal}
  .dl-form .btn{width:100%;padding-inline:var(--space-4)}
  .dl-rows > div{flex-direction:column;gap:var(--space-1);align-items:flex-start}
  .dl-rows dd{text-align:left}
  .dl-acts .btn{width:100%}
  #dl-box img{max-height:56vh}
}