/* ============================================================
   Variant 10 - Front Porch.
   A warm Atlanta front porch where a named human sits beside the
   work and signs off on every send. Card-on-paper surfaces with
   soft round corners (20-24px) and a single soft ink shadow (never
   a glow), conversational prose, stacked physical objects rather
   than rules and columns.

   Archetype: portrait-and-people led concierge desk. Hero is a warm
   offset two-column with the Human-in-the-loop Desk on the right.
   Signature: the Desk (drafted reply + founder approval control with
   the enforced "Nothing sends until a person clicks" line) plus the
   four-beat approval-slip demo. Motion: emerald Approve control
   breathing pulse + green check stamp pop, and the accent-2
   highlighter wipe under the enforced line. Lines/cards rest in their
   final approved state so freezing animation preserves all meaning.

   Emerald (--ws-accent) is the semantic "approved/safe" signal color.
   Soft-yellow (--ws-accent-2) is the human highlighter, used only as a
   wipe behind ink text, never as a fill. Stays light end to end.
   All colors via --ws-* tokens. Custom properties inside rule blocks.
============================================================ */

[data-variant="10"] {
  --v-radius: 22px;
  --v-radius-sm: 14px;
  --v-pad: 30px;
  --v-maxw: 1180px;
  --v-shadow: 0 18px 44px -28px color-mix(in srgb, var(--ws-ink) 42%, transparent);
  --v-shadow-lift: 0 26px 56px -26px color-mix(in srgb, var(--ws-ink) 52%, transparent);
  --v-hair: 1px solid var(--ws-rule);
  --v-mute: var(--ws-mute);
  --v-safe: var(--ws-accent);
  --v-safe-deep: var(--ws-accent-deep, color-mix(in srgb, var(--ws-accent) 78%, var(--ws-ink)));
  /* Highlighter marker removed per request. Transparent kills the marker on
     every .v-hl / __hl spot; the hero accent words stay emerald via the base
     .v-hl color rule, just with no highlight bar behind them. */
  --v-mark: transparent;

  color: var(--ws-ink);
  background: var(--ws-paper);
  font-family: var(--ws-font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Let the Drift backdrop show through the page base. The shell's <main> paints
   an opaque paper fill over the fixed backdrop layer; softening it to a
   semi-transparent paper lets the slow Drift gradient read behind the content
   while keeping copy legible. Content sections (cards, dark bands) keep their
   own opaque backgrounds, so only the page base reveals the drift. */
[data-variant="10"] main {
  background-color: color-mix(in srgb, var(--ws-paper) 68%, transparent) !important;
}

/* ---- Base typography ---------------------------------------- */

[data-variant="10"] h1,
[data-variant="10"] h2,
[data-variant="10"] h3 {
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: var(--ws-tracking-display, -0.01em);
  font-family: var(--ws-font-display);
  font-weight: 600;
  color: var(--ws-ink);
}

[data-variant="10"] h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

[data-variant="10"] h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

[data-variant="10"] h3 {
  font-size: 1.15rem;
  font-weight: 600;
}

[data-variant="10"] p {
  margin: 0 0 1rem;
}

[data-variant="10"] a {
  color: inherit;
  text-decoration: none;
}

/* ---- Layout shell ------------------------------------------ */

[data-variant="10"] .container {
  width: 100%;
  max-width: var(--v-maxw);
  margin: 0 auto;
  padding: 0 32px;
}

[data-variant="10"] .section {
  padding: 84px 0;
}

[data-variant="10"] .section + .section {
  border-top: var(--v-hair);
}

/* ---- Shared section heads ---------------------------------- */

[data-variant="10"] .v10section-eyebrow,
[data-variant="10"] .v10hero__eyebrow,
[data-variant="10"] .v10note__eyebrow,
[data-variant="10"] .v10demo__eyebrow,
[data-variant="10"] .v10more__eyebrow,
[data-variant="10"] .v10contact__eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v-mute);
  margin: 0 0 14px;
}

[data-variant="10"] .v10section-h2 {
  max-width: 22ch;
  margin-bottom: 18px;
}

[data-variant="10"] .v10prose {
  font-size: 1.12rem;
  color: color-mix(in srgb, var(--ws-ink) 82%, var(--ws-paper));
  max-width: 56ch;
  line-height: 1.62;
}

/* A plain-spoken "parlor note" block. */

[data-variant="10"] .v10note {
  max-width: 760px;
}

/* ---- Buttons ----------------------------------------------- */

[data-variant="10"] .v10btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 26px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
  font-family: var(--ws-font-body);
}

[data-variant="10"] .v10btn:focus-visible {
  outline: 2px solid var(--v-safe-deep);
  outline-offset: 3px;
}

