/* The public landing page, served at "/" to signed-out visitors.

   Nothing in the app imports this and this imports nothing from the app
   except the exchange marks, so the marketing page and the product can be
   restyled independently.

   The palette is UnifyTrade's own, redeclared locally, in both themes. Dark is
   the default and what a first-time visitor sees; light exists because a
   reader who has chosen it in the product should not be handed a marketing
   page in the other palette. The theme itself is the app's — theme-init.js and
   the spotlog.theme key — so one choice follows a reader in both directions.
   Everything else — surfaces, hairline borders, and the rule that only a
   financial figure may be green or red — is the product's. */

.lc {
  --bg: #0A0E13;
  --bg-deep: #070A0E;
  --surface: #12181F;
  --surface-raised: #161D26;
  --border: #212A35;
  --border-strong: #2B3644;
  --text: #F1F4F7;
  --text-secondary: #8B96A5;
  --text-muted: #5B6673;
  --cyan: #2DD9CE;
  --cyan-dim: rgba(45, 217, 206, .12);
  --blue: #7CB4FA;
  --green: #3ED598;
  --red: #F1667A;
  --amber: #F4B740;
  --purple: #A78BFA;
  --on-accent: #04211E;
  --cyan-hover: #45E2D8;
  /* The mark's own three stops — the landing page carries its palette locally,
     so it declares these too rather than inheriting tokens.css. */
  --logo-1: #7FF0E8;
  --logo-2: #2DD9CE;
  --logo-3: #12A39B;
  --logo-glow: rgba(45, 217, 206, .55);
  /* Surfaces and effects that cannot be expressed as a palette colour. Each
     has a light counterpart below; nothing else in the sheet hard-codes one. */
  --nav-bg: rgba(10, 14, 19, .88);
  --hero-glow: rgba(45, 217, 206, .12);
  --track: rgba(139, 150, 165, .14);
  --chart-grid: #212A35;
  --laptop-lid: #0D1218;
  --laptop-base: linear-gradient(180deg, #1B222C, #10151B);
  --shadow: rgba(0, 0, 0, .8);
  --shadow-strong: rgba(0, 0, 0, .88);
  --shadow-device: rgba(0, 0, 0, .9);
  --shadow-device-hover: rgba(0, 0, 0, .95);
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* The one chevron the sheet draws itself: the same path the Product
     menu's SVGs use, so a control and an icon agree on what "open this"
     looks like. Declared once here because it is used as a mask, where
     a stroke colour is irrelevant — only its alpha is read. */
  --lc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --radius: 12px;
  --gutter: clamp(20px, 4vw, 56px);
  --shell: 1280px;

  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  /* No overflow-x: hidden here, deliberately.
     It used to sit on this element and it was hiding nothing: audited at 390,
     620, 768, 900, 1024, 1280 and 1900 in both themes with the clip lifted,
     the document never grew past the viewport at any of them. The one element
     that does extend is .lc-base — the laptop's base flares 110% wide on
     purpose — and .lc-hero already contains that with its own scoped clip, so
     the flare still shows without widening the page.
     Clipping here would only mean the next real overflow is invisible instead
     of fixed: it would not scroll, so nobody would see it, and a measurement
     of scrollWidth would report the page as fine. Decoration gets a scoped
     clip on the section that owns it; the page itself stays honest. */
}

.lc *, .lc *::before, .lc *::after { box-sizing: border-box; }

/* ---- Light ------------------------------------------------------------
   Dark is UnifyTrade's default and stays exactly as it was: this block only
   redefines tokens, so every rule below is written once and both themes get
   it. theme-init.js puts data-theme on <html> before the stylesheet paints,
   which is why the selector hangs off the root rather than off .lc itself.

   It is not the dark palette inverted. Surfaces go white-on-grey rather than
   grey-on-black so a card still lifts off the page, and every colour that
   carries text was picked by measuring it rather than by eye. On this page
   the brand teal is an 11.5px eyebrow, a link, and the label inside a button,
   so it has to clear 4.5:1 as text on the page, as text on a tinted chip, and
   as a background under white: #2DD9CE manages 1.6:1 and #0E9E96 only 3.3:1.
   Every text colour here was measured against the background it is actually
   composited over, and no text on the page falls below 4.5:1 — headings reach
   17:1, ledes 5.7:1 and muted text 5.0:1. The dark theme is untouched. */

html[data-theme="light"] .lc {
  --bg: #F6F8FA;
  --bg-deep: #EDF1F5;
  --surface: #FFFFFF;
  --surface-raised: #F2F5F8;
  --border: #DFE5EC;
  --border-strong: #C7D0DA;
  --text: #0E1620;
  --text-secondary: #566475;
  --text-muted: #5F6C7C;
  /* Each accent is dark enough to clear 4.5:1 at 10.5px on the tinted chip
     it sits in, which is the hardest place any of them appears — a chip tint
     lifts the background and costs about 0.3 of a ratio point. */
  --cyan: #077069;
  --cyan-hover: #066059;
  --cyan-dim: rgba(7, 112, 105, .10);
  --logo-1: #0E8F88;
  --logo-2: #077069;
  --logo-3: #054F4A;
  --logo-glow: rgba(7, 112, 105, .38);
  --blue: #2C6FD1;
  --green: #0E7450;
  --red: #B32B41;
  --amber: #825707;
  --purple: #6D4FD0;
  --on-accent: #FFFFFF;

  --nav-bg: rgba(255, 255, 255, .88);
  --hero-glow: rgba(10, 122, 116, .09);
  --track: rgba(86, 100, 117, .14);
  --chart-grid: #E3E9EF;
  /* The laptop keeps its dark screen bezel in both themes — a product shot of
     a dark app inside a white frame reads as a broken image, and the mock UI
     inside it is the dark product. */
  --laptop-lid: #0D1218;
  --laptop-base: linear-gradient(180deg, #D9E0E8, #C3CCD7);
  --shadow: rgba(23, 38, 56, .16);
  --shadow-strong: rgba(23, 38, 56, .2);
  --shadow-device: rgba(23, 38, 56, .22);
  --shadow-device-hover: rgba(23, 38, 56, .28);
}

/* The device screen is the dark product UI, so everything inside the laptop
   keeps the dark palette whichever theme the page is in. Without this the
   mock dashboard would turn white and stop looking like the screenshot it is
   standing in for. */
html[data-theme="light"] .lc .lc-screen {
  --bg: #0A0E13;
  --surface: #12181F;
  --surface-raised: #161D26;
  --border: #212A35;
  --border-strong: #2B3644;
  --text: #F1F4F7;
  --text-secondary: #8B96A5;
  --text-muted: #5B6673;
  --cyan: #2DD9CE;
  --cyan-dim: rgba(45, 217, 206, .12);
  --green: #3ED598;
  --red: #F1667A;
  --amber: #F4B740;
  --purple: #A78BFA;
  --blue: #7CB4FA;
  --track: rgba(139, 150, 165, .14);
  --chart-grid: #212A35;
  background: var(--bg);
  color: var(--text);
}

/* A presentation attribute loses to a CSS property, so the grid lines drawn
   inline in the markup follow the token without touching the HTML. */
.lc-chart g[stroke] { stroke: var(--chart-grid); }

.lc img, .lc svg { max-width: 100%; }

.lc-shell {
  width: min(var(--shell), calc(100vw - var(--gutter) * 2));
  margin-inline: auto;
}

.lc-section {
  padding-block: clamp(56px, 7vw, 96px);
  border-top: .5px solid var(--border);
}

/* Free Beta announcement — filled by landing.js from /api/public/app, and
   present only while the product is in its beta commercial stage.

   Deliberately quiet: a pill, a sentence and at most one link, sitting above
   the eyebrow in the hero's own rhythm. It is a status note about the product,
   not a discount banner, and it uses only .lc tokens so it is correct in both
   themes without a second rule. */
.lc-beta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin: 0 0 14px;
  max-width: 56ch;
}
.lc-beta-pill {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: .5px solid var(--cyan);
  background: var(--cyan-dim);
  color: var(--cyan);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lc-beta-text {
  margin: 0;
  min-width: 0;
  flex: 1 1 22ch;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}
.lc-beta-link {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 550;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.lc-beta-link:hover { color: var(--cyan-hover); }
.lc-beta-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }

.lc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}

.lc-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.lc-h2 {
  margin: 0 0 12px;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.14;
  font-weight: 650;
  letter-spacing: -.028em;
  max-width: 20ch;
  text-wrap: balance;
}

.lc-lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(14.5px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--text-secondary);
}

