/*
Theme Name: Empower Network
Theme URI: https://www.empowernetwork.com
Description: Kadence child theme implementing the 2026 Empower Network relaunch design (navy/blue, Archivo + Public Sans). Design source: redesign/design_handoff_empowernetwork_site.
Author: Empower Network
Template: kadence
Version: 1.17.17
Text Domain: en-kadence-child
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --en-navy: #0C2233;
  --en-blue: #1B9BE0;
  --en-blue-deep: #147BB5;
  --en-blue-light: #3DB4E8;
  --en-blue-pale: #7FD0F2;
  --en-ink: #16232C;
  --en-body-c: #2B3A45;
  --en-muted: #5B6B77;
  /*
   * Was #8296A3: 3.07:1 on white. This token carries almost every small text
   * label on the site - card dates and bylines, price terms, fine print, module
   * meta, and .v-meta on all 3,237 vault blogs - so it was the single most
   * repeated AA failure in the network, and a full-page sweep found it on every
   * page tested. #5F7181 clears 4.5 on white AND on all three tints it lands on
   * (5.04 / 4.81 / 4.72 / 4.58) while staying visibly lighter than --en-muted,
   * so the type hierarchy it exists for still reads.
   */
  --en-faint: #5F7181;
  --en-on-navy: #9DB8CA;
  /*
   * Was #7FA3BC. That clears AA on flat navy (6.09:1) but the squeeze and hero
   * bands paint a blue radial glow over it, and against the lit part of that
   * glow (#0F3D59 / #1B4661) it measured 4.31 and 3.75. Nothing darker than
   * #9DB8CA clears 4.5 across the whole glow, so on this palette ""muted on
   * navy"" and ""on navy"" have to be the same value - the tone below it does not
   * exist at AA. 4.84:1 at the worst point, 7.85:1 on flat navy.
   */
  --en-on-navy-muted: #9DB8CA;
  --en-on-navy-body: #C9DAE6;
  --en-tint: #F7FAFC;
  --en-tint-blue: #EFF7FC;
  --en-tint-gray: #F4F8FA;
  --en-chip: #EFF5F9;
  --en-chip-text: #41525E;
  --en-border: rgba(14, 42, 60, .1);
  --en-border-strong: rgba(14, 42, 60, .15);
  --en-border-navy: rgba(255, 255, 255, .12);
  /*
   * Ink blue. --en-blue-deep (#147BB5) is 4.64:1 on pure white, which scrapes
   * AA — but every tinted surface in this palette drags it under: 4.42 on
   * --en-tint, 4.34 on --en-tint-gray, 4.28 on --en-tint-blue. Anything that
   * has to stay readable on a *card* uses this one instead: 6.48 on white and
   * never below 5.98 on any tint we ship. (Measured, not eyeballed.)
   */
  --en-blue-ink: #10648F;
  /*
   * Primary CTA gradient. Was linear-gradient(180deg, #2FAAE8, #147BB5): the
   * top stop measured 2.61:1 against the white label, so the top half of every
   * primary button on the site failed AA. Both stops now pass on their own —
   * #147BB5 = 4.64:1, #10648F = 6.48:1 — so the label is legible across the
   * whole sweep rather than only near the bottom edge.
   */
  --en-grad: linear-gradient(180deg, #147BB5, #10648F);
  /* Focus ring. Overridden to --en-blue-pale inside navy bands (see :focus-visible). */
  --en-focus: #10648F;
  --en-cta-shadow: 0 12px 28px rgba(27, 155, 224, .4);
  --en-card-shadow: 0 4px 14px rgba(14, 42, 60, .06);
  --en-display: 'Archivo', sans-serif;
  --en-sans: 'Public Sans', system-ui, sans-serif;

  /* ------------------------------------------------------------------
   * Type scale
   * ------------------------------------------------------------------
   * A rendered-pixel sweep of this site found ~35 distinct font sizes in
   * this file and eight distinct <h1> signatures across 23 page types -
   * 26, 32, 38, 40, 44, 46 and 50px, plus one h1 set in the body face
   * instead of the display face. Two different h2 identities were in use
   * (Archivo 800 and Public Sans 700), and /partners/ carried an h2 at
   * 19px, smaller than its own body text is tall. There was no rule
   * anybody could have followed, because there was no scale.
   *
   * There is one now. Two ramps, because text and display want different
   * resolutions:
   *
   *   text    1.125   12 -> 13.5 -> 15 -> 17 -> 19 -> 21
   *   display 1.25    21 -> 26 -> 32 -> 40 -> 50
   *
   * 17px is the body step and the hinge between the two ramps. Every
   * font-size in this file is one of these ten values; nothing picks its
   * own. Sizes that were within half a pixel of a step (14.5, 15.5, 16.5,
   * 17.5) collapsed into it, which is where most of the old variance came
   * from. The visible consequences are that h1 is now 40px everywhere
   * except the home hero (50) and the two utility cards (32), h2 is 26 or
   * 32 in Archivo 800 everywhere, and nothing on the site renders below
   * 12px.
   */
  --en-t-100: 12px;    /* legal, chips, meta                */
  --en-t-200: 13.5px;  /* small print, captions, nav        */
  --en-t-300: 15px;    /* UI, buttons, dense body           */
  --en-t-400: 17px;    /* body                              */
  --en-t-500: 19px;    /* lede, h4                          */
  --en-t-600: 21px;    /* card title / h4                   */
  --en-t-700: 26px;    /* h3, small h2                      */
  --en-t-800: 32px;    /* h2, utility h1                    */
  --en-t-900: 40px;    /* h1                                */
  --en-t-1000: 50px;   /* display h1 (home hero only)       */

  /* ------------------------------------------------------------------
   * Button geometry
   * ------------------------------------------------------------------
   * The same sweep measured 18-20 distinct button signatures on rendered
   * pages for what is conceptually one button: three radii, six font
   * sizes, two weights and a dozen padding pairs, because every context
   * that wanted a slightly different button wrote its own font-size,
   * padding and border-radius on top of .en-btn.
   *
   * Those context rules now set --en-btn-* instead of the properties
   * themselves, so there are exactly three sizes and one radius. Contexts
   * keep whatever layout they need (width, display, margin, alignment) -
   * that is not what made them look like different buttons.
   */
  --en-btn-r: 10px;
  --en-btn-fs: var(--en-t-300);
  --en-btn-pad: 14px 22px;
}

/* ==========================================================================
   Base / resets over Kadence
   ========================================================================== */
body.en-body {
  margin: 0;
  background: #fff;
  color: var(--en-ink);
  font-family: var(--en-sans);
}
/*
 * Default link colour. --en-blue (#1B9BE0) measured 3.08:1 on white, so every
 * link that did not carry its own class - "All posts", the footer project row,
 * inline prose links - failed AA. --en-blue-ink is 6.48:1 there.
 * On navy the polarity has to flip (#10648F on navy is 1.7:1), so this reads a
 * variable and the navy bands re-point it, the same way they re-point
 * --en-focus. #7FD0F2 on #0C2233 is 9.45:1.
 */
body.en-body { --en-link: var(--en-blue-ink); }
body.en-body a { color: var(--en-link); text-decoration: none; }
body.en-body a:hover { color: var(--en-blue); }
/*
 * Links inside running prose carry an underline.
 *
 * `text-decoration: none` site-wide is right for navigation, cards and buttons -
 * they are already obviously interactive from their position and shape. Inside a
 * paragraph it leaves colour as the only signal that a word is a link, which
 * WCAG 1.4.1 does not accept and which anybody with a colour deficiency simply
 * cannot see. Scoped to prose so the nav, the footer link row, cards and every
 * .en-btn stay clean.
 *
 * `underline-offset` and a thin `from-font` line so the underline sits under
 * descenders rather than through them at 17px.
 */
body.en-body .en-article p a,
body.en-body .en-article li a,
body.en-body .en-letter p a,
body.en-body .en-letter li a,
body.en-body .en-footer-note a,
body.en-body .en-fine-print a,
body.en-body .en-section-fineprint a,
body.en-body .en-squeeze-footer a,
body.en-body .en-squeeze-ps a,
body.en-body .en-transcript-note a,
body.en-body .en-checkout-help a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
}
body.en-body input::placeholder { color: var(--en-faint); }

/* Hide Kadence chrome — this theme renders its own header/footer. */
body.en-body #masthead,
body.en-body #colophon,
body.en-body .site-footer { display: none !important; }
/*
 * `body.en-body #kt-skip-link { display:none }` used to sit in this list. It was
 * doing nothing: #kt-skip-link is not emitted by Kadence 1.5.1, nor by anything
 * else in this install - the only occurrence of that id anywhere in wp-content
 * was this rule. Kadence's real skip link is `.skip-link.screen-reader-text`,
 * printed on the `kadence_before_header` action, and this child theme supplies
 * its own header.php and never fires that action. So the site shipped with NO
 * skip link in the DOM at all, rather than a hidden one. header.php now prints
 * .en-skip (below) and marks the content start with #en-content.
 */
body.en-body #wrapper, body.en-body #inner-wrap { display: block; }

/* ==========================================================================
   Focus + skip link
   ==========================================================================
   Kadence puts `hide-focus-outline` on <body> and ships
   `.hide-focus-outline *:focus { outline: 0 }`. Together with the `outline:none`
   this theme sets on its own inputs, a keyboard user had no visible focus
   anywhere on the site. These use :focus-visible so pointer users still see
   nothing, and carry !important because the Kadence rule (0,2,0) outweighs a
   bare :focus-visible.
   Ring contrast, measured: #10648F on #fff = 6.48:1, #7FD0F2 on #0C2233 = 9.45:1
   (non-text UI needs 3:1). */
body.en-body :focus-visible {
  outline: 3px solid var(--en-focus) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* Navy bands need the light ring: #10648F on navy is 1.7:1, i.e. invisible. */
body.en-body.en-squeeze,
body.en-body .en-topbar,
body.en-body .en-cta-band-wrap,
body.en-body .en-gate-card,
body.en-body .en-legacy-band,
body.en-body .en-next-step-navy {
  --en-focus: var(--en-blue-pale);
  --en-link: var(--en-blue-pale);
}
/* ...but the white cards nested inside those bands go back to the dark pair.
   (.en-footer is white despite the name, so it keeps the defaults.) */
body.en-body .en-topbar .en-capture-card,
body.en-body .en-topbar .en-login-card,
body.en-body .en-topbar .en-squeeze-card,
body.en-body .en-topbar .en-offer-card,
body.en-body.en-squeeze .en-login-card,
body.en-body.en-squeeze .en-squeeze-card {
  --en-focus: #10648F;
  --en-link: var(--en-blue-ink);
}

/* Skip link: off-screen until focused, then a real visible target. */
.en-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #fff; color: var(--en-blue-ink) !important;
  font-family: var(--en-sans); font-weight: 700; font-size: var(--en-t-300);
  padding: 12px 18px; border-radius: 0 0 10px 0; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.en-skip:focus { left: 0; }
/*
 * #en-content is now the <main> landmark (opened in header.php, closed in
 * footer.php) rather than the bare <span tabindex="-1"> it used to be, so
 * height:0 has to go with the span - the element holds the page. Still no ring
 * of its own: it is a landing point, not a control.
 */
/* No display here: <main> is already block, and an ID would outrank the
   layout classes that own these pages (.en-squeeze-main is display:flex,
   and an ID override silently killed its centring). */
#en-content:focus, #en-content:focus-visible { outline: none !important; }

/* Visually hidden, still in the accessibility tree. For labels on fields whose
   only label was a placeholder - a placeholder vanishes on the first keystroke
   and gives voice control nothing to address. */
.en-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.en-container { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.en-narrow { max-width: 900px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ==========================================================================
   Heading baseline
   ==========================================================================
   Every heading that never got a component rule of its own fell through to
   Kadence's defaults, which is how /swipe-library/ ended up with an <h1> at
   32px in Public Sans 700 while every other h1 on the site was Archivo 800,
   and how the site had two different h2 identities.

   Deliberately (0,1,1) specificity and deliberately placed here, near the top:
   every component heading rule below is also (0,1,1) or higher and later in the
   file, so this only ever applies where nothing else has an opinion. It is a
   floor, not an override.

   Sizes come from the scale in :root - h1/h2/h3/h4 are the 900/800/700/600
   steps. A heading is never allowed to be a size that is not on it. */
.en-body h1, .en-body h2, .en-body h3, .en-body h4 {
  font-family: var(--en-display); font-weight: 800; letter-spacing: -.5px;
}
.en-body h1 { font-size: var(--en-t-900); line-height: 1.12; }
.en-body h2 { font-size: var(--en-t-800); line-height: 1.2; }
.en-body h3 { font-size: var(--en-t-700); line-height: 1.25; }
.en-body h4 { font-size: var(--en-t-600); line-height: 1.3; }

/* Step-down utilities, for the handful of headings whose level is right but
   whose weight in the page is not (a run of sub-headings inside a 560px column
   should not be set at the same size as a page title). Templates that used to
   carry `style="font-size:19px"` on an h2 use these instead. */
.en-body .en-h1 { font-size: var(--en-t-900); }
.en-body .en-h2 { font-size: var(--en-t-800); }
.en-body .en-h3 { font-size: var(--en-t-700); }
.en-body .en-h4 { font-size: var(--en-t-600); }

/* ==========================================================================
   Prose measure
   ==========================================================================
   Measured line lengths before this rule: 157 characters in the /watch/ footer,
   138 on the /courses/ fine print, 111 in the footer note on all 20 page types,
   101 on /products/, 87 on the lesson body, 85 on /about/ and /vision/. The
   readable band is 60-75; nothing on the site was inside it except two ledes
   that happened to have a max-width of their own.

   The containers were wide because they are layout containers - .en-narrow is
   900px because it holds cards - so the cap goes on the paragraph, not the box.
   `ch` rather than px so the cap tracks the font size: the same declaration
   holds the measure at 12px in a footer and at 17px in an article. */
.en-body { --en-measure: 60ch; }
.en-body .en-footer-note,
.en-body .en-squeeze-footer-inner p,
.en-body .en-section-fineprint,
.en-body .en-page-wrap .en-article > p,
.en-body .en-page-wrap .en-article > ul,
.en-body .en-page-wrap .en-article > ol,
.en-body .en-lesson-main .en-article p,
.en-body .en-lesson-main .en-archive-transcript p,
.en-body .en-narrow > p,
.en-body .en-fine-print p,
.en-body .en-letter > p,
.en-body .en-letter > ul,
.en-body .en-letter > ol,
.en-body .en-money-optin-sub,
.en-body .en-squeeze-ps {
  max-width: var(--en-measure);
}
/* Centred blocks keep their centring; the cap must not left-align them.
   .en-section-fineprint is deliberately not in this list - it sits under a
   left-aligned card grid, so an auto-centred column would be the only thing on
   that page not starting at the grid edge. */
.en-body .en-footer-note,
.en-body .en-squeeze-footer-inner p { margin-left: auto; margin-right: auto; }

/* The one support affordance on /checkout/, where the help launcher is
   deliberately suppressed. Quiet on purpose - a link, not a widget. */
.en-checkout-help {
  max-width: 520px; margin: 14px auto 0; text-align: center;
  font-size: var(--en-t-200); color: var(--en-muted);
}

/* Field hint: a visible description sitting under an input, referenced by
   aria-describedby so it is read as part of the field and not as loose text. */
.en-field-hint {
  display: block; margin: -4px 0 4px; font-size: var(--en-t-100);
  line-height: 1.5; color: var(--en-muted);
}

/* ==========================================================================
   Header
   ========================================================================== */
.en-topbar { background: var(--en-navy); }
/*
 * The masthead strip. header.php splits the navy band into two stacked
 * .en-topbar boxes so <main> can open between the nav and the page content
 * (see the comment there). Both keep the .en-topbar class so every other rule
 * in this file still matches, but the per-template radial glows below are
 * written for one tall band: applied to a ~72px masthead they paint a second,
 * much brighter copy of the glow across the nav and leave a visible seam at the
 * join. Specificity here (0,3,1) beats every `body.x .en-topbar` glow rule
 * regardless of source order. The band keeps its glow; the strip is flat navy,
 * which is what the top ~72px of the old single band rendered as anyway.
 */
body.en-body .en-topbar.en-topbar-chrome { background: var(--en-navy); }
/* The hero glow lives on the full-width band, not the inner container —
   otherwise wide screens show a lighter boxed seam inside the navy. */
body.home .en-topbar {
  background: radial-gradient(900px 480px at 22% 30%, rgba(27, 155, 224, .18), transparent 62%) var(--en-navy);
}
body.blog .en-topbar,
body.archive .en-topbar {
  background: radial-gradient(800px 420px at 22% 45%, rgba(27, 155, 224, .16), transparent 62%) var(--en-navy);
}
.en-header {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
}
.en-wordmark {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--en-display); font-weight: 800;
  font-size: var(--en-t-700); letter-spacing: .5px; color: #fff !important;
}
.en-wordmark img { height: 27px; margin: 0 1px 0 2px; position: relative; top: 1px; width: auto; }
.en-wordmark .en-wordmark-network {
  font-weight: 500; color: var(--en-on-navy-muted); margin-left: 9px; letter-spacing: 5px;
}
.en-nav { display: flex; align-items: center; gap: 30px; font-size: var(--en-t-200); font-weight: 600; }
.en-nav a { color: var(--en-on-navy); }
.en-nav a:hover { color: #fff; }
.en-nav a.en-nav-active { color: #fff; }
.en-nav .en-nav-login {
  display: inline-block; padding: 10px 22px; border-radius: 10px;
  /* White on --en-blue is 3.08:1; on --en-blue-deep it is 4.64:1. */
  background: var(--en-blue-deep); color: #fff !important; font-weight: 700;
}
.en-nav .en-nav-login:hover { background: var(--en-blue-ink); }
.en-nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.en-nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
/*
 * One button, three sizes.
 *
 * .en-btn reads --en-btn-fs / --en-btn-pad / --en-btn-r rather than hard
 * values, so a context that needs a smaller or larger button sets those three
 * variables and inherits everything else. The size modifiers are the only
 * things allowed to change them.
 *
 *   .en-btn-sm   13.5px / 12px 20px   inline CTAs inside prose and cards
 *   .en-btn      15px   / 14px 22px   default
 *   .en-btn-lg   17px   / 16px 30px   the one decision on a page
 */
.en-btn {
  display: inline-block; background: var(--en-grad); border-radius: var(--en-btn-r);
  padding: var(--en-btn-pad); font-size: var(--en-btn-fs); font-weight: 800; color: #fff !important;
  border: 0; cursor: pointer; font-family: var(--en-sans); line-height: 1.2;
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.en-btn-sm { --en-btn-fs: var(--en-t-200); --en-btn-pad: 12px 20px; }
/*
 * The partner share band is rendered by en-core/includes/partners.php, which
 * this theme does not own and which writes its own <style> block: radius 10 and
 * 13.5px already match the small button, but the padding (10x14) and weight
 * (700) do not, so the single most-repeated CTA in the network counted as its
 * own button signature on every page it appears on - which is the main site and
 * the foot of all 3,237 member blogs. Geometry only; the colours in that block
 * are correct and are left alone. The same two lines are in en-vault/style.css
 * so the band matches on both sides of the network.
 */
.en-body .en-partner-share .en-btn,
.en-body .en-partner-share .en-btn-ghost,
.en-body .en-partner-share-copy,
.en-body .en-partner-share-join { padding: 12px 20px; font-weight: 800; }
.en-btn-lg { --en-btn-fs: var(--en-t-400); --en-btn-pad: 16px 30px; box-shadow: var(--en-cta-shadow); }
.en-btn:hover { filter: brightness(1.06); }
.en-btn:active { transform: translateY(1px); }

/* ==========================================================================
   Front page — hero
   ========================================================================== */
.en-hero {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px;
  padding: 64px 32px 76px;
}
.en-hero-copy { padding-top: 10px; }
.en-hero h1 {
  font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-1000);
  line-height: 1.1; letter-spacing: -1px; margin: 0 0 22px; color: #fff;
}
.en-hero h1 .en-accent { color: var(--en-blue-light); }
.en-hero-sub { font-size: var(--en-t-400); line-height: 1.7; color: var(--en-on-navy); max-width: 500px; margin: 0 0 34px; }
.en-hero-actions { display: flex; gap: 16px; align-items: center; }
.en-hero-alt { font-size: var(--en-t-300); font-weight: 700; color: var(--en-blue-light) !important; }
.en-hero-proof {
  display: flex; gap: 28px; margin-top: 44px; padding-top: 24px;
  border-top: 1px solid var(--en-border-navy); flex-wrap: wrap;
}
.en-hero-proof span { font-size: var(--en-t-200); color: var(--en-on-navy-muted); font-weight: 600; }

.en-capture-card {
  background: #fff; border-radius: 16px; padding: 32px 32px 28px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4); align-self: center;
}
.en-capture-card-title { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-600); margin-bottom: 6px; color: var(--en-ink); }
.en-capture-card-sub { font-size: var(--en-t-200); line-height: 1.55; color: var(--en-muted); margin-bottom: 18px; }
.en-capture-form { display: flex; gap: 10px; margin-top: 18px; }
.en-capture-form input[type="email"] {
  flex: 1; min-width: 0; background: var(--en-tint-gray);
  border: 1px solid var(--en-border-strong); border-radius: 10px;
  padding: 14px 16px; color: var(--en-ink); font-size: var(--en-t-300); font-family: var(--en-sans); outline: none;
}
.en-capture-form .en-btn { flex: none; }
.en-capture-privacy { margin-top: 12px; font-size: var(--en-t-100); color: var(--en-faint); text-align: center; }

/* Video placeholder slot (until real thumbnails exist) */
.en-video-slot {
  display: grid; place-items: center; width: 100%;
  background: linear-gradient(135deg, #0C2233, #123950); border-radius: 10px; position: relative;
}
.en-video-slot::after {
  content: ""; width: 62px; height: 62px; border-radius: 50%;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .92) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230C2233'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.en-video-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Video teaser: photo poster + hover motion + click-to-form message */
.en-video-teaser { overflow: hidden; cursor: pointer; }
.en-video-teaser img {
  transition: transform .6s cubic-bezier(.2, .7, .3, 1), filter .4s ease;
  filter: brightness(.8) saturate(1.05);
}
.en-video-teaser:hover img, .en-video-teaser:focus-visible img { transform: scale(1.055); filter: brightness(.85) saturate(1.1); }
.en-video-teaser::after { transition: transform .35s ease, box-shadow .35s ease; z-index: 2; }
.en-video-teaser:hover::after { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); }
/* Wide variant: David sits right of frame, so the play button moves into the
   blue space he's looking at. */
.en-video-teaser-wide::after { left: 30%; }
.en-video-teaser-wide img { object-position: center 22%; }
.en-video-teaser-msg {
  position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px);
  width: calc(100% - 28px); max-width: 460px; box-sizing: border-box;
  background: rgba(12, 34, 51, .95); border: 1px solid rgba(61, 180, 232, .45);
  color: #fff; font-size: var(--en-t-200); font-weight: 600; line-height: 1.45; text-align: center;
  padding: 11px 16px; border-radius: 10px; opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease; z-index: 3;
}
.en-video-teaser.en-teaser-active .en-video-teaser-msg { opacity: 1; transform: translate(-50%, 0); }
.en-video-slot { position: relative; }
@keyframes en-form-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 155, 224, 0); }
  40% { box-shadow: 0 0 0 5px rgba(27, 155, 224, .35); }
}
.en-form-pulse input[type="email"] { animation: en-form-pulse 1.1s ease 2; border-color: var(--en-blue) !important; }

