/* Fortunest site — the "Cosmos" style (Josef, 11.11.2026). Loaded LAST by every page; every rule here is an
   override of styles.css (and of docs/docs.css, guides/guides.css) scoped to class="cosmos" on <html>, which
   site-style.js gives every page before it paints — and withholds for ?style=light, so the light test view
   (and a page with JavaScript off) is exactly the site as those sheets paint it. cosmos.js is the script half: the point cloud,
   the cursor's light, and the data-rd-* marks it sets on the elements it lights.

   .cosmos        every page: the dark tokens, glass in place of white surfaces, nav, buttons, footer
   .cosmos-home   the home page only: its hero, its spacing and its type
   .rd-*          elements the engine itself creates (the canvas, the glow, the HUD) or the home page's own
                  hero pieces (.rd-hero-in, .rd-eyebrow, .rd-soft, .rd-duo) */

.cosmos body { background: transparent; overflow-x: clip; }

/* The page-wide background canvas (A, C): fixed behind everything. With the
   body transparent it paints over the root background and under the page. */
/* 100lvh: the tallest the window gets. On a phone "100%" follows the toolbar as it slides away, which resized
   the canvas — and so the cloud — all through a vertical drag. */
.rd-fx-page { position: fixed; inset: 0; width: 100%; height: 100%; height: 100lvh; z-index: -1; pointer-events: none; }



/* ---- Hero pieces the three heroes share -------------------------------- */
.cosmos .rd-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--head);
}
.cosmos .rd-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px #a9c800; }
.cosmos .rd-quiet { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 20px 0 0; font-size: 14.5px; }
.cosmos .rd-quiet a { color: var(--body); font-weight: 400; text-decoration: underline; text-decoration-color: var(--grey-line); text-underline-offset: 4px; }
.cosmos .rd-quiet a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.cosmos .hero .cta-row .btn { padding: 14px 28px; font-size: 16px; }
.cosmos .hero-facts { column-gap: 8px; row-gap: 8px; margin-top: 26px; }
.cosmos .hero-facts span + span::before { content: none; }
/* a fact may carry spans of its own (one wording per breakpoint, a live price): those are not chips */
.cosmos .hero-facts span span { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; }
.cosmos .hero-facts > span > a { color: inherit; }
.cosmos .hero-facts span { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.55); font-size: 12.5px; color: var(--body); }

/* ---- Section eyebrows: a short label above each section title ---------- */
.cosmos .section h2.display-t::before {
  display: table; margin: 0 0 18px; padding-left: 18px;
  font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  background: radial-gradient(circle at 5px 50%, var(--accent) 0 4px, #a9c800 4px 5px, transparent 5.5px) no-repeat;
}
.cosmos #steps h2::before { content: "How it works"; }
.cosmos #scenarios h2::before { content: "Scenarios"; }
.cosmos #anyscreen h2::before { content: "Every device"; }
.cosmos #privacy h2::before { content: "Privacy"; }
.cosmos #mission h2::before { content: "For everyone"; }
.cosmos #pricing h2::before { content: "Pricing"; }
.cosmos #faq h2::before { content: "FAQ"; }
.cosmos #local h2::before { content: "Desktop"; }
.cosmos #siri h2::before { content: "Voice"; }

/* ---- Ticks: a lime disc carrying the check, instead of a green glyph --- */
.cosmos .ticks li { padding-left: 32px; }
.cosmos .ticks li::before {
  content: ""; top: 11px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.6-5' fill='none' stroke='%232b2924' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* color-scheme: native scrollbars and form controls are drawn for a dark page too */
html.cosmos { background: #090b0a; color-scheme: dark; }
.cosmos {
  --ink: #fff; --head: rgba(255, 255, 255, 0.94); --body: rgba(255, 255, 255, 0.72); --muted: rgba(255, 255, 255, 0.5); --mark: rgba(255, 255, 255, 0.42);
  --hairline: rgba(255, 255, 255, 0.14); --grey-line: rgba(255, 255, 255, 0.32); --wash: rgba(255, 255, 255, 0.09); --tint: rgba(255, 255, 255, 0.06);
  --link: #dcff26; --ground: #090b0a; --surface: rgba(255, 255, 255, 0.055); font-weight: 300;
}
/* Light again inside everything that is a light surface. */
.cosmos .hf-card, .cosmos .sc-card, .cosmos .dm-panel, .cosmos .fx-strip, .cosmos .sc-arrow, .cosmos .hf-hint, .cosmos .browser-frame,
.cosmos .site-tip, .cosmos #anyscreen > .section-inner, .cosmos #mission > .section-inner, .cosmos #local > .section-inner, .cosmos #siri > .section-inner {
  --ink: #16181b; --head: #4a4f56; --body: #5f646b; --muted: #8d939b; --mark: #b4b8be;
  --hairline: rgba(15, 17, 20, 0.09); --grey-line: #c6c9cd; --wash: rgba(15, 17, 20, 0.032); --tint: #fafbfc;
  --link: #1a4300; --ground: #f4f5f7; color: var(--body);
}
.cosmos .rd-fx-page { z-index: -2; }
.cosmos body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(70% 60% at 76% 8%, rgba(108, 140, 0, 0.32), transparent 70%), radial-gradient(60% 50% at 8% 90%, rgba(40, 70, 60, 0.35), transparent 70%);
}
/* A pool of lime light under the cursor. */
.rd-glow {
  position: fixed; left: 0; top: 0; z-index: -1; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220, 255, 38, 0.13), transparent); transform: translate3d(var(--x, -999px), var(--y, -999px), 0);
}
/* What the cloud is showing, bottom right. Decorative: it never takes the pointer from what is under it. */

