/* ==========================================================================
   Redix Digital: the brief for a new site (brief.html, brief.js)
   In the design of the home page: v2.css draws the bar, the menu, the footer,
   the buttons and the titles; page.css puts the still sky behind it. The look
   follows the Claude Design brief Roei approved on 2026-10-27: an opening with
   the nine steps, then one card of dark glass that walks through them, then a
   screen of what is left. The tokens are the site's own (tokens.css, v2.css).
   Nothing is told by colour alone: a choice carries a tick, a mark carries words.
   ========================================================================== */

.br {
  --br-line: rgba(194, 205, 232, 0.22);
  --br-line-hi: rgba(194, 205, 232, 0.4);
  --br-field: rgba(7, 11, 26, 0.62);
  --br-pick: rgba(0, 196, 204, 0.1);
  --br-glow: 0 0 0 1px var(--cyan-hi), 0 0 28px -6px rgba(0, 196, 204, 0.55);
  position: relative;
  z-index: 3;
  padding: calc(76px + clamp(28px, 7vh, 80px) - 40px) var(--pad) clamp(64px, 12vh, 140px);
}

.br [hidden] { display: none !important; }

/* A control drawn by its label: the input stays for the keyboard and screen readers */
.br-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}

.br-arrow {
  width: 20px;
  height: 20px;
  margin-inline-start: 10px;
}

html[dir="ltr"] .br-arrow { transform: scaleX(-1); }

/* --- The opening ------------------------------------------------------------------------------ */

.br-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}

.br-title { font-size: clamp(2.5rem, 5.6vw, 5.25rem); }
.br-title span { display: block; }

.br-lead {
  max-width: 36em;
  margin: clamp(16px, 2.6vh, 26px) 0 0;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-mid);
}

.br-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 4vh, 40px);
}

.br-ask svg {
  width: 20px;
  height: 20px;
  margin-inline-end: 10px;
}

.br-restart { margin: 14px 0 0; }
.br-linkbtn.is-armed { color: var(--c-red-300); }

.br-linkbtn {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text-mid);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.br-intro__note {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  color: var(--text-low);
}

.br-plan { padding: clamp(22px, 2.6vw, 34px); }

.br-plan__title {
  margin: 0 0 18px;
  font-size: 1.25rem;
  font-weight: 800;
}

.br-plan__list,
.br-next-steps__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.br-plan__list li,
.br-next-steps__list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  line-height: 1.4;
  color: var(--text-mid);
}

.br-plan__list b { font-weight: 700; color: var(--text); }
.br-plan__d { color: var(--text-low); }

.br-plan__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--br-line-hi);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--text);
}

.br-plan__list li:first-child .br-plan__n { box-shadow: inset 0 0 0 1.5px var(--cyan-hi), 0 0 16px -2px rgba(0, 196, 204, 0.6); }

.br-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.br-fact {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(9, 14, 33, 0.72);
  box-shadow: inset 0 0 0 1px var(--br-line);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-mid);
}

.br-fact b {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--cyan-hi);
}

.br-intro__fine {
  grid-column: 1 / -1;
  margin: clamp(8px, 4vh, 48px) 0 0;
  font-size: 0.875rem;
  color: var(--text-low);
}

.br-intro__fine a,
.br .form-fine a { color: var(--cyan-hi); }

/* --- The brief: a bar, the steps, one card ---------------------------------------------------- */

.br-app {
  width: min(100%, 900px);
  margin-inline: auto;
}

.br-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 22px;
  font-size: 0.9375rem;
}

.br-bar p { margin: 0; }
.br-bar__name b { font-weight: 800; }
.br-bar__meta { margin-inline-start: 10px; color: var(--text-mid); }

.br-bar__saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-low);
  transition: color 300ms ease;
}

.br-bar__saved svg { width: 16px; height: 16px; color: var(--cyan-hi); }
.br-bar__saved.is-fresh { color: var(--text-mid); }

.br-rail { margin-bottom: 24px; }