[data-variant="10"] .v10btn:active {
  transform: translateY(1px);
}

[data-variant="10"] .v10btn--primary {
  color: #ffffff;
  background: var(--v-safe);
  border-color: var(--v-safe);
}

[data-variant="10"] .v10btn--primary:hover {
  background: var(--v-safe-deep);
  border-color: var(--v-safe-deep);
}

[data-variant="10"] .v10btn--ghost {
  color: var(--ws-ink);
  background: transparent;
  border-color: var(--ws-rule);
}

[data-variant="10"] .v10btn--ghost:hover {
  border-color: var(--ws-ink);
}

[data-variant="10"] .v10btn--lg {
  padding: 15px 30px;
  font-size: 0.98rem;
}

[data-variant="10"] .v10btn--block {
  width: 100%;
}

/* ---- Nav (from V10Chrome / VariantHeader) ------------------ */

[data-variant="10"] .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ws-paper) 90%, transparent);
  backdrop-filter: saturate(115%) blur(12px);
  border-bottom: var(--v-hair);
}

[data-variant="10"] .nav.is-scrolled {
  box-shadow: 0 8px 24px -20px color-mix(in srgb, var(--ws-ink) 60%, transparent);
}

[data-variant="10"] .nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

[data-variant="10"] .brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-weight: 600;
  font-family: var(--ws-font-display);
}

[data-variant="10"] .brand__mark {
  color: var(--v-safe);
  font-size: 1.32rem;
}

[data-variant="10"] .brand__word {
  color: var(--ws-ink);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

[data-variant="10"] .nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

[data-variant="10"] .nav__links a {
  font-weight: 500;
  color: color-mix(in srgb, var(--ws-ink) 76%, var(--ws-paper));
  font-size: 0.95rem;
  transition: color 0.25s ease;
}

[data-variant="10"] .nav__links a:hover {
  color: var(--v-safe-deep);
}

/* The book button inside the nav (btn btn--sm btn--primary). */
[data-variant="10"] .nav__links .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 20px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--v-safe);
  cursor: pointer;
  color: #ffffff;
  background: var(--v-safe);
  white-space: nowrap;
  font-family: var(--ws-font-body);
  transition: background 0.25s ease;
}

[data-variant="10"] .nav__links .btn:hover {
  background: var(--v-safe-deep);
  border-color: var(--v-safe-deep);
}

[data-variant="10"] .nav__links a.btn {
  color: #ffffff;
}

[data-variant="10"] .nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  min-height: 44px;
  min-width: 44px;
}

[data-variant="10"] .nav__toggle span {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--ws-ink);
  transition: 0.25s;
}

/* ---- Footer (from V10Chrome / VariantFooter) --------------- */

[data-variant="10"] .footer {
  background: var(--ws-surface);
  color: color-mix(in srgb, var(--ws-ink) 78%, var(--ws-surface));
  padding: 60px 0 26px;
  border-top: var(--v-hair);
}

[data-variant="10"] .footer__inner {
  display: grid;
  grid-template-columns: minmax(250px, 1.1fr) 2.2fr;
  gap: 44px 56px;
  align-items: start;
}

[data-variant="10"] .footer .brand__mark { color: var(--v-safe); }
[data-variant="10"] .footer .brand__word { color: var(--ws-ink); }

[data-variant="10"] .footer__brand {
  font-family: var(--ws-font-display);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

[data-variant="10"] .footer__tag {
  margin-top: 12px;
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--v-mute);
}

[data-variant="10"] .footer__contact {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.875rem;
  color: var(--v-mute);
}

[data-variant="10"] .footer__meta-line { margin: 0; }

[data-variant="10"] .footer__phone,
[data-variant="10"] .footer__email {
  color: var(--ws-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

[data-variant="10"] .footer__phone:hover,
[data-variant="10"] .footer__email:hover { color: var(--v-safe); }

[data-variant="10"] .footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
}

[data-variant="10"] .footer__col-title {
  margin: 0 0 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ws-ink);
}

[data-variant="10"] .footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

[data-variant="10"] .footer__col a {
  font-size: 0.9rem;
  color: var(--v-mute);
  text-decoration: none;
  transition: color 0.15s ease;
}

[data-variant="10"] .footer__col a:hover { color: var(--v-safe); }

@media (max-width: 860px) {
  [data-variant="10"] .footer__inner { grid-template-columns: 1fr; gap: 36px; }
  [data-variant="10"] .footer__nav { gap: 28px; }
}

/* Bottom bar: copyright left, legal nav right, split by a hairline */
[data-variant="10"] .footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 18px;
  border-top: var(--v-hair);
}

