/* Promotional account-page layer. Classic's markup, styles and auth forms are
   preserved; this file is only referenced by the server-selected variant. */
.promo-brand-strip li::before { display: none; }
.promo-chips.promo-brand-strip { gap: 8px; }
.promo-chips.promo-brand-strip li { gap: 8px; padding: 6px 12px 6px 6px; min-height: 38px; background: #10345cb3; border-color: #3a6691; }
.promo-chip-logo, .promo-chip-mark { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 7px; }
.promo-chip-logo { background: #f4faff; padding: 3px; }
.promo-chip-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.promo-chip-logo.sketches { width: 52px; flex-basis: 52px; }
.promo-chip-mark { color: #9bddff; background: #1b4873; border: 1px solid #4b789d; font-size: 10px; font-weight: 750; letter-spacing: -.4px; }
.promo-lightbox-navigation { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 7px 12px; background: #0a2942; border-top: 1px solid #3d6d8b; }
.promo-lightbox-navigation button { min-width: 44px; min-height: 44px; border: 1px solid #6d9bb5; background: #173d5a; color: #eaf7ff; border-radius: 9px; font-size: 21px; cursor: pointer; }
.promo-lightbox-navigation button:hover { background: #24587d; }
.promo-lightbox-count { font-size: 12px; color: #b9d4e1; font-variant-numeric: tabular-nums; }
.auth-promotional { --promo-dark: #062a44; --promo-mint: #7fe3ff; background-color: #04182a; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px), radial-gradient(ellipse at 75% 0, #168cff30, transparent 52%), linear-gradient(152deg, #06162c, #0b2b50 52%, #0c355e); background-size: 48px 48px, 48px 48px, 100% 1200px, 100% 1200px; background-repeat: repeat, repeat, no-repeat, no-repeat; }
.auth-promotional .site-header { background: transparent; border-bottom: 1px solid #ffffff17; }
.auth-promotional .header-inner { max-width: 1280px; padding: 23px 36px; }
.promo-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; }
.promo-nav a { color: #c5d8df; text-decoration: none; }
.promo-nav a:hover { color: #fff; }
.promo-nav .promo-nav-signin { padding: 11px 18px; border: 1px solid #65838f; border-radius: 9px; color: #fff; display: flex; gap: 22px; }
.auth-promotional .auth-main { max-width: 1280px; padding: 72px 36px 76px; gap: clamp(32px, 5.7vw, 86px); grid-template-columns: minmax(0, 1fr) minmax(0, 410px); }
.promo-hero { min-width: 0; padding-top: 15px; color: #fff; animation: promo-enter .65s ease-out both; }
.promo-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 23px; font-size: 12px; line-height: 1.5; font-weight: 750; letter-spacing: 1.8px; text-transform: uppercase; color: #397567; }
.promo-hero .promo-eyebrow, .promo-final .promo-eyebrow { color: #7fe3ff; }
.promo-hero .promo-eyebrow > span { width: 6px; height: 6px; background: #bbf0d0; border-radius: 50%; box-shadow: 0 0 0 4px #c4f3d812; }
.promo-hero h1 { margin: 0; color: #f0f5ff; font-size: clamp(38px, 4.3vw, 58px); line-height: 1.07; font-weight: 750; letter-spacing: -2px; }
.promo-hero h1 em { color: #4fc9f2; font-style: normal; }
.promo-lede { max-width: 49ch; color: #b4ccd7; font-size: 17px; line-height: 1.75; margin: 26px 0 28px; }
.promo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; }
.promo-button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; border-radius: 8px; border: 1px solid transparent; padding: 15px 20px; text-decoration: none; cursor: pointer; font-size: 14px; font-weight: 700; min-height: 48px; transition: background .18s ease, transform .18s ease; }
.promo-button:hover:not(:disabled) { transform: translateY(-2px); }
.promo-button.mint { background: var(--promo-mint); color: #0d3b36; }
.promo-button.mint:hover { background: #b4efff; }
.promo-button.dark { color: #fff; background: #0b4352; }
.promo-button.dark:hover:not(:disabled) { background: #126177; }
.promo-button:disabled { color: #6a7e84; background: #e7eeef; cursor: default; }
.promo-text-link { color: #ebf5f7; font-size: 14px; text-decoration: none; display: flex; gap: 13px; padding: 14px 0; }
.promo-small-note { font-size: 12px; color: #8daebc; margin: 18px 0 0; }
.promo-chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 25px 0 0; }
.promo-chips li { display: flex; align-items: center; gap: 7px; border: 1px solid #74b4da50; border-radius: 999px; background: #092a429e; padding: 7px 11px; color: #cfe6f4; font-size: 12px; line-height: 1.4; }
.promo-chips li::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #4fa3e3; }
.promo-chips li:nth-child(even)::before { background: #65d5b6; }
.promo-gallery { margin-top: 32px; }
.promo-gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 13px; }
.promo-gallery-heading b { color: #edf8ff; font-size: 15px; }
.promo-gallery-heading span { color: #93b8ca; font-size: 12px; text-align: right; }
.promo-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.promo-capture { --capture-accent: #7fe3ff; display: flex; flex-direction: column; min-width: 0; width: 100%; padding: 0; border: 1px solid #74b4da70; border-radius: 14px; overflow: hidden; background: linear-gradient(145deg,#143650,#0d2c45); color: #d6e9f6; box-shadow: 0 14px 32px #0005; cursor: zoom-in; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.promo-capture[data-product="shelf"] { --capture-accent: #8ee6b7; }
.promo-capture[data-product="qboss"] { --capture-accent: #40d4dc; }
.promo-capture[data-product="qworld"] { --capture-accent: #55b7ff; }
.promo-capture:hover { transform: translateY(-3px); border-color: var(--capture-accent); box-shadow: 0 20px 42px #0007; }
.promo-capture:focus-visible { outline: 3px solid var(--capture-accent); outline-offset: 3px; }
.promo-capture-bar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; align-self: stretch; gap: 10px; width: 100%; padding: 11px 12px; min-height: 58px; box-sizing: border-box; background: linear-gradient(110deg,#173d5a,#0a2942); border-bottom: 2px solid color-mix(in srgb, var(--capture-accent) 68%, transparent); }
.promo-capture-index { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: color-mix(in srgb, var(--capture-accent) 13%, #092a42); border: 1px solid color-mix(in srgb, var(--capture-accent) 55%, transparent); color: var(--capture-accent); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .4px; }
.promo-capture-title { display: grid; gap: 1px; min-width: 0; }
.promo-capture-title b { color: #f2f9fd; font-size: 14px; line-height: 1.25; font-weight: 700; }
.promo-capture-title small { color: #91b8ca; font-size: 10px; line-height: 1.35; font-weight: 500; }
.promo-capture-open { display: flex; align-items: center; gap: 6px; color: #bad5e2; font-size: 10px; font-weight: 650; white-space: nowrap; }
.promo-capture-open i { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #8ebfd26b; border-radius: 50%; color: var(--capture-accent); font-size: 13px; font-style: normal; transition: transform .18s ease, background .18s ease; }
.promo-capture:hover .promo-capture-open i { transform: translate(1px,-1px); background: color-mix(in srgb, var(--capture-accent) 12%, transparent); }
.promo-capture img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 1050; object-fit: contain; background: white; }
.promo-capture-caption { flex: 1; min-height: 56px; box-sizing: border-box; padding: 11px 13px 13px; color: #b6d0dc; font-size: 11px; line-height: 1.45; text-align: left; }
.promo-gallery-hint { color: #a9c8dc; font-size: 12px; line-height: 1.6; margin-top: 12px; }
.promo-lightbox { box-sizing: border-box; width: min(1440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #47799c; border-radius: 14px; background: #07223a; color: white; box-shadow: 0 28px 80px #000b; }
.promo-lightbox::backdrop { background: #00101fe8; backdrop-filter: blur(6px); }
.promo-lightbox-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); min-height: 0; }
.promo-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: 0 0 auto; padding: 11px 12px 11px 16px; border-bottom: 1px solid #3d6d8b; background: linear-gradient(110deg,#133b58,#0a2942); }
.promo-lightbox-heading { display: grid; gap: 1px; min-width: 0; }
.promo-lightbox-heading b { overflow: hidden; color: #f4fbff; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.promo-lightbox-heading small { color: #9fc1d2; font-size: 12px; line-height: 1.35; }
.promo-lightbox-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.promo-lightbox-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid #6d9bb5; border-radius: 8px; padding: 8px 11px; background: #ffffff09; color: #eaf7ff; font-family: inherit; font-size: 12px; font-weight: 650; line-height: 1; cursor: pointer; }
.promo-lightbox-actions button:hover { background: #ffffff14; border-color: #8edbf6; }
.promo-lightbox-zoom-icon { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #7fe3ff; border-radius: 50%; color: #7fe3ff; font-size: 16px; font-weight: 400; line-height: 1; }
.promo-lightbox-close > span { color: #7fe3ff; font-size: 20px; font-weight: 400; line-height: .8; }
.promo-lightbox-stage { display: grid; place-items: center; min-height: 0; overflow: auto; background: #eef5f8; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.promo-lightbox-stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 126px); object-fit: contain; }
.promo-lightbox.is-zoomed .promo-lightbox-stage { display: block; }
.promo-lightbox.is-zoomed .promo-lightbox-stage img { width: 1440px; max-width: none; max-height: none; }
.promo-lightbox-caption { flex: 0 0 auto; margin: 0; padding: 10px 16px 12px; border-top: 1px solid #3d6d8b; color: #b9d4e1; background: #0a2942; font-size: 12px; line-height: 1.45; }
@media (max-width: 760px) {
  .promo-lightbox { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))); border-radius: 16px; }
  .promo-lightbox-shell { max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))); }
  .promo-lightbox-bar { min-height: 62px; box-sizing: border-box; padding: 9px 10px 9px 14px; }
  .promo-lightbox-heading b { font-size: 13px; }
  .promo-lightbox-heading small { font-size: 11px; }
  .promo-lightbox-actions button { min-width: 42px; min-height: 42px; padding: 8px 10px; }
  .promo-lightbox-zoom { display: none !important; }
  .promo-lightbox-close { font-size: 0 !important; gap: 0 !important; }
  .promo-lightbox-close > span { font-size: 23px; }
  .promo-lightbox-stage { overflow: hidden; touch-action: pan-y pinch-zoom; }
  .promo-lightbox-stage img,.promo-lightbox.is-zoomed .promo-lightbox-stage img { width: 100%; max-width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; }
  .promo-lightbox-caption { padding: 9px 13px 11px; font-size: 11px; }
}
.promo-resource-logo { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; }
.promo-resource-logo img { width: 44px; height: 44px; object-fit: contain; }
.promo-resource-logo.sketches { justify-content: flex-start; }
.promo-resource-logo.sketches img { width: 180px; height: auto; max-width: none; flex-shrink: 0; margin-left: 9px; clip-path: inset(0 154px 0 0); }
.promo-screens { position: relative; isolation: isolate; margin: 32px 0 0; width: 100%; aspect-ratio: 1.48; }
.promo-screens::before { content: ''; position: absolute; inset: 10% -5% 8%; background: radial-gradient(ellipse, #0b90c942, transparent 68%); z-index: -1; }
.promo-screen { position: absolute; overflow: hidden; border: 1px solid #96c8e43d; border-radius: 9px; background: #07223a; box-shadow: 0 16px 35px #0007; }
.promo-screen img { display: block; width: 100%; height: auto; }
.promo-window-dots { height: 16px; line-height: 13px; padding-left: 9px; font-size: 8px; letter-spacing: 2px; color: #7096af; background: linear-gradient(#12314b, #0d263c); }
.promo-screen.assessment { width: 79%; right: 1%; top: 0; transform: rotate(-2.2deg); }
.promo-screen.builder { width: 80%; right: 0; top: 27%; transform: rotate(1.4deg); }
.promo-screen.exam { width: 76%; left: 0; bottom: 11%; transform: rotate(-2.6deg); }
.promo-screen-tag { position: absolute; border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 700; line-height: 1.3; color: #08314a; box-shadow: 0 5px 15px #001b3644; }
.promo-screen-tag.analytics { top: 19%; right: 2%; background: #8ee6b7; }
.promo-screen-tag.pacing { bottom: 39%; left: 0; background: #7fe3ff; }
.promo-screens figcaption { position: absolute; bottom: 0; width: 100%; text-align: center; color: #a9c8dc; font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) { .promo-screens { max-width: 600px; margin: 30px auto 0; } .promo-hero h1 br:first-child { display: none; } }
@media (max-width: 420px) { .promo-screens { aspect-ratio: 1.32; } .promo-screen-tag { padding: 6px 8px; max-width: 65%; } .promo-screen.exam { bottom: 15%; } }
.promo-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; }
.promo-route > div { position: relative; display: grid; gap: 4px; }
.promo-route > div::before { content: ""; position: absolute; left: 28px; right: 0; top: 12px; height: 1px; background: #3e6672; }
.promo-route > div:last-child::before { display: none; }
.promo-route span { width: 25px; height: 25px; display: grid; place-items: center; font-size: 12px; color: #c4f3d8; border: 1px solid #557c83; border-radius: 50%; margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.promo-route b { color: #f4faf8; font-size: 14px; font-weight: 650; }
.promo-route small { color: #91b4bf; font-size: 12px; }
.promo-focus-card { display: flex; gap: 14px; align-items: center; margin-top: 32px; padding: 19px 18px; border: 1px solid #426571; border-radius: 12px; background: #ffffff05; }
.promo-focus-icon { height: 36px; width: 36px; flex-shrink: 0; display: grid; place-items: center; background: #19464e; color: var(--promo-mint); border-radius: 10px; font-size: 22px; }
.promo-focus-card b { font-size: 14px; font-weight: 650; }
.promo-focus-card p { font-size: 12px; line-height: 1.5; margin: 4px 0 0; color: #a4c2cd; }
.promo-focus-check { color: #b3e5ca; margin-left: auto; font-size: 14px; }
.auth-promotional .auth-panel { scroll-margin-top: max(18px, env(safe-area-inset-top)); min-width: 0; animation: promo-enter .65s .08s ease-out both; }
.auth-promotional .auth-card { padding: 25px; border-radius: 17px; border: 0; box-shadow: 0 18px 55px #00182355; }
.auth-promotional .panel-foot { color: #aec9d3; font-size: 12px; }
.auth-promotional .panel-foot a { color: #d4e7ed; }
.auth-promotional .panel-legal { color: #88a9b6; font-size: 12px; line-height: 1.7; }
.auth-promotional .field input { font-size: 16px; }
.auth-promotional .view-title { font-size: 24px; letter-spacing: -.6px; }
.auth-promotional .view-sub { font-size: 14px; }
.auth-promotional .btn-primary { background: linear-gradient(110deg, #07446a, #008cb7); }
.auth-promotional .btn-primary:hover:not(:disabled) { background: #0c5b6f; }
.auth-promotional .auth-card .btn { font-size: 14px; }
.auth-promotional .field-label { font-size: 14px; }
.auth-promotional .auth-tabs { margin-bottom: 22px; }
.promo-content { background: #f6faff; color: #123449; }
.promo-section { max-width: 1280px; margin: 0 auto; padding: 84px 36px; }
.promo-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 70px; margin-bottom: 42px; }
.promo-content h2 { margin: 0; font-size: clamp(30px, 3.3vw, 43px); font-weight: 650; letter-spacing: -1.5px; line-height: 1.14; }
.promo-content h2 span { color: #477b9b; }
.promo-content .promo-eyebrow { margin-bottom: 16px; }
.promo-section-heading > p { color: #627b81; max-width: 36ch; line-height: 1.75; font-size: 14px; margin: 0 0 3px; }
.promo-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.promo-resource { min-width: 0; border: 1px solid #dce6e0; background: #fff; border-radius: 12px; padding: 23px; transition: transform .2s, border-color .2s; }
.promo-resource:hover { transform: translateY(-3px); border-color: #81b4a4; }
.promo-resource-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; font-size: 12px; color: #728887; }
.promo-resource-symbol { width: 48px; height: 48px; display: grid; place-items: center; font-size: 14px; font-weight: 700; border-radius: 9px; background: #e3f3e8; color: #22634f; }
.promo-resource.blue .promo-resource-symbol { background: #e5f0f7; color: #35657d; }
.promo-resource.rose .promo-resource-symbol { background: #f6e9e7; color: #92655e; }
.promo-resource.sand .promo-resource-symbol { background: #f7eedb; color: #8c6d33; }
.promo-resource h3 { font-size: 18px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 14px; }
.promo-resource > b { font-size: 14px; font-weight: 650; }
.promo-resource p { color: #688087; font-size: 14px; line-height: 1.75; margin: 7px 0 0; }
.promo-library-note { color: #6b7c7c; font-size: 12px; text-align: center; margin: 22px 0 0; line-height: 1.6; }
.promo-practice-section { background: #eaf3fa; border-top: 1px solid #d8e7f2; border-bottom: 1px solid #d8e7f2; }
.promo-practice-inner { max-width: 1280px; margin: 0 auto; padding: 84px 36px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.promo-practice-copy { padding-top: 16px; }
.promo-practice-copy > p:not(.promo-eyebrow) { max-width: 37ch; color: #637c7e; font-size: 14px; line-height: 1.8; margin: 23px 0; }
.promo-feature-list { list-style: none; margin: 35px 0 30px; padding: 0; display: grid; gap: 25px; }
.promo-feature-list li { display: flex; gap: 18px; }
.promo-feature-list li > span { color: #597b74; font-size: 12px; border-top: 1px solid #92b2a7; padding-top: 8px; min-width: 22px; }
.promo-feature-list h3 { font-size: 15px; font-weight: 650; margin: 0 0 7px; }
.promo-feature-list p { font-size: 14px; color: #637c7e; line-height: 1.8; margin: 0; max-width: 41ch; }
.promo-saving { border-top: 1px solid #cfddd3; padding-top: 23px; display: flex; gap: 12px; align-items: center; }
.promo-saving > span { border-radius: 50%; background: #d6e9dc; padding: 6px 9px; color: #406d58; }
.promo-saving p { font-size: 12px; color: #66807a; margin: 0; line-height: 1.7; }
.promo-saving b { color: #285344; }
.promo-demo { background: #fff; border-radius: 14px; border: 1px solid #c5d7ce; box-shadow: 0 20px 35px #143b3010; overflow: hidden; min-width: 0; }
.promo-demo-bar { background: #0b4352; color: #d6eced; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 22px; font-size: 12px; }
.promo-demo-bar > span:first-child { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.promo-demo-bar i { width: 5px; height: 5px; border-radius: 50%; background: #c4f3d8; }
.promo-demo-settings { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px 0; }
.promo-mode-switch { display: flex; padding: 3px; border: 1px solid #dce6e0; background: #f4f7f4; border-radius: 8px; }
.promo-mode-switch button { min-height: 36px; padding: 7px 16px; border: 0; border-radius: 5px; font-size: 12px; background: transparent; color: #647978; cursor: pointer; font-weight: 650; }
.promo-mode-switch button[aria-pressed="true"] { color: #164735; background: #fff; box-shadow: 0 1px 4px #122e321a; }
.promo-subject-label { display: grid; gap: 3px; font-size: 12px; color: #647d7f; }
.promo-subject-label select { border: 0; border-bottom: 1px solid #b9d0c4; background: transparent; color: #274e4e; font-size: 14px; padding: 5px 0; max-width: 145px; min-height: 30px; cursor: pointer; }
.promo-mode-hint { color: #708b8c; font-size: 12px; margin: 14px 22px 0; line-height: 1.65; }
.promo-sample { padding: 20px 22px 0; }
.promo-sample-meta { font-size: 12px; color: #57816e; display: flex; gap: 15px; justify-content: space-between; }
.promo-sample-meta b { font-weight: 500; white-space: nowrap; color: #8da09c; }
.promo-stem { font-size: 14px; line-height: 1.8; color: #264449; margin: 15px 0 20px; }
.promo-options { padding: 0; margin: 0; border: 0; display: grid; gap: 7px; min-width: 0; }
.promo-option { position: relative; display: flex; gap: 10px; align-items: center; border: 1px solid #e0e8e5; border-radius: 7px; padding: 9px 10px; min-height: 41px; cursor: pointer; color: #426061; font-size: 12px; line-height: 1.5; }
.promo-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.promo-option:has(input:checked) { border-color: #6b9c87; background: #edf6ef; color: #245244; }
.promo-option:has(input:focus-visible) { outline: 3px solid #00b5e2; outline-offset: 2px; }
.promo-option-letter { display: grid; place-items: center; border: 1px solid #dce6e2; border-radius: 4px; font-size: 12px; width: 22px; height: 22px; flex-shrink: 0; }
.promo-option.is-correct { background: #e5f4e9; border-color: #65a780; color: #205334; }
.promo-option.is-incorrect { background: #fcf0ec; border-color: #dca38d; color: #8b453b; }
.promo-option-result { margin-left: auto; font-size: 15px; font-weight: 700; }
.promo-explanation { background: #f2f8f3; border-left: 2px solid #71aa86; padding: 14px; margin-top: 18px; font-size: 12px; color: #486b5b; line-height: 1.8; }
.promo-explanation p { margin: 5px 0 0; }
.promo-demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 22px 0; }
.promo-demo-controls .promo-button { font-size: 12px; padding: 11px 16px; min-height: 41px; }
.promo-plain-button { border: 0; padding: 12px 0; font-size: 12px; color: #366656; cursor: pointer; background: none; font-weight: 650; }
.promo-demo-status { min-height: 17px; font-size: 12px; color: #4e7966; line-height: 1.6; margin: 9px 22px 17px; }
.promo-demo-foot { font-size: 12px; color: #78908c; background: #fafcf9; border-top: 1px solid #e5ede6; padding: 12px 22px; margin: 0; line-height: 1.6; }
.promo-timed-result { margin: 0 22px 18px; padding: 15px; border: 1px solid #acd0b9; border-radius: 8px; background: #f0f8f1; }
.promo-timed-result b { font-size: 14px; }
.promo-timed-result p { font-size: 12px; line-height: 1.7; color: #688276; }
.promo-no-script { font-size: 14px; padding: 16px; }
.promo-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 50px; }
.promo-faq-list { border-top: 1px solid #dae5df; }
.promo-faq details { border-bottom: 1px solid #dae5df; }
.promo-faq summary { position: relative; padding: 23px 30px 23px 0; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; }
.promo-faq summary::-webkit-details-marker { display: none; }
.promo-faq summary::after { content: "+"; position: absolute; right: 3px; font-size: 20px; top: 17px; font-weight: 400; color: #6b8b7e; }
.promo-faq details[open] summary::after { content: "−"; }
.promo-faq details p { font-size: 14px; line-height: 1.8; color: #69827c; margin: 0 28px 23px 0; }
.promo-faq-intro { max-width: 32ch; color: #627b81; font-size: 16px; line-height: 1.75; }
.promo-final { background: #0b3542; max-width: 1208px; margin: 0 auto; border-radius: 15px; padding: 44px 48px; display: flex; gap: 30px; align-items: center; justify-content: space-between; }
.promo-final h2 { color: #f3faf5; font-size: clamp(27px, 3vw, 38px); }
.promo-final > div:last-child > p { color: #a5c2c6; font-size: 12px; text-align: center; margin: 15px 0 0; }
.promo-final > div:last-child a:not(.promo-button) { color: #e4f9ef; }
.promo-footer { max-width: 1280px; margin: 0 auto; padding: 35px 36px; display: flex; align-items: center; gap: 22px; }
.promo-footer-brand { color: #31584f; font-weight: 800; font-size: 14px; text-decoration: none; letter-spacing: 1px; }
.promo-footer p { color: #708b80; font-size: 12px; }
.promo-footer > div { display: flex; gap: 20px; margin-left: auto; }
.promo-footer > div a { color: #678074; text-decoration: none; font-size: 12px; }
.auth-promotional :is(a, button, select, summary):focus-visible { outline: 3px solid #00b5e2; outline-offset: 4px; }
.auth-promotional .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes promo-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1000px) {
  .auth-promotional .auth-main { gap: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 370px); padding-top: 44px; }
  .promo-hero h1 { font-size: 44px; letter-spacing: -2px; }
  .promo-route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; margin-top: 30px; }
  .promo-route > div:nth-child(2)::before { display: none; }
  .promo-lede { font-size: 15px; }
}
@media (max-width: 760px) {
  .auth-promotional .header-inner { padding: 17px 22px; }
  .promo-nav > a:not(.promo-nav-signin) { display: none; }
  .promo-nav .promo-nav-signin { font-size: 12px; padding: 10px 13px; gap: 15px; }
  .auth-promotional .auth-main { grid-template-columns: minmax(0, 1fr); padding: 37px 22px 35px; gap: 34px; }
  .promo-hero { padding: 0; }
  .promo-hero h1 { font-size: clamp(38px, 8vw, 57px); line-height: 1.1; letter-spacing: -1.8px; }
  .promo-eyebrow { font-size: 12px; margin-bottom: 18px; letter-spacing: 1.4px; }
  .promo-lede { font-size: 14px; max-width: 47ch; line-height: 1.75; margin: 20px 0 23px; }
  .promo-hero-actions { gap: 19px; }
  .promo-hero-actions .promo-button { font-size: 14px; padding: 13px 16px; gap: 15px; }
  .promo-text-link { font-size: 12px; }
  .promo-small-note { font-size: 12px; line-height: 1.7; }
  .promo-gallery { margin-top: 38px; }
  .promo-gallery-heading { align-items: start; flex-direction: column; gap: 4px; }
  .promo-gallery-heading span { text-align: left; }
  .promo-gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .promo-capture:hover { transform: none; }
  .promo-capture-bar { grid-template-columns: auto minmax(0,1fr) auto; gap: 11px; width: 100%; min-height: 66px; padding: 11px 13px; }
  .promo-capture-open { min-height: 34px; padding: 6px 10px; border: 1px solid #8ebfd26b; border-radius: 999px; background: #ffffff08; color: #d5e9f4; font-size: 11px; }
  .promo-capture-open i { display: none; }
  .promo-capture-caption { font-size: 12px; padding: 11px 13px 13px; }
  .promo-route { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; gap: 0; }
  .promo-route > div:nth-child(2)::before { display: block; }
  .promo-route b { font-size: 12px; }
  .promo-route small { font-size: 12px; }
  .promo-focus-card { display: none; }
  .auth-promotional .auth-panel { width: 100%; max-width: 500px; margin: 0 auto; }
  .auth-promotional .auth-card { padding: 23px; }
  .auth-promotional .panel-legal { max-width: 440px; margin-left: auto; margin-right: auto; }
  .promo-section { padding: 51px 22px; }
  .promo-section-heading { display: block; margin-bottom: 28px; }
  .promo-section-heading > p { margin-top: 20px; max-width: 47ch; font-size: 14px; }
  .promo-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .promo-resource { padding: 19px; }
  .promo-resource:last-child { grid-column: 1 / -1; }
  .promo-resource h3 { font-size: 16px; }
  .promo-practice-inner { grid-template-columns: minmax(0, 1fr); padding: 50px 22px; gap: 30px; }
  .promo-practice-copy { padding: 0; }
  .promo-feature-list p { max-width: 55ch; }
  .promo-practice-copy > p:not(.promo-eyebrow) { max-width: 48ch; }
  .promo-demo { max-width: 580px; width: 100%; margin: 0 auto; }
  .promo-faq { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .promo-faq-intro { max-width: 47ch; }
  .promo-final { margin: 0 22px; padding: 32px 25px; flex-direction: column; align-items: start; gap: 25px; }
  .promo-final > div:last-child > p { text-align: left; }
  .promo-footer { padding: 30px 22px 90px; flex-wrap: wrap; gap: 12px; }
  .promo-footer p { flex-basis: 100%; margin: 0; }
  .promo-footer > div { margin: 5px 0 0; }
}
@media (max-width: 420px) {
  .promo-resource-grid { grid-template-columns: minmax(0, 1fr); }
  .promo-resource { padding: 22px; }
  .promo-resource-top { margin-bottom: 16px; }
  .promo-resource h3 { font-size: 19px; }
  .promo-resource p { font-size: 14px; }
  .promo-demo-settings, .promo-demo-bar { padding-left: 16px; padding-right: 16px; }
  .promo-sample { padding-left: 16px; padding-right: 16px; }
  .promo-demo-controls { padding-left: 16px; padding-right: 16px; }
  .promo-mode-switch button { padding: 8px 12px; }
  .promo-demo-bar { font-size: 12px; }
  .promo-stem { font-size: 14px; }
  .promo-option { font-size: 14px; min-height: 46px; }
  .promo-option-letter { width: 23px; height: 23px; }
  .promo-mode-hint { margin-left: 16px; margin-right: 16px; }
  .promo-subject-label select { font-size: 16px; max-width: 145px; }
}
/* Main reading copy stays comfortable at every breakpoint. */
.promo-resource p, .promo-feature-list p, .promo-stem, .promo-faq details p,
.promo-section-heading > p, .promo-practice-copy > p:not(.promo-eyebrow), .promo-explanation { font-size: 16px; }
.promo-option, .promo-feature-list h3, .promo-faq summary, .promo-demo-controls .promo-button,
.promo-plain-button, .promo-mode-switch button, .promo-nav,
.auth-promotional .auth-card .btn, .auth-promotional .field-label, .auth-promotional .view-sub { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .auth-promotional *, .auth-promotional *::before, .auth-promotional *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Reserve space for the screenshot browser controls on short screens. */
.promo-lightbox-stage img { max-height: calc(100dvh - 195px); }
@media(max-width:760px) { .promo-lightbox-stage img, .promo-lightbox.is-zoomed .promo-lightbox-stage img { max-height: calc(100dvh - 220px); } }