/* Ignite PC */

:root{
  --blue:#137AC8;
  --blue-dark:#0E619F;
  --orange:#FC5612;
  --text:#1F2933;
  --text-2:#52606D;
  --rule:#D9DEE3;
  --panel:#F3F5F7;
  --white:#FFFFFF;
  --bg:#FFFFFF;          /* page and card surface; --white stays white for text on coloured buttons */
  --bg-raised:#FFFFFF;
  --input-bg:#FFFFFF;
  --shadow:rgba(31,41,51,.14);
  --ok-bg:#ECFDF3; --ok-fg:#067647; --ok-line:#A6F4C5;
  --bad-bg:#FEF3F2; --bad-fg:#B42318; --bad-line:#F4B4AE;
  --info-bg:#EFF8FF; --info-fg:#175CD3; --info-line:#B2DDFF;
  --warn-bg:#FFF4E5; --warn-fg:#B54708;
  --font:'Figtree',"Segoe UI",system-ui,sans-serif;
  --wrap:1040px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:5rem }
body{ font-family:var(--font); font-size:1.0625rem; line-height:1.6; color:var(--text); background:var(--bg) }
/* Short pages: main grows to fill the window so the footer sits at the bottom instead of leaving a blank band under it. */
body{ min-height:100vh; display:flex; flex-direction:column }
main#main{ flex:1 0 auto; display:flex; flex-direction:column }
main#main > :last-child{ flex:1 0 auto }
img{ display:block; max-width:100%; height:auto }
a{ color:var(--blue) }
a:hover{ color:var(--blue-dark) }
ul{ list-style:none }
h1,h2,h3{ line-height:1.15; font-weight:700; color:var(--text) }
h2{ font-size:1.75rem; margin-bottom:1rem }
h3{ font-size:1.15rem; margin-bottom:.5rem }
:focus-visible{ outline:3px solid var(--orange); outline-offset:2px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

.wrap{ width:min(var(--wrap), 100% - var(--gutter)*2); margin-inline:auto }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:1rem; top:1rem; z-index:10; background:var(--bg); padding:.5rem 1rem; border:2px solid var(--blue) }

/* Buttons */
.btn{ display:inline-block; padding:.7rem 1.3rem; font-weight:700; font-size:1rem; border-radius:4px; text-decoration:none; border:2px solid transparent }
.btn-primary{ background:var(--blue); color:var(--white); border-color:var(--blue) }
.btn-primary:hover{ background:var(--blue-dark); border-color:var(--blue-dark); color:var(--white) }
.btn-plain{ color:var(--blue); border-color:var(--rule) }
.btn-plain:hover{ border-color:var(--blue) }

/* Header */
.site-header{ border-bottom:1px solid var(--rule); background:var(--bg) }
.header-row{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:1.5rem }
.logo img{ width:164px }
.site-nav{ display:flex; align-items:center; gap:1.4rem }
.site-nav a{ color:var(--text); text-decoration:none; font-weight:500 }
.site-nav a:hover{ color:var(--blue) }
.site-nav .nav-download{ color:var(--blue); font-weight:700 }
.menu-button{ display:none; font:inherit; font-weight:500; background:none; border:1px solid var(--rule); border-radius:4px; padding:.45rem .9rem; color:var(--text); cursor:pointer }
@media (max-width:900px){
  .menu-button{ display:block }
  .site-nav{ display:none; position:absolute; left:0; right:0; top:76px; background:var(--bg); border-bottom:1px solid var(--rule); flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--gutter) 1rem; z-index:5 }
  .site-nav.open{ display:flex }
  .site-nav a{ padding:.8rem 0; border-bottom:1px solid var(--rule); font-size:1.1rem }
  .site-nav a:last-child{ border-bottom:0 }
  .site-header{ position:relative }
  .nav-group{ border-bottom:1px solid var(--rule); padding:.4rem 0 .5rem }
  .nav-group-btn{ display:none }
  .nav-group::before{ content:attr(data-label); display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); padding:.5rem 0 .1rem }
  .nav-menu{ display:flex; flex-direction:column }
  .nav-menu a{ border-bottom:0; padding:.55rem 0 .55rem .75rem; font-size:1.05rem }
  .site-nav .nav-download, .site-nav .nav-signin{ padding:.9rem 0 }
}
/* Dropdown groups (desktop). Open on click or hover; main.js closes them on outside click and Escape. */
@media (min-width:901px){
  .nav-group{ position:relative }
  .nav-group-btn{ display:inline-flex; align-items:center; gap:.3rem; font:inherit; font-weight:500; color:var(--text); background:none; border:0; padding:.5rem 0; cursor:pointer }
  .nav-group-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s }
  .nav-group-btn:hover, .nav-group.open .nav-group-btn{ color:var(--blue) }
  .nav-group.open .nav-group-btn svg{ transform:rotate(180deg) }
  .nav-menu{ display:none; position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%); min-width:11.5rem; background:var(--bg-raised); border:1px solid var(--rule); border-radius:10px; box-shadow:0 10px 30px var(--shadow); padding:.4rem; z-index:20; flex-direction:column }
  .nav-group.open .nav-menu{ display:flex }
  .nav-menu::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px }
  .nav-menu a{ display:block; padding:.55rem .8rem; border-radius:6px; white-space:nowrap; font-size:.95rem }
  .nav-menu a:hover{ background:var(--bg); color:var(--blue) }
  .nav-account .nav-group-btn{ font-weight:600 }
  .nav-account .nav-menu{ left:auto; right:0; transform:none }
  .nav-account .nav-menu a:last-child{ border-top:1px solid var(--rule); border-radius:0 0 6px 6px; margin-top:.25rem; padding-top:.65rem }
}

