@font-face {
  font-family: "GeistSans";
  src: url("/fonts/geist-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Editorial";
  src: url("/fonts/editorial-ultralight.woff2") format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Editorial";
  src: url("/fonts/editorial-ultralight-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 200;
  font-display: swap;
}

:root {
  --font-sans: "GeistSans", Arial, Helvetica, sans-serif;
  --font-heading: "Editorial", Georgia, serif;

  --c-bg: #0c0c0c;
  --c-surface: #111111;
  --c-surface-muted: #161616;
  --c-surface-raised: #1b1b1b;
  --c-ink: #f2f1ed;
  --c-text: #d7d4cf;
  --c-muted: #9d9992;
  --c-subtle: #6f6b66;
  --c-placeholder: #69645e;
  --c-line: rgba(242, 241, 237, 0.12);
  --c-line-strong: rgba(242, 241, 237, 0.2);
  --c-line-hover: rgba(242, 241, 237, 0.38);

  --c-navy: #0c0c0c;
  --c-navy-hover: #181818;
  --c-accent: #e01b28;
  --c-accent-strong: #ff2938;
  --c-accent-deep: #410306;
  --c-accent-soft: rgba(224, 27, 40, 0.12);
  --c-accent-softer: rgba(224, 27, 40, 0.06);
  --c-accent-ink: #ff606a;
  --c-gold: #c5a064;
  --c-offwhite: #f2f1ed;

  --c-danger: #ff4f58;
  --c-danger-hover: #ff6d74;
  --c-danger-soft: rgba(255, 79, 88, 0.1);
  --c-warning: #d9b35f;
  --c-warning-soft: rgba(217, 179, 95, 0.09);
  --c-warning-line: rgba(217, 179, 95, 0.35);
  --c-whatsapp: #25d366;
  --c-whatsapp-hover: #34e476;
  --c-whatsapp-ink: #04150b;

  --ring: 0 0 0 3px rgba(224, 27, 40, 0.23);
  --ring-danger: 0 0 0 3px rgba(255, 79, 88, 0.18);
  --outline-focus: 1px dashed rgba(242, 241, 237, 0.72);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --shadow-xs: none;
  --shadow-sm: 0 14px 40px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 28px 70px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 42px 110px rgba(0, 0, 0, 0.42);

  --container: 1320px;
  --container-narrow: 960px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 76px;

  --ease-out: cubic-bezier(0.43, 0.195, 0.02, 1);
  --ease-sharp: cubic-bezier(0.8, 0, 0, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  --pointer-x: 50vw;
  --pointer-y: 20vh;
}

@media (max-width: 640px) {
  :root { --header-h: 70px; }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

#app {
  display: flex;
  flex: 1;
  flex-direction: column;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a { color: inherit; }

[data-autofocus]:focus { outline: none; }

.icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.skip-link:focus { transform: none; }

.noscript {
  max-width: 560px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}

.main {
  position: relative;
  flex: 1;
  outline: none;
  overflow-x: clip;
}

.header,
.footer { flex: none; }

.header__meta,
.save-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.header__meta .icon,
.save-status .icon { color: var(--c-accent-strong); }

.header__meta--success {
  color: var(--c-accent-strong);
  font-weight: 600;
}

.save-status.is-warning,
.save-status.is-warning .icon { color: var(--c-warning); }

.progress--header .progress__bar { border-radius: 0 3px 3px 0; }

.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--dur) var(--ease-out);
}

.btn:focus-visible {
  outline: var(--outline-focus);
  outline-offset: 2px;
}

.btn--primary:hover .icon:last-child { transform: translateX(3px); }
.btn--ghost:hover .icon:first-child { transform: translateX(-2px); }
.btn--link .icon { width: 16px; height: 16px; }
.btn--whatsapp .icon { width: 20px; height: 20px; }
.btn[hidden] { display: none; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 16px);
  color-scheme: dark;
  background: var(--c-bg);
  scroll-behavior: smooth;
}

body {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  flex-direction: column;
  overflow-x: clip;
  background:
    radial-gradient(32rem 32rem at var(--pointer-x) var(--pointer-y), rgba(129, 3, 12, 0.105), transparent 70%),
    #0b0b0b;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 360;
  line-height: 1.6;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("/images/forged-carbon.jpg");
  background-size: 720px auto;
  background-position: center top;
  opacity: 0.035;
  mix-blend-mode: screen;
  content: "";
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.018) 50%, transparent 100%),
    radial-gradient(70% 40% at 50% 0%, rgba(255,255,255,.025), transparent 75%);
  content: "";
}

::selection { background: var(--c-accent); color: #fff; }

h1, h2, h3 {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-heading);
  font-synthesis: none;
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  font-family: var(--font-sans);
}

:focus-visible { outline: var(--outline-focus); outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  z-index: 100;
  padding: 10px 16px;
  border: 1px solid var(--c-line-strong);
  background: var(--c-offwhite);
  color: #111;
  border-radius: 0;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}

.eyebrow,
.hub-kicker {
  color: var(--c-accent-strong);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--c-line);
  padding-top: env(safe-area-inset-top);
  background: rgba(12,12,12,.82);
  background: color-mix(in srgb, #0c0c0c 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}

.header::before {
  position: absolute;
  right: var(--gutter);
  bottom: -1px;
  left: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,27,40,.42), transparent 70%);
  opacity: .35;
  content: "";
}

.header__inner {
  display: flex;
  height: var(--header-h);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--c-offwhite);
  text-decoration: none;
}

.brand__mark {
  width: 72px;
  height: 34px;
  flex: none;
  overflow: visible;
  fill: var(--c-offwhite);
  transition: transform var(--dur) var(--ease-out);
}

.brand__letters text {
  fill: var(--c-offwhite);
  font-family: var(--font-sans);
  font-size: 11.6px;
  font-weight: 700;
  letter-spacing: 0;
}

.brand__divider {
  width: 1px;
  height: 20px;
  background: var(--c-line-strong);
}

