/* ============================================================
   AVEUM — public activation flow (/activate)
   The Figma frames "Этап 1 — Идентификация карты", "Этап 2 — Персональные данные" and the
   status card, drawn at 1440px; measures below are Figma px at that width and scale with
   clamp(). The landing's design language (InsuranceCard.Landing/wwwroot/styles.css):
   black/white, pill buttons, hairline rules. Scoped under .av so the portal's own theme is
   untouched. Legal.razor (/legal/{slug}) shares the shell: .av-nav, .av-btn, .av-page,
   .av-container, .av-h1, .av-lead, .av-alert, .av-spin.
   ============================================================ */
.av {
  --av-black: #010101;
  --av-white: #ffffff;
  --av-gray: #777777;
  --av-gray-2: #666666;
  --av-gray-3: #9a9a9a;
  --av-gray-light: #cecece;      /* every field border and rule (Figma) */
  --av-placeholder: #8f8f8f;
  --av-line: #e6e6e6;
  --av-card: #f6f6f6;
  --av-link: #5f9ae7;
  --av-ok: #1d8a53;
  --av-err: #cc1414;             /* Figma's error red: border, label and value */

  --av-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --av-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --av-maxw: 1180px;
  /* Figma: the wordmark sits 75px in at 1440, the step-2 card 120px (1200px centred). */
  --av-gutter: clamp(16px, 5.21vw, 100px);
  --av-page-x: clamp(16px, 5.21vw, 120px);
  --av-pill: 47px;
  --av-r-card: 20px;
  --av-r-field: 12px;
  --av-field-h: 56px;
  --av-card-pad: clamp(20px, 3.06vw, 44px);
  --av-nav-h: 80px;

  font-family: var(--av-font);
  font-size: 1rem;
  color: var(--av-black);
  background: var(--av-white);
  min-height: 100vh;
  letter-spacing: -0.01em;
}
/* `hidden` is only the UA rule `[hidden] { display: none }`, which any author `display`
   declaration overrides — and .av-btn sets one. Make the attribute mean what it says. */
.av [hidden] { display: none !important; }
.av h1, .av h2, .av h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
.av p { margin: 0; }
.av a { color: inherit; text-decoration: none; }
.av ul, .av ol { margin: 0; padding: 0; list-style: none; }
.av button { font-family: inherit; }
.av-mono { font-family: var(--av-mono); letter-spacing: .04em; }
.av-muted { color: var(--av-gray); }
.av-fine { font-size: .75rem; color: var(--av-gray-3); line-height: 1.5; }

/* ---------- header ----------
   Solid white, no backdrop-filter: a blurred header becomes the containing block of anything
   positioned inside it, which is how the landing's phone menu collapsed to a transparent 0px
   strip. The burger panel below is position:absolute under the header with its own height. */
.av-nav {
  position: sticky; top: 0; z-index: 50; height: var(--av-nav-h);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 40px);
  padding: 0 var(--av-gutter);
  background: var(--av-white);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.av-nav__logo { display: block; flex: 0 0 auto; }
/* Figma: the wordmark is 160 × 25 at 1440. */
.av-nav__logo svg { height: clamp(18px, 1.74vw, 25px); width: auto; }
.av-nav__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* The landing nav (Figma): links 50px apart, 17px; pills 34px tall; a 42px globe 57px off. */
.av-nav--site { gap: clamp(20px, 3.47vw, 50px); border-bottom-color: transparent; }
.av-nav__links {
  display: flex; align-items: center; gap: clamp(20px, 3.47vw, 50px);
  font-size: clamp(.9375rem, .55rem + .7vw, 1.0625rem); letter-spacing: -0.02em; white-space: nowrap;
}
.av-nav__links a:hover { opacity: .65; }

.av-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px;
  border-radius: var(--av-pill); border: 1px solid var(--av-black); white-space: nowrap; line-height: 1;
  font-size: clamp(.9375rem, .55rem + .7vw, 1.0625rem); letter-spacing: -0.02em;
  transition: transform .15s ease, opacity .15s ease;
}
.av-pill:hover { transform: translateY(-1px); }
/* .av on the selector: `.av a { color: inherit }` outranks a bare class. */
.av .av-pill--black { background: var(--av-black); color: var(--av-white); }
.av-pill--outline { background: transparent; color: var(--av-black); }

