/* Exact brand tokens from the desktop application's frontend/src/index.css. */
:root {
  --bg: hsl(240 10% 5%);
  --surface: hsl(240 8% 9%);
  --surface-2: hsl(240 5% 14%);
  --line: hsl(240 6% 17%);
  --text: hsl(0 0% 98%);
  --muted: hsl(240 5% 64%);
  --accent: hsl(347 82% 55%);
  --accent-light: hsl(347 90% 72%);
  --violet: hsl(268 70% 62%);
  --green: hsl(152 62% 45%);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}
body { background: var(--bg); color: var(--text); }
h1,h2,h3,h4,.brand { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; }
.site-header { background: hsl(240 9% 8% / .94); border-color: var(--line); }
.button { color: white; background: var(--accent); border-color: var(--accent); border-radius: 12px; box-shadow: 0 8px 26px -10px hsl(347 82% 55% / .4); }
.button:hover { background: hsl(347 82% 49%); }
.button.ghost { color: var(--text); background: transparent; border-color: var(--line); box-shadow: none; }
.button.ghost:hover { background: var(--surface-2); }
.accent { color: var(--accent); }
.hero { display: block; padding-top: 70px; padding-bottom: 60px; min-height: 0; }
.hero-intro { display: grid; grid-template-columns: 1.12fr 1fr; gap: 70px; align-items: center; margin-bottom: 46px; }
.hero h1 { max-width: 650px; font-size: clamp(2.8rem,4.35vw,4.35rem); letter-spacing: -.05em; line-height: 1.1; }
.hero-description { margin: 0; max-width: 490px; color: var(--muted); }
.hero-actions { margin-top: 24px; }
.hero .eyebrow { color: var(--muted); font-size: 11px; }
.hero-copy { max-width: none; }
.hero-shot { box-shadow: 0 32px 95px -34px #000,0 0 90px -40px hsl(347 82% 55% / .36); }
.product-shot { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.screenshot-button { display: block; position: relative; width: 100%; border: 0; padding: 0; background: var(--bg); border-radius: inherit; cursor: zoom-in; overflow: hidden; }
.screenshot-button img { display: block; width: 100%; height: auto; object-fit: contain; }
.screenshot-zoom { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid hsl(347 82% 55% / .45); border-radius: 8px; background: hsl(240 10% 5% / .88); color: white; font-size: 21px; transition: background .2s; }
.screenshot-button:hover .screenshot-zoom { background: var(--accent); }
.product-shot figcaption { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 16px 20px; color: var(--muted); font-size: 12px; }
.product-shot figcaption>span:first-child { color: var(--text); }
.capture-dot { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.workflow-panel { grid-template-columns: .65fr 1.35fr; padding: 30px; gap: 34px; background: var(--surface); }
.workflow-visual { padding: 0; border-color: var(--line); background: var(--bg); overflow: hidden; }
.workflow-shot-caption { padding: 10px 14px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.workflow-panel h3 { font-size: 27px; }
.feature-section { background: hsl(240 9% 6%); border-color: var(--line); }
.feature-card { background: var(--surface); border-color: var(--line); padding: 30px; }
.feature-icon { background: hsl(347 82% 55% / .1); color: var(--accent); border-color: hsl(347 82% 55% / .2); }
.feature-capture { margin-top: 28px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.feature-capture-wide { margin: 0; }
.feature-wide { gap: 36px; }
.editorial-section { gap: 55px; grid-template-columns: 1.15fr 1fr; }
.editorial-copy h2 { font-size: clamp(2rem,3.1vw,3rem); }
.automation-band { background: var(--surface); border-color: var(--line); }
.plan-card { background: var(--surface); border-color: var(--line); }
.plan-card.highlight { border-color: var(--accent); background: linear-gradient(160deg,hsl(347 82% 55% / .09),var(--surface) 65%); }
.plan-ribbon { background: var(--accent); border-color: var(--accent); color: white; }
.check,.table-check,.clean-list li::before,.text-link { color: var(--accent-light); }
.pill { color: var(--accent-light); background: hsl(347 82% 55% / .1); border-color: hsl(347 82% 55% / .2); }
.final-cta { background: radial-gradient(ellipse at 50% 100%,hsl(347 82% 55% / .09),transparent 65%); }
.skip-link { background: var(--accent); color: white; }
.login-story { display: flex; flex-direction: column; justify-content: center; padding: 58px 40px; gap: 40px; min-height: 700px; background: radial-gradient(ellipse at 0 0,hsl(347 82% 55% / .1),transparent 65%),var(--surface); }
.login-story-copy { position: static; }
.login-story-copy h1 { font-size: clamp(2.1rem,3.15vw,3.25rem); }
.login-story-copy p { color: var(--muted); }
.login-story-copy .eyebrow { color: var(--accent-light); }
.login-software-shot { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 45px #0005; }
.login-software-shot figcaption { color: var(--muted); font-size: 11px; padding: 12px 16px; }
.login-header,.account-sidebar,.account-topbar { background: hsl(240 9% 8%); border-color: var(--line); }
.account-page,.account-main { background: var(--bg); }
.account-card,.stat-card,.next-step,.plan-option { background: var(--surface); border-color: var(--line); }
.account-sidebar nav button.active { color: white; background: hsl(347 82% 55% / .13); border-color: hsl(347 82% 55% / .2); }
.account-editorial { display: block; min-height: 0; background: var(--surface); }
.account-software-shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 24px; }
.account-editorial .eyebrow { color: var(--accent-light); }
.subscription-hero { border-color: hsl(347 82% 55% / .4); background: linear-gradient(130deg,hsl(347 82% 55% / .1),var(--surface)); }
.subscription-hero .eyebrow,.subscription-hero p,.account-feature-list span { color: var(--accent-light); }
.usage-track span { background: var(--accent); }
.auth-tabs button.active { color: var(--accent-light); border-color: var(--accent); }
.plan-option.selected { background: hsl(347 82% 55% / .12); border-color: var(--accent); }
.profile-card form input,form input { background: var(--bg); border-color: var(--line); color: var(--text); }
.screenshot-dialog { width: calc(100% - 40px); max-width: 1560px; max-height: calc(100dvh - 40px); padding: 14px; margin: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); overflow: auto; }
.screenshot-dialog::backdrop { background: #000c; backdrop-filter: blur(8px); }
.screenshot-dialog-head { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 14px; padding-left: 5px; font-size: 14px; }
.screenshot-dialog button { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: white; padding: 7px 12px; }
.screenshot-dialog img { display: block; max-height: calc(100dvh - 130px); object-fit: contain; margin: auto; width: 100%; height: auto; }
@media(max-width:1050px) { .hero-intro { gap: 34px; }.hero h1 { font-size: 3rem; }.hero-support .button { font-size: 13px; }.editorial-section { grid-template-columns: 1fr; gap: 35px; }.editorial-copy h2 br { display: none; } }
@media(max-width:760px) { .hero { padding-top: 45px; padding-bottom: 40px; }.hero-intro { grid-template-columns: 1fr; gap: 25px; margin-bottom: 34px; }.hero h1 { font-size: clamp(2.45rem,9.5vw,3.8rem); }.hero-description { font-size: 16px; }.hero .eyebrow { font-size: 9px; }.product-shot figcaption { flex-wrap: wrap; gap: 5px; padding: 12px 14px; font-size: 11px; }.workflow-panel { grid-template-columns: 1fr; padding: 22px; gap: 25px; }.workflow-visual { margin: 0 -10px; }.feature-card { padding: 23px; }.feature-wide { display: block; }.feature-capture-wide { margin-top: 25px; }.screenshot-zoom { width: 27px; height: 27px; right: 9px; bottom: 9px; font-size: 17px; }.login-story { padding: 35px 24px; }.screenshot-dialog { width: calc(100% - 18px); padding: 10px; }.screenshot-dialog-head { font-size: 12px; }.screenshot-dialog-head span { max-width: 70%; } }
@media(max-width:640px) { .login-story { display: none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; }.button,.screenshot-zoom { transition: none; } }

/* Frame the approved artwork without redrawing or changing its lettering. */
.plan-coming-soon { margin: 24px 0; padding: 18px; border: 1px solid hsl(268 70% 62% / .28); border-radius: 10px; background: hsl(268 70% 62% / .06); }
.faq-answer { padding-bottom: 24px; }
.faq-list .faq-answer p { padding-bottom: 0; margin: 0 0 16px; }
.faq-answer strong { color: var(--text); font-weight: 600; }
.faq-answer ol,.faq-answer ul { margin: 0 0 18px; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.faq-answer li+li { margin-top: 10px; }
.faq-list .faq-answer .faq-provider-links { margin-bottom: 0; font-size: 12px; }
.faq-provider-links a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }
.faq-provider-links a:hover { color: var(--text); }

.coming-soon-label { color: #c5a2f2; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 14px; }
.plan-coming-soon ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.plan-coming-soon strong { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.5; }
.plan-coming-soon p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 4px 0 0; }
.plan-coming-soon small { display: block; margin-top: 15px; color: #c5a2f2; font-size: 10px; line-height: 1.6; }

.scrollbard-brand { flex: 0 0 auto; }
.brand-wordmark { display: block; position: relative; width: 190px; aspect-ratio: 910 / 144; overflow: hidden; }
.brand-wordmark img { position: absolute; width: 184.6154%; max-width: none; height: auto; left: -43.0769%; top: -418.0556%; }
.hero-intro { grid-template-columns: 1fr 1.1fr; gap: 36px; margin-bottom: 60px; }
.hero h1 { font-size: clamp(2.65rem,3.9vw,3.85rem); }
.hero-description { margin-top: 24px; font-size: 16px; line-height: 1.8; }
.hero-brand-art { min-width: 0; }
.hero-brand-art img { display: block; width: 100%; height: auto; border-radius: 16px; }
.hero-actions .button { padding: 13px 18px; font-size: 14px; }
.site-footer .brand-wordmark { width: 172px; }
.account-sidebar .brand-wordmark { width: 180px; }
@media(max-width:1050px) { .hero-intro { gap: 25px; }.hero h1 { font-size: 2.9rem; }.brand-wordmark { width: 170px; } }
@media(max-width:760px) { .hero-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }.hero h1 { font-size: clamp(2.45rem,9.5vw,3.8rem); }.hero-brand-art { max-width: 550px; width: 100%; margin: 0 auto; }.hero-description { margin-top: 20px; }.brand-wordmark { width: 155px; } }
@media(max-width:420px) { .nav { gap: 12px; }.nav .brand-wordmark { width: 137px; }.nav-actions { gap: 10px; }.nav-actions .button.small { padding: 9px 11px; font-size: 12px; }.login-header .brand-wordmark { width: 150px; } }