/* ── WAJD FLUID ──
   The site's single design language: translucent ribbons, frosted glass cards,
   3D objects and gold pill actions, at every width.

   This file replaces fluid-mobile.css, which applied only below 760px and left
   desktop on the old flat skin. One design, one file, no breakpoint gap.

   Layout still belongs to shared.css and the per-page <style> blocks. This file
   only changes how things look, so page CSS keeps owning structure. Every rule
   is prefixed html.fluid-on, which outranks a bare .class no matter which file
   loads last, and doubles as the kill switch (shared.js adds the class, and
   skips the WajdQuran family and /admin entirely).

   Order below: shared skin, then phone only, then desktop only, then print.
   The old flat look is archived in _archives/pre-fluid-design-20260819/. */

html.fluid-on {
  --fl-glass: rgba(255, 255, 255, 0.94);
  --fl-glass-strong: rgba(255, 255, 255, 0.96);
  --fl-hairline: rgba(255, 255, 255, 0.95);
  --fl-ink-line: rgba(26, 26, 94, 0.12);
  --fl-shadow: 0 10px 22px rgba(26, 26, 94, 0.13);
  --fl-radius: 20px;
  --fl-gold-hi: #f9bc4e;
  --fl-gold-ink: #4a3000;
  --fl-gold-deep: #b97812;
}

/* ══ 1. Page wash ══
   Two gradient ribbons behind everything. Pure gradients, never filter: blur(),
   which janks scrolling on low-end phones; the softness is in the colour stops. */
html.fluid-on body { background: #f4f2ee; }
html.fluid-on body::before,
html.fluid-on body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
html.fluid-on body::before {
  width: 220vw; height: 46vh;
  left: -60vw; top: -16vh;
  transform: rotate(-6deg);
  background: linear-gradient(100deg,
    rgba(247, 217, 196, 0.5), rgba(255, 255, 255, 0.4) 45%, rgba(195, 236, 236, 0.5));
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
}
html.fluid-on body::after {
  width: 220vw; height: 42vh;
  right: -70vw; bottom: -18vh;
  transform: rotate(4deg);
  background: linear-gradient(95deg,
    rgba(220, 214, 247, 0.45), rgba(255, 255, 255, 0.5) 50%, rgba(191, 240, 221, 0.5));
  border-top: 2px solid rgba(255, 255, 255, 0.9);
}

/* ══ 2. Navigation ══ */
html.fluid-on .site-nav {
  background: var(--fl-glass-strong);
  border-bottom: 1.5px solid var(--fl-hairline);
  box-shadow: 0 8px 22px rgba(26, 26, 94, 0.1);
}
html.fluid-on .hamburger span { background: var(--navy); }
html.fluid-on .nav-menu,
html.fluid-on .nav-drop-menu {
  background: var(--fl-glass-strong);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 16px;
  box-shadow: var(--fl-shadow);
}
html.fluid-on .nav-icon-btn { background: rgba(255, 255, 255, 0.7); }
html.fluid-on .nav-search { background: rgba(255, 255, 255, 0.7); border-color: var(--fl-hairline); }

/* ══ 3. Actions ══ */
html.fluid-on .btn-primary,
html.fluid-on .wq-check,
html.fluid-on .btn-enroll,
html.fluid-on .reveal-btn {
  background: linear-gradient(180deg, var(--fl-gold-hi), var(--yellow));
  color: var(--fl-gold-ink);
  border: none;
  border-radius: 999px;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -4px 8px rgba(150, 95, 0, 0.32),
    0 8px 18px rgba(245, 166, 35, 0.32);
}
html.fluid-on .btn-primary:hover {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -4px 8px rgba(150, 95, 0, 0.32),
    0 10px 24px rgba(245, 166, 35, 0.4);
}
html.fluid-on .wq-check { padding: 0 26px; }
html.fluid-on .btn-login,
html.fluid-on .btn-outline {
  background: rgba(255, 255, 255, 0.68);
  border: none;
  /* !important because eleven pages carry an inline style="color:#fff" on these
     buttons, written when they sat on navy bands. The pill is a light glass
     chip now, so that inline white is invisible, and an inline style cannot be
     beaten any other way. Navy reads correctly on the chip whether the section
     behind it is light or dark. */
  color: var(--navy) !important;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--fl-hairline), 0 5px 12px rgba(26, 26, 94, 0.12);
}
html.fluid-on .btn-outline { padding: 12px 24px; }
html.fluid-on .btn-outline:hover { background: rgba(255, 255, 255, 0.9); color: var(--navy); }

/* Keyboard focus has to stay obvious on translucent surfaces, where a faint
   ring disappears completely. */
html.fluid-on a:focus-visible,
html.fluid-on button:focus-visible,
html.fluid-on input:focus-visible,
html.fluid-on select:focus-visible,
html.fluid-on textarea:focus-visible,
html.fluid-on [tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ══ 4. Surfaces ══ */
/* .card is a generic container: it wraps forms, prose and empty states as often
   as it wraps content with a subject, and nothing in the markup says which. It
   gets a warm neutral wash rather than an invented subject colour, so it lifts
   off flat white without implying a meaning it does not have. */
html.fluid-on .card,
html.fluid-on .wq-card,
html.fluid-on .today-card,
html.fluid-on .rewards-strip,
html.fluid-on .gs-card,
html.fluid-on .mc,
html.fluid-on .stat,
html.fluid-on .act,
html.fluid-on .summary,
html.fluid-on .weak,
html.fluid-on .paper-row {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, rgba(250, 242, 226, 0.8), rgba(255, 255, 255, 0) 58%);
  border: 1.5px solid var(--fl-hairline);
  border-radius: var(--fl-radius);
  /* The inset top highlight is what makes the tile read as a raised surface
     rather than a flat rectangle: light catching the top lip. */
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}
/* .hero-card is two different things: the white sample-question card on the home
   page (.tryone) and the dashboard's navy gradient plan card. Turning the second
   one light stranded its white heading on a near-white panel, so each gets its
   own treatment: glass for the light one, sheen for the dark one. */
html.fluid-on .hero-card.tryone {
  background: var(--fl-glass);
  border: 1.5px solid var(--fl-hairline);
  border-radius: var(--fl-radius);
  box-shadow: var(--fl-shadow);
}
html.fluid-on .hero-card:not(.tryone) {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.3),
    0 18px 34px rgba(26, 26, 94, 0.35);
}
/* The grade badge sits on that dark card and needs to read as a raised chip. */
html.fluid-on .hero-card:not(.tryone) .grade-badge {
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25);
}

/* Links inside a card were falling back to the browser default, which is why
   they showed up purple and underlined next to everything else. */
html.fluid-on .card a:not(.btn-primary):not(.btn-outline):not(.btn-login):not(.pill) {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

/* Where a card does carry a subject colour, that wins over the neutral wash. */
html.fluid-on .card[style*="--c1"],
html.fluid-on .stat[style*="--c1"] {
  background-image: linear-gradient(150deg, var(--c2, transparent), rgba(255, 255, 255, 0) 64%);
  border-left: 3px solid var(--c1);
}
/* Tiles carry their subject colour in --c1 with a soft tint in --c2, set inline
   per card. A plain white card throws that away and the whole page reads grey,
   so the tint becomes a wash across the card and the accent stays on the edge.
   Every class listed here receives those two variables somewhere in the estate:
   .tile and .gcard from page markup, .tool-tile and .amb and .paper-card and
   .subj-card and .s-tile from the JS that builds them. Miss one and it renders
   flat white next to its coloured neighbours. */
html.fluid-on .tile,
html.fluid-on .gcard,
html.fluid-on .tool-tile,
html.fluid-on .amb,
html.fluid-on .paper-card,
html.fluid-on .subj-card,
html.fluid-on .s-tile,
html.fluid-on .belief {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, var(--c2, transparent), rgba(255, 255, 255, 0) 68%);
  border: 1.5px solid var(--fl-hairline);
  border-left: 3px solid var(--c1, var(--accent, var(--cyan)));
  border-radius: var(--fl-radius);
  /* Inset top highlight is the raised lip: every tile on a page then shares one
     surface treatment instead of some reading flat and some raised. */
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}
/* Subjects page. Its cards carry the subject colour in --sc with the soft tint
   in --ss, the same idea as --c1/--c2 but named differently, which is why they
   were still rendering flat white next to the coloured tiles elsewhere. */
