/**
 * Masterclass landing route (/masterclass/).
 *
 * Loaded ONLY on the landing route, and only ever after bundle.css, because
 * inc/enqueue-scripts.php declares aiimn-styles as this handle's dependency.
 * That ordering is what lets the whole file work without a single !important.
 *
 * NAMESPACE CONTRACT
 * Every selector here is inside .aiimn-mcx-*. The deployed bundle carries the
 * frozen .aiimn-mc-* rule set for the previous build and cannot be regenerated
 * by this task, so the rebuild claims a new namespace instead of trying to
 * out-specify roughly 1,300 lines it cannot see change. Nothing in this file
 * may style .aiimn-mc-header, .aiimn-mc-footer, .aiimn-consent-band, or any
 * other shared surface. The only non-namespaced declarations are the two on
 * :root and html below, and both are documented where they sit.
 *
 * WHY EVERY SELECTOR REPEATS ITS FIRST CLASS
 * The campaign body carries the class .aiimn-mc (header-campaign.php ->
 * body_class('aiimn-mc')), and the frozen bundle styles this route's elements
 * through descendant rules on that body class: .aiimn-mc h1, .aiimn-mc h2,
 * .aiimn-mc h3 and .aiimn-mc a. Those are specificity (0,1,1) and they beat a
 * plain single-class rule (0,1,0), which is how a rebuilt 19px mobile H1 first
 * rendered at the bundle's 34px. Repeating the leading class lifts every rule
 * here to (0,2,x), which clears the highest bundle rule that can reach this
 * markup, and does it without a single !important. It is a specificity floor,
 * not decoration: if you add a rule, repeat its first class the same way.
 *
 * TOKENS
 * Every colour is a literal from the AIIMN brand token registry. The
 * custom properties below are local aliases so the file reads like the brand
 * record, not so that a new palette can be introduced here.
 *
 * @package AIIMN
 * @since 2.2.0
 */

:root {
  /* brand.json primary + support */
  --mcx-navy: #163f68;
  --mcx-deep: #06192b;
  --mcx-orange: #ff7357;
  --mcx-orange-dark: #e85f45;
  --mcx-sky: #edf4fa;
  --mcx-white: #ffffff;
  --mcx-ink: #102033;
  --mcx-muted: #607086;
  /* brand.json extended */
  --mcx-border: rgba(22, 63, 104, .16);
  --mcx-shadow: 0 24px 70px rgba(6, 25, 43, .14);
  --mcx-navy-800: #0a2440;
  --mcx-navy-700: #0f3156;
  --mcx-navy-500: #1d5490;
  --mcx-navy-300: #4d88c4;
  --mcx-coral-lighter: #ffb8a8;
  --mcx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  /*
   * Published by assets/js/masterclass.js from the sticky bar's real measured
   * height, and reset to 0 the moment the bar is not shown. Declared here so
   * the calc below has a value before the first measurement.
   */
  --mc-sticky-h: 0px;
}

/*
 * WCAG 2.2 2.4.11 (focus not obscured). A control reached by keyboard or by a
 * fragment jump must not land underneath the fixed bar. The bundle already
 * declares an equivalent rule; this file restates it so the route's behaviour
 * does not depend on a stylesheet this task cannot change.
 */
html {
  scroll-padding-bottom: calc(var(--mc-sticky-h) + 16px);
}

/* ------------------------------------------------------------------ */
/* Scoped reset                                                        */
/* Only elements this route renders. bundle.css gives every <p> a       */
/* bottom margin and every heading a token font size; the components    */
/* below own their own rhythm, so it is cleared once here rather than   */
/* fought rule by rule.                                                 */
/* ------------------------------------------------------------------ */
/*
 * :where() is load-bearing here, not decoration. A reset must sit BELOW the
 * components it clears, and a bare element selector adds specificity: written
 * as ".aiimn-mcx-main h1" this reset is (0,2,1) and silently beats every
 * component rule at (0,2,0), which zeroes the whole page's vertical rhythm and
 * strips the outcome chips of their padding. :where() contributes nothing, so
 * the reset lands at (0,2,0) - still above the bundle's .aiimn-mc h1 (0,1,1)
 * and above bare p/h1 rules - while any component rule later in this file wins
 * on source order, which is what a reset is for.
 */
.aiimn-mcx-main.aiimn-mcx-main :where(h1, h2, h3, p, ul, ol, li),
.aiimn-mcx-strip.aiimn-mcx-strip :where(p, ul, li),
.aiimn-mcx-sticky.aiimn-mcx-sticky :where(p) {
  margin: 0;
  padding: 0;
}

.aiimn-mcx-main.aiimn-mcx-main :where(ul, ol) {
  list-style: none;
}

/*
 * overflow-wrap is inherited, so declaring it once on the three route surfaces
 * gives every descendant the same last-resort behaviour without a single extra
 * selector. It is "break-word", never "anywhere": break-word inserts a soft
 * break ONLY when a word would otherwise overflow its line box, and it is
 * defined not to change min-content sizing, so no grid track, flex base or
 * shrink-to-fit box measures differently because of it. That is the property
 * that makes this line provably inert at the default 16px root - every word on
 * this route already fits its line there - while at a large browser font size
 * it is what stops a single long word painting past the viewport.
 *
 * It has no effect at all under white-space:nowrap, which is why the sticky
 * bar's button and note keep behaving exactly as they did.
 *
 * One thing this DOES change, and it is deliberate: the frozen bundle gives
 * headings, paragraphs and list items break-word but leaves bare divs, <b>
 * and <summary> inheriting its "anywhere" from an ancestor, so those elements
 * move from anywhere to break-word here. That is a narrowing, and it is the
 * safer direction - "anywhere" shrinks min-content, which is precisely the
 * kind of silent intrinsic-sizing change this pass must not make. Every
 * element that relied on it was re-measured; the route carries zero horizontal
 * overflow at 16px, 32px, 48px and 64px roots at 360, 390, 768 and 1280 with
 * break-word in force. Stating it here also keeps the route's behaviour
 * independent of a stylesheet this task cannot regenerate, which is the same
 * reason the scroll-padding rule near the top of this file is restated.
 */
