/* Landing hero for the homepage (office.inled.es) — native ranui product style.
   home.css holds ONLY page layout/composition (grid, spacing rhythm, type scale,
   responsive) — the things tokens and components can't provide. Every design VALUE
   comes from the ranui token layer (public/ran-tokens.css): colours --ran-color-*,
   spacing --ran-space-*, radius --ran-radius-*, fonts --ran-font-*. The UI chrome
   (buttons) is real ranui components (<r-button>). EVERY selector
   is scoped under #landing-hero; dark mode comes from ranui for free.

   Design concept: the page IS a document being edited locally. The hero is an
   asymmetric split — copy on the left, a CSS-built "document window" on the right
   (file tabs, paper sheet, a selected line with a live caret, a review comment,
   and a network readout showing 0 requests — the product's proof, made visual).
   Mono type carries every "machine fact"; blue is spent only on the editor selection
   ground; green only means "local / saved".

   Colours come straight from ranui's tokens — there is deliberately no local alias layer
   (--ink / --rule / --muted and friends are gone). A 1:1 passthrough alias adds a name
   without adding meaning, and it hides drift: when ranui repurposed --ran-color-primary
   from blue to monochrome, one alias line was all that stood between this page and the
   new design language, so nothing here looked wrong until someone happened to notice.
   Reading `var(--ran-color-text)` at the call site says which token is in play; reading
   `var(--ink)` requires a lookup. Only genuinely local values keep a name below. */

/* The homepage does not load landing.css (it builds its own chrome), so the
   document reset it carries has to exist here too -- without it the body keeps
   the browser default 8px margin and the page floats inside a frame of
   backdrop, which is visible the moment the theme is dark. */
body {
  margin: 0;
  background: var(--ran-color-bg);
  /* See landing.css: a Latin run longer than the column would otherwise widen
     the page instead of wrapping. */
  overflow-wrap: break-word;
}

#landing-hero {
  /* editor-selection ground: theme-flipped by ran-tokens (light #dfefff / dark #002f62) */
  --sel: var(--ran-blue-300);
  /* Wide page column. The site has two: this one for anything laid out in
     columns, and 720px for anything read as prose (landing.css .wrap). Any
     third width makes the site look like two sites; test/unit/design-contract
     keeps the three declarations of these two numbers in step. */
  --maxw: 1152px;
  /* fluid page gutter — the only spacing that isn't a fixed step (it scales with
     viewport); bounds are ranui steps (--ran-space-5≈20 not in scale, so raw). */
  --pad: clamp(20px, 5vw, 56px);
  /* Success green as *text*. --ran-color-success is green-700, which measures
     3.06:1 on white -- enough for a 7px dot or a 3px rule, short of WCAG AA's
     4.5:1 for the 10-12px labels that also used it (the chip's "open source",
     the document window's badge and note headings, the step markers). green-900
     is the same hue two stops down: 5.2:1 on white, and brighter than green-700
     in dark mode, where these sit on black. Fills only carry the base token. */
  --success-text: var(--ran-green-900);

  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  background: var(--ran-color-bg);
  color: var(--ran-color-text);
  font-family: var(--ran-font-family);
  font-size: 16px;
  /* 1.65, the same as every other page (landing.css). The homepage used to sit
     at 1.6 -- invisible on its own, and exactly the kind of drift that adds up
     when each page picks its own numbers. */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
#landing-hero * {
  box-sizing: border-box;
}
#landing-hero a {
  color: inherit;
  text-decoration: none;
}
#landing-hero .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---- ranui component sizing via ::part (native look, hero-scaled) ----
   r-button exports two parts: "button" (container: radius/background) and
   "content" (padding/border/typography). Keep the :not(:defined) fallbacks
   below in lockstep with these values — they must render pixel-identical to
   the upgraded component or the swap flashes on load. */
/* The raised shadow ranui paints sits on the HOST element, while the radius
   below only reaches the exported parts inside the shadow DOM. The host keeps
   its own radius (ranui does not set one), so a pill ends up wrapped in a
   rectangular shadow: a straight line under the button, poking out past both
   rounded ends. Barely visible at ranui's 6px default, obvious at --ran-radius-full.
   Give the host the same radius as the thing it wraps. */
