@property --ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #111111;
}

@property --paper {
  syntax: "<color>";
  inherits: true;
  initial-value: #fffdf8;
}

@property --surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --line {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(17, 17, 17, 0.16);
}

@property --muted {
  syntax: "<color>";
  inherits: true;
  initial-value: #51565c;
}

@property --hero-wash {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4eee4;
}

:root {
  --orange: #f26c3f;
  --brick: #a44738;
  --rose: #efceca;
  --mist: #e8e5e5;
  --water: #bedddf;
  --lake: #354d73;
  --ink: #111111;
  --paper: #fffdf8;
  --surface: #ffffff;
  --line: rgba(17, 17, 17, 0.16);
  --muted: #51565c;
  --hero-wash: #f4eee4;
  --profile-note: #eadbc7;
  --shadow: 0 24px 70px rgba(53, 77, 115, 0.18);
}

:root[data-theme="dark"] {
  --ink: #fffdf8;
  --paper: #101725;
  --surface: #17233a;
  --line: rgba(255, 253, 248, 0.17);
  --muted: #c2c9d4;
  --hero-wash: #0d1728;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Figtree", "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html.theme-has-changed {
  transition:
    --ink 220ms cubic-bezier(0.16, 1, 0.3, 1),
    --paper 220ms cubic-bezier(0.16, 1, 0.3, 1),
    --surface 220ms cubic-bezier(0.16, 1, 0.3, 1),
    --line 220ms cubic-bezier(0.16, 1, 0.3, 1),
    --muted 220ms cubic-bezier(0.16, 1, 0.3, 1),
    --hero-wash 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.theme-has-changed .orange-field,
html.theme-has-changed .site-header,
html.theme-has-changed .hero-copy,
html.theme-has-changed .hero-frame,
html.theme-has-changed .hero-art figcaption,
html.theme-has-changed .partner-strip {
  animation: none !important;
}

body.dialog-open {
  overflow: hidden;
}

html.preview-open,
html.preview-open body,
html.guide-open,
html.guide-open body {
  overflow: hidden;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--water);
  outline-offset: 4px;
}

.direction-contract {
  display: none;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--paper) 0 47%, transparent 47%),
    var(--hero-wash);
}

.orange-field {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 20.5%;
  height: 100%;
  background: var(--orange);
  animation: field-register 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
  padding: 28px 0 18px;
  animation: header-register 520ms 40ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0);
  transition: filter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .brand-mark img {
  filter: none;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 12px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 650;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    scale 140ms ease,
    translate 140ms ease;
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--ink) 32%, transparent);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.theme-toggle:active {
  scale: 0.97;
  translate: 0 1px;
}

.theme-glyph {
  position: relative;
  width: 26px;
  aspect-ratio: 1;
  color: var(--lake);
}

.theme-icon {
  position: absolute;
  inset: 1px;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition:
    opacity 280ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-icon-sun {
  opacity: 0;
  transform: rotate(-65deg) scale(0.72);
}

[data-theme="dark"] .theme-glyph {
  color: var(--orange);
}

[data-theme="dark"] .theme-icon-moon {
  opacity: 0;
  transform: rotate(55deg) scale(0.72);
}

[data-theme="dark"] .theme-icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(420px, 0.94fr) minmax(560px, 1.36fr);
  width: min(1440px, calc(100% - 64px));
  min-height: calc(100svh - 190px);
  margin: 0 auto;
}

.hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: 640px;
  padding: 42px clamp(38px, 5vw, 84px) 44px 0;
  animation: copy-register 660ms 130ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(2.6rem, 4vw, 4.4rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}

.copy-body {
  max-width: 590px;
  margin-top: 34px;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.58;
}

.copy-body p {
  margin: 0 0 16px;
}

.copy-steps {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: copy-step;
}

.copy-steps li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 32px;
  counter-increment: copy-step;
}

.copy-steps li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--orange);
  content: counter(copy-step) ".";
  font-weight: 750;
}