.lc-section-head { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* ---- Navigation ------------------------------------------------------- */

.lc-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: .5px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}

.lc-nav.is-stuck {
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.lc-nav-inner {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 6px 30px;
  /* height gives way to min-height so a second row can exist at all; a row
     that fits still measures exactly 64px, so no width that worked before
     moves by a pixel. */
  min-height: 64px;
  padding-block: 8px;
}

/* Flexible so it can share the first line and fold inside itself, rather
   than taking a whole row for the sake of one control that did not fit. */
.lc-nav-cta { margin-inline-start: auto; flex: 0 1 auto; min-width: 0; }

/* The row wraps rather than running off the page.
   ---------------------------------------------------------------------
   Brand, links and the sign-in group need about 732px between them in
   English and 790px in German, and the shell has that only from roughly
   800px up. Below it the links were squeezed to their smallest and the
   "Start free" button was pushed past the right edge of the screen — 640px
   to 760px in English, all the way to 800px in German and French, and
   further in whichever language is longest. Every one of those widths is a
   phone held sideways or a window shared beside another.

   A breakpoint would have to be guessed once per language and re-guessed
   every time a word changes. This does not: min-width on the links stops
   them from being compressed, so when the three groups cannot share a line
   the sign-in group takes the next one and stays right-aligned there. Where
   they do fit — every desktop width — nothing wraps and nothing moves.

   Only from 621px, because below that the links are hidden and the two
   groups that remain have always fitted; letting them wrap there would put
   a second row on a phone to solve a problem it does not have. */
@media (min-width: 621px) {
  .lc-nav-links { min-width: max-content; }
}

.lc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  font-size: 16.5px;
  letter-spacing: -.01em;
}

.lc-logo {
  /* The mark is the accent itself — it does not sit in a filled tile. */
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
}

.lc-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  margin-inline-end: auto;
}

.lc-nav-links > a,
.lc-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}

.lc-nav-links > a:hover,
.lc-nav-trigger:hover,
.lc-nav-trigger[aria-expanded="true"] { color: var(--text); background: var(--surface); }

.lc-nav-trigger svg { transition: transform .2s var(--ease); }
.lc-nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* The Product menu. Each item scrolls to the section of this page that covers
   it; when a module gets its own public page, only the href changes. */
.lc-menu-wrap { position: relative; }

.lc-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  width: 700px;
  padding: 10px;
  border: .5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 60px -20px var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.lc-menu[hidden] { display: none; }

/* The button that opens the navigation on a phone -----------------------
   Drawn as the theme toggle is drawn, because it sits in the same bar and is
   the same kind of thing: a square of border with an icon in it. Hidden at
   every width where the links row is visible — there is nothing for it to
   open — and revealed by the same breakpoint that hides them. */
.lc-burger {
  display: none;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}

.lc-burger:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.lc-burger svg { grid-area: 1 / 1; display: block; }
.lc-burger .lc-burger-x { display: none; }
.lc-burger[aria-expanded="true"] { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.lc-burger[aria-expanded="true"] .lc-burger-bars { display: none; }
.lc-burger[aria-expanded="true"] .lc-burger-x { display: block; }

/* The sheet covers the page, so the page must not scroll under it. Unscoped
   because the class goes on the document element, which no page owns. */
html.lc-menu-open,
html.lc-menu-open body { overflow: hidden; }

/* An entry is a link, and now says so: `cursor: default` told every reader
   that the row under the pointer was not going anywhere. */
.lc-menu-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border: .5px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}

.lc-menu-item:hover { background: var(--surface-raised); border-color: var(--border); }

/* The tile takes the module's own accent — the one that module already uses
   on its own pages — so after two visits the colour is the label. */
.lc-mi-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 13%, transparent);
  border: .5px solid color-mix(in srgb, var(--tone) 26%, transparent);
}

.lc-menu-item b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }

/* The text column, named rather than addressed as "any span in here": the
   blanket rule this replaces turned the sliver into a block — so its bars
   collapsed — and painted it text-muted, which the curve picked up through
   currentColor and drew grey instead of the module's own colour.

   It is a flex column so the sliver can sit at the bottom: a two-line note
   beside a one-line note would otherwise leave the two slivers on different
   heights in the same row. */
.lc-mi-text { display: flex; flex-direction: column; min-width: 0; }
.lc-mi-text > span { font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* ---- the sliver of the page each entry opens ---- */

/* Every one of these is a miniature of a chart, and a chart is a time axis:
   it reads the same way in Arabic as in English, the way the value line and
   the cycle rail on the product pages do. */
.lc-menu-item .lc-mi-peek {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  margin-top: auto;
  padding-top: 9px;
  direction: ltr;
  color: var(--tone);
}

.lc-menu-item .lc-mi-peek i {
  flex: 1;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tone) 30%, transparent);
}

.lc-menu-item .lc-mi-peek.is-line { align-items: stretch; }
.lc-menu-item .lc-mi-peek.is-line svg { width: 100%; height: 26px; display: block; }

.lc-menu-item .lc-mi-peek.is-rows {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
}

.lc-menu-item .lc-mi-peek.is-rows i { flex: none; height: 5px; border-radius: 3px; }

.lc-menu-item .lc-mi-peek.is-dots { align-items: center; gap: 4px; }

.lc-menu-item .lc-mi-peek.is-dots i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* An untagged trade, in the shape the Psychology page gives one: present, and
   not carrying the thing the page is about. */
.lc-menu-item .lc-mi-peek.is-dots i.is-off { background: var(--border-strong); }

/* ---- a module that has no page yet ---- */

/* It is a span, not a link, so there is nothing to hover and nothing to
   click. It also has no `--tone`: on this menu a colour is the label for a
   module you can open, and handing one to a module you cannot would make the
   colour mean less everywhere else. The greys and the badge together are the
   state — neither is doing the job alone. */
.lc-menu-item.is-soon {
  cursor: default;
  --tone: var(--text-muted);
}

.lc-menu-item.is-soon:hover { background: none; border-color: transparent; }

.lc-menu-item.is-soon .lc-mi-icon {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border-style: dashed;
  border-color: var(--border-strong);
}

.lc-menu-item.is-soon b { color: var(--text-secondary); }

.lc-mi-soon {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  border: .5px dashed var(--border-strong);
  /* This badge is in the header of every public page, so it is the smallest
     type most readers meet. 9.5px was too small for that job. */
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  vertical-align: 1px;
  white-space: nowrap;
}

.lc-menu-foot {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 10px 12px 4px;
  border-top: .5px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* The same rule as the row it sits in, one level down: at 320px in French
   the four controls together are wider than the screen, and the last of them
   takes a line of its own rather than the pavement outside the viewport. It
   engages nowhere else. */
.lc-nav-cta { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; font-size: 14px; }

/* ---- Buttons ---------------------------------------------------------- */

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 9px;
  border: .5px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}

.lc-btn-primary { background: var(--cyan); color: var(--on-accent); }
.lc-btn-primary:hover { background: var(--cyan-hover); transform: translateY(-1px); }
.lc-btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.lc-btn-ghost:hover { border-color: var(--text-muted); transform: translateY(-1px); }
.lc-btn-lg { padding: 13px 24px; font-size: 15px; }
.lc-btn-sm { padding: 8px 15px; font-size: 13.5px; }
.lc-link { color: var(--text-secondary); text-decoration: none; font-weight: 500; }

/* ---- Theme toggle ------------------------------------------------------
   One control, two icons: whichever theme is active, the button shows the one
   it would switch TO, which is what a reader is deciding about. The label is
   there for a screen reader and says the action, not the state. */

.lc-theme {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}

.lc-theme:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }

/* The label names the action for assistive technology and is never painted. */
.lc-theme-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lc-theme svg { grid-area: 1 / 1; display: block; }
/* Dark is showing, so the button offers the sun. */
.lc-theme .lc-theme-moon { display: none; }
html[data-theme="light"] .lc .lc-theme .lc-theme-sun { display: none; }
html[data-theme="light"] .lc .lc-theme .lc-theme-moon { display: block; }

/* The toggle is a fourth thing in a row that already held three. A signed-in
   reader gets the widest version of it — mark, toggle, Settings, Go to
   Dashboard — which came to 402px inside a 350px shell at 390px wide. The
   wordmark is the first thing that can go: the mark alone still identifies
   the page, and it buys back 97px. */
/* Between 620px — where the nav links drop out — and about 900px the row
   carries the mark, four links and the calls to action at full desktop
   spacing. At 768px that came to 764px inside a 707px shell, so the row was
   already 15px over before the toggle was added and 57px over afterwards.
   Tightening the gaps buys back 60px and keeps all four links reachable,
   which hiding them earlier would not. */
@media (max-width: 900px) {
  .lc-nav-inner { gap: 14px; }
  .lc-nav-links { gap: 0; }
  .lc-nav-links > a,
  .lc-nav-trigger { padding-inline: 8px; }
  .lc-nav-cta { gap: 8px; }
}

@media (max-width: 560px) {
  .lc-nav-inner { gap: 12px; }
  .lc-nav-inner .lc-brand { font-size: 0; gap: 0; }
  .lc-nav-inner .lc-brand .lc-logo { font-size: 16.5px; }
  .lc-nav-cta { gap: 8px; }
}

.lc-link:hover { color: var(--text); }

/* ---- Hero ------------------------------------------------------------- */

.lc-hero {
  position: relative;
  padding-top: clamp(30px, 3vw, 46px);
  padding-bottom: clamp(38px, 4.4vw, 62px);
  overflow: hidden;
}

/* One light source, behind the device, placed once. */
.lc-hero::before {
  content: "";
  position: absolute;
  top: -240px;
  right: -200px;
  width: 900px;
  height: 640px;
  background: radial-gradient(ellipse at center, var(--hero-glow), transparent 66%);
  pointer-events: none;
}

.lc-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 3.5vw, 54px);
  align-items: center;
}

.lc-h1 {
  margin: 0 0 15px;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.1;
  font-weight: 680;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.lc-h1 em { font-style: normal; color: var(--cyan); }

.lc-hero-lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.58;
  color: var(--text-secondary);
}

.lc-hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 24px; }

.lc-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  font-size: 12px;
  color: var(--text-muted);
}

.lc-hero-note svg { opacity: .75; flex: 0 0 auto; }

/* ---- The laptop ------------------------------------------------------- */

.lc-device { position: relative; }

.lc-lid {
  border: 1px solid var(--border-strong);
  border-radius: 14px 14px 5px 5px;
  background: var(--laptop-lid);
  padding: 9px 9px 11px;
  box-shadow: 0 34px 70px -26px var(--shadow-device);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.lc-device:hover .lc-lid {
  transform: translateY(-4px);
  box-shadow: 0 44px 86px -26px var(--shadow-device-hover);
}

.lc-screen {
  border: .5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}

/* Hinge and base: two flat shapes, no chrome gradients pretending to be metal. */
.lc-base {
  height: 11px;
  width: 110%;
  margin-inline-start: -5%;
  border-radius: 0 0 11px 11px;
  background: var(--laptop-base);
  border: 1px solid var(--border-strong);
  border-top: 0;
  position: relative;
}

.lc-base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 4px;
  border-radius: 0 0 5px 5px;
  background: #0A0E13;
}

.lc-device-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.lc-device-note b { color: var(--text-secondary); font-weight: 550; }

/* ---- Floating widgets -------------------------------------------------

   Three of the dashboard's own widgets, lifted out of the grid and standing
   in front of the laptop. The caption under the device already says a reader
   can add widgets and drag them where they want them; these show it.

   Two rules keep this from becoming the thing it replaced — oversized cards
   dropped over the screenshot, clipped at the right edge, covering the very
   figures the headline is about:

   1. They appear only from 1401px up. That is the width at which the device
      column can give up a 144px rail inside the screen without the equity
      curve or the calendar losing legibility, and it hands the rest of the
      range to the rule below that stacks the panels. Under it the cards fall
      back to a plain three-up row beneath the laptop — present, readable,
      overlapping nothing.
   2. Every card is anchored to the laptop, never to the viewport, and the
      largest overhang is 44px. At 1401px the shell already keeps 60px clear
      of the viewport edge and that margin only grows, so no card can be cut
      off at any width where they are shown.

   They keep the dark palette in both themes for the reason the screen does:
   they are product UI standing on a dark screen, and a white card lying half
   over a dark screenshot reads as a rendering fault, not as a layer. */

.lc-device-body { position: relative; }

.lc-floats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Each card keeps its own height. Stretched to match the tallest, the two
     short ones would carry a block of empty surface under their last line and
     read as cards missing their content. */
  align-items: start;
  gap: 9px;
  margin-top: 12px;
}

.lc-float {
  border: .5px solid rgba(45, 217, 206, .26);
  border-radius: 11px;
  padding: 10px 12px 11px;
  /* One cool wash down from the top edge, then the card's own surface — the
     glow belongs to the light source behind the device, so it is stated once
     here and never repeated on anything inside. */
  background:
    linear-gradient(180deg, rgba(45, 217, 206, .055), transparent 60%),
    linear-gradient(180deg, #171F28, #10161D);
  box-shadow:
    0 20px 44px -22px rgba(0, 0, 0, .92),
    0 0 32px -16px rgba(45, 217, 206, .45);
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
  min-width: 0;
}

.lc-float-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cyan);
}

.lc-float-label svg { flex: 0 0 auto; }

/* The live dot and the "Last 30 days" note take the same slot at the end of
   the label row, so all three cards share one header rhythm. */
.lc-float-live,
.lc-float-label .lc-float-meta { margin-inline-start: auto; }

.lc-float-live {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(45, 217, 206, .14);
  animation: lc-float-pulse 2.6s var(--ease) infinite;
}

@keyframes lc-float-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(45, 217, 206, .14); }
  50% { box-shadow: 0 0 0 5px rgba(45, 217, 206, .04); }
}

.lc-float-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.018em;
}

.lc-float-body { margin: 0; color: var(--text-secondary); }
.lc-float-body b { color: var(--text); font-weight: 650; }

.lc-float-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; margin: 0; }

.lc-float-meta {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
}

.lc-float-foot {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: .5px solid var(--border);
  font-size: 10px;
  color: var(--text-muted);
}

.lc-float-foot b { color: var(--text-secondary); font-weight: 600; }

.lc-float-link {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: .5px solid var(--border);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cyan);
}

.lc-float-link span { margin-inline-start: 3px; }

.lc-float-list { list-style: none; margin: 0; padding: 0; }

.lc-float-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  min-width: 0;
}

.lc-float-list .lc-swatch { flex: 0 0 auto; }

/* The habit takes the space that is left and truncates rather than wrapping:
   a row that grew to two lines would change the card's height and break its
   alignment with the laptop it is anchored to. */
.lc-float-list li span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.lc-float-list li em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.lc-float-list li b {
  flex: 0 0 auto;
  min-width: 50px;
  text-align: end;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lc-float-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0 0;
  padding-top: 8px;
  border-top: .5px solid var(--border);
  font-size: 10.5px;
  color: var(--text-muted);
}

.lc-float-total b {
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  /* A figure that wraps stops being a figure: "−$2,876" split over two lines
     reads as a stray minus sign above a number. */
  white-space: nowrap;
}

/* The two rail cards are 190px wide and carry a name and a figure on one
   line. Half a point of type is what buys "Main Portfolio" the room to say
   its whole name instead of an ellipsis. */
.lc-float-1 .lc-float-list li,
.lc-float-2 .lc-float-list li { gap: 6px; }
.lc-float-1 .lc-float-list li span,
.lc-float-2 .lc-float-list li span { font-size: 10.5px; }
.lc-float-1 .lc-float-list li b,
.lc-float-2 .lc-float-list li b { font-size: 10px; min-width: 46px; }