#landing-hero .lp-cta r-button,
#landing-hero .lp-cta r-button::part(button) {
  /* Same shape as the .lp-btn anchors beside it: the pill look is gone from
     the hero on purpose -- both actions are rectangles with a 12px corner. */
  border-radius: 12px;
}
#landing-hero .lp-cta r-button::part(content) {
  border-radius: 12px;
  /* Same box as the .lp-btn anchors beside it: two actions, two weights,
     one size. ranui's own content line-height is 22px, which made this button
     ~5px shorter than the anchor next to it; 1.65 is the hero's line-height,
     so both boxes resolve to the same height. */
  padding: 16px 32px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.65;
}

/* Pre-upgrade fallbacks: the static localized pages register components via
   the deferred /ranui-iife/<name>.iife.js bundles, so :not(:defined) keeps the
   CTAs styled and clickable before (or without) them — progressive enhancement,
   not a parallel hand-built component set. */
#landing-hero .lp-cta a {
  text-decoration: none;
}
#landing-hero r-button:not(:defined) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ran-space-2);
  padding: 16px 32px;
  border-radius: 12px;
  border: 1px solid var(--ran-color-border);
  background: var(--ran-color-bg-elevated);
  color: var(--ran-color-text);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.65; /* same box as .lp-btn and as the upgraded component */
}
#landing-hero r-button[type='primary']:not(:defined) {
  background: var(--ran-color-primary);
  border-color: var(--ran-color-primary);
  color: var(--ran-color-primary-text);
}

/* Language switch: same ranui <r-select> on the app homepage and the static
   localized pages (the latter wire navigation with a tiny inline script).
   Extensible: add an option per locale. */
#landing-hero .lang-menu {
  /* The r-popover host is `display: block`; in the nav's flex row that stretches
     it. Shrink it to its trigger. */
  display: inline-flex;
  /* Panel padding: r-popover reads this off the host and hands it to the panel. */
  --ran-popover-content-padding: 4px;
}
/* The face of the control -- the button itself is the r-popover host. */
#landing-hero .lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
  padding: var(--ran-space-2) var(--ran-space-3);
  border-radius: var(--ran-radius-sm);
  font-size: 14px;
  /* Same 22px as the nav links beside it -- see #landing-hero .bar nav .navlink.
     On a phone the label is hidden and only the two icons are left, so the line
     box no longer sets the height: hold it from below instead. */
  line-height: 22px;
  min-height: calc(22px + var(--ran-space-2) * 2);
  color: var(--ran-color-text-secondary);
  cursor: pointer;
  transition: 0.15s ease;
}
#landing-hero .lang-menu:hover .lang-trigger,
#landing-hero .lang-menu[open] .lang-trigger {
  color: var(--ran-color-text);
  background: var(--ran-color-bg-hover);
}
#landing-hero .lang-menu:focus-visible {
  outline: none;
}
#landing-hero .lang-menu:focus-visible .lang-trigger {
  outline: 2px solid var(--ran-color-focus-ring, var(--ran-color-primary));
  outline-offset: 2px;
}
#landing-hero .langmark {
  width: 15px;
  height: 15px;
  flex: none;
}
#landing-hero .lang-caret {
  width: 12px;
  height: 12px;
  flex: none;
  opacity: 0.75;
}
/* The panel is portalled to <body>, so its rows are not under #landing-hero and
   cannot be scoped to it. */
.lang-list {
  display: flex;
  flex-direction: column;
  /* Sized by its longest row -- see landing.css for why a fixed width was wrong. */
  width: max-content;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: var(--ran-space-1);
  padding: 6px 10px;
  border-radius: var(--ran-radius-sm);
  font-size: 14px;
  color: var(--ran-color-text);
  text-decoration: none;
  white-space: nowrap;
}
.lang-option::before {
  content: '';
  width: 11px;
  flex: none;
  font-size: 11px;
  line-height: 1;
  color: var(--ran-color-text-secondary);
}
.lang-option.is-current::before {
  content: '✓';
}
.lang-option:hover {
  background: var(--ran-color-bg-hover);
}
.lang-option.is-current {
  font-weight: 600;
}

