/* ============================================================
   CONTACT cluster — page styles for the focused form pages (namespace .ct-*).
   Page 1: book-a-demo.html — "Book an incontrol demo", built 1:1 from the Figma
   "Book a demo" frame (1440×760): a logo-only frosted navbar overlaying a
   viewport-centred 515×498 form box. The box is white-on-white in the design, so
   it has no chrome here either — it is only the centring/padding box.
   Page 2: get-started.html — "Let's start." (the Figma "Contact us: botón get
   started" frame): the same shell, but a FRAMED 462×589 card (.ct-card--framed)
   with a phone row (country-code select + number) and a service select; Continue
   swaps it for a 462×362 step-2 card (.ct-card--q: business radios + annual-fees
   select, the "… get started 2" frame), then screen 3 (pending).
   Shared chrome (navbar brand, tokens, .reveal, .icon) comes from css/styles.css;
   the validation states follow the hero/closer email pills (styles.css §14).
   Later contact forms (Contact Sales, Get started…) reuse this file.
   ============================================================ */

/* The design's navbar OVERLAYS the page (absolute + frosted blur) so the form
   centres in the FULL viewport — a page-local modifier on the shared .navbar
   (sticky everywhere else). Move it into styles.css if a second page needs it. */
.navbar--float { position: fixed; top: 0; left: 0; right: 0; }

/* page = one viewport with the form box centred (design: the 498 box centred at 380 of 760) */
.ct {
  position: relative;            /* hosts the background wash */
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
}
/* the site's orange CTA wash (assets/img/cta-wash.svg — the ribbon behind the landing
   closer and the Case-studies CTA) across the whole page behind the form (user
   2026-09-21: "add the orange vector swirl to the background"). Cover-fit like the
   closer; faded out over the top 240px so the frosted bar sits on plain ground. */
.ct-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 240px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 240px);
}
/* short viewports: stop centring before the box could slide under the 75px bar
   ((648 − 498) / 2 = 75) and pin it below the bar instead */
@media (max-height: 648px) {
  .ct { align-items: start; padding-top: 90px; padding-bottom: 40px; }
}

/* the design's (invisible) 515×498 box: heading 42 under its top, Submit 93 above
   its bottom. The 406 form column is CENTRED in it — the export's 61/48 side insets
   are a Figma slip (its Submit label is off-centre the same way). */
.ct-card {
  position: relative;
  z-index: 1;                    /* above the wash */
  width: 515px;
  max-width: 100%;
  padding: 42px 0 93px;
}
/* get-started: the design's card IS visible — 462×589, 1px #E3E3E3, r12; heading 27
   under its top, Continue 34 above its bottom, 28 side insets measured to the OUTER
   edge (= the 406 column) — so the padding is each inset minus the 1px border. The
   design draws it unfilled on white; over the wash it gets the surface fill. */
.ct-card--framed {
  width: 462px;
  padding: 26px 27px 33px;
  background: var(--surface);
  border: 1px solid #E3E3E3;
  border-radius: 12px;
}

/* heading 20/26 600 (design #000 → the headline token so it themes); the text sits
   7px into the column like the labels (design x 531 vs the pills' 524) */
.ct-title {
  width: 406px;
  max-width: 100%;
  margin: 0 auto 25px;           /* design: heading box 199 → first label 224 */
  padding-left: 7px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: var(--headline);
}

/* the form column; min-height = the form's 312 (label 1 top → Submit bottom) so the
   box doesn't jump when the form is swapped for the success line */
.ct-body {
  width: 406px;
  max-width: 100%;
  margin: 0 auto;
  min-height: 312px;
}
.ct-body--start { min-height: 475px; }        /* get-started: label 1 top → Continue bottom */

.ct-form { display: flex; flex-direction: column; }
.ct-form > * + * { margin-top: 26px; }          /* design: 26 between field groups */
.ct-form > .ct-submit { margin-top: 40px; }     /* design: 40 above the button */
.ct-form--start > .ct-submit { margin-top: 29px; }   /* get-started: 29 above Continue */

/* get-started phone row: 96 country-code select + 14 + 296 number = 406 */
.ct-phone { display: grid; grid-template-columns: 96px 1fr; gap: 14px; }

/* ---- get-started STEP 2 (the "… get started 2" frame): a 462×362 card with no heading —
   question 37 under the top (36 + border), radios at a 30px pitch, 28 to the two-line
   fees question, 14 to its select, 30 to Submit, 31 to the bottom (30 + border) ---- */
