/* ═══════════════════════════════════════════════════════════════════════════
   Averya · services.html — MARKETING SHOWCASE   (?v=20260906b)

   Loaded after assets/averya-nvidia.css on the homepage and services.html.
   Shared figure frames, notes and icon controls serve both pages. The CRM
   illustration lives on the homepage; the package films, brand/code bands
   and business-systems wall remain on services.html.

   THE LAW every block here obeys: the CSS default IS the composed END state.
   assets/averya-services-showcase.js only ever animates TOWARD it, so no-JS,
   a blocked script, no WAAPI, no IntersectionObserver and
   prefers-reduced-motion all land on the finished frame with no extra work.
   Reveals fail OPEN. Motion properties: transform / opacity / clip-path /
   stroke-dashoffset only. No url() beyond the host tokens, no @import, no
   external font, no external image.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── [hidden] rescue — MANDATORY.
      assets/styles.css:103 is `img,svg{display:block;max-width:100%}` and the
      .prod-play rules below are author `display` declarations: both out-specify
      the UA `[hidden]{display:none}`. Without this line every band ships a
      visible dead control and both pause/play label spans render at once. ── */
.prod-act [hidden],.prod-intro [hidden],.pkg-film [hidden],.srv-sprite{display:none!important}

/* ── the page's one mark library, hoisted to the top of <main> and parked
      STRUCTURALLY, never by [hidden] alone (see above). ── */
.srv-sprite{position:absolute!important;width:0;height:0;overflow:hidden}

/* ══════════════════════════════════════════════════════════════════════════
   THE SHARED BAND LANGUAGE — the .prod-* vocabulary, reproduced from
   assets/averya-products.css 19-105 for a page that does not load it.
   ══════════════════════════════════════════════════════════════════════════ */
.prod-act{
  /* the chat FAB (left:20, 50px) and the a11y launcher (left:14, 48px) are fixed
     over the viewport's PHYSICAL left edge at every width; 70px of gutter +
     a 4px focus ring + 4px air */
  --prod-fab-gutter:78px;
}
.prod-intro{position:relative;background:var(--canvas);padding:72px 0 8px}
.prod-act{position:relative;background:var(--canvas);padding:72px 0}

/* ── the demonstration stage ── */
.prod-act .prod-stage{max-width:1120px;margin:0 auto}
.prod-act .prod-fig{
  position:relative;isolation:isolate;margin:0;
  padding:clamp(20px,3vw,34px);
  border-radius:var(--nv-r);
  background:var(--glass-bg-light);
  border:var(--glass-border-light);
  box-shadow:var(--glass-gloss-light),0 10px 28px -14px rgba(16,20,36,.12);
}

/* ── the sample-data note under the stage ── */
.prod-act .prod-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  margin-top:28px;padding-top:12px;border-top:1px solid var(--hairline);
}
/* --ink-soft, not --ink-muted. A .prod-note is not chrome: it is the sentence
   that says "this is a demonstration with sample data", so it has to survive the
   DARKEST surface it can land on. --ink-muted (#6e6e73) measures 4.61:1 on
   #f5f5f7 with nothing else in play — no headroom at all, and the film's drop
   shadow spent it. --ink-soft (#3c3c3c) measures 10.0:1 on #f5f5f7 and 10.6:1
   on #fff. Kept identical on the films below so bar and bands read as one bar. */
.prod-act .prod-note{margin:0;flex:1 1 280px;min-width:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);text-align:start}
/* the visible control (WCAG 2.2.2): aria-pressed="true" = paused; the two
   label spans swap via [hidden] so a language switch never clobbers the state */
