/* Branching walkthrough on a use-case page: one road, a drawing per step,
   and a dot that rides the line as you scroll. Prefix .ucj- and .ucja- */

/* POSITION AND OVERFLOW ARE LOAD-BEARING. They used to come from
   `.hero-D--bg`, which went when the canvas did; without them the dot
   layer and the wash resolve `inset: 0` against whatever is positioned
   further up, so the halo's coordinates point at the wrong box and a
   translucent band lands over the journey below. */
.ucj-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: min(520px, 52vh);
  padding-top: 100px;
  padding-bottom: 72px;
  border-bottom: 0;
  /* `.hero-D`'s own wash is an ellipse anchored at the top of the section.
     This one sits behind the HEADLINE, which is where the homepage puts
     it, and the mask takes it out before the section ends. */
  background: var(--bg);
}
.ucj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      58% 62% at 50% 34%,
      color-mix(in oklab, var(--accent) 9%, transparent),
      transparent 70%
    ),
    radial-gradient(
      44% 50% at 82% 92%,
      color-mix(in oklab, var(--accent) 5%, transparent),
      transparent 72%
    );
  -webkit-mask-image: linear-gradient(to bottom, #000 0 52%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0 52%, transparent 96%);
}
.ucj-hero .hero-D-inner {
  position: relative;
  z-index: 1;
}

/* ── the dot grid under the copy ──────────────────────────────────── */
/* A FORK of the homepage's opener layer. The names differ because this
   sheet stays in the document on the homepage too, so it must not redefine
   anything of that page's. Change the effect in both. */

.ucj-hero-dots {
  --ucj-dots-cell: 26px;
  /* Wide enough to read as light rather than a spotlight edge, small
     enough that it never lights the whole column. */
  --ucj-dots-halo: 190px;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 1px 1px,
    color-mix(in oklab, var(--fg) 16%, transparent) 1px,
    transparent 0
  );
  background-size: var(--ucj-dots-cell) var(--ucj-dots-cell);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 52%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0 52%, transparent 96%);
  transition:
    --ucj-dots-x 0.26s cubic-bezier(0.25, 0.8, 0.35, 1),
    --ucj-dots-y 0.26s cubic-bezier(0.25, 0.8, 0.35, 1),
    --ucj-dots-lag-x 0.9s cubic-bezier(0.16, 0.85, 0.3, 1),
    --ucj-dots-lag-y 0.9s cubic-bezier(0.16, 0.85, 0.3, 1);
}
/* Two copies in the headline's own ramp, each masked to a soft circle
   following the cursor: a core that keeps up and an afterglow that drags. */
