/* ---------- Base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font-family: inherit; }

::selection { background: oklch(84% 0.09 75); color: oklch(17% 0.03 190); }

body {
  font-family: 'Hanken Grotesk', sans-serif;
  color: oklch(96% 0.006 200);
  background: oklch(20% 0.025 200);
  overflow-x: clip;
  width: 100%;
  position: relative;
  transition: opacity .6s ease;
}

:root {
  --accent-base: oklch(33% 0.04 200);
  --accent-dark: oklch(26% 0.035 200);
  --accent-tint: oklch(33% 0.04 200 / 0.1);
}

/* ---------- Keyframes ---------- */

@keyframes sbFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sbDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes sbLive { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes sbBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sbPop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sbSkeleton { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes sbStripeMove { from { background-position: 0 0; } to { background-position: 20px 0; } }
@keyframes sbFloat { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-12px) rotate(-4deg); } }
@keyframes sbFloatB { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes sbTwinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; } 50% { transform: scale(1.25) rotate(22deg); opacity: 1; } }
@keyframes sbNeon {
  0%, 100% { text-shadow: 0 0 6px oklch(84% 0.09 75 / 0.15); opacity: .82; }
  50% { text-shadow: 0 0 18px oklch(84% 0.09 75 / 0.55); opacity: 1; }
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 8px clamp(14px, 4vw, 26px) 0;
  pointer-events: none;
  transition: padding .5s cubic-bezier(.22,.61,.36,1);
}
.nav.scrolled { padding: 0; }

.nav-shell {
  max-width: 645px;
  margin: 0 auto;
  pointer-events: auto;
  padding: 4px 5px 4px 14px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 10px;
  background: linear-gradient(oklch(36% 0.03 200 / 0.5), oklch(22% 0.028 200 / 0.58));
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid oklch(100% 0 0 / 0.2);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.28), inset 0 -1px 0 oklch(100% 0 0 / 0.06), 0 12px 32px -14px oklch(8% 0.02 200 / 0.6);
  transition: max-width .5s cubic-bezier(.22,.61,.36,1), border-radius .5s cubic-bezier(.22,.61,.36,1), padding .5s cubic-bezier(.22,.61,.36,1), background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.nav.scrolled .nav-shell {
  max-width: 100vw;
  padding: 7px clamp(16px, 4vw, 36px);
  border-radius: 0;
  background: linear-gradient(oklch(22% 0.028 200 / 0.88), oklch(20% 0.025 200 / 0.88));
  border: 1px solid transparent;
  box-shadow: inset 0 -1px 0 oklch(100% 0 0 / 0.1), 0 12px 32px -14px oklch(8% 0.02 200 / 0.55);
}

.nav-logo { display: flex; align-items: center; gap: 7px; text-decoration: none; }
.nav-logo-star {
  width: 10px;
  height: 10px;
  background: oklch(84% 0.09 75);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  display: block;
  flex-shrink: 0;
  animation: sbTwinkle 3.6s ease-in-out infinite;
}
.nav-logo-text {
  font-family: 'Instrument Serif', serif;
  font-size: 19px;
  color: oklch(95% 0.008 200);
  letter-spacing: -0.01em;
}