.av-round {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; border: 1px solid var(--av-black);
  background: transparent; color: var(--av-black); padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.av-round:focus-visible, .av-pill:focus-visible { outline: 2px solid var(--av-black); outline-offset: 3px; }

.av-langmenu { position: relative; margin-left: clamp(0px, 3.13vw, 45px); }
.av-langmenu__list {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; z-index: 60;
  background: var(--av-white); border: 1px solid var(--av-line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14); padding: 6px;
}
.av-langmenu__list button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--av-black);
  font-size: .9375rem; text-align: left; cursor: pointer;
}
.av-langmenu__list button:hover { background: #f2f2f2; }
.av-langmenu__list button.is-active { font-weight: 600; }
.av-langmenu__list button.is-active::after { content: "✓"; font-size: 13px; }

.av-nav__burger { display: none; }
.av-navpanel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 51;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--av-nav-h)); overflow-y: auto;
  padding: 4px var(--av-gutter) 24px;
  background: var(--av-white); color: var(--av-black);
  border-top: 1px solid var(--av-line); box-shadow: 0 24px 40px rgba(0, 0, 0, .12);
}
.av-navpanel__link { padding: 16px 0; font-size: 1.125rem; border-bottom: 1px solid var(--av-line); }
.av-navpanel__cta { display: grid; gap: 12px; margin-top: 22px; }
.av-navpanel__cta .av-pill { height: 48px; font-size: 1rem; }
/* Click-away layer under the header; tinted only behind the burger panel. */
.av-scrim { position: fixed; inset: 0; z-index: 40; }
.av-scrim--dim { background: rgba(0, 0, 0, .28); }

