/* ==========================================================================
   Kiosky site: hero + device mock, use cases, feature grid and its mini
   visuals, steps, home teasers. Shared by index.html and features.html.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.hero { padding: var(--s-8) 0 var(--section); }
.hero-grid { display: grid; align-items: center; gap: var(--s-7); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-copy .h1 { font-size: clamp(34px, 3.9vw, 50px); }
.hero-copy .lede { margin-top: var(--s-5); }
.hero-copy .btn-row { margin-top: var(--s-6); }
.hero-note { margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--faint); }
@media (max-width: 440px) { .hero-copy .btn-row .btn { flex: 1 1 100%; } }
@media (max-width: 960px) { .hero { padding-top: var(--s-7); } .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Device mock (inline SVG; colours follow the theme) ----------------- */
.wall { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r3); padding: clamp(16px, 3.5vw, 40px); }
.mock { width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(17, 19, 16, .16)); }
.mock {
  --m-bg: #EEEDE8; --m-card: #FFFFFF; --m-text: #1B1D1A; --m-sub: #6B6F66;
  --m-line: #E2E0D8; --m-on: #C05621; --m-on-soft: #F7E6DA; --m-frame: #1A1D19;
}
:root[data-theme="dark"] .mock {
  --m-bg: #141714; --m-card: #1D211E; --m-text: #F1F0EB; --m-sub: #A3A79D;
  --m-line: #2A2E28; --m-on: #E07A45; --m-on-soft: #3A2518; --m-frame: #050605;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mock {
    --m-bg: #141714; --m-card: #1D211E; --m-text: #F1F0EB; --m-sub: #A3A79D;
    --m-line: #2A2E28; --m-on: #E07A45; --m-on-soft: #3A2518; --m-frame: #050605;
  }
}
.mock text { font-family: var(--sans); }
.mock .mono { font-family: var(--mono); }
.m-frame { fill: var(--m-frame); }
.m-bg { fill: var(--m-bg); }
.m-card { fill: var(--m-card); stroke: var(--m-line); stroke-width: 1; }
.m-text { fill: var(--m-text); }
.m-sub { fill: var(--m-sub); }
.m-on { fill: var(--m-on); }
.m-on-soft { fill: var(--m-on-soft); }
.m-off { fill: var(--m-bg); }
.m-line { fill: var(--m-line); }
.m-pill { fill: var(--m-text); }
.m-on-pill { fill: var(--m-bg); }
.m-bar { fill: var(--m-sub); opacity: .45; }
.m-bar-on { fill: var(--m-on); }
.m-outline { stroke: var(--m-line); stroke-width: 1; }
.m-outline-only { fill: none; stroke: var(--m-line); stroke-width: 1; }
.m-field { fill: var(--m-bg); stroke: var(--m-line); stroke-width: 1.5; }
.m-knob { fill: var(--m-card); }
.m-cloud { fill: var(--m-card); stroke: var(--m-sub); stroke-width: 1.6; }
.c-on { color: var(--m-on); } .c-sub { color: var(--m-sub); } .c-text { color: var(--m-text); } .c-bg { color: var(--m-bg); }

