/* ============================================================
   PRODUCTS — ScriptAbility spotlight + auto-scrolling API carousel
============================================================ */
.products-grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:20px;}

/* Match the gap between section-head → featured-spotlight to the one below */
#products .section-head{margin-bottom:88px;}
@media (max-width: 760px){
  #products .section-head{margin-bottom:56px;}
  .featured-spotlight{margin-bottom:56px;}
}

/* ----- Sub-headline that transitions from ScriptAbility spotlight to the API suite ----- */
/* Sized so the line ends flush with the right edge of the pill rail below it.
   Fixed rather than viewport-scaled: the rail is content-sized at a constant
   756px, so a vw-based heading would only line up at one screen width. */
.cap-subhead{
  margin:0 0 16px;
  text-align:left;
  font-family:var(--font-display);font-weight:500;
  font-size:49px;
  letter-spacing:-0.02em;line-height:1.15;
  color:var(--ink-dim);
}
@media (max-width: 760px){
  .cap-subhead{margin:0 0 18px;font-size:24px;}
}

/* ----- Capabilities switcher (concept2: deck-shuffle consoles + naming + rail) ----- */
.capabilities{
  --accent:var(--turquoise);
  --accent-btn:var(--turquoise-btn);
  position:relative;
  display:flex;flex-direction:column;
}

/* Stage — asymmetric grid: naming on the left, console deck on the right. */
.capabilities__stage{
  /* Mirrors the Next button block sitting above the console (32px tall + its
     14px margin) so the naming column starts level with the console card
     rather than with the button. Zeroed once the stage stacks to one column. */
  --stage-offset:46px;
  display:grid;
  grid-template-columns:minmax(280px,0.95fr) minmax(0,1.5fr);
  gap:64px;
  align-items:start;
  position:relative;
}

/* LEFT — product naming. Content swaps from the active console. */
.cap-naming{
  margin-top:var(--stage-offset);
  min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;
}
/* Identity row — icon sized to the title's line box so the two read as one unit. */
.cap-naming__head{
  display:flex;align-items:center;gap:14px;
}
.cap-naming__icon{
  flex:none;
  display:inline-grid;place-items:center;
  font-size:34px;line-height:1;
  color:var(--ink);
}
/* Category label — grouped with the description below it, not the name above. */
.cap-naming__tag{ margin-top:26px;line-height:1;color:var(--accent);
  transition:color 1s ease; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.cap-naming__title{
  margin-top:0;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(28px,2.8vw,40px);
  line-height:1.05;letter-spacing:-0.025em;
  color:var(--ink);
  white-space:nowrap;
}
.cap-naming__a2{color:var(--accent);transition:color 1s ease;margin-left:0.25em;}
.cap-naming__a2.is-joined{margin-left:0;}
.cap-naming__desc{
  margin-top:10px;max-width:380px;
  font-size:16px;line-height:1.6;color:var(--ink-dim);
}
/* The Sandbox link is the shared .btn.btn-ghost (same as the header and CTA
   Sandbox buttons); this only places it under the description. */
.cap-naming__try{margin-top:28px;align-self:flex-start;}

/* RIGHT — console stack. All consoles share one grid cell so the container
   auto-sizes to the tallest console — the Next button below never gets covered. */
.cap-consoles{display:grid;grid-template-columns:1fr;perspective:1200px;min-height:380px;}
.cap-console{
  grid-area:1 / 1;
  opacity:0;transform:translateX(64px) scale(0.94) rotate(2deg);
  pointer-events:none;visibility:hidden;
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),
             transform .7s cubic-bezier(.2,.8,.2,1),
             visibility 0s linear .7s;
}
.cap-console.is-active{
  opacity:1;transform:translateX(0) scale(1) rotate(0);z-index:3;
  pointer-events:auto;visibility:visible;
  transition-delay:0s, 0s, 0s;
}
.cap-console.is-next{
  opacity:0.42;
  transform:translateX(46px) translateY(28px) scale(0.94) rotate(1.5deg);
  z-index:1;
  visibility:visible;
  transition-delay:0s, 0s, 0s;
}
.cap-console.is-exiting{
  opacity:0;transform:translateX(-72px) scale(0.94) rotate(-2deg);
  z-index:2;visibility:visible;
  transition-delay:0s, 0s, 0s;
}
.cap-console .code-preview{
  margin-top:0;
  width:100%;
  font-size:13px;
  border-radius:16px;
}
.cap-console .code-body{padding:22px 24px;line-height:1.75;}

/* Right column wrapper: simple Next button sits above the console */
.cap-stage-right{display:flex;flex-direction:column;min-width:0;}

