/*
 * Grip Classifier - page styles.
 *
 * GENERATED FILE. Lifted from the standalone tool's inline <style> at
 * testapi.golfwiz.ai/grip-web and scoped under #gw-grip-app so it cannot fight
 * the theme. Re-scope from that source rather than hand-editing selectors here.
 *
 * Scoping rules:
 *   - `body[data-state="..."]` and `body.has-result` still target the REAL
 *     document body, because grip-web.js does `var body = document.body` and
 *     sets both there. Only the descendant part moves inside the wrapper.
 *   - The tool's `body { overflow-x: hidden }` is NOT carried over. On a
 *     wrapper div it creates a scroll container and breaks the desktop
 *     `position: sticky` table of contents.
 *
 * Not part of the LESS build on purpose, so it never lands in all.css and load
 * on every page of the site.
 */

/* Inter is inherited from the theme's global stylesheet (styles/all.css),
   which self-hosts every weight this page uses. No font files ship with this
   folder. */


/* ── stacking ─────────────────────────────────────────────────────────── */
/*
 * The theme's header is `#site-header { position: sticky; z-index: 2 }`, and
 * the tool's own layers run up to z-index 1000 (plus an inline 1400 on the
 * Turnstile holder). In a shared stacking context those beat the header, so the
 * camera stage and the video player paint over it while scrolling.
 *
 * Giving the wrapper its own stacking context at z-index 1 traps every one of
 * those layers below the header, whatever value they ask for. `position:
 * relative` is safe for the tool's fixed-position layers - only transform,
 * filter and perspective would re-root those, and none is used here.
 *
 * The certificate modal is the one layer that legitimately covers the whole
 * viewport, so the wrapper is lifted above the header while it is open. The
 * script toggles that modal with the `hidden` attribute (grip-web.js:1780).
 */
#gw-grip-app { position: relative; z-index: 1; }
#gw-grip-app:has(#certModal:not([hidden])) { z-index: 1000; }