[data-variant="10"] .footer__small {
  color: var(--v-mute);
  font-size: 0.8rem;
  margin: 0;
  letter-spacing: 0.01em;
}

[data-variant="10"] .footer__legal {
  display: flex;
  gap: 26px;
}

[data-variant="10"] .footer__legal a {
  color: var(--v-mute);
  font-size: 0.8rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

[data-variant="10"] .footer__legal a:hover {
  color: var(--ws-ink);
}

/* ---- Hero -------------------------------------------------- */
/* Warm offset two-column. Left = copy. Right = Human-in-the-loop
   Desk. Stat band below as soft cards. */

[data-variant="10"] .v10hero {
  padding: 72px 0 80px;
}

[data-variant="10"] .v10hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

[data-variant="10"] .v10hero__copy {
  animation: v10-rise 0.8s ease both;
}

[data-variant="10"] .v10hero__headline {
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 22px;
}

[data-variant="10"] .v10hero__lede {
  font-size: 1.18rem;
  color: color-mix(in srgb, var(--ws-ink) 80%, var(--ws-paper));
  max-width: 46ch;
  line-height: 1.62;
  margin-bottom: 28px;
}

[data-variant="10"] .v10hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

[data-variant="10"] .v10hero__trust {
  font-size: 0.92rem;
  color: var(--v-mute);
  font-weight: 500;
  margin-bottom: 0;
}

/* Stat band as soft cards across the bottom of the hero */

[data-variant="10"] .v10hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
}

[data-variant="10"] .v10hero__stat {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius-sm);
  padding: 24px 22px;
  text-align: left;
}

[data-variant="10"] .v10hero__stat-num {
  display: block;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 600;
  font-family: var(--ws-font-display);
  color: var(--ws-ink);
  line-height: 1.1;
}

[data-variant="10"] .v10hero__stat-label {
  display: block;
  font-size: 0.84rem;
  color: var(--v-mute);
  margin-top: 8px;
}

/* ---- Signature: Human-in-the-loop Desk --------------------- */
/* Two stacked physical cards: the agent's drafted reply (machine
   layer, mono "draft" tag) and the warm founder approval card with
   the tactile Approve control and the enforced promise line. */

[data-variant="10"] .v10desk {
  display: grid;
  gap: 18px;
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: var(--v-pad);
  box-shadow: var(--v-shadow);
  animation: v10-rise 0.9s ease 0.1s both;
}

[data-variant="10"] .v10desk__draft {
  position: relative;
  background: var(--ws-paper);
  border: var(--v-hair);
  border-radius: var(--v-radius-sm);
  padding: 22px 22px 26px;
}

[data-variant="10"] .v10desk__tag {
  display: inline-block;
  font-family: var(--ws-font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--ws-cream);
  background: var(--ws-bg-deep, color-mix(in srgb, var(--ws-ink) 92%, black));
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 12px;
}

[data-variant="10"] .v10desk__draftmeta {
  font-size: 0.8rem;
  color: var(--v-mute);
  margin: 0 0 8px;
}

[data-variant="10"] .v10desk__drafttext {
  font-size: 0.98rem;
  color: color-mix(in srgb, var(--ws-ink) 86%, var(--ws-paper));
  line-height: 1.55;
  margin: 0;
}

/* A short connector between the draft and the approval, signaling
   the draft cannot pass on its own. */
[data-variant="10"] .v10desk__pipe {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 2px;
  height: 18px;
  background: var(--ws-rule);
  transform: translateX(-50%);
}

[data-variant="10"] .v10desk__approval {
  background: color-mix(in srgb, var(--v-safe) 7%, var(--ws-cream));
  border: 1px solid color-mix(in srgb, var(--v-safe) 32%, transparent);
  border-radius: var(--v-radius-sm);
  padding: 22px;
}

[data-variant="10"] .v10desk__who {
  font-size: 0.84rem;
  color: var(--v-mute);
  margin: 0 0 14px;
}

[data-variant="10"] .v10desk__stamprow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

[data-variant="10"] .v10desk__approve {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--ws-font-body);
  color: #fff;
  background: var(--v-safe);
  border: 1px solid var(--v-safe);
  border-radius: 999px;
  padding: 11px 22px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
  animation: v10-breathe 2.6s ease-in-out infinite;
}

[data-variant="10"] .v10desk__approve:hover {
  background: var(--v-safe-deep);
  border-color: var(--v-safe-deep);
}

[data-variant="10"] .v10desk__approve:focus-visible {
  outline: 2px solid var(--v-safe-deep);
  outline-offset: 3px;
}

