:root{
  --paper:#F6F2E9;
  --paper-dim:#EEE8D9;
  --paper-deep:#E4DCC6;
  --ink:#181410;
  --ink-soft:#5C5646;
  --ink-faint:#8B8470;
  --stamp:#B4402F;
  --stamp-soft:#B4402F1a;
  --line:#DBD2BE;
  --line-strong:#C7BB9E;
  --good:#3E5C3A;
  --focus:#181410;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'EB Garamond', Garamond, 'Apple Garamond', Baskerville, 'Times New Roman', Georgia, serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
h1,h2,h3{ font-family:var(--font-display); font-weight:400; margin:0; text-wrap:balance; }
a{ color:inherit; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; color:inherit; }
::selection{ background:var(--stamp); color:var(--paper); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.app{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:flex-start;
  padding:22px clamp(20px,5vw,64px) 0;
}
.back-home{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; transition:color .15s ease;
}
.back-home:hover{ color:var(--stamp); }

.progress-wrap{ padding:14px clamp(20px,5vw,64px) 0; display:flex; flex-direction:column; align-items:center; }
.progress-row{ display:flex; align-items:center; gap:18px; width:100%; max-width:520px; }
.progress-frac{ font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; white-space:nowrap; color:var(--ink-soft); }
.progress-frac b{ color:var(--ink); font-weight:600; }
.progress-track{ flex:1; height:1px; background:var(--line); position:relative; }
.progress-fill{ position:absolute; left:0; top:-1px; height:3px; background:var(--stamp); transition:width .5s cubic-bezier(.65,0,.35,1); }
.progress-labels{ display:none; }
@media (min-width:820px){
  .progress-labels{ display:flex; justify-content:center; gap:28px; margin-top:10px; width:100%; }
  .progress-labels span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
  .progress-labels span.active{ color:var(--stamp); }
  .progress-labels span.done{ color:var(--ink-soft); }
}

/* ---------- main step area ---------- */
main{ flex:1; display:flex; flex-direction:column; }
.step{
  flex:1; width:100%; max-width:760px; margin:0 auto;
  padding:clamp(36px,6vh,72px) clamp(20px,5vw,0px) 40px;
  animation:rise .42s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stamp); margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.eyebrow .stamp-mark{
  width:20px; height:20px; border:1.4px solid var(--stamp); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; transform:rotate(-6deg);
  font-size:10px; font-weight:600;
}

.headline{
  font-size:clamp(34px,5.6vw,64px); line-height:1.04; letter-spacing:-.01em; margin-bottom:14px;
}
.headline em{ font-style:italic; color:var(--stamp); }
.sub{
  font-size:16px; line-height:1.55; color:var(--ink-soft); max-width:52ch; margin-bottom:8px;
}
.sensitive-note{
  margin-top:16px; padding:14px 16px; border:1px solid var(--stamp); border-left-width:3px;
  background:var(--stamp-soft); font-size:13.5px; line-height:1.55; color:var(--ink);
}
.sensitive-note b{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stamp); display:block; margin-bottom:6px; }

.fields{ margin-top:40px; display:flex; flex-direction:column; gap:30px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px 28px; }
@media (max-width:680px){ .row2,.row3{ grid-template-columns:1fr; } }

.field{ position:relative; }
.field label{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:9px;
}
.field label .opt{ color:var(--ink-faint); text-transform:none; letter-spacing:0; font-size:11px; }
.field label .req{ color:var(--stamp); font-size:13px; }
.field-hint{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; line-height:1.4; }

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=number],
.field input[type=date],
.field input[type=password],
.field select,
.field textarea{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid var(--line-strong);
  padding:8px 2px 12px; font-size:22px; font-family:var(--font-body); font-weight:400;
  color:var(--ink); outline:none; transition:border-color .2s ease;
  border-radius:0; appearance:none;
}
.field select{ font-size:19px; padding-top:10px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23181410' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; }
.field textarea{ resize:vertical; min-height:88px; font-size:17px; line-height:1.5; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--stamp); }
.field input.small-text{ font-size:17px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-faint); font-weight:400; font-family:inherit; }
.field select, .field select option{ font-family:var(--font-body); }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--stamp); }
.field-error{ display:none; font-family:var(--font-mono); font-size:11.5px; color:var(--stamp); margin-top:7px; letter-spacing:.02em; }
.field.invalid .field-error{ display:block; }