.nav-links { flex: 1; display: flex; align-items: center; gap: 18px; margin-left: 0; }
.nav-divider { width: 1px; height: 18px; background: oklch(50% 0.03 200 / 0.5); flex-shrink: 0; }
.nav-link { font-size: 13.5px; font-weight: 500; color: oklch(80% 0.02 200); text-decoration: none; }
.nav-cta-wrap { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.nav-cta {
  font-size: 13.5px;
  font-weight: 700;
  color: oklch(17% 0.03 190);
  background: oklch(84% 0.09 75);
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px oklch(84% 0.09 75 / 0.55); }
.nav-cta--mobile { padding: 9px 16px; }

.nav-mobile { display: none; align-items: center; gap: 12px; }

.nav-burger {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger-bar {
  width: 20px;
  height: 1.8px;
  border-radius: 2px;
  background: oklch(90% 0.01 200);
  display: block;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav.menu-open .nav-burger-bar--top { transform: translateY(3.4px) rotate(45deg); }
.nav.menu-open .nav-burger-bar--bottom { transform: translateY(-3.4px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-basis: 100%;
  min-width: 0;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
}
.nav.menu-open .mobile-menu { grid-template-rows: 1fr; }
.mobile-menu-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 9px;
}
.mobile-menu-link {
  padding: 13px 4px;
  font-size: 15.5px;
  font-weight: 500;
  color: oklch(90% 0.01 200);
  text-decoration: none;
  border-bottom: 1px solid oklch(32% 0.03 200 / 0.6);
  opacity: 0;
  transition: opacity .2s ease;
}
.mobile-menu-link:first-child { border-top: 1px solid oklch(32% 0.03 200 / 0.6); margin-top: 4px; }
.mobile-menu-link:last-child { border-bottom: none; }
.nav.menu-open .mobile-menu-link { opacity: 1; transition: opacity .25s ease .15s; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: clamp(46px, 6vw, 76px) clamp(20px, 6vw, 56px) 0;
  text-align: center;
  overflow: hidden;
  background: oklch(20% 0.025 200);
}

.receipt {
  position: absolute;
  width: 176px;
  background: oklch(96% 0.015 90);
  border-radius: 3px;
  padding: 10px 13px;
  box-shadow: 0 12px 28px -10px oklch(5% 0.02 200 / 0.75);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: oklch(35% 0.02 90);
  line-height: 1.65;
  text-align: left;
  z-index: 3;
}
.receipt--a { top: 231px; left: 50%; margin-left: -626px; animation: sbFloat 7s ease-in-out infinite; }
.receipt--b { top: 303px; left: 50%; margin-left: 450px; animation: sbFloatB 8s ease-in-out infinite 1.2s; }
.receipt-head {
  border-bottom: 1px dashed oklch(70% 0.02 90);
  padding-bottom: 5px;
  margin-bottom: 5px;
  font-weight: 700;
}
.receipt-ok { color: oklch(50% 0.08 160); }

.hero-inner { max-width: 840px; margin: 0 auto; position: relative; z-index: 2; }

.hero-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(40px, 6.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: oklch(96% 0.006 200);
  margin: 0 auto 24px;
  max-width: 15ch;
  animation: sbFade .6s ease .05s both;
}
.hero-title em { font-style: italic; color: oklch(84% 0.09 75); font-weight: 500; }

.hero-sub {
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.6;
  color: oklch(75% 0.02 200);
  max-width: 576px;
  margin: 0 auto 32px;
  animation: sbFade .6s ease .1s both;
  text-wrap: pretty;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  animation: sbFade .6s ease .15s both;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 700;
  color: oklch(17% 0.03 190);
  background: oklch(84% 0.09 75);
  padding: 15px 28px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px -10px oklch(84% 0.09 75 / 0.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { box-shadow: 0 16px 38px -10px oklch(84% 0.09 75 / 0.55); }
.btn-primary svg { flex-shrink: 0; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: oklch(90% 0.01 200);
  border: 1.5px solid oklch(42% 0.03 200);
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.btn-secondary:hover { border-color: oklch(60% 0.05 200); }
.btn-secondary svg { flex-shrink: 0; }

/* ---------- Browser mockup ---------- */

.browser-wrap {
  position: relative;
  max-width: 1080px;
  margin: clamp(44px, 5vw, 62px) auto 0;
  z-index: 1;
}

.browser {
  position: relative;
  z-index: 1;
  background: oklch(97% 0.006 90);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 30px 80px -30px oklch(5% 0.02 200 / 0.85);
  overflow: hidden;
  height: clamp(370px, 44vw, 530px);
  animation: sbFade .8s ease .2s both;
}

.browser-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid oklch(91% 0.008 90);
  background: oklch(98.5% 0.005 90);
}
.browser-dots { display: flex; gap: 7px; flex-shrink: 0; }
.browser-dot { width: 11px; height: 11px; border-radius: 999px; display: block; }
.browser-dot--r { background: oklch(84% 0.02 30); }
.browser-dot--y { background: oklch(84% 0.02 90); }
.browser-dot--g { background: oklch(84% 0.02 150); }

.browser-url {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: white;
  border: 1px solid oklch(90% 0.01 90);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: oklch(50% 0.015 200);
}
.browser-lock {
  width: 9px;
  height: 9px;
  border: 1.4px solid oklch(64% 0.015 200);
  border-radius: 2px 2px 0 0;
  border-bottom-width: 3.5px;
  display: inline-block;
  margin-bottom: -1px;
}
.browser-spacer { width: 44px; flex-shrink: 0; }

.browser-body {
  position: relative;
  text-align: left;
  height: calc(clamp(370px, 44vw, 530px) - 48px);
  overflow: hidden;
}

.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px clamp(18px, 3vw, 32px);
  border-bottom: 1px solid oklch(92% 0.008 90);
  background: oklch(97% 0.006 90);
}
.store-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.store-logo {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: oklch(26% 0.028 200);
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-logo-star {
  width: 9px;
  height: 9px;
  background: oklch(84% 0.09 75);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  display: block;
}
.store-name {
  font-family: 'Instrument Serif', serif;
  font-size: 19px;
  color: oklch(24% 0.015 200);
  letter-spacing: -0.01em;
}
.store-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  font-size: 13.5px;
  font-weight: 600;
  color: oklch(42% 0.015 200);
  white-space: nowrap;
  overflow: hidden;
}
.store-nav-sale { color: oklch(55% 0.1 75); }
.store-icons { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.icon-search {
  width: 15px;
  height: 15px;
  border: 1.6px solid oklch(48% 0.015 200);
  border-radius: 999px;
  position: relative;
  display: block;
}
.icon-search-handle {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 6px;
  height: 1.6px;
  background: oklch(48% 0.015 200);
  transform: rotate(45deg);
  display: block;
}
.icon-bag { position: relative; display: block; }
.icon-bag-body {
  width: 16px;
  height: 14px;
  border: 1.6px solid oklch(30% 0.015 200);
  border-radius: 0 0 4px 4px;
  border-top: none;
  display: block;
  margin-top: 4px;
}
.icon-bag-handle {
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 7px;
  border: 1.6px solid oklch(30% 0.015 200);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  display: block;
}
.icon-bag-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  background: oklch(55% 0.1 75);
  color: white;
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.store-content { padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 32px); }
.store-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(52% 0.09 75);
  margin-bottom: 8px;
}
.store-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.05;
  color: oklch(22% 0.015 200);
  margin: 0 0 3px;
}
.store-sub { font-size: 14px; color: oklch(48% 0.015 200); margin-bottom: 22px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}
.shop-img {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid oklch(92% 0.01 90);
}
.shop-img--warm { background: linear-gradient(140deg, oklch(91% 0.015 90), oklch(85% 0.025 85)); }
.shop-img--sage { background: linear-gradient(140deg, oklch(90% 0.03 128), oklch(85% 0.04 150)); }
.shop-img--stone { background: linear-gradient(140deg, oklch(90% 0.025 200), oklch(85% 0.035 205)); }
.shop-img--dusk { background: linear-gradient(140deg, oklch(90% 0.025 300), oklch(84% 0.04 290)); }
.shop-name { font-size: 13px; font-weight: 700; color: oklch(26% 0.015 200); }
.shop-price { font-size: 12.5px; color: oklch(50% 0.015 200); }

/* ---------- Hero chat widget ---------- */

.widget {
  position: absolute;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 22px);
  width: clamp(258px, 26vw, 322px);
  background: white;
  border-radius: 14px;
  box-shadow: 0 22px 48px -18px oklch(15% 0.03 200 / 0.6);
  overflow: hidden;
  z-index: 5;
}
.widget-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  background: oklch(23% 0.028 200);
}
.widget-live {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: oklch(84% 0.09 75);
  animation: sbLive 2s ease-in-out infinite;
  display: block;
  flex-shrink: 0;
}
.widget-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.widget-name { font-size: 13px; font-weight: 700; color: white; }
.widget-role { font-size: 10.5px; color: oklch(78% 0.05 75); }
.widget-time {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: oklch(80% 0.06 75);
  flex-shrink: 0;
}
.widget-msgs {
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: clamp(158px, 17vw, 206px);
  overflow-y: auto;
  background: oklch(98% 0.005 90);
}
.widget-input-row {
  padding: 10px 13px 13px;
  border-top: 1px solid oklch(93% 0.008 90);
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
}
.widget-input {
  flex: 1;
  min-width: 0;
  background: oklch(97% 0.008 90);
  border: 1px solid oklch(90% 0.012 90);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 12.5px;
  color: oklch(60% 0.012 200);
}

