/* ==========================================================================
   family.css — the family relaunch (25 Aug 2026).
   The homepage becomes the family poster — School. Agent. Network. — and each
   product gets its own page. Spec: docs/specs/2026-08-25-family-relaunch-design.md
   Tokens, base, scenes, poster and screens are reused, never overridden.
   Stand motifs (module chips, migration ribbon, ghost words) arrive here,
   recoloured into the site's violet — siblings of the print kit, not clones.
   ========================================================================== */

/* --- Product-page hero. The billboard, one storey shorter. ---------------- */

.phero--page { min-height: 88svh; }
.phero--page .bghost { padding-top: 16vh; }
.phero--page .bghost span { font-size: clamp(7rem, 20vw, 19rem); }

/* The product kicker above the headline — which member of the family this is. */
.phero__prod {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1.2rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.phero__prod b { font-weight: 640; color: var(--violet-lift); }
.phero__prod span { color: var(--chalk-mute); }

.kick { margin-bottom: 1rem; }

/* --- The three doors. The flyer front, as architecture. ------------------- */

.doors { border-top: 1px solid var(--hair); padding: clamp(4rem, 12vh, 8rem) 0; }
.doors__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); max-width: 30ch; }

.doors ol { margin: 0; padding: 0; }
.door {
  list-style: none;
  position: relative;
  display: grid;
  gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--hair);
  padding: clamp(2rem, 5vh, 3.25rem) 0;
}
@media (min-width: 900px) {
  .door { grid-template-columns: 5ch minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: baseline; }
}
.door:last-child { border-bottom: 1px solid var(--hair); }

.door::before {
  content: '';
  position: absolute;
  inset: 0 -1.25rem;
  border-radius: 12px;
  background: var(--violet-wash);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-state);
}
.door:hover::before { opacity: 0.55; }

.door__num {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--chalk-mute);
}

.door__name {
  display: block;
  font-size: clamp(2.5rem, 5.6vw, 5.25rem);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--chalk);
  text-decoration: none;
  transition: transform 0.5s var(--ease-enter);
}
.door:hover .door__name { transform: translateX(10px); }
.door__name i { font-style: normal; color: var(--violet); }
.door__for {
  display: block;
  margin-top: 0.625rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}

.door__body { min-width: 0; }
.door__sent {
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--chalk-dim);
  max-width: 30ch;
  text-wrap: balance;
}

/* The capability strings from the flyer's back, as quiet chips. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
}
.chips li {
  list-style: none;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  border: 1px solid var(--hair);
  border-radius: var(--r-chip);
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
}

.door__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.375rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  text-decoration: none;
  transition: color 0.3s var(--ease-state);
}
.door__go:hover, .door__go:focus-visible { color: var(--violet-lift); }
.door__go svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-enter); }
.door__go:hover svg { transform: translateX(3px); }

/* --- The migration ribbon. From the stand's purple band. ------------------ */

.ribbon {
  border-top: 1px solid var(--hair);
  background:
    radial-gradient(60% 120% at 20% 100%, rgba(139, 92, 246, 0.22), transparent 70%),
    var(--ink-raise);
  padding: clamp(3rem, 8vh, 5rem) 0;
}
.ribbon__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
}
.ribbon__copy { flex: 1 1 32ch; }
.ribbon h2 {
  margin: 0;
  font-size: var(--t-sub);
  font-weight: 640;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.ribbon h2 i { font-style: normal; color: var(--violet-lift); }
.ribbon p {
  margin: 0.75rem 0 0;
  font-size: var(--t-body);
  color: var(--chalk-dim);
  max-width: 44ch;
}
.ribbon__law {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

/* --- The closing invitation band on product pages. ------------------------ */

.ctaband {
  border-top: 1px solid var(--hair);
  padding: clamp(4rem, 12vh, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.ctaband::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(44% 60% at 78% 100%, var(--violet-wash), transparent 72%);
}
.ctaband__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem clamp(2rem, 5vw, 4rem);
}
.ctaband h2 { margin: 0; max-width: 18ch; flex: 1 1 24ch; }
.ctaband__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* --- Sibling strip: where to go next from a product page. ----------------- */

.sibs {
  border-top: 1px solid var(--hair);
  padding: clamp(2.5rem, 7vh, 4.5rem) 0;
}
.sibs__grid { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 700px) { .sibs__grid { grid-template-columns: 1fr 1fr; } }
.sibs a {
  display: block;
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-decoration: none;
  transition: background 0.45s var(--ease-state);
}
.sibs a:hover { background: var(--ink-raise); }
.sibs em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--t-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  margin-bottom: 0.625rem;
}
.sibs b {
  display: block;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--chalk);
}
.sibs span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-small);
  color: var(--chalk-dim);
  max-width: 40ch;
}

