/* COSMO BOARDS public pages (/, /privacy, /terms). Same tokens as the app; mobile-first, 320-1440 px. */

/* Plus Jakarta Sans (Google Fonts v12, SIL Open Font License), served from our own domain so the page does not wait on
   fonts.googleapis.com. landing.php preloads the latin file. "optional" never swaps fonts after first paint, so text
   cannot reflow (layout shift); a slow first visit keeps the fallback below and later visits use the cached font. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: optional;
  src: url('fonts/pjs-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: optional;
  src: url('fonts/pjs-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Arial (or its metric twins) resized to Plus Jakarta Sans' widths, measured on the hero copy at 400 and 800. */
@font-face { font-family: 'PJS Fallback'; font-weight: 100 500;
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 104.96%; ascent-override: 98.9%; descent-override: 21.15%; line-gap-override: 0%; }
@font-face { font-family: 'PJS Fallback'; font-weight: 600 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arimo Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
  size-adjust: 102.58%; ascent-override: 101.19%; descent-override: 21.64%; line-gap-override: 0%; }

:root, :root[data-theme='dark'] {
  color-scheme: dark;
  --app: #0b0d11; --surface: #12161f; --surface-2: #181d29; --line: #262e40;
  --fg: #f3f4f6; --fg-strong: #ffffff; --soft: #d1d5db; --muted: #a3abb9;
  --accent: #818cf8; --accent-strong: #6366f1; --focus: #a5b4fc;
  --glow: radial-gradient(60rem 36rem at 15% -10%, rgb(124 92 255 / 0.22), transparent 60%),
          radial-gradient(48rem 30rem at 95% 5%, rgb(99 102 241 / 0.16), transparent 60%);
  --card: rgb(22 27 40 / 0.72); --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 40px -18px rgb(0 0 0 / 0.6);
  --tag-b: #312e81; --tag-b-fg: #c7d2fe; --tag-v: #4c1d95; --tag-v-fg: #ddd6fe;
  --tag-g: #14532d; --tag-g-fg: #bbf7d0; --tag-a: #78350f; --tag-a-fg: #fde68a;
}
:root[data-theme='light'] {
  color-scheme: light;
  --app: #eef2f7; --surface: #ffffff; --surface-2: #f1f5f9; --line: #dbe2ea;
  --fg: #0f172a; --fg-strong: #0b1220; --soft: #334155; --muted: #475569;
  --accent: #4338ca; --accent-strong: #4f46e5; --focus: #4f46e5;
  --glow: radial-gradient(60rem 36rem at 15% -10%, rgb(129 140 248 / 0.22), transparent 60%),
          radial-gradient(48rem 30rem at 95% 5%, rgb(196 181 253 / 0.24), transparent 60%);
  --card: rgb(255 255 255 / 0.85); --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 18px 40px -20px rgb(15 23 42 / 0.25);
  --tag-b: #e0e7ff; --tag-b-fg: #3730a3; --tag-v: #ede9fe; --tag-v-fg: #5b21b6;
  --tag-g: #dcfce7; --tag-g-fg: #166534; --tag-a: #fef3c7; --tag-a-fg: #92400e;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body.lp { margin: 0; background: var(--app); background-image: var(--glow); background-repeat: no-repeat; color: var(--fg);
  font: 400 16px/1.6 'Plus Jakarta Sans', 'PJS Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--fg-strong); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { color: var(--fg-strong); line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

.lp-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.lp-narrow { max-width: 760px; }
.lp-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent-strong); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.lp-skip:focus { top: 12px; color: #fff; }

/* Header */
.lp-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--app) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.lp-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-strong); text-decoration: none; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.lp-brand span { font-size: 15px; }
.lp-nav { display: none; align-items: center; gap: 28px; }
/* Hover: the link lifts a little onto a soft glass pill. Padding is offset by negative margin so the row keeps its spacing. */
.lp-nav > a, .lp-dd > summary { position: relative; color: var(--soft); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap;
  padding: 8px 12px; margin: -8px -12px; border-radius: 999px; border: 1px solid transparent;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1.2), background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease, color 180ms ease; }
.lp-nav > a:hover, .lp-nav > a:focus-visible, .lp-dd > summary:hover, .lp-dd > summary:focus-visible, .lp-dd[open] > summary { color: var(--fg-strong); transform: translateY(-2px);
  background: color-mix(in srgb, var(--surface-2) 85%, transparent); border-color: var(--line);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 10px 24px -12px rgb(99 102 241 / 0.55), 0 4px 10px -6px rgb(0 0 0 / 0.4); }
