/* =============================================================================
   ENNA landing page — .enna-* block
   Landing-page styles for the project-specific site theme. The palette and
   component treatments are adapted from a supplied visual reference and do
   not claim compliance with any external design system.

   Reminder: Material for MkDocs sets html { font-size: 125% }, so 1rem = 20px.
   All sizes below are written in that scale; the px equivalent is in a comment
   wherever it is not obvious.

   Careful: inside a media query, rem resolves against the INITIAL font size
   (16px), NOT the 125% root. So 1rem = 20px in a property and 16px in a query.
   Every breakpoint below carries its px value in a comment for that reason.
   ============================================================================= */

.enna-home {
  --site-bg-page: #0b1118;
  --site-bg-surface: #131a23;
  --site-bg-secondary: #1b232d;
  --site-border-default: #222c37;
  --site-text-default: #ecf0f5;
  --site-text-heading: #d3d8df;
  --site-text-medium: #bbc1c9;
  --site-text-weak: #a6adb6;
  --site-text-faint: #7f8a97;
  --site-control-secondary: #1b232d;
  --site-interact: #649ef5;
  --site-interact-hover: #7cadf7;
  --site-interact-weak: #223249;
  --site-focus: #7cadf7;
  --site-accent: #1f92b7;

  position: relative;
  isolation: isolate;
  /* Material renders this page inside `.md-main__inner`, which is a flex
     container. Grow deliberately so wide viewports cannot expose the light
     `.md-main` background beside the landing surface. */
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  /* Columns share a top edge; the PAIR is centred in the viewport by
     align-content. With `align-items: center` each column centred itself
     independently, so the shorter hero sat ~47px lower than the domains list
     and the page read as two misaligned slabs. */
  align-items: start;
  align-content: center;
  min-height: 100svh;
  padding: clamp(2rem, 5vh, 3.5rem) clamp(1.25rem, 5vw, 4rem);
  color: var(--site-text-default);
  /* --px/--py are the pointer position inside this section, published by
     enna-home.js. The fallbacks are where the glow sits when that file is not
     loaded, or on touch, or under reduced motion. */
  --px: 78%;
  --py: 14%;
  /* A dot grid at 3% white over the base gradient. At this density it reads
     as paper texture rather than as a visible grid. */
  background:
    radial-gradient(560px circle at var(--px) var(--py), rgb(0 188 235 / 13%) 0%, rgb(0 188 235 / 4%) 38%, transparent 62%),
    radial-gradient(circle at center, rgb(255 255 255 / 3%) 0.9px, transparent 1.4px) 0 0 / 38px 38px,
    linear-gradient(180deg, rgb(11 17 24) 0%, rgb(4 7 11) 100%);
  /* Trims the drifting glows below at the section edge. `clip`, not `hidden`:
     it does not create a scroll container, so it cannot swallow content the
     way the old `min-height: 100vh` + `overflow: hidden` pairing did. The box
     grows with its content (min-height, not height), so there is nothing to
     clip but the glows. */
  overflow: clip;
}

/* --- Ambient gradient ------------------------------------------------------
   Adapted from the supplied reference's dark masthead palette: a #0b1118 to
   #04070b base with two soft elliptical washes offset along their long axes.

   The reference's second wash ended in magenta, which pulled the lower half
   of the page purple. This local interpretation ends both washes on the same
   deep navy so the composition stays cool and blue:
     rgb(48,170,204) → rgb(12,26,86)    teal → deep navy
     rgb(44,147,225) → rgb(12,26,86)    blue → deep navy

   The geometry is deliberately adapted for a full-page surface. Each wash is
   oversized and ends transparently so its ellipse edge never reads as a hard
   arc across the page.

   Only transform and opacity animate (compositor-only, no repaint). */
.enna-home::before,
.enna-home::after {
  content: "";
  position: absolute;
  /* Oversized so the drift has somewhere to go: translating and rotating an
     inset:0 layer would swing its own edges into frame. */
  inset: -22%;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}