.prod-act .prod-play{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  min-height:44px;padding:7px 14px;
  border-radius:var(--nv-r);border:1px solid var(--hairline-strong);background:#fff;color:var(--ink);
  font-family:var(--font-ui);font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.prod-act .prod-play::before{content:"";flex:none;box-sizing:border-box;width:8px;height:10px;border-inline-start:3px solid currentColor;border-inline-end:3px solid currentColor}
.prod-act .prod-play[aria-pressed="true"]::before{width:0;height:0;border:5px solid transparent;border-inline-start:9px solid currentColor;border-inline-end:0}
.prod-act .prod-play:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (hover:hover){.prod-act .prod-play:hover{border-color:var(--ink);background:#fafafc}}

/* ── foot: three benefit lines (about-grid stagger) + the CTA pair ── */
.prod-act .prod-foot{max-width:1120px;margin:40px auto 0}
.prod-act .prod-benefits{list-style:none;margin:0 auto;padding:0;gap:clamp(16px,2.5vw,32px)}
.prod-act .prod-benefits li{margin:0;padding:14px 0 0;border-top:1px solid var(--hairline-strong);
  font-size:clamp(15px,1.4vw,17px);line-height:1.55;color:var(--ink-soft);text-align:start}
.prod-act .prod-ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;justify-content:center;margin-top:24px}

/* ── viewport gate: JS toggles .is-off on each FIGURE; any CSS keyframe inside pauses ── */
.prod-act .is-off,.prod-act .is-off *,.prod-act .is-off *::before,.prod-act .is-off *::after{animation-play-state:paused!important}

@media (max-width:560px){
  .prod-intro{padding:48px 0 0}
  .prod-act{padding:48px 0}
  .prod-act .prod-fig{padding:16px}
  .prod-act .prod-foot{margin-top:32px}
  .prod-act .prod-bar{flex-direction:column;align-items:stretch}
  .prod-act .prod-note{flex-basis:auto}
  /* full-width controls used to sit UNDER the two fixed launchers: a tap in the
     left third of the bar opened the chat instead. Reserve their physical gutter.
     They also WRAP: nowrap made the automatic minimum size the whole label, so a
     longer English label overflowed the 320px viewport instead of stretching. */
  .prod-act .prod-play{width:auto;margin-left:var(--prod-fab-gutter);min-width:0;white-space:normal;text-align:center}
  .prod-act .prod-ctas{flex-direction:column;align-items:stretch}
  .prod-act .prod-ctas .btn{width:auto;margin-left:var(--prod-fab-gutter);justify-content:center;min-width:0;white-space:normal;text-align:center}
}
@media (max-width:420px){
  .prod-act .prod-note{font-size:13px}
}

/* ── shared reduced motion: no driver runs, so the control would be dead — hide it;
      each band pins its own composed end frame in its own block below ── */
@media (prefers-reduced-motion:reduce){
  .prod-act .prod-play{display:none!important}
  .prod-act .prod-fig{transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PAGE'S AXIS — start-aligned, never centred.
   The homepage bands are centred (.about-head{text-align:center;margin:0 auto}).
   Every band here is flush to the RTL start edge, exactly like the four
   .pkg-head it lives among, and exactly where the editorial title's ::after
   gradient rule already starts. Same components, different axis.
   ══════════════════════════════════════════════════════════════════════════ */
.s-band .about-head{text-align:start;margin-inline:0;max-width:760px}
.s-band .about-head h2{font-size:clamp(28px,3.8vw,46px)}
.s-band .prod-ctas{justify-content:flex-start}

/* ── WP6 · the chevron text link — the quieter exit (ported 1:1 from
   averya-products.css §A4, which services.html does not load). A navigation
   <a>, house arrow flipped for RTL, 44px hit box, no pill. ── */
.prod-act .prod-link{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 2px;
  font-family:var(--font-ui);font-size:15px;font-weight:700;line-height:1.2;
  color:var(--primary);
  border-block-end:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.prod-act .prod-link .arrow{width:16px;height:16px;flex:none;transform:scaleX(-1);transition:transform .25s var(--ease-apple)}
.prod-act .prod-ctas--link{gap:10px 22px}
/* Light cyan keeps the link legible on the dark editor stage. */
#s-code .prod-link{color:var(--s-accent-fill)}
@media (hover:hover){
  .prod-act .prod-link:hover{border-block-end-color:currentColor}
  .prod-act .prod-link:hover .arrow{transform:scaleX(-1) translateX(-4px)}
}
@media (max-width:560px){
  .prod-act .prod-ctas--link .prod-link{justify-content:flex-start;margin-left:var(--prod-fab-gutter);min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .prod-act .prod-link{transition:none}
  .prod-act .prod-link .arrow{transition:none;transform:scaleX(-1)}
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA LABELS WRAP.  styles.css:616 is `.btn{white-space:nowrap}`, and a button
   is a flex item that cannot shrink below its own content — so a label we do
   not control sets the minimum width of the page.

   In English that broke twice over. The four `.pk-cta-row` package CTAs ("All
   build & design capabilities — pick and send a spec") ran past BOTH viewport
   edges at every phone width, clipped on both sides because the row centres
   them. The three band CTA pairs overflowed the physical right edge by ~49px,
   because ≤560px they also give up 78px to the fixed-launcher gutter below.

   Wrapping is the only fix that survives a translation: it costs the row a
   line, never the page a horizontal scrollbar. min-width:0 lets the flex item
   actually take the wrap instead of holding its max-content floor.
   ══════════════════════════════════════════════════════════════════════════ */
.pk-cta-row .btn,.prod-act .prod-ctas .btn{
  white-space:normal;text-align:center;max-width:100%;min-width:0;
}
.pk-cta-row .btn>span,.prod-act .prod-ctas .btn>span{min-width:0}
/* the gutter token is declared on .prod-act; a package CTA row is not one */
.pk-cta-row{--prod-fab-gutter:78px;min-width:0}
@media (max-width:560px){
  /* a wrapped CTA now fills the column, so it reaches the PHYSICAL left edge
     where the chat FAB (left:20px, 50px) and the a11y launcher tab (48px) are
     fixed at every width and in both directions. Reserve their gutter, exactly
     as .prod-play and .prod-ctas .btn already do. */
  .pk-cta-row{justify-content:flex-start;flex-direction:column;align-items:stretch}
  .pk-cta-row .btn{flex:1 1 auto;margin-left:var(--prod-fab-gutter);min-width:0;white-space:normal;text-align:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   SEAM LADDER, PINNED.
   styles.css:598 `.deep-section:nth-of-type(even){background:var(--canvas-soft);}`
   (0,2,0) is what makes #growth/#secure soft today. Inserting #s-open before
   #build re-indexes nth-of-type and would invert all four. These id rules (1,0,0)
   reproduce today's exact render and make the page immune to any future
   insertion. styles.css is shared with three other pages and its reduced-motion
   blocks are literal-asserted — it is never edited for this.
   ══════════════════════════════════════════════════════════════════════════ */
#build,#systems{background:radial-gradient(58% 36% at 50% 0%,
  color-mix(in srgb, var(--motion-accent) 9%, transparent), transparent 74%) var(--canvas);}
#growth,#secure{background:var(--canvas-soft);}
@supports not (color: color-mix(in srgb, red 9%, transparent)){
  #build,#systems{background:var(--canvas)}
}

/* ══════════════════ BAND 3-6 · THE FOUR PACKAGE FILMS ══════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   services.html · THE FOUR PACKAGE FILMS — framing + the control bar
   Merge this block into assets/averya-services-showcase.css (?v=20260906a).

   WHY THESE RULES ARE NOT INHERITED. Every shared showcase rule is scoped
   `.prod-act …` (averya-products.css 13-15, 19-28, 50-68, 79-99, 101-105).
   A film lives inside `<section class="deep-section">`, which is NOT a
   `.prod-act`, so NOTHING of the shared bar/note/control language reaches
   it. The bar below is therefore a `.pkg-film`-scoped mirror of
   averya-products.css 50-68 + 79-99 + 101-105, deliberately identical so
   the four films and the three craft bands read as one theatre.

   Motion budget of this sheet: ZERO. The films are <video>; the only
   animated things here are the two 200 ms border/background hovers on the
   control. No keyframes, no loops, nothing to gate.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── [hidden] rescue — MANDATORY, and load-bearing here twice over.
      assets/styles.css:103 is `img,svg{display:block;max-width:100%}` and the
      `.pkg-film .prod-play{display:inline-flex}` rule below is an AUTHOR
      display declaration: both out-specify the UA `[hidden]{display:none}`.
      Without this line every film ships a visible dead control AND both
      pause/play label spans render at once. ── */
.pkg-film [hidden]{display:none!important}

/* ── the frame ──
   640px, start-aligned — flush to the RIGHT edge in RTL, directly under the
   editorial title's ::after gradient rule, which starts at that same edge.
   Asymmetric and editorial, not a centred banner.

   LOGICAL properties, on purpose. The direction's physical shorthand
   `margin:0 auto <b> 0` resolves to margin-right:auto / margin-left:0, which
   in RTL pushes the film to the END (left) edge — the opposite of the stated
   intent. `margin-inline-end:auto` is the form that actually parks a block at
   the inline START in both directions. (Physical units are still used below
   for the fixed-launcher gutter, which IS a physical collision.) ── */
.pkg-film{
  --prod-fab-gutter:78px;   /* declared on .prod-act in the shared sheet; a film is not one */
  position:relative;
  margin:0;
  margin-inline-end:auto;
  margin-block-end:clamp(28px,3.4vw,44px);
  max-width:640px;
}

/* the film's own render ground is near-black, so it needs no mat: the 1px
   hairline plus the long -20px shadow are what lift it off the paper like a
   print. aspect-ratio holds the box before the poster decodes — no CLS. */
.pkg-film-v{
  display:block;
  width:100%;height:auto;
  aspect-ratio:900/560;
  object-fit:cover;
  background:#0a0e1a;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--nv-r);
  /* The shadow must die ABOVE the caption. 0 24px 60px -20px reached
     24 + 60/2 − 20 = 34px below the film, and the bar's text starts at
     14px (margin) + 12px (padding) = 26px — so the caption was reading against
     a tinted, uneven ground on the two #f5f5f7 bands. 20 + 44/2 − 22 = 20px
     stops the ink 6px short of the bar and keeps the lifted-print look. */
  box-shadow:0 20px 44px -22px rgba(16,20,36,.34);
}


/* ── the bar under the film: caption at the start, control at the end.
      This <figcaption> is a direct child of <figure> (content model), so the
      bar class rides the figcaption itself. ── */
.pkg-film .prod-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 20px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--hairline);
}
/* same ink as the band notes — see the note on .prod-act .prod-note above */
.pkg-film .prod-note{
  margin:0;flex:1 1 280px;min-width:0;
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);text-align:start;
}


/* ── the visible control (WCAG 2.2.2 — each film is 6.058 s, over the 5 s
      threshold, and playback starts on its own). aria-pressed="true" = paused;
      the glyph is a pure CSS ::before driven off aria-pressed, so state and
      glyph can never disagree; the two label spans swap via [hidden] so a
      language switch never clobbers the state. ── */
.pkg-film .prod-play{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  min-height:44px;padding:7px 14px;
  border-radius:var(--nv-r);border:1px solid var(--hairline-strong);
  background:#fff;color:var(--ink);
  font-family:var(--font-ui);font-size:13px;font-weight:600;line-height:1.2;
  white-space:nowrap;cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.pkg-film .prod-play::before{
  content:"";flex:none;box-sizing:border-box;width:8px;height:10px;
  border-inline-start:3px solid currentColor;border-inline-end:3px solid currentColor;
}
.pkg-film .prod-play[aria-pressed="true"]::before{
  width:0;height:0;border:5px solid transparent;
  border-inline-start:9px solid currentColor;border-inline-end:0;
}
.pkg-film .prod-play:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (hover:hover){
  .pkg-film .prod-play:hover{border-color:var(--ink);background:#fafafc}
}


/* ── tiers ── */
@media (max-width:900px){
  .pkg-film{max-width:100%}
}
@media (max-width:620px){
  .pkg-film{margin-block-end:clamp(22px,5vw,32px)}
  .pkg-film .prod-bar{flex-direction:column;align-items:stretch}
  .pkg-film .prod-note{flex-basis:auto}
  /* PHYSICAL margin-left at every width, on purpose: the chat FAB (left:20px,
     50px) and the a11y launcher tab (48px on the left edge) are position:fixed
     over the viewport's physical left edge in both dir=rtl and dir=ltr. A
     stretched control under them swallowed the tap. Reserve their gutter. */
  .pkg-film .prod-play{width:auto;margin-left:var(--prod-fab-gutter);min-width:0;white-space:normal;text-align:center}
}
@media (max-width:420px){
  .pkg-film .prod-note{font-size:13px}
}


/* ── reduced motion ──
   The composed END STATE of a film is its POSTER: a complete, correct frame
   that ships straight from the HTML with no JS at all. The driver bails
   before touching anything, so the control would be inert — hide it. */
@media (prefers-reduced-motion:reduce){
  .pkg-film .prod-play{display:none!important}
  .pkg-film-v{transition:none!important}
}


/* ══════════════════ BAND 7 · #s-systems (CRM/ERP + the wall) ══════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   #s-systems — CRM / ERP-class custom systems (services.html)
   The אפיון document becoming a screen, then the screen reporting back out.

   LAW: the CSS default below IS the composed END frame. No-JS, no-WAAPI,
   no-IntersectionObserver and prefers-reduced-motion all render the finished
   demonstration with zero extra work; the driver only animates TOWARD it and
   every cycle opens exactly where the previous one closed.
   transform / opacity / clip-path / stroke-dashoffset only.

   Loads AFTER averya-nvidia.css. Nothing here writes into styles.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ── [hidden] rescue — styles.css:103 img,svg{display:block} out-specifies the
      UA [hidden] rule, so the mark sprite would lay out as a 300×150 block and
      both play-label spans would render at once. Mandatory in any file that
      ships a sprite. ── */
#s-systems [hidden]{display:none!important}
#s-systems .s-sy-sprite{position:absolute!important;width:0;height:0;overflow:hidden}

/* Violet accents connect the systems illustration to its service cards. */
#s-systems{
  --s-accent:#7c3aed;
  /* Darker violet ink keeps tinted status labels readable. */
  --s-accent-ink:#6d28d9;
  --s-accent-fill:#8b5cf6;
  --s-accent-soft:rgba(124,58,237,.08);
  --s-accent-ring:rgba(124,58,237,.16);
  --s-wire-base:rgba(15,23,48,.14);
  --s-wire-used:.35;              /* JS USED must equal this */
  --s-comet-w:3;
  --s-grid:rgba(15,23,48,.13);
  --s-chrome-dot:#dcdce3;
  --s-doc-r:10px;                 /* it depicts a document, not an Averya surface */
  --s-app-r:12px;
  /* the record this role cannot see. MUST equal ROW_DIM in the #s-systems
     driver, or the loop seam shows an opacity step. .38 read at 2.33:1 —
     the row is dimmed, not deleted, so its text still has to be readable;
     .64 measures 4.88:1 on the table's own #f6f7fc ground. */
  --s-row-dim:.64;
}

/* ── head: start-aligned, flush to the RTL start edge like every .pkg-head on
      this page. Never centred — that is the homepage's axis. ── */

/* ══════════════════════════ the stage ══════════════════════════ */
#s-systems .s-sy-fig{overflow:hidden;max-width:1120px;margin:0 auto}

/* the shared "floor": a faint dotted grid masked to an ellipse */
#s-systems .s-sy-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,var(--s-grid) 1px,transparent 1.5px);
  background-size:34px 34px;background-position:17px 17px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at center,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 90% at center,#000 55%,transparent 100%)}

/* The coordinate space is an LTR grid and every Hebrew node re-declares
   direction:rtl. The measured wires depend on it — do not "fix" it to
   logical properties. Column 1 = the built screen, column 3 = the written
   specification, so in RTL the reader starts on the document. */
#s-systems .s-sy-stage{position:relative;direction:ltr;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) clamp(70px,9vw,140px) minmax(0,.95fr);
  grid-template-rows:auto auto auto;
  align-items:center;gap:0;min-height:clamp(340px,34vw,430px)}

/* ── the measured wires (generated at run time from offset chains) ── */
#s-systems .s-sy-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
#s-systems .s-sy-wires path{fill:none}
#s-systems .s-sy-wb{stroke:var(--s-wire-base);stroke-width:1.4;stroke-dasharray:2 4}
#s-systems .s-sy-wl{stroke:var(--s-accent-fill);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1 1;stroke-dashoffset:0;opacity:var(--s-wire-used)}
#s-systems .s-sy-wc{stroke:var(--s-accent-fill);stroke-width:var(--s-comet-w);stroke-linecap:round;
  stroke-dasharray:.1 1.3;stroke-dashoffset:.14;opacity:0}
#s-systems .s-sy-ret .s-sy-wb{stroke-dasharray:3 5}

/* ══════════ Zone A · the specification sheet (physical right) ══════════ */
#s-systems .s-sy-spec{grid-column:3;grid-row:1 / 4;position:relative;z-index:1;
  justify-self:start;align-self:center;
  width:100%;max-width:420px;direction:rtl;
  border-radius:var(--s-doc-r);background:#fff;
  border:.5px solid var(--hairline-strong);
  box-shadow:0 20px 48px -22px rgba(16,20,36,.32);
  padding:12px 13px 10px}
#s-systems .s-sy-spec-h{display:flex;align-items:center;gap:8px;margin:0 0 9px;
  padding-bottom:8px;border-bottom:.5px solid var(--hairline)}
#s-systems .s-sy-doc{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:var(--s-accent);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-systems .s-sy-spec-t{min-width:0;font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-systems .s-sy-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
#s-systems .s-sy-rule{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:8px;align-items:start;padding:6px 8px;border-radius:7px;
  background:#f7f7fa;border:.5px solid var(--hairline)}
#s-systems .s-sy-rule-n{font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  line-height:1.5;color:var(--s-accent)}
#s-systems .s-sy-rule-t{min-width:0;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--ink)}
/* the line writes itself in from the inline-start edge; inset(0) IS the end frame */
#s-systems .s-sy-rule-ink{display:block;clip-path:inset(0)}
/* physical left on purpose: the stage is LTR and the port faces the wire */
#s-systems .s-sy-port{position:absolute;top:50%;left:-4px;width:7px;height:7px;margin-top:-3.5px;
  border-radius:50%;background:var(--averya-surface-noise),var(--s-accent-fill);background-blend-mode:overlay,normal,normal,normal,normal;
  box-shadow:0 0 0 3px rgba(255,255,255,.95);transform:scale(1)}
/* --ink-faint (#a1a1a6) measured 2.61:1 on the document's own #fff — less
   than half the floor, and this line is the sheet's approval stamp, not a
   decoration. --ink-muted measures 5.07:1; 11px is the smallest size the site
   sets real words at. */
#s-systems .s-sy-spec-f{margin:9px 0 0;padding-top:8px;border-top:.5px solid var(--hairline);
  font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--ink-muted)}

