/* /post and /carrier (and their /en/, /ru/ mirrors), v2 2026-10-16: the
   form sits in one dark glass card with the same header strip as the home
   cards. White 52px inputs, glass chips (the selected one turns white),
   hairlines in white 14%, hints in white 64%. Loaded after styles.css,
   which supplies the shell, the tokens, .btn and .strip. post.js and
   carrier.js only ever toggle [hidden], .active, .current/.done,
   .stepper-on and .invalid; every rule below keys off the markup as the
   live pages ship it. */

.post-card {
  width: 100%;
  max-width: 720px;
  overflow: hidden;
  background: var(--glass-ink);
  border: 1px solid var(--w16);
  border-radius: 14px;
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .post-card { background: var(--ink); }
}
.post-card .strip { padding: 12px 32px 11px; }

/* ---------- /post: the step strip ----------
   post.js unhides it and moves .current along; "Step 1 / 4" on the left,
   the four step names on the right with the current one in white. A phone
   shows only the current name. Without JavaScript the strip stays hidden
   and the form renders whole, as it always has. */
.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 32px 11px;
  background: var(--w8);
  border-bottom: 1px solid var(--w14);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.step-dots {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--w64);
}
.step-dots li.current { color: var(--white); }
/* the dividers between steps belong to the long no-JS render only; the one
   inside step 4 (invoicing / contact) is nested deeper and stays */
#lead-form.stepper-on > .form-divider { display: none; }
/* post.js sits at the end of the page, so the long no-JS form used to paint
   first and then collapse to step 1 when the script ran: Lighthouse measured
   a layout shift of 0.67 on /post. A browser that runs scripts now starts
   from what the stepper will show: step 1 alone, the real strip with step 1
   marked, step 1's continue button. post.js then adds .stepper-on and takes
   over; nothing moves. Without scripting the form renders whole, as before. */
@media (scripting: enabled) {
  #lead-form:not(.stepper-on) > .form-step:not([data-step="1"]),
  #lead-form:not(.stepper-on) > .form-divider { display: none; }
  /* the real strip, already showing step 1, holds the place: no blank
     strip that fills in when post.js runs */
  #lead-form:not(.stepper-on) > .step-header[hidden] { display: flex !important; }
  #lead-form:not(.stepper-on) > .form-step[data-step="1"] .step-nav[hidden] { display: flex !important; }
}

/* ---------- the card body ---------- */
.form-step, .form-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
}
.form-section { display: flex; flex-direction: column; gap: 20px; }
.section-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--w82);
}
.form-divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--w14);
}
#lead-form > .form-divider { margin: 0 32px; }

.field-row { display: flex; gap: 16px; }
.field-row > .field { flex: 1 1 0; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field-label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--white);
}
.optional-tag { font-weight: 400; color: var(--w64); }
.optional-tag::before { content: "· "; }
.field input, .field textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 27px;
}
.field textarea { height: auto; min-height: 108px; padding: 12px 16px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--graphite); opacity: 1; }
.field .sub-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--w82); }
.field-pair { display: flex; gap: 12px; }
.field-pair > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.field-hint { font-size: 13px; line-height: 18px; color: var(--w64); }
.price-input-row { position: relative; }
.price-currency {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--graphite);
  font-weight: 600;
  pointer-events: none;
}
.price-input-row input { padding-left: 38px; }

