@font-face {
  font-family: Geist;
  src: url('/landing/rev8/geist.woff') format('woff');
  font-weight: 100 900;
  font-display: swap
}

@font-face {
  font-family: Newsreader;
  src: url('/landing/rev8/newsreader.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap
}

:root {
  --paper: #fbfaf7;
  --white: #fff;
  --ink: #242620;
  --muted: #62655d;
  --line: #dedfd7;
  --orange: #c64b14;
  --bright: #f15a24;
  --peach: #fff0e4;
  --sage: #edf0e8;
  --radius: 20px;
  --wrap: 1240px;
  color-scheme: light;
  font-family: Geist,Arial,sans-serif;
  color: var(--ink);
  background: var(--paper)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased
}

button,input,select {
  font: inherit
}

button,a,input,select,summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: #f15a2428
}

button,a,summary {
  cursor: pointer
}

a {
  color: inherit;
  text-decoration: none
}

button {
  color: inherit
}

button:disabled {
  cursor: not-allowed;
  opacity: .6
}

button {
  border: 0
}

img {
  max-width: 100%;
  display: block
}

p {
  line-height: 1.65;
  margin: 0
}

h1,h2,h3 {
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance
}

h2 {
  font-size: clamp(36px,4vw,54px)
}

h3 {
  font-size: 25px
}

ul,ol {
  padding: 0;
  margin: 0;
  list-style: none
}

[hidden] {
  display: none!important
}

.icon {
  width: 21px;
  height: 21px;
  flex: none;
  vertical-align: middle
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px
}

::selection {
  background: #facfb7;
  color: var(--ink)
}

.wrap {
  width: min(var(--wrap),calc(100% - 96px));
  margin-inline: auto
}

.section {
  padding-block: 106px
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .14em;
  font-weight: 650;
  margin-bottom: 25px
}

.orange-dot {
  width: 7px;
  height: 7px;
  background: var(--orange);
  border-radius: 50%
}

.section-number {
  color: var(--orange);
  border: 1px solid #e5ba9e;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: 0
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 54px;
  padding: 14px 22px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  transition: transform .18s,background-color .18s,box-shadow .18s
}

.button:hover {
  transform: translateY(-2px)
}

.primary {
  background: var(--orange);
  color: white;
  box-shadow: 0 3px 0 #92330616
}

.primary:hover {
  background: #a83d0c;
  box-shadow: 0 6px 20px #a8431424
}

.secondary {
  border: 1px solid #cdd0c4;
  background: transparent
}

.secondary:hover {
  background: var(--sage)
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 550;
  min-height: 44px
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 16px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-160%)
}

.skip-link:focus {
  transform: none
}

.small-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .13em;
  line-height: 1.4
}

.preview-banner {
  background: #ebeee6;
  color: #4f5549;
  text-align: center;
  font-size: 10px;
  letter-spacing: .03em;
  padding: 7px 14px;
  line-height: 1.4
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fbfaf7f5;
  border-bottom: 1px solid #e7e8e1
}

.nav-inner {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 24px
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  flex: none
}

.brand img {
  width: 43px;
  height: 43px;
  object-fit: contain
}

.brand>span {
  font-size: 34px;
  letter-spacing: -2px;
  font-weight: 650
}

.brand-dot {
  color: var(--orange)
}

.desktop-nav {
  display: flex;
  gap: 32px;
  font-size: 13px
}

.desktop-nav a {
  padding-block: 16px
}

.desktop-nav a:hover {
  color: var(--orange)
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px
}

.languages {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600
}

.languages a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  color: var(--muted)
}

.languages a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px
}

.languages>span {
  color: #bdc0b5
}

.nav-cta {
  background: var(--ink);
  color: #fff;
  min-height: 44px;
  font-size: 12px;
  padding: 11px 17px;
  gap: 18px
}

.nav-cta:hover {
  background: #444a3b
}

.menu-button {
  display: none;
  background: none;
  width: 44px;
  height: 44px;
  padding: 10px
}

.menu-button span {
  display: block;
  width: 23px;
  height: 1.5px;
  background: var(--ink);
  margin: 6px 0
}

.mobile-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 20px 24px #33331c12
}

.mobile-menu a {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line)
}

.mobile-menu a:last-child {
  border: 0;
  color: var(--orange)
}

.section-heading {
  max-width: 660px
}

.section-heading>p {
  color: var(--muted);
  font-size: 16px;
  max-width: 560px;
  margin-top: 22px
}

.steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 52px;
  margin-top: 54px
}

.steps li {
  border-top: 1px solid var(--line);
  padding-top: 24px
}

.step-symbol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px
}

.step-symbol>.icon {
  color: var(--orange);
  width: 29px;
  height: 29px
}

.step-symbol>span {
  font-size: 12px;
  color: var(--muted)
}

.steps h3 {
  font-size: 22px;
  margin-bottom: 14px
}

.steps p {
  font-size: 14px;
  color: var(--muted)
}

.examples {
  background: var(--sage);
  border-top: 1px solid #e0e4d8;
  border-bottom: 1px solid #e0e4d8
}

.examples-heading {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 43px
}

.examples-heading>p {
  max-width: 380px;
  justify-self: end;
  font-size: 14px;
  color: var(--muted)
}

.demo-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid #d9ded1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 50px #36492608
}

.demo-editor {
  padding: 36px 42px
}

.demo-label {
  display: inline-flex;
  border: 1px solid #d3dacc;
  border-radius: 30px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: .04em;
  color: #58604d
}

.segment-controls {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #f0f2ed;
  border-radius: 9px;
  margin-top: 24px
}

.segment-button {
  background: transparent;
  flex: 1;
  font-size: 12px;
  border-radius: 6px;
  padding: 12px 8px;
  min-height: 45px;
  transition: background-color .2s,box-shadow .2s
}

.segment-button[aria-pressed=true] {
  background: white;
  box-shadow: 0 2px 5px #25331412;
  font-weight: 600
}

.segment-button:hover {
  background: #fff
}

.demo-offer {
  padding: 32px 0 26px
}

.demo-offer .small-label {
  color: var(--muted)
}

.demo-offer h3 {
  font-size: 25px;
  margin-top: 11px
}

.demo-offer>p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 13px;
  min-height: 64px
}

.demo-step-controls {
  border-top: 1px solid var(--line)
}

.demo-step-controls button {
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 18px 4px;
  text-align: left;
  font-size: 13px;
  min-height: 55px
}

.demo-step-controls button>span {
  font-size: 10px;
  color: var(--muted)
}

.demo-step-controls button>.icon {
  margin-left: auto;
  width: 17px;
  height: 17px;
  opacity: .3
}

.demo-step-controls button[aria-pressed=true] {
  color: var(--orange);
  font-weight: 600
}

.demo-step-controls button[aria-pressed=true]>.icon {
  opacity: 1
}

.demo-step-controls button:hover {
  background: #fafaf7
}

.demo-step-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 18px;
  min-height: 60px
}

.demo-output {
  background: #f8f7f2;
  padding: 26px 44px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  transition: background-color .2s
}

.output-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 23px
}

.output-top>span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #646957
}

.output-top .icon {
  width: 15px;
  height: 15px;
  color: var(--orange)
}

.output-format {
  font-size: 10px;
  color: #707561;
  border: 1px solid #d3d7c9;
  padding: 4px 6px;
  border-radius: 4px
}

.showcase-ad {
  width: min(100%,325px);
  aspect-ratio: 4/5;
  position: relative;
  background: #efddcd;
  border: 7px solid #fff;
  border-radius: 5px;
  box-shadow: 0 12px 25px #55402214;
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform .25s
}

.showcase-ad>.small-label {
  display: block;
  position: relative;
  z-index: 2;
  margin: 20px 22px 0
}

.showcase-ad>h3 {
  position: relative;
  z-index: 2;
  font-size: 29px;
  line-height: 1.05;
  margin: 17px 22px 0;
  letter-spacing: -.055em;
  max-width: 260px
}

.large-art {
  top: 125px
}

.large-art .art-wall {
  height: 210px;
  width: 167px;
  left: 26%;
  bottom: 0
}

.large-art .art-wall>div {
  height: 152px;
  width: 85px;
  left: 33px;
  top: 47px
}

.large-art .art-sun {
  width: 100px;
  height: 100px;
  right: 7px;
  top: 5px
}

.large-art .art-steps {
  width: 245px;
  left: 16%
}

.showcase-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 14px 18px;
  background: #fffbf2ec;
  font-size: 10px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 15px
}

.showcase-footer .icon {
  margin-left: auto;
  width: 18px;
  height: 18px
}

.showcase-product>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.output-note {
  font-size: 10px;
  color: var(--muted);
  margin-top: 22px;
  max-width: 325px;
  text-align: center
}

.demo-output[data-step="1"] .showcase-ad {
  transform: rotate(2deg)
}

.demo-output[data-step="2"] .showcase-ad {
  transform: rotate(0deg)
}

.demo-output[data-step="2"] {
  background: #edf0e6
}

.audience-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  margin-top: 27px
}

.audience-summary p {
  font-size: 12px;
  color: var(--muted)
}

.audience-summary strong {
  color: var(--ink);
  display: block;
  margin-bottom: 5px;
  font-size: 14px
}

.founder {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 110px;
  align-items: center
}

.founder-picture {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: center;
  border-radius: 120px 120px 16px 16px;
  overflow: hidden;
  aspect-ratio: 4/4.7;
  background: #4a433d
}

.founder-picture>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%
}

.portrait-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 50px 26px 24px;
  background: linear-gradient(transparent,#151813d9);
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 10px
}

.portrait-caption strong {
  font-size: 24px;
  letter-spacing: -.03em;
  font-weight: 500
}

.portrait-caption span {
  font-size: 12px;
  color: #e4e8dc
}

.portrait-note {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  border: 1px solid #ffffff40;
  background: #292c27e6;
  color: #fff;
  border-radius: 25px;
  padding: 8px 12px;
  font-size: 10px
}

.founder-copy>p {
  font-size: 16px;
  color: var(--muted);
  margin-top: 24px;
  max-width: 535px
}

.human-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px
}

.human-mark .icon {
  color: var(--orange)
}

.pricing {
  background: #f4f3ed;
  border-block: 1px solid #e7e6dc
}

.centered {
  text-align: center;
  max-width: 750px;
  margin-inline: auto
}

.centered .eyebrow {
  justify-content: center
}

.centered>p {
  margin-inline: auto
}

.setup-band {
  margin-top: 43px;
  padding: 22px 26px;
  border: 1px solid #dfd8c7;
  background: #fbf7ed;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 13px
}

.setup-icon {
  background: #f7e5ca;
  color: var(--orange);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: none
}

.setup-band strong {
  font-size: 14px;
  font-weight: 550
}

.setup-band span {
  font-size: 11px;
  color: var(--muted)
}

.setup-price {
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.setup-price>strong {
  font-size: 22px;
  letter-spacing: -.035em
}

.setup-price small {
  font-size: 10px;
  letter-spacing: 0;
  margin-left: 6px;
  color: #85511d
}

.plans {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 21px
}

.plan {
  border: 1px solid #daddd1;
  background: #fbfbf8;
  border-radius: 16px;
  padding: 30px 25px
}

.plan-featured {
  background: #fff;
  border-color: #c98a61;
  box-shadow: inset 0 3px 0 var(--orange),0 16px 30px #45351908
}

.plan-heading {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.plan-heading .icon {
  color: var(--orange)
}

.plan-heading h3 {
  font-size: 28px
}

.plan-description {
  font-size: 12px;
  color: var(--muted);
  min-height: 59px;
  margin-top: 15px
}

.plan-price {
  margin: 23px 0 25px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums
}

.plan-price strong {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.05em
}

.plan-price>span {
  font-size: 12px;
  color: var(--muted)
}

.plan-extra {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  margin: -12px 0 18px;
}

.plan>.button {
  width: 100%;
  font-size: 12px;
  justify-content: space-between
}

.features {
  border-top: 1px solid var(--line);
  margin-top: 27px;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.features li {
  display: flex;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5
}

.features strong {
  font-size: 13px;
  font-weight: 650
}

.features .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: #5a7350
}

.price-disclosure {
  font-size: 12px;
  margin-top: 24px;
  line-height: 1.8;
  text-align: center
}

.price-disclosure a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 6px
}

.price-disclosure .icon {
  width: 15px;
  height: 15px
}

.legal-note {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  margin-top: 7px
}

.scope-details {
  margin-top: 26px;
  border-block: 1px solid var(--line);
  font-size: 12px
}

.scope-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-weight: 550;
  gap: 20px
}

.scope-details>div {
  padding-bottom: 20px;
  max-width: 870px;
  color: var(--muted)
}

.scope-details p+p {
  margin-top: 14px
}

summary {
  list-style: none
}

summary::-webkit-details-marker {
  display: none
}

details[open]>summary>.icon {
  transform: rotate(45deg)
}

summary>.icon {
  transition: transform .2s;
  width: 18px;
  height: 18px
}

.enterprise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 28px 0
}

.enterprise>div {
  display: flex;
  align-items: center;
  gap: 16px
}

.enterprise strong {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -.03em
}

.enterprise p {
  font-size: 12px;
  color: var(--muted)
}

.enterprise a {
  font-size: 12px
}

.calculator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border-radius: 20px;
  background: #e9edde;
  border: 1px solid #d7deca;
  margin-top: 40px;
  padding: 42px;
  scroll-margin-top: 100px
}

.calculator-copy .eyebrow {
  font-size: 10px
}

.calculator-copy h3 {
  font-size: 34px;
  max-width: 380px
}

.calculator-copy>p {
  font-size: 13px;
  color: #5d6650;
  margin-top: 20px;
  max-width: 400px
}

.fee-tiers {
  margin-top: 25px;
  display: grid;
  gap: 9px
}

.fee-tiers li {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 11px;
  color: #5d6650
}

.fee-tiers strong {
  font-size: 18px;
  font-weight: 500;
  color: #414e31;
  min-width: 42px;
  letter-spacing: -.05em
}

.calculator-form {
  min-width: 0;
  background: #fbfcf7;
  border-radius: 13px;
  padding: 25px;
  border: 1px solid #d6ddcb
}

.calculator-fields {
  display: grid;
  grid-template-columns: .7fr 1fr;
  gap: 16px
}

label {
  display: block;
  font-size: 11px;
  font-weight: 550;
  margin-bottom: 8px
}

select,input {
  min-width: 0;
  width: 100%;
  height: 46px;
  background: #fff;
  color: var(--ink);
  border: 1px solid #cdd3c0;
  border-radius: 7px;
  padding: 10px 11px;
  font-size: 14px
}

select {
  padding-right: 24px
}

.currency-input {
  position: relative
}

.currency-input input {
  padding-right: 30px
}

.currency-input>span {
  position: absolute;
  right: 12px;
  top: 14px;
  font-size: 13px;
  color: var(--muted)
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield
}

input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.cost-lines {
  margin: 25px 0 0
}

.cost-lines>div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
  padding: 7px 0
}

.cost-lines dt {
  color: var(--muted);
  line-height: 1.4
}

.cost-lines dd {
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

.cost-lines .cost-total {
  border-top: 1px solid #d6dccb;
  margin-top: 10px;
  padding-top: 17px;
  align-items: center
}

.cost-total dt {
  max-width: 185px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 550
}

.cost-total dd {
  font-size: 27px;
  letter-spacing: -.05em
}

.setup-addition {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 15px
}

.setup-addition strong {
  white-space: nowrap;
  font-weight: 500
}

.calculator-note {
  font-size: 9px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 19px
}

.field-error {
  color: #9b331b;
  font-size: 11px;
  margin-top: 12px
}

.calculator-form:has([aria-invalid=true]) {
  border-color: #b65a37
}

.faq {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px
}

.faq h2 {
  max-width: 400px
}

.faq-items {
  border-top: 1px solid var(--line)
}

.faq-items details {
  border-bottom: 1px solid var(--line)
}

.faq-items summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 550
}

.faq-items summary:hover {
  color: var(--orange)
}

.faq-items details>p {
  padding: 0 30px 24px 0;
  font-size: 13px;
  color: var(--muted)
}

.contact-section {
  background: #efe9db;
  position: relative;
  isolation: isolate;
  border: 1px solid #e1d6c3;
  border-radius: 22px;
  padding: 65px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 65px;
  overflow: clip
}

.contact-copy>h2 {
  font-size: 46px
}

.contact-copy>p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 20px;
  max-width: 450px
}

.contact-action {
  align-self: center
}

.contact-action .button {
  width: 100%;
  justify-content: space-between;
  margin-top: 14px
}

.contact-note {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 14px
}

.selection-status {
  background: #fff9ee;
  border: 1px solid #d4c5ab;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  padding: 14px;
  margin-top: 15px
}

.contact-watermark {
  position: absolute;
  bottom: -125px;
  left: 20%;
  font-weight: 650;
  font-size: 410px;
  letter-spacing: -50px;
  line-height: 1;
  color: #dcd0b826;
  z-index: -1;
  pointer-events: none
}

.footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 45px;
  padding-block: 50px 28px
}

.footer .brand {
  margin-left: -6px
}

.footer>div>p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 9px
}

.footer>nav {
  display: flex;
  gap: 28px;
  font-size: 12px
}

.footer nav a {
  min-height: 44px;
  display: flex;
  align-items: center
}

.footer nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px
}

.footer-note {
  grid-column: 1/-1;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px
}

