/* ===========================================================================
   Meet Your AI Marketing Director — conversion landing page
   Route:  /meet-your-ai-marketing-director/
   Layout: layouts/_default/meet-your-ai-marketing-director.html

   Every rule is scoped under .myd. Nothing here is global, and nothing depends
   on the theme bundle, so the page renders the same regardless of what PurgeCSS
   does to the rest of the site.

   TYPE
     Sebino    → everything structural. Brand rule, and also enforced site-wide
                 by the `font-family: Sebino !important` block in master.css.
     PT Serif  → editorial accents only (the deck, the pull quote, the "what
                 should we post" ask). This is the approved accent use, and it
                 is the only thing keeping the page from reading like generic
                 SaaS.

   COLOUR
     One accent — #FF8833. Headings #333333. Hairline rules instead of cards,
     no gradients, no drop shadows. The dark bands are the only heavy surfaces
     on the page and they exist to do one job each: mark the argument (band 4)
     and close the sale (band 8).

   HEADING SIZES live in the @layer site block at the bottom. They have to:
   the global typescale sets h1/h2/h3 with !important inside @layer site, and
   for !important declarations the layer order is reversed, which makes an
   unlayered !important the weakest author declaration there is. This file is
   linked from inside the layout, i.e. after the site bundle, so a layered rule
   here wins on source order. Do not move those rules out of the layer.
   =========================================================================== */

.myd {
  --myd-fg: #1a1a1a;
  --myd-fg-soft: #33383e;
  --myd-fg-mute: #6b7178;
  --myd-heading: #333333;
  --myd-accent: #ff8833;
  --myd-rule: #e4e6ea;
  --myd-rule-strong: #1a1a1a;
  --myd-ink: #14181d;
  --myd-ink-fg: #f4f5f7;
  --myd-ink-mute: #9aa2ab;
  --myd-ink-rule: #2b3138;

  /* TE chassis. The page is a device: a warm grey body, white panel plates
     screwed onto it, and two dark plates that read as displays. This grey
     replaced a cream (#faf7f3) that was the generic premium-consumer default. */
  /* Was #d4d3ce, the TE instrument grey. Now the homepage ground: hphrbg.webp
     fades from #faf8f6 at the top to #ffffff, so the image paints the top of
     the page at full width and the flat white below it continues seamlessly. */
  --myd-chassis: #ffffff;
  --myd-plate: #ffffff;
  --myd-plate-edge: #c4c3be;
  --myd-tick: #9a9994;

  /* SHAPE LOCK — exactly two radii on this page.
     Plates and panels: 14px. Controls (buttons, keys): 6px, which is the
     site-wide button spec and is not ours to change. Nothing else. */
  --myd-r-plate: 14px;
  --myd-r-control: 6px;

  --myd-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  /* System mono. No webfont request: TE's own labelling is plain technical
     type, so the platform mono is the honest choice and costs nothing. */
  --myd-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas,
              'Liberation Mono', monospace;
  --myd-measure: 680px;

  background-color: var(--myd-chassis);
  background-image: url('/images/hphrbg.webp');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;


  color: var(--myd-fg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.myd *,
.myd *::before,
.myd *::after { box-sizing: border-box; }

/* Nav overlap, desktop only.

   `.navigation.navigation-home` is position:absolute at <=991px, so the nav
   already overlays and <main> starts at y=0 — the background reaches the top
   on its own there. From 992px up it returns to the flow and pushes <main>
   down, leaving a white band above the page ground. Pulling the page up by the
   nav's height fixes that; the matching padding puts the content back. Applying
   this at every width double-counts and slides the first plate under the nav.

   The nav paints at z-index 9999, so it stays above the page. */
@media (min-width: 992px) {
  .myd {
    --myd-nav-h: 73px;
    margin-top: calc(-1 * var(--myd-nav-h));
    padding-top: var(--myd-nav-h);
  }
}

/* Under 992px the nav is already absolute, so <main> starts at y=0 and the
   background reaches the top on its own. No pull-up is needed, but the first
   plate still has to be pushed clear of the nav: without this it slides under
   it and the logo sits on the plate instead of on the page ground. */
@media (max-width: 991px) {
  .myd {
    --myd-nav-h: 69px;
    padding-top: var(--myd-nav-h);
  }
}

/* ── BANDS & SHELL ────────────────────────────────────────────────────────── */

/* A band is now just the chassis gap around a plate. The plate carries the
   surface colour and the padding, which is why band padding is small. */
.myd-band {
  position: relative;
  padding: 11px 0;
  background: transparent;
}

.myd-band--hero { padding-top: 22px; }
.myd-band--close { padding-bottom: 30px; }

/* THE PLATE. Every .myd-wrap is a panel screwed onto the chassis. */
.myd-wrap {
  position: relative;
  width: min(100% - 44px, 1101.6px);
  margin: 0 auto;
  padding: 68px 56px;
  background: var(--myd-plate);
  border: 1px solid var(--myd-plate-edge);
  border-radius: var(--myd-r-plate);
}

.myd-band--dark .myd-wrap {
  background: var(--myd-ink);
  border-color: #000000;
  color: var(--myd-ink-fg);
}

/* The trust strip is its own small plate under the hero panel, the way a TE
   device carries a secondary label plate below the main face. */
.myd-band--hero .myd-wrap + .myd-wrap {
  margin-top: 11px;
  padding: 22px 56px;
}

/* Registration ticks. One element only — the hero plate. TE draws these on
   technical documentation, not on every surface; spraying them everywhere is
   exactly how this aesthetic turns into pastiche. */
.myd-band--hero .myd-wrap:first-child::before,
.myd-band--hero .myd-wrap:first-child::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.myd-band--hero .myd-wrap:first-child::before {
  top: 16px; left: 16px;
  border-top: 1px solid var(--myd-tick);
  border-left: 1px solid var(--myd-tick);
}

.myd-band--hero .myd-wrap:first-child::after {
  bottom: 16px; right: 16px;
  border-bottom: 1px solid var(--myd-tick);
  border-right: 1px solid var(--myd-tick);
}

/* ── SHARED TYPE ELEMENTS ─────────────────────────────────────────────────── */

.myd .myd-eyebrow {
  display: block;
  margin: 0 0 22px;
  font-family: var(--myd-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--myd-fg-mute);
}

.myd-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--myd-accent);
  vertical-align: middle;
}