.mask-toggle{
  position:absolute; right:2px; bottom:12px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); background:none; border:none;
  cursor:pointer; padding:2px 4px;
}
.mask-toggle:hover{ color:var(--stamp); }

.label-info{
  width:15px; height:15px; border-radius:50%; border:1px solid var(--ink-faint); background:none;
  color:var(--ink-faint); font-family:var(--font-mono); font-size:9.5px; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; flex:none;
}
.label-info:hover, .label-info.active{ border-color:var(--stamp); color:var(--stamp); }
.info-popover{
  position:fixed; max-width:300px; background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-size:13px; line-height:1.55; padding:14px 16px;
  z-index:70; display:none; box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.info-popover.show{ display:block; }

/* yes/no toggle */
.yn{ display:flex; gap:10px; margin-top:2px; }
.yn button{
  flex:1; padding:16px 18px; border:1.5px solid var(--line-strong); background:transparent;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); cursor:pointer; transition:.15s ease; text-align:left;
}
.yn button:hover{ border-color:var(--ink); color:var(--ink); }
.yn button.active{ border-color:var(--stamp); background:var(--stamp); color:var(--paper); }

/* upload */
.upload{
  border:1.5px dashed var(--line-strong); padding:26px 20px; text-align:center; cursor:pointer;
  transition:.15s ease; position:relative;
}
.upload:hover,.upload.drag{ border-color:var(--stamp); background:var(--stamp-soft); }
.upload input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload .u-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.upload .u-sub{ font-size:12.5px; color:var(--ink-faint); margin-top:5px; }
.upload.has-file{ border-style:solid; border-color:var(--good); background:transparent; }
.upload.has-file .u-label{ color:var(--good); }
.file-chip{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:6px 12px;
  border:1px solid var(--line-strong); font-family:var(--font-mono); font-size:11.5px; background:var(--paper-dim);
}
.file-chip button{ background:none; border:none; color:var(--stamp); cursor:pointer; font-family:inherit; font-size:12px; padding:0; }

/* owner card */
.owner-block{ border-top:1.5px solid var(--line); padding-top:26px; margin-top:6px; }
.owner-block:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.owner-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.owner-head h3{ font-size:20px; font-family:var(--font-display); font-style:italic; }
.owner-remove{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); background:none; border:none; cursor:pointer; }
.owner-remove:hover{ color:var(--stamp); }
.add-owner{
  margin-top:30px; width:100%; padding:16px; border:1.5px dashed var(--line-strong); background:transparent;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  cursor:pointer; transition:.15s ease;
}
.add-owner:hover{ border-color:var(--stamp); color:var(--stamp); }

.supplier-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:end; margin-bottom:18px; }
@media (max-width:680px){ .supplier-row{ grid-template-columns:1fr; } }
.supplier-row .rm{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); background:none; border:none; cursor:pointer; padding:8px 0; text-align:left; }
.supplier-row .rm:hover{ color:var(--stamp); }
.add-line{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:none; border:none; border-bottom:1px solid var(--ink-soft); cursor:pointer; padding:0 0 2px; }
.add-line:hover{ color:var(--stamp); border-color:var(--stamp); }

/* checkbox */
.check-row{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.check-row input{ margin-top:4px; width:17px; height:17px; accent-color:var(--stamp); flex:none; cursor:pointer; }
.check-row span{ font-size:14.5px; line-height:1.55; color:var(--ink); }

/* review */
.rev-section{ border-top:1.5px solid var(--line); padding:26px 0; }
.rev-section:first-child{ border-top:none; padding-top:0; }
.rev-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.rev-head h3{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.rev-edit{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--stamp); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.rev-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 28px; }
@media (max-width:680px){ .rev-grid{ grid-template-columns:1fr; } }
.rev-item dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px; }
.rev-item dd{ margin:0; font-size:16.5px; color:var(--ink); }
.rev-item dd.muted{ color:var(--ink-faint); font-style:italic; }
.rev-owner{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px dotted var(--line); }
.rev-owner:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }

.sig-field input{ font-family:var(--font-display); font-style:italic; font-size:30px !important; }