/* ══════════ Zone C · the system screen (physical left) ══════════ */
#s-systems .s-sy-screen{grid-column:1;grid-row:1;position:relative;z-index:1;
  justify-self:end;width:100%;max-width:520px;direction:rtl;
  border-radius:var(--s-app-r);background:#fff;overflow:hidden;
  border:.5px solid var(--hairline-strong);
  box-shadow:0 22px 52px -20px rgba(16,20,36,.34)}
#s-systems .s-sy-chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:#fafafc;border-bottom:.5px solid var(--hairline)}
#s-systems .s-sy-dot{width:8px;height:8px;border-radius:50%;background:var(--s-chrome-dot);flex:0 0 auto}
#s-systems .s-sy-chrome-t{margin-inline-start:8px;min-width:0;flex:1;
  font-family:var(--font-ui);font-size:11.5px;font-weight:700;color:var(--ink-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-systems .s-sy-chip{flex:0 0 auto;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--averya-surface-noise),var(--s-accent-soft);background-blend-mode:overlay,normal,normal,normal,normal;border:.5px solid var(--s-accent-ring);
  font-family:var(--font-ui);font-size:10.5px;font-weight:700;color:var(--s-accent-ink);
  white-space:nowrap;transform:scale(1)}
#s-systems .s-sy-tabs{display:flex;gap:4px;padding:9px 11px 0;overflow:hidden}
#s-systems .s-sy-tab{flex:1 1 0;min-width:0;padding:5px 3px;border-radius:8px 8px 0 0;text-align:center;
  font-family:var(--font-ui);font-size:10.5px;font-weight:700;line-height:1.3;color:var(--ink-muted);
  background:rgba(15,23,48,.045);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-systems .s-sy-tab.is-on{color:#fff;background:var(--averya-surface-noise),var(--s-accent);background-blend-mode:overlay,normal,normal,normal,normal;}
#s-systems .s-sy-body{padding:9px 11px 12px}
#s-systems .s-sy-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:9px}
#s-systems .s-sy-form{display:flex;flex-direction:column;gap:0;
  border-radius:9px;background:#f6f7fc;border:.5px solid var(--hairline);padding:0 9px}
#s-systems .s-sy-field{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;align-items:center;
  padding:6px 0;border-top:.5px solid var(--hairline)}
