/* ══════════════════════════════════════════════════════════════════════════
   §CMP-ASIDE) Hero right column — cover + profile panel
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.cmp .cmp-aside{ display:flex; flex-direction:column; gap:16px; height:100%; }

.v2x.atd.cmp .cmp-cover{
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(54,128,237,.10), rgba(54,128,237,.02));
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.30);
}
.v2x.atd.cmp .cmp-cover img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
body.theme-dark .v2x.atd.cmp .cmp-cover{ border-color:#272B3A; }

/* Screenshot thumbnails. Four squares under the cover; the fifth cell becomes
   a "+n more" plate rather than a truncated image. */
.v2x.atd.cmp .cmp-shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.v2x.atd.cmp .cmp-shot{
  display:block; aspect-ratio:1; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--accent-soft2);
  transition:transform .28s cubic-bezier(.16,1,.3,1), border-color .22s ease;
}
.v2x.atd.cmp .cmp-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.v2x.atd.cmp .cmp-shot.is-more{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:.72rem; font-weight:700; color:var(--muted); padding:4px;
}
body.theme-dark .v2x.atd.cmp .cmp-shot{ border-color:#272B3A; background:rgba(255,255,255,.05); }
@media (hover:hover) and (pointer:fine){
  .v2x.atd.cmp a.cmp-shot:hover{ transform:translateY(-2px); border-color:var(--accent); }
}
/* The panel is the Tool Information card's recipe (§SPINE-BLUE): a 150deg
   diagonal wash on a white ground, a hairline blue edge, a tinted icon plate.
   It is NOT `.atd-info` — that class carries the sidebar's orbit-ring hover,
   which belongs to a card you point at, and this panel is not interactive. */
.v2x.atd.cmp .cmp-profile{
  flex:1 1 auto;
  padding:20px; border-radius:16px;
  border:1px solid rgba(54,128,237,.22);
  background-image:linear-gradient(150deg,
    rgba(54,128,237,.075) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.05) 100%);
  background-color:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.28);
}
body.theme-dark .v2x.atd.cmp .cmp-profile{
  border-color:rgba(54,128,237,.30);
  background-image:linear-gradient(150deg,
    rgba(54,128,237,.13) 0%, rgba(54,128,237,0) 46%, rgba(54,128,237,.08) 100%);
  background-color:#171922;
  box-shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 36px -20px rgba(0,0,0,.80);
}
.v2x.atd.cmp .cmp-profile-head{ display:flex; align-items:center; gap:11px; margin-bottom:15px; }

/* Fact tiles. Two across on desktop; one across once the column narrows, where
   two tracks would put "San Francisco, California, USA" on four lines. */
.v2x.atd.cmp .cmp-pfs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.v2x.atd.cmp .cmp-pf{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 12px; border-radius:12px;
  background:var(--t-bg); border:1px solid var(--t-line);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
}
.v2x.atd.cmp .cmp-pf-ic{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  /* --t-1p is the ramp measured for a white GLYPH (3:1). A white LABEL on the
     same fill would need 4.5 and fail; nothing here puts text on this plate. */
  background:var(--t-1p); color:#fff;
  box-shadow:0 2px 6px rgba(var(--t-rgb),.35);
}
.v2x.atd.cmp .cmp-pf-tx{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.v2x.atd.cmp .cmp-pf-k{
  font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--t-ink);
}
.v2x.atd.cmp .cmp-pf-v{
  font-size:.88rem; font-weight:700; line-height:1.35; color:var(--ink);
  overflow-wrap:anywhere;
}
@media (hover:hover) and (pointer:fine){
  .v2x.atd.cmp .cmp-pf:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(var(--t-rgb),.55); }
}
@media (prefers-reduced-motion:reduce){
  .v2x.atd.cmp .cmp-pf{ transition:none; }
  .v2x.atd.cmp .cmp-pf:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §CMP-TILE) The tone-ramped tile grid — Models (free text) + Capabilities
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.cmp .cmp-tiles{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px;
}
.v2x.atd.cmp .cmp-tile{
  position:relative; overflow:hidden;
  padding:17px 16px; border-radius:14px;
  background-image:linear-gradient(150deg,
    rgba(var(--t-rgb),.075) 0%, rgba(var(--t-rgb),.012) 46%, rgba(var(--t-rgb),.05) 100%);
  background-color:#fff;
  border:1px solid rgba(var(--t-rgb),.20);
  transition:transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, border-color .22s ease;
}
body.theme-dark .v2x.atd.cmp .cmp-tile{
  background-image:linear-gradient(150deg,
    rgba(var(--t-rgb),.14) 0%, rgba(var(--t-rgb),.025) 46%, rgba(var(--t-rgb),.09) 100%);
  background-color:#1B1E28;
  border-color:rgba(var(--t-rgb),.30);
}
/* The coloured top edge the §AIM card wears, at tile scale — it is what ties
   these to the product cards above them as one family. */