/* footer nav */
.stepnav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px clamp(20px,5vw,64px) 30px; border-top:1px solid var(--line);
}
.navbtn{
  background:none; border:none; cursor:pointer; font-family:var(--font-mono);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  padding:10px 2px; transition:color .15s ease; display:flex; align-items:center; gap:8px;
  text-decoration:none; width:fit-content;
}
.navbtn:hover{ color:var(--ink); }
.navbtn:disabled{ opacity:0; pointer-events:none; }
.navbtn.primary{
  color:var(--paper); background:var(--ink); padding:14px 26px; font-size:13px;
}
.navbtn.primary:hover{ background:var(--stamp); }
.navbtn.save{ color:var(--ink-faint); font-size:11.5px; }
.navbtn.save:hover{ color:var(--stamp); }

.submit-cta{
  width:100%; margin-top:36px; padding:22px 24px; background:var(--stamp); color:var(--paper);
  border:none; cursor:pointer; font-family:var(--font-display); font-size:22px; font-style:italic;
  display:flex; align-items:center; justify-content:space-between; transition:.15s ease;
}
.submit-cta:hover{ background:var(--ink); }
.submit-cta span.arrow{ font-family:var(--font-mono); font-size:16px; font-style:normal; }
.submit-cta:disabled{ opacity:.4; cursor:not-allowed; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:50;
  background:var(--ink); color:var(--paper); padding:13px 22px; font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.04em; opacity:0; pointer-events:none; transition:.3s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* confirmation */
.confirm{ text-align:left; max-width:640px; margin:0 auto; padding:clamp(60px,14vh,140px) 0; flex:1; display:flex; flex-direction:column; justify-content:center; }
.confirm .stamp-big{
  width:78px; height:78px; border:2px solid var(--stamp); border-radius:50%; transform:rotate(-8deg);
  display:flex; align-items:center; justify-content:center; margin-bottom:30px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-align:center; color:var(--stamp); line-height:1.3;
}
.confirm h1{ font-size:clamp(38px,6vw,66px); line-height:1.03; margin-bottom:18px; }
.confirm p{ font-size:17px; color:var(--ink-soft); max-width:48ch; line-height:1.6; }
.confirm .ref{ margin-top:34px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); letter-spacing:.05em; }

/* idle modal */
.idle-veil{ position:fixed; inset:0; background:rgba(24,20,16,.55); z-index:80; display:none; align-items:center; justify-content:center; padding:24px; }
.idle-veil.show{ display:flex; }
.idle-box{ background:var(--paper); max-width:420px; width:100%; padding:36px; border:1.5px solid var(--ink); }
.idle-box h2{ font-size:26px; margin-bottom:12px; }
.idle-box p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:24px; }
.idle-box button{ width:100%; padding:16px; background:var(--ink); color:var(--paper); border:none; font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.idle-box button:hover{ background:var(--stamp); }

.field-underline-word{ position:relative; }
.squiggle{ display:block; width:64px; height:8px; margin-top:2px; }

.intro-screen{ display:flex; flex-direction:column; justify-content:center; flex:1; max-width:820px; margin:0 auto; padding:clamp(40px,8vh,100px) clamp(20px,5vw,0px); }
.intro-screen .kicker{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--stamp); margin-bottom:22px; }
.intro-screen h1{ font-size:clamp(38px,7vw,80px); line-height:1.0; margin-bottom:24px; }
.intro-screen p{ font-size:17.5px; color:var(--ink-soft); max-width:54ch; line-height:1.6; margin-bottom:10px; }
.intro-meta{ display:flex; gap:36px; margin-top:44px; flex-wrap:wrap; }
.intro-meta div{ font-family:var(--font-mono); }
.intro-meta dt{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px; }
.intro-meta dd{ margin:0; font-size:14px; color:var(--ink); }
.intro-start{ margin-top:46px; }

.rotator{ display:inline-block; color:var(--ink); position:relative; transition:opacity .2s ease, transform .2s ease; }
.rotator.swap-out{ opacity:0; transform:translateY(10px); }
@media (prefers-reduced-motion: reduce){
  .rotator{ transition:none; }
}

@media (max-width:560px){
  .row2,.row3{ gap:22px; }
  .field input,.field select{ font-size:19px; }
}