/* ---- The widgets as widgets -------------------------------------------

   From 1401px these three are draggable, and landing.js says why. What the
   stylesheet owes that is an affordance a reader can see before they try it,
   a state while they are doing it, and a way back.

   The grip sits outside the card on its top-left corner rather than inside
   the header, where it would have to win a fight with the label for the one
   line of space the card has. It appears on hover and on focus and is absent
   the rest of the time: a marketing hero should look like a product shot
   until someone reaches for it. */

.lc-float { position: relative; }

.lc-float-grip {
  position: absolute;
  top: -9px;
  inset-inline-start: -9px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: .5px solid rgba(45, 217, 206, .4);
  background: #10161D;
  color: var(--cyan);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  pointer-events: none;
}

.lc-float:hover .lc-float-grip,
.lc-float:focus-visible .lc-float-grip,
.lc-float.is-dragging .lc-float-grip { opacity: 1; transform: none; }

/* The slot the card was lifted out of. It is the one piece of this that is
   pure reassurance: it says the arrangement is not lost, so moving something
   costs nothing. */
.lc-float-slot {
  position: absolute;
  border: 1px dashed rgba(45, 217, 206, .34);
  border-radius: 11px;
  background: rgba(45, 217, 206, .035);
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events: none;
}

.lc-float-slot.is-on { opacity: 1; }

/* Reset lives in the caption that made the promise, and is not there until
   there is something to reset. */
.lc-float-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: .5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11.5px;
  font-weight: 550;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.lc-float-reset:hover { color: var(--text); border-color: var(--border-strong); }
.lc-float-reset[hidden] { display: none; }

/* ---- The equity curve draws itself ------------------------------------

   The hero's one moving part, and it moves once. The line is the page's
   whole argument — a history rebuilt from exchange data — so it is drawn
   rather than pasted, and then it is still. The dash length is simply longer
   than any path in the hero; there is nothing to measure. */
.lc-device .lc-chart path[stroke] {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}

.lc-device.is-in .lc-chart path[stroke] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s var(--ease) .3s;
}

.lc-device .lc-chart circle { opacity: 0; }
.lc-device.is-in .lc-chart circle { opacity: 1; transition: opacity .4s var(--ease) 1.5s; }

/* A status chip sits at the end of a label row like the live dot does, and
   keeps its own casing — the label is set in small caps, the chip is a word. */
.lc-float-label .lc-chip {
  margin-inline-start: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 9.5px;
  padding: 2px 7px;
}

.lc-float-sub {
  margin: 0 0 9px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Three figures across, label over value, no boxes. Inside a card this small
   a border around each stat would cost more width than the figure needs.
   auto-fit rather than three fixed columns: in the row under the laptop the
   card can be 220px wide, where three columns would put "$32,480.00" through
   the side of its own cell. */
.lc-float-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 9px;
  padding: 9px 0;
  border-top: .5px solid var(--border);
  border-bottom: .5px solid var(--border);
}

.lc-float-stats span {
  display: block;
  font-size: 9.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.lc-float-stats b {
  font-size: 12px;
  font-weight: 640;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lc-float-bar { margin-top: 10px; }

/* The two-tone track is the campaign in one shape: what is still held, and
   what has already been realised out of the same pool. */
.lc-float-bar .lc-camp-track { height: 5px; }
.lc-float-bar .lc-float-total { margin-top: 8px; padding-top: 0; border-top: 0; }

/* The portfolio the reader is looking at, marked the way the app marks it. */
.lc-float-list li.is-on span { color: var(--text); font-weight: 550; }
.lc-float-list li.is-on b { color: var(--cyan); }

/* The cards are product UI on a dark screen, so they keep the dark tokens in
   the light theme — the same rule, and the same reason, as .lc-screen above.
   Only the shadow changes: on a white page the cast shadow does the lifting
   and a teal halo would read as an effect rather than as light. */
html[data-theme="light"] .lc .lc-floats {
  --surface: #12181F;
  --border: #212A35;
  --text: #F1F4F7;
  --text-secondary: #8B96A5;
  --text-muted: #5B6673;
  --cyan: #2DD9CE;
  --green: #3ED598;
  --red: #F1667A;
  --amber: #F4B740;
  --purple: #A78BFA;
  --blue: #7CB4FA;
}

html[data-theme="light"] .lc .lc-float {
  box-shadow:
    0 22px 48px -22px rgba(23, 38, 56, .45),
    0 0 26px -16px rgba(13, 90, 85, .3);
}

/* ---- Recreated product UI --------------------------------------------- */

.lc-ui { font-size: 12.5px; }
.lc-ui-pad { padding: clamp(11px, 1.3vw, 17px); }

.lc-ui-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-bottom: .5px solid var(--border);
  background: var(--bg-deep);
}

.lc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.lc-ui-path { margin-inline-start: 8px; font-size: 11px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.lc-ui-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}

.lc-ui-title { font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; }
.lc-ui-sub { font-size: 12px; color: var(--text-secondary); }

.lc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 9px;
  margin-bottom: 11px;
}

.lc-kpi { padding: 11px 12px; border: .5px solid var(--border); border-radius: 9px; background: var(--surface-raised); }
.lc-kpi-label { font-size: 10.5px; color: var(--text-secondary); margin-bottom: 6px; }
.lc-kpi-value { font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lc-kpi-foot { margin-top: 4px; font-size: 10px; color: var(--text-muted); }

.lc-pos { color: var(--green); }
.lc-neg { color: var(--red); }

.lc-panels { display: grid; grid-template-columns: 1.5fr 1fr; gap: 9px; }

/* A seven-day calendar needs about 40px a cell before the figure inside it
   stops fitting, and the cells clip rather than overflow. In the hero device
   that means the chart gives up some width to it. */
.lc-device .lc-panels { grid-template-columns: 1.3fr 1fr; }

/* Panel ratios as classes rather than inline styles: an inline
   grid-template-columns outranks the stylesheet, so the rule that stacks
   these below 1180px never reached them and they stayed two columns wide on
   a phone. */
.lc-split-a { grid-template-columns: 1.35fr 1fr; }
.lc-split-b { grid-template-columns: 1.25fr 1fr; }
.lc-panel { padding: 13px 14px; border: .5px solid var(--border); border-radius: 9px; background: var(--surface-raised); min-width: 0; }
.lc-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lc-panel-title { font-size: 12.5px; font-weight: 600; }
.lc-panel-note { font-size: 10.5px; color: var(--text-muted); }
.lc-chart { display: block; width: 100%; height: auto; }

/* ---- The live equity panel --------------------------------------------

   The hero's Portfolio value card. Everything here is the mock product UI, so
   it keeps the product's scale: a figure, a line of change under it, a plot,
   and four range buttons in the panel header where the static period chip
   used to sit. */

.lc-ranges { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 10px; }

.lc-range {
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--track);
  color: var(--text-secondary);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.lc-range:hover { color: var(--text); }
.lc-range.is-on { background: var(--cyan-dim); color: var(--cyan); }
.lc-range:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.lc-eq-figure { font-size: 22px; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.lc-eq-note { font-size: 11.5px; margin: 3px 0 9px; font-variant-numeric: tabular-nums; }
.lc-eq-note [data-lc-eq-scope] { color: var(--text-muted); }

/* The plot is the hit area, not the svg: an svg with a stroked path only
   reports the pointer where there is ink, and a reader aiming at a gap
   between two points would get nothing. */
.lc-eq-plot { position: relative; cursor: crosshair; }
.lc-eq-plot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 4px; }

.lc-eq-cross { stroke: var(--cyan); stroke-width: .8; stroke-dasharray: 2 3; opacity: .5; }
.lc-eq-dot { fill: var(--cyan); stroke: var(--bg); stroke-width: 1.4; }

.lc-eq-tip {
  position: absolute;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 7px;
  border: .5px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8);
  font-size: 10.5px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.lc-eq-tip b { display: block; font-size: 11.5px; font-weight: 650; }
.lc-eq-tip span { color: var(--text-muted); }

.lc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--cyan-dim);
  color: var(--cyan);
  white-space: nowrap;
}