#s-systems .s-sy-field:first-child{border-top:0}
#s-systems .s-sy-fl{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--ink-muted)}
#s-systems .s-sy-fv{min-width:0;font-size:12px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-systems .s-sy-fv--tag{justify-self:start;padding:1px 8px;border-radius:var(--r-pill);
  background:var(--averya-surface-noise),var(--s-accent-soft);background-blend-mode:overlay,normal,normal,normal,normal;color:var(--s-accent-ink);
  font-family:var(--font-ui);font-size:10.5px;font-weight:700}
#s-systems .s-sy-pane{display:flex;flex-direction:column;gap:6px;
  border-radius:9px;background:#f6f7fc;border:.5px solid var(--hairline);padding:8px 9px}
#s-systems .s-sy-pane-t{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--ink-muted)}
#s-systems .s-sy-pl{display:flex;align-items:center;gap:7px;
  font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--ink-soft)}
#s-systems .s-sy-pl i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--averya-surface-noise),var(--s-accent-ring);background-blend-mode:overlay,normal,normal,normal,normal;border:.5px solid var(--s-accent-ring)}
#s-systems .s-sy-table{margin-top:9px;border-radius:9px;background:#f6f7fc;
  border:.5px solid var(--hairline);padding:0 9px}
#s-systems .s-sy-thead,#s-systems .s-sy-trow{display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,.9fr) minmax(0,1.3fr);
  gap:8px;align-items:center;padding:6px 0;border-top:.5px solid var(--hairline)}
#s-systems .s-sy-thead{border-top:0;font-family:var(--font-ui);font-size:10.5px;font-weight:700;color:var(--ink-faint)}
#s-systems .s-sy-td{min-width:0;display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the record this role cannot see — the END frame is already dimmed */
#s-systems .s-sy-trow.is-restricted{opacity:var(--s-row-dim)}
#s-systems .s-sy-lock{flex:0 0 auto;display:inline-flex;width:11px;height:11px;transform:scale(1)}
#s-systems .s-sy-lock svg{width:11px;height:11px;fill:none;stroke:var(--ink-muted);stroke-width:2}
#s-systems .s-sy-stamp{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;
  border-radius:var(--r-pill);background:#fff;border:.5px solid var(--hairline);
  box-shadow:0 8px 22px -10px rgba(16,20,36,.3);
  font-family:var(--font-ui);font-size:11.5px;font-weight:700;color:var(--ink-soft)}
#s-systems .s-sy-stamp svg{width:15px;height:15px;fill:none;stroke:var(--s-accent-fill);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#s-systems .s-sy-stamp path{stroke-dasharray:1 1;stroke-dashoffset:0}

/* ══════════ the connect strip — what the finished screen can be wired to ══════════ */
#s-systems .s-sy-strip{grid-column:1;grid-row:2;justify-self:end;direction:rtl;
  display:flex;align-items:flex-start;gap:clamp(8px,1.4vw,16px);
  width:100%;max-width:520px;margin-top:14px;padding:0 4px}
/* min-width, not width: a set name needs more room than a glyph, and 9.5px
   Hebrew squeezed into 40px was texture, not a word. */
#s-systems .s-sy-cm{position:relative;flex:0 0 auto;display:grid;place-items:center;
  min-width:40px;height:40px;padding:2px 6px 0;border-radius:var(--nv-r);
  background:#fff;border:.5px solid var(--hairline);
  box-shadow:0 8px 20px -14px rgba(16,20,36,.4);opacity:1;transform:translateY(0)}
#s-systems .s-sy-cm svg{width:19px;height:19px;fill:var(--ink-soft)}
#s-systems .s-sy-cm-chip{font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  color:var(--ink-soft);line-height:1;text-align:center;white-space:nowrap}
/* the 1px hairline tether up into the frame */
#s-systems .s-sy-tether{position:absolute;bottom:100%;left:50%;width:1px;height:14px;
  margin-left:-.5px;background:var(--averya-surface-noise),var(--s-accent-ring);background-blend-mode:overlay,normal,normal,normal,normal;transform:scaleY(1);transform-origin:bottom center}

/* ══════════ the system reporting back out ══════════ */
#s-systems .s-sy-back{grid-column:1;grid-row:3;justify-self:end;direction:rtl;
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:38px;padding:0 14px;
  border-radius:var(--r-pill);background:#fff;border:.5px solid var(--hairline);
  font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--ink-soft);
  opacity:1;transform:translateY(0)}
#s-systems .s-sy-back svg{width:15px;height:15px;fill:none;stroke:var(--s-accent-fill);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ≤880 only: one vertical dashed spine with a scaleY live child */
#s-systems .s-sy-spine{display:none}

/* ══════════════════════════ the wall ══════════════════════════ */
#s-systems .s-sy-wall{max-width:1120px;margin:clamp(30px,4vw,46px) auto 0;
  padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--hairline)}
#s-systems .s-sy-wall-t{margin:0 0 clamp(16px,2vw,24px);text-align:start;
  font-family:var(--font-ui);font-size:clamp(15px,1.5vw,17px);font-weight:700;color:var(--ink)}
#s-systems .s-sy-rails{display:grid;gap:clamp(16px,2vw,26px)}
#s-systems .s-sy-rail-lbl{margin:0 0 10px;text-align:start;
  font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--ink-muted)}
#s-systems .s-sy-tiles{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
#s-systems .s-sy-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-height:76px;padding:10px 6px;border-radius:var(--nv-r);
  background:#fff;border:1px solid var(--hairline);opacity:1;transform:translateY(0)}
#s-systems .s-sy-mark{display:grid;place-items:center;width:24px;height:24px;color:var(--sy-icon)}
/* Vendor marks keep their own brand colors, including original multicolor artwork. */
#s-systems .s-sy-mark svg{width:22px;height:22px;fill:currentColor}
#s-systems .s-sy-mark img{display:block;width:22px;height:22px;object-fit:contain;filter:none}
/* a wordmark glyph is wide and short — give it its own box or it reads as a hair */
#s-systems .s-sy-mark--wide{width:auto;height:24px}
#s-systems .s-sy-mark--wide svg{width:52px;height:auto}
#s-systems .s-sy-mark--wide img{width:52px;height:24px}
/* 12.5px floor: these are the system NAMES the reader scans the wall for —
   real page content, not mock chrome. */
#s-systems .s-sy-name{font-family:var(--font-ui);font-size:12.5px;font-weight:600;line-height:1.25;
  width:100%;color:var(--ink-muted);text-align:center;hyphens:none;overflow-wrap:anywhere}
#s-systems .s-sy-honesty{max-width:760px;margin:clamp(18px,2.2vw,26px) 0 0;text-align:start;
  font-size:13.5px;line-height:1.55;color:var(--ink-muted)}

/* one-shot tile entrance, 0.04 s apart. The default above is the finished
   state; .is-in is added once by the driver and the animation only plays
   toward what CSS already shows. Never a loop. */
@keyframes s-sy-tilein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#s-systems .s-sy-wall.is-in .s-sy-tile,#s-systems .s-sy-rail.is-in .s-sy-tile{animation:s-sy-tilein .5s var(--ease) both;
  animation-delay:calc(var(--i,0) * .04s)}