html.fluid-on .subj {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, var(--ss, transparent), rgba(255, 255, 255, 0) 68%);
  border: 1.5px solid var(--fl-hairline);
  border-left: 3px solid var(--sc, var(--cyan));
  border-radius: var(--fl-radius);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}
html.fluid-on .subj h3 { color: var(--navy); }
/* The topic chips inside each subject card: pills, like every other chip row. */
html.fluid-on .topic {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(26, 26, 94, 0.08);
  color: var(--navy);
}
html.fluid-on .search-row {
  background: var(--fl-glass);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 999px;
  box-shadow: var(--fl-shadow);
}
/* This toggle sat on the navy head as a translucent white track. The head is
   light now, so 12% white is invisible; give it a tinted track instead. */
html.fluid-on .explore-toggle {
  background: rgba(26, 26, 94, 0.07);
  border: 1.5px solid var(--fl-hairline);
}

/* My progress. .panel is the page's main card and was never in the surface
   list, so it stayed flat white while everything around it gained depth. */
html.fluid-on .panel {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, rgba(250, 242, 226, 0.8), rgba(255, 255, 255, 0) 58%);
  border: 1.5px solid var(--fl-hairline);
  border-radius: var(--fl-radius);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}
/* The grade hero is a navy gradient with white text: it stays dark and takes
   the same sheen as the dashboard's plan card. */
html.fluid-on .grade-hero {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.3),
    0 18px 34px rgba(26, 26, 94, 0.35);
}
html.fluid-on .grade-hero .grade-badge {
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25);
}

html.fluid-on .section-label {
  background: rgba(255, 255, 255, 0.68);
  border: 1.5px solid var(--fl-hairline);
  color: var(--fl-gold-deep);
  box-shadow: 0 5px 10px rgba(26, 26, 94, 0.08);
}
html.fluid-on .tag-pill {
  background: rgba(255, 255, 255, 0.68);
  border: 1.5px solid var(--fl-hairline);
  color: var(--navy);
}
html.fluid-on .note {
  background: linear-gradient(120deg, rgba(220, 214, 247, 0.5), rgba(255, 255, 255, 0.9) 60%);
  border: 1.5px solid var(--fl-hairline);
  border-left: 1.5px solid var(--fl-hairline);
  border-radius: 18px;
  box-shadow: var(--fl-shadow);
}
html.fluid-on .search input,
html.fluid-on .wq-input,
html.fluid-on .sn-form .sn-text {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--fl-ink-line);
  border-radius: 14px;
}

/* 3D icon holders. These were pale tints of the subject colour, which left every
   card looking white. They now take the solid colour with a white glyph, which
   is what carries the colour on a page of frosted cards. The gloss is two
   overlay gradients plus inset light, so it works on whatever --c1 holds. */
html.fluid-on .gcard .ic,
html.fluid-on .tile .ic,
html.fluid-on .tool-tile .ic,
html.fluid-on .amb .ic,
html.fluid-on .paper-card .ic,
html.fluid-on .s-tile .ic,
html.fluid-on .card .ic,
html.fluid-on .act-ic,
html.fluid-on .note .ni {
  background-color: var(--c1, var(--blue));
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.22));
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -6px 10px rgba(0, 0, 0, 0.16),
    0 10px 18px rgba(20, 28, 60, 0.22);
  border-radius: 14px;
  color: #fff;
}
/* The glyphs are stroke="currentColor", so the white above colours them. */
html.fluid-on .gcard .ic svg,
html.fluid-on .tile .ic svg,
html.fluid-on .tool-tile .ic svg,
html.fluid-on .amb .ic svg,
html.fluid-on .paper-card .ic svg,
html.fluid-on .s-tile .ic svg,
html.fluid-on .card .ic svg,
html.fluid-on .act-ic svg,
html.fluid-on .note .ni svg { color: #fff; }

/* This band's colour IS a background-image gradient (.mc-t1/2/3), so a gloss
   gradient here would replace the brand colour and strand the white label. */
html.fluid-on .mc { overflow: hidden; }
html.fluid-on .mc-top {
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.45),
    inset 0 -10px 16px rgba(0, 0, 0, 0.16);
}
/* .bar is deliberately NOT in this list. It means a progress track on the
   dashboard but a navy top bar on the recall and diagnostic pages, and styling
   it as a pale pill there left white text on a near-white strip. Same trap as
   .hero: a generic class name meaning two different things. */