.ucj-hero-dots::before,
.ucj-hero-dots::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    96deg,
    var(--accent) 0%,
    var(--violet) 54%,
    var(--accent) 100%
  );
  -webkit-mask-image:
    radial-gradient(circle at 1px 1px, #000 1.4px, transparent 0),
    radial-gradient(
      var(--ucj-dots-halo) circle at var(--ucj-dots-x, -1000px)
        var(--ucj-dots-y, -1000px),
      #000 0%,
      rgb(0 0 0 / 0.55) 42%,
      transparent 72%
    );
  mask-image:
    radial-gradient(circle at 1px 1px, #000 1.4px, transparent 0),
    radial-gradient(
      var(--ucj-dots-halo) circle at var(--ucj-dots-x, -1000px)
        var(--ucj-dots-y, -1000px),
      #000 0%,
      rgb(0 0 0 / 0.55) 42%,
      transparent 72%
    );
  -webkit-mask-size: var(--ucj-dots-cell) var(--ucj-dots-cell), 100% 100%;
  mask-size: var(--ucj-dots-cell) var(--ucj-dots-cell), 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ucj-hero-dots::before {
  --ucj-dots-halo: 250px;
  transition: opacity 0.5s ease;
  -webkit-mask-image:
    radial-gradient(circle at 1px 1px, #000 1.4px, transparent 0),
    radial-gradient(
      var(--ucj-dots-halo) circle at var(--ucj-dots-lag-x, -1000px)
        var(--ucj-dots-lag-y, -1000px),
      #000 0%,
      rgb(0 0 0 / 0.55) 42%,
      transparent 72%
    );
  mask-image:
    radial-gradient(circle at 1px 1px, #000 1.4px, transparent 0),
    radial-gradient(
      var(--ucj-dots-halo) circle at var(--ucj-dots-lag-x, -1000px)
        var(--ucj-dots-lag-y, -1000px),
      #000 0%,
      rgb(0 0 0 / 0.55) 42%,
      transparent 72%
    );
}
.ucj-hero-dots[data-lit="true"]::after {
  opacity: 1;
}
.ucj-hero-dots[data-lit="true"]::before {
  opacity: 0.55;
}
/* INHERITED, and it has to be: the pointer position is written to the
   layer and read by its ::before and ::after. With `inherits: false` the
   pseudo falls back to the initial value and the halo never moves. */
@property --ucj-dots-x {
  syntax: "<length>";
  inherits: true;
  initial-value: -1000px;
}
@property --ucj-dots-y {
  syntax: "<length>";
  inherits: true;
  initial-value: -1000px;
}
@property --ucj-dots-lag-x {
  syntax: "<length>";
  inherits: true;
  initial-value: -1000px;
}
@property --ucj-dots-lag-y {
  syntax: "<length>";
  inherits: true;
  initial-value: -1000px;
}

/* ── the typed headline ───────────────────────────────────────────── */
/* Also a fork of the homepage's, `.nhp-type-*`, and the three traps below
   came with it. */

/* THE NEW HOMEPAGE'S TYPE, to the character. `h1.hero` in marketing.css
   and `.hero-D-copy h1` in landing-inline.css both size this at 56px and
   both are class+element, so the override needs two classes to win. */
.ucj-hero .ucj-typed {
  font-size: clamp(min(44px, 12.5vw), 6.4vw, 68px);
  line-height: 1.04;
}
.ucj-hero .ucj-lede {
  margin: 16px auto 0;
  max-width: 58ch;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: balance;
}

/* The sequence's clock, declared once on the element the headline and
   the sub-line both descend from. Not on the h1: the sub-line is its
   sibling, and custom properties inherit downward only. Reasoning in
   docs/marketing/usecase-journey-notes.md */
.ucj-hero .hero-D-copy {
  --ucj-type-step: 0.045s;
  --ucj-type-end: calc(var(--ucj-type-count, 32) * var(--ucj-type-step));
  --ucj-after-type: calc(var(--ucj-type-end) + 0.9s);
}
.ucj-typed {
  margin: 0;
}
.ucj-type-run {
  position: relative;
  /* The caret wears the headline's own ramp, running DOWN rather than
     across: at 0.063em the bar is about three pixels, and three pixels of
     a horizontal gradient is one arbitrary colour. */
  --ucj-caret-fill: linear-gradient(
    180deg,
    var(--accent) 0%,
    var(--violet) 54%,
    var(--accent) 100%
  );
  --ucj-caret-w: 0.063em;
}

/* A character. Plain inline box: never positioned, never inline-block,
   never opacity-animated. Reasons in the marketing notes. */
.ucj-type-ch {
  /* VISIBILITY, not opacity, for the reason above. */
  animation: ucj-type-in 0.016s linear both;
  animation-delay: calc(var(--i) * var(--ucj-type-step));
}
@keyframes ucj-type-in {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

/* The hopping caret. Lit for one step only; sized against the GLYPHS
   rather than the inline box. Numbers explained in the notes. */
.ucj-type-ch::after {
  content: "";
  /* Absolute with NO top/left: it lands at its static position, hard
     against this character's right edge on this character's baseline. */
  position: absolute;
  margin-top: 0.26em;
  margin-left: 0.045em;
  width: var(--ucj-caret-w);
  height: 0.79em;
  border-radius: 1px;
  background: var(--ucj-caret-fill);
  opacity: 0;
  animation: ucj-caret-hold var(--ucj-type-step) linear;
  animation-delay: calc(var(--i) * var(--ucj-type-step));
}
@keyframes ucj-caret-hold {
  from,
  to {
    opacity: 1;
  }
}

/* The landing. Crosses to the ramp only when the sentence ends; the
   filter list keeps its shape so the glow can interpolate. */
.ucj-type-lit {
  color: inherit;
  background-image: linear-gradient(
    96deg,
    var(--accent) 0%,
    var(--violet) 54%,
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 0 0;
  -webkit-text-fill-color: var(--fg);
  filter: drop-shadow(0 0 0 color-mix(in srgb, var(--accent) 46%, transparent))
    drop-shadow(0 0 0 color-mix(in srgb, var(--accent) 34%, transparent));
  animation:
    ucj-type-bloom 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--ucj-type-end)
      both,
    ucj-type-lit-clip 0.001s linear var(--ucj-type-end) forwards;
}
@keyframes ucj-type-lit-clip {
  from,
  to {
    background-size: 100% 100%;
  }
}
@keyframes ucj-type-bloom {
  from {
    -webkit-text-fill-color: var(--fg);
    filter: drop-shadow(
        0 0 0 color-mix(in srgb, var(--accent) 46%, transparent)
      )
      drop-shadow(0 0 0 color-mix(in srgb, var(--accent) 34%, transparent));
  }
  to {
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(
        0 0 7px color-mix(in srgb, var(--accent) 46%, transparent)
      )
      drop-shadow(0 4px 30px color-mix(in srgb, var(--accent) 34%, transparent));
  }
}

/* The sub-line arrives once the sentence has landed and the glow has
   finished, so the two are one sequence rather than two overlapping ones. */
.ucj-lede {
  animation: ucj-arrive 0.72s cubic-bezier(0.22, 0.61, 0.36, 1)
    var(--ucj-after-type, 2s) both;
}
@keyframes ucj-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The accessible copy of the sentence. */
.ucj-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ucj-type-ch {
    animation: none;
    visibility: visible;
  }
  .ucj-type-ch::after {
    animation: none;
    opacity: 0;
  }
  /* The still frame has to be the FINISHED one. Without these the headline
     would be transparent text over a zero-sized background, which is no
     headline at all for the readers least able to afford one. */
  .ucj-type-lit {
    animation: none;
    background-size: 100% 100%;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(
        0 0 7px color-mix(in srgb, var(--accent) 46%, transparent)
      )
      drop-shadow(0 4px 30px color-mix(in srgb, var(--accent) 34%, transparent));
  }
  .ucj-lede {
    animation: none;
  }
}
@media (max-width: 900px) {
  .ucj-hero {
    min-height: 0;
    padding-top: 56px;
    padding-bottom: 64px;
  }
}

.ucj {
  --ucj-line: 10px;
  /* The bead scales with the line it rides, so the dot reads the same at
     any width. `r` is an SVG geometry property and settable from CSS; the
     attribute on the circle is the fallback. */
  --ucj-bead: 12px;
  --ucj-track: var(--border);
  --ucj-live: var(--accent);
  --ucj-gutter: 104px;
  --ucj-say: 0.78fr;
  /* Flush with the hero's rule, so the road comes out from under it. */
  padding: 0 0 160px;
}

.ucj-flow {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── the road ─────────────────────────────────────────────────────── */

.ucj-road {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}
.ucj-road-track,
.ucj-road-drawn,
.ucj-leg {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ucj-road-track {
  stroke: var(--ucj-track);
  stroke-width: var(--ucj-line);
}
.ucj-road-drawn {
  stroke: var(--ucj-live);
  stroke-width: var(--ucj-line);
}
/* A road not taken: same curve as the one that was, dotted and muted. */
.ucj-leg {
  stroke: var(--ucj-track);
  stroke-width: 5;
  stroke-dasharray: 1 12;
  stroke-linecap: round;
}

.ucj-road-dot {
  opacity: 0;
  transition: opacity 0.25s;
}
.ucj-road-bead {
  r: var(--ucj-bead);
  fill: var(--ucj-live);
  stroke: var(--bg);
  stroke-width: calc(var(--ucj-bead) / 2.25);
}
.ucj-road-halo {
  r: calc(var(--ucj-bead) * 2.45);
  fill: var(--ucj-live);
  opacity: 0.16;
}

/* Waypoints. They carry no ink of their own; they only tell the road
   where to run, and CSS is what moves the road between layouts. */
/* The question is a pill, and the pill is the junction: every road out of
   this fork leaves its lower edge. */
.ucj-pill-row {
  display: flex;
  justify-content: center;
}
.ucj-junction {
  display: block;
  width: 100%;
  height: 34px;
}
/* The final bend needs the same turning room as any other, and a fixed
   height leaves none: without the margin the road kinks at the door. */
.ucj-junction--end {
  height: 88px;
  margin-top: 96px;
}
.ucj-choice-road {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
}

/* Everything with ink sits above the road. */
.ucj-fork,
.ucj-step,
.ucj-end {
  position: relative;
  z-index: 1;
}

/* ── a fork ───────────────────────────────────────────────────────── */

/* Room for the crossing that arrives here from the branch above. The
   first fork has nothing above it: the road starts at its pill. */
.ucj-fork {
  padding-top: 150px;
}
.ucj-road + .ucj-fork {
  padding-top: 28px;
}
.ucj-fork-q {
  margin: 0;
  max-width: 24ch;
  padding: 15px 34px;
  border: 1.5px solid var(--ucj-live);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ucj-live) 12%, var(--bg-subtle));
  color: var(--ucj-live);
  font-size: clamp(18px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.ucj-choices {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 22px;
  /* The fan's depth. Roughly half the reach out to an outer card, which is
     what keeps the three curves from flattening into swooshes. */
  margin-top: 172px;
}

.ucj-choice {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--bg-subtle), var(--bg));
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.ucj-choice:hover {
  border-color: color-mix(in srgb, var(--ucj-live) 55%, var(--border));
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.06);
}
.ucj-choice.is-on {
  border-color: var(--ucj-live);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ucj-live) 10%, var(--bg-subtle)), var(--bg-subtle));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ucj-live) 9%, transparent), 0 12px 28px rgb(0 0 0 / 0.06);
}
.ucj-choice:has(:focus-visible) {
  outline: 2px solid var(--ucj-live);
  outline-offset: 3px;
}

