/* ============================================================================
   Robocode lively layer: the main-site look on the sister sites.

   IDENTICAL COPY in robocode-franchise-configurator-site and
   robocode-partners-site. Change both, or the two sites drift apart again.

   Khaled, 16 Oct 2026: "redo the whole website, it looks boring and dull, it
   needs a full lively revamp as the others have". The devices below are ported
   from the main site (robocode-crm-frontend-app, src/pages/marketing/LabsPage,
   FtcPage, HomePage, PhotoMarquee, BbcFeature, StepNumber), whose look is what
   robocode.uk shows.

   Rules this file keeps, because the build checks and the tools depend on them:
   - It is linked by the generated pages only. The Build and Numbers tools load
     robocode-brand.css after their own styles, so nothing here may live in that
     file: a token, radius or base rule there reaches the calculators.
   - New devices are opt-in classes (lv-*). Existing classes are only restyled
     where scoped under main, .site-header or .site-footer.
   - No brand token is redeclared, nothing reaches .tmap-*, .p2, .data-table td
     or the footer mailto: scripts/site_checks.py and territory_colours.py read
     those from robocode-brand.css alone, so a change here would pass unseen.
   - Every font size is on the site's one type scale (site_checks TYPE_SCALE).
   - One Air Force heading per page: the h1. Every other heading is Myriad bold,
     sentence case, as on the main site since 6 Oct.
   ========================================================================= */

/* Real Myriad Bold. The site shipped Regular only, so every bold was the
   browser's synthetic smear. Declared after the Regular face, so for weights
   600 to 900 this one wins. Not loaded by the tools (they never link this file),
   whose hundred-odd bold rules would otherwise reflow. */
