:root {
  --bg: oklch(0.995 0.002 75);
  --surface: oklch(1 0 0);
  --ink: oklch(0.21 0.012 60);
  --ink-2: oklch(0.42 0.012 60);
  --ink-3: oklch(0.52 0.012 60);
  --line: oklch(0.9 0.01 70);
  --line-strong: oklch(0.8 0.025 72);
  --sand: oklch(0.92 0.045 75);
  --sand-soft: oklch(0.975 0.016 75);
  --sand-deep: oklch(0.86 0.06 72);
  --gold: oklch(0.7 0.085 78);
  --gold-ink: oklch(0.52 0.08 72);
  --focus: oklch(0.5 0.09 70);
  --error: oklch(0.5 0.17 28);

  --radius: 16px;
  --shadow-1: 0 1px 2px oklch(0.21 0.012 60 / 0.04), 0 2px 8px -4px oklch(0.21 0.012 60 / 0.06);
  --shadow-2: 0 2px 4px oklch(0.21 0.012 60 / 0.04), 0 12px 28px -14px oklch(0.45 0.05 70 / 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: "Frank Ruhl Libre", "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/*
 * The brand's sand blob and its thin gold orbit, echoing the logo, sit behind
 * the page at the top corner. Decorative only, so it never carries meaning.
 */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: -215px;
  left: -235px;
  width: 440px;
  height: 440px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M214 38c58 4 116 40 132 98 17 60-14 128-66 162-50 33-124 42-176 10C48 278 24 214 40 156 57 92 146 33 214 38z' fill='%23f6e6cc' fill-opacity='.5'/%3E%3Cpath d='M86 86c64-62 214-50 262 34 44 78-6 204-104 236-96 31-206-22-222-110-9-50 21-118 64-160z' fill='none' stroke='%23c9a25e' stroke-opacity='.4' stroke-width='1.2'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

.shell {
  max-width: 33rem;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 20px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* Top bar: back on the start side (right in RTL), logo centred. */
.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  padding-top: env(safe-area-inset-top);
}

.bar-logo {
  grid-column: 2;
  width: 54px;
  height: 54px;
}

.back {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 8px 0 12px;
  margin-inline-start: -8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: color 160ms var(--ease);
}

.back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back:hover {
  color: var(--ink);
}

/* A gold line that fills as the questionnaire advances. */
.progress[hidden] {
  display: none;
}

.progress {
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(to left, var(--sand-deep), var(--gold));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 520ms var(--ease);
}

.stage {
  flex: 1;
  position: relative;
  padding-top: 40px;
}

.screen {
  animation: enter 320ms var(--ease) both;
}

.screen.is-back {
  animation-name: enter-back;
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}

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

/* Type */
.q {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  outline: none;
}

/* A short gold rule under every question: the one recurring ornament. */
.rule {
  display: block;
  width: 36px;
  height: 1px;
  margin: 16px 0 22px;
  background: var(--gold);
}

.lede {
  margin: 0 0 28px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.small {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* Welcome */
.welcome {
  text-align: center;
  padding-top: 4px;
}

.welcome-logo {
  width: 136px;
  height: 136px;
  margin: 0 auto 26px;
  display: block;
}

.welcome .q {
  font-size: 2.625rem;
  font-weight: 500;
}

.welcome .rule {
  margin: 18px auto 20px;
}

.welcome .lede {
  max-width: 21rem;
  margin: 0 auto 14px;
  font-size: 1.125rem;
}

.meta {
  margin: 0 0 34px;
  color: var(--gold-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.meta span + span::before {
  content: "·";
  margin: 0 10px;
  color: var(--gold);
}

.privacy-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--ink-3);
  font-size: 0.875rem;
  text-underline-offset: 3px;
}

/* Choices */
.choices {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choices li {
  animation: rise 380ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms + 60ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.choice {
  width: 100%;
  min-height: 62px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition:
    border-color 180ms var(--ease),
    background-color 180ms var(--ease),
    box-shadow 220ms var(--ease),
    transform 140ms var(--ease);
}

.choice-text {
  flex: 1;
  font-size: 1.0625rem;
}

.choice-hint {
  display: block;
  margin-top: 1px;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.choice-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand-soft);
  color: var(--ink-2);
  transition: background-color 180ms var(--ease);
}

.choice-icon svg,
.tick svg,
.btn svg,
.feature-icon svg,
.reminder svg,
.videos svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice-icon svg {
  width: 21px;
  height: 21px;
}

.tick {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--surface);
  transition:
    background-color 180ms var(--ease),
    border-color 180ms var(--ease);
}

.tick svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 160ms var(--ease),
    transform 220ms var(--ease);
}

@media (hover: hover) {
  .choice:hover {
    border-color: var(--sand-deep);
    box-shadow: var(--shadow-2);
  }
  .choice:hover .choice-icon {
    background: var(--sand);
  }
}

.choice:active {
  transform: scale(0.988);
}

.choice[aria-pressed="true"] {
  background: var(--sand-soft);
  border-color: var(--ink);
  box-shadow: var(--shadow-2);
}

.choice[aria-pressed="true"] .choice-icon {
  background: var(--sand);
  color: var(--ink);
}

.choice[aria-pressed="true"] .tick {
  background: var(--ink);
  border-color: var(--ink);
}

.choice[aria-pressed="true"] .tick svg {
  opacity: 1;
  transform: none;
}

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

/* Buttons */
.btn {
  width: 100%;
  min-height: 58px;
  margin-top: 28px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.08),
    0 10px 24px -14px oklch(0.21 0.012 60 / 0.55);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 180ms var(--ease),
    box-shadow 220ms var(--ease),
    transform 140ms var(--ease);
}

.btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  transition: transform 220ms var(--ease);
}

.btn:active {
  transform: scale(0.99);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.btn.is-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
}

@media (hover: hover) {
  .btn:not([disabled]):hover {
    background: oklch(0.29 0.014 60);
  }
  .btn:not([disabled]):hover svg {
    transform: translateX(-3px);
  }
  .btn.is-quiet:not([disabled]):hover {
    background: var(--sand-soft);
  }
}

.skip {
  display: block;
  margin: 18px auto 0;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}

.skip:hover {
  color: var(--ink);
}

/* Bank instructions */
.doc-name {
  margin: 0 0 26px;
  color: var(--ink-2);
}

.doc-name strong {
  color: var(--ink);
  font-weight: 600;
}

.where {
  margin: 0 0 14px;
  font-weight: 600;
}

/* The menu path as a timeline: gold-ringed steps joined by a hairline. */
.path {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 14px;
}

.path li {
  position: relative;
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 28px;
}

.path li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold-ink);
}