html.fluid-on .hbar,
html.fluid-on .rs-bar,
html.fluid-on .prog,
html.fluid-on .track {
  background: rgba(26, 26, 94, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

/* ══ 5. Question and answer states ══ */
html.fluid-on .wq-opt {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 15px;
  box-shadow: 0 5px 12px rgba(26, 26, 94, 0.08);
}
html.fluid-on .wq-opt.correct,
html.fluid-on .chip.right {
  background: #e3f5ec;
  border-color: rgba(76, 196, 145, 0.7);
  color: #14603f;
}
html.fluid-on .wq-opt.wrong,
html.fluid-on .chip.wrong {
  background: #fdeee8;
  border-color: rgba(232, 140, 105, 0.7);
  color: #b0431f;
}
html.fluid-on .wq-reveal {
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 0 0 1.5px var(--fl-hairline);
  border-radius: 999px;
}
html.fluid-on .wq-solution {
  background: linear-gradient(120deg, rgba(220, 214, 247, 0.55), rgba(255, 255, 255, 0.92) 60%);
  border: 1.5px solid var(--fl-hairline);
  border-left: 1.5px solid var(--fl-hairline);
  border-radius: 16px;
}
/* On the recall pages .chip is a full-width answer button, not a filter pill, so
   it stays a stacked block and only the finish changes. */
html.fluid-on .selfmark .chip,
html.fluid-on .answer .chip,
html.fluid-on .seq-your .chip,
html.fluid-on .ask .chip,
html.fluid-on .grades .grade {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 15px;
  box-shadow: 0 5px 12px rgba(26, 26, 94, 0.08);
}
html.fluid-on .prompt-big,
html.fluid-on .term-big { color: var(--navy); }

/* Filter pills. The selected one carries its own colour with white text on top,
   sometimes set inline by the page's JS, so only unselected pills are reskinned;
   restyling the selected one would leave white on white. */
html.fluid-on .chips > .chip:not(.active):not(.on),
html.fluid-on .cats > .cat:not(.on),
html.fluid-on .board-btn:not(.active) {
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid var(--fl-hairline);
  box-shadow: 0 5px 12px rgba(26, 26, 94, 0.08);
}
html.fluid-on .chips > .chip,
html.fluid-on .cats > .cat { border-radius: 999px; }
html.fluid-on .chips > .chip.active,
html.fluid-on .chips > .chip.on,
html.fluid-on .cats > .cat.on { box-shadow: 0 6px 14px rgba(26, 26, 94, 0.22); }
html.fluid-on .board-btn { border-radius: 16px; }
html.fluid-on .board-btn.active {
  background: linear-gradient(120deg, rgba(250, 242, 226, 0.95), rgba(255, 255, 255, 0.9));
  border: 1.5px solid var(--fl-hairline);
  box-shadow: 0 8px 18px rgba(245, 166, 35, 0.22);
}

/* ══ 5b. Page heads ══
   41 pages open with a solid navy `.page-head` carrying white text: the last
   part of the site still speaking the old flat language. They become the same
   light wash as the rest of the design, which means every child that relied on
   inheriting white has to be re-inked here. Nine of these heads hold a white
   line-art doodle (the -w variants), which would vanish on a light background;
   shared.js swaps those to their dark counterparts. */
html.fluid-on .page-head {
  background: linear-gradient(115deg,
    rgba(250, 242, 226, 0.62), rgba(255, 255, 255, 0.9) 46%, rgba(195, 236, 236, 0.5));
  border-bottom: 1.5px solid var(--fl-hairline);
  color: var(--text-dark);
}
html.fluid-on .page-head h1,
html.fluid-on .page-head h2,
html.fluid-on .page-head a.logo,
html.fluid-on .page-head .l,
html.fluid-on .page-head .brand { color: var(--navy); }
html.fluid-on .page-head p,
html.fluid-on .page-head .sub { color: var(--text-mid); }
html.fluid-on .page-head .eyebrow { color: var(--fl-gold-deep); }
/* These sat on the navy as translucent white chips. */
html.fluid-on .page-head .back-btn,
html.fluid-on .page-head .skip {
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid var(--fl-hairline);
  color: var(--navy);
}
html.fluid-on .page-head .back-btn:hover,
html.fluid-on .page-head .skip:hover { background: rgba(255, 255, 255, 0.95); color: var(--navy); }
html.fluid-on .page-head .section-label {
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid var(--fl-hairline);
  color: var(--fl-gold-deep);
}
/* A link inside a navy head was white by inheritance; keep links legible. */
html.fluid-on .page-head a:not(.btn-primary):not(.btn-outline):not(.logo) { color: var(--blue); }
/* Same fix the footer needed: .wb-ghost was drawn white on translucent white. */
html.fluid-on .page-head .wb-ghost { background: rgba(26, 26, 94, 0.06); color: var(--navy); }
html.fluid-on .page-head .wb-ghost .tm { color: var(--blue); }
/* The Learn / Practise toggle (courses, subjects): the unselected segment was
   translucent white for the navy head, which is invisible on the light one. */
html.fluid-on .page-head .et-seg { color: var(--text-mid); }
html.fluid-on .page-head .et-seg.active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 10px rgba(26, 26, 94, 0.14);
}
html.fluid-on .page-head .et-seg:not(.active):hover { color: var(--navy); }

/* ══ 5b2. Home page ══
   The crew cards carry their character's colour in --accent with the soft tint
   in --tint: a third naming after --c1/--c2 and --sc/--ss, which is why they
   were still flat white while everything else gained colour and depth. The rest
   of the front page (.cat-card, .plan, .frame) was never in the surface list
   either, so the page below the hero still read as the old flat design. */
html.fluid-on .voice {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, var(--tint, transparent), rgba(255, 255, 255, 0) 62%);
  border: 1.5px solid var(--fl-hairline);
  border-left: 3px solid var(--accent, var(--cyan));
  border-radius: var(--fl-radius);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}
/* The character's art sits in a raised, glossy well in their own colour, which
   is what gives the crew the 3D feel the rest of the tiles have.
   It is a thumbnail, not a poster: at full size the three cards ran to 908px of
   the home page before a visitor reached anything they could act on. Tapping it
   opens the full drawing (shared.js), so nothing is lost. */
html.fluid-on .voice-art {
  height: 84px;
  padding: 8px;
  cursor: zoom-in;
  border-radius: 16px;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.08));
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.85),
    inset 0 -8px 14px rgba(26, 26, 94, 0.09),
    0 8px 16px rgba(26, 26, 94, 0.12);
}
/* The speech bubble reads as a raised chip rather than a flat block. */
html.fluid-on .voice-bubble {
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(26, 26, 94, 0.1);
}
html.fluid-on .voice-art img { height: 68px; width: auto; max-width: 100%; }
html.fluid-on .voice { padding: 16px 16px 14px; }
html.fluid-on .voice-who { margin: 13px 0 10px; }
html.fluid-on .voice-answer { border-top-color: var(--fl-ink-line); padding-top: 11px; }
/* The answer paragraph reserved 4.5 lines so three cards lined up. At thumbnail
   size that reserve is most of the card, and the cards still align without it. */
html.fluid-on .voice-answer p { min-height: 0; }

/* The lightbox the thumbnail opens. Plain overlay, one image, no chrome. */
html.fluid-on .fl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 20, 46, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
html.fluid-on .fl-lightbox img {
  max-width: min(520px, 90vw);
  max-height: 80vh;
  width: auto;
  height: auto;
  padding: 22px;
  border-radius: 22px;
  background: var(--fl-glass);
  border: 1.5px solid var(--fl-hairline);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), 0 30px 60px rgba(16, 20, 46, 0.45);
}
html.fluid-on .fl-lightbox b {
  position: absolute;
  bottom: 26px;
  color: #fff;
  font-size: 0.86rem;
  font-family: 'Poppins', sans-serif;
}

/* The crew heading block carried a label, a title and a subtitle before three
   tall cards. Tighten the run-in so the cards start higher up the page. */
html.fluid-on #how { padding-top: 34px; padding-bottom: 30px; }
html.fluid-on #how .section-sub { margin-bottom: 20px; }

/* .plan.pro is the navy card with white text: excluded here, then given the
   dark treatment below. This is the fourth generic class that means one thing
   in light and another in dark (.hero, .bar, .hero-card, .plan), so check both
   before adding any class to this list. */
html.fluid-on .cat-card,
html.fluid-on .plan:not(.pro),
html.fluid-on .frame {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, rgba(250, 242, 226, 0.7), rgba(255, 255, 255, 0) 58%);
  border: 1.5px solid var(--fl-hairline);
  border-radius: var(--fl-radius);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}

/* ══ Dashboard side rail ══
   Streak, the weekly challenge and what is coming up, as in the approved
   design. On a laptop it sits beside the main column; on a phone it drops
   underneath, because a 320px rail beside content does not fit a hand. */
/* Two columns via flex, with the main content in its own wrapper. Grid put the
   rail in a row with a sibling and stretched that row to the rail's height; a
   float let the sibling backgrounds run underneath it. A wrapper is the honest
   fix: the rail and the content are siblings that share the row properly. */
/* The shell's main column is a grid item, so it defaults to min-width:auto and
   cannot shrink below the widest thing inside it. With a 320px rail added, that
   pushed the whole page wider than the window. */
html.fluid-on .k-main { min-width: 0; }
html.fluid-on .dash-has-rail {
  max-width: 1240px;
  display: flex;
  align-items: flex-start;
  gap: 26px;
}
html.fluid-on .dash-main { order: 1; flex: 1; min-width: 0; }
html.fluid-on .dash-rail {
  order: 2;
  width: 320px;
  flex: none;
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
html.fluid-on .fl-panel {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, rgba(250, 242, 226, 0.8), rgba(255, 255, 255, 0) 58%);
  border: 1.5px solid var(--fl-hairline);
  border-radius: var(--fl-radius);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
  padding: 22px;
}
html.fluid-on .fl-panel-h { font-size: 0.95rem; color: var(--navy); margin: 0 0 10px; }