.enna-home::before {
  background: radial-gradient(94% 62% at 76% 8%, rgb(48 170 204) 0%, rgb(12 26 86) 50%, transparent 76%);
  animation: enna-glow-a 24s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.enna-home::after {
  background: radial-gradient(86% 58% at 18% 92%, rgb(44 147 225) 0%, rgb(12 26 86) 46%, transparent 72%);
  animation: enna-glow-b 31s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes enna-glow-a {
  0%,
  100% {
    opacity: 0.38;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  38% {
    opacity: 0.66;
    transform: translate3d(7%, -5%, 0) scale(1.2) rotate(7deg);
  }
  71% {
    opacity: 0.46;
    transform: translate3d(-5%, 4%, 0) scale(1.06) rotate(-4deg);
  }
}

@keyframes enna-glow-b {
  0%,
  100% {
    opacity: 0.44;
    transform: translate3d(0, 0, 0) scale(1.06) rotate(0deg);
  }
  44% {
    opacity: 0.2;
    transform: translate3d(-8%, 5%, 0) scale(1) rotate(-6deg);
  }
  76% {
    opacity: 0.52;
    transform: translate3d(5%, -4%, 0) scale(1.24) rotate(5deg);
  }
}

[data-md-color-scheme="slate"] .enna-home {
  background:
    radial-gradient(560px circle at var(--px) var(--py), rgb(0 188 235 / 13%) 0%, rgb(0 188 235 / 4%) 38%, transparent 62%),
    radial-gradient(circle at center, rgb(255 255 255 / 3%) 0.9px, transparent 1.4px) 0 0 / 38px 38px,
    linear-gradient(180deg, rgb(11 17 24) 0%, rgb(4 7 11) 100%);
}

.md-main__inner:has(> .enna-home) {
  max-width: none;
  margin-top: 0;
}

/* No underlines anywhere on this page, including on the linked cards. */
.enna-home a {
  text-decoration: none;
}

/* --- Columns ---------------------------------------------------------------
   Equal max-widths meeting at the centre gutter, so the pair reads as one
   optically centred block rather than two unrelated slabs. */
.enna-hero,
.enna-domains {
  width: 100%;
  max-width: 33rem; /* 660px */
}

.enna-hero {
  justify-self: end;
}

.enna-domains {
  justify-self: start;
}

.enna-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "brand"
    "content";
  gap: 0;
}

/* --- Entrance -------------------------------------------------------------
   Everything arrives on one 420ms curve, staggered ~60ms apart in reading
   order: wordmark, headline, summary, buttons, meta — then the domains column
   picks up mid-way through so the two halves overlap rather than queue.

   Fill mode is `backwards`, not `both`, on purpose. `both` retains the final
   keyframe forever, and a retained animation transform beats declarative CSS —
   which would silently kill the hover lift on the cards. `backwards` holds the
   from-state during the delay and hands control back when it finishes. */
.enna-brand,
.enna-hero h1,
.enna-hero__summary,
.enna-actions,
.enna-exam-meta,
.enna-section-heading,
.enna-domain {
  animation: enna-enter 560ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.enna-hero h1 { animation-delay: 90ms; }
.enna-hero__summary { animation-delay: 190ms; }
.enna-actions { animation-delay: 290ms; }
.enna-exam-meta { animation-delay: 380ms; }
.enna-section-heading { animation-delay: 230ms; }
.enna-domain:nth-child(1) { animation-delay: 350ms; }
.enna-domain:nth-child(2) { animation-delay: 440ms; }
.enna-domain:nth-child(3) { animation-delay: 530ms; }
.enna-domain:nth-child(4) { animation-delay: 620ms; }

.enna-hero__content {
  grid-area: content;
  min-width: 0;
}

/* --- Brand ---------------------------------------------------------------- */
.enna-brand {
  display: block;
  grid-area: brand;
  width: 8.5rem; /* 170px */
  margin-bottom: 1.5rem;
  line-height: 0;
}

.enna-brand img {
  display: block;
  width: 100%;
  height: auto;
}

/* The lockup was rendering muted grey, not white: cisco-thousandeyes-dark.svg
   fills its paths with #a6adb6, the same value as --site-text-weak, so the
   wordmark was effectively styled as de-emphasised body text.

   CSS cannot reach fills inside an <img>-embedded SVG, so this forces the
   whole mark to pure white instead. No new asset and no markup change: the
   existing <img> keeps working, in both colour schemes. */
.enna-home .enna-brand__light {
  display: none !important;
}

.enna-home .enna-brand__dark {
  display: block !important;
  filter: brightness(0) invert(1);
}

/* --- Headline -------------------------------------------------------------
   ONE fluid size, no per-breakpoint overrides. The old file set this in five
   places, and the max-width:64rem rule *increased* the size as the viewport
   got smaller, which is what pushed a line past the column edge. */
.enna-hero h1 {
  max-width: none;
  margin: 0;
  color: #eef1f6;
  font-size: clamp(1.4rem, 3.6vw, 2.8rem); /* 28px -> 56px */
  font-weight: 680;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

/* Author-controlled line breaks, but allowed to reflow rather than overflow. */
.enna-title-line {
  display: block;
  text-wrap: balance;
}

.enna-no-break {
  white-space: nowrap;
}

.enna-hero__summary {
  max-width: 44ch;
  margin: 0.9rem 0 0;
  color: var(--site-text-medium);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem); /* 16px -> 19px */
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- Actions -------------------------------------------------------------- */
.enna-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.4rem;
}

.enna-button {
  position: relative;
  --mx: 50%;
  --my: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    background-image 190ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.enna-button--primary,
[data-md-color-scheme="slate"] .enna-button--primary {
  color: #0b1118;
  /* background-COLOR, not the shorthand: the shorthand would reset the sheen
     layer set further down, and the slate selector would win doing it. */
  background-color: var(--site-interact);
}

.enna-button--primary:hover,
[data-md-color-scheme="slate"] .enna-button--primary:hover {
  color: #0b1118;
  background-color: var(--site-interact-hover);
}

/* State ladder adapted from the supplied reference's large primary control.
   Three restrained layers establish rest, hover, and active states:

     rest    radial-gradient(42.828px 21.572px at 50% 0%, #fff@10% → #fff@2.5%)
     hover   + linear-gradient(32.576deg, cyan@45% -22.76% → transparent)
     active  + linear-gradient(27.687deg, cyan@45% -30.02% → magenta stop → transparent)

   The ellipse radii are 38% × 45% of that tile at rest and 48% × 57% active,
   so they are written as percentages here and hold at any button size. The
   cyan stop sits at a negative position — its core is off-canvas past the
   bottom-left corner, so what lands inside the button is the edge light only,
   which is the whole point of the treatment. */
.enna-button--secondary {
  color: var(--site-text-heading);
  border-color: #35404d;
  background:
    radial-gradient(38% 45% at 50% 0%, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 2.5%) 100%);
}

.enna-button--secondary:hover {
  color: var(--site-interact-hover);
  border-color: transparent;
  background-image:
    linear-gradient(32.576deg, rgb(2 200 255 / 45%) -22.76%, rgb(128 0 64 / 0%) 17.88%, rgb(0 0 0 / 0%) 99.15%),
    radial-gradient(48% 57% at 50% 0%, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 2.5%) 100%);
}

/* --- Gradient border ------------------------------------------------------
   Shown on hover as well as on press — on :active alone nobody ever sees it.

   The ring uses a blue-toned ramp sampled from the supplied reference:
   rgb(59,118,234) → rgb(0,188,235) → rgb(99,255,247). It runs along a shallow
   angle so the stops remain visible across a compact 44px-tall control.

   It has to be a masked ring, not a border-box background layer: the fill
   gradient over it is almost entirely 0-alpha, so a border-box layer shows
   through the whole button instead of just the edge. border-image would keep
   the interior clear but squares off the corners.

   The ring is cut with a transparent BORDER, not with padding. Padding does not
   reduce a corner radius — border-width does. With `padding: 2px` the inner
   rounded rect kept the full 8px radius and was merely offset inward, so at 45°
   the two curves nearly met and the corners came out as slivers: the jagged
   look. With `border: 2px solid transparent` the inner radius resolves to
   8 - 2 = 6px and the ring stays an even 2px all the way round. */
.enna-button--secondary::before,
.enna-domain::after {
  content: "";
  position: absolute;
  border: 2px solid transparent;
  /* Static angle is the no-JS state. On hover the same three colours are
     re-anchored to the pointer, so the bright end of the ramp sits on the edge
     nearest the cursor. */
  background: linear-gradient(27.687deg, rgb(59 118 234) 8.96%, rgb(0 188 235) 67.97%, rgb(99 255 247) 123.42%) border-box;
  opacity: 0;
  transition: opacity 190ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) padding-box exclude,
    linear-gradient(#000 0 0);
}

/* -2px, not 0: `inset` on an absolutely positioned pseudo-element resolves
   against the containing block's PADDING box, so inset:0 would draw the ring
   inboard of the real edge and the button's outline would jump on hover. The
   negative offset is the authored border width. */
.enna-button--secondary::before {
  inset: -2px;
  border-radius: 8px;
}

.enna-button--secondary:hover::before,
.enna-button--secondary:active::before,
.enna-button--secondary:focus-visible::before {
  opacity: 1;
  background: radial-gradient(150px circle at var(--mx) var(--my), rgb(99 255 247) 0%, rgb(0 188 235) 22%, rgb(59 118 234) 48%, rgb(37 52 74) 82%) border-box;
}

/* Same ring on the cards. 2px like the button's, not the card's own 1px — side
   by side, two different ring weights read as a mistake. It grows inward from
   the card's outer edge, so the edge itself does not move on hover. */
.enna-domain::after {
  inset: -1px;
  border-radius: 0.7rem;
}

.enna-domain:hover::after,
.enna-domain:focus-visible::after {
  opacity: 1;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgb(99 255 247) 0%, rgb(0 188 235) 20%, rgb(59 118 234) 44%, rgb(34 50 73) 78%) border-box;
}

.enna-button--secondary:active {
  color: #eef1f6;
  border-color: transparent;
  background-image:
    linear-gradient(27.687deg, rgb(2 200 255 / 45%) -30.02%, rgb(128 0 64 / 0%) 8.16%, rgb(191 0 95 / 0%) 15.8%, rgb(0 0 0 / 0%) 84.53%),
    radial-gradient(48% 57% at 50% 0%, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 2.5%) 100%);
}