[data-variant="10"] .v10desk__approve:active {
  transform: translateY(1px);
}

[data-variant="10"] .v10desk__check {
  font-size: 1rem;
  line-height: 1;
}

/* The green check stamp pops once on first reveal, then rests visible. */
[data-variant="10"] .v10desk__stamp {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--v-safe);
  color: var(--v-safe);
  flex: 0 0 auto;
  animation: v10-stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

[data-variant="10"] .v10desk__stamp-check {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
}

/* The enforced promise. Real text, ink on paper, with the soft-yellow
   highlighter wiping in behind it (never a text color). */
[data-variant="10"] .v10desk__enforced {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ws-ink);
}

[data-variant="10"] .v10desk__hl {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--v-mark), var(--v-mark));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.42em;
  padding: 0 2px;
}

[data-variant="10"] .v10desk__sent {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v-safe-deep);
}

/* ---- Founders strip ---------------------------------------- */

[data-variant="10"] .v10founders__lead {
  font-family: var(--ws-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  color: var(--ws-ink);
  margin: 0 0 28px;
  max-width: 22ch;
}

[data-variant="10"] .v10founders__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

[data-variant="10"] .v10founder {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: var(--v-pad);
  box-shadow: var(--v-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  [data-variant="10"] .v10founder:hover {
    transform: translateY(-4px);
    box-shadow: var(--v-shadow-lift);
  }
}

[data-variant="10"] .v10founder__portrait {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--v-safe) 14%, var(--ws-surface));
  border: 1px solid color-mix(in srgb, var(--v-safe) 30%, transparent);
}

[data-variant="10"] .v10founder__initials {
  font-family: var(--ws-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--v-safe-deep);
  letter-spacing: 0.02em;
}

[data-variant="10"] .v10founder__name {
  margin: 0 0 2px;
  font-size: 1.18rem;
}

[data-variant="10"] .v10founder__role {
  margin: 0 0 10px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v-mute);
}

[data-variant="10"] .v10founder__line {
  margin: 0;
  font-size: 0.98rem;
  color: color-mix(in srgb, var(--ws-ink) 82%, var(--ws-paper));
  line-height: 1.55;
}

/* ---- Trust strip ------------------------------------------- */

[data-variant="10"] .v10trust {
  background: var(--ws-surface);
  border-top: var(--v-hair);
  border-bottom: var(--v-hair);
  padding: 28px 0;
}

[data-variant="10"] .v10trust__lead {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-mute);
  margin: 0 0 16px;
  text-align: center;
}

[data-variant="10"] .v10trust__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

[data-variant="10"] .v10trust__item {
  padding: 7px 16px;
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--ws-ink);
}

/* ---- Problem note ------------------------------------------ */

[data-variant="10"] .v10problem .v10note {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 40px;
  box-shadow: var(--v-shadow);
}

/* ── Work-pile visual: desk ledger of the week's routine work ──────── */
[data-variant="10"] .v10pile {
  position: relative;
  margin: 0;
  padding: 0;
}
[data-variant="10"] .v10pile::before,
[data-variant="10"] .v10pile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--v-hair);
  border-radius: var(--v-radius);
  background: var(--ws-paper);
  z-index: 0;
}
[data-variant="10"] .v10pile::before {
  transform: rotate(-2.2deg) translate(-6px, 6px);
  opacity: 0.5;
}
[data-variant="10"] .v10pile::after {
  transform: rotate(1.5deg) translate(5px, 3px);
  opacity: 0.72;
}
[data-variant="10"] .v10pile__card {
  position: relative;
  z-index: 1;
  background: var(--ws-paper);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  overflow: hidden;
}
[data-variant="10"] .v10pile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 18px;
  border-bottom: var(--v-hair);
  background: color-mix(in srgb, var(--ws-cream) 70%, var(--ws-paper));
}
[data-variant="10"] .v10pile__head-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-subtle);
}
[data-variant="10"] .v10pile__live {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ws-accent);
  animation: v10pile-pulse 2.4s ease-out infinite;
}
[data-variant="10"] .v10pile__count {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--ws-accent);
  background: color-mix(in srgb, var(--ws-accent) 13%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}
