/* ══════════════════════════════════════════════════════════════════════════════════════════
   guide.css — the GUIDE pages, built on the homepage's design system.

   DESIGN BRIEF
   Direction: these pages belong to the marketing site, not to the documentation. They were
   previously built on legal.css — the terms-of-service surface — which is why they read as a
   plain HTML document with a sidebar rather than as a useclodex.com page. This file replaces
   that inheritance with the system index.html actually uses.

   WHERE THE VALUES COME FROM. The chrome — nav, buttons, FAQ accordion, footer, scroll-reveal
   — is copied VERBATIM out of index.html's inline <style>, not re-derived by eye. A guide page
   and the homepage should not merely resemble each other; the nav on both is meant to be the
   same object, so a change to one is a change to a value that exists in two files and nowhere
   else. If you restyle the homepage nav or footer, restyle it here in the same pass.

   Type: 'Google Sans' 400 at a tight -0.03em for display, exactly as the homepage section
   headings do it — the guides get the same voice as "Design tools that ride on your live
   preview", not a documentation h1. 'Plus Jakarta Sans' carries body and UI. 'Geist Mono' is
   the accent, used only for step numerals and micro-labels.
   Palette: the homepage's — #101010 under a radial lift at the top, white inks stepping down
   through --dim to --faint, and blue reserved for links, the primary CTA and the one accent
   rule on the answer card. Nothing else competes with the CTA.
   Shape: the homepage's radius family — 20px on raised panels, 16px on the blue button, 12px
   on recessed fields and small controls, 999px on pills. Nested radii step DOWN.
   Depth: gradient + skeuomorphic, per the homepage — a 1px light inset along the top edge, a
   low-opacity surface gradient, and layered shadows rather than one foggy blur.
   Motion: the homepage's .rv scroll-reveal and the FAQ's grid-template-rows expansion, on the
   same --ease. Nothing new is introduced.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #101010;
  --ink: #f4f5f7;
  --dim: #9a9ea9;
  /* THE HOMEPAGE USES #656974 HERE AND IT SHOULD NOT. On #101010 that measures 3.47:1, under
     the 4.5:1 floor, and it is applied to real text (the footer column headings at 11px). This
     is the value legal.css moved to after the same audit — 5.51:1, visually near-identical at
     the sizes it is used on. Kept deliberately different from index.html; if the homepage is
     ever fixed, it should adopt THIS number rather than this file adopting that one. */
  --faint: #868a94;
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.15);
  --blue: #3789f7;
  --blue-soft: rgba(55,137,247,0.13);
  --nav-h: 66px;
  --ease: cubic-bezier(.22,1,.36,1);

  /* one spacing scale, as on the doc pages — the values are the same ones the site already
     steps through, so a guide and a legal page share a rhythm even across two stylesheets */
  --s-0: 4px;  --s-1: 8px;  --s-2: 12px; --s-3: 16px;
  --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 88px;

  /* the article's own widths. THREE, on purpose: prose stays at a readable measure while
     panels and grids break wider, which is what stops the page reading as one narrow column
     down the middle of a 1440px screen. */
  --measure: 760px;   /* paragraph text — about 72 characters at 17px */
  --panel: 940px;     /* answer card, FAQ, CTA band */
  --wide: 1120px;     /* capability grid */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background-color: var(--bg);
  /* the homepage's top lift, verbatim — it is what stops #101010 reading as a flat void */
  background-image: radial-gradient(120% 80% at 50% 0%, #212121 0%, rgba(35,36,42,0) 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(55,137,247,.32); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* Skip link — visible only on focus, and it must sit ABOVE the sticky nav or it lands behind it. */
.skip { position: absolute; left: -9999px; z-index: 60; padding: 12px 18px; border-radius: 10px;
  background: #fff; color: #0a0b0e; font-size: 14px; font-weight: 600; }
.skip:focus { left: 24px; top: 12px; }

/* ── NAV — verbatim from index.html ───────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 40; background: transparent; transition: top .3s ease; }
.nav.scrolled { top: 12px; }
.nav-in { display: flex; align-items: center; height: var(--nav-h); gap: 12px; border-radius: 999px;
  transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease; }
.nav.scrolled .nav-in { background: rgba(10,11,14,0.46);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 12px 34px -20px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.06); }
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px;
  font: 700 17px 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -0.02em;
  transition: opacity .15s; }
.brand:hover { opacity: .78; }
.brand .mk { width: 22px; height: 22px; background: var(--ink);
  -webkit-mask: url("/app/assets/clodex-mark.png") center/contain no-repeat;
  mask: url("/app/assets/clodex-mark.png") center/contain no-repeat; }
.nav-links { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: #fff;
  font-size: 14px; font-weight: 500; transition: opacity .15s; }
.nav-links a:hover { opacity: .75; }
.nav-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-toggle { display: none; width: 46px; height: 46px; margin-right: -10px; padding: 0;
  background: transparent; border: 0; cursor: pointer; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; -webkit-tap-highlight-color: transparent; }
.nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .24s var(--ease), opacity .2s ease; }
.nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── BUTTONS — verbatim from index.html ───────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px 'Plus Jakarta Sans', system-ui, sans-serif; border-radius: 10px;
  padding: 9px 17px; cursor: pointer; border: 1px solid transparent;
  transition: transform .1s, background .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: #f4f5f7; color: #0a0b0e; }
.btn.primary:hover { background: #fff; }
.btn.ghost { border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,0.03); }
.btn.ghost:hover { background: rgba(255,255,255,0.07); }
.btn.lg { padding: 15px 30px; font-size: 16px; border-radius: 12px; }
.btn-blue { color: #fff; font-weight: 700; gap: .6em; border-radius: 16px; white-space: nowrap;
  background: linear-gradient(180deg, #287ded 0, #3b8fff 60%, #519efa 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(22,88,185,.4),
    inset 0 -5px 10px rgba(15,66,150,.3), 0 1px 3px rgba(10,28,66,.4), 0 9px 18px -6px rgba(10,32,80,.5);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn-blue:hover { transform: translateY(-2px); }
.btn-blue:active { transform: translateY(1px) scale(.985); }
.os-ic { width: 17px; height: 17px; fill: currentColor; }

/* ── MASTHEAD ─────────────────────────────────────────────────────────────────────────────────
   The old page opened on a 40px documentation h1 against an empty right half. This is the
   homepage's display voice at the homepage's scale, centred, over the same field. It is NOT a
   full-screen hero — a guide's job is to start answering immediately, so the answer card is
   deliberately visible under the fold line rather than pushed off it. */
.g-mast { position: relative; padding: clamp(56px, 8vh, 96px) 0 clamp(32px, 4vh, 48px); text-align: center; }
.g-mast-in { max-width: 880px; margin: 0 auto; }
.g-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-4);
  padding: 7px 14px 7px 11px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  font: 500 12px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .04em;
  color: var(--dim); user-select: none; }
