/* firan.ai — landing v2
   Converted from the Claude Design artboard to standalone CSS.
   Inline styles + style-hover/style-active attributes from the .dc.html
   source are expressed here as real rules. */

:root {
  --acc: oklch(0.78 0.085 168);
  --mx: 50%;
  --my: 20%;

  --hair: rgba(255, 255, 255, .1);
  --t60: rgba(255, 255, 255, .6);
  --t55: rgba(255, 255, 255, .55);
  --t45: rgba(255, 255, 255, .45);
  --t40: rgba(255, 255, 255, .4);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --shell: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --band: clamp(84px, 11vw, 164px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-wrap: pretty;
  overflow-x: hidden;
}

a { color: #fff; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--acc); color: #000; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gut);
}

.band { padding-block: var(--band); }
.rule-top { border-top: 1px solid var(--hair); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--t45);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: #fff;
  color: #000;
  border-radius: 0 0 8px 0;
  font-size: 14px;
}
.skip:focus { left: 0; }

/* ---------- animations ---------- */

@keyframes fu {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 88px 88px, 88px 88px; }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(2400%); opacity: 0; }
}
@keyframes chip {
  0%, 78%, 100% { border-color: rgba(255, 255, 255, .10); background: #0A0A0A; }
  8%, 30%       { border-color: var(--acc); background: #0E100F; }
}
@keyframes dot {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.35); }
}
@keyframes flow { to { stroke-dashoffset: -32; } }

/* ---------- header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition: border-color .35s ease, background-color .35s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hdr.is-stuck {
  border-bottom-color: var(--hair);
  background-color: rgba(0, 0, 0, .6);
}
.hdr__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hdr__logo { display: flex; align-items: center; }
.hdr__logo-img { height: 21px; width: auto; display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav a {
  font-size: 14px;
  color: var(--t60);
  transition: color .2s ease;
}
.nav a:hover { color: #fff; }

/* Phones: the lockup plus four nav items overflow one line. Stack the
   header into two rows instead of hiding navigation — the section links
   stay reachable, which is the point of having them. */
@media (max-width: 620px) {
  .hdr__in {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-block: 12px;
  }
  .nav {
    width: 100%;
    justify-content: flex-start;
    gap: 16px;
  }
  .nav a { font-size: 13px; }
  .btn--pill { margin-left: auto; padding: 7px 16px; }
  .hdr__logo-img { height: 19px; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 980px;
  font-size: 15px;
  transition: transform .28s var(--ease), background-color .28s ease,
              border-color .28s ease, color .28s ease, box-shadow .28s ease;
}
.btn:active { transform: scale(.975); }

.btn--solid {
  font-weight: 500;
  padding: 14px 30px;
  background: #fff;
  color: #000;
}
.btn--solid:hover {
  color: #000;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 40px rgba(255, 255, 255, .18);
}

.btn--ghost {
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-2px);
}
.btn--ghost svg { transition: transform .3s var(--ease); }
.btn--ghost:hover svg { transform: translateY(3px); }

.btn--pill {
  font-size: 14px;
  font-weight: 500;
  padding: 9px 20px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s var(--ease), background-color .25s ease, border-color .25s ease;
}
.btn--pill:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
  transform: translateY(-1px);
}
.btn--pill:active { transform: scale(.97); }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; }

.hero__grid,
.cta__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 88px 88px;
  animation: drift 26s linear infinite;
  -webkit-mask-image: radial-gradient(115% 78% at 50% 0%, #000 0%, transparent 74%);
          mask-image: radial-gradient(115% 78% at 50% 0%, #000 0%, transparent 74%);
}

.hero__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .6s ease;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .055), transparent 70%);
}

.hero__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: .5;
  animation: scanline 9s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}

.hero__in {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(76px, 12vh, 146px) var(--gut) clamp(88px, 13vh, 158px);
}