/* ==========================================================================
   Front page — how it works / latest / FAQ / CTA band
   ========================================================================== */
.en-how { border-bottom: 1px solid rgba(14, 42, 60, .08); }
.en-how-grid { max-width: 1240px; margin: 0 auto; padding: 56px 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.en-how-item { display: flex; flex-direction: column; gap: 10px; }
.en-how-num { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); color: var(--en-blue); }
.en-how-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); }
.en-how-text { font-size: var(--en-t-300); line-height: 1.65; color: var(--en-muted); }

.en-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; }
.en-section-head h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); letter-spacing: -.5px; margin: 0; }
.en-section-head a { font-size: var(--en-t-200); font-weight: 700; }

.en-latest { padding: 60px 0 70px; }
.en-latest-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }

.en-card {
  border: 1px solid var(--en-border); border-radius: 16px; overflow: hidden;
  box-shadow: var(--en-card-shadow); color: var(--en-ink) !important; display: block; background: #fff;
}
.en-card-media { width: 100%; height: 280px; object-fit: cover; display: block; }
.en-card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; }
/* --en-blue (#1B9BE0) is 3.08:1 on white: fine as a fill, not as small text.
   Every kicker on the site is 11.5-12px, so it takes the ink blue (6.48:1). */
.en-kicker { font-size: var(--en-t-100); color: var(--en-blue-ink); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.en-card-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-700); line-height: 1.25; color: var(--en-ink); }
.en-card-excerpt { font-size: var(--en-t-300); line-height: 1.6; color: var(--en-muted); }
.en-card-meta { font-size: var(--en-t-200); color: var(--en-faint); }

.en-minis { display: flex; flex-direction: column; gap: 18px; }
.en-mini {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px;
  border: 1px solid var(--en-border); border-radius: 14px; color: var(--en-ink) !important; background: #fff;
}
.en-mini .en-kicker { font-size: var(--en-t-100); }
.en-mini-title { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-400); line-height: 1.3; }
.en-mini-date { font-size: var(--en-t-100); color: var(--en-faint); }

.en-faq-band { background: var(--en-tint); border-top: 1px solid rgba(14, 42, 60, .08); border-bottom: 1px solid rgba(14, 42, 60, .08); }
.en-faq { padding: 56px 32px; }
.en-faq h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-700); letter-spacing: -.5px; margin: 0 0 28px; }
.en-faq-list { display: flex; flex-direction: column; gap: 22px; }
.en-faq-item { display: flex; flex-direction: column; gap: 6px; }
.en-faq-q { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-400); }
.en-faq-a { font-size: var(--en-t-300); line-height: 1.7; color: var(--en-muted); }
.en-faq-a a { font-weight: 700; }

.en-cta-band-wrap { max-width: 1240px; margin: 44px auto 64px; padding: 0 32px; }
.en-cta-band {
  background: var(--en-navy); border-radius: 18px; padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.en-cta-band-copy { display: flex; flex-direction: column; gap: 6px; }
.en-cta-band-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-700); color: #fff; }
.en-cta-band-sub { font-size: var(--en-t-300); color: var(--en-on-navy); }
.en-cta-band .en-btn-lg { flex: none; box-shadow: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.en-footer { border-top: 1px solid var(--en-border); background: #fff; }
.en-footer-inner {
  max-width: 1240px; margin: 0 auto; padding: 30px 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--en-t-200); color: var(--en-faint); flex-wrap: wrap; gap: 12px;
}
.en-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.en-footer-links a { color: var(--en-muted); }

/* ==========================================================================
   Blog index
   ========================================================================== */
.en-blog-band {
  max-width: 1240px; margin: 0 auto; padding: 52px 32px 56px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.en-eyebrow { font-size: var(--en-t-100); letter-spacing: 3px; color: var(--en-blue-light); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.en-blog-band h1 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-900); line-height: 1.08; letter-spacing: -1px; margin: 0; color: #fff; }
.en-blog-band h1 .en-accent { color: var(--en-blue-light); }
.en-blog-subscribe { display: flex; gap: 10px; padding-bottom: 4px; }
.en-blog-subscribe input[type="email"] {
  width: 280px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px; padding: 13px 16px; color: #fff; font-size: var(--en-t-200); font-family: var(--en-sans); outline: none;
}
.en-blog-subscribe .en-btn { --en-btn-fs: var(--en-t-200); --en-btn-pad: 12px 20px; }

.en-chips-bar { border-bottom: 1px solid var(--en-border); background: #fff; }
.en-chips { max-width: 1240px; margin: 0 auto; padding: 14px 32px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.en-chip-link { padding: 8px 16px; border-radius: 999px; background: var(--en-chip); color: var(--en-chip-text) !important; font-size: var(--en-t-200); font-weight: 600; }
.en-chip-link:hover { background: #E4EDF3; }
.en-chip-active { background: var(--en-navy) !important; color: #fff !important; font-weight: 700; }

.en-feat-wrap { max-width: 1240px; margin: 0 auto; padding: 40px 32px 24px; }
.en-feat {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 0;
  border: 1px solid var(--en-border); border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 20px rgba(14, 42, 60, .07); color: var(--en-ink) !important;
}
.en-feat-media { width: 100%; height: 360px; object-fit: cover; display: block; }
.en-feat-body { padding: 38px 40px; display: flex; flex-direction: column; gap: 13px; justify-content: center; }
.en-feat-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); line-height: 1.2; }
.en-feat-excerpt { font-size: var(--en-t-300); line-height: 1.65; color: var(--en-muted); }

.en-index-grid { max-width: 1240px; margin: 0 auto; padding: 16px 32px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.en-grid-card { border: 1px solid var(--en-border); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(14, 42, 60, .05); color: var(--en-ink) !important; display: block; background: #fff; }
.en-grid-card-media { width: 100%; height: 180px; object-fit: cover; display: block; }
.en-grid-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.en-grid-card .en-kicker { font-size: var(--en-t-100); }
.en-grid-card-title { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-500); line-height: 1.3; }
.en-grid-card-excerpt { font-size: var(--en-t-200); line-height: 1.55; color: var(--en-muted); }
.en-grid-card-meta { font-size: var(--en-t-100); color: var(--en-faint); }
.en-grid-card-textonly { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; border-radius: 14px; }

.en-pagination { max-width: 1240px; margin: 0 auto; padding: 0 32px 48px; display: flex; justify-content: center; gap: 8px; }
.en-pagination .page-numbers {
  min-width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--en-border-strong);
  color: var(--en-chip-text); display: grid; place-items: center; font-size: var(--en-t-200); font-weight: 600; padding: 0 12px;
}
.en-pagination .page-numbers.current { background: var(--en-navy); color: #fff; border-color: var(--en-navy); font-weight: 700; }
.en-pagination .page-numbers:hover:not(.current) { border-color: var(--en-blue); color: var(--en-blue); }

/* ==========================================================================
   Single post
   ========================================================================== */
.en-post-layout { max-width: 1240px; margin: 0 auto; padding: 44px 32px 64px; display: grid; grid-template-columns: 1fr 340px; gap: 52px; }
.en-crumbs { display: flex; gap: 8px; align-items: center; font-size: var(--en-t-200); color: var(--en-faint); flex-wrap: wrap; }
.en-crumbs a { color: var(--en-faint) !important; }
.en-crumbs a:hover { color: var(--en-blue) !important; }

.en-post-head { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.en-post-head h1 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-900); line-height: 1.12; letter-spacing: -1px; margin: 0; }
.en-byline { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.en-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--en-navy); color: var(--en-blue-light);
  display: grid; place-items: center; font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-400); flex: none;
}
.en-byline-meta { display: flex; flex-direction: column; gap: 1px; }
.en-byline-name { font-size: var(--en-t-200); font-weight: 700; }
.en-byline-date { font-size: var(--en-t-100); color: var(--en-faint); }

.en-post-hero { margin: 26px 0 30px; }
.en-post-hero img, .en-post-hero .en-video-slot { width: 100%; height: 400px; object-fit: cover; border-radius: 14px; display: block; }

.en-article { max-width: 720px; font-size: var(--en-t-400); line-height: 1.75; color: var(--en-body-c); }
.en-article > p { margin: 0 0 22px; }
.en-article h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-700); letter-spacing: -.5px; margin: 32px 0 16px; color: var(--en-ink); }
.en-article h3 { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-600); margin: 28px 0 14px; color: var(--en-ink); }
.en-article ul, .en-article ol { margin: 0 0 22px; padding-left: 26px; }
.en-article li { margin-bottom: 8px; }
.en-article img { max-width: 100%; height: auto; border-radius: 12px; }
.en-article blockquote {
  margin: 6px 0 22px; padding: 22px 26px; border-left: 4px solid var(--en-blue);
  background: var(--en-tint-blue); border-radius: 0 12px 12px 0;
  font-size: var(--en-t-400); line-height: 1.6; font-weight: 600; color: var(--en-navy);
}
.en-article blockquote p { margin: 0; }

.en-inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; background: var(--en-tint-blue); border-radius: 14px; margin: 6px 0 22px;
}
.en-inline-cta-text { font-size: var(--en-t-300); line-height: 1.5; color: var(--en-navy); font-weight: 600; }
.en-inline-cta .en-btn { flex: none; --en-btn-fs: var(--en-t-200); --en-btn-pad: 12px 20px; }

.en-author-box {
  max-width: 720px; margin-top: 38px; padding: 26px 28px; border: 1px solid var(--en-border);
  border-radius: 16px; display: flex; gap: 20px; align-items: flex-start; background: #FBFDFE;
}
.en-author-box .en-avatar { width: 64px; height: 64px; font-size: var(--en-t-600); }
.en-author-box-name { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-400); }
.en-author-box-bio { font-size: var(--en-t-200); line-height: 1.65; color: var(--en-muted); margin-top: 6px; }

.en-keep-reading { max-width: 720px; margin-top: 34px; }
.en-keep-reading-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-400); margin-bottom: 14px; }
.en-keep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.en-keep-card { padding: 16px 18px; border: 1px solid var(--en-border); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; color: var(--en-ink) !important; }
.en-keep-card .en-kicker { font-size: var(--en-t-100); font-weight: 800; }
.en-keep-card-title { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-300); }

.en-prevnext { max-width: 720px; margin-top: 26px; display: flex; justify-content: space-between; gap: 16px; }
.en-prevnext a { flex: 1; padding: 18px 20px; border: 1px solid var(--en-border); border-radius: 12px; display: flex; flex-direction: column; gap: 5px; color: var(--en-ink) !important; }
.en-prevnext a.en-next { text-align: right; }
.en-prevnext-label { font-size: var(--en-t-100); color: var(--en-faint); font-weight: 600; }
.en-prevnext-title { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-300); }

.en-sidebar { display: flex; flex-direction: column; gap: 24px; }
.en-sidebar-optin { background: var(--en-navy); border-radius: 16px; padding: 26px 26px 24px; position: sticky; top: 20px; }
.en-sidebar-optin .en-eyebrow { font-size: var(--en-t-100); letter-spacing: 2.5px; margin-bottom: 8px; }
.en-sidebar-optin-title { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-500); line-height: 1.3; color: #fff; margin-bottom: 14px; }
.en-sidebar-optin .en-video-slot { height: 150px; border-radius: 10px; }
.en-sidebar-optin input[type="email"] {
  width: 100%; box-sizing: border-box; margin-top: 14px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 9px; padding: 12px 14px;
  color: #fff; font-size: var(--en-t-200); font-family: var(--en-sans); outline: none;
}
.en-sidebar-optin .en-btn { display: block; margin-top: 10px; text-align: center; width: 100%; box-sizing: border-box; }
.en-sidebar-optin-privacy { margin-top: 10px; text-align: center; font-size: var(--en-t-100); color: var(--en-on-navy-muted); }

.en-sidebar-card { border: 1px solid var(--en-border); border-radius: 16px; padding: 22px 24px; background: #fff; }
.en-sidebar-card-title { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-400); margin-bottom: 14px; }
.en-sidebar-recent { display: flex; flex-direction: column; gap: 12px; }
.en-sidebar-recent a { font-size: var(--en-t-200); font-weight: 600; line-height: 1.4; color: var(--en-body-c) !important; }
.en-sidebar-recent a:hover { color: var(--en-blue) !important; }
.en-sidebar-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.en-sidebar-cats a { padding: 7px 14px; border-radius: 999px; background: var(--en-chip); color: var(--en-chip-text) !important; font-size: var(--en-t-100); font-weight: 600; }

/* ==========================================================================
   Current projects (sidebar card + footer row)
   ========================================================================== */
.en-projects-list { display: flex; flex-direction: column; gap: 14px; }
.en-projects-list a { display: flex; flex-direction: column; gap: 3px; }
.en-project-name { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-300); color: var(--en-blue); }
.en-projects-list a:hover .en-project-name { color: var(--en-blue-deep); }
.en-project-tagline { font-size: var(--en-t-100); line-height: 1.5; color: var(--en-muted); }
.en-projects-disclosure { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--en-border); font-size: var(--en-t-100); line-height: 1.5; color: var(--en-faint); }

.en-footer-projects {
  max-width: 1240px; margin: 0 auto; padding: 22px 32px 0;
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; font-size: var(--en-t-200);
}
.en-footer-projects-label { font-weight: 700; color: var(--en-muted); }
.en-footer-projects a { color: var(--en-blue); font-weight: 600; }
.en-footer-projects-note { font-size: var(--en-t-100); color: var(--en-faint); }

/* ==========================================================================
   Comments
   ========================================================================== */