.aiimn-mcx-main.aiimn-mcx-main,
.aiimn-mcx-strip.aiimn-mcx-strip,
.aiimn-mcx-sticky.aiimn-mcx-sticky {
  color: var(--mcx-ink);
  line-height: 1.55;
  overflow-wrap: break-word;
}

/*
 * The route's own container geometry. Scoped to direct children of surfaces
 * this file owns, so the campaign header and footer keep the shared .container
 * exactly as the bundle styles them.
 */
.aiimn-mcx-strip.aiimn-mcx-strip > .container,
.aiimn-mcx-hero.aiimn-mcx-hero > .container,
.aiimn-mcx-section.aiimn-mcx-section > .container,
.aiimn-mcx-sticky.aiimn-mcx-sticky > .container {
  width: 100%;
  max-width: var(--aiimn-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.aiimn-mcx-main.aiimn-mcx-main :focus-visible,
.aiimn-mcx-strip.aiimn-mcx-strip :focus-visible,
.aiimn-mcx-sticky.aiimn-mcx-sticky :focus-visible {
  outline: 3px solid var(--mcx-navy-300);
  outline-offset: 2px;
}

/* On dark ground the navy ring disappears into the background. */
.aiimn-mcx-hero.aiimn-mcx-hero :focus-visible,
.aiimn-mcx-strip.aiimn-mcx-strip :focus-visible,
.aiimn-mcx-sticky.aiimn-mcx-sticky :focus-visible,
.aiimn-mcx-section--navy.aiimn-mcx-section--navy :focus-visible {
  outline-color: #fff;
}

/*
 * ...but the register card is a WHITE surface sitting inside those dark
 * sections, so the rule above must not follow controls into it. Measured: a
 * white ring on the white card is 1:1 against the card it is drawn on, which
 * is no focus indicator at all for the hero submit button. navy-500 measures
 * 7.7:1 against the card, and it is the same colour the fields already use, so
 * the whole card has one focus treatment. Declared after the dark-ground rule
 * on purpose: both are (0,2,0) and source order decides.
 */
.aiimn-mcx-card.aiimn-mcx-card :focus-visible {
  outline-color: var(--mcx-navy-500);
}

/* ------------------------------------------------------------------ */
/* Countdown / event-state strip                                       */
/* Normal flow, full bleed, directly under the campaign header. Never   */
/* fixed: the route has exactly one fixed layer and it is the bar.      */
/* ------------------------------------------------------------------ */
.aiimn-mcx-strip.aiimn-mcx-strip {
  background: var(--mcx-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
}

.aiimn-mcx-strip.aiimn-mcx-strip > .container {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.aiimn-mcx-strip__group.aiimn-mcx-strip__group,
.aiimn-mcx-strip__clock.aiimn-mcx-strip__clock {
  justify-content: center;
}

.aiimn-mcx-strip__group.aiimn-mcx-strip__group {
  display: flex;
  align-items: baseline;
  gap: 4px 10px;
  flex-wrap: wrap;
}

/* The server ships one group hidden; [hidden] must beat display:flex. */
.aiimn-mcx-strip__group.aiimn-mcx-strip__group[hidden] {
  display: none;
}

.aiimn-mcx-strip__group--badge.aiimn-mcx-strip__group--badge {
  align-items: center;
  gap: 6px 12px;
}

.aiimn-mcx-strip__clock.aiimn-mcx-strip__clock {
  font-family: var(--mcx-mono);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--mcx-orange);
  letter-spacing: .02em;
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
}

.aiimn-mcx-strip__clock.aiimn-mcx-strip__clock i {
  font-style: normal;
  white-space: nowrap;
}

.aiimn-mcx-strip__caption.aiimn-mcx-strip__caption {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/*
 * The status dot is a ::before, never an element. The state-copy binder writes
 * textContent, which would delete a child element on the first client-side
 * state change. This is the one detail of the strip that cannot be simplified.
 */
.aiimn-mcx-strip__badge.aiimn-mcx-strip__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mcx-orange);
  white-space: nowrap;
}

.aiimn-mcx-strip__badge.aiimn-mcx-strip__badge::before {
  content: "";
  /* em, not px: the dot reads as punctuation for the label beside it and has
     to grow with it. 0.75em against the badge's own 0.75rem resolves to
     exactly 9px at a 16px root. */
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.aiimn-mcx-strip__note.aiimn-mcx-strip__note {
  font-size: 0.78125rem;
  color: rgba(255, 255, 255, .8);
  max-width: 64ch;
}

.aiimn-mcx-strip.aiimn-mcx-strip[data-strip-state="live"] .aiimn-mcx-strip__badge {
  color: var(--mcx-coral-lighter);
}

.aiimn-mcx-strip.aiimn-mcx-strip[data-strip-state="ended"] {
  background: #081f36;
}

.aiimn-mcx-strip.aiimn-mcx-strip[data-strip-state="ended"] .aiimn-mcx-strip__badge {
  color: rgba(255, 255, 255, .72);
}

/* The route's only animation, and it is opt-in. */
@media (prefers-reduced-motion: no-preference) {
  .aiimn-mcx-strip.aiimn-mcx-strip[data-strip-state="live"] .aiimn-mcx-strip__badge::before {
    animation: aiimnMcxPulse 2s ease-in-out infinite;
  }
}

@keyframes aiimnMcxPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.aiimn-mcx-hero.aiimn-mcx-hero {
  color: #fff;
  padding-block: var(--aiimn-hero-pad-y);
  overflow: hidden;
}

.aiimn-mcx-hero__grid.aiimn-mcx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas:
    "copy card"
    "logi card";
  gap: 8px 40px;
  align-items: start;
}

/*
 * min-width:0 is not sufficient here and max-width:100% is not decoration.
 * This grid becomes a column flex container at 760 and below, and the container
 * carries align-items:start, so its children are NOT stretched - their width is
 * fit-content, which is allowed to resolve to their min-content. At a 64px root
 * the hero copy column's min-content is 422px inside a 358px container, so the
 * H1 and the outcome chips were being CLIPPED by .aiimn-mcx-hero's overflow:
 * hidden rather than overflowing the document. Clipped is worse than scrollable
 * - the reader cannot reach the text either way and gets no scrollbar telling
 * them so - and it is why the chip row read as a smaller contributor than it
 * was. max-width:100% puts a ceiling on fit-content; the inherited
 * overflow-wrap:break-word then breaks the word that no longer fits.
 *
 * At every default size each child is already narrower than the container, so
 * the ceiling is never reached and nothing measures differently.
 */
.aiimn-mcx-hero__grid.aiimn-mcx-hero__grid > * {
  min-width: 0;
  max-width: 100%;
}

.aiimn-mcx-hero__copy.aiimn-mcx-hero__copy {
  grid-area: copy;
}

.aiimn-mcx-hero__grid.aiimn-mcx-hero__grid > .aiimn-mcx-card {
  grid-area: card;
}

.aiimn-mcx-hero__eyebrow.aiimn-mcx-hero__eyebrow {
  color: var(--mcx-orange);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.aiimn-mcx-hero__title.aiimn-mcx-hero__title {
  font-size: var(--aiimn-display-1-hero);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: var(--aiimn-tracking-display);
  color: #fff;
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

.aiimn-mcx-hero__subhead.aiimn-mcx-hero__subhead {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .85);
  max-width: 34em;
  margin-bottom: 14px;
}

.aiimn-mcx-hero__when.aiimn-mcx-hero__when {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

/*
 * Byline. The proof and the person who owns it are one visual unit, so this is
 * identical on desktop and mobile and is never hidden by a media query.
 */
.aiimn-mcx-byline.aiimn-mcx-byline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  padding: 5px 15px 5px 5px;
  margin-bottom: 12px;
}

.aiimn-mcx-byline__avatar.aiimn-mcx-byline__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  /* 22%, not 50%: the crop has to land on the face at a 30px render. */
  object-position: 50% 22%;
  flex: none;
  background: var(--mcx-navy-700);
}

.aiimn-mcx-byline__text.aiimn-mcx-byline__text {
  font-size: 0.84375rem;
  color: rgba(255, 255, 255, .92);
}

.aiimn-mcx-hero__prooflead.aiimn-mcx-hero__prooflead {
  font-size: 0.90625rem;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 12px;
}

.aiimn-mcx-chips.aiimn-mcx-chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/*
 * min-width:min-content stays HERE, at desktop, and it is not decoration: it is
 * measured to be load-bearing at the default text size. Removing it moves the
 * three chips from 180/209/180 to a uniform 190 at 1280 and drops the row into
 * a second line at 768, which changes the page height. It is kept untouched for
 * that reason. The mobile override at the bottom of this file takes it to 0
 * instead, where the same measurement shows it is completely inert.
 *
 * What did change is the <b> below, which no longer carries white-space:nowrap.
 * That declaration and this one were documented as one mechanism, so the split
 * needs saying plainly: min-content is what stops a chip shrinking under its
 * own figure and spilling into its neighbour, and it still does that. nowrap
 * was insurance against a mid-string break in "$5,000+/mo", and because that
 * string contains no space and no break opportunity, dropping it changes
 * nothing at any default size and changes this element's min-content not at
 * all. It only matters at the size where the figure genuinely cannot fit a
 * line, which is the case this pass exists for.
 */
.aiimn-mcx-chip.aiimn-mcx-chip {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 115, 87, .35);
  border-radius: 12px;
  padding: 14px 16px;
  flex: 1 1 150px;
  min-width: min-content;
}

.aiimn-mcx-chip.aiimn-mcx-chip b {
  display: block;
  font-size: 2.125rem;
  font-weight: 800;
  color: var(--mcx-orange);
  letter-spacing: -.02em;
  line-height: 1.05;
}

.aiimn-mcx-chip.aiimn-mcx-chip b i {
  font-style: normal;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0;
}

.aiimn-mcx-chip.aiimn-mcx-chip span {
  display: block;
  font-size: 0.78125rem;
  color: rgba(255, 255, 255, .85);
  line-height: 1.3;
  margin-top: 5px;
}

.aiimn-mcx-logistics.aiimn-mcx-logistics {
  grid-area: logi;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/*
 * No nowrap. These pills are the shortest strings on the route and sit in a
 * wrapping row with room to spare at every default size, so holding them to one
 * line was never doing anything there - the parity probe measures each pill
 * unchanged. Once the hero column stopped being clipped, "Live on Circle" at a
 * 64px root was the one pill still 20px wider than the column, and letting it
 * take a second line inside its own border is the whole fix.
 */
.aiimn-mcx-logistics.aiimn-mcx-logistics li {
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  padding: 3px 10px;
}

/* ------------------------------------------------------------------ */
/* Register card                                                       */
/* ------------------------------------------------------------------ */
.aiimn-mcx-card.aiimn-mcx-card {
  background: var(--mcx-white);
  color: var(--mcx-ink);
  border-radius: 16px;
  box-shadow: var(--mcx-shadow);
  padding: 24px;
  min-width: 0;
}

.aiimn-mcx-card__heading.aiimn-mcx-card__heading {
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--mcx-navy);
  margin-bottom: 4px;
  line-height: 1.2;
}

.aiimn-mcx-card__intro.aiimn-mcx-card__intro {
  font-size: 0.875rem;
  color: var(--mcx-muted);
  margin-bottom: 14px;
}

.aiimn-mcx-card__ended.aiimn-mcx-card__ended p {
  font-size: 0.9375rem;
  color: var(--mcx-muted);
  margin-top: 6px;
}

.aiimn-mcx-field.aiimn-mcx-field {
  margin-bottom: 12px;
}

.aiimn-mcx-field.aiimn-mcx-field label {
  display: block;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--mcx-navy);
  margin-bottom: 5px;
}

