/* ============================================================
   SentientEye — product page component kit
   Loaded after style.css, only on product-*.html pages.
   Depends on the tokens declared in style.css :root
   ============================================================ */

/* Product pages carry a sticky sub-navigation, which does the orientation job
   the stage caption does elsewhere — and the two collide at the bottom edge. */
.stagemark{ display:none; }

/* ── breadcrumbs ──────────────────────────────────────────── */
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-bottom:1.2rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.crumbs a{ color:var(--ink-3); transition:color .25s; }
.crumbs a:hover{ color:var(--bronze-dk); }
.crumbs i{ font-style:normal; opacity:.5; }
.crumbs b{ color:var(--ink-2); font-weight:500; }

/* ── product hero ─────────────────────────────────────────── */
.phero{
  position:relative; padding-block:calc(var(--nav-h) + clamp(2rem,5vw,4rem)) clamp(2.5rem,5vw,4.5rem);
}
.phero__grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,4vw,4rem); align-items:center;
}
.phero__code{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1rem; padding:.34rem .8rem;
  border-radius:100px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bronze-dk);
  border:1px solid rgba(169,122,69,.3); background:rgba(169,122,69,.09);
}
.phero h1{
  font-size:clamp(2.15rem,4.6vw,3.7rem); font-weight:600; letter-spacing:-.028em; margin-bottom:1rem;
}
.phero h1 em{ font-style:italic; color:var(--bronze-dk); }
.phero__lede{ color:var(--ink-2); font-size:clamp(1rem,1.3vw,1.14rem); max-width:52ch; }
.phero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }
.phero__media{ position:relative; }

.phero__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:2rem; overflow:hidden; border-radius:var(--r-m);
  border:1px solid var(--glass-line); background:var(--glass);
  backdrop-filter:blur(18px) saturate(135%); box-shadow:var(--sh-s);
}
.phero__facts div{ padding:.95rem 1.1rem; border-left:1px solid var(--line); }
.phero__facts div:first-child{ border-left:0; }
.phero__facts b{
  display:block; font-family:var(--f-display); font-size:1.35rem; font-weight:600;
  letter-spacing:-.03em; color:var(--bronze-dk);
}
.phero__facts span{ font-size:.72rem; color:var(--ink-3); }

