/*
 * One-page showcase
 * Art direction: cinematic black → signal red → warm paper → controlled AI lab.
 * This file is loaded only on the home route; blog and privacy keep the stable
 * base system from main.css.
 */

.showcase-home {
  --show-paper: #e9e4d8;
  --show-paper-2: #f2eee5;
  --show-ink: #11110f;
  --show-muted: #625f58;
  --show-line: rgba(17, 17, 15, 0.2);
  --show-red: #f05234;
  --show-blue: #5c79ff;
  --show-acid: #d9ff43;
  --show-black: #090909;
  --show-serif: Georgia, 'Times New Roman', serif;
  --show-sans: 'Space Grotesk', Arial, sans-serif;
  background: var(--show-paper);
  color: var(--show-ink);
  font-family: var(--show-sans);
  line-height: 1.5;
}

.showcase-home main { background: var(--show-paper); }
.showcase-home ::selection { background: var(--show-red); color: var(--show-ink); }

/* Focus ring. The global one in main.css is the dark-theme lime, which lands
   at 1.02-1.11:1 on the paper sections of this page. Two-tone ring instead:
   the outline carries the contrast against the surface, the box-shadow halo
   against the outline, so it reads on every section without knowing the
   surface colour. Paper is the default; dark sections invert it. */
.showcase-home :focus-visible {
  outline: 2px solid var(--show-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--show-paper-2);
}
.showcase-home .showcase-hero :focus-visible,
.showcase-home .capability-panels :focus-visible,
.showcase-home .ai-showcase :focus-visible,
.showcase-home .site-footer :focus-visible {
  outline-color: #f2eee5;
  box-shadow: 0 0 0 5px #090909;
}
.showcase-home .showcase-blog :focus-visible {
  outline-color: #11110f;
  box-shadow: 0 0 0 5px #f2eee5;
}
.showcase-home .container { max-width: 1320px; }
.showcase-home h1,
.showcase-home h2,
.showcase-home h3 { text-wrap: balance; }

