/* ============================================================================
   The appraisal request form (our own, 2026-10-05), /intake and /es/solicitud.
   Behaviour: /assets/js/intake.js.
   Two columns on desktop: the stepper on cream, the "assignment brief" on an
   obsidian dial card that builds the scenario as the reader answers.
   ========================================================================== */

.ix-section { scroll-margin-top: calc(var(--header-h) + 8px); }
#form { scroll-margin-top: calc(var(--header-h-condensed) + 8px); }
@media (max-width: 1020px) { #form { scroll-margin-top: var(--header-h-condensed); } }
.ix { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-xl);
      align-items: start; margin-top: var(--space-xl); }
.ix__main { min-width: 0; }
.no-js .ix { display: none; }
.ix-nojs { display: none; }
.no-js .ix-nojs { display: block; }

/* ---- progress ---- */
.ix-progress { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 var(--space-lg);
               padding: 0; list-style: none; counter-reset: ixstep; }
.ix-progress li { margin: 0; }
.ix-progress button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
  padding: 10px 0 0; border-top: 2px solid var(--hairline); font: 500 var(--step--2)/1.2 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ix-progress button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.ix-progress li.is-done button { border-top-color: var(--brass-500); color: var(--ink-700); }
.ix-progress li.is-current button { border-top-color: var(--navy-800); color: var(--text); }
.ix-progress .ix-progress__n { display: block; font-size: 0.68rem; opacity: 1; margin-bottom: 2px; } /* was .7 (2.8:1), 2026-10-09 */

/* ---- a step ---- */
.ix-form { background: var(--bg-raised); border: var(--border); border-radius: var(--radius-lg);
           box-shadow: var(--shadow); padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); }
.ix-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.ix-step[hidden] { display: none; }
.ix-step.is-entering { animation: ix-in var(--dur-slow) var(--ease-out); }
@keyframes ix-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ix-step__k { font: 500 var(--step--2)/1 var(--font-mono); letter-spacing: var(--tracking-caps);
              text-transform: uppercase; color: var(--accent-strong); margin: 0 0 var(--space-sm); }
.ix-step__h { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3);
              line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0;
              padding: 0; color: var(--text); outline: none; }
.ix-step__lede { color: var(--text-muted); margin: var(--space-xs) 0 var(--space-lg); max-width: 58ch; }
.ix-q { margin-top: var(--space-lg); }
.ix-q__label { display: block; font-weight: 600; font-size: var(--step-0); margin: 0 0 var(--space-xs); color: var(--text); }
.ix-q__hint { display: block; font-size: var(--step--1); color: var(--text-muted); margin: -2px 0 var(--space-sm); }
.ix-opt { font-weight: 400; color: var(--text-muted); font-size: var(--step--1); }

/* ---- choice cards (real radios and checkboxes underneath) ---- */
.ix-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ix-cards--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ix-card { position: relative; display: block; cursor: pointer; padding: 14px 16px 14px 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ix-card:hover { border-color: color-mix(in srgb, var(--ink-900) 28%, transparent); transform: translateY(-1px); }
.ix-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ix-card__t { display: block; font-weight: 600; color: var(--text); font-size: var(--step-0); line-height: 1.3; padding-right: 22px; }
.ix-card__d { display: block; font-size: var(--step--1); color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.ix-card__abbr { display: inline-block; font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.12em;
  color: var(--accent-strong); margin-bottom: 6px; }
.ix-card::after { content: ""; position: absolute; top: 14px; right: 14px; width: 14px; height: 14px;
  border: 1px solid color-mix(in srgb, var(--ink-900) 30%, transparent); border-radius: 50%;
  transition: all var(--dur-fast) var(--ease); }
.ix-card:has(input[type=checkbox])::after { border-radius: 2px; }
.ix-card:has(input:checked) { border-color: var(--navy-800); background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--navy-800), var(--shadow-sm); }
.ix-card:has(input:checked)::after { background: var(--navy-800); border-color: var(--navy-800);
  box-shadow: inset 0 0 0 3px var(--bg-raised); }
.ix-card:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ix-card:has(input:disabled) { opacity: .45; cursor: not-allowed; transform: none; }
.ix-card__badge { display: none; position: absolute; top: -9px; left: 12px; padding: 2px 7px;
  background: var(--navy-800); color: var(--bone-50); font: 500 0.62rem/1.4 var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px; }
.ix-card.is-suggested .ix-card__badge { display: block; }

/* ---- pills (compact choices) ---- */
.ix-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-pill { position: relative; cursor: pointer; }
.ix-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ix-pill span { display: inline-block; padding: 9px 14px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--bg); font-size: var(--step--1); color: var(--ink-700); line-height: 1.2;
  transition: all var(--dur-fast) var(--ease); }
