/* ── Homepage hero (Solo 2027 reskin · Pass 1 + architectural polish) ──
     Page-specific overrides for the .hero block. styles.css is shared with
     other pages so we override locally rather than mutating the global. */

  /* Hero shell - high-key photo background (the new SoloLab image at
     images/sololab-hero.jpg) layered under a strong soft-slate wash so the
     headline stays at maximum contrast. The wash is heavier on the left
     (where the headline sits) and lighter on the right (where the image
     can breathe behind the angle cards). */
  .hero.solo-hero {
    background:
      linear-gradient(100deg,
        rgba(248, 250, 252, 0.96) 0%,
        rgba(248, 250, 252, 0.92) 35%,
        rgba(248, 250, 252, 0.78) 60%,
        rgba(248, 250, 252, 0.66) 100%
      ),
      url('images/sololab-hero5.jpg') center/cover no-repeat,
      linear-gradient(180deg, var(--solo-bg) 0%, #FFFFFF 100%);   /* graceful fallback if image missing */
    padding: 4rem 1.5rem 5rem;
    position: relative;
    overflow: hidden;
    min-height: auto;
    border-bottom: 1px solid var(--solo-divider);
  }
  .hero.solo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 800px 500px at 25% 20%, rgba(45, 212, 191, 0.14) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero.solo-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 85% 85%, rgba(245, 158, 11, 0.06) 0%, transparent 50%);
    pointer-events: none;
  }
  /* Legacy slideshow + tagline strip - hide if they linger in the markup */
  .hero.solo-hero .hero-slideshow,
  .hero.solo-hero .hero-tagline-strip { display: none; }

  /* Inner two-column grid */
  .solo-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4rem;
    align-items: center;
  }
  @media (max-width: 920px) {
    .solo-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  }

  /* Left column - eyebrow, headline, sub, CTAs */
  .solo-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--solo-bg-elevated);
    border: 1px solid var(--solo-divider);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-family: var(--solo-font-head);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--solo-text-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--solo-shadow-1);
    margin-bottom: 1.5rem;
  }
  .solo-hero-eyebrow::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--solo-mastery);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
  }

  /* "Science Without Walls." - the official tagline. Lexend Bold, generous
     -0.02em tracking, big enough to carry the hero on its own. */
  .solo-hero-headline {
    font-family: var(--solo-font-head);
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 5rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--solo-heading-color, var(--solo-navy));
    margin-bottom: 1.25rem;
  }

  .solo-hero-sub {
    font-family: var(--solo-font-body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: var(--solo-text);
    margin-bottom: 2rem;
    max-width: 56ch;
  }

  .solo-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }
  .solo-hero-ctas .btn-solo { padding: 14px 22px; font-size: 15px; }
  /* Phones (< 480px): stack the CTAs vertically and let them fill
     the column. Side-by-side they cram below 360-ish; stacked they
     also give the thumb a much larger tap target. */
  @media (max-width: 480px) {
    .solo-hero-ctas { flex-direction: column; align-items: stretch; gap: .55rem; }
    .solo-hero-ctas .btn-solo { width: 100%; text-align: center; padding: 16px 22px; }
    .solo-hero-meta { font-size: .8rem; line-height: 1.4; align-items: flex-start; }
    .solo-hero-meta > span:last-child { display: block; }
  }

  .solo-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--solo-text-mute);
  }

  /* "Action Hub" - Deep Charcoal panel that contains the hero CTAs + free
     assessment meta line. Sits as a focal block over the SoloLab photo
     backdrop so the teal primary button + the messaging both pop. */
  .solo-hero-action-hub {
    display: inline-flex;
    flex-direction: column;
    gap: 1rem;
    align-self: flex-start;
    background: var(--solo-navy);                          /* Deep Charcoal #1E293B */
    padding: 1.4rem 1.6rem;
    border-radius: var(--solo-radius);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22),
                0 2px 6px rgba(15, 23, 42, 0.12);
    margin-top: 0.5rem;
  }
  /* Light up the meta text on the dark panel */
  .solo-hero-action-hub .solo-hero-meta { color: rgba(248, 250, 252, 0.75); }

  /* Pin the primary CTA's text to Pure White inside the action hub - bumps
     specificity (0,0,2,0) above any cached or overridden rule. */
  .solo-hero-action-hub .btn-solo-teal {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  }
  .solo-hero-action-hub .btn-solo-teal:hover:not(:disabled) {
    color: #FFFFFF;
  }

  /* The secondary "Open SoloLab" ghost button needs a light-on-dark variant
     inside the Charcoal hub - its default dark text would vanish. */
  .solo-hero-action-hub .btn-solo-ghost {
    color: rgba(248, 250, 252, 0.92);
    border-color: rgba(255, 255, 255, 0.22);
    background: transparent;
  }
  .solo-hero-action-hub .btn-solo-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
  }

  /* Right column - three numbered "angle" cards. Same content as the legacy
     hero-angles-stack, recast as clean Solo cards with a soft mastery rail. */
  .solo-hero-right { display: flex; flex-direction: column; gap: 0.75rem; }
  .solo-angle {
    background: var(--solo-bg-elevated);
    border: 1px solid var(--solo-divider);
    border-radius: var(--solo-radius);
    padding: 1.1rem 1.25rem 1.1rem 1.4rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
    box-shadow: var(--solo-shadow-1);
    transition: transform var(--solo-fast) var(--solo-ease),
                box-shadow var(--solo-fast) var(--solo-ease),
                border-color var(--solo-fast) var(--solo-ease);
    position: relative;
    overflow: hidden;
  }
  .solo-angle::before {
    /* Mastery accent rail on the left edge */
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--solo-mastery) 0%, var(--solo-mastery-deep) 100%);
    opacity: 0.85;
  }
  .solo-angle:hover {
    transform: translateY(-2px);
    box-shadow: var(--solo-shadow-2);
    border-color: rgba(45, 212, 191, 0.55);
  }
  .solo-angle-num {
    font-family: var(--solo-font-head);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--solo-mastery-deep);
    background: var(--solo-mastery-pale);
    border-radius: 8px;
    padding: 4px 10px;
    line-height: 1.2;
    align-self: flex-start;
  }
  .solo-angle-title {
    font-family: var(--solo-font-head);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--solo-heading-color, var(--solo-navy));
    letter-spacing: -0.005em;
    margin-bottom: 0.25rem;
  }
  .solo-angle-desc {
    font-size: 0.82rem;
    color: var(--solo-text);
    line-height: 1.55;
  }

  /* ── Architectural polish · pass 1.5 ──
     Adds weight + rhythm to the homepage so the layout stops feeling floaty. */

  /* Card depth - universal shadow + Solo-divider 1px border on every feature
     card. Targets both the .offer-card (Two-tools section) and the .card
     (Why-it-works + Built-for-2028 sections). */
  .section .offer-card,
  .section .card {
    background: var(--solo-bg-elevated);
    border: 1px solid var(--solo-divider);
    border-radius: var(--solo-radius);
    box-shadow: var(--solo-shadow-1);
    transition: box-shadow var(--solo-fast) var(--solo-ease),
                border-color var(--solo-fast) var(--solo-ease),
                transform var(--solo-fast) var(--solo-ease);
  }
  .section .offer-card:hover,
  .section .card:hover {
    box-shadow: var(--solo-shadow-2);
    border-color: rgba(45, 212, 191, 0.35);
    transform: translateY(-2px);
  }

  /* Sections sitting on the slate band need to show their content above the
     band's bg - already handled by background hierarchy, but ensure no rogue
     legacy bg colours leak through .section */
  .solo-section-band.section { background: var(--solo-bg); }

  /* Bento layout - wider 3-column grid that fills the available section width
     instead of the narrow centered card stack the legacy .cards-2 / .cards-3
     produced. Cards stretch to equal heights and keep their card depth. */
  .solo-bento-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 1280px;
    margin: 2rem auto 0;
    padding: 0 1.25rem;
    text-align: left;
    align-items: stretch;
  }
  .solo-bento-3 > .offer-card,
  .solo-bento-3 > .card { display: flex; flex-direction: column; height: 100%; }
  @media (max-width: 1100px) {
    .solo-bento-3 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .solo-bento-3 { grid-template-columns: 1fr; gap: 1rem; }
  }

  /* The "Why it works" + "Built for 2028" sections also need the wider 3-col
     bento treatment so all three card grids on the page match. Override the
     legacy .cards-3 widths/centering when sitting in a Solo-themed section. */
  body.theme-solo .section .cards-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 1280px;
    margin: 2rem auto 0;
    padding: 0 1.25rem;
    text-align: left;
    align-items: stretch;
  }
  body.theme-solo .section .cards-3 > .card { display: flex; flex-direction: column; height: 100%; }
  @media (max-width: 1100px) {
    body.theme-solo .section .cards-3 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    body.theme-solo .section .cards-3 { grid-template-columns: 1fr; gap: 1rem; }
  }

  /* ── Bento offer-card alignment + brand recolour ──
     Make all three SoloLab / SoloCognition / SoloSight cards align: equal
     heights via flex chain, header at top, body fills, button anchored to
     the bottom. */
  .solo-bento-3 .offer-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  .solo-bento-3 .offer-card .offer-header {
    display: block;
    padding: 1.5rem 1.5rem 1.25rem;
  }
  .solo-bento-3 .offer-card .offer-body {
    display: flex;
    flex-direction: column;
    flex: 1;                                  /* fills remaining card height */
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--solo-divider);
    padding-top: 1.25rem;
  }
  .solo-bento-3 .offer-card .offer-features {
    flex: 1;                                  /* push the button to the bottom regardless of feature count */
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
  }
  /* Slimmed-card variant - single-sentence summary replaces the bullet list,
     and a "Learn more" link sits between the summary and the CTA. Same flex
     chain (summary fills, button anchors to bottom) so card heights still
     line up across the bento. */
  .solo-bento-3 .offer-card .offer-summary {
    flex: 1;
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--solo-text);
  }
  .solo-bento-3 .offer-card .offer-learn-more {
    display: inline-block;
    margin: 0 0 0.95rem;
    font-family: var(--solo-font-head);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--solo-mastery-deep);
    text-decoration: none;
    letter-spacing: 0.01em;
  }
  .solo-bento-3 .offer-card .offer-learn-more:hover {
    text-decoration: underline;
  }
  .solo-bento-3 .offer-card .offer-features li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.55rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--solo-text);
  }
  .solo-bento-3 .offer-card .offer-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--solo-mastery);          /* Mastery Teal bullet - matches brand */
    transform: translateY(-50%);
  }
  .solo-bento-3 .offer-card h3 {
    font-family: var(--solo-font-head);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--solo-heading-color, var(--solo-navy));
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0.85rem 0 0.5rem;
  }
  .solo-bento-3 .offer-card .offer-header p {
    font-size: 0.82rem;
    color: var(--solo-text-mute);
    margin: 0;
    line-height: 1.5;
  }

  /* Badge unification - all three top-of-card badges in the Solo brand.
     Mastery-pale fill + Mastery-deep text. Same shape and palette across
     the three tools so they read as one family of products. */
  .solo-bento-3 .offer-card .badge {
    display: inline-block;
    background: var(--solo-mastery-pale);
    color: var(--solo-mastery-deep);
    font-family: var(--solo-font-head);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(45, 212, 191, 0.35);
  }

  /* CTA buttons - three identical mastery-teal buttons (Pure White text +
     bold), defeating the legacy .btn-teal / .btn-navy palette. Stick to the
     bottom of the card via margin-top:auto. */
  .solo-bento-3 .offer-card a.btn-teal,
  .solo-bento-3 .offer-card a.btn-navy {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--solo-mastery) !important;
    color: #FFFFFF !important;
    border: 1px solid transparent !important;
    border-radius: 999px;                                 /* PILL - per locked button-shape rule */
    padding: 12px 18px;
    font-family: var(--solo-font-head);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.15);
    transition: background var(--solo-fast) var(--solo-ease),
                box-shadow var(--solo-fast) var(--solo-ease),
                transform  var(--solo-fast) var(--solo-ease);
  }
  .solo-bento-3 .offer-card a.btn-teal:hover,
  .solo-bento-3 .offer-card a.btn-navy:hover {
    background: var(--solo-mastery-deep) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.28), var(--solo-shadow-2);
    transform: translateY(-1px);
  }

  /* When .solo-pattern-dots is on a .section, the dots render BELOW the
     content. The .section .section-label / title / cards keep their
     normal positioning (z-index: 1 via the utility's > * rule). */
  .solo-pattern-dots.section.solo-section-band { background: var(--solo-bg); }    /* slate band stays */
  .solo-pattern-dots.section::before { opacity: 0.55; }                    /* dots a touch stronger on slate */

  /* Philosophy strip ("Science Without Walls.") joins the slate band.
     Overrides the legacy teal-pale background + borders cleanly. */
  body.theme-solo .philosophy-strip.solo-section-band {
    background: var(--solo-bg);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }

  /* Divider lines between alternating bands look better trimmed back when the
     bands themselves provide the visual break. */
  .solo-section-band + .divider,
  .divider + .solo-section-band { display: none; }

  /* "Start with the free SoloCognition" CTA strip - Deep Charcoal background
     so the section reads as a continuation of the footer below it (eliminates
     the slate gap that was reading as a "blue strip"). Electric Teal button
     with dark text for max contrast on the dark surface. */
  section.full-width-strip {
    background: var(--solo-navy);                       /* #1E293B Deep Charcoal */
    padding: 4rem 2rem 4rem;
    text-align: center;
    margin: 0;                                          /* flush against neighbouring sections */
  }
  section.full-width-strip h2 {
    color: #F0FDFA;                                     /* Light Teal-White for max contrast */
    font-family: var(--solo-font-head);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
  }
  section.full-width-strip p {
    color: rgba(240, 253, 250, 0.75);
    font-family: var(--solo-font-body);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 1.75rem;
  }
  /* The CTA button - override both the legacy .btn-primary base AND any
     inline-style attributes on this anchor. Specificity 0,0,2,1 wins. */
  section.full-width-strip a.btn-primary {
    display: inline-block;
    background: var(--solo-mastery) !important;         /* Electric Teal #2DD4BF */
    color: #FFFFFF !important;                          /* Pure White - bold + legible on teal */
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    border: 1px solid transparent !important;
    border-radius: 999px;                               /* PILL - per locked button-shape rule */
    padding: 14px 28px;
    font-family: var(--solo-font-head);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background var(--solo-fast) var(--solo-ease),
                color var(--solo-fast) var(--solo-ease),
                box-shadow var(--solo-fast) var(--solo-ease),
                transform var(--solo-fast) var(--solo-ease);
  }
  section.full-width-strip a.btn-primary:hover {
    background: var(--solo-mastery-deep) !important;
    color: #FFFFFF !important;                          /* stays white - same as default, no text-colour flip */
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.28),     /* mastery glow on hover */
                var(--solo-shadow-2);
    transform: translateY(-1px);
  }

  /* Belt-and-braces: ensure section-titles + headings on the homepage clearly
     pick up Lexend even on top of the legacy h1-h4 Lora rule. Specificity 0,0,2,1
     beats both .section-title (0,0,1,0) and bare h2 (0,0,0,1). */
  body.theme-solo .section-title { font-family: var(--solo-font-head); font-weight: 600; }
  body.theme-solo .section-intro,
  body.theme-solo .philosophy-attr { font-family: var(--solo-font-body); }

  /* Philosophy strip - brand affirmation. Echoes the hero tagline at a smaller
     scale; reads as a calm reinforcement on the slate band, not a competing
     headline. Lexend bold, no italic, no quote-marks, slightly tracked. */
  body.theme-solo .philosophy-quote {
    font-family: var(--solo-font-head);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--solo-heading-color, var(--solo-navy));
    font-style: normal;
    margin-bottom: 0.85rem;
  }
  body.theme-solo .philosophy-attr {
    font-family: var(--solo-font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--solo-mastery-deep);
  }

  /* ── Section-band flattening (2026-06-02 review feedback) ──
     The added audience-split + cost-comparison sections plus the
     existing "Why it works" / HoLL teaser / Three Tools / For
     Schools sections were all using solo-section-band, producing a
     grey/white/grey/white chop that read as visual noise. Override
     so EVERYTHING below the philosophy strip flows on the same
     pale page background. The philosophy strip keeps its teal
     tint as the single intentional rhythm break. */
  .solo-bento-section.solo-section-band,
  .solo-pattern-dots.solo-section-band,
  .solo-holl-teaser.solo-section-band,
  section.section.solo-section-band:not(.philosophy-strip) {
    background: var(--solo-bg);
  }
  /* Hairlines between adjacent sections give visual rhythm without
     a colour-flip. Only renders for sibling sections (not after
     the philosophy strip, which already provides a strong break). */
  section.section + section.section {
    border-top: 1px solid var(--solo-divider);
  }