/* Hojta site — the app's front panel, in a browser.
   Values are the app's own (design/sonos-intercom-mvp, Panel.swift). */

@font-face { font-family: "Jost"; font-weight: 300; src: url(fonts/Jost-Light.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 400; src: url(fonts/Jost-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 500; src: url(fonts/Jost-Medium.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "VT323"; font-weight: 400; src: url(fonts/VT323-Regular.ttf) format("truetype"); font-display: swap; }

:root {
  --chassis-top: oklch(90% 0.006 80);
  --chassis-bottom: oklch(86% 0.006 80);
  --seam: oklch(72% 0.006 80);
  --tile: oklch(94% 0.005 80);
  --ink: oklch(30% 0.005 80);
  --ink-soft: oklch(40% 0.005 80);
  --ink-muted: oklch(45% 0.005 80);
  --key-top: oklch(99% 0.003 80);
  --key-bottom: oklch(91% 0.004 80);
  --key-edge: oklch(74% 0.005 80);
  --lcd: oklch(13% 0.004 260);
  --lcd-text: oklch(82% 0.22 140);
  --lcd-dim: oklch(60% 0.01 260);
  --orange: oklch(67% 0.22 38);
  --orange-deep: oklch(58% 0.22 38);
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { background: var(--chassis-bottom); }

body {
  margin: 0;
  min-height: 100dvh;
  padding: 40px 16px 48px;
  background: linear-gradient(180deg, var(--chassis-top), var(--chassis-bottom)) fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
}

::selection { background: oklch(67% 0.22 38 / 28%); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--orange-deep); }

/* Header line above the panel, like the app's "INTERCOM-01 ······ LINKED ●" */
.head {
  width: min(560px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 12px;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.head a { color: inherit; text-decoration: none; }
.head a:hover { color: var(--ink); }
.head .status { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; }
/* Static — the "Linked" label next to it already states the status;
   the app's own header dot doesn't blink either. */
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* The chassis: a grid of tiles with 2px seams */
.panel {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: 14px;
  background: var(--seam);
  box-shadow: 0 1px 0 oklch(97% 0.004 80), 0 10px 24px oklch(0% 0 0 / 12%);
}
.panel > * { grid-column: span 4; min-width: 0; }
.panel > :first-child { border-radius: 12px 12px 0 0; }
.panel > :last-child { border-radius: 0 0 12px 12px; }

.tile {
  background: var(--tile);
  padding: 20px 22px 22px;
}
.tile p { margin: 0; color: var(--ink-muted); }
.tile p + p { margin-top: 8px; }
.tile strong { font-weight: 500; color: var(--ink); }

/* Uppercase tile caption — the app's keyLabel */
.label, .tile h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.big { font-size: 24px; font-weight: 300; line-height: 1.1; color: var(--ink); margin: 0 0 6px; }
.lead { font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0; }

.half { grid-column: span 2; }
@media (max-width: 480px) { .half { grid-column: span 4; } }

/* Display tile — VT323 on near-black */
.lcd {
  background: var(--lcd);
  padding: 14px 16px 16px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  color: var(--lcd-text);
  text-shadow: 0.5px 0 0 currentColor;
  box-shadow: inset 0 2px 6px oklch(0% 0 0 / 60%);
}
.lcd .row { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; font-size: 18px; letter-spacing: 0.08em; color: var(--lcd-dim); text-transform: uppercase; }
.lcd h1 { margin: 0; font-size: 44px; font-weight: 400; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.lcd .meta { font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lcd-text); opacity: 0.8; }
@media (max-width: 480px) { .lcd h1 { font-size: 36px; } }

/* ---- Hero: huge statement, a small hardware chip, the real app in hand ---- */
.hero {
  width: min(640px, 100%);
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-headline {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--lcd);
  color: var(--lcd-text);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-phone { position: relative; margin-top: 36px; display: flex; justify-content: center; }
.hero-phone::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 65%;
  aspect-ratio: 1;
  background: radial-gradient(circle, oklch(67% 0.22 38 / 60%), transparent 70%);
  filter: blur(56px);
}
.hero-phone img {
  position: relative;
  z-index: 1;
  display: block;
  height: clamp(380px, 56vw, 560px);
  width: auto;
}

.hero .cta-block { margin-top: 36px; }

/* ---- The open, spacious body below the hero — no more seams. Panel styling
   survives only as accents: the demo display, the CTA pill, the FAQ marker. ---- */
.flow {
  width: min(560px, 100%);
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
}
.flow > * + * { margin-top: 48px; }

/* ---- Bento grid: a real two-column layout, not a narrow stack. Lives at
   the page's own width (outside .flow's 560px reading column) so the
   illustration can sit beside the two promise cells, and pricing beside
   the demo, instead of everything running the full width in a single file.
   Color-blocked in the brand's own restrained palette (cream / orange /
   LCD black) — bold through contrast and scale, not through new hues. ---- */
.bento {
  width: min(1000px, 94vw);
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
}
.bento-cell {
  border-radius: 24px;
  padding: 30px 32px;
  box-shadow: 0 1px 0 oklch(97% 0.004 80 / 60%), 0 14px 28px oklch(0% 0 0 / 10%);
}
.bento-cell h2 { margin: 0 0 6px; font-size: 23px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.bento-cell p { margin: 0; font-size: 17px; }
.bento-cta-banner { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .bento-stack { flex-direction: column; }
}

/* Grid stretches this cell to match the taller stack column beside it
   (align-items: stretch, the grid default) — the image needs to absorb
   that extra height itself, or it leaves a blank gap above the caption. */
.bento-illustration { padding: 0; overflow: hidden; background: var(--tile); display: flex; flex-direction: column; }
.bento-illustration img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.bento-illustration figcaption { padding: 26px 32px 32px; flex-shrink: 0; }
.bento-illustration h2 { color: var(--ink); }
.bento-illustration p { color: var(--ink-muted); }

/* Two small cells stacked beside the illustration, stretched to match its
   height (align-items: stretch, the grid default) and spread apart rather
   than left stranded at the top when they're shorter than the photo. */
.bento-stack { display: flex; flex-direction: column; gap: 20px; }
.bento-stack .bento-cell { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.bento-cream { background: var(--tile); }
.bento-cream h2 { color: var(--ink); }
.bento-cream p { color: var(--ink-muted); }

.bento-orange { background: linear-gradient(160deg, var(--orange), var(--orange-deep)); }
.bento-orange h2, .bento-orange p { color: oklch(99% 0.005 80); }

/* The demo is its own card directly — no cream card wrapping a dark one. */
.demo-cell { display: flex; flex-direction: column; justify-content: center; }
.demo-cell .label { margin: 0; color: var(--lcd-dim); }

.bento-pricing .price-statement {
  margin: 4px 0 0;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bento-pricing .price-statement .accent { color: var(--orange); }
.bento-pricing .lead { margin-top: 10px; }
.bento-pricing .trust-list { margin-top: 20px; }

.bento-cta-banner {
  background: linear-gradient(160deg, var(--orange), var(--orange-deep));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 34px 30px;
}
.bento-cta-banner .label { color: oklch(98% 0.01 80); }

.links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.links a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 16px; }
.links a:hover { color: var(--orange); }
.links svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.links a:hover svg { stroke: var(--orange); }

/* Key row: a round key on the left, a label tile filling the rest */
.keyrow { display: grid; grid-template-columns: 96px 1fr; gap: 2px; background: transparent; padding: 0; }
.keyrow > * { background: var(--tile); min-height: 84px; }
.keyrow .well { display: flex; align-items: center; justify-content: center; }
.keyrow .well:first-child { border-radius: 0 0 0 12px; }
.keyrow .side { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 20px; border-radius: 0 0 12px 0; }
.keyrow .side .label { margin: 0; }
.keyrow .side .name { font-size: 14px; color: var(--ink); }

.key {
  width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  background: radial-gradient(circle at 50% 38%, var(--key-top), var(--key-bottom));
  box-shadow: 0 2px 0 var(--key-edge), 0 4px 8px oklch(0% 0 0 / 18%), inset 0 1px 0 oklch(100% 0 0);
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), box-shadow 120ms cubic-bezier(0.2, 0, 0, 1);
}
.key svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
a.key:hover, a.key:active { color: var(--ink); transform: translateY(1px); box-shadow: 0 1px 0 var(--key-edge), 0 2px 4px oklch(0% 0 0 / 18%), inset 0 1px 0 oklch(100% 0 0); }
a.key:focus-visible { outline-offset: 4px; border-radius: 50%; }

/* Live demo — a second display, showing the send interaction instead of a video.
   Default state (no animation) is the "recording" frame, so reduced-motion and
   slow-loading visitors still see something informative rather than a blank idle tile. */
.demo-tx { display: inline-flex; align-items: center; gap: 6px; }
.demo-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px 2px oklch(67% 0.22 38 / 55%);
}

.demo-stage { position: relative; height: 52px; }
.demo-idle,
.demo-meter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.demo-idle {
  opacity: 0;
  margin: 0;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.demo-meter { align-items: flex-end; gap: 3px; padding-bottom: 4px; opacity: 1; }
.demo-meter span { flex: 1; min-width: 0; background: var(--lcd-text); border-radius: 1px; height: 55%; }
.demo-meter span:nth-child(3n+1) { height: 40%; }
.demo-meter span:nth-child(3n+2) { height: 80%; }
@media (max-width: 480px) { .demo-idle { font-size: 30px; } }

.demo-meta { position: relative; height: 20px; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-meta span { position: absolute; inset: 0; opacity: 0; }
.demo-meta-active { opacity: 0.8; color: var(--orange); }

@media (prefers-reduced-motion: no-preference) {
  .demo-led { animation: demoTx 7s ease-in-out infinite; }
  .demo-idle { animation: demoIdle 7s ease-in-out infinite; }
  .demo-meter { animation: demoMeterGate 7s ease-in-out infinite; }
  .demo-meter span { animation: demoLevel 1.1s ease-in-out infinite; }
  .demo-meter span:nth-child(1) { animation-delay: -0.00s; }
  .demo-meter span:nth-child(2) { animation-delay: -0.13s; }
  .demo-meter span:nth-child(3) { animation-delay: -0.26s; }
  .demo-meter span:nth-child(4) { animation-delay: -0.39s; }
  .demo-meter span:nth-child(5) { animation-delay: -0.52s; }
  .demo-meter span:nth-child(6) { animation-delay: -0.65s; }
  .demo-meter span:nth-child(7) { animation-delay: -0.78s; }
  .demo-meter span:nth-child(8) { animation-delay: -0.91s; }
  .demo-meta-idle { animation: demoMetaIdle 7s ease-in-out infinite; }
  .demo-meta-active { animation: demoMetaActive 7s ease-in-out infinite; }
  .demo-meta-sent { animation: demoMetaSent 7s ease-in-out infinite; }
}

@keyframes demoTx {
  0%, 20% { background: oklch(38% 0.09 38); box-shadow: none; }
  25%, 88% { background: var(--orange); box-shadow: 0 0 8px 2px oklch(67% 0.22 38 / 55%); }
  92%, 100% { background: oklch(38% 0.09 38); box-shadow: none; }
}
@keyframes demoIdle {
  0%, 16% { opacity: 1; }
  22%, 90% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes demoMeterGate {
  0%, 20% { opacity: 0; }
  26%, 70% { opacity: 1; }
  76%, 100% { opacity: 0; }
}
@keyframes demoLevel {
  0%, 100% { height: 18%; }
  50% { height: 85%; }
}
@keyframes demoMetaIdle {
  0%, 16% { opacity: 0.8; }
  22%, 90% { opacity: 0; }
  100% { opacity: 0.8; }
}
@keyframes demoMetaActive {
  0%, 20% { opacity: 0; }
  26%, 70% { opacity: 0.8; }
  76%, 100% { opacity: 0; }
}
@keyframes demoMetaSent {
  0%, 73% { opacity: 0; }
  78%, 88% { opacity: 0.8; }
  93%, 100% { opacity: 0; }
}

/* Trust list — a terse "we promise" row instead of a paragraph */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-list li {
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.trust-list li::before {
  content: "–";
  display: inline-block;
  width: 1.1em;
  color: var(--orange);
  font-weight: 500;
}

/* Download call to action */
.cta-block { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 220px; padding: 14px 28px; border-radius: 999px;
  background: linear-gradient(180deg, var(--orange), var(--orange-deep));
  color: oklch(99% 0.005 80);
  font-size: 15px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 3px 0 oklch(48% 0.2 38), 0 6px 12px oklch(0% 0 0 / 20%);
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), box-shadow 120ms cubic-bezier(0.2, 0, 0, 1);
}
.cta:hover, .cta:active { color: oklch(99% 0.005 80); transform: translateY(2px); box-shadow: 0 1px 0 oklch(48% 0.2 38), 0 3px 6px oklch(0% 0 0 / 20%); }
.cta-block .label { margin: 0; }

/* Inverted CTA for use on the orange banner — light pill instead of orange */
.cta-invert {
  background: oklch(99% 0.005 80);
  color: var(--orange-deep);
  box-shadow: 0 3px 0 oklch(85% 0.02 80), 0 6px 12px oklch(0% 0 0 / 18%);
}
.cta-invert:hover, .cta-invert:active { color: var(--orange-deep); box-shadow: 0 1px 0 oklch(85% 0.02 80), 0 3px 6px oklch(0% 0 0 / 18%); }

/* FAQ — native <details>, no script needed */
details { border-top: 1px solid var(--seam); padding: 12px 0; }
details:first-of-type { border-top: none; padding-top: 0; }
summary { cursor: pointer; font-size: 19px; color: var(--ink); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; display: inline-block; width: 1em; color: var(--orange); font-weight: 500; }
details[open] summary::before { content: "−"; }
details p { margin-top: 8px; font-size: 16px; }

.foot {
  width: min(560px, 100%);
  margin-top: 16px;
  padding: 0 4px;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.foot a { color: inherit; }