.g-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.g-title { font: 400 clamp(2.1rem, 5.2vw, 3.5rem)/1.02 'Google Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -0.03em; color: #ebebeb; }
.g-title .dim2 { color: #7c7e86; }
.g-sub { max-width: 700px; margin: var(--s-4) auto 0; color: var(--dim);
  font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 1.62; }
.g-sub b { color: var(--ink); font-weight: 600; }
.g-meta { margin-top: var(--s-4); color: var(--faint); font-size: 13px; }
.g-meta b { color: var(--dim); font-weight: 600; }

/* ── ARTICLE SHELL ──
   One centred column. The measure governs PROSE; panels and grids opt out by naming their own
   width, which is what keeps a 1440px screen from showing a thin ribbon of text down the middle. */
.g-body { padding: 0 0 clamp(56px, 8vh, 96px); }
.g-body > .wrap > * { max-width: var(--measure); margin-inline: auto; }
.g-body p { color: var(--dim); font-size: 17px; line-height: 1.72; margin-top: var(--s-4); }
.g-body p b { color: var(--ink); font-weight: 600; }
.g-body p em { color: var(--ink); font-style: italic; }
/* UNDERLINED BY DEFAULT, not on hover. An inline link that is only distinguished by being blue
   relies on colour alone to carry meaning, which fails WCAG 1.4.1 and is invisible to anyone who
   cannot separate the two hues. The rule is tinted and offset so it reads as a considered
   underline rather than a browser default, and it goes solid on hover. */
.g-body a:not(.btn) { color: var(--blue); text-decoration: underline;
  text-decoration-color: rgba(55,137,247,.42); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.g-body a:not(.btn):hover { text-decoration-color: var(--blue); }
.g-body code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: .88em;
  padding: .14em .42em; border-radius: 6px; background: rgba(255,255,255,.06);
  border: 1px solid var(--line); color: #cfd3db; }
.g-body h2 { margin-top: clamp(56px, 7vw, 88px);
  font: 400 clamp(1.7rem, 3vw, 2.35rem)/1.12 'Google Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -0.03em; color: #ebebeb; scroll-margin-top: calc(var(--nav-h) + 24px); }
.g-body h2 + p { margin-top: var(--s-3); }

/* ── THE ANSWER CARD ──
   The most important object on the page: the inverted-pyramid block an answer engine lifts.
   It gets the homepage's RAISED panel treatment (20px, surface gradient, layered shadow, 1px
   top inset) plus the single blue rule — the one place blue appears that is not a link or the
   CTA, because this is the page's thesis. */
.g-answer { max-width: var(--panel) !important; margin-top: var(--s-6);
  padding: clamp(24px, 3vw, 36px); border-radius: 20px;
  border: 1px solid rgba(255,255,255,.11);
  border-left: 3px solid var(--blue);
  background-image: linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.027));
  box-shadow: 0 30px 64px -26px rgba(0,0,0,.85), 0 4px 12px -6px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08); }
.g-answer-h { margin-bottom: var(--s-3); font: 600 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); user-select: none; }
.g-answer p { margin-top: var(--s-3); font-size: clamp(16px, 1.5vw, 17.5px); color: #c9cdd6; }
.g-answer p:first-of-type { margin-top: 0; }
.g-answer p b { color: #fff; font-weight: 650; }

/* ── CONTENTS — pills, not a numbered document index ──
   A marketing page does not open on an ordered list. These are chips on the same 999px radius
   as the eyebrow and the nav, so the page's shape language holds. */
.g-toc { max-width: var(--panel) !important; margin-top: var(--s-5); }
.g-toc-h { margin-bottom: var(--s-2); font: 600 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); user-select: none; }
.g-toc ul { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; }
.g-toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--dim); font-size: 13.5px; font-weight: 500;
  transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease); }
