/* ==========================================================================
   The Digital Mission — stylesheet
   Everything is scoped to #dm-app so your WordPress theme can't leak in
   and this can't leak out. Change the variables below to restyle the lot.
   ========================================================================== */

#dm-app {
  /* --- Colour ----------------------------------------------------------- */
  --dm-navy:      #1F3651;  /* authority: primary text on light            */
  --dm-teal:      #4EBBBB;  /* the signal colour: structure and highlights */
  --dm-cream:     #FFFCEB;  /* warm light background, never pure white     */
  --dm-ink:       #0D1722;  /* dark page floor                             */
  --dm-void:      #132335;  /* dark default canvas                         */
  --dm-cyan:      #6BE9E2;  /* glow only — fails contrast on cream         */
  --dm-coral:     #FF6A45;  /* the 10%: one action per screen              */
  --dm-coral-lit: #FF7E5D;  /* coral hover                                 */

  --dm-paper:     #FFFFFF;
  --dm-mist:      #E6EBF0;
  --dm-hair:      #DCE3E9;
  --dm-slate:     #3E5670;
  --dm-mute:      #7C8FA1;
  --dm-faint:     #9FADBA;
  --dm-teal-deep: #2F8E8E;  /* teal that passes contrast on cream          */

  /* --- Type ------------------------------------------------------------- */
  --dm-display: 'League Spartan', Helvetica, Arial, sans-serif;
  --dm-body:    'Manrope', Helvetica, Arial, sans-serif;
  --dm-mono:    'Space Mono', ui-monospace, monospace;

  --dm-h1: clamp(44px, 5.4vw, 72px);
  --dm-h2: clamp(36px, 4.2vw, 52px);
  --dm-h3: clamp(28px, 3vw, 36px);

  /* --- Layout ----------------------------------------------------------- */
  --dm-max: 1560px;         /* page width cap                              */
  --dm-pad: 60px;           /* side margin on desktop                      */
  --dm-gap: 24px;

  /* --- Shape ------------------------------------------------------------ */
  --dm-r-card: 20px;
  --dm-r-panel: 22px;
  --dm-r-input: 12px;
  --dm-shadow: 0 8px 24px rgba(31, 54, 81, .06);
  --dm-shadow-lift: 0 14px 34px rgba(31, 54, 81, .12);
  --dm-shadow-dark: 0 18px 44px rgba(13, 23, 34, .34);

  --dm-ease: cubic-bezier(.16, 1, .3, 1);

  font-family: var(--dm-body);
  color: var(--dm-navy);
  background: var(--dm-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#dm-app *, #dm-app *::before, #dm-app *::after { box-sizing: border-box; }
#dm-app img { max-width: 100%; display: block; }
#dm-app button, #dm-app input, #dm-app textarea { font-family: inherit; font-size: inherit; }
#dm-app button { cursor: pointer; }
#dm-app :focus-visible { outline: 2px solid var(--dm-cyan); outline-offset: 3px; }
#dm-app ::selection { background: var(--dm-teal); color: var(--dm-ink); }
#dm-app a { color: var(--dm-teal-deep); text-decoration: none; }
#dm-app a:hover { color: var(--dm-navy); }

@media (max-width: 1100px) { #dm-app { --dm-pad: 36px; } }
@media (max-width: 860px) { #dm-app { --dm-pad: 32px; } }
@media (max-width: 560px) { #dm-app { --dm-pad: 20px; } }

/* --- Layout primitives ---------------------------------------------------- */
.dm-wrap { max-width: var(--dm-max); margin: 0 auto; padding-left: var(--dm-pad); padding-right: var(--dm-pad); }
.dm-section { padding-top: 48px; padding-bottom: 80px; }
.dm-row { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
.dm-row--tight { gap: 26px; }
.dm-row--wide { gap: 70px; }
.dm-main { flex: 1.55 1 440px; min-width: min(440px, 100%); }
.dm-rail { flex: 0 1 380px; min-width: min(320px, 100%); display: flex; flex-direction: column; gap: 16px; }
.dm-stack { display: flex; flex-direction: column; gap: 12px; }
.dm-spread { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }

.dm-grid { display: grid; gap: var(--dm-gap); }
.dm-grid--ideas     { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dm-grid--templates { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.dm-grid--thumbs    { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.dm-grid--stats     { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.dm-grid--three     { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.dm-grid--logos     { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; }

/* --- Type ----------------------------------------------------------------- */
.dm-h1, .dm-h2, .dm-h3, .dm-h4 {
  font-family: var(--dm-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
.dm-h1 { font-size: var(--dm-h1); line-height: .92; }
.dm-h2 { font-size: var(--dm-h2); line-height: .96; }
.dm-h3 { font-size: var(--dm-h3); line-height: 1;   font-weight: 800; letter-spacing: -.015em; }
.dm-h4 { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.01em; }
.dm-h1 em, .dm-h2 em, .dm-h3 em { font-style: normal; color: var(--dm-teal-deep); }
.dm-on-dark .dm-h1 em, .dm-on-dark .dm-h2 em, .dm-on-dark .dm-h3 em { color: var(--dm-teal); }

.dm-eyebrow {
  font-family: var(--dm-mono); font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dm-teal-deep); margin-bottom: 16px;
}
.dm-label {
  font-family: var(--dm-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dm-teal-deep); margin-bottom: 14px;
}
.dm-meta { font-family: var(--dm-mono); font-size: 13px; color: var(--dm-mute); }
.dm-lede { font-size: 19px; line-height: 1.55; color: var(--dm-slate); max-width: 60ch; margin: 0 0 20px; }
.dm-body { font-size: 15px; line-height: 1.55; color: var(--dm-slate); margin: 0; }
.dm-num  { font-family: var(--dm-display); font-weight: 900; line-height: 1; font-size: 44px; }
.dm-num--big { font-size: var(--dm-h2); }
.dm-num small { color: var(--dm-faint); font-size: .6em; }

/* --- Dark surfaces -------------------------------------------------------- */
.dm-on-dark { color: var(--dm-cream); }
/* Squarespace's global typography targets h1-h4, p and a directly, and a direct
   selector always beats an inherited colour — so dark surfaces must state the
   colour on the elements themselves, not just on the container. Every selector
   here carries #dm-app because the base link rule is #dm-app a: without the id
   these lose to it and dark-surface links fall back to teal on navy (4.1:1).
   The softer .dm-lede / .dm-body / .dm-meta rules below still win on specificity. */
#dm-app .dm-on-dark h1, #dm-app .dm-on-dark h2, #dm-app .dm-on-dark h3,
#dm-app .dm-on-dark h4, #dm-app .dm-on-dark h5, #dm-app .dm-on-dark p,
#dm-app .dm-on-dark li, #dm-app .dm-on-dark strong, #dm-app .dm-on-dark b,
#dm-app .dm-on-dark span, #dm-app .dm-on-dark a, #dm-app .dm-on-dark td,
#dm-app .dm-on-dark th, #dm-app .dm-on-dark label, #dm-app .dm-on-dark small,
#dm-app .dm-on-dark blockquote,
#dm-app .dm-card--dark h1, #dm-app .dm-card--dark h2, #dm-app .dm-card--dark h3,
#dm-app .dm-card--dark h4, #dm-app .dm-card--dark p, #dm-app .dm-card--dark li,
#dm-app .dm-card--dark strong, #dm-app .dm-card--dark span, #dm-app .dm-card--dark a,
#dm-app .dm-sheet--dark h1, #dm-app .dm-sheet--dark h2, #dm-app .dm-sheet--dark h3,
#dm-app .dm-sheet--dark h4, #dm-app .dm-sheet--dark p, #dm-app .dm-sheet--dark li,
#dm-app .dm-sheet--dark strong, #dm-app .dm-sheet--dark span, #dm-app .dm-sheet--dark a,
#dm-app .dm-header--dark span, #dm-app .dm-header--dark strong { color: var(--dm-cream); }
/* The teal accent inside a dark headline must survive the rule above. */
#dm-app .dm-on-dark .dm-h1 em, #dm-app .dm-on-dark .dm-h2 em, #dm-app .dm-on-dark .dm-h3 em,
#dm-app .dm-card--dark em, #dm-app .dm-sheet--dark em { color: var(--dm-teal); }
.dm-on-dark .dm-eyebrow, .dm-on-dark .dm-label { color: var(--dm-cyan); }
.dm-on-dark .dm-meta { color: rgba(255, 252, 235, .62); }
.dm-on-dark .dm-body, .dm-on-dark .dm-lede { color: rgba(255, 252, 235, .74); }
.dm-void  { background: var(--dm-void); }
.dm-ink   { background: var(--dm-ink); }
.dm-navy  { background: var(--dm-navy); }

/* The Ray — a shaft of light fixed at 22deg. Never enters from below. */
.dm-ray { position: relative; overflow: hidden; }
.dm-ray > .dm-ray__beam {
  position: absolute; left: -6%; top: -40%; width: 20%; height: 190%;
  transform: rotate(22deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(107,233,226,0), rgba(107,233,226,.16) 62%, rgba(107,233,226,0));
}
.dm-ray > .dm-ray__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 90% at 88% 0%, rgba(78,187,187,.22), transparent 62%);
}
.dm-ray > * { position: relative; }

/* The Glass — dark mode only, and only over a ray or gradient. */
.dm-glass {
  background: rgba(255, 252, 235, .06);
  border: 1px solid rgba(255, 252, 235, .16);
  backdrop-filter: blur(10px);
  border-radius: var(--dm-r-panel);
  box-shadow: var(--dm-shadow-dark);
  padding: 38px 40px;
}

/* --- Logo (typographic — never a raster file) ----------------------------- */
/* Horizontal lockup — the secondary mark, built for bands under 120px tall.
   Monogram cap height : wordmark cap height = 1 : 0.60. Divider rule is 1px.
   The two-line wordmark optically centres on the monogram's cap height.
   Under 40px total height the wordmark and rule drop — see .dm-logo--mark. */
/* The button reset above sets font-size:inherit at #dm-app specificity, so the
   logo needs the same scope to win — a bare .dm-logo would render at body size. */
#dm-app .dm-logo { display: inline-flex; align-items: center; gap: .52em; font-size: 34px;
  background: none; border: 0; padding: 0; cursor: pointer; }
.dm-logo__mark { position: relative; padding: .20em .26em; }
.dm-logo__mark::before, .dm-logo__mark::after { content: ''; position: absolute; width: .32em; height: .32em; }
.dm-logo__mark::before { left: 0; top: 0; border-left: .07em solid var(--dm-teal-deep); border-top: .07em solid var(--dm-teal-deep); }
.dm-logo__mark::after { right: 0; bottom: 0; border-right: .07em solid var(--dm-teal-deep); border-bottom: .07em solid var(--dm-teal-deep); }
.dm-logo__mark b { display: block; font-family: var(--dm-display); font-weight: 900; font-size: 1em;
  /* League Spartan has no descender on DM and a 0.66em cap height, so the line box
     is set to the cap height and the glyphs nudged down onto it. Without the nudge
     the letters sit 0.09em high and the frame looks bottom-heavy. */
  line-height: .66; transform: translateY(.09em); color: var(--dm-navy); }
.dm-logo__rule { width: 1px; align-self: stretch; margin: .10em 0; background: var(--dm-hair); }
.dm-logo__word { font-family: var(--dm-display); font-weight: 800; font-size: .58em; line-height: 1.04;
  text-transform: uppercase; text-align: left; color: var(--dm-navy); white-space: nowrap;
  transform: translateY(.09em); }
.dm-logo__word i { font-style: normal; color: var(--dm-teal-deep); }
.dm-logo--dark .dm-logo__mark::before { border-left-color: var(--dm-cyan); border-top-color: var(--dm-cyan); }
.dm-logo--dark .dm-logo__mark::after { border-right-color: var(--dm-cyan); border-bottom-color: var(--dm-cyan); }
.dm-logo--dark .dm-logo__mark b, .dm-logo--dark .dm-logo__word { color: var(--dm-cream); }
.dm-logo--dark .dm-logo__rule { background: rgba(255, 252, 235, .24); }
.dm-logo--dark .dm-logo__word i { color: var(--dm-teal); }
/* Only when the lockup genuinely cannot fit does the wordmark go — under 40px
   tall it would be illegible anyway, so the monogram carries alone. */
@media (max-width: 820px) {
  .dm-logo__rule, .dm-logo__word { display: none; }
}

.dm-lockup { display: inline-block; position: relative; font-size: 42px; padding: .34em .46em; text-align: center; }
.dm-lockup::before, .dm-lockup::after { content: ''; position: absolute; width: .46em; height: .46em; }
.dm-lockup::before { left: 0; top: 0; border-left: .055em solid var(--dm-cyan); border-top: .055em solid var(--dm-cyan); }
.dm-lockup::after { right: 0; bottom: 0; border-right: .055em solid var(--dm-cyan); border-bottom: .055em solid var(--dm-cyan); }
.dm-lockup span { display: block; font-family: var(--dm-display); text-transform: uppercase; }
.dm-lockup .l1 { font-weight: 700; font-size: .36em; letter-spacing: .30em; line-height: .66; color: var(--dm-teal); margin-bottom: .34em; padding-left: .30em; transform: translateY(.09em); }
.dm-lockup .l2 { font-weight: 900; font-size: 1em; letter-spacing: -.01em; line-height: .80; color: var(--dm-cream); transform: translateY(.09em); }
.dm-lockup .l3 { font-weight: 900; font-size: 1em; letter-spacing: -.01em; line-height: .80; color: var(--dm-teal); transform: translateY(.09em); }

/* --- Header --------------------------------------------------------------- */
.dm-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 20px var(--dm-pad); background: var(--dm-paper); border-bottom: 1px solid var(--dm-hair); }
.dm-header--dark { background: var(--dm-void); border-bottom-color: rgba(255, 252, 235, .12); padding-top: 22px; padding-bottom: 22px; }
.dm-header__left { display: flex; align-items: center; gap: 32px; }
.dm-nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.dm-nav a { font-size: 15px; font-weight: 600; color: var(--dm-slate); border-bottom: 2px solid transparent; padding-bottom: 4px; cursor: pointer; }
.dm-nav a:hover { color: var(--dm-teal-deep); }
.dm-nav a.is-active { font-weight: 800; color: var(--dm-teal-deep); border-bottom-color: var(--dm-teal-deep); }
#dm-app .dm-header--dark .dm-nav a { color: rgba(255, 252, 235, .72); }
#dm-app .dm-header--dark .dm-nav a:hover, #dm-app .dm-header--dark .dm-nav a.is-active { color: var(--dm-cyan); border-bottom-color: var(--dm-cyan); }
.dm-header__right { display: flex; align-items: center; gap: 18px; }
.dm-avatar { width: 38px; height: 38px; border-radius: 99px; background: var(--dm-navy); color: var(--dm-cream);
  display: flex; align-items: center; justify-content: center; font-family: var(--dm-display); font-weight: 800; font-size: 15px; border: 0; }
.dm-header--dark .dm-avatar { background: var(--dm-teal); color: var(--dm-ink); }

.dm-searchbtn { display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 99px;
  background: var(--dm-mist); border: 1px solid var(--dm-hair); color: var(--dm-mute); font-family: var(--dm-mono); font-size: 12px; }
/* Just the glass until you point at it. The word slides out on hover and on
   keyboard focus, so it stays reachable without a mouse. */
.dm-searchbtn span:last-child { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .2s var(--dm-ease), opacity .16s, margin-left .2s var(--dm-ease); margin-left: -9px; }
.dm-searchbtn:hover span:last-child, .dm-searchbtn:focus-visible span:last-child { max-width: 9ch; opacity: 1; margin-left: 0; }
.dm-searchbtn:hover { border-color: var(--dm-teal-deep); color: var(--dm-teal-deep); }
.dm-header--dark .dm-searchbtn { background: rgba(255,252,235,.06); border-color: rgba(255,252,235,.18); color: rgba(255,252,235,.6); }
.dm-header--dark .dm-searchbtn:hover { border-color: var(--dm-cyan); color: var(--dm-cyan); }

/* --- Announcement bar ------------------------------------------------------
   One line above everything, switched on in the editor and off by default.
   Navy, not coral: coral belongs to the one action on the screen. */
.dm-announce { display: flex; align-items: center; gap: 16px; padding: 12px var(--dm-pad);
  background: var(--dm-navy); color: var(--dm-cream); }
.dm-announce__text { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.45; }
.dm-announce__cta { flex: none; padding: 7px 16px; border-radius: 99px; background: transparent;
  border: 1px solid rgba(255, 252, 235, .5); color: var(--dm-cream); font-size: 13px; font-weight: 700; }
.dm-announce__cta:hover { border-color: var(--dm-cyan); color: var(--dm-cyan); }
.dm-announce__x { flex: none; background: none; border: 0; padding: 0 2px; font-size: 22px; line-height: 1;
  color: rgba(255, 252, 235, .66); }
.dm-announce__x:hover { color: var(--dm-cream); }
.dm-popup { width: 620px; padding: 34px 36px; }

/* --- Buttons -------------------------------------------------------------- */
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 99px; border: 1px solid transparent;
  font-size: 16px; font-weight: 700; transition: background .16s, border-color .16s, color .16s; }
.dm-btn--coral   { background: var(--dm-coral); color: var(--dm-ink); }
.dm-btn--coral:hover { background: var(--dm-coral-lit); }
.dm-btn--coral:active { background: #E85B38; }
.dm-btn--outline { background: transparent; border-color: var(--dm-navy); color: var(--dm-navy); }
.dm-btn--outline:hover { border-color: var(--dm-teal); color: var(--dm-teal-deep); }
.dm-btn--quiet   { background: transparent; border-color: var(--dm-hair); color: var(--dm-slate); }
.dm-btn--quiet:hover { border-color: var(--dm-teal-deep); color: var(--dm-teal-deep); }
/* Nothing to link to yet. Used by "Copy to my Canva" on a template that has
   no Canva link in dm-content.js, so the button is visibly not ready rather
   than opening a broken tab. */
.dm-btn--off, #dm-app .dm-btn--off { background: var(--dm-mist); border-color: var(--dm-hair);
  color: var(--dm-faint); cursor: not-allowed; }
.dm-btn--off:hover { background: var(--dm-mist); border-color: var(--dm-hair); color: var(--dm-faint); }
#dm-app .dm-btn--ondark { background: transparent; border-color: rgba(255, 252, 235, .34); color: var(--dm-cream); }
.dm-btn--ondark:hover { border-color: var(--dm-cyan); }
.dm-btn--block   { width: 100%; }
/* Google's brand rules: their wordmark on white or on their blue, never recoloured. */
.dm-btn--google  { background: var(--dm-paper); border-color: var(--dm-hair); color: #3C4043;
  font-family: var(--dm-body); font-weight: 600; }
.dm-btn--google:hover { border-color: var(--dm-mute); background: #F8F9FA; }
.dm-btn--google svg { width: 20px; height: 20px; flex: none; }
.dm-or { display: flex; align-items: center; gap: 16px; margin: 22px 0;
  font-family: var(--dm-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 252, 235, .62); }
.dm-or::before, .dm-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 252, 235, .16); }
.dm-gsi { display: flex; justify-content: center; min-height: 44px; }
.dm-btn--sm      { padding: 11px 22px; font-size: 14px; }
.dm-btn--lg      { padding: 19px 38px; font-size: 18px; }
.dm-link { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 700; color: var(--dm-teal-deep); }
.dm-link:hover { border-bottom: 2px solid var(--dm-teal-deep); }
.dm-back { font-family: var(--dm-mono); font-size: 13px; color: var(--dm-teal-deep); background: none; border: 0; padding: 0; }
#dm-app .dm-back--ondark { color: var(--dm-cyan); }

/* --- Chips and tags ------------------------------------------------------- */
.dm-chips { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.dm-chip { padding: 10px 20px; border-radius: 99px; background: transparent;
  border: 1px solid var(--dm-hair); color: var(--dm-slate); font-size: 14px; font-weight: 600; }
.dm-chip:hover { border-color: var(--dm-teal); }
.dm-chip.is-on { background: var(--dm-teal); border-color: var(--dm-teal); color: var(--dm-ink); font-weight: 700; }
.dm-chip--dark.is-on { background: var(--dm-navy); border-color: var(--dm-navy); color: var(--dm-cream); }
#dm-app .dm-chip--ondark { border-color: rgba(255,252,235,.3); color: rgba(255,252,235,.86); padding: 13px 20px; font-size: 15px; }
.dm-chip--ondark:hover { border-color: var(--dm-cyan); }
#dm-app .dm-chip--ondark.is-on { background: var(--dm-teal); border-color: var(--dm-teal); color: var(--dm-ink); }
.dm-divider { width: 1px; height: 24px; background: var(--dm-hair); margin: 0 8px; }

.dm-tag { font-family: var(--dm-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; border: 1px solid var(--dm-hair); color: var(--dm-mute); white-space: nowrap; }
.dm-tag--teal  { background: rgba(78, 187, 187, .16); border-color: transparent; color: var(--dm-teal-deep); }
.dm-tag--coral { background: var(--dm-coral); border-color: transparent; color: var(--dm-ink); }
.dm-tag--navy  { background: var(--dm-navy); border-color: transparent; color: var(--dm-cream); }
.dm-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Cards ---------------------------------------------------------------- */
.dm-card { background: var(--dm-paper); border: 1px solid var(--dm-hair); border-radius: var(--dm-r-card);
  box-shadow: var(--dm-shadow); overflow: hidden; text-align: left; padding: 0; width: 100%;
  transition: transform .16s var(--dm-ease), box-shadow .16s var(--dm-ease), border-color .16s; }
.dm-card--flat { box-shadow: none; }
.dm-card--pad { padding: 26px 28px; }
button.dm-card:hover, a.dm-card:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-lift); }
.dm-card--dark { background: var(--dm-navy); border-color: transparent; color: var(--dm-cream); }
.dm-card--tint { background: rgba(78, 187, 187, .10); border-color: rgba(47, 142, 142, .3); box-shadow: none; }
.dm-card--dash { background: transparent; border: 1px dashed var(--dm-hair); box-shadow: none; }
.dm-card__body { padding: 22px 24px 24px; }
.dm-card__title { font-size: 20px; font-weight: 800; color: var(--dm-navy); line-height: 1.2; margin-bottom: 14px; }
.dm-card__title--sm { font-size: 15px; margin-bottom: 8px; }

/* Placeholder art. These are NOT artwork — replace them with real photographs. */
.dm-ph { background: repeating-linear-gradient(112deg, #DFE7ED 0 12px, #EDF2F6 12px 24px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dm-mono); font-size: 12px; color: var(--dm-mute); }
.dm-ph--16x9 { aspect-ratio: 16/9; }
.dm-ph--9x16 { aspect-ratio: 9/16; }
.dm-ph--1x1  { aspect-ratio: 1; }
.dm-ph__pill { position: absolute; z-index: 2; right: 14px; bottom: 14px; font-family: var(--dm-mono); font-size: 11px;
  padding: 5px 11px; border-radius: 99px; background: rgba(13, 23, 34, .72); color: var(--dm-cream); }
.dm-ph__badge { position: absolute; z-index: 2; left: 14px; top: 14px; }
.dm-rel { position: relative; }

/* Template thumbnails */
.dm-thumb { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px; }
.dm-thumb__t1 { font-family: var(--dm-display); font-weight: 900; font-size: clamp(19px, 2.1vw, 26px);
  text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
.dm-thumb__t2 { font-family: var(--dm-display); font-weight: 900; font-size: clamp(15px, 1.7vw, 20px);
  text-transform: uppercase; line-height: 1.05; opacity: .72; overflow-wrap: anywhere; }
.dm-hero-thumb { aspect-ratio: 1; border-radius: var(--dm-r-panel); display: flex; flex-direction: column;
  justify-content: flex-end; padding: 44px; box-shadow: 0 18px 44px rgba(31, 54, 81, .2); }
.dm-hero-thumb .dm-thumb__t1 { font-size: clamp(32px, 4vw, 52px); line-height: .94; }
.dm-hero-thumb .dm-thumb__t2 { font-size: clamp(24px, 3vw, 40px); line-height: .94; }

/* --- Progress ------------------------------------------------------------- */
.dm-bar { height: 8px; border-radius: 99px; background: var(--dm-mist); overflow: hidden; }
.dm-bar i { display: block; height: 100%; background: var(--dm-teal); transition: width .4s var(--dm-ease); }
.dm-bar--sm { height: 5px; }
.dm-bar--ondark { background: rgba(255, 252, 235, .2); }

/* --- Path / lesson rows --------------------------------------------------- */
.dm-step { display: flex; align-items: center; gap: 20px; padding: 20px 26px; border-radius: 18px;
  background: var(--dm-paper); border: 1px solid var(--dm-hair); width: 100%; text-align: left; }
.dm-step:hover { border-color: var(--dm-teal); }
.dm-step__title { flex: 1; font-size: 18px; font-weight: 700; color: var(--dm-slate); min-width: 0; }
.dm-step--done { opacity: .58; }
.dm-step--done:hover { opacity: .82; }
.dm-step--done .dm-step__title { font-weight: 800; color: var(--dm-navy); text-decoration: line-through; }
.dm-step--locked { background: transparent; border-style: dashed; }
.dm-step--locked, .dm-step--locked .dm-step__title { color: var(--dm-faint); }
.dm-step--locked:hover { border-color: var(--dm-hair); }
.dm-step--current { display: flex; align-items: center; gap: 22px; padding: 28px 30px; border-radius: var(--dm-r-card);
  background: var(--dm-paper); border: 2px solid var(--dm-navy); box-shadow: var(--dm-shadow-lift); }
.dm-step--current .dm-step__title { font-size: 22px; font-weight: 800; color: var(--dm-navy); line-height: 1.15; }
.dm-dot { width: 34px; height: 34px; flex: none; border-radius: 99px; border: 2px solid var(--dm-hair);
  color: var(--dm-mute); display: flex; align-items: center; justify-content: center;
  font-family: var(--dm-mono); font-size: 13px; }
.dm-dot--done { background: var(--dm-teal); border-color: var(--dm-teal); color: var(--dm-ink); font-weight: 900; font-size: 16px; font-family: var(--dm-body); }
.dm-dot--play { background: var(--dm-navy); border-color: var(--dm-navy); color: var(--dm-cream); font-size: 12px; }
.dm-dot--locked { border-style: dashed; color: var(--dm-faint); }

/* --- Forms ---------------------------------------------------------------- */
.dm-field { display: block; margin-bottom: 20px; }
.dm-field__label { font-family: var(--dm-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 252, 235, .62); margin-bottom: 9px; display: block; }
.dm-input { width: 100%; padding: 15px 16px; border-radius: var(--dm-r-input);
  background: var(--dm-navy); border: 1px solid rgba(255, 252, 235, .14); font-size: 16px; color: var(--dm-cream); }
.dm-input::placeholder { color: rgba(255, 252, 235, .62); }
.dm-input--light { background: var(--dm-cream); border-color: var(--dm-hair); color: var(--dm-navy); }
.dm-error { font-family: var(--dm-mono); font-size: 12px; color: var(--dm-coral); min-height: 18px; margin-top: 6px; }
.dm-check { display: flex; align-items: center; gap: 13px; background: none; border: 0; padding: 0; text-align: left; }
.dm-check__box { width: 24px; height: 24px; flex: none; border-radius: 4px; border: 2px solid var(--dm-hair);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: transparent; }
.dm-check.is-on .dm-check__box { background: var(--dm-teal); border-color: var(--dm-teal); color: var(--dm-ink); }
.dm-check--ondark .dm-check__box { border-color: rgba(255, 252, 235, .3); }
.dm-check__text { font-size: 15px; color: var(--dm-slate); }
.dm-check--ondark .dm-check__text { color: rgba(255, 252, 235, .84); }
.dm-check--sm .dm-check__box { width: 22px; height: 22px; font-size: 13px; }
.dm-check__count { margin-left: auto; font-family: var(--dm-mono); font-size: 12px; color: var(--dm-faint); }
.dm-switch { width: 52px; height: 30px; flex: none; padding: 3px; border-radius: 99px; background: var(--dm-mist);
  display: flex; align-items: center; justify-content: flex-start; }
.dm-switch i { width: 24px; height: 24px; border-radius: 99px; background: var(--dm-faint); transition: background .16s; }
.dm-check.is-on .dm-switch { background: var(--dm-teal); justify-content: flex-end; }
.dm-check.is-on .dm-switch i { background: var(--dm-ink); }
.dm-check--ondark .dm-switch { background: rgba(255, 252, 235, .16); }
.dm-check--ondark .dm-switch i { background: rgba(255, 252, 235, .5); }

/* --- Video player --------------------------------------------------------- */
.dm-player { aspect-ratio: 16/9; border-radius: 18px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; width: 100%; border: 0; padding: 0;
  background: repeating-linear-gradient(112deg, #22364C 0 16px, #1B2C40 16px 32px); }
.dm-player__play { width: 78px; height: 78px; border-radius: 99px; background: rgba(255, 252, 235, .14);
  border: 1px solid rgba(255, 252, 235, .4); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--dm-cream); }
/* The lower-third quotes the video packaging spec: a 6px coral bar, never a card accent border. */
.dm-lower3 { position: absolute; left: 26px; bottom: 26px; display: flex; align-items: stretch;
  border-radius: 10px; overflow: hidden; box-shadow: 0 14px 34px rgba(13, 23, 34, .4); }
.dm-lower3 i { width: 6px; background: var(--dm-coral); }
.dm-lower3 div { padding: 14px 22px; background: rgba(19, 35, 53, .82); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 252, 235, .16); border-left: 0; }
.dm-lower3 b { display: block; font-family: var(--dm-display); font-weight: 900; font-size: 22px;
  text-transform: uppercase; color: var(--dm-cream); line-height: 1; }
.dm-lower3 span { font-family: var(--dm-mono); font-size: 12px; color: var(--dm-cyan); margin-top: 6px; display: block; }
.dm-bug { position: absolute; right: 26px; top: 22px; display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 99px; background: rgba(19, 35, 53, .7);
  border: 1px solid rgba(255, 252, 235, .18); backdrop-filter: blur(8px);
  font-family: var(--dm-mono); font-size: 12px; color: var(--dm-cream); }
.dm-bug i { width: 9px; height: 9px; border-radius: 99px; background: var(--dm-coral); }
/* A module with no video yet. Same frame as the player, no controls, and it
   says what it is. Set yt: on the module in dm-content.js and the real
   YouTube embed replaces it. */
.dm-player--soon { cursor: default; }
.dm-soon { padding: 14px 26px; border-radius: 99px; background: rgba(255, 252, 235, .10);
  border: 1px solid rgba(255, 252, 235, .28); backdrop-filter: blur(8px);
  font-family: var(--dm-mono); font-size: 14px; letter-spacing: .1em; color: var(--dm-cream); }
.dm-soon--sm { display: flex; align-items: center; justify-content: center; height: 78px;
  border-radius: 12px; padding: 0; background: rgba(255, 252, 235, .08);
  border: 1px solid rgba(255, 252, 235, .16); font-size: 12px; }
.dm-playlist { display: flex; flex-direction: column; gap: 4px; }
.dm-playlist button { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 12px;
  background: none; border: 1px solid transparent; text-align: left; width: 100%; }
.dm-playlist button:hover { background: rgba(255, 252, 235, .06); }
.dm-playlist .n { font-family: var(--dm-mono); font-size: 12px; color: rgba(255, 252, 235, .62); width: 42px; flex: none; }
.dm-playlist .t { flex: 1; font-size: 15px; color: rgba(255, 252, 235, .78); min-width: 0; }
.dm-playlist .d { font-family: var(--dm-mono); font-size: 12px; color: rgba(255, 252, 235, .62); }
.dm-playlist .is-done { opacity: .55; }
.dm-playlist .is-done .n { color: var(--dm-teal); }
.dm-playlist .is-done .t { color: var(--dm-cream); text-decoration: line-through; }
.dm-playlist .is-current { background: rgba(107, 233, 226, .12); border-color: rgba(107, 233, 226, .34); }
.dm-playlist .is-current .n, .dm-playlist .is-current .d { color: var(--dm-cyan); }
.dm-playlist .is-current .t { font-weight: 800; color: var(--dm-cream); }

/* --- Context bars --------------------------------------------------------- */
.dm-contextbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 18px var(--dm-pad); background: var(--dm-navy); color: var(--dm-cream); }
.dm-contextbar--light { background: var(--dm-paper); color: var(--dm-navy); border-bottom: 1px solid var(--dm-hair); padding: 20px var(--dm-pad); }
.dm-progresspill { display: flex; align-items: center; gap: 20px; }
.dm-progresspill .dm-bar { width: 180px; }

/* --- Overlays ------------------------------------------------------------- */
.dm-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(13, 23, 34, .62);
  backdrop-filter: blur(4px); display: flex; justify-content: center; padding: 24px;
  animation: dm-fade .2s var(--dm-ease); }
.dm-scrim--top { align-items: flex-start; padding-top: 12vh; }
.dm-scrim--mid { align-items: center; }
.dm-sheet { width: 680px; max-width: 100%; border-radius: var(--dm-r-card); background: var(--dm-paper);
  box-shadow: 0 24px 60px rgba(13, 23, 34, .4); overflow: hidden; }
.dm-sheet--sm { width: 520px; padding: 36px 38px; }
.dm-sheet--dark { background: var(--dm-void); border: 1px solid rgba(255, 252, 235, .16); color: var(--dm-cream); }
.dm-sheet__head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--dm-hair); }
.dm-sheet__input { flex: 1; border: 0; font-size: 18px; color: var(--dm-navy); background: transparent; outline: none; }
.dm-sheet__list { max-height: 46vh; overflow: auto; }
.dm-sheet__row { display: flex; align-items: center; gap: 16px; padding: 16px 24px; width: 100%;
  border: 0; border-bottom: 1px solid #EDF2F6; background: none; text-align: left; }
.dm-sheet__row:hover { background: var(--dm-cream); }
.dm-sheet__row .t { flex: 1; font-size: 16px; font-weight: 700; color: var(--dm-navy); min-width: 0; }

/* Toast — the 6px bar is the one deliberate accent-edge in the system. */
.dm-toasts { position: fixed; left: 32px; bottom: 32px; z-index: 100; display: flex; flex-direction: column-reverse; gap: 12px; }
.dm-toast { display: flex; align-items: stretch; border-radius: 10px; overflow: hidden;
  box-shadow: var(--dm-shadow-dark); animation: dm-toast .24s var(--dm-ease); }
.dm-toast i { width: 6px; background: var(--dm-coral); }
.dm-toast div { padding: 16px 24px; background: var(--dm-navy); display: flex; align-items: center; gap: 18px; max-width: 420px; }
.dm-toast span { font-size: 15px; font-weight: 700; color: var(--dm-cream); }
.dm-toast button { font-family: var(--dm-mono); font-size: 12px; color: var(--dm-cyan); background: none; border: 0; white-space: nowrap; }

@keyframes dm-toast { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dm-fade  { from { opacity: 0; } to { opacity: 1; } }

/* --- Footer --------------------------------------------------------------- */
.dm-footer { background: var(--dm-ink); padding: 56px var(--dm-pad) 40px; }
.dm-footer__top { display: flex; justify-content: space-between; gap: 60px; align-items: flex-start; flex-wrap: wrap;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255, 252, 235, .14); }
.dm-footer__cols { display: flex; gap: 60px; font-family: var(--dm-mono); font-size: 13px; line-height: 2.1; }
/* Footer headings need an absolute size: they inherit a relative one from a
   small parent and render at ~8.7px, illegible at any contrast. */
#dm-app .dm-footer h6, #dm-app .dm-footer__cols h6, #dm-app footer h6 { font-size: 12px; }
.dm-footer__cols h6 { margin: 0; font-weight: 400; color: rgba(255, 252, 235, .62); letter-spacing: .14em; text-transform: uppercase; }
.dm-footer__cols a { display: block; color: rgba(255, 252, 235, .76); }
.dm-footer__cols a:hover { color: var(--dm-cyan); }
.dm-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; font-family: var(--dm-mono); font-size: 12px; color: rgba(255, 252, 235, .62); }

/* --- Utilities ------------------------------------------------------------ */
.dm-mt8  { margin-top: 8px; }  .dm-mt12 { margin-top: 12px; } .dm-mt16 { margin-top: 16px; }
.dm-mt24 { margin-top: 24px; } .dm-mt34 { margin-top: 34px; } .dm-mt44 { margin-top: 44px; }
.dm-mb18 { margin-bottom: 18px; } .dm-mb26 { margin-bottom: 26px; } .dm-mb34 { margin-bottom: 34px; }
.dm-center { text-align: center; }
.dm-right { text-align: right; }
.dm-rule { padding-bottom: 30px; margin-bottom: 34px; border-bottom: 1px solid var(--dm-hair); }
.dm-flex { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.dm-flex--between { justify-content: space-between; }
.dm-grow { flex: 1; min-width: 0; }
.dm-none { flex: none; }
.dm-hide { display: none !important; }

@media print { #dm-app .dm-header, #dm-app .dm-toasts, #dm-app .dm-scrim { display: none; } }

/* --- Card artwork (see dm-art.js) ----------------------------------------- */
.dm-artwrap { position: relative; overflow: hidden; line-height: 0; }
.dm-artwrap svg { display: block; width: 100%; height: auto; }
.dm-artchip { flex: 0 0 46px; width: 46px; border-radius: 11px; overflow: hidden; line-height: 0;
  box-shadow: inset 0 0 0 1px rgba(31, 54, 81, .12); }
.dm-artchip svg { display: block; width: 100%; height: auto; }


/* --- Courses (My account + Training) ------------------------------------- */
.dm-plain { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.dm-course { display: flex; align-items: center; gap: 22px; width: 100%; text-align: left;
  padding: 24px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--dm-hair);
  cursor: pointer; font: inherit; }
.dm-course:hover { border-color: var(--dm-teal); }
.dm-course.is-open { border: 2px solid var(--dm-navy); box-shadow: 0 14px 36px rgba(31,54,81,.10); }
.dm-course__n { flex: none; width: 58px; height: 58px; border-radius: 14px; background: var(--dm-navy);
  color: var(--dm-cream); display: flex; align-items: center; justify-content: center;
  font-family: var(--dm-display); font-weight: 900; font-size: 22px; }
.dm-course__title { display: block; font-size: 22px; font-weight: 800; color: var(--dm-navy); line-height: 1.15; }
.dm-course__prog { flex: none; width: 136px; text-align: right; }
.dm-course__prog .dm-bar { margin-top: 9px; }
.dm-course__chev { flex: none; color: var(--dm-mute); font-size: 14px; }
.dm-module { box-sizing: border-box; width: calc(100% - 30px); margin-left: 30px; }
.dm-minicard { display: block; width: 100%; text-align: left; padding: 0; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--dm-hair); cursor: pointer; font: inherit; }
.dm-minicard:hover { border-color: var(--dm-teal); }
.dm-minicard__body { padding: 12px 14px 14px; }
.dm-minicard__title { font-size: 14px; font-weight: 800; color: var(--dm-navy); line-height: 1.25; }
@media (max-width: 860px) {
  .dm-course { flex-wrap: wrap; gap: 14px; }
  .dm-course__prog { width: 100%; text-align: left; }
  .dm-module { width: 100%; margin-left: 0; }
}

/* Field labels sit on dark glass by default; on a light card they need the muted ink. */
.dm-card .dm-field__label { color: var(--dm-mute); }

/* Cream headline highlight. Used by hero and onboarding headlines,
   which carry markup in the content file but no colour. */
.dm-hl { color: #FFFCEB; }

/* --- Phone -----------------------------------------------------------------
   Everything above is fluid, so this only handles what fluidity cannot: gaps
   sized for a desk, panel padding, fixed-width rails, and the two overlays.
   One breakpoint, at the width where a 390px phone in portrait lands.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  #dm-app { --dm-h1: clamp(36px, 11vw, 46px); --dm-h2: clamp(30px, 9vw, 38px); --dm-h3: clamp(24px, 7vw, 28px); }

  /* Desk-sized gaps leave a phone with a column of air between stacked halves. */
  .dm-row, .dm-row--wide { gap: 30px; }
  .dm-row--tight { gap: 18px; }
  .dm-section { padding-top: 34px; padding-bottom: 52px; }
  .dm-spread { gap: 18px; }

  /* Logo, nav and the search/account buttons on three lines rather than one
     squeezed one. The nav still reads as a row. */
  .dm-header { gap: 14px; padding-top: 16px; padding-bottom: 16px; }
  .dm-header--dark { padding-top: 16px; padding-bottom: 16px; }
  .dm-header__left { gap: 16px; flex-wrap: wrap; }
  #dm-app .dm-logo { font-size: 28px; }
  .dm-nav { gap: 18px; }
  .dm-nav a { font-size: 14px; }

  /* Panels: the padding is what runs out first. */
  .dm-glass { padding: 24px 22px; }
  .dm-card--pad { padding: 22px 20px; }
  .dm-num { font-size: 34px; }
  .dm-num--big { font-size: var(--dm-h2); }

  /* Two template thumbnails across instead of one giant one. */
  .dm-grid--templates { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .dm-grid--thumbs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .dm-grid--ideas { grid-template-columns: 1fr; }

  /* Search and the pop-up: full width, and no scrim padding to waste. */
  .dm-scrim { padding: 12px; }
  .dm-scrim--top { padding-top: 6vh; }
  .dm-sheet--sm, .dm-popup { padding: 26px 22px; }
  .dm-sheet__head, .dm-sheet__row { padding-left: 18px; padding-right: 18px; }

  /* Toasts span the width rather than sitting in a corner off the edge. */
  .dm-toasts { left: 14px; right: 14px; bottom: 14px; }

  /* The banner's button drops under its line instead of crushing it. */
  .dm-announce { gap: 10px 14px; flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px; }
  .dm-announce__text { flex: 1 1 100%; order: 1; }
  .dm-announce__cta { order: 2; }
  .dm-announce__x { order: 3; margin-left: auto; }

  /* Footer columns stack; 60px between them is a desktop measure. */
  .dm-footer__top { gap: 30px; }
  .dm-footer__cols { gap: 30px; flex-wrap: wrap; }
  .dm-footer__cols > div { flex: 1 1 130px; }

  /* Course rows already wrap at 860; the module indent goes too. */
  .dm-course { padding: 18px 20px; }
  .dm-course__n { width: 46px; height: 46px; font-size: 18px; }
  .dm-course__title { font-size: 19px; }

  /* A full-width primary action is the right shape on a phone. */
  .dm-btn--lg { width: 100%; justify-content: center; }

  /* Toggles sit at 30px on a desk, which is under the 44px a thumb needs.
     The newsletter consent box is one of these, and a mis-tap there has a
     legal consequence, so every toggle gets the full target. */
  .dm-check { min-height: 44px; }
}