.send-btn {
  border-radius: 999px;
  background: var(--accent-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.send-btn--sm { width: 34px; height: 34px; }
.send-btn--lg { width: 38px; height: 38px; transition: background .3s ease; }
.send-arrow { color: white; font-size: 13px; line-height: 1; display: block; }
.send-arrow--lg { font-size: 15px; }

/* ---------- Chat messages (shared, sm = hero widget, lg = demo panel) ---------- */

.msg-row { display: flex; }
.msg-row--user { justify-content: flex-end; }
.msg-row--bot { justify-content: flex-start; }
.msg-col { display: flex; flex-direction: column; width: 100%; }
.chat--sm .msg-col { gap: 8px; }
.chat--lg .msg-col { gap: 9px; }

.bubble {
  font-size: 14px;
  padding: 11px 15px;
  max-width: 90%;
  animation: sbPop .3s ease both;
}
.bubble--user {
  background: var(--accent-base);
  color: white;
  line-height: 1.5;
  border-radius: 15px 15px 4px 15px;
  align-self: flex-end;
  transition: background .3s ease;
}
.bubble--bot {
  background: oklch(95% 0.01 90);
  color: oklch(25% 0.015 200);
  line-height: 1.55;
  border-radius: 15px 15px 15px 4px;
  align-self: flex-start;
}

.caret {
  display: inline-block;
  width: 2px;
  background: currentColor;
  opacity: .65;
  margin-left: 2px;
  vertical-align: middle;
  animation: sbBlink 0.8s step-end infinite;
}
.chat--sm .caret { height: 11px; }
.chat--lg .caret { height: 12px; }

.skeletons { display: flex; }
.chat--sm .skeletons { gap: 8px; }
.chat--lg .skeletons { gap: 10px; }
.skel {
  flex: 1;
  background: oklch(93% 0.01 90);
  animation: sbSkeleton 1s ease-in-out infinite;
}
.skel--b { animation-delay: .15s; }
.chat--sm .skel { height: 98px; border-radius: 11px; }
.chat--lg .skel { height: 112px; border-radius: 13px; }

.prod-cards { display: flex; }
.chat--sm .prod-cards { gap: 8px; }
.chat--lg .prod-cards { gap: 10px; }
.prod-card {
  flex: 1;
  background: white;
  border: 1px solid oklch(91% 0.01 90);
  min-width: 0;
  animation: sbPop .3s ease both;
}
.chat--sm .prod-card {
  border-radius: 11px;
  padding: 8px;
  box-shadow: 0 5px 13px -9px oklch(35% 0.03 200 / 0.5);
}
.chat--lg .prod-card {
  border-radius: 13px;
  padding: 9px;
  box-shadow: 0 6px 15px -10px oklch(35% 0.03 200 / 0.4);
}
.prod-img { animation: sbStripeMove 6s linear infinite; }
.chat--sm .prod-img { height: 48px; border-radius: 7px; margin-bottom: 7px; }
.chat--lg .prod-img { height: 58px; border-radius: 8px; margin-bottom: 8px; }
.prod-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat--sm .prod-name { font-size: 10.5px; color: oklch(24% 0.015 200); }
.chat--lg .prod-name { font-size: 11.5px; color: oklch(22% 0.015 200); }
.chat--sm .prod-meta { font-size: 10px; color: oklch(50% 0.015 200); margin: 2px 0 6px; }
.chat--lg .prod-meta { font-size: 11px; color: oklch(51% 0.015 200); margin: 2px 0 7px; }
.prod-btn {
  text-align: center;
  border-radius: 999px;
  background: var(--accent-base);
  color: white;
  font-weight: 700;
}
.chat--sm .prod-btn { padding: 4px 0; font-size: 9.5px; }
.chat--lg .prod-btn { padding: 5px 0; font-size: 10.5px; transition: background .3s ease; }

.typing {
  align-self: flex-start;
  background: oklch(95% 0.01 90);
  display: flex;
  gap: 4px;
  animation: sbPop .25s ease both;
}
.chat--sm .typing { padding: 11px 14px; border-radius: 14px 14px 14px 4px; }
.chat--lg .typing { padding: 13px 16px; border-radius: 15px 15px 15px 4px; }
.tdot {
  border-radius: 999px;
  background: oklch(58% 0.02 200);
  animation: sbDot 1.2s infinite;
  display: block;
}
.chat--sm .tdot { width: 5px; height: 5px; }
.chat--lg .tdot { width: 6px; height: 6px; }
.tdot:nth-child(2) { animation-delay: .2s; }
.tdot:nth-child(3) { animation-delay: .4s; }

/* ---------- Demo section ---------- */

.demo {
  padding: clamp(48px, 6vw, 84px) clamp(20px, 6vw, 56px);
  background: oklch(96% 0.014 87);
  color: oklch(22% 0.015 200);
  border-top: 1px solid oklch(32% 0.03 200);
}
.demo-container { max-width: 1180px; margin: 0 auto; }
.demo-header { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }

.kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(52% 0.09 75);
  margin-bottom: 16px;
}
.kicker--tight { margin-bottom: 10px; }
.kicker--brass { color: oklch(84% 0.09 75); margin-bottom: 20px; }

.section-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: oklch(20% 0.015 200);
  margin: 0 0 14px;
}
.demo-lede {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.6;
  color: oklch(42% 0.015 200);
  margin: 0;
  text-wrap: pretty;
}

