/* =====================================================================
   KALEA — Design System
   Inspired by the premium consumer-electronics language of EcoFlow & Anker:
   bold display type, full-bleed sections, generous whitespace, modular
   feature blocks, sticky nav + persistent CTA, comparison tables.
   Brand soul: tidepool (aqua) + ink (deep sea) + coral (joy).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Core palette */
  --ink:        #0A1322;   /* deep sea — dark sections */
  --ink-2:      #0E1A2E;
  --ink-3:      #16243B;
  --paper:      #F7F3EA;   /* warm cream — light sections */
  --paper-2:    #F0F8EF;
  --white:      #FFFFFF;

  --aqua:       #21B6A8;   /* tidepool — primary accent */
  --aqua-deep:  #138A80;
  --aqua-soft:  #BFEDE7;
  --coral:      #FF6B52;   /* joy — CTA / energy */
  --coral-deep: #E8533B;
  --amber:      #FFB23E;   /* warmth */
  --violet:     #8E84E0;   /* octopus */

  --text:       #111A28;   /* on light */
  --text-muted: #59657A;
  --text-inv:   #EAF1F6;   /* on dark */
  --text-inv-muted: #93A4BB;

  --line:       rgba(17,26,40,0.12);
  --line-inv:   rgba(255,255,255,0.14);

  /* Type */
  --font-display: "Space Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing / shape */
  --radius:     18px;
  --radius-lg:  28px;
  --radius-pill: 999px;
  --maxw:       1200px;
  --gutter:     clamp(20px, 5vw, 64px);
  --section-y:  clamp(54px, 8.25vw, 120px);   /* 7 Sep 2026: 75% of the original clamp(72px,11vw,160px), approved on index first */

  --shadow-sm:  0 2px 8px rgba(10,19,34,0.06);
  --shadow:     0 18px 50px -22px rgba(10,19,34,0.35);
  --shadow-lg:  0 40px 90px -30px rgba(10,19,34,0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip (not hidden) prevents h-scroll WITHOUT breaking position:sticky descendants */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.display {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.025em; }
.h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--text-muted); font-weight: 400; }
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--aqua-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--aqua); display: inline-block; }
.text-coral { color: var(--coral-deep); }
.text-aqua  { color: var(--aqua-deep); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: clamp(42px, 6vw, 78px); }
.center { text-align: center; }
.measure { max-width: 60ch; }
.measure-narrow { max-width: 46ch; }
.center.measure, .center .measure { margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 1.8rem; }

.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.split.reverse > :first-child { order: 2; }

