/* Paso static landing page */
:root {
  /* Color tokens */
  --color-ink: #111111;
  --color-ink-rgb: 17 17 17;
  --color-paper: #ffffff;
  --color-white-rgb: 255 255 255;
  --color-surface: #f3f3f0;
  --color-neon: #cfff00;
  --color-neon-rgb: 207 255 0;
  --color-dark: #202823;
  --color-dark-soft: #343834;
  --color-text: #626862;
  --color-text-light: #b9bcb9;
  --color-border: #e2e2e2;
  --color-border-strong: #aaaaaa;
  --color-code-text: #d8ddd9;
  --color-success: #55a800;
  --color-swatch-warm: #9a7c6e;
  --color-swatch-light: #c8c1af;
  --color-swatch-pale: #e4e0d7;
  --color-transparent: transparent;

  /* Spacing tokens */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-24: 24px;
  --space-36: 36px;
  --space-48: 48px;
  --space-60: 60px;
  --space-72: 72px;
  --space-84: 84px;
  --space-96: 96px;
  --space-108: 108px;
  --space-120: 120px;
  --space-144: 144px;
  --space-480: 480px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x:clip; }
body { margin: var(--space-0); background: var(--color-paper); color: var(--color-ink); font-family: "Inter", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { width: min(1240px, calc(100% - var(--space-48))); margin-inline: auto; }

.nav { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(var(--color-ink-rgb) / 18%); }
.brand { display: inline-flex; align-items: center; gap: var(--space-12); font-size: 24px; font-weight: 800; letter-spacing: -.07em; }
.brand-mark { width: 25px; height: 25px; display:grid; place-items:center; font-size:25px; transform:rotate(-18deg); }
.nav nav { display:flex; gap: var(--space-36); font-size: 13px; font-weight: 600; }
.nav nav a { transition: opacity .2s; }.nav nav a:hover { opacity:.55; }
.button { display: inline-flex; align-items: center; gap: var(--space-24); border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); padding: var(--space-12) var(--space-24); font-size: 14px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(calc(var(--space-2) * -1)); background: var(--color-dark-soft); }
.button i { font-size: 17px; }.button-small { padding: var(--space-12); gap: var(--space-24); font-size: 12px; }
.menu { display:none; background:none; border:0; }

.hero { padding: var(--space-108) var(--space-0) var(--space-60); text-align:center; overflow: hidden; }
.eyebrow, .section-label { font-family:"DM Mono", monospace; font-size: 12px; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow { display:flex; justify-content:center; align-items:center; }
h1 { margin: var(--space-24) var(--space-0); font-size: clamp(62px, 8.2vw, 120px); line-height:.88; font-weight:700; letter-spacing:-.075em; }
h1 em, h2 em { font-family:"Inter", sans-serif; font-weight:700; font-style:normal; }
.hero-copy { max-width: 760px; margin:var(--space-0) auto; font-size:18px; line-height:1.6; color:var(--color-text); }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:var(--space-36); margin:var(--space-36) var(--space-0) var(--space-72); }
.hero-actions .button { background:var(--color-neon); color:var(--color-ink); border-color:var(--color-neon); box-shadow:0 0 0 var(--space-1) rgb(var(--color-ink-rgb) / 8%), 0 var(--space-12) var(--space-36) rgb(var(--color-neon-rgb) / 20%); }
.hero-actions .button:hover { background:var(--color-neon); box-shadow:0 0 0 var(--space-1) rgb(var(--color-ink-rgb) / 10%), 0 var(--space-12) var(--space-48) rgb(var(--color-neon-rgb) / 35%); }
.text-link { font-size:13px; font-weight:600; display:flex; align-items:center; gap:var(--space-12); }
.play { width:30px; height:30px; display:grid; place-items:center; border:1px solid rgb(var(--color-ink-rgb) / 18%); border-radius:50%; font-size:8px; font-style:normal; }

