/* ============================================================
   Ravebotics.com — HI-FI SITE
   Built on the Ravebotics design tokens (colors_and_type.css +
   alt_blueprint.css). Flat color blocks, 2px black borders,
   pill buttons that invert on hover, Comfortaa, bead motifs.
   ============================================================ */

:root{
  --gutter:96px;
  --maxw:1280px;
}
html,body{margin:0}
body{background:var(--rb-bg); color:var(--rb-ink); overflow-x:hidden}
img{max-width:100%}
::selection{background:var(--rb-lime)}

/* full-window app surface */
.site{min-height:100vh; display:flex; flex-direction:column}
.viewport{flex:1; position:relative}
.rb-page{display:none}
.rb-page.active{display:block}

/* section + container helpers */
.sec{padding:var(--gutter); border-bottom:2px solid var(--rb-ink)}
.sec.pink{background:var(--rb-pink)}
.sec.lime{background:var(--rb-lime)}
.sec.ink{background:var(--rb-ink); color:#fff}
.sec.tight{padding-top:64px; padding-bottom:64px}
.sec .pink{background:var(--rb-pink)}
.sec .lime{background:var(--rb-lime)}
.wrap{max-width:var(--maxw); margin:0 auto}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0}
.ink .eyebrow{color:var(--rb-lime)}

h1,h2,h3,h4{margin:0; letter-spacing:-.02em; font-weight:700; line-height:1.0; text-wrap:balance}
.h-hero{font-size:clamp(48px,7vw,96px); line-height:.94; letter-spacing:-.03em}
.h-xl{font-size:clamp(40px,5.5vw,72px); line-height:.95}
.h-lg{font-size:clamp(32px,4vw,56px)}
.h-md{font-size:clamp(26px,3vw,40px)}
.lede{font-size:18px; line-height:1.55; margin:0; color:var(--rb-ink-70)}
.ink .lede{color:rgba(255,255,255,.78)}
.lede.lg{font-size:22px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
  font-family:var(--rb-font); font-weight:700; font-size:15px; letter-spacing:-.005em;
  padding:13px 24px; border:2px solid var(--rb-ink); border-radius:9999px;
  background:#fff; color:#000; cursor:pointer; text-decoration:none;
  transition:background 140ms var(--rb-ease-standard), color 140ms var(--rb-ease-standard), transform 80ms}
