/* =====================================================================
   NJA presentation fixes, 11 Oct 2026. Load LAST, after arrows.css.
   Governed by HISTORY_DOSSIER.md (11 Oct 2026). These stay untouched: the
   header, the four heroes (including .hero-learn), the footer, the email
   signature, the webinar content, the fonts and the six colours.
   ===================================================================== */

/* F1. One cut-corner CTA geometry (msgs 295/300, A301/A302; dossier §3 "CTA shape", §7.0).
   256 x 60, 18px cut, Poppins 500 14px, label left, thin arrow right.
   256 not A301's 226: the longest live label, "Register for the webinar" (168px),
   needs 168 + 16 gap + 20 arrow + 2x22 padding = 248px. The 18px cut matches the locked hero CTA. */
.cta:not(.hero-learn){box-sizing:border-box;width:256px;max-width:100%;height:60px;min-height:60px;padding:0 22px;gap:16px;
  display:inline-flex;justify-content:space-between;align-items:center;
  font:500 14px/1.3 NJAPoppins,Arial,sans-serif;letter-spacing:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.cta:not(.hero-learn)>span{display:inline-flex;font-size:0;line-height:0}
button.cta{border:0;cursor:pointer}

/* F2. Stray bands back on the live 1184px grid (dossier §7.0 KEEP 1184, msg 532 "allignment, balancing is the key").
   Before this fix, the post-hero band and the People band used min(1440px, 100% - 96px), so their left edge sat 80px
   outside every other section at 1440. */
.support-message,.people-transition>.wrap{width:min(1184px,calc(100% - 96px));max-width:none}
@media(max-width:767px){.support-message,.people-transition>.wrap{width:calc(100% - 40px)}}

/* F3. Homepage mobile hero: tune the dead space only (dossier §4.1 Mobile, A503 "taller than one screen by design").
   Order stays headline -> text -> button -> photo -> selectors. 1120 -> 1040px; photo window 372 -> ~292px. */
@media(max-width:767px){.hero,.hero-content{min-height:1040px}.hero-content{padding-bottom:320px}}

/* ---------- Webinar page: debt-recovery.html, defect fixes only (dossier §4.4, §7.3) ---------- */
/* F4. The debt page used a 1200px wrap; align it with the 1184 grid used by the header, footer and the rest of the site. */
.debt-wrap{width:min(1184px,calc(100% - 96px))}
@media(max-width:767px){.debt-wrap{width:calc(100% - 40px)}}
/* F5. The "YOUR NEXT STEP" band used vw padding (content started 66px from the edge); move it onto the grid.
   Its eyebrow had picked up the band's 19px Myriad paragraph style; restore the site eyebrow. */
.renewal-paths{padding:72px max(48px,calc((100% - 1184px)/2))}
.renewal-paths .eyebrow{font:500 12px/1.6 NJAPoppins,Arial,sans-serif;letter-spacing:.14em;margin:0 0 20px}
@media(max-width:767px){.renewal-paths{padding:56px 20px}}
/* F6. FAQ: the browser's solid black disclosure triangles are replaced by the site's thin line chevron (msg 584 thin arrows). */
.debt-questions summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px}
.debt-questions summary::-webkit-details-marker{display:none}
.debt-questions summary::after{content:"";flex:none;width:11px;height:11px;margin-right:4px;border:solid #0E2244;border-width:0 1.35px 1.35px 0;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.debt-questions details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
/* F7. Video frame: the 9:16 video sat letterboxed in a 390x650 box (navy bars at the sides). Size the column to the video ratio.
   The video itself (Option 01, msg 603) is unchanged. */
.debt-video{grid-template-columns:minmax(0,1fr) 366px}
.debt-video video{aspect-ratio:9/16;height:auto;max-height:none;object-fit:cover}
@media(max-width:767px){.debt-video{grid-template-columns:1fr}.debt-video video{width:min(100%,330px)}}
@media(prefers-reduced-motion:reduce){.debt-questions summary::after{transition:none}}

/* ---------- Booking: book.html (dossier §4.3, §7.2; msgs 619, 640, 814) ---------- */
/* B1. Branded intro: the 5V bilingual WHITE logo on navy, large (msg 814 "small and [un]readable ... elevated, branded"). */
.bk-intro{background:#1A3050;color:#fff;padding:64px 0 88px;border-top:1px solid #ffffff1f}
.bk-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:72px;align-items:center}
.bk-intro .eyebrow{color:#BD9B54;margin:0 0 20px}
.bk-intro h1{color:#fff;font-size:clamp(42px,4vw,60px);line-height:1.12;margin:0 0 24px}
.bk-intro .inner-lead{color:#fff;font-size:21px;line-height:1.6;max-width:540px;margin:0}
.bk-logo{display:block;position:relative;overflow:hidden;width:500px;max-width:100%;aspect-ratio:1234/680;justify-self:end}
.bk-logo img{position:absolute;max-width:none;width:129.66%;height:auto;left:-14.83%;top:-67.65%}

/* B2. Primary path: Microsoft Bookings. Two branded choice cards. */
.bk-choose{padding:88px 0 96px}
.bk-cards{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.bk-card{display:flex;flex-direction:column;align-items:flex-start;background:#eef0ef;border-top:3px solid #BD9B54;padding:40px 40px 44px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.bk-icon{display:grid;place-items:center;width:56px;height:56px;background:#1A3050;margin-bottom:28px}
.bk-icon svg{width:26px;height:26px;fill:none;stroke:#BD9B54;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.bk-card .eyebrow{color:#0E2244;margin:0 0 14px}
.bk-card h2{font-size:30px;line-height:1.25;margin:0 0 16px;max-width:500px}
.bk-card>p:not(.eyebrow){font-size:19px;line-height:1.6;max-width:460px;margin:0 0 28px}
.bk-card .cta{margin-top:auto}
.bk-offices{border:0;margin:0 0 32px;padding:0;width:100%}
.bk-offices legend{font:500 14px/1.4 NJAPoppins,Arial,sans-serif;color:#0E2244;padding:0;margin:0 0 12px}
.bk-office-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bk-office{position:relative;cursor:pointer}
.bk-office input{position:absolute;opacity:0;width:1px;height:1px}
.bk-office span{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;background:#fff;box-shadow:inset 0 0 0 1px #1A305033;
  font:500 14px/1.2 NJAPoppins,Arial,sans-serif;color:#0E2244;transition:background .2s,box-shadow .2s,color .2s}
.bk-office svg{width:18px;height:18px;flex:none;fill:none;stroke:#BD9B54;stroke-width:1.5}
.bk-office:hover span{box-shadow:inset 0 0 0 1px #1A3050}
.bk-office input:checked+span{background:#1A3050;color:#fff;box-shadow:none}
.bk-office input:focus-visible+span{outline:3px solid #BD9B54;outline-offset:3px}

/* B3. Preparation: on the grid, steady spacing (live content unchanged). */
.inner-site .preparation{padding:88px 0}
.preparation-grid{gap:96px}
.preparation-grid h2{margin-bottom:24px}
.preparation-grid h3{font-size:24px;margin:0 0 12px}
.preparation-grid ol{margin:0}

/* B4. "No suitable time?" fallback: two-column on the 1184 grid (live was a centred 1000px block, off the grid),
   with tighter, even field rhythm. */
.inner-site .booking-fallback{max-width:none;padding-top:96px;padding-bottom:96px;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:88px;align-items:start}
.booking-fallback h2{font-size:36px;line-height:1.2;margin:0 0 20px}
.booking-fallback>div>p:not(.eyebrow){font-size:19px;line-height:1.6;margin:0}
.booking-fallback .form-grid{gap:24px 24px}
.booking-fallback label{font:500 14px/1.4 NJAPoppins,Arial,sans-serif;margin:0}
.booking-fallback form>label{margin-top:24px}
.booking-fallback input,.booking-fallback select,.booking-fallback textarea{height:54px;border:1px solid #0E224440;font:400 18px/1.4 NJAMyriad,Arial,sans-serif}
.booking-fallback textarea{height:auto;min-height:150px}
.booking-fallback select{appearance:none;padding-right:48px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2244' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center/20px no-repeat}
.booking-fallback input:focus,.booking-fallback select:focus,.booking-fallback textarea:focus{outline:0;border-color:#0E2244;box-shadow:0 0 0 3px #BD9B5466}
.bk-upload{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:20px 24px;background:#eef0ef}
.bk-upload p{margin:0;font:400 16px/1.5 NJAMyriad,Arial,sans-serif}
.bk-upload strong{display:block;font:500 14px/1.4 NJAPoppins,Arial,sans-serif;margin-bottom:2px}
.bk-upload .site-link{flex:none;font-size:16px;gap:24px;padding:10px 0}
.booking-fallback .fine-print{padding:24px 0}

@media(max-width:1000px){.bk-intro-grid{grid-template-columns:1fr 380px;gap:40px}.bk-logo{width:380px}.inner-site .booking-fallback{grid-template-columns:1fr;gap:40px}}
@media(max-width:767px){
  .bk-intro{padding:40px 0 56px}
  .bk-intro-grid{grid-template-columns:1fr;gap:40px}
  .bk-logo{order:-1;justify-self:start;width:100%}
  .bk-intro h1{font-size:40px}
  .bk-intro .inner-lead{font-size:19px}
  .bk-choose{padding:56px 0 64px}
  .bk-cards{grid-template-columns:1fr;gap:20px}
  .bk-card{padding:28px 24px 32px}
  .bk-card h2{font-size:26px}
  .bk-card>p:not(.eyebrow){font-size:18px}
  .bk-office-list{grid-template-columns:1fr}
  .inner-site .preparation{padding:56px 0}
  .preparation-grid{gap:40px}
  .inner-site .booking-fallback{padding-top:56px;padding-bottom:64px;gap:32px}
  .booking-fallback h2{font-size:30px}
  .booking-fallback .form-grid{grid-template-columns:1fr;gap:20px}
  .booking-fallback form>label{margin-top:20px}
  .bk-upload{flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
}
@media(prefers-reduced-motion:reduce){.bk-office span{transition:none}}