.demo-wrap { min-height:700px; position:relative; }
.orbit { position:absolute; border:1px solid rgb(var(--color-ink-rgb) / 8%); border-radius:50%; left:50%; top:48%; transform:translate(-50%,-50%); }
.orbit-one { width:920px; height:480px; }.orbit-two { width:1120px; height:590px; }
.store-card { width:min(1000px, 88%); height:610px; position:absolute; left:50%; top:var(--space-24); transform:translateX(-50%); background:var(--color-surface); box-shadow:0 var(--space-36) var(--space-84) rgb(var(--color-ink-rgb) / 15%); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; text-align:left; }
.store-top { height:58px; border-bottom:1px solid var(--color-border); display:flex; align-items:center; gap:var(--space-24); padding:var(--space-0) var(--space-36); font-size:9px; color:var(--color-text); }
.store-logo { font-family:"Inter"; font-weight:700; font-size:20px; letter-spacing:-.06em; color:var(--color-dark); margin-right:auto; }.store-tools { margin-left:auto; display:flex; gap:var(--space-12); font-size:15px; }
.product-layout { display:grid; grid-template-columns:58% 42%; height:calc(100% - var(--space-60)); }
.product-photo { background:linear-gradient(150deg, rgb(var(--color-ink-rgb) / 8%), var(--color-transparent) 45%), url("https://images.unsplash.com/photo-1434389677669-e08b4cac3105?auto=format&fit=crop&w=1000&q=85") center/cover; position:relative; }
.photo-label { position:absolute; left:var(--space-24); bottom:var(--space-24); background:rgb(var(--color-white-rgb) / 78%); backdrop-filter:blur(10px); padding:var(--space-8) var(--space-12); font-size:9px; }
.product-info { padding:var(--space-60) var(--space-36); }.overline { font:8px "DM Mono"; letter-spacing:.12em; }.product-info h2 { font-family:"Inter"; font-size:36px; letter-spacing:-.05em; margin:var(--space-12) var(--space-0) var(--space-8); font-weight:650; }.price { font-size:12px; }
.swatches { display:flex; gap:var(--space-8); margin:var(--space-24) var(--space-0); }.swatches i { width:17px; height:17px; border-radius:50%; background:var(--color-swatch-light); box-shadow:0 0 0 var(--space-1) var(--color-border-strong); border:3px solid var(--color-surface); }.swatches i:nth-child(2){background:var(--color-dark-soft)}.swatches i:nth-child(3){background:var(--color-swatch-warm)}.swatches i:nth-child(4){background:var(--color-swatch-pale)}
.add { width:100%; border:0; background:var(--color-dark); color:var(--color-paper); padding:var(--space-12); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.detail-lines { margin-top:var(--space-24); }.detail-lines span { display:block; height:1px; background:var(--color-border); margin-top:var(--space-24); }
.assistant { position:absolute; width:390px; height:490px; right:var(--space-24); top:var(--space-84); background:rgb(var(--color-ink-rgb) / 88%); backdrop-filter:blur(18px) saturate(.8); -webkit-backdrop-filter:blur(18px) saturate(.8); border:1px solid rgb(var(--color-white-rgb) / 28%); border-radius:20px; box-shadow:0 var(--space-24) var(--space-72) rgb(var(--color-ink-rgb) / 35%); display:flex; flex-direction:column; text-align:left; overflow:hidden; color:var(--color-paper); }
.assistant.is-expanded { width:min(560px, calc(100% - var(--space-48))); height:540px; }
.assistant.is-collapsed { height:66px; }
.assistant.is-collapsed .chat, .assistant.is-collapsed .ask-form { display:none; }
.assistant-head { padding:var(--space-12); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgb(var(--color-white-rgb) / 14%); }
.assistant-head > div { display:flex; align-items:center; gap:var(--space-12); }.assistant-head button { width:30px; height:30px; display:grid; place-items:center; border:1px solid rgb(var(--color-white-rgb) / 18%); border-radius:50%; background:rgb(var(--color-white-rgb) / 8%); font-size:14px; color:var(--color-paper); }
.assistant-tools { display:flex; gap:var(--space-8)!important; }
.spark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--color-neon); color:var(--color-ink); box-shadow:0 0 var(--space-24) rgb(var(--color-neon-rgb) / 20%); }
.assistant-head strong,.assistant-head small { display:block; }.assistant-head strong { font-size:12px; }.assistant-head small { font-size:8px; color:rgb(var(--color-white-rgb) / 55%); margin-top:var(--space-2); }
.chat { flex:1; padding:var(--space-24); background:var(--color-transparent); overflow:auto; font-size:11px; line-height:1.6; }
.bot,.user { max-width:86%; padding:var(--space-12); border-radius:4px 14px 14px 14px; margin:var(--space-0) var(--space-0) var(--space-12); background:rgb(var(--color-white-rgb) / 12%); box-shadow:none; }
.user { margin-left:auto; background:var(--color-surface); color:var(--color-ink); border-radius:14px 4px 14px 14px; }
.typing { color:var(--color-text); }
.quick { display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-12); align-items:flex-start; }
.quick button { border:1px solid rgb(var(--color-white-rgb) / 25%); border-radius:20px; padding:var(--space-8) var(--space-12); background:rgb(var(--color-white-rgb) / 8%); color:var(--color-paper); font-size:9px; cursor:pointer; }.quick button:hover { color:var(--color-ink); border-color:var(--color-neon); background:var(--color-neon); }
.ask-form { display:flex; gap:var(--space-8); margin:var(--space-0) var(--space-12) var(--space-12); padding:var(--space-8) var(--space-12); border:1px solid rgb(var(--color-white-rgb) / 25%); border-radius:30px; background:rgb(var(--color-white-rgb) / 8%); }.ask-form input { min-width:0; flex:1; border:0; outline:0; color:var(--color-paper); background:var(--color-transparent); font-size:10px; }.ask-form input::placeholder { color:rgb(var(--color-white-rgb) / 48%); }.ask-form button { width:32px; height:32px; border-radius:50%; border:0; background:var(--color-neon); color:var(--color-ink); }
.embed-badge { position:absolute; left:var(--space-24); bottom:var(--space-24); display:flex; align-items:center; gap:var(--space-8); padding:var(--space-8) var(--space-12); border-radius:20px; background:var(--color-paper); border:1px solid var(--color-border); box-shadow:0 var(--space-8) var(--space-24) rgb(var(--color-ink-rgb) / 12%); font-size:9px; font-weight:600; }
.embed-badge i { color:var(--color-success); font-size:13px; }
.result-pill { position:absolute; background:var(--color-neon); padding:var(--space-12); border-radius:4px; display:flex; align-items:center; gap:var(--space-12); text-align:left; font-size:9px; box-shadow:0 var(--space-12) var(--space-36) rgb(var(--color-neon-rgb) / 20%), 0 0 var(--space-24) rgb(var(--color-neon-rgb) / 20%); }
.result-pill b { font-size:18px; font-weight:400; }.result-pill span,.result-pill strong { display:block; }.result-pill strong { font-size:10px; margin-bottom:var(--space-2); }.pill-left { left:var(--space-0); top:var(--space-480); }.pill-right { right:var(--space-0); top:var(--space-36); background:var(--color-neon); }