.ucj-choice-in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ucj-choice-dot {
  position: absolute;
  top: 29px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.ucj-choice.is-on .ucj-choice-dot {
  border-color: var(--ucj-live);
  background: var(--accent-deep);
}
.ucj-choice-dot svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.ucj-choice.is-on .ucj-choice-dot svg {
  opacity: 1;
}

.ucj-choice-t {
  padding-right: 28px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.28;
  color: var(--fg);
}
.ucj-choice-b {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.ucj-choice-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-muted);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
}
.ucj-choice.is-on .ucj-choice-foot,
.ucj-choice:hover .ucj-choice-foot {
  color: var(--accent);
}
.ucj-choice-foot svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
.ucj-choice:hover .ucj-choice-foot svg {
  transform: translateX(3px);
}

/* ── a step ───────────────────────────────────────────────────────── */

.ucj-step {
  display: grid;
  align-items: center;
  gap: 0;
  margin-top: 124px;
}
.ucj-step--a {
  grid-template-columns: 1fr var(--ucj-gutter) var(--ucj-say);
}
.ucj-step--a .ucj-art {
  grid-column: 1;
}
.ucj-step--a .ucj-say {
  grid-column: 3;
}
.ucj-step--b {
  grid-template-columns: var(--ucj-say) var(--ucj-gutter) 1fr;
}
.ucj-step--b .ucj-say {
  grid-column: 1;
}
.ucj-step--b .ucj-art {
  grid-column: 3;
}
/* The gutter cell itself is the waypoint: it fills column 2, so its own
   centre is the road's x and the grid decides where that is. */