/* Simple Next button — small, right-aligned, above the console */
.cap-next-btn{
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-end;margin-bottom:14px;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:-0.005em;color:var(--ink-dim);
  background:transparent;border:0;cursor:pointer;
  padding:6px 4px;
  transition:color .25s ease;
}
.cap-next-btn i{font-size:15px;color:inherit;transform:translateY(1px);transition:transform .3s ease;}
.cap-next-btn:hover{color:var(--ink);}
.cap-next-btn:hover i{transform:translate(4px,1px);}
.cap-next-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}

/* Top rail — pill nav above the stage */
.cap-rail{
  margin-bottom:48px;display:flex;justify-content:flex-start;gap:6px;flex-wrap:wrap;
  position:relative;z-index:2;
}
.cap-rail-item{
  background:transparent;border:1px solid transparent;color:var(--ink-mute);cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;letter-spacing:-0.005em;
  padding:9px 16px;border-radius:999px;
  transition:color .25s ease, background .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.cap-rail-item:hover{color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);}
/* Label is theme-driven, not per accent: white in light mode, near-black in
   dark. Separate token from --*-btn-fg so sandbox buttons stay white. */
.cap-rail-item.is-active{
  background:var(--accent-btn, var(--purple-btn));
  color:var(--pill-fg);
  border-color:var(--accent-btn, var(--purple-btn));
}
.cap-rail-item.is-active:hover{color:var(--pill-fg);}

@media (max-width: 1080px){
  .capabilities__stage{grid-template-columns:1fr;gap:48px;--stage-offset:0px;}
  .cap-naming__title{white-space:normal;}
  .cap-consoles{min-height:340px;}
  .cap-console.is-next{display:none;}
  .cap-rail{margin-bottom:32px;}
}
@media (max-width: 760px){
  .cap-naming__title{font-size:28px;}
  .cap-naming__desc{font-size:15px;}
  .cap-naming__icon{font-size:28px;}
}
@media (prefers-reduced-motion: reduce){
  .cap-console{transition:opacity .25s ease;transform:none;}
  .cap-console.is-active,.cap-console.is-next,.cap-console.is-exiting{transform:none;filter:none;}
  .cap-console.is-next{opacity:0;visibility:hidden;}
}

.product{
  position:relative;overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset;
}
.product::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px 240px at var(--mx,80%) var(--my,0%), var(--accent,#fff) 0%, transparent 60%);
  opacity:0;transition:opacity .4s ease;
}
.product:hover{border-color:var(--line-strong);transform:translateY(-2px);}
.product:hover::before{opacity:0.10;}
.product .product-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;}
.product .icon{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--fill-subtle);border:1px solid var(--line);font-size:22px;
}
.product .icon i{color:var(--accent);}
.product .icon img{width:28px;height:28px;}
.product .type-pill{ color:var(--ink-mute);padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--fill-subtle);white-space:nowrap; font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0; }
.product h3{font-size:24px;letter-spacing:-0.02em;font-weight:500;}
.product .desc{margin-top:10px;color:var(--ink-dim);font-size:14.5px;line-height:1.55;}
.product.col-6{grid-column:span 6;}

.try-link{
  margin-top:22px;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;color:var(--ink);padding:8px 0;
}
.try-link i{transition:transform .3s ease;font-size:15px;color:var(--accent);}
.product:hover .try-link i{transform:translateX(4px);}