.g-toc a:hover { color: var(--ink); background: rgba(255,255,255,.07); border-color: var(--line-2);
  text-decoration: none !important; }

/* ── CAPABILITY GRID ──
   Cards, at the WIDE width. Each is a raised surface on the homepage's treatment; the icon slot
   keeps a consistent optical size so a row never reads as three different card kinds. The
   title/description pair differs on size, weight AND ink, and the gap inside a pair is tighter
   than the gap to the next card, so each reads as one unit. */
/* 320, NOT 268. At 268 the grid resolves to FOUR columns on a 1120px track, and four columns of
   that width means the shortest description wraps to two lines while the longest wraps to five —
   grid stretches every card in a row to the tallest, so the short ones ended up with a paragraph
   marooned above 150px of empty card. Three wider columns pull the line counts together and the
   cards fill. The fix is the column width, not a min-height on the card, which would only move
   the void around. */
.g-caps { max-width: var(--wide) !important; margin-top: var(--s-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-3); }
.g-cap { padding: var(--s-4); border-radius: 20px; border: 1px solid rgba(255,255,255,.09);
  background-image: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.022));
  box-shadow: 0 20px 44px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); }
.g-cap:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.16);
  box-shadow: 0 28px 56px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09); }
.g-cap-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: var(--s-3);
  border-radius: 12px; background: rgba(55,137,247,.11); border: 1px solid rgba(55,137,247,.22);
  color: #8fc0ff; }
.g-cap-ic svg { width: 18px; height: 18px; }
.g-cap-t { font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.g-cap-d { margin-top: 6px; font-size: 14.5px; font-weight: 400; line-height: 1.6; color: var(--dim); }

/* ── THE LOOP ──
   Numbered because the ORDER is the argument. A connecting rule runs down behind the numerals
   so the five steps read as one sequence rather than five separate rows — drawn on the LIST,
   not on each step, so it cannot leave a stub hanging below the last numeral. */
.g-loop { max-width: var(--panel) !important; position: relative; margin-top: var(--s-5);
  counter-reset: gloop; display: grid; gap: var(--s-3); }
.g-loop::before { content: ''; position: absolute; left: 21px; top: 34px; bottom: 34px; width: 1px;
  background: linear-gradient(180deg, rgba(55,137,247,.34), rgba(255,255,255,.07)); }
.g-step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3);
  align-items: start; }