.ucj-gut {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 100%;
}

.ucj-art {
  grid-row: 1;
  margin: 0;
  padding: 26px;
  border-radius: 26px;
  background: color-mix(in oklab, var(--fg) 4%, var(--bg));
  transition: background 0.3s;
}
.ucj-step.is-live .ucj-art {
  background: color-mix(in oklab, var(--ucj-live) 9%, var(--bg));
}

.ucj-say {
  grid-row: 1;
  min-width: 0;
}
.ucj-say,
.ucj-step > .ucj-art {
  animation: ucj-content-in 0.35s ease-out both;
}
@keyframes ucj-content-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
.ucj-n {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color 0.28s;
}
.ucj-n b {
  font-weight: 600;
}
.ucj-n::after {
  content: "";
  width: 38px;
  height: 1px;
  margin-left: 5px;
  background: var(--border);
  transition: background 0.28s, width 0.28s;
}
.ucj-n-total {
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.ucj-step.is-live .ucj-n {
  color: var(--ucj-live);
}
.ucj-step.is-live .ucj-n::after {
  width: 58px;
  background: var(--ucj-live);
}
.ucj-step-t {
  margin: 0;
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--fg);
}
.ucj-step-b {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--fg-muted) 84%, var(--fg));
  text-wrap: pretty;
}
.ucj-step-b p {
  margin: 0;
}
.ucj-step-b p + p {
  margin-top: 14px;
}
.ucj-step-b p:first-child {
  color: var(--fg);
  font-weight: 450;
}

/* ── the closing panel ────────────────────────────────────────────── */