@font-face {
  font-family: 'MyriadPro';
  src: url('/assets/MyriadPro-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   Headings
   ------------------------------------------------------------------------ */
/* The one Air Force heading, painted in the brand gradient (main site
   index.css .heading-brand). */
main .lv-h1 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: linear-gradient(to right, #006970, #b80080);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
main .lv-dark .lv-h1,
main .lv-hero .lv-h1 { background-image: linear-gradient(to right, #3efcff, #ff98f4); }

/* Section headings drop to Myriad bold, sentence case. */
main .section-h2,
main .statement-h2 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
main .statement-h2 { font-size: 2.25rem; }
@media (min-width: 768px) { main .statement-h2 { font-size: 3.125rem; } }
main .figure-num { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------------------
   Header: white and frosted from the first paint. The brand file makes it
   transparent at the top of the page, which put ink links on the dark hero.
   ------------------------------------------------------------------------ */
.site-header,
.site-header:not(.is-scrolled) {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 26, 31, 0.06);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(15, 26, 31, 0.35); }
.site-header .site-nav-links { gap: 1.5rem; }
@media (min-width: 1100px) { .site-header .site-nav-links { gap: 2rem; } }
.site-header .site-nav-links a { position: relative; color: rgba(15, 26, 31, 0.72); white-space: nowrap; }
/* With Home added the bar carries seven links, which wrap onto two lines and
   run into the logo from 900px (where the brand file shows them) until about
   1024px. Below 1024 the bar keeps the menu button instead. */
@media (min-width: 900px) and (max-width: 1023px) {
  .site-header .site-nav-links { display: none; }
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .nav-panel.is-open { display: block !important; }
}
.site-header .site-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 2px;
  border-radius: 2px; background: linear-gradient(to right, #00dcde, #ff00bf);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.site-header .site-nav-links a:hover::after,
.site-header .site-nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .site-nav-links a[aria-current="page"] { color: var(--color-cyan-900); }
.site-header .site-nav-links a.nav-home { color: var(--color-cyan-800); font-weight: 600; }
.site-header .nav-panel a.nav-home { color: var(--color-cyan-800); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Footer: logos in their own colours on white chips, and Codi.
   ------------------------------------------------------------------------ */
.site-footer { background: #0b1418; }
.site-footer .lv-footer-logos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.site-footer .lv-footer-logos span {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding: 0.375rem 0.625rem; border-radius: 0.75rem; background: #fff;
}
.site-footer .lv-footer-logos img { height: 1.75rem; width: auto; max-width: 5.5rem; object-fit: contain; }
.site-footer .lv-footer-codi { width: 4.5rem; height: auto; margin-top: 1.25rem; }

/* ---------------------------------------------------------------------------
   Dark bands: hero, middle moment, closer. Deep teal, a turquoise and a pink
   bloom, and the hex texture at 7% (LabsPage.tsx 168-236, 499-531).
   ------------------------------------------------------------------------ */
.lv-dark,
.lv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #003439;
  color: rgba(255, 255, 255, 0.78);
}
.lv-dark::before,
.lv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem circle at -8% -12%, rgba(0, 220, 222, 0.30), transparent 70%),
    radial-gradient(35rem circle at 102% 112%, rgba(255, 0, 191, 0.20), transparent 70%);
}
.lv-dark::after,
.lv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0l28 16v34L28 66 0 50V16z' fill='none' stroke='%2300dcde' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 100px;
}
/* A closer reverses the blooms, so the page's last dark moment does not
   repeat its first. */
.lv-dark.lv-flip::before {
  background:
    radial-gradient(32rem circle at 100% 0%, rgba(0, 220, 222, 0.32), transparent 70%),
    radial-gradient(30rem circle at 0% 100%, rgba(255, 0, 191, 0.24), transparent 70%);
}
.lv-dark h2, .lv-dark h3, .lv-dark h4,
.lv-hero h2, .lv-hero h3,
.lv-dark .section-h2, .lv-dark .card-h3, .lv-dark .item-h3 { color: #fff; }
.lv-dark .lead, .lv-dark .p1, .lv-hero .p1, .lv-hero .lead { color: rgba(255, 255, 255, 0.8); }

.lv-hero { padding: 7.5rem 0 4rem; }
@media (min-width: 768px) { .lv-hero { padding: 9rem 0 5.5rem; } }
.lv-hero-sm { padding-bottom: 3.5rem; }
@media (min-width: 768px) { .lv-hero-sm { padding: 8.5rem 0 4.5rem; } }
.lv-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .lv-hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: 4rem; } }
.lv-hero-grid > * { min-width: 0; }
.lv-hero .lv-sub { color: rgba(255, 255, 255, 0.68); }
.lv-hero .lv-sub strong { color: #fff; }

/* Secondary button on dark (main site: ring-1 ring-paper/25). */
.lv-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; padding: 0.875rem 1.75rem; font-size: 1rem; font-weight: 600;
  color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.lv-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }

/* Our drawn arrow on a button, in place of a typed one (Khaled, 16 Oct 2026),
   from the Doodle controls: white-filled on pink and teal buttons, teal-filled
   on outline and white ones. Smooth scaling: these are drawings, not pixels. */
.btn-arrow { display: block; flex: none; width: 0.875rem; height: 0.875rem; }

/* Codi, small: one corner of the homepage hero. */
.lv-codi { position: absolute; width: 5.5rem; height: auto; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)); }
.lv-codi-hero { right: -0.75rem; top: -2.75rem; transform: rotate(8deg); }
@media (max-width: 639px) { .lv-codi { width: 4rem; } .lv-codi-hero { right: 0.25rem; top: -2.25rem; } }

/* ---------------------------------------------------------------------------
   Tricolour media frame (FtcPage.tsx 250-266) with a soft glow behind it.
   ------------------------------------------------------------------------ */
.lv-frame {
  position: relative;
  border-radius: 1.6rem;
  padding: 6px;
  background: linear-gradient(to bottom right, #04e7e7, #ff58ea, #ffb371);
  box-shadow: 0 40px 80px -40px rgba(255, 0, 191, 0.45);
}
.lv-dark .lv-frame, .lv-hero .lv-frame { box-shadow: 0 40px 80px -40px rgba(0, 220, 222, 0.45); }
.lv-frame-inner { position: relative; border-radius: 1.25rem; overflow: hidden; background: #0f1a1f; }
.lv-frame-inner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-frame-paper { background: #fff; padding: 1.5rem; }
@media (min-width: 768px) { .lv-frame-paper { padding: 2rem; } }
.lv-glow { position: relative; isolation: isolate; }
.lv-glow::before {
  content: ""; position: absolute; inset: -1rem; z-index: -1; border-radius: 3rem;
  background: linear-gradient(to bottom right, rgba(62, 252, 255, 0.4), rgba(255, 88, 234, 0.2), rgba(255, 179, 113, 0.3));
  filter: blur(48px);
}
.lv-ratio-16x9 { aspect-ratio: 16 / 9; }
.lv-ratio-4x3 { aspect-ratio: 4 / 3; }
.lv-ratio-4x5 { aspect-ratio: 4 / 5; }
.lv-tag {
  position: absolute; left: 0.875rem; bottom: 0.875rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 9999px; padding: 0.375rem 0.75rem; background: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem; font-weight: 600; color: var(--color-ink);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------------
   Film: poster first, plays muted once on screen (site.js), tap to pause,
   sound on request. No autoplay attribute, which would override preload=none.
   ------------------------------------------------------------------------ */
.lv-film { position: relative; }
.lv-film video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0f1a1f; cursor: pointer; }
.lv-film-btn {
  position: absolute; right: 0.875rem; bottom: 0.875rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-width: 2.75rem; height: 2.75rem; padding: 0 0.875rem; border: 0; border-radius: 9999px;
  background: rgba(15, 26, 31, 0.66); color: #fff; font-size: 0.875rem; font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.lv-film-btn:hover { background: rgba(15, 26, 31, 0.82); }
.lv-film-btn svg, .lv-film-btn img { width: 1.125rem; height: 1.125rem; display: block; flex: none; }
.lv-film-play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 4.5rem; height: 4.5rem; border-radius: 9999px; border: 0;
  background: rgba(255, 255, 255, 0.92); color: #003439; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
}
.lv-film.is-still .lv-film-play { display: inline-flex; }
.lv-film-play svg, .lv-film-play img { width: 1.75rem; height: 1.75rem; margin-left: 0.25rem; display: block; }

/* ---------------------------------------------------------------------------
   Dark photo strip (PhotoMarquee.tsx). Uses the existing [data-marquee]
   script; this only dresses it.
   ------------------------------------------------------------------------ */
.lv-strip {
  position: relative; overflow: hidden; background: #0f1a1f; padding: 2rem 0;
}
@media (min-width: 768px) { .lv-strip { padding: 2.5rem 0; } }
.lv-strip::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background: radial-gradient(120% 100% at 50% 0%, rgba(0, 220, 222, 0.22) 0%, transparent 60%);
}
.lv-strip .marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
@media (min-width: 768px) {
  .lv-strip .marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
  }
}
.lv-strip .marquee-track img {
  width: 13rem; height: 9rem; border-radius: 0.75rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) { .lv-strip .marquee-track img { width: 16rem; height: 11rem; } }
.lv-strip-light { background: transparent; padding: 0; }
.lv-strip-light::before { display: none; }
.lv-strip-light .marquee-track img { box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.06); }

/* ---------------------------------------------------------------------------
   Pink numbers band (FtcPage.tsx 173-191).
   ------------------------------------------------------------------------ */
.lv-numbers { background: linear-gradient(to bottom, #fff0fd, rgba(255, 240, 253, 0.35)); }
.lv-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .lv-stats { gap: 1.25rem; } }
.lv-stat {
  border-radius: 1.5rem; background: #fff; padding: 1.5rem 1.25rem; text-align: center;
  box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.05), 0 10px 30px -18px rgba(184, 0, 128, 0.25);
}
.lv-stat-num { display: block; font-weight: 700; font-size: 1.75rem; line-height: 1; color: #006970; letter-spacing: -0.02em; }
@media (min-width: 640px) { .lv-stat-num { font-size: 3.125rem; } }
@media (min-width: 1024px) { .lv-stat-num { font-size: 3.625rem; } }
.lv-stat-label { display: block; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.3; color: var(--color-ink-soft); }
@media (min-width: 640px) { .lv-stat-label { font-size: 0.9375rem; } }
@media (max-width: 639px) {
  /* Three across on a phone: "22,000+" broke before the "+" at 390px. */
  .lv-stat { padding: 1rem 0.25rem; border-radius: 1rem; }
  .lv-stat-num { font-size: 1.5rem; }
}

/* Accreditation marks in full colour, on one row under the numbers. */
.lv-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.lv-mark {
  display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 1rem; background: #fff;
  padding: 0.625rem 1rem; box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.06);
}
.lv-mark img { height: 2.25rem; width: auto; max-width: 6.5rem; object-fit: contain; }
.lv-mark span { font-size: 0.875rem; font-weight: 600; color: var(--color-ink-soft); }

/* Full-colour logo strip that drifts (AccreditationStrip.tsx). */
.lv-logo-strip { overflow: hidden; }
.lv-logo-strip .marquee-track { align-items: center; gap: 3rem; }
.lv-logo-strip .marquee-track img { width: auto; height: 3rem; max-width: 9rem; object-fit: contain; border-radius: 0; box-shadow: none; }
@media (min-width: 768px) { .lv-logo-strip .marquee-track { gap: 4.5rem; } .lv-logo-strip .marquee-track img { height: 3.5rem; } }

/* ---------------------------------------------------------------------------
   Lifted card with a corner bloom (LabsPage.tsx 296-311). The bloom is a
   background, not a pseudo-element, so a card can carry an overhanging pill
   ("Most chosen") without overflow clipping it.
   ------------------------------------------------------------------------ */
.lv-card {
  position: relative;
  border-radius: 1.5rem;
  padding: 1.75rem;
  background:
    radial-gradient(11rem circle at calc(100% + 1.5rem) -1.5rem, rgba(0, 220, 222, 0.16), transparent 70%),
    #fff;
  box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.05), 0 10px 30px -18px rgba(15, 26, 31, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lv-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.06), 0 18px 40px -20px rgba(15, 26, 31, 0.22); }