[data-variant="10"] .v10pile__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-variant="10"] .v10pile__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--ws-rule) 55%, transparent);
}
[data-variant="10"] .v10pile__row:last-child { border-bottom: 0; }
[data-variant="10"] .v10pile__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
[data-variant="10"] .v10pile__row--cleared .v10pile__mark {
  color: var(--ws-accent);
  background: color-mix(in srgb, var(--ws-accent) 14%, transparent);
}
[data-variant="10"] .v10pile__row--gate {
  background: color-mix(in srgb, var(--ws-accent) 6%, transparent);
  box-shadow: inset 3px 0 0 var(--ws-accent);
}
[data-variant="10"] .v10pile__row--gate .v10pile__mark {
  color: var(--ws-accent);
  border: 1px solid color-mix(in srgb, var(--ws-accent) 45%, transparent);
}
[data-variant="10"] .v10pile__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
[data-variant="10"] .v10pile__task {
  color: var(--ws-ink);
  font-size: 0.9375rem;
  line-height: 1.3;
}
[data-variant="10"] .v10pile__meta {
  color: var(--ws-mute);
  font-size: 0.75rem;
}
[data-variant="10"] .v10pile__pill {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ws-mute);
}
[data-variant="10"] .v10pile__row--gate .v10pile__pill {
  color: var(--ws-accent);
  font-weight: 600;
}
[data-variant="10"] .v10pile__gate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-top: var(--v-hair);
  background: color-mix(in srgb, var(--ws-accent) 8%, var(--ws-paper));
}
[data-variant="10"] .v10pile__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ws-accent);
  color: var(--ws-paper);
  font-size: 0.8rem;
  font-weight: 700;
}
[data-variant="10"] .v10pile__gate-text {
  color: var(--ws-ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
@keyframes v10pile-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ws-accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ws-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ws-accent) 0%, transparent); }
}
[data-variant="10"].ws-motion-static .v10pile__live,
.ws-motion-static [data-variant="10"] .v10pile__live { animation: none; }

/* ---- Approval-slip demo (signature support) ---------------- */
/* Four stacked slip cards. The first three are the how.steps; the
   fourth is the binding Approve stamp. Always in the DOM; CSS
   staggers them in as enhancement. They rest at opacity:1. */

[data-variant="10"] .v10demo {
  background: var(--ws-surface);
}

[data-variant="10"] .v10demo__head {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
}

[data-variant="10"] .v10demo__heading {
  margin-bottom: 14px;
}

[data-variant="10"] .v10demo__sub {
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--ws-ink) 80%, var(--ws-surface));
  margin: 0;
  line-height: 1.6;
}

[data-variant="10"] .v10slips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

[data-variant="10"] .v10slip {
  position: relative;
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 26px 24px 28px;
  box-shadow: var(--v-shadow);
}

[data-variant="10"] .v10slip__num {
  display: inline-block;
  font-family: var(--ws-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--v-mute);
  margin-bottom: 14px;
}

[data-variant="10"] .v10slip__title {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

[data-variant="10"] .v10slip__body {
  font-size: 0.94rem;
  color: color-mix(in srgb, var(--ws-ink) 80%, var(--ws-cream));
  line-height: 1.55;
  margin: 0;
}

/* The fourth slip is the approval beat: emerald border + a stamped seal. */
[data-variant="10"] .v10slip--stamp {
  border-color: color-mix(in srgb, var(--v-safe) 42%, transparent);
  background: color-mix(in srgb, var(--v-safe) 6%, var(--ws-cream));
}

[data-variant="10"] .v10slip__seal {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--v-safe);
  color: var(--v-safe);
  font-weight: 700;
  font-size: 1.05rem;
  animation: v10-stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

/* ---- Results ----------------------------------------------- */

[data-variant="10"] .v10metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 8px 0 40px;
}

[data-variant="10"] .v10metric {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 32px 26px;
  text-align: center;
  box-shadow: var(--v-shadow);
}

[data-variant="10"] .v10metric__num {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 600;
  font-family: var(--ws-font-display);
  color: var(--v-safe-deep);
}

[data-variant="10"] .v10metric__label {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--v-mute);
}

[data-variant="10"] .v10cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

[data-variant="10"] .v10case {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--v-shadow);
}

[data-variant="10"] .v10case__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

[data-variant="10"] .v10case__icon {
  font-size: 1.6rem;
  line-height: 1;
}

[data-variant="10"] .v10case__vertical {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-safe-deep);
}

[data-variant="10"] .v10case__size {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: var(--v-mute);
}

[data-variant="10"] .v10case__block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

[data-variant="10"] .v10case__block p {
  margin: 0;
  color: color-mix(in srgb, var(--ws-ink) 84%, var(--ws-cream));
  font-size: 0.94rem;
  line-height: 1.5;
}

[data-variant="10"] .v10case__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v-mute);
}

[data-variant="10"] .v10case__metrics {
  list-style: none;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: var(--v-hair);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

[data-variant="10"] .v10case__metric-val {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--ws-font-display);
  color: var(--ws-ink);
}

