/* ============ Tokens ============
     The family's navy/teal scale, plus the four Case Study tokens the ported
     button and eyebrow rules depend on (--line, --on-dark, --shadow-cta,
     --font-cta). --font-cta and --action are the same face; both names are kept
     so rules copied from either source read unchanged. */
  :root{
    --navy-1:#061629;
    --navy-2:#0A2036;
    --navy:#061629;
    --teal:#4CE2CC;
    --teal-2:#22ABAD;
    --teal-3:#1F9A9C;
    --cyan:#38CFC0;

    --teal-300:#4CE2CC;  /* on-dark accent — 11.31 on navy-1 */
    --teal-400:#22ABAD;  /* FILL ONLY — 2.80 on white, never text on white */
    --teal-500:#1F9A9C;  /* large text only — 3.41 */
    --teal-600:#15767A;  /* smallest passing teal text — 5.38 */
    --teal-700:#0A5E68;  /* emphasis — 7.46 AAA */

    --bg:#FFFFFF;
    --line:#E7EEEC;
    --ink:#000000;
    --muted:#595552;
    --on-dark:rgba(255,255,255,.74);

    --font:"Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --display:"Saira", ui-sans-serif, system-ui, sans-serif;
    --action:"Manrope", ui-sans-serif, sans-serif;
    --font-cta:var(--action);

    --ease:cubic-bezier(.22,1,.36,1);
    --shadow-cta:0 6px 18px rgba(34,171,173,.4);
    --shadow-card:0 1px 2px rgba(6,22,41,.04),0 18px 40px -26px rgba(6,22,41,.22);
    /* Measured in JS on load and resize; the fallback keeps in-page jumps clear
       of the sticky nav even if the script never runs. */
    /* Two photographs appear twice on the page, so each is held once here
       rather than embedded a second time. See edits 4 and 6. */
    --art-feat:url("../img/webinar/ai-atr.webp");
    --art-up:url("../img/webinar/ai-ppc.webp");
    --nav-h:72px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg); color:var(--ink);
    font-family:var(--font); -webkit-font-smoothing:antialiased;
    /* clip, not hidden: overflow-x:hidden turns the body into a scroll container,
       which silently disables position:sticky on the nav. clip does the same
       clipping without creating one. */
    overflow-x:clip;
  }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  /* [hidden] is a UA-origin display:none, so ANY author display value beats it.
     One !important here rather than a matching rule beside every component that
     sets display. */
  [hidden]{ display:none !important; }
  #episodes, #featured{ scroll-margin-top:calc(var(--nav-h) + 16px); }
  ::selection{ background:rgba(76,226,204,.4); color:#fff; }

  /* The design file's own nav, drawer and burger rules were removed from this file:
     the shared header is styled by main.css and they restyled it (the burger drew
     as an empty box with the lines below it on phones). */
  /* Wrench Talk sits under Resources, so that item carries the current-page mark. */


  /* --- mobile menu --- */


  /* ============ Case Study buttons ============
     .btn-solid is the teal Manrope fill that lifts on hover; .btn-ghost is the
     white outline button. Per instruction the featured episode takes the fill
     and the two episode cards take ghosts. The hover on .btn-ghost is Case
     Study's own .load-more treatment — teal border, teal label. */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.86rem; font-weight:600;
    padding:11px 22px; border-radius:8px;
    border:1px solid var(--line);
    cursor:pointer; white-space:nowrap;
    font-family:var(--font);
  }
  .btn .arrow{ transition:transform .2s var(--ease); }
  .btn:hover .arrow{ transform:translateX(3px); }
  .btn-solid{
    font-family:var(--font-cta); font-weight:700;
    background:var(--teal-2); border-color:var(--teal-2); color:#fff;
    box-shadow:var(--shadow-cta);
    transition:background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  }
  .btn-solid:hover{
    background:var(--teal-3);
    box-shadow:0 10px 28px rgba(34,171,173,.55);
    transform:translateY(-2px);
  }
  .btn-solid:focus-visible{ outline:2px solid var(--teal-300); outline-offset:3px; }
  /* Teal ghost, taken from the nav's .btn-support and retuned for the light card.
     Two values had to move, because that button was drawn for navy:
       label  --cyan #38CFC0 sits at 1.9:1 on the card's #F7F9FB and is simply not
              readable, so it becomes --teal-700 at 6.9:1;
       border --teal-400 #22ABAD measures 2.60:1 there, under the 3:1 WCAG 1.4.11
              asks of a control boundary, so it steps to --teal-500 at 3.16:1.
     Everything else - 2px border, 12px radius, Manrope 700 uppercase at .1em, the
     inset glow and the shine sweep - is the nav button's, unchanged. Height is 48px
     rather than 52px because this is a card CTA, not nav chrome. */
  .btn-ghost{
    position:relative; overflow:hidden;
    height:48px; padding:0 24px; border-radius:12px;
    border:2px solid var(--teal-500);
    font:700 13px/1.2 var(--action); letter-spacing:.1em; text-transform:uppercase;
    color:var(--teal-700); background:transparent;
    transition:color .2s, border-color .2s, box-shadow .2s;
  }
  .btn-ghost:hover{
    color:var(--teal-800); border-color:var(--teal-600);
    box-shadow:inset 0 0 10px rgba(34,171,173,.28), 0 0 9px 3px rgba(34,171,173,.14);
  }
  .btn-ghost:active{ background:rgba(34,171,173,.12); }
  .btn-ghost::before{
    content:""; position:absolute; left:-4em; top:0; width:4em; height:100%;
    transition:left .4s ease-in-out;
    background:linear-gradient(to right, transparent 1%, rgba(34,171,173,.16) 40%, rgba(34,171,173,.16) 60%, transparent 100%);
  }
  .btn-ghost:hover::before{ left:100%; }
  .btn-ghost:focus-visible{ outline:2px solid var(--teal-600); outline-offset:3px; }

  /* ============ Case Study eyebrow ============ */
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font); font-size:.8125rem;
    letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink); font-weight:600; margin:0 0 14px;
  }
  .eyebrow .bar{ width:30px; height:2px; border-radius:2px; background:var(--teal); flex-shrink:0; }
  .eyebrow.on-dark{ color:#fff; }

  /* ============ 01 · HERO — Case Study .title-band ============ */
  .title-band{
    position:relative; background:var(--navy); color:#fff;
    padding:72px 24px 78px; overflow:hidden;
  }
  .title-accent{
    position:absolute; inset:0;
    background-image:url(../img/webinar/hero-image.webp);
    background-size:cover; background-position:center;
  }
  /* The band photo is panoramic (6000x1834) and the band is wider still, so
     cover crops it vertically and the microphone stays centred. The 80% navy
     veil is what keeps the bright right-hand third from fighting the heading. */
  .title-accent::before{ content:""; position:absolute; inset:0; background:rgba(6,22,41,.8); }
  .title-band-inner{
    position:relative; z-index:1;
    max-width:1200px; margin:0 auto; padding-inline:24px; text-align:left;
  }
  .title-band h1{
    margin:0;
    font-family:var(--display);
    font-size:clamp(2.1rem,5.2vw,3.4rem); font-weight:700; letter-spacing:-.02em;
    /* Saira's default "normal" leading is generous - about 1.5 at this size - so
       the h1 line box carried a band of empty space under the glyphs that read
       as the gap. Tightening the leading is the fix; the margin below is only
       the remainder. */
    line-height:1.05;
    color:#fff;
  }
  /* "Talk" carries the teal. Two shadows, not one: the tight 22px halo is what
     reads as glow at text size, and the wide 70px wash lifts the word off the
     photograph so it stays legible wherever the crop puts a bright patch. */
  .title-band h1 .glow{
    color:var(--teal);
    /* text-shadow:0 0 22px rgba(76,226,204,.65), 0 0 70px rgba(76,226,204,.35); */
  }
  .title-sub{
    margin:12px 0 0; max-width:620px;
    font-size:clamp(1rem,1.6vw,1.18rem); font-weight:600;
    line-height:1.5; color:#fff;
  }

  /* ============ shared section shell ============ */
  .section{ padding:64px 24px; }
  .wrap{ max-width:1200px; margin:0 auto; padding-inline:24px; }

  /* ============ 02 · FEATURED EPISODE ============
     Case Study's .spotlight card: navy panel, eyebrow, display heading, copy and
     the solid CTA on the left, the episode art on the right. The Key Questions
     block spans both columns underneath — with five of them the left column
     alone would run twice the height of the artwork. */
  .spotlight{
    background:var(--navy); border-radius:20px; padding:44px;
    display:grid; grid-template-columns:1.05fr .95fr; gap:40px;
    align-items:start; color:#fff; overflow:hidden; position:relative;
  }
  .spotlight-copy h2{
    font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.25; margin:0 0 16px;
    font-weight:600; color:#fff;
  }
  /* :not(.eyebrow) throughout — a bare element selector here is (0,1,1) and
     silently out-specifies .eyebrow (0,1,0), which would resize and re-space
     every eyebrow that sits inside one of these blocks. */
  .spotlight-copy p:not(.eyebrow){ color:var(--on-dark); line-height:1.68; margin:0; font-size:.98rem; }
  .spotlight-copy p b{ color:#fff; font-weight:600; }

  /* The right column is the artwork alone: the tag pills were removed and the
     CTA moved under the body copy in the left column. The flex gap is kept so a
     second element below the art still spaces itself. */
  .spotlight-side{
    display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  }
  .spotlight-media{
    width:100%; aspect-ratio:16/9;
    border-radius:14px; overflow:hidden;
    background:var(--art-feat) center/cover no-repeat;
    box-shadow:0 22px 50px -26px rgba(0,0,0,.8);
  }
  .spotlight-qs{
    grid-column:1 / -1;
    margin-top:6px; padding-top:26px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .qs-head{
    font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--teal); margin:0 0 16px;
  }
  .qs-list{
    margin:0; padding:0 0 0 1.15em;
    display:grid; grid-template-columns:1fr 1fr; gap:12px 40px;
  }
  .qs-list li{ color:var(--on-dark); font-size:.94rem; line-height:1.55; padding-left:6px; }
  .qs-list li::marker{ color:var(--teal); font-weight:700; }

  /* ============ 03 · EPISODE CARDS ============ */
  .section-head{ margin-bottom:26px; }
  .section-head h2{ margin:0; font-size:32px; line-height:1.2; font-weight:600; }
  .section-head p:not(.eyebrow){ margin:8px 0 0; color:var(--muted); font-size:.95rem; max-width:640px; }

  .ep-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
  .ep-card{
    display:flex; flex-direction:column;
    position:relative;
    background:#F7F9FB; border:1px solid var(--line); border-radius:20px;
    padding:28px; box-shadow:var(--shadow-card);
  }
  .ep-card h3{
    margin:0 0 18px;
    font-size:18px; line-height:1.3; font-weight:700;
    color:var(--ink);
  }
  .ep-art{
    border-radius:12px; overflow:hidden; margin:0 0 20px;
    /* The artwork is social-card shaped (1200x630, about 1.9:1). The box takes that
       shape and the image is fitted with contain, so nothing is cropped; an odd-shaped
       image shows the navy behind it instead of losing its edges. */
    aspect-ratio:1200/630; background:var(--navy-1);
  }
  .ep-art img{ width:100%; height:100%; object-fit:contain; }
  .ep-art--feat{ background:var(--navy-1) var(--art-feat) center/contain no-repeat; }

  .ep-card p:not(.eyebrow){ margin:0 0 16px; font-size:.95rem; line-height:1.7; color:#3C4652; }
  .ep-card p b{ color:var(--ink); font-weight:600; }
  .ep-card p i{ font-style:italic; }
  .ep-body ul,
  .ep-body ol{ margin:0 0 16px; padding-left:1.3em; display:grid; gap:9px; }
  .ep-body li{ font-size:.93rem; line-height:1.6; color:#3C4652; padding-left:4px; }
  .ep-body li::marker{ color:var(--teal-600); font-weight:700; }
  .ep-qs-head{
    margin:2px 0 12px; font-size:.95rem; font-weight:700; color:var(--ink);
  }
  /* Pinned, not floated: the two cards stretch to the taller one, so without this
     the buttons would sit at different heights. */
  .ep-foot{ margin-top:auto; padding-top:10px; }

  /* ============ mobile "Read more" disclosure ============
     Pure CSS: a visually-hidden checkbox and its paired label element. No
     script - nothing script-driven has proved reliable in this project's
     preview environment, and a collapsed card that never reopens is worse than
     no disclosure at all. The checkbox is clipped rather than display:none so
     it stays focusable and the control is reachable from the keyboard. */
  .more-t{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  /* Above the breakpoint there is no clamp, so there is no control either. */
  .more-link{ display:none; }

  @media (max-width:767px){
    .more-link{
      display:inline-flex; align-items:center; gap:6px;
      min-height:44px; padding:4px 0;
      font-size:.9rem; font-weight:600;
      color:var(--teal-700);
      text-decoration:underline; text-underline-offset:3px;
      cursor:pointer; -webkit-user-select:none; user-select:none;
    }
    .more-chev{ transition:transform .22s var(--ease); }
    .more-t:checked ~ .more-link .more-chev,
    .more-t:checked ~ .spotlight-copy .more-link .more-chev{ transform:rotate(180deg); }
    /* One label carries both words; the checkbox decides which one shows. */
    .more-t:checked ~ .more-link .more-open,
    .more-t:checked ~ .spotlight-copy .more-link .more-open{ display:none; }
    .more-t:not(:checked) ~ .more-link .more-close,
    .more-t:not(:checked) ~ .spotlight-copy .more-link .more-close{ display:none; }
    .more-t:focus-visible ~ .more-link,
    .more-t:focus-visible ~ .spotlight-copy .more-link{ outline:2px solid var(--teal-600); outline-offset:3px; }

    /* --- the three episode cards --- */
    /* em resolves against .ep-body's OWN font-size, so it has to declare the
       same size and leading its children use or the six-line cap lands
       somewhere else entirely. */
    .ep-body{
      position:relative; font-size:.95rem; line-height:1.7;
      max-height:10.2em; overflow:hidden;          /* 6 x 1.7em */
    }
    .ep-body::after{
      content:""; position:absolute; left:0; right:0; bottom:0; height:3.4em;
      background:linear-gradient(to bottom, rgba(247,249,251,0) 0%, #F7F9FB 86%);
      pointer-events:none;
    }
    .more-t:checked ~ .ep-body{ max-height:none; }
    .more-t:checked ~ .ep-body::after{ display:none; }

    /* --- the featured block --- */
    .spotlight-copy p:not(.eyebrow){
      position:relative; max-height:10.08em; overflow:hidden;   /* 6 x 1.68em */
    }
    .spotlight-copy p:not(.eyebrow)::after{
      content:""; position:absolute; left:0; right:0; bottom:0; height:3.4em;
      background:linear-gradient(to bottom, rgba(6,22,41,0) 0%, var(--navy) 86%);
      pointer-events:none;
    }
    .more-t:checked ~ .spotlight-copy p:not(.eyebrow){ max-height:none; }
    .more-t:checked ~ .spotlight-copy p:not(.eyebrow)::after{ display:none; }
    .spotlight .more-link{ color:var(--teal-300); }
    .spotlight .more-t:focus-visible ~ .spotlight-copy .more-link{ outline-color:var(--teal-300); }
    /* Key Questions live in their own grid area, so they are disclosed whole
       rather than clamped - there is no way to run one clamp across two areas. */
    .spotlight-qs{ display:none; }
    .more-t:checked ~ .spotlight-qs{ display:block; }
  }

  /* ============ FOOTER (family) ============ */
  .footer{
    position:relative;
    background:linear-gradient(180deg, #030914 0%, #020610 100%);
    color:#B7C5D6;
    padding:40px 0 0;
    font-family:var(--font);
    border-top:1px solid rgba(255,255,255,.06);
  }
  .footer::before{
    content:""; position:absolute;
    top:-1px; left:50%; transform:translateX(-50%);
    width:300px; height:1px;
    background:linear-gradient(90deg, transparent, #22ABAD, transparent);
    opacity:.7;
  }
  /* 1200px, not the family's 1480 — it lines the footer columns up with this
     page's hero and sections, which ride Case Study's 1200px rail. */
  .footer-inner{ max-width:1200px; margin:0 auto; padding:0 24px; }
  .footer-top{
    display:grid; grid-template-columns:1.6fr repeat(5, 1fr);
    gap:28px; padding-bottom:28px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .footer-brand{ max-width:340px; }
  .footer-brand .brand-mark{
    font-weight:700; font-size:28px; letter-spacing:-.045em;
    background:linear-gradient(90deg, #4CE2CC 0%, #38CFC0 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    display:inline-block; margin-bottom:10px; line-height:1;
  }
  .footer-brand p{ margin:0; font-size:12.5px; line-height:1.55; color:#8A98B0; font-weight:500; }
  .footer-brand .hashtag{
    display:inline-flex; align-items:center; gap:7px;
    margin-top:12px; padding:4px 11px; border-radius:999px;
    background:rgba(76,226,204,.08);
    border:1px solid rgba(76,226,204,.22);
    color:var(--teal); font-weight:700; font-size:11.5px; letter-spacing:.02em;
  }
  .footer-brand .hashtag::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--teal); box-shadow:0 0 0 3px rgba(76,226,204,.22);
  }
  .footer-col h4{
    margin:0 0 12px; font-size:10.5px; font-weight:700;
    color:#fff; letter-spacing:.16em; text-transform:uppercase;
    display:inline-flex; align-items:center; gap:8px;
  }
  .footer-col h4::before{ content:""; width:12px; height:1.5px; background:var(--teal); border-radius:2px; }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
  .footer-col li a{
    font-size:12.5px; color:#8A98B0; font-weight:500; position:relative;
    transition:color .2s ease, padding-left .2s ease;
  }
  .footer-col li a:hover{ color:var(--teal); padding-left:5px; }
  .footer-col li a[aria-current="page"]{ color:var(--teal); }
  .footer-bottom{
    padding:16px 0; display:flex; align-items:center; justify-content:space-between;
    gap:20px; font-size:11.5px; color:#5A6779;
  }
  .footer-bottom .legal{ display:flex; gap:18px; }
  .footer-bottom .legal a{ color:#5A6779; font-weight:500; transition:color .2s; }
  .footer-bottom .legal a:hover{ color:var(--teal); }
  .footer-bottom .socials{ display:flex; gap:8px; }
  .footer-bottom .socials a{
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    color:#8A98B0; display:grid; place-items:center;
    transition:background .2s, color .2s, border-color .2s, transform .2s;
  }
  .footer-bottom .socials a:hover{
    background:rgba(34,171,173,.10); border-color:rgba(34,171,173,.34);
    color:var(--teal); transform:translateY(-2px);
  }
  .footer-bottom .socials a svg{ width:12px; height:12px; }

  /* ============ Responsive ============ */
  @media (max-width:1180px){
    .footer-top{ grid-template-columns:1fr repeat(3, 1fr); }
    .footer-top .footer-brand{ grid-column:1 / -1; max-width:100%; padding-bottom:8px; }
  }
  @media (max-width:980px){
    .spotlight{ grid-template-columns:1fr; gap:28px; padding:32px; }
    /* Art above the copy on one column — the heading should not be pushed a
       screen down by a 16:9 image, so it keeps source order and the media is
       re-ordered up instead. */
    .spotlight-side{ order:-1; }
    .qs-list{ grid-template-columns:1fr; }
  }
  @media (max-width:860px){
    .footer-inner{ padding:0 22px; }
    .footer{ padding:56px 0 0; }
    .footer-top{ grid-template-columns:1fr 1fr; gap:24px; padding-bottom:36px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px 0; }
    .ep-grid{ grid-template-columns:1fr; }
    /* Stacked, the cards no longer share a row, so pinning the button to the
       bottom only adds a gap. */
    .ep-foot{ margin-top:0; }
  }
  @media (max-width:767px){
    .section{ padding:48px 16px; }
    .wrap{ padding-inline:8px; }
    .title-band{ padding:52px 20px 58px; }
    .title-band-inner{ padding-inline:0; }
    .spotlight{ padding:24px; border-radius:16px; }
    .ep-card{ padding:22px; border-radius:16px; }
    /* 48px is the family's mobile minimum for anything tappable. */
    .btn{ min-height:48px; width:100%; justify-content:center; }
  }
  @media (max-width:600px){
    .title-sub{ font-size:1rem; }
  }
  @media (max-width:560px){
    .footer-top{ grid-template-columns:1fr; }
    /* Below this the brand, both buttons and the burger stop fitting: the demo
       button clipped at the viewport edge and pushed the burger off it entirely,
       which left the main menu unreachable on a phone. Support leaves the bar -
       the drawer already carries it - and the demo button tightens. Matches
       wrench-talk-episode-01.html, which shares this nav verbatim. */
  }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *{ animation:none !important; }
    .btn:hover, .btn-demo:hover{ transform:none; }
    .btn:hover .arrow{ transform:none; }
    /* Both shine sweeps - the nav ghost and the card ghost - are motion. */
    .more-chev{ transition:none; }
  }

  /* ============ ADDED FOR THIS PAGE ============
     Everything above this line is wrench-talk.html verbatim. Four things below
     it do not exist there: the generated plate, the empty-state card, the
     upcoming-session row, and the meta line that carries a date and time. */

  /* ---- generated plate ----
     Artwork that does not exist yet. Rather than repeat a stock photo or leave
     an empty box, the slot takes a drawn plate: house navy gradient, a teal
     bloom, the wordmark and the word WEBINAR. Plainly a house asset rather than
     a photo trying to pass as one. Two bloom positions so a stack of them does
     not tile. Replace a plate with a real photograph by swapping the div for
     the same <img> the completed cards use - nothing else changes. */

     
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

  /* Extra tokens this page needs and wrench-talk does not carry. Values from
     Contact-Us-v2-standalone.html, which shares the rest of the scale. */
  :root{
    --plate-1:radial-gradient(120% 130% at 78% 12%, rgba(76,226,204,.30) 0%, rgba(76,226,204,0) 58%),
              linear-gradient(135deg, #0A2036 0%, #061629 62%);
    --plate-2:radial-gradient(120% 130% at 18% 22%, rgba(56,207,192,.28) 0%, rgba(56,207,192,0) 58%),
              linear-gradient(135deg, #08243C 0%, #061629 66%);
  }
  .plate{
    width:100%; height:100%;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:16px 18px; position:relative; overflow:hidden;
    background:var(--plate-1);
  }
  .plate--2{ background:var(--plate-2); }
  /* A single hairline grid, low enough to read as texture rather than as a chart. */
  .plate::before{
    content:""; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
    background-size:34px 34px;
  }
  .plate-mark{
    position:relative; font-family:var(--display); font-weight:700;
    font-size:15px; letter-spacing:-.01em; color:var(--teal);
  }
  .plate-word{
    position:relative; display:flex; flex-direction:column; gap:8px;
  }
  .plate-word b{
    font-family:var(--display); font-weight:700; color:#fff;
    font-size:clamp(19px,3.4vw,26px); letter-spacing:.13em; line-height:1;
  }
  .plate-word i{ width:44px; height:3px; border-radius:2px; background:var(--teal); }

  /* ---- featured CTA in the copy column ----
     .spotlight-copy paragraphs carry margin:0, so a button dropped in at the end
     of that column has to state its own gap. .btn is inline-flex, so it already
     sits at its own width rather than stretching. */
  .spotlight-copy .btn{ margin-top:26px; }

  /* ---- empty upcoming state ----
     One card, centred, saying so. Swapped in for the row list when nothing is
     scheduled; see the commented block in section 03. */
  .stay{
    background:#F7F9FB; border:1px solid var(--line); border-radius:18px;
    padding:38px 28px; text-align:center; box-shadow:var(--shadow-card);
  }
  .stay h3{ margin:0 0 8px; font-size:19px; font-weight:700; color:var(--ink); }
  .stay p{ margin:0 auto; max-width:52ch; font-size:.95rem; line-height:1.7; color:#3C4652; }
  .stay .dot{
    width:9px; height:9px; border-radius:50%; background:var(--teal-400);
    display:inline-block; margin-bottom:14px;
    box-shadow:0 0 0 6px rgba(34,171,173,.14);
  }

  /* ---- 03 · upcoming ---- */
  /* Scheduled sessions are rows rather than cards: a row reads as a diary entry,
     which is what an unwatched session is, and two or three of them do not leave
     the half-empty grid a card layout would. */
  .up-row{
    display:grid; grid-template-columns:236px 1fr auto; gap:22px; align-items:center;
    background:#F7F9FB; border:1px solid var(--line); border-radius:18px;
    padding:18px; box-shadow:var(--shadow-card);
  }
  .up-row + .up-row{ margin-top:16px; }
  /* The artwork is 1200x630 (about 1.9:1): the box takes that shape and the image is
     fitted with contain, so nothing is cropped at any width. */
  .up-art{ border-radius:12px; overflow:hidden; aspect-ratio:1200/630; background:var(--navy-1); }
  /* The alternative to the token below: a row whose photograph is used nowhere
     else takes a plain <img> instead. */
  .up-art img{ width:100%; height:100%; object-fit:contain; }
  /* A row that carries its own <img> (the current 4:1 banner) lets the box take the
     image's shape, so there are neither cropped edges nor navy bands around it. The
     1200/630 box above remains for the background-image variant (.up-art--photo). */
  .up-art:has(> img){ aspect-ratio:auto; }
  .up-art:has(> img) img{ height:auto; display:block; }
  /* The upcoming row's photograph. It is the same file the third completed card
     uses, so it is read from --art-up rather than embedded a second time. */
  .up-art--photo{ background:var(--navy-1) var(--art-up) center/contain no-repeat; }
  .ep-art--up{ background:var(--navy-1) var(--art-up) center/contain no-repeat; }
  .up-row h3{ margin:0 0 6px; font-size:17px; line-height:1.3; font-weight:700; color:var(--ink); }
  .up-row p{ margin:0; font-size:.92rem; line-height:1.6; color:#3C4652; }
  .up-cta{ white-space:nowrap; }

  /* ---- meta line: date, time, duration ---- */
  .meta{
    display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 0;
    font-size:.86rem; font-weight:600; color:var(--muted);
  }
  .meta span{ display:inline-flex; align-items:center; gap:7px; }
  .meta span::before{
    content:""; width:6px; height:6px; border-radius:50%; background:var(--teal-400); flex-shrink:0;
  }

  /* An EDIT marker: a field waiting for real content. Visible on purpose - an
     unfilled placeholder that looks like finished copy is the worse failure. */
  .edit{
    background:rgba(76,226,204,.14); color:var(--teal); border:1px dashed rgba(76,226,204,.45);
    border-radius:5px; padding:0 6px; font-style:normal; font-size:.9em;
  }
  .up-row .edit{ color:var(--teal-700); border-color:rgba(34,171,173,.45);
    background:rgba(34,171,173,.10); }

  @media (max-width:860px){
    .up-row{ grid-template-columns:1fr; }
    .up-cta{ justify-self:start; }
  }

  /* ============ REGISTRATION DIALOG ============
     Opened by the Register button on an upcoming row. Two blocks: pick a job
     level from the cards, and the name, email and Submit appear below. The
     second block stays hidden until the first is answered, so a phone shows one
     question at a time rather than a wall of fields.

     The cards are the .role-chip component from
     Demo Page/Demo-ProgressiveDisclosure.html - same structure, same grid, same
     icon tile - redrawn in this page's tokens rather than copied with the
     demo's own colour variables. */

  .rd-scrim{
    /* Above .nav-drawer, which sits at 120: opening the dialog from a phone with
       the menu open must not put the menu on top of it. */
    position:fixed; inset:0; z-index:200;
    background:rgba(6,22,41,.72); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; visibility:hidden;
    transition:opacity .24s var(--ease), visibility .24s var(--ease);
  }
  /* Required, and easy to miss: the display:flex above out-specifies the browser
     default for [hidden], so without this the dialog is never actually hidden -
     invisible to the eye, but its six cards and three fields stay in the
     accessibility tree and in the tab order from the moment the page loads. */
  .rd-scrim[hidden]{ display:none; }
  .rd-scrim.is-open{ opacity:1; visibility:visible; }
  body.rd-open{ overflow:hidden; }

  .rd{
    width:100%; max-width:620px; max-height:88vh;
    display:flex; flex-direction:column;
    background:var(--navy); color:#fff;
    border:1px solid rgba(255,255,255,.12); border-radius:20px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
    transform:translateY(14px) scale(.985);
    transition:transform .28s var(--ease);
  }
  .rd-scrim.is-open .rd{ transform:none; }

  .rd-head{
    display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start;
    padding:26px 26px 18px; border-bottom:1px solid rgba(255,255,255,.1);
  }
  .rd-head h2{ margin:8px 0 0; font-size:1.2rem; line-height:1.35; font-weight:600; color:#fff; }
  .rd-head .meta{ margin-top:10px; }
  .rd-close{
    width:40px; height:40px; display:grid; place-items:center;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    border-radius:10px; color:#fff; cursor:pointer; padding:0;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .rd-close:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }
  .rd-close:focus-visible{ outline:2px solid var(--teal-300); outline-offset:2px; }

  /* The only scrolling region. The header and footer stay put, so on a short
     phone screen the close control is never scrolled away from. */
  .rd-body{ padding:22px 26px 26px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

  .rd-step + .rd-step{ margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
  .rd-step[hidden]{ display:none; }
  .rd-legend{
    display:block; margin:0 0 12px; padding:0; border:0;
    font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--teal);
  }

  /* ---- job level cards ---- */
  .role-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  /* The radio itself is clipped rather than display:none, so it keeps its place
     in the tab order and arrow keys still move between the six. */
  .role-grid input{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .role-chip{
    display:flex; flex-direction:column; align-items:flex-start;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12); border-radius:12px;
    padding:18px 16px; cursor:pointer;
    transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .role-chip:hover{ border-color:var(--teal); background:rgba(76,226,204,.10); }
  .role-icon{
    width:34px; height:34px; border-radius:9px; margin-bottom:12px;
    display:grid; place-items:center;
    background:rgba(76,226,204,.14); color:var(--teal);
  }
  .role-icon svg{ width:17px; height:17px; stroke:currentColor; stroke-width:2; fill:none;
    stroke-linecap:round; stroke-linejoin:round; }
  .role-title{ font-size:.86rem; font-weight:600; color:#fff; line-height:1.3; }
  /* Five cards in a two-column grid: the last spans the row rather than sitting
     orphaned beside a gap. */
  .role-chip--wide{ grid-column:1 / -1; }
  .role-grid input:checked + .role-chip{
    border-color:var(--teal) !important; background:rgba(76,226,204,.14) !important;   /* see the note at .level-grid */
    box-shadow:inset 0 0 0 1px var(--teal);
  }
  .role-grid input:focus-visible + .role-chip{ outline:2px solid var(--teal-300); outline-offset:2px; }

  /* ---- fields ---- */
  .rd-field + .rd-field{ margin-top:16px; }
  .rd-field label{ display:block; margin-bottom:7px; font-size:.85rem; font-weight:600; color:#fff; }
  .rd-field .req{ color:#FF8A73; margin-left:3px; }
  .rd-input{
    width:100%; padding:12px 14px; border-radius:10px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
    color:#fff; font-family:var(--font); font-size:.95rem; line-height:1.4;
    transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  }
  .rd-input::placeholder{ color:rgba(255,255,255,.45); }
  .rd-input:focus{
    outline:none; border-color:var(--teal);
    background:rgba(255,255,255,.11); box-shadow:0 0 0 3px rgba(76,226,204,.22);
  }
  .rd-foot{ margin-top:24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .rd-note{ margin:0; font-size:.78rem; line-height:1.5; color:var(--on-dark); }
  button.btn{ -webkit-appearance:none; appearance:none; }

  /* ---- confirmation ---- */
  .rd-done{ text-align:center; padding:14px 0 6px; }
  .rd-done .tick{
    width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(76,226,204,.16); color:var(--teal);
    box-shadow:0 0 0 8px rgba(76,226,204,.07);
  }
  .rd-done .tick svg{ width:24px; height:24px; stroke:currentColor; stroke-width:3;
    fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .rd-done h3{ margin:0 0 8px; font-size:1.1rem; font-weight:600; color:#fff; }
  .rd-done p{ margin:0 auto; max-width:44ch; font-size:.92rem; line-height:1.6; color:var(--on-dark); }

  @media (max-width:560px){
    .rd-scrim{ padding:0; align-items:stretch; }
    .rd{ max-width:none; max-height:100%; height:100%; border-radius:0; border:0; }
    .rd-head{ padding:20px 18px 16px; }
    .rd-body{ padding:18px 18px 28px; }
    /* One card per row below 560px: two 16px-padded cards on a 320px screen leave
       about 120px of label width, and "Equipment Manufacturers" needs three lines. */
    .role-grid{ grid-template-columns:1fr; }
    .rd-foot .btn{ width:100%; justify-content:center; }
  }
  @media (prefers-reduced-motion:reduce){
    .rd-scrim, .rd{ transition:none; }
  }

    .metabar{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:12px 22px; padding-bottom:18px; margin-bottom:34px;
    border-bottom:1px solid var(--line);
    font-size:.78rem; letter-spacing:.06em; color:var(--muted);
  }
  .metabar b{ color:var(--ink); font-weight:700; }
  .meta-left{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
  .pill{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid rgba(34,171,173,.4); background:rgba(34,171,173,.10);
    color:var(--teal-700); border-radius:999px; padding:5px 13px;
    font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  }
  .pill i{ width:7px; height:7px; border-radius:50%; background:var(--teal-2); flex-shrink:0; }
  .cobrand{ display:inline-flex; align-items:center; gap:9px; }
  .cobrand b{ letter-spacing:.08em; }
  .cobrand span{ color:#98A6B3; }
  .metaspec{ display:flex; flex-wrap:wrap; gap:8px 16px; }

  /* ---- 02 hero, 7/5 ---- */
  .lede{ display:grid; grid-template-columns:7fr 5fr; gap:34px; align-items:start; margin-bottom:80px; }

  .media{
    /* Same artwork as the listing cards (1200x630): box takes that shape and the image
       is fitted with contain, so the edges are never cropped. */
    border-radius:18px; overflow:hidden; aspect-ratio:1200/630;
    background:var(--navy-1); border:1px solid var(--line);
    box-shadow:var(--shadow-card);
  }
  .media img{ width:100%; height:100%; object-fit:contain; display:block; }

  .lede h1{
    margin:26px 0 0; font-family:var(--display); font-weight:700;
    font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.12; letter-spacing:-.02em;
  }
  .lede-body{ margin-top:16px; display:grid; gap:14px; }
  .lede-body p{ margin:0; font-size:1rem; line-height:1.72; color:#3C4652; }
  .lede-body p + p{ color:var(--muted); }

  .audience{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .audience .who{
    font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); margin-right:4px;
  }
  .chip{
    border:1px solid var(--line); background:var(--stone); border-radius:8px;
    padding:5px 12px; font-size:.82rem; color:#3C4652;
  }

  .trust{
    margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
    font-size:.8rem; color:var(--muted);
  }
  .trust b{ color:var(--ink); font-weight:600; }
  .trust .sep{ width:1px; height:14px; background:var(--line); }

  /* ---- registration card ----
     Sticky on desktop so it travels with the reader. Below 900px it stops being
     sticky and drops under the copy: a panel taller than the viewport that never
     scrolls away traps everything behind it. */
  .reg{
    position:sticky; top:calc(var(--nav-h) + 18px);
    background:var(--navy); color:#fff; border-radius:20px;
    border:1px solid rgba(76,226,204,.35);
    padding:26px; box-shadow:var(--shadow-navy);
  }
  .reg-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.12);
  }
  .reg-head h2{ margin:0; font-size:1.08rem; font-weight:600; color:#fff; }
  .reg-head p{ margin:4px 0 0; font-size:.8rem; color:var(--on-dark); }
  .reg-free{
    flex-shrink:0; border:1px solid rgba(76,226,204,.45); color:var(--teal);
    border-radius:6px; padding:3px 9px; font-size:.64rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
  }

  .field + .field{ margin-top:16px; }
  .field > label{ display:block; margin-bottom:7px; font-size:.85rem; font-weight:600; color:#fff; }
  .required-mark{ color:#FF8A73; margin-left:3px; }
  .field input[type=text], .field input[type=email]{
    width:100%; padding:12px 14px; border-radius:10px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
    color:#fff; font-family:var(--font); font-size:.95rem; line-height:1.4;
    transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field input::placeholder{ color:rgba(255,255,255,.45); }
  .field input:focus{
    outline:none; border-color:var(--teal);
    background:rgba(255,255,255,.11); box-shadow:0 0 0 3px rgba(76,226,204,.22);
  }

  /* ---- job level pills ----
     Five stacked icon cards ran to 296px - 38% of the whole card for a single
     answer, and the icons at 30px beside a label were decoration rather than
     wayfinding. As a wrapped pill row the same five options take two rows, about
     80px, and the submit button comes back inside the first screenful.

     Still radio inputs, clipped rather than display:none, so arrow keys move
     between them and the group keeps its form semantics. */
  .level-grid{ display:flex; flex-wrap:wrap; gap:8px; }
  .level-grid input{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .role-chip{
    display:inline-flex; align-items:center; min-height:38px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
    border-radius:999px; padding:8px 15px; cursor:pointer;
    font-size:.85rem; font-weight:600; color:#fff; line-height:1.2;
    transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  }
  .role-chip:hover{ border-color:var(--teal); background:rgba(76,226,204,.12); }
  /* !important here: main.css styles the demo page's .role-chip with !important on
     background and border, which otherwise overrides this selected state and leaves
     the dark label on a dark chip (unreadable). */
  .level-grid input:checked + .role-chip{
    border-color:var(--teal) !important; background:var(--teal) !important; color:#04221F;
  }
  .level-grid input:checked + .role-chip:hover{ background:var(--teal) !important; }
  .level-grid input:focus-visible + .role-chip{ outline:2px solid var(--teal); outline-offset:3px; }

  .consent{ margin-top:18px; display:flex; align-items:flex-start; gap:10px; }
  .consent input{ margin-top:3px; accent-color:var(--teal-2); width:16px; height:16px; flex-shrink:0; cursor:pointer; }
  .consent label{ font-size:.8rem; line-height:1.55; color:var(--on-dark); cursor:pointer; }
  .consent a{ color:var(--teal); text-decoration:underline; }

  .submit-btn{ width:100%; justify-content:center; margin-top:20px; padding:13px 20px; font-size:.95rem; border-radius:12px; }
  .reg-foot{
    margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1);
    display:flex; justify-content:space-between; gap:12px;
    font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-soft, rgba(255,255,255,.55));
  }
  /* An invalid field only shows red once the reader has tried to submit - marking
     an empty form in red before anyone has touched it is scolding, not helping. */
  .reg.was-validated .field input:invalid{ border-color:#FF8A73; }

  .reg-done{ text-align:center; padding:10px 0 4px; }
  .reg-done .tick{
    width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
    display:grid; place-items:center; background:rgba(76,226,204,.16); color:var(--teal);
    box-shadow:0 0 0 8px rgba(76,226,204,.07);
  }
  .reg-done .tick svg{ width:24px; height:24px; stroke:currentColor; stroke-width:3; fill:none;
    stroke-linecap:round; stroke-linejoin:round; }
  .reg-done h3{ margin:0 0 8px; font-size:1.05rem; font-weight:600; color:#fff; }
  .reg-done p{ margin:0 auto; max-width:36ch; font-size:.9rem; line-height:1.6; color:var(--on-dark); }

  /* ---- 03 learnings and benefits ---- */
  .panels{ display:grid; grid-template-columns:7fr 5fr; gap:24px; align-items:stretch; margin-bottom:80px; }
  .panel{
    background:var(--stone); border:1px solid var(--line); border-radius:20px;
    padding:28px; box-shadow:var(--shadow-card);
    display:flex; flex-direction:column;
  }
  .panel h2{ margin:0 0 6px; font-size:1.5rem; font-weight:600; line-height:1.2; }
  .panel > p{ margin:0 0 20px; font-size:.9rem; color:var(--muted); }
  .rows{ display:grid; gap:10px; }
  .learn{
    display:flex; align-items:flex-start; gap:14px;
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px;
    transition:border-color .2s var(--ease);
  }
  .learn:hover{ border-color:rgba(34,171,173,.4); }
  .learn .n{
    width:28px; height:28px; flex-shrink:0; border-radius:8px;
    display:grid; place-items:center;
    background:rgba(34,171,173,.12); color:var(--teal-700);
    font-size:.75rem; font-weight:700; letter-spacing:.02em;
  }
  .learn p{ margin:0; font-size:.93rem; line-height:1.6; color:#3C4652; }
  .benefit{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px;
    transition:border-color .2s var(--ease);
  }
  .benefit:hover{ border-color:rgba(34,171,173,.4); }
  .benefit span:first-child{ font-size:.93rem; font-weight:600; color:var(--ink); }
  .benefit .tick{
    width:22px; height:22px; flex-shrink:0; border-radius:50%;
    display:grid; place-items:center; background:rgba(34,171,173,.16); color:var(--teal-700);
  }
  .benefit .tick svg{ width:12px; height:12px; stroke:currentColor; stroke-width:3.2; fill:none;
    stroke-linecap:round; stroke-linejoin:round; }
  .panel-foot{
    margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }
  .panel-foot b{ color:var(--teal-700); font-weight:700; }

  /* ---- 04 presenter ---- */
  .presenter{
    background:var(--stone); border:1px solid var(--line); border-radius:20px;
    padding:28px; box-shadow:var(--shadow-card); margin-bottom:80px;
  }
  .pres-card{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
  .pres-shot{ position:relative; flex-shrink:0; }
  .pres-shot img{
    width:120px; height:120px; object-fit:cover; display:block;
    border-radius:18px; border:2px solid rgba(34,171,173,.45); background:#fff;
  }
  .pres-years{
    position:absolute; right:-10px; bottom:-10px;
    background:var(--navy); color:var(--teal); border:1px solid rgba(76,226,204,.4);
    border-radius:7px; padding:3px 8px; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  }
  .pres-name{
    display:inline-flex; align-items:center; gap:9px;
    font-size:1.12rem; font-weight:700; color:var(--ink); line-height:1.3;
    transition:color .18s var(--ease);
  }
  .pres-name:hover{ color:var(--teal-700); }
  .pres-name svg{ width:17px; height:17px; fill:currentColor; color:var(--teal-600); flex-shrink:0; }
  .pres-card p{ margin:10px 0 0; font-size:.95rem; line-height:1.7; color:#3C4652; }

  /* ---- 05 related ---- */
  .rel-head{
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px;
    padding-bottom:18px; margin-bottom:26px; border-bottom:1px solid var(--line);
  }
  .rel-head h2{ margin:0; font-size:1.75rem; font-weight:600; line-height:1.2; }
  .rel-head .series{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

  /* ---- the same card, two presentations ----
     Above 1100px the registration card is a sticky rail. Below it, the card
     becomes a bottom sheet opened by a short trigger block: a 560px panel
     stacked under the copy is a wall a phone reader scrolls past rather than
     fills in, and a sheet rising from the bottom edge puts the fields and the
     button where the thumb already is.

     It is the SAME element in both, not two copies - one form, one set of ids,
     one validation path. A duplicate in a dialog would drift from this one the
     first time either was edited, and repeated ids would break every label. */
  .reg-trigger{ display:none; }
  .reg-scrim{ display:none; }
  .reg-close{ display:none; }

  @media (max-width:1100px){
    .lede, .panels{ grid-template-columns:1fr; }
    .lede{ margin-bottom:56px; }
    .panels{ margin-bottom:56px; }
    .presenter{ margin-bottom:56px; }

    .reg-trigger{
      display:block; background:var(--navy); color:#fff; border-radius:20px;
      border:1px solid rgba(76,226,204,.35); padding:24px; box-shadow:var(--shadow-navy);
    }
    .reg-trigger h2{ margin:0; font-size:1.08rem; font-weight:600; color:#fff; }
    .reg-trigger p{ margin:6px 0 18px; font-size:.85rem; line-height:1.6; color:var(--on-dark); }
    .reg-trigger .btn{ width:100%; justify-content:center; }

    .reg-scrim{
      display:block; position:fixed; inset:0; z-index:190;
      background:rgba(6,22,41,.72); backdrop-filter:blur(3px);
      opacity:0; visibility:hidden;
      transition:opacity .24s var(--ease), visibility .24s var(--ease);
    }
    .reg-scrim.is-open{ opacity:1; visibility:visible; }

    /* A bottom sheet, not a full screen. The form is about 560px tall and a
       phone is 700-900, so a full-height panel left a third of it empty below
       the fold marker - and it threw away the thumb-reach argument for putting
       the sheet at the bottom in the first place. This hugs its content and
       stops at 88vh, after which the inside scrolls. */
    .reg{
      position:fixed; left:0; right:0; bottom:0; top:auto; z-index:200;
      max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
      border:0; border-radius:22px 22px 0 0;
      box-shadow:0 -18px 50px -20px rgba(0,0,0,.7);
      padding:14px 18px calc(28px + env(safe-area-inset-bottom, 0px));
      transform:translateY(100%); visibility:hidden;
      transition:transform .3s var(--ease), visibility .3s var(--ease);
    }
    .reg.is-open{ transform:translateY(0); visibility:visible; }
    /* The grab bar. Purely a signal that this panel came from the bottom edge
       and goes back there - dismissal is the close control, the scrim and Esc. */
    .reg::before{
      content:""; display:block; width:38px; height:4px; margin:0 auto 12px;
      border-radius:2px; background:rgba(255,255,255,.22);
    }
    body.reg-open{ overflow:hidden; }

    .reg-close{
      display:grid; place-items:center; width:40px; height:40px; flex-shrink:0;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
      border-radius:10px; color:#fff; cursor:pointer; padding:0;
      transition:background .18s var(--ease), border-color .18s var(--ease);
    }
    .reg-close:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }
    .reg-close:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
    /* The badge and the close control both want the top-right corner. In sheet
       mode the close control keeps it - it is the one a reader needs to find
       without looking - and the badge moves to its own line above.

       order:-1 alone would only put the badge first ON that line, beside the
       heading. The ::after is a zero-height flex item at the same order, so it
       lands straight after the badge and its flex-basis:100% forces the wrap.
       Ties in `order` fall back to DOM order, and ::after is last in the DOM,
       which is exactly the position needed. */
    .reg-head{ align-items:center; flex-wrap:wrap; }
    .reg-head::after{ content:""; order:-1; flex-basis:100%; height:0; }
    .reg-free{ order:-1; margin-bottom:4px; }
  }

  @media (max-width:767px){
    .metabar{ font-size:.72rem; }
    .panel, .presenter, .reg-trigger{ padding:22px; border-radius:16px; }
    .pres-card{ grid-template-columns:1fr; gap:22px; justify-items:start; }
    .lede h1{ margin-top:20px; }
    /* .btn goes full width below 767px in the sliced sheet, which would stretch
       the presenter's LinkedIn link too. It is a link, not a button. */
    .pres-name{ width:auto; }
  }
  @media (prefers-reduced-motion:reduce){
    .reg, .reg-scrim{ transition:none; }
  }

/* ===== 2026-10-07 - recording form is connected to api/submit_webinar_frm.php ===== */
.reg .form-error{
  margin:0 0 14px; padding:10px 14px; border-radius:10px;
  background:rgba(255,138,115,.14); border:1px solid rgba(255,138,115,.5);
  color:#FFC3B5; font-size:.88rem; line-height:1.45;
}
.reg .form-error[hidden]{ display:none; }
.reg .submit-btn.is-loading{ opacity:.7; pointer-events:none; }
/* ===== 2026-10-13 - the Register dialog is connected to api/submit_webinar_reg_frm.php ===== */
.rd .form-error{
  margin:0 0 16px; padding:10px 14px; border-radius:10px;
  background:rgba(255,138,115,.14); border:1px solid rgba(255,138,115,.5);
  color:#FFC3B5; font-size:.88rem; line-height:1.45;
}
.rd .form-error[hidden]{ display:none; }
.rd .btn.is-loading{ opacity:.7; pointer-events:none; }