/* ---------- language menu panel (ranui r-dropdown) ----------
   The site's own palette applied to the component's variables. The panel is
   portalled to <body>, so these have to be declared at the root: scoped to the
   trigger they would style the trigger and never reach the menu.

   Kept byte-identical in home.css and landing.css (the homepage does not load
   landing.css); test/unit/design-contract.test.ts compares the two blocks. */
:root {
  /* 10px, not the component's 12: at radius-md the corners eat into the rows
     inside the panel. */
  --ran-dropdown-border-radius: 10px;
  --ran-dropdown-box-shadow:
    0 0 0 1px var(--ran-color-border), 0 8px 24px -6px color-mix(in srgb, var(--ran-color-text) 18%, transparent);
}

/* r-popover always points an arrow back at its trigger, which is right for the
   tooltip it was built for and wrong for a navigation menu -- a menu hangs off
   its button, it does not annotate it. The class is r-popover's own name for
   the panel it portals to <body>; the language switcher is the only popover on
   the site, so scoping it there keeps a future tooltip's arrow intact. */
.ran-popover-dropdown {
  --ran-dropdown-arrow-display: none;
}

@media (max-width: 620px) {
  /* Phone: the trigger keeps the globe and the caret and drops the language
     name, which is the part that costs width. */
  #landing-hero .lang-current {
    display: none;
  }
  /* Phone: the mark stays, the wordmark goes -- see landing.css, which does the
     same for every other page's copy of this bar. */
  #landing-hero .wordmark {
    display: none;
  }
}

/* ---------- top bar ----------
   Sticky, translucent, blurred -- the reference chrome (InSuite Office):
   a white/80 bar with a hairline under it that content scrolls behind. */
#landing-hero .bar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ran-color-border);
  background: color-mix(in srgb, var(--ran-color-bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#landing-hero .bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ran-space-4);
  padding-top: var(--ran-space-4);
  padding-bottom: var(--ran-space-4);
}
#landing-hero .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
/* The mark is the hosted Insuite glyph (an <img>, not the old letter tile):
   no fill behind it, it only has to be square and round its own corners. */
#landing-hero .brand .logo {
  width: 40px;
  height: 40px;
  border-radius: var(--ran-radius-sm);
  display: inline-block;
}
/* Two-line lockup, as in the reference header: name over a whisper-small tagline. */
#landing-hero .brand .wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}
#landing-hero .brand .tagline {
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.7;
  letter-spacing: 0.02em;
}
#landing-hero .bar nav {
  display: flex;
  align-items: center;
  gap: var(--ran-space-1);
}
#landing-hero .bar nav .navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
  padding: var(--ran-space-2) var(--ran-space-3);
  border-radius: var(--ran-radius-sm);
  font-size: 14px;
  /* One height for every item in the bar. Without this the links inherit the
     body's prose leading (1.65 -> 23.1px) while the language trigger sets its
     own line-height: the two hover pills came out 39px and 31px, visibly
     different boxes in one row. 22px matches the theme switch beside them. */
  line-height: 22px;
  color: var(--ran-color-text-secondary);
  transition: 0.15s ease;
}
#landing-hero .bar nav .navlink:hover {
  color: var(--ran-color-text);
  background: var(--ran-color-bg-hover);
}
#landing-hero .ghmark {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}

/* ---------- hero: the reference's centred opening ---------- */
#landing-hero .lp-hero {
  max-width: 1152px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 56px) clamp(48px, 6vw, 96px);
  text-align: center;
}
/* The one local colour on this page: the reference's flag blue. Everything
   else reads the token layer (light and dark come along for free); the blue
   below is the same hex the reference hard-codes in its own stylesheet, and it
   is what buys the likeness. */
#landing-hero .lp-hero,
#landing-hero .lp-section {
  --lp-blue: #43bbfe;
}
#landing-hero .lp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
  padding: var(--ran-space-1) var(--ran-space-3);
  border-radius: var(--ran-radius-full);
  background: color-mix(in srgb, var(--lp-blue) 12%, transparent);
  color: var(--lp-blue);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: var(--ran-space-6);
}
#landing-hero .lp-hero h1 {
  margin: 0;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
/* The flag stamp is gone from the hero. Keep the rule out rather than an
   empty selector: nothing renders .lp-flag any more. */
