/* SSFD change over the approved package: "Add to Home Screen" under the card, and the readable iPhone
   steps. Both sit outside the card and stay upright on portrait phones. The bar takes space only while
   it is showing (html.has-install), and the card shrinks to keep clear of it. */
:root{--install-bar:0px}
.has-install{--install-bar:68px}
.install-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;align-items:center;
  height:calc(var(--install-bar) + env(safe-area-inset-bottom,0px));padding:0 16px env(safe-area-inset-bottom,0px)}
.install-bar[hidden],.ios-steps[hidden]{display:none}
.install-btn{min-height:44px;padding:0 24px;border:0;border-radius:999px;background:#cda865;color:#141519;cursor:pointer;
  font:700 16px/1 "Zilla Slab",Rockwell,Georgia,serif;letter-spacing:.04em}
.install-btn:focus-visible,.ios-steps-done:focus-visible{outline:2px solid #f1e9d6;outline-offset:3px}
/* the card keeps clear of the bar */
.has-install .card-flip-host{bottom:calc(var(--install-bar) + env(safe-area-inset-bottom,0px))}
.has-install .card-flip{--w:min(760px,calc(100vw - 32px),calc((100svh - 32px - var(--install-bar)) * 1.72))}
@media (orientation:portrait) and (max-width:760px){
  .has-install .card-flip{--w:min(760px,calc(100svh - 36px - var(--install-bar)),calc((100vw - 24px) * 1.72))}
}
/* iPhone steps: plain readable text, upright, above the bar */
.ios-steps{position:fixed;left:12px;right:12px;bottom:calc(var(--install-bar) + 12px + env(safe-area-inset-bottom,0px));z-index:30;
  max-width:420px;max-height:calc(100svh - var(--install-bar) - 24px);overflow:auto;margin:0 auto;padding:16px 18px 14px;box-sizing:border-box;
  border:1px solid rgba(205,168,101,.45);border-radius:14px;background:#1a1814;color:#f1e9d6;box-shadow:0 18px 40px rgba(0,0,0,.6);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.ios-steps-title{margin:0 0 8px;font:700 17px/1.2 "Zilla Slab",Rockwell,Georgia,serif;color:#cda865}
.ios-steps ol{margin:0 0 10px;padding-left:22px}
.ios-steps li{margin-bottom:6px}
.ios-steps-note{margin:0 0 12px;font-size:13px;color:#a8a08f}
.ios-steps-done{display:block;width:100%;min-height:44px;border:0;border-radius:10px;background:#cda865;color:#141519;cursor:pointer;
  font:700 16px/1 "Zilla Slab",Rockwell,Georgia,serif}
/* short landscape screens: use the width so the steps fit without scrolling */
@media (orientation:landscape) and (max-height:500px){
  .ios-steps{max-width:min(680px,calc(100vw - 24px));padding:12px 16px 10px;font-size:15px;line-height:1.35}
  .ios-steps-title{margin-bottom:4px}
  .ios-steps li{margin-bottom:3px}
  .ios-steps-note{margin-bottom:8px}
}