/* =========================================================================
   NEDA eCAMPUS — FRONT PAGE, 2026-09 (below the hero)
   Seven sections rendered by src/FrontPage.php. Palette and vocabulary from
   the design governance; reviewed by the styleguide and accessibility
   specialists on 2026-09-06 before this was written:

     - buttons are the standard Neda button (46px, lime, black, cherry hover);
       there is no white or black variant, so the Creator band carries two
       lime buttons and the Become band's button lives on its white card;
     - links are black bold with a trailing arrow, cherry on hover — blue at
       14–17px is 3.9:1 and fails, so blue is not used for text here;
     - the Creator band is solid Royal Purple (white 6.8:1), not a gradient;
       the Quest Lab band is black (white 21:1), not a navy the palette lacks;
     - every colour that carries text was measured: black on lime 11.3:1, on
       text-box 1 19.5:1, on text-box 4 18.5:1; white on cherry 5.0:1, on
       purple 6.8:1; black on blue 5.4:1 (the Skill Bites chip).
   ========================================================================= */

.neda-fp {
    --fp-lime:   #C4C40E;
    --fp-cyan:   #0EC4C5;
    --fp-cherry: #D7263D;
    --fp-gold:   #F2B705;
    --fp-blue:   #2F80ED;
    --fp-purple: #6A4C93;
    --fp-black:  #000000;
    --fp-white:  #FFFFFF;
    --fp-tint1:  #ECF9F8;
    --fp-tint3:  #F8F9EA;
    --fp-tint4:  #F1F3D6;
    --fp-radius: 10px;
    /* One declaration, not two: these were overridden further down the file
       and the sheet held two truths at once (styleguide, 2026-09-06). On a
       tinted band the shadow IS the card's edge -- white on text-box 3 is
       1.06:1 -- so it is doing work, not decoration. */
    --fp-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    --fp-shadow-up: 0 16px 36px rgba(0, 0, 0, 0.20);
    --fp-ease: 0.15s ease;
    --fp-measure: 1200px;

    position: relative;
    padding-block: clamp(40px, 5vw, 64px);
    padding-inline: calc(50vw - 50%);
    margin-inline: calc(50% - 50vw) !important;
    max-width: none !important;
    background: var(--fp-white);
    color: var(--fp-black);
    font-family: Candara, "Segoe UI", Calibri, Arial, sans-serif;
}

.neda-fp--tint    { background: var(--fp-tint1); }
.neda-fp--creator { background: var(--fp-purple); color: var(--fp-white); }
.neda-fp--quest   { background: var(--fp-black);  color: var(--fp-white); }
.neda-fp--become  { background: var(--fp-lime); }

.neda-fp__inner {
    max-width: var(--fp-measure);
    margin-inline: auto;
}

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

/* ---- the head: disc, eyebrow, title, lede, and "View all" ------------ */

.neda-fp__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 16px;
    margin-block-end: clamp(20px, 2.5vw, 28px);
}

.neda-fp__disc {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 999px;
    color: var(--fp-black);
    background: var(--fp-lime);
}

/* Solid brand fills only, with the ink that clears 3:1 on each. */
.neda-fp__disc--academy  { background: var(--fp-lime);   color: var(--fp-black); }
.neda-fp__disc--featured { background: var(--fp-cherry); color: var(--fp-white); }
.neda-fp__disc--creator  { background: var(--fp-lime);   color: var(--fp-black); }
.neda-fp__disc--studios  { background: var(--fp-cyan);   color: var(--fp-black); }
.neda-fp__disc--quest    { background: var(--fp-blue);   color: var(--fp-white); }
.neda-fp__disc--recent   { background: var(--fp-purple); color: var(--fp-white); }
.neda-fp__disc--become   { background: var(--fp-black);  color: var(--fp-lime); }

.neda-fp__eyebrow {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.72);
}

/* `.neda-fp` first: the theme sizes headings inside its layout groups with
   a two-class selector, which outranked a lone class and left these at
   24px (measured live, 2026-09-06). */
.neda-fp .neda-fp__title {
    margin: 0;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.5px;   /* halved (user, 2026-09-07) */
    color: inherit;
}

.neda-fp__lede {
    margin: 6px 0 0;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.72);
}

/* On a dark band the quiet lines are solid white: 72% white on purple is
   2.7:1 and fails (accessibility review). */
.neda-fp--creator .neda-fp__eyebrow,
.neda-fp--creator .neda-fp__lede,
.neda-fp--quest .neda-fp__eyebrow,
.neda-fp--quest .neda-fp__lede { color: var(--fp-white); }

/* The "View all …" link: black, bold, arrow; cherry on hover. Each one on
   the page has distinct text, so four of them are four different names. */
.neda-fp a.neda-fp__more {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fp-black);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--fp-ease);
}
.neda-fp a.neda-fp__more:hover,
.neda-fp a.neda-fp__more:focus-visible { color: var(--fp-cherry); }

.neda-fp__arrow { flex: none; }

/* ---- cards --------------------------------------------------------- */

.neda-fp__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
    /* Every row the same height, not each row sized to its own tallest card
       (owner, 2026-09-07: "in each of them, the size should be identical").
       A grid row is sized independently by default, so the six Recently
       added cards were coming out as a 125px row above a 147px row -- two
       heights in one section, from one template. */
    grid-auto-rows: 1fr;
}