.myd .myd-mark { text-transform: none; letter-spacing: 0.04em; }

/* Schematic part number. Sits in the plate margin like a callout on a
   technical drawing, not above the headline. It is deliberately a bare
   numeral: giving it a caption would rebuild the eyebrow it replaced. */
.myd .myd-part {
  position: absolute;
  top: 22px;
  left: 24px;
  margin: 0;
  font-family: var(--myd-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--myd-tick);
}

.myd-band--dark .myd-part { color: #5c646d; }

.myd .myd-kicker {
  margin: 0 0 18px;
  font-family: var(--myd-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--myd-accent);
}

.myd .myd-h2 {
  color: var(--myd-heading);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 700;
  margin: 0 0 24px;
  max-width: 16ch;
}

.myd .myd-h2--lead { max-width: none; }
.myd .myd-h2--onDark { color: #ffffff; }

.myd .myd-accent { color: var(--myd-accent); }

/* The deck. Serif italic — the one place the page lets its voice show. */
.myd .myd-deck {
  font-family: var(--myd-serif) !important;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.35;
  color: var(--myd-fg-soft);
  margin: 0 0 26px;
}

.myd .myd-deck--onDark { color: var(--myd-accent); }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
/* .unstyled in the markup opts these out of the global button matrix, so the
   spec is restated here: filled black on light, filled accent on dark, 6px. */

.myd .myd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: var(--myd-r-control);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* SHAPE LOCK EXCEPTION — brand direction, 2026-08-21.
   The page's two-radius rule (14px plates, 6px controls) and the site-wide
   button spec both say a control on a light surface is black at 6px. Zufo
   asked for this one to be an orange pill instead. It is deliberate and it is
   the only pill on the page; do not "correct" it back, and do not spread the
   pill radius to any other control. */
.myd .myd-btn--primary {
  background: var(--myd-accent);
  border-color: var(--myd-accent);
  color: #ffffff;
  border-radius: 999px;
}

.myd .myd-btn--primary:hover {
  background: #e07020;
  border-color: #e07020;
}

.myd .myd-btn--onDark {
  background: var(--myd-accent);
  border-color: var(--myd-accent);
  color: #ffffff;
}

.myd .myd-btn--onDark:hover { background: #e07020; border-color: #e07020; }

.myd .myd-btn--lg {
  padding: 20px 38px;
  font-size: 1.0625rem;
}

.myd .myd-btn__arrow {
  transition: transform 0.2s ease;
  font-size: 1.05em;
}

.myd .myd-btn:hover .myd-btn__arrow { transform: translateX(3px); }

.myd .myd-btn:focus-visible {
  outline: 2px solid var(--myd-accent);
  outline-offset: 3px;
}

.myd .myd-cta { margin-top: 34px; }

.myd .myd-cta__note {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--myd-fg-mute);
}

.myd .myd-cta--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.myd .myd-cta__note--onDark {
  color: var(--myd-ink-mute);
  text-align: center;
}

/* ══ 1. HERO ══════════════════════════════════════════════════════════════ */

.myd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "copy   visual"
    "cta    visual";
  grid-template-rows: auto auto;
  column-gap: 56px;
  row-gap: 0;
  align-items: center;
}

.myd-hero__copy { grid-area: copy; }
.myd-hero__visual { grid-area: visual; }
.myd-hero .myd-cta { grid-area: cta; align-self: start; }

.myd .myd-hero__title {
  color: var(--myd-heading);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  max-width: 14ch;
}

/* Reassurance strip. Lives below the hero grid, not inside the hero stack, so
   the hero stays at four elements. Hairline above it marks it as its own row. */
.myd .myd-trust {
  margin: 0;
  max-width: none;
  font-family: var(--myd-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--myd-fg-mute);
}

.myd-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* hellocube.webp is near-square (682x690), so it can carry more width than the
   tall cube did without pushing the hero copy down. */
.myd .myd-hero__cube {
  display: block;
  text-decoration: none;
  width: 100%;
  max-width: 440px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.myd .myd-hero__cube img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 682 / 690;
}

.myd .myd-hero__cube:hover { transform: translateY(-3px); }

.myd .myd-hero__cube:focus-visible {
  outline: 2px solid var(--myd-accent);
  outline-offset: 6px;
  border-radius: var(--myd-r-control);
}

/* ══ 2. THE JOB ═══════════════════════════════════════════════════════════ */

/* ── BAND 2 GRID: copy left, image right ─────────────────────────────────── */

.myd-job__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 48px;
  align-items: stretch;
}

.myd-job__col { min-width: 0; }

/* ── Section 2 progressive disclosure ──────────────────────────────────────
   The column is a flex stack purely so `order` can put the disclosure's
   contents back where they belong on desktop. Every child already spaces
   itself with a top margin only, so flex changes no vertical rhythm. */