/* ══════════════════════════ responsive ══════════════════════════ */
@media (max-width:880px){
  #s-systems .s-sy-stage{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto clamp(44px,10vw,64px) auto auto auto;
    justify-items:center;align-items:stretch;min-height:0}
  #s-systems .s-sy-wires{display:none}
  #s-systems .s-sy-spec{grid-column:1;grid-row:1;justify-self:center;max-width:420px}
  #s-systems .s-sy-screen{grid-column:1;grid-row:3;justify-self:center;max-width:460px}
  #s-systems .s-sy-strip{grid-column:1;grid-row:4;justify-self:center;max-width:460px;
    justify-content:space-between}
  #s-systems .s-sy-back{grid-column:1;grid-row:5;justify-self:center}
  #s-systems .s-sy-port{display:none}
  #s-systems .s-sy-tether{display:none}
  #s-systems .s-sy-spine{display:block;position:relative;grid-column:1;grid-row:2;width:2px;
    justify-self:center;
    background:repeating-linear-gradient(180deg,var(--s-wire-base) 0 4px,transparent 4px 8px);}
  #s-systems .s-sy-spine-live{position:absolute;inset:0;background:var(--averya-surface-noise),var(--s-accent-fill);background-blend-mode:overlay,normal,normal,normal,normal;
    transform-origin:top center;transform:scaleY(1);opacity:var(--s-wire-used)}
}
@media (max-width:720px){
  #s-systems .s-sy-fig{padding:18px}
  #s-systems .s-sy-tiles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
}
@media (max-width:560px){
  #s-systems .s-sy-fig{padding:16px}
  #s-systems .s-sy-spec,#s-systems .s-sy-screen,#s-systems .s-sy-strip{max-width:100%}
  #s-systems .s-sy-rule-t{font-size:12.5px}
  /* 10.5px Hebrew reads as texture on a phone — floor the mock chrome */
  #s-systems .s-sy-chip,#s-systems .s-sy-tab,#s-systems .s-sy-fv--tag,
  #s-systems .s-sy-thead,#s-systems .s-sy-spec-f{font-size:11.5px}
  #s-systems .s-sy-tab{padding:5px 2px}
  #s-systems .s-sy-cols{grid-template-columns:minmax(0,1fr)}
  /* two columns is all a phone can read: keep the order number and its STATUS
     (the two the permission rule acts on); the item count and the date go. */
  #s-systems .s-sy-thead .s-sy-td:nth-child(2),#s-systems .s-sy-trow .s-sy-td:nth-child(2),
  #s-systems .s-sy-thead .s-sy-td:nth-child(4),#s-systems .s-sy-trow .s-sy-td:nth-child(4){display:none}
  #s-systems .s-sy-thead,#s-systems .s-sy-trow{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  #s-systems .s-sy-tiles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  /* the floor is 12px, never 11: a wrapped "WooCommerce" is legible, an
     11px one is not. The tile grew a track instead. */
  #s-systems .s-sy-name{font-size:12px;letter-spacing:-.01em}
  #s-systems .s-sy-mark--wide svg{width:46px}
  #s-systems .s-sy-honesty{font-size:13px}
}
@media (max-width:420px){
  #s-systems .s-sy-fig{padding:12px}
  #s-systems .s-sy-field{grid-template-columns:46px minmax(0,1fr);gap:7px}
  #s-systems .s-sy-fv{font-size:11.5px}
  #s-systems .s-sy-tabs{padding:8px 8px 0}
  #s-systems .s-sy-back{font-size:11.5px;padding:0 11px}
}

/* ══════════ reduced motion: return to the composed END STATE and pin it ══════════
   The shared block in the showcase sheet hides .prod-play (no driver runs, so a
   visible control would be inert). Everything the driver would have touched is
   pinned to the frame CSS already declares. buildWires() still runs, so the
   measured wires are drawn — the static frame is complete, not partial. */
@media (prefers-reduced-motion:reduce){
  #s-sy-fig,#s-sy-fig *{transition:none!important}
  #s-systems .s-sy-wl{stroke-dashoffset:0!important;opacity:var(--s-wire-used)!important}
  #s-systems .s-sy-wc{opacity:0!important}
  #s-systems .s-sy-spine-live{transform:scaleY(1)!important;opacity:var(--s-wire-used)!important}
  #s-systems .s-sy-rule-ink{clip-path:inset(0)!important}
  #s-systems .s-sy-rule,#s-systems .s-sy-port,#s-systems .s-sy-form,#s-systems .s-sy-field,
  #s-systems .s-sy-pane,#s-systems .s-sy-tabs,#s-systems .s-sy-table,#s-systems .s-sy-thead,
  #s-systems .s-sy-trow,#s-systems .s-sy-chip,#s-systems .s-sy-lock,#s-systems .s-sy-stamp,
  #s-systems .s-sy-cm,#s-systems .s-sy-tether,#s-systems .s-sy-back,
  #s-systems .s-sy-tile{opacity:1!important;transform:none!important;animation:none!important}
  #s-systems .s-sy-trow.is-restricted{opacity:var(--s-row-dim)!important}
  #s-systems .s-sy-stamp path{stroke-dashoffset:0!important}
}


/* ══════════════════ BAND 8 · #s-code (the one dark band) ══════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   #s-code — the CODE band (the ONE dark band on services.html)
   Belongs in assets/averya-services-showcase.css, AFTER averya-nvidia.css and
   after the shared assets/averya-showcase.css (which supplies .prod-act, the
   accent tokens, --prod-fab-gutter, .prod-fig, .prod-bar/.prod-note/.prod-play,
   .prod-foot, the .is-off gate, the [hidden] rescue and the shared
   reduced-motion block).

   LAW: the CSS default below IS the composed END state — the snippet fully
   typed, `.done` on the <pre> (caret gone), all three checks drawn. The driver
   only ever animates TOWARD this frame. No-JS, no-IO and reduced motion are
   therefore correct with zero extra work.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── band ───────────────────────────────────────────────────────────────── */
#s-code{
  /* Blue and light cyan carry the build palette onto the dark editor. */
  --s-accent:#3b89ff;
  --s-accent-fill:#7dd3fc;
  /* three inks + one accent, never a rainbow.
     --tk-mute is #8792ad, not the #6f7a94 of the spec: #6f7a94 on #0f1424
     measures 4.29:1 and the Hebrew comment is real reading matter, not chrome.
     #8792ad measures 5.92:1 and keeps the same muted grey-blue. */
  --tk-plain:#e8ecf5;   /* 15.2:1 */
  --tk-mute:#8792ad;    /*  5.9:1 */
  --tk-accent:#7dd3fc;
  background:var(--tile-dark-grad);
}
/* [hidden] rescue — styles.css img,svg{display:block} beats the UA rule, and
   this band ships two label spans plus one button that start hidden. The
   shared sheet already carries `.prod-act [hidden]`; scoped here so the
   fragment stands on its own. */
#s-code [hidden]{display:none!important}

/* head — start-aligned like every .pkg-head on this page, one step below
   #s-open. (Duplicated from the shared `.s-band .about-head` ladder so this
   block is self-sufficient; identical result if the shared rule is present.) */
#s-code .about-head h2{color:var(--on-dark)}
#s-code .about-head p{color:var(--on-dark-muted)}
/* Light cyan, blue and violet keep the title readable on the dark stage.

   background-IMAGE, never the `background` shorthand. styles.css:1497 paints
   the word-mask as four separate !important longhands — background-size:240%,
   background-position:var(--kt-fill), background-clip:text and
   text-fill-color:transparent — all at (0,2,0). A shorthand here is (1,2,0),
   so its implicit resets would win and re-set background-clip to border-box:
   the em then paints as a SOLID color bar with invisible glyphs, and the
   --kt-fill scrub dies with it. Replacing only the image keeps the mask. */
#s-code .kinetic-title em{
  background-image:linear-gradient(115deg,#7dd3fc 0%,#60a5fa 55%,#c4b5fd 100%)!important;
}

/* ── the figure is not a card here: the editor is the object ─────────────── */
#s-code .prod-fig{
  background:none;border:0;box-shadow:none;padding:0;
}
#s-code .s-cd-stage{display:block}

/* ── the editor: the site's flat 2px NVIDIA card language, not an IDE skin ── */
#s-code .s-cd-editor{
  position:relative;isolation:isolate;
  max-width:820px;margin:0 auto;
  background:#0f1424;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--nv-r);
  box-shadow:0 24px 60px -16px rgba(0,0,0,.55);
  overflow:hidden;
}
/* the masked 1px gradient ring, same recipe as the schedule card */
#s-code .s-cd-editor::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.26),rgba(255,255,255,0) 44%,rgba(96,165,250,.30));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* chrome bar: three dots + one flat file tab. Physical LTR so the dots sit
   left in both languages, the way an editor's chrome actually reads. */