.path li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  right: 13.5px;
  width: 1px;
  height: 14px;
  background: var(--sand-deep);
}

.facts {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--sand-soft);
  display: grid;
  gap: 10px;
}

.facts p {
  margin: 0;
}

.facts .label {
  font-weight: 600;
}

.tel {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  unicode-bidi: isolate;
  direction: ltr;
}

/* Upload */
.upload-link {
  margin: 0 0 28px;
}

.upload-link .btn {
  margin-top: 0;
}

/* Signers: a full screen of its own, so nobody misses it. */
.feature {
  text-align: center;
  padding-top: 8px;
}

.feature-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  box-shadow: 0 0 0 10px var(--sand-soft);
}

.feature-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.4;
}

.feature .rule {
  margin: 18px auto 20px;
}

.feature .lede {
  max-width: 24rem;
  margin-inline: auto;
}

.feature .lede {
  margin-bottom: 18px;
}

.feature .emph {
  max-width: 22rem;
  margin: 0 auto;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: balance;
}

/* Form */
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.field label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.field .optional {
  font-weight: 400;
  color: var(--ink-3);
}

.input {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: 1.0625rem;
  transition:
    border-color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}

.input:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 4px oklch(0.92 0.045 75 / 0.9);
}

textarea.input {
  min-height: 108px;
  resize: vertical;
}

.input[dir="ltr"] {
  text-align: right;
}

.input[aria-invalid="true"] {
  border-color: var(--error);
}

.error {
  margin: 0;
  color: var(--error);
  font-size: 0.875rem;
}

.hp {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A compact reminder line, used on the scheduling and done screens. */
.reminder {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--sand-deep);
  background: var(--sand-soft);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: start;
}

.reminder svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--gold-ink);
}

/* Scheduling */
.calendly {
  height: max(660px, calc(100dvh - 200px));
  margin: 0 -20px;
  position: relative;
}

.calendly-loading {
  position: absolute;
  inset: 40px 20px auto;
  display: grid;
  gap: 12px;
}

.sk {
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--sand-soft), oklch(0.988 0.008 75), var(--sand-soft));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* Done */
.done {
  text-align: center;
  padding-top: 20px;
}

.seal {
  width: 88px;
  height: 88px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: 0 0 0 10px var(--sand-soft);
  animation: seal-in 520ms var(--ease) both;
}

.seal svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
  animation: draw 520ms 260ms var(--ease) both;
}

@keyframes seal-in {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 24;
  }
}

.done .rule {
  margin: 18px auto 20px;
}

.done .reminder {
  margin: 0 auto 8px;
  max-width: 24rem;
}

.videos {
  margin: 36px 0 0;
  text-align: start;
}

.videos h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
}

.videos a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition:
    border-color 180ms var(--ease),
    box-shadow 220ms var(--ease);
}

.videos a:hover {
  border-color: var(--sand-deep);
  box-shadow: var(--shadow-2);
}

.videos .play {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sand);
}

.videos .play svg {
  width: 16px;
  height: 16px;
  fill: var(--ink);
  stroke: none;
  margin-inline-end: -2px;
}

.sign {
  margin: 34px 0 0;
  font-family: var(--serif);
  font-size: 1.375rem;
}

.sign small {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-3);
}

.noscript {
  padding: 24px 0;
}

/* Privacy policy */
.legal {
  padding: 40px 0 24px;
  max-width: 65ch;
}

.legal h2 {
  margin: 32px 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.35;
}

.legal p,
.legal li {
  text-wrap: pretty;
}

.legal ol,
.legal ul {
  padding-inline-start: 1.4em;
  display: grid;
  gap: 10px;
}

.legal ul {
  margin-top: 10px;
}

.legal a {
  text-underline-offset: 3px;
}

a.back {
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

/* Headings take focus programmatically for screen readers; no ring. */
.q:focus-visible {
  outline: none;
}

@media (min-width: 720px) {
  body::before {
    top: -170px;
    left: -110px;
    width: 560px;
    height: 560px;
  }
  .stage {
    padding-top: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .screen.is-back {
    animation: fade 160ms linear both;
  }
  @keyframes fade {
    from {
      opacity: 0;
    }
  }
  .choices li,
  .seal,
  .seal svg {
    animation: none;
  }
  .progress span,
  .choice,
  .btn,
  .btn svg,
  .tick svg {
    transition: none;
  }
  .sk {
    animation: none;
  }
}