@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- LayerMate brand identity ----
     One sans family (Manrope) for headings and body; JetBrains Mono only
     for filenames and keys. ink-dim / ink-faint are bright enough for
     WCAG AA body text on --bg and --panel. */
  --bg:#111318; --bg-2:#0c0e12;
  --panel:#1a1d23; --panel-2:#22262e;
  --line:#73778033; --line-soft:#7377801f;
  --ink:#f5f5f0; --ink-dim:#cdd0d5; --ink-faint:#9da1a9;
  --accent:#b8f34a; --accent-2:#cdf870; --accent-dim:#8fc42f; --accent-soft:#b8f34a1a;
  --ok:#4cc38a; --err:#e5534b;
  --r:14px; --r-sm:10px;
  --nav-h:64px;
  --disp:'Manrope', system-ui, sans-serif;
  --body:'Manrope', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
.mono{font-family:var(--mono)}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:1100px;margin:0 auto;padding:0 24px}

/* ---- the "layers" motif: a small reusable design system built around
   stacked, staggered horizontal bars — echoes the logomark and print
   layers themselves. Used as section dividers, list markers, card
   watermarks, and the hero's own entrance animation. Kept deliberately
   simple so it reads as ONE consistent device wherever it shows up. ---- */
.layer-divider{display:flex;flex-direction:column;gap:4px;width:64px;margin-bottom:22px}
.layer-divider i{display:block;height:4px;border-radius:2px;background:var(--accent);transform:translateX(-40px);opacity:0;
  animation:layerSlide .55s cubic-bezier(.2,.8,.2,1) forwards}