.brand__product {
  padding: 0;
  border: 0;
  color: var(--c-muted);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.brand:hover .brand__mark { transform: none; }

.header__aside {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
  color: var(--c-muted);
}
.header__site-link,
.header__counter,
.save-status,
.header__meta {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.header__site-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--c-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.header__site-link:hover { color: var(--c-offwhite); }
.header__site-link .icon { width: 13px; height: 13px; }

.save-status { gap: 8px; }
.save-status .icon,
.header__meta .icon { color: var(--c-accent-strong); }
.header__counter {
  display: inline-flex;
  min-width: auto;
  padding: 6px 9px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  color: var(--c-offwhite);
  font-variant-numeric: tabular-nums;
}

.progress--header {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 0;
  background: transparent;
}
.progress--header .progress__bar {
  border-radius: 0 3px 3px 0;
}

body[data-screen="wizard"] .main::before,
body[data-screen="review"] .main::before,
body[data-screen="done"] .main::before {
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34rem 34rem at var(--pointer-x) var(--pointer-y), rgba(102,3,10,.08), transparent 70%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: auto, 76px 76px, 76px 76px;
  content: "";
}

.footer {
  border-top: 1px solid var(--c-line);
  background: #090909;
}
.footer__inner {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-block: 11px;
  color: #77716b;
  font-size: .61rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer__brand {
  display: inline-flex;
  width: max-content;
  gap: 10px;
  align-items: center;
  justify-self: start;
  color: #a8a39d;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.footer__brand:hover { color: var(--c-offwhite); }
.footer__mark {
  width: 44px;
  height: 22px;
  fill: currentColor;
}
.footer__mark .brand__letters text {
  fill: currentColor;
  font-family: var(--font-sans);
  font-size: 11.6px;
  font-weight: 700;
}
.footer__product {
  justify-self: center;
  color: #aaa49e;
  font-weight: 650;
  white-space: nowrap;
}
.footer__product i {
  margin-right: 7px;
  color: var(--c-accent-strong);
  font-style: normal;
}
.footer__year {
  justify-self: end;
  color: #77716b;
  white-space: nowrap;
}

.btn {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 20px;
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--c-offwhite);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .14em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.btn::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 70%);
  transform: translateX(-102%);
  transition: transform .55s var(--ease-out);
  content: "";
}

@media (hover:hover) and (pointer:fine) {
  .btn:hover { transform: translateY(-1px); border-color: rgba(242,241,237,.48); }
  .btn:hover::before { transform: translateX(0); }
}

.btn:active { transform: translateY(0) scale(.99); }
.btn--lg { min-height: 54px; padding-inline: 24px; }
.btn--primary {
  border-color: #e71f2d;
  background: linear-gradient(135deg, #b90915 0%, #e51e2b 58%, #9f0710 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 14px 44px rgba(143,0,9,.16);
  color: #fff;
}
.btn--primary:hover { border-color: #ff5963; background-color: var(--c-accent); }
.btn--secondary,
.btn--ghost { background: rgba(255,255,255,.018); color: var(--c-text); }
.btn--whatsapp { border-color: rgba(37,211,102,.55); background: rgba(37,211,102,.12); color: #79f3a6; }
.btn--whatsapp:hover { background: rgba(37,211,102,.19); border-color: #25d366; color: #adffc9; }
.btn--danger { border-color: rgba(255,79,88,.45); background: rgba(255,79,88,.08); color: #ff9096; }
.btn--text,
.btn--link {
  min-height: 42px;
  padding-inline: 2px;
  border: 0;
  background: transparent;
  color: var(--c-muted);
  overflow: visible;
}
.btn--text::before,
.btn--link::before { display: none; }
.btn--text:hover,
.btn--link:hover { color: var(--c-offwhite); transform: none; }
.btn--danger-text { color: #b76a6f; }
.btn--block { width: 100%; }

@media (max-width: 1023px) {
  .header__counter { display: inline-flex; }
}

@media (max-width: 820px) {
  body { background: #0c0c0c; }
  .header__site-link span { display: none; }
}

body[data-screen="wizard"] .header,
body[data-screen="review"] .header,
body[data-screen="done"] .header {
  border-bottom-color: var(--c-line);
  background: rgba(12,12,12,.86);
  background: color-mix(in srgb, #0c0c0c 86%, transparent);
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }

  .container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  .header__inner { height: var(--header-h); }
  .header::before { left: 20px; right: 20px; }
  .brand { gap: 10px; }
  .brand__mark { width: 62px; height: 30px; }
  .brand__divider { height: 16px; }
  .brand__product {
    display: inline-block;
    font-size: .58rem;
    letter-spacing: .15em;
  }
  .save-status span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .header__aside { gap: 9px; }
  .header__counter { font-size: .58rem; letter-spacing: .08em; }
  .header__site-link { font-size: 0; }
  .header__site-link .icon { width: 15px; height: 15px; }
  .hub-kicker { font-size: .62rem; }

  .footer__inner {
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .footer__mark { width: 38px; height: 19px; }
  .footer__product { font-size: .54rem; letter-spacing: .11em; }
  .footer__year { font-size: .54rem; letter-spacing: .08em; }
}
.progress {
  position: relative;
  height: 2px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(255,255,255,.08);
}

.progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--progress, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, #6f050c, var(--c-accent-strong));
  box-shadow: 0 0 24px rgba(224,27,40,.45);
  transition: width var(--dur-slow) var(--ease-out);
}

.progress--thin {
  height: 2px;
}

.tech-logos {
  min-width: 0;
}

.tech-logos__title {
  margin: 0;
  color: var(--c-subtle);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tech-logos__viewport {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.tech-logos__track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: tech-marquee 26s linear infinite;
}

.tech-logos__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0 24px 0 0;
  list-style: none;
}

.tech-logos__item {
  --brand: var(--c-ink);
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 30px;
  color: #85807a;
  opacity: .78;
  transition:
    color var(--dur) ease,
    opacity var(--dur) ease,
    transform var(--dur) var(--ease-out);
}

.tech-logos__icon {
  width: 24px;
  height: 24px;
}

.tech-logos__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tech-logos__item:hover {
  color: var(--brand);
  opacity: 1;
  transform: translateY(-2px);
}

.tech-logos__item[data-tech="html5"] { --brand: #e34f26; }
.tech-logos__item[data-tech="css"] { --brand: #663399; }
.tech-logos__item[data-tech="javascript"] { --brand: #d4b80b; }
.tech-logos__item[data-tech="typescript"] { --brand: #3178c6; }
.tech-logos__item[data-tech="react"] { --brand: #149eca; }
.tech-logos__item[data-tech="nextdotjs"] { --brand: #d7d7d7; }
.tech-logos__item[data-tech="nodedotjs"] { --brand: #5fa04e; }
.tech-logos__item[data-tech="vite"] { --brand: #9135ff; }
.tech-logos__item[data-tech="figma"] { --brand: #f24e1e; }
.tech-logos__item[data-tech="github"] { --brand: #d7d7d7; }
.tech-logos__item[data-tech="cloudflare"] { --brand: #f38020; }
.tech-logos__item[data-tech="hostinger"] { --brand: #673de6; }

@keyframes tech-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .tech-logos__track {
    width: auto;
    animation: none;
    transform: none;
  }

  .tech-logos__group {
    flex-wrap: wrap;
  }

  .tech-logos__group[aria-hidden="true"] {
    display: none;
  }
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 clamp(26px, 5vw, 58px) 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255,79,88,.28);
  border-radius: 0;
  background: rgba(255,79,88,.07);
  color: #ff9ca1;
  font-size: 0.9375rem;
}

.notice .icon {
  margin-top: 3px;
}

.notice--warning {
  border-color: rgba(217,179,95,.28);
  background: rgba(217,179,95,.07);
  color: #ddc58b;
}

.badge {
  padding: 3px 10px;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--warning {
  border: 1px solid var(--c-warning-line);
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: rgba(255,255,255,.025);
  color: var(--c-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tag__swatch {
  flex: none;
  width: 36px;
  height: 12px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(15, 20, 48, 0.08);
}

.dialog {
  width: 100%;
  max-width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: rgba(0,0,0,.78);
  color: var(--c-text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.dialog::backdrop {
  background: rgba(15, 20, 48, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in var(--dur) ease;
}

.dialog__panel {
  padding: 28px;
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  background: #111;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  animation: dialog-in var(--dur) var(--ease-out);
}

.dialog__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: rgba(224,27,40,.08);
  color: #ff5963;
}

.dialog__icon--danger {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.dialog__icon .icon {
  width: 22px;
  height: 22px;
}

.dialog__title {
  margin-top: 16px;
  color: var(--c-offwhite);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 200;
}

.dialog__message {
  margin-top: 8px;
  color: var(--c-muted);
}

.dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  border-top-color: var(--c-line);
}

@media (max-width: 480px) {
  .dialog__panel {
    padding: 24px 20px 20px;
  }

  .dialog__actions {
    flex-direction: column;
  }

  .dialog__actions .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .tech-logos__group {
    gap: 18px;
    padding-right: 18px;
  }

  .tech-logos__item {
    width: 22px;
    height: 25px;
  }

  .tech-logos__icon {
    width: 20px;
    height: 20px;
  }

}
.enter-forward {
  animation: enter-forward .55s var(--ease-out) both;
}

.enter-back {
  animation: enter-back .55s var(--ease-out) both;
}

@keyframes enter-forward {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes enter-back {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes shake {
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}

@property --fx-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hub-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 44px;
  height: 44px;
  pointer-events: none;
  opacity: 0;
}
.hub-cursor__ring,
.hub-cursor__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .42s var(--ease-out), height .42s var(--ease-out), opacity .42s var(--ease-out), background-color .42s var(--ease-out), border-color .42s var(--ease-out);
}
.hub-cursor__ring {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(242,241,237,.2);
  background: rgba(255,255,255,.018);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hub-cursor__dot {
  width: 3px;
  height: 3px;
  background: var(--c-accent-strong);
  box-shadow: 0 0 12px rgba(245,35,49,.75);
}
.hub-cursor.is-active .hub-cursor__ring {
  width: 42px;
  height: 42px;
  border-color: rgba(245,35,49,.32);
  background: rgba(245,35,49,.06);
}
.hub-cursor.is-active .hub-cursor__dot { width: 5px; height: 5px; }

.btn--fx {
  --fx-play-state: paused;
  isolation: isolate;
}
.btn--fx::after {
  position: absolute;
  inset: -1px;
  z-index: -2;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--fx-angle), transparent 0 36%, rgba(255,255,255,.82) 48%, transparent 60% 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .32;
  animation: fx-edge-spin 5.8s linear infinite var(--fx-play-state);
  content: "";
}
.btn--fx .icon { transition: transform .45s var(--ease-out); }
.btn--fx:hover .icon { transform: translateX(4px); }

@keyframes fx-edge-spin { to { --fx-angle: 360deg; } }

@keyframes mesh-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 76px 76px, 76px 76px; }
}
@keyframes flare-breathe {
  from { transform: scale(.92) translate3d(-2%, 1%, 0); opacity: .7; }
  to { transform: scale(1.07) translate3d(2%, -1%, 0); opacity: 1; }
}
@keyframes scan-x {
  from { transform: translateX(-15vw); opacity: .45; }
  to { transform: translateX(25vw); opacity: .9; }
}
@keyframes orbit-pulse {
  0%,100% { transform: scale(.8); opacity: .45; }
  50% { transform: scale(1.2); opacity: 1; }
}

[data-reveal] { will-change: transform, opacity; }
[data-reveal].is-visible { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
  }
}

@media (max-width: 640px) {
  .hub-cursor { display: none; }
}

.motion-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 220;
  max-width: min(240px, calc(100vw - 24px));
  padding: 7px 10px 6px;
  border: 1px solid rgba(242,241,237,.16);
  background: rgba(10,10,10,.94);
  box-shadow: 0 16px 46px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.025);
  color: #dcd8d2;
  font-size: .58rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 100%;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.motion-tooltip::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,35,49,.75), transparent);
  content: "";
}

.motion-tooltip.is-visible {
  opacity: 1;
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .btn--fx::after { animation: none; }
}
.field-slot {
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: 1fr;
  min-width: 0;
  transition:
    grid-template-rows var(--dur-slow) var(--ease-out),
    opacity var(--dur) ease;
}

.field-slot--half {
  grid-column: span 1;
}

.field-slot__inner {
  min-height: 0;
  margin: -6px;
  padding: 6px;
  overflow: hidden;
}

.field-slot.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.field-group-title {
  grid-column: 1 / -1;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-group-title:not(:first-child) {
  margin-top: 8px;
}

.field {
  min-width: 0;
  margin: 0;
  padding: 0 0 28px;
  border: 0;
}

.field__label {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  color: var(--c-ink);
  font-size: 0.96875rem;
  font-weight: 600;
  line-height: 1.4;
}

.field__required {
  padding-left: 3px;
  white-space: nowrap;
  color: var(--c-accent-strong);
  font-weight: 700;
}

.field__hint {
  margin: -2px 0 12px;
  color: var(--c-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  color: var(--c-danger);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  animation: fade-slide-in var(--dur) var(--ease-out);
}

.field__error[hidden] {
  display: none;
}

.field__error-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md);
  appearance: none;
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1.5;
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.input::placeholder {
  color: var(--c-placeholder);
  opacity: 1;
}

.input:hover {
  border-color: var(--c-line-hover);
}

.input:focus {
  border-color: var(--c-accent-strong);
  box-shadow: var(--ring);
  outline: none;
}

.input--textarea {
  min-height: 112px;
  overflow: hidden;
  resize: none;
}

.field.has-error .input {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

.field.has-error .input:focus {
  box-shadow: var(--ring-danger);
}

.select {
  position: relative;
}

.select__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  color: var(--c-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

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

.choice {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.choice__control {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  box-shadow: var(--shadow-xs);
  color: var(--c-text);
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}

.choice:hover .choice__control {
  border-color: var(--c-line-hover);
  background: var(--c-surface-muted);
}

.choice:active .choice__control {
  transform: scale(0.985);
}

.choice__input:focus-visible + .choice__control {
  border-color: var(--c-accent-strong);
  box-shadow: var(--ring);
}

.choice__input:checked + .choice__control {
  border-color: var(--c-accent-strong);
  background: var(--c-accent-softer);
  box-shadow: inset 0 0 0 1px var(--c-accent-strong);
  color: var(--c-ink);
}

.choice__input:checked:focus-visible + .choice__control {
  box-shadow: inset 0 0 0 1px var(--c-accent-strong), var(--ring);
}

.choice__indicator {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #bfc5d2;
  border-radius: 6px;
  background: var(--c-surface);
  color: #fff;
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.choice__input[type="radio"] + .choice__control .choice__indicator {
  border-radius: 50%;
}

.choice__indicator .icon {
  width: 12px;
  height: 12px;
  stroke-width: 3.2;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity var(--dur-fast) ease,
    transform var(--dur) var(--ease-out);
}

.choice__input:checked + .choice__control .choice__indicator {
  border-color: var(--c-accent-strong);
  background: var(--c-accent-strong);
}

.choice__input:checked + .choice__control .choice__indicator .icon {
  opacity: 1;
  transform: none;
}

.choice__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.choice__label {
  font-weight: 500;
  line-height: 1.35;
}

.choice__desc {
  color: var(--c-muted);
  font-size: 0.84375rem;
  line-height: 1.45;
}

.field.has-error .choice__control {
  border-color: rgba(194, 55, 47, 0.5);
}

.choice--chips .choice__control,
.choice--pills .choice__control {
  min-height: 44px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
}

.choice--chips .choice__indicator,
.choice--pills .choice__indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

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

.choice--cards .choice__control {
  align-items: flex-start;
  height: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
}

.choice--cards .choice__indicator {
  margin-top: 1px;
}

.choice--cards .choice__label {
  color: var(--c-ink);
  font-weight: 600;
}

.choices--palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.choice--palette .choice__control {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  height: 100%;
  padding: 8px 8px 10px;
  border-radius: var(--radius-lg);
}

.palette__swatch {
  display: block;
  height: 44px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 20, 48, 0.08);
}

.palette__swatch svg {
  display: block;
  width: 100%;
  height: 100%;
}

.palette__swatch--empty {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #f3f4f7 0 8px, #eceef2 8px 16px);
  color: var(--c-muted);
}

.palette__swatch--empty .icon {
  width: 20px;
  height: 20px;
}

.choice__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.choice--palette .choice__label {
  color: var(--c-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.choice--palette .choice__indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.choice--palette .choice__desc {
  padding: 0 4px;
  font-size: 0.78125rem;
}

.choice--palette-empty {
  grid-column: span 2;
}

.choice--palette-empty .choice__control {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 2px 12px;
}

.choice--palette-empty .palette__swatch {
  grid-row: 1 / span 2;
  height: 100%;
  min-height: 52px;
}

.choice--palette-empty .choice__row {
  padding: 4px 2px 0 0;
}

.choice--palette-empty .choice__desc {
  padding: 0 2px 0 0;
}

@media (max-width: 640px) {
  .field-slot--half {
    grid-column: 1 / -1;
  }

  .choices--cards {
    grid-template-columns: 1fr;
  }

  .choices--palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .choice--chips,
  .choice--pills {
    max-width: 100%;
  }

  .choice--chips .choice__label,
  .choice--pills .choice__label {
    overflow-wrap: anywhere;
  }
}

.field-slot {
  position: relative;
  margin-bottom: 28px;
}

.field-slot:not(.is-collapsed) .field-slot__inner {
  height: auto;
  overflow: visible;
}

.field-slot.is-collapsed .field-slot__inner {
  height: 100%;
  overflow: hidden;
}

.field {
  padding-bottom: 0;
}

.field-group-title {
  position: relative;
  margin: 6px 0 22px;
  padding: 24px 0 13px 18px;
  border-top: 1px solid rgba(242,241,237,.1);
  border-bottom: 1px solid rgba(242,241,237,.07);
  color: #d8d4cf;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: 1;
}

.field-group-title::before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--c-accent-strong), rgba(245,35,49,0));
  box-shadow: 0 0 16px rgba(245,35,49,.28);
  content: "";
}

.field__label {
  margin-bottom: 0;
  color: #e9e6e1;
  font-size: .84rem;
  font-weight: 540;
  line-height: 1.45;
  letter-spacing: -.012em;
}

.field__hint {
  max-width: 62ch;
  margin: 7px 0 0;
  color: #706c66;
  font-size: .72rem;
  line-height: 1.55;
}

.input {
  width: 100%;
  min-height: 56px;
  margin-top: 11px;
  padding: 14px 15px;
  border: 1px solid rgba(242,241,237,.13);
  border-radius: 0;
  appearance: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
    #0f0f0f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015),
    0 12px 34px rgba(0,0,0,.08);
  color: var(--c-offwhite);
  caret-color: var(--c-accent-strong);
  font-size: .94rem;
  font-weight: 380;
  line-height: 1.45;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.input::placeholder {
  color: #5b5752;
  opacity: 1;
  letter-spacing: 0;
  transition: color .32s var(--ease-out), opacity .32s var(--ease-out), letter-spacing .32s var(--ease-out);
}

.field-slot:focus-within .field__label {
  color: var(--c-offwhite);
  transform: translateX(3px);
}

.input:focus::placeholder {
  color: #77716b;
  opacity: .38;
  letter-spacing: .018em;
}

.input:hover {
  border-color: rgba(242,241,237,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.008)),
    #101010;
}

.input:focus {
  border-color: rgba(245,35,49,.72);
  outline: 0;
  background:
    linear-gradient(180deg, rgba(245,35,49,.035), rgba(255,255,255,.006)),
    #101010;
  box-shadow:
    inset 2px 0 0 rgba(245,35,49,.75),
    0 0 0 1px rgba(245,35,49,.08),
    0 14px 36px rgba(0,0,0,.12);
}

.input--textarea {
  min-height: 122px;
  padding: 15px 16px;
  overflow: hidden;
  line-height: 1.55;
  resize: none;
}

.field.has-error .input,
.field.has-error .select__trigger {
  border-color: rgba(255,79,88,.72);
  background:
    linear-gradient(180deg, rgba(255,79,88,.045), rgba(255,79,88,.012)),
    #100d0e;
  box-shadow:
    inset 2px 0 0 rgba(255,79,88,.72),
    0 0 0 1px rgba(255,79,88,.035);
}

.field.has-error .input:focus,
.field.has-error .select__trigger:focus-visible {
  border-color: #ff626c;
  box-shadow:
    inset 2px 0 0 #ff626c,
    0 0 0 2px rgba(255,79,88,.11);
}

.field__error {
  gap: 7px;
  margin-top: 8px;
  color: #ff7f87;
  font-size: .69rem;
  font-weight: 520;
  line-height: 1.45;
}

.field__error-icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  flex: none;
}

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--c-offwhite) !important;
  caret-color: var(--c-offwhite);
  -webkit-box-shadow: 0 0 0 1000px #0f0f0f inset !important;
  box-shadow: 0 0 0 1000px #0f0f0f inset !important;
  border-color: rgba(242,241,237,.18) !important;
  transition: background-color 9999s ease-out 0s;
}

.select {
  position: relative;
  margin-top: 11px;
}

.select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.select__trigger {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(242,241,237,.13);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
    #0f0f0f;
  color: var(--c-offwhite);
  font-size: .94rem;
  font-weight: 390;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.select__trigger:hover {
  border-color: rgba(242,241,237,.27);
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)),
    #101010;
}

.select__trigger:focus-visible,
.select.is-open .select__trigger {
  border-color: rgba(245,35,49,.72);
  outline: 0;
  background:
    linear-gradient(180deg, rgba(245,35,49,.035), rgba(255,255,255,.006)),
    #101010;
  box-shadow:
    inset 2px 0 0 rgba(245,35,49,.75),
    0 0 0 1px rgba(245,35,49,.08);
}

.select__trigger.is-placeholder .select__value {
  color: #5b5752;
  transition: color .32s var(--ease-out), opacity .32s var(--ease-out), transform .32s var(--ease-out);
}

.select.is-open .select__trigger.is-placeholder .select__value {
  color: #77716b;
  opacity: .48;
  transform: translateX(3px);
}

.select__trigger .select__chevron {
  position: static;
  width: 15px;
  height: 15px;
  flex: none;
  color: #77716b;
  transform: none;
  transition: transform .32s var(--ease-out), color .32s var(--ease-out);
}

.select.is-open .select__trigger .select__chevron {
  color: #d8d4cf;
  transform: rotate(180deg);
}

.select__menu {
  position: fixed;
  z-index: 220;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(242,241,237,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    #101010;
  box-shadow: 0 28px 70px rgba(0,0,0,.34);
}

.select__menu[hidden] {
  display: none;
}

.select__menu--portal {
  max-width: calc(100vw - 20px);
  overscroll-behavior: contain;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.select__menu--portal.is-opening-up {
  transform-origin: bottom center;
}

body.is-select-open .step-card__nav {
  pointer-events: none;
}

.select__list {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242,241,237,.24) transparent;
}

.select__list::-webkit-scrollbar { width: 7px; }
.select__list::-webkit-scrollbar-track { background: transparent; }
.select__list::-webkit-scrollbar-thumb { background: rgba(242,241,237,.18); }

.select__option {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid rgba(242,241,237,.065);
  background: transparent;
  color: #aaa59f;
  font-size: .79rem;
  font-weight: 430;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    padding-left var(--dur) var(--ease-out);
}

.select__option:last-child { border-bottom: 0; }

.select__option:hover,
.select__option:focus-visible {
  outline: 0;
  background: rgba(255,255,255,.035);
  color: var(--c-offwhite);
  padding-left: 17px;
}

.select__option[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(245,35,49,.105), rgba(245,35,49,.015));
  color: var(--c-offwhite);
}

.select__option[aria-selected="true"]::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 2px;
  background: var(--c-accent-strong);
  box-shadow: 0 0 12px rgba(245,35,49,.5);
  content: "";
}

.select__option-check {
  display: grid;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
  color: var(--c-accent-strong);
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.select__option-check .icon {
  width: 13px;
  height: 13px;
}

.select__option[aria-selected="true"] .select__option-check {
  opacity: 1;
  transform: scale(1);
}

.choices {
  margin-top: 13px;
  gap: 8px;
}

.choice__control {
  position: relative;
  min-height: 50px;
  overflow: hidden;
  border-color: rgba(242,241,237,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.004)),
    #0f0f0f;
}

.choice--chips .choice__control,
.choice--pills .choice__control,
.choice--cards .choice__control,
.choice--palette .choice__control {
  min-height: 50px;
  border-radius: 0;
}

.choice--cards .choice__label,
.choice--palette .choice__label {
  color: #d5d1cb;
  font-weight: 470;
}

.choice--palette .choice__label {
  font-size: .82rem;
}

.choice--chips .choice__indicator,
.choice--palette .choice__indicator {
  border-radius: 0;
}

.palette__swatch {
  box-shadow: none;
}

.choice__label {
  color: #d5d1cb;
}

.choice:hover .choice__control {
  border-color: rgba(242,241,237,.27);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006)),
    #101010;
}

.choice__input:checked + .choice__control {
  border-color: rgba(245,35,49,.58);
  background:
    linear-gradient(135deg, rgba(245,35,49,.105), rgba(245,35,49,.02)),
    #100d0e;
  box-shadow: inset 2px 0 0 rgba(245,35,49,.66);
}

.field.has-error .choice__control {
  border-color: rgba(255,79,88,.34);
}

.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 clamp(26px, 5vw, 58px) 20px;
  padding: 12px 14px;
  border: 0;
  border-left: 2px solid rgba(255,79,88,.82);
  background: linear-gradient(90deg, rgba(255,79,88,.09), rgba(255,79,88,.018) 72%, transparent);
  color: #ff969c;
  font-size: .73rem;
  font-weight: 500;
  line-height: 1.5;
  animation: shake 360ms var(--ease-out);
}

.form-alert[hidden] { display: none; }

.form-alert .icon {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
}

@media (max-width: 640px) {
  .field-slot {
    margin-bottom: 22px;
  }

  .field-group-title {
    margin-bottom: 20px;
    padding-top: 22px;
    font-size: 1.45rem;
  }

  .field__label {
    font-size: .82rem;
  }

  .field__hint {
    font-size: .69rem;
  }

  .input,
  .select__trigger {
    min-height: 52px;
    font-size: 1rem;
  }

  .choice__control,
  .choice--chips .choice__control,
  .choice--pills .choice__control,
  .choice--cards .choice__control,
  .choice--palette .choice__control {
    min-height: 52px;
  }

  .choice--palette-empty {
    grid-column: 1 / -1;
  }

  .input--textarea {
    min-height: 116px;
  }

  .select__list {
    max-height: min(252px, 38vh);
    max-height: min(252px, 38svh);
  }

  .select__option {
    min-height: 44px;
    padding-block: 9px;
    font-size: .78rem;
  }

  .form-alert {
    margin: 0 20px 16px;
  }

}

body[data-screen="wizard"] .step-card__desc {
  color: #aaa49e;
  font-size: .93rem;
  line-height: 1.62;
}

body[data-screen="wizard"] .step-card__legend {
  color: #918b84;
  font-size: .74rem;
  line-height: 1.5;
}

body[data-screen="wizard"] .field__label {
  color: #f0ede8;
  transition: color .32s var(--ease-out), transform .32s var(--ease-out), opacity .32s var(--ease-out);
  font-size: .88rem;
  font-weight: 560;
  line-height: 1.48;
}

body[data-screen="wizard"] .field__hint {
  max-width: 64ch;
  margin: 8px 0 0;
  color: #aaa49d;
  font-size: .79rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.006em;
}

body[data-screen="wizard"] .input::placeholder {
  color: #8d877f;
  opacity: 1;
}

body[data-screen="wizard"] .input:focus::placeholder {
  color: #736e68;
}

body[data-screen="wizard"] .select__trigger.is-placeholder .select__value {
  color: #8d877f;
}

body[data-screen="wizard"] .choice__desc {
  color: #9d9790;
  font-size: .75rem;
  line-height: 1.5;
}

body[data-screen="wizard"] .field__error {
  margin-top: 9px;
  color: #ff9ca2;
  font-size: .76rem;
  font-weight: 520;
  line-height: 1.5;
}

body[data-screen="wizard"] .form-alert {
  color: #ffadb2;
  font-size: .77rem;
  line-height: 1.55;
}

body[data-screen="wizard"] .field.has-error .field__hint {
  color: #b4aaa5;
}

@media (max-width: 640px) {
  body[data-screen="wizard"] .step-card__desc {
    font-size: .9rem;
    line-height: 1.58;
  }

  body[data-screen="wizard"] .step-card__legend {
    font-size: .73rem;
  }

  body[data-screen="wizard"] .field__label {
    font-size: .87rem;
    line-height: 1.5;
  }

  body[data-screen="wizard"] .field__hint {
    margin-top: 7px;
    color: #aaa49d;
    font-size: .78rem;
    line-height: 1.55;
  }

  body[data-screen="wizard"] .input,
  body[data-screen="wizard"] .select__trigger {
    font-size: .96rem;
  }

  body[data-screen="wizard"] .input::placeholder,
  body[data-screen="wizard"] .select__trigger.is-placeholder .select__value {
    color: #938d85;
  }

  body[data-screen="wizard"] .choice__desc {
    font-size: .76rem;
  }

  body[data-screen="wizard"] .field__error,
  body[data-screen="wizard"] .form-alert {
    font-size: .77rem;
  }
}

.field-slot::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--c-accent), rgba(245,35,49,.12), transparent 70%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
  content: "";
}
.field-slot:focus-within::after { transform: scaleX(1); }
.choice__control::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.035) 48%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .7s var(--ease-out);
  content: "";
}
.choice:hover .choice__control::after { transform: translateX(110%); }

@media (max-width: 640px) {
  .choices--cards,
  .choices--palette {
    grid-template-columns: 1fr;
  }

  .field-slot {
    margin-bottom: 24px;
  }
}

.choices,
.choices--cards,
.choices--palette {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.choices > .choice,
.choices--cards > .choice,
.choices--palette > .choice {
  display: flex;
  min-width: 0;
  flex: 1 1 170px;
}

.choices--cards > .choice {
  flex-basis: 240px;
}

.choices--palette > .choice {
  flex-basis: 180px;
}

.choices > .choice > .choice__control,
.choices--cards > .choice > .choice__control,
.choices--palette > .choice > .choice__control {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}

.choice--palette-empty {
  grid-column: auto;
  flex-basis: 360px;
}

@media (max-width: 640px) {
  .choices > .choice {
    flex-basis: calc(50% - 4px);
    min-width: 132px;
  }

  .choices--cards > .choice {
    flex-basis: 100%;
    min-width: 100%;
  }

  .choices--palette > .choice {
    flex-basis: calc(50% - 4px);
    min-width: 132px;
  }

  .choices--palette > .choice--palette-empty {
    flex-basis: 100%;
    min-width: 100%;
  }
}
body[data-screen="wizard"] {
  background: #080808;
}

body[data-screen="wizard"]::before {
  opacity: 0;
}

body[data-screen="wizard"] .main {
  background:
    radial-gradient(38rem 28rem at 92% 8%, rgba(122,3,13,.14), transparent 68%),
    linear-gradient(180deg, rgba(5,5,5,.22), rgba(7,7,7,.52)),
    url("/images/forged-carbon.jpg"),
    #080808;
  background-size: cover, cover, 620px auto, auto;
  background-position: center, center, center top, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-blend-mode: normal, normal, screen, normal;
}

.wizard {
  display: grid;
  grid-template-columns: 215px minmax(0, 850px);
  justify-content: center;
  align-items: start;
  gap: clamp(34px, 4vw, 58px);
  max-width: calc(1165px + var(--gutter) * 2);
  padding-block: 38px 72px;
}

.wizard__aside {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top) + 28px);
  padding: 18px 16px;
  border: 1px solid rgba(242,241,237,.055);
  background:
    linear-gradient(180deg, rgba(6,6,6,.84), rgba(7,7,7,.91)),
    url("/images/forged-carbon.jpg"),
    #080808;
  background-size: cover, 430px auto, auto;
  background-position: center, center top, center;
  background-repeat: no-repeat, repeat, no-repeat;
  background-blend-mode: normal, soft-light, normal;
  box-shadow:
    0 24px 60px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.018);
}

.wizard__main {
  min-width: 0;
}

.stepper__head {
  margin-bottom: 14px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.stepper__eyebrow {
  color: #85807a;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.stepper__percent {
  margin: 5px 0 10px;
  color: var(--c-muted);
  font-size: .77rem;
}

.stepper__percent strong {
  margin-right: 4px;
  color: var(--c-offwhite);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.stepper__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stepper__item {
  position: relative;
}

.stepper__item:not(:last-child)::after {
  position: absolute;
  top: 29px;
  bottom: -7px;
  left: 10px;
  width: 1px;
  background: var(--c-line);
  content: "";
}

.stepper__item.is-done:not(:last-child)::after {
  background: rgba(224,27,40,.28);
}

.stepper__link {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  color: #85807a;
  font-size: .74rem;
  font-weight: 450;
  line-height: 1.3;
  text-decoration: none;
  transition:
    color var(--dur-fast) ease,
    transform var(--dur) var(--ease-out);
}

a.stepper__link:hover {
  color: var(--c-offwhite);
  transform: translateX(2px);
}

.stepper__marker {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  background: #0b0b0b;
  color: var(--c-subtle);
  font-size: .56rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.stepper__label {
  padding-top: 1px;
  line-height: 1.45;
}

.stepper__marker .icon {
  width: 12px;
  height: 12px;
  stroke-width: 3.2;
}

.stepper__item.is-done .stepper__marker {
  border-color: rgba(224,27,40,.6);
  background: rgba(224,27,40,.14);
  color: #ff6c76;
}

.stepper__item.is-current .stepper__link {
  color: var(--c-offwhite);
  font-weight: 530;
}

.stepper__item.is-current .stepper__marker {
  border-color: var(--c-accent);
  background: var(--c-accent);
  box-shadow: 0 0 24px rgba(224,27,40,.2);
  color: #fff;
}

.stepper__item.is-pending .stepper__marker {
  border-color: rgba(217,179,95,.5);
  background: rgba(217,179,95,.08);
  color: var(--c-warning);
}

.stepper__item.is-locked .stepper__link {
  color: #3e3c39;
  cursor: default;
}

.stepper__note {
  display: flex;
  gap: 9px;
  margin-top: 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--c-line);
  color: #85807a;
  font-size: .71rem;
  line-height: 1.5;
}

.stepper__note .icon {
  margin-top: 2px;
  color: #8c151d;
}

.step-card {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background:
    radial-gradient(520px circle at 92% 8%, rgba(118,3,11,.12), transparent 66%),
    linear-gradient(145deg, rgba(8,8,8,.7), rgba(8,8,8,.86)),
    url("/images/forged-carbon.jpg"),
    #0d0d0d;
  background-size: cover, cover, 500px auto, auto;
  background-position: center, center, center top, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-blend-mode: normal, normal, soft-light, normal;
  box-shadow:
    0 30px 90px rgba(0,0,0,.26),
    inset 0 1px rgba(255,255,255,.025);
}

.step-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 1px;
  background: var(--c-accent);
  box-shadow: 0 0 30px rgba(224,27,40,.55);
  content: "";
}

.step-card::after {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(225deg, rgba(245,35,49,.06), transparent 48%);
  clip-path: polygon(100% 0, 100% 100%, 99.3% 100%, 99.3% .7%, 0 .7%, 0 0);
  content: "";
}

.step-card__header {
  padding: 38px 46px 0;
}

.step-card__eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--c-accent-strong);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.step-card__of,
.step-card__percent {
  color: #85807a;
}

.step-card__percent {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.step-card__title {
  max-width: 670px;
  margin-top: 14px;
  color: var(--c-offwhite);
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 4.3vw, 4.2rem);
  font-weight: 200;
  line-height: .96;
  letter-spacing: -.055em;
  outline: none;
}

.step-card__desc {
  max-width: 650px;
  margin-top: 14px;
  color: var(--c-muted);
  font-size: .87rem;
  line-height: 1.55;
}

.step-card__legend {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--c-line);
  color: var(--c-subtle);
  font-size: .7rem;
}

.step-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0;
  column-gap: 24px;
  padding: 30px 46px 8px;
}

.step-card__nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 46px 28px;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  background: rgba(255,255,255,.008);
}

.btn--nav {
  min-width: 160px;
}

@media (max-width: 1023px) {
  .wizard {
    grid-template-columns: 190px minmax(0,1fr);
    gap: 32px;
  }

  .wizard__aside {
    display: block;
  }
}

@media (max-width: 820px) {
  .wizard {
    display: block;
    padding-top: 26px;
  }

  .wizard__aside {
    display: none;
  }

  .step-card {
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  body[data-screen="wizard"] {
    background: #080808;
  }

  body[data-screen="wizard"] .main {
    background:
      radial-gradient(28rem 20rem at 100% 6%, rgba(122,3,13,.15), transparent 68%),
      linear-gradient(180deg, rgba(5,5,5,.18), rgba(7,7,7,.48)),
      url("/images/forged-carbon.jpg"),
      #080808;
    background-size: cover, cover, 430px auto, auto;
    background-position: center, center, center top, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-blend-mode: normal, normal, screen, normal;
  }

  .wizard {
    padding-top: 0;
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: 54px;
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .step-card {
    border: 1px solid var(--c-line);
    background:
      radial-gradient(420px circle at 92% 5%, rgba(118,3,11,.1), transparent 66%),
      linear-gradient(145deg, rgba(8,8,8,.68), rgba(8,8,8,.84)),
      url("/images/forged-carbon.jpg"),
      #0d0d0d;
    background-size: cover, cover, 400px auto, auto;
    background-position: center, center, center top, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-blend-mode: normal, normal, soft-light, normal;
    box-shadow: 0 28px 80px rgba(0,0,0,.22);
  }

  .step-card__header {
    padding: 26px 20px 0;
  }

  .step-card__title {
    margin-top: 13px;
    font-size: clamp(2.45rem, 11vw, 3.4rem);
  }

  .step-card__desc {
    font-size: .82rem;
  }

  .step-card__fields {
    grid-template-columns: 1fr;
    padding: 22px 20px 4px;
  }

  .step-card__nav {
    align-items: stretch;
    flex-direction: column;
    padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
    background: rgba(11,11,11,.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .step-card__nav .btn {
    width: 100%;
    justify-content: space-between;
  }

  .btn--nav {
    flex: 1;
    min-width: 0;
  }
}
.review-item--wide { grid-column: 1 / -1; }

.review-empty {
  color: var(--c-subtle);
  font-style: italic;
}

.review-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body[data-screen="review"] {
  background: #080808;
}

body[data-screen="review"]::before {
  opacity: 0;
}

body[data-screen="review"] .main {
  background:
    radial-gradient(40rem 30rem at 94% 10%, rgba(122,3,13,.13), transparent 70%),
    linear-gradient(180deg, rgba(5,5,5,.22), rgba(7,7,7,.52)),
    url("/images/forged-carbon.jpg"),
    #080808;
  background-size: cover, cover, 620px auto, auto;
  background-position: center, center, center top, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-blend-mode: normal, normal, screen, normal;
}

.review { padding-block: 48px 84px; }
.app-error { padding-block: clamp(54px, 7vw, 92px) clamp(74px, 9vw, 120px); }

body[data-screen="done"] {
  overflow: hidden;
  background: #080808;
}

body[data-screen="done"]::before,
body[data-screen="done"]::after {
  opacity: 0;
}

body[data-screen="done"] .main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(46rem 30rem at 50% 38%, rgba(129,3,12,.12), transparent 70%),
    linear-gradient(180deg, rgba(5,5,5,.42), rgba(5,5,5,.7)),
    url("/images/forged-carbon.jpg"),
    #080808;
  background-size: cover, cover, 520px auto, auto;
  background-position: center, center, center top, center;
  background-blend-mode: normal, normal, screen, normal;
}

body[data-screen="done"] #app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.done {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 1180px;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: auto auto auto;
  align-content: space-evenly;
  gap: clamp(14px, 2vh, 24px);
  padding-block: clamp(22px, 3.4vh, 38px);
}

.done::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  content: "";
}

.app-error__actions {
  margin-top: 24px;
}
.page-head { max-width: 820px; margin-bottom: 38px; padding: 0; }
.page-head .eyebrow { margin-bottom: 14px; }
.page-head__title {
  color: var(--c-offwhite);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 200;
  line-height: .98;
  letter-spacing: -.055em;
}
.page-head__lead { max-width: 650px; margin-top: 18px; color: var(--c-muted); font-size: .96rem; line-height: 1.6; overflow-wrap: anywhere; }
.page-head__lead strong { color: var(--c-offwhite); font-weight: 520; }
.review-card {
  border: 1px solid var(--c-line);
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(8,8,8,.48), rgba(8,8,8,.72)),
    url("/images/forged-carbon.jpg"),
    rgba(7,7,7,.9);
  background-size: cover, 500px auto, auto;
  background-position: center, center top, center;
  background-repeat: no-repeat, repeat, no-repeat;
  background-blend-mode: normal, screen, normal;
  box-shadow: var(--shadow-md);
}
.review-section { padding: 34px clamp(24px, 5vw, 48px); border-bottom: 1px solid var(--c-line); }
.review-section + .review-section { border-top: 0; }
.review-section:last-child { border-bottom: 0; }
.review-section.is-pending { box-shadow: inset 2px 0 0 rgba(217,179,95,.45); }
.review-section__head { gap: 14px; }
.review-section__num {
  display: inline-flex;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--c-accent-strong);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
}
.review-section__title { color: var(--c-offwhite); font-family: var(--font-heading); font-size: 1.65rem; font-weight: 200; letter-spacing: -.035em; }
.review-section__edit { margin-left: auto; min-height: 32px; color: var(--c-muted); font-size: .62rem; }
.review-list { margin-top: 28px; gap: 0 32px; }
.review-item { padding: 17px 0; border-top: 1px solid rgba(242,241,237,.075); }
.review-item dt { color: #8d877f; font-size: .61rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.review-item dd { margin-top: 7px; color: #d4d0ca; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.review-missing { color: var(--c-warning); }
.review-text { color: #cac6c0; }
.review-footer {
  gap: 28px;
  margin: 24px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--c-line);
}
.review-footer__note { color: var(--c-muted); font-size: .77rem; }
.review-footer__note .icon { color: var(--c-accent-strong); }

.done-card {
  position: relative;
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .82fr);
  gap: 16px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.done-card__primary,
.done-card__aside {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(242,241,237,.105);
  background:
    linear-gradient(145deg, rgba(255,255,255,.022), rgba(255,255,255,.004)),
    rgba(7,7,7,.82);
  box-shadow:
    0 28px 80px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.025);
}

.done-card__primary::before,
.done-card__aside::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 1px;
  background: linear-gradient(90deg, rgba(245,35,49,.82), rgba(245,35,49,.12), transparent);
  box-shadow: 0 0 16px rgba(245,35,49,.18);
  content: "";
}

.done-card__aside {
  display: flex;
  align-items: center;
  background:
    radial-gradient(26rem 18rem at 100% 0%, rgba(108,3,12,.09), transparent 68%),
    linear-gradient(160deg, rgba(255,255,255,.016), rgba(255,255,255,.002)),
    rgba(6,6,6,.76);
}

.file-card {
  display: flex;
  min-height: 126px;
  align-items: center;
  gap: 22px;
  padding: 26px clamp(28px, 3vw, 38px);
  border: 0;
  border-bottom: 1px solid rgba(242,241,237,.085);
  background:
    linear-gradient(100deg, rgba(224,27,40,.055), transparent 62%),
    rgba(255,255,255,.006);
}
.file-card__icon {
  display: flex;
  width: 60px;
  height: 70px;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(224,27,40,.38);
  border-radius: 0;
  background: rgba(224,27,40,.09);
  color: #ff6c76;
  box-shadow: inset 0 0 22px rgba(224,27,40,.035);
}
.file-card__icon .icon { width: 23px; height: 23px; }
.file-card__icon b {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.file-card__info {
  display: grid;
  min-width: 0;
  gap: 5px;
}
.file-card__name {
  color: var(--c-offwhite);
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 200;
  letter-spacing: -.03em;
}
.file-card__meta {
  color: #96908a;
  font-size: .72rem;
  line-height: 1.45;
  letter-spacing: .005em;
}

.done-actions {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: 12px;
  margin: 0;
  padding: 24px clamp(28px, 3vw, 38px) 30px;
}

.done-actions .btn--primary,
.done-actions .btn--whatsapp {
  min-width: 0;
  grid-column: span 1;
}

.done-actions .btn--whatsapp {
  padding-inline: 16px;
  font-size: .72rem;
  line-height: 1.15;
  letter-spacing: .055em;
  white-space: normal;
}

.done-actions .btn--whatsapp span {
  min-width: 0;
  text-wrap: balance;
}

.done-actions .btn--secondary {
  grid-column: 1 / -1;
}
.done-actions .btn,
.done-actions .btn--lg {
  min-height: 58px;
  font-size: .76rem;
  letter-spacing: .13em;
}
.done-actions .btn:disabled {
  cursor: wait;
  opacity: .52;
  filter: saturate(.72);
  pointer-events: none;
}

.done-status {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 90;
  max-width: min(440px, calc(100vw - 28px));
  min-height: 0;
  padding: 9px 12px;
  border: 1px solid rgba(148,203,165,.22);
  background: rgba(9,13,10,.94);
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
  color: #94cba5;
  font-size: .68rem;
  line-height: 1.4;
  text-align: left;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.done-status:empty { display: none; }

.delivery-note {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 24px 28px;
}

.delivery-note__item {
  display: grid;
  gap: 10px;
  padding: 20px 0;
}

.delivery-note__item + .delivery-note__item {
  border-top: 1px solid rgba(242,241,237,.075);
}

.delivery-note__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.delivery-note__icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  background: #111;
  color: var(--c-subtle);
}

.delivery-note__icon .icon {
  width: 17px;
  height: 17px;
}

.delivery-note__item:first-child .delivery-note__icon {
  border-color: rgba(37,211,102,.34);
  background: rgba(37,211,102,.07);
  color: #72e99d;
}

.delivery-note__heading strong {
  color: #e5e1dc;
  font-size: .86rem;
  font-weight: 620;
  line-height: 1.25;
}

.delivery-note__copy {
  padding-left: 43px;
  color: #969089;
  font-size: .72rem;
  line-height: 1.55;
}

.done__secondary {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid rgba(242,241,237,.08);
  background: rgba(7,7,7,.5);
}
.done__secondary .btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  font-size: .69rem;
}

.done .tech-logos {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 13px 0 12px;
  border-top: 1px solid rgba(242,241,237,.075);
  border-bottom: 1px solid rgba(242,241,237,.045);
  text-align: center;
}

.done .tech-logos__title {
  margin-bottom: 10px;
  color: #918b85;
  font-size: .57rem;
  line-height: 1.15;
  letter-spacing: .16em;
  text-align: center;
  white-space: nowrap;
}

.done .tech-logos__viewport {
  width: 100%;
}

.done .tech-logos__item {
  border: 0;
  background: transparent;
}

.done .tech-logos__icon {
  filter: grayscale(1) brightness(1.55);
  opacity: .72;
}

@media (min-width: 901px) {
  .file-card {
    min-height: 158px;
    gap: 30px;
    padding: 34px clamp(34px, 3.4vw, 48px);
  }

  .file-card__icon {
    width: 74px;
    height: 84px;
  }

  .file-card__icon .icon {
    width: 30px;
    height: 30px;
  }

  .file-card__icon b {
    font-size: .7rem;
    letter-spacing: .12em;
  }

  .file-card__info {
    gap: 10px;
  }

  .file-card__name {
    max-width: 21ch;
    color: #f7f4ef;
    font-size: clamp(2.15rem, 2.7vw, 3rem);
    font-weight: 300;
    line-height: .94;
    letter-spacing: -.052em;
    text-shadow: 0 10px 34px rgba(0,0,0,.42);
  }

  .file-card__meta {
    color: #b4ada5;
    font-size: .94rem;
    font-weight: 520;
    line-height: 1.5;
    letter-spacing: .012em;
  }

  .done-actions {
    gap: 14px;
    padding: 30px clamp(34px, 3.4vw, 48px) 38px;
  }

  .done-actions .btn,
  .done-actions .btn--lg {
    min-height: 70px;
    font-size: .94rem;
    font-weight: 780;
    letter-spacing: .09em;
  }

  .done-actions .btn .icon,
  .done-actions .btn--lg .icon {
    width: 19px;
    height: 19px;
  }

  .done-actions .btn--whatsapp {
    padding-inline: 18px;
    font-size: .9rem;
    letter-spacing: .035em;
  }

  .done-actions .btn--secondary {
    min-height: 62px;
    font-size: .88rem;
    letter-spacing: .08em;
  }

  .delivery-note {
    padding: 30px 34px;
  }

  .delivery-note__item {
    gap: 14px;
    padding: 28px 0;
  }

  .delivery-note__heading {
    gap: 14px;
  }

  .delivery-note__icon {
    width: 42px;
    height: 42px;
  }

  .delivery-note__icon .icon {
    width: 21px;
    height: 21px;
  }

  .delivery-note__heading strong {
    color: #f2eee8;
    font-size: 1.14rem;
    font-weight: 720;
    line-height: 1.22;
    letter-spacing: -.018em;
  }

  .delivery-note__copy {
    max-width: 35ch;
    padding-left: 56px;
    color: #b6afa7;
    font-size: .94rem;
    font-weight: 460;
    line-height: 1.68;
  }

  .done__secondary {
    gap: 14px;
    padding: 14px;
  }

  .done__secondary .btn {
    min-height: 60px;
    font-size: .88rem;
    font-weight: 730;
    letter-spacing: .085em;
  }

  .done .tech-logos {
    padding: 18px 0 17px;
  }

  .done .tech-logos__title {
    margin-bottom: 14px;
    color: #aaa39c;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .16em;
  }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .done-card {
    grid-template-columns: 1fr;
  }

  .done-card__aside {
    display: block;
  }
}

@media (max-width: 900px) {
  .done {
    max-width: 820px;
  }

  .done-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .done-card__aside {
    display: block;
  }

  .delivery-note {
    padding: 10px 24px 18px;
  }

  .done-actions {
    grid-template-columns: 1fr;
  }

  .done-actions .btn--primary,
  .done-actions .btn--whatsapp,
  .done-actions .btn--secondary {
    grid-column: 1;
  }
}

@media (max-width: 640px) {
  .done {
    align-content: space-evenly;
    gap: 12px;
    padding-block: 16px;
  }

  .done-card {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .file-card {
    min-height: 94px;
    gap: 14px;
    padding: 15px 14px;
  }

  .file-card__icon {
    width: 50px;
    height: 58px;
  }

  .file-card__name {
    font-size: 1.28rem;
    line-height: 1.05;
  }

  .file-card__meta {
    font-size: .64rem;
    line-height: 1.45;
  }

  .done-actions {
    gap: 9px;
    padding: 14px 14px 10px;
  }

  .done-actions .btn,
  .done-actions .btn--lg {
    min-height: 50px;
    padding-inline: 13px;
    font-size: .68rem;
    letter-spacing: .11em;
  }

  .delivery-note {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 8px 16px 14px;
  }

  .delivery-note__item {
    gap: 8px;
    padding: 15px 0;
  }

  .delivery-note__heading {
    gap: 10px;
  }

  .delivery-note__icon {
    width: 30px;
    height: 30px;
  }

  .delivery-note__icon .icon {
    width: 16px;
    height: 16px;
  }

  .delivery-note__heading strong {
    font-size: .72rem;
  }

  .delivery-note__copy {
    padding-left: 40px;
    font-size: .62rem;
    line-height: 1.5;
  }

  .done__secondary {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .done__secondary .btn {
    min-height: 44px;
    padding-inline: 8px;
    font-size: .61rem;
    letter-spacing: .095em;
  }

  .done .tech-logos {
    padding: 10px 0 9px;
  }

  .done .tech-logos__title {
    margin-bottom: 8px;
    font-size: .52rem;
  }

  .done-status {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(54px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px);
  }
}

@media (max-width: 640px) {
  body[data-screen="review"] .main {
    background:
      radial-gradient(28rem 20rem at 100% 8%, rgba(122,3,13,.14), transparent 68%),
      linear-gradient(180deg, rgba(5,5,5,.18), rgba(7,7,7,.48)),
      url("/images/forged-carbon.jpg"),
      #080808;
    background-size: cover, cover, 430px auto, auto;
    background-position: center, center, center top, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-blend-mode: normal, normal, screen, normal;
  }

  .review { padding-top: 44px; }
  .done { padding-block: 8px; }
  .page-head { margin-bottom: 34px; }
  .page-head__title { font-size: clamp(3rem, 13vw, 4.8rem); }
  .review-section { padding: 28px 22px; }
  .review-section__head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .review-section__edit { margin-left: 0; }
  .review-list { grid-template-columns: 1fr; }
  .review-item--wide { grid-column: auto; }
  .review-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .review-footer__actions {
    width: 100%;
    flex-direction: column;
  }
  .review-footer__actions .btn {
    width: 100%;
    justify-content: space-between;
  }
  .file-card { align-items: flex-start; }
  .file-card__name { overflow-wrap: anywhere; }
  .done__secondary { align-items: stretch; }
  .done__secondary .btn { width: 100%; }
}

@media (max-height: 700px) {
  body[data-screen="done"] {
    overflow-y: auto;
  }

  body[data-screen="done"] #app,
  body[data-screen="done"] .main {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .done {
    align-content: start;
    padding-block: 18px 28px;
  }
}

@media (max-width: 820px) {
  body[data-screen="done"] .main {
    background:
      radial-gradient(30rem 22rem at 100% 18%, rgba(129,3,12,.14), transparent 68%),
      linear-gradient(180deg, rgba(5,5,5,.38), rgba(5,5,5,.72)),
      url("/images/forged-carbon.jpg"),
      #080808;
    background-size: cover, cover, 430px auto, auto;
    background-position: center, center, center top, center;
    background-blend-mode: normal, normal, screen, normal;
  }
}
.home-v4 {
  position: relative;
  display: block;
  min-height: 0;
  overflow: visible;
  background: #0b0b0b;
}

body[data-screen="home"] {
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-screen="home"] #app {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

body[data-screen="home"] .header,
body[data-screen="home"] .footer {
  flex: none;
}

body[data-screen="home"] .main {
  display: block;
  min-height: 0;
  overflow: visible;
}

.brief-hero {
  position: relative;
  height: auto;
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
  border-bottom: 1px solid rgba(242,241,237,.1);
  background:
    radial-gradient(44rem 32rem at 96% 18%, rgba(122,3,13,.16), transparent 66%),
    linear-gradient(180deg, rgba(5,5,5,.56), rgba(5,5,5,.82)),
    url("/images/forged-carbon.jpg"),
    #080808;
  background-size: cover, cover, 560px auto, auto;
  background-position: center, center, center top, center;
  background-blend-mode: normal, normal, screen, normal;
  isolation: isolate;
}

.brief-hero__texture,
.brief-hero__mesh,
.brief-hero__flare,
.brief-hero__scan {
  position: absolute;
  pointer-events: none;
}

.brief-hero__texture {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(4,4,4,.56) 0%, rgba(8,8,8,.26) 48%, rgba(8,8,8,.2) 72%, rgba(4,4,4,.58) 100%),
    radial-gradient(34rem 28rem at 82% 44%, rgba(143,4,15,.13), transparent 70%);
  opacity: 1;
}

.brief-hero__mesh {
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 60% 48%, #000 5%, transparent 82%);
  mask-image: radial-gradient(ellipse 80% 75% at 60% 48%, #000 5%, transparent 82%);
  animation: mesh-drift 18s linear infinite;
}

.brief-hero__flare { z-index: 0; border-radius: 50%; filter: blur(2px); }
.brief-hero__flare--one {
  right: -10%;
  top: 5%;
  width: min(54vw, 720px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(108,4,12,.42), rgba(68,2,7,.14) 42%, transparent 69%);
  animation: flare-breathe 7.5s ease-in-out infinite alternate;
}
.brief-hero__flare--two {
  right: 18%;
  bottom: -44%;
  width: min(36vw, 540px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(199,162,105,.075), transparent 68%);
  animation: flare-breathe 10s 1.2s ease-in-out infinite alternate-reverse;
}

.brief-hero__scan {
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 1px;
  background: linear-gradient(transparent 2%, rgba(245,35,49,.05) 25%, rgba(245,35,49,.52) 51%, rgba(245,35,49,.05) 76%, transparent 98%);
  box-shadow: 0 0 48px rgba(245,35,49,.13);
  animation: scan-x 8.5s ease-in-out infinite alternate;
}

.brief-hero::before,
.brief-hero::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}
.brief-hero::before {
  top: 0;
  bottom: 0;
  left: var(--gutter);
  width: 1px;
  background: linear-gradient(transparent 4%, rgba(242,241,237,.1) 18%, rgba(242,241,237,.1) 82%, transparent 96%);
}
.brief-hero::after {
  right: var(--gutter);
  bottom: 26%;
  width: min(26vw, 330px);
  height: 1px;
  background: linear-gradient(90deg, rgba(245,35,49,.7), rgba(245,35,49,.08), transparent);
  box-shadow: 0 0 18px rgba(245,35,49,.2);
}

.brief-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100svh - var(--header-h));
  height: 100%;
  grid-template-rows: auto 1fr auto;
  padding-top: clamp(10px, 1.6vh, 16px);
  padding-bottom: clamp(9px, 1.5vh, 15px);
}

.brief-hero__topline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #85807a;
  font-size: .58rem;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.brief-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 410px);
  align-items: center;
  gap: clamp(32px, 7vw, 112px);
  min-height: 0;
}