.lp-nav > a:active { transform: translateY(0); transition-duration: 80ms; }
/* "Free tools" dropdown: a panel of tool cards under the header. */
.lp-dd { position: relative; }
.lp-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lp-dd > summary::-webkit-details-marker { display: none; }
.lp-dd-caret { transition: transform 180ms ease; }
.lp-dd[open] .lp-dd-caret { transform: rotate(180deg); }
.lp-dd-panel { position: absolute; left: -20px; top: calc(100% + 22px); width: 360px; padding: 10px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); animation: lp-dd-in 160ms ease-out; }
@keyframes lp-dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lp-dd-title { padding: 6px 10px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lp-dd-grid { display: grid; gap: 2px; }
.lp-dd-foot { margin: 8px 4px 2px; padding: 10px 8px 4px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.lp-tool { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--fg); text-decoration: none; font-weight: 700; font-size: 14px; }
.lp-tool:hover, .lp-tool:focus-visible { background: var(--surface-2); color: var(--fg-strong); }
.lp-tool-text { display: grid; line-height: 1.3; }
.lp-tool-text small { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.lp-tool-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
.lp-tool-cut { background: var(--tag-v); color: var(--tag-v-fg); }
.lp-tool-graphics { background: var(--tag-b); color: var(--tag-b-fg); }
.lp-tool-notes { background: var(--tag-a); color: var(--tag-a-fg); }
.lp-tool-sheets { background: var(--tag-g); color: var(--tag-g-fg); }
.lp-header-actions { display: flex; align-items: center; gap: 8px; }
.lp-menu { position: relative; }
.lp-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.lp-menu summary::-webkit-details-marker { display: none; }
.lp-menu summary span, .lp-menu summary span::before, .lp-menu summary span::after { display: block; width: 18px; height: 2px; background: var(--fg); border-radius: 2px; position: relative; content: ''; }
.lp-menu summary span::before { position: absolute; top: -6px; }
.lp-menu summary span::after { position: absolute; top: 6px; }
.lp-menu nav { position: absolute; right: 0; top: 52px; width: min(300px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow-y: auto; display: grid; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.lp-menu nav > a:not(.lp-tool) { padding: 12px 14px; border-radius: 10px; color: var(--fg); text-decoration: none; font-weight: 600; }
.lp-menu nav a:hover { background: var(--surface-2); }
.lp-menu nav small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.lp-menu-sep { height: 1px; margin: 6px 8px; background: var(--line); }
.lp-menu-label { padding: 8px 14px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.lp-menu nav > a.lp-menu-cta { margin-top: 4px; background: var(--accent-strong); color: #fff; text-align: center; }
.lp-menu nav > a.lp-menu-cta:hover { background: var(--accent); color: #fff; }

/* Buttons */
.lp-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; transition: transform 140ms ease, background 140ms ease; }
.lp-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.lp-btn-primary { background: linear-gradient(135deg, #4f46e5 0%, #6d3fe0 100%); color: #fff; box-shadow: 0 10px 24px -12px rgb(99 102 241 / 0.8); }
.lp-btn-primary:hover { color: #fff; transform: translateY(-1px); }
.lp-btn-primary[aria-disabled='true'] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.lp-btn-ghost { background: var(--surface); color: var(--fg-strong); border-color: var(--line); }
.lp-btn-ghost:hover { background: var(--surface-2); color: var(--fg-strong); }

/* Hero */
.lp-hero { padding: 48px 0 56px; }
.lp-hero-grid { display: grid; gap: 40px; align-items: center; }
.lp-eyebrow { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.lp-hero h1 { font-size: clamp(2rem, 7vw, 3.5rem); font-weight: 800; }
.lp-lead { margin-top: 18px; font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: var(--soft); max-width: 36rem; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-note { margin-top: 16px; color: var(--muted); font-size: 14px; }

.lp-board { margin: 0; border-radius: 20px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); padding: 14px; min-width: 0; }
.lp-board-bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 12px; color: var(--soft); font-size: 13px; }
.lp-board-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.lp-board-bar strong { margin-left: 8px; font-weight: 700; color: var(--fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-board-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp-col { background: var(--surface-2); border-radius: 14px; padding: 10px; min-width: 0; }
.lp-col-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; display: flex; justify-content: space-between; }
.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.lp-card p { font-size: 13px; font-weight: 600; color: var(--fg); margin-top: 6px; overflow-wrap: anywhere; }
.lp-card i { display: block; height: 4px; border-radius: 4px; margin-top: 10px; background: linear-gradient(90deg, var(--accent-strong) 55%, var(--line) 55%); }
.lp-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.lp-tag-b { background: var(--tag-b); color: var(--tag-b-fg); } .lp-tag-v { background: var(--tag-v); color: var(--tag-v-fg); }
.lp-tag-g { background: var(--tag-g); color: var(--tag-g-fg); } .lp-tag-a { background: var(--tag-a); color: var(--tag-a-fg); }
.lp-board figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: right; }

/* Sections */
.lp-section { padding: 64px 0; }
.lp-section-alt { background: color-mix(in srgb, var(--surface) 55%, transparent); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-section h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); font-weight: 800; max-width: 44rem; }
.lp-section-lead { margin-top: 14px; color: var(--soft); max-width: 44rem; }
.lp-features, .lp-plans, .lp-steps, .lp-plan ul { list-style: none; margin: 0; padding: 0; }
.lp-features { display: grid; gap: 16px; margin-top: 32px; }
.lp-features li, .lp-plan, .lp-steps li, .lp-empty { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.lp-features h3, .lp-steps h3 { font-size: 1.08rem; font-weight: 700; }
.lp-features p, .lp-steps p { margin-top: 8px; color: var(--soft); font-size: 15px; }

.lp-plans { display: grid; gap: 16px; margin-top: 32px; }
.lp-plan h3 { font-size: 1.2rem; font-weight: 800; }
.lp-plan-desc { margin-top: 6px; color: var(--soft); font-size: 15px; }
.lp-price { margin-top: 16px; color: var(--muted); }
.lp-price strong { font-size: 2.2rem; color: var(--fg-strong); font-weight: 800; letter-spacing: -0.02em; }
.lp-plan ul { margin-top: 16px; display: grid; gap: 8px; }
.lp-plan ul li { padding-left: 26px; position: relative; color: var(--soft); font-size: 15px; }
.lp-plan ul li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
.lp-empty { margin-top: 28px; color: var(--soft); }

.lp-steps { display: grid; gap: 16px; margin-top: 32px; counter-reset: step; }
.lp-steps li { counter-increment: step; position: relative; padding-top: 58px; }
.lp-steps li::before { content: counter(step); position: absolute; top: 18px; left: 22px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #4f46e5 0%, #6d3fe0 100%); }

.lp-faq { border-bottom: 1px solid var(--line); }
.lp-faq:first-of-type { margin-top: 24px; border-top: 1px solid var(--line); }
.lp-faq summary { cursor: pointer; padding: 18px 36px 18px 0; font-weight: 700; color: var(--fg-strong); list-style: none; position: relative; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 22px; color: var(--accent); font-weight: 400; }
.lp-faq[open] summary::after { content: '−'; }
.lp-faq p { padding: 0 0 18px; color: var(--soft); }

.lp-band { padding: 56px 0; }
.lp-band-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }

.lp-legal h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; margin-top: 18px; }
.lp-legal h2 { font-size: 1.15rem; font-weight: 700; margin-top: 28px; }
.lp-legal p { margin-top: 8px; color: var(--soft); }
.lp-draft { display: inline-block; padding: 8px 14px; border-radius: 10px; background: var(--tag-a); color: var(--tag-a-fg); font-weight: 700; font-size: 14px; }

.lp-footer { border-top: 1px solid var(--line); padding: 48px 0 0; color: var(--muted); font-size: 14px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface) 60%, transparent)); }
.lp-footer-grid { display: grid; gap: 36px; }
.lp-footer-brand { display: grid; justify-items: start; gap: 14px; max-width: 340px; }
.lp-footer-brand p { color: var(--muted); line-height: 1.6; }
.lp-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.lp-footer-cols h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-strong); }
.lp-footer-cols ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-footer a:not(.lp-btn):not(.lp-brand) { color: var(--soft); text-decoration: none; }
.lp-footer a:not(.lp-btn):not(.lp-brand):hover { color: var(--fg-strong); text-decoration: underline; }
.lp-soon { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
.lp-footer-bottom { margin-top: 40px; padding: 20px 0 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }

/* Narrow phones: the header keeps brand + menu; "Sign in" stays in the menu, hero and footer. */
@media (max-width: 399px) {
  .lp-header-actions .lp-btn-sm { display: none; }
}
/* Phones: the trial button lives in the menu and the hero; the header keeps just Sign in. */
@media (max-width: 639px) {
  .lp-header-actions .lp-header-cta { display: none; }
}
@media (min-width: 640px) {
  .lp-wrap { padding: 0 24px; }
  .lp-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-features, .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-plans { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (min-width: 900px) {
  .lp-hero { padding: 72px 0 80px; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; }
  .lp-board-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-section { padding: 88px 0; }
  .lp-footer { padding-top: 64px; }
  .lp-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; }
}
/* The header nav (Free tools + six page links) needs this width; below it the menu holds them. */
@media (min-width: 1180px) {
  .lp-nav { display: flex; }
  .lp-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-btn { transition: none; }
  .lp-btn-primary:hover { transform: none; }
  .lp-nav > a, .lp-dd > summary, .lp-dd-caret { transition: none; }
  .lp-nav > a:hover, .lp-nav > a:focus-visible, .lp-dd > summary:hover, .lp-dd[open] > summary { transform: none; }
  .lp-dd-panel { animation: none; }
}
.lp-currency { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lp-currency label { color: var(--soft); font-size: 14px; }
.lp-currency-select { min-height: 40px; padding: 6px 34px 6px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(127,127,127,.35)); background: var(--surface, transparent); color: var(--fg-strong); font: inherit; font-size: 14px; cursor: pointer; }
.lp-currency-select:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.lp-currency-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13px; }

/* Website chat (support-chat.js): a launcher in the corner and a panel above it. */
.sc { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.sc-launch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-strong); color: #fff; font: 700 15px/1 inherit; font-family: inherit; box-shadow: 0 12px 30px -10px rgb(79 70 229 / 0.7); }
.sc-launch:hover { background: #4f46e5; }
.sc-launch { padding-left: 10px; overflow: visible; transition: transform .22s cubic-bezier(.2,.8,.3,1), background-color .2s ease;
  animation: sc-enter .4s cubic-bezier(.2,.8,.3,1) backwards; }
@media (hover: hover) { .sc-launch:hover { transform: scale(1.04); } }
.sc-launch:active { transform: scale(0.98); }
/* Soft purple ring that glows now and then. Only its opacity animates, so it stays cheap on phones. */
.sc-launch::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgb(196 181 253 / 0.75), 0 0 22px 4px rgb(139 92 246 / 0.55); animation: sc-glow 12s ease-in-out 6s infinite; }
@media (hover: hover) { .sc-launch:hover::before { opacity: 0.8; animation: none; transition: opacity .2s ease; } }
.sc-launch:focus-visible::before { opacity: 0.8; animation: none; transition: opacity .2s ease; }
.sc-face { position: relative; display: block; flex: none; width: 64px; height: 64px; margin: -22px -4px -4px -6px; pointer-events: none;
  transform-origin: 50% 90%; transition: transform .25s cubic-bezier(.2,.8,.3,1); }
@media (hover: hover) { .sc-launch:hover .sc-face { transform: rotate(-8deg); } }
.sc-launch:focus-visible .sc-face { transform: rotate(-8deg); }
.sc-face-move { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; animation: sc-peek 10s ease-in-out 3.5s infinite; }
/* Both frames keep their square size (object-fit: contain), so nothing is stretched. */
.sc-mascot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.35)); }
.sc-mascot-blink { opacity: 0; filter: none; animation: sc-blink 5s linear 2s infinite; }
.sc-open .sc-face-move, .sc-open .sc-mascot-blink, .sc-open .sc-launch::before { animation: none; }
@keyframes sc-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sc-blink { 0%, 95% { opacity: 0; } 95.6%, 98% { opacity: 1; } 98.6%, 100% { opacity: 0; } }
/* Peek and wave: rise a little, rock side to side, settle. Runs in the first ~1.4s of every 10s. */
@keyframes sc-peek {
  0%, 15%, 100% { transform: none; }
  2.5% { transform: translateY(-6px) rotate(-8deg); }
  5% { transform: translateY(-6px) rotate(8deg); }
  7.5% { transform: translateY(-5px) rotate(-6deg); }
  10% { transform: translateY(-3px) rotate(4deg); }
  12.5% { transform: translateY(-1px) rotate(-1deg); }
}
@keyframes sc-glow { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 1; } }
.sc-panel:not([hidden]) { animation: sc-panel-in .24s cubic-bezier(.2,.8,.3,1); transform-origin: 100% 100%; }
.sc-leaving .sc-panel { animation: sc-panel-out .18s ease-in forwards; }
@keyframes sc-panel-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sc-panel-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.sc-hello { position: relative; margin-right: 6px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 14px; border-bottom-right-radius: 4px;
  background: var(--surface); color: var(--fg-strong, var(--fg)); font: 600 14px/1.2 inherit; font-family: inherit; cursor: pointer;
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.5); opacity: 0; transform: translateY(8px) scale(0.92); transform-origin: 100% 100%;
  visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.sc-greet .sc-hello { opacity: 1; transform: none; visibility: visible; transition: opacity .25s ease, transform .3s cubic-bezier(.3,1.6,.5,1), visibility 0s; }