.copy-steps strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-weight: 700;
}

/* What the profile card is, under step 1: sets expectations before the chat
   opens, so the card reads as one angle on the company, not a verdict.
   Collapsed by default — open, it pushed the chat button below the fold on a
   1440x900 laptop and off the first screen on a phone. */
.copy-step-detail {
  margin-top: 6px;
  font-size: 0.92em;
}

.copy-step-detail summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 6px;
  color: var(--lake);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.copy-step-detail summary::-webkit-details-marker {
  display: none;
}

.copy-step-detail summary::after {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  rotate: 45deg;
  translate: 0 -2px;
}

.copy-step-detail[open] summary::after {
  rotate: 225deg;
  translate: 0 2px;
}

.copy-step-detail summary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.copy-step-detail summary:focus-visible {
  border-radius: 2px;
  outline: 3px solid var(--water);
  outline-offset: 4px;
}

:root[data-theme="dark"] .copy-step-detail summary {
  color: var(--orange);
}

.copy-step-detail p {
  margin: 4px 0 8px;
}

.copy-step-detail p:last-child {
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .copy-step-detail summary::after {
    transition:
      rotate 160ms ease,
      translate 160ms ease;
  }
}

.primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(100%, 510px);
  min-height: 62px;
  margin-top: 13px;
  padding: 8px 9px 8px 24px;
  border: 0;
  border-radius: 5px;
  background: var(--lake);
  box-shadow: 0 12px 28px rgba(53, 77, 115, 0.2);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  text-align: left;
  transition:
    scale 140ms ease,
    translate 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.primary-cta:hover {
  translate: 0 -2px;
  background: #283c60;
  box-shadow: 0 17px 34px rgba(53, 77, 115, 0.28);
}

.primary-cta:active {
  scale: 0.985;
  translate: 0;
  box-shadow: 0 8px 20px rgba(53, 77, 115, 0.22);
}

.cta-arrow {
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  place-items: center;
  border-radius: 3px;
  background: var(--orange);
  color: #111;
  font-size: 1.4rem;
  transition:
    box-shadow 220ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.primary-cta:hover .cta-arrow {
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.18);
  transform: translate3d(2px, -2px, 0);
}

.primary-cta:active .cta-arrow {
  box-shadow: none;
  transform: translate3d(0, 0, 0);
}

.hero-art {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 100%;
  margin: 0;
}

.hero-frame {
  position: relative;
  aspect-ratio: 1.34;
  overflow: hidden;
  background: var(--lake);
  box-shadow: var(--shadow);
  transition: box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-frame::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: var(--lake);
  content: "";
  pointer-events: none;
  animation: profile-curtain 760ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-image {
  position: absolute;
  inset: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: right center;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  will-change: transform;
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-image-dark {
  opacity: 0;
}

[data-theme="dark"] .hero-image-light {
  opacity: 0;
}

[data-theme="dark"] .hero-image-dark {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .hero-art:hover .hero-image {
    transform: translate3d(-2px, -1px, 0) scale(1.01);
  }

  .hero-art:hover .hero-frame {
    box-shadow: 0 30px 78px rgba(53, 77, 115, 0.24);
  }
}

.hero-frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.18), transparent 34%);
  content: "";
  pointer-events: none;
}

.hero-art figcaption {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: 26px;
  left: 28px;
  display: block;
  max-width: 310px;
  padding: 14px 16px;
  border-top: 1px solid var(--orange);
  background: var(--profile-note);
  box-shadow: 0 8px 28px rgba(17, 17, 17, 0.2);
  color: #111;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
  animation: profile-caption 460ms 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.partner-strip {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 28px;
  width: min(1440px, calc(100% - 64px));
  min-height: 106px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  animation: proof-register 520ms 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.partner-strip > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.partner-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  align-items: center;
  gap: clamp(20px, 4vw, 58px);
}

.partner-logos img {
  width: 100%;
  max-width: 180px;
  max-height: 38px;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) brightness(0);
  opacity: 0.76;
  transition:
    filter 360ms ease,
    opacity 360ms ease;
}