/* 16px, so iOS does not zoom the viewport on focus. */
.aiimn-mcx-field.aiimn-mcx-field input {
  width: 100%;
  min-width: 0;
  height: 3rem;
  border: 1px solid var(--mcx-border);
  background: #f4f8fc;
  border-radius: 9px;
  padding: 0 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--mcx-ink);
}

.aiimn-mcx-field.aiimn-mcx-field input:focus-visible {
  outline: 2px solid var(--mcx-navy-500);
  outline-offset: 1px;
}

.aiimn-mcx-field.aiimn-mcx-field input[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fff5f4;
}

.aiimn-mcx-field-error.aiimn-mcx-field-error {
  font-size: 0.8125rem;
  color: #a5281a;
  margin-top: 5px;
  font-weight: 600;
}

/*
 * Primary action.
 *
 * The label is deep navy, NOT white. White on #ff7357 measures 2.68:1, which
 * fails AA outright and does not even clear the 3:1 large-text bar; #06192b on
 * the same orange measures 6.64:1. The orange itself is unchanged, so the
 * button still reads as the brand's one accent. This override lives inside the
 * .aiimn-mcx-* namespace only: no shared button token is touched by this file.
 * The hover shade measures 5.21:1 with the same label.
 */
.aiimn-mcx-btn.aiimn-mcx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  background: var(--mcx-orange);
  color: var(--mcx-deep);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.2;
  border: 0;
  border-radius: var(--aiimn-radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--button-padding-y) var(--button-padding-x);
}

