/* product-pages.css · v10.325 · reverted Pharos slab (user feedback: bg not
 * good). All sections back to off-white / soft band. Tech-specs dt labels
 * switched JetBrains Mono → Inter for cleaner sans treatment. */

/* FOUC kill: override the shared inline dark critical CSS before first paint. */
html:has(main.prod-page),
html:has(main.prod-page) body,
body.has-prod-page{
  background:#F8F8FB!important;
  color:#0A0A0A!important;
}

/* v10.339 · page-wide atmospheric bg. The v10.323 hero radial only
 * lit the hero; the rest of the page sat on flat #F8F8FB which read
 * sterile / underwhelming. Adds a body-level layered bg: cool top-left
 * brand light + warm bottom-right balance + bottom vignette + grain.
 * Same depth pattern Vercel / Linear / Stripe Press use on light pages. */
body.has-prod-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    /* Cool brand light, top-left */
    radial-gradient(70% 50% at 8% -6%,
      rgba(111,0,255,0.06) 0%,
      rgba(248,248,251,0.0) 55%),
    /* Soft warm balance, mid-right */
    radial-gradient(60% 70% at 96% 30%,
      rgba(255,220,200,0.05) 0%,
      rgba(248,248,251,0.0) 60%),
    /* Bottom vignette · cool shadow grounds the page */
    radial-gradient(100% 50% at 50% 110%,
      rgba(20,20,50,0.05) 0%,
      rgba(248,248,251,0.0) 60%),
    #F8F8FB;
}
body.has-prod-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.014;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* Footer reverted to inherited shared dark style ("dont change bottom page"). */

.prod-page{
  /* v10.321 · softer off-white base (was pure #FFF, read as wireframe).
   * Cool 2-point shift toward bluish-white = professional, calm, premium.
   * Anthropic uses #FAFAF7 (warm). Vercel uses #FAFAFA (neutral). Linear
   * uses #F7F8F8 (cool). We pick #F8F8FB (cool, very subtle brand-purple
   * undertone) so the section bg blends with subtle violet accents. */
  --bg:#F8F8FB;
  --bg-soft:#F2F3F8;
  --bg-band:#EFF0F6;
  --bg-elev:#FFFFFF;
  --ink:#0A0A0A;
  --ink-2:#3F3F46;
  --ink-3:#71717A;
  --ink-4:#A1A1AA;
  --hair:#E5E5EC;
  --hair-soft:#EDEDF2;
  --brand:#6F00FF;
  --brand-soft:#F1E8FF;
  --brand-hover:#5800CC;

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  background:var(--bg);
  color:var(--ink);
  font-family:"Inter Variable","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-variation-settings:"wght" 420;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.prod-page *,
.prod-page *::before,
.prod-page *::after{box-sizing:border-box;}
.prod-page a{color:inherit;text-decoration:none;}
.prod-page p{color:var(--ink-2);margin:0;}
.prod-page ul,
.prod-page ol{margin:0;padding:0;list-style:none;}

/* ---------- Layout ---------- */
.prod-page .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,80px);}
.prod-page .wrap--narrow{max-width:880px;}

/* ---------- Hero (anchored radial-gradient atmosphere) ---------- */
/* v10.323 · single anchored radial gradient anchored top-left, 5 color
 * stops fading to page bg. Replaces v10.321's 2-blob + dot-grid + page-wide
 * overlay stack. Costs zero JS, no compositor layers stacked, one paint per
 * scroll. Reads as soft atmospheric light, not as wallpaper. */
.prod-page .ph-hero{
  position:relative;
  padding:clamp(96px,14vw,176px) 0 clamp(64px,8vw,112px);
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(
      120% 140% at 8% -10%,
      rgba(111,0,255,0.18) 0%,
      rgba(155,107,255,0.12) 18%,
      rgba(209,180,255,0.08) 35%,
      rgba(232,224,250,0.04) 52%,
      transparent 78%
    );
}
.prod-page .ph-hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-3);
  margin:0 0 36px;
}
.prod-page .ph-hero__eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(111,0,255,.12);
}
.prod-page .ph-hero__title{
  font-family:inherit;
  font-size:clamp(2.75rem,6.5vw,5.5rem);
  font-weight:700;
  font-variation-settings:"wght" 720;
  letter-spacing:-.035em;
  line-height:.98;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
  max-width:14em;
}
.prod-page .ph-hero__lede{
  font-size:clamp(1.125rem,1.7vw,1.375rem);
  font-weight:400;
  line-height:1.45;
  color:var(--ink-2);
  max-width:36em;
  margin:32px 0 0;
  text-wrap:pretty;
}
.prod-page .ph-hero__ctas{
  display:flex;flex-wrap:wrap;align-items:center;gap:28px;
  margin-top:48px;
}