/* Separate the three payments before asking the visitor to choose a plan. */
.pricing-clear .payment-routing {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin-top: 42px;
  border: 0;
  background: none;
}
.pricing-clear .payment-domain,
.pricing-clear .payment-routing > div + div {
  padding: 28px;
  border: 1px solid #c6b79d66;
  border-radius: 24px;
  background: linear-gradient(150deg, #fffefbe8, #f9f5ebcc);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px -24px #62401b50;
}
.pricing-clear .payment-domain:nth-child(2) {
  background: linear-gradient(145deg, #fff4e6e8, #fffaf4cc);
  border-color: #d79b695e;
}
.pricing-clear .payment-domain:nth-child(3) {
  background: linear-gradient(145deg, #f3f5eae8, #fcfcf7cc);
  border-color: #b9c0a16b;
}
.payment-domain-top { display: flex; align-items: center; gap: 12px; }
.payment-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid #b9a58455;
  border-radius: 50%;
  color: #78684f;
  font-size: 11px;
  letter-spacing: .02em;
}
.pricing-clear .payment-label { color: #78603f; font-size: 12px; letter-spacing: .02em; }
.pricing-clear .payment-routing h3 { margin: 23px 0 18px; font-size: 27px; line-height: 1.15; max-width: 230px; }
.payment-amount { display: block; font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; }
.payment-domain:first-child .payment-amount { font-size: 27px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.payment-detail { display: block; margin-top: 7px; font-size: 13px; line-height: 1.55; color: #665d50; }
.pricing-clear .payment-routing p { margin-top: 18px; font-size: 1rem; line-height: 1.6; color: #625a4c; }
.pricing-clear .setup-band { margin-top: 28px; }
.pricing-clear .setup-copy p,
.pricing-clear .setup-includes li > span,
.pricing-clear .setup-includes strong { font-size: 1rem; }
.plan-section-heading { margin: 62px auto 0; max-width: 670px; text-align: center; }
.plan-section-heading h3 { font-size: clamp(28px, 3vw, 36px); line-height: 1.12; }
.plan-section-heading p { margin-top: 15px; font-size: 1rem; color: var(--muted); line-height: 1.6; }
.pricing-clear .plan-extra { color: #6b4d2d; font-size: 14px; }
.pricing-clear .plan-budget { color: #5b624b; font-size: 14px; }
.pricing-clear .plan-description { font-size: 1rem; min-height: 84px; }
.pricing-clear .features li,
.pricing-clear .features strong { font-size: 1rem; }
.pricing-clear .price-disclosure { margin-top: 28px; font-size: 1rem; }
.pricing-clear .price-disclosure a { min-height: 44px; }
.pricing-clear .calculator-copy > p,
.pricing-clear .fee-tiers li { font-size: 1rem; }
.pricing-clear .fee-tiers { gap: 15px; }
.pricing-clear .fee-tiers li { align-items: baseline; }
.pricing-clear .cost-lines > div { font-size: 15px; padding-block: 10px; }
.pricing-clear .cost-lines .cost-plaith {
  padding: 17px 14px;
  margin-block: 12px;
  border: 1px solid #d5af8b6b;
  border-radius: 12px;
  background: #fff3e5;
}
.pricing-clear .cost-plaith dd,
.pricing-clear .cost-meta dd { font-weight: 600; }
.pricing-clear .cost-lines .cost-meta { padding: 14px; border: 1px solid #ccd3b66b; border-radius: 12px; background: #f3f5ec; }
.pricing-clear .cost-meta dt { color: #4e5b3c; }
.pricing-clear .cost-lines .cost-total { margin-top: 18px; padding-top: 22px; flex-wrap: wrap; }
.pricing-clear .cost-total dt { font-size: 15px; }
.pricing-clear .cost-total dd { margin-left: auto; font-size: clamp(26px, 2.5vw, 34px); }
.pricing-clear .setup-addition { margin-top: 24px; padding-top: 18px; border-top: 1px dashed #b7a78f80; font-size: 14px; }
.pricing-clear .calculator-note { font-size: 14px; }
@media (max-width: 1050px) {
  .pricing-clear .payment-routing { gap: 12px; }
  .pricing-clear .payment-domain,
  .pricing-clear .payment-routing > div + div { padding: 23px; }
  .pricing-clear .payment-routing h3 { font-size: 24px; }
}
@media (max-width: 900px) {
  .pricing-clear .payment-routing { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
  .pricing-clear .payment-routing h3 { max-width: none; margin-top: 17px; }
  .pricing-clear .plan-description { min-height: 0; }
}
@media (max-width: 600px) {
  .pricing-clear .payment-routing { margin-top: 30px; gap: 14px; }
  .plan-section-heading { margin-top: 42px; }
  .pricing-clear .cost-lines .cost-plaith,
  .pricing-clear .cost-lines .cost-meta { padding: 14px 10px; }
  .pricing-clear .cost-lines > div { gap: 10px; font-size: 14px; }
  .pricing-clear .cost-total dt { font-size: 14px; }
  .pricing-clear .cost-total dd { font-size: 27px; }
  .pricing-clear .setup-addition { flex-wrap: wrap; }
  .pricing-clear .setup-addition strong { margin-left: auto; }
}

@media (prefers-reduced-motion:no-preference) {
  .hero-copy {
    animation: enter .65s both
  }
  .hero-stage {
    animation: enter .85s .15s both
  }
  .hero-ad {
    animation: card-enter .9s .2s both
  }
  @keyframes enter {
    from {
      opacity: 0;
      translate: 0 16px
    }
    to {
      opacity: 1;
      translate: 0 0
    }
  }
  @keyframes card-enter {
    from {
      opacity: 0;
      translate: 0 20px
    }
    to {
      opacity: 1;
      translate: 0 0
    }
  }
}

@media(min-width:1440px) {
  .hero {
    padding-top: 92px
  }
  .hero-stage {
    margin-top: 8px
  }
  .hero-copy {
    padding-bottom: 65px
  }
}

@media(max-width:1150px) {
  .wrap {
    width: calc(100% - 64px)
  }
  .desktop-nav {
    gap: 20px
  }
  .hero {
    column-gap: 24px
  }
  .hero h1 {
    font-size: 64px
  }
  .hero-stage {
    min-height: 530px
  }
  .hero-ad.service-ad {
    height: 285px;
    top: 120px
  }
  .hero-ad.product-ad {
    height: 324px;
    top: 100px
  }
  .product-ad-copy>p {
    font-size: 26px
  }
  .service-ad>p {
    font-size: 25px
  }
  .iteration-chip {
    top: 418px;
    padding: 15px
  }
  .stage-caption {
    top: 513px
  }
  .trust-strip {
    align-items: start
  }
  .trust-strip>p {
    max-width: 200px
  }
  .trust-strip>div {
    gap: 18px
  }
  .founder {
    gap: 65px
  }
  .faq {
    gap: 55px
  }
  .calculator {
    gap: 30px;
    padding: 30px
  }
  .plan {
    padding: 25px 20px
  }
  .plan-price strong {
    font-size: 35px
  }
  .demo-editor {
    padding: 30px
  }
  .demo-output {
    padding: 26px 30px 20px
  }
  .contact-section {
    padding: 45px;
    gap: 45px
  }
}

@media(max-width:900px) {
  .desktop-nav {
    display: none
  }
  .nav-inner {
    height: 72px
  }
  .hero {
    padding-top: 55px;
    grid-template-columns: 1.05fr 1fr;
    column-gap: 10px
  }
  .hero h1 {
    font-size: 52px
  }
  .hero-description {
    font-size: 14px
  }
  .hero-actions {
    gap: 16px;
    flex-wrap: wrap
  }
  .hero-cost {
    font-size: 10px
  }
  .hero-stage {
    margin-top: 20px;
    min-height: 535px
  }
  .hero-ad.product-ad {
    top: 105px;
    height: 295px;
    width: 59%
  }
  .hero-ad.service-ad {
    height: 250px;
    width: 52%;
    top: 132px
  }
  .product-ad-copy {
    left: 12px;
    right: 9px;
    top: 15px
  }
  .product-ad-copy>p {
    font-size: 23px
  }
  .service-ad>p {
    font-size: 22px
  }
  .ad-top {
    padding: 13px 10px;
    font-size: 7px
  }
  .input-chip {
    left: 5px;
    top: 27px;
    padding: 11px 13px
  }
  .iteration-chip {
    left: 0;
    right: 0;
    top: 416px;
    gap: 8px
  }
  .iteration-chip strong {
    font-size: 10px
  }
  .iteration-chip div>span {
    font-size: 9px
  }
  .tiny-spark {
    font-size: 20px
  }
  .stage-caption {
    font-size: 6px;
    top: 496px
  }
  .hero .trust-strip {
    display: block
  }
  .trust-strip>p {
    max-width: none;
    margin-bottom: 12px
  }
  .trust-strip>div {
    justify-content: space-between
  }
  .section {
    padding-block: 76px
  }
  .steps {
    gap: 25px
  }
  .steps h3 {
    font-size: 20px
  }
  .steps p {
    font-size: 13px
  }
  .examples-heading {
    gap: 30px
  }
  .demo-editor {
    padding: 25px
  }
  .demo-output {
    padding: 25px 20px
  }
  .segment-button {
    font-size: 10px
  }
  .showcase-ad>h3 {
    font-size: 24px;
    margin-inline: 16px
  }
  .showcase-ad>.small-label {
    margin-left: 16px
  }
  .output-top>span:first-child {
    font-size: 9px
  }
  .output-top {
    gap: 5px
  }
  .founder {
    gap: 45px
  }
  .founder h2 {
    font-size: 40px
  }
  .founder-copy>p {
    font-size: 14px
  }
  .plans {
    gap: 10px
  }
  .plan {
    padding: 23px 16px
  }
  .plan-price strong {
    font-size: 30px
  }
  .plan-heading h3 {
    font-size: 25px
  }
  .plan>.button {
    font-size: 10px;
    padding: 12px;
    gap: 8px
  }
  .features li {
    font-size: 11px
  }
  .plan-description {
    font-size: 11px;
    min-height: 68px
  }
  .calculator {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px
  }
  .calculator-copy {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0 30px
  }
  .calculator-copy .eyebrow {
    grid-column: 1/-1
  }
  .calculator-copy h3 {
    grid-column: 1
  }
  .calculator-copy>p {
    grid-column: 1
  }
  .fee-tiers {
    grid-column: 2;
    grid-row: 2/4;
    margin: 0;
    align-content: center
  }
  .calculator-fields {
    grid-template-columns: 1fr 1fr
  }
  .contact-section {
    padding: 38px;
    gap: 35px
  }
  .contact-copy>h2 {
    font-size: 38px
  }
  .faq {
    grid-template-columns: 1fr 1.35fr;
    gap: 40px
  }
  .faq h2 {
    font-size: 38px
  }
  .footer {
    gap: 30px
  }
  .footer>nav {
    gap: 20px
  }
}

@media(max-width:700px) {
  html {
    scroll-padding-top: 90px
  }
  .wrap {
    width: calc(100% - 40px)
  }
  .preview-banner {
    font-size: 9px;
    padding: 6px 10px
  }
  .nav-inner {
    height: 66px;
    gap: 12px
  }
  .brand img {
    width: 36px;
    height: 36px
  }
  .brand>span {
    font-size: 30px
  }
  .nav-actions {
    gap: 10px
  }
  .nav-cta {
    display: none
  }
  .languages a {
    width: 44px;
    min-width: 44px
  }
  .menu-button {
    display: block
  }
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 39px
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: .12em;
    margin-bottom: 20px
  }
  .hero h1 {
    font-size: clamp(45px,10.9vw,68px);
    max-width: 560px;
    line-height: 1.04;
    letter-spacing: -.06em;
    text-wrap: initial
  }
  .hero-description {
    font-size: 14px;
    line-height: 1.65;
    max-width: 520px;
    margin-top: 23px
  }
  .hero-copy {
    padding-bottom: 0
  }
  .hero-actions {
    flex-wrap: nowrap;
    gap: 19px;
    margin-top: 24px
  }
  .hero-actions .button {
    font-size: 12px;
    padding: 14px 17px;
    gap: 14px;
    min-height: 50px
  }
  .hero-actions .text-link {
    font-size: 11px;
    gap: 6px
  }
  .hero-actions .text-link .icon {
    width: 16px
  }
  .hero-cost {
    font-size: 10px;
    max-width: 400px;
    margin-top: 14px
  }
  .hero-stage {
    width: min(450px,100%);
    align-self: center;
    height: 447px;
    min-height: 0;
    margin-top: 35px;
    margin-bottom: 15px
  }
  .input-chip {
    top: 8px;
    left: 6%;
    padding: 10px 12px
  }
  .input-chip>.icon {
    width: 24px;
    height: 24px
  }
  .input-chip span {
    font-size: 7px
  }
  .input-chip strong {
    font-size: 11px
  }
  .hero-ad.service-ad {
    top: 85px;
    left: 3%;
    width: 47%;
    height: 263px
  }
  .hero-ad.product-ad {
    top: 69px;
    right: 2%;
    width: 53%;
    height: 294px
  }
  .product-ad-copy {
    top: 15px;
    left: 14px
  }
  .product-ad-copy>p {
    font-size: 25px;
    margin-top: 9px
  }
  .service-ad>p {
    font-size: 24px;
    margin-inline: 14px
  }
  .ad-top {
    font-size: 7px;
    padding: 13px 12px
  }
  .hero-ad {
    border-width: 4px
  }
  .ad-bottom {
    padding: 12px;
    font-size: 8px
  }
  .hero-ad .architectural-art {
    top: 97px
  }
  .iteration-chip {
    top: 350px;
    left: 7%;
    right: 6%;
    padding: 14px;
    gap: 10px
  }
  .iteration-chip strong {
    font-size: 11px
  }
  .iteration-chip div>span {
    font-size: 9px
  }
  .iteration-chip>.icon {
    width: 23px;
    height: 23px
  }
  .stage-caption {
    top: 426px;
    font-size: 6.5px;
    letter-spacing: .055em
  }
  .stage-orbit {
    height: 84%;
    top: 0
  }
  .orbit-two {
    height: 64%;
    top: 10%
  }
  .trust-strip {
    padding: 22px 0
  }
  .trust-strip>p {
    font-size: 12px;
    margin-bottom: 14px
  }
  .trust-strip>div {
    flex-wrap: wrap;
    justify-content: flex-start!important;
    gap: 13px 18px
  }
  .trust-strip span {
    font-size: 10px
  }
  .section {
    padding-block: 65px
  }
  .eyebrow {
    font-size: 9px;
    margin-bottom: 20px;
    gap: 9px
  }
  .section-number {
    width: 23px;
    height: 23px;
    font-size: 9px
  }
  h2 {
    font-size: 37px;
    letter-spacing: -.045em
  }
  .section-heading>p {
    font-size: 14px;
    margin-top: 20px
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 27px;
    margin-top: 35px
  }
  .steps li {
    position: relative;
    padding: 0 0 0 52px;
    border: 0
  }
  .step-symbol {
    position: absolute;
    left: 0;
    top: 0;
    display: block
  }
  .step-symbol>span {
    display: block;
    margin-top: 9px;
    font-size: 9px;
    text-align: center
  }
  .step-symbol>.icon {
    width: 26px;
    height: 26px
  }
  .steps h3 {
    font-size: 21px;
    margin-bottom: 10px
  }
  .steps p {
    font-size: 13px
  }
  .examples-heading {
    display: block;
    margin-bottom: 29px
  }
  .examples-heading>p {
    margin-top: 19px;
    font-size: 13px;
    max-width: none
  }
  .demo-shell {
    grid-template-columns: 1fr;
    border-radius: 15px
  }
  .demo-editor {
    padding: 25px
  }
  .segment-controls {
    margin-top: 20px
  }
  .segment-button {
    font-size: 11px
  }
  .demo-offer {
    padding: 25px 0 18px
  }
  .demo-offer h3 {
    font-size: 23px
  }
  .demo-offer>p {
    font-size: 12px;
    min-height: 0
  }
  .demo-step-controls {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border-bottom: 1px solid var(--line);
    gap: 8px
  }
  .demo-step-controls button {
    font-size: 10px;
    flex-direction: column;
    align-items: start;
    gap: 7px;
    line-height: 1.4;
    padding: 13px 0 12px;
    border-bottom: 2px solid transparent
  }
  .demo-step-controls button[aria-pressed=true] {
    border-bottom-color: var(--orange)
  }
  .demo-step-controls button>.icon {
    display: none
  }
  .demo-step-note {
    font-size: 11px;
    min-height: 54px;
    margin-top: 14px
  }
  .demo-output {
    padding: 23px 30px 21px;
    border-top: 1px solid var(--line)
  }
  .output-top>span:first-child {
    font-size: 10px
  }
  .showcase-ad {
    max-width: 300px
  }
  .showcase-ad>h3 {
    font-size: 29px
  }
  .output-note {
    font-size: 9px
  }
  .audience-summary {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 23px
  }
  .audience-summary p {
    font-size: 12px
  }
  .founder {
    grid-template-columns: 1fr;
    gap: 31px
  }
  .founder-picture {
    max-width: 310px;
    grid-row: 2;
    aspect-ratio: 4/4.6;
    border-radius: 100px 100px 13px 13px
  }
  .founder-copy {
    grid-row: 1
  }
  .founder h2 {
    font-size: 37px;
    max-width: 490px
  }
  .founder-copy>p {
    font-size: 14px;
    margin-top: 22px
  }
  .human-mark {
    font-size: 11px;
    margin-top: 21px;
    padding-top: 20px
  }
  .centered {
    text-align: left
  }
  .centered .eyebrow {
    justify-content: start
  }
  .centered>p {
    margin-inline: 0
  }
  .setup-band {
    margin-top: 29px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    gap: 12px;
    padding: 20px;
    align-items: start
  }
  .setup-icon {
    width: 36px;
    height: 36px
  }
  .setup-band>div:nth-child(2) {
    flex: 1;
    min-width: 0
  }
  .setup-band strong {
    font-size: 13px
  }
  .setup-band span {
    font-size: 10px;
    line-height: 1.5
  }
  .setup-price {
    grid-column: 2;
    margin: 2px 0 0;
    flex: 1;
    text-align: left;
    min-width: 0
  }
  .setup-price>strong {
    font-size: 23px;
    line-height: 1.2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px
  }
  .setup-price small {
    font-size: 9px;
    margin-left: 0
  }
  .plans {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 22px
  }
  .plan {
    padding: 28px
  }
  .plan-heading h3 {
    font-size: 27px
  }
  .plan-description {
    font-size: 12px;
    min-height: 0;
    max-width: 300px;
    margin-top: 10px
  }
  .plan-price {
    margin: 22px 0
  }
  .plan-price strong {
    font-size: 41px
  }
  .plan>.button {
    font-size: 12px;
    padding: 14px 18px
  }
  .features {
    margin-top: 23px;
    padding-top: 22px;
    gap: 14px
  }
  .features li {
    font-size: 12px
  }
  .features strong {
    font-size: 13px
  }
  .price-disclosure {
    text-align: left;
    font-size: 11px
  }
  .price-disclosure a {
    margin-left: 0;
    min-height: 38px
  }
  .legal-note {
    text-align: left;
    font-size: 10px;
    margin-top: 6px
  }
  .scope-details {
    margin-top: 20px
  }
  .scope-details summary {
    font-size: 12px;
    padding: 19px 0
  }
  .scope-details>div {
    font-size: 12px
  }
  .enterprise {
    align-items: start;
    padding: 24px 0;
    flex-direction: column;
    gap: 10px
  }
  .enterprise>div {
    display: block
  }
  .enterprise p {
    margin-top: 8px
  }
  .enterprise a {
    font-size: 12px
  }
  .calculator {
    margin-top: 14px;
    padding: 24px 19px;
    gap: 27px;
    border-radius: 15px
  }
  .calculator-copy {
    display: block
  }
  .calculator-copy .eyebrow {
    font-size: 9px
  }
  .calculator-copy h3 {
    font-size: 31px
  }
  .calculator-copy>p {
    font-size: 12px;
    margin-top: 16px
  }
  .fee-tiers {
    margin-top: 22px;
    gap: 12px
  }
  .fee-tiers strong {
    font-size: 19px
  }
  .fee-tiers span {
    font-size: 11px
  }
  .calculator-form {
    padding: 19px 16px
  }
  .calculator-fields {
    gap: 12px;
    grid-template-columns: .8fr 1fr
  }
  label {
    font-size: 10px;
    line-height: 1.4
  }
  select,input {
    font-size: 16px
  }
  .cost-lines>div {
    font-size: 11px
  }
  .cost-total dd {
    font-size: 26px
  }
  .cost-total dt {
    font-size: 11px
  }
  .setup-addition {
    font-size: 9px
  }
  .calculator-note {
    font-size: 9px
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 28px
  }
  .faq h2 {
    font-size: 37px
  }
  .faq-items summary {
    font-size: 13px;
    padding: 20px 0;
    gap: 16px
  }
  .faq-items details>p {
    font-size: 12px;
    padding-right: 0
  }
  .contact-section {
    grid-template-columns: 1fr;
    padding: 32px 25px;
    gap: 29px;
    border-radius: 15px
  }
  .contact-copy>h2 {
    font-size: 38px
  }
  .contact-copy>p {
    font-size: 13px;
    line-height: 1.65
  }
  .contact-note {
    font-size: 10px
  }
  .contact-section .eyebrow {
    font-size: 9px
  }
  .contact-watermark {
    font-size: 300px;
    bottom: -100px;
    left: 25%
  }
  .footer {
    grid-template-columns: 1fr;
    gap: 21px;
    padding-block: 37px 24px
  }
  .footer>nav {
    gap: 25px;
    font-size: 11px
  }
  .footer>div>p {
    font-size: 11px
  }
  .footer-note {
    font-size: 9px;
    margin-top: 0;
    padding-top: 17px
  }
  .footer .brand img {
    width: 35px;
    height: 35px
  }
  .footer .brand>span {
    font-size: 30px
  }
}

@media(max-width:370px) {
  .wrap {
    width: calc(100% - 32px)
  }
  .hero h1 {
    font-size: 44px
  }
  .hero-actions {
    gap: 11px
  }
  .hero-actions .button {
    padding: 14px;
    gap: 9px
  }
  .hero-actions .text-link {
    font-size: 10px
  }
  .hero-stage {
    height: 420px
  }
  .hero-ad.product-ad {
    height: 272px
  }
  .hero-ad.service-ad {
    height: 245px
  }
  .product-ad-copy>p {
    font-size: 22px
  }
  .service-ad>p {
    font-size: 22px
  }
  .iteration-chip {
    top: 327px;
    left: 3%;
    right: 3%
  }
  .stage-caption {
    top: 405px;
    font-size: 6px
  }
  .calculator {
    padding: 22px 15px
  }
  .calculator-form {
    padding: 17px 13px
  }
  .calculator-fields {
    gap: 9px
  }
  .cost-total dd {
    font-size: 23px
  }
  .plan {
    padding: 25px
  }
  .setup-price {
    margin-left: 0
  }
  .founder h2 {
    font-size: 34px
  }
  .demo-editor {
    padding: 23px 20px
  }
  .demo-output {
    padding-inline: 23px
  }
}

.hero-stage {
  overflow: clip;
  overflow-clip-margin: 16px
}

.stage-caption {
  font-size: 9px
}

.hero-cost {
  font-size: 11px
}

.legal-note,.calculator-note,.contact-note,.footer-note {
  font-size: 11px
}

.calculator-note {
  line-height: 1.65
}

.nav-actions a:focus-visible {
  outline-offset: 2px
}

@media(max-width:700px) {
  .stage-caption {
    font-size: 8px;
    padding-inline: 10px
  }
  .hero-cost {
    font-size: 11px
  }
  .legal-note,.calculator-note,.contact-note {
    font-size: 11px
  }
  .setup-band span {
    font-size: 11px
  }
  .setup-price {
    min-width: 0
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important
  }
}

/* Shared materials. Load after legacy responsive styles, before cinema/engine. */
:root {
  --paper: #faf9f7;
  --ink: #262522;
  --muted: #66635e;
  --line: #37342d26;
  --orange: #bc4517;
  --bright: #ed652e;
  --peach: #f8e8dd;
  --glass-surface: #ffffff70;
  --glass-thick: #ffffffa8;
  --glass-border: #ffffffdf;
  --glass-hairline: #7e573921;
  --glass-shadow: 0 20px 60px -30px #62473035, 0 3px 8px #60462608;
  --glass-edge: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff70;
  --glass-radius: 28px;
  --press-ease: cubic-bezier(.2,.8,.2,1);
  --copy-body: 1rem;
  --copy-note: .8125rem;
  --copy-label: .75rem;
}

body {
  background:
    radial-gradient(ellipse 70% 900px at 88% 180px, #f4c8a845, transparent 72%),
    radial-gradient(ellipse 65% 1100px at 0% 1650px, #f5decc52, transparent 75%),
    var(--paper);
  font-optical-sizing: auto;
}

.preview-banner {
  background: transparent;
  color: #6b655c;
  padding-block: 9px;
  font-size: var(--copy-label);
  line-height: 1.5;
}

.site-header {
  top: 12px;
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-thick);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: var(--glass-edge), 0 8px 32px -12px #493b3030;
}

.nav-inner.wrap {
  width: calc(100% - 40px);
  height: 72px;
}

.desktop-nav { gap: 26px; }
.desktop-nav a { font-weight: 550; }
.nav-actions { gap: 16px; }
.languages { gap: 0; }
.languages > span { color: #a19a91; }
.languages a { border-radius: 50%; }
.languages a[aria-current] { text-decoration-thickness: 2px; }

.button {
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 180ms var(--press-ease), background-color 180ms ease,
    box-shadow 180ms ease, border-color 180ms ease;
}

.primary {
  background: linear-gradient(180deg, #d85321, #bc4517);
  border-color: #b84118;
  box-shadow: inset 0 1px 0 #ffffff47, 0 5px 13px -5px #a7443066;
}

.primary:hover {
  background: linear-gradient(180deg, #c7491c, #ab3a12);
  box-shadow: inset 0 1px 0 #ffffff40, 0 8px 18px -7px #a7443080;
}

.secondary {
  background: #ffffffb8;
  border-color: #80726138;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px #44392c05;
}

.secondary:hover { background: #fff; border-color: #76614d6b; }
.nav-cta { background: #2b2926; border-color: #151410; }
.nav-cta:hover { background: #47413a; }
.button:active, .menu-button:active {
  transform: scale(.975);
  transition: transform 80ms ease-out;
}
.button:disabled { transform: none; box-shadow: none; }
.text-link:active, .desktop-nav a:active { color: var(--orange); }

.menu-button {
  border-radius: 50%;
  background: #766a5610;
  transition: background-color 160ms ease, transform 180ms var(--press-ease);
}
.menu-button:hover { background: #766a5620; }
.menu-button span { transition: transform 180ms var(--press-ease); }
.menu-button[aria-expanded=true] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-button[aria-expanded=true] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-menu {
  top: calc(100% + 12px);
  left: -12px;
  right: -12px;
  border: 1px solid #ffffffe8;
  border-radius: 24px;
  padding: 12px 24px;
  background: #faf8f3f5;
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  backdrop-filter: blur(32px) saturate(150%);
  box-shadow: var(--glass-edge), 0 24px 60px -20px #3f322247;
  max-height: calc(100svh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: calc(100% - 28px) top;
}
.mobile-menu a { min-height: 52px; font-weight: 550; font-size: 15px; }
.mobile-menu a:active { color: var(--orange); }

.founder-picture {
  border-radius: 32px;
  border: 1px solid #ffffffb3;
  box-shadow: var(--glass-edge), 0 28px 60px -28px #3f281e66;
}
.portrait-caption {
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 18px 20px;
  border: 1px solid #ffffffc4;
  border-radius: 18px;
  background: #fdfaf2db;
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: inset 0 1px 0 #fff, 0 5px 18px #21170d0d;
  color: var(--ink);
}
.portrait-caption span { color: var(--muted); }
.portrait-note { background: #27251feb; border-color: #ffffff47; }
.human-mark { border-color: var(--glass-hairline); }

.pricing {
  background:
    radial-gradient(ellipse 70% 30% at 5% 35%, #f3cba95c, transparent 85%),
    radial-gradient(ellipse 65% 40% at 100% 75%, #eadaca85, transparent 85%),
    #f3eee766;
  border-block-color: #ffffffc9;
}
.setup-band, .plan, .calculator, .contact-section {
  border: 1px solid var(--glass-border);
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
.setup-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 26px 20px;
  border-radius: 28px;
  padding: 32px;
}
.setup-icon { background: #d76b2617; border: 1px solid #bd5b241f; }
.setup-copy { min-width: 0; padding-top: 5px; }
.setup-copy h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; }
.setup-copy p { max-width: 540px; margin-top: 10px; font-size: .9375rem; color: var(--muted); }
.setup-price {
  min-width: 210px;
  margin: 0;
  padding: 21px 25px;
  gap: 9px;
  text-align: left;
  border: 1px solid #ddad834f;
  border-radius: 20px;
  background: #fffaf3;
  box-shadow: inset 0 1px 0 #fff;
}
.setup-price .setup-intro { font-size: var(--copy-note); font-weight: 600; color: #874218; }
.setup-price > strong { display: block; font-size: clamp(44px, 4.2vw, 56px); line-height: 1.05; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.setup-price .setup-regular { font-size: .875rem; color: var(--muted); }
.setup-price .setup-saving { width: fit-content; padding: 6px 10px; border: 1px solid #d8ddc9; border-radius: 999px; background: #eef2e5; color: #455539; font-size: var(--copy-note); font-weight: 600; }
.setup-includes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.setup-includes li { display: flex; align-items: start; gap: 10px; min-width: 0; }
.setup-includes .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--orange); }
.setup-includes li > span { min-width: 0; font-size: .875rem; line-height: 1.6; color: var(--muted); }
.setup-includes strong { display: block; margin-bottom: 5px; font-size: .875rem; line-height: 1.45; color: var(--ink); font-weight: 600; }
.payment-routing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; padding: 26px 28px; border: 1px solid #cdbba543; border-radius: 22px; background: #fffdf9; }
.payment-routing > div { min-width: 0; }
.payment-routing > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.payment-label { display: block; color: var(--orange); font-size: var(--copy-label); letter-spacing: .07em; font-weight: 650; }
.payment-routing h3 { margin: 10px 0 9px; font-size: 22px; line-height: 1.2; }
.payment-routing p { color: var(--muted); font-size: .9375rem; line-height: 1.65; max-width: 480px; }
.plans { gap: 20px; margin-top: 24px; }
.plan { border-radius: var(--glass-radius); padding: 34px 28px; }
.plan-featured {
  background: #fffaf2b8;
  border-color: #d7996959;
  box-shadow: inset 0 1px 0 #fff, inset 0 3px 0 #cd6527,
    0 20px 60px -24px #9d684635, 0 2px 8px #6f482211;
}
.plan-heading h3 { font-weight: 550; }
.plan-description { font-size: 14px; min-height: 72px; }
.plan-price strong { font-size: 42px; font-weight: 550; }
.plan-price > span { font-size: 13px; }
.plan-extra { font-size: 12px; }
.plan-budget { color: #625447; font-size: var(--copy-note); line-height: 1.55; margin: -6px 0 22px; }
.plan-fit { margin-top: 24px; padding: 19px 20px; border: 1px solid #d5b4905c; border-radius: 17px; background: #fff7ec; color: #665039; font-size: .9375rem; line-height: 1.65; }
.plan:has(.plan-fit) { background: #fffdf8c9; border-color: #d5bb956b; }
.plan > .button { font-size: 13px; }
.features { border-color: #9d7e5d29; }
.features li { font-size: 13px; }
.features strong { font-size: 14px; }
.features .icon { color: #836542; }
.price-disclosure { font-size: 13px; }
.legal-note { font-size: 12px; }
.scope-details { font-size: 13px; }
.enterprise p, .enterprise a { font-size: 13px; }
.calculator {
  border-radius: var(--glass-radius);
  background: #eee5d687;
  gap: 48px;
  padding: 44px;
}
.calculator-copy > p, .fee-tiers li { color: #625746; font-size: 14px; }
.fee-tiers strong { color: #795336; font-weight: 550; }
/* A solid inset holds dense numbers; translucent layers are never stacked here. */
.calculator-form {
  background: #fffdf9;
  border-color: #c9b99e6b;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 28px -18px #66432233;
}
label { font-size: 12px; font-weight: 600; }
select, input { border-color: #b8ac9a; border-radius: 10px; background: #fff; }
select:hover, input:hover { border-color: #867159; }
select:focus, input:focus { border-color: var(--orange); }
.cost-lines > div { font-size: 13px; }
.cost-lines .cost-plaith { padding: 14px 0; margin: 6px 0; border-block: 1px solid #b7a78f59; font-weight: 600; }
.cost-plaith dt { color: var(--ink); }
.cost-plaith dd { color: #843e1b; }
.cost-lines .cost-total { border-color: #b7a78f59; }
.cost-total dt { font-size: 13px; }
.cost-total dd { font-size: 30px; font-weight: 550; }
.setup-addition, .calculator-note { font-size: var(--copy-note); }
.field-error { color: #9b3219; font-size: 12px; }
.calculator-form:has([aria-invalid=true]) { border-color: #b04a2a; }

.faq-items { border-top: 0; }
.faq-items details { border-color: #a18c6c35; }
.faq-items details[open] { border-color: #a877485e; }
.faq-items summary { font-size: 15px; }
.faq-items details > p { font-size: 14px; }
.faq-items summary > .icon {
  box-sizing: content-box;
  padding: 9px;
  border-radius: 50%;
  background: #baa48112;
  color: var(--orange);
  flex: none;
}
.faq-items summary:active > .icon { background: #baa48130; }
.contact-section {
  background: linear-gradient(115deg, #f4ddcaa1, #ffffff87);
  border-radius: 32px;
}
.contact-copy > p { color: #5f554b; font-size: 15px; }
.contact-note { color: #65584c; font-size: 11px; }
.selection-status { background: #fffdf7; border-color: #bd9f7899; border-radius: 14px; }
.contact-watermark { color: #b9874f12; }
.footer-note { border-color: #a5917429; }

@media (max-width: 1023px) {
  .setup-band { padding: 28px; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 20px; }
  .setup-icon { width: 36px; height: 36px; }
  .setup-price { min-width: 190px; padding: 21px; }
  .setup-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1150px) {
  .desktop-nav { gap: 20px; }
  .nav-actions { gap: 10px; }
  .plan { padding: 30px 22px; }
  .plan-price strong { font-size: 38px; }
  .calculator { gap: 30px; padding: 32px; }
}
@media (max-width: 900px) {
  .menu-button { display: block; }
  .nav-inner.wrap { height: 66px; }
  .plan-description { min-height: 0; }
  .plans { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
  .plan { padding: 32px; }
  .plan-description, .features li { font-size: var(--copy-body); }
  .features strong { font-size: inherit; }
  .plan-extra, .plan-budget { font-size: var(--copy-note); }
  .plan > .button { font-size: .9375rem; }
  .plan-description { max-width: 540px; }
  .calculator-copy > p, .faq-items details > p, .contact-copy > p { font-size: var(--copy-body); }
  .scope-details > div, .enterprise p { font-size: .9375rem; }
  .scope-details summary, .price-disclosure, .legal-note { font-size: .875rem; }
  .price-disclosure a { min-height: 44px; }
  label { font-size: var(--copy-note); }
  select, input { font-size: 1rem; min-height: 48px; }
  .calculator-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .cost-lines > div, .cost-total dt { font-size: .875rem; }
  .cost-lines dd { max-width: 100%; }
  .cost-lines .cost-total { flex-wrap: wrap; align-items: baseline; }
  .cost-total dd { margin-left: auto; }
  .contact-note, .footer-note, .footer > div > p { font-size: var(--copy-note); }
  .footer > nav { flex-wrap: wrap; font-size: .875rem; }
}
@media (max-width: 700px) {
  .site-header { width: calc(100% - 24px); top: 8px; }
  .nav-inner.wrap { width: calc(100% - 28px); height: 62px; gap: 8px; }
  .nav-actions { gap: 8px; }
  .languages a { width: 44px; min-width: 44px; }
  .brand img { width: 34px; height: 34px; }
  .brand > span { font-size: 29px; }
  .mobile-menu { left: -8px; right: -8px; }
  .founder-picture { border-radius: 28px; }
  .portrait-caption { padding: 16px; gap: 9px; }
  .portrait-caption strong { font-size: 22px; }
  .eyebrow { font-size: var(--copy-label); letter-spacing: .08em; }
  .section-heading > p { font-size: var(--copy-body); }
  .setup-band { padding: 24px; border-radius: 22px; grid-template-columns: 1fr; gap: 22px; }
  .setup-copy { padding-top: 3px; }
  .setup-copy p { font-size: var(--copy-body); }
  .setup-price { grid-column: 1 / -1; min-width: 0; width: 100%; margin: 0; padding: 23px; }
  .setup-price > strong { display: block; font-size: clamp(44px, 12vw, 56px); }
  .setup-includes { grid-template-columns: 1fr; gap: 21px; }
  .setup-includes li > span, .setup-includes strong { font-size: .9375rem; }
  .payment-routing { grid-template-columns: 1fr; gap: 23px; padding: 24px; }
  .payment-routing > div + div { padding: 23px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .payment-routing p { font-size: var(--copy-body); }
  .plan { padding: 28px; border-radius: 26px; }
  .plan-description { font-size: var(--copy-body); }
  .plan-price strong { font-size: 43px; }
  .plan > .button { font-size: .9375rem; }
  .features li, .features strong { font-size: var(--copy-body); }
  .price-disclosure, .legal-note { font-size: .875rem; }
  .scope-details summary, .scope-details > div { font-size: .9375rem; }
  .calculator { padding: 26px 20px; gap: 28px; border-radius: 26px; }
  .calculator-form { padding: 22px 16px; }
  .calculator-copy > p { font-size: var(--copy-body); }
  .calculator-copy .eyebrow { font-size: var(--copy-label); }
  .fee-tiers span { font-size: .875rem; }
  .calculator-fields { grid-template-columns: 1fr; gap: 18px; }
  label { font-size: var(--copy-note); }
  .cost-lines > div, .cost-total dt { font-size: .875rem; }
  .cost-total dd { font-size: 25px; }
  .setup-addition, .calculator-note { font-size: var(--copy-note); }
  .faq-items summary { font-size: var(--copy-body); gap: 14px; }
  .faq-items details > p { font-size: var(--copy-body); }
  .contact-section { padding: 32px 24px; border-radius: 28px; }
  .contact-copy > p { font-size: var(--copy-body); }
  .contact-note { font-size: var(--copy-note); }
  .contact-section .eyebrow { font-size: var(--copy-label); }
}
@media (hover: none) {
  .button:hover { transform: none; }
  .button:active { transform: scale(.975); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .menu-button, .menu-button span, summary > .icon { transition: none; }
  .button:hover, .button:active, .menu-button:active { transform: none; }
  .button:active { filter: brightness(.92); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .mobile-menu, .setup-band, .plan, .calculator,
  .contact-section, .portrait-caption { background: #fffdf9; border-color: #d7cabc; }
  .plan-featured { background: #fff4e7; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-header, .mobile-menu, .setup-band, .plan, .calculator,
  .contact-section, .portrait-caption {
    background: #fffdf9;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: #b6a590;
  }
  .plan-featured { background: #fff4e7; border-color: #a44e1b; }
  .secondary { background: #fff; }
}
@media (prefers-contrast: more) {
  :root { --muted: #46413a; --line: #716658; }
  .faq-items details, .features, .cost-lines .cost-total, .human-mark { border-color: #716658; }
  .secondary, input, select { border-color: #63574a; }
  .pricing { background: #f5f1ea; }
}

.intro { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.16fr); grid-template-areas: 'heading showcase' 'body showcase' 'support showcase'; column-gap: clamp(30px, 4vw, 60px); padding-top: 48px; padding-bottom: 46px; text-align: left; }
.intro::before { content: ''; position: absolute; z-index: -1; inset: 4% -2% -6%; pointer-events: none; background: radial-gradient(ellipse at 80% 48%, #f9dabb99, transparent 67%); }
.intro-heading { grid-area: heading; min-width: 0; align-self: end; }
.intro-body { grid-area: body; min-width: 0; }
.intro-support { grid-area: support; min-width: 0; }
.intro-plans { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--muted); font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
.intro-heading > .eyebrow { justify-content: flex-start; margin-bottom: 15px; }
.intro-channel { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.intro h1 { font-size: clamp(40px, 4.2vw, 60px); letter-spacing: -.055em; line-height: 1.04; max-width: 590px; margin: 0; text-wrap: pretty; }
.intro h1 > span { display: block; margin-top: 10px; color: var(--orange); font-family: inherit; font-style: normal; font-weight: 500; letter-spacing: -.055em; font-size: 1em; }
.intro-description { max-width: 540px; margin: 24px 0 0; font-size: 17px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.intro-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 12px; margin-top: 27px; }
.intro-actions .button { min-height: 56px; max-width: 100%; gap: 12px; }
.intro-trust { display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: flex-start; margin-top: 23px; color: var(--muted); font-size: .8125rem; }
.intro-trust li { display: flex; align-items: center; gap: 7px; }
.intro-trust .icon { width: 16px; height: 16px; color: var(--orange); }
.intro-conversation { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 12px; margin-top: 22px; }
.intro-conversation button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 99px; background: #fff8ed; border: 1px solid #d3b58a55; color: #783d1d; font-size: .875rem; }
.intro-conversation button:hover { background: #fff; }
.intro-conversation button:active { transform: scale(.98); }
.intro-conversation .icon { width: 17px; height: 17px; }
.intro-conversation > span { color: var(--muted); font-size: .8125rem; }
.intro-invitation { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: fit-content; max-width: 100%; min-height: 44px; margin: 27px 0 0; color: #78563c; }
.intro-invitation span { font-size: 1rem; letter-spacing: -.015em; line-height: 1.4; }
.intro-invitation svg { flex: none; transform: rotate(38deg); }
.intro-showcase { grid-area: showcase; min-width: 0; align-self: center; margin: 0; }
.intro-stage { position: relative; padding-top: 144px; }
.intro-source { position: absolute; z-index: 2; top: 0; left: 18px; width: 184px; padding: 8px; border: 1px solid #ffffff; border-radius: 17px; background: #fffdf7; box-shadow: 0 12px 32px -16px #45382e75, var(--glass-edge); transform: rotate(-4deg); }
.intro-source img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 10px; background: #eeede9; }
.intro-source > span { display: block; padding: 9px 2px 2px; color: #514a42; font-size: .8125rem; line-height: 1.35; font-weight: 550; }
.intro-bridge { position: absolute; top: 35px; left: 225px; width: min(170px, calc(100% - 235px)); color: #a7683f; }
.intro-bridge > span { display: block; padding-left: 24px; color: #615047; font-size: 20px; font-weight: 600; letter-spacing: -.055em; }
.intro-bridge > span > span { color: var(--orange); }
.intro-bridge svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.intro-result { position: relative; border: 1px solid #ffffff; border-radius: 24px; background: #fffdf9; box-shadow: var(--glass-edge), 0 28px 70px -24px #3e241943; }
.intro-result-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 49px; padding: 12px 18px; }
.intro-result-top strong { color: #292822; font-size: 20px; line-height: 1; font-weight: 750; font-style: italic; letter-spacing: -.05em; }
.intro-result-top > span { color: #61584d; font-size: .75rem; line-height: 1.4; text-align: right; }
.intro-creative-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #212925; }
.intro-film-play { display: flex; align-items: center; gap: 13px; min-height: 80px; padding: 15px 18px; border-radius: 0 0 23px 23px; color: #262922; background: #fff8ed; transition: background-color 150ms ease, box-shadow 150ms ease; }
.intro-film-play:hover { background: #ffffff; box-shadow: inset 0 1px #d7b28f; }
.intro-film-play:active { background: #f8e8d4; }
.intro-film-play:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
.intro-film-play > span:nth-child(2) { min-width: 0; }
.intro-film-play strong { display: block; font-size: .9375rem; line-height: 1.4; font-weight: 650; }
.intro-film-play small { display: block; margin-top: 4px; color: #685b4b; font-size: .8125rem; line-height: 1.45; }
.intro-film-play > .icon { margin-left: auto; width: 18px; height: 18px; }
.intro-film-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: var(--orange); box-shadow: 0 3px 12px #c64b142e; }
.intro-film-icon svg { width: 23px; height: 23px; margin-left: -2px; }
.intro-showcase > figcaption { max-width: 570px; margin: 17px 8px 0; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.nav-assistant { min-height: 44px; padding: 10px 6px; background: transparent; font-size: .8125rem; font-weight: 550; white-space: nowrap; color: #843e1b; }
.nav-assistant:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .intro h1 { animation: intro-enter 600ms var(--press-ease) both; }
  .intro-description, .intro-actions { animation: intro-enter 600ms 90ms var(--press-ease) both; }
  .intro-showcase { animation: intro-enter 650ms 100ms var(--press-ease) both; }
  .intro-film-icon { transition: transform 140ms ease; }
  .intro-film-play:active .intro-film-icon { transform: scale(.94); }
  @keyframes intro-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1023px) {
  .intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'heading' 'body' 'showcase' 'support'; max-width: 760px; padding-top: 42px; }
  .intro h1 { max-width: 700px; font-size: clamp(40px,6.1vw,60px); }
  .intro-showcase { width: min(100%, 650px); margin: 32px 0 0; }
  .intro-stage { padding-top: 138px; }
  .intro-description { max-width: 660px; }
  .nav-assistant { display: none; }
}
@media (max-width: 700px) {
  .intro { padding-top: 24px; padding-bottom: 28px; }
  .intro-heading > .eyebrow { font-size: .75rem; letter-spacing: .08em; }
  .intro-channel { font-size: .8125rem; margin-bottom: 16px; }
  .intro h1 { font-size: clamp(34px,8.9vw,52px); line-height: 1.09; letter-spacing: -.052em; text-wrap: balance; }
  .intro h1 > span { margin-top: 8px; }
  .intro-description { font-size: 1rem; line-height: 1.55; margin-top: 20px; }
  .intro-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; }
  .intro-actions .button { font-size: .9375rem; min-height: 52px; gap: 13px; }
  .intro-trust { flex-wrap: wrap; gap: 10px 18px; font-size: .8125rem; margin-top: 21px; }
  .intro-conversation { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 16px; }
  .intro-invitation { margin-top: 24px; gap: 5px; }
  .intro-invitation span { max-width: 270px; font-size: 1rem; line-height: 1.4; }
  .intro-invitation svg { width: 34px; }
  .intro-showcase { margin-top: 28px; }
  .intro-stage { padding-top: 123px; }
  .intro-source { left: 5px; width: 157px; padding: 7px; border-radius: 14px; }
  .intro-source > span { font-size: .75rem; padding-top: 8px; }
  .intro-bridge { top: 24px; left: 178px; width: min(125px, calc(100% - 180px)); }
  .intro-bridge > span { font-size: 18px; padding-left: 14px; }
  .intro-result { border-radius: 18px; }
  .intro-result-top { min-height: 43px; padding: 11px 13px; gap: 10px; }
  .intro-result-top strong { font-size: 19px; }
  .intro-result-top > span { font-size: .75rem; }
  .intro-film-play { padding: 13px 12px; gap: 10px; border-radius: 0 0 17px 17px; }
  .intro-film-play strong { font-size: .875rem; }
  .intro-film-play small { font-size: .75rem; }
  .intro-film-play > .icon { width: 16px; height: 16px; }
  .intro-showcase > figcaption { margin: 13px 2px 0; font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-conversation button:active { transform: none; }
  .intro h1, .intro-description, .intro-actions, .intro-showcase { animation: none; }
  .intro-source, .intro-film-play:active .intro-film-icon { transform: none; }
  .intro-film-play, .intro-film-icon { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .intro-conversation button { background: #fff; border-color: #8c8175; box-shadow: none; }
  .intro-source, .intro-result, .intro-film-play { background: #fffdf8; border-color: #8c8175; box-shadow: none; }
}

.journey-section { padding-block: 64px 104px; }
@media (min-width:1024px) and (max-height:850px) {
  .journey-section .journey-pin { padding-block: 12px 8px; }
  .journey-section .journey-stage { margin-block: 9px; }
  .journey-section .journey-frame { padding-block: 6px; }
  .journey-section .journey-bottom { padding-top: 9px; }
  .journey-section .journey-scrub { margin-bottom: 8px; }
}
.journey-heading { max-width: 810px; margin-bottom: 38px; }
.journey-heading h2 { margin: 19px 0; }
.journey-heading > p { max-width: 710px; font-size: 18px; line-height: 1.65; color: var(--muted); }
.journey-scroll { --journey-motion: .5; position: relative; }
.journey-pin { position: relative; padding: 20px 24px 15px; border: 1px solid rgba(255,255,255,.95); border-radius: 30px; background: linear-gradient(135deg,rgba(255,255,255,.92),rgba(242,241,235,.88)); box-shadow: 0 28px 90px -42px #61554266, inset 0 1px 1px #fff; backdrop-filter: blur(22px); }
.journey-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.journey-mini-brand { font-size: 25px; font-weight: 700; letter-spacing: -.075em; }
.journey-mini-brand > span { color: var(--orange); }
.journey-example { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid #e3d8c9; border-radius: 100px; background: #fffaf2; color: #635444; font-size: .75rem; }
.journey-example strong { color: #964719; letter-spacing: .08em; }
.journey-example > span { border-left: 1px solid #ddcdb9; padding-left: 10px; }
.journey-segments { display: flex; gap: 3px; padding: 4px; border: 1px solid #d9d9d3; background: #e7e7e080; border-radius: 100px; }
.journey-segments button { min-height: 44px; padding: 10px 17px; border: 0; border-radius: 100px; background: transparent; color: #62655d; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.journey-segments button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px #27292016; }
.journey-stage { display: grid; margin-block: 15px; min-height: 360px; isolation: isolate; }
.journey-frame { grid-area: 1/1; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 6%; padding: 18px 28px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .24s ease, transform .32s ease; pointer-events: none; }
.journey-scroll[data-phase="0"] [data-journey-frame="0"],
.journey-scroll[data-phase="1"] [data-journey-frame="1"],
.journey-scroll[data-phase="2"] [data-journey-frame="2"],
.journey-scroll[data-phase="3"] [data-journey-frame="3"],
.journey-scroll[data-phase="4"] [data-journey-frame="4"] { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.journey-phase-label, .journey-micro { display: block; color: var(--orange); font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.journey-explanation h3 { max-width: 410px; margin: 20px 0 17px; font-size: clamp(27px, 3vw, 40px); line-height: 1.13; }
.journey-explanation > p { max-width: 415px; margin: 0; color: #53584e; font-size: 1rem; line-height: 1.65; }
.journey-motion-note { display: block; margin-top: 15px; color: #65584b; font-size: .8125rem; line-height: 1.5; }
.journey-output { display: grid; place-items: center; min-width: 0; min-height: 340px; border-radius: 23px; background: radial-gradient(ellipse at 57% 54%,#f2d4b98c,transparent 70%); }
.journey-scenario { width: 100%; max-width: 380px; }
.journey-brief { padding: 10px 0; }
.journey-start { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 22px; margin-top: 23px; }
.journey-start-photo { min-width: 0; margin: 0; padding: 7px; border: 1px solid #fff; border-radius: 13px; background: #fffdf8; box-shadow: 0 15px 35px -18px #78533470; transform: rotate(-4deg); }
.journey-start-photo img { display: block; width: 100%; height: auto; border-radius: 7px; }
.journey-start-photo figcaption { padding: 9px 2px 3px; font-size: 11px; color: #76604e; }
.journey-brief-offer { min-width: 0; }
.journey-brief-offer > span { display: block; color: #75614f; font-size: .75rem; }
.journey-brief-offer > strong { display: block; margin: 9px 0 20px; font-size: 25px; line-height: 1.16; letter-spacing: -.04em; font-weight: 500; }
.journey-brief-offer p { margin: 8px 0 0; color: #59584d; font-size: .875rem; line-height: 1.5; }
.journey-start-volt { grid-template-columns: 1fr; gap: 17px; margin-top: 16px; }
.journey-start-volt .journey-start-photo { transform: rotate(-2deg); }
.journey-start-volt .journey-start-photo img { aspect-ratio: 16 / 9; object-fit: contain; background: #f4f2ed; }
.journey-start-volt .journey-start-photo figcaption { padding-block: 7px 1px; }
.journey-start-volt .journey-brief-offer > strong { margin: 5px 0 0; font-size: 24px; }
.journey-start-volt .journey-brief-offer p { margin-top: 6px; }
.journey-wish { display: flex; align-items: flex-start; gap: 13px; padding: 20px; margin: 18px 0; border: 1px solid #dfe0d9; border-radius: 18px 18px 18px 3px; background: #fff; box-shadow: 0 10px 26px #444d3a0a; }
.journey-wish .icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 3px; color: var(--orange); }
.journey-wish p { margin: 0; font-size: 18px; line-height: 1.4; letter-spacing: -.03em; }
.journey-knowledge { margin-left: 28px; padding: 15px 20px; border-left: 2px solid #dfbaa0; }
.journey-knowledge .journey-mini-brand { font-size: 20px; }
.journey-knowledge p { margin: 10px 0 4px; font-size: 14px; font-weight: 600; }
.journey-knowledge small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.journey-tags { margin-top: 14px; font-size: 10px; font-weight: 600; letter-spacing: .025em; color: #77654f; }
.journey-source { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; margin-inline: auto; width: fit-content; max-width: 100%; border: 1px solid #dddcd3; border-radius: 13px; background: #fbfaf7; font-size: 13px; }
.journey-source .icon { width: 18px; height: 18px; }
.journey-source-photo { width: 100%; justify-content: flex-start; padding: 7px 12px 7px 7px; }
.journey-source-photo img { flex: 0 0 86px; width: 86px; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 7px; background: #f4f2ed; }
.journey-source-photo + .journey-connect { height: 20px; }
.journey-connect { width: 1px; height: 30px; margin-inline: auto; background: #c48a59; }
.journey-idea-card, .journey-test-card { padding: 26px; border: 1px solid #fff; border-radius: 22px; background: linear-gradient(130deg,#fff,#fff8ed); box-shadow: 0 16px 40px -20px #795a3b5c; }
.journey-idea-card > strong, .journey-test-card > strong { display: block; margin-block: 17px; font-size: 26px; line-height: 1.12; font-weight: 500; letter-spacing: -.045em; }
.journey-idea-card p, .journey-test-card p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.journey-tag { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12px; color: #87542c; }
.journey-tag .icon { width: 16px; height: 16px; }
.journey-feed { width: min(100%, 300px); margin-inline: auto; padding: 8px; overflow: hidden; border: 1px solid #dcded8; border-radius: 19px; background: #fff; box-shadow: 0 18px 38px -20px #51412f70; transform: rotate(-2deg); }
.journey-feed-top { display: flex; align-items: center; gap: 9px; padding: 6px 7px 12px; }
.journey-feed-avatar { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #c9d0c3; border-radius: 50%; background: #e6e9dc; font-size: 11px; }
.journey-feed-top strong, .journey-feed-top small { display: block; font-size: 9px; line-height: 1.5; }
.journey-feed-top small { color: #666b63; font-size: 8px; }
.journey-feed-dots { margin-left: auto; font-size: 10px; }
.journey-ad-art { position: relative; height: 232px; border-radius: 11px; overflow: hidden; background: #e6e3d5; }
.journey-ad-title { position: absolute; inset: auto 0 0; z-index: 2; padding: 18px; color: #fff; background: linear-gradient(transparent,#282a21dc); }
.journey-ad-title small { display: block; margin-bottom: 9px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.journey-ad-title strong { display: block; max-width: 210px; font-size: 25px; line-height: 1.06; font-weight: 500; letter-spacing: -.045em; }
.journey-feed-bottom p { margin: 10px 5px; font-size: 10px; line-height: 1.45; }
.journey-feed-bottom > span { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: #eef0eb; border-radius: 6px; font-size: 9px; font-weight: 600; }
.journey-feed-bottom .icon { width: 13px; height: 13px; }
.journey-media-feed { width: min(100%, 380px); max-width: 380px; transform: rotate(-1deg); }
.journey-media-feed .journey-ad-art { height: auto; aspect-ratio: 16 / 9; background: #1e241e; }
.journey-media-feed .journey-shop-art img { object-fit: contain; object-position: center; }
.journey-media-feed .journey-ad-title { position: relative; inset: auto; padding: 13px 7px 10px; color: #292e25; background: none; }
.journey-media-feed .journey-ad-title strong { max-width: none; font-size: 23px; }
.journey-media-feed .journey-film-play { position: relative; inset: auto; margin: 10px 0 0; min-height: 52px; padding: 10px; font-size: 13px; }
.journey-media-feed .journey-film-play small { font-size: 11px; }
.journey-media-feed.journey-feed-motion { transform: rotate(calc(-2deg + var(--journey-motion) * 4deg)); }
.journey-media-feed.journey-feed-motion .journey-shop-art { transform: scale(calc(1 + var(--journey-motion) * .035)); }
.journey-room { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(90deg,#cac5ad 0%,#e4ddc8 65%,#f1eada 65%); }
.journey-room::after { content: ''; position: absolute; inset: 70% 0 0; background: linear-gradient(20deg,#aa997d,#dfd1ae); }
.journey-room-window { position: absolute; top: -2%; right: 11%; width: 29%; height: 67%; background: linear-gradient(120deg,#f7f4d0,#dddcc0); border: 6px solid #a99f84; box-shadow: -26px 50px 30px #fffde440; }
.journey-room-window::after { content: ''; position: absolute; left: 45%; top: 0; bottom: 0; width: 4px; background: #a99f84; }
.journey-room-sun { position: absolute; width: 45%; height: 75%; background: #fff9d22e; right: 0; top: 10%; transform: skewX(-35deg); }
.journey-room-sofa { position: absolute; z-index: 1; left: 8%; right: 24%; bottom: 20%; height: 25%; border-radius: 14px 14px 9px 9px; background: #aa7854; box-shadow: inset 0 -9px #755540, inset 6px 0 #926342, 0 10px 14px #665a453b; }
.journey-room-sofa::after { content: ''; position: absolute; left: 24%; top: 20%; width: 27%; height: 42%; background: #d9d0ac; border-radius: 5px; transform: rotate(-8deg); }
.journey-room-table { position: absolute; z-index: 2; bottom: 9%; left: 43%; width: 32%; height: 11%; border-radius: 50%; background: #7c6346; box-shadow: 0 7px #584a37; }
.journey-room-plant { position: absolute; z-index: 1; left: 3%; bottom: 25%; width: 13%; height: 42%; border-radius: 90% 4% 90% 4%; transform: rotate(-18deg); background: #707651; box-shadow: 10px 8px #858561; }
.journey-shop-art { position: absolute; inset: 0; background: #e6c5a4; }
.journey-shop-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.journey-feed-motion { transform: rotate(calc(-3deg + var(--journey-motion) * 6deg)); }
.journey-feed-motion .journey-room, .journey-feed-motion .journey-shop-art { transform: scale(calc(1 + var(--journey-motion) * .14)) translateY(calc(var(--journey-motion) * -6px)); }
.journey-feed-motion .journey-ad-title { transform: translateY(calc(12px - var(--journey-motion) * 12px)); }
.journey-motion-line { position: absolute; inset: auto 12px 7px; z-index: 3; height: 2px; background: #ffffff5c; }
.journey-motion-line span { display: block; width: 100%; height: 100%; transform: scaleX(var(--journey-motion)); transform-origin: left; background: #fff; }
.journey-account { display: flex; align-items: center; gap: 12px; padding: 0 9px 18px; font-size: 13px; font-weight: 600; }
.journey-account > .icon { width: 24px; height: 24px; color: #788062; }
.journey-account small { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); font-weight: 400; }
.journey-test-card ol { list-style: none; padding: 12px 0 0; margin: 0; display: grid; gap: 10px; }
.journey-test-card li { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.journey-test-card li .icon { width: 15px; height: 15px; color: #6c7659; }
.journey-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.journey-variant { min-width: 0; margin: 0; padding: 6px; border: 1px solid #e3d8ca; border-radius: 14px; background: #fffcf6; box-shadow: 0 12px 24px -17px #70533960; }
.journey-variant figcaption { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 2px 3px 7px; color: #63584b; font-size: 11px; line-height: 1.3; }
.journey-variant figcaption > span { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; background: #efdec8; color: #784722; font-size: 12px; font-weight: 600; }
.journey-variant-art { position: relative; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: #dca779; }
.journey-variant-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.journey-variant-message { display: block; padding: 11px 7px 7px; color: #3d3328; font-size: 19px; line-height: 1.15; letter-spacing: -.035em; font-weight: 500; }
.journey-variant-art strong { position: absolute; inset: auto 0 0; padding: 30px 12px 12px; background: linear-gradient(transparent,#3c2918e8); color: #fff; font-size: 19px; line-height: 1.12; letter-spacing: -.035em; font-weight: 500; }
.journey-test-reason { display: flex; align-items: flex-start; gap: 9px; margin-top: 15px; padding: 0 3px; color: #625647; }
.journey-test-reason > .icon { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 3px; color: #995e30; }
.journey-test-reason p { margin: 0; font-size: .8125rem; line-height: 1.55; }
.journey-test-reason strong { color: #473d32; font-weight: 600; }
.journey-scrub { display: flex; align-items: center; gap: 16px; max-width: 520px; margin: 0 auto 12px; min-height: 44px; visibility: hidden; opacity: 0; pointer-events: none; }
.journey-scrub { display: none; }
.journey-scrub label { flex: 1; color: #635b50; font-size: .8125rem; }
.journey-scrub input { width: 160px; min-height: 44px; accent-color: var(--orange); cursor: ew-resize; }
.journey-scrub > span { color: var(--orange); }
.journey-step-controls { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; border-top: 1px solid #d6d8cd; padding-top: 11px; }
.journey-step-controls button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 46px; padding: 8px 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; color: #62665d; font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; }
.journey-step-controls button > span:first-child { font-size: 10px; color: #858a7d; }
.journey-step-short { display: none; }
.journey-step-controls button[aria-pressed="true"] { background: #fffaf4; border-color: #e8d4c1; color: #843b15; box-shadow: 0 3px 8px #a7866710; }
.journey-step-controls button[aria-pressed="true"] > span:first-child { color: var(--orange); }
.journey-segments button:active, .journey-step-controls button:active { transform: scale(.97); }
.journey-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 17px; }
.journey-scroll-hint { color: #65695f; font-size: .8125rem; }
.journey-bottom a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #444d3c; font-size: .8125rem; text-decoration: none; }
.journey-bottom .icon { width: 14px; height: 14px; }
.journey-note { margin: 7px 0 0; font-size: .75rem; line-height: 1.6; color: #65685f; }
.journey-transcript { margin-top: 24px; border-block: 1px solid #ddded6; }
.journey-transcript summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 19px 0; font-size: .875rem; cursor: pointer; }
.journey-transcript summary .icon { width: 18px; height: 18px; }
.journey-transcript ol { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 50px; padding: 0 24px 24px; }
.journey-transcript li { padding-left: 4px; font-size: 1rem; line-height: 1.65; }
.journey-transcript li::marker { color: var(--orange); }
.journey-transcript p { color: var(--muted); margin: 6px 0; }
@media (prefers-reduced-motion:no-preference) {
  .journey-scroll[data-scroll-mode="sticky"] { height: calc(330svh - 104px); }
  .journey-scroll[data-scroll-mode="sticky"] .journey-pin { position: sticky; top: var(--journey-top, 88px); }
}
@media (max-width:1100px) {
  .journey-frame { padding: 14px 6px; gap: 30px; }
  .journey-explanation h3 { font-size: 31px; }
  .journey-step-controls button { padding-inline: 7px; gap: 7px; }
}
@media (max-width:767px) {
  .journey-section { padding-block: 36px 62px; }
  .journey-heading { margin-bottom: 25px; }
  .journey-heading > p { font-size: 16px; }
  .journey-pin { display: flex; flex-direction: column; padding: 12px; border-radius: 23px; }
  .journey-toolbar { gap: 8px; flex-wrap: wrap; }
  .journey-toolbar > .journey-mini-brand { font-size: 21px; }
  .journey-example { padding-inline: 10px; gap: 7px; }
  .journey-example > span { padding-left: 7px; }
  .journey-segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; padding: 4px; }
  .journey-segments button { min-width: 0; min-height: 44px; padding: 9px 8px; font-size: .8125rem; }
  .journey-stage { order: 2; margin-block: 10px 0; min-height: 0; }
  .journey-frame { grid-template-columns: 1fr; gap: 12px; padding: 3px; align-content: start; }
  .journey-explanation h3 { max-width: 410px; font-size: 26px; margin-block: 9px; }
  .journey-explanation > p { max-width: none; font-size: 1rem; line-height: 1.45; }
  .journey-output { min-height: 0; }
  .journey-scrub[aria-hidden="true"] { display: none; }
  .journey-scenario { max-width: 340px; }
  .journey-start { gap: 9px; }
  .journey-brief { padding-block: 0; }
  .journey-start-volt { margin-top: 8px; }
  .journey-start-volt .journey-start-photo img { max-height: 150px; }
  .journey-start-volt .journey-brief-offer > strong { margin-top: 3px; font-size: 21px; }
  .journey-start-volt .journey-brief-offer p { margin-top: 4px; }
  .journey-motion-note { margin-top: 7px; }
  .journey-brief-offer > strong { font-size: 23px; }
  .journey-variants { gap: 9px; }
  .journey-variant-art strong { padding-inline: 9px; font-size: 18px; }
  .journey-feed { max-width: 262px; }
  .journey-media-feed { max-width: 100%; }
  .journey-media-feed .journey-ad-title strong { font-size: 22px; }
  .journey-start-volt .journey-brief-offer > strong { font-size: 23px; }
  .journey-variant-message { padding-inline: 4px; font-size: 18px; }
  .journey-ad-art { height: 207px; }
  .journey-wish p { font-size: 17px; }
  .journey-idea-card, .journey-test-card { padding: 14px; }
  .journey-idea-card > strong { margin-block: 9px; font-size: 23px; }
  .journey-idea-card p { margin-block: 8px; }
  .journey-tag { margin-top: 9px; }
  .journey-source-photo + .journey-connect { height: 12px; }
  .journey-step-controls { order: 1; gap: 4px; margin-top: 8px; padding: 4px 0; border-top: 0; border-bottom: 1px solid #d6d8cd; }
  .journey-step-controls button { flex-direction: column; gap: 3px; justify-content: center; min-width: 44px; min-height: 48px; padding: 3px 2px; text-align: center; font-size: .75rem; line-height: 1.35; }
  .journey-step-controls button .journey-step-long { display: none; }
  .journey-step-short { display: block; }
  .journey-bottom { order: 4; display: block; padding-top: 8px; }
  .journey-note { order: 5; }
  .journey-scroll-hint { display: block; margin-bottom: 4px; }
  .journey-bottom a { font-size: .8125rem; }
  .journey-scrub { order: 3; gap: 8px; }
  .journey-scrub input { width: 110px; }
  .journey-transcript ol { grid-template-columns: 1fr; gap: 16px; }
  /* A compact stage, not smaller body copy: the surrounding page carries the detail. */
  .journey-scroll:not([data-scroll-mode="linear"]) .journey-feed-top { display: none; }
  .journey-scroll:not([data-scroll-mode="linear"]) .journey-media-feed .journey-ad-art { max-height: 156px; }
  .journey-scroll:not([data-scroll-mode="linear"]) .journey-start-volt { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 12px; }
  .journey-scroll:not([data-scroll-mode="linear"]) .journey-start-volt .journey-start-photo { margin: 0; }
  .journey-scroll:not([data-scroll-mode="linear"]) .journey-start-volt .journey-brief-offer > strong { font-size: 21px; }
  .journey-scroll:not([data-scroll-mode="linear"]) .journey-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
  .journey-scroll:not([data-scroll-mode="linear"]) .journey-scroll-hint { margin: 0; line-height: 1.4; }
  .journey-scroll:not([data-scroll-mode="linear"]) .journey-bottom a { line-height: 1.4; }
}
/* Without enhancement every chapter remains readable, including its actual media. */
.journey-scroll[data-scroll-mode="linear"] .journey-stage { gap: 32px; }
.journey-scroll[data-scroll-mode="linear"] .journey-frame { grid-area: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.journey-scroll[data-scroll-mode="linear"] .journey-frame + .journey-frame { padding-top: 28px; border-top: 1px solid #dddcd3; }
.journey-scroll[data-scroll-mode="linear"] .journey-step-controls { display: none; }
.journey-scroll[data-scroll-mode="linear"] .journey-feed-motion,
.journey-scroll[data-scroll-mode="linear"] .journey-feed-motion .journey-shop-art { transform: none; }
@media (prefers-reduced-motion:reduce) {
  .journey-frame { transition: none; transform: none; }
  .journey-start-photo, .journey-start-volt .journey-start-photo { transform: none; }
  .journey-media-feed.journey-feed-motion, .journey-media-feed.journey-feed-motion .journey-shop-art { transform: none; }
  .journey-feed-motion, .journey-feed-motion .journey-room, .journey-feed-motion .journey-shop-art, .journey-feed-motion .journey-ad-title { transform: none; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .journey-pin { background: #f7f7f1; backdrop-filter: none; border-color: #7b7f73; }
  .journey-segments { background: #e7e9df; }
  .journey-step-controls button[aria-pressed="true"] { border-color: #843b15; }
}

.engine-section { position:relative; isolation:isolate; }
.engine-section::before { content:""; position:absolute; z-index:-1; inset:14% 0 7%; background:radial-gradient(ellipse at 70% 38%,#ffbf833d,transparent 57%),radial-gradient(ellipse at 20% 60%,#e0e4d957,transparent 51%); }
.engine-heading { max-width:740px; margin:0 auto 52px; text-align:center; }
.engine-heading .eyebrow { justify-content:center; }
.engine-heading h2 { margin-bottom:22px; }
.engine-heading > p { max-width:665px; margin:auto; color:var(--muted); font-size:17px; }
.engine-glass { position:relative; background:linear-gradient(140deg,#ffffffb5,#ffffff60 60%,#fff9f0b3); border:1px solid #ffffff; border-radius:34px; box-shadow:inset 0 1px 0 #fff,0 22px 75px -25px #78472135,0 2px 4px #5a42200c; backdrop-filter:blur(28px) saturate(135%); -webkit-backdrop-filter:blur(28px) saturate(135%); padding:24px; }
.engine-scene { min-height:386px; position:relative; display:grid; grid-template-columns:22% 46% 22%; justify-content:space-between; align-items:center; padding:28px 0 22px; }
.engine-paths { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.engine-paths path { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.engine-path-base { stroke:#c4aa9461; }
.engine-path-flow { stroke:var(--orange); stroke-dasharray:5 13; stroke-linecap:round; opacity:0; transition:opacity .25s; }
.engine-node { position:relative; min-width:0; background:linear-gradient(135deg,#fffdf8f5,#fff9f0e8); border:1px solid #fff; box-shadow:0 8px 25px -14px #805d383e,inset 0 0 0 1px #87746410; border-radius:20px; }
.engine-input,.engine-account { padding:23px 20px; }
.engine-node-label { display:block; color:#77513b; font-size:10px; line-height:1.5; text-transform:uppercase; font-weight:650; letter-spacing:.1em; }
.engine-input-mark { display:flex; align-items:center; justify-content:space-between; margin:15px 0 12px; }
.engine-input-mark .icon { width:24px; height:24px; }
.engine-input-mark > span { color:#b9a79b; font-size:12px; font-variant-numeric:tabular-nums; }
.engine-node h3 { font-size:21px; line-height:1.17; letter-spacing:-.035em; }
.engine-input-list { display:grid; gap:9px; margin-top:20px; font-size:12px; }
.engine-input-list li { display:flex; align-items:center; gap:8px; }
.engine-input-list .icon { width:14px; height:14px; color:var(--orange); }
.engine-platform-wrap { position:relative; padding:15px 11px; border:1px solid #d67d3d5e; border-radius:29px; background:#f4c99512; }
.engine-bounds { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:9px; line-height:1.4; color:#815b40; padding:0 9px 13px; }
.engine-bounds span { display:flex; align-items:center; gap:5px; }
.engine-bounds .icon { width:13px; height:13px; }
.engine-bounds span:last-child::before { content:""; width:5px; height:5px; border-radius:50%; background:#789361; }
.engine-platform { padding:22px 18px 20px; background:linear-gradient(145deg,#fffffff5,#fffaf3ed); }
.engine-brand { display:flex; align-items:center; gap:10px; padding-bottom:20px; }
.engine-brand img { width:39px; height:39px; }
.engine-brand strong { display:block; font-size:25px; font-weight:550; letter-spacing:-.05em; }
.engine-brand div > span { display:block; margin-top:3px; font-size:9px; color:#735f4f; line-height:1.5; }
.engine-status-dot { width:7px; height:7px; border-radius:50%; background:#c1bdb2; margin-left:auto; }
.engine-platform-body { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:12px; }
.engine-functions { display:grid; gap:6px; }
.engine-functions li { min-height:29px; display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:7px; font-size:10px; font-weight:500; line-height:1.5; color:#766e66; background:#eee8e336; transition:background .3s,color .3s; }
.engine-function-light { flex:none; width:5px; height:5px; border-radius:50%; background:#cabeb2; }
.engine-mode { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; color:#77553c; font-size:9px; line-height:1.5; text-align:center; }
.engine-mode .icon { width:12px; height:12px; }
.engine-creatives { height:170px; position:relative; perspective:900px; }
.engine-creative { position:absolute; width:69%; height:140px; overflow:hidden; border:2px solid #fff; border-radius:9px; box-shadow:0 6px 17px #42281729; background:#eed4b4; transition:transform .4s ease,opacity .3s; }
.engine-creative-art { height:100%; position:relative; background:#263934; }
.engine-creative-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .3s; }
.engine-creative-art .icon { width:36px; height:36px; color:#ac481f; }
.engine-creative span { position:absolute; top:8px; left:8px; right:4px; font-size:7px; font-weight:700; letter-spacing:.08em; color:#fff; text-shadow:0 1px 4px #000; }
.engine-creative strong { position:absolute; left:8px; right:6px; bottom:10px; color:#fff; font-size:13px; line-height:1.07; letter-spacing:-.04em; text-wrap:balance; }
.engine-creative::after { content:""; position:absolute; inset:44% 0 0; background:linear-gradient(transparent,#16221ff5); z-index:0; }
.engine-creative strong,.engine-creative span { z-index:1; }
.engine-creative-first { top:5px; left:-1%; transform:rotate(-8deg); }
.engine-creative-next { top:24px; right:-1%; transform:rotate(8deg); }
.engine-creative-next .engine-creative-art { background:radial-gradient(ellipse at 20% 15%,#fff7ee,#dfb89470 70%),#f2dec9; }
.engine-creative-revised { opacity:0; }
.engine-new-test { position:absolute; display:flex; align-items:center; gap:4px; bottom:-4px; right:0; padding:6px 8px; border-radius:20px; color:#884119; background:#fff6e8; border:1px solid #f4bd92; font-size:9px; font-weight:600; opacity:0; transform:translateY(4px); transition:opacity .3s,transform .3s; box-shadow:0 5px 14px #95502414; }
.engine-new-test .icon { width:11px; height:11px; }
.engine-account h3 { margin-top:18px; }
.engine-channels { display:grid; gap:8px; margin-top:19px; }
.engine-channels > span { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:550; }
.engine-channels b { font-family:Arial,sans-serif; font-size:23px; line-height:23px; width:23px; padding-left:5px; color:#47649c; }
.engine-channels svg { width:23px; height:23px; color:#936264; }
.engine-account > p { font-size:11px; margin-top:16px; color:#76675b; line-height:1.5; }
.engine-feedback { display:flex; align-items:center; gap:6px; font-size:9px; margin-top:16px; color:#887460; }
.engine-feedback .icon { width:14px; height:14px; }
.engine-navigation { border-top:1px solid #b5a18a24; padding-top:15px; }
.engine-step-buttons { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.engine-step-buttons button { position:relative; min-height:57px; padding:10px 8px 12px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 7px; border-radius:11px; background:transparent; font-size:11px; font-weight:550; overflow:hidden; }
.engine-step-buttons button > span { color:#ac9582; font-size:9px; letter-spacing:.04em; }
.engine-step-buttons button[aria-pressed="true"] { color:#9d4118; background:#ffffffdb; box-shadow:0 3px 10px #4424120c; }
.engine-step-buttons button[aria-pressed="true"] > span { color:#9d4118; }
.engine-step-buttons button i { position:absolute; bottom:0; left:10%; width:80%; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; }
.engine-step-buttons button[aria-pressed="true"] i { transform:scaleX(1); }
.engine-caption { padding:22px 12px; border-top:1px solid #b5a18a24; }
.engine-caption-count { display:block; margin-bottom:9px; font-size:.75rem; color:#93633f; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.engine-caption h3 { font-size:23px; line-height:1.2; letter-spacing:-.03em; }
.engine-caption p { margin-top:9px; font-size:1rem; line-height:1.65; color:#625547; max-width:700px; }
.engine-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 18px; padding:0 4px 6px; border-bottom:1px solid #b5a18a24; }
.engine-footer > span { color:#685b4d; font-size:.75rem; line-height:1.5; }
.engine-skip { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.8125rem; text-decoration:underline; text-underline-offset:4px; }
.engine-step-buttons button:active { transform:scale(.97); transition:transform .1s ease-out; }
.engine-explanation { margin-top:22px; padding-inline:15px; }
.engine-explanation > p { max-width:690px; color:#686157; font-size:.8125rem; line-height:1.65; }
.engine-navigation,.engine-scroll-hint { display:none; }
.engine-track[data-engine-mode="pinned"] { height:var(--engine-track-height); }
.engine-track[data-engine-mode="pinned"] .engine-glass { position:sticky; top:var(--engine-pin-top); }
.engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-navigation { display:block; }
.engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-scroll-hint { display:block; }
.engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-captions { display:grid; }
.engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-caption { grid-area:1/1; visibility:hidden; }
.engine-track[data-engine-mode="pinned"] .engine-caption[data-active="true"] { visibility:visible; }
.engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-scene { min-height:0; padding:14px 0; }
.engine-track[data-engine-mode="pinned"] .engine-path-flow { stroke-dashoffset:calc(var(--engine-progress,0) * -180); }
.engine-track[data-engine-mode="pinned"] .engine-status-dot { background:#b77837; }
.engine-track[data-engine-mode="pinned"] .engine-step-buttons button[aria-pressed="true"] i { transform:scaleX(var(--engine-phase-progress,0)); }
.engine-track[data-engine-step="0"] .engine-path-input,.engine-track[data-engine-step="1"] .engine-path-input,.engine-track[data-engine-step="3"] .engine-path-out,.engine-track[data-engine-step="4"] .engine-path-return,.engine-track[data-engine-step="5"] .engine-path-report { opacity:1; }
.engine-track[data-engine-step="0"] [data-engine-function="0"],.engine-track[data-engine-step="1"] [data-engine-function="0"],.engine-track[data-engine-step="2"] [data-engine-function="1"],.engine-track[data-engine-step="2"] [data-engine-function="2"],.engine-track[data-engine-step="3"] [data-engine-function="3"],.engine-track[data-engine-step="4"] [data-engine-function="4"],.engine-track[data-engine-step="5"] [data-engine-function="1"],.engine-track[data-engine-step="5"] [data-engine-function="2"] { background:#f9d2a755; color:#963f16; }
.engine-track[data-engine-step="0"] .engine-input,.engine-track[data-engine-step="1"] .engine-platform,.engine-track[data-engine-step="2"] .engine-platform,.engine-track[data-engine-step="5"] .engine-platform,.engine-track[data-engine-step="3"] .engine-account,.engine-track[data-engine-step="4"] .engine-account { border-color:#c75d2880; box-shadow:0 7px 24px -12px #c75d2850; }
.engine-track[data-engine-step="2"] .engine-creative-first { transform:rotate(-12deg) translateX(-3px); }
.engine-track[data-engine-step="2"] .engine-creative-next { transform:rotate(9deg) translateY(-5px); }
.engine-track[data-engine-step="4"] .engine-feedback,.engine-track[data-engine-step="5"] .engine-feedback { color:#a3491c; }
.engine-track[data-engine-step="5"] .engine-creative-next { transform:rotate(0) translateY(-8px) scale(1.03); }
.engine-track[data-engine-step="5"] .engine-creative-next .engine-creative-art { background:#f1d6bc; }
.engine-track[data-engine-step="5"] .engine-creative-original { opacity:0; }
.engine-track[data-engine-step="5"] .engine-creative-revised { opacity:1; }
.engine-track[data-engine-step="5"] .engine-new-test { opacity:1; transform:translateY(0); }

@media (max-width:1100px) and (min-width:761px) {
  .engine-glass { padding:22px; }
  .engine-scene { grid-template-columns:21% 48% 21%; }
  .engine-input,.engine-account { padding:20px 13px; }
  .engine-platform { padding:18px 12px; }
  .engine-platform-wrap { padding:14px 8px; }
  .engine-platform-body { grid-template-columns:1.1fr .9fr; gap:4px; }
  .engine-node h3 { font-size:18px; }
  .engine-creative { width:78%; }
  .engine-bounds { padding-inline:3px; font-size:8px; }
  .engine-functions li { font-size:9px; gap:5px; padding-inline:4px; }
  .engine-step-buttons button { font-size:10px; }
}
@media (max-width:760px) {
  .engine-heading { margin-bottom:30px; text-align:left; }
  .engine-heading .eyebrow { justify-content:flex-start; }
  .engine-heading > p { font-size:1rem; }
  .engine-glass { padding:16px; border-radius:25px; }
  .engine-scene { display:flex; flex-direction:column; gap:21px; padding:20px 0; }
  .engine-paths { display:none; }
  .engine-input,.engine-account,.engine-platform-wrap { width:100%; }
  .engine-input { padding:12px 14px; display:grid; grid-template-columns:1fr; gap:7px; }
  .engine-input-mark { display:none; }
  .engine-input h3,.engine-account h3 { font-size:1rem; margin:0; }
  .engine-input-list { display:flex; flex-wrap:wrap; gap:8px 12px; margin:0; font-size:.8125rem; }
  .engine-input-list li { gap:4px; }
  .engine-input-list .icon { width:12px; height:12px; }
  .engine-input::after,.engine-platform-wrap::after { content:"↓"; position:absolute; font-size:19px; line-height:20px; height:20px; width:28px; text-align:center; left:calc(50% - 14px); bottom:-21px; color:#b58158; }
  .engine-platform-wrap { padding:10px 8px 8px; border-radius:25px; }
  .engine-platform { padding:14px 12px; }
  .engine-brand { padding-bottom:12px; }
  .engine-brand strong { font-size:26px; }
  .engine-brand div > span { font-size:.75rem; }
  .engine-bounds { font-size:.75rem; padding:0 4px 12px; }
  .engine-node-label { font-size:.75rem; letter-spacing:.06em; }
  .engine-platform-body { grid-template-columns:1.05fr 1fr; gap:9px; }
  .engine-functions { gap:4px; }
  .engine-functions li { min-height:30px; font-size:.75rem; padding:6px 4px; line-height:1.45; overflow-wrap:anywhere; }
  .engine-creatives { height:150px; }
  .engine-creative { width:76%; height:128px; }
  .engine-creative strong { font-size:13px; }
  .engine-mode { font-size:.75rem; margin-top:12px; }
  .engine-account { padding:12px 14px; display:grid; grid-template-columns:1fr; gap:8px; }
  .engine-account .engine-node-label { grid-column:1/-1; }
  .engine-channels { display:flex; flex-wrap:wrap; margin:0; gap:6px 16px; }
  .engine-channels > span { font-size:12px; gap:6px; }
  .engine-channels b,.engine-channels svg { width:19px; height:19px; font-size:20px; line-height:19px; }
  .engine-feedback { grid-column:1/-1; margin:0; padding:0; border:0; font-size:.8125rem; }
  .engine-navigation { padding-top:12px; }
  .engine-step-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .engine-step-buttons button { flex-direction:column; gap:5px; min-width:44px; min-height:57px; font-size:.75rem; padding:8px 3px 11px; overflow-wrap:anywhere; hyphens:auto; }
  .engine-step-buttons button > span { font-size:9px; }
  .engine-caption { padding:18px 3px; }
  .engine-caption h3 { font-size:22px; }
  .engine-caption p { font-size:1rem; line-height:1.65; }
  .engine-footer { padding:0 3px 6px; gap:2px; }
  .engine-footer > span { text-align:left; font-size:.75rem; }
  .engine-explanation { display:block; padding-inline:4px; margin-top:17px; }
  .engine-explanation > p { font-size:.8125rem; }
  .engine-track[data-engine-step="4"] .engine-platform-wrap::after { content:"↑"; color:var(--orange); }
  .engine-track[data-engine-step="5"] .engine-input::after { content:"↑"; color:var(--orange); }
  /* Compact illustration only during the measured pin. Explanatory text stays
     1rem; insufficient height falls back to the full vertical document. */
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-glass { padding:12px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-footer { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:12px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-skip { line-height:1.35; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-scene { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:8px; padding:6px 0; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-input { grid-column:1; grid-row:1; padding:9px; align-content:center; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-account { grid-column:2; grid-row:1; padding:9px; align-content:center; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-platform-wrap { grid-column:1/-1; grid-row:2; padding:7px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) :is(.engine-input-list,.engine-account h3,.engine-account > p,.engine-feedback) { display:none; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-input::after,
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-platform-wrap::after { display:none; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-platform { padding:10px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-brand { padding-bottom:6px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-brand img { width:32px; height:32px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-brand strong { font-size:23px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-brand div > span { display:none; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-bounds { padding-bottom:6px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-mode { margin-top:6px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-functions li { grid-area:1/1; visibility:hidden; font-size:.875rem; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]):is([data-engine-step="0"],[data-engine-step="1"]) [data-engine-function="0"],
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]):is([data-engine-step="2"],[data-engine-step="5"]) [data-engine-function="2"],
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"])[data-engine-step="3"] [data-engine-function="3"],
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"])[data-engine-step="4"] [data-engine-function="4"] { visibility:visible; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-creatives { height:116px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-creative { height:96px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-new-test { bottom:0; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-caption { padding:12px 2px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-caption p { font-size:1rem; line-height:1.5; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-step-buttons { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-navigation { padding-top:8px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-step-buttons button { min-width:44px; min-height:48px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-step-name { display:none; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-step-buttons button > span { font-size:.8125rem; }
}
@media (min-width:761px) and (max-height:850px) {
  /* Keep ordinary laptop windows in the same story, without shrinking body text. */
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-glass { padding:16px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-scene { padding:8px 0; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-platform-wrap { padding:10px 9px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-platform { padding:14px 12px 12px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-brand { padding-bottom:10px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-creatives { height:130px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-creative { height:106px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-functions { gap:4px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-functions li { min-height:25px; padding-block:3px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-caption { padding:14px 10px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-navigation { padding-top:8px; }
  .engine-track:is([data-engine-mode="measure"],[data-engine-mode="pinned"]) .engine-step-buttons button { min-width:44px; min-height:48px; }
}
.engine-story { max-width: 850px; margin: 28px 0 34px; padding: 7px 0 7px 24px; border-left: 2px solid #c75d28; font-family: Newsreader, Georgia, serif; font-style: italic; font-size: clamp(25px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.025em; color: #885132; }
.engine-definition { max-width: 840px; margin: 30px auto 0; font-size: 1rem; line-height: 1.65; color: var(--muted); text-align: center; }
.engine-purpose { max-width: 780px; padding: 5px 12px 28px; }
.engine-purpose h3 { max-width: 740px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.04em; line-height: 1.15; }
.engine-purpose p { margin-top: 15px; font-size: 1rem; line-height: 1.65; color: #625547; }
.engine-return-story { display: flex; align-items: center; gap: 18px; padding: 19px 24px; margin-block: 24px; border-radius: 17px; background: #e9eddf; border: 1px solid #d2dcc2; }
.engine-return-story > span { font-size: 35px; color: #596d45; flex: none; }
.engine-return-story p { font-size: 1rem; color: #46533b; line-height: 1.6; }
.engine-return-story strong { display: block; font-size: 18px; color: #303c28; margin-bottom: 3px; }
@media (max-width: 700px) {
  .engine-story { margin: 22px 0 28px; padding-left: 18px; font-size: 26px; }
  .engine-definition { text-align: left; }
  .engine-purpose { padding: 5px 3px 24px; }
  .engine-return-story { padding: 16px; gap: 12px; align-items: flex-start; }
  .engine-return-story > span { font-size: 28px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .engine-glass { background:#fffaf3; }
  .engine-node { background:#fffdf9; }
}
@media (prefers-reduced-motion:reduce) {
  .engine-glass *, .engine-glass *::before,.engine-glass *::after { animation:none!important; transition:none!important; }
  .engine-creative,.engine-creative img,.engine-new-test { transform:none!important; }
}
@media (prefers-reduced-transparency:reduce) {
  .engine-glass { background:#fffaf3; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .engine-node { background:#fffdf9; }
}
@media (prefers-contrast:more) {
  .engine-glass,.engine-node { background:#fffdf9; border-color:#765744; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .engine-heading p,.engine-caption p,.engine-explanation > p,.engine-node-label,.engine-functions li,.engine-footer > span { color:#473c32; }
  .engine-step-buttons button[aria-pressed="true"] { outline:1px solid #87350e; }
}

/* Editorial explanation: clear reading surfaces, glass reserved for context. */
.experience-heading { max-width: 820px; }
.experience-heading h2 { margin: 22px 0; max-width: 780px; }
.experience-heading > p { margin: 0; max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.experience-kicker { display: block; color: var(--orange); font-size: .75rem; font-weight: 650; line-height: 1.6; letter-spacing: .08em; }
.experience-people { background: radial-gradient(ellipse 60% 50% at 8% 55%, #f3dec455, transparent 85%); }
.people-layout { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.5fr); gap: clamp(36px, 6vw, 96px); margin-top: 54px; align-items: start; }
.people-portrait { margin: 0; max-width: 360px; }
.people-image { position: relative; margin: 0; overflow: hidden; border-radius: 28px; box-shadow: var(--glass-edge), 0 22px 60px -32px #4c35245e; }
.people-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 20%; }
.people-image figcaption { position: absolute; inset: auto 14px 14px; padding: 15px 18px; border: 1px solid var(--glass-border); border-radius: 16px; background: #fffdf5ed; box-shadow: var(--glass-edge); }
.people-image figcaption strong, .people-image figcaption span { display: block; }
.people-image figcaption strong { font-size: 17px; font-weight: 600; }
.people-image figcaption span { margin-top: 2px; font-size: .875rem; color: var(--muted); }
.people-video-note { padding: 20px 0 0 18px; margin-top: 22px; border-left: 2px solid #d6844659; }
.people-video-note h3 { font-size: 21px; margin: 9px 0; }
.people-video-note p { font-size: 1rem; line-height: 1.6; color: var(--muted); margin: 0; }
.people-roles { margin: 0; }
.people-roles > div { padding: 24px 0; border-top: 1px solid var(--line); }
.people-roles > div:first-child { padding-top: 10px; border-top: 0; }
.people-roles dt { display: flex; align-items: baseline; gap: 16px; font-size: 21px; font-weight: 550; line-height: 1.3; letter-spacing: -.025em; }
.people-roles dt span { color: var(--orange); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.people-roles dd { margin: 12px 0 0 32px; color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 620px; }
.people-contact { display: flex; gap: 14px; padding: 20px 22px; border: 1px solid var(--glass-border); border-radius: 19px; background: var(--glass-thick); box-shadow: var(--glass-edge); margin: 5px 0 20px; }
.people-contact > .icon { flex: 0 0 23px; color: var(--orange); margin-top: 2px; }
.people-contact p { margin: 0; font-size: 1rem; line-height: 1.55; }
.people-contact strong { font-weight: 550; }
.people-contact p span { display: block; color: var(--muted); font-size: .9375rem; margin-top: 7px; }
.people-explanation > .button { font-size: .9375rem; }

.experience-value { padding-top: 74px; }
.experience-example-note { color: var(--muted); margin: 34px 0 16px; font-size: .875rem; }
.experience-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.experience-case { min-width: 0; padding: clamp(28px, 4vw, 44px); border: 1px solid var(--glass-border); border-radius: 28px; background: linear-gradient(145deg, #fffdf7e8, #f8e8d5a8); box-shadow: var(--glass-edge), 0 22px 65px -46px #71513366; }
.experience-case-1 { background: linear-gradient(145deg, #fffdf8e8, #ecede2a8); }
.experience-case-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px; color: var(--orange); background: #ffffffbf; border: 1px solid #fff; border-radius: 15px; box-shadow: var(--glass-edge); }
.experience-case-icon .icon { width: 24px; height: 24px; }
.experience-case h3 { margin: 14px 0 28px; font-size: clamp(24px, 2.45vw, 32px); max-width: 450px; }
.experience-case dl { margin: 0; }
.experience-case dl > div + div { margin-top: 23px; }
.experience-case dt { font-size: .875rem; font-weight: 650; }
.experience-case dd { margin: 7px 0 0; color: #625d55; font-size: 1rem; line-height: 1.65; }
.experience-included { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 27px 4px 0; }
.experience-included p { max-width: 690px; color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0; }
.experience-included .text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: .9375rem; }

.experience-start { background: radial-gradient(ellipse 90% 75% at 0% 70%, #f4e3cf52, transparent 70%); }
.start-timeline { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 46px 0 34px; gap: 38px; counter-reset: none; }
.start-timeline li { position: relative; border-top: 1px solid var(--line); padding-top: 25px; }
.start-number { display: block; color: var(--orange); font-size: 13px; font-weight: 600; margin-bottom: 23px; letter-spacing: .07em; }
.start-timeline h3 { font-size: 24px; line-height: 1.18; margin: 0 0 16px; }
.start-timeline p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.start-preparation { display: flex; align-items: start; gap: 18px; padding: 24px 28px; background: var(--glass-thick); border: 1px solid var(--glass-border); border-radius: 19px; box-shadow: var(--glass-edge); }
.start-preparation h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.35; }
.start-preparation p { max-width: 850px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.start-preparation > .icon { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; color: var(--orange); }
.start-note { max-width: 960px; color: var(--muted); font-size: .9375rem; line-height: 1.6; margin: 16px 4px 0; }
.start-advisor { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; }
.start-advisor p { font-size: 17px; line-height: 1.5; max-width: 480px; margin: 0; }
.start-advisor .button { flex-shrink: 0; font-size: .9375rem; }

@media (max-width: 1000px) {
  .people-layout { gap: 42px; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.3fr); }
  .start-timeline { gap: 26px; }
  .experience-included { flex-direction: column; align-items: start; gap: 12px; }
}

@media (max-width: 700px) {
  .experience-people, .experience-value, .experience-start { padding-block: 68px; }
  .experience-heading h2 { font-size: clamp(31px, 8.3vw, 42px); margin-block: 19px; }
  .experience-heading > p { font-size: 16px; }
  .people-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }
  .people-portrait { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1fr); gap: 20px; max-width: none; align-items: start; }
  .people-image { border-radius: 20px; }
  .people-image img { aspect-ratio: 4 / 6; }
  .people-image figcaption { position: static; padding: 12px; border: 0; border-radius: 0; background: #fffdf8; }
  .people-image figcaption strong { font-size: .875rem; line-height: 1.4; }
  .people-image figcaption span { font-size: .8125rem; line-height: 1.5; }
  .people-video-note { padding: 0 0 0 16px; margin: 0; }
  .people-video-note .experience-kicker { font-size: .75rem; }
  .people-video-note h3 { font-size: 21px; }
  .people-video-note p { font-size: 1rem; }
  .people-roles > div { padding-block: 22px; }
  .people-roles dt { font-size: 21px; gap: 12px; }
  .people-roles dd { margin-left: 28px; font-size: 1rem; }
  .people-contact { padding: 18px; }
  .people-contact p { font-size: 1rem; }
  .people-explanation > .button { width: 100%; }
  .experience-cases { grid-template-columns: 1fr; gap: 18px; }
  .experience-case { padding: 28px 24px; border-radius: 22px; }
  .experience-case h3 { font-size: 27px; margin-bottom: 24px; }
  .experience-case dd { font-size: 1rem; }
  .experience-included { padding-top: 23px; }
  .start-timeline { grid-template-columns: 1fr; gap: 24px; margin-top: 34px; }
  .start-timeline li { padding-top: 20px; padding-left: 41px; }
  .start-number { position: absolute; left: 0; top: 20px; }
  .start-timeline h3 { font-size: 23px; margin-bottom: 12px; }
  .start-preparation { padding: 20px; gap: 14px; }
  .start-advisor { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 30px; }
  .start-advisor p { font-size: 16px; }
}

@media (max-width: 430px) {
  .people-portrait { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .people-image { width: min(240px, 100%); }
  .people-image img { aspect-ratio: 4 / 4.6; }
  .people-video-note p { font-size: 1rem; }
}

@media (prefers-reduced-transparency: reduce) {
  .people-image figcaption, .people-contact, .experience-case-icon, .start-preparation { background: #fffdf8; }
  .experience-case { background: #fff8ed; }
  .experience-case-1 { background: #f2f2e9; }
}

@media (prefers-contrast: more) {
  .people-contact, .experience-case, .experience-case-icon, .start-preparation { border-color: #81776a; background: #fff; }
  .people-image figcaption { background: #fff; border-color: #81776a; }
  .people-roles > div, .people-video-note, .start-timeline li { border-color: #81776a; }
}

/* Business relevance, without a second fictional brand. */
.experience-value { background: #f2efe6; border-block: 1px solid #dfd8c9; }
.experience-value .experience-heading { max-width: 880px; }
.experience-value .experience-heading h2 { max-width: 850px; font-size: clamp(32px, 3.7vw, 49px); }
.experience-cases { display: block; }
.experience-case { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 6vw, 90px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.experience-case h3 { font-size: clamp(28px, 3.3vw, 42px); margin: 14px 0 26px; }
.experience-case-copy > p { font-size: 1rem; color: var(--muted); line-height: 1.65; }
.experience-service-work { padding: 6px 0 6px 30px; border-left: 2px solid #bf754657; }
.experience-case-1 { grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); margin-top: 48px; padding-top: 34px; border-top: 1px solid #cbc3b4; }
.experience-case-1 h3 { font-size: clamp(25px, 2.6vw, 34px); margin-bottom: 15px; max-width: none; }
.experience-case-1 p { font-size: 1rem; color: var(--muted); line-height: 1.65; }
.experience-case-1 .text-link { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; margin-top: 10px; font-size: .9375rem; }
.experience-case-1 .experience-case-copy { grid-column: 1; grid-row: 1; }
.experience-case-1 .business-product { grid-column: 2; grid-row: 1; }
.business-product { min-width: 0; position: relative; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 50px -28px #1c282780; }
.business-product img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.business-product figcaption { padding: 17px 23px; background: #fffaf0; color: #474539; font-size: 1rem; }
.experience-included { padding-top: 32px; margin-top: 32px; border-top: 1px solid #cbc3b4; }
.experience-people { padding-top: 84px; }
.people-layout { margin-top: 36px; }
.people-roles > div { padding-block: 20px; }
.experience-start { background: #edf0e6; border-block: 1px solid #d8decf; }
.start-preparation { background: #ffffff9c; }
@media (max-width: 700px) {
  .experience-case { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0; }
  .experience-case-copy { grid-row: 1; }
  .experience-service-work { padding: 6px 0 6px 18px; }
  .experience-case-1 { grid-template-columns: minmax(0, 1fr); }
  .experience-case h3 { font-size: 30px; margin-bottom: 20px; }
  .experience-case dl > div + div { margin-top: 16px; }
  .experience-case-1 { padding-top: 34px; margin-top: 40px; }
  .experience-case-1 .experience-case-copy { grid-column: 1; grid-row: 1; }
  .experience-case-1 .business-product { grid-column: 1; grid-row: 2; }
  .experience-included { margin-top: 26px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .experience-case { background: none; }
  .start-preparation { background: #fffdf5; }
  .experience-value, .experience-start { border-color: #7c796a; }
}

/* One editorial spread, not a row of feature cards. */
.learning-example { --learning-ink: #343e32; --learning-muted: #535e50; margin: 34px 0 48px; padding: clamp(26px, 4vw, 48px); color: var(--learning-ink); background: #e9ecdf; border: 1px solid #d5ddc9; border-radius: 30px; }
.learning-label { margin: 0 0 30px; color: #576346; font-size: .8125rem; font-weight: 650; letter-spacing: .075em; line-height: 1.6; }
.learning-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.learning-reasons { list-style: none; margin: 0; padding: 0; }
.learning-reasons li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid #cbd2be; }
.learning-reasons li:first-child { padding-top: 0; border-top: 0; }
.learning-reasons li:last-child { padding-bottom: 0; }
.learning-number { color: #687551; font-size: .875rem; font-weight: 650; line-height: 1.6; padding-top: 3px; }
.learning-reasons h3 { margin: 0 0 10px; font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -.025em; }
.learning-reasons p { margin: 0; color: var(--learning-muted); font-size: 1rem; line-height: 1.6; }
.learning-visual { position: relative; min-width: 0; width: 100%; max-width: 460px; margin-inline: auto; padding-top: 64px; padding-left: 28px; }
.learning-next { position: relative; margin: 0; overflow: hidden; border-radius: 8px 8px 24px 24px; background: #f8f6ea; box-shadow: 0 17px 44px -22px #283b3266; }
.learning-next > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.learning-next figcaption { padding: 23px 25px 25px; }
.learning-next figcaption > span { display: block; color: #8b482a; font-size: .8125rem; font-weight: 650; line-height: 1.5; }
.learning-next strong { display: block; margin-top: 8px; max-width: 330px; font-size: clamp(28px, 2.8vw, 38px); font-weight: 550; line-height: 1.07; letter-spacing: -.045em; }
.learning-next figcaption > p { margin: 12px 0 0; color: #666452; font-size: 1rem; line-height: 1.5; }
.learning-before { position: absolute; left: 0; top: 0; width: 43%; margin: 0; padding: 6px; background: #fffdf5; border-radius: 10px; transform: rotate(-5deg); box-shadow: 0 8px 25px -10px #23312870; }
.learning-before > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; }
.learning-before figcaption { padding: 8px 3px 3px; color: #635644; font-size: .8125rem; font-weight: 550; line-height: 1.5; }
.learning-curve { position: absolute; left: 50%; top: -6px; width: 90px; height: 72px; color: #9e5734; }
.learning-outcome { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); margin-top: 36px; padding-top: 26px; border-top: 1px solid #cbd2be; }
.learning-outcome > strong { max-width: 410px; font-size: 21px; font-weight: 550; line-height: 1.35; letter-spacing: -.02em; }
.learning-outcome > p { margin: 0; color: var(--learning-muted); font-size: 1rem; line-height: 1.6; }
.learning-note { margin: 20px 0 0; color: #606b55; font-size: .875rem; line-height: 1.6; }

@media (max-width: 900px) {
  .learning-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .learning-reasons li { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .learning-visual { padding-left: 12px; }
  .learning-next figcaption { padding: 22px 18px; }
  .learning-before { width: 51%; }
  .learning-curve { left: 56%; width: 72px; }
}

@media (max-width: 700px) {
  .learning-example { margin-block: 28px 36px; padding: 26px 22px; border-radius: 23px; }
  .learning-label { margin-bottom: 26px; font-size: .75rem; }
  .learning-layout, .learning-outcome { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .learning-reasons li { grid-template-columns: 27px minmax(0, 1fr); }
  .learning-reasons h3 { font-size: 23px; }
  .learning-visual { max-width: 480px; width: 100%; margin-inline: auto; padding-top: 56px; padding-left: 16px; }
  .learning-before { width: 45%; }
  .learning-curve { left: 50%; width: 74px; top: -10px; }
  .learning-next strong { font-size: clamp(29px, 8vw, 38px); }
  .learning-next figcaption { padding: 20px; }
  .learning-outcome { margin-top: 28px; padding-top: 24px; gap: 12px; }
  .learning-outcome > strong { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .learning-before { transform: none; }
}

@media (prefers-contrast: more) {
  .learning-example { --learning-ink: #20291c; --learning-muted: #313e29; background: #f4f6ec; border-color: #647453; }
  .learning-reasons li, .learning-outcome { border-color: #647453; }
  .learning-note, .learning-label, .learning-number { color: #36432d; }
  .learning-before, .learning-next { box-shadow: none; outline: 1px solid #647453; }
}

.assistant-dialog {
  width: min(720px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100svh - 48px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  color: var(--ink);
  background: #faf8f4f5;
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  backdrop-filter: blur(28px) saturate(125%);
  box-shadow: var(--glass-edge), 0 30px 100px #2e211e47;
  overscroll-behavior: contain;
  overflow-y: auto;
  scroll-padding-top: 10rem;
}
.assistant-dialog:not([open]) { display: none; }
.assistant-dialog::backdrop { background: #24201b69; }
.assistant-surface { padding: 32px; }
.assistant-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: -32px -32px 0; padding: 26px 32px 16px; background: #faf8f4f5; border-bottom: 1px solid #d8cec080; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.assistant-note { margin: 0 0 12px; color: #7d4527; font-size: 11px; font-weight: 600; letter-spacing: .045em; }
.assistant-header h2 { font-size: clamp(27px, 4vw, 35px); line-height: 1.1; margin: 0; }
.assistant-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid #6d5a452b;
  border-radius: 50%;
  background: #eee7df;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.assistant-close span { font-size: 29px; line-height: 1; font-weight: 300; }
.assistant-description { margin: 16px 0 24px; max-width: 55ch; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.assistant-tabs { display: flex; gap: 4px; width: fit-content; padding: 4px; border-radius: 999px; background: #e9e3db; border: 1px solid #fff; }
.assistant-tabs button {
  min-height: 44px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #59524a;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.assistant-tabs button[aria-selected=true] { color: var(--ink); background: #fffdf9; border-color: #ffffffd9; box-shadow: 0 2px 5px #493a2715; }
.assistant-tabs .icon { width: 17px; height: 17px; color: var(--orange); }
.assistant-question-label { margin: 26px 0 10px; font-size: 12px; color: var(--muted); }
.assistant-topic-picker { display: none; }
.assistant-topic-picker label { color: var(--muted); font-size: 12px; line-height: 1.5; }
.assistant-topic-picker select { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid #b9a59099; border-radius: 12px; background: #fffaf3; color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.assistant-topics { display: flex; flex-wrap: wrap; gap: 7px; }
.assistant-topics button {
  min-height: 44px;
  padding: 9px 14px;
  text-align: left;
  border: 1px solid #b9a59066;
  border-radius: 14px;
  background: #fffaf3;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}
.assistant-topics button[aria-pressed=true] { background: #f8e6d6; border-color: #b3693e99; color: #783913; }
.assistant-answer { margin-top: 22px; padding: 23px 25px; border: 1px solid #ddd4c7; border-radius: 20px; background: #fffdf9; }
.assistant-answer-label { display: block; font-size: 10px; letter-spacing: .07em; font-weight: 600; text-transform: uppercase; color: #81502e; margin-bottom: 12px; }
.assistant-answer h3 { margin: 0 0 14px; font-size: 21px; line-height: 1.25; }
.assistant-answer p { margin: 0 0 12px; color: #5e5952; font-size: 1rem; line-height: 1.7; }
.assistant-answer p:last-child { margin-bottom: 0; }
.assistant-voice { padding: 28px 0 10px; }
.assistant-voice-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: #efe3d5; border: 1px solid #d5b99b; color: #8c4820; font-size: 12px; font-weight: 600; }
.assistant-voice h3 { margin: 20px 0 12px; font-size: 25px; }
.assistant-voice > strong { display: block; font-size: 14px; font-weight: 550; }
.assistant-voice p { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 53ch; }
.assistant-voice .text-link { background: none; border: 0; padding: 6px 0; min-height: 44px; font: inherit; font-size: 13px; cursor: pointer; }
.assistant-footer { margin-top: 24px; padding-top: 22px; border-top: 1px solid #d8cec0; }
.assistant-footer .button { min-height: 46px; font-size: 13px; }
.assistant-footer p { margin: 14px 0 0; color: #655a4e; font-size: .8125rem; line-height: 1.6; }
.assistant-dialog button { transition: background-color 150ms ease, transform 120ms ease; touch-action: manipulation; }
.assistant-dialog button:active { transform: scale(.975); transition-duration: 70ms; }
.assistant-close:hover { background: #e3d9cc; }
.assistant-topics button:hover { border-color: #a66c49; }
.assistant-dialog :focus-visible { outline: 2px solid #9f461b; outline-offset: 3px; }
@media (max-width: 540px) {
  .assistant-dialog { width: calc(100% - 20px); max-height: calc(100svh - 24px); border-radius: 24px; }
  .assistant-surface { padding: 23px 18px; }
  .assistant-header { gap: 10px; margin: -23px -18px 0; padding: 20px 18px 14px; }
  .assistant-header h2 { font-size: 27px; }
  .assistant-note { font-size: .75rem; line-height: 1.5; }
  .assistant-description { font-size: 1rem; }
  .assistant-tabs button { font-size: .875rem; }
  .assistant-topic-picker label { font-size: .8125rem; }
  .assistant-topics, .assistant-question-label { display: none; }
  .assistant-topic-picker { display: grid; gap: 8px; margin-top: 22px; }
  .assistant-answer { padding: 20px 18px; }
  .assistant-footer .button { width: 100%; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-dialog button { transition: none; }
  .assistant-dialog button:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .assistant-dialog, .assistant-header { background: #faf8f4; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .assistant-dialog, .assistant-answer, .assistant-header { background: #fff; border-color: #58452f; }
  .assistant-dialog p { color: #332d24; }
  .assistant-topics button, .assistant-tabs, .assistant-topic-picker select { border-color: #725236; }
}

.advisor-launcher {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  max-width: calc(100vw - 32px);
  padding: 10px 18px 10px 10px;
  border: 1px solid #fff;
  border-radius: 24px;
  background: #fffdf8f2;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 #fff, 0 9px 32px #47332526, 0 1px 4px #47332516;
  font: inherit;
  color: #272820;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 140ms ease, box-shadow 140ms ease;
}
.advisor-launcher[hidden] { display: none; }
.advisor-launcher:hover { box-shadow: inset 0 1px 0 #fff, 0 10px 35px #47332540; }
.advisor-launcher:active { background: #f4e8dc; }
.advisor-launcher:focus-visible { outline: 3px solid #9c3e17; outline-offset: 4px; }
.advisor-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 15px; background: #f5e7da; }
.advisor-avatar img { display: block; }
.advisor-label { display: grid; gap: 3px; text-align: left; }
.advisor-label strong { font-size: 15px; font-weight: 650; }
.advisor-label small { font-size: 12px; line-height: 1.35; color: #665f56; }
.advisor-mark { font-size: 20px; color: #a4431b; }
.advisor-launcher[data-obscured="true"]:not(:focus-visible),
body:has(#mobile-menu:not([hidden])) .advisor-launcher,
body:has(#plaith-assistant[open]) .advisor-launcher {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 700px) {
  .advisor-launcher { right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); gap: 9px; min-height: 62px; border-radius: 21px; padding: 9px 12px 9px 9px; }
  .advisor-label strong { font-size: 14px; }
  .advisor-avatar { width: 40px; height: 40px; border-radius: 13px; }
  .advisor-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) { .advisor-launcher { transition: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .advisor-launcher { background: #fff; border-color: #716355; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.journey-film-play { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 9px 12px; border: 1px solid #ffffffed; border-radius: 13px; color: #272c23; background: #fffffff0; box-shadow: 0 5px 24px #262a2522; backdrop-filter: blur(16px); text-decoration: none; font-size: 14px; font-weight: 650; line-height: 1.35; }
.journey-film-play small { display: block; margin-top: 3px; color: #595e52; font-size: 12px; font-weight: 400; }
.journey-film-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border: 1px solid #d9bfa8; border-radius: 50%; background: #fff4e7; color: #8b401a; font-size: 11px; }
.journey-film-play:hover { background: #fff; box-shadow: 0 8px 30px #262a2533; }
.journey-film-play:focus-visible, .creative-dialog button:focus-visible, .creative-direct:focus-visible { outline: 3px solid #97451d; outline-offset: 3px; }
.creative-dialog { width: min(1000px, calc(100vw - 24px)); max-height: calc(100svh - 24px); box-sizing: border-box; padding: 16px; border: 1px solid #fff; border-radius: 24px; color: var(--ink); background: #fcfaf6; box-shadow: 0 30px 100px #18211d50; overflow-y: auto; }
.creative-dialog:not([open]) { display: none; }
.creative-dialog::backdrop { background: #202820a6; backdrop-filter: blur(8px); }
.creative-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.creative-dialog-top h3 { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -.035em; }
.creative-dialog-top button { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid #dddcd5; border-radius: 50%; background: #fff; cursor: pointer; }
.creative-dialog-top .icon { width: 17px; height: 17px; }
.creative-dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; max-height: 66svh; max-width: 100%; object-fit: contain; border-radius: 12px; background: #242720; }
.creative-film-note, .creative-error { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #565d50; }
.creative-error { color: #8f2616; }
.creative-direct { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #86421c; font-size: 12px; }
.creative-direct .icon { width: 13px; height: 13px; }
@media (max-width: 700px) {
  .creative-dialog { padding: 12px; border-radius: 18px; }
  .creative-dialog-top h3 { font-size: 17px; }
  .creative-film-note, .creative-error { font-size: 14px; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .journey-film-play { background: #fff; backdrop-filter: none; border-color: #656b5e; }
  .creative-dialog::backdrop { background: #202820e6; backdrop-filter: none; }
}

.enterprise-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); margin: 28px 0; padding: clamp(28px, 4vw, 52px); border: 1px solid #c7cdbb; border-radius: 30px; background: radial-gradient(ellipse at 0% 0%, #fcf6e6, transparent 65%), #e6ebdc; box-shadow: inset 0 1px #fff, 0 20px 54px -45px #33452b88; }
.enterprise-feature > .enterprise-intro, .enterprise-feature > .enterprise-offer { display: block; min-width: 0; }
.enterprise-feature .enterprise-label { color: #56654b; font-size: .75rem; font-weight: 650; letter-spacing: .09em; }
.enterprise-feature h3 { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: clamp(38px, 4vw, 56px); line-height: 1.05; letter-spacing: -.045em; margin: 20px 0 28px; }
.enterprise-feature h3 > span { color: #6f8258; font-weight: 400; }
.enterprise-feature h4 { font-size: clamp(25px, 2.5vw, 32px); line-height: 1.18; letter-spacing: -.03em; margin-bottom: 16px; max-width: 370px; }
.enterprise-feature p { color: #54604c; font-size: 1rem; line-height: 1.65; margin: 0; }
.enterprise-feature dl { margin: 0; }
.enterprise-feature dl > div { padding: 15px 0; border-bottom: 1px solid #bfc8b4; }
.enterprise-feature dl > div:first-child { padding-top: 0; }
.enterprise-feature dt { font-size: 1.0625rem; font-weight: 600; }
.enterprise-feature dt > span { display: inline-block; width: 30px; color: #6b795d; font-size: .75rem; }
.enterprise-feature dd { margin: 6px 0 0 30px; color: #54604c; font-size: 1rem; line-height: 1.55; }
.enterprise-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 25px; }
.enterprise-feature .enterprise-bottom > strong { color: #293623; font-size: 19px; }
.enterprise-feature .button { min-height: 52px; gap: 12px; font-size: .9375rem; white-space: normal; }
.enterprise-feature .enterprise-note { font-size: .875rem; line-height: 1.55; margin-top: 16px; }
@media (max-width: 760px) {
  .enterprise-feature { grid-template-columns: minmax(0, 1fr); padding: 27px 24px; gap: 27px; border-radius: 23px; }
  .enterprise-feature h3 { margin-bottom: 22px; }
  .enterprise-feature h4 { font-size: 27px; }
  .enterprise-bottom { align-items: stretch; flex-direction: column; }
  .enterprise-feature .button { width: 100%; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .enterprise-feature { background: #f4f7ed; border-color: #667c52; box-shadow: none; }
  .enterprise-feature dl > div { border-color: #667c52; }
}

/* A contained conversation, with no background task or customer submission. */
html.intake-is-open { overflow: hidden; }
.intake-dialog {
  width: min(980px, calc(100% - 48px));
  max-width: none;
  max-height: min(900px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 32px;
  color: var(--ink);
  background: #faf8f3f5;
  box-shadow: inset 0 1px #fff, 0 32px 100px -24px #30271a65;
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  backdrop-filter: blur(30px) saturate(125%);
}
.intake-dialog[open] { display: flex; flex-direction: column; }
.intake-dialog::backdrop { background: #24231e73; backdrop-filter: blur(6px); }
.intake-top { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; padding: 28px 36px 18px; }
.intake-kicker { font-size: 11px; line-height: 1.5; font-weight: 650; letter-spacing: .1em; color: #98512d; }
.intake-top h2 { font-size: clamp(25px, 3vw, 37px); margin-top: 6px; line-height: 1.12; }
.intake-close { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 1px solid #d3cabe; border-radius: 50%; background: #fff9; }
.intake-close:hover { background: white; }
.intake-preview { flex: none; margin: 0 36px; padding: 11px 15px; border-radius: 12px; background: #eee9dd; color: #625a4e; font-size: 13px; line-height: 1.5; }
.intake-progress { flex: none; display: flex; gap: 24px; padding: 18px 36px 14px; border-bottom: 1px solid #766c5724; }
.intake-progress li { display: flex; align-items: center; gap: 8px; color: #746e64; font-size: 13px; line-height: 1.3; }
.intake-progress li > span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #d3cabd; border-radius: 50%; font-size: 10px; }
.intake-progress li[aria-current] { color: var(--ink); font-weight: 650; }
.intake-progress li[aria-current] > span { color: #fff; background: var(--orange); border-color: var(--orange); }
.intake-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.intake-body { overflow-y: auto; min-height: 0; padding: 26px 36px 32px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.intake-step-heading { max-width: 650px; margin-bottom: 24px; }
.intake-step-heading > .intake-kicker { display: none; }
.intake-step-heading h3 { font-size: 27px; line-height: 1.2; letter-spacing: -.03em; }
.intake-step-heading > p:last-child { color: var(--muted); font-size: 15px; line-height: 1.55; margin-top: 8px; }
.intake-fields { display: grid; gap: 20px; }
.intake-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.intake-field { min-width: 0; }
.intake-field label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.45; font-weight: 600; }
.intake-field label > span { font-size: 12px; font-weight: 450; color: #6a645a; margin-left: 4px; }
.intake-field input, .intake-field select, .intake-field textarea {
  width: 100%; min-height: 50px; margin: 0; padding: 12px 14px;
  border: 1px solid #cfc6b9; border-radius: 12px;
  background: #fffc; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5;
  box-shadow: inset 0 1px 1px #554a3505;
}
.intake-field select { padding-right: 30px; }
.intake-field textarea { display: block; min-height: 110px; resize: vertical; }
.intake-field input::placeholder, .intake-field textarea::placeholder { color: #797369; opacity: 1; }
.intake-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.intake-field [aria-invalid=true] { border-color: #a92919; background: #fff8f5; }
.intake-field-error { margin-top: 8px; color: #a42c1e; font-size: 13px; line-height: 1.45; }
.intake-budget-note { display: flex; align-items: flex-start; gap: 12px; padding: 17px 18px; border-radius: 15px; background: #ebeee2; color: #535c45; }
.intake-budget-note > .icon { margin-top: 2px; }
.intake-budget-note p { font-size: 14px; line-height: 1.6; }
.intake-contact-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: start; }
.intake-contact-layout .intake-two { grid-template-columns: 1fr; }
.intake-review { min-width: 0; padding: 20px; border-radius: 20px; background: #ede9dd; }
.intake-review h4 { margin: 0 0 16px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.intake-review-group + .intake-review-group { border-top: 1px solid #c7beac; margin-top: 18px; padding-top: 16px; }
.intake-review-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.intake-review-top strong { font-size: 14px; }
.intake-review-top button { min-height: 44px; padding: 8px; margin-right: -8px; background: none; color: #9b3e19; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.intake-review dl { margin: 6px 0 0; }
.intake-review dl > div + div { margin-top: 12px; }
.intake-review dt { font-size: 11px; line-height: 1.5; color: #706656; }
.intake-review dd { margin: 2px 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.intake-footer { flex: none; display: flex; align-items: center; gap: 20px; padding: 16px 36px 20px; border-top: 1px solid #766c5724; background: #faf8f3ed; }
.intake-footer > p { margin-left: auto; font-size: 13px; color: var(--muted); }
.intake-footer .button { min-height: 48px; padding: 12px 24px; font-size: 14px; }
.intake-complete { max-width: 650px; margin: 10px auto; text-align: center; }
.intake-complete-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border: 1px solid #afb997; border-radius: 50%; background: #e7ebd9; color: #5a693d; }
.intake-complete-mark > .icon { width: 28px; height: 28px; }
.intake-complete h3 { font-size: 33px; margin: 8px 0 18px; }
.intake-complete > p:not(.intake-kicker) { color: var(--muted); font-size: 16px; }
.intake-complete > .intake-complete-note { margin-top: 18px; font-size: 14px; }
.intake-complete-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.intake-complete-actions .button { min-height: 48px; font-size: 14px; }
.intake-dialog :is(button, input, select, textarea) { touch-action: manipulation; }
.intake-dialog button:active { transform: scale(.98); }
.intake-dialog :is(h3):focus { outline: none; }
@media (max-width: 680px) {
  .intake-dialog { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .intake-top { padding: max(18px, env(safe-area-inset-top)) 20px 14px; gap: 16px; }
  .intake-top .intake-kicker { max-width: 240px; font-size: 9px; }
  .intake-top h2 { font-size: 25px; }
  .intake-close { width: 44px; height: 44px; }
  .intake-preview { margin-inline: 20px; padding: 10px 12px; font-size: 12px; }
  .intake-progress { gap: 12px; padding: 15px 20px; }
  .intake-progress li { flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 11px; }
  .intake-body { padding: 24px 20px 28px; }
  .intake-step-heading { margin-bottom: 22px; }
  .intake-step-heading h3 { font-size: 25px; }
  .intake-contact-layout, .intake-two { grid-template-columns: 1fr; gap: 22px; }
  .intake-review { margin-top: 4px; }
  .intake-footer { gap: 10px; padding: 13px 20px max(16px, env(safe-area-inset-bottom)); }
  .intake-footer .button { padding-inline: 18px; font-size: 13px; }
  .intake-footer > p { font-size: 12px; white-space: nowrap; }
  .intake-complete-actions { flex-direction: column; }
  .intake-complete h3 { font-size: 29px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .intake-dialog { background: #faf8f3; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .intake-dialog::backdrop { background: #24231eb3; backdrop-filter: none; }
  .intake-field :is(input, select, textarea) { background: white; border-color: #665c4d; }
}
@media (prefers-reduced-motion: reduce) {
  .intake-dialog *, .intake-dialog *::before, .intake-dialog *::after { scroll-behavior: auto; transition: none; }
  .intake-dialog button:active { transform: none; }
}

/* Strom K: Consent-Karte "Ember on Paper". Wird als {{CONSENT_CSS}} inline eingesetzt.
   Nutzt AUSSCHLIESSLICH Token aus konzept-final §4 (keine eigenen Farbwerte).
   Desktop: Karte unten RECHTS, 320 px (Orchestrator 12.09.: links verdeckte sie die Hero-Headline);
   der FAB (data-plaithy-fab) weicht auf allen Breiten, solange die Karte offen ist.
   Mobile: Sheet ueber der Sticky-Bar (56 px + Safe-Area). Kein Overlay, kein Scroll-Lock. */

.pc {
  position: fixed;
  left: auto;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: 320px;
  max-width: calc(100vw - 40px);
  color: var(--ink-1);
  font-family: inherit;
  outline: none;
  transform: translateY(24px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-reveal) var(--ease-out),
    opacity var(--dur-reveal) var(--ease-out),
    visibility 0s linear var(--dur-reveal);
}
.pc[hidden] { display: none; }
.pc[data-open] {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Karte: Glas-Rezept + grosser Rahmen (--shadow-3, --r-frame) */
.pc__card {
  display: grid;
  gap: 12px;
  padding: 20px;
  max-height: min(80vh, 80svh);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--blur-card);
  backdrop-filter: var(--blur-card);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-frame);
  box-shadow: var(--glass-ring), var(--shadow-3);
}

.pc__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-0);
}
.pc__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.pc__link {
  justify-self: start;
  font-size: 14px;
  font-weight: 500;
  color: var(--ember-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: var(--r-chip);
}
.pc__link:hover { text-decoration-thickness: 2px; }

/* Zwecke */
.pc__purposes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--hair-1);
}
.pc__legend {
  padding: 0;
  margin-bottom: 4px;
  font-family: var(--font-mono, inherit);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pc__purpose {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}
.pc__check {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ember-600);
  cursor: pointer;
}
.pc__check:disabled { cursor: default; opacity: 0.7; }
.pc__label {
  display: grid;
  gap: 2px;
  cursor: pointer;
}
.pc__check:disabled + .pc__label { cursor: default; }
.pc__label-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-1);
}
.pc__label-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.pc__inactive {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.pc__inactive[hidden] { display: none; }

/* Status (aria-live) + Reload-Zeile nach Pixel-Entzug */
.pc__status {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.pc__status:empty { display: none; }
.pc__reload {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pc__reload[hidden] { display: none; }

/* Drei gleichwertige Buttons: gleiche Groesse, gleiche Schrift, kein Dark-Pattern.
   Unterschied nur die Fuellung des Primaers (Konzept §8). */
.pc__actions {
  display: grid;
  gap: 8px;
}
.pc__btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-0);
  background: transparent;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}
.pc__btn:hover {
  background: var(--paper-2);
  border-color: var(--line-ui);
  transform: translateY(-1px);
}
.pc__btn:active { transform: scale(0.98); }
.pc__btn--primary {
  color: var(--on-ember);
  background: var(--ember-500);
  border-color: var(--ember-700);
}
.pc__btn--primary:hover {
  background: var(--ember-400);
  border-color: var(--ember-700);
}
.pc__btn--small {
  min-height: 36px;
  font-size: 13px;
}

/* Fokus: 2 px ember-600, Offset 2 px (Konzept §4 CTA-Rezept) */
.pc__btn:focus-visible,
.pc__check:focus-visible,
.pc__link:focus-visible {
  outline: 2px solid var(--ember-600);
  outline-offset: 2px;
}

/* Mobile: Sheet ueber der Sticky-Bar. FAB (Strom H, Attribut data-plaithy-fab) weicht,
   solange die Karte offen ist, weil beide unten liegen. */
@media (max-width: 767px) {
  .pc {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
  .pc__card {
    padding: 18px;
    max-height: min(75vh, 75svh);
  }
}
body.pc-open [data-plaithy-fab] {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .pc {
    transform: none;
    transition: opacity 0s, visibility 0s;
  }
  .pc__btn { transition: none; }
  .pc__btn:hover,
  .pc__btn:active { transform: none; }
  body.pc-open [data-plaithy-fab] { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .pc__card {
    background: var(--paper-0);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .pc__card { border-color: var(--line-ui); }
  .pc__btn { border-color: var(--line-ui); }
}

/* Production-only consent, visitor-advisor and intake additions to the approved Rev8 UI. */
.intake-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.intake-privacy label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
.intake-privacy input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: #a4431b; }
.intake-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.intake-submit-status { margin: 16px 0; padding: 14px; border: 1px solid #c98b64; border-radius: 12px; }
.intake-form[aria-busy="true"] { cursor: progress; }
.production-advisor-dialog { width: min(500px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 24px; border: 1px solid #e4d8ca; border-radius: 24px; background: #fffdf8; color: #272820; box-shadow: 0 20px 80px #33200f35; }
.production-advisor-dialog::backdrop { background: #25201866; backdrop-filter: blur(5px); }
.production-advisor-dialog h2 { font-size: 24px; line-height: 1.2; margin: 0 0 14px; }
.production-advisor-dialog p { font-size: 15px; line-height: 1.6; }
.production-advisor-dialog a { text-decoration: underline; }
.production-advisor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.production-advisor-dialog button { min-height: 44px; }
.production-advisor-status { font-size: 14px; line-height: 1.45; }
.advisor-launcher[data-agent-open="true"], body.pc-open .advisor-launcher { visibility: hidden; pointer-events: none; }
.pc { --ink-0: #272820; --ink-1: #36372f; --ink-2: #55554d; --ink-3: #656259; --ember-text: #a4431b; --ember-400: #ff9454; --ember-500: #ec7c38; --ember-600: #a4431b; --ember-700: #9c3e17; --on-ember: #352014; --hair-1: #e5ddd2; --hair-2: #b7a99a; --line-ui: #a39382; --paper-0: #fffdf8; --paper-2: #f6eee5; --r-frame: 24px; --r-chip: 6px; --r-pill: 999px; --dur-reveal: 300ms; --dur-hover: 140ms; --ease-out: ease-out; --glass-card: #fffdf8f5; --blur-card: blur(24px); --glass-edge: #ffffff; --glass-ring: 0 0 0 1px #47332512; --shadow-3: 0 16px 50px #47332526; }
@media (max-width: 600px) { .production-advisor-dialog { padding: 20px; } .production-advisor-actions { display: grid; } .pc { bottom: max(14px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-transparency: reduce) { .production-advisor-dialog::backdrop { backdrop-filter: none; } }