.aiimn-mcx-btn--block.aiimn-mcx-btn--block {
  display: flex;
  width: 100%;
  padding: 0 16px;
  /*
   * The block submit is the only button allowed to wrap. Its label is already
   * one line at every default size, so this changes nothing at a 16px root;
   * at a large browser font size the alternative is a 364px label inside a
   * 330px button, which pushed the whole hero column past a 390px viewport.
   * The inline buttons keep nowrap.
   */
  white-space: normal;
  text-align: center;
}

.aiimn-mcx-btn.aiimn-mcx-btn:hover,
.aiimn-mcx-btn.aiimn-mcx-btn:focus-visible {
  background: var(--mcx-orange-dark);
  color: var(--mcx-deep);
}

/*
 * Busy state. Not the muted grey the previous build used: that carried the
 * "Saving your seat…" label at roughly 2:1 against its own ground. White on
 * navy-700 measures 13.2:1 and still reads plainly as unavailable.
 */
.aiimn-mcx-btn.aiimn-mcx-btn[disabled] {
  background: var(--mcx-navy-700);
  color: #fff;
  cursor: progress;
}

.aiimn-mcx-disclosure.aiimn-mcx-disclosure {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mcx-muted);
  margin-top: 12px;
}

.aiimn-mcx-disclosure.aiimn-mcx-disclosure a {
  color: var(--mcx-navy);
}

.aiimn-mcx-notice.aiimn-mcx-notice {
  border: 1px solid #e2b3ab;
  background: #fff5f4;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.875rem;
}

.aiimn-mcx-notice.aiimn-mcx-notice[hidden] {
  display: none;
}

.aiimn-mcx-notice.aiimn-mcx-notice strong {
  display: block;
  color: #a5281a;
  margin-bottom: 6px;
}

.aiimn-mcx-notice.aiimn-mcx-notice ul {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
}

.aiimn-mcx-notice.aiimn-mcx-notice a {
  color: #a5281a;
}

.aiimn-mcx-form-status.aiimn-mcx-form-status {
  font-size: 0.875rem;
  color: var(--mcx-navy);
  font-weight: 600;
  margin-bottom: 10px;
}

/* Honeypot. Visually hidden but focusable-by-bot, never display:none. */
.aiimn-mcx-hp.aiimn-mcx-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */
.aiimn-mcx-section.aiimn-mcx-section {
  padding-block: var(--aiimn-section-y-tight);
  background: var(--mcx-white);
}

.aiimn-mcx-section--sky.aiimn-mcx-section--sky {
  background: var(--mcx-sky);
}

.aiimn-mcx-section--navy.aiimn-mcx-section--navy {
  background: linear-gradient(180deg, var(--mcx-deep), var(--mcx-navy-800));
  color: #fff;
}

.aiimn-mcx-h2.aiimn-mcx-h2 {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--mcx-navy);
  letter-spacing: -.01em;
  margin-bottom: 12px;
  line-height: 1.18;
}