.br-rail__list {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.br-rail__b {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-low);
  cursor: pointer;
}

.br-rail__b:disabled { cursor: default; }

.br-rail__n,
.br-rail__ok {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--br-line-hi);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--text-mid);
  transition: box-shadow 200ms ease, background-color 200ms ease;
}

.br-rail__ok { visibility: hidden; background: var(--cyan); box-shadow: none; }
.br-rail__ok svg { width: 16px; height: 16px; color: var(--ink); }

.br-rail__t {
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: center;
}

.br-rail__b.is-done .br-rail__ok { visibility: visible; }
.br-rail__b.is-done .br-rail__n { visibility: hidden; }
.br-rail__b.is-done .br-rail__t { color: var(--text-mid); }

.br-rail__b[aria-current="step"] .br-rail__n {
  visibility: visible;
  box-shadow: inset 0 0 0 1.5px var(--cyan-hi), 0 0 18px -2px rgba(0, 196, 204, 0.65);
  color: var(--text);
}

.br-rail__b[aria-current="step"] .br-rail__ok { visibility: hidden; }
.br-rail__b[aria-current="step"] .br-rail__t { font-weight: 800; color: var(--text); }

@media (hover: hover) and (pointer: fine) {
  .br-rail__b:not(:disabled):not([aria-current]):hover .br-rail__t { color: var(--text); }
}

.br-rail__bar {
  position: relative;
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(194, 205, 232, 0.14);
}

.br-rail__bar span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan-hi), var(--cyan));
  transform: scaleX(var(--p, 0.11));
  transform-origin: right center;
  transition: transform 420ms var(--ease-out-strong);
}

html[dir="ltr"] .br-rail__bar span { transform-origin: left center; }

.br-rail__count {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--text-low);
}

.br-rail__count b { font-weight: 700; color: var(--text-mid); }
.br-rail__name::before { content: " · "; }
.br-rail__name:empty::before { content: none; }

/* The card */
.br-card {
  display: grid;
  gap: 0;
  padding: clamp(22px, 3.6vw, 44px);
}

.br-step {
  display: grid;
  gap: clamp(26px, 3.4vh, 36px);
}

.br-step.is-in { animation: br-in 260ms var(--ease-out-strong); }

@keyframes br-in {
  from { opacity: 0; transform: translateY(8px); }
}

.br-step__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
}

.br-step__n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--cyan-hi), 0 0 18px -2px rgba(0, 196, 204, 0.6);
  font-size: 0.875rem;
  font-weight: 800;
}

.br-step__t {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
}

.br-step__t:focus { outline: none; }

.br-step__sub {
  grid-column: 2;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-mid);
}

/* --- A question ------------------------------------------------------------------------------ */

.br-step > .br-field + .br-field { margin-top: 0; }

/* Two short fields side by side: a run of halves becomes a grid row */
.br-step {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

.br-step > * { grid-column: 1 / -1; }
.br-step > .br-field--half { grid-column: auto; }

.br-field {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.br-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}

.br-head > :first-child { flex: 1 1 260px; display: grid; gap: 10px; }

.br-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.br-label__t {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}

.br-field--files .br-label__t { font-size: 1.125rem; }
.br-field--chips .br-label__t,
.br-field--devs .br-label__t,
.br-field--cards .br-label__t,
.br-field--budget .br-label__t,
.br-field--list .br-label__t,
.br-field--qa .br-label__t,
.br-field--links .br-label__t { font-size: 1.25rem; }

.br-req { color: var(--cyan-hi); }

/* The bubble: a "?" that opens an explanation and a simple example under the question */
.br-q {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 196, 204, 0.16);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.45);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--cyan-hi);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out-strong);
  /* (a 44px target without a bigger circle) */
  position: relative;
}

.br-q::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.br-q[aria-expanded="true"] { background: var(--cyan); color: var(--ink); }
.br-q:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .br-q:hover:not([aria-expanded="true"]) { background: rgba(0, 196, 204, 0.3); }
}

