/* ============================================================================
   Social Studio — modern surface layer
   ----------------------------------------------------------------------------
   Loaded LAST, on purpose. Everything here is an override of the base sheet in
   index.html at equal-or-higher specificity, so the base stays readable and this
   file can be removed in one line if a look needs rolling back.

   The house style: near-black depth, one thin lit edge per surface, glass over
   flat fills, and motion that only plays when someone is actually looking at it.
   Three rules that are not negotiable:
     1. prefers-reduced-motion turns every transform and autoplay OFF.
     2. Light mode is a first-class theme, not an afterthought — every token
        used here is redefined under [data-mode="light"].
     3. Nothing here may change layout geometry (widths, grid tracks, padding
        that affects flow). It is paint, depth and motion only, so it cannot
        break a view it was never tested against.
   ========================================================================== */

:root{
  /* Depth ramp — each step is a surface that sits "closer" to the viewer. */
  --d1:0 1px 2px rgba(0,0,0,.4);
  --d2:0 4px 16px -4px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
  --d3:0 18px 48px -18px rgba(0,0,0,.75), 0 4px 14px -6px rgba(0,0,0,.5);
  --d4:0 40px 90px -30px rgba(0,0,0,.85), 0 10px 30px -12px rgba(0,0,0,.6);
  /* The lit top edge that sells a surface as a physical panel. */
  --edge:inset 0 1px 0 rgba(255,255,255,.07);
  --edge-strong:inset 0 1px 0 rgba(255,255,255,.12);
  /* Accent spill, used sparingly — on focus and on the element under the cursor. */
  --spill:0 0 0 1px rgba(34,211,238,.28), 0 20px 60px -24px rgba(34,211,238,.45);
  --spill-2:0 0 0 1px rgba(168,85,247,.28), 0 20px 60px -24px rgba(168,85,247,.45);
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r-lg:20px; --r-xl:26px;
}
:root[data-mode="light"]{
  --d1:0 1px 2px rgba(20,40,90,.06);
  --d2:0 4px 14px -4px rgba(20,40,90,.10), 0 1px 3px rgba(20,40,90,.06);
  --d3:0 16px 40px -16px rgba(20,40,90,.18), 0 3px 10px -4px rgba(20,40,90,.10);
  --d4:0 34px 70px -26px rgba(20,40,90,.24), 0 8px 24px -10px rgba(20,40,90,.14);
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
  --edge-strong:inset 0 1px 0 #fff;
  --spill:0 0 0 1px rgba(8,145,178,.3), 0 18px 50px -24px rgba(8,145,178,.35);
  --spill-2:0 0 0 1px rgba(147,51,234,.3), 0 18px 50px -24px rgba(147,51,234,.35);
}

/* ---------- ambient: depth behind everything -------------------------------
   Three layers: a deeper base, two slow aurora washes, and a fine grain that
   stops the large flat areas from banding on wide gamut displays.            */
body{
  background:#04060d;
  background-image:
    radial-gradient(1100px 620px at 88% -10%, rgba(168,85,247,.13), transparent 62%),
    radial-gradient(900px 560px at -8% 10%,  rgba(34,211,238,.11), transparent 58%),
    radial-gradient(700px 700px at 50% 120%, rgba(99,102,241,.10), transparent 60%);
}
:root[data-mode="light"] body{
  background:#fbfcfe;
  background-image:
    radial-gradient(1000px 560px at 90% -12%, rgba(147,51,234,.07), transparent 60%),
    radial-gradient(820px 520px at -6% 8%,   rgba(8,145,178,.06),  transparent 58%);
}
/* Grain. A data-URI so it costs one paint and no request. */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-mode="light"] body::after{opacity:.02}
.app{position:relative;z-index:1}

/* ---------- surfaces -------------------------------------------------------
   A card is glass: a translucent fill, one lit top edge, a soft drop. The
   gradient border is painted with a masked pseudo-element because border-image
   cannot follow a border-radius.                                             */
.card{
  background:linear-gradient(180deg, rgba(23,31,52,.72), rgba(11,16,28,.66));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--d2), var(--edge);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  position:relative;
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
:root[data-mode="light"] .card{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,251,254,.86));
  box-shadow:var(--d2), var(--edge);
}
/* The thin lit rim, brightest at the top-left where the light is. */
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%, rgba(255,255,255,.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.9;
}
:root[data-mode="light"] .card::before{
  background:linear-gradient(145deg, rgba(20,40,90,.10), rgba(20,40,90,0) 46%, rgba(20,40,90,.04));
}