.sc-open .sc-hello { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sc-launch, .sc-launch::before, .sc-face-move, .sc-mascot-blink, .sc-panel:not([hidden]), .sc-leaving .sc-panel { animation: none; }
  .sc-launch, .sc-face, .sc-hello, .sc-greet .sc-hello { transition: none; }
  .sc-launch:hover, .sc-launch:active, .sc-launch:hover .sc-face, .sc-launch:focus-visible .sc-face { transform: none; }
  .sc-hello { transform: none; }
}
.sc-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.sc-panel { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 110px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.55); }
.sc-panel[hidden] { display: none; }
.sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 18px; background: var(--accent-strong); color: #fff; }
.sc-title { font-weight: 700; color: #fff; }
.sc-sub { font-size: 13px; color: rgb(255 255 255 / 0.85); }
.sc-close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgb(255 255 255 / 0.15); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.sc-close:hover { background: rgb(255 255 255 / 0.25); }
.sc-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.sc-msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-msg .sc-body { display: block; }
.sc-time { display: block; margin-top: 4px; font-size: 11px; opacity: 0.7; }
.sc-team { align-self: flex-start; background: var(--surface-2); color: var(--fg); border-bottom-left-radius: 4px; }
.sc-you { align-self: flex-end; background: var(--accent-strong); color: #fff; border-bottom-right-radius: 4px; }
.sc-form { border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 8px; }
.sc-intro { display: grid; gap: 8px; }
.sc-intro[hidden] { display: none; }
.sc-row { display: flex; gap: 8px; align-items: flex-end; }
.sc-input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--app); color: var(--fg); font: inherit; font-size: 14px; }
.sc-input::placeholder { color: var(--muted); }
.sc-text { resize: none; max-height: 120px; }
.sc-send { min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--accent-strong); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.sc-send:disabled { opacity: 0.6; cursor: progress; }
.sc-error { font-size: 13px; color: #f87171; }
:root[data-theme='light'] .sc-error { color: #b91c1c; }
@media (max-width: 639px) {
  .sc-launch { padding: 0; width: 56px; justify-content: center; }
  .sc-face { width: 62px; height: 62px; margin: -18px 0 0; }
  .sc-launch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sc-open .sc-launch { display: none; }
  .sc-panel { width: calc(100vw - 32px); height: calc(100dvh - 32px); }
}

/* ---- Sign-in pop-up (landing-signin.js) ---------------------------------------------------------- */
html.lp-signin-open { overflow: hidden; }
.lp-auth { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto; border: 0; background: transparent; color: var(--fg); overflow: visible; }
.lp-auth::backdrop { background: rgb(5 7 12 / 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
:root[data-theme='light'] .lp-auth::backdrop { background: rgb(15 23 42 / 0.4); }
.lp-auth[open] { animation: lp-signin-in 0.22s cubic-bezier(.2, .8, .2, 1); }
@keyframes lp-signin-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.lp-signin-card { position: relative; display: grid; gap: 14px; padding: 28px 24px 22px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: 0 30px 80px -24px rgb(0 0 0 / 0.65); max-height: calc(100dvh - 32px); overflow-y: auto; }
.lp-signin-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.lp-signin-close:hover { background: var(--surface-2); color: var(--fg-strong); }
.lp-signin-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lp-signin-head img { width: 40px; height: 40px; flex: none; }
.lp-signin-head h2 { font-size: 19px; }
.lp-signin-head p { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.lp-signin-step { display: grid; gap: 8px; }
.lp-signin-step[hidden], .lp-signin-error[hidden] { display: none; }
.lp-auth label { font-weight: 700; font-size: 14px; color: var(--fg-strong); }
.lp-signin-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.lp-signin-row a { font-size: 13.5px; font-weight: 600; }
.lp-auth input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--app);
  color: var(--fg); font: inherit; font-size: 16px; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
.lp-auth input::placeholder { color: var(--muted); opacity: 0.75; }
.lp-auth input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.lp-signin-pw { position: relative; }
.lp-signin-pw input { padding-right: 48px; }
.lp-signin-pw button { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer; }
.lp-signin-pw button:hover, .lp-signin-pw button[aria-pressed='true'] { color: var(--fg-strong); }
#lp-signin-code { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.18em; font-size: 18px; }
.lp-signin-help { color: var(--muted); font-size: 13px; }
.lp-signin-error { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #fca5a5; background: rgb(239 68 68 / 0.12);
  border: 1px solid rgb(239 68 68 / 0.3); }
:root[data-theme='light'] .lp-signin-error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.lp-signin-submit { width: 100%; margin-top: 2px; cursor: pointer; font: inherit; font-weight: 700; }
.lp-signin-submit:disabled { opacity: 0.75; cursor: progress; transform: none; }
.lp-signin-status:empty { display: none; }
.lp-signin-status { color: var(--muted); font-size: 13px; text-align: center; }
.lp-signin-alt { text-align: center; color: var(--muted); font-size: 14px; }
.lp-auth [hidden] { display: none !important; }
.lp-signin-back { justify-self: center; border: 0; background: none; padding: 6px 10px; border-radius: 8px; color: var(--accent); font: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lp-signin-back:hover { color: var(--fg-strong); }
.lp-signin-sent { padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--soft); font-size: 14.5px; line-height: 1.55; }
.lp-signin-sent strong { color: var(--fg-strong); overflow-wrap: anywhere; }
@media (max-width: 399px) { .lp-signin-card { padding: 24px 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .lp-auth[open] { animation: none; } }

/* ---- Header hides on scroll down, returns on scroll up (landing-nav.js) ---------------------------- */
.lp-header { transition: transform 0.3s cubic-bezier(.2, .8, .2, 1); }
.lp-header.lp-header-hidden { transform: translateY(calc(-100% - 2px)); }
@media (prefers-reduced-motion: reduce) { .lp-header { transition: none; } }

/* ---- Social links: header (wide screens), mobile menu, footer --------------------------------------- */
.lp-social { display: flex; align-items: center; gap: 4px; }
.lp-social a.lp-social-link { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--muted);
  text-decoration: none; transition: color 140ms ease, background 140ms ease, transform 140ms ease; }
.lp-social a.lp-social-link:hover, .lp-social a.lp-social-link:focus-visible { color: var(--fg-strong); background: var(--surface-2); transform: translateY(-1px); text-decoration: none; }
.lp-social a.lp-social-facebook:hover { color: #1877f2; }
.lp-social a.lp-social-discord:hover { color: #5865f2; }
.lp-social a.lp-social-linkedin:hover { color: #0a66c2; }
.lp-social a.lp-social-youtube:hover { color: #ff0000; }
.lp-social-header { display: none; margin-right: 6px; padding-right: 10px; border-right: 1px solid var(--line); }
@media (min-width: 1560px) { .lp-social-header { display: flex; } }
/* Wide screens: the icons sit in the free space at the far right of the header bar, outside the content column. */
@media (min-width: 1560px) {
  .lp-social-header { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; border: 0; }
}
.lp-menu nav .lp-social-menu { padding: 2px 8px 6px; gap: 6px; }
.lp-menu nav .lp-social-menu a.lp-social-link { width: 44px; height: 44px; background: var(--surface-2); border-radius: 12px; }
.lp-social-footer { margin-left: -8px; }

/* Card hover: lift a little and glow in the accent colour (mouse users only). */
.lp-features li, .lp-plan, .lp-steps li { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
.lp-steps li::before { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.lp-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  .lp-features li:hover, .lp-plan:hover, .lp-steps li:hover {
    transform: translateY(-6px);
    border-color: rgb(129 140 248 / 0.55);
    background-color: var(--surface-2);
    box-shadow: 0 0 0 1px rgb(129 140 248 / 0.25), 0 18px 44px -14px rgb(99 102 241 / 0.55), 0 0 36px -6px rgb(124 92 255 / 0.35);
  }
  .lp-steps li:hover::before { transform: scale(1.12); box-shadow: 0 0 0 4px rgb(99 102 241 / 0.2), 0 0 18px rgb(124 92 255 / 0.6); }
  .lp-card:hover { transform: translateY(-2px); border-color: rgb(129 140 248 / 0.5); box-shadow: 0 8px 20px -10px rgb(99 102 241 / 0.6); }
  :root[data-theme='light'] .lp-features li:hover, :root[data-theme='light'] .lp-plan:hover, :root[data-theme='light'] .lp-steps li:hover {
    background-color: #fff; border-color: rgb(79 70 229 / 0.4);
    box-shadow: 0 0 0 1px rgb(79 70 229 / 0.15), 0 20px 40px -16px rgb(79 70 229 / 0.35), 0 0 32px -8px rgb(129 140 248 / 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-features li, .lp-plan, .lp-steps li, .lp-steps li::before, .lp-card { transition: none; }
  .lp-features li:hover, .lp-plan:hover, .lp-steps li:hover, .lp-steps li:hover::before, .lp-card:hover { transform: none; }
}

/* ---- Hero: cinematic aurora + liquid glass (visual only; markup unchanged) ------------------------- */
:root, :root[data-theme='dark'] {
  --hero-bg: #090b12;
  --aurora-violet: rgb(124 77 255 / 0.30); --aurora-blue: rgb(59 91 255 / 0.24); --aurora-cyan: rgb(34 211 238 / 0.14);
  --hero-grid: rgb(148 163 255 / 0.055);
  --glass-bg: linear-gradient(160deg, rgb(30 36 56 / 0.62) 0%, rgb(14 17 28 / 0.58) 100%);
  --glass-line: rgb(255 255 255 / 0.09); --glass-edge-hi: rgb(255 255 255 / 0.22); --glass-edge-lo: rgb(129 140 248 / 0.18);
  --glass-col: rgb(255 255 255 / 0.035); --glass-card: rgb(14 18 30 / 0.72);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.07) inset, 0 40px 80px -32px rgb(0 0 0 / 0.75), 0 24px 60px -30px rgb(88 70 230 / 0.45);
  --nav-glass: rgb(9 11 18 / 0.62); --nav-line: rgb(255 255 255 / 0.07);
}
:root[data-theme='light'] {
  --hero-bg: #f3f5fb;
  --aurora-violet: rgb(139 92 246 / 0.20); --aurora-blue: rgb(79 112 255 / 0.16); --aurora-cyan: rgb(34 211 238 / 0.14);
  --hero-grid: rgb(67 56 202 / 0.06);
  --glass-bg: linear-gradient(160deg, rgb(255 255 255 / 0.82) 0%, rgb(255 255 255 / 0.62) 100%);
  --glass-line: rgb(15 23 42 / 0.08); --glass-edge-hi: rgb(255 255 255 / 0.95); --glass-edge-lo: rgb(99 102 241 / 0.22);
  --glass-col: rgb(241 245 249 / 0.72); --glass-card: rgb(255 255 255 / 0.92);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 40px 80px -36px rgb(15 23 42 / 0.30), 0 24px 60px -32px rgb(79 70 229 / 0.30);
  --nav-glass: rgb(255 255 255 / 0.66); --nav-line: rgb(15 23 42 / 0.07);
}

.lp-hero { position: relative; isolation: isolate; overflow: clip;
  background: linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg) 78%, var(--app) 100%); }
/* Aurora: soft light pools, mostly behind the board (right on desktop, lower half on phones). */
.lp-hero::before { content: ''; position: absolute; inset: -12% -10% 0; z-index: -2; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  background:
    radial-gradient(38% 34% at 72% 48%, var(--aurora-violet), transparent 70%),
    radial-gradient(30% 30% at 88% 22%, var(--aurora-blue), transparent 72%),
    radial-gradient(26% 24% at 62% 70%, var(--aurora-cyan), transparent 72%),
    radial-gradient(30% 26% at 8% 6%, rgb(99 102 241 / 0.10), transparent 70%);
  will-change: transform; animation: lp-aurora 28s ease-in-out infinite alternate; }
/* Faint technical grid that fades toward the edges. */
.lp-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 66% at 62% 42%, #000 15%, transparent 75%); mask-image: radial-gradient(70% 66% at 62% 42%, #000 15%, transparent 75%); }
@keyframes lp-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.03); }
}
@media (max-width: 899px) {
  .lp-hero::before { background:
    radial-gradient(60% 26% at 55% 72%, var(--aurora-violet), transparent 70%),
    radial-gradient(44% 20% at 85% 60%, var(--aurora-blue), transparent 72%),
    radial-gradient(40% 18% at 25% 88%, var(--aurora-cyan), transparent 72%),
    radial-gradient(50% 20% at 10% 8%, rgb(99 102 241 / 0.10), transparent 70%); }
  .lp-hero::after { -webkit-mask-image: radial-gradient(90% 60% at 50% 60%, #000 15%, transparent 75%); mask-image: radial-gradient(90% 60% at 50% 60%, #000 15%, transparent 75%); }
}

/* Primary CTA: refined violet gradient with a soft glow. */
.lp-btn-primary { background: linear-gradient(135deg, #5b5bf6 0%, #6d48ef 50%, #8b3ff0 100%); background-size: 140% 100%; background-position: 0% 50%;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 0 0 1px rgb(139 92 246 / 0.35), 0 10px 28px -10px rgb(109 72 239 / 0.75);
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), box-shadow 260ms ease, background-position 400ms ease; }
.lp-btn-primary:hover { background-position: 100% 50%;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.28) inset, 0 0 0 1px rgb(167 139 250 / 0.5), 0 14px 34px -10px rgb(124 77 255 / 0.85), 0 0 28px -6px rgb(139 92 246 / 0.55); }
.lp-btn-primary:active { transform: translateY(0); }
.lp-hero .lp-btn-ghost { background: color-mix(in srgb, var(--surface) 55%, transparent); border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Navigation bar: translucent glass. */
.lp-header { background: var(--nav-glass); border-bottom-color: var(--nav-line);
  -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset; }

@media (prefers-reduced-motion: reduce) {
  .lp-hero::before { animation: none; }
  .lp-btn-primary { transition: none; }
}
.lp-btn-primary[aria-disabled='true']:hover { background-position: 0% 50%; box-shadow: none; }

/* ---- Hero product showcase: real screenshots in a floating glass frame ----------------------------- */
.lp-shot { position: relative; margin: 0; min-width: 0; padding-bottom: 36px; animation: lp-shot-in 0.9s cubic-bezier(.2, .8, .2, 1) both; }
/* Ambient purple/blue glow behind the frame. */
.lp-shot::before { content: ''; position: absolute; inset: -10% -6% 0; z-index: -1; pointer-events: none; border-radius: 40%;
  background: radial-gradient(50% 50% at 55% 45%, rgb(124 77 255 / 0.38), transparent 70%), radial-gradient(40% 40% at 80% 70%, rgb(59 130 246 / 0.22), transparent 72%);
  filter: blur(30px); opacity: 0.9; }
:root[data-theme='light'] .lp-shot::before { opacity: 0.55; }
.lp-shot-frame { position: relative; padding: 8px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
/* Hairline gradient edge: brighter at the top-left, like light catching glass. */
.lp-shot-frame::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, var(--glass-edge-hi) 0%, transparent 30%, transparent 62%, var(--glass-edge-lo) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lp-shot-screen { position: relative; overflow: hidden; border-radius: 13px; aspect-ratio: 1440 / 900; background: var(--hero-bg);
  box-shadow: 0 0 0 1px var(--glass-line); }
.lp-shot-screen picture, .lp-shot-screen img { display: block; width: 100%; height: 100%; }
.lp-shot-screen img { object-fit: cover; object-position: left top; }
/* Inner top highlight so the screenshot reads as a lit screen. */
.lp-shot-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 22%); }
/* Floating COSMO Review card. */
.lp-shot-review { position: absolute; right: 10px; bottom: 0; width: min(62%, 300px); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 24px 48px -18px rgb(0 0 0 / 0.7), 0 12px 40px -16px rgb(109 72 239 / 0.55);
  animation: lp-review-in 0.8s 0.35s cubic-bezier(.2, .8, .2, 1) both, lp-float 7s 1.3s ease-in-out infinite; }
:root[data-theme='light'] .lp-shot-review { box-shadow: 0 24px 48px -20px rgb(15 23 42 / 0.35), 0 12px 36px -18px rgb(79 70 229 / 0.4); }
.lp-shot-review img { display: block; width: 100%; height: auto; }
/* One screenshot per theme; the hidden one is never downloaded (lazy + display: none). */
.lp-shot-light { display: none !important; }
:root[data-theme='light'] .lp-shot-light { display: block !important; }
:root[data-theme='light'] .lp-shot-dark { display: none !important; }
@media (max-width: 639px) { .lp-shot-screen { aspect-ratio: 720 / 570; } }
@media (min-width: 900px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .lp-shot { padding-bottom: 0; }
  .lp-shot-frame { animation: lp-float 11s 1.2s ease-in-out infinite; }
  .lp-shot-review { right: -8px; bottom: -48px; width: 42%; max-width: 310px; }
}
/* Wide screens: the frame grows toward the free space on the right. */
@media (min-width: 1360px) { .lp-shot { margin-right: -96px; } }
@media (min-width: 1440px) { .lp-shot-review { right: -28px; } }
/* Floating phone with the real mobile Overview (tablet and up; phones already see a close crop). */
.lp-shot-phone { display: none; }
@media (min-width: 640px) {
  .lp-shot { padding-bottom: 72px; }
  .lp-shot-phone { display: block; position: absolute; left: 18%; bottom: 0; z-index: 2; width: 22%; max-width: 190px; padding: 5px; border-radius: 30px;
    background: linear-gradient(160deg, #2a3042 0%, #0c0f18 45%, #1b2030 100%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12) inset, 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 30px 60px -20px rgb(0 0 0 / 0.75), 0 16px 48px -18px rgb(109 72 239 / 0.6);
    animation: lp-review-in 0.8s 0.5s cubic-bezier(.2, .8, .2, 1) both, lp-float 8s 2s ease-in-out infinite; }
  :root[data-theme='light'] .lp-shot-phone { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12) inset, 0 30px 60px -24px rgb(15 23 42 / 0.45), 0 16px 44px -20px rgb(79 70 229 / 0.45); }
  /* Camera pill. */
  .lp-shot-phone::before { content: ''; position: absolute; top: 10px; left: 50%; z-index: 1; width: 28%; height: 9px; border-radius: 999px; transform: translateX(-50%); background: #05060a; }
  /* Status-bar gap (in the app's own top colour) so the camera pill clears the app header, as on a real phone. */
  .lp-shot-phone-screen { position: relative; overflow: hidden; border-radius: 25px; padding-top: 16px; background: #1a1a33; }
  :root[data-theme='light'] .lp-shot-phone-screen { background: #dbdef7; }
  .lp-shot-phone-screen img { display: block; width: 100%; height: auto; }
  .lp-shot-phone-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(160deg, rgb(255 255 255 / 0.10), transparent 28%); }
}
/* Desktop: the phone stands over the frame's lower-left, just right of the sidebar so its menu stays readable. */
@media (min-width: 900px) {
  .lp-shot { padding-bottom: 72px; }
  .lp-shot-phone { left: 17%; width: 25%; }
  .lp-shot-review { bottom: 24px; }
}

/* "iOS & Android app · Soon" badge: above the frame (in the flow on phones/tablets, floating over the frame on desktop). */
.lp-shot-apps { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 auto 20px; padding: 6px 6px 6px 14px; border-radius: 999px;
  white-space: nowrap; color: var(--fg-strong); font-size: 13px; font-weight: 700; line-height: 1;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 12px 30px -14px rgb(109 72 239 / 0.6);
  animation: lp-review-in 0.8s 0.6s cubic-bezier(.2, .8, .2, 1) both; }
.lp-shot-apps svg { flex: none; display: block; }
.lp-shot-apps svg + svg { color: #3ddc84; }
:root[data-theme='light'] .lp-shot-apps svg + svg { color: #15a05a; }
.lp-shot-apps-label { margin-left: 2px; color: var(--soft); }
.lp-shot-apps-soon { padding: 6px 11px; border-radius: 999px; color: #fff; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; font-weight: 800;
  background: linear-gradient(135deg, #5b5bf6 0%, #8b3ff0 100%); box-shadow: 0 0 16px -2px rgb(139 92 246 / 0.7); }
@media (min-width: 900px) {
  .lp-shot-apps { position: absolute; left: 50%; top: -66px; z-index: 3; margin: 0; translate: -50% 0; }
}

@keyframes lp-shot-in { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); } }
@keyframes lp-review-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.96); } }
@keyframes lp-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .lp-shot, .lp-shot-frame, .lp-shot-review, .lp-shot-phone, .lp-shot-apps { animation: none; }
}

/* ---- /apps: desktop, mobile and Adobe downloads ------------------------------------------------------------------ */
.lp-apps-hero { padding: 48px 0 8px; }
.lp-apps-hero h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; max-width: 46rem; }
.lp-apps-hero .lp-lead { max-width: 44rem; }
.lp-apps-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lp-apps-jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 14px; font-weight: 600; text-decoration: none; }
.lp-apps-jump a:hover { background: var(--surface-2); color: var(--fg-strong); }
.lp-apps-section { padding: 48px 0; }
.lp-apps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.lp-app { display: flex; flex-direction: column; gap: 14px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.lp-app-head { display: flex; align-items: flex-start; gap: 14px; }
.lp-app-head > div { min-width: 0; flex: 1; }
.lp-app h3 { font-size: 1.08rem; font-weight: 700; }
.lp-app-for { margin-top: 2px; font-size: 13px; color: var(--muted); }
.lp-app-icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #fff; }
.lp-app-web { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.lp-app-windows { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.lp-app-apple { background: linear-gradient(135deg, #475569, #0f172a); }
.lp-app-android { background: linear-gradient(135deg, #22c55e, #15803d); }
.lp-app-premiere { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.lp-app-aftereffects { background: linear-gradient(135deg, #6366f1, #312e81); }
.lp-app-desc { color: var(--soft); font-size: 15px; }
.lp-app-steps { margin: 0; padding: 12px 14px 12px 34px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--soft); font-size: 14px; display: grid; gap: 4px; }
.lp-app-action { margin-top: auto; padding-top: 4px; }
.lp-app-action .lp-btn { width: 100%; white-space: normal; text-align: center; }
.lp-app-meta { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.lp-app-note { margin-top: 6px; font-size: 13px; color: var(--muted); }
.lp-btn-ghost[aria-disabled='true'] { opacity: 0.7; cursor: default; }
.lp-apps-help { padding: 40px 0 72px; }
.lp-apps-help h2 { font-size: clamp(1.3rem, 3.6vw, 1.7rem); }
@media (min-width: 640px) {
  .lp-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-apps-hero { padding-top: 64px; }
}
@media (min-width: 1080px) {
  .lp-apps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
a.lp-shot-apps { text-decoration: none; }
a.lp-shot-apps:hover { color: var(--fg-strong); border-color: var(--glass-edge-lo); }
.lp-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.lp-crumbs a { color: var(--muted); text-decoration: none; }
.lp-crumbs a:hover { color: var(--fg-strong); }

/* Status page (/status). Impact colours: maintenance blue, partial outage amber, major outage red, operational green. */
.lp-status { --st-ok: #22c55e; --st-maint: #60a5fa; --st-minor: #f59e0b; --st-major: #ef4444; --st-unknown: #94a3b8; }
:root[data-theme='light'] .lp-status { --st-ok: #15803d; --st-maint: #1d4ed8; --st-minor: #b45309; --st-major: #b91c1c; --st-unknown: #475569; }
.lp-status h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; }
.lp-status-overall { --st: var(--st-ok); margin-top: 28px; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--st) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--st) 55%, transparent); }
.lp-status-overall p { display: flex; flex-direction: column; gap: 2px; font-size: 1.1rem; color: var(--fg-strong); }
.lp-status-overall small { font-size: 13px; color: var(--muted); }
.lp-status-unknown p { font-size: 1rem; display: block; color: var(--soft); }
.lp-status-unknown strong { color: var(--fg-strong); }
.lp-status-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 5px color-mix(in srgb, var(--st) 22%, transparent); }
.lp-status-maintenance { --st: var(--st-maint); }
.lp-status-minor { --st: var(--st-minor); }
.lp-status-major { --st: var(--st-major); }
.lp-status-unknown { --st: var(--st-unknown); }
.lp-incident, .lp-incident-past { --st: var(--st-minor); }
.lp-impact-maintenance { --st: var(--st-maint); }
.lp-impact-major { --st: var(--st-major); }
.lp-incident { margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.lp-incident header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 14px 20px;
  background: color-mix(in srgb, var(--st) 22%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--st) 45%, transparent); }
.lp-incident h2 { font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.lp-incident-tag { flex: none; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--fg-strong);
  background: color-mix(in srgb, var(--st) 30%, transparent); border: 1px solid color-mix(in srgb, var(--st) 60%, transparent); }
.lp-incident-updates { list-style: none; margin: 0; padding: 4px 20px 6px; }
.lp-incident-updates li { padding: 14px 0; border-top: 1px solid var(--line); }
.lp-incident-updates li:first-child { border-top: 0; }
.lp-incident-updates p { color: var(--soft); overflow-wrap: anywhere; }
.lp-incident-updates strong { color: var(--fg-strong); }
.lp-incident-updates time { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.lp-incident-affects { padding: 0 20px 16px; font-size: 14px; color: var(--muted); }
.lp-status-h { margin-top: 44px; font-size: 1.25rem; font-weight: 700; }
.lp-components { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lp-components li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 13px 18px; border-top: 1px solid var(--line); }
.lp-components li:first-child { border-top: 0; }
.lp-components li > span:first-child { color: var(--fg-strong); font-weight: 600; }
.lp-component-state { --st: var(--st-ok); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--st); }
.lp-component-state::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.lp-state-maintenance { --st: var(--st-maint); }
.lp-state-minor { --st: var(--st-minor); }
.lp-state-major { --st: var(--st-major); }
.lp-status-none { margin-top: 12px; color: var(--muted); }
.lp-incident-past { margin-top: 12px; border: 1px solid var(--line); border-left: 4px solid var(--st); border-radius: 12px; background: var(--surface); }
.lp-incident-past summary { cursor: pointer; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.lp-incident-past summary::-webkit-details-marker { display: none; }
.lp-incident-past-title { color: var(--fg-strong); font-weight: 600; overflow-wrap: anywhere; }
.lp-incident-past summary small { font-size: 13px; color: var(--muted); }
.lp-incident-past .lp-incident-updates { border-top: 1px solid var(--line); padding: 0 18px 4px; }