.myd-job__col { display: flex; flex-direction: column; }

/* Shared sequence. The short list is step 2 but is hidden above 767px, so
   desktop still reads headline -> detail -> quote -> handoff, unchanged. The
   disclosure sits ahead of the quote at both widths, which is why expanding it
   pushes the quote down rather than opening below it. */
.myd-job__intro { order: 1; }
.myd-job__short { order: 2; }
.myd-job__more  { order: 3; }
.myd-quote      { order: 4; }
.myd-handoff    { order: 5; }

/* The condensed list and the toggle are phone-only furniture. `.myd-tasklist`
   sets `display: grid` and is declared later, so hiding the short list needs
   the child combinator to win the tie. */
.myd-job__col > .myd-job__short { display: none; }
.myd-job__more-toggle { display: none; }
.myd-job__hd-mb { display: none; }

/* Desktop must render exactly as it did before the disclosure existed: the
   details box adds nothing, and the h2's own 14px bottom margin remains the
   only gap above the lede. */
.myd-job__more { margin: 0; }
.myd-job__more > .myd-job__lede { margin-top: 0; }

@media (max-width: 767px) {
  .myd-job__hd-dt { display: none; }
  .myd-job__hd-mb { display: inline; }
  .myd-job__col > .myd-job__short { display: grid; }

  /* Both lists carry `margin-top: 24px`; the short one sits directly under the
     headline, which already has its own 14px bottom margin. */
  .myd-job__col > .myd-job__short { margin-top: 18px; }
  .myd-job__more { margin-top: 24px; }

  .myd-job__more-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Padding, not height: keeps the tap target at 44px without drawing a box
       around what is meant to read as a text link. */
    padding: 13px 2px;
    cursor: pointer;
    list-style: none;
    /* Same readout type as .myd-trust ("no complicated setup..."). */
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    color: #000;
    /* No underline: the brackets already mark it as a control. */
    text-decoration: none;
  }

  .myd-job__more-toggle::-webkit-details-marker { display: none; }

  .myd-job__more-close { display: none; }
  .myd-job__more[open] .myd-job__more-open { display: none; }
  .myd-job__more[open] .myd-job__more-close { display: inline; }

  /* Expanded, the short list would repeat three of the six tasks below it. */
  .myd-job__col:has(.myd-job__more[open]) > .myd-job__short { display: none; }

  /* The lede is the first thing revealed, so it needs the gap the summary
     would otherwise have provided. */
  .myd-job__more > .myd-job__lede { margin-top: 6px; }
}


/* The image bleeds toward the plate edges instead of sitting inside the 68/56
   padding, which is what makes it read as a screen set into the panel rather
   than a picture pasted onto it. The values are band 2's plate padding (52px
   vertical, 56px horizontal, set below) minus a 22px inset. If that padding
   changes, change these with it or the bleed goes lopsided. */
.myd-job__visual {
  margin: -30px -34px -30px 0;
  min-width: 0;
  display: flex;
}

.myd-job__visual picture {
  display: flex;
  width: 100%;
  min-width: 0;
}

.myd-job__visual img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border-radius: var(--myd-r-plate);
  display: block;
}

.myd-job__intro { max-width: none; }

/* Band 2 only: the plate carries less vertical padding than the rest of the
   page so the copy column can sit near the image's natural height. */
.myd .myd-wrap.myd-job { padding-top: 52px; padding-bottom: 52px; }

.myd .myd-job .myd-h2 { margin-bottom: 14px; }

.myd .myd-job__lede {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--myd-fg-soft);
  max-width: 46ch;
}

.myd-tasklist {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--myd-rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.myd .myd-task {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--myd-rule);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--myd-fg-soft);
}

.myd .myd-task__n {
  font-family: var(--myd-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--myd-accent);
  flex: 0 0 auto;
  min-width: 22px;
}

.myd .myd-job__aside {
  margin: 22px 0 0;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--myd-fg-mute);
}

.myd-quote {
  margin: 24px 0 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--myd-accent);
  max-width: 42ch;
}

.myd .myd-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--myd-serif) !important;
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  line-height: 1.28;
  font-weight: 700;
  color: var(--myd-heading);
}

.myd .myd-handoff {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 28px 0 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 700;
  color: var(--myd-heading);
}

.myd-handoff__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--myd-rule-strong);
  opacity: 0.35;
}

/* ══ 3. MEET (a)MD ════════════════════════════════════════════════════════ */

/* Vertical stack. This was a two-column split header (headline left, explainer
   paragraph floating right), which is the banned shape. Headline on top, body
   below at a readable measure. Do not put it back on a grid. */
.myd-meet__head {
  max-width: none;
}

.myd .myd-meet__lede p {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--myd-fg-soft);
  max-width: 65ch;
}

.myd .myd-meet__lede p:last-child { margin-bottom: 0; }

.myd .myd-emphasis {
  font-size: 1.1875rem !important;
  font-weight: 700;
  color: var(--myd-heading);
}

/* The five duties arrive as one graphic now. It runs the full plate width and
   keeps its own 14px corners so it reads as another panel, not a loose image. */
.myd-duties {
  margin: 48px 0 0;
  padding: 0;
}

.myd-duties picture {
  display: block;
  width: 100%;
}

.myd-duties img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 880;
  border-radius: var(--myd-r-plate);
}

/* Desktop: the graphic carries the duties visually, this list carries them for
   assistive tech and crawlers. The phone breakpoint flips which one is shown. */