@media (min-width: 768px) { .lv-card { padding: 2rem; } }
.lv-card-pink { background: radial-gradient(11rem circle at calc(100% + 1.5rem) -1.5rem, rgba(255, 0, 191, 0.12), transparent 70%), #fff; }
.lv-card-tan { background: radial-gradient(11rem circle at calc(100% + 1.5rem) -1.5rem, rgba(255, 151, 82, 0.18), transparent 70%), #fff; }
/* A card centred on its drawing: the icon or number above the middle of the heading, every line
   centred (Khaled, 16 Oct 2026: "centre these quickly with their icons"). */
.lv-card-centre { text-align: center; }
.lv-card-centre > .lv-num,
.lv-card-centre > .card-icon-brand { margin-left: auto; margin-right: auto; }
.lv-dark .lv-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
/* A white card on a dark band or hero takes back the ink: text, tables, headings. */
.lv-dark .lv-card,
.lv-dark .lv-stepcard,
.lv-dark .robo-card,
.lv-hero .lv-card,
.lv-hero .lv-stepcard,
.lv-hero .robo-card { color: var(--color-ink); }
.lv-dark .lv-card h2,
.lv-dark .lv-card h3,
.lv-dark .lv-card h4,
.lv-dark .lv-card .card-h3,
.lv-dark .lv-card .item-h3,
.lv-dark .lv-stepcard h2,
.lv-dark .lv-stepcard h3,
.lv-dark .lv-stepcard h4,
.lv-dark .lv-stepcard .card-h3,
.lv-dark .lv-stepcard .item-h3,
.lv-dark .robo-card h2,
.lv-dark .robo-card h3,
.lv-dark .robo-card h4,
.lv-dark .robo-card .card-h3,
.lv-dark .robo-card .item-h3,
.lv-hero .lv-card h2,
.lv-hero .lv-card h3,
.lv-hero .lv-card h4,
.lv-hero .lv-card .card-h3,
.lv-hero .lv-card .item-h3,
.lv-hero .lv-stepcard h2,
.lv-hero .lv-stepcard h3,
.lv-hero .lv-stepcard h4,
.lv-hero .lv-stepcard .card-h3,
.lv-hero .lv-stepcard .item-h3,
.lv-hero .robo-card h2,
.lv-hero .robo-card h3,
.lv-hero .robo-card h4,
.lv-hero .robo-card .card-h3,
.lv-hero .robo-card .item-h3 { color: var(--color-dark); }
.lv-dark .lv-card .p1,
.lv-dark .lv-card .lead,
.lv-dark .lv-stepcard .p1,
.lv-dark .lv-stepcard .lead,
.lv-dark .robo-card .p1,
.lv-dark .robo-card .lead,
.lv-hero .lv-card .p1,
.lv-hero .lv-card .lead,
.lv-hero .lv-stepcard .p1,
.lv-hero .lv-stepcard .lead,
.lv-hero .robo-card .p1,
.lv-hero .robo-card .lead { color: var(--color-ink-soft); }
/* The enquiry form is a white .robo-card; inside the frame it loses its own
   shadow and takes the frame's inner radius. */
.lv-frame > .robo-card { border-radius: 1.25rem; box-shadow: none; }
/* The featured card wears the tricolour as its border. */
.lv-card-featured {
  border: 3px solid transparent;
  background:
    radial-gradient(11rem circle at calc(100% + 1.5rem) -1.5rem, rgba(255, 0, 191, 0.12), transparent 70%) padding-box,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to bottom right, #04e7e7, #ff58ea, #ffb371) border-box;
  box-shadow: 0 30px 60px -30px rgba(255, 0, 191, 0.4);
}
/* Our step numbers are Doodle (Khaled, 16 Oct 2026: "Doodle everything"):
   hand-drawn, so they scale smoothly, never as pixel cells. */
.lv-num { display: block; width: 3.25rem; height: 3.25rem; }
.lv-num-sm { width: 2.5rem; height: 2.5rem; }

/* Tier cards are drawn by script with .card; on the lively pages they lift. */
main .lv-tiers > .card {
  border: 0;
  border-radius: 1.5rem;
  background: radial-gradient(11rem circle at calc(100% + 1.5rem) -1.5rem, rgba(0, 220, 222, 0.14), transparent 70%), #fff;
  box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.05), 0 10px 30px -18px rgba(15, 26, 31, 0.16);
}
main .lv-tiers > .card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.06), 0 22px 46px -22px rgba(15, 26, 31, 0.26); }
main .lv-tiers > .card.card-featured {
  border: 3px solid transparent;
  background:
    radial-gradient(11rem circle at calc(100% + 1.5rem) -1.5rem, rgba(255, 0, 191, 0.14), transparent 70%) padding-box,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to bottom right, #04e7e7, #ff58ea, #ffb371) border-box;
  box-shadow: 0 30px 60px -30px rgba(255, 0, 191, 0.45);
}

