/* ============================================================
   TOOL ACCORDION — shared component (site-wide)
   ------------------------------------------------------------
   "A job for every tool." — the #people conversion section on
   every engine page. ONE reusable single-column accordion: each
   tool is a full-width row (small photo + name + one-line hook +
   expand chevron). Clicking a row expands ONLY that row — pain/
   drain/gain copy plus a small gallery of that tool's own
   storyboard slides (with their captions) drop in beneath it,
   pushing the column down. Independent per-row toggles: opening
   one never closes or affects any other row.

   OWNERSHIP: this file is owned by the engine-page build. Link
   it from every page that uses the tile pattern (engine pages +
   Home) so the look stays IDENTICAL everywhere — do not fork a
   second copy of these rules.

   HISTORY: replaced the 2026-07-24 "humanity grid" (2/3/4-col
   card grid, one photo + a nameplate toggle revealing a single
   paragraph) with this accordion (2026-07-24, later pass) — the
   grid read as a gallery; the accordion reads as a conversion
   flow the visitor works through one tool at a time on the way
   to booking a call.

   MARKUP CONTRACT:

     <section class="humanity-section reveal" id="people">
       <div class="container">
         <div class="humanity-head">
           <h2><span class="accent">A job for every tool.</span></h2>
           <p class="lead">Supporting line.</p>
         </div>
         <div class="humanity-grid">
           <div class="humanity-tile">
             <button type="button" class="ht-row" aria-expanded="false"
                     aria-controls="desc-<tool-slug>" aria-label="Tool Name — open for details">
               <span class="ht-thumb">
                 <img src="/tiles/<tool-slug>/slideN.jpg" alt="" loading="lazy">
               </span>
               <span class="ht-row-text">
                 <span class="ht-name">Tool Name <span class="ht-addon">Add-on</span></span> <!-- badge OPTIONAL -->
                 <span class="ht-hook">One-liner hook.</span>
               </span>
               <svg class="ht-chevron" aria-hidden="true" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
             </button>
             <div class="ht-desc" id="desc-<tool-slug>">
               <div class="ht-desc-inner">
                 <p class="ht-copy">Plain-language pain → drain → gain copy, 2 short paragraphs.</p>
                 <div class="ht-gallery">
                   <figure><img src="/tiles/<tool-slug>/slide1.jpg" alt="…" loading="lazy"><figcaption>Caption.</figcaption></figure>
                   <!-- one figure per reused storyboard slide -->
                 </div>
               </div>
             </div>
           </div>
           <!-- one .humanity-tile per tool -->
         </div>
       </div>
     </section>

   EXPAND/COLLAPSE: the row (.ht-row) is a real <button> — a
   keyboard-operable, ARIA-correct disclosure toggle for the
   .ht-desc panel beneath it. Collapsed by default; toggling
   flips aria-expanded and adds/removes .tile-open on the parent
   .humanity-tile, which the CSS below reads to reveal .ht-desc.
   Each tile tracks its own open state independently — the click
   handler (marketing-engine-gyro.js, shared/generic, loaded on
   every engine page) never touches any other tile. Do not fork a
   second copy of that logic per page.

   SHARED TOKENS (2026-07-24 unification pass, still authoritative):
   the custom properties below are the single source of truth for
   the "humanity tile" visual language and are ALSO consumed by
   the home page's engine-summary cards (.hcard / .hcard-* in
   home-engine-gyro.css, 16:10). home-engine-gyro.html links this
   file for that reason — don't remove the link or fork a second
   copy of these tokens, and don't repurpose the token NAMES below
   even though the accordion rewrite no longer uses every one of
   them directly on .humanity-tile itself.
   ============================================================ */
:root{
  --tile-plate-bg:linear-gradient(100deg,var(--aqua),var(--aqua-2));
  --tile-plate-shadow:0 10px 28px rgba(0,210,255,.38),0 2px 10px rgba(0,0,0,.35);
  --tile-plate-r:var(--r);
  --tile-plate-pad:11px 16px;
  --tile-name-weight:700;
  --tile-name-shadow:0 1px 0 rgba(255,255,255,.22);
  --tile-shadow:0 18px 40px rgba(0,0,0,.35);
  --tile-shadow-hover:0 24px 52px rgba(0,0,0,.45);
  --tile-border-hover:rgba(0,210,255,.4);
  --tile-hover-ring:0 0 0 1px rgba(0,210,255,.18);
  --tile-transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  --tile-lift:-4px;
}

.humanity-section{padding:64px 0 96px}
.humanity-section .container{max-width:var(--maxw)}

.humanity-head{max-width:60ch;margin:0 auto 40px;text-align:center}
.humanity-head h2{margin-top:.3em}
.humanity-head .lead{margin-top:10px}

