/* ============================================================
   Renta · auth theme
   A real building behind the glass: full-bleed property photography,
   a warm serif headline, hairline rules, and one very slow light wash
   drifting over the top of it all.
   ============================================================ */

@property --wash-x {
  syntax: '<percentage>';
  initial-value: 30%;
  inherits: false;
}
@property --shine {
  syntax: '<percentage>';
  initial-value: -140%;
  inherits: false;
}
@property --progress {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}
@property --shot-zoom {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

:root {
  --ink: #0f1215;
  --panel: rgba(20, 24, 28, 0.72);
  --panel-solid: #171b20;
  --line: rgba(233, 231, 227, 0.16);
  --fg: #f2efe9;
  --fg-dim: #b3b8bd;
  --accent: #d3a458;
  --accent-ink: #17120a;
  --accent-soft: rgba(211, 164, 88, 0.14);
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
[hidden] { display: none !important; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
/* the same rule the signed-in app carries: everything still scrolls,
   it just never wears the browser's own scrollbar track */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

.auth-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  overflow-x: hidden;
}

.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at var(--wash-x) 8%, var(--accent-soft) 0%, transparent 62%);
  animation: wash 70s ease-in-out infinite alternate;
}
@keyframes wash {
  to { --wash-x: 70%; }
}

/* ---------------- the photograph ----------------
   Layers stack so one shot can fade into the next as the wizard
   moves on: each step of signing up shows the part of the job it
   is asking about. */
.auth-shot {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #0b0e11;
  overflow: hidden;
}
.auth-shot .shot-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(var(--shot-zoom));
  transition: opacity 0.9s ease;
  animation: shot-drift 34s ease-in-out infinite alternate;
}
.auth-shot .shot-layer.is-on { opacity: 1; }
@keyframes shot-drift {
  from { --shot-zoom: 1.04; }
  to   { --shot-zoom: 1.12; }
}
/* the scrim: the photo carries the mood, the words stay readable */
.auth-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9,11,14,0.86) 0%, rgba(9,11,14,0.55) 38%, rgba(9,11,14,0.9) 100%),
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(9,11,14,0.1) 0%, rgba(9,11,14,0.75) 100%);
}

/* ---------------- header ---------------- */
.auth-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
}
.auth-nav .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--fg);
}
/* the mark: a house on a warm tile, not a letter */
.glyph {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #e6bb72 0%, var(--accent) 55%, #a97a34 100%);
  box-shadow: 0 2px 10px rgba(211, 164, 88, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.glyph svg { width: 19px; height: 19px; display: block; }
.glyph svg path { fill: var(--accent-ink); }
.auth-nav .nav-actions { display: flex; gap: 8px; align-items: center; }

/* ---------------- the one door ----------------
   Sign up and log in are the same door: this button opens it. It stands
   out by weight and warmth, not by blinking. */
.btn-access {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(150deg, #e9c078 0%, var(--accent) 58%, #b9873c 100%);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-access:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-access .arrow { font-size: 16px; line-height: 1; transition: transform 0.18s ease; }
.btn-access:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  background: rgba(15, 18, 21, 0.35);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-ink);
  background: var(--accent);
  cursor: pointer;
  overflow: hidden;
  transition: filter 0.15s ease;
}
.btn-glow:hover { filter: brightness(1.06); }
.btn-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  transform: translateX(var(--shine));
  pointer-events: none;
}
.btn-glow:hover::after { animation: shine 0.7s ease-out; }
@keyframes shine {
  from { --shine: -140%; }
  to   { --shine: 140%; }
}

/* ---------------- hero ---------------- */
.auth-hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 84px;
}
.auth-hero .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.auth-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  max-width: 760px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
}
.auth-hero h1 em { font-style: italic; color: var(--accent); }
.auth-hero p.lede {
  font-size: 17px;
  color: #dcd8d1;
  max-width: 540px;
  margin: 0;
  line-height: 1.65;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}

/* ---------------- the way in for somebody looking for a flat ----------------
   One field on the same piece of glass everything else here is made of -
   a hairline, a blur and the warm button already used for the door. It is
   the only thing on the page you can type into, so it needs no label and
   no heading over it to be understood. */
.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(520px, 100%);
  margin: 30px 0 0;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(12, 15, 18, 0.55);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hero-search:focus-within {
  border-color: rgba(211, 164, 88, 0.6);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--accent-soft);
}
.hero-search .mag { width: 18px; height: 18px; flex: 0 0 auto; color: var(--fg-dim); }
.hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 15.5px;
  padding: 11px 0;
}
.hero-search input:focus { outline: none; }
.hero-search input::placeholder { color: var(--fg-dim); opacity: 0.75; }
.hero-search button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent-ink);
  background: linear-gradient(150deg, #e9c078 0%, var(--accent) 58%, #b9873c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: filter 0.18s ease;
}
.hero-search button:hover { filter: brightness(1.05); }

/* ---------------- the two figures ----------------
   How much is kept here, and how much of it you could go and look at
   today. One line, no boxes, no tiles: a page that starts stacking
   dashboards under its headline stops looking like a front door. */
.hero-figures {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--fg-dim);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.hero-figures b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--fg);
  margin-right: 5px;
}
.hero-figures .sep { opacity: 0.35; }
.hero-figures a { transition: color 0.15s ease; }
.hero-figures a:hover, .hero-figures a:hover b { color: var(--accent); }

