/* Self-serve launch: the homepage sections, pricing, community and trust pages.
   Built from the site's own tokens (theme-minimal.css). Status colours reuse
   ones already on the site: the amber focus ring in Styles.css, the greens
   of the operator demo and blueprint report, and the blueprint warning. */
:root {
  --lp-amber: #f6b24a;
  --lp-ok: #538e64;
  --lp-ok-bg: #bce1cb;
  --lp-ok-text: var(--ink);
  --lp-warn-ink: #92400e;
  --lp-warn-bg: #fffbeb;
  --lp-warn-line: #f6b24a;
  --lp-hit: rgba(0, 105, 216, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root {
    --lp-ok: #4ade80;
    --lp-ok-bg: #16271c;
    --lp-ok-text: #4ade80;
    --lp-warn-ink: #f6b24a;
    --lp-warn-bg: rgba(246, 178, 74, 0.12);
    --lp-hit: rgba(108, 182, 255, 0.4);
  }
}

/* App look. Product mock-ups on the homepage (Create, the assistant, Keep it
   current, Explode) show the TwinWorks app and its free tools as they are:
   values from twinworks-frontend (src/Index.css, tailwind.config.js) and the
   Explode tool. They stay light in dark mode, like the hero film, because they
   stand for screenshots. Type stays the site's Inter (the app's sign-up page
   and the Explode tool use Inter too). */
:root {
  --app-page: #f5f5f7;
  --app-panel: #ffffff;
  --app-ink: #0a0a0a;
  --app-muted: #6b6b6b;
  --app-line: #e5e5e5;
  --app-fill: #f5f5f5;
  --app-accent: #0069d8;
  --app-accent-tint: rgba(0, 104, 214, 0.08);
  --app-select: #007bff;
  --app-ok: #33c758;
  --app-wait: #f59e0b;
  --app-studio: linear-gradient(180deg, #eef0f3 0%, #dfe3e9 100%);
  --app-glass: rgba(255, 255, 255, 0.92);
  --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.09);
}
/* Site section heads: the grey eyebrow and the display headline with a grey
   second line, as in the authoring and operator sections. */
.lp-eyebrow-site { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.lp-display { margin: 0; font-size: clamp(36px, 4.4vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -0.05em; color: var(--ink); text-wrap: balance; }
.lp-display > span { display: block; color: var(--ink-3); }

/* Stages. Anything that differs between the sales-led site and the self-serve
   launch carries .stage-sales or .stage-launch. node tools/set-stage.mjs keeps
   only the current stage's elements in the page (the others wait in HTML
   comments) and sets <html data-stage="sales"> in the sales stage; this rule
   is the second guard, for an element added without running it. */
html:not([data-stage="sales"]) .stage-sales,
html[data-stage="sales"] .stage-launch { display: none !important; }

/* ------------------------------------------------------------ shared */
.lp-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-left: max(16px, clamp(24px, 6vw, 64px));
  padding-right: max(16px, clamp(24px, 6vw, 64px));
}
.lp-eyebrow { margin: 0 0 14px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); }
.lp-lead { margin: 18px 0 0; max-width: 58ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.lp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 4px; }
.lp-cta-row--center { justify-content: center; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lp-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.lp-chip--open { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-sec-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.lp-sec-eyebrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ------------------------------------------------------------ hero */
.lp-hero-eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.lp-hero-micro { margin: 16px 0 0; font-size: 0.95rem; color: var(--ink-2); }
.lp-hero-micro a:not(#tw-noop) { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------ Try it: Community */
.lp-xh h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.lp-ch__lead, .lp-xh__lead { margin: 16px 0 0; max-width: 46ch; font-size: 1.1rem; line-height: 1.55; color: var(--ink-2); }
.lp-ch { padding: clamp(56px, 8vw, 104px) max(16px, clamp(24px, 6vw, 64px)); background: var(--paper); }
.lp-ch__inner { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 1280px; margin: 0 auto; }
.lp-ch__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.lp-ch__head .lp-actions { margin-top: 0; }
/* The featured project and, beside it, a wall of real public projects from the
   app's community drifting slowly in three columns (community-wall.js). */
.lp-ch__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; }
/* The featured project: its viewer still whole (16:9, never cropped), then its details. */
a.lp-ch__feature:not(#tw-noop) { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
a.lp-ch__feature:not(#tw-noop):hover { border-color: var(--ink); transform: translateY(-2px); }
.lp-ch__art { position: relative; display: block; aspect-ratio: 800 / 450; background: #dee3e8; }
.lp-ch__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lp-ch__badge { position: absolute; left: 14px; bottom: 14px; padding: 6px 13px; border-radius: 999px; background: var(--app-glass, rgba(255, 255, 255, 0.92)); box-shadow: var(--app-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--app-ink, #0a0a0a); font-size: 13px; font-weight: 500; }
.lp-ch__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(20px, 2.4vw, 30px); }
.lp-ch__title { font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.lp-ch__by { margin-top: -4px; font-size: 1rem; color: var(--ink-3); }
.lp-ch__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 420px; margin-top: 4px; }
.lp-ch__stats span { display: grid; gap: 2px; padding: 12px 8px; border-radius: 14px; background: var(--paper-2); color: var(--ink-3); font-size: 13px; text-align: center; }
.lp-ch__stats b { color: var(--ink); font-size: 1.3rem; font-weight: 600; }
.lp-ch__open { margin-top: auto; padding-top: 6px; font-size: 1.05rem; font-weight: 600; }

/* The wall takes the featured card's height (size containment), its columns
   fade at the top and bottom, and it ends in a link to the whole community. */
.lp-ch__wall { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 12px; overflow: hidden; contain: size; min-height: 420px; border-radius: 22px; background: var(--paper-2); }
.lp-ch__track { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 12px 0; list-style: none; }
/* Soft top and bottom edges, under the link to the community. */
.lp-ch__wall::before, .lp-ch__wall::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.lp-ch__wall::before { top: 0; height: 48px; background: linear-gradient(var(--paper-2), transparent); }
.lp-ch__wall::after { bottom: 0; height: 110px; background: linear-gradient(transparent, var(--paper-2) 70%); }
.lp-ch__track li::marker { content: none; }
.lp-ch__wall.is-moving .lp-ch__track { animation: lp-ch-up 46s linear infinite; }
.lp-ch__wall.is-moving .lp-ch__track:nth-child(2) { animation-name: lp-ch-down; animation-duration: 54s; }
.lp-ch__wall.is-moving .lp-ch__track:nth-child(3) { animation-duration: 40s; }
.lp-ch__wall.is-moving:hover .lp-ch__track, .lp-ch__wall.is-moving:focus-within .lp-ch__track, .lp-ch__wall.is-paused .lp-ch__track { animation-play-state: paused; }
/* One loop is the first copy of the list and its gaps. */
@keyframes lp-ch-up { to { transform: translateY(calc(-50% - 6px)); } }
@keyframes lp-ch-down { from { transform: translateY(calc(-50% - 6px)); } to { transform: translateY(0); } }
a.lp-ch__tile:not(#tw-noop) { display: grid; gap: 2px; padding: 8px 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color 0.2s ease; }
a.lp-ch__tile:not(#tw-noop):hover { border-color: var(--ink); }
.lp-ch__tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 10px; background: #f2f3f5; object-fit: contain; }
.lp-ch__tname { padding: 0 4px; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.lp-ch__tkind { padding: 0 4px; color: var(--ink-3); font-size: 12.5px; line-height: 1.3; }
.lp-ch__tkind b { color: var(--ink-2); font-weight: 500; }
.lp-ch__tkind b::before { content: "★ "; color: #f5a623; }
a.lp-ch__more:not(#tw-noop) { position: absolute; left: 50%; bottom: 16px; z-index: 2; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--on-fill); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 6px 18px rgba(10, 10, 11, 0.16); }

/* ------------------------------------------------------------ Try it: Explode */
/* The free Explode & Animate tool's result screen, on the hero's CP-200 pump:
   a studio-grey 3D stage, a 'Sample' chip and the tool's glass dock with its
   'Exploded view' | 'Animation' switch. The stage stays light in dark mode,
   like the other app mock-ups; the copy around it follows the site tokens.
   Every swapped label is stacked in one grid cell, so the dock never changes
   height while the sample plays. */
.lp-xh { padding: clamp(64px, 8vw, 112px) max(16px, clamp(24px, 6vw, 64px)); background: var(--paper); }
.lp-xh__inner { display: grid; gap: clamp(32px, 4vw, 48px); max-width: 1280px; margin: 0 auto; }
.lp-xh__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 24px clamp(32px, 5vw, 72px); align-items: end; }
.lp-xh .lp-display { font-size: clamp(36px, 4.4vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -0.05em; }
.lp-xh__text { margin: 0; max-width: 54ch; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.lp-xh .lp-actions { margin-top: 22px; }
.lp-xh__sample { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.lp-xh__sample:hover { text-decoration-color: var(--ink); }
.lp-xh__sample:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.lp-xh__formats { margin: 16px 0 0; font: 500 12px/1.5 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-3); }

/* Stage: the app's studio backdrop, no frame. Room is kept for the chips at
   the top and the dock at the bottom; explode-demo.js frames the pump in the
   space between them, and the poster sits in the same space. */
.lp-xh__visual { --xh-top: 54px; --xh-bottom: 171px; position: relative; height: clamp(540px, 46vw, 640px); overflow: hidden; border-radius: 20px; background: var(--app-studio); color: var(--app-ink); isolation: isolate; }
.lp-xh__stage { position: absolute; inset: 0; border-radius: inherit; cursor: grab; touch-action: pan-y; }
.lp-xh__stage:active { cursor: grabbing; }
.lp-xh__stage:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }
/* The poster is cropped to the camera's fit and sits in the same padded box,
   so the pump does not jump when the 3D takes over. */
.lp-xh__poster { position: absolute; top: var(--xh-top); left: min(32px, 5%); width: calc(100% - 2 * min(32px, 5%)); height: calc(100% - var(--xh-top) - var(--xh-bottom)); object-fit: contain; transition: opacity 0.4s ease; pointer-events: none; }
.lp-xh__stage.is-ready .lp-xh__poster { opacity: 0; }
.lp-xh__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lp-xh__chip, .lp-xh .lp-xh__part { position: absolute; top: 16px; z-index: 1; box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 30px; margin: 0; padding: 0 12px; border-radius: 999px; background: var(--app-glass); box-shadow: var(--app-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 12px; font-weight: 500; line-height: 30px; white-space: nowrap; pointer-events: none; }
.lp-xh__chip { left: 16px; padding-left: 4px; color: var(--app-ink); }
.lp-xh__chip span { padding: 0 8px; border-radius: 999px; background: var(--app-fill); color: var(--app-muted); font-size: 11px; line-height: 22px; }
.lp-xh .lp-xh__part { right: 16px; display: block; max-width: calc(100% - 210px); overflow: hidden; text-overflow: ellipsis; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.lp-xh .lp-xh__part.is-named { color: var(--app-ink); }
.lp-xh .lp-xh__part.is-failed { height: auto; padding: 6px 12px; border-radius: 12px; color: var(--app-ink); line-height: 1.4; white-space: normal; text-align: right; }

/* Dock: the tool's glass panel. Icon, title and switch; one line of help; the
   controls. */
.lp-xh__dock { position: absolute; left: 50%; bottom: 16px; z-index: 1; box-sizing: border-box; display: grid; gap: 10px; width: min(640px, calc(100% - 32px)); padding: 16px 20px 18px; border-radius: 16px; background: rgba(248, 248, 248, 0.92); box-shadow: var(--app-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateX(-50%); }
.lp-xh__top { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.lp-xh__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--app-accent); color: var(--app-panel); }
.lp-xh__icon svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-xh__title, .lp-xh__sub { display: grid; margin: 0; color: var(--app-ink); }
.lp-xh__title > span, .lp-xh__sub > span { grid-area: 1 / 1; }
.lp-xh__title { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.lp-xh__sub { font-size: 14px; font-weight: 400; line-height: 1.5; opacity: 0.8; }
.lp-xh__switch { display: flex; padding: 3px; border-radius: 999px; background: rgba(10, 10, 10, 0.05); }
.lp-xh__switch button { min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--app-muted); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.lp-xh__switch button:hover { color: var(--app-ink); }
.lp-xh__switch button[aria-pressed="true"] { background: var(--app-panel); color: var(--app-ink); box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12); }
.lp-xh__switch button:focus-visible, .lp-xh__play:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.lp-xh__controls { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 14px; }
.lp-xh__play { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: var(--app-accent); color: var(--app-panel); cursor: pointer; }
.lp-xh__play:hover { filter: brightness(0.9); }
.lp-xh__play svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: currentColor; }
.lp-xh__play:not([data-playing="1"]) .lp-xh__icon-pause, .lp-xh__play[data-playing="1"] .lp-xh__icon-play { display: none; }
.lp-xh__range, .lp-xh__joint { grid-area: 1 / 2; min-width: 0; }
.lp-xh__range { display: grid; grid-template-columns: auto minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; }
.lp-xh__range input { width: 100%; min-width: 0; margin: 0; accent-color: var(--app-accent); cursor: pointer; }
.lp-xh__pct { color: var(--app-muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; }
.lp-xh__joint { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.lp-xh__tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--app-accent-tint); color: var(--app-accent); }
.lp-xh__tile svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-xh__jtext { display: grid; min-width: 0; line-height: 1.35; }
.lp-xh__jtext b { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.lp-xh__jtext span { color: var(--app-muted); font-size: 11px; }
.lp-xh__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 4px; }
.lp-xh__bars i { width: 3px; height: 14px; border-radius: 1px; background: var(--app-accent); transform-origin: 50% 100%; animation: lp-xh-bar 0.8s ease-in-out infinite alternate paused; }
.lp-xh__bars i:nth-child(2) { animation-delay: -0.5s; }
.lp-xh__bars i:nth-child(3) { animation-delay: -0.25s; }
.lp-xh__dock[data-run="1"] .lp-xh__bars i { animation-play-state: running; }
@keyframes lp-xh-bar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
/* Swapped labels share a cell; only the current one shows. */
.lp-xh__show-explode, .lp-xh__show-animate, .lp-xh__show-run, .lp-xh__show-paused { visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.lp-xh__dock[data-view="explode"] .lp-xh__show-explode,
.lp-xh__dock[data-view="animate"] .lp-xh__show-animate,
.lp-xh__dock[data-view="animate"][data-run="1"] .lp-xh__show-run,
.lp-xh__dock[data-view="animate"]:not([data-run="1"]) .lp-xh__show-paused { visibility: visible; opacity: 1; transition: opacity 0.25s ease, visibility 0s; }
@media (max-width: 960px) {
  .lp-xh__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lp-xh__visual { --xh-top: 50px; --xh-bottom: 177px; height: 600px; }
  .lp-xh__chip, .lp-xh .lp-xh__part { top: 12px; }
  .lp-xh__chip { left: 12px; }
  .lp-xh .lp-xh__part { right: 12px; max-width: calc(100% - 190px); }
  /* If the 3D fails, its message takes the whole top row in place of the chip. */
  .lp-xh .lp-xh__part.is-failed { left: 12px; max-width: none; text-align: left; }
  .lp-xh__visual.is-failed .lp-xh__chip { display: none; }
  .lp-xh__dock { left: 10px; bottom: 10px; width: calc(100% - 20px); gap: 10px; padding: 12px 14px 14px; transform: none; }
  .lp-xh__top { grid-template-columns: minmax(0, 1fr); }
  .lp-xh__icon, .lp-xh__title { display: none; }
  .lp-xh__switch { display: grid; grid-template-columns: 1fr 1fr; }
  .lp-xh__switch button { min-height: 32px; }
  .lp-xh__sub { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-xh__poster, .lp-xh__switch button, .lp-xh__show-explode, .lp-xh__show-animate, .lp-xh__show-run, .lp-xh__show-paused { transition: none; }
}
@media (max-width: 900px) {
  .lp-xh__inner { grid-template-columns: minmax(0, 1fr); }
  .lp-ch__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-ch__wall { min-height: 440px; }
}
@media (max-width: 480px) {
  .lp-ch__wall { gap: 8px; padding: 0 8px; }
  .lp-ch__track { gap: 8px; }
  a.lp-ch__tile:not(#tw-noop) { padding: 6px 6px 10px; border-radius: 12px; }
  .lp-ch__tile img { margin-bottom: 6px; border-radius: 8px; }
  .lp-ch__tname { padding: 0 2px; font-size: 12.5px; }
  .lp-ch__tkind { padding: 0 2px; font-size: 11.5px; }
  @keyframes lp-ch-up { to { transform: translateY(calc(-50% - 4px)); } }
  @keyframes lp-ch-down { from { transform: translateY(calc(-50% - 4px)); } to { transform: translateY(0); } }
}
@media (max-width: 560px) {
}
@media (prefers-reduced-motion: reduce) {
  a.lp-ch__feature:not(#tw-noop):hover { transform: none; }
  .lp-ch__wall.is-moving .lp-ch__track { animation: none; }
}

/* ------------------------------------------------------------ Create: sources → outputs */
/* The TwinWorks app, simplified. Sources and outputs are the app's list rows
   on its page grey; in the middle sits the procedure editor: a 3D view on the
   studio backdrop with the Steps card floating over it as a glass card. It
   stands for product UI, so it stays light in both themes. While it plays only
   opacity, colour and transforms change, never size. The markup holds the
   finished state; source-flow.js arms the loop. */
.lp-flow { position: relative; box-sizing: border-box; width: 100%; justify-self: stretch; margin-top: 8px; }
.lp-flow__panel { position: relative; display: grid; grid-template-columns: minmax(0, 228px) minmax(0, 1fr) minmax(0, 236px); gap: 48px; align-items: center; padding: 40px; border-radius: 20px; background: var(--app-page); color: var(--app-ink); }
.lp-flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
.lp-flow__wire { fill: none; stroke: var(--app-muted); stroke-opacity: 0.26; stroke-width: 1; }
.lp-flow__dot { opacity: 0; }
.lp-flow__dot circle { fill: var(--app-accent); }
.lp-flow__dot circle:first-child { opacity: 0.14; }
.lp-flow__col { position: relative; z-index: 1; display: grid; gap: 8px; min-width: 0; }
.lp-flow__label { margin: 0; padding: 0 12px; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.025em; text-transform: uppercase; color: var(--app-muted); }

/* App list rows: one white panel, hairlines inset past the icon. */
.lp-io { display: grid; margin: 0; padding: 0; overflow: hidden; border-radius: 16px; background: var(--app-panel); list-style: none; }
.lp-io__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 10px 12px; transition: background-color 0.7s ease; }
.lp-io__item::marker { content: none; }
.lp-io__item + .lp-io__item::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--app-line); opacity: 0.7; }
.lp-io__item.is-read { background: var(--app-accent-tint); transition-duration: 0.25s; }
.lp-io__icon { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 8px; background: var(--app-fill); color: var(--app-muted); }
.lp-io__icon img { width: 15px; height: auto; }
.lp-io__icon--shot img { width: 100%; height: 100%; object-fit: cover; }
.lp-io__icon--model img { box-sizing: border-box; width: 100%; height: 100%; padding: 2px; object-fit: contain; }
.lp-io__icon svg { width: 16px; height: 16px; fill: currentColor; }
.lp-io__stroke { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.lp-io__text { display: grid; gap: 2px; min-width: 0; }
.lp-io__text strong { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -0.006em; text-overflow: ellipsis; white-space: nowrap; color: var(--app-ink); }
.lp-io__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--app-muted); }
.lp-io__sub > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status, the app's way: a 6px dot and a grey label. A .lp-swap stacks every
   state in one cell and shows one, so a change never moves anything. */
.lp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--app-muted); white-space: nowrap; }
.lp-status > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--app-muted); opacity: 0.5; }
.lp-status--wait > i { background: var(--app-wait); opacity: 1; }
.lp-status--ok > i { background: var(--app-ok); opacity: 1; }
.lp-swap { display: grid; }
.lp-swap > .lp-status { grid-area: 1 / 1; opacity: 0; transition: opacity 0.2s ease; }
.lp-swap[data-state="draft"] > .lp-status--draft, .lp-swap[data-state="drafting"] > .lp-status--busy, .lp-swap[data-state="review"] > .lp-status--wait, .lp-swap[data-state="approved"] > .lp-status--ok,
.lp-out:not(.is-published) .lp-status--draft, .lp-out.is-published .lp-status--ok { opacity: 1; transition: opacity 0.3s ease 0.2s; }
.lp-out__state { flex: none; justify-items: end; }

/* The procedure editor: a window whose body is the 3D view. */
.lp-flow__col--core { container: lp-core / inline-size; }
.lp-ws { display: grid; grid-template-rows: 44px minmax(0, 1fr); height: 420px; overflow: hidden; border-radius: 16px; background: var(--app-panel); box-shadow: var(--app-shadow); color: var(--app-ink); }
.lp-ws__bar { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--app-line); color: var(--app-ink); font-size: 13.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.lp-ws__bar img { flex: none; width: 16px; height: auto; }
.lp-ws__bar span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lp-ws__body { position: relative; overflow: hidden; background: var(--app-studio); }
.lp-ws__stage { position: absolute; top: 0; right: 0; bottom: 0; left: 268px; container-type: size; }
.lp-ws__frame { position: absolute; left: 50%; top: 50%; width: 100%; width: min(100cqw, 124cqh); aspect-ratio: 1100 / 850; transform: translate(-50%, -48%); }
/* The camera follows the selected step: scale, then a shift that brings the
   part to the centre (translate is in % of the render). */
.lp-ws__cam { position: absolute; inset: 0; transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1); }
.lp-ws__cam::before { content: ""; position: absolute; left: 6%; right: 4%; top: 66%; height: 30%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); transform: rotate(-9deg); }
.lp-ws__cam img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.7s ease; }
.lp-ws__cam[data-view="0"] img[data-v="0"], .lp-ws__cam[data-view="1"] img[data-v="1"], .lp-ws__cam[data-view="2"] img[data-v="1"],
.lp-ws__cam[data-view="3"] img[data-v="3"], .lp-ws__cam[data-view="4"] img[data-v="4"] { opacity: 1; }
.lp-ws__cam[data-view="1"] { transform: scale(1.12) translate(-2%, 5%); }
.lp-ws__cam[data-view="2"] { transform: scale(1.95) translate(-4.5%, 2.5%); }
.lp-ws__cam[data-view="3"] { transform: scale(1.04) translate(-1%, 3%); }

/* The Steps card, glass over the 3D view as in the editor. */
.lp-ws__card { position: absolute; top: 12px; left: 12px; bottom: 12px; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 256px; box-sizing: border-box; border-radius: 16px; background: var(--app-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--app-shadow); }
.lp-ws__head { display: flex; justify-content: space-between; margin: 0; padding: 14px 16px 8px; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.025em; text-transform: uppercase; color: var(--app-muted); }
.lp-ws__count { font-variant-numeric: tabular-nums; }
.lp-ws__steps { display: grid; align-content: start; gap: 2px; margin: 0; padding: 0 8px; list-style: none; }
.lp-ws__steps li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; height: 44px; box-sizing: border-box; padding: 0 8px 0 4px; border-radius: 10px; transition: background-color 0.35s ease; }
.lp-ws__steps li::marker { content: none; }
.lp-ws__steps b { font-size: 12px; font-weight: 500; text-align: center; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.lp-ws__title { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 17px; letter-spacing: -0.006em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lp-ws__steps b, .lp-ws__title { transition: opacity 0.45s ease, transform 0.45s ease, color 0.35s ease; }
.lp-ws__steps li.is-selected { background: var(--app-accent-tint); }
.lp-ws__steps li.is-selected b, .lp-ws__steps li.is-selected .lp-ws__title { color: var(--app-accent); }
/* Until a step is drafted its row shows the app's pulsing skeleton bars. */
.lp-ws__skel { position: absolute; inset: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 8px 0 4px; opacity: 0; transition: opacity 0.45s ease; }
.lp-ws__skel::before, .lp-ws__skel::after { content: ""; height: 10px; border-radius: 999px; background: var(--app-line); will-change: opacity; }
.lp-ws__skel::before { justify-self: center; width: 10px; }
.lp-ws__skel::after { width: 78%; }
.lp-ws__steps li:nth-child(2) .lp-ws__skel::after { width: 58%; }
.lp-ws__steps li:nth-child(3) .lp-ws__skel::after { width: 68%; }
.lp-ws__steps li:not(.is-drafted) .lp-ws__skel { opacity: 1; }
.lp-ws__steps li:not(.is-drafted) b, .lp-ws__steps li:not(.is-drafted) .lp-ws__title { opacity: 0; transform: translateY(4px); }
.lp-flow.is-running .lp-ws__steps li:not(.is-drafted) .lp-ws__skel::before, .lp-flow.is-running .lp-ws__steps li:not(.is-drafted) .lp-ws__skel::after { animation: lp-flow-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes lp-flow-pulse { 50% { opacity: 0.45; } }
.lp-ws__status { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--app-line); }
/* While drafting, the assistant (black, the app's only black) works: its
   wings beat as in the app's loader. */
.lp-status > .lp-ws__ai { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--app-ink); opacity: 1; perspective: 24px; }
.lp-ws__ai::before, .lp-ws__ai::after { content: ""; position: absolute; top: 4.6px; width: 5px; height: 7px; background: url("assets/Images/twinworks-assistant.svg") no-repeat 0 0 / 10px 7px; }
.lp-ws__ai::before { left: 3px; transform-origin: 100% 50%; }
.lp-ws__ai::after { left: 8px; background-position: -5px 0; transform-origin: 0 50%; }
.lp-flow.is-running .lp-swap[data-state="drafting"] .lp-ws__ai::before { animation: lp-flow-wing 1.8s ease-in-out infinite; }
.lp-flow.is-running .lp-swap[data-state="drafting"] .lp-ws__ai::after { animation: lp-flow-wing 1.8s ease-in-out infinite; --lp-wing: -1; }
@keyframes lp-flow-wing { 0%, 34%, 68%, 100% { transform: rotateY(0deg); } 17%, 51% { transform: rotateY(calc(var(--lp-wing, 1) * 58deg)); } }

.lp-flow.is-instant *, .lp-flow.is-instant *::before, .lp-flow.is-instant *::after { transition: none !important; }

.lp-flow__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 18px; }
.lp-flow__foot a { font-weight: 500; }
/* The same glass pause button as the assistant example, in the panel's corner. */
.lp-flow__pause { position: absolute; z-index: 3; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--app-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--app-shadow); color: var(--app-ink); cursor: pointer; opacity: 0.85; transition: opacity 0.2s ease; }
.lp-flow__pause[hidden] { display: none; }
.lp-flow__pause:hover, .lp-flow__pause:focus-visible { opacity: 1; }
.lp-flow__pause:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.lp-flow__pause svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.lp-flow__pause .lp-flow__icon-play, .lp-flow.is-paused .lp-flow__pause .lp-flow__icon-pause { display: none; }
.lp-flow.is-paused .lp-flow__pause .lp-flow__icon-play { display: block; }
@media (max-width: 860px) { .lp-flow__pause { top: 10px; right: 10px; width: 32px; height: 32px; } }

@media (max-width: 1379px) {
  .lp-flow__panel { gap: 40px; padding: 28px; }
}
/* Stacked: sources, the editor, outputs, with one short connector between. */
@media (max-width: 1279px) {
  .lp-flow__panel { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 24px; }
  .lp-flow__col--in .lp-io, .lp-flow__col--out .lp-io { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-io__item:nth-child(2)::before { display: none; }
  .lp-ws { height: 440px; }
}
@media (max-width: 640px) {
  .lp-flow__panel { gap: 32px; padding: 16px 12px; }
  .lp-flow__col--in .lp-io, .lp-flow__col--out .lp-io { grid-template-columns: minmax(0, 1fr); }
  .lp-io__item:nth-child(2)::before { display: block; }
}
/* A narrow editor takes the app's phone layout: the 3D view on top and the
   Steps card as a sheet along the bottom. */
@container lp-core (max-width: 519px) {
  .lp-ws { height: 500px; }
  .lp-ws__stage { left: 0; bottom: 236px; }
  .lp-ws__frame { width: min(100cqw, 130cqh); transform: translate(-50%, -46%); }
  .lp-ws__card { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; height: 220px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .lp-ws { height: 500px; }
    .lp-ws__stage { left: 0; bottom: 236px; }
    .lp-ws__frame { width: 90%; transform: translate(-50%, -46%); }
    .lp-ws__card { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; height: 220px; }
  }
}

/* ------------------------------------------------------------ The platform: one source of technical truth */
/* The original scroll story (every source, one TwinWorks source of truth,
   every output), drawn straight on the page: white app tiles, the CP-200
   model at the centre, and the assistant's thinking as the app's glass chips
   beside it. platform-story.js draws the lines (blue, drawn as you scroll,
   then kept); without it, CSS rails stand in.
   Phones and tablets: each tier under its step, on a left spine. 1024px (and
   wide screens without scripts): each tier beside its step. 1200px: one
   canvas beside the steps, sources staggered in an arch above the model,
   outputs beside and below it; wide, tall screens with motion pin it and the
   scroll scrubs it. Only transforms, opacity and stroke offsets change while
   scrolling; no size ever does. The markup is the finished state. */
.lp-ps { --ps-line: var(--accent); padding: clamp(64px, 8vw, 112px) max(16px, clamp(24px, 6vw, 64px)); background: var(--paper); }
.lp-ps__inner { max-width: 1280px; margin: 0 auto; }
.lp-ps__head { max-width: 820px; }
.lp-ps__lead { margin: 20px 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }

/* Stacked: the frame and the stage dissolve, so steps and tiers interleave,
   each step's text before its tier. */
.lp-ps__story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(36px, 5vw, 64px); }
.lp-ps__steps, .lp-ps__frame, .lp-ps__stage { display: contents; }
.lp-ps__step[data-step="1"] { grid-row: 1; }
.lp-ps__tier--in { grid-row: 2; }
.lp-ps__step[data-step="2"] { grid-row: 3; }
.lp-ps__tier--hub { grid-row: 4; }
.lp-ps__step[data-step="3"] { grid-row: 5; }
.lp-ps__tier--out { grid-row: 6; }
.lp-ps__step:not([data-step="1"]) { margin-top: 28px; }

/* Steps: the number (outside the h3, so the heading is only its words), the
   h3, one sentence, one link. Their wrapper only matters where the story pins
   (it stays beside the canvas there); elsewhere it lays out as if absent. */
.lp-ps__step { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: center; align-items: center; column-gap: 12px; }
.lp-ps__copy { display: contents; }
.lp-ps__copy > * { grid-column: 2; }
.lp-ps__step h3 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; transition: color 0.3s ease; }
.lp-ps__copy > .lp-ps__n { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-fill); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.lp-ps__step p { margin: 10px 0 0; max-width: 40ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; transition: color 0.3s ease; }
.lp-ps__step a:not(#tw-noop) { justify-self: start; margin: 12px 0 0; font-weight: 500; }

/* A tier, straight on the page: no panel, just room for its lines. */
.lp-ps__tier { --ps-route: side; position: relative; box-sizing: border-box; min-width: 0; padding: 8px 0 8px 32px; color: var(--ink); font-size: 14px; line-height: 1.4; text-align: left; }
.lp-ps__tier *, .lp-ps__tier *::before, .lp-ps__tier *::after { box-sizing: border-box; }
.lp-ps__tier--in { padding-bottom: 80px; }
.lp-ps__tier--out { padding-top: 80px; }

/* The lines: blue, one weight. */
.lp-ps__wires { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.lp-ps__wires path { fill: none; stroke: var(--ps-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-ps__beam { opacity: 0; }
.lp-ps__stage > .lp-ps__wires { display: none; }

/* Without the script, CSS rails stand in for the lines: a spine down the
   left, each tile joining it with a rounded elbow, a rounded turn at each
   end into the TwinWorks mark. */
.lp-ps__nodes::before, .lp-ps__nodes::after, .lp-ps__node::before { position: absolute; border: 0 solid var(--ps-line); pointer-events: none; }
.lp-ps:not(.is-wired) .lp-ps__tier--in .lp-ps__nodes::before { content: ""; top: 28px; bottom: -16px; left: -18px; width: calc(50% - 5.75px); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 8px; }
.lp-ps:not(.is-wired) .lp-ps__tier--in .lp-ps__nodes::after { content: ""; top: calc(100% + 14.5px); left: calc(50% - 24.75px); width: 9.5px; height: 26px; border-width: 1.5px 1.5px 0 0; border-top-right-radius: 8px; }
.lp-ps:not(.is-wired) .lp-ps__tier--out .lp-ps__nodes::before { content: ""; top: -16px; bottom: 28px; left: -18px; width: calc(50% - 5.75px); border-width: 1.5px 0 0 1.5px; border-top-left-radius: 8px; }
.lp-ps:not(.is-wired) .lp-ps__tier--out .lp-ps__nodes::after { content: ""; bottom: calc(100% + 14.5px); left: calc(50% - 24.75px); width: 9.5px; height: 26px; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 8px; }
.lp-ps:not(.is-wired) .lp-ps__tier--in .lp-ps__node::before { content: ""; top: calc(50% - 0.75px); left: -18px; width: 18px; height: 9px; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 8px; }
.lp-ps:not(.is-wired) .lp-ps__tier--out .lp-ps__node::before { content: ""; bottom: calc(50% - 0.75px); left: -18px; width: 18px; height: 9px; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 8px; }

/* Tiles: white, rounded, the app's soft shadow, a 1.5px line icon or the
   real file icons. Names in ink, details in grey. */
.lp-ps__nodes { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lp-ps__node { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.lp-ps__node::marker { content: none; }
.lp-ps__tile { position: relative; display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--app-panel); box-shadow: var(--app-shadow); color: var(--app-ink); color-scheme: light; }
.lp-ps__tile svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-ps__tile img { display: block; width: auto; height: 22px; }
/* Manuals: the PDF in front of the Word file. */
.lp-ps__tile--files img { position: absolute; top: 50%; left: 50%; height: 19px; }
.lp-ps__tile--files img:first-child { transform: translate(-28%, -64%); }
.lp-ps__tile--files img:last-child { transform: translate(-74%, -38%); }
/* The assistant: the app's black mark. */
.lp-ps__tile--ai { background: var(--app-ink); }
.lp-ps__tile--ai img { width: 21px; height: auto; }
.lp-ps__label { display: grid; gap: 1px; min-width: 0; }
.lp-ps__label strong { font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -0.006em; color: var(--ink); }
.lp-ps__label > span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.lp-ps__label > .lp-status { justify-self: start; margin-top: 4px; color: var(--ink-3); }
/* STEP is in beta: the app's amber, as a small tag. */
.lp-ps__nw { white-space: nowrap; }
.lp-ps__beta { display: inline-block; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--app-wait) 16%, transparent); color: color-mix(in srgb, var(--app-wait) 52%, var(--ink)); font-size: 10.5px; font-weight: 500; line-height: 14px; vertical-align: 1px; }
/* Phones: one list, every tile on the left, where the line runs. */
.lp-ps__tier--in .lp-ps__node { flex-direction: row-reverse; justify-content: flex-end; }
/* Where a stacked tier's lines meet: the TwinWorks mark. */
.lp-ps__end, .lp-ps__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--app-panel); box-shadow: var(--app-shadow); }
.lp-ps__end { position: absolute; left: 50%; margin-left: -16px; }
.lp-ps__tier--in .lp-ps__end { bottom: 24px; }
.lp-ps__tier--out .lp-ps__end { top: 24px; }
.lp-ps__end img, .lp-ps__mark img { display: block; width: 16px; height: auto; }

/* The hub: the CP-200 model, read the way an engineer reads it. As the
   assistant works, what it understands is drawn on the render in the app's
   selection blue, all measured from the CAD in the render's own camera
   (tools/build-pump-analysis.mjs, tools/capture-platform-pump.mjs): the
   visible edges and the overall length, the shaft's axis and its turn with
   the rotating train seen through the casing, the coupling guard, its
   fasteners (the hidden one dashed), the motor, and the guard's lift
   direction. Beside it, the assistant's thinking as one-line glass chips,
   then the one source the expert approves. The finished state shows it all. */
.lp-ps__tier--hub { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 28px 0; }
.lp-ps__mark { position: relative; z-index: 1; }
/* The render's top fifth is empty: the model tucks up under the mark. */
.lp-ps__view { position: relative; display: block; width: min(100%, 400px); margin: calc(min(100%, 400px) * -0.13) 0 6px; }
.lp-ps__model { position: relative; display: block; width: 100%; aspect-ratio: 1100 / 850; }
/* A soft floor shadow, as in the app's studio. */
.lp-ps__model::before { content: ""; position: absolute; left: 8%; right: 6%; top: 68%; height: 26%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); transform: rotate(-9deg); }
.lp-ps__model img, .lp-ps__scan, .lp-ps__scan > span, .lp-ps__ov { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The edges are revealed by a scan: a window sweeping across, the drawing
   held still inside it (both by transform), led by a thin bright line. */
.lp-ps__scan { overflow: hidden; }
.lp-ps__scan::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: var(--app-select); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--app-select) 35%, transparent); opacity: var(--ps-beam, 0); }
.lp-ps__ov-edges { opacity: 0.5; }
.lp-ps__ov { overflow: visible; fill: none; stroke: var(--app-select); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-ps__ov [pathLength] { stroke-dasharray: 1 1; }
.lp-ps__ov mask path { stroke: #fff; stroke-width: 24; }
.lp-ps__ov-axis path { stroke-dasharray: 28 10 6 10; }
.lp-ps__ov-bolts circle { stroke-width: 4; }
.lp-ps__ov-holes path { stroke-width: 3; }
.lp-ps__ov-holes .lp-ps__ov-pcd, .lp-ps__ov-holes .lp-ps__ov-centre { stroke-width: 2.5; }
.lp-ps__ov-holes .lp-ps__ov-centre { stroke-dasharray: 28 10 6 10; }
.lp-ps__ov-box path { stroke-width: 3.5; }
.lp-ps__ov-count text { font-size: 34px; font-weight: 500; }
/* The live view: the real assembly in three.js (platform-pump.js), over the
   poster it replaces, under the drawing. Moving parts carry their own lines. */
.lp-ps__live { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lp-ps__model.is-live > img:first-child, .lp-ps__model.is-live .lp-ps__ov-guard, .lp-ps__model.is-live .lp-ps__ov-train, .lp-ps__model.is-live .lp-ps__ov-box { visibility: hidden; }
.lp-ps__ov-bolts .is-hidden { stroke-dasharray: 0.07 0.06; }
.lp-ps__ov-lift path:first-child { stroke-dasharray: 12 10; }
.lp-ps__ov text { fill: var(--app-select); stroke: var(--paper); stroke-width: 10; paint-order: stroke; font-size: 38px; font-weight: 600; letter-spacing: 0.01em; text-anchor: middle; font-variant-numeric: tabular-nums; }
/* The assistant's thinking: one line each, a spinner that turns into a check. */
.lp-ps__chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; width: min(100%, 270px); height: 34px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--app-glass); box-shadow: var(--app-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--app-ink); font-size: 13px; line-height: 18px; white-space: nowrap; color-scheme: light; }
.lp-ps__chip > i { display: grid; flex: none; place-items: center; width: 14px; height: 14px; }
.lp-ps__chip > .lp-ps__ok { margin-left: -22px; }
.lp-ps__chip > i svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-ps__spin { color: var(--app-muted); opacity: 0; }
.lp-ps__ok { color: var(--app-ok); }
.lp-ps__spin svg { animation: lp-au-spin 1s linear infinite paused; }
.lp-ps.is-near .lp-ps__spin svg { animation-play-state: running; }
/* The last chip: the assistant's own mark, then the expert's approval. */
.lp-ps__chip--hub { gap: 9px; height: 38px; padding: 0 16px 0 11px; font-size: 14px; font-weight: 500; }
.lp-ps__chip > .lp-ws__ai { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--app-ink); perspective: 24px; }
.lp-ps.is-near.is-linking .lp-ps__chip .lp-ws__ai::before { animation: lp-flow-wing 1.8s ease-in-out infinite; }
.lp-ps.is-near.is-linking .lp-ps__chip .lp-ws__ai::after { animation: lp-flow-wing 1.8s ease-in-out infinite; --lp-wing: -1; }
.lp-ps__state { display: grid; justify-items: start; }
.lp-ps__state > * { grid-area: 1 / 1; }
.lp-ps__state > .lp-status { font-size: 13px; font-weight: 400; line-height: 18px; }
.lp-ps__state > .lp-status--wait { opacity: 0; }
/* Stacked, the line passes through the hub into the mark and on. */
.lp-ps__tier--hub::before, .lp-ps__tier--hub::after { content: ""; position: absolute; left: 50%; width: 1.5px; margin-left: -0.75px; background: var(--ps-line); }
.lp-ps__tier--hub::before { top: 0; height: 30px; }
.lp-ps__tier--hub::after { bottom: 0; height: 28px; }

/* The CTA row closes the section, centred, without the old hairline. */
.lp-ps .figures__outcome { margin-top: clamp(40px, 5vw, 64px); padding-top: 0; border-top: 0; align-items: center; }

/* Room for the chips in two columns under the model. */
@media (min-width: 480px) {
  .lp-ps__tier--hub { grid-template-columns: repeat(2, max-content); justify-content: center; gap: 8px 10px; }
  .lp-ps__chip { width: auto; }
  .lp-ps__mark, .lp-ps__view, .lp-ps__chip--hub { grid-column: 1 / -1; }
  .lp-ps__chip:nth-child(odd):not(.lp-ps__chip--hub) { justify-self: end; }
  .lp-ps__chip:nth-child(even) { justify-self: start; }
  .lp-ps__chip--hub { justify-self: center; margin-top: 4px; }
}

/* 1024px, and wide screens without scripts: each tier beside its own step. */
@media (min-width: 1024px) {
  .lp-ps__story { grid-template-columns: minmax(0, 296px) minmax(0, 1fr); gap: 48px 36px; align-items: center; }
  .lp-ps__step[data-step] { grid-column: 1; }
  .lp-ps__tier { grid-column: 2; }
  .lp-ps__step[data-step="1"], .lp-ps__tier--in { grid-row: 1; }
  .lp-ps__step[data-step="2"], .lp-ps__tier--hub { grid-row: 2; }
  .lp-ps__step[data-step="3"], .lp-ps__tier--out { grid-row: 3; }
  .lp-ps__step:not([data-step="1"]) { margin-top: 0; }
}

/* Wide screens: one canvas beside the steps. The sources float in a loose
   cloud above the model and the outputs in another below it (each placed by
   --x, a share of the canvas width, and --y, a drop in pixels scaled by
   --ps-spread), joined to the model by orthogonal traces
   (platform-story.js). The model sits on a 30-column grid with three chips
   either side and the approved source under it. */
@media (min-width: 1200px) and (scripting: enabled) {
  .lp-ps__story { grid-template-columns: minmax(0, clamp(296px, 21vw, 320px)) minmax(0, 1fr); gap: 0 clamp(40px, 4vw, 64px); }
  .lp-ps__steps { display: grid; gap: 48px; grid-column: 1; grid-row: 1; }
  .lp-ps__step[data-step="1"], .lp-ps__step[data-step="2"], .lp-ps__step[data-step="3"] { grid-row: auto; }
  .lp-ps__frame { position: relative; display: block; grid-column: 2; grid-row: 1; container-type: inline-size; }
  .lp-ps__stage { --ps-spread: 0.8; --ps-node: 150px; --ps-model: 9 / span 14; --ps-left: 1 / span 8; --ps-right: 23 / span 8; position: relative; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); grid-template-rows: auto 54px auto auto auto auto auto 58px auto; padding: 24px 12px; transform-origin: 0 0; }
  .lp-ps__tier, .lp-ps__nodes { display: contents; }
  .lp-ps__end, .lp-ps__tier > .lp-ps__wires { display: none; }
  /* The lines run under the tiles, labels and chips. */
  .lp-ps__stage > .lp-ps__wires { display: block; z-index: 1; }
  .lp-ps__view { z-index: 0; }
  .lp-ps__chip, .lp-ps__mark, .lp-ps__tier .lp-ps__node { z-index: 2; }
  .lp-ps__tier--hub::before, .lp-ps__tier--hub::after, .lp-ps__nodes::before, .lp-ps__nodes::after, .lp-ps .lp-ps__node::before { content: none; }

  .lp-ps__tier .lp-ps__node:nth-child(n) { grid-column: 1 / -1; justify-self: start; align-self: start; flex-direction: column; justify-content: flex-start; align-items: center; gap: 10px; width: var(--ps-node); margin: calc(var(--y) * var(--ps-spread)) 0 0 calc(var(--x) - var(--ps-node) / 2); text-align: center; }
  .lp-ps__tile { width: 56px; height: 56px; border-radius: 15px; }
  .lp-ps__tile svg { width: 25px; height: 25px; }
  .lp-ps__tile--files img { height: 26px; }
  .lp-ps__tile--ai img { width: 28px; }
  .lp-ps__label { justify-items: center; width: fit-content; max-width: 122px; }
  .lp-ps__label strong { font-size: 15px; line-height: 20px; text-wrap: balance; }
  .lp-ps__label > span { text-wrap: balance; }
  .lp-ps__label > .lp-status { justify-self: center; }
  /* The outputs show their tiles and names only. */
  .lp-ps__tier--out .lp-ps__label > span { display: none; }

  /* Sources: row 1, a loose cloud. */
  .lp-ps__tier--in .lp-ps__node { grid-row: 1; }
  .lp-ps__tier--in .lp-ps__node:nth-child(2) { --x: 8.5%; --y: 58px; }
  .lp-ps__tier--in .lp-ps__node:nth-child(3) { --x: 25%; --y: 4px; }
  .lp-ps__tier--in .lp-ps__node:nth-child(1) { --x: 41.5%; --y: 86px; }
  .lp-ps__tier--in .lp-ps__node:nth-child(4) { --x: 58.5%; --y: 18px; }
  .lp-ps__tier--in .lp-ps__node:nth-child(6) { --x: 75%; --y: 78px; }
  .lp-ps__tier--in .lp-ps__node:nth-child(5) { --x: 91.5%; --y: 10px; }

  /* The hub: the mark (row 3) where the sources' curves arrive, the model
     (rows 4-6) with three chips either side, the approved source (row 7). */
  .lp-ps__tier--hub { padding: 0; }
  .lp-ps__mark { grid-row: 3; grid-column: 1 / -1; justify-self: center; width: 44px; height: 44px; }
  .lp-ps__mark img { width: 20px; }
  .lp-ps__view { grid-row: 4 / span 3; grid-column: var(--ps-model); align-self: center; width: 100%; margin: -54px 0 0; }
  .lp-ps__chip { align-self: center; }
  .lp-ps__chip:nth-child(odd) { grid-column: var(--ps-left); justify-self: end; margin-right: 12px; }
  .lp-ps__chip:nth-child(even) { grid-column: var(--ps-right); justify-self: start; margin-left: 12px; }
  .lp-ps__chip:nth-child(3), .lp-ps__chip:nth-child(4) { grid-row: 4; }
  .lp-ps__chip:nth-child(5), .lp-ps__chip:nth-child(6) { grid-row: 5; }
  .lp-ps__chip:nth-child(7), .lp-ps__chip:nth-child(8) { grid-row: 6; }
  .lp-ps__chip--hub:nth-child(n) { grid-row: 7; grid-column: var(--ps-model); justify-self: center; margin: 10px 0 0; }

  /* Outputs: row 9, a loose cloud. */
  .lp-ps__tier--out .lp-ps__node { grid-row: 9; }
  .lp-ps__tier--out .lp-ps__node:nth-child(1) { --x: 8%; --y: 8px; }
  .lp-ps__tier--out .lp-ps__node:nth-child(2) { --x: 22%; --y: 88px; }
  .lp-ps__tier--out .lp-ps__node:nth-child(5) { --x: 36%; --y: 18px; }
  .lp-ps__tier--out .lp-ps__node:nth-child(6) { --x: 50%; --y: 98px; }
  .lp-ps__tier--out .lp-ps__node:nth-child(4) { --x: 64%; --y: 12px; }
  .lp-ps__tier--out .lp-ps__node:nth-child(3) { --x: 78%; --y: 84px; }
  .lp-ps__tier--out .lp-ps__node:nth-child(7) { --x: 92%; --y: 22px; }
}
/* 1200px to 1300px: slimmer margins give the canvas room. */
@media (min-width: 1200px) and (max-width: 1299.98px) and (scripting: enabled) {
  .lp-ps { padding-inline: 40px; }
  .lp-ps__story { column-gap: 40px; }
}
/* A narrow canvas: the model a little smaller so the chips keep their room. */
@container (max-width: 860px) {
  .lp-ps__stage { --ps-model: 10 / span 12; --ps-left: 1 / span 9; --ps-right: 22 / span 9; }
}

