/* ==========================================================================
   Forms - field, label, placeholder, option grid, consent, submit.

   Note on states: focus, error, disabled, success and required do NOT exist
   in any of the twelve Figma frames. Everything below marked (invented) is
   new work built on the system's own vocabulary, not a measured value, and
   is recorded as such in DESIGN.md.
   ========================================================================== */

.c-field{ display:block; }

/* The option grid uses a real <fieldset> so the group has an accessible name.
   Browsers draw it with a border and notch the legend into it; no frame has
   that, so it is reset here and the legend renders as an ordinary label. */
fieldset.c-field{
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
fieldset.c-field > .c-field__label{ padding:0; }

/* 12px, not 6: every label-to-field gap in the file measures 28px from the
   label's box top to the field's top, and a 14px label's box is 16. Three
   instances agree - the Услуги contact card and both CV cards. */
.c-field__label{
  display:block;
  margin-bottom:12px;
  font:400 var(--c-fs-label)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
}

/* The Figma file indents several labels 5px right of the field they label.
   That is hand-placement drift; labels sit flush with the field's left edge. */

.c-field__control{
  display:block;
  width:100%;
  height:var(--c-field-h);
  /* 20, not 16: every placeholder in the file starts 20px in from its field's
     left edge - the three contacts fields and the textarea on both CV cards,
     and both contact cards' fields. */
  padding:0 20px;
  background:var(--c-cream);
  color:var(--c-ink);
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  box-shadow:var(--c-sh-field);
}

/* The search panel's controls are 50 tall; every form card's are 40. */
.c-field--tall .c-field__control{ height:var(--c-field-h-tall); }

textarea.c-field__control{
  height:auto;
  min-height:96px;
  padding:14px 20px;
  line-height:var(--c-lh-body);
  resize:vertical;
}

.c-field__control::placeholder{
  font:italic 400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-muted);
}

/* (invented) - required, error and success states */
.c-field__req{ color:var(--c-green); }

.c-field--error .c-field__control{ border-color:var(--c-error); }
.c-field__error{
  display:block;
  margin-top:4px;
  font:400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-error);
}

.c-field--ok .c-field__control{ border-color:var(--c-green); }

.c-field__control[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* --- checkbox: square, gold stroke, unfilled until checked -------------- */

.c-check{
  display:flex;
  align-items:flex-start;
  gap:3px;
  /* the consent line's box is 14 in all three frames that draw it, which is
     12 x 1.172 - the same sans line height every other caption uses */
  font:700 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
  cursor:pointer;
}

/* 13px with a 3px gap to its label - the three consent rows in the file (the
   Услуги contact card and both CV cards) all draw a 13x12 box with its text
   starting 16px from the row's left edge. The whole <label> is the hit area,
   so the small box does not shrink the target. */
.c-check__box{
  flex:0 0 auto;
  width:13px; height:13px;
  /* the UA gives an <input> a 3px vertical margin; left in, it makes the
     consent row 17 tall against the frame's 14 and pushes the submit down */
  margin:1px 0 0;
  background:var(--c-white);
  border:1px solid var(--c-gold);
  border-radius:0;            /* square, as every frame draws it */
  appearance:none;
  cursor:pointer;
  transition:background var(--c-ease);
}

.c-check__box:checked{
  background:var(--c-green);
  border-color:var(--c-green);
}

/* --- option grid: "От къде научихте за нас?" ---------------------------- */
/* Gold fill here is the system's only sanctioned "chosen" signal. Each
   option is a real radio so the choice is exposed to assistive tech; the
   Figma frames draw them as unlabelled buttons, which is not accessible. */

.c-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.c-options__opt{ position:relative; }

.c-options__input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.c-options__label{
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 20px;
  background:var(--c-cream);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
  cursor:pointer;
  transition:background var(--c-ease);
}

.c-options__opt:hover .c-options__label{ background:var(--c-cream-warm); }
.c-options__input:checked + .c-options__label{ background:var(--c-gold); }
.c-options__input:focus-visible + .c-options__label{
  outline:2px solid var(--c-green);
  outline-offset:2px;
}

/* --- form card: warm cream, gold stroke on a ::before ------------------- */
/* A real border insets the padding box that absolutely-positioned children
   resolve against. Four components already depend on this being a pseudo. */

.c-form{
  position:relative;
  /* Sides 45, not 40: the CTA card is 462 wide and its field row is 372, which
     is 462 - 2x45. The heading at 32 and the promise line at 50 in the frame
     are hand-placement drift and are normalised onto this.

     Top 40 and bottom 57 are the contact card's own, and the Услуги and
     Контакти frames draw that card identically to the pixel - 462x586 with its
     lead at +40 and 57 clear under the submit. Every margin below is from the
     same two readings. .c-form--wide overrides all four. */
  padding:40px 45px 57px;
  background:var(--c-cream-warm);
  border-radius:var(--c-r-surface);
  box-shadow:var(--c-sh-form);
}

.c-form::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--c-gold);
  border-radius:inherit;
  pointer-events:none;
}

