/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --deep:      #0E3B2E;
  --deep-mid:  #164d3d;
  --slate:     #3F5F55;
  --slate-lt:  #5a7d72;
  --euca:      #6FBF9C;
  --euca-lt:   #8fd3b4;
  --sand:      #D6C7A1;
  --charcoal:  #2A2A2A;
  --mid:       #666;
  --grey:      #E6E9E7;
  --grey-lt:   #f0f2f1;
  --offwhite:  #F7F9F8;
  --white:     #ffffff;
  --danger:    #c0392b;
  --danger-lt: #fdf0ef;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --sh-sm: 0 1px 3px rgba(14,59,46,.08),0 1px 2px rgba(14,59,46,.04);
  --sh-md: 0 4px 16px rgba(14,59,46,.10),0 2px 6px rgba(14,59,46,.06);
  --t: .2s ease;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', sans-serif;
  background: var(--offwhite);
  color: var(--charcoal);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.hdr {
  background: var(--deep);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hdr-inner {
  max-width: 920px; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.hdr-logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.hdr-logo .txt-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px; font-weight: 800;
  color: white; letter-spacing: -0.3px;
}
.hdr-logo .txt-logo span { color: var(--euca); font-weight: 400; font-size: 11px; letter-spacing: 2px; display: block; margin-top: 1px; }
.hdr-right { text-align: right; }
.hdr-right .tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--euca);
}
.hdr-right a {
  display: block; font-size: 12px;
  color: rgba(255,255,255,.5); text-decoration: none;
  margin-top: 2px; transition: color var(--t);
}
.hdr-right a:hover { color: rgba(255,255,255,.85); }

/* ─── Progress bar ───────────────────────────────────────────────────────── */
.prog-wrap { background: var(--deep-mid); border-bottom: 1px solid rgba(255,255,255,.06); }
.prog-inner {
  max-width: 920px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; height: 52px;
}
.s-item {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .4px;
  color: rgba(255,255,255,.3);
  transition: color var(--t); white-space: nowrap; cursor: default;
}
.s-item.done { color: rgba(255,255,255,.55); cursor: pointer; }
.s-item.active { color: var(--euca); }
.s-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  transition: all var(--t); flex-shrink: 0;
}
.s-item.active .s-dot { border-color: var(--euca); background: var(--euca); color: var(--deep); box-shadow: 0 0 0 3px rgba(111,191,156,.2); }
.s-item.done  .s-dot { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.s-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); margin: 0 8px; min-width: 10px; }
.s-line.done { background: rgba(255,255,255,.25); }

/* ─── Main ───────────────────────────────────────────────────────────────── */
.main { flex: 1; padding: 36px 32px 80px; }
.shell { max-width: 820px; margin: 0 auto; }

/* ─── Page heading ───────────────────────────────────────────────────────── */
.ph { margin-bottom: 26px; animation: fsu .4s ease both; }
.ph h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px; font-weight: 800;
  color: var(--deep); letter-spacing: -.5px; margin-bottom: 5px;
}
.ph p { font-size: 14.5px; color: var(--slate-lt); line-height: 1.6; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--grey);
  padding: 26px 30px;
  margin-bottom: 18px;
  box-shadow: var(--sh-sm);
  animation: fsu .35s ease both;
}
.card:nth-child(2) { animation-delay: .05s; }
.card:nth-child(3) { animation-delay: .10s; }
.card:nth-child(4) { animation-delay: .15s; }
.card:nth-child(5) { animation-delay: .20s; }
.card:nth-child(6) { animation-delay: .25s; }

.ct {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--slate);
  margin-bottom: 18px; padding-bottom: 13px;
  border-bottom: 1.5px solid var(--grey);
  display: flex; align-items: center; gap: 8px;
}
.ct::before { content: ''; width: 3px; height: 13px; background: var(--euca); border-radius: 2px; flex-shrink: 0; }

/* ─── Fields ─────────────────────────────────────────────────────────────── */
.fg { display: grid; gap: 14px; margin-bottom: 16px; }
.c1 { grid-template-columns: 1fr; }
.c2 { grid-template-columns: 1fr 1fr; }
.c3 { grid-template-columns: 1fr 1fr 1fr; }
.c211 { grid-template-columns: 2fr 1fr 1fr; }
.c12 { grid-template-columns: 1fr 2fr; }

.f { display: flex; flex-direction: column; gap: 6px; }
.f label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--slate);
  display: flex; align-items: center; gap: 4px;
}
.req { color: var(--euca); font-size: 13px; line-height: 1; }