.br-tip {
  display: grid;
  gap: 6px;
  max-width: 34em;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(32, 44, 89, 0.55);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.28), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  font-size: 0.9375rem;
  line-height: 1.55;
  transform-origin: top right;
}

html[dir="ltr"] .br-tip { transform-origin: top left; }

.br-tip.is-open { animation: br-tip 170ms var(--ease-out-strong); }

@keyframes br-tip {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
}

.br-tip p { margin: 0; }
.br-tip__t { font-weight: 700; color: var(--text); }
.br-tip__ex { color: var(--text-low); }
.br-tip__ex > span { color: var(--text-mid); }

.br-sub {
  margin: -2px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-low);
}

.br-mini {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-mid);
}

.br .field__control {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--br-field);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.5);
  font: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  transition: box-shadow 160ms ease;
}

.br .field__control::placeholder { color: var(--text-low); opacity: 1; }

.uni .br .field__control:focus-visible {
  outline: 2px solid var(--cyan-hi);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--cyan-hi);
}

.br .field__control[dir="ltr"] { text-align: left; }
html[dir="rtl"] .br .field__control[dir="ltr"]::placeholder { text-align: right; }

.br-area {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  .br .field__control:hover:not(:focus) { box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.55); }
}

/* An answer that needs fixing: the field, then a sentence that says how */
.br-err {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-red-300);
}

.br-err svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.is-invalid > .br-err { display: flex; }
.br .is-invalid > .field__control { box-shadow: inset 0 0 0 1.5px var(--c-red-400); }

/* The grid of halves inside a group (the social networks) */
.br-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

/* --- Choices --------------------------------------------------------------------------------- */

/* A box that ticks (chips, custom features, consent) */
.br-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px rgba(194, 205, 232, 0.5);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.br-box svg {
  width: 15px;
  height: 15px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 140ms ease, transform 160ms var(--ease-out-strong);
}

.br-sr:checked ~ .br-box { background: var(--cyan); box-shadow: none; }
.br-sr:checked ~ .br-box svg { opacity: 1; transform: none; }

/* The keyboard's ring goes round the whole choice */
.br label:has(> .br-sr:focus-visible) {
  outline: 3px solid var(--cyan-hi);
  outline-offset: 3px;
}

/* One answer of a few (radio) */
.br-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.br-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--br-field);
  box-shadow: inset 0 0 0 1px var(--br-line-hi);
  cursor: pointer;
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

.br-opt__dot {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(194, 205, 232, 0.5);
  transition: box-shadow 160ms ease;
}

.br-opt:has(.br-sr:checked) { background: var(--br-pick); box-shadow: var(--br-glow); }
.br-sr:checked + .br-opt__dot { box-shadow: inset 0 0 0 6px var(--cyan); }

/* The kind of project, and the budget: cards */
.br-types,
.br-budgets,
.br-devs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.br-type,
.br-bud,
.br-dev {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 100%;
  padding: 18px;
  border-radius: 16px;
  background: rgba(7, 11, 26, 0.5);
  box-shadow: inset 0 0 0 1px var(--br-line-hi);
  cursor: pointer;
  transition: box-shadow 180ms ease, background-color 180ms ease, transform 160ms var(--ease-out-strong);
}

.br-type:active,
.br-bud:active,
.br-dev:active,
.br-chip:active:not([data-fixed]),
.br-opt:active { transform: scale(0.985); }

.br-type:has(.br-sr:checked),
.br-bud:has(.br-sr:checked),
.br-dev:has(.br-sr:checked) { background: var(--br-pick); box-shadow: var(--br-glow); }

@media (hover: hover) and (pointer: fine) {
  .br-type:hover:not(:has(.br-sr:checked)),
  .br-bud:hover:not(:has(.br-sr:checked)),
  .br-dev:hover:not(:has(.br-sr:checked)),
  .br-chip:hover:not(:has(.br-sr:checked)),
  .br-opt:hover:not(:has(.br-sr:checked)) { box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.55); }
}