/* ---------- Buttons ---------- */
.prod-page .ph-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:52px;padding:0 28px;
  background:var(--ink);color:#fff!important;
  font-family:inherit;font-size:1rem;font-weight:500;
  letter-spacing:-.005em;
  border:none;border-radius:999px;
  text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.prod-page .ph-btn:hover{background:#1F1F22;transform:translateY(-1px);}
.prod-page .ph-btn--brand{background:var(--brand);}
.prod-page .ph-btn--brand:hover{background:var(--brand-hover);}
.prod-page .ph-btn svg{width:14px;height:14px;}
.prod-page .ph-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink);font-size:1rem;font-weight:500;
}
.prod-page .ph-link::after{
  content:"→";display:inline-block;
  transition:transform .2s var(--ease);
}
.prod-page .ph-link:hover{color:var(--brand);}
.prod-page .ph-link:hover::after{transform:translateX(4px);}

/* ---------- Section ---------- */
.prod-page .ph-section{
  padding:clamp(80px,10vw,144px) 0;
  border-top:1px solid var(--hair);
  position:relative;
}
/* v10.321 · band sections get a soft gradient surface + their own subtle
 * radial accent to break the page rhythm. */
.prod-page .ph-section--band{
  background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg-band) 100%);
  border-top-color:var(--hair-soft);
}
.prod-page .ph-section--band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 80% 0%,rgba(111,0,255,.04),transparent 50%);
}

.prod-page .ph-section__head{margin-bottom:64px;display:flex;flex-direction:column;gap:20px;}
.prod-page .ph-section__eyebrow{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-3);
}
.prod-page .ph-section__title{
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:700;
  font-variation-settings:"wght" 720;
  letter-spacing:-.03em;line-height:1.05;
  color:var(--ink);margin:0;
  text-wrap:balance;
  max-width:18em;
}
.prod-page .ph-section__lede{
  font-size:1.125rem;line-height:1.55;color:var(--ink-2);max-width:42em;margin:0;
}

/* ---------- Feature grid (2 or 3 col) ---------- */
.prod-page .ph-feats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:64px 80px;
}
.prod-page .ph-feats--3{grid-template-columns:repeat(3,1fr);gap:48px 56px;}

/* v10.367 · .ph-feats--showcase: editorial 3+2 mosaic for the dex
 * Live Features section. Single hairline-bordered panel, 6-col grid
 * laid out as 3 cells on top + 2 wider cells on bottom. Per cell:
 * monospace caption + display title + body. Hairlines between cells
 * (no per-cell card chrome). Hover: cell bg tints + caption brand-
 * tinted. Pure white bg friendly. */