#s-code .s-cd-bar{
  display:flex;align-items:center;gap:12px;
  direction:ltr;
  padding:9px 13px;
  background:rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.09);
}
#s-code .s-cd-dots{display:flex;gap:6px;flex:none}
#s-code .s-cd-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);}
#s-code .s-cd-tab{
  padding:4px 11px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--nv-r);
  background:rgba(255,255,255,.05);
  font-family:var(--font-mono);font-size:12px;line-height:1.4;
  letter-spacing:normal;color:var(--tk-mute);
  direction:ltr;unicode-bidi:isolate;
}

/* ── the code itself ────────────────────────────────────────────────────── */
#s-code .s-cd-pre{
  margin:0;padding:16px 18px 20px;
  /* an LTR island inside an RTL page: the body's -.012em tracking must be
     cancelled or a monospace grid stops being a grid. */
  direction:ltr;unicode-bidi:isolate;text-align:left;letter-spacing:normal;
  /* rows are their own blocks, so the source newlines between them must NOT
     be preserved — pre-wrap lives on the row, not on the <pre>. */
  white-space:normal;
  font:13.5px/1.75 var(--font-mono);
  color:var(--tk-plain);
}
#s-code .s-cd-pre code{display:block;font:inherit;background:none;padding:0;border:0}
#s-code .s-cd-row{
  display:block;white-space:pre-wrap;word-break:normal;
  /* the box never reflows while the rows are empty mid-clear */
  min-height:1.75em;
}
/* rgba(255,255,255,.24) on #0f1424 measured 2.15:1 — under half the floor.
   .50 measures 5.29:1 and still reads as a gutter, not as code. */
#s-code .s-cd-gut{
  display:inline-block;width:1.5em;margin-inline-end:14px;
  text-align:right;color:rgba(255,255,255,.50);
  -webkit-user-select:none;user-select:none;
}
#s-code .tk-plain{color:var(--tk-plain)}
#s-code .tk-mute{color:var(--tk-mute)}
#s-code .tk-accent{color:var(--tk-accent)}
/* the Hebrew comment is an RTL island inside the LTR line: isolate it, or the
   `//` in front of it is dragged into the Hebrew run. */
#s-code .s-cd-he{direction:rtl;unicode-bidi:isolate}

/* the caret — one element, moved by the driver into whichever token span is
   being typed, so it lands at the LEFT edge inside the RTL comment and at the
   right edge inside every LTR token. */
#s-code .s-cd-caret{
  display:inline-block;width:2px;height:1.05em;
  vertical-align:-.18em;margin-inline-start:1px;
  background:var(--averya-surface-noise),var(--s-accent-fill);background-blend-mode:overlay,normal,normal,normal,normal;
  animation:s-cd-caret 1s steps(1) infinite;
}
@keyframes s-cd-caret{50%{opacity:0}}
/* the caret exists only while something is being typed */
#s-code .s-cd-pre.done .s-cd-caret{display:none}
/* the infinite blink is viewport-gated for free by the shared
   `.prod-act .is-off *{animation-play-state:paused!important}`; pinned again
   here so the fragment does not depend on load order. */
#s-code .is-off .s-cd-caret{animation-play-state:paused!important}

/* ── the verification strip: the practice, never a result ────────────────── */
#s-code .s-cd-checks{
  list-style:none;margin:24px auto 0;padding:0;
  max-width:820px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px);
}
#s-code .s-cd-vrow{
  display:flex;align-items:flex-start;gap:10px;
  margin:0;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:13.5px;line-height:1.5;color:var(--on-dark-muted);text-align:start;
  transition:opacity .38s var(--ease),transform .38s var(--ease);
}
#s-code .s-cd-vtick{flex:none;width:16px;height:16px;margin-top:3px;color:var(--s-accent-fill)}
#s-code .s-cd-vtick path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .38s var(--ease)}
/* the only thing the driver adds — the CLEARED frame, never the end frame */
#s-code .s-cd-vrow.is-clear{opacity:.25;transform:translateY(4px)}
#s-code .s-cd-vrow.is-clear .s-cd-vtick path{stroke-dashoffset:1}

/* ── the bar, the control and the foot, re-inked for the dark band ───────── */
#s-code .prod-bar{border-top-color:rgba(255,255,255,.16)}
#s-code .prod-note{color:var(--on-dark-muted)}
/* the nvidia dark-button variants are scoped to .schedule-card/.contact-card/
   .testimonial-card and do NOT reach this band — without these you get a white
   pill on black. */
#s-code .prod-play{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff}
#s-code .prod-play:focus-visible{outline:2px solid #fff;outline-offset:2px}
#s-code .prod-benefits li{color:var(--on-dark-muted);border-top-color:rgba(255,255,255,.22)}
#s-code .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34);background:transparent}
@media (hover:hover){
  #s-code .prod-play:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  #s-code .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
}

/* ── tiers ──────────────────────────────────────────────────────────────── */
@media (max-width:880px){
  #s-code .s-cd-editor{max-width:100%}
  #s-code .s-cd-checks{grid-template-columns:1fr;gap:14px}
}
@media (max-width:560px){
  /* the longest line is 49 characters: it must WRAP, never scroll a <pre>
     inside an already-scrolling page. */
  #s-code .s-cd-pre{font-size:12.5px;padding:14px 14px 16px}
  #s-code .s-cd-row{overflow-wrap:anywhere}
  #s-code .s-cd-gut{margin-inline-end:10px}
  #s-code .s-cd-checks{margin-top:20px}
}

/* ── reduced motion: the composed end frame, and nothing moves ──────────── */
@media (prefers-reduced-motion:reduce){
  #s-code .s-cd-caret{animation:none;display:none}
  #s-code .s-cd-vrow,
  #s-code .s-cd-vtick path{transition:none}
  /* the driver returns before un-hiding the control, so a visible button
     would be inert. (The shared sheet says the same; pinned for the fragment.) */
  #s-code .prod-play{display:none!important}
}


/* ══════════════════ BAND 9 · #s-brand (brand identity) ══════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   #s-brand — BRAND IDENTITY band (services.html)
   Merge target: assets/averya-services-showcase.css  (?v=20260906a)

   Every rule here is id-scoped to #s-brand, so this block can be pasted into
   the services sheet in any order without touching the other bands.

   THE LAW: the default state written below IS the composed END frame — all
   eight slots filled, all eight checks drawn, all three rules standing, the
   dark and inverted grounds fully wiped in. brand.js only ever animates
   TOWARD this frame. Reduced motion, no WAAPI, no IntersectionObserver and
   no JS at all therefore need no extra work: the frame is already correct.

   Motion properties used anywhere in this band: transform, opacity,
   clip-path, stroke-dashoffset. Nothing else.
   ═══════════════════════════════════════════════════════════════════════ */

/* Violet links the brand illustration to the same cool service palette. */
#s-brand{
  --s-accent:#6d28d9;
  --s-accent-fill:#8b5cf6;
  --s-accent-soft:rgba(124,58,237,.07);
  --s-accent-ring:rgba(124,58,237,.16);
  /* the clear-space rule, drawn: half the mark's own height on every side */
  --s-br-mark-w:96px;
  --s-br-clear:48px;
  background:var(--canvas-soft);
}

/* [hidden] rescue — styles.css:103 img,svg{display:block} out-specifies the
   UA [hidden] rule, so without this both play-label spans render at once.
   The sprite is additionally parked structurally, never by [hidden] alone. */
#s-brand [hidden]{display:none!important}
#s-brand .s-br-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── head: start-aligned, one step under #s-open, flush to the same edge the
      pillar titles' rule starts from. Never centred on this page. ── */

/* The stage is CENTRED, like #s-systems (.s-sy-fig margin:0 auto) and #s-code
   (.s-cd-editor margin:0 auto). Only the HEADS are start-aligned on this page;
   pushing this one stage to the start edge left the three demonstration bands
   without a shared measure. Inherited from `.prod-act .prod-stage{margin:0 auto}`
   — no rule needed here beyond the figure's own width. */
#s-brand .sbr-fig{max-width:1120px}

/* ── the legend: names the object under test in the reader's own language,
      so the mark can never be mistaken for a customer's brand ── */