#landing-hero .lp-sub {
  margin: clamp(18px, 2.2vw, 26px) auto 0;
  max-width: 44rem;
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.7;
  color: var(--ran-color-text-secondary);
}
/* The two calls, side by side on a row and stacked on a phone -- the
   reference's own arrangement. */
#landing-hero .lp-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ran-space-4);
  margin-top: clamp(28px, 3vw, 40px);
}
@media (min-width: 640px) {
  #landing-hero .lp-cta {
    flex-direction: row;
  }
}
#landing-hero .lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ran-space-2);
  width: 100%;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16.5px;
  font-weight: 700;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
@media (min-width: 640px) {
  #landing-hero .lp-btn {
    width: auto;
  }
}
/* The three hero claims, one line under the calls. An inline list, not cards:
   these are facts, not features to explore (the grid for that is the next
   section down). A check marks each claim, and the line sits a full beat
   below the buttons -- tight under them it read as a stray caption. */
#landing-hero .lp-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ran-space-2) var(--ran-space-6);
  margin: clamp(30px, 4vw, 48px) auto 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ran-color-text);
}
#landing-hero .lp-points li {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
}
#landing-hero .lp-points li::before {
  content: '✓';
  color: var(--lp-blue);
  font-weight: 700;
}
#landing-hero .lp-btn .ic {
  width: 20px;
  height: 20px;
  flex: none;
}
#landing-hero .lp-btn-primary {
  background: var(--lp-blue);
  color: #fff;
  box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--lp-blue) 70%, transparent);
}
#landing-hero .lp-btn-primary:hover {
  transform: translateY(-2px);
}
#landing-hero .lp-btn-ghost {
  border: 1px solid var(--ran-color-border);
  background: var(--ran-color-bg-muted);
  color: var(--ran-color-text);
}
#landing-hero .lp-btn-ghost:hover {
  background: var(--ran-color-bg-hover);
}

/* ---------- section scaffolding: centred heads, breathing bands ----------
   The reference's sections are centred: a big bold heading, one grey line
   under it, and the cards below. Every band gets the same vertical rhythm. */
#landing-hero .section {
  padding-top: clamp(56px, 7vw, 104px);
}
#landing-hero .section-head {
  margin-bottom: clamp(28px, 3vw, 44px);
  padding-bottom: var(--ran-space-4);
  border-bottom: 1px solid var(--ran-color-border);
}
#landing-hero .section-head .eyebrow {
  display: block;
  margin-bottom: var(--ran-space-3);
  font: 600 12px/1 var(--ran-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* gray mono label — blue is reserved for links and the hero selection */
  color: var(--ran-color-text-secondary);
}
#landing-hero .section-head .head-note {
  margin: var(--ran-space-4) 0 0;
  max-width: 34ch;
  font-size: 14.5px;
  color: var(--ran-color-text-secondary);
}
#landing-hero .section-head .head-note a {
  color: var(--ran-color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#landing-hero .section-head h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
#landing-hero .lp-section {
  padding: clamp(56px, 8vw, 96px) 0;
}
#landing-hero .lp-section-alt {
  background: var(--ran-color-bg-muted);
}
#landing-hero .lp-eyebrow {
  display: block;
  margin-bottom: var(--ran-space-3);
  font: 700 12px/1 var(--ran-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ran-color-text-secondary);
}
#landing-hero .lp-head {
  max-width: 44rem;
  margin: 0 auto clamp(32px, 4vw, 56px);
  text-align: center;
}
#landing-hero .lp-head h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
#landing-hero .lp-head p {
  margin: var(--ran-space-4) 0 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--ran-color-text-secondary);
}

/* ---------- cards: the white grid the reference lives on ---------- */
#landing-hero .lp-grid {
  display: grid;
  gap: var(--ran-space-6);
}
#landing-hero .lp-grid-3 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  #landing-hero .lp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
#landing-hero .lp-grid-4 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  #landing-hero .lp-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  #landing-hero .lp-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
#landing-hero .lp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 28px;
  border: 1px solid var(--ran-color-border);
  border-radius: 24px;
  background: var(--ran-color-bg-elevated);
  text-align: center;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
