/* Workspace One v5: restrained, editorial, light-only public product site */
:root { color-scheme:light }
html { scroll-padding-top:90px }
body,body[data-theme="dark"] {--bg:#fff;--surface:#fff;--text:#15191f;--muted:#596575;--border:#e5e8ec;--soft:#f5f7f9;--ink:#151a22;--panel:#fff;--accent:#235cce;background:#fff}
body { letter-spacing:-.006em }
.site-nav {background:rgba(255,255,255,.97);box-shadow:none;border-bottom:1px solid #e8eaee}
.nav-wrap {max-width:1260px;min-height:76px}
.logo {font-weight:780;letter-spacing:-.85px;font-size:21px}
.logo-mark {background:#121a27;color:white;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.site-nav nav {gap:25px;align-items:center;font-size:12px;color:#616c79}
.site-nav .nav-policy {border-left:1px solid #dfe4ea;padding-left:19px;font-weight:540}
.site-nav nav a {transition:color .2s}
.nav-actions .btn.dark {background:#161d29}
.btn {border-radius:10px;transition:transform .27s cubic-bezier(.2,.7,.2,1),box-shadow .27s,background .2s}
.btn:hover {transform:translateY(-2px);box-shadow:0 10px 23px rgba(17,28,45,.11)}
.btn:focus-visible,a:focus-visible,button:focus-visible,.art-circle:focus-visible {outline:3px solid #8aaff0;outline-offset:3px}
.hero {max-width:1260px;padding:100px 28px 0}
.hero .tag {display:inline-block;letter-spacing:1.45px;font-size:10px;font-weight:750;color:#4c6180;background:#f5f7fa;border-color:#e7ebf1;padding:9px 14px}
.hero h1 {font-size:clamp(58px,8.2vw,105px);font-weight:760;letter-spacing:-.077em;line-height:.99;margin:28px auto 23px;max-width:1000px}
.hero h1 em {color:#1c65d8}
.hero p {max-width:640px;font-size:17px;line-height:1.75;color:#5a6472}
.hero-cta {gap:10px}.hero .btn.large {min-width:178px;font-size:13px}
.hero-legal {margin:21px 0 3px;gap:16px;font-size:12px}
.hero-legal a {color:#4f5c6c;text-underline-offset:4px}
.hero-legal a:hover {color:#165bc5}
.trust-line {margin-top:14px;color:#5b6979;font-size:11px}
/* Product device previews: no hovering tooltip or popup; the devices themselves move. */
.orbit-art {height:460px;max-width:1060px;margin:51px auto 5px;gap:0;perspective:1100px}
.art-line {border-top:1px dashed #d2d9e4;opacity:.7}
.art-circle,.art-center {overflow:visible;will-change:auto;background:radial-gradient(circle at 45% 35%,#fff 0,#f7f9fc 70%,#f3f6fa 100%);box-shadow:0 26px 55px rgba(19,31,54,.04);border:1px solid #e6ecf3;transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .6s,background .6s}
.art-circle:before {border:1px solid #e9edf3;inset:14px}
.art-circle .circle-accent {opacity:0;pointer-events:none;transition:opacity .6s ease}
.art-circle:hover .circle-accent,.art-circle:focus-visible .circle-accent {opacity:.38}
.art-left {transform:translate(22px,29px)}.art-right {transform:translate(-22px,29px)}
.art-center {background:radial-gradient(circle at 50% 30%,#fff,#f3f7fc 76%,#eaf0f8 100%);border-color:#d7e3f3}
.art-circle:hover,.art-circle:focus-visible {transform:translateY(-9px) rotate(-.5deg);box-shadow:0 35px 80px rgba(27,51,94,.11)}
.art-left:hover,.art-left:focus-visible {transform:translate(22px,12px) rotate(-1.3deg)}
.art-right:hover,.art-right:focus-visible {transform:translate(-22px,12px) rotate(1.3deg)}
.art-center:hover,.art-center:focus-visible {transform:translateY(-14px) scale(1.022)}
.laptop {width:78%;transition:transform .66s cubic-bezier(.16,1,.3,1);transform:perspective(750px) rotateX(3deg) translateY(0);filter:drop-shadow(0 12px 13px rgba(20,35,58,.10))}
.art-circle:hover .laptop,.art-circle:focus-visible .laptop {transform:perspective(750px) rotateX(0deg) translateY(-6px) scale(1.037)}
.laptop-screen {background:#101827;border:6px solid #1e2733;border-bottom:9px solid #1e2733;border-radius:12px 12px 5px 5px;overflow:hidden;box-shadow:0 7px 30px rgba(18,31,49,.2)}
.art-center .laptop-screen {height:177px}
.laptop-base {background:linear-gradient(180deg,#e9edf2 0,#aab3bd 45%,#637181 100%);height:10px}
.device-top {height:25px;gap:0;padding:0 8px 0 9px;background:#182335;display:flex;align-items:center}
.device-top > i {display:none}
.device-top b {color:#dce7f4;font-size:6.6px;font-weight:800;letter-spacing:1.12px;margin-left:11px}
.mac-controls {display:inline-flex;gap:4.5px;align-items:center}
.mac-controls i {width:8px;height:8px;border-radius:100%;background:#fb645c;display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14)}
.mac-controls i:nth-child(2){background:#ffce51}.mac-controls i:nth-child(3){background:#60c457}
.circle-name {font-size:11px;letter-spacing:-.1px;color:#566579;font-weight:650;bottom:26px}
.art-center .circle-name {bottom:38px}
.art-circle:hover .mock-chart span,.art-circle:focus-visible .mock-chart span {animation:bar-rise .7s both cubic-bezier(.2,.8,.2,1)}
.art-circle:hover .mock-chart span:nth-child(2){animation-delay:.04s}.art-circle:hover .mock-chart span:nth-child(3){animation-delay:.08s}.art-circle:hover .mock-chart span:nth-child(4){animation-delay:.12s}.art-circle:hover .mock-chart span:nth-child(5){animation-delay:.16s}
.art-circle:hover .mock-bubble.two,.art-circle:focus-visible .mock-bubble.two {animation:note-enter .55s ease both}
@keyframes bar-rise {from {transform:scaleY(.42);transform-origin:bottom;opacity:.65}to {transform:scaleY(1);transform-origin:bottom;opacity:1}}
@keyframes note-enter {from {transform:translateX(-7px);opacity:.5}to {transform:translateX(0);opacity:1}}
.divider-title {margin:10px auto 55px;padding:0 25px}
.divider-title p {font-size:19px;max-width:600px;margin:12px auto 0;font-weight:550}
.section {max-width:1210px;padding:82px 30px}
.section h2 {font-size:clamp(38px,4.35vw,59px);font-weight:740}
.section h2 i {color:#2362d4}
.section-heading {align-items:end;margin-bottom:30px}
.section-heading>p {line-height:1.6;font-size:14px}
/* A balanced 3x2 grid with actual product previews in each card */
.product-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;align-items:stretch}
.product-card,.product-feature {grid-column:auto!important;display:flex!important;flex-direction:column;min-height:360px;padding:25px 25px 22px;border-radius:14px;border:1px solid #e5e9ee;background:#fff;gap:0;box-shadow:0 2px 0 rgba(14,27,47,.012);transition:border-color .25s,box-shadow .3s,transform .35s cubic-bezier(.18,.8,.3,1)}
.product-card:hover,.product-card:focus-within {border-color:#b9cbe9;box-shadow:0 14px 35px rgba(18,35,62,.08);transform:translateY(-3px)}
.product-icon {width:38px;height:38px;background:#f0f5fd;border:1px solid #e5edf8;border-radius:11px;margin:0 0 21px;color:#3268c4}
.product-icon svg {width:21px;height:21px}
.product-card h3 {font-size:18px;letter-spacing:-.5px;margin:0 0 9px;line-height:1.3}
.product-card p {font-size:13px;line-height:1.62;margin:0 0 23px;color:#66717f}
.product-card > .product-visual,.product-card > .sparkbars,.product-card > .prompt-pill,.product-card > .website-mini,.product-card > .post-mini {margin-top:auto;width:100%;flex-shrink:0}
.product-visual {background:#f6f8fb;border:1px solid #e5eaf1;padding:12px}
.lead-preview-search {display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e0e7ee;border-radius:7px;color:#657285;font-size:10px;padding:9px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-lens {font-size:18px;color:#587ba9}
.lead-preview-row {display:flex;gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid #e1e7ef;min-width:0}
.lead-preview-row:last-child {border-bottom:0;padding-bottom:1px}
.preview-avatar {height:23px;width:23px;border-radius:7px;background:#e5edf9;color:#3162a7;font-size:10px;display:grid;place-items:center;flex-shrink:0;font-weight:780}
.lead-preview-row>span:nth-child(2){min-width:0;flex:1}
.lead-preview-row b {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;color:#28394e}
.lead-preview-row small {display:block;font-size:8px;color:#76869b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-preview-row>i {color:#4274be;background:#e5eefb;border-radius:5px;padding:4px 5px;font-style:normal;font-size:8px}
.sparkbars {height:84px;border-bottom:1px solid #d9e3ef;align-items:flex-end;padding:0 12px;gap:8px;background:linear-gradient(to top,#f4f7fb 0,#fff 100%);border-radius:10px 10px 0 0}
.sparkbars span {background:#3a75db;border-radius:3px 3px 0 0}
.prompt-pill {background:#f5f7fa!important;color:#566a81!important;border:1px solid #e3e9f1!important;border-radius:9px!important;padding:14px 12px!important;font-size:12px}
.website-mini,.post-mini {background:#f6f8fb!important;border:1px solid #e4e9f1!important;border-radius:9px}
.steps,.home-teaser,.price-section,.faq-section {scroll-margin-top:80px}
.step-grid article {border-radius:14px;padding:28px;min-height:206px}
.step-grid article>span {font-weight:760}
.step-grid h3 {margin:26px 0 8px}
.teaser-dashboard {border-radius:15px;box-shadow:0 15px 50px rgba(12,22,38,.1)}
.price-card {border-radius:14px}.price-card.popular{border-color:#235cce}
.faqs details {border-bottom:1px solid #e4e8ee;background:#fff!important;padding:21px 0;overflow:hidden;contain:layout}
.faqs summary {font-size:15px;outline-offset:4px}
.faqs details summary:after {border:1px solid #e4e9f2;width:29px;height:29px;background:#f8fafc;content:'+';font-size:18px;border-radius:8px;transform:rotate(0);transition:transform .42s cubic-bezier(.2,.8,.2,1),background .25s}
.faqs details[open] summary:after {content:'+';transform:rotate(45deg);background:#eaf2ff}
.faqs details p {margin:13px 40px 4px 0;color:#626f7f;font-size:14px;line-height:1.85}
.end-cta {background:#151d29}.end-cta h2 i {color:#a7c4f8}
.reveal {transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
@media (max-width:1050px) {
.site-nav nav{gap:15px}.site-nav .nav-policy{padding-left:10px}
.orbit-art{max-width:930px}
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-card{min-height:350px}
}
@media (max-width:900px) {
.site-nav nav{position:absolute;top:76px;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;background:#fff;padding:22px 6%;border-bottom:1px solid #e6eaf1;box-shadow:0 10px 20px rgba(10,20,40,.06)}
.site-nav nav.open{display:flex}.site-nav .nav-policy{border-left:0;padding-left:0}
.orbit-art{height:350px}.art-circle{aspect-ratio:1}
}
@media (max-width:650px) {
.nav-wrap{min-height:68px}.site-nav nav{top:68px}.hero{padding:70px 18px 0}.hero h1{font-size:clamp(44px,10.8vw,68px)}
.hero p{font-size:14px}.hero .tag{font-size:9px}
.hero-legal{gap:11px}.trust-line{max-width:320px;margin-left:auto;margin-right:auto;line-height:1.9}
.orbit-art{height:255px;margin:34px auto 0}.art-circle,.art-center{overflow:visible}.art-left{transform:translate(0,12px)}.art-right{transform:translate(0,12px)}
.art-left:hover,.art-left:focus-visible,.art-right:hover,.art-right:focus-visible{transform:translateY(-3px)}
.laptop{width:85%}.laptop-screen,.art-center .laptop-screen{height:76px;border:3px solid #1e2733;border-bottom:4px solid #1e2733;border-radius:5px}
.device-top{height:13px;padding:0 3px}.device-top b{font-size:3.5px;margin-left:3px;letter-spacing:.25px}
.mac-controls{gap:2px}.mac-controls i{height:3.4px;width:3.4px}
.laptop-base{height:5px}.mock-metric strong{font-size:10px}
.product-grid{grid-template-columns:1fr}.product-card{min-height:312px}.section{padding:65px 18px}
.price-card{min-height:auto}.faqs summary{font-size:14px}.faqs details p{margin-right:6px}
}
@media(prefers-reduced-motion:reduce){.art-circle,.laptop,.product-card,.btn,.reveal,.mac-controls i,.faqs details summary:after{animation:none!important;transition:none!important;transform:none!important}}