.outcomes { padding:var(--space-120) var(--space-0) var(--space-144); }
.section-label { border-bottom:1px solid rgb(var(--color-ink-rgb) / 18%); padding-bottom:var(--space-24); }
.outcome-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-72); margin-top:var(--space-60); }
.outcome-grid article { opacity:0; transform:translateY(var(--space-24)); transition:.6s ease; }.outcome-grid article.visible { opacity:1; transform:none; }
.outcome-grid span { font:10px "DM Mono"; color:var(--color-text); }.outcome-grid h3 { font-family:"Inter"; font-size:36px; letter-spacing:-.05em; line-height:1.02; font-weight:650; margin:var(--space-24) var(--space-0) var(--space-12); max-width:315px; }.outcome-grid p { font-size:15px; line-height:1.65; color:var(--color-text); max-width:330px; }

section:not(.hero) { transition:opacity .6s, transform .6s; } section:not(.hero):not(.visible) { opacity:0; transform:translateY(var(--space-24)); }
.conversation { background:var(--color-ink); color:var(--color-paper); padding:var(--space-144) var(--space-0); overflow:hidden; }
.conversation-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--space-96); align-items:center; }
.eyebrow.light { justify-content:flex-start; color:var(--color-text-light); }
.conversation h2,.shopify h2,.cta h2 { font-size:clamp(52px,6vw,86px); letter-spacing:-.072em; line-height:.91; font-weight:700; margin:var(--space-24) var(--space-0); }
.conversation-copy > p:not(.eyebrow) { color:var(--color-text-light); max-width:450px; font-size:16px; line-height:1.65; }
.cream-link { display:inline-flex; gap:var(--space-48); border-bottom:1px solid var(--color-text); padding-bottom:var(--space-12); margin-top:var(--space-24); font-size:12px; }
.search-demo { padding:var(--space-24); border:1px solid rgb(var(--color-white-rgb) / 15%); background:var(--color-dark); transform:rotate(1.5deg); box-shadow:var(--space-36) var(--space-36) var(--space-84) rgb(var(--color-ink-rgb) / 25%); }
.search-query { background:var(--color-surface); color:var(--color-ink); padding:var(--space-12); display:flex; align-items:center; gap:var(--space-12); }.search-query p { flex:1; font-size:11px; }.search-query i { width:28px;height:28px;background:var(--color-ink);color:var(--color-paper);border-radius:50%;display:grid;place-items:center;font-style:normal; }
.thinking { font:9px "DM Mono"; padding:var(--space-24) var(--space-4); color:var(--color-text-light); }.thinking i { color:var(--color-neon); margin-right:var(--space-8); animation:spin 1.4s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.matches { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }.matches article { background:var(--color-surface); color:var(--color-ink); padding:var(--space-8); }.match-photo { height:210px; background-size:cover; background-position:center; filter:saturate(.65); }.match-photo.one { background-image:url("https://images.unsplash.com/photo-1544022613-e87ca75a784a?auto=format&fit=crop&w=600&q=80"); }.match-photo.two { background-image:url("https://images.unsplash.com/photo-1539533018447-63fcce2678e3?auto=format&fit=crop&w=600&q=80"); }.match-photo.three { background-image:url("https://images.unsplash.com/photo-1544966503-7cc5ac882d5f?auto=format&fit=crop&w=600&q=80"); }
.matches small { display:block; font:7px "DM Mono"; color:var(--color-text); margin:var(--space-12) var(--space-0) var(--space-4); }.matches h4 { font:600 18px "Inter"; letter-spacing:-.04em; margin:var(--space-0); }.matches p { font-size:9px; }

.shopify { padding:var(--space-144) var(--space-0); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-72); position:relative; }
.shopify-copy .section-label { border:0; }.shopify h2 { font-size:clamp(52px,5.5vw,78px); }
.install-card { background:var(--color-dark); color:var(--color-paper); margin-top:var(--space-36); padding:var(--space-24); box-shadow:var(--space-24) var(--space-24) 0 var(--color-surface); }
.code-top { display:flex; gap:var(--space-4); border-bottom:1px solid var(--color-border); padding-bottom:var(--space-12); }.code-top span { width:7px;height:7px;border-radius:50%;background:var(--color-text); }.code-top small { margin-left:auto;font:8px "DM Mono";color:var(--color-text-light); }
.install-card code { display:block; font:12px/2 "DM Mono"; color:var(--color-code-text); padding:var(--space-24) var(--space-8); }.install-card code b { color:var(--color-neon);font-weight:400; }
.install-ok { background:var(--color-neon); color:var(--color-ink); display:flex; align-items:center; gap:var(--space-12); padding:var(--space-12); box-shadow:0 0 var(--space-36) rgb(var(--color-neon-rgb) / 20%); }.install-ok span { width:25px;height:25px;border-radius:50%;border:1px solid var(--color-ink);display:grid;place-items:center; }.install-ok p { font-size:9px;line-height:1.4;margin:var(--space-0); }.install-ok strong { font-size:10px; }
.shopify-note { grid-column:2; font-size:16px; line-height:1.65; color:var(--color-text); max-width:500px; }