.lc-chip-muted { background: var(--track); color: var(--text-secondary); }
.lc-chip-green { background: rgba(62, 213, 152, .13); color: var(--green); }
.lc-chip-red { background: rgba(241, 102, 122, .13); color: var(--red); }
.lc-chip-amber { background: rgba(244, 183, 64, .13); color: var(--amber); }
.lc-chip-purple { background: rgba(167, 139, 250, .14); color: var(--purple); }
.lc-chip-blue { background: rgba(124, 180, 250, .14); color: var(--blue); }

.lc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.lc-cal-cell {
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  border: .5px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 7px;
  font-size: 10px;
}

.lc-cal-cell span { color: var(--text-muted); }

/* A legend, because a grid of coloured squares with no figures needs one
   line to say what the colours mean. */
.lc-cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 10px;
  border-top: .5px solid var(--border);
  font-size: 10px;
  color: var(--text-muted);
}

.lc-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }

.lc-cal-legend i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--surface);
  border: .5px solid var(--border);
}

.lc-cal-legend i.is-win { background: rgba(62, 213, 152, .3); border-color: rgba(62, 213, 152, .5); }
.lc-cal-legend i.is-loss { background: rgba(241, 102, 122, .3); border-color: rgba(241, 102, 122, .5); }
.lc-cal-win { background: rgba(62, 213, 152, .10); border-color: rgba(62, 213, 152, .24); }
.lc-cal-loss { background: rgba(241, 102, 122, .10); border-color: rgba(241, 102, 122, .24); }
/* ---- Economic calendar ------------------------------------------------

   A release list, not a P&L grid. The day separators carry the dates so the
   event rows can stay narrow, and the trading-context row is deliberately
   quieter than every release above it. */

.lc-econ td, .lc-econ th { padding-block: 8px; }
.lc-econ-time { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.lc-econ-actual { font-weight: 650; color: var(--text); }

.lc-econ-day td {
  padding: 13px 9px 5px;
  border-bottom: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lc-econ tbody tr:first-child td { padding-top: 4px; }

/* Subordinate by construction: no border of its own, indented, and set at the
   size of a footnote rather than a figure. */
.lc-econ-ctx td {
  padding: 4px 9px 10px 26px;
  border-bottom: 0;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: normal;
}

.lc-econ-ctx b { font-weight: 600; color: var(--text); }
.lc-econ-ctx .lc-pos { color: var(--green); }

/* Inline rather than absolutely positioned: the mark has to sit in the text
   flow to be reliably visible at every width. */
.lc-econ-ctx-mark {
  margin-inline-end: 7px;
  color: var(--text-muted);
}

.lc-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }

.lc-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 9px 8px;
  border-bottom: .5px solid var(--border);
  white-space: nowrap;
}

.lc-table td { padding: 9px; border-bottom: .5px solid var(--border); white-space: nowrap; }
.lc-table tr:last-child td { border-bottom: 0; }
.lc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lc-sym { font-weight: 600; }
.lc-sub { display: block; font-size: 10px; color: var(--text-muted); font-weight: 400; }
.lc-scroll { overflow-x: auto; }

.lc-alloc { display: grid; gap: 8px; }
.lc-alloc-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; font-size: 11.5px; }
.lc-swatch { width: 8px; height: 8px; border-radius: 3px; }
.lc-alloc-row b { font-variant-numeric: tabular-nums; font-weight: 600; }

.lc-bars { display: grid; gap: 11px; }
.lc-bar-row { display: grid; gap: 5px; }
.lc-bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.lc-bar-top b { font-variant-numeric: tabular-nums; }
.lc-bar { height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.lc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--cyan); }

/* ---- Integrations strip ----------------------------------------------- */

.lc-integrations {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 3.5vw, 54px);
  align-items: center;
}

.lc-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.lc-logo-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 15px;
  background: var(--bg);
  transition: background .18s var(--ease);
  min-width: 0;
}

.lc-logo-cell:hover { background: var(--surface); }
.lc-logo-cell > span:last-child { min-width: 0; }
.lc-logo-cell b { display: block; font-size: 13px; font-weight: 600; }
.lc-logo-cell em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

.lc-int-stats { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 20px; }

/* The one link out of this section: the full directory now exists at
   /integrations, so the section can stop being the whole answer. */
.lc-int-more { margin: 0; }
.lc-more-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cyan);
  text-decoration: none;
  font-size: 14px;
  font-weight: 550;
}
.lc-more-link span { transition: transform .18s var(--ease); }
.lc-more-link:hover span { transform: translateX(3px); }

.lc-stat-pill {
  padding: 9px 14px;
  border: .5px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.lc-stat-pill b { color: var(--text); font-weight: 650; }

/* ---- Tabbed product modules ------------------------------------------- */

.lc-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.lc-tabs::-webkit-scrollbar { display: none; }

.lc-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: .5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.lc-tab:hover { color: var(--text); border-color: var(--border-strong); }

.lc-tab[aria-selected="true"] {
  background: var(--cyan-dim);
  border-color: rgba(45, 217, 206, .34);
  color: var(--cyan);
}

.lc-tab-n {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: .5px solid currentColor;
  font-size: 10px;
  font-weight: 700;
  opacity: .8;
}

.lc-pane[hidden] { display: none; }

.lc-caption {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border: .5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.lc-caption b { display: block; font-size: 14px; font-weight: 620; margin-bottom: 4px; }
.lc-caption p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--text-secondary); max-width: 84ch; }

.lc-cap-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--cyan-dim);
  color: var(--cyan);
}

.lc-frame {
  border: .5px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 24px 60px -26px var(--shadow);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.lc-frame:hover { border-color: var(--border-strong); box-shadow: 0 32px 74px -26px var(--shadow-strong); }

.lc-module-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: .5px solid var(--border);
}

.lc-module-foot p { margin: 0; font-size: 12.5px; color: var(--text-muted); max-width: 70ch; }

/* ---- Campaigns -------------------------------------------------------- */

.lc-camp-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 16px; }
.lc-ledgers { display: grid; gap: 10px; align-content: start; }

.lc-ledger { padding: 15px 16px; border: .5px solid var(--border); border-radius: 10px; background: var(--surface-raised); }
/* h3, not h4: these two sit under the section's h2, and the outline was
   skipping a level over them. The size is unchanged. */
.lc-ledger h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 620; display: flex; align-items: center; gap: 9px; }
.lc-ledger p { margin: 0; font-size: 12.5px; line-height: 1.58; color: var(--text-secondary); }

.lc-camp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lc-camp-name { font-size: 14.5px; font-weight: 620; }
.lc-camp-pair { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.lc-camp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px;
  background: var(--border);
  border: .5px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.lc-camp-grid > div { padding: 11px 12px; background: var(--surface-raised); }
.lc-camp-grid span { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.lc-camp-grid b { font-size: 14px; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }

.lc-camp-bar { margin-top: 13px; }
.lc-camp-bar-head { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.lc-camp-track { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; display: flex; }
.lc-camp-track i { display: block; height: 100%; }

/* ---- Portfolio switcher (the real control, shown small) ---------------- */

.lc-pf-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: .5px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 550;
}

.lc-pf-list {
  margin-top: 8px;
  border: .5px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  overflow: hidden;
  font-size: 11.5px;
}

.lc-pf-list > div { padding: 9px 12px; border-bottom: .5px solid var(--border); display: flex; justify-content: space-between; gap: 10px; }
.lc-pf-list > div:last-child { border-bottom: 0; color: var(--cyan); }
.lc-pf-list .is-on { background: var(--cyan-dim); color: var(--cyan); }

/* ---- How it works ------------------------------------------------------

   Three panels that read as one run: the number, then a hairline to the edge
   of the panel, so the eye crosses the gaps. Each panel ends in one small
   artefact, and all three artefacts are the same height so they start on the
   same line whatever the paragraph above them does.

   Step two's artefact is .lc-ui-fold rather than a name of its own: it is a
   picture of the product, and that prefix is what already tells rtl.css to
   keep it left-to-right and the copy sweep to leave its figures alone. */

.lc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.lc-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: .5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}

.lc-step-top { display: flex; align-items: center; gap: 10px; }

/* The same badge as the analytics tabs: a reader who has met "1 2 3" further
   down the page reads these the same way. */
.lc-step-n {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  border: .5px solid var(--cyan);
  color: var(--cyan);
  font-size: 10.5px;
  font-weight: 700;
}

.lc-step-rule { flex: 1; block-size: 1px; background: var(--border); }

.lc-step-t { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.lc-step-b { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }

.lc-step-art {
  margin-block-start: 4px;
  min-block-size: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border: .5px solid var(--border);
  border-radius: 9px;
  background: var(--surface-raised);
}

.lc-src { display: flex; flex-direction: column; gap: 8px; }
.lc-src-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.lc-src-row b { font-weight: 550; }

.lc-src-ico {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 7px;
  border: .5px solid var(--border-strong);
  background: var(--cyan-dim);
  color: var(--cyan);
}

.lc-src-foot {
  margin: 4px 0 0;
  padding-block-start: 9px;
  border-block-start: .5px solid var(--border);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.lc-ui-fold { display: flex; flex-direction: column; gap: 6px; }
.lc-fold-rows { display: flex; flex-direction: column; gap: 3px; }

.lc-fold-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--track);
  font-size: 10.5px;
  color: var(--text-muted);
}
.lc-fold-row b { font-weight: 600; color: var(--text-secondary); }

/* The fold runs downward, so there is no direction in it to mirror. */
.lc-fold-arrow { display: grid; place-items: center; block-size: 18px; color: var(--text-muted); }

.lc-fold-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  border: .5px solid var(--cyan);
  background: var(--cyan-dim);
  color: var(--cyan);
  font-size: 11.5px;
  font-weight: 600;
}