.c-form__title{
  margin:0 0 12px;
  font:800 var(--c-fs-nav)/1.3 var(--c-sans);
  color:var(--c-ink);
}

/* CENTRED, and it was left-aligned here until the landing page was diffed
   against its own reference. Both frames that draw this card agree, line for
   line: the lead's three lines ink 263 / 367 / 121 wide and the first and last
   are centred on the card's own 231 (the widest line fills the measure, so it
   cannot tell you anything either way). The promise line under it is NOT
   centred - it stays on the field column. */
.c-form__lead{
  margin:0 0 15px;
  font:400 var(--c-fs-headline)/53px var(--c-serif);
  color:var(--c-ink);
  text-align:center;
}

/* The promise line sits 12 under a title that opens the card and 28 under one
   that follows the lead. Both readings are exact on both contact cards. */
.c-form__lead + .c-form__title{ margin-bottom:28px; }

.c-form__row{
  display:flex;
  gap:12px;
  margin-bottom:17px;
}
.c-form__row > *{ flex:1 1 0; }

.c-form__group{ margin-bottom:12px; }

/* --- the CV form's source question, folded -------------------------------- */
/* «От къде научихте за нас? (по желание)» - a native <details> in
   c-cv-form.tpl (critique, 28 Sep 2026). Closed, the summary IS the field
   label - same 14px ink - with the optional marker in Muted and a chevron
   that turns; open, the chips sit 12 under it as they sat under the legend.
   No colour or size the form did not already carry. */
.c-cv-source__toggle{
  display:flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  list-style:none;
  cursor:pointer;
  font:400 var(--c-fs-label)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
}
.c-cv-source__toggle::-webkit-details-marker{ display:none; }
.c-cv-source__toggle::after{
  content:"";
  flex:0 0 auto;
  width:6px; height:6px;
  margin:-3px 0 0 4px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--c-ease);
}
.c-cv-source[open] > .c-cv-source__toggle::after{
  margin-top:3px;
  transform:rotate(-135deg);
}
.c-cv-source__toggle:hover{ color:var(--c-green); }
.c-cv-source__toggle:focus-visible{
  outline:2px solid var(--c-green);
  outline-offset:3px;
  border-radius:var(--c-r-detail);
}
.c-cv-source__opt{ color:var(--c-muted); }
.c-cv-source > .c-field{ margin-top:12px; }

/* The contact form's submit is right-aligned; the CV form's is not. Measured
   on the Services and Екип frames respectively.

   31 is the contact card's consent-to-submit gap, and it is written as a whole
   margin rather than as 12 + 19: adjacent siblings in normal flow collapse to
   the larger of the two, so the group's own 12 disappears into this. The CV
   card's gap is 11 and it overrides below. */
