#utah-jack-guide,[data-utah-jack-reopen]{display:none}
#utah-jack-guide .utah-jack-story-link{display:flex;align-items:center;font:600 13px/1.2 'DM Sans',Arial,sans-serif;border:1px solid #e0bd86;border-radius:5px;padding:10px 14px;background:#1d1710e8;color:#f6eddc;min-height:44px;text-decoration:none}
#utah-jack-guide .utah-jack-story-link:hover{background:#5d3f26}
#utah-jack-guide .utah-jack-story-link:focus-visible{outline:3px solid #ffda92;outline-offset:4px}
@media(min-width:0px){
  .utah-jack-preview-active .hero{min-height:720px;padding:42px 0 180px;isolation:isolate;border-bottom:0;box-shadow:none;overflow:clip}
  .utah-jack-preview-active .jack-unused-grid{display:block;pointer-events:none}
  .utah-jack-preview-active .hero-copy{width:48%;max-width:560px;pointer-events:auto}
  .utah-jack-preview-active .hero-wordmark{max-width:245px;margin-bottom:12px}
  .utah-jack-preview-active .hero h1{font-size:clamp(38px,4.3vw,57px)}
  .utah-jack-preview-active .hero .lede{font-size:16px;line-height:1.5;max-width:490px;margin-bottom:18px}
  .utah-jack-preview-active .hero-utah-jack-guide{display:none}
  .utah-jack-preview-active .hero::before{background:linear-gradient(90deg,#100c08e8,#100c08a6 42%,#100c0820 75%)}
  #utah-jack-guide{display:block;padding:0;position:absolute;inset:0;z-index:3;pointer-events:none}
  #utah-jack-guide[hidden],#utah-jack-guide [hidden]{display:none!important}
  #utah-jack-guide::after{content:"";display:block;position:absolute;left:0;right:0;bottom:44px;height:48px;pointer-events:none;z-index:0;background:url('./media/wood-fence-v1.png') center bottom/100% 280% no-repeat}
  #utah-jack-guide .utah-jack-character{z-index:1}
  .utah-jack-character{position:absolute;width:min(94vw,1180px);max-width:none;height:auto;right:0;bottom:44px;pointer-events:none}
  #utah-jack-guide video{opacity:0}
  #utah-jack-guide.is-playing video{opacity:1}
  #utah-jack-guide.is-playing #utah-jack-poster{opacity:0}
  .utah-jack-controls{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:8px;padding:5px 18px;min-height:44px;box-sizing:border-box;background:#132526;z-index:4;pointer-events:auto}
  #utah-jack-guide button,[data-utah-jack-reopen]{font:600 13px/1.2 'DM Sans',Arial,sans-serif;border:1px solid #e0bd86;border-radius:5px;padding:10px 14px;background:#1d1710e8;color:#f6eddc;cursor:pointer;min-height:40px}
  #utah-jack-guide button:hover,[data-utah-jack-reopen]:hover{background:#5d3f26}
  #utah-jack-guide button:focus-visible,[data-utah-jack-reopen]:focus-visible{outline:3px solid #ffda92;outline-offset:4px}
  .utah-jack-invite{position:absolute;bottom:96px;left:max(22px,calc((100% - 1076px)/2));width:43%;pointer-events:auto}
  #utah-jack-start{background:#edc978!important;color:#20170d!important;border-color:#edc978!important;font-size:16px!important;padding:13px 22px!important}
  .utah-jack-invite p{font:500 15px/1.45 'DM Sans',Arial,sans-serif;color:#f6eddc;margin:10px 0 0;max-width:420px;text-shadow:0 2px 4px #000}
  .utah-jack-caption{min-height:44px}
  .utah-jack-choosing .hero-copy{visibility:hidden;pointer-events:none}
  .utah-jack-choosing .utah-jack-invite{top:130px;bottom:auto;width:42%;max-width:460px}
  #utah-jack-choices h2,#utah-jack-answer h2{font:700 clamp(25px,2.5vw,36px)/1.15 'DM Sans',Arial,sans-serif;color:#f6eddc;margin:18px 0;text-shadow:0 2px 4px #000}
  .utah-jack-choice-buttons{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  #utah-jack-guide .utah-jack-choice-buttons button{font-size:17px;padding:15px 20px;min-width:220px;text-align:left;background:#132526f2}
  .utah-jack-next{display:block;width:fit-content;margin:22px 0 14px;padding:13px 18px;background:#edc978;color:#20170d;border-radius:5px;font-weight:700;text-decoration:none}
  .utah-jack-next:hover{background:#ffda92;color:#20170d}
  .utah-jack-next:focus-visible{outline:3px solid #fff;outline-offset:4px}
  [data-utah-jack-reopen]:not([hidden]){display:block;position:fixed;right:20px;bottom:20px;z-index:60;border-radius:30px}
  @media(max-width:1000px){
    .utah-jack-preview-active .hero{min-height:730px;padding-top:42px}
    .utah-jack-preview-active .hero-copy{width:51%}
    .utah-jack-preview-active .hero-wordmark{max-width:215px}
    .utah-jack-preview-active .hero .lede{font-size:14px}
    .utah-jack-preview-active .hero h1{font-size:39px}
    .utah-jack-preview-active .hero-actions{gap:8px}
    .utah-jack-preview-active .hero-actions .btn{font-size:13px;padding:11px 14px}
    .utah-jack-character{bottom:44px;width:100vw;right:0}
    .utah-jack-invite{width:45%;bottom:86px;left:22px}
  }
}
@media(min-width:0px){
 #utah-jack-guide .utah-jack-controls{flex-wrap:wrap;justify-content:flex-end;max-width:none}
 #utah-jack-guide .utah-jack-menu-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:370px;overflow:auto;padding:4px}
 #utah-jack-guide .utah-jack-menu-buttons button{text-align:left;font-size:13px}
 #utah-jack-guide .utah-jack-links{display:flex;flex-wrap:wrap;gap:10px}
 #utah-jack-guide .utah-jack-links .utah-jack-next{margin:14px 0}
 #utah-jack-guide #utah-jack-back{margin-left:8px}
 /* Compact top ledge keeps the section below visible, matching Atlas. */
 #utah-jack-guide.utah-jack-docked{position:fixed;inset:0 0 auto;width:100%;height:230px;max-height:none;z-index:70;background:#132526f5;border-radius:0;border-bottom:9px solid #bda37e;overflow:hidden;box-shadow:0 3px 18px #0005;backdrop-filter:blur(12px)}
 #utah-jack-guide.utah-jack-docked .utah-jack-character{width:420px;right:20px;bottom:44px;max-height:calc(100% - 44px);object-fit:contain;object-position:right bottom}
 #utah-jack-guide.utah-jack-docked .utah-jack-controls{inset:auto 0 0;gap:6px;justify-content:flex-start}
 #utah-jack-guide.utah-jack-docked .utah-jack-controls button{font-size:12px;padding:7px 11px;min-height:34px}
 #utah-jack-guide.utah-jack-docked .utah-jack-invite{top:12px;bottom:55px;left:24px;width:calc(100% - 475px);max-width:none;overflow:auto;overscroll-behavior:contain;padding-right:6px}
 #utah-jack-guide.utah-jack-docked .utah-jack-caption{font-size:14px;line-height:1.35;min-height:0;margin:4px 0;max-width:none}
 #utah-jack-guide.utah-jack-docked h2{font-size:23px;margin:8px 0 5px}
 #utah-jack-guide.utah-jack-docked .utah-jack-next{font-size:13px;padding:9px;margin:8px 0}
 #utah-jack-guide.utah-jack-docked #utah-jack-answer>p:empty{display:none}
 #utah-jack-guide.utah-jack-docked .utah-jack-links{display:inline-flex;vertical-align:middle;margin-right:8px}
 #utah-jack-guide.utah-jack-docked #utah-jack-back{font-size:12px;padding:8px;margin:0}
 #utah-jack-guide.utah-jack-docked .utah-jack-menu-buttons{max-height:none;grid-template-columns:1fr 1fr}
 .utah-jack-tour-active [id]{scroll-margin-top:250px}
 nav a.utah-jack-highlight{outline:3px solid #ffd981;outline-offset:5px;box-shadow:0 0 20px #ffd981aa}
 @media(max-width:1000px){#utah-jack-guide.utah-jack-docked{height:280px}#utah-jack-guide.utah-jack-docked .utah-jack-character{width:350px;right:0}#utah-jack-guide.utah-jack-docked .utah-jack-invite{width:calc(100% - 365px)}.utah-jack-tour-active [id]{scroll-margin-top:300px}}
}

/* The phone guide occupies the top third; the page scrolls beneath it. */
@media(max-width:767px){
 :root{--utah-jack-phone-height:max(260px,33.333svh)}
 #utah-jack-guide::after{bottom:108px;height:20px}
 body.utah-jack-preview-active{padding-top:var(--utah-jack-phone-height)}
 body.utah-jack-preview-active [id]{scroll-margin-top:calc(var(--utah-jack-phone-height) + 16px)}
 .utah-jack-preview-active header{position:relative;top:auto}
 .utah-jack-preview-active .hero{height:0;min-height:0;padding:0;border:0;overflow:visible;isolation:auto}
 .utah-jack-preview-active .jack-unused-grid{display:none}
 #utah-jack-guide,#utah-jack-guide.utah-jack-docked{position:fixed;inset:0 0 auto;width:100%;height:var(--utah-jack-phone-height);box-sizing:border-box;border:0;border-radius:0;z-index:100;overflow:hidden;background:linear-gradient(90deg,#132526f5 5%,#13252699 60%,#13252620),url('/public/images/hero-home-little-sahara-v1.webp') 65% center/cover;box-shadow:0 3px 12px #0005;backdrop-filter:none}
 #utah-jack-guide .utah-jack-character,#utah-jack-guide.utah-jack-docked .utah-jack-character{width:auto;max-width:85vw;right:0;bottom:109px;height:calc(100% - 109px);object-fit:contain;object-position:right bottom}
 #utah-jack-guide .utah-jack-controls,#utah-jack-guide.utah-jack-docked .utah-jack-controls{inset:auto 0 55px;max-width:none;display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:4px;padding:5px 8px;min-height:53px;box-sizing:border-box;background:#132526f5;z-index:4}
 #utah-jack-guide .utah-jack-controls button,#utah-jack-guide.utah-jack-docked .utah-jack-controls button{font-size:11px;padding:6px 8px;min-height:44px;white-space:nowrap}
 #utah-jack-guide .utah-jack-invite,#utah-jack-guide.utah-jack-docked .utah-jack-invite{position:static;display:contents;width:auto;max-width:none;padding:0;overflow:visible}
 #utah-jack-guide h2,#utah-jack-guide.utah-jack-docked h2{position:absolute;left:14px;top:8px;width:46%;font-size:17px;line-height:1.1;margin:0;color:#f6eddc;z-index:3}
 #utah-jack-guide .utah-jack-caption,#utah-jack-guide.utah-jack-docked .utah-jack-caption{position:absolute;left:14px;top:54px;bottom:125px;width:46%;min-height:0;font:13px/1.35 Arial,sans-serif;margin:0;overflow:auto;scrollbar-width:none;pointer-events:auto;z-index:3}
 #utah-jack-guide .utah-jack-choice-buttons,#utah-jack-guide #utah-jack-answer{position:absolute;inset:auto 0 0;height:55px;padding:5px 8px;box-sizing:border-box;display:flex;align-items:center;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;background:#132526;z-index:5;pointer-events:auto}
 #utah-jack-guide .utah-jack-choice-buttons{flex-direction:row}
 #utah-jack-guide .utah-jack-choice-buttons button{flex:1;min-width:0;min-height:44px;padding:6px 5px;font-size:12px;text-align:center;white-space:normal}
 #utah-jack-guide #utah-jack-answer{overflow:visible}
 #utah-jack-guide #utah-jack-answer h2{top:calc(8px - var(--utah-jack-phone-height) + 55px);white-space:normal}
 #utah-jack-guide #utah-jack-answer>p{display:none}
 #utah-jack-guide .utah-jack-links,#utah-jack-guide.utah-jack-docked .utah-jack-links{display:flex;flex-wrap:nowrap;gap:5px;margin:0;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
 #utah-jack-guide .utah-jack-links .utah-jack-next,#utah-jack-guide.utah-jack-docked .utah-jack-next{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;font-size:12px;line-height:1.2;margin:0;padding:8px}
 #utah-jack-guide #utah-jack-explore,#utah-jack-guide #utah-jack-back{min-height:44px;padding:7px;font-size:11px;margin:0;white-space:normal;flex-shrink:0;max-width:85px}
 #utah-jack-guide[data-panel=menu] .utah-jack-caption,#utah-jack-guide #utah-jack-scene-menu h2{display:none}
 #utah-jack-guide .utah-jack-menu-buttons,#utah-jack-guide.utah-jack-docked .utah-jack-menu-buttons{position:absolute;inset:8px 8px 110px;max-height:none;overflow:auto;grid-template-columns:1fr 1fr;gap:6px;background:#132526f2;z-index:5;pointer-events:auto}
 #utah-jack-guide .utah-jack-menu-buttons button{min-height:44px;font-size:12px}
 [data-utah-jack-reopen]:not([hidden]){min-height:44px;z-index:101}
}
@media(max-width:767px) and (max-height:650px){
 #utah-jack-guide h2,#utah-jack-guide.utah-jack-docked h2{font-size:15px;top:8px}
 #utah-jack-guide #utah-jack-answer h2{top:calc(8px - var(--utah-jack-phone-height) + 55px)}
 #utah-jack-guide .utah-jack-caption,#utah-jack-guide.utah-jack-docked .utah-jack-caption{top:46px;bottom:118px;font-size:12px}
 #utah-jack-guide .utah-jack-character,#utah-jack-guide.utah-jack-docked .utah-jack-character{max-width:80vw;right:0}
}

/* Hands-free tour controls remain separate from the character and page links. */
#utah-jack-guide .utah-jack-auto-controls{display:flex;align-items:center;gap:6px;color:#f6eddc;font:600 12px/1.2 'DM Sans',Arial,sans-serif}
#utah-jack-guide.utah-jack-auto-tour #utah-jack-replay,#utah-jack-guide.utah-jack-auto-tour #utah-jack-pause,#utah-jack-guide.utah-jack-auto-tour #utah-jack-menu,#utah-jack-guide.utah-jack-auto-tour #utah-jack-back{display:none!important}
#utah-jack-guide .utah-jack-auto-controls [role=status]{min-width:36px;text-align:center}
#utah-jack-guide .utah-jack-links button{margin:8px 0}
@media(max-width:767px){
 #utah-jack-guide.utah-jack-auto-tour .utah-jack-controls{justify-content:center;gap:3px;padding:5px 4px}
 #utah-jack-guide.utah-jack-auto-tour .utah-jack-controls button{font-size:10px;padding:5px;min-height:44px}
 #utah-jack-guide .utah-jack-auto-controls{gap:3px;font-size:10px}
 #utah-jack-guide .utah-jack-auto-controls [role=status]{min-width:30px}
 #utah-jack-guide .utah-jack-links button{flex-shrink:0;font-size:12px;min-height:44px;margin:0;padding:6px 8px}
}

/* Utah retains its existing hero weather strip below the matching guide stage. */
@media(min-width:768px){
 .utah-jack-preview-active .hero{min-height:900px;padding:84px 0 230px;max-height:none}
 .utah-jack-preview-active .hero-copy{width:90%;max-width:1320px;padding:0 52% 0 0}
 .utah-jack-preview-active .hero h1{font-size:clamp(58px,6vw,86px)}
 #utah-jack-guide:not(.utah-jack-docked){inset:84px 0 240px;height:auto}
 #utah-jack-guide:not(.utah-jack-docked) .utah-jack-character{width:auto;height:calc(100% - 54px);max-width:48vw;object-fit:contain;object-position:right bottom;bottom:54px;right:3%}
 .utah-jack-preview-active .hero-copy{visibility:hidden;pointer-events:none}
 #utah-jack-guide:not(.utah-jack-docked) .utah-jack-invite{top:55px;bottom:auto;left:5%;width:43%}
 #utah-jack-guide:not(.utah-jack-docked) .utah-jack-caption{font-size:clamp(20px,2vw,28px);line-height:1.4;max-width:520px}
 .utah-jack-choosing .utah-jack-invite{top:55px;left:5%}
 .utah-jack-preview-active .hero-stamp{display:none}
}
@media(max-width:767px){
 .utah-jack-preview-active .hero{height:auto;min-height:100svh;padding-top:20px;overflow:hidden;isolation:isolate}
 .utah-jack-preview-active .hero-copy{visibility:visible;pointer-events:auto}
 .utah-jack-preview-active .hero-copy{width:90%;max-width:1320px;padding:20px 0 40px}
 .utah-jack-preview-active .hero h1{font-size:clamp(84px,28vw,110px)}
 .utah-jack-preview-active .hero .lede{font-size:18px;max-width:550px}
 .utah-jack-preview-active header{position:relative;top:auto}
 #utah-jack-guide .utah-jack-character{max-width:50vw}
}