/* Raise the panels that are genuinely interactive, not every box on the page. */
.card.is-raised:hover, .tile:hover, .aff-tile:hover, .etile:hover{
  box-shadow:var(--d3), var(--edge-strong);
  border-color:var(--border-2);
}

/* ---------- 3D: tilt + specular -------------------------------------------
   Applied by studio-modern.js, which sets --mx/--my (pointer position, 0..1)
   and --rx/--ry (degrees). CSS does the painting so the JS stays trivial.    */
.tilt{
  transform-style:preserve-3d;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  will-change:transform;
}
.tilt.is-tilting{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0) scale(1.012);
  transition:transform .09s linear, box-shadow .45s var(--ease-out);
}
/* The sheen that tracks the cursor — what actually reads as "3D". */
.tilt-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%),
             rgba(255,255,255,.16), rgba(255,255,255,.05) 38%, transparent 62%);
  mix-blend-mode:soft-light;
}
.tilt.is-tilting .tilt-sheen{opacity:1}
:root[data-mode="light"] .tilt-sheen{
  background:radial-gradient(420px circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%),
             rgba(255,255,255,.85), rgba(255,255,255,.3) 38%, transparent 62%);
  mix-blend-mode:normal;
}

/* ---------- motion cards ---------------------------------------------------
   A .mcard is a poster frame that becomes video. The <video> only plays while
   it is on screen AND hovered (studio-modern.js), so a grid of twenty of them
   costs one decode, not twenty.                                              */
.mcard{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--border);
  box-shadow:var(--d2), var(--edge);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.mcard:hover{box-shadow:var(--d4), var(--edge-strong);border-color:var(--border-2)}
.mcard-media{position:absolute;inset:0;z-index:0}
.mcard-media img,.mcard-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 1.1s var(--ease-out),opacity .5s var(--ease);
}
.mcard:hover .mcard-media img,.mcard:hover .mcard-media video{transform:scale(1.09)}
/* Video sits over its own poster and fades in once it has frames to show, so a
   slow network shows a still image rather than a black rectangle. */
.mcard-media video{position:absolute;inset:0;opacity:0}
.mcard-media video.is-ready{opacity:1}
/* A clip that loads lazily (data-src, v2.77) shows its poster straight away: the element paints
   the poster until it has a frame, so the card is never an empty shimmer while it waits. */
.mcard-media video[poster]{opacity:1}
/* Scrim: strong enough for white text at the bottom, invisible at the top. */
.mcard::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(4,6,13,.92) 0%, rgba(4,6,13,.55) 26%, rgba(4,6,13,0) 58%);
}
.mcard-body{position:relative;z-index:2;padding:16px 16px 15px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.mcard-title{font-family:var(--disp);font-weight:700;color:#fff;font-size:15px;line-height:1.25;letter-spacing:-.01em}
.mcard-sub{font-size:12px;color:rgba(255,255,255,.72);margin-top:4px}
/* The row that rises into view on hover — hidden from AT only while collapsed
   is wrong, so it stays in the tree and only moves. */
.mcard-reveal{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--ease-out), opacity .3s var(--ease), margin-top .45s var(--ease-out);
}
.mcard:hover .mcard-reveal,.mcard:focus-within .mcard-reveal{max-height:96px;opacity:1;margin-top:11px}

/* A card whose video has not decoded a frame yet must not be a black hole. The media well
   carries a quiet shimmer, and the video fades in once it genuinely has something to show.
   The storefront's largest clip is ~16MB, so this gap is real, not theoretical. */
.hfs-scope .hfs-cardmedia,.hfs-scope .hfs-railcard,.mcard-media{
  background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 48%,var(--surface-2) 62%);
  background-size:220% 100%;animation:skel 1.6s ease-in-out infinite;
}
/* Once any media has painted, stop the shimmer under it. */
.hfs-scope .hfs-cardmedia:has(img),.hfs-scope .hfs-cardmedia:has(video.is-ready),
.hfs-scope .hfs-railcard:has(video.is-ready),.hfs-scope .hfs-railcard:has(img),
.mcard-media:has(img),.mcard-media:has(video.is-ready),.mcard-media:has(video[poster]){animation:none;background:var(--surface-2)}
.hfs-scope .hfs-cardmedia video,.hfs-scope .hfs-railcard video{
  opacity:0;transition:opacity .45s var(--ease);
}
.hfs-scope .hfs-cardmedia video.is-ready,.hfs-scope .hfs-railcard video.is-ready{opacity:1}
/* A file this browser cannot decode is taken out of the layout entirely, so whatever the
   card puts behind it is what people see. */