.myd .myd-duties-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══ 4. CAPABILITY vs RESPONSIBILITY ══════════════════════════════════════ */

/* Headline left, deck right. The deck is not an explainer paragraph here: at
   150% of the page's deck size it is a display-weight counterweight to the
   headline, which is the whole point of the composition. */
.myd-shift__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: none;
}

.myd-shift__head .myd-h2 { margin-bottom: 0; max-width: 15ch; }

/* 150% of the page deck, which is clamp(1.25rem, 2.1vw, 1.6rem).
   Sets on one line: no measure cap, and nowrap so it cannot break even if the
   column tightens. Mobile releases the nowrap below. */
.myd .myd-shift__head .myd-deck {
  margin: 0;
  font-size: clamp(1.875rem, 3.15vw, 2.4rem);
  line-height: 1.2;
  max-width: none;
  white-space: nowrap;
}

.myd-compare {
  margin-top: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 0;
}

.myd-compare__divider { background: var(--myd-ink-rule); }

.myd .myd-col { padding: 4px 56px 0 0; }
.myd .myd-col--after { padding: 4px 0 0 56px; }

.myd .myd-col__label {
  margin: 0 0 22px;
  font-family: var(--myd-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--myd-ink-mute);
}

.myd .myd-col__label--accent { color: var(--myd-accent); }

.myd .myd-col__lead {
  margin: 0 0 22px;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
  color: #ffffff;
}

.myd .myd-col__body {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.65;
  color: #cfd5db;
  max-width: 44ch;
}

.myd .myd-col__body--strong { color: #ffffff; font-weight: 700; }

/* A four-key pad. The prompts are the keys you keep pressing yourself, which
   is the whole argument of this band, so the control metaphor carries it. */
.myd-prompts {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 34ch;
  counter-reset: myd-key;
}

.myd .myd-prompts li {
  position: relative;
  background: #20262d;
  border: 1px solid #2f363e;
  border-radius: var(--myd-r-control);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 20px 14px 14px;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: #d3d9df;
}

.myd .myd-prompts li::before {
  counter-increment: myd-key;
  content: counter(myd-key, decimal-leading-zero);
  position: absolute;
  top: 7px;
  left: 10px;
  font-family: var(--myd-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: #6c757e;
}

.myd .myd-col--after .myd-btn { margin-top: 12px; }

.myd .myd-burden {
  margin: 64px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--myd-ink-rule);
  font-family: var(--myd-serif) !important;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: #ffffff;
  max-width: 62ch;
}

/* ══ 5. CATEGORY PROOF ════════════════════════════════════════════════════ */

.myd-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.myd .myd-proof__lede {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--myd-fg-soft);
  max-width: none;
}

/* The headline carries its own <br>, so a measure cap would only add a third
   line on top of it. Let the break do the work. */
.myd .myd-proof__copy .myd-h2 { max-width: none; margin-bottom: 16px; }

.myd .myd-proof__body {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--myd-fg-mute);
  max-width: 46ch;
}

.myd .myd-proof__body--strong {
  color: var(--myd-heading);
  font-weight: 700;
  margin-bottom: 0;
}

/* The ranking graphic is the proof, so it takes the wide column. Its own 14px
   corners keep it inside the shape lock. */
.myd-proof__visual {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.myd-proof__visual picture {
  display: block;
  width: 100%;
}

.myd-proof__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 612;
  border-radius: var(--myd-r-plate);
}

/* ══ 6. GROW WITH YOUR BUSINESS ═══════════════════════════════════════════ */
/* Argument | twelve areas | entry-price card. The range strip spans the first
   two columns so the card can run the plate's full height beside it. */

/* This plate sits on a warm ground rather than the page white. */
.myd .myd-wrap.myd-grow {
  background: #fdfaf7;
  padding-top: 46px;
  padding-bottom: 46px;
}

.myd-grow__grid {
  display: grid;
  /* Two columns since the single entry card became the three-tier row below.
     The tiers are a sibling of this grid, not a cell in it, so they can run
     the full plate width. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "copy  areas"
    "range range";
  column-gap: 48px;
  row-gap: 0;
  align-items: start;
}

.myd-grow__copy  { grid-area: copy; }
.myd-grow__areas { grid-area: areas; }
.myd-grow__card  { grid-area: card; }
.myd-grow__range { grid-area: range; }

/* The copy column is the narrow one, so the page h2 size would overflow it.
   Sized to its column, same reasoning as section 5. */
.myd .myd-grow__copy .myd-h2 {
  max-width: 19ch;
  margin-top: 5px;
  margin-bottom: 26px;
}

.myd .myd-grow__lede {
  margin: 0 0 20px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--myd-fg-soft);
  max-width: 32ch;
}

.myd .myd-grow__lede:last-child { margin-bottom: 0; }

/* Takes its #FF8833 fill from .myd-btn--primary but overrides that button's
   pill radius: brand direction is 5px here. Loaded after the button block, so
   the radius override wins on source order at equal specificity.

   NOTE: this is a third radius on the page, alongside the 14px plates and 6px
   controls, and it sits 1px off the documented control value. Deliberate, per
   direction; see the shape-lock note in te-system.css. */
.myd .myd-grow__cta {
  margin-top: 11px;
  padding: 15px 30px;
  min-width: 215px;
  justify-content: center;
  border-radius: 5px;
  /* 2pt up from 0.9375rem, per brand direction. Same calc idiom as the card
     type below, which steps down. */
  font-size: calc(0.9375rem + 2pt);
}