.prod-page .ph-feats--showcase{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:0;
  border:1px solid rgba(10,10,10,.08);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.prod-page .ph-feats--showcase .ph-feat{
  grid-column:span 2;
  position:relative;
  padding:36px 32px 32px;
  display:flex;flex-direction:column;gap:12px;
  transition:background .35s var(--ease);
}
.prod-page .ph-feats--showcase .ph-feat--wide{grid-column:span 3;}
.prod-page .ph-feats--showcase .ph-feat:nth-child(1),
.prod-page .ph-feats--showcase .ph-feat:nth-child(2){
  border-right:1px solid rgba(10,10,10,.07);
}
.prod-page .ph-feats--showcase .ph-feat:nth-child(4){
  border-right:1px solid rgba(10,10,10,.07);
}
.prod-page .ph-feats--showcase .ph-feat:nth-child(1),
.prod-page .ph-feats--showcase .ph-feat:nth-child(2),
.prod-page .ph-feats--showcase .ph-feat:nth-child(3){
  border-bottom:1px solid rgba(10,10,10,.07);
}
@media (hover: hover){
  .prod-page .ph-feats--showcase .ph-feat:hover{
    background:rgba(111,0,255,.025);
  }
  .prod-page .ph-feats--showcase .ph-feat:hover .ph-feat__cap{
    color:var(--brand);
  }
}
.prod-page .ph-feats--showcase .ph-feat__cap{
  margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .3s var(--ease);
}
.prod-page .ph-feats--showcase .ph-feat__title{
  margin:0;
  font-size:clamp(1.25rem, 1.6vw, 1.45rem);
  font-weight:600;
  letter-spacing:-.018em;line-height:1.2;color:var(--ink);
}
.prod-page .ph-feats--showcase .ph-feat__body{
  margin:0;
  font-size:.95rem;line-height:1.55;color:var(--ink-2);
}
@media (max-width: 900px){
  .prod-page .ph-feats--showcase{
    grid-template-columns:repeat(2, 1fr);
  }
  .prod-page .ph-feats--showcase .ph-feat,
  .prod-page .ph-feats--showcase .ph-feat--wide{grid-column:span 1;}
  .prod-page .ph-feats--showcase .ph-feat{
    border-right:none !important;
    border-bottom:1px solid rgba(10,10,10,.07) !important;
  }
  .prod-page .ph-feats--showcase .ph-feat:nth-child(odd){
    border-right:1px solid rgba(10,10,10,.07) !important;
  }
  .prod-page .ph-feats--showcase .ph-feat:last-child{
    border-bottom:none !important;
  }
}
@media (max-width: 560px){
  .prod-page .ph-feats--showcase{
    grid-template-columns:1fr;
  }
  .prod-page .ph-feats--showcase .ph-feat{
    border-right:none !important;
    border-bottom:1px solid rgba(10,10,10,.07) !important;
    padding:28px 24px;
  }
  .prod-page .ph-feats--showcase .ph-feat:last-child{border-bottom:none !important;}
}
.prod-page .ph-feat__title{
  font-size:1.375rem;font-weight:600;
  font-variation-settings:"wght" 620;
  letter-spacing:-.018em;
  color:var(--ink);margin:0 0 12px;
  line-height:1.25;
}
.prod-page .ph-feat__body{
  font-size:1rem;line-height:1.6;color:var(--ink-2);margin:0;
}

/* ──────────────────────────────────────────────────────────────────
   v10.475 · Huly-style feature grid (LIGHT) · OPT-IN via .ph-feats--huly
   so it only affects pages that add the class (abox-nodes first · the
   rest roll out after sign-off). Reference: huly.io light feature
   sections · brand-violet gradient icons in soft tiles, bold titles,
   muted body, on a panel with a faint vertical light-line motif + corner
   glow. Adapted to brand violet (not Huly blue) on the existing light
   product theme. Pure CSS · no per-frame cost. */
.prod-page .ph-feats--huly{
  position:relative;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  padding:14px;
  border-radius:26px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(111,0,255,.07), transparent 52%),
    radial-gradient(90% 70% at 0% 100%, rgba(0,194,255,.05), transparent 58%),
    linear-gradient(180deg,#ffffff,#fbfaff);
  border:1px solid rgba(10,10,10,.06);
  box-shadow:0 24px 60px -38px rgba(20,12,45,.32);
  overflow:hidden;
}
.prod-page .ph-feats--huly::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg, rgba(111,0,255,.05) 0 1px, transparent 1px 108px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 82%,transparent);
}
.prod-page .ph-feats--huly > article{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:34px 32px 32px;
  border-radius:18px;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
@media (hover:hover){
  .prod-page .ph-feats--huly > article:hover{ background:rgba(255,255,255,.72); }
  .prod-page .ph-feats--huly > article:hover .ph-feat__ic{
    transform:translateY(-2px);
    box-shadow:0 12px 26px -10px rgba(111,0,255,.5), inset 0 1px 0 rgba(255,255,255,.7);
  }
}
.prod-page .ph-feats--huly .ph-feat__ic{
  width:54px;height:54px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:15px;
  background:linear-gradient(140deg, rgba(176,127,255,.18), rgba(111,0,255,.07));
  border:1px solid rgba(111,0,255,.16);
  box-shadow:0 8px 20px -10px rgba(111,0,255,.4), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.prod-page .ph-feats--huly .ph-feat__ic svg{ display:block; }
.prod-page .ph-feats--huly .ph-feat__title{
  font-size:clamp(1.3rem,1.7vw,1.55rem);
  font-variation-settings:"wght" 660;font-weight:600;
  margin:0;line-height:1.18;letter-spacing:-.02em;color:var(--ink);
}
.prod-page .ph-feats--huly .ph-feat__body{
  font-size:1rem;line-height:1.6;color:var(--ink-2);margin:0;
}
@media (max-width:760px){
  .prod-page .ph-feats--huly{ grid-template-columns:1fr; padding:10px; }
  .prod-page .ph-feats--huly > article{ padding:26px 22px; }
}

/* ---------- Steps (numbered, horizontal on desktop, stacked on mobile) ---------- */
.prod-page .ph-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
}
.prod-page .ph-step__title{
  font-size:1.25rem;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 8px;
}
.prod-page .ph-step__body{font-size:.95rem;line-height:1.5;color:var(--ink-2);margin:0;}

/* ---------- v10.349 · Revenue mosaic (ph-rev) ----------
 * Single bordered panel, 5 cells in a 3-up + 2-up mosaic. Each cell:
 * geometric glyph (1.4px stroke) + mono caption (fee type) + display
 * title. Cells share hairlines (no per-cell borders) so the panel reads
 * as one editorial surface, not five floating cards. */
/* v10.351 · glassy surface. Light-theme glass on warm paper:
 * translucent white + backdrop blur + soft inner highlight + 2-layer
 * shadow. Cells stay transparent so the panel reads as one frosted
 * surface, not five tiles. */
.prod-page .ph-rev{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(10,10,10,.04),
    0 1px 2px rgba(10,10,10,.04),
    0 18px 40px -18px rgba(10,10,10,.10);
}
.prod-page .ph-rev__cell{
  grid-column:span 2;
  position:relative;
  padding:32px 28px 30px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .35s var(--ease);
}
.prod-page .ph-rev__cell--wide{grid-column:span 3;}
/* hairlines: right border on each except the last in its row */
.prod-page .ph-rev__cell:nth-child(1),
.prod-page .ph-rev__cell:nth-child(2){border-right:1px solid rgba(10,10,10,.06);}
.prod-page .ph-rev__cell:nth-child(4){border-right:1px solid rgba(10,10,10,.06);}
/* horizontal divider between top row (3 cells) and bottom row (2 wide) */
.prod-page .ph-rev__cell:nth-child(1),
.prod-page .ph-rev__cell:nth-child(2),
.prod-page .ph-rev__cell:nth-child(3){border-bottom:1px solid rgba(10,10,10,.06);}
@media (hover: hover){
  .prod-page .ph-rev__cell:hover{
    background:rgba(111,0,255,.035);
  }
  .prod-page .ph-rev__cell:hover .ph-rev__glyph{
    transform:translateY(-2px);
    border-color:rgba(111,0,255,.30);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      0 12px 26px -10px rgba(111,0,255,.5);
  }
  .prod-page .ph-rev__cell:hover .ph-rev__cap{color:var(--brand);}
}
.prod-page .ph-rev__glyph{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;
  /* v10.478 · was a grey monochrome glyph on a white tile (user: these
     icons were not updated to the gradient style). Now matches the v10.475
     feature icons by default · brand-violet glyph on a soft violet gradient
     tile (the premium look previously only appeared on hover). */
  color:var(--brand);
  border:1px solid rgba(111,0,255,.16);
  border-radius:14px;
  background:linear-gradient(140deg, rgba(176,127,255,.18), rgba(111,0,255,.07));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 8px 20px -10px rgba(111,0,255,.40);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prod-page .ph-rev__cap{
  margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
  transition:color .3s var(--ease);
}
.prod-page .ph-rev__title{
  margin:0;
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight:600;letter-spacing:-.012em;line-height:1.25;color:var(--ink);
}
@media (max-width: 900px){
  .prod-page .ph-rev{grid-template-columns:repeat(2, 1fr);}
  .prod-page .ph-rev__cell,
  .prod-page .ph-rev__cell--wide{grid-column:span 1;}
  /* reset borders, redraw for 2-col layout */
  .prod-page .ph-rev__cell{border-right:none !important;border-bottom:1px solid rgba(10,10,10,.06) !important;}
  .prod-page .ph-rev__cell:nth-child(odd){border-right:1px solid rgba(10,10,10,.06) !important;}
  .prod-page .ph-rev__cell:last-child{border-bottom:none !important;}
  .prod-page .ph-rev__cell:nth-last-child(2):nth-child(odd){border-bottom:none !important;}
}
@media (max-width: 560px){
  .prod-page .ph-rev{grid-template-columns:1fr;}
  .prod-page .ph-rev__cell{
    border-right:none !important;
    border-bottom:1px solid rgba(10,10,10,.06) !important;
    padding:26px 22px 24px;
  }
  .prod-page .ph-rev__cell:last-child{border-bottom:none !important;}
}

/* ---------- v10.348 · Buy panel (ph-buy) ----------
 * Editorial tier rail replacing the old Stripe pricing-card grid.
 * Per-tier horizontal row with: lead column (badge + tagline),
 * metrics column (Price / $AST tokens / Slots · each as a stat block,
 * the slots stat has a relative-size bar so scarcity is visual), and
 * a per-row CTA. PRO row gets a single elevated treatment (subtle
 * violet wash + brand left bar) with a quiet "Most popular" caption
 * · no full color inversion. */
.prod-page .ph-buy{
  display:flex;flex-direction:column;gap:14px;
  margin-top:8px;
}
.prod-page .ph-buy__row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px, 1.1fr) minmax(0, 2fr) auto;
  align-items:center;gap:32px;
  padding:28px 32px;
  background:var(--bg-elev);
  border:1px solid var(--hair);
  border-radius:18px;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.prod-page .ph-buy__row:hover{
  border-color:var(--ink-4);
  transform:translateY(-2px);
  box-shadow:0 12px 28px -10px rgba(10,10,10,.10);
}
.prod-page .ph-buy__row--feature{
  background:linear-gradient(90deg, rgba(111,0,255,.06) 0%, rgba(111,0,255,.02) 50%, var(--bg-elev) 100%);
  border-color:rgba(111,0,255,.30);
}
.prod-page .ph-buy__row--feature::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:linear-gradient(180deg, transparent 0%, var(--brand) 30%, var(--brand) 70%, transparent 100%);
  border-radius:0 3px 3px 0;
}
.prod-page .ph-buy__flag{
  position:absolute;top:14px;right:20px;
  margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);
}
.prod-page .ph-buy__lead{display:flex;flex-direction:column;gap:6px;min-width:0;}
.prod-page .ph-buy__badge{
  margin:0;
  font-size:1.15rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);
}
.prod-page .ph-buy__tag{
  margin:0;
  font-size:.88rem;color:var(--ink-3);line-height:1.45;
}
.prod-page .ph-buy__metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}
.prod-page .ph-buy__metric{display:flex;flex-direction:column;gap:4px;min-width:0;}
.prod-page .ph-buy__metric-num{
  margin:0;
  font-size:clamp(1.4rem, 1.8vw, 1.7rem);
  font-weight:700;letter-spacing:-.022em;line-height:1;color:var(--ink);
  font-feature-settings:"tnum" 1;
}
.prod-page .ph-buy__metric-lab{
  margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.prod-page .ph-buy__bar{
  margin-top:8px;
  height:4px;border-radius:999px;background:rgba(10,10,10,.06);overflow:hidden;
}
.prod-page .ph-buy__bar span{
  display:block;height:100%;width:var(--p, 50%);
  background:linear-gradient(90deg, rgba(111,0,255,.45), rgba(111,0,255,.85));
  border-radius:inherit;
}
.prod-page .ph-buy__row--feature .ph-buy__bar span{
  background:linear-gradient(90deg, var(--brand), #9d5cff);
}
.prod-page .ph-buy__cta{
  white-space:nowrap;
}
@media (max-width: 900px){
  .prod-page .ph-buy__row{
    grid-template-columns:1fr;
    gap:20px;
    padding:24px 22px;
  }
  .prod-page .ph-buy__flag{position:static;display:block;margin-bottom:-8px;}
  .prod-page .ph-buy__metrics{gap:16px;}
  .prod-page .ph-buy__cta{width:100%;justify-content:center;}
}
@media (max-width: 560px){
  .prod-page .ph-buy__metrics{
    grid-template-columns:1fr 1fr;
  }
  .prod-page .ph-buy__metric--bar{grid-column:1 / -1;}
}

/* ---------- Spec list (technical specs as definition list) ----------
 * v10.479 · wrapped in the Huly soft premium panel (matches .ph-feats--huly
 * + .ph-rev): rounded white panel with a faint violet corner glow + vertical
 * light-line motif, hairline rows, comfortable row padding. Labels are the
 * muted uppercase tracked caption (var(--ink-3)) top-aligned (align-self:start)
 * to the first value line · the same top-align fix used on the press .factbox.
 * Values carry the bold/dark emphasis. No icons (this is a data table). */
.prod-page .ph-specs{
  position:relative;
  display:grid;grid-template-columns:minmax(160px,1fr) 2fr;
  gap:0;
  padding:6px clamp(24px,3vw,40px);
  border-radius:22px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(111,0,255,.06), transparent 52%),
    linear-gradient(180deg,#ffffff,#fbfaff);
  border:1px solid rgba(10,10,10,.06);
  box-shadow:0 24px 60px -38px rgba(20,12,45,.32);
  overflow:hidden;
}
.prod-page .ph-specs::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg, rgba(111,0,255,.045) 0 1px, transparent 1px 104px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 84%,transparent);
}
.prod-page .ph-specs > dt,
.prod-page .ph-specs > dd{
  position:relative;z-index:1;
  padding:22px 0;
  align-self:start;
  border-bottom:1px solid rgba(10,10,10,.07);
}
/* drop the divider under the final row pair */
.prod-page .ph-specs > dt:last-of-type,
.prod-page .ph-specs > dd:last-of-type{border-bottom:none;}
.prod-page .ph-specs > dt{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
  padding-top:25px;
}
.prod-page .ph-specs > dd{
  margin:0;
  font-size:1.0625rem;line-height:1.5;
  font-weight:600;
  font-variation-settings:"wght" 600;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* ---------- Final CTA ---------- */
.prod-page .ph-final{
  padding:clamp(96px,12vw,144px) 0;
  background:var(--ink);color:#fff;
}
.prod-page .ph-final__title{
  font-size:clamp(2.5rem,5vw,4rem);font-weight:700;
  font-variation-settings:"wght" 720;
  letter-spacing:-.03em;line-height:1.02;
  color:#fff;margin:0;max-width:14em;
  text-wrap:balance;
}
.prod-page .ph-final__sub{
  font-size:1.125rem;color:#A1A1AA;margin:24px 0 0;max-width:36em;
}
.prod-page .ph-final__ctas{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:40px;}
.prod-page .ph-final .ph-btn{background:#fff;color:var(--ink)!important;}
.prod-page .ph-final .ph-btn:hover{background:#E4E4E7;}
.prod-page .ph-final .ph-btn--brand{background:var(--brand);color:#fff!important;}
.prod-page .ph-final .ph-btn--brand:hover{background:var(--brand-hover);}
.prod-page .ph-final .ph-link{color:#fff;}
.prod-page .ph-final .ph-link:hover{color:#A1A1AA;}

/* ---------- Reveal (v10.323 · on-load rise animation + scroll-in stagger) ----------
 * Hero gets `rise` keyframe on first paint (no JS gate, runs as soon as CSS lands).
 * Other sections get the scroll-triggered IO bump via .is-revealed (existing JS).
 * Both use the same keyframe so motion language is consistent.
 *
 * Stagger: child elements (h1, lede, ctas, meta) get sequential delays via
 * nth-child, so they cascade into view rather than appearing as a single block. */
@keyframes ph-rise{
  from{opacity:0;transform:translate3d(0,24px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}
.prod-page .ph-hero > .wrap > *{
  animation:ph-rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.prod-page .ph-hero > .wrap > :nth-child(1){animation-delay:.05s;}
.prod-page .ph-hero > .wrap > :nth-child(2){animation-delay:.15s;}
.prod-page .ph-hero > .wrap > :nth-child(3){animation-delay:.25s;}
.prod-page .ph-hero > .wrap > :nth-child(4){animation-delay:.35s;}
.prod-page .ph-hero > .wrap > :nth-child(5){animation-delay:.45s;}

/* Scroll-in reveal · IO toggles .is-revealed; we use the same keyframe.
 * Default (pre-reveal) state hides; .is-revealed plays the rise once. */
.prod-page .ed-reveal{opacity:0;}
.prod-page .ed-reveal.is-revealed{
  animation:ph-rise .8s cubic-bezier(.2,.7,.2,1) both;
}
/* Children inside .ed-reveal can opt into stagger via nth-child. Section
 * heads + .ph-feats / .ph-steps direct children cascade. */
.prod-page .ed-reveal.is-revealed > *{
  animation:ph-rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.prod-page .ed-reveal.is-revealed > :nth-child(1){animation-delay:.08s;}
.prod-page .ed-reveal.is-revealed > :nth-child(2){animation-delay:.16s;}
.prod-page .ed-reveal.is-revealed > :nth-child(3){animation-delay:.24s;}
.prod-page .ed-reveal.is-revealed > :nth-child(4){animation-delay:.32s;}
.prod-page .ed-reveal.is-revealed > :nth-child(5){animation-delay:.40s;}
.prod-page .ed-reveal.is-revealed > :nth-child(6){animation-delay:.48s;}

/* ---------- Focus ---------- */
.prod-page a:focus-visible,
.prod-page button:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .prod-page *,.prod-page *::before,.prod-page *::after{
    animation:none!important;transition:none!important;
  }
  .prod-page .ed-reveal,
  .prod-page .ed-reveal > *,
  .prod-page .ph-hero > .wrap > *{
    opacity:1!important;transform:none!important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  .prod-page{font-size:16px;}
  .prod-page .wrap{padding:0 20px;}
  .prod-page .ph-hero{padding:80px 0 56px;}
  .prod-page .ph-section{padding:72px 0;}
  .prod-page .ph-section__head{gap:14px;margin-bottom:40px;}
  .prod-page .ph-feats,
  .prod-page .ph-feats--3,
  .prod-page .ph-steps{grid-template-columns:1fr;gap:48px;}
  .prod-page .ph-hero__ctas,
  .prod-page .ph-final__ctas{flex-direction:column;align-items:stretch;width:100%;gap:16px;}
  .prod-page .ph-btn{width:100%;justify-content:center;height:54px;}
  .prod-page .ph-final{padding:80px 0;}
  .prod-page .ph-specs{grid-template-columns:1fr;padding:6px 22px;}
  .prod-page .ph-specs > dt{padding:18px 0 4px;border-bottom:none;}
  .prod-page .ph-specs > dd{padding:0 0 18px;}
  .prod-page .ph-specs > dd:last-of-type{padding-bottom:18px;}
}

/* ──────────────────────────────────────────────────────────────────
   v10.480 · DEX + IDO premium upgrade (LIGHT).
   1) Gradient icon tiles inside the .ph-feats--showcase mosaic cells
      (dex Live Features) · reuses the .ph-feat__ic / .ph-rev__glyph
      recipe (brand-violet glyph on a soft violet gradient tile).
   2) .ph-feats--huly--3 · a 3-column variant of the existing Huly soft
      panel so the IDO Mechanism (3 cells) can use the same premium
      panel + icon-tile treatment as the 2-col grids.
   Scoped to the new classes only · no other product page is disturbed.
   ────────────────────────────────────────────────────────────────── */

/* (1) Showcase cell icon tiles */
.prod-page .ph-feats--showcase .ph-feat__ic{
  width:50px;height:50px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  color:var(--brand);
  background:linear-gradient(140deg, rgba(176,127,255,.18), rgba(111,0,255,.07));
  border:1px solid rgba(111,0,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -10px rgba(111,0,255,.40);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.prod-page .ph-feats--showcase .ph-feat__ic svg{display:block;}
@media (hover: hover){
  .prod-page .ph-feats--showcase .ph-feat:hover .ph-feat__ic{
    transform:translateY(-2px);
    box-shadow:0 12px 26px -10px rgba(111,0,255,.5), inset 0 1px 0 rgba(255,255,255,.7);
  }
}

/* (2) Huly soft panel · 3-column variant */
.prod-page .ph-feats--huly--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){
  .prod-page .ph-feats--huly--3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .prod-page .ph-feats--huly--3{grid-template-columns:1fr;}
}