.mcard-media video.is-undecodable,.hfs-scope .hfs-cardmedia video.is-undecodable,
.hfs-scope .hfs-railcard video.is-undecodable{display:none}

/* ---------- display type ---------------------------------------------------
   Tighter tracking and heavier weight at large sizes; the base sheet's sizes
   are left alone so nothing reflows.                                         */
h1,h2,.hfs-title,.hero-title{letter-spacing:-.022em}
.display-xl{
  font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  /* The reference runs h1 at 72px and its display style at 98px. Ours topped out at 58px,
     which is the other half of why the pages read as quiet next to it. */
  font-size:clamp(40px,6.4vw,88px);
  background:linear-gradient(180deg,var(--text),color-mix(in srgb,var(--text) 62%, transparent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}

/* ---------- reveal on scroll ----------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- the AI Studio storefront --------------------------------------
   The one surface already built around motion; it gets the full treatment.   */
.hfs-scope .hfs-hero{
  border-radius:var(--r-xl);box-shadow:var(--d4), var(--edge);border-color:var(--border-2);
}
.hfs-scope .hfs-title{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;font-weight:800}
.hfs-scope .hfs-badge{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}
.hfs-scope .hfs-railcard{
  border-radius:18px;box-shadow:var(--d2), var(--edge);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s var(--ease);
}
.hfs-scope .hfs-railcard:hover{transform:translateY(-6px);box-shadow:var(--d4), var(--edge-strong)}
.hfs-scope .hfs-railmedia{transition:transform 1.1s var(--ease-out)}
.hfs-scope .hfs-railcard:hover .hfs-railmedia{transform:scale(1.08)}
.hfs-scope .hfs-card{
  border-radius:var(--r-lg);box-shadow:var(--d2), var(--edge);
  background:linear-gradient(180deg, rgba(23,31,52,.7), rgba(11,16,28,.7));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s var(--ease);
}
:root[data-mode="light"] .hfs-scope .hfs-card{background:linear-gradient(180deg,#fff,#fafbfe)}
.hfs-scope .hfs-card:hover{transform:translateY(-5px);box-shadow:var(--d4), var(--edge-strong);border-color:var(--border-2)}
.hfs-scope .hfs-cardmedia img,.hfs-scope .hfs-cardmedia video{transition:transform 1.1s var(--ease-out)}
.hfs-scope .hfs-card:hover .hfs-cardmedia img,.hfs-scope .hfs-card:hover .hfs-cardmedia video{transform:scale(1.07)}
.hfs-scope .hfs-res,.hfs-scope .hfs-own{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hfs-scope .hfs-buy{
  background-image:linear-gradient(135deg,var(--accent),var(--accent-3));
  box-shadow:0 8px 24px -10px rgba(34,211,238,.6);
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), filter .2s var(--ease);
}
.hfs-scope .hfs-buy:hover{transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(34,211,238,.75)}
.hfs-scope .hfs-all{border-radius:var(--r-xl);box-shadow:var(--d4), var(--edge)}
.hfs-scope .hfs-tab{transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.hfs-scope .hfs-tab:hover{transform:translateY(-1px)}

/* ---------- controls -------------------------------------------------------
   Buttons and inputs get the same physical treatment so they belong to the
   same world as the panels.                                                  */
.btn,.btn-ghost,.hfs-try{
  border-radius:12px;
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.btn:active,.btn-ghost:active,.hfs-buy:active,.hfs-try:active{transform:translateY(1px)}
.inp,input[type="text"],input[type="email"],input[type="password"],textarea,select.inp{
  border-radius:12px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.inp:focus,input:focus-visible,textarea:focus,select.inp:focus{box-shadow:var(--spill);outline:none}
/* Keyboard users get the same ring everywhere, and it must never be removed. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Sidebar: glass, and the active row lit from its left edge. */
.sidebar{
  background:linear-gradient(180deg, rgba(10,14,26,.82), rgba(6,9,18,.9));
  backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
}
:root[data-mode="light"] .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,250,253,.95))}
.nav a{transition:background .25s var(--ease), color .2s var(--ease), transform .2s var(--ease)}
.nav a:hover{transform:translateX(2px)}
.nav a.on::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px rgba(34,211,238,.7);
}
.topbar{backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%)}

/* ---------- skeletons, for anything that waits --------------------------- */
.skel{
  background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 48%,var(--surface-2) 62%);
  background-size:220% 100%;animation:skel 1.4s ease-in-out infinite;border-radius:10px;
}
@keyframes skel{0%{background-position:150% 0}100%{background-position:-50% 0}}

/* ---------- reduced motion is absolute ------------------------------------
   Someone who asks the OS for less motion gets a still, flat, fully usable
   site: no tilt, no scale, no autoplay, no shimmer.                          */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .tilt,.tilt.is-tilting{transform:none!important}
  .tilt-sheen{display:none}
  .mcard:hover .mcard-media img,.mcard:hover .mcard-media video,
  .hfs-scope .hfs-card:hover .hfs-cardmedia img,.hfs-scope .hfs-card:hover .hfs-cardmedia video,
  .hfs-scope .hfs-railcard:hover .hfs-railmedia{transform:none!important}
  .hfs-scope .hfs-card:hover,.hfs-scope .hfs-railcard:hover,.nav a:hover{transform:none!important}
  .reveal{opacity:1;transform:none}
  .skel,.hfs-scope .hfs-cardmedia,.hfs-scope .hfs-railcard,.mcard-media{animation:none}
  .hfs-scope .hfs-cardmedia video,.hfs-scope .hfs-railcard video{opacity:1}
}