.br-type__ic svg { width: 26px; height: 26px; color: var(--text-mid); }
.br-type__t { margin-top: 6px; font-size: 1.125rem; font-weight: 800; }
.br-type__d { font-size: 0.9375rem; line-height: 1.5; color: var(--text-mid); }

.br-tick {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms ease, transform 200ms var(--ease-out-strong);
}

.br-tick svg { width: 15px; height: 15px; color: var(--ink); }
.br-sr:checked ~ .br-tick { opacity: 1; transform: none; }

.br-bud__n { font-size: 0.875rem; font-weight: 700; color: var(--text-low); }
.br-bud:has(.br-sr:checked) .br-bud__n { color: var(--cyan-hi); }
.br-bud__r { font-size: 1.375rem; font-weight: 800; line-height: 1.25; }
.br-vat { margin-inline-start: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--text-low); }

.br-bud__d {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--br-line);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-mid);
}

/* The budget follows the kind chosen above it (the form's data-type) */
.br-for { display: none; }
.br-card[data-type=""] .br-for[data-for=""],
.br-card[data-type="landing"] .br-for[data-for="landing"],
.br-card[data-type="business"] .br-for[data-for="business"],
.br-card[data-type="shop"] .br-for[data-for="shop"] { display: inline; }
.br-card:not([data-type=""]) .br-wait,
.br-card[data-type=""] .br-budgets,
.br-card[data-type=""] .br-vatline { display: none; }

.br-wait {
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  outline: 1px dashed var(--br-line-hi);
  outline-offset: -1px;
  font-size: 0.9375rem;
  color: var(--text-low);
}

.br-vatline { color: var(--text-low); }

/* Many answers (chips) */
.br-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.br-chips--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.br-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--br-field);
  box-shadow: inset 0 0 0 1px var(--br-line-hi);
  line-height: 1.35;
  cursor: pointer;
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out-strong);
}

.br-chip__t { flex: 1 1 auto; min-width: 0; }

.br-chip:has(.br-sr:checked) { background: var(--br-pick); box-shadow: var(--br-glow); }
.br-chip[data-fixed] { cursor: default; box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.3); background: rgba(0, 196, 204, 0.06); }

.br-chip__tag,
.br-dev__tag {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cyan-hi);
}

.br-chip__tag:empty,
.br-dev__tag:empty { display: none; }
.br-chip__tag--fixed { font-weight: 600; color: var(--text-low); }

/* A choice above the budget keeps its words in cyan; a chosen one says it will be talked about */
.br-chip__tag { flex-basis: 100%; padding-inline-start: 34px; }

.br-head .br-count {
  flex: none;
  margin: 0;
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(7, 11, 26, 0.6);
  box-shadow: inset 0 0 0 1px var(--br-line-hi);
  font-size: 0.9375rem;
  color: var(--text-mid);
  transition: box-shadow 200ms ease;
}

.br-count b { font-weight: 800; color: var(--text); }
.br-count.is-over { box-shadow: inset 0 0 0 1px var(--cyan-hi); }

/* Custom features: cards with a line on what each is */
.br-dev { padding-inline-end: 52px; }
.br-dev__t { font-size: 1.0625rem; font-weight: 800; }
.br-dev__d { font-size: 0.9375rem; line-height: 1.5; color: var(--text-mid); }
.br-dev__tag { margin-top: 4px; }

.br-dev .br-box {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
}

/* The free line under every list */
.br-other {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.br-other__l {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-mid);
}

/* --- Notes ----------------------------------------------------------------------------------- */

.br-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(32, 44, 89, 0.42);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.22);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.br-note > svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--cyan-hi);
}

.br-note b { color: var(--text); }
.br-note--over { background: rgba(0, 196, 204, 0.08); }

.br-note--error {
  background: rgba(255, 138, 138, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 138, 0.42);
  color: var(--c-red-300);
}