/* Wide, tall screens with motion: the canvas pins beside the steps and the
   scroll scrubs it (platform-story.js, same query). The steps are padded so
   the first and last are centred on the canvas where it pins and unpins;
   step 2, where the assistant works, gets six times the scroll, and its
   words stay centred beside the canvas while it plays. The canvas's top and
   bottom edges fade, so a line leaving them never ends on a hard cut. The
   step being told is in ink, the others grey with a ringed number. */
@media (min-width: 1200px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .lp-ps { --ps-frame: clamp(520px, calc(100vh - 120px), 680px); --ps-step: clamp(300px, 46vh, 400px); --ps-top: max(96px, calc(50vh - var(--ps-frame) / 2 + 40px)); }
  .lp-ps__story { align-items: start; }
  .lp-ps__steps { display: block; padding-block: calc((var(--ps-frame) - var(--ps-step)) / 2); }
  .lp-ps__step { display: block; align-content: start; height: var(--ps-step); }
  .lp-ps__step[data-step="2"] { height: calc(var(--ps-step) * 6); }
  .lp-ps__copy { position: sticky; top: calc(var(--ps-top) + (var(--ps-frame) - var(--ps-step)) / 2); display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: center; align-items: center; column-gap: 12px; height: var(--ps-step); }
  .lp-ps__frame { position: sticky; top: var(--ps-top); height: var(--ps-frame); overflow: hidden; container-type: size; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
  .lp-ps__stage { position: absolute; top: 0; left: 0; width: 100%; padding-block: 0; }
  .lp-ps__stage.is-moving { will-change: transform; }
  .lp-ps__step h3, .lp-ps__step p { color: var(--ink-3); }
  .lp-ps__step .lp-ps__n { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  .lp-ps[data-step="1"] .lp-ps__step[data-step="1"] h3, .lp-ps[data-step="2"] .lp-ps__step[data-step="2"] h3, .lp-ps[data-step="3"] .lp-ps__step[data-step="3"] h3 { color: var(--ink); }
  .lp-ps[data-step="1"] .lp-ps__step[data-step="1"] p, .lp-ps[data-step="2"] .lp-ps__step[data-step="2"] p, .lp-ps[data-step="3"] .lp-ps__step[data-step="3"] p { color: var(--ink-2); }
  .lp-ps[data-step="1"] .lp-ps__step[data-step="1"] .lp-ps__n, .lp-ps[data-step="2"] .lp-ps__step[data-step="2"] .lp-ps__n, .lp-ps[data-step="3"] .lp-ps__step[data-step="3"] .lp-ps__n { background: var(--ink); color: var(--on-fill); box-shadow: none; }
}
/* A short canvas (laptops around 1366x657): a smaller model, shallower
   steps, so each part of the story still fits at nearly full size. */
@container (max-height: 600px) {
  .lp-ps__stage { --ps-spread: 0.5; --ps-model: 10 / span 12; --ps-left: 1 / span 9; --ps-right: 22 / span 9; grid-template-rows: auto 48px auto auto auto auto auto 52px auto; }
}

/* Dark mode: the tiles, chips and model keep the app's light look; the model
   stands in a soft pool of the app's studio light. */
@media (prefers-color-scheme: dark) {
  .lp-ps__view::before { content: ""; position: absolute; inset: -6% -10%; background: var(--app-studio); opacity: 0.9; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
  .lp-ps__beta { color: var(--app-wait); }
  .lp-ps__ov text { stroke-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ps *, .lp-ps *::before, .lp-ps *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------ Authoring: one complete example on the conveyor drive */
/* One request to the assistant, shown as the app shows it: the 3D model full
   bleed on the studio backdrop and one glass assistant card on the left (on
   phones the card sits under the model). It stands for product UI, so it keeps
   the app's light look in both themes. Heights are fixed: the conversation
   scrolls inside the card and the section never changes size. */
.lp-au { --au-gap: 16px; --au-panel: 340px; --au-sheet: 0px; position: relative; isolation: isolate; height: 580px; overflow: hidden; border-radius: 20px; background: var(--app-studio); color: var(--app-ink); font-size: 14px; line-height: 1.5; text-align: left; color-scheme: light; }
.lp-au *, .lp-au *::before, .lp-au *::after { box-sizing: border-box; }
:where(.lp-au) p { margin: 0; color: var(--app-ink); }
.lp-au svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-au__stage { position: absolute; inset: 0; z-index: 0; background: var(--app-studio); }
/* The still (no WebGL, or before the model loads) sits beside the card;
   "darken" lets its flat background drop into the studio backdrop. */
.lp-au__stage > img { position: absolute; top: 0; left: calc(var(--au-panel) + var(--au-gap) * 2); width: calc(100% - var(--au-panel) - var(--au-gap) * 2); height: calc(100% - var(--au-sheet)); object-fit: cover; object-position: 30% 45%; mix-blend-mode: darken; }

.lp-au__panel { position: absolute; z-index: 1; top: var(--au-gap); bottom: var(--au-gap); left: var(--au-gap); display: flex; flex-direction: column; width: var(--au-panel); border-radius: 16px; background: var(--app-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--app-shadow); }
.lp-au__head { display: flex; flex: none; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--app-line); }
.lp-au__mark { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--app-ink); }
.lp-au__mark img { display: block; width: 24px; height: auto; }
.lp-au__who { display: grid; gap: 2px; min-width: 0; }
.lp-au__who strong { font-size: 15px; font-weight: 600; line-height: 20px; }
.lp-au__status { display: block; min-width: 0; overflow: hidden; color: var(--app-muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
.lp-au__idle, .lp-au__busy { display: flex; align-items: center; gap: 6px; }
.lp-au__idle svg { width: 14px; height: 14px; }
.lp-au__busy svg { width: 12px; height: 12px; }
.lp-au__status[data-busy] .lp-au__idle, .lp-au__status:not([data-busy]) .lp-au__busy { display: none; }

/* The conversation scrolls by script only, so a wheel over it still scrolls the page. */
.lp-au__log { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
.lp-au__thread { display: flex; flex-direction: column; gap: 16px; min-height: 100%; padding: 18px 16px 16px; transition: opacity 0.3s ease; }
.lp-au__thread.is-leaving { opacity: 0; }
.lp-au__thread > * { flex: none; margin: 0; }
.lp-au__you { align-self: flex-end; max-width: 85%; padding: 10px 16px; border-radius: 16px; background: var(--app-fill); font-size: 14px; line-height: 1.6; }
.lp-au__reply { font-size: 14px; line-height: 1.6; }
.lp-au__welcome { display: grid; justify-items: start; gap: 12px; margin-top: auto; padding-top: 24px; }
.lp-au__welcome strong { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.lp-au__welcome span:last-child { margin-top: -4px; color: var(--app-muted); font-size: 14px; }
.lp-au__spark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--app-fill); }
.lp-au__spark svg { width: 20px; height: 20px; stroke-width: 1.75; }
/* Tool rows: a 14px icon (spinner, then a green check) and a grey label. */
.lp-au__tool { display: flex; align-items: flex-start; gap: 8px; color: var(--app-muted); font-size: 13px; line-height: 18px; }
.lp-au__tool > svg { width: 14px; height: 14px; margin-top: 2px; }
.lp-au__tool.is-done > svg:first-child { color: var(--app-ok); }
.lp-au__spin { animation: lp-au-spin 1s linear infinite; }
@keyframes lp-au-spin { to { transform: rotate(360deg); } }
.lp-au__think { display: grid; gap: 12px; }
.lp-au__bars { display: grid; gap: 8px; }
.lp-au__bars i { display: block; height: 10px; border-radius: 999px; background: var(--app-line); animation: lp-au-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.lp-au__bars i:first-child { width: 80%; }
.lp-au__bars i:last-child { width: 50%; }
@keyframes lp-au-pulse { 50% { opacity: 0.5; } }
.lp-au__trace { display: grid; gap: 10px; overflow: hidden; transition: height 0.35s ease, opacity 0.25s ease; }
.lp-au-in { animation: lp-au-in 0.2s ease-out both; }
@keyframes lp-au-in { from { opacity: 0; transform: translateY(6px); } }

/* Result card: what the assistant changed, offered for review. */
.lp-au__card { overflow: hidden; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel); }
.lp-au__card-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.lp-au__tile { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--app-fill); }
.lp-au__tile svg { width: 16px; height: 16px; }
.lp-au__card-text { display: grid; gap: 2px; min-width: 0; }
.lp-au__card-text strong { font-size: 14px; font-weight: 500; line-height: 20px; }
.lp-au__dot { display: flex; align-items: center; gap: 6px; color: var(--app-muted); font-size: 12px; line-height: 16px; }
.lp-au__dot::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--app-wait); }
.lp-au__card-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--app-line); }
.lp-au__card-foot span { display: grid; place-items: center; height: 40px; font-size: 14px; font-weight: 500; }
.lp-au__card-foot span + span { border-left: 1px solid var(--app-line); color: var(--app-accent); }

