/* ═══════════════════════════════════════════════════════════════════════════
   assets/averya-home.css?v=20260906a  —  the homepage marketing upgrade.
   ONE sheet for the five homepage bands that changed, concatenated in page
   order: HERO (A1) · SOLUTIONS (A2) · CONVERSION — arc / schedule / footer
   (A3·A5·A6). The product demonstrations keep their own sheet
   (assets/averya-products.css); nothing is authored in two places.

   Load order: fonts -> styles.css -> averya-typography.css -> averya-nvidia.css
   -> THIS FILE. Loading last means equal specificity wins, and every selector
   below is scoped to its own band (.hero-cover / #about / .plat-section /
   .schedule-card / .footer) — nothing bare is restyled.

   Composition law (site law 5): every band's CSS DEFAULT is its composed END
   STATE. assets/averya-home.js only ever ARMS (hides) and then lets go, so a
   blocked script, prefers-reduced-motion and a screenshot all show the
   finished frame. Reveals fail open by construction.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ [hidden] RESCUE — one rule for every band in this sheet ══════════════
   styles.css:103 `img,svg{display:block}` beats the UA `[hidden]` rule, so a
   hidden <svg> sprite lays out as a 300x150 block: dead space, phantom
   overflow, and a reveal that never starts. Authored ONCE, here. */
.hero-cover [hidden],
#about [hidden],
.plat-section [hidden],
.schedule-card [hidden],
.footer [hidden]{display:none!important}

/* ═══ .is-off — the viewport gate app.js toggles (app.js ~591) ═════════════
   The arc is the one sanctioned infinite loop on the page; styles.css:1648
   pauses it off-screen. Restated here so the re-authored phone tiers below
   cannot outlive the gate that stops them. */
.plat-section .plat-arc.is-off .plat-i{animation-play-state:paused}


/* Homepage hero spacing and inquiry shortcuts. */
/* ── the hero box: 900px → 800px desktop, the 300px void is gone ── */
.hero.hero-cover{min-height:min(88vh,800px)}
.hero-cover .hero-component{max-width:940px;padding:92px 0 78px}
.hero-cover .hero-cover-sub{max-width:760px;margin:20px auto 0}

/* The [hidden] rescue this band needs is hoisted to the top of this sheet. */

/* ═══ THE MAP ═══════════════════════════════════════════════════════════ */
/* ═══ THE THREE STARTER QUESTIONS ═══════════════════════════════════════
   Controls, not chips: they perform an action (they open Averya's own chat
   with the question sent) and they are <a href="contact.html"> underneath.
   Deliberately subordinate to both hero buttons — hairline outline, no fill,
   no pill, 14px, house 2px corner. ═════════════════════════════════════ */