[data-theme="dark"] .partner-logos img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.82;
}

.chat-backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 18px;
  background: rgba(10, 15, 25, 0.72);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 0s linear 360ms;
}

.chat-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.chat-dialog {
  display: flex;
  width: min(620px, 100%);
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translateX(35px);
  transition:
    opacity 220ms ease,
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chat-backdrop.is-open .chat-dialog {
  opacity: 1;
  transform: translateX(0);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 94px;
  padding: 20px 22px 18px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--lake);
  color: white;
}

.chat-header p {
  margin: 0 0 4px;
  color: var(--water);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chat-header h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.1;
}

.chat-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.chat-header .chat-theme-toggle,
.chat-header .chat-close {
  display: grid;
  width: 48px;
  height: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  color: white;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    scale 120ms ease;
}

.chat-header .chat-theme-toggle:hover,
.chat-header .chat-close:hover {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.12);
}

.chat-header .chat-theme-toggle:active,
.chat-header .chat-close:active {
  scale: 0.97;
}

/* Revealed only once the agent has posted the session-end marker, so it can
   never offer to save a half-finished conversation. */
.chat-header .chat-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--orange);
  border-radius: 3px;
  background: var(--orange);
  color: #111;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  transition:
    background-color 160ms ease,
    opacity 160ms ease;
}

.chat-header .chat-save:hover {
  background: #ff7d4f;
}

.chat-header .chat-save:active {
  scale: 0.97;
}

.chat-header .chat-save[data-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.chat-save svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

@media (max-width: 560px) {
  .chat-header .chat-save {
    padding: 0;
    width: 48px;
    flex: 0 0 48px;
    justify-content: center;
  }

  .chat-save span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

.chat-theme-toggle .theme-glyph {
  color: var(--water);
}

[data-theme="dark"] .chat-theme-toggle .theme-glyph {
  color: var(--orange);
}

.chat-close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.chat-body {
  position: relative;
  display: grid;
  min-height: 0;
  flex: 1;
  background: var(--surface);
}

.widget {
  display: none;
  min-height: 0;
}

.widget.ready {
  display: block;
}

n8nchatui-inpage {
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc(100svh - 132px);
}

.chat-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 240px;
  padding: 32px;
  color: var(--muted);
  text-align: center;
}

.loading-mark {
  width: 20px;
  aspect-ratio: 1;
  border: 3px solid var(--mist);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

.chat-error {
  flex-direction: column;
}

.chat-error strong {
  color: var(--ink);
  font-size: 1.2rem;
}

.chat-error button {
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 3px;
  background: var(--orange);
  color: #111;
  cursor: pointer;
  font-weight: 700;
}

.card-preview {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 64px 24px 24px;
  background: rgba(10, 15, 25, 0.86);
}

.preview-stack {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: 0;
}

.card-preview img {
  display: block;
  max-width: min(720px, 92vw);
  max-height: calc(100svh - 204px);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  object-fit: contain;
}

.card-preview .preview-close {
  position: absolute;
  top: 18px;
  right: 20px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  background: transparent;
  color: white;
  cursor: pointer;
  font-weight: 650;
}

.preview-zoom {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: zoom-in;
  touch-action: manipulation;
  user-select: none;
}

.preview-hint {
  margin: -4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Zoomed: the stack turns into the scroller and the card shows at its native
   width. The close button sits outside the stack, so it stays in the corner
   however far the card is scrolled. */
.card-preview.is-zoomed {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: stretch;
  padding: 0;
}

.card-preview.is-zoomed .preview-stack {
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 76px 24px 80px;
}

.card-preview.is-zoomed .preview-zoom {
  width: max-content;
  margin: 0 auto;
  cursor: zoom-out;
}

.card-preview.is-zoomed img {
  width: 1080px;
  max-width: none;
  max-height: none;
}

.card-preview.is-zoomed .preview-share {
  display: none;
}

/* Transparent over the dark backdrop, but a zoomed card can sit right under
   it — without a fill the white label vanishes against the light card. */
.card-preview.is-zoomed .preview-close {
  z-index: 1;
  background: rgba(10, 15, 25, 0.82);
}

.card-preview.is-zoomed .preview-hint {
  position: fixed;
  bottom: 18px;
  left: 50%;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 15, 25, 0.82);
  color: white;
  pointer-events: none;
  translate: -50% 0;
  white-space: nowrap;
}

/* Same three share targets as the in-chat row, restyled for the dark modal.
   Populated by script.js only when the previewed image is a profile card. */
.preview-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.preview-share button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  background: transparent;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}

.preview-share button:hover {
  border-color: var(--orange);
  background: rgba(255, 255, 255, 0.08);
}

.preview-share svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: currentColor;
}