/* Streak: the flame is a lit sphere, the same 3D language as the icon cubes. */
html.fluid-on .fl-streak { text-align: center; }
html.fluid-on .fl-flame {
  display: block;
  width: 62px; height: 62px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe9a8, var(--yellow) 55%, #d97706);
  box-shadow: inset 0 -10px 16px rgba(150, 80, 0, 0.4), 0 14px 26px rgba(217, 119, 6, 0.32);
}
html.fluid-on .fl-streak b {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}
html.fluid-on .fl-streak > span { font-size: 0.8rem; color: var(--text-mid); }
html.fluid-on .fl-days { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
html.fluid-on .fl-day {
  width: 26px; height: 26px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.64rem; font-weight: 800;
}
html.fluid-on .fl-day.on {
  background: linear-gradient(160deg, var(--fl-gold-hi), #dd952c);
  color: var(--fl-gold-ink);
  box-shadow: 0 4px 8px rgba(245, 166, 35, 0.3);
}
html.fluid-on .fl-day.rest { background: #d3f2e4; color: #1f7a52; }
html.fluid-on .fl-day.off { background: rgba(26, 26, 94, 0.1); color: var(--text-light); }

/* Arena: the one saturated panel on the page, as in the design. */
html.fluid-on .fl-arena {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: var(--fl-radius);
  color: #fff;
  background: linear-gradient(140deg, rgba(59, 91, 219, 0.95), rgba(18, 18, 74, 0.97));
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.3), 0 18px 32px rgba(26, 26, 94, 0.4);
}
html.fluid-on .fl-arena .fl-shine {
  position: absolute; left: -60px; top: -80px;
  width: 280px; height: 180px;
  transform: rotate(-14deg);
  border-radius: 50%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.32));
  pointer-events: none;
}
html.fluid-on .fl-arena b { position: relative; display: block; font-size: 1rem; margin-bottom: 5px; }
html.fluid-on .fl-arena p { position: relative; font-size: 0.8rem; line-height: 1.5; color: #cdd7ff; margin: 0 0 15px; }
html.fluid-on .fl-arena .btn-primary { position: relative; }

html.fluid-on .fl-next {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1.5px solid var(--fl-ink-line);
  text-decoration: none;
  color: inherit;
}
html.fluid-on .fl-next:last-child { border-bottom: 0; padding-bottom: 0; }
html.fluid-on .fl-next-i {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--bg-accent, rgba(59, 91, 219, 0.12));
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
}
html.fluid-on .fl-next b { display: block; font-size: 0.82rem; color: var(--navy); }
html.fluid-on .fl-next span span { font-size: 0.74rem; color: var(--text-light); }

@media (max-width: 900px) {
  html.fluid-on .dash-has-rail { display: block; }
  html.fluid-on .dash-rail {
    width: auto;
    position: static;
    margin: 22px 0 0;
  }
}

/* ══ Course carousel ══
   A snap row on every width: the pathway can run to a dozen subjects, and a
   grid of them would push the real work below the fold. */
html.fluid-on .fl-courses {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
  margin-bottom: 22px;
  min-width: 0;
}
html.fluid-on .fl-courses::-webkit-scrollbar { display: none; }
html.fluid-on .fl-course {
  flex: 0 0 258px;
  scroll-snap-align: start;
  border-radius: var(--fl-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, var(--c2, transparent), rgba(255, 255, 255, 0) 66%);
  border: 1.5px solid var(--fl-hairline);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
  transition: transform 0.18s;
}
html.fluid-on .fl-course:hover { transform: translateY(-4px); }
html.fluid-on .fl-course-lid {
  height: 76px;
  display: flex;
  align-items: flex-end;
  padding: 0 16px 12px;
  /* Inset shading only: the lid's colour is a gradient, so painting another
     gradient over it would wipe the subject colour. */
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.45), inset 0 -10px 16px rgba(0, 0, 0, 0.16);
}
html.fluid-on .fl-course-lid span {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 0.86rem;
}
html.fluid-on .fl-course-b { display: block; padding: 14px 16px 16px; }
html.fluid-on .fl-course-b b { display: block; font-size: 0.94rem; color: var(--navy); margin-bottom: 2px; }
html.fluid-on .fl-course-b small { font-size: 0.74rem; color: var(--text-light); }
html.fluid-on .fl-course-t {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(26, 26, 94, 0.12);
  overflow: hidden;
  margin-top: 11px;
}
html.fluid-on .fl-course-t i { display: block; height: 100%; border-radius: 999px; }

/* ══ Tutor insight ══ */
html.fluid-on .fl-insight {
  display: flex;
  gap: 17px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: var(--fl-radius);
  margin-bottom: 22px;
  background: linear-gradient(120deg, rgba(220, 214, 247, 0.5), rgba(255, 255, 255, 0.88) 56%);
  border: 1.5px solid var(--fl-hairline);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}
html.fluid-on .fl-orb {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #e6e0fb 45%, #8f7fe8);
  box-shadow: inset 0 -8px 14px rgba(80, 60, 180, 0.3), 0 12px 22px rgba(80, 60, 180, 0.22);
}
html.fluid-on .fl-insight b { display: block; font-size: 0.98rem; color: var(--navy); margin-bottom: 5px; }
html.fluid-on .fl-insight p { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; margin: 0 0 12px; max-width: 560px; }
html.fluid-on .fl-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #3C3489;
  background: rgba(206, 203, 246, 0.6);
  border: 1.5px solid var(--fl-hairline);
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 7px 10px 0;
}

/* ══ Learner top bar: search and notifications ══ */
html.fluid-on .k-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 14px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid var(--fl-hairline);
  box-shadow: 0 6px 14px rgba(26, 26, 94, 0.1);
  color: var(--text-light);
}
html.fluid-on .k-search svg { width: 17px; height: 17px; flex: none; }
html.fluid-on .k-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 0.88rem;
  color: var(--navy);
}
html.fluid-on .k-bell {
  position: relative;
  width: 38px; height: 38px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid var(--fl-hairline);
  box-shadow: 0 5px 12px rgba(26, 26, 94, 0.1);
  color: var(--text-mid);
  margin-right: 10px;
}
html.fluid-on .k-bell svg { width: 18px; height: 18px; }
html.fluid-on .k-bell-dot {
  position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(160deg, #ef9d75, #b0431f);
  border: 2px solid #fff;
}
/* A phone has no room for a full search field beside the brand and avatar. */
@media (max-width: 620px) {
  html.fluid-on .k-search { display: none; }
}

/* The Pro plan stays navy and takes the sheen, like the dashboard plan card. */
html.fluid-on .plan.pro {
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--fl-radius);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.3),
    0 18px 34px rgba(26, 26, 94, 0.35);
}

/* ══ 5b3. Challenge Arena and course detail ══
   The last two screens still carrying flat white panels. Styling only: no
   markup, no copy, no structure. */

/* The arena hero is a navy gradient with white text, so it keeps its colour and
   takes the sheen, the same as every other dark panel in the design. */
html.fluid-on .ar-hero {
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.28);
}
/* Answer buttons: frosted, with the soft mint and coral the practice screens
   use, rather than the harder green and red. */
html.fluid-on .ar-opt {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 15px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 5px 12px rgba(26, 26, 94, 0.09);
}
html.fluid-on .ar-opt.right {
  background: #e3f5ec;
  border-color: rgba(76, 196, 145, 0.7);
  color: #14603f;
}
html.fluid-on .ar-opt.wrong {
  background: #fdeee8;
  border-color: rgba(232, 140, 105, 0.7);
  color: #b0431f;
}
/* The streak-beat note: a warm chip rather than a flat block. */
html.fluid-on .beat {
  background: linear-gradient(150deg, rgba(250, 242, 226, 0.95), rgba(255, 255, 255, 0.7));
  border: 1.5px solid var(--fl-hairline);
  border-radius: 16px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(26, 26, 94, 0.1);
}