/* Composer: grey send circle when empty, black with text, a stop square while the assistant works. */
.lp-au__composer { flex: none; padding: 8px 12px 12px; }
.lp-au__input { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--app-fill); color: var(--app-muted); font-size: 14px; line-height: 20px; }
.lp-au__typed { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-au__typed.is-typing { color: var(--app-ink); }
.lp-au__typed.is-typing::after { content: ""; display: inline-block; width: 1px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--app-ink); animation: lp-au-caret 1s steps(1) infinite; }
@keyframes lp-au-caret { 50% { opacity: 0; } }
.lp-au__send { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--app-line); background: color-mix(in srgb, var(--app-muted) 25%, transparent); color: var(--app-panel); }
.lp-au__send svg { width: 16px; height: 16px; }
.lp-au__send .lp-au__stop { display: none; width: 14px; height: 14px; fill: currentColor; stroke: none; }
.lp-au__send[data-state="ready"], .lp-au__send[data-state="stop"] { background: var(--app-ink); }
.lp-au__send[data-state="stop"] .lp-au__arrow { display: none; }
.lp-au__send[data-state="stop"] .lp-au__stop { display: block; }

/* Pause / play: small and quiet, for anyone who wants the loop to stop. */
.lp-au__toggle { position: absolute; z-index: 2; top: var(--au-gap); right: var(--au-gap); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--app-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--app-shadow); color: var(--app-ink); cursor: pointer; opacity: 0.85; transition: opacity 0.2s ease; }
.lp-au__toggle[hidden] { display: none; }
.lp-au__toggle:hover, .lp-au__toggle:focus-visible { opacity: 1; }
.lp-au__toggle:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.lp-au__toggle svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.lp-au__toggle .lp-au__play, .lp-au.is-paused .lp-au__toggle .lp-au__pause { display: none; }
.lp-au.is-paused .lp-au__toggle .lp-au__play { display: block; }
.lp-au.is-paused * { animation-play-state: paused !important; }