.aiimn-mcx-section--navy.aiimn-mcx-section--navy .aiimn-mcx-h2 {
  color: #fff;
}

.aiimn-mcx-lead.aiimn-mcx-lead {
  font-size: 1.0625rem;
  max-width: 44em;
  margin-bottom: 22px;
}

.aiimn-mcx-section--navy.aiimn-mcx-section--navy .aiimn-mcx-lead {
  color: rgba(255, 255, 255, .88);
}

/* ---------------- takeaways ---------------------------------------- */
/* Column flow with break-inside:avoid, which is what keeps items 03 to */
/* 05 from opening a row-height gap the way a two-column grid did.      */
.aiimn-mcx-takeaways.aiimn-mcx-takeaways {
  columns: 2;
  column-gap: 40px;
  counter-reset: aiimnMcx;
}

/*
 * Both tracks are minmax()-bounded, and neither bound changes a default-size
 * render: 2.75rem is 44px and the content track's own min-content sits far
 * below its share of a 358px (mobile) or 340px (two-column desktop) row, so
 * both tracks resolve to exactly the values the bare "2.75rem 1fr" produced.
 *
 * What the bounds buy is behaviour at a large browser font size. A bare 1fr
 * carries an automatic minimum of min-content, so the content column could not
 * shrink below its longest word - 367px at a 64px root - and pushed the whole
 * item to 573px. minmax(0, 1fr) removes that floor, and the inherited
 * overflow-wrap:break-word then breaks the word that no longer fits instead of
 * letting it paint past the viewport. minmax(0, 2.75rem) does the same for the
 * counter track, which would otherwise hold a hard 176px for two digits.
 */
.aiimn-mcx-takeaways.aiimn-mcx-takeaways li {
  display: grid;
  grid-template-columns: minmax(0, 2.75rem) minmax(0, 1fr);
  gap: 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
}

.aiimn-mcx-takeaways.aiimn-mcx-takeaways li::before {
  counter-increment: aiimnMcx;
  content: counter(aiimnMcx, decimal-leading-zero);
  font-family: var(--mcx-mono);
  color: var(--mcx-orange);
  font-size: 0.9375rem;
  font-weight: 700;
  padding-top: 3px;
}

.aiimn-mcx-takeaways.aiimn-mcx-takeaways h3 {
  font-size: 1.09375rem;
  font-weight: 700;
  color: var(--mcx-navy);
  margin-bottom: 5px;
  line-height: 1.3;
}

.aiimn-mcx-takeaways.aiimn-mcx-takeaways p {
  font-size: 0.90625rem;
}

/* ---------------- fit ---------------------------------------------- */
.aiimn-mcx-fit.aiimn-mcx-fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}

.aiimn-mcx-fit__col.aiimn-mcx-fit__col {
  border: 1px solid var(--mcx-border);
  border-radius: 12px;
  padding: 22px;
  background: var(--mcx-white);
}

.aiimn-mcx-fit__col--yes.aiimn-mcx-fit__col--yes {
  background: var(--mcx-sky);
  border-color: rgba(22, 63, 104, .28);
}

.aiimn-mcx-fit__col.aiimn-mcx-fit__col h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mcx-navy);
  margin-bottom: 12px;
}

.aiimn-mcx-fit__col--no.aiimn-mcx-fit__col--no h3 {
  color: var(--mcx-muted);
}

.aiimn-mcx-fit__col.aiimn-mcx-fit__col li {
  font-size: 0.90625rem;
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
}

.aiimn-mcx-fit__col--yes.aiimn-mcx-fit__col--yes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mcx-orange);
}

.aiimn-mcx-fit__col--no.aiimn-mcx-fit__col--no li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  background: var(--mcx-muted);
}