/* ---------- accordion shell: single column, stacked rows ---------- */
.humanity-grid{
  display:flex;flex-direction:column;gap:14px;
  max-width:860px;margin:0 auto;
}

/* GLASS TILE — 2026-07-24: reuses the site's canonical glass-panel material
   (glass.css tokens: --glass/--blur/--glass-border/--edge/--curve/--rim/
   --inner-top — already loaded on every page that links this file) instead
   of a flat opaque --bg-1 panel, so the tile reads as frosted glass floating
   over the living-water backdrop, matching the rest of the glass estate. */
.humanity-tile{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--glass-border,rgba(255,255,255,.14));
  background:var(--glass,rgba(16,24,40,.30));
  backdrop-filter:blur(var(--blur,13px)) saturate(150%) brightness(1.04);
  -webkit-backdrop-filter:blur(var(--blur,13px)) saturate(150%) brightness(1.04);
  box-shadow:var(--tile-shadow),var(--edge),var(--curve),var(--rim),inset 0 9px 22px var(--inner-top,rgba(255,255,255,.05));
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.humanity-tile:hover,
.humanity-tile.tile-open{border-color:var(--tile-border-hover);
  box-shadow:var(--tile-shadow-hover),var(--tile-hover-ring),var(--edge),var(--curve),var(--rim),inset 0 9px 22px var(--inner-top,rgba(255,255,255,.05))}
/* MOUSE-REACTIVE TILT/LIGHT — the canonical glass.js runtime already drives
   --lx/--ly/--l-angle off pointermove (desktop) / device-tilt (mobile) at
   :root (see glass.js initParallax + site-glass.css's .tile::after, the
   proven pattern reused verbatim here rather than a one-off). This moving
   specular glint tracks the cursor across the whole page, so every tile
   catches ONE coherent light source as it moves — the site's "glass tilt". */
