/* product-v2.css — Lindeblad unified product page (generated from v2 design) */

/* Lindeblad — 1995 Steinway Model S
   Design tokens + page styles. Framework-free export. */

/* =====================================================
   Lindeblad Piano — Design Tokens
   Extracted from production site (base.css / pages.css)
   ===================================================== */

/* ---------- Fonts ---------- */
:root {
  /* ---------- Type families ---------- */
  --lb-font-display: 'Miller', Georgia, 'Times New Roman', serif;
  --lb-font-eyebrow: 'Bebas', 'Arial Narrow', sans-serif;
  --lb-font-body:    'Inter', Arial, sans-serif;

  /* ---------- Brand palette ---------- */
  --lb-blue:        #1b7abe;  /* primary — buttons, phone, links */
  --lb-blue-deep:   #0086c4;  /* header contact pill */
  --lb-crimson:     #7f0007;  /* Miller-accent — certificate seal, quote bubbles */
  --lb-crimson-hov: #8c0013;  /* hover + header/footer link hover */
  --lb-gold:        #c1b143;  /* golden stars reviews */
  --lb-olive:       #767255;  /* episode / eyebrow caption */

  /* ---------- Neutrals ---------- */
  --lb-black:       #000000;
  --lb-ink:         #222222;  /* primary text */
  --lb-body:        #666666;  /* secondary text */
  --lb-muted:       #777777;  /* tertiary text */
  --lb-quiet:       #888888;  /* signature, caption */
  --lb-rule:        #cccccc;  /* dividers */
  --lb-rule-soft:   #dddddd;  /* lb-line, FAQ top border */
  --lb-border:      #ebebeb;  /* video-box border */
  --lb-surface:     #efefef;  /* 3-boxes band */
  --lb-surface-2:   #f0f0f0;  /* gray small-banners */
  --lb-surface-3:   #f5f4f2;  /* "next act" banner */
  --lb-surface-4:   #f9f9f9;  /* menu trigger pill */
  --lb-header-bg:   #e8e8e8;  /* header first-row */
  --lb-footer-bg:   #e9e9e9;  /* why-wait mobile bg */
  --lb-white:       #ffffff;
  --lb-off-white:   #fdfdfd;  /* white button */

  /* ---------- Semantic aliases ---------- */
  --lb-text:              var(--lb-ink);
  --lb-text-muted:        var(--lb-body);
  --lb-link:              var(--lb-blue);
  --lb-link-hover:        var(--lb-crimson-hov);
  --lb-accent:            var(--lb-crimson);
  --lb-phone:             var(--lb-blue);
  --lb-overlay-dark:      rgba(0,0,0,.70);
  --lb-overlay-dark-40:   rgba(0,0,0,.40);
  --lb-overlay-dark-60:   rgba(0,0,0,.60);
  --lb-overlay-white-92:  rgba(255,255,255,.92);

  /* ---------- Type scale ---------- */
  /* Desktop (>=1400px)                               Tablet (<=1399px) */
  --lb-h1:          72px;   /* Miller, letter-spacing 1px         -> 46px */
  --lb-h1-line:     80px;   /*                                    -> 50px */
  --lb-h2:          72px;   /* Miller, section heads              -> 46px */
  --lb-h2-line:     80px;   /*                                    -> 50px */
  --lb-h3:          38px;   /* Miller, card / step titles */
  --lb-h4:          36px;   /* small-banner heading */
  --lb-h5:          25px;   /* Miller, secondary heads */
  --lb-eyebrow:     22px;   /* Bebas, UPPERCASE eyebrow */
  --lb-eyebrow-sm:  15px;   /* Bebas, 600, letterspaced episode label */

  --lb-body-lg:     22px;   /* Inter, default lb-banner + "section-default" */
  --lb-body-lg-line:36px;
  --lb-body-md:     20px;   /* Inter, "steps" body copy */
  --lb-body-md-line:28px;
  --lb-body:        18px;   /* Inter, small-banner text, 3-boxes */
  --lb-body-line:   26px;
  --lb-small:       15px;   /* header, menu, footer */
  --lb-caption:     12px;   /* fine print, footer legal */

  /* ---------- Space scale ---------- */
  --lb-space-0:   0;
  --lb-space-1:   4px;
  --lb-space-2:   8px;
  --lb-space-3:   12px;
  --lb-space-4:   16px;
  --lb-space-5:   20px;
  --lb-space-6:   24px;
  --lb-space-8:   32px;
  --lb-space-10:  40px;   /* small-banner inner padding */
  --lb-space-12:  48px;
  --lb-space-15:  60px;   /* .lb-spacer-60 */
  --lb-space-18:  70px;   /* lb-banner padding */
  --lb-space-20:  80px;   /* .lb-spacer-80 */
  --lb-space-25:  100px;  /* tall banner padding */
  --lb-space-30:  120px;  /* .lb-spacer-120 */

  /* ---------- Container widths ---------- */
  --lb-container-md:     720px;
  --lb-container-lg:     960px;
  --lb-container-xl:    1330px;   /* used >=1400px */
  --lb-width-short:     1100px;
  --lb-width-shorter:   1000px;
  --lb-width-really:     800px;

  /* ---------- Radii ---------- */
  --lb-radius-sm:   12px;   /* lb-button — softer than the original 7px to feel less utilitarian */
  --lb-radius-md:    8px;   /* menu trigger pill */
  --lb-radius-lg:   16px;   /* banners, cards, 3-boxes */
  --lb-radius-pill: 22px;   /* header contact pill */
  --lb-radius-full: 9999px;

  /* ---------- Elevation ---------- */
  --lb-shadow-button: 0 3px 4px rgba(0,0,0,.10);
  --lb-shadow-card:   0 1px 7px rgba(0,0,0,.10);
  --lb-shadow-steps:  0 0 10px #dfdfdf;
  --lb-shadow-bubble: 0 4px 7px rgba(0,0,0,.20);
  --lb-shadow-video:  0 0 10px rgba(255,255,255,.80);
  --lb-shadow-frame:  0 2px 10px rgba(200,200,200,1);

  /* ---------- Motion ---------- */
  --lb-ease:        ease;
  --lb-dur-fast:    .25s;   /* button hover */
  --lb-dur:         .40s;   /* menu, nav */

  /* ---------- Breakpoints (reference only) ---------- */
  --lb-bp-sm:   600px;
  --lb-bp-md:   768px;
  --lb-bp-lg:   992px;
  --lb-bp-xl:  1400px;

  /* ---------- Fixed chrome ---------- */
  --lb-header-h: 70px;
}