/* --- The desk band on the School page: the front desk that never closes. -- */

.desk247 { border-top: 1px solid var(--hair); padding: clamp(4rem, 12vh, 8rem) 0; }
.desk247__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 960px) { .desk247__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.desk247 h2 { margin: 0 0 1.25rem; max-width: 20ch; }
.desk247 h2 i { font-style: normal; color: var(--violet); }
.desk247__lead { font-size: var(--t-lead); line-height: 1.35; color: var(--chalk-dim); max-width: 34ch; text-wrap: balance; }
.desk247__facts { margin: 0; padding: 0; display: flex; flex-direction: column; }
.desk247__facts li {
  list-style: none;
  border-top: 1px solid var(--hair);
  padding: clamp(0.875rem, 2vh, 1.25rem) 0;
  font-size: var(--t-body);
  color: var(--chalk-dim);
  max-width: 46ch;
}
.desk247__facts li:last-child { border-bottom: 1px solid var(--hair); }
.desk247__facts b { font-weight: 560; color: var(--chalk); }

/* --- Network vignettes. Fictional by design; the network is members-only. - */

.vign {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
}
@media (min-width: 700px) { .vign { grid-template-columns: 1fr 1fr; } }

.vcard {
  background: var(--ink-raise);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  min-width: 0;
}
.vcard--wide { grid-column: 1 / -1; }
.vcard__kick {
  margin: 0 0 0.875rem;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.vcard__kick i { font-style: normal; color: var(--violet-lift); }
.vcard h3 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.vcard p { margin: 0.5rem 0 0; font-size: var(--t-small); color: var(--chalk-dim); }

.vrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--hair); padding: 0.75rem 0; }
.vrow:first-of-type { margin-top: 1rem; }
.vrow b { font-size: var(--t-small); font-weight: 560; color: var(--chalk); }
.vrow span { font-family: var(--mono); font-size: var(--t-nano); letter-spacing: 0.1em; text-transform: uppercase; color: var(--chalk-mute); }
.vrow .ok { color: var(--signal); }

.vmeter { display: flex; gap: 4px; margin-top: 1rem; }
.vmeter i { height: 4px; flex: 1; border-radius: 2px; background: var(--hair-strong); }
.vmeter i.on { background: var(--violet); }

/* --- Screens strip when a page has only the laptop. ----------------------- */

.screens--solo .screens__stage { justify-content: flex-start; }
.screens--solo .dev--mac { width: min(100%, 980px); }

/* --- Reveal politeness for the new blocks. -------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .door[data-reveal]:not(.is-in) .door__name { transform: translateX(-1.5rem); }
  .door.is-in .door__name i { animation: period-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both; }
  .door[data-reveal]:not(.is-in) .door__name i { opacity: 0; }
}

/* --- The hero duo: chest-reveal and the tuxedo, side by side (25 Aug). ----
   27 Aug: the superhero comes forward (Ashley). The overlap is made by the
   negative margin; which figure paints on top is decided here, and it is the
   superhero. Nothing else about the composition moves. Both are up 25% —
   the ceiling before the pair reaches the CTA row on a 1280x800 screen. */

.phero__duo {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: center;
  display: flex;
  align-items: flex-end;
  margin-bottom: -2px;
}
.phero__duo img { display: block; height: auto; }

/* The two files are not framed alike, and matching their CSS widths does not
   match the men. The tuxedo fills 98% of his frame; the superhero fills 93%
   and carries dead space under his shoes. Set to the same width, the tuxedo
   renders 21% taller and keeps the foreground whatever the z-index says. The
   widths below are set from the measured alpha bounds, not from the files:
   they put the superhero about 9% taller on screen, which is what reads as
   nearer. Changing either figure means re-measuring both. */