.en-comments { max-width: 720px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--en-border); }
.en-comments-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); margin-bottom: 20px; }
.en-comment-list { list-style: none; margin: 0 0 10px; padding: 0; }
.en-comment-list .children { list-style: none; margin: 14px 0 0 30px; padding: 0; }
.en-comment { padding: 18px 0; border-bottom: 1px solid rgba(14, 42, 60, .07); }
.en-comment-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.en-comment-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.en-comment-author { display: block; font-size: var(--en-t-200); font-weight: 700; color: var(--en-ink); }
.en-comment-date { display: block; font-size: var(--en-t-100); color: var(--en-faint); }
.en-comment-body { font-size: var(--en-t-300); line-height: 1.65; color: var(--en-body-c); }
.en-comment-body p { margin: 0 0 10px; }
.en-comment-pending { font-size: var(--en-t-100); color: var(--en-blue-deep); font-weight: 600; }
.en-comment-reply a { font-size: var(--en-t-200); font-weight: 700; }
.en-comments-closed { font-size: var(--en-t-200); color: var(--en-muted); }
.en-comment-form { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 0 16px; }
.en-comment-form .en-cf-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; flex: 1 1 100%; }
.en-comment-form .en-cf-half { flex: 1 1 calc(50% - 8px); }
.en-comment-form label { font-size: var(--en-t-200); font-weight: 700; color: var(--en-muted); }
.en-comment-form input, .en-comment-form textarea {
  background: var(--en-tint-gray); border: 1px solid var(--en-border-strong); border-radius: 10px;
  padding: 13px 14px; color: var(--en-ink); font-size: var(--en-t-300); font-family: var(--en-sans); outline: none; width: 100%; box-sizing: border-box;
}
.en-comment-form .form-submit { flex: 1 1 100%; margin: 4px 0 0; }
.en-comment-form .comment-form-cookies-consent { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; font-size: var(--en-t-200); color: var(--en-muted); margin: 0 0 12px; }

/* ==========================================================================
   Watch (squeeze) page
   ========================================================================== */
body.en-squeeze { background: var(--en-navy); color: #fff; }
body.en-squeeze a { color: var(--en-blue-light); }
body.en-squeeze a:hover { color: var(--en-blue-pale); }
.en-squeeze-page { min-height: 100vh; display: flex; flex-direction: column; }
.en-squeeze-rule { height: 4px; background: linear-gradient(90deg, #1B9BE0, #3DB4E8, #1B9BE0); }
.en-squeeze-main {
  flex: 1; display: flex; flex-direction: column; align-items: center; padding: 44px 32px 40px;
  background: radial-gradient(900px 500px at 50% -10%, rgba(27, 155, 224, .22), transparent 65%);
}
.en-squeeze-main .en-wordmark { font-size: var(--en-t-600); }
.en-squeeze-main .en-wordmark img { height: 24px; }
.en-squeeze-head { margin-top: 44px; text-align: center; max-width: 820px; }
.en-badge {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  border: 1px solid rgba(61, 180, 232, .4); background: rgba(27, 155, 224, .12);
  /* 12.5px over the squeeze glow: --en-blue-light measured 4.13:1 there,
     --en-blue-pale is 5.67:1. */
  color: var(--en-blue-pale); font-size: var(--en-t-100); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.en-squeeze-head h1 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-900); line-height: 1.12; letter-spacing: -1px; margin: 24px 0 18px; color: #fff; }
.en-squeeze-head h1 .en-accent { color: var(--en-blue-light); }
.en-squeeze-sub { font-size: var(--en-t-400); line-height: 1.65; color: var(--en-on-navy); max-width: 620px; margin: 0 auto; }

.en-squeeze-card { margin-top: 36px; width: 100%; max-width: 760px; background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); box-sizing: border-box; }
.en-squeeze-card .en-video-slot { height: 410px; border-radius: 10px; }
.en-squeeze-form { display: flex; gap: 12px; padding: 18px 10px 10px; }
.en-squeeze-form input[type="email"] {
  flex: 1; min-width: 0; background: var(--en-tint-gray); border: 1px solid var(--en-border-strong);
  border-radius: 12px; padding: 16px 18px; color: var(--en-ink); font-size: var(--en-t-300); font-family: var(--en-sans); outline: none;
}
.en-squeeze-form .en-btn { --en-btn-fs: var(--en-t-400); --en-btn-pad: 16px 30px; box-shadow: 0 10px 24px rgba(27, 155, 224, .35); }

.en-squeeze-trust { margin-top: 22px; display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.en-squeeze-trust span { font-size: var(--en-t-200); color: var(--en-on-navy-muted); font-weight: 600; }

.en-squeeze-bullets { margin-top: 44px; width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.en-squeeze-bullets-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); color: #fff; text-align: center; }
.en-bullet {
  display: flex; gap: 14px; align-items: flex-start; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 16px 20px;
}
/* 4.22:1 over the glow on --en-blue-light; --en-blue-pale is 5.83:1. */
.en-bullet-num { color: var(--en-blue-pale); font-weight: 800; flex: none; }
.en-bullet-text { font-size: var(--en-t-300); line-height: 1.6; color: var(--en-on-navy-body); }
.en-squeeze-bullets .en-btn { align-self: center; margin-top: 10px; --en-btn-fs: var(--en-t-400); --en-btn-pad: 16px 30px; box-shadow: 0 10px 24px rgba(27, 155, 224, .35); }
.en-squeeze-ps { margin: 14px auto 0; max-width: 560px; text-align: center; font-size: var(--en-t-200); line-height: 1.7; color: var(--en-on-navy-muted); }
.en-squeeze-ps strong { color: var(--en-on-navy-body); }

.en-squeeze-footer { border-top: 1px solid rgba(255, 255, 255, .1); padding: 24px 32px; }
.en-squeeze-footer-inner { max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 10px; }
/* #5F7A8C on navy is 3.60:1 at 11.5-12px. */
.en-squeeze-footer p { margin: 0; font-size: var(--en-t-100); line-height: 1.6; color: var(--en-on-navy-muted); }
.en-squeeze-footer span { font-size: var(--en-t-100); color: var(--en-on-navy-muted); }

/* ==========================================================================
   Products page
   ========================================================================== */
.en-prod-band { max-width: 1240px; margin: 0 auto; padding: 52px 32px 60px; text-align: center; }
body.page-template-template-products .en-topbar {
  background: radial-gradient(800px 420px at 50% 40%, rgba(27, 155, 224, .16), transparent 62%) var(--en-navy);
}
.en-prod-band h1 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-900); line-height: 1.08; letter-spacing: -1px; margin: 0 0 16px; color: #fff; }
.en-prod-band h1 .en-accent { color: var(--en-blue-light); }
.en-prod-band p { font-size: var(--en-t-400); line-height: 1.65; color: var(--en-on-navy); max-width: 560px; margin: 0 auto; }

.en-prod-grid { max-width: 1240px; margin: 0 auto; padding: 56px 32px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.en-prod-card {
  border: 1px solid rgba(14, 42, 60, .12); border-radius: 18px; padding: 34px 32px;
  display: flex; flex-direction: column; gap: 14px; background: #fff;
  /*
   * .en-prod-flag is `position:absolute; top:-13px` and only .en-prod-card-popular
   * was positioned, so the flags on the two ordinary cards ("FREE ON-RAMP",
   * "COMING WITH THE RELAUNCH") resolved against the initial containing block:
   * probed offsetParent BODY, top:-13px, i.e. pinned to the top of the document
   * and clipped in half under the masthead. Positioning the base card is the
   * fix; .en-prod-card-popular already carried it for the same reason.
   */
  position: relative;
}
.en-prod-card-popular { border: 2px solid var(--en-blue); box-shadow: 0 16px 40px rgba(27, 155, 224, .15); position: relative; }
.en-prod-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  /* White on --en-blue is 3.08:1; on --en-blue-deep it is 4.64:1. */
  background: var(--en-blue-deep); color: #fff; font-size: var(--en-t-100); font-weight: 800;
  letter-spacing: 1.5px; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.en-prod-cover { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; display: block; }
.en-prod-kicker { font-size: var(--en-t-100); color: var(--en-blue-ink); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.en-prod-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600); }
.en-prod-desc { font-size: var(--en-t-300); line-height: 1.65; color: var(--en-muted); }
.en-prod-checks { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 10px; font-size: var(--en-t-200); color: var(--en-body-c); }
.en-prod-price { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.en-prod-price-num { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); }
.en-prod-price-term { font-size: var(--en-t-200); color: var(--en-faint); }
.en-prod-card .en-btn { text-align: center; }
.en-btn-navy { background: var(--en-navy); }

.en-fine-print { max-width: 1240px; margin: 0 auto; padding: 28px 32px 56px; text-align: center; }
.en-fine-print p { margin: 0 auto; max-width: 640px; font-size: var(--en-t-200); line-height: 1.7; color: var(--en-faint); }

/* ==========================================================================
   Courses library page
   ========================================================================== */
body.page-template-template-courses .en-topbar {
  background: radial-gradient(800px 420px at 22% 45%, rgba(27, 155, 224, .16), transparent 62%) var(--en-navy);
}
/*
 * The page-header band, centred.
 *
 * Thirteen templates open with this band and every one of them rendered as a
 * left column of text with roughly half of a 1240px navy field empty beside it:
 * measured on /courses/, an 820px h1 and a 600px lede inside a 1240px
 * container, with 420px of nothing to the right of both and nothing intended to
 * go there. That reads as a layout waiting for an image that never arrived.
 *
 * The fix is the composition, not more content. /products/ - one of the two
 * templates the audit rated as genuinely finished - already centres its band
 * (.en-prod-band p is `max-width: 560px; margin: 0 auto`), and the pages below
 * these bands are centred columns too: the checkout card, the letter bands, the
 * login cards. The band was the only left-aligned thing on its own page.
 *
 * Centring it costs no markup, applies to all thirteen at once, and is a single
 * declaration to revert. The measures are tightened at the same time so the h1
 * and the lede share an axis instead of ending 220px apart.
 */
.en-courses-band { max-width: 1240px; margin: 0 auto; padding: 56px 32px 64px; text-align: center; }
/*
 * `text-wrap: balance` on the display type. Centred headings are where a widow
 * shows: /courses/ broke as "...built the network. Yours for" / "good.", one
 * word on its own line under a 900px measure. Balancing distributes the lines
 * instead, and it is per-heading rather than a max-width guess that only works
 * for one string. Browsers that do not support it fall back to normal wrapping,
 * which is where the site is today.
 */
.en-courses-band h1,
.en-courses-lede,
.en-hero h1,
.en-prod-band h1,
.en-squeeze-head h1,
.en-page-wrap h1,
.en-letter .en-letter-headline,
.en-section-head h2 { text-wrap: balance; }
.en-courses-band h1 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-900); line-height: 1.08; letter-spacing: -1px; margin: 0 auto 16px; color: #fff; max-width: 900px; }
.en-courses-band h1 .en-accent { color: var(--en-blue-light); }
.en-courses-band .en-badge { margin-bottom: 18px; }
.en-courses-lede { font-size: var(--en-t-400); line-height: 1.7; color: var(--en-on-navy); max-width: var(--en-measure); margin: 0 auto 14px; }
.en-courses-why { font-size: var(--en-t-200); line-height: 1.6; color: var(--en-on-navy-muted); max-width: 600px; margin: 0 0 26px; }
.en-courses-why strong { color: var(--en-on-navy-body); }

.en-course-section { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.en-course-section-first { padding-top: 56px; }
.en-section-title-row { display: flex; align-items: center; gap: 12px; margin: 52px 0 8px; }
.en-section-title-row:first-child, .en-course-section-first .en-section-title-row { margin-top: 0; }
.en-section-title-row h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); letter-spacing: -.5px; margin: 0; }
/* "SINCE 2011". White on --en-blue (#1B9BE0) measured 3.08:1 on rendered
   pixels; at 11px it needs 4.5. --en-blue-deep is the same fill the sibling
   .en-prod-flag pill already uses for exactly this reason: 4.64:1. */
.en-pill-core { font-size: var(--en-t-100); font-weight: 800; letter-spacing: 1.5px; color: #fff; background: var(--en-blue-deep); padding: 5px 12px; border-radius: 999px; }
.en-section-sub { font-size: var(--en-t-300); color: var(--en-muted); margin: 0 0 30px; max-width: 620px; }

.en-course-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.en-course-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.en-course-card {
  border: 1px solid var(--en-border); border-radius: 18px; overflow: hidden;
  box-shadow: var(--en-card-shadow); color: var(--en-ink) !important; display: block; background: #fff;
}
/* contain, not cover: these are product mockups (box + devices + workbooks), so
   cropping to fill slices the composition — the retail box on the right edge was
   being cut in half. The card is already #fff, so contain reads as a product on
   a light plate. */
.en-course-cover { width: 100%; object-fit: contain; display: block; background: #fff; padding: 14px; }
.en-course-card-body { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.en-course-grid-2 .en-course-card-body { padding: 24px 26px 28px; gap: 10px; }
.en-vol { font-size: var(--en-t-100); font-weight: 800; letter-spacing: 1px; color: var(--en-blue-deep); text-transform: uppercase; }
.en-course-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); }
.en-course-grid-2 .en-course-title { font-size: var(--en-t-600); }
.en-course-desc { font-size: var(--en-t-200); line-height: 1.6; color: var(--en-muted); }
.en-course-grid-2 .en-course-desc { font-size: var(--en-t-300); }
.en-course-meta { font-size: var(--en-t-200); color: var(--en-faint); }
.en-tag-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.en-tag-free { font-size: var(--en-t-100); font-weight: 800; letter-spacing: 1px; color: var(--en-blue-deep); background: rgba(27, 155, 224, .12); padding: 5px 12px; border-radius: 999px; }
.en-tag-buy { font-size: var(--en-t-100); font-weight: 800; letter-spacing: 1px; color: var(--en-chip-text); background: #EFF3F6; padding: 5px 12px; border-radius: 999px; }

.en-vault-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.en-vault-card { border: 1px solid var(--en-border); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; color: var(--en-ink) !important; background: #fff; }
.en-vault-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-400); }
.en-vault-desc { font-size: var(--en-t-200); line-height: 1.55; color: var(--en-muted); }

.en-event-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.en-event-card { border: 1px solid var(--en-border); border-radius: 14px; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; color: var(--en-ink) !important; background: var(--en-tint); }
.en-event-year { align-self: flex-start; font-size: var(--en-t-100); font-weight: 800; letter-spacing: 1px; color: var(--en-chip-text); background: #E4EDF3; padding: 4px 10px; border-radius: 999px; }
.en-event-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-300); line-height: 1.3; }

/* ==========================================================================
   Login page
   ========================================================================== */
.en-login-card {
  margin-top: 52px; width: 420px; max-width: 100%; box-sizing: border-box; background: #fff;
  border-radius: 18px; padding: 38px 38px 34px; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); color: var(--en-ink);
}
/*
 * /checkout/ and /partners/ scrolled 51px sideways at 390px. Both widen this
 * card with an inline `max-width:520px` / `560px`, and an inline declaration
 * beats the `max-width:100%` guard above, so `width:420px` stood at a viewport
 * that only had 350px of content box. !important against an inline style is
 * ugly; the alternative was editing two templates that other work is in flight
 * on, and this also catches any future card that repeats the pattern. Confined
 * to small screens so the deliberate wider desktop card is untouched.
 */
@media (max-width: 640px) {
  .en-login-card { max-width: 100% !important; }
}
.en-login-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); letter-spacing: -.5px; text-align: center; }
.en-login-sub { margin-top: 8px; font-size: var(--en-t-200); line-height: 1.6; color: var(--en-muted); text-align: center; }
.en-login-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.en-login-fields input[type="text"], .en-login-fields input[type="password"] {
  background: var(--en-tint-gray); border: 1px solid var(--en-border-strong); border-radius: 10px;
  padding: 15px 16px; color: var(--en-ink); font-size: var(--en-t-300); font-family: var(--en-sans); outline: none; width: 100%; box-sizing: border-box;
}
.en-login-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.en-login-remember { display: flex; align-items: center; gap: 7px; font-size: var(--en-t-200); color: var(--en-muted); }
.en-login-remember input { accent-color: var(--en-blue); }
/* --en-blue is 3.08:1 on this white card; --en-blue-ink is 6.48:1. */
.en-login-forgot { font-size: var(--en-t-200); font-weight: 600; color: var(--en-blue-ink) !important; }
.en-login-card .en-btn { display: block; width: 100%; box-sizing: border-box; margin-top: 20px; --en-btn-fs: var(--en-t-400); --en-btn-pad: 16px 30px; text-align: center; box-shadow: 0 10px 24px rgba(27, 155, 224, .35); }
/* Capture forms in login cards: stack email + CTA */
.en-login-card .en-capture-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
}
.en-login-card .en-capture-form input[type="email"] {
  flex: none;
  width: 100%;
  box-sizing: border-box;
  background: #f4f8fa;
  border: 1.5px solid #c9d6e4;
  border-radius: 12px;
  padding: 15px 16px;
  font-size: var(--en-t-300);
  color: var(--en-ink);
  min-height: 52px;
}
.en-login-card .en-capture-form input[type="email"]:focus {
  border-color: var(--en-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(27, 155, 224, .18);
}
.en-login-card .en-capture-form .en-btn {
  margin-top: 0;
  width: 100%;
  flex: none;
}
.en-narrow .en-login-card {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  box-shadow: 0 18px 50px rgba(12, 34, 51, .12);
  border: 1px solid var(--en-border);
}

.en-login-claim { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--en-border); text-align: center; font-size: var(--en-t-200); line-height: 1.6; color: var(--en-muted); }
.en-login-claim a { font-weight: 700; color: var(--en-blue-ink) !important; }

/* Member question — concierge claim track (welcome + claim pages) */
.en-member-q {
  margin-top: 30px; padding: 22px 24px; border: 1px solid rgba(27, 155, 224, .3);
  border-radius: 14px; background: rgba(27, 155, 224, .06); color: var(--en-ink); text-align: left;
}
.en-member-q-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-400); letter-spacing: -.3px; }
.en-member-q-sub { margin: 8px 0 14px; font-size: var(--en-t-200); line-height: 1.65; color: var(--en-muted); }
.en-member-q input, .en-member-q textarea {
  width: 100%; box-sizing: border-box; background: #fff; border: 1.5px solid #c9d6e4; border-radius: 10px;
  padding: 13px 14px; font-size: var(--en-t-300); font-family: var(--en-sans); color: var(--en-ink);
}
.en-member-q input:focus, .en-member-q textarea:focus {
  border-color: var(--en-blue); outline: none; box-shadow: 0 0 0 3px rgba(27, 155, 224, .18);
}
.en-member-q .en-btn, .en-member-q .en-btn-ghost { width: 100%; box-sizing: border-box; text-align: center; }
.en-member-q .en-member-q-msg { color: var(--en-blue-deep); font-size: var(--en-t-200); }
.en-claim-card { width: 520px; }
.en-claim-card .en-login-sub { text-align: left; }
/* 4.31:1 over the squeeze glow; --en-on-navy-body is 8.00:1 there. */
.en-login-new { margin-top: 26px; font-size: var(--en-t-200); color: var(--en-on-navy-body); }
.en-login-new a { font-weight: 700; }
/* Was #5F7A8C: 3.60:1 on the navy squeeze background, i.e. under AA for 12px
   body text on /login/, /watch/ and /claim/. --en-on-navy-muted is 6.09:1. */