.g-step::before { counter-increment: gloop; content: counter(gloop);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  font: 500 14px 'Geist Mono', ui-monospace, monospace; color: #8fc0ff;
  background: #16171a; border: 1px solid rgba(55,137,247,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.g-step-b { padding-top: 3px; }
.g-step-t { font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.g-step-d { margin-top: 5px; font-size: 14.5px; line-height: 1.66; color: var(--dim); }

/* ── LIMITS ──
   A RECESSED surface, deliberately — the homepage uses the inset treatment for fields, and
   sinking this panel rather than raising it is what marks it as a caveat without needing a
   warning colour. The stock amber "warning" swatch would be the generic move here. */
.g-limits { max-width: var(--panel) !important; margin-top: var(--s-5);
  padding: clamp(22px, 2.6vw, 30px); border-radius: 20px;
  background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.34), inset 0 -1px 0 rgba(255,255,255,.043); }
.g-limits-h { margin-bottom: var(--s-3); font: 600 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); user-select: none; }
.g-limits ul { list-style: none; display: grid; gap: var(--s-2); }
.g-limits li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.66; color: var(--dim); }
.g-limits li::before { content: ''; position: absolute; left: 2px; top: 10px;
  width: 6px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.22); }
.g-limits li b { color: var(--ink); font-weight: 600; }

/* ── FAQ — verbatim from index.html ───────────────────────────────────────────────────────── */
.g-faq { max-width: var(--panel) !important; margin-top: var(--s-5); display: grid; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 24px;
  padding: 24px 4px; font-size: 1.06rem; font-weight: 500; color: var(--dim);
  letter-spacing: -0.01em; transition: color .22s var(--ease); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--ink); }
.faq-item.is-open .faq-q { color: #fff; }
.faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
/* the question is an h3 for the document outline; it must not look like one */
.faq-q h3 { flex: 1; font: inherit; }
.faq-chev { flex-shrink: 0; width: 22px; height: 22px; color: var(--faint);
  transition: transform .42s var(--ease), color .22s var(--ease); }
.faq-q:hover .faq-chev { color: var(--dim); }
.faq-item.is-open .faq-chev { transform: rotate(180deg); color: var(--dim); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.faq-item[open] .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; min-height: 0; }
.faq-a-inner { padding: 0 4px 28px; color: var(--dim); font-size: 15.5px; line-height: 1.64;
  max-width: 70ch; opacity: 0; transform: translateY(-4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.faq-item.is-open .faq-a-inner { opacity: 1; transform: none; }
.faq-a-inner p { margin: 0 0 16px; }
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-a-inner b { color: var(--ink); font-weight: 600; }
.faq-a-inner a { color: var(--blue); }
.faq-a-inner a:hover { text-decoration: underline; }

/* ── SOURCES ── */
.g-sources { max-width: var(--panel) !important; margin-top: clamp(48px, 6vw, 72px);
  padding-top: var(--s-5); border-top: 1px solid var(--line); }
.g-sources-h { margin-bottom: var(--s-3); font: 600 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); user-select: none; }
.g-sources ul { list-style: none; display: grid; gap: var(--s-2); }
.g-sources li { font-size: 14.5px; line-height: 1.6; color: var(--faint); }
.g-sources a { color: var(--ink); font-weight: 600; }
.g-sources a:hover { color: var(--blue); }

/* ── CTA BAND ──
   The guides used to end on a list of links. A marketing page closes on the action, and this is
   the homepage's install close at guide scale — same blue button, same two-beat headline. */
.g-cta { max-width: var(--panel) !important; margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(32px, 4.5vw, 56px) clamp(24px, 4vw, 48px); border-radius: 20px; text-align: center;
  border: 1px solid rgba(255,255,255,.1);
  background-image: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(120% 140% at 50% 0%, rgba(55,137,247,.16) 0%, rgba(55,137,247,0) 62%);
  box-shadow: 0 30px 64px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.g-cta h2 { margin-top: 0 !important;
  font: 400 clamp(1.6rem, 3.4vw, 2.3rem)/1.1 'Google Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -.03em; color: #ebebeb; }
.g-cta p { max-width: 520px; margin: var(--s-3) auto 0; font-size: 15.5px; color: var(--dim); }
.g-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-5); }
.g-cta-meta { margin-top: var(--s-3); font-size: 12.5px; color: var(--faint); }

/* ── RELATED GUIDES ── */
.g-rel { max-width: var(--wide) !important; margin-top: clamp(48px, 6vw, 72px); }
.g-rel-h { margin-bottom: var(--s-3); font: 600 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); user-select: none; }
.g-rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.g-rel-card { display: block; padding: var(--s-4); border-radius: 16px;
  border: 1px solid var(--line); background: rgba(255,255,255,.025);
  transition: transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease); }