.brief-hero__copy {
  max-width: 760px;
  padding-block: clamp(8px, 1.5vh, 16px);
}

.brief-hero__title {
  margin-top: 14px;
  color: var(--c-offwhite);
  font-family: var(--font-heading);
  font-size: clamp(3.8rem, min(7.1vw, 9.4vh), 7rem);
  font-weight: 200;
  line-height: .84;
  letter-spacing: -.064em;
}
.brief-hero__title-line {
  display: block;
  overflow: hidden;
  padding: .05em .06em .09em 0;
  margin-bottom: -.09em;
}
.brief-hero__title-line > span { display: inline-block; will-change: transform; }
.brief-hero__title-line.is-settled { overflow: visible; }
.brief-hero__title em { color: var(--c-accent-strong); font-weight: 200; }

.brief-hero__lead {
  max-width: 590px;
  margin-top: clamp(11px, 1.7vh, 18px);
  color: #a19c96;
  font-size: clamp(.94rem, 1.05vw, 1.08rem);
  font-weight: 350;
  line-height: 1.58;
  letter-spacing: -.018em;
}

.brief-resume {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(9px, 1.35vh, 14px);
  color: #8f8a84;
  font-size: .75rem;
}
.brief-resume .icon { color: var(--c-accent-strong); }
.brief-resume strong { color: #d8d4ce; font-weight: 520; }

.brief-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: clamp(12px, 1.7vh, 18px);
}
.brief-link .icon { width: 12px; height: 12px; transition: transform .4s var(--ease-out); }
.brief-link:hover .icon { transform: translateY(3px); }