.demo-layout {
  display: flex;
  gap: clamp(28px, 4vw, 48px);
  align-items: flex-start;
  flex-wrap: wrap;
}

.demo-panel {
  flex: 0 1 460px;
  min-width: 290px;
  background: oklch(99.3% 0.004 90);
  border: 1px solid oklch(89% 0.012 90);
  border-radius: 22px;
  box-shadow: 0 34px 76px -34px oklch(25% 0.03 200 / 0.35);
  overflow: hidden;
}
.demo-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 19px;
  border-bottom: 1px solid oklch(92% 0.01 90);
  background: oklch(23% 0.028 200);
}
.demo-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(140deg, oklch(84% 0.09 75), oklch(72% 0.1 70));
  position: relative;
  flex-shrink: 0;
  display: block;
  transition: background .3s ease;
}
.demo-icon-star {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  background: white;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.demo-id { display: flex; flex-direction: column; line-height: 1.2; }
.demo-store-name { font-size: 14px; font-weight: 700; color: white; }
.demo-store-tagline { font-size: 11.5px; color: oklch(72% 0.03 200); }

.demo-msgs {
  padding: 18px 19px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 360px;
  overflow-y: auto;
  background: oklch(98.5% 0.005 90);
}

.demo-input-row {
  padding: 12px 16px 16px;
  border-top: 1px solid oklch(92% 0.01 90);
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
}
.demo-input {
  flex: 1;
  min-width: 0;
  background: oklch(97% 0.008 90);
  border: 1px solid oklch(89% 0.012 90);
  border-radius: 14px;
  padding: 11px 15px;
  font-size: 13.5px;
  line-height: 1.4;
  color: oklch(28% 0.015 200);
  min-height: 20px;
}
.demo-typed { display: none; }
.input-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: oklch(30% 0.015 200);
  margin-left: 1px;
  vertical-align: middle;
  animation: sbBlink 1s step-end infinite;
}
.input-placeholder { color: oklch(60% 0.012 200); }