/* The primary keeps its solid interaction blue and picks up only a quiet top
   sheen plus a cyan edge light on press. */
.enna-button--primary,
[data-md-color-scheme="slate"] .enna-button--primary {
  background-image:
    radial-gradient(38% 45% at 50% 0%, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 3%) 100%);
}

.enna-button--primary:active,
[data-md-color-scheme="slate"] .enna-button--primary:active {
  background-image:
    linear-gradient(27.687deg, rgb(2 200 255 / 45%) -30.02%, rgb(128 0 64 / 0%) 8.16%, rgb(0 0 0 / 0%) 84.53%),
    radial-gradient(48% 57% at 50% 0%, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 3%) 100%);
}

.enna-button:hover {
  transform: translateY(-1px);
}

/* Press settles back to the baseline rather than staying lifted. */
.enna-button:active {
  transform: translateY(0);
}

.enna-button:focus-visible,
.enna-domain:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 3px;
}

/* --- Exam meta ------------------------------------------------------------ */
.enna-exam-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  align-items: center;
  margin: 1.2rem 0 0;
  color: var(--site-text-faint);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.65rem; /* 13px */
  line-height: 1.35;
}

.enna-exam-meta strong {
  color: var(--site-text-heading);
  font-weight: 700;
}

.enna-exam-meta span {
  white-space: nowrap;
}

