:root{
  --paper:#F3EFE6;--ink:#151515;--blue:#2357D9;--red:#D94A3D;--yellow:#F3C948;--white:#fff;
  --border:4px solid var(--ink);--shadow:8px 8px 0 var(--ink);--max:1380px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-weight:500}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.skip-link{position:fixed;left:12px;top:-60px;background:#fff;border:3px solid var(--ink);padding:10px;z-index:999}.skip-link:focus{top:12px}
.site-header{height:84px;position:sticky;top:0;z-index:50;background:rgba(243,239,230,.96);border-bottom:var(--border);display:flex;align-items:center;gap:28px;padding:0 max(22px,4vw);backdrop-filter:blur(8px)}.brand{width:150px;display:block}.brand img{width:100%;height:auto}.desktop-nav{display:flex;gap:28px;margin-left:auto}.desktop-nav a{font:800 12px Arial;letter-spacing:.08em}.desktop-nav a:hover{color:var(--blue)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:3px solid var(--ink);padding:15px 22px;font:900 12px Arial;letter-spacing:.09em;box-shadow:5px 5px 0 var(--ink);transition:transform .18s ease-out,box-shadow .18s ease-out;background:#fff}.button:hover{transform:translateY(-2px)}.button:active{transform:translate(3px,3px);box-shadow:none}.button-blue{background:var(--blue);color:#fff}.button-outline{background:var(--paper)}.button-small{padding:11px 15px;font-size:10px}.button-large{padding:18px 28px;font-size:14px}
.hero{min-height:calc(100vh - 84px);display:grid;grid-template-columns:1.02fr .98fr;border-bottom:var(--border)}.hero-copy{padding:clamp(65px,8vw,120px) clamp(24px,6vw,95px);border-right:var(--border);display:flex;flex-direction:column;justify-content:center}.eyebrow{font:900 11px Arial;letter-spacing:.16em;display:flex;align-items:center;gap:9px;margin:0 0 28px}.eyebrow.light{color:#fff}.dot{width:11px;height:11px;display:inline-block;border:2px solid var(--ink)}.dot.yellow{background:var(--yellow)}.dot.blue{background:var(--blue)}.dot.red{background:var(--red)}.eyebrow.light .dot{border-color:#fff}.hero h1,.section h2,.final-copy h2{font-family:"Arial Black",Arial,sans-serif;font-weight:900;line-height:.86;letter-spacing:-.055em;margin:0;text-transform:uppercase}.hero h1{font-size:clamp(66px,8.8vw,146px)}.hero h1 span{color:var(--blue)}.hero-lede{font-size:clamp(18px,1.6vw,25px);line-height:1.45;max-width:690px;margin:30px 0}.hero-actions{display:flex;gap:16px;flex-wrap:wrap}.micro-proof{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;font-size:10px;letter-spacing:.09em}.hero-stage{position:relative;min-height:630px;overflow:hidden;background:var(--blue);display:flex;align-items:center;justify-content:center;padding:60px}.shape{position:absolute;border:4px solid var(--ink)}.shape-yellow{width:190px;height:190px;border-radius:50%;background:var(--yellow);top:8%;left:5%}.shape-red{width:135px;height:135px;background:var(--red);right:7%;bottom:8%;transform:rotate(17deg)}.shape-blue{width:210px;height:48px;background:#fff;bottom:15%;left:-35px;transform:rotate(-12deg)}
.qubby-device{position:relative;width:min(370px,100%);isolation:isolate}.device-body{width:100%;height:auto}.device-screen{position:absolute;left:27.2%;width:45.6%;top:32.15%;height:27.75%;z-index:3;background:#000;border-radius:13%/21%;overflow:hidden;display:flex;align-items:center;justify-content:center}.device-screen img{width:100%;height:100%;object-fit:contain;background:#000;image-rendering:pixelated;image-rendering:crisp-edges}.qubby-device--hero{width:min(590px,88%);transform:rotate(1deg);filter:drop-shadow(11px 12px 0 rgba(21,21,21,.9))}.ticker{overflow:hidden;background:var(--yellow);border-bottom:var(--border);white-space:nowrap}.ticker div{font:900 15px "Arial Black";letter-spacing:.1em;padding:14px 0;animation:ticker 24s linear infinite;width:max-content}@keyframes ticker{to{transform:translateX(-50%)}}
.section{padding:clamp(70px,8vw,120px) max(22px,5vw);border-bottom:var(--border)}.section h2{font-size:clamp(48px,6.6vw,104px)}
.alive-section{background:var(--ink);color:#fff;overflow:hidden}.section-head{max-width:990px}.section-head>p:last-child{font-size:19px;line-height:1.55;max-width:760px}.alive-slider{margin-top:60px;overflow:hidden;width:calc(100% + max(22px,5vw));padding:8px 0 16px}.alive-track{display:flex;gap:22px;will-change:transform}.demo-card{position:relative;flex:0 0 calc((100vw - 2 * max(22px,5vw) - 44px)/3);max-width:470px;min-width:300px;border:4px solid #fff;padding:22px;color:var(--ink);box-shadow:8px 8px 0 #fff}.demo-yellow{background:var(--yellow)}.demo-blue{background:var(--blue);color:#fff}.demo-red{background:var(--red);color:#fff}.demo-number{position:absolute;top:14px;left:15px;font:900 11px Arial;letter-spacing:.14em;z-index:4}.demo-card .qubby-device{width:100%;margin:15px auto 0}.demo-card h3{font:900 25px "Arial Black";margin:5px 0 8px}.demo-card p{margin:0;line-height:1.45}.demo-blue .device-body,.demo-red .device-body{mix-blend-mode:normal}.focus-copy h2 span{color:var(--yellow)}.focus-copy>p:not(.eyebrow){font-size:20px;line-height:1.55;max-width:690px}.qubby-device--focus{width:min(560px,75%);z-index:2}.more-icon{font-size:72px;line-height:1}.more-blue{background:var(--blue);color:#fff}.more-yellow{background:var(--yellow)}.more-white{background:#fff}.trust-copy>p:last-child{font-size:19px;line-height:1.55}.proof-accent{background:var(--yellow);color:var(--ink)}
.faq-section{display:grid;grid-template-columns:.65fr 1.35fr;gap:7vw;align-items:start;background:#fff}.faq-list details{background:#fff;border:var(--border);box-shadow:5px 5px 0 var(--ink);margin-bottom:16px}.faq-list summary{cursor:pointer;list-style:none;padding:21px;font-weight:900;letter-spacing:.04em;display:flex;justify-content:space-between;gap:18px}.faq-list summary::-webkit-details-marker{display:none}.faq-list details[open] summary{background:var(--red);color:#fff}.faq-list details p{margin:0;padding:21px;background:#FFF5C8;border-top:var(--border);line-height:1.55}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list summary span{transition:transform .2s ease-out}
.final-cta{min-height:760px;position:relative;overflow:hidden;background:var(--yellow);border-bottom:var(--border);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:70px 6vw}.final-shape{position:absolute;border:4px solid var(--ink)}.final-circle{width:330px;height:330px;border-radius:50%;background:var(--blue);left:-100px;top:-100px}.final-square{width:290px;height:290px;background:var(--red);right:-90px;bottom:-90px;transform:rotate(20deg)}.final-device{position:relative;z-index:2;display:flex;justify-content:center}.qubby-device--final{width:min(570px,86%);filter:drop-shadow(11px 12px 0 rgba(21,21,21,.9))}.final-copy{position:relative;z-index:3}.final-copy h2{font-size:clamp(64px,8vw,126px);margin-bottom:35px}.site-footer{background:var(--ink);color:#fff;padding:55px max(22px,5vw) 28px}.footer-logo{display:block;width:200px}.footer-logo img{width:100%;height:auto;filter:brightness(0) invert(1)}.mobile-buy{display:none}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .6s ease-out,transform .6s ease-out}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:1050px){.desktop-nav{display:none}.hero-copy{border-right:0;border-bottom:var(--border)}.hero-stage{min-height:620px}.demo-card{flex-basis:calc((100vw - 2 * max(22px,5vw) - 22px)/2)}.final-device{order:2}.final-copy{order:1}.final-cta{text-align:center}.final-copy .eyebrow{justify-content:center}}
@media(max-width:680px){:root{--border:3px solid var(--ink);--shadow:5px 5px 0 var(--ink)}.site-header{height:70px;padding:0 14px}.brand{width:112px}.site-header .button-small{padding:9px 10px;font-size:9px;box-shadow:3px 3px 0 var(--ink)}.section{padding:65px 18px}.hero{min-height:auto}.hero-copy{padding:60px 18px}.hero h1{font-size:61px}.hero-stage{min-height:480px;padding:35px 15px}.qubby-device--hero{width:95%}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.shape-yellow{width:135px;height:135px}.shape-red{width:95px;height:95px}.alive-slider{width:calc(100% + 18px)}.demo-card{flex-basis:calc(100vw - 54px);min-width:0;padding:18px}.demo-card h3{font-size:23px}.qubby-device--focus{width:90%}.final-cta{min-height:730px;padding:70px 18px}.final-copy h2{font-size:65px}.mobile-buy{display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:60;background:var(--blue);color:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:14px 18px;justify-content:space-between;font:900 11px Arial;letter-spacing:.1em}.site-footer{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker div{animation:none}.reveal{opacity:1;transform:none;transition:none}.button{transition:none}.alive-slider{overflow-x:auto}.alive-track{transform:none!important;transition:none!important}}


/* V0.2.2 overrides */
.demo-card{display:flex;flex-direction:column}
.demo-visual{position:relative;margin:15px 0 10px;aspect-ratio:1/1;background:#f6f0e8;border:4px solid rgba(255,255,255,.88);overflow:hidden}
.demo-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demo-card .qubby-device{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:78%;max-width:340px;margin:0;z-index:2}
.demo-card .device-screen img{image-rendering:pixelated}
.demo-card p{margin-top:auto}
.alive-track{align-items:stretch}
@media(max-width:680px){.demo-card .qubby-device{width:76%;bottom:8%}.demo-visual{margin-top:16px}}

/* V0.2.4 — transparent Qubby body inside desk-scene cards */
.demo-visual .qubby-device::after{
  content:"";
  position:absolute;
  left:19%;
  right:19%;
  bottom:1.5%;
  height:7%;
  background:rgba(38,28,18,.18);
  filter:blur(8px);
  border-radius:50%;
  z-index:-1;
}
.demo-visual .device-body{
  display:block;
  background:transparent;
}

/* V0.2.5 — seamless continuously moving Qubby behavior marquee */
.alive-slider{
  overflow:hidden;
}
.alive-track{
  width:max-content;
  align-items:stretch;
  transform:translate3d(0,0,0);
}
.alive-track .demo-card{
  flex-shrink:0;
}
@media(prefers-reduced-motion:reduce){
  .alive-slider{overflow-x:auto}
  .alive-track{width:max-content;transform:none!important}
}


/* V0.2.7 — wood-desk scenes and stronger grounded placement */
.demo-card .qubby-device{bottom:4.5%}
@media(max-width:680px){.demo-card .qubby-device{bottom:4.5%}}
.demo-visual .qubby-device::after{
  left:22%;
  right:22%;
  bottom:2.2%;
  height:5.2%;
  background:rgba(54,40,24,.22);
  filter:blur(5px);
}


/* V0.2.8 — Bauhaus product stages for all seven Qubby behavior cards */
.demo-visual{
  background:var(--paper);
  isolation:isolate;
}
.demo-visual .bauhaus-stage-art{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    linear-gradient(to bottom, #F7F1E7 0 72%, #EEE5D6 72% 100%);
}

/* Explicit desk/platform: a hard geometric slab with a clear top edge. */
.demo-visual .bauhaus-stage-art::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:7%;
  height:16%;
  background:#F3EFE6;
  border:4px solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
  z-index:1;
}

/* Main decorative geometry behind Qubby. */
.demo-visual .bauhaus-stage-art::after{
  content:"";
  position:absolute;
  width:29%;
  aspect-ratio:1;
  border:4px solid var(--ink);
  z-index:0;
}

/* Qubby sits directly on the stage instead of floating in open space. */
.demo-card .qubby-device{
  bottom:20.5%;
  width:72%;
  max-width:320px;
  z-index:3;
}

/* Tight contact shadow directly under the device. */
.demo-visual .qubby-device::after{
  content:"";
  position:absolute;
  left:23%;
  right:23%;
  bottom:-1.2%;
  height:4.5%;
  background:rgba(21,21,21,.33);
  filter:blur(4px);
  border-radius:50%;
  z-index:-1;
}

/* Different Bauhaus compositions per card while preserving one visual system. */
.stage-a .bauhaus-stage-art::after{
  left:8%; top:9%; border-radius:50%;
  background:var(--blue);
}
.stage-a .bauhaus-stage-art::before{
  background:#FFF8DD;
}

.stage-b .bauhaus-stage-art::after{
  right:9%; top:10%;
  background:var(--yellow);
  transform:rotate(15deg);
}
.stage-b .bauhaus-stage-art::before{
  background:#E8EEFF;
}

.stage-c .bauhaus-stage-art::after{
  left:10%; top:12%;
  background:var(--red);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.stage-c .bauhaus-stage-art::before{
  background:#FFE8E4;
}

.stage-d .bauhaus-stage-art::after{
  right:8%; top:8%; border-radius:50%;
  background:var(--red);
}
.stage-d .bauhaus-stage-art::before{
  background:#FFF5CC;
}

.stage-e .bauhaus-stage-art::after{
  left:8%; top:10%;
  background:var(--blue);
  transform:rotate(45deg);
}
.stage-e .bauhaus-stage-art::before{
  background:#E7EDFF;
}

.stage-f .bauhaus-stage-art::after{
  right:10%; top:12%;
  background:var(--yellow);
  border-radius:50%;
}
.stage-f .bauhaus-stage-art::before{
  background:#FFE9E4;
}

.stage-g .bauhaus-stage-art::after{
  left:10%; top:10%;
  background:var(--blue);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.stage-g .bauhaus-stage-art::before{
  background:#FFF7D7;
}

/* Small secondary geometric accents. */
.stage-a .demo-visual::after,
.stage-c .demo-visual::after,
.stage-e .demo-visual::after,
.stage-g .demo-visual::after{
  content:"";
  position:absolute;
  right:8%;
  top:13%;
  width:8%;
  aspect-ratio:1;
  background:var(--red);
  border:3px solid var(--ink);
  transform:rotate(45deg);
  z-index:1;
}
.stage-b .demo-visual::after,
.stage-d .demo-visual::after,
.stage-f .demo-visual::after{
  content:"";
  position:absolute;
  left:9%;
  top:14%;
  width:9%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--blue);
  border:3px solid var(--ink);
  z-index:1;
}

@media(max-width:680px){
  .demo-card .qubby-device{
    width:70%;
    bottom:20.5%;
  }
  .demo-visual .bauhaus-stage-art::before{
    left:6%;
    right:6%;
    height:16%;
    border-width:3px;
    box-shadow:5px 5px 0 var(--ink);
  }
}


/* V0.2.9 — stronger grounding: Qubby visually sits on the stage */
.demo-visual .bauhaus-stage-art::before{
  bottom:6.5%;
  height:17.5%;
}
.demo-card .qubby-device{
  bottom:16.2%;
  width:72%;
}
.demo-visual .qubby-device::after{
  left:25%;
  right:25%;
  bottom:-0.3%;
  height:3.1%;
  background:rgba(21,21,21,.42);
  filter:blur(2.2px);
}
@media(max-width:680px){
  .demo-card .qubby-device{
    bottom:16.2%;
    width:70%;
  }
  .demo-visual .bauhaus-stage-art::before{
    bottom:6.5%;
    height:17.5%;
  }
}


/* V0.2.10 — remove hover shadow and make Qubby rest on the platform with a tiny overlap */
.demo-visual .bauhaus-stage-art::before{
  bottom:6.5%;
  height:17.5%;
}
.demo-card .qubby-device{
  bottom:23.2%;
  width:72%;
}
.demo-visual .qubby-device::after{
  display:none;
  content:none;
}
@media(max-width:680px){
  .demo-card .qubby-device{
    bottom:23.2%;
    width:70%;
  }
  .demo-visual .bauhaus-stage-art::before{
    bottom:6.5%;
    height:17.5%;
  }
}


/* V0.2.11 — tight-cropped Qubby body only; no other design changes */
.demo-card .device-screen{
  left:14.0285%;
  top:25.1451%;
  width:71.5675%;
  height:43.4981%;
}
.demo-card .qubby-device{
  bottom:6.3%;
}
@media(max-width:680px){
  .demo-card .qubby-device{
    bottom:6.3%;
  }
}


/* V0.2.12 — restore original apparent Qubby scale and sit on platform top edge */
.demo-card .qubby-device{
  width:46%;
  bottom:23.5%;
}
@media(max-width:680px){
  .demo-card .qubby-device{
    width:46%;
    bottom:23.5%;
  }
}


/* V0.2.13 — slightly larger Qubby and a tiny lower placement */
.demo-card .qubby-device{
  width:50%;
  bottom:23.0%;
}
@media(max-width:680px){
  .demo-card .qubby-device{
    width:50%;
    bottom:23.0%;
  }
}


/* V0.2.14 — remove the flat platform; keep Qubby size/position unchanged */
.demo-visual .bauhaus-stage-art{
  background:#F7F1E7;
}
.demo-visual .bauhaus-stage-art::before{
  display:none;
  content:none;
}
.demo-visual .qubby-device::after{
  display:none;
  content:none;
}


/* V0.2.15 — intro/value section replaces the early purchase snapshot */
.qubby-intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,90px);
  align-items:stretch;
  background:#fff;
  padding-top:clamp(80px,9vw,135px);
  padding-bottom:clamp(80px,9vw,135px);
}
.intro-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.intro-copy h2{
  margin-bottom:28px;
  max-width:850px;
}
.intro-lede{
  max-width:690px;
  font-size:clamp(18px,1.6vw,23px);
  line-height:1.55;
  margin:0;
}
.intro-signals{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:34px;
}
.intro-signals span{
  border:3px solid var(--ink);
  padding:10px 13px;
  font:900 10px Arial,sans-serif;
  letter-spacing:.12em;
  background:var(--paper);
}
.intro-signals span:nth-child(2){background:var(--blue);color:#fff}
.intro-signals span:nth-child(3){background:var(--yellow)}

.intro-stage{
  min-height:590px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:var(--border);
  box-shadow:var(--shadow);
}
.qubby-device--intro{
  width:min(500px,72%);
  z-index:4;
  transform:rotate(1deg);
}
.intro-shape{
  position:absolute;
  border:4px solid var(--ink);
  z-index:1;
}
.intro-circle{
  width:210px;
  height:210px;
  border-radius:50%;
  background:var(--blue);
  left:-55px;
  top:-45px;
}
.intro-square{
  width:155px;
  height:155px;
  background:var(--red);
  right:-35px;
  bottom:45px;
  transform:rotate(18deg);
}
.intro-line{
  width:220px;
  height:34px;
  background:var(--yellow);
  border-left:0;
  right:8%;
  top:13%;
  transform:rotate(-5deg);
}
.intro-note{
  position:absolute;
  left:22px;
  bottom:20px;
  margin:0;
  padding:10px 12px;
  border:3px solid var(--ink);
  background:#fff;
  font:900 10px Arial,sans-serif;
  letter-spacing:.08em;
  line-height:1.35;
  z-index:5;
}

@media(max-width:1050px){
  .qubby-intro{
    grid-template-columns:1fr;
  }
  .intro-stage{
    min-height:560px;
  }
}
@media(max-width:680px){
  .qubby-intro{
    padding-top:65px;
    padding-bottom:65px;
  }
  .intro-stage{
    min-height:430px;
  }
  .qubby-device--intro{
    width:78%;
  }
  .intro-circle{
    width:135px;
    height:135px;
  }
  .intro-square{
    width:100px;
    height:100px;
  }
  .intro-line{
    width:145px;
    height:26px;
  }
  .intro-note{
    left:14px;
    bottom:14px;
    font-size:8px;
  }
}


/* ============================================================
   V0.2.20 — RESPONSIVE MOBILE HERO REBUILD
   One fluid layout from small phones through tablets.
   No pixel-positioned Qubby, no mobile hero stage patches.
   ============================================================ */

.hero-heading-row{
  display:contents;
}

.qubby-device--hero-mobile{
  display:none;
}

@media (max-width:767px){
  /* Header: logo only. Purchase remains available through the
     persistent bottom CTA. */
  .site-header{
    min-height:72px;
    padding:16px clamp(16px,4.5vw,24px);
  }

  .site-header .desktop-nav,
  .site-header nav,
  .site-header .button,
  .site-header .header-cta,
  .site-header a[href="#final-buy"].button{
    display:none !important;
  }

  /* The hero is ordinary document flow. */
  .hero{
    display:block;
    min-height:auto;
    background:var(--paper);
    overflow:hidden;
  }

  .hero-copy{
    display:flex;
    flex-direction:column;
    padding:
      clamp(32px,8vw,54px)
      clamp(16px,5vw,28px)
      clamp(34px,8vw,52px);
    border:0;
  }

  /* Hide the desktop-only eyebrow/origin line. */
  .hero-copy .eyebrow{
    display:none;
  }

  /* This is the core of the new architecture:
     headline + device share one intrinsic grid. */
  .hero-heading-row{
    display:grid;
    grid-template-columns:minmax(0, 1.45fr) minmax(92px, .78fr);
    align-items:center;
    column-gap:clamp(10px,3.5vw,22px);
    width:100%;
  }

  .hero-copy h1{
    min-width:0;
    width:auto;
    margin:0;
    padding:0;
    font-size:clamp(3rem, 14.8vw, 5.15rem);
    line-height:.84;
    letter-spacing:-.055em;
    text-align:left;
  }

  .qubby-device--hero-mobile{
    display:block;
    width:100%;
    max-width:clamp(116px,31vw,180px);
    justify-self:end;
    align-self:center;
    margin:0;
    transform:none;
    filter:none;
  }

  /* The tight transparent body has a known internal screen ratio.
     These are proportional coordinates inside the asset itself,
     not viewport positioning. They scale with the image. */
  .qubby-device--hero-mobile .device-screen{
    left:14.0285%;
    top:25.1451%;
    width:71.5675%;
    height:43.4981%;
  }

  /* Desktop visual stage is not part of the phone composition. */
  .hero > .hero-stage{
    display:none;
  }

  .hero-lede{
    margin:clamp(22px,5vw,30px) 0 0;
    padding:0;
    max-width:36rem;
    font-size:clamp(1rem,4.2vw,1.15rem);
    line-height:1.48;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(9px,2.5vw,13px);
    margin-top:clamp(20px,5vw,28px);
    padding:0;
  }

  .hero-actions .button{
    width:100%;
    min-width:0;
    min-height:54px;
    padding:12px clamp(9px,3vw,15px);
    font-size:clamp(.68rem,2.8vw,.78rem);
    line-height:1.15;
    box-shadow:4px 4px 0 var(--ink);
  }

  .micro-proof{
    display:none;
  }
}

/* On genuinely narrow screens, only the CTA row changes shape.
   The headline/device grid remains fluid and intact. */
@media (max-width:340px){
  .hero-actions{
    grid-template-columns:1fr;
  }
}

/* Tablet portrait gets breathing room without inventing a second
   custom composition. */
@media (min-width:600px) and (max-width:767px){
  .hero-copy{
    max-width:680px;
    margin-inline:auto;
  }

  .hero-heading-row{
    grid-template-columns:minmax(0,1.65fr) minmax(150px,.7fr);
  }

  .hero-copy h1{
    font-size:clamp(4.6rem,12vw,5.6rem);
  }
}


/* ============================================================
   V0.2.21 — OLED registration + optical centering
   Measured from the cropped Qubby body asset itself.
   These are intrinsic percentages, so they scale with Qubby.
   ============================================================ */
@media (max-width:767px){
  .qubby-device--hero-mobile .device-screen{
    left:14.3930%;
    top:25.2500%;
    width:70.7134%;
    height:43.7500%;
  }

  .qubby-device--hero-mobile .device-screen img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:translate(-1.4%, -8.2%);
    transform-origin:center;
  }
}


/* ============================================================
   V0.2.22 — intro section simplified.
   Device artwork removed on desktop and mobile.
   ============================================================ */
.qubby-intro{
  grid-template-columns:minmax(0, 1fr);
}

.qubby-intro .intro-copy{
  max-width:900px;
}

.qubby-intro .intro-stage{
  display:none !important;
}


/* ============================================================
   V0.2.23 — Intro section: asymmetric text + light Bauhaus cues
   Text remains the focal point; shapes are supporting accents only.
   ============================================================ */

.qubby-intro{
  position:relative;
  overflow:hidden;
  grid-template-columns:1fr;
  min-height:clamp(520px,58vw,720px);
  display:flex;
  align-items:center;
  background:var(--paper);
}

.qubby-intro .intro-copy{
  position:relative;
  z-index:2;
  width:min(760px,72%);
  max-width:none;
  margin-left:clamp(4%,7vw,9%);
  margin-right:auto;
}

.qubby-intro .intro-copy h2{
  max-width:720px;
}

.qubby-intro .intro-lede{
  max-width:620px;
}

/* Light Bauhaus accents: intentionally sparse and off-axis */
.qubby-intro::before{
  content:"";
  position:absolute;
  width:clamp(120px,15vw,210px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--blue);
  border:4px solid var(--ink);
  right:clamp(-70px,-3vw,-24px);
  top:clamp(38px,8vw,90px);
  opacity:.96;
  z-index:1;
}

.qubby-intro::after{
  content:"";
  position:absolute;
  width:clamp(150px,20vw,300px);
  height:clamp(26px,3vw,42px);
  background:var(--yellow);
  border:4px solid var(--ink);
  right:clamp(40px,8vw,120px);
  bottom:clamp(48px,8vw,96px);
  transform:rotate(-6deg);
  transform-origin:center;
  z-index:1;
}

.qubby-intro .intro-copy::before{
  content:"";
  position:absolute;
  width:clamp(58px,7vw,96px);
  aspect-ratio:1;
  background:var(--red);
  border:4px solid var(--ink);
  right:clamp(-120px,-10vw,-60px);
  top:52%;
  transform:rotate(17deg);
  z-index:-1;
}

@media(max-width:900px){
  .qubby-intro{
    min-height:auto;
    padding-top:clamp(72px,11vw,100px);
    padding-bottom:clamp(72px,11vw,100px);
  }

  .qubby-intro .intro-copy{
    width:min(760px,82%);
    margin-left:clamp(18px,6vw,48px);
  }

  .qubby-intro .intro-copy::before{
    right:-70px;
  }
}

@media(max-width:767px){
  .qubby-intro{
    min-height:auto;
    padding:
      clamp(64px,15vw,88px)
      clamp(16px,5vw,28px)
      clamp(72px,16vw,96px);
  }

  .qubby-intro .intro-copy{
    width:100%;
    margin:0;
  }

  .qubby-intro::before{
    width:clamp(78px,24vw,108px);
    right:-34px;
    top:22px;
    border-width:3px;
  }

  .qubby-intro::after{
    width:clamp(110px,34vw,150px);
    height:24px;
    right:18px;
    bottom:28px;
    border-width:3px;
  }

  .qubby-intro .intro-copy::before{
    width:56px;
    right:-24px;
    top:58%;
    border-width:3px;
    opacity:.9;
  }

  .qubby-intro .intro-copy h2,
  .qubby-intro .intro-lede{
    max-width:min(100%, 36rem);
  }
}

@media(max-width:420px){
  .qubby-intro .intro-copy::before{
    display:none;
  }

  .qubby-intro::before{
    width:82px;
  }

  .qubby-intro::after{
    width:118px;
  }
}


/* ============================================================
   V0.2.25 — MOBILE FEELS-ALIVE SLIDER COMPACT MODE
   Desktop is intentionally unchanged.
   Goal: headline + full card + next-card hint within ~1 viewport.
   ============================================================ */
@media (max-width:767px){

  /* Section shell */
  .behavior-section,
  .feels-alive,
  #meet-qubby + section{
    padding-top:clamp(42px,10vw,58px);
    padding-bottom:clamp(42px,10vw,58px);
  }

  /* Common heading wrappers used by this section */
  .behavior-section .section-heading,
  .feels-alive .section-heading,
  .behavior-heading,
  .slider-heading{
    margin-bottom:clamp(18px,4.5vw,24px);
  }

  .behavior-section h2,
  .feels-alive h2{
    margin-bottom:10px;
    font-size:clamp(2.45rem,11.5vw,3.65rem);
    line-height:.88;
  }

  .behavior-section .section-heading p,
  .feels-alive .section-heading p,
  .behavior-section > p,
  .feels-alive > p{
    max-width:34rem;
    font-size:clamp(.95rem,4vw,1.06rem);
    line-height:1.42;
    margin-bottom:0;
  }

  /* Marquee viewport */
  .behavior-marquee,
  .demo-marquee,
  .slider-viewport{
    margin-top:clamp(16px,4vw,22px);
    overflow:hidden;
  }

  /* Card sizing: fluid and compact.
     One full card + a clear slice of the next should be visible. */
  .demo-card,
  .behavior-card{
    flex:0 0 clamp(220px,68vw,292px);
    width:clamp(220px,68vw,292px);
    min-width:0;
  }

  /* Reduce visual area while keeping device readable. */
  .demo-visual,
  .behavior-card .visual{
    aspect-ratio:1.18 / 1;
    min-height:0;
  }

  .demo-visual .qubby-device,
  .behavior-card .qubby-device{
    width:clamp(118px,38vw,165px);
    max-width:62%;
  }

  /* Tighter copy strip inside each card */
  .demo-card .demo-copy,
  .demo-card .demo-caption,
  .behavior-card .card-copy{
    padding:12px 13px 13px;
  }

  .demo-card h3,
  .behavior-card h3{
    margin:0;
    font-size:clamp(.9rem,4vw,1.05rem);
    line-height:1.05;
  }

  .demo-card p,
  .behavior-card p{
    margin-top:5px;
    font-size:clamp(.72rem,3vw,.82rem);
    line-height:1.32;
  }

  /* Make the strip visually continuous and avoid oversized gaps. */
  .demo-track,
  .behavior-track,
  .marquee-track{
    gap:clamp(12px,3.5vw,18px);
  }
}

/* Narrow phones: preserve the same composition instead of inventing
   a second layout. Only scale cards slightly further down. */
@media (max-width:360px){
  .demo-card,
  .behavior-card{
    flex-basis:66vw;
    width:66vw;
  }

  .demo-visual .qubby-device,
  .behavior-card .qubby-device{
    width:36vw;
  }
}


/* ============================================================
   V0.2.26 — INTERACTIVE FOCUS MODE SELECTOR
   Desktop: controls left, Qubby right.
   Mobile: Qubby first, controls below, description last.
   ============================================================ */

.focus-selector{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(360px, 1.05fr);
  gap:clamp(44px,6vw,90px);
  align-items:center;
  background:#fff;
  overflow:hidden;
}

.focus-copy{
  min-width:0;
}

.focus-copy h2{
  margin-bottom:clamp(28px,3vw,40px);
}

.focus-mode-tabs{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  width:min(100%,560px);
}

.focus-mode-tab{
  appearance:none;
  border:4px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  min-height:64px;
  padding:14px 18px;
  text-align:left;
  font:900 clamp(.82rem,1.1vw,1rem)/1 Arial,sans-serif;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.focus-mode-tab:hover{
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--ink);
}

.focus-mode-tab:focus-visible{
  outline:4px solid var(--blue);
  outline-offset:4px;
}

.focus-mode-tab.is-active{
  background:var(--blue);
  color:#fff;
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 var(--ink);
}

.focus-mode-description{
  max-width:560px;
  margin:clamp(26px,3vw,34px) 0 0;
  font-size:clamp(1.05rem,1.45vw,1.3rem);
  line-height:1.48;
}

.focus-device-wrap{
  min-width:0;
  display:flex;
  justify-content:center;
}

.focus-device-stage{
  width:min(100%,600px);
  min-height:clamp(430px,43vw,620px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
  position:relative;
  overflow:hidden;
}

.focus-device-stage::before{
  content:"";
  position:absolute;
  width:clamp(110px,10vw,170px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--yellow);
  border:4px solid var(--ink);
  top:-38px;
  right:-34px;
}

.focus-device-stage::after{
  content:"";
  position:absolute;
  width:clamp(100px,9vw,145px);
  aspect-ratio:1;
  background:var(--red);
  border:4px solid var(--ink);
  bottom:-50px;
  left:-40px;
  transform:rotate(18deg);
}

.qubby-device--focus{
  width:min(72%,410px);
  z-index:2;
  transform:none;
  filter:none;
}

/* Intrinsic registration inside the tight-cropped Qubby body.
   These percentages scale with the device body at every width. */
.qubby-device--focus .device-screen{
  left:14.3930%;
  top:25.2500%;
  width:70.7134%;
  height:43.7500%;
}

.qubby-device--focus .device-screen img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  transform:none;
}

@media(max-width:900px){
  .focus-selector{
    grid-template-columns:1fr;
    gap:32px;
  }

  .focus-device-wrap{
    grid-row:1;
  }

  .focus-copy{
    grid-row:2;
  }

  .focus-device-stage{
    min-height:clamp(330px,72vw,500px);
    width:min(100%,620px);
    margin-inline:auto;
  }

  .qubby-device--focus{
    width:min(62%,340px);
  }

  .focus-mode-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:10px;
  }

  .focus-mode-tab{
    min-height:54px;
    padding:11px 8px;
    text-align:center;
    font-size:clamp(.62rem,2.3vw,.78rem);
    letter-spacing:.05em;
    box-shadow:4px 4px 0 var(--ink);
  }

  .focus-mode-tab.is-active{
    transform:translate(2px,2px);
    box-shadow:2px 2px 0 var(--ink);
  }

  .focus-mode-description{
    max-width:none;
    margin-top:22px;
  }
}

@media(max-width:767px){
  .focus-selector{
    padding-top:clamp(54px,13vw,76px);
    padding-bottom:clamp(58px,14vw,82px);
  }

  .focus-copy .eyebrow{
    margin-bottom:12px;
  }

  .focus-copy h2{
    margin-bottom:24px;
    font-size:clamp(2.6rem,12vw,4rem);
    line-height:.88;
  }

  .focus-device-stage{
    min-height:clamp(280px,70vw,360px);
    box-shadow:6px 6px 0 var(--ink);
  }

  .qubby-device--focus{
    width:min(58vw,270px);
  }

  .focus-device-stage::before{
    width:92px;
    top:-30px;
    right:-28px;
    border-width:3px;
  }

  .focus-device-stage::after{
    width:78px;
    bottom:-35px;
    left:-28px;
    border-width:3px;
  }

  .focus-mode-tabs{
    gap:8px;
  }

  .focus-mode-tab{
    min-height:50px;
    border-width:3px;
  }

  .focus-mode-description{
    font-size:clamp(.98rem,4vw,1.08rem);
    line-height:1.45;
  }
}

@media(max-width:360px){
  .focus-mode-tabs{
    grid-template-columns:1fr;
  }

  .focus-mode-tab{
    text-align:left;
    padding-inline:14px;
  }
}


/* ============================================================
   V0.2.30 — PROGRESS STORY
   One glance: tracked progress + streaks + 16 achievements.
   No tabs; no duplicated Focus interaction pattern.
   ============================================================ */

.progress-section{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
  gap:clamp(48px,7vw,100px);
  align-items:center;
  background:var(--paper);
  overflow:hidden;
}

.progress-copy{
  min-width:0;
}

.progress-copy h2{
  margin-bottom:24px;
}

.progress-lede{
  max-width:620px;
  margin:0;
  font-size:clamp(1.05rem,1.45vw,1.3rem);
  line-height:1.5;
}

.achievement-count{
  width:min(100%,510px);
  margin-top:clamp(28px,4vw,44px);
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  background:var(--yellow);
  border:4px solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
}

.achievement-count strong{
  font:900 clamp(3.6rem,6vw,6rem)/.8 Arial,sans-serif;
  letter-spacing:-.06em;
}

.achievement-count span{
  font:900 clamp(.78rem,1.15vw,1rem)/1.05 Arial,sans-serif;
  letter-spacing:.08em;
}

.progress-signals{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:28px;
}

.progress-signals span{
  padding:9px 11px;
  border:3px solid var(--ink);
  background:#fff;
  font:900 .62rem/1 Arial,sans-serif;
  letter-spacing:.08em;
}

.progress-signals span:nth-child(2){
  background:var(--blue);
  color:#fff;
}

.progress-signals span:nth-child(3){
  background:var(--red);
  color:#fff;
}

.progress-visual{
  min-width:0;
}

.progress-device-stage{
  position:relative;
  min-height:clamp(520px,46vw,650px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(34px,4vw,56px);
  background:#fff;
  border:4px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
  overflow:hidden;
}

.progress-device-stage::before{
  content:"";
  position:absolute;
  width:clamp(130px,12vw,190px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--blue);
  border:4px solid var(--ink);
  top:-54px;
  left:-46px;
}

.progress-device-stage::after{
  content:"";
  position:absolute;
  width:clamp(150px,16vw,240px);
  height:34px;
  background:var(--yellow);
  border:4px solid var(--ink);
  right:-28px;
  top:17%;
  transform:rotate(-6deg);
}

.qubby-device--progress{
  width:min(66%,410px);
  z-index:2;
  filter:none;
  transform:none;
  margin-bottom:80px;
}

.qubby-device--progress .device-screen{
  left:14.3930%;
  top:25.2500%;
  width:70.7134%;
  height:43.7500%;
}

.qubby-device--progress .device-screen img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  transform:none;
}

.achievement-preview{
  position:absolute;
  left:clamp(18px,3vw,34px);
  right:clamp(18px,3vw,34px);
  bottom:clamp(18px,3vw,30px);
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.achievement-mini{
  min-width:0;
  padding:8px 8px 9px;
  background:var(--paper);
  border:3px solid var(--ink);
}

.achievement-mini img{
  display:block;
  width:100%;
  aspect-ratio:2 / 1;
  object-fit:contain;
  image-rendering:pixelated;
  background:#000;
}

.achievement-mini span{
  display:block;
  margin-top:7px;
  font:900 clamp(.48rem,.75vw,.62rem)/1 Arial,sans-serif;
  letter-spacing:.06em;
  text-align:center;
}

@media(max-width:900px){
  .progress-section{
    grid-template-columns:1fr;
    gap:34px;
  }

  .progress-visual{
    grid-row:1;
  }

  .progress-copy{
    grid-row:2;
  }

  .progress-device-stage{
    width:min(100%,680px);
    margin-inline:auto;
    min-height:clamp(430px,72vw,570px);
  }

  .qubby-device--progress{
    width:min(58%,340px);
  }
}

@media(max-width:767px){
  .progress-section{
    padding-top:clamp(54px,13vw,76px);
    padding-bottom:clamp(60px,14vw,84px);
  }

  .progress-device-stage{
    min-height:clamp(345px,86vw,440px);
    padding:24px 18px;
    box-shadow:6px 6px 0 var(--ink);
  }

  .qubby-device--progress{
    width:min(55vw,255px);
    margin-bottom:68px;
  }

  .achievement-preview{
    left:12px;
    right:12px;
    bottom:12px;
    gap:7px;
  }

  .achievement-mini{
    padding:6px;
    border-width:2px;
  }

  .achievement-mini span{
    font-size:clamp(.42rem,2vw,.54rem);
  }

  .achievement-count{
    grid-template-columns:auto 1fr;
    gap:14px;
    padding:15px 17px;
    box-shadow:5px 5px 0 var(--ink);
  }

  .achievement-count strong{
    font-size:clamp(3.2rem,15vw,4.6rem);
  }

  .progress-copy h2{
    font-size:clamp(2.65rem,12vw,4rem);
    line-height:.88;
  }

  .progress-lede{
    font-size:clamp(.98rem,4vw,1.08rem);
  }

  .progress-signals{
    margin-top:24px;
  }
}

@media(max-width:360px){
  .achievement-preview{
    gap:5px;
  }

  .achievement-mini{
    padding:4px;
  }

  .progress-signals{
    gap:6px;
  }
}


/* ============================================================
   V0.2.31 — Progress sequence
   Play ALL TIME build-up on viewport entry, then reveal full
   achievement animations below it.
   ============================================================ */

.achievement-preview{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}

.progress-section.is-complete .achievement-preview{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.achievement-mini{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .26s ease, transform .26s ease;
}

.progress-section.is-complete .achievement-mini{
  opacity:1;
  transform:translateY(0);
}

.progress-section.is-complete .achievement-mini:nth-child(2){
  transition-delay:.08s;
}

.progress-section.is-complete .achievement-mini:nth-child(3){
  transition-delay:.16s;
}


/* ============================================================
   V0.2.40 — Simplified homepage footer
   Logo + social follow only.
   ============================================================ */

.site-footer--simple{
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:34px max(22px,5vw);
  background:var(--ink);
  color:#fff;
  border-top:4px solid var(--ink);
}

.footer-logo--simple{
  display:block;
  width:clamp(118px,14vw,180px);
  flex:0 0 auto;
}

.footer-logo--simple img{
  display:block;
  width:100%;
  height:auto;
  filter:brightness(0) invert(1);
}

.footer-social{
  display:flex;
  align-items:center;
  gap:18px;
}

.footer-social-label{
  font:900 10px/1 Arial,sans-serif;
  letter-spacing:.14em;
}

.footer-social-links{
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-social-links :is(a,.social-link){
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:#fff;
  border:3px solid #fff;
  background:transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}

.footer-social-links a:hover{
  background:#fff;
  color:var(--ink);
  transform:translate(-2px,-2px);
}

.footer-social-links a:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
}

.footer-social-links svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:680px){
  .site-footer--simple{
    min-height:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
    padding:34px 18px 96px;
  }

  .footer-social{
    width:100%;
    justify-content:space-between;
  }
}





/* ============================================================
   V0.2.45 — Bring Qubby Home screen mask fix
   Keep the user-supplied OLED asset as-is, but restore the
   same rounded OLED mask used across the rest of the site.
   ============================================================ */
.final-device .qubby-device--final{
  position:relative;
  width:min(72%,410px);
  margin-inline:auto;
  transform:none;
  filter:none;
}

.final-device .qubby-device--final .device-body{
  display:block;
  width:100%;
  height:auto;
}

.final-device .qubby-device--final .device-screen{
  position:absolute;
  left:14.3930%;
  top:25.2500%;
  width:70.7134%;
  height:43.7500%;
  z-index:3;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  border-radius:13% / 21%;
}

.final-device .qubby-device--final .device-screen img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#000;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  transform:none;
  filter:none;
}

@media(max-width:900px){
  .final-device .qubby-device--final{
    width:min(72%,410px);
  }
}

@media(max-width:680px){
  .final-device .qubby-device--final{
    width:min(72vw,320px);
  }
}

/* V0.2.46 — Base price */
.final-price{
  margin:-18px 0 28px;
  font:900 clamp(28px,3vw,42px)/1 "Arial Black",Arial,sans-serif;
  letter-spacing:-.035em;
}
@media(max-width:1050px){
  .final-price{margin:-14px 0 26px}
}


/* V0.2.47 — Conversion copy polish */
.final-payment{
  margin:-17px 0 28px;
  font:900 11px/1.2 Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* V0.2.48 — UI/UX review: mobile safe area */
@media(max-width:680px){
  .mobile-buy{
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer--simple{
    padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  }
}


/* V0.2.48 — UI/UX review: consistent keyboard focus */
:where(a,button,summary):focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
  box-shadow:0 0 0 6px var(--ink);
}

.footer-social-links .social-link--placeholder{
  opacity:.72;
  cursor:default;
}


/* ============================================================
   V0.2.49 — Structural responsive hardening
   Fixes mobile horizontal overflow without hiding it globally.
   FAQ and final purchase section reflow to one column on
   tablets/phones, with intrinsic min-width handling.
   ============================================================ */
@media (max-width:900px){
  .faq-section{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(28px,6vw,42px);
  }

  .faq-title,
  .faq-list{
    min-width:0;
    width:100%;
    max-width:100%;
  }

  .faq-list details{
    width:100%;
    max-width:100%;
  }

  .faq-list summary{
    min-width:0;
    align-items:flex-start;
  }

  .faq-list summary span{
    flex:0 0 auto;
  }

  .faq-list summary,
  .faq-list details p{
    overflow-wrap:anywhere;
  }

  .final-cta{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(30px,7vw,52px);
    min-height:auto;
    padding-top:clamp(64px,10vw,88px);
    padding-bottom:clamp(64px,10vw,88px);
  }

  .final-copy{
    grid-row:1;
    min-width:0;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .final-device{
    grid-row:2;
    min-width:0;
    width:100%;
  }

  .final-copy h2{
    width:100%;
    max-width:100%;
    font-size:clamp(3.4rem,12vw,6.2rem);
  }
}

@media (max-width:680px){
  .faq-section{
    gap:28px;
  }

  .faq-list summary,
  .faq-list details p{
    padding:18px;
  }

  .faq-list summary{
    font-size:clamp(.82rem,3.7vw,.95rem);
    line-height:1.25;
  }

  .final-cta{
    min-height:auto;
    padding:58px 18px 64px;
    gap:30px;
  }

  .final-copy h2{
    font-size:clamp(3.2rem,15vw,4.25rem);
    line-height:.86;
  }

  .final-copy .button{
    width:min(100%,300px);
  }

  .final-device .qubby-device--final{
    width:min(76vw,320px);
  }
}

@media (max-width:360px){
  .final-copy h2{
    font-size:clamp(2.9rem,15vw,3.4rem);
  }

  .final-price{
    font-size:clamp(1.8rem,9vw,2.3rem);
  }
}


/* ============================================================
   V0.2.50 — Interactive Scratch Pad
   White pixel drawing on black, sent directly to Qubby's OLED.
   ============================================================ */

.scratch-section{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(46px,7vw,110px);
  align-items:center;
}

.scratch-section::before{
  content:"";
  position:absolute;
  width:clamp(120px,15vw,220px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--yellow);
  border:4px solid var(--ink);
  right:clamp(-90px,-4vw,-40px);
  top:clamp(-80px,-3vw,-36px);
  pointer-events:none;
}

.scratch-section::after{
  content:"";
  position:absolute;
  width:clamp(80px,10vw,145px);
  aspect-ratio:1;
  background:var(--red);
  border:4px solid var(--ink);
  left:clamp(-52px,-3vw,-24px);
  bottom:clamp(-52px,-3vw,-24px);
  transform:rotate(18deg);
  pointer-events:none;
}

.scratch-copy,
.scratch-visual{
  position:relative;
  z-index:2;
  min-width:0;
}

.scratch-copy h2{
  margin-bottom:22px;
}

.scratch-lede{
  max-width:620px;
  margin:0 0 30px;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.5;
}

.scratch-workspace{
  width:min(100%,690px);
}

.scratch-pad-shell{
  width:100%;
  background:#000;
  border:4px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
}

.scratch-pad-head{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 13px;
  background:var(--yellow);
  color:var(--ink);
  border-bottom:4px solid var(--ink);
  font:900 9px/1.2 Arial,sans-serif;
  letter-spacing:.1em;
}

.scratch-draw-canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2 / 1;
  background:#000;
  cursor:crosshair;
  touch-action:none;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  outline:none;
}

.scratch-draw-canvas:focus-visible{
  outline:4px solid var(--blue);
  outline-offset:4px;
}

.scratch-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.scratch-actions .button{
  min-height:48px;
}

.scratch-actions button:disabled{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

.scratch-clear{
  background:transparent;
}

.scratch-status{
  min-height:20px;
  margin:14px 0 0;
  font:900 10px/1.35 Arial,sans-serif;
  letter-spacing:.06em;
}

.scratch-visual{
  min-height:clamp(470px,48vw,650px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.scratch-device-stage{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qubby-device--scratch{
  width:min(76%,430px);
  z-index:2;
  transform:none;
  filter:none;
}

.qubby-device--scratch .device-screen{
  left:14.3930%;
  top:25.2500%;
  width:70.7134%;
  height:43.7500%;
}

.scratch-device-screen{
  background:#000;
}

.scratch-qubby-canvas{
  display:block;
  width:100%;
  height:100%;
  background:transparent;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  filter:
    drop-shadow(0 0 2px rgba(235,245,255,.95))
    drop-shadow(0 0 6px rgba(205,230,255,.55));
}

.scratch-device-caption{
  margin:18px 0 0;
  padding:10px 13px;
  background:var(--blue);
  color:#fff;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  font:900 9px/1.2 Arial,sans-serif;
  letter-spacing:.1em;
}

@media(max-width:900px){
  .scratch-section{
    grid-template-columns:minmax(0,1fr);
    gap:42px;
  }

  .scratch-copy,
  .scratch-visual{
    width:100%;
  }

  .scratch-workspace{
    width:100%;
  }

  .scratch-visual{
    min-height:0;
  }

  .qubby-device--scratch{
    width:min(62vw,390px);
  }
}

@media(max-width:680px){
  .scratch-section{
    gap:34px;
  }

  .scratch-section::before{
    width:100px;
    right:-45px;
    top:-34px;
    border-width:3px;
  }

  .scratch-section::after{
    width:78px;
    left:-38px;
    bottom:-34px;
    border-width:3px;
  }

  .scratch-pad-shell{
    border-width:3px;
    box-shadow:5px 5px 0 var(--ink);
  }

  .scratch-pad-head{
    min-height:42px;
    border-bottom-width:3px;
    font-size:8px;
  }

  .scratch-actions{
    display:grid;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:10px;
  }

  .scratch-actions .button{
    width:100%;
    padding-inline:10px;
    font-size:9px;
  }

  .qubby-device--scratch{
    width:min(76vw,320px);
  }

  .scratch-device-caption{
    margin-top:12px;
  }
}

@media(max-width:340px){
  .scratch-actions{
    grid-template-columns:1fr;
  }
}


/* V0.2.52 — Responsive Scratch Pad input hint */
.scratch-input-label--touch{
  display:none;
}

@media(max-width:900px){
  .scratch-input-label--desktop{
    display:none;
  }

  .scratch-input-label--touch{
    display:inline;
  }
}


/* ============================================================
   V0.2.53 — Feels Alive responsive interaction
   Desktop/mouse: automatic infinite marquee.
   Phone/touch: manual finite swipe, stops at final card.
   ============================================================ */

.alive-swipe-hint{
  display:none;
  margin:32px 0 10px;
  color:#fff;
  font:900 10px/1 Arial,sans-serif;
  letter-spacing:.16em;
}

.alive-swipe-hint span{
  display:inline-block;
  margin-left:5px;
}

/* Manual mode is enabled by JS on narrow screens OR coarse touch devices. */
.alive-slider.is-manual{
  overflow-x:auto;
  overflow-y:hidden;
  width:calc(100% + max(22px,5vw));
  padding-right:max(22px,5vw);
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0 max(22px,5vw);
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x pan-y;
}

.alive-slider.is-manual::-webkit-scrollbar{
  display:none;
}

.alive-slider.is-manual .alive-track{
  width:max-content;
  transform:none!important;
  will-change:auto;
}

.alive-slider.is-manual .demo-card{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.alive-section:has(.alive-slider.is-manual) .alive-swipe-hint{
  display:block;
}

@media(max-width:767px){
  .alive-swipe-hint{
    display:block;
    margin-top:26px;
  }

  .alive-slider.is-manual{
    margin-top:0;
  }
}


/* ============================================================
   V0.2.54 — Interactive Qubby Clock
   Native 128×64 canvas. Exact firmware placement lives inside
   the canvas; responsiveness only scales the complete OLED.
   ============================================================ */

.clock-section{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(46px,7vw,110px);
  align-items:center;
}

.clock-section::before{
  content:"";
  position:absolute;
  width:clamp(150px,18vw,260px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--blue);
  border:4px solid #fff;
  left:clamp(-110px,-5vw,-50px);
  bottom:clamp(-115px,-5vw,-55px);
  pointer-events:none;
}

.clock-section::after{
  content:"";
  position:absolute;
  width:clamp(80px,9vw,132px);
  aspect-ratio:1;
  background:var(--red);
  border:4px solid #fff;
  right:clamp(-44px,-2vw,-20px);
  top:clamp(35px,5vw,72px);
  transform:rotate(18deg);
  pointer-events:none;
}

.clock-copy,
.clock-visual{
  position:relative;
  z-index:2;
  min-width:0;
}

.clock-copy h2{
  margin-bottom:24px;
}

.clock-lede{
  max-width:650px;
  margin:0;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.52;
  color:#f1f1f1;
}

.clock-format{
  display:flex;
  width:max-content;
  margin-top:30px;
  border:3px solid #fff;
}

.clock-format-button{
  min-width:70px;
  min-height:48px;
  appearance:none;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font:900 11px/1 Arial,sans-serif;
  letter-spacing:.1em;
  cursor:pointer;
}

.clock-format-button + .clock-format-button{
  border-left:3px solid #fff;
}

.clock-format-button.is-active{
  background:var(--yellow);
  color:var(--ink);
}

.clock-format-button:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:4px;
}

.clock-demo-note{
  margin:14px 0 0;
  font:900 9px/1.3 Arial,sans-serif;
  letter-spacing:.1em;
  color:#cfcfcf;
}

.clock-visual{
  min-height:clamp(470px,48vw,650px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.clock-device-stage{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qubby-device--clock{
  width:min(74%,430px);
  z-index:2;
  transform:none;
  filter:none;
}

.qubby-device--clock .device-screen{
  left:14.3930%;
  top:25.2500%;
  width:70.7134%;
  height:43.7500%;
}

.clock-device-screen{
  background:#000;
}

.qubby-clock-canvas{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:2 / 1;
  background:#000;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

@media(max-width:900px){
  .clock-section{
    grid-template-columns:minmax(0,1fr);
    gap:36px;
  }

  .clock-copy,
  .clock-visual{
    width:100%;
  }

  .clock-visual{
    min-height:0;
  }

  .qubby-device--clock{
    width:min(62vw,390px);
  }
}

@media(max-width:680px){
  .clock-section{
    gap:30px;
  }

  .clock-section::before{
    width:110px;
    left:-58px;
    bottom:-52px;
    border-width:3px;
  }

  .clock-section::after{
    width:74px;
    right:-34px;
    top:28px;
    border-width:3px;
  }

  .clock-copy h2{
    font-size:clamp(3.25rem,14.5vw,4.4rem);
  }

  .clock-format{
    margin-top:24px;
  }

  .clock-format-button{
    min-width:74px;
    min-height:48px;
  }

  .qubby-device--clock{
    width:min(76vw,320px);
  }
}


/* ============================================================
   V0.2.55 — Clock OLED opening only
   Expand the Clock screen mask by ~6% and keep it centered.
   No clock artwork, layout, or other site element is changed.
   ============================================================ */
.qubby-device--clock .device-screen{
  left:12.2716%;
  top:23.9375%;
  width:74.9562%;
  height:46.3750%;
}


/* ============================================================
   V0.2.56 — Clock canvas breathing room only
   Keep the expanded OLED mask from V0.2.55, but prevent the
   128×64 clock canvas from scaling to fill it. The clock stays
   centered at 94% width with its true 2:1 aspect ratio.
   ============================================================ */
.qubby-device--clock .clock-device-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

.qubby-device--clock .qubby-clock-canvas{
  width:94%;
  height:auto;
  max-height:94%;
  aspect-ratio:2 / 1;
  flex:0 0 auto;
}


/* ============================================================
   V0.2.57 — Bring Qubby Home OLED artwork scale only
   Increase only the image inside the final OLED by 20%.
   Device body and OLED opening remain unchanged.
   ============================================================ */
.final-device .qubby-device--final .device-screen img{
  width:120%;
  height:120%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  transform:none;
}

/* ============================================================
   V0.2.60 — Qubby branded splash loader
   ============================================================ */
html.is-loading,
html.is-loading body{overflow:hidden;}

.site-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:clamp(20px,4vw,52px);
  background:var(--paper);
  opacity:1;
  visibility:visible;
  transition:opacity .32s ease, visibility .32s ease;
}
.site-loader.is-done{opacity:0;visibility:hidden;pointer-events:none;}

.site-loader__sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.site-loader__logo-wrap{
  position:relative;z-index:3;width:min(54vw,430px);transform:translateY(-1%);
  transition:transform .32s ease,opacity .24s ease;
}
.site-loader__logo{display:block;width:100%;height:auto;}

.site-loader__shape{
  position:absolute;z-index:1;display:block;border:4px solid var(--ink);will-change:transform;
}
.site-loader__shape--blue{
  width:clamp(100px,14vw,210px);aspect-ratio:1;border-radius:50%;background:var(--blue);
  top:clamp(-68px,-4vw,-28px);right:clamp(-48px,-2.5vw,-18px);
  animation:loader-blue 2.4s ease-in-out infinite alternate;
}
.site-loader__shape--red{
  width:clamp(92px,12vw,176px);aspect-ratio:1;background:var(--red);
  left:clamp(-48px,-2.5vw,-18px);bottom:clamp(-52px,-3vw,-22px);
  transform:rotate(17deg);animation:loader-red 2.7s ease-in-out infinite alternate;
}
.site-loader__shape--yellow{
  width:clamp(116px,18vw,260px);height:clamp(34px,4vw,58px);background:var(--yellow);
  left:clamp(20px,7vw,112px);top:clamp(28px,8vw,118px);
  transform:rotate(-4deg);animation:loader-yellow 2.2s ease-in-out infinite alternate;
}
.site-loader__shape--line{
  width:clamp(110px,16vw,230px);height:clamp(20px,2.7vw,40px);border:0;
  border-top:5px solid var(--ink);border-bottom:5px solid var(--ink);
  right:clamp(24px,8vw,130px);bottom:clamp(28px,9vw,125px);
  animation:loader-line 2.5s ease-in-out infinite alternate;
}

.site-loader.is-done .site-loader__logo-wrap{opacity:0;transform:translateY(-1%) scale(.985);}
.site-loader.is-done .site-loader__shape--blue{transform:translate(36px,-36px) scale(.96);}
.site-loader.is-done .site-loader__shape--red{transform:translate(-36px,36px) rotate(17deg) scale(.96);}
.site-loader.is-done .site-loader__shape--yellow{transform:translate(-30px,-18px) rotate(-4deg);}
.site-loader.is-done .site-loader__shape--line{transform:translate(30px,18px);}

@keyframes loader-blue{from{transform:translate3d(0,0,0)}to{transform:translate3d(-8px,10px,0) rotate(5deg)}}
@keyframes loader-red{from{transform:translate3d(0,0,0) rotate(17deg)}to{transform:translate3d(10px,-8px,0) rotate(22deg)}}
@keyframes loader-yellow{from{transform:translate3d(0,0,0) rotate(-4deg)}to{transform:translate3d(12px,5px,0)}}
@keyframes loader-line{from{transform:translate3d(0,0,0)}to{transform:translate3d(-10px,-5px,0)}}

@media(max-width:680px){
  .site-loader{padding:20px;}
  .site-loader__logo-wrap{width:min(68vw,310px);}
  .site-loader__shape{border-width:3px;}
  .site-loader__shape--blue{width:112px;top:-38px;right:-34px;}
  .site-loader__shape--red{width:96px;left:-32px;bottom:-30px;}
  .site-loader__shape--yellow{width:122px;height:35px;left:20px;top:48px;}
  .site-loader__shape--line{width:112px;height:22px;right:22px;bottom:52px;border-top-width:4px;border-bottom-width:4px;}
}

@media(prefers-reduced-motion:reduce){
  .site-loader,.site-loader__logo-wrap,.site-loader__shape{animation:none!important;transition:none!important;}
}

/* Accessibility contrast hardening */
.demo-red p{font-size:19px;font-weight:700}
.demo-red .demo-number{color:#0B0B0B}
.faq-list summary{font-size:19px}