#s-brand .s-br-legend{
  margin:0 0 clamp(14px,1.6vw,18px);
  font-family:var(--font-ui);font-size:12.5px;font-weight:600;
  letter-spacing:.01em;color:var(--ink-muted);text-align:start;
}

/* ── the rail: eight slots. Slot 1 spans two tracks so the clear-space ring
      (mark + half its height on every side = 192px) fits inside it. ── */
#s-brand .s-br-rail{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);align-items:stretch;
}
#s-brand .s-br-slot{
  position:relative;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:10px 6px 12px;
  border:1px solid var(--hairline);border-radius:var(--nv-r);
}
#s-brand .s-br-slot--ring{grid-column:span 2;padding-inline:4px}

#s-brand .s-br-cell{
  position:relative;isolation:isolate;
  flex:1 1 auto;width:100%;min-height:112px;
  display:grid;place-items:center;
}
#s-brand .s-br-slot--ring .s-br-cell{min-height:200px}

/* the ground each mode is tested against — a centred square swatch, wiped in
   by clip-path from the start edge */
#s-brand .s-br-ground{
  position:absolute;top:50%;left:50%;z-index:-1;
  width:min(100%,116px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:var(--nv-r);
  clip-path:inset(0 0 0 0);
}
#s-brand .s-br-slot--colour .s-br-ground,
#s-brand .s-br-slot--grey .s-br-ground,
#s-brand .s-br-slot--mono .s-br-ground{background:var(--canvas)}
#s-brand .s-br-slot--dark .s-br-ground{background:var(--tile-dark-grad)}

/* the mark: one inline SVG, one colour + one tint of it. Size is the only
   thing the first four slots change; mode is the only thing the last four do. */
#s-brand .s-br-mark{
  display:block;color:var(--s-accent);
  width:var(--s-br-m,48px);height:var(--s-br-m,48px);
}
#s-brand .s-br-mark--96{--s-br-m:var(--s-br-mark-w)}
#s-brand .s-br-mark--48{--s-br-m:48px}
#s-brand .s-br-mark--24{--s-br-m:24px}
#s-brand .s-br-mark--16{--s-br-m:16px}

/* the four modes. greyscale and inversion are real renderings of the same
   mark, not a second drawing — which is what makes the test honest. */
#s-brand .s-br-slot--grey .s-br-cell{filter:grayscale(1)}
#s-brand .s-br-slot--dark .s-br-mark{color:var(--on-dark)}
/* Slot 8 used to be `grayscale(1) invert(1)` — a light mark on a black square,
   i.e. slot 7's knock-out drawn a second way, so the last two slots read as
   near-duplicates. The test a brand book actually runs and this rail was
   missing is the SINGLE-COLOUR BLACK positive: pure #000 on the paper, which
   is neither slot 6's mid-grey nor slot 7's reversed white. */
#s-brand .s-br-slot--mono .s-br-mark{color:#000}

/* ── the clear-space annotation on slot 1 ── */
#s-brand .s-br-ring{
  position:absolute;top:50%;left:50%;
  width:calc(var(--s-br-mark-w) + var(--s-br-clear) * 2);
  height:calc(var(--s-br-mark-w) + var(--s-br-clear) * 2);
  transform:translate(-50%,-50%);
  border:1px dashed var(--s-accent-ring);border-radius:var(--nv-r);
  pointer-events:none;
}
#s-brand .s-br-ring-note{
  position:absolute;top:-8px;inset-inline-start:12px;
  padding:0 5px;
  font-family:var(--font-mono);font-size:11px;line-height:16px;
  letter-spacing:normal;direction:ltr;unicode-bidi:isolate;color:var(--s-accent);background:var(--canvas);
}

/* ── captions. The four numerals are the mark's rendered width in pixels —
      a number the reader re-derives on screen. JetBrains Mono carries no
      Hebrew, so only the numerals are set in it. ── */
#s-brand .s-br-cap{
  font-family:var(--font-ui);font-size:12px;line-height:1.2;
  color:var(--ink-muted);text-align:center;
}
#s-brand .s-br-cap--num{font-family:var(--font-mono);letter-spacing:normal}

/* ── the check under each slot: drawn by default ── */
#s-brand .s-br-check{display:block;width:16px;height:12px;overflow:visible}
#s-brand .s-br-check path{
  fill:none;stroke:var(--s-accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;
}

/* ── the rules row: what the band actually sells ── */
#s-brand .s-br-rules{
  list-style:none;margin:clamp(18px,2.4vw,26px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
#s-brand .s-br-rule{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  border:1px solid var(--hairline-strong);border-radius:var(--nv-r);
  font-family:var(--font-ui);font-size:12.5px;font-weight:600;
  line-height:1.35;color:var(--ink-soft);text-align:start;
}
#s-brand .s-br-rule::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--s-accent-fill);
}

/* ── the composed frame, pinned. .is-static is set by the driver whenever it
      declines to run (reduced motion, no WAAPI, no IntersectionObserver);
      these rules make sure nothing a track would have owned is left half-set. ── */
#s-brand .is-static .s-br-mark,
#s-brand .is-static .s-br-cell,
#s-brand .is-static .s-br-cap,
#s-brand .is-static .s-br-rule{opacity:1!important;transform:none!important}
#s-brand .is-static .s-br-ring,
#s-brand .is-static .s-br-ground{transform:translate(-50%,-50%)!important}
#s-brand .is-static .s-br-ground{clip-path:inset(0 0 0 0)!important}
#s-brand .is-static .s-br-check path{stroke-dashoffset:0!important}

@media (prefers-reduced-motion:reduce){
  /* no driver runs, so the control would be inert */
  #s-brand .prod-play{display:none!important}
  #s-brand .s-br-ring,
  #s-brand .s-br-mark,
  #s-brand .s-br-cell,
  #s-brand .s-br-ground,
  #s-brand .s-br-cap,
  #s-brand .s-br-rule,
  #s-brand .s-br-check path{animation:none!important;transition:none!important}
  #s-brand .s-br-ground{clip-path:inset(0 0 0 0)!important}
  #s-brand .s-br-check path{stroke-dashoffset:0!important}
}

/* ── tiers. The eight-across rail needs room for a 96px mark plus its
      clear space; below that the rail folds to three tracks (slot 1 still
      spanning two), then to two. ── */
@media (max-width:1100px){
  #s-brand .s-br-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  #s-brand .s-br-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #s-brand .s-br-slot{padding:8px 4px 10px;gap:8px}
  #s-brand .s-br-cell{min-height:96px}
  #s-brand .s-br-rules{flex-direction:column;align-items:stretch}
}

/* ══════════════════════════════════════════════════════════════════════════
   WP1 · READING ROUTE under each package head. A text link with the house
   chevron (the .prod-link shape from the homepage acts), not a CTA: it sends
   the reader to the guide that argues the package before the demonstration.
   ══════════════════════════════════════════════════════════════════════════ */
.pkg-guide{margin:14px 0 0}
.pkg-guide .prod-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;
  font-family:var(--font-ui);font-size:15px;font-weight:700;line-height:1.3;color:var(--primary);text-align:start;
  border-block-end:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.pkg-guide .prod-link .g-l{color:var(--ink-muted);font-weight:600;flex:none}
.pkg-guide .prod-link .arrow{width:16px;height:16px;flex:none;transform:scaleX(-1);transition:transform .25s var(--ease-apple)}
@media (hover:hover){
  .pkg-guide .prod-link:hover{border-block-end-color:currentColor}
  .pkg-guide .prod-link:hover .arrow{transform:scaleX(-1) translateX(-4px)}
}
@media (prefers-reduced-motion:reduce){
  .pkg-guide .prod-link{transition:none}
  .pkg-guide .prod-link .arrow{transition:none;transform:scaleX(-1)}
}


/* ══════════════════════════════════════════════════════════════════════════
   2026-09-06b · INTERWEAVE (WP5). Appended to averya-services-showcase.css.
   The catalog and the demonstrations are one argument per package:
   film + featured card in one row → four compact cards with short descriptions →
   the package's demonstration band, nested → the door.
   LAW: every default below IS the composed end state. The JS only arms a
   start state (rule-arm) ; no-JS, no IO and
   prefers-reduced-motion land on the finished frame. transform/opacity only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the opener breathes above its first line; the build film must start inside
      the first 1440×900 viewport (measured: h2 top 86 vs nav bottom 80 → now ≥ 38px) ── */