#landing-hero a.lp-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--lp-blue) 45%, transparent);
  box-shadow: var(--ran-shadow-elevated);
}
#landing-hero .lp-card-mark {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--lp-blue) 12%, transparent);
  color: var(--lp-blue);
}
#landing-hero .lp-card-mark .ic {
  width: 32px;
  height: 32px;
}
#landing-hero .lp-card h3 {
  margin: 0 0 var(--ran-space-2);
  font-size: 20px;
  letter-spacing: -0.015em;
}
#landing-hero .lp-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ran-color-text-secondary);
}
#landing-hero .lp-card-plugins {
  background: color-mix(in srgb, var(--lp-blue) 5%, transparent);
  border-color: color-mix(in srgb, var(--lp-blue) 22%, transparent);
}
#landing-hero .lp-card-plugins h3 {
  color: var(--lp-blue);
}
/* Document-type marks echo the product: documents blue, spreadsheets green,
   presentations orange. The fourth tile is the plugin tile, which keeps the
   reference blue. */
#landing-hero .lp-card-link:nth-of-type(1) .lp-card-mark {
  background: #eff6ff;
  color: #2563eb;
}
#landing-hero .lp-card-link:nth-of-type(2) .lp-card-mark {
  background: #f0fdf4;
  color: #16a34a;
}
#landing-hero .lp-card-link:nth-of-type(3) .lp-card-mark {
  background: #fff7ed;
  color: #ea580c;
}

/* ---------- the honest comparison: one wide table ----------
   A table, not cards: these are seven columns of facts meant to be read
   against each other, and five cards would hide the columns that make the
   comparison legible. On a phone it scrolls sideways inside its own scroll
   region rather than squeezing into a column of cards. */
#landing-hero .lp-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--ran-color-border);
  border-radius: 16px;
  background: var(--ran-color-bg-elevated);
}
#landing-hero .lp-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 14px;
}
#landing-hero .lp-table th {
  padding: 20px 16px;
  border-bottom: 2px solid var(--ran-color-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ran-color-text-secondary);
  white-space: nowrap;
}
#landing-hero .lp-table td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--ran-color-border);
  vertical-align: middle;
  white-space: nowrap;
}
#landing-hero .lp-table tbody tr:last-child td {
  border-bottom: none;
}
#landing-hero .lp-table tbody tr.is-featured {
  background: color-mix(in srgb, var(--lp-blue) 5%, transparent);
}
#landing-hero .lp-table tbody tr:not(.is-featured):hover {
  background: var(--ran-color-bg-muted);
}
#landing-hero .lp-suite {
  display: flex;
  align-items: center;
  gap: var(--ran-space-3);
}
#landing-hero .lp-suite img {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: contain;
  flex: none;
}
#landing-hero .lp-table tr.is-featured .lp-suite b {
  color: var(--lp-blue);
}
#landing-hero .lp-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--ran-radius-full);
  background: var(--ran-color-bg-hover);
  color: var(--ran-color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}
#landing-hero .lp-pill-ok {
  background: #dcfce7;
  color: #15803d;
}
#landing-hero .lp-center {
  text-align: center;
}
#landing-hero .lp-table .ic.lp-yes {
  width: 20px;
  height: 20px;
  color: #22c55e;
}
#landing-hero .lp-table .ic.lp-no {
  width: 20px;
  height: 20px;
  color: #ef4444;
}
#landing-hero .lp-stars {
  white-space: nowrap;
}
#landing-hero .lp-star {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--ran-color-border);
}
#landing-hero .lp-star.on {
  background: #facc15;
}
#landing-hero .lp-free {
  color: #15803d;
  font-weight: 700;
}
#landing-hero .lp-diff {
  font-size: 13px;
  font-style: italic;
  color: var(--ran-color-text-secondary);
  white-space: normal;
}

/* ---------- the closing call: one rounded frame ---------- */
#landing-hero .lp-final {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ran-color-border);
  border-radius: 48px;
  background: var(--ran-color-bg-muted);
  overflow: hidden;
}
#landing-hero .lp-final-media {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--ran-color-border);
  background: #000;
}
#landing-hero .lp-final-body {
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px);
  text-align: center;
}
#landing-hero .lp-final-body h2 {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
#landing-hero .lp-final-body > p {
  margin: var(--ran-space-6) auto 0;
  max-width: 46rem;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--ran-color-text-secondary);
}
#landing-hero .lp-final .lp-cta {
  margin-top: clamp(24px, 3vw, 36px);
}
#landing-hero .lp-final-note {
  margin: var(--ran-space-6) 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ran-color-text-secondary);
  opacity: 0.75;
}