.phero__duo .duo--reveal {
  width: clamp(180px, 18vw, 268px);
  margin-right: clamp(-78px, -4.4vw, -50px);   /* a real overlap, not a near miss */
  margin-bottom: clamp(-25px, -1.63vw, -16px);   /* his shoes down onto the tuxedo's line */
  position: relative;
  z-index: 1;                       /* in front — the superhero leads */
}
.phero__duo .duo--tux {
  width: clamp(119px, 11.9vw, 177px);
  position: relative;
  z-index: 0;                       /* behind */
}
@media (max-width: 899px) {
  .phero__duo { margin-top: 0.5rem; }
  .phero__duo .duo--reveal { width: min(190px, 44vw); margin-bottom: -4vw; }
  .phero__duo .duo--tux { width: min(120px, 28vw); }
}

/* Each figure bobs on his own clock once the pair is in. */
@media (prefers-reduced-motion: no-preference) {
  .phero__duo.is-in .duo--tux { animation: dean-float 7s ease-in-out 1.4s infinite; }
  .phero__duo.is-in .duo--reveal { animation: dean-float 8.2s ease-in-out 2.1s infinite; }
}

/* --- The family flow: one booking through all three (25 Aug). ------------- */

/* The step cards are opaque, so the figure standing behind them is masked at
   their top edge — depth, not an accident, but he needs to sit high enough
   that it is his knees the cards cut and not his chest. */
.famflow .figmark { top: clamp(0.5rem, 2vh, 1.5rem); width: clamp(126px, 11.6vw, 172px); }

.famflow { border-top: 1px solid var(--hair); padding: clamp(4rem, 12vh, 8rem) 0; }
.famflow__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); max-width: 30ch; }
.famflow__steps {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  counter-reset: none;
}
@media (min-width: 900px) { .famflow__steps { grid-template-columns: repeat(3, 1fr); } }
.famflow__steps li {
  list-style: none;
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: background 0.45s var(--ease-state);
}
.famflow__steps li:hover { background: var(--ink-raise); }
.famflow__steps em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--violet-lift);
  margin-bottom: 0.875rem;
}
.famflow__steps h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 640;
  letter-spacing: -0.02em;
}
.famflow__steps p {
  margin: 0.75rem 0 0;
  font-size: var(--t-small);
  color: var(--chalk-dim);
  max-width: 38ch;
}

/* --- The comparison. Categories, never names. ----------------------------- */

.compare { border-top: 1px solid var(--hair); padding: clamp(4rem, 12vh, 8rem) 0; }
.compare__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); max-width: 30ch; }

.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.compare__table th, .compare__table td {
  border-top: 1px solid var(--hair);
  padding: clamp(0.875rem, 2vh, 1.125rem) 1rem;
  text-align: center;
  font-size: var(--t-small);
  color: var(--chalk-dim);
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 1px solid var(--hair); }
.compare__table thead th {
  border-top: none;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  font-weight: 400;
}
.compare__table th[scope='row'] {
  text-align: left;
  font-weight: 500;
  color: var(--chalk);
  max-width: 34ch;
}
.compare__table .compare__dean {
  background: rgba(139, 92, 246, 0.07);
}
.compare__table thead .compare__dean {
  color: var(--violet-lift);
  font-weight: 640;
}
.tick { color: var(--violet-lift); font-weight: 640; }
.tick--dim { color: var(--chalk-mute); font-weight: 400; }
.cross { color: var(--chalk-faint); }
.dash { color: var(--chalk-faint); }
.varies {
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-mute);
}
.compare__note {
  margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
  font-size: var(--t-micro);
  color: var(--chalk-mute);
  max-width: 62ch;
  line-height: 1.7;
}

/* Rows answer the pointer like the wordwall does. */
.compare__table tbody tr {
  transition: background 0.35s var(--ease-state);
}
.compare__table tbody tr:hover { background: rgba(139, 92, 246, 0.05); }

/* --- The lead over the comparison, and the strip of tools Dean replaces. -- */

.compare__lead {
  margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--chalk-dim);
  max-width: 44ch;
  text-wrap: balance;
}

.replaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
}
.replaces s {
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  border: 1px solid var(--hair);
  border-radius: var(--r-chip);
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
  text-decoration-color: rgba(240, 149, 92, 0.6);
  text-decoration-thickness: 1px;
}
.replaces__arrow { color: var(--chalk-mute); padding: 0 0.25rem; }
.replaces b {
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 640;
  color: var(--violet-lift);
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: var(--violet-wash);
  border-radius: var(--r-chip);
  padding: 0.375rem 0.875rem;
  white-space: nowrap;
}

