/* Landing hero for the homepage (edit.chaxus.com) — 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, cards) is real ranui components (<r-button>, <r-card>). 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 selection/caret/
   primary action; green only means "local / saved". */

#landing-hero {
  --ink: var(--ran-color-text);
  --ink-2: var(--ran-color-text-secondary);
  --muted: var(--ran-gray-800);
  --rule: var(--ran-color-border);
  --accent: var(--ran-color-primary);
  --signal: var(--ran-color-success);
  /* editor-selection ground: theme-flipped by ran-tokens (light #dfefff / dark #002f62) */
  --sel: var(--ran-blue-300);
  --sans: var(--ran-font-family);
  --mono: var(--ran-font-mono);
  --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);

  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  background: var(--ran-color-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -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. */
#landing-hero .cta r-button::part(button) {
  border-radius: var(--ran-radius-full);
}
#landing-hero .cta r-button::part(content) {
  border-radius: var(--ran-radius-full);
  padding: var(--ran-space-3) var(--ran-space-6);
  font-size: 15.5px;
  font-weight: 600;
}

/* 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 .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: var(--ran-space-3) var(--ran-space-6);
  border-radius: var(--ran-radius-full);
  border: 1px solid var(--ran-color-border);
  background: var(--ran-color-bg-elevated);
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 22px; /* matches .ran-btn-content's default line-height */
}
#landing-hero r-button[type='contrast']:not(:defined) {
  background: var(--ran-color-contrast-bg, var(--ran-gray-1000));
  border-color: var(--ran-color-contrast-bg, var(--ran-gray-1000));
  color: var(--ran-color-contrast-text, var(--ran-background-100));
}

/* 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-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-1);
  padding-left: var(--ran-space-1);
}
#landing-hero .langmark {
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex: none;
}
#landing-hero r-select.lang-select {
  display: inline-block;
  min-width: 84px;
  font-size: 14px;
}
/* hide the raw option list pre-upgrade; the reserved width avoids layout shift */
#landing-hero r-select.lang-select:not(:defined) {
  visibility: hidden;
}

/* ---------- top bar ---------- */
#landing-hero .bar {
  border-bottom: 1px solid var(--rule);
}
#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;
}
#landing-hero .brand .logo {
  width: 24px;
  height: 24px;
  border-radius: var(--ran-radius-sm);
  /* monochrome mark (Geist): ink on page bg, inverts with the theme */
  background: var(--ink);
  display: inline-grid;
  place-items: center;
  color: var(--ran-color-bg);
  font-size: 13px;
  font-weight: 700;
}
#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;
  color: var(--ink-2);
  transition: 0.15s ease;
}
#landing-hero .bar nav .navlink:hover {
  color: var(--ink);
  background: var(--ran-color-bg-hover);
}
#landing-hero .ghmark {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}

/* ---------- hero: copy left, document window right ---------- */
#landing-hero .hero {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
#landing-hero .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
  padding: var(--ran-space-1) var(--ran-space-3);
  border: 1px solid var(--rule);
  border-radius: var(--ran-radius-full);
  /* bordered pill on the plain page bg (Geist badge), no fill */
  background: transparent;
  font: 500 12px/1.8 var(--mono);
  color: var(--ink-2);
  margin-bottom: var(--ran-space-6);
}
#landing-hero .chip b {
  color: var(--signal);
  font-weight: 600;
}
#landing-hero .chip .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--ran-radius-full);
  background: var(--signal);
}
#landing-hero h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 64px);
  /* 1.1, not tighter: the .accent selection paints the full line box, so at
     1.05 it clips the descenders of the line above (glyphs overlapped). */
  line-height: 1.1;
  letter-spacing: -0.045em;
  font-weight: 700;
  text-wrap: balance;
}
/* The key phrase reads as text selected in an editor — the product's own way of
   emphasising — instead of a plain accent colour.
   The highlight is a gradient rect inset 0.14em from the fragment's top, not a
   full background: at tight leading a later line's inline background paints
   OVER the previous line's descenders (the "g" of "right" was clipped by the
   next fragment). The inset stays above cap height, so glyph coverage is
   unchanged while the line above keeps its descenders. */