.c-form__actions{ display:flex; margin-top:31px; }
.c-form__actions--end{ justify-content:flex-end; }
.c-form__actions .c-btn--primary{ min-width:125px; padding:0 24px; }

/* (invented) - the states no frame draws.

   None of the five below is in any Figma frame: the file shows every form
   empty and at rest. They are built on the system's own vocabulary, the way
   the focus and error states in this file's first half were - the error red
   is --c-error and nothing else, the card fill is the card's own, and the
   busy state changes opacity rather than colour so it cannot introduce a
   sixth. DESIGN.md's rule that elevation never changes on interaction holds
   here too: nothing below touches box-shadow. */

/* The honeypot. NOT display:none - a form-filling bot skips those, which is
   the whole point of the field. It is taken out of the flow, out of the tab
   order (tabindex="-1" in the markup) and out of the accessibility tree
   (aria-hidden), so nothing a person uses can reach it. */
.c-form__hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* The form-level line: the endpoint's refusal, or "check the fields below".
   Same shape as .c-form__done and the error colour, so the two read as one
   pair rather than two inventions. */
.c-form__alert{
  margin:0 0 16px;
  padding:12px 16px;
  background:var(--c-cream);
  border:1px solid var(--c-error);
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-error);
}

/* A field's help line - the CV control's "PDF, DOC или DOCX, до 5 MB". The
   caption size and the muted ink the placeholders already use. */
.c-field__hint{
  display:block;
  margin-top:4px;
  font:400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-muted);
}

/* An error slot with nothing in it must not open a 4px gap under every field.
   The slot is always in the markup so a live region can watch it. */
.c-field__error:empty{ display:none; }

/* The consent checkbox is not a .c-field, so it needs its own error state.
   Stroke only - the box is 18px and a fill would read as checked. */
.c-check--error .c-check__box{ border-color:var(--c-error); }

/* Sending. The button is disabled from a deferred timeout, never from inside
   the submit handler (CLAUDE.md), so this is only the visible half. */
.c-form--busy{ opacity:.65; }
.c-form--busy .c-field__control,
.c-form--busy .c-cv__btn{ pointer-events:none; }

/* the success state no frame draws */
.c-form__done{
  padding:16px;
  background:var(--c-cream);
  border:1px solid var(--c-green);
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
}

/* --- CV attach: the gold half is the "chosen" half ---------------------- */

/* 372 total with a 174 gold half, measured identically on the landing, the
   Обучения and the Екип frames - the one part of the CV form all three agree
   on. Both halves centre their text. */
.c-cv{ display:flex; gap:0; width:372px; max-width:100%; }
.c-cv__btn{
  /* a <label>, so it needs to be told to centre its own text */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 174px;
  height:40px;
  padding:0 20px;
  background:var(--c-gold);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control) 0 0 var(--c-r-control);
  font:400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
  cursor:pointer;
}
.c-cv__name{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-width:0;
  height:40px;
  padding:0 12px;
  background:var(--c-white);
  border:1px solid var(--c-gold);
  border-left:none;
  border-radius:0 var(--c-r-control) var(--c-r-control) 0;
  font:italic 400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-muted);
}

/* --- the narrow CV card: 462x842, the landing frame ---------------------- */
/* The third form card in the file and the last one to be measured. It had been
   the wide card's structure at 462px until home.tpl was built, which came out
   663 tall against the frame's 842 and put all three contacts on one row.

   Rectangle 45 (1058:879), x1269 y3325, 462x842, and its stack closes on the
   842: 30 pad + 27 title + 12 + 16 label + 12 + 40 + 14 + 40 + 14 + 16 + 12 +
   40 cv + 12 + 16 + 12 + 114 textarea + 12 + 16 + 16 + (3 x 50 + 2 x 12)
   sources + 15 + 50 «Друго:» + 23 + 14 consent + 15 + 50 submit + 30 pad.

   Everything here is guarded against .c-form--wide: the two cards share only
   the field component and the 174px gold half of the CV control, which is the
   one part all three instances in the file agree on. */

