* { box-sizing: border-box; }
:root { color-scheme: light; }
body { margin: 0; background: var(--color-background); color: var(--color-ink); font: 15px/1.5 var(--font-body), sans-serif; }
a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-green); outline-offset: 5px; }
[hidden] { display: none !important; }
p, h1 { margin: 0; }
.masthead { max-width: 1600px; margin: auto; padding: 22px 5%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; width: 158px; flex: none; }
.brand img { display: block; width: 100%; height: auto; }
.masthead nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.privacy { text-decoration: none; padding: 10px 0; text-underline-offset: 5px; }
.privacy:hover { text-decoration: underline; }
.nav-action { display: inline-flex; align-items: center; gap: 24px; padding: 11px 17px; border: 1px solid var(--color-card-border); border-radius: 9px; text-decoration: none; color: var(--color-primary); background: var(--color-surface); }
.nav-action:hover { border-color: var(--color-primary); }
main { max-width: 1600px; margin: auto; }
.hero { display: grid; grid-template-columns: 40% 60%; padding: 26px 0 0 5%; align-items: center; min-height: min(720px, calc(100svh - 160px)); }
.hero-copy { position: relative; z-index: 2; padding: 25px 0 60px; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--color-green); margin-bottom: 24px; }
.eyebrow span, .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-green); flex: none; }
h1 { color: var(--color-primary); font-size: clamp(46px, 4.6vw, 74px); letter-spacing: -.065em; line-height: 1.02; font-weight: 750; }
h1 em { font-style: normal; color: var(--color-green); }
.intro { margin: 27px 0 30px; color: var(--color-ink-soft); font-size: 17px; line-height: 1.7; max-width: 440px; }
.primary-action { display: inline-flex; align-items: center; gap: 29px; padding: 17px 23px; background: var(--color-primary); color: var(--color-on-primary); border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600; box-shadow: 0 8px 15px color-mix(in srgb, var(--color-primary) 12%, transparent); transition: transform .2s, box-shadow .2s; }
.primary-action span { font-size: 21px; line-height: 1; transition: transform .2s; }
.primary-action:hover { transform: translateY(-3px); box-shadow: 0 11px 20px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.primary-action:hover span { transform: translate(2px, -2px); }
.action-note { margin-top: 16px; color: var(--color-ink-soft); font-size: 13px; }
.benefits { list-style: none; display: flex; flex-wrap: wrap; gap: 25px; padding: 0; margin: 31px 0 0; color: var(--color-ink-soft); font-size: 12px; }
.benefits li { display: flex; align-items: center; gap: 7px; }
.benefits span { color: var(--color-green); font-size: 16px; }
.stockroom { --mx: 0; --my: 0; position: relative; min-width: 0; height: auto; display: flex; flex-direction: column; isolation: isolate; perspective: 1400px; }
.scene-wash { position: absolute; width: 85%; aspect-ratio: 1; right: 5%; top: -5%; z-index: -1; background: radial-gradient(ellipse, var(--color-mint), color-mix(in srgb, var(--color-mint) 42%, transparent) 45%, transparent 70%); pointer-events: none; }
.scene-art { position: relative; width: 96%; left: -2%; top: 0; aspect-ratio: 4/3; transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 4px), 0) rotateY(calc(var(--mx) * 1.2deg)); transform-origin: 50% 65%; }
.room-art { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 18px color-mix(in srgb, var(--color-primary) 9%, transparent)); }
.cartons { position: absolute; inset: 0; pointer-events: none; }
.carton { position: absolute; width: 19%; height: auto; filter: drop-shadow(0 6px 3px color-mix(in srgb, var(--color-ink) 14%, transparent)); }
.carton-back { left: 56%; top: 57%; z-index: 2; }
.carton-front { left: 50%; top: 63%; z-index: 3; }
.carton-top { left: 51%; top: 52%; z-index: 4; }
.inventory-tag { position: relative; z-index: 5; width: 90%; margin: -4px 5% 20px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: 14px; box-shadow: 0 18px 45px color-mix(in srgb, var(--color-primary) 9%, transparent); padding: 19px 20px 15px; }
.sample-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: var(--color-green); font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 14px; }
.inventory-heading { grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--color-primary); font-size: 13px; font-weight: 600; }
.item-code { color: var(--color-ink-soft); font-size: 11px; font-weight: 400; }
.quantity { grid-column: 1; display: flex; align-items: baseline; gap: 9px; margin: 4px 0 0; }
.quantity strong { color: var(--color-primary); font-size: 43px; letter-spacing: -2px; line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; }
.quantity > span { color: var(--color-ink-soft); font-size: 11px; }
.unit-note { grid-column: 1; color: var(--color-ink-soft); font-size: 12px; }
.stock-controls { grid-column: 2; grid-row: 2 / 4; align-self: center; display: flex; gap: 8px; margin-top: 16px; }
.stock-controls button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 7px; border: 0; border-radius: 7px; font-size: 12px; font-weight: 600; transition: transform .18s, background-color .18s; }
.stock-in { background: var(--color-green); color: var(--color-on-primary); }
.stock-out { background: var(--color-mint); color: var(--color-primary); }
.stock-controls button:hover { transform: translateY(-2px); }
.stock-controls button:disabled { opacity: .45; cursor: default; transform: none; }
.stock-controls button span { font-size: 18px; line-height: 1; }
.demo-status { grid-column: 2; grid-row: 4; font-size: 12px; line-height: 1.45; min-height: 29px; margin-top: 10px; color: var(--color-ink-soft); }
.companion { position: absolute; left: -5%; bottom: 190px; display: flex; align-items: center; gap: 5px; transform: rotate(-4deg); }
.companion img { width: 69px; height: 69px; object-fit: contain; }
.companion p { font-size: 11px; line-height: 1.45; color: var(--color-green); }
.hero-footnote { margin: 5px 5% 0; padding: 24px 0 25px; border-top: 1px solid var(--color-card-border); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--color-ink-soft); font-size: 11px; }
/* Sample assistant message: types once, then the card confirms and the
   carton balance drops. Shown only when JavaScript runs. */