.ix-pill:hover span { border-color: color-mix(in srgb, var(--ink-900) 30%, transparent); }
.ix-pill input:checked + span { background: var(--navy-800); border-color: var(--navy-800); color: var(--bone-50); }
.ix-pill input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- text inputs ---- */
.ix-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ix-field { display: block; }
.ix-field > span { display: block; font-size: var(--step--1); font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
.ix-input, .ix-textarea, .ix-select { width: 100%; box-sizing: border-box; font: 400 var(--step-0)/1.4 var(--font-body);
  color: var(--text); background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink-900) 18%, transparent);
  border-radius: var(--radius); padding: 11px 13px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.ix-textarea { min-height: 96px; resize: vertical; }
.ix-input:focus, .ix-textarea:focus, .ix-select:focus { outline: none; border-color: var(--navy-800);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass-400) 35%, transparent); background: var(--bg-raised); }
.ix-input[aria-invalid=true] { border-color: var(--signal-500); }
.ix-err { color: var(--signal-500); font-size: var(--step--1); font-weight: 600; margin: 0 0 var(--space-sm); }
.ix-err:empty { display: none; }
.ix-reveal[hidden] { display: none; }
.ix-reveal { margin-top: var(--space-sm); animation: ix-in var(--dur) var(--ease-out); }
.ix-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: var(--step--1); color: var(--ink-700); margin-top: var(--space-sm); }
.ix-check input { margin-top: 3px; accent-color: var(--navy-800); width: 16px; height: 16px; }
.ix-note { margin-top: var(--space-sm); padding: 10px 14px; border-left: 2px solid var(--brass-500);
  background: color-mix(in srgb, var(--brass-100) 55%, transparent); font-size: var(--step--1); color: var(--ink-700); }

/* ---- sites stepper ---- */
.ix-stepper { display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--ink-900) 18%, transparent);
  border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.ix-stepper button { all: unset; cursor: pointer; width: 44px; text-align: center; font-size: 1.2rem; color: var(--ink-700); }
.ix-stepper button:hover { background: var(--bg-sunken); }
.ix-stepper button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.ix-stepper input { width: 64px; text-align: center; border: 0; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
  font: 600 var(--step-1)/1 var(--font-body); padding: 10px 0; background: transparent; color: var(--text); -moz-appearance: textfield; }
.ix-stepper input::-webkit-inner-spin-button, .ix-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ix-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: var(--space-sm); }

/* ---- upload ---- */
.ix-drop { position: relative; display: block; text-align: center; cursor: pointer; padding: 28px 18px;
  border: 1.5px dashed color-mix(in srgb, var(--ink-900) 26%, transparent); border-radius: var(--radius-lg);
  background: var(--bg); transition: all var(--dur-fast) var(--ease); }
.ix-drop:hover, .ix-drop.is-over { border-color: var(--brass-500); background: color-mix(in srgb, var(--brass-100) 50%, var(--bg)); }
.ix-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ix-drop:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ix-drop__icon { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--accent-strong); }
.ix-drop__t { font-weight: 600; color: var(--text); }
.ix-drop__d { display: block; font-size: var(--step--1); color: var(--text-muted); margin-top: 4px; }
.ix-files { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: 8px; }
.ix-file { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg-raised); }
.ix-file__thumb { width: 40px; height: 40px; border-radius: 2px; background: var(--bg-sunken) center/cover no-repeat;
  display: grid; place-items: center; font: 500 0.6rem/1 var(--font-mono); color: var(--ink-500); text-transform: uppercase; }