.g-rel-card:hover { transform: translateY(-3px); border-color: var(--line-2); background: rgba(255,255,255,.05);
  text-decoration: none !important; }
.g-rel-k { font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); }
.g-rel-t { margin-top: 10px; font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.g-rel-d { margin-top: 6px; font-size: 14px; line-height: 1.58; color: var(--dim); }

/* ── FOOTER — verbatim from index.html ────────────────────────────────────────────────────── */
.foot { background: #0c0c0c; border-top: 1px solid var(--line); padding: 52px 0 0; margin-top: clamp(56px, 8vw, 96px); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, auto);
  justify-content: space-between; align-items: start; gap: 48px 56px; }
.foot-guides { max-width: 178px; }
.foot-guides a { line-height: 1.4; }
.foot-col { display: grid; gap: 2px; align-content: start; }
.foot-brand { gap: 16px; }
.foot-tag { max-width: 250px; color: var(--dim); font-size: 14px; line-height: 1.5; }
.foot-col-h { margin-bottom: 12px; color: var(--faint);
  font: 600 11px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.foot-col a { width: fit-content; min-width: 44px; color: var(--dim); font-size: 14.5px;
  padding: 6px 0; transition: color .16s var(--ease); }
.foot-col a:hover { color: var(--ink); }
.foot-bot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px 24px; margin-top: 52px; padding: 20px 0 26px; border-top: 1px solid var(--line); }
.foot-copy { margin: 0; color: var(--dim); font-size: 12.5px; }
.foot-note { margin: 0; color: var(--faint); font-size: 12.5px; }

/* ── SCROLL REVEAL — verbatim from index.html ─────────────────────────────────────────────── */
.js .rv { opacity: 0; transform: translateY(18px);
  transition: opacity .62s var(--ease), transform .62s var(--ease); }
.js .rv.in, .js .rv.now { opacity: 1; transform: none; }
.js .rv.now { transition: none; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  .nav.scrolled { top: 0; }
  .nav.scrolled .nav-in { border-radius: 0; }
  .nav-links { position: absolute; top: calc(var(--nav-h) - 4px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 0;
    background: #0c0d10; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 40px -22px rgba(0,0,0,.9);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .nav.nav-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-in { position: relative; }
  .nav-links a { min-height: 50px; padding: 0 20px; font-size: 16px; }
  .nav-links a:hover { opacity: 1; background: rgba(255,255,255,0.05); }
  .nav-right { gap: 12px; }
}
@media (max-width: 940px) {
  .foot-in { grid-template-columns: repeat(3, auto); gap: 36px 32px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .g-body p { font-size: 16px; }
  .g-step { grid-template-columns: 38px 1fr; }
  .g-step::before { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }
  .g-loop::before { left: 18px; }
}
@media (max-width: 700px) { .foot-in { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 24px; } }
@media (max-width: 560px) {
  .foot-in { grid-template-columns: 1fr; gap: 30px; }
  .foot-col a { padding: 9px 0; }
  .foot-bot { margin-top: 40px; }
  .g-cta-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.in { opacity: 1; transform: none; transition: none; }
  .faq-a-wrap, .faq-chev, .faq-a-inner { transition: none; }
  .g-cap:hover, .g-rel-card:hover, .btn-blue:hover { transform: none; }
}