.en-login-footer { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 32px; text-align: center; font-size: var(--en-t-100); color: var(--en-on-navy-muted); }

/* ==========================================================================
   Generic page
   ========================================================================== */
.en-page-wrap { max-width: 784px; margin: 0 auto; padding: 44px 32px 64px; }
.en-page-wrap h1 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-900); letter-spacing: -1px; line-height: 1.12; margin: 0 0 26px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .en-prod-grid { grid-template-columns: 1fr; max-width: 560px; }
  .en-course-grid-3, .en-course-grid-2, .en-vault-grid { grid-template-columns: 1fr 1fr; }
  .en-event-grid { grid-template-columns: repeat(3, 1fr); }
  .en-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; padding-bottom: 52px; }
  .en-hero h1 { font-size: var(--en-t-900); }
  .en-latest-grid { grid-template-columns: 1fr; }
  .en-index-grid { grid-template-columns: repeat(2, 1fr); }
  .en-post-layout { grid-template-columns: 1fr; }
  .en-sidebar-optin { position: static; }
  .en-feat { grid-template-columns: 1fr; }
  .en-feat-media { height: 260px; }
  .en-blog-band { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 782px) {
  .en-course-grid-3, .en-course-grid-2, .en-vault-grid { grid-template-columns: 1fr; }
  .en-event-grid { grid-template-columns: 1fr 1fr; }
  .en-prod-band h1, .en-courses-band h1 { font-size: var(--en-t-800); }
  .en-login-card { padding: 30px 24px 28px; }
  .en-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; z-index: 99;
    flex-direction: column; align-items: flex-start; gap: 0; background: var(--en-navy);
    border-top: 1px solid var(--en-border-navy); padding: 8px 0 16px; }
  .en-nav.en-nav-open { display: flex; }
  .en-nav a { padding: 12px 32px; width: 100%; box-sizing: border-box; }
  .en-nav .en-nav-login { margin: 10px 32px 0; width: auto; }
  .en-nav-toggle { display: block; }
  .en-topbar { position: relative; }
  .en-how-grid { grid-template-columns: 1fr; }
  .en-index-grid { grid-template-columns: 1fr; }
  .en-cta-band { flex-direction: column; align-items: flex-start; }
  .en-post-head h1 { font-size: var(--en-t-800); }
  .en-squeeze-head h1 { font-size: var(--en-t-800); }
  .en-squeeze-card .en-video-slot { height: 240px; }
  .en-squeeze-form { flex-direction: column; }
  .en-hero h1 { font-size: var(--en-t-800); }
  .en-capture-form { flex-direction: column; }
  .en-keep-grid { grid-template-columns: 1fr; }
  .en-prevnext { flex-direction: column; }
  .en-post-hero img, .en-post-hero .en-video-slot { height: 230px; }
  .en-blog-subscribe { width: 100%; }
  .en-blog-subscribe input[type="email"] { width: 100%; flex: 1; }
}

/* ==========================================================================
   Course pages (single course, single lesson, claim)
   ========================================================================== */
body.single-en_course .en-topbar {
  background: radial-gradient(700px 380px at 20% 0%, rgba(27, 155, 224, .16), transparent 60%) var(--en-navy);
}
.en-course-hero {
  max-width: 1240px; margin: 0 auto; padding: 48px 32px 56px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 52px; align-items: center;
}
.en-course-hero-back { font-size: var(--en-t-200); font-weight: 700; color: var(--en-blue-light) !important; }
.en-course-hero h1 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-900); line-height: 1.1; letter-spacing: -1px; margin: 16px 0 14px; color: #fff; }
.en-course-hero-desc { font-size: var(--en-t-400); line-height: 1.7; color: var(--en-on-navy); max-width: 520px; margin: 0 0 22px; }
.en-course-hero-meta { display: flex; gap: 22px; margin-bottom: 26px; flex-wrap: wrap; }
.en-course-hero-meta span { font-size: var(--en-t-200); color: var(--en-on-navy-muted); font-weight: 600; }
.en-course-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.en-course-hero-note { font-size: var(--en-t-200); color: var(--en-on-navy-muted); }
/* Course hero art sits on a LIGHT CARD, matching the .en-vp-card treatment the
   vault letter pages already use. Two problems this fixes:
   - object-fit: cover on a fixed 280px box CROPPED the product mockups — the
     retail box on the right of the Team Building art was sliced off mid-frame.
     contain fits the whole composition instead.
   - the art is bg-removed/transparent PNG, so on the navy .en-topbar the dark
     edges of the mockup dissolved into the page and it read as floating
     fragments rather than a product shot. A white plate gives it an edge. */
.en-course-hero-cover {
  width: 100%; height: 280px; object-fit: contain; display: block;
  background: #fff; padding: 18px; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(12, 34, 51, .22);
}

.en-price-row { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.en-price-now { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); color: #fff; }
.en-price-was { font-size: var(--en-t-400); font-weight: 700; color: var(--en-on-navy-muted); text-decoration: line-through; }
.en-price-note { font-size: var(--en-t-200); color: var(--en-on-navy-muted); }

/* ==========================================================================
   Ghost / secondary button
   ==========================================================================
   This shipped as `color:#fff !important` with no background of its own, and
   only two wrappers (.en-buy-block-alt, .en-offer-card) put the ink back. Every
   other surface this button lands on is white or near-white, so it rendered
   white-on-white at 1.00:1 - literally invisible. Measured casualties:

     /checkout/?en_paid=1   "Go to your dashboard"  1.00:1  <- post-payment
     /products/             "Start free"            1.00:1  <- free-tier CTA
     /products/             "Hear the recorded..."  1.00:1
     /network/              "Previous" / "Next"     1.00:1  <- 54 pages of pager
     /partners-dashboard/   "See the partner..."    1.00:1  (.en-pdash-gate is a
     /partners/swipe/       "Partner dashboard"     1.00:1   near-white gradient)

   The polarity is now the other way round: the default is the LIGHT-surface
   treatment, so a surface nobody thought about fails *readable* instead of
   failing invisible, and the dark-surface treatment is opt-in. That also fixes
   en-core's gate-card button, which this theme cannot edit.

   Ink is --en-blue-ink, not --en-blue-deep: #147BB5 is 4.64:1 on pure white but
   drops to 4.28-4.44 on the tinted cards this button actually sits in, which is
   under AA. --en-blue-ink holds >= 5.98:1 on every surface in the palette.

   `background: transparent` is load-bearing: several of these are <button>
   elements, and Kadence's default button background (#2B6CB0) was showing
   through, so the same class rendered as a solid blue pill in .en-member-q and
   as nothing at all in .en-net-pager. */
.en-btn-ghost {
  display: inline-block; box-sizing: border-box;
  font-family: var(--en-sans); line-height: 1.2; text-align: center;
  border: 1px solid var(--en-border-strong); border-radius: var(--en-btn-r);
  padding: var(--en-btn-pad); font-size: var(--en-btn-fs); font-weight: 700;
  background: transparent; color: var(--en-blue-ink) !important;
  cursor: pointer;
}
.en-btn-ghost:hover {
  border-color: var(--en-blue); background: var(--en-tint-blue);
  color: var(--en-blue-ink) !important;
}

/* Dark-surface variant.
   Scoped by container rather than by a modifier class wherever the container is
   unambiguously navy, so en-core's markup and any template we do not edit are
   covered too. New dark surfaces should add .en-btn-ghost-navy explicitly.
   #fff on #0C2233 = 16.25:1. */
.en-btn-ghost-navy,
.en-topbar .en-btn-ghost,
.en-gate-card .en-btn-ghost,
.en-legacy-band .en-btn-ghost,
.en-cta-band .en-btn-ghost,
.en-btn.en-btn-ghost {
  background: transparent; border-color: rgba(255, 255, 255, .3);
  color: #fff !important; box-shadow: none;
}
.en-btn-ghost-navy:hover,
.en-topbar .en-btn-ghost:hover,
.en-gate-card .en-btn-ghost:hover,
.en-legacy-band .en-btn-ghost:hover,
.en-cta-band .en-btn-ghost:hover,
.en-btn.en-btn-ghost:hover {
  border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08);
  color: #fff !important;
}
/* Guard: white cards can be nested inside the navy bands (the hero capture
   card, the checkout card). A ghost button in one of those is back on white. */
.en-topbar .en-capture-card .en-btn-ghost,
.en-topbar .en-login-card .en-btn-ghost,
.en-topbar .en-squeeze-card .en-btn-ghost,
.en-topbar .en-offer-card .en-btn-ghost {
  border-color: var(--en-border-strong); color: var(--en-blue-ink) !important;
}

.en-course-about { max-width: 900px; margin: 0 auto; padding: 48px 32px 0; }
.en-course-about h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-700); letter-spacing: -.5px; margin: 0 0 16px; }

.en-curriculum { max-width: 900px; margin: 0 auto; padding: 56px 32px 24px; }
.en-curriculum h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-700); letter-spacing: -.5px; margin: 0 0 6px; }
.en-modules { display: flex; flex-direction: column; gap: 18px; }
.en-module { border: 1px solid var(--en-border); border-radius: 16px; overflow: hidden; }
.en-module-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 24px; background: var(--en-tint); border-bottom: 1px solid rgba(14, 42, 60, .08);
}
.en-module-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-400); }
.en-module-meta { font-size: var(--en-t-200); color: var(--en-faint); font-weight: 600; flex: none; }
.en-module-list { display: flex; flex-direction: column; }
.en-lesson-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 24px; border-bottom: 1px solid rgba(14, 42, 60, .06); color: var(--en-ink) !important;
}
.en-lesson-row:last-child { border-bottom: 0; }
.en-lesson-row:hover { background: var(--en-tint); }
.en-lesson-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.en-lesson-ic {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--en-t-100); font-weight: 800; flex: none;
}
.en-ic-play { background: rgba(27, 155, 224, .12); color: var(--en-blue-deep); }
.en-ic-lock { background: #EFF3F6; color: var(--en-faint); }
.en-lesson-row-title { font-size: var(--en-t-300); font-weight: 600; }
.en-lesson-row-locked .en-lesson-row-title { color: var(--en-chip-text); }
.en-badge-preview {
  /* #1B9BE0 on the 10% blue wash measured 2.78:1. */
  font-size: var(--en-t-100); font-weight: 800; letter-spacing: 1px; color: var(--en-blue-ink);
  background: rgba(27, 155, 224, .1); padding: 3px 9px; border-radius: 999px; flex: none;
}

.en-guarantee-wrap { max-width: 900px; margin: 0 auto; padding: 12px 32px 0; }
.en-guarantee {
  display: flex; gap: 14px; align-items: center; padding: 18px 22px;
  background: #F0F9F3; border: 1px solid rgba(30, 138, 84, .25); border-radius: 14px;
}
.en-guarantee-check { font-size: var(--en-t-600); color: #1E6B44; flex: none; }
.en-guarantee-text { font-size: var(--en-t-200); line-height: 1.6; color: #1E6B44; }
.en-guarantee-text a { color: #1E6B44 !important; text-decoration: underline; }

.en-wt-band-wrap { max-width: 900px; margin: 36px auto 64px; padding: 0 32px; }
.en-wt-band {
  background: var(--en-navy); border-radius: 18px; padding: 36px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.en-wt-band-copy { display: flex; flex-direction: column; gap: 6px; }
.en-wt-band-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600); color: #fff; }
.en-wt-band-sub { font-size: var(--en-t-300); line-height: 1.6; color: var(--en-on-navy); max-width: 480px; }
.en-wt-band .en-btn-lg { flex: none; box-shadow: none; }

/* Lesson page */
.en-lesson-banner { background: var(--en-tint-blue); border-bottom: 1px solid rgba(14, 42, 60, .08); }
.en-lesson-banner-inner {
  max-width: 1360px; margin: 0 auto; padding: 12px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.en-lesson-banner-inner span { font-size: var(--en-t-200); color: var(--en-chip-text); }
.en-lesson-banner-inner a { flex: none; font-size: var(--en-t-200); font-weight: 800; }

.en-lesson-layout {
  max-width: 1360px; margin: 0 auto; width: 100%; box-sizing: border-box;
  padding: 0 32px; display: grid; grid-template-columns: 320px 1fr; gap: 44px;
}
.en-lesson-side { border-right: 1px solid rgba(14, 42, 60, .08); padding: 28px 28px 40px 0; }
.en-lesson-side-back { font-size: var(--en-t-100); font-weight: 700; }
.en-lesson-side-course { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); margin: 12px 0 4px; }
.en-lnav-groups { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.en-lnav-label { font-size: var(--en-t-100); letter-spacing: 1.5px; color: var(--en-faint); font-weight: 800; margin-bottom: 8px; text-transform: uppercase; }
.en-lnav-list { display: flex; flex-direction: column; }
.en-lnav-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--en-chip-text) !important; }
.en-lnav-row:hover { background: var(--en-tint); }
.en-lnav-current { background: var(--en-tint-blue); color: var(--en-navy) !important; }
.en-lnav-current:hover { background: var(--en-tint-blue); }
.en-lnav-current .en-lnav-title { font-weight: 800; }
.en-lnav-locked { color: var(--en-faint) !important; }
.en-lnav-ic {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--en-t-100); font-weight: 800; flex: none; box-sizing: border-box;
}
.en-lnav-ic-check { background: #DCF0E4; color: #1E8A54; font-size: var(--en-t-100); }
/* 10px white on --en-blue is 3.08:1. See .en-pill-core. */
.en-lnav-ic-current { background: var(--en-blue-deep); color: #fff; }
.en-lnav-ic-lock { background: #EFF3F6; }
.en-lnav-title { font-size: var(--en-t-200); font-weight: 600; }

.en-lesson-main { padding: 28px 0 56px; max-width: 820px; min-width: 0; }
.en-lesson-main .en-crumbs { margin-bottom: 16px; }
.en-lesson-kicker { font-size: var(--en-t-100); letter-spacing: 1.5px; color: var(--en-faint); font-weight: 800; text-transform: uppercase; }
.en-lesson-main h1 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); line-height: 1.15; letter-spacing: -.5px; margin: 10px 0 20px; }
.en-player { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--en-navy); display: block; }
.en-player-note { margin-top: 10px; font-size: var(--en-t-200); color: var(--en-muted); font-weight: 600; }
.en-lesson-resources {
  margin-top: 24px; padding: 18px 22px; border: 1px solid var(--en-border); border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 720px;
}
.en-lesson-resources-label { font-size: var(--en-t-200); font-weight: 700; color: var(--en-chip-text); }
.en-audio-dl {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--en-sans); font-size: var(--en-t-200); font-weight: 700; color: var(--en-blue);
}
.en-audio-dl:hover { color: var(--en-blue-deep); }
.en-audio-dl:disabled { color: var(--en-faint); cursor: default; }
.en-lesson-main .en-article { margin-top: 26px; font-size: var(--en-t-400); }

.en-gate-card { margin-top: 26px; max-width: 720px; box-sizing: border-box; background: var(--en-navy); border-radius: 16px; padding: 34px 36px; text-align: center; }
.en-gate-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600); color: #fff; margin-bottom: 8px; }
.en-gate-sub { font-size: var(--en-t-300); line-height: 1.65; color: var(--en-on-navy); max-width: 440px; margin: 0 auto 22px; }
.en-gate-price { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.en-gate-price .en-price-now { font-size: var(--en-t-800); }
.en-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.en-gate-claim { margin-top: 18px; font-size: var(--en-t-200); }
.en-gate-claim a { color: var(--en-blue-light) !important; font-weight: 700; }

.en-wt-inline {
  margin-top: 28px; max-width: 720px; box-sizing: border-box; padding: 20px 24px;
  background: var(--en-tint-blue); border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.en-wt-inline-text { font-size: var(--en-t-300); line-height: 1.55; color: var(--en-navy); font-weight: 600; }
.en-wt-inline .en-btn { flex: none; --en-btn-fs: var(--en-t-200); --en-btn-pad: 12px 20px; }

.en-lesson-prevnext { margin-top: 28px; max-width: 720px; display: flex; justify-content: space-between; gap: 16px; }
.en-lesson-prevnext a {
  flex: 1; padding: 16px 20px; border: 1px solid var(--en-border); border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px; color: var(--en-ink) !important;
}
.en-lesson-prevnext a.en-next { text-align: right; }

/* Claim page */
.en-claim-attest { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: var(--en-t-200); line-height: 1.5; color: var(--en-muted); cursor: pointer; }
.en-claim-attest input { accent-color: var(--en-blue); margin-top: 2px; flex: none; }
.en-claim-note { margin-top: 18px; font-size: var(--en-t-300); font-weight: 700; line-height: 1.6; text-align: center; }
.en-claim-note-ok { color: #1E6B44; }
.en-claim-note-err { color: #B3402A; }

/* Course pages — responsive (appended; existing rules untouched) */
@media (max-width: 1024px) {
  .en-course-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 48px; }
  .en-course-hero h1 { font-size: var(--en-t-800); }
  .en-lesson-layout { grid-template-columns: 1fr; gap: 0; }
  .en-lesson-side { order: 2; border-right: 0; border-top: 1px solid rgba(14, 42, 60, .08); padding: 24px 0 40px; }
  .en-lesson-main { order: 1; }
}
@media (max-width: 782px) {
  .en-course-hero h1 { font-size: var(--en-t-700); }
  .en-course-hero-cover { height: 200px; }
  .en-wt-band { flex-direction: column; align-items: flex-start; }
  .en-lesson-banner-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .en-lesson-main h1 { font-size: var(--en-t-700); }
  .en-gate-card { padding: 26px 22px; }
  .en-gate-actions { flex-direction: column; align-items: stretch; }
  .en-lesson-prevnext { flex-direction: column; }
  .en-lesson-resources { flex-direction: column; align-items: flex-start; }
  .en-wt-inline { flex-direction: column; align-items: flex-start; }
}

/* Header: never overlap the wordmark; tighten on mid widths */
.en-header { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 1420px) {
  .en-nav { gap: 18px; font-size: var(--en-t-200); }
  .en-nav .en-nav-login { padding: 9px 16px; }
}

/* ===== course sales letter + testimonial wall (corporate-archive lift, 2026-07) ===== */
.en-letter-wrap { background: var(--en-tint); border-top: 1px solid var(--en-border); border-bottom: 1px solid var(--en-border); }
.en-letter { max-width: 720px; margin: 0 auto; padding: 52px 22px 46px; font-size: var(--en-t-400); line-height: 1.75; color: var(--en-body-c); }
/*
 * The sales-letter headline.
 *
 * It was an <h1> in parts/blogging-letter.html and parts/vault-letter.html, on
 * pages whose navy band already carries an <h1> - so /blogging/ and /vault/,
 * the $25/mo and $498 pages, each announced two document titles. It is a
 * headline inside the page, not the page's title, so it is an <h2> now with the
 * display size it always rendered at. The rule keeps h1 in the selector because
 * a letter rendered on its own would still be right to use one.
 */
/*
 * The letter opening, set modern (Dave, 2026-08-07): kicker, headline and
 * deck all rag left with the copy instead of the centered/italic 2005
 * direct-response stack. The headline shares the crossheads' wider measure
 * (outdent media rule below), and the deck closes the opening with a
 * hairline before "Dear friend".
 */
.en-letter h1,
.en-letter .en-letter-headline {
  text-align: left; font-family: var(--en-display); font-weight: 800;
  font-size: clamp(var(--en-t-700), 4.4vw, var(--en-t-800)); line-height: 1.12; letter-spacing: -.5px;
  color: var(--en-ink); margin: 0 0 18px;
}
/*
 * Section crossheads read with the text, not over it: centered h2s floating
 * above a left-set measure looked "off center" (Dave, 2026-08-07). The
 * letter's display furniture (headline, prehead, deck, CTA blocks) stays
 * centered on purpose — only the crossheads align with the copy. One rule
 * covers /blogging/, /vault/ and every course letter (shared .en-letter).
 */
.en-letter h2 { font-family: var(--en-display); font-weight: 800; font-size: clamp(var(--en-t-600), 3.4vw, var(--en-t-700)); line-height: 1.22; letter-spacing: -0.4px; color: var(--en-ink); text-align: left; margin: 1.7em 0 0.7em; }
.en-letter h2:first-child { margin-top: 0; }
.en-letter h3 { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-600); color: var(--en-ink); margin: 1.5em 0 0.5em; }
.en-letter .en-letter-deck { text-align: left; font-size: var(--en-t-500); line-height: 1.5; color: var(--en-muted); font-style: normal; margin: 0 0 1.7em; padding-bottom: 1.5em; border-bottom: 1px solid var(--en-border); }
.en-letter .en-letter-preheed, .en-letter .en-letter-prehead { text-align: left; font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-200); letter-spacing: 1.6px; text-transform: uppercase; color: var(--en-blue-deep); margin-bottom: 12px; }
.en-letter ul { padding-left: 0; list-style: none; }
.en-letter ul li { position: relative; padding-left: 30px; margin: 0 0 12px; }
.en-letter ul li::before { content: "\2713"; position: absolute; left: 2px; top: 0; color: var(--en-blue-deep); font-weight: 800; }
.en-letter blockquote { margin: 1.6em 0; padding: 18px 22px; background: #fff; border-left: 4px solid var(--en-blue); border-radius: 0 12px 12px 0; box-shadow: var(--en-card-shadow); font-size: var(--en-t-400); }
.en-letter .en-letter-cta { text-align: center; margin: 2em 0 0; }
.en-letter .en-letter-cta .en-btn-ghost { display: inline-block; margin-top: 12px; }
.en-letter .en-letter-sig { font-family: var(--en-display); font-weight: 700; color: var(--en-ink); }

.en-testi-wrap { max-width: 720px; margin: 0 auto; padding: 46px 22px 8px; }
.en-testi-grid { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 20px; }
.en-testi-card { margin: 0; background: #fff; border: 1px solid var(--en-border); border-radius: 14px; padding: 22px 22px 18px; box-shadow: var(--en-card-shadow); display: flex; flex-direction: column; }
.en-testi-card blockquote { margin: 0 0 14px; font-size: var(--en-t-300); line-height: 1.65; color: var(--en-body-c); flex: 1; }
.en-testi-name { display: block; font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-300); color: var(--en-ink); }
.en-testi-context { display: block; font-size: var(--en-t-100); color: var(--en-faint); margin-top: 2px; }
.en-testi-disclaimer { font-size: var(--en-t-100); color: var(--en-faint); margin-top: 18px; max-width: 720px; }
.en-testi-card-img { padding: 0; border: 0; background: none; box-shadow: none; }
.en-testi-card-img img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--en-border); box-shadow: var(--en-card-shadow); background: #fff; }
.en-testi-card-img figcaption { padding: 8px 4px 0; }
.en-testi-card-img .en-testi-name { display: inline; }
.en-testi-card-img .en-testi-context { display: inline; margin-left: 8px; }
.en-letter figure.en-letter-photo { margin: 1.8em 0; text-align: center; }
.en-letter figure.en-letter-photo img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: var(--en-card-shadow); }
.en-letter figure.en-letter-photo figcaption { font-size: var(--en-t-200); color: var(--en-faint); margin-top: 8px; }
.en-letter-cta-note { text-align: center; font-size: var(--en-t-200); color: var(--en-muted); margin: 8px 0 0; }
/*
 * Classic letter measure: crossheads, the headline and photos reach slightly
 * wider than the reading column, so the copy sits visibly indented from the
 * edge the headlines start at (Dave, 2026-08-07). Outdent only where the
 * viewport has the room (720px column + 2x38px + margin); below that
 * everything realigns to one edge.
 */