/* chips: glass on the card, white ("Strong") once chosen. 36px tall as
   drawn; the ::after stretches the hit area to 44px without moving them. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--w45);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.chip::after { content: ""; position: absolute; inset: -5px -4px; }
.chip:hover { border-color: var(--white); background: var(--w8); }
.chip.active, .chip.active:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* ---------- buttons: the form scripts' classes mapped onto the v2 pair ---------- */
.btn-primary { background: var(--amber); color: var(--ink); }
.btn-primary:hover { background: var(--amber-hover); }
.btn-secondary { background: transparent; border-color: var(--white); color: var(--white); }
.btn-secondary:hover { background: var(--white); color: var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  .chip { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
}
.step-nav { display: flex; justify-content: flex-end; gap: 12px; }
.step-nav .step-back { margin-right: auto; }
.step-nav-final .post-submit { flex: 1 1 auto; }
.post-submit { width: 100%; }

/* ---------- step 4's summary of what was entered ---------- */
.step-summary {
  padding: 8px 16px 4px;
  border: 1px solid var(--w14);
  border-radius: 12px;
  background: var(--w8);
}
.step-summary > .field-label { margin: 6px 0 2px; color: var(--w64); }
.summary-row {
  display: grid;
  grid-template-columns: minmax(88px, max-content) 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--w14);
}
.summary-row:first-of-type { border-top: 0; }
.summary-row dt { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--w64); }
.summary-row dd { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.summary-edit {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* invisible hit-area extension to a ~44px target without growing the row */
.summary-edit::after { content: ""; position: absolute; inset: -13px -8px; }

/* ---------- Turnstile, consent, the error line ---------- */
/* the widget lands late; its 65px are held so nothing below it jumps (line-height 0:
   its iframe is inline, and a line box would add a descender gap under it) */
.turnstile-slot { min-height: 65px; line-height: 0; }
/* the pages declare color-scheme dark (meta); the widget's own document is light,
   and a frame whose scheme differs from its page's gets an opaque backdrop: white
   specks in the widget's four rounded corners. Light here, as on the white fields. */
.turnstile-slot { color-scheme: light; }
/* the row is as tall as its text, as drawn; padding with a matching negative
   margin makes the whole label a 44px target without moving anything */
.consent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  margin: -11px 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--w82);
  cursor: pointer;
}
.consent-row input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--w82);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
.consent-row input:checked {
  border-color: var(--white);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.5' fill='none' stroke='%230c2a32' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.consent-row a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.consent-row.invalid input { border-color: #ffb4a9; box-shadow: 0 0 0 3px rgba(255, 180, 169, 0.35); }
.form-error {
  padding: 12px 16px;
  border: 1px solid rgba(255, 138, 128, 0.6);
  border-radius: 10px;
  background: rgba(255, 107, 107, 0.14);
  color: #ffd9d4;
  font-size: 14px;
  line-height: 22px;
}
.form-error:focus { outline: none; }

/* ---------- the cards that replace the form once it is sent ---------- */
.success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
}
.success-title { font-size: 22px; line-height: 32px; font-weight: 600; text-wrap: balance; }
.success-ref-label { font-size: 13px; line-height: 18px; color: var(--w64); }
.success-ref { font-size: 28px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; }
.success-body { font-size: 16px; line-height: 27px; color: var(--w82); text-wrap: balance; }
.success-body strong { color: var(--white); font-weight: 700; }
.success-card .btn { margin-top: 8px; }

@media (max-width: 600px) {
  .post-card .strip { padding: 12px 20px 11px; font-size: 12px; line-height: 16px; }
  .step-header { padding: 12px 20px 11px; }
  .step-dots li:not(.current) { display: none; }
  .form-step, .form-body { gap: 16px; padding: 20px; }
  #lead-form > .form-divider { margin: 0 20px; }
  .form-section { gap: 16px; }
  .section-label { font-size: 12px; line-height: 16px; }
  .field-row { flex-direction: column; gap: 16px; }
  .step-nav .btn { flex: 1 1 auto; }
  .step-nav .step-back { margin-right: 0; flex: 0 0 auto; }
  .summary-row { grid-template-columns: 1fr auto; }
  .summary-row dt { grid-column: 1 / -1; padding-bottom: 2px; }
  .success-card { padding: 24px 20px; }
}


/* ---------- motion (proposal, 17 Oct) ----------
   A step arrives instead of being swapped in. The animation runs whenever a
   step goes from hidden to shown, so post.js needs no change. */
@media (prefers-reduced-motion: no-preference) {
  .form-step { animation: pura-step 320ms cubic-bezier(.2, .7, .2, 1) backwards; }
  .success-card:not([hidden]) { animation: pura-step 420ms cubic-bezier(.2, .7, .2, 1) backwards; }
}
@keyframes pura-step { from { opacity: 0; transform: translateY(10px); } }