.hero-ask{margin:28px auto 0;max-width:880px}
.hero-ask-lbl{
  font-family:var(--font-ui);
  font-size:13px;line-height:1.4;font-weight:500;letter-spacing:0;
  color:var(--ink-soft);
  margin:0 0 10px;
  text-align:center;
}
.hero-ask-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
}
.hero-ask-q{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:9px 15px;
  border:1px solid rgba(0,0,0,.42);   /* 3.2:1 on the wash — a control boundary, not a hint */
  border-radius:var(--nv-r,2px);
  background:transparent;
  font-family:var(--font-ui);
  font-size:14px;font-weight:500;letter-spacing:0;line-height:1.3;
  color:var(--ink);
  transition:border-color .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease);
}
.hero-ask-ic{
  flex:0 0 auto;width:15px;height:15px;display:block;
  color:var(--primary);
  transition:color .22s var(--ease);
}
@media (hover:hover){
  .hero-ask-q:hover{border-color:var(--primary);background:rgba(201,52,0,.055)}
}
.hero-ask-q:active{border-color:var(--nv-primary-dark,#8B1E2D)}
.hero-ask-q[aria-busy="true"]{color:var(--ink-muted);border-color:rgba(0,0,0,.24)}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */

@media(max-width:768px){
  .hero.hero-cover{min-height:min(88vh,760px)}
  .hero-cover .hero-component{padding:104px 0 62px}
  .hero-cover .hero-cover-sub{margin:16px auto 0}
  .hero-ask{margin-top:22px}
  .hero-ask-row{gap:7px}
  .hero-ask-q{font-size:13.5px;padding:9px 13px}
}
/* iOS Safari: our ≤768 min-height above is later in the cascade than
   styles.css 1380's @supports block, so re-assert it here or the CTA pair
   falls below the visible viewport on iPhone. */
@supports (height:1svh){
  @media(max-width:768px){
    .hero.hero-cover{min-height:min(86svh,760px)}
  }
}
@media(max-width:560px){
  /* the three questions stack full-width so every one of them is a 44px
     target and all three are inside the fold — no horizontal scroller */
  .hero-ask-row{flex-direction:column;align-items:stretch;gap:8px}
  .hero-ask-q{justify-content:flex-start;width:100%}
}


/* ═══ REDUCED MOTION — settle on the composed end state ═════════════════
   No arming happens at all (averya-home.js returns early), so these are the
   belt to that braces: nothing transitions, nothing rides, and the node tint
   the current h1 phrase asks for is applied instantly. ══════════════════ */
@media (prefers-reduced-motion:reduce){
  .hero-ask-q,.hero-ask-ic{transition:none!important}
}

/* ═══ PRINT — the drawing is ink, keep it; the controls are not ═════════ */
@media print{
  .hero-ask{display:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV — the two "also in the hero" items from the direction. Homepage-only
   (body:has(.hero-cover)), so no other page changes. SEPARABLE: if another
   agent owns the nav this whole block can be lifted out without touching
   anything above it.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · Four competing asks in the fold become two + one subordinate row: the
      nav CTA is a plain text link until the page is scrolled, then it is the
      filled pill again. Same element, same href, same label — no route lost. */
body:has(.hero-cover) .nav:not(.scrolled) .nav-cta,
body:has(.hero-cover) .nav:not(.scrolled).over-dark .nav-cta{
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  padding-inline:12px;
  font-weight:600;
  transition:background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease);
}
@media (hover:hover){
  body:has(.hero-cover) .nav:not(.scrolled) .nav-cta:hover{
    background:rgba(0,0,0,.05);color:var(--ink);transform:none;box-shadow:none;
  }
}

/* 2 · The booking route exists on a phone. nvidia hides .nav-cta ≤980; the
      ≤980 flex ordering for it is already authored in styles.css 244-250
      (burger at the edge, then the CTA, logo pushed to the far end), so this
      is only the un-hide plus a 44px minimum target. */
@media(max-width:980px){
  body:has(.hero-cover) .nav-cta{
    display:inline-flex;align-items:center;
    min-height:44px;
  }
}
@media(max-width:420px){
  body:has(.hero-cover) .nav-cta{padding-inline:11px;font-size:12.5px}
}


/* ══════════════════════════════════════════════════════════════════════
   A2 · SOLUTIONS ROW — four inline hairline miniatures (#about)
   ══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   AVERYA · A2 — SOLUTIONS ROW (#about)
   Ships as: assets/averya-home.css?v=20260906a
   Load order: ... styles.css -> averya-typography.css -> averya-nvidia.css
               -> THIS FILE (new <link> between nvidia and </head>).
   Loading last means equal specificity wins, so every selector below is
   scoped to #about. Nothing here touches .btn, .reveal, .kinetic-title,
   .about-head or any other shared class.

   What it does: the four .sol-media slots stop being photographs and become
   inline hairline miniatures of the deliverable — same drawing vocabulary
   as the software chrome inside the product acts, so the page reads as one
   visual system. No raster, no gradient inside the drawing, no request.

   Motion law: the COMPOSED END STATE (every stroke drawn, ember mark at full
   opacity) is the CSS default. The script only hides strokes for the length
   of one entrance, and only once it has an IntersectionObserver entry in
   hand. A blocked script, a failed observer, a screenshot and a
   reduced-motion visitor all see the finished drawing.
   ═══════════════════════════════════════════════════════════════════════ */

/* The [hidden] rescue for this band is hoisted to the top of this sheet. */

/* ── 1 · the media slot ────────────────────────────────────────────────
   Same box as nvidia's (16/10, -18px bleed into the card's padding), but
   z-index 2 so the drawing sits ABOVE .sol-card::after's overlay grain —
   1.25px hairlines do not survive being blended through noise — and the
   melt is pushed down to 78% so the drawing has a usable canvas instead of
   dissolving from the middle. Below 78% the shield point and the frame
   feet fade into the pillar colour exactly as the photograph used to. */
#about .sol-media{
  position:relative;z-index:2;
  display:block;margin:-18px -18px 0;
  aspect-ratio:16/10;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.74) 89%,rgba(0,0,0,.26) 97%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.74) 89%,rgba(0,0,0,.26) 97%,transparent 100%);
}