/* ---------- about Inled: the sign-off ---------- */
#landing-hero .lp-about {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
#landing-hero .lp-about img {
  height: 80px;
  width: auto;
  margin: 0 auto 36px;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}
#landing-hero .lp-about img:hover {
  filter: none;
}
#landing-hero .lp-about h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
}
#landing-hero .lp-about p {
  margin: var(--ran-space-6) 0 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.8;
  color: var(--ran-color-text-secondary);
}
#landing-hero .lp-about-stats {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 6vw, 64px);
  margin-top: var(--ran-space-8);
}
#landing-hero .lp-about-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ran-space-2);
}
#landing-hero .lp-about-stats b {
  font-size: 30px;
  font-weight: 800;
  color: var(--lp-blue);
}
#landing-hero .lp-about-stats span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* The autosave promise, now with the InSuite spacing instead of the marginal
   note's left rule. Its top margin keeps "Saved documents" a beat apart from
   the claims line above instead of crowding the CTA block. */
#landing-hero .lp-recent {
  max-width: 62ch;
  margin: clamp(18px, 2.5vw, 30px) auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ran-color-text-secondary);
}
#landing-hero .lp-recent a {
  color: var(--ran-color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
#landing-hero .lp-recent a:hover {
  color: var(--lp-blue);
}
#landing-hero .lp-recent .recent-resume {
  display: block;
  margin-bottom: var(--ran-space-2);
  font-weight: 600;
  color: var(--ran-color-text);
}

/* ---------- format index: one row per entry point ----------
   These seven entries are a directory, not seven products: same shape, same verb,
   scanned down the left edge until the reader finds their extension. A grid of
   cards makes that scan two-dimensional and leaves a ragged last row (7 does
   not divide by 4). Rows read in one direction, cost one hairline each, and
   put the extension -- the thing being looked up -- in a fixed left column. */
/* No rule above the first row: the section head already draws one, and two
   hairlines a gap apart read as an empty table header. */
#landing-hero .index .row {
  display: grid;
  grid-template-columns: 132px minmax(0, 13rem) minmax(0, 1fr) 16px;
  align-items: baseline;
  gap: clamp(20px, 2vw, 32px);
  /* The hover ground extends past the text into the gutter, so a row lights up
     as a band rather than as a tight box around the words. */
  padding: var(--ran-space-4) var(--ran-space-3);
  margin: 0 calc(-1 * var(--ran-space-3));
  border-bottom: 1px solid var(--ran-color-border);
  border-radius: var(--ran-radius-sm);
  color: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
#landing-hero .index .row:hover {
  background: var(--ran-color-bg-hover);
}
#landing-hero .index .ext {
  font: 600 12.5px/1.5 var(--ran-font-mono);
  letter-spacing: 0.03em;
  color: var(--ran-color-text-secondary);
  white-space: nowrap;
}
#landing-hero .index .name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#landing-hero .index .desc {
  color: var(--ran-color-text-secondary);
  font-size: 14.5px;
  line-height: 1.5;
}
#landing-hero .index .go {
  justify-self: end;
  font: 400 15px/1 var(--ran-font-mono);
  color: var(--ran-color-text-secondary);
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}
#landing-hero .index .row:hover .go {
  transform: translateX(3px);
  color: var(--ran-color-text);
}
#landing-hero .index .row:focus-visible {
  outline: 2px solid var(--ran-color-link);
  outline-offset: -2px;
}
/* Tablet: the row still fits all four columns, just tighter. */
@media (max-width: 980px) {
  #landing-hero .index .row {
    grid-template-columns: 112px minmax(0, 11rem) minmax(0, 1fr) 16px;
    gap: var(--ran-space-4);
  }
  #landing-hero .index .desc {
    font-size: 13.5px;
  }
}
@media (max-width: 760px) {
  /* The description is the first thing to go: the extension and the verb are
     what the row is looked up by. */
  #landing-hero .index .row {
    grid-template-columns: 108px minmax(0, 1fr) 16px;
  }
  #landing-hero .index .desc {
    display: none;
  }
}
@media (max-width: 900px) {
  #landing-hero .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(28px, 4vw, 44px);
  }
  /* two columns: the rule goes between the pair, never before a row's first */
  #landing-hero .pillar:nth-child(odd) {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
}
@media (max-width: 560px) {
  #landing-hero .index .row {
    grid-template-columns: 1fr 16px;
    gap: var(--ran-space-1) var(--ran-space-4);
  }
  #landing-hero .index .ext {
    grid-column: 1;
    order: -1;
  }
  #landing-hero .index .go {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
  }
  #landing-hero .pillars {
    grid-template-columns: minmax(0, 1fr);
  }
  #landing-hero .pillar + .pillar {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    border-top: 1px solid var(--ran-color-border);
    padding-top: var(--ran-space-6);
  }
}