/* Course detail: the enrol card, and the unit rows that hold the lessons. */
html.fluid-on .enrol-card {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, rgba(250, 242, 226, 0.8), rgba(255, 255, 255, 0) 58%);
  border: 1.5px solid var(--fl-hairline);
  border-radius: var(--fl-radius);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}
html.fluid-on .unit {
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 16px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(26, 26, 94, 0.09);
}
html.fluid-on .unit.target {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(245, 166, 35, 0.22);
}
html.fluid-on .unit-head:hover { background: rgba(255, 255, 255, 0.6); }

/* ══ 5c. Visual Lab lessons ══
   The 33 lesson pages share one set of parts: .stage holds the diagram, .narr
   narrates what is happening, .tab switches sections, and .btn-play drives the
   animation. None of them were in the surface list, so the lessons were still
   flat white while the rest of the site had depth. This gives them the practice
   screen's treatment: frosted stage, lavender narration panel, pill controls. */
html.fluid-on .stage {
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, rgba(250, 242, 226, 0.55), rgba(255, 255, 255, 0) 60%);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 22px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}
/* The narration is the lesson's equivalent of the tutor panel: it is the voice
   explaining the step, so it takes the same lavender glass. */
html.fluid-on .narr {
  background: linear-gradient(120deg, rgba(220, 214, 247, 0.5), rgba(255, 255, 255, 0.9) 60%);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 18px;
  box-shadow: var(--fl-shadow);
}
html.fluid-on .tab {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(26, 26, 94, 0.08);
  color: var(--navy);
}
html.fluid-on .tab.on {
  background: linear-gradient(180deg, var(--fl-gold-hi), var(--yellow));
  color: var(--fl-gold-ink);
  border-color: transparent;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -4px 8px rgba(150, 95, 0, 0.32),
    0 8px 18px rgba(245, 166, 35, 0.32);
}
/* Play is the primary action on a lesson, so it takes the gold pill; step and
   reset sit beside it as the quieter glass chips. */
html.fluid-on .btn-play {
  background: linear-gradient(180deg, var(--fl-gold-hi), var(--yellow));
  color: var(--fl-gold-ink);
  border: none;
  border-radius: 999px;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -4px 8px rgba(150, 95, 0, 0.32),
    0 8px 18px rgba(245, 166, 35, 0.32);
}
html.fluid-on .btn-step {
  background: rgba(255, 255, 255, 0.75);
  color: var(--navy);
  border: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--fl-hairline), 0 5px 12px rgba(26, 26, 94, 0.12);
}
html.fluid-on .counter,
html.fluid-on .switch { color: var(--ink-mid, var(--text-mid)); }

/* ══ 6. Bars, banners and chrome ══ */
html.fluid-on .lesson-bar {
  background: var(--fl-glass-strong);
  border-bottom: 1.5px solid var(--fl-hairline);
  color: var(--navy);
}
html.fluid-on .lesson-bar a,
html.fluid-on .lesson-bar .brand { color: var(--navy); }
html.fluid-on .wajd-announce {
  background: linear-gradient(120deg, rgba(26, 26, 94, 0.95), rgba(59, 91, 219, 0.92));
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
}
html.fluid-on .toast {
  background: var(--fl-glass-strong);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 16px;
}
html.fluid-on .wajd-modal-card {
  background: var(--fl-glass-strong);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 22px;
}

/* ══ 7. Footer: dark navy panel becomes light frosted. Content untouched. ══ */
html.fluid-on .site-footer {
  background: rgba(255, 255, 255, 0.62);
  border-top: 1.5px solid var(--fl-hairline);
  color: var(--text-dark);
}
html.fluid-on .footer-logo { color: var(--navy); }
html.fluid-on .footer-col p,
html.fluid-on .footer-col address { color: var(--text-mid); }
html.fluid-on .footer-col h4 { color: var(--navy); border-bottom-color: var(--yellow); }
html.fluid-on .footer-links a { color: var(--text-mid); }
html.fluid-on .footer-links a:hover { color: var(--blue); }
html.fluid-on .footer-socials a { background: rgba(26, 26, 94, 0.08); color: var(--navy); }
html.fluid-on .footer-socials a:hover { background: var(--yellow); color: var(--navy); }
html.fluid-on .app-btn {
  background: rgba(26, 26, 94, 0.05);
  border-color: var(--fl-ink-line);
  color: var(--navy);
}
html.fluid-on .app-btn:hover { background: rgba(26, 26, 94, 0.1); }
html.fluid-on .footer-bottom { border-top-color: var(--fl-ink-line); }
html.fluid-on .footer-bottom p { color: var(--text-light); }
html.fluid-on .footer-bottom-links a { color: var(--text-mid); }
html.fluid-on .footer-bottom-links a:hover { color: var(--navy); }
html.fluid-on .footer-family { color: var(--text-light); }
html.fluid-on .footer-family a { color: var(--text-mid); }
html.fluid-on .footer-family a:hover { color: var(--navy); }
html.fluid-on .footer-family span { color: rgba(26, 26, 94, 0.2); }
html.fluid-on .footer-social a { color: var(--text-mid); }
html.fluid-on .footer-social a:hover { color: var(--navy); }
html.fluid-on .footer-country label { color: var(--text-light); }
html.fluid-on .footer-country select {
  background: rgba(255, 255, 255, 0.85);
  color: var(--navy);
  border: 1px solid var(--fl-ink-line);
}
html.fluid-on .footer-newsletter {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid var(--fl-hairline);
}
html.fluid-on .footer-newsletter .nl-copy strong { color: var(--navy); }
html.fluid-on .footer-newsletter .nl-copy p { color: var(--text-mid); }
html.fluid-on .footer-newsletter .nl-form input {
  border: 1.5px solid var(--fl-ink-line);
  background: rgba(255, 255, 255, 0.95);
}
/* .wb-ghost was drawn white on translucent white for the old dark footer. */
html.fluid-on .site-footer .wb-ghost { background: rgba(26, 26, 94, 0.06); color: var(--navy); }
html.fluid-on .site-footer .wb-ghost .tm { color: var(--blue); }

/* The bottom tab bar is injected on every page but belongs to phones only. It
   is hidden by default and switched on inside the phone block below; without
   this it renders as a plain nav at the foot of every desktop page. */
html.fluid-on .fl-tabs { display: none; }
/* Focus routes (revise, mission, stem-arcade, diagnostic, onboarding) strip the
   page back to the task. Three of them carry a .site-nav, which is the very
   condition the injector uses, so without this the bar would put five ways to
   leave on screen during a timed activity. Explicit, not incidental: the shell
   owns focus, and nothing this stylesheet adds may compete with it. */
html.fluid-on body.k-focus-mode .fl-tabs,
html.fluid-on body.k-focus-mode .k-tabs { display: none !important; }
html.fluid-on.has-fl-tabs body.k-focus-mode { padding-bottom: 0; }

/* The hero objects peek out past their box on purpose, which needs room either
   side, and below roughly 1100px there is none. The section itself now clips
   (see .fl-hero), so they bleed off the page edge instead of widening it. */

/* Close the gap above the headline. The hero opened with 64px of padding on a
   laptop and 40px on a phone, before an eyebrow, a heading and a paragraph, so
   the first thing a visitor could act on sat well below the fold. */
html.fluid-on .hero { padding-top: 34px; }
html.fluid-on .hero-eyebrow { margin-bottom: 4px; }
html.fluid-on .hero-text h1 { margin: 8px 0 12px; }
html.fluid-on .hero-text p { margin-bottom: 20px; }
@media (max-width: 900px) {
  html.fluid-on .hero { padding-top: 20px; }
  html.fluid-on .hero-text h1 { margin: 6px 0 10px; }
}