/* Hero */
.hero{ padding:clamp(3rem,7vw,5.5rem) 0 }
.hero-row{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:clamp(2rem,6vw,5rem); align-items:start }
.hero h1{ font-size:clamp(2rem,1.2rem + 3vw,3.25rem); letter-spacing:-.015em; margin-bottom:1.25rem; max-width:18ch }
.hero p{ font-size:1.15rem; color:var(--text-2); max-width:52ch }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem }
.facts{ border-top:3px solid var(--orange); padding-top:1.25rem; margin-top:.5rem }
.facts > div{ display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--rule) }
.facts dt{ color:var(--text-2) }
.facts dd{ font-weight:500 }
@media (max-width:820px){ .hero-row{ grid-template-columns:1fr } }

/* Features */
.features{ background:var(--blue); color:var(--white); padding:clamp(3rem,6vw,4.5rem) 0 }
.features h2, .features h3{ color:var(--white) }
.features h2{ margin-bottom:2rem }
.feature-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem }
.feature-columns p{ color:rgba(255,255,255,.88); margin-bottom:1rem }
.feature-columns ul{ border-top:1px solid rgba(255,255,255,.35) }
.feature-columns li{ padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:.97rem }
.features-note{ margin-top:2rem; font-size:.9rem; color:rgba(255,255,255,.8) }
@media (max-width:820px){ .feature-columns{ grid-template-columns:1fr; gap:2rem } }

/* Editions */
.editions{ padding:clamp(3rem,6vw,4.5rem) 0 }
.section-intro{ color:var(--text-2); max-width:62ch; margin-bottom:2rem }
.table-scroll{ overflow-x:auto }
.edition-table{ width:100%; border-collapse:collapse; min-width:640px }
.edition-table th, .edition-table td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top }
.edition-table thead th{ font-size:1.05rem; border-bottom:2px solid var(--text) }
.edition-table tbody th{ font-weight:500; color:var(--text-2); width:9rem }
.edition-table tbody tr:nth-child(even){ background:var(--panel) }

/* FAQ */
.faq{ border-top:1px solid var(--rule); padding:clamp(3rem,6vw,4.5rem) 0 }
.faq-row{ display:grid; grid-template-columns:1fr 2fr; gap:2rem }
.faq-list > div + div{ margin-top:1.75rem }
.faq-list p{ color:var(--text-2); max-width:60ch }
@media (max-width:720px){ .faq-row{ grid-template-columns:1fr; gap:1rem } }

/* Download */
.download{ background:var(--panel); padding:clamp(2.5rem,5vw,3.5rem) 0 }
.download p{ color:var(--text-2); max-width:60ch; margin-bottom:1.25rem }

/* Footer */
.site-footer{ border-top:1px solid var(--rule); padding:1.5rem 0; font-size:.9rem; color:var(--text-2) }
.footer-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.footer-row p{ flex:1 }

/* Account, sign-in and admin pages */
.auth{ padding:clamp(2.5rem,6vw,4.5rem) 0; background:var(--panel) }
.auth-wrap{ max-width:440px }
.card{ background:var(--bg-raised); border:1px solid var(--rule); border-radius:6px; padding:1.75rem; margin-bottom:1.5rem }
.card h1{ font-size:1.6rem; margin-bottom:.35rem }
.card h2{ font-size:1.2rem; margin-bottom:1rem }
.card h3{ margin-top:1.5rem }
.muted{ color:var(--text-2) }
.hint{ font-size:.9rem; color:var(--text-2); margin:.5rem 0 1rem }
.form{ margin-top:1.25rem }
.form label{ display:block; font-weight:500; margin:.9rem 0 .35rem }
.form input, .search-form input, select{ width:100%; font:inherit; padding:.6rem .75rem; border:1px solid var(--rule); border-radius:4px; background:var(--input-bg); color:var(--text) }
.form input:focus, select:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(19,122,200,.15) }
select{ width:auto }
.btn-block{ display:block; width:100%; margin-top:1.25rem; text-align:center; cursor:pointer; font:inherit; font-weight:700 }
.btn-small{ padding:.35rem .75rem; font-size:.9rem; cursor:pointer; font:inherit; font-weight:500; background:var(--bg-raised); color:var(--blue); border-color:var(--rule) }
.btn-small:hover{ border-color:var(--blue) }
.btn-primary.btn-small{ background:var(--blue); color:var(--white); border-color:var(--blue); font-weight:700 }
.btn-primary.btn-small:hover{ background:var(--blue-dark); border-color:var(--blue-dark) }
.btn-danger{ color:var(--bad-fg); border-color:var(--bad-line); background:var(--bg-raised); cursor:pointer; font:inherit; font-weight:500; padding:.5rem 1rem }
.btn-danger:hover{ background:var(--bad-bg); border-color:var(--bad-fg) }
.form-foot{ margin-top:1.25rem; font-size:.95rem; color:var(--text-2) }
.alert{ padding:.75rem 1rem; border-radius:4px; margin:1rem 0; font-size:.95rem }
.alert-error{ background:var(--bad-bg); color:var(--bad-fg); border:1px solid var(--bad-line) }
.alert-success{ background:var(--ok-bg); color:var(--ok-fg); border:1px solid var(--ok-line) }
.alert-info{ background:var(--info-bg); color:var(--info-fg); border:1px solid var(--info-line) }

.account, .admin{ padding:clamp(2rem,5vw,3.5rem) 0 }
.account h1, .admin h1{ font-size:1.9rem; margin-bottom:1.5rem }
.account-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
@media (max-width:820px){ .account-grid{ grid-template-columns:1fr } }
.card .facts{ border-top:0; padding-top:0; margin-top:0 }