/* ── 2 · the drawing ──────────────────────────────────────────────────
   currentColor = the card's own ink (white on build/systems/secure,
   #06282E on the light teal growth card), so the miniature takes each
   pillar's hue with no new palette. One ember accent per card marks where
   that card's outcome sits. */
#about .sol-mini{
  --sol-mark:#F97316;
  display:block;width:100%;height:100%;
  color:inherit;
}
#about .sol-growth .sol-mini{--sol-mark:#C93400}   /* dark ink card needs the deeper ember */

#about .sol-mini path{
  fill:none;
  stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;               /* 1.25px at 256px and at 364px alike */
}
#about .sol-mini .sm-ink{opacity:.62}
#about .sol-mini .sm-mark{opacity:.95}
#about .sol-mini .sm-mark path{stroke:var(--sol-mark);stroke-width:1.6}

/* ── 3 · entrance draw ────────────────────────────────────────────────
   Every drawable path carries pathLength="1", so dasharray:1 is exactly
   one path length and dashoffset 1 -> 0 is a clean draw with no per-path
   length measurement in JS.
   DEFAULT = drawn. `.is-armed` (added by the script the moment the card
   enters the viewport) hides. `.is-drawn` (next frame) releases the
   transition. The two classes are added microseconds apart, so a script
   that dies in between still lands on a visible card within 6s via its own
   failsafe — and a script that never runs changes nothing at all. */
#about .sol-mini .sm-d path{stroke-dasharray:1;stroke-dashoffset:0}
#about .sol-mini.is-armed .sm-d path{stroke-dashoffset:1;transition:none}
#about .sol-mini.is-armed.is-drawn .sm-d path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .9s var(--ease) .2s;  /* 200ms into the card's own 1.3s expo.out */
}
#about .sol-mini.is-armed .sm-mark{opacity:0;transition:none}
#about .sol-mini.is-armed.is-drawn .sm-mark{
  opacity:.95;
  transition:opacity .45s var(--ease) .78s;          /* the ember lands as the strokes close */
}

/* ── 4 · hover adds exactly one line ──────────────────────────────────
   build: the dimension line under the hero block (this is a SPEC, not a
   poster). growth: the citation mark and the wire that carries it into the
   AI answer. systems: the four inbound wires complete into the console.
   secure: the shield closes.
   No lift, no scale, no glow — the card is 2px NVIDIA card form and stays
   still. Where there is no hover (touch), the line is simply drawn. */
#about .sol-mini .sm-hover path{stroke-dasharray:1;stroke-dashoffset:1}
@media (hover:hover){
  #about .sol-mini .sm-hover path{transition:stroke-dashoffset .26s var(--ease)}
  #about .sol-card:hover .sol-mini .sm-hover path,
  #about .sol-card:focus-visible .sol-mini .sm-hover path{stroke-dashoffset:0}
}
@media (hover:none){
  #about .sol-mini .sm-hover path{stroke-dashoffset:0}
}