.cta { min-height:540px; background:var(--color-neon); color:var(--color-ink); padding:var(--space-84) var(--space-96); display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; box-shadow:0 0 var(--space-72) rgb(var(--color-neon-rgb) / 28%); }
.cta h2 { font-size:clamp(66px,7.6vw,108px); margin:var(--space-36) var(--space-0); }.button-light { background:var(--color-ink); color:var(--color-paper); border-color:var(--color-ink); }.button-light:hover { background:var(--color-dark-soft); }
.cta > div:first-child { position:relative; z-index:1; min-width:0; }
.cta-spark { flex:0 0 auto; font-size:280px; line-height:1; color:var(--color-ink); opacity:.14; transform:rotate(18deg); pointer-events:none; }
footer { min-height:140px; display:flex; align-items:center; justify-content:space-between; font-size:10px; color:var(--color-text); }
footer p { font-family:"Inter";font-weight:600;font-size:16px;color:var(--color-ink); } footer div { display:flex;gap:var(--space-24); }

@media (max-width: 900px) {
  .nav nav { display:none; position:absolute; top:var(--space-84); left:var(--space-24); right:var(--space-24); padding:var(--space-24); background:var(--color-paper); z-index:20; flex-direction:column; box-shadow:0 var(--space-12) var(--space-36) rgb(var(--color-ink-rgb) / 10%); }.nav nav.open{display:flex}.nav>.button{display:none}.menu{display:block}.menu span{display:block;width:22px;height:1px;background:var(--color-ink);margin:var(--space-4)}
  .hero { padding-top:var(--space-72) }.hero-actions { margin-bottom:var(--space-48) }.demo-wrap { min-height:660px }.store-card { width:95%; }.assistant { right:var(--space-24); width:360px }.pill-left{left:var(--space-0)}.pill-right{right:var(--space-0)}
  .outcome-grid { gap:var(--space-24) }.conversation-grid{grid-template-columns:1fr;gap:var(--space-72)}.shopify{grid-template-columns:1fr}.shopify-note{grid-column:1}.cta{padding:var(--space-60) var(--space-48)}.cta-spark{font-size:160px}
}