/* ---------------------------------------------------------------------------
   Photo cards (LabsPage.tsx 328-354): 16:10, teal shade, title on the photo.
   ------------------------------------------------------------------------ */
.lv-photos { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .lv-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lv-photos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-photo {
  position: relative; display: block; overflow: hidden; border-radius: 1.5rem; margin: 0;
  background: #0f1a1f; box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lv-photo:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(15, 26, 31, 0.35); }
.lv-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 0.5s ease; }
.lv-photo:hover img { transform: scale(1.03); }
.lv-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 52, 57, 0.78), rgba(0, 52, 57, 0.1) 55%, transparent);
}
.lv-photo figcaption {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; z-index: 1;
  color: #fff; font-weight: 700; font-size: 1.125rem; line-height: 1.3;
}
.lv-photo figcaption small { display: block; margin-top: 0.25rem; font-weight: 400; font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); }
@media (min-width: 1024px) { .lv-photo-wide { grid-column: 1 / -1; } .lv-photo-wide img { aspect-ratio: 3 / 1; } }

/* ---------------------------------------------------------------------------
   Photo step cards (HowToStart.tsx): photo, a colour stripe, the Doodle
   number overlapping it.
   ------------------------------------------------------------------------ */
.lv-stepcards { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .lv-stepcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lv-stepcards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lv-stepcards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-stepcard {
  position: relative; overflow: hidden; border-radius: 1.5rem; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.05), 0 10px 30px -18px rgba(15, 26, 31, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lv-stepcard:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.06), 0 22px 46px -22px rgba(15, 26, 31, 0.26); }