[data-variant="10"] .v10case__metric-label {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v-mute);
  line-height: 1.4;
}

[data-variant="10"] .v10results__note {
  margin: 32px 0 0;
  font-size: 0.86rem;
  color: var(--v-mute);
  max-width: 70ch;
  font-style: italic;
}

/* ---- Testimonials ------------------------------------------ */

[data-variant="10"] .v10quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

[data-variant="10"] .v10quote {
  margin: 0;
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 30px;
  box-shadow: var(--v-shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

[data-variant="10"] .v10quote__tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v-safe) 12%, var(--ws-cream));
  color: var(--v-safe-deep);
}

[data-variant="10"] .v10quote__body {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ws-ink);
  font-family: var(--ws-font-display);
  font-weight: 500;
}

[data-variant="10"] .v10quote__body::before {
  content: "\201C";
}

[data-variant="10"] .v10quote__body::after {
  content: "\201D";
}

[data-variant="10"] .v10quote__who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

[data-variant="10"] .v10quote__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--v-safe) 14%, var(--ws-surface));
  color: var(--v-safe-deep);
  font-weight: 700;
  flex: 0 0 auto;
  font-family: var(--ws-font-display);
}

[data-variant="10"] .v10quote__meta strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
}

[data-variant="10"] .v10quote__meta small {
  color: var(--v-mute);
  font-size: 0.86rem;
}

/* ---- Closing CTA band -------------------------------------- */

[data-variant="10"] .v10cta-band {
  background: var(--ws-surface);
}

[data-variant="10"] .v10cta-band__inner {
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: 40px;
  align-items: center;
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 44px;
  box-shadow: var(--v-shadow);
}

[data-variant="10"] .v10cta-band__inner h2 {
  margin-bottom: 12px;
}

/* ---- How page header --------------------------------------- */

[data-variant="10"] .v10how .v10note {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 40px;
  box-shadow: var(--v-shadow);
}

/* ---- Why items --------------------------------------------- */

[data-variant="10"] .v10why-items {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

[data-variant="10"] .v10why-item {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: var(--v-pad);
  box-shadow: var(--v-shadow);
}

[data-variant="10"] .v10why-item h3 {
  margin-bottom: 10px;
}

[data-variant="10"] .v10why-item p {
  color: color-mix(in srgb, var(--ws-ink) 82%, var(--ws-cream));
  margin: 0;
  line-height: 1.55;
}

/* The "safe by construction" card carries the highlighter under its title. */
[data-variant="10"] .v10why-item--safe {
  border-color: color-mix(in srgb, var(--v-safe) 40%, transparent);
}

[data-variant="10"] .v10why-item--safe h3 {
  display: inline;
  background-image: linear-gradient(var(--v-mark), var(--v-mark));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.4em;
  padding: 0 2px;
}

/* ---- Pricing ----------------------------------------------- */

[data-variant="10"] .v10price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}

[data-variant="10"] .v10price__card {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 40px;
  box-shadow: var(--v-shadow);
}

[data-variant="10"] .v10price__amount {
  font-size: 1.7rem;
  font-weight: 600;
  font-family: var(--ws-font-display);
  line-height: 1.2;
  color: var(--ws-ink);
  margin: 0 0 10px;
}

[data-variant="10"] .v10price__per {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--v-mute);
  margin-top: 8px;
  font-family: var(--ws-font-body);
}

[data-variant="10"] .v10price__line {
  color: color-mix(in srgb, var(--ws-ink) 80%, var(--ws-cream));
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 22px;
}

[data-variant="10"] .v10price__feats {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
}

[data-variant="10"] .v10price__feats li {
  padding-left: 28px;
  position: relative;
  color: color-mix(in srgb, var(--ws-ink) 84%, var(--ws-cream));
  font-size: 0.96rem;
}

[data-variant="10"] .v10price__feats li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--v-safe);
  font-weight: 700;
}