/* ---------- Base resets ---------- */
/* ===================== Page styles ===================== */

  /* ============ Base ============ */
  *, *::before, *::after { box-sizing: border-box; }
  img { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; }



  /* The screenshots use Inter for ALL headings, not Miller — overriding the design system's base.
     Per brand: headings sit in Ink (#222) on light sections; Steinway Blue is reserved
     for action (buttons, links, prices, active states), never as the default text color. */
  .product-page   h1,
  .product-page h2,
  .product-page h3,
  .product-page h4,
  .product-page h5 {
    font-family: var(--lb-font-body);
    font-weight: 700;
    color: var(--lb-ink);
    letter-spacing: -0.01em;
    margin: 0;
  }
  p { margin: 0; }

  :root {
    --page: 1380px;
    --gap: 64px;
    --hero-bg: #1c2127;
    --hero-bg-2: #14181d;
    --score-bg: #eef5fc;
    --testimonial-bg: #7892a4;
    --card-border: #cfe1f3;
  }

  .container { max-width: var(--page); margin: 0 auto; padding: 0 32px; }
  .container.narrow { max-width: 1180px; }

  section { position: relative; }
  .section-pad { padding: var(--gap) 0; }
  .section-pad-lg { padding: 82px 0; }
  /* Tablet (769–1024) had no override and kept the full desktop padding, leaving
     ~200px between sections on a short viewport. Bring it down to a calmer gap. */
  @media (max-width: 1024px) {
    .section-pad, .section-pad-lg { padding: 60px 0; }
  }

  /* ============ Buttons ============ */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 999px; padding: 14px 26px; font-weight: 600; font-size: 15px;
    text-decoration: none; cursor: pointer; transition: all .2s ease; white-space: nowrap;
  }
  .btn:hover { color: inherit; }
  .btn-primary, .btn-primary:hover { color: #fff; }
  .btn-primary { background: var(--lb-blue); box-shadow: 0 1px 0 rgba(0,0,0,.05); }
  .btn-primary:hover { background: #15679f; transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--lb-blue); border: 1.5px solid var(--lb-blue); }
  .btn-ghost:hover { background: var(--lb-blue); color: #fff; }
  .btn-ghost.btn-lg {padding-block: 16.5px;}
  .btn-outline { background: transparent; color: var(--lb-ink); border: 1.5px solid #c4cfda; }
  .btn-outline:hover { background: var(--lb-ink); color: #fff; border-color: var(--lb-ink); }
  .btn-trade, .btn-trade:hover { color: #fff; }
  .btn-trade { background: var(--lb-crimson); box-shadow: 0 6px 18px rgba(167,30,52,0.28), 0 1px 0 rgba(0,0,0,.05); }
  .btn-trade:hover { background: #8c1a2c; transform: translateY(-1px); }
  .btn-light, .btn-light:hover { color: var(--lb-blue); }
  .btn-light { background: #fff; }
  .btn-light:hover { background: #f3f8fd; }
  .btn-grad, .btn-grad:hover { color: #fff; }
  .btn-grad {
    background: var(--lb-blue);
    border: 0;
  }
  .btn-grad:hover { background: #15679f; transform: translateY(-1px); }
  .btn-lg { padding: 18px 32px; font-size: 16px; }
  .btn-block { width: 100%; }

  /* ============ Section eyebrow + heads ============ */
  .eyebrow { font-family: var(--lb-font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--lb-muted); font-weight: 600; line-height: 1; }
  .section-head { text-align: center; }
  .section-head .eyebrow { color: var(--lb-crimson); margin-bottom: 14px; }
  .section-head h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; }
  .section-head p.lede { color: #4a5a6b; font-size: 18px; line-height: 1.6;
    margin-top: 22px; max-width: 760px; margin-left: auto; margin-right: auto; }

  /* ============ Header ============ */
  .site-header {
    background: var(--lb-header-bg);
    border-bottom: 1px solid #d6d6d6;
    position: sticky; top: 0; z-index: 60;
  }
  .site-header .inner { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 32px; max-width: 1500px; margin: 0 auto; gap: 24px; }
  .site-header .logo img { height: 44px; }
  .site-header nav { display: flex; align-items: center; gap: 30px; }
  .site-header nav a.navlink { color: #555; font-size: 15px; font-weight: 500; text-decoration: none; }
  .site-header nav a.navlink:hover { color: var(--lb-crimson); }
  .site-header .phone-stack { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
  .site-header .phone-stack .num { color: var(--lb-blue); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; }
  .site-header .phone-stack .num:hover { color: var(--lb-crimson); }
  .site-header .contact-pill {
    background: var(--lb-blue); color: #fff; padding: 7px 22px;
    border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none;
    white-space: nowrap;
  }
  .site-header .contact-pill:hover { background: #15679f; }
  /* "Menu" pill — matches the live site (#f9f9f9, 8px radius, two #777 bars) */
  .site-header .menu-pill {
    display: inline-flex; align-items: center; line-height: 1;
    padding: 0 0 0 15px; background: #f9f9f9; border: 0; border-radius: 8px;
    color: #555; font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .site-header .menu-pill:hover { color: var(--lb-crimson); }
  .site-header .menu-pill .menu-bars { display: inline-flex; flex-direction: column; gap: 4px; padding: 10px; }
  .site-header .menu-pill .menu-bars span { width: 17px; height: 3px; background: #777; border-radius: 4px; display: block; }

  @media (max-width: 1100px) {
    .site-header .phone-stack .num { display: none; }
  }
  @media (max-width: 900px) {
    .site-header nav .navlink { display: none; }
    .site-header nav { gap: 14px; }
  }
  /* ============ Hero ============ */
  .hero { background: var(--hero-bg); padding-bottom: 56px; }

  /* Font/size/color mirrors the breadcrumbs on lindebladpiano.com/pianos/steinway/o/
     (.steinway-model-crumbs): 14px/20px Inter 500, dimmed white for prior path
     segments, full-opacity bold white for the current page only. */
  html .hero .breadcrumbs {display: flex; align-items: center; padding: 24px 0 0 0; color: #fff; gap: 10px; margin-bottom: -8px;
    font: normal normal 500 14px/20px Inter, Arial, sans-serif; letter-spacing: 0.2px;}
  .hero .breadcrumbs img {
    float: none;
    height: 14px;margin-top: 3px;
    width: auto;
  }
  .hero .breadcrumbs ul>li:after {padding: 0 8px; opacity: 0.45;}
  .hero .breadcrumbs ul {margin: 0;display: flex; align-items: center;flex-wrap: wrap;  }
  .hero .breadcrumbs ul li {float: none; font-size: 12px;}
  html .hero .breadcrumbs {position: static;}
  .hero .breadcrumbs a {color: #fff; opacity: 0.85; text-decoration: none;}
  .hero .breadcrumbs a:hover {opacity: 1; color: #fff; text-decoration: underline;}
  .hero .breadcrumbs ul li:last-child {color: #fff; opacity: 1; font-weight: 700;}

  /* Mobile: drop the Style/Veneer facets (e.g. "Traditional", "Satin Ebony") to
     keep the trail short — crumbs.cfm is a shared component reused on other page
     types, so those two are tagged product-page-side (see index-v2.cfm) rather
     than changed there. Also re-center the shorter trail in the gap between the
     site header and the hero photo instead of the taller desktop top padding,
     which pushed it visibly low once it no longer wraps to two lines. */
  .hero .breadcrumbs .crumb-short { display: none; }
  @media (max-width: 760px) {
    .hero .breadcrumbs li.crumb-hide-mobile { display: none; }
    html .hero .breadcrumbs { padding-top: 16px; margin-bottom: 0; }
    .hero .breadcrumbs .crumb-full { display: none; }
    .hero .breadcrumbs .crumb-short { display: inline; }
  }
  .hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; padding-top: 32px; }
  /* Tablet-L (≤1024) and below: rather than shrink the gallery, the hero stacks —
     the image goes full content width and the info card becomes a full-width bar
     beneath it. Status chips spread back to two columns in the roomier card. */
  /* ===== Second-largest breakpoint (769–1024): big photo on top, then the
     thumbnail mosaic (bottom-left) beside the compact buy card (bottom-right).
     The two column wrappers become display:contents so the photo, thumbnails
     and card are direct grid cells we can place by area. ===== */
  @media (min-width: 769px) and (max-width: 1024px) {
    .hero-grid {
      grid-template-columns: 1fr 1.32fr;
      grid-template-areas:
        "photo  photo"
        "thumbs card";
      column-gap: 26px; row-gap: 22px; align-items: stretch;
    }
    .hero-gallery-col, .hero-card-col { display: contents; }

    .gallery-main.gallery-main { grid-area: photo; aspect-ratio: 2 / 1; max-width: 100%; }
    .dots { display: none; }
    .thumbs-scroll { display: none; }

    /* Mosaic instead of the horizontal scroll strip: with the strip's fixed-width
       120px thumbs and hidden scrollbar, photos past the first couple were clipped
       and unreachable in this column-constrained breakpoint. A 2-col grid shows
       every thumb with no overflow; an odd thumb out spans the full row instead of
       leaving an empty cell. Descendant selector bumps specificity over the base
       .thumbs flex rule. */
    .hero-grid .thumbs {
      grid-area: thumbs; align-self: stretch; margin: 0;
      display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px;
      overflow: visible; cursor: default;
    }
    .thumbs .thumb { width: auto; aspect-ratio: auto; }
    .thumbs .thumb:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* Cap the mosaic at 7 thumbs on tablet — beyond that the card gets too tall.
       The 7th always spans the full row (whether it's the true last thumb or just
       the last one still visible), matching the capped-at-7 reference layout. */
    .thumbs .thumb:nth-child(n+8) { display: none; }
    .thumbs .thumb:nth-child(7) { grid-column: 1 / -1; }

    /* Compact buy card — vertical (mobile-style) stack in the narrow column. */
    .hero-card.hero-card {
      grid-area: card; max-width: none; width: 100%; padding: 24px 26px 26px;
    }
    .hero-card.hero-card .model-name { font-size: 25px; }
    .hero-card.hero-card .status-fields { margin-top: 14px; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero-card.hero-card .price-anchor .price-side .price,
    .hero-card.hero-card .price-anchor .mo-side .mo-price { font-size: 25px; }
    .hero-card.hero-card .cart-link { margin-top: 14px; }
    .hero-card.hero-card .trust-strip { margin-top: 18px; padding-top: 16px; }
  }

  /* Slimmer status chips across the three smaller breakpoints (≤1024) so they
     stay vertically compact and don't push pricing/CTAs further down. */
  @media (max-width: 1024px) {
    .hero-card.hero-card .status-field { padding: 4px 0; gap: 10px; }
    .hero-card.hero-card .status-field .sf-icon { width: 22px; height: 22px; }
    /* Drop the tinted box behind Pay Monthly across all smaller breakpoints; a
       hairline divider separates the two price columns and the finance row sits
       tight top and bottom so more of the card shows above the fold. */
    .hero-card.hero-card .price-anchor { margin-top: 10px; gap: 16px; }
    .hero-card.hero-card .price-anchor .price-side { padding: 6px 14px 6px 0; }
    .hero-card.hero-card .price-anchor .mo-side {
      background: none; border: 0; border-radius: 0;
      border-left: 1px solid #e3e9f1; padding: 6px 0 6px 16px;
    }
    .hero-card.hero-card .price-anchor .price-side .price,
    .hero-card.hero-card .price-anchor .mo-side .mo-price { margin-top: 4px; }
    .hero-card.hero-card .price-anchor .price-side .price-compare,
    .hero-card.hero-card .price-anchor .mo-side .mo-est { margin-top: 5px; }
    .hero-card.hero-card .cta-row { margin-top: 12px; }
  }

  /* Second-smallest breakpoint (481–768): the card is full-width here, so the
     four value-adds fit comfortably on a single row instead of wrapping to two. */
  @media (min-width: 481px) and (max-width: 768px) {
    .hero-card .trust-strip { grid-template-columns: repeat(4, 1fr); }
  }

  /* Two smaller breakpoints (≤768): consolidate the hero value stack vertically —
     tighter top margin/padding, a smaller icon circle, and reduced internal gaps
     so the four guarantees take noticeably less height. */
  @media (max-width: 768px) {
    .hero-card.hero-card .trust-strip { margin-top: 14px; padding-top: 12px; }
    .hero-card .trust-strip .item { gap: 4px; }
    .hero-card .trust-strip .item .ti { width: 28px; height: 28px; }
    .hero-card .trust-strip .item .ti svg { width: 20px; height: 20px; }
  }

  .gallery-main { position: relative; border-radius: 20px; overflow: hidden;
    background: #0a0a0c; min-height: 480px; }
  .gallery-main .frame { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat;
    transition: opacity .35s ease; cursor: zoom-in; }
  .gallery-main .frame.is-hidden { opacity: 0; }
  .gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease;
  }
  .gallery-nav:hover { background: rgba(255,255,255,0.32); }
  .gallery-nav.prev { left: 16px; }
  .gallery-nav.next { right: 16px; }
  .gallery-nav svg { width: 18px; height: 18px; flex: none; }
  .gallery-corner { position: absolute; right: 16px; display: flex; gap: 8px; }
  .gallery-corner.bot { bottom: 16px; right: 16px; left: 16px; flex-direction: row; align-items: center; justify-content: flex-end; }
  .gallery-corner.top { top: 16px; }
  .icon-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.4);
    color: #fff; border: 1px solid rgba(255,255,255,0.15);
    display: inline-flex; align-items: center; justify-content: center; }
  .icon-btn:hover { background: rgba(0,0,0,0.6); }
  /* In the gallery corner, the expand button matches the white "Listen now" pill style */
  .gallery-corner .icon-btn { width: 40px; height: 40px; flex-shrink: 0; background: #fff; color: #14181d;
    border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
  .gallery-corner .icon-btn:hover { background: #f3f8fd; }
  .gallery-corner .icon-btn svg { width: 14px; height: 14px; flex: none; }
  .icon-btn.audio-btn {
    width: auto; border-radius: 999px; padding: 0 16px 0 12px; gap: 7px; height: 40px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
    background: #fff; color: #14181d; border-color: rgba(0,0,0,0.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  }
  .icon-btn.audio-btn:hover { background: #f3f8fd; }
  .icon-btn.audio-btn svg { width: 16px; height: 16px; flex: none; }
  /* Larger touch targets on mobile — these render noticeably small on at least
     some real iOS devices even though desktop viewport emulation doesn't show
     it, so bump both the buttons and their SVG icons up a comfortable amount
     rather than rely on the fixed desktop-tuned sizes. !important on the svg
     rules guards against the width/height HTML attributes on those icons
     winning over CSS on any real-device browser quirk. */
  @media (max-width: 768px) {
    .gallery-nav { width: 52px; height: 52px; }
    .gallery-nav svg { width: 26px !important; height: 26px !important; }
    .gallery-corner .icon-btn { width: 52px; height: 52px; }
    .gallery-corner .icon-btn svg { width: 22px !important; height: 22px !important; }
    .icon-btn.audio-btn { width: auto; height: 52px; padding: 0 18px 0 14px; font-size: 14px; white-space: nowrap; }
    .icon-btn.audio-btn svg { width: 22px !important; height: 22px !important; }
  }
  .dots { display: flex; gap: 8px; justify-content: center; margin: 18px 0 16px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); border: 0; padding: 0; }
  .dot.is-active { background: var(--lb-blue); }

  .thumbs { display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: hidden; cursor: grab; }
  .thumbs:active { cursor: grabbing; }
  .thumb { position: relative; flex: 0 0 auto; width: 120px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;
    background-size: cover; background-position: center; cursor: pointer;
    border: 2px solid transparent; transition: border-color .2s ease; }
  .thumb.is-active { border-color: var(--lb-blue); /*box-shadow: 0 0 0 4px rgba(27, 122, 190, 0.25);*/ }
  .thumb .expand { position: absolute; top: 6px; right: 6px; color: #fff;
    opacity: 0.85; font-size: 14px; }
  @media (max-width: 1024px) {
    .thumb .expand { display: none; }
  }
  .thumbs-scroll { height: 4px; background: rgba(255,255,255,0.1); margin: 14px 0 0; border-radius: 999px;
    position: relative; overflow: hidden; }
  .thumbs-scroll-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
    background: #fff; border-radius: 999px; cursor: grab; transition: width .15s, left .15s; }
  .thumbs-scroll-bar:active { cursor: grabbing; }

  /* ============ Hero side card — editorial header layout ============ */
  .hero-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 36px 34px;
    color: var(--lb-ink);
    position: relative;
    box-shadow:
      0 0 0 1px rgba(27, 122, 190, 0.12),
      0 24px 60px rgba(20, 40, 70, .22);
  }
  .hero-card::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 21px; padding: 1px;
    background: linear-gradient(135deg, rgba(27,122,190,0.30) 0%, rgba(27,122,190,0.08) 50%, rgba(27,122,190,0.30) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }

  /* Eyebrow */
  .hero-card .eyebrow-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
  }
  .hero-card .eyebrow-row .rule {
    height: 1px; width: 28px; background: var(--lb-crimson); flex-shrink: 0;
  }
  .hero-card .eyebrow-row .text {
    font-family: var(--lb-font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--lb-crimson); font-weight: 600; line-height: 1;
  }

  /* Title block */
  .hero-card .hero-head { display: contents; }
  .hero-card .status-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-top: 14px;
  }
  .hero-card .status-field {
    display: flex; align-items: center; gap: 11px;
    padding: 4px 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .hero-card .status-field.field-avail {
    border-left: 1px solid var(--card-border);
    padding-left: 18px;
  }
  .hero-card .sf-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hero-card .sf-icon svg { width: 30px; height: 30px; }
  .hero-card .sf-icon.sf-restored { background: transparent; color: var(--lb-blue); }
  .hero-card .sf-icon.sf-avail { background: transparent; color: #4e7d5e; }
  .hero-card .sf-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .hero-card .sf-label {
    font-family: var(--lb-font-eyebrow);
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--lb-olive); line-height: 1;
  }
  .hero-card .sf-value {
    color: var(--lb-ink); font-size: 14px; font-weight: 600;
    letter-spacing: 0.005em; line-height: 1.2;
  }
  .hero-card .reviews-pill {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 18px;
  }
  .hero-card .reviews-pill .stars {
    display: inline-flex; align-items: center; gap: 1px;
  }
  .hero-card .reviews-pill .reviews-text {
    color: #5a6675; font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.01em;
  }
  .hero-card .model-name {
    color: var(--lb-ink);
    font-family: var(--lb-font-body);
    font-size: 24px; font-weight: 700; line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
  }
  @media (max-width: 768px) {
    .hero-card .model-name { text-align: left; }
  }
  .hero-card .tagline {
    color: #5a6b7c; font-size: 14px; line-height: 1.55;
    margin: 12px 0 0; font-style: italic;
    font-family: var(--lb-font-display);
    font-weight: 400;
  }

  /* Spec row — 2x2 grid plinth */
  .spec-row {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f6f8fb;
    border-radius: 12px;
    padding: 14px 18px;
    row-gap: 12px;
    column-gap: 18px;
  }
  .spec-row .spec {
    padding: 0;
    position: relative;
    min-width: 0;
  }
  /* vertical divider between the two columns */
  .spec-row .spec:nth-child(odd)::after {
    content: '';
    position: absolute; right: -9px; top: 4px; bottom: 4px;
    width: 1px; background: rgba(140, 160, 185, 0.22);
  }
  .spec-row .spec .label {
    color: #8693a3; font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 600; margin-bottom: 4px;
  }
  .spec-row .spec .value {
    color: var(--lb-ink); font-size: 13.5px; font-weight: 600;
    line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Price block — anchored above CTAs */
  .price-anchor {
    margin-top: 18px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    align-items: stretch;
  }
  .price-anchor .price-side {
    padding: 14px 16px 14px 0;
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .price-anchor .price-side .label {
    color: #5f6b7a; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 600;
  }
  .price-anchor .price-side .price {
    color: var(--lb-ink); font-size: 30px; font-weight: 700;
    letter-spacing: -0.025em; line-height: 1; margin-top: 6px;
  }
  .price-anchor .price-side .sub {
    color: #6a7785; font-size: 11.5px; margin-top: 6px;
  }
  .price-anchor .price-side .price-compare {
    color: #5f6b7a; font-size: 12px; line-height: 1.35; margin-top: 7px;
    letter-spacing: 0.005em;
  }

  .price-anchor .mo-side {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    display: flex; flex-direction: column; justify-content: flex-start;
    position: relative;
  }
  .price-anchor .mo-side .label {
    color: var(--lb-blue); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 700;
    display: flex; align-items: center; gap: 6px;
  }
  .price-anchor .mo-side .label .calc-icon {
    display: inline-flex; color: var(--lb-blue); opacity: 0.7;
  }
  .price-anchor .mo-side .mo-price {
    color: var(--lb-blue); font-size: 30px; font-weight: 700;
    letter-spacing: -0.025em; line-height: 1; margin-top: 6px;
  }
  .price-anchor .mo-side .mo-est {
    color: var(--lb-blue); font-size: 11px; margin-top: 7px;
    font-weight: 500; line-height: 1.35; letter-spacing: 0.005em;
  }
  .price-anchor .mo-side .mo-price small {
    font-size: 14px; font-weight: 500; opacity: 0.7;
  }
  .price-anchor .mo-side .mo-price small.est {
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; margin-right: 4px; opacity: 0.55;
    display: none;
  }
  .price-anchor .mo-side .sub {
    color: var(--lb-blue); font-size: 11px; margin-top: 6px;
    opacity: 0.75; line-height: 1.4;
  }

  .hero-card .cta-row { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
  .hero-card .cart-link {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: var(--lb-ink);
    font-weight: 500;
  }
  .hero-card .cart-link a {
    color: var(--lb-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color .2s ease;
  }
  .hero-card .cart-link a:hover {
    color: var(--lb-blue);
  }
  .hero-card .micro {
    color: #6a7785; font-size: 12.5px; text-align: center; margin-top: 14px;
    line-height: 1.5; max-width: 320px; margin-left: auto; margin-right: auto;
  }

  /* Trust strip — slim, iconographic, single row */
  .trust-strip {
    margin-top: 24px; padding-top: 22px; border-top: 1px solid #dfe5ee;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  }
  .trust-strip .item {
    text-align: center; font-size: 11px; color: #556575; letter-spacing: 0.02em;
    font-weight: 500; line-height: 1.3; padding: 0 4px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
  }
  .trust-strip .item .ti {
    width: 30px; height: 30px; border-radius: 0;
    background: transparent; color: var(--lb-blue);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .trust-strip .item .ti svg { width: 30px; height: 30px; }
  .trust-strip .item strong {
    display: block; color: var(--lb-ink); font-size: 12px; font-weight: 600; letter-spacing: 0;
  }
  /* Match the secondary label (Money-back, Warranty, U.S. delivery, Trade-in)
     to the bold size directly above it in the hero buy card. */
  .hero-card .trust-strip .item { font-size: 12px; }

  @media (max-width: 480px) {
    .spec-row { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; }
    .spec-row .spec { padding: 8px 12px !important; border-right: 0; border-bottom: 1px solid #eef2f7; }
    .spec-row .spec:nth-child(3), .spec-row .spec:nth-child(4) { border-bottom: 0; }
    .spec-row .spec:nth-child(odd) { border-right: 1px solid #eef2f7; padding-left: 0 !important; }
    .spec-row .spec:nth-child(even) { padding-right: 0 !important; }
    .hero-card .model-name { font-size: 24px; }
    .price-anchor .price-side .price { font-size: 28px; }
    .price-anchor .mo-side .mo-price { font-size: 22px; }
  }

  /* ============ Section 2 — Inquiry Offer ============ */
  .offer { background: #fff; }

  /* ---- Logo trust carousel ---- */
  .logo-carousel { background: #fff; padding: 8px 0 56px; overflow: hidden; }
  .lc-eyebrow { text-align: center; color: var(--lb-muted); font-family: var(--lb-font-body); font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase; font-weight: 600; line-height: 1; margin: 0 0 34px; }
  .lc-viewport { position: relative; width: 100%; }
  .lc-viewport::before, .lc-viewport::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
  }
  .lc-viewport::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
  .lc-viewport::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
  .lc-track { display: flex; align-items: center; gap: 88px; width: max-content;
    animation: lc-scroll 42s linear infinite; }
  .lc-track:hover { animation-play-state: paused; }
  .lc-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 96px; }
  .lc-item img { max-height: 90px; width: auto; object-fit: contain; }
  @keyframes lc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (max-width: 600px) { .lc-track { gap: 56px; } .lc-item { height: 72px; } .lc-item img { max-height: 66px; } }

  /* ---- Google reviews trust strip ---- */
  .gstrip { background: var(--score-bg); padding: 40px 0; }
  .gstrip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  /* Tablet L & P: a horizontal scroll carousel showing two reviews plus a peek
     of the third — the sliver signals you can scroll, and cards size to their own
     content (align-items: start) so they're no taller than their text needs. */
  @media (max-width: 1024px) {
    .gstrip { padding: 30px 0; }
    .gstrip-grid {
      grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 43%;
      align-items: start;
      overflow-x: auto; scroll-snap-type: x mandatory;
      gap: 13px; padding-bottom: 10px; scrollbar-width: none;
    }
    .gstrip-grid::-webkit-scrollbar { display: none; }
    .greview-card { padding: 16px 16px; scroll-snap-align: start; }
    .greview-phrase { margin-top: 10px; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
  }
  /* Mobile: one card at a time with a peek of the next. */
  @media (max-width: 560px) {
    .gstrip-grid { grid-auto-columns: 84%; gap: 12px; }
  }
  .greview-card {
    background: #fff; border: 1px solid var(--card-border); border-radius: 16px;
    padding: 22px 24px; box-shadow: 0 2px 14px rgba(20,60,100,0.05);
    display: flex; flex-direction: column;
  }
  /* Desktop: two-row head. Row 1 = name + model pill (pill pinned right); row 2 =
     stars + date spanning the full width so they stay on one line. The logo spans
     both rows. This keeps every card to a tight, consistent height. */
  .greview-head {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    grid-template-areas:
      "logo name  model"
      "logo meta  meta";
    column-gap: 11px; row-gap: 5px; align-items: center;
  }
  .greview-head .g-logo { grid-area: logo; align-self: start; width: 34px; height: 34px; display: block; }
  /* Reviewer's photo, when present, takes the same slot as (and replaces) the
     Google "G" logo — only one of the two markup branches ever renders. Explicit
     grid-area avoids CSS grid auto-placement, which used to drop this image into
     its own implicit row below name/meta at the tablet breakpoint. */
  .greview-head .g-photo { grid-area: logo; align-self: start; width: 34px; height: 34px;
    border-radius: 50%; object-fit: cover; display: block; }
  .greview-head .g-name { grid-area: name; font-weight: 700; color: var(--lb-ink); font-size: 15.5px; line-height: 1.2; }
  .greview-head .g-model {
    grid-area: model; justify-self: end; align-self: start;
    background: var(--score-bg); color: var(--lb-blue);
    font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  }
  .greview-head .g-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .greview-head .g-stars { color: var(--lb-gold); letter-spacing: 1.5px; font-size: 13px; }
  .greview-head .g-date { color: #7a8896; font-size: 12.5px; white-space: nowrap; }
  /* Tablet & narrower: cards are too tight for the pill on the name row, so it
     drops to its own full-width tag line below the head. */
  @media (max-width: 1024px) {
    .greview-head {
      grid-template-columns: 26px 1fr;
      grid-template-areas:
        "logo name"
        "meta meta"
        "model model";
      column-gap: 9px; row-gap: 6px; align-items: center;
    }
    .greview-head .g-logo { width: 24px; height: 24px; align-self: center; }
    .greview-head .g-photo { width: 24px; height: 24px; align-self: center; }
    .greview-head .g-name { font-size: 14px; }
    .greview-head .g-meta { justify-content: flex-start; }
    .greview-head .g-model {
      justify-self: start; margin-top: 10px; max-width: 100%;
      overflow: hidden; text-overflow: ellipsis;
    }
  }
  .greview-phrase { margin: 13px 0 0; color: #41505f; font-size: 14.5px; line-height: 1.6; font-style: italic;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
  .greview-phrase.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
  .greview-more {
    align-self: flex-start; margin-top: 10px; padding: 0;
    background: none; border: none; cursor: pointer;
    color: var(--lb-blue); font-family: inherit; font-size: 13px; font-weight: 600;
    letter-spacing: .01em;
  }
  .greview-more:hover { text-decoration: underline; }

  /* Section surface: white, with overlay banner + raised pathway cards. */
  .offer { background: var(--lb-white); }
  .offer.section-pad-lg { padding-top: 40px; }

  /* Dark banner with Todd on right, headline + eyebrow left overlaid. */
  .offer-banner { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 30px; }
  .offer-banner .ob { display: block; }
  .offer-banner .ob img { width: 100%; height: 400px; object-fit: cover; object-position: 50% 54%; display: block; }
  .offer-banner .veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,24,29,0.88) 0%, rgba(20,24,29,0.60) 40%, rgba(20,24,29,0.05) 66%); }
  .offer-banner .cap { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 48px; max-width: 540px; }
  .offer-banner .role { color: rgba(255,255,255,0.82); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1; margin-bottom: 12px; }
  .offer-banner h2 { color: #fff; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.06; letter-spacing: -0.02em; margin-top: 0; text-wrap: balance; }
  .offer-banner .bio { color: rgba(255,255,255,0.96); font-size: 17.5px; font-weight: 500; line-height: 1.55; margin-top: 14px; max-width: 460px; }

  /* Two equal pathway cards: raised with shadow, aligned eyebrow → h3 → body → button. */
  .offer-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
  .offer-card {
    position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 18px;
    padding: 34px 36px 34px; display: flex; flex-direction: column; min-width: 0;
    box-shadow: 0 14px 40px rgba(20,40,70,0.12), 0 2px 6px rgba(20,40,70,0.08);
  }
  .offer-card.is-primary { box-shadow: 0 20px 50px rgba(20,40,70,0.16), 0 2px 6px rgba(20,40,70,0.08); }
  .offer-eyebrow { color: var(--lb-crimson); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1; }
  .offer-card h3 { font-size: 22px; line-height: 1.14; margin-top: 12px; letter-spacing: -0.01em; color: var(--lb-ink); font-weight: 700; }
  .offer-card .lede { color: #4a5a6b; font-size: 15px; line-height: 1.62; margin-top: 12px; }
  .offer-card .lede strong { color: var(--lb-ink); font-weight: 700; }
  .offer .ctas { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  .offer .ctas .btn { width: 100%; }

  /* Tablet: constrain the text column, deepen the veil. */
  @media (max-width: 1024px) {
    .section-pad-lg { padding: 60px 0; }
    .offer-banner .ob img { height: 320px; }
    .offer-banner .cap { max-width: 52%; padding: 0 38px; }
    .offer-banner h2 { font-size: 27px; }
    .offer-banner .bio { font-size: 15px; max-width: none; }
    .offer-banner .veil { background: linear-gradient(90deg, rgba(20,24,29,0.93) 0%, rgba(20,24,29,0.74) 48%, rgba(20,24,29,0.12) 74%); }
  }
  @media (max-width: 768px) { .container { padding: 0 22px; } }
  @media (max-width: 760px) {
    .offer-cards { grid-template-columns: 1fr; gap: 18px; }
    .offer-card { padding: 28px 26px 30px; }
  }
  /* Mobile: swap to centered portrait, text overlaid at the top, centered. */
  @media (max-width: 600px) {
    .offer-banner { margin-bottom: 22px; }
    .offer-banner .ob img { height: 470px; object-position: 50% 58%; }
    .offer-banner .veil { display: block; background: linear-gradient(180deg, rgba(20,24,29,0.94) 0%, rgba(20,24,29,0.6) 30%, rgba(20,24,29,0) 58%); }
    .offer-banner .cap { position: absolute; top: 0; left: 0; right: 0; bottom: auto; justify-content: flex-start; align-items: center; text-align: center; max-width: none; padding: 30px 24px 0; }
    .offer-banner h2 { font-size: 27px; }
    .offer-banner .bio { font-size: 15px; max-width: none; }
    .offer-card { text-align: center; align-items: center; }
  }

  .what-you-get {
    background: #eef5fc;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 18px 44px rgba(27, 122, 190, 0.14), 0 2px 6px rgba(27, 122, 190, 0.06);
  }
  .what-you-get h3 { color: var(--lb-ink); font-size: 22px; margin-bottom: 6px; }
  .what-you-get .sub { color: #51606f; font-size: 16px; }
  .what-you-get ul { list-style: none; padding: 0; margin: 22px 0 0; }
  .what-you-get li { display: flex; gap: 14px; align-items: flex-start; padding: 17px 0;
    border-top: 1px solid #e3eef9; color: var(--lb-ink); font-size: 17px; line-height: 1.55; font-weight: 500; }
  .what-you-get li:first-child { border-top: 0; padding-top: 0; }
  .check {
    width: 22px; height: 22px; border-radius: 50%; background: var(--lb-blue);
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; margin-top: 2px;
  }
  .what-you-get li strong { display: block; color: var(--lb-ink); font-weight: 600; margin-bottom: 2px; }

  /* ============ Section 2b — Trade-in ============ */
  .tradein { background: #f4f8fc; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
  .tradein-inner { text-align: center; padding: 56px 0; max-width: 640px; margin: 0 auto; }
  .tradein h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; color: var(--lb-ink); }
  .tradein p { color: #4a5a6b; font-size: 17px; line-height: 1.6; margin: 14px auto 26px; max-width: 520px; }
  .tradein p strong { color: var(--lb-ink); font-weight: 700; }
  @media (max-width: 560px) {
    .tradein-inner { padding: 44px 0; }
    .tradein p { font-size: 16px; }
  }

  /* Mobile-only copy swap: show terser wording on small screens, full on desktop. */
  .m-show { display: none; }
  @media (max-width: 560px) {
    .m-hide { display: none; }
    .m-show { display: block; }
  }

  /* ============ Section 3 — Story + Videos (dark) ============ */
  .story { background: var(--hero-bg); color: #fff; }
  .story h2 { color: #fff; }
  .story .grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
  @media (max-width: 900px) { .story .grid { grid-template-columns: 1fr; } }
  .story .copy .eyebrow { color: #8fb5d4; line-height: 1.2!important;}
  .story .copy h2 { font-size: 42px; line-height: 1.1; margin-bottom: 12px; }
  .story .copy p, .story .copy span { color: #c8d3df; font-size: 17px!important;; line-height: 1.7!important; }
  .story .copy .cta-row { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
  @media (max-width: 768px) {
    .story .copy .cta-row { justify-content: center; }
  }
    .story .copy .cta-row span {
      margin: 0!important;
      line-height: 1!important;
      color: inherit!important;
    }
  .story-specs {
    margin-top: 28px; padding: 26px 0 0;
    background: transparent; border-radius: 0;
    border-top: 1px solid rgba(140, 160, 185, 0.22);
  }
  .story-specs .spec .label { color: #8fb5d4; }
  .story-specs .spec .value { color: #f3f7fb; font-size: 15px; }
  .story-specs .spec:nth-child(odd)::after { background: rgba(140, 160, 185, 0.28); }
  /* The shared .spec-row mobile rule below adds light (#eef2f7) borders meant
     for the white spec plinth elsewhere — on this dark section they rendered as
     stray white bars. Story specs only use the subtle ::after divider above. */
  @media (max-width: 480px) {
    .story-specs .spec,
    .story-specs .spec:nth-child(odd) { border-right: 0; border-bottom: 0; }
  }

  .video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .video-grid .featured { grid-column: 1 / -1; }
  .video-card { display: block; position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
    background: #0a0a0c; background-size: cover; background-position: center; cursor: pointer;
    transition: transform .25s ease; }
  .video-card:hover { transform: translateY(-2px); }
  .video-card::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45)); }
  .video-card .play-pill {
    position: absolute; bottom: 16px; left: 16px; z-index: 2;
    background: #fff; color: var(--lb-ink); border-radius: 999px;
    padding: 12px 24px 12px 18px; display: inline-flex; align-items: center; gap: 11px;
    font-size: 15px; font-weight: 700;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 22px rgba(0,0,0,0.30);
  }
  .video-card .play-pill .tri { width: 0; height: 0;
    border-left: 13px solid var(--lb-ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
    margin-left: 1px; }
  .video-card .audio-ind { position: absolute; top: 16px; right: 16px; z-index: 2;
    color: #fff; opacity: 0.85; }
  .video-card img.vc-bg { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block; }
  .video-card.is-2x1 { aspect-ratio: 2 / 1; }
  .video-caption { color: #fff; font-size: 15px; font-weight: 500; margin-top: 12px; }
  .video-caption small { display: block; color: #8fb5d4; font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; margin-bottom: 4px; font-weight: 600; }

  /* ============ Customers Include — social proof ============ */
  .customers { background: var(--score-bg); padding: 38px 0; }
  .cust-head { text-align: center; margin-bottom: 36px; }
  .cust-head h2 {
    font-family: var(--lb-font-display);
    font-size: clamp(17px, 1.6vw, 21px); font-weight: 600;
    letter-spacing: 0; text-transform: none;
    color: var(--lb-ink); line-height: 1.1; margin: 0;
  }
  .cust-people {
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    gap: 26px; max-width: 1180px; margin: 0 auto;
  }
  .cust-person {
    display: flex; flex-direction: row; align-items: center; text-align: left;
    gap: 12px; flex: 0 1 auto;
  }
  .cust-photo {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover; object-position: 50% 18%;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(20, 40, 70, 0.12), 0 14px 30px rgba(20, 40, 70, 0.18);
    margin-bottom: 0; flex-shrink: 0;
  }
  .cust-text { display: flex; flex-direction: column; min-width: 0; }
  .cust-name { font-family: var(--lb-font-body); font-size: 16.5px; font-weight: 700; color: var(--lb-ink); line-height: 1.25; }
  .cust-role {
    font-family: var(--lb-font-body);
    font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--lb-muted); margin-top: 3px; line-height: 1.3;
  }
  .cust-logos { margin-top: 36px; padding: 8px 0 0; }
  .cust-logos-viewport {
    overflow: hidden; width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .cust-logos-track {
    display: flex; width: max-content; align-items: center;
    animation: cust-marquee 38s linear infinite;
  }
  .cust-logos-track:hover { animation-play-state: paused; }
  .cust-logos-set {
    display: flex; align-items: center; gap: 72px; padding: 0 36px; flex-shrink: 0;
  }
  .cust-logo-img {
    height: 54px; width: auto; object-fit: contain; flex-shrink: 0;
    opacity: 0.85; transition: opacity .3s ease, transform .3s ease;
  }
  .cust-logo-img:hover { opacity: 1; transform: scale(1.05); }
  @keyframes cust-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .cust-logos-track { animation: none; } }
  @media (max-width: 820px) {
    .cust-people { flex-wrap: wrap; gap: 18px 40px; max-width: 560px; }
    .cust-person { flex: 0 0 40%; }
  }
  @media (max-width: 600px) {
    .customers { padding: 22px 0; }
    .cust-head { margin-bottom: 20px; }
    .cust-people { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 16px; max-width: 420px; }
    .cust-person { flex: 0 0 calc(50% - 8px); width: auto; min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
    .cust-photo { width: 56px; height: 56px; }
    .cust-role { display: none; }
    .cust-logos { margin-top: 18px; }
    .cust-logos-set { gap: 48px; padding: 0 24px; }
    .cust-logo-img { height: 40px; }
  }

  /* ============ Section 4–5 — MasterCraft Score ============ */
  .score-section { background: #fff; }
  .score-hero { display: flex; flex-direction: column; align-items: center; }
  .score-pill {
    margin-top: 40px;
    width: 320px; height: 200px; border-radius: 999px;
    background: var(--lb-blue);
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 24px 60px rgba(20, 40, 70, 0.22);
    position: relative;
  }
  .score-pill .label { font-size: 14px; opacity: 0.85; letter-spacing: 0.06em; }
  .score-pill .value { font-size: 96px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
  .score-pill .value sup { font-size: 32px; font-weight: 500; opacity: 0.85; }

  .score-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
  /* Stacked: go 2-up to save vertical space (Daniel's request). Cabinet and
     Sound share the top row, and Playability drops alone to a second row,
     sized to match the cards above and centered rather than stretched full
     width. CSS order keeps the desktop 3-up sequence (Cabinet, Belly, Action)
     untouched. */
  @media (max-width: 900px) {
    .score-cards { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
    .score-cards .score-card:nth-child(2) { order: 1; }
    .score-cards .score-card:nth-child(3) {
      order: 2; grid-column: 1 / -1;
      max-width: calc((100% - 18px) / 2); margin: 0 auto;
    }
  }
  /* True mobile: a horizontal swipe carousel — one card at a time with a peek of
     the next — so the evaluation is about one card tall instead of three stacked,
     cutting the scroll length dramatically. */
  @media (max-width: 560px) {
    .score-cards {
      display: flex; gap: 14px; margin-top: 0;
      overflow-x: auto; scroll-snap-type: x mandatory;
      scrollbar-width: none; -ms-overflow-style: none;
      /* overflow-x:auto forces overflow-y to clip too, which was hard-cutting
         the card's box-shadow flat instead of letting it fade out on its own —
         padding gives the (now-smaller) shadow room to render in full. */
      padding: 4px 4px 24px;
    }
    .score-cards::-webkit-scrollbar { display: none; }
    .score-cards .score-card,
    .score-cards .score-card:nth-child(2),
    .score-cards .score-card:nth-child(3) {
      order: 0; flex: 0 0 87%; scroll-snap-align: start; grid-column: auto;
      max-width: none; margin: 0;
      padding: 22px 22px 24px;
      box-shadow: 0 6px 16px rgba(20, 40, 70, 0.1), 0 1px 3px rgba(20, 40, 70, 0.06);
    }
    .score-card .head { margin-bottom: 14px; }
    .score-card .head .meta h3 { font-size: 23px; }
    .score-card li { padding: 10px 0; font-size: 14px; }
  }
  /* Carousel nav (mobile only) — hidden where the cards are a static grid. */
  .score-navs { display: none; }
  @media (max-width: 560px) {
    .score-navs {
      display: flex; align-items: center; justify-content: center; gap: 18px;
      margin: 26px 0 18px;
    }
    .score-nav {
      flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
      border: 0; background: var(--lb-blue); color: #fff;
      display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
      box-shadow: 0 6px 16px rgba(27, 122, 190, 0.38); transition: opacity .2s ease, background .2s ease;
    }
    .score-nav:active { transform: scale(0.96); }
    .score-nav:disabled { background: #c3d3e3; box-shadow: none; cursor: default; }
    .score-dots { display: flex; align-items: center; gap: 8px; }
    .score-dot { width: 8px; height: 8px; border-radius: 50%; background: #cfdbe8; transition: background .2s ease, transform .2s ease; }
    .score-dot.is-active { background: var(--lb-blue); transform: scale(1.3); }
  }

  .score-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 30px 30px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 44px rgba(20, 40, 70, 0.14), 0 2px 6px rgba(20, 40, 70, 0.08);
  }
  .score-card .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
  .score-card .head .meta .eye { font-size: 16px; color: #6a7785; letter-spacing: 0.04em; font-weight: 600; }
  .score-card .head .meta h3 { font-size: 28px; line-height: 1.1; margin-top: 4px; }
  .score-card ul { list-style: none; padding: 0; margin: 0; }
  .score-card li { display: flex; align-items: flex-start;
    gap: 12px; padding: 12px 0; border-bottom: 1px solid #e3eef9; font-size: 15px; line-height: 1.45; color: #2c3e50; }
  .score-card li:last-child { border-bottom: 0; }
  .score-card li .ck {
    width: 22px; height: 22px; border-radius: 50%; background: var(--lb-blue); color: #fff;
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
  }
  .score-card li .area { flex: 1; color: #1e3a52; }

  .restoration-carousel {
    margin-top: 44px;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
    gap: 18px; overflow-x: auto; padding-bottom: 18px;
    scroll-snap-type: x mandatory;
    scrollbar-color: #aac3dd transparent;
  }
  .restoration-carousel::-webkit-scrollbar { height: 6px; }
  .restoration-carousel::-webkit-scrollbar-thumb { background: #aac3dd; border-radius: 999px; }
  .restoration-carousel::-webkit-scrollbar-track { background: rgba(170,195,221,0.2); border-radius: 999px; }
  .detail-card { scroll-snap-align: start; background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 6px 16px rgba(20, 40, 70, 0.10); }
  .detail-card .img { aspect-ratio: 4/3; background-size: cover; background-position: center;
    position: relative; background-color: #c8d6e3; }
  .detail-card .img .expand-icon { position: absolute; top: 10px; right: 10px; color: #fff; opacity: 0.9; }
  .detail-card .cap { padding: 14px 16px 18px; font-size: 14px; line-height: 1.4; color: #2c3e50; }

  /* MasterCraft logo + craftsmen videos (dark) */
  .mastercraft-section { background: var(--hero-bg); color: #fff; }
  .mastercraft-section h2 { color: #fff; }
  .mastercraft-block { text-align: center; }
  .mastercraft-logo-img { display: block; margin: 0 auto; width: 100%; max-width: 440px; height: auto; }
  .mastercraft-logo {
    display: inline-block;
    border: 2px solid rgba(255,255,255,0.55);
    padding: 14px 36px 12px;
    position: relative;
    margin-bottom: 24px;
  }
  .mastercraft-logo .top {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--hero-bg); padding: 0 12px;
    color: #fff; font-size: 11px; letter-spacing: 0.3em; font-weight: 600;
  }
  .mastercraft-logo .bot {
    position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    background: var(--hero-bg); padding: 0 12px;
    color: #fff; font-size: 11px; letter-spacing: 0.3em; font-weight: 600;
  }
  .mastercraft-logo .word {
    font-size: 38px; font-weight: 700; color: #fff; letter-spacing: 0.04em;
  }
  .mastercraft-logo .word .light { font-weight: 300; letter-spacing: 0.06em; }

  .craftsmen-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px;
    text-align: left;
  }
  @media (max-width: 900px) { .craftsmen-grid { grid-template-columns: 1fr 1fr; } }

  /* MasterCraft horizontal video reel */
  .craft-reel { position: relative; margin: 40px 68px 0; }
  .craft-track {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 18px; text-align: left;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  }
  .craft-track::-webkit-scrollbar { display: none; }
  .craft-card {
    flex: 0 0 300px; scroll-snap-align: start; text-decoration: none; color: inherit;
    display: block; transition: transform .25s ease;
  }
  .craft-card:hover { transform: translateY(-3px); }
  .craft-thumb {
    position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
    background: #0a0a0c; background-size: cover; background-position: center;
  }
  .craft-thumb::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.45)); }
  .craft-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 1.5px solid rgba(255,255,255,0.65);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, transform .2s ease;
  }
  .craft-play.small {
    width: 34px; height: 34px;
  }
  .craft-card:hover .craft-play { background: #fff; border-color: #fff; transform: translate(-50%, -50%) scale(1.06); }
  .craft-card:hover .craft-play .tri { border-left-color: var(--hero-bg); }
  .craft-play .tri { width: 0; height: 0; margin-left: 3px;
    border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
    .craft-play.small .tri { border-left: 9px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
  .craft-meta { padding: 14px 4px 0; }
  .craft-ep { color: var(--lb-gold); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
  .craft-title { color: #fff; font-size: 18px; font-weight: 700; margin: 7px 0 9px; line-height: 1.35; }
  .craft-desc { color: rgba(255,255,255,0.62); font-size: 14.5px; line-height: 1.6; margin: 0; }
  .craft-nav {
    position: absolute; top: 78px; z-index: 5;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, border-color .2s ease;
  }
  .craft-nav:hover { background: #fff; color: var(--hero-bg); border-color: #fff; }
  .craft-nav.prev { left: -64px; }
  .craft-nav.next { right: -64px; }
  @media (max-width: 1100px) { .craft-reel { margin: 40px 56px 0; } .craft-nav.prev { left: -54px; } .craft-nav.next { right: -54px; } }
  /* Smaller two breakpoints: one centered video with the edges of its neighbors
     peeking on each side (no side fade), so a single clip reads as the focus. */
  @media (max-width: 768px) {
    .craft-reel { margin: 40px 0 0; }
    .craft-track { -webkit-mask-image: none; mask-image: none; }
    .craft-track::before, .craft-track::after { content: ''; flex: 0 0 19%; }
    .craft-card { flex: 0 0 62%; scroll-snap-align: center; }
    .craft-thumb { aspect-ratio: 16 / 9; }
    .craft-nav { display: none; }
  }

  /* ============ Section 7 — Price comparison (light blue) ============ */
  .compare { background: var(--score-bg); }
  .compare-table { max-width: 980px; margin: 44px auto 0; display: flex; flex-direction: column; }
  .compare-row {
    /* Trailing 0.25fr track has no cell in it — it balances the wider rowlabel
       column so the Lindeblad (mid) column sits on the row's true center,
       lining it up with the centered CTA button below. */
    display: grid; grid-template-columns: 1.25fr 1fr 1fr 0.25fr; gap: 12px; align-items: stretch;
  }
  .compare-row .cell {
    padding: 14px 18px; font-size: 15px; line-height: 1.4;
    display: flex; align-items: center; min-width: 0;
  }
  .compare-row .rowlabel {
    justify-content: flex-end; text-align: right; padding-right: 24px;
    color: #51606f; font-weight: 500;
  }
  .compare-row .val {
    justify-content: center; text-align: center;
    background: #fff;
    border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    color: var(--lb-ink); font-weight: 500;
    box-shadow: -6px 0 14px -12px rgba(20,40,70,0.25), 6px 0 14px -12px rgba(20,40,70,0.25);
  }
  .compare-row .val.right { background: rgba(255,255,255,0.7); color: #6a7785; }
  .compare-row .val::before { content: none; }
  /* header row */
  .compare-row.is-head .cell { font-size: 22px; font-weight: 700; color: var(--lb-ink); padding-top: 0; padding-bottom: 16px; }
  .compare-row.is-head .colhead { justify-content: center; text-align: center; background: transparent; border: 0; }
  /* Cap the stacked cells into one rounded box per column */
  .compare-row.is-price .val { border-top: 1px solid #e5e7eb; border-radius: 14px 14px 0 0; }
  .compare-row:last-child .val { border-radius: 0 0 14px 14px;
    box-shadow: -6px 0 14px -12px rgba(20,40,70,0.25), 6px 0 14px -12px rgba(20,40,70,0.25), 0 12px 16px -11px rgba(20,40,70,0.28); }

  /* Featured Lindeblad column — white box with a gold top accent so it stands
     out against the transparent Steinway column. */
  .compare-row.is-price .val.mid { border-top: 3px solid var(--lb-gold); }
  .compare-row.is-head .colhead.mid { color: var(--lb-blue); }

  /* price row emphasis */
  .compare-row.is-price .rowlabel,
  .compare-row.is-price .val { font-size: 22px; font-weight: 700; }

  /* Tablet: trim type + padding so three columns stay comfortable */
  @media (max-width: 1024px) {
    .compare-row.is-head .cell { font-size: 18px; }
    .compare-row .cell { font-size: 14px; padding: 12px 12px; }
    .compare-row .rowlabel { padding-right: 14px; }
    .compare-row.is-price .rowlabel,
    .compare-row.is-price .val { font-size: 18px; }
  }

  /* Mobile: a compact table — each spec on ONE row as point | Lindeblad | New
     Steinway, with the header row restored to identify the two value columns.
     This pulls the comparison stats up and consolidates the section vertically. */
  @media (max-width: 720px) {
    .compare-table {
      gap: 0; margin-top: 32px;
      border: 1.5px solid #e3eef9; border-radius: 14px; overflow: hidden;
      box-shadow: 0 12px 30px -16px rgba(20,55,95,0.3);
    }
    /* Neutralize the desktop column caps / shadows / side borders / radii. */
    .compare-row .val, .compare-row.is-price .val, .compare-row:last-child .val,
    .compare-row .val.mid, .compare-row.is-price .val.mid, .compare-row:last-child .val.mid {
      box-shadow: none; border-radius: 0; border-left: 0; border-right: 0;
    }
    .compare-row.is-price .val.mid { border-top: 0; }

    .compare-row { grid-template-columns: 1.3fr 1fr 1fr; gap: 0; align-items: stretch; }
    .compare-row:not(.is-head) { border-top: 1px solid #eef2f7; }
    .compare-row .cell { padding: 10px 9px; font-size: 12.5px; min-width: 0; }

    /* Header row back as column titles. */
    .compare-row.is-head { display: grid; }
    .compare-row.is-head .cell {
      font-size: 11.5px; font-weight: 700; color: var(--lb-ink);
      padding: 13px 9px; line-height: 1.15;
    }
    .compare-row.is-head .colhead {
      justify-content: center; text-align: center; white-space: normal; background: transparent; border: 0;
    }

    .compare-row .rowlabel {
      justify-content: flex-start; text-align: left; padding-left: 13px; padding-right: 8px;
      font-weight: 600; color: #51606f;
    }
    .compare-row .val { justify-content: center; text-align: center; color: var(--lb-ink); flex-direction: row; }
    .compare-row .val::before { content: none; }

    /* Column tints — featured Lindeblad column highlighted. */
    .compare-row .val.mid, .compare-row.is-head .colhead.mid { background: #eef5fc; }
    .compare-row.is-head .colhead.mid { color: var(--lb-blue); }
    .compare-row .val.right { background: #f7fafd; color: #6a7785; }

    .compare-row.is-price .rowlabel,
    .compare-row.is-price .val { font-size: 15px; font-weight: 700; }
    .compare-row.is-price .val.mid { color: var(--lb-blue); }
  }
  .compare-foot { text-align: center; margin-top: 28px; }
  .compare-foot p { max-width: 720px; margin: 0 auto 22px; color: #4a5a6b;
    font-size: 16px; line-height: 1.65; }

  /* ============ Section 8 — Financing ============ */
  .pricing { background: #fff; }
  .pricing-grid { max-width: 1080px; margin: 44px auto 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
  /* Pay Once CTA: on desktop the auto top-margin + padding pushes the button to
     the bottom so it lines up with the taller Pay Monthly card. */
  .pay-once-cta {
    margin-top: auto; padding: 32px 0 50px; width: 100%;
    display: flex; justify-content: center;
  }
  /* Stacked: the cards no longer sit side by side, so that filler just becomes
     dead vertical space — collapse it. */
  @media (max-width: 900px) {
    .pay-once-cta { margin-top: 8px; padding: 20px 0 4px; }
  }
  .pricing-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 20px;
    padding: 36px 36px 40px; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 14px 40px rgba(20,40,70,0.12), 0 2px 6px rgba(20,40,70,0.08);
  }
  .pricing-card.featured {
    border-color: var(--lb-blue);
    box-shadow: 0 20px 50px rgba(20,40,70,0.16), 0 2px 6px rgba(20,40,70,0.08);
  }
  .pricing-card h3 { font-size: 26px; margin-bottom: 18px; }
  .pricing-card .big {
    font-size: 60px; font-weight: 700; color: var(--lb-blue); letter-spacing: -0.02em; line-height: 1;
  }
  .pricing-card .big small { font-size: 22px; font-weight: 500; color: #6a7785; }
  .pricing-card .body { color: #51606f; font-size: 14px; text-align: center; margin-top: 16px;
    line-height: 1.55; }
  .pay-methods { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
  .pay-methods .pay {
    background: #eef5fc; border-radius: 12px; padding: 16px 8px;
    text-align: center; color: var(--lb-ink); font-size: 13px; font-weight: 600; line-height: 1.3;
  }
  .we-accept { color: #6a7785; font-size: 14px; margin-top: 22px; }
  .term-row { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
  .term {
    border: 1px solid #cfe1f3; border-radius: 14px; padding: 12px 8px; text-align: center;
    background: #eef5fc; color: #51606f; font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all .2s ease;
  }
  .term .pct { display: block; font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--lb-blue); }
  .term.is-active { background: var(--lb-blue); color: #fff; border-color: var(--lb-blue); }
  .term.is-active .pct { color: #fff; }
  .micro-note { color: #6a7785; font-size: 12px; text-align: center; margin-top: 12px; max-width: 360px; line-height: 1.5; }

  /* ============ Section 9 — Reviews (light blue) ============ */
  .reviews { background: var(--score-bg); }
  .reviews-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
  @media (max-width: 800px) { .reviews-head { grid-template-columns: 1fr; } }
  .reviews-head h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; }
  .reviews-head p { color: #4a5a6b; font-size: 17px; margin-top: 12px; }
  .google-summary { display: flex; gap: 24px; align-items: center; }
  .google-summary .left { text-align: center; }
  .google-summary .logo {
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  }
  .google-summary .logo .g1 { color: #4285F4; } .google-summary .logo .g2 { color: #DB4437; }
  .google-summary .logo .g3 { color: #F4B400; } .google-summary .logo .g4 { color: #4285F4; }
  .google-summary .logo .g5 { color: #0F9D58; } .google-summary .logo .g6 { color: #DB4437; }
  .google-summary .stars { color: var(--lb-gold); font-size: 16px; letter-spacing: 2px; margin-top: 4px; }
  .google-summary .bars { display: grid; grid-template-rows: repeat(5, 1fr); gap: 4px; min-width: 220px; }
  .google-summary .bar { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; font-size: 12px; color: #51606f; }
  .google-summary .bar .track { height: 6px; background: #d6e6f6; border-radius: 999px; overflow: hidden; }
  .google-summary .bar .fill { height: 100%; background: var(--lb-blue); border-radius: 999px; }
  .google-summary .right .big { font-size: 48px; font-weight: 700; color: var(--lb-blue); line-height: 1; }
  .google-summary .right .small { color: #51606f; font-size: 13px; margin-top: 4px; }
  /* Mobile: the rating bars (min-width 220) overflowed the card — let the summary
     wrap so the score + bars stack cleanly inside the viewport. */
  @media (max-width: 600px) {
    .google-summary {
      flex-wrap: wrap; justify-content: space-between;
      gap: 18px 24px; width: 100%;
    }
    .google-summary .left { order: 1; }
    .google-summary .right { order: 2; text-align: right; }
    .google-summary .bars { order: 3; flex-basis: 100%; min-width: 0; }
  }

  .review-list { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  @media (max-width: 760px) { .review-list { grid-template-columns: 1fr; } }

  /* Collapsible reveal */
  .review-reveal { position: relative; }
  .review-reveal:not(.is-open) { padding-bottom: 78px; }
  .review-reveal:not(.is-open) .review-list { max-height: 700px; overflow: hidden; }
  .review-reveal:not(.is-open)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 78px; height: 140px; pointer-events: none;
    background: linear-gradient(180deg, rgba(238,245,252,0) 0%, var(--score-bg) 88%);
  }
  .review-reveal .see-more {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--lb-blue); border: 1px solid var(--card-border);
    font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: 999px; cursor: pointer;
    box-shadow: 0 10px 30px rgba(27, 122, 190, 0.16); transition: background .2s ease, transform .2s ease;
  }
  .review-reveal .see-more:hover { background: var(--lb-blue); color: #fff; transform: translateX(-50%) translateY(-1px); }
  .review-reveal .see-more svg { transition: transform .2s ease; }
  .review-reveal .see-more:hover svg { transform: translateY(2px); }
  .review-card { background: #fff; border-radius: 18px; padding: 28px 30px; border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(27, 122, 190, 0.07); display: flex; flex-direction: column; }
  .review-card .head { display: flex; gap: 14px; align-items: center; }
  .review-card .avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--lb-blue);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; flex-shrink: 0; }
  .review-card .avatar .avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; }
  .review-card .avatar .g-badge { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px;
    background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: inline-flex; align-items: center; justify-content: center; }
  .review-card .name { color: var(--lb-ink); font-weight: 700; font-size: 16px; }
  .review-card .meta { color: #7a8896; font-size: 13px; margin-top: 2px; }
  .review-card .stars { color: var(--lb-gold); letter-spacing: 2px; font-size: 14px; margin-right: 8px; line-height: 20px;}
  .review-card .body { color: #41505f; font-size: 15px; line-height: 1.7; margin-top: 18px; }
  .review-card .body:not(.is-expanded) {
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  }
  .review-card .review-more {
    display: none; /* shown via JS only when the review text is actually clamped */
    align-self: flex-start; margin-top: 10px; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--lb-blue); font-family: inherit; font-size: 14px; font-weight: 600;
    letter-spacing: 0.01em;
  }
  .review-card .review-more.is-visible { display: inline-block; }
  .review-card .review-more:hover { text-decoration: underline; }

  /* ============ Section 9b — Peace-of-Mind Promise (slate) ============ */
  .pom { background: var(--hero-bg-2); color: #fff; padding: 90px 0; }
  .pom .pom-head { text-align: center; max-width: 720px; margin: 0 auto; }
  .pom .pom-head .eyebrow { color: #b6c2cf; }
  .section-head h2.pom-head {font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.1;}
  .pom .pom-head h2 { color: #fff; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; margin-top: 12px; }
  .pom .pom-sub { color: #c8d3df; font-size: 16px; line-height: 1.6; margin-top: 16px; }
  .pom-grid {
    margin-top: 44px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  }
  .pom-item {
    background: var(--hero-bg);
    padding: 28px 28px 30px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .pom-item .pom-ic {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--lb-blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .pom-item h3 { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .pom-item p { color: rgba(255,255,255,0.60); font-size: 14px; line-height: 1.55; }
  @media (max-width: 860px) { .pom-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .pom-grid { grid-template-columns: 1fr; } }

  /* ============ Section 10 — Video testimonials (white) ============ */
  .vid-testi { background: #fff; }

  .testi-reel { position: relative; margin: 48px 68px 0; }
  .testi-track {
    display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 8px;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  }
  .testi-track::-webkit-scrollbar { display: none; }
  .testi-card {
    flex: 0 0 332px; scroll-snap-align: start; text-decoration: none; color: inherit; display: block;
    transition: transform .25s ease;
  }
  .testi-card:hover { transform: translateY(-3px); }
  .testi-thumb {
    position: relative; aspect-ratio: 16/11; border-radius: 14px; overflow: hidden;
    background: #0a0a0c; background-size: cover; background-position: center;
  }
  .testi-thumb::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.04) 45%, rgba(0,0,0,0.30)); }
  .testi-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #fff; border: 1.5px solid rgba(255,255,255,0.65);
    display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease;
  }
  .testi-play svg { margin-left: 3px; }
  .testi-card:hover .testi-play { background: #fff; color: var(--lb-ink); transform: translate(-50%, -50%) scale(1.06); }
  .testi-name { margin-top: 16px; font-weight: 700; color: var(--lb-ink); font-size: 16.5px; line-height: 1.3; }
  .testi-meta { margin-top: 4px; color: #51606f; font-size: 14px; font-weight: 600; }
  .testi-meta span { color: #b6c6d6; margin: 0 4px; font-weight: 400; }
  .testi-quote { margin-top: 12px; color: #51606f; font-size: 14.5px; line-height: 1.6; }
  .testi-nav {
    position: absolute; top: 92px; z-index: 5;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: var(--score-bg); color: var(--lb-blue); border: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease;
  }
  .testi-nav:hover { background: #fff; color: var(--lb-ink); border-color: #d6dee6; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
  .testi-nav.prev { left: -64px; }
  .testi-nav.next { right: -64px; }
  @media (max-width: 1100px) { .testi-reel { margin: 48px 56px 0; } .testi-nav.prev { left: -54px; } .testi-nav.next { right: -54px; } }
  /* Smaller two breakpoints: one centered testimonial with the edges of its
     neighbors peeking on each side (no side fade), focusing one video at a time. */
  @media (max-width: 768px) {
    .testi-reel { margin: 48px 0 0; }
    .testi-track { -webkit-mask-image: none; mask-image: none; }
    .testi-track::before, .testi-track::after { content: ''; flex: 0 0 19%; }
    .testi-card { flex: 0 0 62%; scroll-snap-align: center; }
    .testi-thumb { aspect-ratio: 16 / 9; }
    .testi-nav { display: none; }
  }

  /* ============ Section 11 — More pianos ============ */
  .more-pianos { background: var(--score-bg); }
  .tabs { display: inline-flex; gap: 6px; background: #f4f8fc; border-radius: 999px; padding: 4px; margin: 32px auto 0;
    border: 1px solid #e3eef9; }
  .tab { background: transparent; border: 0; padding: 10px 24px; border-radius: 999px;
    color: #51606f; font-weight: 500; font-size: 14px; }
  .tab.is-active { background: var(--lb-blue); color: #fff; }
  .slider-wrapper {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 32px;
    position: relative;
  }
  .more-grid {
    flex: 1; min-width: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 280px;
    gap: 22px; overflow-x: auto; padding-bottom: 18px;
    scroll-snap-type: x mandatory;
  }
  .more-grid::-webkit-scrollbar { height: 6px; }
  .more-grid::-webkit-scrollbar-thumb { background: #aac3dd; border-radius: 999px; }
  .slider-nav {
    flex-shrink: 0; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #d0dce6; border-radius: 50%; background: #fff; cursor: pointer;
    color: var(--lb-blue); transition: opacity .2s ease;
    opacity: 1;
  }
  .slider-nav:hover:not(.slider-disabled) { border-color: var(--lb-blue); background: #f0f7fc; }
  .slider-nav:active:not(.slider-disabled) { transform: scale(0.95); }
  .slider-nav.slider-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
  .slider-nav svg { width: 24px; height: 24px; }
  .slider-nav.slider-prev { order: -1; }

  /* Tablet and mobile: drop the prev/next buttons (same broken-glyph problem
     as the hero gallery nav on real iOS devices) and instead show a partial
     peek of the next card, mirroring the swipeable video-reel treatment above
     so it's visually obvious the row scrolls. */
  @media (max-width: 1024px) {
    .slider-nav { display: none; }
    .slider-wrapper { gap: 0; }
    .more-grid { grid-auto-columns: 82%; }
    .more-card { min-width: 0; }
  }
  @media (max-width: 480px) {
    .more-grid { grid-auto-columns: 78%; }
    .more-card .img { width: 100%; height: auto; }
  }
  .more-card { scroll-snap-align: start; cursor: pointer; }
  .more-card .img { aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background-size: cover;
    background-position: center; background-color: #d6e3ef; transition: transform .25s ease; }
  .more-card:hover .img { transform: translateY(-2px); }
  .more-card .meta { margin-top: 14px; }
  .more-card .title { color: var(--lb-ink); font-weight: 600; font-size: 15px; }
  .more-card .price { color: var(--lb-blue); font-size: 17px; margin-top: 4px; font-weight: 700; }
  .more-card .finish { color: #6a7785; font-size: 13px; margin-top: 2px; }

  .specialist-cta { text-align: center; margin-top: 40px; }
  .specialist-cta p { color: #4a5a6b; font-size: 16px; margin-bottom: 18px; }

  /* ============ Section 12 — Final CTA ============ */
  .final-cta { background: var(--hero-bg); color: #fff; }
  .final-cta-card {
    max-width: 1080px; margin: 0 auto;
    background: linear-gradient(180deg, #262e38 0%, #181d24 100%);
    border-radius: 24px;
    padding: 60px 60px 50px;
    position: relative;
    text-align: center;
    box-shadow:
      0 0 0 1px rgba(140, 166, 184, 0.45),
      0 36px 90px rgba(0,0,0,.62);
  }
  .final-cta-card::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 25px; padding: 1px;
    background: linear-gradient(135deg, rgba(168, 188, 204, 0.85) 0%, rgba(110, 130, 150, 0.35) 50%, rgba(168, 188, 204, 0.85) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }
  .final-cta h2 { color: #fff; font-size: clamp(32px, 4vw, 50px); line-height: 1.1; max-width: 720px; margin: 14px auto 0; }
  .final-cta .eyebrow { color: #b6c2cf; }
  .final-cta p.lede { color: #c8d3df; font-size: 17px; line-height: 1.65; margin: 22px auto 0; max-width: 600px; }
  .final-cta .cta-row { margin-top: 32px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
  .final-cta .trust-strip {
    margin-top: 36px; max-width: 720px; margin-left: auto; margin-right: auto;
    padding-top: 0; border-top: 0;
  }
  .final-cta .trust-strip .item {
    color: #c8d3df; padding: 12px 6px; gap: 6px;
  }
  .final-cta .trust-strip .item .ti {
    background: transparent; color: #fff;
  }
  .final-cta .trust-strip .item strong {
    color: #fff; font-size: 13px;
  }

  /* ============ Footer (matches lindebladpiano.com) ============ */
  .site-footer { background: #fff; color: #444; padding: 56px 0 0; font-family: var(--lb-font-body); border-top: 1px solid #ececec; }
  .site-footer .footer-top { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
  .site-footer .footer-seal { width: 16%; }
  .site-footer .footer-seal img { height: 170px; width: auto; }
  .site-footer .footer-brand { width: 24%; line-height: 1.6; }
  .site-footer .footer-spacer { width: 30%; }
  .site-footer .footer-brand strong { display: block; color: #222; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
  .site-footer .footer-phone { color: var(--lb-blue); font-size: 15px; font-weight: 600; text-decoration: none; }
  .site-footer .footer-phone:hover { color: var(--lb-crimson); }
  .site-footer .footer-social { width: 15%; display: flex; gap: 12px; }
  .site-footer .footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #c4c4c4;
    color: #8a8a8a; display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease; }
  .site-footer .footer-social a:hover { border-color: var(--lb-blue); color: var(--lb-blue); }
  .site-footer .footer-contact-btn { width: 14%; text-align: center; background: var(--lb-blue); color: #fff; padding: 12px 0;
    border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .site-footer .footer-contact-btn:hover { background: #15679f; color: #fff; }

  .site-footer .footer-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 28px; padding-bottom: 48px; }
  .site-footer .fcol h4 { font-family: var(--lb-font-eyebrow); color: #666; font-size: 21px; font-weight: 400;
    letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 14px; }
  .site-footer .fcol a { display: block; color: #444; font-size: 14px; line-height: 1.5; margin-bottom: 9px; text-decoration: none; }
  .site-footer .fcol a:hover { color: var(--lb-crimson); }

  .site-footer .footer-legal-band { border-top: 1px solid #e2e2e2; }
  .site-footer .footer-legal { display: flex; align-items: center; justify-content: space-between; gap: 24px;
    flex-wrap: wrap; padding-top: 24px; padding-bottom: 28px; }
  .site-footer .legal-text { color: #777; font-size: 13px; line-height: 1.7; }
  .site-footer .legal-text a { color: #777; text-decoration: none; }
  .site-footer .legal-text a:hover { color: var(--lb-crimson); }
  .site-footer .legal-pay img { height: 30px; width: auto; }
  .site-footer .legal-flags { display: flex; gap: 8px; flex-basis: 100%; margin-top: 6px; }
  .site-footer .legal-flags img { width: 26px; height: auto; border: 1px solid #ddd; }

  @media (max-width: 1024px) {
    .site-footer .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .site-footer .footer-seal { width: auto; }
    .site-footer .footer-brand, .site-footer .footer-social { width: auto; }
    .site-footer .footer-spacer { display: none; }
    .site-footer .footer-top { gap: 24px; }
    .site-footer .footer-brand { flex: 1; }
    .site-footer .footer-contact-btn { width: auto; padding: 12px 28px; }
  }
  @media (max-width: 640px) {
    .site-footer .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .site-footer .footer-top { justify-content: center; text-align: center; }
    .site-footer .footer-brand { flex: unset; }
  }

  /* ============ Sticky CTA (product top bar + mobile bottom) ============ */
  /* Slide-down product header: appears once you scroll past the hero and overlays
     the site nav (z-index above it) with the model, price and "vs. new" context. */
  .sticky-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10002;
    background: #fff;
    border-bottom: 1px solid var(--lb-border);
    box-shadow: 0 6px 24px rgba(20, 40, 70, 0.08);
    transform: translateY(-100%);
    opacity: 0; pointer-events: none;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
  }
  .sticky-topbar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .sticky-topbar .stb-inner {
    display: flex; align-items: center; gap: 28px;
    min-height: 74px; box-sizing: border-box;
    padding-top: 10px; padding-bottom: 10px;
  }
  .stb-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .stb-name {
    font-family: var(--lb-font-body); font-weight: 700; color: var(--lb-ink);
    font-size: 17px; letter-spacing: -0.02em; line-height: 22px; white-space: nowrap;
  }
  .stb-cond {
    font-size: 12px; font-weight: 700; letter-spacing: 0.01em; line-height: 16px;
    color: var(--lb-blue); white-space: nowrap;
  }
  .stb-price {
    margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
    white-space: nowrap;
  }
  .stb-amount { font-size: 20px; font-weight: 700; color: var(--lb-ink); letter-spacing: -0.01em; line-height: 22px; }
  .stb-compare { font-size: 13.5px; color: var(--lb-muted); line-height: 16px; }
  .stb-compare-short { display: none; }
  .stb-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .sticky-topbar .stb-actions .btn {  font-size: 15px; padding: 12px 18px; line-height: 18px; }
    .sticky-topbar .stb-actions .btn.btn-grad { padding-block: 13.5px;}
  .stb-call { display: inline-flex; align-items: center; gap: 7px; }
  /* Tablet (769–1024): the full bar (name + condition + price + two buttons)
     overruns the narrower width and the condition / "vs new" lines collide.
     Drop the secondary Call button and tighten spacing — the primary CTA stays,
     and the phone number is still in the page + bottom sticky bar. */
  @media (min-width: 769px) and (max-width: 1024px) {
    .sticky-topbar .stb-inner { gap: 18px; }
    .sticky-topbar .stb-call { display: none; }
    .stb-name { font-size: 16px; }
    .stb-amount { font-size: 18px; }
  }
  @media (max-width: 768px) {
    /* Mobile: the bottom bar carries the actions, so the top bar stays a slim
       name + price + "vs. new" context strip. */
    .sticky-topbar .stb-actions { display: none; }
    .sticky-topbar .stb-inner { gap: 14px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
    .stb-name { font-size: 15px; }
    .stb-amount { font-size: 17px; }
    .stb-compare { font-size: 12.5px; }
    /* Full "vs. $X New Steinway B (2026)" line is too long for this narrow strip
       — swap to the short "vs. $X new" form. */
    .stb-compare-full { display: none; }
    .stb-compare-short { display: inline; }
  }
  @media (max-width: 430px) {
    .stb-cond { display: none; }
  }

  .sticky-mobile {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(14px);
    border-top: 1px solid #e1e8ef;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    z-index: 10002;
    gap: 10px;
  }
  /* Disabled for launch — the chat widget bubble sits on top of it, blocking
     the CTA. Re-enable by uncommenting once that's resolved.
  .sticky-mobile.is-visible { display: flex; }
  */
  .sticky-mobile .btn { flex: 1; padding: 14px 18px; font-size: 15px; }
  @media (min-width: 769px) {
    .sticky-mobile { display: none !important; }
  }

  /* Mobile tweaks */
  @media (max-width: 768px) {
    .container { padding: 0 22px; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 16px; }
    .hero-gallery-col { min-width: 0; }
    .thumbs { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .thumbs::-webkit-scrollbar { display: none; }
    .thumb { width: 100px; }
    .thumbs-scroll { display: none; }
    .dots { margin: 12px 0 12px; }
    .craftsmen-grid { grid-template-columns: 1fr; }
    .vid-testi-grid { grid-template-columns: 1fr; }
    .section-pad, .section-pad-lg { padding: 50px 0; }
    /* The offer headline sits right under the reviews strip; trim its top padding
       on mobile so the combined gap above the headline isn't excessive. */
    .offer.section-pad-lg { padding-top: 30px; }
    .final-cta-card { padding: 40px 28px; }
    .trust-strip { grid-template-columns: 1fr 1fr; }
    /* Keep the Final-CTA value stack on ONE row at the smaller two breakpoints,
       like the hero value stack — slim chips so all four fit. */
    .final-cta .trust-strip { grid-template-columns: repeat(4, 1fr); max-width: 520px; }
    .final-cta .trust-strip .item { padding: 6px 4px; gap: 4px; font-size: 10px; }
    .final-cta .trust-strip .item .ti { width: 22px; height: 22px; }
    .final-cta .trust-strip .item .ti svg { width: 13px; height: 13px; }
    .final-cta .trust-strip .item strong { font-size: 11.5px; }

    /* Round, icon-only play button (matches .craft-play.small used below in the
       MasterCraft videos) instead of the full text pill — on these small mobile
       tiles the pill was oversized enough to cover the subject's face. Moved to
       the bottom-right corner, out of the way of the thumbnail's focal point. */
    .video-card .play-pill {
      top: auto; left: auto; bottom: 10px; right: 10px;
      width: 34px; height: 34px; padding: 0; border-radius: 50%; gap: 0;
      background: rgba(0,0,0,0.55); border: 1.5px solid rgba(255,255,255,0.65);
      justify-content: center;
    }
    .video-card .play-pill .play-pill-label { display: none; }
    .video-card .play-pill .tri {
      border-left: 9px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
      margin-left: 2px;
    }
  }
  /* True mobile (≈390) — tighter gutters, full-width card, edge-to-edge breathing room */
  @media (max-width: 480px) {
    .container { padding: 0 16px; }
    .hero-card.hero-card { max-width: none; padding: 26px 22px 28px; }
    .hero-card.hero-card .model-name { font-size: 25px; }
    .section-pad, .section-pad-lg { padding: 40px 0; }
    .offer.section-pad-lg { padding-top: 24px; }
    .thumbs { width: 100%; gap: 6px; }
  }

  /* Shrink the two status chips just enough to stay side-by-side on one row
     below 500px, instead of the wider breakpoints' roomier spacing. */
  @media (max-width: 500px) {
    .hero-card.hero-card .status-fields { gap: 6px; }
    .hero-card.hero-card .status-field { gap: 6px; }
    .hero-card.hero-card .status-field .sf-icon,
    .hero-card.hero-card .status-field .sf-icon svg { width: 16px; height: 16px; }
    .hero-card.hero-card .sf-label { font-size: 9.5px; letter-spacing: 0.08em; }
    .hero-card.hero-card .sf-value { font-size: 11.5px; white-space: nowrap; }
    .hero-card.hero-card .status-field.field-avail { padding-left: 10px; margin-left: 5px; }
  }


/* ===== Export helpers (replacing former inline styles) ===== */
.mastercraft-h2 { font-size: 36px; margin-top: 22px; }
.more-pianos .tabs-wrap { text-align: center; }
.more-grid.panel-hidden { display: none; }
.fin-down { margin-top: 12px; }
.fin-cta-wrap { margin-top: 20px; width: 100%; display: flex; justify-content: center; }
.fin-note2 { margin-top: 16px; }
.reviews .google-summary .right .rstars { color: var(--lb-gold); letter-spacing: 2px; font-size: 13px; }
.vid-testi-cta { text-align: center; margin-top: 44px; }
.final-cta .fc-call { border-color: rgba(255,255,255,0.4); color: #fff; }
.sticky-mobile .sticky-mobile-call { flex: 0 0 56px; padding: 0; justify-content: center; }

/* ===== Story description clamp / Read More ===== */
.desc-body { overflow: hidden; position: relative; }
.desc-body * { font-family: inherit !important; font-size: inherit !important; font: inherit !important;  }
.desc-body.is-clamped::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--hero-bg, #1c2127));
  pointer-events: none;
}
.desc-readmore {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--card-border, #cfe1f3);
  padding: 13px 26px;
  border-radius: 999px;
  color: var(--lb-blue, #1b7abe);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(27, 122, 190, 0.16);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.desc-readmore:hover { background: var(--lb-blue, #1b7abe); color: #fff; transform: translateY(-1px); opacity: 1; }
@media (max-width: 768px) {
  .desc-readmore { display: flex; margin-left: auto; margin-right: auto; }
}

body .mfp-figure:after {
  background: none!important;
  box-shadow: none!important;
  position: static!important;
}

/* Pay Once / Pay Monthly popups (Get Started, Get Pre-Qualified) are the small
   single-card design (.popup { width: 560px }), not the wide 900px default
   Magnific Popup uses for other iframe lightboxes on this page. Scoped via
   the "popup-mini" mainClass set through data-effect on those two CTAs. */
.mfp-wrap.popup-mini .mfp-iframe-holder .mfp-content {
  max-width: 560px;
}


html #qualified-multimodal-host {
  z-index: 1000!important;
}

html .mfp-iframe-holder .mfp-iframe-scaler {
  background: #000!important;
}