/* ==========================================================================
   CRVITAE — pages.css
   Components added in the September 2026 pass: the skip link, the demo request
   form that replaced the telephone and WhatsApp routes, the chat's third-party
   disclosure, and the /privacy/ and /terms/ document pages.

   Kept out of main.css only so two concurrent edits could not collide; it is a
   candidate to fold in. Tokens come from main.css, which must load first.
   Logical properties throughout — /ar/ uses this sheet unchanged.
   ========================================================================== */

/* ---------- skip link ----------------------------------------------------
   Visible the moment it takes focus, and above the fixed header. */
.skip {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--card-hi);
  color: var(--fg-1);
  font: 600 var(--t-14)/1 var(--sans);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - 16px));
  transition: transform var(--dur-tap) var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); }

/* ---------- small notes --------------------------------------------------
   --fg-2, not --fg-3: these are prose a reader is meant to read, and the Ink
   Floor Rule says muted is a label colour. */
.lede__note,
.cta__sender {
  display: block;
  margin-block-start: 10px;
  color: var(--fg-2);
  font: 500 var(--t-14)/1.6 var(--sans);
}
.cta__sender {
  margin-block-start: 18px;
  text-align: center;
  letter-spacing: 0.01em;
}
.lede__note { font-size: var(--t-13); opacity: 0.95; }

.chat__note {
  margin: 0;
  padding: 10px 14px;
  border-block-start: 1px solid var(--stroke);
  color: var(--fg-2);
  font: 500 var(--t-12)/1.5 var(--sans);
}
.chat__note a { color: var(--violet-300); }

/* ---------- the demo request form ---------------------------------------- */
.demoform {
  margin-block-start: 34px;
  padding-block-start: 30px;
  border-block-start: 1px solid var(--stroke);
  text-align: start;
}
.demoform__t {
  margin: 0 0 20px;
  color: var(--fg-1);
  font: 700 var(--t-16)/1.4 var(--sans);
  text-align: center;
}
.demoform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 18px;
}
.field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label {
  color: var(--fg-2);
  font: 600 var(--t-13)/1.3 var(--sans);
  letter-spacing: 0.02em;
}
.field__opt { color: var(--fg-2); font-weight: 500; opacity: .8; }
.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: 11px 13px;
  border: 1px solid var(--stroke-2);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: var(--fg-1);
  font: 500 var(--t-16)/1.5 var(--sans);
  transition: border-color var(--dur-tap) var(--ease-out), background var(--dur-tap) var(--ease-out);
}
.field textarea { resize: vertical; min-block-size: 84px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-2); }
/* Hover and focus raise the surface to --card-hi, which is what that token is
   for — rather than inventing another translucent white. */
.field input:hover,
.field select:hover,
.field textarea:hover { background: var(--card-hi); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--violet-400);
  background: var(--card-hi);
  box-shadow: 0 0 0 3px rgba(124,111,246,0.40);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--coral); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything that is not rendered — and never in the tab order. */
.field--hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.demoform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-block-start: 20px;
}
.demoform__foot .btn { flex: 0 0 auto; }
.demoform__legal {
  flex: 1 1 260px;
  max-inline-size: 78ch;
  margin: 0;
  color: var(--fg-2);
  font: 500 var(--t-12)/1.6 var(--sans);
}
.demoform__legal a { color: var(--violet-300); }

.demoform__status {
  margin: 14px 0 0;
  min-block-size: 1.4em;
  color: var(--fg-1);
  font: 600 var(--t-14)/1.5 var(--sans);
}
.demoform__status[data-state="ok"]  { color: var(--mint); }
.demoform__status[data-state="err"] { color: var(--coral); }
.demoform.is-sending { opacity: .7; pointer-events: none; }

/* ---------- /privacy/ and /terms/ ---------------------------------------- */
.doc { background: var(--bg); }
.hdr--doc {
  position: static;
  background: transparent;
  backdrop-filter: none;
  border-block-end: 1px solid var(--stroke);
}
.doc__wrap {
  max-inline-size: 74ch;
  margin-inline: auto;
  padding: clamp(48px, 9vh, 96px) var(--pad-x) clamp(64px, 12vh, 120px);
}
.doc__h1 {
  margin: 6px 0 18px;
  color: var(--fg-1);
  font: 800 clamp(1.9rem, 4.4vw, 2.8rem)/1.15 var(--sans);
  letter-spacing: -0.02em;
}
.doc__meta {
  margin: 0 0 44px;
  padding-block-end: 26px;
  border-block-end: 1px solid var(--stroke);
  color: var(--fg-2);
  font: 500 var(--t-14)/1.7 var(--sans);
}
.doc__wrap h2 {
  margin: 40px 0 12px;
  color: var(--fg-1);
  font: 700 var(--t-18)/1.35 var(--sans);
  letter-spacing: -0.01em;
}
.doc__wrap p {
  margin: 0 0 15px;
  color: var(--fg-2);
  font: 400 var(--t-16)/1.75 var(--sans);
}
.doc__wrap p b { color: var(--fg-1); font-weight: 700; }
.doc__wrap a { color: var(--violet-300); }
.doc__wrap a:hover { color: var(--violet-400); }
.doc__back {
  margin-block-start: 52px;
  padding-block-start: 26px;
  border-block-start: 1px solid var(--stroke);
}
.footer--doc { padding-block: 28px; }
.footer--doc .footer__legal { color: var(--fg-2); }
.footer--doc a { color: var(--violet-300); }