.lv-stepcard > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.lv-stepcard-stripe { height: 6px; }
.lv-stripe-1 { background: #04e7e7; } .lv-stripe-2 { background: #ff58ea; } .lv-stripe-3 { background: #ffc43d; }
.lv-stripe-4 { background: #ff9752; } .lv-stripe-5 { background: #04e7e7; }
.lv-stepcard-body { position: relative; padding: 2.25rem 1.25rem 1.5rem; }
.lv-stepcards-5 .card-h3 { font-size: 1.25rem; }
.lv-stepcard-body .lv-num { position: absolute; top: -1.75rem; left: 1.25rem; width: 3.25rem; height: 3.25rem; filter: drop-shadow(0 6px 10px rgba(15, 26, 31, 0.2)); }

/* Doodle numbers on an existing .steps list: the image replaces the counter. */
.lv-numbered .step::before { display: none; }
.lv-numbered .step { padding-left: 3.75rem; min-height: 2.75rem; }
.lv-numbered .step > .lv-num { position: absolute; left: 0; top: -0.25rem; width: 2.75rem; height: 2.75rem; }
@media (max-width: 640px) { .lv-numbered .step { padding-left: 3.5rem; } .lv-numbered .step > .lv-num { width: 2.5rem; height: 2.5rem; } }

/* ---------------------------------------------------------------------------
   Pink film band with the BBC pill (BbcFeature.tsx 30-47).
   ------------------------------------------------------------------------ */
.lv-bbc { background: linear-gradient(to bottom, #fff0fd, rgba(255, 240, 253, 0.5), #fff); }
.lv-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px; background: #fff; padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 600; color: var(--color-ink);
  box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.08), 0 8px 20px -12px rgba(15, 26, 31, 0.25);
}
.lv-pill img { height: 1.125rem; width: auto; }

/* ---------------------------------------------------------------------------
   Tan band, once a page (FtcRoute.tsx 33-38).
   ------------------------------------------------------------------------ */
.lv-tan {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--color-surface-tan);
  border-block: 1px solid rgba(255, 211, 168, 0.6);
}
.lv-tan::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 34rem; height: 34rem; right: -10rem; top: -12rem; border-radius: 9999px;
  background: radial-gradient(circle, rgba(255, 151, 82, 0.32), transparent 70%);
}

