/* Components: links, button, cards, profile, plan, seats, lists, form. */

/* Underline that draws from the left in brass */
.top-apply, .link {
  position: relative; text-decoration: none;
  background: linear-gradient(var(--brass), var(--brass)) left calc(100% - 10px) / 0% 1px no-repeat;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast);
}
.top-apply:hover, .top-apply:focus-visible, .link:hover, .link:focus-visible { background-size: 100% 1px; color: var(--brass-strong); }

/* Primary button: brass, lifts and sweeps a sheen once on hover */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 28px;
  background: linear-gradient(180deg, var(--brass-strong) 0%, var(--brass) 100%);
  color: var(--ink-on-brass); border: 0; border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 24px -10px rgb(201 169 110 / 0.45);
  font: 600 1rem var(--font-body); text-decoration: none; cursor: pointer;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.38) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn:focus-visible { outline: 2px solid var(--brass-strong); outline-offset: 3px; }
.btn[disabled] { cursor: wait; }
.btn.is-loading { color: transparent; }
.btn.is-loading::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgb(20 17 10 / 0.25); border-top-color: var(--ink-on-brass); border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
  .btn span { display: inline-block; transition: transform var(--dur) var(--ease); }
  .btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 14px 32px -10px rgb(201 169 110 / 0.6); }
  .btn:hover span { transform: translateX(4px); }
  .btn:hover::after { transform: translateX(120%); transition: transform 900ms var(--ease); }
  .btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 4px 12px -6px rgb(201 169 110 / 0.4); }
  .btn.is-loading::before { animation: spin 700ms linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Shared card depth */
.profile, .seat, .form, .mount {
  background: var(--card-fill); border: 1px solid var(--line); box-shadow: var(--card-shadow);
}

/* Signature: the profile, mounted like an exhibit */
.profile { position: relative; margin: 0; padding: 32px 32px 24px; border-radius: var(--radius-lg); }
.profile::before {
  content: ""; position: absolute; inset: -20% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
}
.readout { font-size: var(--fs-micro); letter-spacing: 0.06em; color: var(--sage); min-height: 1.4em; margin-bottom: 16px; }
.profile.is-live .readout { color: var(--ivory); }
.profile.is-done .readout { color: var(--brass); }
.profile svg { display: block; width: 100%; height: auto; overflow: visible; }
.mp-price { font: 11px var(--font-mono); fill: var(--sage); opacity: 0.75; font-variant-numeric: tabular-nums; }
.mp-l { font: 15px var(--font-mono); fill: var(--ivory); opacity: 0; transform: translateY(-6px); transform-box: fill-box; transition: opacity 0.35s ease, transform 0.35s ease, fill 0.6s ease; }
.mp-l.is-on { opacity: 0.9; transform: none; }
.mp-l.is-single { fill: var(--brass); opacity: 1; }
.layer-poc { transition: transform 0.45s var(--ease); }
.mp-poc { stroke: var(--brass); stroke-width: 1; opacity: 0; transition: opacity 0.3s; }
.mp-poc-label { font: 10.5px var(--font-mono); fill: var(--brass); opacity: 0; transition: opacity 0.3s; }
.is-live .mp-poc, .is-live .mp-poc-label, .is-done .mp-poc, .is-done .mp-poc-label { opacity: 1; }
.mp-va { fill: var(--ivory); opacity: 0; animation: settle 0.8s ease forwards; }
.mp-note { font: 11px var(--font-mono); fill: var(--sage); opacity: 0; animation: settle-text 0.6s 0.3s ease forwards; }
.mp-init { fill: var(--brass); font-size: 12px; }
.mp-init-sub { fill: var(--brass); }
.mp-bracket { stroke: var(--brass); stroke-width: 1; opacity: 0; animation: settle-text 0.6s 0.3s ease forwards; }
/* Once the session is done, pin the final state so the chart never sticks mid-transition. */
.profile.is-done .mp-l.is-on { transition: none; opacity: 0.9; transform: none; }
.profile.is-done .mp-l.is-single { opacity: 1; }
.profile.is-done .layer-poc, .profile.is-done .mp-poc, .profile.is-done .mp-poc-label { transition: none; }
.profile.is-done .mp-va { animation: none; opacity: 0.05; }
.profile.is-done .mp-note, .profile.is-done .mp-bracket { animation: none; opacity: 1; }
@keyframes settle { to { opacity: 0.05; } }
@keyframes settle-text { to { opacity: 1; } }
.profile figcaption { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--sage); max-width: var(--measure); }
.tag { font: var(--fs-micro) var(--font-mono); border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .mp-l, .layer-poc, .mp-poc, .mp-poc-label { transition: none; }
  .mp-l { transform: none; }
  .mp-va { animation: none; opacity: 0.05; }
  .mp-note, .mp-bracket { animation: none; opacity: 1; }
}
@media (max-width: 560px) { .profile { padding: 18px 14px 16px; } }