/* Narrow screens: drop the expensive blurs, keep the depth. A phone GPU spends
   real battery on a full-page backdrop-filter. */
@media (max-width:760px){
  .card,.hfs-scope .hfs-card{backdrop-filter:none;-webkit-backdrop-filter:none}
  .card{background:var(--surface);border-radius:16px}
  :root[data-mode="light"] .card{background:#fff}
}

/* ============================================================================
   Landing primitives (v2.8) — rails, typographic cards, segmented tabs, motion
   motifs. Appended as one block so the file merges cleanly; every colour is
   redefined for [data-mode="light"] and every animation is off under
   prefers-reduced-motion, same as the rest of this sheet.
   ========================================================================== */

/* ---------- aspect boxes: media cards never shift layout while they load --- */
.ar-16x9{aspect-ratio:16/9}.ar-16x10{aspect-ratio:16/10}.ar-4x5{aspect-ratio:4/5}.ar-1x1{aspect-ratio:1}

/* ---------- horizontal rail -------------------------------------------------
   Scroll-snap, hidden scrollbar, bleeds to the page gutter so the last card
   peeks in from the edge and reads as "there is more".                       */
.rail{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--gutter,22px) 18px;margin:0 calc(-1 * var(--gutter,22px));
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:var(--gutter,22px);
}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 min(80vw,420px);scroll-snap-align:start}
.rail-nav{display:flex;gap:8px;flex:none}
.rail-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0;
  box-shadow:var(--d1),var(--edge);transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.rail-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.rail-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.rail-nav{display:none}}

/* ---------- card furniture ------------------------------------------------ */
/* Anchors as cards: the whole surface is the link, so touch needs no hover. */
a.mcard,a.card{color:inherit;text-decoration:none;display:block}
.mcard-top{position:absolute;top:12px;inset-inline-start:12px;inset-inline-end:12px;z-index:2;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.mcard-tag{
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  padding:6px 9px;border-radius:999px;color:#fff;background:rgba(4,6,13,.55);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.mcard-tag.is-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101c;border-color:transparent}
.mcard-cta{font-size:12.5px;font-weight:800;color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips .chip{
  font-size:11px;font-weight:700;line-height:1;padding:5px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.88);background:rgba(255,255,255,.1);
}
.btn-sm{padding:8px 13px;font-size:13px}

/* ---------- typographic card ------------------------------------------------
   A model with no media on disk still gets a real card: a ghosted monogram, a
   coloured wash keyed to what it makes, and theme-coloured text (no scrim). */
.tcard{background:var(--surface)}
.tcard::after{display:none}
.tcard .mcard-title{color:var(--text)}
.tcard .mcard-sub{color:var(--muted)}
.tcard .mcard-tag{background:var(--surface-2);color:var(--muted);border-color:var(--border-2)}
.tcard .mcard-tag.is-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101c;border-color:transparent}
.tcard .chips .chip{border-color:var(--border-2);color:var(--muted);background:var(--surface-2)}
.tcard-wash{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,var(--wash-a),transparent 58%),
             radial-gradient(90% 80% at 0% 100%,var(--wash-b),transparent 58%);
}
.tcard[data-surface="image"]{--wash-a:rgba(34,211,238,.26);--wash-b:rgba(99,102,241,.22)}
.tcard[data-surface="video"]{--wash-a:rgba(168,85,247,.28);--wash-b:rgba(236,72,153,.16)}
.tcard[data-surface="audio"]{--wash-a:rgba(52,211,153,.24);--wash-b:rgba(34,211,238,.18)}
:root[data-mode="light"] .tcard{background:#fff}
:root[data-mode="light"] .tcard[data-surface="image"]{--wash-a:rgba(8,145,178,.14);--wash-b:rgba(79,70,229,.10)}
:root[data-mode="light"] .tcard[data-surface="video"]{--wash-a:rgba(147,51,234,.14);--wash-b:rgba(219,39,119,.08)}
:root[data-mode="light"] .tcard[data-surface="audio"]{--wash-a:rgba(5,150,105,.14);--wash-b:rgba(8,145,178,.10)}
.tcard-mono{
  position:absolute;inset-inline-end:-4px;top:-10px;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--disp);font-weight:800;font-size:clamp(64px,9vw,104px);line-height:1;letter-spacing:-.06em;
  color:var(--text);opacity:.06;
}
:root[data-mode="light"] .tcard-mono{opacity:.05}