.aiimn-mcx-anchor.aiimn-mcx-anchor {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.aiimn-mcx-anchor.aiimn-mcx-anchor[hidden] {
  display: none;
}

/*
 * The route has exactly three .aiimn-mcx-btn instances: this mid-page anchor,
 * the sticky bar's, and the block submit. The block submit already wraps. This
 * rule adds the mid-page anchor and DELIBERATELY leaves the sticky bar out, so
 * the base nowrap still governs the one fixed layer on the page - a bar that
 * grows with its own text is the failure mode the UX architecture decision
 * rules out, and RB3-10 confirmed that distinction is load-bearing.
 *
 * The anchor button is an inline-flex, so its width is min(max-content,
 * available). white-space does not change max-content, which is why the button
 * measures the same width, height and position at the default root as it did
 * with nowrap - one line either way. At a 64px root its label needs 398px in a
 * 312px row, and wrapping is what removes that 76px of overflow; min-height on
 * the base rule is what lets the box grow to hold the wrapped label instead of
 * clipping it.
 */
.aiimn-mcx-anchor.aiimn-mcx-anchor .aiimn-mcx-btn {
  white-space: normal;
  text-align: center;
}

.aiimn-mcx-anchor.aiimn-mcx-anchor p {
  font-size: 0.84375rem;
  color: var(--mcx-muted);
}

/* The ended state renders this note INSTEAD of the button, never as well. */
.aiimn-mcx-anchor__ended.aiimn-mcx-anchor__ended {
  margin-top: 22px;
  font-size: 0.9375rem;
  color: var(--mcx-muted);
}

/* ---------------- proof -------------------------------------------- */
.aiimn-mcx-stats.aiimn-mcx-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.aiimn-mcx-stat.aiimn-mcx-stat {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 24px 22px;
  min-width: 0;
}

/*
 * The clamp is what keeps the figure inside its track at every width, and it
 * still does the whole job at a default browser font size: "$5,000+/mo" is one
 * line at 360, 390, 768 and 1280, measured rather than assumed.
 *
 * The nowrap that used to sit beside it is gone. It was insurance against a
 * mid-string break, but the string carries no space, so removing it changes
 * nothing until the text no longer fits its line at all. That mattered because
 * the clamp's rem floor is deliberately rem - that conversion is what makes
 * this page honour an enlarged browser font size - and so at a 64px root the
 * floor resolved to 96px, at which "$5,000+/mo" needs 575px inside a 312px box.
 * nowrap turned that into 224px of horizontal document overflow, the single
 * largest contributor. Letting the figure break is the concession that keeps
 * the scaling.
 */
.aiimn-mcx-stat.aiimn-mcx-stat b {
  display: block;
  font-size: clamp(1.625rem, 3.4vw, 2.625rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--mcx-orange);
  letter-spacing: -.02em;
}

.aiimn-mcx-stat.aiimn-mcx-stat strong {
  display: block;
  font-size: 1.03125rem;
  margin: 8px 0;
}

.aiimn-mcx-stat.aiimn-mcx-stat span {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.45;
}

/* ---------------- host --------------------------------------------- */
.aiimn-mcx-host.aiimn-mcx-host {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 36px;
  /* Centred, so a short prose column does not leave a dead zone beside the
     portrait at 1280. */
  align-items: center;
}

.aiimn-mcx-host--textonly.aiimn-mcx-host--textonly {
  grid-template-columns: minmax(0, 1fr);
}

.aiimn-mcx-host__picture.aiimn-mcx-host__picture {
  display: block;
}

.aiimn-mcx-host__portrait.aiimn-mcx-host__portrait {
  border-radius: 14px;
  width: 100%;
  height: auto;
  box-shadow: var(--mcx-shadow);
}

.aiimn-mcx-host__body.aiimn-mcx-host__body {
  font-size: 1.03125rem;
  max-width: 44em;
}

/* ---------------- faq ---------------------------------------------- */
.aiimn-mcx-faq.aiimn-mcx-faq details {
  background: var(--mcx-white);
  border: 1px solid var(--mcx-border);
  border-radius: 10px;
  margin-bottom: 10px;
}

/*
 * 52px tall: comfortably past the 44px pointer-target floor.
 *
 * flex-wrap:wrap is the last of the 400% fixes and the only one that is not
 * about a named contributor. The question text is an ANONYMOUS flex item - a
 * bare text node with no element around it - so nothing can select it and give
 * it min-width:0, and its automatic minimum size is therefore its longest word.
 * At a 64px root that is wider than the row left over beside the +/- marker, so
 * the row itself overflowed. Allowing the row to wrap drops the marker to its
 * own line instead. The two items fit one line at every default size, so the
 * summary measures the same width and height as before; the parity probe
 * checks that rather than trusting it.
 */
.aiimn-mcx-faq.aiimn-mcx-faq summary {
  padding: 16px 18px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--mcx-navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.aiimn-mcx-faq.aiimn-mcx-faq summary::-webkit-details-marker {
  display: none;
}

.aiimn-mcx-faq.aiimn-mcx-faq summary::after {
  content: "+";
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--mcx-orange);
  line-height: 1;
  flex: none;
}

.aiimn-mcx-faq.aiimn-mcx-faq details[open] summary::after {
  content: "\2212";
}

.aiimn-mcx-faq.aiimn-mcx-faq details[open] summary {
  border-bottom: 1px solid var(--mcx-border);
  margin-bottom: 12px;
}

.aiimn-mcx-faq.aiimn-mcx-faq details p {
  padding: 0 18px 16px;
  font-size: 0.90625rem;
}

/* ---------------- close -------------------------------------------- */
.aiimn-mcx-close.aiimn-mcx-close {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px;
  /*
   * Centred rather than top-aligned. The argument column is deliberately short
   * and the form card is tall; aligning to the top left a large empty navy
   * region under the copy at 1280. Centring balances the two masses without
   * padding the copy out with words it does not need.
   */
  align-items: center;
}

.aiimn-mcx-close.aiimn-mcx-close > * {
  min-width: 0;
}

/*
 * width:100% is doing one specific job and is a no-op at every default size,
 * where the card already stretches to its grid area and is then capped by the
 * max-width below. A grid item with width:auto is sized by the track UNTIL its
 * content contribution exceeds it, at which point the item paints wider than
 * its own area; that is how the closing card reached 385px inside a 306px
 * track at a 64px root on a 768 viewport, and min-width:0 does not prevent it
 * because the item's width was never the constrained value. An explicit
 * percentage width is, so the card now stays inside its column and the content
 * wraps instead.
 */
.aiimn-mcx-close.aiimn-mcx-close .aiimn-mcx-card {
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}

.aiimn-mcx-close__body.aiimn-mcx-close__body {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .88);
  max-width: 36em;
  margin-bottom: 16px;
}

.aiimn-mcx-close__when.aiimn-mcx-close__when {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, .72);
}

.aiimn-mcx-close__when.aiimn-mcx-close__when b {
  color: var(--mcx-orange);
}

/* ------------------------------------------------------------------ */
/* Sticky register bar                                                 */
/* The route's ONLY fixed surface. It ships with the hidden attribute   */
/* and masterclass.js is the only thing that removes it, so a page       */
/* without JavaScript never renders it at all.                          */
/* ------------------------------------------------------------------ */
.aiimn-mcx-sticky.aiimn-mcx-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: rgba(6, 25, 43, .97);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 10px 0;
  visibility: hidden;
  transform: translateY(100%);
}