/* ---------- buttons ---------- */
.av-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 34px; border-radius: var(--av-pill);
  font-family: inherit; font-size: 16px; line-height: 1; letter-spacing: -0.02em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease;
}
.av-btn:hover:not(:disabled) { transform: translateY(-1px); }
.av-btn:disabled { opacity: .45; cursor: default; transform: none; }
.av-btn:focus-visible { outline: 2px solid var(--av-black); outline-offset: 3px; }
.av-btn--black { background: var(--av-black); color: #fff; border-color: var(--av-black); }
.av-btn--outline { background: transparent; color: var(--av-black); border-color: var(--av-black); }
.av-btn--ghost { background: transparent; color: var(--av-gray-2); border-color: var(--av-line); }
.av-btn--ghost:hover:not(:disabled) { color: var(--av-black); border-color: var(--av-black); }
.av-btn--sm { height: 38px; padding: 0 22px; font-size: 14px; }
/* Figma: the form's actions are 56px, radius 12, 17–18px. */
.av-btn--block {
  width: 100%; height: var(--av-field-h); padding: 0 20px; border-radius: var(--av-r-field);
  font-size: clamp(1rem, .9rem + .3vw, 1.125rem);
}
.av-btn--rec { background: #e5322d; color: #fff; border-color: #e5322d; }

/* ---------- stepper (Figma) ----------
   34px discs: done = black with a check, current = black with its number, upcoming = grey
   ring; 13px labels; a chevron 16px after a label and 24px before the next disc. */
.av-steps { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.av-steps__item { display: flex; align-items: center; color: var(--av-gray-3); }
.av-steps__num {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8125rem; border: 1px solid var(--av-gray-3); color: var(--av-gray-3);
}
.av-steps__item.is-done .av-steps__num, .av-steps__item.is-active .av-steps__num {
  background: var(--av-black); border-color: var(--av-black); color: var(--av-white);
}
.av-steps__item.is-done, .av-steps__item.is-active { color: var(--av-black); }
.av-steps__label { margin-left: 8px; font-size: .8125rem; white-space: nowrap; }
.av-steps__chev { margin: 0 24px 0 16px; color: var(--av-black); flex: 0 0 auto; }

/* ---------- cards & sections ---------- */
.av-card {
  background: var(--av-white); border-top: 2px solid var(--av-black); border-radius: var(--av-r-card);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .04);
  padding: var(--av-card-pad);
}
.av-title { font-size: clamp(1.375rem, .95rem + .9vw, 1.75rem); line-height: 1.2; }
.av-sub { margin-top: 10px; color: var(--av-gray); font-size: clamp(.9375rem, .85rem + .2vw, 1rem); line-height: 1.4; }
.av-hr { border: 0; border-top: 1px solid var(--av-gray-light); margin: 20px 0; }

/* One 20px vertical rhythm through the whole form, as measured on both Figma frames. */
.av-stack > * + *, .av-sec > * + * { margin-top: 20px; }
.av-sec > .av-sub { margin-top: 10px; }
.av-sec > .av-hr { margin-bottom: 0; }

/* Two equal columns, 20px between rows and 12px between columns (TZ: symmetric form). */
.av-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; align-items: start; }
.av-grid__c1 { grid-column: 1; }
.av-grid__c2 { grid-column: 2; }
/* Step 1: the question ~40%, the answer ~60% (Figma 212 / 324 of 548). */
.av-grid--captcha { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

/* ---------- fields: ONE style for every field in the flow ----------
   56px, 1px #cecece, radius 12; a 12px grey label 16px in / 10px down; a 16px value whose
   line sits 37px down — the same for inputs, selects and the read-only (div/button) fields,
   so paired fields share both baselines. */
.av-field { display: block; position: relative; }
.av-lbl {
  position: absolute; left: 16px; top: 10px; z-index: 1; max-width: calc(100% - 32px);
  font-size: .75rem; line-height: 1.2; color: var(--av-gray); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.av-input {
  display: block; width: 100%; height: var(--av-field-h); margin: 0;
  border: 1px solid var(--av-gray-light); border-radius: var(--av-r-field);
  background: var(--av-white); color: var(--av-black);
  font-family: inherit; font-size: 1rem; letter-spacing: .02em; text-align: left;
  padding: 24px 16px 6px; outline: none; transition: border-color .15s ease;
}
.av-input::placeholder { color: var(--av-placeholder); opacity: 1; }
.av-input:focus, .av-input:focus-visible { border-color: var(--av-black); }
.av-input:disabled { background: var(--av-card); color: var(--av-gray-2); }
.av-input--static { display: flex; align-items: center; overflow: hidden; }
.av-input--icon { padding-right: 48px; }
.av-input--icon2 { padding-right: 84px; }
.av-input--action { padding-right: 160px; }
.av-value { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-field__icon { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
.av-field__icon--card { right: 18px; color: var(--av-gray-2); }
.av-field__icon--lock { right: 20px; color: #b8b8b8; }
.av-field__icon--chev { right: 56px; color: var(--av-black); transition: transform .2s ease; }
.av-field__icon--chev.is-open { transform: translateY(-50%) rotate(180deg); }

/* The read-only "product details" line is a button: it unfolds the risks. */
.av-disclosure { cursor: pointer; }
.av-disclosure:hover { border-color: #a9a9a9; }

/* "↻ Другой пример" inside the answer field's right end, on the value line (25–49px) so it
   reads level with the typed answer and with the question beside it. */
.av-field__action {
  position: absolute; top: 25px; right: 16px; height: 24px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--av-gray); font-size: .875rem; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
}
.av-field__action:hover:not(:disabled) { color: var(--av-black); }
.av-field__action:disabled { opacity: .5; cursor: default; }
/* A narrow answer field (the step-1 column between ~1024 and 1300px, phones) keeps only the
   button's icon, so the placeholder is never cut; the words stay for screen readers. */
.av-field--action { container-type: inline-size; }
@container (max-width: 320px) {
  .av-input--action { padding-right: 52px; }
  .av-field__action span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.av-field__action:focus-visible { outline: 2px solid var(--av-black); outline-offset: 2px; border-radius: 6px; }

/* "+998" in grey before the national number (Figma "Контактные данные"). */
.av-prefix {
  position: absolute; left: 16px; top: 25px; height: 24px; line-height: 24px; z-index: 1;
  font-size: 1rem; letter-spacing: .02em; color: var(--av-placeholder); pointer-events: none;
}
.av-field--prefix .av-input { padding-left: 60px; }

/* Figma's error state: border, label and value all red. */
.av-field.is-error .av-input, .av-field.is-error .av-lbl, .av-field.is-error .av-prefix { color: var(--av-err); }
.av-field.is-error .av-input { border-color: var(--av-err); }

/* A <select> shaped exactly like .av-input. Must come after .av-input: that rule's
   `background` shorthand would otherwise wipe the chevron. The native arrow is dropped
   because it lands on top of the floating label. */
.av-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23010101' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}
/* Nothing picked yet: read as placeholder text rather than as an answer. */
.av-select.is-empty { color: var(--av-placeholder); }
.av-select:disabled { cursor: default; opacity: .7; }
.av-select option { color: var(--av-black); }

.av-err { margin-top: 6px; font-size: .75rem; color: var(--av-err); line-height: 1.4; }
.av-hint { margin-top: 6px; font-size: .75rem; color: var(--av-gray); line-height: 1.4; }
.av-ok { color: var(--av-ok); }

/* The registry's verdict under the personal fields (Figma: ⚠ + 12px red line). */
.av-sec > .av-status-line { margin-top: 20px; }
.av-status-line { display: flex; align-items: flex-start; gap: 6px; font-size: .75rem; line-height: 1.4; }
.av-status-line svg { flex: 0 0 auto; margin-top: 1px; }

/* ---------- checkboxes: consent (step 1) and declaration (step 2) ---------- */
.av-check, .av-decl {
  display: flex; align-items: center; gap: 12px;
  font-size: .8125rem; line-height: 1.45; color: var(--av-gray);
}
.av-check { cursor: pointer; }
.av-check input, .av-decl input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0; cursor: pointer;
  width: 18px; height: 18px; border: 1.5px solid #8a8a8a; border-radius: 4px; background: var(--av-white);
}
.av-check input:checked, .av-decl input:checked {
  background: var(--av-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4 6.6 11.5 12.5 4.8' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--av-black);
}
.av-check input:focus-visible, .av-decl input:focus-visible { outline: 2px solid var(--av-black); outline-offset: 2px; }
.av-check a { color: var(--av-black); text-decoration: underline; text-underline-offset: 2px; }

/* Declaration (Figma): one line ending in an ellipsis and an underlined "..." that unfolds it. */
.av-decl__text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.av-decl__more {
  flex: 0 0 auto; padding: 0 2px; border: 0; background: none; cursor: pointer;
  color: var(--av-black); font-size: inherit; line-height: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.av-decl__more:focus-visible { outline: 2px solid var(--av-black); outline-offset: 2px; border-radius: 4px; }
.av-decl.is-open { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
.av-decl.is-open input { margin-top: 1px; }
.av-decl.is-open .av-decl__text { flex: 1 1 calc(100% - 30px); white-space: normal; }
.av-decl.is-open .av-decl__more { margin-left: 30px; }

.av-alert { border-radius: var(--av-r-field); padding: 13px 16px; font-size: 14px; line-height: 1.5; }
.av-alert--err { background: #fdecec; color: #a72020; }
.av-alert--info { background: var(--av-card); color: var(--av-gray-2); }
/* Above the form, when it is open to answer a correction request: the reason, and under it the
   insurer's own sentence when there is one. */
.av-alert--lead { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.av-alert__detail { font-size: .8125rem; opacity: .85; }
/* The note under the personal fields in a correction (masked placeholders keep their value). */
.av-sec > .av-hint--block { margin-top: 14px; max-width: 760px; }

/* ---------- step 1: art + form, mirroring the landing's Join page ---------- */
.av-join { display: grid; grid-template-columns: minmax(0, 45.5%) minmax(0, 1fr); min-height: calc(100vh - var(--av-nav-h)); }
/* The landing's Join art (the Figma original): the card in the middle of the panel, the plinth
   running off the bottom — the same crop as .join__art on the landing. */
.av-join__art { position: relative; overflow: hidden; background: #eceef6; }
.av-join__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
/* Figma: the stepper 53px under the nav, the 636px card 110px under the stepper, centred in
   the right column. The stepper lines up with the card's content, 44px in. */
.av-join__panel {
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(24px, 3.7vw, 53px) clamp(16px, 5vw, 73px) clamp(40px, 5.6vw, 80px);
}
.av-join__col { width: min(100%, 636px); }
.av-join__col > .av-steps { padding-left: var(--av-card-pad); }
.av-card--join { margin-top: clamp(28px, 7.6vw, 110px); }
/* Figma "Activation 1" (2026-10-31): no rule under the title any more — a 12px grey note, then
   the fields, consent and button, all 17px apart. */
.av .av-note { margin-top: 17px; color: var(--av-gray); font-size: .75rem; line-height: 1.17; }
.av-note strong { font-weight: 600; }
.av-stack--join { margin-top: 17px; }
.av-stack--join > * + * { margin-top: 17px; }

/* ---------- steps 2 & 3: page shell ---------- */
.av-page { padding: clamp(24px, 3.7vw, 53px) var(--av-page-x) clamp(48px, 5.6vw, 80px); }
.av-wrap { max-width: 1200px; margin: 0 auto; }
.av-container { max-width: var(--av-maxw); margin: 0 auto; }
.av-h1 { font-size: clamp(28px, 2.6vw, 44px); margin-top: 18px; }
.av-lead { color: var(--av-gray); font-size: 16px; line-height: 1.45; margin-top: 10px; max-width: 62ch; }

/* Step 2 (Figma): the stepper, then one 1200px card 45px below it; 80px under the buttons. */
.av-card--form { margin-top: clamp(24px, 3.1vw, 45px); padding-bottom: clamp(28px, 5.6vw, 80px); }
.av-card--form > .av-hr { margin: 20px 0; }

/* The unfolded "product details": the tier's risks, then the landing's plan rows. */
.av-sec > .av-details { margin-top: 12px; }
.av-details { background: var(--av-card); border-radius: var(--av-r-field); padding: 16px 20px 18px; }
.av-details__k { font-size: .75rem; color: var(--av-gray); }
.av-details__k--gap { margin-top: 18px; }
.av .av-details__list { margin-top: 8px; padding-left: 20px; list-style: disc; font-size: .9375rem; line-height: 1.55; }
.av-details__fine { margin-top: 12px; }

/* benefits — the landing's "Plans at glance" rows for this tier */
.av .av-bens { margin-top: 8px; border-top: 1px solid rgba(0, 0, 0, .07); }
.av-ben {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: .9375rem; line-height: 1.4;
}
.av-ben__mark { font-size: 15px; color: var(--av-ok); }
.av-ben--no { color: var(--av-gray-3); }
.av-ben--no .av-ben__mark { color: #b5b5b5; }
.av-ben__note { display: block; font-size: 12px; color: var(--av-gray-3); margin-top: 3px; }
.av-ben__val { font-size: 14px; text-align: right; color: var(--av-gray-2); }
.av-ben--no .av-ben__val { color: #b5b5b5; }

/* file picker (only the hidden IMEI-photo helper still uses it) */
.av-file { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  padding: 0 24px; border-radius: var(--av-pill); border: 1px solid var(--av-black); cursor: pointer; font-size: 15px; }
.av-progress { height: 6px; border-radius: 99px; background: #e6e6e6; overflow: hidden; margin-top: 16px; }
.av-progress > span { display: block; height: 100%; background: var(--av-black); transition: width .18s linear; }

/* A <button> that reads as the inline underlined link it replaces. */
.av-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--av-black);
  text-decoration: underline; text-underline-offset: 2px;
}
.av-linkbtn:focus-visible { outline: 2px solid var(--av-black); outline-offset: 2px; border-radius: 4px; }

/* ---------- device video: recorded with the camera, no file picker ---------- */
/* Figma: "Видео устройства * · Инструкция", 12px. */
.av-capture-head { display: flex; align-items: baseline; gap: 8px; font-size: .75rem; }
.av-capture-head__label { color: var(--av-gray); }
.av-guide {
  background: var(--av-card); border-radius: var(--av-r-field);
  padding: 16px 20px 18px; font-size: .875rem; line-height: 1.55; color: var(--av-gray-2);
}
.av-guide__title { font-weight: 600; color: var(--av-black); }
.av .av-guide ol { list-style: decimal; padding-left: 20px; margin-top: 8px; }
.av-guide li + li { margin-top: 6px; }

/* The Figma drop-zone: 166px, dashed #cecece, radius 12. */
.av-capture {
  border: 1.5px dashed var(--av-gray-light); border-radius: var(--av-r-field);
  background: var(--av-white); overflow: hidden;
}
.av-capture.is-ready { border-color: var(--av-ok); border-style: solid; background: rgba(29, 138, 83, .04); }
.av-capture__start {
  width: 100%; min-height: 166px; padding: 28px 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: none; border: 0; font-family: inherit; color: var(--av-black); cursor: pointer;
}
.av-capture__start:hover:not(:disabled) { background: #fafafa; }
.av-capture__start:disabled { cursor: default; opacity: .5; }
.av-capture__start:focus-visible { outline: 2px solid var(--av-black); outline-offset: -4px; border-radius: 10px; }
.av-capture__title { font-size: 1rem; letter-spacing: -0.02em; }
.av-capture__hint { font-size: .6875rem; color: var(--av-gray-3); line-height: 1.4; }

.av-capture__screen { position: relative; background: #0b0b0e; }
.av-capture__video {
  display: block; width: 100%; max-height: min(62vh, 560px); object-fit: contain; background: #0b0b0e;
}
.av-capture__overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.av-capture__rec {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff;
  font-family: var(--av-mono); font-size: 13px;
}
.av-capture__dot {
  width: 10px; height: 10px; border-radius: 50%; background: #e5322d; flex: 0 0 auto;
  animation: av-blink 1s steps(2, start) infinite;
}
.av-capture__dot--still { background: #fff; animation: none; }
@keyframes av-blink { to { visibility: hidden; } }

.av-capture__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-top: 1px solid var(--av-line);
}
.av-capture__bar > .av-fine:first-child { margin-right: auto; }
.av-capture__bar--col { flex-direction: column; align-items: stretch; }
.av-capture__bar--col > .av-fine:first-child { margin-right: 0; }
.av-capture__done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 22px; }
.av-capture__check {
  width: 38px; height: 38px; border-radius: 50%; background: var(--av-ok);
  display: grid; place-items: center; flex: 0 0 auto;
}
.av-capture__err { padding: 0 16px 14px; margin-top: 0; }
.av-capture__start + .av-capture__err { padding-top: 0; }

/* A plain button row (the legal pages' single back link). */
.av-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
/* Step 2: back (outline, #cecece) and submit (black), half and half (Figma). */
.av-actions--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.av-actions--split .av-btn--outline { border-color: var(--av-gray-light); }
.av-actions--split .av-btn--outline:hover:not(:disabled) { border-color: var(--av-black); }

/* ---------- step 3: the Figma status card ----------
   558px, centred; a 96px ring (2px black, light grey fill) holding the mark; 24px title;
   grey 14/18 lines; one black 56px action. */
.av-result {
  max-width: 558px; margin: clamp(32px, 7vw, 100px) auto 0; text-align: center;
  padding: 42px clamp(20px, 4vw, 56px) 44px;
}
.av-ring {
  width: 96px; height: 96px; margin: 0 auto; border-radius: 50%;
  border: 2px solid var(--av-black); background: #f7f7f7; color: var(--av-black);
  display: grid; place-items: center;
}
.av-result__title { margin-top: 28px; font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.25; }
.av-result__body { margin-top: 20px; color: var(--av-gray-3); font-size: .875rem; line-height: 18px; }
.av-result__body + .av-result__body { margin-top: 10px; }
.av-result__body strong { color: var(--av-gray-2); font-weight: 600; }
.av-result__action { margin-top: 28px; }
.av-result .av-err { margin-top: 10px; }
.av-policy { margin-top: 20px; background: var(--av-card); border-radius: var(--av-r-field); padding: 14px 18px; }
.av-policy__k { font-size: .75rem; color: var(--av-gray); }
.av-policy__v { margin: 4px 0 6px; font-size: 1.125rem; font-weight: 600; letter-spacing: .04em; overflow-wrap: anywhere; }
.av .av-result__home { display: inline-block; margin-top: 24px; font-size: .875rem; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- step 3: sending → checking → issued (the client's mock-up, 2026-11-14) ----------
   These three states of the status card are drawn after the mock-up rather than the Figma
   ring: a grey tag, an animated picture (Components/ActivationArt.razor), a bold title. Each
   state fades in, so the change from one to the next reads as a step and not as a flicker. */
.av-stage { animation: av-stage-in .4s ease both; }
@keyframes av-stage-in { from { opacity: 0; transform: translateY(6px); } }
.av-stage__tag {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 14px; border-radius: 999px; border: 1px solid #e5e7eb; background: #f3f4f6;
  color: #374151; font-size: .8125rem; font-weight: 500; line-height: 1.3; text-align: left;
}
.av-stage__dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
.av-stage__dot--ink { background: #111111; }
.av-stage__dot--live { animation: av-stage-live 1s ease-in-out infinite alternate; }
@keyframes av-stage-live { from { opacity: .35; } }
.av-stage .av-result__title { margin-top: 18px; font-size: clamp(1.375rem, 1.1rem + .7vw, 1.625rem); font-weight: 700; }
/* Two classes each: `.av p { margin: 0 }` and `.av a { color: inherit }` outrank a single one. */
.av .av-stage__lead { max-width: 23em; margin: 10px auto 0; color: var(--av-gray); font-size: 1rem; line-height: 1.5; }
.av-stage .av-result__body { margin-top: 18px; color: var(--av-gray); }
.av-stage .av-result__body strong { color: var(--av-black); font-weight: 700; }
.av-stage .av-policy { border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px 20px 18px; }
.av-stage .av-policy__k { font-size: .8125rem; }
.av-stage .av-policy__v { margin: 6px 0 8px; font-size: clamp(1.125rem, 5.2vw, 1.5rem); font-weight: 800; letter-spacing: .01em; line-height: 1.2; }

/* "The PDF is being made", then the download in its place. The download is a link, not a
   button with a handler: the tap opens the document itself (see LoadDocumentLinkAsync). */
.av-doc-wait {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 18px;
  padding: 9px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb;
  color: #374151; font-size: .8125rem; font-weight: 500; line-height: 1.3;
}
.av-dots { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.av-dots i { width: 7px; height: 7px; border-radius: 50%; background: #111111; animation: av-dots 1.2s ease-in-out infinite both; }
.av-dots i:nth-child(2) { animation-delay: .2s; }
.av-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes av-dots { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.av .av-result__dl {
  max-width: 100%; height: auto; min-height: 46px; margin-top: 20px; padding: 10px 26px;
  color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.25; white-space: normal;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18); animation: av-stage-in .4s ease both;
}
.av-result__dl svg { flex: 0 0 auto; color: #34d399; }

/* The pictures. Lengths in the transforms and paths below are the SVGs' own units, so they
   scale with the picture. */
.av-art { display: block; max-width: 100%; height: auto; margin: 22px auto 0; overflow: visible; }

/* sending: three packets along the three routes, two rings off the insurer */
.av-art__packet { opacity: 0; animation: av-art-travel 2s cubic-bezier(.45, 0, .55, 1) infinite; }
.av-art__packet--1 { offset-path: path("M 86 75 C 135 42, 205 42, 254 75"); }
.av-art__packet--2 { offset-path: path("M 86 75 C 135 108, 205 108, 254 75"); animation-delay: .65s; }
.av-art__packet--3 { offset-path: path("M 86 75 L 254 75"); animation-delay: 1.3s; }
@keyframes av-art-travel {
  0% { offset-distance: 0%; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* No motion path (Safari before 16): the packets would pile up in the corner — leave them out. */
@supports not (offset-path: path("M 0 0 L 1 1")) { .av-art__packet { display: none; } }
.av-art__ripple { transform-origin: 282px 75px; animation: av-art-ripple 2.2s ease-out infinite backwards; }
.av-art__ripple--2 { animation-delay: 1.1s; }
@keyframes av-art-ripple { from { transform: scale(.85); opacity: .55; } to { transform: scale(1.65); opacity: 0; } }

/* checking: two dashed orbits, a scan line (and its glow) sweeping the sheet */
.av-art__orbit { transform-origin: 110px 80px; animation: av-art-turn 9s linear infinite; }
.av-art__orbit--back { animation-duration: 13s; animation-direction: reverse; }
@keyframes av-art-turn { to { transform: rotate(360deg); } }
.av-art__laser { animation: av-art-scan 2.2s ease-in-out infinite alternate; }
@keyframes av-art-scan { from { transform: translateY(0); } to { transform: translateY(58px); } }

/* issued: the tick draws itself once, a ring bursts off it, the sparks twinkle */
.av-art__tick { stroke-dasharray: 42; stroke-dashoffset: 42; animation: av-art-draw .65s ease-out .2s forwards; }
@keyframes av-art-draw { to { stroke-dashoffset: 0; } }
.av-art__burst { transform-origin: 130px 68px; animation: av-art-burst 1.4s ease-out .2s forwards; }
@keyframes av-art-burst { from { transform: scale(.75); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }
.av-art__spark { transform-box: fill-box; transform-origin: center; animation: av-art-twinkle 2.6s ease-in-out infinite; }
.av-art__spark--2 { animation-delay: .7s; }
.av-art__spark--3 { animation-delay: 1.3s; }
.av-art__spark--4 { animation-delay: 1.9s; }
@keyframes av-art-twinkle { 50% { transform: scale(.6); opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .av-stage, .av .av-result__dl, .av-stage__dot--live, .av-dots i,
  .av-art__ripple, .av-art__orbit, .av-art__laser, .av-art__burst, .av-art__spark { animation: none; }
  .av-art__packet, .av-art__burst { display: none; }
  .av-art__tick { animation: none; stroke-dashoffset: 0; }
}

.av-spin {
  width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: currentColor;
  border-radius: 50%; animation: av-spin .7s linear infinite; display: inline-block; vertical-align: middle;
}
.av-spin--dark { border-color: rgba(0, 0, 0, .18); border-top-color: var(--av-black); }
.av-spin--lg { width: 30px; height: 30px; border-width: 2.5px; }
@keyframes av-spin { to { transform: rotate(360deg); } }

/* ---------- responsive ----------
   The flow is entered on a phone (the customer scans the card), so this is the primary
   form factor, not a fallback. */
@media (min-width: 1024px) {
  /* A panel left open while the window widens must not linger over the desktop nav. */
  .av-navpanel, .av-scrim--dim { display: none; }
}
@media (max-width: 1023px) {
  .av-nav__links, .av-nav__cta { display: none; }
  .av-nav__burger { display: inline-flex; }
  .av-langmenu { margin-left: 0; }

  .av-join { grid-template-columns: 1fr; min-height: 0; }
  .av-join__art { height: 42vw; min-height: 210px; }
  .av-join__panel { padding-top: 28px; }
  .av-join__col { width: min(100%, 636px); }
  .av-card--join { margin-top: 24px; }
}
@media (max-width: 767px) {
  .av-grid, .av-grid--captcha { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .av-grid__c1, .av-grid__c2 { grid-column: auto; }
  .av-actions--split { grid-template-columns: minmax(0, 1fr); }
  .av-actions--split > :last-child { order: -1; }   /* submit first, back under it */
  .av-actions:not(.av-actions--split) { flex-direction: column-reverse; align-items: stretch; }
  .av-actions:not(.av-actions--split) .av-btn { width: 100%; }
  .av-ben { grid-template-columns: 22px 1fr; }
  .av-ben__val { grid-column: 2; text-align: left; }
  .av-capture__bar .av-btn { flex: 1 1 auto; }
}
@media (max-width: 599px) {
  .av { --av-nav-h: 64px; }
  /* Full-bleed: on a phone the form is the page, not a card floating on it. */
  .av-card--join, .av-card--form { box-shadow: none; border-top: 0; border-radius: 0; padding: 0; }
  .av-card--join { margin-top: 22px; }
  .av-card--form { margin-top: 24px; }
  .av-join__col > .av-steps { padding-left: 0; }
  .av-result { padding: 32px 20px 30px; }
  .av .av-result__dl { padding: 10px 18px; font-size: .875rem; }

  /* Three labelled steps do not fit; the discs plus the current step's label do. */
  .av-steps__label { display: none; }
  .av-steps__item.is-active .av-steps__label { display: inline; }
  .av-steps__chev { margin: 0 12px; }
}
@media (max-width: 479px) {
  /* The "new question" button keeps its icon; its words stay for screen readers only. */
  .av-input--action { padding-right: 52px; }
  .av-field__action span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .av-nav__right { gap: 8px; }
}

/* ---------- legal documents (/legal/{slug}) ----------
   Long-form reading, so a narrower measure and looser leading than the rest of the flow. */
.av-legal { max-width: 860px; }
.av-legal__body { margin-top: 28px; font-size: 15px; line-height: 1.65; color: #1c1c1c; }
.av-legal__body h2 {
  font-size: clamp(19px, 1.35vw, 24px); line-height: 1.25; margin: 40px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--av-line);
}
.av-legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.av-legal__body h3 { font-size: clamp(16px, 1.05vw, 18px); margin: 26px 0 8px; }
.av-legal__body p { margin: 0 0 12px; }
.av-legal__body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
/* The source documents number some clauses (e.g. the privacy policy's rights list);
   those are cited by ordinal, so they must render as numbers, not bullets. */
.av-legal__body ol { margin: 0 0 16px; padding-left: 22px; list-style: decimal; }
.av-legal__body li { margin: 0 0 8px; }
.av-legal__body a { color: var(--av-link); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.av-legal__body strong { font-weight: 600; }
.av-legal__body .legal__tablewrap { overflow-x: auto; margin: 0 0 20px; }
.av-legal__body .legal__table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13.5px; }
.av-legal__body .legal__table th, .av-legal__body .legal__table td {
  border: 1px solid var(--av-line); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.45;
}
.av-legal__body .legal__table th { background: var(--av-card); font-weight: 600; }