/* Archetype guide: what the card is and what to do with it. Sits over the
   chat like the card preview does, but as a readable sheet in the page theme
   rather than a dark image stage. The sheet scrolls; its header stays put so
   the close button is always one tap away. */
.card-guide {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 15, 25, 0.86);
  animation: guide-fade 180ms ease both;
}

.guide-sheet {
  width: min(640px, 100%);
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  color: var(--ink);
  animation: guide-rise 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.guide-header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px 12px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.guide-eyebrow,
.guide-reflect-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.guide-close {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-weight: 650;
}

.guide-close:hover {
  border-color: var(--orange);
}

.guide-content {
  padding: 24px 28px 28px;
}

.guide-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.guide-title img {
  width: 68px;
  height: auto;
  flex: 0 0 68px;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(17, 17, 17, 0.22);
}

.guide-title h2 {
  margin: 0;
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.08;
}

.guide-frame,
.guide-outro {
  color: var(--muted);
  font-size: 0.93rem;
}

.guide-frame {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.guide-lead {
  margin: 0 0 14px;
  font-weight: 650;
}

.guide-body p {
  margin: 0 0 14px;
}

.guide-body strong {
  font-weight: 700;
}

.guide-reflect {
  margin: 22px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--orange);
  border-radius: 3px;
  background: var(--hero-wash);
}

.guide-reflect-text {
  margin: 6px 0 0;
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.45;
}

.guide-outro {
  margin: 0 0 22px;
}

.guide-return {
  min-height: 48px;
  padding: 10px 22px;
  border: 0;
  border-radius: 5px;
  background: var(--lake);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.guide-return:hover {
  background: #2b4063;
}

:root[data-theme="dark"] .guide-return {
  background: var(--orange);
  color: #111;
}

:root[data-theme="dark"] .guide-return:hover {
  background: #f5825c;
}

@keyframes guide-fade {
  from {
    opacity: 0;
  }
}

@keyframes guide-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (max-width: 560px) {
  .card-guide {
    padding: 12px;
  }

  .guide-sheet {
    max-height: calc(100svh - 24px);
  }

  .guide-header {
    padding-left: 18px;
    padding-right: 10px;
  }

  .guide-content {
    padding: 20px 18px 22px;
  }

  .guide-title {
    gap: 14px;
  }

  .guide-title img {
    width: 54px;
    flex-basis: 54px;
  }

  .guide-return {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-guide,
  .guide-sheet {
    animation: none;
  }
}

@keyframes spin {
  to { rotate: 360deg; }
}

@keyframes profile-curtain {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-100% - 2px), 0, 0);
  }
}

@keyframes profile-caption {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.7;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes header-register {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-8px);
  }
  to {
    clip-path: inset(0);
    transform: translateY(0);
  }
}