/* ---------- how it works: an open rail, not boxes ---------- */
#landing-hero .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ran-space-8);
}
#landing-hero .step {
  position: relative;
  border-top: 2px solid var(--ran-color-border);
  padding-top: var(--ran-space-4);
}
#landing-hero .step::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--ran-color-text);
}
#landing-hero .step .n {
  font: 700 13px/1 var(--ran-font-mono);
  color: var(--ran-color-text-secondary);
  letter-spacing: 0.04em;
}
#landing-hero .step h3 {
  margin: var(--ran-space-3) 0 var(--ran-space-2);
  font-size: 17px;
  letter-spacing: -0.01em;
}
#landing-hero .step p {
  margin: 0;
  color: var(--ran-color-text-secondary);
  font-size: 14.5px;
}
#landing-hero .step .loc {
  display: inline-block;
  margin-top: var(--ran-space-4);
  font: 600 10.5px/1 var(--ran-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--success-text);
}

/* ---------- faq: head left, answers right ---------- */
#landing-hero .faq-sec {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
#landing-hero .faq-sec .section-head {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
#landing-hero .faq {
  min-width: 0;
}
#landing-hero .qa details {
  border-top: 1px solid var(--ran-color-border);
}
#landing-hero .qa details:last-child {
  border-bottom: 1px solid var(--ran-color-border);
}
#landing-hero .qa summary {
  cursor: pointer;
  list-style: none;
  padding: var(--ran-space-4) 0;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ran-space-4);
}
#landing-hero .qa summary::-webkit-details-marker {
  display: none;
}
#landing-hero .qa summary::after {
  content: '+';
  font: 400 20px/1 var(--ran-font-mono);
  color: var(--ran-color-text-secondary);
  transition: transform 0.15s ease;
}
#landing-hero .qa details[open] summary::after {
  transform: rotate(45deg);
}
#landing-hero .qa .a {
  margin: 0;
  padding: 0 0 var(--ran-space-4);
  color: var(--ran-color-text-secondary);
  font-size: 15px;
  line-height: 1.65;
  max-width: 62ch;
}

/* ---------- ecosystem + footer ---------- */
#landing-hero .eco {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--ran-color-border);
  background: var(--ran-color-bg-subtle);
}
#landing-hero .eco .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ran-space-4) var(--ran-space-6);
  padding-top: var(--ran-space-6);
  padding-bottom: var(--ran-space-6);
}
#landing-hero .eco-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
  font: 600 11px/1.4 var(--ran-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ran-color-text-secondary);
}
#landing-hero .eco-label .gitmark {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}
#landing-hero .eco nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ran-space-3);
}
#landing-hero .eco nav a,
#landing-hero .eco nav .here {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ran-space-2);
  font-size: 13.5px;
  padding: var(--ran-space-2) var(--ran-space-4);
  border: 1px solid var(--ran-color-border);
  border-radius: var(--ran-radius-md);
  background: var(--ran-color-bg);
}
#landing-hero .eco nav a {
  color: var(--ran-color-text-secondary);
  transition: 0.15s ease;
}
#landing-hero .eco nav a:hover {
  border-color: var(--ran-color-border-hover);
  color: var(--ran-color-text);
}
#landing-hero .eco nav b {
  font: 700 12.5px/1 var(--ran-font-mono);
}
#landing-hero .eco nav small {
  color: var(--ran-color-text-secondary);
}
#landing-hero .eco nav .here {
  color: var(--ran-color-text);
  border-color: var(--ran-color-text);
}
/* the footer carries both classes (<footer class="foot wrap">), so the layout
   sits on the compound selector — a descendant `.foot .wrap` never matches */