@media (max-width: 860px) {
  .lp-au { --au-gap: 12px; --au-sheet: 466px; height: 790px; }
  .lp-au__panel { top: auto; right: var(--au-gap); width: auto; height: calc(var(--au-sheet) - var(--au-gap)); }
  .lp-au__stage > img { left: 0; width: 100%; object-fit: contain; object-position: 50% 50%; }
}
@media (max-width: 480px) {
  .lp-au { --au-sheet: 500px; height: 784px; }
  .lp-au__thread { gap: 12px; padding-top: 14px; }
  .lp-au__you { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-au__spin, .lp-au__bars i, .lp-au__typed.is-typing::after, .lp-au-in { animation: none; }
  .lp-au__thread, .lp-au__trace { transition: none; }
}

.lp-au-cta { margin-top: 32px; }
/* Only the buttons remain in the outcome row: side by side, centred. */
.figures__outcome { justify-content: center; }
.figures__outcome .lp-cta-row { flex-wrap: nowrap; justify-content: center; margin: 0; }
/* On phones each pair of buttons still shares one row: the pills narrow, and a
   long label (in French, say) wraps inside its pill rather than pushing the
   second button onto a line of its own. */
@media (max-width: 600px) {
  .figures__outcome .lp-cta-row, .lp-au-cta, .team-showcase__cta .lp-cta-row, .lp-ch__head .lp-actions, .lp-close__actions { flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .figures__outcome .lp-cta-row > a, .lp-au-cta > a, .team-showcase__cta .lp-cta-row > a, .lp-ch__head .lp-actions > a, .lp-close__actions > a { flex: 0 1 auto; justify-content: center; min-width: 0; margin: 0; padding-inline: 14px; text-align: center; text-wrap: balance; }
}

/* Industry demos: every card's View demo button sits on the card's bottom line. */
.industries-section .industry-body { flex: 1; }
.industries-section .industry-cta { margin-top: auto; }

/* ------------------------------------------------------------ Keep it current: change impact */
/* Copy on the left in the site's section-head pattern. On the right, the part
   that changes, large (the CP-200, its guard turning from painted to
   stainless), and under it the documents that use it, each a thumbnail that
   takes the new guard when its update arrives, with a dot status. It stays
   light in dark mode, like the hero film. Nothing changes size while
   change-impact.js plays it. */
.lp-ci { padding: clamp(64px, 8vw, 112px) max(16px, clamp(24px, 6vw, 64px)); background: var(--paper); }
.lp-ci__inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: center; max-width: 1280px; margin: 0 auto; }
.lp-ci__lead { margin: 24px 0 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.lp-ci__more { margin: 28px 0 0; font-size: 1rem; }
.lp-ci__more a:not(#tw-noop) { font-weight: 500; text-underline-offset: 4px; }
.lp-ci__more a:not(#tw-noop):hover { text-decoration-color: var(--ink); }

.lp-ci__app { box-sizing: border-box; width: 100%; max-width: 640px; justify-self: end; margin: 0; padding: 16px; border-radius: 24px; background: var(--app-page); color: var(--app-ink); font-size: 14px; line-height: 1.4; text-align: left; }
.lp-ci__app *, .lp-ci__app *::before, .lp-ci__app *::after { box-sizing: border-box; }

/* The part: the whole CP-200 on the studio backdrop; the guard is ringed, then
   turns from painted to stainless. Its change card floats over the view. */
.lp-ci__stage { position: relative; overflow: hidden; border-radius: 16px; background: var(--app-studio); }
.lp-ci__part { position: relative; display: block; aspect-ratio: 16 / 10; }
.lp-ci__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: opacity 1.2s ease; }
.lp-ci__part .lp-ci__img { mix-blend-mode: darken; }
[data-rev="old"] .lp-ci__img--new, [data-rev="new"] .lp-ci__img--old { opacity: 0; }
.lp-ci__ring { position: absolute; left: 54.5%; top: 50%; width: 21%; height: 52%; border: 2px solid var(--app-select); border-radius: 22px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--app-select) 16%, transparent); opacity: 0; transform: translate(-50%, -50%) scale(1.08); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; }
.lp-ci__stage.is-marked .lp-ci__ring { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lp-ci__change { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--app-glass); box-shadow: var(--app-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lp-ci__text { display: grid; gap: 2px; min-width: 0; }
.lp-ci__name { color: var(--app-ink); font-size: 14px; font-weight: 500; line-height: 1.3; }
.lp-ci__change .lp-ci__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.lp-ci__detail { color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.lp-ci__nw { white-space: nowrap; }
.lp-ci__pn { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: -0.01em; white-space: nowrap; }

/* The documents that use it: a thumbnail of each, which takes the new guard
   when its update arrives, its name and its status. */
.lp-ci__head { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 10px; padding: 0 6px; color: var(--app-muted); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0.025em; text-transform: uppercase; }
.lp-ci__head span:last-child { font-variant-numeric: tabular-nums; }
.lp-ci__docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.lp-ci__doc { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 8px 8px 10px; border-radius: 14px; background: var(--app-panel); list-style: none; }
.lp-ci__doc::marker { content: none; }
.lp-ci__doc .lp-ci__text { padding: 0 2px; }
.lp-ci__doc .lp-ci__name { font-size: 13px; text-wrap: balance; }
.lp-ci__doc .lp-ci__detail { font-size: 11.5px; }
.lp-ci__doc .lp-ci__status { padding: 0 2px; }

.lp-ci__thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 9px; background: var(--app-fill); }
/* A close crop on the guard (at 54.5% 52% of the render). */
.lp-ci__thumb .lp-ci__img { object-position: 50% 51%; transform: scale(2.1) translate(-4.5%, -2%); }
/* Manual: a page with its text lines and the figure. */
.lp-ci__thumb--page { display: grid; grid-template-rows: 4px 4px minmax(0, 1fr) 4px; gap: 4px; padding: 8px 10px; border: 1px solid var(--app-line); background: var(--app-panel); }
.lp-ci__thumb--page i, .lp-ci__thumb--table i { display: block; border-radius: 2px; background: var(--app-line); }
.lp-ci__thumb--page i:nth-child(2) { width: 70%; }
.lp-ci__thumb--page i:last-child { width: 45%; justify-self: center; }
.lp-ci__fig { position: relative; display: block; overflow: hidden; border: 1px solid var(--app-line); border-radius: 4px; background: var(--app-panel); }
.lp-ci__fig .lp-ci__img { filter: grayscale(1) contrast(1.1); }
/* Parts list: ruled rows; item 01 carries the part number. */
.lp-ci__thumb--table { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: 1fr; align-items: center; column-gap: 8px; padding: 8px 10px; border: 1px solid var(--app-line); background: var(--app-panel); }
.lp-ci__thumb--table i { grid-column: 1 / -1; height: 4px; }
.lp-ci__thumb--table b { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 500; color: var(--app-muted); }
.lp-ci__thumb--table .lp-ci__pn { display: grid; justify-self: start; padding: 2px 5px; border-radius: 5px; font-size: 10.5px; transition: background-color 0.4s ease; }
.lp-ci__thumb--table .lp-ci__pn > * { grid-area: 1 / 1; transition: opacity 0.4s ease; }
[data-rev="old"] .lp-ci__new, [data-rev="new"] .lp-ci__old { opacity: 0; }
[data-rev="new"] .lp-ci__thumb--table .lp-ci__pn { background: var(--app-accent-tint); color: var(--app-accent); }
/* Work instruction: the 3D view with its step number. */
.lp-ci__thumb--3d { background: var(--app-studio); }
.lp-ci__thumb--3d .lp-ci__img { mix-blend-mode: darken; }
.lp-ci__thumb--3d b { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--app-accent); color: #fff; font-size: 10px; font-weight: 600; }
/* Training: a clip with its play button. */
.lp-ci__thumb--clip { background: var(--app-studio); }
.lp-ci__thumb--clip .lp-ci__img { mix-blend-mode: darken; }
.lp-ci__thumb--clip svg { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; padding: 7px 6px 7px 8px; border-radius: 50%; background: rgba(10, 10, 11, 0.55); fill: #fff; transform: translate(-50%, -50%); }

/* Status: a 6px dot and a 12px grey label, as in the app. Before the change
   lands, a pulsing skeleton bar holds the slot. */
.lp-ci__status { display: inline-flex; align-items: center; gap: 6px; height: 20px; color: var(--app-muted); font-size: 12px; line-height: 1; white-space: nowrap; }
.lp-ci__status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--app-wait); transition: background-color 0.3s ease; }
[data-status="approved"] > .lp-ci__status::before { background: var(--app-ok); }
[data-status="pending"] > .lp-ci__status::before { width: 56px; height: 8px; border-radius: 999px; background: var(--app-line); animation: lp-ci-pulse 1.6s ease-in-out infinite; }
/* The skeleton pulses only while the panel is on screen. */
.lp-ci:not(.is-near) [data-status="pending"] > .lp-ci__status::before { animation-play-state: paused; }
@keyframes lp-ci-pulse { 50% { opacity: 0.5; } }
/* The card being updated flashes the app's selection ring. */
.lp-ci__change::after, .lp-ci__doc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--app-select); background: color-mix(in srgb, var(--app-accent-tint) 50%, transparent); opacity: 0; pointer-events: none; }
.lp-ci__change.is-hit::after, .lp-ci__doc.is-hit::after { animation: lp-ci-hit 1.6s ease-out; }
@keyframes lp-ci-hit { 15% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 1080px) {
  .lp-ci__inner { grid-template-columns: minmax(0, 1fr); }
  .lp-ci__app { justify-self: start; max-width: 720px; }
}
/* Phones: the change card under the view, the documents in two columns. */
@media (max-width: 560px) {
  .lp-ci__app { padding: 10px; border-radius: 20px; }
  .lp-ci__docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-ci__change { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; border-radius: 0; background: var(--app-panel); box-shadow: none; }
  .lp-ci__change .lp-ci__detail { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ci__img, .lp-ci__ring, .lp-ci__status::before, .lp-ci__pn, .lp-ci__pn > * { transition: none; }
  .lp-ci__change.is-hit::after, .lp-ci__doc.is-hit::after, [data-status="pending"] > .lp-ci__status::before { animation: none; }
}

/* ------------------------------------------------------------ Closing */
/* A light, centred band like the site's other closing moments: no glow,
   no orbit, no neon. Warm off-white between the white FAQ and the ink footer. */
.lp-close { padding: clamp(88px, 10vw, 144px) max(16px, clamp(24px, 5vw, 64px)); background: var(--paper-2); text-align: center; }
.lp-close__inner { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; }
.lp-close__mark { width: 44px; height: auto; margin-bottom: 28px; }
.lp-close__lead { margin: 22px 0 0; max-width: 620px; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.lp-close__actions { justify-content: center; margin-top: 32px; }
.lp-close__micro { margin: 20px 0 0; font-size: 0.95rem; color: var(--ink-2); }
.lp-close__micro a:not(#tw-noop) { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------ Menu */
.navbar .navigation a.nav-button.lp-nav-outline { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); }
.navbar .navigation a.nav-button.lp-nav-outline:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

/* ------------------------------------------------------------ Launch pages */
.lp-main { display: block; padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
.lp-main h1 { margin: 0; font-size: clamp(2.4rem, 5.2vw, 4.25rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.lp-main h2 { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.lp-main h3 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

/* ------------------------------------------------------------ Pricing page */
.lp-p-hero { padding-block: clamp(32px, 6vw, 72px) clamp(24px, 4vw, 40px); text-align: center; }
.lp-p-hero .lp-lead { margin-inline: auto; }
.lp-plans { padding-bottom: clamp(48px, 6vw, 80px); }
.lp-plans__trial { margin: 0 auto 28px; padding: 12px 18px; max-width: 760px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); text-align: center; }
.lp-plans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.lp-plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg, 20px); background: var(--paper); scroll-margin-top: 110px; }
.lp-plan.is-featured { border: 2px solid var(--ink); padding: 27px 23px; }
.lp-main .lp-plan h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
.lp-plan__flag { position: absolute; top: -12px; left: 22px; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.lp-plan__price { margin: 0; color: var(--ink); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lp-plan__price small { font-size: 0.9rem; font-weight: 450; letter-spacing: 0; color: var(--ink-2); }
.lp-plan__for { margin: 0; min-height: 3.2em; color: var(--ink-2); }
.lp-plan > .button-primary, .lp-plan > .button-secondary { align-self: stretch; margin: 4px 0 4px; text-align: center; }
.lp-plan__credits { margin: 2px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 0.92rem; font-weight: 600; }
.lp-plan__credits b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lp-plan__plus { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--ink-3); }
.lp-plan ul { display: grid; gap: 10px; margin: 0; padding: 0; }
.lp-plan li { position: relative; padding-left: 26px; font-size: 0.95rem; line-height: 1.45; list-style: none; }
.lp-plan li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.lp-plan li.is-lead { font-weight: 600; }
.lp-plans__note { margin: 18px 0 0; max-width: 80ch; font-size: 0.85rem; color: var(--ink-3); }
.lp-credits { padding-block: clamp(32px, 5vw, 64px); background: var(--paper-2); }
.lp-packs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.lp-main .lp-packs h2 { font-size: 1.2rem; letter-spacing: -0.01em; }
.lp-packs__copy p { margin: 4px 0 0; color: var(--ink-2); font-size: 0.95rem; }
.lp-packs__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.lp-packs__list li { display: grid; gap: 2px; min-width: 140px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 14px; list-style: none; }
.lp-packs__list strong { font-size: 0.95rem; }
.lp-packs__list span { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-packs__list em { color: var(--lp-ok-text); font-size: 0.8rem; font-style: normal; font-weight: 600; }
.lp-compare { padding-block: clamp(48px, 7vw, 96px); }
.lp-compare h2 { margin-bottom: 24px !important; }
.lp-compare__scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.lp-compare__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-compare__table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.95rem; }
.lp-compare__table th, .lp-compare__table td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.lp-compare__table tbody th { font-weight: 500; text-align: left; }
.lp-compare__table thead th { padding-block: 18px; background: var(--paper); font-size: 1.05rem; font-weight: 600; vertical-align: bottom; }
.lp-compare__table thead th span { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.85rem; font-weight: 500; }
.lp-compare__table thead th:first-child, .lp-compare__table tbody th, .lp-compare__table tfoot th { position: sticky; left: 0; z-index: 2; width: 26%; background: var(--paper); text-align: left; }
.lp-compare__group th { padding-top: 22px; color: var(--ink-3); font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.14em; text-transform: uppercase; }
.lp-compare__table .is-featured { background: var(--accent-soft); }
.lp-compare__table thead th.is-featured { background: var(--accent-soft); color: var(--accent); }
.lp-compare__table tfoot td, .lp-compare__table tfoot th { border-bottom: 0; padding-block: 18px; }
.lp-compare__table tfoot a { min-block-size: 38px; padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.lp-yes, .lp-no { display: inline-block; position: relative; width: 20px; height: 20px; vertical-align: middle; }
.lp-yes::before { content: ""; position: absolute; left: 4px; top: 4px; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.lp-no::before { content: ""; position: absolute; left: 5px; top: 9px; width: 10px; height: 2px; border-radius: 1px; background: var(--line-strong); }
.lp-page .faq-inner > h2 { margin-bottom: clamp(24px, 3vw, 40px); }
@media (max-width: 1100px) { .lp-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 640px) {
  .lp-plans__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-plan__for { min-height: 0; }
  .lp-packs__list li { flex: 1; min-width: 0; }
}

/* ------------------------------------------------------------ Community pages */
.lp-c-hero { padding-block: clamp(32px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.lp-feature { padding-bottom: clamp(40px, 6vw, 80px); }
.lp-feature__card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(16px, 2vw, 24px); border-radius: var(--radius-lg, 20px); background: var(--paper-2); }
.lp-feature__media { margin: 0; min-width: 0; }
.lp-feature__media video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md, 12px); background: #dee3e8; }
.lp-feature__media figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--ink-3); }
.lp-feature__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-right: clamp(0px, 2vw, 24px); }
.lp-feature__body > p { margin: 0; color: var(--ink-2); }
.lp-feature__body .lp-actions { margin-top: 4px; }
.lp-facts { display: grid; margin: 0; }
.lp-facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.lp-facts dt { color: var(--ink-3); }
.lp-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lp-projects { padding-bottom: clamp(48px, 7vw, 96px); }
.lp-projects h2 { margin-bottom: 24px !important; }
.lp-projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-project { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg, 20px); background: var(--paper); }
.lp-project__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #dee3e8; }
.lp-project__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-project__media--contain { background: var(--paper-2); }
.lp-project__media--contain img { inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.lp-project__body { display: grid; gap: 10px; padding: 18px 20px 22px; }
.lp-project h3 { font-size: 1.15rem; }
.lp-project h3 a:not(#tw-noop) { color: var(--ink); text-decoration: none; }
.lp-project h3 a:not(#tw-noop):hover { text-decoration: underline; }
.lp-project__proc { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.lp-project__src { margin: 0; color: var(--ink-3); font-size: 0.875rem; }
a.lp-project--more:not(#tw-noop) { justify-content: center; gap: 8px; padding: 28px; border: 1.5px dashed var(--line-strong); background: transparent; color: var(--ink); text-decoration: none; }
a.lp-project--more:not(#tw-noop):hover { border-color: var(--ink); }
a.lp-project--more span:last-child { color: var(--ink-2); }
.lp-project__plus { color: var(--accent); font-size: 32px; line-height: 1; }
.lp-anatomy { padding-block: clamp(48px, 7vw, 96px); background: var(--paper-2); }
.lp-anatomy__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; padding: 0; }
.lp-anatomy__list li { padding-top: 16px; border-top: 1px solid var(--ink); list-style: none; }
.lp-anatomy__list p { margin: 8px 0 0; color: var(--ink-2); font-size: 0.95rem; }
.lp-industrial { background: var(--surface-inverse, #0a0a0b); color: var(--on-surface-inverse, #fff); }
.lp-industrial__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; padding-block: clamp(48px, 7vw, 88px); }
.lp-industrial__inner > div:first-child { max-width: 60ch; }
.lp-industrial .lp-eyebrow { color: var(--on-surface-inverse-2, #a3a3ac); }
.lp-main .lp-industrial h2 { color: inherit; }
.lp-industrial p:not(.lp-eyebrow) { margin: 14px 0 0; color: var(--on-surface-inverse-2, #a3a3ac); }
.lp-industrial .lp-actions { margin-top: 0; }
.lp-industrial .button-primary:not(#tw-noop) { background: var(--on-surface-inverse, #fff); border-color: var(--on-surface-inverse, #fff); color: var(--surface-inverse, #0a0a0b); }
.lp-industrial .button-secondary.lp-on-dark:not(#tw-noop) { border-color: rgba(255, 255, 255, 0.35); background: transparent; color: var(--on-surface-inverse, #fff); }
.lp-publish { padding-block: clamp(48px, 7vw, 96px); scroll-margin-top: 90px; }
.lp-publish__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lp-publish__copy p { margin: 14px 0 24px; color: var(--ink-2); max-width: 44ch; }
.lp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; counter-reset: lp-step; }
.lp-steps li { counter-increment: lp-step; padding: 20px; border: 1px solid var(--line); border-radius: 16px; list-style: none; }
.lp-steps li::before { content: counter(lp-step); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 14px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; }
.lp-steps p { margin: 6px 0 0; color: var(--ink-2); font-size: 0.95rem; }

/* SO-101 project page */
.lp-crumbs { padding-top: clamp(20px, 3vw, 32px); font-size: 0.9rem; }
.lp-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.lp-crumbs li { display: inline-flex; gap: 6px; color: var(--ink-3); list-style: none; }
.lp-crumbs li + li::before { content: "/"; color: var(--line-strong); }
.lp-crumbs a:not(#tw-noop) { color: var(--ink-2); }
.lp-proj-hero { padding-block: clamp(20px, 3vw, 36px) clamp(32px, 5vw, 56px); }
.lp-proj-hero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.lp-proj-hero h1 { margin-top: 14px; font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.lp-facts--card { padding: 8px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg, 20px); background: var(--paper-2); }
.lp-facts--card div:first-child { border-top: 0; }
.lp-proj { padding-bottom: clamp(48px, 7vw, 96px); }
.lp-proj__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.lp-proj__steps h2 { margin-bottom: 20px !important; }
.lp-steplist { display: grid; gap: 0; margin: 0; padding: 0; }
.lp-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); list-style: none; scroll-margin-top: 100px; }
.lp-step__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--paper); font-size: 13px; font-weight: 600; }
.lp-main .lp-step h3 { font-size: 1.05rem; line-height: 1.35; }
.lp-step p { margin: 6px 0 0; color: var(--ink-2); }
.lp-step .lp-step__parts { color: var(--ink-3); font-size: 0.875rem; }
.lp-proj__source { margin: 16px 0 0; color: var(--ink-3); font-size: 0.875rem; }
.lp-proj__viewer { position: sticky; top: 100px; display: grid; gap: 12px; }
.lp-viewer { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg, 20px); background: #dee3e8; }
.lp-viewer iframe { display: block; width: 100%; height: min(640px, 72vh); border: 0; }
.lp-viewer__caption { margin: 0; color: var(--ink-3); font-size: 0.875rem; }
.lp-embed { display: grid; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.lp-embed p { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.lp-embed strong { color: var(--ink); }
.lp-embed pre { max-width: 100%; margin: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); color: var(--ink-2); font: 12px/1.55 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.lp-embed .button-secondary { justify-self: start; min-block-size: 38px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
@media (max-width: 900px) {
  .lp-feature__card, .lp-publish__inner, .lp-proj-hero__inner, .lp-proj__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-projects__grid, .lp-anatomy__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-proj__viewer { position: static; }
}
@media (max-width: 560px) {
  .lp-projects__grid, .lp-anatomy__list, .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lp-viewer iframe { height: 520px; }
}

/* ------------------------------------------------------------ Trust page */
.lp-t-body { padding-bottom: clamp(48px, 6vw, 88px); }
.lp-t-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.lp-t-grid > div { display: grid; gap: 6px; align-content: start; padding: 20px 0; border-top: 1px solid var(--line-strong); scroll-margin-top: 100px; }
.lp-t-grid dt { font-size: 1.05rem; font-weight: 600; }
.lp-t-grid dd { margin: 0; color: var(--ink-2); }
.lp-ph { padding: 1px 4px; border-radius: 4px; background: var(--lp-warn-bg); color: var(--lp-warn-ink); font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 760px) { .lp-t-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ Explode page */
.explode-next__copy .explode-keep { margin: 4px 18px 8px 0; }
/* Longer labels (French) must not wrap inside the menu bar. */
.navbar .navigation > a { white-space: nowrap; }
/* Between the hamburger (920 px) and wide screens, the launch menu has more
   items than the sales one: tighten it so it fits in English and French. */
@media (min-width: 921px) and (max-width: 1240px) {
  .navbar .navigation { gap: 0.5rem; }
  .navbar .navigation a:not(.nav-button) { margin-left: 2px; margin-right: 2px; }
  .navbar .navigation a.nav-button { padding: 10px 14px; font-size: 15px; }
}
@media (min-width: 921px) and (max-width: 1100px) {
  .navbar .navigation a.lp-nav-outline, .navbar .navigation a[href="https://app.twinworks.com/"] { display: none; }
}
/* The trust-bar logos now declare their size (to reserve space); keep their
   rendered width proportional to the 100px height they always had. */
.supported-by-logos img { width: auto; }