.customize {
  flex: 1 1 280px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 4px;
}
.customize-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: oklch(20% 0.015 200);
  margin: 0 0 8px;
}
.customize-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: oklch(45% 0.015 200);
  margin: 0;
  text-wrap: pretty;
}

.option-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(52% 0.015 200);
  margin-bottom: 10px;
}

.store-opts { display: flex; flex-direction: column; gap: 8px; }
.store-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  width: 100%;
  padding: 12px 15px;
  border-radius: 12px;
  cursor: pointer;
  background: oklch(99% 0.004 90);
  border: 1.5px solid oklch(88% 0.015 90);
  transition: all .2s ease;
}
.store-opt.active { background: var(--accent-tint); border-color: var(--accent-base); }
.store-opt-label { font-size: 14px; font-weight: 700; color: oklch(20% 0.015 200); }
.store-opt-sub { font-size: 12px; color: oklch(52% 0.015 200); }
.store-opt.active .store-opt-sub { color: var(--accent-dark); }

.accent-opts { display: flex; align-items: center; gap: 10px; }
.accent-dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--dot);
  border: 2.5px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: box-shadow .2s ease;
}
.accent-dot.active { border-color: white; box-shadow: 0 0 0 2px var(--dot); }

/* ---------- Grounded ---------- */