.f input[type=text],
.f input[type=email],
.f input[type=tel],
.f input[type=date],
.f input[type=number],
.f select,
.f textarea {
  font-family: 'Roboto', sans-serif;
  font-size: 14px; color: var(--charcoal);
  background: var(--offwhite);
  border: 1.5px solid var(--grey);
  border-radius: var(--r-md);
  padding: 10px 13px;
  outline: none; width: 100%;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  appearance: none; -webkit-appearance: none;
}
.f select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233F5F55' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.f input:focus, .f select:focus, .f textarea:focus {
  border-color: var(--euca); background: var(--white);
  box-shadow: 0 0 0 3px rgba(111,191,156,.18);
}
.f input.err, .f select.err, .f textarea.err { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.ferr { font-size: 12px; color: var(--danger); margin-top: -3px; display: none; }
.ferr.on { display: block; }
.f textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }

/* ─── Claim type selector (landing) ─────────────────────────────────────── */
.claim-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 6px;
}
.claim-card {
  padding: 22px 20px;
  border: 1.5px solid var(--grey);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t);
  background: var(--offwhite);
  user-select: none;
  position: relative;
}
.claim-card:hover { border-color: var(--euca); background: rgba(111,191,156,.06); transform: translateY(-2px); box-shadow: var(--sh-md); }
.claim-card.selected { border-color: var(--euca); background: rgba(111,191,156,.11); box-shadow: 0 0 0 3px rgba(111,191,156,.2); }
.claim-card input { display: none; }
.cc-icon { font-size: 26px; margin-bottom: 10px; display: block; }
.cc-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--deep);
  margin-bottom: 5px; line-height: 1.3;
}
.cc-desc { font-size: 12.5px; color: var(--slate-lt); line-height: 1.5; }
.cc-check {
  position: absolute; top: 14px; right: 14px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--grey);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
}
.claim-card.selected .cc-check { background: var(--euca); border-color: var(--euca); }
.claim-card.selected .cc-check::after { content: ''; width: 7px; height: 7px; background: var(--deep); border-radius: 50%; }

/* ─── Pills ──────────────────────────────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1.5px solid var(--grey);
  border-radius: 100px; cursor: pointer;
  font-size: 14px; color: var(--charcoal);
  transition: all var(--t); user-select: none;
  background: var(--offwhite); font-weight: 400;
}
.pill:hover { border-color: var(--euca); background: rgba(111,191,156,.07); }
.pill.on { border-color: var(--euca); background: rgba(111,191,156,.13); color: var(--deep); font-weight: 500; }
.pill input { display: none; }
.pchk {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--grey);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t); flex-shrink: 0;
}
.pill.on .pchk { background: var(--euca); border-color: var(--euca); }
.pill.on .pchk::after { content: ''; width: 5px; height: 5px; background: var(--deep); border-radius: 50%; }

/* Loss type pills for property */
.loss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.loss-card {
  padding: 14px 16px; border: 1.5px solid var(--grey);
  border-radius: var(--r-md); cursor: pointer;
  transition: all var(--t); background: var(--offwhite); user-select: none;
}
.loss-card:hover { border-color: var(--euca); background: rgba(111,191,156,.06); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.loss-card.on { border-color: var(--euca); background: rgba(111,191,156,.12); box-shadow: 0 0 0 3px rgba(111,191,156,.18); }
.loss-card input { display: none; }
.li { font-size: 20px; margin-bottom: 6px; display: block; }
.ll { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: var(--deep); line-height: 1.3; }

/* ─── Reveal ─────────────────────────────────────────────────────────────── */
.rev {
  overflow: hidden;
  max-height: 0; opacity: 0; margin-top: 0;
  transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease;
}
.rev.open { max-height: 1200px; opacity: 1; margin-top: 16px; }
.rev-in {
  padding: 18px 20px;
  background: var(--offwhite);
  border-radius: var(--r-md);
  border-left: 3px solid var(--euca);
}

/* ─── Banners ────────────────────────────────────────────────────────────── */
.banner {
  padding: 13px 16px; border-radius: var(--r-md);
  font-size: 13px; line-height: 1.65; margin-bottom: 16px;
}
.banner.info { background: rgba(214,199,161,.22); border: 1px solid var(--sand); color: var(--slate); }
.banner.info strong { color: var(--deep); }
.banner.tip  { background: rgba(111,191,156,.1); border: 1px solid rgba(111,191,156,.4); color: var(--slate); }

/* ─── Items table ────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.itbl { width: 100%; border-collapse: collapse; min-width: 640px; }
table.itbl th {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--slate); padding: 9px 8px;
  text-align: left; background: var(--offwhite);
  border-bottom: 2px solid var(--grey); white-space: nowrap;
}
table.itbl td { padding: 7px 5px; border-bottom: 1px solid var(--grey-lt); vertical-align: middle; }
table.itbl td input {
  font-family: 'Roboto', sans-serif; font-size: 13px;
  width: 100%; border: 1.5px solid var(--grey);
  border-radius: var(--r-sm); padding: 7px 9px;
  background: var(--offwhite); outline: none; color: var(--charcoal);
  transition: border-color var(--t), background var(--t);
}
table.itbl td input:focus { border-color: var(--euca); background: var(--white); }
table.itbl tr:last-child td { border-bottom: none; }
.btn-add {
  width: 100%; margin-top: 10px; padding: 10px;
  border: 1.5px dashed var(--euca); border-radius: var(--r-md);
  background: rgba(111,191,156,.06); color: var(--slate);
  font-family: 'Montserrat', sans-serif; font-size: 10.5px;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: all var(--t);
}
.btn-add:hover { background: rgba(111,191,156,.14); color: var(--deep); }
.btn-del {
  background: none; border: none; cursor: pointer;
  color: #ccc; font-size: 17px; line-height: 1;
  padding: 3px 7px; border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.btn-del:hover { color: var(--danger); background: var(--danger-lt); }

/* ─── Nav row ────────────────────────────────────────────────────────────── */
.nav { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; margin-top: 4px; }
.btn-back {
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--slate-lt); background: none; border: none; cursor: pointer;
  padding: 12px 6px; display: flex; align-items: center; gap: 6px;
  transition: color var(--t); letter-spacing: .3px;
}
.btn-back:hover { color: var(--deep); }
.btn-next {
  font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 700;
  color: var(--white); background: var(--deep); border: none; cursor: pointer;
  padding: 13px 34px; border-radius: 100px; letter-spacing: .4px;
  transition: background var(--t), transform .1s, box-shadow var(--t);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(14,59,46,.3);
}
.btn-next:hover { background: var(--slate); box-shadow: 0 6px 20px rgba(14,59,46,.35); }
.btn-next:active { transform: scale(.98); }
.btn-next.submit { background: var(--euca); color: var(--deep); box-shadow: 0 4px 16px rgba(111,191,156,.4); }
.btn-next.submit:hover { background: var(--euca-lt); }