/* Three scenes cross-fade; with reduced motion only the first one shows. */
.mock .scene { opacity: 0; }
.mock .scene-1 { opacity: 1; }
.scene-tabs { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.scene-tabs li {
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r2); color: var(--faint); background: var(--card);
}
.scene-tabs li:first-child { color: var(--accent-text); border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .mock .scene { animation: scene 18s infinite; }
  .mock .scene-1 { animation-name: scene-first; }
  .mock .scene-2 { animation-delay: 6s; }
  .mock .scene-3 { animation-delay: 12s; }
  .scene-tabs li { animation: tab 18s infinite; }
  .scene-tabs li:first-child { animation-name: tab-first; }
  .scene-tabs li:nth-child(2) { animation-delay: 6s; }
  .scene-tabs li:nth-child(3) { animation-delay: 12s; }
}
@keyframes scene { 0%, 31% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
@keyframes scene-first { 0%, 31% { opacity: 1; } 33.4%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tab { 0%, 33% { color: var(--accent-text); border-color: var(--accent); } 33.4%, 100% { color: var(--faint); border-color: var(--border); } }
@keyframes tab-first { 0%, 33% { color: var(--accent-text); border-color: var(--accent); } 33.4%, 97% { color: var(--faint); border-color: var(--border); } 100% { color: var(--accent-text); border-color: var(--accent); } }

/* ---- Use cases ---------------------------------------------------------- */
.usecases { display: grid; gap: var(--gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.usecases > .card { grid-column: span 2; }
.usecases > .card:nth-child(n+4) { grid-column: span 3; }
.uc-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r2); background: var(--accent-soft); color: var(--accent); }
.uc-icon svg { width: 20px; height: 20px; }
@media (max-width: 960px) {
  .usecases > .card { grid-column: span 2; }
  .usecases > .card:nth-child(-n+2) { grid-column: span 3; }
  .usecases > .card:nth-child(n+4) { grid-column: span 2; }
}
@media (max-width: 680px) { .usecases { grid-template-columns: minmax(0, 1fr); } .usecases > .card, .usecases > .card:nth-child(n+1) { grid-column: auto; } }

/* ---- Feature grid ------------------------------------------------------- */
.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bento > .card { grid-column: span 6; }
.bento > .card.w7 { grid-column: span 7; }
.bento > .card.w5 { grid-column: span 5; }
.bento > .card.w12 { grid-column: span 12; }
.bento .viz { margin-top: auto; padding-top: var(--s-3); min-width: 0; }
.viz, .feat-viz { container-type: inline-size; }
@container (max-width: 440px) { .pin { grid-template-columns: minmax(0, 1fr); } .pin-pad { justify-self: start; } }
.card.split-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: center; }
.card.split-card > div:first-child { display: grid; gap: var(--s-3); }
.card.split-card .viz { margin: 0; padding: 0; }
@media (max-width: 960px) {
  .bento > .card, .bento > .card.w7, .bento > .card.w5 { grid-column: span 12; }
  .card.split-card { grid-template-columns: minmax(0, 1fr); }
}

/* Dark "inverse" card, same in both themes. */
.card-ink { background: #111310; border-color: #111310; color: #FBFAF7; }
.card-ink p { color: #B7BAB0; }
.card-ink .label { color: #8F9388; }
:root[data-theme="dark"] .card-ink { background: #0A0B0A; border-color: var(--border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-ink { background: #0A0B0A; border-color: var(--border); } }

/* ---- Mini visual: PIN pad + facts --------------------------------------- */
.pin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 40px); gap: var(--s-2); padding: var(--s-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r3); }
.pin-dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.pin-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.pin-dots i.on { background: var(--ink); }
.pin-pad b { height: 34px; display: grid; place-items: center; font: 500 14px/1 var(--mono); color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); }
.facts-list { list-style: none; padding: 0; display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.facts-list li { display: grid; gap: 2px; }

/* ---- Mini visual: URL list / rotation ----------------------------------- */
.urls { border: 1px solid var(--border); border-radius: var(--r3); background: var(--bg); font-size: var(--fs-sm); overflow: hidden; }
.urls-head, .entities-head {
  display: flex; justify-content: space-between; gap: var(--s-3); padding: 10px 14px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.urls ul, .entities ul { list-style: none; margin: 0; padding: 6px 0; }
.urls li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding: 8px 14px; align-items: baseline; }
.urls li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urls li span:last-child { font: 400 12px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.urls li.on span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }

/* ---- Mini visual: entity list ------------------------------------------- */
.entities { border: 1px solid var(--border); border-radius: var(--r3); background: var(--bg); font: 400 12.5px/1.4 var(--mono); overflow: hidden; }
.entities li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 14px; }
.entities li span:first-child { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.entities li span:last-child { color: var(--ink); white-space: nowrap; }
.entities li .on { color: var(--accent-text); }

/* ---- Mini visual: idle timeline ----------------------------------------- */
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
.timeline div { display: grid; gap: var(--s-2); min-width: 0; align-content: start; }
.timeline i { display: block; height: 24px; border-radius: var(--r1); background: var(--ink); }
.timeline div:nth-child(2) i { opacity: .55; }
.timeline div:nth-child(3) i { opacity: .25; }
.timeline div:nth-child(4) i { background: var(--panel2); border: 1px dashed var(--faint); }
.timeline span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.timeline strong { display: block; color: var(--ink); font-weight: 600; }
.night { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-xs); color: var(--muted); }
.night span { display: inline-flex; align-items: center; gap: var(--s-2); }
.night svg { width: 15px; height: 15px; color: var(--accent); }
@media (max-width: 480px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); } }