.btn:active{transform:scale(.97)}
.btn.lg{font-size:17px; padding:16px 32px}
.btn.xl{font-size:clamp(18px,2.2vw,26px); padding:clamp(18px,2.2vw,26px) clamp(34px,4vw,52px); border-width:2.5px}
.btn.primary{background:#000; color:#fff}
.btn.primary:hover{background:var(--rb-pink); color:#000}
.btn.pink{background:var(--rb-pink); color:#000}
.btn.pink:hover{background:#000; color:var(--rb-pink)}
.btn.lime{background:var(--rb-lime); color:#000}
.btn.lime:hover{background:#000; color:var(--rb-lime)}
.btn.ghost{background:#fff; color:#000}
.btn.ghost:hover{background:#000; color:#fff}
.ink .btn.ghost{background:transparent; color:#fff; border-color:#fff}
.ink .btn.ghost:hover{background:#fff; color:#000}
/* keep solid buttons visible on color fields whose hover bg would match the field */
.pink .btn.primary:hover{background:#fff; color:#000}
.ink .btn.lime:hover{background:#fff; color:#000}

/* chips & pills */
.chip{display:inline-flex; align-items:center; gap:6px; border:2px solid var(--rb-ink);
  border-radius:9999px; padding:7px 16px; font-size:14px; font-weight:600; background:#fff}

/* ---------- CARDS ---------- */
.card{border:2px solid var(--rb-ink); border-radius:16px; background:#fff;
  transition:transform 140ms var(--rb-ease-standard), box-shadow 140ms var(--rb-ease-standard)}
.card.pad{padding:28px}
.card.hover:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--rb-ink)}
.ink .card{border-color:#fff; background:rgba(255,255,255,.04)}

/* media block (bead-spelled placeholder tile) */
.media{border:2px solid var(--rb-ink); border-radius:16px; display:flex;
  align-items:center; justify-content:center; padding:28px; position:relative; overflow:hidden}
.media.pink{background:var(--rb-pink)} .media.lime{background:var(--rb-lime)} .media.white{background:#fff}
.media .cap{position:absolute; left:16px; bottom:14px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rb-ink-50)}
.ink .media{border-color:#fff}
/* obvious photo-placeholder treatment */
.media.ph{border-style:dashed; border-width:3px}
.media.ph::after{content:'placeholder'; position:absolute; top:12px; left:12px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:#000; color:#fff; padding:5px 11px; border-radius:9999px}
/* a real photo fills its .media frame (the box keeps its border + aspect-ratio) */
.media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* grids */
.grid{display:grid; gap:24px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:0}
.flex{display:flex} .aic{align-items:center} .jcb{justify-content:space-between}
.gap{gap:14px} .wrapf{flex-wrap:wrap}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.center{text-align:center}

/* string + bead divider */
.string-div{display:flex; align-items:center; gap:0}
.string-div .ln{flex:1; height:2px; background:var(--rb-ink)}
.ink .string-div .ln{background:#fff}

/* ---------- TOP NAV ---------- */
.topnav{position:sticky; top:0; z-index:50; background:#fff}
.topnav-inner{display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter) 18px 40px; max-width:var(--rb-content-wide-max,1440px); margin:0 auto}
.topnav .links{display:flex; gap:32px; align-items:center}
.topnav .links a{font-size:14px; font-weight:600; cursor:pointer; color:#000; text-decoration:none;
  position:relative; padding-bottom:4px}
.topnav .links a .u{position:absolute; left:0; right:0; bottom:-2px; height:2px; background:transparent}
.topnav .links a.on .u{background:#000}
.topnav .links a:hover .u{background:var(--rb-ink-30)}
.topnav .links a.on:hover .u{background:#000}
.topnav .cta{display:inline-flex; align-items:center; gap:8px; padding:9px 18px; white-space:nowrap;
  border:2px solid #000; border-radius:9999px; background:var(--rb-lime); color:#000; font-weight:700; font-size:13px; cursor:pointer}
.topnav .cta:hover{background:#000; color:var(--rb-lime)}
.topnav .string-line{border:none; height:2px; background:#000; margin:0}
.navtoggle{display:none}

/* ---------- MARQUEE ---------- */
.marquee{background:#fff; border-top:2px solid #000; border-bottom:2px solid #000; overflow:hidden; padding:14px 0}
.marquee .track{display:flex; gap:48px; white-space:nowrap; width:max-content; animation:rb-marquee 28s linear infinite}
.marquee .track span{font-size:22px; font-weight:700; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:48px}
.marquee .dot{display:inline-block; width:18px; height:18px; background:#000; border-radius:4px}
@keyframes rb-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marquee .track{animation:none} }

/* hero auto-scrolling photo library (right panel) */
.photo-scroller{width:min(420px,100%); height:clamp(320px,46vh,460px); overflow:hidden;
  border:2px solid #000; border-radius:16px; background:#fff;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.photo-track{display:flex; flex-direction:column; gap:14px; padding:14px; animation:photoScroll 16s linear infinite;
  will-change:transform; backface-visibility:hidden; transform:translateZ(0)}   /* GPU-composite so iOS doesn't freeze the loop after a repaint */
@keyframes photoScroll{ from{transform:translateY(0)} to{transform:translateY(-50%)} }
.photo{position:relative; flex:0 0 auto; aspect-ratio:4/3; border:2px dashed #000; border-radius:10px;
  background:var(--rb-bg); display:flex; align-items:center; justify-content:center}
.photo .cap{position:absolute; left:12px; bottom:10px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rb-ink-50)}
.photo::after{content:'placeholder'; position:absolute; top:10px; left:10px; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; background:#000; color:#fff; padding:3px 8px; border-radius:9999px}
/* real booth photos in the scroller: fill the frame, drop the placeholder dashes + badge */
.photo.shot{border-style:solid; overflow:hidden}
.photo.shot::after{content:none}
.photo.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
@media (prefers-reduced-motion: reduce){ .photo-track{animation:none} }

/* keep the hero readable on short viewports */
@media (max-height:760px){
  .sec.split .pink, .sec.split .lime{min-height:0; padding-top:40px; padding-bottom:40px}
}

/* ---------- FORMS ---------- */
.field{margin-bottom:18px}
.field label{display:block; font-size:14px; font-weight:700; margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--rb-font); font-size:16px; color:#000; background:#fff;
  padding:13px 16px; border:2px solid #000; border-radius:12px}
.field textarea{min-height:110px; resize:vertical}
.field .hint{font-size:13px; color:var(--rb-ink-50); margin-top:6px}
.field input::placeholder,.field textarea::placeholder{color:var(--rb-ink-30)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.formcard{background:#fff; color:#000; border:2px solid #000; border-radius:16px; padding:36px}

/* ---------- FOOTER ---------- */
.footer{background:#000; color:#fff; padding:64px var(--gutter) 32px}
.footer-cols{max-width:var(--rb-content-wide-max,1440px); margin:0 auto; display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; align-items:start}
.footer h4{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--rb-lime); margin:0 0 18px}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.footer a{color:#fff; text-decoration:none; cursor:pointer; font-size:14px}
.footer a:hover{color:var(--rb-lime)}
.footer .slogan{font-size:20px; font-weight:700; line-height:1.2; max-width:300px; margin:18px 0 0}
.footer .slogan .heart{color:var(--rb-pink)}
.bead-socials{display:flex; align-items:center; gap:8px; margin-top:24px}
.bead-socials a{display:block; width:70px; line-height:0; cursor:pointer; transition:transform 140ms var(--rb-ease-standard)}
.bead-socials a:hover{transform:translateY(-3px)}
.bead-socials svg{width:100%; height:auto; display:block; overflow:visible}
.footer-bottom{max-width:var(--rb-content-wide-max,1440px); margin:48px auto 0; padding-top:24px;
  border-top:2px solid rgba(255,255,255,.2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; color:rgba(255,255,255,.6)}
.footer-bottom a{color:rgba(255,255,255,.6); font-size:12px}

/* ============================================================
   SELLING POINTS / NUMBERED CARDS
   ============================================================ */
.num{font-size:48px; font-weight:700; letter-spacing:-.02em; color:var(--rb-pink); line-height:.9}
.ink .num{color:var(--rb-lime)}
.spcard h3{font-size:24px; margin:14px 0 10px}
.spcard p{margin:0}

/* ============================================================
   OPEN / CASH BAR TOGGLE
   ============================================================ */
.seg{display:inline-flex; border:2px solid #000; border-radius:9999px; overflow:hidden; background:#fff}
.seg button{border:0; background:transparent; padding:13px 30px; font-size:17px; font-weight:700; font-family:var(--rb-font); cursor:pointer; color:#000}
.seg button.on{background:#000; color:#fff}
.bar-explain .panel{display:none}
.bar-explain .panel.show{display:block}
.kvs{display:flex; flex-wrap:wrap; gap:10px 28px; font-size:15px; margin-top:14px}
.kvs b{font-weight:700; border-bottom:3px solid var(--rb-lime)}

/* ============================================================
   SIZE GUIDE
   ============================================================ */
.ring{border:3px solid #000; border-radius:50%; display:grid; place-items:center; background:#fff; margin:0 auto}
.ring.adult{width:190px; height:190px}
.ring.kids{width:140px; height:140px; background:var(--rb-lime)}
.ring .lab{text-align:center; font-weight:700; font-size:18px}
/* size guide: vertically center each card's ring+label so the two circles align (the adult ring is
   bigger, so without this the kids card sits higher than the adult card) */
#page-sizeguide .grid.g2 .card{display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:320px}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq details{border:2px solid #000; border-radius:14px; background:#fff; margin-bottom:14px; padding:0 22px; overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:20px 0; font-size:20px; font-weight:700;
  display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 auto; width:30px; height:30px; border:2px solid #000; border-radius:8px;
  display:grid; place-items:center; background:var(--rb-lime); font-size:20px; font-weight:700}
.faq details[open] summary .pm{background:var(--rb-pink)}
.faq .pm .ico::before{content:'+'}
.faq details[open] .pm .ico::before{content:'\2013'}
.faq .ans{padding:0 0 22px; font-size:16px; line-height:1.55; color:var(--rb-ink-70)}

/* ============================================================
   REVIEWS
   ============================================================ */
.stars{color:var(--rb-pink); font-size:22px; letter-spacing:3px}

/* ============================================================
   TRACKING STEPPER
   ============================================================ */
.stepper{display:flex; align-items:flex-start; margin:8px 0}
.stepper .step{flex:1; text-align:center}
.stepper .step .dot{width:40px; height:40px; border:2px solid #000; border-radius:10px;
  display:grid; place-items:center; margin:0 auto 10px; background:#fff; font-weight:700}
.stepper .step.done .dot{background:var(--rb-lime)}
.stepper .step.now .dot{background:var(--rb-pink)}
.stepper .step .lab{font-size:13px; font-weight:600}
.stepper .seg-l{height:2px; background:#000; flex:0 0 30px; margin-top:19px}
.stepper .seg-l.todo{background:var(--rb-ink-30)}
#trackResult{display:none}

/* legal */
.legal h3{font-size:24px; margin:30px 0 10px}
.legal p{font-size:16px; line-height:1.6; color:var(--rb-ink-70); margin:0 0 10px}

/* ============================================================
   BEAD STUDIO + DOORS + INTERSTITIAL
   ============================================================ */
#studioLayer,#doorLayer,#txLayer{position:fixed; inset:0; display:none}
/* 100dvh (dynamic viewport) so it fully covers on iOS — 100vh/inset:0 left a strip (the "opens 95%"
   gap that let the page below peek/scroll through). overflow:hidden clips the soft keyboard too. */
#studioLayer{z-index:200; overflow:hidden; top:0; bottom:auto; height:100dvh}
#doorLayer{z-index:210; pointer-events:none}
#txLayer{z-index:230; pointer-events:none; overflow:hidden}

/* doors — each holds a clone of the live page; they split apart to reveal the studio */
.door{position:absolute; left:0; right:0; height:50%; overflow:hidden; background:#fff;
  transition:transform .66s var(--rb-ease-emphasis); will-change:transform}
.door.top{top:0; box-shadow:0 12px 26px rgba(0,0,0,.22)}
.door.bot{bottom:0; box-shadow:0 -12px 26px rgba(0,0,0,.22)}
#doorLayer.open .door.top{transform:translateY(-101%)}
#doorLayer.open .door.bot{transform:translateY(101%)}
#doorLayer.notrans .door{transition:none}

/* page transition — the old page (a frozen live clone) wipes away top→down via clip-path while a dense
   R-bead curtain falls along the wipe line; the new page renders behind it. (reduced-motion is handled
   in JS, which skips the transition entirely.) */
#txLayer .tx-old{position:absolute; top:0; height:100vh; overflow:hidden; background:#fff;
  clip-path:inset(0 0 0 0); will-change:clip-path}
#txLayer .tx-old-inner{position:absolute; left:0; width:100%}
#txLayer.play-wipe .tx-old{animation:txWipe 1.65s var(--rb-ease-emphasis) forwards}
@keyframes txWipe{ from{clip-path:inset(0 0 0 0)} to{clip-path:inset(150% 0 0 0)} }
#txLayer .tx-curtain{position:absolute; top:0; left:0; width:100%;
  display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start;
  transform:translateY(calc(0vh - 50%)); will-change:transform}
#txLayer .tx-curtain .tx-rb{margin:-9px}
#txLayer.play-wipe .tx-curtain{animation:txFall 1.65s var(--rb-ease-emphasis) forwards}
@keyframes txFall{ from{transform:translateY(calc(0vh - 50%))} to{transform:translateY(calc(150vh - 50%))} }
#txLayer .tx-rb{display:block; line-height:0; animation:txTumble .62s linear infinite}
@keyframes txTumble{ from{transform:rotate(0deg)} to{transform:rotate(var(--spin,360deg))} }

/* faint "what's live" build stamp — fixed bottom-right, never blocks clicks, hidden under overlays */
/* build stamp — now lives inline in the footer, right of the privacy/terms links */
#siteVersion{pointer-events:none; user-select:none;
  font:600 10px/1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.05em; color:rgba(255,255,255,.4)}

/* white-label — ghostly marching-dashed outline title ("our brand is hidden") */
.wl-title{width:100%; max-width:820px; height:auto; display:block; margin-top:16px}
.wl-title text{font-family:var(--rb-font); font-weight:700; font-size:72px; letter-spacing:-1.5px}
.wl-title .wl-solid{fill:#fff; stroke:none}
.wl-title .wl-dash{fill:transparent; stroke:#fff; stroke-width:1.6; stroke-linejoin:round; paint-order:stroke;
  stroke-dasharray:5 7; animation:wlMarch 1.1s linear infinite}
@media (prefers-reduced-motion: reduce){ .wl-title .wl-dash{animation:none} }
@keyframes wlMarch{ to{ stroke-dashoffset:-24 } }

/* footer: current page link shown in green (nav keeps its underline) */
.footer a.here{color:var(--rb-lime)}

/* ultrawide: cap the site at a clean max and frame it with white side bars.
   The breakpoint and the cap are the SAME width (1920px) so the layout never snaps backwards —
   below it the site is full-bleed; at/above it the content holds at 1920 and the bars grow
   smoothly. (The old version triggered on aspect-ratio and capped at 1500px, so a wide window
   would scale past 1500 then jump *down* to 1500 — the jarring snap you noticed.) */
@media (min-width:1920px){
  body{background:#fff}
  .site{max-width:1920px; margin-inline:auto}
}

/* shipping — US tile-grid delivery map (states colored by days from Groton CT) */
.ship-map-wrap{display:grid; grid-template-columns:1.45fr .8fr; gap:36px; align-items:center}
@media (max-width:880px){ .ship-map-wrap{grid-template-columns:1fr} }
.us-tilemap{border:2px solid #000; border-radius:16px; background:#fff; padding:18px}
.us-tilemap svg{width:100%; height:auto; display:block}
.us-tilemap .st rect{stroke:#000; stroke-width:2; transition:fill .3s var(--rb-ease-standard)}
.us-tilemap .st text{font-family:var(--rb-font); font-weight:700; font-size:13px; pointer-events:none}
.ship-legend{display:flex; flex-direction:column; gap:10px; font-size:15px; font-weight:600}
.ship-legend .lg-row{display:flex; align-items:center; gap:10px}
.ship-legend .sw{width:22px; height:22px; border:2px solid #000; border-radius:5px; flex:0 0 auto}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{--gutter:48px}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--gutter:24px}
  .split{grid-template-columns:1fr}
  .g2,.g3,.g4,.row2{grid-template-columns:1fr}
  .topnav .links{display:none}
  .topnav .links.open{display:flex; position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; gap:20px; padding:24px var(--gutter); border-bottom:2px solid #000; z-index:60}
  /* all four menu items the SAME size + a bit bigger in the open hamburger (incl. the cta) */
  .topnav .links.open a, .topnav .links.open a.cta{ font-size:18px; line-height:1.1; }
  .topnav .links.open a.cta{ align-self:flex-start; }
  .navtoggle{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
    border:2px solid #000; border-radius:10px; background:#fff; cursor:pointer}
  /* shrink the logo a touch so its string can't run under the hamburger on narrow phones
     (scale keeps the wordmark's aspect; the layout box stays so the flex nav doesn't shift) */
  .topnav a[data-go="home"]{ transform:scale(.82); transform-origin:left center }
  .footer-cols{grid-template-columns:1fr 1fr}
}
/* narrow phones: the brand column's slogan keeps 2 columns from fitting, so stack to one */
@media (max-width:600px){
  .footer-cols{grid-template-columns:1fr; gap:36px}
  /* lead-form submit buttons go full-width so a long label (e.g. "request a wholesale quote →")
     can't overflow the form card on a phone */
  [data-lead-submit]{width:100%; justify-content:center}
}

/* ============================================================
   WEBSITE-ONLY STUDIO TWEAKS + DEMO FLAGS
   ============================================================ */
/* the web studio uses a full-page email screen, so hide the name-screen "log in with email"
   shortcut and the booth's cart "exit" button (the floating exit-studio button covers it) */
#studio-root #email-login, #studio-root #cart-exit{ display:none !important; }

/* web name screen: no on-screen keyboard — a transparent, focusable input overlays the stage so the
   device's own keyboard (physical on desktop, soft on mobile/tablet) drives the name; the .name-display
   still shows what's typed. Tapping the stage (re)focuses it to bring the keyboard up. */
#studio-root #name-kbd{ display:none !important; }
/* web: the name field is a VISIBLE input styled like the email screen's field (box + cursor + sample
   placeholder); the big .name-display is hidden since the input itself shows what's typed. ID selector
   (#name-kbd-input) so it beats the auto-generated `#studio-root .name-kbd-input{display:none}` in
   studio.css by specificity (studio.css loads after site.css). */
#studio-root .name-stage .name-display{ display:none; }   /* parent selector raises specificity above studio.css's #studio-root .name-display */
#studio-root #name-kbd-input{
  display:block; box-sizing:border-box; width:100%; max-width:440px; margin:14px auto 0;
  padding:18px 22px; font-family:'Comfortaa',sans-serif; font-size:24px; text-align:center;
  border:2px solid var(--bp-line); border-radius:12px;
  background:rgba(255,255,255,0.06); color:var(--bp-paper); outline:none; -webkit-appearance:none; appearance:none;
}
#studio-root #name-kbd-input::placeholder{ color:var(--bp-cyan-soft); opacity:0.65; }
#studio-root #name-kbd-input:focus{ border-color:var(--rb-lime); }

/* signed-in identity + sign-out (top-right; the floating exit-studio button is top-center, so no clash) */
#studio-root #rb-identity{ position:fixed; top:14px; right:16px; z-index:60; display:none; align-items:center; gap:10px; font-family:'Comfortaa',sans-serif; }
#studio-root #rb-identity .rb-id-label{ color:var(--bp-cyan-soft); font-size:13px; white-space:nowrap; }
#studio-root #rb-identity .rb-id-label b{ color:var(--bp-paper); font-weight:700; }
#studio-root #rb-signout{ font-family:'Comfortaa',sans-serif; font-size:12px; font-weight:700; letter-spacing:.02em; padding:7px 14px; border-radius:9999px; cursor:pointer; background:transparent; color:var(--bp-cyan-soft); border:2px solid var(--bp-line); }
#studio-root #rb-signout:hover{ color:#fff; border-color:var(--rb-lime); }

/* ============================================================
   MEET CAFFEINE — apple-style scroll-scrub film
   ============================================================ */
/* the tall track gives scroll distance; the sticky child pins the video full-screen while site.js maps
   scroll progress -> video.currentTime. The white sticky topnav (z-50) overlays the very top strip. */
.caffeine-film{ position:relative; height:320vh; background:#000; }
/* touch devices: momentum scrolling covers ~2000px in one thumb flick, which blew through the whole
   scrub instantly. A much taller track = more scroll per frame; the JS maps progress off the track
   height, so nothing else changes. Desktop (fine pointers, wide viewports) keeps 320vh. */
@media (pointer: coarse), (max-width: 600px){ .caffeine-film{ height:6000vh; } }   /* more scroll distance per frame — the scrub was still too fast on touch at 4000vh */
/* pin BELOW the nav (top = --cf-nav, the live nav height set by site.js) so the film is locked in place
   from the very first scroll — pinning at top:0 made it slide up a nav-height (cropping the top) first. */
.caffeine-film .cf-sticky{ position:sticky; top:var(--cf-nav,0px); height:calc(100vh - var(--cf-nav,0px));
  overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center; }
.caffeine-film #cf-video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
/* fixed to the viewport (not the sticky stage) so it's visible the instant the page opens, before any
   scroll — the stage hangs ~1 nav-height below the fold at scroll-top, which would hide an absolute hint */
/* absolute INSIDE the sticky stage (not fixed) — a fixed hint became relative to a transformed SPA
   ancestor (so it sat off-centre and floated/re-appeared down the page). Absolute keeps it centred
   over the film, fading + scrolling away with it. */
.caffeine-film .cf-hint{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:5;
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  opacity:.85; pointer-events:none; text-shadow:0 1px 10px rgba(0,0,0,.6); animation:cfHintBob 1.7s ease-in-out infinite; }
/* scroll-driven titles over the film (positioned + animated by site.js) */
.caffeine-film .cf-text{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.caffeine-film .cf-title{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:min(92vw,18ch); text-align:center; font-weight:800; color:#fff; line-height:1;
  font-size:clamp(40px,8vw,92px); letter-spacing:-0.02em; opacity:0;
  will-change:transform,opacity; text-shadow:0 4px 34px rgba(0,0,0,.55); }
.caffeine-film .cf-sub{ position:absolute; left:50%; top:calc(50% + 56px); transform:translateX(-50%);
  max-width:min(88vw,40ch); text-align:center; color:#fff; line-height:1.4;
  font-size:clamp(15px,2.1vw,21px); opacity:0;
  will-change:transform,opacity; text-shadow:0 2px 16px rgba(0,0,0,.6); }
@keyframes cfHintBob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }
/* phones: bump "meet caffeine" + its subtext (they read small on a narrow screen) */
@media (max-width:600px){
  .caffeine-film .cf-title{ font-size:clamp(52px,15vw,80px); }
  .caffeine-film .cf-sub{ font-size:18px; top:calc(50% + 64px); max-width:84vw; }
}
/* reduced motion: no tall scrub track — just show the opening frame, page flows normally */
@media (prefers-reduced-motion: reduce){ .caffeine-film{ height:100vh; } .caffeine-film .cf-hint{ animation:none; } }

/* the floating top-center "exit studio" button sits over the entry screens' centered step-annotation
   — reserve space at the top of those two screens so the text clears the button (web only) */
#studio-root #screen-name, #studio-root #screen-email{ padding-top:46px; }

/* phones: the top-center "exit studio" button collides with the studio's own top controls
   (back arrow, ? help, size segment, "crafting with <name>"). Tuck it into the top-right
   corner as a compact pill so it clears everything; "studio" is dropped to save width. */
@media (max-width:600px){
  /* !important beats the button's inline style="top/left/transform" (inline > stylesheet) */
  /* the exit control becomes a small circular red ✕ at the TOP-LEFT (browser-familiar), so it
     can never collide with the designer's size selector or the identity chip on the right.
     The studio's own top bars get left clearance via .env-web .kbar/.designer-top padding. */
  #studioExit{
    top:calc(env(safe-area-inset-top, 0px) + 10px) !important; left:10px !important; right:auto; transform:none !important;
    width:40px; height:40px; padding:0; border-width:2px; gap:0; border-radius:9999px;
    background:#d92b2b; color:#fff; justify-content:center;
  }
  #studioExit:hover{ background:#000; color:#fff; }
  #studioExit{ font-size:0; }                 /* hide the original text node */
  #studioExit::before{ content:'✕'; font-size:17px; font-weight:700; line-height:1; }
  /* the entry screens no longer need the top-center clearance (button is in the corner now) */
  #studio-root #screen-name, #studio-root #screen-email{ padding-top:0; }
  /* reserve right space in the top bars so their content (the step annotation, the workbench
     greet) doesn't run under the top-right exit pill */
  #studio-root #screen-name .kbar, #studio-root #screen-email .kbar,
  #studio-root #screen-cart .kbar, #studio-root #screen-checkout .kbar{ padding-right:88px; }
  /* LEFT clearance for the top-left exit ✕: the scoped per-screen ".kbar{padding:…16px}" rule
     gains an extra #studio-root id when scoped, out-specifying studio.css's env-web left-pad — so
     the back button slid under the ✕ (notably the SAVE screen). Force it here (2 ids + !important). */
  #studio-root #screen-name .kbar, #studio-root #screen-email .kbar,
  #studio-root #screen-save .kbar, #studio-root #screen-cart .kbar{ padding-left:58px !important; }
  /* drop the "step 1/2 · who's crafting" / "step 2/3 · your email" / "step 2/2 · final check" labels
     on phones — they crowd the top bar and the short flow is self-evident */
  #studio-root #screen-name .kbar .annot,
  #studio-root #screen-email .kbar .annot,
  #studio-root #screen-checkout .sheet-head .eyebrow{ display:none !important; }
  /* ── back / ✕ ALIGNMENT (#18 name, #19 order) ─────────────────────────────
     An in-flow back button drifted BELOW the fixed ✕ on iOS (the notch's safe-area pushes in-flow
     content down while the fixed ✕ doesn't move). Pin each screen's back to the SAME fixed top +
     safe-area as the ✕ — one coordinate system → they always line up, 40×40 to match. */
  #studio-root #screen-name .kbar .btn-arrow-back,
  #studio-root #screen-save .kbar .btn-arrow-back,
  #studio-root #screen-email .kbar .btn-arrow-back,
  #studio-root #screen-checkout .sheet-head .btn-arrow-back{
    position:fixed; top:calc(env(safe-area-inset-top, 0px) + 10px); left:58px; z-index:61;
    width:40px; height:40px; font-size:18px;
  }
  /* the back-less kbars collapse; screen content clears the fixed ✕+back row at the top */
  #studio-root #screen-name .kbar, #studio-root #screen-save .kbar, #studio-root #screen-email .kbar{
    min-height:0; padding-top:0; padding-bottom:0;
  }
  #studio-root #screen-name .name-stage, #studio-root #screen-save .name-stage,
  #studio-root #screen-email .name-stage{ padding-top:calc(env(safe-area-inset-top, 0px) + 52px) !important; }
  /* !important beats studio.css's scoped #studio-root.env-web rule (extra class = higher specificity) */
  #studio-root #screen-checkout .sheet{ padding-top:calc(env(safe-area-inset-top, 0px) + 54px) !important; }
  #studio-root #screen-checkout .sheet-head{ padding-left:0 !important; }
  /* let the entry-screen step annotation ellipsize inside that reserved space rather than
     running its tail under the exit pill */
  #studio-root #screen-name .kbar .annot, #studio-root #screen-email .kbar .annot,
  #studio-root #screen-checkout .kbar .greet{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* identity chip owns the top-right corner now (the exit ✕ moved to the top-left) */
  #studio-root #rb-identity{ top:10px; right:8px; }
  /* the start screen's language globe is also top-right — slide it left of the exit pill so the
     two don't stack (the exit pill is ~78px wide at right:8px) */
  #studio-root #screen-start .lang-globe{ right:96px; }
}

/* a loud "this isn't wired up yet / demo only" flag for forms that don't submit anywhere */
.demo-flag{ display:inline-flex; align-items:center; gap:6px; color:#c81e6b; background:#ffe3f0;
  border:2px solid #c81e6b; border-radius:9999px; font-size:12px; font-weight:700; letter-spacing:.03em;
  padding:6px 14px; margin:0 0 18px; }
.demo-flag::before{ content:'⚠'; }
.ink .demo-flag{ background:#3a0f24; }
/* "(optional)" hint next to a form label */
.field label .opt{ color:var(--rb-ink-50); font-weight:600; font-size:12px; }

/* ============================================================
   MOBILE DECLUTTER (founder pass, 2026-06-11) — phones only
   ============================================================ */
/* book us: chips wrap centered + balanced instead of one long line + an orphan */
.chips-balance{ justify-content:flex-start; max-width:460px }
@media (max-width:600px){
  /* the scrolling marquee reads as noise on a phone — gone */
  .marquee{ display:none }
  /* hero CTAs: equal, full-width, same height (they wrapped to odd sizes) */
  #page-home .sec.split .flex.gap.wrapf{ flex-direction:column; align-items:stretch }
  #page-home .sec.split .flex.gap.wrapf .btn{ width:100%; justify-content:center; padding:18px 24px; font-size:19px }
  /* selling-point cards: headline-only on phones (the 05 wholesale link stays) */
  .spcard .lede.m-hide{ display:none }
  .spcard{ padding:20px }
  .spcard .num{ margin-bottom:6px }
  /* book us: hide the "what showing up looks like" section entirely */
  .m-hide-sec{ display:none }
  /* white label: keep the headline svg + lede, drop the three card paragraphs, tighten */
  #page-bookus .sec.ink .grid.g3 .card .lede{ display:none }
  #page-bookus .sec.ink .grid.g3{ gap:12px }
  #page-bookus .sec.ink .grid.g3 .card.pad{ padding:16px 18px }
  #page-bookus .sec.ink .lede.lg{ font-size:17px }
  .chips-balance{ justify-content:center; max-width:none }
  /* auto-hiding top nav: reclaim the screen while reading; reappears on any upward scroll */
  .topnav{ transition:transform .25s ease }
  .topnav.navhide{ transform:translateY(-100%) }
}

/* while the studio overlay is open the page behind must not scroll (mobile overscroll was
   peeking the marketing footer "behind" the studio at the end of studio scrollers) */
body.studio-open{ overflow:hidden; overscroll-behavior:none; }