/* Header lives over the film, then turns into paper after the hero. */
.showcase-home .site-header--showcase {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  color: #f2efe8;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0));
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: color 260ms ease, background 260ms ease, border-color 260ms ease;
}
.showcase-home .site-header--showcase.is-on-paper {
  color: var(--show-ink);
  background: rgba(233, 228, 216, 0.9);
  border-bottom: 1px solid var(--show-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.showcase-home .site-header--showcase .header-inner { min-height: 4.5rem; }
.showcase-home .site-header--showcase .logo {
  color: currentColor;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.showcase-home .site-header--showcase .nav-list { gap: clamp(1rem, 2.4vw, 2.4rem); }
.showcase-home .site-header--showcase .nav-list a {
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.showcase-home .site-header--showcase .nav-list a:hover { opacity: 1; color: currentColor; }
.showcase-home .site-header--showcase .nav-lang a {
  border: 0;
  border-radius: 0;
  opacity: 1;
  padding: 0.42rem 0.68rem;
}

.showcase-section {
  position: relative;
  padding-block: clamp(6.5rem, 12vw, 11rem);
}
.showcase-section[id] { scroll-margin-top: 6.5rem; }
.showcase-section__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.showcase-section__head h2 {
  grid-column: 1 / 9;
  margin: 0;
  color: var(--show-ink);
  font-family: var(--show-serif);
  font-size: clamp(3.5rem, 9vw, 8.5rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.065em;
}
.showcase-section__head > p:last-child {
  grid-column: 9 / 13;
  margin: 0 0 0.35rem;
  color: var(--show-muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
}

/* Film hero */
.showcase-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--show-black);
  color: #f1eee6;
  isolation: isolate;
}
.showcase-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 8.333vw 100%,
    radial-gradient(ellipse at 72% 48%, rgba(103, 103, 103, 0.12), transparent 43%);
  pointer-events: none;
}
.showcase-hero__noise {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.showcase-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  gap: 1.5rem;
  padding-top: clamp(7.5rem, 13vh, 10rem);
  padding-bottom: 2rem;
}
.showcase-hero__copy {
  position: relative;
  z-index: 3;
  grid-column: 1 / 10;
  align-self: center;
  padding-bottom: clamp(4rem, 8vh, 7rem);
}
.showcase-hero__title {
  margin: 0;
  font-family: var(--show-sans);
  font-size: clamp(5.4rem, 14.6vw, 13.2rem);
  font-weight: 700;
  line-height: 0.69;
  letter-spacing: -0.085em;
  text-transform: uppercase;
}
.showcase-hero__title span { display: block; }
.showcase-hero__title span:last-child {
  margin-left: clamp(1rem, 7vw, 7rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(241, 238, 230, 0.9);
}
.showcase-hero__lead {
  max-width: 31ch;
  margin: clamp(3rem, 7vh, 5rem) 0 0 clamp(1rem, 7vw, 7rem);
  font-family: var(--show-serif);
  font-size: clamp(1.45rem, 2.55vw, 2.55rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.showcase-hero__media {
  position: absolute;
  z-index: 1;
  top: 4.5rem;
  right: clamp(-6rem, -2vw, 0rem);
  bottom: 0;
  width: min(53vw, 47rem);
  aspect-ratio: auto;
  margin: 0;
}
.showcase-hero__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.06);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 10%, #000 89%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 13%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 10%, #000 89%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 13%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.showcase-hero__media .showcase-hero__fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.showcase-hero__scroll {
  z-index: 4;
  grid-column: 1 / 6;
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 24rem);
  padding: 1rem 0;
  border-top: 1px solid rgba(241, 238, 230, 0.28);
  color: rgba(241, 238, 230, 0.72);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.showcase-hero__scroll:hover { color: #fff; }
.showcase-hero__scroll span:last-child {
  color: var(--show-red);
  font-size: 1.2rem;
  transition: transform 200ms ease;
}
.showcase-hero__scroll:hover span:last-child { transform: translateY(4px); }

/* Four facts: the loud transition out of the black film. */
.showcase-factband {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--show-red);
  color: var(--show-ink);
  border-block: 1px solid var(--show-ink);
}
.showcase-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.showcase-fact {
  min-height: 12rem;
  padding: 2.2rem clamp(1rem, 2.5vw, 2.4rem);
  border-left: 1px solid rgba(17,17,15,0.55);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.showcase-fact:first-child { border-left: 0; padding-left: 0; }
/* <dl> requires dt before dd, so the visual order (big number on top, label
   underneath) is restored here rather than by reversing the markup. */
.showcase-fact dt { order: 2; }
.showcase-fact dd { order: 1; }
.showcase-fact dd {
  position: relative;
  margin: 0;
  padding-top: 1.05rem;
  font-family: var(--show-sans);
  font-size: clamp(3.4rem, 6.2vw, 6rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.075em;
}
.showcase-fact__prefix {
  position: absolute;
  top: 0;
  left: 0.12em;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.showcase-fact dt {
  max-width: 16ch;
  margin: 1.8rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Capability switchboard */
.capability-section {
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(17,17,15,.05) 50%, transparent calc(50% + .5px)),
    var(--show-paper);
}
.capability-lab {
  display: grid;
  grid-template-columns: 1fr;
  border-block: 1px solid var(--show-ink);
}
.capability-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--show-ink);
}
.capability-tabs button {
  appearance: none;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  min-height: 5.4rem;
  padding: 1.15rem 1.5rem;
  border: 0;
  border-right: 1px solid var(--show-line);
  background: transparent;
  color: var(--show-muted);
  font: 500 clamp(1.1rem, 1.7vw, 1.5rem)/1 var(--show-sans);
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.capability-tabs button:last-child { border-right: 0; }
.capability-tabs button:hover { color: var(--show-ink); }
.capability-tabs button.is-active {
  background: var(--show-ink);
  color: var(--show-paper-2);
}
.capability-tabs button.is-active span { color: var(--show-red); }
.capability-panels { min-width: 0; background: var(--show-black); color: #f2eee5; }
.capability-panel {
  --cap-accent: var(--show-red);
  min-height: clamp(44rem, 56vw, 49rem);
  display: grid;
  grid-template-columns: minmax(21rem, 5fr) minmax(0, 7fr);
}
.capability-panel--web { --cap-accent: var(--show-blue); }
.capability-panel--ai { --cap-accent: var(--show-acid); }
.capability-panel[hidden] { display: none; }
.capability-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: clamp(2rem, 3.3vw, 3.5rem);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(242, 238, 229, 0.18);
}
.capability-eyebrow {
  margin: 0;
  color: var(--cap-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}
.capability-copy h3 {
  max-width: 100%;
  margin: clamp(3.4rem, 6vw, 5.8rem) 0 1.5rem;
  color: #f2eee5;
  font-family: var(--show-serif);
  font-size: clamp(2.5rem, 3.7vw, 4rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.capability-text {
  max-width: 44ch;
  margin: 0;
  color: rgba(242, 238, 229, 0.58);
  font-size: 1rem;
}
.capability-promise {
  max-width:44ch;
  margin:1.5rem 0 0;
  padding:1rem 0 1rem 1rem;
  border-left:2px solid var(--cap-accent);
  color:rgba(242,238,229,.88);
  font:500 clamp(.86rem,1.15vw,1rem)/1.48 var(--show-sans);
}
.capability-scope {
  display:grid;
  gap:0;
  margin:2rem 0 0;
  padding:0;
  border-top:1px solid rgba(242,238,229,.2);
  list-style:none;
}
.capability-scope li {
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  gap:.75rem;
  padding:.85rem 0;
  border-bottom:1px solid rgba(242,238,229,.16);
}
.capability-scope li > span {
  padding-top:.15rem;
  color:var(--cap-accent);
  font:400 .7rem/1 var(--font-mono);
}
.capability-scope li div { display:grid;gap:.28rem; }
.capability-scope strong { color:#f2eee5;font:600 .875rem/1.25 var(--show-sans); }
.capability-scope small { max-width:40ch;color:rgba(242,238,229,.58);font:400 .8rem/1.45 var(--show-sans); }
.capability-details { margin-top:auto;padding-top:1.8rem;border-bottom:1px solid rgba(242,238,229,.2); }
.capability-details summary {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  color: rgba(242,238,229,.66);
  font: 400 .75rem/1.3 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.capability-details summary::-webkit-details-marker { display: none; }
.capability-details[open] summary span { transform: rotate(45deg); }
.capability-details ul {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0 0 1.1rem;
  list-style: none;
}
.capability-details li {
  border: 1px solid rgba(242,238,229,.22);
  padding: .35rem .55rem;
  color: rgba(242,238,229,.72);
  font: 400 .75rem/1.2 var(--font-mono);
  letter-spacing: .05em;
}
.capability-demo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 2.25rem);
  background:
    linear-gradient(rgba(242,238,229,.055) 1px,transparent 1px) 0 0/100% 20%,
    linear-gradient(90deg,rgba(242,238,229,.055) 1px,transparent 1px) 0 0/20% 100%;
  isolation: isolate;
}
.capability-demo::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:22rem;
  aspect-ratio:1;
  right:-9rem;
  top:-9rem;
  border:1px solid color-mix(in srgb,var(--cap-accent) 45%,transparent);
  border-radius:50%;
  box-shadow:0 0 0 4rem color-mix(in srgb,var(--cap-accent) 3%,transparent);
}
.campaign-demo {
  display:grid;
  grid-template-columns:minmax(10rem,.8fr) minmax(13rem,1.2fr);
  gap:clamp(1.25rem,3vw,2.8rem);
  align-items:stretch;
  width:100%;
  min-width:0;
  margin:auto 0;
}
.campaign-demo__sources {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:1.25rem;
  border:1px solid rgba(242,238,229,.22);
  background:rgba(17,17,15,.78);
}
.campaign-demo__label {
  margin-bottom:1.25rem;
  color:var(--cap-accent);
  font:400 .75rem/1.2 var(--font-mono);
  letter-spacing:.09em;
}
.campaign-demo__channels {
  display:flex;
  flex-direction:column;
  gap:.55rem;
  min-width:0;
}
.brand-chip {
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
  min-height:3.15rem;
  padding:.55rem .7rem;
  border:1px solid rgba(242,238,229,.23);
  background:rgba(17,17,15,.78);
  color:#f2eee5;
  font:500 clamp(.65rem,.8vw,.78rem)/1.1 var(--show-sans);
}
.brand-chip img {
  display:block;
  flex:0 0 1.85rem;
  width:1.75rem;
  height:1.75rem;
  object-fit:contain;
}
.brand-chip__logos {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:.3rem;
}
.brand-chip__logos img {
  flex-basis:1.35rem;
  width:1.35rem;
  height:1.35rem;
}
.brand-chip__logos i {
  color:rgba(242,238,229,.5);
  font:normal 400 .65rem/1 var(--font-mono);
}
.campaign-demo__signal {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid rgba(242,238,229,.2);
  color:#f2eee5;
  font:700 clamp(1.4rem,2.2vw,2.1rem)/1 var(--show-sans);
  letter-spacing:-.05em;
}
.campaign-demo__signal i { color:var(--cap-accent);font-style:normal;font-weight:400; }
.campaign-demo__flow {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.55rem;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
.campaign-demo__flow li {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  min-height:4.15rem;
  padding:.65rem .85rem;
  border:1px solid rgba(242,238,229,.24);
  background:rgba(17,17,15,.82);
}
.campaign-demo__flow li:not(:last-child)::after {
  content:"↓";
  position:absolute;
  z-index:2;
  left:50%;
  top:calc(100% - .05rem);
  color:var(--cap-accent);
  font:500 .75rem/1 var(--show-sans);
  transform:translateX(-50%);
}
.campaign-demo__flow li div { display:grid;grid-template-columns:1fr;gap:.24rem;min-width:0; }
.campaign-demo__flow strong { color:#f2eee5;font:700 clamp(.88rem,1.3vw,1.1rem)/1 var(--show-sans);letter-spacing:-.025em; }
.campaign-demo__flow small { color:rgba(242,238,229,.62);font:400 .75rem/1.35 var(--font-mono);text-transform:uppercase; }
.campaign-demo__flow .campaign-demo__finish { border-color:var(--cap-accent);background:color-mix(in srgb,var(--cap-accent) 8%,var(--show-black)); }
.website-demo {
  display:grid;
  grid-template-columns:minmax(9.5rem,.8fr) minmax(0,1.45fr);
  gap:clamp(1rem,2.2vw,2rem);
  align-items:center;
  width:min(100%,43rem);
  min-width:0;
  margin:auto;
}
.website-demo__anatomy {
  display:flex;
  flex-direction:column;
  padding:1rem;
  border:1px solid rgba(242,238,229,.24);
  background:rgba(17,17,15,.72);
}
.website-demo__anatomy > span { margin-bottom:1rem;color:var(--cap-accent);font:500 clamp(.64rem,.85vw,.76rem)/1 var(--font-mono);letter-spacing:.1em; }
.website-demo__anatomy ol { margin:0;padding:0;border-top:1px solid rgba(242,238,229,.2);list-style:none; }
.website-demo__anatomy li { display:grid;grid-template-columns:minmax(0,1fr);padding:.58rem 0;border-bottom:1px solid rgba(242,238,229,.15); }
.website-demo__anatomy li strong { font:600 clamp(.61rem,.9vw,.74rem)/1 var(--show-sans); }
.website-demo__browser {
  position:relative;
  min-width:0;
  overflow:hidden;
  aspect-ratio:1.38/1;
  border:1px solid var(--cap-accent);
  background:#ece8df;
  color:#111;
  box-shadow:1.2rem 1.2rem 0 color-mix(in srgb,var(--cap-accent) 16%,transparent);
}
.website-demo__chrome {
  display:flex;
  align-items:center;
  gap:.3rem;
  height:2rem;
  padding:0 .6rem;
  border-bottom:1px solid rgba(17,17,15,.24);
  background:#d7d3ca;
}
.website-demo__chrome i { width:.38rem;height:.38rem;border-radius:50%;background:#777; }
.website-demo__chrome span { margin-left:.4rem;font:400 .48rem/1 var(--font-mono); }
.website-demo__page {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  grid-template-rows:auto auto 1fr;
  gap:.45rem;
  height:calc(100% - 2rem);
  padding:1rem;
}
.website-demo__page > span { grid-column:1/-1;width:36%;height:.32rem;background:#111; }
.website-demo__page > strong { display:block;height:2.2rem;background:#111; }
.website-demo__page > strong:nth-of-type(2) { background:var(--cap-accent); }
.website-demo__page > i { display:block;min-height:3rem;border:1px solid rgba(17,17,15,.28); }
.website-demo__page > i:nth-of-type(3) { grid-column:1/-1; }
.website-demo__browser em {
  position:absolute;
  right:.65rem;
  top:.55rem;
  padding:.25rem .4rem;
  background:var(--cap-accent);
  color:#101020;
  font:normal 600 .47rem/1 var(--font-mono);
  letter-spacing:.08em;
}
.ai-demo {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,.9vw,.8rem);
  align-items:stretch;
  width:100%;
  margin:auto 0;
  padding:0;
  list-style:none;
}
.ai-demo > li {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  min-height:9.5rem;
  padding:clamp(.75rem,1.15vw,1rem);
  border:1px solid rgba(242,238,229,.24);
  background:rgba(17,17,15,.78);
}
.ai-demo > li:not(:last-child)::after {
  content:"→";
  position:absolute;
  z-index:2;
  left:calc(100% + .12rem);
  top:50%;
  color:var(--cap-accent);
  font:300 1rem/1 var(--show-sans);
  transform:translateY(-50%);
}
.ai-demo small { color:var(--cap-accent);font:400 .52rem/1 var(--font-mono);letter-spacing:.08em; }
.ai-demo strong { max-width:12ch;font:500 clamp(.72rem,1vw,.92rem)/1.18 var(--show-sans); }
.ai-demo__model { border-color:var(--cap-accent) !important;background:color-mix(in srgb,var(--cap-accent) 8%,var(--show-black)) !important; }
.ai-demo__review::before { content:"✓";position:absolute;right:.75rem;bottom:.65rem;color:var(--cap-accent);font:600 1.05rem/1 var(--show-sans); }

/* Concept 03 - a living pipeline: a task token flows through the five
   permanent layer cards and lands in the output tray as a result. */
.capability-demo--ai {
  padding:0;
  background:#0d0d0b;
}
.capability-demo--ai::before { display:none; }
.ai-pipeline {
  width:100%;
  min-height:100%;
  display:grid;
  grid-template-rows:1fr;
  color:#f2eee5;
}
.ai-pipeline__sr {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.ai-pipeline__stage {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(11rem,.8fr);
  align-items:center;
  gap:clamp(1.8rem,3.5vw,3.2rem);
  min-height:30rem;
  padding:1.6rem clamp(1.1rem,2.4vw,2rem);
  background:
    repeating-linear-gradient(0deg, rgba(217,255,67,.045) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(217,255,67,.045) 0 1px, transparent 1px 36px);
}
.ai-pipeline__flow {
  position:relative;
  padding:2rem 0 0 3.2rem;
}
/* The rail the task token rides on. */
.ai-pipeline__flow::before {
  content:"";
  position:absolute;
  left:1.05rem;
  top:.5rem;
  bottom:.5rem;
  width:1px;
  background:rgba(217,255,67,.4);
}
.ai-pipeline__port {
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  gap:.55rem;
  color:rgba(242,238,229,.5);
  font:400 .75rem/1.2 var(--font-mono);
  letter-spacing:.1em;
}
.ai-pipeline__port i {
  width:9px;
  height:9px;
  margin-left:calc(1.05rem - 4px);
  border:1px solid var(--show-acid);
  background:#0d0d0b;
  transform:rotate(45deg);
}
.ai-pipeline__layers {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin:0;
  padding:0;
  list-style:none;
}
.ai-pipeline__layers li {
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:.85rem;
  align-items:center;
  min-height:3.9rem;
  padding:.55rem .85rem;
  border:1px solid rgba(217,255,67,.72);
  background:#11110f;
  box-shadow:.38rem .38rem 0 rgba(217,255,67,.14);
  transition:border-color 220ms ease,background 220ms ease,box-shadow 220ms ease,transform 220ms ease;
}
.ai-pipeline__layers li.is-hot {
  border-color:var(--show-acid);
  background:#161609;
  box-shadow:.38rem .38rem 0 rgba(217,255,67,.2),0 0 1.5rem rgba(217,255,67,.26);
  transform:translateX(.3rem);
}
.ai-pipeline__layers strong {
  min-width:0;
  color:#f2eee5;
  font:700 clamp(1.35rem,2.1vw,2.15rem)/.9 var(--show-sans);
  letter-spacing:-.05em;
}
.ai-pipeline__layers small {
  min-width:0;
  color:rgba(242,238,229,.52);
  font:400 .75rem/1.35 var(--font-mono);
  text-transform:uppercase;
  text-align:right;
}
.ai-pipeline__token {
  position:absolute;
  top:0;
  left:0;
  z-index:4;
  padding:.42rem .6rem;
  background:var(--show-acid);
  color:#11110f;
  font:700 .75rem/1 var(--font-mono);
  letter-spacing:.08em;
  white-space:nowrap;
  box-shadow:0 0 1.1rem rgba(217,255,67,.4),.22rem .22rem 0 rgba(217,255,67,.22);
  opacity:0;
  transform:translate(0,0);
  transition:transform 520ms cubic-bezier(.45,0,.2,1),opacity 220ms ease;
  pointer-events:none;
}
.ai-pipeline__token.is-live { opacity:1; }
.ai-pipeline__out {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-self:center;
  min-height:16rem;
  padding:1rem 1.1rem 1.2rem;
  border:1px solid rgba(217,255,67,.5);
  background:rgba(13,13,11,.85);
  box-shadow:.38rem .38rem 0 rgba(217,255,67,.12);
}
.ai-pipeline__out-label {
  color:rgba(242,238,229,.5);
  font:400 .75rem/1.2 var(--font-mono);
  letter-spacing:.1em;
}
.ai-pipeline__results {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.55rem;
  min-height:6.5rem;
}
.ai-pipeline__chip {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6rem;
  padding:.55rem .7rem;
  border:1px solid var(--show-acid);
  color:var(--show-acid);
  font:700 .75rem/1.2 var(--font-mono);
  letter-spacing:.08em;
  animation:ai-chip-in 420ms cubic-bezier(.22,1,.36,1) both;
}
.ai-pipeline__chip b { font-weight:700; }
.ai-pipeline__chip:nth-child(2) { opacity:.75; }
.ai-pipeline__chip:nth-child(3) { opacity:.58; }
@keyframes ai-chip-in {
  from { opacity:0;transform:translateY(-.5rem) scale(.96); }
  to { opacity:1;transform:none; }
}
.ai-pipeline__count {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.6rem;
  margin:0;
  padding-top:.85rem;
  border-top:1px solid rgba(217,255,67,.3);
  color:rgba(242,238,229,.5);
  font:400 .75rem/1.2 var(--font-mono);
  letter-spacing:.1em;
}
.ai-pipeline__count b { font:700 1.6rem/1 var(--font-mono);color:var(--show-acid); }
.ai-pipeline__count b.is-pop { animation:ai-count-pop 360ms cubic-bezier(.22,1,.36,1); }
@keyframes ai-count-pop {
  30% { transform:scale(1.22); }
}
/* JS arms the entrance; without JS the scene simply stands complete. */
.js .ai-pipeline.is-armed .ai-pipeline__layers li,
.js .ai-pipeline.is-armed .ai-pipeline__out,
.js .ai-pipeline.is-armed .ai-pipeline__port { opacity:0; }
.ai-pipeline.is-in .ai-pipeline__layers li {
  animation:ai-card-in 480ms cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i) * 220ms);
}
.ai-pipeline.is-in .ai-pipeline__port {
  animation:ai-card-in 480ms cubic-bezier(.22,1,.36,1) both;
}
.ai-pipeline.is-in .ai-pipeline__out {
  animation:ai-card-in 480ms cubic-bezier(.22,1,.36,1) both;
  animation-delay:1.15s;
}
@keyframes ai-card-in {
  from { opacity:0;transform:translateX(-1.1rem); }
  to { opacity:1;transform:none; }
}

.capability-panel.is-entering .capability-copy,
.capability-panel.is-entering .capability-demo { animation: cap-in 520ms cubic-bezier(.22,1,.36,1) both; }
.capability-panel.is-entering .capability-demo { animation-delay: 70ms; }
@keyframes cap-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

/* AI showcase */
.ai-showcase {
  --stage-bg: #eee8dc;
  --stage-ink: #11110f;
  --stage-accent: var(--show-red);
  overflow: hidden;
  background: var(--show-black);
  color: #f2eee5;
}
.showcase-section__head--ai { position:relative; z-index:1; }
.showcase-section__head--ai h2 { color:#f2eee5; }
.showcase-section__head--ai > p:last-child { color:rgba(242,238,229,.56); }
.ask-machine {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(19rem, 4fr) minmax(0, 8fr);
  border: 1px solid rgba(242,238,229,.24);
  min-height: clamp(38rem, 56vw, 48rem);
}
.ask-console {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border-right: 1px solid rgba(242,238,229,.24);
}
.ask-form { min-width:0; }
.ask-verification { max-width:100%; }
.ask-form label {
  display:block;
  margin-bottom:.75rem;
  color:#f2eee5;
  font:500 .95rem/1.4 var(--show-sans);
}
.ask-input { display:grid; grid-template-columns:minmax(0,1fr); gap:.85rem; }
.ask-input textarea {
  width:100%;
  min-height:9rem;
  resize:none;
  border:1px solid rgba(242,238,229,.5);
  border-radius:2px;
  padding:1rem;
  background:#1b1b18;
  color:#f2eee5;
  font:400 1rem/1.6 var(--show-sans);
  cursor:text;
  transition:border-color 180ms ease,background 180ms ease;
}
.ask-input textarea::placeholder { color:rgba(242,238,229,.65);opacity:1; }
.ask-input textarea:hover { border-color:rgba(242,238,229,.75); }
.ask-input textarea:focus { border-color:var(--show-red);background:#20201c; }
.ask-input textarea[aria-invalid="true"] { border-color:#ff7357; }
.ask-input__count {
  margin:0;
  color:rgba(242,238,229,.65);
  font:400 .75rem/1.4 var(--font-mono);
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.ask-input__count.is-over-limit { color:#ff7357; }
.ask-input__actions { display:flex;flex-wrap:wrap;align-items:center;gap:.75rem; }
.ask-input__hint {
  flex:1 1 10rem;
  color:rgba(242,238,229,.65);
  font:400 .75rem/1.5 var(--show-sans);
}
.ask-input button {
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  max-width:100%;
  min-height:2.9rem;
  margin-left:auto;
  padding:.65rem 1rem;
  border:1px solid var(--show-red);
  border-radius:2px;
  background:var(--show-red);
  color:var(--show-ink);
  cursor:pointer;
  font:500 .95rem/1.3 var(--show-sans);
  transition:background 180ms ease,border-color 180ms ease;
}
.ask-input button span:last-child { font-size:1.25rem; }
.ask-input button:hover { background:#ff7357;border-color:#ff7357; }
/* aria-disabled, not :disabled — the script keeps these focusable on purpose
   so focus is not thrown to <body> mid-request. */
.ask-input button:disabled,
.ask-input button[aria-disabled="true"],
.ask-suggestions button[aria-disabled="true"] { opacity:.42; cursor:wait; transform:none; }
.ask-note {
  margin:.85rem 0 0;
  color:rgba(242,238,229,.74);
  font:400 .75rem/1.5 var(--show-sans);
}
.ask-note__text { max-width:38ch; }
.ask-note__text a {
  color:#f2eee5;
  text-decoration:underline;
  text-decoration-color:var(--show-red);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}
.ask-note__text a:hover { color:var(--show-red); }
.ask-suggestions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:2.5rem; }
.ask-suggestions button {
  appearance:none;
  border:1px solid rgba(242,238,229,.42);
  border-radius:0;
  padding:.55rem .65rem;
  background:transparent;
  color:rgba(242,238,229,.62);
  font:400 .78rem/1.35 var(--font-mono);
  cursor:pointer;
  transition:border-color 180ms ease,color 180ms ease,background 180ms ease;
}
.ask-suggestions button:hover { border-color:var(--show-red); color:#fff; background:rgba(240,82,52,.09); }
.ask-status {
  min-height:1.35rem;
  margin:.7rem 0 0;
  color:rgba(242,238,229,.76);
  font:500 .76rem/1.45 var(--show-sans);
}
.ask-status:not(:empty) { position:relative;padding-left:.85rem; }
.ask-status:not(:empty)::before {
  content:"";
  position:absolute;
  top:.42em;
  left:0;
  width:.36rem;
  height:.36rem;
  background:var(--show-red);
}
.ask-status.is-error { color:#ff8068; }
.answer-stage {
  --stage-bg:#eee8dc;
  --stage-ink:#11110f;
  --stage-accent:#f05234;
  /* Two reds, on purpose (SPEC 7.1). #f05234 is a fill-and-rule colour: on
     this paper it computes to 2.89:1, which clears the 3:1 non-text bar and
     fails the 4.5:1 text bar. Small red type uses the darkened literal
     (#a82a12 = 5.73:1 here) instead. Every mode that sets its own accent
     already picked a dark one, so those just mirror it. */
  --stage-accent-text:#a82a12;
  position:relative;
  scroll-margin-top:5rem;
  overflow:hidden;
  container-type:inline-size;
  container-name:stage;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(1.5rem, 3.6vw, 3.5rem);
  background:var(--stage-bg);
  color:var(--stage-ink);
  transition:background 480ms ease,color 480ms ease;
  isolation:isolate;
}
.answer-stage[data-scene="campaign-mix"] { --stage-bg:#f3d64f;--stage-accent:#6b220f;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="b2b-linkedin"] { --stage-bg:#cfe3ff;--stage-accent:#075aa6;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="seo-foundations"] { --stage-bg:#d9ff43;--stage-accent:#174326;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="web-build"] { --stage-bg:#7d93ff;--stage-accent:#101020;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="ai-work"],
.answer-stage[data-scene="ai-grounded"] { --stage-bg:#b8f5dd;--stage-accent:#11624b;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="certificates"] { --stage-bg:#ff7255;--stage-accent:#421309;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="blog-stack"] { --stage-bg:#f0cd55;--stage-accent:#332a03;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="pricing-scope"] { --stage-bg:#f1d9b5;--stage-accent:#6a310f;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="measurement-stack"] { --stage-bg:#c9e8e4;--stage-accent:#114e53;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="ecommerce-flow"] { --stage-bg:#efcbdc;--stage-accent:#5b2040;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="trust-security"] { --stage-bg:#d6d7e8;--stage-accent:#31345f;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="timeline-dependencies"] { --stage-bg:#e7dfc7;--stage-accent:#5b4a17;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-scene="service-map"] { --stage-bg:#d4e4ca;--stage-accent:#2c5028;--stage-accent-text:var(--stage-accent); }
/* The idle knowledge-base state deliberately keeps the paper tone: it is not
   an answer about a topic, so it should not borrow a topic's colour. */
.answer-stage[data-mode="knowledge"] { --stage-bg:#eee8dc;--stage-accent:#6b6459;--stage-accent-text:var(--stage-accent); }
.answer-stage[data-mode="unknown"],
.answer-stage[data-mode="boundary"],
.answer-stage[data-mode="firewall"] { --stage-bg:#d1cdc4;--stage-accent:#5a5650;--stage-accent-text:var(--stage-accent); }
.answer-stage__grid {
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.11;
  background:
    linear-gradient(currentColor 1px,transparent 1px) 0 0/100% 12.5%,
    linear-gradient(90deg,currentColor 1px,transparent 1px) 0 0/12.5% 100%;
}
.answer-stage::before {
  content:"";
  position:absolute;
  z-index:-1;
  right:-15%;
  top:-20%;
  width:70%;
  aspect-ratio:1;
  border:1px solid var(--stage-accent);
  border-radius:50%;
  box-shadow:0 0 0 4rem color-mix(in srgb,var(--stage-accent) 5%,transparent),
             0 0 0 8rem color-mix(in srgb,var(--stage-accent) 4%,transparent);
  transition:transform 700ms cubic-bezier(.22,1,.36,1),border-color 480ms ease;
}
.answer-stage__topline {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 45%,transparent);
  font:400 .7rem/1.2 var(--font-mono);
  letter-spacing:.1em;
}
.answer-stage__topline[hidden] { display:none; }
.answer-stage__topline > span:last-child { color:var(--stage-accent-text); }
.answer-stage__content {
  display:flex;
  flex-direction:column;
  flex:1;
  padding-block:clamp(2.3rem,4.5vw,4rem) 2rem;
}
.answer-stage__content h3 {
  max-width:15ch;
  margin:0;
  color:var(--stage-ink);
  font:400 clamp(2.75rem,4.8vw,5.3rem)/.9 var(--show-serif);
  letter-spacing:-.065em;
}
.answer-stage__answer {
  max-width:60ch;
  margin:clamp(1.4rem,3vw,2.4rem) 0 0;
  color:color-mix(in srgb,var(--stage-ink) 75%,transparent);
  font-size:clamp(.96rem,1.3vw,1.12rem);
  line-height:1.65;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.answer-stage__answer[hidden] { display:none; }
.answer-stage__disclaimer {
  max-width:68ch;
  margin:.85rem 0 0;
  color:color-mix(in srgb,var(--stage-ink) 70%,transparent);
  font:400 .75rem/1.5 var(--show-sans);
}
.answer-stage__disclaimer[hidden] { display:none; }

.answer-stage__scene {
  position:relative;
  overflow:hidden;
  min-height:clamp(15rem,24vw,20rem);
  margin:clamp(1.5rem,3vw,2.4rem) 0;
  border-block:1px solid color-mix(in srgb,var(--stage-ink) 42%,transparent);
  background:color-mix(in srgb,var(--stage-bg) 78%,#fff);
  isolation:isolate;
}
.answer-stage__scene::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.13;
  background:
    linear-gradient(var(--stage-ink) 1px,transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg,var(--stage-ink) 1px,transparent 1px) 0 0/12.5% 100%;
}
.answer-stage__scene > * { min-height:inherit; }
.answer-stage__scene[hidden] { display:none; }
.scene-arrow {
  display:grid;
  place-items:center;
  align-self:center;
  color:var(--stage-accent);
  font:normal 300 clamp(1.4rem,2.4vw,2.4rem)/1 var(--show-sans);
}
.scene-profile {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.65rem;
  align-content:center;
  padding:1.5rem;
}
.scene-profile span {
  display:grid;
  place-items:center;
  min-height:5rem;
  border:1px solid var(--stage-ink);
  font:500 clamp(.7rem,1.2vw,.92rem)/1 var(--show-sans);
}
.scene-profile strong { grid-column:1/-1;text-align:center;font:500 .62rem/1 var(--font-mono);letter-spacing:.12em; }

/* The campaign answer is a literal platform map, followed by the work path. */
.scene-campaign {
  display:grid;
  grid-template-columns:minmax(9rem,.65fr) minmax(18rem,1.35fr);
  grid-template-rows:1fr auto;
  gap:1rem clamp(1rem,2.5vw,2.5rem);
  align-items:center;
  padding:clamp(1rem,2.5vw,2rem);
}
.scene-campaign__header { display:flex;flex-direction:column;align-self:stretch;justify-content:center;border-right:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent); }
.scene-campaign__header > span { max-width:13ch;color:var(--stage-accent);font:500 .58rem/1.3 var(--font-mono);letter-spacing:.09em; }
.scene-campaign__header strong { margin:.9rem 0 0;font:700 clamp(3.4rem,6vw,6rem)/.75 var(--show-sans);letter-spacing:-.08em; }
.scene-campaign__header small { margin-top:.75rem;color:color-mix(in srgb,var(--stage-ink) 62%,transparent);font:400 .56rem/1.3 var(--font-mono);text-transform:uppercase; }
.scene-campaign__brands { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem; }
.scene-brand {
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
  min-height:3.2rem;
  padding:.5rem;
  border:1px solid color-mix(in srgb,var(--stage-ink) 32%,transparent);
  background:color-mix(in srgb,var(--stage-bg) 72%,#fff);
  font:500 clamp(.58rem,1vw,.73rem)/1.1 var(--show-sans);
}
.scene-brand:nth-child(4),.scene-brand:nth-child(5) { grid-column:span 1; }
.scene-brand img { display:block;flex:0 0 1.65rem;width:1.65rem;height:1.65rem;object-fit:contain; }
.scene-campaign__path {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  padding:0;
  border-top:1px solid var(--stage-ink);
  list-style:none;
}
.scene-campaign__path li { position:relative;display:flex;flex-direction:column;gap:.45rem;padding:.8rem .6rem 0;border-left:1px solid color-mix(in srgb,var(--stage-ink) 25%,transparent); }
.scene-campaign__path li:first-child { padding-left:0;border-left:0; }
.scene-campaign__path li:not(:last-child)::after { content:"→";position:absolute;right:.45rem;top:.8rem;color:var(--stage-accent); }
.scene-campaign__path span { color:var(--stage-accent);font:400 .5rem/1 var(--font-mono); }
.scene-campaign__path b { font:600 clamp(.6rem,1vw,.78rem)/1 var(--show-sans); }

/* LinkedIn B2B: targeting inputs visibly narrow into people and two lead paths. */
.scene-b2b { display:flex;flex-direction:column;padding:clamp(1rem,2.5vw,2rem); }
.scene-b2b__brand { display:flex;align-items:center;gap:.75rem;padding-bottom:1rem;border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent); }
.scene-b2b__brand > img { display:block;flex:0 0 2.4rem;width:2.4rem;height:2.4rem;object-fit:contain; }
.scene-b2b__brand > span { display:flex;flex-direction:column;gap:.25rem; }
.scene-b2b__brand strong { font:600 1rem/1 var(--show-sans); }
.scene-b2b__brand small { color:#0a66c2;font:500 .52rem/1 var(--font-mono);letter-spacing:.09em; }
.scene-b2b__flow { display:grid;grid-template-columns:minmax(8rem,1fr) auto minmax(9rem,1fr) auto minmax(8rem,.8fr);gap:clamp(.55rem,1.5vw,1.2rem);align-items:center;flex:1;padding:1rem 0; }
.scene-b2b__filters,.scene-b2b__routes { display:flex;flex-direction:column;gap:.42rem; }
.scene-b2b__filters span,.scene-b2b__routes span { padding:.55rem;border:1px solid color-mix(in srgb,var(--stage-ink) 31%,transparent);background:rgba(255,255,255,.26);font:500 clamp(.5rem,.9vw,.65rem)/1.1 var(--font-mono);letter-spacing:.04em; }
.scene-b2b__audience { display:flex;flex-direction:column;align-items:center;text-align:center; }
.scene-b2b__people { display:flex;justify-content:center;margin-bottom:.55rem; }
.scene-b2b__people i { position:relative;width:2.4rem;height:2.4rem;margin-left:-.4rem;border:1px solid #0a66c2;border-radius:50%;background:color-mix(in srgb,#0a66c2 15%,#fff); }
.scene-b2b__people i::before { content:"";position:absolute;left:50%;top:.45rem;width:.65rem;height:.65rem;border-radius:50%;background:#0a66c2;transform:translateX(-50%); }
.scene-b2b__people i::after { content:"";position:absolute;left:50%;bottom:.35rem;width:1.15rem;height:.65rem;border-radius:1rem 1rem .4rem .4rem;background:#0a66c2;transform:translateX(-50%); }
.scene-b2b__audience small { color:#0a66c2;font:500 .48rem/1 var(--font-mono);letter-spacing:.08em; }
.scene-b2b__audience strong { margin-top:.45rem;font:600 clamp(.72rem,1.2vw,.95rem)/1.1 var(--show-sans); }
.scene-b2b__quality { display:flex;justify-content:space-between;gap:1rem;padding-top:.8rem;border-top:1px solid var(--stage-ink); }
.scene-b2b__quality span { color:#0a66c2;font:500 .52rem/1 var(--font-mono);letter-spacing:.08em; }
.scene-b2b__quality strong { font:600 clamp(.67rem,1vw,.82rem)/1 var(--show-sans); }

/* Web build: the screen assembles from empty rails into a recognisable site. */
.scene-web { display:grid;grid-template-columns:minmax(7rem,.55fr) minmax(15rem,1.45fr);gap:clamp(1rem,2.5vw,2rem);align-items:center;padding:clamp(1rem,2.5vw,2rem); }
.scene-web__steps { display:flex;flex-direction:column;margin:0;padding:0;border-top:1px solid var(--stage-ink);list-style:none; }
.scene-web__steps li { display:grid;grid-template-columns:2rem 1fr;gap:.5rem;padding:.65rem 0;border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent); }
.scene-web__steps span { color:var(--stage-accent);font:400 .5rem/1 var(--font-mono); }
.scene-web__steps b { font:600 clamp(.58rem,1vw,.75rem)/1 var(--show-sans); }
.scene-web__browser { position:relative;overflow:hidden;aspect-ratio:1.75/1;border:1px solid var(--stage-ink);background:#f2efe8;box-shadow:.75rem .75rem 0 color-mix(in srgb,var(--stage-accent) 18%,transparent); }
.scene-web__chrome { display:flex;align-items:center;gap:.25rem;height:1.7rem;padding:0 .55rem;border-bottom:1px solid rgba(17,17,15,.25);background:#d8d5cf; }
.scene-web__chrome i { width:.34rem;height:.34rem;border-radius:50%;background:#777; }
.scene-web__chrome span { margin-left:.35rem;color:#111;font:400 .45rem/1 var(--font-mono); }
.scene-web__page { position:absolute;inset:1.7rem 5.2rem 0 0;display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:.3rem 1fr auto;gap:.45rem;padding:.75rem;background:#0f0f0e; }
.scene-web__page .scene-web__nav { grid-column:1/-1;width:42%;height:.22rem;background:#eee; }
.scene-web__page > strong { align-self:end;display:block;height:2.4rem;background:#eee; }
.scene-web__page > strong:nth-of-type(2) { background:#f05234; }
.scene-web__page > p { grid-column:1/-1;width:70%;height:.26rem;margin:0;background:rgba(238,238,238,.35); }
.scene-web__page > div { grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem; }
.scene-web__page > div i { height:2rem;border:1px solid rgba(238,238,238,.3); }
.scene-web__code { position:absolute;right:0;top:1.7rem;bottom:0;width:5.2rem;display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:.55rem;border-left:1px solid rgba(17,17,15,.25);background:#e4e0d8; }
.scene-web__code span { padding:.35rem;border:1px solid rgba(17,17,15,.25);color:#111;text-align:center;font:600 .46rem/1 var(--font-mono); }
.scene-web__browser em { position:absolute;right:.35rem;top:.35rem;padding:.22rem .35rem;background:#d9ff43;color:#111;font:normal 600 .43rem/1 var(--font-mono);letter-spacing:.06em; }

/* SEO foundations: a technical audit sheet, deliberately separate from paid media. */
.scene-seo {
  display:grid;
  grid-template-columns:minmax(8rem,.62fr) minmax(17rem,1.38fr);
  grid-template-rows:1fr auto;
  gap:1rem clamp(1rem,2.5vw,2.3rem);
  align-items:center;
  padding:clamp(1rem,2.5vw,2rem);
}
.scene-seo__identity {
  display:flex;
  flex-direction:column;
  align-self:stretch;
  justify-content:center;
  min-width:0;
  border-right:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);
}
.scene-seo__identity small {
  max-width:16ch;
  color:var(--stage-accent);
  font:500 .56rem/1.3 var(--font-mono);
  letter-spacing:.09em;
}
.scene-seo__identity strong {
  margin:.8rem 0 .7rem;
  font:700 clamp(3.8rem,7vw,6.8rem)/.72 var(--show-sans);
  letter-spacing:-.09em;
}
.scene-seo__identity > span {
  max-width:18ch;
  color:color-mix(in srgb,var(--stage-ink) 66%,transparent);
  font:500 .5rem/1.35 var(--font-mono);
  letter-spacing:.045em;
}
.scene-seo__audit {
  align-self:center;
  border:1px solid var(--stage-ink);
  background:color-mix(in srgb,var(--stage-bg) 72%,#fff);
  box-shadow:.7rem .7rem 0 color-mix(in srgb,var(--stage-accent) 22%,transparent);
}
.scene-seo__audit-head {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem .8rem;
  border-bottom:1px solid var(--stage-ink);
  font:600 .5rem/1 var(--font-mono);
  letter-spacing:.07em;
}
.scene-seo__audit-head span { color:var(--stage-accent); }
.scene-seo__checks {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
}
.scene-seo__checks li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  min-width:0;
  min-height:2.35rem;
  padding:.55rem .7rem;
  border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 22%,transparent);
  font:500 clamp(.46rem,.8vw,.6rem)/1.1 var(--font-mono);
}
.scene-seo__checks li:nth-child(odd) { border-right:1px solid color-mix(in srgb,var(--stage-ink) 22%,transparent); }
.scene-seo__checks li:nth-last-child(-n+2) { border-bottom:0; }
.scene-seo__checks span { overflow-wrap:anywhere; }
.scene-seo__checks b { flex:0 0 auto;color:var(--stage-accent);font:700 .8rem/1 var(--show-sans); }
.scene-seo__path {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  padding:0;
  border-top:1px solid var(--stage-ink);
  list-style:none;
}
.scene-seo__path li {
  position:relative;
  display:grid;
  grid-template-columns:2rem 1fr;
  gap:.45rem;
  padding:.75rem .7rem 0;
  border-left:1px solid color-mix(in srgb,var(--stage-ink) 25%,transparent);
}
.scene-seo__path li:first-child { padding-left:0;border-left:0; }
.scene-seo__path li:not(:last-child)::after { content:"→";position:absolute;right:.5rem;top:.72rem;color:var(--stage-accent); }
.scene-seo__path span { color:var(--stage-accent);font:400 .5rem/1 var(--font-mono); }
.scene-seo__path b { font:600 clamp(.58rem,1vw,.76rem)/1 var(--show-sans); }

/* Two AI scenes: what Piotr builds, and how this exact website is grounded. */
.scene-ai-work,.scene-ai-grounded { display:grid;grid-template-columns:minmax(8rem,1fr) auto minmax(9rem,1fr) auto minmax(8rem,1fr);gap:clamp(.6rem,1.6vw,1.25rem);align-items:center;padding:clamp(1rem,2.5vw,2rem); }
.scene-ai-work__tasks,.scene-ai-work__model,.scene-ai-work__review,.scene-ai-grounded__question,.scene-ai-grounded__sources,.scene-ai-grounded__server { display:flex;flex-direction:column;min-height:9rem;padding:1rem;border:1px solid color-mix(in srgb,var(--stage-ink) 38%,transparent);background:rgba(255,255,255,.25); }
.scene-ai-work small,.scene-ai-grounded small { margin-bottom:auto;color:var(--stage-accent);font:500 .49rem/1.2 var(--font-mono);letter-spacing:.07em; }
.scene-ai-work__tasks span { padding:.3rem 0;border-top:1px solid color-mix(in srgb,var(--stage-ink) 22%,transparent);font:600 .55rem/1 var(--show-sans); }
.scene-ai-work__model { justify-content:space-between;border-color:var(--stage-accent);background:color-mix(in srgb,var(--stage-accent) 10%,transparent); }
.scene-ai-work strong,.scene-ai-grounded strong { font:600 clamp(.7rem,1.15vw,.92rem)/1.15 var(--show-sans); }
.scene-ai-work__review b { align-self:flex-end;margin-bottom:auto;font:700 1.7rem/1 var(--show-sans); }
.scene-ai-grounded__question strong { font-family:var(--show-serif);font-weight:400;font-size:clamp(.9rem,1.5vw,1.25rem); }
.scene-ai-grounded__sources { gap:.38rem; }
.scene-ai-grounded__sources span { padding:.35rem;border:1px solid color-mix(in srgb,var(--stage-ink) 24%,transparent);font:400 .48rem/1 var(--font-mono); }
.scene-ai-grounded__server { border-color:var(--stage-accent); }
.scene-ai-grounded__server b { align-self:flex-end;margin-top:auto;font:700 1.35rem/1 var(--show-sans); }

.scene-certificates { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;padding:clamp(1rem,2.5vw,2rem); }
.scene-certificates__stack { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;perspective:900px; }
.scene-certificates__stack > div { position:relative;min-height:8.8rem;margin-left:-.7rem;padding:.7rem;border:1px solid color-mix(in srgb,var(--stage-ink) 35%,transparent);background:#fbfaf6;box-shadow:.45rem .6rem 1rem rgba(17,17,15,.1);transform:rotate(calc((var(--cert-n,0) - 2) * 1deg)); }
.scene-certificates__stack > div:first-child { margin-left:0; }
.scene-certificates__stack small { color:var(--stage-accent);font:500 .42rem/1.2 var(--font-mono); }
.scene-certificates__stack strong { display:block;margin:.75rem 0;font:600 clamp(.58rem,.9vw,.72rem)/1.15 var(--show-sans); }
.scene-certificates__stack span { position:absolute;left:.7rem;right:.7rem;bottom:.7rem;font:500 .39rem/1.2 var(--font-mono); }
.scene-certificates__total { display:flex;flex-direction:column;text-align:right; }
.scene-certificates__total strong { font:700 clamp(2.5rem,4vw,4rem)/.8 var(--show-sans);letter-spacing:-.07em; }
.scene-certificates__total span { margin-top:.65rem;font:500 .48rem/1.2 var(--font-mono);text-transform:uppercase; }

.scene-profile-map { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(min(100%,12rem),.6fr);gap:2rem;align-items:center;padding:clamp(1rem,2.5vw,2rem); }
.scene-profile-map__timeline { position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none; }
.scene-profile-map__timeline::before { content:"";position:absolute;left:0;right:0;top:.35rem;height:1px;background:var(--stage-ink); }
.scene-profile-map__timeline li { position:relative;display:flex;flex-direction:column;gap:.6rem;padding-top:1.35rem;padding-right:.75rem; }
.scene-profile-map__timeline li::before { content:"";position:absolute;left:0;top:0;width:.7rem;height:.7rem;border:1px solid var(--stage-ink);border-radius:50%;background:var(--stage-bg); }
.scene-profile-map__timeline span { color:var(--stage-accent);font:500 .56rem/1 var(--font-mono); }
.scene-profile-map__timeline b { max-width:12ch;font:600 clamp(.65rem,1.1vw,.86rem)/1.15 var(--show-sans); }
.scene-profile-map__stats { display:grid;grid-template-columns:1.15fr .85fr;min-width:0;border:1px solid var(--stage-ink); }
.scene-profile-map__stats > div { display:flex;flex-direction:column;min-width:0;padding:.9rem .75rem;border-right:1px solid var(--stage-ink); }
.scene-profile-map__stats > div:nth-child(2) { border-right:0; }
.scene-profile-map__stats strong { font:700 clamp(1.6rem,2.4vw,2.5rem)/.85 var(--show-sans);letter-spacing:-.06em; }
.scene-profile-map__stats span { margin-top:.7rem;font:500 .43rem/1 var(--font-mono); }
.scene-profile-map__stats > small { grid-column:1/-1;padding:.65rem;border-top:1px solid var(--stage-ink);font:500 .45rem/1 var(--font-mono);text-align:center; }

.scene-blog { display:grid;grid-template-columns:7rem auto minmax(0,1fr);gap:1rem;align-items:center;padding:clamp(1rem,2.5vw,2rem); }
.scene-blog__file { display:grid;place-items:center;align-content:center;aspect-ratio:.78/1;border:1px solid var(--stage-ink);background:#fff;box-shadow:.5rem .5rem 0 color-mix(in srgb,var(--stage-accent) 22%,transparent); }
.scene-blog__file strong { font:700 2rem/1 var(--show-sans); }
.scene-blog__file span { margin-top:.7rem;font:500 .43rem/1 var(--font-mono); }
.scene-blog__posts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem; }
.scene-blog__posts > div { display:flex;flex-direction:column;min-height:8.5rem;padding:.75rem;border:1px solid color-mix(in srgb,var(--stage-ink) 34%,transparent);background:rgba(255,255,255,.27); }
.scene-blog__posts small { margin-bottom:auto;color:var(--stage-accent);font:500 .45rem/1 var(--font-mono); }
.scene-blog__posts strong { font:600 clamp(.6rem,1vw,.78rem)/1.2 var(--show-sans); }

.scene-boundary { display:flex;flex-direction:column;justify-content:center;padding:clamp(1rem,3vw,2.5rem); }
.scene-boundary > strong { color:var(--stage-accent);font:600 .58rem/1 var(--font-mono);letter-spacing:.08em; }
.scene-boundary > div { display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0; }
.scene-boundary > div span { padding:.55rem .7rem;border:1px solid var(--stage-ink);font:600 clamp(.58rem,1vw,.75rem)/1 var(--show-sans); }
.scene-boundary > small { color:color-mix(in srgb,var(--stage-ink) 65%,transparent);font:400 .58rem/1.35 var(--font-mono); }

.answer-stage__sources {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  align-items:center;
  padding-top:1rem;
  border-top:1px solid color-mix(in srgb,var(--stage-ink) 45%,transparent);
  color:var(--stage-ink);
  font:400 .78rem/1.4 var(--font-mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.answer-stage__sources ul { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; list-style:none; }
.answer-stage__sources li { border:1px solid color-mix(in srgb,var(--stage-ink) 26%,transparent); padding:.4rem .55rem; }
.answer-stage__sources a { color:inherit;text-decoration:none; }
.answer-stage__sources a:hover,.answer-stage__sources a:focus-visible { color:var(--stage-ink);text-decoration:underline;text-underline-offset:.18em; }
.answer-stage.is-loading::after {
  content:"";
  position:absolute;
  z-index:8;
  inset:0;
  background:linear-gradient(90deg,transparent,var(--stage-accent),transparent);
  opacity:.28;
  transform:translateX(-100%);
  animation:stage-scan 1.05s ease-in-out infinite;
  pointer-events:none;
}
.answer-stage.is-loading .answer-stage__content,
.answer-stage.is-loading .answer-stage__sources { opacity:1; }
.answer-stage.is-updated .answer-stage__content,
.answer-stage.is-updated .answer-stage__sources { animation:stage-content 650ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .answer-stage__scene > * { animation:scene-enter 780ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-brand,
.answer-stage.is-updated .scene-b2b__filters span,
.answer-stage.is-updated .scene-web__steps li,
.answer-stage.is-updated .scene-certificates__stack > div,
.answer-stage.is-updated .scene-blog__posts > div { animation:scene-item 620ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-brand:nth-child(2),
.answer-stage.is-updated .scene-b2b__filters span:nth-child(2),
.answer-stage.is-updated .scene-web__steps li:nth-child(2),
.answer-stage.is-updated .scene-certificates__stack > div:nth-child(2),
.answer-stage.is-updated .scene-blog__posts > div:nth-child(2) { animation-delay:90ms; }
.answer-stage.is-updated .scene-brand:nth-child(3),
.answer-stage.is-updated .scene-b2b__filters span:nth-child(3),
.answer-stage.is-updated .scene-web__steps li:nth-child(3),
.answer-stage.is-updated .scene-certificates__stack > div:nth-child(3),
.answer-stage.is-updated .scene-blog__posts > div:nth-child(3) { animation-delay:180ms; }
.answer-stage.is-updated .scene-brand:nth-child(4),
.answer-stage.is-updated .scene-web__steps li:nth-child(4),
.answer-stage.is-updated .scene-certificates__stack > div:nth-child(4) { animation-delay:270ms; }
.answer-stage.is-updated .scene-brand:nth-child(5),
.answer-stage.is-updated .scene-certificates__stack > div:nth-child(5) { animation-delay:360ms; }
.answer-stage.is-updated::before { transform:translate(-5%,7%) scale(1.12); }
@keyframes stage-scan { to { transform:translateX(100%); } }
@keyframes stage-content { from { opacity:0;transform:translateY(22px); } to { opacity:1;transform:none; } }
@keyframes scene-enter { from { opacity:0;transform:translateY(14px) scale(.985); } to { opacity:1;transform:none; } }
@keyframes scene-item { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:none; } }
.guardrail-drawer {
  margin-top:2rem;
  border-top:1px solid rgba(242,238,229,.28);
  border-bottom:1px solid rgba(242,238,229,.28);
}
.guardrail-drawer > summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:5rem;
  color:#f2eee5;
  font:500 clamp(1rem,1.6vw,1.3rem)/1.2 var(--show-sans);
  cursor:pointer;
  list-style:none;
}
.guardrail-drawer > summary::-webkit-details-marker { display:none; }
.guardrail-drawer > summary span:last-child { color:var(--show-red);font-size:1.5rem;transition:transform 200ms ease; }
.guardrail-drawer[open] > summary span:last-child { transform:rotate(45deg); }
.guardrail-drawer ol {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0 0 2.5rem;
  list-style:none;
}
.guardrail-drawer li { padding:0 clamp(1rem,2vw,1.8rem); border-left:1px solid rgba(242,238,229,.17); }
.guardrail-drawer li:first-child { padding-left:0;border-left:0; }
.guardrail-drawer h3 { margin:0 0 .7rem;color:#f2eee5;font:500 1rem/1.2 var(--show-sans); }
.guardrail-drawer li p { margin:0;color:rgba(242,238,229,.52);font-size:.84rem;line-height:1.55; }
.guardrail-fallback { margin:0;padding:0 0 2rem;color:rgba(242,238,229,.62);font:400 .75rem/1.5 var(--font-mono); }

/* Physical credential desk */
.certificate-section { background:var(--show-paper-2);overflow:hidden; }
.certificate-head {
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(13rem,4fr);
  gap:2rem;
  align-items:end;
  margin-bottom:clamp(4rem,8vw,7rem);
}
.certificate-head h2 {
  margin:2rem 0 1.5rem;
  overflow-wrap:anywhere;
  color:var(--show-ink);
  font:400 clamp(4rem,10vw,9rem)/.8 var(--show-serif);
  letter-spacing:-.07em;
}
.certificate-head > div > p:last-child { max-width:46ch;margin:0;color:var(--show-muted); }
.certificate-total { display:flex;flex-direction:column;align-items:flex-end;margin:0;color:var(--show-red);text-align:right; }
.certificate-total strong { font:700 clamp(7rem,14vw,13rem)/.65 var(--show-sans);letter-spacing:-.1em; }
.certificate-total span { margin-top:1.4rem;color:#11110f;font:400 .75rem/1.2 var(--font-mono);letter-spacing:.11em;text-transform:uppercase; }
.certificate-desk {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.35rem,1vw,.8rem);
  align-items:flex-start;
  margin:0;
  padding:3rem 1rem 5rem;
  list-style:none;
  perspective:1200px;
}
.certificate-desk > li {
  position:relative;
  z-index:calc(5 - var(--i));
  min-width:0;
  transform:translateY(0) rotate(var(--tilt));
  transform-origin:center bottom;
  transition:transform 420ms cubic-bezier(.22,1,.36,1),z-index 0s 120ms;
}
.certificate-desk > li:nth-child(even) { transform:translateY(2.6rem) rotate(var(--tilt)); }
.certificate-desk > li:hover { z-index:10;transform:translateY(-1.4rem) rotate(0deg) scale(1.035);transition-delay:0s; }
.certificate-desk a { display:block;color:var(--show-ink); }
.certificate-desk a:hover { color:var(--show-ink); }
.certificate-desk figure {
  margin:0;
  padding:.75rem;
  background:#fbfaf6;
  border:1px solid rgba(17,17,15,.2);
  box-shadow:0 1.3rem 2.5rem rgba(31,24,16,.15);
}
.certificate-image {
  display:grid;
  place-items:center;
  aspect-ratio:1.38 / 1;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(17,17,15,.1);
}
.certificate-image img { width:100%;height:100%;object-fit:contain;transition:transform 420ms ease,filter 420ms ease;filter:grayscale(.85); }
.certificate-desk a:hover img { transform:scale(1.035);filter:grayscale(0); }
.certificate-desk figcaption { display:flex;flex-direction:column;min-height:11.25rem;padding:1rem .25rem .35rem; }
.certificate-desk figcaption strong { margin:0 0 .55rem;font:500 clamp(.93rem,1.35vw,1.13rem)/1.15 var(--show-sans);letter-spacing:-.02em; }
.certificate-desk figcaption small { color:var(--show-muted);font:400 .75rem/1.4 var(--font-mono); }
.certificate-desk figcaption em { margin:auto 0 0;color:var(--show-muted);font:normal 400 .75rem/1.25 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.2em; }
.certificate-desk a:hover figcaption em { color:#a82a12; }

/* Blog closes the one-pager with another hard colour cut. */
/* FAQ — paper interlude between the certificates and the red blog block */
.faq-section { background: var(--show-paper); }
.faq-groups { display:grid;gap:clamp(4.5rem,9vw,8rem); }
.faq-group {
  display:grid;
  grid-template-columns:minmax(10rem,3fr) minmax(0,9fr);
  gap:clamp(2rem,5vw,6rem);
  align-items:start;
}
.faq-group__head {
  position:sticky;
  top:6.75rem;
  border-top:1px solid var(--show-ink);
  padding-top:1rem;
}
.faq-group__index {
  display:block;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
  color:#a82a12;
  font:400 .75rem/1 var(--font-mono);
  letter-spacing:.1em;
}
.faq-group__head h3 {
  max-width:8ch;
  margin:0;
  color:var(--show-ink);
  font:400 clamp(2.2rem,4vw,3.8rem)/.94 var(--show-serif);
  letter-spacing:-.055em;
}
.faq-list { min-width:0;border-top:1px solid var(--show-ink); }
.faq-item { border-bottom: 1px solid var(--show-line); }
.faq-item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: baseline;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-item__q { color: #a82a12; }
.faq-item__q {
  color: var(--show-ink);
  font: 500 clamp(1.05rem, 1.9vw, 1.45rem)/1.25 var(--show-sans);
  letter-spacing: -.02em;
  transition: color 160ms ease;
}
.faq-item__mark { color: #c63417; font-size: 1.4rem; line-height: 1; transition: transform 200ms ease; }
.faq-item[open] .faq-item__mark { transform: rotate(45deg); }
.faq-item > p {
  margin: 0;
  padding: 0 0 1.6rem;
  max-width: 46rem;
  color: var(--show-muted);
  font-size: .95rem;
  line-height: 1.6;
}

.showcase-blog { background:var(--show-red);color:var(--show-ink); }
.showcase-blog__head {
  display:grid;
  grid-template-columns:minmax(0,9fr) minmax(12rem,3fr);
  gap:2rem;
  align-items:end;
  margin-bottom:clamp(3.5rem,7vw,6rem);
}
.showcase-blog__head h2 {
  max-width:10ch;
  margin:2rem 0 0;
  overflow-wrap:anywhere;
  color:var(--show-ink);
  font:400 clamp(3.3rem,8vw,7.5rem)/.9 var(--show-serif);
  letter-spacing:-.06em;
}
.showcase-blog__head > a {
  justify-self:end;
  padding:.9rem 0;
  border-bottom:1px solid currentColor;
  color:var(--show-ink);
  font:400 .75rem/1.2 var(--font-mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.showcase-blog__head > a span { display:inline-block;margin-left:1.2rem;transition:transform 200ms ease; }
.showcase-blog__head > a:hover span { transform:translate(3px,-3px); }
.showcase-blog__list { margin:0;padding:0;border-top:1px solid var(--show-ink);list-style:none; }
.showcase-blog__list li { border-bottom:1px solid var(--show-ink); }
.showcase-blog__list a {
  display:grid;
  grid-template-columns:minmax(10rem,2.6fr) minmax(0,6fr) 3rem;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:center;
  min-height:11rem;
  padding:1.2rem 1rem;
  color:var(--show-ink);
  transition:background 230ms ease,color 230ms ease,padding 230ms ease;
}
.showcase-blog__list a:hover { padding-inline:1.6rem;background:var(--show-ink);color:var(--show-paper-2); }
.showcase-blog__number { font:400 .75rem/1.3 var(--font-mono); }
.showcase-blog__image { overflow:hidden;aspect-ratio:1.9/1; }
.showcase-blog__image img { width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter 260ms ease,transform 500ms ease; }
.showcase-blog__list a:hover img { filter:grayscale(0);transform:scale(1.035); }
.showcase-blog__body { display:grid;grid-template-columns:1fr auto;gap:.75rem 1rem;align-items:end; }
.showcase-blog__body time,.showcase-blog__body small { font:400 .75rem/1.3 var(--font-mono);letter-spacing:.05em;text-transform:uppercase; }
.showcase-blog__body time { grid-column:1/-1; }
.showcase-blog__body strong { font:500 clamp(1.25rem,2.7vw,2.3rem)/1.05 var(--show-sans);letter-spacing:-.035em; }
.showcase-blog__body small { text-align:right; }
.showcase-blog__arrow { justify-self:end;font-size:1.4rem;transition:transform 200ms ease; }
.showcase-blog__list a:hover .showcase-blog__arrow { transform:translate(4px,-4px);color:var(--show-red); }

/* Shared footer, re-art-directed only on the showcase route. */
.showcase-home .site-footer { background:var(--show-black);color:#f2eee5;border-top:0; }
.showcase-home .site-footer .footer-wordmark {
  color:#f2eee5;
  font-size:clamp(4rem,12vw,11rem);
  line-height:.76;
  letter-spacing:-.075em;
  text-transform:uppercase;
}
.showcase-home .site-footer .footer-nav a,
.showcase-home .site-footer .footer-navlink,
.showcase-home .site-footer .footer-copy,
.showcase-home .site-footer .footer-lang { color:rgba(242,238,229,.55); }
.showcase-home .site-footer a:hover,
.showcase-home .site-footer .footer-navlink:hover { color:var(--show-red); }

/* Reveal layer: enhancement only. */
.js .showcase-home [data-s-reveal] {
  opacity:0;
  transform:translateY(28px);
  transition:opacity 760ms cubic-bezier(.22,1,.36,1),transform 760ms cubic-bezier(.22,1,.36,1);
  transition-delay:var(--s-delay,0ms);
}
.js .showcase-home [data-s-reveal].is-visible { opacity:1;transform:none; }

@media (min-width: 1041px) {
  .showcase-hero__lead { max-width:27ch; }
}

@media (max-width: 1040px) {
  .showcase-hero__copy { grid-column:1/11; }
  .showcase-hero__media { width:min(61vw,43rem);right:-10vw;opacity:.82; }
  .showcase-hero__title { font-size:clamp(5.2rem,16vw,10rem); }
  .showcase-hero__lead { margin-left:0; }
  .capability-panel { grid-template-columns:minmax(20rem,5fr) minmax(0,7fr); }
  .guardrail-drawer ol { grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem; }
  .guardrail-drawer li:nth-child(3) { padding-left:0;border-left:0; }
}

@media (max-width: 820px) {
  /* At 200% base font the 12-column grids spend 11 x 1.5rem = 528px on gutters
     alone, more than the 240px of content left at 320px. Capping the gutter in
     vw keeps it proportional to the viewport instead of the font size. */
  .showcase-hero__inner,
  .showcase-section__head { column-gap:min(1.5rem, 3vw); }
  .showcase-home .site-header--showcase .header-inner { min-height:0;padding-block:.85rem; }
  .showcase-home .site-header--showcase .site-nav { overflow-x:auto;scrollbar-width:none; }
  .showcase-home .site-header--showcase .nav-list { width:max-content;margin-top:.4rem; }
  .showcase-home .site-header--showcase .nav-list a { padding-block:.65rem; }
  .showcase-section { padding-block:clamp(5rem,16vw,8rem); }
  .showcase-section__head h2,.showcase-section__head > p:last-child { grid-column:1/-1; }
  .showcase-section__head > p:last-child { max-width:38rem;margin-top:1rem; }
  .showcase-hero__inner { min-height:100svh;padding-top:8.5rem; }
  .showcase-hero__copy { grid-column:1/-1;align-self:start;padding-bottom:19rem; }
  .showcase-hero__title { font-size:clamp(4.4rem,22vw,8.4rem);line-height:.73; }
  .showcase-hero__title span:last-child { margin-left:0; }
  .showcase-hero__lead { max-width:24ch;margin-top:2.5rem;font-size:clamp(1.25rem,5.5vw,2rem); }
  .showcase-hero__media { top:auto;right:-2.5rem;bottom:1rem;width:min(75vw,30rem);height:57svh;opacity:.77; }
  .showcase-hero__scroll { grid-column:1/8; }
  .showcase-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .showcase-fact { min-height:10rem;border-bottom:1px solid rgba(17,17,15,.55); }
  .showcase-fact:nth-child(odd) { border-left:0;padding-left:0; }
  .showcase-fact:nth-last-child(-n+2) { border-bottom:0; }
  .capability-lab { grid-template-columns:1fr; }
  .capability-tabs { flex-direction:row;border-right:0;border-bottom:1px solid var(--show-ink); }
  .capability-tabs button { display:flex;justify-content:center;min-height:4.6rem;padding:.8rem;border-right:1px solid var(--show-line);border-bottom:0;font-size:1rem; }
  .capability-tabs button:last-child { border-right:0; }
  .capability-panel { min-height:0;grid-template-columns:1fr; }
  .capability-copy { min-height:28rem;border-right:0;border-bottom:1px solid rgba(242,238,229,.18); }
  .capability-demo { min-height:28rem; }
  .ask-machine { grid-template-columns:1fr; }
  .ask-console { border-right:0;border-bottom:1px solid rgba(242,238,229,.24); }
  .answer-stage { min-height:39rem; }
  /* minmax(0,1fr) not 1fr: a bare 1fr floors at min-content, so a long word in
     the heading stretches the track past the viewport and overflow:hidden on
     the section clips it away for good. */
  .certificate-head { grid-template-columns:minmax(0,1fr); }
  .certificate-total { align-items:flex-start;text-align:left; }
  .certificate-desk { display:flex;gap:0;overflow-x:auto;overflow-y:visible;margin-inline:calc(var(--padx) * -1);padding-inline:var(--padx);scroll-snap-type:x proximity;scrollbar-width:thin; }
  .certificate-desk > li { flex:0 0 17rem;margin-left:-1.5rem;scroll-snap-align:center; }
  .certificate-desk > li:first-child { margin-left:0; }
  .faq-groups { gap:clamp(4rem,12vw,6rem); }
  .faq-group { grid-template-columns:minmax(0,1fr);gap:1.4rem; }
  .faq-group__head {
    position:static;
    display:grid;
    grid-template-columns:2.25rem minmax(0,1fr);
    gap:.75rem;
    align-items:baseline;
    padding-top:.9rem;
  }
  .faq-group__index { margin:0; }
  .faq-group__head h3 { max-width:none;font-size:clamp(2rem,8vw,3rem); }
  .showcase-blog__head { grid-template-columns:minmax(0,1fr); }
  .showcase-blog__head > a { justify-self:start; }
  .showcase-blog__list a { grid-template-columns:minmax(8rem,2.5fr) minmax(0,4fr) 2rem; }
}

@media (max-width: 560px) {
  .showcase-home .site-header--showcase .logo { font-size:.77rem; }
  .showcase-home .site-header--showcase .nav-list { gap:1rem; }
  /* These two used to be hidden here because "Co robię" and "Certyfikaty"
     did not fit. The short spellings do, so every section stays reachable
     from a phone. */
  .showcase-home .site-header--showcase .nav-list { gap:.85rem; }
  .showcase-hero__copy { padding-bottom:17rem; }
  .showcase-hero__title { font-size:clamp(4rem,23vw,6.4rem);letter-spacing:-.075em; }
  .showcase-hero__lead { margin-top:2rem; }
  .showcase-hero__media { right:-4rem;width:27rem;height:52svh; }
  .showcase-hero__scroll { grid-column:1/10; }
  .showcase-fact { padding:1.5rem .85rem;min-height:8.5rem; }
  .showcase-fact dd { font-size:clamp(2.6rem,14vw,4rem); }
  .showcase-fact dt { font-size:.7rem; }
  .showcase-section__head h2 { font-size:clamp(3.3rem,17vw,5rem); }
  .capability-tabs button { flex-direction:column;gap:.5rem;min-width:0;font-size:.86rem; }
  .capability-copy { min-height:26rem;padding:1.5rem; }
  .capability-copy h3 { font-size:clamp(2.5rem,13vw,3.8rem); }
  .capability-promise { font-size:.84rem; }
  .capability-scope small { font-size:.78rem; }
  .capability-demo { min-height:24rem;padding:1rem; }
  .capability-demo__bar { font-size:.5rem; }
  .campaign-demo { grid-template-columns:1fr;margin:1.2rem 0; }
  .campaign-demo__sources { padding:1rem; }
  .campaign-demo__channels { gap:.4rem; }
  .brand-chip { min-height:2.7rem;padding:.4rem;font-size:.58rem; }
  .brand-chip img { flex-basis:1.45rem;width:1.45rem;height:1.45rem; }
  .brand-chip__logos { gap:.2rem; }
  .brand-chip__logos img { flex-basis:1rem;width:1rem;height:1rem; }
  .campaign-demo__signal i { transform:rotate(90deg); }
  .campaign-demo__flow li { min-height:3.55rem; }
  .website-demo { grid-template-columns:8rem 1fr;gap:.75rem;margin-block:1rem; }
  .website-demo__anatomy { padding:.6rem; }
  .website-demo__anatomy li { padding:.45rem 0; }
  .website-demo__anatomy li strong { font-size:.55rem; }
  .website-demo__browser { box-shadow:.5rem .5rem 0 color-mix(in srgb,var(--cap-accent) 16%,transparent); }
  .ai-demo { grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-block:1rem; }
  .ai-demo > li { min-height:6.7rem;padding:.6rem; }
  .ai-demo > li::after { display:none; }
  .ai-demo small { font-size:.43rem; }
  .ai-demo strong { font-size:.62rem; }
  .ask-machine { margin-inline:calc(var(--padx) * -.5); }
  .ask-console,.answer-stage { padding:1.25rem; }
  .ask-suggestions { flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0; }
  .ask-suggestions button { flex:1 1 100%;color:rgba(242,238,229,.72);text-align:left; }
  .answer-stage { min-height:37rem; }
  .answer-stage__content h3 { font-size:clamp(2.7rem,14vw,4.2rem); }
  /* The scene is decorative and already has a complete text equivalent. At
     phone widths its labels fell below 8px, so the compact view prioritises
     the readable answer instead of presenting imitation text. */
  .answer-stage__scene { display:none; }
  .scene-campaign { grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:.8rem;padding:1rem; }
  .scene-campaign__header { display:grid;grid-template-columns:1fr auto;align-items:end;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);padding-bottom:.75rem; }
  .scene-campaign__header > span { grid-row:1/3;align-self:center; }
  .scene-campaign__header strong { margin:0;font-size:2.8rem;text-align:right; }
  .scene-campaign__header small { margin:.25rem 0 0;text-align:right; }
  .scene-campaign__brands { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene-brand { min-height:2.7rem;font-size:.55rem; }
  .scene-brand:last-child { grid-column:1/-1; }
  .scene-campaign__path { grid-column:1; }
  .scene-b2b { padding:1rem; }
  .scene-b2b__flow { grid-template-columns:1fr;gap:.45rem; }
  .scene-b2b__flow > .scene-arrow { height:.7rem;transform:rotate(90deg); }
  .scene-b2b__filters,.scene-b2b__routes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .scene-b2b__filters span,.scene-b2b__routes span { display:grid;place-items:center;min-height:2.4rem;padding:.4rem;text-align:center;font-size:.42rem; }
  .scene-b2b__routes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene-b2b__people i { width:2rem;height:2rem; }
  .scene-b2b__quality { margin-top:.5rem; }
  .scene-web { grid-template-columns:1fr;padding:1rem; }
  .scene-web__steps { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--stage-ink); }
  .scene-web__steps li { display:flex;flex-direction:column;gap:.45rem;padding:.55rem;border-right:1px solid var(--stage-ink); }
  .scene-web__browser { box-shadow:.45rem .45rem 0 color-mix(in srgb,var(--stage-accent) 18%,transparent); }
  .scene-seo { grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:.8rem;padding:1rem; }
  .scene-seo__identity { display:grid;grid-template-columns:1fr auto;align-items:end;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);padding-bottom:.75rem; }
  .scene-seo__identity small { grid-row:1/3;align-self:center; }
  .scene-seo__identity strong { margin:0;font-size:3.2rem;text-align:right; }
  .scene-seo__identity > span { margin-top:.25rem;text-align:right; }
  .scene-seo__audit { width:100%;box-shadow:.4rem .4rem 0 color-mix(in srgb,var(--stage-accent) 22%,transparent); }
  .scene-seo__path { grid-column:1; }
  .scene-ai-work,.scene-ai-grounded { grid-template-columns:1fr;padding:1rem; }
  .scene-ai-work > .scene-arrow,.scene-ai-grounded > .scene-arrow { height:.6rem;transform:rotate(90deg); }
  .scene-ai-work__tasks,.scene-ai-work__model,.scene-ai-work__review,
  .scene-ai-grounded__question,.scene-ai-grounded__sources,.scene-ai-grounded__server { min-height:5.4rem;padding:.7rem; }
  .scene-ai-work__tasks { display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem; }
  .scene-ai-work__tasks small { grid-column:1/-1; }
  .scene-ai-work__tasks span { padding:.25rem; }
  .scene-certificates { grid-template-columns:1fr;padding:1rem; }
  .scene-certificates__stack { grid-template-columns:repeat(5,minmax(0,1fr));width:100%; }
  .scene-certificates__stack > div { overflow:hidden;min-width:0;min-height:7.6rem;margin-left:-.25rem;padding:.45rem; }
  .scene-certificates__stack > div:first-child { margin-left:0; }
  .scene-certificates__stack small { font-size:.31rem; }
  .scene-certificates__stack strong { overflow-wrap:anywhere;font-size:.48rem; }
  .scene-certificates__stack span { left:.45rem;right:.45rem;bottom:.45rem;font-size:.29rem; }
  .scene-certificates__total { align-items:center;text-align:center; }
  .scene-profile-map { grid-template-columns:1fr;padding:1rem; }
  .scene-profile-map__timeline { padding-top:.4rem; }
  .scene-blog { grid-template-columns:4.8rem 1fr;padding:1rem; }
  .scene-blog > .scene-arrow { display:none; }
  .scene-blog__file { width:4.5rem; }
  .scene-blog__file strong { font-size:1.4rem; }
  .scene-blog__file span { font-size:.34rem; }
  .scene-blog__posts { grid-template-columns:1fr; }
  .scene-blog__posts > div { min-height:3.6rem; }
  .answer-stage__sources { grid-template-columns:1fr; }
  .answer-stage__sources ul { justify-content:flex-start; }
  .guardrail-drawer ol { grid-template-columns:1fr; }
  .guardrail-drawer li,.guardrail-drawer li:nth-child(3) { padding:1.3rem 0;border-left:0;border-top:1px solid rgba(242,238,229,.14); }
  .certificate-head h2 { font-size:clamp(4rem,22vw,6rem); }
  .certificate-total strong { font-size:8rem; }
  .certificate-desk > li { flex-basis:15.5rem; }
  .showcase-blog__head h2 { font-size:clamp(3.4rem,16vw,5rem); }
  .showcase-blog__list a { grid-template-columns:minmax(0,1fr) 2rem;min-height:0;padding-block:1.5rem; }
  /* Column 2 is the 2rem arrow track. Placing the image and the text there
     forced them to their min-content width and pushed the whole document
     31px sideways on every phone. They belong in the wide first column. */
  .showcase-blog__image { grid-column:1/2;width:100%; }
  .showcase-blog__body { grid-column:1/2;grid-template-columns:1fr; }
  .showcase-blog__body small { text-align:left; }
  /* The grid above has two tracks, so grid-column:3 was generating an implicit
     third one and pushing the row off-screen. The arrow belongs in track 2. */
  .showcase-blog__arrow { grid-column:2;grid-row:1/3; }
}


/* The same narrow-scene layouts, driven by the actual stage width. The
   answer stage can be narrow on wide viewports (two-column layout), so
   viewport media queries alone leave a broken middle range. */
@container stage (max-width: 34rem) {
  /* These scenes are illustrative and aria-hidden. Once their own container
     becomes narrow, preserving 4-8px labels would imitate information rather
     than communicate it, so the readable answer takes the full stage. */
  .answer-stage__scene { display:none; }
  .answer-stage__content h3 { font-size:clamp(2.7rem,14vw,4.2rem); }
  .answer-stage__scene { min-height:20rem;margin-block:1.25rem; }
  .scene-campaign { grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:.8rem;padding:1rem; }
  .scene-campaign__header { display:grid;grid-template-columns:1fr auto;align-items:end;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);padding-bottom:.75rem; }
  .scene-campaign__header > span { grid-row:1/3;align-self:center; }
  .scene-campaign__header strong { margin:0;font-size:2.8rem;text-align:right; }
  .scene-campaign__header small { margin:.25rem 0 0;text-align:right; }
  .scene-campaign__brands { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene-brand { min-height:2.7rem;font-size:.55rem; }
  .scene-brand:last-child { grid-column:1/-1; }
  .scene-campaign__path { grid-column:1; }
  .scene-b2b { padding:1rem; }
  .scene-b2b__flow { grid-template-columns:1fr;gap:.45rem; }
  .scene-b2b__flow > .scene-arrow { height:.7rem;transform:rotate(90deg); }
  .scene-b2b__filters,.scene-b2b__routes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .scene-b2b__filters span,.scene-b2b__routes span { display:grid;place-items:center;min-height:2.4rem;padding:.4rem;text-align:center;font-size:.42rem; }
  .scene-b2b__routes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene-b2b__people i { width:2rem;height:2rem; }
  .scene-b2b__quality { margin-top:.5rem; }
  .scene-web { grid-template-columns:1fr;padding:1rem; }
  .scene-web__steps { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--stage-ink); }
  .scene-web__steps li { display:flex;flex-direction:column;gap:.45rem;padding:.55rem;border-right:1px solid var(--stage-ink); }
  .scene-web__browser { box-shadow:.45rem .45rem 0 color-mix(in srgb,var(--stage-accent) 18%,transparent); }
  .scene-seo { grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:.8rem;padding:1rem; }
  .scene-seo__identity { display:grid;grid-template-columns:1fr auto;align-items:end;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);padding-bottom:.75rem; }
  .scene-seo__identity small { grid-row:1/3;align-self:center; }
  .scene-seo__identity strong { margin:0;font-size:3.2rem;text-align:right; }
  .scene-seo__identity > span { margin-top:.25rem;text-align:right; }
  .scene-seo__audit { width:100%;box-shadow:.4rem .4rem 0 color-mix(in srgb,var(--stage-accent) 22%,transparent); }
  .scene-seo__path { grid-column:1; }
  .scene-ai-work,.scene-ai-grounded { grid-template-columns:1fr;padding:1rem; }
  .scene-ai-work > .scene-arrow,.scene-ai-grounded > .scene-arrow { height:.6rem;transform:rotate(90deg); }
  .scene-ai-work__tasks,.scene-ai-work__model,.scene-ai-work__review,
  .scene-ai-grounded__question,.scene-ai-grounded__sources,.scene-ai-grounded__server { min-height:5.4rem;padding:.7rem; }
  .scene-ai-work__tasks { display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem; }
  .scene-ai-work__tasks small { grid-column:1/-1; }
  .scene-ai-work__tasks span { padding:.25rem; }
  .scene-certificates { grid-template-columns:1fr;padding:1rem; }
  .scene-certificates__stack { grid-template-columns:repeat(5,minmax(0,1fr));width:100%; }
  .scene-certificates__stack > div { overflow:hidden;min-width:0;min-height:7.6rem;margin-left:-.25rem;padding:.45rem; }
  .scene-certificates__stack > div:first-child { margin-left:0; }
  .scene-certificates__stack small { font-size:.31rem; }
  .scene-certificates__stack strong { overflow-wrap:anywhere;font-size:.48rem; }
  .scene-certificates__stack span { left:.45rem;right:.45rem;bottom:.45rem;font-size:.29rem; }
  .scene-certificates__total { align-items:center;text-align:center; }
  .scene-profile-map { grid-template-columns:1fr;padding:1rem; }
  .scene-profile-map__timeline { padding-top:.4rem; }
  .scene-blog { grid-template-columns:4.8rem 1fr;padding:1rem; }
  .scene-blog > .scene-arrow { display:none; }
  .scene-blog__file { width:4.5rem; }
  .scene-blog__file strong { font-size:1.4rem; }
  .scene-blog__file span { font-size:.34rem; }
  .scene-blog__posts { grid-template-columns:1fr; }
  .scene-blog__posts > div { min-height:3.6rem; }
  .answer-stage__sources { grid-template-columns:1fr; }
  .answer-stage__sources ul { justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-home *,
  .showcase-home *::before,
  .showcase-home *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .showcase-home [data-s-reveal] { opacity:1;transform:none; }
}

@media (prefers-contrast: more) {
  .showcase-home { --show-line:rgba(17,17,15,.55); }
  .showcase-section__head > p:last-child,.capability-text { opacity:1;color:currentColor; }
}

@media (max-width:640px) {
  .campaign-demo { grid-template-columns:1fr; }
}

@media (max-width:700px) {
  .capability-demo--ai { min-height:0;padding:0; }
  .ai-pipeline__stage {
    grid-template-columns:1fr;
    align-items:start;
    gap:1.8rem;
    min-height:0;
    padding:1.15rem .9rem 1.6rem;
  }
  .ai-pipeline__flow { padding-left:2.7rem; }
  .ai-pipeline__layers { gap:.55rem; }
  .ai-pipeline__layers li { grid-template-columns:minmax(0,1fr);min-height:3.3rem;padding:.5rem .7rem; }
  .ai-pipeline__layers small { display:none; }
  .ai-pipeline__layers strong { font-size:clamp(1.35rem,6.5vw,1.9rem); }
  .ai-pipeline__out { min-height:0; }
  .ai-pipeline__results { min-height:3.2rem; }
  .ai-pipeline__chip:nth-child(3) { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .ai-pipeline.is-in .ai-pipeline__layers li,
  .ai-pipeline.is-in .ai-pipeline__port,
  .ai-pipeline.is-in .ai-pipeline__out { animation:none;opacity:1; }
  .ai-pipeline__token { display:none; }
  .ai-pipeline__chip { animation:none; }
}

/* Knowledge-base scene — the idle state of the answer stage.
   One square per fact in the manifest. A slow wave gives the static field a
   restrained instrument-panel pulse while it waits for a question. */
.scene-kb {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: 100%;
}
.scene-kb__count {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}
.scene-kb__count strong {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--stage-ink, #11110f);
}
.scene-kb__count small {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}
/* A fixed nine-column block, so the base reads as a chip of data rather than
   stretching into a progress bar on wide stages. */
.scene-kb__field {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: .34rem;
  width: min(100%, 17rem);
}
.scene-kb__tile {
  --rest: .16;
  aspect-ratio: 1;
  border-radius: 1px;
  background: currentColor;
  opacity: var(--rest);
  animation: kb-scan 6.5s linear infinite;
  animation-delay: calc(var(--i, 0) * 42ms);
}
/* Categories keep a different resting weight, so the field reads as
   structured data rather than decoration. Set the variable, not opacity:
   the keyframes return to var(--rest) and would otherwise flatten them. */
.scene-kb__tile[data-kb="work"]     { --rest: .26; }
.scene-kb__tile[data-kb="area"]     { --rest: .22; }
.scene-kb__tile[data-kb="cert"]     { --rest: .30; }
.scene-kb__tile[data-kb="boundary"] { --rest: .10; }

@keyframes kb-scan {
  0%, 82%  { opacity: var(--rest); transform: none; }
  86%      { opacity: .85; transform: scale(1.28); }
  100%     { opacity: var(--rest); transform: none; }
}
/* While a question is in flight the scan tightens: the base is being read. */
.answer-stage.is-loading .scene-kb__tile { animation-duration: 1.5s; }
.answer-stage.is-loading .scene-kb__count strong { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .scene-kb__tile { animation: none; }
}

/* The squares an answer was actually built from, lit for a moment before the
   topic scene replaces the field. Only the highlight is shown — the text of a
   fact never enters the DOM here. */
.scene-kb__tile.is-cited {
  animation: none;
  opacity: 1;
  outline: 1px solid var(--stage-accent);
  outline-offset: 1px;
  transform: scale(1.2);
  transition: transform 220ms cubic-bezier(.22,1,.36,1), opacity 200ms ease;
}

/* ---- Firewall: the refusal shown to a prompt-injection attempt ----
   The palette is pinned rather than inherited, because the one literal red in
   here is computed against this background: #a82a12 on the scene surface
   (#dbd8d1) is 4.91:1, and #f05234 would be 2.48:1 and fail as text. */
.answer-stage[data-scene="firewall"] { --stage-bg:#d1cdc4;--stage-accent:#5a5650;--stage-accent-text:var(--stage-accent); }
.scene-firewall {
  --fw-alert:#a82a12;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(.9rem,2vw,1.5rem);
  justify-content:center;
  padding:clamp(1rem,3vw,2.2rem);
}
.scene-firewall__head { display:flex;align-items:center;gap:clamp(.8rem,2vw,1.4rem); }
.scene-firewall__head > div { display:flex;flex-direction:column;gap:.45rem;min-width:0; }
.scene-firewall__head small { color:var(--fw-alert);font:500 .56rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-firewall__head strong { color:var(--stage-ink);font:600 clamp(.85rem,1.7vw,1.15rem)/1.1 var(--show-sans);letter-spacing:-.01em; }
.scene-firewall__badge { position:relative;flex:0 0 auto;width:clamp(4rem,7vw,5rem);color:var(--fw-alert); }
.scene-firewall__badge svg { display:block;width:100%;height:auto; }
/* One scanning rule crossing the whole panel, not a decorative shimmer. */
.scene-firewall__scan {
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:var(--fw-alert);
  opacity:.55;
  animation:firewall-scan 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
.scene-firewall__rows { display:flex;flex-direction:column;border-top:1px solid color-mix(in srgb,var(--stage-ink) 34%,transparent); }
.scene-firewall__rows > div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:.55rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 20%,transparent);
}
.scene-firewall__rows span { color:var(--stage-ink);font:500 clamp(.52rem,.95vw,.66rem)/1.2 var(--font-mono);letter-spacing:.06em; }
.scene-firewall__rows b { color:color-mix(in srgb,var(--stage-ink) 72%,transparent);font:600 clamp(.52rem,.95vw,.66rem)/1.2 var(--font-mono);letter-spacing:.06em;white-space:nowrap; }
.scene-firewall__rows .is-alert b { color:var(--fw-alert); }
.scene-firewall__rows .is-ok b { color:var(--stage-accent); }
.scene-firewall__stamp,
.answer-stage__stamp {
  align-self:center;
  padding:.42rem .8rem;
  border:2px solid var(--fw-alert,var(--stage-accent));
  color:var(--fw-alert,var(--stage-accent));
  font:700 clamp(.72rem,1.4vw,.95rem)/1 var(--font-mono);
  font-style:normal;
  letter-spacing:.16em;
  transform:rotate(-4deg);
}
.answer-stage__stamp {
  position:absolute;
  z-index:3;
  top:clamp(4.2rem,8vw,6.5rem);
  right:clamp(1.5rem,3.6vw,3.5rem);
  border-color:var(--stage-accent-text);
  color:var(--stage-accent-text);
  background:color-mix(in srgb,var(--stage-bg) 82%,#fff);
}
.answer-stage__stamp[hidden] { display:none; }
.scene-firewall__stamp,
.answer-stage__stamp.is-in { animation:stamp-in 420ms cubic-bezier(.34,1.56,.64,1) both; }
@keyframes firewall-scan {
  0%   { top:0;opacity:0; }
  12%  { opacity:.55; }
  88%  { opacity:.55; }
  100% { top:100%;opacity:0; }
}
@keyframes stamp-in {
  from { opacity:0;transform:rotate(-4deg) scale(1.4); }
  to   { opacity:1;transform:rotate(-4deg) scale(1); }
}

/* ---- Pricing: the scope sets the number, so the number stays a question ---- */
.scene-pricing {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(6rem,.65fr);
  gap:clamp(1rem,2.5vw,2rem);
  align-items:center;
  padding:clamp(1rem,3vw,2.2rem);
}
.scene-pricing__rows { display:flex;flex-direction:column;margin:0;padding:0;list-style:none; }
.scene-pricing__rows li {
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.5rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 20%,transparent);
}
.scene-pricing__rows b { color:var(--stage-ink);font:600 clamp(.62rem,1.1vw,.82rem)/1.1 var(--show-sans); }
.scene-pricing__bars { display:flex;gap:.2rem;flex:0 0 auto;width:3.4rem; }
.scene-pricing__bars i { width:.62rem;height:.62rem;border:1px solid var(--stage-accent);background:var(--stage-accent); }
.scene-pricing__quote {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  padding:clamp(.8rem,2vw,1.4rem) .6rem;
  border:1px solid var(--stage-ink);
  background:color-mix(in srgb,var(--stage-bg) 60%,#fff);
}
.scene-pricing__quote small { color:var(--stage-ink);font:500 .5rem/1 var(--font-mono);letter-spacing:.14em; }
.scene-pricing__quote span { color:var(--stage-ink);font:600 .46rem/1 var(--font-mono);letter-spacing:.12em; }
.scene-pricing__quote strong {
  color:var(--stage-accent);
  font:700 clamp(2.6rem,6vw,4.2rem)/.8 var(--show-sans);
  animation:pricing-pulse 2.4s ease-in-out infinite;
}
.scene-pricing__note { grid-column:1/-1;color:var(--stage-ink);font:500 .54rem/1.3 var(--font-mono);letter-spacing:.1em; }
@keyframes pricing-pulse {
  0%,100% { opacity:1;transform:scale(1); }
  50%     { opacity:.72;transform:scale(1.07); }
}

/* ---- Measurement: events enter one hub and fan out to destinations ---- */
.scene-measurement {
  display:grid;
  grid-template-columns:minmax(6rem,.8fr) auto minmax(7rem,.8fr) auto minmax(9rem,1fr);
  grid-template-rows:1fr auto;
  gap:clamp(.65rem,1.8vw,1.25rem);
  align-items:center;
  align-content:center;
  padding:clamp(1rem,3vw,2.2rem);
}
.scene-measurement__events,.scene-measurement__outputs { display:flex;flex-direction:column;gap:.4rem; }
.scene-measurement__events small,.scene-measurement__hub small {
  margin-bottom:.15rem;color:var(--stage-accent-text);font:600 .5rem/1 var(--font-mono);letter-spacing:.12em;
}
.scene-measurement__events span,.scene-measurement__outputs span {
  display:flex;align-items:center;min-height:2.25rem;padding:.45rem .55rem;border:1px solid color-mix(in srgb,var(--stage-ink) 28%,transparent);
  background:color-mix(in srgb,var(--stage-bg) 68%,#fff);font:600 clamp(.5rem,.9vw,.64rem)/1 var(--font-mono);letter-spacing:.04em;
}
.scene-measurement__hub {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:7.2rem;padding:.8rem;
  border:1px solid var(--stage-ink);background:color-mix(in srgb,var(--stage-bg) 58%,#fff);text-align:center;
}
.scene-measurement__hub strong { font:700 clamp(1rem,2vw,1.5rem)/.95 var(--show-sans);letter-spacing:-.03em; }
.scene-measurement__pulse {
  position:absolute;inset:.45rem;border:1px solid var(--stage-accent);opacity:.25;animation:measurement-pulse 2.8s ease-in-out infinite;
}
.scene-measurement__outputs span { position:relative;animation:measurement-output 4s ease-in-out infinite;animation-delay:calc(var(--i,0) * 420ms); }
.scene-measurement__outputs span::before { content:"";width:.38rem;height:.38rem;margin-right:.45rem;background:var(--stage-accent); }
.scene-measurement__loop {
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:.7rem;min-width:0;padding-top:.8rem;
  border-top:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);font-family:var(--font-mono);
}
.scene-measurement__loop span { color:var(--stage-accent-text);font-size:.54rem;font-weight:700;letter-spacing:.1em; }
.scene-measurement__loop > i { color:var(--stage-accent-text);font-style:normal; }
.scene-measurement__loop strong { font-size:clamp(.54rem,1vw,.68rem);letter-spacing:.07em; }
.scene-measurement__return { width:2.6rem;height:.75rem;border-top:1px solid var(--stage-accent);border-right:1px solid var(--stage-accent); }
@keyframes measurement-pulse { 0%,100% { opacity:.2;transform:scale(.98); } 50% { opacity:.65;transform:scale(1); } }
@keyframes measurement-output { 0%,58%,100% { opacity:.62;transform:none; } 12%,32% { opacity:1;transform:translateX(3px); } }

/* ---- E-commerce: one checkout journey, four downstream integrations ---- */
.scene-ecommerce {
  display:flex;flex-direction:column;justify-content:center;gap:clamp(1rem,2.5vw,1.65rem);padding:clamp(1rem,3vw,2.2rem);
}
.scene-ecommerce__journey { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;border-top:1px solid var(--stage-ink);list-style:none; }
.scene-ecommerce__journey li { position:relative;display:flex;flex-direction:column;gap:.45rem;padding:.75rem .6rem 0;border-left:1px solid color-mix(in srgb,var(--stage-ink) 24%,transparent); }
.scene-ecommerce__journey li:first-child { padding-left:0;border-left:0; }
.scene-ecommerce__journey li:not(:last-child)::after { content:"→";position:absolute;right:.5rem;top:.75rem;color:var(--stage-accent-text); }
.scene-ecommerce__journey span { color:var(--stage-accent-text);font:500 .5rem/1 var(--font-mono); }
.scene-ecommerce__journey b { font:600 clamp(.62rem,1.1vw,.82rem)/1 var(--show-sans); }
.scene-ecommerce__routes { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem; }
.scene-ecommerce__routes > div {
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:.5rem;min-width:0;min-height:5.3rem;
  padding:.65rem;border:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);background:color-mix(in srgb,var(--stage-bg) 66%,#fff);
}
.scene-ecommerce__routes > div::after {
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--stage-accent);transform:scaleX(1);transform-origin:left;
  animation:ecommerce-route 4.8s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--i,0) * 520ms);
}
.scene-ecommerce__routes small { grid-column:1/-1;color:var(--stage-accent-text);font:600 .46rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-ecommerce__routes i { align-self:end;color:var(--stage-accent-text);font-style:normal; }
.scene-ecommerce__routes strong { align-self:end;overflow-wrap:anywhere;text-align:right;font:650 clamp(.58rem,1vw,.75rem)/1.05 var(--show-sans); }
.scene-ecommerce__note { color:var(--stage-ink);font:600 .52rem/1.3 var(--font-mono);letter-spacing:.1em; }
@keyframes ecommerce-route { 0%,10% { transform:scaleX(0);opacity:.4; } 34%,72% { transform:scaleX(1);opacity:1; } 100% { transform:scaleX(1);opacity:.4; } }

/* ---- Trust/security: least privilege in, protected work, offboarding out ---- */
.scene-trust {
  display:grid;grid-template-columns:minmax(7rem,1fr) minmax(8rem,.85fr) minmax(7rem,1fr);grid-template-rows:1fr auto;
  gap:clamp(.75rem,2vw,1.4rem);align-items:center;align-content:center;padding:clamp(1rem,3vw,2.2rem);
}
.scene-trust__panel { display:flex;flex-direction:column;gap:.42rem;padding:.75rem;border:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);background:color-mix(in srgb,var(--stage-bg) 68%,#fff); }
.scene-trust__panel small { margin-bottom:.2rem;color:var(--stage-accent-text);font:600 .5rem/1 var(--font-mono);letter-spacing:.12em; }
.scene-trust__panel span { min-height:2rem;padding:.48rem;border-top:1px solid color-mix(in srgb,var(--stage-ink) 20%,transparent);font:600 clamp(.5rem,.9vw,.64rem)/1 var(--font-mono);letter-spacing:.05em; }
.scene-trust__core { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.scene-trust__core strong { margin-top:.8rem;font:650 clamp(.65rem,1.2vw,.88rem)/1.1 var(--show-sans); }
.scene-trust__core small { margin-top:.35rem;color:var(--stage-accent-text);font:600 .45rem/1 var(--font-mono);letter-spacing:.09em; }
.scene-trust__lock { position:relative;width:4.2rem;height:3.3rem;margin-top:1.45rem;border:1px solid var(--stage-ink);background:color-mix(in srgb,var(--stage-bg) 56%,#fff);animation:trust-lock 3.2s ease-in-out infinite; }
.scene-trust__lock::before { content:"";position:absolute;left:50%;top:-1.55rem;width:2.55rem;height:1.7rem;border:1px solid var(--stage-ink);border-bottom:0;border-radius:1.5rem 1.5rem 0 0;transform:translateX(-50%); }
.scene-trust__lock i { position:absolute;left:50%;top:1rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--stage-accent);transform:translateX(-50%); }
.scene-trust__lock i::after { content:"";position:absolute;left:50%;top:.48rem;width:.16rem;height:.72rem;background:var(--stage-accent);transform:translateX(-50%); }
.scene-trust__note { grid-column:1/-1;padding-top:.75rem;border-top:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);font:600 .52rem/1.3 var(--font-mono);letter-spacing:.09em; }
@keyframes trust-lock { 0%,100% { transform:none; } 50% { transform:scale(1.045); } }

/* ---- Timeline/dependencies: schedule progresses only when inputs arrive ---- */
.scene-timeline { display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,3vw,2rem);padding:clamp(1rem,3vw,2.2rem); }
.scene-timeline__steps { position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;margin:0;padding:1.25rem 0 0;list-style:none; }
.scene-timeline__steps::before { content:"";position:absolute;left:0;right:0;top:.38rem;height:1px;background:color-mix(in srgb,var(--stage-ink) 32%,transparent); }
.scene-timeline__steps li { position:relative;display:flex;flex-direction:column;gap:.48rem;min-width:0;padding-top:.85rem; }
.scene-timeline__steps li::before {
  content:"";position:absolute;left:0;top:-1.17rem;z-index:2;width:.72rem;height:.72rem;border:1px solid var(--stage-ink);border-radius:50%;background:var(--stage-bg);
  animation:timeline-dot 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * 650ms);
}
.scene-timeline__steps span { color:var(--stage-accent-text);font:600 .48rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-timeline__steps b { overflow-wrap:anywhere;font:600 clamp(.55rem,1vw,.75rem)/1.05 var(--show-sans); }
.scene-timeline__progress { position:absolute;left:0;right:0;top:.34rem;z-index:1;height:3px;background:var(--stage-accent);transform:scaleX(1);transform-origin:left;animation:timeline-fill 5s cubic-bezier(.22,1,.36,1) infinite; }
.scene-timeline__dependency { display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.8rem;border:1px dashed color-mix(in srgb,var(--stage-ink) 48%,transparent); }
.scene-timeline__dependency span { color:var(--stage-accent-text);font:700 .5rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-timeline__dependency i { color:var(--stage-accent-text);font-style:normal; }
.scene-timeline__dependency strong { font:650 clamp(.58rem,1vw,.76rem)/1.1 var(--show-sans); }
@keyframes timeline-fill { 0%,8% { transform:scaleX(0); } 70%,100% { transform:scaleX(1); } }
@keyframes timeline-dot { 0%,100% { background:var(--stage-bg);transform:none; } 12%,25% { background:var(--stage-accent);transform:scale(1.18); } 38% { background:var(--stage-bg);transform:none; } }

/* ---- Service map: a neutral multi-discipline overview for broad questions ---- */
.scene-service-map { display:flex;flex-direction:column;justify-content:center;gap:.55rem;padding:clamp(.75rem,2.4vw,1.5rem); }
.scene-service-map__eyebrow { align-self:center;color:var(--stage-accent-text);font:700 .5rem/1 var(--font-mono);letter-spacing:.12em;text-align:center; }
.scene-service-map__net { position:relative;align-self:center;width:min(100%,32rem);height:clamp(13rem,23vw,17rem); }
.scene-service-map__wires { position:absolute;inset:0;width:100%;height:100%;color:color-mix(in srgb,var(--stage-ink) 36%,transparent); }
.scene-service-map__wires path { stroke-width:.6;vector-effect:non-scaling-stroke; }
.scene-service-map__center,.scene-service-map__node { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); }
.scene-service-map__center {
  z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:6.8rem;height:4.8rem;border:1px solid var(--stage-ink);
  background:color-mix(in srgb,var(--stage-bg) 58%,#fff);text-align:center;
}
.scene-service-map__center::after { content:"";position:absolute;inset:-.45rem;border:1px solid var(--stage-accent);opacity:.3;animation:service-center 3.8s ease-in-out infinite; }
.scene-service-map__center small { color:var(--stage-accent-text);font:600 .45rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-service-map__center strong { margin-top:.35rem;font:700 .78rem/1 var(--show-sans); }
.scene-service-map__node {
  z-index:3;padding:.46rem .58rem;border:1px solid color-mix(in srgb,var(--stage-ink) 46%,transparent);background:color-mix(in srgb,var(--stage-bg) 64%,#fff);
  font:700 clamp(.46rem,.8vw,.58rem)/1 var(--font-mono);letter-spacing:.07em;white-space:nowrap;animation:service-node 5.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * 520ms);
}
.scene-service-map__node.is-web { left:20%;top:20%; }
.scene-service-map__node.is-ads { left:80%;top:20%; }
.scene-service-map__node.is-seo { left:15%;top:55%; }
.scene-service-map__node.is-ai { left:85%;top:55%; }
.scene-service-map__node.is-automation { left:30%;top:82%; }
.scene-service-map__node.is-measure { left:70%;top:82%; }
@keyframes service-center { 0%,100% { opacity:.25;transform:scale(.97); } 50% { opacity:.65;transform:scale(1); } }
@keyframes service-node {
  0%,68%,100% { opacity:.68;transform:translate(-50%,-50%) scale(1); }
  10%,28% { opacity:1;transform:translate(-50%,-50%) scale(1.06); }
}

/* ---- Process: four steps and a rail that fills once ---- */
.scene-process {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1.1rem,2.5vw,1.8rem);
  padding:clamp(1.2rem,3vw,2.4rem);
}
.scene-process__steps { position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin:0;padding:1.1rem 0 0;list-style:none; }
.scene-process__steps::before { content:"";position:absolute;left:0;right:0;top:.35rem;height:1px;background:color-mix(in srgb,var(--stage-ink) 34%,transparent); }
.scene-process__steps li { position:relative;display:flex;flex-direction:column;gap:.5rem;min-width:0;padding-top:.9rem; }
.scene-process__steps li::before { content:"";position:absolute;left:0;top:-.65rem;width:.7rem;height:.7rem;border:1px solid var(--stage-ink);border-radius:50%;background:var(--stage-bg); }
.scene-process__steps span { color:var(--stage-accent-text);font:500 .52rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-process__steps b { color:var(--stage-ink);font:600 clamp(.66rem,1.2vw,.9rem)/1.1 var(--show-sans);letter-spacing:.02em; }
.scene-process__rail {
  display:block;
  height:3px;
  width:100%;
  transform-origin:left center;
  background:var(--stage-accent);
  animation:process-fill 1.4s cubic-bezier(.22,1,.36,1) both;
}
.scene-process__note { color:var(--stage-ink);font:500 .54rem/1.3 var(--font-mono);letter-spacing:.1em; }
@keyframes process-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* ---- Contact: a drawn envelope, the address and the reply window ---- */
.scene-contact {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem,2.5vw,1.6rem);
  padding:clamp(1.2rem,3vw,2.4rem);
  text-align:center;
}
.scene-contact__envelope { width:clamp(7rem,16vw,10rem);color:var(--stage-ink); }
.scene-contact__envelope svg { display:block;width:100%;height:auto;overflow:visible; }
.scene-contact__arrow { color:var(--stage-accent);stroke:var(--stage-accent);animation:contact-send 2.8s ease-in-out infinite; }
.scene-contact__copy { display:flex;flex-direction:column;gap:.55rem;min-width:0; }
.scene-contact__copy strong { overflow-wrap:anywhere;color:var(--stage-ink);font:600 clamp(.8rem,1.6vw,1.1rem)/1.2 var(--font-mono);letter-spacing:.02em; }
.scene-contact__copy small { color:var(--stage-ink);font:500 .54rem/1 var(--font-mono);letter-spacing:.12em; }
@keyframes contact-send {
  0%,55%,100% { opacity:.35;transform:translateX(0); }
  25%         { opacity:1;transform:translateX(9px); }
}

/* ---- Gap: the same field of facts with one square missing ---- */
.scene-gap { position:relative;justify-content:center;padding:clamp(1rem,3vw,2rem); }
.scene-gap .scene-kb__count strong { font-size:clamp(1.8rem,4vw,2.6rem); }
.scene-gap .scene-kb__count small { opacity:1;color:var(--stage-ink); }
.scene-gap__hole {
  aspect-ratio:1;
  border:2px dashed var(--stage-accent-text);
  background:transparent;
  animation:gap-blink 1.6s steps(1,end) infinite;
}
.scene-gap__note { color:var(--stage-ink);font:600 .58rem/1.3 var(--font-mono);letter-spacing:.1em; }
@keyframes gap-blink { 0%,49% { opacity:1; } 50%,99% { opacity:.25; } 100% { opacity:1; } }

/* ---- Offline: the provider could not be reached ----
   Not a gap and not a refusal, so it gets neither of their pictures: the base
   is whole and still counted, the wire between it and the model stops halfway.
   Drained rather than alarmed — the outage is not the visitor's mistake, so
   the palette loses its colour instead of gaining a warning one.

   Every value below is a literal because every one of them was computed
   against the surface it actually sits on (--stage-bg #d6d5d1, or the live
   node's panel #e8e8e6):
     #11110f ink on panel 15.41:1, on stage 12.87:1   (text)
     #55524c muted on panel 6.35:1, on stage 5.30:1   (text and the dots)
     #4a4a46 accent-text / live border on stage 6.06:1
     #6b6862 wire on stage 3.78:1                     (non-text, ≥3:1)
     #a82a12 break mark on stage 4.76:1               (non-text, ≥3:1)
   --show-red (#f05234) is 2.40:1 here and appears nowhere in this scene. */
.answer-stage[data-scene="offline"] { --stage-bg:#d6d5d1;--stage-accent:#55524c;--stage-accent-text:#4a4a46; }
.scene-offline {
  --off-panel:#e8e8e6;
  --off-mute:#55524c;
  --off-edge:#4a4a46;
  --off-line:#6b6862;
  --off-break:#a82a12;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1.1rem,2.6vw,1.8rem);
  padding:clamp(1rem,3vw,2.2rem);
}
.scene-offline__link {
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(3.5rem,1fr) minmax(0,auto);
  align-items:center;
  gap:clamp(.5rem,1.6vw,1rem);
}
.scene-offline__node {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-width:0;
  padding:clamp(.7rem,1.8vw,1.05rem) clamp(.8rem,2vw,1.2rem);
}
/* Solid edge, filled panel, a real number: the base is fine. */
.scene-offline__node.is-live { border:1px solid var(--off-edge);background:var(--off-panel); }
/* Dashed edge, no fill, an em dash where the number would be: nothing answered. */
.scene-offline__node.is-down { border:1px dashed var(--off-line);background:transparent; }
.scene-offline__node strong {
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  line-height:.9;
  letter-spacing:-.03em;
}
.scene-offline__node.is-live strong { color:var(--stage-ink); }
.scene-offline__node.is-down strong { color:var(--off-mute); }
.scene-offline__tag { display:flex;align-items:center;gap:.42rem;min-width:0; }
.scene-offline__tag small {
  color:var(--off-mute);
  font:500 clamp(.5rem,.95vw,.6rem)/1.1 var(--font-mono);
  letter-spacing:.11em;
}
/* Same square as one tile of the knowledge field, at the same 1px radius. */
.scene-offline__beat { flex:0 0 auto;width:.5rem;height:.5rem;border-radius:1px; }
.is-live .scene-offline__beat { background:var(--off-mute);animation:offline-beat 2.8s ease-in-out infinite; }
/* Hollow, not dashed: at half a rem the dashes collapse into corner specks. */
.is-down .scene-offline__beat { border:1px solid var(--off-line);background:transparent; }
.scene-offline__wire {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  justify-items:center;
  gap:.4rem .5rem;
}
.scene-offline__seg { width:100%;background-repeat:repeat-x;background-position:0 center; }
/* Leaving the base: an even dashed run that keeps drifting toward the break. */
.scene-offline__seg--from {
  height:2px;
  background-image:repeating-linear-gradient(90deg,var(--off-line) 0 6px,transparent 6px 12px);
  background-size:12px 2px;
  animation:offline-drift 3.2s linear infinite;
}
/* Past the break: thinner and far sparser, because nothing is arriving. */
.scene-offline__seg--to {
  height:1px;
  background-image:repeating-linear-gradient(90deg,var(--off-line) 0 2px,transparent 2px 12px);
  background-size:12px 1px;
}
.scene-offline__break { display:block;width:clamp(1.1rem,2.4vw,1.5rem);color:var(--off-break); }
.scene-offline__break svg { display:block;width:100%;height:auto; }
.scene-offline__wire small {
  grid-column:1/-1;
  color:var(--stage-ink);
  font:600 clamp(.5rem,.95vw,.6rem)/1.2 var(--font-mono);
  letter-spacing:.11em;
  text-align:center;
}
/* "Still waiting", at a resting pulse rather than a spinner. Full opacity is
   the base state so the static frame keeps all three dots. */
.scene-offline__dots { display:flex;align-self:center;gap:.5rem; }
.scene-offline__dots i {
  width:.44rem;
  height:.44rem;
  border-radius:50%;
  background:var(--off-mute);
  opacity:1;
  animation:offline-wait 1.4s ease-in-out infinite;
}
.scene-offline__dots i:nth-child(2) { animation-delay:.18s; }
.scene-offline__dots i:nth-child(3) { animation-delay:.36s; }
@keyframes offline-beat { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes offline-drift { from { background-position:0 center; } to { background-position:12px center; } }
@keyframes offline-wait { 0%,100% { opacity:.28;transform:none; } 45% { opacity:1;transform:translateY(-2px); } }

/* New rows join the existing staggered entrance of the answer stage. */
.answer-stage.is-updated .scene-firewall__rows > div,
.answer-stage.is-updated .scene-pricing__rows li,
.answer-stage.is-updated .scene-ecommerce__routes > div,
.answer-stage.is-updated .scene-timeline__steps li,
.answer-stage.is-updated .scene-process__steps li { animation:scene-item 620ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-firewall__rows > div:nth-child(2),
.answer-stage.is-updated .scene-pricing__rows li:nth-child(2),
.answer-stage.is-updated .scene-ecommerce__routes > div:nth-child(2),
.answer-stage.is-updated .scene-timeline__steps li:nth-child(2),
.answer-stage.is-updated .scene-process__steps li:nth-child(2) { animation-delay:120ms; }
.answer-stage.is-updated .scene-firewall__rows > div:nth-child(3),
.answer-stage.is-updated .scene-pricing__rows li:nth-child(3),
.answer-stage.is-updated .scene-ecommerce__routes > div:nth-child(3),
.answer-stage.is-updated .scene-timeline__steps li:nth-child(3),
.answer-stage.is-updated .scene-process__steps li:nth-child(3) { animation-delay:240ms; }
.answer-stage.is-updated .scene-firewall__rows > div:nth-child(4),
.answer-stage.is-updated .scene-pricing__rows li:nth-child(4),
.answer-stage.is-updated .scene-ecommerce__routes > div:nth-child(4),
.answer-stage.is-updated .scene-timeline__steps li:nth-child(4),
.answer-stage.is-updated .scene-process__steps li:nth-child(4) { animation-delay:360ms; }
.answer-stage.is-updated .scene-timeline__steps li:nth-child(5) { animation-delay:480ms; }

/* Keyed to the stage, not the viewport: this column can be narrow on a wide
   screen, and at that width the headline grows to 14vw and would run under an
   absolutely positioned stamp. */
@container stage (max-width: 34rem) {
  .answer-stage__stamp { display:none; }
  .scene-pricing { grid-template-columns:1fr;align-content:center; }
  .scene-pricing__quote { flex-direction:row;justify-content:space-between;align-items:center; }
  .scene-measurement { grid-template-columns:1fr;grid-template-rows:auto;gap:.55rem; }
  .scene-measurement__events { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .scene-measurement__events small { grid-column:1/-1; }
  .scene-measurement__arrow { height:.7rem;transform:rotate(90deg); }
  .scene-measurement__hub { min-height:4.7rem; }
  .scene-measurement__outputs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene-measurement__loop { grid-column:1;flex-wrap:wrap; }
  .scene-ecommerce__routes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scene-trust { grid-template-columns:1fr 1fr;align-content:center; }
  .scene-trust__core { grid-column:1/-1;grid-row:1;min-height:6.5rem; }
  .scene-trust__note { grid-column:1/-1; }
  .scene-timeline__steps { grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;padding:0; }
  .scene-timeline__steps::before,.scene-timeline__progress { display:none; }
  .scene-timeline__steps li { min-height:3rem;padding:.55rem;border:1px solid color-mix(in srgb,var(--stage-ink) 24%,transparent); }
  .scene-timeline__steps li::before { left:auto;right:.55rem;top:.55rem;width:.55rem;height:.55rem; }
  .scene-timeline__steps li:nth-child(5) { grid-column:1/-1; }
  .scene-timeline__dependency { flex-wrap:wrap;text-align:center; }
  .scene-service-map__net { height:14rem; }
  .scene-service-map__center { width:5.7rem;height:4.2rem; }
  .scene-service-map__node { padding:.38rem .42rem;font-size:.43rem;letter-spacing:.045em; }
  .scene-process__steps { grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.4rem; }
  .scene-process__steps::before { display:none; }
  .scene-firewall__head { flex-direction:column;align-items:flex-start; }
  .scene-contact__envelope { width:min(100%,9rem); }
  /* Stacked, the wire runs between the two boxes instead of across — the break
     still sits in the middle of it, which is the whole reading. */
  .scene-offline__link { grid-template-columns:minmax(0,1fr);gap:.9rem; }
}
@media (max-width:640px) {
  .answer-stage__stamp { display:none; }
}

/* Every static frame below is the finished state, not a blank one. */
@media (prefers-reduced-motion: reduce) {
  .scene-firewall__scan { display:none; }
  .scene-pricing__quote strong,
  .scene-measurement__pulse,
  .scene-measurement__outputs span,
  .scene-ecommerce__routes > div::after,
  .scene-trust__lock,
  .scene-timeline__steps li::before,
  .scene-timeline__progress,
  .scene-service-map__center::after,
  .scene-service-map__node,
  .scene-contact__arrow,
  .scene-gap__hole,
  .scene-kb__tile.is-cited { animation:none; }
  .scene-contact__arrow { opacity:1; }
  .scene-process__rail { animation:none;transform:none; }
  /* Nothing is lost by stopping these: the wire is drawn broken, the beat and
     all three dots rest at full opacity, so the still frame says the same
     thing the moving one does. */
  .scene-offline__seg--from,
  .scene-offline__node.is-live .scene-offline__beat,
  .scene-offline__dots i { animation:none; }
}
/* ---- Web care: the site is already live, so this is an operations panel ---- */
.answer-stage[data-scene="web-maintenance"] {
  --stage-bg:#c7d2ee;
  --stage-accent:#1c315f;
  --stage-accent-text:#1c315f;
}
.scene-maintenance {
  display:grid;
  grid-template-columns:minmax(10rem,.82fr) minmax(15rem,1.18fr);
  gap:clamp(1rem,2.6vw,2rem);
  align-items:stretch;
  padding:clamp(1rem,3vw,2.2rem);
}
.scene-maintenance__monitor {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--stage-ink);
  background:color-mix(in srgb,var(--stage-bg) 65%,#fff);
  box-shadow:.55rem .55rem 0 color-mix(in srgb,var(--stage-accent) 20%,transparent);
}
.scene-maintenance__chrome {
  display:flex;
  align-items:center;
  gap:.28rem;
  min-height:1.7rem;
  padding:0 .55rem;
  border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 28%,transparent);
}
.scene-maintenance__chrome i { width:.34rem;height:.34rem;border-radius:50%;background:color-mix(in srgb,var(--stage-ink) 48%,transparent); }
.scene-maintenance__chrome span { margin-left:.35rem;color:var(--stage-ink);font:500 .44rem/1 var(--font-mono);letter-spacing:.08em; }
.scene-maintenance__screen {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:8rem;
  padding:1rem;
}
.scene-maintenance__screen small { color:var(--stage-ink);font:500 .5rem/1 var(--font-mono);letter-spacing:.12em; }
.scene-maintenance__screen strong { margin:.65rem 0;color:var(--stage-accent-text);font:700 clamp(1.8rem,4vw,3rem)/.85 var(--show-sans);letter-spacing:-.06em; }
.scene-maintenance__pulse { position:relative;width:min(82%,10rem);height:1.2rem; }
.scene-maintenance__pulse i {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:color-mix(in srgb,var(--stage-ink) 28%,transparent);
}
.scene-maintenance__pulse span {
  position:absolute;
  left:calc(100% - .55rem);
  top:calc(50% - .28rem);
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:var(--stage-accent);
  box-shadow:0 0 0 .22rem color-mix(in srgb,var(--stage-accent) 15%,transparent);
  animation:maintenance-ping 2.8s cubic-bezier(.55,0,.2,1) infinite;
}
.scene-maintenance__monitor em {
  padding:.5rem .6rem;
  border-top:1px solid color-mix(in srgb,var(--stage-ink) 28%,transparent);
  color:var(--stage-ink);
  font:normal 600 .48rem/1 var(--font-mono);
  letter-spacing:.12em;
  text-align:center;
}
.scene-maintenance__care { display:flex;flex-direction:column;min-width:0; }
.scene-maintenance__head {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 0;
  border-block:1px solid var(--stage-ink);
}
.scene-maintenance__head small,
.scene-maintenance__head b { color:var(--stage-ink);font:600 .52rem/1 var(--font-mono);letter-spacing:.11em; }
.scene-maintenance__head b { color:var(--stage-accent-text); }
.scene-maintenance__rows { display:flex;flex:1;flex-direction:column;justify-content:center;margin:0;padding:0;list-style:none; }
.scene-maintenance__rows li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem .15rem;
  border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 24%,transparent);
}
.scene-maintenance__rows span { color:var(--stage-ink);font:600 clamp(.6rem,1.1vw,.78rem)/1.1 var(--show-sans);letter-spacing:.03em; }
.scene-maintenance__rows b { color:var(--stage-accent-text);font:700 .9rem/1 var(--show-sans); }
.scene-maintenance__rail { display:grid;grid-template-columns:auto minmax(2rem,1fr) auto;gap:.7rem;align-items:center;padding-top:.75rem; }
.scene-maintenance__rail span,
.scene-maintenance__rail strong { color:var(--stage-ink);font:600 .48rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-maintenance__rail strong { color:var(--stage-accent-text); }
.scene-maintenance__rail i {
  position:relative;
  height:1px;
  background:var(--stage-accent);
}
.scene-maintenance__rail i::after {
  content:"";
  position:absolute;
  right:0;
  top:-.2rem;
  width:.4rem;
  height:.4rem;
  border-top:1px solid var(--stage-accent);
  border-right:1px solid var(--stage-accent);
  transform:rotate(45deg);
}
@keyframes maintenance-ping {
  0% { left:0;opacity:0; }
  14% { opacity:1; }
  72% { left:calc(100% - .55rem);opacity:1; }
  100% { left:calc(100% - .55rem);opacity:.35; }
}

/* ---- Existing-site hand-off: preserve, inspect, then plan the change ---- */
.answer-stage[data-scene="web-takeover"] {
  --stage-bg:#d8d1c5;
  --stage-accent:#7a2b18;
  --stage-accent-text:#6b2515;
}
.scene-takeover {
  display:grid;
  grid-template-columns:minmax(9rem,1fr) minmax(4rem,.35fr) minmax(10rem,1fr);
  gap:clamp(.7rem,2vw,1.5rem);
  align-items:center;
  padding:clamp(1rem,3vw,2.2rem);
}
.scene-takeover__existing,
.scene-takeover__plan {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:12rem;
  padding:clamp(.75rem,1.8vw,1rem);
  border:1px solid var(--stage-ink);
  background:color-mix(in srgb,var(--stage-bg) 66%,#fff);
}
.scene-takeover__existing { transform:rotate(-1deg);box-shadow:-.45rem .45rem 0 color-mix(in srgb,var(--stage-ink) 8%,transparent); }
.scene-takeover__existing > small,
.scene-takeover__plan-head small { color:var(--stage-accent-text);font:600 .48rem/1 var(--font-mono);letter-spacing:.11em; }
.scene-takeover__existing > strong { margin:.55rem 0;font:600 clamp(.7rem,1.3vw,.92rem)/1.1 var(--show-sans); }
.scene-takeover__page {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  grid-template-rows:.25rem 1fr .6rem;
  gap:.35rem;
  flex:1;
  min-height:5.2rem;
  margin:.4rem 0 .7rem;
  padding:.55rem;
  border:1px solid color-mix(in srgb,var(--stage-ink) 42%,transparent);
  background:color-mix(in srgb,var(--stage-bg) 58%,#fff);
}
.scene-takeover__page i:first-child { grid-column:1/-1;width:46%;background:var(--stage-ink);opacity:.45; }
.scene-takeover__page i:nth-child(2) { background:var(--stage-ink);opacity:.16; }
.scene-takeover__page i:nth-child(3) { border:1px dashed var(--stage-accent-text);background:transparent; }
.scene-takeover__page span { grid-column:1/-1;width:72%;background:var(--stage-ink);opacity:.22; }
.scene-takeover__existing em {
  color:var(--stage-ink);
  font:normal 500 .45rem/1 var(--font-mono);
  letter-spacing:.1em;
}
.scene-takeover__handoff { display:flex;flex-direction:column;align-items:center;gap:.55rem;min-width:0;text-align:center; }
.scene-takeover__handoff > span { color:var(--stage-accent-text);font:300 clamp(1.5rem,3vw,2.4rem)/1 var(--show-sans); }
.scene-takeover__lens {
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
  width:clamp(3.2rem,6vw,4rem);
  aspect-ratio:1;
  border:1px solid var(--stage-accent);
  border-radius:50%;
  background:color-mix(in srgb,var(--stage-bg) 55%,#fff);
}
.scene-takeover__lens::after {
  content:"";
  position:absolute;
  right:-.8rem;
  bottom:-.3rem;
  width:1.2rem;
  height:1px;
  background:var(--stage-accent);
  transform:rotate(48deg);
  transform-origin:left center;
}
.scene-takeover__lens i {
  position:absolute;
  left:10%;
  right:10%;
  top:50%;
  height:1px;
  background:var(--stage-accent);
  opacity:.65;
  animation:takeover-scan 2.6s ease-in-out infinite;
}
.scene-takeover__lens b { color:var(--stage-ink);font:600 .43rem/1 var(--font-mono);letter-spacing:.05em; }
.scene-takeover__handoff small { color:var(--stage-ink);font:600 .45rem/1.2 var(--font-mono);letter-spacing:.11em; }
.scene-takeover__plan { transform:rotate(.65deg);box-shadow:.45rem .45rem 0 color-mix(in srgb,var(--stage-accent) 16%,transparent); }
.scene-takeover__plan-head { display:flex;justify-content:space-between;gap:1rem;padding-bottom:.65rem;border-bottom:1px solid var(--stage-ink); }
.scene-takeover__plan-head b { color:var(--stage-accent-text);font:700 .85rem/1 var(--show-sans); }
.scene-takeover__checks { display:flex;flex:1;flex-direction:column;justify-content:center;margin:0;padding:0;list-style:none; }
.scene-takeover__checks li { display:grid;grid-template-columns:2rem 1fr;gap:.45rem;padding:.55rem 0;border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 20%,transparent); }
.scene-takeover__checks span { color:var(--stage-accent-text);font:500 .48rem/1 var(--font-mono); }
.scene-takeover__checks strong { font:600 clamp(.56rem,1vw,.72rem)/1 var(--show-sans); }
.scene-takeover__actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;margin-top:.7rem; }
.scene-takeover__actions span {
  padding:.4rem;
  border:1px solid color-mix(in srgb,var(--stage-ink) 36%,transparent);
  color:var(--stage-ink);
  font:600 .44rem/1 var(--font-mono);
  letter-spacing:.08em;
  text-align:center;
}
@keyframes takeover-scan {
  0%,100% { top:25%;opacity:.2; }
  50% { top:72%;opacity:.9; }
}

/* ---- Platform choice: the brief splits into two explicit implementation paths ---- */
.answer-stage[data-scene="platform-stack"] {
  --stage-bg:#bac7ff;
  --stage-accent:#1b2140;
  --stage-accent-text:#1b2140;
}
.scene-platform {
  display:grid;
  grid-template-columns:minmax(8rem,.7fr) minmax(3.5rem,.3fr) minmax(15rem,1.2fr);
  gap:clamp(.7rem,2vw,1.4rem);
  align-items:center;
  padding:clamp(1rem,3vw,2.2rem);
}
.scene-platform__brief { display:flex;flex-direction:column;min-width:0;border-block:1px solid var(--stage-ink); }
.scene-platform__brief > small { padding:.65rem 0;color:var(--stage-accent-text);font:600 .48rem/1 var(--font-mono);letter-spacing:.11em; }
.scene-platform__brief > span { display:flex;align-items:center;gap:.6rem;padding:.62rem 0;border-top:1px solid color-mix(in srgb,var(--stage-ink) 22%,transparent); }
.scene-platform__brief span i { flex:0 0 auto;width:2.8rem;height:.35rem;background:var(--stage-accent);opacity:.9; }
.scene-platform__brief span:nth-child(3) i { width:2.1rem;opacity:.66; }
.scene-platform__brief span:nth-child(4) i { width:2.45rem;opacity:.78; }
.scene-platform__brief span b { color:var(--stage-ink);font:600 .5rem/1 var(--font-mono);letter-spacing:.06em; }
.scene-platform__decision { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-width:0; }
.scene-platform__decision strong { color:var(--stage-accent-text);font:700 .48rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-platform__stem { display:block;width:100%;height:1px;background:var(--stage-accent);transform:scaleX(1);transform-origin:left center;animation:platform-line .7s ease-out both; }
.scene-platform__fork { position:relative;display:block;width:100%;height:2.4rem; }
.scene-platform__fork::before,
.scene-platform__fork::after {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:1px;
  background:var(--stage-accent);
  transform-origin:left center;
  animation:platform-fork .65s .35s ease-out both;
}
.scene-platform__fork::before { transform:rotate(-18deg) scaleX(1); }
.scene-platform__fork::after { transform:rotate(18deg) scaleX(1); }
.scene-platform__options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;min-width:0; }
.scene-platform__options > div {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:8.8rem;
  padding:.8rem;
  border:1px solid var(--stage-ink);
  background:color-mix(in srgb,var(--stage-bg) 63%,#fff);
  box-shadow:.35rem .35rem 0 color-mix(in srgb,var(--stage-accent) 14%,transparent);
}
.scene-platform__options small { color:var(--stage-accent-text);font:600 .44rem/1.1 var(--font-mono);letter-spacing:.08em; }
.scene-platform__options strong { overflow-wrap:anywhere;margin:auto 0 .7rem;color:var(--stage-ink);font:700 clamp(.68rem,1.3vw,.9rem)/1.05 var(--show-sans); }
.scene-platform__options span { color:var(--stage-ink);font:500 .44rem/1.3 var(--font-mono); }
.scene-platform__options em {
  grid-column:1/-1;
  padding-top:.55rem;
  border-top:1px solid var(--stage-ink);
  color:var(--stage-ink);
  font:normal 600 .48rem/1 var(--font-mono);
  letter-spacing:.1em;
  text-align:right;
}
@keyframes platform-line {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}
@keyframes platform-fork {
  from { opacity:0; }
  to { opacity:1; }
}

/* The new operational rows use the established stagger rather than inventing
   a second entrance language. */
.answer-stage.is-updated .scene-maintenance__rows li,
.answer-stage.is-updated .scene-takeover__checks li,
.answer-stage.is-updated .scene-platform__options > div { animation:scene-item 620ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-maintenance__rows li:nth-child(2),
.answer-stage.is-updated .scene-takeover__checks li:nth-child(2),
.answer-stage.is-updated .scene-platform__options > div:nth-child(2) { animation-delay:110ms; }
.answer-stage.is-updated .scene-maintenance__rows li:nth-child(3),
.answer-stage.is-updated .scene-takeover__checks li:nth-child(3) { animation-delay:220ms; }

@container stage (max-width:34rem) {
  .scene-maintenance,
  .scene-takeover,
  .scene-platform { padding:1rem; }
  .scene-maintenance { grid-template-columns:minmax(0,1fr); }
  .scene-maintenance__screen { min-height:6.8rem; }
  .scene-takeover { grid-template-columns:minmax(0,1fr); }
  .scene-takeover__existing,
  .scene-takeover__plan { min-height:9.5rem;transform:none; }
  .scene-takeover__handoff { display:grid;grid-template-columns:auto auto auto;justify-content:center; }
  .scene-takeover__handoff > span { transform:rotate(90deg); }
  .scene-takeover__lens { width:3.2rem; }
  .scene-platform { grid-template-columns:minmax(0,1fr); }
  .scene-platform__decision { display:grid;grid-template-columns:1fr auto 1fr; }
  .scene-platform__fork { height:1.4rem;transform:rotate(90deg); }
}

/* Reduced motion leaves a complete still frame. */
@media (prefers-reduced-motion:reduce) {
  .scene-maintenance__pulse span,
  .scene-takeover__lens i,
  .scene-platform__stem,
  .scene-platform__fork::before,
  .scene-platform__fork::after { animation:none; }
}
/* ===========================================================================
   Answer-scene redesign 2026-08
   One visual mechanism per scene. Decorative scenes remain aria-hidden in the
   template; motion is limited to transforms/opacity and has a complete static
   end frame for reduced-motion visitors.
   ========================================================================== */

/* --- Profile: three disciplines converge into one profile ---------------- */
.scene-profile-map {
  display:grid;
  grid-template-columns:minmax(9rem,1.1fr) minmax(7.5rem,.72fr) minmax(10rem,.88fr);
  gap:clamp(.7rem,2vw,1.35rem);
  align-items:center;
  padding:clamp(1rem,2.7vw,2rem);
}
.scene-profile-map__lanes { display:flex;flex-direction:column;gap:1rem; }
.scene-profile-map__lane { position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.65rem;min-width:0; }
.scene-profile-map__lane span { color:var(--stage-ink);font:650 .5rem/1 var(--font-mono);letter-spacing:.08em; }
.scene-profile-map__lane > i { display:block;height:1px;background:color-mix(in srgb,var(--stage-ink) 46%,transparent); }
.scene-profile-map__lane > b { position:absolute;right:-.1rem;top:50%;width:.62rem;height:.62rem;background:var(--stage-accent);transform:translateY(-50%); }
.scene-profile-map__core { display:flex;min-height:8.6rem;flex-direction:column;justify-content:center;padding:1rem;border:1px solid var(--stage-ink);background:color-mix(in srgb,var(--stage-bg) 58%,#fff); }
.scene-profile-map__core small { color:var(--stage-accent-text);font:600 .45rem/1 var(--font-mono);letter-spacing:.12em; }
.scene-profile-map__core strong { margin:auto 0 .55rem;font:700 clamp(1.1rem,2.2vw,1.65rem)/.9 var(--show-sans);letter-spacing:-.04em; }
.scene-profile-map__core span { font:600 .46rem/1.25 var(--font-mono);letter-spacing:.04em; }
.scene-profile-map__stats { display:grid;grid-template-columns:1.15fr .85fr;min-width:0;border:1px solid var(--stage-ink); }
.scene-profile-map__stats > div { display:flex;flex-direction:column;min-width:0;padding:.85rem .7rem;border-right:1px solid var(--stage-ink); }
.scene-profile-map__stats > div:nth-child(2) { border-right:0; }
.scene-profile-map__stats strong { font:700 clamp(1.45rem,2.6vw,2.25rem)/.85 var(--show-sans);letter-spacing:-.06em; }
.scene-profile-map__stats span { margin-top:.65rem;font:550 .42rem/1 var(--font-mono); }
.scene-profile-map__stats > small { grid-column:1/-1;padding:.62rem;border-top:1px solid var(--stage-ink);font:550 .43rem/1 var(--font-mono);text-align:center; }
.answer-stage.is-updated .scene-profile-map__lane > b { animation:profile-converge 720ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 110ms); }
@keyframes profile-converge { from { opacity:.2;transform:translate(-2.4rem,-50%); } to { opacity:1;transform:translate(0,-50%); } }

/* --- Web build: the page assembles inside one browser --------------------- */
.scene-web { display:grid;grid-template-columns:1fr;gap:0;place-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-web__browser { position:relative;overflow:hidden;width:min(100%,34rem);aspect-ratio:1.8/1;border:1px solid var(--stage-ink);background:#f2efe8;box-shadow:.65rem .65rem 0 color-mix(in srgb,var(--stage-accent) 20%,transparent); }
.scene-web__chrome { display:flex;align-items:center;gap:.25rem;height:1.7rem;padding:0 .55rem;border-bottom:1px solid rgba(17,17,15,.25);background:#d8d5cf; }
.scene-web__chrome i { width:.34rem;height:.34rem;border-radius:50%;background:#777; }
.scene-web__chrome span { margin-left:.35rem;color:#111;font:400 .45rem/1 var(--font-mono); }
.scene-web__page { position:absolute;inset:1.7rem 0 0;display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:.38rem minmax(4rem,1.15fr) .28rem minmax(2.4rem,.65fr);gap:.55rem;padding:clamp(.65rem,1.8vw,1.05rem);background:#101010; }
.scene-web__block { min-width:0;background:#efede7; }
.scene-web__block.is-nav { grid-column:1/-1;width:42%;height:.22rem;align-self:center; }
.scene-web__block.is-hero { grid-column:1/-1;display:grid;grid-template-columns:1.25fr .75fr;gap:.55rem;background:transparent; }
.scene-web__block.is-hero i { display:block;height:auto;border:0;background:#efede7; }
.scene-web__block.is-hero i:last-child { background:var(--show-red,#f05234); }
.scene-web__block.is-copy { grid-column:1/-1;width:64%;height:.24rem;background:rgba(239,237,231,.42); }
.scene-web__block.is-cards { grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;background:transparent; }
.scene-web__block.is-cards i { height:auto;border:1px solid rgba(239,237,231,.35);background:rgba(239,237,231,.04); }
.scene-web__browser em { position:absolute;z-index:3;right:.45rem;top:.42rem;padding:.24rem .38rem;background:#d9ff43;color:#111;font:normal 700 .43rem/1 var(--font-mono);letter-spacing:.08em; }
.answer-stage.is-updated .scene-web__block { animation:web-piece 620ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 115ms); }
.answer-stage.is-updated .scene-web__browser em { animation:web-live 420ms ease-out 620ms both; }
@keyframes web-piece { from { opacity:0;transform:translateY(.7rem); } to { opacity:1;transform:none; } }
@keyframes web-live { from { opacity:0;transform:translateX(.5rem); } to { opacity:1;transform:none; } }

/* --- Platform: brief selects between WordPress and custom code ------------ */
.scene-platform { display:grid;grid-template-columns:minmax(8rem,.8fr) minmax(4rem,.36fr) minmax(14rem,1.35fr);gap:clamp(.7rem,2vw,1.25rem);align-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-platform__criteria { display:flex;flex-direction:column;min-width:0;border-block:1px solid var(--stage-ink); }
.scene-platform__criteria > small { padding:.58rem 0;color:var(--stage-accent-text);font:650 .46rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-platform__criteria > span { display:grid;grid-template-columns:2.4rem 1fr;align-items:center;gap:.55rem;padding:.58rem 0;border-top:1px solid color-mix(in srgb,var(--stage-ink) 22%,transparent); }
.scene-platform__criteria span i { height:.34rem;background:var(--stage-accent);opacity:.66; }
.scene-platform__criteria span:nth-child(3) i { opacity:.78; }
.scene-platform__criteria span:nth-child(4) i { opacity:.9; }
.scene-platform__criteria span b { font:600 .46rem/1 var(--font-mono);letter-spacing:.06em; }
.scene-platform__selector { position:relative;display:grid;place-items:center;min-height:5.2rem; }
.scene-platform__track { position:absolute;left:0;right:0;top:50%;height:1px;background:var(--stage-accent); }
.scene-platform__cursor { z-index:1;width:.75rem;height:.75rem;border:1px solid var(--stage-accent);background:var(--stage-bg); }
.scene-platform__selector small { position:absolute;top:calc(50% + .85rem);color:var(--stage-accent-text);font:700 .42rem/1 var(--font-mono);letter-spacing:.12em; }
.scene-platform__options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;min-width:0; }
.scene-platform__options > div { display:flex;min-height:9rem;flex-direction:column;padding:.82rem;border:1px solid color-mix(in srgb,var(--stage-ink) 34%,transparent);background:color-mix(in srgb,var(--stage-bg) 62%,#fff); }
.scene-platform__options > div.is-wordpress { border-color:var(--stage-accent); }
.scene-platform__options small { color:var(--stage-accent-text);font:650 .43rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-platform__options strong { margin:auto 0 .55rem;font:750 clamp(.78rem,1.45vw,1.05rem)/.95 var(--show-sans);letter-spacing:-.025em; }
.scene-platform__options span { font:550 .43rem/1.25 var(--font-mono); }
.answer-stage.is-updated .scene-platform__cursor { animation:platform-select 900ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-platform__options > div { animation:scene-item 620ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-platform__options > div:nth-child(2) { animation-delay:120ms; }
@keyframes platform-select { 0% { transform:translateX(-1.05rem); } 55% { transform:translateX(1.05rem); } 100% { transform:none; } }

/* --- SEO: one organic result climbs to the top of the SERP --------------- */
.scene-seo { position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:0;place-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-seo__search { width:min(100%,33rem);padding:.8rem;border:1px solid var(--stage-ink);background:color-mix(in srgb,var(--stage-bg) 45%,#fff); }
.scene-seo__search > small { display:block;margin-bottom:.55rem;color:var(--stage-accent-text);font:650 .45rem/1 var(--font-mono);letter-spacing:.11em; }
.scene-seo__query { display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;border:1px solid color-mix(in srgb,var(--stage-ink) 28%,transparent);background:#fff; }
.scene-seo__query i { width:.58rem;height:.58rem;border:1px solid #555;border-radius:50%; }
.scene-seo__query span { color:#333;font:500 .5rem/1 var(--font-mono); }
.scene-seo__results { position:relative;height:11.8rem;margin-top:.7rem;overflow:hidden; }
.scene-seo__result { position:absolute;left:0;right:0;height:2.45rem;padding:.52rem .65rem;border:1px solid color-mix(in srgb,var(--stage-ink) 22%,transparent);background:color-mix(in srgb,var(--stage-bg) 35%,#fff); }
.scene-seo__result.is-site { top:0;z-index:2;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:.12rem .6rem;border-color:var(--stage-accent);background:#fff; }
.scene-seo__result.is-site b { grid-row:1/-1;display:grid;place-items:center;width:2.05rem;height:100%;background:var(--stage-accent);color:var(--stage-bg);font:750 .48rem/1 var(--font-mono); }
.scene-seo__result.is-site strong { color:#111;font:650 .64rem/1 var(--show-sans); }
.scene-seo__result.is-site span { color:#555;font:500 .42rem/1 var(--font-mono);letter-spacing:.06em; }
.scene-seo__result.is-placeholder { display:flex;flex-direction:column;justify-content:center;gap:.42rem; }
.scene-seo__result.is-placeholder.is-1 { top:3rem; }
.scene-seo__result.is-placeholder.is-2 { top:6rem; }
.scene-seo__result.is-placeholder.is-3 { top:9rem; }
.scene-seo__result.is-placeholder i { display:block;height:.24rem;background:color-mix(in srgb,var(--stage-ink) 18%,transparent); }
.scene-seo__result.is-placeholder i:first-child { width:48%; }
.scene-seo__result.is-placeholder i:last-child { width:72%; }
.scene-seo__rise { position:absolute;right:clamp(.8rem,4vw,2.5rem);bottom:1.2rem;color:var(--stage-accent-text);font:normal 700 clamp(2.2rem,4vw,3.7rem)/1 var(--show-sans); }
.answer-stage.is-updated .scene-seo__result.is-site { animation:seo-climb 1.45s cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-seo__rise { animation:seo-arrow 620ms ease-out 780ms both; }
@keyframes seo-climb { from { opacity:.78;transform:translateY(9rem); } to { opacity:1;transform:none; } }
@keyframes seo-arrow { from { opacity:0;transform:translateY(.7rem); } to { opacity:1;transform:none; } }

/* --- AI work: one token, one task, controlled output ---------------------- */
.scene-ai-work { display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:0;place-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-ai-work__flow { position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.65rem,2vw,1rem);width:min(100%,31rem);align-items:stretch; }
.scene-ai-work__rail { position:absolute;z-index:0;left:16.666%;right:16.666%;top:50%;height:1px;background:color-mix(in srgb,var(--stage-ink) 38%,transparent); }
.scene-ai-work__node { position:relative;z-index:1;display:flex;min-height:8.7rem;flex-direction:column;padding:.8rem;border:1px solid color-mix(in srgb,var(--stage-ink) 34%,transparent);background:color-mix(in srgb,var(--stage-bg) 64%,#fff); }
.scene-ai-work__node small { color:var(--stage-accent-text);font:650 .45rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-ai-work__node.is-model { justify-content:space-between;border-color:var(--stage-accent); }
.scene-ai-work__node.is-model strong { margin:auto;text-align:center;font:750 1.8rem/1 var(--show-sans); }
.scene-ai-work__node.is-review b { margin:auto 0 0;text-align:right;color:var(--stage-accent);font:750 2rem/1 var(--show-sans); }
.scene-ai-work__tags { display:flex;flex-direction:column;gap:.32rem;margin-top:auto; }
.scene-ai-work__tags span { padding:.35rem;border-top:1px solid color-mix(in srgb,var(--stage-ink) 20%,transparent);font:600 .43rem/1 var(--font-mono); }
.scene-ai-work__token { position:absolute;z-index:3;left:0;top:calc(50% - .34rem);width:33.333%;height:.68rem;transform:translateX(200%);pointer-events:none; }
.scene-ai-work__token::after { content:"";display:block;width:.68rem;height:.68rem;margin:auto;background:var(--stage-accent); }
.answer-stage.is-updated .scene-ai-work__token { animation:ai-token 1.45s cubic-bezier(.22,1,.36,1) both; }
@keyframes ai-token { 0% { transform:none; } 45% { transform:translateX(100%); } 58% { transform:translateX(100%); } 100% { transform:translateX(200%); } }

/* --- Grounded AI: selected knowledge tiles feed the answer --------------- */
.scene-ai-grounded { position:relative;display:grid;grid-template-columns:minmax(8rem,1.1fr) minmax(5.5rem,.62fr) minmax(8rem,1fr);gap:clamp(.7rem,2vw,1.2rem);align-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-ai-grounded::before { content:"";position:absolute;left:18%;right:18%;top:50%;height:1px;background:color-mix(in srgb,var(--stage-ink) 30%,transparent); }
.scene-ai-grounded__base,.scene-ai-grounded__model,.scene-ai-grounded__answer { position:relative;z-index:1;padding:.8rem;border:1px solid color-mix(in srgb,var(--stage-ink) 34%,transparent);background:color-mix(in srgb,var(--stage-bg) 64%,#fff); }
.scene-ai-grounded__base small,.scene-ai-grounded__model small,.scene-ai-grounded__answer small { color:var(--stage-accent-text);font:650 .44rem/1 var(--font-mono);letter-spacing:.09em; }
.scene-ai-grounded__field { display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-top:.8rem; }
.scene-ai-grounded__field i { aspect-ratio:1;border:1px solid color-mix(in srgb,var(--stage-ink) 28%,transparent);background:transparent; }
.scene-ai-grounded__field i.is-used { border-color:var(--stage-accent);background:var(--stage-accent); }
.scene-ai-grounded__model { display:flex;min-height:7.5rem;flex-direction:column;align-items:center;justify-content:center;border-color:var(--stage-accent); }
.scene-ai-grounded__model strong { margin-top:.55rem;font:750 1.7rem/1 var(--show-sans); }
.scene-ai-grounded__pulse { position:absolute;left:-2.7rem;top:50%;width:.55rem;height:.55rem;background:var(--stage-accent);transform:translate(5.1rem,-50%); }
.scene-ai-grounded__answer { display:flex;min-height:7.5rem;flex-direction:column; }
.scene-ai-grounded__answer > strong { align-self:flex-end;color:var(--stage-accent);font:750 1.55rem/1 var(--show-sans); }
.scene-ai-grounded__answer > div { display:flex;flex-direction:column;gap:.38rem;margin:auto 0 .5rem; }
.scene-ai-grounded__answer > div i { height:.25rem;background:color-mix(in srgb,var(--stage-ink) 26%,transparent); }
.scene-ai-grounded__answer > div i:nth-child(2) { width:74%; }
.scene-ai-grounded__answer > div i:nth-child(3) { width:86%; }
.scene-ai-grounded__cites { display:flex;gap:.3rem; }
.scene-ai-grounded__cites b { display:grid;place-items:center;width:1.05rem;height:1.05rem;border:1px solid var(--stage-accent);color:var(--stage-accent-text);font:650 .4rem/1 var(--font-mono); }
.answer-stage.is-updated .scene-ai-grounded__field i.is-used { animation:ground-tile 520ms ease-out both; }
.answer-stage.is-updated .scene-ai-grounded__field i.is-used:nth-child(7) { animation-delay:120ms; }
.answer-stage.is-updated .scene-ai-grounded__field i.is-used:nth-child(10) { animation-delay:240ms; }
.answer-stage.is-updated .scene-ai-grounded__pulse { animation:ground-pulse 820ms cubic-bezier(.22,1,.36,1) 260ms both; }
@keyframes ground-tile { from { opacity:.25;transform:scale(.72); } to { opacity:1;transform:none; } }
@keyframes ground-pulse { from { opacity:0;transform:translate(0,-50%); } to { opacity:1;transform:translate(5.1rem,-50%); } }

/* --- Blog: Markdown renders into a page ----------------------------------- */
.scene-blog { display:grid;grid-template-columns:minmax(5.4rem,.55fr) minmax(2.8rem,.24fr) minmax(12rem,1.35fr);gap:clamp(.7rem,2vw,1.15rem);align-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-blog__file { display:flex;min-height:9.5rem;flex-direction:column;padding:.8rem;border:1px solid var(--stage-ink);background:#fff;box-shadow:.45rem .45rem 0 color-mix(in srgb,var(--stage-accent) 20%,transparent); }
.scene-blog__file strong { font:750 1.65rem/1 var(--show-sans); }
.scene-blog__source { display:grid;grid-template-columns:auto 1fr;gap:.42rem;margin-top:auto;align-items:center; }
.scene-blog__source b { grid-row:1/4;color:var(--stage-accent);font:750 1.2rem/1 var(--font-mono); }
.scene-blog__source i { height:.24rem;background:#bbb; }
.scene-blog__source i:nth-of-type(2) { width:78%; }
.scene-blog__source i:nth-of-type(3) { width:58%; }
.scene-blog__render { display:flex;min-height:7rem;flex-direction:column;align-items:center;justify-content:center;gap:.55rem; }
.scene-blog__render i { width:1px;height:4rem;background:var(--stage-accent); }
.scene-blog__render small { color:var(--stage-accent-text);font:700 .42rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-blog__browser { overflow:hidden;min-height:10rem;border:1px solid var(--stage-ink);background:#f4f1ea; }
.scene-blog__chrome { display:flex;gap:.25rem;height:1.5rem;align-items:center;padding:0 .5rem;border-bottom:1px solid rgba(17,17,15,.24);background:#d9d5cd; }
.scene-blog__chrome i { width:.32rem;height:.32rem;border-radius:50%;background:#777; }
.scene-blog__article { display:grid;grid-template-columns:1fr .55fr;grid-template-rows:auto 2rem .25rem .25rem;gap:.55rem;padding:.75rem; }
.scene-blog__article small { grid-column:1/-1;color:var(--stage-accent-text);font:650 .42rem/1 var(--font-mono);letter-spacing:.09em; }
.scene-blog__article strong { align-self:stretch;background:#171714; }
.scene-blog__article > i { grid-column:1;width:86%;height:.25rem;background:#aaa; }
.scene-blog__article > span { grid-column:2;grid-row:2/5;display:grid;place-items:center;border:1px solid #aaa; }
.scene-blog__article > span i { width:40%;aspect-ratio:1;border:1px solid #999; }
.answer-stage.is-updated .scene-blog__render i { animation:blog-render-line 620ms ease-out both; }
.answer-stage.is-updated .scene-blog__article { animation:blog-page 620ms cubic-bezier(.22,1,.36,1) 260ms both; }
@keyframes blog-render-line { from { transform:scaleY(0); } to { transform:none; } }
@keyframes blog-page { from { opacity:0;transform:translateX(-.7rem); } to { opacity:1;transform:none; } }

/* --- Pricing: a quote/agreement plus money, without inventing a price ----- */
.scene-pricing { display:grid;grid-template-columns:minmax(13rem,1.25fr) minmax(8rem,.75fr);gap:clamp(1rem,3vw,2rem);align-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-pricing__paper { min-width:0;padding:clamp(.85rem,2vw,1.15rem);border:1px solid var(--stage-ink);background:color-mix(in srgb,var(--stage-bg) 42%,#fff);box-shadow:.55rem .55rem 0 color-mix(in srgb,var(--stage-accent) 12%,transparent); }
.scene-pricing__head { display:flex;align-items:center;justify-content:space-between;padding-bottom:.7rem;border-bottom:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent); }
.scene-pricing__head small,.scene-pricing__head b { font:650 .45rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-pricing__head small { color:var(--stage-accent-text); }
.scene-pricing__paper > strong { display:block;margin:1rem 0;font:750 clamp(1.8rem,4vw,3.3rem)/.88 var(--show-sans);letter-spacing:-.06em; }
.scene-pricing__scope { display:flex;flex-direction:column;gap:.45rem; }
.scene-pricing__scope span { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.7rem; }
.scene-pricing__scope b { font:600 .43rem/1 var(--font-mono);letter-spacing:.06em; }
.scene-pricing__scope i { height:1px;background:color-mix(in srgb,var(--stage-ink) 24%,transparent); }
.scene-pricing__sign { display:flex;align-items:flex-end;gap:.55rem;margin-top:1rem;padding-top:.7rem;border-top:1px solid color-mix(in srgb,var(--stage-ink) 22%,transparent); }
.scene-pricing__sign i { flex:1;height:.85rem;border-bottom:1px solid var(--stage-ink); }
.scene-pricing__sign small { color:var(--stage-accent-text);font:600 .4rem/1.15 var(--font-mono);letter-spacing:.08em; }
.scene-pricing__money { display:flex;min-height:10rem;flex-direction:column;align-items:center;justify-content:center;gap:.9rem; }
.scene-pricing__money > small { max-width:15ch;color:var(--stage-accent-text);text-align:center;font:650 .44rem/1.3 var(--font-mono);letter-spacing:.09em; }
.scene-pricing__coins { position:relative;width:7.2rem;height:4.8rem; }
.scene-pricing__coins span { position:absolute;bottom:0;display:grid;place-items:center;width:3.45rem;height:3.45rem;border:1px solid var(--stage-accent);border-radius:50%;background:color-mix(in srgb,var(--stage-bg) 55%,#fff); }
.scene-pricing__coins span:nth-child(1) { left:0; }
.scene-pricing__coins span:nth-child(2) { left:1.85rem;bottom:.65rem; }
.scene-pricing__coins span:nth-child(3) { right:0; }
.scene-pricing__coins b { color:var(--stage-accent-text);font:750 .5rem/1 var(--font-mono);letter-spacing:.05em; }
.scene-pricing__money em { padding:.32rem .55rem;background:var(--stage-accent);color:var(--stage-bg);font:normal 700 .44rem/1 var(--font-mono);letter-spacing:.1em; }
.answer-stage.is-updated .scene-pricing__coins span { animation:coin-in 560ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 110ms); }
.answer-stage.is-updated .scene-pricing__money em { animation:quote-stamp 420ms ease-out 470ms both; }
@keyframes coin-in { from { opacity:0;transform:translateY(1.25rem); } to { opacity:1;transform:none; } }
@keyframes quote-stamp { from { opacity:0;transform:scale(.86); } to { opacity:1;transform:none; } }

/* --- Measurement: local SVG brands, no runtime CDN ----------------------- */
.scene-measurement { display:grid;grid-template-columns:minmax(4.8rem,.55fr) minmax(2rem,.35fr) minmax(6.8rem,.7fr) minmax(2rem,.35fr) minmax(10.5rem,1.15fr);grid-template-rows:auto auto;gap:.65rem;align-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-measurement__events { display:flex;min-height:7rem;flex-direction:column;justify-content:center;gap:.75rem;padding:.7rem;border:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);background:color-mix(in srgb,var(--stage-bg) 62%,#fff); }
.scene-measurement__events > small { color:var(--stage-accent-text);font:650 .44rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-measurement__events > div { display:flex;gap:.45rem; }
.scene-measurement__events i { width:.55rem;height:.55rem;background:var(--stage-accent); }
.scene-measurement__wire { position:relative;height:1px;background:color-mix(in srgb,var(--stage-ink) 34%,transparent);transform-origin:left center; }
.scene-measurement__wire > i { position:absolute;right:-.25rem;top:-.25rem;width:.52rem;height:.52rem;background:var(--stage-accent); }
.scene-measurement__hub { display:flex;min-height:7rem;flex-direction:row;align-items:center;justify-content:center;gap:.55rem;padding:.65rem;border:1px solid var(--stage-accent);background:color-mix(in srgb,var(--stage-bg) 56%,#fff); }
.scene-measurement__logo { display:flex;min-width:0;align-items:center;justify-content:center;gap:.35rem; }
.scene-measurement__logo img { display:block;width:2.25rem;height:2.25rem;object-fit:contain; }
.scene-measurement__logo small { color:var(--stage-ink);font:650 .4rem/1 var(--font-mono);letter-spacing:.06em; }
.scene-measurement__cmp { display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid color-mix(in srgb,var(--stage-ink) 35%,transparent);font:700 .43rem/1 var(--font-mono); }
.scene-measurement__outputs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem; }
.scene-measurement__outputs .scene-measurement__logo { min-height:3.2rem;padding:.4rem;border:1px solid color-mix(in srgb,var(--stage-ink) 24%,transparent);background:color-mix(in srgb,var(--stage-bg) 55%,#fff);animation:none;animation-delay:0s; }
.scene-measurement__outputs .scene-measurement__logo::before { content:none;display:none; }
.scene-measurement__outputs .scene-measurement__logo img { width:1.8rem;height:1.8rem; }
.scene-measurement__outputs .is-tiktok img { width:3rem;height:1.15rem; }
.scene-measurement__loop { grid-column:3/6;display:flex;align-items:center;justify-content:center;gap:.5rem;padding-top:.35rem;color:var(--stage-accent-text); }
.scene-measurement__loop span,.scene-measurement__loop strong { font:700 .44rem/1 var(--font-mono);letter-spacing:.09em; }
.scene-measurement__loop i { font:normal 700 .9rem/1 var(--show-sans); }
.answer-stage.is-updated .scene-measurement__wire { animation:measure-wire 620ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-measurement__wire.is-out { animation-delay:300ms; }
.answer-stage.is-updated .scene-measurement__outputs .scene-measurement__logo { animation:scene-item 520ms cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-measurement__outputs .scene-measurement__logo:nth-child(1) { animation-delay:460ms; }
.answer-stage.is-updated .scene-measurement__outputs .scene-measurement__logo:nth-child(2) { animation-delay:540ms; }
.answer-stage.is-updated .scene-measurement__outputs .scene-measurement__logo:nth-child(3) { animation-delay:620ms; }
.answer-stage.is-updated .scene-measurement__outputs .scene-measurement__logo:nth-child(4) { animation-delay:700ms; }
@keyframes measure-wire { from { opacity:.25;transform:scaleX(0); } to { opacity:1;transform:none; } }

/* --- E-commerce: one checkout journey, then three integrations ----------- */
.scene-ecommerce { display:flex;flex-direction:column;justify-content:center;gap:1.25rem;padding:clamp(1rem,2.7vw,2rem); }
.scene-ecommerce__journey { position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:0;padding:0;border-top:0;list-style:none; }
.scene-ecommerce__rail { position:absolute;z-index:0;left:16.666%;right:16.666%;top:50%;height:1px;background:color-mix(in srgb,var(--stage-ink) 34%,transparent); }
.scene-ecommerce__journey li { position:relative;z-index:1;display:flex;min-height:7.4rem;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;padding:.7rem;border:1px solid color-mix(in srgb,var(--stage-ink) 32%,transparent);background:color-mix(in srgb,var(--stage-bg) 64%,#fff); }
.scene-ecommerce__journey li:first-child { padding:.7rem;border-left:1px solid color-mix(in srgb,var(--stage-ink) 32%,transparent); }
.scene-ecommerce__journey li::after { content:none;display:none; }
.scene-ecommerce__journey li.is-checkout { border-color:var(--stage-accent); }
.scene-ecommerce__journey li span { color:var(--stage-ink);font:650 .48rem/1 var(--font-mono);letter-spacing:.08em; }
.scene-ecommerce__journey li b { position:absolute;right:.5rem;top:.45rem;color:var(--stage-accent);font:750 1rem/1 var(--show-sans); }
.scene-ecommerce__icon { position:relative;display:block;width:2.6rem;height:2.2rem; }
.scene-ecommerce__journey .is-product .scene-ecommerce__icon { border:1px solid var(--stage-ink); }
.scene-ecommerce__journey .is-product .scene-ecommerce__icon::before { content:"";position:absolute;left:.5rem;right:.5rem;top:.52rem;height:1px;background:var(--stage-ink);box-shadow:0 .48rem 0 color-mix(in srgb,var(--stage-ink) 55%,transparent); }
.scene-ecommerce__journey .is-cart .scene-ecommerce__icon::before { content:"";position:absolute;left:.35rem;right:.2rem;top:.3rem;height:1.15rem;border:1px solid var(--stage-ink);border-top:0;transform:skewX(-10deg); }
.scene-ecommerce__journey .is-cart .scene-ecommerce__icon::after { content:"";position:absolute;left:.65rem;bottom:.15rem;width:.42rem;height:.42rem;border:1px solid var(--stage-ink);border-radius:50%;box-shadow:1.25rem 0 0 -1px var(--stage-bg),1.25rem 0 0 0 var(--stage-ink); }
.scene-ecommerce__journey .is-checkout .scene-ecommerce__icon { border:1px solid var(--stage-ink); }
.scene-ecommerce__journey .is-checkout .scene-ecommerce__icon::before { content:"";position:absolute;left:0;right:0;top:.5rem;height:.38rem;background:var(--stage-accent); }
.scene-ecommerce__marker { position:absolute;z-index:3;left:0;top:calc(50% - .32rem);width:33.333%;height:.64rem;transform:translateX(200%); }
.scene-ecommerce__marker::after { content:"";display:block;width:.64rem;height:.64rem;margin:auto;background:var(--stage-accent); }
.scene-ecommerce__routes { position:relative;align-self:flex-end;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:66.666%;padding-top:.85rem;border-top:1px solid color-mix(in srgb,var(--stage-ink) 34%,transparent); }
.scene-ecommerce__routes::before { content:"";position:absolute;right:16.666%;top:-.8rem;width:1px;height:.8rem;background:color-mix(in srgb,var(--stage-ink) 34%,transparent); }
.scene-ecommerce__routes span { display:grid;place-items:center;min-height:2.2rem;border:1px solid color-mix(in srgb,var(--stage-ink) 26%,transparent);font:700 .44rem/1 var(--font-mono);letter-spacing:.08em; }
.answer-stage.is-updated .scene-ecommerce__marker { animation:ecommerce-marker 1.45s cubic-bezier(.22,1,.36,1) both; }
@keyframes ecommerce-marker { 0% { transform:none; } 48% { transform:translateX(100%); } 62% { transform:translateX(100%); } 100% { transform:translateX(200%); } }

/* --- Trust: access is granted narrowly and then revoked ------------------ */
.scene-trust { display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:0;place-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-trust__flow { position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.65rem,2vw,1rem);width:min(100%,31rem);align-items:center; }
.scene-trust__rail { position:absolute;z-index:0;left:16.666%;right:16.666%;top:50%;height:1px;background:color-mix(in srgb,var(--stage-ink) 34%,transparent); }
.scene-trust__endpoint,.scene-trust__scope { position:relative;z-index:1;min-height:7.5rem;padding:.75rem;border:1px solid color-mix(in srgb,var(--stage-ink) 32%,transparent);background:color-mix(in srgb,var(--stage-bg) 64%,#fff); }
.scene-trust__endpoint { display:flex;flex-direction:column;justify-content:center; }
.scene-trust__endpoint small,.scene-trust__scope small { color:var(--stage-accent-text);font:650 .44rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-trust__endpoint strong { margin-top:.6rem;font:700 clamp(.65rem,1.2vw,.85rem)/1 var(--show-sans); }
.scene-trust__scope { display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:.42rem; }
.scene-trust__scope small { grid-column:1/-1;margin-bottom:.35rem; }
.scene-trust__scope > i { aspect-ratio:1;border:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent); }
.scene-trust__scope > i.is-on { border-color:var(--stage-accent);background:var(--stage-accent); }
.scene-trust__endpoint.is-end { border-style:dashed; }
.scene-trust__endpoint.is-end > i { position:absolute;left:50%;top:50%;width:3.6rem;height:1px;background:var(--stage-accent);transform:translate(-50%,-50%) rotate(-32deg); }
.scene-trust__token { position:absolute;z-index:3;left:0;top:calc(50% - .85rem);display:grid;place-items:center;width:33.333%;height:1.7rem;transform:translateX(200%);pointer-events:none; }
.scene-trust__token b { padding:.38rem .48rem;border:1px solid var(--stage-accent);background:var(--stage-bg);color:var(--stage-accent-text);font:700 .39rem/1 var(--font-mono);letter-spacing:.06em; }
.answer-stage.is-updated .scene-trust__token { animation:trust-token 1.55s cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-trust__endpoint.is-end > i { animation:trust-revoke 420ms ease-out 1.05s both; }
@keyframes trust-token { 0% { transform:none; } 45% { transform:translateX(100%); } 63% { transform:translateX(100%); } 100% { transform:translateX(200%); } }
@keyframes trust-revoke { from { opacity:0;transform:translate(-50%,-50%) rotate(-32deg) scaleX(0); } to { opacity:1;transform:translate(-50%,-50%) rotate(-32deg) scaleX(1); } }

/* --- Timeline: the project waits for an input, gate opens, work continues - */
.scene-timeline { display:grid;gap:0;place-items:center;padding:clamp(1rem,2.7vw,2rem); }
.scene-timeline__track { position:relative;width:min(100%,31rem);height:10.5rem; }
.scene-timeline__labels { position:absolute;left:0;right:0;bottom:.2rem;display:grid;grid-template-columns:repeat(3,1fr);text-align:center; }
.scene-timeline__labels span { color:var(--stage-accent-text);font:650 .43rem/1 var(--font-mono);letter-spacing:.08em; }
.scene-timeline__rail { position:absolute;left:16.666%;right:16.666%;top:56%;height:1px;background:color-mix(in srgb,var(--stage-ink) 38%,transparent); }
.scene-timeline__traveller { position:absolute;z-index:3;left:0;top:calc(56% - .38rem);width:33.333%;height:.76rem;transform:translateX(200%); }
.scene-timeline__traveller i { display:block;width:.76rem;height:.76rem;margin:auto;background:var(--stage-accent); }
.scene-timeline__gate { position:absolute;z-index:2;left:50%;top:calc(56% - 1.25rem);width:2rem;height:2.5rem;transform:translateX(-50%); }
.scene-timeline__gate i { position:absolute;top:0;bottom:0;width:1px;background:var(--stage-ink); }
.scene-timeline__gate i:first-child { left:50%;transform:translateX(-.32rem); }
.scene-timeline__gate i:last-child { right:50%;transform:translateX(.32rem); }
.scene-timeline__input { position:absolute;left:50%;top:.5rem;display:flex;min-width:7rem;transform:translateX(-50%);flex-direction:column;align-items:center;gap:.35rem;padding:.48rem .6rem;border:1px solid var(--stage-accent);background:var(--stage-bg); }
.scene-timeline__input small { color:var(--stage-accent-text);font:650 .4rem/1 var(--font-mono);letter-spacing:.06em; }
.scene-timeline__input b { color:var(--stage-accent);font:700 1rem/1 var(--show-sans); }
.answer-stage.is-updated .scene-timeline__traveller { animation:timeline-travel 1.75s cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-timeline__input { animation:timeline-input 520ms cubic-bezier(.22,1,.36,1) 610ms both; }
.answer-stage.is-updated .scene-timeline__gate i:first-child { animation:gate-left 430ms ease-out 940ms both; }
.answer-stage.is-updated .scene-timeline__gate i:last-child { animation:gate-right 430ms ease-out 940ms both; }
@keyframes timeline-travel { 0% { transform:none; } 42% { transform:translateX(100%); } 67% { transform:translateX(100%); } 100% { transform:translateX(200%); } }
@keyframes timeline-input { from { opacity:0;transform:translate(-50%,-1.2rem); } to { opacity:1;transform:translate(-50%,0); } }
@keyframes gate-left { from { transform:none; } to { transform:translateX(-.32rem); } }
@keyframes gate-right { from { transform:none; } to { transform:translateX(.32rem); } }

/* --- Service map: modules snap into one shared project -------------------- */
.scene-service-map { display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.8rem;padding:clamp(1rem,2.7vw,2rem); }
.scene-service-map__eyebrow { color:var(--stage-accent-text);font:700 .46rem/1 var(--font-mono);letter-spacing:.12em; }
.scene-service-map__assembly { position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,29rem);border:1px solid var(--stage-ink);background:color-mix(in srgb,var(--stage-bg) 64%,#fff); }
.scene-service-map__module { position:relative;z-index:1;display:flex;min-height:7.4rem;flex-direction:column;justify-content:space-between;padding:.75rem;border-right:1px solid color-mix(in srgb,var(--stage-ink) 30%,transparent);background:inherit; }
.scene-service-map__module:nth-child(3) { border-right:0; }
.scene-service-map__module small { color:var(--stage-accent-text);font:650 .42rem/1 var(--font-mono); }
.scene-service-map__module strong { font:750 clamp(.8rem,1.5vw,1.05rem)/1 var(--show-sans); }
.scene-service-map__pulse { position:absolute;z-index:2;left:.6rem;right:.6rem;bottom:.65rem;height:2px;background:var(--stage-accent);transform-origin:left center; }
.scene-service-map__project { color:var(--stage-ink);font:650 .47rem/1 var(--font-mono);letter-spacing:.1em; }
.answer-stage.is-updated .scene-service-map__module { animation:service-snap 620ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 120ms); }
.answer-stage.is-updated .scene-service-map__pulse { animation:service-pulse 620ms ease-out 420ms both; }
@keyframes service-snap { from { opacity:0;transform:translateY(-1.2rem); } to { opacity:1;transform:none; } }
@keyframes service-pulse { from { opacity:.2;transform:scaleX(0); } to { opacity:1;transform:none; } }

/* --- Process: one project card accumulates four completed states ---------- */
.scene-process { display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:clamp(1rem,2.7vw,2rem); }
.scene-process__project { align-self:center;width:min(100%,24rem);padding:.85rem;border:1px solid var(--stage-ink);background:color-mix(in srgb,var(--stage-bg) 62%,#fff); }
.scene-process__project small { color:var(--stage-accent-text);font:650 .43rem/1 var(--font-mono);letter-spacing:.1em; }
.scene-process__project strong { display:block;margin:.55rem 0 .8rem;font:700 clamp(.72rem,1.4vw,.98rem)/1.05 var(--show-sans); }
.scene-process__layers { display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem; }
.scene-process__layers i { height:.38rem;background:var(--stage-accent);transform-origin:left center; }
.scene-process__steps { position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:min(100%,31rem);margin:0 auto;padding-top:1.15rem;text-align:center; }
.scene-process__steps::before { content:none;display:none; }
.scene-process__steps > span { color:var(--stage-ink);font:650 .43rem/1 var(--font-mono);letter-spacing:.07em; }
.scene-process__rail { position:absolute;left:12.5%;right:12.5%;top:.35rem;width:auto;height:1px;background:color-mix(in srgb,var(--stage-ink) 38%,transparent);animation:none; }
.scene-process__marker { position:absolute;left:0;top:0;width:25%;height:.72rem;transform:translateX(300%); }
.scene-process__marker i { display:block;width:.72rem;height:.72rem;margin:auto;background:var(--stage-accent); }
.answer-stage.is-updated .scene-process__marker { animation:process-marker 1.45s cubic-bezier(.22,1,.36,1) both; }
.answer-stage.is-updated .scene-process__layers i { animation:process-layer 500ms ease-out both;animation-delay:calc(var(--i) * 150ms); }
@keyframes process-marker { 0% { transform:none; } 33% { transform:translateX(100%); } 62% { transform:translateX(200%); } 100% { transform:translateX(300%); } }
@keyframes process-layer { from { opacity:.18;transform:scaleX(0); } to { opacity:1;transform:none; } }

/* Compact stages keep the same mechanisms rather than switching to a second
   visual language. */
@container stage (max-width:34rem) {
  .scene-profile-map { grid-template-columns:1fr 1fr;gap:.8rem;padding:1rem; }
  .scene-profile-map__lanes { grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem; }
  .scene-profile-map__lane { grid-template-columns:1fr;gap:.35rem; }
  .scene-profile-map__lane span { text-align:center; }
  .scene-profile-map__lane > b { right:0; }
  .scene-profile-map__core,.scene-profile-map__stats { min-height:7rem; }

  .scene-web { padding:1rem; }
  .scene-web__browser { width:100%; }

  .scene-platform { grid-template-columns:1fr;padding:1rem; }
  .scene-platform__criteria { display:grid;grid-template-columns:repeat(3,1fr);border:0;gap:.4rem; }
  .scene-platform__criteria > small { grid-column:1/-1;padding:0; }
  .scene-platform__criteria > span { grid-template-columns:1fr;padding:.45rem;border:1px solid color-mix(in srgb,var(--stage-ink) 22%,transparent); }
  .scene-platform__criteria span i { height:.25rem; }
  .scene-platform__selector { min-height:2.2rem; }
  .scene-platform__selector small { top:calc(50% + .55rem); }
  .scene-platform__options > div { min-height:6.5rem; }

  .scene-seo { padding:1rem; }
  .scene-seo__rise { right:.45rem;bottom:.7rem;font-size:2rem; }

  .scene-ai-work { padding:1rem; }
  .scene-ai-work__node { min-height:6.4rem;padding:.55rem; }
  .scene-ai-work__tags span { padding:.25rem;font-size:.38rem; }

  .scene-ai-grounded { grid-template-columns:1.15fr .65fr 1fr;gap:.45rem;padding:1rem; }
  .scene-ai-grounded__base,.scene-ai-grounded__model,.scene-ai-grounded__answer { padding:.55rem; }
  .scene-ai-grounded__field { gap:.22rem;margin-top:.55rem; }
  .scene-ai-grounded__model,.scene-ai-grounded__answer { min-height:6.2rem; }
  .scene-ai-grounded__pulse { display:none; }

  .scene-blog { grid-template-columns:4.8rem 2.1rem minmax(0,1fr);gap:.5rem;padding:1rem; }
  .scene-blog__file { min-height:7.5rem;padding:.55rem; }
  .scene-blog__file strong { font-size:1.3rem; }
  .scene-blog__browser { min-height:8rem; }
  .scene-blog__article { gap:.35rem;padding:.5rem; }

  .scene-pricing { grid-template-columns:1.25fr .75fr;gap:.65rem;padding:1rem; }
  .scene-pricing__paper { padding:.7rem; }
  .scene-pricing__paper > strong { font-size:1.7rem; }
  .scene-pricing__money > small { font-size:.38rem; }
  .scene-pricing__coins { width:5.5rem;height:4rem; }
  .scene-pricing__coins span { width:2.8rem;height:2.8rem; }
  .scene-pricing__coins span:nth-child(2) { left:1.35rem; }

  .scene-measurement { grid-template-columns:1fr;grid-template-rows:auto;gap:.45rem;padding:1rem; }
  .scene-measurement__events { min-height:3.2rem;align-items:center;padding:.5rem; }
  .scene-measurement__wire { justify-self:center;width:1px;height:.8rem;transform-origin:center top; }
  .scene-measurement__wire > i { right:-.25rem;top:auto;bottom:-.25rem; }
  .scene-measurement__hub { min-height:4rem; }
  .scene-measurement__outputs { grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem; }
  .scene-measurement__outputs .scene-measurement__logo { min-height:2.8rem;padding:.25rem; }
  .scene-measurement__outputs .scene-measurement__logo img { width:1.45rem;height:1.45rem; }
  .scene-measurement__outputs .scene-measurement__logo small { display:none; }
  .scene-measurement__outputs .is-tiktok img { width:2.25rem;height:.85rem; }
  .scene-measurement__loop { grid-column:1;padding-top:.15rem; }

  .scene-ecommerce { padding:1rem; }
  .scene-ecommerce__journey li { min-height:5.8rem;padding:.45rem; }
  .scene-ecommerce__routes { width:66.666%; }

  .scene-trust { padding:1rem; }
  .scene-trust__endpoint,.scene-trust__scope { min-height:5.8rem;padding:.5rem; }
  .scene-trust__token b { font-size:.34rem; }

  .scene-timeline { padding:1rem; }
  .scene-timeline__track { height:9rem; }
  .scene-timeline__input { min-width:6.4rem; }

  .scene-service-map { padding:1rem; }
  .scene-service-map__module { min-height:5.9rem;padding:.55rem; }

  .scene-process { padding:1rem; }
  .scene-process__project { padding:.65rem; }
  .scene-process__project strong { margin:.45rem 0 .6rem; }
}

/* Motion gates: static CSS above is always the completed, meaningful frame. */
@media (prefers-reduced-motion:reduce) {
  .answer-stage.is-updated .scene-profile-map__lane > b,
  .answer-stage.is-updated .scene-web__block,
  .answer-stage.is-updated .scene-web__browser em,
  .answer-stage.is-updated .scene-platform__cursor,
  .answer-stage.is-updated .scene-platform__options > div,
  .answer-stage.is-updated .scene-seo__result.is-site,
  .answer-stage.is-updated .scene-seo__rise,
  .answer-stage.is-updated .scene-ai-work__token,
  .answer-stage.is-updated .scene-ai-grounded__field i.is-used,
  .answer-stage.is-updated .scene-ai-grounded__pulse,
  .answer-stage.is-updated .scene-blog__render i,
  .answer-stage.is-updated .scene-blog__article,
  .answer-stage.is-updated .scene-pricing__coins span,
  .answer-stage.is-updated .scene-pricing__money em,
  .answer-stage.is-updated .scene-measurement__wire,
  .answer-stage.is-updated .scene-measurement__outputs .scene-measurement__logo,
  .answer-stage.is-updated .scene-ecommerce__marker,
  .answer-stage.is-updated .scene-trust__token,
  .answer-stage.is-updated .scene-trust__endpoint.is-end > i,
  .answer-stage.is-updated .scene-timeline__traveller,
  .answer-stage.is-updated .scene-timeline__input,
  .answer-stage.is-updated .scene-timeline__gate i,
  .answer-stage.is-updated .scene-service-map__module,
  .answer-stage.is-updated .scene-service-map__pulse,
  .answer-stage.is-updated .scene-process__marker,
  .answer-stage.is-updated .scene-process__layers i { animation:none; }
}

@container stage (max-width:34rem) {
  .answer-stage.is-updated .scene-measurement__wire { animation-name:measure-wire-v; }
}
@keyframes measure-wire-v { from { opacity:.25;transform:scaleY(0); } to { opacity:1;transform:none; } }