/* ── 5 · the phone ────────────────────────────────────────────────────
   At 390px each card carried a 16/10 poster ~226px tall and the band ran
   2,108px — 2.5 screens for four cards. With the poster gone the drawing
   is free to be a header strip: 96px, scaled to fit its height (nothing
   cropped, so the growth card can never render as an empty rectangle
   again) and parked against the card's inline start so it lines up with
   the Hebrew text below it. width:auto on a viewBox'd SVG is the intrinsic
   ratio; margin-inline-end:auto is what moves it to the start in both
   directions when the language switches. */
@media (max-width:560px){
  #about .sol-media{aspect-ratio:auto;height:96px;margin:-18px -18px 2px}
  #about .sol-mini{
    width:auto;max-width:100%;height:100%;
    aspect-ratio:16/10;
    margin-inline-end:auto;
  }
}

/* ── 6 · reduced motion — the composed end frame, nothing else ────────
   Everything drawn, the hover line drawn, the ember at rest. No dash
   animation and no transition to fall out of. */
@media (prefers-reduced-motion:reduce){
  #about .sol-mini .sm-d path,
  #about .sol-mini.is-armed .sm-d path,
  #about .sol-mini .sm-hover path{stroke-dashoffset:0!important;transition:none!important}
  #about .sol-mini .sm-mark,
  #about .sol-mini.is-armed .sm-mark{opacity:.95!important;transition:none!important}
}

/* ── 7 · high contrast ────────────────────────────────────────────────
   styles.css already darkens --hairline under prefers-contrast:more; the
   drawing is the same idea, so lift it off the gradient by the same logic. */
@media (prefers-contrast:more){
  #about .sol-mini .sm-ink{opacity:.86}
  #about .sol-mini path{stroke-width:1.5}
}


/* ══════════════════════════════════════════════════════════════════════
   A3 · PLATFORMS ARC  ·  A5 · SCHEDULE CARD  ·  A6 · FOOTER
   ══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   averya-home.css — A3 platforms arc · A5 schedule card · A6 footer
   Loads AFTER averya-nvidia.css. Every selector is scoped to its own band; no
   bare .btn, .reveal, .kinetic-title, .about-head h2 rule lives here.
   Stamp: /assets/averya-home.css?v=20260906a
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ A3 · PLATFORMS ARC ═══════════════════════════════════════════════════
   The arc's geometry is under an owner LAW (2026-08-04) — the desktop path,
   the 26 tiles, offset-rotate:auto 180deg, the 38s travel, the .is-off pause
   and the reduced-motion stop are all untouched. The phone tiers below
   keep the path inside the available stage.

   THE PHONE BUG, MEASURED (390x844, --safe-padding 12px => stage 366px):
   averya-nvidia.css:379-383 re-declares .plat-i inside @media(max-width:768px)
   with offset-path "M 520 40 C 400 262, 120 262, 0 40". Because nvidia loads
   last at equal specificity, that block ALSO wins at 390px — the tier
   styles.css:1621-1629 authored for <=420 (a 360-wide path that fits) never
   applies. The tiles therefore ride a 520px-wide path inside a 366px box:
     tile centres x = 500,486,472,456,439,421,401 -> 7 tiles entirely past the
     right edge; x = 381,360 -> 2 sliced by it; only 17 of 26 fully on screen,
     and every tile is invisible for ~27% of each 30s lap.
   Fix: two tiers whose path fits the NARROWEST stage in their range, with
   .plat-arc pinned to the path's own width and centred by its existing
   margin-inline:auto. Both keep the bezier's shape, both fit inside the
   current 280px arc box, and both leave LESS bead overlap than today.
     <=600px  stage >= 392px (421px viewport, --safe-padding 14)  box 392
     <=420px  stage >= 296px (320px viewport, --safe-padding 12)  box 296
   ═════════════════════════════════════════════════════════════════════════ */