.c-form--cv:not(.c-form--wide){
  /* 30 top and bottom against the contact card's 40/57. The sides stay at the
     contact card's 45: the frame opens this card's 372 column at x48 and both
     contact cards open theirs at 45, so two frames beat one and 45 is also the
     stated 462 - 2x45. */
  padding:30px 45px;
}

/* Contacts 2 + 1: name + phone at 180 + 12 + 180 = the 372 column, then e-mail
   alone at 180 on a second row. The frame draws 199 + 13 + 180 on row one and
   indents its labels 5px right of their own fields; both are hand placement
   and both are normalised onto the column. */
.c-form--cv:not(.c-form--wide) .c-form__row{
  flex-wrap:wrap;
  gap:14px 12px;
  margin-bottom:14px;
}
.c-form--cv:not(.c-form--wide) .c-form__row > *{ flex:0 0 180px; }

/* 372x114 - six lines at 16/19, against the wide card's two. */
.c-form--cv:not(.c-form--wide) textarea.c-field__control{ height:114px; }

/* Six 174x50 buttons two-up, 24 apart with a 12px row gap: Frames 10..15 at
   x1317/1515 and y3796/3858/3920. The wide card's are 88x35 six-across. */
.c-form--cv:not(.c-form--wide) .c-options{
  display:grid;
  grid-template-columns:repeat(2, 174px);
  gap:12px 24px;
}
.c-form--cv:not(.c-form--wide) .c-options__label{
  width:100%;
  height:var(--c-field-h-tall);
  justify-content:center;
}

/* Frame 16 - «Друго:» and its free-text input, 372x50, 15 under the source
   grid. The rule under the input is Estate Green: it is the one thing on this
   card that is being typed into, and the field it sits in is already stroked
   gold. */
.c-cv-other{
  display:flex;
  align-items:center;
  gap:8px;
  height:var(--c-field-h-tall);
  padding:0 20px;
  background:var(--c-cream);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  box-shadow:var(--c-sh-field);
  cursor:text;
}
.c-cv-other__label{
  flex:0 0 auto;
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
  color:var(--c-ink);
}
.c-cv-other__input{
  flex:1 1 auto;
  min-width:0;
  height:24px;
  padding:0;
  background:none;
  border:0;
  border-bottom:1px solid var(--c-green);
  color:var(--c-ink);
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
}
.c-cv-other__input:focus{ outline:none; }
.c-cv-other:focus-within{ outline:2px solid var(--c-green); outline-offset:3px; }

/* The last three gaps are the card's own: 15 from the source grid to «Друго:»,
   23 from «Друго:» to the consent line and 15 from there to the submit, where
   the rest of the card runs on 12 and the contact card's consent-to-submit gap
   is 31. Written as whole margins, because adjacent siblings in flow collapse
   to the larger of the two - so each of these simply replaces the 12 above it.
   The submit is right-aligned on the 372 column at 125x50 (Frame 17). */
.c-form--cv:not(.c-form--wide) .c-form__group--other{ margin-top:15px; }
.c-form--cv:not(.c-form--wide) .c-form__group--consent{ margin-top:23px; }
.c-form--cv:not(.c-form--wide) .c-form__actions{
  justify-content:flex-end;
  margin-top:15px;
}

/* --- the wide CV card: 607x490, the Обучения and Екип frames ------------- */
/* Two of the three CV forms in the file draw this one and they agree to the
   pixel; the landing page's 462 card is the third and the outlier. Its 30px
   padding is what makes a 607 card hold a 547 content column (607 - 2x30),
   the same relationship 45/372/462 has in the narrow card. */

.c-form--wide{ padding:20px 30px; }