/* A pale turquoise band with a soft bloom, for the light moments between. */
.lv-cloud {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(to bottom, #edfffe, #fff);
}
.lv-cloud::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 36rem; height: 36rem; left: -12rem; top: -14rem; border-radius: 9999px;
  background: radial-gradient(circle, rgba(0, 220, 222, 0.22), transparent 70%);
}

/* Full-bleed photo band: a lighter scrim than the brand file's, because the
   photo is the point. Text stays white on at least 4.5:1 (teal end 0.9). */
.lv-photo-band .cta-band-overlay {
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0, 52, 57, 0.86), rgba(0, 52, 57, 0.5) 100%),
    linear-gradient(to right, rgba(0, 52, 57, 0.25), rgba(95, 0, 62, 0.45));
}

.lv-photo-band { color: rgba(255, 255, 255, 0.86); }
.lv-photo-band .section-h2, .lv-photo-band .statement-h2 { color: #fff; }
.lv-photo-band .lead, .lv-photo-band .p1, .lv-photo-band .p2 { color: rgba(255, 255, 255, 0.86); }
.lv-link-light { color: #ff98f4; font-weight: 600; }

/* FAQ on the lively pages: lifted rows, pink plus. */
main .lv-faq details { border: 0; border-radius: 1rem; box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.06), 0 8px 24px -18px rgba(15, 26, 31, 0.2); }
main .lv-faq details[open] { box-shadow: 0 0 0 2px rgba(0, 220, 222, 0.35), 0 16px 32px -20px rgba(15, 26, 31, 0.25); }
main .lv-faq summary::after { color: var(--color-pink-700); font-weight: 700; }

/* Launch card on a dark band keeps its ink copy readable. */
.lv-dark .lv-card .launch-list strong { color: var(--color-ink); }

/* Map card: white, so the territory colours keep the contrast they were
   measured against (territory_colours.py measures on #fff and #f0f7f7). */
.lv-map-card { border-radius: 1.5rem; background: #fff; padding: 1rem;
  box-shadow: 0 0 0 1px rgba(15, 26, 31, 0.05), 0 20px 50px -30px rgba(15, 26, 31, 0.3); }
@media (min-width: 768px) { .lv-map-card { padding: 1.5rem; } }

/* ---------------------------------------------------------------------------
   Doodle icons and controls in the shared chrome (Khaled, 16 Oct 2026:
   "Doodle everything ... it should be size 40"). The menu button draws the
   Doodle menu; a launch-list icon is a 40px Doodle icon on its own, without
   the old chip behind a line icon.
   ------------------------------------------------------------------------ */
.site-header .nav-toggle img { width: 1.5rem; height: 1.5rem; display: block; }
main .launch-list > li { grid-template-columns: 2.5rem minmax(0, 1fr); }
main .launch-icon { width: 2.5rem; height: 2.5rem; background: none; box-shadow: none; border-radius: 0; }
main .launch-icon img { width: 2.5rem; height: 2.5rem; display: block; }

/* ---------------------------------------------------------------------------
   Reduced motion: the brand file's block lists its own classes only.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .lv-card, .lv-photo, .lv-photo img, .lv-stepcard, .lv-btn-ghost,
  .site-header .site-nav-links a::after,
  main .lv-tiers > .card { transition: none !important; }
  .lv-card:hover, .lv-photo:hover, .lv-photo:hover img, .lv-stepcard:hover,
  main .lv-tiers > .card:hover, .lv-btn-ghost:hover { transform: none !important; }
}