.badge {
  opacity: 0;
  animation: fu .9s var(--ease) .05s forwards;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 980px;
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: clamp(26px, 4.5vw, 44px);
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  display: block;
  animation: dot 2.4s ease-in-out infinite;
}
.badge__txt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .7);
}

.hero__h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(38px, 6.6vw, 78px);
  line-height: 1.03;
  font-weight: 500;
  letter-spacing: -.037em;
  opacity: 0;
  animation: fu 1s var(--ease) .14s forwards;
}

.hero__sub {
  margin: clamp(24px, 3.5vw, 34px) 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .62);
  opacity: 0;
  animation: fu 1s var(--ease) .26s forwards;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: clamp(32px, 5vw, 50px);
  opacity: 0;
  animation: fu 1s var(--ease) .38s forwards;
}

/* ---------- shared section furniture ---------- */

.h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -.026em;
  max-width: 20ch;
}

.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  align-items: flex-start;
}
.split__label { flex: 0 0 auto; width: 200px; }
.split__body { flex: 1 1 min(100%, 520px); min-width: 0; }

/* ---------- problem ---------- */

.probs { display: grid; gap: 0; margin-top: clamp(36px, 5vw, 60px); }
.prob {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 8px 40px;
  padding: 26px 0;
  border-top: 1px solid var(--hair);
}
.prob:last-child { border-bottom: 1px solid var(--hair); }
.prob__t { font-size: 19px; font-weight: 500; letter-spacing: -.012em; }
.prob__d { font-size: 16px; line-height: 1.6; color: var(--t60); }

/* ---------- process ---------- */

.process__h2 { margin-bottom: clamp(46px, 7vw, 92px); max-width: 22ch; }

.pipe {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(28px, 5vw, 72px);
  align-items: flex-start;
}
.pipe__label {
  flex: 0 0 auto;
  width: 200px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--t45);
  padding-bottom: 18px;
}
.pipe__body { flex: 1 1 min(100%, 520px); min-width: 0; display: grid; gap: 0; }

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(26px, 3vw, 36px) 0;
  border-top: 1px solid var(--hair);
}
.step:last-child { border-bottom: 1px solid var(--hair); }
.step__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t40);
  padding-top: 5px;
}
.step__t { font-size: 20px; font-weight: 500; letter-spacing: -.016em; }
.step__d {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--t60);
  max-width: 52ch;
}

.agents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(186px, 100%), 1fr));
  gap: 10px;
  margin-top: 26px;
}
.agent {
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: #0A0A0A;
  padding: 15px 17px;
  animation: chip 9s ease-in-out infinite;
}
.agent__id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--acc);
  letter-spacing: .1em;
}
.agent__t { font-size: 14px; margin-top: 8px; color: rgba(255, 255, 255, .85); }

.wire { margin-top: 14px; display: block; opacity: .75; }
.wire__pulse { animation: flow 1.8s linear infinite; }

/* ---------- coverage ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 12px;
}
.card {
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: #0A0A0A;
  padding: clamp(24px, 2.8vw, 32px);
  transition: transform .35s var(--ease), border-color .35s ease, background-color .35s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .2);
  background: #0E0E0E;
}
.card svg { display: block; opacity: .9; }
.card__t {
  font-size: 18px;
  font-weight: 500;
  margin-top: 18px;
  letter-spacing: -.012em;
}
.card__d {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .58);
}

.note {
  margin: clamp(26px, 3vw, 38px) 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t45);
  max-width: 62ch;
}

/* ---------- roadmap timeline ---------- */

/* 12 quarters across 3 years. Bars are placed with --from/--to in quarter
   units, so the markup carries the dates and the CSS does the geometry. */
.tl {
  --cols: 12;
  --lab: 210px;
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
}

.tl__scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-left: var(--lab);
  border-bottom: 1px solid var(--hair);
}
.tl__year { padding-bottom: 10px; }
.tl__year + .tl__year { border-left: 1px solid var(--hair); }
.tl__year > span {
  display: block;
  padding-left: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .72);
}
.tl__q {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 6px;
}
.tl__q i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--t40);
  padding-left: 10px;
}