/* ---------- grids ---------------------------------------------------------- */
/* Media cards are portrait and large, because that is what gives a gallery its presence: at a
   1440px viewport the reference sits at roughly 274x487, a 9:16 frame ~270px wide. Ours were
   224x236 — half the height — which read as thumbnails rather than as work. */
.model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
/* Catalogue cards size to their text, never the other way round: a fixed aspect box would
   push a three-line blurb up under the vendor tags. The media stays absolutely positioned,
   so a video card is simply as tall as its neighbours in the row (grid stretches them). */
.model-grid .mcard{aspect-ratio:9/16;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
.model-grid .mcard-body{height:auto;padding-top:64px}
.model-grid .mcard--lead{grid-column:span 2;aspect-ratio:16/9;min-height:0}
.fx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:960px){.fx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .model-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .model-grid .mcard{aspect-ratio:9/16;min-height:0}
  .model-grid .mcard-body{padding:48px 11px 10px}
  .model-grid .mcard-title{font-size:13.5px}
  .model-grid .mcard-sub{font-size:11.5px}
  .model-grid .chips .chip{font-size:10px;padding:4px 6px}
  .model-grid .mcard-top{top:8px;left:8px;right:8px}
  .model-grid .mcard-tag{font-size:9.5px;padding:5px 7px}
  .fx-grid{gap:10px}
}

/* ---------- segmented tabs -------------------------------------------------- */
.segtabs{
  display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:24px;
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--d1),var(--edge);
}
.segtabs button{
  font:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;border:0;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background .25s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.segtabs button:hover{color:var(--text)}
.segtabs button[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04101c}
.segtabs button b{font-weight:800;opacity:.72;margin-inline-start:5px}
.segtabs button[aria-pressed="true"] b{opacity:.85}

/* ---------- motion motifs ---------------------------------------------------
   CSS-only illustrations for tools that have no media on disk. They move, but
   they are decoration: everything meaningful is in the text beside them.      */
.wave{display:flex;align-items:center;gap:3px;height:34px;margin-bottom:10px}
.wave i{display:block;width:4px;height:100%;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent-2));
  transform:scaleY(.35);transform-origin:center;animation:wave 1.5s ease-in-out infinite}
.wave i:nth-child(2n){animation-delay:-.35s}.wave i:nth-child(3n){animation-delay:-.7s}
.wave i:nth-child(4n){animation-delay:-1.05s}.wave i:nth-child(5n){animation-delay:-.2s}
@keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

.fxm{position:relative;height:112px;border-radius:14px;overflow:hidden;margin-bottom:14px;
  background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--edge)}
