.lp-page { --lp-soft: color-mix(in srgb, var(--intro-ink) 5%, var(--intro-bg)); --lp-paper-muted: color-mix(in srgb, var(--intro-action-ink) 70%, var(--intro-ink)); --lp-warm: color-mix(in srgb, var(--intro-accent) 12%, var(--intro-bg)); }
.lp-page h2:where(:not(.lp-workspace *)) { font-size: clamp(2rem,3.2vw,2.75rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 500; }
.lp-page h3:where(:not(.lp-workspace *)) { font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.lp-page p:where(:not(.lp-workspace *)) { line-height: 1.7; }
.lp-page figure { margin: 0; min-width: 0; }
.lp-muted, .lp-note { color: var(--intro-muted); }
.lp-note { font-size: .8rem; margin-top: 1.2rem; }
.lp-text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--intro-accent); text-decoration: none; font-size: .9rem; }
.lp-text-link:hover { text-decoration: underline; }
.lp-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding: 3.5rem 0 3rem; }
.lp-product-title { color: var(--intro-accent); font-size: 1.75rem; font-weight: 500; letter-spacing: -.03em; margin: 0 0 1.3rem; }
.lp-product-title span { display: block; color: var(--intro-muted); font-size: .8rem; letter-spacing: 0; font-weight: 400; }
.lp-hero h1 { font-size: clamp(2.75rem,4.5vw,3.8rem); line-height: 1.05; letter-spacing: -.045em; margin: 0 0 1.5rem; }
.lp-hero h1 span { color: var(--intro-accent); }
.lp-lead { font-size: 1.4rem; line-height: 1.5 !important; margin-bottom: 1rem; }
.lp-hero-copy > .lp-muted { max-width: 30rem; font-size: 1rem; }
.lp-hero .resource-actions { gap: 1rem; font-size: .875rem; }
.lp-hero-stage { position: relative; padding: 1.5rem 1rem 7.2rem .3rem; background: radial-gradient(ellipse at 65% 50%, var(--lp-warm), transparent 68%); }
.lp-hero-window { border: 1px solid var(--intro-rule); border-radius: 1rem; overflow: hidden; transform: rotate(-2deg); background: var(--intro-bg); box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--intro-bg) 65%, transparent); }
.lp-browser { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; color: var(--intro-muted); font-size: .65rem; }
.lp-browser-dots { display: flex; gap: .25rem; }
.lp-browser-dots i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--intro-muted); }
.lp-site { background: var(--intro-ink); color: var(--intro-action-ink); overflow: hidden; }
.lp-site-brand { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 500; font-size: 1.15rem; padding: 1rem 1.2rem; }
.lp-site-brand > span { font-size: .55rem; font-weight: 400; color: var(--lp-paper-muted); }
.lp-site-offer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .8rem; padding: .4rem 1.2rem 1.2rem; }
.lp-site-offer small { font-size: .6rem; color: var(--lp-paper-muted); }
.lp-site-offer h3 { font-size: clamp(1.65rem,2.8vw,2.4rem); line-height: 1.05 !important; letter-spacing: -.055em !important; margin: .6rem 0; }
.lp-site-offer p { font-size: .75rem; color: var(--lp-paper-muted); line-height: 1.5 !important; }
.lp-site-offer img { width: 100%; height: 13.5rem; object-fit: cover; object-position: 60% center; border-radius: .5rem; }
.lp-site-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--intro-action-ink); color: var(--intro-ink); padding: .6rem .75rem; font-size: .7rem; border-radius: .3rem; }
.lp-site-form { padding: .8rem 1.2rem 1.2rem; border-top: 1px solid color-mix(in srgb, var(--intro-action-ink) 12%, transparent); }
.lp-site-form > span { display: block; font-size: .75rem; margin-bottom: .6rem; }
.lp-site-form > div { display: flex; align-items: center; gap: .5rem; }
.lp-site-form > div span { flex: 1; border: 1px solid color-mix(in srgb, var(--intro-action-ink) 20%, transparent); font-size: .6rem; padding: .6rem; border-radius: .3rem; color: var(--lp-paper-muted); }
.lp-site-form > div > svg { flex-shrink: 0; }
.lp-arrival { position: absolute; bottom: 5.5rem; right: 0; display: flex; align-items: center; gap: .75rem; width: min(21rem,90%); padding: 1rem; background: var(--intro-bg); border: 1px solid color-mix(in srgb, var(--intro-accent) 50%, var(--intro-rule)); border-radius: .85rem; box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--intro-bg) 55%, transparent); }
.lp-arrival-check { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lp-warm); color: var(--intro-accent); }
.lp-arrival strong, .lp-arrival small, .lp-arrival div > span { display: block; }
.lp-arrival small { color: var(--intro-accent); font-size: .65rem; margin-bottom: .3rem; }
.lp-arrival strong { font-size: 1rem; font-weight: 500; }
.lp-arrival div > span { color: var(--intro-muted); font-size: .65rem; margin-top: .3rem; }
.lp-hero-guide { position: absolute; bottom: 0; left: .75rem; display: flex; align-items: center; gap: 1rem; }
.lp-hero-guide img { width: 4rem; height: 4rem; object-fit: contain; }
.lp-hero-guide strong { font-size: .9rem; font-weight: 500; }
.lp-hero-guide p { color: var(--intro-muted); font-size: .8rem; margin: .25rem 0 0; }
.lp-story-footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .4rem 1.2rem; color: var(--intro-muted); font-size: .65rem; }
.lp-story-footer button { display: none; align-items: center; min-height: 2.75rem; padding: .35rem .5rem; border: 0; color: var(--intro-muted); font: inherit; background: transparent; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; }
[data-page-story][data-motion] .lp-story-footer button { display: inline-flex; }
.lp-story-footer button:focus-visible { outline: 2px solid var(--intro-focus); outline-offset: 2px; }
.lp-chapters { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--intro-rule); padding: 1.3rem 0; gap: 2rem; }
.lp-chapters a { display: flex; align-items: center; gap: 1rem; padding: .5rem 0; text-decoration: none; }
.lp-chapters a > span { color: var(--intro-accent); font-size: .8rem; }
.lp-chapters strong, .lp-chapters small { display: block; }
.lp-chapters strong { font-weight: 500; font-size: 1rem; }
.lp-chapters small { color: var(--intro-muted); font-size: .8rem; margin-top: .25rem; }
.lp-chapters a > svg { margin-left: auto; color: var(--intro-muted); flex-shrink: 0; }
.lp-chapters a:hover strong { color: var(--intro-accent); }
.lp-section { padding: 5.5rem 0; border-bottom: 1px solid var(--intro-rule); scroll-margin-top: 2rem; }
.lp-section-copy { max-width: 42rem; }
.lp-section-copy h2 { margin: 1rem 0 1.5rem; }
.lp-section-copy h2 span { color: var(--intro-muted); }
.lp-section-copy > p:not(.resource-eyebrow) { color: var(--intro-muted); font-size: 1.05rem; }
.lp-build-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }
.lp-feature-line { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: 1.5rem 0 2rem; }
.lp-feature-line span { display: flex; align-items: center; gap: .35rem; font-size: .75rem; }
.lp-feature-line svg { color: var(--intro-accent); }
.lp-demo { border: 1px solid var(--intro-rule); border-radius: 1.25rem; overflow: hidden; background: linear-gradient(145deg, var(--lp-warm), var(--lp-soft) 48%, var(--intro-bg)); }
.lp-demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--intro-rule); font-size: .7rem; }
.lp-demo-bar > span:first-child { letter-spacing: .15em; font-size: .9rem; }
.lp-demo-bar > span:last-child { color: var(--intro-muted); }
.lp-brand-o { color: var(--intro-accent); }
.lp-build-scene { display: grid; grid-template-columns: .75fr 1.5fr; gap: 1rem; padding: 1.2rem; }
.lp-signature { display: flex; gap: .55rem; align-items: center; }
.lp-signature svg { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }
.lp-signature strong, .lp-signature small { display: block; line-height: 1.5; }
.lp-signature strong { font-size: .85rem; font-weight: 500; }
.lp-signature small { font-size: .65rem; color: var(--intro-muted); }
.lp-tavyo-rail { min-width: 0; }
.lp-tavyo-rail p { font-size: .8rem; }
.lp-brief-prompt { border: 1px solid var(--intro-rule); border-radius: .6rem .6rem 0 .6rem; padding: .75rem; margin: 1.25rem 0; background: var(--intro-bg); }
.lp-tavyo-rail > div > small { color: var(--intro-accent); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; }
.lp-tavyo-rail > div > p { color: var(--intro-muted); }
.lp-rail-checks { display: grid; gap: .7rem; margin-top: 1.5rem; }
.lp-rail-checks span { display: flex; gap: .3rem; font-size: .65rem; }
.lp-rail-checks svg { color: var(--intro-accent); flex-shrink: 0; }
.lp-page-canvas { min-width: 0; }
.lp-canvas-label { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem 0 .85rem; font-size: .65rem; color: var(--intro-muted); }
.lp-canvas-label span { display: inline-flex; align-items: center; gap: .3rem; }
.lp-page-canvas .lp-site { border-radius: .65rem; }
.lp-page-canvas .lp-site-brand { padding: 1rem; }
.lp-page-canvas .lp-site-brand > span { display: none; }
.lp-page-canvas .lp-site-offer { padding: 0 1rem 1rem; gap: .5rem; }
.lp-page-canvas .lp-site-offer h3 { font-size: 1.5rem; }
.lp-page-canvas .lp-site-offer small { font-size: .5rem; }
.lp-page-canvas .lp-site-offer p { font-size: .65rem; }
.lp-page-canvas .lp-site-offer img { height: 11rem; }
.lp-page-canvas .lp-site-cta { font-size: .6rem; gap: .4rem; padding: .55rem .5rem; }
.lp-page-canvas .lp-site-form { padding: .75rem 1rem 1rem; }
.lp-draft-ready { display: flex; align-items: center; gap: .5rem; font-size: .65rem; padding-top: .85rem; color: var(--intro-accent); }
.lp-connect-section > .lp-section-copy { margin-bottom: 2.5rem; }
.lp-handoff-track { display: grid; grid-template-columns: repeat(4,1fr); padding: 1.2rem 2rem; margin: 0; list-style: none; border-bottom: 1px solid var(--intro-rule); }
.lp-handoff-track li { display: flex; align-items: center; gap: .5rem; color: var(--intro-accent); font-size: .85rem; position: relative; }
.lp-handoff-track li:not(:last-child)::after { content: ''; height: 1px; flex: 1; margin-inline: .5rem 1rem; background: var(--intro-rule); }
.lp-lead-scene { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; padding: 2rem; }
.lp-contact-card, .lp-conversation-card { border: 1px solid var(--intro-rule); background: var(--intro-bg); border-radius: .9rem; padding: 1.5rem; min-width: 0; }
.lp-person { display: flex; align-items: center; gap: .75rem; }
.lp-person img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.lp-person strong, .lp-person small { display: block; }
.lp-person strong { font-size: 1rem; font-weight: 500; }
.lp-person small { color: var(--intro-muted); font-size: .7rem; margin-top: .3rem; }
.lp-contact-card blockquote { font-size: 1.15rem; line-height: 1.5; margin: 1.5rem 0; }
.lp-contact-card dl { display: grid; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--intro-rule); }
.lp-contact-card dt { color: var(--intro-muted); font-size: .65rem; }
.lp-contact-card dd { margin: .3rem 0 0; font-size: .85rem; }
.lp-contact-tavyo { display: flex; gap: .65rem; align-items: center; padding-top: .7rem; }
.lp-contact-tavyo svg { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.lp-contact-tavyo p { color: var(--intro-muted); font-size: .75rem; margin: 0; }
.lp-page .pilot-companion { width: 3rem; height: 3.2rem; display: inline-block; position: relative; flex: none; }
.lp-page .pilot-companion [data-art-kind] { display: none; }
.lp-page .pilot-companion[data-look="fox"] [data-art-kind="fox"] { display: block; }
.lp-pilot-heading { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--intro-rule); padding-bottom: 1rem; }
.lp-pilot-heading strong, .lp-pilot-heading small { display: block; }
.lp-pilot-heading strong { font-weight: 500; font-size: .95rem; }
.lp-pilot-heading small { color: var(--intro-muted); font-size: .65rem; margin-top: .3rem; }
.lp-channel-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--intro-accent); margin-left: auto; }
.lp-message { border: 1px solid var(--intro-rule); border-radius: .75rem .75rem .75rem 0; padding: .8rem 1rem; margin: 1rem 2rem 0 0; background: var(--lp-soft); }
.lp-message small { font-size: .65rem; color: var(--intro-muted); }
.lp-message p { font-size: .9rem; margin: .2rem 0; }
.lp-message-out { margin: 1rem 0 0 2rem; border-radius: .75rem .75rem 0 .75rem; border-color: color-mix(in srgb, var(--intro-accent) 30%, transparent); background: var(--lp-warm); }
.lp-message-out > svg { display: block; margin-left: auto; color: var(--intro-accent); }
.lp-next-action { display: flex; align-items: center; gap: .75rem; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--intro-rule); }
.lp-next-action > svg { color: var(--intro-accent); flex-shrink: 0; }
.lp-next-action strong, .lp-next-action small { display: block; }
.lp-next-action strong { font-size: .85rem; font-weight: 500; }
.lp-next-action small { font-size: .65rem; color: var(--intro-muted); margin-top: .4rem; }
.lp-scene-guide { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 0 2rem 1.2rem; }
.lp-scene-guide p { font-size: .85rem; color: var(--intro-muted); margin: 0; }
.lp-scene-guide strong { color: var(--intro-ink); font-weight: 400; }
.lp-connection-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 2rem; }
.lp-connection-notes > div > svg { color: var(--intro-accent); }
.lp-connection-notes h3 { font-size: 1.15rem; margin: .8rem 0 .5rem; }
.lp-connection-notes p { color: var(--intro-muted); font-size: .9rem; margin-bottom: .5rem; }
.lp-connection-notes a { display: inline-flex; gap: .5rem; align-items: center; min-height: 2.75rem; color: var(--intro-accent); font-size: .8rem; text-decoration: none; }
.lp-connection-notes a:hover { text-decoration: underline; }
.lp-improve-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.lp-improve-scene { padding: 1.5rem; }
.lp-measure { display: flex; align-items: center; justify-content: space-around; gap: 1rem; padding: .5rem 0 1.5rem; }
.lp-measure span { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.lp-measure svg { color: var(--intro-accent); }
.lp-measure strong { font-size: 1.1rem; font-weight: 500; }
.lp-measure small { font-size: .7rem; color: var(--intro-muted); }
.lp-review-suggestion { border-block: 1px solid var(--intro-rule); padding-block: 1.2rem; }
.lp-review-suggestion p { font-size: .9rem; margin: .7rem 0 0; }
.lp-copy-change { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; margin-top: 1.5rem; align-items: start; }
.lp-copy-change small { display: block; color: var(--intro-muted); font-size: .65rem; margin-bottom: .5rem; }
.lp-copy-change span, .lp-copy-change strong { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .85rem; background: var(--intro-bg); border: 1px solid var(--intro-rule); border-radius: .5rem; font-size: .8rem; font-weight: 400; }
.lp-copy-change strong { background: var(--intro-accent); color: var(--intro-action-ink); }
.lp-copy-change svg { flex-shrink: 0; }
.lp-test-note { display: flex; align-items: center; gap: .5rem; color: var(--intro-muted); font-size: .7rem; margin: 1.2rem 0 0; }
.lp-test-note svg { color: var(--intro-accent); flex-shrink: 0; }
.lp-try > .lp-section-copy { margin-bottom: 2rem; }
.lp-workspace { --intro-frame-radius: var(--r-card); --intro-header-height: var(--resource-space-8); --intro-orange: var(--intro-accent); border: 1px solid var(--intro-rule); border-radius: 1.1rem; overflow: clip; min-height: 22rem; scroll-margin-top: 2rem; }
.lp-workspace > .lp-signature, .lp-workspace > h3, .lp-workspace > p, .lp-workspace > a, .lp-workspace > button { margin: 1.5rem 2rem; }
.lp-workspace > p { color: var(--intro-muted); }
.lp-workspace:focus { outline: none; }
.lp-faq { display: grid; grid-template-columns: .65fr 1fr; gap: 4rem; }
.lp-faq details { border-bottom: 1px solid var(--intro-rule); }
.lp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3rem; padding-block: 1.3rem; cursor: pointer; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary svg { flex-shrink: 0; }
.lp-faq details[open] summary svg { transform: rotate(180deg); }
.lp-faq details p { color: var(--intro-muted); font-size: .95rem; }
.lp-closing { text-align: center; padding: 4rem 0 1rem; }
.lp-closing > img { width: 5rem; height: 5rem; object-fit: contain; margin-bottom: 1rem; }
.lp-closing h2 { margin: .5rem 0 1.8rem; }
/* Motion uses only short transform/opacity transitions. The controller runs once on view. */
@media (prefers-reduced-motion: no-preference) {
  [data-page-story][data-motion] [data-story-stage] { transition: opacity .6s ease, translate .6s ease; }
  [data-page-story][data-motion] [data-story-stage]:not([data-revealed]) { opacity: 0; translate: 0 .7rem; }
  [data-page-story][data-motion] [data-story-stage][data-revealed] { opacity: 1; translate: 0 0; }
  .lp-handoff-track [data-story-stage]::after { transform-origin: left; transition: transform .7s ease; }
  [data-page-story][data-motion] .lp-handoff-track [data-story-stage]:not([data-revealed])::after { transform: scaleX(0); }
}
@media (max-width: 65rem) {
  .lp-hero { gap: 2rem; }
  .lp-build-section { grid-template-columns: 1fr; gap: 2rem; }
  .lp-build-section .lp-section-copy { max-width: 40rem; }
  .lp-build-scene { grid-template-columns: .7fr 1.5fr; gap: 1.5rem; }
  .lp-page-canvas .lp-site-offer h3 { font-size: 2rem; }
  .lp-tavyo-rail p { font-size: .95rem; }
  .lp-improve-section { gap: 2rem; }
  .lp-chapters { gap: 1rem; }
  .lp-chapters small { font-size: .7rem; }
  .lp-lead-scene { gap: 1rem; padding: 1.5rem; }
}
@media (max-width: 48rem) {
  .lp-hero { grid-template-columns: 1fr; padding: 2.5rem 0 2rem; gap: 1.5rem; }
  .lp-hero-copy { max-width: 36rem; }
  .lp-hero h1 { font-size: clamp(2.75rem,7vw,3.6rem); }
  .lp-hero-story { width: 100%; max-width: 36rem; margin-inline: auto !important; }
  .lp-chapters { grid-template-columns: 1fr; gap: .2rem; padding: .8rem 0; }
  .lp-chapters a { padding: .65rem .25rem; }
  .lp-chapters small { font-size: .8rem; }
  .lp-section { padding: 3.5rem 0; }
  .lp-section-copy > p:not(.resource-eyebrow) { font-size: 1rem; }
  .lp-improve-section, .lp-faq { grid-template-columns: 1fr; gap: 2rem; }
  .lp-improve-section > .lp-section-copy { grid-row: 1; }
  .lp-lead-scene { grid-template-columns: 1fr; }
  .lp-contact-card dl { grid-template-columns: repeat(3,1fr); gap: .5rem; }
  .lp-contact-card dd { font-size: .75rem; }
  .lp-connection-notes { grid-template-columns: 1fr; gap: 1.2rem; }
  .lp-connection-notes > div { border-bottom: 1px solid var(--intro-rule); padding-bottom: 1rem; }
  .lp-connection-notes > div:last-child { border: 0; }
  .lp-connection-notes h3 { margin-top: .4rem; }
  .lp-handoff-track { padding: 1rem; gap: .4rem; }
  .lp-handoff-track li { flex-direction: column; font-size: .7rem; gap: .35rem; }
  .lp-handoff-track li::after { display: none; }
}
@media (max-width: 32rem) {
  .lp-hero-stage { padding-right: .5rem; padding-bottom: 8.5rem; }
  .lp-arrival { bottom: 5.2rem; width: 94%; }
  .lp-arrival strong { font-size: .9rem; }
  .lp-hero-guide { gap: .6rem; }
  .lp-hero-guide img { width: 3rem; height: 3rem; }
  .lp-hero-guide strong { font-size: .8rem; }
  .lp-hero-guide p { font-size: .7rem; }
  .lp-site-brand > span { display: none; }
  .lp-site-offer img { height: 12rem; }
  .lp-site-offer p { font-size: .7rem; }
  .lp-site-cta { padding: .5rem; gap: .4rem; font-size: .65rem; }
  .lp-build-scene { grid-template-columns: 1fr; padding: 1rem; gap: 1.3rem; }
  .lp-tavyo-rail { display: grid; grid-template-columns: 1fr; }
  .lp-brief-prompt { margin: .7rem 0; }
  .lp-rail-checks { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
  .lp-tavyo-rail > div > p { margin-bottom: .6rem; }
  .lp-page-canvas .lp-site-offer h3 { font-size: 1.8rem; }
  .lp-contact-card, .lp-conversation-card { padding: 1rem; }
  .lp-lead-scene { padding: 1rem; }
  .lp-contact-card blockquote { font-size: 1rem; }
  .lp-contact-card dl { grid-template-columns: 1fr; gap: .6rem; }
  .lp-contact-card dl > div { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; }
  .lp-scene-guide { align-items: flex-start; flex-direction: column; gap: .7rem; padding: 0 1rem 1rem; }
  .lp-scene-guide p { font-size: .8rem; }
  .lp-copy-change { grid-template-columns: 1fr; }
  .lp-measure small { font-size: .65rem; }
  .lp-improve-scene { padding: 1.2rem; }
}