/* ══ 8. Home hero scene (markup lives in index.html) ══

   The home hero is the one place the design has to carry itself with no content
   in the way, so it gets the full treatment: a flowing backdrop, display-scale
   type, a pill eyebrow and the 3D objects at their proper size. All of it is
   scoped to .fl-hero rather than .hero, because 48 other pages share the .hero
   class and most of them are navy with white text on top. */
html.fluid-on .fl-hero {
  position: relative;
  overflow: hidden;
  align-items: center;
  padding: 56px 80px 76px;
  background-color: #efe9df;
  background-image:
    radial-gradient(96% 84% at 2% -12%, rgba(252, 232, 198, 0.98), rgba(252, 232, 198, 0) 52%),
    radial-gradient(84% 70% at 102% -2%, rgba(190, 216, 247, 0.98), rgba(190, 216, 247, 0) 54%),
    radial-gradient(78% 70% at 92% 110%, rgba(180, 230, 214, 0.98), rgba(180, 230, 214, 0) 56%),
    radial-gradient(66% 62% at -8% 110%, rgba(222, 208, 246, 0.98), rgba(222, 208, 246, 0) 54%),
    linear-gradient(158deg, #fbf2e2, #e9eefa 54%, #dff0ec);
}
/* Two translucent sheets crossing the hero. overflow: hidden on the section
   keeps them, and the objects that bleed past the edge, off the scrollbar. */
html.fluid-on .fl-hero::before,
html.fluid-on .fl-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
html.fluid-on .fl-hero::before {
  left: -24%; top: -84%; width: 128%; height: 136%; transform: rotate(-7deg);
  background: linear-gradient(122deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16) 56%, rgba(255, 255, 255, 0));
  border-bottom: 2.5px solid rgba(255, 255, 255, 0.95);
}
html.fluid-on .fl-hero::after {
  left: -16%; bottom: -88%; width: 134%; height: 126%; transform: rotate(5deg);
  background: linear-gradient(96deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.72) 44%, rgba(232, 246, 251, 0.4));
  border-top: 2.5px solid rgba(255, 255, 255, 0.98);
}
html.fluid-on .fl-hero > * { position: relative; z-index: 1; }

html.fluid-on .fl-hero .hero-text { max-width: 560px; }
html.fluid-on .fl-hero .hero-eyebrow {
  display: inline-block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--fl-gold-deep);
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid var(--fl-hairline);
  border-radius: 999px;
  padding: 12px 24px;
  margin-bottom: 8px;
  box-shadow: 0 10px 22px rgba(26, 26, 94, 0.1);
}
html.fluid-on .fl-hero .hero-text h1 {
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -1.5px;
  margin: 16px 0 20px;
}
html.fluid-on .fl-hero .hero-text p { font-size: 1.14rem; line-height: 1.6; margin-bottom: 30px; }
html.fluid-on .fl-hero .hero-cta { gap: 14px; }
html.fluid-on .fl-hero .btn-primary,
html.fluid-on .fl-hero .btn-outline { font-size: 1.02rem; padding: 16px 30px; }
html.fluid-on .fl-hero .hero-trust { margin-top: 34px; gap: 26px; }
html.fluid-on .fl-hero .hero-trust span { font-size: .95rem; }
html.fluid-on .fl-hero .hero-trust svg { width: 17px; height: 17px; }
html.fluid-on .fl-hero .fl-subjects { margin-top: 26px; }

html.fluid-on .fl-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html.fluid-on .fl-scene > * { position: absolute; }
html.fluid-on .fl-folder {
  width: 172px; height: 122px; left: -26px; top: 18px; transform: rotate(-8deg); border-radius: 16px;
  background: linear-gradient(160deg, #f9bc4e, #dd952c 72%);
  box-shadow:
    inset 0 3px 5px rgba(255, 255, 255, 0.55),
    inset 0 -12px 20px rgba(150, 90, 0, 0.34),
    0 22px 40px rgba(200, 140, 30, 0.32);
}
html.fluid-on .fl-folder::before {
  content: ""; position: absolute; top: -17px; left: 16px; width: 74px; height: 25px;
  border-radius: 11px 11px 0 0; background: linear-gradient(180deg, #fbca6b, #eda32f);
}
html.fluid-on .fl-orb {
  width: 74px; height: 74px; right: 6px; top: -20px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #dff4ec 45%, #8fd9bd);
  box-shadow: inset 0 -9px 15px rgba(30, 140, 110, 0.3), 0 18px 30px rgba(30, 140, 110, 0.24);
}
html.fluid-on .fl-tile {
  width: 96px; height: 96px; right: -22px; bottom: 26px; transform: rotate(10deg); border-radius: 24px;
  background: linear-gradient(140deg, rgba(80, 120, 240, 0.9), rgba(18, 18, 74, 0.97));
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 3px 8px rgba(255, 255, 255, 0.55),
    inset 0 -12px 20px rgba(10, 14, 60, 0.6),
    0 22px 38px rgba(26, 26, 94, 0.42);
}
html.fluid-on .fl-tile svg { width: 46px; height: 46px; }
html.fluid-on .fl-sweep {
  left: -14%; top: 42%; width: 128%; height: 46%; transform: rotate(-9deg); border-radius: 50%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.7) 50%, rgba(195, 236, 236, 0.35));
  border-top: 2px solid rgba(255, 255, 255, 0.95);
}
/* The sample question card has moved out of the hero, so the scene is the whole
   visual now and needs its own height rather than borrowing the card's. */
html.fluid-on .hero-visual { position: relative; min-height: 300px; }
html.fluid-on .hero-visual .fl-scene { position: absolute; inset: 0; }

/* The same objects at home-hero size. The folder leads, sitting on a white
   shelf, with the bookmark tucked behind its top edge. */
html.fluid-on .fl-hero .hero-visual { width: 460px; min-height: 440px; }
html.fluid-on .fl-hero .fl-folder {
  width: 264px; height: 194px; left: 6%; top: 6%; transform: rotate(-3deg); border-radius: 22px;
}
html.fluid-on .fl-hero .fl-folder::before {
  top: -25px; left: 22px; width: 112px; height: 35px; border-radius: 15px 15px 0 0;
}
/* Bookmark: a rounded tab with a notch cut out of its foot, sitting on the
   folder face and overhanging its top edge. Sized in percentages of the folder
   so the pair scales together at every breakpoint. */