.v2x.atd.cmp .cmp-tile::before{
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--t-dot1), var(--t-btn));
}
.v2x.atd.cmp .cmp-tile-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; margin-bottom:11px;
  background:var(--t-1p); color:#fff;
  box-shadow:0 3px 10px rgba(var(--t-rgb),.35);
}
.v2x.atd.cmp .cmp-tile-ic img{ width:20px; height:20px; object-fit:contain; }
.v2x.atd.cmp .cmp-tile-h{
  margin:0 0 5px; font-family:var(--font); font-size:1rem; font-weight:700;
  letter-spacing:-.012em; line-height:1.32; color:var(--ink);
}
.v2x.atd.cmp .cmp-tile-p{
  margin:0; font-size:.88rem; line-height:1.55; color:var(--muted);
}
@media (hover:hover) and (pointer:fine){
  .v2x.atd.cmp .cmp-tile:hover{
    transform:translateY(-3px); border-color:rgba(var(--t-rgb),.40);
    box-shadow:0 14px 28px -16px rgba(var(--t-rgb),.60);
  }
}
@media (prefers-reduced-motion:reduce){
  .v2x.atd.cmp .cmp-tile{ transition:none; }
  .v2x.atd.cmp .cmp-tile:hover{ transform:none; }
}

/* A second heading INSIDE a section — used once, between the linked AI model
   cards and the free-text model tiles that share the Models section. */
.v2x.atd.cmp .cmp-subhead{
  margin:24px 0 13px; font-family:var(--font); font-size:1rem; font-weight:700;
  letter-spacing:-.01em; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.v2x.atd.cmp .cmp-subhead::after{
  content:""; flex:1 1 auto; height:1px; background:var(--line);
}

/* ══════════════════════════════════════════════════════════════════════════
   §CMP-TEAM) Leadership cards — the §CMP-TILE recipe, with a person in it.

   These used to be a horizontal card: avatar on the left, name/role/bio in a
   column to its right, on a flat white ground with a plain grey border. Beside
   the Capabilities tiles directly above them — coloured top edge, tone wash,
   plate on TOP with the text beneath — they read as a different component from
   a different page. They are the same card now: same track width, same radius
   and padding, same wash, same edge, same hover. The only thing that differs
   is the plate's size, because here the plate IS the subject rather than a
   supporting mark for a heading.

   Every ink was re-measured against the WASHED composite rather than against
   #fff / #1B1E28 — the wash tints the ground toward the tone and takes contrast
   with it, which is the regression the --muted2 note in atd-styles records.
   Worst case across all six tones and both themes: the role label at 4.77:1
   (amber, light) and the bio at 5.06:1 (amber, dark). All 36 pairs clear 4.5.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.cmp .cmp-team{
  /* The same track as .cmp-tiles, so Leadership and Capabilities land on one
     column rhythm instead of two grids that nearly line up. */
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px;
}
.v2x.atd.cmp .cmp-mem{
  position:relative; overflow:hidden;
  padding:17px 16px; border-radius:14px;
  background-image:linear-gradient(150deg,
    rgba(var(--t-rgb),.075) 0%, rgba(var(--t-rgb),.012) 46%, rgba(var(--t-rgb),.05) 100%);
  background-color:#fff;
  border:1px solid rgba(var(--t-rgb),.20);
  transition:transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, border-color .22s ease;
}
body.theme-dark .v2x.atd.cmp .cmp-mem{
  background-image:linear-gradient(150deg,
    rgba(var(--t-rgb),.14) 0%, rgba(var(--t-rgb),.025) 46%, rgba(var(--t-rgb),.09) 100%);
  background-color:#1B1E28;
  border-color:rgba(var(--t-rgb),.30);
}
.v2x.atd.cmp .cmp-mem::before{
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--t-dot1), var(--t-btn));
}