#landing-hero h1 .accent {
  background: linear-gradient(var(--sel), var(--sel)) 0 0.14em / 100% calc(100% - 0.14em) no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.08em;
}
#landing-hero .sub {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  max-width: 46ch;
  font-size: clamp(16.5px, 1.5vw, 19px);
  color: var(--ink-2);
}
#landing-hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ran-space-3);
  margin-top: clamp(24px, 2.8vw, 36px);
}
#landing-hero .trust {
  margin-top: var(--ran-space-6);
  font: 500 12.5px/1.6 var(--mono);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ran-space-1) var(--ran-space-3);
}
#landing-hero .trust .sep {
  color: var(--rule);
}
/* ---------- document window (decorative, pure CSS — runs on static pages too) ---------- */
#landing-hero .docwin {
  border: 1px solid var(--rule);
  border-radius: var(--ran-radius-lg);
  background: var(--ran-color-bg-elevated);
  /* in-flow bordered surface → the quiet elevated tier, not the overlay tier */
  box-shadow: var(--ran-shadow-elevated);
  overflow: hidden;
  font-family: var(--mono);
}
#landing-hero .dw-bar {
  display: flex;
  align-items: center;
  gap: var(--ran-space-3);
  padding: var(--ran-space-3) var(--ran-space-4);
  border-bottom: 1px solid var(--rule);
  background: var(--ran-color-bg-subtle);
  font-size: 11.5px;
  color: var(--ink-2);
}
#landing-hero .dw-dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
#landing-hero .dw-dots i {
  width: 9px;
  height: 9px;
  border-radius: var(--ran-radius-full);
  background: var(--ran-color-border-hover);
}
#landing-hero .dw-file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#landing-hero .dw-badge {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--signal);
}
#landing-hero .dw-tabs {
  display: flex;
  gap: 3px;
  padding: var(--ran-space-2) var(--ran-space-4) 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ran-color-bg-subtle);
  font-size: 11px;
}
#landing-hero .dw-tabs span {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--ran-radius-sm) var(--ran-radius-sm) 0 0;
  color: var(--muted);
}
#landing-hero .dw-tabs .on {
  position: relative;
  top: 1px;
  background: var(--ran-color-bg-elevated);
  border-color: var(--rule);
  color: var(--ink);
  font-weight: 600;
}
#landing-hero .dw-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: var(--ran-space-4);
  padding: clamp(18px, 2vw, 28px) var(--ran-space-4);
}
#landing-hero .dw-sheet {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: var(--ran-space-1);
}
/* skeleton text lines — the surrounding "document" the real line sits in */
#landing-hero .dw-sheet .dl {
  height: 9px;
  border-radius: 3px;
  background: var(--ran-color-bg-active);
}
#landing-hero .dw-sheet .dl.t {
  height: 15px;
  width: 52%;
  border-radius: 4px;
  background: var(--ran-color-border-hover);
  margin-bottom: var(--ran-space-2);
}
#landing-hero .dw-sheet .w92 {
  width: 92%;
}
#landing-hero .dw-sheet .w85 {
  width: 85%;
}
#landing-hero .dw-sheet .w78 {
  width: 78%;
}
#landing-hero .dw-sheet .w60 {
  width: 60%;
}
/* the one real line: selected text + live caret */
#landing-hero .dw-text {
  margin: 2px 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
}
#landing-hero .dw-text mark {
  background: var(--sel);
  color: inherit;
  padding: 2px 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
#landing-hero .dw-text .caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--accent);
}
/* margin annotation, styled like a review comment */
#landing-hero .dw-note {
  align-self: start;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  border-radius: var(--ran-radius-sm);
  background: var(--ran-color-bg-subtle);
  padding: var(--ran-space-2) var(--ran-space-3);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
#landing-hero .dw-note b {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--signal);
}
/* status strip: the proof, spelled out */
#landing-hero .dw-net {
  display: flex;
  align-items: center;
  gap: var(--ran-space-2);
  padding: var(--ran-space-2) var(--ran-space-4);
  border-top: 1px solid var(--rule);
  background: var(--ran-color-bg-subtle);
  font-size: 11px;
  color: var(--muted);
}
#landing-hero .dw-net .ok {
  width: 7px;
  height: 7px;
  border-radius: var(--ran-radius-full);
  background: var(--signal);
  flex: none;
}

/* ---------- section scaffolding: left-aligned head on a hairline ---------- */
#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(--rule);
}
#landing-hero .section-head .eyebrow {
  display: block;
  margin-bottom: var(--ran-space-3);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* gray mono label — blue is reserved for links and the hero selection */
  color: var(--muted);
}
#landing-hero .section-head h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

/* ---------- feature cards (r-card, diagonal bento) ---------- */
#landing-hero .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'a a b'
    'c d d';
  gap: var(--ran-space-4);
}
#landing-hero .cards > :nth-child(1) {
  grid-area: a;
}
#landing-hero .cards > :nth-child(2) {
  grid-area: b;
}
#landing-hero .cards > :nth-child(3) {
  grid-area: c;
}
#landing-hero .cards > :nth-child(4) {
  grid-area: d;
}
#landing-hero .cards r-card {
  display: block;
  height: 100%;
}
/* Card hover (border darken + elevated shadow) is the component's own
   `hoverable` behavior now — see <r-card hoverable> in the markup. */
/* pre-upgrade fallback: mirrors the upgraded .ran-card chrome exactly
   (border, radius-md, page background, its built-in 16px padding) so the
   custom-element upgrade doesn't flash */