.grounded {
  padding: clamp(52px, 7vw, 96px) clamp(20px, 6vw, 56px);
  background: oklch(20% 0.025 200);
  color: oklch(94% 0.008 200);
}
.grounded-container {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
  flex-wrap: wrap;
}
.grounded-chat-col { flex: 0 1 400px; min-width: 280px; }
.grounded-card {
  background: oklch(24% 0.028 200);
  border: 1px solid oklch(33% 0.03 200);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grounded-bubble-user {
  align-self: flex-end;
  max-width: 88%;
  background: oklch(84% 0.09 75);
  color: oklch(17% 0.03 190);
  font-size: 14px;
  line-height: 1.5;
  padding: 11px 15px;
  border-radius: 15px 15px 4px 15px;
}
.grounded-bubble-bot {
  align-self: flex-start;
  max-width: 92%;
  background: oklch(30% 0.03 200);
  color: oklch(93% 0.008 200);
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 15px;
  border-radius: 15px 15px 15px 4px;
}
.grounded-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: oklch(80% 0.06 75);
}
.grounded-note-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: oklch(84% 0.09 75);
  display: block;
}
.grounded-copy { flex: 1 1 420px; min-width: 0; }
.grounded-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: oklch(96% 0.006 200);
  margin: 0 0 20px;
}
.grounded-p1 {
  font-size: clamp(16px, 1.8vw, 18.5px);
  line-height: 1.62;
  color: oklch(78% 0.02 200);
  max-width: 480px;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.grounded-p2 {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.62;
  color: oklch(66% 0.02 200);
  max-width: 480px;
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Outcomes ---------- */

.outcomes {
  padding: clamp(52px, 7vw, 96px) clamp(20px, 6vw, 56px);
  background: oklch(98.5% 0.004 95);
  color: oklch(22% 0.015 200);
  border-top: 1px dashed oklch(84% 0.025 85);
}
.outcomes-container { max-width: 1180px; margin: 0 auto; }
.outcomes-header { max-width: 560px; margin-bottom: clamp(32px, 4vw, 52px); }
.outcomes-header .section-title { margin: 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.outcomes-grid { gap: clamp(16px, 2vw, 22px); }

.outcome-card {
  position: relative;
  background: white;
  border: 1px solid oklch(90% 0.015 200);
  border-radius: 20px;
  padding: clamp(24px, 2.4vw, 30px);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.outcome-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -28px oklch(35% 0.04 200 / 0.4);
  border-color: oklch(72% 0.05 200);
}
.outcome-num {
  position: absolute;
  top: 2px;
  right: 18px;
  font-family: 'Instrument Serif', serif;
  font-size: 96px;
  line-height: 1;
  color: oklch(93% 0.02 200);
  pointer-events: none;
  transition: color .3s ease, transform .3s ease;
}
.outcome-card:hover .outcome-num { color: oklch(89% 0.055 80); transform: translateY(-2px); }
.outcome-icon {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: oklch(94% 0.022 200);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.outcome-title {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: oklch(22% 0.02 200);
  margin: 0 0 10px;
}
.outcome-text {
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: oklch(44% 0.02 200);
  margin: 0;
  text-wrap: pretty;
}

/* ---------- How it works ---------- */

.how {
  padding: clamp(52px, 7vw, 96px) clamp(20px, 6vw, 56px);
  background: oklch(96% 0.014 87);
  color: oklch(22% 0.015 200);
  border-top: 1px dashed oklch(84% 0.025 85);
  border-bottom: 1px dashed oklch(84% 0.025 85);
}
.how-container { max-width: 1180px; margin: 0 auto; }
.how-header { max-width: 560px; margin-bottom: clamp(32px, 4vw, 52px); }
.how-header .section-title { margin: 0; }

.how-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-bottom: 36px;
}
.how-step { display: flex; flex-direction: column; }
.how-badge-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.step-down { display: none; }
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: oklch(26% 0.028 200);
  color: white;
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-num--accent { background: oklch(84% 0.09 75); color: oklch(17% 0.03 190); }
.step-connector { flex: 1; display: flex; align-items: center; gap: 9px; }
.step-connector svg { flex-shrink: 0; display: block; }
.step-line { flex: 1; height: 0; border-top: 2px dashed oklch(78% 0.015 200); }
.step-line--brass { border-top-color: oklch(78% 0.06 78); }

.step-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: oklch(20% 0.015 200);
  margin: 0 0 9px;
}
.step-text {
  font-size: 15px;
  line-height: 1.6;
  color: oklch(43% 0.015 200);
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Pricing ---------- */

.pricing {
  padding: clamp(52px, 7vw, 96px) clamp(20px, 6vw, 56px);
  background: oklch(98.5% 0.004 95);
  color: oklch(22% 0.015 200);
}
.pricing-container {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: clamp(36px, 6vw, 64px);
  flex-wrap: wrap;
  align-items: center;
}
.pricing-copy { flex: 1 1 340px; min-width: 0; }
.pricing-title { margin: 0 0 18px; }
.pricing-lede {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.62;
  color: oklch(42% 0.015 200);
  max-width: 420px;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.pricing-note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: oklch(46% 0.015 200);
}
.pricing-note-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: oklch(60% 0.09 75);
  display: block;
}

.price-card {
  flex: 0 1 380px;
  min-width: 290px;
  background: oklch(97% 0.012 200);
  border: 1px solid oklch(87% 0.025 200);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 34px);
  box-shadow: 0 30px 68px -34px oklch(30% 0.03 200 / 0.35);
}
.price-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; }
.price-amount {
  font-family: 'Instrument Serif', serif;
  font-size: 56px;
  line-height: 1;
  color: oklch(24% 0.035 200);
}
.price-period { font-size: 16px; font-weight: 500; color: oklch(48% 0.02 200); }
.price-sub { font-size: 14px; color: oklch(46% 0.02 200); margin: 0 0 22px; }

