/* Mobile-native presentation. Desktop rules remain authoritative above 700px. */
@media (max-width:700px){
  :root{
    --mobile-inline:clamp(20px,6vw,28px);
    --mobile-top:calc(env(safe-area-inset-top,0px) + 18px);
    --mobile-bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
    --mobile-vh:1dvh;
  }

  html,body{width:100%;height:100%;overscroll-behavior:none}
  body{min-height:100dvh;background:#0d1525}
  .experience{height:calc(var(--mobile-vh) * 100);min-height:100svh;max-height:100dvh}
  .scene{contain:layout paint size}
  /* Rev 208-fix: use dvh so .experience always matches the actual visible
     viewport on mobile, including when the browser chrome is visible.
     100svh = small viewport (chrome hidden) — too short when chrome shows.
     100dvh = dynamic viewport = always the current visible height. */
  .experience{
    height:100dvh!important;
    min-height:100dvh!important;
  }
  body,html{
    height:100dvh!important;
    overflow:hidden!important;
  }
  .panel{padding:calc(var(--mobile-top) + 46px) var(--mobile-inline) calc(var(--mobile-bottom) + 52px);place-items:stretch;align-content:stretch}
  /* Never composite an old mobile screen underneath the active one. */
  .panel:not(.active){opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}
  .topbar{top:0;padding:var(--mobile-top) var(--mobile-inline) 0;align-items:center}
  .brand{font-size:9px;letter-spacing:.22em}
  .step-indicator{font-size:9px;letter-spacing:.18em}
  footer{display:none}

  /* Mobile panel isolation: only the active screen may remain in rendering.
     This prevents previous prompts from ghosting beneath Let In, Holding, or Result. */
  .panel:not(.active){
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:none!important;
    animation:none!important;
  }
  .panel.active{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .panel[data-step="0"].active,.letgo-panel.active,.letin-panel.active,.holding-panel.active,.result-panel.active{display:flex!important}

  /* One intentional portrait crop per state. */
  .art-main{
    inset:-2%;
    background-size:auto 106%;
    background-position:50% 50%;
    transform:scale(1.025);
    animation:mobileOpeningDrift 24s ease-in-out infinite alternate;
    transition:opacity 1s var(--ease),transform 1.7s var(--ease),filter 1.2s var(--ease),background-position 1.7s var(--ease);
  }
  .phase-opening .art-main{background-size:auto 103%;background-position:50% 48%;filter:brightness(.72) saturate(1.02)}
  .phase-letgo .art-main{background-size:auto 116%;background-position:50% 56%;transform:scale(1.045);filter:brightness(.66) saturate(1.05);animation:mobileLetGoDrift 28s ease-in-out infinite alternate}
  .phase-letin .art-main{background-size:auto 112%;background-position:50% 42%;transform:scale(1.035);filter:brightness(.58) saturate(1.08);animation:mobileLetInDrift 28s ease-in-out infinite alternate}
  .phase-holding .art-main{background-size:auto 106%;background-position:50% 49%;transform:scale(1.02);filter:brightness(.62) saturate(1.04)}
  .phase-result .art-main{background-size:auto 101%;background-position:50% 50%;transform:scale(1);filter:brightness(.68) saturate(1.02)}

  /* Mobile uses one flattened artwork surface per state. This removes every
     visible rectangular seam caused by separately cropped translucent layers. */
  .phase-opening .art-main{background-image:url("images/mobile-art-opening.webp");background-size:cover;background-position:center;filter:brightness(1.08) saturate(1.02)}
  .phase-letgo .art-main{background-image:url("images/mobile-art-letgo.webp");background-size:cover;background-position:center;filter:none}
  .phase-letin .art-main{background-image:url("images/mobile-art-letin.webp");background-size:cover;background-position:center;filter:none}
  .phase-holding .art-main{background-image:url("images/mobile-art-holding.webp");background-size:cover;background-position:center;filter:none}
  .phase-result .art-main{background-image:url("images/mobile-art-result.webp");background-size:cover;background-position:center;filter:none}

  /* Let In artwork is never exposed until its decoded image has survived two
     stable paint frames. This guard applies to release, debug, and fallback paths. */
  .experience.phase-letin:not(.mobile-letin-art-ready) .art-main{opacity:0!important;transition:none!important}
  .experience.phase-letin.mobile-letin-art-ready .art-main{opacity:1!important}
  .art-sky-detail,.art-writing-wash,.art-writing-detail,.art-water-detail{display:none!important;opacity:0!important;visibility:hidden!important}

  .art-sky-detail{inset:-8%;background-size:auto 112%;background-position:50% 20%;opacity:.12;filter:none;animation:mobileSkyDrift 22s ease-in-out infinite alternate}
  .art-writing-wash,.art-writing-detail{inset:-10%;background-size:auto 100%;background-position:50% 52%;filter:none}
  .art-writing-wash{opacity:.045}
  .art-writing-detail{opacity:.11}
  .art-water-detail{inset:-5%;background-size:auto 72%;background-position:50% 100%;opacity:.12;filter:none}
  .moving-light{filter:blur(16px);opacity:.5}
  .horizon-glow{top:36%;height:24%;filter:blur(18px);opacity:.75}
  .water-sheen{top:55%;opacity:.14}
  .geo-marks,.ink-edge{opacity:.35}
  .top-star-mask{top:7%;width:38vw;height:24vw;filter:blur(7px)}

  /* Opening: invitation, not landing page. */
  .panel[data-step="0"]{display:flex;flex-direction:column;justify-content:flex-end}
  .opening-copy-block{width:100%;margin:0 0 clamp(46px,6.5dvh,68px);transform:none;align-self:auto;justify-self:auto}
  .opening-copy-block .kicker{margin-bottom:12px}
  .opening-headline{
    width:min(88vw,360px);max-width:360px;margin:0 0 24px;white-space:normal;
    font-size:clamp(43px,12.2vw,58px);line-height:.91;letter-spacing:-.045em;
    text-wrap:balance;text-shadow:0 5px 28px rgba(0,0,0,.55)
  }
  .opening-copy-block .text-action{min-height:48px;padding:12px 0 9px;align-self:flex-start}
  .preview-caption{left:var(--mobile-inline);right:auto;bottom:var(--mobile-bottom);width:calc(100vw - (var(--mobile-inline) * 2));max-width:none;font-size:8px;line-height:1.35;letter-spacing:.08em;white-space:nowrap;flex-wrap:nowrap;gap:10px}
.preview-caption span{flex:0 0 28px}

  /* Dedicated one-column ritual layout. */
  .letgo-panel,.letin-panel{display:flex;align-items:stretch;justify-content:stretch}
  .prompt,.prompt-right{
    width:100%;height:100%;margin:0;display:flex;flex-direction:column;align-items:stretch;
    justify-content:flex-start;text-align:left;transform:none
  }
  .letgo-prompt,.letin-prompt{padding-top:clamp(68px,10dvh,102px)}
  .prompt .kicker{margin-bottom:13px}
  .prompt h2{
    max-width:340px;font-size:clamp(42px,11.6vw,55px);line-height:.93;letter-spacing:-.04em;
    text-shadow:0 4px 26px rgba(0,0,0,.5)
  }
  .letgo-input-wrap,.letin-input-wrap{width:100%;margin-top:clamp(28px,5dvh,46px)}
  .prompt textarea,.prompt-right textarea{
    display:block;width:100%;min-height:62px;max-height:110px;margin:0;padding:5px 0 10px;
    border:0;border-bottom:1px solid rgba(255,248,224,.5);border-radius:0;background:transparent;
    color:#fff8e0;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(28px,8vw,38px);
    font-style:italic;line-height:1.04;text-align:left;resize:none;overflow:hidden;outline:none;
    box-shadow:none;text-shadow:0 3px 18px rgba(0,0,0,.42);caret-color:#fff0a8
  }
  .prompt textarea::placeholder{color:rgba(255,248,224,.48);opacity:1}
  .prompt textarea:focus::placeholder{color:transparent}
  .prompt textarea:focus{border-bottom-color:rgba(255,240,168,.9)}
  .prompt-actions,.prompt-right .prompt-actions{
    margin-top:auto;padding-top:28px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:end
  }
  .prompt-actions .quiet{min-width:44px;min-height:44px;padding:10px 0;text-align:left;align-self:end}
  .prompt-actions .text-action{min-height:48px;padding:12px 0 9px;justify-self:end;text-align:right;max-width:240px;line-height:1.35}
  .zone-sky{top:auto;right:var(--mobile-inline);bottom:calc(var(--mobile-bottom) + 58px);font-size:8px;opacity:.55}

  /* Keyboard-aware composition: artwork stays anchored, controls remain reachable. */
  .experience.keyboard-open .panel{padding-top:calc(var(--mobile-top) + 28px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  .experience.keyboard-open .topbar{opacity:0;pointer-events:none}
  .experience.keyboard-open .letgo-prompt,.experience.keyboard-open .letin-prompt{padding-top:18px}
  .experience.keyboard-open .prompt h2{font-size:clamp(34px,9vw,43px);max-width:290px}
  .experience.keyboard-open .prompt .kicker{margin-bottom:8px}
  .experience.keyboard-open .letgo-input-wrap,.experience.keyboard-open .letin-input-wrap{margin-top:18px}
  .experience.keyboard-open .prompt textarea{font-size:clamp(25px,7vw,32px);min-height:52px}
  .experience.keyboard-open .prompt-actions{padding-top:14px}
  .experience.keyboard-open .art-main{transform:translateZ(0) scale(1.035)!important;background-position:center!important}

  /* Mobile release handoff: a single crop-matched crossfade. */
  .release-video,.release-video-bridge,.release-video-end-bridge,
  .invite-video,.invite-video-start-bridge,.invite-video-end-bridge{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 50%!important;
    background-position:50% 50%!important;
    background-size:cover!important;
    max-width:none!important;
    max-height:none!important;
  }
  .release-video-bridge{background-image:url("images/letting-go-rev204-start-mobile.jpg?v=204")}
  .release-video-end-bridge{background-image:url("images/letting-go-rev204-end-mobile.jpg?v=204")}
  .invite-video-start-bridge{background-image:url("images/invite-video-start-mobile.jpg")}
  .invite-video-end-bridge{background-image:url("images/invite-video-end-mobile.jpg?v=222")}
  .experience.release-transition .art-main{
    background-size:cover!important;background-position:center!important;
    transform:scale(1)!important;filter:brightness(.72) saturate(1.01)!important;
    transition:transform 1.25s var(--ease),background-position 1.25s var(--ease),filter 1.1s ease,opacity .9s ease!important
  }
  .experience.release-transition .letgo-prompt{transform:translateY(6px)!important;transition:opacity .42s ease,transform .52s var(--ease)!important}
  .experience.release-transition .release-wide-art{background-size:auto 103%;background-position:50% 49%}
  .experience.release-video-playing .release-video-bridge{transition:opacity .9s ease,visibility 0s linear .9s}
  .experience.release-end-dissolve .release-video-end-bridge{transition:opacity 1.35s ease,visibility 0s linear 1.35s}

  /* Reinforce a single active panel during the mobile release return so the
     previous Let Go prompt cannot bleed into the Let In composition. */
  .experience.release-handoff.strict-panel-isolation .panel:not(.active){display:none!important}
  .experience.release-handoff.strict-panel-isolation .letin-panel.active{display:flex!important;opacity:1!important;visibility:visible!important;transform:none!important}
  .experience.release-handoff.strict-panel-isolation .letgo-panel,.experience.release-handoff.strict-panel-isolation [data-step="0"],.experience.release-handoff.strict-panel-isolation .holding-panel,.experience.release-handoff.strict-panel-isolation .result-panel{display:none!important}

  .experience.mobile-release-isolation .panel[data-mobile-hidden]{display:none!important;opacity:0!important;visibility:hidden!important;transition:none!important}
  .experience.mobile-release-isolation .panel.active{opacity:1!important;visibility:visible!important;transform:none!important}

  /* Clean up the Let In still on mobile so the post-release scene is not muddy or doubled. */
  .phase-letin .art-sky-detail{opacity:.1}
  .phase-letin .art-writing-wash{opacity:.028}
  .phase-letin .art-writing-detail{opacity:.065}
  .phase-letin .art-water-detail{opacity:.07}
  .phase-letin .geo-marks,.phase-letin .ink-edge{opacity:.22}

  .experience.mobile-release-return .release-video-bridge{display:none!important;opacity:0!important;visibility:hidden!important}
  .experience.mobile-release-return .release-video{opacity:0!important;visibility:hidden!important;transition:none!important}

  /* Rev 259: the final-frame bridge is a direct child of .experience rather
     than a child of the negative-z-index .scene. It therefore covers both the
     artwork and every panel element while Let In is assembled underneath. */
  .release-video-end-bridge{
    position:fixed!important;inset:0!important;z-index:90!important;pointer-events:none!important;
    contain:strict!important;transform:translateZ(0)!important;
    backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;
  }
  .experience.mobile-release-return .release-video-end-bridge{
    display:block!important;opacity:1!important;visibility:visible!important;
    background:#c87a42 url("images/letting-go-rev204-end-mobile.jpg?v=204") center/cover no-repeat!important;
    transition:none!important;
  }
  .experience.mobile-release-return.mobile-release-bridge-swap .release-video-end-bridge{
    opacity:0!important;visibility:hidden!important;
    transition:opacity .86s cubic-bezier(.4,0,.2,1),visibility 0s linear .86s!important;
  }

  /* The complete panel is one guarded surface. Its children never run separate
     opacity or transform transitions during the release handoff. */
  .experience.mobile-release-return .letin-panel{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:none!important;transition:none!important;contain:layout paint!important;isolation:isolate!important;
  }
  .experience.mobile-release-return.release-ui-reveal .letin-panel{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transition:opacity .34s ease!important;
  }
  .experience.mobile-release-return .letin-prompt,
  .experience.mobile-release-return .letin-input-wrap,
  .experience.mobile-release-return .letin-input-wrap textarea,
  .experience.mobile-release-return .letin-panel .prompt-actions,
  .experience.mobile-release-return .zone-sky{
    opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important;
  }

  /* Whispers stay outside the compositor until the full panel has settled. */
  .experience.phase-letin:not(.letin-whispers-ready) .letin-whispers{
    opacity:0!important;visibility:hidden!important;transition:none!important;
  }
  .experience.phase-letin.letin-whispers-ready .letin-whispers{
    opacity:1!important;visibility:visible!important;transition:opacity .45s ease!important;
  }

  /* Keep one fixed artwork surface during assembly. Decorative drift starts
     only on direct/debug arrivals after readiness; release-return remains still. */
  .experience.phase-letin:not(.release-ui-settled) .art-main{
    animation:none!important;transition:none!important;transform:translateZ(0) scale(1.035)!important;
  }
  .experience.phase-letin.release-ui-settled:not(.mobile-release-return) .art-main{
    animation:mobileLetInDrift 28s ease-in-out infinite alternate!important;
  }
  .experience.mobile-release-return .art-main{
    transform:translateZ(0) scale(1.035)!important;animation:none!important;transition:none!important;
  }
  .experience.mobile-release-return .art-sky-detail,
  .experience.mobile-release-return .art-writing-wash,
  .experience.mobile-release-return .art-writing-detail,
  .experience.mobile-release-return .art-water-detail,
  .experience.mobile-release-return .scene-overlay{transition:none!important;animation-play-state:paused!important}

  /* Deferred Invite media stays absent during Let In's first stable paint. */
  .experience.phase-letin:not(.invite-transition) .invite-video,
  .experience.phase-letin:not(.invite-transition) .invite-video-start-bridge,
  .experience.phase-letin:not(.invite-transition) .invite-video-end-bridge{
    display:none!important;opacity:0!important;visibility:hidden!important;
  }
  /* Raise the Let In action into a more comfortable one-handed thumb zone. */
  .letin-panel .prompt-actions{margin-bottom:clamp(92px,11dvh,116px)}
  .letin-panel .zone-sky{bottom:calc(var(--mobile-bottom) + 58px + clamp(92px,11dvh,116px))}
  .experience.keyboard-open .letin-prompt{position:relative}
  .experience.keyboard-open .letin-panel .prompt-actions{
    position:absolute;left:0;right:0;bottom:6px;margin:0;padding-top:0;
    grid-template-columns:auto 1fr;z-index:8;
  }
  .experience.keyboard-open .letin-panel .prompt-actions .text-action{max-width:225px}
  .experience.keyboard-open .letin-panel .zone-sky{display:none}

  /* Mobile invite return: one actual-frame fade into Holding. */
  .experience.mobile-invite-return .invite-video-start-bridge,
  .experience.mobile-invite-return .invite-video-end-bridge{display:none!important;opacity:0!important;visibility:hidden!important}
  .experience.mobile-invite-return .invite-video{opacity:1!important;visibility:visible!important;transition:opacity 1.2s cubic-bezier(.22,.61,.36,1)!important;z-index:14}
  .experience.mobile-invite-return.mobile-invite-video-fade .invite-video{opacity:0!important}
  .experience.mobile-invite-return .holding-panel .holding-copy,
  .experience.mobile-invite-return .holding-panel .ritual-stage{opacity:0!important;visibility:visible!important;transform:translateY(8px)!important;transition:opacity .58s ease,transform .58s ease!important}
  .experience.mobile-invite-return.invite-holding-reveal .holding-panel .holding-copy,
  .experience.mobile-invite-return.invite-holding-reveal .holding-panel .ritual-stage{opacity:1!important;transform:none!important}

  /* Keep Holding visually clean: avoid the duplicate figure and muddy layered image. */
  .phase-holding .art-sky-detail{opacity:.08;transform:none}
  .phase-holding .art-writing-wash{opacity:.024}
  .phase-holding .art-writing-detail{opacity:.052;transform:none}
  .phase-holding .art-water-detail{opacity:.075;transform:none}
  .phase-holding .geo-marks,.phase-holding .ink-edge{opacity:.18}

  /* Holding and result remain part of the painting, not cards floating above it. */
  .holding-panel{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
  .holding-copy{margin:clamp(104px,15dvh,148px) 0 0;width:100%;padding-inline:6px}
  .holding-copy h2{font-size:clamp(44px,12vw,58px);line-height:.92}
  .ritual-stage{inset:0}
  .ritual{font-size:clamp(28px,8vw,38px);max-width:78vw}

  .result-panel{display:flex;align-items:flex-end;padding-top:calc(var(--mobile-top) + 34px);padding-bottom:calc(var(--mobile-bottom) + 18px)}
  .result-shell{display:flex;flex-direction:column;width:100%;margin:0;gap:16px}
  .result-card{order:2;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .result-card::before{display:none}
  .result-message h2{font-size:clamp(38px,10.5vw,50px);margin-bottom:10px;line-height:.94}
  .result-message>p:not(.kicker){max-width:34ch;font-size:13px;line-height:1.5}
  .result-message .email-note{margin-top:8px;font-size:9px!important}
  .result-actions{margin-top:8px}
  .result-reflections{order:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
  .reflection-card{padding:12px 0 14px;border:0;border-bottom:1px solid rgba(255,248,224,.28);border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .reflection-card::before,.reflection-connector{display:none}
  .reflection-label{margin-bottom:6px;font-size:8px}
  .result-panel .final{font-size:clamp(25px,7vw,32px);line-height:1}

  @keyframes mobileOpeningDrift{from{transform:scale(1.025) translate3d(-.4%,0,0)}to{transform:scale(1.045) translate3d(.5%,-.6%,0)}}
  @keyframes mobileLetGoDrift{from{transform:scale(1.045) translate3d(0,.4%,0)}to{transform:scale(1.065) translate3d(-.5%,-.4%,0)}}
  @keyframes mobileLetInDrift{from{transform:scale(1.035) translate3d(.3%,.2%,0)}to{transform:scale(1.055) translate3d(-.4%,-.7%,0)}}
  @keyframes mobileSkyDrift{from{transform:scale(1.04) translate3d(-.3%,0,0)}to{transform:scale(1.055) translate3d(.4%,-.5%,0)}}
}

@media (max-width:700px) and (max-height:740px){
  .opening-copy-block{margin-bottom:42px}
  .opening-headline{font-size:clamp(39px,11vw,49px)}
  .letgo-prompt,.letin-prompt{padding-top:48px}
  .prompt h2{font-size:clamp(38px,10vw,47px)}
  .letgo-input-wrap,.letin-input-wrap{margin-top:22px}
  .holding-copy{margin-top:82px}
  .result-panel{padding-top:24px}
  .result-shell{gap:10px}
  .result-message h2{font-size:36px}
  .result-message>p:not(.kicker){font-size:12px;line-height:1.42}
  .result-panel .final{font-size:24px}
}

@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .art-main,.art-sky-detail{animation:none!important}
  .art,.panel,.topbar,.release-video,.invite-video,.release-video-bridge,.release-video-end-bridge,.invite-video-start-bridge,.invite-video-end-bridge{transition-duration:.01ms!important}
}

/* Rev 115 — keep Let In actions visually connected to the response field.
   Mobile only. Do not pin the action row to the bottom of the viewport. */
@media (max-width:700px){
  .letin-panel .prompt-actions{
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-top:clamp(28px,4dvh,38px)!important;
    margin-bottom:0!important;
    padding-top:0!important;
  }
  .letin-panel .zone-sky{
    bottom:auto!important;
    top:auto!important;
    position:static!important;
    margin-top:2px;
    margin-left:auto;
    align-self:flex-end;
  }
  .experience.keyboard-open .letin-panel .prompt-actions{
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-top:18px!important;
    margin-bottom:0!important;
    padding-top:0!important;
  }
  .experience.keyboard-open .letin-panel .zone-sky{display:none!important}
}
@media (max-width:700px){
  .letin-panel .zone-sky{display:none!important}
}


@media (max-width:700px){
  .flow-shell{width:100%;max-height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:auto;scrollbar-width:none}
  .share-panel,.email-panel,.completion-panel{display:flex;align-items:stretch;padding-top:calc(var(--mobile-top) + 38px);padding-bottom:calc(var(--mobile-bottom) + 22px)}
  .flow-shell h2{font-size:clamp(38px,10.5vw,50px);line-height:.94;margin-bottom:14px}
  .flow-intro{font-size:13px;line-height:1.55;margin-bottom:18px}
  .share-choices{grid-template-columns:1fr;gap:10px;margin:8px 0 10px}
  .phrase-choice{min-height:0;padding:14px 14px 13px;border-radius:16px}
  .choice-phrase{padding:10px 0 12px;font-size:clamp(24px,7vw,32px);line-height:1.02}
  .choice-control,.news-choice{font-size:11px;line-height:1.4}
  .privacy-note{font-size:9px;line-height:1.45;margin-top:10px}
  .flow-actions{margin-top:16px;gap:16px;align-items:flex-end}
  .flow-actions .quiet{font-size:10px;max-width:120px;text-align:left}
  .flow-actions .text-action{font-size:12px;max-width:205px;text-align:right}
  .email-shell{width:100%;display:flex;flex-direction:column}
  .email-field{margin-top:18px}
  .email-field input{font-size:clamp(26px,7.5vw,34px)}
  .email-shell .flow-actions{margin-top:auto;padding-top:18px}
  .experience.keyboard-open .email-panel{padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  .experience.keyboard-open .email-shell h2{font-size:34px}
  .experience.keyboard-open .email-shell .flow-intro{display:none}
  .experience.keyboard-open .email-field{margin-top:10px}
  .experience.keyboard-open .news-choice,.experience.keyboard-open .privacy-note{display:none}
  .completion-panel{align-items:flex-end}
  .completion-shell{display:flex;flex-direction:column;width:100%;margin:0;gap:18px}
  .completion-copy{order:2;width:100%}
  .completion-copy h2{font-size:clamp(43px,12vw,56px);line-height:.9;margin-bottom:14px}
  .completion-status{gap:5px;font-size:11px;line-height:1.45}
  .completion-actions{gap:13px;margin-top:16px}
  .artist-link{font-size:11px}
  .completion-words{order:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
  .completion-word{padding:10px 0 12px}
  .completion-word em{font-size:clamp(24px,7vw,32px)}
  .artist-panel{place-items:end stretch}
  .artist-panel-inner{
    width:100%;
    height:min(88dvh,760px);
    padding:58px var(--mobile-inline) calc(var(--mobile-bottom) + 28px);
    transform:translate3d(0,100%,0);
    border-radius:26px 26px 0 0;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transition:transform .38s cubic-bezier(.22,.61,.36,1)!important;
  }
  .artist-panel.open .artist-panel-inner{transform:translate3d(0,0,0)}
  .artist-panel h2{font-size:clamp(42px,11vw,54px);margin-bottom:20px}
  .artist-portrait{margin-bottom:18px}
  .artist-names{font-size:30px}
  .artist-statement{font-size:13px;line-height:1.6}
  .phase-share .art-main{background-image:url("images/mobile-art-result.webp");background-size:cover;background-position:center}
  .phase-email .art-main{background-image:url("images/mobile-art-result.webp");background-size:cover;background-position:center}
}
@media (max-width:700px) and (max-height:740px){
  .share-panel,.email-panel{padding-top:calc(var(--mobile-top) + 18px);padding-bottom:calc(var(--mobile-bottom) + 12px)}
  .flow-shell h2{font-size:36px}
  .flow-intro{font-size:12px;margin-bottom:10px}
  .phrase-choice{padding:10px 12px}
  .choice-phrase{padding:7px 0 8px;font-size:24px}
  .privacy-note{margin-top:7px}
  .flow-actions{margin-top:10px}
}


@media (max-width:700px){
  .holding-copy{margin-top:clamp(76px,10dvh,104px)}
  .holding-copy .kicker{font-size:9px;line-height:1.4;max-width:270px;margin-inline:auto;margin-bottom:10px}
  .holding-copy h2{font-size:clamp(40px,10.8vw,52px)}
  .holding-panel .ritual-go{top:68%;width:82vw;max-width:330px}
  .holding-panel .ritual-in{top:30%;width:82vw;max-width:330px}
}


/* Rev 119 mobile Holding pacing and legibility. */
@media (max-width:700px){
  .holding-panel .ritual{font-size:clamp(25px,7.2vw,34px);line-height:1.02;text-shadow:0 0 20px rgba(255,255,255,.2)}
  .holding-panel .ritual-in{top:31%}
  .holding-panel .ritual-go{top:69%}
  .holding-panel .holding-ripple{bottom:19%}
  .holding-panel .holding-star-response{top:13%}
}


/* Rev 121 — mobile Holding composition refinements. */
@media(max-width:700px){
  .holding-panel .ritual{
    font-size:clamp(29px,8.4vw,40px);
    line-height:.98;
    width:74vw;
    max-width:312px;
    letter-spacing:-.018em;
    position:absolute;
    isolation:isolate;
  }
  .holding-panel .ritual::before,
  .holding-panel .ritual::after{
    content:"";
    position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  }
  .holding-panel .ritual-in{
    top:35.5%!important;
    margin-left:8vw;
    color:rgba(255,246,225,.96);
    text-shadow:0 0 12px rgba(255,247,214,.3),0 0 28px rgba(255,221,150,.18),0 3px 22px rgba(12,10,8,.24);
  }
  .holding-panel .ritual-in::before{
    width:136%;height:190%;background:radial-gradient(ellipse at center,rgba(255,248,224,.18) 0,rgba(255,237,176,.1) 34%,transparent 76%);filter:blur(12px);opacity:.8;
  }
  .holding-panel .ritual-go{
    top:70.5%!important;
    margin-left:-1.2vw;
    color:rgba(245,238,222,.88);
    text-shadow:0 0 14px rgba(255,240,205,.12),0 0 28px rgba(86,139,196,.16),0 3px 20px rgba(8,16,34,.24);
  }
  .holding-panel .ritual-go::before{
    width:148%;height:170%;background:radial-gradient(ellipse at center,rgba(255,244,220,.1) 0,rgba(77,120,180,.11) 34%,transparent 76%);filter:blur(12px);opacity:.76;
  }
  .holding-copy .kicker{font-size:10px;letter-spacing:.2em;max-width:300px;margin-bottom:12px;color:rgba(255,248,224,.8)}
  .holding-copy h2{font-size:clamp(41px,11vw,56px);line-height:.94}
}


/* Rev 122 — mobile digital wall permission refinement. */
@media(max-width:700px){
  .phase-share .art-main,
  .phase-share .moving-light,
  .phase-share .horizon-glow,
  .phase-share .water-sheen,
  .phase-share .water-ripples,
  .phase-share .star-field,
  .phase-share #fx{animation-play-state:paused!important;transition:none!important}
  .share-panel .flow-shell{
    width:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    contain:layout paint;
  }
  .share-panel .flow-shell>.kicker{margin-bottom:10px}
  .share-panel .flow-shell h2{font-size:clamp(38px,10.3vw,49px);margin-bottom:14px}
  .share-title-desktop{display:none!important}
  .share-title-mobile{display:inline!important}
  .share-panel .flow-intro{font-size:13px;line-height:1.5;margin-bottom:18px}
  .share-panel .share-choices{grid-template-columns:1fr;gap:14px;margin:0}
  .share-panel .phrase-choice{
    padding:6px 0 14px;
    border:0;
    border-bottom:1px solid rgba(255,248,224,.2);
    border-radius:0;
    background:none;
  }
  .share-panel .choice-context{font-size:9px}
  .share-panel .choice-phrase{
    min-height:0;
    padding:10px 0 12px;
    font-size:clamp(30px,8.8vw,40px);
  }
  .share-panel .choice-control{font-size:11px;gap:10px}
  .share-panel .choice-box{width:19px;height:19px;flex-basis:19px}
  .share-panel .privacy-note{margin-top:16px;font-size:10px;line-height:1.5;color:rgba(235,238,247,.66)}
  .share-panel .flow-actions{align-items:stretch;gap:8px;margin-top:18px}
  .share-panel #shareButton{order:1;align-self:flex-end;font-size:12px;min-height:46px;white-space:normal;max-width:280px}
  .share-panel #privateButton{order:2;align-self:flex-end;font-size:10px;min-height:34px}
}

@media(max-width:700px) and (max-height:740px){
  .share-panel .flow-shell h2{font-size:clamp(34px,9.5vw,43px)}
  .share-panel .flow-intro{margin-bottom:12px}
  .share-panel .share-choices{gap:9px}
  .share-panel .choice-phrase{padding:7px 0 8px;font-size:clamp(27px,7.8vw,34px)}
  .share-panel .privacy-note{margin-top:10px;font-size:9px}
  .share-panel .flow-actions{margin-top:10px}
}


/* Rev 123 — dramatic mobile Holding composition. Desktop remains unchanged. */
@media(max-width:700px){
  .phase-holding .scene-overlay{
    background:
      radial-gradient(circle at 52% 18%,rgba(255,245,210,.08),transparent 24%),
      radial-gradient(ellipse at 50% 70%,rgba(30,72,138,.18),transparent 48%),
      linear-gradient(180deg,rgba(6,11,27,.08),rgba(6,11,27,.02) 42%,rgba(5,10,24,.38) 100%);
  }
  .holding-panel .holding-copy{
    margin-top:clamp(118px,14.5dvh,154px)!important;
    z-index:4;
  }
  .holding-copy .kicker{
    font-size:10px!important;
    letter-spacing:.21em!important;
    line-height:1.35!important;
    margin-bottom:13px!important;
    color:rgba(255,248,224,.84)!important;
    text-shadow:0 2px 18px rgba(0,0,0,.5);
  }
  .holding-copy h2{
    font-size:clamp(43px,11.8vw,58px)!important;
    line-height:.9!important;
    max-width:340px;
    margin-inline:auto;
    text-shadow:0 6px 30px rgba(0,0,0,.34),0 0 22px rgba(255,239,194,.1);
  }

  .holding-panel .ritual-stage::before{
    content:"";
    position:absolute;
    left:50%;
    top:18%;
    width:2px;
    height:60%;
    transform:translateX(-50%);
    background:linear-gradient(180deg,rgba(255,251,228,0),rgba(255,242,196,.28) 28%,rgba(255,235,174,.16) 56%,rgba(131,180,236,.06) 84%,transparent);
    filter:blur(1.2px);
    opacity:0;
  }
  .holding-panel .ritual-stage::after{
    content:"";
    position:absolute;
    left:50%;
    top:53%;
    width:54vw;
    height:42vw;
    max-width:230px;
    max-height:180px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(255,240,190,.13),rgba(255,217,142,.06) 38%,transparent 72%);
    filter:blur(18px);
    opacity:0;
  }
  .holding-panel.ritual-running .ritual-stage::before{
    animation:holdingBeam123 9.4s 1.8s ease-in-out both;
  }
  .holding-panel.ritual-running .ritual-stage::after{
    animation:holdingConvergence123 8.6s 2.5s ease-in-out both;
  }

  .holding-panel .ritual{
    width:82vw!important;
    max-width:330px!important;
    line-height:.94!important;
    letter-spacing:-.025em!important;
    z-index:3;
  }
  .holding-panel .ritual-short{font-size:clamp(46px,14vw,68px)!important}
  .holding-panel .ritual-medium{font-size:clamp(35px,10.5vw,48px)!important}
  .holding-panel .ritual-long{font-size:clamp(28px,8.2vw,38px)!important}

  /* Sky phrase: dedicated zone above the heading, never overlapping it. */
  .holding-panel .ritual-in{
    top:13.2%!important;
    left:50%!important;
    margin-left:7.4vw!important;
    color:rgba(255,250,234,.98)!important;
    text-shadow:
      0 0 10px rgba(255,255,255,.48),
      0 0 26px rgba(255,235,176,.52),
      0 0 64px rgba(255,205,112,.32),
      0 4px 24px rgba(30,18,8,.32)!important;
  }
  .holding-panel .ritual-in::before{
    width:162%!important;
    height:230%!important;
    background:radial-gradient(ellipse at center,rgba(255,252,232,.28) 0,rgba(255,234,170,.17) 30%,rgba(255,207,110,.08) 54%,transparent 78%)!important;
    filter:blur(13px)!important;
    opacity:1!important;
  }
  .holding-panel .ritual-in::after{
    width:196%!important;
    height:276%!important;
    background:
      radial-gradient(circle at 20% 45%,rgba(255,255,255,.5) 0 1.2px,transparent 1.8px),
      radial-gradient(circle at 76% 34%,rgba(255,244,210,.44) 0 1px,transparent 1.6px),
      radial-gradient(circle at 62% 76%,rgba(255,255,255,.32) 0 1px,transparent 1.5px),
      radial-gradient(ellipse at center,rgba(255,248,218,.12),transparent 68%)!important;
    filter:blur(.2px)!important;
    opacity:.82!important;
  }

  /* Water phrase: lower, larger, and submerged within the ripple field. */
  .holding-panel .ritual-go{
    top:74.2%!important;
    left:50%!important;
    margin-left:-1vw!important;
    color:rgba(246,241,228,.94)!important;
    text-shadow:
      0 0 12px rgba(255,241,207,.24),
      0 0 42px rgba(92,154,218,.36),
      0 8px 28px rgba(4,12,27,.4)!important;
  }
  .holding-panel .ritual-go::before{
    width:164%!important;
    height:190%!important;
    background:radial-gradient(ellipse at center,rgba(255,245,218,.15) 0,rgba(88,144,205,.16) 34%,rgba(30,76,140,.1) 56%,transparent 80%)!important;
    filter:blur(14px)!important;
    opacity:.95!important;
  }
  .holding-panel .ritual-go::after{
    width:152%!important;
    height:46%!important;
    top:67%!important;
    background:linear-gradient(180deg,rgba(255,248,224,.13),rgba(117,177,233,.05),transparent)!important;
    filter:blur(6px)!important;
    opacity:.72!important;
  }

  .holding-panel .holding-ripple{
    bottom:11.8%!important;
    width:50px!important;
    height:15px!important;
    border-color:rgba(255,239,168,.55)!important;
    box-shadow:
      0 0 0 1px rgba(255,240,178,.08),
      0 0 20px rgba(255,220,130,.22)!important;
  }
  .holding-panel .holding-star-response{
    top:6.9%!important;
    left:52%!important;
    width:15px!important;
    height:15px!important;
    background:#fffdf2!important;
    box-shadow:
      0 0 15px 6px rgba(255,252,230,.62),
      0 0 42px 18px rgba(255,221,145,.25)!important;
  }

  .holding-panel.ritual-running .holding-copy{animation:holdingCopy123 12.1s ease both!important}
  .holding-panel.ritual-running .ritual-in{animation:holdingInvite123 11.7s .8s cubic-bezier(.22,.61,.36,1) both!important}
  .holding-panel.ritual-running .ritual-go{animation:holdingRelease123 11.5s 1.35s cubic-bezier(.22,.61,.36,1) both!important}
  .holding-panel.ritual-running .holding-ripple{animation:holdingRipple123 8.2s 2.2s ease-out both!important}
  .holding-panel.ritual-running .holding-star-response{animation:holdingStar123 6.4s 4.7s ease-in-out both!important}
  .holding-panel.ritual-running .release-trace{animation:traceDown138 8.8s 3.1s cubic-bezier(.22,.61,.36,1) forwards!important}
  .holding-panel.ritual-running .rise-trace{animation:traceUp138 8.8s 3.1s cubic-bezier(.22,.61,.36,1) forwards!important}
}

@keyframes holdingCopy123{
  0%{opacity:0;transform:translateY(12px)}
  7%{opacity:1;transform:none}
  72%{opacity:1;transform:none}
  88%{opacity:.42;transform:translateY(-5px)}
  100%{opacity:0;transform:translateY(-10px)}
}
@keyframes holdingInvite123{
  0%,7%{opacity:0;transform:translate(-50%,7vh) scale(.74);filter:blur(10px)}
  20%{opacity:.92;transform:translate(-50%,3vh) scale(1.06);filter:blur(0)}
  40%{opacity:1;transform:translate(-50%,0) scale(1.02);filter:blur(0)}
  68%{opacity:.94;transform:translate(-50%,-2vh) scale(1.01);filter:blur(0)}
  84%{opacity:.62;transform:translate(-50%,-5vh) scale(.96);filter:blur(1px)}
  100%{opacity:0;transform:translate(-50%,-10vh) scale(.84);filter:blur(10px)}
}
@keyframes holdingRelease123{
  0%,6%{opacity:0;transform:translate(-50%,-10px) scale(.82);filter:blur(8px)}
  20%{opacity:.96;transform:translate(-50%,0) scale(1.06);filter:blur(0)}
  34%{opacity:.9;transform:translate(-50%,2px) scale(1);filter:blur(0)}
  68%{opacity:.88;transform:translate(-50%,5px) scale(1.01);filter:blur(0)}
  84%{opacity:.52;transform:translate(-50%,4vh) scale(.96);filter:blur(2px)}
  100%{opacity:0;transform:translate(-50%,11vh) scale(.84);filter:blur(11px)}
}
@keyframes holdingRipple123{
  0%{opacity:0;transform:translateX(-50%) scale(.28)}
  13%{opacity:.86}
  36%{opacity:.62;transform:translateX(-50%) scale(4.4)}
  68%{opacity:.32;transform:translateX(-50%) scale(9.5)}
  100%{opacity:0;transform:translateX(-50%) scale(15)}
}
@keyframes holdingStar123{
  0%,16%{opacity:.1;transform:scale(.6)}
  34%{opacity:.58;transform:scale(1.05)}
  52%{opacity:1;transform:scale(2.05)}
  66%{opacity:.82;transform:scale(1.35)}
  82%{opacity:.4;transform:scale(1)}
  100%{opacity:.14;transform:scale(.78)}
}
@keyframes holdingBeam123{
  0%,10%{opacity:0;transform:translateX(-50%) scaleY(.2)}
  28%{opacity:.45;transform:translateX(-50%) scaleY(.65)}
  58%{opacity:.72;transform:translateX(-50%) scaleY(1)}
  82%{opacity:.28;transform:translateX(-50%) scaleY(1)}
  100%{opacity:0;transform:translateX(-50%) scaleY(.8)}
}
@keyframes holdingConvergence123{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  28%{opacity:.42;transform:translate(-50%,-50%) scale(.9)}
  58%{opacity:.66;transform:translate(-50%,-50%) scale(1.12)}
  82%{opacity:.26;transform:translate(-50%,-50%) scale(1.25)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}

@media(max-width:700px) and (max-height:820px){
  .holding-panel .holding-copy{margin-top:92px!important}
  .holding-panel .ritual-in{top:12.5%!important}
  .holding-panel .ritual-go{top:73.5%!important}
}

@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .holding-panel .ritual-stage::before,
  .holding-panel .ritual-stage::after{display:none!important}
  .holding-panel.ritual-running .ritual-in,
  .holding-panel.ritual-running .ritual-go{opacity:.92!important;filter:none!important}
}


/* Rev 125 — mobile dreamlike Holding refinements. */
@media(max-width:700px){
  .holding-panel .holding-magic{width:78vw;height:24vh}
  .holding-panel .holding-magic-sky{top:2%}
  .holding-panel .holding-magic-water{bottom:5%}
  .holding-panel .holding-sky-aurora{top:8%;width:88vw;height:28vh}
  .holding-panel .holding-water-aurora{bottom:4%;width:94vw;height:24vh}
  .holding-panel .holding-light-bridge{top:7%;bottom:13%;width:3px;border-radius:999px;filter:blur(.6px);box-shadow:0 0 14px rgba(255,226,140,.18),0 0 24px rgba(132,193,255,.14)}
  .holding-panel .release-trace,
  .holding-panel .rise-trace{width:2px;height:17vh;filter:blur(.45px) drop-shadow(0 0 10px rgba(255,236,178,.2))}
  .holding-panel .trace-a,
  .holding-panel .trace-d{display:none}
  .holding-panel .trace-b{margin-left:7.2vw;transform:rotate(2.2deg)}
  .holding-panel .trace-c{margin-left:-3.2vw;transform:rotate(-1.4deg)}
}


/* Rev 126 — mobile validation and visible disabled wall action. */
@media(max-width:700px){
  .reflection-error{min-height:18px;margin-top:6px;font-size:11px;line-height:1.35}
  .experience.keyboard-open .reflection-error{font-size:10px;min-height:15px;margin-top:4px}
  .share-panel #shareButton:disabled{
    opacity:.68!important;
    color:rgba(255,248,224,.78)!important;
    border-bottom-color:rgba(232,90,10,.56)!important;
  }
}


/* Rev 127 — mobile Holding flash prevention and smoother magical onset. */
@media(max-width:700px){
  .phase-holding .scene,
  .phase-holding .art-main,
  .phase-holding .scene-overlay,
  .holding-panel,
  .holding-panel .ritual-stage{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translateZ(0);
  }
  .phase-holding .art-main,
  .phase-holding .scene-overlay{
    transition:none!important;
    animation:none!important;
  }
  .holding-panel .ritual-stage{
    contain:paint;
    isolation:isolate;
  }
  .holding-panel.ritual-prepared .holding-copy,
  .holding-panel.ritual-prepared .ritual,
  .holding-panel.ritual-prepared .holding-ripple,
  .holding-panel.ritual-prepared .holding-star-response,
  .holding-panel.ritual-prepared .holding-light-bridge,
  .holding-panel.ritual-prepared .holding-water-aurora,
  .holding-panel.ritual-prepared .holding-sky-aurora,
  .holding-panel.ritual-prepared .holding-magic,
  .holding-panel.ritual-prepared .release-trace,
  .holding-panel.ritual-prepared .rise-trace{
    will-change:transform,opacity;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .holding-panel.ritual-prepared:not(.ritual-running) .holding-copy,
  .holding-panel.ritual-prepared:not(.ritual-running) .ritual,
  .holding-panel.ritual-prepared:not(.ritual-running) .holding-ripple,
  .holding-panel.ritual-prepared:not(.ritual-running) .holding-star-response,
  .holding-panel.ritual-prepared:not(.ritual-running) .holding-light-bridge,
  .holding-panel.ritual-prepared:not(.ritual-running) .holding-water-aurora,
  .holding-panel.ritual-prepared:not(.ritual-running) .holding-sky-aurora,
  .holding-panel.ritual-prepared:not(.ritual-running) .holding-magic,
  .holding-panel.ritual-prepared:not(.ritual-running) .release-trace,
  .holding-panel.ritual-prepared:not(.ritual-running) .rise-trace{
    opacity:0!important;
    animation:none!important;
  }

  /* Mobile animations use transform and opacity only. Animated blur filters
     caused Android Chrome to flash when the words and glow layers started. */
  .holding-panel.ritual-running .holding-copy{animation:holdingCopy127 13.12s ease both!important}
  .holding-panel.ritual-running .ritual-in{animation:holdingInvite174 11.92s .68s linear both!important}
  .holding-panel.ritual-running .ritual-go{animation:holdingRelease174 11.76s .84s linear both!important}
  .holding-panel.ritual-running .holding-ripple{animation:holdingRipple127 9.28s 2.48s ease-out both!important}
  .holding-panel.ritual-running .holding-star-response{animation:holdingStar127 7.36s 4.4s ease-in-out both!important}
  .holding-panel.ritual-running .holding-light-bridge{animation:holdingBridge127 9.76s 2.32s ease-in-out both!important}
  .holding-panel.ritual-running .holding-sky-aurora{animation:holdingAurora127 10.24s 2s ease-in-out both!important}
  .holding-panel.ritual-running .holding-water-aurora{animation:holdingAurora127 10.24s 2.24s ease-in-out both!important}
  .holding-panel.ritual-running .holding-magic-sky{animation:holdingMagicField127 10.32s 1.92s ease-in-out both!important}
  .holding-panel.ritual-running .holding-magic-water{animation:holdingMagicField127 10.32s 2.24s ease-in-out both!important}
  .holding-panel.ritual-running .holding-magic-sky span{animation:holdingSparkleSky127 5.12s var(--d) ease-in-out infinite!important}
  .holding-panel.ritual-running .holding-magic-water span{animation:holdingSparkleWater127 5.44s var(--d) ease-in-out infinite!important}

  .holding-panel .ritual-in,
  .holding-panel .ritual-go,
  .holding-panel .holding-sky-aurora,
  .holding-panel .holding-water-aurora{
    filter:none!important;
  }
}

@keyframes holdingCopy127{
  0%{opacity:0;transform:translate3d(0,10px,0)}
  7%{opacity:1;transform:translate3d(0,0,0)}
  78%{opacity:1;transform:translate3d(0,0,0)}
  92%{opacity:.48;transform:translate3d(0,-4px,0)}
  100%{opacity:0;transform:translate3d(0,-9px,0)}
}
@keyframes holdingInvite174{
  0%{opacity:0;transform:translate3d(-50%,19vh,0) scale(.78)}
  10%{opacity:.32;transform:translate3d(-50%,16vh,0) scale(.84)}
  22%{opacity:.78;transform:translate3d(-50%,12.5vh,0) scale(.91)}
  36%{opacity:.92;transform:translate3d(-50%,8vh,0) scale(.98)}
  50%{opacity:1;transform:translate3d(-50%,4vh,0) scale(1.03)}
  64%{opacity:.98;transform:translate3d(-50%,.8vh,0) scale(1.02)}
  78%{opacity:.92;transform:translate3d(-50%,-2.4vh,0) scale(1)}
  90%{opacity:.62;transform:translate3d(-50%,-6.2vh,0) scale(.97)}
  100%{opacity:0;transform:translate3d(-50%,-10.8vh,0) scale(.9)}
}
@keyframes holdingRelease174{
  0%{opacity:0;transform:translate3d(-50%,-22vh,0) scale(.82)}
  10%{opacity:.32;transform:translate3d(-50%,-19vh,0) scale(.87)}
  22%{opacity:.78;transform:translate3d(-50%,-14.5vh,0) scale(.93)}
  36%{opacity:.94;transform:translate3d(-50%,-9vh,0) scale(.99)}
  50%{opacity:1;transform:translate3d(-50%,-4.2vh,0) scale(1.03)}
  64%{opacity:.98;transform:translate3d(-50%,-.8vh,0) scale(1.02)}
  78%{opacity:.9;transform:translate3d(-50%,2.8vh,0) scale(1)}
  90%{opacity:.58;transform:translate3d(-50%,6.9vh,0) scale(.97)}
  100%{opacity:0;transform:translate3d(-50%,11.4vh,0) scale(.9)}
}
@keyframes holdingRipple127{
  0%{opacity:0;transform:translate3d(-50%,0,0) scale(.25)}
  17%{opacity:.7}
  43%{opacity:.54;transform:translate3d(-50%,0,0) scale(4.2)}
  72%{opacity:.3;transform:translate3d(-50%,0,0) scale(9)}
  100%{opacity:0;transform:translate3d(-50%,0,0) scale(15)}
}
@keyframes holdingStar127{
  0%,14%{opacity:.08;transform:translateZ(0) scale(.56)}
  38%{opacity:.46;transform:translateZ(0) scale(1)}
  58%{opacity:1;transform:translateZ(0) scale(2.05)}
  76%{opacity:.66;transform:translateZ(0) scale(1.22)}
  100%{opacity:.12;transform:translateZ(0) scale(.82)}
}
@keyframes holdingBridge127{
  0%,12%{opacity:0;transform:translate3d(-50%,0,0) scaleY(.2) scaleX(.72)}
  34%{opacity:.24;transform:translate3d(-50%,0,0) scaleY(.58) scaleX(.9)}
  58%{opacity:.72;transform:translate3d(-50%,0,0) scaleY(1) scaleX(1)}
  78%{opacity:.46;transform:translate3d(-50%,0,0) scaleY(1.02) scaleX(1.02)}
  100%{opacity:0;transform:translate3d(-50%,0,0) scaleY(.82) scaleX(.76)}
}
@keyframes holdingAurora127{
  0%,14%{opacity:0;transform:translate3d(-50%,0,0) scale(.84)}
  38%{opacity:.46;transform:translate3d(-50%,0,0) scale(1)}
  72%{opacity:.38;transform:translate3d(-50%,0,0) scale(1.08)}
  100%{opacity:0;transform:translate3d(-50%,0,0) scale(1.18)}
}
@keyframes holdingMagicField127{0%,12%{opacity:0}32%{opacity:.62}76%{opacity:.52}100%{opacity:0}}
@keyframes holdingSparkleSky127{
  0%,100%{opacity:0;transform:translate3d(var(--x),calc(var(--y) + 12px),0) scale(calc(var(--s)*.55))}
  28%{opacity:.7}
  56%{opacity:.88;transform:translate3d(var(--x),calc(var(--y) - 6px),0) scale(calc(var(--s)*1.02))}
  74%{opacity:.34;transform:translate3d(var(--x),calc(var(--y) - 18px),0) scale(var(--s))}
}
@keyframes holdingSparkleWater127{
  0%,100%{opacity:0;transform:translate3d(var(--x),calc(var(--y) - 7px),0) scale(calc(var(--s)*.55))}
  34%{opacity:.56}
  70%{opacity:.28;transform:translate3d(var(--x),calc(var(--y) + 12px),0) scale(var(--s))}
}


/* Rev 133 — mobile reimagining for the digital wall. */
@media (max-width:700px){
  .phase-wall #fx{opacity:.74}
  .wall-panel{display:flex;align-items:stretch;padding-top:calc(var(--mobile-top) + 16px);padding-bottom:calc(var(--mobile-bottom) + 16px)}
  .wall-shell{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start}
  .wall-shell::before{background:radial-gradient(circle at 50% 16%,rgba(255,246,226,.04),transparent 18%),linear-gradient(180deg,rgba(8,12,24,.08),rgba(8,12,24,0) 24%,rgba(8,12,24,.18) 72%,rgba(8,12,24,.36))}
  .wall-atmosphere{transform:translateY(8px)}
  .wall-aura-sky{top:11%;width:90vw;height:46vw}
  .wall-aura-water{bottom:10%;width:124vw;height:34vw}
  .wall-orbit-a{bottom:14%;width:132vw;height:28vw}
  .wall-orbit-b{top:12%;width:36vw;height:36vw}
  .wall-header{top:calc(var(--mobile-top) + 10px);width:calc(100% - 36px)}
  .wall-header h2{font-size:clamp(14px,4vw,17px);letter-spacing:.14em;line-height:1.22;white-space:nowrap}
  .wall-intro{margin-top:10px;font-size:13px;line-height:1.54;max-width:27ch}
  .wall-footer{bottom:calc(var(--mobile-bottom) + 14px);width:calc(100% - 40px);gap:10px}
  .wall-note{font-size:8.5px;letter-spacing:.15em;max-width:30ch}
  .wall-footer .text-action{font-size:clamp(18px,7vw,24px);min-height:46px;padding:10px 0 8px}
  .wall-constellation{inset:0;z-index:4}
  .wall-constellation::before{left:50%;top:18%;height:30%;opacity:.4}
  .wall-constellation::after{left:50%;bottom:15%;width:136vw;height:30vw;opacity:.26}
  .wall-zone-sky{top:12%;height:22%}
  .wall-zone-water{bottom:12%;height:24%}
  .wall-word{max-width:165px;font-size:clamp(25px,7.5vw,35px);opacity:.54}
  .wall-word.is-featured{max-width:240px;font-size:clamp(48px,12.5vw,60px)}
}


/* Rev 134 — QA-corrected mobile living wall composition. */
@media (max-width:700px){
  .wall-panel{
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .wall-shell{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
  }
  .wall-header{
    top:calc(env(safe-area-inset-top,0px) + 7.4dvh)!important;
    width:calc(100% - 34px)!important;
    max-width:430px!important;
    padding:0!important;
    z-index:8!important;
  }
  .wall-header h2{
    font-size:clamp(18px,5.2vw,26px)!important;
    letter-spacing:.12em!important;
    line-height:1.2!important;
    white-space:normal!important;
    text-wrap:balance!important;
  }
  .wall-intro{
    margin-top:10px!important;
    max-width:none!important;
    width:100%!important;
    white-space:normal!important;
    font-size:clamp(11px,3vw,13px)!important;
    line-height:1.46!important;
    color:rgba(246,242,234,.84)!important;
  }
  .wall-constellation{
    inset:0!important;
  }
  .wall-zone-sky{
    top:25.5%!important;
    height:20.5%!important;
  }
  .wall-zone-water{
    bottom:18.5%!important;
    height:20.5%!important;
  }
  .wall-word{
    max-width:200px!important;
    font-size:clamp(25px,7.25vw,34px)!important;
    line-height:1!important;
    opacity:.68!important;
    text-shadow:0 0 14px rgba(255,248,224,.14),0 0 28px rgba(112,168,238,.14)!important;
  }
  .wall-word.is-featured{
    max-width:188px!important;
    font-size:clamp(36px,9.4vw,46px)!important;
    opacity:1!important;
    z-index:3!important;
  }
  .wall-zone-sky .wall-word:nth-child(n+8):not(.is-featured),
  .wall-zone-water .wall-word:nth-child(n+8):not(.is-featured){
    display:none!important;
  }
  .wall-footer{
    bottom:calc(env(safe-area-inset-bottom,0px) + 3.8dvh)!important;
    width:calc(100% - 40px)!important;
    gap:0!important;
    z-index:8!important;
  }
  .wall-note{
    display:none!important;
  }
  .wall-footer .text-action{
    min-height:46px!important;
    padding:8px 0 7px!important;
    font-size:clamp(20px,6vw,25px)!important;
  }
  .wall-constellation::before{
    top:28%!important;
    height:30%!important;
    opacity:.3!important;
  }
  .wall-constellation::after{
    bottom:17%!important;
    width:126vw!important;
    height:25vw!important;
    opacity:.2!important;
  }
  .wall-aura-sky{
    top:24%!important;
    width:86vw!important;
    height:42vw!important;
  }
  .wall-aura-water{
    bottom:17%!important;
    width:116vw!important;
    height:30vw!important;
  }
  .wall-orbit-a{bottom:17%!important}
  .wall-orbit-b{top:26%!important}
}

@media (max-width:370px){
  .wall-header{top:calc(env(safe-area-inset-top,0px) + 6.4dvh)!important}
  .wall-header h2{font-size:12.5px!important;letter-spacing:.105em!important}
  .wall-intro{font-size:12px!important;max-width:28ch!important}
  .wall-zone-sky{top:26%!important;height:19%!important}
  .wall-zone-water{bottom:18%!important;height:19%!important}
  .wall-word{font-size:18px!important;max-width:102px!important}
  .wall-word.is-featured{font-size:35px!important;max-width:164px!important}
}

/* Rev 136 — mobile living wall scaled for more visible reflections. */
@media (max-width:700px){
  .wall-header{
    top:calc(env(safe-area-inset-top,0px) + .7dvh)!important;
    width:calc(100% - 24px)!important;
    max-width:none!important;
  }
  .wall-header h2{
    font-size:clamp(16.9px,5vw,20.25px)!important;
    letter-spacing:.11em!important;
    white-space:nowrap!important;
  }
  .wall-intro{
    margin-top:8px!important;
    max-width:24ch!important;
    font-size:clamp(11.5px,3.1vw,13px)!important;
    line-height:1.38!important;
  }
  .wall-constellation{
    inset:0 1.2vw!important;
  }
  .wall-constellation::before{
    top:18%!important;
    height:34%!important;
    opacity:.26!important;
  }
  .wall-constellation::after{
    bottom:13%!important;
    width:132vw!important;
    height:26vw!important;
    opacity:.18!important;
  }
  .wall-zone-sky{
    top:20.5%!important;
    height:28.5%!important;
  }
  .wall-zone-water{
    bottom:13%!important;
    height:29%!important;
  }
  .wall-word{
    max-width:none!important;
    white-space:nowrap!important;
    font-size:clamp(14px,4.2vw,19px)!important;
    line-height:1!important;
    opacity:.48!important;
    display:inline-block!important;
  }
  .wall-word.is-featured{
    max-width:none!important;
    white-space:nowrap!important;
    font-size:clamp(30px,8.2vw,40px)!important;
    opacity:1!important;
  }
  .wall-zone-sky .wall-word:nth-child(n+1),
  .wall-zone-water .wall-word:nth-child(n+1){
    display:inline-block!important;
  }
  .wall-footer{
    bottom:calc(env(safe-area-inset-bottom,0px) + 2.5dvh)!important;
    width:calc(100% - 28px)!important;
    gap:4px!important;
  }
  .wall-note{display:none!important}
  .wall-footer .text-action{
    min-height:44px!important;
    font-size:clamp(18px,6.8vw,24px)!important;
    padding:8px 0 7px!important;
  }
}

@media (max-width:370px){
  .wall-header{top:calc(env(safe-area-inset-top,0px) + .5dvh)!important}
  .wall-header h2{font-size:15.9px!important;letter-spacing:.095em!important}
  .wall-intro{font-size:11px!important;max-width:23ch!important}
  .wall-word{max-width:none!important;font-size:13.5px!important;white-space:nowrap!important}
  .wall-word.is-featured{max-width:none!important;font-size:27px!important;white-space:nowrap!important}
}


/* Rev 137 — mobile living wall no-overlap tuning. */
@media (max-width:700px){
  .wall-zone-sky{top:21.5%!important;height:26.5%!important}
  .wall-zone-water{bottom:15%!important;height:25.5%!important}
}

/* Rev 139 — lock the Invite-to-Holding handoff to the prepared Holding artwork.
   Android Chrome could expose the default/opening artwork for a frame while the
   phase background image was being recomposited. A dedicated flattened Holding
   surface now remains underneath the final video frame throughout the fade. */
@media (max-width:700px){
  .experience.mobile-invite-return .scene::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    display:block;
    background:#0d1525 url("images/mobile-art-holding.webp") center center / cover no-repeat;
    opacity:1;
    visibility:visible;
    pointer-events:none;
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .experience.mobile-invite-return .art-main,
  .experience.mobile-invite-return .release-wide-art,
  .experience.mobile-invite-return .release-video-bridge,
  .experience.mobile-invite-return .release-video-end-bridge,
  .experience.mobile-invite-return .art-sky-detail,
  .experience.mobile-invite-return .art-writing-wash,
  .experience.mobile-invite-return .art-writing-detail,
  .experience.mobile-invite-return .art-water-detail{
    opacity:0!important;
    visibility:hidden!important;
    animation:none!important;
    transition:none!important;
  }
  .experience.mobile-invite-return .panel:not(.holding-panel){
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    animation:none!important;
    transition:none!important;
  }
  .experience.mobile-invite-return .holding-panel.active{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
}


@media (max-width: 700px){
  /* Rev 140 — brighter ambient living-wall words on mobile. */
  .wall-word{
    opacity:.74!important;
    text-shadow:0 0 12px rgba(11,16,30,.18),0 0 24px rgba(255,244,225,.08)!important;
  }
  .wall-word-sky{
    color:rgba(255,249,237,.96)!important;
  }
  .wall-word-water{
    color:rgba(255,245,232,.9)!important;
  }
}


/* Rev 141 — keep Let Go / Let In mobile action buttons visible above the keyboard.
   Both action rows sit closer to the text field so users do not need to scroll. */
@media (max-width:700px){
  .letgo-panel .prompt-actions,
  .letin-panel .prompt-actions{
    margin-top:clamp(20px,3.2dvh,28px)!important;
  }

  .experience.keyboard-open .letgo-prompt,
  .experience.keyboard-open .letin-prompt{
    padding-top:10px!important;
  }

  .experience.keyboard-open .letgo-input-wrap,
  .experience.keyboard-open .letin-input-wrap{
    margin-top:12px!important;
  }

  .experience.keyboard-open .letgo-panel .prompt-actions,
  .experience.keyboard-open .letin-panel .prompt-actions{
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-top:12px!important;
    margin-bottom:0!important;
    padding-top:0!important;
    gap:18px!important;
    align-items:end!important;
  }

  .experience.keyboard-open .prompt textarea{
    min-height:40px!important;
    max-height:64px!important;
    padding-top:2px!important;
    padding-bottom:6px!important;
  }
}


@media (max-width:700px){
  /* Rev 263 — compact, complete mobile email invitation. */
  .email-panel{
    align-items:flex-start!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding-top:calc(var(--mobile-top) + 12px)!important;
    padding-bottom:calc(var(--mobile-bottom) + 14px)!important;
  }
  .email-shell{
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:22px 18px 18px!important;
    border-radius:22px!important;
  }
  .email-shell .email-kicker{
    margin:0 0 8px!important;
    font-size:9px!important;
    line-height:1.2!important;
  }
  .email-shell #emailJourneyHeadline{
    max-width:100%!important;
    margin:0 0 12px!important;
    font-size:clamp(33px,9vw,39px)!important;
    line-height:.94!important;
  }
  .email-delivery-intro,
  .email-personal-note,
  .email-question{
    font-size:12.5px!important;
    line-height:1.42!important;
  }
  .email-delivery-intro{margin-bottom:8px!important}
  .email-delivery-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    margin:0 0 11px!important;
    padding:0!important;
  }
  .email-delivery-list li{
    gap:8px!important;
    font-size:12px!important;
    line-height:1.28!important;
  }
  .email-delivery-list li span:first-child{
    flex-basis:20px!important;
    width:20px!important;
    font-size:15px!important;
  }
  .email-personal-note{margin-bottom:10px!important;max-width:34ch!important}
  .email-question{margin-bottom:0!important;font-weight:600!important}
  .email-free-note{margin:2px 0 8px!important;font-size:12px!important;line-height:1.35!important;font-style:italic!important;font-weight:400!important;color:rgba(255,255,255,.72)!important}
  .email-panel .email-free-note + .email-field{margin-top:0!important}
  .email-shell .flow-actions .text-action{max-width:190px!important}
  .experience.keyboard-open .email-delivery-list,
  .experience.keyboard-open .email-personal-note,
  .experience.keyboard-open .email-kicker{display:none!important}
  .experience.keyboard-open .email-shell #emailJourneyHeadline{font-size:32px!important;margin-bottom:8px!important}
}


@media (max-width:700px){
  /* Rev 143 — keep the full email decision comfortably within the mobile viewport. */
  .email-panel .email-field{margin-top:14px!important}
  .email-panel .email-field>span{margin-bottom:5px!important}
  .email-panel .email-field input{padding:7px 0 10px!important}
  .email-panel .field-error{margin-top:2px!important;min-height:10px!important}
  .email-panel .privacy-note{margin:3px 0 0!important;font-size:9.5px!important;line-height:1.38!important}
  .email-panel .news-choice{margin-top:9px!important}
  .email-panel .flow-actions{margin-top:auto!important;padding-top:12px!important}
}


@media (max-width:700px){
  /* Rev 144 — primary email CTA stands out; skip remains clearly secondary. */
  .email-panel #skipEmailButton{
    color:rgba(222,226,233,.42)!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:400!important;
    max-width:118px!important;
  }

  .email-panel #sendReflectionButton{
    color:rgba(255,250,237,.98)!important;
    font-size:clamp(15px,4.3vw,18px)!important;
    line-height:1.22!important;
    font-weight:750!important;
    max-width:220px!important;
    white-space:nowrap!important;
    opacity:1!important;
    text-shadow:0 0 18px rgba(255,245,220,.2)!important;
  }

  .email-panel #sendReflectionButton:disabled{
    color:rgba(255,250,237,.7)!important;
    opacity:.76!important;
  }
}


@media (max-width:700px){
  /* Rev 145 — prevent email-focus flashing and keep reassurance visible. */
  .email-panel .email-field{
    margin-top:12px!important;
    margin-bottom:0!important;
  }

  .email-panel .email-field input{
    padding:6px 0 8px!important;
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }

  .email-panel .field-error{
    margin:1px 0 0!important;
    min-height:8px!important;
  }

  .email-panel .privacy-note,
  .experience.keyboard-open .email-panel .privacy-note{
    display:block!important;
    margin:1px 0 0!important;
    font-size:11px!important;
    line-height:1.38!important;
    color:rgba(238,241,247,.72)!important;
  }

  .email-panel .news-choice{
    margin-top:7px!important;
  }

  .experience.keyboard-open .email-panel{
    contain:layout paint!important;
    isolation:isolate!important;
  }

  .experience.keyboard-open .email-shell{
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }

  .experience.keyboard-open .email-panel .news-choice{
    display:none!important;
  }
}


/* Rev 146 — pre-arm the Holding artwork beneath the Invite video.
   This prevents the original word-layered opening artwork from flashing for
   even a single frame before the Holding Your Words screen appears. */
@media (max-width:700px){
  .experience.invite-handoff-armed .scene::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    display:block;
    background:#0d1525 url("images/mobile-art-holding.webp") center center / cover no-repeat;
    opacity:1;
    visibility:visible;
    pointer-events:none;
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  .experience.invite-handoff-armed .art-main,
  .experience.invite-handoff-armed .release-wide-art,
  .experience.invite-handoff-armed .art-sky-detail,
  .experience.invite-handoff-armed .art-writing-wash,
  .experience.invite-handoff-armed .art-writing-detail,
  .experience.invite-handoff-armed .art-water-detail,
  .experience.invite-handoff-armed .geo-marks,
  .experience.invite-handoff-armed .ink-edge,
  .experience.invite-handoff-armed .water-sheen{
    opacity:0!important;
    visibility:hidden!important;
    animation:none!important;
    transition:none!important;
  }

  .experience.invite-handoff-armed .invite-video{
    z-index:14!important;
  }
}


@media (max-width:700px){
  /* Rev 148 — move the personalized journey content into the reclaimed space. */
  .email-panel{padding-top:calc(var(--mobile-top) + 4px)!important}
  .email-panel .email-shell{transform:none!important}
  .email-shell #emailJourneyHeadline{margin-top:0!important}
}

@media (max-width:700px){
  /* Rev 149 — taller email field at rest and while focused. */
  .email-panel .email-field input,
  .experience.keyboard-open .email-panel .email-field input{
    min-height:58px!important;
    height:58px!important;
    box-sizing:border-box!important;
    padding:10px 0 12px!important;
    line-height:1.08!important;
  }
}


@media (max-width:700px){
  /* Rev 149 refinement — remove Begin again and keep the artist action clean. */
  .completion-actions{gap:0!important}
}

/* Rev 150 — mobile final screen follows the mockup more closely. */
@media (max-width:700px){
  .completion-panel{
    align-items:stretch;
    padding-top:calc(var(--mobile-top) + 18px);
    padding-bottom:calc(var(--mobile-bottom) + 20px);
  }
  .completion-shell-mockup{
    width:100%;
    min-height:100%;
    padding:14px 0 0;
    gap:20px;
  }
  .completion-topline{
    grid-template-columns:1fr 1fr;
    gap:18px 22px;
    padding:0;
  }
  .completion-axis-line{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    margin:0;
    align-self:start;
  }
  .completion-word{
    padding:0;
  }
  .completion-word span{
    margin-bottom:5px;
    font-size:9px;
    letter-spacing:.22em;
  }
  .completion-word em{
    font-size:clamp(28px,8.3vw,44px);
  }
  .completion-copy{
    width:100%;
  }
  .completion-copy .kicker{
    margin-bottom:10px;
  }
  .completion-copy h2{
    max-width:7.4ch;
    font-size:clamp(60px,16vw,82px);
    margin-bottom:16px;
  }
  .completion-status{
    gap:8px;
    max-width:26ch;
    font-size:clamp(14px,4.8vw,19px);
    line-height:1.42;
  }
  .completion-actions{
    margin-top:20px;
    width:100%;
  }
  .artist-link-primary{
    gap:12px;
    padding:14px 0 16px;
    font-size:clamp(18px,7vw,28px);
    line-height:1.12;
  }
  .artist-link-primary .artist-link-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
    font-size:20px;
  }
  .artist-link-primary .artist-link-arrow{
    font-size:26px;
  }
}

/* Rev 151 — final-screen mobile proportions corrected to match the approved mockup. */
@media (max-width:700px){
  .completion-panel{
    padding-top:calc(var(--mobile-top) + 12px)!important;
    padding-bottom:calc(var(--mobile-bottom) + 14px)!important;
  }
  .completion-shell-mockup{
    min-height:100%!important;
    padding-top:8px!important;
    gap:14px!important;
    justify-content:flex-end!important;
  }
  .completion-topline{
    gap:10px 18px!important;
  }
  .completion-word span{
    margin-bottom:3px!important;
    font-size:8px!important;
  }
  .completion-word em{
    font-size:clamp(24px,7vw,32px)!important;
  }
  .completion-copy .kicker{
    margin-bottom:7px!important;
    font-size:9px!important;
  }
  .completion-copy h2{
    max-width:none!important;
    width:100%!important;
    font-size:clamp(42px,12vw,54px)!important;
    line-height:.9!important;
    margin:0 0 12px!important;
    letter-spacing:-.035em!important;
  }
  .completion-status{
    gap:6px!important;
    max-width:30ch!important;
    font-size:clamp(12px,3.7vw,15px)!important;
    line-height:1.4!important;
  }
  .completion-actions{
    margin-top:14px!important;
  }
  .artist-link-primary{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 16px!important;
    gap:10px!important;
    align-items:center!important;
    width:100%!important;
    padding:11px 0 12px!important;
    font-family:Manrope,sans-serif!important;
    font-size:clamp(14.75px,4.525vw,17.75px)!important;
    font-weight:600!important;
    line-height:1!important;
    letter-spacing:-.012em!important;
    white-space:nowrap!important;
  }
  .artist-link-primary .artist-link-icon{
    position:relative!important;
    isolation:isolate!important;
    width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
    font-size:14px!important;
    box-shadow:0 0 0 1px rgba(255,232,165,.72),0 0 12px rgba(255,220,126,.16)!important;
    animation:artistCtaGlowPulse 3.8s ease-in-out infinite!important;
    will-change:transform,filter,box-shadow!important;
  }
  .artist-link-primary .artist-link-icon::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:1px solid rgba(255,233,169,.42);
    opacity:.16;
    pointer-events:none;
    animation:artistCtaHaloPulse 3.8s ease-out infinite!important;
  }
  .artist-link-primary .artist-link-label{
    min-width:0!important;
    white-space:nowrap!important;
  }
  .artist-link-primary .artist-link-arrow{
    font-size:19px!important;
  }
}

@media (max-width:370px){
  .completion-copy h2{
    font-size:40px!important;
  }
  .completion-status{
    font-size:11.5px!important;
  }
  .artist-link-primary{
    grid-template-columns:44px minmax(0,1fr) 15px!important;
    gap:8px!important;
    font-size:13.625px!important;
  }
  .artist-link-primary .artist-link-icon{
    width:28px!important;
    height:28px!important;
  }
  .artist-link-primary .artist-link-icon::after{
    inset:-3px;
  }
}

/* Rev 178/285 — mobile Support Theme step; obsolete Practice Preference selectors removed. */
@media (max-width:700px){
  .support-theme-panel.active{
    display:flex!important;
  }
  .phase-support-theme .art-main{
    background-image:url("images/mobile-art-result.webp");
    background-size:cover;
    background-position:center;
    filter:brightness(.72) saturate(1.02);
  }
  .journey-choice-panel{
    padding-top:calc(var(--mobile-top) + 28px)!important;
    padding-bottom:calc(var(--mobile-bottom) + 24px)!important;
  }
  .journey-choice-shell{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    min-height:100%;
    overflow:visible;
  }
  .support-theme-panel{
    align-items:flex-start!important;
    justify-content:flex-start!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .support-theme-panel .journey-choice-shell{
    justify-content:flex-start;
    min-height:auto;
    padding-top:0;
  }
  .journey-choice-shell>.kicker{
    margin-bottom:10px;
  }
  .journey-choice-shell h2{
    max-width:15ch;
    margin-bottom:12px;
    font-size:clamp(36px,9.4vw,44px);
    line-height:.96;
  }
  .support-heading-mobile{display:none}
  .support-theme-panel .support-heading-desktop{display:none}
  .support-theme-panel .support-heading-mobile{display:inline}
  .support-theme-panel .journey-choice-shell h2{
    width:100%;
    max-width:none;
    margin-bottom:10px;
    font-size:clamp(23px,6.35vw,27px);
    line-height:1.04;
    text-wrap:balance;
  }
  .journey-choice-shell .flow-intro{
    max-width:36ch;
    margin-bottom:18px;
    font-size:12.8px;
    line-height:1.48;
  }
  .support-theme-panel .flow-intro{
    max-width:none;
    margin-bottom:14px;
    font-size:13px;
    line-height:1.38;
  }
  .support-copy-desktop{display:none!important}
  .support-copy-mobile{display:inline!important}
  .journey-option-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .support-theme-grid{
    grid-auto-rows:1fr;
    gap:8px;
  }
  .support-theme-grid .journey-option{
    display:flex;
    min-width:0;
  }
  .support-theme-grid .journey-option span{
    width:100%;
    min-height:104px;
    height:100%;
    padding:10px 12px!important;
    border-radius:16px;
    justify-content:flex-start;
  }
  .support-theme-grid .journey-option strong{
    margin-bottom:5px;
    font-size:14px;
    line-height:1.08;
  }
  .support-theme-grid .journey-option em{
    font-size:11px;
    line-height:1.22;
  }
  .journey-option span{
    min-height:48px;
    padding:11px 9px;
    font-size:clamp(12px,3.45vw,14px);
    line-height:1.15;
  }
  .journey-choice-actions{
    margin-top:22px!important;
    align-items:center!important;
  }
  .support-theme-panel .journey-choice-actions{
    margin-top:14px!important;
  }
  .journey-choice-actions .quiet{
    max-width:none;
    font-size:11px;
  }
  .journey-choice-actions .text-action{
    max-width:230px;
    font-size:13px;
  }
}
@media (max-width:700px) and (max-height:740px){
  .journey-choice-panel{
    padding-top:calc(var(--mobile-top) + 18px)!important;
    padding-bottom:calc(var(--mobile-bottom) + 14px)!important;
  }
  .journey-choice-shell h2{
    font-size:clamp(32px,8.8vw,40px);
    margin-bottom:10px;
  }
  .support-theme-panel .journey-choice-shell h2{
    font-size:clamp(22px,6.1vw,25px);
  }
  .journey-choice-shell .flow-intro{
    margin-bottom:14px;
    font-size:12px;
  }
  .journey-option-grid{gap:8px}
  .journey-option span{min-height:42px;padding:8px 7px}
  .journey-choice-actions{margin-top:14px!important}
}


/* Rev 182 — mobile option selection without full-screen repaint/flicker. */
@media (max-width:700px){
  .phase-support-theme .moving-light,
  .phase-support-theme .horizon-glow,
  .phase-support-theme .water-sheen,
  .phase-support-theme .water-ripples,
  .phase-support-theme .star-field,
  .phase-support-theme #fx{
    animation-play-state:paused!important;
    transition:none!important;
  }
  .journey-choice-panel.active,
  .journey-choice-shell,
  .journey-option-grid{
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
  .journey-option{
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
  }
  .journey-option span{
    transition:border-color .16s ease,background-color .16s ease,color .16s ease!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
  .journey-option:hover span,
  .journey-option:focus-within span{
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
  .journey-option.is-selected span,
  .journey-option input:checked+span{
    box-shadow:inset 0 0 0 1px rgba(255,225,170,.08)!important;
    filter:none!important;
    transform:none!important;
  }
}


/* Rev 183 — mobile selection remains local to the option, never the full scene. */
@media (max-width:700px){
  .experience.phase-support-theme .journey-option{
    outline:none!important;
  }
  .experience.phase-support-theme .journey-option span,
  .experience.phase-support-theme .journey-option:hover span,
  .experience.phase-support-theme .journey-option:focus span,
  .experience.phase-support-theme .journey-option:focus-visible span{
    transition:none!important;
    transform:none!important;
    filter:none!important;
    box-shadow:none!important;
  }
  .experience.phase-support-theme .journey-option.is-selected span,
  .experience.phase-support-theme .journey-option input:checked+span{
    border-color:rgba(255,139,66,.98)!important;
    background:linear-gradient(180deg,rgba(205,88,30,.36),rgba(145,55,18,.26))!important;
    box-shadow:inset 0 0 0 1px rgba(255,229,184,.18),0 0 16px rgba(232,90,10,.16)!important;
  }
  .experience.phase-support-theme .journey-option span{
    position:relative!important;
    padding-left:25px!important;
    padding-right:25px!important;
  }
  .experience.phase-support-theme .journey-option.is-selected span::after,
  .experience.phase-support-theme .journey-option input:checked+span::after{
    content:"✓";
    position:absolute;
    right:11px;
    top:50%;
    transform:translateY(-52%);
    font:600 13px/1 Manrope,sans-serif;
    color:#ffd7a8;
  }
}

/* Rev 184 — Batch 1 mobile refinements. */
@media (max-width:700px){
  .phase-opening .art-main{
    filter:brightness(1.08) saturate(1.04)!important;
  }
  .begin{
    gap:11px!important;
    min-height:48px!important;
    padding:11px 16px 9px!important;
    border-radius:999px!important;
  }
  .opening-whispers .ow-a{left:8%;top:27%;font-size:30px}
  .opening-whispers .ow-b{left:48%;top:42%;font-size:25px}
  .opening-whispers .ow-c{right:8%;top:20%;font-size:27px}
  .opening-whispers .ow-d{right:12%;top:60%;font-size:23px}
  .opening-whispers .ow-e{left:9%;top:68%;font-size:21px}
  .letgo-panel .letgo-input-wrap{
    width:100%!important;
    margin-top:clamp(24px,4dvh,38px)!important;
    padding:13px 15px 0!important;
    border-radius:16px!important;
  }
  .letgo-panel .letgo-input-wrap::after{
    left:15px!important;
    right:15px!important;
  }
  .letgo-panel textarea{
    min-height:62px!important;
    padding:7px 0 11px!important;
    font-size:clamp(28px,7.8vw,38px)!important;
  }
  .letgo-panel .input-example-label{
    font-size:8.5px!important;
  }
  .share-panel .share-choices-display{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .share-panel .phrase-display{
    padding:4px 0 12px!important;
  }
  .share-panel .phrase-display .choice-phrase{
    min-height:0!important;
    padding:8px 0 9px!important;
  }
  .share-consent-row{
    margin:16px 0 0!important;
    font-size:13px!important;
    line-height:1.44!important;
  }
  .share-decision-actions{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    margin-top:16px!important;
  }
  .share-decision-actions button{
    width:100%!important;
    max-width:none!important;
    min-height:50px!important;
    padding:12px 14px!important;
  }
  .private-choice-button{
    font-size:13px!important;
    min-height:46px!important;
    border:1px solid rgba(255,244,214,.42)!important;
  }
  .share-choice-button{
    font-size:13px!important;
  }
}
@media (max-width:700px){
  .phase-letgo .art-main{
    background-image:url("images/mobile-art-letgo-clean.webp")!important;
    background-size:cover!important;
    background-position:center!important;
    filter:brightness(.82) saturate(1.04)!important;
  }
}

/* Rev 185 — mobile-only opening-screen compositor stabilization. */
@media (max-width:700px){
  /* The animated box-shadow and blur filters introduced in Rev 184 caused
     Android Chrome to rebuild the opening scene layers. Keep the same visual
     intent with opacity-only accents that do not repaint the full viewport. */
  .phase-opening .begin{
    position:relative!important;
    isolation:isolate!important;
    animation:none!important;
    box-shadow:0 0 22px rgba(255,215,120,.12)!important;
    transform:none!important;
    filter:none!important;
    transition:border-color .18s ease,background-color .18s ease,color .18s ease!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .phase-opening .begin::before{
    content:""!important;
    position:absolute!important;
    inset:-5px!important;
    z-index:-1!important;
    border-radius:999px!important;
    border:1px solid rgba(255,226,150,.2)!important;
    background:rgba(255,231,160,.025)!important;
    opacity:.25!important;
    animation:mobileBeginHalo185 3.8s ease-in-out infinite!important;
    pointer-events:none!important;
  }
  .phase-opening .begin-arrow{
    animation:mobileBeginArrow185 3.8s ease-in-out infinite!important;
    transform:none;
    will-change:opacity;
  }
  .phase-opening .opening-whispers{
    top:0!important;
    left:0!important;
    right:0!important;
    height:34%!important;
  }
  .phase-opening .opening-whispers .ow-a{left:8%!important;top:12%!important;font-size:clamp(22px,6.8vw,30px)!important}
  .phase-opening .opening-whispers .ow-b{left:34%!important;top:24%!important;font-size:clamp(18px,5.2vw,24px)!important}
  .phase-opening .opening-whispers .ow-c{right:8%!important;top:10%!important;font-size:clamp(20px,5.9vw,27px)!important}
  .phase-opening .opening-whispers .ow-d{right:16%!important;top:28%!important;font-size:clamp(17px,4.8vw,22px)!important}
  .phase-opening .opening-whispers .ow-e{left:16%!important;top:30%!important;font-size:clamp(16px,4.5vw,21px)!important}
  .phase-opening .opening-whispers,
  .phase-opening .opening-whispers span{
    filter:none!important;
    will-change:opacity,transform!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
  .experience.journey-whispers-active .opening-whispers{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    height:44dvh!important;
    overflow:hidden!important;
    opacity:1!important;
    visibility:visible!important;
    z-index:6!important;
  }
  .experience.journey-whispers-active .opening-whispers .ow-a{left:8%!important;right:auto!important;top:10%!important}
  .experience.journey-whispers-active .opening-whispers .ow-b{left:35%!important;right:auto!important;top:24%!important}
  .experience.journey-whispers-active .opening-whispers .ow-c{left:auto!important;right:8%!important;top:8%!important}
  .experience.journey-whispers-active .opening-whispers .ow-d{left:auto!important;right:14%!important;top:34%!important}
  .experience.journey-whispers-active .opening-whispers .ow-e{left:12%!important;right:auto!important;top:40%!important}
  .experience.journey-whispers-active .opening-whispers .ow-a,
  .experience.journey-whispers-active .opening-whispers .ow-c,
  .experience.journey-whispers-active .opening-whispers .ow-e{
    animation:mobileOpeningWhisperA195 5.4s ease-in-out infinite both!important;
  }
  .experience.journey-whispers-active .opening-whispers .ow-b,
  .experience.journey-whispers-active .opening-whispers .ow-d{
    animation:mobileOpeningWhisperB195 5.4s ease-in-out infinite both!important;
  }
  .experience.journey-whispers-active .opening-whispers .ow-a{animation-delay:1.45s!important}
  .experience.journey-whispers-active .opening-whispers .ow-b{animation-delay:2.3s!important}
  .experience.journey-whispers-active .opening-whispers .ow-c{animation-delay:3.2s!important}
  .experience.journey-whispers-active .opening-whispers .ow-d{animation-delay:4.15s!important}
  .experience.journey-whispers-active .opening-whispers .ow-e{animation-delay:5.05s!important}
  .experience.phase-opening.opening-departure .opening-copy-block{
    opacity:.42!important;
    transition:opacity .42s ease!important;
    transform:none!important;
    filter:none!important;
  }
  @keyframes mobileOpeningWhisperA195{
    0%{opacity:0;transform:translate3d(0,10px,0) scale(.985)}
    20%{opacity:0;transform:translate3d(0,9px,0) scale(.988)}
    42%{opacity:.66;transform:translate3d(0,0,0) scale(1)}
    68%{opacity:.68;transform:translate3d(1px,-6px,0) scale(1.01)}
    100%{opacity:0;transform:translate3d(4px,-13px,0) scale(1.012)}
  }
  @keyframes mobileOpeningWhisperB195{
    0%{opacity:0;transform:translate3d(0,12px,0) scale(.985)}
    18%{opacity:0;transform:translate3d(0,10px,0) scale(.988)}
    40%{opacity:.64;transform:translate3d(0,0,0) scale(1)}
    66%{opacity:.66;transform:translate3d(-1px,-6px,0) scale(1.01)}
    100%{opacity:0;transform:translate3d(-4px,-13px,0) scale(1.014)}
  }
  /* Hold the large decorative surfaces steady while the brief departure words
     appear. This prevents the artwork, canvas, and glow layers from competing
     for a new compositor surface on tap. */
  .experience.phase-opening.opening-departure .art-main,
  .experience.phase-opening.opening-departure .moving-light,
  .experience.phase-opening.opening-departure .horizon-glow,
  .experience.phase-opening.opening-departure .water-sheen,
  .experience.phase-opening.opening-departure .water-ripples,
  .experience.phase-opening.opening-departure .star-field{
    animation-play-state:paused!important;
    transition:none!important;
  }
}

@keyframes mobileBeginHalo185{
  0%,100%{opacity:.18}
  50%{opacity:.48}
}
@keyframes mobileBeginArrow185{
  0%,68%,100%{opacity:.72}
  80%{opacity:1}
  90%{opacity:.86}
}
@keyframes mobileOpeningWhisperA186{
  0%,10%{opacity:0;transform:translate3d(0,8px,0) scale(.98)}
  26%,66%{opacity:.64;transform:translate3d(0,0,0) scale(1)}
  88%,100%{opacity:0;transform:translate3d(0,-10px,0) scale(1.015)}
}
@keyframes mobileOpeningWhisperB186{
  0%,18%{opacity:0;transform:translate3d(0,10px,0) scale(.985)}
  38%,70%{opacity:.56;transform:translate3d(0,0,0) scale(1)}
  92%,100%{opacity:0;transform:translate3d(0,-8px,0) scale(1.01)}
}

/* Rev 185 final mobile opening lock: keep the opening artwork on one stable
   surface. The lightweight canvas particles may continue, but the large CSS
   artwork/glow layers do not animate or re-composite. */
@media (max-width:700px){
  .experience.phase-opening .art-main,
  .experience.phase-opening .moving-light,
  .experience.phase-opening .horizon-glow,
  .experience.phase-opening .water-sheen,
  .experience.phase-opening .water-ripples,
  .experience.phase-opening .star-field,
  .experience.phase-opening .geo-marks{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    will-change:auto!important;
  }
  .experience.phase-opening .begin::before{
    animation:none!important;
    opacity:.32!important;
  }
}


/* Rev 192 — mobile only: shorten Let Go / Let In text-entry boxes so the CTA remains visible above the keyboard. */
@media (max-width:700px){
  .letgo-panel textarea,
  .letin-panel textarea{
    min-height:62px!important;
    padding-top:7px!important;
    padding-bottom:11px!important;
  }
}

/* Rev 194 — mobile only: make the two reflection entry boxes genuinely shorter.
   Explicit heights prevent the textarea rows attribute or browser defaults from
   expanding the field and pushing the CTA below the on-screen keyboard. */
@media (max-width:700px){
  .letgo-panel .letgo-input-wrap,
  .letin-panel .letin-input-wrap{
    padding:10px 14px 0!important;
    min-height:0!important;
    height:auto!important;
  }
  .letgo-panel textarea,
  .letin-panel textarea{
    box-sizing:border-box!important;
    display:block!important;
    min-height:58px!important;
    height:58px!important;
    max-height:58px!important;
    padding:5px 0 8px!important;
    overflow:hidden!important;
  }
  .experience.keyboard-open .letgo-panel textarea,
  .experience.keyboard-open .letin-panel textarea{
    min-height:46px!important;
    height:46px!important;
    max-height:46px!important;
    padding:2px 0 5px!important;
  }
}

/* Rev 199 — mobile opening-to-Let-Go flash repair.
   Keep a decoded opening image behind the primary artwork so Android Chrome
   never exposes the page background while swapping the mobile scene image. */
@media (max-width:700px){
  .experience .scene{
    background-color:#071124!important;
    background-image:url("images/mobile-art-opening.webp")!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }
  .experience.phase-opening .art-main,
  .experience.phase-letgo .art-main{
    opacity:1!important;
    visibility:visible!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    transform:translateZ(0)!important;
  }
}


/* Rev 223 — make the final-screen artist CTA pulse much more obvious on mobile. */
@media (max-width:700px){
  .experience.phase-result .artist-link-primary .artist-link-icon{
    background:rgba(255,240,188,.1)!important;
    box-shadow:0 0 0 1px rgba(255,232,165,.84),0 0 0 5px rgba(255,220,126,.12),0 0 18px rgba(255,220,126,.3)!important;
    animation:artistCtaGlowPulseStrong 2.45s ease-out infinite!important;
  }
  .experience.phase-result .artist-link-primary .artist-link-icon::after{
    inset:-8px!important;
    border:2px solid rgba(255,233,169,.78)!important;
    box-shadow:0 0 0 3px rgba(255,231,166,.12),0 0 18px rgba(255,222,145,.2)!important;
    opacity:.58!important;
    animation:artistCtaHaloPulseStrong 2.45s cubic-bezier(.22,.61,.36,1) infinite!important;
  }
}

@keyframes artistCtaGlowPulseStrong{
  0%,100%{
    transform:scale(1);
    filter:brightness(1);
  }
  18%{
    transform:scale(1.06);
    filter:brightness(1.08);
  }
  36%{
    transform:scale(1.12);
    filter:brightness(1.18);
  }
  58%{
    transform:scale(1.05);
    filter:brightness(1.08);
  }
}

@keyframes artistCtaHaloPulseStrong{
  0%{
    opacity:.62;
    transform:scale(.95);
  }
  55%{
    opacity:.22;
    transform:scale(1.34);
  }
  100%{
    opacity:0;
    transform:scale(1.48);
  }
}


/* Rev 251 — commitment step mobile scene. */
@media(max-width:700px){
  .phase-commitment .art-main{background-image:url("images/mobile-art-result.webp");background-size:cover;background-position:center;filter:none}
}


/* Rev 253 — authoritative mobile Commitment screen layout and navigation target. */
@media (max-width:700px){
  .commitment-panel.active{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding:calc(var(--mobile-top) + 22px) var(--mobile-inline) calc(var(--mobile-bottom) + 20px)!important;
  }
  .commitment-panel .commitment-shell{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .commitment-panel .commitment-shell>.kicker{
    margin:0 0 12px!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:.2em!important;
  }
  .commitment-panel .commitment-shell h2{
    width:100%!important;
    max-width:11ch!important;
    margin:0 0 20px!important;
    font-size:clamp(34px,9.4vw,42px)!important;
    line-height:.98!important;
    text-wrap:balance;
  }
  .commitment-panel .commitment-copy{
    margin:0 0 20px!important;
    font-size:15px!important;
    line-height:1.5!important;
    color:rgba(245,242,232,.86)!important;
  }
  .commitment-panel .commitment-copy p{margin:0 0 7px!important}
  .commitment-panel .commitment-question{
    max-width:31ch!important;
    margin:0 0 22px!important;
    font-size:17px!important;
    line-height:1.42!important;
  }
  .commitment-panel .commitment-actions{
    width:100%!important;
    margin-top:auto!important;
    padding-top:8px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:18px!important;
  }
  .commitment-panel .commitment-actions .quiet{
    max-width:none!important;
    font-size:11px!important;
  }
  .commitment-panel .commitment-confirm{
    max-width:none!important;
    font-size:15px!important;
    line-height:1.25!important;
    text-align:right!important;
    white-space:nowrap!important;
    touch-action:manipulation!important;
  }
}
@media (max-width:700px) and (max-height:740px){
  .commitment-panel.active{padding-top:calc(var(--mobile-top) + 12px)!important;padding-bottom:calc(var(--mobile-bottom) + 12px)!important}
  .commitment-panel .commitment-shell>.kicker{margin-bottom:8px!important}
  .commitment-panel .commitment-shell h2{font-size:clamp(30px,8.6vw,36px)!important;margin-bottom:14px!important}
  .commitment-panel .commitment-copy{font-size:14px!important;line-height:1.42!important;margin-bottom:14px!important}
  .commitment-panel .commitment-question{font-size:15px!important;margin-bottom:14px!important}
}


@media (max-width:700px){
  /* Rev 264 — mobile email field matches the clearer boxed input used elsewhere. */
  .email-panel .email-field{
    margin-top:14px!important;
    padding:12px 14px 0!important;
    border-radius:18px!important;
  }
  .email-panel .email-field::after{
    left:14px!important;
    right:14px!important;
  }
  .email-panel .email-field>span{
    margin-bottom:4px!important;
  }
  .email-panel .email-field input,
  .experience.keyboard-open .email-panel .email-field input{
    min-height:58px!important;
    padding:6px 0 12px!important;
    font-size:clamp(25px,7vw,33px)!important;
    line-height:1.08!important;
  }
  .email-panel .email-field input::placeholder,
  .experience.keyboard-open .email-panel .email-field input::placeholder{
    color:rgba(255,248,224,.44)!important;
  }
}