.ucj-end {
  max-width: 840px;
  margin: 0 auto;
  padding: 48px 56px 52px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%), var(--bg-subtle);
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.06);
  text-align: center;
  transition: border-color 0.28s;
}
.ucj-end::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 25%;
  right: 25%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--violet), transparent);
}
.ucj-end-eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ucj-end.is-live {
  border-color: color-mix(in oklab, var(--ucj-live) 42%, var(--border));
}
.ucj-end-t {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.16;
  text-wrap: balance;
  color: var(--fg);
}
.ucj-end-b {
  margin: 20px auto 0;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--fg-muted) 84%, var(--fg));
  text-wrap: pretty;
}
.ucj-end-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.ucj-end-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--accent-deep);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ucj-end-cta:hover {
  background: var(--accent-emph);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 20%, transparent);
  text-decoration: none;
}
.ucj-end-cta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ucj-end-cta--secondary {
  border-color: var(--border);
  background: var(--bg);
  color: var(--fg);
}
.ucj-end-cta--secondary:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  box-shadow: none;
}
.ucj-end-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ── the drawings ─────────────────────────────────────────────────── */

.ucja {
  display: block;
  width: 100%;
  height: auto;
  /* One product colour per scene, from the same tokens the marketing
     nav's Features menu uses. Only the shapes wearing `is-brand` pick it
     up; everything else stays the site accent. */
  --ucja-brand: var(--accent);
}
.ucja--continuum {
  --ucja-brand: var(--brand-continuum);
}
.ucja--vellum {
  --ucja-brand: var(--brand-vellum);
}
.ucja--stratum {
  --ucja-brand: var(--brand-stratum);
}
.ucja--folium {
  --ucja-brand: var(--brand-folium);
}
.ucja--podium {
  --ucja-brand: var(--brand-podium);
}
.ucja--ai {
  --ucja-brand: var(--brand-ai);
}
.ucja-node.is-brand {
  fill: color-mix(in oklab, var(--ucja-brand) 18%, var(--bg-subtle));
  stroke: var(--ucja-brand);
}
.ucja-pill.is-brand {
  fill: color-mix(in oklab, var(--ucja-brand) 20%, var(--bg-subtle));
  stroke: var(--ucja-brand);
}
.ucja-row.is-brand {
  fill: color-mix(in oklab, var(--ucja-brand) 14%, var(--bg));
  stroke: var(--ucja-brand);
}
.ucja-tag.is-brand {
  fill: var(--ucja-brand);
}
/* A phrase picked out inside a paragraph: a link, or a search hit. */
.ucja-bar.is-brand {
  fill: var(--ucja-brand);
  opacity: 1;
}
.ucja-underline.is-brand {
  stroke: var(--ucja-brand);
}
.ucja-wire.is-brand {
  stroke: var(--ucja-brand);
}
.ucja-note.is-brand {
  fill: color-mix(in oklab, var(--ucja-brand) 12%, var(--bg-subtle));
  stroke: var(--ucja-brand);
}
.ucja-check.is-brand {
  fill: var(--ucja-brand);
  stroke: var(--ucja-brand);
}
.ucja-arrow.is-brand,
.ucja-arrow-head.is-brand {
  stroke: var(--ucja-brand);
  fill: var(--ucja-brand);
}
.ucja-panel {
  fill: var(--bg);
  stroke: var(--border-muted);
  stroke-width: 1.5;
}
.ucja-rule {
  fill: none;
  stroke: var(--border-muted);
  stroke-width: 1.2;
}
.ucja-dot-mute {
  fill: var(--border);
}
.ucja-cap {
  fill: var(--fg-subtle);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ucja-tag {
  fill: var(--fg-muted);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 8px;
}
.ucja-tag.is-on {
  fill: var(--accent);
}
.ucja-sheet {
  fill: var(--bg-subtle);
  stroke: var(--border-muted);
  stroke-width: 1.2;
}
.ucja-node {
  fill: var(--bg-subtle);
  stroke: var(--border);
  stroke-width: 1.5;
}
.ucja-node.is-on {
  fill: color-mix(in oklab, var(--accent) 16%, var(--bg-subtle));
  stroke: var(--accent);
}
.ucja-node.is-ghost {
  stroke-dasharray: 3 4;
  opacity: 0.55;
}
/* Newly discovered and not yet promoted, in the product's own green. */
.ucja-node.is-new {
  fill: color-mix(in oklab, var(--success) 15%, var(--bg-subtle));
  stroke: var(--success);
}
.ucja-group {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.2;
}
.ucja-group.is-dashed {
  stroke-dasharray: 4 5;
}
.ucja-wire {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ucja-wire.is-on {
  stroke: var(--accent);
}
.ucja-wire.is-soft {
  opacity: 0.6;
}
.ucja-bar {
  fill: var(--fg-muted);
  opacity: 0.55;
}
.ucja-bar--faint {
  opacity: 0.3;
}
.ucja-pill {
  fill: var(--bg-subtle);
  stroke: var(--border);
  stroke-width: 1.2;
}
.ucja-pill.is-on {
  fill: color-mix(in oklab, var(--accent) 18%, var(--bg-subtle));
  stroke: var(--accent);
}
.ucja-pill.is-new {
  fill: color-mix(in oklab, var(--success) 18%, var(--bg-subtle));
  stroke: var(--success);
}
.ucja-row {
  fill: var(--bg);
  stroke: var(--border-muted);
  stroke-width: 1;
}
.ucja-row.is-on {
  fill: color-mix(in oklab, var(--accent) 12%, var(--bg));
  stroke: var(--accent);
}
/* Diff rows. Green and red here are the DIFF convention, added and
   removed; `is-new` below is the product's promotion signal and the two
   never share a scene. */
.ucja-row.is-add {
  fill: color-mix(in oklab, var(--success) 14%, var(--bg));
  stroke: var(--success);
}
.ucja-row.is-cut {
  fill: color-mix(in oklab, var(--danger) 12%, var(--bg));
  stroke: var(--danger);
}
/* A row the drawing is dropping rather than keeping. Its own border is
   the muted one, which disappears entirely once it is dashed and faded. */
.ucja-row.is-ghost {
  stroke: var(--border);
  stroke-dasharray: 3 4;
  opacity: 0.6;
}
.ucja-row.is-flag {
  fill: color-mix(in oklab, var(--warn) 16%, var(--bg));
  stroke: var(--warn);
}
.ucja-note {
  fill: color-mix(in oklab, var(--accent) 10%, var(--bg-subtle));
  stroke: var(--accent);
  stroke-width: 1.2;
}
.ucja-note-tip {
  fill: color-mix(in oklab, var(--accent) 10%, var(--bg-subtle));
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.ucja-alert {
  fill: var(--danger);
}
.ucja-ok {
  fill: var(--success);
}
.ucja-pin {
  fill: var(--warn);
}
.ucja-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.ucja-arrow-head {
  fill: var(--accent);
  stroke: none;
}
.ucja-file {
  fill: var(--bg-subtle);
  stroke: var(--border);
  stroke-width: 1.4;
}
.ucja-file-fold {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.ucja-thumb {
  fill: color-mix(in oklab, var(--accent) 14%, var(--bg));
  stroke: var(--border-muted);
  stroke-width: 1;
}
.ucja-lock {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
}
.ucja-lock-body {
  fill: var(--accent);
}
.ucja-check {
  fill: var(--bg-emphasis);
  stroke: var(--fg-subtle);
  stroke-width: 1.2;
}
.ucja-tick {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ucja-grid {
  fill: none;
  stroke: var(--border-muted);
  stroke-width: 1;
  opacity: 0.6;
}
.ucja-cursor {
  fill: var(--fg);
  stroke: var(--bg);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.ucja-prompt {
  fill: var(--bg-subtle);
  stroke: var(--accent);
  stroke-width: 1.4;
}
/* A region marked out ON a canvas rather than a box drawn beside it: a
   podium slide's frame, dashed, and a live embed's, solid. */
.ucja-frame {
  fill: none;
  stroke: var(--fg-subtle);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}
.ucja-frame.is-brand {
  stroke: var(--ucja-brand);
}
.ucja-frame.is-on {
  stroke: var(--accent);
  stroke-dasharray: none;
}
/* Chart columns. */
.ucja-col {
  fill: var(--fg-muted);
  opacity: 0.45;
}
.ucja-col.is-on {
  fill: var(--accent);
  opacity: 1;
}
/* The two posts of a gate that has opened. */
.ucja-gate {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
  stroke-linecap: round;
}
/* The numbered disc on a procedure step. */
.ucja-step-n {
  fill: color-mix(in oklab, var(--accent) 22%, var(--bg-subtle));
  stroke: var(--accent);
  stroke-width: 1.2;
}
/* A collapsed accordion's chevron. */
.ucja-chev {
  fill: none;
  stroke: var(--fg-subtle);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The rule under a linked phrase. */
.ucja-underline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
}
/* A magnifier: ring plus stem, so it reads at 12px. */
.ucja-glass {
  fill: none;
  stroke: var(--fg-subtle);
  stroke-width: 1.8;
}
.ucja-glass-stem {
  fill: none;
  stroke: var(--fg-subtle);
  stroke-width: 1.8;
  stroke-linecap: round;
}
/* A feed mark: two arcs and the dot they turn about. */
.ucja-rss,
.ucja-envelope {
  fill: none;
  stroke: var(--ucja-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ucja-rss-dot {
  fill: var(--ucja-brand);
}
/* Commits on a branch line. */
.ucja-commit {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1.8;
}
.ucja-commit.is-on {
  fill: color-mix(in oklab, var(--accent) 30%, var(--bg));
  stroke: var(--accent);
}

/* ── tablet ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .ucj {
    --ucj-gutter: 72px;
    --ucj-bead: 11px;
  }
  .ucj-flow {
    padding: 0 28px;
  }
  .ucj-choices {
    gap: 16px;
  }
  .ucj-choice {
    padding: 22px;
  }
  .ucj-choice-dot {
    top: 23px;
    right: 20px;
  }
  body:has(.ucj) .nav .marketing-user-name {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  body:has(.ucj) .nav-auth-row a:has(.marketing-user-name) {
    padding: 3px !important;
  }
  body:has(.ucj) .nav-actions .nav-draw {
    width: 32px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  body:has(.ucj) .nav-draw-t {
    display: none;
  }
}

/* Keep the full navigation comfortable until the mobile menu takes over. */
@media (min-width: 881px) and (max-width: 1080px) {
  body:has(.ucj) .nav {
    padding: 0 16px;
    gap: 12px;
  }
  body:has(.ucj) .nav-links .nav-trigger {
    padding-inline: 6px;
  }
}

/* ── phone: the road runs down the left of everything ─────────────── */

@media (max-width: 900px) {
  .ucj {
    --ucj-line: 7px;
    --ucj-bead: 9px;
    padding: 12px 0 110px;
  }
  .ucj-flow {
    padding: 0 20px 0 56px;
  }
  .ucj-end {
    text-align: left;
  }
  .ucj-fork-q {
    padding: 12px 22px;
  }
  .ucj-end {
    max-width: none;
    padding: 28px 24px 30px;
  }
  .ucj-end-actions {
    justify-content: flex-start;
  }
  .ucj-end-b {
    margin-left: 0;
    margin-right: 0;
  }
  .ucj-fork {
    padding-top: 96px;
  }
  /* The steps and the closing panel share a left rail, so the phone reads
     as one line down the page rather than a weave with nothing to weave
     around. The FORK cards keep the centre, because the pill above them is
     centred and pulling the road out to the left and back was a zig with
     nothing on either side of it. */
  .ucj-junction {
    width: 2px;
    margin-left: -30px;
  }
  .ucj-leg {
    display: none;
  }
  .ucj-choices {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 44px;
  }
  .ucj-step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 80px;
  }
  .ucj-gut {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    width: 2px;
    height: auto;
    transform: none;
  }
  .ucj-art {
    order: 1;
    margin-top: 26px;
    padding: 12px;
    border-radius: 16px;
  }
  .ucj-say {
    order: 0;
    margin-top: 0;
  }
  /* One column, but a landscape phone is 844px wide and an uncapped
     measure there runs to about 110 characters. */
  .ucj-step-b {
    max-width: 54ch;
    font-size: 16px;
  }
  .ucj-fork-q {
    max-width: 26ch;
  }
}

@media (max-width: 600px) {
  .ucj-end {
    padding: 30px 20px;
  }
  .ucj-end-b {
    font-size: 16px;
  }
  .ucj-end-actions {
    flex-direction: column;
  }
  .ucj-end-cta {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ucj-choice,
  .ucj-choice-dot,
  .ucj-choice-foot svg,
  .ucj-art,
  .ucj-n,
  .ucj-n::after,
  .ucj-end,
  .ucj-end-cta,
  .ucj-road-dot {
    transition: none;
  }
  .ucj-choice:hover .ucj-choice-foot svg {
    transform: none;
  }
  .ucj-say,
  .ucj-step > .ucj-art {
    animation: none;
  }
}