/* Counts per row, as the owner set them on 2026-09-07: Academies four,
   Courses three, Studios five. Section 26.2 of the specification had said
   five for every learning space, which is what Academies were; four is the
   owner's decision and supersedes it for this section.

   The 3:2 image is unchanged and is NOT the lever here. The size difference
   between the rows comes from the column count against the shared measure,
   never from a different aspect ratio. */
.neda-fp__grid--academies { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.neda-fp__grid--studios   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.neda-fp__grid--courses   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.neda-fp__grid--recent    { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.neda-fp-card,
.neda-fp-course,
.neda-fp-mini {
    position: relative;
    background: var(--fp-white);
    border: 0;
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow);
    transition: background var(--fp-ease), transform var(--fp-ease), box-shadow var(--fp-ease);
}
/* Only the cards that ARE a link answer to hover. A featured course card
   is not clickable -- its button is -- so it stays still, or it would
   promise a click that does nothing (owner, 2026-09-06). */
/*
 * Hover is carried by ELEVATION here, not by a fill. The card's tint-on-hover
 * is text-box 3, which is now also the band under two of these rows: hovered
 * card against band measured 1.00:1, so the card dissolved into the section
 * instead of lifting out of it (styleguide, 2026-09-06). Every pale tint in
 * the palette is within 1.1:1 of every other, so no fill can carry this on a
 * tinted ground -- the shadow doubles, the card lifts, and its own count line
 * goes cherry, which are three signals that can actually be seen.
 */
.neda-fp-card:hover, .neda-fp-card:focus-within,
.neda-fp-mini:hover, .neda-fp-mini:focus-within {
    transform: scale(1.01);
    box-shadow: var(--fp-shadow-up);
}

/* A card whose one link is the whole card: the link IS the card's box. */
.neda-fp a.neda-fp-card__link,
.neda-fp a.neda-fp-mini__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    block-size: 100%;
    color: var(--fp-black);
    text-decoration: none;
    border-radius: var(--fp-radius);
}
.neda-fp a.neda-fp-card__link:focus-visible,
.neda-fp a.neda-fp-mini__link:focus-visible {
    outline: 3px solid var(--fp-cherry);
    outline-offset: 2px;
}

.neda-fp-card__figure {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--fp-radius) var(--fp-radius) 0 0;
    background: var(--fp-tint4);
    overflow: hidden;
}
/* Pinned for the same reason as `.neda-fp-card__cover` below: a percentage
   height against an aspect-ratio box resolves to auto, and the picture then
   takes its own ratio instead of the card's. */
.neda-fp-card__figure img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.neda-fp__initial { font-size: 32px; font-weight: 700; color: var(--fp-black); }

.neda-fp-card__body { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.neda-fp-card__title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.neda-fp-card__text  { font-size: 15px; line-height: 1.45; color: rgba(0, 0, 0, 0.72); }
.neda-fp-card__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 4px;
    font-size: 15px;
    font-weight: 700;
}
.neda-fp-card:hover .neda-fp-card__count,
.neda-fp-card:focus-within .neda-fp-card__count { color: var(--fp-cherry); }

/* ---- course cards (featured) --------------------------------------- */

.neda-fp-course { display: flex; flex-direction: column; overflow: hidden; }

/* THE WHITE AREA UNDER ONE CARD WAS SHORTER THAN UNDER ITS NEIGHBOUR.
   Measured 2026-09-07: three cards of equal width, media heights 272, 256,
   256. Cards are the same total height, so 16px taken by one image is 16px
   taken from its own body -- which is exactly what the owner saw.

   `aspect-ratio` alone does not hold a block box to its ratio: the picture
   inside is laid out first, and a block that is taller than the ratio makes
   the box grow rather than overflow. The academy cards never had this
   because `.neda-fp-card__figure` is a grid with `overflow: hidden`, so the
   picture is placed INSIDE a box the ratio has already sized. Same recipe
   here rather than a second invention. */
.neda-fp-course__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--fp-tint4);
}
/* Same pin. `overflow: hidden` was already hiding the symptom here -- the
   picture still took its own ratio and was simply clipped, so the crop
   varied per photograph even though the box did not. Pinning it means the
   ratio is the card's and the crop is deliberate. */
.neda-fp-course__media img { position: absolute; inset: 0; }
.neda-fp-course__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.neda-fp-course__media-empty { display: block; inline-size: 100%; block-size: 100%; background: var(--fp-tint4); }

/* The body fills the card so the action can be pushed to its foot. */
.neda-fp-course__body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    padding: 16px 18px 18px;
}

/* The chips sit in the DOM first (a reader hears "Editor's pick" first)
   and are moved over the photograph's bottom edge. */
.neda-fp-course__chips {
    position: absolute;
    inset-block-start: -18px;
    inset-inline-start: 18px;
    display: flex;
    gap: 6px;
    transform: translateY(-100%);
}

.neda-fp__chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    background: var(--fp-tint1);
    color: var(--fp-black);
}
.neda-fp__chip--type { background: var(--neda-chip, var(--fp-cyan)); color: var(--neda-chip-ink, var(--fp-black)); }
.neda-fp__chip--soon { background: var(--fp-lime); color: var(--fp-black); }

.neda-fp-course__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--fp-black); }

.neda-fp__org,
.neda-fp__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.72);
}
.neda-fp__meta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Every button in the same corner whatever the title's length: `auto`
   takes the slack above it, `flex-end` puts it on the inline end -- which
   mirrors to the left in RTL without a second rule (user, 2026-09-06). */
.neda-fp-course__action {
    margin-block-start: auto;
    padding-block-start: 6px;
    align-self: flex-end;
}

/* ---- the standard Neda button --------------------------------------- */

