/* Plain CSS asset, loaded by PlatformSurfaceStyles. No Tailwind/PostCSS directives.
   Public platform art direction. These roles belong to the marketing shell,
   not a tenant palette or Studio. Both platform brands use the same surfaces. */
/* Motion measures scroll targets against the document's positioned root. */
html:has(.platform-public) { position: relative; }
.platform-public {
  --public-canvas: 255 255 255;
  --public-panel: 245 245 247;
  --public-ink: 29 29 31;
  --public-muted: 101 101 107;
  --public-line: 218 218 222;
  --public-field-border: 134 134 139;
  --public-accent: var(--public-brand, rgb(var(--public-ink)));
  --public-accent-wash: color-mix(in srgb, var(--public-accent) 7%, rgb(var(--public-canvas)));
  /* Warm fills are decorative and do not replace text or action color roles. */
  --public-warm: var(--public-brand-secondary, rgb(var(--public-panel)));
  --public-warm-wash: color-mix(in srgb, var(--public-warm) 4%, rgb(var(--public-canvas)));
  --public-warm-tint: color-mix(in srgb, var(--public-warm) 12%, rgb(var(--public-canvas)));
  --public-action: var(--public-accent);
  --public-on-action: 255 255 255;
  --public-error: 179 38 30;
  --public-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --public-motion-fast: 160ms;
  --public-motion-settle: 260ms;
  color-scheme: light;
  background: rgb(var(--public-canvas));
  color: rgb(var(--public-ink));
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", var(--font-inter), sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Suppress double-tap zoom without interfering with scrolling or pinch gestures. */
  touch-action: manipulation;
  /* Perspective may extend past its layout box without creating a horizontal page scroll. */
  overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  .platform-public {
    --public-canvas: 22 22 24;
    --public-panel: 31 31 34;
    --public-ink: 245 245 247;
    --public-muted: 174 174 182;
    --public-line: 61 61 66;
    --public-field-border: 126 126 135;
    --public-accent: color-mix(in srgb, var(--public-brand, rgb(var(--public-ink))) 45%, white);
    --public-on-action: 29 29 31;
    --public-error: 255 151 145;
    color-scheme: dark;
  }
}
.platform-public :is(h1, h2, h3) { font-family: inherit; }
/* Public controls indicate focus with their surface, never an outline or ring. */
.platform-public :is(:focus, :focus-visible, [data-focus-visible="true"]) {
  outline: none;
  box-shadow: none;
}
.platform-public :is(a, button, input, textarea, select, summary, [tabindex], [contenteditable]):is(:focus-visible, [data-focus-visible="true"]) {
  background-color: var(--public-focus-fill, var(--public-accent-wash));
}
.platform-button, .platform-action, .experience-preview-trigger {
  --public-focus-fill: color-mix(in srgb, var(--public-action) 80%, rgb(var(--public-ink)));
}
.platform-public [id] { scroll-margin-top: 7rem; }
.platform-container { width: min(100% - 3rem, 75rem); margin-inline: auto; }
.platform-muted { color: rgb(var(--public-muted)); }
.platform-section-title {
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.platform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--public-action);
  color: rgb(var(--public-on-action));
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 160ms ease;
}
.platform-button:hover { opacity: 0.82; }
.platform-button:disabled { opacity: 0.5; cursor: not-allowed; }
.platform-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  padding: 1px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--public-action);
  color: rgb(var(--public-on-action));
  text-decoration: none;
}
.platform-action:focus-visible { opacity: 0.82; }
.platform-action-border { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.platform-action:is(:hover, :focus-visible) .platform-action-border { opacity: 1; }
.platform-action-light {
  display: block;
  width: 5rem;
  height: 5rem;
  background: linear-gradient(90deg, transparent, rgb(var(--public-on-action) / 0.65), transparent);
}
.platform-action-content {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: inherit;
  background: var(--public-action);
  font-size: 1rem;
  font-weight: 500;
}
.platform-action-content svg { transition: transform 200ms ease; }
.platform-action:is(:hover, :focus-visible) .platform-action-content svg { transform: translateX(3px); }
.platform-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  font-weight: 500;
  color: var(--public-accent);
  text-underline-offset: 0.25em;
}
.platform-text-link:hover { text-decoration: underline; }
.platform-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgb(var(--public-line));
  background: rgb(var(--public-canvas) / 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.platform-header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  min-height: 4rem;
  padding-block: 0.5rem;
}
.platform-header-brand { width: fit-content; --brand-wordmark-size: 21.6px; }
.platform-header-nav {
  display: none;
  justify-content: center;
  gap: 1.75rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
.platform-header-signin { display: none; justify-self: end; font-size: 0.875rem; white-space: nowrap; }
.platform-mobile-menu { position: relative; justify-self: end; }
.platform-mobile-menu-trigger { display: flex; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; border-radius: 0.375rem; color: var(--public-accent); cursor: pointer; list-style: none; }
.platform-mobile-menu-trigger::-webkit-details-marker { display: none; }
.platform-mobile-menu-trigger:hover { background: var(--public-accent-wash); }
.platform-menu-glyph { display: grid; place-items: center; }
.platform-menu-glyph > svg { grid-area: 1 / 1; }
.platform-menu-glyph > .lucide-x, .platform-mobile-menu[open] .platform-menu-glyph > .lucide-menu { opacity: 0; }
.platform-mobile-menu[open] .platform-menu-glyph > .lucide-x { opacity: 1; }
.platform-mobile-menu-popover { position: absolute; top: calc(100% + 0.5rem); right: 0; width: min(16rem, calc(100vw - 3rem)); max-height: calc(100svh - 5rem); overflow-y: auto; padding: 0.375rem; border: 1px solid rgb(var(--public-line)); border-radius: 0.75rem; background: rgb(var(--public-canvas)); box-shadow: 0 12px 32px rgb(0 0 0 / 0.12); }
.platform-mobile-menu-link { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; padding: 0.625rem 0.75rem; border-radius: 0.375rem; justify-content: space-between; color: rgb(var(--public-ink)); font-size: 0.9375rem; text-decoration: none; }
.platform-mobile-menu-link:hover { background: var(--public-accent-wash); }
.platform-mobile-menu-link[aria-current] { color: var(--public-accent); background: var(--public-accent-wash); }
.platform-header-nav .platform-text-link { border-bottom: 2px solid transparent; color: rgb(var(--public-muted)); transition: color 180ms ease, border-color 180ms ease; }
.platform-header-nav .platform-text-link:is(:hover, :focus-visible, [aria-current]) { color: var(--public-accent); text-decoration: none; }
.platform-header-nav .platform-text-link[aria-current] { border-bottom-color: var(--public-accent); }
.platform-hero-stage { position: relative; isolation: isolate; padding-bottom: clamp(3rem, 7vw, 6rem); }
.platform-hero { padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 4vw, 4rem); text-align: center; }
.platform-hero-accent { color: var(--public-accent); font-weight: 400; }
.platform-hero h1 {
  max-width: 65rem;
  margin: 0 auto;
  font-size: clamp(2.75rem, 6.8vw, 6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.platform-hero h1 span { display: block; }
.platform-hero-footer { display: grid; justify-items: center; gap: 1.75rem; margin-top: 1.75rem; }
.platform-hero-description {
  max-width: 39rem;
  color: rgb(var(--public-muted));
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.platform-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; }
.platform-theater-window { display: block; overflow: hidden; border: 1px solid rgb(var(--public-line)); border-radius: 1.25rem; background: rgb(var(--public-panel)); box-shadow: 0 24px 60px -38px rgb(0 0 0 / 0.28); }
.platform-theater-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: 0.75rem 1.25rem; color: rgb(var(--public-muted)); font-size: 0.75rem; }
.platform-theater-address, .platform-theater-visit { display: inline-flex; align-items: center; gap: 0.5rem; }
.platform-theater-address { min-width: 0; overflow-wrap: anywhere; }
.platform-theater-address svg { flex: none; }
.platform-theater-visit { color: var(--public-accent); }
.platform-theater-window:is(:hover, :focus-visible) .platform-theater-visit { text-decoration: underline; text-underline-offset: 0.25em; }
.platform-theater-window:focus-visible .platform-theater-toolbar { background: var(--public-accent-wash); }
.platform-theater-window > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
@media (max-width: 479px) {
  .platform-theater-toolbar { gap: 0.5rem; padding-inline: 0.75rem; }
  .platform-theater-toolbar > .experience-window-dots { display: none; }
  .platform-theater-visit { font-size: 0; gap: 0; }
  .platform-theater-window { border-radius: 0.75rem; }
}
.platform-work { padding-bottom: clamp(4rem, 8vw, 7rem); }
.platform-work-heading { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 2.5rem; border-top: 1px solid rgb(var(--public-line)); }
.platform-work-heading :is(h1, h2) { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.04em; font-weight: 600; }
.platform-work-heading p { max-width: 29rem; color: rgb(var(--public-muted)); font-size: 1.0625rem; line-height: 1.6; }
.platform-portfolio { display: grid; gap: 2.5rem 1.5rem; }
.platform-showcase-perspective { display: block; min-width: 0; width: 100%; padding: 0; }
.platform-showcase-tilt { display: block; width: 100%; }
.platform-showcase { display: block; width: 100%; min-width: 0; text-decoration: none; transform-style: preserve-3d; }
.platform-showcase-image { position: relative; width: 100%; overflow: hidden; border: 1px solid rgb(var(--public-line) / 0.65); border-radius: 1rem; background: rgb(var(--public-panel)); }
.platform-showcase-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / 0.14) 48%, transparent 70%); transform: translateX(-100%); }
.platform-showcase-image img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.platform-showcase-caption { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; }
.platform-showcase h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.2; letter-spacing: -0.035em; font-weight: 600; }
.platform-showcase-description { margin-top: 0.5rem; color: rgb(var(--public-muted)); font-size: 1rem; line-height: 1.5; }
.platform-showcase-arrow { flex: none; box-sizing: content-box; width: 1.125rem; height: 1.125rem; padding: 0.625rem; border: 1px solid rgb(var(--public-line)); border-radius: 50%; transition: background-color 180ms ease, transform 180ms ease; }
.platform-showcase:is(:hover, :focus-visible) .platform-showcase-arrow { background: var(--public-warm-tint); transform: rotate(45deg); }
.platform-showcase:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.platform-contact { background: var(--public-warm-wash); padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.platform-contact { border-top: 1px solid rgb(var(--public-line) / 0.6); }
.platform-contact-grid { display: grid; gap: 3rem; }
.platform-contact-copy { max-width: 28rem; }
.platform-contact-copy :is(h1, h2) { margin-top: 0; }
.platform-contact-description { margin-top: 1.5rem; color: rgb(var(--public-muted)); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
.platform-contact-attribution { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--public-line)); font-size: 0.875rem; line-height: 1.6; }
.platform-contact-form { width: 100%; }
.platform-field-label { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.5; }
.platform-field {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  margin-top: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgb(var(--public-field-border));
  border-radius: 0.5rem;
  background: rgb(var(--public-canvas));
  color: rgb(var(--public-ink));
  font-size: 1rem;
  line-height: 1.5;
}
.platform-field::placeholder { color: rgb(var(--public-muted)); opacity: 1; }
.platform-form-success { padding-block: 1rem; }
.platform-form-error { margin-top: 1rem; color: rgb(var(--public-error)); font-size: 1rem; }
.platform-footer { background: rgb(var(--public-canvas)); }
.platform-footer-main { display: grid; gap: 2.5rem; padding-block: 3rem; }
.platform-footer-description { max-width: 21rem; margin-top: 1rem; color: rgb(var(--public-muted)); font-size: 0.875rem; line-height: 1.6; }
.platform-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.platform-footer-links h3 { font-size: 0.875rem; font-weight: 600; }
.platform-footer-links ul { margin-top: 0.75rem; }
.platform-footer-links a { display: inline-block; padding-block: 0.5rem; color: rgb(var(--public-muted)); font-size: 0.875rem; }
.platform-footer a:hover { color: var(--public-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.platform-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; border-top: 1px solid rgb(var(--public-line)); padding-block: 1.5rem; color: rgb(var(--public-muted)); font-size: 0.875rem; line-height: 1.5; }
.platform-legal { width: min(100% - 3rem, 48rem); margin-inline: auto; padding-block: 5rem; }
.platform-legal h1 { max-width: 40rem; }
.platform-legal-content { margin-top: 3rem; }
.platform-legal-content section > div { font-size: 1rem; line-height: 1.75; }

/* Account entry uses the same public palette, with the form as the focus. */
.platform-auth-skip { position: fixed; top: 1rem; left: 1rem; z-index: 70; padding: 0.75rem 1rem; background: rgb(var(--public-canvas)); transform: translateY(-200%); }
.platform-auth-skip:focus { transform: none; }
.platform-auth-header > .platform-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; }
.platform-auth-back { font-size: 0.875rem; }
.platform-auth-main { flex: 1; display: grid; align-items: center; gap: clamp(3rem, 7vw, 7rem); padding-block: clamp(3rem, 7vw, 6rem); }
.platform-auth-artwork { min-width: 0; overflow: hidden; border-radius: 1rem; background: var(--public-warm-wash); }
.platform-auth-artwork .product-scene { min-height: 28rem; background: transparent; }
.platform-auth-artwork > p { padding: 0 2.5rem 2.5rem; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.2; }
.platform-auth-artwork > p > span { color: var(--public-accent); }
.platform-auth-form { width: 100%; max-width: 26rem; margin-inline: auto; min-width: 0; }
.platform-auth-form-heading { margin-bottom: 2rem; }
.platform-auth-title { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.045em; text-wrap: balance; }
.platform-auth-description { margin-top: 1rem; color: rgb(var(--public-muted)); font-size: 1rem; line-height: 1.65; }
.platform-auth-field .platform-field-label { margin-bottom: 0.5rem; }
.platform-auth-input-wrap { position: relative; }
.platform-auth-input-icon { position: absolute; inset: 0 auto 0 0.875rem; display: flex; align-items: center; color: rgb(var(--public-muted)); pointer-events: none; }
.platform-auth-input { margin-top: 0; }
.platform-auth-input-with-icon { padding-left: 2.5rem; }
.platform-public .platform-auth-input:focus-visible { border-color: var(--public-accent); }
.platform-auth-input[aria-invalid="true"] { border-color: rgb(var(--public-error)); }
.platform-public .platform-auth-input[aria-invalid="true"]:focus-visible { border-color: rgb(var(--public-error)); }
.platform-auth-submit { width: 100%; min-height: 3.25rem; cursor: pointer; }
.platform-auth-secondary { justify-content: center; width: 100%; font-size: 0.875rem; cursor: pointer; }
.platform-auth-registration { padding-top: 1rem; margin-top: 0.75rem; border-top: 1px solid rgb(var(--public-line)); text-align: center; color: rgb(var(--public-muted)); font-size: 0.875rem; }
.platform-auth-return { margin-top: 1.5rem; font-size: 0.875rem; cursor: pointer; }
.platform-auth-panel { padding: 1rem; border: 1px solid rgb(var(--public-line)); border-radius: 0.5rem; background: rgb(var(--public-panel)); }
.platform-auth-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; font-family: monospace; font-size: 0.875rem; overflow-wrap: anywhere; }
.platform-auth-qr { width: fit-content; margin-inline: auto; padding: 1rem; border: 1px solid rgb(var(--public-line)); border-radius: 0.5rem; background: white; }
.platform-auth-qr-loading { width: 196px; height: 196px; background: #f5f5f7; }
.platform-auth-factor { min-height: 2.75rem; padding: 0.75rem 1rem; border: 1px solid rgb(var(--public-line)); border-radius: 0.5rem; font-size: 0.875rem; text-align: left; cursor: pointer; }
.platform-auth-factor[aria-pressed="true"] { border-color: var(--public-accent); background: var(--public-accent-wash); color: var(--public-accent); }
.platform-auth-factor:disabled { opacity: 0.5; cursor: not-allowed; }
.platform-auth-notice { display: flex; align-items: start; gap: 0.5rem; margin-top: 1rem; padding: 0.625rem 0.75rem; border: 1px solid rgb(var(--public-line)); border-radius: 0.375rem; background: var(--public-accent-wash); color: rgb(var(--public-muted)); font-size: 0.8125rem; line-height: 1.5; }
.platform-auth-notice > svg { color: var(--public-accent); }
.platform-auth-notice[data-error="true"] { background: color-mix(in srgb, rgb(var(--public-error)) 5%, rgb(var(--public-canvas))); color: rgb(var(--public-error)); }
.platform-auth-error-dot { flex: none; width: 0.375rem; height: 0.375rem; margin-top: 0.4375rem; border-radius: 50%; background: currentColor; }
.platform-auth-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 2rem; padding-block: 1rem; border-top: 1px solid rgb(var(--public-line)); color: rgb(var(--public-muted)); font-size: 0.8125rem; }
.platform-auth-footer nav { display: flex; gap: 1.5rem; }
.platform-auth-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.platform-auth-footer a:hover { color: var(--public-accent); text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 960px) {
  .platform-auth-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (max-width: 959px) {
  .platform-auth-artwork { display: none; }
}
@media (max-width: 479px) {
  .platform-auth-header { --brand-wordmark-size: clamp(1.125rem, 5.2vw, 1.45rem); }
  .platform-auth-header > .platform-container { gap: 0.5rem; }
  .platform-auth-back { max-width: 6rem; line-height: 1.4; }
  .platform-auth-back svg { flex: none; }
}
@media (min-width: 640px) {
  .platform-container { width: min(100% - 5rem, 75rem); }
  .platform-portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 2rem; }
  .platform-showcase-featured { grid-column: 1 / -1; }
  .platform-showcase-featured .platform-showcase-image { padding: clamp(1.5rem, 5vw, 4rem); }
  .platform-showcase-featured img { border-radius: 0.25rem; }
  .platform-footer-main { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .platform-footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .platform-showcase:hover .platform-showcase-image::after { transform: translateX(100%); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
}
@media (min-width: 960px) {
  .platform-header-inner { grid-template-columns: 1fr auto auto; column-gap: 2.5rem; min-height: 4.75rem; padding-block: 0; }
  .platform-header-nav { display: flex; grid-column: 2; grid-row: 1; }
  .platform-header-signin { display: inline-flex; grid-column: 3; }
  .platform-mobile-menu { display: none; }
  .platform-work-heading { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 4rem; }
  .platform-contact-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .platform-button, .platform-action-border, .platform-action-content svg, .platform-header-nav .platform-text-link, .platform-showcase-arrow { transition: none; }
  .platform-action-content svg, .platform-showcase:is(:hover, :focus-visible) .platform-showcase-arrow { transform: none; }
}
@media (forced-colors: active) {
  .platform-hero-accent { background: none; color: CanvasText; }
  .platform-action { border: 1px solid ButtonText; }
}

/* Product walkthrough. Example canvases keep their own light site theme;
   the surrounding story follows the public system palette. */
.platform-experience { padding-bottom: clamp(4rem, 9vw, 8rem); }
.experience-intro { display: grid; gap: 1.5rem; margin-bottom: 2.75rem; }
.platform-public :is(.experience-intro, .experience-section-copy) :is(h1, h2) { font-size: clamp(2rem, 4.3vw, 3.75rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1.09; white-space: pre-line; text-wrap: balance; }
.experience-intro :is(h1, h2) span, .experience-section-copy :is(h1, h2) span { color: var(--public-accent); }
.experience-intro > p, .experience-section-copy > p { max-width: 30rem; color: rgb(var(--public-muted)); font-size: 1.125rem; line-height: 1.65; text-wrap: pretty; }
.experience-studio { overflow: hidden; border: 1px solid rgb(var(--public-line)); border-radius: 1rem; background: rgb(var(--public-panel)); }
.experience-studio-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid rgb(var(--public-line)); color: rgb(var(--public-muted)); font-size: 0.8125rem; }
.experience-window-dots { display: flex; gap: 0.375rem; }
.experience-window-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(var(--public-muted) / 0.35); }
.experience-address { min-width: 0; overflow-wrap: anywhere; }
.experience-studio-bar .experience-address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.experience-studio-bar-actions { display: flex; flex: none; align-items: center; gap: 0.75rem; }
.experience-undo { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.375rem; cursor: pointer; }
.experience-undo:hover:not(:disabled) { background: rgb(var(--public-canvas)); color: rgb(var(--public-ink)); }
.experience-undo:disabled { opacity: 0.4; cursor: default; }
.experience-studio-body { display: grid; align-items: start; }
.experience-canvas-area { min-width: 0; padding: clamp(0.75rem, 3vw, 2.5rem); }
.experience-site { width: 100%; max-width: 75rem; margin-inline: auto; color-scheme: light; color: #242629; background: #fff; border: 1px solid #e3e4e5; overflow: hidden; border-radius: 0.375rem; transition: max-width 380ms cubic-bezier(0.22, 1, 0.36, 1); }
.experience-site[data-device="tablet"] { max-width: 42rem; }
.experience-site[data-device="mobile"] { max-width: 22rem; }
.experience-site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 2rem; border-bottom: 1px solid #e3e4e5; }
.experience-site-brand { display: flex; align-items: baseline; min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; font-weight: 650; letter-spacing: -0.04em; }
.experience-site-brand-dot { color: var(--example-accent); }
.experience-site-menu { display: flex; flex-wrap: wrap; max-width: 100%; gap: 1.25rem; color: #61646a; font-size: 0.8125rem; }
.experience-site[data-editable="true"][data-device] .experience-site-menu { display: flex; }
.experience-site-menu > :is(span, a) { min-width: 0; max-width: 8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.experience-site-brand > :first-child { max-width: 20ch; }
.experience-site-sections { display: flex; flex-direction: column; }
.experience-site-hero { display: grid; grid-template-columns: 1fr 1fr; }
.experience-site-copy { min-width: 0; padding: clamp(1.5rem, 4vw, 3rem); background: #fff; }
.platform-public .experience-site-copy :is(h1, h3), .experience-editable-headline { display: block; width: 100%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.875rem, 3.6vw, 3.25rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.045em; white-space: pre-line; overflow-wrap: anywhere; text-align: left; }
.experience-editable-headline { display: grid; cursor: text; }
.experience-editable-headline:hover { background: color-mix(in srgb, var(--example-accent) 7%, white); }
.platform-public .experience-site :is(button, a, input, textarea):focus-visible { background-color: color-mix(in srgb, var(--example-accent) 12%, white); }
.experience-site-description { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 25rem; margin-top: 1.5rem; color: #62666d; font-size: 0.9375rem; line-height: 1.65; }
.experience-site-action { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 1.5rem; margin-top: 2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--example-accent); color: var(--example-accent); font-size: 0.875rem; font-weight: 500; }
.experience-site-photo { position: relative; min-height: 22rem; background: #e7eaed; }
.experience-site-photo img { object-fit: cover; }
.experience-photo-swap { position: absolute; bottom: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.625rem 0.875rem; border-radius: 0.375rem; background: white; color: #242629; box-shadow: 0 2px 10px rgb(0 0 0 / 12%); font-size: 0.8125rem; cursor: pointer; }
.experience-photo-swap:hover { background: #f0f2f3; }
@media (hover: hover) and (pointer: fine) {
  .experience-photo-swap { opacity: 0; }
  .experience-site-photo:hover .experience-photo-swap, .experience-site-photo:focus-within .experience-photo-swap { opacity: 1; }
}
.experience-site-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid #e3e4e5; }
.experience-site-links > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.875rem; padding: 1.25rem 1.5rem; }
.experience-site-links > div + div { border-left: 1px solid #e3e4e5; }
.experience-link-number { grid-column: 1 / -1; font-size: 0.75rem; color: #73767b; }
.experience-link-label, .experience-site-links > div > a { min-width: 0; font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.experience-site-links svg { color: var(--example-accent); }
.experience-site[data-device="mobile"] .experience-site-hero { grid-template-columns: 1fr; }
.experience-site[data-device="mobile"] .experience-site-photo { min-height: 15rem; }
.experience-site[data-device="mobile"] .experience-site-menu { display: none; }
.experience-site[data-device="mobile"] .experience-site-copy { padding: 1.75rem; }
.experience-site[data-device="mobile"] .experience-site-links { grid-template-columns: 1fr; }
.experience-site[data-device="mobile"] .experience-site-links > div { display: flex; gap: 0.75rem; border-left: 0; border-bottom: 1px solid #e3e4e5; }
.experience-site[data-device="mobile"] .experience-site-links svg { margin-left: auto; }
.experience-small-print { color: rgb(var(--public-muted)); font-size: 0.8125rem; line-height: 1.6; }
.experience-studio-preview-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgb(var(--public-line)); background: rgb(var(--public-canvas)); }
.experience-destination-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.experience-destination-picker label:has(input:focus-visible) { background-color: var(--public-accent-wash); text-decoration: underline; text-underline-offset: 0.25em; }
.experience-next { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.experience-next:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.experience-devices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.experience-devices button { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; padding: 0.625rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; color: rgb(var(--public-muted)); }
.experience-devices button[aria-pressed="true"] { color: var(--public-accent); background: var(--public-accent-wash); }
.experience-preview-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.75rem 1.25rem; background: var(--public-action); color: rgb(var(--public-on-action)); border-radius: 999px; font-size: 0.875rem; cursor: pointer; }
.experience-preview-trigger:disabled { opacity: 0.6; cursor: wait; }
.experience-preview-link { max-width: 100%; display: grid; gap: 0.75rem; }
.experience-preview-link input { width: min(100%, 27rem); min-width: 0; padding: 0.625rem; border: 1px solid rgb(var(--public-line)); border-radius: 0.375rem; font-size: 0.875rem; background: rgb(var(--public-canvas)); color: rgb(var(--public-ink)); }
.experience-preview-link p { max-width: 27rem; font-size: 0.875rem; line-height: 1.5; color: rgb(var(--public-muted)); }
.experience-website { min-height: 100svh; }
.experience-website-banner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.75rem max(1.25rem, calc((100vw - 75rem) / 2)); font-size: 0.875rem; background: rgb(var(--public-panel)); }
.experience-website-banner time { font-variant-numeric: tabular-nums; }
.experience-website-sync-error { padding: 1rem max(1.25rem, calc((100vw - 75rem) / 2)); }
.experience-website-banner a { text-decoration: underline; text-underline-offset: 0.2em; }
.experience-site[data-standalone="true"] { border: 0; border-radius: 0; min-height: calc(100svh - 3rem); }
.experience-site[data-standalone="true"] .experience-site-photo { min-height: 32rem; }
.experience-site[data-standalone="true"] .experience-site-menu { display: flex; flex-wrap: wrap; }
.experience-site[data-standalone="true"] a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.experience-website-details { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.experience-website-details section { padding: 4rem 0; border-top: 1px solid #e3e4e5; scroll-margin-top: 1rem; }
.experience-website-details section > p:first-child { color: var(--example-accent); font-size: 0.875rem; }
.experience-website-details h2 { margin: 1rem 0; max-width: 40rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.035em; }
.experience-website-details section > p:last-child { max-width: 38rem; font-size: 1.125rem; line-height: 1.7; color: #62666d; }
.experience-website-details footer { padding: 2rem 0; border-top: 1px solid #e3e4e5; font-size: 0.875rem; }
.experience-preview-unavailable { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 1.5rem; padding: max(1.5rem, calc((100vw - 50rem) / 2)); }
.experience-preview-unavailable h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1; letter-spacing: -0.04em; }
.experience-preview-unavailable p { max-width: 35rem; font-size: 1.125rem; line-height: 1.7; color: rgb(var(--public-muted)); }
.experience-demo-note { color: rgb(var(--public-muted)); font-size: 0.8125rem; line-height: 1.6; margin-top: 1rem; }
.experience-domain-section { background: rgb(var(--public-canvas)); padding-block: clamp(4rem, 8vw, 7.5rem); }
.experience-section-copy > p { margin-top: 1.5rem; }
.experience-domain-timeline { display: grid; align-items: start; gap: 2rem 5rem; margin-top: clamp(4rem, 7vw, 7rem); padding-top: clamp(3rem, 5vw, 5rem); border-top: 1px solid rgb(var(--public-line)); }
.experience-domain-timeline > h2 { max-width: 26rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.04em; font-weight: 500; }
.experience-domain-timeline h3 { font-size: 1.1875rem; letter-spacing: -0.025em; font-weight: 500; }
.experience-domain-timeline li p { margin-top: 0.625rem; color: rgb(var(--public-muted)); font-size: 0.9375rem; line-height: 1.75; }
.experience-domain-timeline .aceternity-timeline-line { background: rgb(var(--public-line)); }
.experience-domain-timeline .aceternity-timeline-line > div { background: var(--public-accent); }
.experience-domain-timeline .aceternity-timeline-marker { border-color: rgb(var(--public-line)); background: rgb(var(--public-canvas)); color: var(--public-accent); }
.experience-next-steps, .experience-insights { padding-block: clamp(4rem, 8vw, 7.5rem); }
.experience-destination-cards { display: grid; gap: 1rem; }
.experience-destination-cards article { padding: clamp(1.5rem, 3vw, 2.5rem); background: rgb(var(--public-panel)); border-radius: 0.75rem; }
.experience-card-number { display: flex; justify-content: space-between; color: rgb(var(--public-muted)); font-size: 0.8125rem; margin-bottom: 3rem; }
.experience-destination-cards h3 { font-size: clamp(1.625rem, 2.75vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.045em; }
.experience-destination-copy > p:last-child { margin-top: 1.25rem; color: rgb(var(--public-muted)); font-size: 1rem; line-height: 1.6; }
.experience-capability-notes { display: grid; gap: 2rem; margin-top: 2.5rem; }
.experience-capability-notes h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.experience-capability-notes p { margin-top: 0.75rem; font-size: 1rem; line-height: 1.65; color: rgb(var(--public-muted)); }
.experience-insights { border-top: 1px solid rgb(var(--public-line)); }
.experience-insights-grid { display: grid; align-items: stretch; gap: 1.5rem; }
.experience-analytics { border: 1px solid rgb(var(--public-line)); border-radius: 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; background: rgb(var(--public-canvas)); }
.experience-panel-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: rgb(var(--public-muted)); font-size: 0.8125rem; }
.experience-metrics { display: flex; gap: 2rem; margin-top: 2rem; border-bottom: 1px solid rgb(var(--public-line)); }
.experience-metrics button { display: grid; gap: 0.5rem; border-bottom: 2px solid transparent; padding: 0 0 1.25rem; text-align: left; cursor: pointer; }
.experience-metrics button > span { font-size: 0.875rem; color: rgb(var(--public-muted)); }
.experience-metrics strong { font-size: 2rem; font-weight: 500; letter-spacing: -0.04em; }
.experience-metrics button[aria-pressed="true"] { border-bottom-color: var(--public-accent); color: var(--public-accent); }
.experience-chart { display: flex; align-items: end; justify-content: space-between; gap: clamp(0.5rem, 2vw, 1.5rem); margin-top: 2rem; }
.experience-chart li { display: grid; gap: 0.75rem; flex: 1; text-align: center; min-width: 0; }
.experience-chart-track { height: 11rem; display: flex; align-items: end; background: rgb(var(--public-panel)); border-radius: 0.25rem 0.25rem 0 0; }
.experience-chart-track > span { position: relative; width: 100%; border-radius: 0.25rem 0.25rem 0 0; background: var(--public-action); transition: height 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.experience-chart-track > span > span { position: absolute; inset: 0.5rem 0 auto; color: rgb(var(--public-on-action)); font-size: 0.75rem; }
.experience-chart li > span { font-size: 0.75rem; color: rgb(var(--public-muted)); }
.experience-search-preview { padding: clamp(1.25rem, 3vw, 2.25rem); border-color: rgb(var(--public-line)); border-radius: 1.25rem; background: rgb(var(--public-panel)); }
.experience-search-preview h2 { font-size: 2rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.04em; }
.experience-search-preview > p { margin-top: 1rem; color: rgb(var(--public-muted)); font-size: 1rem; line-height: 1.65; }
.experience-search-result { margin-top: 2rem; padding: 1.5rem 0; border-top: 1px solid rgb(var(--public-line)); border-bottom: 1px solid rgb(var(--public-line)); }
.experience-search-result > span { display: block; font-size: 0.875rem; }
.experience-search-result small { display: block; color: rgb(var(--public-muted)); margin-top: 0.25rem; font-size: 0.8125rem; }
.experience-search-result strong { display: block; font-weight: 500; font-size: 1.1875rem; margin-top: 1rem; line-height: 1.4; }
.experience-search-result p { color: rgb(var(--public-muted)); font-size: 0.875rem; line-height: 1.6; margin-top: 0.5rem; }
.experience-search-preview > a { margin-top: 1.5rem; }
.experience-sharing { padding-block: clamp(4rem, 8vw, 7.5rem); background: rgb(var(--public-canvas)); }
.experience-sharing-stage { display: grid; align-items: center; justify-items: center; gap: 2rem; padding-block: 0.5rem; }
.experience-qr-card { display: grid; justify-items: center; gap: 1rem; padding: 1.5rem; width: min(100%, 18rem); border-radius: 0.75rem; background: white; border: 1px solid #dddfe2; color: #1d1d1f; }
/* The printable QR card stays light even when the surrounding page is dark. */
.experience-qr-card { --public-canvas: 255 255 255; --public-ink: 29 29 31; --public-accent: var(--public-brand, #1d1d1f); --public-action: var(--public-accent); --public-on-action: 255 255 255; --public-accent-wash: color-mix(in srgb, var(--public-accent) 7%, white); color-scheme: light; }
.experience-qr-card p { font-size: 1rem; font-weight: 500; letter-spacing: -0.03em; }
.experience-qr-card svg { max-width: 100%; height: auto; }
.experience-qr-card > span { font-size: 0.875rem; color: #62656b; }
.experience-qr-arrow { color: rgb(var(--public-muted)); transform: rotate(90deg); }
.experience-small-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgb(var(--public-muted)); margin-bottom: 1rem; }
.experience-sharing-demo .experience-demo-note { text-align: center; }
@media (min-width: 640px) {
  .experience-destination-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience-destination-cards > article:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .experience-capability-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .experience-destination-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .experience-destination-cards > article:last-child:nth-child(odd) { grid-column: auto; }
  .experience-intro { grid-template-columns: 1.3fr 1fr; gap: 5rem; align-items: end; }
  .experience-domain-timeline { grid-template-columns: 1fr 1fr; }
  .experience-insights-grid { grid-template-columns: 1.25fr 1fr; }
}
@media (max-width: 639px) {
  .experience-studio-bar .experience-window-dots { display: none; }
  .experience-studio-bar { gap: 0.5rem; padding-inline: 1rem; }
  .experience-studio-bar-actions { gap: 0.5rem; }
  .experience-site-nav { padding: 1rem; }
  .experience-site-menu { display: none; }
  .experience-site-hero { grid-template-columns: 1fr; }
  .experience-site-photo { min-height: 16rem; }
  .experience-site-links { grid-template-columns: 1fr; }
  .experience-site-links > div { display: flex; gap: 0.75rem; padding: 1rem; }
  .experience-site-links > div + div { border-left: 0; border-top: 1px solid #e3e4e5; }
  .experience-site-links svg { margin-left: auto; }
  .experience-studio-preview-tools { padding: 1rem; }
  .experience-chart-track > span > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .experience-site, .experience-chart-track > span { transition: none; }
}

/* Product Theater gives every promo page a consistent introduction and a distinct demonstration. */
.platform-page-content > :is(.platform-experience, .platform-work, .experience-domain-section, .experience-insights, .experience-sharing, .platform-contact-page) { padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem); }
.platform-promo-intro { max-width: 65rem; margin: 0 auto clamp(3rem, 5vw, 4.5rem); text-align: center; }
.platform-promo-intro h1 { margin: 0; font-size: clamp(2.75rem, 6.5vw, 5.75rem); line-height: 1.05; letter-spacing: -0.055em; font-weight: 500; text-wrap: balance; }
.platform-promo-intro h1 > span { color: var(--public-accent); }
.platform-promo-intro > p { max-width: 38rem; margin: 1.75rem auto 0; color: rgb(var(--public-muted)); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.65; text-wrap: pretty; }
.platform-promo-intro-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.platform-promo-stage { width: 100%; min-width: 0; margin-inline: auto; }
.platform-sharing-theater .experience-sharing-stage { max-width: none; padding: clamp(1.25rem, 4vw, 3.5rem); border: 1px solid rgb(var(--public-line)); border-radius: 1.5rem; background: rgb(var(--public-panel)); }
.platform-sharing-theater .experience-qr-status { margin-top: 1.5rem; }
.platform-showcase-theater .platform-showcase { overflow: hidden; border: 1px solid rgb(var(--public-line)); border-radius: 1.25rem; background: rgb(var(--public-panel)); }
.platform-showcase-theater .platform-showcase-image { padding: 0; border: 0; border-radius: 0; }
.platform-showcase-theater .platform-showcase-image img { aspect-ratio: 16 / 9; object-position: top; border-radius: 0; }
.platform-showcase-theater .platform-showcase-caption { padding: clamp(1.25rem, 2.5vw, 2rem); }
.platform-page-content .experience-insights { border-top: 0; }
.platform-home-discovery { padding-bottom: clamp(4rem, 8vw, 7rem); }
.platform-discovery-grid { display: grid; gap: 1rem; }
.platform-discovery-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid rgb(var(--public-line)); border-radius: 1rem; background: rgb(var(--public-panel)); text-decoration: none; transition: border-color 180ms ease, transform 180ms ease; }
.platform-discovery-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; color: rgb(var(--public-muted)); }
.platform-discovery-card h3 { font-size: clamp(1.375rem, 2.5vw, 1.875rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.035em; }
.platform-discovery-card p { max-width: 30rem; margin-block: 1rem 1.5rem; color: rgb(var(--public-muted)); font-size: 1rem; line-height: 1.65; }
.platform-discovery-link { margin-top: auto; color: var(--public-accent); font-size: 0.875rem; font-weight: 500; }
.platform-discovery-card:is(:hover, :focus-visible) { border-color: rgb(var(--public-muted)); }
.platform-discovery-card:is(:hover, :focus-visible) .platform-discovery-link { text-decoration: underline; text-underline-offset: 0.25em; }
.platform-section-link { margin-top: 2rem; }
.platform-contact-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 4rem; }
.platform-promo-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 4rem; padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid rgb(var(--public-line)); }
.platform-promo-next-copy { max-width: 35rem; }
.platform-promo-next h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -0.04em; font-weight: 500; text-wrap: balance; }
.platform-promo-next p { margin-top: 1.25rem; color: rgb(var(--public-muted)); font-size: 1.0625rem; line-height: 1.65; }
.platform-promo-next-actions { display: flex; flex-direction: column; align-items: start; gap: 1.25rem; }
@media (min-width: 640px) {
  .platform-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .platform-discovery-editor, .platform-discovery-sharing { grid-column: 1 / -1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .platform-discovery-card:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .platform-discovery-card { transition: none; }
}

.experience-qr-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; }
.experience-qr-actions { display: grid; align-items: center; min-height: 3.25rem; max-width: 100%; }
.experience-qr-links .platform-text-link { font-size: 0.875rem; }
.experience-qr-status { text-align: center; }
.experience-qr-address { display: block; max-width: 35rem; margin: 1rem auto; color: rgb(var(--public-muted)); font-size: 0.8125rem; text-align: left; }
.experience-qr-address input { display: block; width: 100%; margin-top: 0.5rem; padding: 0.75rem; border: 1px solid rgb(var(--public-line)); border-radius: 0.5rem; background: rgb(var(--public-canvas)); color: rgb(var(--public-ink)); font-size: 0.875rem; }
.experience-qr-status .platform-form-error button { text-decoration: underline; text-underline-offset: 0.25em; }

/* Product gallery: real HTML interfaces inside quiet, brand-colored compositions. */
.platform-discovery-perspective { display: block; min-width: 0; padding: 0; }
.platform-discovery-tilt { display: block; height: 100%; width: 100%; }
.platform-discovery-card { height: 100%; padding: 0; overflow: hidden; background: rgb(var(--public-canvas)); }
.platform-discovery-copy { display: flex; flex-direction: column; align-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); }
.platform-discovery-card h3 { font-size: clamp(1.625rem, 3vw, 2.125rem); }
.platform-discovery-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding-top: 0.5rem; }
.product-scene { --preview-ink: #22272c; --preview-muted: #67717b; --preview-border: #dfe4e8; position: relative; display: grid; place-items: center; isolation: isolate; min-width: 0; min-height: 23rem; padding: 2.5rem 1.5rem; overflow: hidden; color: var(--preview-ink); background: color-mix(in srgb, var(--preview-accent) 7%, #f5f7fa); color-scheme: light; font-size: 0.875rem; line-height: 1.4; }
.product-scene-orbit { position: absolute; z-index: -1; width: 24rem; height: 24rem; border: 1px solid color-mix(in srgb, var(--preview-accent) 14%, transparent); border-radius: 50%; transform: translate(5rem, 1rem); }
.product-scene-orbit::after { position: absolute; content: ""; inset: 2.5rem; border: inherit; border-radius: inherit; }
.product-window { position: relative; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--preview-border); border-radius: 0.75rem; background: #fff; box-shadow: 0 12px 25px -20px #1c365e4d; }
.product-window-bar { display: flex; align-items: center; gap: 1rem; justify-content: space-between; min-height: 2.5rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--preview-border); background: #fbfcfd; color: var(--preview-muted); font-size: 0.75rem; }
.product-window-bar > span:nth-child(2) { overflow-wrap: anywhere; text-align: center; }
.product-window-dots { display: flex; flex: none; gap: 0.25rem; }
.product-window-dots i { width: 0.375rem; height: 0.375rem; border: 1px solid #b8c1c9; border-radius: 50%; }
.product-window-end { width: 1.75rem; display: flex; justify-content: flex-end; }
.product-photo { position: relative; min-width: 0; overflow: hidden; background: #e3e8ec; }
.product-photo img { object-fit: cover; }
.product-floating { position: absolute; z-index: 2; border: 1px solid var(--preview-border); border-radius: 0.75rem; background: #fff; box-shadow: 0 10px 22px -18px #1c365e59; }
.product-editor-window { width: 92%; margin: -1.5rem 6% 1rem 0; transform: rotate(-2deg); }
.product-editor-toolbar { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.75rem; border-bottom: 1px solid var(--preview-border); font-size: 0.75rem; }
.product-editor-toolbar > span { display: flex; align-items: center; gap: 0.5rem; }
.product-publish { color: var(--preview-accent); }
.product-editor-body { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); }
.product-editor-rail { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-block: 1rem; border-right: 1px solid var(--preview-border); color: #78818a; }
.product-editor-rail > span { padding: 0.4rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--preview-accent) 10%, white); color: var(--preview-accent); }
.product-editor-canvas { min-width: 0; margin: 0.75rem; border: 1px solid var(--preview-border); }
.product-mini-nav { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem; font-size: 0.75rem; }
.product-mini-nav > span { display: flex; align-items: center; gap: 0.5rem; }
.product-editor-page { display: grid; grid-template-columns: 1fr 0.85fr; min-height: 11rem; }
.product-editor-headline { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1rem; margin: 0.75rem; padding: 0.5rem; background: color-mix(in srgb, var(--preview-accent) 7%, white); }
.product-editor-headline > span:first-child { color: var(--preview-muted); font-size: 0.75rem; }
.product-editor-headline > strong { font-family: Georgia, serif; font-size: clamp(1.25rem, 2.5vw, 1.875rem); line-height: 1.1; letter-spacing: -0.04em; font-weight: 400; white-space: pre-line; }
.product-selection-corner { position: absolute; width: 5px; height: 5px; right: -3px; bottom: -3px; border: 1px solid var(--preview-accent); background: white; }
.product-editor-cursor { position: absolute; display: flex; align-items: end; gap: 2px; bottom: -1.25rem; right: -1rem; z-index: 1; color: var(--preview-accent); }
.product-editor-cursor > span { margin-bottom: -0.5rem; padding: 0.1rem 0.5rem; background: var(--preview-accent); color: white; border-radius: 0.25rem; font-size: 0.75rem; }
.product-editor-blocks { display: flex; gap: 0.5rem; padding: 1rem 0.75rem 0.75rem; }
.product-editor-blocks > span { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 0.25rem; padding: 0.5rem 0.25rem; border: 1px solid var(--preview-border); font-size: 0.75rem; }
.product-editor-blocks svg { flex: none; }
.product-type-card { display: flex; flex-direction: column; gap: 0.5rem; width: 8.5rem; bottom: 1.5rem; right: 1.25rem; padding: 1rem; transform: rotate(4deg); }
.product-type-card > strong { font-size: 2.875rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.07em; }
.product-type-card > span { color: var(--preview-muted); font-size: 0.75rem; }
.product-type-lines { display: grid; gap: 0.3rem; margin-top: 0.25rem; }
.product-type-lines i { height: 2px; width: 90%; background: #e4e8ec; }
.product-type-lines i:last-child { width: 60%; }
.product-palette { left: 2.5rem; bottom: 1.25rem; padding: 0.75rem 1rem; transform: rotate(2deg); }
.product-palette > span { font-size: 0.75rem; color: var(--preview-muted); }
.product-palette > div { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.product-palette i { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--preview-accent); }
.product-palette i:nth-child(2) { background: color-mix(in srgb, var(--preview-accent) 35%, white); }
.product-palette i:nth-child(3) { background: #242930; }
.product-palette i:nth-child(4) { background: #f4f6f8; border: 1px solid #dfe4e8; }
.product-scene-domains { background: color-mix(in srgb, var(--public-warm) 9%, white); }
.product-scene-domains .product-scene-orbit { border-color: color-mix(in srgb, var(--public-warm) 22%, transparent); }
.product-domain-window { width: min(100%, 25rem); margin-top: -1rem; transform: rotate(-3deg); }
.product-domain-summary { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1rem; }
.product-domain-summary > div { flex: 1; min-width: 0; }
.product-domain-summary strong { display: block; margin-top: 0.25rem; overflow-wrap: anywhere; font-size: 1rem; letter-spacing: -0.03em; }
.product-domain-summary span:not(.product-domain-symbol) { color: var(--preview-muted); font-size: 0.75rem; }
.product-domain-summary > svg { color: var(--preview-accent); flex: none; }
.product-domain-symbol { display: grid; place-items: center; padding: 0.65rem; border-radius: 50%; background: #edf2f6; color: var(--preview-accent); }
.product-domain-rows { display: grid; padding: 0 1rem 0.5rem; }
.product-domain-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--preview-border); font-size: 0.75rem; }
.product-domain-rows strong { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; }
.product-domain-rows i { width: 5px; height: 5px; border-radius: 50%; background: var(--preview-accent); }
.product-domain-route { position: absolute; width: 65%; height: 70%; border: 1px dashed #b2c3d0; border-radius: 1.5rem; transform: rotate(13deg); }
.product-domain-route span { position: absolute; width: 8px; height: 8px; background: #fff; border: 1px solid #a7bac8; border-radius: 50%; }
.product-domain-route span:nth-child(2) { bottom: 0; right: 0; }
.product-domain-route span:nth-child(3) { top: 0; right: 0; }
.product-address-chip { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: max-content; max-width: calc(100% - 3rem); padding: 0.875rem 1.25rem; bottom: 1.5rem; transform: rotate(2deg); }
.product-address-chip > span { overflow-wrap: anywhere; font-size: 0.75rem; }
.product-address-chip > svg { flex: none; color: var(--preview-accent); }
.platform-domain-theater .product-scene { min-height: clamp(26rem, 43vw, 34rem); padding: clamp(1.25rem, 4vw, 4rem) clamp(1.25rem, 6vw, 6rem) 6rem; border: 1px solid rgb(var(--public-line)); border-radius: 1.5rem; background: var(--public-accent-wash); }
.platform-domain-theater .product-scene-orbit { display: none; }
.platform-domain-theater .product-domain-window { width: min(100%, 43rem); margin: 0; transform: none; }
.platform-domain-theater .product-domain-summary { gap: 1rem; padding: clamp(1rem, 3vw, 2rem); }
.platform-domain-theater .product-domain-summary strong { font-size: clamp(1.25rem, 3vw, 2rem); }
.platform-domain-theater .product-domain-rows { padding: 0 clamp(1rem, 3vw, 2rem) 1rem; }
.platform-domain-theater .product-domain-rows > div { padding-block: 1rem; font-size: 0.875rem; }
.platform-domain-theater .product-address-chip { bottom: 1.75rem; transform: none; }
.platform-domain-theater .product-address-chip > span { font-size: 0.875rem; }
.product-scene-insights { background: #edf0f8; }
.product-insights-window { max-width: 25rem; transform: rotate(2deg); }
.product-insights-heading { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.5rem; font-size: 0.75rem; }
.product-insights-heading > span:last-child { display: flex; align-items: center; gap: 0.5rem; color: var(--preview-muted); }
.product-stat { display: flex; align-items: baseline; gap: 0.5rem; padding: 0 1.25rem; }
.product-stat > strong { font-size: 2.5rem; letter-spacing: -0.06em; font-weight: 500; }
.product-stat > span { color: var(--preview-muted); font-size: 0.75rem; }
.product-stat-period { margin-left: auto; }
.product-mini-chart { display: flex; align-items: end; gap: 0.45rem; height: 6rem; margin: 0.5rem 1.25rem 0; padding-top: 0.5rem; border-bottom: 1px solid var(--preview-border); background: repeating-linear-gradient(to top, #e8edf2 0 1px, transparent 1px 2rem); }
.product-mini-chart i { flex: 1; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--preview-accent) 28%, #eaf0f6); }
.product-mini-chart i:nth-last-child(-n + 3) { background: var(--preview-accent); }
.product-chart-axis { display: flex; justify-content: space-between; padding: 0.5rem 1.25rem; color: var(--preview-muted); font-size: 0.75rem; }
.product-page-stat { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 1.25rem 0; padding: 0.75rem 0; border-top: 1px solid var(--preview-border); font-size: 0.75rem; }
.product-page-stat > span { color: var(--preview-muted); }
.product-page-stat strong { margin-left: auto; font-weight: 500; }
.product-search-chip { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; bottom: 1rem; right: 1.5rem; transform: rotate(-3deg); }
.product-search-icon { color: var(--preview-accent); }
.product-search-chip > div { display: grid; gap: 0.2rem; }
.product-search-chip strong { font-weight: 500; }
.product-search-chip span:not(.product-search-icon) { font-size: 0.75rem; color: var(--preview-muted); }
.product-scene-sharing { min-height: 28rem; background: color-mix(in srgb, var(--preview-accent) 11%, #edf3f7); }
.product-phone { z-index: 1; width: 13.5rem; overflow: hidden; border: 5px solid #fff; border-radius: 1.875rem; background: #fff; box-shadow: 0 0 0 1px #c9d2da, 0 20px 32px -24px #253e6759; transform: rotate(5deg); }
.product-phone-status { display: flex; align-items: center; justify-content: space-between; min-height: 1.75rem; padding: 0 0.75rem; font-size: 0.75rem; }
.product-phone-island { width: 3rem; height: 0.75rem; border-radius: 1rem; background: #25292d; }
.product-phone > .product-photo { height: 7rem; margin: 0.25rem; border-radius: 1rem; }
.product-phone-content { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; text-align: center; }
.product-phone-content > strong { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.04em; }
.product-phone-content > span { color: var(--preview-muted); font-size: 0.75rem; }
.product-phone-links { display: grid; gap: 0.5rem; width: 100%; margin-top: 0.5rem; }
.product-phone-links > span { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem; background: #f0f4f7; border: 1px solid #e5eaf0; border-radius: 0.5rem; font-size: 0.75rem; text-align: left; }
.product-phone-domain { padding-top: 0.5rem; }
.product-link-sheet { position: absolute; width: 12rem; overflow: hidden; padding: 0.5rem; border: 1px solid #dfe4e8; background: white; border-radius: 0.625rem; }
.product-link-sheet-back { left: 7%; top: 22%; transform: rotate(-10deg); }
.product-link-sheet .product-photo { height: 9rem; border-radius: 0.375rem; }
.product-link-sheet > span { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.25rem 0.25rem; font-size: 0.75rem; }
.product-qr-tile { display: grid; justify-items: center; gap: 0.625rem; padding: 1.25rem; right: 7%; bottom: 13%; text-align: center; transform: rotate(-6deg); }
.product-qr-artwork { position: relative; overflow: hidden; color: var(--preview-accent); }
.product-qr-artwork::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: currentColor; opacity: 0; }
.product-qr-tile > span:last-child { color: var(--preview-muted); font-size: 0.75rem; }
.experience-destination-cards > article { padding: 0; overflow: hidden; }
.experience-destination-copy { padding: 1.5rem; }
.product-destination-preview { padding: 1.5rem 1.5rem 0; background: #e9eef2; color: #22272c; color-scheme: light; }
.product-destination-browser { display: flex; gap: 0.25rem; padding: 0.625rem 0.75rem; background: #fff; border: 1px solid #dfe4e8; border-radius: 0.5rem 0.5rem 0 0; }
.product-destination-browser > span { width: 4px; height: 4px; background: #c5cdd4; border-radius: 50%; }
.product-destination-canvas { position: relative; display: grid; grid-template-columns: 1fr 0.9fr; height: 13rem; overflow: hidden; border: 1px solid #dfe4e8; border-top: 0; background: white; }
.product-destination-text { display: flex; flex-direction: column; justify-content: center; align-items: start; min-width: 0; gap: 0.875rem; padding: 1rem; overflow-wrap: anywhere; }
.product-destination-text > span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.product-destination-text > strong { font-family: Georgia, serif; font-size: 1.25rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.035em; }
.product-destination-text > span:last-child { margin-top: auto; }
.product-destination-preview[data-composition="0"] .product-photo { order: 2; }
.product-destination-preview[data-composition="1"] { background: #e8e9ed; }
.product-destination-preview[data-composition="1"] .product-destination-canvas { grid-template-columns: 1fr; grid-template-rows: 6rem 1fr; }
.product-destination-preview[data-composition="1"] .product-destination-text { gap: 0.5rem; padding-block: 0.75rem; }
.product-destination-preview[data-composition="1"] .product-destination-text > span:first-child { display: none; }
.product-destination-preview[data-composition="2"] { background: #e2ebf2; }
.product-destination-preview[data-composition="2"] .product-photo { margin: 1rem 0 1rem 1rem; border-radius: 5rem 5rem 0.25rem 0.25rem; }
@media (min-width: 960px) {
  .platform-discovery-editor .platform-discovery-card, .platform-discovery-sharing .platform-discovery-card { display: grid; grid-template-columns: 1.65fr 1fr; align-items: stretch; }
  .platform-discovery-editor .platform-discovery-copy, .platform-discovery-sharing .platform-discovery-copy { justify-content: center; }
  .platform-discovery-editor .platform-discovery-link, .platform-discovery-sharing .platform-discovery-link { margin-top: 1.25rem; }
  .product-scene-editor { min-height: 28rem; padding-inline: 2.5rem; }
  .product-type-card { right: 1.75rem; bottom: 2.5rem; }
  .product-palette { bottom: 2rem; }
  .product-editor-page { min-height: 13rem; }
}
@media (max-width: 959px) {
  .product-type-card { width: 7rem; padding: 0.75rem; }
  .product-type-card > span:last-of-type { display: none; }
  .product-type-card > strong { font-size: 2.25rem; }
  .product-editor-blocks { gap: 0.25rem; padding-inline: 0.25rem; }
  .product-editor-blocks > span { justify-content: center; }
  .product-editor-blocks svg { display: none; }
  .product-mini-nav > span { display: none; }
  .product-link-sheet-back { left: 1.5rem; width: 10rem; }
  .product-qr-tile { right: 1rem; bottom: 9%; padding: 0.75rem; }
}
@media (max-width: 639px) {
  .product-scene { padding-inline: 1rem; }
  .product-editor-window { width: 98%; margin-right: 2%; transform: none; }
  .product-editor-body { grid-template-columns: 2rem minmax(0, 1fr); }
  .product-editor-canvas { margin: 0.5rem; }
  .product-editor-headline { margin: 0.5rem; gap: 0.5rem; }
  .product-editor-headline > strong { font-size: 1.375rem; }
  .product-domain-window, .product-insights-window { transform: none; }
  .product-palette { left: 1rem; }
  .product-type-card { bottom: 1rem; }
  .product-destination-canvas { height: 15rem; }
  .product-destination-text > strong { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .platform-discovery-tilt { transition: none; }
}

/* Contact keeps the inquiry in focus, with a photo-led website composition alongside it. */
.platform-contact-page { border-top: 0; background: rgb(var(--public-canvas)); }
.platform-contact-composition { grid-template-areas: "form" "artwork"; gap: 2.5rem; align-items: start; }
.platform-contact-composition .platform-contact-attribution { margin-top: 1.5rem; padding-top: 1rem; }
.platform-contact-form-panel { grid-area: form; min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid rgb(var(--public-line)); border-radius: 1.25rem; background: rgb(var(--public-canvas)); }
.platform-contact-artwork { grid-area: artwork; min-width: 0; margin: 0; }
.platform-contact-artwork .product-scene { border: 1px solid rgb(var(--public-line)); border-radius: 1.25rem; }
.product-scene-website { min-height: 30rem; padding: 2.5rem 2rem 4rem; }
.product-website-window { width: 86%; margin: 0 8% 0 0; transform: rotate(-3deg); }
.product-website-window > .product-photo { height: 10rem; }
.product-website-copy { display: flex; flex-direction: column; align-items: start; gap: 0.75rem; padding: 1.25rem; }
.product-website-copy > span { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; }
.product-website-copy > span:first-child { color: var(--preview-muted); }
.product-website-copy > strong { max-width: 90%; font-family: Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.04em; line-height: 1.1; white-space: pre-line; overflow-wrap: anywhere; }
.product-website-copy > span:last-child { color: var(--preview-accent); }
.product-website-detail { width: 34%; bottom: 2.5rem; right: 1.25rem; padding: 0.5rem; transform: rotate(6deg); }
.product-website-detail > .product-photo { height: 7rem; border-radius: 0.375rem; }
.product-website-detail > span { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; padding: 0.625rem 0.25rem 0.25rem; font-size: 0.75rem; }
.product-scene-website .product-palette { bottom: 1.5rem; left: 1.5rem; }
@media (min-width: 960px) {
  .platform-contact-composition { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "artwork form"; gap: 2rem clamp(2.5rem, 5vw, 5rem); }
  .platform-contact-form-panel { align-self: start; }
}
@media (max-width: 639px) {
  .product-scene-website { min-height: 28rem; padding-inline: 1rem; }
  .product-website-window { width: 91%; margin-right: 6%; transform: rotate(-1deg); }
  .product-website-detail { bottom: 3.75rem; right: 0.75rem; }
  .product-website-detail > .product-photo { height: 5rem; }
  .product-scene-website .product-palette { left: 1rem; }
}

/* The feature overview is a scrolling presentation, one core benefit at a time. */
.feature-journey { --journey-section-space: clamp(7rem, 16vw, 12rem); --journey-art-width: 32rem; --journey-art-height: clamp(24rem, 54svh, 30rem); overflow: clip; }
.feature-journey-hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); padding-bottom: var(--journey-section-space); }
.feature-journey :is(h1, h2) > span { color: var(--public-accent); }
.feature-journey-scroll { gap: 0.75rem; font-size: 0.9375rem; }
.feature-journey-hero-art { width: 100%; margin-inline: auto; }
.feature-journey-hero-art .product-scene { min-height: var(--journey-art-height); padding: clamp(1.5rem, 3vw, 3rem); border-radius: 1.5rem; background: linear-gradient(135deg, var(--public-warm-wash), var(--public-accent-wash)); }
.feature-journey-hero-art .product-scene-orbit { display: none; }
.feature-journey-hero-art .product-website-window { max-width: 48rem; }
.feature-journey-hero-art .product-website-window > .product-photo { height: clamp(10rem, 20vw, 14rem); }
.feature-journey-hero-art .product-website-detail { max-width: 17rem; right: 4%; bottom: 3rem; }
.feature-journey-hero-art .product-palette { left: 5%; bottom: 2rem; }
.feature-journey-chapter { padding-block: var(--journey-section-space); }
.feature-journey-chapter:nth-of-type(even) { background: rgb(var(--public-panel)); }
.feature-journey-chapter-inner { display: grid; align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.feature-journey-copy { max-width: 34rem; }
.feature-journey h2 { font-size: clamp(2.5rem, 4.8vw, 3.25rem); line-height: 1.08; letter-spacing: -0.05em; font-weight: 500; text-wrap: balance; }
.feature-journey-copy > p { max-width: 30rem; margin-block: 1.75rem; color: rgb(var(--public-muted)); font-size: clamp(1.0625rem, 1.4vw, 1.125rem); line-height: 1.7; }
.feature-journey-copy > .platform-text-link { gap: 0.75rem; font-size: 0.9375rem; }
.feature-journey-art { min-width: 0; width: min(100%, var(--journey-art-width), 70svh); justify-self: center; }
.feature-journey-art .product-scene { min-height: var(--journey-art-height); border-radius: 1.5rem; }
.feature-journey-art .product-phone { width: 15rem; }
.feature-journey-chapter-interactive .feature-journey-copy { max-width: 48rem; margin-inline: auto; text-align: center; }
.feature-journey-chapter-interactive .feature-journey-copy > p { max-width: 38rem; margin-inline: auto; margin-bottom: 0; }
.feature-journey-demo { min-width: 0; width: min(100%, 60rem); margin-inline: auto; }
@media (min-width: 760px) {
  .feature-journey-chapter-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .feature-journey-chapter:not([data-layout="wide"]):nth-of-type(odd) .feature-journey-chapter-inner:not(.feature-journey-chapter-interactive) > .feature-journey-copy { order: 2; }
  .feature-journey-chapter:not([data-layout="wide"]):nth-of-type(odd) .feature-journey-chapter-inner:not(.feature-journey-chapter-interactive) > .feature-journey-art { order: 1; }
  .feature-journey-chapter-inner.feature-journey-chapter-interactive { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .feature-journey-hero-art .product-scene { padding: 1.25rem 1rem 4rem; }
  .feature-journey-hero-art .product-website-detail { right: 0.75rem; bottom: 4rem; }
  .feature-journey-art .product-type-card { width: 7rem; right: 0.75rem; }
  .feature-journey-art .product-phone { width: 13rem; }
  .feature-journey-art .product-qr-tile { right: 0.75rem; }
}

/* The destination preview is also the control surface for the live QR demo. */
.experience-destination { width: min(100%, 28rem); min-width: 0; }
.experience-destination-content { padding: 1.25rem; background: rgb(var(--public-canvas)); border-radius: 1.5rem; }
.experience-destination-content > span { font-size: 0.875rem; font-weight: 500; }
.experience-destination-story { min-height: 7.5rem; padding-top: 0.5rem; }
.experience-destination-story h3 { font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.045em; font-weight: 500; }
.experience-destination-story p { margin-top: 1.25rem; font-size: 1rem; line-height: 1.65; color: rgb(var(--public-muted)); }
.experience-destination-picker { display: grid; gap: 0.5rem; margin-top: 1rem; }
.experience-destination-picker legend { font-size: 0.8125rem; color: rgb(var(--public-muted)); margin-bottom: 0.75rem; }
.experience-destination-picker label { position: relative; cursor: pointer; border-radius: 0.75rem; }
.experience-destination-picker label > span { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3rem; padding: 0.875rem 1rem; background: rgb(var(--public-panel)); border-radius: 0.75rem; font-size: 0.9375rem; transition: background-color 160ms ease; }
.experience-destination-picker input:checked + span { background: var(--public-action); color: rgb(var(--public-on-action)); }
.experience-destination-picker label:has(input:focus-visible) > span { text-decoration: underline; text-underline-offset: 0.25em; }
.experience-destination-picker label:has(input:disabled) { cursor: default; }
.experience-destination-picker:disabled { opacity: 0.55; }
.experience-destination-status { margin-top: 1rem; font-size: 0.75rem; line-height: 1.6; color: rgb(var(--public-muted)); }
.experience-sharing-demo > .feature-highlights { margin-top: 4rem; }

/* A short set of capabilities belongs to each visual chapter. */
.feature-journey-highlights { margin-top: clamp(3.5rem, 7vw, 6rem); }
.feature-highlights { display: grid; gap: 1rem; }
.feature-highlights > :is(article, a) { min-width: 0; padding: 1.5rem; border-top: 1px solid rgb(var(--public-line)); border-radius: 0.75rem; }
.feature-highlights .aceternity-hover-background { border-radius: inherit; background: var(--public-accent-wash); }
.feature-highlights h3 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.025em; font-weight: 500; }
.feature-highlights p { margin-top: 0.875rem; color: rgb(var(--public-muted)); font-size: 0.9375rem; line-height: 1.75; }

/* Product illustrations: real capabilities, shown with brand-owned example content. */
.product-scene-cdn { background: color-mix(in srgb, var(--preview-accent) 8%, #f5f7fa); }
:is(.product-scene-cdn, .product-scene-protection) .product-scene-orbit { display: none; }
.product-cdn-preview { width: min(100%, 32rem); }
.product-cdn-source { width: 87%; margin-left: 0.375rem; transform: rotate(-3deg); }
.product-cdn-source > div:last-child { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; }
.product-cdn-source .product-photo { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 0.375rem; }
.product-cdn-source strong { display: block; font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; }
.product-cdn-source > div:last-child > div:last-child > span { display: block; margin-top: 0.375rem; font-size: 0.6875rem; color: var(--preview-muted); }
.product-cdn-map { position: relative; aspect-ratio: 107 / 54; margin: 2rem -0.5rem 3rem; color: var(--preview-accent); }
.product-cdn-map > img { display: block; width: 100%; height: 100%; }
.product-cdn-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.product-cdn-route { stroke: currentColor; stroke-width: 0.45; }
.product-cdn-track { opacity: 0.18; }
.product-cdn-route[data-active="true"] .product-cdn-track { opacity: 0.65; }
.product-cdn-packet { stroke: white; stroke-width: 0.85; stroke-linecap: round; stroke-dasharray: 3 103; stroke-dashoffset: 3; opacity: 0; }
.product-cdn-nodes { fill: currentColor; }
.product-cdn-node-wash { opacity: 0.15; }
.product-cdn-destinations { position: absolute; inset: 0; }
.product-cdn-destination { --public-focus-fill: color-mix(in srgb, var(--preview-accent) 12%, transparent); position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; translate: -50% -50%; background: transparent; color: var(--preview-accent); cursor: pointer; }
.product-cdn-point { position: relative; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.product-cdn-point::before, .product-cdn-point::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; background: currentColor; opacity: 0.14; }
.product-cdn-point::after { opacity: 0; }
.product-cdn-destination[aria-pressed="true"] .product-cdn-point { scale: 1.15; }
.product-cdn-destination[aria-pressed="true"] .product-cdn-point::before { opacity: 0.25; }
.product-cdn-label { position: absolute; z-index: 1; bottom: calc(100% - 7px); left: 50%; translate: -50% 0; padding: 0.375rem 0.625rem; border-radius: 0.5rem; background: white; color: var(--preview-ink); font-size: 0.6875rem; font-weight: 500; white-space: nowrap; visibility: hidden; opacity: 0; pointer-events: none; }
.product-cdn-destination[data-label-align="end"] .product-cdn-label { left: auto; right: 0; translate: 0 0; }
.product-cdn-destination:is(:hover, :focus-visible, [aria-pressed="true"]) .product-cdn-label { visibility: visible; opacity: 1; }
.product-cdn-destination:is(:hover, :focus-visible) .product-cdn-label { text-decoration: underline; text-underline-offset: 0.2em; }
.product-cdn-cache { position: absolute; left: 38%; bottom: -1rem; display: flex; align-items: center; gap: 0.375rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: white; color: var(--preview-accent); font-size: 0.6875rem; white-space: nowrap; pointer-events: none; box-shadow: 0 0.5rem 1.25rem #22272c0a; }
.product-cdn-arrival { display: flex; align-items: center; gap: 0.875rem; padding: 1.125rem; border-radius: 1rem; background: white; box-shadow: 0 0.75rem 1.5rem #22272c0a; }
.product-cdn-arrival > span { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 0.75rem; color: var(--preview-accent); background: color-mix(in srgb, var(--preview-accent) 8%, white); }
.product-cdn-arrival strong { display: block; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.025em; }
.product-cdn-arrival div > span { display: block; margin-top: 0.375rem; font-size: 0.6875rem; color: var(--preview-muted); }
.product-cdn-arrival > svg { margin-left: auto; color: var(--preview-accent); flex: none; }
.product-cdn-arrival > div { min-width: 0; }
/* Compact scene internals let the map fit beside its copy without scaling touch targets. */
.feature-journey-art .product-scene-cdn { padding-block: 1.5rem; }
.feature-journey-art .product-cdn-map { max-width: 24rem; margin: 1.25rem auto 2.5rem; }
.feature-journey-art .product-cdn-source > div:last-child { padding: 0.75rem; }
.feature-journey-art .product-cdn-source .product-photo { width: 3rem; height: 3rem; }
@media (max-width: 639px) {
  .product-cdn-map { margin-inline: 0.5rem; }
  .product-cdn-arrival { gap: 0.625rem; padding: 0.875rem; }
  .product-cdn-preview[data-interactive="true"] .product-cdn-arrival { min-height: 6.75rem; }
  .product-cdn-arrival strong { font-size: 0.9375rem; }
}
/* Small details animate within the artwork, leaving the page itself settled. */
@media (prefers-reduced-motion: no-preference) {
  .product-scene[data-scene-in-view="true"] .product-palette i { animation: product-palette-lift 8s ease-in-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-palette i:nth-child(2) { animation-delay: 0.18s; }
  .product-scene[data-scene-in-view="true"] .product-palette i:nth-child(3) { animation-delay: 0.36s; }
  .product-scene[data-scene-in-view="true"] .product-palette i:nth-child(4) { animation-delay: 0.54s; }
  .product-scene[data-scene-in-view="true"] .product-website-detail > span > svg { animation: product-link-invitation 8s ease-in-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-editor-cursor { animation: product-cursor-edit 8s var(--public-motion-ease) infinite; }
  .product-scene[data-scene-in-view="true"] .product-editor-headline { animation: product-edit-highlight 8s ease-in-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-type-lines i { transform-origin: left; animation: product-type-adjust 8s var(--public-motion-ease) infinite; }
  .product-scene[data-scene-in-view="true"] .product-type-lines i:last-child { animation-delay: 0.2s; }
  .product-scene[data-scene-in-view="true"] .product-phone-links > span { animation: product-link-highlight 9s ease-in-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-phone-links > span:nth-child(2) { animation-delay: 0.5s; }
  .product-scene[data-scene-in-view="true"] .product-phone-links > span:nth-child(3) { animation-delay: 1s; }
  .product-scene[data-scene-in-view="true"] .product-qr-artwork::after { animation: product-qr-scan 9s ease-in-out infinite; }
  .product-cdn-track, .product-cdn-label { transition: opacity 220ms ease; }
  .product-cdn-point { transition: scale 220ms var(--public-motion-ease); }
  .product-scene[data-scene-in-view="true"] .product-cdn-route[data-active="true"] .product-cdn-packet { animation: product-content-travel 3.6s linear infinite; }
  .product-scene[data-scene-in-view="true"] .product-cdn-destination[aria-pressed="true"] .product-cdn-point::after { animation: product-cache-pulse 3.6s ease-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-cdn-delivered { animation: product-detail-confirm 450ms ease-out both; }
  .product-scene[data-scene-in-view="true"] .product-domain-route span { animation: product-connection-pulse 6s ease-in-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-domain-route span:nth-child(2) { animation-delay: 0.7s; }
  .product-scene[data-scene-in-view="true"] .product-domain-route span:nth-child(3) { animation-delay: 1.4s; }
  .product-scene[data-scene-in-view="true"] .product-domain-summary > svg { animation: product-confirm-glint 6s ease-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-publishing-steps > div > svg { animation: product-confirm-glint 7s ease-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-publishing-steps > div:nth-child(2) > svg { animation-delay: 0.65s; }
  .product-scene[data-scene-in-view="true"] .product-media-qualities span { animation: product-quality-highlight 7s ease-in-out infinite; }
  .product-scene[data-scene-in-view="true"] .product-media-qualities span:nth-child(2) { animation-delay: 0.55s; }
  .product-scene[data-scene-in-view="true"] .product-media-qualities span:nth-child(3) { animation-delay: 1.1s; }
  .product-scene[data-scene-in-view="true"] .product-mini-chart i { transform-origin: bottom; animation: product-chart-settle 7s var(--public-motion-ease) infinite; animation-delay: var(--detail-delay, 0s); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .product-scene[data-scene-depth="true"] > :is(.product-window, .product-phone, .product-floating, .product-link-sheet, .product-scene-orbit) {
    --scene-layer-depth: 2px;
    translate: calc(var(--scene-pointer-x, 0) * var(--scene-layer-depth)) calc(var(--scene-pointer-y, 0) * var(--scene-layer-depth));
    transition: translate 450ms var(--public-motion-ease);
  }
  .product-scene[data-scene-depth="true"] > .product-floating { --scene-layer-depth: 6px; }
  .product-scene[data-scene-depth="true"] > :is(.product-link-sheet, .product-scene-orbit) { --scene-layer-depth: -2px; }
}
@keyframes product-palette-lift {
  0%, 24%, 100% { translate: 0 0; }
  10% { translate: 0 -2px; }
}
@keyframes product-link-invitation {
  0%, 30%, 100% { translate: 0 0; }
  15% { translate: 2px -2px; }
}
@keyframes product-cursor-edit {
  0%, 65%, 100% { translate: 0 0; }
  12%, 30% { translate: -10px -6px; }
  40%, 48% { translate: -5px -3px; }
}
@keyframes product-edit-highlight {
  0%, 65%, 100% { background: color-mix(in srgb, var(--preview-accent) 7%, white); }
  20%, 35% { background: color-mix(in srgb, var(--preview-accent) 12%, white); }
}
@keyframes product-type-adjust {
  0%, 65%, 100% { scale: 1 1; }
  22%, 40% { scale: 0.86 1; }
}
@keyframes product-link-highlight {
  0%, 28%, 100% { background: #f0f4f7; }
  12% { background: color-mix(in srgb, var(--preview-accent) 12%, white); }
}
@keyframes product-qr-scan {
  0%, 8% { translate: 0 0; opacity: 0; }
  12% { opacity: 0.55; }
  30% { translate: 0 48px; opacity: 0.55; }
  33%, 100% { translate: 0 48px; opacity: 0; }
}
@keyframes product-content-travel {
  0% { stroke-dashoffset: 3; opacity: 0; }
  8% { opacity: 1; }
  70% { stroke-dashoffset: -100; opacity: 1; }
  78%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes product-cache-pulse {
  0%, 65% { scale: 1; opacity: 0; }
  72% { scale: 1; opacity: 0.35; }
  100% { scale: 2.5; opacity: 0; }
}
@keyframes product-connection-pulse {
  0%, 35%, 100% { scale: 1; background: white; }
  12% { scale: 1.4; background: var(--preview-accent); }
}
@keyframes product-detail-confirm {
  0% { opacity: 0.25; translate: 0 2px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes product-confirm-glint {
  0%, 60%, 100% { opacity: 1; translate: 0 0; }
  70% { opacity: 0.45; translate: 0 1px; }
  85% { opacity: 1; translate: 0 0; }
}
@keyframes product-quality-highlight {
  0%, 35%, 100% { background: color-mix(in srgb, var(--preview-accent) 8%, white); }
  15% { background: color-mix(in srgb, var(--preview-accent) 20%, white); }
}
@keyframes product-chart-settle {
  0%, 100% { scale: 1 1; }
  6% { scale: 1 0.92; }
  24% { scale: 1 1; }
}
/* A dimensional shield separates visitor routes from deflected traffic. */
.product-scene-protection { --protection-face: color-mix(in srgb, var(--preview-accent) 64%, white); --protection-edge: color-mix(in srgb, var(--preview-accent) 28%, #b6c3d1); padding: 2rem 1.5rem; background: #edf2f6; }
.product-firewall-preview { display: grid; align-items: center; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); width: 100%; position: relative; }
.product-protection-flow { position: relative; min-width: 0; }
.product-traffic-sources { position: absolute; z-index: 1; inset: 7% auto 27% 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; }
.product-traffic-sources > span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; color: var(--preview-muted); white-space: nowrap; }
.product-traffic-sources i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--preview-accent); }
.product-traffic-sources > span:last-child i { border-radius: 1px; transform: rotate(45deg); background: var(--public-warm); }
.product-protection-field { display: block; width: 100%; height: auto; overflow: visible; }
.product-protection-contours { stroke: var(--preview-accent); stroke-width: 0.75; opacity: 0.07; }
.product-protection-track { stroke: currentColor; stroke-width: 1; opacity: 0.18; }
.product-protection-output-mobile { display: none; }
.product-protection-visitors, .product-protection-output { color: var(--preview-accent); }
.product-protection-threats { color: color-mix(in srgb, var(--public-warm) 75%, #986957); }
.product-protection-threats .product-protection-track { stroke-dasharray: 3 6; opacity: 0.25; }
.product-protection-packet { stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: -45; }
.product-protection-threats .product-protection-packet { stroke-linecap: square; stroke-width: 4.5; stroke-dashoffset: -76; }
.product-protection-impact { fill: currentColor; opacity: 0.12; }
.product-protection-fragments { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: 0.6; }
.product-protection-shield-depth { fill: color-mix(in srgb, var(--preview-accent) 60%, #3e4f62); }
.product-protection-check { stroke: white; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.product-protected-site { position: relative; width: 100%; transform: perspective(900px) rotateY(-9deg); box-shadow: 0 1.5rem 2rem -1.25rem #26364735, 4px 4px 0 #dbe3eb; }
.product-protected-site .product-window-bar { gap: 0.5rem; padding: 0.75rem 0.875rem; font-size: 0.6875rem; }
.product-protected-site .product-window-bar > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-protected-site .product-window-end { flex: none; width: auto; }
.product-protected-content { display: grid; gap: 1rem; padding: 1.25rem; }
.product-protected-content > .product-photo { width: 100%; height: clamp(7rem, 15vw, 11rem); border-radius: 0.5rem; }
.product-protected-content > strong { display: block; font-size: clamp(1rem, 1.8vw, 1.375rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.product-protected-content > span { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--preview-muted); }
.product-protected-content span i { width: 5px; height: 5px; border-radius: 50%; background: var(--preview-accent); }
.product-protected-content span svg { flex: none; margin-left: auto; color: var(--preview-accent); }
/* Wide chapters keep their introduction and bounded artwork in one composition. */
.feature-journey-chapter[data-layout="wide"] .feature-journey-chapter-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: clamp(1.5rem, 3svh, 2rem); }
.feature-journey-chapter[data-layout="wide"] .feature-journey-chapter-inner > .feature-journey-copy { order: 0; max-width: 52rem; margin-inline: auto; text-align: center; }
.feature-journey-chapter[data-layout="wide"] h2 { font-size: clamp(2.5rem, 4.8vw, 3rem); }
.feature-journey-chapter[data-layout="wide"] .feature-journey-copy > p { max-width: 43rem; margin: 1.25rem auto 0; font-size: 1.0625rem; line-height: 1.65; }
.feature-journey-chapter[data-layout="wide"] .feature-journey-chapter-inner > .feature-journey-art { order: 1; width: min(100%, 46rem, 82svh); margin-inline: auto; }
.feature-journey-art .product-scene-protection { min-height: 0; padding: clamp(1.25rem, 3vw, 2rem); }
.feature-journey-art .product-protected-content > .product-photo { height: auto; aspect-ratio: 8 / 5; }
@media (max-width: 639px) {
  .product-firewall-preview { grid-template-columns: minmax(0, 1fr); }
  .product-protection-flow { margin-bottom: 1.5rem; }
  .product-protected-site { max-width: 18rem; margin-inline: auto; transform: none; }
  .product-protection-output-desktop { display: none; }
  .product-protection-output-mobile { display: block; }
  .product-protected-content { padding: 1rem; }
  .product-traffic-sources > span { font-size: 0.625rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .product-firewall-preview[data-scene-in-view="true"] .product-protection-packet { animation: protection-packet 2s linear infinite; animation-delay: var(--packet-delay, 0s); }
  .product-firewall-preview[data-scene-in-view="true"] .product-protection-threats .product-protection-packet { animation-name: protection-blocked; }
  .product-firewall-preview[data-scene-in-view="true"] .product-protection-fragments { animation: protection-deflect 2s ease-out infinite; animation-delay: var(--packet-delay, 0s); }
  .product-firewall-preview[data-scene-in-view="true"] .product-protection-impact { animation: protection-impact 2s ease-out infinite; animation-delay: var(--packet-delay, 0s); }
  .product-firewall-preview[data-scene-in-view="true"] .product-protection-shield { animation: protection-arrive 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes protection-packet { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes protection-blocked { 0% { stroke-dashoffset: 0; opacity: 1; } 65% { stroke-dashoffset: -97; opacity: 1; } 70%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes protection-deflect { 0%, 60% { opacity: 0; transform: translate(0, 0) scale(0.6); } 70% { opacity: 0.75; } 100% { opacity: 0; transform: translate(-12px, 0) scale(1.5); } }
@keyframes protection-impact { 0%, 60%, 100% { opacity: 0.08; } 68% { opacity: 0.35; } }
@keyframes protection-arrive { from { transform: translateY(10px); } to { transform: translateY(0); } }
.product-scene-publishing { background: color-mix(in srgb, var(--preview-accent) 7%, #f5f5f7); }
.product-publishing-back { position: absolute; width: 72%; height: 65%; background: #e2eaf0; border-radius: 1rem; transform: rotate(-7deg) translate(-0.5rem, -0.5rem); }
.product-publishing-window { max-width: 26rem; transform: rotate(2deg); margin-bottom: 2rem; }
.feature-journey-art .product-publishing-window { margin-bottom: 4rem; }
.product-publishing-page { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; padding: 1rem; }
.product-publishing-page .product-photo { min-height: 6.5rem; border-radius: 0.375rem; }
.product-publishing-page > div:last-child { display: grid; align-content: center; gap: 0.5rem; }
.product-publishing-page span { font-size: 0.6875rem; color: var(--preview-muted); }
.product-publishing-page strong { font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; line-height: 1.1; }
.product-publishing-page span:last-child { color: var(--preview-accent); }
.product-publishing-steps { display: grid; padding: 0.5rem 1.25rem 1rem; }
.product-publishing-steps > div { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.875rem; }
.product-publishing-steps > div > span { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; background: #f0f4f7; color: var(--preview-accent); border-radius: 50%; }
.product-publishing-steps strong { display: block; font-size: 0.8125rem; font-weight: 500; }
.product-publishing-steps small { display: block; margin-top: 0.25rem; color: var(--preview-muted); font-size: 0.6875rem; }
.product-publishing-steps > div > svg { margin-left: auto; color: var(--preview-accent); }
.feature-journey-art .product-publishing-steps > div { padding-block: 0.625rem; }
.product-history-chip { display: flex; align-items: center; gap: 0.875rem; bottom: 1.5rem; right: 1.5rem; max-width: calc(100% - 3rem); padding: 1.125rem; transform: rotate(-3deg); }
.product-history-chip > svg { color: var(--preview-accent); flex: none; }
.product-history-chip strong { display: block; font-size: 0.8125rem; font-weight: 500; }
.product-history-chip span { display: block; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--preview-muted); }
.product-scene-content { padding-block: 1.5rem 6.5rem; background: color-mix(in srgb, var(--public-warm) 7%, #f8f7f5); }
@media (min-width: 760px) {
  .experience-sharing-stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); max-width: 56rem; margin-inline: auto; gap: 1.5rem; }
  .experience-qr-arrow { transform: none; }
  .feature-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .experience-destination-picker label > span { transition: none; }
}

/* Media delivery illustration, with generated video outputs and retained originals. */
.product-media-window { max-width: 28rem; transform: rotate(-3deg); }
.product-media-video { position: relative; margin: 0.75rem; overflow: hidden; border-radius: 0.5rem; background: #20252b; }
.product-media-video > .product-photo { height: clamp(7.5rem, 14vw, 10rem); }
.product-media-play { position: absolute; inset: 0; display: grid; place-items: center; color: white; }
.product-media-play > svg { padding: 0.875rem; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #0008; }
.product-media-timeline { padding: 0.75rem; color: white; }
.product-media-timeline > span { display: block; height: 3px; border-radius: 3px; background: #ffffff40; }
.product-media-timeline > span::before { content: ""; display: block; width: 18%; height: 100%; background: white; border-radius: inherit; }
.product-media-timeline > div { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.625rem; font-size: 0.6875rem; }
.product-media-timeline strong { margin-left: auto; font-weight: 500; }
.product-media-processing { display: flex; gap: 0.75rem; align-items: center; padding: 0.25rem 1.25rem; }
.product-media-processing > svg { flex: none; color: var(--preview-accent); }
.product-media-processing > svg:last-child { margin-left: auto; }
.product-media-processing strong { display: block; font-size: 0.875rem; font-weight: 500; }
.product-media-qualities { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 1.25rem; }
.product-media-qualities span { padding: 0.375rem 0.75rem; background: color-mix(in srgb, var(--preview-accent) 8%, white); color: var(--preview-accent); border-radius: 0.375rem; font-size: 0.75rem; }
.product-media-outputs { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0 1.25rem 1rem; }
.product-media-outputs span { display: flex; align-items: center; gap: 0.375rem; color: var(--preview-muted); font-size: 0.6875rem; }
.product-media-outputs svg { color: var(--preview-accent); }
.product-media-image { display: flex; align-items: center; gap: 0.75rem; width: 17rem; max-width: calc(100% - 2rem); padding: 0.625rem; right: 1rem; bottom: 1rem; transform: rotate(4deg); }
.product-media-image > .product-photo { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 0.375rem; }
.product-media-image > div:last-child { display: grid; gap: 0.375rem; }
.product-media-image span { display: flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; color: var(--preview-muted); }
.product-media-image strong { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 500; color: var(--preview-accent); }
.feature-journey-art .product-scene-content { min-height: 25rem; }
.feature-journey-art .product-media-video > .product-photo { height: clamp(6.5rem, 12vw, 8rem); }

.experience-custom-destination { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.experience-custom-destination label { font-size: 0.8125rem; color: rgb(var(--public-muted)); }
.experience-custom-destination input { min-width: 0; width: 100%; padding: 0.875rem 1rem; border: 0; border-radius: 0.75rem; background: rgb(var(--public-panel)); color: rgb(var(--public-ink)); font-size: 1rem; }
.experience-custom-destination input:focus-visible { background: var(--public-accent-wash); }

/* Small, shared responses to deliberate interaction. No movement is required
   to discover controls, read content, or use the reduced-motion experience. */
@media (prefers-reduced-motion: no-preference) {
  .platform-public :is(.platform-button, .platform-action, .platform-text-link, .experience-next, .experience-preview-trigger, .experience-undo, .experience-photo-swap, .platform-mobile-menu-trigger, .platform-mobile-menu-link, .experience-devices button, .experience-metrics button) {
    transition: background-color var(--public-motion-fast) ease, color var(--public-motion-fast) ease, opacity var(--public-motion-fast) ease, translate var(--public-motion-settle) var(--public-motion-ease), scale var(--public-motion-fast) var(--public-motion-ease);
  }
  .platform-public :is(.platform-button, .platform-action, .experience-preview-trigger, .experience-undo, .experience-photo-swap, .platform-mobile-menu-trigger, .experience-devices button):not(:disabled, [aria-disabled="true"]):active {
    scale: 0.98;
  }
  .platform-public :is(.platform-button, .platform-text-link, .experience-next, .experience-preview-trigger, .platform-mobile-menu-link) > svg {
    transition: translate var(--public-motion-settle) var(--public-motion-ease);
  }
  .platform-public :is(.platform-button, .platform-text-link, .experience-next, .experience-preview-trigger, .platform-mobile-menu-link):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible, [data-focus-visible="true"]) > :is(.lucide-chevron-right, .lucide-arrow-right) {
    translate: 3px 0;
  }
  .platform-public :is(.platform-button, .platform-text-link, .experience-next, .experience-preview-trigger):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) > .lucide-arrow-up-right {
    translate: 2px -2px;
  }
  .feature-journey-scroll:is(:hover, :focus-visible) > .lucide-arrow-down { translate: 0 3px; }

  .platform-menu-glyph > svg {
    transition: opacity var(--public-motion-fast) ease, rotate var(--public-motion-settle) var(--public-motion-ease), scale var(--public-motion-settle) var(--public-motion-ease);
  }
  .platform-menu-glyph > .lucide-x { rotate: 45deg; scale: 0.85; }
  .platform-mobile-menu[open] .platform-menu-glyph > .lucide-menu { rotate: -45deg; scale: 0.85; }
  .platform-mobile-menu[open] .platform-menu-glyph > .lucide-x { rotate: 0deg; scale: 1; }
  .platform-mobile-menu-link {
    animation: public-detail-arrive var(--public-motion-settle) var(--public-motion-ease) both;
    animation-delay: calc(var(--menu-item-index, 0) * 30ms);
  }

  .experience-undo > svg { transition: rotate var(--public-motion-settle) var(--public-motion-ease); }
  .experience-undo:not(:disabled):is(:hover, :focus-visible) > svg { rotate: -24deg; }
  .experience-site :is(input, textarea) { transition: background-color var(--public-motion-fast) ease; }
  .experience-devices button[aria-pressed="true"] > svg,
  .experience-destination-picker input:checked:not(:disabled, [aria-disabled="true"]) + span > svg {
    animation: public-selection-arrive var(--public-motion-settle) var(--public-motion-ease) both;
  }
  .experience-destination-picker label > span {
    transition: background-color var(--public-motion-fast) ease, color var(--public-motion-fast) ease, scale var(--public-motion-fast) var(--public-motion-ease);
  }
  .experience-destination-picker label:has(input:not(:disabled, [aria-disabled="true"])):active > span { scale: 0.99; }
  .experience-custom-destination { animation: public-detail-arrive var(--public-motion-settle) var(--public-motion-ease) both; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .platform-public :is(.platform-button, .platform-action, .experience-preview-trigger):not(:disabled, [aria-disabled="true"]):hover { translate: 0 -1px; }
  .experience-photo-swap { translate: 0 4px; }
  .experience-site-photo:is(:hover, :focus-within) .experience-photo-swap { translate: 0 0; }
}
@keyframes public-detail-arrive {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes public-selection-arrive {
  from { opacity: 0.6; scale: 0.9; }
  to { opacity: 1; scale: 1; }
}
.experience-custom-destination .platform-button { justify-self: start; }
.experience-destination-status { overflow-wrap: anywhere; }