/* MIRAVPN public page — aligned with the subscription dashboard. */
:root { color-scheme: dark; --bg:#0b1426; --card:#162239; --text:#eef4ff; --muted:#9aafcc; --line:rgba(176,197,236,.14); --a:#9de5d4; --a2:#6ccabf; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body.mira-landing { margin:0; color:var(--text); background:radial-gradient(ellipse at 90% 0,#172c46 0,transparent 32%),radial-gradient(ellipse at 0 38%,#18233e 0,transparent 40%),var(--bg); font:14px/1.6 "Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.mira-landing button,.mira-landing input,.mira-landing textarea { font:inherit; }
.mira-landing a { color:inherit; text-decoration:none; }
.mira-landing button { cursor:pointer; }
.mira-landing [hidden] { display:none !important; }
.mira-landing svg { width:23px; height:23px; flex:none; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.mira-landing .landing-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.mira-landing :is(a,button,summary):focus-visible { outline:2px solid var(--a); outline-offset:5px; }
.landing-container { max-width:1160px; padding-inline:32px; margin-inline:auto; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:10001; padding:10px 16px; background:#9de5d4; color:#082c31 !important; border-radius:10px; }
.skip-link:focus { top:12px; }
.landing-header { position:sticky; top:0; z-index:20; background:rgba(11,20,38,.87); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.landing-nav { display:flex; align-items:center; justify-content:space-between; gap:32px; height:82px; }
.mira-landing .brand { display:inline-flex; align-items:center; gap:14px; white-space:nowrap; font-size:19px; font-weight:750; letter-spacing:.045em; }
.mira-landing .mark { position:relative; flex:none; width:23px; height:23px; margin:4px; border:2px solid var(--a); border-radius:5px; transform:rotate(45deg); box-shadow:0 0 15px rgba(125,240,223,.1); }
.mira-landing .mark::after { content:""; position:absolute; inset:5px; border:2px solid var(--a); border-radius:2px; }
.landing-nav-links { display:flex; align-items:center; gap:26px; margin-left:auto; color:#a6b7d0; font-size:12px; }
.landing-nav-links a { transition:color .2s; }
.landing-nav-links a:hover { color:#e6fff7; }
.landing-account { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:43px; padding:10px 15px; border:1px solid rgba(165,193,230,.2); border-radius:12px; background:#1a2940; font-size:12px; font-weight:600; white-space:nowrap; transition:background .2s,border-color .2s; }
.landing-account svg { width:17px; height:17px; color:#a8c5e5; }
.landing-account:hover { background:#24354e; border-color:rgba(165,193,230,.38); }
.landing-noscript { padding:16px; color:#efd0a0; border:1px solid #665b46; border-radius:12px; }
.landing-hero { position:relative; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:32px; min-height:630px; padding-block:78px 68px; }
.landing-hero-copy { position:relative; z-index:1; }
.landing-eyebrow { display:flex; align-items:center; gap:10px; color:#9eb8d6; font-size:10px; font-weight:700; letter-spacing:.135em; line-height:1.6; }
.landing-eyebrow-line { width:26px; height:1px; background:#83d2bf; }
.landing-hero h1 { margin:22px 0 23px; font-size:clamp(48px,5.7vw,70px); line-height:1.05; font-weight:650; letter-spacing:-.05em; }
.landing-hero h1 em { font-style:normal; color:var(--a); }
.landing-lead { max-width:440px; margin:0; color:#a7b8cf; font-size:15px; line-height:1.8; }
.landing-hero-actions { display:flex; align-items:stretch; flex-direction:column; gap:10px; max-width:365px; margin-top:30px; }
.mira-landing .landing-button { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:56px; padding:16px 20px; border:1px solid rgba(165,185,220,.2); border-radius:14px; background:#1b2a41; color:#eaf2ff; font:600 13px/1.4 "Segoe UI",Arial,sans-serif; text-align:left; transition:background .2s,border-color .2s,transform .2s; }
/* The API's older global button badges are replaced by inline icons here. */
body.mira-landing .action::before { display:none !important; content:none !important; }
.mira-landing .landing-button:hover { background:#233650; border-color:rgba(170,204,238,.4); }
.mira-landing .landing-button:active { transform:translateY(1px); }
.mira-landing .landing-button svg { width:19px; height:19px; }
.mira-landing .landing-primary { min-height:61px; border-color:#8addcc; color:#082c31; background:linear-gradient(105deg,#9de5d4,#6ccabf); box-shadow:0 5px 20px rgba(73,178,163,.08); }
.mira-landing .landing-primary:hover { background:#a1eadc; border-color:#a1eadc; }
.landing-trial-label { padding:4px 9px; background:rgba(152,188,212,.08); border:1px solid rgba(150,185,220,.1); color:#b5cae3; border-radius:7px; font-size:10px; white-space:nowrap; }
.landing-hero-note { display:flex; align-items:center; gap:7px; margin:15px 0 0; color:#7f97b8; font-size:10px; }
.landing-hero-note svg { color:#76b9a9; width:14px; height:14px; }
.landing-hero-art { position:relative; isolation:isolate; overflow:clip; display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:452px; }
.landing-hero-art::after { content:""; position:absolute; z-index:-1; inset:8% -8%; background:radial-gradient(ellipse,rgba(57,128,129,.14),transparent 70%); }
.landing-orbit { position:absolute; z-index:-1; width:410px; height:410px; border:1px solid rgba(129,182,202,.1); border-radius:50%; transform:rotate(-25deg) scaleY(.72); }
.landing-orbit-two { transform:rotate(35deg) scaleY(.9); width:430px; height:430px; border-color:rgba(129,182,202,.065); }
.landing-art-caption { color:#809bb8; font-size:8px; letter-spacing:.23em; }
.hero-visual { position:relative; display:grid; place-items:center; width:100%; min-height:135px; margin-top:5px; }
.hero-visual::before { content:"MIRA"; padding-inline:6px; font-size:clamp(75px,9.5vw,119px); font-weight:800; line-height:1; letter-spacing:-.09em; color:#a6e2d5; text-shadow:0 8px 50px rgba(78,179,162,.14); }
.landing-control-card { position:relative; width:350px; max-width:100%; padding:22px; border:1px solid rgba(160,199,226,.2); border-radius:22px; background:linear-gradient(125deg,#21384f,#1c2940 74%); box-shadow:0 28px 70px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035); transform:rotate(-3deg); }
.landing-control-heading { display:flex; align-items:center; gap:11px; }
.landing-control-icon { display:grid; place-items:center; width:43px; height:44px; border:1px solid rgba(140,211,194,.16); border-radius:12px; background:rgba(133,218,190,.08); color:var(--a); }
.landing-control-icon svg { width:21px; height:21px; }
.landing-control-heading small { display:block; margin-bottom:2px; color:#95adc7; font-size:9px; }
.landing-control-heading b { display:block; font-size:15px; font-weight:600; letter-spacing:-.015em; }
.landing-control-dot { width:7px; height:7px; margin-left:auto; background:#92dfc7; border-radius:50%; box-shadow:0 0 0 5px rgba(126,209,186,.075); }
.landing-control-channels { display:flex; align-items:center; gap:10px; margin-top:22px; border-top:1px solid rgba(160,199,226,.13); padding-top:18px; }
.landing-control-channels span { display:flex; align-items:center; justify-content:center; gap:8px; flex:1; min-width:0; padding:12px 5px; color:#bcd1e5; border:1px solid rgba(150,185,215,.15); border-radius:10px; background:rgba(14,29,47,.2); font-size:10px; }
.landing-control-channels svg { width:17px; height:17px; color:#9cceb9; }
.landing-control-channels i { color:#6d8aa4; font-size:12px; font-style:normal; }
.landing-control-items { display:flex; align-items:center; gap:16px; margin-top:16px; color:#8fa5bf; font-size:9px; }
.landing-control-items span + span::before { content:""; display:inline-block; width:3px; height:3px; margin:0 9px 2px 0; border-radius:50%; background:#607c99; }
.landing-art-tag { display:flex; align-items:center; gap:13px; position:relative; width:max-content; max-width:100%; margin:-5px -55px 0 0; padding:15px 19px; color:#d4e3f2; font-size:11px; border:1px solid rgba(166,191,231,.19); border-radius:14px; background:#1a273e; box-shadow:0 15px 30px rgba(0,0,0,.17); transform:rotate(3deg); }
.landing-art-tag svg { color:#a8c5e0; }
.landing-art-tag small { display:block; margin-top:3px; font-size:9px; color:#86a0bd; }
.landing-platforms { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; border-block:1px solid var(--line); }
.landing-platforms > span { color:#718ba9; font-size:9px; letter-spacing:.11em; }
.landing-platforms > div { display:flex; align-items:center; gap:28px; color:#94abc6; }
.landing-platforms b { font-size:13px; font-weight:550; }
.landing-platforms i { width:3px; height:3px; background:#3b526e; border-radius:50%; }
.landing-section { padding-top:90px; }
.landing-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:45px; margin-bottom:29px; }
.mira-landing h2 { margin:12px 0 0; font-size:34px; font-weight:600; line-height:1.2; letter-spacing:-.035em; }
.landing-section-heading > p { width:310px; max-width:100%; margin:0 0 3px; color:#8fa5c0; font-size:13px; line-height:1.8; }
.landing-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.landing-feature { position:relative; display:flex; align-items:flex-start; flex-direction:column; padding:26px 24px 22px; background:linear-gradient(135deg,rgba(30,47,73,.82),rgba(23,35,57,.7)); border:1px solid var(--line); border-radius:20px; }
.landing-feature-icon { display:grid; place-items:center; width:44px; height:46px; border:1px solid rgba(139,204,191,.15); border-radius:13px; background:rgba(137,205,181,.045); color:#a1d8ca; }
.landing-feature-index { position:absolute; top:32px; right:24px; font-size:10px; letter-spacing:.1em; color:#5f7999; }
.landing-feature h3 { margin:23px 0 10px; font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.4; }
.landing-feature p { margin:0 0 25px; color:#8fa6c3; font-size:12px; line-height:1.85; }
.landing-feature > a,.landing-feature-foot { display:flex; align-items:center; gap:7px; margin-top:auto; font-size:10px; color:#a5c3d9; }
.landing-feature > a { color:#a6dfce; }
.landing-feature > a:hover { color:#d0fff1; }
.landing-feature > a svg,.landing-feature-foot svg { width:14px; height:14px; }
.landing-connection { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; }
.landing-connection-intro > p,.landing-faq-intro > p { max-width:290px; margin:19px 0 24px; color:#8fa5c0; font-size:13px; line-height:1.85; }
.landing-text-link { display:inline-flex; align-items:center; justify-content:flex-start; gap:9px; border:none; padding:0; color:#a3d8cd !important; background:transparent; font-size:11px !important; }
.landing-text-link:hover { color:#d0fff1 !important; }
.landing-text-link svg { width:16px; height:16px; }
.landing-steps { margin:0; padding:0; list-style:none; }
.landing-steps li { display:flex; align-items:flex-start; gap:20px; padding:21px 0 23px; border-top:1px solid var(--line); }
.landing-steps li:last-child { border-bottom:1px solid var(--line); }
.landing-step-number { flex:none; width:28px; margin-top:2px; color:#81bcaf; font-size:12px; font-variant-numeric:tabular-nums; }
.landing-steps h3 { margin:0; color:#d8e4f4; font-size:14px; font-weight:600; line-height:1.5; }
.landing-steps p { margin:8px 0 0; color:#849dbd; font-size:11px; line-height:1.8; }
.landing-steps li > svg { width:20px; height:20px; margin-top:2px; color:#6e92af; }
.landing-faq-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; }
.landing-faq-list { border-top:1px solid var(--line); }
.landing-faq-list details { border-bottom:1px solid var(--line); }
.landing-faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px 0; color:#d4e1f3; cursor:pointer; font-size:13px; font-weight:550; list-style:none; }
.landing-faq-list summary::-webkit-details-marker { display:none; }
.landing-faq-list summary svg { width:16px; height:16px; color:#84aaa9; transition:transform .2s; }
.landing-faq-list details[open] summary { color:#b6ead8; }
.landing-faq-list details[open] summary svg { transform:rotate(45deg); }
.landing-faq-list details > div { max-width:460px; padding:0 26px 23px 0; color:#91a8c5; font-size:12px; line-height:1.9; }
.landing-final { display:flex; align-items:center; justify-content:space-between; gap:45px; position:relative; margin:85px 0 64px; padding:43px 46px; border:1px solid rgba(156,201,224,.17); border-radius:24px; background:radial-gradient(ellipse at 100% 100%,rgba(60,125,124,.14),transparent 60%),linear-gradient(120deg,#1a2d43,#1b2840 66%); }
.landing-final h2 { font-size:31px; }
.landing-final p { margin:17px 0 0; color:#94acc7; font-size:12px; }
.landing-final-actions { display:flex; flex-direction:column; flex:0 0 315px; gap:10px; }
.landing-footer { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:27px; padding-bottom:106px; }
.landing-footer > div > p { margin:10px 0 0; color:#607c9c; font-size:10px; }
.landing-footer .brand { font-size:16px; }
.landing-footer .mark { width:22px; height:22px; }
.landing-footer nav { display:flex; flex-wrap:wrap; gap:10px 25px; padding-top:5px; font-size:10px; color:#8ca3c0; }
.landing-footer nav a:hover { color:#c4dfed; }
.landing-footer-note { width:100%; padding-top:19px; border-top:1px solid rgba(176,197,236,.07); color:#58718f; font-size:9px; }
@media (max-width:1050px) {
  .landing-nav { gap:22px; }.landing-nav-links { gap:17px; font-size:11px; }
  .landing-hero { gap:20px; min-height:590px; }.landing-hero h1 { font-size:59px; }
  .landing-control-card { width:305px; padding:20px; }.landing-orbit { width:330px; height:380px; }.landing-orbit-two { width:340px; height:370px; }.landing-art-tag { margin-right:-10px; }
  .landing-connection,.landing-faq-section { gap:50px; }.landing-final { padding:35px; }.landing-final-actions { flex-basis:285px; }
}
@media (max-width:820px) {
  .landing-container { padding-inline:25px; }.landing-nav-links { display:none; }
  .landing-hero { padding-block:55px; grid-template-columns:1.15fr .85fr; gap:14px; }.landing-hero h1 { font-size:48px; }.landing-hero .landing-eyebrow { font-size:8px; letter-spacing:.08em; }.landing-hero .landing-eyebrow-line { width:16px; }.landing-lead { font-size:13px; }
  .landing-control-card { width:257px; padding:17px; }.landing-control-heading b { font-size:12px; }.landing-control-heading small { font-size:8px; }.landing-control-icon { width:35px; height:39px; }.landing-control-items { gap:8px; font-size:8px; }.landing-control-items span + span::before { margin-right:7px; }
  .landing-art-tag { padding:13px; margin-right:0; font-size:9px; gap:8px; }.landing-art-tag small { font-size:8px; }.landing-orbit,.landing-orbit-two { width:275px; height:340px; }.hero-visual { min-height:111px; }.hero-visual::before { font-size:83px; }.landing-art-caption { font-size:7px; }
  .landing-platforms { gap:18px; }.landing-platforms > span { max-width:100px; font-size:8px; }.landing-platforms > div { gap:18px; }.landing-platforms b { font-size:11px; }
  .landing-section { padding-top:65px; }.mira-landing h2 { font-size:29px; }.landing-section-heading { gap:22px; }.landing-section-heading > p { width:220px; font-size:11px; }
  .landing-features { gap:11px; }.landing-feature { padding:21px 18px; }.landing-feature h3 { font-size:15px; }.landing-feature p { font-size:11px; }.landing-feature > a,.landing-feature-foot { font-size:9px; gap:5px; }
  .landing-connection,.landing-faq-section { grid-template-columns:.8fr 1.2fr; gap:33px; }.landing-steps li { gap:12px; }.landing-steps li > svg { display:none; }
  .landing-final { padding:30px; gap:25px; }.landing-final-actions { flex-basis:260px; }.landing-final h2 { font-size:27px; }.mira-landing .landing-final .landing-button { padding-inline:15px; font-size:12px; }
}
@media (max-width:640px) {
  html { scroll-padding-top:90px; }.landing-container { padding-inline:22px; }.landing-nav { height:71px; gap:12px; }.mira-landing .brand { gap:10px; font-size:17px; }.mira-landing .mark { width:22px; height:22px; }
  .landing-account { min-height:39px; padding:9px 12px; gap:7px; border-radius:10px; font-size:10px; }.landing-account svg { width:15px; height:15px; }
  .landing-hero { grid-template-columns:1fr; min-height:0; padding-block:40px 36px; gap:12px; }.landing-hero .landing-eyebrow { font-size:8px; letter-spacing:.1em; }.landing-hero h1 { margin-top:23px; margin-bottom:20px; font-size:clamp(43px,10vw,59px); letter-spacing:-.045em; }.landing-lead { max-width:430px; font-size:13px; line-height:1.9; }
  .landing-hero-actions { max-width:none; margin-top:25px; }.mira-landing .landing-button { min-height:55px; font-size:12px; padding-inline:18px; border-radius:13px; }.mira-landing .landing-primary { min-height:59px; }.landing-hero-note { font-size:9px; }
  .landing-hero-art { min-height:390px; margin:17px auto 0; width:min(370px,100%); }.landing-art-caption { font-size:7px; }.hero-visual { min-height:113px; }.hero-visual::before { font-size:98px; }
  .landing-control-card { width:300px; padding:21px; border-radius:20px; }.landing-control-icon { width:39px; height:42px; }.landing-control-heading b { font-size:14px; }.landing-control-heading small { font-size:9px; }.landing-control-items { font-size:9px; gap:9px; }
  .landing-art-tag { margin-right:-20px; padding:14px 17px; font-size:10px; }.landing-art-tag small { font-size:8px; }.landing-orbit { width:320px; height:345px; }.landing-orbit-two { width:335px; height:370px; }
  .landing-platforms { justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:14px; padding-block:23px; }.landing-platforms > span { max-width:none; font-size:8px; }.landing-platforms > div { width:100%; justify-content:space-between; gap:10px; }.landing-platforms b { font-size:10px; }.landing-platforms i { width:2px; height:2px; }
  .landing-section { padding-top:56px; }.landing-section-heading { display:block; margin-bottom:24px; }.landing-eyebrow { font-size:8px; }.mira-landing h2 { font-size:29px; }.landing-section-heading > p { width:auto; max-width:310px; margin-top:17px; font-size:12px; }
  .landing-features { grid-template-columns:1fr; gap:12px; }.landing-feature { padding:23px; border-radius:18px; }.landing-feature-icon { width:40px; height:42px; }.landing-feature-icon svg { width:21px; height:21px; }.landing-feature h3 { margin-top:17px; font-size:17px; }.landing-feature p { max-width:420px; font-size:12px; margin-bottom:18px; }.landing-feature > a,.landing-feature-foot { font-size:10px; }
  .landing-connection,.landing-faq-section { grid-template-columns:1fr; gap:27px; }.landing-connection-intro > p,.landing-faq-intro > p { max-width:370px; margin-bottom:17px; font-size:12px; }.landing-steps li { gap:15px; padding-block:21px; }.landing-steps h3 { font-size:13px; }.landing-steps p { font-size:11px; }
  .landing-faq-intro h2 br { display:none; }.landing-faq-list summary { padding-block:20px; font-size:12px; }.landing-faq-list details > div { font-size:11px; padding-bottom:20px; }
  .landing-final { align-items:stretch; flex-direction:column; gap:27px; margin-block:55px 40px; padding:28px 23px; border-radius:21px; }.landing-final h2 { font-size:28px; }.landing-final p { max-width:250px; line-height:1.85; font-size:11px; }.landing-final-actions { flex:none; }
  .landing-footer { gap:25px; padding-bottom:112px; }.landing-footer > div { width:100%; }.landing-footer nav { gap:14px 20px; }.landing-footer .brand { font-size:16px; }
}
@media (max-width:360px) {
  .landing-container { padding-inline:17px; }.mira-landing .brand { font-size:15px; gap:7px; }.landing-account { font-size:9px; padding-inline:9px; }.landing-account svg { width:13px; height:13px; }
  .landing-hero h1 { font-size:43px; }.landing-hero .landing-eyebrow { font-size:7px; }.landing-hero-art { min-height:368px; }.landing-control-card { width:261px; padding:17px; }.landing-orbit { width:260px; height:320px; }.landing-orbit-two { width:280px; height:345px; }.landing-art-tag { margin-right:0; font-size:9px; }.landing-control-items { gap:6px; font-size:8px; }
  .mira-landing .landing-button { padding-inline:15px; font-size:11px; }.landing-trial-label { font-size:9px; padding-inline:7px; }.landing-final { padding-inline:19px; }.mira-landing .landing-final .landing-button { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.mira-landing *,.mira-landing *::before,.mira-landing *::after { transition:none !important; animation:none !important; } }