/* Risk-reducer directly under the CTA, deliberately small. Width matches the
   button's min-width so "centred" means centred under the button, not across
   the whole column. Keep the two values in step. */
.myd .myd-grow__reassure {
  margin: 9px 0 0;
  width: 215px;
  max-width: 100%;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--myd-fg-mute);
}

/* ── AREAS GRID ───────────────────────────────────────────────────────────── */

.myd .myd-grow__areas-title {
  margin: 10px 0 22px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--myd-heading);
}

.myd-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 10px;
}

.myd .myd-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* Each file is glyph + label on one 350x250 canvas, so this height covers the
   whole block, not just the pictogram. There is no separate text element to
   size; see the note in the layout. */
.myd .myd-area__icon {
  display: block;
  height: 74px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ── RANGE STRIP ──────────────────────────────────────────────────────────── */

.myd .myd-grow__range {
  margin: 30px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--myd-rule);
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--myd-fg-mute);
}

.myd .myd-grow__range strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--myd-heading);
}

/* ── ENTRY PRICE CARD ─────────────────────────────────────────────────────── */

/* The card is a header row sitting on the plate, with the detail panel filled
   beneath it. The fill starts below the price, not around it. */
.myd .myd-grow__card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Title and price read as one unit. They sit on a shared baseline and stay
   adjacent, so the small label and the large figure group rather than being
   pushed to opposite edges by space-between. */
.myd .myd-grow__card-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.myd .myd-grow__card-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--myd-heading);
}

.myd .myd-grow__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 1px;
  color: var(--myd-accent);
  white-space: nowrap;
}

.myd .myd-grow__price-num {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.myd .myd-grow__price-per {
  font-size: 1.375rem;
  font-weight: 700;
}

.myd .myd-grow__panel {
  flex: 1 1 auto;
  padding: 22px 22px 24px;
  background: #f9f4ee;
  border-radius: var(--myd-r-control);
}

.myd .myd-grow__card-body {
  margin: 0 0 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--myd-fg-soft);
}

/* Highlighted focus box: the one job the entry tier owns. */
.myd .myd-grow__focus {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  margin-bottom: 18px;
  background: #fdeadb;
  border-radius: var(--myd-r-control);
  /* 2pt down from 0.875rem, per brand direction. calc keeps the intent legible
     rather than baking in the resolved pixel value. */
  font-size: calc(0.875rem - 2pt);
  font-weight: 700;
  line-height: 1.22;
  color: var(--myd-heading);
}

.myd .myd-grow__focus img {
  flex: 0 0 auto;
  height: 28px;
  width: auto;
  object-fit: contain;
}

.myd-grow__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.myd .myd-grow__checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  /* 1pt down from 0.875rem, per brand direction. Same calc idiom as the focus
     box above, which is 2pt down. */
  font-size: calc(0.875rem - 1pt);
  line-height: 1.25;
  color: var(--myd-fg-soft);
}

.myd .myd-tick {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--myd-accent);
}

/* ══ 6. FOOTER BANNER ════════════════════════════════════════════════════ */
/* The plate is the frame: no padding, image flush to the rounded edge, and the
   copy sits on the artwork's empty left third.

   Sizing is in cqw (percent of the plate's own width), not rem or vw, so the
   text stays locked to the same place in the picture at every plate width. If
   you switch these to fixed units the copy will drift off the artwork. */

.myd .myd-wrap.myd-footer {
  padding: 0;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
}

.myd .myd-footer picture {
  display: block;
  width: 100%;
}

.myd .myd-footer__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1980 / 783;
  object-fit: cover;
}

/* Text column over the artwork's empty left third. */
.myd .myd-footer__copy {
  position: absolute;
  top: 50%;
  left: 5.4cqw;
  transform: translateY(-50%);
  width: 35cqw;
  z-index: 4;
  pointer-events: none;
}

.myd .myd-footer__title {
  margin: 0 0 2.4cqw;
  font-size: max(1.5rem, 3.35cqw);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--myd-heading);
}

.myd .myd-footer__sub {
  margin: 0 0 1.3cqw;
  font-size: max(0.9375rem, 2cqw);
  font-weight: 400;
  line-height: 1.32;
  color: var(--myd-heading);
  max-width: none;
}

.myd .myd-footer__sub strong { font-weight: 700; }

/* Sits above .myd-footer__hit so it receives its own clicks and focus rather
   than the overlay swallowing them. Both trigger the same preview. */
.myd .myd-footer__btn {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 2.4cqw 0 1.6cqw;
  padding: 1.5cqw 3.6cqw;
  min-width: 22cqw;
  border: 0;
  border-radius: var(--myd-r-control);
  background: var(--myd-accent);
  color: #ffffff;
  font-size: max(0.9375rem, 1.7cqw);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.myd .myd-footer__btn:hover { background: #e07020; }

.myd .myd-footer__btn:focus-visible {
  outline: 2px solid var(--myd-heading);
  outline-offset: 3px;
}

.myd .myd-footer__fine {
  margin: 0;
  font-size: max(0.75rem, 0.86cqw);
  line-height: 1.4;
  color: var(--myd-fg-soft);
}

/* Break switches. The footer copy carries both break patterns in one string;
   these decide which set is live at a given width. */
.myd .myd-br--dt { display: inline; }
.myd .myd-br--mb { display: none; }

/* Whole-plate click target. Sits above the copy so a click anywhere on the
   banner opens the preview, which is what the artwork tells the reader to do. */
.myd .myd-footer__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--myd-r-plate);
}