.humanity-tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(24% 2px at calc(50% + var(--lx,.5)*50%) 1px,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(42% 9px at calc(50% + var(--lx,.5)*50%) 1px,rgba(150,225,255,.4),rgba(150,225,255,0) 74%),
    radial-gradient(2px 24% at calc(100% - 1px) calc(50% - var(--ly,.72)*50%),rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(9px 40% at calc(100% - 1px) calc(50% - var(--ly,.72)*50%),rgba(150,225,255,.4),rgba(150,225,255,0) 74%),
    linear-gradient(var(--l-angle,217deg),rgba(255,255,255,.09),rgba(255,255,255,0) 15%);
}
.humanity-tile>*{position:relative;z-index:1}

/* ---------- the collapsed row: thumb + name/hook + chevron, full width ---------- */
.ht-row{
  display:flex;align-items:center;gap:18px;width:100%;
  padding:14px 20px;background:transparent;border:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent;
}
.ht-row:hover{background:rgba(255,255,255,.03)}
/* 2026-07-26 motion audit fix 1: minor gap — the accordion's own open/close
   already carries most of the "alive" feeling on tap (.tile-open shares
   .humanity-tile:hover's border/shadow rule below), but this row-tint itself
   never fired on touch. Slightly stronger than hover since a finger covers
   what it presses. */
.ht-row:active{background:rgba(255,255,255,.06)}
.ht-row:focus-visible{outline:2px solid var(--blue-2);outline-offset:-2px}

.ht-thumb{
  flex:0 0 auto;width:76px;height:76px;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(130% 130% at 28% 16%,var(--bg-3) 0%,var(--bg-1) 60%,#080a0f 100%);
}
.ht-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.ht-row-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ht-name{
  font-family:var(--disp);font-weight:var(--tile-name-weight);font-size:1.05rem;
  letter-spacing:-.01em;line-height:1.25;color:var(--ink);
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
}
.ht-hook{font-size:.86rem;line-height:1.4;color:#fff;font-weight:500}

/* optional ADD-ON badge (Communication Engine's two add-on tools) */
.ht-addon{
  padding:3px 10px;border-radius:var(--pill);
  background:rgba(0,210,255,.14);border:1px solid rgba(0,210,255,.36);
  font:700 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-2);
}

/* optional "hear/see it work" CUE chip — sits under the hook on the
   COLLAPSED row, so the invitation to play a real recording is visible
   BEFORE the tile is ever opened (the discoverability fix: a demo buried
   only inside an expanded panel goes unseen). Generic + reusable like
   .ht-addon above; a tile only gets one if its markup includes it. Lives
   as its own element (not appended to .ht-hook) because .ht-hook is
   hidden at <=640px below — the cue must survive on mobile, where this
   tile IS the primary experience (phones never render the WebGL gyro). */
.ht-cue{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;max-width:100%;
  margin-top:1px;padding:4px 12px 4px 9px;border-radius:var(--pill);
  background:rgba(0,210,255,.16);border:1px solid rgba(0,210,255,.4);
  font:600 .78rem/1.3 var(--body);color:var(--blue-2);
}
.ht-cue svg{flex:0 0 auto;width:10px;height:10px}
/* once the row is open, the demo is right there — the invitation is redundant */
.ht-row[aria-expanded="true"] .ht-cue{display:none}

.ht-chevron{flex:0 0 auto;width:18px;height:18px;color:var(--muted);transition:transform .3s var(--ease),color .3s var(--ease)}
.ht-row[aria-expanded="true"] .ht-chevron{transform:rotate(180deg);color:var(--blue-2)}

/* ---------- the expanded panel: pain/drain/gain copy + slide gallery ----------
   Collapsed by default, opened by the .ht-row toggle above (click handler in
   marketing-engine-gyro.js, shared/generic, loaded on every engine page).
   Independent per tile — opening one never touches another tile's state. */
.ht-desc{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--ease),opacity .35s var(--ease);
}
.humanity-tile.tile-open .ht-desc{max-height:2600px;opacity:1}

.ht-desc-inner{
  padding:2px 20px 26px;border-top:1px solid var(--line-2);margin:0 20px;
  padding-left:0;padding-right:0;
}
.ht-copy{margin:16px 0 0;font-size:.92rem;line-height:1.65;color:#fff;max-width:70ch}
.ht-copy + .ht-copy{margin-top:10px}

.ht-gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:12px;margin-top:20px;
}
.ht-gallery figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);background:var(--bg-2)}
.ht-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ht-gallery figcaption{padding:8px 10px 10px;font:600 .72rem/1.32 var(--body);color:#fff}

/* ---------- "hear it work" DEMO block — a real recording + its transcript,
   living inside the tile panel (not a rebuilt accordion, not a separate
   tile/modal). The tile explains the tool above; this section is mostly
   playback, not more explanation — one short setup line, then the audio
   and transcript carry it. A native <audio controls> element is used
   (keyboard support, screen-reader labelling, OS media-control integration
   for free) rather than a custom player. The transcript is real static
   text in the DOM — readable with no sound and no JS, and indexable. ---------- */
.ht-demo{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line-2)}
.ht-demo-setup{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:#fff;max-width:68ch}
.ht-demo-setup b{color:var(--blue-2);font-weight:700}

.ht-player{
  display:flex;flex-direction:column;gap:10px;
  padding:16px;border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
}
.ht-audio{width:100%;display:block}
/* native controls render at a fixed intrinsic height per browser; this just
   guarantees the surrounding box never pinches them below a touch-safe size */
.ht-audio{min-height:40px}
.ht-player-note{
  display:flex;align-items:center;gap:7px;margin:0;
  font:600 .74rem/1.3 var(--mono);letter-spacing:.02em;color:var(--muted);
}
.ht-player-note .dot{
  width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--blue-2);box-shadow:0 0 8px var(--blue-2);
}
.ht-player-fallback{margin:0;font-size:.84rem;color:var(--muted)}
.ht-player-fallback a{color:var(--blue-2)}

.ht-transcript{margin-top:18px}
.ht-transcript-label{
  margin:0 0 10px;font:700 .7rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.ht-transcript-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.htl{
  display:flex;gap:12px;padding:10px 12px;border-radius:var(--r);
  background:rgba(255,255,255,.03);border:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
/* progressive enhancement only: highlights the line current in playback.
   Inert (no class ever applied) with JS off or before playback starts —
   every line is already fully visible and readable either way. */
.htl.active{background:rgba(0,210,255,.10);border-color:rgba(0,210,255,.3)}
.htl-tag{
  flex:0 0 auto;width:112px;padding-top:1px;
  font:700 .68rem/1.4 var(--mono);letter-spacing:.03em;text-transform:uppercase;
  color:var(--blue-2);
}
.htl.caller .htl-tag{color:var(--warn,#ffb066)}
.htl-text{flex:1 1 auto;font-size:.88rem;line-height:1.55;color:#fff}

@media (max-width:640px){
  .ht-row{gap:12px;padding:12px 14px}
  .ht-thumb{width:58px;height:58px}
  .ht-name{font-size:.96rem}
  .ht-hook{display:none}
  .ht-cue{font-size:.74rem;padding:4px 10px 4px 8px}
  .ht-desc-inner{margin:0 14px}
  .ht-gallery{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:9px}
  .ht-demo{margin-top:18px;padding-top:16px}
  .ht-player{padding:13px}
  .htl{flex-wrap:wrap;gap:2px 12px}
  .htl-tag{width:auto}
}

@media (prefers-reduced-motion:reduce){
  .humanity-tile,.ht-desc,.ht-chevron{transition:none}
}