/* ---- Nav ------------------------------------------------------------------ */
.cosmos .nav { background: rgba(9, 11, 10, 0.55); border-bottom-color: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.cosmos .nav-inner { max-width: 1240px; }
@media (min-width: 1181px) { .cosmos .nav-inner { padding: 0 32px; } }
.cosmos .nav-links a { font-weight: 350; opacity: 0.85; color: #fff; }
.cosmos .nav-links a:hover { opacity: 1; }
/* The menu on a narrow screen: a dark, blurred pane (it was the glass of a card — the page showed through and the
   links could not be read). A blur inside a blurred parent only sees that parent, so the bar gives up its own
   blur while the menu is open and turns nearly solid instead. */
@media (max-width: 999px) {
  .cosmos .nav.menu-open { background: rgba(9, 11, 10, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* glass like the page's cards (Josef, 12.11.2026: "more transparent and glassy - similar to other transparent cards
     on the page"): a faint white wash over the page, which the blur and a dimming keep readable behind the links */
  .cosmos .nav-links { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(26px) saturate(1.4) brightness(0.72); backdrop-filter: blur(26px) saturate(1.4) brightness(0.72); box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  .cosmos .nav-links a, .cosmos .nav-links .nav-menu-only { opacity: 1; color: #fff; }
  .cosmos .nav-links a:hover { background: rgba(255, 255, 255, 0.08); }
}

/* ---- Hero ------------------------------------------------------------------ */
.cosmos .hero { max-width: 1240px; padding: 0 32px; min-height: min(84vh, 800px); display: flex; align-items: center; }
.cosmos .rd-hero-in { max-width: 640px; padding: 56px 0 70px; }
.cosmos .hero .rd-eyebrow i { box-shadow: 0 0 16px 3px rgba(220, 255, 38, 0.6); }
.cosmos .hero h1 { margin-top: 22px; font-size: clamp(38px, 4.6vw, 64px); font-weight: 300; letter-spacing: -0.036em; line-height: 1.04; color: #fff; }
.cosmos .hero h1 .rd-soft, .cosmos .section h2.display-t {
  background: linear-gradient(100deg, #fff 30%, #dcff26 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cosmos .hero h1 .rd-soft { background: none; color: #dcff26; -webkit-text-fill-color: #dcff26; }
.cosmos .hero .sub { margin-top: 24px; max-width: 590px; font-size: 18.5px; line-height: 1.55; }
.cosmos .hero .cta-row { justify-content: flex-start; margin-top: 32px; }
.cosmos .btn-primary { box-shadow: 0 0 46px -6px rgba(220, 255, 38, 0.55); }
.cosmos .btn-ghost { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cosmos .btn-ghost:hover { border-color: #fff; }
.cosmos .hero-facts { justify-content: flex-start; }
.cosmos .hero-facts span { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.7); }

/* ---- Product shot ----------------------------------------------------------- */
.cosmos .product { padding: 10px 0 70px; }
.cosmos .browser-frame { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 120px -20px rgba(220, 255, 38, 0.42), 0 60px 120px -50px #000; }
.cosmos .bf-chrome { background: #16181b; border-bottom-color: rgba(255, 255, 255, 0.08); }
.cosmos .bf-dot { background: rgba(255, 255, 255, 0.2); }
.cosmos .bf-url { background: rgba(255, 255, 255, 0.07); border-color: transparent; color: rgba(255, 255, 255, 0.6); }

/* ---- Sections ---------------------------------------------------------------- */
/* The spacing and type below are the HOME page's (class cosmos-home on its <html>): the other pages keep the
   measures of their own sheets, so only colour changes there. */
.cosmos .section { border-top: 0; background: none; }
.cosmos-home .section { padding: 100px 0; }
.cosmos-home .hf-section { padding-top: 50px; }
.cosmos-home .section-inner { max-width: 1240px; padding: 0 32px; }
.cosmos .section h2.display-t { width: fit-content; padding-bottom: 0.08em; }
.cosmos-home .section h2.display-t { font-size: clamp(36px, 5vw, 68px); font-weight: 300; letter-spacing: -0.036em; line-height: 1.06; }
.cosmos .section h2.display-t::before { margin-bottom: 22px; color: rgba(255, 255, 255, 0.62); -webkit-text-fill-color: rgba(255, 255, 255, 0.62); }
.cosmos-home .section-sub { font-size: 19px; line-height: 1.55; max-width: 720px; }
.cosmos .voice-heading-detail { -webkit-text-fill-color: #a3a8af; }
/* Islands. */
.cosmos #anyscreen, .cosmos #mission, .cosmos #local, .cosmos #siri { padding: 40px 24px; }
.cosmos #anyscreen > .section-inner, .cosmos #mission > .section-inner, .cosmos #local > .section-inner, .cosmos #siri > .section-inner {
  max-width: 1240px; padding: 76px 64px; border-radius: 52px; background: #f4f5f7;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 140px -30px rgba(220, 255, 38, 0.35);
}
.cosmos #anyscreen h2.display-t, .cosmos #mission h2.display-t, .cosmos #local h2.display-t, .cosmos #siri h2.display-t {
  background: none; color: #16181b; -webkit-text-fill-color: currentColor;
}
.cosmos #anyscreen h2.display-t::before, .cosmos #mission h2.display-t::before, .cosmos #local h2.display-t::before, .cosmos #siri h2.display-t::before {
  color: #6b7076; -webkit-text-fill-color: #6b7076;
}

/* ---- Cards -------------------------------------------------------------------- */
.cosmos .hf-card { box-shadow: 0 0 70px -20px rgba(220, 255, 38, 0.45); }
.cosmos .hf-line .seg { opacity: 0.7; }
/* the cards keep the live sheet's width (330px since 12.11.2026) and 14px gaps: the rail's arrows, snapping and level tabs count in them */
.cosmos .sc-card { border-radius: 22px; border: 0; transition: transform 0.25s ease, box-shadow 0.25s ease; }
/* no lift on hover: the cards are scroll-snap targets, and moving one under the pointer re-snaps the rail mid-scroll */
.cosmos .sc-card:hover { box-shadow: 0 0 0 2px #dcff26, 0 0 70px -12px rgba(220, 255, 38, 0.6); }
.cosmos .sc-card h4 { font-size: 15.5px; font-weight: 450; color: #16181b; }
.cosmos .sc-card p { font-size: 13.5px; font-weight: 300; }
/* the rail keeps the live sheet's 2px side padding: main.js finds the level in view from it */
.cosmos .sc-rail { padding: 14px 2px 30px; scrollbar-width: none; }
.cosmos .dm-panel { background: #f4f5f7; border-radius: 28px; box-shadow: 0 0 110px -30px rgba(220, 255, 38, 0.35); }
.cosmos .privacy-grid { margin-top: 56px; }
.cosmos .p-item h4 { border-top: 1px solid rgba(255, 255, 255, 0.5); padding-top: 18px; font-size: 16px; font-weight: 400; color: #fff; }
.cosmos-home .ticks li { font-size: 16px; font-weight: 300; }
.cosmos .mission-grid { align-items: center; gap: 64px; }

/* ---- Pricing ------------------------------------------------------------------- */
.cosmos .pricing-grid { margin-top: 48px; gap: 22px; }
.cosmos .pricing-card {
  border-radius: 28px; padding: 34px 34px 32px; gap: 8px; background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cosmos #pc-pro { border-color: rgba(220, 255, 38, 0.7); box-shadow: 0 0 100px -24px rgba(220, 255, 38, 0.45), inset 0 0 0 1px rgba(220, 255, 38, 0.18); }
.cosmos .pc-name { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: #fff; }
.cosmos .pc-price { font-size: 62px; font-weight: 300; letter-spacing: -0.04em; margin-top: 8px; }
.cosmos .pc-price .pc-per { font-size: 17px; letter-spacing: 0; color: var(--muted); }
.cosmos .pc-cta .btn { display: block; text-align: center; padding: 13px 20px; font-size: 15.5px; }
.cosmos #pc-pro .pc-cta .btn { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 500; }
/* A phone shows one plan at a time (the strip above it picks Free or Pro): the card is set to fit the screen
   under the bar and the strip, about 600px on a 390 x 844 phone (Josef, 12.11.2026: "the plan cards on phone
   should be more compact so that section fits all on the screen"; it was 890px). The same words, closer set. */
@media (max-width: 640px) {
  .cosmos .pricing-grid { margin-top: 12px; }
  .cosmos .pc-switch { margin-top: 18px; }
  .cosmos .pricing-card { border-radius: 22px; padding: 18px 18px 16px; gap: 3px; }
  .cosmos .pc-head { margin-bottom: 0; gap: 8px; }
  .cosmos .pc-head .acct-plan-chip { font-size: 10.5px; padding: 3px 9px; }
  .cosmos .pc-price { font-size: 40px; line-height: 1.05; margin-top: 4px; }
  .cosmos .pc-price .pc-per { font-size: 15px; }
  .cosmos .pc-note, .cosmos .pc-alt { font-size: 13px; line-height: 1.4; }
  .cosmos .pc-trial-tile { padding: 7px 11px; margin: 6px 0 4px; font-size: 12.5px; line-height: 1.35; }
  .cosmos .pc-trial-tile strong { font-size: 13.5px; }
  .cosmos .pc-adds { margin-top: 8px; font-size: 13px; }
  .cosmos .pc-feats li { padding: 3px 0 3px 26px; font-size: 13.5px; line-height: 1.4; }
  .cosmos .pc-feats li::before { top: 5px; width: 16px; height: 16px; background-size: 11px; }
  .cosmos .pc-cta { padding-top: 12px; }
  .cosmos .pc-cta .btn { padding: 10px 18px; font-size: 14.5px; }
  .cosmos .pc-cta-note { font-size: 12.5px; }
}

/* ---- FAQ ------------------------------------------------------------------------ */
.cosmos #faq .faq-list { margin-top: 36px; gap: 0 64px; }
.cosmos #faq summary.faq-q { font-size: 17.5px; }

@media (max-width: 900px) {
  .cosmos .hero { padding: 0 20px; min-height: 0; align-items: flex-start; }
  /* The copy starts under the nest: 30px of air below the bar, the nest's ring (0.78 of its size — cosmos.js: the
     smaller of 0.42 of its unit, 37.06% of the window's height, and 72.8% of its width) and 14px. */
  .cosmos .rd-hero-in { padding: calc(44px + min(28.9vh, 56.8vw)) 0 40px; }
  @supports (height: 100lvh) { .cosmos .rd-hero-in { padding-top: calc(44px + min(28.9lvh, 56.8vw)); } }
  /* "Any screen": the device clip a little wider than the screen (the devices fill 82% of its frame at rest,
     and almost all of it only while they turn), so they are as large as a phone can show them. */
  .cosmos #anyscreen { overflow-x: hidden; overflow-x: clip; }
  .cosmos #anyscreen .rd-duo { width: 108vw; max-width: none; margin-left: calc(50% - 54vw); margin-right: calc(50% - 54vw); }
  .cosmos-home .section { padding: 70px 0; }
  .cosmos-home .section-inner { padding: 0 20px; }
  .cosmos #anyscreen, .cosmos #mission, .cosmos #local, .cosmos #siri { padding: 20px 10px; }
  .cosmos #anyscreen > .section-inner, .cosmos #mission > .section-inner, .cosmos #local > .section-inner, .cosmos #siri > .section-inner { padding: 44px 22px; border-radius: 34px; }
  .cosmos .hero-facts { flex-direction: row; align-items: flex-start; }
}

/* ---- The cursor's light ------------------------------------------------------ */
.cosmos .rd-glow {
  width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: 0; transition: opacity 0.4s; will-change: transform;
  background: radial-gradient(closest-side, rgba(220, 255, 38, 0.17), rgba(110, 255, 190, 0.06) 55%, transparent);
}
.rd-glow-core {
  position: fixed; left: 0; top: 0; z-index: -1; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220, 255, 38, 0.36), rgba(220, 255, 38, 0.09) 55%, transparent); opacity: 0; transition: opacity 0.4s; will-change: transform;
}
.rd-ripple {
  position: fixed; z-index: 90; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid #dcff26; box-shadow: 0 0 26px rgba(220, 255, 38, 0.55), inset 0 0 14px rgba(220, 255, 38, 0.35);
  animation: rd-ripple 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes rd-ripple { to { transform: scale(20); opacity: 0; } }

/* A border that is lime where the cursor is nearest — also from outside. */
.cosmos [data-rd-lit="rel"] { position: relative; }
.cosmos [data-rd-lit]::before {
  content: ""; position: absolute; inset: 0; z-index: 6; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--lx, -999px) var(--ly, -999px), #dcff26, rgba(220, 255, 38, 0.42) 34%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Titles turn lime under the cursor. */
.cosmos [data-rd-torch] {
  background-image: radial-gradient(250px circle at var(--lx, -999px) var(--ly, -999px), #dcff26 0%, rgba(220, 255, 38, 0) 74%), linear-gradient(100deg, #fff 50%, #ecf8bd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* white first line, lime second, with no blend between (12.11.2026): --l2 is set by cosmos.js (measureH1) */
.cosmos .hero h1[data-rd-torch] {
  background-image: radial-gradient(250px circle at var(--lx, -999px) var(--ly, -999px), #dcff26 0%, rgba(220, 255, 38, 0) 74%), linear-gradient(180deg, #fff var(--l2, 50%), #dcff26 var(--l2, 50%));
}
.cosmos .hero h1[data-rd-torch] { color: transparent; }
/* The section titles: the light over their own white-to-lime gradient (their gradient rule outranked the plain
   torch rule above, so before 12.11.2026 only the hero's headline lit) … */
.cosmos .section h2.display-t[data-rd-torch] {
  background-image: radial-gradient(250px circle at var(--lx, -999px) var(--ly, -999px), #dcff26 0%, rgba(220, 255, 38, 0) 74%), linear-gradient(100deg, #fff 30%, #dcff26 100%);
}
/* … and on the light panels a deeper lime over the dark ink, which reads on their pale grey. */
.cosmos #mission h2.display-t[data-rd-torch], .cosmos #local h2.display-t[data-rd-torch], .cosmos #siri h2.display-t[data-rd-torch] {
  background-image: radial-gradient(250px circle at var(--lx, -999px) var(--ly, -999px), #86a800 0%, rgba(134, 168, 0, 0) 74%), linear-gradient(#16181b, #16181b);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.cosmos .hero h1[data-rd-torch] .rd-soft { background: none; color: inherit; -webkit-text-fill-color: transparent; }
/* read: 'halo' (cosmos.js) — on a narrow screen the text scrolls over the cloud; each piece of bare text carries a
   dark halo that follows its letters: a tight line, a soft edge and a wider breath of shade. */
[data-rd-halo] { filter: drop-shadow(0 0 1px rgba(5, 7, 5, 0.95)) drop-shadow(0 0 3px rgba(5, 7, 5, 0.9)) drop-shadow(0 0 10px rgba(5, 7, 5, 0.75)); }
/* Any other text does too, keeping its own colour away from the cursor (cosmos.js, torchBlock / torchText). */
.cosmos [data-rd-tt], .cosmos .hero-facts span[data-rd-tt] {
  background-image: radial-gradient(230px circle at var(--lx, -999px) var(--ly, -999px), #dcff26 0%, rgba(220, 255, 38, 0) 74%), linear-gradient(currentColor, currentColor);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* On a pill or a button the lit line is a hairline just inside the border — never outside the box, where it
   would count as overflow (a 1px ring outside a phone's half-width button made the row scroll). The fact pills
   use ::before for the live page's separator dot, which the rule above turns off: this turns it back on. */
.cosmos .btn[data-rd-lit]::before, .cosmos .hero-facts > span[data-rd-lit]::before { content: ""; inset: 0; left: 0; padding: 1px; transform: none; }
/* Buttons lean toward it. */
.cosmos .btn[data-rd-pull] { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.15s, color 0.15s, border-color 0.15s; }

/* ---- Glass ----------------------------------------------------------------------
   Dark again inside the cards the rule above had reset to light… */
.cosmos .sc-card, .cosmos .dm-panel, .cosmos .fx-strip, .cosmos .sc-arrow, .cosmos .hf-hint {
  --ink: #fff; --head: rgba(255, 255, 255, 0.94); --body: rgba(255, 255, 255, 0.72); --muted: rgba(255, 255, 255, 0.5); --mark: rgba(255, 255, 255, 0.42);
  --hairline: rgba(255, 255, 255, 0.14); --grey-line: rgba(255, 255, 255, 0.32); --wash: rgba(255, 255, 255, 0.09); --tint: rgba(255, 255, 255, 0.06);
  --link: #dcff26; --ground: #090b0a; color: var(--body);
}
/* …and light inside the pieces that stay light surfaces. */
.cosmos .sc-fig, .cosmos .dm-node, .cosmos .dm-wire b {
  --ink: #16181b; --head: #4a4f56; --body: #5f646b; --muted: #8d939b; --mark: #b4b8be;
  --hairline: rgba(15, 17, 20, 0.09); --grey-line: #c6c9cd; --wash: rgba(15, 17, 20, 0.032); --tint: #fafbfc;
  --link: #1a4300; --ground: #f4f5f7;
}
.cosmos .sc-card, .cosmos .dm-panel, .cosmos .p-item, .cosmos .faq-item, .cosmos .pricing-card {
  background-color: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.13);
  /* the sheen: the cursor's light caught in the glass */
  background-image: radial-gradient(440px circle at var(--lx, -999px) var(--ly, -999px), rgba(220, 255, 38, 0.14), transparent 62%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 34px 64px -44px #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cosmos #pc-pro { border-color: rgba(220, 255, 38, 0.55); }

/* the scenario level key walks BRIGHTER on a dark page: dim green, mid green, then the lime (--link). Set on
   the levels themselves — --lvl-1 and --lvl-2 are also the site's tick greens, which stay as they are. */
.cosmos [data-level="beginner"] { --lvl: #6f8f2a; }
.cosmos [data-level="intermediate"] { --lvl: #a8cf2e; }
.cosmos .sc-card { border-radius: 24px; }
.cosmos .sc-card:hover { box-shadow: 0 44px 70px -40px #000, inset 0 1px 0 rgba(255, 255, 255, 0.16); }
/* a thin inset only: the capture inside must stay at least 270px wide to be read */
.cosmos .sc-fig { margin: 3px 3px 0; border-radius: 20px; border-bottom: 0; }
/* the level bar stays 6px (Josef, 15.09.2026: "a bit thicker"), inset and rounded here */
.cosmos .sc-card::after { height: 6px; margin: auto 20px 16px; border-radius: 6px; }
.cosmos .sc-card .sc-copy { padding: 16px 20px 16px; }
.cosmos .sc-card h4 { color: #fff; }
.cosmos .sc-card p { color: rgba(255, 255, 255, 0.7); }

.cosmos .fx-strip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.cosmos .fx-pill { background: #dcff26; box-shadow: none; }
.cosmos .fx-chip.on, .cosmos .fx-chip.on .fx-n { color: #111213; }
.cosmos .sc-arrow { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.cosmos .sc-arrow:hover { border-color: #dcff26; }
.cosmos .hf-hint { background: rgba(16, 18, 17, 0.72); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cosmos .hf-hint i { color: #dcff26; }

.cosmos .dm-panel { border-radius: 28px; }
.cosmos .dm-wire::before, .cosmos .dm-wire.dm-both::after { border-left-color: rgba(255, 255, 255, 0.5); }
.cosmos .dm-computer { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.035); }
.cosmos .dm-computer::after { background: rgba(255, 255, 255, 0.55); }
.cosmos .dm-tag span { color: rgba(255, 255, 255, 0.8); }
/* The data map's cards and pills, in the dark (Josef, 12.11.2026: "make them darker gray, and the Fortunest server
   card some lighter gray - but overall something that fits better the new dark style"): they were the light site's
   white cards and a navy server panel. Dark grey cards with light type, the server one step lighter. */
.cosmos .dm-node, .cosmos .dm-wire b {
  --ink: #fff; --head: rgba(255, 255, 255, 0.86); --body: rgba(255, 255, 255, 0.62); --muted: rgba(255, 255, 255, 0.46);
  --hairline: rgba(255, 255, 255, 0.12); --grey-line: rgba(255, 255, 255, 0.3); --wash: rgba(255, 255, 255, 0.06);
  --tint: rgba(255, 255, 255, 0.04); --link: #dcff26; --ground: #1e211e;
}
.cosmos .dm-node { background: #262926; border-color: rgba(255, 255, 255, 0.11); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); }
.cosmos .dm-server { background: linear-gradient(160deg, #474b47, #383b38); border-color: rgba(255, 255, 255, 0.16); }
.cosmos .dm-server .dm-node-head span { color: rgba(255, 255, 255, 0.66); }
.cosmos .dm-wire b { background: #1c1f1c; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.cosmos .dm-cyl path { fill: #3a3d3a; }
.cosmos .dm-cyl { stroke: rgba(255, 255, 255, 0.88); }

.cosmos .privacy-grid { gap: 14px; margin-top: 30px; }
.cosmos .p-item { padding: 20px 20px 22px; border-radius: 20px; }
.cosmos .p-item h4 { border-top: 0; padding-top: 0; }
.cosmos #faq .faq-list { gap: 12px 16px; }
.cosmos #faq .faq-item { padding: 2px 22px; border-radius: 18px; }
.cosmos .faq-item .faq-a { padding-bottom: 16px; }

/* ---- Footer: no clip of the mark — the particle nest comes to rest here instead ---- */
.cosmos .footer.footer--crystal { background: none; height: 600px; }
.cosmos .footer--crystal::before { background: linear-gradient(to bottom, transparent 56%, rgba(9, 11, 10, 0.78) 76%, rgba(9, 11, 10, 0.94)); }

@media (max-width: 900px) { .cosmos .footer.footer--crystal { height: 720px; } }

/* Six labels now. */

/* ---- Product shot: the app in its dark theme, tilting flat on scroll --------- */
.cosmos .product { opacity: 1; transform: none; padding-bottom: 80px; }
.cosmos .product .section-inner { perspective: 2400px; perspective-origin: 50% 0; }
.cosmos .browser-frame {
  background: #302e2b; transform-origin: 50% 0; will-change: transform;
  transform: rotateX(calc(var(--rd-tilt, 0) * 17deg)) scale(calc(1 - var(--rd-tilt, 0) * 0.07));
}
.cosmos .bf-chrome { background: #262523; }

/* ---- Step cards: dark glass ----------------------------------------------------
   The cards are miniature app screens drawn with the site's tokens, so most of
   the change is handing them dark tokens; the rest undoes the few places that
   assumed a white card. Gains and losses take the app's dark-theme green and red. */
.cosmos .hf-card {
  --ink: #fff; --head: rgba(255, 255, 255, 0.92); --body: rgba(255, 255, 255, 0.74); --muted: rgba(255, 255, 255, 0.52); --mark: rgba(255, 255, 255, 0.42);
  --hairline: rgba(255, 255, 255, 0.14); --grey-line: rgba(255, 255, 255, 0.3); --wash: rgba(255, 255, 255, 0.09); --tint: rgba(255, 255, 255, 0.06);
  --link: #dcff26; --ground: rgba(255, 255, 255, 0.075); color: var(--body);
  background-color: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.13);
  background-image: radial-gradient(420px circle at var(--lx, -999px) var(--ly, -999px), rgba(220, 255, 38, 0.13), transparent 62%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 34px 64px -44px #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* The cards are larger here (the wider column), so the live sheet's scale(.9) entrance would carry a waiting
   card twice as far as on the light page — far enough to move where "the cards at mid-window" is, and with it
   how many cards a given scroll has opened. A smaller entrance keeps the travel what it was. */
.cosmos .hf-live .hf-card:not(.on) { transform: translateY(8px) scale(0.97); }
.cosmos .hf-live .hf-card.on:hover { box-shadow: 0 40px 70px -40px #000, inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.cosmos .hfx .fi li:hover, .cosmos .hfx .frt:hover, .cosmos .hfx .mt-r:hover, .cosmos .hfx .fp-leg li:hover { background: rgba(255, 255, 255, 0.13); }
.cosmos .hfx .fseg button.on, .cosmos .hfx .fbtn.on { color: #16181b; }
.cosmos .hfx .fa-mem, .cosmos .hfx .fa-mem b { color: #3d4046; }
.cosmos .hfx .tkc { color: #fff; background: rgba(255, 255, 255, 0.14); }
.cosmos .hfx .asset-t { color: #fff; }
.cosmos .hfx .fa-q { background: rgba(255, 255, 255, 0.17); }
.cosmos .hfx .hf-sw.on { background: #dcff26; }
.cosmos .hfx .hf-sw.on::after { background: #16181b; }
.cosmos .hfx .up, .cosmos .hfx .frt b.up, .cosmos .hfx .frt em.up, .cosmos .hfx .fg-res.done { color: #7ccf95; }
.cosmos .hfx .dn { color: #e58a72; }
.cosmos .hfx .ev-earn { color: #e3e5e8; } .cosmos .hfx .ev-exdiv { color: #7ccf95; } .cosmos .hfx .ev-macro { color: #c9ccd1; }
.cosmos .hfx .ring { filter: none; }
.cosmos .hfx .qslot::after { background: rgba(255, 255, 255, 0.16); }

/* ---- "Any screen": the device clip floats free ----------------------------------- */
.cosmos #anyscreen { padding: 100px 0 60px; }
.cosmos #anyscreen > .section-inner {
  max-width: 1240px; padding: 0 32px; border-radius: 0; background: none; box-shadow: none;
  --ink: #fff; --head: rgba(255, 255, 255, 0.94); --body: rgba(255, 255, 255, 0.72); --muted: rgba(255, 255, 255, 0.5);
  --link: #dcff26; --ground: #090b0a; color: var(--body);
}
.cosmos #anyscreen > .section-inner::before { content: none; }
.cosmos #anyscreen h2.display-t {
  background-image: radial-gradient(250px circle at var(--lx, -999px) var(--ly, -999px), #dcff26 0%, rgba(220, 255, 38, 0) 74%), linear-gradient(100deg, #fff 50%, #ecf8bd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.cosmos #anyscreen h2.display-t::before { color: rgba(255, 255, 255, 0.62); -webkit-text-fill-color: rgba(255, 255, 255, 0.62); }
@media (max-width: 900px) { .cosmos #anyscreen > .section-inner { padding: 0 20px; } }

/* As large as the window allows: the full width of the column, unless that would make it taller than the
   window under the nav — then as wide as keeps the whole device in view (the frame is 1792 x 1548). */
.cosmos .rd-duo { margin: 6px auto 0; max-width: min(100%, calc((100vh - var(--nav-h) - 36px) * 1.1576)); }
@supports (height: 100svh) { .cosmos .rd-duo { max-width: min(100%, calc((100svh - var(--nav-h) - 36px) * 1.1576)); } }
.cosmos .rd-duo-video { display: block; width: 100%; height: auto; background: none; filter: drop-shadow(0 50px 60px rgba(0, 0, 0, 0.55)); }
.cosmos .rd-duo .device-play { display: block; margin: 0 auto; }
.cosmos .rd-duo .device-play[hidden] { display: none; }

/* ---- Hover popups: the same dark glass as the cards they belong to -------------------
   main.js moves each tip to <body>, so these are matched from the body class. */
.cosmos .site-tip {
  --ink: #fff; --head: rgba(255, 255, 255, 0.92); --body: rgba(255, 255, 255, 0.76); --muted: rgba(255, 255, 255, 0.54); --mark: rgba(255, 255, 255, 0.42);
  --hairline: rgba(255, 255, 255, 0.14); --grey-line: rgba(255, 255, 255, 0.3); --wash: rgba(255, 255, 255, 0.09); --tint: rgba(255, 255, 255, 0.06);
  --link: #dcff26; --ground: rgba(255, 255, 255, 0.075); color: var(--body);
  /* Clearly see-through: a thin dark tint over a strong blur of what is behind (0.62 read as nearly solid). */
  background: rgba(16, 19, 17, 0.34); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(0.72); backdrop-filter: blur(22px) saturate(1.5) brightness(0.72);
  box-shadow: 0 30px 60px -28px #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* The asset popup painted its own white card under a wash of the asset's brand colour: the same glass here,
   with that wash kept as a faint tint at the top. */
.cosmos .site-tip.hf-tip.asset {
  border-color: color-mix(in srgb, var(--brand, #dcff26) 55%, rgba(255, 255, 255, 0.16));
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand, #dcff26) 22%, transparent) 0, transparent 60px), rgba(16, 19, 17, 0.34);
}
.cosmos .hf-tip .tkr-head, .cosmos .hf-tip .tkr-unit, .cosmos .hf-tip .tkr-when, .cosmos .hf-tip .tkr-own, .cosmos .hf-tip .tkr-hint { color: rgba(255, 255, 255, 0.6); }
.cosmos .hf-tip .tkr-own, .cosmos .hf-tip .tkr-hint { border-top-color: rgba(255, 255, 255, 0.14); }
.cosmos .hf-tip .pos { color: #7ccf95; } .cosmos .hf-tip .neg { color: #e58a72; }
/* The privacy popup's own tiles were white boxes. */
.cosmos .pc-root, .cosmos .pc-node { background: rgba(255, 255, 255, 0.075); }

/* ---- Nav: the mark beside the wordmark, as in the app's header — a still, the one the e-mails carry ---- */
.cosmos .nav .brand::before {
  content: ""; flex: none; width: 52px; height: 41px; margin: 0 9px 0 -6px;
  background: url("img/email-mark-v6.png?v=0b3298ce") center / contain no-repeat;
}
/* a phone: the bar is full (wordmark, Open app, Sign in, menu). The mark is as tall as the lime pill beside it
   (33px; Josef, 11.11.2026: "similar height as the Open app pill" — it was 24px), a little smaller where the
   signed-out bar only just fits, and gone at 400px and under. */
@media (max-width: 640px) { .cosmos .nav .brand::before { width: 42px; height: 33px; margin: 0 6px 0 -3px; } }
@media (max-width: 420px) { .cosmos .nav .brand::before { width: 38px; height: 30px; margin: 0 4px 0 -4px; } }
@media (max-width: 400px) { .cosmos .nav .brand::before { content: none; } }
/* 1001–1180px: the links and the three pills only just fit the row (styles.css sets them compact under 1120px),
   so the bar keeps its own padding there and the mark waits for a wider window */
@media (min-width: 1001px) and (max-width: 1180px) { .cosmos .nav .brand::before { content: none; } }
/* a phone keeps the site's own 16px gutters */
@media (max-width: 640px) { .cosmos .hero { padding: 0 16px; } .cosmos-home .section-inner { padding: 0 16px; } }

/* ---- Reading over the cloud on a narrow screen (cosmos.js, O.read) --------------------------------------
   'frost': one feathered pane per block of bare text, laid behind the page and over the cloud, kept on the
   block by the script and faded in as the cloud behind it gets busy. The pane blurs and shades what is
   behind it; its edges fade out over 26px so no box is ever seen. */
.rd-veils { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.rd-veil {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  background: rgba(9, 11, 10, 0.3); -webkit-backdrop-filter: blur(9px) brightness(0.62); backdrop-filter: blur(9px) brightness(0.62);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent), linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent), linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---- Hero: the live page's own calls to action (11.11.2026), re-staged ------------------------------
   Wide: the lime button and the trial button are the first row; "Get the desktop app" and "Feature tour" are
   smaller ghost buttons on a second row, with the privacy link beside them. The facts are one centred row
   across the full width, as the hero's last line — right above the dashboard shot. The hero is as tall as
   its content, so the shot starts inside the first screen. Phone: the live page's layout B as it is. */
@media (min-width: 641px) {
  .cosmos .hero .cta-row { flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 14px; margin-top: 26px; }
  .cosmos .hero .cta-row::after { content: ""; flex-basis: 100%; order: 1; height: 0; margin-bottom: -14px; }
  .cosmos .hero .cta-row .btn-ghost.at-wide, .cosmos .hero .cta-row .btn-ghost[href="features.html"] { order: 2; padding: 9px 18px; font-size: 14.5px; }
  .cosmos .hero .cta-row .hero-privacy { order: 3; margin: 0 0 0 10px; }
}
/* two columns (the hero is stacked under the nest at 900px and narrower, and keeps the facts in the copy column there) */
@media (min-width: 901px) {
  .cosmos .hero { display: block; min-height: 0; }
  .cosmos .rd-hero-in { max-width: none; padding: 52px 0 0; }
  .cosmos .rd-hero-in > * { max-width: 640px; }
  /* the headline's two lines are two lines: the first is not broken at the copy column's 640px (the nest hangs
     lower to make room — cosmos.js) */
  .cosmos .hero h1 { margin-top: 18px; max-width: none; white-space: nowrap; }
  .cosmos .hero .sub { margin-top: 20px; }
  .cosmos .rd-hero-in > .hero-facts { max-width: none; justify-content: center; flex-wrap: wrap; margin: 46px 0 14px; }
}
/* The lines under the scenario cards and under the product screenshot run over the cloud: brighter and a little
   larger, with the hero's dark halo round their letters (Josef, 12.11.2026: "make this text bit more readable",
   "also this text should be bit more readable"). */
.cosmos .sc-note, .cosmos .product-note { font-size: 14px; color: rgba(255, 255, 255, 0.86);
  filter: drop-shadow(0 0 1px rgba(5, 7, 5, 0.95)) drop-shadow(0 0 3px rgba(5, 7, 5, 0.9)) drop-shadow(0 0 10px rgba(5, 7, 5, 0.75)); }
/* the fact pills sit where the cloud passes: a dark, blurred pane of their own keeps them readable */
.cosmos .hero-facts > span { background: rgba(14, 16, 14, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cosmos .hero-privacy { margin-top: 8px; text-align: left; font-size: 14.5px; }
.cosmos .hero-privacy a { color: var(--body); font-weight: 400; text-decoration: underline; text-decoration-color: var(--grey-line); text-underline-offset: 4px; }
.cosmos .hero-privacy a:hover { color: #fff; text-decoration-color: #fff; }
.cosmos .hero .sub { max-width: 600px; font-size: 17.5px; }
@media (max-width: 640px) {
  .cosmos .hero .sub { margin-inline: 0; font-size: 18.5px; }
  .cosmos .hero .cta-row { margin-top: 28px; }
  .cosmos .hero .cta-row .btn-ghost { padding: 13px 12px; font-size: 15px; }
  .cosmos .hero .cta-row .hero-privacy { flex-basis: 100%; margin-top: 4px; }
  .cosmos .hero-facts { justify-content: flex-start; margin-top: 18px; }
  .cosmos .hero-facts .fact-free { flex-basis: auto; text-align: left; }
  /* the phone's product shot, in a dark shell */
  .cosmos .product { padding-top: 34px; }
  .cosmos .phone-shot { border-color: rgba(255, 255, 255, 0.16); background: #1b1a18; box-shadow: 0 34px 70px -34px #000, 0 0 70px -26px rgba(220, 255, 38, 0.3); }
}

/* ==== The other pages: documentation, guides, comparisons, account, download, features ================
   Their sheets (docs/docs.css, guides/guides.css, and the page sections of styles.css) are written with the
   site's tokens, so the dark tokens above carry most of them over. What follows is what was painted with a
   colour of its own: white cards and boxes become the same dark glass as the home page's cards, and the few
   inverted pieces (ink-coloured buttons with light text) get a ground that still reads when ink is white. */

/* ---- glass: boxes that were white ---- */
.cosmos .guide-card, .cosmos .verdict, .cosmos .ad-box {
  background-color: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 34px 64px -44px #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cosmos .guide-card:hover { background-color: rgba(255, 255, 255, 0.09); border-color: rgba(220, 255, 38, 0.5); }
.cosmos .verdict--pick { border-left: 3px solid var(--accent); }

/* ---- documentation ---- */
.cosmos .docs-main h1 {
  width: fit-content; padding-bottom: 0.08em; font-weight: 300; letter-spacing: -0.03em;
  background: linear-gradient(100deg, #fff 30%, #dcff26 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cosmos .docs-sidebar .docs-toc li.current > a { background: rgba(255, 255, 255, 0.09); }
.cosmos .docs-pager a { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.cosmos .docs-pager a:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(220, 255, 38, 0.5); }
.cosmos .docs-fig img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 54px -30px #000; }
.cosmos .route-api { color: #8fdcae; background: rgba(120, 220, 160, 0.12); border-color: rgba(120, 220, 160, 0.3); }
.cosmos .route-snaptrade { color: #c1bbf0; background: rgba(170, 160, 240, 0.13); border-color: rgba(170, 160, 240, 0.3); }
.cosmos .route-csv, .cosmos .route-xlsx { color: #e6cf8d; background: rgba(230, 200, 110, 0.12); border-color: rgba(230, 200, 110, 0.3); }
@media (max-width: 900px) { .cosmos .docs-sidebar.open { background: rgba(12, 14, 13, 0.97); } }

/* ---- account ---- */
.cosmos .acct-plan-chip.on { background: var(--accent); color: var(--accent-ink); }
.cosmos .acct-card, .cosmos .acct-plan, .cosmos .acct-status div {
  background-color: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.cosmos .acct-card { box-shadow: 0 34px 64px -44px #000, inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.cosmos .acct-tab.on { background: rgba(255, 255, 255, 0.13); }
.cosmos .acct-field input, .cosmos .acct-field textarea { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.cosmos .acct-field input:focus, .cosmos .acct-field textarea:focus { border-color: #dcff26; }
.cosmos .acct-plan.pick:hover { background: rgba(255, 255, 255, 0.09); }
.cosmos .acct-plan.picked { background: rgba(220, 255, 38, 0.08); border-color: rgba(220, 255, 38, 0.6); }
.cosmos .nav-avatar { background: rgba(255, 255, 255, 0.08); }
.cosmos .acct-menu { background: rgba(18, 21, 19, 0.96); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 30px 60px -28px #000; }

/* ---- download, features ---- */
.cosmos .grid > .card {
  background-color: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 34px 64px -44px #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cosmos .tour-film { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 120px -20px rgba(220, 255, 38, 0.42), 0 60px 120px -50px #000; }

/* page titles outside the home page's sections take the same white-to-lime as its section titles */
.cosmos .acct h1, .cosmos .section h1.display-t {
  width: fit-content; padding-bottom: 0.08em;
  background: linear-gradient(100deg, #fff 30%, #dcff26 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 360px) { .cosmos .hero .cta-row .btn-ghost { padding-inline: 8px; font-size: 14px; } }
/* at 320px the two facts of the first line still share it */
@media (max-width: 340px) { .cosmos .hero-facts { column-gap: 5px; } .cosmos .hero-facts > span { padding: 3px 7px; font-size: 11px; } }

/* Two things the home page's larger section titles must not undo: the scenarios title keeps the one-line
   phone size the live sheet gives it, and the voice title's lines stay even (no orphaned short line). */
@media (max-width: 640px) { .cosmos-home #scenarios h2.display-t { font-size: clamp(23px, 6.3vw, 40px); white-space: nowrap; } }
.cosmos-home #siri h2.display-t { text-wrap: balance; }
.cosmos-home #siri .voice-heading-detail { max-width: 620px; }

/* ---- Reduced motion: no lean, no ripple, no tilt (cosmos.js draws the cloud as a still and sets none of them) ---- */
@media (prefers-reduced-motion: reduce) {
  .cosmos .btn[data-rd-pull] { transform: none; transition: none; }
  .rd-ripple { display: none; }
  .cosmos .browser-frame { transform: none; }
}

/* ---- Paper: the light page. Dark tokens, the cloud and clipped-gradient titles do not print (a browser prints
   no backgrounds, so white text and transparent titles would vanish). ---- */
@media print {
  html.cosmos { background: #fff; color-scheme: light; }
  .cosmos, .cosmos .hf-card, .cosmos .sc-card, .cosmos .dm-panel, .cosmos .fx-strip, .cosmos .site-tip, .cosmos #anyscreen > .section-inner {
    --ink: #16181b; --head: #4a4f56; --body: #5f646b; --muted: #8d939b; --mark: #b4b8be;
    --hairline: rgba(15, 17, 20, 0.09); --grey-line: #c6c9cd; --wash: rgba(15, 17, 20, 0.032); --tint: #fafbfc;
    --link: #1a4300; --ground: #fff; --surface: #fff; color: var(--body);
  }
  .cosmos body::before, .rd-fx-page, .rd-glow, .rd-glow-core, .rd-ripple { display: none; }
  .cosmos h1, .cosmos h2, .cosmos .hero h1 .rd-soft, .cosmos [data-rd-tt], .cosmos [data-rd-torch] {
    background: none; color: #16181b; -webkit-text-fill-color: currentColor;
  }
  /* the lit titles' own rules outrank the line above: paper gets them dark too */
  .cosmos .hero h1[data-rd-torch], .cosmos .hero h1[data-rd-torch] .rd-soft, .cosmos .section h2.display-t[data-rd-torch],
  .cosmos #anyscreen h2.display-t, .cosmos #mission h2.display-t[data-rd-torch], .cosmos #local h2.display-t[data-rd-torch],
  .cosmos #siri h2.display-t[data-rd-torch] { background: none; color: #16181b; -webkit-text-fill-color: currentColor; }
  .cosmos .sc-card h4, .cosmos .p-item h4, .cosmos .pc-name, .cosmos .nav-links a { color: #16181b; }
  .cosmos .sc-card p { color: #5f646b; }
  [data-rd-halo] { filter: none; }
  .cosmos .nav, .cosmos .pricing-card, .cosmos .guide-card, .cosmos .verdict, .cosmos .ad-box, .cosmos .acct-card, .cosmos .grid > .card {
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: #c6c9cd;
  }
}