.myd .myd-footer__hit:focus-visible {
  outline: 2px solid var(--myd-accent);
  outline-offset: -4px;
}

/* ── IN-PAGE JUMP TARGET ──────────────────────────────────────────────────── */
/* Every CTA on the page is an anchor to #amd-start. The scroll offset clears
   the sticky nav (max 80px tall, sitting 25px down) so the banner does not
   land under it. */

:root:has(.myd) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  :root:has(.myd) { scroll-behavior: auto; }
}

.myd #amd-start,
.myd .myd-band--last { scroll-margin-top: 118px; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .myd-wrap { padding: 48px 32px; }
  .myd-band--hero .myd-wrap + .myd-wrap { padding: 20px 32px; }

  .myd-proof,
  .myd-job__grid,
  .myd-shift__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .myd-grow__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "areas" "card" "range";
    row-gap: 32px;
  }

  .myd .myd-grow__copy .myd-h2 { max-width: 22ch; }
  .myd .myd-grow__lede { max-width: none; }

  /* Copy, cube, then the link beneath the cube. */
  .myd-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "visual"
      "cta";
    row-gap: 28px;
    column-gap: 0;
  }

  /* Cube sits 20px higher than the row gap would put it. */
  .myd-hero__visual { margin-top: -20px; }

  .myd-hero .myd-cta {
    margin-top: 0;
    align-self: center;
    /* The link shrinks to its text, so the wrapper centres it. */
    text-align: center;
  }

  /* Phone drops the pill for a plain text link: same words, one line. The
     desktop pill is untouched. */
  /* .myd .myd-btn { width: 100% } in the 767px block ties on specificity and
     is declared later, so this needs the extra class to shrink to its text. */
  .myd .myd-hero .myd-btn--primary {
    width: auto;
    min-width: 0;
    /* Text link, but still a tap target: the padding gives it height without
       drawing a box. */
    padding: 12px 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--myd-accent);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    /* The pill's 10px gap reads as a break once the box is gone. */
    gap: 6px;
  }

  .myd .myd-hero .myd-btn--primary:hover {
    background: transparent;
    color: #e07020;
  }

  .myd-shift__head { gap: 12px; align-items: start; }

  /* Stacked, the deck has the full plate width, so let it wrap rather than
     risk it pushing the plate sideways on a narrow phone. */
  .myd .myd-shift__head .myd-deck { white-space: normal; }

  /* Stacked, the bleed would tear the image off the side of the plate. */
  .myd-job__visual { margin: 0; }

  .myd-job__visual img {
    height: auto;
    aspect-ratio: 971 / 1577;
    max-height: 520px;
  }

  .myd .myd-hero__title,
  .myd .myd-h2 { max-width: 22ch; }

  .myd-hero__visual { justify-content: flex-start; }
  .myd .myd-hero__cube { max-width: 320px; }

  .myd-compare {
    grid-template-columns: minmax(0, 1fr);
    /* 60px is desktop spacing between the header row and the columns. Stacked,
       it just reads as a hole under the deck. */
    margin-top: 26px;
  }

  /* Stacked, this rule is a horizontal divider between two short blocks, not a
     tall column separator: 44px each side put 103px between them. */
  .myd-compare__divider { height: 1px; margin: 22px 0; }
  .myd .myd-col,
  .myd .myd-col--after { padding: 0; }

}