@media (min-width: 840px) {
  .en-letter h1,
  .en-letter .en-letter-headline,
  .en-letter h2,
  .en-letter .en-letter-preheed,
  .en-letter .en-letter-prehead,
  .en-letter .en-letter-deck,
  .en-letter figure.en-letter-photo { margin-left: -38px; margin-right: -38px; }
}

/* ===== 2026-07-14 design/copy fixes: legacy band, order card, blog sales ===== */

/* Products — legacy library band (navy, matches CTA band tokens) */
.en-legacy-band { background: var(--en-navy); }
.en-legacy-inner { max-width: 900px; margin: 0 auto; padding: 52px 32px; text-align: center; }
.en-legacy-kicker { display: inline-block; font-size: var(--en-t-100); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--en-blue-light); margin-bottom: 12px; }
.en-legacy-inner h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); letter-spacing: -.5px; color: #fff; margin: 0 0 14px; }
.en-legacy-inner p { font-size: var(--en-t-400); line-height: 1.7; color: var(--en-on-navy); max-width: 640px; margin: 0 auto 12px; }
.en-legacy-owner { color: var(--en-on-navy-body) !important; }
.en-legacy-owner strong { color: #fff; }
.en-legacy-actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 22px; }

/* Checkout — order summary card */
.en-order-card { text-align: left; }
.en-order-badge {
  display: block; background: var(--en-tint-blue); border: 1px solid var(--en-blue-pale);
  border-radius: 10px; padding: 10px 14px; font-size: var(--en-t-100); font-weight: 700;
  color: var(--en-blue-deep); margin-bottom: 18px; text-align: center;
}
.en-order-summary { border: 1px solid var(--en-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; background: var(--en-tint); }
.en-order-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.en-order-row strong { font-family: var(--en-display); font-size: var(--en-t-400); color: var(--en-ink); }
.en-order-price { font-size: var(--en-t-400); color: var(--en-ink); white-space: nowrap; }
.en-order-was { text-decoration: line-through; color: var(--en-faint); font-weight: 400; font-size: var(--en-t-200); margin-left: 4px; }
.en-order-term { font-size: var(--en-t-200); color: var(--en-muted); margin-top: 4px; }
.en-order-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 7px; }
.en-order-list li { font-size: var(--en-t-200); color: var(--en-body-c); }

/* Blogging — benefits + "will not get" list */
.en-blog-benefits { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.en-blog-benefit { display: flex; gap: 14px; align-items: flex-start; }
.en-blog-benefit-ic {
  flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--en-tint-blue);
  color: var(--en-blue-deep); font-weight: 800; font-size: var(--en-t-200); display: flex; align-items: center; justify-content: center;
}
.en-blog-benefit div { display: flex; flex-direction: column; gap: 3px; }
.en-blog-benefit strong { font-size: var(--en-t-400); color: var(--en-ink); }
.en-blog-benefit span { font-size: var(--en-t-300); line-height: 1.6; color: var(--en-muted); }
.en-blog-nots { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
.en-blog-nots li { font-size: var(--en-t-300); line-height: 1.65; color: var(--en-muted); padding-left: 18px; border-left: 3px solid var(--en-blue-pale); }
.en-blog-nots strong { color: var(--en-ink); }

@media (max-width: 782px) {
  .en-legacy-inner h2 { font-size: var(--en-t-700); }
  .en-legacy-actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Lesson transcript — archive text layer, free-account gated for anonymous
   ========================================================================== */
.en-transcript { margin: 42px 0 10px; }
.en-transcript-head { font-family: var(--en-display); font-size: var(--en-t-600); color: var(--en-ink); margin: 0 0 6px; }
.en-transcript-note { font-size: var(--en-t-200); color: var(--en-muted); margin: 0 0 18px; }
.en-transcript-full { position: relative; font-size: var(--en-t-400); line-height: 1.75; color: var(--en-body-c); }
.en-transcript-full p { margin: 0 0 1.15em; }
/* Anonymous: full text stays in the DOM (crawlable) but the box is visually
   capped with a fade; the free-account card sits below. Visual gate only. */
.en-transcript-gated { max-height: 340px; overflow: hidden; }
.en-transcript-fade { position: absolute; inset: auto 0 0 0; height: 200px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 88%); }
.en-transcript-unlock { border: 1px solid var(--en-border-strong); border-radius: 14px;
  box-shadow: var(--en-card-shadow); padding: 26px 28px; margin-top: -8px; position: relative;
  background: var(--en-tint-blue); text-align: center; }
.en-transcript-unlock-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600); color: var(--en-ink); }
.en-transcript-unlock-sub { font-size: var(--en-t-300); color: var(--en-muted); margin: 6px auto 14px; max-width: 460px; }
.en-fa-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.en-fa-form input[type="email"] { padding: 12px 14px; border-radius: 8px; border: 1px solid #c9d6e4;
  font-size: var(--en-t-300); min-width: 260px; }
.en-fa-msg { font-size: var(--en-t-200); color: var(--en-blue-deep); margin-top: 10px; min-height: 1.2em; font-weight: 600; }
.en-transcript-unlock-alt { font-size: var(--en-t-200); color: var(--en-muted); margin-top: 10px; }
@media (max-width: 600px) {
  .en-fa-form { flex-direction: column; }
  .en-fa-form input[type="email"] { min-width: 0; }
}

/* ==========================================================================
   The Daily Shortcut — episode archive + single
   ========================================================================== */
.en-episode-guest { font-size: var(--en-t-300); color: var(--en-muted); margin-top: 4px; font-weight: 600; }
.en-episode-series { margin: 34px 0 0; }
.en-episode-count { font-size: var(--en-t-200); font-weight: 600; color: var(--en-faint); margin-left: 8px; }
.en-episode-list { display: flex; flex-direction: column; margin-top: 12px; border: 1px solid var(--en-border);
  border-radius: 12px; overflow: hidden; box-shadow: var(--en-card-shadow); }
.en-episode-row { display: flex; gap: 14px; align-items: baseline; padding: 12px 16px;
  border-bottom: 1px solid var(--en-border); font-size: var(--en-t-300); color: var(--en-ink); background: #fff; }
.en-episode-row:last-child { border-bottom: 0; }
.en-episode-row:hover { background: var(--en-tint-blue); }
.en-episode-num { flex: 0 0 44px; font-weight: 700; color: var(--en-blue-deep); font-variant-numeric: tabular-nums; }
.en-episode-title em { color: var(--en-muted); font-style: normal; font-size: var(--en-t-200); }
.en-episode-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.en-episode-title { font-weight: 600; }
.en-episode-desc { font-size: var(--en-t-200); line-height: 1.5; color: var(--en-muted); }

/* Shortcut archive nav: series jump links + topic chips */
.en-shortcut-nav { margin: 6px 0 8px; }
.en-shortcut-series-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 700; font-size: var(--en-t-200); }
.en-shortcut-series-links a { color: var(--en-blue-deep) !important; }
.en-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.en-chip {
  border: 1px solid var(--en-border-strong); background: #fff; color: var(--en-ink);
  border-radius: 999px; padding: 6px 14px; font-size: var(--en-t-200); font-weight: 600;
  font-family: var(--en-sans); cursor: pointer;
}
.en-chip:hover { border-color: var(--en-blue); color: var(--en-blue-deep); }
/* The selected category chip: 13px white on --en-blue is 3.08:1. */
.en-chip.is-active { background: var(--en-blue-deep); border-color: var(--en-blue-deep); color: #fff; }
.en-chip-count { opacity: .65; font-weight: 500; margin-left: 2px; }

/* AI drafts approval + intake */
.en-draft-card { background: #fff; border: 1px solid var(--en-border); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.en-draft-card.en-draft-done { opacity: .55; }
.en-draft-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); }
.en-draft-meta { font-size: var(--en-t-100); color: var(--en-faint); margin: 2px 0 8px; }
.en-draft-excerpt { font-size: var(--en-t-300); line-height: 1.6; color: var(--en-muted); margin: 0 0 14px; }
.en-draft-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.en-draft-msg { margin-top: 10px; font-weight: 600; font-size: var(--en-t-200); color: var(--en-blue-deep); }
.en-intake-form label { display: block; margin: 0 0 16px; font-weight: 600; font-size: var(--en-t-300); }
.en-intake-form input, .en-intake-form textarea {
  width: 100%; box-sizing: border-box; margin-top: 6px; background: #fff; border: 1.5px solid #c9d6e4;
  border-radius: 10px; padding: 12px 14px; font-size: var(--en-t-300); font-family: var(--en-sans); font-weight: 400; color: var(--en-ink);
}
.en-intake-form input:focus, .en-intake-form textarea:focus { border-color: var(--en-blue); outline: none; box-shadow: 0 0 0 3px rgba(27, 155, 224, .18); }
.en-post-infographic { margin: 1.8em 0; text-align: center; }
.en-post-infographic img { max-width: 100%; height: auto; border-radius: 12px; }

/* Play-button overlay on video-post card thumbnails */
.en-card-thumb-wrap { position: relative; display: block; line-height: 0; }
.en-card-thumb-wrap img { display: block; }
.en-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%; background: rgba(12, 34, 51, .72);
  box-shadow: 0 4px 18px rgba(12, 34, 51, .35); pointer-events: none; }
.en-card-play::after { content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%); width: 0; height: 0;
  border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.en-feat:hover .en-card-play, .en-grid-card:hover .en-card-play, a:hover > .en-card-thumb-wrap .en-card-play { background: var(--en-blue); }

/* ==========================================================================
   Sales spine — offer band, buy blocks, stacked capture forms
   ========================================================================== */
.en-offer-band { background: var(--en-tint-blue); border-top: 1px solid var(--en-border); border-bottom: 1px solid var(--en-border); }
.en-offer-band-inner { max-width: 960px; margin: 0 auto; padding: 52px 20px; text-align: center; }
.en-offer-band-lede { color: var(--en-muted); font-size: var(--en-t-400); max-width: 560px; margin: 8px auto 28px; }
.en-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
.en-offer-card { background: #fff; border: 1px solid var(--en-border-strong); border-radius: 14px; box-shadow: var(--en-card-shadow); padding: 26px 28px; display: flex; flex-direction: column; }
.en-offer-card .en-btn { margin-top: auto; align-self: flex-start; }
.en-offer-card-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600); color: var(--en-ink); margin-bottom: 10px; }
.en-offer-bullets { list-style: none; padding: 0; margin: 0 0 14px; }
.en-offer-bullets li { padding: 5px 0 5px 26px; position: relative; font-size: var(--en-t-300); line-height: 1.5; color: var(--en-body-c); }
.en-offer-bullets li::before { content: "\2713"; position: absolute; left: 0; color: var(--en-blue); font-weight: 700; }
.en-offer-price { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600); color: var(--en-ink); margin: 6px 0 4px; }
.en-offer-or { font-size: var(--en-t-200); font-weight: 600; color: var(--en-muted); }
.en-offer-note { font-size: var(--en-t-200); color: var(--en-muted); margin: 0 0 16px; }
.en-buy-block { border: 2px solid var(--en-blue); border-radius: 14px; padding: 26px 28px; margin: 30px 0 14px; text-align: center; background: var(--en-tint-blue); }
.en-buy-block-alt { border: 1px solid var(--en-border-strong); background: #fff; margin-top: 0; }
.en-buy-block-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); color: var(--en-ink); }
.en-buy-block-price { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-800); color: var(--en-ink); margin: 6px 0 14px; }
.en-buy-block-price span { font-size: var(--en-t-400); color: var(--en-muted); font-weight: 600; }
.en-buy-block-price em { display: block; font-style: normal; font-size: var(--en-t-200); color: var(--en-muted); font-weight: 600; margin-top: 2px; }
.en-buy-block-sub { margin-top: 10px; font-size: var(--en-t-200); color: var(--en-muted); }
/* Ghost buttons on WHITE surfaces (buy blocks, offer cards). This used to be
   the *only* place the white-on-white default was patched; it is now just the
   default, kept here for the explicit white fill on the tinted buy block.
   Ink moved --en-blue-deep -> --en-blue-ink: 4.64:1 -> 6.48:1 on #fff. */
.en-buy-block-alt .en-btn-ghost, .en-offer-card .en-btn-ghost {
  color: var(--en-blue-ink) !important; border-color: var(--en-border-strong); background: #fff;
}
.en-buy-block-alt .en-btn-ghost:hover, .en-offer-card .en-btn-ghost:hover { border-color: var(--en-blue); }

/* Engine intake: required/optional cues so a longer form still reads as short */
.en-intake-note {
  font-size: var(--en-t-200); line-height: 1.6; color: var(--en-body-c);
  background: #fff; border: 1px solid var(--en-border); border-left: 3px solid var(--en-blue);
  border-radius: 8px; padding: 12px 14px; margin: 0 0 22px;
}
.en-req {
  display: inline-block; font-size: var(--en-t-100); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--en-blue); vertical-align: middle; margin-left: 4px;
}
.en-hint { font-size: var(--en-t-100); font-weight: 600; color: var(--en-muted); margin-left: 4px; }
.en-intake-form .en-section-title { margin-top: 30px; }

/* ==========================================================================
   /network/ directory — search, category facets, blog cards, pager
   ========================================================================== */
.en-net-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 22px; }
.en-net-search input[type="search"] {
  flex: 1 1 320px; min-width: 240px; padding: 12px 16px; font-size: var(--en-t-300);
  border: 1px solid var(--en-border); border-radius: 10px; background: #fff; color: var(--en-ink);
}
.en-net-clear { font-size: var(--en-t-200); color: var(--en-muted) !important; }