.brief-hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(33vh, 320px);
  transform-style: preserve-3d;
  will-change: transform;
}
.brief-hero__visual::before {
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111,2,10,.24), transparent 69%);
  filter: blur(18px);
  content: "";
}

.brief-orbit {
  position: relative;
  width: min(27vw, 34vh, 320px);
  aspect-ratio: 1;
  border: 1px solid rgba(242,241,237,.09);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform-style: preserve-3d;
  will-change: transform;
  transition: filter .24s var(--ease-out);
}

.brief-orbit.is-dragging {
  cursor: grabbing;
  filter: brightness(1.08);
}

.brief-orbit__sphere {
  position: absolute;
  inset: 18%;
  overflow: hidden;
  border: 1px solid rgba(224,27,40,.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,118,124,.28), transparent 19%),
    radial-gradient(circle at 44% 38%, rgba(157,10,21,.96) 0%, #62050d 42%, #310206 72%, #120102 100%);
  box-shadow:
    inset -26px -22px 42px rgba(0,0,0,.56),
    inset 12px 9px 22px rgba(255,255,255,.055),
    0 0 54px rgba(142,4,15,.26);
  transform: translateZ(18px);
  pointer-events: none;
}

.brief-orbit__sphere::before,
.brief-orbit__sphere::after {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  content: "";
}