.neda-fp .neda-fp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;   /* the standard button (owner, 2026-09-07) */
    padding: 8px 20px;
    border: 0;
    border-radius: var(--fp-radius);
    background: var(--fp-lime);
    color: var(--fp-black);
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--fp-ease), color var(--fp-ease);
}
/* The button answers to the pointer on ITSELF. It used to light up when
   the pointer was anywhere on the card, which said the card was the
   target when only the button is. */
.neda-fp a.neda-fp__btn:hover,
.neda-fp a.neda-fp__btn:focus-visible {
    background: var(--fp-cherry);
    color: var(--fp-white);
    outline: none;
}
/* On the PURPLE band the cherry fill alone is 1.4:1 against the band, so a
   white ring outside the button carries focus there (SC 1.4.11) -- a
   documented exception, pending the owner's decision. On the black band
   cherry is 4.2:1 and the fill carries it: no ring (styleguide, 2026-09-06). */
.neda-fp--creator a.neda-fp__btn:focus-visible {
    outline: 3px solid var(--fp-white);
    outline-offset: 3px;
}

.neda-fp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }

/* ---- the carousel (studios) ----------------------------------------- */

.neda-fp__carousel { position: relative; }

.neda-fp__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 6px 18px;
    scrollbar-width: thin;
}
.neda-fp__track:focus-visible { outline: 3px solid var(--fp-cherry); outline-offset: 2px; }

.neda-fp__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
}
.neda-fp__list > li {
    flex: 0 0 min(280px, 78vw);
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
    .neda-fp__track { scroll-behavior: auto; }
    .neda-fp-card, .neda-fp-course, .neda-fp-mini, .neda-fp .neda-fp__btn, .neda-fp a.neda-fp__more { transition: none; }
    .neda-fp-card:hover, .neda-fp-mini:hover { transform: none; }
}

/* ---- the compact list (recently added) ------------------------------ */

.neda-fp-mini__media {
    flex: none;
    inline-size: 88px;
    block-size: 88px;
    border-radius: var(--fp-radius);
    overflow: hidden;
    background: var(--fp-tint4);
}
.neda-fp-mini__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.neda-fp-mini__body { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; flex: 1 1 auto; }
.neda-fp-mini__title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.neda-fp-mini__chevron { flex: none; color: rgba(0, 0, 0, 0.72); }
.neda-fp-mini:hover .neda-fp-mini__chevron { color: var(--fp-cherry); }

/* ---- the bands: creator, quest, become ------------------------------ */

.neda-fp__band {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}
.neda-fp__band--with-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.neda-fp__band-text .neda-fp__disc { margin-block-end: 14px; }
.neda-fp .neda-fp__band-text .neda-fp__title { font-size: clamp(28px, 3vw, 36px); }
.neda-fp__band-text .neda-fp__lede { font-size: 18px; max-inline-size: 48ch; }
.neda-fp__status { margin: 10px 0 0; }

.neda-fp__band-media img { inline-size: 100%; block-size: auto; display: block; }

/* Become: the benefits card is white on the lime, and holds the button. */
.neda-fp__band-media--become { display: grid; gap: 18px; }
/* One white panel: the photograph across its top, the promises and the
   action beneath. The picture is a cut-out on white with no transparency,
   so the panel IS its ground and the people stand in it -- on the lime it
   would have shown as a white rectangle. */
.neda-fp__benefits-card {
    background: var(--fp-white);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow);
    padding: 0 24px 22px;
    overflow: hidden;
}

.neda-fp__people {
    display: block;
    margin-inline: -24px;
    margin-block-end: 4px;
}
.neda-fp__people img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center top;
}
.neda-fp__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.neda-fp__benefits li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.neda-fp__benefits-note { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, 0.72); }
.neda-fp__benefits-card .neda-fp__actions { margin-block-start: 16px; }

/* ---- narrow: bands stack text-then-media, cards stack figure-then-text -- */

@media (max-width: 760px) {
    .neda-fp__head { grid-template-columns: auto 1fr; }
    .neda-fp a.neda-fp__more { grid-column: 2; justify-self: start; margin-block-start: 6px; }
    .neda-fp__band--with-media { grid-template-columns: 1fr; }
}

/* ---- forced colours: the discs and chips keep an edge ---------------- */

@media (forced-colors: active) {
    .neda-fp__disc, .neda-fp__chip, .neda-fp-card, .neda-fp-course, .neda-fp-mini, .neda-fp__benefits-card { border: 1px solid CanvasText; }
    .neda-fp .neda-fp__btn { border: 1px solid ButtonText; }
    /* A button's focus is a fill on ordinary displays; forced colours
       erase fills, so the system Highlight outline says it there. */
    .neda-fp a.neda-fp__btn:focus-visible,
    .neda-fp a.neda-fp-card__link:focus-visible,
    .neda-fp a.neda-fp-mini__link:focus-visible,
    .neda-fp a.neda-fp__more:focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
}

@media (max-width: 980px) {
    .neda-fp__grid--courses,
    .neda-fp__grid--recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .neda-fp__grid--courses,
    .neda-fp__grid--recent { grid-template-columns: 1fr; }
}