.lc-dest { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }

.lc-dest-item {
  padding: 6px 10px;
  border-radius: 7px;
  border: .5px solid var(--border);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 600;
}

.lc-steps-foot { margin: 22px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* ---- What it can never do ----------------------------------------------

   The claim on the left, the four refusals on the right. Red is reserved for
   financial figures on this page, so a refusal is drawn — a struck circle in
   the muted ink — rather than coloured. */

.lc-secband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.lc-secband-copy .lc-h2 { max-width: 18ch; }
.lc-secband-cta { margin: 18px 0 0; }

.lc-nevers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lc-never {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px;
  border: .5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.lc-never-mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  border: .5px solid var(--border-strong);
  color: var(--text-secondary);
}

/* Direct children: the wrapper span must not take the note's colour and hand
   it down to the bold line inside it. */
.lc-never > span { min-width: 0; }
.lc-never > span > b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.lc-never > span > span { display: block; margin-block-start: 4px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

/* ---- Pricing, while the beta is on -------------------------------------

   One panel, not three columns: nothing is on sale, so there is nothing to
   compare. The rule sits on each row's top edge, which is why the last row
   of a column never leaves a line hanging under nothing. */

.lc-price {
  border: .5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.lc-price-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 18px 22px;
  border-block-end: .5px solid var(--border);
  background: var(--surface-raised);
}

.lc-price-head p { margin: 0; max-width: 62ch; font-size: 13.5px; color: var(--text-secondary); }

.lc-price-pill {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  border: .5px solid var(--cyan);
  background: var(--cyan-dim);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lc-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; padding: 18px 22px; }

.lc-price-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-block: 8px;
  border-block-start: .5px solid var(--border);
  font-size: 13px;
}
.lc-price-item:nth-child(-n+3) { border-block-start: 0; }
.lc-price-item i { margin-inline-start: auto; font-style: normal; font-size: 11px; color: var(--text-muted); }
.lc-price-tick { flex: none; display: grid; place-items: center; color: var(--cyan); }

/* ---- Portfolios, for yourself or for clients ----------------------------

   The security band's two columns, with a Portfolios card in place of the
   refusals. The card is an example — its mark says so — and only a
   financial figure may be green or red on this page, so the states here are
   drawn in the accent and in muted text. */

.lc-pm-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.lc-pm-points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.lc-pm-tick { flex: none; display: grid; place-items: center; margin-block-start: 3px; color: var(--cyan); }

.lc-pm-card {
  margin: 0;
  min-width: 0;
  border: .5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.lc-pm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-block-end: .5px solid var(--border);
  background: var(--surface-raised);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.lc-pm-demo {
  padding: 2px 8px;
  border-radius: 999px;
  border: .5px solid var(--border-strong);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lc-pm-books {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.lc-pm-books li,
.lc-pm-person {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: .5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  min-width: 0;
}

.lc-pm-books li.is-open { border-color: color-mix(in srgb, var(--cyan) 55%, var(--border)); }

.lc-pm-icon,
.lc-pm-avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  background: var(--track);
  color: var(--text-secondary);
}

.lc-pm-avatar { border-radius: 50%; background: var(--cyan-dim); color: var(--cyan); }

.lc-pm-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lc-pm-name b { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.lc-pm-name span { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }

.lc-pm-tag {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--track);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.lc-pm-tag.is-managed { background: var(--cyan-dim); color: var(--cyan); }

.lc-pm-access {
  margin: 0 8px;
  padding: 10px 0 8px;
  border-block-start: .5px dashed var(--border-strong);
}

.lc-pm-access-head {
  margin: 0 4px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lc-pm-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
}

/* The call to action is a sentence in German and Spanish ("So funktionieren
   Portfolios und Kundenzugriff"): on a phone it wraps inside its button
   rather than pushing the page sideways. */
.lc-pm .lc-secband-cta .lc-btn {
  max-inline-size: 100%;
  white-space: normal;
  text-align: start;
  line-height: 1.35;
}

.lc-pm-foot {
  margin: 0;
  padding: 10px 16px 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .lc-pm-books li,
  .lc-pm-person { flex-wrap: wrap; }
  .lc-pm-name { flex-basis: calc(100% - 44px); }
  .lc-pm-tag,
  .lc-pm-state { margin-inline-start: 41px; }
}

@media (max-width: 900px) {
  .lc-steps { grid-template-columns: 1fr; }
  .lc-step-art { min-block-size: 0; }
  .lc-secband { grid-template-columns: 1fr; }
  .lc-nevers { grid-template-columns: 1fr; }
  .lc-price-grid { grid-template-columns: 1fr; }
  /* One column: only the very first row has nothing above it. */
  .lc-price-item:nth-child(-n+3) { border-block-start: .5px solid var(--border); }
  .lc-price-item:first-child { border-block-start: 0; }
}

/* ---- The languages strip -----------------------------------------------

   A closing note, not a pitch: the claim on one side and the six names on
   the other, with no boxes, so it reads lighter than the sections above it
   even though it uses the same type. Each name carries its own `lang`, which
   is what lets a browser pick the right font for Arabic without this sheet
   naming one. */

.lc-langs {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

.lc-langs-title { max-width: 20ch; }

.lc-langchips { display: flex; flex-wrap: wrap; gap: 8px; }

.lc-langchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: .5px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 550;
  color: var(--text-secondary);
}

/* The one the strip is actually about. */
.lc-langchip.is-rtl {
  border-color: var(--cyan);
  background: var(--cyan-dim);
  color: var(--cyan);
}

.lc-langchip-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .75;
}

@media (max-width: 900px) {
  .lc-langs { grid-template-columns: 1fr; }
}

/* ---- Social proof placeholder ----------------------------------------- */

.lc-proof {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 50px 24px;
  border: .5px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
}

.lc-proof p { margin: 0; max-width: 56ch; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

.lc-proof-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(244, 183, 64, .12);
  color: var(--amber);
  font-size: 11.5px;
  font-weight: 600;
}

/* ---- FAQ -------------------------------------------------------------- */

.lc-faq { border-top: .5px solid var(--border); }
.lc-faq details { border-bottom: .5px solid var(--border); }

.lc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 560;
  letter-spacing: -.01em;
}

.lc-faq summary::-webkit-details-marker { display: none; }

.lc-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-inline-end: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}

.lc-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.lc-faq p { margin: 0 0 20px; max-width: 78ch; font-size: 14px; line-height: 1.64; color: var(--text-secondary); }

/* ---- Final CTA + footer ----------------------------------------------- */

.lc-final { text-align: center; }
.lc-final .lc-h2 { max-width: 20ch; margin-inline: auto; }
.lc-final .lc-lede { margin-inline: auto; }
.lc-final .lc-hero-actions { justify-content: center; }

.lc-footer { border-top: .5px solid var(--border); padding-block: 26px 38px; font-size: 13px; color: var(--text-muted); }
.lc-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lc-footer a { color: var(--text-secondary); text-decoration: none; }
.lc-footer a:hover { color: var(--text); }

/* Four columns of destinations, above the line that carries the copyright.
   `auto-fit` rather than a fixed count: the columns stack themselves on a
   phone without a breakpoint deciding when, and a column that is dropped by
   a release (Mentor access, say) leaves no gap behind it. */
.lc-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px 20px;
  padding-bottom: 26px;
  margin-bottom: 22px;
  border-bottom: .5px solid var(--border);
}