.brief-orbit__sphere::before {
  border-left: 1px solid rgba(242,241,237,.11);
  border-right: 1px solid rgba(242,241,237,.11);
  box-shadow:
    -26px 0 0 -25px rgba(242,241,237,.12),
    26px 0 0 -25px rgba(242,241,237,.12);
}

.brief-orbit__sphere::after {
  inset: 23% 8%;
  border-top: 1px solid rgba(242,241,237,.11);
  border-bottom: 1px solid rgba(242,241,237,.09);
  box-shadow:
    0 -25px 0 -24px rgba(242,241,237,.1),
    0 25px 0 -24px rgba(242,241,237,.08);
}
.brief-orbit::before,
.brief-orbit::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}
.brief-orbit::before {
  inset: 12%;
  border: 1px dashed rgba(242,241,237,.09);
}
.brief-orbit::after {
  inset: 38%;
  border: 1px solid rgba(245,35,49,.28);
  box-shadow: 0 0 40px rgba(245,35,49,.12), inset 0 0 30px rgba(245,35,49,.05);
}
.brief-orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.brief-orbit__ring--1 { inset: 21%; border: 1px solid rgba(242,241,237,.08); }
.brief-orbit__ring--2 { inset: 5%; border-top: 1px solid rgba(245,35,49,.68); border-right: 1px solid transparent; border-bottom: 1px solid rgba(242,241,237,.06); border-left: 1px solid transparent; }
.brief-orbit__ring--3 { inset: 29%; border-top: 1px solid rgba(199,162,105,.5); border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-left: 1px solid rgba(199,162,105,.08); }
.brief-orbit__axis { position: absolute; top: 50%; left: 50%; background: rgba(242,241,237,.07); transform: translate(-50%,-50%); }
.brief-orbit__axis--x { width: 126%; height: 1px; }
.brief-orbit__axis--y { width: 1px; height: 126%; }
.brief-orbit__pulse { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent-strong); box-shadow: 0 0 0 4px rgba(245,35,49,.08), 0 0 20px rgba(245,35,49,.85); }
.brief-orbit__pulse--1 { top: 7.5%; left: 48.5%; animation: orbit-pulse 2.2s ease-in-out infinite; }
.brief-orbit__pulse--2 { right: 17.5%; bottom: 18%; animation: orbit-pulse 2.8s .7s ease-in-out infinite; }