/* Visually hidden, read by AT: the link suffix and the carousel's own name. */
.neda-fp__vh {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* Arrows point the way the text runs. */
[dir="rtl"] .neda-fp__arrow,
[dir="rtl"] .neda-fp-mini__chevron svg { transform: scaleX(-1); }

/* ---- learning-space cards: the 3:2 image above, the words below -------
 * Specification §26.1/§26.2. The link is the card: a column, no padding of
 * its own, the figure flush to the top corners and the words in a padded
 * body beneath. Five across at desktop, fewer as the width falls, and the
 * ratio is never traded for a size.
 */
.neda-fp a.neda-fp-card__link {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
}
.neda-fp-card__body { padding: 14px 16px 16px; gap: 4px; }
.neda-fp-card__title { font-size: 16px; }
.neda-fp-card__text { font-size: 14px; }
.neda-fp-card__count { font-size: 14px; }

/* The ladder down. Studios start one column wider than Academies and meet
   them at 1100px, below which there is no room to tell four from five. */
@media (max-width: 1280px) {
    .neda-fp__grid--studios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .neda-fp__grid--academies,
    .neda-fp__grid--studios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .neda-fp__grid--academies,
    .neda-fp__grid--studios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .neda-fp__grid--academies,
    .neda-fp__grid--studios { grid-template-columns: 1fr; }
}

/* The featured card's action is a real link now, so it is a control, not a
   decoration: it takes focus and the cherry fill of every Neda button. */
.neda-fp a.neda-fp__btn:focus-visible { outline: none; }

/* ---- Quest Lab: the picture is the band's background -----------------
 * Owner, 2026-09-06: behind the block, and the block does not grow. So the
 * image is painted on the section, `cover`, anchored to the inline end --
 * the mountains and the path sit to the right of the words, as in the
 * artwork -- and the band's height stays whatever its text gives it.
 *
 * A veil is not optional here. The artwork is light in places and the text
 * is white; a gradient from the band's own black across the text column
 * keeps white at 21:1 where the words are and lets the picture come through
 * where they are not. It is painted with the image, in one layer, so there
 * is no extra element and nothing to get between the two.
 */
.neda-fp--quest.has-quest-image {
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.52) 60%, rgba(0, 0, 0, 0.34) 100%),
        var(--fp-quest-image);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* The words keep to the left of the band, where the veil is heaviest, so
   the picture is legible on the right and the text is legible on the left. */
.neda-fp--quest .neda-fp__band-text { max-inline-size: 46ch; }

/* Narrow: the words run the full width, so the veil covers the whole band
   rather than a column of it. The picture stays, quieter, behind them. */
@media (max-width: 760px) {
    .neda-fp--quest.has-quest-image {
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)),
            var(--fp-quest-image);
    }
}

@media (forced-colors: active) {
    .neda-fp--quest.has-quest-image { background-image: none; }
}

/* ---- the icon badge on a space card's cover -------------------------
 * A rounded square on the lower inline-start corner of the 3:2 cover, half
 * on the picture and half on the white beneath it, with a white ring so it
 * reads against any photograph. The figure must not clip it, so the rounded
 * corners move onto the image itself.
 */
.neda-fp-card__figure { overflow: visible; position: relative; }
/* PINNED, not sized in percentages. `block-size: 100%` here resolved to
   `auto`: a percentage height needs a containing block with a DEFINITE
   height, and a height that comes from `aspect-ratio` does not count as one
   for that purpose. So each cover fell back to its own natural ratio and
   spilled out of the 3:2 figure by however much its photograph differed --
   768x548 rendered 243px tall in a 227px box, 768x531 rendered 235px. The
   figure cannot clip the difference because it is `overflow: visible`, which
   it has to be so the icon badge is not cut off.

   Two cards, three matching numbers and one that did not: the figure, the
   body and the card all measured identical, and the PICTURE did not. That is
   the object the eye is actually on, and the reason the white beneath it
   looked different on each card (owner, 2026-09-07 -- correctly, after
   4.28.0 claimed this was fixed by measuring the box instead of the image).

   `position: absolute` with `inset: 0` gives the used height outright, with
   no percentage to resolve and nothing for `height: auto` to override. */
.neda-fp-card__cover {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--fp-radius) var(--fp-radius) 0 0;
}
.neda-fp-card__badge {
    position: absolute;
    inset-block-end: -22px;
    inset-inline-start: 14px;
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 14px;
    background: var(--fp-white);
    box-shadow: 0 0 0 4px var(--fp-white), var(--fp-shadow);
    overflow: hidden;
}
.neda-fp-card__badge img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* The name clears the badge that now overhangs the picture. */
.neda-fp-card__body { padding-block-start: 30px; }

/* The Become band composes as two columns from the TOP, not two things
   centred against each other: the heading meets the top of the photograph.
   Centred, a 158px block of text sat in the middle of 643px of panel with
   485px of lime around it. The picture is cropped to 16:9 from the top, so
   the three faces are kept and the panel does not tower over the words. */
.neda-fp--become .neda-fp__band { align-items: start; }
.neda-fp--become .neda-fp__people img { aspect-ratio: 16 / 9; }

/* ---- Become: the three on the lime, the box in the corner -----------
 * The people are a transparent cut-out standing directly on the band, and
 * the white box sits in front of them at the lower inline-start corner --
 * a compact card, not the full-height panel it was: the four promises in
 * two columns, the line, and the action. It overlaps the picture on purpose,
 * which is what gives the composition a foreground and a background.
 */
.neda-fp__band-media--become {
    position: relative;
    display: block;
    padding-block-end: 96px;   /* the room the card hangs into */
}

.neda-fp--become .neda-fp__people {
    display: block;
    margin: 0;
}
.neda-fp--become .neda-fp__people img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;        /* a cut-out is never cropped */
    object-position: center bottom;
}