@media (prefers-reduced-motion: no-preference) {
  .aiimn-mcx-sticky.aiimn-mcx-sticky {
    transition: transform .18s ease-out, visibility .18s;
  }
}

.aiimn-mcx-sticky.aiimn-mcx-sticky.is-visible {
  visibility: visible;
  transform: translateY(0);
}

.aiimn-mcx-sticky.aiimn-mcx-sticky > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/*
 * nowrap plus ellipsis, not wrapping. The previous build's note wrapped to a
 * second row and made the bar 108.9px at 390px; a fixed bar that grows with its
 * own text is the failure this route rejected a sticky surface over once
 * already.
 */
.aiimn-mcx-sticky__note.aiimn-mcx-sticky__note {
  color: rgba(255, 255, 255, .82);
  font-size: 0.84375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* masterclass.js sets [data-compact] past 18% of the viewport height. */
.aiimn-mcx-sticky.aiimn-mcx-sticky[data-compact] .aiimn-mcx-sticky__note {
  display: none;
}

.aiimn-mcx-sticky.aiimn-mcx-sticky[data-compact] .aiimn-mcx-btn {
  flex: 1;
}

.aiimn-mcx-sticky.aiimn-mcx-sticky .aiimn-mcx-btn {
  min-height: 2.875rem;
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* Genuine recomposition, not a squeeze: the hero becomes a column,     */
/* the subhead and the hero card intro are dropped, and every value     */
/* below exists to keep the submit button and the complete consent      */
/* disclosure above the fold.                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .aiimn-mcx-strip.aiimn-mcx-strip > .container,
  .aiimn-mcx-hero.aiimn-mcx-hero > .container,
  .aiimn-mcx-section.aiimn-mcx-section > .container,
  .aiimn-mcx-sticky.aiimn-mcx-sticky > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .aiimn-mcx-strip.aiimn-mcx-strip > .container {
    gap: 4px 8px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .aiimn-mcx-strip__clock.aiimn-mcx-strip__clock { font-size: 0.78125rem; }
  .aiimn-mcx-strip__caption.aiimn-mcx-strip__caption { font-size: 0.6875rem; letter-spacing: .08em; }
  .aiimn-mcx-strip__badge.aiimn-mcx-strip__badge { font-size: 0.6875rem; }

  /* The badge states carry a longer honest note. It wraps to its own line
     rather than truncating, and is sized so the strip stays compact enough
     that the hero form keeps its fold budget in every state. */
  .aiimn-mcx-strip__note.aiimn-mcx-strip__note {
    font-size: 0.71875rem;
    line-height: 1.3;
    flex-basis: 100%;
  }

  .aiimn-mcx-strip__group--badge.aiimn-mcx-strip__group--badge { gap: 3px 10px; }

  .aiimn-mcx-hero.aiimn-mcx-hero { padding: 10px 0 30px; }

  .aiimn-mcx-hero__grid.aiimn-mcx-hero__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .aiimn-mcx-hero__title.aiimn-mcx-hero__title { font-size: 1.4375rem; margin-bottom: 8px; }
  .aiimn-mcx-hero__eyebrow.aiimn-mcx-hero__eyebrow { font-size: 0.6875rem; letter-spacing: .18em; margin-bottom: 6px; }
  .aiimn-mcx-hero__subhead.aiimn-mcx-hero__subhead { display: none; }
  .aiimn-mcx-hero__when.aiimn-mcx-hero__when { font-size: 0.8125rem; margin-bottom: 8px; }
  .aiimn-mcx-byline.aiimn-mcx-byline { gap: 7px; padding: 4px 12px 4px 4px; margin-bottom: 8px; }
  .aiimn-mcx-byline__avatar.aiimn-mcx-byline__avatar { width: 26px; height: 26px; }
  .aiimn-mcx-byline__text.aiimn-mcx-byline__text { font-size: 0.71875rem; }
  .aiimn-mcx-hero__prooflead.aiimn-mcx-hero__prooflead { font-size: 0.75rem; margin-bottom: 8px; }

  /* Wrap-tolerant rather than nowrap: at 390 the three chips still make one
     row, but under text scaling the row wraps instead of forcing horizontal
     overflow.

     min-width goes to 0 HERE and only here. The desktop rule keeps
     min-content because it is measured to set the chip widths at 1280 and the
     row count at 768; at 360 and 390 the same measurement shows the flex base
     always wins, the floor is never consulted, and every chip renders to the
     same hundredth of a pixel either way. Below this breakpoint the floor buys
     nothing and costs a great deal: it grows with the text, and at a 64px root
     it held the widest chip at 404px inside a 358px column, which was the
     hero's whole share of the 400% overflow. */
  .aiimn-mcx-chips.aiimn-mcx-chips { gap: 6px; margin-bottom: 10px; }
  .aiimn-mcx-chip.aiimn-mcx-chip { padding: 8px; flex: 1 1 88px; min-width: 0; border-radius: 10px; }
  .aiimn-mcx-chip.aiimn-mcx-chip b { font-size: 1.125rem; }
  .aiimn-mcx-chip.aiimn-mcx-chip b i { font-size: 0.6875rem; }
  .aiimn-mcx-chip.aiimn-mcx-chip span { font-size: 0.6875rem; margin-top: 3px; }

  .aiimn-mcx-logistics.aiimn-mcx-logistics { margin-top: 12px; gap: 5px; }
  .aiimn-mcx-logistics.aiimn-mcx-logistics li { font-size: 0.6875rem; padding: 2px 8px; letter-spacing: .06em; }

  .aiimn-mcx-card.aiimn-mcx-card { padding: 14px; border-radius: 14px; }
  .aiimn-mcx-card__heading.aiimn-mcx-card__heading { font-size: 1.0625rem; }
  .aiimn-mcx-card__intro.aiimn-mcx-card__intro { display: none; }
  /* The closing card's intro is the <time> element, not a marketing line. */
  .aiimn-mcx-close.aiimn-mcx-close .aiimn-mcx-card__intro { display: block; font-size: 0.8125rem; margin-bottom: 10px; }
  .aiimn-mcx-field.aiimn-mcx-field { margin-bottom: 8px; }
  .aiimn-mcx-field.aiimn-mcx-field label { font-size: 0.78125rem; margin-bottom: 3px; }
  .aiimn-mcx-field.aiimn-mcx-field input { height: 2.75rem; }
  .aiimn-mcx-btn.aiimn-mcx-btn { min-height: 3.125rem; font-size: 0.9375rem; }
  /* Never below 14px: this is consent copy. */
  .aiimn-mcx-disclosure.aiimn-mcx-disclosure { font-size: 0.875rem; margin-top: 10px; }

  .aiimn-mcx-section.aiimn-mcx-section { padding: 34px 0; }
  .aiimn-mcx-h2.aiimn-mcx-h2 { font-size: 1.4375rem; }
  .aiimn-mcx-lead.aiimn-mcx-lead { font-size: 0.96875rem; margin-bottom: 18px; }
  .aiimn-mcx-takeaways.aiimn-mcx-takeaways { columns: 1; }
  .aiimn-mcx-takeaways.aiimn-mcx-takeaways li { margin-bottom: 16px; }
  /* minmax(0, 1fr) rather than 1fr throughout: identical at a default root,
     where no track is anywhere near its min-content, but it drops the
     automatic min-content floor that turned a long word into horizontal
     document overflow once the browser font size grew. */
  .aiimn-mcx-fit.aiimn-mcx-fit { grid-template-columns: minmax(0, 1fr); }
  .aiimn-mcx-stats.aiimn-mcx-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .aiimn-mcx-stat.aiimn-mcx-stat b { font-size: clamp(1.5rem, 9vw, 2.375rem); }
  .aiimn-mcx-host.aiimn-mcx-host { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .aiimn-mcx-host__picture.aiimn-mcx-host__picture { max-width: 240px; }
  .aiimn-mcx-close.aiimn-mcx-close { display: block; }
  .aiimn-mcx-close.aiimn-mcx-close .aiimn-mcx-card { max-width: none; margin-top: 20px; }
}

/* ------------------------------------------------------------------ */
/* 360-wide fold budget                                                */
/* Every value below exists so the hero submit button and the complete  */
/* consent disclosure, Privacy Policy link included, stay above the     */
/* fold at 360x800 while the disclosure holds at 14px.                  */
/* ------------------------------------------------------------------ */
@media (max-width: 380px) {
  /*
   * The 360-wide fold budget. Everything below is measured, not guessed: the
   * criterion is that the hero submit button AND the complete consent
   * disclosure including its Privacy Policy link stay above an 800px fold in
   * the upcoming, starting_soon and live states, while the disclosure itself
   * never drops below 14px. starting_soon is the binding case, because its
   * countdown strip carries a two-line note the upcoming state does not.
   */
  .aiimn-mcx-strip__note.aiimn-mcx-strip__note { font-size: 0.6875rem; line-height: 1.25; }

  .aiimn-mcx-hero.aiimn-mcx-hero { padding: 6px 0 26px; }
  .aiimn-mcx-hero__eyebrow.aiimn-mcx-hero__eyebrow { margin-bottom: 3px; }
  .aiimn-mcx-hero__title.aiimn-mcx-hero__title { font-size: 1.3125rem; margin-bottom: 5px; }
  /* 12px keeps the composed time line on one row at a 328px measure. */
  .aiimn-mcx-hero__when.aiimn-mcx-hero__when { font-size: 0.75rem; margin-bottom: 4px; }
  .aiimn-mcx-byline.aiimn-mcx-byline { margin-bottom: 4px; padding: 3px 11px 3px 3px; }
  .aiimn-mcx-byline__avatar.aiimn-mcx-byline__avatar { width: 24px; height: 24px; }
  .aiimn-mcx-hero__prooflead.aiimn-mcx-hero__prooflead { font-size: 0.71875rem; margin-bottom: 4px; }
  .aiimn-mcx-chips.aiimn-mcx-chips { margin-bottom: 6px; }
  .aiimn-mcx-chip.aiimn-mcx-chip { padding: 5px; }
  .aiimn-mcx-chip.aiimn-mcx-chip b { font-size: 1.0625rem; }
  /* 11px is the floor for every secondary label on this route. The chip
     sublabel and the logistics chips previously sat at 9-10px here. */
  .aiimn-mcx-chip.aiimn-mcx-chip span { font-size: 0.6875rem; line-height: 1.2; margin-top: 2px; }
  .aiimn-mcx-card.aiimn-mcx-card { padding: 10px; }
  .aiimn-mcx-card__heading.aiimn-mcx-card__heading { margin-bottom: 3px; }
  .aiimn-mcx-field.aiimn-mcx-field { margin-bottom: 5px; }
  .aiimn-mcx-field.aiimn-mcx-field label { margin-bottom: 2px; }
  /* Font size holds at 14px in every state. Only the leading tightens: this is
     consent copy and it does not shrink to make room for anything. */
  .aiimn-mcx-disclosure.aiimn-mcx-disclosure { margin-top: 7px; line-height: 1.4; }
}