.brief-orbit__core {
  position: absolute;
  inset: 38%;
  z-index: 2;
  display: grid;
  place-content: center;
  text-align: center;
}
.brief-orbit__core span,
.brief-orbit__core small {
  display: block;
  color: #77716b;
  font-size: .5rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .2em;
}
.brief-orbit__core strong {
  display: block;
  margin: 5px 0 7px;
  color: var(--c-offwhite);
  font-family: var(--font-heading);
  font-size: 2.9rem;
  font-weight: 200;
  line-height: .85;
}
.brief-orbit__label {
  position: absolute;
  color: #5e5954;
  font-size: .49rem;
  font-weight: 650;
  letter-spacing: .19em;
}
.brief-orbit__label--a { top: 12%; right: -4%; }
.brief-orbit__label--b { bottom: 7%; left: 6%; }
.brief-orbit__label--c { top: 47%; left: -10%; color: #9c4a50; }

.brief-hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(8px, 1.2vh, 12px);
  border-top: 1px solid rgba(242,241,237,.08);
}
.brief-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; color: #85807a; font-size: .56rem; font-weight: 620; letter-spacing: .14em; text-transform: uppercase; }
.brief-meta span { display: inline-flex; align-items: center; gap: 7px; }
.brief-meta b { color: #aaa49e; font-weight: 650; }

.brief-quick {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(242,241,237,.08);
  border-bottom: 1px solid rgba(242,241,237,.08);
  background:
    radial-gradient(46rem 30rem at 94% 0%, rgba(112,3,12,.12), transparent 68%),
    linear-gradient(180deg, rgba(5,5,5,.5), rgba(7,7,7,.82)),
    url("/images/forged-carbon.jpg"),
    #080808;
  background-size: cover, cover, 520px auto, auto;
  background-position: center, center, center, center;
  background-blend-mode: normal, normal, screen, normal;
}

.brief-quick::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  content: "";
}