.plan-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.plan-item { display: flex; align-items: flex-start; gap: 11px; }
.plan-check {
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: oklch(90% 0.03 200);
  color: oklch(36% 0.05 200);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.plan-text { font-size: 14.5px; line-height: 1.45; color: oklch(30% 0.02 200); }
.fair-use { font-size: 11.5px; line-height: 1.5; color: oklch(52% 0.02 200); margin: -12px 0 22px; }

.price-cta {
  display: block;
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  color: oklch(17% 0.03 190);
  background: oklch(84% 0.09 75);
  padding: 15px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 26px -12px oklch(70% 0.1 75 / 0.7);
  transition: transform .25s ease;
}

/* ---------- FAQ ---------- */

.faq {
  padding: clamp(52px, 7vw, 96px) clamp(20px, 6vw, 56px);
  background: oklch(96% 0.014 87);
  color: oklch(22% 0.015 200);
  border-top: 1px dashed oklch(84% 0.025 85);
}
.faq-container { max-width: 820px; margin: 0 auto; }
.faq-title { margin: 0 0 clamp(28px, 4vw, 44px); }
.faq-list { display: flex; flex-direction: column; gap: 0; }

.faq-item { border-top: 1px dashed oklch(80% 0.02 90); }
.faq-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: 'Hanken Grotesk', sans-serif;
}
.faq-q-text {
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 700;
  color: oklch(22% 0.015 200);
  letter-spacing: -0.005em;
}
.faq-icon {
  font-size: 22px;
  font-weight: 400;
  color: oklch(55% 0.1 75);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
}
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { min-height: 0; overflow: hidden; }
.faq-a {
  font-size: 15.5px;
  line-height: 1.62;
  color: oklch(42% 0.015 200);
  margin: 0;
  padding: 0 0 22px;
  max-width: 660px;
  text-wrap: pretty;
  opacity: 0;
  transition: opacity .3s ease 0s;
}
.faq-item.open .faq-a { opacity: 1; transition: opacity .3s ease .12s; }

/* ---------- Final CTA ---------- */

.final-cta {
  padding: clamp(60px, 8vw, 110px) clamp(20px, 6vw, 56px);
  background: oklch(20% 0.025 200);
  color: oklch(95% 0.008 200);
  position: relative;
  overflow: hidden;
}
.final-glow {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  width: min(1100px, 120%);
  height: 150%;
  background: radial-gradient(58% 46% at 50% 100%, oklch(75% 0.09 75 / 0.28), oklch(75% 0.09 75 / 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.final-inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.final-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: oklch(84% 0.09 75);
  margin-bottom: 20px;
  animation: sbNeon 3.4s ease-in-out infinite;
}
.final-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: oklch(96% 0.006 200);
  margin: 0 0 20px;
}
.final-sub {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  color: oklch(76% 0.02 200);
  max-width: 500px;
  margin: 0 auto 32px;
  text-wrap: pretty;
}
.final-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: oklch(17% 0.03 190);
  background: oklch(84% 0.09 75);
  padding: 17px 34px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 34px -12px oklch(84% 0.09 75 / 0.5);
  transition: transform .25s ease;
}

/* ---------- Footer ---------- */

.footer {
  padding: 32px clamp(20px, 6vw, 56px);
  background: oklch(17% 0.022 200);
  color: oklch(70% 0.02 200);
  border-top: 1px solid oklch(28% 0.028 200);
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: baseline; gap: 9px; }
.footer-logo { font-family: 'Instrument Serif', serif; font-size: 17px; color: oklch(92% 0.008 200); }
.footer-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: oklch(75% 0.06 75);
  letter-spacing: 0.12em;
}
.footer-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: oklch(56% 0.015 200); }