/* The struck tools arrive one at a time, then Dean lands. */
@media (prefers-reduced-motion: no-preference) {
  .replaces s, .replaces b, .replaces__arrow {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s var(--ease-enter), transform 0.55s var(--ease-enter);
  }
  .replaces.is-in s, .replaces.is-in b, .replaces.is-in .replaces__arrow { opacity: 1; transform: none; }
  .replaces.is-in s:nth-of-type(1) { transition-delay: 0.05s; }
  .replaces.is-in s:nth-of-type(2) { transition-delay: 0.12s; }
  .replaces.is-in s:nth-of-type(3) { transition-delay: 0.19s; }
  .replaces.is-in s:nth-of-type(4) { transition-delay: 0.26s; }
  .replaces.is-in s:nth-of-type(5) { transition-delay: 0.33s; }
  .replaces.is-in s:nth-of-type(6) { transition-delay: 0.40s; }
  .replaces.is-in s:nth-of-type(7) { transition-delay: 0.47s; }
  .replaces.is-in .replaces__arrow { transition-delay: 0.56s; }
  .replaces.is-in b { transition-delay: 0.64s; }
}

/* --- Network membership split: what each side gets (25 Aug). -------------- */

.netsplit { border-top: 1px solid var(--hair); padding: clamp(4rem, 12vh, 8rem) 0; }
.netsplit__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); max-width: 30ch; }
.netsplit__grid { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 800px) { .netsplit__grid { grid-template-columns: 1fr 1fr; } }
.netsplit__panel {
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: background 0.45s var(--ease-state);
}
.netsplit__panel:hover { background: var(--ink-raise); }
.netsplit__panel h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 640;
  letter-spacing: -0.02em;
}
.netsplit__panel ul { margin: 0; padding: 0; }
.netsplit__panel li {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  border-top: 1px solid var(--hair);
  padding: 0.875rem 0;
  font-size: var(--t-small);
  color: var(--chalk-dim);
  max-width: 48ch;
}
.netsplit__panel li .tick { flex: none; }

/* --- Ask Dean: the gate, then the chat (25 Aug). -------------------------- */

.phero--ask .phero__stage { align-items: start; }

/* Ask: the copy column is short and the form column is tall, so the empty
   band between them is the only place he does not stand on a line of text.
   Offset from the right so the form panel, not the viewport, sets his limit. */
.phero--ask { position: relative; }
.phero--ask .shell { position: relative; z-index: 1; }
.phero--ask .figmark {
  left: auto;
  right: clamp(34rem, 42vw, 46rem);
  bottom: 0;
  width: clamp(120px, 10.5vw, 158px);
  opacity: 0.34;
}
@media (max-width: 1259px) { .phero--ask .figmark { display: none; } }
@media (min-width: 900px) {
  .phero--ask .phero__stage { grid-template-columns: minmax(0, 1.05fr) minmax(340px, 460px); }
}

.ask {
  align-self: start;
  width: 100%;
  justify-self: end;
  background: var(--ink-raise);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
@media (max-width: 899px) { .ask { justify-self: stretch; width: 100%; } }

.ask__note { margin: 0 0 1.25rem; font-size: var(--t-small); color: var(--chalk-dim); }
.ask .field { margin-bottom: 1rem; }
.ask .form__go { margin-top: 1.25rem; }

.ask__disclose {
  margin: 0 0 1rem;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--chalk-mute);
}
.ask__disclose b { color: var(--chalk); font-weight: 560; }

.ask__frame {
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--ink-sunken);
}
.ask__frame iframe {
  display: block;
  width: 100%;
  height: min(620px, 70svh);
  border: 0;
}

/* --- The comparison fits a phone whole — no sideways scroll on mobile. ---- */

.cshort { display: none; }
@media (max-width: 700px) {
  .cfull { display: none; }
  .cshort { display: inline; }
  .compare__table { min-width: 0; }
  .compare__table th, .compare__table td { padding: 0.75rem 0.4rem; }
  .compare__table th[scope='row'] {
    font-size: var(--t-micro);
    line-height: 1.45;
    padding-left: 0;
  }
  .compare__table thead th { font-size: 0.625rem; letter-spacing: 0.08em; }
  .compare__table td { font-size: var(--t-micro); }
  .varies { font-size: 0.5625rem; letter-spacing: 0.06em; }
}