.ct-card--q { padding: 36px 27px 30px; }
.ct-card:focus-visible { outline: none; }          /* the step card is focused programmatically when it appears */
.ct-card--q:not([hidden]) { animation: ct-step-in .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes ct-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ct-body--q { min-height: 294px; }                 /* = the step-2 form (q1 → Submit) */
.ct-form--q > * + * { margin-top: 28px; }          /* last radio → the fees question */
.ct-form--q > .ct-submit { margin-top: 30px; }
.ct-label.ct-label--q { margin-bottom: 24px; }     /* question → first radio (doubled class: the base .ct-label margin comes later in the file) */
.ct-label.ct-label--q2 { margin-bottom: 14px; max-width: 313px; }   /* the design's 306 text box + the 7px padding → breaks "…pay in / scheme fees…" */

/* the business question's choices (correction 51, 2026-10-16: tickable boxes, several may be ticked — the design's
   8px radio dots before): a 14px rounded box 7px into the column, the label 14 to the right; the input IS the box
   (appearance none) so it stays focusable / announced; ticked = the brand orange with a white tick */
.ct-checks { display: flex; flex-direction: column; gap: 14px; }   /* 16 text + 14 = the 30px pitch */
.ct-check {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 7px;
  font-size: 12px;
  line-height: 16px;
  color: var(--headline);
  cursor: pointer;
}
.ct-check__input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface) no-repeat center / 10px 10px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ct-check__input:checked {
  border-color: var(--brand);
  background-color: var(--brand);   /* #FF5F16 by marketing's decision (2026-10-13) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 5.2l2.2 2.1L8 3' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ct-check__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ct-field.is-error .ct-check__input { border-color: #d02e2e; }

/* First / Last name pair: 187 + 32 + 187 = 406 */
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.ct-field { position: relative; display: flex; flex-direction: column; }
.ct-label {
  margin: 0 0 8px;               /* design: label box 16 → pill +8 */
  padding-left: 7px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--headline);
}
.ct-label__hint { margin-left: 6px; color: #BABBC6; }   /* «optional» beside the Phone number / Service of interest labels (correction 51): the design's placeholder grey */
.ct-input {
  width: 100%;
  height: 37px;                  /* design: 36 rect + 1 stroke */
  padding: 0 13px;               /* the design's text inset (its select placeholder sits at 530 in a pill at 517) */
  border: 1px solid var(--border);   /* design #D9D9D9 = the light border token */
  border-radius: 999px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;               /* the design shows empty pills — typed text one step above the 12px labels */
  letter-spacing: -0.01em;
  color: var(--text-strong);
  transition: border-color .2s ease;
}
/* the global :focus-visible rule squares focused elements to r6 — keep the pill */
.ct-input:focus-visible,
.ct-select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 999px; }

/* selects (get-started: country code + service of interest) — the same pill with the
   native arrow replaced by the site's chevron (the design shows a grey ⌄ ~20px from
   the pill's right edge); a value="" placeholder option reads in the design's #BABBC6 */