.br-note--error > svg { color: var(--c-red-300); }

/* --- Rows to add (services, sites, questions) ---------------------------------------------- */

.br-rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.br-rows:empty { display: none; }

.br-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: start;
}

.br-row--link { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; }
.br-row--qa { grid-template-columns: 28px minmax(0, 1fr) 48px; }

.br-row__n {
  padding-top: 15px;
  font-weight: 800;
  color: var(--text-low);
}

.br-row__qa { display: grid; gap: 8px; }
.br-row__qa .br-area { min-height: 76px; }

.br-x {
  display: grid;
  place-items: center;
  width: 48px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(7, 11, 26, 0.5);
  box-shadow: inset 0 0 0 1px var(--br-line-hi);
  color: var(--text-mid);
  cursor: pointer;
  transition: box-shadow 160ms ease, color 160ms ease, transform 140ms var(--ease-out-strong);
}

.br-x svg { width: 18px; height: 18px; }
.br-x:active { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
  .br-x:hover { color: var(--c-red-300); box-shadow: inset 0 0 0 1px rgba(255, 138, 138, 0.55); }
}

.br-add {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 196, 204, 0.12);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.42);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cyan-hi);
  cursor: pointer;
  transition: background-color 160ms ease, transform 140ms var(--ease-out-strong);
}

.br-add svg { width: 18px; height: 18px; }
.br-add:active { transform: scale(0.97); }
.br-add:disabled { opacity: 0.45; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .br-add:hover:not(:disabled) { background: rgba(0, 196, 204, 0.22); }
}

/* A site they liked: the link, what they liked (a must once there is a link), what less */
.br-row--link { grid-template-columns: 28px minmax(0, 1fr) 48px; }

.br-row--link,
.br-row--qa {
  padding: 14px;
  border-radius: 14px;
  background: rgba(7, 11, 26, 0.35);
  box-shadow: inset 0 0 0 1px var(--br-line);
}

.br-row__ref {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.br-mini-l {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-mid);
}

.br-mini-l--url { grid-column: 1 / -1; }
.br-row__ref .br-area { min-height: 84px; }
.br .field__control.is-bad { box-shadow: inset 0 0 0 1.5px var(--c-red-400); }

/* Questions to tap under a long answer, and the line that says when it is enough */
.br-tips { display: grid; gap: 8px; }

.br-tips__l {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-low);
}

.br-tips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.br-tipq {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 99px;
  background: rgba(0, 196, 204, 0.08);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.32);
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-mid);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out-strong);
  position: relative;
}

.br-tipq::after { content: ""; position: absolute; inset: -4px 0; }   /* (a 44px target) */
.br-tipq svg { width: 14px; height: 14px; color: var(--cyan-hi); }
.br-tipq:active { transform: scale(0.97); }
.br-tipq.is-used { background: none; box-shadow: inset 0 0 0 1px var(--br-line); color: var(--text-low); }
.br-tipq.is-used svg { opacity: 0.4; }

@media (hover: hover) and (pointer: fine) {
  .br-tipq:hover:not(.is-used) { background: rgba(0, 196, 204, 0.18); color: var(--text); }
}

.br-depth {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-low);
}

.br-depth.is-good { color: var(--cyan-hi); }

/* --- Files ---------------------------------------------------------------------------------- */

.br-drops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.br-drop-card {
  padding: 20px;
  border-radius: 18px;
  background: rgba(7, 11, 26, 0.42);
  box-shadow: inset 0 0 0 1px var(--br-line);
  transition: box-shadow 200ms ease, background-color 200ms ease;
}

.br-drop-card.is-over {
  background: rgba(0, 196, 204, 0.08);
  box-shadow: var(--br-glow);
}