.layer-divider i:nth-child(1){width:64px;animation-delay:.05s}
.layer-divider i:nth-child(2){width:44px;background:var(--accent-dim);animation-delay:.16s}
.layer-divider i:nth-child(3){width:26px;background:#4d6b22;animation-delay:.27s}
@keyframes layerSlide{to{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion: reduce){.layer-divider i{animation:none;transform:none;opacity:1}}

.layer-mark{flex:none;width:16px;height:13px;position:relative;display:inline-block}
.layer-mark i{position:absolute;left:0;right:0;height:3px;border-radius:1.5px;background:var(--accent)}
.layer-mark i:nth-child(1){top:0;right:5px;background:var(--accent)}
.layer-mark i:nth-child(2){top:5px;right:2px;background:var(--accent-dim)}
.layer-mark i:nth-child(3){top:10px;right:0;background:#4d6b22}

/* faint layered-slab watermark used behind hero/panels — three translucent
   staggered bars with a soft glow, echoing the "Layered Structures" tile */
.layer-bg{position:absolute;pointer-events:none;z-index:0}
.layer-bg i{position:absolute;display:block;border-radius:10px;background:linear-gradient(90deg,var(--accent-soft),transparent)}

/* ---- nav: one shared header on every page (built by /js/site-chrome.js) ---- */
header.site-nav{
  position:sticky; top:0; z-index:40;
  background:#111318e6; backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:var(--nav-h);display:flex;align-items:center;gap:32px}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);flex:none}
.nav-logo .mark{width:28px;height:28px;flex:none;display:block}
.nav-logo .mark img{display:block;width:100%;height:100%;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:24px;font-size:15px;color:var(--ink-dim);font-weight:500}
.nav-links a{text-decoration:none;transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-menu-auth{display:none}
.nav-cta{display:flex;gap:12px;align-items:center;margin-left:auto}
.nav-text{
  background:none;border:none;padding:6px 2px;font:500 15px var(--body);
  color:var(--ink-dim);text-decoration:none;cursor:pointer;white-space:nowrap;
}
.nav-text:hover{color:var(--ink)}
.nav-burger{
  display:none;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);cursor:pointer;
}
.nav-burger:hover{border-color:#ffffff33}
.nav-burger svg{display:block}

/* ---- buttons: filled lime (primary) and outline are the two main styles ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:11px 20px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);font:700 14px var(--body);
  cursor:pointer;text-decoration:none;transition:.15s;
}
.nav-cta .btn{white-space:nowrap}
.btn:hover{border-color:#ffffff33;background:#2a2f39}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#111318}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.outline{background:transparent;border-color:#ffffff40;color:var(--ink)}
.btn.outline:hover{background:var(--panel-2);border-color:#ffffff66}
.btn.sm{padding:8px 14px;font-size:14px}
.btn.big{padding:14px 28px;font-size:16px}
.btn.text{background:transparent;border-color:transparent;padding-left:10px;padding-right:10px;color:var(--ink-dim)}
.btn.text:hover{background:transparent;border-color:transparent;color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.block{width:100%}
/* .btn sets display:inline-flex, which otherwise beats the UA [hidden]
   stylesheet and leaves "hidden" buttons visible (e.g. Discord Disconnect
   before a link exists). */
.btn[hidden]{display:none !important}

/* ---- hero ---- */
.hero{padding:76px 0 60px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:900px;height:500px;background:radial-gradient(ellipse, #b8f34a1f 0%, transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
/* Eyebrow labels are plain small caps, not pills, so they don't compete
   with the buttons. */
.eyebrow{
  display:inline-block;font:700 13px var(--body);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:14px;
}
h1{font-family:var(--disp);font-size:44px;line-height:1.1;font-weight:800;margin:0 0 18px;letter-spacing:-.025em}
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:19px;line-height:1.6;color:var(--ink-dim);max-width:46ch;margin:0 0 30px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-note{font-size:12.5px;color:var(--ink-faint);font-family:var(--body);font-weight:600}
.hero-note + .hero-note{margin-top:6px}

/* ---- signature: mock file grid with a "dedup" moment ---- */
.demo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 30px 80px -20px #000a;
}
.demo-card{
  aspect-ratio:1;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);
  position:relative;overflow:hidden;opacity:0;transform:translateY(10px) scale(.96);
  animation:cardIn .5s ease forwards;
}
.demo-card .swatch{position:absolute;bottom:7px;left:7px;display:flex;gap:3px}
.demo-card .swatch i{width:6px;height:6px;border-radius:50%;display:block}
.demo-card .fname{position:absolute;bottom:0;left:0;right:0;padding:5px 7px 6px;
  font:500 8.5px var(--mono);color:var(--ink-faint);background:linear-gradient(0deg,#0009,transparent)}
.demo-card.dup{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.demo-card .dup-tag{
  position:absolute;top:6px;right:6px;background:var(--accent);color:#111318;
  font:700 7.5px var(--mono);padding:2px 5px;border-radius:5px;opacity:0;
  animation:tagIn .4s ease forwards; animation-delay:1.3s;
}
.demo-caption{margin-top:12px;font:500 12px var(--mono);color:var(--ink-faint);text-align:center;opacity:0;animation:cardIn .5s ease forwards;animation-delay:1.5s}
@keyframes cardIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tagIn{to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .demo-card, .demo-card .dup-tag, .demo-caption{animation:none;opacity:1;transform:none}
}

/* ---- real product screenshots ---- */
.shot-frame{
  border-radius:16px;border:1px solid var(--line);background:var(--panel);
  box-shadow:0 30px 80px -20px #000a;overflow:hidden;margin:0;
}
.shot-frame .shot-bar{display:flex;gap:6px;align-items:center;padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.shot-frame .shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.shot-frame img{display:block;width:100%;height:auto}
.shot-frame figcaption{padding:14px 16px 16px;font-size:13.5px;line-height:1.55;color:var(--ink-dim)}
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
@media (max-width:800px){.shot-pair{grid-template-columns:1fr}}

/* ---- sections ---- */
.section{padding:52px 0}
.wrap.section{padding-left:24px;padding-right:24px}
.section-head{max-width:560px;margin:0 0 40px}
.section-head .eyebrow{margin-bottom:14px}
h2{font-family:var(--disp);font-size:30px;font-weight:800;margin:0 0 12px;letter-spacing:-.015em}
.section-head p{color:var(--ink-dim);font-size:16px;line-height:1.6;margin:0}

/* ---- pillar strip: "your files stay yours" — local-first as a brand
   statement, not a footnote. Reuses .layer-mark as the bullet device. ---- */
.pillars{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:6px}
.pillars .pillar{display:flex;align-items:center;gap:10px;font:600 13.5px var(--body);color:var(--ink-dim)}

/* ---- numbered steps (guide page) ---- */
.step-list{display:flex;flex-direction:column;gap:0;counter-reset:step;max-width:640px}
.step{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line-soft)}
.step:first-child{border-top:none;padding-top:4px}
.step .num{
  flex:none;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);
  border:1px solid #b8f34a3a;color:var(--accent);font:800 14px var(--disp);
  display:grid;place-items:center;
}
.step h3{font-family:var(--disp);font-size:15.5px;margin:2px 0 6px;font-weight:700}
.step p{font-size:13.5px;line-height:1.6;color:var(--ink-dim);margin:0}
.guide-note{
  display:flex;gap:12px;align-items:flex-start;background:var(--accent-soft);
  border:1px solid #b8f34a3a;border-radius:var(--r-sm);padding:14px 16px;margin-top:18px;
  font-size:13px;line-height:1.6;color:var(--ink-dim);
}
.guide-note svg{flex:none;color:var(--accent);margin-top:2px}
.guide-start-wrap{max-width:1100px}
.guide-start-wrap .section-head{margin-left:auto;margin-right:auto}
.guide-start-wrap .step-list{max-width:1000px;margin:0 auto}
.guide-start-wrap .step:not(:first-child){width:100%;max-width:640px;margin-left:auto;margin-right:auto}
.install-platform-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;
  align-items:start;margin-top:18px;
}
.install-platform-column{display:flex;flex-direction:column;gap:18px;min-width:0}
.install-platform-grid .guide-note{margin-top:0}
@media (max-width:760px){.install-platform-grid{grid-template-columns:1fr}}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px; position:relative; overflow:hidden;
}
/* Real screenshot bled to the card's top edge — pulled out to the edges with
   negative margins matching the card's own padding, so it sits flush inside
   the card's rounded top corners instead of floating with a border gap.
   Only present on the features-grid cards; FAQ reuses .feature without one. */
.feature-shot{
  display:block;width:calc(100% + 48px);height:auto;margin:-24px -24px 16px;
  aspect-ratio:16/10;object-fit:cover;object-position:top;
  border-radius:var(--r) var(--r) 0 0;
  border-bottom:1px solid var(--line);
}
.feature .ico{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);
  display:grid;place-items:center;color:var(--accent);margin-bottom:16px}
.feature h3{font-family:var(--disp);font-size:16px;margin:0 0 8px;font-weight:700}
.feature .brandname{display:block;font:700 10.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.feature p{font-size:15px;line-height:1.6;color:var(--ink-dim);margin:0}

/* ---- pricing card ---- */
.pricing-row{display:flex;gap:20px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.price-card{
  max-width:440px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:32px;text-align:center;
}
.price-card .badge{display:inline-block;font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid #b8f34a3a;border-radius:999px;padding:4px 12px;margin-bottom:18px}
.amount-row{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:6px}
.amount-row .cur{font:700 20px var(--disp);color:var(--ink-dim)}
#pwyw-amount{
  width:150px;text-align:center;font:800 44px var(--disp);color:var(--ink);
  background:transparent;border:none;border-bottom:2px dashed var(--line);
  padding:2px 0 4px;
}
#pwyw-amount:focus{outline:none;border-color:var(--accent)}
/* Fixed licence price (replaced the old pay-what-you-want #pwyw-amount input
   above) — same size/weight so the price-card layout didn't need to change,
   just plain text now instead of an editable field since there's nothing to
   edit. */
#fixed-price-amount{font:800 44px var(--disp);color:var(--ink)}
/* Was-price: muted anchor with a custom diagonal slash (not browser
   line-through) so the discount reads clearer next to $19.99. */
.was-price{
  position:relative;display:inline-block;color:var(--ink-faint);
  margin-right:14px;vertical-align:baseline;padding-top:11px;line-height:1;
}
.was-price .was-label{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font:700 9px var(--body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);opacity:.75;white-space:nowrap;
}
.was-price .was-amount{
  position:relative;display:inline-block;font:inherit;color:inherit;
}
.was-price .was-amount::after{
  content:"";position:absolute;left:-4%;right:-4%;top:48%;height:2px;
  background:var(--accent);opacity:.55;transform:rotate(-12deg);border-radius:1px;
  pointer-events:none;
}
.price-card .was-price{font:700 20px var(--disp);margin-right:10px}
.price-hero .was-price{font-size:26px;font-weight:800;letter-spacing:0;margin-right:16px}
@media (max-width:600px){
  .price-hero .was-price{font-size:20px;margin-right:12px;padding-top:10px}
  .was-price .was-label{font-size:8px}
}
.price-sub{font-size:13.5px;color:var(--ink-faint);margin-bottom:22px}
.price-presets{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.preset-btn{
  padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--ink-dim);font:700 13px var(--body);cursor:pointer;transition:.15s;
}
.preset-btn:hover{border-color:var(--accent)}
.preset-btn.on{background:var(--accent);border-color:var(--accent);color:#111318}
.price-includes{text-align:left;list-style:none;margin:24px 0;padding:0;font-size:15px;color:var(--ink-dim)}
.price-includes li{display:flex;gap:9px;padding:6px 0}
.price-includes svg{flex:none;color:var(--ok);margin-top:2px}

/* ---- homepage pricing hero card ----
   Padding + the two-column includes grid used to be set as inline styles
   on the elements themselves, with nothing to override them on mobile —
   at 320-375px that squeezed the $19.99 price card down to a sliver and
   crushed "Network libraries" etc. into ~80px-wide columns. Moved those
   properties here so a mobile override actually has something to win
   against. */
.price-hero{padding:48px 56px;max-width:640px;margin:0 auto;text-align:center}
.price-hero-amount{font:800 68px var(--disp);color:var(--ink);margin:0 0 4px;letter-spacing:-.02em}
.price-hero .price-sub{font-size:14px;margin-bottom:8px}
.price-hero-list{display:inline-grid;grid-template-columns:1fr 1fr;column-gap:32px;font-size:15px}
.price-hero .hero-ctas{margin:8px 0 0}
@media (max-width:600px){
  .price-hero{padding:32px 20px}
  .price-hero-amount{font-size:48px !important}
  .price-hero-list{grid-template-columns:1fr;row-gap:2px}
}

/* ---- pricing page ---- */
.pricing-page{padding:72px 0 64px}
.pricing-intro{text-align:center;max-width:640px;margin:0 auto 40px}
.pricing-intro h1{font-size:44px;margin:0 0 12px}
.pricing-intro p{font-size:18px;color:var(--ink-dim);margin:0}
.price-trial{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.price-trial .trial-note{margin-top:10px;font-size:14px}
.pricing-try{text-align:center;margin:28px auto 0;font-size:15px;color:var(--ink-faint)}
.pricing-try a{color:var(--accent-2);font-weight:600}
@media (max-width:600px){.pricing-page{padding:44px 0}.pricing-intro h1{font-size:34px}}

/* ---- donation: tucked behind a quiet link under the licence card so it
   doesn't compete with the purchase ---- */
.donate-more{max-width:440px;margin:28px auto 0;text-align:center}
.donate-more > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font:600 14px var(--body);color:var(--ink-faint);padding:6px 4px;
}
.donate-more > summary::-webkit-details-marker{display:none}
.donate-more > summary::after{content:"▾";font-size:11px;transition:transform .15s}
.donate-more[open] > summary::after{transform:rotate(180deg)}
.donate-more > summary:hover{color:var(--ink-dim)}
.donate-card{
  background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:16px;padding:22px 24px;margin-top:12px;text-align:left;
}
.badge.muted{background:transparent;border-color:var(--line);color:var(--ink-faint)}
.donate-lede{font-size:14px;line-height:1.6;color:var(--ink-faint);margin:0}
.donate-lede strong{color:var(--ink-dim);font-weight:700}
#donate-amount{
  width:70px;text-align:left;font:800 22px var(--disp);color:var(--ink-dim);
  background:transparent;border:none;border-bottom:2px dashed var(--line);padding:2px 0 4px;
}
#donate-amount:focus{outline:none;border-color:var(--accent)}
.preset-btn.small{padding:5px 12px;font-size:12px}

/* ---- forms (auth pages) ---- */
.auth-wrap{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;padding:40px 24px}
.auth-box{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px}
.auth-box h1{font-size:24px;margin-bottom:6px}
.auth-box .sub{color:var(--ink-faint);font-size:13.5px;margin-bottom:26px}
.field{margin-bottom:16px;text-align:left}
.field label{display:block;font-size:12.5px;color:var(--ink-dim);margin-bottom:7px;font-weight:600}
.field input, .field select{
  width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:500 14px var(--body);
}
.field input:focus, .field select:focus{outline:none;border-color:var(--accent)}
.field-hint{font-size:11.5px;color:var(--ink-faint);margin-top:6px}
.form-err{color:var(--err);font-size:13px;margin:14px 0 0;min-height:16px;text-align:center}
.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--ink-faint)}
.auth-switch a{color:var(--accent);text-decoration:none;font-weight:700}

/* ---- dashboard ---- */
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.dash-head h1{font-size:26px;margin:0}
.status-pill{display:inline-flex;align-items:center;gap:7px;font:700 12px var(--body);
  padding:6px 13px;border-radius:999px;border:1px solid var(--line)}
.status-pill.paid{border-color:#4cc38a55;background:#4cc38a1a;color:#a8e6c4}
.status-pill.unpaid{border-color:#e5a50a55;background:#e5a50a1a;color:#f0d68a}
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
@media (max-width:820px){.dash-grid{grid-template-columns:1fr}}

/* Dashboard tabs — admin and customer dashboards. Applied when body has
   .dash-tabs-on (all logged-in dashboard views). */
.dash-tabs{
  display:none;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
}
body.dash-tabs-on .dash-tabs{display:flex}
.dash-tab{
  appearance:none;-webkit-appearance:none;border:1px solid transparent;
  background:transparent;color:var(--ink-dim);cursor:pointer;
  font:600 13px var(--body);padding:8px 14px;border-radius:8px;
  transition:background .12s,color .12s,border-color .12s;
}
.dash-tab:hover{color:var(--ink);background:var(--panel-2)}
.dash-tab[aria-selected="true"]{
  color:#111318;background:var(--accent);border-color:var(--accent);font-weight:700;
}
.dash-tab-panel{display:block}
body.dash-tabs-on .dash-tab-panel{display:none}
body.dash-tabs-on .dash-tab-panel.is-active{display:block}
body.dash-tabs-on .dash-tab-panel > .card:first-child,
body.dash-tabs-on .dash-tab-panel > .feature-section:first-child{margin-top:0 !important}
@media (max-width:600px){
  .dash-tabs{padding:5px;gap:4px}
  .dash-tab{padding:8px 11px;font-size:12.5px}
}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card h2{font-size:16px;margin:0 0 16px}
.release-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line-soft)}
.release-row:first-child{border-top:none;padding-top:4px}
.release-row .v{font:800 15px var(--disp);min-width:70px}
.release-row .notes{flex:1;font-size:13px;color:var(--ink-dim);line-height:1.5}
.release-row .dl{display:flex;gap:8px;flex-wrap:wrap}
/* Changelog entries can run to several paragraphs/bullets (see
   formatChangelogNotes in dashboard.html) — top-align the row instead of
   centering, and give paragraphs/bullets breathing room instead of the
   default browser 1em block margins stacking oddly. */
/* The list only ever grows as new versions get published (nothing here
   ever gets pruned the way old installers do) — without a cap the card
   just keeps pushing the rest of the page down further with every
   release. Scrolls internally past ~4 entries' worth of height instead;
   the fade at the bottom is a visual hint there's more to scroll to. */
#changelog-body{max-height:480px;overflow-y:auto;padding-right:4px;
  mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent 100%)}
#changelog-body .release-row{align-items:flex-start}
#changelog-body .notes p{margin:0 0 8px}
#changelog-body .notes p:last-of-type{margin-bottom:6px}
#changelog-body .changelog-list{margin:0 0 8px;padding-left:18px}
#changelog-body .changelog-list li{margin-bottom:3px}
/* ## Heading lines and nested "  * "/"  - " bullets — see
   formatChangelogNotes()'s applyInlineFormatting()/flushSub() in
   dashboard.html for how these get built. */
#changelog-body .notes p.changelog-h{font:700 13.5px var(--body);color:var(--ink);margin:14px 0 6px}
#changelog-body .notes p.changelog-h:first-child{margin-top:0}
#changelog-body .changelog-sublist{list-style:circle;margin:3px 0 0;padding-left:18px}
#changelog-body .notes strong{color:var(--ink);font-weight:700}
.dl-btn{font:700 12px var(--body);padding:7px 13px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);text-decoration:none;transition:.15s}
.dl-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Per-panel "hide delete buttons" toggle (Accounts, Purchases & refunds) —
   declutters the row of admin controls / avoids an accidental click on a
   destructive action when you're just scanning the list. State persists per
   card in localStorage, same pattern as the minimise buttons. Off by
   default (deletes visible) so nothing changes unless an admin opts in. */
#accounts-card.hide-deletes .acct-delete-btn,
#accounts-card.hide-deletes .acct-notes,
#refunds-card.hide-deletes .remove-pending-btn,
#refunds-card.hide-deletes .refund-btn,
#refunds-card.hide-deletes .revoke-btn{display:none}
.acct-notes{overflow-wrap:anywhere}
.account-item{padding:20px 0;border-top:1px solid var(--line-soft)}
.account-summary{display:grid;grid-template-columns:minmax(230px,1fr) 185px minmax(220px,auto);gap:20px;align-items:start;font-size:13px}
.account-identity{min-width:0}
.account-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.account-email{font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.account-admin{border-color:var(--accent);color:var(--accent-2)}
.account-badges{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:8px;font-size:12px}
.account-licensed{color:var(--ok)}
.account-muted{color:var(--ink-faint)}
.account-discord{display:flex;gap:8px;margin-top:10px;color:var(--ink-dim);font-size:12px;overflow-wrap:anywhere}
.account-label{color:var(--ink-faint);flex:none}
.account-dates{margin:0;display:grid;gap:10px;font-size:12px}
.account-dates dt{color:var(--ink-faint);margin-bottom:3px}
.account-dates dd{margin:0;color:var(--ink-dim)}
.account-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:300px}
.account-actions .dl-btn{min-height:34px}
.account-notes{margin-top:12px;font-size:12px;color:var(--ink-faint);line-height:1.5}
.account-notes a{text-decoration:none}
.account-notes a:hover{text-decoration:underline}
@media(max-width:1050px){
  .account-summary{grid-template-columns:minmax(0,1fr) 185px}
  .account-actions{grid-column:1/-1;justify-content:flex-start;max-width:none}
}
@media(max-width:600px){
  .account-summary{grid-template-columns:minmax(0,1fr);gap:16px}
  .account-dates{grid-template-columns:1fr 1fr;gap:16px}
  .account-actions{grid-column:auto}
}

.lock-card{text-align:center;padding:40px 24px}
.lock-card svg{color:var(--ink-faint);margin-bottom:14px}
.lock-card p{color:var(--ink-dim);font-size:14px;margin:0 0 20px}
.purchase-row{display:flex;align-items:center;gap:12px;font-size:13px;padding:9px 0;border-top:1px solid var(--line-soft);color:var(--ink-dim)}
.purchase-row > span:nth-child(1){flex:1.2;color:var(--ink-faint);font-size:12px}
.purchase-row > span:nth-child(2){flex:1;font-family:var(--mono)}
.purchase-row > span:nth-child(3){flex:none}
.purchase-row > span:nth-child(4){flex:none;min-width:60px;text-align:right}
.kind-tag{display:inline-block;font:700 10px var(--body);letter-spacing:.03em;padding:2px 7px;border-radius:5px;
  border:1px solid var(--line);color:var(--ink-faint)}
.kind-tag.donation{border-color:#b8f34a4a;color:var(--accent)}
.refund-row .re-platforms{flex:none;display:flex;gap:4px;min-width:96px}
.purchase-row:first-child{border-top:none}
.refund-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--ink-dim)}
.refund-row:first-child{border-top:none}
.refund-row .re-email{flex:1.6;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.refund-row .re-amt{flex:none;min-width:64px;font-family:var(--mono)}
.refund-row .re-status{flex:none;min-width:64px;text-transform:capitalize}
.refund-row .re-date{flex:none;min-width:90px;color:var(--ink-faint);font-size:12px}
.refund-row .re-action{flex:none;min-width:110px;text-align:right}

@media (max-width:600px){
  .wrap{padding:0 16px}
  .wrap.section{padding-left:16px;padding-right:16px}
  .card{padding:18px}
  .dash-head h1{font-size:22px}
  .release-row{flex-wrap:wrap;gap:4px 10px}
  .release-row .notes{flex:1 1 100%;order:3;margin-top:2px}
  .release-row .dl{flex:1 1 100%;order:4;margin-top:6px}
  .purchase-row{flex-direction:column;align-items:stretch;gap:3px;padding:12px 0}
  .purchase-row > span{flex:none !important}
  .purchase-row > span:nth-child(3){align-self:flex-start}
  .refund-row{flex-direction:column;align-items:flex-start;gap:5px;padding:13px 0}
  .refund-row > span{flex:none !important;min-width:0 !important;width:100%;text-align:left !important;
    white-space:normal !important;overflow-wrap:anywhere}
  .refund-row .re-email{overflow:visible;text-overflow:clip}
  /* the blanket white-space:normal above was silently clobbering feedback
     comments' own pre-wrap (their line breaks got flattened) — give that
     specific case its formatting back */
  .refund-row > span[style*="pre-wrap"]{white-space:pre-wrap !important}
  .preset-btn.small{padding:9px 14px}
}

/* ---- admin analytics ---- */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:24px}
.stat-card{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:13px 15px}
.stat-card .n{font:800 21px var(--disp);color:var(--ink);white-space:nowrap}
.stat-card .lbl{font-size:11px;color:var(--ink-faint);margin-top:3px}
.stat-card .sub{margin-top:4px;font-size:11px;color:var(--ink-faint);line-height:1.4}
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
@media (max-width:820px){.analytics-grid{grid-template-columns:1fr}}
.analytics-block h3{font-size:12.5px;color:var(--ink-dim);margin:0 0 12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bar-row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12.5px}
.bar-row .bl{flex:none;width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-dim)}
.bar-row .bl.with-detail{width:168px;white-space:normal;line-height:1.3}
.bar-row .bl .detail{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--ink-faint)}
.bar-row .bt{flex:1;height:7px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.bar-row .bf{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));border-radius:999px}
.bar-row .bn{flex:none;width:32px;text-align:right;color:var(--ink-faint);font-family:var(--mono);font-size:11.5px}
.bar-row .bn.wide{width:auto;min-width:0;white-space:nowrap}
.analytics-note{margin-top:10px;font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.analytics-empty{padding:28px 0;text-align:center;color:var(--ink-faint);font-size:12.5px}
.grant-form{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.grant-form input, .grant-form select{flex:1;min-width:200px;padding:9px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:500 13px var(--body)}
.grant-form input:focus, .grant-form select:focus{outline:none;border-color:var(--accent)}

/* ---- footer ---- */
footer.site-footer{border-top:1px solid var(--line-soft);padding:44px 0 28px;margin-top:24px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px 48px}
.footer-brand .nav-logo{font-size:17px}
.footer-brand .mark{width:24px;height:24px}
.footer-brand p{margin:10px 0 0;font-size:14px;color:var(--ink-faint)}
.footer-links{display:flex;gap:10px 22px;flex-wrap:wrap;max-width:620px;font-size:14px}
.footer-links a{color:var(--ink-dim);text-decoration:none}
.footer-links a:hover,.footer-links a[aria-current="page"]{color:var(--ink)}
.footer-base{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-faint)}

/* ---- toast ---- */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:12px 20px;border-radius:10px;font-size:13.5px;opacity:0;pointer-events:none;
  transition:.2s;z-index:100;box-shadow:0 10px 30px #0008}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  h1{font-size:34px}

  /* ---- mobile nav: logo, the two buttons, and a burger that opens the
     page links plus Log in / Dashboard / Log out ---- */
  .nav-inner{gap:10px;padding:0 16px}
  .nav-burger{display:inline-flex}
  .nav-cta{gap:8px}
  .nav-cta .btn.sm{padding:8px 12px;font-size:13.5px}
  .nav-desktop-only{display:none}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--panel);border-bottom:1px solid var(--line);
    padding:4px 20px 16px;box-shadow:0 24px 50px -20px #000a;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links > a,.nav-menu-auth > a,.nav-menu-auth > button{
    display:block;padding:14px 2px;border-top:1px solid var(--line-soft);font-size:16px;
    color:var(--ink-dim);text-decoration:none;
  }
  .nav-links > a:first-child{border-top:none}
  .nav-menu-auth{display:block}
  .nav-menu-auth > button{width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;font-family:var(--body);cursor:pointer}
}