/* ----- ScriptAbility spotlight — 50/50 photo + centered content ----- */
.featured-spotlight{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  padding:0;
  margin:0 0 172px;
  min-height:330px;
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(620px 280px at 0% 0%, rgba(143,83,161,0.10), transparent 60%),
    radial-gradient(520px 240px at 100% 100%, rgba(36,162,177,0.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  box-shadow:0 0 0 1px var(--card-inset) inset;
}
.featured-spotlight__photo{
  position:relative;
  overflow:hidden;
  background:var(--bg-card);
}
/* Image is absolute-positioned so its intrinsic height doesn't drive the
   wrapper's height — the wrapper just fills its grid cell, which is sized
   by min-height + content. */
.featured-spotlight__photo img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 34%;
  display:block;
}
/* Brand-color atmospheric wash over the photo — purple top-left, turquoise
   bottom-right, soft orange warmth in the middle, plus a subtle right-edge
   darkening that gives the photo depth and softly bridges into the content
   side of the card. Same color vocabulary as the contact section's poster. */
.featured-spotlight__photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 65%, rgba(15,15,20,0.14) 100%),
    radial-gradient(70% 60% at 25% 30%, rgba(143,83,161,0.22), transparent 65%),
    radial-gradient(60% 60% at 75% 80%, rgba(36,162,177,0.18), transparent 65%),
    radial-gradient(40% 40% at 50% 55%, rgba(225,133,10,0.08), transparent 60%);
}
.featured-spotlight__content{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:36px 42px;
  gap:16px;
  background:
    radial-gradient(360px 220px at 50% 18%, rgba(143,83,161,0.08), transparent 70%),
    radial-gradient(340px 220px at 82% 88%, rgba(36,162,177,0.07), transparent 72%),
    linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,255,255,0.58));
}
.featured-spotlight__brand{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.featured-spotlight__brand > div{text-align:center;}
.featured-spotlight .featured-logo{width:52px;height:52px;flex:0 0 auto;display:block;}
.featured-spotlight .featured-pill{ display:block;text-align:center;
  color:var(--purple);
  margin-top:4px;margin-left:0; font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0; }
.featured-spotlight .featured-name{
  font-size:clamp(24px, 2.6vw, 32px);
  letter-spacing:-0.025em;font-weight:500;line-height:1;
}
.featured-spotlight .featured-name em{
  font-style:normal;font-weight:500;color:var(--purple);
}
.featured-spotlight__body{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;
}
.featured-spotlight .featured-desc{
  font-size:15.5px;color:var(--ink-dim);line-height:1.55;max-width:430px;
  margin:0;
}
.featured-spotlight__cta{
  display:flex;align-items:center;justify-content:center;
}

.featured-chips{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.featured-chips li{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:500;
  color:var(--c);
  background:color-mix(in srgb, var(--c) 10%, var(--bg-card));
  border:1px solid color-mix(in srgb, var(--c) 25%, transparent);
}
.featured-chips li i{font-size:14px;}

/* ----- Code preview container (children .code-head/.code-body set their own
   font-family — Manrope — so the marketing page never renders JetBrains Mono) ----- */
.code-preview{
  margin-top:24px;background:var(--bg-card);color:var(--ink-dim);
  border:1px solid var(--line);border-radius:14px;
  font-size:13px;overflow:hidden;
}
.code-head{
  display:flex;align-items:center;gap:8px;
  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--bg-soft);
}
.code-head .lights{display:flex;gap:6px;}
.code-head .lights span{
  width:11px;height:11px;border-radius:50%;background:#ddd9d2;
}
.code-head .lights span:nth-child(1){background:#ff6058;}
.code-head .lights span:nth-child(2){background:#ffbd2e;}
.code-head .lights span:nth-child(3){background:#27c93f;}
.code-head .file{
  font-family:var(--font-body);color:#a8a39a;font-size:12px;font-weight:500;
  margin-left:auto;  /* push filename to the right edge */
}
.code-body{
  padding:20px 22px;line-height:1.7;color:var(--ink-dim);
  white-space:pre-wrap;word-break:break-word;background:var(--bg-card);
  font-family:var(--font-body);
  font-size:14px;font-weight:500;
}
.code-body .method{color:var(--purple);font-weight:700;}
.code-body .key{color:var(--turquoise);}
.code-body .str{color:#9070b8;}  /* soft lavender */
.code-body .com{color:#a8a3aa;}
.code-body .punct{color:#b8b3ad;}
.code-body .resp{
  margin-top:14px;padding:14px 16px;border-radius:10px;
  background:rgba(140,174,28,0.10);
  border:1px solid rgba(140,174,28,0.22);
}
.code-body .resp .ok{color:#6a8a1f;font-weight:600;}
.code-body .resp .ms{font-family:var(--font-body);color:#a8a39a;float:right;font-size:12px;font-weight:500;}

@media (max-width: 1080px){
  .product.col-6{grid-column:span 12;}
}
@media (max-width: 760px){
  .featured-spotlight{
    grid-template-columns:1fr;
    margin-bottom:48px;
    min-height:auto;
  }
  .featured-spotlight__photo{
    height:235px;
  }
  .featured-spotlight__content{
    padding:34px 24px 36px;
    gap:16px;
  }
  .featured-spotlight .featured-name{font-size:30px;}
  .featured-spotlight .featured-logo{width:56px;height:56px;}
  .featured-chips li{font-size:12.5px;padding:6px 12px;}
}

/* ---- Dark mode: spotlight white-gradient panels -> dark ---- */
:root[data-theme="dark"] .featured-spotlight{
  background:
    radial-gradient(620px 280px at 0% 0%, rgba(176,111,196,0.16), transparent 60%),
    radial-gradient(520px 240px at 100% 100%, rgba(60,192,208,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-card), var(--bg-soft));
}
:root[data-theme="dark"] .featured-spotlight__content{
  background:
    radial-gradient(360px 220px at 50% 18%, rgba(176,111,196,0.12), transparent 70%),
    radial-gradient(340px 220px at 82% 88%, rgba(60,192,208,0.10), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 94%, transparent), color-mix(in srgb, var(--bg-soft) 80%, transparent));
}