/* ---- Mini visual: voice transcript -------------------------------------- */
.voice { display: grid; gap: 10px; font-size: var(--fs-sm); }
.voice-wake { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #E07A45; }
.voice-wake .bars { display: inline-flex; gap: 3px; align-items: center; height: 14px; }
.voice-wake .bars i { width: 3px; border-radius: 1px; background: #E07A45; height: 9px; }
.voice-wake .bars i:nth-child(2), .voice-wake .bars i:nth-child(4) { height: 14px; }
.voice-line { padding: var(--s-3) 14px; border-radius: var(--r3); border: 1px solid #2A2E28; background: #191D1A; color: #FBFAF7; }
.voice-line small { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8F9388; margin-bottom: 6px; }
.voice-line.reply { background: transparent; color: #B7BAB0; }
@media (prefers-reduced-motion: no-preference) {
  .voice-wake .bars i { animation: eq 1.4s var(--ease) infinite alternate; }
  .voice-wake .bars i:nth-child(2) { animation-delay: .2s; } .voice-wake .bars i:nth-child(3) { animation-delay: .4s; }
  .voice-wake .bars i:nth-child(4) { animation-delay: .1s; } .voice-wake .bars i:nth-child(5) { animation-delay: .3s; }
}
@keyframes eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* ---- Mini visual: code + endpoints -------------------------------------- */
.code { margin: 0; padding: var(--s-4) 18px; overflow-x: auto; background: #111310; color: #E8E7E1; border-radius: var(--r3); font: 400 12.5px/1.7 var(--mono); white-space: pre; }
.code .c { color: #8F9388; } .code .s { color: #E9A47C; }
:root[data-theme="dark"] .code { background: #0A0B0A; border: 1px solid var(--border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code { background: #0A0B0A; border: 1px solid var(--border); } }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.chips li { font: 400 12px/1 var(--mono); padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--card); color: var(--muted); }

/* ---- Mini visual: camera popup ------------------------------------------ */
.popup-viz svg { width: 100%; height: auto; border-radius: var(--r3); }
.cam-wall { fill: #CFC8B8; } .cam-door { fill: #6B4A35; } .cam-frame { fill: #3B3128; }
.cam-step { fill: #A79F8E; } .cam-plant { fill: #4F6B45; } .cam-pot { fill: #8B5A3C; }
.cam-ink { fill: #111310; } .cam-paper { fill: #FBFAF7; } .cam-muted { fill: #B7BAB0; }
.cam-accent { fill: #E07A45; } .cam-dim { fill: #1A1D19; } .cam-lamp { fill: #F2E3B8; }
.popup-viz text { font-family: var(--sans); }
.popup-viz .mono { font-family: var(--mono); }

/* ---- Home Assistant band ------------------------------------------------ */
.ha-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.ha-grid .ticks { margin-top: var(--s-5); font-size: var(--fs-base); gap: var(--s-3); }
.ha-viz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.ha-viz > * { min-width: 0; }
.ha-viz .card-ink { border-radius: var(--r3); padding: var(--s-5); }
.integrations { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; }
.integrations .chips { margin: 0; }
@media (max-width: 1100px) {
  .ha-grid, .integrations { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}
@media (max-width: 600px) { .ha-viz { grid-template-columns: minmax(0, 1fr); } }

/* ---- Steps -------------------------------------------------------------- */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); counter-reset: step; }
.steps li { position: relative; padding-top: var(--s-6); border-top: 1px solid var(--border-strong); counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; top: -14px; left: 0;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--ink); border-radius: 50%; font: 500 12px/1 var(--mono); color: var(--ink);
}
.section--panel .steps li::before { background: var(--panel); }
.steps h3 { margin-bottom: var(--s-2); }
.steps p { color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* ---- Pricing teaser (two equal cards) ----------------------------------- */
.plans-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
@media (max-width: 720px) { .plans-mini { grid-template-columns: minmax(0, 1fr); } }
.m-dim { opacity: .7; }