/* Icons on the factual labels. Keyed by data-icon rather than nth-child so the
   row can be reordered or extended without the icons sliding onto the wrong
   item, and masked rather than inlined so each one takes currentColor and
   needs no icon font, no CDN, and no extra request. Drawn on a 24px grid at
   2px stroke, matching the weight of the type at this size.

   No icon on the exam code: it is already the one bold item in the row, and a
   second signal on it would be noise. */
.enna-exam-meta span[data-icon] {
  display: inline-flex;
  gap: 0.32rem;
  align-items: center;
}

.enna-exam-meta span[data-icon]::before {
  content: "";
  flex-shrink: 0;
  width: 0.72rem; /* 14.4px */
  height: 0.72rem;
  background-color: currentColor;
  opacity: 0.9;
  -webkit-mask: var(--enna-icon) center / contain no-repeat;
  mask: var(--enna-icon) center / contain no-repeat;
}

.enna-exam-meta span[data-icon="guide"] {
  --enna-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.6A1.6 1.6 0 0 1 6.6 4H19v13.2H6.6A1.6 1.6 0 0 0 5 18.8Z'/%3E%3Cpath d='M5 18.8A1.6 1.6 0 0 0 6.6 20.4H19'/%3E%3C/svg%3E");
}

.enna-exam-meta span[data-icon="time"] {
  --enna-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.2v5l3.3 2'/%3E%3C/svg%3E");
}

