:root{--bg:#090c13;--panel:#121722;--panel2:#171d2a;--paper:#fbfaf7;--ink:#11151f;--text:#f7f8fb;--muted:#aeb5c5;--amber:#ffb51b;--amber2:#ffd676;--violet:#7c50ff;--mint:#68e4b4;--line:#303747;--max:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242a36}.brand{display:flex;align-items:center;gap:10px;font-weight:850}.links{display:flex;align-items:center;gap:20px;color:#cbd0db;font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:1px solid #3a4253;border-radius:14px;font-weight:850}.btn.primary{background:var(--amber);border-color:var(--amber);color:#171207;box-shadow:0 16px 45px #ffb51b22}.hero{padding:80px 0 70px;background:radial-gradient(circle at 74% 25%,#6846da2d,transparent 30%),radial-gradient(circle at 8% 20%,#ffb51b16,transparent 24%)}.hero-grid{display:grid;grid-template-columns:.93fr 1.07fr;gap:58px;align-items:center}.eyebrow{color:var(--amber2);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.hero h1{font-size:clamp(47px,6vw,76px);line-height:.98;letter-spacing:-.06em;margin:20px 0 24px}.hero h1 em{font-style:normal;color:var(--amber)}.lead{font-size:19px;color:#c1c7d3;max-width:650px}.actions{display:flex;gap:12px;margin-top:30px}.proof-line{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:25px;color:#929aab;font-size:13px}.proof-line b{color:#fff}.demo{border:1px solid #343b4b;border-radius:26px;overflow:hidden;background:#0e121b;box-shadow:0 36px 90px #0009}.demo-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid #2b3140;color:#8e96a7;font-size:11px;font-weight:800;letter-spacing:.08em}.dot{color:var(--mint)}.demo-body{padding:26px}.section{padding:92px 0;display:flow-root}.paper{background:var(--paper);color:var(--ink)}.ink2{background:#141925}.section-head{max-width:760px;margin-bottom:42px}.section h2{font-size:clamp(38px,5vw,58px);line-height:1.05;letter-spacing:-.05em;margin:13px 0}.section-head p{font-size:18px;color:#666d7c}.dark-copy{color:#aab1c0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.card{border:1px solid #dddcd7;border-radius:20px;padding:26px;background:#fff}.card.dark{border-color:#303747;background:var(--panel)}.card h3{font-size:23px;line-height:1.16;margin:12px 0}.card p{color:#6c7280;margin:0}.card.dark p{color:#aab1c0}.num{color:#986700;font-weight:900;font-size:12px}.card.dark .num{color:var(--amber)}.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.checklist{list-style:none;padding:0}.checklist li{margin:13px 0;color:#c2c8d4}.checklist li:before{content:"✓";color:var(--mint);font-weight:900;margin-right:11px}.quote{border:1px solid #343b4a;border-radius:22px;padding:31px;background:#141924}.quote blockquote{font-size:24px;line-height:1.42;margin:0 0 22px;color:#eef0f5}.quote cite{font-style:normal;color:#aeb5c3}.faq{display:grid;grid-template-columns:1fr 1fr;gap:11px}.faq details{background:#fff;border:1px solid #dfddd6;border-radius:15px;padding:18px}.faq summary{font-weight:850;cursor:pointer}.faq p{color:#656c7a}.cta{text-align:center;padding:88px 0;background:radial-gradient(circle at 50% 100%,#7047e43c,transparent 55%)}.cta h2{font-size:clamp(42px,6vw,70px);line-height:1;letter-spacing:-.055em;max-width:850px;margin:0 auto 19px}.footer{padding:26px 0;border-top:1px solid #292f3b;color:#858d9d;font-size:13px}.footer .wrap{display:flex;justify-content:space-between}.related{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.related a{border-bottom:1px solid #7b8292;color:#c3c8d3}.screen{border:1px solid #333a49;border-radius:18px;background:#090d14;overflow:hidden}.screen-bar{padding:12px 15px;border-bottom:1px solid #292f3c;color:#858d9e;font-size:11px;display:flex;justify-content:space-between}.screen-content{padding:22px}.pill{display:inline-block;border:1px solid #394152;border-radius:99px;padding:7px 10px;font-size:10px;font-weight:900;letter-spacing:.07em}.amber{color:var(--amber)}@media(max-width:900px){.hero-grid,.split{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.links a:not(.btn){display:none}}@media(max-width:620px){.wrap{width:min(var(--max),calc(100% - 24px))}.hero{padding:52px 0}.hero h1{font-size:46px}.actions{flex-direction:column}.actions .btn{width:100%}.faq{grid-template-columns:1fr}.footer .wrap{display:block}.footer span{display:block;margin-top:5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* Added for /chrome-teleprompter-extension (2026-09-20) — tabs, comparison table, multi-column
   footer and a few small pieces the first 3 pages didn't need. Reuses the same CSS variables. */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;color:#8f96a6;font-size:14px;font-weight:700}
.trust b{color:#dfe2ea}
.trust-note{margin-top:10px;color:#666d7c;font-size:12.5px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tab-btn{border:1px solid #343b4b;background:#121722;color:#9aa1b2;border-radius:12px;padding:11px 16px;font-weight:850;font-size:13px;cursor:pointer}
.tab-btn.active{background:#fff;color:#171a24;border-color:#fff}
.tab-panel{display:none}
.tab-panel.active{display:block}
.tab-body{border:1px solid #343b4b;border-radius:22px;padding:32px;background:#121722}
.tab-body h3{font-size:24px;margin:0 0 10px}
.tab-body p{color:#aab1c0;margin:0 0 18px}
.feature-pills{display:flex;flex-wrap:wrap;gap:8px}
.feature-pills span{border:1px solid #343b4b;border-radius:99px;padding:7px 11px;font-size:11.5px;font-weight:800;color:#c2c8d4}
.compare-table{width:100%;border-collapse:collapse;background:#fff;color:#171a24;border-radius:18px;overflow:hidden}
.compare-table th,.compare-table td{text-align:left;padding:15px;border-bottom:1px solid #e7e5df;font-size:14px}
.compare-table th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;background:#f0eee8}
.compare-table td:last-child{font-weight:750;color:#14765a}
.table-scroll{overflow-x:auto;border-radius:18px}
.table-scroll .compare-table{min-width:620px}
.steps{list-style:none;counter-reset:step;padding:0;display:grid;gap:14px;max-width:560px;margin:0 auto}
.steps li{counter-increment:step;display:flex;gap:14px;align-items:flex-start;color:#c2c8d4;text-align:left;font-size:15px}
.steps li:before{content:counter(step);flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--amber);color:#171207;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
.footer-cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:9px}
.footer-col b{color:#c2c8d4;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.footer-col a,.footer-col span{color:#858d9d;font-size:13px}
.footer-col a:hover{color:#c2c8d4}
/* Hero "floating overlay on a webpage" mockup + Extension-vs-Web-app comparison cards
   (2026-09-20, direct feedback: hero needed to show the overlay sitting on top of a real page,
   trust bar needed to look intentional not like unstyled text, and a two-card comparison modeled
   on WelcomeExtensionPage.tsx's wext-choice-grid design). */
.browser-mock{position:relative;padding:26px;min-height:270px}
.fake-page{opacity:.45}
.fake-line{height:9px;background:#2a3040;border-radius:6px;margin:13px 0}
.fake-block{height:64px;background:#232838;border-radius:10px;margin:16px 0}
.floating-overlay{position:absolute;right:22px;bottom:22px;left:22px;background:rgba(18,22,34,0.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.14);border-radius:16px;padding:20px;box-shadow:0 25px 60px rgba(0,0,0,0.55)}
.floating-overlay-head{color:var(--mint);font-size:10px;font-weight:900;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.floating-overlay-head:before{content:"●";font-size:9px}
.floating-overlay p{margin:0;font-size:17px;line-height:1.5;color:#fff}
.ext-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ext-card{border:1px solid #343b4b;border-radius:24px;padding:28px;background:#121722;position:relative}
.ext-card.best{border-color:var(--amber)}
.ext-card .tag{position:absolute;top:-11px;left:24px;background:var(--amber);color:#171207;font-size:10px;font-weight:900;letter-spacing:.06em;padding:5px 10px;border-radius:99px}
.ext-card h3{font-size:23px;margin:6px 0 10px}
.ext-card p.desc{color:#aab1c0;font-size:14px;margin:0 0 18px}
.ext-mini-browser{border:1px solid #2b3140;border-radius:14px;background:#0b0e15;padding:14px;margin-bottom:18px;min-height:120px;position:relative}
.ext-mini-dots{display:flex;gap:5px;margin-bottom:12px}
.ext-mini-dots span{width:7px;height:7px;border-radius:50%;background:#333a49}
.ext-mini-float{position:absolute;right:12px;bottom:12px;left:12px;background:rgba(255,181,27,0.1);border:1px solid rgba(255,181,27,0.35);border-radius:10px;padding:10px;font-size:11px;color:var(--amber2)}
.ext-mini-studio{height:60px;border-radius:8px;background:linear-gradient(135deg,#232030,#171a26);display:flex;align-items:center;justify-content:center;color:#8f96a6;font-size:11px;font-weight:800;letter-spacing:.06em}
.ext-features{display:grid;gap:9px;margin-bottom:20px}
.ext-features div{font-size:13px;color:#c2c8d4;display:flex;gap:8px}
.ext-features div:before{content:"✓";color:var(--mint);font-weight:900}
.sync-strip{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;padding:14px;border:1px solid #343b4b;border-radius:14px;color:#8f96a6;font-size:13px;font-weight:700}
.sync-strip b{color:#dfe2ea}
@media(max-width:900px){.ext-compare{grid-template-columns:1fr}}
/* .steps was designed for dark sections (light text) but got used on a .paper (light bg)
   section too, rendering near-invisible light-gray-on-white text (2026-09-20, direct feedback:
   "text is light too not visible"). */
.paper .steps li{color:#3a3f4c}
/* .trust-note's default #666d7c reads fine on .paper (light) but is low-contrast on the dark
   hero/cta/ink2 sections it's also used in. */
.hero .trust-note,.cta .trust-note,.ink2 .trust-note{color:#9aa1b2}
@media(max-width:900px){.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid4{grid-template-columns:1fr}.footer-cols{flex-direction:column;gap:20px}}