/* The portrait plate. `display:flex` rather than the old `inline-flex` is what
   puts it on its own line and drops the name beneath it — the card is a normal
   block flow now, not a two-column flex row. 46px against the tile's 40: a
   face, or a single initial standing in for one, needs more room than a glyph,
   and this is the only measurement the two cards do not share. */
.v2x.atd.cmp .cmp-mem-av{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px; overflow:hidden;
  margin-bottom:11px;
  /* No photo is on file for ANY of the 37 team members, so this initials plate
     is the design rather than a fallback — the same call the hero makes about
     company logos. A photo, when one arrives, fills the same plate.

     ⚠️ --t-1 IS NOT USABLE HERE. The initial is TEXT on a filled plate, so it
     needs 4.5:1, and --t-1 is the ramp's light end: white on it measures 2.15
     (amber) to 4.23 (violet) — four of the six tones fail, two of them badly.
     --t-btn is the first step toward --t-2 that clears 4.6 on every tone
     (4.60-4.63), which is why §AIM introduced it for exactly this reason, and
     --t-2 runs 5.04-7.73. Running the gradient btn -> t-2 puts the whole plate
     at 4.60 or better at its lightest point. The 3:1 --t-1p ramp used by
     .cmp-tile-ic and .cmp-pf-ic is fine where it is: those carry a GLYPH. */
  background:linear-gradient(140deg, var(--t-btn), var(--t-2));
  color:#fff; font-family:var(--font); font-weight:800; font-size:1.1rem; line-height:1;
  box-shadow:0 3px 10px rgba(var(--t-rgb),.35);
}
.v2x.atd.cmp .cmp-mem-av img{ width:100%; height:100%; object-fit:cover; }
.v2x.atd.cmp .cmp-mem-tx{ min-width:0; }
.v2x.atd.cmp .cmp-mem-nm{
  margin:0; font-family:var(--font); font-size:1rem; font-weight:700;
  letter-spacing:-.012em; line-height:1.32; color:var(--ink);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.v2x.atd.cmp .cmp-mem-in{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px; flex:0 0 auto;
  background:var(--accent-soft); color:var(--accent-dark); font-size:.7rem;
  transition:background-color .2s ease, color .2s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
body.theme-dark .v2x.atd.cmp .cmp-mem-in{ background:rgba(54,128,237,.20); color:#8CBEFA; }
.v2x.atd.cmp .cmp-mem-rl{
  display:block; margin-top:4px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--t-ink);
}
.v2x.atd.cmp .cmp-mem-bio{
  margin:9px 0 0; font-size:.87rem; line-height:1.55; color:var(--muted);
}
@media (hover:hover) and (pointer:fine){
  .v2x.atd.cmp .cmp-mem:hover{
    transform:translateY(-3px); border-color:rgba(var(--t-rgb),.40);
    box-shadow:0 14px 28px -16px rgba(var(--t-rgb),.60);
  }
  .v2x.atd.cmp .cmp-mem-in:hover{ background:var(--accent); color:#fff; transform:scale(1.1); }
}
@media (prefers-reduced-motion:reduce){
  .v2x.atd.cmp .cmp-mem{ transition:none; }
  .v2x.atd.cmp .cmp-mem:hover{ transform:none; }
}
/* ══════════════════════════════════════════════════════════════════════════
   §CMP-FIX) Refinements to shared ATD components
   ══════════════════════════════════════════════════════════════════════════ */

/* A "view all" link riding in a section heading. `.v2-section-title` is a flex
   row, so this only needs to claim the free space. */
.v2x.atd.cmp .atd-sec-link{ margin-inline-start:auto; font-size:.84rem; white-space:nowrap; }

/* §AIM cards with nowhere to go. Three of OpenAI's six product rows carry
   neither a linked tool nor a URL, and a card that lifts and glows under the
   pointer while doing nothing is worse than one that plainly sits still. */
.v2x.atd.cmp .atd-aim.is-static{ cursor:default; }
@media (hover:hover) and (pointer:fine){
  .v2x.atd.cmp .atd-aim.is-static:hover{
    transform:none; border-color:rgba(var(--t-rgb),.20);
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
  }
  body.theme-dark .v2x.atd.cmp .atd-aim.is-static:hover{
    border-color:rgba(var(--t-rgb),.30);
    box-shadow:0 1px 2px rgba(0,0,0,.40), 0 6px 20px rgba(0,0,0,.35);
  }
}

/* The alternatives rail carries competitor NAMES, not tools with logos, so its
   letter plate takes the row's own tone instead of the one flat accent tint the
   tool page uses for real logos. */
.v2x.atd.cmp .atd-alt .lg{
  background:var(--t-bg); color:var(--t-ink); border-color:var(--t-line);
}
.v2x.atd.cmp .atd-alt.is-static{ cursor:default; }
@media (hover:hover) and (pointer:fine){
  .v2x.atd.cmp .atd-alt.is-static:hover{ transform:none; box-shadow:none; background-color:transparent; border-color:transparent; }
}

/* §CHLOG runs newest-first and its rail fades DOWNWARD, reading as the log
   running back into the past. The company timeline runs oldest-first — it is a
   growth story — so its rail is flipped to fade the other way. Without this the
   line would be palest at the newest entry, which is backwards. */
.v2x.atd.cmp .cmp-tl .atd-cl-wrap::before{
  background:linear-gradient(0deg,
    rgba(54,128,237,.34) 0%, rgba(54,128,237,.15) 62%, rgba(54,128,237,0) 100%);
}
body.theme-dark .v2x.atd.cmp .cmp-tl .atd-cl-wrap::before{
  background:linear-gradient(0deg,
    rgba(96,164,245,.40) 0%, rgba(96,164,245,.18) 62%, rgba(96,164,245,0) 100%);
}
/* A history entry has no title, so the body is the paragraph alone and needs
   the head row's top spacing back. */
.v2x.atd.cmp .cmp-tl .atd-cl-body{ padding-top:11px; }
.v2x.atd.cmp .cmp-tl .atd-cl-tx{ margin:0; }

/* §CMP-STICK moved out on 2026-08-13. The rail's sticky behaviour is now
   defined ONCE for all three ATD pages in tool/atd-styles (§TABS-STICK),
   using --atd-stick / --atd-rail-h. Nothing company-specific remains: the
   offset, the scroll-margin and the pinned shadow were identical for the
   tool and AI-model pages, and three copies of one surface is the trap
   this kit keeps re-learning. */

/* ══════════════════════════════════════════════════════════════════════════
   §CMP-RESP) Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1199.98px){
  /* The hero column narrows before the page does; two fact tracks stop fitting
     a headquarters string well before the layout stacks. */
  .v2x.atd.cmp .cmp-pfs{ grid-template-columns:1fr; }
}
@media (max-width:991.98px){
  /* Stacked hero: the aside is full width again, so two tracks fit once more. */
  .v2x.atd.cmp .cmp-pfs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575.98px){
  .v2x.atd.cmp .cmp-pfs{ grid-template-columns:1fr; }
  .v2x.atd.cmp .cmp-profile{ padding:16px; }
  .v2x.atd.cmp .cmp-tiles,
  .v2x.atd.cmp .cmp-team{ grid-template-columns:1fr; }
  .v2x.atd.cmp .cmp-mem{ padding:14px; }
}