.br-files {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.br-files:empty { display: none; }

.br-file {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto 36px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 8px 8px 8px;
  padding-inline-start: 14px;
  border-radius: 12px;
  background: var(--br-field);
  box-shadow: inset 0 0 0 1px var(--br-line-hi);
  font-size: 0.9375rem;
}

.br-file__ic { width: 18px; height: 18px; color: var(--text-low); }
.br-file.is-done .br-file__ic { color: var(--cyan-hi); }
.br-file.is-failed { box-shadow: inset 0 0 0 1px rgba(255, 138, 138, 0.55); }
.br-file.is-failed .br-file__ic { color: var(--c-red-300); }

.br-file__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: start;
  unicode-bidi: plaintext;
}

.br-file__meta { font-size: 0.8125rem; color: var(--text-low); white-space: nowrap; }
.br-file.is-up .br-file__meta { color: var(--cyan-hi); font-weight: 700; }
.br-file.is-failed .br-file__meta { color: var(--c-red-300); white-space: normal; }

.br-file .br-x { position: relative; width: 36px; height: 36px; border-radius: 10px; box-shadow: none; background: none; }
.br-file .br-x::after { content: ""; position: absolute; inset: -4px; }

.br-file__bar {
  position: absolute;
  inset-inline: 14px;
  bottom: 6px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(194, 205, 232, 0.14);
}

.br-file__bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cyan-hi), var(--cyan));
  transform: scaleX(var(--p, 0));
  transform-origin: right center;
  transition: transform 300ms linear;
}

html[dir="ltr"] .br-file__bar span { transform-origin: left center; }

.br-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 14px;
  border-radius: 14px;
  outline: 1.5px dashed rgba(194, 205, 232, 0.5);
  outline-offset: -1.5px;
  text-align: center;
  cursor: pointer;
  transition: outline-color 160ms ease, background-color 160ms ease;
}

.br-drop__ic { width: 24px; height: 24px; margin-bottom: 4px; color: var(--cyan-hi); }
.br-drop b { font-weight: 800; }
.br-drop span span { font-size: 0.875rem; color: var(--text-low); }
.br-drop > span { display: grid; gap: 2px; }
.br-drop__touch,
.br-drop__here { display: none !important; }

.br-drop-card.is-over .br-drop__desk,
.br-drop-card.is-over .br-drop__touch { display: none !important; }
.br-drop-card.is-over .br-drop__here { display: grid !important; color: var(--cyan-hi); }
.br-drop-card.is-over .br-drop { outline-color: var(--cyan-hi); background: rgba(0, 196, 204, 0.06); }

.br-drop:has(.br-sr:focus-visible) {
  outline: 3px solid var(--cyan-hi);
  outline-offset: 2px;
}

@media (hover: none), (pointer: coarse) {
  .br-drop__desk { display: none !important; }
  .br-drop__touch { display: grid !important; }
}

@media (hover: hover) and (pointer: fine) {
  .br-drop:hover { outline-color: rgba(125, 240, 244, 0.7); background: rgba(0, 196, 204, 0.04); }
}

.br-linkadd { display: grid; gap: 8px; }

.br-linkadd__l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-mid);
}

.br-linkadd__l svg { width: 16px; height: 16px; color: var(--cyan-hi); }

.br-linkadd__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.br-linkadd__row .field__control { min-height: 48px; }
.br-linkadd__go { min-height: 48px; background: rgba(0, 196, 204, 0.14); color: var(--cyan-hi); box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.42); }

.br-fine {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-low);
}

/* --- The review ------------------------------------------------------------------------------ */

.br-sum { display: grid; gap: 10px; }

.br-acc {
  border-radius: 14px;
  background: rgba(7, 11, 26, 0.45);
  box-shadow: inset 0 0 0 1px var(--br-line);
}

.br-acc[open] { box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.32); }

.br-acc summary {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
}

.br-acc summary::-webkit-details-marker { display: none; }

.br-acc__ok {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cyan);
}

.br-acc__ok svg { width: 15px; height: 15px; color: var(--ink); }
.br-acc.is-empty .br-acc__ok { background: none; box-shadow: inset 0 0 0 1.5px var(--br-line-hi); }
.br-acc.is-empty .br-acc__ok svg { visibility: hidden; }