#landing-hero .foot {
  border-top: 1px solid var(--ran-color-border);
}
#landing-hero .foot.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ran-space-4);
  padding-top: var(--ran-space-8);
  padding-bottom: var(--ran-space-10);
  color: var(--ran-color-text-secondary);
  font-size: 13.5px;
}
#landing-hero .foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ran-space-4);
}
#landing-hero .foot a:hover {
  color: var(--ran-color-text);
}
#landing-hero .foot .lic {
  font: 500 12px/1 var(--ran-font-mono);
}
/* Same notice as the generated pages carry (see landing.css .page-foot .tm).
   The footer is a space-between flex row, so the notice takes a row of its
   own rather than competing with the links for the line. */
#landing-hero .foot .tm {
  flex: 1 0 100%;
  margin: 0;
  max-width: 72ch;
  font-size: 12.5px;
  line-height: 1.6;
}
/* Discreet derivative credit: same row treatment as .tm so it reads as part of
   the footer's fine print rather than as another navigation link. */
#landing-hero .foot .deriv {
  flex: 1 0 100%;
  margin: 0;
  max-width: 72ch;
  font-size: 12.5px;
  line-height: 1.6;
}
#landing-hero .foot .deriv a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#landing-hero .foot .deriv a:hover {
  color: var(--ran-color-text);
}

/* ---------- theme switch (footer) ----------
   Real ranui <r-theme-switch> (three-state pill wired to setTheme). The
   pre-upgrade fallback reserves the pill's exact footprint (3×28px buttons +
   2px gaps + 2px padding + 1px border) so the upgrade doesn't shift layout. */
#landing-hero r-theme-switch.theme-switch:not(:defined) {
  display: inline-block;
  width: 94px;
  height: 34px;
  border: 1px solid var(--ran-color-border);
  border-radius: var(--ran-radius-full);
}

/* ---------- motion ---------- */
/* Pure CSS, no JS: a load-in stagger on the hero and a live caret in the
   preview window. All gated behind prefers-reduced-motion (the caret stays
   visible, just static). */
@media (prefers-reduced-motion: no-preference) {
  /* orchestrated hero load-in */
  #landing-hero .reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: lh-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  #landing-hero .d1 {
    animation-delay: 0.06s;
  }
  #landing-hero .d2 {
    animation-delay: 0.16s;
  }
  #landing-hero .d3 {
    animation-delay: 0.28s;
  }
  #landing-hero .d4 {
    animation-delay: 0.4s;
  }
  #landing-hero .d5 {
    animation-delay: 0.52s;
  }
  @keyframes lh-rise {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  #landing-hero .faq-sec {
    grid-template-columns: 1fr;
  }
  #landing-hero .faq-sec .section-head {
    border-bottom: 1px solid var(--ran-color-border);
    padding-bottom: var(--ran-space-4);
  }
  #landing-hero .bar nav .navlink:not(.gh) {
    display: none;
  }
}

/* The autosave line. Retained selectors: `recent-*` never match the page, but
 * the note, the saved-documents link and the injected resume link do. */
#landing-hero .recent {
  display: none;
}
/* The retention window is the load-bearing half of the sentence: the difference
   between "the browser keeps my documents" and "keeps them for a week". */
#landing-hero .recent-all {
  margin-left: var(--ran-space-2);
}
#landing-hero .recent a,
#landing-hero .lp-recent a {
  color: var(--ran-color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
#landing-hero .recent a:hover,
#landing-hero .lp-recent a:hover {
  color: var(--ran-color-primary);
}
/* Only rendered when this browser is actually holding something (see
   /history-recent.js), and then it is the first thing in the block. */
#landing-hero .recent-resume {
  display: block;
  margin-bottom: var(--ran-space-1);
  font-weight: 600;
  color: var(--ran-color-text);
}
@media (max-width: 560px) {
  #landing-hero .lp-recent {
    font-size: 13px;
  }
}