/* The wide card's internal rhythm, measured from its 1618 top on the Academy
   frame and confirmed on Екип: a control's bottom to the next label's top is
   11px everywhere in it - after the contacts row, after the CV row, after the
   textarea, after the source row, after the consent line. */
/* 10px label-to-field inside the wide card, against the 12 the narrow one
   uses: three of its four rows measure a 26px label-top-to-field-top and only
   the first measures 28. The narrow card's rows measure 28 three times out of
   four, so the two cards genuinely differ by 2 and the default stays at 12. */
.c-form--wide .c-form__title{ margin-bottom:10px; }
.c-form--wide .c-field__label{ margin-bottom:10px; }
.c-form--wide .c-form__row,
.c-form--wide .c-form__group{ margin-bottom:11px; }
.c-form--wide .c-form__actions{ margin-top:11px; }

/* Name / phone / e-mail on one row. The frame draws them 198 + 134 + 199 with
   8px gaps; name and e-mail are the same kind of field and their 1px
   difference is drift, so both are carried at 199. */
.c-form--wide .c-form__row{ gap:8px; }
.c-form--wide .c-form__row > *{ flex:1 1 0; }
.c-form--wide .c-form__row > :nth-child(1){ flex-grow:199; }
.c-form--wide .c-form__row > :nth-child(2){ flex-grow:134; }
.c-form--wide .c-form__row > :nth-child(3){ flex-grow:199; }

/* 547x71 - two lines, against the narrow card's 372x114 six. */
.c-form--wide textarea.c-field__control{ min-height:71px; padding:13px 20px; }

/* All six sources on one row at 88x35, against the narrow card's 174x50 two-up.
   The labels are the 12px caption here, not the 16px body. */
.c-form--wide .c-options{ gap:4px; flex-wrap:nowrap; }
.c-form--wide .c-options__opt{ flex:1 1 0; }
.c-form--wide .c-options__label{
  width:100%;
  justify-content:center;
  height:35px;
  padding:0 4px;
  font-size:var(--c-fs-caption);
}

/* ==========================================================================
   THE SEARCH PANEL'S CONTROLS

   The file has two field components, not one. A form card's field is 40 tall
   with a 14px label and a 12px italic placeholder; the search panel's is 50
   tall with a 16px label and a 16px upright placeholder. Both are measured:
   twelve strings across the Search frame's panel - every label, every
   placeholder, both checkbox families - solve to 16px Roboto Regular by
   advance width, against a canvas ink box calibrated on the nav, whose 20/500
   is already known ("Наеми" 59 against 60.6, "Продажби" 95 against 95.4).

   The panel's own vertical rhythm is a single 12: a label's box bottom sits 12
   above its control, and a control's bottom sits 12 above the next label. That
   holds on all six of its rows (153/183, 245/276, 338/369, 431/463, 497/528,
   590/622) with the 19px line box of 16px type in between.
   ========================================================================== */

.c-field--tall > .c-field__label{
  font-size:var(--c-fs-body);
  line-height:var(--c-lh-body);
}

.c-field--tall .c-field__control::placeholder{
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-muted);
}

/* --- select: the caret is on the LEFT ----------------------------------- */
/* All three selects on the Search frame put a 24x24 caret at x16, vertically
   centred, and open the value at x40 - flush against the caret. Drawn as a
   background image so the control stays a native <select>: a scripted listbox
   would cost the keyboard behaviour the design never asked us to rebuild. */

.c-select{
  appearance:none;
  /* 39 + the 1px border = the 40 the frame opens the value at, and the caret's
     background is measured from the border box for the same reason. */
  padding-left:39px;
  background-origin:border-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%231c1c1c'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:16px center;
  cursor:pointer;
}

/* --- range: two inputs in one field box --------------------------------- */
/* Frame 42 (Цена, 221x50) and Frame 43 (Квадратура, 202x50). One box, one
   hairline down the middle, each half carrying its unit right-aligned. */

.c-range{ min-width:0; }