/* the hero device / mockup frame */
.device{
  position:relative; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--glass-line); background:var(--glass-2);
  backdrop-filter:blur(18px) saturate(135%); box-shadow:var(--sh-l);
  transition:transform .6s var(--ease-out);
}
.device__bar{
  display:flex; align-items:center; gap:.5rem; padding:.6rem .85rem;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.55);
}
.device__dots{ display:flex; gap:.32rem; }
.device__dots i{ width:8px; height:8px; border-radius:50%; background:var(--sand-2); }
.device__dots i:first-child{ background:#D9A08A; }
.device__dots i:nth-child(2){ background:#E3C892; }
.device__dots i:nth-child(3){ background:#9DBFAF; }
.device__title{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.device__live{
  margin-left:auto; display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--f-mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal);
}
.device__live i{ width:5px; height:5px; border-radius:50%; background:var(--teal); animation:pulse 2.4s infinite; }
.device__body{ padding:clamp(.9rem,1.6vw,1.3rem); }
.device--dark{ background:#171310; border-color:rgba(34,31,26,.55); }
.device--dark .device__bar{ background:rgba(255,255,255,.05); border-bottom-color:rgba(255,255,255,.08); }
.device--dark .device__title{ color:#a99c8a; }

/* ── sticky product sub-navigation ────────────────────────── */
.subnav{
  position:sticky; top:calc(var(--nav-h) - 12px); z-index:50;
  padding-block:.7rem; margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.subnav__inner{
  display:flex; align-items:center; gap:.35rem; overflow-x:auto; scrollbar-width:none;
  padding:.4rem; border-radius:100px; border:1px solid var(--glass-line);
  background:rgba(251,247,240,.82); backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--sh-s);
}
.subnav__inner::-webkit-scrollbar{ display:none; }
.subnav a{
  flex:none; padding:.45rem .95rem; border-radius:100px; font-size:.83rem; color:var(--ink-2);
  white-space:nowrap; transition:background .3s, color .3s;
}
.subnav a:hover{ background:rgba(255,255,255,.8); color:var(--ink); }
.subnav a[aria-current="page"]{ background:var(--ink); color:var(--paper); }

/* ── section band ─────────────────────────────────────────── */
.band{ position:relative; padding-block:var(--sec-y); }
.band--tint{ background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); }
.band--sand{ background:linear-gradient(180deg, rgba(237,227,212,.55), rgba(255,255,255,.25)); }
.band__head{ max-width:64ch; margin-bottom:clamp(2rem,4vw,3.4rem); }
.band__head .h2{ margin-bottom:.9rem; }
.band__head p{ color:var(--ink-2); font-size:1.04em; }

/* ── pain points ──────────────────────────────────────────── */
.pains{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.pain{
  position:relative; padding:clamp(1.3rem,2vw,1.8rem); border-radius:var(--r-m);
  border:1px solid var(--line); background:rgba(255,255,255,.45);
  backdrop-filter:blur(10px);
}
.pain__n{
  display:block; margin-bottom:.8rem; font-family:var(--f-mono); font-size:.65rem;
  letter-spacing:.16em; color:var(--rust);
}
.pain h3{ font-size:1.05rem; margin-bottom:.45rem; }
.pain p{ color:var(--ink-2); font-size:.9rem; }

/* ── alternating feature rows ─────────────────────────────── */
.frow{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,4.5vw,4.5rem); align-items:center;
  padding-block:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--line);
}
.frow:first-of-type{ border-top:0; }
.frow--flip .frow__media{ order:-1; }
.frow__copy .chip{ margin-bottom:1rem; }
.frow__copy h3{ font-size:clamp(1.4rem,2.4vw,2rem); margin-bottom:.8rem; }
.frow__copy > p{ color:var(--ink-2); }
.frow__copy .ticks{ margin-top:1.2rem; }
.frow__note{
  margin-top:1.3rem; padding:.9rem 1.1rem; border-left:2px solid var(--bronze);
  background:rgba(169,122,69,.07); border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:.88rem; color:var(--ink-2);
}
.frow__note b{ color:var(--ink); font-weight:600; }

/* ── figure / image frame ─────────────────────────────────── */
.figure{
  position:relative; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--glass-line); background:var(--glass);
  backdrop-filter:blur(16px) saturate(130%); box-shadow:var(--sh-m);
}
.figure img,.figure svg{ display:block; width:100%; height:auto; }
.figure__pad{ padding:clamp(1rem,2.2vw,1.8rem); }
.figure figcaption{
  padding:.7rem 1.1rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); background:rgba(255,255,255,.5);
}
.figure--plain{ border:0; background:none; box-shadow:none; backdrop-filter:none; }

/* ── animated SVG diagrams ────────────────────────────────── */
.diagram{ width:100%; }
.diagram svg{ width:100%; height:auto; overflow:visible; }
.diagram .dg-box{ fill:rgba(255,255,255,.72); stroke:rgba(34,31,26,.16); stroke-width:1; }
.diagram .dg-box--accent{ fill:rgba(169,122,69,.10); stroke:rgba(169,122,69,.38); }
.diagram .dg-box--teal{ fill:rgba(46,92,85,.09); stroke:rgba(46,92,85,.34); }
.diagram .dg-box--navy{ fill:rgba(35,58,82,.08); stroke:rgba(35,58,82,.3); }
.diagram .dg-label{
  font-family:'Inter',sans-serif; font-size:11px; fill:var(--ink); font-weight:500;
}
.diagram .dg-sub{ font-family:'JetBrains Mono',monospace; font-size:8px; fill:var(--ink-3); letter-spacing:.08em; }
.diagram .dg-title{ font-family:'JetBrains Mono',monospace; font-size:8.5px; fill:var(--bronze-dk); letter-spacing:.14em; }
.diagram .dg-line{ fill:none; stroke:rgba(34,31,26,.28); stroke-width:1.1; }
.diagram .dg-line--accent{ stroke:var(--bronze); stroke-width:1.3; }

/* scroll-drawn strokes */
.diagram [data-draw]{
  stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1.6s var(--ease-out);
  transition-delay:var(--dd,0ms);
}
.diagram.is-drawn [data-draw]{ stroke-dashoffset:0; }
/* travelling packet along a wire */
.diagram .dg-flow{
  fill:none; stroke:var(--bronze); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:.06 .94; animation:dgflow 3.2s linear infinite;
}
@keyframes dgflow{ to{ stroke-dashoffset:-1; } }
.diagram .dg-node{ fill:var(--bronze); }
.diagram .dg-pulse{ transform-origin:center; animation:dgpulse 2.6s var(--ease) infinite; }
@keyframes dgpulse{ 0%,100%{ opacity:.25; r:3; } 50%{ opacity:1; r:5; } }

/* ── tabs ─────────────────────────────────────────────────── */
.tabs__list{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.5rem;
  border-bottom:1px solid var(--line); padding-bottom:.9rem;
}
.tabs__tab{
  padding:.5rem 1rem; border-radius:100px; cursor:pointer; font-size:.86rem;
  border:1px solid var(--line-2); background:rgba(255,255,255,.6); color:var(--ink-2);
  transition:all .3s var(--ease-out);
}
.tabs__tab:hover{ border-color:var(--ink); color:var(--ink); }
.tabs__tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.tabs__panel[hidden]{ display:none; }
.tabs__panel{ animation:fadein .5s var(--ease-out); }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px); } }
.tabs__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; }