.en-net-facets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.en-net-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border: 1px solid var(--en-border); border-radius: 999px; background: #fff;
  font-size: var(--en-t-200); font-weight: 600; color: var(--en-ink) !important;
  line-height: 1.3; cursor: pointer;
}
.en-net-chip span { color: var(--en-muted); font-weight: 600; font-size: var(--en-t-100); }
.en-net-chip:hover { border-color: var(--en-blue); }
.en-net-chip.is-on { background: var(--en-navy); border-color: var(--en-navy); color: #fff !important; }
.en-net-chip.is-on span { color: rgba(255,255,255,.7); }
.en-net-more { display: none; }              /* revealed by the "+N more topics" button */
.en-net-toggle { font-family: inherit; }

.en-net-count { font-size: var(--en-t-200); color: var(--en-muted); font-weight: 600; }
.en-net-typebar { margin-top: -6px; }
.en-net-typebar a { font-weight: 600; }

.en-net-grid { align-items: stretch; }
.en-net-card { gap: 7px; }
.en-net-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.en-net-badge {
  flex: none; font-size: var(--en-t-100); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--en-border); color: var(--en-muted);
}
/* 10.5px white on --en-blue is 3.08:1, on 60 badges per directory page. */
.en-net-badge-member { background: var(--en-blue-deep); color: #fff; }
.en-net-latest { font-size: var(--en-t-200); color: var(--en-muted); }
/* 60 of these per page across 54 pages of the directory; #1B9BE0 is 3.08:1. */
.en-net-cats { font-size: var(--en-t-100); color: var(--en-blue-ink); font-weight: 600; }

.en-net-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 34px 0 0; }
.en-net-pager span { font-size: var(--en-t-200); color: var(--en-muted); font-weight: 600; }

@media (max-width: 700px) {
  .en-net-search input[type="search"] { flex-basis: 100%; }
  .en-net-facets { gap: 6px; }
  .en-net-chip { padding: 6px 11px; font-size: var(--en-t-100); }
}