.br-acc__t { font-weight: 800; }

.br-acc__peek {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--text-low);
  text-align: end;
}

.br-acc__peek.is-over { color: var(--cyan-hi); font-weight: 700; }

.br-acc__chev {
  width: 18px;
  height: 18px;
  color: var(--text-low);
  transition: transform 200ms var(--ease-out-strong);
}

.br-acc[open] .br-acc__chev { transform: rotate(180deg); }

.br-acc__body {
  display: grid;
  gap: 16px;
  padding: 4px 16px 16px;
  padding-inline-start: 54px;
}

.br-acc__dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}

.br-acc__dl div { min-width: 0; }
.br-acc__dl .is-wide { grid-column: 1 / -1; }

.br-acc__dl dt {
  font-size: 0.8125rem;
  color: var(--text-low);
}

.br-acc__dl dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
  line-height: 1.55;
}

.br-acc__dl .br-flag { margin-inline-start: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--cyan-hi); }

.br-acc__edit {
  justify-self: start;
  gap: 8px;
  background: rgba(0, 196, 204, 0.12);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.42);
  color: var(--cyan-hi);
}

.br-acc__edit svg { width: 16px; height: 16px; }

.br-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(7, 11, 26, 0.45);
  box-shadow: inset 0 0 0 1px var(--br-line);
  cursor: pointer;
}

.br-check .br-box { margin-top: 2px; }
.br-check__t { font-size: 0.9375rem; line-height: 1.6; color: var(--text-mid); }
.is-invalid > .br-check { box-shadow: inset 0 0 0 1.5px var(--c-red-400); }

.br .form-fine { font-size: 0.8125rem; }

/* --- The foot of the card -------------------------------------------------------------------- */

.br-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: clamp(28px, 4vh, 40px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--br-line);
}

.br-foot__note,
.br-foot__copy {
  order: 2;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-low);
}

.br-foot__btns {
  order: 1;
  display: flex;
  gap: 10px;
}

.br-foot .btn { min-height: 52px; }
.br-foot__rev { order: 0; width: 100%; margin: 0 0 -6px; }
.br-back { padding: 0 22px; }
.br-next .br-arrow { margin-inline-start: 10px; }
.br-next.is-busy { opacity: 0.7; cursor: progress; }

#brFix { margin-top: 20px; }

/* --- After sending --------------------------------------------------------------------------- */

.br-done {
  width: min(100%, 1100px);
  margin-inline: auto;
}

.br-done .br-title:focus { outline: none; }

.br-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(0, 196, 204, 0.12);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.45);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cyan-hi);
}

.br-pill svg { width: 16px; height: 16px; }

.br-done__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(28px, 5vh, 48px);
}

.br-left { padding: clamp(22px, 3vw, 34px); }
.br-left__title, .br-next-steps__title { margin: 0; font-size: 1.375rem; font-weight: 800; }
.br-left__sub { margin: 6px 0 18px; color: var(--text-mid); }

.br-hw {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.br-hw__i {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(7, 11, 26, 0.45);
  box-shadow: inset 0 0 0 1px var(--br-line);
}

.br-hw__box {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--br-line-hi);
}

.br-hw__box svg { width: 15px; height: 15px; color: var(--ink); visibility: hidden; }
.br-hw__i.is-done { background: rgba(0, 196, 204, 0.08); box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.3); }
.br-hw__i.is-done .br-hw__box { background: var(--cyan); box-shadow: none; }
.br-hw__i.is-done .br-hw__box svg { visibility: visible; }
.br-hw__i.is-done .br-hw__d { display: none; }
.br-hw__body { display: grid; gap: 2px; }
.br-hw__t { font-weight: 700; }
.br-hw__d { font-size: 0.875rem; color: var(--text-low); }
.br-hw__tag { font-size: 0.8125rem; font-weight: 700; color: var(--cyan-hi); }