@media (max-width: 767px) {
  .myd-wrap {
    width: calc(100% - 24px);
    padding: 40px 22px;
  }

  /* The phone crop is a different shape from the desktop file. */
  .myd-job__visual img {
    aspect-ratio: 918 / 1105;
    max-height: none;
  }

  /* Part numbers are decorative schematic callouts. At phone width the plates
     have only 22px of padding, so they land on top of the copy, and the hero's
     lands under the sticky nav logo. Not worth the collisions. */
  .myd .myd-part { display: none; }

  /* Phone crop: cube plus the five labels, no descriptions. */
  .myd-duties { margin-top: 36px; }
  .myd-duties img { aspect-ratio: 918 / 622; }

  /* rnk-ggl-mb.webp is the tall crop of the same result. It still runs to the
     plate edge, because on a screenshot made of text every pixel of width is
     legibility. Its own background is white, so the bleed reads as seamless
     against the plate rather than as an image with its edges cut off. */
  .myd-proof__visual {
    margin: 0 -22px;
    width: calc(100% + 44px);
  }

  .myd-proof__visual img {
    aspect-ratio: 1050 / 947;
    border-radius: 0;
  }

  /* Banner stops being an overlay and becomes image-over-copy. */
  .myd .myd-wrap.myd-footer { padding: 0 0 22px; }

  .myd .myd-footer__img {
    aspect-ratio: 1050 / 635;
    object-fit: cover;
    margin-bottom: 18px;
  }

  .myd .myd-br--dt { display: none; }
  .myd .myd-br--mb { display: inline; }

  .myd .myd-footer__copy {
    /* relative, not static, so the z-index that lifts this above the click
       overlay still applies. That makes the desktop top/left offsets live
       again, so both have to be cleared here. */
    position: relative;
    top: auto;
    left: 0;
    transform: none;
    width: auto;
    padding: 0 22px;
    text-align: center;
  }

  /* Section 5 centres on phone: the headline, the lede and the ranking
     screenshot all sit on the centre line. */
  .myd-proof__copy { text-align: center; }

  .myd .myd-proof__copy .myd-h2 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .myd .myd-proof__lede {
    margin-left: auto;
    margin-right: auto;
  }

  .myd .myd-footer__title {
    margin-bottom: 10px;
    font-size: 1.75rem;
  }

  .myd .myd-footer__sub {
    margin-bottom: 8px;
    font-size: 1.0625rem;
    max-width: none;
    /* Centred, each of the two phrases rags into two lines and strands "you"
       alone on the second. The <br> before "5 ways" already splits the phrases
       correctly, so the fix is balancing the wrap inside each of them rather
       than adding another break. */
    text-wrap: balance;
  }

  .myd .myd-footer__fine { font-size: 0.8125rem; }

  .myd .myd-footer__btn {
    margin: 16px 0 12px;
    padding: 14px 28px;
    min-width: 0;
    width: 100%;
    font-size: 0.9375rem;
  }
  .myd-band--hero .myd-wrap + .myd-wrap { padding: 18px 22px; }
  .myd .myd-part { top: 14px; left: 14px; }

  .myd-prompts { grid-template-columns: minmax(0, 1fr); max-width: none; }

  /* .myd-btn goes full-width on phones, so the small print has to follow or
     the two stop sharing a centre line. */
  .myd .myd-grow__reassure { width: 100%; }

  /* Four columns of labelled icons at 306px puts each block at ~72px, which
     makes the baked-in label unreadable. Three columns instead. */
  .myd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 10px;
  }

  .myd .myd-area__icon { height: 66px; }
  .myd .myd-grow__range strong { font-size: 1.125rem; }
  .myd .myd-grow__range { margin-top: 0; }

  .myd .myd-btn { width: 100%; justify-content: center; }

  /* FIX 3 - task labels wrapping. The longest label needs 313px but only 260px
     was free: the 22px number column, its 16px gap and 4px side padding were
     eating 46px of a 306px row. Reclaiming that, plus 17px -> 15px, fits every
     label on one line. Dropping type alone would have meant 14px.
     This has to live HERE, not in the section 2 block near .myd-job__col: that
     block is declared above the base `.myd .myd-task` rule, and at equal
     specificity the later declaration wins. */
  .myd .myd-task {
    font-size: 0.9375rem;
    padding: 9px 0;
    gap: 8px;
  }

  .myd .myd-task__n { min-width: 16px; }

  /* The label wrapped to two lines and pushed the arrow onto its own right
     edge. Full-width pill is kept (per the mobile design); it fits on one line
     once the type and side padding come down, with the arrow parked right. */
  .myd .myd-band--dark .myd-btn--onDark {
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }


  /* Hero type steps down on phones: headline -2pt, deck -1pt, per direction.
     The clamp minimums are what resolve at this width, so the subtraction is
     applied to those rather than to the vw term. */
  .myd .myd-deck { font-size: calc(1.25rem - 1pt); }
}

@media (prefers-reduced-motion: reduce) {
  .myd .myd-btn,
  .myd .myd-btn__arrow { transition: none; }
}

/* ── HEADING SIZES ────────────────────────────────────────────────────────── */
/* Layered on purpose — see the note at the top of this file. The global
   typescale sets h1/h2/h3 with !important inside @layer site, and only another
   layered !important loaded later can beat it. */

@layer site {
  /* Selector shape is load-bearing. site-custom.css carries
     `body.mf-typescale.mf-typescale h1:not(.amd-preview-widget *)` inside this
     same layer, so a plain `.myd .myd-hero__title` loses on specificity even
     with !important. The body prefix + doubled class buys the margin needed to
     win, and only inside this page. Do not "simplify" these selectors. */

  body.mf-typescale.mf-typescale .myd .myd-hero__title.myd-hero__title {
    font-size: clamp(2.5rem, 5.4vw, 4rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.02 !important;
  }

  body.mf-typescale.mf-typescale .myd .myd-h2.myd-h2 {
    font-size: clamp(1.875rem, 3.6vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.12 !important;
  }

  /* Section 5's copy column is the narrow one (0.42fr against the graphic's
     1fr), so the page h2 size overflows it and forces the explicit <br> into a
     third line. Sized to fit that column instead. */
  body.mf-typescale.mf-typescale .myd .myd-proof__copy .myd-h2.myd-h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  }

  /* Same for section 6, whose copy column is one of three on the plate. */
  body.mf-typescale.mf-typescale .myd .myd-grow__copy .myd-h2.myd-h2 {
    font-size: calc(clamp(1.375rem, 2.2vw, 1.75rem) + 2pt) !important;
    line-height: 1.16 !important;
  }

  /* Technical labelling. Same fight as the serif below: master.css forces
     Sebino on p/li/span with an unlayered !important, so the mono has to be
     layered to win. */
  .myd .myd-part,
  .myd .myd-eyebrow,
  .myd .myd-kicker,
  .myd .myd-trust,
  .myd .myd-job__more-toggle,
  .myd .myd-job__more-toggle > span,
  .myd .myd-task__n,
  .myd .myd-col__label,
  .myd .myd-prompts li::before {
    font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas,
                 'Liberation Mono', monospace !important;
  }

  @media (max-width: 767px) {
    body.mf-typescale.mf-typescale .myd .myd-hero__title.myd-hero__title {
      font-size: calc(2.5rem - 2pt) !important;
    }
  }

  /* PT Serif accents. master.css forces Sebino on p/li/span/em/blockquote with
     an unlayered !important, so these have to be layered to reclaim the serif. */
  .myd .myd-deck,
  .myd .myd-quote blockquote,
  .myd .myd-burden {
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif !important;
  }
}

/* ── Section 6 tier row ────────────────────────────────────────────────────
   Shared by both breakpoints. Desktop runs them three across under the grid;
   the @media block above stacks them and restyles the first card's ground. */
.myd-grow__start {
  margin: 34px 0 18px;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.myd .myd-grow__start strong {
  font-weight: 700;
  color: var(--myd-heading);
}

.myd-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.myd-tier {
  padding: 24px;
  border: 1px solid var(--myd-rule);
  border-radius: var(--myd-r-plate);
  background: #ffffff;
}

.myd-tier--first {
  background: #fdeadb;
  border-color: #f6d3b6;
}

.myd .myd-tier__badge {
  display: inline-block;
  /* Sits under the description now, so the spacing flips to the top. */
  margin: 16px 0 0;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 5px 10px;
  border-radius: var(--myd-r-control);
  background: #ffffff;
  font-family: var(--myd-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--myd-accent);
}

.myd .myd-tier__name {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--myd-heading);
}

.myd .myd-tier__price {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--myd-accent);
}