/* ─── Review ─────────────────────────────────────────────────────────────── */
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.rv-lbl { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--slate-lt); margin-bottom: 2px; }
.rv-val { font-size: 14px; color: var(--charcoal); line-height: 1.5; }
.edit-link { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--euca); text-decoration: none; cursor: pointer; float: right; transition: color var(--t); }
.edit-link:hover { color: var(--deep); }

.dec-wrap {
  display: flex; gap: 12px; padding: 16px;
  background: var(--offwhite); border-radius: var(--r-md);
  border: 1.5px solid var(--grey); cursor: pointer;
  transition: border-color var(--t); margin-top: 6px;
}
.dec-wrap:hover { border-color: var(--euca); }
.dec-wrap input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--deep); margin-top: 2px; cursor: pointer; }
.dec-txt { font-size: 13px; color: var(--charcoal); line-height: 1.65; cursor: pointer; }
.disclaimer { font-size: 11px; color: var(--slate-lt); line-height: 1.6; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--grey); font-style: italic; }

/* ─── Success ────────────────────────────────────────────────────────────── */
.success {
  max-width: 580px; margin: 36px auto; text-align: center;
  animation: fsu .5s ease both;
}
.s-badge {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(111,191,156,.15); border: 2px solid var(--euca);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}
.success h1 { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800; color: var(--deep); margin-bottom: 8px; letter-spacing: -.5px; }
.success p { font-size: 14.5px; color: var(--slate-lt); line-height: 1.65; max-width: 400px; margin: 0 auto 22px; }
.ref-box {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(111,191,156,.1); border: 1.5px solid var(--euca);
  border-radius: var(--r-md); padding: 14px 38px; margin-bottom: 6px;
}
.ref-lbl { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--slate-lt); }
.ref-num { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 800; color: var(--deep); letter-spacing: 1px; }
.s-next { font-size: 13px; color: var(--slate); line-height: 1.7; margin-top: 22px; padding: 18px 22px; background: var(--white); border-radius: var(--r-md); border: 1px solid var(--grey); text-align: left; }
.s-next strong { color: var(--deep); }
.s-next a { color: var(--euca); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.ftr { background: var(--deep); padding: 18px 32px; }
.ftr-in { max-width: 920px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ftr p { font-size: 11.5px; color: rgba(255,255,255,.4); line-height: 1.6; }
.ftr a { color: rgba(255,255,255,.45); text-decoration: none; }
.ftr a:hover { color: var(--euca); }

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes fsu { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .hdr-inner, .main { padding-left: 16px; padding-right: 16px; }
  .card { padding: 18px 16px; }
  .c2, .c3, .c211, .c12 { grid-template-columns: 1fr; }
  .claim-grid { grid-template-columns: 1fr; }
  .s-item span { display: none; }
  .s-line { min-width: 6px; }
  .btn-next { padding: 12px 24px; font-size: 13px; }
  .rv-grid { grid-template-columns: 1fr; }
  .ftr-in { flex-direction: column; text-align: center; }
  .loss-grid { grid-template-columns: repeat(2, 1fr); }
  .prog-inner { padding: 0 16px; }
}