.c-range__box{
  display:flex;
  align-items:stretch;
  height:var(--c-field-h);
  background:var(--c-cream);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  box-shadow:var(--c-sh-field);
  overflow:hidden;
}
.c-field--tall .c-range__box{ height:var(--c-field-h-tall); }

.c-range__half{
  display:flex;
  align-items:center;
  flex:1 1 0;
  min-width:0;
  /* 15 + the box's 1px border = 16, which is where the panel puts its first
     glyph: the price field's «О» inks at x1125 against a field edge of 1108,
     and all three selects place their caret at the same 16. The form cards'
     20 is the other field component's number, not this one's. (Квадратура's
     text node sits at 9 and is the outlier the majority overrides.) */
  padding:0 15px;
  gap:8px;
}

.c-range__input{
  flex:1 1 0;
  min-width:0;
  height:100%;
  padding:0;
  background:none;
  border:0;
  color:var(--c-ink);
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
}
.c-range__input:focus{ outline:none; }
.c-range__input::placeholder{
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-muted);
}
/* the focus ring belongs to the box, not to half of it */
.c-range__box:focus-within{
  outline:2px solid var(--c-green);
  outline-offset:3px;
}

.c-range__unit{
  flex:0 0 auto;
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-muted);
}

.c-range__rule{
  flex:0 0 auto;
  width:1px;
  align-self:center;
  height:19px;
  background:var(--c-muted);
}

/* --- filter checkbox: a 22px square, a 16px label ----------------------- */
/* Twenty-two instances on the Search frame, all 24x22 in the node tree with
   their label 30px from the box's left - a 22px square, 2px of stroke bleed
   in the export, and 6px clear to the text. Distinct from `.c-check`, the
   consent line's 13px box with its 12/700 caption. */