@keyframes copy-register {
  from {
    clip-path: inset(0 100% 0 0);
    filter: blur(3px);
    transform: translateX(-10px);
  }
  to {
    clip-path: inset(0);
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes field-register {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes proof-register {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(8px);
  }
  to {
    clip-path: inset(0);
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .hero {
    background: var(--paper);
  }

  .orange-field {
    width: 12%;
    height: 54%;
  }

  .hero-grid {
    grid-template-columns: minmax(350px, 0.88fr) minmax(430px, 1.12fr);
  }

  .hero-copy {
    padding-right: 34px;
  }

  h1 {
    font-size: clamp(3.6rem, 7vw, 5rem);
  }

  .hero-art {
    align-self: center;
  }

  .hero-frame {
    aspect-ratio: 1.08;
  }

  .hero-art figcaption {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    max-width: none;
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.12);
  }

}

@media (max-width: 844px) {
  .site-header,
  .hero-grid,
  .partner-strip {
    width: min(100% - 38px, 680px);
  }

  .site-header {
    padding-top: 20px;
  }

  .orange-field {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 19%;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy {
    max-width: none;
    padding: 56px 0 44px;
  }

  h1 {
    font-size: clamp(2.6rem, 7vw, 4rem);
  }

  .copy-body {
    max-width: 650px;
    font-size: 1rem;
  }

  .hero-art {
    min-height: 0;
  }

  .hero-frame {
    aspect-ratio: 4 / 3;
  }

  .partner-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 0 34px;
    border-top: 0;
  }

  .partner-strip > p {
    color: #111;
  }

  .partner-logos {
    gap: 24px;
  }
}

@media (max-width: 560px) {
  .site-header,
  .hero-grid,
  .partner-strip {
    width: calc(100% - 32px);
  }

  .brand {
    min-height: 44px;
    font-size: 0.74rem;
  }

  .brand-mark {
    width: 36px;
  }

  .theme-toggle span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .theme-toggle {
    width: 44px;
    justify-content: center;
    padding: 0;
  }

  .hero-copy {
    padding-top: 42px;
  }

  h1 {
    max-width: 100%;
    font-size: clamp(2.15rem, 8.6vw, 3.1rem);
  }

  .copy-body {
    margin-top: 28px;
    line-height: 1.55;
  }

  .copy-body > p:nth-child(2) {
    font-size: 0.92rem;
  }

  .primary-cta {
    gap: 14px;
    min-height: 66px;
    padding-left: 18px;
    font-size: 0.9rem;
  }

  .hero-art figcaption {
    padding-inline: 16px;
  }

  .partner-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 30px;
  }

  .partner-logos img {
    max-height: 32px;
  }

  .chat-backdrop {
    padding: 0;
  }

  .chat-dialog {
    border: 0;
    border-radius: 0;
  }

  .chat-header {
    min-height: 84px;
    padding: 16px;
  }

  .chat-header h2 {
    font-size: 1.12rem;
  }

  n8nchatui-inpage {
    min-height: calc(100svh - 84px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.theme-has-changed {
    transition: none;
  }

  .orange-field,
  .site-header,
  .hero-copy,
  .hero-frame,
  .hero-art figcaption,
  .partner-strip {
    animation: none;
  }

  .hero-frame::before {
    animation: none;
    transform: translate3d(calc(-100% - 2px), 0, 0);
  }

  .hero-art:hover .hero-image {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .primary-cta:hover {
    filter: none;
    transform: none;
    translate: none;
  }

  .hero-art:hover .hero-frame {
    box-shadow: var(--shadow);
  }

  .theme-toggle:active,
  .primary-cta:active,
  .chat-header button:active {
    scale: 1;
  }

  .chat-backdrop {
    transition:
      opacity 120ms ease,
      visibility 0s linear 120ms;
  }

  .chat-backdrop.is-open {
    transition-delay: 0s;
  }

  .chat-dialog,
  .chat-backdrop.is-open .chat-dialog {
    transform: none;
    transition: opacity 120ms ease;
  }
}