[data-variant="10"] .v10price__math {
  background: color-mix(in srgb, var(--v-safe) 8%, var(--ws-surface));
  border: 1px solid color-mix(in srgb, var(--v-safe) 26%, transparent);
  border-radius: var(--v-radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[data-variant="10"] .v10price__math h3 {
  font-size: 1.4rem;
  margin-bottom: 14px;
}

[data-variant="10"] .v10price__math p {
  color: color-mix(in srgb, var(--ws-ink) 82%, var(--ws-surface));
  margin-bottom: 12px;
  line-height: 1.55;
}

[data-variant="10"] .v10price__math-foot {
  color: var(--v-mute);
  font-size: 0.88rem;
  font-style: italic;
}

/* ---- More / expansion band --------------------------------- */

[data-variant="10"] .v10more {
  background: var(--ws-surface);
}

[data-variant="10"] .v10more__panel {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 40px;
  box-shadow: var(--v-shadow);
  max-width: 820px;
}

[data-variant="10"] .v10more__lead {
  font-weight: 600;
  color: var(--ws-ink);
  font-family: var(--ws-font-display);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

[data-variant="10"] .v10more__list {
  color: color-mix(in srgb, var(--ws-ink) 84%, var(--ws-cream));
  max-width: 68ch;
  line-height: 1.6;
}

[data-variant="10"] .v10more__note {
  color: var(--v-mute);
  font-size: 0.92rem;
  font-style: italic;
}

/* ---- FAQ --------------------------------------------------- */

[data-variant="10"] .v10faq__list {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin-top: 28px;
}

[data-variant="10"] .v10faq__item {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius-sm);
  padding: 22px 26px;
  box-shadow: var(--v-shadow);
}

[data-variant="10"] .v10faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ws-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--ws-font-display);
}

[data-variant="10"] .v10faq__item summary:focus-visible {
  outline: 2px solid var(--v-safe-deep);
  outline-offset: 4px;
  border-radius: 4px;
}

[data-variant="10"] .v10faq__item summary::-webkit-details-marker {
  display: none;
}

[data-variant="10"] .v10faq__item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--v-safe);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

[data-variant="10"] .v10faq__item[open] summary::after {
  transform: rotate(45deg);
}

[data-variant="10"] .v10faq__item p {
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--ws-ink) 80%, var(--ws-cream));
  line-height: 1.6;
}

/* ---- Contact ----------------------------------------------- */

[data-variant="10"] .v10contact {
  background: var(--ws-surface);
}

[data-variant="10"] .v10contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

[data-variant="10"] .v10contact__copy h2 {
  margin-bottom: 16px;
}

[data-variant="10"] .v10contact__direct {
  color: color-mix(in srgb, var(--ws-ink) 80%, var(--ws-surface));
  margin-top: 16px;
}

[data-variant="10"] .v10contact__direct a {
  color: var(--v-safe-deep);
  font-weight: 600;
}

[data-variant="10"] .v10contact__form {
  background: var(--ws-cream);
  border: var(--v-hair);
  border-radius: var(--v-radius);
  padding: 36px;
  box-shadow: var(--v-shadow);
}

/* Form fields from VariantLeadForm render .field / label / input */

[data-variant="10"] .v10contact__form .field {
  margin-bottom: 18px;
}

[data-variant="10"] .v10contact__form .field label {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--ws-ink) 82%, var(--ws-cream));
}

[data-variant="10"] .v10contact__form .field input,
[data-variant="10"] .v10contact__form .field select {
  width: 100%;
  padding: 12px 14px;
  border: var(--v-hair);
  border-radius: var(--v-radius-sm);
  font: inherit;
  color: var(--ws-ink);
  background: var(--ws-paper);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-variant="10"] .v10contact__form .field input:focus,
[data-variant="10"] .v10contact__form .field select:focus {
  outline: none;
  border-color: var(--v-safe);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-safe) 22%, transparent);
}

[data-variant="10"] .v10contact__form .contact__ok {
  margin: 14px 0 0;
  color: var(--v-safe-deep);
  font-weight: 600;
  text-align: center;
}

/* ---- V-HL accent (headline highlighter) -------------------- */
/* Soft-yellow highlighter behind ink text, never a text color. */

[data-variant="10"] .v-hl {
  color: var(--ws-ink);
  background-image: linear-gradient(var(--v-mark), var(--v-mark));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.34em;
  padding: 0 2px;
}

/* ---- Keyframes (motion moments) ---------------------------- */