.brief-quick__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(52px, 6vw, 82px) clamp(58px, 7vw, 92px);
}

.brief-quick__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr);
  align-items: end;
  gap: 30px 72px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(242,241,237,.1);
}

.brief-quick__head h2 {
  max-width: 11ch;
  margin-top: 8px;
  color: var(--c-offwhite);
  font-family: var(--font-heading);
  font-size: clamp(2.7rem, 4.3vw, 4.7rem);
  font-weight: 200;
  line-height: .91;
  letter-spacing: -.055em;
}

.brief-quick__head > p {
  max-width: 520px;
  justify-self: end;
  padding-bottom: 5px;
  color: #98918a;
  font-size: .88rem;
  line-height: 1.62;
}

.brief-quick__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 22px;
}

.brief-quick__item,
.brief-quick__item + .brief-quick__item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 188px;
  grid-template-columns: 46px minmax(0,1fr);
  align-content: start;
  gap: 16px;
  padding: 28px 26px 26px;
  overflow: hidden;
  border: 1px solid rgba(242,241,237,.09);
  background:
    linear-gradient(145deg, rgba(255,255,255,.022), rgba(255,255,255,.004)),
    rgba(7,7,7,.78);
  box-shadow:
    0 24px 70px rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.018);
}

.brief-quick__item::before {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(224,27,40,.68), transparent);
  transform: scaleY(.42);
  transform-origin: center;
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
  opacity: .55;
  content: "";
}

