/*
 * Website Transformation: loads after lisa3.css and reuses every Lisa 3
 * component as-is.
 *
 * 1. Swaps the story accent. Website Transformation is planet 3 in the
 *    Transformation Atlas, the purple one (#9542e2); the text accent is a step
 *    lighter so small type stays legible on black.
 * 2. A landscape hero, because the subject is a website, not a phone.
 * 3. This page's own components: the navigation comparison, the page-family
 *    counts, the five layers, the redirect map and the tool comparison.
 */

body.l3.wt2{
  --l3-accent: #b98af0;
  --l3-accent-soft: rgb(149 66 226 / .16);
  --l3-accent-line: rgb(185 138 240 / .5);
  --wt-rgb: 149 66 226;
}

/* ------------------------------------------------ literal-pink restatements */
body.wt2 .l3-hero__glow{ background:radial-gradient(circle 760px at 72% 0%,
  rgb(var(--wt-rgb) / .22) 0%, rgb(var(--wt-rgb) / .15) 20%, rgb(var(--wt-rgb) / .08) 38%,
  rgb(var(--wt-rgb) / .03) 60%, transparent 100%); }
body.wt2 .l3-chapter{ --glow-rgb:var(--wt-rgb); }
body.wt2 .closing::before{ background:radial-gradient(ellipse 700px 360px at 30% 60%, rgb(var(--wt-rgb) / .16), transparent 70%); }
body.wt2 .note--tag{ background:rgb(var(--wt-rgb) / .12); }
body.wt2 ::selection{ background:var(--l3-accent); color:#000; }
body.wt2 .l3-chapter__t{ overflow-wrap:break-word; }
.wt-btn{ --btn-bg:#9542e2; --btn-fg:#fff; --btn-tint:var(--white-10); }

/* ------------------------------------------------ landscape hero
   The subject is a website, so the film is a wide browser-shaped frame that
   sits under the copy at full shell width instead of a phone-shaped card
   beside it. */
body.wt2 .l3-hero__grid{ grid-template-columns:1fr; gap:clamp(36px,5vw,56px); }
body.wt2 .l3-hero__film{ aspect-ratio:1400 / 749; background:var(--l3-canvas); border-radius:24px;
  box-shadow:0 40px 120px -30px rgb(var(--wt-rgb) / .5); }
body.wt2 .l3-hero__film img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
body.wt2 .l3-hero__acts{ display:flex; flex-wrap:wrap; gap:10px; }

/* ------------------------------------------------ shared small pieces */
.wt-aside{ max-width:var(--l3-read); padding:16px 20px; border-left:2px solid var(--l3-accent); background:var(--l3-card-quiet);
  border-radius:0 var(--l3-r-sm) var(--l3-r-sm) 0; font:var(--t-b2); color:#fff; }
.wt-list{ margin:0; padding:0 0 0 20px; display:grid; gap:12px; max-width:var(--l3-read); }
.wt-list li{ font:var(--t-b2); color:var(--white-80); margin:0; }
.wt-list li b{ color:#fff; font-weight:var(--fw-medium); }
.wt-list li::marker{ color:var(--l3-accent); }
.wt-grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.wt-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wt-card{ padding:22px; border-radius:var(--l3-r); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.wt-card h4{ margin:0 0 12px; font:var(--t-b3b); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); }
.wt-card p{ margin:0 0 10px; font:var(--t-b3); color:var(--l3-soft); }
.wt-card p:last-child{ margin-bottom:0; }
.wt-card ul{ margin:0; padding:0 0 0 18px; display:grid; gap:8px; }
.wt-card li{ font:var(--t-b3); color:var(--l3-soft); margin:0; }
.wt-card b, .wt-card strong{ color:#fff; font-weight:var(--fw-medium); }
.wt-card--win{ background:var(--l3-accent-soft); border-color:var(--l3-accent-line); }
.wt-card__verdict{ display:inline-block; margin-top:14px; padding:3px 10px; border-radius:999px; font:var(--t-b3c); font-size:12px;
  color:var(--l3-muted); border:1px solid var(--l3-line); }
.wt-card--win .wt-card__verdict{ color:#fff; border-color:var(--l3-accent); background:rgb(var(--wt-rgb) / .3); }

/* ------------------------------------------------ navigation, before and after */
.wt-nav{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.35fr); gap:clamp(16px,3vw,32px); align-items:stretch; }
.wt-nav__col{ padding:22px; border-radius:var(--l3-r); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.wt-nav__col--new{ border-color:var(--l3-accent-line); background:radial-gradient(ellipse 420px 200px at 0% 0%, rgb(var(--wt-rgb) / .18), transparent 70%), var(--l3-card-quiet); }
.wt-nav__k{ margin:0 0 4px; font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); }
.wt-nav__col--new .wt-nav__k{ color:var(--l3-accent); }
.wt-nav__t{ margin:0 0 16px; font:var(--t-b2a); color:#fff; }
.wt-nav ol{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.wt-nav li{ margin:0; padding:8px 12px; border-radius:10px; background:var(--white-5); font:var(--t-b3); color:var(--white-80); }
.wt-nav li small{ display:block; color:var(--l3-muted); font:var(--t-b3); font-size:12.5px; margin-top:2px; }
.wt-nav li.is-group{ background:none; padding:10px 0 0; color:#fff; font:var(--t-b3b); }
.wt-nav li.is-group:first-child{ padding-top:0; }
.wt-nav li.is-cta{ background:rgb(var(--wt-rgb) / .28); color:#fff; }
.wt-nav__sub{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.wt-nav__arrow{ align-self:center; color:var(--l3-accent); }
.wt-nav__arrow .icon{ width:28px; height:28px; }

/* ------------------------------------------------ page families (counts) */
.wt-counts{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.wt-counts li{ margin:0; padding:20px 18px; border-radius:var(--l3-r-sm); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.wt-counts b{ display:block; font:var(--t-h3); color:var(--l3-accent); margin-bottom:6px; }
.wt-counts span{ display:block; font:var(--t-b3b); color:#fff; }
.wt-counts small{ display:block; margin-top:4px; font:var(--t-b3); color:var(--l3-soft); }

/* ------------------------------------------------ five layers */
.wt-layers{ list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:l; }
.wt-layers li{ counter-increment:l; display:grid; grid-template-columns:44px minmax(0,220px) minmax(0,1fr) auto; gap:18px; align-items:center;
  margin:0; padding:16px 20px; border-radius:var(--l3-r-sm); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.wt-layers li::before{ content:counter(l, decimal-leading-zero); font:var(--t-b3c); color:var(--l3-accent); }
.wt-layers b{ font:var(--t-b2a); color:#fff; }
.wt-layers span{ font:var(--t-b3); color:var(--l3-soft); }
.wt-layers code{ font:var(--t-b3); font-size:12.5px; color:var(--l3-muted); white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.wt-layers li:nth-child(1){ margin-inline:0 0; }
.wt-layers li:nth-child(1){ background:var(--l3-accent-soft); border-color:var(--l3-accent-line); }

/* ------------------------------------------------ redirect map */
.wt-redirects{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--l3-line); border-radius:var(--l3-r); overflow:hidden; }
.wt-redirects th, .wt-redirects td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--l3-line); vertical-align:top; }
.wt-redirects tr:last-child td{ border-bottom:0; }
.wt-redirects th{ font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); background:var(--l3-card-quiet); }
.wt-redirects td{ font:var(--t-b3); color:var(--white-80); }
.wt-redirects td code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:#fff; word-break:break-all; }
.wt-redirects td:nth-child(2){ color:var(--l3-accent); width:28px; text-align:center; }
.wt-redirects td.is-count{ color:var(--l3-soft); white-space:nowrap; }
.wt-scroll{ overflow-x:auto; }

/* ------------------------------------------------ the continuous flow */
.wt-flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; counter-reset:s; }
.wt-flow li{ counter-increment:s; margin:0; padding:20px 18px 22px; border-radius:var(--l3-r-sm); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.wt-flow li::before{ content:counter(s); display:block; margin-bottom:12px; font:var(--t-b3c); color:var(--l3-accent); }
.wt-flow li b{ display:block; font:var(--t-b2a); color:#fff; margin-bottom:6px; }
.wt-flow li span{ font:var(--t-b3); color:var(--l3-soft); }
.wt-flow--before li{ background:none; border-style:dashed; }
.wt-flow--before li b{ color:var(--white-80); }
.wt-flow__label{ margin:0 0 12px !important; font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); }
.wt-flow__label--new{ color:var(--l3-accent); }

/* ------------------------------------------------ next */
.wt-next{ padding:clamp(24px,4vw,40px) 0 clamp(72px,10vw,120px); }
.wt-next__card{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center;
  padding:clamp(22px,3vw,32px); border-radius:var(--l3-r);
  background:radial-gradient(ellipse 520px 220px at 0% 0%, rgb(var(--wt-rgb) / .2), transparent 70%), var(--l3-card-quiet);
  border:1px solid var(--l3-accent-line); color:#fff !important; text-decoration:none; transition:border-color .3s var(--ease, ease); }
.wt-next__card + .wt-next__card{ margin-top:16px; }
.wt-next__card:hover{ border-color:var(--l3-accent); }
.wt-next__k{ display:block; margin-bottom:8px; font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-accent); }
.wt-next__t{ display:block; font:var(--t-h3); color:#fff; margin-bottom:6px; }
.wt-next__d{ display:block; font:var(--t-b3); color:var(--l3-soft); max-width:600px; }
.wt-next__go{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; background:#9542e2; color:#fff; font:var(--t-b3b); white-space:nowrap; }
.wt-next__go .icon{ width:18px; height:18px; }

/* ------------------------------------------------ responsive */
@media (max-width: 1000px){
  .wt-counts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wt-flow{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wt-layers li{ grid-template-columns:36px minmax(0,1fr); }
  .wt-layers li span, .wt-layers li code{ grid-column:2; }
}
@media (max-width: 900px){
  .wt-nav{ grid-template-columns:1fr; }
  .wt-nav__arrow{ justify-self:center; transform:rotate(90deg); }
  .wt-grid3{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  body.wt2 .l3-hero__film{ aspect-ratio:1400 / 749; border-radius:18px; }
}
@media (max-width: 640px){
  body.wt2 .l3-chapter__t{ font-size:clamp(40px,11vw,56px); line-height:1.05; }
  .wt-counts, .wt-flow, .wt-grid2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wt-grid2{ grid-template-columns:1fr; }
  .wt-nav__sub{ grid-template-columns:1fr; }
  .wt-redirects th, .wt-redirects td{ padding:10px 12px; }
  .wt-next__card{ grid-template-columns:1fr; }
  .wt-next__go{ justify-self:start; }
}

/* lisa3's generic .act/.l3-shell text rules outrank the card classes above */
body.wt2 .wt-card p, body.wt2 .wt-card li{ font:var(--t-b3); color:var(--l3-soft); }
body.wt2 .wt-card b, body.wt2 .wt-card strong{ color:#fff; font-weight:var(--fw-medium); }
body.wt2 .wt-next__d{ font:var(--t-b3); color:var(--l3-soft); }
body.wt2 .tri__k{ color:var(--l3-accent); }

/* ================================================================ v2 additions */
/* one-minute view: the button under a figure caption needs air */
body.wt2 .l3-fig + p, body.wt2 .l3-fig + .l3-note{ margin-top:clamp(28px,4vw,40px) !important; }

/* ------------------------------------------------ fold recordings */
.wt-loop{ margin:0; min-width:0; }
.wt-loop__screen{ position:relative; border-radius:clamp(14px,1.6vw,20px); overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgb(214 217 236), 0 30px 80px -40px rgb(var(--wt-rgb) / .6); }
.wt-loop video{ display:block; width:100%; height:auto; }
.wt-loop .figc{ margin-top:12px; }
.wt-loops{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); margin-top:40px;
  padding:clamp(16px,2.6vw,32px); border-radius:var(--l3-r); background:var(--l3-canvas); }
.wt-loops .figc{ color:#3a3a44; }
.wt-loops .wt-loop--wide{ grid-column:1 / -1; }

/* ------------------------------------------------ L0 / L1 / L2 */
.wt-levels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wt-levels__col{ padding:24px; border-radius:var(--l3-r); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.wt-levels__col--user{ border-color:var(--l3-accent-line); background:radial-gradient(ellipse 420px 200px at 0% 0%, rgb(var(--wt-rgb) / .18), transparent 70%), var(--l3-card-quiet); }
.wt-levels__k{ margin:0 0 4px !important; font:var(--t-b3c); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--l3-muted); }
.wt-levels__col--user .wt-levels__k{ color:var(--l3-accent); }
.wt-levels__t{ margin:0 0 18px !important; font:var(--t-b2a); color:#fff; }
.wt-levels ol{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.wt-levels li{ position:relative; margin:0; padding:14px 16px 14px 64px; border-radius:12px; background:var(--white-5); }
.wt-levels li + li{ margin-top:22px; }
.wt-levels li + li::before{ content:""; position:absolute; left:34px; top:-22px; height:22px; width:1px; background:var(--l3-line-strong, rgb(255 255 255 / .2)); }
.wt-levels li.is-side{ margin-left:28px; background:none; border:1px dashed var(--l3-line); }
.wt-levels li.is-side::before{ left:6px; }
.wt-levels__lvl{ position:absolute; left:14px; top:14px; min-width:36px; padding:2px 0; border-radius:8px; text-align:center;
  font:var(--t-b3c); font-size:12px; color:#fff; background:rgb(var(--wt-rgb) / .45); }
.wt-levels li.is-side .wt-levels__lvl{ background:var(--white-10); color:var(--l3-soft); }
.wt-levels b{ display:block; font:var(--t-b2a); color:#fff; }
.wt-levels span{ display:block; margin-top:2px; font:var(--t-b3); color:var(--l3-soft); }

/* ------------------------------------------------ homepage anatomy */
.wt-anatomy{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; counter-reset:a; }
.wt-anatomy li{ counter-increment:a; margin:0; display:flex; flex-direction:column; border-radius:var(--l3-r); overflow:hidden;
  background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.wt-anatomy__img{ display:block; aspect-ratio:16/10; overflow:hidden; background:#fff; cursor:zoom-in; }
.wt-anatomy__img img{ display:block; width:100%; height:100%; object-fit:contain; object-position:50% 50%; }
.wt-anatomy__txt{ padding:14px 16px 16px; }
.wt-anatomy__txt b{ display:block; font:var(--t-b3b); color:#fff; }
.wt-anatomy__txt b::before{ content:counter(a, decimal-leading-zero) "  "; color:var(--l3-accent); font:var(--t-b3c); }
.wt-anatomy__txt span{ display:block; margin-top:4px; font:var(--t-b3); color:var(--l3-soft); }
.wt-anatomy__txt .wt-anatomy__tag{ display:inline-block; }
.wt-anatomy li.is-shared{ border-color:var(--l3-accent-line); }
.wt-anatomy__tag{ display:inline-block; margin-top:8px; padding:1px 8px; border-radius:999px; font:var(--t-b3c); font-size:11px;
  color:var(--l3-accent); border:1px solid var(--l3-accent-line); }

/* ------------------------------------------------ content rules */
.wt-rules{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.wt-rules li{ margin:0; padding:18px 20px; border-radius:var(--l3-r-sm); background:var(--l3-card-quiet); border:1px solid var(--l3-line); }
.wt-rules b{ display:block; margin-bottom:4px; font:var(--t-b2a); color:#fff; }
.wt-rules span{ font:var(--t-b3); color:var(--l3-soft); }
.wt-rules em{ font-style:normal; color:var(--l3-accent); }

@media (max-width: 900px){
  .wt-levels, .wt-rules{ grid-template-columns:1fr; }
  .wt-anatomy{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .wt-loops{ grid-template-columns:1fr; }
  .wt-anatomy{ grid-template-columns:1fr; }
}

/* a fold recording inside a decision stays at reading width */
.l3-decision .wt-loop{ max-width:680px; margin-top:24px; }

/* the Lisa demo recording is portrait: keep it phone-sized */
.l3-split .wt-loop{ max-width:340px; }
.l3-split .wt-loop__screen{ box-shadow:0 0 0 1px rgb(214 217 236), 0 30px 80px -30px rgb(var(--wt-rgb) / .7); }

/* ================================================================ v3: diagrams, tall pages, branded next cards */
/* coded diagrams, purple accent (same .dg language as Lisa and Auto Attendant) */
body.wt2 .dgram--wt .dgram__scroll{ background:#0b0b0d; }
body.wt2 .l3-fig .dgram{ margin:0; }
body.wt2 .dg .dg-node--root rect, body.wt2 .dg .dg-node--next rect{ fill:rgb(var(--wt-rgb) / .2); stroke:var(--l3-accent); }
body.wt2 .dg .dg-node--gap rect{ fill:rgb(var(--wt-rgb) / .07); stroke:rgb(var(--wt-rgb) / .7); stroke-dasharray:6 6; }
body.wt2 .dg .dg-node--q rect{ fill:rgb(255 255 255 / .03); stroke:rgb(255 255 255 / .28); stroke-dasharray:6 6; }
body.wt2 .dg .dg-line--wt{ stroke:var(--l3-accent); }
body.wt2 .dg .dg-head--wt{ fill:var(--l3-accent); }
body.wt2 .dg text.dg-accent{ fill:var(--l3-accent); }
body.wt2 .dg text.dg-kick{ fill:var(--l3-muted); font-family:var(--font-mono); letter-spacing:.08em; }
body.wt2 .dg text.dg-kick--wt{ fill:var(--l3-accent); }
body.wt2 .dg .dg-chip rect{ fill:rgb(255 255 255 / .05); stroke:rgb(255 255 255 / .16); }
body.wt2 .dg .dg-chip text{ fill:#fff; font-family:var(--font-mono); }
body.wt2 .dg .dg-chip--wt rect{ fill:rgb(var(--wt-rgb) / .22); stroke:var(--l3-accent); }
body.wt2 .dg .dg-step circle{ fill:var(--l3-accent); }
body.wt2 .dg .dg-step text{ fill:#000; font-weight:700; }
body.wt2 .dg .dg-panel{ fill:var(--l3-canvas); }
body.wt2 .dg text.dg-onpanel{ fill:#4a4a5a; }
body.wt2 .dg text.dg-onpanel--wt{ fill:#7a3fc4; }
body.wt2 .dg .dg-shot-edge{ fill:none; stroke:rgb(214 217 236); stroke-width:1.5; }
body.wt2 .dg .dg-marker circle{ fill:var(--l3-accent); stroke:#fff; stroke-width:3; }
body.wt2 .dg .dg-marker text{ fill:#000; font-weight:700; }
body.wt2 .dg .dg-band{ fill:rgb(var(--wt-rgb) / .08); stroke:rgb(var(--wt-rgb) / .6); stroke-dasharray:6 6; }
body.wt2 .dg .dg-brace{ fill:none; stroke:rgb(255 255 255 / .35); stroke-width:1.6; }
body.wt2 .dg .dg-brace--wt{ stroke:var(--l3-accent); }
body.wt2 .dg .dg-strike{ fill:none; stroke:rgb(255 255 255 / .35); stroke-width:1.5; }

/* a long page shows its first fold; a fade and a label say there is more, a click opens it all */
.wt-tall .artifact-link{ position:relative; }
.wt-tall .artifact-link::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgb(239 240 254 / 0), rgb(239 240 254 / .96) 88%); }
.wt-tall .frame{ position:relative; }
.wt-tall__more{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2; pointer-events:none;
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:#111; color:#fff; font:var(--t-b3); white-space:nowrap; }

/* the homepage, section by section: one clean row per section */
.wt-sections{ list-style:none; margin:0; padding:0; border:1px solid var(--l3-line); border-radius:var(--l3-r); overflow:hidden; counter-reset:sx; }
.wt-sections li{ counter-increment:sx; display:grid; grid-template-columns:44px minmax(0,1fr) 168px; gap:20px; align-items:center;
  margin:0; padding:14px 18px; border-top:1px solid var(--l3-line); background:var(--l3-card-quiet); }
.wt-sections li:first-child{ border-top:0; }
.wt-sections li::before{ content:counter(sx, decimal-leading-zero); font:var(--t-b3c); color:var(--l3-accent); }
.wt-sections b{ display:block; font:var(--t-b2a); color:#fff; }
.wt-sections span{ display:block; margin-top:2px; font:var(--t-b3); color:var(--l3-soft); }
.wt-sections .wt-sections__img{ display:block; border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px var(--l3-line); cursor:zoom-in; }
.wt-sections .wt-sections__img img{ display:block; width:100%; height:auto; }
.wt-sections li.wt-sections__group{ display:block; padding:10px 18px; background:#0b0b0d; font:var(--t-b3c); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--l3-muted); counter-increment:none; }
.wt-sections li.wt-sections__group::before{ content:none; }
.wt-sections li.wt-sections__group em{ font-style:normal; color:var(--l3-accent); }

/* next: each case study keeps its own planet colour */
.wt-next__card--lisa{ --wt-rgb:232 59 157; border-color:rgb(232 59 157 / .5); }
.wt-next__card--lisa .wt-next__k{ color:#ff6fb9; }
.wt-next__card--lisa .wt-next__go{ background:#E83B9D; }
.wt-next__card--lisa:hover{ border-color:#E83B9D; }
.wt-next__card--aa{ --wt-rgb:232 110 3; border-color:rgb(232 110 3 / .5); }
.wt-next__card--aa .wt-next__k{ color:#ff9a3d; }
.wt-next__card--aa .wt-next__go{ background:#E86E03; }
.wt-next__card--aa:hover{ border-color:#E86E03; }

@media (max-width: 640px){
  .wt-sections li{ grid-template-columns:32px minmax(0,1fr); }
  .wt-sections .wt-sections__img{ grid-column:2; max-width:260px; }
}

/* before/after flows inside a decision */
.wt-flows{ display:grid; gap:10px; margin-top:28px; }
.wt-flows .wt-flow__label{ margin:8px 0 0 !important; }
.wt-flows .wt-flow__label:first-child{ margin-top:0 !important; }

/* Lisa: text beside the phone-sized demo */
.wt-lisa{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(28px,5vw,64px); align-items:center; }
.wt-lisa .wt-loop{ max-width:300px; }
.wt-lisa .wt-loop__screen{ border-radius:24px; }
@media (max-width: 900px){
  .wt-lisa{ grid-template-columns:1fr; }
  .wt-lisa .wt-loop{ max-width:280px; margin-inline:auto; }
}
body.wt2 .dg .dg-node--dim rect{ fill:#101012; stroke:rgb(255 255 255 / .1); stroke-dasharray:5 6; }
body.wt2 .dg .dg-node--dim text{ fill:#77777d; }
body.wt2 .wt-tall{ margin-top:clamp(28px,4vw,48px); }
.l3-decision .wt-loop{ max-width:560px; }
body.wt2 .dg .dg-page{ fill:rgb(255 255 255 / .025); stroke:rgb(255 255 255 / .12); }
body.wt2 .dg .dg-node--shared rect{ fill:rgb(var(--wt-rgb) / .12); stroke:rgb(var(--wt-rgb) / .7); stroke-dasharray:6 5; }
body.wt2 .dg .dg-key--shared{ fill:rgb(var(--wt-rgb) / .12); stroke:rgb(var(--wt-rgb) / .7); stroke-dasharray:5 4; }
body.wt2 .dg .dg-key--proof{ fill:rgb(var(--wt-rgb) / .2); stroke:var(--l3-accent); }
body.wt2 .dg .dg-rule{ stroke:rgb(255 255 255 / .1); stroke-width:1; }
/* any preview whose full version scrolls: a soft fade at the bottom says there is more */
.artifact-link.wt-long{ position:relative; }
.artifact-link.wt-long::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgb(239 240 254 / 0), rgb(239 240 254 / .95) 90%); }
.wt-tall__more{ display:none; }
.wt-lisa .wt-loop{ max-width:348px; }
.wt-lisa .wt-loop__screen{ border-radius:20px; background:#fff; }
body.wt2 .dg .dg-hl{ fill:rgb(var(--wt-rgb) / .06); stroke:var(--l3-accent); stroke-width:2.5; }
body.l3.wt2{ --l3-accent-rgb:var(--wt-rgb); }