html.fluid-on .fl-ribbon {
  position: absolute; top: -30%; right: 13%; width: 22%; height: 62%; z-index: 1;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(150deg, #5b78ea, #2b3eaf 78%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.4), 0 14px 24px rgba(26, 26, 94, 0.28);
}
html.fluid-on .fl-hero .fl-sweep {
  left: -14%; top: 42%; width: 128%; height: 60%; transform: rotate(-4deg);
  background: radial-gradient(64% 74% at 38% 30%, #fff, rgba(255, 255, 255, 0.82) 54%, rgba(228, 243, 246, 0.3));
  border-top: 2.5px solid #fff;
  box-shadow: 0 -14px 30px rgba(255, 255, 255, 0.7);
}
html.fluid-on .fl-hero .fl-orb { width: 88px; height: 88px; right: 2%; top: 0; }
html.fluid-on .fl-hero .fl-tile { width: 106px; height: 106px; right: -4%; top: 34%; bottom: auto; }
html.fluid-on .fl-hero .fl-tile svg { width: 50px; height: 50px; }

/* Floating proof card. Decorative, inside the aria-hidden scene, so it is an
   illustration of the product rather than a live reading. */
html.fluid-on .fl-stat {
  right: 2%; bottom: 6%;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px 14px 14px;
  border-radius: 18px;
  background: var(--fl-glass-strong);
  border: 1.5px solid var(--fl-hairline);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), 0 18px 34px rgba(26, 26, 94, 0.16);
}
html.fluid-on .fl-stat b {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-size: 1.06rem; color: #fff;
  background: linear-gradient(160deg, #43b183, #1e7d54 74%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -6px 10px rgba(0, 60, 35, 0.3);
}
html.fluid-on .fl-stat > span {
  display: flex; flex-direction: column; line-height: 1.32;
  font-size: .88rem; color: var(--text-mid);
}
html.fluid-on .fl-stat strong { font-family: 'Poppins', sans-serif; font-size: .98rem; color: var(--navy); }

/* Stacked, the hero is the whole first screen, so everything below it is a
   scroll away. Keep it compact enough that the try-one card is reachable in one
   flick rather than two. */
@media (max-width: 900px) {
  html.fluid-on .fl-hero { padding: 20px 24px 30px; }
  html.fluid-on .fl-hero .hero-eyebrow { font-size: .8rem; padding: 8px 16px; margin-bottom: 4px; }
  html.fluid-on .fl-hero .hero-text h1 { font-size: clamp(1.95rem, 7.4vw, 2.5rem); letter-spacing: -.8px; margin: 10px 0 12px; }
  html.fluid-on .fl-hero .hero-text p { font-size: .98rem; line-height: 1.55; margin-bottom: 18px; }
  html.fluid-on .fl-hero .btn-primary,
  html.fluid-on .fl-hero .btn-outline { font-size: .9rem; padding: 12px 18px; }
  html.fluid-on .fl-hero .hero-trust { margin-top: 18px; gap: 8px 16px; }
  html.fluid-on .fl-hero .hero-trust span { font-size: .8rem; }
  html.fluid-on .fl-hero .hero-trust svg { width: 14px; height: 14px; }
  html.fluid-on .fl-hero .fl-subjects { margin-top: 16px; }
  /* Stacked, the visual gets the full column width and the objects drift to
     opposite edges. Cap it so they stay a group. */
  html.fluid-on .fl-hero .hero-visual { width: 100%; max-width: 440px; margin: 0 auto; min-height: 236px; }
  html.fluid-on .fl-hero .fl-folder { width: 168px; height: 122px; }
  html.fluid-on .fl-hero .fl-folder::before { top: -17px; left: 15px; width: 72px; height: 24px; }
  html.fluid-on .fl-hero .fl-orb { width: 56px; height: 56px; }
  html.fluid-on .fl-hero .fl-tile { width: 70px; height: 70px; right: 0; }
  html.fluid-on .fl-hero .fl-tile svg { width: 32px; height: 32px; }
  html.fluid-on .fl-stat { right: 0; bottom: 0; padding: 10px 15px 10px 10px; gap: 10px; border-radius: 15px; }
  html.fluid-on .fl-stat b { width: 34px; height: 34px; font-size: .86rem; border-radius: 10px; }
  html.fluid-on .fl-stat strong { font-size: .84rem; }
  html.fluid-on .fl-stat > span { font-size: .76rem; }
}

/* The card in its own band under the hero: one column, centred, the width of a
   comfortable reading measure rather than a 380px sidebar. */
html.fluid-on .tryone-band { padding: 8px 24px 34px; }
html.fluid-on .tryone-band .hero-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--fl-glass);
  background-image: linear-gradient(150deg, rgba(250, 242, 226, 0.8), rgba(255, 255, 255, 0) 58%);
  border: 1.5px solid var(--fl-hairline);
  border-radius: var(--fl-radius);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), var(--fl-shadow);
}

/* Subject chips under the hero trust row */
html.fluid-on .fl-subjects { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
html.fluid-on .fl-subject {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 8px; border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: 0.82rem; color: var(--navy);
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid var(--fl-hairline);
  box-shadow: 0 6px 14px rgba(26, 26, 94, 0.12);
}
html.fluid-on .fl-subject:hover { box-shadow: 0 10px 20px rgba(26, 26, 94, 0.18); }
html.fluid-on .fl-subject i {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; background: var(--c1);
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.22));
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -6px 10px rgba(0, 0, 0, 0.16),
    0 8px 14px rgba(26, 26, 94, 0.2);
}
html.fluid-on .fl-subject svg { width: 15px; height: 15px; }