.data-table{ width:100%; border-collapse:collapse; font-size:.95rem }
.data-table th, .data-table td{ padding:.6rem .75rem; text-align:left; border-bottom:1px solid var(--rule); vertical-align:middle }
.data-table thead th{ font-weight:700; border-bottom:2px solid var(--text) }
.data-table code{ font-size:.85rem; background:var(--panel); padding:.1rem .35rem; border-radius:3px }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin-bottom:1.5rem }
.stat{ background:var(--bg-raised); border:1px solid var(--rule); border-radius:6px; padding:1rem; display:flex; flex-direction:column; gap:.2rem; color:var(--text-2); font-size:.9rem }
.stat-num{ font-size:1.6rem; font-weight:700; color:var(--text) }
.stat-tier{ border-top:3px solid var(--orange) }
.search-form{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem }
.search-form input{ flex:1; min-width:200px }
.inline-form{ display:inline-flex; gap:.5rem; align-items:center; margin:.25rem 0 }
.detail-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem }
.detail-head .muted{ font-weight:400; font-size:1rem }
.pager{ margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap }

/* Licenses */
.gen-form{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; margin-bottom:1.25rem }
.gen-form label{ display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; font-weight:500 }
.gen-form .grow{ flex:1; min-width:200px }
.gen-form input, .gen-form select{ width:100%; font:inherit; padding:.55rem .7rem; border:1px solid var(--rule); border-radius:4px }
.gen-form .btn{ cursor:pointer; font:inherit }
.keys{ font-family:ui-monospace,Consolas,monospace; font-size:1.05rem; line-height:1.7; margin:.5rem 0 0; user-select:all }
.spaced{ margin-top:1.75rem }
.redeem-form{ display:flex; gap:.5rem; margin-top:.75rem }
.redeem-form input{ flex:1; font-family:ui-monospace,Consolas,monospace }
.redeem-form .btn{ cursor:pointer; font:inherit; font-weight:700 }
.badge{ display:inline-block; font-size:.75rem; font-weight:700; padding:.15rem .5rem; border-radius:3px; background:var(--bad-bg); color:var(--bad-fg); margin:0 .5rem 0 .25rem; vertical-align:middle }

/* Platform pages */
.admin-nav{ display:flex; gap:.25rem; flex-wrap:wrap; margin:-.5rem 0 1.5rem; border-bottom:2px solid var(--rule); font-size:.95rem }
.admin-nav a, .admin-nav strong{ display:inline-block; padding:.65rem 1rem; margin-bottom:-2px; border-bottom:2px solid transparent; border-radius:4px 4px 0 0; color:var(--text-2); font-weight:500; text-decoration:none }
.admin-nav a:hover{ color:var(--text); background:var(--panel) }
.admin-nav strong{ color:var(--blue); border-bottom-color:var(--blue) }
.badge-trial{ background:var(--warn-bg); color:var(--warn-fg) }
.score{ font-weight:700 }
.score.good{ color:var(--ok-fg) } .score.fair{ color:var(--warn-fg) } .score.poor{ color:var(--bad-fg) }
.news-wrap{ max-width:760px }
.news-body{ line-height:1.7; white-space:normal }
.form textarea{ width:100%; font:inherit; padding:.6rem .75rem; border:1px solid var(--rule); border-radius:4px; background:var(--input-bg); color:var(--text) }
.form textarea.code, pre.code{ font-family:ui-monospace,Consolas,monospace; font-size:.85rem; line-height:1.5 }
pre.code{ background:var(--panel); padding:1rem; border-radius:4px; overflow:auto; max-height:420px; white-space:pre-wrap; word-break:break-word }
details summary{ cursor:pointer; color:var(--blue); margin:.5rem 0 }
.form label input[type=checkbox]{ width:auto; margin-right:.4rem }