/* ── module / capability cards ────────────────────────────── */
.mods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.9rem; }
.mod{
  padding:1.2rem 1.3rem; border-radius:var(--r-m); border:1px solid var(--line);
  background:rgba(255,255,255,.55); transition:transform .4s var(--ease-out), box-shadow .4s, background .4s;
}
.mod:hover{ transform:translateY(-4px); box-shadow:var(--sh-s); background:rgba(255,255,255,.8); }
.mod h4,.mod h3{ font-size:.98rem; margin-bottom:.35rem; font-family:var(--f-display); font-weight:600; }
.mod p{ font-size:.85rem; color:var(--ink-2); }
.mod__tag{
  display:inline-block; margin-bottom:.6rem; font-family:var(--f-mono); font-size:.54rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
}

/* ── step sequencer ───────────────────────────────────────── */
.seq{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.5rem,3.5vw,3.5rem); align-items:start; }
.seq__steps{ display:grid; gap:.5rem; }
.seq__step{
  display:grid; grid-template-columns:34px 1fr; gap:.85rem; align-items:start; cursor:pointer;
  padding:.9rem 1rem; border-radius:var(--r-m); border:1px solid transparent; background:transparent;
  text-align:left; transition:background .35s, border-color .35s;
}
.seq__step:hover{ background:rgba(255,255,255,.5); }
.seq__step[aria-selected="true"]{
  background:var(--glass-2); border-color:var(--glass-line); box-shadow:var(--sh-s);
}
.seq__n{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--f-mono); font-size:.65rem; color:var(--ink-3);
  border:1px solid var(--line-2); background:rgba(255,255,255,.7); transition:all .35s;
}
.seq__step[aria-selected="true"] .seq__n{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.seq__step h4,.seq__step h3{ font-size:.98rem; margin-bottom:.2rem; }
.seq__step p{ font-size:.85rem; color:var(--ink-2); }
.seq__stage{
  position:relative; min-height:280px; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--glass-line); background:var(--glass);
  backdrop-filter:blur(16px); box-shadow:var(--sh-m); padding:clamp(1rem,2vw,1.6rem);
}
.seq__panel[hidden]{ display:none; }
.seq__panel{ animation:fadein .45s var(--ease-out); }

