/* =====================================================================
   Leisure Lakes Bikes - Christmas Club landing block

   Uses the same design system as the Avinox e-bikes collection block:
   near-black base, cool grey ink ramp, brand orange accent, translucent
   glass cards and centred section heads. Every rule is scoped under
   .llcc-page so it cannot leak into the surrounding page.

   This file must stay in assets/ alongside the images: the url() references
   below are siblings, not assets/*, because they resolve relative to this
   stylesheet rather than to the page.
   ===================================================================== */
   .llcc-page {
    /* Ink ramp and radii carried over from the Avinox block. */
    --llcc-ink-950: #050608;
    --llcc-ink-900: #0a0c12;
    --llcc-ink-800: #11141c;
    --llcc-ink-700: #1a1e29;
    --llcc-ink-600: #262b39;
    /* Every use of this token is small text (10-13px labels, table headers,
       notes). The original #5a6275 measured 3.3:1 on flat ink-950 and 2.7:1
       where it crosses the artwork, both under WCAG AA. This is the lightest
       step that clears 4.5:1 in both places while staying dimmer than ink-300. */
    --llcc-ink-400: #828a9e;
    --llcc-ink-300: #8a92a6;
    --llcc-ink-200: #b9c0d0;
    --llcc-ink-100: #e6e9f0;
  
    /* Brand orange, and the red used for the badge treatment. */
    --llcc-accent: #e11d2e;
    --llcc-accent-lift: #b43a31;
    --llcc-flag: #e11d2e;
  
    --llcc-radius-sm: 12px;
    --llcc-radius: 18px;
    --llcc-radius-lg: 28px;
  
    /* The live block inherits the site font. Named here so the local
       preview matches what futura-pt gives it on leisurelakesbikes.com. */
    font-family: futura-pt, "Futura", "Century Gothic", "Segoe UI", Arial, sans-serif;
    background: var(--llcc-ink-950);
    color: var(--llcc-ink-100);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  
  .llcc-page *,
  .llcc-page *::before,
  .llcc-page *::after { box-sizing: border-box; }
  
  /* The site stylesheet styles bare p, strong and form controls, and some
     templates centre their content. These resets must stay above the
     component rules, which override them where a component needs it. */
  .llcc-page p {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.6;
    text-align: left;
  }
  
  .llcc-page h1,
  .llcc-page h2,
  .llcc-page h3,
  .llcc-page h4 {
    margin: 0;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -.02em;
    text-align: left;
  }
  
  .llcc-page strong,
  .llcc-page b {
    color: inherit;
    font-family: inherit;
    font-weight: 600;
    font-style: inherit;
  }
  
  .llcc-page a {
    color: inherit;
    text-decoration: none;
  }
  
  /* Margin is zeroed here on purpose. A 32px bottom margin on this reset
     would sit under every image and every Iconify glyph (the web component
     injects an svg), including the hero stats and the bike cards. The logo
     sets its own spacing. */
  .llcc-page img,
  .llcc-page svg {
    display: block;
    max-width: 100%;
    margin: 0;
  }
  .llcc-page iconify-icon { display: block; margin: 0; }
  
  .llcc-page input,
  .llcc-page select,
  .llcc-page textarea {
    clear: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  
  .llcc-page ol,
  .llcc-page ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  /* The hero stats are a description list, so the browser default indent on dd
     and any site styling of these bare elements have to be cleared too. */
  /* No `color` here on purpose: this reset is more specific than the single-class
     rules that style the stat labels inside these elements, so setting colour
     would override them and flatten the label/value hierarchy. */
  .llcc-page dl,
  .llcc-page dt,
  .llcc-page dd {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    text-align: left;
  }
  
  /* ---- Layout primitives ---- */
  
  .llcc-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  .llcc-section {
    position: relative;
    padding: 96px 0;
  }
  
  .llcc-section-head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  
  .llcc-section-head p,
  .llcc-section-head h2 { text-align: center; }
  
  .llcc-eyebrow {
    display: inline-block;
    color: var(--llcc-accent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
  }
  
  .llcc-section-title {
    margin-top: 12px;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.05;
    text-wrap: balance;
  }
  
  .llcc-section-lead {
    margin-top: 18px;
    color: var(--llcc-ink-200);
    font-size: 1.075rem;
    text-wrap: balance;
  }
  
  .llcc-glass {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--llcc-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  
  .llcc-glass--strong {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--llcc-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  
  /* Small uppercase label used on cards, stats and table rows. */
  .llcc-microlabel {
    color: var(--llcc-ink-400);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  
  /* ---- Buttons ---- */
  
  .llcc-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
  }
  
  .llcc-btn:hover { transform: translateY(-1px); }
  
  .llcc-btn--ghost {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #fff !important;
  }
  
  .llcc-btn--ghost:hover { border-color: rgba(255, 255, 255, .24); }
  
  /* The primary CTA from the Avinox block: orange gradient pill with a
     warm drop glow and an inset top highlight. */
  .llcc-cta-btn {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--llcc-accent) 0%, var(--llcc-accent-lift) 100%);
    box-shadow:
      0 18px 32px -16px rgba(232, 113, 10, .65),
      inset 0 1px 0 rgba(255, 255, 255, .22);
    color: #fff !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  }
  
  .llcc-cta-btn:hover {
    box-shadow:
      0 22px 40px -14px rgba(232, 113, 10, .75),
      inset 0 1px 0 rgba(255, 255, 255, .28);
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
  
  /* ---- Hero ---- */
  
  .llcc-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    overflow: hidden;
  }
  
  /* Two scrims sit over the pine artwork. The horizontal one is weighted to the
     left so the copy always lands on near-black; the vertical one fades the
     bottom edge into the page background so the section seam stays invisible. */
  .llcc-hero__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
      linear-gradient(180deg, rgba(5, 6, 8, .45) 0%, rgba(5, 6, 8, .15) 38%, rgba(5, 6, 8, .8) 84%, var(--llcc-ink-950) 100%),
      linear-gradient(100deg, rgba(5, 6, 8, .97) 0%, rgba(5, 6, 8, .94) 36%, rgba(5, 6, 8, .74) 62%, rgba(5, 6, 8, .42) 100%),
      url("xmas.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  
  .llcc-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
  }
  
  .llcc-hero__inner .llcc-hero__stats { text-shadow: none; }
  
  /* The Christmas Club lockup stands in for the eyebrow above the headline.
     The drop shadow lifts it off the hero artwork. Centred on auto side margins
     rather than text-align, since the reset makes it display: block.

     Scoped with .llcc-page so it outranks the `.llcc-page img` reset, which is
     a class plus an element and would otherwise win and reset these margins
     to 0 — dropping both the centring and the gap below. */
  .llcc-page .llcc-hero__logo {
    width: clamp(200px, 21vw, 290px);
    height: auto;
    margin: 0 auto 32px;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .55));
  }
  
  /* Adjacent to the logo, so this margin-top collapses with the logo's
     32px bottom — the visible gap is 32px, not 56px. Leave it at 0 so the
     logo owns the spacing. */
  .llcc-hero__title {
    margin-top: 0;
    font-size: clamp(2.75rem, 5.5vw, 4rem);
    font-weight: 600;
    line-height: .95;
    text-wrap: balance;
  }
  
  .llcc-hero__title span { display: block; }
  .llcc-hero__title em {
    color: var(--llcc-accent-lift);
    font-style: normal;
  }
  
  /* Held narrower than the 720px copy column on purpose, so the headline, the
     lead and the CTA row step inward in that order. The previous version ran the
     lead to 760px, which put three ragged edges at roughly the same width and
     made the dimmer supporting paragraph the widest thing in the hero. */
  .llcc-hero__lead {
    max-width: 620px;
    margin: 24px auto 0;
    text-wrap: balance;
  }
  
  .llcc-hero__lead p {
    color: #fff;
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    line-height: 1.5;
  }
  
  /* Any further paragraph drops to the quieter size. Needed as a rule rather
     than left to the reset: .llcc-page p zeroes the margin and would strand a
     second paragraph flush against the first. */
  .llcc-hero__lead p + p {
    margin-top: 16px;
    color: var(--llcc-ink-200);
    font-size: clamp(.95rem, 1.3vw, 1.075rem);
    line-height: 1.65;
  }
  
  .llcc-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 36px 0 0;
    gap: 14px;
  }
  
  /* The copy column runs to the width the headline needs and no further, then
     centres itself in the hero. */
  .llcc-hero__copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }
  
  /* The h1 and p resets both set text-align: left and match this specificity,
     so inheriting centre from the column above is not enough — these have to
     restate it, and rely on sitting later in the file. */
  .llcc-hero__copy h1,
  .llcc-hero__copy p { text-align: center; }
  
  /* The stat band deliberately breaks out past the copy column to span the full
     hero. The hairline makes that read as a separate footer rather than the copy
     block suddenly getting wider, and it anchors the bottom of the composition.
     Scoped with .llcc-page so the spacing outranks the description-list reset.

     Flex rather than equal grid columns: the five values range from "20" to
     "Delivered or collected", so on a 5x1fr grid the long one filled its cell
     while the number left most of its own empty, collapsing one gutter and
     opening another. Sizing each stat to its content and spacing the remainder
     with space-between makes every gutter identical instead. */
  .llcc-page .llcc-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    gap: 20px 24px;
  }
  
  /* Each value sits directly above its own label, with the icon in a fixed
     first column spanning both rows. Spanning matters: if the glyph sat in the
     flow instead, the label would indent under it rather than staying flush
     with the value it belongs to. */
  .llcc-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }
  
  /* Duotone glyphs, unlike the linear set used elsewhere on the page: at this
     size the second tone reads as a soft fill and keeps the band from looking
     like five hairline outlines. Decorative, so hidden from assistive tech —
     every icon just restates the value beside it. */
  .llcc-stat__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    color: var(--llcc-ink-400);
    font-size: 28px;
  }
  
  .llcc-stat__value {
    color: #fff;
    font-size: clamp(1.25rem, 1.7vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
    text-wrap: balance;
  }
  
  .llcc-stat__value span {
    margin-left: 4px;
    color: var(--llcc-ink-300);
    font-size: .65em;
    font-weight: 400;
  }
  
  .llcc-stat__label {
    color: var(--llcc-ink-400);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  
  /* ---- How it works: the two reservation routes ---- */
  
  /* The online and in-store journeys sit side by side so the two can be read
     against each other a step at a time. They collapse to a single column on
     narrower screens, which stacks them into two rows.
  
     There is no panel behind them, just a rule down the middle. The grid gap is
     zero on purpose: it keeps both columns an exact 1fr so the divider lands on
     the centre line, and the facing padding on each side does the job of the gap
     while holding the text off the rule. */
  .llcc-tracks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
    gap: 0;
  }
  
  .llcc-track:first-child { padding-right: 48px; }
  
  .llcc-track + .llcc-track {
    padding-left: 48px;
    border-left: 1px solid rgba(255, 255, 255, .1);
  }
  
  .llcc-track__head {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  
  /* Rounded icon tile, orange on a warm tint. */
  /* Bare accent glyphs, no tile chrome. The 44px box is kept so the icons stay
     aligned with the labels and headings that sit beside them, and the glyph is
     sized up to fill the space the border used to occupy. Without a border to
     define its edge the glyph is aligned to the start of the box rather than
     centred, so it sits flush with the text above and below it. */
  .llcc-icon-tile {
    display: grid;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    place-items: center start;
    color: var(--llcc-accent);
    font-size: 30px;
  }
  
  /* These four rules are scoped to .llcc-page so they outweigh the bare h3, p
     and ol resets near the top of this file. Those resets zero the margins and
     force colour to inherit, and an element plus a class beats a lone class, so
     without the extra scope the headings collapse against each other and the
     accent and ink-200 colours never land. */
  .llcc-page .llcc-track__title {
    margin-top: 22px;
    font-size: 1.25rem;
    font-weight: 600;
    text-wrap: balance;
  }
  
  .llcc-page .llcc-track__sub {
    margin-top: 6px;
    color: var(--llcc-accent-lift);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  
  /* Vertical timeline. The step number is a counter drawn in ::before and the
     connector is ::after, so the line can be dropped from the last step without
     leaving a stub hanging below it. */
  .llcc-page .llcc-timeline {
    margin-top: 26px;
    counter-reset: llcc-step;
  }
  
  .llcc-timeline > li {
    position: relative;
    counter-increment: llcc-step;
    padding-bottom: 24px;
    padding-left: 42px;
  }
  
  .llcc-timeline > li:last-child { padding-bottom: 0; }
  
  .llcc-timeline > li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: var(--llcc-ink-800);
    color: var(--llcc-accent);
    content: counter(llcc-step);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }
  
  .llcc-timeline > li:not(:last-child)::after {
    position: absolute;
    top: 34px;
    bottom: 4px;
    left: 13px;
    width: 1px;
    background: rgba(255, 255, 255, .1);
    content: "";
  }
  
  /* Nudged down 2px so the first line of the heading centres against the 26px
     number badge instead of sitting slightly above it. */
  .llcc-timeline__title {
    padding-top: 2px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
  }
  
  .llcc-page .llcc-timeline__body {
    margin-top: 6px;
    color: var(--llcc-ink-200);
    font-size: .9rem;
    line-height: 1.6;
  }
  
  .llcc-timeline__body a {
    text-decoration:underline
  }
  
  .llcc-timeline__body a:hover { text-decoration: underline; }
  
  /* Shared extras under both routes — store locator and delivery apply to either. */
  .llcc-track-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    margin-top: 40px;
  }
  
  .llcc-page .llcc-track-links a {
    color: var(--llcc-accent-lift);
    font-size: .9rem;
    font-weight: 600;
  }
  
  .llcc-track-links a:hover { text-decoration: underline; }
  
  /* ---- Payments showcase ---- */
  
  /* The hero artwork carries through behind this section to tie the two
     together. It fades to solid ink at both edges so the seams with the flat
     sections above and below stay invisible, and the scrim sits high because the
     glass panels are nearly transparent — whatever shows through the background
     also shows through them, behind their text. */
  #llcc-pay::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
      linear-gradient(180deg, var(--llcc-ink-950) 0%, rgba(5, 6, 8, .9) 20%, rgba(5, 6, 8, .9) 80%, var(--llcc-ink-950) 100%),
      url("xmas.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    content: "";
  }
  
  #llcc-pay > .llcc-container {
    position: relative;
    z-index: 1;
  }
  
  /* The calculator is much taller than the intro panel, so both cards sit at
     their natural height and align to the top rather than stretching. */
  .llcc-showcase {
    display: grid;
    grid-template-columns: 5fr 7fr;
    margin-top: 56px;
    gap: 24px;
    align-items: start;
  }
  
  /* Padding matches .llcc-calc so the two panel heads share a baseline now that
     they use the same title style. */
  .llcc-showcase__intro {
    display: flex;
    flex-direction: column;
    padding: 32px;
  }
  
  /* Deliberately identical to .llcc-calc__title so the two panel heads in this
     section read as a pair. This was the oversized Avinox "M2S" badge mark,
     which stopped earning its size once it held a phrase rather than a figure
     and lost its red fill. */
  .llcc-showcase__title {
    font-size: 1.4rem;
    font-weight: 600;
  }
  
  /* Mirrors .llcc-calc__note, the equivalent line under the other panel head. */
  .llcc-page .llcc-showcase__sub {
    margin-top: 10px;
    color: var(--llcc-ink-300);
    font-size: .875rem;
  }
  
  /* Body copy now the title is no longer twice its size. Left at the old
     1.4rem it would have tied with the title and read as a second heading. */
  .llcc-page .llcc-showcase__tagline {
    margin-top: 24px;
    color: var(--llcc-ink-200);
    font-size: 1rem;
    text-wrap: balance;
  }
  
  .llcc-showcase__points {
    display: flex;
    flex-direction: column;
    margin-top: 32px !important;
    gap: 18px;
  }
  
  .llcc-showcase__points li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
  }
  
  .llcc-showcase__points strong {
    display: block;
    color: #fff;
    font-size: 1rem;
  }
  
  /* Scoped to the text column. A bare `span` here also matched the icon tile,
     which is a sibling of that column, and overrode its colour and size. */
  .llcc-showcase__points div span {
    display: block;
    margin-top: 4px;
    color: var(--llcc-ink-300);
    font-size: .875rem;
    line-height: 1.55;
  }
  
  /* Same treatment as the table notes, and scoped past the .llcc-page a reset
     for the same reason: inherit would leave the link the same grey as the copy
     around it, so it would not read as a link at all. */
  .llcc-showcase__points div span a {
    color: var(--llcc-accent-lift);
    font-weight: 600;
  }
  
  .llcc-showcase__points div span a:hover { text-decoration: underline; }
  
  /* ---- Calculator ---- */
  
  .llcc-calc { padding: 32px; }
  
  .llcc-calc__title {
    font-size: 1.4rem;
    font-weight: 600;
  }
  
  .llcc-page .llcc-calc__note {
    margin-top: 10px;
    color: var(--llcc-ink-300);
    font-size: .875rem;
  }
  
  .llcc-calc-fields {
    display: grid;
    margin-top: 28px;
    gap: 24px;
  }
  
  .llcc-calc-row > label {
    display: block;
    color: var(--llcc-ink-400);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  
  .llcc-calc-hint {
    display: block;
    margin-top: 6px;
    color: var(--llcc-ink-300);
    font-size: .8125rem;
  }
  
  .llcc-calc-control {
    display: grid;
    grid-template-columns: 1fr 124px;
    margin-top: 14px;
    gap: 18px;
    align-items: center;
  }
  
  .llcc-calc-input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--llcc-radius-sm);
    background: rgba(255, 255, 255, .04);
  }
  
  .llcc-calc-input > span {
    padding: 0 2px 0 14px;
    color: var(--llcc-ink-300);
    font-weight: 500;
  }
  
  .llcc-calc-input input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px 12px 4px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
  }
  
  .llcc-calc-input--plain input { padding-left: 14px; }
  
  .llcc-calc-input input:focus {
    outline: 2px solid var(--llcc-accent);
    outline-offset: -1px;
  }
  
  /* The filled part of the track is driven by --llcc-fill, set as the slider
     moves. Scoped with .llcc-page so it outranks the form-control reset. */
  .llcc-page .llcc-range {
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  
  .llcc-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background:
      linear-gradient(to right, var(--llcc-accent) var(--llcc-fill, 0%), rgba(255, 255, 255, .12) var(--llcc-fill, 0%));
  }
  
  .llcc-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border: 3px solid var(--llcc-ink-950);
    border-radius: 50%;
    background: var(--llcc-accent-lift);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
    -webkit-appearance: none;
    appearance: none;
  }
  
  .llcc-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
  }
  
  .llcc-range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--llcc-accent);
  }
  
  .llcc-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 3px solid var(--llcc-ink-950);
    border-radius: 50%;
    background: var(--llcc-accent-lift);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
  }
  
  .llcc-range:focus-visible {
    outline: 2px solid var(--llcc-accent);
    outline-offset: 4px;
  }
  
  .llcc-calc-result {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: var(--llcc-radius);
    background: rgba(10, 12, 18, .6);
  }
  
  .llcc-calc-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  
  .llcc-calc-totals span {
    display: block;
    color: var(--llcc-ink-400);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  
  .llcc-calc-totals strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
  }
  
  .llcc-calc-plan {
    margin-top: 22px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .05);
  }
  
  .llcc-calc-plan li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: var(--llcc-ink-300);
    font-size: .875rem;
  }
  
  .llcc-calc-plan li:last-child { border-bottom: 0; }
  
  .llcc-calc-plan b {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
  }
  
  .llcc-calc-footnote {
    margin-top: 16px;
    color: var(--llcc-ink-400);
    font-size: .75rem;
  }
  
  /* ---- Storage benefit grid ---- */
  
  .llcc-benefit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 56px;
    gap: 20px;
  }
  
  .llcc-benefit-card {
    position: relative;
    padding: 32px;
    overflow: hidden;
    transition: border-color .3s ease;
  }
  
  .llcc-benefit-card:hover { border-color: rgba(255, 255, 255, .18); }
  
  .llcc-benefit-card__row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .llcc-benefit-card__metric {
    flex-shrink: 0;
    text-align: right;
  }
  
  .llcc-benefit-card__metric-value {
    margin-top: 6px;
    color: var(--llcc-accent);
    font-size: 1.05rem;
    font-weight: 600;
  }
  
  .llcc-benefit-card__title {
    margin-top: 18px;
    font-size: 1.4rem;
    font-weight: 600;
  }
  
  .llcc-benefit-card__body {
    margin-top: 12px;
    color: var(--llcc-ink-200);
    line-height: 1.6;
  }
  
  /* ---- Bike cards ---- */
  
  .llcc-bikes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 56px;
    gap: 18px;
  }
  
  .llcc-bike {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 18px;
  }
  
  /* Age-range shots are portrait cut-outs on a transparent background
     (362x724). The tile matches that 1:2 frame so nothing is cropped or
     letterboxed, and sits a step lighter than the card it lives in. */
  .llcc-bike__media {
    display: block;
    aspect-ratio: 1 / 2;
    overflow: hidden;
    border-radius: var(--llcc-radius-sm);
    background: #1c1f27;
    padding: 16px;
  }
  .llcc-bike__media:hover {
    background: #1c1f27;
  }
  
  .llcc-bike__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
  }
  
  
  
  .llcc-bike__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 6px 6px;
  }
  
  .llcc-bike__name {
    font-size: 1.075rem;
    font-weight: 600;
  }
  
  .llcc-bike__link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 18px;
    color: var(--llcc-accent-lift);
    font-size: .875rem;
    font-weight: 600;
  }
  
  .llcc-bike__link:hover { text-decoration: underline; }
  
  .llcc-bikes-cta {
    display: flex;
    justify-content: center;
    margin-top: 36px;
  }
  
  /* ---- Club table ---- */
  
  .llcc-table-card {
    margin-top: 24px;
    overflow: hidden;
  }
  
  .llcc-table-card__head {
    padding: 28px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }
  
  .llcc-table-card__name {
    font-size: 1.6rem;
    font-weight: 600;
  }
  
  .llcc-table-card__sub {
    margin-top: 4px;
    color: var(--llcc-ink-400);
    font-size: .8125rem;
  }
  
  .llcc-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .llcc-table th,
  .llcc-table td {
    padding: 22px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    text-align: left;
    vertical-align: top;
  }
  
  .llcc-table tr:last-child th,
  .llcc-table tr:last-child td { border-bottom: 0; }
  
  .llcc-table th {
    width: 34%;
    color: var(--llcc-ink-400);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  
  .llcc-table td {
    color: #fff;
    font-size: 1rem;
  }
  
  .llcc-table td .llcc-table__note {
    margin-top: 6px;
    color: var(--llcc-ink-400);
    font-size: .75rem;
  }
  
  /* Scoped past the .llcc-page a reset, which would otherwise leave these the
     same colour as the note text around them. */
  .llcc-table td .llcc-table__note a {
  text-decoration: underline;
  }
  
  .llcc-table td .llcc-table__note a:hover { text-decoration: underline; }
  
  /* ---- Closing CTA ---- */
  
  .llcc-cta {
    position: relative;
    margin: 96px auto 0;
    padding: 64px 40px;
    overflow: hidden;
    text-align: center;
  }
  
  /* The hero artwork returns for the closing panel so the page ends on the note
     it opened with. The scrim sits heavy because the glass tint over it is
     nearly transparent, and the panel's overflow:hidden clips it to the radius. */
  .llcc-cta::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
      linear-gradient(180deg, rgba(5, 6, 8, .93) 0%, rgba(5, 6, 8, .84) 45%, rgba(5, 6, 8, .93) 100%),
      url("xmas.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    content: "";
  }
  
  /* Lifts the copy and buttons clear of the artwork layer. */
  .llcc-cta > * {
    position: relative;
    z-index: 1;
  }
  
  .llcc-cta p,
  .llcc-cta h2 { text-align: center; }
  
  /* Both scoped with .llcc-page so they outrank the bare h2 and p resets, which
     zero the margins — that killed the lead's `auto` side margins and left the
     540px block flush left inside a centred panel. */
  .llcc-page .llcc-cta__title {
    margin-top: 16px;
    font-size: clamp(2rem, 4.6vw, 3.5rem);
    font-weight: 600;
    text-wrap: balance;
  }
  
  .llcc-page .llcc-cta__lead {
    max-width: 540px;
    margin: 18px auto 0;
    color: var(--llcc-ink-200);
    font-size: 1.05rem;
  }
  
  .llcc-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 32px;
    gap: 12px;
  }
  
  /* Wide screens get the larger hero export. Keyed on width alone so the
     preload in the page head can match. */
  @media (min-width: 1400px) {
    .llcc-hero__bg {
      background-image:
        linear-gradient(180deg, rgba(5, 6, 8, .45) 0%, rgba(5, 6, 8, .15) 38%, rgba(5, 6, 8, .8) 84%, var(--llcc-ink-950) 100%),
        linear-gradient(100deg, rgba(5, 6, 8, .97) 0%, rgba(5, 6, 8, .94) 36%, rgba(5, 6, 8, .74) 62%, rgba(5, 6, 8, .42) 100%),
        url("xmas-2x.jpg");
    }
  }
  
  /* Narrow viewports have no empty column to the right of the copy, so the
     left-weighted scrim would leave text sitting on brighter needles. Flatten
     it to an even wash and let the pine read as texture. */
  @media (max-width: 900px) {
    .llcc-hero__bg {
      background-image:
        linear-gradient(180deg, rgba(5, 6, 8, .5) 0%, rgba(5, 6, 8, .4) 40%, rgba(5, 6, 8, .86) 88%, var(--llcc-ink-950) 100%),
        linear-gradient(100deg, rgba(5, 6, 8, .93) 0%, rgba(5, 6, 8, .88) 55%, rgba(5, 6, 8, .84) 100%),
        url("xmas.jpg");
    }
  }
  
  /* The stat band leaves the flex row earlier than the other components change,
     which is why this sits in its own query rather than the 1024px block below.
     The five icons add roughly 200px of ink to the row, so it stops fitting on
     one line while there is still plenty of width for the two-column sections.
     Wrapping is the bad case here: space-between would strand the fifth stat
     alone on a second row and stretch it across the full width. 3+2 instead. */
  @media (max-width: 1180px) {
    .llcc-page .llcc-hero__stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 26px 32px;
    }
  }
  
  @media (max-width: 1024px) {
    .llcc-showcase,
    .llcc-tracks { grid-template-columns: 1fr; }
    .llcc-bikes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
    /* Stacked, so the divider between the two routes turns horizontal. */
    .llcc-track:first-child {
      padding-right: 0;
      padding-bottom: 40px;
    }
    .llcc-track + .llcc-track {
      padding-top: 40px;
      padding-left: 0;
      border-top: 1px solid rgba(255, 255, 255, .1);
      border-left: 0;
    }
  }
  
  @media (max-width: 768px) {
    .llcc-section { padding: 64px 0; }
    .llcc-hero { padding: 84px 0 64px; }
    .llcc-page .llcc-hero__stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 44px;
      padding-top: 26px;
      gap: 22px 24px;
    }
    .llcc-benefit-grid { grid-template-columns: 1fr; }
    .llcc-showcase__intro,
    .llcc-benefit-card { padding: 28px; }
    .llcc-calc { padding: 24px; }
    .llcc-calc-totals { grid-template-columns: 1fr; }
    .llcc-table th,
    .llcc-table td { padding: 18px 20px; }
    .llcc-table-card__head { padding: 22px 20px 16px; }
    .llcc-cta {
      margin-top: 64px;
      padding: 48px 24px;
    }
  }
  
  @media (max-width: 560px) {
    /* .llcc-bikes stays two-up on small phones so the 1:2 portraits don't
       stack into a 700px-tall card on a 390px viewport. */
    .llcc-calc-control { grid-template-columns: 1fr; }
    .llcc-hero__ctas .llcc-cta-btn,
    .llcc-hero__ctas .llcc-btn,
    .llcc-cta__actions .llcc-cta-btn,
    .llcc-cta__actions .llcc-btn { width: 100%; justify-content: center; }
    .llcc-table th { width: auto; }
    .llcc-table,
    .llcc-table tbody,
    .llcc-table tr,
    .llcc-table th,
    .llcc-table td { display: block; }
    .llcc-table th {
      padding-bottom: 0;
      border-bottom: 0;
    }
    .llcc-table td { padding-top: 8px; }
  }