.hero-chat { position: absolute; z-index: 6; top: 2%; left: 3%; width: 250px; display: grid; gap: 8px; font-size: 13px; }
.hero-chat-label { justify-self: start; padding: 2px 8px; border-radius: 99px; background: var(--color-mint); color: var(--color-green); font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.hero-bubble { justify-self: end; max-width: 100%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 8px 18px color-mix(in srgb, var(--color-ink) 12%, transparent); }
.caret { display: none; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; }
.hero-chat.typing .caret { display: inline-block; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.hero-card { padding: 11px 13px; border: 1px solid var(--color-card-border); border-radius: 12px; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 10px 24px color-mix(in srgb, var(--color-ink) 10%, transparent); transition: opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.hero-card p { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--color-primary); }
.hero-card .hero-card-qty { color: var(--color-ink-soft); margin: 2px 0 9px; }
.hero-chat.pending .hero-card { opacity: 0; transform: translateY(14px); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--color-mint); color: var(--color-green); font-size: 11px; font-weight: 600; white-space: nowrap; }
.tag-out { background: var(--color-warning-surface); color: var(--color-warning); }
.mock-confirm { display: block; padding: 7px; border-radius: 8px; background: var(--color-green); color: var(--color-on-primary); text-align: center; font-weight: 600; transition: transform .15s, filter .15s; }
.confirmed .mock-confirm { transform: scale(.96); filter: brightness(.88); }
.confirmed .mock-confirm::after { content: " ✓"; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1100px) and (min-width: 761px) {
  .hero { grid-template-columns: 43% 57%; min-height: 640px; }
  .stockroom { height: auto; }
  .scene-art { width: 105%; left: -5%; top: 0; }
  h1 { font-size: 50px; }
  .intro { font-size: 15px; max-width: 300px; }
  .eyebrow { font-size: 12px; }
  .inventory-tag { width: 96%; margin: 0 2% 20px; padding: 16px; column-gap: 16px; }
  .stock-controls button { font-size: 11px; gap: 5px; white-space: nowrap; }
  .companion { display: none; }
}
@media (max-width: 760px) {
  .masthead { padding: 15px 22px; gap: 20px; }
  .brand { width: 135px; }
  .masthead nav { gap: 16px; font-size: 12px; }
  .nav-action { padding: 10px 12px; gap: 10px; }
  .hero { grid-template-columns: 1fr; padding: 23px 22px 0; min-height: 0; }
  .hero-copy { padding: 12px 0 20px; }
  h1 { font-size: clamp(42px, 11vw, 64px); }
  .eyebrow { font-size: 13px; margin-bottom: 19px; }
  .intro { font-size: 15px; margin: 20px 0 24px; }
  .primary-action { padding: 15px 20px; }
  .benefits { margin-top: 23px; }
  .stockroom { height: auto; margin-top: 3px; }
  .scene-art { width: 100%; top: 0; left: 0; }
  .scene-wash { top: -5%; right: 0; width: 100%; }
  .inventory-tag { display: block; width: 255px; margin: 8px 0 0 auto; }
  .companion { bottom: 34px; left: 0; flex-direction: column; text-align: center; }
  .hero-chat { position: relative; top: auto; left: auto; width: auto; max-width: 320px; margin: 0 0 8px auto; }
  .hero-footnote { margin: 18px 22px 0; padding: 20px 0; font-size: 10px; }
}
@media (max-width: 420px) {
  .masthead { padding: 13px 18px; gap: 12px; }
  .brand { width: 113px; }
  .masthead nav { gap: 14px; }
  .masthead .nav-action { display: none; }
  .privacy { min-height: 44px; display: inline-flex; align-items: center; }
  .hero { padding: 20px 20px 0; }
  .eyebrow { font-size: 12px; }
  .stockroom { margin-top: 18px; }
  .inventory-tag { width: 100%; padding: 17px 18px 12px; margin: 8px 0 0; }
  .companion { display: none; }
  .hero-footnote { margin: 25px 20px 0; align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (pointer: coarse) { .stock-controls button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .scene-art { transform: none !important; }
  .hero-chat.typing .caret { animation: none; }
  .primary-action:hover, .primary-action:hover span, .stock-controls button:hover { transform: none; }
}

/* Store badges: both stores on desktop, one per OS on phones. A store with no
   listing yet shows a muted "coming soon" badge and a link to the web app. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--color-action);
  background: var(--color-action);
  color: var(--color-on-action);
  text-decoration: none;
  line-height: 1.1;
  transition: transform .2s, background-color .2s, border-color .2s;
}
.store-icon { width: 26px; height: 26px; flex: none; transition: transform .3s; }
.store small { display: block; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.store b { display: block; font-size: 17px; font-weight: 500; }
a.store:is(:hover, :focus-visible) { transform: translateY(-3px); color: #fff; }
a.store:is(:hover, :focus-visible) .store-icon { animation: store-wiggle .5s ease; }
a.store-play:is(:hover, :focus-visible) { background: #01875F; border-color: #01875F; }
a.store-app:is(:hover, :focus-visible) { background: #000; border-color: #000; }
.store-soon { background: transparent; color: var(--color-on-background); border-style: dashed; opacity: .6; cursor: default; }
@keyframes store-wiggle { 25% { transform: rotate(-14deg) scale(1.1); } 60% { transform: rotate(10deg) scale(1.1); } }
.also { display: none; color: var(--color-on-background); font-size: 12px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .3s; }
.also:is(:hover, :focus-visible) { background-size: 100% 1px; }
html[data-os] .stores { gap: 12px 16px; }
html[data-os] .store { min-height: 56px; }
html[data-os] a.store { animation: store-pulse 2.4s ease-out infinite; }
@keyframes store-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-action) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
html[data-os="ios"] .store-play, html[data-os="android"] .store-app { display: none; }
html[data-os="android"] .store-play.store-soon ~ .also-web, html[data-os="ios"] .store-app.store-soon ~ .also-web { display: inline-block; }
@media (min-width: 1000px) { .stores { width: max-content; } }
@media (pointer: coarse) { .store { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .store, .store-icon, .also { transition: none; }
  html[data-os] a.store, a.store:is(:hover, :focus-visible) .store-icon { animation: none; }
  a.store:is(:hover, :focus-visible) { transform: none; }
}