/* ---------- Scroll reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  .receipt { display: none; }
}

@media (max-width: 859px) {
  .nav-links { display: none; }
  .nav-mobile { display: flex; }
  .mobile-menu { display: grid; }
  .grid-3 { grid-template-columns: 1fr; }

  /* Demo: customization becomes a sticky "remote control" pinned to the bottom
     of the screen while the demo is in view */
  .demo-panel { flex: 1 1 100%; }
  /* Customize bar: floats fixed over the page — flies up from the bottom
     while the live demo is in frame, flies back down when it isn't */
  .customize {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 90;
    max-width: 480px;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 20px;
    background: oklch(22% 0.028 200 / 0.92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid oklch(40% 0.035 200 / 0.55);
    box-shadow: 0 18px 44px -16px oklch(8% 0.02 200 / 0.65);
    transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
  }
  .customize.bar-hidden {
    opacity: 0;
    transform: translateY(calc(100% + 24px));
    pointer-events: none;
  }
  .customize > div:first-child { display: none; }
  .customize > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
  .customize > div:nth-child(3) {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .customize .option-label { color: oklch(76% 0.03 200); margin-bottom: 6px; white-space: nowrap; }

  /* Store type: vertical snap-scroll wheel (iPhone-alarm style) — swipe or
     tap a row; the row that lands in the center is the selection */
  .store-opts {
    display: block;
    height: 102px;
    padding: 34px 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 34%, black 66%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 34%, black 66%, transparent);
  }
  .store-opts::-webkit-scrollbar { display: none; }
  .store-opt {
    display: flex;
    align-items: center;
    height: 34px;
    width: 100%;
    padding: 0 0 0 4px;
    border: none;
    border-radius: 0;
    background: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    opacity: .4;
    transition: opacity .3s ease;
  }
  .store-opt.active { opacity: 1; background: none; }
  .store-opt-label { color: oklch(94% 0.008 200); font-size: 15px; white-space: nowrap; }
  .store-opt.active .store-opt-label { color: oklch(84% 0.09 75); }
  .store-opt-sub { display: none; }

  .accent-opts { flex: 1; align-items: center; gap: clamp(4px, 1.6vw, 9px); }
  .accent-dot { width: clamp(19px, 6.2vw, 26px); height: clamp(19px, 6.2vw, 26px); }
  .accent-dot.active { box-shadow: 0 0 0 2px oklch(84% 0.09 75); }

  /* How it works: vertical flow — number left, text right, arrows dropping
     down the number column from 1 to 2 to 3 */
  .how-flow { display: flex; flex-direction: column; gap: 0; }
  .how-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 18px;
    align-items: start;
    padding-bottom: 34px;
  }
  .how-step:last-child { padding-bottom: 0; }
  .how-badge-row { grid-column: 1; grid-row: 1; margin: 0; }
  .step-connector { display: none; }
  .how-step-body { grid-column: 2; grid-row: 1; padding-top: 7px; }
  /* connector runs the full gap down the number column, chevron landing
     just above the next number */
  .step-down {
    display: block;
    position: absolute;
    left: 20px;
    top: 47px;
    bottom: 6px;
    width: 0;
    padding: 0;
  }
  .step-down-line { position: absolute; top: 0; bottom: 12px; left: -1px; width: 0; border-left: 2px dashed oklch(78% 0.015 200); }
  .step-down svg { display: block; position: absolute; bottom: 0; left: -7px; }
  .step-down--brass .step-down-line { border-left-color: oklch(78% 0.06 78); }
}

@media (max-width: 700px) {
  /* Hero mockup becomes a phone: storefront in a handset frame with the
     Sparkbar widget rising and dipping as a bottom sheet */
  .hero { padding-bottom: 44px; }
  .hero-title { font-size: clamp(40px, 13vw, 56px); }
  .browser-wrap { max-width: 375px; margin-left: auto; margin-right: auto; }
  .browser {
    display: flex;
    flex-direction: column;
    height: min(74vh, 620px);
    border-radius: 34px;
    border: 5px solid oklch(30% 0.02 200);
  }
  .browser-dots, .browser-spacer { display: none; }
  .browser-body { flex: 1; height: auto; }
  .store-nav { display: none; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .widget {
    left: 8px;
    right: 8px;
    bottom: 0;
    width: auto;
    border-radius: 18px 18px 0 0;
    transform: translateY(calc(100% - 54px));
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .widget.open { transform: translateY(0); }
  .widget-head { position: relative; padding-top: 17px; cursor: pointer; }
  .widget-head::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: oklch(45% 0.03 200);
  }
  .widget-msgs { height: 210px; }
}