@media (max-width:420px){
  .nav-logo{font-size:17px;gap:8px}
  .nav-cta .nav-try-btn{display:none}
}

/* ============================================================
   PREMIUM APP-LANDING SYSTEM
   Product screenshots do most of the talking; lime is reserved
   for buttons, key words, icons, small lines and glow — never
   whole sections. Cards are always Slate (#1A1D23) on Graphite
   (#111318) with a hairline border, never a hard black outline.
   ============================================================ */
.card08{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:var(--r)}

/* ---- FAQ accordion: native <details>, top 5 open-able, rest tucked
   behind "More questions" so the section doesn't read as a long wall ---- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{padding:0;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:19px 24px;font-family:var(--disp);font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:20px;font-weight:400;color:var(--ink-faint);flex:none;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-body{padding:0 24px 20px}
.faq-item .faq-body p{font-size:15.5px;line-height:1.65;color:var(--ink-dim);margin:0}
.faq-more{margin-top:2px}
.faq-more > summary{list-style:none;cursor:pointer;padding:6px 4px;font:700 13.5px var(--body);color:var(--ink-faint);
  display:flex;align-items:center;gap:8px;justify-content:center}
.faq-more > summary::-webkit-details-marker{display:none}
.faq-more > summary::after{content:"▾";font-size:11px;transition:transform .15s}
.faq-more[open] > summary::after{transform:rotate(180deg)}
.faq-more > summary:hover{color:var(--ink-dim)}
.faq-more-body{display:flex;flex-direction:column;gap:12px;margin-top:12px}

/* ---- homepage sections ---- */
.home-section{padding:96px 0;border-top:1px solid var(--line-soft)}
.home-head{max-width:680px;margin:0 0 44px}
.home-head.center{margin-left:auto;margin-right:auto;text-align:center}
.home-head h2{font-size:40px;line-height:1.12;letter-spacing:-.02em;margin:0}
.home-head p{font-size:18px;color:var(--ink-dim);margin:16px 0 0}
.home-section h3{font-family:var(--disp);font-size:20px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
.trial-note{font-size:14.5px;color:var(--ink-dim);margin:14px 0 0}

/* ---- hero: centred copy, then the real product screenshot straight-on at
   full content width (no tilt, no glow blob) ---- */
.hero-v3{padding:88px 0 72px;text-align:center}
.hero-v3 h1{font-size:64px;line-height:1.05;letter-spacing:-.035em;margin:0 0 22px}
.hero-v3 .lede{margin:0 auto 34px;max-width:40ch}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:0}
.hero-v3 .hero-ctas,.hero-ctas.center{justify-content:center}
.hero-meta{margin:18px 0 0;font-size:15px;color:var(--ink-faint)}
.hero-meta span{margin:0 6px}
.hero-shot{margin:56px auto 0;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;
  background:var(--panel);box-shadow:0 40px 120px -40px #000d}
.hero-shot .shot-chrome{display:flex;gap:8px;align-items:center;height:34px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.hero-shot .shot-chrome i{width:10px;height:10px;border-radius:50%;background:#33373e;display:block}
.hero-shot img{display:block;width:100%;height:auto}
.hero-try-link{margin:22px 0 0;font-size:15px;color:var(--ink-faint)}
.hero-try-link a{color:var(--accent-2);font-weight:600}

/* Ad landing: one trial form, then the library shot. Buy stays a text link. */
.hero-v3.free-trial-hero h1{font-size:46px;max-width:16em;margin-left:auto;margin-right:auto}
.free-trial-hero .lede{max-width:42em}
.free-trial-card{
  max-width:480px;margin:0 auto;text-align:left;
  background:var(--panel);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:22px 22px 18px;
}
.free-trial-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
  list-style:none;margin:18px 0 0;padding:0;
  font-size:14.5px;color:var(--ink-dim);
}
.free-trial-buy{margin:22px 0 0;font-size:14px;color:var(--ink-faint)}
.free-trial-buy a{color:var(--ink-dim);font-weight:600;text-decoration:underline}
.free-trial-login{margin:8px 0 0;font-size:13px;color:var(--ink-faint)}
.free-trial-login a{color:var(--ink-dim);font-weight:600}
@media (max-width:860px){.hero-v3.free-trial-hero h1{font-size:32px}}
@media (max-width:480px){.hero-v3.free-trial-hero h1{font-size:28px}}

/* ---- problem section: messy folder tree -> clean LayerMate cards ---- */
.problem-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.problem-copy h2{font-size:40px;line-height:1.12;letter-spacing:-.02em;margin:0 0 18px}
.problem-copy p{font-size:18px;color:var(--ink-dim);margin:0}
.problem-visual{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
@media (max-width:960px){.problem-row{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){.problem-visual{grid-template-columns:1fr}.problem-arrow{transform:rotate(90deg)}}
.messy-box{background:var(--bg-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:20px 22px;font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--ink-faint);box-shadow:0 20px 50px -24px #000a;min-width:0}
.messy-box .path{color:var(--ink-dim);font-weight:600;margin-bottom:4px}
.messy-box .messy-row{display:flex;gap:8px;color:#a3a7ae;overflow-wrap:anywhere}
.messy-box .messy-row.x{color:#8a8e95;text-decoration:line-through;text-decoration-color:#e5534b88}
.messy-box .messy-row.shout{color:#f0b3ad;font-weight:700}
.problem-arrow{display:grid;place-items:center;color:var(--accent);flex:none}
.problem-arrow svg{display:block}
.clean-box{background:var(--panel);border:1px solid rgba(184,243,74,.18);border-radius:var(--r);padding:22px;box-shadow:0 30px 70px -28px #000c,0 0 0 1px rgba(184,243,74,.04) inset}
.clean-box .clean-head{display:flex;align-items:center;gap:8px;font:700 12px var(--body);color:var(--accent);margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em}
.clean-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.clean-card{background:var(--panel-2);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 9px;text-align:center;transition:.15s}
.clean-card .sw{width:100%;aspect-ratio:1;border-radius:7px;margin-bottom:8px;display:grid;place-items:center;font-size:19px;box-shadow:0 6px 16px -6px #0008}
.clean-card span{font:700 12px var(--body);color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- feature / add-on tiles: media on top, title + short copy below ---- */
.tile-grid{display:grid;gap:24px}
.tile-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.tile-media{position:relative;aspect-ratio:16/10;background:var(--panel-2);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.tile-media img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.tile-body{padding:22px 24px 26px}
.tile-body p{font-size:16px;line-height:1.6;color:var(--ink-dim);margin:0}
.tile-body p + p{margin-top:8px}
.tile-media.formats{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:24px}
.tile-media.formats span{font-size:14px;padding:6px 12px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink)}
.tile-media.formats span.dim{color:var(--ink-faint);border-style:dashed}
.tile-media.formats span.more{background:none;border-color:transparent;color:var(--accent);font-weight:600}
.tile-more{border-style:dashed;justify-content:center;text-align:center;min-height:220px;background:transparent}
@media (max-width:960px){.tile-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tile-grid.two,.tile-grid.three{grid-template-columns:1fr}}

/* ---- local-by-design strip: says "files stay on your computer" once ---- */
.local-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.local-item{padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r);background:var(--panel)}
.local-item svg{display:block;color:var(--accent);margin-bottom:14px}
.local-item b{display:block;font-size:17px;margin-bottom:6px}
.local-item span{display:block;font-size:15px;line-height:1.55;color:var(--ink-dim)}
@media (max-width:960px){.local-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.local-grid{grid-template-columns:1fr}}

/* ---- reviews reel: two rows of equal cards sliding in opposite
   directions. The track holds the cards twice, so sliding by -50% loops
   with no seam. Pauses on hover and keyboard focus; reduced motion gets a
   static wrapped grid. ---- */
.reel{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.reel-row{overflow:hidden}
.reel-track{display:flex;width:max-content;animation:reelSlide var(--reel-duration,60s) linear infinite}
.reel-row.reverse .reel-track{animation-direction:reverse}
.reel:hover .reel-track,.reel:focus-within .reel-track{animation-play-state:paused}
@keyframes reelSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.review-card{
  flex:none;width:320px;height:200px;margin:0 16px 0 0;padding:22px 24px;
  display:flex;flex-direction:column;background:var(--panel);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r);
}
.review-stars{color:var(--accent);letter-spacing:2px;font-size:15px;margin-bottom:10px}
.review-card blockquote{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.review-card figcaption{margin-top:auto;font-size:14px;font-weight:600;color:var(--ink-faint)}
@media (max-width:600px){.review-card{width:280px}}
@media (prefers-reduced-motion: reduce){
  .reel{-webkit-mask-image:none;mask-image:none;max-width:1200px;margin:0 auto;padding:0 24px}
  .reel-track{animation:none;width:auto;flex-wrap:wrap;gap:16px}
  .reel-row.reel-dup,.review-card[aria-hidden="true"]{display:none}
  .review-card{margin:0;flex:1 1 280px;max-width:380px}
}

/* ---- final CTA ---- */
.final-cta{padding:88px 0;text-align:center;border-top:1px solid var(--line-soft)}
.final-cta h2{font-size:36px;letter-spacing:-.02em;margin:0 0 28px}

@media (max-width:860px){
  .home-section{padding:72px 0}
  .hero-v3{padding:56px 0 56px}
  .hero-v3 h1{font-size:42px}
  .hero-shot{margin-top:40px;border-radius:12px}
  .home-head h2,.problem-copy h2{font-size:30px}
  .home-head p,.problem-copy p{font-size:17px}
}
@media (max-width:480px){
  .hero-v3 h1{font-size:36px}
  .hero-v3 .hero-ctas .btn{width:100%}
  .final-cta .hero-ctas .btn,.price-hero .hero-ctas .btn{width:100%}
  .hero-shot .shot-chrome{height:24px}
}

/* Quiet "email me the link" offer. The address is entered in a popup,
   not in place of Buy or Try free. */
.lm-email-offer{margin:18px 0 10px;font-size:14.5px;color:var(--ink-dim)}
.lm-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.lm-download-email-ok{margin-top:12px;font-size:14px}
.lm-download-email.is-sent .field,
.lm-download-email.is-sent button[type="submit"]{display:none}
.lm-email-backdrop[hidden]{display:none !important}
.lm-email-backdrop{
  position:fixed;inset:0;z-index:200;background:#0a0c10cc;backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;
}
.lm-email-box{
  position:relative;width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 30px 80px -20px #000a;padding:22px 22px 18px;box-sizing:border-box;text-align:left;
}
.lm-email-box h3{font-family:var(--disp);font-size:18px;margin:0 28px 8px 0}
.lm-email-box > p{font-size:14px;line-height:1.5;color:var(--ink-dim);margin:0 0 16px}
.lm-email-close{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;
  border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:20px;line-height:1;
}
.auth-box .lm-email-offer{text-align:center}
.auth-box .lm-email-link-open{display:flex;margin-left:auto;margin-right:auto}

/* ---- optional Meta advertising-measurement consent ---- */
#lm-ad-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:10000;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--panel);border-top:1px solid var(--line);
  box-shadow:0 -8px 32px rgba(0,0,0,.35);
}
.lm-ad-consent-inner{
  max-width:960px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
}
.lm-ad-consent-inner p{
  margin:0;flex:1 1 280px;font:500 13.5px/1.45 var(--body);color:var(--ink-dim);
}
.lm-ad-consent-inner a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.lm-ad-consent-actions{display:flex;gap:10px;flex:none}
.lm-ad-consent-reject,.lm-ad-consent-allow{
  font:600 13.5px var(--body);padding:10px 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);
}
.lm-ad-consent-allow{
  background:var(--accent);color:#14181e;border-color:var(--accent);
}
.lm-ad-consent-reject:hover{border-color:var(--ink-faint)}
.lm-ad-consent-allow:hover{filter:brightness(1.05)}
.lm-ad-short{display:none}
/* Phones: a small floating card with one short line, not a full-width slab
   covering the bottom of the page. */
@media (max-width:600px){
  #lm-ad-consent{
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  }
  .lm-ad-consent-inner{flex-wrap:nowrap;gap:10px}
  .lm-ad-consent-inner p{flex:1 1 auto;font-size:12.5px;line-height:1.35}
  .lm-ad-long{display:none}
  .lm-ad-short{display:inline}
  .lm-ad-consent-actions{gap:6px}
  .lm-ad-consent-reject,.lm-ad-consent-allow{padding:7px 11px;font-size:12.5px;border-radius:8px}
}

/* ---- trend chart (inline SVG, built by trendChart() in dashboard.html) ---- */
.trend{width:100%;height:auto;display:block}
.trend-grid{stroke:var(--line-soft);stroke-width:1;shape-rendering:crispEdges}
.trend-grid-base{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.trend-ylabel{font:500 10px var(--mono);fill:var(--ink-faint)}
.trend-xlabel{font:500 10px var(--mono);fill:var(--ink-faint)}
.trend-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trend-dot{fill:var(--accent)}
.trend-peak{fill:var(--accent-2);stroke:var(--bg);stroke-width:1.5}
.trend-peaklbl{font:700 10px var(--mono);fill:var(--accent-2)}
/* fat invisible hover targets over each point; the visible dot only appears
   on hover so sparse charts stay clean */
.trend-hit{fill:transparent;stroke:none;cursor:default}
.trend-hit:hover{fill:var(--accent-2)}
.trend-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--ink-faint)}
.trend-meta b{color:var(--ink-dim);font-weight:700;font-family:var(--mono)}

/* ---- conversion funnel (visits -> signups -> licences) ---- */
.funnel{display:flex;flex-direction:column;gap:8px}
.funnel-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.funnel-label{flex:none;width:110px;color:var(--ink-dim)}
.funnel-track{flex:1;height:22px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.funnel-fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));border-radius:6px;min-width:2px}
.funnel-n{flex:none;min-width:40px;text-align:right;color:var(--ink-dim);font-family:var(--mono);font-size:11.5px}
.funnel-conv{margin:0 0 4px 120px;font-size:11px;color:var(--ink-faint)}
.funnel-conv b{color:var(--accent);font-weight:700}