/* StatementSmith — Direction A ("Guided") design system, lifted from the
   approved r6 mockups (dsg-c73622d38bd8) at /assets/designs/.../r6/. Desktop
   rules first (matching the 1280px screen-*-a.html mockups), then a single
   @media override block for narrow viewports (matching the 390px
   screen-*-a-mobile.html mockups). The fake browser chrome in the mockups
   (.browserbar / url pill) was a screenshot-framing device only and is not
   reproduced here. */

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; padding: 0; background: #F6F3EC; }
a { text-decoration: none; color: inherit; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; color: #16233B; }

.page { background: #F6F3EC; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- top nav (desktop) ---- */
.topnav { display: flex; align-items: center; justify-content: space-between; padding: 26px 56px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-weight: 700; font-size: 25px; letter-spacing: -0.01em; color: #16233B; }
.navlinks { display: flex; align-items: center; gap: 30px; font-size: 17px; color: #4B5768; }
.navlinks .cta { background: #16233B; color: #F6F3EC; padding: 11px 20px; border-radius: 999px; font-weight: 600; }
.hamb { display: none; flex-direction: column; gap: 4px; }
.hamb span { width: 20px; height: 2px; background: #16233B; display: block; }

.backrow { display: flex; align-items: center; gap: 8px; padding: 4px 56px 0 56px; font-size: 16px; color: #4B5768; font-weight: 600; }
.content { padding: 8px 56px 52px 56px; flex: 1; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0B5A41; background: #EFEAD9; border: 1px solid #DCD3B6; padding: 7px 14px; border-radius: 999px; }
h1.hero { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-size: 58px; line-height: 1.05; letter-spacing: -0.02em; margin: 18px 0 16px 0; font-weight: 700; max-width: 900px; }
h1.page-h { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-size: 40px; line-height: 1.1; letter-spacing: -0.015em; margin: 14px 0 8px 0; font-weight: 700; }
p.sub { font-size: 20px; line-height: 1.55; color: #4B5768; margin: 0 0 28px 0; max-width: 700px; }
p.sub-s { font-size: 17px; line-height: 1.55; color: #4B5768; margin: 0 0 22px 0; }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #0E6B4E; color: #FFFFFF; font-size: 18px; font-weight: 700; padding: 17px 26px; border-radius: 10px; box-shadow: 0 1px 2px rgba(22,35,59,.06), 0 8px 20px rgba(22,35,59,.08); border: none; cursor: pointer; font-family: inherit; }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #16233B; font-size: 16px; font-weight: 600; padding: 10px 4px; border-bottom: 2px solid #16233B; border-top: none; border-left: none; border-right: none; cursor: pointer; font-family: inherit; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #FFFFFF; border: 2px solid #DCD6C6; color: #16233B; font-size: 16px; font-weight: 600; padding: 14px 22px; border-radius: 10px; cursor: pointer; font-family: inherit; }
.btn-outline.danger { border-color: #B5541A; }

.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cols { display: flex; gap: 28px; align-items: flex-start; }
.col { flex: 1; min-width: 0; }
.chipbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 4px 0; }
.fchip { background: #FFFFFF; border: 1px solid #DCD6C6; color: #4B5768; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 14px; padding: 8px 12px; border-radius: 8px; }
.card { background: #FFFFFF; border: 1px solid #DCD6C6; border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(22,35,59,.05), 0 6px 16px rgba(22,35,59,.05); }
.card h3 { margin: 0 0 8px 0; font-size: 22px; font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; }
.card p { margin: 0; font-size: 15px; color: #4B5768; line-height: 1.5; }
.divider { height: 1px; background: #DCD6C6; margin: 32px 0; }
.section-label { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8A8F98; margin-bottom: 14px; }
.foot { padding: 28px 56px 40px 56px; border-top: 1px solid #DCD6C6; color: #8A8F98; font-size: 14px; line-height: 1.6; }

table.txtable { width: 100%; border-collapse: collapse; }
table.txtable th { text-align: left; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #8A8F98; padding: 0 12px 10px 12px; border-bottom: 1px solid #DCD6C6; font-weight: 700; }
table.txtable td { padding: 13px 12px; font-size: 16px; border-bottom: 1px solid #DCD6C6; vertical-align: top; }
table.txtable td.num { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; text-align: right; white-space: nowrap; }
table.txtable tr.dup td { background: #FBEEE3; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.badge.warn { background: #B5541A; color: #fff; }
.badge.ok { background: #0E6B4E; color: #fff; }
.badge.muted { background: #EFEAD9; color: #4B5768; border: 1px solid #DCD3B6; }
.noteflag { margin-top: 12px; font-size: 15px; line-height: 1.55; color: #4B5768; background: #FBEEE3; border-left: 4px solid #B5541A; padding: 15px 18px; border-radius: 8px; }

.destcard { border: 2px solid #DCD6C6; border-radius: 14px; padding: 24px; background: #FFFFFF; cursor: pointer; display: block; width: 100%; text-align: left; font-family: inherit; }
.destcard.sel { border-color: #0E6B4E; box-shadow: 0 0 0 4px rgba(14,107,78,.13); }
.destcard h3 { margin: 0 0 8px 0; font-size: 22px; font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; }
.destcard p { margin: 0; font-size: 15px; color: #4B5768; line-height: 1.5; }
.radio { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #DCD6C6; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.radio.on { border-color: #0E6B4E; }
.radio.on::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #0E6B4E; }

.pricecard { border-radius: 14px; padding: 28px; border: 2px solid #DCD6C6; background: #FFFFFF; position: relative; }
.pricecard.hi { border-color: #0E6B4E; box-shadow: 0 1px 2px rgba(22,35,59,.06), 0 8px 20px rgba(22,35,59,.07); }
.pill-reco { position: absolute; top: -16px; left: 28px; background: #0E6B4E; color: #FFF; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; }
.priceline { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 38px; font-weight: 700; margin: 6px 0 2px 0; }
.pricesub { font-size: 14px; color: #8A8F98; margin-bottom: 16px; }
.benefits { list-style: none; margin: 0 0 20px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.benefits li { display: flex; gap: 9px; font-size: 15px; color: #4B5768; align-items: flex-start; }

.summarygrid { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 26px 0; }
.sumchip { background: #EFEAD9; border: 1px solid #DCD3B6; border-radius: 10px; padding: 13px 16px; font-size: 15px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }

.errcard { border-radius: 14px; border: 2px solid #B5541A; background: #FBEEE3; padding: 26px; }
.errcard h3 { margin: 0 0 8px 0; font-size: 21px; display: flex; align-items: center; gap: 9px; }
.errcard p { margin: 0 0 12px 0; font-size: 16px; line-height: 1.55; }

.dropzone { border: 3px dashed #DCD6C6; border-radius: 14px; padding: 52px 26px; text-align: center; background: #FFFFFF; }
.dropzone input[type=file] { display: none; }

.steplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; align-items: flex-start; gap: 14px; font-size: 18px; }
.step.pending { color: #8A8F98; }
.progressbar { height: 10px; border-radius: 999px; background: #EFEAD9; overflow: hidden; }
.progressbar .fill { height: 100%; background: #0E6B4E; border-radius: 999px; transition: width .4s ease; }

/* ---- mobile companion "gate" (Upload/Processing/Review/Destination) ---- */
.gatewrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 6px 10px 6px; }
.gatewrap .ic { margin-bottom: 18px; }
.gatewrap h1 { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-size: 26px; margin: 0 0 10px 0; }
.gatewrap p { font-size: 15px; line-height: 1.55; color: #4B5768; margin: 0 0 24px 0; }

.mobile-gate { display: none; }
.main-flow { display: block; }

/* ================= mobile (<=900px), matching the 390px mockups ================= */
@media (max-width: 900px) {
  .topnav { padding: 0 18px; height: 56px; }
  .brand { font-size: 18px; gap: 8px; }
  .navlinks > a:not(.cta), .navlinks .cta { display: none; }
  .hamb { display: flex; }
  .backrow { padding: 14px 18px 0 18px; font-size: 14px; }
  .content { padding: 14px 18px 34px 18px; }
  .eyebrow { font-size: 11.5px; padding: 6px 11px; }
  h1.hero { font-size: 32px; line-height: 1.08; margin: 14px 0 10px 0; }
  h1.page-h { font-size: 26px; line-height: 1.12; margin: 12px 0 8px 0; }
  p.sub { font-size: 15px; margin: 0 0 20px 0; }
  p.sub-s { font-size: 14px; }
  .btn-primary, .btn-outline { width: 100%; padding: 15px 20px; font-size: 16px; }
  .cols { flex-direction: column; }
  .chipbar { margin: 16px 0 4px 0; }
  .fchip { font-size: 12px; padding: 6px 10px; }
  .card { padding: 18px; }
  .card h3 { font-size: 18px; }
  .card p { font-size: 14px; }
  .divider { margin: 22px 0; }
  .foot { padding: 22px 18px 30px 18px; font-size: 12px; }
  .pricecard { padding: 20px; }
  .priceline { font-size: 30px; }

  /* companion gate swap: functional-step pages show the gate unless the
     user chose "Continue anyway" (adds .forced-open on the wrapper) */
  .mobile-gate { display: block; }
  .main-flow { display: none; }
  .forced-open .mobile-gate { display: none; }
  .forced-open .main-flow { display: block; }
}