/*
 * Public landing page (https://optor.ai), ported from prototype/landing.html.
 * A standalone page: it loads tokens.css (fonts) and this file only, not the workspace
 * stylesheets, so its short class names do not collide with components.css.
 */
:root{--ink:#191a1c;--muted:#707176;--line:#e6e6e8;--soft:#f5f5f6}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:white;color:var(--ink);font:15px/1.55 Inter,Arial,sans-serif}
button,input,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button,a,input,textarea{outline-offset:5px}
button{cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #777}
svg{width:23px;height:23px;flex-shrink:0}
.wrap{max-width:1280px;margin:auto;padding:0 48px}
.logo{width:150px;height:auto;display:block}
header{height:92px;display:flex;align-items:center;justify-content:space-between;gap:30px}
nav{display:flex;gap:30px;font-size:13px;font-weight:500;margin-right:auto;margin-left:30px}
.actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:45px;border:1px solid var(--line);border-radius:10px;padding:11px 20px;font-size:13px;font-weight:500;background:white}
.btn:hover{background:#ededee}
.btn.dark{background:var(--ink);color:white;border-color:var(--ink)}
.btn.dark:hover{background:#38393b}
.btn.arrow:after{content:'↗';font-size:18px}
.menu{display:none}
.hero{position:relative;z-index:0;padding-top:57px}
.heroPhoto{position:absolute;right:-48px;top:0;width:62%;height:490px;object-fit:cover;z-index:-1}
.hero:after{content:'';position:absolute;inset:0 35% 0 -48px;background:linear-gradient(90deg,#fff 65%,#ffffff00);z-index:-1;pointer-events:none}
.pill{display:inline-flex;padding:6px 11px;border:1px solid var(--line);border-radius:30px;font-size:11px;color:#515257;align-items:center;gap:8px}
.pill:before{content:'';width:5px;height:5px;border-radius:50%;background:#444}
h1{max-width:710px;font-size:clamp(42px,4.6vw,65px);line-height:1.06;letter-spacing:-3.3px;font-weight:600;margin:23px 0 20px}
.lead{max-width:580px;font-size:17px;line-height:1.6;color:var(--muted);margin:0}
.composer{position:relative;max-width:920px;margin-top:37px;border:1px solid #dedee1;border-radius:17px;background:#ffffffed;box-shadow:0 10px 40px #00000007;padding:14px 16px;display:flex;align-items:center;gap:14px}
.composer:focus-within{outline:2px solid #888;outline-offset:4px}
.composer>svg{color:#777;width:20px}
.composer textarea{width:100%;height:29px;min-height:29px;max-height:90px;resize:vertical;border:0;background:transparent;line-height:27px;outline:none;font-size:15px;color:#252629}
.send{width:43px;height:43px;border:0;border-radius:50%;background:#191a1c;color:white;flex-shrink:0;font-size:22px}
.send:hover{background:#444}
.suggestions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.suggestions button,.suggestions a{display:flex;gap:8px;align-items:center;padding:10px 13px;border:1px solid #e9e9eb;border-radius:9px;background:#f7f7f8;font-size:11px}
.suggestions button:hover,.suggestions a:hover{background:#eaeaec}
.suggestions svg{width:16px;height:16px}
.demoNote{font-size:11px;color:#888;margin:12px 0 0}
.preview{margin-top:48px;border:1px solid #dddde1;border-radius:15px;background:white;padding:5px;box-shadow:0 12px 50px #00000005;display:grid;grid-template-columns:190px 1fr;overflow:hidden}
.previewSide{background:#202124;color:#c5c5c7;border-radius:10px 0 0 10px;padding:21px 13px;display:flex;flex-direction:column;gap:5px;font-size:10px}
.previewSide .logo{color:white;width:123px;margin:0 5px 28px}
.previewLink{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:8px}
.previewLink.active{background:#ffffff13;color:white}
.previewLink svg{width:17px;height:17px}
.previewSide .company{margin-top:auto;padding:30px 10px 4px;color:#aaa}
.previewMain{padding:25px 27px;background:linear-gradient(#fff,#fafafb);border-radius:0 10px 10px 0;min-width:0}
.previewLabel{display:flex;justify-content:space-between;font-size:10px;color:#929298;margin-bottom:24px}
.promptBubble{margin-left:auto;max-width:max-content;background:#f0f0f2;padding:10px 14px;border-radius:11px;font-size:11px}
.reply{display:flex;align-items:flex-start;gap:12px;margin:24px 0 20px;font-size:12px}
.replyBadge{width:28px;height:28px;background:#202124;color:white;display:grid;place-items:center;border-radius:8px;flex-shrink:0}
.replyBadge svg{width:18px;height:18px}
.reply p{margin:0}
.reply small{color:#888}
.offer{display:grid;grid-template-columns:70px 1.7fr 1fr .9fr auto;align-items:center;gap:14px;border:1px solid #e5e5e8;border-radius:10px;padding:13px;margin-top:10px;font-size:11px;background:white}
.offer .hardware{height:42px;display:flex;align-items:center;justify-content:center;color:#5f6268}
.hardware svg{width:57px;height:42px}
.offer strong{font-size:11px;font-weight:600;display:block}
.offer small{font-size:9px;color:#96969b;display:block;margin-top:4px}
.offer .price strong{font-size:15px;color:#222;white-space:nowrap}
.offer .btn{font-size:9px;min-height:33px;padding:7px 11px;border-radius:7px}
.previewFoot{color:#999;font-size:9px;margin:13px 0 0}
.section{padding-top:98px;scroll-margin-top:20px}
.sectionHead{display:flex;justify-content:space-between;gap:50px;align-items:flex-end;margin-bottom:30px}
h2{font-size:35px;line-height:1.16;letter-spacing:-1.4px;font-weight:600;margin:0;max-width:700px}
.sectionHead p{color:var(--muted);font-size:13px;max-width:310px;margin:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{padding:27px;background:var(--soft);border-radius:13px}
.stepTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}
.stepTop span{font-size:12px;color:#9b9ca0}
.stepTop svg{width:31px;height:31px}
.step h3{font-size:19px;letter-spacing:-.5px;margin:0 0 11px;font-weight:600}
.step p{font-size:13px;color:var(--muted);margin:0}
.audience{margin-top:78px;padding:35px;background:#f5f5f6;border-radius:16px}
.audience .sectionHead{margin-bottom:30px}
.audienceGrid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.audienceCard{background:white;border:1px solid #ededee;border-radius:12px;padding:27px;scroll-margin-top:25px}
.audienceTitle{display:flex;gap:13px;align-items:center;margin-bottom:20px}
.audienceTitle h3{margin:0;font-size:18px;font-weight:600}
.audienceCard ul{padding:0;margin:0 0 26px;list-style:none;display:grid;gap:12px;font-size:12px;color:#66686c}
.audienceCard li{display:flex;gap:10px}
.audienceCard li:before{content:'✓';color:#222}
.textLink{font-size:12px;font-weight:500;display:inline-flex;gap:24px}
.textLink:hover{text-decoration:underline}
.cta{margin-top:22px;background:#1c1d1f;color:white;border-radius:14px;padding:43px 38px;display:flex;justify-content:space-between;gap:30px;align-items:center;overflow:hidden;position:relative}
.cta h2{font-size:36px;max-width:650px}
.cta p{font-size:13px;color:#b9b9be;max-width:500px;margin:15px 0 23px}
.cta .btn{border:0;color:var(--ink)}
.ctaMark{width:170px;height:170px;opacity:.15;flex-shrink:0;transform:rotate(-12deg)}
.ctaMark svg{width:100%;height:100%}
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px 0 35px;font-size:10px;color:#888}
footer .logo{width:112px;height:28px;color:#222}
.footerBrand{display:flex;align-items:center;gap:22px}
footer .links{display:flex;gap:23px}
.mobileMenu{display:none}
a,button{-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.5}
.fileTip{font-size:11px;color:#777}

@media(min-width:1500px){.heroPhoto{right:-65px;width:67%}}
@media(max-width:1050px){.wrap{padding:0 28px}
nav{gap:17px;margin-left:12px}
.heroPhoto{right:-28px;width:68%;opacity:.65}
h1{font-size:55px;max-width:650px}
.preview{grid-template-columns:155px 1fr}
.previewMain{padding:20px}
.offer{grid-template-columns:50px 1.5fr 1fr 1fr;gap:9px}
.offer>.btn{display:none}
.sectionHead{gap:24px}
h2{font-size:30px}
.step{padding:22px}
.audience{padding:27px}
.ctaMark{width:130px;height:130px}}

@media(max-width:760px){.wrap{padding:0 20px}
header{height:76px;gap:14px}
header .logo{width:125px;height:30px}
nav{display:none}
header .actions>.btn{display:none}
.menu{display:block;border:1px solid var(--line);background:white;border-radius:8px;font-size:12px;padding:9px 13px}
.mobileMenu.open{display:flex;flex-direction:column;gap:17px;border-bottom:1px solid var(--line);padding:5px 0 24px;font-size:14px}
.mobileMenu .btn{align-self:flex-start}
.hero{padding-top:34px}
.heroPhoto{top:130px;width:100%;right:-20px;height:300px;opacity:.18}
.hero:after{display:none}
h1{font-size:43px;letter-spacing:-2px;max-width:540px;margin:20px 0}
.lead{font-size:15px;max-width:460px}
.pill{font-size:10px}
.composer{margin-top:28px;padding:12px;gap:7px;border-radius:14px}
.composer:focus-within{outline:2px solid #888;outline-offset:4px}
.composer>svg{display:none}
.composer textarea{font-size:16px;height:55px;line-height:25px}
.send{width:39px;height:39px}
.suggestions{gap:7px}
.suggestions button,.suggestions a{padding:9px;font-size:10px}
.demoNote{font-size:10px;max-width:320px}
.preview{grid-template-columns:1fr;margin-top:30px}
.previewSide{display:none}
.previewMain{padding:17px 12px;border-radius:10px}
.previewLabel{font-size:9px;margin-bottom:18px}
.promptBubble{font-size:10px;max-width:90%}
.reply{font-size:11px;margin:18px 0 14px}
.offer{grid-template-columns:38px minmax(0,1fr) auto;padding:11px 8px;gap:9px}
.offer .vendor{display:none}
.offer strong{font-size:10px}
.offer .price strong{font-size:12px}
.offer small{font-size:8px}
.hardware svg{width:36px;height:30px}
.previewFoot{font-size:8px}
.section{padding-top:60px}
.sectionHead{display:block;margin-bottom:22px}
h2{font-size:29px;letter-spacing:-1px}
.sectionHead p{max-width:100%;margin-top:14px;font-size:12px}
.steps{grid-template-columns:1fr;gap:10px}
.step{padding:22px}
.stepTop{margin-bottom:15px}
.stepTop svg{width:25px;height:25px}
.step h3{font-size:18px}
.step p{font-size:13px}
.audience{margin-top:40px;padding:22px 14px}
.audience .sectionHead{padding:0 6px}
.audienceGrid{grid-template-columns:1fr;gap:12px}
.audienceCard{padding:23px}
.cta{padding:29px 24px;margin-top:16px}
.cta h2{font-size:29px}
.ctaMark{position:absolute;right:-35px;bottom:-35px;width:150px;height:150px;pointer-events:none}
.cta>div:first-child{z-index:1}
.cta p{max-width:95%;font-size:12px}
footer{align-items:flex-start;flex-direction:column;padding:28px 0;gap:17px}
.footerBrand{gap:14px}
footer .links{flex-wrap:wrap;gap:18px}
.footerBrand>span{font-size:9px}
.desktopBreak{display:none}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:760px){.suggestions button,.suggestions a,.mobileMenu a,.textLink{min-height:44px}
.mobileMenu a{display:flex;align-items:center}
.composer textarea{scroll-margin-bottom:100px}}