@keyframes v10-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Signature: the emerald Approve control breathes to draw the eye. */
@keyframes v10-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* The green check stamp pops once, then rests fully visible. */
@keyframes v10-stamp {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  70%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* The soft-yellow highlighter wipes left to right under the promise. */
@keyframes v10-wipe {
  from { background-size: 0 0.42em; }
  to   { background-size: 100% 0.42em; }
}

/* ---- Reduced-motion / static overrides --------------------- */
/* Render every element in its final approved state with no motion. */

[data-variant="10"].ws-motion-static .v10hero__copy,
[data-variant="10"].ws-motion-static .v10desk,
[data-variant="10"].ws-motion-static .v10desk__approve,
[data-variant="10"].ws-motion-static .v10desk__stamp,
[data-variant="10"].ws-motion-static .v10desk__hl,
[data-variant="10"].ws-motion-static .v10slip,
[data-variant="10"].ws-motion-static .v10slip__seal {
  animation: none;
}

[data-variant="10"].ws-motion-static .v10desk__hl {
  background-size: 100% 0.42em;
}

@media (prefers-reduced-motion: reduce) {
  [data-variant="10"] .v10hero__copy,
  [data-variant="10"] .v10desk,
  [data-variant="10"] .v10desk__approve,
  [data-variant="10"] .v10desk__stamp,
  [data-variant="10"] .v10desk__hl,
  [data-variant="10"] .v10slip,
  [data-variant="10"] .v10slip__seal {
    animation: none !important;
  }

  [data-variant="10"] .v10desk__hl {
    background-size: 100% 0.42em !important;
  }
}

/* ---- Responsive -------------------------------------------- */

@media (max-width: 1020px) {
  [data-variant="10"] .v10hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  [data-variant="10"] .v10slips {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-variant="10"] .v10cases {
    grid-template-columns: 1fr;
  }

  [data-variant="10"] .v10why-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  [data-variant="10"] .section {
    padding: 60px 0;
  }

  [data-variant="10"] .v10hero {
    padding: 52px 0 60px;
  }

  [data-variant="10"] .v10hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-variant="10"] .v10founders__cards {
    grid-template-columns: 1fr;
  }

  [data-variant="10"] .v10metrics {
    grid-template-columns: 1fr;
  }

  [data-variant="10"] .v10quotes {
    grid-template-columns: 1fr;
  }

  [data-variant="10"] .v10price {
    grid-template-columns: 1fr;
  }

  [data-variant="10"] .v10contact__grid {
    grid-template-columns: 1fr;
  }

  [data-variant="10"] .v10cta-band__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 720px) {
  [data-variant="10"] .nav__links {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--ws-paper);
    border-bottom: var(--v-hair);
    padding: 18px 32px 28px;
    transform: translateY(-130%);
    transition: transform 0.35s ease;
  }

  [data-variant="10"] .nav__links.is-open {
    transform: none;
  }

  [data-variant="10"] .nav__links a {
    padding: 10px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  [data-variant="10"] .nav__toggle {
    display: flex;
  }
}

@media (max-width: 520px) {
  [data-variant="10"] .v10slips {
    grid-template-columns: 1fr;
  }

  [data-variant="10"] .v10hero__stats {
    grid-template-columns: 1fr;
  }

  [data-variant="10"] .v10founder {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  [data-variant="10"] .v10case {
    min-width: 0;
  }

  [data-variant="10"] .v10case__head,
  [data-variant="10"] .v10case__block {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  [data-variant="10"] .v10case__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-variant="10"] .v10case__metric-val,
  [data-variant="10"] .v10case__metric-label {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ---- Backdrop axis ----------------------------------------- */
/* Let the global ambient backdrop layer read through at 02-05;
   this shell stays light end to end. */

[data-variant="10"][data-backdrop="02"],
[data-variant="10"][data-backdrop="03"],
[data-variant="10"][data-backdrop="04"],
[data-variant="10"][data-backdrop="05"] {
  background: transparent;
}

/* Team presence — three real founders in a row, portraits filling their
   columns with caption beneath. Reinforces the human-in-the-loop promise. */
[data-variant="10"] .v10team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 40px;
  margin-top: 42px;
}
[data-variant="10"] .v10team__member {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
[data-variant="10"] .v10team__photo {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  border-radius: var(--v-radius-sm, 14px) !important;
  box-shadow: var(--v-shadow);
}
[data-variant="10"] .v10team__caption { width: 100%; }
[data-variant="10"] .v10team__role {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-safe);
}
[data-variant="10"] .v10team__name {
  margin: 0 0 8px;
  font-family: var(--ws-font-display);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ws-ink);
}
[data-variant="10"] .v10team__line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--v-mute);
}
@media (max-width: 768px) {
  [data-variant="10"] .v10team__grid {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 340px;
  }
}

/* ── How-it-works redesign: animated demo + approval gate (2026-06-01) ─────── */
[data-variant="10"] .v10howdemo__grid,
[data-variant="10"] .v10howgate__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 880px) {
  [data-variant="10"] .v10howdemo__grid { grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
  [data-variant="10"] .v10howgate__grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
[data-variant="10"] .v10howdemo__beats {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}
[data-variant="10"] .v10howdemo__beats li {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ws-ink) 82%, var(--ws-paper));
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ws-rule);
}
[data-variant="10"] .v10howdemo__beats li:first-child { border-top: 1px solid var(--ws-rule); }
[data-variant="10"] .v10howdemo__beat-k {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ws-accent);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
[data-variant="10"] .v10howgate__desk { display: flex; justify-content: center; }