/* ── before / after comparison ────────────────────────────── */
.compare{
  position:relative; border-radius:var(--r-l); overflow:hidden; user-select:none;
  border:1px solid var(--glass-line); box-shadow:var(--sh-m); aspect-ratio:16/9; background:#14110E;
}
.compare__layer{ position:absolute; inset:0; }
.compare__layer--after{ clip-path:inset(0 0 0 var(--split,50%)); }
.compare__handle{
  position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px; background:var(--paper);
  box-shadow:0 0 12px rgba(0,0,0,.5); cursor:ew-resize; z-index:3;
}
.compare__handle::after{
  content:'‹ ›'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:var(--paper); color:var(--ink);
  display:grid; place-items:center; font-size:.9rem; box-shadow:var(--sh-m);
}
.compare__tag{
  position:absolute; top:.7rem; z-index:2; padding:.24rem .6rem; border-radius:100px;
  font-family:var(--f-mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase;
}
.compare__tag--l{ left:.7rem; background:rgba(255,255,255,.85); color:var(--ink); }
.compare__tag--r{ right:.7rem; background:var(--bronze); color:#fff; }
.compare input[type="range"]{
  position:absolute; inset:auto 0 0 0; width:100%; opacity:0; height:100%; cursor:ew-resize; z-index:4; margin:0;
}

/* ── specification table ──────────────────────────────────── */
.specs{
  border-radius:var(--r-l); overflow:hidden; border:1px solid var(--glass-line);
  background:var(--glass); backdrop-filter:blur(16px) saturate(130%); box-shadow:var(--sh-m);
}
.specs__group{ border-top:1px solid var(--line); }
.specs__group:first-child{ border-top:0; }
.specs__head{
  padding:.8rem clamp(1.1rem,2vw,1.6rem); background:rgba(237,227,212,.5);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-dk);
}
.specs__row{
  display:grid; grid-template-columns:210px 1fr; gap:1.2rem;
  padding:.85rem clamp(1.1rem,2vw,1.6rem); border-top:1px solid var(--line); align-items:baseline;
}
.specs__row:first-of-type{ border-top:0; }
.specs__row dt{ font-size:.83rem; color:var(--ink-3); font-weight:500; }
.specs__row dd{ margin:0; font-size:.9rem; color:var(--ink-2); }
.specs__row dd code{
  font-family:var(--f-mono); font-size:.78em; padding:.1rem .35rem; border-radius:5px;
  background:rgba(34,31,26,.06); color:var(--ink);
}

/* ── integrations ─────────────────────────────────────────── */
.intg{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:.7rem; }
.intg span{
  display:grid; place-items:center; gap:.25rem; padding:1rem .8rem; border-radius:var(--r-m);
  border:1px solid var(--line); background:rgba(255,255,255,.55); text-align:center;
  transition:transform .35s var(--ease-out), border-color .35s, background .35s;
}
.intg span:hover{ transform:translateY(-3px); border-color:rgba(169,122,69,.4); background:rgba(255,255,255,.85); }
.intg b{ font-size:.85rem; font-weight:550; }
.intg em{ font-style:normal; font-family:var(--f-mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ── deployment cards ─────────────────────────────────────── */
.deploy{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1rem; }
.deploy article{
  padding:clamp(1.3rem,2.2vw,1.9rem); border-radius:var(--r-l);
  border:1px solid var(--glass-line); background:var(--glass);
  backdrop-filter:blur(16px); box-shadow:var(--sh-s);
  transition:transform .45s var(--ease-out), box-shadow .4s;
}
.deploy article:hover{ transform:translateY(-5px); box-shadow:var(--sh-m); }
.deploy h4,.deploy h3{ font-size:1.12rem; margin:.7rem 0 .4rem; }
.deploy p{ font-size:.88rem; color:var(--ink-2); }
.deploy__icon{
  width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  background:var(--grad); color:#fff; box-shadow:0 10px 22px -12px rgba(169,122,69,.6);
}
.deploy__icon svg{ width:20px; height:20px; }

/* ── outcomes band ────────────────────────────────────────── */
.outcomes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); overflow:hidden;
  border-radius:var(--r-l); border:1px solid var(--glass-line); background:var(--glass-2);
  backdrop-filter:blur(18px) saturate(140%); box-shadow:var(--sh-m);
}
.outcomes div{ padding:clamp(1.2rem,2.2vw,1.8rem); border-left:1px solid var(--line); }
.outcomes div:first-child{ border-left:0; }
.outcomes b{
  display:block; font-family:var(--f-display); font-size:clamp(1.6rem,2.8vw,2.3rem);
  font-weight:600; letter-spacing:-.03em; color:var(--bronze-dk); margin-bottom:.2rem;
}
.outcomes span{ font-size:.82rem; color:var(--ink-2); }
.outcomes em{ display:block; margin-top:.4rem; font-style:normal; font-family:var(--f-mono);
  font-size:.52rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

/* ── callout ──────────────────────────────────────────────── */
.callout{
  display:grid; gap:.7rem; padding:clamp(1.4rem,2.6vw,2.2rem); border-radius:var(--r-l);
  border:1px solid rgba(169,122,69,.3); background:linear-gradient(120deg, rgba(201,154,94,.12), rgba(46,92,85,.07));
  box-shadow:var(--sh-s);
}
.callout__k{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-dk); }
.callout p{ font-family:var(--f-display); font-size:clamp(1.05rem,1.9vw,1.35rem); font-weight:500; letter-spacing:-.015em; line-height:1.42; }
.callout cite{ font-style:normal; font-size:.8rem; color:var(--ink-3); }

/* ── related products ─────────────────────────────────────── */
.related{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.related a{
  display:grid; gap:.5rem; padding:clamp(1.2rem,2vw,1.6rem); border-radius:var(--r-l);
  border:1px solid var(--glass-line); background:var(--glass);
  backdrop-filter:blur(14px); box-shadow:var(--sh-s);
  transition:transform .45s var(--ease-out), box-shadow .4s;
}
.related a:hover{ transform:translateY(-5px); box-shadow:var(--sh-m); }
.related h4,.related h3{ font-size:1.06rem; }
.related p{ font-size:.86rem; color:var(--ink-2); }
.related .link{ margin-top:.3rem; }

/* ── final CTA ────────────────────────────────────────────── */
.pcta{
  padding:clamp(2rem,4.5vw,3.6rem); border-radius:var(--r-xl);
  border:1px solid var(--glass-line); background:var(--glass-2);
  backdrop-filter:blur(20px) saturate(140%); box-shadow:var(--sh-l);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
}
.pcta h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:.7rem; }
.pcta p{ color:var(--ink-2); max-width:46ch; }
.pcta__side{ display:grid; gap:.7rem; }
.pcta__side .btn{ width:100%; }
.pcta__meta{
  margin-top:.4rem; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); text-align:center;
}

