/* Ava Display - rendered product mockups.
   Everything here is drawn in CSS with synthetic content. No customer data,
   no real serials, no real room names. */

/* ---------- screen / TV frame ---------- */
.screen {
  border-radius: 14px;
  background: #0A1419;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 70px rgba(0,0,0,0.42);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}
.screen-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.8rem; background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.screen-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.screen-dot.live { background: #35C08A; box-shadow: 0 0 8px rgba(53,192,138,0.8); }
.screen-label { font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }
.screen-body { padding: 1.15rem 1.25rem; height: 100%; color: #fff; }

/* signage layout inside a screen */
.sg-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sg-school { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.sg-time { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.sg-date { font-size: 0.66rem; color: rgba(255,255,255,0.55); margin-top: 0.2rem; }
.sg-cards { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.7rem; margin-top: 1rem; }
.sg-card {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px; padding: 0.65rem 0.75rem;
}
.sg-card h5 { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.sg-card p { font-size: 0.74rem; color: rgba(255,255,255,0.82); margin-top: 0.28rem; line-height: 1.45; }
.sg-ticker {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(74,138,153,0.35); border-top: 1px solid rgba(255,255,255,0.12);
  padding: 0.4rem 1.25rem; font-size: 0.68rem; color: rgba(255,255,255,0.9);
  white-space: nowrap; overflow: hidden;
}

/* emergency takeover */
.screen--alert { background: #6E1614; }
.screen--alert .screen-body { display: grid; place-content: center; text-align: center; }
.alert-tag {
  display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; background: #fff; color: #6E1614;
  padding: 0.22rem 0.6rem; border-radius: 4px; margin-bottom: 0.7rem;
}
.alert-msg { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.alert-sub { font-size: 0.72rem; color: rgba(255,255,255,0.78); margin-top: 0.5rem; }

/* cast state */
.screen--cast .screen-body { display: grid; place-content: center; text-align: center; }
.cast-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #35C08A; border: 1px solid rgba(53,192,138,0.45); border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.cast-title { font-size: 1.05rem; font-weight: 700; margin-top: 0.8rem; }
.cast-meta { font-size: 0.7rem; color: rgba(255,255,255,0.55); margin-top: 0.35rem; }

/* ---------- console mockup ---------- */
.console {
  background: #101E26; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.38); color: #fff;
}
.console-top {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.85rem 1.1rem; background: rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.console-title { font-size: 0.86rem; font-weight: 700; }
.console-pills { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.pill {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
}
.pill.ok   { background: rgba(53,192,138,0.16);  color: #6BDCAE; }
.pill.warn { background: rgba(255,196,61,0.16);  color: #FFCF6B; }
.pill.bad  { background: rgba(232,90,84,0.16);   color: #FF9A94; }

.console-rows { display: grid; }
.crow {
  display: grid; grid-template-columns: 1.35fr 0.85fr 0.8fr 0.8fr 0.9fr;
  gap: 0.7rem; align-items: center;
  padding: 0.72rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.78rem;
}
.crow:last-child { border-bottom: 0; }
.crow.head {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); font-weight: 700; background: rgba(255,255,255,0.02);
}
.crow .room { font-weight: 600; }
.crow .muted { color: rgba(255,255,255,0.55); }
.bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: #35C08A; }
.bar.warn span { background: #FFC43D; }
.bar.bad span  { background: #E85A54; }

/* ---------- split feature layout ---------- */
.split { display: grid; gap: 2.4rem; align-items: center; grid-template-columns: 1fr 1fr; margin-top: 2.8rem; }
.split.rev .split-media { order: -1; }
.split-copy h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.split-copy p { color: var(--text-soft); font-size: 1rem; }
.sec-dark .split-copy p, .sec-teal .split-copy p { color: rgba(255,255,255,0.76); }
.sec-dark .split-copy h3, .sec-teal .split-copy h3 { color: #fff; }

/* ---------- stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.4rem; }
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stat span { display: block; font-size: 0.82rem; color: var(--text-soft); margin-top: 0.5rem; }
.sec-dark .stat span, .sec-teal .stat span { color: rgba(255,255,255,0.65); }
.sec-dark .stat b, .sec-teal .stat b { color: var(--gold); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 1.6rem; }
  .split.rev .split-media { order: 0; }
  .crow { grid-template-columns: 1.2fr 0.9fr 0.9fr; }
  .crow .hide-sm { display: none; }
}

/* ---------- console with the real sidebar nav ---------- */
.console-shell { display: grid; grid-template-columns: 210px 1fr; }
.console-side {
  background: rgba(0,0,0,0.28); border-right: 1px solid rgba(255,255,255,0.08);
  padding: 0.9rem 0.6rem;
}
.console-org {
  font-size: 0.78rem; font-weight: 700; color: #fff;
  padding: 0.3rem 0.55rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0.6rem;
}
.console-nav { display: grid; gap: 0.12rem; }
.console-nav a {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; color: rgba(255,255,255,0.62);
  padding: 0.42rem 0.55rem; border-radius: 7px; text-decoration: none;
}
.console-nav a .ic { font-size: 0.8rem; width: 1rem; text-align: center; }
.console-nav a.on { background: rgba(74,138,153,0.28); color: #fff; font-weight: 600; }
@media (max-width: 860px) { .console-shell { grid-template-columns: 1fr; } .console-side { display: none; } }

/* ---------- illustrations ---------- */
.illus {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.3rem; box-shadow: var(--shadow);
}
.sec-dark .illus, .sec-teal .illus {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.13); box-shadow: none;
}
.illus h4 {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.25rem;
}
.sec-dark .illus h4, .sec-teal .illus h4 { color: #fff; }
.illus .cap { font-size: 0.86rem; color: var(--text-soft); margin-bottom: 1.1rem; }
.sec-dark .illus .cap, .sec-teal .illus .cap { color: rgba(255,255,255,0.68); }
.illus svg { width: 100%; height: auto; display: block; }

/* diagram tokens, so both diagrams read as one system */
.dg-net   { fill: rgba(74,138,153,0.08); stroke: var(--teal-mid); }
.dg-box   { fill: #fff; stroke: var(--teal-dark); }
.dg-accent{ fill: rgba(255,215,0,0.14); stroke: var(--gold-deep); }
.dg-cloud { fill: rgba(41,69,85,0.07); stroke: var(--teal-dark); }
.dg-t     { fill: var(--text); font-size: 12px; font-weight: 700; }
.dg-s     { fill: var(--text-soft); font-size: 10.5px; }
.dg-line  { stroke: var(--teal-mid); stroke-width: 2; fill: none; }
.dg-dash  { stroke: var(--text-soft); stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.dg-lbl   { fill: var(--teal-dark); font-size: 10px; font-weight: 700; }

/* ---------- numbered setup steps ---------- */
.steps { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: 2.6rem; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.4rem 1.4rem; box-shadow: var(--shadow);
}
.step .n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--gold); font-weight: 800; font-size: 0.85rem; margin-bottom: 0.85rem;
}
.step h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.step p { font-size: 0.9rem; color: var(--text-soft); }
.step .stepart { margin-bottom: 0.9rem; }
.step .stepart svg { width: 100%; height: 62px; display: block; }

/* ---------- phones: let the mockups breathe ----------
   The screen mockups are 16:9, which at phone width collapses to about 200px
   tall while the content inside still needs ~250px. Measured at 390px: the
   cards overran the box by 8px and covered the ticker by 41px. On small
   screens the aspect ratio is dropped, the ticker stops being absolutely
   positioned, and the type steps down. */
@media (max-width: 700px) {
  .screen { aspect-ratio: auto; }
  .screen-body { padding: 0.9rem 1rem 0.9rem; }
  .sg-time { font-size: 1.25rem; }
  .sg-school { font-size: 0.85rem; }
  .sg-cards { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.75rem; }
  .sg-card p { font-size: 0.8rem; }
  .sg-ticker {
    position: static; margin-top: 0.85rem;
    white-space: normal; padding: 0.45rem 1rem; font-size: 0.72rem;
  }
  .screen--alert .screen-body,
  .screen--cast .screen-body { padding: 2rem 1rem; }
  .alert-msg { font-size: 1.05rem; }

  /* console rows: drop to the three columns that carry meaning */
  .crow { grid-template-columns: 1.3fr 1fr 0.9fr; font-size: 0.74rem; padding: 0.6rem 0.85rem; }
  .console-top { padding: 0.7rem 0.85rem; }

  /* diagrams keep their own aspect and simply scale down */
  .illus { padding: 1.2rem 1rem 1rem; }
}

/* ---------- life ----------
   Small, purposeful motion only. Everything here is decorative and every
   rule is disabled under prefers-reduced-motion at the bottom of this file. */

/* the live dot actually pulses */
@keyframes avaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(53,192,138,0.55); }
  70%     { box-shadow: 0 0 0 7px rgba(53,192,138,0); }
}
.screen-dot.live { animation: avaPulse 2.4s ease-out infinite; }

/* the signage ticker scrolls, because a real one does */
@keyframes avaTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sg-ticker { position: absolute; }
.sg-ticker .tk { display: inline-block; white-space: nowrap; animation: avaTicker 26s linear infinite; }
.sg-ticker .tk span { padding-right: 2.5rem; }

/* emergency card breathes so it reads as urgent without flashing */
@keyframes avaAlert {
  0%,100% { background: #6E1614; }
  50%     { background: #7E1A17; }
}
.screen--alert { animation: avaAlert 3.2s ease-in-out infinite; }

/* health bars fill on reveal instead of appearing complete */
.bar span { transform-origin: left center; animation: avaFill 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes avaFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* cards lift on hover, so the explore grid feels clickable */
.card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(13,27,34,0.16); border-color: var(--teal-mid); }

/* stat numbers rise in */
.stat b { animation: avaRise .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes avaRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* staggered reveal, so a grid arrives rather than snaps */
.grid > .reveal:nth-child(2)  { transition-delay: .07s; }
.grid > .reveal:nth-child(3)  { transition-delay: .14s; }
.grid > .reveal:nth-child(4)  { transition-delay: .21s; }
.grid > .reveal:nth-child(5)  { transition-delay: .28s; }
.grid > .reveal:nth-child(6)  { transition-delay: .35s; }

/* hero screen drifts a little, so the page is not dead on arrival */
@keyframes avaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero .split-media .screen { animation: avaFloat 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .screen-dot.live, .screen--alert, .sg-ticker .tk,
  .hero .split-media .screen, .stat b, .bar span { animation: none !important; }
  .card, a.card:hover { transition: none; transform: none; }
  .reveal { transition: none; }
}

@media (max-width: 700px) {
  .sg-ticker { position: static; }
  .sg-ticker .tk { animation: none; }
  .sg-ticker .tk span { padding-right: 0; }
}

/* ---------- phone width ----------
   Grid and flex items default to min-width:auto, so they refuse to shrink below
   their content's intrinsic width. Measured 2026-08-19 at a 390px viewport: the
   signage mockup forced .sg-cards to 905px, .screen to 939px and the hero column
   to 939px, and .hero{overflow:hidden} then CLIPPED the page rather than
   scrolling it - which is why text ended mid-word with no scrollbar. Every
   clipped element was a symptom of this one cause. The smallest breakpoint in
   the sheet was 700px; phones are 390. */
.split > *, .sg-cards > *, .sg-top > *, .grid > *, .console-shell > *,
.stats > *, .steps > *, .hero-actions > * { min-width: 0; }
img, svg, video, table { max-width: 100%; }

@media (max-width: 480px) {
  .sg-cards { grid-template-columns: 1fr; }
  .sg-top { flex-wrap: wrap; gap: 0.4rem; }
  .screen-bar, .screen-body { max-width: 100%; }
  .stats { grid-template-columns: 1fr; }
}

/* A split whose left column is several paragraphs and whose right column is a
   short check list centres the short one against the tall one, so the checks
   float in the middle with a block of empty space above them and read as
   detached. Top-align when the media side is a check list. */
.split:has(> .split-media .checks) { align-items: start; }

/* ---------- industry screens ----------
   These are the same .screen frame with a different body, because that is what
   the product actually does: one runtime, the role is configuration. Sample
   content only, as the footer states. */

/* the join code a meeting room shows: this IS the product's output */
.screen--code .screen-body { display: grid; place-content: center; text-align: center; }
.code-lead { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); font-weight: 700; }
.code-row { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 0.9rem; }
.code-digits { font-size: 2.6rem; font-weight: 800; letter-spacing: 0.16em; color: #fff; line-height: 1; }
.code-qr {
  width: 84px; height: 84px; flex-shrink: 0; background: #fff; border-radius: 8px; padding: 7px;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); gap: 2px;
}
.code-qr i { background: #0D1B22; border-radius: 1px; }
.code-qr i.o { background: transparent; }
.code-note { font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-top: 0.9rem; }

/* wayfinding / directory, the hospital and lobby case. No names, deliberately. */
.way-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; }
.way-t { font-size: 0.92rem; font-weight: 700; color: #fff; }
.way-s { font-size: 0.68rem; color: rgba(255,255,255,0.6); }
.way-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.42rem 0; border-top: 1px solid rgba(255,255,255,0.09); }
.way-ar { color: var(--gold); font-weight: 800; font-size: 0.9rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.way-n { font-size: 0.76rem; color: rgba(255,255,255,0.88); flex: 1; min-width: 0; }
.way-w { font-size: 0.68rem; color: rgba(255,255,255,0.55); white-space: nowrap; }

/* menu board, the retail and hospitality case */
.menu-h { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 800; margin-bottom: 0.6rem; }
.menu-row { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.38rem 0; border-bottom: 1px dashed rgba(255,255,255,0.13); }
.menu-n { font-size: 0.8rem; color: #fff; font-weight: 600; }
.menu-d { font-size: 0.68rem; color: rgba(255,255,255,0.58); }
.menu-p { font-size: 0.8rem; color: var(--gold); font-weight: 700; white-space: nowrap; }

/* ---------- queue / now-serving ---------- */
.q-now { text-align: center; padding: 0.3rem 0 0.7rem; }
.q-lbl { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 800; }
.q-tik { font-size: 2.4rem; font-weight: 800; color: var(--gold); letter-spacing: 0.06em; line-height: 1.1; }
.q-desk { font-size: 0.72rem; color: rgba(255,255,255,0.72); }
.q-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.34rem 0; border-top: 1px solid rgba(255,255,255,0.09); }
.q-dep { font-size: 0.74rem; color: rgba(255,255,255,0.88); flex: 1; min-width: 0; }
.q-cur { font-size: 0.74rem; color: #fff; font-weight: 700; white-space: nowrap; }
.q-wait { font-size: 0.68rem; color: rgba(255,255,255,0.55); white-space: nowrap; min-width: 3.4rem; text-align: right; }

/* ---------- sponsored / campaign slot ---------- */
.ad-slot { display: grid; place-content: center; text-align: center; height: 100%; }
.ad-kick { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 800; }
.ad-h { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-top: 0.5rem; line-height: 1.25; }
.ad-s { font-size: 0.74rem; color: rgba(255,255,255,0.7); margin-top: 0.45rem; }
.ad-by { font-size: 0.6rem; color: rgba(255,255,255,0.42); margin-top: 0.9rem; letter-spacing: 0.06em; }

/* ---------- calendar driven ---------- */
.cal-row { display: flex; gap: 0.7rem; padding: 0.36rem 0; border-top: 1px solid rgba(255,255,255,0.09); align-items: baseline; }
.cal-t { font-size: 0.72rem; color: var(--gold); font-weight: 700; white-space: nowrap; min-width: 3.2rem; }
.cal-n { font-size: 0.74rem; color: rgba(255,255,255,0.88); flex: 1; min-width: 0; }
.cal-r { font-size: 0.68rem; color: rgba(255,255,255,0.55); white-space: nowrap; }

/* a grid of small screens, for showing several outputs at once */
.screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }
.screens .screen { margin: 0; }
.screens > figure { margin: 0; min-width: 0; }
.screens figcaption { font-size: 0.82rem; color: var(--text-soft); margin-top: 0.7rem; line-height: 1.5; }
.screens figcaption b { color: var(--ink); font-weight: 700; }
@media (max-width: 480px) { .screens { grid-template-columns: 1fr; } }

/* Screens shown in the .screens grid size to their content. The 16/9 frame is
   right for a single hero mockup and wrong here: it clipped rows off the bottom
   of every one of them. */
.screens .screen { aspect-ratio: auto; }
.screens .screen-body { min-height: 190px; }
@media (min-width: 861px) { .screens { grid-template-columns: repeat(2, 1fr); } }

/* ---------- photography ----------
   Photographs carry the ROOM. The schematic screen mockups carry what is ON the
   screen. Mixing the two is deliberate: a photo alone says nothing about the
   product, and a mockup alone leaves a buyer guessing where it lives. */
.photoband { position: relative; border-radius: 16px; overflow: hidden; margin-top: 2.4rem; }
.photoband img { display: block; width: 100%; height: clamp(240px, 34vw, 400px); object-fit: cover; }
.photoband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,27,34,0.92) 0%, rgba(13,27,34,0.72) 42%, rgba(13,27,34,0.18) 100%);
}
.photoband-copy {
  position: absolute; inset: 0; display: grid; align-content: center;
  padding: clamp(1.4rem, 4vw, 3rem); max-width: 34rem; z-index: 2;
}
.photoband-copy h3 { color: #fff; font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.photoband-copy p { color: rgba(255,255,255,0.82); font-size: 0.94rem; margin-top: 0.6rem; }
@media (max-width: 620px) {
  .photoband::after { background: linear-gradient(180deg, rgba(13,27,34,0.72) 0%, rgba(13,27,34,0.93) 62%); }
  .photoband-copy { max-width: none; }
}