.c-checkbox{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.c-checkbox__box{
  flex:0 0 auto;
  width:22px; height:22px;
  margin:0;
  background:var(--c-cream);
  border:1px solid var(--c-gold);
  border-radius:0;            /* square, as every frame draws it */
  appearance:none;
  cursor:pointer;
  transition:background var(--c-ease);
}
.c-checkbox__box:checked{
  background:var(--c-green);
  border-color:var(--c-green);
  /* the tick is invented - no frame in the file draws a checked box */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M5 11.5l4 4 8-8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}

.c-checkbox__label{
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
  color:var(--c-ink);
}

/* ==========================================================================
   Below 1024 - the three form cards are fixed page widths (462, 462, 607)
   and have to stop being wider than the column they sit in.
   ========================================================================== */

@media (max-width: 1119px){
  .c-form{ width:100%; max-width:462px; margin-inline:auto; }
  .c-form--wide{ max-width:607px; }
  .c-cv{ width:100%; }
  .c-form--cv:not(.c-form--wide) .c-form__row > *{ flex:1 1 160px; }
  .c-form--cv:not(.c-form--wide) .c-options{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap:12px;
  }
  .c-form--wide .c-options{ flex-wrap:wrap; }
  .c-form--wide .c-form__row{ flex-wrap:wrap; }
}

/* ==========================================================================
   393 - measured on the landing frame's contact card and the Екип frame's
   CV card, which are the two the mobile frames draw.
   ========================================================================== */

@media (max-width: 639px){

  /* 324 wide with a 264 field column, on both cards: the Екип CV card is
     x35..359 with its fields at x65..329, which is a symmetric 30, and the
     landing contact card is x38..362 with its field at x74..335, which is
     36/27 and is the hand-drawn one. So 30 wins and 324 - 2x30 = 264 is the
     measure - the same relationship the desktop card states as 462 - 2x45.

     Vertically: the landing card runs 2439..2831 with its lead at +20 and 20
     clear under the submit, against the desktop's 40/57. */
  .c-form{
    width:min(324px, 100%);
    max-width:none;
    padding:20px 30px;
  }

  /* 20px Playfair on a 27px line, and this is the cleanest ratio in the pass:
     the lead's two mobile lines ink 236 + 143 = 379 where DESIGN.md already
     records the desktop's three at 263 + 367 + 121 = 751. That is .505
     against 20/40 = .500, and the measured 27px pitch is 20 x 1.333 to the
     decimal. */
  .c-form__lead{
    margin-bottom:12px;
    font-size:var(--c-fs-lead-sm);
    line-height:var(--c-lh-lead-sm);
  }

  /* 16px, solved the same way: «Ще се обадим в най-кратък срок» inks 252 here
     against 316 on Contacts.png, a ratio of .797 against 16/20 = .800. Its
     h21 box is 16 x 1.3, which is the line height this rule already carried.
     The 800 weight is untouched. */
  .c-form__title{ font-size:var(--c-fs-title-sm); }
  .c-form__lead + .c-form__title{ margin-bottom:20px; }

  /* THE FIELD ITSELF DOES NOT CHANGE, and that is measured rather than left
     alone: the mobile cards' fields are 40 tall with a 14px label above and
     a 12px italic placeholder inside, which is the desktop component to the
     pixel. It is also the right answer for touch - 40 plus the label's own
     row clears 44 comfortably, and shrinking a field on a phone is backwards. */

  /* Contacts two-up at 128 + 8 + 128 = the 264 column. */
  .c-form__row{ gap:8px; margin-bottom:12px; }
  .c-form--cv:not(.c-form--wide) .c-form__row{ gap:12px 8px; margin-bottom:12px; }
  .c-form--cv:not(.c-form--wide) .c-form__row > *{ flex:1 1 0; }

  /* The wide card does not exist at 393: the Екип frame draws the SAME 324
     narrow card the landing frame does, «Друго:» row and all. So the wide
     modifier collapses onto the narrow one rather than carrying a third set
     of numbers down to a width no frame gives it. */
  .c-form--wide{ padding:20px 30px; }
  .c-form--wide .c-form__row{ flex-wrap:wrap; gap:8px; }
  .c-form--wide .c-form__row > *{ flex:1 1 100px; }
  .c-form--wide .c-form__row > :nth-child(1),
  .c-form--wide .c-form__row > :nth-child(2),
  .c-form--wide .c-form__row > :nth-child(3){ flex-grow:1; }

  /* Six 80x25 sources three-up at an 8px gap: x68/156/244 on the Екип frame,
     an 88px pitch inside the 264 column (3 x 80 + 2 x 8 = 256). The landing's
     narrow card draws 174x50 two-up at 1920; at 393 both frames draw this. */
  .c-form--cv:not(.c-form--wide) .c-options,
  .c-form--wide .c-options{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
  }
  .c-form--cv:not(.c-form--wide) .c-options__label,
  .c-form--wide .c-options__label{
    width:100%;
    /* 25 in the frame, 32 here: 25 is well under the touch floor and these
       are radio targets, which is the one place this pass overrides a
       measured value on purpose rather than by drift. */
    height:32px;
    padding:0 6px;
    justify-content:center;
    font-size:var(--c-fs-caption);
  }

  /* «Друго:» - 183x25 in the frame, on its own row under the grid. */
  .c-cv-other{ height:40px; padding:0 12px; }

  /* The CV attach control's gold half keeps its share rather than its 174:
     174 of 372 is 47%, and 47% of the 264 column is 124, which is what the
     frame's own «Прикачете CV» half measures. */
  .c-cv__btn{ flex:0 0 47%; padding:0 8px; }

  /* 106x42 in both frames. The height stays at the component's 50 - see
     buttons.css for why the mobile button heights (41, 42, 44, 50) do not
     resolve to anything and the 50 wins on touch. */
  .c-form__actions{ margin-top:20px; }
  .c-form__actions .c-btn--primary{ min-width:106px; padding:0 20px; }
}