/* ── small animated mock helpers ──────────────────────────── */
.mock{ position:relative; width:100%; border-radius:var(--r-m); overflow:hidden; }
.mock--dark{ background:#171310; border:1px solid rgba(34,31,26,.45); }
.mock--light{ background:rgba(255,255,255,.72); border:1px solid var(--line); }

.bars-mini{ display:flex; align-items:flex-end; gap:6px; height:92px; padding:.9rem; }
.bars-mini i{
  flex:1; height:var(--h,50%); border-radius:4px 4px 2px 2px; background:var(--grad);
  transform-origin:50% 100%; animation:grow 1s var(--ease-out) both;
}

.ticker{
  display:flex; gap:.4rem; flex-wrap:wrap; font-family:var(--f-mono); font-size:.56rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.ticker span{
  padding:.24rem .55rem; border-radius:100px; border:1px solid var(--line);
  background:rgba(255,255,255,.6); color:var(--ink-3);
}
.ticker span.on{ border-color:rgba(46,92,85,.4); background:rgba(46,92,85,.1); color:var(--teal); }

.gauge{ display:grid; gap:.45rem; }
.gauge__row{ display:grid; grid-template-columns:96px 1fr 42px; gap:.7rem; align-items:center; font-size:.78rem; }
.gauge__track{ height:6px; border-radius:100px; background:rgba(34,31,26,.09); overflow:hidden; }
.gauge__fill{
  display:block; height:100%; border-radius:100px; background:var(--grad); width:var(--v,50%);
  transform-origin:0 50%; animation:gauge 1.2s var(--ease-out) both;
}
@keyframes gauge{ from{ transform:scaleX(0); } }
.gauge__val{ font-family:var(--f-mono); font-size:.68rem; color:var(--ink-3); text-align:right; }

/* typewriter caret */
.type::after{
  content:''; display:inline-block; width:1px; height:1em; margin-left:2px;
  background:var(--bronze); vertical-align:-.12em; animation:caret 1s steps(2) infinite;
}
@keyframes caret{ 50%{ opacity:0; } }

/* floating badge over a figure */
.floatbadge{
  position:absolute; z-index:2; padding:.4rem .7rem; border-radius:10px;
  border:1px solid var(--glass-line); background:rgba(255,255,255,.9);
  box-shadow:var(--sh-m); font-family:var(--f-mono); font-size:.55rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  animation:bob 5s var(--ease) infinite alternate;
}
.floatbadge b{ color:var(--bronze-dk); }
@keyframes bob{ from{ transform:translateY(0); } to{ transform:translateY(-9px); } }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1080px){
  .specs__row{ grid-template-columns:180px 1fr; }
}
@media (max-width:960px){
  .phero__grid{ grid-template-columns:1fr; }
  .frow{ grid-template-columns:1fr; gap:1.8rem; }
  .frow--flip .frow__media{ order:0; }
  .seq{ grid-template-columns:1fr; }
  .tabs__grid{ grid-template-columns:1fr; }
  .pcta{ grid-template-columns:1fr; }
  .subnav{ top:calc(var(--nav-h) - 14px); }
}
@media (max-width:640px){
  .specs__row{ grid-template-columns:1fr; gap:.15rem; }
  .phero__facts{ grid-template-columns:1fr 1fr; }
  .phero__facts div:nth-child(odd){ border-left:0; }
  .phero__facts div:nth-child(n+3){ border-top:1px solid var(--line); }
  .outcomes{ grid-template-columns:1fr 1fr; }
  .outcomes div:nth-child(odd){ border-left:0; }
  .outcomes div:nth-child(n+3){ border-top:1px solid var(--line); }
  .compare{ aspect-ratio:4/3; }
  .pcta__side .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .diagram [data-draw]{ stroke-dashoffset:0 !important; transition:none !important; }
  .diagram .dg-flow{ animation:none; stroke-dasharray:none; opacity:.5; }
  .floatbadge,.type::after{ animation:none; }
}