/*
 Theme Name:   Betting Analyst Child
 Theme URI:    https://betting-analyst.com
 Description:  Custom child theme for Betting-Analyst.com built on Astra, implementing the site-wide layout redesign.
 Author:       Zel
 Template:     astra
 Version:      1.0.226
 Text Domain:  betting-analyst-child
*/

  :root {
    --navy: #0A1B33;
    --blue: #1BA9E8;
    --green: #2ECC71;
    --gold: #D9A441;
    --paper: #FFFFFF;
    --paper-2: #F7F6F1;
    --tint-blue: #EAF6FC;
    --tint-green: #EAFBF1;
    --tint-gold: #FBF3E4;
    --ink: #0A1B33;
    --slate: #67727C;
    --line: #E7E4D9;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 19px; scroll-behavior: smooth; }
  html, body { max-width: 100%; overflow-x: hidden; }
  body { background: var(--paper); color: var(--ink); font-family: 'Barlow', sans-serif; line-height: 1.65; animation: page-fade-in 0.6s ease both; }
  @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body { animation: none; }
    .reveal { transition-duration: 0.01ms !important; }
  }
  .impact { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
  .mono { font-family: 'IBM Plex Mono', monospace; }
  a { color: inherit; }
  /* Smooth ease-out-expo style curve (fast start, gentle settle) instead
     of plain "ease" - reads noticeably more premium for the same basic
     fade-up effect. Slightly longer duration and travel distance, plus
     will-change so the browser can offload it to the GPU and avoid any
     scroll-triggered jank. */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* Reusable subtle patterns */
  .football-icon { position: absolute; pointer-events: none; z-index: 0; opacity: 0.05; }
  .football-icon.dark { color: var(--ink); }
  .football-icon.light { color: #ffffff; }
  .has-football-icons { position: relative; overflow: hidden; }
  .has-football-icons > .content-layer { position: relative; z-index: 1; }
  .dot-texture::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle, rgba(10,27,51,0.06) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 40%, black 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 40%, black 100%);
  }
  .dot-texture-light::before { background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px); }
  .dot-texture > * { position: relative; z-index: 1; }

  .line-texture { position: relative; }
  .line-texture::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 26px);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 35%, black 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 35%, black 100%);
  }
  .line-texture > * { position: relative; z-index: 1; }

  /* Icons: standard, not emoji */
  .check-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-right: 0.7rem; }
  .check-badge svg { width: 12px; height: 12px; }
  .feature-li { display: flex; align-items: flex-start; list-style: none; font-size: 1.05rem; color: var(--slate); padding: 0.45rem 0; font-weight: 500; }
  .feature-li .check-badge { margin-top: 0.15rem; }

  .play-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; }
  .play-btn::after { content: ''; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; margin-left: 3px; }

  /* Solid nav in normal document flow. Not sticky — it scrolls away with the page. */
  .top-bar { background: var(--green); padding: 0.28rem clamp(1.5rem, 4vw, 5rem); box-sizing: border-box; }
  .top-bar-inner { max-width: 1800px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
  .top-bar-inner a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--navy); opacity: 0.85; transition: opacity 0.2s; }
  .top-bar-inner a:hover { opacity: 1; }
  .top-bar-inner svg { width: 14px; height: 14px; }

  nav { display: flex; align-items: center; justify-content: space-between; height: 96px; padding: 0 clamp(2rem, 5vw, 6rem); background: var(--navy); position: relative; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .nav-right { display: flex; align-items: center; gap: 1.2rem; margin-left: 2rem; }
  nav ul ul { display: none; }
  nav img { height: 56px; display: block; margin-right: 2rem; }
  nav ul { list-style: none; display: flex; gap: 2rem; align-items: center; height: 100%; }
  nav ul li { display: flex; align-items: center; }
  nav ul a { color: #C9D6E3; text-decoration: none; font-size: 1.02rem; font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; padding: 0.55rem 0.95rem; border-radius: 6px; transition: background 0.25s, color 0.25s; white-space: nowrap; }
  nav ul a:hover { background: rgba(255,255,255,0.1); color: var(--green); }
  #ba-primary-menu li { margin: 0 !important; }
  #ba-primary-menu { align-items: center !important; height: 100% !important; }
  #ba-primary-menu li { display: flex !important; align-items: center !important; height: auto !important; }
  #ba-primary-menu a { padding: 0.55rem 0.95rem !important; margin: 0 !important; line-height: 1.2 !important; position: relative !important; top: 14px !important; }
  nav .cta { background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; padding: 0.65rem 1.5rem; border-radius: 4px; font-size: 0.98rem; font-weight: 700; line-height: 1.2; display: inline-flex; align-items: center; text-decoration: none; transition: transform 0.2s, filter 0.25s; }
  nav .cta:hover { transform: translateY(-2px); filter: brightness(1.1); color: #fff; }
  .mobile-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; padding: 0; cursor: pointer; }
  .mobile-menu-toggle span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
  .mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* HERO — photo does the transitioning, buttons stay fixed */
  /* History: clamp(560px, 78vh, 800px) → trimmed to clamp(480px, 62vh, 700px)
     → tried trimming further (54vh, 58vh), both felt too aggressive and were
     reverted → now extended back up past the original 62vh per request. */
  .hero { position: relative; min-height: clamp(480px, 62vh, 700px); display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
  .hero-bg { position: absolute; inset: 0; }
  .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s cubic-bezier(0.4, 0, 0.2, 1); animation: kenburns 22s ease-in-out infinite alternate; }
  .hero-slide.active { opacity: 1; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
  .hero-slide.s1 { background-image: url('assets/images/hero-tennis-action.webp'); background-size: cover; background-position: center 30%; }
  .hero-slide.s2 { background-image: url('assets/images/hero-football-action.webp'); background-size: cover; background-position: center 35%; }
  .hero-slide.s3 { background-image: url('assets/images/hero-horse-racing.webp'); background-size: cover; background-position: center 45%; }
  .hero-photo-tag { position: absolute; bottom: 1.2rem; right: 1.6rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: rgba(255,255,255,0.4); border: 1px dashed rgba(255,255,255,0.25); padding: 0.3rem 0.6rem; border-radius: 4px; }
  .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,27,51,0.7) 0%, rgba(10,27,51,0.58) 40%, rgba(10,27,51,0.75) 100%), radial-gradient(ellipse 70% 60% at 50% 55%, rgba(10,27,51,0.7) 0%, rgba(10,27,51,0.4) 60%, rgba(10,27,51,0.4) 100%); }
  .hero-ripple {
    position: absolute; width: 340px; height: 340px; left: 68%; top: 50%;
    border-radius: 50%; pointer-events: none; z-index: 1;
    background: radial-gradient(circle, rgba(27,169,232,0.28) 0%, rgba(80,180,180,0.2) 40%, rgba(46,204,113,0.14) 60%, transparent 75%);
    filter: blur(30px);
    mix-blend-mode: color;
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  .hero-ripple.r2 { animation-delay: 0.9s; }
  .hero-ripple.r3 { animation-delay: 1.8s; }
  .hero:hover .hero-ripple { animation: hero-ripple-pulse 3.2s ease-out infinite; }
  @keyframes hero-ripple-pulse {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    20% { opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
  }
  /* Hero content has no entrance animation currently - it just pops in
     instantly the moment the page loads, unlike everything else on the
     page which fades up via .reveal. Pure CSS keyframe rather than the
     IntersectionObserver-driven .reveal system, since this is above the
     fold and already in view on load - there's nothing to "scroll into"
     to trigger an observer. */
  .hero-content { position: relative; z-index: 2; padding: 0 clamp(1.5rem, 4vw, 5rem); max-width: 1560px; margin: 0 auto; opacity: 0; animation: hero-arrive 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; }
  @keyframes hero-arrive { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  .hero-wave { display: none; }
  .hero-wave svg { width: 100%; height: 100%; display: block; }
  .text-track { position: relative; min-height: 170px; width: 100%; text-align: center; }
  .text-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .text-slide.active { opacity: 1; pointer-events: auto; }
  .text-slide .eyebrow { color: #fff; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; font-size: clamp(3rem, 6.6vw, 6.2rem); line-height: 1; margin-bottom: 0.15rem; font-family: 'Bebas Neue', sans-serif; text-shadow: 0 4px 24px rgba(0,0,0,0.35); white-space: nowrap; }
  .text-slide h1 { color: #D9E2EA; font-size: clamp(1.15rem, 2.5vw, 2rem); line-height: 1.45; font-weight: 500; font-family: 'Barlow', sans-serif; white-space: nowrap; margin: 0; }
  .text-slide h1 span { color: var(--blue); font-weight: 700; }
  .cta-row { margin-top: 1.1rem; display: flex; gap: 1rem; align-items: center; justify-content: center; }
  .btn-primary { background: var(--green); color: var(--navy); padding: 1.05rem 2.3rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 1.05rem; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 10px 24px rgba(46,204,113,0.35); }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(46,204,113,0.45); }
  .btn-secondary { background: #fff; border: none; color: var(--navy); padding: 1.05rem 2.3rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 1.05rem; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
  .btn-secondary:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,0.25); }

  .photo-block { min-height: 260px; background: linear-gradient(160deg, #123056 0%, #0A1B33 60%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
  .photo-label { position: relative; color: #6E8AA8; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; text-align: center; padding: 0.9rem; border: 1px dashed #33507A; border-radius: 6px; }

  section { padding: 4.2rem clamp(1.5rem, 4vw, 5rem); max-width: 1800px; margin: 0 auto; width: 100%; box-sizing: border-box; }
  .band { padding: 4.2rem 0; }
  .band > section { padding: 0 clamp(1.2rem, 4vw, 4rem); }
  .eyebrow-lbl { color: var(--green); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
  .sec-title { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.9rem; margin-bottom: 1.1rem; max-width: 760px; line-height: 1.25; color: var(--ink); }
  .sec-body p { color: var(--slate); margin-bottom: 1rem; max-width: 780px; }
  .lead-text { font-size: 1.05rem; font-weight: 400; color: var(--slate); line-height: 1.7; max-width: 700px; }
  .hl-blue { background: rgba(27,169,232,0.12); color: var(--blue); padding: 0.02em 0.3em; border-radius: 4px; font-weight: 600; }
  .hl-green { background: rgba(46,204,113,0.14); color: #1f9c53; padding: 0.02em 0.3em; border-radius: 4px; font-weight: 600; }
  .hl-gold { background: rgba(217,164,65,0.16); color: #a97c1f; padding: 0.02em 0.3em; border-radius: 4px; font-weight: 600; }
  .hl-green-dark { background: rgba(46,204,113,0.22); color: var(--green); padding: 0.02em 0.3em; border-radius: 4px; font-weight: 600; }
  .sec-body strong { color: var(--ink); }

  .intro-grid { display: grid; grid-template-columns: 1fr; align-items: center; text-align: center; }
  .intro-grid .sec-title, .intro-grid .lead-text { margin-left: auto; margin-right: auto; }
  .block-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2.3rem; }
  .block-grid-3 .reveal:nth-child(1) { transition-delay: 0s; }
  .block-grid-3 .reveal:nth-child(2) { transition-delay: 0.12s; }
  .block-grid-3 .reveal:nth-child(3) { transition-delay: 0.24s; }
  .block-card { background: var(--tint-blue); border-radius: 8px; padding: 1.6rem; border-top: 3px solid var(--blue); transition: background 0.25s, transform 0.25s, box-shadow 0.25s, border-top-color 0.25s; }
  .block-card:hover { background: var(--tint-green); border-top-color: var(--green); transform: translateY(-4px); box-shadow: 0 14px 26px rgba(10,27,51,0.08); }
  .block-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; color: var(--blue); line-height: 1; margin-bottom: 0.5rem; letter-spacing: 0.02em; }
  .block-card h4 { font-size: 1.02rem; margin-bottom: 0.5rem; font-weight: 700; }
  .block-card p { color: var(--slate); font-size: 0.87rem; }

  .video-feature-inner.on-photo .sec-title { color: #fff; }
  .video-feature-inner.on-photo .feature-li { color: #DCE4EA; }
  .photo-band { position: relative; overflow: hidden; }
  .photo-band-img { position: absolute; inset: 0; z-index: 0; }
  .photo-band-scrim { position: absolute; inset: 0; z-index: 1; }
  .photo-band-content { position: relative; z-index: 2; }
  .video-feature-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .video-feature-inner ul { list-style: none; margin: 0; padding: 0; }
  .video-photo { border-radius: 10px; aspect-ratio: 16/9; }
  .video-card-frame { background: #fff; padding: 0.7rem; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.35); transform: rotate(1.2deg); transition: transform 0.3s ease; }
  .video-card-frame:hover { transform: rotate(0deg); }

  .vid-carousel-wrap { position: relative; margin-top: 2rem; display: flex; align-items: center; gap: 0.6rem; }
  .vid-carousel { display: flex; gap: 1.1rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; }
  .vid-carousel::-webkit-scrollbar { height: 6px; }
  .vid-carousel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .vid-card { flex: 0 0 calc(33.333% - 0.733rem); min-width: 260px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: background 0.25s, box-shadow 0.2s, transform 0.2s; }
  .vid-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(10,27,51,0.08); background: var(--tint-blue); }
  .vid-thumb { background-color: #0A1B33; background-size: cover; background-position: center; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; color: #fff; }
  .vid-card p { padding: 0.75rem; font-size: 0.8rem; font-weight: 600; }
  .vid-carousel-arrow { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; margin: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(10,27,51,0.5); font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
  .vid-carousel-arrow:hover { background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(10,27,51,0.52); }
  .view-all { display: block; width: fit-content; margin-left: auto; margin-top: 1.8rem; color: var(--navy); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--green); padding-bottom: 3px; font-size: 0.88rem; transition: color 0.25s, border-color 0.25s; }
  .view-all:hover { color: var(--blue); border-color: var(--blue); }

  .winners-table-wrap { overflow-x: auto; border-radius: 10px; box-shadow: 0 16px 40px rgba(10,27,51,0.08); }
  .winners-table { width: 100%; border-collapse: collapse; background: #fff; font-family: 'IBM Plex Mono', monospace; }
  .winners-table thead th { background: var(--navy); color: #fff; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 600; text-align: left; padding: 1rem 1.3rem; }
  .winners-table tbody td { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 0.95rem; }
  .winners-table tbody tr:last-child td { border-bottom: none; }
  .winners-table tbody td.odds { color: #1f9c53; font-weight: 700; }

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.8rem; }
  table.odds { width: 100%; min-width: 480px; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
  table.odds th { background: var(--navy); color: #C9D6E3; text-align: left; padding: 0.85rem 1.2rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: 'IBM Plex Mono', monospace; }
  table.odds td { padding: 0.8rem 1.2rem; font-size: 0.88rem; border-bottom: 1px solid var(--line); font-family: 'IBM Plex Mono', monospace; color: var(--ink); }
  table.odds td:last-child { font-weight: 700; color: #1f9c53; }
  table.odds tr:hover td { background: var(--tint-blue); }

  .coach-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .coach-photo-wrap { position: relative; min-height: 300px; align-self: stretch; }
  .coach-breakout { position: absolute; top: -170px; right: -110px; height: 44vw; max-height: 760px; width: auto; max-width: clamp(340px, 52vw, 1020px); object-fit: contain; object-position: top right; transform: scaleX(-1); filter: drop-shadow(-14px 12px 16px rgba(10,27,51,0.4)); z-index: 2; }
  .steps { display: flex; gap: 1rem; margin-top: 1.4rem; }
  .step { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.3rem; flex: 1; transition: background 0.25s, transform 0.2s; }
  .step:hover { background: var(--tint-blue); transform: translateY(-3px); }
  .step span { color: var(--blue); font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.92rem; }

  /* Coaching section CTA — scrolls straight down to the enquiry form
     (#enquiry-form) instead of leaving the person to scroll and hunt for
     it themselves. Reuses the same blue→green gradient pill already
     established by nav .cta and .btn-primary, so it reads as part of the
     same system rather than a bolted-on button. The chevron nudges gently
     up and down to reinforce "this scrolls you down," not just "click me." */
  .coach-cta-wrap { margin-top: 1.8rem; }
  .coach-cta { display: inline-flex; align-items: center; gap: 0.65rem; background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.98rem; text-decoration: none; padding: 0.9rem 1.7rem; border-radius: 999px; box-shadow: 0 10px 24px rgba(27,169,232,0.3); transition: transform 0.25s, box-shadow 0.25s; }
  .coach-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(27,169,232,0.4); color: #fff; }
  .coach-cta-chevron { width: 15px; height: 15px; flex-shrink: 0; animation: coach-cta-bounce 1.7s ease-in-out infinite; }
  .coach-cta-note { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--slate); }

  /* Testimonials section — real (anonymized, lightly edited) YouTube
     comments, placed between Coaching and Premium Services so social
     proof lands right before the pricing cards, when hesitation about a
     paid commitment is highest. Reuses the same top-border-accent card
     pattern already used by the Previews/Tutorials archive grid
     (.archive-card / accent-green / accent-gold / accent-blue) so this
     doesn't read as a new design language bolted onto the page. */
  .testi-band { background: var(--paper-2); padding: 5rem clamp(1.5rem, 4vw, 5rem); }
  .testi-eyebrow { text-align: center; color: var(--green); font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
  .testi-heading { text-align: center; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2.6rem; color: var(--ink); margin: 0 0 2.6rem; }
  .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 1200px; margin: 0 auto; }
  .testi-grid .reveal:nth-child(1) { transition-delay: 0s; }
  .testi-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
  .testi-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
  .testi-grid .reveal:nth-child(4) { transition-delay: 0.3s; }
  .testi-grid .reveal:nth-child(5) { transition-delay: 0.4s; }
  .testi-grid .reveal:nth-child(6) { transition-delay: 0.5s; }
  .testi-card { background: #fff; border: 1px solid var(--line); border-top-width: 4px; border-radius: 10px; padding: 1.7rem 1.6rem; transition: transform 0.2s, box-shadow 0.2s; }
  .testi-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(10,27,51,0.08); }
  .testi-card.accent-green { border-top-color: var(--green); }
  .testi-card.accent-gold { border-top-color: var(--gold); }
  .testi-card.accent-blue { border-top-color: var(--blue); }
  .testi-quote-mark { width: 30px; height: 30px; margin-bottom: 0.8rem; }
  .accent-green .testi-quote-mark { color: var(--green); }
  .accent-gold .testi-quote-mark { color: var(--gold); }
  .accent-blue .testi-quote-mark { color: var(--blue); }
  .testi-card p { color: var(--ink); font-size: 0.98rem; line-height: 1.62; margin: 0 0 1.2rem; }
  .testi-card p .hl-blue { background: var(--tint-blue); color: var(--blue); padding: 0.02em 0.3em; border-radius: 4px; font-weight: 600; }
  .testi-card p .hl-green { background: var(--tint-green); color: #1f9c53; padding: 0.02em 0.3em; border-radius: 4px; font-weight: 600; }
  .testi-footer { display: flex; align-items: center; gap: 0.6rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
  .testi-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .accent-green .testi-avatar { background: var(--green); }
  .accent-gold .testi-avatar { background: var(--gold); }
  .accent-blue .testi-avatar { background: var(--blue); }
  .testi-avatar svg { width: 45%; height: 45%; }
  .testi-meta { display: flex; flex-direction: column; }
  .testi-role { font-weight: 700; font-size: 0.85rem; color: var(--ink); }
  .testi-sport { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.3rem; }
  .testi-sport svg { width: 11px; height: 11px; }

  /* Sharp diagonal cut on Premium Services - bottom edge only, top
     stays flat/straight coming out of Testimonials. A both-edges
     version was tried first; this single-edge version was preferred as
     more restrained. Only section on the page treated this way,
     deliberately - this sits at the page's most important conversion
     point (pricing) and its most dramatic transition (light
     Testimonials -> dark photo -> light Newsletter), so it's the one
     place a shape treatment earns its visual weight rather than just
     adding noise. Negative bottom margin pulls it into Newsletter below
     so the angle visibly overlaps that section's cream background
     rather than leaving a gap. */
  .services-band { position: relative; z-index: 1; margin-bottom: -40px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }
  .services-band .reveal { padding-bottom: 6rem !important; }

  /* Stats bar (Who We Are -> Latest Upload). Deliberately minimal after
     an earlier, busier version (icons, count-up animation, dividers,
     background texture) tested as "too much happening at once" -
     stripped back to just bold numbers + labels, matching the site's
     established "no hype" tone better anyway. The one brand touch is the
     thin blue/green/gold gradient line along the bottom, same accent
     already used elsewhere (page-header-band, coach-cta-wrap, etc).
     Light mint background (not dark navy/green) so it doesn't blur
     into the similarly dark photo section right after it. Numbers use
     Bebas Neue to match .intro-badge-num's "30+" treatment in the Who
     We Are section right above, for consistency between the two. */
  .stats-band { background: #EFFBF3; padding: 2.2rem clamp(1.5rem, 4vw, 5rem); position: relative; }
  .stats-band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--blue) 0%, var(--green) 50%, var(--gold) 100%); }
  .stats-row { display: flex; justify-content: center; gap: clamp(2.5rem, 7vw, 6rem); max-width: 1000px; margin: 0 auto; flex-wrap: wrap; text-align: center; }
  .stat-num { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.6rem, 4.5vw, 3.6rem); line-height: 1; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
  .stat.c-blue .stat-num { color: var(--blue); }
  .stat.c-green .stat-num { color: #1f9c53; }
  .stat.c-gold .stat-num { color: #b8822f; }
  .stat-label { color: var(--slate); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

  @media (max-width: 1000px) {
    .testi-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .testi-grid { grid-template-columns: 1fr; }
  }
  @keyframes coach-cta-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2.3rem; }
  .price-grid .reveal:nth-child(1) { transition-delay: 0s; }
  .price-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
  .price-grid .reveal:nth-child(3) { transition-delay: 0.24s; }
  .price-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.7rem; transition: background 0.25s, transform 0.2s, box-shadow 0.2s; }
  .price-card:hover { background: var(--tint-blue); transform: translateY(-4px); box-shadow: 0 14px 26px rgba(10,27,51,0.08); }
  .price-card.featured { border: 2px solid var(--green); }
  .price-card.featured:hover { background: var(--tint-green); }
  .price-tag { font-size: 0.75rem; color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
  .price-card h4 { font-size: 1.15rem; margin-bottom: 0.4rem; font-weight: 700; }
  .price-amount { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; color: var(--navy); margin-bottom: 1.1rem; letter-spacing: 0.02em; }
  .price-amount span { font-size: 0.72rem; color: var(--slate); font-family: 'Barlow', sans-serif; text-transform: none; font-weight: 400; }
  .price-card ul { list-style: none; margin-bottom: 1.3rem; }
  .price-card li { font-size: 0.84rem; color: var(--slate); padding: 0.35rem 0; border-bottom: 1px dashed var(--line); }
  .price-card li:last-child { border-bottom: none; }
  .price-btn { display: block; text-align: center; background: var(--navy); color: #fff; padding: 0.68rem; border-radius: 5px; font-weight: 700; text-decoration: none; font-size: 0.82rem; }
  .price-btn:hover { color: #fff; }
  .price-card.featured .price-btn { background: var(--green); color: var(--navy); }

  .sport-rows { padding: 0 clamp(1.5rem, 4vw, 5rem); margin: 1.5rem auto 3.5rem; max-width: 1800px; box-sizing: border-box; }
  .sport-row { display: flex; align-items: stretch; margin-bottom: 0.6rem; border-radius: 10px; overflow: hidden; background: #fff; transition: background 0.25s; }
  .sport-rows .sport-row:last-child { margin-bottom: 0; }
  .sport-row-photo { flex: 0 0 46%; aspect-ratio: 3.2 / 1; background-size: cover; background-position: center; position: relative; }
  .sport-row-text { flex: 1 1 auto; padding: 1.8rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
  .sport-row.gold:hover { background: var(--tint-gold); }
  .sport-row.blue:hover { background: var(--tint-blue); }
  .sport-row.green:hover { background: var(--tint-green); }
  .sport-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.7rem; font-weight: 600; }
  .sport-row.gold .sport-kicker { color: var(--gold); }
  .sport-row.blue .sport-kicker { color: var(--blue); }
  .sport-row.green .sport-kicker { color: var(--green); }
  .sport-row-text h3 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.8rem; color: var(--navy); margin-bottom: 1rem; line-height: 1.2; }
  .sport-row-text p { color: var(--slate); font-size: 0.98rem; line-height: 1.75; max-width: 440px; }
  .sport-row-cta { align-self: flex-start; display: inline-block; background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; padding: 0.7rem 1.5rem; border-radius: 999px; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.85rem; text-decoration: none; box-shadow: 0 8px 20px rgba(27,169,232,0.28); transition: transform 0.2s, box-shadow 0.2s; }
  .sport-row-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,169,232,0.38); color: #fff; }
  .sport-row-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
  .sport-row-cta-price { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; }
  .sport-row-badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: var(--navy); font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.35rem 0.8rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
  .sport-row.featured { border: 1.5px solid rgba(217,164,65,0.35); box-shadow: 0 10px 30px rgba(217,164,65,0.1); }
  .sport-row-text p:not(:last-child) { margin-bottom: 1rem; }
  .sport-row-text h4 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--navy); margin: 0.4rem 0 0.7rem; }
  .sport-row-text ul { max-width: 440px; margin: 0 0 1rem 1.2rem; color: var(--slate); font-size: 0.98rem; line-height: 1.65; }
  .sport-row-text li { margin-bottom: 0.5rem; }

  /* Fix: a page-builder plugin defines a global .clear class that hides itself
     (visibility:hidden, height:0) for its own internal clearfix use. Astra also
     puts "clear" on .entry-content, so real page content was getting hidden by
     that unrelated rule. This restores it without touching the plugin's own use
     of .clear elsewhere on the page. */
  .entry-content.clear { visibility: visible !important; height: auto !important; line-height: normal !important; display: block !important; }

  /* Interior page header band (page.php + archive.php): full-bleed stadium
     photo background with a navy scrim for text legibility, used across all
     interior pages (Betting Tools, Services, Blog) and archives (Previews,
     Tutorials) that don't have their own custom hero. Mirrors the same
     scrim technique as the homepage .hero-scrim so the photographic
     treatment feels consistent site-wide, just shorter than the homepage
     hero since this is a secondary/title band, not the main hero. */
  .page-header-band { position: relative; background-size: cover; background-position: center 65%; padding: 4.6rem clamp(1.5rem, 4vw, 5rem) 4.2rem; overflow: hidden; }
  .page-header-band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,27,51,0.86) 0%, rgba(10,27,51,0.68) 45%, rgba(10,27,51,0.9) 100%); pointer-events: none; }
  .page-header-band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--blue) 0%, var(--green) 50%, var(--gold) 100%); }
  .page-header-inner { position: relative; z-index: 1; max-width: 1800px; margin: 0 auto; box-sizing: border-box; text-align: center; }
  .page-header-eyebrow { position: relative; font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); margin-bottom: 0.6rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
  .page-header-title { position: relative; font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,0.45); }

  /* Archive listing grid (archive.php) — used for the Previews and
     Tutorials category pages. Matches the card language used elsewhere
     (.price-card, .archive-card) so it doesn't feel like a bolted-on
     default WordPress list. */
  .archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  .archive-grid .reveal:nth-child(4n+1) { transition-delay: 0s; }
  .archive-grid .reveal:nth-child(4n+2) { transition-delay: 0.1s; }
  .archive-grid .reveal:nth-child(4n+3) { transition-delay: 0.2s; }
  .archive-grid .reveal:nth-child(4n+4) { transition-delay: 0.3s; }
  .archive-card { display: block; background: #fff; border: 1px solid var(--line); border-top-width: 4px; border-radius: 10px; overflow: hidden; text-decoration: none; transition: background 0.25s, transform 0.2s, box-shadow 0.2s; }
  .archive-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(10,27,51,0.08); }
  .archive-card.accent-green { border-top-color: var(--green); }
  .archive-card.accent-gold { border-top-color: var(--gold); }
  .archive-card.accent-blue { border-top-color: var(--blue); }
  .archive-card.accent-green:hover { background: var(--tint-green); }
  .archive-card.accent-gold:hover { background: var(--tint-gold); }
  .archive-card.accent-blue:hover { background: var(--tint-blue); }
  .archive-card-thumb { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
  .archive-card-thumb-empty { display: flex; align-items: center; justify-content: center; padding: 1.2rem; box-sizing: border-box; text-align: center; background: linear-gradient(135deg, var(--navy) 0%, #132a4d 100%); }
  .archive-card-thumb-empty span { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em; font-size: 1.3rem; color: rgba(255,255,255,0.55); line-height: 1.15; }
  .archive-card-body { padding: 1.4rem 1.5rem 1.6rem; }
  .archive-card-date { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); margin-bottom: 0.5rem; font-weight: 600; }
  .archive-card-title { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--navy); line-height: 1.3; margin: 0 0 0.6rem; }
  .archive-card-excerpt { color: var(--slate); font-size: 0.92rem; line-height: 1.65; margin: 0; }
  .archive-pagination { margin-top: 2.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 0.6rem; }
  .archive-pagination .page-numbers { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: var(--navy); background: #fff; text-decoration: none; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 6px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
  .archive-pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
  .archive-pagination a.page-numbers:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

  /* Same "tinted background, white card floating on top" treatment as
     the regular .page-content-wrap/.page-content-body pattern used by
     Blog/Previews/Tutorials/Betting Tools - wider (1600px vs 820px)
     since GoodLayers content is typically multi-column and needs more
     room than plain reading text does. Deliberately just the outer
     container this time - no typography overrides, no heading dividers,
     no internal section-grouping - those were tried and reverted after
     making the page feel more confusing rather than less. This piece
     alone (the container) wasn't the problem. */
  .page-content-wrap-full { margin: 0 auto; padding: 3.5rem clamp(1.5rem, 4vw, 5rem) 4rem; box-sizing: border-box; background: var(--tint-blue); }
  .gdlr-card { max-width: 1600px; margin: 0 auto; background: var(--paper); border-radius: 16px; padding: 2.6rem clamp(1.5rem, 4vw, 3rem); box-shadow: 0 20px 50px rgba(10,27,51,0.08); }

  /* Light tinted page background with the actual content sitting in a
     distinct white card floating on top - matching the "card on tint"
     look single.php ended up with (originally a side-effect of fixing
     an unintended background bleed there, kept intentionally here since
     it reads as a deliberate, polished treatment). */
  /* No max-width here deliberately - .page-content-body (below) already
     has its own narrower max-width and its own centering, so this outer
     wrap's only real job is the padding and background. Giving IT a
     max-width too was redundant for content width, and had the
     unintended side effect of also capping the background color, which
     is exactly what caused visible white gutters on wide screens (real
     screenshots showed vertical white strips on both edges once the
     viewport exceeded 1800px) - removing it lets the background go
     fully edge-to-edge while the inner content stays exactly as narrow
     and centered as before. */
  .page-content-wrap { margin: 0 auto; padding: 3.5rem clamp(1.5rem, 4vw, 5rem) 4rem; box-sizing: border-box; background: var(--tint-blue); }
  .page-content-body { background: var(--paper); border-radius: 16px; padding: 2.6rem clamp(1.5rem, 4vw, 3rem); box-shadow: 0 20px 50px rgba(10,27,51,0.08); }
  .page-content-body { max-width: 820px; margin: 0 auto; }

  /* Single post template (single.php) - Previews, Blog, and Tutorials
     posts all share this styling since they share the one template.
     Comprehensive typography here since real post content varies a lot
     (headings, links, lists, images, blockquotes) and previously had
     zero custom styling at all, just Astra's bare defaults.

     Header is a dedicated, bespoke treatment - centered (matching the
     shared .page-header-band used by archives/interior pages, after
     an earlier left-aligned version was tried and moved away from).
     Same strengthened scrim as before either way, since the
     sports-equipment photo is brighter/busier than the stadium photo
     the shared component uses and needed real testing to confirm text
     stayed readable against it regardless of alignment. */
  .single-header { position: relative; background-size: cover; background-position: center 55%; padding: 5rem clamp(1.5rem, 4vw, 5rem) 4rem; overflow: hidden; min-height: 260px; display: flex; align-items: center; justify-content: center; }
  .single-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,27,51,0.86) 0%, rgba(10,27,51,0.68) 45%, rgba(10,27,51,0.9) 100%); }
  .single-header-inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; width: 100%; text-align: center; }
  .single-header-title { font-family: 'Barlow', sans-serif; font-weight: 700; color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.25; margin: 0 auto; text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.9); }

  .single-post-wrap { max-width: 820px; margin: 0 auto; padding: 3.5rem clamp(1.5rem, 4vw, 5rem) 5rem; background: var(--paper); }
  .single-post-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.03em; }
  .single-post-meta-dot { color: var(--line); }
  .single-post-featured-img { border-radius: 12px; overflow: hidden; margin-bottom: 2.4rem; }
  .single-post-featured-img img { display: block; width: 100%; height: auto; }

  .single-post-content { font-size: 1.05rem; line-height: 1.75; color: var(--ink); }
  .single-post-content p { margin: 0 0 1.4rem; }
  .single-post-content h2 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1.3; margin: 2.4rem 0 1rem; color: var(--ink); }
  .single-post-content h3 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1.35; margin: 2rem 0 0.9rem; color: var(--ink); }
  .single-post-content h4 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.1rem; margin: 1.6rem 0 0.7rem; color: var(--ink); }
  .single-post-content strong { color: var(--ink); font-weight: 700; }
  .single-post-content em { color: var(--slate); }
  .single-post-content a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(27,169,232,0.35); text-underline-offset: 2px; transition: color 0.2s; }
  .single-post-content a:hover { color: #1490c9; }
  .single-post-content ul, .single-post-content ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
  .single-post-content li { margin-bottom: 0.55rem; line-height: 1.7; }
  .single-post-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.6rem 0; display: block; }
  .single-post-content blockquote { border-left: 3px solid var(--green); background: var(--tint-blue); padding: 1.1rem 1.4rem; margin: 1.8rem 0; border-radius: 0 8px 8px 0; font-style: italic; color: var(--ink); }
  .single-post-content blockquote p:last-child { margin-bottom: 0; }
  .single-post-content hr { border: none; border-top: 1px solid var(--line); margin: 2.2rem 0; }
  .single-post-content table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.95rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .single-post-content table th, .single-post-content table td { padding: 0.7rem 0.9rem; border: 1px solid var(--line); text-align: left; }
  .single-post-content table th { background: var(--paper-2); font-weight: 700; }

  @media (max-width: 600px) {
    .single-header { padding: 3.2rem 1.5rem 2.4rem; min-height: 200px; }
    .single-post-wrap { padding: 2.5rem 1.5rem 3.5rem; }
    .single-post-content { font-size: 0.98rem; }
    .single-post-content h2 { font-size: 1.35rem; }
    .single-post-content h3 { font-size: 1.15rem; }
  }

  .page-content-body p { color: var(--slate); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.4rem; }
  .page-content-body h2 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--navy); margin: 2.2rem 0 1rem; line-height: 1.25; }
  /* Automatic lead-paragraph styling - pure CSS, targets whichever
     paragraph happens to come first, no manual markup needed. */
  .page-content-body > p:first-of-type { font-size: 1.2rem; line-height: 1.7; color: var(--ink); }
  /* Section separation for multi-topic pages (e.g. Betting Tools, which
     covers several different calculators one after another) - every H2
     after the first automatically gets a divider line and a small
     label breaking it, so distinct sections don't just blur into one
     continuous scroll. Fully automatic: works the same whether a page
     has 2 H2s or 10, no per-page setup. */
  .page-content-body h2:not(:first-of-type) { margin-top: 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--line); position: relative; }
  .page-content-body h2:not(:first-of-type)::before { content: ''; position: absolute; top: -4px; left: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 2px; }
  .page-content-body h3 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--navy); margin: 1.8rem 0 0.9rem; line-height: 1.3; }
  .page-content-body h4 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--navy); margin: 1.5rem 0 0.7rem; line-height: 1.3; }
  .page-content-body ul, .page-content-body ol { color: var(--slate); font-size: 1.05rem; line-height: 1.8; margin: 0 0 1.4rem 1.4rem; }
  .page-content-body li { margin-bottom: 0.4rem; }
  .page-content-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
  .page-content-body a:hover { color: var(--green); }
  .page-content-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.5rem 0; display: block; }
  .page-content-body table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.95rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-content-body table th, .page-content-body table td { padding: 0.7rem 0.9rem; border: 1px solid var(--line); text-align: left; }
  .page-content-body table th { background: var(--paper-2); font-weight: 700; }
  .page-content-body strong, .page-content-body b { color: var(--navy); }
  .page-content-body blockquote { border-left: 3px solid var(--gold); padding: 0.3rem 0 0.3rem 1.4rem; margin: 1.6rem 0; color: var(--ink); font-style: italic; }

  /* Auto-generated table of contents (see main.js for the JS that
     builds this from whatever H2s already exist). */
  .auto-toc { background: var(--tint-green); border-radius: 10px; padding: 1.4rem 1.6rem; margin: 0 0 2.2rem; }
  .auto-toc-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green); margin-bottom: 0.7rem; }
  .auto-toc ul { list-style: none; margin: 0; padding: 0; }
  .auto-toc li { margin-bottom: 0.5rem; }
  .auto-toc a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; }
  .auto-toc a:hover { color: var(--green); }
  .auto-toc a::before { content: '→'; color: var(--green); }

  /* Universal closing CTA - see page.php for why this lives in the
     template rather than being part of any editable post content. */
  .page-closing-cta { margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 5rem) 4rem; background: var(--tint-blue); }
  .page-closing-cta-inner { max-width: 820px; margin: 0 auto; background: var(--navy); border-radius: 14px; padding: 2.4rem clamp(1.5rem, 4vw, 2.6rem); text-align: center; }
  .page-closing-cta h3 { font-family: 'Barlow', sans-serif; font-weight: 700; color: #fff; font-size: 1.4rem; margin: 0 0 0.6rem; }
  .page-closing-cta p { color: #9FB3C4; font-size: 0.95rem; margin: 0 0 1.4rem; }
  .page-closing-cta .btn { display: inline-block; background: linear-gradient(135deg, var(--blue), var(--green)); color: #fff; padding: 0.7rem 1.7rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 0.92rem; transition: transform 0.2s, box-shadow 0.2s; }
  .page-closing-cta .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,169,232,0.35); color: #fff; }

  @media (max-width: 600px) {
    .page-closing-cta-inner { padding: 1.8rem 1.4rem; }
  }

  @media (max-width: 1100px) {
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 700px) {
    .page-header-band { padding: 2.8rem 1.5rem 2.4rem; }
    .page-content-wrap { padding: 2.4rem 1.5rem 3rem; }
    .page-content-wrap-full { padding: 2.4rem 1.5rem 3rem; }
    .gdlr-card { padding: 1.6rem 1.3rem; border-radius: 12px; }
    .page-content-body { padding: 1.6rem 1.3rem; border-radius: 12px; }
    .top-bar { padding: 0.24rem 1.5rem; }
    .top-bar-inner { gap: 0.85rem; }
    .archive-grid { grid-template-columns: 1fr; }
  }

  /* GoodLayers price-table element (used on Services page) - restyled to
     match the homepage's own .price-card look: white card, rounded corners,
     hover lift + tint, navy header/button. This targets GoodLayers' own
     class names directly so it doesn't touch the plugin's code, just how
     it looks. !important is used deliberately since these classes carry
     inline style attributes from the plugin's own admin settings, which
     normal specificity can't reliably beat. */
  .gdlr-core-price-table-column { padding: 0 0.65rem !important; box-sizing: border-box; margin-bottom: 1.3rem; }
  .gdlr-core-price-table { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 10px !important; overflow: hidden; transition: background 0.25s, transform 0.2s, box-shadow 0.2s; }
  .gdlr-core-price-table:hover { background: var(--tint-blue) !important; transform: translateY(-4px); box-shadow: 0 14px 26px rgba(10,27,51,0.08); }
  .gdlr-core-price-table-head { background: var(--navy) !important; padding: 1.6rem 1.5rem !important; position: relative; overflow: hidden; }
  .gdlr-core-price-table-head::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 14px 14px; pointer-events: none; }
  /* Icon wasn't styled at all before - newly added here, merged into
     this established block rather than kept as a separate rule
     elsewhere, since it needs the same !important treatment as
     everything else in this block for the same reason (GoodLayers'
     own inline styles from its admin settings). */
  .gdlr-core-price-table-icon { position: relative !important; width: 46px !important; height: 46px !important; line-height: 42px !important; border-radius: 50% !important; margin: 0 auto 0.8rem !important; border: 2px solid var(--blue) !important; background: rgba(255,255,255,0.06) !important; color: var(--blue) !important; font-size: 1.1rem !important; }
  .gdlr-core-price-table-title { color: #fff !important; opacity: 1 !important; font-family: 'Barlow', sans-serif !important; font-weight: 700 !important; }
  .gdlr-core-price-table-caption { color: rgba(255,255,255,0.68) !important; opacity: 1 !important; }
  .gdlr-core-price-table-price { color: var(--navy) !important; font-family: 'Bebas Neue', sans-serif !important; padding: 1.5rem !important; }
  .gdlr-core-price-table-content-wrap { padding: 0 1.5rem !important; }
  .gdlr-core-price-table-content li, .gdlr-core-price-table-content p { border-bottom: 1px dashed var(--line) !important; padding: 0.5rem 0 !important; color: var(--slate) !important; }
  .gdlr-core-price-table-button { display: block !important; text-align: center !important; background: var(--navy) !important; color: #fff !important; border-radius: 5px !important; margin: 1.5rem !important; padding: 0.68rem !important; font-weight: 700 !important; text-decoration: none !important; }
  .gdlr-core-price-table-button:hover { background: var(--green) !important; color: var(--navy) !important; }

  .tut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2.3rem; }
  .tut-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: background 0.25s, transform 0.2s, box-shadow 0.2s; }
  .tut-card:hover { background: var(--tint-blue); transform: translateY(-4px); box-shadow: 0 14px 26px rgba(10,27,51,0.08); }
  .tut-thumb { aspect-ratio: 16/9; }
  .tut-card-body { padding: 1.2rem; }
  .tut-date { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--green); margin-bottom: 0.4rem; }
  .tut-card h4 { font-size: 0.98rem; margin-bottom: 0.4rem; font-weight: 700; }
  .tut-card p { font-size: 0.84rem; color: var(--slate); }

  .contact-inner { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 3rem; align-items: start; }
  .contact-inner.solo { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .twitter-feed-band { position: relative; }
  .twitter-feed-inner { position: relative; display: flex; align-items: flex-end; gap: 3rem; max-width: 1800px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 5rem); box-sizing: border-box; }
  .twitter-feed-photo { position: absolute; top: -130px; left: -20px; width: 440px; z-index: 2; }
  .twitter-feed-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 34px rgba(0,0,0,0.45)); }
  .twitter-feed-content { flex: 1 1 auto; min-width: 0; max-width: 1200px; margin-left: 490px; }
  .twitter-feed-band .eyebrow-lbl { color: var(--green); }
  .twitter-feed-wrap { max-width: none; margin: 1.6rem 0 0; text-align: left; }
  .twitter-feed-panel { background: #fff; border-radius: 12px; box-shadow: 0 16px 36px rgba(10,27,51,0.28); max-height: 340px; overflow-y: auto; padding: 0; }
  /* Override the Custom Twitter Feeds plugin's default styling with a single
     bordered, scrollable panel (header + tweets stacked inside). Uses the
     plugin's real classes (confirmed from page source) rather than guessed
     ones. !important is needed since the plugin ships its own inline styles. */
  /* Note: no forced display:grid here anymore - the plugin's own JS likely
     computes tweet positions itself (masonry-style), and fighting that with
     a CSS grid override was almost certainly what caused the broken height
     and missing content. */
  #ctf .ctf-loadmore, #ctf .ctf-load-more, #ctf .ctf-more-btn, #ctf .ctf-loadmore-wrap { display: none !important; }
  #ctf .ctf-item { background: #fff !important; border: none !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 1rem 1.1rem !important; box-shadow: none !important; }
  #ctf .ctf-author-name { color: var(--navy) !important; font-weight: 700 !important; }
  #ctf .ctf-author-screenname { color: var(--slate) !important; }
  #ctf .ctf-tweet-text { font-size: 0.92rem !important; line-height: 1.55 !important; color: var(--ink) !important; }
  #ctf .ctf-corner-logo { opacity: 0.45; }
  .contact-form-card { background: #fff; border-radius: 12px; padding: 2rem 2rem 1.6rem; box-shadow: 0 16px 40px rgba(10,27,51,0.55); }
  .contact-form-card .sec-title { color: var(--ink) !important; }
  .contact-form-card .form-group label { color: var(--slate); }
  .form-group { margin-bottom: 1rem; }
  .form-group label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; color: #C9D6E3; }
  .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 6px; font-family: 'Barlow', sans-serif; font-size: 0.9rem; background: #fff; }
  .form-group textarea { min-height: 100px; resize: vertical; }
  .submit-btn { display: block; margin: 0 auto; background: var(--navy); color: #fff; border: none; padding: 0.8rem 1.8rem; border-radius: 6px; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: background 0.25s, transform 0.2s; }
  .submit-btn:hover { background: var(--green); color: var(--navy); transform: translateY(-2px); }
  .submit-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

  /* Enquiry form additions: service dropdown, "Other" reveal, and the
     submit status message. Kept close to the existing .form-group input
     styling so nothing looks bolted on. */
  .form-group select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; box-sizing: border-box !important; height: 3rem !important; line-height: 3rem !important; padding-top: 0 !important; padding-bottom: 0 !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%2367727C' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 16px; padding-right: 2.4rem !important; padding-left: 0.9rem !important; color: var(--ink); }
  .form-group select.highlight { border-color: var(--green); background-color: var(--tint-green); transition: background-color 1.2s ease, border-color 1.2s ease; }
  #ba-other-service-wrap { max-height: 0; overflow: hidden; opacity: 0; margin-bottom: 0 !important; padding-bottom: 0; transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease; }
  #ba-other-service-wrap.show { max-height: 100px; opacity: 1; margin-bottom: 1rem !important; }
  .req { color: #c0392b; font-weight: 700; }
  .form-status { font-size: 0.85rem; margin-bottom: 0.9rem; min-height: 1px; }
  .form-status.is-success { color: #1f9c53; font-weight: 600; }
  .form-status.is-error { color: #c0392b; font-weight: 600; }

  /* Homepage newsletter section — replaces the old "Latest Tutorials"
     section (which duplicated the Video Tutorials section higher up the
     page). Placed after Premium Services rather than at the very bottom
     of the page, so it's seen while engagement is fresh rather than only
     by visitors who scroll all the way down.

     LIGHT SECTION, split two-column layout: real signup form on the
     left (unchanged functionality throughout every visual iteration —
     see ba-newsletter-form-hero), a purely decorative mockup of an
     actual received email on the right (aria-hidden, no inputs).
     Section background is warm cream rather than blue, since the
     mockup's own "email body" area uses blue to match the real
     template — keeping the outer section blue too made everything
     wash into one undifferentiated block of blue. */
  /* Background/color only now - horizontal padding and max-width come
     from the real <section> wrapper in front-page.php (matching the
     exact same .band > section pattern Premium Services and every other
     colored band on the page already uses), instead of custom values
     here that turned out not to precisely match the shared section
     rule's own padding/max-width math - confirmed as the actual cause
     of a persistent left-edge misalignment against other section
     headings on the page. */
  .newsletter-band-light { background: var(--paper-2); position: relative; }
  /* min-width:0 on grid items - without this, a CSS Grid column will
     never shrink below its content's intrinsic minimum width by
     default. That's exactly what let the nowrap heading below force
     this whole grid (and the email mockup card sitting in the other
     column) wider than the viewport on mobile, causing real horizontal
     overflow/cut-off content rather than wrapping - confirmed from
     real phone screenshots, not just theoretical. */
  .newsletter-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
  .newsletter-split > * { min-width: 0; }
  /* Heading uses the shared .sec-title class (added directly in
     front-page.php) instead of custom styling here, so font-size,
     line-height, and margin exactly match every other section heading
     on the page (Coaching, Premium Services, Sport Focus, etc). */
  .newsletter-copy .sub { color: var(--slate); font-size: 1.02rem; margin: 0 0 1.8rem; line-height: 1.6; }
  .newsletter-copy .sub .hl-blue { background: rgba(27,169,232,0.12); color: var(--blue); padding: 0.02em 0.35em; border-radius: 4px; font-weight: 700; }
  .newsletter-copy .benefit-row { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.8rem; }
  .newsletter-copy .benefit { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); font-size: 0.92rem; font-weight: 600; }
  .newsletter-copy .benefit svg { width: 18px; height: 18px; flex-shrink: 0; color: #1f9c53; }
  /* Was a form (email input + submit button) styled as a pill-shaped
     row - now a single link-button out to the Beehiiv-hosted subscribe
     page, since the inline AJAX version kept failing and the cause
     wasn't pinned down. Same visual weight/branding as the old button
     had, just without an input alongside it since there's nothing to
     collect on this page anymore. */
  .signup-row-btn { display: inline-block; background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; padding: 0 1.8rem; height: 3.4rem; line-height: 3.4rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; text-decoration: none; box-shadow: 0 10px 24px rgba(27,169,232,0.3); transition: transform 0.2s, box-shadow 0.2s; margin-bottom: 0.9rem; }
  .signup-row-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(27,169,232,0.4); color: #fff; }
  .newsletter-copy .trust-line { color: var(--slate); font-size: 0.82rem; margin: 0; }
  .newsletter-copy .trust-line strong { color: var(--ink); }

  /* Decorative email mockup (right column). Widened without heightening:
     card is 540px wide, but font sizes/vertical padding/match-card height
     all stay compact so extra width doesn't inflate the overall size -
     just reduces the wasted side space the narrower version had. */
  .card-wrap { position: relative; max-width: 660px; margin: 0 auto; padding: 1rem 0; pointer-events: none; }
  .card-glow { position: absolute; top: 50%; left: 50%; width: 700px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(27,169,232,0.3) 0%, rgba(46,204,113,0.18) 45%, transparent 75%); filter: blur(8px); z-index: 0; }
  .email-window { position: relative; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 48px rgba(10,27,51,0.18); opacity: 0; transform: translateY(16px); animation: email-arrive 0.6s cubic-bezier(0.2,0.8,0.2,1) 0.15s forwards; }
  @keyframes email-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  .email-chrome { padding: 1rem 2.2rem 0.9rem; }
  .email-subject-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
  .email-subject { font-size: 0.82rem; color: var(--ink); font-weight: 700; }
  .email-tag { background: var(--paper-2); color: var(--slate); font-size: 0.62rem; padding: 0.14rem 0.45rem; border-radius: 3px; }
  .email-sender-row { display: flex; align-items: center; gap: 0.55rem; }
  .email-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 5px; }
  .email-avatar img { width: 100%; height: 100%; object-fit: contain; }
  .email-sender-name { font-size: 0.72rem; font-weight: 700; color: var(--ink); }
  .email-sender-addr { font-size: 0.62rem; color: var(--slate); }
  .email-time { font-size: 0.62rem; color: var(--slate); margin-left: auto; white-space: nowrap; }
  .email-body-area { background: var(--tint-blue); padding: 1.2rem 2rem; }
  .email-content-card { background: #fff; border-radius: 12px; padding: 1.5rem 2.3rem 1.3rem; text-align: center; position: relative; overflow: hidden; }
  .email-content-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue) 0%, var(--green) 50%, var(--gold) 100%); }
  .email-card-logo { width: 105px; margin: 0.5rem auto 0.9rem; display: block; }
  .email-card-title { font-weight: 700; font-size: 0.98rem; color: var(--ink); margin: 0 0 0.35rem; line-height: 1.3; }
  .email-card-subtitle { font-size: 0.74rem; color: var(--slate); line-height: 1.45; margin: 0 0 0.9rem; }
  .email-byline { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: 1.1rem; }
  .email-byline-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.6rem; flex-shrink: 0; }
  .email-byline-name { font-size: 0.66rem; color: var(--blue); font-weight: 600; text-decoration: underline; }
  .email-social { display: flex; gap: 0.35rem; margin-left: 0.3rem; }
  .email-social a { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--slate); }
  .email-social svg { width: 9px; height: 9px; }
  .match-banner { background: linear-gradient(135deg, var(--blue), #1690c4); color: #fff; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.5rem; border-radius: 6px; margin-bottom: 0.6rem; }
  .match-heading { color: var(--blue); font-weight: 700; font-size: 0.75rem; text-align: left; margin-bottom: 0.45rem; }
  .match-card { border-radius: 8px; overflow: hidden; position: relative; height: 100px; margin-bottom: 1rem; }
  .match-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center 65%; }
  .match-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,27,51,0.4), rgba(10,27,51,0.7)); }
  .match-card-content { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
  .team-badge { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.6rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
  .team-badge.lahti { color: #8B1E3F; }
  .team-badge.hjk { color: #0A3D91; }
  .match-vs { color: var(--gold); font-weight: 700; font-style: italic; font-size: 0.95rem; }
  .sample-note { font-size: 0.58rem; color: var(--slate); margin-bottom: 0.3rem; }
  .email-card-divider { border: none; border-top: 1px dashed var(--line); margin: 0 0 0.9rem; }
  .email-card-body { text-align: left; font-size: 0.72rem; color: var(--ink); line-height: 1.55; margin: 0; }

  @media (max-width: 1100px) {
    .newsletter-split { grid-template-columns: 1fr; }
  }
  @media (max-width: 1100px) {
    /* Newsletter heading: nowrap was only ever meant for the
       two-column desktop layout. Once .newsletter-split stacks to a
       single column (see the 1100px breakpoint above), there's no
       longer a reason to force one line, and forcing it on a narrow
       phone is exactly what caused real horizontal overflow. */
    .newsletter-copy .sec-title { white-space: normal; }
  }

  @media (max-width: 600px) {
    .card-glow { width: 90vw; height: 400px; }

    /* Email mockup card gets genuinely tight on narrow phones - the
       subject-line text alone can exceed available width before even
       accounting for the "Inbox" tag next to it. Reduce padding
       further, shrink the subject text, and let the two tightest rows
       (subject+tag, byline+socials) wrap instead of silently
       overflowing off the edge of the card. */
    .email-chrome { padding: 0.9rem 1.2rem 0.8rem; }
    .email-subject-row { flex-wrap: wrap; row-gap: 0.3rem; }
    .email-subject { font-size: 0.74rem; }
    .email-sender-row { flex-wrap: wrap; row-gap: 0.3rem; }
    .email-time { margin-left: 0; }
    .email-body-area { padding: 1rem 1.1rem; }
    .email-content-card { padding: 1.3rem 1.1rem 1.1rem; }
    .email-card-logo { width: 88px; }
    .email-card-title { font-size: 0.88rem; }
    .email-byline { flex-wrap: wrap; row-gap: 0.4rem; }
  }

  .tweet-embed-wrap { width: 100%; overflow: hidden; border-radius: 10px; }
  .tweet-widget-card { background: rgba(255,255,255,0.94); border-radius: 14px; padding: 1.1rem 1.1rem 0.6rem; box-shadow: 0 12px 28px rgba(10,27,51,0.5); }
  .tweet-widget-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
  .tweet-widget-icon { width: 34px; height: 34px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .tweet-widget-icon svg { width: 16px; height: 16px; }
  .tweet-widget-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); font-weight: 600; }
  .tweet-widget-handle { display: block; font-size: 0.95rem; font-weight: 700; color: var(--ink); text-decoration: none; }
  .tweet-widget-handle:hover { color: var(--blue); }
  .tweet-static-card { display: block; background: var(--tint-blue); border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 0.7rem; text-decoration: none; transition: background 0.2s; }
  .tweet-static-card:hover { background: var(--tint-green); }
  .tweet-static-card p { font-size: 0.85rem; color: var(--ink); line-height: 1.5; margin-bottom: 0.4rem; }
  .tweet-static-meta { font-size: 0.75rem; color: var(--blue); font-weight: 700; }
  .tweet-view-all { display: block; text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--navy); text-decoration: none; padding: 0.5rem 0; border-top: 1px solid var(--line); margin-top: 0.3rem; }
  .tweet-view-all:hover { color: var(--blue); }
  .tweet-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin-bottom: 1rem; transition: background 0.25s; }
  .tweet-card:hover { background: var(--tint-blue); }
  .tweet-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
  .tweet-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--green); display: flex; align-items: center; justify-content: center; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.8rem; }
  .tweet-head strong { font-size: 0.85rem; }
  .tweet-head span { font-size: 0.78rem; color: var(--slate); }
  .tweet-card p { font-size: 0.86rem; color: var(--ink); white-space: pre-line; }

  footer { background: linear-gradient(180deg, rgba(10,27,51,0.85) 0%, rgba(10,27,51,0.7) 45%, rgba(10,27,51,0.9) 100%), url('assets/images/footer-ball-pitch.png') 2% 92%/cover no-repeat; color: #E4EAEF; padding: 5rem clamp(1.5rem, 4vw, 5rem) 3rem; position: relative; overflow: hidden; box-sizing: border-box; }
  .stadium-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
  .stadium-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1c3a63 0%, #14283f 30%, #0A1B33 55%, #0A1B33 100%); }
  .stadium-lights { position: absolute; top: 6%; left: -5%; right: -5%; height: 26%; background-image: repeating-linear-gradient(90deg, rgba(217,164,65,0.22) 0px, rgba(217,164,65,0.22) 3px, transparent 3px, transparent 30px); filter: blur(16px); opacity: 0.55; }
  .stadium-stand { position: absolute; top: 16%; left: -5%; right: -5%; height: 26%; background: linear-gradient(180deg, rgba(90,60,30,0.4) 0%, rgba(90,60,30,0.12) 100%); filter: blur(22px); }
  .stadium-grass { position: absolute; bottom: 0; left: 0; right: 0; height: 42%; background: linear-gradient(180deg, rgba(27,90,60,0.55) 0%, rgba(12,45,32,0.75) 100%); filter: blur(5px); }
  .stadium-grass::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(96deg, rgba(46,204,113,0.14) 0 2px, transparent 2px 7px); filter: blur(1.5px); }
  .stadium-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,27,51,0.82) 0%, rgba(10,27,51.0.7) 45%, rgba(10,27,51,0.88) 100%); }
  .footer-wave { position: absolute; top: -1px; left: 0; width: 100%; height: 60px; line-height: 0; z-index: 2; pointer-events: none; }
  .footer-wave svg { width: 100%; height: 100%; display: block; }
  .footer-grid { max-width: 1800px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; position: relative; z-index: 1; }
  footer img { height: 52px; margin-bottom: 0.8rem; }
  footer p { font-size: 0.84rem; max-width: 280px; }
  footer h5 { color: var(--green); font-size: 0.8rem; margin-bottom: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  footer ul { list-style: none; padding: 0; margin: 0; }
  footer li { font-size: 0.84rem; margin-bottom: 0.5rem; line-height: 1.3; }
  .footer-bottom { text-align: center; font-size: 0.76rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid #1E3A5C; position: relative; z-index: 1; }

  .social-row { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
  .social-badge { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-2, #122845); border: 1px solid #1E3A5C; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; }
  .social-badge:hover { background: var(--blue); transform: translateY(-3px); }
  .social-badge svg { width: 16px; height: 16px; }

  .contact-badge-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
  .contact-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(46,204,113,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .contact-icon svg { width: 16px; height: 16px; }
  .contact-badge-row div span { display: block; font-size: 0.72rem; color: #A9BAC7; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; }
  .contact-badge-row div strong { font-size: 0.85rem; color: #fff; font-weight: 600; }

  .footer-newsletter button, .footer-newsletter .subscribe-link { display: block; width: 100%; text-align: center; padding: 0.7rem; border-radius: 22px; border: none; background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: transform 0.2s, filter 0.25s; text-decoration: none; box-sizing: border-box; }
  .footer-newsletter button:hover, .footer-newsletter .subscribe-link:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }

  /* Middle tier: the full desktop nav (all 7 items + logo + Subscribe)
     needs real room. Below 900px it switches to the hamburger menu, but
     between there and full desktop width there's a squeeze zone where
     items were wrapping their own text mid-word (e.g. "WTA Picks"
     breaking onto two lines) since nothing tightened up before that
     point. This tier closes that gap. */
  @media (max-width: 1400px) and (min-width: 901px) {
    nav { padding: 0 clamp(1.25rem, 3vw, 3rem); }
    nav ul { gap: 1.2rem; }
    nav ul a { font-size: 0.86rem; padding: 0.55rem 0.4rem; }
    nav .cta { padding: 0.6rem 1.1rem; font-size: 0.88rem; }
    nav img { height: 46px; margin-right: 1.2rem; }
    .nav-right { margin-left: 1.2rem; }
  }

  @media (max-width: 900px) {
    nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 1rem 1.5rem; }
    .mobile-menu-toggle { display: flex; grid-column: 1; justify-self: start; }
    nav img { grid-column: 2; justify-self: center; margin-right: 0; }
    .nav-right { grid-column: 3; justify-self: end; margin-left: 0; margin-right: 0 !important; }
    .nav-right .cta { padding: 0.5rem 1rem; font-size: 0.82rem; border-radius: 999px; }
    .twitter-feed-inner { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
    .twitter-feed-photo { position: static; width: 180px; margin: 0 auto; }
    .twitter-feed-content { text-align: left; width: 100%; max-width: 100%; margin-left: 0; }
    nav ul { display: none; position: absolute; top: 100%; left: 0; right: 0; height: auto; flex-direction: column; gap: 0; background: var(--navy); padding: 0.5rem 1.5rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.12); box-shadow: 0 12px 24px rgba(0,0,0,0.25); z-index: 50; grid-column: 1 / -1; }
    #ba-primary-menu { height: auto !important; }
    nav ul.mobile-open { display: flex; }
    nav ul li { width: 100%; }
    #ba-primary-menu a { display: block !important; padding: 0.85rem 0.5rem !important; }
    .hero-content { padding: 0 1.5rem; }
    .text-track { min-height: 100px; }
    .text-slide h1, .text-slide .eyebrow { white-space: nowrap; }
    .text-slide[data-ts="0"] .eyebrow { font-size: 2.55rem; }
    .text-slide[data-ts="0"] h1 { font-size: 0.9rem; }
    .text-slide[data-ts="1"] .eyebrow { font-size: 3.3rem; }
    .text-slide[data-ts="1"] h1 { font-size: 1.3rem; }
    .text-slide[data-ts="2"] .eyebrow { font-size: 2.55rem; }
    .text-slide[data-ts="2"] h1 { font-size: 1.3rem; }
    .cta-row { gap: 0.6rem; }
    .btn-primary, .btn-secondary { padding: 0.6rem 1.35rem; font-size: 0.78rem; }
    section, .band > section { padding: 3rem 1.5rem; }
    .block-grid-3, .price-grid, .tut-grid, .coach-inner, .video-feature-inner, .contact-inner { grid-template-columns: 1fr; }
    .sport-rows { padding: 0 1.5rem 1rem; }
    .sport-row { flex-direction: column; align-items: stretch; margin-bottom: 1rem; }
    .sport-row-photo { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
    .sport-row-text { padding: 1.4rem 1.4rem; }
    .vid-card { flex: 0 0 80%; }
    .steps { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; }
    .football-icon { display: none; }
    .coach-photo-wrap { min-height: auto; }
    .coach-breakout { position: static; height: auto; width: 100%; }
    .hero-wave { display: none; }
    .archive-pagination { gap: 0.5rem; }
    .archive-pagination .page-numbers { padding: 0.45rem 0.7rem; font-size: 0.8rem; }
    .stats-row { flex-wrap: nowrap; gap: 0.6rem; }
    .stat { flex: 1 1 0; min-width: 0; }
    .stat-num { font-size: clamp(1.5rem, 7.5vw, 2.1rem); }
    .stat-label { font-size: 0.6rem; line-height: 1.3; }
  }

  /* ============================================================
     PREMIUM BETTING SERVICES PAGE (page-premium-betting-services.php)
     Everything below is namespaced with svc- to keep it fully
     separate from any other page's styles - this page's structure
     (bands, tabs, pricing cards) is specific to it alone.
     ============================================================ */

  .svc-icon-svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
  .svc-inner { max-width: 820px; margin: 0 auto; padding: 0 2rem; }

  /* Note: no .svc-hero here anymore - this page's header now uses the
     same shared ba_render_page_header_band() function as Blog/Previews/
     Tutorials/Betting Tools, for full visual consistency across all
     interior pages rather than a bespoke hero unique to this one. */
  .svc-eyebrow { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }

  .svc-band-title { font-family: 'Barlow', sans-serif; font-weight: 700; color: var(--navy); font-size: 1.9rem; margin: 0 0 1.5rem; display: flex; align-items: center; gap: 0.6rem; }
  .svc-icon-tag { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
  .svc-icon-tag .svc-icon-svg { width: 17px; height: 17px; }
  .svc-sub-title { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.25rem; margin: 1.8rem 0 0.9rem; }

  /* Band 2: YouTube - switched to a light background after review;
     stacking this directly under the equally-dark header band felt
     heavy with no visual breathing room between them, and the video
     embed itself already provides a strong visual focal point, so a
     background photo here would have competed with it rather than
     added anything. Photo removed from the inline style in the PHP
     file to match - not currently used anywhere on this page, but
     kept as a theme asset in case a good spot for it comes up later. */
  .svc-band-youtube { padding: 4rem 2rem; background: #fff; }
  .svc-band-youtube .svc-icon-tag { background: var(--tint-blue); color: var(--blue); }
  .svc-band-youtube .svc-band-title { color: var(--navy); }
  .svc-band-youtube p { color: var(--slate); line-height: 1.75; font-size: 1.02rem; }
  .svc-band-youtube strong { color: var(--ink); }
  .svc-band-youtube a { color: var(--blue); }
  .svc-video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; margin: 1.5rem 0; background: #000; box-shadow: 0 14px 34px rgba(10,27,51,0.15); }
  .svc-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* Band 3: Tabbed services - light band, deliberately no photo since
     there's too much text per panel for a background image to not
     fight for attention. */
  .svc-band-tabs { background: var(--tint-blue); padding: 4.5rem 2rem; }
  .svc-tab-section-inner { max-width: 1100px; margin: 0 auto; }
  .svc-tab-section-head { text-align: center; margin-bottom: 2rem; }
  .svc-tab-section-head h2 { font-family: 'Barlow', sans-serif; font-weight: 700; color: var(--navy); font-size: 2rem; margin: 0; }
  .svc-tab-bar { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 1.6rem; flex-wrap: wrap; }
  .svc-tab-btn { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.5rem; border-radius: 999px; background: #fff; border: 2px solid var(--line); font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--slate); cursor: pointer; transition: all 0.2s; }
  .svc-tab-btn .svc-tab-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tint-blue); color: var(--slate); transition: all 0.2s; }
  .svc-tab-btn .svc-tab-icon .svc-icon-svg { width: 14px; height: 14px; }
  .svc-tab-btn.active { background: color-mix(in srgb, var(--c) 15%, white); border-color: var(--c); color: var(--navy); box-shadow: 0 6px 16px rgba(10,27,51,0.1); }
  .svc-tab-btn.active .svc-tab-icon { background: var(--c); color: #fff; }
  /* No hover rule existed before this - the "too dark" hover the user
     saw was almost certainly a generic default button style from the
     parent theme filling the gap, not anything intentional here.
     Matches each tab's own signature color on hover (border + icon
     badge), same treatment as .active but without the shadow, so
     hover reads as "you're about to switch to this" rather than
     "this is now selected". Navy text throughout for reliable
     readability against every one of the three accent colors. */
  /* Explicit background + !important here as a safeguard - the first
     version of this rule only set border-color/text color and left
     background unset, which should have kept the button's own white
     background, but real testing showed a solid, unintended color fill
     appearing on hover instead (likely a generic button-hover style
     from the Astra parent theme filling in the gap this rule left).
     Being explicit about every property removes that ambiguity rather
     than relying on inheriting whatever else might apply. */
  .svc-tab-btn:not(.active):hover { background: color-mix(in srgb, var(--c) 15%, white) !important; border-color: var(--c) !important; color: var(--navy) !important; }
  .svc-tab-btn:not(.active):hover .svc-tab-icon { background: var(--c) !important; color: #fff !important; }
  .svc-tab-btn[data-tab="mentorship"] { --c: var(--gold); }
  .svc-tab-btn[data-tab="coaching"] { --c: var(--blue); }
  .svc-tab-btn[data-tab="consultancy"] { --c: var(--green); }
  .svc-tab-panel { display: none; background: #fff; border-radius: 16px; padding: 2.8rem clamp(1.5rem,4vw,3.2rem); box-shadow: 0 20px 50px rgba(10,27,51,0.08); border-top: 5px solid var(--c); max-width: 820px; margin: 0 auto; }
  .svc-tab-panel.active { display: block; }
  .svc-tab-panel[data-panel="mentorship"] { --c: var(--gold); }
  .svc-tab-panel[data-panel="coaching"] { --c: var(--blue); }
  .svc-tab-panel[data-panel="consultancy"] { --c: var(--green); }
  .svc-tab-panel > p:first-of-type { font-size: 1.15rem; color: var(--ink); }
  .svc-tab-panel p { color: var(--slate); line-height: 1.75; font-size: 1rem; }
  .svc-tab-panel strong { color: var(--ink); }
  .svc-tab-panel h3 { color: var(--navy); font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.25rem; margin: 1.8rem 0 0.9rem; }
  .svc-inline-cta-btn { display: inline-block; margin-top: 0.6rem; background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; padding: 0.85rem 2rem; border-radius: 999px; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.95rem; text-decoration: none; box-shadow: 0 10px 24px rgba(27,169,232,0.3); transition: transform 0.2s, box-shadow 0.2s; }
  .svc-inline-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(27,169,232,0.4); color: #fff; }
  .svc-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin: 1rem 0 1.6rem; }
  .svc-feature-item { display: flex; gap: 0.7rem; background: var(--tint-blue); border-radius: 10px; padding: 0.9rem 1rem; }
  .svc-feature-item .svc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; margin-top: 0.5rem; }
  .svc-feature-item span { font-size: 0.88rem; color: var(--ink); line-height: 1.5; }
  .svc-feature-item strong { color: var(--navy); }
  .svc-plain-list { color: var(--slate); line-height: 1.9; padding-left: 1.3rem; }

  /* Band 4: Trust/Credentials - gradient for now (see the PHP file's
     comment - no photo supplied yet for this specific band). */
  .svc-band-trust { padding: 4.5rem 2rem; text-align: center; position: relative; }
  .svc-band-trust-inner { max-width: 720px; margin: 0 auto; position: relative; }
  .svc-band-trust h2 { font-family: 'Barlow', sans-serif; font-weight: 700; color: #fff; font-size: 1.9rem; margin: 0 0 1.2rem; }
  .svc-band-trust p { color: #C3D2E0; font-size: 1.05rem; line-height: 1.75; }
  .svc-band-trust strong { color: #fff; }
  .svc-trust-stats { display: flex; justify-content: center; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
  .svc-trust-stat { text-align: center; }
  .svc-trust-stat .svc-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; color: var(--gold); }
  .svc-trust-stat .svc-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #9FB3C4; text-transform: uppercase; letter-spacing: 0.05em; }

  /* Band 5: Pricing */
  .svc-band-pricing { background: var(--tint-blue); padding: 4.5rem 2rem; }
  .svc-band-pricing-head { text-align: center; margin-bottom: 2.2rem; }
  .svc-band-pricing-head h2 { font-family: 'Barlow', sans-serif; font-weight: 700; color: var(--navy); font-size: 2rem; margin: 0; }
  .svc-price-grid { max-width: 1250px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.3rem; }
  .svc-price-grid .reveal:nth-child(1) { transition-delay: 0s; }
  .svc-price-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
  .svc-price-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
  .svc-price-grid .reveal:nth-child(4) { transition-delay: 0.3s; }
  .svc-price-grid .reveal:nth-child(5) { transition-delay: 0.4s; }
  .svc-price-card { flex: 1 1 340px; max-width: 380px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 28px rgba(10,27,51,0.08); border-top: 4px solid var(--c, var(--blue)); transition: background 0.25s, transform 0.2s, box-shadow 0.2s; cursor: default; }
  .svc-price-card:hover { background: color-mix(in srgb, var(--c, var(--blue)) 6%, white); transform: translateY(-5px); box-shadow: 0 18px 34px rgba(10,27,51,0.14); }
  .svc-price-head { text-align: center; padding: 1.6rem 1.2rem 1rem; }
  .svc-price-head .svc-icon { width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 0.6rem; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c, var(--blue)) 10%, white); color: var(--c, var(--blue)); }
  .svc-price-head .svc-icon .svc-icon-svg { width: 20px; height: 20px; }
  .svc-price-head h3 { margin: 0 0 0.3rem; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy); font-family: 'Barlow', sans-serif; font-weight: 700; }
  .svc-price-head .svc-caption { font-size: 0.72rem; color: var(--slate); text-transform: uppercase; }
  .svc-price-amount { text-align: center; padding: 0.4rem 1rem 0.8rem; font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; color: var(--c, var(--blue)); }
  .svc-price-card ul { list-style: none; margin: 0; padding: 0 1.3rem; }
  .svc-price-card li { font-size: 0.85rem; color: var(--slate); padding: 0.5rem 0; border-bottom: 1px dashed var(--line); }
  .svc-price-card li::before { content: '\2713 '; color: var(--green); font-weight: 700; }
  /* Navy by default, green on hover, white text throughout - per
     explicit request, distinct from the gradient .btn/.submit-btn
     styles used elsewhere. */
  .svc-price-btn { display: block; text-align: center; margin: 1.3rem; padding: 0.7rem; background: var(--navy); color: #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-decoration: none; cursor: pointer; border: none; width: calc(100% - 2.6rem); transition: background 0.2s, transform 0.2s, box-shadow 0.2s; font-family: 'Barlow', sans-serif; }
  .svc-price-btn:hover { background: var(--green); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(46,204,113,0.35); }

  /* Band 6: Enquiry form - real photo background (services-tunnel-band.jpg).
     Form itself reuses .contact-form-card/.form-group/.submit-btn from
     the homepage's existing form styling; svc-enquiry-card only adds
     the centering this page's band structure needs. */
  .svc-band-enquiry { padding: 4.5rem 2rem; background-size: cover; background-position: center; }
  .svc-enquiry-card { max-width: 620px; margin: 0 auto; }

  @media (max-width: 700px) {
    .svc-feature-grid { grid-template-columns: 1fr; }
    .svc-band-youtube, .svc-band-tabs, .svc-band-trust, .svc-band-pricing, .svc-band-enquiry { padding: 3rem 1.5rem; }
    .svc-tab-panel { padding: 2rem 1.4rem; }
    .svc-trust-stats { gap: 1.6rem; }
  }

  /* ============================================================
     WTA PICKS SEASON PASS LANDING PAGE (page-wta-picks.php)
     Namespaced with wta- to keep it self contained from every
     other page's styles, same approach as the svc- prefix used
     on the Premium Services page above.
     ============================================================ */

  .wta-hero { position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center 60%; overflow: hidden; }
  .wta-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,27,51,0.82) 0%, rgba(10,27,51,0.68) 45%, rgba(10,27,51,0.88) 100%); }
  .wta-hero-inner { position: relative; z-index: 2; max-width: 780px; padding: 4.5rem clamp(1.5rem, 4vw, 3rem); color: #fff; }
  .wta-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); margin-bottom: 0.9rem; }
  .wta-h1 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; margin-bottom: 1.1rem; color: #fff; }
  .wta-hero-sub { color: #D9E2EA; font-size: 1.1rem; line-height: 1.65; max-width: 700px; margin: 0 auto 2rem; }
  .wta-cta { display: inline-block; background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; font-weight: 700; font-size: 1.02rem; padding: 1rem 2.4rem; border-radius: 999px; text-decoration: none; box-shadow: 0 14px 30px rgba(27,169,232,0.35); transition: transform 0.2s, box-shadow 0.2s; }
  .wta-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(27,169,232,0.45); color: #fff; }
  .wta-hero-price { margin-top: 1.4rem; font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: 0.02em; color: #fff; }
  .wta-hero-price .wta-discount-badge { display: block; width: fit-content; font-family: 'Barlow', sans-serif; margin: 0.35rem auto 0; }
  .wta-hero-price-sub { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: #9FB3C4; margin-top: 0.4rem; }

  .wta-band { padding: 4.5rem clamp(1.5rem, 4vw, 5rem); max-width: none; width: 100%; margin: 0; }
  .wta-proof-inner, .wta-why-inner, .wta-included-inner { max-width: 820px; margin: 0 auto; text-align: center; }
  .wta-eyebrow-sm { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); margin-bottom: 0.6rem; }
  .wta-h2 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--ink); margin-bottom: 1.1rem; line-height: 1.25; }
  .wta-h2.on-dark { color: #fff; }
  .wta-lead { color: var(--slate); font-size: 1.05rem; line-height: 1.75; max-width: 680px; margin: 0 auto; }
  .wta-lead.on-dark { color: #C9D6E3; }

  .wta-proof { background: #fff; }
  .wta-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.4rem; text-align: center; }
  .wta-proof-card { background: var(--tint-green); border-radius: 12px; padding: 1.8rem 1.4rem; transition: background 0.35s ease, transform 0.25s ease, box-shadow 0.25s ease; }
  .wta-proof-card:hover { background: #FFF6DC; transform: translateY(-5px); box-shadow: 0 16px 32px rgba(217,164,65,0.22); }
  .wta-proof-grid .reveal:nth-child(1) { transition-delay: 0s; }
  .wta-proof-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
  .wta-proof-grid .reveal:nth-child(3) { transition-delay: 0.24s; }

  .wta-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.4rem; text-align: left; }
  .wta-why-card { background: #fff; border-radius: 12px; padding: 1.8rem 1.5rem; box-shadow: 0 10px 30px rgba(10,27,51,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .wta-why-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(10,27,51,0.1); }
  .wta-why-card-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--blue); line-height: 1; margin-bottom: 0.6rem; }
  .wta-why-card h4 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--navy); margin-bottom: 0.5rem; }
  .wta-why-card p { color: var(--slate); font-size: 0.92rem; line-height: 1.6; }
  .wta-why-grid .reveal:nth-child(1) { transition-delay: 0s; }
  .wta-why-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
  .wta-why-grid .reveal:nth-child(3) { transition-delay: 0.24s; }

  .wta-compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.4rem; text-align: left; max-width: 780px; margin-left: auto; margin-right: auto; }
  .wta-compare-col { background: #fff; border-radius: 12px; padding: 1.8rem 1.6rem; border: 1.5px solid var(--line); }
  .wta-compare-col.highlight { background: var(--navy); border-color: var(--navy); }
  .wta-compare-label { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 1rem; }
  .wta-compare-col.highlight .wta-compare-label { color: #fff; }
  .wta-compare-list { list-style: none; margin: 0; padding: 0; color: var(--slate); font-size: 0.92rem; line-height: 1.9; }
  .wta-compare-col.highlight .wta-compare-list { color: #C9D6E3; }
  .wta-compare-list li { padding-left: 1.4rem; position: relative; }
  .wta-compare-list li::before { content: '\2013'; position: absolute; left: 0; color: var(--slate); }
  .wta-compare-col.highlight .wta-compare-list li::before { content: '\2713'; color: var(--green); font-weight: 700; }
  .wta-compare-grid .reveal:nth-child(1) { transition-delay: 0s; }
  .wta-compare-grid .reveal:nth-child(2) { transition-delay: 0.15s; }
  .wta-check-list .reveal:nth-child(1) { transition-delay: 0s; }
  .wta-check-list .reveal:nth-child(2) { transition-delay: 0.1s; }
  .wta-check-list .reveal:nth-child(3) { transition-delay: 0.2s; }
  .wta-check-list .reveal:nth-child(4) { transition-delay: 0.3s; }
  .wta-proof-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem; color: #1f9c53; line-height: 1; margin-bottom: 0.5rem; }
  .wta-proof-label { color: var(--slate); font-size: 0.88rem; line-height: 1.5; }

  .wta-why { background: var(--tint-blue); }
  .wta-exclusive { background: #FBF3E1; }

  .wta-included { background: #fff; }
  .wta-check-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 2.4rem; margin: 2rem auto 0; text-align: left; max-width: 820px; }
  .wta-check-list li { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.7rem 0; font-size: 1rem; color: var(--slate); line-height: 1.6; }
  .wta-check-list .check-badge { margin-top: 0.2rem; }

  .wta-final-cta { position: relative; text-align: center; background-image: url('assets/images/wta-final-cta-bg.webp'); background-size: cover; background-position: center 40%; overflow: hidden; }
  .wta-final-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,27,51,0.88) 0%, rgba(10,27,51,0.82) 100%); z-index: 0; }
  .wta-final-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
  .wta-final-cta .wta-cta { margin-top: 1.6rem; }
  .wta-fineprint { margin-top: 1.1rem; font-size: 0.82rem; color: #7f92a8; }

  .wta-interest-form { max-width: 440px; margin: 2rem auto 0; text-align: left; }
  .wta-form-question { color: #fff; font-weight: 700; font-size: 1.05rem; text-align: center; margin-bottom: 1.1rem; }
  .wta-form-choice-row { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
  .wta-choice-btn { background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; border: none; font-weight: 700; font-size: 0.92rem; padding: 0.85rem 1.6rem; border-radius: 999px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
  .wta-form-step[data-step="payment"] .wta-form-choice-row { flex-direction: column; align-items: stretch; }
  .wta-form-step[data-step="payment"] .wta-choice-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center !important; text-align: center !important; gap: 0.5rem; }
  .wta-form-step[data-step="payment"] .wta-choice-btn.crypto-btn { position: relative; }
  .wta-form-step[data-step="payment"] .wta-choice-btn.crypto-btn .wta-discount-badge { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); margin: 0; }
  .wta-choice-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27,169,232,0.35); color: #fff; }
  .wta-choice-btn.ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.3); color: #C9D6E3; }
  .wta-choice-btn.ghost:hover { border-color: #fff; color: #fff; box-shadow: none; }
  .wta-back-btn { display: block; background: none; border: none; color: #7f92a8; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 1rem 0 0; margin: 0 auto; text-align: center; transition: color 0.2s; }
  .wta-discount-badge { display: inline-block; margin-left: 0.5rem; background: var(--gold); color: #1B2430; font-size: 0.66rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
  .wta-discount-note { margin-top: 0.9rem; font-size: 0.82rem; color: #7f92a8; text-align: center; }
  .wta-back-btn:hover { color: #fff; }
  .wta-final-cta .form-group label { color: #C9D6E3; }
  .wta-optional-lbl { font-weight: 400; color: #7f92a8; }
  .wta-final-cta .submit-btn { width: 100%; margin-top: 0.4rem; background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); color: #fff; }
  .wta-final-cta .submit-btn:hover { opacity: 0.9; color: #fff; }
  .wta-form-done-msg { color: #fff; text-align: center; font-size: 1.02rem; line-height: 1.6; }
  .wta-form-done-msg a { color: var(--green); font-weight: 700; }

  @media (max-width: 900px) {
    .wta-proof-grid { grid-template-columns: 1fr; }
    .wta-why-grid { grid-template-columns: 1fr; }
    .wta-compare-grid { grid-template-columns: 1fr; }
    .wta-check-list { grid-template-columns: 1fr; }
    .wta-band { padding: 3rem 1.5rem; }
  }