/* --- phone tier A: 421px-600px viewports (stage >= 392px) --- */
@media(max-width:600px){
  .plat-section .plat-arc{
    width:392px;max-width:100%;height:248px;
    /* the end beads sit at 5.4% / 94.6% of a 392px box, so the desktop mask's
       11%/89% stops would erase them; soften to keep the same vignette read. */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .plat-section .plat-i{
    width:30px;height:30px;border-radius:9px;
    /* x spans 6..386 inside 392 — every bead fully on stage; arc length 565px,
       spacing 19.9px, bead overlap 10.2px (today at 390px: 11.2px). */
    offset-path:path("M 376 24 C 356 266, 36 266, 16 24");
  }
  .plat-section .plat-i svg{width:17px;height:17px}
  .plat-section .plat-i::after{inset:auto 5px -6px;height:10px}
}

/* --- phone tier B: <=420px viewports (stage >= 296px on a 320px phone) --- */
@media(max-width:420px){
  .plat-section .plat-arc{width:296px;height:244px}
  .plat-section .plat-i{
    width:26px;height:26px;border-radius:8px;
    /* x spans 4..292 inside 296; arc length 500px, spacing 17.6px,
       bead overlap 8.5px — tighter chain, nothing clipped. */
    offset-path:path("M 282 22 C 268 266, 28 266, 14 22");
  }
  .plat-section .plat-i svg{width:15px;height:15px}
  .plat-section .plat-i::after{inset:auto 4px -5px;height:8px}
}

/* --- the two gates the arc must keep, restated so my widths cannot break them ---
   .is-off (app.js viewport pause) and the reduced-motion stop both live in
   styles.css and still apply to .plat-i; nothing here adds an animation to a
   tile. The fallback below keeps the layout correct when Motion Path is
   unsupported and .plat-arc would otherwise have a pinned width on phones. */
/* Motion Path unsupported -> a plain centred wrapped row. Restated after the
   width rules above so the pinned 392/296px box cannot survive into it.
   (This also repairs a pre-existing miss: nvidia's `.plat-arc{height:280px}`
   used to leak into the fallback and box the wrapped row.) */
@supports not (offset-path:path("M 0 0 L 1 1")){
  .plat-section .plat-arc{
    display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
    width:100%;max-width:100%;height:auto;
    -webkit-mask-image:none;mask-image:none;
  }
  .plat-section .plat-i{position:relative;animation:none}
}


/* ═══ A5 · SCHEDULE CARD ═══════════════════════════════════════════════════
   Two leaf paragraphs inside the blue, textured card. No motion added; the
   card keeps its .reveal, its --px/--py glow and its masked gradient ring.
   .schedule-card{text-align:start} (nvidia 70) governs both.
   ═════════════════════════════════════════════════════════════════════════ */
.schedule-card .schedule-spec{
  max-width:760px;margin-block:0 18px;
  font-size:clamp(15px,1.5vw,17px);line-height:1.65;
  color:#fff;
}
/* the two operational facts, out of 13px grey and above the buttons, where
   they are the reason to press rather than a footnote to it */
.schedule-card .schedule-facts{
  margin-block:0 22px;
  font-size:15px;font-weight:600;line-height:1.6;
  color:rgba(255,255,255,.92);
}
@media(max-width:768px){
  .schedule-card .schedule-spec{font-size:14.5px;margin-bottom:16px}
  .schedule-card .schedule-facts{font-size:14px;margin-bottom:18px}
}


/* Owner-requested return of the original connected cube asset (August 2026). */
.v6-hero .hero-original-object{position:absolute;z-index:1;pointer-events:none;width:clamp(120px,22vw,280px);left:-60px;top:48px;opacity:.9}
.v6-hero .hero-original-object img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 25px rgba(116,104,200,.16))}
@media(max-width:560px){.v6-hero .hero-original-object{width:120px;left:-20px;top:42px;opacity:.85}}

@media(max-width:374px){.v6-hero .hero-original-object{width:92px;left:-18px;top:42px}}