/* ── ONE grid per package: film (6) + featured c1 (6) / c2 c3 c4 c5 (3 each) ── */
.deep-section .averya-bento{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch}
.deep-section .averya-bento .pkg-film{grid-column:span 6}
.deep-section .averya-bento .cap.is-featured{grid-column:span 6}
.deep-section .averya-bento .cap:not(.is-featured){grid-column:span 3}

/* the film inside the row takes the package's hairline frame, so the cold
   render reads as the package's first card, not a pasted object */
.deep-section .averya-bento .pkg-film{
  margin:0;max-width:none;
  display:flex;flex-direction:column;
  padding:12px;
  border:1px solid color-mix(in oklab,var(--motion-accent,#2563eb) 28%,transparent);
  border-radius:var(--nv-r);
  background:var(--canvas-soft);
}
.deep-section .averya-bento .pkg-film-v{box-shadow:none;border-color:rgba(0,0,0,.06)}
.deep-section .averya-bento .pkg-film .prod-bar{margin-top:auto;padding-top:12px;border-top-color:color-mix(in oklab,var(--motion-accent,#2563eb) 22%,transparent)}
.deep-section .averya-bento .pkg-film .prod-bar{padding-block-start:12px}
@supports not (color: color-mix(in oklab, red 9%, transparent)){
  .deep-section .averya-bento .pkg-film{border-color:var(--hairline-strong)}
}

/* ── compact cards: icon · h3 · short description ── */
.deep-section .averya-bento .cap:not(.is-featured){padding:20px 20px 16px;min-height:176px}
.deep-section .averya-bento .cap:not(.is-featured) .ic{width:34px;height:34px;margin:0 0 12px}
.deep-section .averya-bento .cap:not(.is-featured) .ic svg{width:30px;height:30px}
.deep-section .averya-bento .cap:not(.is-featured) h3{font-size:clamp(16px,1.25vw,18px);margin:0 0 6px}
.deep-section .averya-bento .cap .cap-s{
  margin:0 0 14px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(6,10,24,.28);unicode-bidi:isolate;text-wrap:pretty;
}
/* ── the pillar rule draws itself once, when its head reveals. The default
      (scaleX(1)) is the finished rule; the driver adds .rule-arm BEFORE it
      observes and removes it on entry — no JS, no IO and reduced motion all
      show the drawn rule. The title itself stays solid and still (owner, 2026-07-31). ── */
.deep-section .service-editorial-title::after{
  transform:scaleX(1);transform-origin:100% 50%;
  transition:transform .42s cubic-bezier(.22,1,.36,1) .12s;
}
[dir="ltr"] .deep-section .service-editorial-title::after{transform-origin:0% 50%}
.deep-section .pkg-head.rule-arm .service-editorial-title::after{transform:scaleX(0)}

/* ── the demonstrations, nested inside their packages (DIVs, never sections) ── */
.deep-section .s-band{background:transparent;padding:clamp(40px,5vw,64px) 0 0;margin:0}
.deep-section .s-band.s-dark{
  padding:clamp(32px,4vw,48px) clamp(20px,3vw,40px);
  border-radius:var(--nv-r);
  margin-top:clamp(40px,5vw,64px);
}
.deep-section .s-band .prod-stage,.deep-section .s-band .prod-foot,.deep-section .s-band .s-sy-wall{max-width:none}
.deep-section .s-band .about-head{margin-bottom:clamp(24px,3vw,36px)}
/* the door row after a nested band needs the band's own breathing room */
.deep-section .s-band + .pk-cta-row{margin-top:clamp(32px,4vw,48px)}
.pk-cta-row{gap:10px;flex-wrap:wrap;align-items:stretch}

/* ── .prod-link on this page (the rule lives in averya-products.css, which
      services.html does not load). Same recipe: 44px hit box, house arrow. ── */
.prod-act .prod-link{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 2px;
  font-family:var(--font-ui);font-size:15px;font-weight:700;line-height:1.2;
  color:var(--primary);
  border-block-end:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.prod-act .prod-link .arrow{width:16px;height:16px;flex:none;transform:scaleX(-1);transition:transform .25s var(--ease-apple)}
.prod-act .prod-ctas--link{gap:10px 22px;justify-content:flex-start}
#s-code .prod-link{color:var(--s-accent-fill)}
#s-code .prod-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (hover:hover){
  .prod-act .prod-link:hover{border-block-end-color:currentColor}
  .prod-act .prod-link:hover .arrow{transform:scaleX(-1) translateX(-4px)}
}

/* ── tiers ── */
@media (max-width:900px){
  .deep-section .averya-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deep-section .averya-bento .pkg-film,
  .deep-section .averya-bento .cap.is-featured{grid-column:span 2}
  .deep-section .averya-bento .cap:not(.is-featured){grid-column:span 1;min-height:160px}
}
@media (max-width:620px){
  .deep-section .averya-bento{grid-template-columns:minmax(0,1fr);gap:13px}
  .deep-section .averya-bento .pkg-film,
  .deep-section .averya-bento .cap.is-featured,
  .deep-section .averya-bento .cap:not(.is-featured){grid-column:span 1}
  .deep-section .averya-bento .cap:not(.is-featured){min-height:150px;padding:18px 18px 14px}
  .deep-section .s-band.s-dark{padding:24px 16px}
}
@media (max-width:560px){
  .pk-cta-row{flex-direction:column;align-items:stretch}
  .pk-cta-row .btn{margin-left:var(--prod-fab-gutter);min-width:0;white-space:normal;text-align:center}
  .prod-act .prod-ctas--link .prod-link{justify-content:flex-start;margin-left:var(--prod-fab-gutter);min-width:0}
}

/* ── reduced motion: the rule is drawn, nothing eases ── */
@media (prefers-reduced-motion:reduce){
  .deep-section .service-editorial-title::after{transition:none!important;transform:scaleX(1)!important}
  .prod-act .prod-link,.prod-act .prod-link .arrow{transition:none}
  .prod-act .prod-link .arrow{transform:scaleX(-1)}
}
html.no-js .deep-section .service-editorial-title::after{transform:scaleX(1)!important}

/* Small side controls replace the text buttons; active labels remain available to assistive technology. */
.demo-frame{position:relative;isolation:isolate;padding-bottom:20px}
:is(.demo-frame,.pkg-film)>.prod-play{position:absolute;inset-block-end:0;inset-inline-start:14px;inset-inline-end:auto;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;gap:0;border-radius:50%;border:1px solid var(--hairline-strong);background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.1);cursor:pointer;touch-action:manipulation}
:is(.demo-frame,.pkg-film)>.prod-play::before{content:"";box-sizing:border-box;width:10px;height:13px;border:0;border-inline:3px solid currentColor}
:is(.demo-frame,.pkg-film)>.prod-play[aria-pressed="true"]::before{width:0;height:0;border:6px solid transparent;border-inline-start:10px solid currentColor;border-inline-end:0}
:is(.demo-frame,.pkg-film)>.prod-play>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:is(.demo-frame,.pkg-film)>.prod-play[hidden],:is(.demo-frame,.pkg-film)>.prod-play>span[hidden]{display:none!important}
:is(.demo-frame,.pkg-film)>.prod-play:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.pkg-film>.prod-play{inset-block-end:12px}
.home-system-demo{padding-top:32px}
@media (max-width:560px){.home-system-demo .padding-global{padding-inline:12px}.home-system-demo{padding-block:24px 36px}}
@media (prefers-reduced-motion:reduce){:is(.demo-frame,.pkg-film)>.prod-play{display:none!important}}

/* Bare service glyphs have their own contrasting cool color, independent of copy. */
.page-solutions #build{--service-glyph:#a5f3fc}
.page-solutions #growth{--service-glyph:#4338ca}
.page-solutions #systems{--service-glyph:#a5f3fc}
.page-solutions #secure{--service-glyph:#ddd6fe}
.page-solutions :is(#build,#growth,#systems,#secure) .averya-bento .cap .ic{color:var(--service-glyph)}