.ix-file__name { font-size: var(--step--1); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-file__meta { font-size: 0.72rem; color: var(--text-muted); }
.ix-file__bar { height: 2px; background: var(--hairline); margin-top: 5px; border-radius: 2px; overflow: hidden; }
.ix-file__bar i { display: block; height: 100%; width: 0; background: var(--brass-500); transition: width var(--dur-fast) linear; }
.ix-file.is-done .ix-file__bar { display: none; }
.ix-file.is-error .ix-file__meta { color: var(--signal-500); }
.ix-file__x { all: unset; cursor: pointer; padding: 6px 8px; color: var(--ink-500); font-size: 1.1rem; line-height: 1; }
.ix-file__x:hover { color: var(--signal-500); }
.ix-file__x:focus-visible { outline: 2px solid var(--focus-ring); }

/* ---- navigation ---- */
.ix-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--hairline); }
.ix-nav__back { all: unset; cursor: pointer; font-size: var(--step--1); color: var(--ink-700); padding: 8px 2px; }
.ix-nav__back:hover { color: var(--text); text-decoration: underline; }
.ix-nav__back:focus-visible { outline: 2px solid var(--focus-ring); }
.ix-nav__back[hidden] { visibility: hidden; display: inline-block; }
.ix-nav__right { display: flex; align-items: center; gap: var(--space-md); }
.ix-nav__skip { font-size: var(--step--2); color: var(--text-muted); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ix-nav .btn[disabled] { opacity: .6; cursor: progress; }

/* ---- review ---- */
.ix-review { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--hairline); }
.ix-review > div { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--hairline); align-items: baseline; }
.ix-review dt { font: 500 var(--step--2)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ix-review dd { margin: 0; color: var(--text); font-size: var(--step--1); overflow-wrap: anywhere; }
.ix-review dd.is-empty { color: var(--ink-300); font-style: italic; }
.ix-review button { all: unset; cursor: pointer; font-size: var(--step--2); color: var(--accent-strong); text-decoration: underline; }
.ix-next { margin: var(--space-lg) 0 0; padding: 0; list-style: none; counter-reset: ixn; display: grid; gap: 10px; }
.ix-next li { counter-increment: ixn; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: var(--step--1); color: var(--ink-700); }
.ix-next li::before { content: counter(ixn); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--brass-500); font: 500 0.72rem/1 var(--font-mono); color: var(--accent-strong); }

/* ---- the brief (obsidian dial card) ---- */
.ix-brief { position: sticky; top: calc(var(--header-h-condensed) + 20px); color: var(--text-on-dark);
  background: radial-gradient(120% 80% at 50% 0%, var(--navy-700) 0%, var(--navy-900) 70%);
  border-radius: var(--radius-lg); padding: 26px 24px 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ix-brief::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--chrome-dark); }