/* --- Ask Dean popup: launcher bottom-right, panel above it (25 Aug). ------ */

.askpop { position: fixed; right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vh, 24px); z-index: var(--z-overlay); }

.askpop__launch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-chip);
  background: var(--ink-raise-2);
  color: var(--chalk);
  font: 600 0.9375rem/1 var(--sans);
  padding: 0.75rem 1.25rem 0.75rem 0.875rem;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(6, 4, 12, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.15);
  transition: transform 0.3s var(--ease-enter), box-shadow 0.3s var(--ease-state);
}
.askpop__launch:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(6, 4, 12, 0.7), 0 0 0 1px rgba(139, 92, 246, 0.35); }
.askpop__launch img { width: 26px; height: auto; }
.askpop.is-open .askpop__launch { display: none; }

.askpop__panel {
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vh, 24px);
  width: min(400px, calc(100vw - 24px));
  max-height: min(680px, calc(100svh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--ink-raise);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-core);
  box-shadow: 0 24px 70px rgba(6, 4, 12, 0.8);
  overflow: hidden;
}
.askpop__panel[hidden] { display: none; }

.askpop__head {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--hair);
  background: var(--ink-raise-2);
}
.askpop__head img { width: 22px; height: auto; align-self: center; }
.askpop__head b { font-weight: 640; letter-spacing: -0.01em; }
.askpop__head i { font-style: normal; font-size: var(--t-micro); color: var(--chalk-mute); }
.askpop__close {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: none;
  color: var(--chalk-mute);
  cursor: pointer;
  transition: color 0.3s var(--ease-state), border-color 0.3s var(--ease-state);
}
.askpop__close:hover { color: var(--chalk); border-color: var(--hair-strong); }
.askpop__close svg { width: 13px; height: 13px; }

.askpop__body { display: flex; flex-direction: column; min-height: 0; }
.askpop__gate { padding: 1.125rem 1.125rem 1.25rem; overflow-y: auto; }
.askpop__note { margin: 0 0 0.875rem; font-size: var(--t-micro); line-height: 1.6; color: var(--chalk-mute); }
.askpop__note--tight { margin: 0.75rem 1rem 0.625rem; }
.askpop__note b { color: var(--chalk); font-weight: 560; }
.askpop__label {
  display: block;
  margin: 0.625rem 0 0.3125rem;
  font-size: var(--t-micro);
  font-weight: 560;
  color: var(--chalk-dim);
}
.askpop__input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  background: var(--ink-sunken);
  color: var(--chalk);
  font: 400 0.9375rem/1.4 var(--sans);
}
.askpop__input:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.askpop__consent {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0.875rem 0 0;
  font-size: var(--t-micro);
  color: var(--chalk-mute);
  line-height: 1.55;
}
.askpop__consent input { margin-top: 3px; }
.askpop__err { margin: 0.75rem 0 0; font-size: var(--t-micro); color: var(--alert); }
.askpop__go { margin-top: 1rem; width: 100%; justify-content: center; }

.askpop__chat { display: flex; flex-direction: column; min-height: 0; }
.askpop__chat iframe {
  border: 0;
  width: 100%;
  height: min(480px, calc(100svh - 220px));
  background: var(--ink-sunken);
}

@media (max-width: 599px) {
  .askpop__panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-height: calc(100svh - 24px);
  }
  .askpop__chat iframe { height: calc(100svh - 240px); }
  /* Sit above the sticky mobile CTA bar rather than on top of it. */
  .askpop { bottom: 84px; }
  .askpop.is-open { bottom: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .askpop__launch { animation: askpop-in 0.6s var(--ease-enter) 1.4s both; }
  .askpop__panel:not([hidden]) { animation: askpop-rise 0.4s var(--ease-enter); }
}
@keyframes askpop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes askpop-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* --- Trust Passport deep dive on network.html (25 Aug). ------------------- */
/* The cards reuse .vcard; this only stacks them in the deep-dive column and
   adds the one evidence state .vrow lacked: current (.ok) has expiring (.soon). */
.tpstack { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-content: start; }
.vrow .soon { color: var(--alert); }