/* ==========================================================================
   Ganesha - home.css (index.html only)
   Loaded after theme.css, which holds everything both pages share. This file
   is only what the homepage has and the features page does not: the three
   illustrated cards, the platform diagram, audiences, deployment, and the
   coming-soon notice in the finale.
   ========================================================================== */

/* --- Illustrated card visuals ------------------------------------------- */
/* min-height, not a fixed square: a fixed 1:1 box clipped the chips and the
   face-recognition toggle whenever the card got narrow. */
.visual{position:relative;overflow:hidden;border-radius:24px;min-height:clamp(280px,26vw,400px);width:100%;
  display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(16px,2.4vw,30px);
  background-size:cover;background-position:center;}

/* Detect: a small camera wall on warm light */
.visual--wall{background-image:
  radial-gradient(80% 70% at 30% 20%,rgba(255,196,140,.55),transparent 60%),
  radial-gradient(70% 60% at 90% 100%,rgba(96,56,32,.9),transparent 70%),
  linear-gradient(160deg,#B77443 0%,#6C3D22 55%,#2B1810 100%);}
.mini-wall{border-radius:16px;overflow:hidden;background:rgba(14,12,11,.88);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px rgba(20,10,4,.55);font-size:clamp(8px,.78vw,11.5px);color:hsl(0 0% 86%);}
.mw-bar{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.9em 1.1em;border-bottom:1px solid rgba(255,255,255,.08);}
.mw-bar b{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:#fff;}
.mw-bar b svg{width:1.4em;height:1.4em;color:#fff;}
/* The brand mark is wider than tall (viewBox 42x37), so it keeps its own
   box here; the wall bar shows the same mark as the navbar. */
.mw-bar b svg.mw-mark{width:1.6em;height:1.41em;}
.mw-alert{display:inline-flex;align-items:center;gap:.45em;padding:.25em .8em;border-radius:999px;background:#fff;color:#111;font-weight:600;}
.mw-alert i{width:.5em;height:.5em;border-radius:50%;background:#E0782F;}
.mw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55em;padding:.9em;}
.mw-tile{position:relative;aspect-ratio:16/10;border-radius:.5em;overflow:hidden;border:1px solid rgba(255,255,255,.1);}
.mw-tile svg{position:absolute;inset:0;width:100%;height:100%;}
.mw-tile--live{border:1.5px solid #fff;box-shadow:0 0 0 .3em rgba(255,255,255,.14);}
.mw-box{position:absolute;left:44%;top:42%;width:32%;height:38%;border:1.5px dashed #fff;border-radius:.3em;}
/* the enrolled-person tile: box sits on the lower-right figure in #scene-plaza,
   clear of the flag in the top-left corner */
.mw-box--person{left:71%;top:64%;width:17%;height:33%;border-color:#F2A15E;}
.mw-flag{position:absolute;left:.35em;top:.35em;padding:.15em .4em;border-radius:.35em;background:#fff;color:#111;font-weight:600;white-space:nowrap;}
/* the fence tile: box on the figure in #scene-fence (cx 108 of 160) */
.mw-box--zone{left:62%;top:48%;width:13%;height:28%;border-color:#F2A15E;}

/* --- Video sources (2026-09-19) --------------------------------------------
   Plain chips, not cards: a list of kinds of footage, so it wraps like a
   sentence. Every item is a source the pipeline takes today. */
.sources{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:28px;max-width:52rem;}
.sources li{padding:8px 15px;border-radius:999px;font-size:.9375rem;font-weight:500;line-height:1.3;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);}
.sources__note{margin-top:16px;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.62);max-width:38rem;}
@media (max-width:639px){.sources li{font-size:.875rem;padding:7px 13px;}}

/* --- Planned markers (2026-09-19) ------------------------------------------
   The same outlined look as .layer__tag--planned, so every "not built yet"
   on the page reads as one thing. .plan sits above a tile's heading;
   .plan-inline starts the planned half of an audience paragraph. */
.plan,.plan-inline{font-size:.75rem;font-weight:700;line-height:1.5;color:#F5F3EE;background:transparent;
  border:1px solid rgba(245,243,238,.45);border-radius:999px;padding:1px 9px;white-space:nowrap;}
.plan{align-self:flex-start;}
.tile-card p.plan{font-size:.75rem;line-height:1.5;color:#F5F3EE;}
.plan-inline{display:inline-block;margin-right:1px;vertical-align:.12em;}

/* Search: a query over the copper trails */
.visual--search{background-image:linear-gradient(180deg,rgba(10,8,7,.2),rgba(10,8,7,.55)),url("../img/panel.jpg");background-position:62% 45%;}
.query{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:999px;font-size:clamp(.875rem,1.05vw,1rem);color:#fff;}
.query svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.query span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.results li{border-radius:14px;overflow:hidden;background:rgba(14,12,11,.8);border:1px solid rgba(255,255,255,.14);}
.results svg{width:100%;height:auto;aspect-ratio:4/3;}
.results span{display:block;padding:8px 10px;font-size:clamp(.6875rem,.8vw,.8125rem);line-height:1.35;color:rgba(255,255,255,.85);}
.results b{display:block;font-weight:600;color:#fff;}

/* Attributes: chips over the dusk hills */
.visual--attrs{background-image:linear-gradient(180deg,rgba(12,9,9,0),rgba(12,9,9,.45)),url("../img/closing.jpg");background-position:50% 60%;}
.attr-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.attr-chips li{padding:10px 16px;border-radius:999px;font-size:clamp(.8125rem,.95vw,.9375rem);font-weight:500;color:#fff;}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:14px 16px 14px 20px;border-radius:18px;color:#fff;}
.toggle b{font-weight:600;font-size:.9375rem;}
.toggle span{display:block;font-size:.8125rem;color:rgba(255,255,255,.75);text-wrap:balance;}
.switch{position:relative;width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);flex:none;}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;}

.more{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px);}
.btn-white--lg{padding:16px 30px;font-size:1.0625rem;}

/* --- Platform ------------------------------------------------------------- */
.platform{position:relative;isolation:isolate;text-align:center;}
.platform::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(50% 45% at 50% 22%,#000,transparent 100%);
          mask-image:radial-gradient(50% 45% at 50% 22%,#000,transparent 100%);}
.platform .ring{position:relative;margin:0 auto clamp(28px,3vw,44px);}
.platform__h{font-size:clamp(2.25rem,5.6vw,5.25rem);font-weight:500;line-height:1.04;letter-spacing:-.045em;
  padding-bottom:.12em;margin:16px auto calc(24px - .12em);}
.platform__h span{display:block;}
.platform__p{max-width:52rem;margin:0 auto;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.65;color:var(--muted);}

.layer{max-width:1100px;margin:clamp(48px,6vw,88px) auto 0;display:grid;gap:16px;}
.layer__label{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.layer__inputs,.layer__entities{display:grid;gap:12px;}
.layer__inputs{grid-template-columns:repeat(2,1fr);}
.layer__entities{grid-template-columns:repeat(2,1fr);margin-top:10px;}
.layer li{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;}
.chip{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;width:100%;
  padding:12px 14px;border-radius:999px;font-size:15px;font-weight:500;color:#fff;text-align:center;white-space:normal;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
/* Chip glyphs: the card icons without their tile and corner marks. */
.chip__ico{width:20px;height:20px;flex:none;fill:none;stroke:url(#ico-grad);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.layer__entities .chip{background:rgba(247,242,196,.06);border-color:rgba(247,242,196,.22);}
.layer__tag{font-size:.75rem;font-weight:700;color:#1a1710;background:#F7F2C4;border-radius:999px;padding:2px 8px;white-space:nowrap;}
/* Planned, not built: outlined instead of filled, so it never reads as shipping. */
.layer__tag--planned{color:#F5F3EE;background:transparent;border:1px solid rgba(245,243,238,.45);}
.layer__rail{display:none;}
/* Five inputs since 2026-09-19 (was Video + Voice). Every input chip stacks
   its name over its tag at every width, so "Video / Available now" and
   "Business data / Planned" are the same height side by side.
   Below 900px: Video spans the first row and the four planned inputs sit 2x2
   under it, so nothing is orphaned. */
.layer__inputs .chip{flex-direction:column;gap:6px;flex:1;padding:14px 12px;border-radius:26px;}
.chip__name{display:inline-flex;align-items:center;gap:8px;}
.layer__inputs li:first-child{grid-column:1 / -1;}
/* Five inputs, four entities. The inputs row now spans the full 1100px in
   five equal columns, which centres them on 10/30/50/70/90% - exactly the
   rail's 10%-90% span, so every connector lands on it. The entities row stays
   capped at 900px. Re-check both numbers if a row gains or loses a chip.
   width:100% is required: .layer is a grid, and a grid item with auto side
   margins shrinks to its content, so without it the caps never applied and the
   chips bunched at 175px and 96px (measured 2026-09-17). */
@media (min-width:900px){
  .layer__inputs{grid-template-columns:repeat(5,1fr);gap:18px;width:100%;max-width:1100px;margin:0 auto;}
  .layer__inputs li:first-child{grid-column:auto;}
  .layer__entities{grid-template-columns:repeat(4,1fr);gap:18px;width:100%;max-width:900px;margin:0 auto;}
  .chip{font-size:17px;padding:15px 18px;}
  .layer__inputs li{padding-bottom:52px;}
  .layer__inputs li::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:46px;
    background:linear-gradient(to bottom,rgba(247,242,196,.7),rgba(191,217,207,.25));}
  /* 9%, not 10%: five 18px-gapped columns centre the outer inputs at 9.35%
     and 90.65% of the layer, and the rail has to reach them (measured). */
  .layer__rail{display:block;height:1px;margin:0 9%;
    background:linear-gradient(90deg,transparent,#F7F2C4 15%,#BFD9CF 50%,#EBCFC2 85%,transparent);opacity:.75;}
  .layer__entities li{padding-top:40px;}
  .layer__entities li::before{content:"";position:absolute;left:50%;top:0;width:1px;height:38px;
    background:linear-gradient(to bottom,rgba(191,217,207,.2),rgba(191,217,207,.8));}
}

/* Phones and tablets (2026-09-20): the stacked chips used to just sit there,
   while the wide layout wires them together. The same wiring is drawn inside
   the gaps the stack already leaves, so nothing grows: Video drops into a rail
   over Audio and Photos, each column runs down to Documents and Business data,
   and both meet the rail that feeds the entities. */
@media (max-width:899px){
  .layer__inputs li,.layer__entities li{position:relative;}
  .layer__inputs li::before,.layer__inputs li::after,.layer__entities li::before{
    content:"";position:absolute;left:50%;width:1px;
    background:linear-gradient(to bottom,rgba(247,242,196,.55),rgba(191,217,207,.4));}
  .layer__inputs li:first-child::after{top:100%;height:6px;}
  .layer__inputs li:nth-child(2)::before{top:-6px;height:1px;width:calc(100% + 12px);
    background:linear-gradient(90deg,rgba(247,242,196,.6),rgba(191,217,207,.45));}
  .layer__inputs li:nth-child(2)::after,.layer__inputs li:nth-child(3)::after{top:-6px;height:6px;}
  .layer__inputs li:nth-child(4)::before,.layer__inputs li:nth-child(5)::before{top:-12px;height:12px;}
  .layer__inputs li:nth-child(4)::after,.layer__inputs li:nth-child(5)::after{top:100%;height:16px;}
  .layer__rail{display:block;height:1px;margin:0 25%;opacity:.7;
    background:linear-gradient(90deg,transparent,#F7F2C4 20%,#BFD9CF 80%,transparent);}
  .layer__entities li:nth-child(1)::before,.layer__entities li:nth-child(2)::before{top:-26px;height:26px;}
  .layer__entities li:nth-child(3)::before,.layer__entities li:nth-child(4)::before{top:-12px;height:12px;}
}

/* --- Next on the platform (2026-09-19) --------------------------------------
   Four planned capabilities, 2x2, then one full-width panel of example
   questions. The questions are a list of sentences, not cards: they are what
   a person would type, so they are set large and plain. */
.next .tile-card .ico{width:48px;height:48px;border-radius:14px;margin-bottom:10px;}
.next .tile-card h3{font-size:clamp(1.375rem,2vw,2rem);}
.asks{margin-top:clamp(16px,1.8vw,28px);}
.asks__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
.asks__list{display:grid;margin-top:8px;}
.asks__list li{padding:16px 0;border-top:1px solid var(--line);font-size:clamp(1.0625rem,1.5vw,1.375rem);
  font-weight:500;line-height:1.4;letter-spacing:-.01em;color:#fff;text-wrap:pretty;}
.asks__list li::before{content:"\201C";}
.asks__list li::after{content:"\201D";}

/* --- Audiences and deployment ---------------------------------------------- */
.who .tile-card .ico{width:48px;height:48px;border-radius:14px;margin-bottom:10px;}
/* Inside the <dt>, since a <dl> group may only hold dt/dd. */
.specs .ico{width:48px;height:48px;border-radius:14px;margin-bottom:18px;}
.specs{display:grid;gap:clamp(16px,1.8vw,28px);}
@media (min-width:760px){.specs{grid-template-columns:repeat(2,1fr);}}
.specs dt{font-size:clamp(1.5rem,2.3vw,2.25rem);font-weight:500;line-height:1.18;letter-spacing:-.025em;}
.specs dd{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--muted);max-width:36rem;}

/* --- Finale: coming soon ----------------------------------------------------- */
.soon{max-width:760px;margin:clamp(40px,5vw,64px) auto 0;border-radius:30px;
  padding:clamp(28px,4vw,52px) clamp(22px,4vw,56px);
  background:rgba(24,16,14,.45);border-color:rgba(255,255,255,.18);}
.soon__chip{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;
  font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);}
.soon__chip i{width:8px;height:8px;border-radius:50%;background:#F2A15E;box-shadow:0 0 0 3px rgba(242,161,94,.22),0 0 12px #F2A15E;}
.soon__h{margin-top:22px;font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:500;line-height:1.15;letter-spacing:-.03em;}
.soon__p{margin:14px auto 0;max-width:34rem;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.6;color:rgba(255,255,255,.8);}
.soon__p a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px;overflow-wrap:anywhere;}
.soon__p a:hover{text-decoration-color:#fff;}