/* ---------- shop ---------- */
.price-cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.75rem; margin-top:1.25rem }
@media (max-width:900px){ .price-cards{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:520px){ .price-cards{ grid-template-columns:1fr } }
.price-card{ background:var(--bg-raised); border:1px solid var(--rule); border-radius:6px; padding:1rem 1.1rem; display:flex; flex-direction:column; font-size:.88rem }
.price-card.featured{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(19,122,200,.12) }
.price-card h3{ margin:0; font-size:1rem }
.price-card .price{ font-size:1.45rem; font-weight:700; margin:.1rem 0 0; line-height:1.2 }
.price-card .muted{ margin:.15rem 0 0; font-size:.82rem; line-height:1.35 }
.price-card ul{ padding-left:1rem; margin:.7rem 0 .9rem; flex:1; color:var(--text-2); line-height:1.35 }
.price-card li{ margin:.25rem 0 }
.price-card .btn{ align-self:flex-start; padding:.45rem .9rem; font-size:.9rem }
.price-card .small{ margin:.5rem 0 0; font-size:.78rem; line-height:1.3 }
.editions-note{ margin-top:1rem; font-size:.9rem; color:var(--text-2) }
.small{ font-size:.85rem }
.checkout h1{ margin-bottom:1rem }
.checkout-grid{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(280px, 1fr); gap:1.5rem; align-items:start }
@media (max-width:820px){ .checkout-grid{ grid-template-columns:1fr } }
.field{ display:block; margin:.75rem 0 }
.field > span{ display:block; font-weight:500; margin-bottom:.35rem }
.field input, .field select{ width:100%; font:inherit; padding:.65rem .75rem; border:1px solid var(--rule); border-radius:4px; background:var(--input-bg); color:var(--text) }
.field input:focus, .field select:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(19,122,200,.15) }
.field small{ display:block; margin-top:.3rem }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field-row .field-wide{ grid-column:1 / -1 }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr } }
.check{ display:flex; gap:.6rem; align-items:flex-start; margin:.9rem 0; font-size:.95rem; line-height:1.4 }
.check input{ margin-top:.2rem; width:1.1rem; height:1.1rem; flex:none }
.check-strong{ font-weight:600 }
.biz-fields[hidden]{ display:none }
.legal-note{ font-size:.88rem; color:var(--text-2); line-height:1.5; border-top:1px solid var(--rule); padding-top:1rem; margin-top:1.25rem }
.checkout-summary .product-name{ font-size:1.2rem; font-weight:700; margin:.25rem 0 0 }
.product-points{ padding-left:1.1rem; color:var(--text-2); font-size:.95rem }
.totals{ margin:1rem 0 }
.totals div{ display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--rule) }
.totals .grand{ font-size:1.25rem; font-weight:700; border-bottom:none }
.totals dd{ margin:0 }
.btn-buy{ background:var(--orange, #FC5612); border-color:var(--orange, #FC5612); font-size:1.05rem; padding:.9rem 1rem; cursor:pointer; font-family:inherit }
.btn-buy[disabled]{ opacity:.5; cursor:not-allowed }
.secure{ font-size:.85rem; color:var(--text-2); text-align:center; margin-top:.75rem }
.upgrade-box{ background:var(--panel); border-radius:6px; padding:.9rem 1rem; margin-top:1.25rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap }
.legal-wrap{ max-width:760px }
.legal h1{ margin-bottom:.5rem }
.legal h2{ margin-top:2rem; font-size:1.25rem }
.legal h3{ margin-top:1.25rem; font-size:1.05rem }
.legal p{ line-height:1.6 }
.footer-links{ display:flex; gap:1.25rem; flex-wrap:wrap }
.badge-paid{ background:var(--ok-bg); color:var(--ok-fg) }
.badge-pending{ background:var(--warn-bg); color:var(--warn-fg) }
.badge-cancelled, .badge-refunded{ background:var(--bad-bg); color:var(--bad-fg) }
.admin-filter{ display:flex; gap:1rem; margin:-.25rem 0 1rem; font-size:.95rem }
.admin-filter a.current{ font-weight:700; color:var(--text) }
.small-input{ width:9rem; font:inherit; padding:.35rem .5rem; border:1px solid var(--rule); border-radius:4px }
.price-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 1.25rem }
.settings-form .card h2{ margin-top:0 }

/* ---------- release landing ---------- */
.hero-sub{ font-size:.92rem; color:var(--text-2); margin-top:1rem }
.section-intro.light{ color:rgba(255,255,255,.88) }
.feature-columns.four{ grid-template-columns:repeat(4,1fr); gap:1.75rem }
@media (max-width:1000px){ .feature-columns.four{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .feature-columns.four{ grid-template-columns:1fr } }
.feature-columns.four li{ font-size:.92rem; padding:.4rem 0 }
.download-meta{ margin-top:1rem; font-size:.9rem; color:var(--text-2) }
.download-notes{ margin-top:.75rem; font-size:.95rem; color:var(--text-2); max-width:60ch; margin-left:auto; margin-right:auto }

/* ---------- collapsible FAQ, features page ---------- */
.faq-list > div + div{ margin-top:0 }
.faq-item{ border-bottom:1px solid var(--rule) }
.faq-item summary{ cursor:pointer; list-style:none; padding:.9rem 2rem .9rem 0; font-weight:700; position:relative }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{ content:"+"; position:absolute; right:.25rem; top:.75rem; font-size:1.3rem; color:var(--blue); line-height:1 }
.faq-item[open] summary::after{ content:"–" }
.faq-item p{ margin:0 0 1rem; color:var(--text-2); max-width:60ch }
.features-cta{ margin-top:1.75rem }
.btn-light{ background:var(--white); color:var(--blue); border-color:var(--white) }
.features-page h1{ margin-bottom:.5rem }
.feature-group{ margin:2.25rem 0 .9rem; font-size:1.3rem }
.feature-group .muted{ font-size:.95rem; font-weight:400; margin-left:.5rem }
.feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.9rem }
@media (max-width:900px){ .feature-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr } }
.feature-card{ background:var(--bg-raised); border:1px solid var(--rule); border-radius:6px; padding:1rem 1.1rem }
.feature-card h3{ margin:0 0 .35rem; font-size:1rem }
.feature-card p{ margin:0; font-size:.9rem; color:var(--text-2); line-height:1.45 }
.pro-tag{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); border:1px solid var(--blue); border-radius:3px; padding:.05rem .35rem; vertical-align:middle; margin-left:.25rem }
.features-foot{ margin-top:2.5rem; display:flex; gap:.75rem; flex-wrap:wrap }

/* ---------- release polish: hero screenshot, strip, soft features, screens, comparison, about ---------- */
.btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; line-height:1.2 }
.site-nav a{ padding:.5rem 0 }
.hero{ padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem) }
.hero-row{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center; gap:clamp(1.5rem,4vw,3.5rem) }
.hero h1{ font-size:clamp(1.9rem,1.1rem + 2.6vw,2.9rem); max-width:16ch }
.hero p{ font-size:1.1rem }
.hero-shot{ margin:0; border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:#1E1E22; box-shadow:0 12px 32px var(--shadow) }
.hero-shot img{ width:100%; height:auto }
.hero-shot figcaption{ font-size:.82rem; color:var(--text-2); padding:.5rem .9rem; background:var(--bg-raised); border-top:1px solid var(--rule) }
@media (max-width:820px){ .hero-row{ grid-template-columns:1fr } .hero-shot{ order:2 } }
.strip{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--panel) }
.strip-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 1.5rem }
.strip-row > div{ padding:.9rem 0; display:flex; flex-direction:column; gap:.1rem; font-size:.95rem }
.strip-row span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); font-weight:500 }
.strip-row strong{ font-weight:500; color:var(--text) }
@media (max-width:900px){ .strip-row{ grid-template-columns:repeat(2,1fr) } .strip-row > div{ padding:.7rem 0 } }
@media (max-width:480px){ .strip-row{ grid-template-columns:1fr } }