/* Vertical "today" marker, sitting at the start of Q1 2026. */
.tl__now {
  position: absolute;
  top: 52px;              /* below the year + quarter labels */
  bottom: 0;
  left: var(--lab);
  width: 1px;
  background: linear-gradient(180deg, var(--acc), rgba(255, 255, 255, .04));
  pointer-events: none;
}
.tl__now span {
  position: absolute;
  top: -16px;
  left: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--acc);
}

.tl__rows { display: grid; gap: 0; }

.tl__row {
  display: grid;
  grid-template-columns: var(--lab) 1fr;
  align-items: center;
  gap: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}

.tl__label { display: flex; align-items: flex-start; gap: 10px; padding-right: 20px; }
.tl__name { font-size: 17px; font-weight: 500; letter-spacing: -.014em; }
.tl__stage {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t40);
}
.tl__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  flex: none;
  margin-top: 7px;
}
.tl__dot--next { background: rgba(255, 255, 255, .38); }
.tl__dot--then {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

/* The track is the quarter grid; each bar spans from --from to --to. */
.tl__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  min-height: 34px;
  align-items: center;
  /* One faint line per quarter so bars visibly land on the scale above. */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) 100%;
}

.tl__bar {
  grid-column: calc(var(--from) + 1) / calc(var(--to) + 1);
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  min-width: 0;
  overflow: hidden;
}
.tl__bar-txt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl__bar--live {
  background: color-mix(in oklab, var(--acc) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 55%, transparent);
}
.tl__bar--live .tl__bar-txt { color: var(--acc); }

.tl__bar--next {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.tl__bar--next .tl__bar-txt { color: rgba(255, 255, 255, .72); }

.tl__bar--then {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .05) 0 6px,
    transparent 6px 12px
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.tl__bar--then .tl__bar-txt { color: var(--t45); }

.tl__note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .3);
}

/* Narrow screens: a 12-quarter grid stops being readable, so drop to the
   year scale only and let the bars keep their proportions. */
@media (max-width: 860px) {
  .tl { --lab: 150px; }
  .tl__q { display: none; }
  .tl__name { font-size: 15px; }
  .tl__bar-txt { font-size: 10px; }
}
@media (max-width: 620px) {
  .tl { --lab: 0px; }
  .tl__scale { margin-left: 0; }
  .tl__now { display: none; }
  .tl__row { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .tl__label { padding-right: 0; }
}

/* ---------- stage detail ---------- */

.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(34px, 4.5vw, 56px);
}
.stage__k {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.stage__d {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t60);
}


/* ---------- team ---------- */

.people { display: grid; gap: 0; }

.person {
  padding: 24px 0;
  border-top: 1px solid var(--hair);
}
.person:last-child { border-bottom: 1px solid var(--hair); }
.person__n {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.012em;
}
.person__r {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--acc);
}
.person__b {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t60);
  max-width: 54ch;
}


/* ---------- trust ---------- */

.facts { display: grid; gap: 0; }
.fact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px 40px;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
}
.fact:last-child { border-bottom: 1px solid var(--hair); }
.fact__k { font-size: 16px; color: var(--t55); }
.fact__v { font-size: 18px; line-height: 1.5; }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
  margin-left: 8px;
}

/* ---------- cta ---------- */

.cta { position: relative; overflow: hidden; }
.cta__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  animation: drift 34s linear infinite reverse;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 100%, #000 0%, transparent 72%);
          mask-image: radial-gradient(90% 70% at 50% 100%, #000 0%, transparent 72%);
}
.cta__in {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(104px, 15vw, 214px) var(--gut);
  text-align: center;
}
.cta__h2 {
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.032em;
}
.cta__sub {
  margin: 26px auto 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--t60);
}
.cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(32px, 4vw, 50px);
}
.cta__row .btn--solid { padding: 15px 34px; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--hair); }
.foot__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) var(--gut) clamp(34px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.foot__mark { height: 26px; width: auto; display: block; }
.foot__blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--t55);
  margin-top: 18px;
  max-width: 30ch;
}
.foot__col { display: grid; gap: 11px; align-content: start; }
.foot__h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--t40);
}
.foot__col a {
  font-size: 14px;
  color: rgba(255, 255, 255, .62);
  transition: color .2s ease;
}
.foot__col a:hover { color: #fff; }
.foot__base {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut) 44px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
}