/* The plan: paper on a sunken desk */
.desk {
  position: relative; padding: clamp(28px, 6vw, 72px) clamp(16px, 5vw, 64px);
  background: radial-gradient(120% 90% at 50% 40%, #0d1914 0%, var(--sunken) 70%);
  border-radius: 14px; box-shadow: inset 0 2px 18px rgb(0 0 0 / 0.55), inset 0 0 0 1px var(--hairline);
}
.plan {
  background: linear-gradient(180deg, var(--paper-top), var(--paper)); color: var(--paper-ink);
  border-radius: 3px; padding: 36px 38px 30px; box-shadow: var(--paper-shadow);
  transform: rotate(-0.6deg);
}
.plan-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--paper-ink); font-size: var(--fs-small); }
.plan-body { margin: 0; }
.plan-body > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--paper-line); }
.plan-body dt { font-weight: 600; font-size: 0.95rem; }
.plan-body dd { margin: 0; }
.plan-foot { margin-top: 18px; font-size: var(--fs-micro); color: var(--paper-muted); }
@media (max-width: 560px) {
  .plan { padding: 24px 20px; transform: rotate(-0.4deg); }
  .plan-body > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Seats */
.seat {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px;
  border-radius: var(--radius-lg); color: var(--sage);
}
.seat h3 { color: var(--ivory); }
.amount { font: 500 var(--fs-number)/1.05 var(--font-display); font-variant-numeric: tabular-nums lining-nums; color: var(--brass-strong); }
.seat--founding {
  border-color: transparent;
  background:
    linear-gradient(var(--brass-soft), var(--brass-soft)) padding-box,
    linear-gradient(180deg, var(--overlay), var(--raised)) padding-box,
    linear-gradient(110deg, var(--brass-line), var(--brass-strong), var(--brass-line)) border-box;
  background-size: 100% 100%, 100% 100%, 220% 100%;
  box-shadow: var(--card-shadow-lift), 0 0 60px -20px rgb(201 169 110 / 0.25);
}
.badge { align-self: flex-start; color: var(--brass-strong); border: 1px solid var(--brass-line); border-radius: 3px; padding: 3px 8px; }
@media (prefers-reduced-motion: no-preference) {
  .seat { transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur) var(--ease); }
  .seat:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--card-shadow-lift); }
  .seat--founding:hover { border-color: transparent; box-shadow: var(--card-shadow-lift), 0 0 72px -18px rgb(201 169 110 / 0.35); }
  .seat--founding { animation: brass-edge 7s ease-in-out infinite alternate; }
}
@keyframes brass-edge { from { background-position: 0 0, 0 0, 0% 0; } to { background-position: 0 0, 0 0, 100% 0; } }

/* Lists: markers plus a brass hairline that grows on hover */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--sage); }
.ticks li { position: relative; padding: 8px 0 8px 28px; max-width: var(--measure); }
.ticks li::before { content: ""; position: absolute; left: 0; top: calc(8px + 0.82em); width: 14px; height: 1px; background: var(--line-strong); }
.ticks--yes li::before { background: var(--brass); }
.ticks--no li::before { width: 7px; height: 7px; top: calc(8px + 0.82em - 3px); left: 3px; background: none; border: 1px solid var(--sage); border-radius: 50%; opacity: 0.7; }
.hl, .ticks li { position: relative; }
.hl::after, .ticks li::after {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 1px;
  background: var(--brass); transform: scaleY(0); transform-origin: top;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hl::after, .ticks li::after { transition: transform var(--dur) var(--ease); }
  .hl:hover::after, .ticks li:hover::after { transform: scaleY(1); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .hl:hover::after, .ticks li:hover::after { transform: scaleY(1); }
}

/* Form */
.form { display: grid; gap: 24px; padding: clamp(22px, 4vw, 44px); border-radius: var(--radius-lg); }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } .wide { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-size: var(--fs-small); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: 400 1rem var(--font-body); color: var(--ivory);
  background: var(--sunken); border: 1px solid var(--field-border); border-radius: var(--radius);
}
@media (prefers-reduced-motion: no-preference) {
  .field input, .field select, .field textarea { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sage) 50%), linear-gradient(135deg, var(--sage) 50%, transparent 50%); background-position: right 20px center, right 15px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--sage); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--brass); background-color: #0a1510; box-shadow: 0 0 0 4px var(--brass-soft), 0 0 24px -6px rgb(201 169 110 / 0.35); }
.field [aria-invalid="true"] { border-color: var(--error); }

/* Brass checkbox */
.check { grid-template-columns: 24px 1fr; align-items: start; gap: 14px; }
.check input {
  appearance: none; position: relative; width: 24px; height: 24px; min-height: 24px; margin: 2px 0 0; padding: 0;
  border: 1px solid var(--field-border); border-radius: 4px; background: var(--sunken); cursor: pointer;
}
.check input::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 7px; height: 12px;
  border: solid var(--ink-on-brass); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
}
.check input:checked { background: var(--brass); border-color: var(--brass); }
.check input:checked::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible { outline: 2px solid var(--brass-strong); outline-offset: 3px; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .check input { transition: background-color var(--dur-fast), border-color var(--dur-fast); }
  .check input::after { transition: transform var(--dur-fast) var(--ease); }
}
.check label { font-weight: 400; color: var(--sage); font-size: var(--fs-body); cursor: pointer; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* Status: success draws a brass checkmark */
.form-status { position: relative; font-weight: 500; }
.form-status[data-state="error"] { color: var(--error); }
.form-status[data-state="sent"] { padding-left: 30px; color: var(--ivory); }
.form-status[data-state="sent"]::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 13px; margin-top: -9px;
  border: solid var(--brass); border-width: 0 2px 2px 0; transform: rotate(45deg); transform-origin: left bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .form-status[data-state="sent"]::before { animation: draw-check var(--dur-slow) var(--ease) both; }
}
@keyframes draw-check {
  0% { width: 0; height: 0; }
  40% { width: 7px; height: 0; }
  100% { width: 7px; height: 13px; }
}

.book-direct { margin: -8px 0 0; color: var(--sage); font-size: var(--fs-small); }
.book-direct a { color: var(--brass-strong); text-underline-offset: 3px; display: inline-block; padding: 12px 0; }
.book-direct a:hover { color: var(--ivory); }