/* ---------- Theme sections ---------- */
.bg-ink   { background: var(--ink); color: var(--text-inv); }
.bg-ink h1,.bg-ink h2,.bg-ink h3 { color: var(--text-inv); }
.bg-ink .lede { color: var(--text-inv-muted); }
.bg-ink .eyebrow { color: var(--aqua); }
.bg-paper { background: var(--paper); }
.bg-white { background: var(--white); }
.bg-tide  { background: linear-gradient(160deg, #0A1322 0%, #102A3A 55%, #11463F 100%); color: var(--text-inv); }
.bg-tide h2,.bg-tide h3 { color: var(--text-inv); }
.bg-tide .lede { color: #BfeAe4; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 600; font-size: 1rem;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 10px 24px -8px rgba(255,107,82,0.6); }
.btn-primary:hover { background: var(--coral-deep); box-shadow: 0 16px 32px -10px rgba(255,107,82,0.7); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); }
.btn-light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; border: 1.5px solid currentColor; }
.btn-ghost:hover { background: currentColor; }
.btn-ghost.on-dark:hover { color: var(--ink); }
.btn-ghost.on-light:hover { color: #fff; }
.btn-lg { font-size: 1.08rem; padding: 1.05em 2em; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 600; color: var(--aqua-deep); }
.link-arrow .arrow { transition: transform .25s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(4px); }
.bg-ink .link-arrow, .bg-tide .link-arrow { color: var(--aqua); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.nav.scrolled {
  background: rgba(247,243,234,0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 12px;
}
.nav.scrolled.on-dark-top { background: rgba(10,19,34,0.78); box-shadow: 0 1px 0 var(--line-inv); }
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.nav__brand svg { width: 30px; height: 30px; }
.nav__brand img { width: 34px; height: 34px; object-fit: contain; }
/* nav tagline — two rows under the wordmark, in the body face, tidepool aqua (same as the Start page kicker) */
.nav__wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.nav__tagline { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .01em; line-height: 1.25; color: var(--aqua); margin-top: 3px; white-space: nowrap; }
.nav.scrolled:not(.on-dark-top) .nav__tagline { color: var(--aqua-deep); }
.nav:not(.nav--dark) .nav__tagline { color: var(--aqua-deep); }   /* light-topped pages */
@media (max-width: 520px) { .nav__tagline { display: none; } }
.footer__brand img { width: 40px; height: 40px; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav__links a { font-weight: 500; font-size: 0.97rem; opacity: 0.85; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__ok { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; padding-inline: 1.15em; } /* OK! — the OpenKalea shorthand mark, set in the mark's face (Space Grotesk Bold) */
.nav--light { color: var(--text); }
.nav--dark { color: var(--text-inv); }
.nav__toggle { display: none; width: 30px; height: 30px; }
.nav__toggle span { display:block; width: 22px; height: 2px; background: currentColor; margin: 5px auto; transition: .3s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding-top: 120px; padding-bottom: 60px;
  background: radial-gradient(120% 90% at 78% 18%, #11463F 0%, #0E2436 42%, #0A1322 100%);
  color: var(--text-inv); overflow: hidden;
}
.hero__glow { position:absolute; border-radius: 50%; filter: blur(80px); opacity: .5; pointer-events:none; }
.hero__glow.g1 { width: 480px; height: 480px; background: #1FB6A8; top: -120px; right: -60px; }
.hero__glow.g2 { width: 420px; height: 420px; background: #8E84E0; bottom: -160px; left: -80px; opacity:.32; }
.hero__glow.g3 { width: 360px; height: 360px; background: #FF6B52; top: 30%; right: 24%; opacity:.18; }
.hero .split { position: relative; z-index: 2; }
.hero__art { position: relative; display: flex; justify-content: center; }
.hero__badges { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 8px; }
.badge {
  display:inline-flex; align-items:center; gap:.5em;
  font-size: 0.82rem; font-weight: 600; font-family: var(--font-display);
  padding: 0.5em 0.95em; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08); border: 1px solid var(--line-inv); color: var(--text-inv);
}
.badge svg { width: 15px; height: 15px; }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--aqua-soft); color: var(--aqua-deep); }
.card__icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: 0.98rem; }
.bg-ink .card, .bg-tide .card { background: rgba(255,255,255,0.04); border-color: var(--line-inv); color: var(--text-inv); }
.bg-ink .card p, .bg-tide .card p { color: var(--text-inv-muted); }
.bg-ink .card__icon, .bg-tide .card__icon { background: rgba(33,182,168,0.16); color: var(--aqua); }

.card--feature { display:flex; flex-direction:column; }

/* Pill tag */
.tag { display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.4em .8em; border-radius:var(--radius-pill); background:var(--aqua-soft); color:var(--aqua-deep); }
.tag--coral { background: #FFE0D8; color: var(--coral-deep); }
.tag--violet { background: #E6E3F8; color: #5b50b8; }

/* ---------- Stat ---------- */
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--aqua); }
.stat__label { color: var(--text-inv-muted); font-size: 0.95rem; margin-top: 8px; }

/* ---------- Pull quote ---------- */
.pullquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.16; letter-spacing: -0.02em; }
.pullquote .accent { color: var(--coral); }
.pullquote cite { display:block; font-family:var(--font-body); font-weight:600; font-size: .9rem; font-style: normal; letter-spacing:.08em; text-transform:uppercase; margin-top:1.4em; color: var(--text-inv-muted); }

/* ---------- Comparison table ---------- */
.compare { width:100%; border-collapse: separate; border-spacing: 0; font-size: 0.98rem; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.compare .col-kalea { background: var(--ink); color: var(--text-inv); }
.compare thead .col-kalea { color: var(--white); border-top-left-radius: 16px; border-top-right-radius: 16px; }
.compare tbody tr:last-child .col-kalea { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.compare .col-kalea { border-bottom-color: var(--line-inv); }
.compare .yes { color: var(--aqua); font-weight: 700; }
.compare .no  { color: #c2502f; font-weight: 700; }
.compare td:first-child { font-weight: 600; }

/* Home-page comparison: Kalea column reads like the others, framed in an aqua box */
.compare--outline .col-kalea { background: transparent; color: var(--text); border-bottom-color: var(--line); border-left: 2px solid var(--aqua); border-right: 2px solid var(--aqua); }
.compare--outline thead .col-kalea { color: var(--text-muted); border-top: 2px solid var(--aqua); }
.compare--outline tbody tr:last-child .col-kalea { border-bottom: 2px solid var(--aqua); }

/* ---------- Steps / pedagogy rail ---------- */
.steps { counter-reset: step; }
.step { display:flex; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line-inv); }
.step:last-child { border-bottom: none; }
.bg-white .step, .bg-paper .step { border-bottom-color: var(--line); }   /* steps on a light section */
.bg-white .step__n, .bg-paper .step__n { border-color: var(--aqua-deep); color: var(--aqua-deep); }
.step__n { counter-increment: step; flex: none; width: 46px; height: 46px; border-radius: 50%; display:grid; place-items:center;
  font-family: var(--font-display); font-weight:600; border: 1.5px solid var(--aqua); color: var(--aqua); }
.step__n::before { content: "0" counter(step); }

/* ---------- Lineup cards ---------- */
.tier { display:flex; flex-direction:column; border-radius: var(--radius-lg); padding: clamp(26px,3vw,40px); border:1px solid var(--line); background:#fff; height:100%; }
.tier--featured { background: var(--ink); color: var(--text-inv); border-color: var(--ink); box-shadow: var(--shadow-lg); transform: translateY(-8px); }
.tier--featured p, .tier--featured li { color: var(--text-inv-muted); }
.tier__name { font-family:var(--font-display); font-weight:600; font-size:1.5rem; }
.tier__price { font-family:var(--font-display); font-size:2.4rem; font-weight:600; margin: 6px 0 2px; letter-spacing:-.02em; }
.tier ul { margin: 18px 0 24px; }
.tier li { padding: 8px 0; border-bottom: 1px solid var(--line); display:flex; gap:.6em; align-items:flex-start; font-size:.96rem; }
.tier--featured li { border-bottom-color: var(--line-inv); }
.tier li svg { flex:none; width:18px; height:18px; color: var(--aqua); margin-top:3px; }

/* ---------- FAQ / accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left;
  padding: 22px 0; font-family:var(--font-display); font-weight:600; font-size: clamp(1.05rem,1.6vw,1.25rem); color: var(--text); }
.faq__q .pm { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line); transition:.3s; font-size:1.2rem; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq__a-inner { padding-bottom: 24px; color: var(--text-muted); max-width: 70ch; }
/* cap is generous so even the tallest branch (off-grid messaging) reveals fully on mobile */
.faq__item.open .faq__a { max-height: 3000px; }
.faq__item.open .pm { background: var(--ink); color:#fff; border-color: var(--ink); transform: rotate(45deg); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--text-inv-muted); padding-block: clamp(56px, 8vw, 96px) 40px; }
.footer a { color: var(--text-inv-muted); transition: color .2s; }
.footer a:hover { color: var(--text-inv); }
.footer__top { display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer h4 { color: var(--text-inv); font-size: .82rem; text-transform: uppercase; letter-spacing:.12em; margin-bottom: 16px; }
.footer__col li { padding: 6px 0; }
.footer__brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--text-inv); margin-bottom:14px; }
.footer__brand svg { width: 32px; height:32px; }
.footer__bottom { margin-top: 56px; padding-top: 24px; border-top:1px solid var(--line-inv); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.86rem; }
.socials { display:flex; gap:14px; }
.socials a { width:38px; height:38px; border-radius:50%; border:1px solid var(--line-inv); display:grid; place-items:center; }
.socials a:hover { background: rgba(255,255,255,.07); }
.socials svg { width:18px; height:18px; }

/* ---------- Marquee / logo strip ---------- */
.note-strip { background: var(--ink-2); color: var(--text-inv-muted); font-size:.9rem; }
.note-strip .wrap { display:flex; gap: 28px; align-items:center; justify-content:center; flex-wrap:wrap; padding-block: 18px; }
.note-strip b { color: var(--aqua); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{ transition-delay:.08s } .reveal[data-delay="2"]{ transition-delay:.16s }
.reveal[data-delay="3"]{ transition-delay:.24s } .reveal[data-delay="4"]{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .float{animation:none!important} }

/* ---------- Octopus float ---------- */
.float { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-18px) rotate(-1.2deg) } }
.float-slow { animation: float 11s ease-in-out infinite; }

/* ---------- Banner / callout ---------- */
.callout { border-radius: var(--radius-lg); padding: clamp(28px,4vw,56px); }
.callout--coral { background: linear-gradient(135deg, #FF6B52, #FF9166); color:#fff; }
.callout--aqua  { background: var(--aqua-soft); }

/* ---------- Helper ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-2{margin-bottom:2rem}
.flex{display:flex}.gap{gap:14px}.wrap-gap{gap:14px;flex-wrap:wrap}.items-center{align-items:center}
.full{width:100%}
.dim{opacity:.7}
.tiny{font-size:.8rem;color:var(--text-muted)}
.bg-ink .tiny,.bg-tide .tiny{color:var(--text-inv-muted)}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  /* Hide the nav cart icon on mobile — it crowds/overlaps the brand and is redundant
     with the visible "Shop Kalea" button (the single shop entry point on small screens). */
  .cart-btn { display: none; }
  .nav__links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; right: var(--gutter); left: var(--gutter);
    background: var(--ink); color: #fff; padding: 22px; border-radius: var(--radius); gap: 16px; box-shadow: var(--shadow-lg);
  }
  .nav__links.open a { opacity: 1; color:#fff; }
  .split, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .hero { min-height: auto; }
  .compare { font-size: .9rem; } .compare th,.compare td{ padding: 12px 10px; }
  .tier--featured { transform: none; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}

/* =====================================================================
   STORE / CART / NEWSLETTER  (appended)
   ===================================================================== */

/* ---- Cart button + badge in nav ---- */
.cart-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: inherit; transition: background .2s; }
.cart-btn:hover { background: rgba(127,127,127,.12); }
.cart-btn svg { width: 22px; height: 22px; }
.cart-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--coral); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  display: grid; place-items: center; line-height: 1; transform: scale(0); transition: transform .25s var(--ease); }
.cart-badge.show { transform: scale(1); }

/* ---- Product grid (store landing) ---- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 36px); }
.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); height: 100%; }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pcard__media { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; padding: 28px;
  background: radial-gradient(120% 100% at 50% 0%, #11463F 0%, #0E2436 70%, #0A1322 100%); }
.pcard__media.violet { background: radial-gradient(120% 100% at 50% 0%, #2a2456 0%, #14193a 70%, #0A1322 100%); }
.pcard__media img { width: 64%; max-width: 240px; filter: drop-shadow(0 24px 36px rgba(0,0,0,.4)); }
.pcard__media .badge { position: absolute; top: 16px; left: 16px; }
.pcard__media .ph { position:absolute; bottom: 12px; right: 14px; font-size: .68rem; color: rgba(255,255,255,.5); }
.pcard__body { padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; flex: 1; }
.pcard__body h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.pcard__price { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -.02em; margin-top: 6px; }
.pcard__price .was { font-size: 1rem; color: var(--text-muted); text-decoration: line-through; margin-left: 8px; font-weight: 500; }
.pcard ul.mini { margin: 16px 0 22px; }
.pcard ul.mini li { display: flex; gap: .55em; align-items: flex-start; padding: 5px 0; font-size: .95rem; color: var(--text-muted); }
.pcard ul.mini svg { flex: none; width: 17px; height: 17px; color: var(--aqua); margin-top: 3px; }
.pcard__actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Product detail ---- */
.pdetail { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.gallery__main { aspect-ratio: 1/1; border-radius: var(--radius-lg); display: grid; place-items: center; padding: 8%;
  background: radial-gradient(120% 100% at 50% 10%, #11463F 0%, #0E2436 65%, #0A1322 100%); position: relative; }
.gallery__main.violet { background: radial-gradient(120% 100% at 50% 10%, #2a2456 0%, #14193a 65%, #0A1322 100%); }
.gallery__main img { width: 72%; filter: drop-shadow(0 30px 44px rgba(0,0,0,.45)); }
.gallery__main .ph { position: absolute; bottom: 14px; right: 16px; font-size: .7rem; color: rgba(255,255,255,.5); }
.gallery__thumbs { display: flex; gap: 12px; margin-top: 14px; }
.gallery__thumbs button { width: 76px; height: 76px; border-radius: 14px; border: 1.5px solid var(--line); background: #0E2436;
  display: grid; place-items: center; padding: 10px; cursor: pointer; transition: border-color .2s; }
.gallery__thumbs button.active { border-color: var(--aqua); }
.gallery__thumbs img { width: 100%; }
.pdetail__price { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; letter-spacing: -.02em; }
.pdetail__price .was { font-size: 1.2rem; color: var(--text-muted); text-decoration: line-through; margin-left: 10px; font-weight: 500; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.qty button { width: 42px; height: 44px; font-size: 1.2rem; color: var(--text); }
.qty button:hover { background: var(--paper); }
.qty input { width: 46px; text-align: center; border: none; font: inherit; font-weight: 600; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.spec-row span:first-child { color: var(--text-muted); }
.spec-row span:last-child { font-weight: 600; text-align: right; }

/* ---- Cart drawer ---- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(10,19,34,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 9996; backdrop-filter: blur(2px); }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: #fff; z-index: 9997;
  transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.drawer.open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer__head h3 { font-size: 1.2rem; }
.drawer__close { font-size: 1.6rem; line-height: 1; color: var(--text-muted); width: 36px; height: 36px; }
.drawer__close:hover { color: var(--text); }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer__foot { padding: 20px 22px; border-top: 1px solid var(--line); }
.cart-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-line__img { flex: none; width: 64px; height: 64px; border-radius: 12px; background: #0E2436; display: grid; place-items: center; padding: 8px; }
.cart-line__img img { width: 100%; }
.cart-line__info { flex: 1; min-width: 0; }
.cart-line__info h4 { font-size: 1rem; font-family: var(--font-display); }
.cart-line__info .price { color: var(--text-muted); font-size: .9rem; }
.cart-line__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cart-line .qty { transform: scale(.85); transform-origin: left; }
.cart-line__remove { font-size: .82rem; color: var(--coral-deep); font-weight: 600; }
.cart-empty { text-align: center; color: var(--text-muted); padding: 48px 12px; }
.cart-empty img { width: 120px; margin: 0 auto 16px; opacity: .8; }
.cart-total { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin-bottom: 14px; }
.cart-note { font-size: .76rem; color: var(--text-muted); text-align: center; margin-top: 12px; }

/* ---- Cart page / checkout ---- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); position: sticky; top: 96px; }
.summary h3 { font-size: 1.2rem; margin-bottom: 14px; }
.summary__row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--text-muted); }
.summary__row.total { color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.field input, .field select { width: 100%; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; outline: none; }
.field input:focus, .field select:focus { border-color: var(--aqua); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-note { font-size: .8rem; color: var(--text-muted); margin-top: 14px; }
.demo-banner { background: #FFF3D6; border: 1px solid #F2D588; color: #7a5a12; border-radius: 12px; padding: 12px 16px; font-size: .9rem; margin-bottom: 20px; }

/* ---- Newsletter modal ---- */
.nl-overlay { position: fixed; inset: 0; background: rgba(10,19,34,.55); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 9990; backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; }
.nl-overlay.open { opacity: 1; pointer-events: auto; }
.nl-modal { width: min(560px, 100%); background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr; transform: translateY(16px) scale(.98); transition: transform .35s var(--ease); }
.nl-overlay.open .nl-modal { transform: none; }
.nl-modal__art { background: radial-gradient(120% 100% at 30% 20%, #11463F, #0A1322); display: grid; place-items: center; padding: 28px; }
.nl-modal__art img { width: 80%; }
.nl-modal__body { padding: clamp(26px, 3vw, 38px); position: relative; }
.nl-modal__close { position: absolute; top: 14px; right: 16px; font-size: 1.5rem; color: var(--text-muted); line-height: 1; }
.nl-modal__close:hover { color: var(--text); }
.nl-modal h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.nl-modal p { color: var(--text-muted); font-size: .95rem; margin-top: 8px; }
.nl-form { margin-top: 18px; }
.nl-form input { width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); font: inherit; outline: none; margin-bottom: 10px; }
.nl-form input:focus { border-color: var(--aqua); }
.nl-ok { color: var(--aqua-deep); font-weight: 600; font-size: .92rem; margin-top: 10px; }
.nl-ok.is-error { color: var(--coral-deep); }   /* signup didn't go through — say so in red, not green */
.nl-tiny { font-size: .72rem; color: var(--text-muted); margin-top: 12px; }

@media (max-width: 820px) {
  .pdetail { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .nl-modal { grid-template-columns: 1fr; }
  .nl-modal__art { display: none; }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* =====================================================================
   GO DEEPER / THE DEEP END  (appended)
   ===================================================================== */

/* In-page sticky section index */
.subnav { position: sticky; top: var(--nav-h, 64px); z-index: 80; background: #0B1726;
  border-block: 1px solid var(--line-inv); box-shadow: 0 10px 24px -16px rgba(0,0,0,.6); }
/* anchored sections land below the fixed nav (+ the frozen section strip on Go Deeper) */
.section[id], section[id] { scroll-margin-top: var(--anchor-offset, 104px); }
.subnav__inner { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--gutter); scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a { flex: none; font-family: var(--font-display); font-weight: 600; font-size: .84rem; color: var(--text-inv-muted);
  padding: 8px 14px; border-radius: var(--radius-pill); white-space: nowrap; transition: background .2s, color .2s; }
.subnav a:hover { color: var(--text-inv); background: rgba(255,255,255,.07); }
.subnav a.active { color: var(--ink); background: var(--aqua); }

/* Architecture layer-stack diagram */
.archstack { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.archlayer { border-radius: var(--radius); padding: 18px 22px; border: 1px solid var(--line-inv);
  background: rgba(255,255,255,.04); }
.archlayer h4 { font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); margin-bottom: 10px; }
.archlayer .row { display: flex; flex-wrap: wrap; gap: 8px; }
.archchip { font-size: .86rem; font-weight: 600; padding: 7px 13px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07); color: var(--text-inv); border: 1px solid var(--line-inv); }
.archlayer.apps { background: linear-gradient(120deg, rgba(33,182,168,.16), rgba(142,132,224,.16)); border-color: rgba(33,182,168,.3); }
.archlayer.apps .archchip { background: rgba(33,182,168,.18); }
.archlayer.trust { background: rgba(255,107,82,.1); border-color: rgba(255,107,82,.3); }

/* Spec / detail mini-cards */
.deep-detail { display: grid; gap: 10px; }
.deep-detail .row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.deep-detail .row > span:first-child { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.deep-detail .row > span:last-child { color: var(--text-muted); }
.bg-ink .deep-detail .row, .bg-tide .deep-detail .row { border-bottom-color: var(--line-inv); }
.bg-ink .deep-detail .row > span:first-child, .bg-tide .deep-detail .row > span:first-child { color: var(--text-inv); }
.bg-ink .deep-detail .row > span:last-child, .bg-tide .deep-detail .row > span:last-child { color: var(--text-inv-muted); }
@media (max-width:560px){ .deep-detail .row { grid-template-columns: 1fr; gap: 2px; } }

/* Knob scale (range pills) */
.scale { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scale span { font-size: .8rem; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--paper); border: 1px solid var(--line); color: var(--text-muted); }
.scale span.hi { background: var(--aqua-soft); border-color: transparent; color: var(--aqua-deep); }
.scale .arr { color: var(--text-muted); font-size: .8rem; }

/* Feature tree (uses .faq accordion); nested lists */
.tree-list { columns: 2; column-gap: 40px; }
.tree-list li { break-inside: avoid; padding: 5px 0 5px 18px; position: relative; color: var(--text-muted); font-size: .95rem; }
.tree-list li::before { content: "›"; position: absolute; left: 0; color: var(--aqua-deep); font-weight: 700; }
.tree-list h5 { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 1rem; margin: 14px 0 4px; column-span: all; }
.tree-list h5:first-child { margin-top: 0; }
@media (max-width:680px){ .tree-list { columns: 1; } }

/* numbered lifecycle (workcell) */
.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.flow__node { flex: 1 1 150px; background: rgba(255,255,255,.05); border: 1px solid var(--line-inv); border-radius: var(--radius); padding: 16px; }
.flow__node .n { font-family: var(--font-display); color: var(--aqua); font-weight: 600; font-size: .8rem; }
.flow__node h4 { font-size: 1.02rem; margin: 4px 0 6px; color: var(--text-inv); }
.flow__node p { font-size: .85rem; color: var(--text-inv-muted); }
.flow__arrow { display: grid; place-items: center; color: var(--aqua); font-size: 1.3rem; }
@media (max-width:760px){ .flow { flex-direction: column; } .flow__arrow { transform: rotate(90deg); } }

/* =====================================================================
   INTERACTIVE FACEPLATE — analog system prompting demo  (appended)
   ===================================================================== */
.demo-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(20px,3vw,40px); align-items: start; }
@media (max-width: 940px){ .demo-wrap { grid-template-columns: 1fr; } }

/* faceplate panel */
.faceplate { background: radial-gradient(120% 100% at 50% -10%, #16243B 0%, #0A1322 70%); border: 1px solid #21344f;
  border-radius: 24px; padding: clamp(20px,3vw,34px); box-shadow: var(--shadow-lg); position: sticky; top: 88px; }
@media (max-width:940px){ .faceplate { position: static; } }
.faceplate__octo { position:absolute; top:14px; right:18px; width:46px; opacity:.5; }
.knobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width:520px){ .knobs { grid-template-columns: repeat(2,1fr); } }

.knob { text-align: center; user-select: none; }
.knob__dial { width: clamp(72px, 9vw, 104px); aspect-ratio: 1; border-radius: 50%; margin: 0 auto; position: relative;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.5), rgba(0,0,0,0) 60%),
    conic-gradient(from 0deg, var(--c) 0%, color-mix(in srgb, var(--c) 70%, #000) 50%, var(--c) 100%);
  box-shadow: inset 0 -5px 12px rgba(0,0,0,.45), inset 0 4px 8px rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.45);
  cursor: grab; outline: none; }
.knob__dial:focus-visible { box-shadow: inset 0 -5px 12px rgba(0,0,0,.45), 0 0 0 3px var(--aqua); }
.knob__dial:active { cursor: grabbing; }
.knob__ind { position: absolute; inset: 0; transition: transform .18s var(--ease); }
.knob__ind::before { content: ""; position: absolute; top: 7%; left: 50%; width: 4px; height: 30%; border-radius: 3px;
  background: #0A1322; transform: translateX(-50%); box-shadow: 0 0 3px rgba(0,0,0,.5); }
.knob__name { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--text-inv); margin-top: 12px; letter-spacing: .02em; }
.knob__val { font-size: .8rem; color: var(--aqua); font-weight: 600; min-height: 1.1em; }
.knob__scale { display: flex; justify-content: center; gap: 4px; margin-top: 7px; }
.knob__scale i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); }
.knob__scale i.on { background: var(--aqua); }

/* sliders row */
.sliders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px;
  border-top: 1px solid var(--line-inv); padding-top: 24px; }
.vslider { text-align: center; display: flex; flex-direction: column; align-items: center; }
.vslider__track { height: 150px; display: flex; align-items: center; gap: 8px; }
.vslider input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 8px; height: 150px; accent-color: var(--aqua); cursor: pointer; }
.vslider__ticks { display: flex; flex-direction: column; justify-content: space-between; height: 150px; font-size: .64rem; color: var(--text-inv-muted); text-align: left; }
.vslider__ticks b { color: var(--amber); font-weight: 700; }
.vslider__name { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--text-inv); margin-top: 10px; }
.vslider__val { font-size: .78rem; color: var(--aqua); font-weight: 600; }

/* age gate toggle */
.gate { display: inline-flex; background: rgba(255,255,255,.06); border: 1px solid var(--line-inv); border-radius: 999px; padding: 3px; margin: 18px auto 0; }
.gate button { font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--text-inv-muted); padding: 6px 16px; border-radius: 999px; }
.gate button.on { background: var(--aqua); color: var(--ink); }

/* output side */
.promptpanel { position: sticky; top: 88px; }
@media (max-width:940px){ .promptpanel { position: static; } }
.promptmeta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.combo-pill, .brain-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600;
  font-size: .85rem; padding: 8px 14px; border-radius: 999px; }
.combo-pill { background: var(--aqua-soft); color: var(--aqua-deep); }
.brain-pill { background: rgba(33,182,168,.14); color: var(--aqua-deep); border: 1px solid var(--aqua-soft); }
.brain-pill.deep { background: #E6E3F8; color: #5b50b8; border-color: #d6d1f3; }
.brain-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.promptbox { background: #0A1322; border: 1px solid #21344f; border-radius: 16px; padding: 20px 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; line-height: 1.6; color: #D7E3EE;
  white-space: pre-wrap; word-break: break-word; }  /* full height — no inner scroll */
.promptbox .k { color: #FF8367; font-weight: 700; }
.promptbox .c { color: #6f86a3; font-style: italic; }
.promptbox .hl { background: rgba(33,182,168,.16); border-radius: 4px; transition: background .5s; }
.promptbox::-webkit-scrollbar { width: 8px; } .promptbox::-webkit-scrollbar-thumb { background: #21344f; border-radius: 8px; }

/* ---- off-grid messaging command architecture ---- */
.bt-thread { background: #0A1322; border: 1px solid #21344f; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.bt-thread__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-inv); font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--text-inv-muted); }
.bt-thread__bar .sig { color: var(--aqua); }
.bt-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: .88rem; line-height: 1.45; }
.bt-msg .who { display: block; font-size: .62rem; opacity: .65; margin-bottom: 3px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bt-msg.them { background: #16243B; color: #D7E3EE; align-self: flex-start; border-bottom-left-radius: 4px; }
.bt-msg.me { background: var(--aqua); color: #04201d; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 600; }
.bt-msg.mono { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; white-space: pre-wrap; }
.bt-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bt-key { font-family: var(--font-display); font-weight: 600; font-size: .82rem; padding: 9px 14px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid var(--line-inv); color: var(--text-inv); }
.bt-key b { color: var(--aqua); }
.cmdlist { list-style: none; padding: 0; margin: 12px 0 0; }
.cmdlist li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-inv); font-size: .92rem; color: var(--text-inv-muted); align-items: flex-start; }
.cmdlist li:last-child { border-bottom: none; }
.cmdlist .num { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--aqua); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .78rem; margin-top: 1px; }
.cmdlist .num.soon { background: rgba(255,255,255,.12); color: var(--text-inv-muted); }
.cmdlist b { color: var(--text-inv); font-weight: 600; }

/* reference photo */
.refshot { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.refshot img { width: 100%; height: auto; display: block; }  /* height:auto keeps the intrinsic ratio even when a flex/grid parent stretches */
.refshot { align-self: start; }
.refcap { font-size: .8rem; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* Octopus line-art imagery (background-knocked PNGs from the Kalea Herself set) */
img[src*="octo-"] { filter: drop-shadow(0 18px 34px rgba(0,0,0,0.30)); }
.faceplate__octo[src*="octo-"] { filter: none; }   /* subtle watermark — no shadow */
.gallery__thumbs img[src*="octo-"], .pcard__media img[src*="octo-"] { filter: none; }

/* ---- Safety: curated exchange cards ---- */
.xchg { background:#0A1322; border:1px solid #21344f; border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:9px; height:100%; }
.xchg__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:6px; }
.xchg__label { font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-inv-muted); }
.xchg__pass { font-family:var(--font-display); font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; background:rgba(33,182,168,.16); color:var(--aqua); border:1px solid var(--aqua-soft); white-space:nowrap; }
.xmsg { max-width:90%; padding:9px 13px; border-radius:14px; font-size:.9rem; line-height:1.45; }
.xmsg .who { display:block; font-size:.6rem; opacity:.65; margin-bottom:3px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.xmsg.tester { background:#2a2030; color:#e9d6dd; align-self:flex-start; border-bottom-left-radius:4px; border:1px solid #4a3340; }
.xmsg.kalea { background:#11463F; color:#eafaf6; align-self:flex-end; border-bottom-right-radius:4px; }
.sev-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.sev-table td { padding:10px 12px; border-bottom:1px solid var(--line-inv); color:var(--text-inv-muted); vertical-align:top; }
.sev-table td:first-child { font-family:var(--font-display); font-weight:600; color:var(--text-inv); white-space:nowrap; width:34%; }
.sev-table tr:last-child td { border-bottom:none; }

/* ---------- Hero easter egg: the hardware hiding under the octopus ----------
   The hardware image sits behind the octopus and is revealed on hover/focus.
   Tune the resting subtlety with --egg-hint on the .octo-egg element
   (0 = invisible until hover; .05 ≈ a barely-there ghost; .15 = an obvious peek). */
.octo-egg {
  --egg-hint: .05;            /* resting visibility of the hidden hardware */
  --egg-reveal-octo: 0;       /* octopus opacity on hover (0 = fully reveal hardware) */
  position: relative;
  display: inline-block;
  line-height: 0;
  outline: none;
}
.octo-egg__top {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  height: auto;
  transition: opacity .6s var(--ease);
}
.octo-egg__under {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
  opacity: var(--egg-hint);
  transition: opacity .6s var(--ease);
  animation: eggBreathe 7s ease-in-out infinite;  /* a slow "something's here" breath */
}
@keyframes eggBreathe {
  0%, 100% { opacity: 0; }                 /* invisible at rest — only the breath hints */
  50%      { opacity: var(--egg-hint); }   /* gentle peak; tune via --egg-hint */
}
/* the octopus floats and breathes: two gentle size pulses per float cycle */
.octo-egg__top.float { animation: eggFloat 7s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes eggFloat {
  0%   { transform: translateY(0)     rotate(0)        scale(1); }
  25%  { transform: translateY(-9px)  rotate(-.6deg)   scale(1.035); }
  50%  { transform: translateY(-18px) rotate(-1.2deg)  scale(1); }
  75%  { transform: translateY(-9px)  rotate(-.6deg)   scale(1.035); }
  100% { transform: translateY(0)     rotate(0)        scale(1); }
}
/* "roll over" cue, same pill as the Start page */
.octo-egg__hint {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1;
  font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--aqua-deep); background: rgba(255,255,255,.88); padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(10,19,34,.18); pointer-events: none; transition: opacity .35s var(--ease);
}
.octo-egg:hover .octo-egg__hint,
.octo-egg:focus-visible .octo-egg__hint { opacity: 0; }
.octo-egg:hover .octo-egg__under,
.octo-egg:focus-visible .octo-egg__under { opacity: 1; animation: none; }
.octo-egg:hover .octo-egg__top,
.octo-egg:focus-visible .octo-egg__top { opacity: var(--egg-reveal-octo); }
@media (prefers-reduced-motion: reduce) { .octo-egg__under, .octo-egg__top.float { animation: none; } }

/* =====================================================================
   ACCESSIBILITY  (WCAG 2.1 AA helpers)
   ===================================================================== */
/* Skip-to-content link — hidden until keyboard focus, then slides in. */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
  transform: translateY(-180%); transition: transform .18s var(--ease);
  box-shadow: var(--shadow-lg);
}
.skip-link:focus { transform: translateY(0); }

/* Visually-hidden utility (available to screen readers only). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Consistent, high-contrast keyboard focus for every interactive element.
   :focus-visible = keyboard/AT focus only, so mouse users never see the ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Programmatic focus target (skip-link landing) should not paint a ring. */
main:focus, [tabindex="-1"]:focus { outline: none; }

/* =====================================================================
   THE DEPTHS — layers of interaction (index.html #depths)
   Ocean-depth strata: voice alone at the sunlit surface; each added
   modality is one stratum deeper — and optional. Full complexity at
   the floor, where the section hands off into the ink of #lives.
   ===================================================================== */
.depths__frame {
  margin-top: clamp(40px, 6vw, 72px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Sky cap: air above the waterline, with a low sun and a wave crest */
.depths__sky {
  position: relative;
  height: clamp(64px, 9vw, 96px);
  background: linear-gradient(180deg, #FFFDF7 0%, #F2FAF8 100%);
}
.depths__sun {
  position: absolute; left: clamp(24px, 5vw, 56px); top: 34%;
  width: clamp(26px, 3.4vw, 38px); height: clamp(26px, 3.4vw, 38px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #FFD98A, var(--amber));
  box-shadow: 0 0 34px 10px rgba(255,178,62,.35);
}
.depths__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(14px, 2.4vw, 24px); }
.depths__octo {
  position: absolute; right: clamp(18px, 7vw, 84px); bottom: -16px;
  width: clamp(64px, 8vw, 96px); z-index: 2;
  filter: drop-shadow(0 10px 18px rgba(10,19,34,.25));
}

/* Strata */
.depths__chart { counter-reset: fathom; list-style: none; margin: 0; padding: 0; }
.stratum {
  position: relative;
  display: grid;
  grid-template-columns: clamp(118px, 15vw, 168px) minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  padding: clamp(20px, 3vw, 34px) clamp(20px, 3.5vw, 46px);
  background: var(--s-bg);
  color: var(--s-text);
}
.stratum + .stratum { border-top: 1px solid rgba(10,19,34,.08); }
.stratum[data-depth="4"], .stratum[data-depth="5"] { border-top-color: rgba(255,255,255,.10); }

.stratum[data-depth="1"] { --s-bg:#EAF7F5; --s-text:var(--text); --s-muted:#4A5B70; --s-accent:var(--aqua-deep); --s-icon-bg:rgba(19,138,128,.13); }
.stratum[data-depth="2"] { --s-bg:#C6ECE5; --s-text:var(--text); --s-muted:#3E5A62; --s-accent:var(--aqua-deep); --s-icon-bg:rgba(19,138,128,.15); }
.stratum[data-depth="3"] { --s-bg:#6FCDC2; --s-text:#0A1322; --s-muted:rgba(10,19,34,.74); --s-accent:#0A4A44; --s-icon-bg:rgba(10,19,34,.12); }
.stratum[data-depth="4"] { --s-bg:#0F5F58; --s-text:var(--text-inv); --s-muted:#B7D9D3; --s-accent:#7FE0D5; --s-icon-bg:rgba(255,255,255,.10); }
.stratum[data-depth="5"] { --s-bg:linear-gradient(180deg,#11253E 0%, #0A1322 100%); --s-text:var(--text-inv); --s-muted:var(--text-inv-muted); --s-accent:var(--aqua); --s-icon-bg:rgba(33,182,168,.16); }

.stratum__label { display: grid; gap: 4px; align-content: start; }
.stratum__zone {
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--s-accent);
}
.stratum__zone::before {
  counter-increment: fathom;
  content: "0" counter(fathom) " · ";
  opacity: .6; letter-spacing: .08em;
}
.stratum__req { font-size: .8rem; color: var(--s-muted); line-height: 1.4; }

.stratum__main { display: flex; gap: clamp(14px, 2vw, 22px); align-items: flex-start; min-width: 0; }
.stratum__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--s-icon-bg); color: var(--s-accent);
}
.stratum__icon svg { width: 24px; height: 24px; }
.stratum__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.15; color: var(--s-text); }
.stratum__name .plus { color: var(--s-accent); margin-right: .12em; }
.stratum__desc { margin-top: 6px; font-size: .95rem; line-height: 1.55; color: var(--s-muted); max-width: 62ch; }

/* Coral gauge: one Y-branch at the surface; each stratum grows a new
   generation of branches in a new color — the reef accumulates with depth */
.stratum__coral { align-self: end; margin-bottom: calc(-1 * clamp(20px, 3vw, 34px) + 2px); }
.stratum__coral svg { width: clamp(56px, 6vw, 84px); height: auto; display: block; }
.stratum[data-depth="4"] .stratum__coral svg { width: clamp(100px, 10.6vw, 147px); }
.stratum[data-depth="5"] .stratum__coral svg { width: clamp(112px, 12vw, 168px); }

@media (max-width: 820px) {
  .stratum { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stratum__label { grid-template-columns: auto 1fr; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .stratum__req { text-align: right; }
  .stratum__coral { display: none; }
}


/* Fish drift gently in the direction they face (--dx/--dy set per fish) */
.stratum__coral .fish { animation: fishSwim 7s ease-in-out infinite; }
@keyframes fishSwim {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(calc(var(--dx, 5px) * .45), var(--dy, -1.5px)); }
  55%      { transform: translate(var(--dx, 5px), calc(var(--dy, -1.5px) * -.4)); }
  80%      { transform: translate(calc(var(--dx, 5px) * .35), calc(var(--dy, -1.5px) * .7)); }
}
@media (prefers-reduced-motion: reduce) { .stratum__coral .fish { animation: none; } }

/* ---------- Five voices · "Hear her voices" bot (index.html #voices) ---------- */
.vbot { background: var(--ink); color: var(--text-inv); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow-lg); border: 1px solid var(--line-inv); position: relative; overflow: hidden; }
.vbot::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(33,182,168,0.28), transparent 70%); pointer-events: none; }
.vbot__head { display: flex; align-items: center; gap: 14px; position: relative; }
.vbot__octo { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }
.vbot__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.vbot__sub { color: var(--text-inv-muted); font-size: 0.9rem; }
#voices .tag { white-space: nowrap; }
.vbot__chip { margin-left: auto; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aqua); border: 1px solid rgba(33,182,168,0.45); border-radius: var(--radius-pill); padding: 6px 10px; white-space: nowrap; }
.vbot__voices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; position: relative; }
.vvoice { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 11px 10px; border-radius: 14px; border: 1px solid var(--line-inv); background: rgba(255,255,255,0.04); text-align: left; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.vvoice b { font-family: var(--font-display); font-size: 0.98rem; letter-spacing: -0.01em; }
.vvoice span { font-size: 0.72rem; color: var(--text-inv-muted); line-height: 1.25; }
.vvoice:hover { border-color: rgba(255,255,255,0.35); transform: translateY(-1px); }
.vvoice.is-on { border-color: var(--aqua); background: rgba(33,182,168,0.14); }
.vvoice.is-on b { color: var(--aqua); }
.vbot__lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; position: relative; }
.vline { all: unset; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-inv); color: var(--text-inv-muted); transition: all .2s; }
.vline:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.vline.is-on { background: var(--coral); border-color: var(--coral); color: #fff; }
.vbot__bubble { margin-top: 16px; background: rgba(255,255,255,0.06); border: 1px solid var(--line-inv); border-radius: 18px; border-top-left-radius: 6px; padding: 14px 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; position: relative; }
.vbot__bubble p { font-size: 0.98rem; line-height: 1.55; }
.vbot__wave { display: flex; align-items: flex-end; gap: 3px; height: 18px; opacity: 0.25; transition: opacity .2s; }
.vbot__wave i { width: 4px; height: 4px; border-radius: 2px; background: var(--aqua); display: block; }
.is-playing .vbot__wave { opacity: 1; }
.is-playing .vbot__wave i { animation: vwave 0.9s ease-in-out infinite; }
.is-playing .vbot__wave i:nth-child(2n) { animation-duration: 0.7s; }
.is-playing .vbot__wave i:nth-child(3n) { animation-duration: 1.1s; animation-delay: -0.3s; }
.is-playing .vbot__wave i:nth-child(5n) { animation-delay: -0.55s; }
@keyframes vwave { 0%,100% { height: 4px; } 50% { height: 18px; } }
.vbot__actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; position: relative; }
.vbot__play { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; background: var(--aqua); color: #04201d; font-family: var(--font-display); font-weight: 700; padding: 12px 20px 12px 14px; border-radius: var(--radius-pill); transition: transform .2s var(--ease), background .2s; box-shadow: 0 10px 24px -10px rgba(33,182,168,0.8); }
.vbot__play:hover { transform: translateY(-2px); background: #2ccfbf; }
.vbot__play em { font-style: normal; }
.is-playing .vbot__play svg path { d: path("M7 6h4v12H7zM13 6h4v12h-4z"); }
.vbot__all { all: unset; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--text-inv-muted); padding: 10px 12px; border-radius: var(--radius-pill); transition: color .2s; }
.vbot__all:hover { color: #fff; }
.vbot__foot { margin-top: 14px; font-size: 0.74rem; color: var(--text-inv-muted); position: relative; }
@media (max-width: 640px) {
  .vbot__voices { grid-template-columns: repeat(2, 1fr); }
  .vbot__chip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .is-playing .vbot__wave i { animation: none; height: 10px; } }

/* =====================================================================
   PRODUCTION FACEPLATE (SVG, assets/js/kalea-faceplate.js)
   ===================================================================== */
.kfp { display:block; width:100%; height:auto; }
.kfp--live .kfp-knob:focus-visible .kfp-ptr path, .kfp--live .kfp-fader:focus-visible .kfp-cap rect:last-child { filter: drop-shadow(0 0 4px var(--aqua)); }
.faceplate--svg { padding: clamp(12px,2vw,20px); }
.faceplate--svg [data-deck-svg] { border-radius: 18px; overflow: hidden; }
.deck-readout { margin-top: 14px; text-align: center; font-size: .8rem; color: var(--text-inv-muted); line-height: 1.7; }
.deck-readout b { color: var(--aqua); font-weight: 600; }

/* ---- The object: "everything about her was chosen" ---- */
.chosen-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .chosen-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .chosen-grid { grid-template-columns: 1fr; } }
.chosen { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.chosen__k { display: block; font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua-deep); margin-bottom: 8px; }
.chosen p { margin: 0; color: var(--text); font-size: .97rem; }
.bg-ink .chosen { background: rgba(255,255,255,.06); border-color: var(--line-inv); box-shadow: none; }
.bg-ink .chosen__k { color: var(--aqua); }
.bg-ink .chosen p { color: var(--text-inv-muted); }
.bg-ink .chosen p strong { color: var(--text-inv); }

/* ---- Deck easter egg (index #deck): hover for a "try it" cue, click → analog-prompt.html#deckDemo ---- */
.deck-egg { position: relative; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; outline: none;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.deck-egg > [data-kalea-faceplate] { display: block; transition: filter .45s var(--ease); }
.deck-egg__cue { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(100%); opacity: 0; pointer-events: none; white-space: nowrap; line-height: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(255,107,82,.94); padding: 12px 14px;
  transition: opacity .35s var(--ease), transform .35s var(--ease); }
.deck-egg:hover, .deck-egg:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 3px rgba(33,182,168,.35), var(--shadow-lg); }
.deck-egg:hover > [data-kalea-faceplate], .deck-egg:focus-visible > [data-kalea-faceplate] { filter: brightness(1.08); }
.deck-egg:hover .deck-egg__cue, .deck-egg:focus-visible .deck-egg__cue { opacity: 1; transform: translateY(0); }
@media (hover: none) { .deck-egg__cue { opacity: 1; transform: translateY(0); } } /* touch: always show the cue */
@media (prefers-reduced-motion: reduce) { .deck-egg, .deck-egg__cue, .deck-egg > [data-kalea-faceplate] { transition: none; } }

/* ---------- Store, 8 Sep 2026: photography + buy flow ----------
   Real product photography replaces the octopus cutouts on the store and
   product pages. Photo media frames are full-bleed (no gradient, no
   drop-shadow); a sticky buy bar follows the customer on product pages. */
.pcard__media--photo { padding: 0; background: #0E2436; overflow: hidden; }
.pcard__media--photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; display: block; transition: transform .7s var(--ease); }
.pcard:hover .pcard__media--photo img { transform: scale(1.03); }
.pcard__media--photo .badge { z-index: 2; }
.gallery__main--photo { aspect-ratio: 4/3; padding: 0; overflow: hidden; background: #0E2436; }
.gallery__main--photo img { width: 100%; height: 100%; object-fit: cover; filter: none; display: block; }
.gallery__thumbs--photo button { padding: 0; overflow: hidden; background: #0E2436; }
.gallery__thumbs--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumbs--photo button:hover { border-color: var(--aqua-soft); }

.order-line { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .86rem; color: var(--text-muted); }
.order-line b { color: var(--text); font-weight: 600; }
.pdetail__sub { font-size: .92rem; color: var(--text-muted); margin-top: 4px; }
.pdetail__sub b { color: var(--text); }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; color: var(--text-muted); margin-top: 16px; }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { width: 15px; height: 15px; color: var(--aqua); flex: none; }
.bg-tide .trust-row, .bg-ink .trust-row { color: var(--text-inv-muted); }

.cart-total--sub { font-family: var(--font-body); font-weight: 500; font-size: .95rem; color: var(--text-muted); margin-top: -6px; }
.cart-total--grand { border-top: 1px solid var(--line); padding-top: 12px; }

.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -12px 40px -20px rgba(10,19,34,.35); padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; transform: translateY(110%); transition: transform .35s var(--ease); }
.buybar.show { transform: none; }
.buybar__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.buybar__price { font-family: var(--font-display); font-weight: 600; margin-left: 10px; }
.buybar__meta { display: block; font-size: .76rem; color: var(--text-muted); margin-top: 2px; }
.buybar__actions { display: flex; gap: 8px; flex: none; }
.buybar .btn { padding: .8em 1.3em; font-size: .92rem; }
@media (max-width: 640px) {
  .buybar__meta { display: none; }
  .buybar__actions .btn-ghost { display: none; }
  .buybar { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .buybar, .pcard__media--photo img { transition: none; } }

/* "Which Kalea?" comparison on the store page: reuse .compare, tighten for two columns */
.compare--store td:nth-child(2), .compare--store th:nth-child(2) { width: 34%; }
.compare--store td:nth-child(3), .compare--store th:nth-child(3) { width: 34%; }
.compare--store .cmp-price { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.both-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; margin-top: 18px; }
.both-list li { display: flex; gap: .55em; align-items: flex-start; padding: 6px 0; font-size: .96rem; }
.both-list svg { flex: none; width: 17px; height: 17px; color: var(--aqua); margin-top: 3px; }
@media (max-width: 820px) { .both-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .both-list { grid-template-columns: 1fr; } .pcard__actions .link-arrow { width: 100%; margin-left: 0; } }

.pdetail__buy { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; max-width: 460px; }
.pdetail__buy .btn-primary { width: 100%; }
.pdetail__buy-alt { grid-column: 1 / -1; width: 100%; }
@media (max-width: 560px) { .pcard__actions .btn { flex: 1; } }
/* lift the chat launcher clear of the buy bar while it is showing */
body.buybar-open .kchat-launch { bottom: 92px; transition: bottom .35s var(--ease); }
@media (max-width: 640px) { body.buybar-open .kchat-launch { bottom: 84px; } }

/* =====================================================================
   LOTS — 13 Sep 2026
   Kalea ships in production runs. Every surface that shows a price also
   shows which lot it is and when that lot leaves. Quiet by default; the
   only loud state is "sold out", which is news.
   ===================================================================== */

/* --- the badge: "Lot #1 · ships late October to mid-November" ------ */
.lotrow, .lotbadge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.lotbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--aqua-deep); background: var(--aqua-soft);
  border-radius: var(--radius-pill); padding: 3px 11px; white-space: nowrap;
}
.lotbadge--out { color: #fff; background: var(--coral-deep); }
.lotbadge__note { font-size: .82rem; color: var(--text-muted); }
.on-dark .lotbadge__note, .bg-tide .lotbadge__note { color: var(--text-inv-muted); }

/* --- per-line lot breakdown in the cart and drawer ------------------- */
.lotline { list-style: none; margin: 6px 0 0; padding: 0; }
.lotline li {
  font-size: .78rem; line-height: 1.45; color: var(--text-muted);
  padding-left: 11px; position: relative;
}
.lotline li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--aqua);
}
.lotline b { color: var(--text); font-weight: 600; }

/* --- the split notice: this order has two ship dates ----------------- */
.lot-notice {
  margin: 14px 0 4px; padding: 12px 14px;
  background: rgba(33,182,168,0.09);
  border: 1px solid rgba(33,182,168,0.32);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.lot-notice b { font-family: var(--font-display); font-size: .88rem; color: var(--text); }
.lot-notice span { font-size: .84rem; line-height: 1.5; color: var(--text); }
.lot-notice em { font-size: .76rem; line-height: 1.45; color: var(--text-muted); font-style: normal; }

/* --- the same notice on a product page, under the buy row ------------ */
.lot-split {
  margin-top: 12px; padding: 10px 13px; max-width: 460px;
  font-size: .84rem; line-height: 1.5; color: var(--text);
  background: rgba(255,178,62,0.13);
  border: 1px solid rgba(255,178,62,0.42);
  border-radius: 12px;
}

/* --- checkout summary sub-rows --------------------------------------- */
.summary__row--lot {
  margin-top: -6px; padding-top: 0; border: none;
}
.summary__row--lot span { font-size: .78rem; color: var(--text-muted); }

/* --- confirmation page ------------------------------------------------ */
.order-lots {
  margin: 22px auto 0; max-width: 440px; text-align: left;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--line-inv); border-radius: 16px; padding: 16px 18px;
}
.order-lots__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px;
  padding: 7px 0; border-bottom: 1px solid var(--line-inv);
}
.order-lots__row:last-of-type { border-bottom: none; }
.order-lots__row b { font-family: var(--font-display); font-size: .92rem; color: var(--text-inv); }
.order-lots__row span { font-size: .82rem; color: #BfeAe4; }
.order-lots__note {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-inv);
  font-size: .78rem; line-height: 1.5; color: var(--text-inv-muted);
}

@media (max-width: 560px) {
  .lotbadge__note { font-size: .78rem; }
  .lot-split { max-width: none; }
}

/* ---------- Early access form (developers.html #repo) ---------- */
/* Links inside an Arms Wanted card. The global reset makes <a> inherit and
   drops the underline, which leaves an outbound reference invisible. */
.aw-card a {
  color: var(--aqua-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color .2s var(--ease);
}
.aw-card a:hover { color: var(--coral-deep); }

.ea-form { max-width: 620px; margin-inline: auto; }
/* .btn sets display:inline-flex, which outranks the [hidden] attribute's
   UA display:none — so hiding the button on success needs this. */
.ea-form [hidden] { display: none !important; }
.ea-form .field { margin-bottom: 18px; }
.ea-form select { background: #fff; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2359657A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.ea-where { border: 0; padding: 0; margin: 0 0 18px; }
.ea-where legend { padding: 0; font-size: .85rem; font-weight: 600; margin-bottom: 8px; }
/* One row of optional handles — fill in as many as you like. */
.ea-handles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ea-handles label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.ea-form .ea-handles input {
  width: 100%; margin-top: 5px; padding: 10px 12px; font-size: .95rem;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
}
@media (max-width: 560px) { .ea-handles { grid-template-columns: repeat(2, 1fr); } }
.ea-opt { font-weight: 400; color: var(--text-muted); }
.ea-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ea-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.ea-msg { margin: 0; font-size: .92rem; font-weight: 600; color: var(--aqua-deep); }
.ea-msg.is-error { color: var(--coral-deep); }
.ea-form .field input[aria-invalid="true"], .ea-form .field select[aria-invalid="true"] { border-color: var(--coral); }
@media (max-width: 520px) { .ea-actions .btn { width: 100%; } }