.enna-exam-meta span[data-icon="questions"] {
  --enna-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 6.8h10M10.5 12h10M10.5 17.2h10'/%3E%3Cpath d='M3.6 6.9l1.7 1.7 3-3.1M3.6 16.4l1.7 1.7 3-3.1'/%3E%3C/svg%3E");
}

/* --- Domains column -------------------------------------------------------
   Deliberately NOT a grid. As a nested grid it stretched to its parent row,
   and `align-content: normal` on a grid container resolves to `stretch`, which
   distributes that extra height into the auto-sized card rows — cards ended up
   ~246px tall around ~165px of content, leaving a dead void with the arrow
   stranded at the bottom. Vertical centring in the split layout comes from
   `align-items: center` on .enna-home, which needs this box content-sized. */
.enna-domains {
  display: block;
}

.enna-section-heading {
  margin-bottom: 1.15rem;
}

.enna-section-heading h2 {
  margin: 0;
  color: var(--site-text-heading);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem); /* 18px -> 21px */
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap; /* "Exam domains" never splits across two lines */
}

.enna-section-heading > p {
  max-width: 46ch;
  margin: 0.5rem 0 0;
  color: var(--site-text-weak);
  font-size: 0.68rem; /* 13.6px */
  line-height: 1.55;
  text-wrap: balance;
}

.enna-section-heading a {
  color: var(--site-interact);
  font-weight: 650;
}

.enna-section-heading a:hover {
  color: var(--site-interact-hover);
}

/* Exactly two columns, or exactly one. Four cards over two rows means a single
   card can never be left alone on a row at any width. */
.enna-domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start; /* rows follow content; never absorb leftover height */
  gap: 0.7rem;
}

.enna-domain {
  position: relative;
  /* Pointer position inside this card, published by enna-home.js. The
     fallback is a top-centre sheen, so with no
     JS the hover state is simply the static version. */
  --mx: 50%;
  --my: 0%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  align-content: start;
  /* Height follows content. Cards in a row still equalise via the default
     stretch. Nothing is reserved at the bottom now that the arrow is gone —
     the padding is even on all four sides. */
  padding: 1.1rem 1.15rem;
  color: var(--site-text-default);
  /* Same fill ladder as the buttons: a top sheen at rest and a cyan edge light
     on hover. Written as background-IMAGE over
     a background-COLOR so neither can reset the other. */
  background-color: rgb(255 255 255 / 1.5%);
  background-image:
    radial-gradient(38% 45% at 50% 0%, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 2.5%) 100%);
  border: 1px solid var(--site-border-default);
  border-radius: 0.7rem;
  transition:
    background-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-md-color-scheme="slate"] .enna-domain {
  background-color: rgb(255 255 255 / 1.5%);
}

.enna-domain:hover,
.enna-domain:focus-visible {
  color: var(--site-text-default);
  border-color: transparent;
  background-color: rgb(100 158 245 / 6%);
  background-image:
    radial-gradient(220px circle at var(--mx) var(--my), rgb(0 188 235 / 16%) 0%, rgb(0 188 235 / 5%) 40%, transparent 66%),
    linear-gradient(32.576deg, rgb(2 200 255 / 45%) -22.76%, rgb(128 0 64 / 0%) 17.88%, rgb(0 0 0 / 0%) 99.15%),
    radial-gradient(48% 57% at 50% 0%, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 2.5%) 100%);
  transform: translateY(-2px);
}