/* ══ 9. Phone only ══ */
@media (max-width: 760px) {
  /* The pill's generous side padding is right on a laptop but pushes buttons
     past the edge of a 375px screen, which in turn stretched the page and every
     fixed element measured against it. */
  html.fluid-on .btn-primary,
  html.fluid-on .btn-outline,
  html.fluid-on .btn-login,
  html.fluid-on .btn-enroll {
    padding: 11px 18px;
    max-width: 100%;
  }

  /* A sticky bar eats a fifth of a small screen, and when the menu opens the bar
     grows past the viewport, putting the tail of a long menu out of reach. */
  html.fluid-on .site-nav { position: static; }
  html.fluid-on .site-nav.open {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* A grid or flex item defaults to min-width:auto, so it grows to fit a nowrap
     scroll row instead of clipping it, and the whole page scrolls sideways. */
  html.fluid-on .layout,
  html.fluid-on .layout > *,
  html.fluid-on .dash-wrap,
  html.fluid-on .dash-wrap > *,
  html.fluid-on .main,
  html.fluid-on .content,
  html.fluid-on .rail,
  html.fluid-on .wrap { min-width: 0; }

  /* Carousels are a small-screen affordance: desktop keeps its grids. Targeted
     with :has() so a container converts only when it holds those cards, which
     also means the rule stops matching when a filter returns nothing and the
     page's own empty state still works. */
  html.fluid-on .grid:has(> .gcard),
  html.fluid-on .course-row:has(> .mc),
  html.fluid-on .tool-grid:has(> .act),
  html.fluid-on #boards:has(> .board-btn) {
    /* Visual Lab's JS writes style="display:grid" on its grid, and an inline
       style outranks any stylesheet. The :has() guard is what makes this safe. */
    display: flex !important;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    min-width: 0;
    max-width: 100%;
  }
  html.fluid-on .grid:has(> .gcard)::-webkit-scrollbar,
  html.fluid-on .course-row:has(> .mc)::-webkit-scrollbar,
  html.fluid-on .tool-grid:has(> .act)::-webkit-scrollbar,
  html.fluid-on #boards:has(> .board-btn)::-webkit-scrollbar { display: none; }

  /* The peek of the next card is the only honest hint that a row scrolls. */
  html.fluid-on .grid:has(> .gcard) > .gcard,
  html.fluid-on .course-row:has(> .mc) > .mc {
    flex: 0 0 82%; scroll-snap-align: start; margin-bottom: 0;
  }
  html.fluid-on .tool-grid:has(> .act) > .act { flex: 0 0 58%; scroll-snap-align: start; }
  html.fluid-on #boards:has(> .board-btn) > .board-btn {
    flex: 0 0 46%; width: auto; scroll-snap-align: start; margin-bottom: 0;
  }

  /* One scrolling line of filter pills instead of four wrapped ones. */
  html.fluid-on .chips:has(> .chip),
  html.fluid-on .cats:has(> .cat) {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    min-width: 0;
    max-width: 100%;
  }
  html.fluid-on .chips:has(> .chip)::-webkit-scrollbar,
  html.fluid-on .cats:has(> .cat)::-webkit-scrollbar { display: none; }
  html.fluid-on .chips > .chip,
  html.fluid-on .chips > .lbl,
  html.fluid-on .cats > .cat { flex: 0 0 auto; }

  /* The hero decoration would crowd a phone: keep the folder and orb, drop the
     rest, and let the sample question card lead. The scene is clipped to its box
     here because on a narrow screen the objects' negative offsets reach past the
     viewport and give the page a sideways scroll. Desktop has room, so it keeps
     the objects peeking out from behind the card. */
  html.fluid-on .fl-scene { overflow: hidden; }
  html.fluid-on .fl-tile { display: none; }
  html.fluid-on .fl-folder { width: 132px; height: 94px; left: -18px; top: 8px; }
  html.fluid-on .fl-orb { width: 54px; height: 54px; right: 2px; top: -14px; }
  html.fluid-on .fl-subjects { gap: 8px; }

  /* ── Bottom tab bar (injected by shared.js) ──
     Five destinations within thumb reach. It floats over the page, so the body
     gains matching bottom padding or the last card sits under it. */
  html.fluid-on.has-fl-tabs body { padding-bottom: 92px; }
  html.fluid-on .fl-tabs {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 300;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 4px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid var(--fl-hairline);
    box-shadow: 0 14px 30px rgba(26, 26, 94, 0.25);
  }
  html.fluid-on .fl-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    font-size: 0.63rem;
    font-weight: 800;
    color: var(--text-light);
    padding: 2px 0;
  }
  html.fluid-on .fl-tab .fl-ti {
    width: 42px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
  }
  html.fluid-on .fl-tab svg { width: 19px; height: 19px; }
  /* The WAJD Voice launcher is fixed to the bottom right and lands exactly on
     the last tab. Lift it clear of the bar. Its own stylesheet comes from
     voice.wajd.co.uk, so this override needs !important to win. */
  html.fluid-on .wv-launcher,
  html.fluid-on .wv-panel { bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }

  /* The signed-in pages carry their own bottom bar from the learner shell
     (.k-tabs). It is the same idea as .fl-tabs, so it gets the same finish:
     a floating frosted pill with a gold active state, rather than a flat white
     strip welded to the bottom edge. Its four destinations are the learner IA
     and are left alone; only the surface changes. */
  html.fluid-on .k-tabs {
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px;
    border-top: 0;
    border: 1.5px solid var(--fl-hairline);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 30px rgba(26, 26, 94, 0.25);
    padding-bottom: 0;
    overflow: hidden;
    /* The shell hard-codes four columns; the bar carries five destinations now,
       so let the columns divide by however many tabs there are. */
    grid-template-columns: repeat(5, 1fr);
  }
  /* Sign out belongs to the laptop rail only. On the phone bar it would be a
     sixth item squeezed into five columns. */
  html.fluid-on .k-rail-out { display: none; }
  html.fluid-on .k-tab { font-size: 0.63rem; min-width: 0; padding: 0 2px; }
  html.fluid-on .k-tab svg { width: 19px; height: 19px; }
  html.fluid-on .k-tab.on { color: var(--fl-gold-deep); }

  html.fluid-on .fl-tab.on { color: var(--fl-gold-deep); }
  html.fluid-on .fl-tab.on .fl-ti {
    background: linear-gradient(120deg, rgba(250, 242, 226, 0.95), rgba(255, 255, 255, 0.9));
    box-shadow: inset 0 0 0 1.5px var(--fl-hairline), 0 4px 10px rgba(245, 166, 35, 0.22);
  }

  /* Lift on hover reads as flicker under a finger. */
  @media (hover: none) {
    html.fluid-on .tile:hover,
    html.fluid-on .gcard:hover,
    html.fluid-on .btn-primary:hover,
    html.fluid-on .btn-login:hover,
    html.fluid-on .wajd-share-primary:hover { transform: none; }
  }
}

/* ══ 10. Desktop only ══ */
@media (min-width: 761px) {
  /* Wide screens get a flatter, calmer wash: the phone ribbons scaled up by vw
     alone become heavy bands across a 1920px monitor. */
  html.fluid-on body::before { height: 38vh; top: -12vh; width: 150vw; left: -25vw; }
  html.fluid-on body::after { height: 34vh; bottom: -14vh; width: 150vw; right: -25vw; }

  html.fluid-on .tile:hover,
  html.fluid-on .gcard:hover {
    box-shadow: 0 20px 38px rgba(26, 26, 94, 0.2);
  }
}

/* ══ 10b. Very wide screens ══
   The ribbon is an ellipse, so the wider the viewport the flatter the arc that
   crosses it. At 1920 the sheet edge sagged only 52px across the whole screen,
   which reads as a horizontal band rather than a curve. Making the ellipse
   narrower and taller restores the curve on big monitors. */
@media (min-width: 1600px) {
  html.fluid-on body::before {
    width: 120vw; left: -10vw;
    height: 52vh; top: -18vh;
  }
  html.fluid-on body::after {
    width: 120vw; right: -10vw;
    height: 48vh; bottom: -20vh;
  }
}

/* ══ 11. Print ══
   Certificates and papers get printed. Decoration must not follow them onto paper. */
@media print {
  html.fluid-on body::before,
  html.fluid-on body::after { display: none; }
  html.fluid-on body { background: #fff; }
  html.fluid-on .card,
  html.fluid-on .tile,
  html.fluid-on .gcard,
  html.fluid-on .tool-tile,
  html.fluid-on .amb,
  html.fluid-on .paper-card,
  html.fluid-on .subj-card,
  html.fluid-on .s-tile,
  html.fluid-on .subj,
  html.fluid-on .panel,
  html.fluid-on .enrol-card,
  html.fluid-on .unit,
  html.fluid-on .stage,
  html.fluid-on .narr,
  html.fluid-on .voice,
  html.fluid-on .cat-card,
  html.fluid-on .plan,
  html.fluid-on .wq-card,
  html.fluid-on .mc,
  html.fluid-on .hero-card,
  html.fluid-on .today-card,
  html.fluid-on .site-footer {
    background: #fff;
    background-image: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* The head's colour wash would print as a solid band of ink across the top of
     the sheet. The text on it is already dark, so only the background goes. */
  html.fluid-on .page-head {
    background: #fff;
    background-image: none;
    border-bottom: 1px solid #ccc;
  }
  /* Site chrome is navigation, not content: it costs ink and vertical space on
     paper and cannot be clicked once printed. */
  html.fluid-on .site-nav,
  html.fluid-on .wajd-announce,
  html.fluid-on .toast,
  html.fluid-on .fl-tabs,
  html.fluid-on .fl-scene { display: none; }
  html.fluid-on.has-fl-tabs body { padding-bottom: 0; }
  /* Gold pills print as heavy blocks; outline them instead. */
  html.fluid-on .btn-primary,
  html.fluid-on .btn-enroll {
    background: none;
    color: #000;
    box-shadow: none;
    border: 1px solid #666;
  }
}

/* ══ 12. Frosted glass where supported ══
   The solid fallbacks above stand on their own; this only adds translucency. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.fluid-on .site-nav,
  html.fluid-on .lesson-bar,
  html.fluid-on .nav-menu,
  html.fluid-on .nav-drop-menu,
  html.fluid-on .toast,
  html.fluid-on .wajd-modal-card {
    background-color: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  /* background-color, never the background shorthand: the shorthand resets
     background-image and would wipe the colour wash off the tiles. */
  html.fluid-on .card,
  html.fluid-on .tile,
  html.fluid-on .gcard,
  html.fluid-on .wq-card,
  html.fluid-on .hero-card,
  html.fluid-on .today-card,
  html.fluid-on .mc {
    background-color: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  html.fluid-on .site-footer {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}