/* Dr Store public marketing pages: native CSS, no runtime dependencies. */
:root { color-scheme: dark; --bg:#080e1c; --surface:#111c31; --surface-2:#16223b; --line:#2b3b59; --text:#f4f7ff; --muted:#b5c2d9; --accent:#adaeff; --mint:#80e5bc; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:1.5rem; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
a { color:var(--accent); text-underline-offset:.2em; }
a:hover { color:#d8d8ff; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--mint); outline-offset:5px; border-radius:4px; }
p { margin:0 0 1.1rem; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.025em; text-wrap:balance; }
h1 { font-size:clamp(2.2rem,5.3vw,4.7rem); max-width:17ch; margin:.8rem 0 1.5rem; }
h2 { font-size:clamp(1.55rem,3vw,2.5rem); margin:0 0 1.15rem; }
h3 { font-size:1.15rem; margin:0 0 .7rem; }
img { max-width:100%; height:auto; }
strong { color:var(--text); }
.container { width:min(var(--max),calc(100% - 3rem)); margin-inline:auto; }
.skip-link { position:absolute; z-index:20; left:1rem; top:-8rem; padding:.8rem 1rem; background:var(--text); color:var(--bg); border-radius:8px; }
.skip-link:focus { top:1rem; color:var(--bg); }
.site-header { border-bottom:1px solid var(--line); background:#0b1324; }
.header-top { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem 0; }
.brand { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text); font-size:1.25rem; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; background:#8385f5; color:#080e1c; border-radius:12px; font-size:.8rem; font-weight:900; letter-spacing:-.06em; }
.header-actions { display:flex; gap:1rem; align-items:center; }
.header-actions a { font-size:.85rem; font-weight:700; }
.nav-links { display:flex; flex-wrap:wrap; gap:.3rem 1.45rem; padding:0 0 .9rem; font-size:.88rem; }
.nav-links a { color:var(--muted); text-decoration:none; padding:.3rem 0; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.7rem 1.15rem; border-radius:10px; background:var(--accent); border:1px solid var(--accent); color:#0c1024; text-decoration:none; font-weight:750; line-height:1.35; text-align:center; }
.button:hover { background:#c2c3ff; color:#0c1024; }
.button.secondary { color:var(--text); background:transparent; border-color:var(--line); }
.button.secondary:hover { background:var(--surface-2); }
.button.small { min-height:40px; padding:.55rem .9rem; }
.breadcrumb { margin:1.4rem 0 0; }
.breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; list-style:none; padding:0; margin:0; font-size:.8rem; color:var(--muted); }
.breadcrumb li + li::before { content:"/"; margin-right:.5rem; color:#7485a5; }
.breadcrumb a { color:var(--muted); }
.hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr); align-items:center; gap:3.5rem; padding:4rem 0 4.5rem; }
.hero.full { grid-template-columns:1fr; gap:1.5rem; padding-bottom:3rem; }
.hero.full h1 { max-width:22ch; }
.hero.full .lede { max-width:75ch; }
.eyebrow { display:inline-block; color:var(--mint); font-size:.74rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.lede { color:var(--muted); font-size:1.08rem; max-width:59ch; }
.actions { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.8rem 0 1rem; }
.fine { color:var(--muted); font-size:.85rem; }
.hero-panel { padding:1.8rem; background:linear-gradient(145deg,#1b2948,#111c31); border:1px solid #3a4b70; border-radius:24px; box-shadow:0 18px 70px #0003; }
.panel-label { display:inline-block; color:var(--accent); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; font-weight:750; margin-bottom:1.15rem; }
.hero-panel h2 { font-size:1.35rem; margin-bottom:1.25rem; }
.panel-list { list-style:none; margin:0; padding:0; counter-reset:panel; }
.panel-list li { position:relative; padding:1rem 0 1rem 2.8rem; border-top:1px solid #354360; color:var(--muted); font-size:.9rem; }
.panel-list li::before { counter-increment:panel; content:counter(panel,decimal-leading-zero); position:absolute; left:0; top:1rem; color:var(--mint); font-weight:750; font-size:.8rem; }
.panel-list strong { display:block; font-size:1rem; margin-bottom:.2rem; }
.section { padding:4.5rem 0; border-top:1px solid var(--line); }
.section-intro { max-width:72ch; color:var(--muted); margin-bottom:2rem; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.65rem; }
.card p { color:var(--muted); font-size:.95rem; margin-bottom:0; }
.card .number { display:block; color:var(--mint); font-size:.8rem; font-weight:750; margin-bottom:1rem; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.prose { color:var(--muted); }
.prose p:last-child { margin-bottom:0; }
.check-list { list-style:none; padding:0; margin:1rem 0 0; }
.check-list li { position:relative; padding-left:1.5rem; margin:.7rem 0; color:var(--muted); }
.check-list li::before { position:absolute; left:0; content:"✓"; color:var(--mint); font-weight:bold; }
.numbered-list { padding-left:1.3rem; }
.numbered-list li { padding-left:.4rem; margin:.8rem 0; color:var(--muted); }
.callout { margin-top:2rem; padding:1.3rem 1.5rem; border:1px solid #3d5076; border-left:3px solid var(--accent); background:#101c32; border-radius:0 12px 12px 0; color:var(--muted); }
.callout p { margin:0; }
.faq { max-width:900px; }
.faq details { border-bottom:1px solid var(--line); padding:1.1rem 0; }
.faq summary { cursor:pointer; font-weight:700; padding:.15rem .2rem; line-height:1.45; }
.faq details p { color:var(--muted); margin:1rem 1.5rem .25rem .2rem; }
.related { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.related a { padding:.65rem .9rem; background:var(--surface); border:1px solid var(--line); border-radius:9px; text-decoration:none; font-size:.9rem; }
.cta-box { padding:2.5rem; border:1px solid #494b81; border-radius:22px; background:linear-gradient(120deg,#20264a,#142a37); }
.cta-box h2 { max-width:28ch; }
.cta-box p { max-width:70ch; color:#c7d2e7; }
.site-footer { border-top:1px solid var(--line); padding:2.5rem 0; }
.footer-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:2.5rem; }
.footer-grid p { color:var(--muted); font-size:.88rem; margin-top:.8rem; max-width:32ch; }
.footer-title { display:block; font-size:.85rem; font-weight:750; margin-bottom:.8rem; }
.footer-links { display:flex; flex-direction:column; gap:.45rem; font-size:.85rem; }
.footer-links a { color:var(--muted); text-decoration:none; }
.footer-links a:hover { color:var(--text); text-decoration:underline; }
.copyright { font-size:.78rem; color:#99aac7; border-top:1px solid var(--line); padding-top:1.5rem; margin-top:2rem; }
.plan { display:flex; flex-direction:column; position:relative; }
.plan.featured { border-color:#9294ff; background:#1a2441; }
.plan-tag { color:var(--mint); font-size:.75rem; font-weight:750; letter-spacing:.03em; margin-bottom:1rem; }
.plan .price { color:var(--text); font-size:2.1rem; font-weight:800; letter-spacing:-.04em; line-height:1.15; margin:1.3rem 0 .6rem; font-variant-numeric:tabular-nums; }
.price small { color:var(--muted); font-size:.8rem; font-weight:500; letter-spacing:0; }
.year-price { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1rem 0; margin:1.1rem 0; font-size:.9rem; color:var(--muted); }
.year-price strong { display:block; }
.plan .check-list { margin-top:0; margin-bottom:1.5rem; font-size:.9rem; flex-grow:1; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
caption { padding:1rem; text-align:left; color:var(--muted); background:var(--surface); }
th,td { text-align:left; padding:1rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--text); background:#15213a; font-weight:700; }
td { color:var(--muted); }
tr:last-child th,tr:last-child td { border-bottom:0; }
.nowrap { white-space:nowrap; }
.steps { list-style:none; counter-reset:step; padding:0; margin:0; display:grid; gap:1rem; }
.step { display:grid; grid-template-columns:60px minmax(0,1fr); gap:1.25rem; padding:1.7rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.step::before { counter-increment:step; content:counter(step,decimal-leading-zero); width:52px; height:52px; display:grid; place-items:center; color:var(--mint); background:#1d3244; border-radius:14px; font-size:1.1rem; font-weight:800; }
.step p { color:var(--muted); margin-bottom:.6rem; }
.step p:last-child { margin-bottom:0; }
.toc { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.toc a { color:var(--muted); border-bottom:1px solid var(--line); font-size:.85rem; text-decoration:none; padding:.35rem .15rem; }
@media(max-width:900px) { .hero { grid-template-columns:1fr; gap:2rem; padding-top:2.5rem; } .hero h1 { max-width:20ch; } .hero-panel { max-width:680px; } .cards { grid-template-columns:1fr; } .card { padding:1.5rem; } .two-column { gap:1.75rem; } .footer-grid { grid-template-columns:1.2fr 1fr; } .footer-grid > :first-child { grid-column:1 / -1; } .section { padding:3.25rem 0; } }
@media(max-width:600px) { .container { width:calc(100% - 2rem); } .header-top { gap:.8rem; } .header-actions { gap:.7rem; } .header-actions a { font-size:.78rem; } .brand { font-size:1.05rem; gap:.45rem; } .brand-mark { width:32px; height:32px; border-radius:9px; font-size:.7rem; } .button.small { padding:.5rem .65rem; } .nav-links { gap:.15rem 1rem; font-size:.82rem; } .hero { padding:2rem 0 3rem; } h1 { font-size:2.4rem; } .lede { font-size:1rem; } .hero-panel { padding:1.4rem; } .two-column,.footer-grid { grid-template-columns:1fr; } .footer-grid { gap:1.7rem; } .cta-box { padding:1.65rem; } .section { padding:2.8rem 0; } .step { grid-template-columns:1fr; gap:1rem; padding:1.4rem; } .step::before { width:42px; height:42px; font-size:.95rem; } .actions .button { flex:1 1 180px; } th,td { padding:.8rem; min-width:140px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { :root { color-scheme:light; } body { background:#fff; color:#111; } .site-header,.site-footer,.actions,.related,.skip-link { display:none; } h1,h2,h3,strong { color:#111; } p,li,.prose,.fine,td { color:#333 !important; } .card,.hero-panel,.step,.callout,.cta-box { background:#fff; border-color:#aaa; box-shadow:none; break-inside:avoid; } .container { width:100%; } .section { padding:1.5rem 0; } a { color:#333; } }