.neda-fp--become .neda-fp__benefits-card {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: -40px;
    inline-size: min(360px, 86%);
    padding: 18px 20px;
    overflow: visible;
    box-shadow: var(--fp-shadow-up);
}

.neda-fp--become .neda-fp__benefits {
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}
.neda-fp--become .neda-fp__benefits li { font-size: 14px; gap: 8px; }
.neda-fp--become .neda-fp__benefits-note { margin-block-start: 12px; font-size: 14px; }
.neda-fp--become .neda-fp__benefits-card .neda-fp__actions { margin-block-start: 12px; }

/* Narrow: nothing hangs off anything. The picture, then the card. */
@media (max-width: 900px) {
    .neda-fp__band-media--become { padding-block-end: 0; }
    .neda-fp--become .neda-fp__benefits-card {
        position: static;
        inline-size: auto;
        margin-block-start: -24px;
    }
    .neda-fp--become .neda-fp__benefits { grid-template-columns: 1fr; }
}

/* =========================================================================
   THE CARDS STAND OUT                                       (user, 2026-09-06)

   A white card on a white band, with a 0 2px 8px shadow, is a white card on
   a white band. Two changes, both inside the vocabulary -- a card still
   carries no border, keeps its 10px corner, and still tints to text-box 3
   with a lift when it is one a pointer can use:

     1. Every row of cards now sits on GROUND. The front page already
        alternates its sections by background colour alone, so the card rows
        take the two pale tints in turn -- text-box 3 for the two
        learning-space rows, text-box 1 for the two course rows -- and the
        white of the cards is what reads as raised against them.
     2. The resting shadow steps up from 2px/8px to 6px/18px, and the hover
        shadow with it, so a card is lifted before it is touched rather than
        only after.

   Contrast is unchanged where it matters: black on text-box 3 is 18.5:1,
   on text-box 1 19.5:1, and the quiet 72% black 8.9:1 on either.
   ========================================================================= */

.neda-fp--lime-tint { background: var(--fp-tint3); }

/* The photograph on a course card meets the card's corner, so the top two
   are rounded with it rather than sitting square inside a rounded box. */
.neda-fp-course__media,
.neda-fp-course__media img {
    border-radius: var(--fp-radius) var(--fp-radius) 0 0;
}

/* ---- Quest Lab: the picture holds still while the words scroll over it --
 * `background-attachment: fixed` on the picture only -- the veil stays with
 * the band, so it always covers exactly the band, while the artwork is
 * anchored to the viewport and the content travels across it.
 *
 * Not below 760px: iOS Safari and several Android browsers either ignore
 * `fixed` or repaint it a frame behind the page, which reads as tearing
 * rather than depth. And not at all for a reader who has asked for less
 * motion -- a background that moves against the page is exactly that.
 */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    .neda-fp--quest.has-quest-image {
        background-attachment: scroll, fixed;
    }
}

/* ---- Become, recomposed ---------------------------------------------
 * The three were stranded at the far right with the box hanging off their
 * lower left. They sit closer to the words now, and the box stands BESIDE
 * them (owner, 2026-09-06): the media column is itself two columns, people
 * then box, and the band gives that column a little more room so the people
 * begin sooner.
 *
 * ON A PHONE the order is text, box, then people. The card carries the only
 * thing anyone can act on, so it goes above the picture; `order` is safe
 * here precisely because the picture is decorative and takes no focus, so
 * no reading or tab sequence is disturbed by moving it.
 */