@media (max-width: 640px) {
  .shell{width:min(100% - var(--space-24),1240px)}.nav{height:72px}h1{font-size:52px}.hero-copy{font-size:14px}.hero-actions{flex-direction:column;gap:var(--space-24)}
  .demo-wrap{min-height:620px}.store-card{width:100%;height:570px}.store-top span:not(.store-logo):not(.store-tools){display:none}.product-layout{grid-template-columns:1fr}.product-info{display:none}.assistant{width:calc(100% - var(--space-24));right:var(--space-12);top:var(--space-96);height:450px}.embed-badge{display:none}.result-pill{display:none}
  .outcomes{padding:var(--space-84) var(--space-0)}.outcome-grid{grid-template-columns:1fr;gap:var(--space-48)}.outcome-grid h3{font-size:30px;margin-top:var(--space-24)}
  .conversation{padding:var(--space-84) var(--space-0)}.conversation h2,.shopify h2{font-size:48px}.matches article:nth-child(3){display:none}.matches{grid-template-columns:1fr 1fr}.match-photo{height:160px}
  .shopify{padding:var(--space-96) var(--space-0);gap:var(--space-24)}.install-card{margin-top:var(--space-0)}.cta{width:auto;min-height:500px;padding:var(--space-60) var(--space-24)}.cta h2{font-size:clamp(44px,13.5vw,57px)}.cta-spark{position:absolute;right:calc(var(--space-12) * -1);max-width:45%;overflow:hidden;opacity:.12}
  footer{padding:var(--space-48) var(--space-0);flex-direction:column;gap:var(--space-24);align-items:flex-start}
}