.myd .myd-tier__per {
  font-size: 0.875rem;
  font-weight: 400;
}

.myd .myd-tier__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--myd-fg-soft);
}


/* Tiers 2 and 3. Same job as the first card's badge, but text only: the badge
   is a chip that marks the recommended entry point, and repeating it three
   times would flatten that signal. */
.myd .myd-tier__link {
  display: inline-block;
  margin: 16px 0 0;
  font-family: var(--myd-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--myd-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.myd a.myd-tier__link:hover { color: #e07020; }

.myd a.myd-tier__badge:hover {
  background: var(--myd-accent);
  color: #ffffff;
}

/* ══ BREAKPOINT UTILITIES ══════════════════════════════════════════════════
   Show an element at one width only. Declared at the end of the file on
   purpose: an earlier `display` rule on the same element would otherwise win
   the tie on source order. `revert` restores the element's own UA display, so
   the same class works on a <p>, a <ul> and a <span> alike. */
.myd .myd-mbOnly { display: none; }

@media (max-width: 767px) {
  .myd .myd-dtOnly { display: none; }
  .myd .myd-mbOnly { display: revert; }

  /* ── Section 6 phone composition ────────────────────────────────────────
     Runs instead of .myd-grow__grid below 767px. */
  .myd .myd-grow__mobile > * { margin-left: 0; margin-right: 0; }

  .myd .myd-grow__mobile .myd-h2 { margin-bottom: 16px; }

  .myd .myd-grow__mobile .myd-grow__lede {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--myd-fg-soft);
  }

  .myd .myd-grow__mobile .myd-grow__areas-title {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--myd-heading);
  }

  /* Three across, matching the lead row in the design. The disclosure below
     reuses the same grid so the extra icons line up with the first three. */
  .myd .myd-grow__mobile .myd-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
    margin: 0;
  }

  .myd-areas-more { margin: 0 0 18px; }

  .myd-areas-more .myd-areas { margin-top: 16px; }

  .myd .myd-areas-more__toggle {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--myd-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: lowercase;
    color: var(--myd-heading);
  }

  .myd-areas-more__toggle::-webkit-details-marker { display: none; }
  .myd-areas-more__close { display: none; }
  .myd-areas-more[open] .myd-areas-more__open { display: none; }
  .myd-areas-more[open] .myd-areas-more__close { display: inline; }

  .myd .myd-grow__start {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .myd .myd-grow__start strong {
    display: block;
    font-weight: 700;
    color: var(--myd-heading);
  }

  .myd .myd-grow__start .myd-accent { display: block; }


  /* At the inherited size the label needed 249px against a 238px budget, so it
     wrapped and pushed the arrow onto its own line. 16px fits in 225px. */
  .myd .myd-grow__mobile .myd-grow__cta {
    margin: 0 0 8px;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 1rem;
    white-space: nowrap;
  }

  .myd .myd-grow__mobile .myd-grow__reassure {
    margin: 0;
    text-align: center;
  }

  /* The third lede paragraph, repositioned under the duties graphic. Matches
     .myd-meet__lede p so it reads as the same voice, just in a new place. */
  .myd .myd-meet__after {
    margin: 18px 0 0;
    font-size: 1.0625rem;
    line-height: 1.68;
    color: var(--myd-fg-soft);
    max-width: 65ch;
  }

  /* The four prompt keys collapse to a single readout box on the phone. Same
     surface as .myd-prompts li, without the counter. */
  .myd .myd-prompt-line {
    margin: 0 0 22px;
    padding: 14px;
    background: #20262d;
    border: 1px solid #2f363e;
    border-radius: var(--myd-r-control);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-size: 0.9375rem;
    line-height: 1.35;
    color: #d3d9df;
  }
}

@media (max-width: 767px) {
  /* Phone overrides for the tier row. These have to be declared AFTER the
     desktop `.myd-tiers` rules above: both sit at the same specificity, so the
     later declaration is what wins. */
  .myd-tiers {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 20px;
  }

  .myd-tier { padding: 18px; }

  .myd .myd-tier__name { font-size: 1.1875rem; margin-bottom: 4px; }
  .myd .myd-tier__price { font-size: 1.375rem; margin-bottom: 8px; }
  .myd .myd-tier__body { font-size: 0.875rem; line-height: 1.5; }
  /* Now a link, so it needs a real tap target rather than a 10px chip. */
  .myd .myd-tier__badge { margin: 14px 0 0; padding: 12px 16px; }

  /* 19px of text is not a tap target. Padding rather than height, so the link
     still reads as text with no box around it. */
  .myd .myd-tier__link { margin-top: 8px; padding: 13px 2px; }
}