.ix-brief__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font: 500 0.66rem/1 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-on-dark); }
.ix-brief__top b { font-weight: 500; color: var(--text-on-dark-muted); letter-spacing: .12em; }
.ix-dial { display: block; width: 100%; max-width: 236px; margin: 18px auto 6px; overflow: visible; }
.ix-dial .tick { stroke: color-mix(in srgb, var(--bone-100) 22%, transparent); stroke-width: 1; }
.ix-dial .idx { fill: color-mix(in srgb, var(--bone-100) 14%, transparent); transition: fill var(--dur-slow) var(--ease-out); }
.ix-dial .idx.on { fill: var(--brass-400); }
.ix-dial .ring { fill: none; stroke: color-mix(in srgb, var(--brass-400) 40%, transparent); stroke-width: 1; }
.ix-dial .arc { fill: none; stroke: var(--brass-400); stroke-width: 1.5; stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.ix-dial .hand { transform-origin: 120px 120px; transition: transform var(--dur-slow) var(--ease-out); }
.ix-dial .hand line { stroke: var(--bone-100); stroke-width: 2; stroke-linecap: round; }
.ix-dial .hand circle { fill: var(--amp-signal); }
.ix-dial .face-k { font: 500 9px/1 var(--font-mono); letter-spacing: 2px; fill: var(--text-on-dark-muted); text-anchor: middle; }
.ix-dial .face-v { font: 500 22px/1 var(--font-display); fill: var(--bone-50); text-anchor: middle; }
.ix-dial .face-n { font: 500 10px/1 var(--font-mono); letter-spacing: 1px; fill: var(--accent-on-dark); text-anchor: middle; }
.ix-brief.is-sent .hand { transition: transform 1.6s var(--ease-out); }
.ix-brief__sentence { font-family: var(--font-display); font-size: 1.13rem; line-height: 1.55; margin: 14px 0 0; color: var(--bone-50); }
.ix-brief__sentence b { font-weight: 500; color: var(--brass-300); }
.ix-blank { display: inline-block; min-width: 3.2em; padding: 0 2px; border-bottom: 1px dashed color-mix(in srgb, var(--bone-100) 35%, transparent);
  color: var(--text-on-dark-muted); font-family: var(--font-body); font-size: .8em; font-style: italic; line-height: 1.2; }
.ix-brief__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; min-height: 0; }
.ix-brief__chips span { font: 500 0.64rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px;
  border: 1px solid var(--hairline-dark); border-radius: 2px; color: var(--text-on-dark); animation: ix-pop var(--dur) var(--ease-out); }
@keyframes ix-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.ix-brief__line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 16px;
  font: 500 0.64rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.ix-brief__line i { height: 1px; background: linear-gradient(90deg, var(--brass-400), color-mix(in srgb, var(--brass-400) 20%, transparent)); }
.ix-brief__line em { font-style: normal; color: var(--bone-50); }
.ix-brief__pins { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 0.78rem; color: var(--text-on-dark); }
.ix-brief__pins span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--amp-signal); vertical-align: 1px; }
.ix-brief__have { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hairline-dark); }
.ix-brief__have summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font: 500 0.7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark); }
.ix-brief__have summary::-webkit-details-marker { display: none; }
.ix-brief__have summary::after { content: "+"; color: var(--accent-on-dark); font-size: 1rem; }
.ix-brief__have[open] summary::after { content: "\2212"; }
.ix-brief__have ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.ix-brief__have li { font-size: 0.76rem; color: var(--text-on-dark-muted); display: flex; gap: 7px; align-items: center; }
.ix-brief__have li::before { content: ""; width: 7px; height: 7px; border: 1px solid color-mix(in srgb, var(--bone-100) 30%, transparent); border-radius: 50%; flex: none; }
.ix-brief__have li.on { color: var(--bone-50); }
.ix-brief__have li.on::before { background: var(--brass-400); border-color: var(--brass-400); }
.ix-brief__foot { margin: 14px 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--text-on-dark-muted); }

/* ---- done ---- */
.ix-done { text-align: left; }
.ix-done[hidden] { display: none; }
.ix-done__ref { display: inline-block; margin: var(--space-sm) 0 0; font: 500 var(--step-0)/1 var(--font-mono); letter-spacing: .08em;
  padding: 8px 12px; border: 1px solid var(--brass-500); border-radius: 2px; color: var(--text); }

/* ---- resume banner ---- */
.ix-resume { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-md); padding: 12px 16px; border: 1px solid var(--hairline-brass); border-radius: var(--radius);
  background: color-mix(in srgb, var(--brass-100) 45%, var(--bg-raised)); font-size: var(--step--1); }
