/* ==========================================================================
   §FOB — "Featured on AIToolsay" closing band
   --------------------------------------------------------------------------
   Shared by the tool, GPT, browser-extension and company detail pages. All
   four wrap in `.v2x.atd`, so one scope covers every host; the module classes
   the pages add (`cmp`, `cxd`, `gptd`, `atdx`) never reach these rules.

   Palette comes entirely from the ATD tokens (--accent / --ink / --muted /
   --line / --atd-surface), which `body.theme-dark .v2x.atd` already reassigns,
   so most of dark mode is inherited rather than restated. Only the surfaces
   that hardcode white and the shadows (which do not register on near-black)
   get an explicit dark rule.

   NOTE the `background-image` longhand everywhere a wash is painted. The base
   sheets' dark card rule resets `background-image`, so a wash written with the
   `background` shorthand survives by day and vanishes by night.

   Nothing in here truncates: no ellipsis, no clamp, no fixed-height text box.
   The band grows to fit its copy in every language.
   ========================================================================== */

.v2x.atd .fob{
  --fob-r:28px;
  --fob-pad:clamp(24px,2.8vw,40px);
  --fob-brand:#3680ED;
  --fob-brand-d:#2060C0;
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:26px; padding:var(--fob-pad);
  border-radius:var(--fob-r);
  border:1px solid rgba(54,128,237,.20);
  background-color:#fff;
  background-image:
    radial-gradient(90% 120% at 2% 0%, rgba(54,128,237,.085) 0%, rgba(54,128,237,0) 55%),
    radial-gradient(70% 110% at 100% 100%, rgba(96,164,245,.075) 0%, rgba(96,164,245,0) 58%),
    linear-gradient(180deg, rgba(54,128,237,.035) 0%, rgba(54,128,237,0) 38%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,23,42,.05),
    0 22px 52px -28px rgba(27,82,166,.38);
}
body.theme-dark .v2x.atd .fob{
  border-color:rgba(96,164,245,.20);
  background-color:var(--atd-surface,var(--dk-surface-2,#17171B));
  background-image:
    radial-gradient(90% 120% at 2% 0%, rgba(54,128,237,.20) 0%, rgba(54,128,237,0) 55%),
    radial-gradient(70% 110% at 100% 100%, rgba(96,164,245,.13) 0%, rgba(96,164,245,0) 58%),
    linear-gradient(180deg, rgba(54,128,237,.10) 0%, rgba(54,128,237,0) 38%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.45),
    0 24px 56px -30px rgba(0,0,0,.9);
}

/* Fine dotted field, masked so it fades before it reaches the CTA card. */
.v2x.atd .fob-dots{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(currentColor .85px, transparent .95px);
  background-size:16px 16px;
  color:rgba(27,60,120,.15);
  -webkit-mask-image:linear-gradient(102deg, #000 0%, rgba(0,0,0,.5) 36%, transparent 66%);
          mask-image:linear-gradient(102deg, #000 0%, rgba(0,0,0,.5) 36%, transparent 66%);
}
body.theme-dark .v2x.atd .fob-dots{ color:rgba(150,190,255,.15); }

/* Ambient glow behind the lockup. */
.v2x.atd .fob-aur{
  position:absolute; z-index:0; pointer-events:none;
  width:min(520px,58%); aspect-ratio:1; inset-inline-start:-9%; top:-56%;
  border-radius:50%;
  background-image:radial-gradient(50% 50% at 50% 50%, rgba(54,128,237,.15) 0%, rgba(54,128,237,0) 70%);
}
body.theme-dark .v2x.atd .fob-aur{
  background-image:radial-gradient(50% 50% at 50% 50%, rgba(96,164,245,.20) 0%, rgba(96,164,245,0) 70%);
}

/* Lit top edge — the device the hero, sidebar cards and §CTAX all use. */
.v2x.atd .fob::after{
  content:""; position:absolute; inset-inline:0; top:0; height:1.5px; z-index:1; pointer-events:none;
  background-image:linear-gradient(90deg,
    rgba(54,128,237,0) 0%, rgba(54,128,237,.28) 24%,
    rgba(54,128,237,.55) 50%, rgba(54,128,237,.28) 76%, rgba(54,128,237,0) 100%);
}
body.theme-dark .v2x.atd .fob::after{
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.09) 24%,
    rgba(255,255,255,.22) 50%, rgba(255,255,255,.09) 76%, rgba(255,255,255,0) 100%);
}

/* Decorative sparkle marks. Ornamental and hidden from a11y. */
.v2x.atd .fob-spark{
  position:absolute; z-index:1; pointer-events:none;
  color:var(--fob-brand); opacity:.18;
}
.v2x.atd .fob-spark.s1{ inset-inline-end:31%; top:20px; }
.v2x.atd .fob-spark.s2{ inset-inline-end:26%; bottom:26px; opacity:.12; }
.v2x.atd .fob-spark.s3{ inset-inline-start:41%; bottom:20px; opacity:.10; }
body.theme-dark .v2x.atd .fob-spark{ color:#60A4F5; opacity:.26; }

/* ── Layout ─────────────────────────────────────────────────────────────
   Two zones. The brand column is capped so it never smears across an
   ultra-wide viewport, and the free space collects in the middle gap where
   the decorative field reads as deliberate rather than empty. */
.v2x.atd .fob-in{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,420px);
  align-items:center; gap:clamp(26px,3.4vw,56px);
}

/* ── Left: branding ─────────────────────────────────────────────────── */
.v2x.atd .fob-brand{ min-width:0; max-width:640px; }

.v2x.atd .fob-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 16px; padding:6px 14px 6px 11px;
  border-radius:999px;
  border:1px solid rgba(54,128,237,.28);
  background-color:rgba(54,128,237,.075);
  font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fob-brand-d);
}
body.theme-dark .v2x.atd .fob-eyebrow{
  border-color:rgba(96,164,245,.32);
  background-color:rgba(96,164,245,.13);
  color:#8FC0FF;
}
.v2x.atd .fob-eyebrow i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background-color:currentColor;
  box-shadow:0 0 0 3px rgba(54,128,237,.16);
}