/* ── tool styles (scoped) ─────────────────────────────────────────────── */

    #gw-grip-app, #gw-grip-app *, #gw-grip-app *::before, #gw-grip-app *::after { box-sizing: border-box; }

    #gw-grip-app {
      --primary:    #1A8AFF;
      --primary-press: #1472d6;
      --ph-red:        #ee3124;   /* Pizza Hut red, onboard call-to-actions */
      --ph-red-press:  #cf2519;
      --red:        #f22d2d;
      --red-ink:    #d82020;
      --red-text:   #f22d2d;
      --ink:        #151a1e;
      --muted:      #5f6872;
      --faint:      #7a838d;
      --line:       #e5e7eb;
      --line-2:     #d7dce2;
      --soft:       #f7f8fa;
      --soft-2:     #f7f8fa;
      --white:      #ffffff;
      --green:      #36b889;
      --green-deep: #167855;
      --green-bg:   rgba(54,184,137,0.14);
      --green-soft: #c9f3e4;
      --amber:      #b7791f;
      --stage:      #0f1115;
      --camera-gradient: #0f1115;
      --r-sm: 8px; --r-md: 8px; --r-lg: 8px;
      --shadow:  0 10px 24px rgba(21,26,30,0.07);
      --shadow-2: 0 18px 42px rgba(21,26,30,0.12);
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    #gw-grip-app {
      margin: 0; background: var(--white); color: var(--ink);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      -webkit-font-smoothing: antialiased; line-height: 1.5; /* overflow-x dropped: breaks .toc-sticky */
    }
    #gw-grip-app img, #gw-grip-app svg, #gw-grip-app video, #gw-grip-app canvas { max-width: 100%; }
    #gw-grip-app .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; }
    @media (min-width: 640px) { #gw-grip-app .wrap { padding: 32px; } }
    @media (min-width: 1024px) { #gw-grip-app .wrap { padding: 40px 48px 48px; } }
    #gw-grip-app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    #gw-grip-app .hero { grid-area: hero; max-width: 620px; margin: 0; align-self: center; }/* App Store rating badge above the heading (left-aligned) */
    
    #gw-grip-app .hero-rating { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--tint, #edf6ff); border: 1px solid var(--line); }
    #gw-grip-app .hero-stars { display: inline-flex; align-items: center; gap: 2px; color: #f5a623; }
    #gw-grip-app .hero-stars svg { width: 16px; height: 16px; flex: none; display: block; }
    #gw-grip-app .hero-rating-text { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1; }/* Heading typography per the design template (Inter 700); size stays responsive,
       metrics scaled to em so they track each size (template: -1.15px/38.4px ≈ -0.03em). */
    
    #gw-grip-app .page-title { margin: 0 0 12px; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 30px; line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
    #gw-grip-app .page-title span { display: block; color: var(--primary); }
    #gw-grip-app .page-subtitle { font-size: 16px; line-height: 1.52; color: var(--muted); font-weight: 500; margin: 0; max-width: 34rem; }/* All three benefit chips stay on ONE line at every width. Sizing is fluid so they
       compact as the column narrows, in the desktop two-column layout the hero is only
       ~417px wide, where full-size chips would push "Instant Results" onto a second row.
       overflow-x is just the safety valve for extremely cramped widths. */
    
    #gw-grip-app .hero-cta-chips { display: flex; flex-wrap: nowrap; gap: clamp(5px, 0.6vw, 7px); margin: 18px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #gw-grip-app .hero-cta-chips::-webkit-scrollbar { display: none; }
    #gw-grip-app .hero-cta-chip { flex: none; display: inline-flex; align-items: center; gap: clamp(4px, 0.5vw, 5px); min-height: 32px; padding: 0 clamp(8px, 0.95vw, 11px); border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink-2, #374151); font-size: clamp(12px, 1.15vw, 14px); font-weight: 600; line-height: 1; white-space: nowrap; }
    #gw-grip-app .hero-cta-chip svg { width: clamp(12px, 1.2vw, 15px); height: clamp(12px, 1.2vw, 15px); flex: none; color: var(--green-deep); }
    @media (max-width: 560px) { #gw-grip-app .hero-cta-chip { min-height: 30px; } }
    @media (min-width: 640px) {
      #gw-grip-app .page-title { font-size: 36px; }
    }
    @media (min-width: 1024px) {
      #gw-grip-app .page-title { font-size: 44px; }
      #gw-grip-app .page-subtitle { font-size: 16px; }
    }/* Layout: hero, camera, result, history */

    
    #gw-grip-app .tool {
      display: grid; gap: clamp(12px, 1.8vw, 18px);
      grid-template-columns: 1fr;
      grid-template-areas: "hero" "left" "res" "hist"; align-items: start;
    }
    #gw-grip-app .tool-left { grid-area: left; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    #gw-grip-app .res { grid-area: res; }
    #gw-grip-app .hist { grid-area: hist; }
    body:not(.has-history) #gw-grip-app .hist { display: none; }
    body:not(.has-result) #gw-grip-app .res { display: none; }
    body:not(.has-result) #gw-grip-app .tool { grid-template-areas: "hero" "left" "hist"; }/* while locking in / capturing the grip, clear the screen back to just the camera */
    
    body[data-state="counting"] #gw-grip-app .res { display: none; }
    body[data-state="counting"] #gw-grip-app .tool { grid-template-areas: "hero" "left" "hist"; }
    @media (min-width: 900px) {/* Idle: hero row grows to the camera's height (which spans both rows), so the
         hero text vertically centers against the camera window; history sits below.
         body:not(.has-result) is repeated here so this beats the single-column
         mobile rule of the same specificity declared above. */
      
      #gw-grip-app .tool, body:not(.has-result) #gw-grip-app .tool { grid-template-columns: minmax(300px, 0.78fr) minmax(480px, 1.22fr); grid-template-areas: "hero left" "hist left"; grid-template-rows: 1fr auto; column-gap: clamp(18px, 3vw, 34px); row-gap: clamp(16px, 2.4vw, 24px); }/* With a reading: the result spans the full width below; history stays reachable
         under the hero (grip history survives across scans, unlike the stance page). */
      
      body.has-result #gw-grip-app .tool {
        grid-template-columns: minmax(300px, 0.78fr) minmax(480px, 1.22fr);
        grid-template-areas: "hero left" "hist left" "res res";
        grid-template-rows: 1fr auto auto;
        column-gap: clamp(18px, 3vw, 34px);
        row-gap: clamp(20px, 3vw, 34px);
      }/* While re-scanning the result row drops back out of the grid (declared after
         the has-result rule so it wins during counting even with a result kept). */
      
      body[data-state="counting"] #gw-grip-app .tool { grid-template-columns: minmax(300px, 0.78fr) minmax(480px, 1.22fr); grid-template-areas: "hero left" "hist left"; grid-template-rows: 1fr auto; }
      body.has-result #gw-grip-app .hero { max-width: none; align-self: center; }
      body.has-result #gw-grip-app .res { scroll-margin-top: 18px; }
    }
    #gw-grip-app .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }/* ── Stage / camera ─────────────────────────────────────── */

    
    #gw-grip-app .stage {
      position: relative; aspect-ratio: 16 / 10; width: 100%;
      border-radius: 24px; overflow: hidden; background: var(--camera-gradient);
      border: 0; box-shadow: 0 18px 40px rgba(13,21,29,0.16); display: grid; place-items: center;
      /* leave a gap above the camera when it auto-scrolls into view (standalone);
         the embedded/WordPress path adds its own header offset via the host bridge. */
      scroll-margin-top: clamp(16px, 3vw, 28px);
    }
    @media (max-width: 560px) { #gw-grip-app .stage { aspect-ratio: 3 / 4; } }
    #gw-grip-app #video { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--camera-gradient); }/* hide the native mobile "play" overlay/controls on the live feed */
    
    #gw-grip-app #video::-webkit-media-controls { display: none !important; }
    #gw-grip-app #video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
    #gw-grip-app #video::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; }/* Grip reference guide: an example address pose overlaid on the live camera so
       the golfer can copy the framing (hands + club visible). */

    
    #gw-grip-app .overlay-graphic {
      grid-area: 1/1; position: absolute; inset: 2% 0; margin: auto; height: 96%; width: auto; max-width: 100%;
      object-fit: contain; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .4s var(--ease);
      filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45));
    }
    body[data-state="live"] #gw-grip-app .overlay-graphic, body[data-state="counting"] #gw-grip-app .overlay-graphic { opacity: 0.9; }

    #gw-grip-app .stage::after { content: ""; grid-area: 1/1; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 22% 72%, rgba(0,0,0,0.18) 100%); }
    #gw-grip-app .ticks { grid-area: 1/1; position: absolute; inset: 14px; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
    body[data-state="live"] #gw-grip-app .ticks, body[data-state="counting"] #gw-grip-app .ticks { opacity: 0.75; }
    #gw-grip-app .ticks span { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.9); }
    #gw-grip-app .ticks .tl { top:0; left:0; border-right:0; border-bottom:0; border-radius: 6px 0 0 0; }
    #gw-grip-app .ticks .tr { top:0; right:0; border-left:0; border-bottom:0; border-radius: 0 6px 0 0; }
    #gw-grip-app .ticks .bl { bottom:0; left:0; border-right:0; border-top:0; border-radius: 0 0 0 6px; }
    #gw-grip-app .ticks .br { bottom:0; right:0; border-left:0; border-top:0; border-radius: 0 0 6px 0; }

    #gw-grip-app .scan { grid-area: 1/1; position: absolute; left: 0; right: 0; height: 2px; z-index: 9; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: 0; pointer-events: none; }
    body[data-state="live"] #gw-grip-app .scan { opacity: 0.95; animation: scan 2.4s var(--ease) infinite; }
    @keyframes scan { 0% { top: 8%; } 50% { top: 88%; } 100% { top: 8%; } }

    #gw-grip-app .onboard {
      grid-area: 1/1; position: absolute; inset: 0; z-index: 12; display: none;
      flex-direction: column; align-items: stretch; justify-content: center;
      text-align: left; overflow: hidden; isolation: isolate; padding: 0; gap: 0; color: #fff;
      background: transparent;
    }
    body[data-state="idle"] #gw-grip-app .onboard, body[data-state="error"] #gw-grip-app .onboard { display: flex; }
    #gw-grip-app .onboard-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: clamp(16px, 2.6vw, 26px); gap: 14px; }
    #gw-grip-app .ob-action { position: relative; width: 100%; max-width: 350px; margin: 0 auto; }
    #gw-grip-app .ob-action-title { margin: 0 0 46px; color: rgba(255,255,255,0.92); font-size: clamp(23px, 2.4vw, 26px); font-weight: 700; text-align: center; }
    #gw-grip-app .ob-controls { position: relative; z-index: 2; width: 100%; min-width: 0; }

    #gw-grip-app .seg-group { margin-bottom: 9px; }
    #gw-grip-app .seg-group > .seg-lbl { display: block; margin: 0 0 9px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.82); letter-spacing: 0; text-align: left; }
    #gw-grip-app .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
    #gw-grip-app .seg-btn {
      appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
      min-height: 40px; border: 1px solid rgba(255,255,255,0.28); border-radius: 11px; background: transparent;
      padding: 9px 9px; font: inherit; font-size: clamp(12.5px, 1.3vw, 14px); font-weight: 700; color: #fff; line-height: 1.05;
      transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
      -webkit-tap-highlight-color: transparent;
    }
    #gw-grip-app .seg-btn svg { width: 16px; height: 16px; flex: none; }
    #gw-grip-app .seg-btn:hover { border-color: rgba(255,255,255,0.55); }
    #gw-grip-app .seg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    #gw-grip-app .seg-btn[aria-pressed="true"] { background: #fff; color: #051627; border-color: #fff; box-shadow: 0 7px 18px rgba(0,0,0,0.18); }/* ── Onboard step 1: looping instruction clip ─────────────
       The idle stage opens on the how-it-works video with a single call to action sitting
       inside the frame near the bottom. Tapping the video or the button swaps to step 2
       (handedness + start + the AI/privacy notes) by putting .ob-open on .onboard. */

    
    #gw-grip-app .ob-intro { position: absolute; inset: 0; z-index: 2; display: block; cursor: pointer; }
    #gw-grip-app .onboard.ob-open .ob-intro { display: none; }
    #gw-grip-app .ob-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--camera-gradient); }/* keeps the button legible over a bright frame of the clip */
    
    #gw-grip-app .ob-intro::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(6,10,16,0.72)); }/* Selector is .ob-try.btn, not .ob-try: the base .btn rule is defined LATER in this
       sheet with equal specificity, so a plain .ob-try loses to it and the button silently
       inherits .btn's pill corners (999px) and small font. #startBtn escapes that only
       because an id outranks a class. Matching #startBtn here: 48/44px tall, 8px corners. */
    
    #gw-grip-app .ob-try.btn {
      /* Centred with auto margins, NOT translateX(-50%): .btn:hover sets its own
         transform (translateY(-1px)), which would replace the centering translate and
         snap the button half its width to the right on hover. */
      position: absolute; left: 0; right: 0; margin-inline: auto;
      bottom: clamp(12px, 4.5%, 26px);
      z-index: 3; width: min(330px, calc(100% - 28px));
      height: 48px; min-height: 48px; border-radius: 8px; gap: 8px;
      font-size: clamp(18px, 1.95vw, 20px); font-weight: 800;
      box-shadow: 0 12px 28px rgba(26,138,255,0.34);
    }/* step 2 stays hidden until the visitor opts in */
    
    #gw-grip-app .onboard .onboard-card { display: none; }
    #gw-grip-app .onboard.ob-open .onboard-card { display: flex; }/* AI + privacy notes under the start button *//* The auto margins on .ob-action absorb the spare height above and below it, so the
       title + buttons stay centred while the privacy note settles on the bottom edge. */

    
    
    #gw-grip-app .onboard.ob-open .onboard-card { justify-content: flex-start; gap: 0; }
    #gw-grip-app .onboard.ob-open .ob-action { margin-top: auto; margin-bottom: auto; }
    #gw-grip-app .ob-notes { width: 100%; max-width: 350px; margin: 0 auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.14); display: grid; gap: 7px; }
    #gw-grip-app .ob-note { display: flex; align-items: flex-start; gap: 8px; text-align: left; color: rgba(255,255,255,0.66); font-size: clamp(10.5px, 1.1vw, 12px); line-height: 1.45; }
    #gw-grip-app .ob-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px; opacity: .85; }
    #gw-grip-app .ob-note a { color: rgba(255,255,255,0.92); text-decoration: underline; text-underline-offset: 2px; }/* Phone view: compact the onboard stack so it fits the tall 3/4 stage with no
       scroll and no cutoff, down to ~320px-wide screens. */

    
    @media (max-width: 560px) {
      #gw-grip-app .onboard-card { padding: 12px 14px 10px; gap: 8px; }
      #gw-grip-app .ob-action { max-width: 350px; }
      #gw-grip-app .ob-action-title { font-size: 21px; margin-bottom: 40px; }
      #gw-grip-app .seg-group { margin-bottom: 6px; }
      #gw-grip-app .seg-group > .seg-lbl { margin-bottom: 7px; font-size: 13px; }
      #gw-grip-app .seg-btn { min-height: 38px; border-radius: 10px; font-size: 12.5px; }
      #gw-grip-app #startBtn { height: 44px; min-height: 44px; margin-top: 2px; font-size: 14px; }
      #gw-grip-app .ob-try.btn { height: 44px; min-height: 44px; font-size: 18px; }
      #gw-grip-app .ob-notes { margin-top: 8px; padding-top: 8px; gap: 6px; }
      #gw-grip-app .ob-note { font-size: 10.5px; line-height: 1.4; }
    }

    #gw-grip-app .countdown { grid-area: 1/1; position: absolute; inset: 0; z-index: 11; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
    body[data-state="counting"] #gw-grip-app .countdown { display: flex; }
    #gw-grip-app .count-num { color: #fff; font-size: clamp(80px, 20vw, 168px); font-weight: 800; line-height: 0.86; text-shadow: 0 8px 40px rgba(0,0,0,0.55); animation: pop .9s var(--ease); }
    #gw-grip-app .count-cap { margin-top: 6px; font-size: clamp(13px, 2.4vw, 16px); font-weight: 800; letter-spacing: 0.125em; text-transform: uppercase; color: #fff; }
    @keyframes pop { 0% { transform: scale(0.55); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

    #gw-grip-app .done-overlay { grid-area: 1/1; position: absolute; inset: 0; z-index: 12; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(20px, 4vw, 30px); background: var(--camera-gradient); }
    body[data-state="done"] #gw-grip-app .done-overlay { display: flex; animation: rise .4s var(--ease); }
    body[data-state="done"] #gw-grip-app #video, body[data-state="done"] #gw-grip-app .ticks, body[data-state="done"] #gw-grip-app .scan, body[data-state="done"] #gw-grip-app .overlay-graphic, body[data-state="done"] #gw-grip-app .stage::after { display: none; }/* Unlike the stance page, grip keeps body.has-result forever (results survive
       re-scans), so the done-overlay is tied to data-state="done" only, stopping
       the camera must bring back the onboard with the handedness toggle. */
    
    #gw-grip-app .done-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 460px; width: 100%; }
    #gw-grip-app .done-msg { margin: 0; color: #fff; font-weight: 800; font-size: clamp(15px, 2.6vw, 18px); }
    #gw-grip-app .done-sub { margin: 0; color: rgba(255,255,255,0.76); font-size: clamp(12px, 2vw, 13.5px); }
    #gw-grip-app .stage-chip { grid-area: 1/1; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 10; display: none; align-items: center; gap: 8px; max-width: calc(100% - 24px); text-align: center; line-height: 1.3; font-size: clamp(13px, 2.9vw, 15px); font-weight: 700; color: #fff; padding: 9px 16px; border-radius: 16px; background: rgba(10,10,12,0.62); border: 1px solid rgba(255,255,255,0.2); }
    body[data-state="live"] #gw-grip-app .stage-chip, body[data-state="paused"] #gw-grip-app .stage-chip { display: inline-flex; }
    #gw-grip-app .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ph-red); box-shadow: 0 0 0 0 rgba(238,49,36,0.45); animation: pulse 1.6s infinite; flex: none; }
    body[data-state="paused"] #gw-grip-app .pulse { background: var(--green); animation: none; }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(238,49,36,0.45); } 70% { box-shadow: 0 0 0 9px rgba(238,49,36,0); } 100% { box-shadow: 0 0 0 0 rgba(238,49,36,0); } }

    #gw-grip-app .flip-fab { grid-area: 1/1; position: absolute; top: 34px; right: 34px; z-index: 9; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(23,23,23,0.14); background: rgba(245,245,245,0.9); color: var(--ink); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,0.22); transition: transform .15s var(--ease), background .2s var(--ease); }
    #gw-grip-app .flip-fab img { width: 24px; height: 24px; display: block; object-fit: contain; pointer-events: none; }
    #gw-grip-app .flip-fab:hover:not(:disabled) { background: rgba(255,255,255,0.96); }
    #gw-grip-app .flip-fab:active:not(:disabled) { transform: scale(0.92) rotate(180deg); }
    #gw-grip-app .flip-fab:disabled { opacity: 0.4; cursor: not-allowed; }
    body[data-state="live"] #gw-grip-app .flip-fab:not([hidden]), body[data-state="counting"] #gw-grip-app .flip-fab:not([hidden]), body[data-state="paused"] #gw-grip-app .flip-fab:not([hidden]) { display: grid; }
    @media (max-width: 560px) { #gw-grip-app .flip-fab { width: 48px; height: 48px; } }

    #gw-grip-app .flash { grid-area: 1/1; position: absolute; inset: 0; z-index: 20; background: #fff; opacity: 0; pointer-events: none; }
    #gw-grip-app .flash.go { animation: flash .5s ease-out; }
    @keyframes flash { 0% { opacity: 0; } 12% { opacity: 0.8; } 100% { opacity: 0; } }/* ── Buttons / controls ─────────────────────────────────── */

    
    #gw-grip-app .controls { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
    #gw-grip-app .cam > .controls { display: none; }
    body[data-state="live"] #gw-grip-app .cam > .controls, body[data-state="counting"] #gw-grip-app .cam > .controls, body[data-state="paused"] #gw-grip-app .cam > .controls { display: flex; }
    #gw-grip-app .btn {
      appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: clamp(13px, 1.6vw, 14px); line-height: 1.15; border-radius: 999px;
      min-height: 44px; flex: none; padding: 6px clamp(14px, 2vw, 20px); transition: transform .15s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s;
      border: 1px solid var(--ink); background: var(--white); color: var(--ink); white-space: normal; text-align: center;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
    }
    #gw-grip-app .btn svg { width: 16px; height: 16px; flex: none; }
    #gw-grip-app .btn.grow { flex: 1 1 0; min-width: 130px; max-width: 320px; }
    #gw-grip-app .btn:hover:not(:disabled) { background: var(--ink); color: #fff; transform: translateY(-1px); }
    #gw-grip-app .btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
    #gw-grip-app .btn:disabled { opacity: 0.4; cursor: not-allowed; }
    #gw-grip-app .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(26,138,255,0.24); }
    #gw-grip-app .btn.primary:hover:not(:disabled) { background: var(--primary-press); border-color: var(--primary-press); }/* The two onboard call-to-actions are Pizza Hut red rather than the site blue.
       Scoped to these two ids/classes so every other .btn.primary stays blue. The hover
       rules must be repeated at this specificity, otherwise .btn:hover (var(--ink)) and
       .btn.primary:hover (blue) would win and the button would flash the wrong colour. */
    
    #gw-grip-app #startBtn.btn.primary, #gw-grip-app #camAgainBtn.btn.primary, #gw-grip-app #saveBtn.btn.primary, #gw-grip-app #resAgainBtn.btn.primary, #gw-grip-app .ob-try.btn.primary { background: var(--ph-red); border-color: var(--ph-red); box-shadow: 0 12px 28px rgba(238,49,36,0.30); }
    #gw-grip-app #startBtn.btn.primary:hover:not(:disabled), #gw-grip-app #camAgainBtn.btn.primary:hover:not(:disabled), #gw-grip-app #saveBtn.btn.primary:hover:not(:disabled), #gw-grip-app #resAgainBtn.btn.primary:hover:not(:disabled), #gw-grip-app .ob-try.btn.primary:hover:not(:disabled) { background: var(--ph-red-press); border-color: var(--ph-red-press); }
    #gw-grip-app #startBtn.btn.primary:focus-visible, #gw-grip-app #camAgainBtn.btn.primary:focus-visible, #gw-grip-app #saveBtn.btn.primary:focus-visible, #gw-grip-app #resAgainBtn.btn.primary:focus-visible, #gw-grip-app .ob-try.btn.primary:focus-visible { outline: 2px solid var(--ph-red); outline-offset: 3px; }
    #gw-grip-app #startBtn { align-self: stretch; width: 100%; height: 48px; min-height: 48px; margin-top: 3px; border-radius: 8px; font-size: clamp(14px, 1.5vw, 15.5px); font-weight: 800; box-shadow: 0 12px 28px rgba(26,138,255,0.28); gap: 8px; }
    #gw-grip-app #startBtn svg { width: 18px; height: 18px; display: block; }
    #gw-grip-app #startBtn span { display: block; line-height: 1; }
    #gw-grip-app .btn:focus-visible, #gw-grip-app .hist-item:focus-visible, #gw-grip-app .hist-more:focus-visible, #gw-grip-app .fb-btn:focus-visible, #gw-grip-app .cert-close:focus-visible, #gw-grip-app .cert-soc:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }/* real :focus rings (fire on touch / screen readers, where :focus-visible does not) */
    
    #gw-grip-app .flip-fab:focus, #gw-grip-app .hist-item:focus, #gw-grip-app .cert-soc:focus, #gw-grip-app .cert-close:focus, #gw-grip-app .fb-btn:focus { outline: 2px solid var(--primary); outline-offset: 2px; }

    #gw-grip-app .statusline { margin-top: clamp(14px, 2.2vw, 20px); font-size: clamp(15px, 2vw, 16.5px); color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; gap: 7px; min-height: 22px; }/* A gate warning ("no pose detected", "hands not visible") is the one thing the golfer
       has to act on, so it stops being grey body text and becomes a banner: fit-content so
       it hugs the sentence rather than stretching into a full-width bar. */
    
    #gw-grip-app .statusline.warn, #gw-grip-app .statusline.error { width: fit-content; max-width: 100%; margin-inline: auto; padding: 10px 15px; border-radius: 12px; border: 1px solid; font-weight: 800; animation: statuspop .26s var(--ease) both; }
    #gw-grip-app .statusline.warn { color: var(--warn-ink, #8a4b00); background: var(--warn-bg, #fff4e0); border-color: #f2c274; }
    #gw-grip-app .statusline.error { color: var(--red-text); background: rgba(242,45,45,0.07); border-color: rgba(242,45,45,0.32); }
    @keyframes statuspop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { #gw-grip-app .statusline.warn, #gw-grip-app .statusline.error { animation: none; } }/* Intro step: the status line describes the handedness picker and Check My Grip, which
       aren't shown until the visitor taps. visibility (not display) so its height is still
       reserved and nothing shifts when it appears. */
    
    body.ob-intro-active #gw-grip-app .statusline { visibility: hidden; }/* ── Result card ────────────────────────────────────────── */

    
    #gw-grip-app .panel { padding: 0; overflow: hidden; }
    #gw-grip-app .result { display: none; flex-direction: column; gap: 0; }
    body.has-result #gw-grip-app .result { display: flex; animation: rise .45s var(--ease); }
    @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    #gw-grip-app .result-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px 18px 18px; }

    #gw-grip-app .verdict-row { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; background: var(--camera-gradient); color: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    #gw-grip-app .verdict-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    #gw-grip-app .verdict-sub, #gw-grip-app .verdict-handed { display: inline-flex; align-items: center; min-height: 20px; padding: 4px 12px; border-radius: 999px; color: #fff; font-size: 11px; line-height: 1; font-weight: 700; }
    #gw-grip-app .verdict-sub { background: #20b96d; }
    #gw-grip-app .verdict-sub.bad { background: var(--red); }
    #gw-grip-app .verdict-handed { background: rgba(23,23,23,0.45); border: 1px solid rgba(255,255,255,0.16); }
    #gw-grip-app .verdict-name { margin: 0; font-size: clamp(20px, 4.2vw, 26px); font-weight: 700; line-height: 1.08; color: #fff; }
    #gw-grip-app .verdict-name .grip-value { color: #9ecdff; font-weight: 600; }/* Phones: put "Lead: X · Trail: Y" on its own line under "Your grip:" and keep it
       unbroken, inline it used to wrap mid-phrase ("...Trail:" / "Weak"). The fluid size
       keeps the longest pair (Lead: Neutral · Trail: Neutral) fitting down to ~320px. */
    
    @media (max-width: 639px) {
      #gw-grip-app .verdict-name .grip-value { display: block; white-space: nowrap; font-size: clamp(15px, 5vw, 22px); }
    }
    #gw-grip-app .verdict-name:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
    #gw-grip-app .verdict-desc { margin: 0; max-width: 58ch; font-size: clamp(13px, 2.2vw, 14px); line-height: 1.42; color: rgba(255,255,255,0.94); }/* captured grip photo + full-setup visual (left column of the report) */

    
    #gw-grip-app .result-visual { display: flex; flex-direction: column; gap: 12px; margin: 14px 18px 0; min-width: 0; }
    #gw-grip-app .grip-photo { min-width: 0; }
    #gw-grip-app .cmp {
      width: 100%; text-align: center; padding: 8px;
      border: 1px solid var(--line); border-radius: var(--r-md);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,255,0.92)),
        var(--white);
      box-shadow: var(--shadow);
    }
    #gw-grip-app .cmp-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
    #gw-grip-app .cmp-frame { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #0b1322; border: 1px solid rgba(15,45,73,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); display: grid; place-items: center; }
    #gw-grip-app .cmp-frame img { width: 100%; height: 100%; object-fit: contain; display: none; }
    #gw-grip-app .cmp-frame .ph { color: rgba(255,255,255,0.55); font-size: 12px; }

    #gw-grip-app .setup-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow); padding: 12px; overflow: hidden; }
    #gw-grip-app .setup-card[hidden] { display: none; }
    #gw-grip-app .setup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    #gw-grip-app .setup-head h4 { margin: 0; font-size: 13px; line-height: 1.2; font-weight: 800; color: var(--ink); }
    #gw-grip-app .setup-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 11px; font-weight: 800; }
    #gw-grip-app .setup-visual { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #f8fbff, #f1f5f9); border: 1px solid rgba(15,45,73,0.10); }
    #gw-grip-app #setupCanvas { width: 100%; height: 100%; display: block; }
    #gw-grip-app .setup-caption { display: grid; gap: 6px; margin: 10px 2px 0; max-width: none; text-align: left; color: var(--muted); font-size: 12px; line-height: 1.45; }
    #gw-grip-app .setup-caption p { margin: 0; }
    #gw-grip-app .setup-caption b { color: var(--ink); font-weight: 800; }/* Left-handed results: un-mirror the user's crop (the upload was flipped)
       and mirror the consequence visuals so draw/fade curve the correct way. */

    
    #gw-grip-app img.mirror-x { transform: scaleX(-1); }
    #gw-grip-app .tile-viz.mirror-x svg { transform: scaleX(-1); }/* per-hand: horizontal Weak / Neutral / Strong bars */

    
    #gw-grip-app .hands { display: flex; flex-direction: column; gap: 18px; }
    #gw-grip-app .hands-hint { display: none; }
    #gw-grip-app .hand { background: transparent; border-radius: 0; padding: 0; }
    #gw-grip-app .hand-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
    #gw-grip-app .hand-head .lbl { font-size: 13.5px; color: var(--ink); font-weight: 700; white-space: nowrap; }
    #gw-grip-app .hand-head .val { font-size: 13px; font-weight: 800; color: var(--green-deep); }
    #gw-grip-app .vmeter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding-bottom: 17px; }
    #gw-grip-app .zone {
      position: relative; height: 7px; padding: 0; border-radius: 999px; overflow: visible;
      background: var(--line-2); color: transparent; font-size: 0; line-height: 0;
      transition: background .45s var(--ease), transform .45s var(--ease);
    }
    #gw-grip-app .zone::after {
      content: attr(data-z); position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
      color: var(--faint); font-size: 10.5px; line-height: 1; font-weight: 700;
    }
    #gw-grip-app .zone.on { color: transparent; transform: translateY(-1px); }
    #gw-grip-app .zone.on.neutral, #gw-grip-app .zone.on.strong, #gw-grip-app .zone.on.weak { background: var(--green-deep); }
    #gw-grip-app .zone.on.off { background: var(--ink); }
    @media (max-width: 320px) { #gw-grip-app .hand-head { flex-direction: column; align-items: flex-start; gap: 2px; } }/* ── Result card ────────────────────────────────────────────────────────────
       Reads top-down as: each hand → the frame we read → ball-flight tendency.
       Uses the site's own Inter stack and tokens. */

    
    #gw-grip-app .result { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 16px); padding: clamp(14px, 2vw, 20px); }
    #gw-grip-app .rr-title { margin: 0; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 800; color: var(--ink); }
    #gw-grip-app .rr-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }/* verdict, the ball-flight sentence leads */

    
    #gw-grip-app .rr-verdict { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); align-items: center; padding: clamp(16px, 2.4vw, 24px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
    @media (min-width: 720px) { #gw-grip-app .rr-verdict { grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); } }/* Deliberately large, this sentence is the whole result; everything below is support. */
    
    #gw-grip-app .rr-headline { margin: 0 0 12px; font-size: clamp(28px, 4.6vw, 42px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 800; color: var(--ink); }
    #gw-grip-app .rr-headline em { font-style: normal; color: var(--red-text); }
    #gw-grip-app .rr-headline em.ok { color: var(--green-deep); }
    #gw-grip-app .rr-lede { margin: 0; max-width: 52ch; color: var(--muted); font-size: clamp(14px, 1.9vw, 15.5px); line-height: 1.6; }
    #gw-grip-app .rr-lede b { color: var(--ink); font-weight: 700; }/* shared figure treatment for the two reused visuals */

    
    #gw-grip-app .rr-figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    #gw-grip-app .rr-figure figcaption { display: flex; flex-direction: column; gap: 2px; text-align: center; }
    #gw-grip-app .rr-figure-k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
    #gw-grip-app .rr-figure-v { font-size: 14px; font-weight: 800; color: var(--ink); }/* capture + per-hand readings */

    
    #gw-grip-app .rr-capture { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); align-items: start; padding: clamp(14px, 2vw, 18px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }/* The crop is square and the copy beside it is short, so a 360px image column left a
       big dead area under the text. A smaller image plus centred copy closes the gap. */
    
    @media (min-width: 720px) {
      #gw-grip-app .rr-capture { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.4vw, 26px); }
    }
    #gw-grip-app .rr-shot { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    #gw-grip-app .rr-shot figcaption { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: center; }
    #gw-grip-app .rr-capture-info { min-width: 0; }
    #gw-grip-app .rr-capture-info h4 { margin: 0 0 9px; font-size: 19px; font-weight: 800; color: var(--ink); }
    #gw-grip-app .rr-capture-info p { margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.65; color: var(--muted); }/* two hand cards side by side */

    
    #gw-grip-app .rr-hands-row { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 14px); }
    @media (min-width: 720px) { #gw-grip-app .rr-hands-row { grid-template-columns: 1fr 1fr; } }
    #gw-grip-app .rr-hand { min-width: 0; padding: clamp(14px, 2vw, 20px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }/* One plain track with a green target band over the neutral third, a "YOU" marker
       pinned where the hand actually reads. The gauge says on its own whether the hand is
       inside the band, so it carries no verdict label. */

    
    #gw-grip-app .rr-gauge { position: relative; margin: 38px 0 2px; }
    #gw-grip-app .rr-gauge-track { position: relative; height: 14px; border-radius: 999px; background: var(--track, #eef1f4); }
    #gw-grip-app .rr-band { position: absolute; top: 2px; bottom: 2px; left: 33.33%; right: 33.33%; border-radius: 6px; background: #d7f0df; }/* bottom is negative, not 100%, so the stalk runs DOWN ACROSS the bar and pins the
       reading on it. At bottom:100% it stopped at the bar's top edge and read as floating. */
    
    #gw-grip-app .rr-you { position: absolute; left: var(--pos, 50%); bottom: -4px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; animation: rrdrop .45s var(--ease) both; }
    #gw-grip-app .rr-you b { position: relative; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .09em; line-height: 1; white-space: nowrap; }
    #gw-grip-app .rr-you b::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
    #gw-grip-app .rr-you::after { content: ""; width: 2px; height: 29px; background: var(--ink); }
    @keyframes rrdrop { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
    #gw-grip-app .rr-gauge-scale { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 9px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }/* .is-target is listed after .is-here on purpose: a neutral hand is both, and the
       green target reading is the one that should win. */
    
    #gw-grip-app .rr-gauge-scale .is-here { color: var(--ink); font-weight: 900; }
    #gw-grip-app .rr-gauge-scale .is-target { color: var(--green-deep); font-weight: 900; }
    @media (prefers-reduced-motion: reduce) { #gw-grip-app .rr-you { animation: none; } }

    #gw-grip-app .rr-hands { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
    #gw-grip-app .rr-hand { min-width: 0; }
    #gw-grip-app .rr-hand-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    #gw-grip-app .rr-hand-name { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
    #gw-grip-app .rr-hand-read { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
    #gw-grip-app .rr-hand-read b { color: var(--ink); font-weight: 800; }
    #gw-grip-app .rr-hand-read b::after { content: ", "; color: var(--faint); font-weight: 600; }/* ── Grip consequence visuals (clubface + ball flight) ── */

    
    #gw-grip-app .tile-viz {
      width: 100%; aspect-ratio: 4 / 3; margin: 2px 0 8px;
      border-radius: var(--r-sm);
      background:
        radial-gradient(120% 90% at 50% 0%, rgba(21,26,30,0.05), rgba(21,26,30,0.015) 60%, transparent),
        var(--soft);
      border: 1px solid var(--line);
      overflow: hidden; position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    #gw-grip-app .tile-viz svg, #gw-grip-app .tile-viz img { width: 100%; height: 100%; display: block; margin: auto; }
    #gw-grip-app .tile-viz img { object-fit: cover; }
    #gw-grip-app .tile-viz .gv-state {
      position: absolute; left: 7px; bottom: 6px;
      font-size: clamp(11px, 2.6vw, 11px); font-weight: 800; letter-spacing: .02em;
      color: var(--ink); background: rgba(255,255,255,.82);
      backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
      padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line);
    }
    #gw-grip-app .tile-viz .gv-deg {
      position: absolute; right: 7px; top: 6px;
      font-size: clamp(11px, 2.6vw, 11px); font-weight: 800;
      color: var(--white); padding: 2px 7px; border-radius: 999px;
    }
    @keyframes gv-fade { from { opacity: 0; } to { opacity: 1; } }
    #gw-grip-app .tile-viz svg { animation: gv-fade .5s var(--ease) both; }
    @media (prefers-reduced-motion: reduce) {
      #gw-grip-app .tile-viz svg *, #gw-grip-app .tile-viz svg { animation: none !important; }
    }/* compact feedback (after the actions) */
    
    #gw-grip-app .feedback { margin: 0; border-radius: var(--r-md); background: transparent; padding: 0; }
    #gw-grip-app .feedback:empty { display: none; }
    #gw-grip-app .fb-line { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }
    #gw-grip-app .fb-q { font-size: 13px; font-weight: 800; }
    #gw-grip-app .fb-row { display: flex; gap: 6px; }
    #gw-grip-app .fb-btn { appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: all .15s var(--ease); }
    #gw-grip-app .fb-btn:hover { background: var(--soft); }
    #gw-grip-app .fb-btn.yes:hover { border-color: var(--green); color: var(--green-deep); }
    #gw-grip-app .fb-btn.no:hover { border-color: var(--red); color: var(--red-text); }
    #gw-grip-app .fb-btn svg { width: 14px; height: 14px; }
    #gw-grip-app .fb-correct { margin-top: 10px; display: none; }
    #gw-grip-app .fb-correct.show { display: block; }
    #gw-grip-app .fb-selects { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
    @media (max-width: 380px) { #gw-grip-app .fb-selects { grid-template-columns: 1fr 1fr; } }
    #gw-grip-app .fb-field label { display: block; font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
    #gw-grip-app .fb-field select { width: 100%; font: inherit; font-size: 13px; padding: 8px 9px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--white); color: var(--ink); }
    #gw-grip-app .fb-done { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green-deep); }
    #gw-grip-app .fb-done svg { width: 16px; height: 16px; }/* Ensure small interactive targets meet the 44px minimum on touch screens. */
    
    @media (max-width: 560px) {
      #gw-grip-app .fb-btn { min-height: 44px; padding: 10px 14px; }
    }

    #gw-grip-app .result .controls { margin: 0; padding: 0; }
    #gw-grip-app .result .controls #saveBtn { background: var(--ph-red); border-color: var(--ph-red); color: #fff; box-shadow: none; }
    #gw-grip-app .result .controls #saveBtn:hover:not(:disabled) { background: var(--ph-red-press); border-color: var(--ph-red-press); }
    #gw-grip-app .challenge { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
    #gw-grip-app .challenge h4 { margin: 0 0 3px; font-size: 15px; line-height: 1.25; font-weight: 800; color: var(--ink); }
    #gw-grip-app .challenge p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
    #gw-grip-app .challenge-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(118px, 0.65fr); align-items: center; gap: 10px; }
    #gw-grip-app .challenge-share { flex: 1 1 auto; max-width: none; background: var(--ink); border-color: var(--ink); color: #fff; font-size: 15px; font-weight: 800; min-width: 0; }
    #gw-grip-app .challenge-share:hover:not(:disabled) { background: #000; border-color: #000; }
    #gw-grip-app .challenge-copy { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border-radius: 999px; border-color: var(--line); background: var(--white); color: var(--ink); font-size: 13.5px; font-weight: 800; box-shadow: none; white-space: nowrap; }
    #gw-grip-app .challenge-copy svg { width: 18px; height: 18px; flex: none; }
    #gw-grip-app .challenge-save-note { display: block; width: 100%; margin: 12px auto 0; padding: 0; border: 0; background: transparent; color: #5c6470; font: inherit; font-size: 12.5px; line-height: 1.45; text-align: center; cursor: pointer; }
    #gw-grip-app .challenge-save-note b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
    #gw-grip-app .challenge-save-note span { display: block; margin-top: 2px; }
    #gw-grip-app .challenge-save-note:hover { color: var(--ink); }
    #gw-grip-app .challenge-msg { display: block; min-height: 16px; margin-top: 8px; color: var(--green-deep); font-size: 12.5px; font-weight: 700; text-align: center; }
    @media (min-width: 900px) {/* The result card is a single top-down column (verdict → evidence → fix → payoff);
         each section lays itself out internally at >=720px. The old two-area grid
         ("verdict verdict" / "image side") is gone, the new sections have no grid areas,
         so it auto-placed them into columns and scrambled the card. */
      
      body.has-result #gw-grip-app .result { display: flex; flex-direction: column; align-items: stretch; }
      body.has-result #gw-grip-app .result-side { padding: 18px; gap: 14px; }
      body.has-result #gw-grip-app .result .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      body.has-result #gw-grip-app .result .controls .btn.grow { width: 100%; max-width: none; min-width: 0; }
    }
    @media (max-width: 360px) {
      #gw-grip-app .challenge-actions { gap: 8px; }
      #gw-grip-app .challenge-share { font-size: 13.5px; }
      #gw-grip-app .challenge-copy { height: 44px; padding: 0 10px; font-size: 12.5px; }
    }/* Phone: stack paired CTAs to one-per-row so each button is full width and its
       label fits on a single line (instead of two buttons sharing a cramped row). */
    
    @media (max-width: 480px) {
      #gw-grip-app .result .controls { flex-direction: column; align-items: stretch; }
      #gw-grip-app .result .controls .btn.grow { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; }
    }/* Certificate share modal */

    
    #gw-grip-app .cert-modal {
      position: absolute; top: var(--cert-top, 0px); left: 0; right: 0; z-index: 1000;
      display: grid; place-items: start center; min-height: 100dvh;
      padding: clamp(10px, 3vw, 24px);
    }
    #gw-grip-app .cert-modal[hidden] { display: none; }
    @media (min-height: 1000px) {
      #gw-grip-app .cert-modal { place-items: start center; padding-top: clamp(24px, 5vh, 80px); }
    }
    #gw-grip-app .cert-backdrop { position: fixed; inset: 0; background: rgba(15,15,18,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: gv-fade .25s ease both; }
    @supports not (backdrop-filter: blur(1px)) { #gw-grip-app .cert-backdrop { background: rgba(15,15,18,0.82); } }
    #gw-grip-app .cert-dialog {
      position: relative; z-index: 1; width: min(400px, 100%); max-height: none; overflow: visible;
      background: var(--white); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.4);
      padding: clamp(16px, 3vw, 22px); animation: cert-pop .3s var(--ease) both;
    }
    @keyframes cert-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
    #gw-grip-app .cert-close { position: sticky; top: 88px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 -44px auto; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
    #gw-grip-app .cert-close:hover { background: var(--soft); }
    #gw-grip-app .cert-close svg { width: 22px; height: 22px; }
    #gw-grip-app .cert-head { text-align: center; margin: 2px 0 10px; padding: 0 40px; }
    #gw-grip-app .cert-head h3 { margin: 0 0 4px; font-size: clamp(17px, 3.4vw, 20px); font-weight: 800; }
    #gw-grip-app .cert-head p { margin: 0; font-size: 13px; color: var(--muted); }
    #gw-grip-app .cert-preview { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; display: block; }
    #gw-grip-app .cert-preview img { width: 100%; height: auto; max-height: none; display: block; object-fit: contain; }
    #gw-grip-app .cert-actions { display: flex; gap: 10px; margin-top: 14px; align-items: stretch; }
    #gw-grip-app .cert-copy { flex: none; width: 44px; min-width: 44px; padding: 0; border-radius: 999px; }
    #gw-grip-app .cert-copy svg { width: 20px; height: 20px; }
    #gw-grip-app .cert-actions[data-share="copy"] #certShare { display: none; }
    #gw-grip-app .cert-actions[data-share="native"] #certCopyLink { display: none; }
    @media (max-width: 360px) { #gw-grip-app .cert-actions { flex-wrap: wrap; } #gw-grip-app .cert-actions .btn.grow { min-width: 120px; flex: 1 1 45%; } }
    #gw-grip-app .cert-socials { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
    #gw-grip-app .cert-socials-lbl { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
    #gw-grip-app .cert-social-row { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
    #gw-grip-app .cert-soc { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; display: grid; place-items: center; text-decoration: none; transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s; }
    #gw-grip-app .cert-soc:hover { transform: translateY(-2px); }
    #gw-grip-app #shWhatsapp:hover { background: #25d366; color: #fff; border-color: #25d366; }
    #gw-grip-app #shX:hover { background: #000; color: #fff; border-color: #000; }
    #gw-grip-app #shFacebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
    #gw-grip-app #shCopy:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
    #gw-grip-app .cert-soc svg { width: 20px; height: 20px; }
    #gw-grip-app .cert-share-msg { display: block; margin-top: 10px; font-size: 12.5px; color: var(--green-deep); font-weight: 700; min-height: 16px; }
    #gw-grip-app .cert-back-btn {
      position: absolute; top: var(--cert-back-top, 0px); left: 50%; z-index: 4;
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      min-height: 38px; padding: 0 16px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.26); background: rgba(15,17,21,0.86); color: #fff;
      font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
      box-shadow: 0 14px 34px rgba(0,0,0,0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      transform: translateX(-50%); animation: gv-fade .18s ease both; pointer-events: auto;
    }
    #gw-grip-app .cert-back-btn[hidden] { display: none; }
    #gw-grip-app .cert-back-btn svg { width: 15px; height: 15px; }
    #gw-grip-app .cert-back-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }/* ── Email / lead capture in the cert modal ──────────────── */

    
    #gw-grip-app .cert-lead { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
    #gw-grip-app .cert-lead-title { font-size: 13.5px; font-weight: 800; color: var(--ink); margin: 0 0 3px; }
    #gw-grip-app .cert-lead-sub { font-size: 12px; color: var(--muted); margin: 0 0 11px; line-height: 1.45; }
    #gw-grip-app .cert-lead-row { display: flex; gap: 8px; align-items: stretch; }
    #gw-grip-app .cert-lead-row input[type="email"] {
      flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 11px 13px; color: var(--ink);
      border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--white); transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    }
    #gw-grip-app .cert-lead-row input[type="email"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(26,138,255,0.12); }
    #gw-grip-app .cert-lead-row input[type="email"]::placeholder { color: var(--muted); }
    #gw-grip-app .cert-lead-row button { flex: none; padding: 0 16px; border-radius: 10px; white-space: nowrap; }
    #gw-grip-app .cert-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; font-size: 12px; line-height: 1.5; color: var(--muted); cursor: pointer; }
    #gw-grip-app .cert-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
    #gw-grip-app .cert-consent a { color: var(--ink); font-weight: 700; text-decoration: underline; }
    #gw-grip-app .cert-consent .req { color: var(--red-text); font-weight: 700; }
    #gw-grip-app .cert-lead-msg { display: block; margin-top: 9px; font-size: 12.5px; font-weight: 700; min-height: 15px; color: var(--green-deep); }
    #gw-grip-app .cert-lead-msg[data-err="1"] { color: var(--red-text); }
    #gw-grip-app .cert-lead[data-done="1"] .cert-lead-row, #gw-grip-app .cert-lead[data-done="1"] .cert-consent { display: none; }/* Mobile: present the modal as a polished bottom sheet (slides up, full-width,
       rounded top, safe-area aware) and stack the email field + button. */

    
    @media (max-width: 560px) {
      #gw-grip-app .cert-modal { place-items: start center; padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
      #gw-grip-app .cert-dialog { width: 100%; max-width: 100%; max-height: none; overflow: visible; border-radius: 22px; padding: 14px 16px 18px; animation: cert-pop .3s var(--ease) both; }
      #gw-grip-app .cert-copy { width: 48px; min-width: 48px; }
      #gw-grip-app .cert-close { top: 72px; right: 2px; margin-bottom: -44px; width: 44px; height: 44px; }
      #gw-grip-app .cert-head { padding: 0 40px; }
      #gw-grip-app .cert-preview img { max-height: none; }
      #gw-grip-app .cert-lead-row { flex-wrap: wrap; gap: 9px; }
      #gw-grip-app .cert-lead-row input[type="email"] { flex: 1 1 100%; padding: 13px; }
      #gw-grip-app .cert-lead-row button { flex: 1 1 100%; padding: 13px 16px; }
      #gw-grip-app .cert-consent { font-size: 12.5px; }
      #gw-grip-app .cert-consent input { width: 18px; height: 18px; }
    }/* scan history */

    
    #gw-grip-app .hist { animation: rise .45s var(--ease); }
    #gw-grip-app .hist-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
    #gw-grip-app .hist-head h3 { margin: 0; font-size: 14px; font-weight: 800; }
    #gw-grip-app .hist-head .count { font-size: 12px; color: var(--muted); font-weight: 700; }
    #gw-grip-app .hist-body { padding: 8px; max-height: 360px; overflow-y: auto; }
    #gw-grip-app .hist-empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 13px; }
    #gw-grip-app .hist-list { display: flex; flex-direction: column; gap: 6px; }
    #gw-grip-app .hist-item { width: 100%; text-align: left; cursor: pointer; font: inherit; appearance: none; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); transition: background .15s, border-color .15s; }
    #gw-grip-app .hist-item:hover { background: var(--soft); }
    #gw-grip-app .hist-item[aria-current="true"] { border-color: var(--primary); background: rgba(26,138,255,0.06); }
    #gw-grip-app .hist-item.hist-extra { display: none; }
    #gw-grip-app .hist-more { width: 100%; margin-top: 4px; padding: 9px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--primary); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); transition: background .15s, border-color .15s; }
    #gw-grip-app .hist-more:hover { background: var(--soft); border-color: var(--line-2); }
    #gw-grip-app .hist-thumb { width: 44px; height: 44px; border-radius: 9px; overflow: hidden; flex: none; background: var(--stage); display: grid; place-items: center; }
    #gw-grip-app .hist-thumb img { width: 100%; height: 100%; object-fit: cover; }
    #gw-grip-app .hist-meta { min-width: 0; flex: 1; }
    #gw-grip-app .hist-name { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #gw-grip-app .hist-sub { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
    #gw-grip-app .hist-fb { margin-left: auto; display: inline-flex; align-items: center; }
    #gw-grip-app .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
    #gw-grip-app .dot.neutral { background: var(--green); }
    #gw-grip-app .dot.off { background: rgba(21,26,30,0.42); }/* ── Share prompt between the analyzer and the explainer ── */

    
    #gw-grip-app .share-bar {
      width: 100vw; max-width: none; margin: 0 calc(50% - 50vw);
      padding: 12px max(20px, calc((100vw - 1120px) / 2));
      background: var(--white); border-block: 1px solid var(--line);
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
    }
    #gw-grip-app .share-bar-copy { min-width: 0; }
    #gw-grip-app .share-bar-copy h2 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    #gw-grip-app .share-bar-copy p { margin: 1px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
    #gw-grip-app .share-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    #gw-grip-app .share-bar-btn {
      appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
      min-height: 34px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700;
      border: 1px solid var(--line-2); background: var(--white); color: var(--ink);
      transition: background .2s, border-color .2s, color .2s;
    }
    #gw-grip-app .share-bar-btn svg { width: 15px; height: 15px; flex: none; }
    #gw-grip-app .share-bar-btn:hover { border-color: var(--ink); }
    #gw-grip-app .share-bar-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
    #gw-grip-app .share-bar-btn.primary:hover { background: var(--primary-press); border-color: var(--primary-press); }
    #gw-grip-app .share-bar-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    #gw-grip-app .share-bar-msg { font-size: 12.5px; font-weight: 700; color: var(--green-deep); }
    @media (max-width: 639px) {
      #gw-grip-app .share-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    }/* ── Grip-types explainer video (YouTube promo) ─────────── *//* Light band between the white analyzer above and the dark swing row below.
       The player is a "lite embed": we paint our own thumbnail + play button and only
       load YouTube's iframe on click, so the page stays fast and sets no YT cookies
       until the visitor actually asks for the video. */

    
    
    #gw-grip-app .grip-video {
      width: 100vw; max-width: none; margin: 0 calc(50% - 50vw);
      padding: clamp(34px, 6vw, 62px) max(20px, calc((100vw - 1120px) / 2));
      background: var(--soft-3, #f3f4f6);
    }
    #gw-grip-app .grip-video-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 46px); align-items: center; }/* Video a touch wider than the copy: the 16/9 thumbnail is short, so this lands its
       height level with the text block for an even, proportional two-column band. */
    
    @media (min-width: 900px) { #gw-grip-app .grip-video-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); } }
    #gw-grip-app .gv-player { min-width: 0; }
    #gw-grip-app .gv-play {
      position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0;
      border: 0; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer;
      box-shadow: 0 18px 40px rgba(13,21,29,0.18);
      transition: transform .18s var(--ease), box-shadow .2s var(--ease);
    }
    #gw-grip-app .gv-play:hover, #gw-grip-app .gv-play:focus-visible { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(13,21,29,0.24); }
    #gw-grip-app .gv-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
    #gw-grip-app .gv-play-btn { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
    #gw-grip-app .gv-play-btn svg { width: clamp(58px, 8vw, 72px); height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)); }
    #gw-grip-app .gv-yt { fill: #f00; opacity: .88; transition: opacity .18s var(--ease); }
    #gw-grip-app .gv-play:hover .gv-yt, #gw-grip-app .gv-play:focus-visible .gv-yt { opacity: 1; }
    #gw-grip-app .gv-badge {
      position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
      min-height: 30px; padding: 0 13px; border-radius: 999px; background: rgba(17,20,26,0.82);
      color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; pointer-events: none;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    #gw-grip-app .gv-badge svg { width: 15px; height: 15px; flex: none; }/* the loaded player keeps the thumbnail's shape so the swap is seamless */
    
    #gw-grip-app .gv-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; background: #000; box-shadow: 0 18px 40px rgba(13,21,29,0.18); }
    #gw-grip-app .gv-copy { min-width: 0; }/* Size is capped so "Every Grip Type, Explained." always fits the copy column on ONE
       line (nowrap guarantees it; the fluid clamp keeps it fitting as the column narrows). */
    
    #gw-grip-app .gv-copy h2 { margin: 0 0 14px; font-size: clamp(20px, 2.8vw, 34px); line-height: 1.12; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    #gw-grip-app .gv-copy h2 .gv-line1 { display: block; white-space: nowrap; }
    #gw-grip-app .gv-copy h2 .gv-blue { display: block; color: var(--primary); }
    #gw-grip-app .gv-sub { margin: 0; max-width: 46ch; color: var(--muted); font-size: clamp(15px, 2vw, 17px); line-height: 1.6; }
    #gw-grip-app .gv-list { list-style: none; margin: clamp(18px, 2.4vw, 24px) 0 0; padding: 0; display: grid; gap: 12px; }
    #gw-grip-app .gv-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: clamp(14.5px, 1.9vw, 16px); line-height: 1.5; font-weight: 600; }
    #gw-grip-app .gv-list li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--green-deep); }
    @media (max-width: 899px) { #gw-grip-app .gv-copy h2 { text-align: left; } }/* The dark swing row carries a top margin to separate it from the white analyzer.
       When the grey video band sits directly above it, that margin just shows up as a
       white stripe between the two full-bleed sections, so drop it in that case. */
    
    #gw-grip-app .grip-video + .swing-hero { margin-top: 0; }/* ── Dark "Fix your swing" hero row ─────────────────────── */

    
    #gw-grip-app .swing-hero {
      width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: clamp(34px, 6vw, 64px); margin-bottom: 0;
      padding: clamp(40px, 6vw, 72px) max(20px, calc((100vw - 1120px) / 2));
      background: #0f1115;
      color: #fff; overflow-x: clip;
    }
    #gw-grip-app .swing-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 56px); align-items: center; }
    @media (min-width: 900px) { #gw-grip-app .swing-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
    #gw-grip-app .swing-hero-copy { min-width: 0; }
    #gw-grip-app .swing-hero-copy h2 { margin: 0 0 16px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
    #gw-grip-app .swing-hero-copy h2 .sh-blue { display: block; color: var(--primary); }
    #gw-grip-app .swing-hero-copy .sh-sub { margin: 0 0 26px; max-width: 44ch; color: rgba(255,255,255,0.72); font-size: clamp(15px, 2vw, 17px); line-height: 1.6; }/* "Try For Free!" button, blue pill, Apple + play glyphs, subtle glow */
    
    #gw-grip-app .try-free-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 11px;
      min-height: 56px; padding: 0 30px; border-radius: 999px;
      background: var(--primary); color: #fff; text-decoration: none;
      font-size: clamp(16px, 2vw, 18px); font-weight: 800; letter-spacing: 0;
      box-shadow: 0 14px 34px rgba(26,138,255,0.42), 0 0 0 1px rgba(255,255,255,0.06) inset;
      transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
    }
    #gw-grip-app .try-free-btn:hover, #gw-grip-app .try-free-btn:focus-visible { background: var(--primary-press); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(26,138,255,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset; }
    #gw-grip-app .try-free-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    #gw-grip-app .try-free-btn .tf-apple { width: 21px; height: 21px; flex: none; }
    #gw-grip-app .try-free-btn .tf-play { width: 22px; height: 22px; flex: none; }/* Mobile (stacked): center the copy + button so they line up with the centered phone. */
    
    @media (max-width: 899px) {
      #gw-grip-app .swing-hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
      #gw-grip-app .swing-hero-copy .sh-sub { margin-left: auto; margin-right: auto; }
    }/* phone mockup *//* ── Realistic iPhone 17 mockup (holds a looping S3 app-preview video) ── */

    
    
    #gw-grip-app .sh-phone-wrap { display: flex; justify-content: center; perspective: 1600px; }/* Mobile: the tall iPhone is stacked below the copy, so size it to fit fully within
       the row and pin it to the bottom so the whole phone is visible (not clipped). */
    
    @media (max-width: 899px) {/* size the phone so the FULL device fits under the copy within the row: cap by
         width and by ~46% of viewport height (leaves room for the copy above it). */
      
      #gw-grip-app .sh-phone { --phone-w: min(220px, 62vw, calc(46vh * 1179 / 2556)); }
    }
    #gw-grip-app .sh-phone {
      --phone-w: min(300px, 82vw);
      position: relative; width: var(--phone-w); aspect-ratio: 1179 / 2556; /* iPhone 17 ratio */
      border-radius: calc(var(--phone-w) * 0.19);
      padding: calc(var(--phone-w) * 0.032);
      /* titanium rail: bright metallic edge over a near-black body */
      background:
        linear-gradient(135deg, #2b2f36 0%, #0c0d10 22%, #16181d 50%, #0c0d10 78%, #2b2f36 100%);
      box-shadow:
        0 2px 3px rgba(255,255,255,0.10) inset,
        0 -2px 3px rgba(0,0,0,0.6) inset,
        0 50px 100px rgba(0,0,0,0.6),
        0 20px 44px rgba(0,0,0,0.5),
        /* symmetric #1A8AFF halo, subtle, a touch brighter right around the edges */
        0 0 55px rgba(26,138,255,0.32),
        0 0 22px 2px rgba(26,138,255,0.28);
    }/* inner black gasket between rail and screen */
    
    #gw-grip-app .sh-phone::before {
      content: ""; position: absolute; inset: calc(var(--phone-w) * 0.020);
      border-radius: calc(var(--phone-w) * 0.172); background: #05060a; z-index: 0;
    }
    #gw-grip-app .sh-screen {
      position: relative; z-index: 1; width: 100%; height: 100%;
      border-radius: calc(var(--phone-w) * 0.158); overflow: hidden;
      background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
    }
    #gw-grip-app .sh-screen video, #gw-grip-app .sh-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }/* empty-state placeholder shown until the video src is set */
    
    #gw-grip-app .sh-screen-empty { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, #0e141d, #0a0f16); }
    #gw-grip-app .sh-screen-empty span { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: .04em; }/* Dynamic Island */
    
    #gw-grip-app .sh-island {
      position: absolute; z-index: 3; top: calc(var(--phone-w) * 0.03); left: 50%; transform: translateX(-50%);
      width: calc(var(--phone-w) * 0.32); height: calc(var(--phone-w) * 0.093);
      background: #000; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
    }/* side buttons (subtle titanium nubs) */
    
    #gw-grip-app .sh-btn { position: absolute; z-index: 2; background: linear-gradient(180deg, #33373e, #14161a); border-radius: 2px; }
    #gw-grip-app .sh-btn.action { left: calc(var(--phone-w) * -0.006); top: 20%; width: calc(var(--phone-w) * 0.012); height: calc(var(--phone-w) * 0.05); }
    #gw-grip-app .sh-btn.vol-up { left: calc(var(--phone-w) * -0.006); top: 30%; width: calc(var(--phone-w) * 0.012); height: calc(var(--phone-w) * 0.085); }
    #gw-grip-app .sh-btn.vol-dn { left: calc(var(--phone-w) * -0.006); top: 42%; width: calc(var(--phone-w) * 0.012); height: calc(var(--phone-w) * 0.085); }
    #gw-grip-app .sh-btn.power { right: calc(var(--phone-w) * -0.006); top: 32%; width: calc(var(--phone-w) * 0.012); height: calc(var(--phone-w) * 0.12); }/* app showcase (white band) */

    
    #gw-grip-app .app-cta { width: 100vw; max-width: none; margin: 0 calc(50% - 50vw); padding: clamp(34px, 6vw, 58px) max(20px, calc((100vw - 1040px) / 2)); text-align: center; background: var(--page, #fff); border: 0; border-radius: 0; box-shadow: none; }/* ── Row 3: swing phases (#f3f4f6 band) ─────────────────── */

    
    #gw-grip-app .phases { width: 100vw; max-width: none; margin: 0 calc(50% - 50vw) clamp(34px, 6vw, 64px); padding: clamp(34px, 6vw, 58px) max(20px, calc((100vw - 1040px) / 2)); text-align: center; background: var(--soft-3, #f3f4f6); }
    #gw-grip-app .phases h2 { font-size: clamp(24px, 4vw, 40px); line-height: 1.1; margin: 0 auto 10px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    #gw-grip-app .phases .sub { font-size: clamp(15px, 2.2vw, 17px); color: var(--muted); max-width: 60ch; margin: 0 auto 28px; line-height: 1.6; }
    #gw-grip-app .phase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
    @media (min-width: 640px) { #gw-grip-app .phase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { #gw-grip-app .phase-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
    #gw-grip-app .phase-link { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 800; box-shadow: 0 8px 18px rgba(21,26,30,0.05); transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
    #gw-grip-app .phase-link:hover, #gw-grip-app .phase-link:focus-visible { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(26,138,255,0.12); }
    #gw-grip-app .phase-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    #gw-grip-app .phase-num { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 999px; background: rgba(26,138,255,0.10); color: var(--primary); font-size: 12px; font-weight: 800; }
    @media (max-width: 639px) { #gw-grip-app .phase-link { min-height: 54px; font-size: 13px; } }
    #gw-grip-app .app-cta h2 { font-size: clamp(24px, 4vw, 40px); line-height: 1.1; margin: 0 auto 10px; max-width: none; white-space: nowrap; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    @media (max-width: 560px) { #gw-grip-app .app-cta h2 { white-space: normal; font-size: clamp(22px, 6vw, 28px); } }
    #gw-grip-app .app-cta .sub { font-size: clamp(15px, 2.2vw, 17px); color: var(--muted); max-width: 60ch; margin: 0 auto 28px; line-height: 1.6; }
    #gw-grip-app .store-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
    #gw-grip-app .store-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 190px; min-height: 58px; padding: 8px 16px; border-radius: 12px; background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transition: transform .15s var(--ease), box-shadow .2s, border-color .2s; }
    #gw-grip-app .store-btn:hover, #gw-grip-app .store-btn:focus-visible { background: #000; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.28); }
    #gw-grip-app .store-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    #gw-grip-app .store-btn svg { width: 27px; height: 27px; flex: none; }
    #gw-grip-app .store-btn .store-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
    #gw-grip-app .store-btn small { display: block; font-size: clamp(9px, 1.2vw, 11.5px); font-weight: 600; letter-spacing: .03em; opacity: .82; }
    #gw-grip-app .store-btn strong { display: block; font-size: clamp(17px, 2vw, 23px); font-weight: 800; letter-spacing: 0; margin-top: 1px; }
    #gw-grip-app .store-btn.play svg { width: 30px; height: 30px; }
    #gw-grip-app .done-overlay .store-buttons { gap: 10px; margin-top: 0; }/* White badges on the dark camera-off overlay (black badges stay on the light
       app-cta section, where black-on-light has proper contrast). */
    
    #gw-grip-app .done-overlay .store-btn { min-width: 176px; min-height: 54px; padding: 8px 16px; background: #fff; color: #000; border-color: rgba(0,0,0,0.14); box-shadow: 0 12px 28px rgba(0,0,0,0.24); }
    #gw-grip-app .done-overlay .store-btn:hover, #gw-grip-app .done-overlay .store-btn:focus-visible { background: #fff; color: #000; border-color: rgba(0,0,0,0.28); }
    #gw-grip-app .done-overlay .store-btn svg { width: 26px; height: 26px; }
    #gw-grip-app .done-overlay .store-btn.play svg { width: 29px; height: 29px; }
    #gw-grip-app .done-overlay .store-btn small { font-size: 10px; }
    #gw-grip-app .done-overlay .store-btn strong { font-size: 17px; }
    #gw-grip-app .done-again {
      min-height: 38px; padding: 5px 16px; border: 1px solid rgba(255,255,255,0.34);
      background: rgba(255,255,255,0.08); color: #fff; box-shadow: none;
      font-size: 13px; font-weight: 800;
    }
    #gw-grip-app .done-again svg { width: 15px; height: 15px; }
    #gw-grip-app .done-again:hover:not(:disabled), #gw-grip-app .done-again:focus-visible {
      border-color: rgba(255,255,255,0.62); background: rgba(255,255,255,0.14); color: #fff; box-shadow: none;
    }
    #gw-grip-app .video-showcase { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); max-width: 1080px; margin: 6px auto 0; text-align: left; }
    @media (min-width: 640px) { #gw-grip-app .video-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); } }/* bordered card box (video on top, text padded below) */
    
    #gw-grip-app .drill-card { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--white); overflow: hidden; box-shadow: 0 6px 20px rgba(21,26,30,0.05); }
    #gw-grip-app .drill-video { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--placeholder, #e8edf3); border-bottom: 1px solid var(--line); }
    #gw-grip-app .drill-video video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; filter: none; }
    #gw-grip-app .drill-card h3 { margin: 0 0 8px; padding: 18px 20px 0; font-size: clamp(16px, 2vw, 18px); line-height: 1.25; font-weight: 800; color: var(--ink); }
    #gw-grip-app .drill-card p { margin: 0; padding: 0 20px 20px; color: var(--muted); font-size: clamp(13.5px, 1.8vw, 15px); line-height: 1.55; }
    @media (max-width: 639px) {
      #gw-grip-app .store-buttons { max-width: 340px; margin-inline: auto; }
      #gw-grip-app .store-btn { min-width: 0; flex: 1 1 100%; min-height: 64px; }
      #gw-grip-app .video-showcase { display: flex; gap: 12px; max-width: none; margin: 6px 0 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
      #gw-grip-app .video-showcase::-webkit-scrollbar { display: none; }/* one full card per view; grip-web.js auto-advances the track */
      
      #gw-grip-app .drill-card { flex: 0 0 100%; scroll-snap-align: center; }
    }/* ── Grip guide article ─────────────────────────────────── *//* Article + "On this page" TOC in a two-column grid at >=900px (mirrors the
       stance template's edu-grid + toc-sticky layout). */

    
    
    #gw-grip-app .article-wrap { width: 100%; max-width: 1100px; margin: clamp(24px, 5vw, 46px) auto 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); }
    @media (min-width: 900px) { #gw-grip-app .article-wrap { grid-template-columns: minmax(0, 1fr) minmax(240px, 264px); align-items: start; } }/* "On this page" table of contents (sticky nav). Standalone uses CSS
       position:sticky; scroll-spy highlighting is wired in grip-web.js. */

    
    #gw-grip-app .toc-sticky { min-width: 0; order: 2; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: 16px 16px 10px; }
    @media (min-width: 900px) { #gw-grip-app .toc-sticky { position: sticky; top: 16px; align-self: start; } }
    #gw-grip-app .toc-title { margin: 0 0 12px; padding: 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    #gw-grip-app .toc-list { margin: 0; padding: 0; list-style: none; }
    #gw-grip-app .toc-list li { margin: 0; }
    #gw-grip-app .toc-link { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink-2, #374151); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.35; border-left: 2px solid transparent; transition: background .15s var(--ease), color .15s var(--ease); }
    #gw-grip-app .toc-link:hover { background: var(--soft); color: var(--ink); }
    #gw-grip-app .toc-num { flex: none; font-size: 12px; font-weight: 800; color: #9aa4b2; padding-top: 1px; }
    #gw-grip-app .toc-link.active { background: rgba(26,138,255,0.08); color: var(--primary); font-weight: 800; border-left-color: var(--primary); border-radius: 0 8px 8px 0; }
    #gw-grip-app .toc-link.active .toc-num { color: var(--primary); }
    #gw-grip-app .toc-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }/* On mobile the TOC sits above the article (not sticky). */
    
    @media (max-width: 899px) { #gw-grip-app .toc-sticky { order: -1; } }/* anchored sections land with a little breathing room at the top */
    
    #gw-grip-app .article [id] { scroll-margin-top: clamp(14px, 2.5vw, 24px); }/* Constrain long-form text to a comfortable measure (~68ch); typography follows
       the stance template's article styles (restrained dark headings, body gray). */

    
    #gw-grip-app .article { width: 100%; max-width: 760px; margin: 0 auto; min-width: 0; }
    @media (min-width: 900px) { #gw-grip-app .article-wrap > .article { margin: 0; } }
    #gw-grip-app .article h3 { margin: 28px 0 10px; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    #gw-grip-app .article p { margin: 0 0 12px; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; text-wrap: pretty; }
    #gw-grip-app .article a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
    #gw-grip-app .article a:hover { color: var(--primary-press); }

    #gw-grip-app .grip-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
    @media (max-width: 620px) { #gw-grip-app .grip-cards { grid-template-columns: 1fr; } }/* flex column so the "Tends to…" + "Tap to see" rows bottom-align across all 3 cards */
    
    #gw-grip-app .grip-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(12px, 2.4vw, 16px); background: var(--white); box-shadow: 0 10px 20px rgba(21,26,30,0.05); }
    #gw-grip-app .grip-card.is-neutral { border-color: rgba(54,184,137,0.45); background: var(--green-bg); }
    #gw-grip-app .grip-card .gc-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.045em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
    #gw-grip-app .grip-card.is-neutral .gc-tag { color: var(--green-deep); }/* only Neutral carries a (green = recommended) dot */
    
    #gw-grip-app .grip-card .gc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
    #gw-grip-app .grip-card:not(.is-neutral) .gc-dot { display: none; }
    #gw-grip-app .grip-card h3 { margin: 0 0 6px; font-size: clamp(15px, 2.6vw, 17px); font-weight: 800; letter-spacing: 0; }
    #gw-grip-app .grip-card p { font-size: clamp(12.5px, 2vw, 14px); line-height: 1.55; color: var(--muted); margin: 0 0 10px; }
    #gw-grip-app .gc-shape { margin-top: auto; font-size: clamp(11px, 1.7vw, 12.5px); font-weight: 800; color: var(--ink); }
    #gw-grip-app .grip-card.is-neutral .gc-shape { color: var(--green-deep); }/* tappable ball-flight animation inside each grip card */
    
    #gw-grip-app .grip-card[data-grip] { cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
    #gw-grip-app .grip-card[data-grip]:hover { border-color: var(--primary); box-shadow: 0 12px 24px rgba(26,138,255,0.12); }
    #gw-grip-app .grip-card.is-neutral[data-grip]:hover { border-color: var(--green); box-shadow: 0 12px 24px rgba(54,184,137,0.14); }
    #gw-grip-app .grip-card[data-grip]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    #gw-grip-app .gc-viz { display: none; flex-direction: column; gap: 6px; margin: 12px 0 0; width: 100%; }
    #gw-grip-app .grip-card.show-viz .gc-viz { display: flex; }
    #gw-grip-app .gc-sub-face { width: 100%; aspect-ratio: 4/3; }
    #gw-grip-app .gc-sub-flight { width: 100%; aspect-ratio: 1/1; }
    #gw-grip-app .grip-card.show-viz .gc-hint { color: var(--primary); }
    #gw-grip-app .gc-hint { margin-top: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
    #gw-grip-app .gc-hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }/* ── Nine-combo grid - same card language as .grip-card ── */

    
    #gw-grip-app .combo-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 12px; margin: 20px 0; }
    @media (max-width: 640px) { #gw-grip-app .combo-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 400px) { #gw-grip-app .combo-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }
    #gw-grip-app .combo-card {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column;
      border: 1px solid var(--line); border-radius: var(--r-md);
      background: var(--white); box-shadow: 0 10px 20px rgba(21,26,30,0.05); transition: box-shadow .2s var(--ease);
    }
    #gw-grip-app .combo-card:hover { box-shadow: var(--shadow-2); }
    #gw-grip-app .combo-card.is-recommended { border-color: rgba(54,184,137,0.45); background: var(--green-bg); }
    #gw-grip-app .combo-card.is-caution { border-color: rgba(242,45,45,0.35); background: rgba(242,45,45,0.045); }
    #gw-grip-app .combo-body { padding: calc(clamp(12px, 2.4vw, 16px) + 10px) clamp(12px, 2.4vw, 16px) clamp(12px, 2.4vw, 16px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
    #gw-grip-app .combo-header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    #gw-grip-app .combo-status {
      position: absolute; top: 0; right: 0; z-index: 2;
      font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
      padding: 3px 9px; white-space: nowrap;
      border-radius: 0 0 0 10px;
      background: rgba(21,26,30,0.07); color: var(--muted);
    }
    #gw-grip-app .combo-card.is-recommended .combo-status { background: rgba(54,184,137,0.16); color: var(--green-deep); }
    #gw-grip-app .combo-card.is-caution .combo-status { background: rgba(242,45,45,0.10); color: var(--red-text); }/* wrap so the trail chip drops to a second line instead of clipping on narrow columns */
    
    #gw-grip-app .combo-hands { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; min-width: 0; }
    #gw-grip-app .combo-hand {
      font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
      padding: 2px 6px; border-radius: 6px; white-space: nowrap;
      background: rgba(21,26,30,0.06); color: var(--ink);
    }
    #gw-grip-app .combo-hand-sep { font-size: 10px; color: var(--line-2); font-weight: 700; }
    #gw-grip-app .combo-card h4 { margin: 4px 0 0; font-size: clamp(15px, 2.6vw, 17px); line-height: 1.25; font-weight: 800; color: var(--ink); text-wrap: balance; }
    #gw-grip-app .combo-tendency { font-size: clamp(12.5px, 2vw, 14px); line-height: 1.55; color: var(--muted); margin: 0; }/* bottom-aligned like .gc-shape - no separate divided footer to vary in size */
    
    #gw-grip-app .combo-players { margin: auto 0 0; padding-top: 10px; font-size: clamp(11px, 1.7vw, 12.5px); color: var(--faint); font-style: normal; font-weight: 500; line-height: 1.45; }
    #gw-grip-app .combo-card.is-recommended .combo-players { color: var(--green-deep); }

    #gw-grip-app .callout { margin: 20px 0; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 0 var(--r-md) var(--r-md) 0; padding: clamp(14px, 2.6vw, 20px); background: var(--soft-2); }
    #gw-grip-app .callout h3 { margin: 0 0 10px; font-size: clamp(15.5px, 2.6vw, 17px); }
    #gw-grip-app .checklist { list-style: none; padding: 0; margin: 0; }
    #gw-grip-app .checklist li { position: relative; padding: 8px 0 8px 30px; font-size: clamp(13.5px, 2.2vw, 15px); line-height: 1.5; border-top: 1px solid var(--line); }
    #gw-grip-app .checklist li:first-child { border-top: 0; }
    #gw-grip-app .checklist li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 14px; height: 8px; border-left: 2.5px solid var(--green-deep); border-bottom: 2.5px solid var(--green-deep); transform: rotate(-45deg); }/* grouped sub-points (knuckles / the “V”) - indented, no checkmark or divider */
    
    #gw-grip-app .checklist .sublist { list-style: none; margin: 8px 0 2px -30px; padding: 0; }
    #gw-grip-app .checklist .sublist li { border-top: 0; padding: 4px 0 4px 18px; font-size: clamp(13px, 2vw, 14.5px); color: var(--muted); }
    #gw-grip-app .checklist .sublist li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 8px; height: 2px; border: 0; background: var(--line-2); transform: none; border-radius: 2px; }
    #gw-grip-app .checklist .sublist li b { color: var(--ink); }
    #gw-grip-app .pull { margin: 20px 0; text-align: center; font-size: clamp(18px, 2.8vw, 22px); font-weight: 700; line-height: 1.4; letter-spacing: -0.014em; color: var(--ink); padding: 0 clamp(0px, 4vw, 30px); text-wrap: balance; }/* in-content nudge to the detector */

    
    #gw-grip-app .inline-nudge { font-size: clamp(13.5px, 2.2vw, 15px) !important; color: var(--muted) !important; border-left: 2px solid rgba(26,138,255,0.4); padding-left: 13px; }
    #gw-grip-app .link-analyzer { color: var(--primary); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; font: inherit; padding: 0; }
    #gw-grip-app .link-analyzer:hover { color: var(--primary-press); }

    @media (prefers-reduced-motion: reduce) { #gw-grip-app, #gw-grip-app * { animation: none !important; transition: none !important; } }
  
/* ---------------------------------------------------------------------------
   Editor content region - template-parts/editor-content.php

   Whatever is added to this page in wp-admin renders under the tool inside
   .gw-page-extra. ACF blocks (.hb-*) and Elementor sections bring their own
   containers and full-bleed backgrounds, so they are left alone - only loose
   text typed straight into the editor gets a readable column here.
   --------------------------------------------------------------------------- */
#gw-grip-app .gw-page-extra { width: 100%; margin-top: clamp(28px, 4.5vw, 48px); }
#gw-grip-app .gw-page-extra > h1,
#gw-grip-app .gw-page-extra > h2,
#gw-grip-app .gw-page-extra > h3,
#gw-grip-app .gw-page-extra > h4,
#gw-grip-app .gw-page-extra > p,
#gw-grip-app .gw-page-extra > ul,
#gw-grip-app .gw-page-extra > ol,
#gw-grip-app .gw-page-extra > blockquote,
#gw-grip-app .gw-page-extra > figure,
#gw-grip-app .gw-page-extra > table {
  width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 20px;
  color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62;
}
#gw-grip-app .gw-page-extra > h2 { margin: clamp(24px, 3.4vw, 34px) auto clamp(10px, 1.8vw, 14px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
#gw-grip-app .gw-page-extra > h3 { margin: clamp(18px, 2.6vw, 24px) auto 8px; font-size: clamp(17px, 2.1vw, 19px); line-height: 1.25; font-weight: 800; color: var(--ink); }
#gw-grip-app .gw-page-extra > p,
#gw-grip-app .gw-page-extra > ul,
#gw-grip-app .gw-page-extra > ol { margin-top: 0; margin-bottom: clamp(12px, 1.8vw, 16px); }
#gw-grip-app .gw-page-extra > ul li,
#gw-grip-app .gw-page-extra > ol li { margin-bottom: 8px; }
#gw-grip-app .gw-page-extra > * > a,
#gw-grip-app .gw-page-extra > p > a { color: var(--primary); }
#gw-grip-app .gw-page-extra img { height: auto; }

/*
 * Dark mode. The theme sets data-theme="dark" on <html>; remap this app's
 * palette. Elements that sit on the always-dark camera stage (white pills,
 * flip button, flash, store buttons, certificate) keep their literal colors.
 */
[data-theme="dark"] #gw-grip-app {
  --ink:        #f3f4f6;
  --ink-2:      #c9ced6;
  --muted:      #9aa1ab;
  --faint:      #7d8590;
  --line:       rgba(255,255,255,0.12);
  --line-2:     rgba(255,255,255,0.18);
  --soft:       #1c2027;
  --soft-2:     #1c2027;
  --soft-3:     #171a20;
  --white:      #171a20;
  --page:       #0f1115;
  --tint:       rgba(26,138,255,0.14);
  --placeholder:#1c2027;
  --track:      #262b33;
  --warn-bg:    rgba(183,121,31,0.18);
  --warn-ink:   #f0b45a;
  --pink-soft:  rgba(242,45,45,0.18);
  --green-soft: rgba(54,184,137,0.22);
  --shadow:     0 10px 24px rgba(0,0,0,0.35);
  --shadow-2:   0 18px 42px rgba(0,0,0,0.45);
  background: var(--page);
}
/* degree badge sits on the swing image, so it stays white */
[data-theme="dark"] #gw-grip-app .tile-viz .gv-deg {
  color: #fff;
}