#landing-hero .cards r-card:not(:defined),
#landing-hero .formats r-card:not(:defined) {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--ran-radius-md);
  background: var(--ran-color-bg);
  padding: var(--ran-space-4);
}
/* r-card renders its own container chrome; card-body only adds inner padding. */
#landing-hero .card-body {
  padding: var(--ran-space-6);
}
#landing-hero .card-body .k {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
#landing-hero .card-body h3 {
  margin: var(--ran-space-4) 0 var(--ran-space-2);
  font-size: 17px;
  letter-spacing: -0.01em;
}
#landing-hero .card-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 52ch;
}
/* the two wide bento cells lead with a bigger claim */
#landing-hero .cards > :nth-child(1) .card-body h3,
#landing-hero .cards > :nth-child(4) .card-body h3 {
  font-size: 21px;
  letter-spacing: -0.02em;
}

/* ---------- format entry points (open a file without Office) ---------- */
#landing-hero .formats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ran-space-4);
}
#landing-hero .formats .fmt {
  display: block;
  min-width: 0;
  color: inherit;
}
#landing-hero .formats r-card {
  display: block;
  height: 100%;
}
#landing-hero .formats .card-body {
  padding: var(--ran-space-4) var(--ran-space-4) var(--ran-space-6);
}
#landing-hero .formats .card-body h3 {
  font-size: 16px;
}
#landing-hero .formats .card-body p {
  font-size: 13.5px;
}
#landing-hero .fmt-go {
  display: inline-block;
  margin-top: var(--ran-space-4);
  font: 600 12.5px/1 var(--mono);
  color: var(--accent);
}
@media (max-width: 900px) {
  #landing-hero .formats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  #landing-hero .formats {
    grid-template-columns: 1fr;
  }
}

/* ---------- 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(--rule);
  padding-top: var(--ran-space-4);
}
#landing-hero .step::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--ink);
}
#landing-hero .step .n {
  font: 700 13px/1 var(--mono);
  color: var(--muted);
  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(--ink-2);
  font-size: 14.5px;
}
#landing-hero .step .loc {
  display: inline-block;
  margin-top: var(--ran-space-4);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ---------- 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(--rule);
}
#landing-hero .qa details:last-child {
  border-bottom: 1px solid var(--rule);
}
#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(--mono);
  color: var(--muted);
  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(--ink-2);
  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(--rule);
  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(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#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(--rule);
  border-radius: var(--ran-radius-md);
  background: var(--ran-color-bg);
}
#landing-hero .eco nav a {
  color: var(--ink-2);
  transition: 0.15s ease;
}
#landing-hero .eco nav a:hover {
  border-color: var(--ran-color-border-hover);
  color: var(--ink);
}
#landing-hero .eco nav b {
  font: 700 12.5px/1 var(--mono);
}
#landing-hero .eco nav small {
  color: var(--muted);
}
#landing-hero .eco nav .here {
  color: var(--ink);
  border-color: var(--ink);
}
/* 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(--rule);
}
#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(--muted);
  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(--ink);
}
#landing-hero .foot .lic {
  font: 500 12px/1 var(--mono);
}

/* ---------- 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(--rule);
  border-radius: var(--ran-radius-full);
}

/* ---------- motion ---------- */
/* Pure CSS, no JS: a load-in stagger on the hero, a live caret in the document
   window, a pulse on the status dot, and a hover lift on cards. 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;
    }
  }

  /* live caret in the document window */
  #landing-hero .dw-text .caret {
    animation: lh-blink 1.1s steps(2, start) infinite;
  }
  @keyframes lh-blink {
    to {
      visibility: hidden;
    }
  }

  /* live status dot on the chip */
  #landing-hero .chip .dot {
    animation: lh-pulse 2.2s ease-out infinite;
  }
  @keyframes lh-pulse {
    0% {
      box-shadow: 0 0 0 0 var(--ran-green-500);
    }
    70% {
      box-shadow: 0 0 0 6px transparent;
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  #landing-hero .hero {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }
  #landing-hero .docwin {
    max-width: 640px;
  }
}
@media (max-width: 900px) {
  #landing-hero .cards {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'a a'
      'b c'
      'd d';
  }
  #landing-hero .steps {
    grid-template-columns: 1fr;
    gap: var(--ran-space-6);
  }
  #landing-hero .faq-sec {
    grid-template-columns: 1fr;
  }
  #landing-hero .faq-sec .section-head {
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--ran-space-4);
  }
  #landing-hero .bar nav .navlink:not(.gh) {
    display: none;
  }
}
@media (max-width: 560px) {
  #landing-hero .cards {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'b'
      'c'
      'd';
  }
  #landing-hero .dw-body {
    grid-template-columns: 1fr;
  }
  #landing-hero .dw-note {
    justify-self: start;
  }
}