.neda-fp--become .neda-fp__band--with-media {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.neda-fp__band-media--become {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding-block-end: 0;
}

.neda-fp--become .neda-fp__people { align-self: end; }
/* The box is reserved before the picture arrives: the asset is exactly
   16:9, so `contain` neither crops nor letterboxes, and nothing on the page
   jumps when a lazily-loaded image lands. */
.neda-fp--become .neda-fp__people img {
    aspect-ratio: 16 / 9;
    block-size: auto;
    object-fit: contain;
}

.neda-fp--become .neda-fp__benefits-card {
    position: static;
    inset: auto;
    inline-size: auto;
    margin-inline-start: -28px;   /* tucked against them, not over them */
    z-index: 1;
}

@media (max-width: 900px) {
    .neda-fp__band-media--become {
        grid-template-columns: 1fr;
        gap: 20px;
        justify-items: center;
    }
    .neda-fp--become .neda-fp__benefits-card {
        order: -1;                 /* text, box, then people */
        margin-inline-start: 0;
        inline-size: 100%;
        margin-block-start: 0;
    }
    .neda-fp--become .neda-fp__people { align-self: center; max-inline-size: 420px; }
    .neda-fp--become .neda-fp__benefits { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
    .neda-fp--become .neda-fp__benefits { grid-template-columns: 1fr; }
}

/* Last word on the Become band's stacking. The rule that gives it its own
   column split is more specific than the shared one in the 760px block, so
   it won at every width and the band never stacked on a phone -- the two
   columns simply squeezed to 211px each. Declared here, at the end, where
   nothing follows to overturn it. */
@media (max-width: 900px) {
    .neda-fp--become .neda-fp__band--with-media { grid-template-columns: 1fr; }
}

/* The picture's wrapper must be told a width on a phone. `justify-items:
   center` makes a grid item shrink to fit, and the image inside is sized at
   100% OF THAT -- which resolves to nothing, so the people vanished. */
@media (max-width: 900px) {
    .neda-fp--become .neda-fp__people {
        inline-size: 100%;
        max-inline-size: 420px;
        justify-self: center;
    }
}

/* ---- Become: the three stand the full height of the band -------------
 * They were sized by the column's WIDTH, so they came out small with lime
 * above and below them. They are sized by HEIGHT now and the band takes its
 * height from them: the wrapper's negative block margins cancel the band's
 * own padding, which is the same clamp the section uses, so the figures
 * reach the top and bottom edges of the yellow instead of floating inside
 * it. `contain` keeps them undistorted and the spare width either side is
 * transparent, so nothing is cropped.
 *
 * Desktop only. On a phone the picture sits under the box at its own size,
 * where a band-height figure would be a wall of person on a small screen.
 */
@media (min-width: 901px) {
    .neda-fp--become .neda-fp__people {
        align-self: end;
        display: block;
        margin-block: calc(-1 * clamp(40px, 5vw, 64px));
    }

    .neda-fp--become .neda-fp__people img {
        aspect-ratio: auto;
        inline-size: 100%;
        block-size: clamp(300px, 30vw, 460px);
        object-fit: contain;
        object-position: center bottom;
    }
}

/* ---- Become: the picture sets the band's height ----------------------
 * Stretching the image's BOX to the band did not make the figures bigger:
 * three people standing side by side is a wide picture, so inside a 339px
 * column it stays 191px tall however tall its box is, and `cover` would
 * crop the outer two away. The band's height comes from the picture now --
 * no vertical padding of its own, the words and the box centred against it
 * -- and the picture gets the larger share of the column, so the three are
 * as big as the measure allows and touch the top and bottom of the yellow.
 */
@media (min-width: 901px) {
    .neda-fp--become { padding-block: 0; }

    .neda-fp--become .neda-fp__band--with-media {
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
        align-items: center;
    }

    .neda-fp__band-media--become {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: center;
    }

    .neda-fp--become .neda-fp__people {
        align-self: stretch;
        display: flex;
        align-items: flex-end;
        margin-block: 0;
    }

    .neda-fp--become .neda-fp__people img {
        aspect-ratio: auto;
        inline-size: 100%;
        block-size: auto;
        object-fit: contain;
        object-position: center bottom;
    }

    /* The words and the box keep their own breathing room now that the
       band has none. */
    .neda-fp--become .neda-fp__band-text { padding-block: 28px; }
    .neda-fp--become .neda-fp__benefits-card { margin-block: 24px; }
}

/* ---- the page needs a gutter at every width -------------------------
 * `.neda-fp__inner` capped at the 1200px measure and centred, with no
 * horizontal padding of its own: above 1200 the caps give margins, and
 * BELOW it the content ran flush to both screen edges -- the whole page,
 * every band, on tablets and phones (owner, 2026-09-06).
 *
 * The cap is the measure plus two gutters, so at desktop the content is
 * still exactly 1200 wide; narrower than that, the gutter is what is left.
 */
.neda-fp__inner {
    max-inline-size: calc(var(--fp-measure) + 100px);
    padding-inline: clamp(20px, 4vw, 50px);
}

/* The asset's own ratio, stated: `auto` left the box at zero height until
   the picture loaded, so the band jumped and nothing could be measured.
   1100x619 is the file, so this reserves exactly what it will occupy. */
@media (min-width: 901px) {
    .neda-fp--become .neda-fp__people img { aspect-ratio: 1100 / 619; }
    .neda-fp--become .neda-fp__benefits-card { margin-block: 20px; }
}

/* ---- Become on a tablet ---------------------------------------------
 * Three things abreast do not fit between 901 and 1200: the box grows
 * taller as it narrows, so IT set the band's height and the three came out
 * 178px tall in a 270px band. The words take the full width there and the
 * picture and the box share the row beneath, which gives the picture half
 * again as much width, so the three fill the yellow as they do on a wide
 * screen.
 */
@media (min-width: 901px) and (max-width: 1200px) {
    .neda-fp--become .neda-fp__band--with-media {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .neda-fp--become .neda-fp__band-text { padding-block: 28px 0; }
    .neda-fp__band-media--become { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* =========================================================================
   THE CARDS LIFT OFF A WHITE PAGE                           (user, 2026-09-06)

   Reverting my own answer. Asked to make the cards stand out I tinted the
   bands under them, which added three colours to a page that already had
   five and changed the page rather than the cards. The bands are white
   again; the elevation does the work, as it was meant to.

   A single soft shadow reads as blur, not as height. What reads as an
   object off a page is TWO shadows: a tight, darker contact shadow right
   under the edge, and a wide, soft cast beneath it -- the same pair a real
   object throws. On hover both grow and the card lifts, and the canonical
   text-box 3 tint means something again now that the band behind it is
   white.
   ========================================================================= */

.neda-fp {
    --fp-shadow:
        0 1px 2px rgba(0, 0, 0, 0.07),
        0 8px 20px rgba(0, 0, 0, 0.10);
    --fp-shadow-up:
        0 2px 5px rgba(0, 0, 0, 0.10),
        0 20px 44px rgba(0, 0, 0, 0.18);
}

.neda-fp-card:hover, .neda-fp-card:focus-within,
.neda-fp-mini:hover, .neda-fp-mini:focus-within {
    background: var(--fp-tint3);
}

/* =========================================================================
   THE DESIGN REVIEW, APPLIED                                     2026-09-06
   The styleguide specialist looked at the optics rather than the tokens.
   ========================================================================= */

/* 1. The cards sat ON PAPER, not in fog. The contact layer was too faint to
      draw a bottom edge -- and with no border, nothing said where the card
      stopped -- while a 20px blur with no spread bled across the gutter and
      greyed it. Negative spread keeps each cast under its own card. */
.neda-fp {
    --fp-shadow:
        0 1px 2px rgba(0, 0, 0, 0.10),
        0 8px 18px -6px rgba(0, 0, 0, 0.14);
    --fp-shadow-up:
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 16px 32px -10px rgba(0, 0, 0, 0.18);
}

/* 2. TRANSLATE, not scale. The shadow was claiming three centimetres of
      lift while a 1% scale delivered one millimetre -- and at 300px that
      scale grows the card 1.5px a side, resampling the thumbnail and
      shimmering the text. Two signals on hover, not three: the tint goes,
      the lift and the shadow stay. */
.neda-fp-card,
.neda-fp-course,
.neda-fp-mini {
    transition: transform 0.2s cubic-bezier(.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(.2, 0, 0, 1);
}
.neda-fp-card:hover, .neda-fp-card:focus-within,
.neda-fp-mini:hover, .neda-fp-mini:focus-within {
    background: var(--fp-white);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .neda-fp-card:hover, .neda-fp-mini:hover { transform: none; }
}

/* 3. A non-interactive panel must not wear the interactive top of the
      scale: the benefits card had the hover token at rest. */
.neda-fp--become .neda-fp__benefits-card {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 18px 40px -14px rgba(0, 0, 0, 0.22);
}

/* 4. Room for the shadows to fall between cards. */
.neda-fp__grid { gap: 24px; }
.neda-fp__list { gap: 24px; }

/* 5. A colour band shows its own edges, so 64px inside one reads cramped,
      while two white rows meeting read as 128px of nothing. More air in the
      bands, unchanged on the white rows. */
.neda-fp--creator,
.neda-fp--quest,
.neda-fp--become { padding-block: clamp(64px, 7vw, 96px); }

@media (min-width: 901px) {
    .neda-fp--become { padding-block: 0; }   /* the picture still sets this one */
}

/* 6. The worst optical fault on the page: one card in a five-column grid,
      alone at the far left with a field of nothing beside it. With one or
      two spaces the row centres them at a card's natural width instead of
      pretending to be a row of five. */
.neda-fp__grid--academies:has(> li:only-child),
.neda-fp__grid--academies:has(> li:nth-child(2):last-child),
.neda-fp__grid--courses:has(> li:only-child),
.neda-fp__grid--courses:has(> li:nth-child(2):last-child),
.neda-fp__grid--recent:has(> li:only-child),
.neda-fp__grid--recent:has(> li:nth-child(2):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
}

/* Tracking on this page's own titles and bold runs. The sitewide rule reaches
   headings and navigation; these are spans and anchors with component classes,
   so they are named here.

   0.5px, halved from 1px, and `.neda-fp__btn` is gone from the list (user,
   2026-09-07): a card's button is short and bold inside its own frame, and
   tracking made it read as spaced out. `.neda-fp__more` stays -- it is a text
   link, not a button. */
.neda-fp :is(
    .neda-fp__title,
    .neda-fp-card__title,
    .neda-fp-course__title,
    .neda-fp-mini__title,
    .neda-fp-card__count,
    .neda-fp__more,
    .neda-fp__chip,
    .neda-fp__benefits li
) {
    letter-spacing: 0.5px;
}

/* The Creator band's picture: a transparent PNG of the editor, 2100x749,
   so it is width-led in its column and needs no frame. */
.neda-fp__band-img { inline-size: 100%; block-size: auto; display: block; }

/* The Creator picture takes a larger share of its band (user, 2026-09-07):
   the editor's block labels are small at 584px, and the words on the left
   have room to spare. The columns tilt to the picture rather than the image
   overflowing, so the text still ends on the measure. */
@media (min-width: 761px) {
    .neda-fp--creator .neda-fp__band--with-media {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
}

/* ---- the white area is what stretches, never the picture ---------------
 * Owner, 2026-09-07: "in one category box, the white text area is smaller
 * than the other."
 *
 * Measured after `grid-auto-rows: 1fr` landed: two Academy cards, both
 * 340x309, bodies both 66px, but figures 243px and 235px. The row is now
 * taller than a card's content, and the spare height was being handed to
 * the FIGURE -- so the 3:2 cover stopped being 3:2, by a different amount
 * on each card, and the white beneath it moved.
 *
 * `.neda-fp-card__figure` already carries `flex: none`, which should have
 * settled it; but the figure also gets `overflow: visible` further up so the
 * icon badge is not clipped, and with the cover at `block-size: 100%` the
 * picture is free to push the box past the ratio it was given.
 *
 * So the rule is stated rather than inferred: the picture holds its ratio
 * and the BODY takes every spare pixel. Two cards in a row then differ only
 * in how much white sits under the words, which is what a card of variable
 * text is supposed to do, and their pictures line up exactly.
 */
/* The card's own flex column. An Academy or Studio card IS the link; a
   featured course card is not (its button is), so its column is the card
   element itself. Naming a `.neda-fp-course__link` here would have matched
   nothing -- the markup has no such element. */
.neda-fp a.neda-fp-card__link,
.neda-fp .neda-fp-course {
    justify-content: flex-start;
}

.neda-fp-card__figure,
.neda-fp-course__media {
    flex: 0 0 auto;
    min-block-size: 0;
}

.neda-fp-card__body,
.neda-fp-course__body {
    flex: 1 1 auto;
}

/* Studios join the centring rule above. It was written for a five-column row
   holding one or two cards, which is exactly the shape Studios is in now
   that it is a grid rather than a carousel: one Studio was sitting alone at
   the far inline-start of a row of five. */
.neda-fp__grid--studios:has(> li:only-child),
.neda-fp__grid--studios:has(> li:nth-child(2):last-child),
.neda-fp__grid--studios:has(> li:nth-child(3):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
    justify-content: center;
}

/* =========================================================================
   8. THE FAQ                                            (owner, 2026-09-09)

   The same design as the Creators' Corner FAQ, which is where it was built
   first: words and an illustration on the inline start, numbered rows on the
   end, each row a card whose chevron plate fills when it opens.

   The two are DELIBERATELY not sharing a stylesheet. They are separate,
   independently deployable plugins, and neither may reach into the other's
   assets -- so the design is written twice, once per sheet, and the two
   copies are named here so that changing one without the other is a decision
   rather than an oversight. The bridge's copy lives in creators-corner.css
   under "7. the FAQ".
   ========================================================================= */

.neda-fp-faq__wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
}

.neda-fp-faq__aside .neda-fp__title { margin-block-end: 8px; }
.neda-fp-faq__aside .neda-fp__lede  { margin-block-end: 20px; max-inline-size: 34ch; }

/* The standard Neda button, not a variant (owner, 2026-09-09). It carries
   `.neda-fp__btn` and inherits lime, black, 40px, 10px corners and the
   cherry hover; this adds only the chevron. An outlined pill was a third
   button the system does not have. */
.neda-fp a.neda-fp-faq__link { gap: 10px; }
.neda-fp a.neda-fp-faq__link::after {
    content: "";
    inline-size: 8px; block-size: 8px;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
}
[dir="rtl"] .neda-fp a.neda-fp-faq__link::after { transform: rotate(225deg); }

/* The two speech bubbles, cut out of a JPEG that had the transparency
   checkerboard painted into it. A background rather than an <img>, so the
   URL stays relative to this sheet and it is decorative by construction. */
.neda-fp-faq__art {
    display: block;
    inline-size: min(200px, 55%);
    aspect-ratio: 600 / 489;
    /* Centred in the column and smaller (owner, 2026-09-09). */
    margin-block-start: clamp(16px, 3vw, 32px);
    margin-inline: auto;
    background: url("faq-bubbles.png") center / contain no-repeat;
}

.neda-fp-faq__list { display: grid; align-content: start; gap: 12px; }

.neda-fp-faq__item {
    background: var(--fp-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--fp-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 18px -10px rgba(0, 0, 0, 0.12);
    transition: border-color var(--fp-ease), box-shadow var(--fp-ease);
}
.neda-fp-faq__item:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07), 0 12px 26px -10px rgba(0, 0, 0, 0.18); }
.neda-fp-faq__item[open] { border-color: var(--fp-cyan); }

.neda-fp-faq__item > summary {
    display: grid;
    grid-template-columns: auto 1px 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 40px;
    padding: 16px 18px;
    list-style: none;
    cursor: pointer;
}
.neda-fp-faq__item > summary::-webkit-details-marker { display: none; }
.neda-fp-faq__item > summary::marker { content: ""; }

/* The numeral is black at 72%, never the cyan the mock draws: cyan on white
   is 2.16:1, and it is visible text whether or not it is aria-hidden. */
.neda-fp-faq__n {
    font-size: 15px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.72);
    font-variant-numeric: tabular-nums;
}

.neda-fp-faq__item > summary::before {
    content: "";
    inline-size: 1px;
    block-size: 22px;
    background: rgba(0, 0, 0, 0.12);
}

.neda-fp-faq__q { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--fp-black); }

/* A 10px plate, not a circle, and cyan only as a FILL behind a black glyph. */
.neda-fp-faq__go {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--fp-radius);
    background: var(--fp-tint1);
    transition: background var(--fp-ease);
}
.neda-fp-faq__go::before {
    content: "";
    inline-size: 9px; block-size: 9px;
    border-block-end: 2px solid var(--fp-black);
    border-inline-end: 2px solid var(--fp-black);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--fp-ease);
}
.neda-fp-faq__item[open] .neda-fp-faq__go { background: var(--fp-cyan); }
.neda-fp-faq__item[open] .neda-fp-faq__go::before { transform: rotate(225deg) translate(-2px, -2px); }

.neda-fp-faq__item > summary:focus-visible { outline: 3px solid var(--fp-cherry); outline-offset: 2px; }

.neda-fp-faq__a { padding: 0 18px 16px 73px; }
.neda-fp-faq__a p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(0, 0, 0, 0.78); }

@media (max-width: 900px) {
    .neda-fp-faq__wrap { grid-template-columns: minmax(0, 1fr); }
    /* Decoration, and on a narrow screen it would push the questions a
       screenful down before anyone reached one. */
    .neda-fp-faq__art { display: none; }
}

@media (max-width: 560px) {
    .neda-fp-faq__item > summary { grid-template-columns: auto 1px 1fr; gap: 12px; }
    .neda-fp-faq__go { display: none; }
    .neda-fp-faq__a { padding-inline-start: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .neda-fp-faq__item,
    .neda-fp-faq__go,
    .neda-fp-faq__go::before,
    .neda-fp a.neda-fp-faq__link { transition: none; }
}

@media (forced-colors: active) {
    .neda-fp-faq__item,
    .neda-fp-faq__go { border: 1px solid CanvasText; }
    .neda-fp-faq__item > summary:focus-visible { outline: 3px solid Highlight !important; }
}