/* ---------- scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* No JS: never leave content hidden. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Anything that starts hidden and is revealed by an animation or by JS
     must be forced visible here — killing the animation alone would leave
     the hero blank. */
  [data-reveal],
  .badge,
  .hero__h1,
  .hero__sub,
  .hero__cta {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   /demo — request form
   ========================================================================== */

.form-page {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 120px);
}
.form-page > .hero__grid {
  -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 72%);
}

.form-page__in {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--gut) clamp(64px, 9vh, 110px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}

.form-page__intro { max-width: 46ch; }

.form-page__h1 {
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -.032em;
}
.form-page__lead {
  margin: clamp(18px, 2.5vw, 24px) 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--t60);
}
.form-page__list {
  margin: clamp(26px, 3.5vw, 36px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.form-page__list li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--t60);
  padding: 14px 0 14px 26px;
  border-top: 1px solid var(--hair);
  position: relative;
}
.form-page__list li:last-child { border-bottom: 1px solid var(--hair); }
.form-page__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
}

/* ---- card ---- */

.form-card {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: #0A0A0A;
  padding: clamp(24px, 3vw, 38px);
}

.field { display: grid; gap: 8px; margin-bottom: 18px; }

/* Two fields side by side. Each column is its own grid with named rows, so
   the labels line up and the inputs line up even when only one of them is
   showing a validation message underneath. Without this the shorter column
   stretches and its input drifts down to meet the taller one. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0 16px;
  align-items: start;
}
.field-row > .field {
  grid-template-rows: auto auto 1fr;
  align-content: start;
  margin-bottom: 0;
}
/* The row as a whole keeps the standard field spacing. */
.field-row { margin-bottom: 18px; }

.field label {
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
  letter-spacing: -.005em;
}
.req { color: var(--acc); }

.field input,
.field textarea {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-appearance: none;
          appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, .32); }

.field input:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, .24); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--acc);
  background: rgba(255, 255, 255, .05);
}
/* Keyboard users still get the ring; :focus above only restyles the border. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #E8736A; }

.hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--t45);
}
.err {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #E8736A;
}

/* Honeypot: off-screen but not display:none, so bots still see it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #E8736A;
  border: 1px solid rgba(232, 115, 106, .35);
  background: rgba(232, 115, 106, .07);
  border-radius: 10px;
  padding: 12px 14px;
}

.form-submit {
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
}
.form-submit[disabled] { opacity: .6; cursor: progress; }
.form-submit[disabled]:hover { transform: none; box-shadow: none; }

.form-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t45);
}

/* ---- success ---- */

.form-done { text-align: center; padding: clamp(20px, 4vw, 44px) 0; }
.form-done__mark { color: var(--acc); display: flex; justify-content: center; }
.form-done__h {
  margin: 18px 0 0;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -.02em;
}
.form-done__p {
  margin: 12px auto 26px;
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t60);
}

/* Without JS the form posts normally, so hide the JS-only success panel. */
.no-js .form-done { display: none !important; }

/* ==========================================================================
   / — holding page
   ========================================================================== */

.soon {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
}
.soon__in {
  position: relative;
  text-align: center;
  padding: var(--gut);
  opacity: 0;
  animation: fu 1s var(--ease) .1s forwards;
}
.soon__logo {
  height: clamp(26px, 4vw, 34px);
  width: auto;
  display: block;
  margin: 0 auto;
}
.soon__line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(26px, 4vw, 38px) 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t45);
}
.soon__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  animation: dot 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .soon__in { opacity: 1 !important; }
}