.ix-resume[hidden] { display: none; }
.ix-resume button { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline; color: var(--text); }
.ix-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- responsive ---- */
.ix-brief__toggle { display: none; }
@media (max-width: 1020px) {
  .ix { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  /* Phones and tablets: the brief is a slim bar pinned under the header (intake.js keeps
     --ix-top equal to the header's live height). Tap to open the whole brief. */
  .ix-brief { position: sticky; top: var(--ix-top, 62px); z-index: 20; order: -1;
    display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
    padding: 10px 14px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin: 0 calc(-1 * var(--gutter));
    box-shadow: 0 10px 24px -14px rgba(12, 14, 18, .55); cursor: pointer; }
  .ix-brief__top { display: none; }
  .ix-dial { grid-row: 1; grid-column: 1; margin: 0; max-width: 46px; }
  .ix-dial .face-k, .ix-dial .face-n { display: none; }
  .ix-dial .face-v { font-size: 30px !important; }
  .ix-brief__sentence { grid-column: 2; margin: 0; font-size: 0.86rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ix-brief__toggle { all: unset; display: grid; place-items: center; grid-column: 3; grid-row: 1; cursor: pointer;
    min-width: 44px; height: 44px; font: 500 0.68rem/1.15 var(--font-mono); letter-spacing: .06em; text-align: center;
    color: var(--accent-on-dark); }
  .ix-brief__toggle b { display: block; font-size: 0.95rem; color: var(--bone-50); font-weight: 500; }
  .ix-brief__toggle:focus-visible { outline: 2px solid var(--focus-ring); }
  .ix-brief__chips, .ix-brief__pins, .ix-brief__line, .ix-brief__have, .ix-brief__foot { display: none; }
  .ix-brief.is-open { max-height: calc(100dvh - var(--ix-top, 62px) - 16px); overflow: auto; align-items: start; }
  .ix-brief.is-open .ix-brief__sentence { -webkit-line-clamp: unset; display: block; font-size: 0.98rem; }
  .ix-brief.is-open .ix-brief__chips, .ix-brief.is-open .ix-brief__pins { display: flex; grid-column: 1 / -1; }
  .ix-brief.is-open .ix-brief__line:not([hidden]) { display: grid; grid-column: 1 / -1; }
  .ix-brief.is-open .ix-brief__have, .ix-brief.is-open .ix-brief__foot { display: block; grid-column: 1 / -1; }
  .ix-brief.is-open .ix-dial { max-width: 72px; }
  /* Back and Continue stay on screen while a long step scrolls */
  .ix-nav { position: sticky; bottom: 0; z-index: 15; margin: var(--space-lg) calc(-1 * clamp(1.25rem, 0.8rem + 2vw, 2.5rem)) calc(-1 * clamp(1.25rem, 0.8rem + 2vw, 2.5rem));
    padding: 12px clamp(1.25rem, 0.8rem + 2vw, 2.5rem) calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-raised) 94%, transparent); backdrop-filter: blur(6px);
    border-top: 1px solid var(--hairline); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: nowrap; }
  .ix-nav__skip { display: none; }
  .ix-nav__right { width: auto; }
  /* 16px stops iOS from zooming the page when a field takes focus */
  .ix-input, .ix-textarea, .ix-select, .ix-stepper input { font-size: 16px; }
}
@media (max-width: 640px) {
  .ix-progress { gap: 3px; }
  .ix-progress button { font-size: 0; padding-top: 8px; }
  .ix-progress .ix-progress__n { font-size: 0.66rem; margin: 0; text-align: center; opacity: 1; }
  .ix-grid2 { grid-template-columns: 1fr; }
  .ix-cards, .ix-cards--wide { grid-template-columns: 1fr; gap: 8px; }
  .ix-card { padding: 12px 14px; }
  .ix-review > div { grid-template-columns: 1fr auto; }
  .ix-review dt { grid-column: 1 / -1; }
  .ix-pill span { padding: 10px 14px; }
  .ix-step__h { font-size: var(--step-2); }
}

/* elements whose display is set above must still honour [hidden] */
.ix-brief__line[hidden], .ix-progress[hidden], .ix-form[hidden] { display: none; }
.ix-form, .ix-done { scroll-margin-top: calc(var(--header-h) + 16px); }