/* The lockup is the section heading: an <h2> carrying a visually hidden name,
   with decorative artwork (alt=""). Both ink variants ship and CSS swaps them
   — the wordmark flips black/white, which no filter reproduces faithfully.
   width/height are on the tags so the box is reserved before the image lands. */
.v2x.atd .fob-lockup{
  display:block; margin:0 0 16px;
  font-size:0; line-height:0;
}
.v2x.atd .fob-logo{
  display:block; width:100%; height:auto;
  max-width:min(100%,268px);
  aspect-ratio:4 / 1;
  object-fit:contain; object-position:left center;
}
.v2x.atd .fob-logo.is-dark{ display:none; }
body.theme-dark .v2x.atd .fob-logo.is-light{ display:none; }
body.theme-dark .v2x.atd .fob-logo.is-dark{ display:block; }

.v2x.atd .fob-desc{
  margin:0 0 20px; max-width:56ch;
  font-size:clamp(14.5px,1.1vw,16px); line-height:1.65;
  color:var(--muted);
}

/* ── Trust indicators ───────────────────────────────────────────────── */
.v2x.atd .fob-trust{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:0; padding:0; list-style:none;
}
.v2x.atd .fob-trust li{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px 8px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background-color:rgba(255,255,255,.78);
  font-size:13px; font-weight:650; color:var(--ink);
  transition:border-color .25s ease, background-color .25s ease,
             transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
body.theme-dark .v2x.atd .fob-trust li{
  border-color:var(--line);
  background-color:rgba(255,255,255,.05);
}
/* The glyph sits in its own tinted disc so the pill reads as a component
   rather than an icon with text next to it. */
.v2x.atd .fob-trust li .ti{
  flex:none; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  color:var(--fob-brand);
  background-color:rgba(54,128,237,.11);
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
body.theme-dark .v2x.atd .fob-trust li .ti{
  color:#7FB2FF; background-color:rgba(96,164,245,.16);
}
.v2x.atd .fob-trust li:hover{
  border-color:rgba(54,128,237,.45);
  background-color:var(--accent-soft2);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -14px rgba(27,82,166,.7);
}
body.theme-dark .v2x.atd .fob-trust li:hover{
  border-color:rgba(96,164,245,.5);
  background-color:rgba(96,164,245,.10);
  box-shadow:0 10px 22px -14px rgba(0,0,0,.9);
}
.v2x.atd .fob-trust li:hover .ti{
  color:#fff;
  background-image:linear-gradient(140deg,var(--fob-brand) 0%,var(--fob-brand-d) 100%);
  transform:scale(1.06);
}

/* ── Right: the CTA card ────────────────────────────────────────────── */
.v2x.atd .fob-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:16px;
  padding:22px;
  border-radius:20px;
  border:1px solid var(--line);
  background-color:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 1px 2px rgba(15,23,42,.04),
    0 16px 36px -20px rgba(15,23,42,.24);
  transition:transform .28s cubic-bezier(.16,1,.3,1), border-color .28s ease, box-shadow .28s ease;
}
body.theme-dark .v2x.atd .fob-card{
  border-color:var(--line);
  background-color:rgba(255,255,255,.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.45),
    0 18px 38px -22px rgba(0,0,0,.9);
}
.v2x.atd .fob-card:hover,
.v2x.atd .fob-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(54,128,237,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 1px 2px rgba(15,23,42,.05),
    0 28px 56px -24px rgba(27,82,166,.45);
}
body.theme-dark .v2x.atd .fob-card:hover,
body.theme-dark .v2x.atd .fob-card:focus-within{
  border-color:rgba(96,164,245,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.5),
    0 28px 56px -24px rgba(0,0,0,.98);
}

.v2x.atd .fob-card-head{ display:flex; align-items:flex-start; gap:12px; }
.v2x.atd .fob-card-ico{
  flex:none; display:grid; place-items:center;
  width:40px; height:40px; border-radius:13px;
  color:#fff;
  background-image:linear-gradient(140deg,var(--fob-brand) 0%,var(--fob-brand-d) 100%);
  box-shadow:0 8px 20px -9px rgba(27,82,166,.9);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.v2x.atd .fob-card:hover .fob-card-ico{ transform:rotate(-6deg) scale(1.06); }
.v2x.atd .fob-card-tx{ min-width:0; }
.v2x.atd .fob-card-h{
  margin:0 0 3px;
  font-size:15px; font-weight:750; letter-spacing:-.01em;
  color:var(--ink);
}
.v2x.atd .fob-card-p{
  margin:0; font-size:13px; line-height:1.5; color:var(--muted);
}

/* ── Badge preview ──────────────────────────────────────────────────
   Replaces the old code string. It shows the artwork an embedder actually
   gets, which is the useful thing to preview — and unlike a one-line code
   snippet it cannot truncate. The locked light/dark files are used rather
   than the adaptive one: the adaptive SVG follows the VIEWER'S OS scheme,
   which would contradict the site's own theme toggle here. */
.v2x.atd .fob-prev{
  position:relative;
  display:grid; place-items:center;
  padding:16px 14px;
  border-radius:14px;
  border:1px dashed rgba(54,128,237,.30);
  background-color:rgba(54,128,237,.045);
  background-image:radial-gradient(rgba(54,128,237,.14) .9px, transparent 1px);
  background-size:12px 12px;
  transition:border-color .28s ease, background-color .28s ease;
}
body.theme-dark .v2x.atd .fob-prev{
  border-color:rgba(96,164,245,.30);
  background-color:rgba(96,164,245,.05);
  background-image:radial-gradient(rgba(150,190,255,.16) .9px, transparent 1px);
}
.v2x.atd .fob-card:hover .fob-prev{ border-color:rgba(54,128,237,.5); }
.v2x.atd .fob-prev img{
  display:block; width:auto; height:auto;
  max-width:min(100%,208px);
  aspect-ratio:202 / 64;
  filter:drop-shadow(0 8px 18px rgba(15,23,42,.16));
  transition:transform .3s cubic-bezier(.16,1,.3,1), filter .3s ease;
}
body.theme-dark .v2x.atd .fob-prev img{ filter:drop-shadow(0 8px 18px rgba(0,0,0,.7)); }
.v2x.atd .fob-card:hover .fob-prev img{
  transform:translateY(-2px) scale(1.02);
  filter:drop-shadow(0 12px 24px rgba(27,82,166,.30));
}
.v2x.atd .fob-badge.is-dark{ display:none; }
body.theme-dark .v2x.atd .fob-badge.is-light{ display:none; }
body.theme-dark .v2x.atd .fob-badge.is-dark{ display:block; }

.v2x.atd .fob-prev-cap{
  position:absolute; top:-9px; inset-inline-start:14px;
  padding:1px 8px; border-radius:999px;
  border:1px solid rgba(54,128,237,.28);
  background-color:#fff;
  font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fob-brand-d);
}
body.theme-dark .v2x.atd .fob-prev-cap{
  border-color:rgba(96,164,245,.32);
  background-color:var(--atd-surface,var(--dk-surface-2,#17171B));
  color:#8FC0FF;
}

/* ── Copy button ────────────────────────────────────────────────────── */
.v2x.atd .fob-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:50px; padding:13px 20px;
  border:0; border-radius:14px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase;
  color:#fff;
  background-image:linear-gradient(140deg,var(--fob-brand) 0%,var(--fob-brand-d) 100%);
  box-shadow:0 12px 26px -12px rgba(27,82,166,.9);
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color:transparent;
}
/* A sheen that sweeps once per hover. Transform-only, so it composites. */
.v2x.atd .fob-btn::before{
  content:""; position:absolute; inset:0 auto 0 -40%; width:36%;
  background-image:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(0); opacity:0; pointer-events:none;
}
.v2x.atd .fob-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px -12px rgba(27,82,166,1);
  filter:saturate(1.08);
}
.v2x.atd .fob-btn:active{ transform:translateY(0) scale(.994); }
.v2x.atd .fob-btn:focus-visible{ outline:2px solid var(--fob-brand); outline-offset:3px; }

/* Both glyphs and both labels ship in the DOM and CSS swaps them off
   `.is-copied`, so nothing rewrites a className and a double-click cannot
   strand the wrong icon — the lesson the share button already records. */
.v2x.atd .fob-btn .ic{ display:inline-flex; }
.v2x.atd .fob-btn .ic-ok{ display:none; }
.v2x.atd .fob-btn .lb-ok{ display:none; }
.v2x.atd .fob-btn.is-copied{
  background-image:linear-gradient(140deg,#22C55E 0%,#15A349 100%);
  box-shadow:0 12px 26px -12px rgba(21,163,73,.9);
}
.v2x.atd .fob-btn.is-copied .ic-main,
.v2x.atd .fob-btn.is-copied .lb-main{ display:none; }
.v2x.atd .fob-btn.is-copied .ic-ok,
.v2x.atd .fob-btn.is-copied .lb-ok{ display:inline-flex; }
.v2x.atd .fob-btn.is-error{
  background-image:linear-gradient(140deg,#EF4444 0%,#B91C1C 100%);
  box-shadow:0 12px 26px -12px rgba(185,28,28,.9);
}
/* The failure text is longer than the label it replaces, so the button is
   allowed to wrap rather than clip it. */
.v2x.atd .fob-btn.is-error{ text-transform:none; letter-spacing:0; font-size:13px; }

/* Live region for the copy result. Visually hidden but announced. */
.v2x.atd .fob-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── Entrance + motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .v2x.atd .fob{ animation:fobIn .55s cubic-bezier(.16,1,.3,1) both; }
  @keyframes fobIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
  .v2x.atd .fob-spark.s1{ animation:fobFloat 7s ease-in-out infinite; }
  .v2x.atd .fob-spark.s2{ animation:fobFloat 9.5s ease-in-out infinite reverse; }
  @keyframes fobFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
  .v2x.atd .fob-btn:hover::before{ animation:fobSheen .75s ease-out 1; }
  @keyframes fobSheen{
    0%{ transform:translateX(0); opacity:0 }
    12%{ opacity:1 }
    100%{ transform:translateX(420%); opacity:0 }
  }
  .v2x.atd .fob-btn.is-copied .ic-ok{ animation:fobPop .34s cubic-bezier(.16,1,.3,1); }
  @keyframes fobPop{ from{ transform:scale(.5); opacity:0 } to{ transform:scale(1); opacity:1 } }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .v2x.atd .fob-in{ grid-template-columns:minmax(0,1fr) minmax(330px,380px); gap:30px; }
  .v2x.atd .fob-spark.s1,
  .v2x.atd .fob-spark.s2{ display:none; }
}
/* Tablet — one column, but the card stays a comfortable reading width. */
@media (max-width:960px){
  .v2x.atd .fob{ --fob-r:24px; }
  .v2x.atd .fob-in{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .v2x.atd .fob-brand{ max-width:none; }
  .v2x.atd .fob-desc{ max-width:64ch; }
  .v2x.atd .fob-card{ width:100%; }
  /* The dot mask is tuned for a wide band; stacked it must fade down, not
     across, or it wipes the wrong half of the panel. */
  .v2x.atd .fob-dots{
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 42%, transparent 74%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 42%, transparent 74%);
  }
  .v2x.atd .fob-spark.s3{ display:none; }
}
@media (max-width:600px){
  .v2x.atd .fob{ --fob-pad:20px; --fob-r:20px; margin-top:20px; }
  .v2x.atd .fob-logo{ max-width:min(100%,214px); }
  .v2x.atd .fob-card{ padding:18px; border-radius:18px; }
  /* 44px minimum touch target, comfortably cleared. */
  .v2x.atd .fob-btn{ min-height:52px; }
  .v2x.atd .fob-trust li{ padding:9px 14px 9px 9px; }
}
@media (max-width:430px){
  /* Below this three pills cannot share a row without breaking mid-word, so
     each takes its own full-width line. */
  .v2x.atd .fob-trust{ flex-direction:column; align-items:stretch; gap:8px; }
  .v2x.atd .fob-trust li{ justify-content:flex-start; }
  .v2x.atd .fob-prev img{ max-width:min(100%,176px); }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .v2x.atd .fob,
  .v2x.atd .fob-spark,
  .v2x.atd .fob-card,
  .v2x.atd .fob-card-ico,
  .v2x.atd .fob-btn,
  .v2x.atd .fob-btn::before,
  .v2x.atd .fob-prev img,
  .v2x.atd .fob-trust li,
  .v2x.atd .fob-trust li .ti{
    animation:none !important; transition:none !important;
  }
  .v2x.atd .fob-card:hover,
  .v2x.atd .fob-card:focus-within,
  .v2x.atd .fob-btn:hover,
  .v2x.atd .fob-trust li:hover,
  .v2x.atd .fob-card:hover .fob-prev img,
  .v2x.atd .fob-card:hover .fob-card-ico{ transform:none; }
}

/* ── Forced colours ─────────────────────────────────────────────────── */
@media (forced-colors:active){
  .v2x.atd .fob,
  .v2x.atd .fob-card,
  .v2x.atd .fob-prev,
  .v2x.atd .fob-trust li{ border:1px solid CanvasText; }
  .v2x.atd .fob-btn{ border:1px solid ButtonText; }
  .v2x.atd .fob-dots,
  .v2x.atd .fob-aur,
  .v2x.atd .fob-spark,
  .v2x.atd .fob-btn::before{ display:none; }
}