/* Vault letter: per-product cards (floating image on top, brand swoosh, 2-col bullets) */
.en-vp { --vp: #1B9BE0; margin: 46px 0; }
.en-vp-shot { text-align: center; position: relative; z-index: 2; margin-bottom: -32px; }
.en-vp-shot img { width: 100%; max-width: 520px; height: auto; display: inline-block; filter: drop-shadow(0 18px 30px rgba(12, 34, 51, .22)); }
.en-vp-card { position: relative; background: #fff; border: 1px solid var(--en-border); border-radius: 22px; padding: 68px 42px 40px; text-align: center; box-shadow: 0 26px 60px rgba(12, 34, 51, .12); overflow: hidden; }
.en-vp-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 62px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vp) 26%, #fff) 0%, #fff 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V96 C1000 142 800 64 600 100 C400 136 200 70 0 112 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1200 V96 C1000 142 800 64 600 100 C400 136 200 70 0 112 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.en-vp-card > * { position: relative; z-index: 1; }
/*
 * The per-course accent (--vp, set inline per section) runs from a mid amber
 * to a mid green, and white on the lightest of them measured 2.54:1. A flat
 * 28% black wash over whatever accent is supplied brings every one of them
 * over AA (worst case #E0912B -> #A1681F, 4.65:1) without hard-coding six
 * colours or touching the letter markup.
 */
.en-vp-pill { display: inline-block; background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), var(--vp); color: #fff !important; font-weight: 700; font-size: var(--en-t-100); letter-spacing: .06em; text-transform: uppercase; padding: 7px 18px; border-radius: 999px; }
.en-vp-orig { color: var(--en-muted); font-size: var(--en-t-300); margin-top: 12px; }
.en-vp-title { font-family: var(--en-display); font-weight: 800; font-size: clamp(var(--en-t-700), 4vw, var(--en-t-900)); color: var(--en-ink); margin: 4px 0 0; line-height: 1.1; }
.en-vp-rule { display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--vp); margin: 16px auto 18px; }
.en-vp-intro { font-size: var(--en-t-400); line-height: 1.65; color: var(--en-body-c); max-width: 690px; margin: 0 auto 22px; }
.en-vp-bullets { list-style: none; padding: 0; margin: 0 auto; max-width: 840px; column-count: 2; column-gap: 40px; text-align: left; }
.en-vp-bullets li { break-inside: avoid; position: relative; padding: 13px 4px 13px 40px; font-size: var(--en-t-300); line-height: 1.5; color: var(--en-body-c); border-top: 1px solid var(--en-border); }
.en-vp-bullets li::before { content: "\2713"; position: absolute; left: 4px; top: 12px; width: 23px; height: 23px; border-radius: 50%; background: var(--vp); color: #fff; font-size: var(--en-t-100); font-weight: 800; display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
  .en-vp-bullets { column-count: 1; }
  .en-vp-card { padding: 52px 22px 32px; border-radius: 18px; }
  .en-vp-shot img { max-width: 80%; }
}
.en-value-stack { max-width: 460px; margin: 20px auto 22px; border: 1px solid var(--en-border-strong); border-radius: 14px; overflow: hidden; }
.en-value-row { display: flex; justify-content: space-between; padding: 12px 20px; font-size: var(--en-t-400); border-bottom: 1px solid var(--en-border); }
.en-value-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.en-value-total { background: var(--en-tint-gray); font-weight: 700; }
.en-value-total span:first-child { font-weight: 700; }
/* White on --en-blue is 3.08:1; --en-blue-deep is 4.64:1. */
.en-value-today { background: var(--en-blue-deep); color: #fff; border-bottom: 0; font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-400); }
.en-value-today span:last-child { color: #fff; }
.en-fa-stack { flex-direction: column; }
.en-fa-stack input[type="email"] { width: 100%; box-sizing: border-box; }
@media (max-width: 700px) { .en-offer-grid { grid-template-columns: 1fr; } }

/* Signup success state (post-submit confirmation moment) */
.en-fa-success { text-align: center; padding: 10px 6px 4px; }
.en-fa-success-icon { font-size: var(--en-t-900); line-height: 1; margin-bottom: 8px; }
.en-fa-success-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600); color: var(--en-ink); margin-bottom: 8px; }
.en-fa-success-body { font-size: var(--en-t-300); line-height: 1.65; color: var(--en-body-c); margin: 0 0 10px; }
.en-fa-success-note { font-size: var(--en-t-200); line-height: 1.6; color: var(--en-muted); margin: 0; }
.en-capture-card .en-fa-success-title { color: #fff; }
.en-capture-card .en-fa-success-body { color: var(--en-on-navy-body); }
.en-capture-card .en-fa-success-note { color: var(--en-on-navy-muted); }
.en-sidebar-optin .en-fa-success-title { color: #fff; font-size: var(--en-t-500); }
.en-sidebar-optin .en-fa-success-body { color: var(--en-on-navy-body); font-size: var(--en-t-200); }
.en-sidebar-optin .en-fa-success-note { color: var(--en-on-navy-muted); }

/* Partner share bar (partners only) */
.en-partner-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 0;
  padding: 12px 16px; background: var(--en-tint-gray); border: 1px dashed var(--en-border-strong); border-radius: 10px; }
.en-partner-share-label { font-size: var(--en-t-100); font-weight: 700; color: var(--en-muted); text-transform: uppercase; letter-spacing: .4px; }
.en-partner-share code { flex: 1; min-width: 200px; font-size: var(--en-t-100); word-break: break-all; background: #fff; padding: 6px 10px; border-radius: 6px; }

/* Footer restoration note — the ONE consolidated archive statement sitewide */
/* This band was navy once and kept the on-navy tokens after it turned white:
   --en-on-navy-muted measured 2.67:1 here and --en-blue-pale worse still.
   --en-muted is 5.51:1 on white and --en-blue-ink 6.48:1. */
.en-footer-note { max-width: 720px; margin: 0 auto 22px; font-size: var(--en-t-200); line-height: 1.65; color: var(--en-muted); text-align: center; }
.en-footer-note a { color: var(--en-blue-ink); }

/* Testimonial author avatars (2013 products-page harvest) */
.en-testi-cap-avatar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.en-testi-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--en-border-strong); }
.en-letter-testi { margin: 30px 0; padding: 22px 24px; background: var(--en-tint-blue); border-radius: 14px; border: 1px solid var(--en-border); }
.en-letter-testi img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; float: left; margin: 0 14px 6px 0; border: 2px solid var(--en-border-strong); }
.en-letter-testi blockquote { margin: 0; font-size: var(--en-t-300); line-height: 1.7; }
.en-letter-testi figcaption { margin-top: 10px; font-size: var(--en-t-200); color: var(--en-muted); clear: both; }
.en-next-step { text-align: left; }
.en-next-step-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); line-height: 1.3; color: var(--en-ink); margin: 6px 0 8px; }
.en-next-step-sub { font-size: var(--en-t-200); line-height: 1.6; color: var(--en-muted); margin: 0 0 14px; }
.en-next-step-links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: var(--en-t-200); }
.en-next-step-navy .en-next-step-title { color: #fff; }
.en-next-step-navy .en-next-step-sub { color: var(--en-on-navy-body); }
.en-next-step-navy .en-next-step-links a { color: var(--en-blue-pale); }

/* ---------- Free starting path (/courses on-ramp) ----------
   A single narrow strip, not a grid of cards: the free courses are the way in,
   and they must not out-compete the paid library directly beneath them. Numbers
   and connecting rule carry the sequence; on mobile it stacks and the rule is
   dropped so the numbers still read as steps. */
.en-path {
	max-width: 880px; margin: 0 auto 34px; padding: 18px 20px 16px;
	border: 1px solid var(--en-line, rgba(120,140,160,.28)); border-radius: 14px;
	background: linear-gradient(180deg, rgba(127,208,242,.07), rgba(127,208,242,0));
}
.en-path-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.en-path-badge {
	font-size: var(--en-t-100); font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
	color: #0C2233; background: var(--en-blue-light, #7FD0F2);
	padding: 4px 9px; border-radius: 99px;
}
.en-path-lede { font-size: var(--en-t-200); color: var(--en-muted); }
.en-path-steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.en-path-step { position: relative; }
/* connecting rule between steps, behind the numbers */
.en-path-step + .en-path-step::before {
	content: ""; position: absolute; left: 0; top: 19px; width: 100%;
	border-top: 1px dashed rgba(120,140,160,.45); z-index: 0;
}
.en-path-step > a {
	position: relative; z-index: 1; display: flex; gap: 11px; align-items: flex-start;
	padding: 0 14px 0 0; text-decoration: none; color: inherit;
}
.en-path-num {
	flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center; font-size: var(--en-t-200); font-weight: 800;
	/* 14px white on --en-blue is 3.08:1. */
	background: var(--en-blue-deep, #147BB5); color: #fff;
	box-shadow: 0 0 0 5px var(--en-bg, #fff);
}
.en-path-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.en-path-title { font-weight: 700; font-size: var(--en-t-300); line-height: 1.32; }
.en-path-step > a:hover .en-path-title { color: var(--en-blue, #1E9BD7); }
.en-path-meta { font-size: var(--en-t-100); color: var(--en-muted); }
@media (max-width: 720px) {
	.en-path-steps { grid-template-columns: 1fr; gap: 12px; }
	.en-path-step + .en-path-step::before { display: none; }
}
/* ---------- Swipe library (affiliate resources) ----------
   Narrow measure in the preview on purpose: these emails were written as a
   column at ~500-600px and read wrong at full page width. */
.en-sl-head { max-width: 720px; margin-bottom: 26px; }
.en-sl-head h1 { margin: 6px 0 10px; }

.en-sl-config {
	border: 1px solid var(--en-line, rgba(120,140,160,.28)); border-radius: 14px;
	padding: 18px 20px; margin-bottom: 18px; background: rgba(127,208,242,.05);
}
.en-sl-config-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.en-sl-saved[hidden] { display: none; }
.en-sl-saved { font-size: var(--en-t-100); color: #1a8f4c; font-weight: 700; }
.en-sl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.en-sl-grid label { display: flex; flex-direction: column; gap: 5px; font-size: var(--en-t-200); font-weight: 600; }
.en-sl-grid input {
	padding: 9px 11px; border: 1px solid var(--en-line, rgba(120,140,160,.35));
	border-radius: 8px; font-size: var(--en-t-300); font-weight: 400;
}
.en-sl-grid small { font-weight: 400; font-size: var(--en-t-100); color: var(--en-muted); }
.en-sl-grid code { font-size: var(--en-t-100); background: rgba(120,140,160,.14); padding: 1px 4px; border-radius: 3px; }

.en-sl-guide { margin-bottom: 26px; font-size: var(--en-t-300); }
.en-sl-guide summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.en-sl-guide ol { margin: 8px 0 12px 1.1em; }
.en-sl-guide li { margin-bottom: 8px; line-height: 1.55; }

.en-sl-filters { margin-bottom: 24px; }
#en-sl-search {
	width: 100%; max-width: 420px; padding: 10px 13px; font-size: var(--en-t-300);
	border: 1px solid var(--en-line, rgba(120,140,160,.35)); border-radius: 9px; margin-bottom: 12px;
}
.en-sl-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.en-sl-tab {
	border: 1px solid var(--en-line, rgba(120,140,160,.3)); background: transparent;
	padding: 7px 13px; border-radius: 99px; font-size: var(--en-t-200); cursor: pointer; font-weight: 600;
}
.en-sl-tab span { opacity: .55; font-weight: 400; }
/* 13.5px white on --en-blue is 3.08:1. */
.en-sl-tab.is-on { background: var(--en-blue-deep, #147BB5); color: #fff; border-color: transparent; }

.en-sl-cat { margin-bottom: 34px; }
.en-sl-cat h2 { margin-bottom: 4px; }
.en-sl-when { color: var(--en-muted); font-size: var(--en-t-300); margin-bottom: 12px; }
.en-sl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--en-line, rgba(120,140,160,.2)); }
.en-sl-item { border-bottom: 1px solid var(--en-line, rgba(120,140,160,.2)); }
.en-sl-open {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	background: none; border: 0; padding: 12px 4px; text-align: left; cursor: pointer; font: inherit;
}
.en-sl-open:hover { background: rgba(127,208,242,.07); }
.en-sl-subject { font-weight: 600; font-size: var(--en-t-300); line-height: 1.4; }
/*
 * The star is the only marker separating a top-scoring swipe from the rest, so
 * it is a graphical object carrying meaning, not decoration -- WCAG 1.4.11
 * wants 3:1 and #E0A100 gave 2.27:1 on white, 2.15:1 on the tinted row. Darkened
 * until it clears 4.5:1 on both surfaces, which covers the text threshold too.
 * It stays recognisably gold; nothing else in the palette encodes "best".
 */
.en-sl-star { color: #8A6100; margin-right: 4px; }
.en-sl-meta { flex: 0 0 auto; font-size: var(--en-t-100); color: var(--en-muted); white-space: nowrap; }
.en-sl-badge-income {
	display: inline-block; margin-left: 6px; background: rgba(224,161,0,.16); color: #8a6100;
	font-weight: 800; border-radius: 4px; padding: 0 5px; font-size: var(--en-t-100);
}

/* [hidden] must win over display:flex, or the overlay never goes away.
   The UA stylesheet gives [hidden] display:none, but any author rule with a
   display beats it, so the viewer sat permanently over the list and no amount
   of clicking Close could dismiss it. */
.en-sl-modal[hidden] { display: none; }
.en-sl-modal {
	position: fixed; inset: 0; background: rgba(8,20,30,.62); z-index: 9999;
	display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow: auto;
}
.en-sl-modal-inner {
	background: #fff; color: #12232e; border-radius: 14px; width: 100%; max-width: 760px;
	padding: 22px 24px 20px; position: relative; box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.en-sl-close {
	position: absolute; top: 8px; right: 10px; z-index: 2;
	/* the parent theme styles bare <button>, which turned this into a blue
	   block sitting on top of the header actions */
	border: 0 !important; background: transparent !important; box-shadow: none !important;
	padding: 4px 8px !important; min-height: 0 !important; border-radius: 6px !important;
	font-size: var(--en-t-600); line-height: 1; cursor: pointer; color: #67808f !important;
}
.en-sl-close:hover { background: rgba(120,140,160,.14) !important; color: #12232e !important; }
.en-sl-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; padding-right: 44px; }
.en-sl-modal-head h3 { margin: 0; font-size: var(--en-t-400); line-height: 1.4; }
.en-sl-modal-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid rgba(120,140,160,.25); }
.en-sl-modal-tabs button { border: 0; background: none; padding: 8px 12px; cursor: pointer; font-size: var(--en-t-200); font-weight: 600; color: #67808f; border-bottom: 2px solid transparent; }
.en-sl-modal-tabs button.is-on { color: #12232e; border-bottom-color: var(--en-blue, #1E9BD7); }
.en-sl-pane[hidden] { display: none; }
.en-sl-pane { max-height: 58vh; overflow: auto; }
#en-sl-preview { max-width: 560px; font-size: var(--en-t-300); line-height: 1.62; }
#en-sl-preview p { margin: 0 0 1em; }
#en-sl-preview img { max-width: 100%; height: auto; }
.en-sl-pane textarea {
	width: 100%; min-height: 46vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--en-t-100); line-height: 1.5; padding: 12px; border: 1px solid rgba(120,140,160,.3); border-radius: 8px;
}
.en-sl-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.en-sl-note { font-size: var(--en-t-100); color: #8a6100; }
@media (max-width: 640px) {
	.en-sl-open { flex-direction: column; align-items: flex-start; gap: 4px; }
	.en-sl-modal-inner { padding: 18px 16px; }
}
/* ==========================================================================
   Partner dashboard + partner swipe
   --------------------------------------------------------------------------
   Both templates were rewritten with a new .en-pdash-* / .en-swipe-* markup
   system and shipped without a stylesheet, so every page rendered as bare
   bullets and unstyled inputs. 41 dashboard classes and 31 swipe classes had
   no rule behind them at all.

   Written to match the existing relaunch design already in this file: navy and
   blue, Archivo for headings via the parent theme, cards on a hairline border
   with a soft blue wash, pill and chip controls. Nothing here overrides
   .en-btn, .en-wrap or any shared class.
   ========================================================================== */

/* ---------- shared shell ---------- */
.en-pdash,
.en-swipe { max-width: 1080px; margin: 0 auto; padding: 34px 22px 70px; }

/* A gate card is the only object on its page, so it is sized like a card and
   not like a full-width strip: 1036px of border around two buttons was reading
   as an empty container rather than a prompt. */
.en-pdash-gate,
.en-swipe-gate {
	max-width: 560px; margin: 0 auto;
	border: 1px solid var(--en-line, rgba(120,140,160,.28));
	border-radius: 14px; padding: 30px 28px; text-align: center;
	background: linear-gradient(180deg, rgba(127,208,242,.08), rgba(127,208,242,0));
	box-shadow: var(--en-card-shadow);
}
.en-pdash-gate-title,
.en-swipe-gate-title {
	font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600);
	line-height: 1.25; color: var(--en-ink); letter-spacing: -.3px;
}
.en-pdash-gate p,
.en-swipe-gate p { color: var(--en-muted); margin: 8px 0 18px; font-size: var(--en-t-300); line-height: 1.6; }
/* Two buttons in a 560px card stack rather than sit side by side at the bottom
   of a wide box; the ghost one is the alternative, so it goes underneath. */
.en-pdash-gate .en-btn,
.en-swipe-gate .en-btn { display: block; }
.en-pdash-gate .en-btn-ghost,
.en-swipe-gate .en-btn-ghost { display: block; margin-top: 10px; }

/* ---------- status strip ---------- */
.en-pdash-status {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding-bottom: 16px; margin-bottom: 22px;
	border-bottom: 1px solid var(--en-line, rgba(120,140,160,.22));
}
.en-pdash-pill {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--en-t-100); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 99px;
}
.en-pdash-pill--ok   { background: rgba(26,143,76,.14);  color: #147a3f; }
.en-pdash-pill--warn { background: rgba(224,161,0,.16);  color: #8a6100; }
.en-pdash-meta { font-size: var(--en-t-200); color: var(--en-muted); }
.en-pdash-meta a { color: var(--en-blue-deep, #1173a8); }

/* ---------- KPI row ---------- */
.en-pdash-kpis {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 12px; margin-bottom: 14px;
}
.en-pdash-kpi {
	border: 1px solid var(--en-line, rgba(120,140,160,.26)); border-radius: 12px;
	padding: 14px 15px; background: #fff;
}
.en-pdash-kpi-n {
	font-family: Archivo, system-ui, sans-serif;
	font-size: var(--en-t-700); font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
}
.en-pdash-kpi-l {
	margin-top: 4px; font-size: var(--en-t-100); color: var(--en-muted); line-height: 1.35;
}

/* ---------- cards ---------- */
.en-pdash-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 18px; margin-top: 22px;
}
.en-pdash-card {
	border: 1px solid var(--en-line, rgba(120,140,160,.26)); border-radius: 14px;
	padding: 20px 20px 22px; background: #fff;
}
.en-pdash-card--wide   { grid-column: 1 / -1; }
.en-pdash-card--footer { grid-column: 1 / -1; background: rgba(127,208,242,.05); }
.en-pdash-h3 {
	font-family: Archivo, system-ui, sans-serif;
	font-size: var(--en-t-400); font-weight: 800; margin: 0 0 6px;
}
.en-pdash-help {
	font-size: var(--en-t-200); color: var(--en-muted); line-height: 1.55; margin: 0 0 14px;
}
.en-pdash-help code,
.en-swipe-hint code {
	font-size: var(--en-t-100); background: rgba(120,140,160,.14);
	padding: 1px 5px; border-radius: 4px; word-break: break-all;
}

/* ---------- form controls ---------- */
.en-pdash-label,
.en-swipe-field > label {
	display: block; font-size: var(--en-t-200); font-weight: 700; margin-bottom: 5px;
}
.en-pdash-optional {
	font-weight: 400; font-size: var(--en-t-100); color: var(--en-muted); margin-left: 5px;
}
.en-pdash-input,
.en-swipe-field input,
.en-swipe-field textarea {
	width: 100%; padding: 9px 12px; font-size: var(--en-t-300);
	border: 1px solid var(--en-line, rgba(120,140,160,.35)); border-radius: 9px;
	background: #fff;
}
.en-pdash-input:focus,
.en-swipe-field input:focus {
	outline: 2px solid rgba(30,155,215,.35); outline-offset: 1px; border-color: var(--en-blue, #1E9BD7);
}
.en-pdash-utm-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px; margin-top: 12px;
}

/* ---------- preset chips ---------- */
.en-pdash-presets {
	display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px;
}
.en-pdash-presets--src { margin-top: 8px; }
.en-pdash-chip {
	border: 1px solid var(--en-line, rgba(120,140,160,.3)); background: #fff;
	padding: 6px 12px; border-radius: 99px; font-size: var(--en-t-200); font-weight: 600;
	cursor: pointer; line-height: 1.3;
	/* Kadence styles every <button> as a filled CTA and sets
	   color: var(--global-palette-btn), which resolves to #ffffff. This chip
	   repaints the background white but never restated the colour, so the 18
	   link-builder chips on /partners-dashboard/ rendered #fff on #fff: 1.00:1,
	   an empty outline with no readable label. The tell was that :hover and
	   .is-on looked fine - both declare a colour of their own.
	   Same bug and same fix as .en-sl-tab on the swipe library: state the colour
	   here, beside the background it belongs to, so it cannot be inherited away
	   again. --en-ink on #fff is 16.02:1.
	   Declared on the base rule rather than appended at the end of the file on
	   purpose: .en-swipe-product-use and .en-pdash-product-use are this same chip
	   carrying --en-muted at 5.51:1, and they already pass. A tail rule of equal
	   specificity would win over both and restyle 30 chips that were never
	   broken. */
	color: var(--en-ink, #16232C);
}
.en-pdash-chip:hover { border-color: var(--en-blue, #1E9BD7); color: var(--en-blue-deep, #1173a8); }
.en-pdash-chip.is-on,
.en-pdash-chip[aria-pressed="true"] {
	/* 13px white on --en-blue is 3.08:1. */
	background: var(--en-blue-deep, #147BB5); border-color: transparent; color: #fff;
}
.en-pdash-chip--src { font-weight: 500; }

/* ---------- click bars ---------- */
.en-pdash-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.en-pdash-bars li { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 10px; }
.en-pdash-bar-label { font-size: var(--en-t-100); color: var(--en-muted); white-space: nowrap; }
.en-pdash-bar-track {
	height: 9px; border-radius: 99px; background: rgba(120,140,160,.16); overflow: hidden;
}
.en-pdash-bar-fill {
	display: block; height: 100%; border-radius: 99px;
	background: linear-gradient(90deg, var(--en-blue, #1E9BD7), var(--en-blue-light, #7FD0F2));
	min-width: 2px;
}
.en-pdash-bar-n { font-size: var(--en-t-100); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Partner swipe
   ========================================================================== */
.en-swipe-toolbar {
	border: 1px solid var(--en-line, rgba(120,140,160,.28)); border-radius: 14px;
	padding: 18px 20px; margin-bottom: 24px; background: rgba(127,208,242,.05);
}
.en-swipe-toolbar-row {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
}
.en-swipe-toolbar-row + .en-swipe-toolbar-row { margin-top: 14px; }
.en-swipe-utm { padding-top: 14px; border-top: 1px dashed var(--en-line, rgba(120,140,160,.28)); }
.en-swipe-field { display: flex; flex-direction: column; }
.en-swipe-field--wide { grid-column: 1 / -1; }
.en-swipe-hint { font-size: var(--en-t-100); color: var(--en-muted); font-weight: 400; margin: 4px 0 0; line-height: 1.45; }
.en-swipe-name-note,
.en-swipe-path-note { font-size: var(--en-t-100); color: var(--en-muted); margin-top: 4px; }
.en-swipe-path-row { display: flex; gap: 8px; align-items: center; }
.en-swipe-path-row input { flex: 1 1 auto; }
.en-swipe-custom-path { flex: 1 1 auto; }

.en-swipe-live-link {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-top: 14px; padding-top: 14px;
	border-top: 1px dashed var(--en-line, rgba(120,140,160,.28));
}
.en-swipe-live-label { font-size: var(--en-t-100); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--en-muted); }
.en-swipe-live-url {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--en-t-100);
	background: rgba(120,140,160,.12); padding: 5px 9px; border-radius: 7px;
	word-break: break-all; flex: 1 1 260px;
}
.en-swipe-dash { font-size: var(--en-t-200); color: var(--en-blue-deep, #1173a8); white-space: nowrap; }
.en-swipe-note { font-size: var(--en-t-200); color: var(--en-muted); line-height: 1.55; margin: 10px 0 0; }

/* ---------- product link list ---------- */
.en-swipe-products { margin: 30px 0; }
.en-swipe-section {
	display: block; font-family: Archivo, system-ui, sans-serif;
	font-size: var(--en-t-500); font-weight: 800; margin: 0 0 6px;
}
.en-swipe-product-group {
	display: block; font-size: var(--en-t-100); font-weight: 800; letter-spacing: .07em;
	text-transform: uppercase; color: var(--en-muted); margin: 20px 0 8px;
}
.en-swipe-product-list { list-style: none; margin: 0; padding: 0; }
.en-swipe-product-list > li {
	display: flex; justify-content: space-between; align-items: center; gap: 14px;
	padding: 11px 0; border-bottom: 1px solid var(--en-line, rgba(120,140,160,.2));
	flex-wrap: wrap;
}
.en-swipe-product-meta { flex: 1 1 260px; min-width: 0; }
.en-swipe-product-use { font-size: var(--en-t-100); color: var(--en-muted); display: block; margin-top: 2px; }
.en-swipe-product-link {
	display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--en-t-100); color: var(--en-blue-deep, #1173a8); word-break: break-all; margin-top: 3px;
}
.en-swipe-product-actions { display: flex; gap: 7px; flex: 0 0 auto; }

/* ---------- swipe cards ---------- */
.en-swipe-card {
	border: 1px solid var(--en-line, rgba(120,140,160,.26)); border-radius: 14px;
	padding: 18px 20px 20px; margin-bottom: 16px; background: #fff;
}
.en-swipe-card-head {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 14px; margin-bottom: 12px; flex-wrap: wrap;
}
.en-swipe-src {
	font-size: var(--en-t-100); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--en-muted);
}
.en-swipe-subject { font-size: var(--en-t-200); color: var(--en-muted); margin-bottom: 10px; }
.en-swipe-subject-out { color: var(--en-body-c, #12232e); font-weight: 700; }
.en-swipe-body {
	white-space: pre-wrap; word-break: break-word; font-family: inherit;
	font-size: var(--en-t-300); line-height: 1.62; margin: 0;
	background: rgba(120,140,160,.06); border-radius: 10px; padding: 14px 16px;
	max-height: 420px; overflow: auto;
}
.en-swipe-copied {
	font-size: var(--en-t-100); font-weight: 700; color: #147a3f; margin-left: 8px;
}
.en-swipe-footer-help {
	font-size: var(--en-t-200); color: var(--en-muted); line-height: 1.6;
	margin-top: 26px; padding-top: 18px;
	border-top: 1px solid var(--en-line, rgba(120,140,160,.22));
}

@media (max-width: 640px) {
	.en-pdash, .en-swipe { padding: 24px 16px 56px; }
	.en-pdash-bars li { grid-template-columns: 54px 1fr 28px; }
	.en-swipe-product-list > li { flex-direction: column; align-items: flex-start; }
	.en-swipe-card-head { flex-direction: column; }
}

/* ---------- dashboard: tables, generated output, rules ----------
   Second pass. These classes are in the template but had no rule, so the
   commission tables rendered as bare rows and the built link came out as
   unstyled text. */
.en-pdash-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
.en-pdash-table { width: 100%; border-collapse: collapse; font-size: var(--en-t-200); }
.en-pdash-table th,
.en-pdash-table td {
	text-align: left; padding: 9px 12px 9px 0;
	border-bottom: 1px solid var(--en-line, rgba(120,140,160,.2));
	vertical-align: top;
}
.en-pdash-table th {
	font-size: var(--en-t-100); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--en-muted); white-space: nowrap;
}
.en-pdash-table tr:last-child td { border-bottom: 0; }
.en-pdash-table--utm td:first-child,
.en-pdash-table--utm th:first-child { white-space: nowrap; }
.en-pdash-table--products td { vertical-align: middle; }
.en-pdash-price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.en-pdash-out-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.en-pdash-out {
	flex: 1 1 260px; min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--en-t-100);
	background: rgba(120,140,160,.12); border: 1px solid var(--en-line, rgba(120,140,160,.24));
	padding: 9px 11px; border-radius: 8px; word-break: break-all; line-height: 1.45;
}
.en-pdash-msg { font-size: var(--en-t-100); font-weight: 700; color: #147a3f; margin: 8px 0 0; min-height: 1.2em; }

.en-pdash-rules { margin: 0; padding-left: 1.15em; font-size: var(--en-t-200); line-height: 1.65; color: var(--en-muted); }
.en-pdash-rules li { margin-bottom: 6px; }
.en-pdash-rules a { color: var(--en-blue-deep, #1173a8); }

.en-pdash-product-link {
	display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--en-t-100); color: var(--en-blue-deep, #1173a8); word-break: break-all; margin-top: 3px;
}
.en-pdash-product-use { font-size: var(--en-t-100); color: var(--en-muted); display: block; margin-top: 2px; }
.en-pdash-product-copy { white-space: nowrap; }

/* Copy buttons already carry .en-btn / .en-btn-ghost; these only stop the
   label reflowing mid-word when the button sits in a tight table cell. */
.en-swipe-copy,
.en-sl-copy,
.en-swipe-product-copy { white-space: nowrap; }

/* ==========================================================================
   Classes the templates emit that had no rule at all
   ==========================================================================
   A DOM-vs-stylesheet diff across the site found 24 of these. Most were
   harmless (a hook with no visual job), but three were not: .en-lede rendered
   --en-ink on the navy band at 1.01:1, and the two .en-help-* groups made up
   the entire support widget. Each one below is either given the styling its
   markup clearly expects, or noted as behaviour-only. */

/* .en-lede - the sub-headline under a band h1. Undefined, so it inherited
   --en-ink (#16232C) from <body>. On /swipe-library/ logged out that lands on
   the navy topbar: 1.01:1. The headline above it was the same failure - an
   <h1> with no colour rule in that context - so both are handled here. */
.en-lede {
  font-size: var(--en-t-400); line-height: 1.7; color: var(--en-body-c);
  max-width: 640px; margin: 0 0 14px;
}
.en-topbar .en-lede { color: var(--en-on-navy-body); }
/*
 * en_cta_band()'s fine print. It renders inside the navy band on /blogging/ and
 * had no colour of its own, so it inherited --en-ink (#16232C) and measured
 * 1.01:1 on #0C2233 - the 30-day guarantee line on a paid offer page, rendered
 * invisible. The buttons beside it already have navy-band rules; this did not.
 * Scoped to .en-topbar so the same band on a white surface keeps body colour.
 */
.en-topbar .en-band-cta-note { color: var(--en-on-navy-body); }

/* The row that note sits in had no layout rule at all, so its two buttons and
   the note were simply three inline-blocks on one line: the button pair sat hard
   left under a centred headline and lede, and the guarantee ran off to the right
   of them, reading as a third button rather than as fine print. Centring the row
   and giving the note its own full-width line puts it back under the buttons.
   .en-band-cta is used in exactly one place (template-blogging.php:28), so this
   is scoped to the /blogging/ hero by construction. */
.en-band-cta {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 12px; margin-top: 26px;
}
.en-band-cta .en-band-cta-note { flex-basis: 100%; text-align: center; margin-top: 2px; }
/* Safety net for any heading dropped straight into the navy band without one of
   the band classes. Every existing band rule is at least as specific, so this
   changes nothing that was already correct. */
.en-topbar > .en-wrap h1,
.en-topbar > .en-narrow h1,
.en-topbar > .en-container h1 { color: #fff; }
/* .en-wrap - a bare max-width wrapper used alongside .en-narrow. */
.en-wrap { max-width: 1240px; margin: 0 auto; }

/*
 * Products page section headings (template-products.php).
 *
 * These are bare divs/paragraphs dropped between .en-prod-grid blocks, so they
 * had no container of their own: measured left:0 width:1440 padding:0 while the
 * grid they label starts at left:132. Three headings full-bleed to the viewport
 * edge on the pricing page.
 *
 * A margin, not a centred max-width box: .en-prod-section-sub also caps its
 * measure at 640px, and `margin: 0 auto` on a 640px box would centre it in the
 * viewport instead of starting it on the gutter. max() collapses to the flat
 * 32px edge padding once the viewport is narrower than the 1240px container,
 * which is what .en-prod-grid does at 390px.
 */
.en-prod-section-label,
.en-prod-section-sub {
  margin-left: max(32px, calc(50% - 588px));
  margin-right: max(32px, calc(50% - 588px));
}
.en-prod-section-label {
  display: block; font-family: var(--en-display); font-weight: 800;
  font-size: var(--en-t-600); letter-spacing: -.3px; color: var(--en-ink);
  margin-top: 44px; margin-bottom: 4px;
}
.en-prod-section-sub {
  font-size: var(--en-t-300); line-height: 1.65; color: var(--en-muted);
  margin-top: 0; margin-bottom: 22px; max-width: 640px;
}
.en-prod-grid-classics { margin-top: 8px; }

/* Letter pages (template-blogging.php / template-vault.php) band wrapper. */
.en-letter-band { max-width: 1240px; margin: 0 auto; padding: 46px 32px 52px; }

/* Course hero copy column (single-en_course.php) - grid child, no own box. */
.en-course-hero-copy { min-width: 0; }

/* Gate card kicker, above .en-gate-title on navy. */
.en-gate-kicker {
  display: block; font-size: var(--en-t-100); font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--en-blue-pale); margin-bottom: 10px;
}

/* Lesson/episode media. .en-audio-player and .en-guide-dl are also JS hooks;
   the rules here are only so they do not inherit odd widths. */
.en-player-wrap { position: relative; margin: 0 0 20px; }
.en-player-wrap video { width: 100%; display: block; border-radius: 12px; background: #000; }
.en-audio-player { width: 100%; display: block; margin-top: 4px; }

/* Checkout: "buying as you@example.com" line. */
.en-buying-as { font-size: var(--en-t-200); color: var(--en-muted); margin: 0 0 12px; }

/* Claim page attestation form (page-claim.php). */
.en-attest-form { margin-top: 18px; }
.en-attest-form label { display: flex; gap: 9px; align-items: flex-start; font-size: var(--en-t-300); line-height: 1.55; margin-bottom: 10px; cursor: pointer; }
.en-attest-msg { margin-top: 10px; font-size: var(--en-t-200); font-weight: 600; color: var(--en-blue-ink); min-height: 1.2em; }

/* Blog index "next page" row and single-post sidebar capture slot. */
.en-blog-band-next { margin-top: 18px; }
.en-sidebar-capture { margin-top: 18px; }

/*
 * Behaviour-only, deliberately left without CSS:
 *   .en-guide-dl       - JS hook on a .en-btn-ghost download button.
 *   .en-pdash-pill--*  - modifier built by string concatenation in PHP; the
 *                        bare prefix never reaches the DOM.
 */

/* ==========================================================================
   Support launcher (en_help_launcher() in functions.php)
   ==========================================================================
   The markup for this went out to all 3,255 sites with no CSS behind any of its
   eight classes. The FAB rendered as a 45x43 Kadence-blue square wedged into the
   document flow underneath the footer, and the panel as a full-width transparent
   block. It is a floating launcher, so it is styled as one. */
.en-help-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--en-navy); color: #fff; cursor: pointer;
  font-family: var(--en-display); font-size: var(--en-t-700); font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(12, 34, 51, .38);
  transition: transform .18s ease, background .18s ease;
}
.en-help-fab:hover { background: #14364f; transform: translateY(-2px); }
.en-help-fab[aria-expanded="true"] { background: var(--en-blue-ink); }

.en-help-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 9999;
  width: 360px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: #fff; color: var(--en-ink);
  border: 1px solid var(--en-border-strong); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(12, 34, 51, .28);
  padding: 18px 20px 20px; font-family: var(--en-sans);
}
.en-help-panel[hidden] { display: none; }
.en-help-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-400);
  color: var(--en-ink); margin-bottom: 14px;
}
.en-help-close {
  border: 0; background: none; cursor: pointer; font-size: var(--en-t-600); line-height: 1;
  padding: 2px 6px; border-radius: 8px; color: var(--en-muted);
}
.en-help-close:hover { background: var(--en-tint); color: var(--en-ink); }
.en-help-form { display: block; }
/* 7.0:1 on white - these are 13px labels, so they get the darker ink. */
.en-help-label {
  display: block; font-size: var(--en-t-200); font-weight: 700; color: #41525E;
  margin: 12px 0 5px;
}
.en-help-label:first-child { margin-top: 0; }
.en-help-form select,
.en-help-form input[type="email"],
.en-help-form textarea {
  width: 100%; box-sizing: border-box; font-family: var(--en-sans); font-size: var(--en-t-300);
  color: var(--en-ink); background: var(--en-tint-gray);
  border: 1.5px solid #c9d6e4; border-radius: 10px; padding: 11px 12px;
}
.en-help-form textarea { resize: vertical; min-height: 88px; }
.en-help-form .en-btn { margin-top: 14px; }
.en-help-note {
  margin: 12px 0 0; font-size: var(--en-t-200); line-height: 1.6; color: var(--en-body-c);
  background: var(--en-tint-blue); border-left: 3px solid var(--en-blue);
  border-radius: 0 8px 8px 0; padding: 10px 12px;
}
.en-help-note[hidden] { display: none; }
.en-help-msg { margin-top: 12px; font-size: var(--en-t-200); line-height: 1.55; font-weight: 600; color: var(--en-blue-ink); }
@media (max-width: 520px) {
  .en-help-fab { right: 14px; bottom: 14px; }
  .en-help-panel {
    right: 8px; left: 8px; bottom: 80px; width: auto;
    max-width: none; max-height: calc(100vh - 100px);
  }
}
/* Printing a floating launcher is noise. */
@media print { .en-help-fab, .en-help-panel, .en-skip { display: none !important; } }

/* ==========================================================================
   Member account menu (header.php)
   ==========================================================================
   Logged-in members had their Log In button replaced by an upsell and nothing
   else: no log out, and no route to anything they had already paid for. This is
   the small account menu that now sits beside that button. Native <details>, so
   it works with no JS and is keyboard-operable for free. */
.en-nav-acct { position: relative; }
.en-nav-acct > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px; font-size: var(--en-t-200); font-weight: 700;
  color: var(--en-on-navy); border: 1px solid var(--en-border-navy);
}
.en-nav-acct > summary::-webkit-details-marker { display: none; }
/* The initials disc used to be the whole control. It is now the mark beside the
   word "Account", which is the part a member can actually recognise. */
.en-nav-acct-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-family: var(--en-display); font-size: var(--en-t-100); font-weight: 800; letter-spacing: .3px;
}
.en-nav-acct-word { white-space: nowrap; }
.en-nav-acct > summary:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.en-nav-acct > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.en-nav-acct[open] > summary { color: #fff; border-color: rgba(255, 255, 255, .3); }
.en-nav-acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  min-width: 210px; background: #fff; border-radius: 12px; padding: 6px;
  box-shadow: 0 18px 44px rgba(12, 34, 51, .3); border: 1px solid var(--en-border);
  display: flex; flex-direction: column;
}
.en-nav-acct-menu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font-size: var(--en-t-200); font-weight: 600; color: var(--en-ink) !important;
}
.en-nav-acct-menu a:hover { background: var(--en-tint-blue); color: var(--en-blue-ink) !important; }
.en-nav-acct-menu hr { border: 0; border-top: 1px solid var(--en-border); margin: 5px 8px; }
.en-nav-acct-menu .en-nav-acct-out { color: var(--en-muted) !important; }
/* The mobile nav is a stacked navy panel; the menu drops inline there. */
@media (max-width: 782px) {
  .en-nav-acct { width: 100%; box-sizing: border-box; padding: 4px 32px 0; }
  .en-nav-acct > summary { width: 100%; box-sizing: border-box; justify-content: space-between; }
  .en-nav-acct-menu { position: static; margin-top: 8px; }
}
/* ==========================================================================
   Blog design picker + the /blogging/ designs band
   --------------------------------------------------------------------------
   Two surfaces, one grid: /blog-design/ (a member choosing) and the section at
   the foot of /blogging/ (a reader deciding whether to pay). They share a
   renderer, so they share a stylesheet block.

   Everything here reads existing tokens. No new heading size - the card title
   is --en-t-600, the same step .en-pdash-gate-title uses - and no new button:
   the actions row uses .en-btn/.en-btn-sm and .en-btn-ghost exactly as they
   ship, setting only layout (display, flex) which is explicitly what a context
   is allowed to set.
   ========================================================================== */

.en-skin-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Cards are flex columns so the actions row sits on the baseline of every card
   regardless of how long its description ran. Eighteen cards with ragged
   buttons is the difference between a gallery and a list. */
.en-skin-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--en-border-strong); border-radius: 14px;
  background: #fff; overflow: hidden;
  box-shadow: var(--en-card-shadow);
}
/* The blog's current design. A ring plus a worded badge in the corner - the
   ring alone is colour-only, which is not a distinction for anyone who cannot
   see it, and the wording is what a screen reader reaches. */
.en-skin-card--on {
  border-color: var(--en-blue-deep);
  box-shadow: 0 0 0 2px var(--en-blue-deep), var(--en-card-shadow);
}

/* ---------- the screenshot ---------- */
/* 4:3 box reserved up front. These are real page captures at 1440 wide scaled
   down, and eighteen of them arriving without a reserved box would reflow the
   whole gallery under the reader. */
.en-skin-shot {
  position: relative;
  aspect-ratio: 4 / 3; background: var(--en-tint-gray);
  border-bottom: 1px solid var(--en-border);
}
.en-skin-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
/* Palette strip, shown only when a design has no screenshot yet. */
.en-skin-swatches { display: flex; width: 100%; height: 100%; }
.en-skin-swatches span { flex: 1 1 0; }
/* Sits on the shot, so it carries its own dark plate rather than trusting
   whatever pixels happen to be under it: 12.6:1 white on #0C2233. */
.en-skin-on {
  position: absolute; left: 10px; top: 10px;
  background: var(--en-navy); color: #fff;
  font-size: var(--en-t-100); font-weight: 800; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 99px;
}

/* ---------- the copy ---------- */
.en-skin-body { padding: 16px 18px 4px; flex: 1 1 auto; }
.en-skin-name {
  margin: 0; font-family: var(--en-display); font-weight: 800;
  font-size: var(--en-t-600); line-height: 1.25; color: var(--en-ink);
  letter-spacing: -.3px;
}
/* Provenance. --en-faint is the audited 4.5:1-on-white token; --en-muted would
   also pass but this line is deliberately quieter than the description. */
.en-skin-note {
  margin: 5px 0 0; font-size: var(--en-t-200); line-height: 1.45;
  color: var(--en-faint);
}
.en-skin-blurb {
  margin: 9px 0 14px; font-size: var(--en-t-300); line-height: 1.6;
  color: var(--en-body-c);
}

/* ---------- actions ---------- */
.en-skin-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 18px 18px; margin-top: auto;
}
.en-skin-actions form { margin: 0; }
.en-skin-actions .en-btn,
.en-skin-actions .en-btn-ghost { --en-btn-fs: var(--en-t-200); --en-btn-pad: 10px 16px; }
.en-skin-current {
  font-size: var(--en-t-200); font-weight: 700; color: var(--en-blue-ink);
}

/* ---------- hand-off to the Design studio ---------- */
/* This page shows the library; the studio (in the member's own wp-admin) is
   where a design is actually applied. That button is the primary action here,
   so it gets the room a primary action needs rather than sitting in the
   help-text line. */
.en-skin-studio-cta {
  margin: 0 0 26px; padding: 18px 20px;
  border: 1px solid var(--en-border-strong); border-radius: 14px;
  background: linear-gradient(180deg, rgba(127,208,242,.10), rgba(127,208,242,0));
  text-align: center;
}
.en-skin-studio-cta .en-pdash-help { max-width: 640px; margin-inline: auto; }

/* ==========================================================================
   /blogging/ - the designs band under the letter
   ========================================================================== */
.en-skins-band {
  max-width: 1240px; margin: 0 auto; padding: 8px 32px 64px;
}
.en-skins-band-head { max-width: 720px; margin: 0 auto 30px; text-align: center; }
/* .en-badge is defined for the navy bands; on white it needs ink that passes. */
.en-skins-band-head .en-badge {
  background: var(--en-chip); color: var(--en-chip-text); margin-bottom: 16px;
}
.en-skins-band-head h2 {
  margin: 0 0 14px; font-family: var(--en-display); font-weight: 800;
  font-size: var(--en-t-800); line-height: 1.15; color: var(--en-ink);
  letter-spacing: -.5px;
}
.en-skins-band-lede {
  margin: 0 0 12px; font-size: var(--en-t-400); line-height: 1.7;
  color: var(--en-body-c);
}
.en-skins-band-note {
  max-width: 720px; margin: 26px auto 0; text-align: center;
  font-size: var(--en-t-200); line-height: 1.65; color: var(--en-faint);
}
.en-skins-band-cta {
  margin-top: 30px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.en-skins-band-cta .en-band-cta-note {
  font-size: var(--en-t-200); color: var(--en-faint);
}

/* On /blogging/ nobody is choosing yet, so the cards carry no actions row and
   the copy can breathe to the bottom edge. */
.en-skin-grid--sell .en-skin-body { padding-bottom: 18px; }

@media (max-width: 782px) {
  .en-skin-grid { grid-template-columns: 1fr; gap: 16px; }
  .en-skins-band { padding: 4px 20px 48px; }
  .en-skins-band-head h2 { font-size: var(--en-t-700); }
  /* A single-column gallery of eighteen full-height cards is a very long
     scroll; the shot gets shorter so more of the list is reachable. */
  .en-skin-shot { aspect-ratio: 16 / 10; }
  .en-skin-actions .en-btn,
  .en-skin-actions .en-btn-ghost { flex: 1 1 auto; }
}
/* --------------------------------------------------------------------------
 * Swipe library: subject lines and filter chips were invisible.
 *
 * Both are <button> elements, and the theme's button styling assumes a filled
 * CTA with white text. These two are unfilled and sit on white, so the text
 * inherited #fff on #fff. The tell was that "All 193" rendered fine -- it
 * carries .is-on, which sets colour explicitly on a blue fill -- while every
 * other chip was a blank outline. Same for .en-sl-meta ("579 words"), which
 * was legible only because it declares its own colour.
 *
 * Fixed by stating the colour on the buttons themselves rather than relying on
 * inheritance, so a later change to the CTA styling cannot blank them again.
 * ------------------------------------------------------------------------ */
.en-sl-open { color: var(--en-ink, #14232E); }
.en-sl-tab  { color: var(--en-ink, #14232E); }
.en-sl-tab.is-on { color: #fff; }
.en-sl-subject { color: var(--en-ink, #14232E); }
.en-sl-open:hover .en-sl-subject { color: var(--en-blue-deep, #147BB5); }

/* Legend for the star and the $ badge -- both were unexplained on the page. */
.en-sl-legend {
	display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
	margin: 0 0 18px; padding: 10px 14px;
	border: 1px solid var(--en-line, rgba(120,140,160,.2));
	border-radius: 8px; background: rgba(120,140,160,.05);
	font-size: var(--en-t-200); color: var(--en-ink-2, #41566A);
}
.en-sl-legend span { display: inline-flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------------------
 * Blogging System is one product with two options, so its card spans two of
 * the three grid columns and carries the real product shot at contain rather
 * than the 150px cover crop, which reduced a wide shelf photograph to a strip.
 * ------------------------------------------------------------------------ */
.en-prod-card-wide { grid-column: span 2; }
.en-prod-cover-hero {
	width: 100%; height: 260px; object-fit: contain; display: block;
	background: #fff; border-radius: 10px;
}
.en-prod-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: auto; }
.en-prod-tier {
	border: 1px solid rgba(14, 42, 60, .14); border-radius: 14px; padding: 20px 20px 22px;
	display: flex; flex-direction: column; gap: 8px;
}
.en-prod-tier-best { border-color: var(--en-blue); background: rgba(27, 155, 224, .04); }
.en-prod-tier-name { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); }
.en-prod-tier-note { font-size: var(--en-t-200); color: var(--en-muted); }
.en-prod-tier .en-prod-price { margin-top: 6px; }
.en-prod-tier .en-btn { margin-top: 10px; text-align: center; }
.en-prod-tier-foot { font-size: var(--en-t-100); color: var(--en-faint); text-align: center; margin-top: 14px; }
@media (max-width: 900px) {
	.en-prod-card-wide { grid-column: span 1; }
	.en-prod-tiers { grid-template-columns: 1fr; }
	.en-prod-cover-hero { height: 200px; }
}

/* products polish -------------------------------------------------------
 * The shelf shot is 1024x570. Contained in a 260px box it sat small with
 * wide empty margins, so the box gets taller and the card's own padding
 * comes in -- the photograph is the thing worth looking at here.
 *
 * .en-prod-flag was a pill absolutely positioned over the card's top border,
 * which reads as detached rather than attached. The courses listing puts its
 * equivalent inline in the flow (.en-path-badge) and that is the better
 * pattern: in the card, out of the way, no overlap.
 * ---------------------------------------------------------------------- */
.en-prod-card-wide { padding: 26px 26px 30px; }
.en-prod-cover-hero { height: 400px; }

.en-prod-flag {
	position: static; transform: none; left: auto; top: auto;
	align-self: flex-start;
	background: rgba(27, 155, 224, .10); color: var(--en-blue-ink);
	font-size: var(--en-t-100); font-weight: 700; letter-spacing: 1.2px;
	padding: 4px 11px; border-radius: 6px; white-space: nowrap;
	order: -1; margin-bottom: 2px;
}
@media (max-width: 900px) {
	.en-prod-cover-hero { height: 220px; }
	.en-prod-card-wide { padding: 22px 20px 26px; }
}

/* The free on-ramp card, given something to say in the space its taller
 * neighbour created. One row per course: name, lesson count, and the single
 * line that tells a reader whether it is for them. */
.en-free-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 10px; }
.en-free-item {
	padding: 13px 0; border-bottom: 1px solid rgba(14, 42, 60, .09);
	display: flex; flex-direction: column; gap: 4px;
}
.en-free-item:last-child { border-bottom: 0; }
.en-free-name { font-weight: 700; font-size: var(--en-t-300); color: var(--en-ink, #14232E); }
.en-free-name em {
	font-style: normal; font-weight: 600; font-size: var(--en-t-100);
	color: var(--en-blue-ink); letter-spacing: .04em; margin-left: 7px; white-space: nowrap;
}
.en-free-line { font-size: var(--en-t-200); line-height: 1.55; color: var(--en-muted); }
.en-free-note {
	font-size: var(--en-t-100); line-height: 1.5; color: var(--en-faint);
	padding: 11px 13px; border-radius: 8px; background: rgba(120, 140, 160, .07); margin-bottom: 4px;
}

/* The one real quote that fits a free-course card: about the training, with no
 * income claim, attributed and dated so its age is visible rather than hidden. */
.en-free-quote {
	margin: 14px 0 8px; padding: 16px 18px;
	border-left: 3px solid var(--en-blue); border-radius: 0 8px 8px 0;
	background: rgba(27, 155, 224, .05);
}
.en-free-quote blockquote {
	margin: 0 0 10px; padding: 0; border: 0;
	font-size: var(--en-t-300); line-height: 1.6; color: var(--en-ink, #14232E); font-style: italic;
}
.en-free-quote blockquote::before { content: "\201C"; }
.en-free-quote blockquote::after  { content: "\201D"; }
.en-free-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.en-free-quote-name { font-weight: 700; font-size: var(--en-t-200); color: var(--en-ink, #14232E); }
.en-free-quote-ctx  { font-size: var(--en-t-100); color: var(--en-muted); }
.en-free-quote-note { font-size: 11.5px; line-height: 1.45; color: var(--en-faint); margin: 0 0 6px; }
.en-free-quote-note a { color: var(--en-blue-ink); }

/* sticky bar centring -------------------------------------------------------
 * The bar spans the viewport, but its inner row had no max-width and no auto
 * margins, so on a wide screen the copy and the two buttons sat hard against
 * the left edge with the rest of the bar empty. Everything else on /blogging/
 * is centred within a 1240px measure; this now matches, and the copy and the
 * actions sit at opposite ends of that measure rather than of the screen.
 * ------------------------------------------------------------------------ */
.en-sticky-buy-inner {
	max-width: 1240px; margin: 0 auto;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 14px 22px; padding-left: 22px; padding-right: 22px;
}
.en-sticky-buy-copy    { display: flex; flex-direction: column; gap: 2px; }
.en-sticky-buy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 720px) {
	/* Narrow: stack and centre, so neither half is orphaned against an edge. */
	.en-sticky-buy-inner   { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
	.en-sticky-buy-copy    { align-items: center; }
	.en-sticky-buy-actions { justify-content: center; }
}

/* --------------------------------------------------------------------------
 * The sticky buy bar had NO rules of its own -- not one. The markup and the
 * scroll script both shipped, so the JS dutifully toggled [hidden] on an
 * element that was never positioned: it rendered as a plain block at the end
 * of the document instead of a bar over the page. Everything below is what was
 * missing, not a redesign.
 *
 * [hidden] is restated because the display declaration here would otherwise
 * beat the UA stylesheet's [hidden]{display:none} and pin the bar open.
 * ------------------------------------------------------------------------ */
.en-sticky-buy {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	background: var(--en-navy, #0C2233);
	border-top: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 -8px 28px rgba(6, 18, 28, .28);
	padding: 13px 0;
}
.en-sticky-buy[hidden] { display: none; }
.en-sticky-buy-copy strong { color: #fff; font-weight: 700; font-size: var(--en-t-300); }
.en-sticky-buy-copy span   { color: var(--en-on-navy-body, #C6D6E2); font-size: var(--en-t-200); }
.en-sticky-buy-alt {
	color: var(--en-on-navy-body, #C6D6E2); font-size: var(--en-t-200);
	text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.en-sticky-buy-alt:hover { color: #fff; }
/* The help launcher is fixed bottom-right; keep the buttons out from under it. */
.en-sticky-buy-inner { padding-right: 92px; }
@media (max-width: 720px) {
	.en-sticky-buy { padding: 11px 0 13px; }
	.en-sticky-buy-inner { padding-right: 22px; }
}