.brief-quick__item:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.brief-quick__number {
  padding-top: 4px;
  color: #b9424b;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .2em;
}

.brief-quick__copy {
  min-width: 0;
}

.brief-quick__copy h3 {
  color: #ece8e2;
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 200;
  line-height: .98;
  letter-spacing: -.04em;
}

.brief-quick__copy p {
  max-width: 34ch;
  margin-top: 10px;
  color: #8f8983;
  font-size: .78rem;
  line-height: 1.55;
}

@media (max-width: 1023px) {
  .brief-hero__grid {
    grid-template-columns: minmax(0,1fr) minmax(240px,300px);
    gap: 36px;
  }

  .brief-hero__title {
    font-size: clamp(3.75rem, min(8.4vw, 9.2vh), 5.9rem);
  }

  .brief-orbit {
    width: min(29vw, 32vh, 275px);
  }
}

@media (max-width: 820px) {
  html.home-scroll-snap {
    scroll-snap-type: y proximity;
    scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top));
  }

  body[data-screen="home"] {
    --home-mobile-footer-h: calc(54px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    background:
      linear-gradient(180deg, rgba(5,5,5,.42), rgba(5,5,5,.74)),
      url("/images/forged-carbon.jpg"),
      #080808;
    background-size: cover, 460px auto, auto;
    background-position: center, center top, center;
    background-blend-mode: normal, screen, normal;
  }

  body[data-screen="home"] #app {
    min-height: 100vh;
    min-height: 100dvh;
  }

  body[data-screen="home"] .footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    transform: translateY(0);
    opacity: 1;
    box-shadow: 0 -16px 42px rgba(0,0,0,.3);
    transition:
      transform .32s var(--ease-out),
      opacity .24s var(--ease-out);
    will-change: transform, opacity;
  }

  body[data-screen="home"] .footer.is-home-hidden {
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
  }

  body[data-screen="home"] .footer.is-home-bottom {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .home-v4 {
    padding-bottom: var(--home-mobile-footer-h);
    background: transparent;
  }

  .brief-hero,
  .brief-quick {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .brief-hero {
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top) - var(--home-mobile-footer-h));
    background:
      radial-gradient(30rem 24rem at 110% 12%, rgba(144,4,16,.24), transparent 67%),
      linear-gradient(180deg, rgba(5,5,5,.44), rgba(5,5,5,.78)),
      url("/images/forged-carbon.jpg"),
      #080808;
    background-size: cover, cover, 430px auto, auto;
    background-position: center, center, center top, center;
    background-blend-mode: normal, normal, screen, normal;
  }

  .brief-hero__texture {
    background:
      linear-gradient(105deg, rgba(255,255,255,.018), transparent 36%),
      radial-gradient(26rem 18rem at 94% 32%, rgba(224,27,40,.09), transparent 72%);
  }

  .brief-hero__mesh {
    z-index: 0;
    opacity: .42;
    animation: none;
  }

  .brief-hero__flare,
  .brief-hero__scan {
    animation: none;
  }

  .brief-hero__flare--one {
    display: block;
    top: 0;
    right: -48%;
    width: 92vw;
    opacity: .72;
  }

  .brief-hero__flare--two,
  .brief-hero__scan {
    display: none;
  }

  .brief-hero::before {
    left: max(20px, env(safe-area-inset-left));
    opacity: .5;
  }

  .brief-hero::after {
    right: max(20px, env(safe-area-inset-right));
    bottom: 20%;
    width: 36vw;
    opacity: .7;
  }

  .brief-hero__inner {
    display: flex;
    height: auto;
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top) - var(--home-mobile-footer-h));
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(24px, 5.5vw, 34px);
    padding-top: clamp(28px, 6vw, 40px);
    padding-bottom: clamp(24px, 5.5vw, 34px);
  }

  .brief-hero__topline {
    justify-content: flex-start;
    margin-bottom: 24px;
    color: #8b847d;
    font-size: .56rem;
    letter-spacing: .19em;
  }

  .brief-hero__grid {
    display: flex;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    grid-template-columns: none;
    padding: 0;
  }

  .brief-hero__copy {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .brief-hero__visual {
    display: none;
  }

  .brief-hero__title {
    max-width: 9.4ch;
    margin-top: 16px;
    font-size: clamp(4.65rem, 16.4vw, 6.2rem);
    line-height: .84;
    letter-spacing: -.072em;
  }

  .brief-hero__lead {
    max-width: 32rem;
    margin-top: 28px;
    color: #b9b2ab;
    font-size: clamp(1rem, 3.55vw, 1.12rem);
    font-weight: 390;
    line-height: 1.68;
  }

  .brief-resume {
    margin-top: 22px;
    color: #a39c95;
    font-size: .8rem;
  }

  .brief-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 20px;
    margin-top: 32px;
  }

  .brief-hero__actions .btn--primary {
    width: 100%;
    min-height: 66px;
    justify-content: space-between;
    padding-inline: 22px;
    font-size: .78rem;
    letter-spacing: .12em;
  }

  .brief-hero__actions .btn--text {
    min-height: 48px;
    padding-inline: 4px;
  }

  .brief-hero__bottom {
    flex: none;
    margin-top: 0;
    padding-top: 18px;
    border-top-color: rgba(242,241,237,.12);
  }

  .brief-meta {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(242,241,237,.1);
    background: rgba(242,241,237,.075);
    color: #918a83;
    font-size: .62rem;
  }

  .brief-meta span {
    min-height: 60px;
    padding: 14px 15px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.018), rgba(255,255,255,.004)),
      rgba(7,7,7,.9);
  }

  .brief-meta b {
    color: #e0dad3;
    font-size: .69rem;
  }

  .brief-quick {
    display: block;
    min-height: 0;
    padding-block: clamp(38px, 9vw, 58px);
    background:
      radial-gradient(30rem 22rem at 108% 4%, rgba(117,3,12,.15), transparent 68%),
      linear-gradient(180deg, rgba(5,5,5,.48), rgba(6,6,6,.8)),
      url("/images/forged-carbon.jpg"),
      #080808;
    background-size: cover, cover, 430px auto, auto;
    background-position: center, center, center, center;
    background-blend-mode: normal, normal, screen, normal;
  }

  .brief-quick__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 0;
  }

  .brief-quick__head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
    padding: 0 0 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(242,241,237,.11);
  }

  .brief-quick__head h2 {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: clamp(2.15rem, 8.8vw, 2.85rem);
    line-height: .92;
    white-space: normal;
    text-wrap: balance;
  }

  .brief-quick__head > p {
    display: block;
    width: 100%;
    max-width: 34rem;
    justify-self: start;
    margin: 0;
    color: #9c958f;
    font-size: .8rem;
    line-height: 1.62;
  }

  .brief-quick__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .brief-quick__item,
  .brief-quick__item + .brief-quick__item {
    grid-template-columns: 46px minmax(0,1fr);
    min-height: 104px;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(242,241,237,.1);
    background:
      linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.005)),
      rgba(8,8,8,.82);
    box-shadow:
      0 14px 38px rgba(0,0,0,.16),
      inset 0 1px rgba(255,255,255,.02);
  }

  .brief-quick__item:first-child {
    padding-left: 18px;
  }

  .brief-quick__item:last-child {
    border-right: 1px solid rgba(242,241,237,.1);
  }

  .brief-quick__item::before {
    top: 16px;
    bottom: 16px;
    opacity: .72;
    transform: scaleY(1);
  }

  .brief-quick__number {
    padding-top: 0;
    font-size: .6rem;
  }

  .brief-quick__copy h3 {
    font-size: 1.34rem;
  }

  .brief-quick__copy p {
    display: block;
    margin-top: 7px;
    color: #948e87;
    font-size: .75rem;
    line-height: 1.5;
  }
}

@media (max-width: 640px) {
  .brief-hero__topline {
    display: none;
  }

  .brief-hero__inner {
    gap: 24px;
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .brief-hero__copy .hub-kicker {
    font-size: .7rem;
    letter-spacing: .21em;
  }

  .brief-hero__title {
    max-width: 9.2ch;
    margin-top: 14px;
    font-size: clamp(4.45rem, 18.2vw, 5.25rem);
    line-height: .83;
  }

  .brief-hero__lead {
    margin-top: 24px;
    font-size: 1rem;
    line-height: 1.62;
  }

  .brief-resume {
    margin-top: 18px;
    font-size: .76rem;
  }

  .brief-hero__actions {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }

  .brief-hero__actions .btn--primary {
    min-height: 64px;
    font-size: .76rem;
  }

  .brief-hero__actions .btn--text {
    justify-self: start;
    min-height: 42px;
    margin-top: 0;
    font-size: .68rem;
  }

  .brief-hero__bottom {
    margin-top: 0;
    padding-top: 16px;
  }

  .brief-meta span {
    min-height: 56px;
    padding: 13px 12px;
  }

  .brief-quick {
    padding-block: 42px 48px;
  }

  .brief-quick__head {
    gap: 18px;
  }

  .brief-quick__head h2 {
    font-size: clamp(2.25rem, 10.2vw, 2.75rem);
    line-height: .9;
  }

  .brief-quick__head > p {
    max-width: 30rem;
    font-size: .78rem;
    line-height: 1.62;
  }

  .brief-quick__item,
  .brief-quick__item + .brief-quick__item {
    grid-template-columns: 40px minmax(0,1fr);
    min-height: 98px;
    gap: 13px;
    padding: 16px;
  }

  .brief-quick__item:first-child {
    padding-left: 16px;
  }

  .brief-quick__copy h3 {
    font-size: 1.24rem;
  }

  .brief-quick__copy p {
    font-size: .72rem;
  }
}

@media (max-width: 820px) and (max-height: 700px) {
  .brief-hero,
  .brief-hero__inner {
    min-height: 0;
  }

  .brief-hero__grid {
    align-items: flex-start;
  }
}

@media (max-height: 620px) {
  body[data-screen="home"] {
    overflow-y: auto;
  }

  body[data-screen="home"] #app {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body[data-screen="home"] .main,
  .home-v4 {
    overflow: visible;
  }

  .brief-hero {
    min-height: 0;
  }
}