@font-face { font-family:Manrope; src:url('/static/marketing/manrope.ttf') format('truetype'); font-weight:200 800; font-display:swap }
:root { --ground:#f5f5f7; --surface:#fff; --ink:#202024; --muted:#63636e; --accent:#5850ce; --accent-deep:#4841b6; --soft:#eeecff; --dark:#19191e; --dark-ink:#f5f5f7; --dark-muted:#c6c4d0; --radius:24px; --font:Manrope,ui-sans-serif,system-ui,sans-serif; --display:clamp(3rem,6.1vw,5.75rem); --heading:clamp(2rem,3.5vw,3.25rem); --statement:1.5rem; --body:1.0625rem; --small:.875rem; --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1) }
* { box-sizing:border-box }
html { color-scheme:light; scrollbar-color:#b9b6ca var(--ground); scroll-padding-top:24px }
body { margin:0; font-family:var(--font); font-size:var(--body); line-height:1.6; color:var(--ink); background:var(--ground); -webkit-font-smoothing:antialiased }
::selection { background:var(--accent); color:var(--surface) }
a { color:inherit; text-underline-offset:.25em }
button,input,select { font:inherit }
button,a,input,summary { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
button:disabled { opacity:.55; cursor:not-allowed }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px }
input { caret-color:var(--accent); min-width:0 }
img { display:block; max-width:100%; height:auto }
figure { margin:0 }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { text-wrap:balance; line-height:1.12 }
h1 { font-size:var(--display); font-weight:650; letter-spacing:-.04em }
h2 { font-size:var(--heading); font-weight:650; letter-spacing:-.035em }
h3 { font-size:var(--statement); font-weight:650; letter-spacing:-.02em }
p { text-wrap:pretty; max-width:68ch }
p+p { margin-top:20px }
.wrap { width:min(100%,1440px); margin-inline:auto; padding-inline:40px }
.section-space { margin-top:150px }
.icon { display:block; width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7 }
.vx-symbol { width:30px; height:30px; flex:none; color:var(--accent) }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip-link { position:fixed; top:10px; left:10px; z-index:20; padding:12px 18px; background:var(--ink); color:var(--surface); transform:translateY(-180%) }
.skip-link:focus { transform:none }
.marketing-header { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:96px }
.wordmark { display:inline-flex; align-items:center; gap:11px; font-size:var(--statement); letter-spacing:-.035em; font-weight:750; text-decoration:none }
.wordmark-xs { font-weight:500 }
.desktop-links { display:flex; gap:30px; align-items:center }
.desktop-links a,.header-login { font-size:var(--small); text-decoration:none; font-weight:600 }
.header-login { display:inline-flex; gap:10px; align-items:center }
.marketing-menu { display:none }
.button { display:inline-flex; justify-content:center; align-items:center; gap:18px; border:0; border-radius:999px; padding:16px 24px; min-height:56px; font-size:var(--body); font-weight:650; text-decoration:none; line-height:1.3 }
.button--primary { background:var(--accent); color:var(--surface) }
.button--ink { background:var(--ink); color:var(--surface) }
.button--light { background:var(--surface); color:var(--ink) }
.button,.landing-vector-controls button,.join-code-entry button { transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out) }
.button:active,.landing-vector-controls button:active,.join-code-entry button:active { transform:scale(.97) }
.inline-link { font-weight:650; text-decoration:underline; text-decoration-thickness:1px }
.small-note { font-size:var(--small); line-height:1.7; color:var(--muted) }
.landing-hero { display:grid; grid-template-columns:1fr 1.12fr; gap:26px; align-items:center; min-height:695px; padding-block:30px }
.hero-copy { position:relative; z-index:1; padding-block:30px }
.hero-copy>p:not(.small-note) { margin-top:30px; max-width:42ch }
.hero-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:36px }
.hero-copy .small-note { margin-top:20px; max-width:38ch }
.hero-stage { min-width:0; position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center }
.hero-stage::before { content:''; position:absolute; inset:11% -40px 16% 2%; background:var(--soft); clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 14%); z-index:0 }
.landing-core { position:relative; width:100%; height:585px }
.landing-core-canvas { position:absolute; inset:0; touch-action:pan-y; border-radius:var(--radius) }
.landing-core-canvas canvas { width:100%; height:100%; display:block }
.landing-vector-fallback { display:grid; place-items:center; position:absolute; inset:0 }
.landing-vector-fallback .vx-symbol { width:45%; height:auto }
[data-renderer=canvas-3d] .landing-vector-fallback { display:none }
.landing-leaders { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; fill:none; stroke:var(--accent); stroke-width:1 }
.landing-leaders circle { fill:var(--accent); stroke:none }
.landing-core:not([data-core-state=expanded]) .landing-leaders { display:none }
.landing-layer-labels p { position:absolute; z-index:2; background:var(--surface); border-radius:16px; padding:12px 15px; max-width:190px; font-size:var(--small); line-height:1.5 }
.landing-layer-labels strong,.landing-layer-labels span { display:block }
.landing-layer-labels span { color:var(--muted); margin-top:5px }
.landing-layer-labels [data-layer-label="0"] { left:0; top:13% }
.landing-layer-labels [data-layer-label="1"] { right:-10px; top:26% }
.landing-layer-labels [data-layer-label="2"] { left:4%; bottom:16% }
.landing-vector-controls { position:absolute; display:flex; justify-content:center; align-items:center; gap:9px; left:0; right:0; bottom:0; z-index:3 }
.landing-vector-controls button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; padding:12px; min-height:44px; background:var(--surface); color:var(--ink); font-size:var(--small) }
.landing-vector-controls [data-core-rotate="-1"] svg { transform:rotate(180deg) }
.vector-help { text-align:center; font-size:var(--small); color:var(--muted); margin:17px auto 0; position:relative }
.hero-assistant-link { position:absolute; bottom:110px; right:10%; display:flex; gap:13px; align-items:center; padding:14px 20px; background:var(--surface); border-radius:999px; font-size:var(--small); text-decoration:none; z-index:3; max-width:90%; transition:transform 160ms var(--ease-out) }
.hero-assistant-link .vx-symbol { width:21px; height:21px }
.hero-assistant-link .icon { width:17px; height:17px; color:var(--accent) }
.landing-core[data-core-state=expanded]+.hero-assistant-link { visibility:hidden }
.tool-bridge { display:flex; gap:36px; align-items:center; justify-content:space-between; padding-block:34px }
.tool-bridge>p { font-size:var(--body); font-weight:650; line-height:1.4 }
.tool-bridge>div { display:flex; align-items:center; gap:33px; flex-wrap:wrap }
.service-logo { width:28px; height:28px; object-fit:contain }
.tool-bridge>a { font-size:var(--small) }
.product-section { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:90px }
.product-image { background:var(--soft); padding:24px 0 24px 24px; border-radius:var(--radius); overflow:hidden }
.product-image img { width:100%; height:auto }
.product-copy>p { margin-top:26px }
.product-copy>.inline-link { display:inline-block; margin-top:26px }
.section-intro { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:75px; margin-bottom:48px }
.section-intro>p,.section-intro>div { padding-top:6px }
.workflow-strip { display:flex; min-height:520px; padding-block:0 }
.flow-panel { background:var(--ink); color:var(--surface); padding:28px 24px; flex:1; min-width:0; position:relative }
.flow-panel:first-child { border-radius:var(--radius) 0 0 var(--radius) }
.flow-panel:last-child { border-radius:0 var(--radius) var(--radius) 0 }
.flow-panel:nth-child(2) { background:#35313f }
.flow-panel:nth-child(3) { background:#e1dfec; color:var(--ink) }
.flow-panel:nth-child(4) { background:var(--soft); color:var(--ink) }
.flow-panel summary { cursor:pointer; list-style:none; font-size:var(--statement); font-weight:650; line-height:1.2 }
.flow-panel summary::-webkit-details-marker { display:none }
.flow-panel:not([open]) summary { writing-mode:vertical-rl; transform:rotate(180deg); margin-top:12px; min-height:260px }
.flow-panel[open] { flex:6 }
.flow-content>p { margin:23px 0 28px; font-size:var(--body); max-width:48ch }
.flow-content figure { border-radius:16px; overflow:hidden; background:var(--surface) }
.flow-content img { width:100%; height:auto }
.scope-section>h2 { max-width:19ch }
.scope-switches { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px }
.scope-switches button,.billing-cycle button { border:0; border-radius:999px; padding:12px 18px; color:var(--ink); background:transparent; font-size:var(--small); font-weight:650; min-height:44px }
.scope-switches button[aria-pressed=true],.billing-cycle button[aria-pressed=true] { background:var(--ink); color:var(--surface) }
.scope-body { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; margin:44px 0 24px }
.scope-body figure { background:var(--soft); padding:30px; border-radius:var(--radius) }
.scope-copy .statement { font-size:var(--statement); line-height:1.4; font-weight:650; letter-spacing:-.02em }
.scope-copy p+p { margin-top:28px }
.followup-section { background:var(--dark); color:var(--dark-ink); padding-block:100px }
.followup-inner { display:grid; grid-template-columns:1fr 1.2fr; gap:65px; align-items:center }
.followup-inner p { margin-top:28px; max-width:43ch }
.followup-inner .small-note { color:var(--dark-muted) }
.followup-inner figure { background:#302d41; border-radius:var(--radius); padding:35px }
.pricing-section>.section-intro { margin-bottom:35px }
.plan-controls { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:36px 0 16px; flex-wrap:wrap }
.billing-cycle { display:flex; padding:5px; gap:4px; border-radius:999px; background:#e8e7ee }
.seat-control { display:flex; align-items:center; gap:12px; font-size:var(--small) }
.seat-control input { width:82px; border:0; border-radius:12px; padding:12px; color:var(--ink); background:var(--surface); font-variant-numeric:tabular-nums }
.plan-fields { display:grid; grid-template-columns:1fr 1fr; margin:30px 0 26px; border-radius:var(--radius); overflow:hidden }
.plan-field { padding:40px; background:#e8e7ee; display:flex; flex-direction:column; align-items:flex-start }
.plan-field--scale { background:var(--accent); color:var(--surface) }
.plan-field>p:first-of-type { margin-top:16px; min-height:54px }
.plan-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:13px; font-size:var(--display); line-height:1.15; font-weight:650; letter-spacing:-.04em; margin-top:28px; font-variant-numeric:tabular-nums }
.price-unit { font-size:var(--small); font-weight:500; letter-spacing:0 }
.price-period { font-size:var(--small); margin-top:7px }
.plan-estimate { font-weight:650; margin-top:22px; font-variant-numeric:tabular-nums; min-height:55px }
.plan-field ul { list-style:none; padding:0; margin:28px 0 20px; font-size:var(--body) }
.plan-field li { margin:0 0 14px; padding-left:18px; position:relative }
.plan-field li::before { content:''; position:absolute; left:0; top:.6em; width:6px; height:8px; background:currentColor; clip-path:polygon(0 0,45% 0,65% 60%,85% 0,100% 0,66% 100%) }
.plan-allowance { font-size:var(--small); line-height:1.7; margin-bottom:28px }
.plan-field>.button { margin-top:auto }
.plan-field>.small-note { margin-top:16px }
.plan-field--scale .small-note { color:var(--surface) }
html[data-billing-cycle=monthly] [data-annual-price],html[data-billing-cycle=annual] [data-monthly-price] { display:none }
.faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px }
.faq-list { display:flex; flex-direction:column; gap:12px }
.faq-list details { padding:24px; border-radius:16px; background:var(--surface) }
.faq-list summary { cursor:pointer; font-size:var(--body); font-weight:650; list-style:none; padding-right:24px; position:relative }
.faq-list summary::after { content:'+'; position:absolute; right:0; font-size:var(--statement); line-height:1 }
.faq-list details[open] summary::after { content:'−' }
.faq-list details>p { margin-top:20px }
.team-cta { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center; margin-bottom:140px }
.team-cta h2 { margin-bottom:26px }
.team-cta .button { margin-top:30px }
.join-code-entry { background:var(--soft); padding:36px; border-radius:var(--radius) }
.join-code-entry p { margin:18px 0 24px }
.join-code-entry label { display:block; font-size:var(--small); font-weight:650; margin-bottom:10px }
.join-code-entry form>div { display:flex; gap:8px; padding:6px; border-radius:999px; background:var(--surface) }
.join-code-entry input { width:100%; min-width:0; padding:10px 13px; border:0; background:transparent; font-size:var(--small); color:var(--ink) }
.join-code-entry button { display:grid; place-items:center; border:0; border-radius:50%; width:46px; height:46px; flex:none; background:var(--ink); color:var(--surface) }
.marketing-footer { padding-block:75px 45px; background:var(--dark); color:var(--dark-ink) }
.footer-wordmark { font-size:var(--display); font-weight:650; letter-spacing:-.04em; line-height:1; text-decoration:none; display:flex; align-items:center; gap:20px }
.footer-wordmark>.vx-symbol { width:.8em; height:.8em; color:inherit }
.footer-bottom { margin-top:64px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:45px; align-items:start }
.footer-bottom nav { display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; font-size:var(--small) }
.footer-bottom a { text-decoration:none }
.footer-bottom .small-note { color:var(--dark-muted) }
.pricing-page,.trust-page { padding-top:70px }
.standalone-intro { max-width:900px; margin-bottom:65px }
.standalone-intro>p { margin-top:28px; max-width:58ch }
.pricing-details>p { margin-top:28px; max-width:72ch }
.comparison-scroll { margin-top:40px; overflow-x:auto; scrollbar-color:#b9b6ca transparent }
table { width:100%; border-collapse:collapse; font-size:var(--body) }
caption { text-align:left; font-size:var(--small); margin-bottom:18px; color:var(--muted) }
th,td { text-align:left; padding:20px 20px 20px 0; border-bottom:1px solid #d5d3de; min-width:160px }
th { font-weight:650 }
.trust-story { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center }
.trust-story p { margin-top:26px }
.trust-story a { display:inline-block; margin-top:26px }
.trust-story figure { background:var(--soft); padding:30px; border-radius:var(--radius) }
.trust-limits { margin-top:100px; padding:60px; border-radius:var(--radius); background:var(--surface) }
.trust-limits p { margin:28px 0 }
[hidden] { display:none!important }
@media(hover:hover) and (pointer:fine) {
  a:not(.button):hover { text-decoration:underline; text-decoration-thickness:1px }
  .button--primary:hover { background:var(--accent-deep) }
  .button--ink:hover { background:#37373e }
  .button--light:hover,.landing-vector-controls button:hover { background:#e1dff3 }
  .hero-assistant-link:hover { transform:translateY(-3px) }
  .flow-panel:not([open]):hover summary { text-decoration:underline; text-underline-offset:.2em }
}
@media(max-width:1000px) {
  .wrap { padding-inline:28px }
  .desktop-links { gap:20px }
  .landing-hero { gap:0; min-height:640px }
  .hero-stage::before { right:-28px }
  .landing-core { height:535px }
  .product-section,.scope-body,.followup-inner { gap:40px }
  .flow-panel { padding:24px 18px }
  .flow-panel[open] { flex:8 }
  .flow-panel summary { font-size:var(--body) }
  .plan-field { padding:30px }
  .faq-section,.team-cta { gap:40px }
}
@media(max-width:760px) {
  :root { --display:2.625rem; --heading:2rem; --body:1rem; --statement:1.5rem }
  .wrap { padding-inline:22px }
  .section-space { margin-top:90px }
  .marketing-header { min-height:78px; gap:18px }
  .wordmark { font-size:1.25rem; gap:8px }
  .wordmark .vx-symbol { width:25px; height:25px }
  .desktop-links { display:none }
  .header-login { margin-left:auto; font-size:var(--small) }
  .header-login .icon { display:none }
  .marketing-menu { display:block; position:relative }
  .marketing-menu summary { display:grid; place-items:center; min-height:44px; min-width:44px; cursor:pointer; list-style:none }
  .marketing-menu summary::-webkit-details-marker { display:none }
  .marketing-menu nav { position:absolute; top:50px; right:0; width:220px; padding:16px; z-index:10; display:flex; flex-direction:column; background:var(--surface); border-radius:16px }
  .marketing-menu[open] nav { box-shadow:0 12px 36px rgba(25,25,35,.15) } /* taste-skill-ignore: an open navigation menu is a real overlay, not a card at rest. */
  .marketing-menu nav>a { padding:12px; min-height:44px; text-decoration:none }
  .landing-hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding-top:25px }
  .hero-copy { padding:8px 0 0 }
  .hero-copy>p:not(.small-note) { margin-top:22px; max-width:42ch }
  .hero-actions { gap:19px; margin-top:26px }
  .hero-actions .inline-link { font-size:var(--small) }
  .button { padding:15px 22px; min-height:52px; gap:14px }
  .hero-copy .small-note { margin-top:16px }
  .hero-stage { margin-top:20px }
  .hero-stage::before { inset:9% -22px 18% 0 }
  .landing-core { height:350px }
  .hero-assistant-link { bottom:110px; right:0; padding:11px 15px; gap:10px; font-size:.8125rem }
  .landing-vector-controls { gap:7px }
  .landing-vector-controls button { padding:11px; font-size:var(--small) }
  .landing-layer-labels p { max-width:132px; font-size:.8125rem; padding:10px }
  .landing-layer-labels [data-layer-label="0"] { left:-4px; top:1% }
  .landing-layer-labels [data-layer-label="1"] { right:-5px; top:19% }
  .landing-layer-labels [data-layer-label="2"] { left:0; bottom:15% }
  .vector-help { margin-top:12px; font-size:.8125rem }
  .tool-bridge { flex-wrap:wrap; gap:28px; padding-top:30px; padding-bottom:0 }
  .tool-bridge>p br { display:none }
  .tool-bridge>div { width:100%; justify-content:space-between; gap:16px }
  .tool-bridge>.inline-link { display:none }
  .product-section { display:flex; flex-direction:column-reverse; gap:32px; align-items:stretch }
  .product-image { padding:15px 0 15px 15px; border-radius:20px }
  .product-copy>p { margin-top:23px }
  .section-intro { grid-template-columns:1fr; gap:23px; margin-bottom:32px }
  .workflow-strip { display:block; min-height:0 }
  .flow-panel,.flow-panel:first-child,.flow-panel:last-child { border-radius:0; padding:24px; width:100% }
  .flow-panel:first-child { border-radius:20px 20px 0 0 }
  .flow-panel:last-child { border-radius:0 0 20px 20px }
  .flow-panel summary { font-size:var(--body); min-height:28px }
  .flow-panel:not([open]) summary { writing-mode:horizontal-tb; transform:none; margin:0; min-height:28px }
  .flow-content>p { margin-top:20px }
  .scope-body,.followup-inner,.faq-section,.team-cta,.trust-story { grid-template-columns:1fr; gap:34px }
  .scope-body { margin-top:28px }
  .scope-body figure,.followup-inner figure,.trust-story figure { padding:18px; border-radius:20px }
  .followup-section { padding-block:60px }
  .plan-controls { align-items:flex-start; gap:22px; margin-top:28px }
  .seat-control { flex-wrap:wrap }
  .plan-fields { grid-template-columns:1fr; border-radius:20px }
  .plan-field { padding:30px 24px }
  .plan-price { margin-top:24px }
  .plan-field>p:first-of-type { min-height:0 }
  .plan-estimate { min-height:0 }
  .faq-list details { padding:22px }
  .team-cta { margin-bottom:90px }
  .join-code-entry { padding:25px; border-radius:20px }
  .join-code-entry input { font-size:1rem }
  .marketing-footer { padding-block:55px 35px }
  .footer-bottom { grid-template-columns:1fr; gap:30px; margin-top:42px }
  .footer-bottom nav { max-width:360px }
  .footer-wordmark { gap:12px }
  .pricing-page,.trust-page { padding-top:40px }
  .standalone-intro { margin-bottom:42px }
  .trust-limits { margin-top:60px; padding:26px }
  th,td { min-width:120px; font-size:var(--small); padding:16px 14px 16px 0 }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important } }