.fxm i{position:absolute;display:block;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.9}
.fxm-cam i{inset:16px 22px;border-radius:10px;background:none;border:2px solid var(--accent);animation:fxcam 4.5s ease-in-out infinite}
.fxm-cam i::after{content:"";position:absolute;inset-inline-start:28%;top:30%;width:44%;height:40%;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.55}
@keyframes fxcam{0%,100%{transform:scale(1) translateX(0)}50%{transform:scale(1.16) translateX(5%)}}
.fxm-xfer i:first-child{left:14%;top:28%;width:26%;height:44%;animation:fxbob 2.2s ease-in-out infinite}
.fxm-xfer i:last-child{right:14%;top:28%;width:26%;height:44%;opacity:.5;animation:fxbob 2.2s ease-in-out infinite;animation-delay:-.3s}
@keyframes fxbob{50%{transform:translateY(-9px) rotate(4deg)}}
.fxm-fl i:first-child{left:10%;top:28%;width:22%;height:44%}
.fxm-fl i:nth-child(2){right:10%;top:28%;width:22%;height:44%;opacity:.5}
.fxm-fl i:last-child{left:35%;top:28%;width:30%;height:44%;background:none;border:2px dashed var(--accent);opacity:.8;animation:fxfill 3s ease-in-out infinite}
@keyframes fxfill{0%{clip-path:inset(0 100% 0 0)}55%,100%{clip-path:inset(0 0 0 0)}}
.fxm-ext i{left:10%;top:38%;height:24%;width:38%;animation:fxext 3s ease-in-out infinite}
@keyframes fxext{0%{width:38%}60%,100%{width:80%}}
.fxm-edit i:first-child{left:18%;top:24%;width:64%;height:52%;background:none;border:2px solid var(--accent);opacity:.8}
.fxm-edit i:last-child{left:40%;top:40%;width:20%;height:20%;animation:fxedit 2.6s ease-in-out infinite}
@keyframes fxedit{50%{transform:translate(40%,-30%) scale(1.35);border-radius:50%}}
.fxm-audio{display:grid;place-items:center}
.fxm-audio .wave{margin:0;height:44px}
.fxm-multi i{top:26%;width:22%;height:48%;opacity:.35;animation:fxflash 3s ease-in-out infinite}
.fxm-multi i:nth-child(1){left:11%}.fxm-multi i:nth-child(2){left:39%;animation-delay:1s}.fxm-multi i:nth-child(3){left:67%;animation-delay:2s}
@keyframes fxflash{0%,70%,100%{opacity:.35;transform:scale(1)}15%{opacity:1;transform:scale(1.06)}}
.fxm-ref i{left:37%;top:22%;width:26%;height:56%;transform-origin:50% 120%}
.fxm-ref i:nth-child(1){transform:rotate(-14deg);opacity:.5;animation:fxfan1 3.4s ease-in-out infinite}
.fxm-ref i:nth-child(2){opacity:.75}
.fxm-ref i:nth-child(3){transform:rotate(14deg);animation:fxfan2 3.4s ease-in-out infinite}
@keyframes fxfan1{50%{transform:rotate(-22deg)}}
@keyframes fxfan2{50%{transform:rotate(22deg)}}

/* reduced motion: motifs freeze at their resting frame; nothing else changes */
@media (prefers-reduced-motion:reduce){
  .wave i,.fxm i,.fxm i::after{animation:none!important}
  .wave i{transform:scaleY(.6)}
  .fxm-fl i:last-child{clip-path:none}
  .fxm-ext i{width:70%}
}

/* ── VISUAL-POP: bring the newest surfaces onto the depth ramp ────────────────
   The token system above (--d1..--d4, --edge, --spill, --ease, --r-lg) already
   existed and already carries light-mode overrides. The landing tool grid and the
   dashboard action band, added in v2.34, were written with a flat 1px border and
   never used it — so two of the first things anyone sees were the two flattest
   things on the site. This puts them on the same ramp as everything else, which
   is what makes the set look like one product rather than a pile of panels. */

.tg-cell,
.nb-card{
  border-radius:16px;
  box-shadow:var(--d2), var(--edge);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%),
    var(--card2, rgba(255,255,255,.02));
  transition:box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.tg-cell:hover,
.nb-card:hover{
  box-shadow:var(--d3), var(--edge-strong);
  transform:translateY(-2px);
}
/* Keyboard users get the same affordance as the cursor, which the hover-only
   version did not give them. */
.tg-cell:focus-visible,
.nb-card:focus-visible{
  outline:none;
  box-shadow:var(--d3), var(--edge-strong), var(--spill);
}
.tg-cell b,
.nb-card b{letter-spacing:-.01em}

/* Bolder display hierarchy on the landing section heads — the reference leads with
   type, and ours was set at the same weight as body copy. */
.tool-grid-sec .sec-h{font-weight:750;letter-spacing:-.02em}

/* Motion is decoration here: the depth and the lit edge carry the meaning, so the
   movement is what goes when it is not wanted. */
@media (prefers-reduced-motion: reduce){
  .tg-cell,.nb-card{transition:none}
  .tg-cell:hover,.nb-card:hover{transform:none}
}