/* ISOT SWAP — shared styles for the authored public pages.
 *
 * index.html, contact.html and faq.html link this. The rest of the site is
 * still generated from the legacy swapweb project and keeps its own CSS;
 * nothing here touches it.
 */
  :root {
    --navy:      #0F2545;
    --navy-soft: #16305A;
    --ink:       #1C2733;
    --muted:     #5B6B7F;
    --line:      #E3E9F0;
    --wash:      #F5F8FC;
    --green:     #1F6B47;
    --green-br:  #38C793;
    --accent:    #4C8DF6;
    --coral:     #E2574C;
    --radius:    14px;
    --shell:     1180px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
  }
  .shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  h1, h2, h3 { line-height: 1.2; margin: 0 0 14px; color: var(--navy); }
  h2 { font-size: 33px; letter-spacing: -0.3px; }
  h3 { font-size: 19px; }
  p  { margin: 0 0 16px; }
  .lede { font-size: 19px; color: var(--muted); max-width: 60ch; }

  /* ---------------------------------------------------------- top utility */
  .utility {
    background: var(--navy-soft);
    color: #D6E1F0;
    font-size: 14.5px;
  }
  .utility .shell {
    display: flex; align-items: center; gap: 28px;
    min-height: 46px; flex-wrap: wrap;
  }
  .utility a { color: #D6E1F0; }
  .utility .spacer { margin-left: auto; }
  .utility .login {
    background: var(--accent); color: #fff; font-weight: 700;
    padding: 12px 22px; letter-spacing: 0.4px;
  }
  .utility .login:hover { background: #3d7ce0; text-decoration: none; }

  /* ------------------------------------------------------------------ nav */
  header.site { border-bottom: 1px solid var(--line); background: #fff; }
  header.site .shell {
    display: flex; align-items: center; gap: 22px;
    min-height: 78px; flex-wrap: wrap;
  }
  .brand { display: flex; align-items: center; gap: 11px; }
  .brand img { height: 46px; width: auto; }
  nav.main { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
  nav.main a { color: var(--navy); font-weight: 600; font-size: 15.5px; }
  nav.main a.here { color: var(--coral); }

  /* ---------------------------------------------------------------- hero */
  .hero {
    background:
      radial-gradient(900px 420px at 82% 8%, #1D3E6E 0%, transparent 62%),
      var(--navy);
    color: #fff;
    padding: 74px 0 78px;
  }
  .hero .shell { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
  .hero h1 {
    color: #fff; font-size: 46px; letter-spacing: -0.9px; margin-bottom: 18px;
  }
  .hero h1 em { font-style: normal; color: var(--green-br); }
  .hero p { color: #C3D2E6; font-size: 18.5px; max-width: 52ch; }
  .hero img { width: 100%; height: auto; display: block; }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
  .btn {
    display: inline-block; padding: 14px 26px; border-radius: 8px;
    font-weight: 700; font-size: 16px;
  }
  .btn-primary { background: var(--green-br); color: #06301F; }
  .btn-primary:hover { background: #2FB182; text-decoration: none; }
  .btn-ghost {
    border: 1.5px solid rgba(255,255,255,0.42); color: #fff;
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.10); text-decoration: none; }

  /* --------------------------------------------------------------- strip */
  .strip { background: var(--wash); border-bottom: 1px solid var(--line); }
  .strip .shell {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; padding-top: 26px; padding-bottom: 26px;
  }
  .stat b { display: block; font-size: 30px; color: var(--navy); line-height: 1.1; }
  .stat span { font-size: 14px; color: var(--muted); display: block; }

  /* ------------------------------------------------------------ sections */
  section { padding: 66px 0; }
  section.tint { background: var(--wash); }
  .eyebrow {
    font-size: 13px; font-weight: 800; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--green); margin-bottom: 9px;
  }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
  .card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px;
  }
  .card h3 { margin-bottom: 8px; }
  .card p:last-child { margin-bottom: 0; }
  .card .tag {
    display: inline-block; font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--coral); margin-bottom: 8px;
  }

  figure { margin: 0; }
  figure img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 18px 44px -28px rgba(15,37,69,0.55);
  }
  figcaption { font-size: 14.5px; color: var(--muted); margin-top: 10px; }

  table.facts { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 6px 0 4px; }
  table.facts th, table.facts td { padding: 9px 12px; text-align: left; }
  table.facts thead th { background: var(--navy); color: #fff; font-size: 14px; }
  table.facts tbody tr { border-bottom: 1px solid var(--line); }
  table.facts td.n { font-weight: 800; color: var(--navy); }

  ol.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
  ol.steps li {
    counter-increment: s; position: relative;
    padding: 0 0 22px 54px; margin: 0;
  }
  ol.steps li::before {
    content: counter(s);
    position: absolute; left: 0; top: 1px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--navy); color: #fff;
    font-weight: 800; font-size: 15px;
    display: grid; place-items: center;
  }
  ol.steps b { display: block; color: var(--navy); font-size: 17.5px; }
  ol.steps p { color: var(--muted); margin: 2px 0 0; font-size: 15.5px; }

  ul.ticks { list-style: none; margin: 0; padding: 0; }
  ul.ticks li { position: relative; padding: 0 0 12px 30px; }
  ul.ticks li::before {
    content: ""; position: absolute; left: 3px; top: 9px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--green-br); box-shadow: 0 0 0 4px rgba(56,199,147,0.18);
  }

  .note {
    border-left: 3px solid var(--green-br);
    background: #F2FBF7; padding: 16px 20px; border-radius: 0 10px 10px 0;
    font-size: 16px;
  }
  .note:last-child { margin-bottom: 0; }

  /* ----------------------------------------------------------------- cta */
  .cta {
    background: var(--navy); color: #fff; text-align: center;
    padding: 62px 0;
  }
  .cta h2 { color: #fff; }
  .cta p { color: #BFD0E6; max-width: 62ch; margin-left: auto; margin-right: auto; }

  /* -------------------------------------------------------------- footer */
  footer.site { background: #0B1C34; color: #A9BCD4; font-size: 15.5px; padding: 54px 0 0; }
  footer.site h4 {
    color: #fff; font-size: 16px; margin: 0 0 14px; letter-spacing: 0.3px;
  }
  footer.site a { color: #A9BCD4; }
  footer.site a:hover { color: #fff; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 34px; }
  .foot-grid ul { list-style: none; margin: 0; padding: 0; }
  .foot-grid li { margin-bottom: 8px; }
  .colophon {
    border-top: 1px solid rgba(255,255,255,0.10);
    margin-top: 44px; padding: 18px 0 26px;
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    font-size: 14px;
  }

  @media (max-width: 900px) {
    .hero .shell, .grid-2 { grid-template-columns: 1fr; gap: 34px; }
    .grid-3, .strip .shell, .foot-grid { grid-template-columns: 1fr 1fr; }
    .hero h1 { font-size: 36px; }
    h2 { font-size: 27px; }
  }
  @media (max-width: 560px) {
    .grid-3, .strip .shell, .foot-grid { grid-template-columns: 1fr; }
  }

  /* ------------------------------------------------- the header on a phone
   *
   * There was no mobile treatment for the header at all — only a gap tweak on
   * nav.main — and the desktop rules degrade badly below about 720px:
   *
   *   .utility .shell is a flex row whose `.spacer` pushes the login link
   *   right. Once it wraps, `margin-left:auto` on the spacer is the whole
   *   remaining line, so the login link starts on its own row and its 22px
   *   side padding stretches it into a full-width blue slab. The utility bar
   *   alone took three rows and ~150px before the site began.
   *
   *   nav.main has `margin-left:auto` too, so the seven links wrap into two
   *   ragged rows, left-aligned but sitting under a right-aligned block —
   *   which is the misalignment you see. At 360px it breaks 4 + 3.
   *
   * Fixed in CSS only, deliberately: the interior pages are still generated
   * from the legacy project by build_public_site.py, so a change to the
   * markup here would have to be repeated there and would be undone the next
   * time the generator runs. A stylesheet change reaches every page.
   *
   * No hamburger. Seven short links fit in two centred rows at any phone
   * width, and a menu that is already open beats one behind a toggle —
   * particularly for the visitors this site has, who are looking for Contact
   * or Register and nothing else.
   */
  @media (max-width: 720px) {
    .utility { font-size: 13px; }
    .utility .shell {
      gap: 4px 16px; min-height: 0;
      padding-top: 7px; padding-bottom: 7px;
      flex-wrap: wrap;
    }
    /* The auto-margin is what forced the login onto its own line. Below this
       width the three items simply flow, and the login keeps its place at the
       end of whichever row it lands on. */
    .utility .spacer { display: none; }
    .utility .login {
      margin-left: auto;
      padding: 6px 13px; border-radius: 6px;
      font-size: 12px; letter-spacing: 0.3px;
      white-space: nowrap;
    }

    header.site .shell {
      min-height: 0; gap: 10px;
      padding-top: 12px; padding-bottom: 2px;
      justify-content: center;
    }
    .brand img { height: 38px; }
    nav.main {
      width: 100%; margin-left: 0;
      justify-content: center;
      gap: 0 18px;
      padding-top: 6px;
      border-top: 1px solid var(--line);
    }
    /* Vertical padding, not margin: it gives each link a ~40px touch target
       without spacing the rows apart. A 15px link is a 15px tap target
       otherwise, which on a phone is a coin toss. */
    nav.main a { font-size: 15px; padding: 9px 0; }
  }

  /* The whole page scrolled sideways on a 320px screen, which makes every
     centred thing — the menu included — look misaligned, because the viewport
     is offset from the layout.
     
     The cause was `table.facts` in the "HLA scoring weights" block. Its header
     cell reads "Points per matched allele", and with `table-layout: auto` a
     table cannot be narrower than its widest unbreakable cell: about 303px
     against the 272px a 320px screen leaves inside `.shell`. That table sits
     in a `.grid-2` item, and a grid item defaults to `min-width: auto`, so the
     oversized table widened its track, the track widened the grid, and the
     grid widened the document. The bullet list beside it was reported as
     overflowing too, but it was only inheriting the track width — a symptom,
     not the cause.
     
     `table-layout: fixed` makes the columns share the available width and lets
     the header wrap instead. `min-width: 0` on the grid children stops the
     next wide thing doing the same. */
  @media (max-width: 720px) {
    .grid-2 > *, .grid-3 > *, .contact-grid > * { min-width: 0; }
    /* Form controls carry an intrinsic minimum width of roughly 20 characters,
       and `width: 100%` does not override it — only `min-width: 0` does. On the
       contact page that minimum, plus the card's padding, was 301px against
       the 272px a 320px screen offers, and the page scrolled sideways. */
    .compose input, .compose select, .compose textarea { min-width: 0; }
    table.facts { table-layout: fixed; font-size: 14.5px; }
    table.facts th, table.facts td { padding: 8px 10px; overflow-wrap: break-word; }
  }

  /* --------------------------------------------------- the drawer (mobile)
   *
   * Everything below is scoped to `.has-drawer`, which site-nav.js puts on
   * <html>. Without that script the rules above stand and the menu is two
   * centred rows — a working menu, rather than a hamburger button that does
   * nothing. See the head of site-nav.js.
   */
  .nav-toggle { display: none; }

  @media (max-width: 720px) {
    .has-drawer .nav-toggle {
      display: flex; flex-direction: column; justify-content: center;
      gap: 5px;
      width: 44px; height: 44px;      /* a thumb-sized target, not an icon-sized one */
      margin-left: -10px;              /* optical alignment with the text below */
      padding: 0 10px;
      background: none; border: 0; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .has-drawer .nav-toggle span {
      display: block; height: 2px; width: 22px; border-radius: 2px;
      background: var(--navy);
      transition: transform 0.22s ease, opacity 0.18s ease;
    }
    /* The bars become a cross while it is open, so the control says what it
       will do next rather than what it did last. */
    .has-drawer.drawer-open .nav-toggle span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .has-drawer.drawer-open .nav-toggle span:nth-child(2) { opacity: 0; }
    .has-drawer.drawer-open .nav-toggle span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
    .has-drawer .nav-toggle:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
    }

    .has-drawer header.site .shell {
      flex-wrap: nowrap; justify-content: flex-start;
      gap: 12px; min-height: 62px;
      padding-top: 0; padding-bottom: 0;
    }
    .has-drawer .brand img { height: 34px; }

    .has-drawer nav.main {
      position: fixed; top: 0; left: 0; bottom: 0;
      width: min(78vw, 300px);
      z-index: 60;
      margin: 0; padding: 10px 0 24px;
      display: flex; flex-direction: column; justify-content: flex-start;
      gap: 0;
      background: var(--navy);
      border-top: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: 6px 0 34px -12px rgba(6,15,30,0.65);
      transform: translateX(-100%);
      /* `visibility` is here so a closed drawer is out of the tab order.
         Transformed off-screen alone, every link stays focusable and a
         keyboard user tabs into a panel they cannot see.
         
         The timing is not decoration. `visibility` is a discrete property, so
         a plain `visibility 0.24s` flips it at the HALFWAY point in both
         directions — the drawer spent the first 120ms of its own slide-in
         invisible and then popped into view mid-travel. Instead it is switched
         at 0s on the way in, and delayed to the full 0.24s on the way out so
         the slide-out is not cut short. */
      visibility: hidden;
      transition: transform 0.24s ease, visibility 0s linear 0.24s;
    }
    .has-drawer.drawer-open nav.main {
      transform: translateX(0);
      visibility: visible;
      transition: transform 0.24s ease, visibility 0s linear 0s;
    }
    .has-drawer nav.main a {
      color: #DCE6F4; font-size: 16px; font-weight: 600;
      width: 100%; padding: 14px 22px; text-align: left;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      border-left: 3px solid transparent;
    }
    .has-drawer nav.main a:hover { background: rgba(255,255,255,0.05); text-decoration: none; }
    .has-drawer nav.main a.here {
      color: #fff; background: rgba(255,255,255,0.07);
      border-left-color: var(--green-br);
    }

    .nav-backdrop {
      position: fixed; inset: 0; z-index: 55;
      background: rgba(8,18,35,0.55);
      opacity: 0; pointer-events: none;
      transition: opacity 0.24s ease;
    }
    .has-drawer.drawer-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  }

  /* Somebody who has asked their system for less movement gets the drawer
     without the slide. It still opens and closes; it just appears. */
  @media (prefers-reduced-motion: reduce) {
    .has-drawer nav.main,
    .has-drawer .nav-toggle span,
    .nav-backdrop { transition: none; }
  }

  /* Narrow phones: 360px cannot take seven links at 15px in two rows without
     one word breaking across a line. */
  @media (max-width: 400px) {
    nav.main { gap: 0 14px; }
    nav.main a { font-size: 14px; }
    .utility .shell { gap: 4px 12px; }
  }

/* ------------------------------------------------------------------ */
/* Interior pages: contact.html and faq.html                          */
/* ------------------------------------------------------------------ */

/* A compact page banner. The legacy interior pages used a full-bleed stock
   photograph of a stethoscope behind the title; this says the same thing in
   a fifth of the height and none of the bandwidth. */
.pagehead {
  background:
    radial-gradient(760px 320px at 78% 0%, #1D3E6E 0%, transparent 62%),
    var(--navy);
  color: #fff;
  padding: 46px 0 50px;
}
.pagehead h1 { color: #fff; font-size: 38px; letter-spacing: -0.6px; margin-bottom: 8px; }
.pagehead p  { color: #C3D2E6; font-size: 18px; max-width: 62ch; margin: 0; }
.crumbs { font-size: 14px; color: #8FA7C6; margin-bottom: 12px; }
.crumbs a { color: #8FA7C6; }
.crumbs a:hover { color: #fff; }

/* contact cards */
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.person { display: flex; gap: 16px; align-items: flex-start; }
.person .initials {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 18px;
  display: grid; place-items: center; letter-spacing: 0.5px;
}
.person .role { color: var(--muted); font-size: 15.5px; }

dl.kv { margin: 0; }
dl.kv dt {
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--green); margin-top: 18px;
}
dl.kv dt:first-child { margin-top: 0; }
dl.kv dd { margin: 4px 0 0; }

/* the compose-an-email panel */
.compose label { display: block; font-weight: 700; font-size: 14.5px; margin: 14px 0 5px; color: var(--navy); }
.compose input, .compose select, .compose textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15.5px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.compose textarea { min-height: 132px; resize: vertical; }
.compose .btn { margin-top: 18px; border: none; cursor: pointer; font-family: inherit; }
.compose .hint { font-size: 14px; color: var(--muted); margin: 10px 0 0; }

/* FAQ accordion — <details>/<summary>, so it works with JavaScript off */
.faq { max-width: 78ch; }
.faq details {
  border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 10px; background: #fff;
}
.faq details[open] { border-color: #C6D5E8; box-shadow: 0 10px 30px -22px rgba(15,37,69,0.5); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 20px;
  font-weight: 700; color: var(--navy); font-size: 17px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 13px;
  font-size: 22px; font-weight: 400; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent); }
.faq .answer { padding: 0 20px 18px; }
.faq .answer p:last-child, .faq .answer ul:last-child { margin-bottom: 0; }
.faq .answer table.facts { font-size: 14.5px; }

.faq-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.faq-nav a {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; font-size: 14.5px; font-weight: 600;
  color: var(--navy); background: #fff;
}
.faq-nav a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

h2.group {
  font-size: 21px; margin: 38px 0 14px; padding-top: 8px;
  border-bottom: none; scroll-margin-top: 20px;
}
h2.group:first-of-type { margin-top: 0; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .pagehead h1 { font-size: 30px; }
}

/* ------------------------------------------------------------------ */
/* Team page — the council grids                                      */
/* ------------------------------------------------------------------ */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 30px 24px;
}
/* `.member`, not `.person` — the contact and about pages already own
   `.person`, where it means a horizontal flex card with an initials disc
   beside the text. Reusing the name gave every portrait `display: flex`, so
   the photograph sat next to the caption instead of above it and shrank out
   of its circle; and the `text-align: center` intended for this page silently
   re-centred the cards on two other pages. Class names are a namespace. */
.member { text-align: center; }

/* The circle is the layout, not the image. Sizing the <img> alone would let
   a portrait that fails to load collapse the row to nothing, and these come
   from another site — assuming all nineteen arrive is how a page ends up with
   a ragged grid nobody sees until it is live. */
.portrait {
  display: block; position: relative;
  width: 140px; height: 140px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--wash);
  border: 3px solid #fff;
  box-shadow: 0 10px 26px -14px rgba(15,37,69,0.55), 0 0 0 1px var(--line);
  overflow: hidden;
}
/* Sits behind the photograph and shows through only when it is missing. */
.portrait::before {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 34px; font-weight: 800; letter-spacing: 1px;
  color: #9DB0C8;
}
.portrait img {
  position: relative;
  border: 0; border-radius: 0; box-shadow: none;   /* undo the `figure img` rule */
  width: 100%; height: 100%;
  object-fit: cover;
  /* Portraits are usually framed with headroom; pulling the crop up keeps the
     face centred in the circle rather than the forehead. */
  object-position: 50% 22%;
  display: block;
}
.member figcaption b {
  display: block; color: var(--navy);
  font-size: 16.5px; line-height: 1.35; margin-bottom: 3px;
}
.member figcaption span {
  display: block; color: var(--muted); font-size: 14px; line-height: 1.45;
}
/* The Honorary Secretary is the society's point of contact for the registry,
   and the address in the footer is his. Marking the card saves a visitor
   working out which of ten office bearers that is. */
.member.is-secretary .portrait { box-shadow: 0 10px 26px -14px rgba(15,37,69,0.55), 0 0 0 3px var(--green-br); }
.member.is-secretary figcaption span { color: var(--green); font-weight: 700; }

@media (max-width: 720px) {
  .people { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 26px 16px; }
  .portrait { width: 108px; height: 108px; }
  .portrait::before { font-size: 26px; }
  .member figcaption b { font-size: 15px; }
  .member figcaption span { font-size: 13px; }
}

/* ------------------------------------------------------------------ */
/* ABHA band (home page)                                              */
/* ------------------------------------------------------------------ */
.abha {
  background: linear-gradient(180deg, #F2FBF7 0%, #EAF6FF 100%);
  border-top: 1px solid #D6EDE2;
  border-bottom: 1px solid #D6EDE2;
}
.abha .shell { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #BFE3D2; border-radius: 999px;
  padding: 7px 16px 7px 9px; font-size: 14px; font-weight: 700; color: var(--green);
  margin-bottom: 14px;
}
.badge .dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-br); color: #06301F;
  font-size: 13px; font-weight: 800; display: grid; place-items: center;
}
.idcard {
  background: #fff; border: 1px solid #CFE3F5; border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 16px 40px -30px rgba(15,37,69,0.5);
}
.idcard .row { padding: 13px 0; border-bottom: 1px dashed var(--line); }
.idcard .row:last-child { border-bottom: none; padding-bottom: 0; }
.idcard .row:first-child { padding-top: 0; }
.idcard .lab {
  font-size: 12px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--muted);
}
.idcard .val {
  font-family: "DejaVu Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 19px; color: var(--navy); letter-spacing: 1px; margin-top: 3px;
}
.idcard .ok { color: var(--green); font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.idcard .ok::before { content: "✓ "; }

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

/* The society's slogan leads the hero; the explanatory line sits under it. */
.hero-eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--green-br); margin-bottom: 14px;
}
.hero-lead {
  font-size: 21px !important; color: #EAF1FA !important;
  font-weight: 600; margin-bottom: 10px !important;
}