.br-done__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.br-done__btns svg { width: 20px; height: 20px; margin-inline-end: 10px; }

.br-next-steps { display: grid; gap: 14px; }

.br-next-steps__list li {
  align-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(7, 11, 26, 0.45);
  box-shadow: inset 0 0 0 1px var(--br-line);
}

.br-next-steps__list li > span:last-child { display: grid; gap: 2px; }
.br-next-steps__list b { color: var(--text); }
.br-next-steps__list li > span:last-child > span { font-size: 0.875rem; color: var(--text-low); }
.br-cleared { margin: 0; font-size: 0.875rem; color: var(--text-low); }

/* --- Narrower screens ------------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .br-intro { grid-template-columns: minmax(0, 1fr); }
  .br-done__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .br { padding-top: calc(64px + 28px); }

  /* The rail becomes one line: where you are, and how far */
  .br-rail__list { display: none; }
  .br-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .br-rail__count { grid-row: 1; grid-column: 1 / -1; margin: 0 0 10px; }
  .br-rail__bar { grid-column: 1 / -1; margin-top: 0; }
  .br-rail__name { font-weight: 800; color: var(--text); }

  .br-bar__meta { display: none; }

  .br-step { grid-template-columns: minmax(0, 1fr); }
  .br-step > .br-field--half { grid-column: 1 / -1; }
  .br-step__head { grid-template-columns: minmax(0, 1fr); }
  .br-step__n { display: none; }
  .br-step__sub { grid-column: 1; }

  .br-types,
  .br-budgets,
  .br-devs,
  .br-chips--grid,
  .br-grid,
  .br-drops,
  .br-facts,
  .br-acc__dl { grid-template-columns: minmax(0, 1fr); }

  .br-type { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding-inline-end: 52px; }
  .br-type__ic { grid-row: 1 / span 2; align-self: center; }
  .br-type__t { margin-top: 0; }
  .br-tick { top: 50%; margin-top: -13px; }
  .br-bud { padding-inline-end: 52px; }

  .br-row--link { grid-template-columns: minmax(0, 1fr) 48px; padding: 12px; }
  .br-row__ref { grid-template-columns: minmax(0, 1fr); }
  .br-row--qa { grid-template-columns: minmax(0, 1fr) 48px; padding: 12px; }
  .br-row__n { display: none; }

  .br-acc summary { grid-template-columns: 26px minmax(0, 1fr) 20px; }
  .br-acc__peek { grid-column: 2; grid-row: 2; text-align: start; }
  .br-acc__chev { grid-column: 3; grid-row: 1; }
  .br-acc__body { padding-inline-start: 16px; }

  .br-foot__btns { width: 100%; }
  .br-next { flex: 1; }
  .br-foot__note, .br-foot__copy { width: 100%; text-align: center; }

  .br-file { grid-template-columns: 20px minmax(0, 1fr) 36px; }
  .br-file__meta { grid-column: 2; grid-row: 2; }
  .br-file .br-x { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 760px) {
  html.br-on .wa { display: none; }
}

/* --- Motion: less of it, or none ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .br-step.is-in,
  .br-tip.is-open { animation: none; }
}

html.no-motion .br-step.is-in,
html.no-motion .br-tip.is-open { animation: none; }
html.no-motion .br * { transition-duration: 0ms !important; }

/* The colour modes of the accessibility menu: the choices keep a visible edge */
@media (forced-colors: active) {
  .br-type, .br-bud, .br-dev, .br-chip, .br-opt, .br-drop, .br-acc { border: 1px solid CanvasText; }
  .br-sr:checked ~ .br-box, .br-sr:checked ~ .br-tick { forced-color-adjust: none; background: Highlight; }
  .br .field__control, .br-q, .br-x { border: 1px solid CanvasText; }
  .br-rail__bar { border: 1px solid CanvasText; }
  .br-rail__bar span { forced-color-adjust: none; background: Highlight; }
}