.lc-foot-head {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lc-foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lc-foot-col a { display: inline-block; }

/* ---- Reveal ----------------------------------------------------------- */

.lc-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.lc-reveal.is-in { opacity: 1; transform: none; }

/* The page must not be able to hide itself.
   ---------------------------------------------------------------------
   Everything above is an entrance, and an entrance is a thing a page can
   afford to lose. What it cannot afford is what this rule used to cost when
   the entrance never started: eight of the ten sections on this page are
   .lc-reveal, so a single script that throws before landing.js reaches its
   observer leaves a headline on an empty screen — no laptop, no integrations,
   no product tour, no FAQ, no closing call to action. It is not a hypothesis;
   it is what this page looked like the afternoon one import went missing.
   The comment at the top of landing.js promises the page "degrades to a
   readable static page if none of it runs". These two rules are what make
   that true.
   The observer marks the document the moment it is wired, which cancels the
   failsafe below for every reader whose script is working — they keep the
   entrance, unchanged. Anybody else gets the page 1.6s in, faded rather than
   snapped, which is late enough that a slow module still wins the race and
   early enough that nobody is looking at a blank page. */
html:not(.lc-revealed) .lc-reveal {
  animation: lc-reveal-failsafe .45s var(--ease) 1.6s forwards;
}

@keyframes lc-reveal-failsafe {
  to { opacity: 1; transform: none; }
}

/* Scripting off entirely is not a race worth running: show the page at once. */
@media (scripting: none) {
  .lc-reveal { opacity: 1; transform: none; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lc *, .lc *::before, .lc *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .lc-reveal { opacity: 1; transform: none; }
  .lc-device:hover .lc-lid { transform: none; }
  /* The drift is ambience. The cards must still sit where the rail puts them,
     so the idle position is the resting position and nothing else changes.
     !important because the rule that starts the drift is declared later, in
     the width query that positions them. */
  .lc-float { animation: none !important; transform: none !important; }
  .lc-float-live { animation: none !important; }
}

/* ---- Responsive ------------------------------------------------------- */

/* From 1401px the three widgets leave the flow and take the rail reserved for
   them inside the screen. Everything that makes this safe is here, in one
   block, so the fallback below needs no undoing: the reservation, the offsets
   and the drift all start and stop together. */
@media (min-width: 1401px) {
  /* The rail: 144px of screen the dashboard does not use, so a card lands on
     the product's own surface rather than on top of a figure. */
  .lc-device .lc-ui-pad { padding-inline-end: 144px; }

  /* The calendar takes the left column and the equity panel the right one,
     which is the opposite of every other width. The reason is the campaign
     card: it hangs over the bottom-left of the screen, and the equity curve
     is the one panel in the hero a reader can point at and question. A card
     lying across it would make the reading unreachable exactly where the
     hero is widest. The calendar has nothing to answer, so it takes the
     covered corner. */
  .lc-device .lc-panels { grid-template-columns: 1fr 1.35fr; }
  .lc-device .lc-panels > .lc-panel:first-child { order: 2; }
  /* A calendar cell loses about 4px to the rail. It keeps its square and gives
     up the type size instead — the same trade the 420px rule makes. */
  .lc-device .lc-cal { gap: 3px; }
  .lc-device .lc-cal-cell { padding: 4px 5px; font-size: 9px; }

  .lc-floats {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    /* Decoration over a device that lifts on hover: the cards must not eat
       the pointer, only the cards themselves take it back. */
    pointer-events: none;
    transition: transform .45s var(--ease);
  }

  /* The laptop lifts on hover; the widgets are in front of it and lift with
     it, or the depth falls apart the moment the reader points at it. */
  .lc-device:hover .lc-floats { transform: translateY(-4px); }

  .lc-float {
    position: absolute;
    pointer-events: auto;
    animation: lc-float-drift 7.5s var(--ease) infinite alternate;
    cursor: grab;
    /* The browser's own pan gesture would win every drag on a touchpad or a
       touchscreen, so this element asks for the pointer outright. */
    touch-action: none;
  }

  .lc-float:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

  /* Under the hand: the card stops drifting, comes forward, and casts a
     deeper shadow. Nothing scales — a card that grows while it is being
     moved makes it harder to see where it will land. */
  .lc-float.is-dragging {
    cursor: grabbing;
    animation: none;
    z-index: 6;
    box-shadow:
      0 34px 64px -24px rgba(0, 0, 0, .95),
      0 0 40px -14px rgba(45, 217, 206, .55);
  }

  html[data-theme="light"] .lc .lc-float.is-dragging {
    box-shadow:
      0 34px 64px -24px rgba(23, 38, 56, .5),
      0 0 32px -14px rgba(13, 90, 85, .38);
  }

  /* 190px is the rail plus the 44px overhang, less a hair: the card covers
     the reserved strip and stops there. Nothing in the dashboard is behind
     it — that is the whole reason the rail exists. */
  .lc-float-1 { top: 52px; inset-inline-end: -44px; width: 190px; }
  .lc-float-2 { bottom: 30px; inset-inline-end: -44px; width: 190px; }

  /* The rail costs each stat card about 35px. They buy it back from their own
     padding and from the footnote's type size rather than from the figure,
     which is the only line in the card a visitor actually reads. */
  .lc-device .lc-kpi { padding: 10px 10px 9px; }
  .lc-device .lc-kpi-foot { font-size: 9.5px; }

  /* The campaign card is the widest and sits lowest, hanging well past the
     base so most of it is over the page rather than over the dashboard: what
     it covers is the tail of the equity curve, never the figure above it.
     -38px stays inside the 49px gutter the hero grid keeps between its two
     columns, so it never reaches the copy. */
  .lc-float-3 { bottom: -96px; inset-inline-start: -38px; width: 290px; }
  .lc-float-2 { animation-delay: -2.5s; }
  .lc-float-3 { animation-delay: -5s; }

  /* Room for the card that hangs past the base, so the caption underneath is
     never what stops it. */
  .lc-device-note { margin-top: 104px; }
}

@keyframes lc-float-drift {
  from { transform: translateY(-3px); }
  to { transform: translateY(3px); }
}

/* Below 1400 the device column is too narrow for a chart and a seven-day
   calendar side by side, and stacking them pushes the laptop past the fold —
   which defeats the point of putting it there. The hero keeps the KPIs and the
   equity curve, which are the two things the headline is actually about; the
   calendar is a supporting detail and drops out. */
@media (max-width: 1400px) {
  .lc-device .lc-panels { grid-template-columns: 1fr; }
  .lc-device .lc-panels > .lc-panel:last-child { display: none; }
}

@media (max-width: 1180px) {
  .lc-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .lc-hero::before { right: -240px; top: -300px; }
  .lc-integrations { grid-template-columns: 1fr; gap: 28px; }
  .lc-camp-split { grid-template-columns: 1fr; }
  .lc-panels,
  .lc-split-a,
  .lc-split-b { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* The card is anchored to the Product button, and at this width it is far
     wider than the button — so the anchor only decided where it began running
     off the screen. At 768px it started at x=163 and was 640px wide, which put
     35px of it past the right edge and made the whole page scroll sideways.
     Anchoring it to the bar instead, inside the page's own gutters, keeps it
     on screen at every width down to the point where it becomes the phone
     sheet. `inset-inline` rather than a side, so Arabic mirrors for free. */
  .lc-menu-wrap { position: static; }

  .lc-menu {
    inset-inline: var(--gutter);
    width: auto;
    max-width: 640px;
  }
  /* Three widget cards in a row stop being readable at about 200px each; two
     up, then one, keeps every figure on the line it belongs to. */
  .lc-floats { grid-template-columns: 1fr 1fr; }
  .lc-float-3 { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .lc { font-size: 15.5px; }
  /* The menu button is a sixth thing in a bar that held five, and at 390px
     the row was thirteen pixels short of holding it — so the sign-in group
     took a second line where it had always fitted on one. The groups give up
     the spacing they can spare instead, which is the same answer the 380px
     block below already gives. Nothing is hidden to make room. */
  .lc-nav-inner { min-height: 58px; gap: 6px 8px; }
  .lc-nav-cta { gap: 6px; }

  /* The navigation, on a phone.
     -------------------------------------------------------------------
     The links row is still hidden — but now it is hidden behind a button
     rather than simply gone, and opening it moves the same row under the
     bar as a sheet. It is the same element: every destination a release
     allows, every Coming Soon entry, every flagged link is whatever the
     header rendered, so the phone and the desktop cannot offer different
     sites. */
  .lc-nav-links { display: none; }
  .lc-burger { display: inline-grid; width: 32px; height: 32px; }

  .lc-nav[data-menu="open"] .lc-nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 10px 14px 20px;
    /* Seven Product entries are taller than a phone; the sheet scrolls, and
       the scroll stops at its own edge instead of moving the page behind. */
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    border-bottom: .5px solid var(--border);
    box-shadow: 0 24px 60px -20px var(--shadow);
  }

  /* What is left of the page below the sheet: dimmed, and a place to press
     to close. Drawn on the header rather than as an element, so both public
     headers get it without a second node in their markup. */
  .lc-nav[data-menu="open"]::after {
    content: '';
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 1;
    height: 100dvh;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
  }

  /* Opaque while it is open. A blurred bar over a solid sheet reads as a
     mistake — and backdrop-filter would make this header the containing
     block for the sheet positioned inside it, which is not what top: 100%
     is measured against here. */
  .lc-nav[data-menu="open"] {
    background: var(--bg);
    backdrop-filter: none;
    border-bottom-color: var(--border);
  }

  .lc-nav[data-menu="open"] .lc-nav-links > a,
  .lc-nav[data-menu="open"] .lc-nav-trigger {
    justify-content: space-between;
    padding: 12px;
    font-size: 15.5px;
    border-radius: 10px;
  }

  /* Product opens in place. A card floating over a sheet is two overlays
     deep on a screen that has room for neither. */
  .lc-nav[data-menu="open"] .lc-menu-wrap { position: static; }

  .lc-nav[data-menu="open"] .lc-menu {
    position: static;
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 2px 0 6px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .lc-section { padding-block: 52px; }
  .lc-eyebrow::before { display: none; }
  .lc-hero { padding-top: 24px; }
  .lc-hero-actions .lc-btn { flex: 1 1 150px; padding-inline: 14px; }
  .lc-hero-note { align-items: flex-start; text-align: left; font-size: 11.5px; }
  .lc-hero-note svg { margin-top: 3px; }
  .lc-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-floats { grid-template-columns: 1fr; }
  .lc-kpis { grid-template-columns: 1fr 1fr; }
  .lc-ui-pad { padding: 11px; }
  .lc-scroll { margin-inline: -11px; padding-inline: 11px; }
  /* Chips beside a two-line panel title squeeze it into three; give them
     their own row instead. */
  .lc-panel-head { flex-wrap: wrap; }
  .lc-faq summary { font-size: 14.5px; padding: 18px 2px; }
  .lc-footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lc-footer-cols { gap: 20px 16px; }
  .lc-module-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* The narrowest phones, where the sign-in group would otherwise take three
   rows in French and German. Nothing here is hidden — the language control
   in particular stays, because a six-language product that drops its
   language switcher on a small screen drops it for exactly the readers most
   likely to need it. The controls simply give up the padding they can spare,
   which is enough to bring the row back to two. */
@media (max-width: 380px) {
  .lc-nav-cta { gap: 5px 8px; }
  .lc-nav-cta .lc-btn-sm { padding: 7px 11px; font-size: 13px; }
  .lc-lang select {
    padding-block: 4px;
    padding-inline: 8px 20px;
    font-size: 11.5px;
  }
  .lc-lang::after { inset-inline-end: 7px; inline-size: 8px; block-size: 8px; }
}

@media (max-width: 420px) {
  .lc-logos { grid-template-columns: 1fr; }
  .lc-kpis { grid-template-columns: 1fr; }
  .lc-cal { gap: 3px; }
  .lc-cal-cell { padding: 3px 4px; font-size: 8.5px; }
}

/* The language selector in the landing navigation, beside the theme toggle:
   the two presentation controls belong together rather than competing. */
.lc-lang { position: relative; display: inline-flex; align-items: center; }
.lc-lang select {
  appearance: none;
  background: transparent;
  border: .5px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  /* Logical, so the wide side is whichever side the arrow is on. */
  padding-block: 5px;
  padding-inline: 11px 26px;
  cursor: pointer;
}

/* The arrow.
   ---------------------------------------------------------------------
   It used to be two half-filled gradient squares pushed together into one
   triangle, which meant two background layers, two background-positions per
   breakpoint and a mirrored copy of all of it for Arabic — and on a control
   whose height lands on a fractional pixel the two halves did not meet, so
   the arrow came out ragged.

   One chevron instead, the same one the Product menu draws, painted as a
   mask so it still takes the control's own ink and still changes on hover.
   It sits on the label rather than the select, which is what lets
   inset-inline-end put it on the correct side in both directions without a
   single RTL override. */
.lc-lang::after {
  content: "";
  position: absolute;
  inset-inline-end: 10px;
  inline-size: 9px;
  block-size: 9px;
  pointer-events: none;
  color: var(--text-secondary);
  background: currentColor;
  -webkit-mask: var(--lc-chevron) center / contain no-repeat;
  mask: var(--lc-chevron) center / contain no-repeat;
}
.lc-lang:hover::after { color: var(--text); }
.lc-lang select:hover { border-color: var(--border-strong); color: var(--text); }
.lc-lang select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* The open menu is the browser's own popup: it paints its own background
   and takes the text colour from the control, which is the muted grey
   above. Grey on the popup's white left four of the five names all but
   invisible. Paint the option ourselves, like every select in the app. */
.lc-lang select option { background: var(--surface); color: var(--text); }
/* The narrow navigation already drops the theme label; the selector keeps its
   native names, which are the whole point of it. */
@media (max-width: 900px) { .lc-lang select { padding-inline-start: 8px; font-size: 12px; } }

/* The landing does not load app.css, so it needs its own copy of the
   visually-hidden helper the language selector's label uses. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The narrow navigation bar holds five things: the mark, the theme toggle, the
   language selector, a sign-in link and the primary call to action. English
   fits because "Sign in" and "Start free" are unusually short; German and
   French do not, and the button was being clipped at 390px.

   The fix is to narrow the control that can afford it. The selector shows the
   selected language truncated — "Deut…", "Fran…" — and the dropdown it opens
   still lists every native name in full, so nothing is hidden and nothing is
   guessed at. The alternative, replacing the names with codes, makes the menu
   itself harder to read in exactly the language someone cannot read. */
@media (max-width: 620px) {
  /* The selector is the one control that can give ground, so it is the one
     that shrinks when a language runs long — rather than each language being
     tuned by hand until it happens to fit. Everything else keeps its size and
     nothing is hidden. */
  .lc-lang { min-width: 0; }
  .lc-lang select {
    flex: 0 1 auto;
    min-width: 46px;
    max-width: 78px;
    padding-inline: 8px 22px;
    text-overflow: ellipsis;
  }
  .lc-lang::after { inset-inline-end: 8px; }
  /* The two links beside it must not be the things that compress. */
  .lc-nav-cta .lc-link,
  .lc-nav-cta .lc-btn { flex: none; }
  /* The sign-in link is a link, not a button; it can lose its padding before
     anything with a box around it does. */
  .lc-nav-cta .lc-link { padding-inline: 0; }
  .lc-nav-cta { gap: 7px; }
}