.enna-domain__number {
  grid-column: 1 / -1;
  color: var(--site-text-faint);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.9rem; /* 18px */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The number carries the hover, so the card does not need a second signal. */
.enna-domain:hover .enna-domain__number,
.enna-domain:focus-visible .enna-domain__number {
  color: var(--site-interact);
}

.enna-domain__body {
  display: grid;
  gap: 0.3rem;
}

.enna-domain__body strong {
  color: #e4e8ee;
  font-size: 0.78rem; /* 15.6px */
  font-weight: 650;
  line-height: 1.3;
  text-wrap: balance;
}

.enna-domain__body > span {
  color: var(--site-text-weak);
  font-size: 0.65rem; /* 13px — floor for body copy on this page */
  line-height: 1.5;
  text-wrap: pretty;
}

.enna-domain__summary-short {
  display: none;
}

/* The arrow is out. A → glyph in a corner is decoration, not information: the
   whole card is the link, and the gradient ring on hover already says so. This
   also frees the bottom padding the arrow was reserving. Restoring it means
   deleting this one rule — the markup still carries the <span>. */
.enna-domain__arrow {
  display: none;
}

@keyframes enna-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .enna-home::before,
  .enna-home::after,
  .enna-brand,
  .enna-hero h1,
  .enna-hero__summary,
  .enna-actions,
  .enna-exam-meta,
  .enna-section-heading,
  .enna-domain {
    animation: none !important;
  }

  .enna-domain:hover,
  .enna-domain:focus-visible,
  .enna-button:hover {
    transform: none;
  }

  /* The ring still appears, it just stops responding to the pointer — and
     enna-home.js does not attach at all, so the fallback values hold. */
  .enna-button--secondary:hover::before,
  .enna-button--secondary:active::before,
  .enna-button--secondary:focus-visible::before,
  .enna-domain:hover::after,
  .enna-domain:focus-visible::after {
    animation: none !important;
  }
}
/* --- Stacked layout -------------------------------------------------------
   Below 928px the split gets too narrow to be worth keeping. One column,
   centred, hero above domains. */
@media screen and (max-width: 58rem) { /* 928px */
  .enna-home {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vh, 2.75rem);
    align-content: start;
    padding-top: clamp(2.25rem, 7vh, 4rem);
  }

  .enna-hero,
  .enna-domains {
    justify-self: center;
    max-width: 40rem; /* 800px */
  }

  /* Stacked: the two washes pull apart vertically instead of L/R. */
  .enna-home::before {
    background: radial-gradient(104% 50% at 70% 6%, rgb(48 170 204) 0%, rgb(12 26 86) 50%, transparent 76%);
  }

  .enna-home::after {
    background: radial-gradient(100% 48% at 26% 94%, rgb(44 147 225) 0%, rgb(12 26 86) 46%, transparent 72%);
  }

  .enna-hero h1 {
    font-size: clamp(1.4rem, 5.6vw, 2.6rem);
  }
}

/* Below 600px the two-up grid would make each card narrower than its own
   content. One card per row — still never a lone card on a second row. */
@media screen and (max-width: 37.5rem) { /* 600px */
  .enna-domain-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .enna-domain {
    min-height: 0;
    padding: 1rem 1.05rem;
  }

  .enna-brand {
    width: 7.75rem; /* 155px */
    margin-bottom: 1.25rem;
  }

  .enna-exam-meta {
    gap: 0.3rem 0.9rem;
  }
}

/* Buttons go equal full-width BEFORE they can ever wrap, so they can never
   land as two mismatched pills. The pair needs 363px of inline space
   (128 + 12 + 223) and the page padding is 25px a side, so 413px of viewport
   is the true threshold — hence 432px, not the 384px this rule used to be,
   which sat just below the break and never caught it. 390-414px is the most
   common phone width in use. */
@media screen and (max-width: 27rem) { /* 432px */
  .enna-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .enna-button {
    width: 100%;
  }
}

/* Narrowest phones: swap in the short card summaries rather than shrinking
   body copy below 13px. */
@media screen and (max-width: 21rem) { /* 336px */
  .enna-domain__summary {
    display: none;
  }

  .enna-domain__summary-short {
    display: block;
  }
}

/* Below 360px the headline's own floor is wider than the column, so each
   authored line wraps and strands a word — measured: 3 lines at 360px, 4 at
   320px. 23px keeps both lines whole down to 320px, which is the narrowest
   viewport in real use, and stays far above the 13px body floor. */
@media screen and (max-width: 22.5rem) { /* 360px */
  .enna-hero h1 {
    font-size: 1.15rem; /* 23px */
  }
}