/* ---------------- features ---------------- */
.feature-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
  background: rgba(12, 15, 18, 0.5);
  backdrop-filter: blur(10px);
}
.feature-strip .feature {
  padding: 30px 28px;
  border-right: 1px solid var(--line);
}
.feature-strip .feature:last-child { border-right: none; }
.feature-strip .feature h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--fg);
}
.feature-strip .feature p {
  font-size: 14px;
  color: var(--fg-dim);
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip .feature { border-right: none; border-bottom: 1px solid var(--line); padding: 22px 20px; }
  .auth-nav { padding: 18px 20px; padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .auth-hero { padding: 64px 20px 48px; }
  .auth-hero p.lede { font-size: 15.5px; }
  .hero-search { margin-top: 24px; padding-left: 15px; }
  /* under 16px an iPhone zooms the whole page in the moment this is tapped */
  .hero-search input { font-size: 16px; }
  .hero-search button { padding: 12px 17px; font-size: 14px; }
  .hero-figures { font-size: 12.5px; gap: 3px 12px; }
  .hero-figures b { font-size: 15.5px; }
}

.auth-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px;
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 13px;
  background: rgba(12, 15, 18, 0.5);
}

/* ---------------- the access card ---------------- */
.auth-form-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 72px;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.auth-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 6px;
}
.auth-card .sub {
  color: var(--fg-dim);
  font-size: 14px;
  margin: 0 0 24px;
  line-height: 1.55;
}

/* ---------------- wizard ---------------- */
.wizard-head { margin-bottom: 22px; }
.wizard-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.wizard-bar {
  height: 3px;
  margin: 9px 0 14px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  transition: --progress 0.35s ease;
}
.wizard-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--progress);
  background: var(--accent);
  transition: width 0.35s ease;
}
.wizard-title {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.25;
}
.wizard-hint {
  font-size: 14px;
  color: var(--fg-dim);
  margin-top: 6px;
  line-height: 1.55;
}

.step { display: none; }
.step.is-active { display: block; animation: step-in 0.28s ease both; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.wizard-nav {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.wizard-nav .btn-glow { flex: 1; padding: 12px; }
.wizard-nav .btn-ghost { padding: 12px 18px; }
.btn-done { display: none; }
/* a step that has to ask the server before it can move on carries its own
   button, inside the step */
.step-submit { width: 100%; margin-top: 22px; padding: 12px; }

/* ---------------- pick one of two ---------------- */
.choice-grid { display: grid; gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .choice-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 13, 16, 0.45);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choice:hover .choice-body { border-color: rgba(211, 164, 88, 0.55); }
.choice input:checked + .choice-body {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(211, 164, 88, 0.12);
}
.choice .choice-mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  color: var(--accent);
}
.choice .choice-mark svg { width: 18px; height: 18px; }
.choice .choice-mark svg path { fill: currentColor; }
.choice strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.choice span.note { font-size: 13px; color: var(--fg-dim); line-height: 1.5; }

/* value carried over from an earlier step */
.echo-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(10, 13, 16, 0.5);
  font-size: 14px;
}
.echo-line .echo-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.echo-line a,
.echo-line button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--fg-dim);
}
.form-row { display: flex; gap: 12px; }
.form-row > * { flex: 1; }
.auth-card input,
.auth-card select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(10, 13, 16, 0.6);
  border: 1px solid var(--line);
  color: var(--fg);
  transition: border-color 0.15s ease;
}
.auth-card select option { background: #12161a; color: var(--fg); }
.auth-card input::placeholder { color: var(--fg-dim); opacity: 0.65; }
.auth-card input:focus,
.auth-card select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-note { font-size: 12.5px; color: var(--fg-dim); margin-top: 7px; }

.auth-card .switch-link {
  text-align: center;
  font-size: 14px;
  color: var(--fg-dim);
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.auth-card .switch-link a { color: var(--accent); font-weight: 600; }

/* ---------------- notices ----------------
   The same rule the rest of Renta follows: a notice is a line of words
   with a small tinted mark beside it and a hairline under it. A filled
   colour block was doing the shouting and made the page look templated. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 0 13px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-dim);
  --note-tint: var(--accent);
  --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 1.4A5.6 5.6 0 118 13.6 5.6 5.6 0 018 2.4zM7.2 6.7h1.6V12H7.2V6.7zM8 3.9a.95.95 0 110 1.9.95.95 0 010-1.9z'/%3E%3C/svg%3E");
}
.alert::before {
  content: '';
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 3px;
  background: var(--note-tint);
  -webkit-mask: var(--note-ico) center / 16px 16px no-repeat;
  mask: var(--note-ico) center / 16px 16px no-repeat;
}
.alert strong { color: var(--fg); font-weight: 600; }
.alert-error {
  color: #e8bdb4;
  --note-tint: #e0685e;
  --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 .9l7.4 13.4H.6L8 .9zm0 3.3L3.3 12.9h9.4L8 4.2z'/%3E%3Cpath fill='%23000' d='M7.3 6.6h1.4V10H7.3zM8 10.7a.85.85 0 100 1.7.85.85 0 000-1.7z'/%3E%3C/svg%3E");
}
.alert-success {
  --note-tint: #6cc08b;
  --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.4 8.6l3.3 3.3 8-8'/%3E%3C/svg%3E");
}

/* ---------------- on a phone ----------------
   The card takes the width, the fields are big enough that tapping one
   does not zoom the page, and nothing hides under the home bar. */
@media (max-width: 560px) {
  .auth-form-wrap { padding: 28px 14px calc(40px + env(safe-area-inset-bottom, 0px)); align-items: flex-start; }
  .auth-card { padding: 22px 18px; border-radius: 14px; }
  .auth-card h2 { font-size: 21px; }
  .auth-card input,
  .auth-card select { font-size: 16px; padding: 13px 12px; }
  .btn-glow, .btn-ghost, .btn-access { min-height: 46px; }
  .form-row { flex-wrap: wrap; }
  .form-row > * { flex: 1 1 100%; }
  .wizard-title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page::before,
  .btn-glow::after,
  .step.is-active,
  .auth-shot .shot-layer { animation: none !important; }
}