/* Mobile portrait-first study. Loaded only through the <=760px media link.
   ?mobile=previous disables this sheet for the approved stacked comparison. */
:root{--gutter:24px;--portrait-height:max(520px,100svh);--caption-height:56px;
  --caption-rule:1px solid rgb(255 196 107 / 18%);
  --portrait-stage-height:min(calc((var(--portrait-height) - 90px - var(--caption-height)) * .94),145vw)}
#hero{height:auto;min-height:100svh;overflow:hidden;background:var(--paper)}
/* A wider canvas lets the unchanged .64 mobile anchor center in the portrait:
   .64 × 150% − 46% = 50%. The hero crops the outer margins, not the canvas. */
/* Reduce by 6%, then cap by width so tall phones keep both upper arms in view.
   Resize the drawing stage itself: the renderer still prepares sharp bitmaps. */
.product-stage{inset:calc(var(--portrait-height) - var(--caption-height) - var(--portrait-stage-height)) auto auto -46%;width:150%;
  height:var(--portrait-stage-height);overflow:visible;
  background:radial-gradient(ellipse 65% 65% at 64% 72%,rgba(255,205,140,.12),transparent 75%)}
/* Keep the backtype in viewport coordinates while the robot's canvas is wider. */
#backtype{inset:0 auto 0 30.666667%;width:66.666667%}
/* Fit the longest word inside the screen; all three retain one shared size. */
.bt-stack{top:0;left:3%;width:94%;height:100%;gap:0}
/* Reveal only a small cap of the letters above the head, with ALWAYS above them.
   The hero still clips the outer canvas edges; the stage allows this label above it. */
.always{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  align-self:auto;margin-left:0;font-size:10px;letter-spacing:.24em;white-space:nowrap}
.wordbox,#word{position:absolute;top:4.5%;left:0;width:100%;text-align:center}
.nav{left:var(--gutter);right:var(--gutter);top:16px;gap:16px}
.nav-links{gap:16px}
.nav-links a{font-size:10px;letter-spacing:.06em;white-space:nowrap}
.portrait-caption{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:var(--caption-height);margin-top:calc(var(--portrait-height) - var(--caption-height));
  padding:0 0 0 var(--gutter);background:#2a2520;border-block:var(--caption-rule);
  font:500 9px/1.6 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.portrait-caption>span:first-child{padding:12px 0}
.caption-arrow{align-self:stretch;display:grid;place-items:center;flex-shrink:0;
  width:calc(2 * var(--gutter) + 20px);border-left:var(--caption-rule);
  font:400 20px/1 var(--f-sans);color:var(--amber)}
.copy{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:100%;max-width:none;
  margin:0;min-height:calc(100svh - var(--caption-height));display:flex;flex-direction:column;justify-content:center;
  padding:48px var(--gutter) max(64px,env(safe-area-inset-bottom));background:#2a2520;scroll-margin-top:var(--caption-height)}
.copy .eyebrow{display:none}
h1{font-size:clamp(42px,11.5vw,72px);line-height:.96}
.copy h1 em{font-size:1.16em}
.sub{max-width:32ch;margin-top:16px;font-size:16px;line-height:1.65}
.cta-zone{margin-top:28px;gap:24px;scroll-margin-top:32px}
.cta{min-height:52px;padding:16px 24px 16px 40px;gap:30px}
.price-cue{max-width:34ch;font-size:12px;line-height:1.8}
.price-cue .availability-divider{display:none}
.price-cue .availability{display:block;margin-top:4px}
@media(max-width:360px){
  :root{--gutter:20px}
  .nav{gap:10px}.lockup-svg{width:58px;height:26px}
  .nav-links{gap:10px}.nav-links a{font-size:9px}
  .portrait-caption{font-size:8px}
  h1{font-size:40px}.sub{font-size:15px}
}