/*
 * GolfWiz Stance Analyzer - WordPress page styles.
 *
 * Generated from stance_correction_website/index.html and scoped under
 * #gw-stance-app. Body state selectors remain on the real document body because
 * stance-web.js stores camera and result state there.
 *
 * Keep this file beside stance-analyzer.php and stance-web.js. It is separate
 * from the theme's global stylesheet so the analyzer's generic class names do
 * not affect other WordPress pages.
 */

/* 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. */

/*
 * Trap the analyzer's camera and modal layers in one stacking context. The
 * certificate is allowed above the sticky site header only while it is open.
 */
#gw-stance-app { position: relative; z-index: 1; }
#gw-stance-app:has(#certModal:not([hidden])) { z-index: 1000; }

/* Analyzer styles. */
#gw-stance-app, #gw-stance-app *, #gw-stance-app *::before, #gw-stance-app *::after { box-sizing: border-box; }

    #gw-stance-app {
      --primary:    #1A8AFF;
      --ph-red:     #ee3124;
      --ph-red-press: #cf2519;
      --primary-press: #1472d6;
      --red:        #f22d2d;
      --red-ink:    #d82020;
      --red-text:   #f22d2d;
      --pink-soft:  #fbd0dc;
      --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-stance-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;
    }
    #gw-stance-app img, #gw-stance-app svg, #gw-stance-app video, #gw-stance-app canvas { max-width: 100%; }
    #gw-stance-app .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; }
    @media (min-width: 640px) { #gw-stance-app .wrap { padding: 32px; } }
    @media (min-width: 1024px) { #gw-stance-app .wrap { padding: 40px 48px 48px; } }
    #gw-stance-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-stance-app .hero { grid-area: hero; max-width: 620px; margin: 0; align-self: center; }
    /* App Store rating badge above the heading (left-aligned) */
    #gw-stance-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-stance-app .hero-stars { display: inline-flex; align-items: center; gap: 2px; color: #f5a623; }
    #gw-stance-app .hero-stars svg { width: 16px; height: 16px; flex: none; display: block; }
    #gw-stance-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-stance-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: 36px; line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
    #gw-stance-app .page-title span { display: block; color: var(--primary); }
    #gw-stance-app .page-subtitle { font-size: 16px; line-height: 1.52; color: var(--muted); font-weight: 500; margin: 0; max-width: 34rem; }
    @media (min-width: 640px) {
      #gw-stance-app .page-title { font-size: 46px; }
    }
    @media (min-width: 1024px) {
      #gw-stance-app .page-title { font-size: 58px; }
      #gw-stance-app .page-subtitle { font-size: 16px; }
    }

    /* Layout: hero, camera, result */
    #gw-stance-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-stance-app .tool-left { grid-area: left; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    #gw-stance-app .res { grid-area: res; }
    #gw-stance-app .hist { grid-area: hist; }
    body:not(.has-history) #gw-stance-app .hist { display: none; }
    body.has-result #gw-stance-app .hist { display: none; }
    body:not(.has-result) #gw-stance-app .res { display: none; }
    body:not(.has-result) #gw-stance-app .tool { grid-template-areas: "hero" "left" "hist"; }
    body[data-state="counting"] #gw-stance-app .res { display: none; }
    body[data-state="counting"] #gw-stance-app .tool { grid-template-areas: "hero" "left" "hist"; }
    @media (min-width: 900px) {
      #gw-stance-app .tool { grid-template-columns: minmax(0, 1.14fr) minmax(360px, 0.86fr); grid-template-areas: "hero ." "left res" "hist res"; column-gap: clamp(18px, 3vw, 34px); row-gap: clamp(16px, 2.4vw, 24px); }
      /* 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) #gw-stance-app .tool { grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr); grid-template-areas: "hero left" "hist left"; grid-template-rows: 1fr auto; }
      body[data-state="counting"] #gw-stance-app .tool { grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr); grid-template-areas: "hero left" "hist left"; grid-template-rows: 1fr auto; }
      body:not(.has-result) #gw-stance-app .hero { transform: translateY(-20px); }
      body.has-result #gw-stance-app .tool {
        grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr);
        grid-template-areas: "hero left" "res res";
        column-gap: clamp(18px, 3vw, 34px);
        row-gap: clamp(20px, 3vw, 34px);
      }
      body.has-result #gw-stance-app .hero { max-width: none; align-self: center; }
      body.has-result #gw-stance-app .res { scroll-margin-top: 18px; }
    }
    #gw-stance-app .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }

    /* ── Stage / camera ─────────────────────────────────────── */
    #gw-stance-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;
      container-type: inline-size;
      /* 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-stance-app .stage { aspect-ratio: 3 / 4; } }
    #gw-stance-app #video { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--camera-gradient); }
    /* Front (selfie) camera reads as a mirror so the user's right hand shows on the
       right. CSS-only: grabFrame() reads raw video pixels, so analysis is unaffected.
       The rear camera is left un-mirrored (it already faces the scene directly). */
    body[data-facing="user"] #gw-stance-app #video { transform: scaleX(-1); }
    #gw-stance-app #video::-webkit-media-controls { display: none !important; }

    #gw-stance-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-stance-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-stance-app .ticks, body[data-state="counting"] #gw-stance-app .ticks { opacity: 0.75; }
    #gw-stance-app .ticks span { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.9); }
    #gw-stance-app .ticks .tl { top:0; left:0; border-right:0; border-bottom:0; border-radius: 6px 0 0 0; }
    #gw-stance-app .ticks .tr { top:0; right:0; border-left:0; border-bottom:0; border-radius: 0 6px 0 0; }
    #gw-stance-app .ticks .bl { bottom:0; left:0; border-right:0; border-top:0; border-radius: 0 0 0 6px; }
    #gw-stance-app .ticks .br { bottom:0; right:0; border-left:0; border-top:0; border-radius: 0 0 6px 0; }

    #gw-stance-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-stance-app .scan { opacity: 0.95; animation: scan 2.4s var(--ease) infinite; }
    @keyframes scan { 0% { top: 8%; } 50% { top: 88%; } 100% { top: 8%; } }

    /* Setup reference guides: two example poses (FO left, DTL right) overlaid on the
       live camera so the user can copy either setup. Sources swap with the selected hand. */
    #gw-stance-app .guide { grid-area: 1/1; position: absolute; inset: 3% 2%; z-index: 6; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 5%, 48px); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
    /* DTL is vertically centered; FO drops by half the height gap, (80-68)/2 = 6% of the
       stage = 7.5% of FO's own height, so FO's top lands on DTL's top. Sizes unchanged. */
    #gw-stance-app .guide-img { width: auto; object-fit: contain; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45)); }
    #gw-stance-app #guideFO  { height: 80%; transform: translateY(7.5%); }
    #gw-stance-app #guideDTL { height: 68%; }
    /* Only while lining up, and strictly mutually exclusive with the countdown: the moment
       the 3-2-1 appears the reference pose is removed outright. display:none rather than
       just dropping the opacity, so the two are never on screen together at all — not even
       during the .4s fade the base rule would otherwise run. */
    body[data-state="live"] #gw-stance-app .guide { opacity: 0.9; }
    body[data-state="counting"] #gw-stance-app .guide { display: none; }

    #gw-stance-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-stance-app .onboard, body[data-state="error"] #gw-stance-app .onboard { display: flex; }
    #gw-stance-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-stance-app .ob-action {
      position: relative; width: 100%; max-width: 940px; margin: 0 auto;
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 350px) minmax(0, 1fr);
      grid-template-areas: "title title title" "fo controls dtl";
      align-items: center; justify-content: center; column-gap: clamp(12px, 2.4cqw, 26px); row-gap: 10px;
    }
    #gw-stance-app .ob-action-title { grid-area: title; justify-self: center; margin: 0; color: rgba(255,255,255,0.92); font-size: clamp(13px, 1.4vw, 15px); font-weight: 700; text-align: center; }
    /* The phones fill their flexible side column (up to a cap), so on a wide stage they
       grow and sit out toward the edges, and on a narrow stage they shrink with the
       column instead of overflowing. aspect-ratio keeps the phone proportions. */
    #gw-stance-app .stance-preview {
      position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
      width: 100%; max-width: 200px; aspect-ratio: 0.66;
      padding: 14px 7px 12px; border-radius: 24px;
      background: linear-gradient(180deg, rgba(39,55,70,0.96), rgba(10,18,27,0.96));
      border: 2px solid rgba(255,255,255,0.28);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 14px 26px rgba(0,0,0,0.24);
      overflow: hidden; opacity: 0.9;
    }
    /* center each phone in its (flexible) side column so they sit in the side space */
    #gw-stance-app .stance-preview.left { grid-area: fo; justify-self: center; }
    #gw-stance-app .stance-preview.right { grid-area: dtl; justify-self: center; }
    #gw-stance-app .stance-preview::before {
      content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
      width: 20px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.34); z-index: 2;
    }
    #gw-stance-app .stance-preview::after {
      content: ""; position: absolute; inset: 8px 5px; border-radius: 13px;
      background: radial-gradient(80% 55% at 50% 12%, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 64%, transparent);
      pointer-events: none;
    }
    #gw-stance-app .stance-preview img { position: relative; z-index: 1; width: auto; max-width: 94%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 9px 16px rgba(0,0,0,0.38)); }
    #gw-stance-app #idleGuideFO { height: 84%; transform: translateY(6%); }
    #gw-stance-app #idleGuideDTL { height: 72%; }
    #gw-stance-app .ob-controls { grid-area: controls; position: relative; z-index: 2; width: 100%; min-width: 0; }
    /* Phone view: ALL content (incl. the steps row) is compacted to fit inside the
       camera box with no scroll and no cutoff. Sizes are tuned so the stack fits the
       tall 3/4 stage down to ~320px wide; the phones scale with the container. */
    @container (max-width: 560px) {
      #gw-stance-app .onboard-card { padding: 10px 13px 8px; gap: 7px; }
      #gw-stance-app .ob-action {
        max-width: 420px; grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "title title" "fo dtl" "controls controls";
        column-gap: 12px; row-gap: 7px;
      }
      #gw-stance-app .ob-action-title { font-size: 12.5px; }
      #gw-stance-app .stance-preview { width: clamp(66px, 22cqw, 98px); height: clamp(86px, 27cqw, 116px); padding: 7px 5px 6px; border-radius: 14px; opacity: 0.92; }
      #gw-stance-app .stance-preview::before { top: 4px; width: 15px; height: 3px; }
      #gw-stance-app .stance-preview::after { inset: 7px 5px; }
      #gw-stance-app .stance-preview.left { justify-self: end; }
      #gw-stance-app .stance-preview.right { justify-self: start; }
      #gw-stance-app .ob-controls { width: min(100%, 380px); }
      #gw-stance-app .seg-group { margin-bottom: 6px; }
      #gw-stance-app .seg-group > .seg-lbl { margin-bottom: 4px; font-size: 10.5px; }
      #gw-stance-app .seg-btn { min-height: 36px; border-radius: 10px; font-size: 12.5px; }
      #gw-stance-app #startBtn { height: 44px; min-height: 44px; margin-top: 2px; font-size: 14px; }
    }

    #gw-stance-app .seg-group { margin-bottom: 9px; }
    #gw-stance-app .seg-group > .seg-lbl { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: .06em; text-transform: uppercase; text-align: left; }
    #gw-stance-app .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
    #gw-stance-app .seg.seg-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    #gw-stance-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-stance-app .seg-btn svg { width: 16px; height: 16px; flex: none; }
    #gw-stance-app .seg-btn:hover { border-color: rgba(255,255,255,0.55); }
    #gw-stance-app .seg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    #gw-stance-app .seg-btn[aria-pressed="true"] { background: #fff; color: #051627; border-color: #fff; box-shadow: 0 7px 18px rgba(0,0,0,0.18); }

    #gw-stance-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-stance-app .countdown { display: flex; }
    #gw-stance-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-stance-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-stance-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-stance-app .done-overlay { display: flex; animation: rise .4s var(--ease); }
    body[data-state="done"] #gw-stance-app #video, body[data-state="done"] #gw-stance-app .ticks, body[data-state="done"] #gw-stance-app .scan, body[data-state="done"] #gw-stance-app .guide, body[data-state="done"] #gw-stance-app .stage::after { display: none; }
    body.has-result #gw-stance-app .done-overlay { display: flex; }
    #gw-stance-app .done-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 460px; width: 100%; }
    #gw-stance-app .done-msg { margin: 0; color: #fff; font-weight: 800; font-size: clamp(15px, 2.6vw, 18px); }
    #gw-stance-app .done-sub { margin: 0; color: rgba(255,255,255,0.76); font-size: clamp(12px, 2vw, 13.5px); }
    #gw-stance-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-stance-app .stage-chip, body[data-state="paused"] #gw-stance-app .stage-chip { display: inline-flex; }
    #gw-stance-app .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 0 rgba(26,138,255,0.45); animation: pulse 1.6s infinite; flex: none; }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(26,138,255,0.45); } 70% { box-shadow: 0 0 0 9px rgba(26,138,255,0); } 100% { box-shadow: 0 0 0 0 rgba(26,138,255,0); } }

    #gw-stance-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-stance-app .flip-fab img { width: 24px; height: 24px; display: block; object-fit: contain; pointer-events: none; }
    #gw-stance-app .flip-fab:hover:not(:disabled) { background: rgba(255,255,255,0.96); }
    #gw-stance-app .flip-fab:active:not(:disabled) { transform: scale(0.92) rotate(180deg); }
    #gw-stance-app .flip-fab:disabled { opacity: 0.4; cursor: not-allowed; }
    body[data-state="live"] #gw-stance-app .flip-fab:not([hidden]), body[data-state="counting"] #gw-stance-app .flip-fab:not([hidden]), body[data-state="paused"] #gw-stance-app .flip-fab:not([hidden]) { display: grid; }
    @media (max-width: 560px) { #gw-stance-app .flip-fab { width: 48px; height: 48px; } }

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

    /* ── Buttons / controls ─────────────────────────────────── */
    #gw-stance-app .controls { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
    #gw-stance-app .cam > .controls { display: none; }
    body[data-state="live"] #gw-stance-app .cam > .controls, body[data-state="counting"] #gw-stance-app .cam > .controls, body[data-state="paused"] #gw-stance-app .cam > .controls { display: flex; }
    #gw-stance-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-stance-app .btn svg { width: 16px; height: 16px; flex: none; }
    #gw-stance-app .btn.grow { flex: 1 1 0; min-width: 130px; max-width: 320px; }
    #gw-stance-app .btn:hover:not(:disabled) { background: var(--ink); color: #fff; transform: translateY(-1px); }
    #gw-stance-app .btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
    #gw-stance-app .btn:disabled { opacity: 0.4; cursor: not-allowed; }
    #gw-stance-app .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(26,138,255,0.24); }
    #gw-stance-app .btn.primary:hover:not(:disabled) { background: var(--primary-press); border-color: var(--primary-press); }
    #gw-stance-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-stance-app #startBtn svg { width: 18px; height: 18px; display: block; }
    #gw-stance-app #startBtn span { display: block; line-height: 1; }
    #gw-stance-app .btn:focus-visible, #gw-stance-app .hist-item:focus-visible, #gw-stance-app .hist-more:focus-visible, #gw-stance-app .cert-close:focus-visible, #gw-stance-app .cert-soc:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    #gw-stance-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; }
    #gw-stance-app .statusline.error { color: var(--red-text); }

    /* ── Result card ────────────────────────────────────────── */
    #gw-stance-app .panel { padding: 0; overflow: hidden; }
    #gw-stance-app .result { display: none; flex-direction: column; gap: clamp(12px, 1.6vw, 16px); padding: clamp(14px, 2vw, 20px); }
    body.has-result #gw-stance-app .result { display: flex; animation: rise .45s var(--ease); }
    @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    #gw-stance-app .result-side { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 16px); min-width: 0; }

    #gw-stance-app .verdict-row { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2.4vw, 24px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); color: var(--ink); }
    
    #gw-stance-app .verdict-name { margin: 0; font-size: clamp(26px, 4.4vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); }
    #gw-stance-app .verdict-name .count { color: var(--red-text); }
    #gw-stance-app .verdict-desc { margin: 0; max-width: 52ch; font-size: clamp(14px, 1.9vw, 15.5px); line-height: 1.6; color: var(--muted); }

    /* captured setup frame */
    #gw-stance-app .skl-wrap {
      position: relative;
      margin: 0;
      padding: clamp(10px, 1.6vw, 14px);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--white);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    #gw-stance-app .skl-wrap img { display: none; }
    #gw-stance-app .skl-wrap canvas {
      position: static;
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 4;
      border-radius: 10px;
      border: 1px solid rgba(15,45,73,0.12);
      background: #0b1322;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
    }
    #gw-stance-app .skl-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
    /* show/hide pose skeleton, top-right of the captured frame */
    #gw-stance-app .skl-toggle {
      position: absolute; top: 20px; right: 20px; z-index: 3;
      display: inline-flex; align-items: center; gap: 6px;
      height: 32px; padding: 0 11px 0 9px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(11,19,34,0.62); color: #fff;
      font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
      backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
      box-shadow: 0 4px 14px rgba(0,0,0,0.28);
      transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
      -webkit-tap-highlight-color: transparent;
    }
    #gw-stance-app .skl-toggle svg { width: 16px; height: 16px; flex: none; }
    #gw-stance-app .skl-toggle:hover { background: rgba(11,19,34,0.78); border-color: rgba(255,255,255,0.4); transform: translateY(-1px); }
    #gw-stance-app .skl-toggle:active { transform: translateY(0) scale(0.97); }
    #gw-stance-app .skl-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    #gw-stance-app .skl-toggle[aria-pressed="false"] { background: rgba(11,19,34,0.5); color: rgba(255,255,255,0.82); }
    @media (max-width: 420px) { #gw-stance-app .skl-toggle span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #gw-stance-app .skl-toggle { padding: 0; width: 32px; justify-content: center; } }

    /* report card: one row per checked aspect */
    #gw-stance-app .report:empty { display: none; }
    #gw-stance-app .report { display: flex; flex-direction: column; gap: 0; padding: clamp(6px, 1vw, 8px) clamp(14px, 2vw, 20px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
    #gw-stance-app .report-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border: 0; background: transparent; }
    #gw-stance-app .report-row + .report-row { border-top: 1px solid var(--line); }
            #gw-stance-app .rr-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
    #gw-stance-app .report-row.good .rr-ic { background: var(--green); color: #fff; }
    #gw-stance-app .report-row.flag .rr-ic { background: var(--red); color: #fff; }
    #gw-stance-app .rr-ic svg { width: 14px; height: 14px; }
    #gw-stance-app .rr-body { min-width: 0; }
    #gw-stance-app .rr-group { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
    #gw-stance-app .report-row.flag .rr-group { color: var(--red-text); }
    #gw-stance-app .report-row.good .rr-group { color: var(--green-deep); }
    #gw-stance-app .rr-title { font-size: 14px; font-weight: 800; color: var(--ink); margin-top: 2px; }
    #gw-stance-app .rr-detail { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; }

    /* detailed fix cards */
    #gw-stance-app .fixes { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 12px); padding: 0; }
    #gw-stance-app .fixes h4 { margin: 4px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
    #gw-stance-app .err-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(14px, 2vw, 18px); background: var(--white); box-shadow: var(--shadow); }
    #gw-stance-app .err-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    #gw-stance-app .err-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
    #gw-stance-app .err-sev { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 0; background: none; color: var(--faint); }
    #gw-stance-app .err-sev.high { color: var(--red-text); }
    #gw-stance-app .err-sev.med { color: var(--amber); }
    #gw-stance-app .err-sev.low { color: var(--faint); }
    #gw-stance-app .err-summary { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2, rgba(23,23,23,0.82)); }
    #gw-stance-app .err-fix { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--green-bg); font-size: 13.5px; line-height: 1.55; color: var(--green-deep); display: flex; gap: 8px; }
    #gw-stance-app .err-fix b { color: var(--green-deep); }
    #gw-stance-app .err-fix svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

    #gw-stance-app .good-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(22px, 3vw, 30px) 18px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
    #gw-stance-app .good-card .gc-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--green-bg); color: var(--green-deep); display: grid; place-items: center; }
    #gw-stance-app .good-card .gc-ic svg { width: 30px; height: 30px; }
    #gw-stance-app .good-card h4 { margin: 0; font-size: 18px; font-weight: 800; }
    #gw-stance-app .good-card p { margin: 0; max-width: 40ch; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

    #gw-stance-app .result .controls { margin: 0; padding: 0; }
    #gw-stance-app .result .controls #saveBtn { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: none; }
    #gw-stance-app .result .controls #saveBtn:hover:not(:disabled) { background: var(--primary-press); border-color: var(--primary-press); }
    /* Primary scan CTAs use the grip page's red. */
    #gw-stance-app .faq-cta .btn.primary,
    #gw-stance-app #startBtn.btn.primary,
    #gw-stance-app #camAgainBtn.btn.primary,
    #gw-stance-app #resAgainBtn.btn.primary { background: var(--ph-red); border-color: var(--ph-red); color: #fff; box-shadow: 0 8px 20px rgba(238,49,36,0.24); }
    #gw-stance-app .faq-cta .btn.primary:hover,
    #gw-stance-app #startBtn.btn.primary:hover:not(:disabled),
    #gw-stance-app #camAgainBtn.btn.primary:hover:not(:disabled),
    #gw-stance-app #resAgainBtn.btn.primary:hover:not(:disabled) { background: var(--ph-red-press); border-color: var(--ph-red-press); }
    #gw-stance-app .challenge { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
    #gw-stance-app .challenge h4 { margin: 0 0 3px; font-size: 15px; line-height: 1.25; font-weight: 800; color: var(--ink); }
    #gw-stance-app .challenge p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
    #gw-stance-app .challenge-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(118px, 0.65fr); align-items: center; gap: 10px; }
    #gw-stance-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-stance-app .challenge-share:hover:not(:disabled) { background: #000; border-color: #000; }
    #gw-stance-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-stance-app .challenge-copy svg { width: 18px; height: 18px; flex: none; }
    #gw-stance-app .challenge-save-note { display: block; width: 100%; margin: 12px auto 0; padding: 0; border: 0; background: transparent; color: #8a92a0; font: inherit; font-size: 12.5px; line-height: 1.45; text-align: center; cursor: pointer; }
    #gw-stance-app .challenge-save-note:hover { color: var(--ink); }
    #gw-stance-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; }
    #gw-stance-app .buddy-share-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) {
      /* Laptop and up: verdict across the top, captured frame left, report right —
         the original layout, wearing the minimal card styling. */
      body.has-result #gw-stance-app .result {
        display: grid;
        grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
        grid-template-areas: "verdict verdict" "image side";
        align-items: start;
        gap: clamp(12px, 1.6vw, 16px);
      }
      body.has-result #gw-stance-app .verdict-row { grid-area: verdict; }
      body.has-result #gw-stance-app .verdict-name { font-size: clamp(26px, 2.8vw, 34px); }
      body.has-result #gw-stance-app .verdict-desc { max-width: none; }
      body.has-result #gw-stance-app .skl-wrap { grid-area: image; margin: 0; position: sticky; top: 18px; }
      body.has-result #gw-stance-app .result-side { grid-area: side; }
      body.has-result #gw-stance-app .result .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      body.has-result #gw-stance-app .result .controls .btn.grow { width: 100%; max-width: none; min-width: 0; }
      body.has-result #gw-stance-app .challenge-actions { grid-template-columns: minmax(0, 1.35fr) minmax(118px, 0.65fr); gap: 10px; }
    }
    @media (max-width: 360px) {
      #gw-stance-app .challenge-actions { gap: 8px; }
      #gw-stance-app .challenge-share { font-size: 13.5px; }
      #gw-stance-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-stance-app .result .controls { flex-direction: column; align-items: stretch; }
      #gw-stance-app .result .controls .btn.grow { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; }
    }

    /* Certificate share modal */
    #gw-stance-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-stance-app .cert-modal[hidden] { display: none; }
    body.is-embedded #gw-stance-app .cert-modal { top: 0; min-height: var(--cert-doc-height, 100dvh); pointer-events: none; }
    @media (min-height: 1000px) {
      #gw-stance-app .cert-modal { place-items: start center; padding-top: clamp(24px, 5vh, 80px); }
    }
    #gw-stance-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; }
    body.is-embedded #gw-stance-app .cert-backdrop { position: absolute; inset: 0; pointer-events: auto; }
    @supports not (backdrop-filter: blur(1px)) { #gw-stance-app .cert-backdrop { background: rgba(15,15,18,0.82); } }
    #gw-stance-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;
    }
    body.is-embedded #gw-stance-app .cert-dialog { margin-top: var(--cert-top, 0px); pointer-events: auto; }
    @keyframes cert-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
    #gw-stance-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-stance-app .cert-close:hover { background: var(--soft); }
    #gw-stance-app .cert-close svg { width: 22px; height: 22px; }
    #gw-stance-app .cert-head { text-align: center; margin: 2px 0 10px; padding: 0 40px; }
    #gw-stance-app .cert-head h3 { margin: 0 0 4px; font-size: clamp(17px, 3.4vw, 20px); font-weight: 800; }
    #gw-stance-app .cert-head p { margin: 0; font-size: 13px; color: var(--muted); }
    #gw-stance-app .cert-preview { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; display: block; }
    #gw-stance-app .cert-preview img { width: 100%; height: auto; max-height: none; display: block; object-fit: contain; }
    #gw-stance-app .cert-actions { display: flex; gap: 10px; margin-top: 14px; align-items: stretch; }
    #gw-stance-app .cert-copy { flex: none; width: 44px; min-width: 44px; padding: 0; border-radius: 999px; }
    #gw-stance-app .cert-copy svg { width: 20px; height: 20px; }
    #gw-stance-app .cert-actions[data-share="copy"] #certShare { display: none; }
    #gw-stance-app .cert-actions[data-share="native"] #certCopyLink { display: none; }
    @media (max-width: 360px) { #gw-stance-app .cert-actions { flex-wrap: wrap; } #gw-stance-app .cert-actions .btn.grow { min-width: 120px; flex: 1 1 45%; } }
    #gw-stance-app .cert-socials { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
    #gw-stance-app .cert-socials-lbl { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
    #gw-stance-app .cert-social-row { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
    #gw-stance-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-stance-app .cert-soc:hover { transform: translateY(-2px); }
    #gw-stance-app #shWhatsapp:hover { background: #25d366; color: #fff; border-color: #25d366; }
    #gw-stance-app #shX:hover { background: #000; color: #fff; border-color: #000; }
    #gw-stance-app #shFacebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
    #gw-stance-app #shCopy:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
    #gw-stance-app .cert-soc svg { width: 20px; height: 20px; }
    #gw-stance-app .cert-share-msg { display: block; margin-top: 10px; font-size: 12.5px; color: var(--green-deep); font-weight: 700; min-height: 16px; }
    @media (max-width: 560px) {
      #gw-stance-app .cert-modal { place-items: start center; padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
      #gw-stance-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-stance-app .cert-copy { width: 48px; min-width: 48px; }
      #gw-stance-app .cert-close { top: 72px; right: 2px; margin-bottom: -44px; width: 44px; height: 44px; }
      #gw-stance-app .cert-head { padding: 0 34px; }
      #gw-stance-app .cert-preview img { max-height: none; }
    }
    body.is-embedded #gw-stance-app .cert-close { position: absolute; top: 14px; right: 14px; margin: 0; }
    @media (max-width: 560px) { body.is-embedded #gw-stance-app .cert-close { top: 10px; right: 12px; margin: 0; } }
    #gw-stance-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-stance-app .cert-back-btn[hidden] { display: none; }
    #gw-stance-app .cert-back-btn svg { width: 15px; height: 15px; }
    #gw-stance-app .cert-back-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    @keyframes gv-fade { from { opacity: 0; } to { opacity: 1; } }

    /* scan history */
    #gw-stance-app .hist { animation: rise .45s var(--ease); }
    #gw-stance-app .hist-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
    #gw-stance-app .hist-head h3 { margin: 0; font-size: 14px; font-weight: 800; }
    #gw-stance-app .hist-head .count { font-size: 12px; color: var(--muted); font-weight: 700; }
    #gw-stance-app .hist-body { padding: 8px; max-height: 360px; overflow-y: auto; }
    #gw-stance-app .hist-empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 13px; }
    #gw-stance-app .hist-list { display: flex; flex-direction: column; gap: 6px; }
    #gw-stance-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-stance-app .hist-item:hover { background: var(--soft); }
    #gw-stance-app .hist-item[aria-current="true"] { border-color: var(--primary); background: rgba(26,138,255,0.06); }
    #gw-stance-app .hist-item.hist-extra { display: none; }
    #gw-stance-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-stance-app .hist-more:hover { background: var(--soft); border-color: var(--line-2); }
    #gw-stance-app .hist-thumb { width: 44px; height: 44px; border-radius: 9px; overflow: hidden; flex: none; background: var(--stage); display: grid; place-items: center; }
    #gw-stance-app .hist-thumb img { width: 100%; height: 100%; object-fit: cover; }
    #gw-stance-app .hist-meta { min-width: 0; flex: 1; }
    #gw-stance-app .hist-name { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #gw-stance-app .hist-sub { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
    #gw-stance-app .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
    #gw-stance-app .dot.good { background: var(--green); }
    #gw-stance-app .dot.fix { background: var(--red); }


    /* app download CTA */
    /* ── Dark "Fix your swing" hero row ─────────────────────── */
    #gw-stance-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-stance-app .swing-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 56px); align-items: center; }
    @media (min-width: 900px) { #gw-stance-app .swing-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
    #gw-stance-app .swing-hero-copy { min-width: 0; }
    #gw-stance-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-stance-app .swing-hero-copy h2 .sh-blue { display: block; color: var(--primary); }
    #gw-stance-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-stance-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-stance-app .try-free-btn:hover, #gw-stance-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-stance-app .try-free-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    #gw-stance-app .try-free-btn .tf-apple { width: 21px; height: 21px; flex: none; }
    #gw-stance-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-stance-app .swing-hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
      #gw-stance-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-stance-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-stance-app .sh-phone { --phone-w: min(220px, 62vw, calc(46vh * 1179 / 2556)); }
    }
    #gw-stance-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-stance-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-stance-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-stance-app .sh-screen video, #gw-stance-app .sh-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* empty-state placeholder shown until the video src is set */
    #gw-stance-app .sh-screen-empty { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, #0e141d, #0a0f16); }
    #gw-stance-app .sh-screen-empty span { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: .04em; }
    /* Dynamic Island */
    #gw-stance-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-stance-app .sh-btn { position: absolute; z-index: 2; background: linear-gradient(180deg, #33373e, #14161a); border-radius: 2px; }
    #gw-stance-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-stance-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-stance-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-stance-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); }

    #gw-stance-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-stance-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-stance-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-stance-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-stance-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-stance-app .phase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { #gw-stance-app .phase-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
    #gw-stance-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-stance-app .phase-link:hover, #gw-stance-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-stance-app .phase-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    #gw-stance-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-stance-app .phase-link { min-height: 54px; font-size: 13px; } }
    #gw-stance-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-stance-app .app-cta h2 { white-space: normal; font-size: clamp(22px, 6vw, 28px); } }
    #gw-stance-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-stance-app .store-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
    #gw-stance-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-stance-app .store-btn:hover, #gw-stance-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-stance-app .store-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    #gw-stance-app .store-btn svg { width: 27px; height: 27px; flex: none; }
    #gw-stance-app .store-btn .store-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
    #gw-stance-app .store-btn small { display: block; font-size: clamp(9px, 1.2vw, 11.5px); font-weight: 600; letter-spacing: .03em; opacity: .82; }
    #gw-stance-app .store-btn strong { display: block; font-size: clamp(17px, 2vw, 23px); font-weight: 800; letter-spacing: 0; margin-top: 1px; }
    #gw-stance-app .store-btn.play svg { width: 30px; height: 30px; }
    #gw-stance-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-stance-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-stance-app .done-overlay .store-btn:hover, #gw-stance-app .done-overlay .store-btn:focus-visible { background: #fff; color: #000; border-color: rgba(0,0,0,0.28); }
    #gw-stance-app .done-overlay .store-btn svg { width: 26px; height: 26px; }
    #gw-stance-app .done-overlay .store-btn.play svg { width: 29px; height: 29px; }
    #gw-stance-app .done-overlay .store-btn small { font-size: 10px; }
    #gw-stance-app .done-overlay .store-btn strong { font-size: 17px; }
    #gw-stance-app .done-again {
      min-height: 38px; padding: 5px 16px; border: 1px solid var(--ph-red);
      background: var(--ph-red); color: #fff; box-shadow: none;
      font-size: 13px; font-weight: 800;
    }
    #gw-stance-app .done-again svg { width: 15px; height: 15px; }
    #gw-stance-app .done-again:hover:not(:disabled), #gw-stance-app .done-again:focus-visible {
      border-color: var(--ph-red-press); background: var(--ph-red-press); color: #fff; box-shadow: none;
    }
    #gw-stance-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-stance-app .video-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    /* bordered card box (video on top, text padded below) */
    #gw-stance-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-stance-app .drill-video { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--placeholder, #e8edf3); border-bottom: 1px solid var(--line); }
    #gw-stance-app .drill-video video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; filter: none; }
    #gw-stance-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-stance-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-stance-app .store-buttons { max-width: 340px; margin-inline: auto; }
      #gw-stance-app .store-btn { min-width: 0; flex: 1 1 100%; min-height: 64px; }
      #gw-stance-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-stance-app .video-showcase::-webkit-scrollbar { display: none; }
      #gw-stance-app .drill-card { flex: 0 0 76%; scroll-snap-align: start; }
    }

    /* setup error guide */
    #gw-stance-app .stance-impact { width: 100%; max-width: 980px; margin: clamp(24px, 5vw, 46px) auto 8px; }
    #gw-stance-app .angle-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 18px); margin-top: 18px; }
    @media (max-width: 639px) { #gw-stance-app .angle-panels { grid-template-columns: 1fr; } }
    #gw-stance-app .angle-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
    #gw-stance-app .angle-head { padding: clamp(16px, 3vw, 22px); color: #fff; background: var(--camera-gradient); }
    #gw-stance-app .angle-label { display: inline-flex; align-items: center; min-height: 22px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    #gw-stance-app .angle-head h3 { margin: 10px 0 6px; color: #fff; font-size: clamp(18px, 3vw, 23px); line-height: 1.15; }
    #gw-stance-app .angle-head p { margin: 0; color: rgba(255,255,255,0.84); font-size: 13.5px; line-height: 1.55; }
    #gw-stance-app .issue-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
    #gw-stance-app .issue-card { border: 1px solid var(--line); border-radius: 8px; background: var(--white); overflow: hidden; box-shadow: none; }
    #gw-stance-app .issue-card[open] { background: var(--white); border-color: var(--line-2); box-shadow: none; }
    #gw-stance-app .issue-card summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 18px 20px; color: var(--ink); font-size: 14px; font-weight: 800; min-height: 52px; }
    #gw-stance-app .issue-card summary::-webkit-details-marker { display: none; }
    #gw-stance-app .issue-card summary::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .18s var(--ease); margin-left: auto; }
    #gw-stance-app .issue-card[open] summary::after { transform: rotate(225deg); }
    #gw-stance-app .issue-body { padding: 0 20px 18px; }
    #gw-stance-app .issue-body p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.58; }
    #gw-stance-app .symptom-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0; }
    #gw-stance-app .symptom-row span { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 9px; border-radius: 999px; background: rgba(23,23,23,0.045); color: var(--ink); font-size: 11.5px; font-weight: 700; }
    #gw-stance-app .quick-fix { margin-top: 10px; padding: 10px 11px; border-radius: var(--r-sm); background: var(--green-bg); color: var(--green-deep); font-size: 13px; line-height: 1.5; }
    #gw-stance-app .quick-fix b { color: var(--green-deep); }

    /* humanized setup guide */
    #gw-stance-app .stance-guide { width: 100%; max-width: 980px; margin: clamp(24px, 5vw, 46px) auto 8px; }
    #gw-stance-app .guide-intro { padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--white), var(--soft)); box-shadow: var(--shadow); }
    #gw-stance-app .guide-eyebrow { display: inline-flex; align-items: center; min-height: 24px; padding: 5px 11px; border-radius: 999px; background: rgba(31,157,87,0.10); color: var(--green-deep); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    #gw-stance-app .guide-intro h2 { margin: 12px 0 10px; font-size: clamp(26px, 4.2vw, 40px); line-height: 1.08; letter-spacing: 0; font-weight: 700; }
    #gw-stance-app .guide-lead { margin: 0; max-width: 72ch; color: var(--muted); font-size: clamp(15px, 2.25vw, 17px); line-height: 1.7; }
    #gw-stance-app .guide-block { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr); gap: clamp(14px, 3vw, 24px); align-items: start; margin-top: 18px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
    @media (max-width: 760px) { #gw-stance-app .guide-block { grid-template-columns: 1fr; } }
    #gw-stance-app .guide-side { position: sticky; top: 14px; }
    @media (max-width: 760px) { #gw-stance-app .guide-side { position: static; } }
    #gw-stance-app .guide-side h3 { margin: 0; font-size: clamp(18px, 3vw, 24px); line-height: 1.16; }
    #gw-stance-app .guide-side p { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
    #gw-stance-app .guide-copy p { margin: 0; color: var(--muted); font-size: clamp(16px, 2.1vw, 18px); line-height: 1.7; }
    #gw-stance-app .guide-copy p + p { margin-top: 12px; }
    #gw-stance-app .guide-callout { margin-top: 14px; padding: 13px 14px; border-radius: var(--r-md); background: rgba(26,138,255,0.06); border: 1px solid rgba(26,138,255,0.18); color: var(--ink); font-size: 14px; line-height: 1.6; }
    #gw-stance-app .guide-callout b { color: var(--primary); }
    #gw-stance-app .stance-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
    @media (max-width: 639px) { #gw-stance-app .stance-types { grid-template-columns: 1fr; } }
    #gw-stance-app .stance-type { padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--soft-2); }
    #gw-stance-app .stance-type strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14px; }
    #gw-stance-app .stance-type p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.58; }
    #gw-stance-app .club-chart { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
    #gw-stance-app .club-row { display: grid; grid-template-columns: 0.8fr 1fr 1fr 1fr; gap: 10px; padding: 12px 14px; align-items: start; }
    /* header strip */
    #gw-stance-app .club-row:first-child { background: var(--soft-3, #f3f4f6); font-size: 12px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
    /* zebra body rows: alternate white / faint gray (header is child 1, so body
       starts at child 2 = even = white, child 3 = odd = faint gray, ...) */
    #gw-stance-app .club-row:not(:first-child) { color: var(--muted); font-size: 13px; line-height: 1.45; }
    #gw-stance-app .club-row:nth-child(even) { background: var(--white); }
    #gw-stance-app .club-row:nth-child(odd):not(:first-child) { background: var(--row-alt, #fafbfc); }
    #gw-stance-app .club-row b { color: var(--ink); }
    @media (max-width: 720px) {
      #gw-stance-app .club-row { grid-template-columns: 1fr; gap: 4px; }
      #gw-stance-app .club-row:first-child { display: none; }
      /* stacked cards: zebra still applies; add a hairline so rows stay distinct */
      #gw-stance-app .club-row:not(:first-child) + .club-row { border-top: 1px solid var(--line); }
      #gw-stance-app .club-row span::before { display: block; color: var(--ink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
      #gw-stance-app .club-row span:nth-child(2)::before { content: "Setup width"; }
      #gw-stance-app .club-row span:nth-child(3)::before { content: "Ball position"; }
      #gw-stance-app .club-row span:nth-child(4)::before { content: "Main goal"; }
    }
    #gw-stance-app .guide-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
    @media (max-width: 640px) { #gw-stance-app .guide-actions { grid-template-columns: 1fr; } }
    #gw-stance-app .action-panel { padding: 15px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--soft-2); }
    #gw-stance-app .action-panel h4 { margin: 0 0 7px; font-size: 15px; }
    #gw-stance-app .action-panel p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.58; }
    #gw-stance-app .guide-checklist { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
    #gw-stance-app .guide-checklist li { position: relative; padding-left: 24px; color: var(--muted); font-size: 14px; line-height: 1.55; }
    #gw-stance-app .guide-checklist li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }
    #gw-stance-app .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    #gw-stance-app .faq-item { border: 1px solid var(--line); border-radius: 8px; background: var(--white); overflow: hidden; box-shadow: none; }
    #gw-stance-app .faq-item[open] { border-color: var(--line-2); }
    #gw-stance-app .faq-item summary { list-style: none; cursor: pointer; padding: 18px 20px; min-height: 52px; font-weight: 800; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    #gw-stance-app .faq-item summary::-webkit-details-marker { display: none; }
    #gw-stance-app .faq-item summary::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .18s var(--ease); margin-left: auto; }
    #gw-stance-app .faq-item[open] summary::after { transform: rotate(225deg); }
    #gw-stance-app .faq-item p { margin: 0; padding: 0 20px 18px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

    /* ── Educational area: main + sticky sidebar (article template) ───
       Accent #1573d7 is scoped to .edu via --accent, so the analyzer tool
       above keeps its own --primary (#1A8AFF). Reuses the issue-card, faq-item,
       symptom-row, quick-fix, guide-callout, setup-types, club-chart,
       guide-checklist and action-panel components defined above. */
    #gw-stance-app .edu { width: 100%; max-width: 1100px; margin: clamp(24px, 5vw, 46px) auto 8px; --accent: #1573d7; --accent-soft: rgba(21,115,215,0.10); }
    #gw-stance-app .edu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); }
    @media (min-width: 900px) { #gw-stance-app .edu-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 264px); align-items: start; } }
    #gw-stance-app .edu-main { min-width: 0; }

    /* "On this page" table of contents (sticky nav). Standalone uses CSS position:sticky;
       when embedded the JS sticky-emulation (syncEmbeddedSticky → .toc-sticky) moves it
       via transform so it still follows the parent-page scroll inside the iframe. */
    #gw-stance-app .toc-sticky { min-width: 0; order: 2; }
    @media (min-width: 900px) { #gw-stance-app .toc-sticky { position: sticky; top: 16px; align-self: start; } }
    #gw-stance-app .toc-sticky { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: 16px 16px 10px; }
    #gw-stance-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-stance-app .toc-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
    #gw-stance-app .toc-list li { margin: 0; }
    #gw-stance-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-stance-app .toc-link:hover { background: var(--soft); color: var(--ink); }
    #gw-stance-app .toc-num { flex: none; font-size: 12px; font-weight: 800; color: #9aa4b2; padding-top: 1px; }
    #gw-stance-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-stance-app .toc-link.active .toc-num { color: var(--primary); }
    #gw-stance-app .toc-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    /* On mobile the TOC sits above the content (not sticky), which is fine and can't
       break the iframe scroll. */
    @media (max-width: 899px) { #gw-stance-app .toc-sticky { order: -1; } }

    /* main-column sections */
    /* Typography mirrors the article reference: restrained dark headings, a slightly
       darker body gray, and sub-headings that are simply bold dark sentence-case
       text (no eyebrow / accent / divider) with the explanation directly beneath. */
    #gw-stance-app .edu-section + .edu-section { margin-top: clamp(30px, 4.5vw, 48px); }
    #gw-stance-app .edu-section > h2 { margin: 0 0 10px; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    #gw-stance-app .edu-section > p { margin: 0 0 12px; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; max-width: 68ch; }
    #gw-stance-app .edu-section > p + p { margin-top: 10px; }
    /* sub-section heading: same size/weight as the section H2 headings */
    #gw-stance-app .edu-section > h3.edu-subhead { margin: 28px 0 6px; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    /* the description line directly under a sub-head couples to it */
    #gw-stance-app .edu-section > h3.edu-subhead + p { margin-top: 0; }
    #gw-stance-app .edu-section > h3.edu-subhead .view-tag { font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }

    /* "How it affects your shots" blue-bullet list, small dots, body-gray text */
    #gw-stance-app .edu-bullets { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
    #gw-stance-app .edu-bullets li { position: relative; padding-left: 22px; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.55; }
    #gw-stance-app .edu-bullets li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: #1A8AFF; }
    #gw-stance-app .edu-bullets li b { color: var(--ink); }

    /* compact fault accordions inside .edu retint their accents to --accent */
    #gw-stance-app .edu .issue-card[open] { border-color: rgba(21,115,215,0.22); }
    #gw-stance-app .edu .issue-list { padding: 0; gap: 9px; }

    /* checklist sits in the main column; give its trailing paragraph real breathing
       room so the closing line doesn't crowd the last list item. */
    #gw-stance-app .edu .guide-checklist { margin-top: 14px; }
    #gw-stance-app .edu .guide-checklist + p { margin-top: 16px; }

    /* main-column callout coherence (reused .guide-callout defaults to --primary) */
    #gw-stance-app .edu .guide-callout { background: var(--accent-soft); border-color: rgba(21,115,215,0.20); }
    #gw-stance-app .edu .guide-callout b { color: var(--accent); }


    /* Setup FAQ section (moved out of the sidebar to its own row) */
    #gw-stance-app .setup-faq { width: 100%; max-width: 1100px; margin: clamp(34px, 5vw, 58px) auto 8px; }
    #gw-stance-app .setup-faq-head { margin-bottom: clamp(14px, 2.4vw, 20px); text-align: center; }
    #gw-stance-app .setup-faq h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.12; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    #gw-stance-app .setup-faq .faq-list { margin-top: 0; }

    /* references */
    #gw-stance-app .refs { width: 100%; max-width: 1100px; margin: clamp(34px, 5vw, 58px) auto 8px; }
    #gw-stance-app .refs-head { max-width: 680px; margin-bottom: clamp(16px, 2.6vw, 22px); }
    #gw-stance-app .refs h2 { margin: 0 0 8px; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .refs p { margin: 0; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    /* Setup-fault links: a single card with the faults grouped by category as
       red-bullet blue links (matches the app's swing-error list style). */
    #gw-stance-app .ref-card-list { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px); }
    #gw-stance-app .ref-groups { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 26px); }
    @media (min-width: 640px) { #gw-stance-app .ref-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 44px); } }
    @media (min-width: 1000px) { #gw-stance-app .ref-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    #gw-stance-app .ref-group h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
    #gw-stance-app .ref-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
    #gw-stance-app .ref-links li { position: relative; padding-left: 18px; }
    #gw-stance-app .ref-links li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
    #gw-stance-app .ref-links a { color: var(--primary); font-size: 14.5px; font-weight: 400; line-height: 1.35; text-decoration: none; }
    #gw-stance-app .ref-links a:hover, #gw-stance-app .ref-links a:focus-visible { text-decoration: underline; }
    #gw-stance-app .ref-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

    /* main-column closing actions: equal-height cards with the button pinned to the
       bottom so the two CTAs line up regardless of text length. */
    /* Equal-height cards; the description grows to fill so the button (.controls)
       lands at the same bottom line in both cards. The trailing share-message span
       only takes space once it has text, so it doesn't offset the left button. */
    #gw-stance-app .edu .guide-actions { margin-top: 18px; align-items: stretch; }
    #gw-stance-app .edu .action-panel { display: flex; flex-direction: column; }
    #gw-stance-app .edu .action-panel p { flex: 1 1 auto; margin-bottom: 14px; }
    #gw-stance-app .edu .action-panel .controls { margin-top: 0; justify-content: flex-start; }
    #gw-stance-app .edu .action-panel .btn { width: 100%; max-width: none; }
    #gw-stance-app .edu .action-panel .buddy-share-msg:empty { display: none; }
    #gw-stance-app .edu .action-panel .buddy-share-msg:not(:empty) { margin-top: 8px; }


    /* ── Content sections below the analyzer ─────────────────────────── */
    /* how to use it */
    #gw-stance-app .howto { width: 100%; max-width: 1100px; margin: clamp(28px, 4.5vw, 48px) auto 0; }
    #gw-stance-app .howto-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px); }
    #gw-stance-app .howto h2 { margin: 0 0 clamp(12px, 2vw, 18px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .howto-steps { margin: 0; padding: 0; list-style: none; counter-reset: howto; display: grid; gap: 12px; }
    #gw-stance-app .howto-steps li { counter-increment: howto; position: relative; padding-left: 40px; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    #gw-stance-app .common-q .faq-cta { margin-top: clamp(16px, 2.6vw, 22px); display: flex; justify-content: center; }
    #gw-stance-app .common-q .faq-cta .btn { max-width: 320px; }
    /* handedness */
    #gw-stance-app .handedness { width: 100%; max-width: 1100px; margin: clamp(28px, 4.5vw, 48px) auto 0; }
    #gw-stance-app .handedness h2 { margin: 0 0 clamp(10px, 1.8vw, 14px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .handedness-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px); }
    #gw-stance-app .handedness-card p { margin: 0; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    #gw-stance-app .handedness-card p + p { margin-top: clamp(12px, 2vw, 16px); }
    #gw-stance-app .handedness-card a { color: var(--primary); font-weight: 700; text-decoration: none; }
    #gw-stance-app .handedness-card a:hover, #gw-stance-app .handedness-card a:focus-visible { text-decoration: underline; }
    #gw-stance-app .handedness-card a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
    /* club setup (irons / driver) */
    #gw-stance-app .club-setup { width: 100%; max-width: 1100px; margin: clamp(28px, 4.5vw, 48px) auto 0; }
    #gw-stance-app .club-setup h2 { margin: 0 0 clamp(10px, 1.8vw, 14px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .club-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px); }
    #gw-stance-app .club-card h3 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
    #gw-stance-app .club-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
    #gw-stance-app .club-list li { position: relative; padding-left: 18px; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.55; }
    #gw-stance-app .club-list li::before { content: ""; position: absolute; left: 2px; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
    #gw-stance-app .club-card p { margin: clamp(14px, 2.2vw, 18px) 0 0; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    /* posture + distance */
    #gw-stance-app .posture { width: 100%; max-width: 1100px; margin: clamp(28px, 4.5vw, 48px) auto 0; }
    #gw-stance-app .posture h2 { margin: 0 0 clamp(10px, 1.8vw, 14px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .posture-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px); }
    #gw-stance-app .posture-card p { margin: 0; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    #gw-stance-app .posture-card p + p { margin-top: clamp(12px, 2vw, 16px); }
    /* grip cross-promo */
    #gw-stance-app .grip-promo { width: 100%; max-width: 1100px; margin: clamp(28px, 4.5vw, 48px) auto 0; }
    #gw-stance-app .grip-promo h2 { margin: 0 0 clamp(10px, 1.8vw, 14px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .grip-promo-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(14px, 2.4vw, 22px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px); }
    #gw-stance-app .grip-promo-card p { margin: 0; flex: 1 1 320px; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    #gw-stance-app .grip-promo-card a { color: var(--primary); font-weight: 700; text-decoration: none; }
    #gw-stance-app .grip-promo-card a:hover, #gw-stance-app .grip-promo-card a:focus-visible { text-decoration: underline; }
    #gw-stance-app .grip-promo-card a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
    /* alignment note */
    #gw-stance-app .align-note { width: 100%; max-width: 1100px; margin: clamp(28px, 4.5vw, 48px) auto 0; }
    #gw-stance-app .align-note h2 { margin: 0 0 clamp(10px, 1.8vw, 14px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .align-note .align-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 26px); }
    #gw-stance-app .align-note p { margin: 0; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    /* what the tool looks for */
    #gw-stance-app .looks { width: 100%; max-width: 1100px; margin: clamp(28px, 4.5vw, 48px) auto 0; }
    #gw-stance-app .looks h2 { margin: 0 0 clamp(12px, 2vw, 18px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .looks + .looks { margin-top: clamp(22px, 3.4vw, 34px); }
    #gw-stance-app .looks-list { margin: 0; padding: clamp(18px, 3vw, 26px); list-style: none; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
    #gw-stance-app .looks-list li { position: relative; padding-left: 18px; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    #gw-stance-app .looks-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
    #gw-stance-app .looks-list b { color: var(--ink); font-weight: 800; }
    /* camera angles */
    #gw-stance-app .angles { width: 100%; max-width: 1100px; margin: clamp(28px, 4.5vw, 48px) auto 0; }
    #gw-stance-app .angles h2 { margin: 0 0 clamp(10px, 1.8vw, 14px); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.18; font-weight: 800; color: var(--ink); }
    #gw-stance-app .angles p { margin: 0; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    #gw-stance-app .angles-grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2.4vw, 20px); margin: clamp(16px, 2.6vw, 22px) 0; }
    @media (min-width: 760px) { #gw-stance-app .angles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    #gw-stance-app .angle-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); padding: clamp(16px, 2.6vw, 22px); }
    #gw-stance-app .angle-card h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
    #gw-stance-app .howto-note { margin: clamp(14px, 2.2vw, 18px) 0 0; color: var(--ink-2, #374151); font-size: clamp(14.5px, 1.9vw, 15.5px); line-height: 1.62; }
    #gw-stance-app .howto-steps li::before {
      content: counter(howto); position: absolute; left: 0; top: 0.1em;
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--primary); color: #fff;
      font-size: 13px; font-weight: 800; line-height: 26px; text-align: center;
    }

    @media (prefers-reduced-motion: reduce) { #gw-stance-app, #gw-stance-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-stance-app .gw-page-extra { width: 100%; margin-top: clamp(28px, 4.5vw, 48px); }
#gw-stance-app .gw-page-extra > h1,
#gw-stance-app .gw-page-extra > h2,
#gw-stance-app .gw-page-extra > h3,
#gw-stance-app .gw-page-extra > h4,
#gw-stance-app .gw-page-extra > p,
#gw-stance-app .gw-page-extra > ul,
#gw-stance-app .gw-page-extra > ol,
#gw-stance-app .gw-page-extra > blockquote,
#gw-stance-app .gw-page-extra > figure,
#gw-stance-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-stance-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-stance-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-stance-app .gw-page-extra > p,
#gw-stance-app .gw-page-extra > ul,
#gw-stance-app .gw-page-extra > ol { margin-top: 0; margin-bottom: clamp(12px, 1.8vw, 16px); }
#gw-stance-app .gw-page-extra > ul li,
#gw-stance-app .gw-page-extra > ol li { margin-bottom: 8px; }
#gw-stance-app .gw-page-extra > * > a,
#gw-stance-app .gw-page-extra > p > a { color: var(--primary); }
#gw-stance-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,
 * flash, store buttons, certificate) keep their literal colors on purpose.
 */
[data-theme="dark"] #gw-stance-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;
  --row-alt:    #1c2027;
  --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);
}