/* ================= MOBILE · phones and small tablets ================= */
/* tap feel on iOS/Android */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,label,summary,input{-webkit-tap-highlight-color:rgba(138,41,70,.12)}
button,.button,a.button{touch-action:manipulation}
.rx-sticky{display:none}

@media (max-width:759px){
  /* ---------- quiz questions ---------- */
  .options button{min-height:52px}

  /* ---------- result page ---------- */
  body.q-result .quiz{padding:0 16px 120px}
  body.q-result .result-head{padding-top:232px}
  body.q-result .result-head:before{width:100%;top:220px;box-shadow:0 0 22px 18px #faf0dd}
  body.q-result .result-head h1{font-size:clamp(42px,12vw,54px);margin:14px auto 16px}
  body.q-result .result-head p.res-lede{font-size:19px;line-height:1.5}
  body.q-result .result-head .rx-pull{margin-top:24px}
  body.q-result .result-head .rx-pull p{font-size:21px}
  body.q-result .result-head>.rz-hero-ph{display:none}
  body.q-result .result-body{margin-top:26px}
  body.q-result .rz-st.rx-card,body.q-result .rz-st.rx-card.rz-L,body.q-result .rz-st.rx-card.rz-R{width:auto;margin:0 0 26px 30px!important;padding:22px 20px 22px;border-radius:18px}
  .rx-card h3,.rx-card strong{font-size:26px}
  .rx-card p{font-size:15.5px}
  .rx-words q{font-size:19px}
  .rx-stop:first-child .rx-k:after{float:none;display:table;margin:8px 0 0}
  .rx-plate{margin:20px 0 34px 30px;text-align:left;box-shadow:0 0 20px 16px #faf0dd}
  .rx-plate .eyebrow{margin-left:0!important}
  .rx-plate h2{font-size:40px}
  .rx-plate p{margin:0;font-size:16px}
  .rx-buy{grid-template-columns:1fr!important;gap:6px;margin:50px 0 0;padding:26px 22px 28px;border-radius:24px}
  .rx-fan{height:190px;margin:0!important}
  .rx-fan img{width:92px}
  .rx-buy h2{font-size:36px}
  .rx-price strong{font-size:52px}
  .rx-actions{flex-direction:column;align-items:stretch;gap:14px}
  .rx-actions .button{width:100%;text-align:center;padding:18px 20px}
  .rx-actions a{align-self:center}
  .rx-sample{margin-top:50px}
  .rx-sample-in{grid-template-columns:1fr!important;gap:22px;padding:30px 22px;border-radius:24px}
  .rx-sample h2{font-size:38px}
  .rx-row{flex-direction:column;border-radius:18px;padding:6px;gap:6px}
  .rx-row input{padding:14px 12px;font-size:16px}
  .rx-go{width:100%;padding:15px 20px;border-radius:14px}
  .rz-sprinkle img{max-width:44px;max-height:44px}
  /* sticky buy bar on the result */
  .rx-sticky{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:900;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:20px;background:#2a111e;color:#faf0dd;box-shadow:0 18px 40px -12px rgba(30,8,18,.65);transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .rx-sticky.show{transform:none}
  .rx-sticky b{display:block;font:400 20px/1.1 'Instrument Serif',Georgia,serif}
  .rx-sticky small{font:500 12.5px 'DM Sans',sans-serif;color:#e3c789}
  .rx-sticky a{flex:none;background:#c9a46a;color:#2a111e;border-radius:14px;padding:14px 18px;font:700 15px 'DM Sans',sans-serif;text-decoration:none}

  /* ---------- email pop-up (postcard) ---------- */
  #rx-pop[open]{gap:10px;padding:12px 0 calc(8px + env(safe-area-inset-bottom))}
  #rx-pop .rx-p4{box-sizing:border-box;width:calc(100vw - 20px);max-height:calc(100dvh - 70px);padding:4px;border-width:9px;border-image-slice:9;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .rx-p4-in{display:flex!important;flex-direction:column}
  .rx-p4-l{padding:18px 16px 4px!important;border:0!important}
  .rx-p4-r{padding:0 16px 14px!important}
  .rx-p4-top{position:absolute;right:16px;top:14px;margin:0}
  .rx-p4-stamp{width:58px;padding:5px}
  .rx-p4-stamp em{font-size:12px}
  #rx-pop .rx-p4 .eyebrow{font-size:10px;letter-spacing:.16em;max-width:calc(100% - 70px)}
  #rx-pop .rx-p4 h2{font-size:30px;margin:12px 0 10px}
  #rx-pop .rx-p4 p{font-size:14.5px;line-height:1.55;margin-bottom:8px}
  #rx-pop .rx-sigimg{width:170px;margin:0 0 6px -4px}
  #rx-pop .rx-care{margin-top:6px}
  #rx-pop .rx-p4-par{margin:8px 0 6px}
  .rx-p4 .rx-row{flex-direction:row;border-radius:0;padding:0 0 4px;gap:8px}
  .rx-p4 .rx-row input{font-size:19px;padding:8px 2px}
  .rx-p4 .rx-go{width:auto;padding:12px 16px;border-radius:30px;font-size:14px}
  #rx-pop .rx-ok{font-size:12.5px}
  .rx-skip{font-size:15px;padding:10px 16px}

  /* ---------- checkout ---------- */
  body.aud-6 .order-grid{padding-top:60px;padding-bottom:40px;gap:40px}
  body.aud-6 .order-grid>div:not(.grid-sea){grid-template-columns:1fr!important;gap:34px}
  body.aud-6 .order-grid .audio-invite{margin:70px 0 30px;padding:92px 20px 24px}
  body.aud-6 .aud-vinyl{top:-70px;width:140px;height:140px;margin-left:-70px}
  body.aud-6 .aud-sticker{width:92px;height:92px;right:-8px;bottom:-30px}
  body.aud-6 .aud-sticker b{font-size:32px}
  body.aud-6 .order-grid .audio-invite small{max-width:60%}
  body.aud-6 .order-grid .audio-invite .audio-tag{white-space:normal;padding-right:56px}
  body.aud-6 .order-grid .order-summary{margin:0;padding:30px 22px}
  .order-summary .button{display:block;text-align:center}

  /* ---------- effects ---------- */
  .fx-nudge{left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));padding:12px 40px 12px 12px}
  .fx-ribbon{height:4px}
  .fx-ribbon .knot{width:12px;height:12px;top:-4px}
}
@media (prefers-reduced-motion:reduce){.rx-sticky{transition:none}}
@media (max-width:759px){
  #rx-pop .rx-p4 h2{font-size:27px;line-height:1.04;margin:10px 0 8px}
  #rx-pop .rx-p4 p{font-size:13.5px;line-height:1.5;margin-bottom:6px}
  #rx-pop .rx-p4 .eyebrow{font-size:9.5px;letter-spacing:.14em;padding-bottom:6px}
  #rx-pop .rx-p4-l{padding:14px 14px 0!important}
  #rx-pop .rx-p4-r{padding:0 14px 10px!important}
  #rx-pop .rx-care{margin:4px 0 0;font-size:13.5px}
  #rx-pop .rx-sigimg{width:140px;margin:0 0 4px -4px}
  #rx-pop .rx-p4 .rx-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #rx-pop .rx-p4 .rx-form{gap:8px}
  .rx-p4 .rx-row input{font-size:18px;padding:6px 2px}
  .rx-p4 .rx-go{padding:11px 14px;font-size:13.5px}
  #rx-pop .rx-ok{font-size:12px;line-height:1.4}
  .rx-p4-stamp{width:50px;padding:4px}
}
/* stop iPhone zooming in when an email box is tapped (needs 16px+) */
@media (max-width:759px){input[type=email],input[type=text],textarea,select{font-size:max(16px,1em)!important}}
@media (max-width:759px){
  /* homepage letter: real text on a cream page instead of a tiny picture */
  /* homepage letter: same picture and flight as desktop, as wide as the phone allows */
  .letter-scene{padding-left:8px!important;padding-right:8px!important}
  .letter-scene .paper-image{max-width:calc(100vw - 16px)!important}
  /* bottom bar + quiz nudge: compact so they don't cover the page */
  .buy-bar{gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important}
  .buy-bar span{font-size:13.5px}
  .buy-bar .bb-mark{width:28px!important;height:28px!important}
  .buy-bar .button{white-space:nowrap;min-height:44px;padding:10px 14px;font-size:14.5px}
  .fx-nudge{bottom:calc(74px + env(safe-area-inset-bottom));padding:10px 38px 10px 10px;gap:10px}
  .fx-nudge img{width:34px;height:34px}
  .fx-nudge b{font-size:17px}
  .fx-nudge a{font-size:13px}
}
@media (max-width:759px){body.fx-4 .fx-rv{filter:none}}

/* Nov 10 · phones: one envelope, pinned at the top of the hero; the text scrolls up under it while the rope unties,
   then the letter rises out of it and flies down onto the letter page (same as desktop) */
@media (max-width:759px){
  .scroll-story{height:auto!important}
  .scroll-story .hero{position:relative!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column;overflow:visible!important;padding-top:0!important}
  .scroll-story .hero-art{order:0;position:sticky!important;top:0;z-index:3;height:42svh;display:flex!important;align-items:center;justify-content:center;margin:0 -24px!important;perspective:none;overflow:hidden;
    background:linear-gradient(180deg,#2a111e 0,#2c1220 82%,rgba(44,18,32,0) 100%)}
  .scroll-story .hero-copy{order:1;position:relative;z-index:1}
  .scroll-story .hero::after{content:"";display:block;order:3;height:75svh;flex:none}
  .scroll-story .hero-knot,.scroll-story .rope-canvas{width:122%!important;max-width:none!important;height:auto!important;max-height:40svh!important;object-fit:contain}
  .scroll-story .hero-art .rope-caption,.scroll-story .hero-art .mini-books,.scroll-story .hero-art>span{display:none!important}
}
@media (min-width:760px) and (min-height:950px){
  .scroll-story .hero-art{align-self:center}
  .scroll-story .hero-knot{max-height:none!important;width:135%!important;max-width:none!important;margin:0 -17.5%!important;height:clamp(390px,50vh,980px)!important;object-fit:contain;transform:rotate(-2deg)!important}
}

@media (max-width:900px){.letter-fly{display:block!important}}
@media (max-width:759px){body.audio-only .aud-sticker{right:16px!important;bottom:-30px!important;width:100px!important;height:100px!important}}
@media (max-width:759px){#rx-pop .rx-p4{position:relative} #rx-pop .rx-p4-mark{position:absolute!important;right:0;top:292px!important;bottom:auto!important;left:auto!important;width:112px;height:112px;padding:8px;transform:rotate(-12deg);background:rgba(255,250,240,.55);z-index:1;pointer-events:none} #rx-pop .rx-p4-mark b{font-size:15px;margin:3px 0} #rx-pop .rx-p4-mark i{font-size:7.5px}}
/* Nov 10 · phones: eyebrow fits one line */
@media (max-width:759px){
  .scroll-story .hero .eyebrow{font-size:10px!important;letter-spacing:.17em!important;white-space:nowrap}
}