.ct-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 37px;
  padding: 0 36px 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23BABBC6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center / 12px 12px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  cursor: pointer;
  transition: border-color .2s ease;
}
.ct-select:has(option[value=""]:checked) { color: #BABBC6; }
.ct-select--code { padding: 0 30px 0 12px; background-position: right 14px center; }   /* the 96px pill */

/* the dropdown LIST: Chrome's native popup highlights rows in system blue and cannot be
   recoloured, so where the customizable select exists (Chrome 135+) the list becomes
   our own — surface card, brand-ORANGE hover / selected rows (user 2026-09-21: "make
   the colour of the selector orange instead of blue"), the placeholder option hidden
   from the list. Browsers without it keep the native popup (dark gets color-scheme). */
@supports (appearance: base-select) {
  .ct-select,
  .ct-select::picker(select) { appearance: base-select; }
  .ct-select { align-items: center; }                 /* base-select makes the pill a flex box; without this its text sits at the TOP (user 2026-09-22) */
  .ct-select::picker-icon { display: none; }          /* the pill keeps its own chevron */
  .ct-select::checkmark { display: none; }            /* the selected row is shown by its tint */
  .ct-select::picker(select) {
    /* ALWAYS below the pill (user 2026-09-22 — the UA flips it above when the room below
       is short). With position-area the picker's containing block IS the region under
       the pill, so 100% = the room below: the list shrinks to fit and scrolls instead of
       flipping. 288 = ~9 rows for the 61-country list. */
    position-area: block-end span-inline-end;
    position-try-fallbacks: none;
    margin-block-start: 4px;
    padding: 4px;
    max-height: min(288px, calc(100% - 8px));       /* 4 margin + 4 breathing; the 4 services = 130 */
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(10, 23, 51, .10);
  }
  .ct-select option {
    padding: 6px 12px;                                 /* 30px rows: the 4 services = 130 incl. chrome — fits under the pill even with 138px of room */
    border-radius: 8px;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.01em;
    color: var(--text-strong);
  }
  .ct-select option:checked { background: rgba(255, 95, 22, .12); }
  .ct-select option:hover,
  .ct-select option:focus-visible { background: var(--brand); color: #FFFFFF; outline: none; }   /* #FF5F16 by marketing's decision (2026-10-13) */
  .ct-select option:disabled { display: none; }       /* "Code" / "Select a service" stay on the pill only */
}

/* Submit: 406×37 pill, 12px/110% −0.02em, label centred. It rests GREY (the pills'
   border grey + body-text ink) and only turns orange once every field is complete —
   contact.js toggles .is-ready (user 2026-09-21; the Figma shows the complete state).
   Orange = --brand (#FF5F16, marketing's decision of 2026-10-13; the AA shade
   --brand-strong before it). The grey state stays clickable so a
   click can still show what is missing (no disabled attribute). */
.ct-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 37px;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ct-submit.is-ready { background: var(--brand); color: #FFFFFF; }   /* #FF5F16 by marketing's decision (2026-10-13) */
.ct-submit.is-ready:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 95, 22, .35); }

/* validation states (client-side only — js/contact.js carries the TODO(backend)) */
.ct-form[hidden], .ct-done[hidden] { display: none; }   /* the flex displays above would beat [hidden] */
.ct-field.is-error .ct-input,
.ct-field.is-error .ct-select { border-color: #d02e2e; }
.ct-error {
  position: absolute;            /* sits in the 26px gap under its pill — no layout shift */
  top: calc(100% + 4px);
  left: 7px;
  right: 0;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #d02e2e;
}
.ct-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-left: 7px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-strong);
  outline: none;
}
.ct-done .icon { color: var(--brand); }

/* dark theme: the tokens carry the pills and text; only the fixed reds/orange lift.
   Inside the framed (surface) card the pills sit on the page colour instead — the
   popups' "pill var(--bg) on the surface card" precedent. */
:root[data-theme="dark"] .ct-card--framed { border-color: var(--border); }
:root[data-theme="dark"] .ct-card--framed .ct-input,
:root[data-theme="dark"] .ct-card--framed .ct-select { background-color: var(--bg); }
:root[data-theme="dark"] .ct-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23A6B0C3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .ct-select:has(option[value=""]:checked) { color: var(--text); }
:root[data-theme="dark"] .ct-select { color-scheme: dark; }   /* a native (non-customizable) popup follows the theme */
:root[data-theme="dark"] .ct-select::picker(select) { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .ct-field.is-error .ct-input,
:root[data-theme="dark"] .ct-field.is-error .ct-select { border-color: #ff8f8f; }
:root[data-theme="dark"] .ct-check__input { border-color: rgba(255, 255, 255, .3); background-color: var(--bg); }   /* the border token is too dark for a box on the surface card */
:root[data-theme="dark"] .ct-check__input:checked { border-color: var(--brand); background-color: var(--brand); }   /* NOT redundant: the dark resting rule above out-specifies :checked */
:root[data-theme="dark"] .ct-field.is-error .ct-check__input { border-color: #ff8f8f; }
:root[data-theme="dark"] .ct-label__hint { color: var(--text); }
:root[data-theme="dark"] .ct-error { color: #ff8f8f; }
:root[data-theme="dark"] .ct-wash { opacity: .75; }   /* like the closer / case-studies washes */

/* get-started: the 587 card needs 737 of viewport to centre clear of the 75px bar */
@media (max-height: 737px) {
  .ct--start { align-items: start; padding-top: 90px; padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-input, .ct-select, .ct-submit, .ct-check__input { transition: none; }
  .ct-card--q:not([hidden]) { animation: none; }
  .ct-submit.is-ready:hover { transform: none; }
}

/* ------------------------------------------------------------
   404 (S11, the error page = src/pages/not-found.pug on src/layouts/error.pug): the framed card with a heading, one
   line and a home button; the chrome (the floating bar, the wash) is the contact pages'. nginx serves the page at ANY
   URL (error_page 404), so its own references are root-absolute — see the layout.
   ------------------------------------------------------------ */
.ct-404 { text-align: center; }
.ct-404 .ct-title { padding-left: 0; margin-bottom: 12px; }
.ct-404__lead { margin: 0 0 28px; font-size: 14px; line-height: 20px; color: var(--text); }