.features{ background:var(--bg); color:var(--text); border-bottom:1px solid var(--rule) }
.features h2, .features h3{ color:var(--text) }
.features h2{ margin-bottom:.5rem }
.section-intro.light{ color:var(--text-2) }
.feature-columns.four{ gap:1rem }
.feature-columns.four > div{ background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:1.1rem 1.2rem 1rem }
.feature-columns.four h3{ display:flex; align-items:center; gap:.55rem; font-size:1.05rem; margin-bottom:.4rem }
.feature-icon{ width:30px; height:30px; flex:none; border-radius:6px; background:var(--bg-raised); border:1px solid var(--rule); display:inline-flex; align-items:center; justify-content:center; color:var(--blue) }
.feature-icon svg{ width:18px; height:18px }
.feature-columns.four ul{ border-top:0 }
.feature-columns.four li{ border-bottom:0; padding:.2rem 0; color:var(--text-2) }
.features-cta{ margin-top:1.5rem; display:flex; gap:.75rem; flex-wrap:wrap; align-items:center }
.btn-light{ background:var(--white); color:var(--blue); border-color:var(--rule) }
.btn-light:hover{ border-color:var(--blue) }

.screens{ padding:clamp(3rem,6vw,4.5rem) 0; background:var(--panel) }
.screens h2{ margin-bottom:.5rem }
.screen-row{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.25rem,4vw,3rem); align-items:center; margin-top:2.25rem }
.screen-row.flip .screen-text{ order:-1 }
.screen-row figure{ margin:0; border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:#1E1E22; box-shadow:0 8px 24px var(--shadow) }
.screen-text h3{ font-size:1.25rem; margin-bottom:.5rem }
.screen-text p{ color:var(--text-2); margin-bottom:.6rem }
.screen-text .tier-tag{ margin-left:0 }
@media (max-width:820px){ .screen-row{ grid-template-columns:1fr; margin-top:2rem } .screen-row.flip .screen-text{ order:0 } }

.tier-tag{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:3px; padding:.08rem .4rem; vertical-align:middle; margin-left:.3rem; border:1px solid currentColor; white-space:nowrap }
.tier-pro{ color:var(--blue) }
.tier-ent{ color:#5B2A86 }
.tier-plus{ color:#B4480E }

.price-card{ padding:1.1rem 1.2rem 1.2rem }
.price-card .audience{ margin:.35rem 0 0; font-size:.86rem; color:var(--text-2); line-height:1.4; min-height:2.4em }
.price-card .who{ margin:.4rem 0 0; font-size:.82rem; font-weight:500 }
.price-card ul{ margin:.75rem 0 1rem }
.card-foot{ margin-top:auto; display:flex; flex-direction:column; gap:.45rem; align-items:flex-start }
.card-foot .btn{ width:100%; padding:.55rem .9rem; font-size:.92rem }
.card-foot .small{ margin:0 }
.price-cards .btn-plain.btn-small{ font-weight:700 }
.licence-notes{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.5rem; border:1px solid var(--rule); border-radius:8px; padding:1.1rem 1.25rem; background:var(--panel) }
.licence-notes h3{ font-size:.95rem; margin-bottom:.25rem }
.licence-notes p{ font-size:.88rem; color:var(--text-2); line-height:1.45 }
@media (max-width:900px){ .licence-notes{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .licence-notes{ grid-template-columns:1fr } }
.compare{ margin-top:2rem }
.compare summary{ font-weight:700; color:var(--text); font-size:1.05rem; cursor:pointer; padding:.6rem 0; list-style:none; display:flex; align-items:center; gap:.5rem }
.compare summary::-webkit-details-marker{ display:none }
.compare summary::before{ content:""; width:.5rem; height:.5rem; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(-45deg); transition:transform .15s }
.compare[open] summary::before{ transform:rotate(45deg) }
.compare-table{ width:100%; border-collapse:collapse; font-size:.92rem; margin-top:.5rem }
.compare-table th, .compare-table td{ padding:.6rem .75rem; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top }
.compare-table thead th{ border-bottom:2px solid var(--text); font-size:.95rem }
.compare-table thead th:not(:first-child), .compare-table td:not(:first-child){ text-align:center; width:15% }
.compare-table tbody th{ font-weight:500; color:var(--text) }
.compare-table .yes{ color:var(--ok-fg); font-weight:700 }
.compare-table .no{ color:var(--rule) }
.compare-table .group th{ background:var(--panel); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); padding:.45rem .75rem }
@media (max-width:720px){
  .compare-table thead{ position:absolute; left:-9999px }
  .compare-table tr{ display:block; border-bottom:1px solid var(--rule); padding:.5rem 0 }
  .compare-table tr.group{ padding:0 }
  .compare-table tbody th{ display:block; padding:.3rem 0 .2rem; border:0 }
  .compare-table td{ display:flex; justify-content:space-between; gap:1rem; padding:.2rem 0; border:0; width:auto; text-align:right }
  .compare-table thead th:not(:first-child), .compare-table td:not(:first-child){ width:auto; text-align:right }
  .compare-table td::before{ content:attr(data-label); color:var(--text-2); text-align:left }
  .compare-table .no::after{ content:"\2013"; }
}

.about{ padding:clamp(3rem,6vw,4.5rem) 0; border-top:1px solid var(--rule) }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem }
.about p{ color:var(--text-2); max-width:52ch; margin-bottom:.9rem }
.about .contact-box{ background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:1.1rem 1.25rem; margin-top:.5rem }
.about .contact-box strong{ display:block; margin-bottom:.25rem }
.about .contact-box a.email{ font-size:1.1rem; font-weight:700; word-break:break-all }
.about .links{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.95rem }
.about .links a{ padding:.3rem 0; display:inline-block }
.about address{ font-style:normal; color:var(--text-2); font-size:.95rem; line-height:1.5; margin-top:.5rem }
@media (max-width:720px){ .about-grid{ grid-template-columns:1fr; gap:2rem } }
.faq-aside{ font-size:.95rem; color:var(--text-2); margin-top:.25rem }
.faq-item summary:focus-visible{ outline-offset:-3px }
.faq-item summary{ padding-right:2.25rem }

/* download button glyph */
.btn-download{ gap:.6rem }
.btn-icon{ width:1.15em; height:1.15em; flex:none; fill:currentColor }

/* checkout code field, coupons admin */
.code-row{ display:flex; gap:.5rem }
.code-row input{ flex:1 }
.code-row .btn{ flex:none; align-self:stretch }
.code-ok{ color:var(--ok-fg) }
.code-bad{ color:var(--bad-fg) }
.admin-filter{ align-items:center; flex-wrap:wrap }
.coupon-form .field-row{ grid-template-columns:repeat(3,1fr) }
@media (max-width:720px){ .coupon-form .field-row{ grid-template-columns:1fr } }
.badge-affiliate{ background:#EEE4FA; color:#5B2A86 }
.badge-coupon{ background:#E6F2FB; color:#0E619F }
.badge-off{ background:#EEF0F2; color:#52606D }

/* admin user modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(31,41,51,.55); z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:2rem var(--gutter); overflow-y:auto }
.modal{ width:min(900px,100%); max-height:calc(100vh - 4rem); overflow-y:auto; margin:0; box-shadow:0 20px 60px rgba(0,0,0,.35) }
.modal .detail-head{ position:sticky; top:-1.75rem; background:var(--bg-raised); padding:1.75rem 0 .75rem; margin-top:-1.75rem; z-index:1; border-bottom:1px solid var(--rule); margin-bottom:1rem }
.modal-close{ font-size:1.6rem; line-height:1; text-decoration:none; color:var(--text-2); padding:.25rem .5rem }
.modal-close:hover{ color:var(--text) }
body.modal-open{ overflow:hidden }
.danger-zone{ margin-top:1.75rem; border:1px solid var(--bad-line); border-radius:6px; padding:1rem 1.25rem; background:var(--bad-bg) }
.danger-zone h3{ margin:0 0 .35rem; color:var(--bad-fg) }
@media (max-width:720px){ .modal-backdrop{ padding:.75rem } .modal{ max-height:calc(100vh - 1.5rem) } }

/* two-factor card */
.tfa-steps{ padding-left:1.25rem; margin:.75rem 0 1rem; color:var(--text-2) }
.tfa-steps li{ margin:.4rem 0 }
.tfa-qr{ display:inline-block; padding:8px; background:#fff; border:1px solid var(--rule); border-radius:6px; margin:.5rem 0 .25rem; vertical-align:top }
.tfa-qr img, .tfa-qr canvas{ display:block }
.tfa-key{ display:block; margin:.35rem 0; font-size:.95rem; background:var(--panel); padding:.35rem .5rem; border-radius:4px; width:max-content; max-width:100% }
.recovery-codes{ background:var(--panel); padding:.75rem 1rem; border-radius:6px; margin:.5rem 0 }

/* ---------- polish pass: hero actions, assurance section, lightbox, plan cards, refund note ---------- */
.hero-actions .btn{ flex:1 1 auto; min-width:12rem }
@media (min-width:600px){ .hero-actions .btn{ flex:0 1 auto } }
.hero-sub strong{ color:var(--text); font-weight:700 }
.assurance{ padding:clamp(2.5rem,5vw,3.5rem) 0; border-bottom:1px solid var(--rule) }
.assurance h2{ margin-bottom:1.25rem }
.assurance-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.assurance-grid h3{ font-size:1.02rem; margin-bottom:.35rem }
.assurance-grid p{ color:var(--text-2); font-size:.95rem; line-height:1.5 }
@media (max-width:820px){ .assurance-grid{ grid-template-columns:1fr; gap:1.25rem } }

.shot{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; font:inherit; position:relative }
.shot img{ width:100%; height:auto; display:block }
.shot::after{ content:"Enlarge"; position:absolute; right:.6rem; bottom:.6rem; font-size:.75rem; font-weight:700; letter-spacing:.03em; color:var(--white); background:rgba(31,41,51,.75); padding:.25rem .55rem; border-radius:3px; opacity:0; transition:opacity .15s }
.shot:hover::after, .shot:focus-visible::after{ opacity:1 }
.shot:focus-visible{ outline:3px solid var(--orange); outline-offset:-3px }
.lightbox{ border:0; padding:0; background:transparent; max-width:min(96vw, 1240px); max-height:96vh; margin:auto; overflow:visible }
.lightbox::backdrop{ background:rgba(15,20,26,.86) }
.lightbox img{ max-width:min(96vw, 1240px); max-height:calc(96vh - 3.5rem); width:auto; height:auto; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#1E1E22 }
.lightbox-caption{ color:rgba(255,255,255,.85); font-size:.9rem; text-align:center; padding:.6rem .5rem 0; margin:0 }
.lightbox-caption:empty{ display:none }
.lightbox-close{ position:absolute; top:-2.6rem; right:0; width:2.25rem; height:2.25rem; border-radius:50%; border:2px solid rgba(255,255,255,.6); background:rgba(31,41,51,.7); color:var(--white); font-size:1.5rem; line-height:1; cursor:pointer; font-family:inherit }
.lightbox-close:hover{ background:var(--white); color:var(--text) }
.lightbox-close:focus-visible{ outline:3px solid var(--orange); outline-offset:2px }
@media (max-width:600px){ .lightbox-close{ top:auto; bottom:-3rem; right:calc(50% - 1.125rem) } }

.price-card .price{ font-size:1.7rem; display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap }
.price-card .price-cur{ font-size:.78rem; font-weight:500; color:var(--text-2); letter-spacing:.04em }
.plan-meta{ margin:.6rem 0 0; display:grid; gap:.3rem; font-size:.84rem; border-top:1px solid var(--rule); padding-top:.6rem }
.plan-meta > div{ display:flex; justify-content:space-between; gap:.75rem }
.plan-meta dt{ color:var(--text-2) }
.plan-meta dd{ margin:0; font-weight:700; text-align:right }
.price-card .audience{ min-height:0; margin:.6rem 0 0 }
.price-card ul{ margin:.6rem 0 1rem }
.refund-note{ margin:-1rem 0 1.25rem; font-size:.95rem; color:var(--text-2); background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:6px; padding:.6rem .9rem; display:inline-block }
.refund-note strong{ color:var(--ok-fg) }


/* ---------- Dark theme ----------
   Chosen with the header toggle (stored in localStorage) or inherited from the OS. The <html> element carries
   data-theme; a tiny inline script in <head> sets it before paint so there is no flash. */
:root[data-theme="dark"]{
  --text:#E6E8EB;
  --text-2:#A3ABB5;
  --rule:#2E3238;
  --panel:#1A1C20;
  --bg:#121417;
  --bg-raised:#1E2126;
  --input-bg:#15181C;
  --blue:#4FA3E8;
  --blue-dark:#7BBCF0;
  --shadow:rgba(0,0,0,.5);
  --ok-bg:rgba(6,118,71,.18); --ok-fg:#5CCB8A; --ok-line:rgba(92,203,138,.35);
  --bad-bg:rgba(180,35,24,.18); --bad-fg:#F38B80; --bad-line:rgba(243,139,128,.35);
  --info-bg:rgba(23,92,211,.18); --info-fg:#8AB8F5; --info-line:rgba(138,184,245,.35);
  --warn-bg:rgba(181,71,8,.2); --warn-fg:#F2A85C;
  color-scheme:dark;
}
:root[data-theme="dark"] .btn-primary{ color:#0B1420 }
:root[data-theme="dark"] .btn-primary:hover{ color:#0B1420 }
:root[data-theme="dark"] .features{ background:var(--panel) }
:root[data-theme="dark"] .logo img{ filter:brightness(1.08) }
:root[data-theme="dark"] .tfa-qr{ background:#fff }
:root[data-theme="dark"] .tier-ent{ color:#C9A6F2 } :root[data-theme="dark"] .tier-plus{ color:#F2A85C }
:root[data-theme="dark"] .badge-affiliate{ background:rgba(91,42,134,.3); color:#C9A6F2 }
:root[data-theme="dark"] .badge-coupon{ background:rgba(14,97,159,.3); color:#8AB8F5 }
:root[data-theme="dark"] .badge-off{ background:var(--panel); color:var(--text-2) }
:root[data-theme="dark"] .data-table th{ background:var(--panel) }

/* Header toggle */
.theme-toggle{ margin-left:.5rem; width:2.25rem; height:2.25rem; border-radius:50%; border:1px solid var(--rule); background:var(--bg-raised); color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font:inherit; flex:none }
.theme-toggle:hover{ color:var(--text); border-color:var(--text-2) }
.theme-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.theme-toggle .sun{ display:none } .theme-toggle .moon{ display:block }
:root[data-theme="dark"] .theme-toggle .sun{ display:block } :root[data-theme="dark"] .theme-toggle .moon{ display:none }
@media (max-width:820px){ .theme-toggle{ margin-left:auto; margin-right:.5rem } }


/* ---------- Blog ---------- */
.blog .lede, .post .lede{ color:var(--text-2); font-size:1.1rem; max-width:40rem; margin-bottom:1.75rem }
.crumbs{ font-size:.9rem; margin:1.5rem 0 .5rem }
.blog{ padding:1rem 0 3rem }
.blog h1{ margin-top:1.5rem }
.blog-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:1.25rem }
.blog-card{ display:flex; flex-direction:column; background:var(--bg-raised); border:1px solid var(--rule); border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s }
.blog-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px var(--shadow); color:inherit }
.blog-card-img{ width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--panel) }
.blog-card-placeholder{ background:linear-gradient(135deg, var(--panel), var(--rule)) }
.blog-card-text{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem }
.blog-card h2{ font-size:1.2rem; margin:0 }
.blog-card p{ color:var(--text-2); font-size:.95rem }
.read-more{ margin-top:auto; color:var(--blue); font-weight:700; font-size:.95rem }
.post-meta{ color:var(--text-2); font-size:.9rem; margin:0 }
.post{ padding:0 0 3rem }
.post-wrap{ max-width:46rem }
.post h1{ font-size:clamp(1.9rem, 4vw, 2.6rem); margin:.25rem 0 .5rem }
.post-cover{ margin:1.5rem 0; border-radius:8px; overflow:hidden; border:1px solid var(--rule) }
.post-body{ margin-top:1.5rem; font-size:1.0625rem; overflow-wrap:break-word }
.post-body > *{ margin-bottom:1.1rem }
.post-body h2{ font-size:1.5rem; margin-top:2rem }
.post-body h3{ font-size:1.25rem; margin-top:1.5rem }
.post-body h4{ font-size:1.05rem; margin-top:1.25rem }
.post-body ul{ list-style:disc; padding-left:1.5rem } .post-body ol{ padding-left:1.5rem }
.post-body li{ margin-bottom:.3rem }
.post-body img{ border-radius:6px; margin:1.25rem auto }
.post-body blockquote{ border-left:4px solid var(--orange); padding:.25rem 0 .25rem 1rem; color:var(--text-2); font-style:italic }
.post-body pre, .post-body .ql-syntax{ background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:1rem; overflow:auto; font-size:.9rem; white-space:pre-wrap }
.post-body code{ background:var(--panel); padding:.1rem .35rem; border-radius:3px; font-size:.92em }
.post-body a{ text-decoration:underline }
.post-body .ql-align-center{ text-align:center } .post-body .ql-align-right{ text-align:right } .post-body .ql-align-justify{ text-align:justify }
.post-body .ql-indent-1{ padding-left:2rem } .post-body .ql-indent-2{ padding-left:4rem }
.post-foot{ margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--rule) }

/* ---------- Editor (admin) ---------- */
.editor-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem }
.editor-head h2{ margin-bottom:0 }
.editor-head p{ margin:0 }
.editor-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width:720px){ .editor-row{ grid-template-columns:1fr } }
.with-button{ display:flex; gap:.5rem; align-items:stretch }
.with-button input{ flex:1 }
.editor-wrap{ border:1px solid var(--rule); border-radius:4px; background:var(--input-bg); margin-bottom:.5rem }
.editor-wrap .ql-toolbar.ql-snow{ border:0; border-bottom:1px solid var(--rule); background:var(--panel); border-radius:4px 4px 0 0 }
.editor-wrap .ql-container.ql-snow{ border:0; font-family:var(--font); font-size:1.0625rem }
.editor-wrap .ql-editor{ min-height:22rem; max-height:60vh; overflow:auto; color:var(--text) }
.editor-wrap .ql-editor.ql-blank::before{ color:var(--text-2) }
.editor-wrap .ql-editor img{ max-width:100%; height:auto }
:root[data-theme="dark"] .ql-snow .ql-stroke{ stroke:var(--text-2) }
:root[data-theme="dark"] .ql-snow .ql-fill{ fill:var(--text-2) }
:root[data-theme="dark"] .ql-snow .ql-picker{ color:var(--text-2) }
:root[data-theme="dark"] .ql-snow .ql-picker-options{ background:var(--bg-raised); border-color:var(--rule) }
:root[data-theme="dark"] .ql-snow .ql-tooltip{ background:var(--bg-raised); color:var(--text); border-color:var(--rule); box-shadow:0 8px 24px var(--shadow) }
:root[data-theme="dark"] .ql-snow .ql-tooltip input[type=text]{ background:var(--input-bg); color:var(--text); border-color:var(--rule) }
.editor-actions{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:1rem }
.filter-tabs a, .filter-tabs strong{ margin-right:.9rem; font-size:.95rem }
.filter-tabs strong{ color:var(--blue) }

/* ---------- Support tickets ---------- */
.support h1{ margin-bottom:1rem }
.thread{ display:flex; flex-direction:column; gap:.9rem; margin:1.25rem 0 1.5rem }
.msg{ max-width:min(44rem, 92%); border:1px solid var(--rule); border-radius:10px; padding:.8rem 1rem; background:var(--panel) }
.msg.mine{ align-self:flex-end; background:var(--info-bg); border-color:var(--info-line) }
.msg.staff{ align-self:flex-start }
.msg-meta{ font-size:.85rem; color:var(--text-2); margin:0 0 .3rem }
.msg-body{ white-space:normal; overflow-wrap:anywhere }
.ticket-facts{ margin-bottom:.5rem }
.support-card .editor-head{ margin-bottom:.25rem }

/* ---- Admin: site analytics ---- */
.an-range{ display:flex; gap:.25rem .9rem; flex-wrap:wrap; align-items:center; margin:0 0 1.25rem }
.an-range a, .an-range strong{ padding:.3rem .7rem; border-radius:4px; text-decoration:none }
.an-range strong{ background:var(--blue); color:var(--white) }
.an-range a:hover{ background:var(--panel) }
.an-delta{ font-size:.8rem; font-weight:700; margin-left:.35rem; padding:.05rem .4rem; border-radius:3px; background:var(--panel); color:var(--text-2) }
.an-up{ background:var(--ok-bg); color:var(--ok-fg) }
.an-down{ background:var(--bad-bg); color:var(--bad-fg) }
.an-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.5rem; margin-bottom:1.5rem }
.an-grid .card{ margin-bottom:0 }
.an-card h2{ margin-bottom:.5rem }
.an-table th.num, .an-table td.num{ text-align:right; white-space:nowrap }
.an-table td{ padding:.45rem .6rem }
.an-name{ position:relative; display:block; padding:.15rem .4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:28rem }
.an-name span:first-child{ position:relative; z-index:1 }
.an-share{ position:absolute; left:0; top:0; bottom:0; background:var(--blue); opacity:.14; border-radius:3px }
.an-section{ margin:.5rem 0 .5rem }
.an-chart{ width:100%; height:auto; display:block }
.an-grid-line{ stroke:var(--rule); stroke-width:1 }
.an-axis{ fill:var(--text-2); font-size:11px }
.an-axis-dl{ fill:var(--orange) }
.an-bar{ fill:var(--blue); opacity:.35 }
.an-bar-u{ fill:var(--blue) }
.an-line{ fill:none; stroke:var(--orange); stroke-width:2; stroke-linejoin:round }
.an-dot{ fill:var(--orange) }
.an-legend{ display:flex; gap:.4rem 1rem; flex-wrap:wrap; align-items:center; font-size:.9rem; color:var(--text-2); margin:0 0 .5rem }
.an-key{ display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:.35rem }
.an-key-views{ background:var(--blue); opacity:.35 }
.an-key-u{ background:var(--blue) }
.an-key-dl{ background:var(--orange); height:3px; width:18px; border-radius:2px; vertical-align:3px }
:root[data-theme="dark"] .an-share{ opacity:.25 }

/* Download page */
.dl-wrap{ max-width:560px }
.dl-facts{ margin-top:1.5rem }
.dl-facts > div{ grid-template-columns:6rem 1fr }
.sha{ font-size:.78rem; word-break:break-all; color:var(--text-2) }
.biz-required{ display:block; padding:.75rem 1rem; border-left:3px solid var(--orange); background:var(--panel) }