/* ============================================================
   DocGen — Ink & Blue design system
   Ported from the designer's reference (design/style.css).

   NOTE: the electronic-signing and QR-sharing UIs are injected at
   runtime by sign.js / share.js with their own class names
   (.sign-area, .sign-role__option, .sig-canvas, .share-panel, …).
   Those cannot be renamed, so the "RUNTIME SIGNING / SHARING" section
   at the bottom styles them to match the reference signing card.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --ink:          #101828;
  --gray-700:     #344054;
  --gray-600:     #475467;
  --gray-400:     #98A2B3;
  --accent:       #2563EB;
  --accent-700:   #1D4ED8;
  --bg:           #F9FAFB;
  --white:        #FFFFFF;
  --surface-2:    #F2F4F7;
  --border:       #E4E7EC;
  --border-2:     #EAECF0;
  --input-border: #D0D5DD;
  --focus-ring:   rgba(37,99,235,0.13);
  --danger:       #D92D20;
  --success:      #12B76A;   /* positive status dots (states covered) */

  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

/* Ensure the hidden attribute always wins (sign.js / share.js toggle [hidden]). */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

::selection { background: var(--ink); color: #fff; }

a { color: inherit; }

img, svg { display: block; }

@keyframes dgFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade { animation: dgFade .4s ease both; }

/* ---------- Layout containers ---------- */
.wrap { margin: 0 auto; padding: 0 24px; width: 100%; }
.wrap-720  { max-width: 720px; }
.wrap-960  { max-width: 960px; }
.wrap-1080 { max-width: 1080px; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-2);
}
.site-header__inner {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.brand__name {
  font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--gray-600); text-decoration: none;
  transition: color .15s;
}
.nav-link:hover { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border-2); margin-top: 80px; }
.site-footer__inner {
  max-width: 720px; margin: 0 auto; padding: 32px 24px 48px;
  text-align: center;
}
.footer-disclaimer {
  margin: 0 auto 16px; font-size: 13.5px; line-height: 1.65;
  color: var(--gray-400); max-width: 480px;
}
.footer-meta { display: flex; gap: 20px; align-items: center; justify-content: center; }
.footer-meta a {
  font-size: 13.5px; color: var(--gray-600); text-decoration: none; font-weight: 500;
  transition: color .15s;
}
.footer-meta a:hover { color: var(--ink); }
.footer-dot { font-size: 13.5px; color: var(--input-border); }
.footer-copy { font-size: 13.5px; color: var(--gray-400); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 500;
  border-radius: 10px; padding: 11px 20px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; transition: all .15s;
}
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-700); border-color: var(--accent-700); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--input-border); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--text {
  background: none; border: none; color: var(--gray-600);
  font-weight: 500; padding: 8px 4px;
}
.btn--text:hover { color: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { height: 52px; font-size: 16px; font-weight: 600; border-radius: 12px; }
.btn:disabled,
.btn--disabled {
  background: var(--border); border-color: var(--border);
  color: var(--gray-400); cursor: not-allowed;
}

/* ---------- Badges / pills / eyebrows ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--gray-600);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px 5px 10px;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.eyebrow {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--gray-400);
}

.badge-mono {
  font-size: 12.5px; font-weight: 500; color: var(--gray-600);
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; font-family: var(--mono);
}
.badge-verified {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--gray-600);
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px;
}
.badge-verified__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- Typography helpers ---------- */
.page-h1 {
  margin: 0; font-size: 38px; line-height: 1.12; font-weight: 600;
  letter-spacing: -0.035em; color: var(--ink);
}
.page-sub {
  margin: 16px 0 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--gray-600);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--gray-400); margin-bottom: 26px;
}
.breadcrumb a { color: var(--gray-600); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .current { color: var(--ink); font-weight: 500; }

/* ============================================================
   HOMEPAGE
   ============================================================ */
.hero { max-width: 720px; margin: 0 auto; padding: 80px 24px 8px; text-align: center; }
.hero .pill { margin-bottom: 26px; }
.hero h1 {
  margin: 0; font-size: 48px; line-height: 1.08; font-weight: 600;
  letter-spacing: -0.035em; color: var(--ink);
}
.hero p {
  margin: 22px auto 0; max-width: 540px; font-size: 18px; line-height: 1.6; color: var(--gray-600);
}

.catalog { max-width: 1080px; margin: 0 auto; padding: 56px 24px 96px; }
.catalog__head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px;
}
.catalog__count { font-size: 13px; color: var(--gray-400); }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }

.doc-card {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--border); border-radius: 16px; padding: 26px;
  background: #fff; transition: all .18s ease;
}
.doc-card:hover {
  border-color: var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,0.06); transform: translateY(-2px);
}
.doc-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.icon-tile {
  width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.doc-card__arrow { margin-top: 4px; color: var(--gray-400); }
.doc-card__title {
  margin: 18px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.doc-card__desc { margin: 7px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--gray-600); }
.doc-card__foot {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ============================================================
   COUNTRY SELECT PAGE (/)
   ============================================================ */
.country-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
  padding: 48px 24px;
}

.country-page__wrap { width: 100%; max-width: 440px; }

.country-page__title {
  margin: 0 0 32px; font-size: 52px; font-weight: 700;
  letter-spacing: -0.04em; color: var(--ink); text-align: center; line-height: 1;
}
@media (max-width: 620px) { .country-page__title { font-size: 40px; } }

.country-combobox { position: relative; }

.country-combobox__field { position: relative; display: flex; align-items: center; }

.country-combobox__input {
  width: 100%; height: 58px; padding: 0 48px 0 20px;
  font-size: 16.5px; font-family: inherit;
  border: 1px solid var(--input-border); border-radius: 14px;
  color: var(--ink); background: #fff; outline: none; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.country-combobox__input::placeholder { color: var(--gray-400); }
.country-combobox__input:focus,
.country-combobox__field.is-open .country-combobox__input {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); cursor: text;
}

.country-combobox__chevron {
  position: absolute; right: 18px; pointer-events: none; color: var(--gray-400);
  transition: transform .15s;
}
.country-combobox__field.is-open .country-combobox__chevron { transform: rotate(180deg); }

.country-combobox__list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.13);
  list-style: none; padding: 6px; margin: 0; z-index: 30;
}

.country-combobox__option {
  padding: 13px 16px; font-size: 16px; font-weight: 500; border-radius: 10px;
  cursor: pointer; color: var(--ink); transition: background .1s; outline: none;
}
.country-combobox__option:hover,
.country-combobox__option:focus { background: var(--surface-2); }

.country-combobox__empty {
  padding: 16px; font-size: 14.5px; color: var(--gray-400); text-align: center; list-style: none;
}

/* ============================================================
   STATE SELECTION
   ============================================================ */
.state-search { position: relative; max-width: 420px; margin-bottom: 28px; }
.search-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 1; color: var(--gray-400);
}
.search-input {
  width: 100%; height: 48px; padding: 0 14px 0 44px;
  border: 1px solid var(--input-border); border-radius: 12px;
  font-size: 15.5px; color: var(--ink); background: #fff; outline: none; font-family: inherit;
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); }

.search-dropdown {
  position: absolute; top: 56px; left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 14px 38px rgba(0,0,0,0.12); max-height: 300px; overflow: auto;
}
.search-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 15px; border: none; border-bottom: 1px solid var(--surface-2);
  background: #fff; font-family: inherit; text-align: left; transition: background .12s;
  text-decoration: none;
}
.search-row:last-child { border-bottom: none; }
.search-row--live { cursor: pointer; }
.search-row--live:hover { background: #F3F5F1; }
.search-row--soon { cursor: default; }
.search-row__main { display: flex; align-items: center; gap: 12px; }
.search-row__abbr { font-size: 11px; font-weight: 600; color: var(--gray-400); width: 22px; letter-spacing: 0.03em; }
.search-row__name { font-size: 15px; font-weight: 500; color: var(--ink); }
.search-empty { text-align: center; color: var(--gray-400); font-size: 14px; padding: 20px 0; margin: 0; }

.soon-pill {
  font-size: 11.5px; font-weight: 500; color: var(--gray-400);
  background: var(--surface-2); border-radius: 6px; padding: 4px 9px; white-space: nowrap;
}
.chevron { color: var(--gray-400); }

/* tile map */
.tile-map-wrap {
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 28px 24px 20px;
  display: inline-block;
  width: 100%;
  max-width: 860px;
}
.tile-map {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; width: 100%;
}
.tile {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 11px; font-weight: 700; font-family: inherit;
  letter-spacing: 0.04em; border: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none; user-select: none;
}
.tile--live {
  background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 5px rgba(37,99,235,.22);
}
.tile--live:hover {
  background: var(--accent-700);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(0,0,0,.22), 0 6px 16px rgba(37,99,235,.32);
}
.tile--live:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 4px rgba(37,99,235,.2); }
.tile--soon { background: var(--surface-2); color: var(--gray-400); cursor: default; }
.tile--dc { background: var(--surface-2); color: var(--gray-400); cursor: default; outline: 1.5px dashed #D0D5DD; outline-offset: -3px; }
.tile--float { margin-top: 10px; }

.legend { display: flex; gap: 22px; margin-top: 20px; align-items: center; flex-wrap: wrap; }
.legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); }
.legend__item--soon { color: var(--gray-400); }
.legend__item--dc { color: var(--gray-400); }
.legend__swatch { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.legend__swatch--live { background: var(--accent); box-shadow: 0 2px 5px rgba(37,99,235,.3); }
.legend__swatch--soon { background: var(--surface-2); border: 1px solid var(--border); }
.legend__swatch--dc { background: var(--surface-2); border: 1px solid var(--border); outline: 1.5px dashed #D0D5DD; outline-offset: -3px; }

/* mobile list */
.state-list { display: flex; flex-direction: column; gap: 8px; }
.state-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 15px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; font-family: inherit; text-align: left; transition: all .14s;
  text-decoration: none;
}
.state-row--live { cursor: pointer; }
.state-row--live:hover { border-color: var(--ink); }
.state-row--soon { cursor: default; background: var(--surface-2); }
.state-row__main { display: flex; align-items: center; gap: 12px; }
.state-row__abbr { font-size: 11px; font-weight: 600; color: var(--gray-400); width: 24px; letter-spacing: 0.03em; }
.state-row__name { font-size: 15.5px; font-weight: 500; color: var(--ink); }

.mobile-search .search-input { height: 50px; font-size: 16px; padding-left: 42px; }

/* desktop / mobile visibility */
.mobile-only { display: none; }
@media (max-width: 759px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

/* ============================================================
   STATE CONTENT + FORM PAGE
   ============================================================ */
.article { max-width: 720px; margin: 0 auto; padding: 40px 24px 0; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.article-intro { margin: 24px 0 0; font-size: 18px; line-height: 1.62; color: var(--gray-700); }

.divider { height: 1px; background: var(--border-2); margin: 44px 0; }

/* State page intro block (above Q&A) */
.state-intro { margin: 32px 0 0; }
.state-intro__heading {
  margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.state-intro__body {
  margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--gray-600);
}

/* Flow diagram — card-based two-path layout (state page intro) */
.flow-diagram { margin: 20px 0 0; display: flex; flex-direction: column; }

.flow-card {
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  padding: 12px 16px 14px;
}
.flow-card--esign {
  border-color: rgba(37,99,235,0.25);
  background: rgba(239,246,255,0.35);
}

.flow-card__label {
  display: block;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gray-400); margin-bottom: 10px;
}
.flow-card--esign .flow-card__label { color: var(--accent); }

.flow-card__steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px;
}

/* step + trailing arrow grouped so they wrap as a unit */
.flow-step-pair {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

.flow-step {
  display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0;
}

.flow-step__icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: #EFF6FF; border: 1.5px solid rgba(37,99,235,0.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.flow-step__label {
  font-size: 13px; font-weight: 500; color: var(--ink);
  text-align: center; line-height: 1.2; max-width: 72px;
}

.flow-step__arrow { color: var(--input-border); flex-shrink: 0; display: block; }

/* "or" divider with horizontal rules on either side */
.flow-or {
  display: flex; align-items: center; gap: 12px; margin: 10px 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gray-400);
}
.flow-or::before,
.flow-or::after { content: ''; flex: 1; height: 1px; background: var(--border-2); }

.flow-note { font-size: 12.5px; color: var(--gray-400); margin: 10px 0 0; }
.flow-esign-footnote { font-size: 12px; color: #667085; margin: 10px 0 0; line-height: 1.5; }

.qa-title {
  margin: 0 0 28px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.3;
}

.prose { font-size: 16.5px; line-height: 1.72; color: var(--gray-700); }
.prose p { margin: 16px 0 0; }
.prose > :first-child { margin-top: 0; }
.prose h3 {
  margin: 38px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.3;
}
.prose h3 + p { margin-top: 14px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

.callout {
  margin-top: 36px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg); padding: 22px 24px; scroll-margin-top: 80px;
}
.callout p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--gray-600); }

/* form card */
.form-anchor { scroll-margin-top: 76px; max-width: 720px; margin: 56px auto 0; padding: 0 24px; }
.form-card {
  border: 1px solid var(--border); border-radius: 20px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden;
}
.form-card__head { padding: 28px 28px 0; }
.form-card__head h2 {
  margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink);
}
.form-card__head p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--gray-600); }
.form-card__head .muted { color: var(--gray-400); }
.form-body { padding: 4px 28px 28px; }

.field-group { margin-top: 34px; }
.field-group__legend { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.field-group__desc { margin: 4px 0 0; font-size: 13.5px; color: var(--gray-400); }
.field-group__head { margin-bottom: 16px; }
.field-list { display: flex; flex-direction: column; gap: 18px; }

/* field */
.field { display: flex; flex-direction: column; }
.field__label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 7px; letter-spacing: -0.01em; }
.field__label .req { color: var(--gray-400); font-weight: 400; }
.field__control { position: relative; display: flex; align-items: center; }
.input, .textarea, .select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--input-border);
  border-radius: 10px; font-size: 15px; color: var(--ink); background: #fff;
  outline: none; font-family: inherit;
}
.input { height: 46px; padding: 0 13px; }
.input--prefixed { padding-left: 28px; }
.textarea { min-height: 88px; padding: 11px 13px; line-height: 1.5; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--gray-400); }
.field__prefix { position: absolute; left: 13px; font-size: 15px; color: var(--gray-600); pointer-events: none; }
.field__note { font-size: 13px; color: var(--gray-600); margin: 7px 0 0; line-height: 1.55; }
.field__note--indent { margin-left: 44px; }

.select-wrap { position: relative; }
.select { height: 46px; padding: 0 40px 0 13px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.select-chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--gray-600);
}

.checkbox-card {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 14px 15px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  transition: all .14s;
}
.checkbox-card:hover { border-color: var(--input-border); background: var(--bg); }
.checkbox-card input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ink); flex: none; cursor: pointer; }
.checkbox-card span { font-size: 14.5px; color: var(--gray-700); line-height: 1.55; font-weight: 500; }

.form-divider { height: 1px; background: var(--border-2); margin: 34px 0 26px; }

/* form validation (form.js) */
.form-field.has-error .input,
.form-field.has-error .select,
.form-field.has-error .textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 13px; margin: 7px 0 0; }

/* locked (read-only) fields on the counterparty's review page (share.js) */
.form-field.field-locked .field__label { color: var(--gray-400); }
.form-field.field-locked .input,
.form-field.field-locked .select,
.form-field.field-locked .textarea {
  background: var(--surface-2); color: var(--gray-600); cursor: not-allowed;
}

/* ---------- Notices (form: smog / title-notarization / notary) ---------- */
.notice {
  border: 1px solid var(--border); border-left: 3px solid var(--gray-400);
  background: var(--bg); border-radius: 10px; padding: 14px 16px;
  font-size: 14.5px; line-height: 1.55; color: var(--gray-700); margin: 22px 0 0;
}
.notice strong { color: var(--ink); font-weight: 600; }
.notice--info { border-left-color: var(--accent); }
.notice--notary { border-left-color: var(--danger); }

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal { max-width: 720px; margin: 0 auto; padding: 56px 24px 0; }
.legal h1 {
  margin: 0; font-size: 38px; line-height: 1.12; font-weight: 600;
  letter-spacing: -0.035em; color: var(--ink);
}
.legal .updated { margin: 12px 0 0; font-size: 14px; color: var(--gray-400); }
.legal__body { margin-top: 32px; font-size: 16.5px; line-height: 1.72; color: var(--gray-700); }
.legal__body p { margin: 16px 0 0; }
.legal__body h3 {
  margin: 38px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.3;
}
.legal__body h3 + p { margin-top: 14px; }
.legal__body a { color: var(--accent); text-decoration: none; }
.legal__body a:hover { text-decoration: underline; }
.legal__body strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   RUNTIME SIGNING / SHARING (injected by sign.js / share.js)
   Styled to match the reference signing card. Class names are
   fixed by the JS and must not change.
   ============================================================ */

/* The signing area is injected right after the Generate button, inside the
   form card. Present it as a distinct card, like the reference sign-card. */
.sign-area {
  margin-top: 26px;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg); padding: 24px 26px;
}

/* Notary-only states (Louisiana): the sign-area holds just the notice. */
.sign-notice { margin: 0; }

/* "Sign" entry button -> ghost button, full width. */
.btn-sign {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; font-family: inherit; font-size: 15px; font-weight: 600;
  background: #fff; color: var(--ink); border: 1px solid var(--input-border);
  border-radius: 11px; padding: 13px 18px; cursor: pointer; transition: all .15s;
}
.btn-sign:hover { border-color: var(--ink); }

.sign-flow { margin-top: 20px; }

/* Role toggle -> two selectable cards (reference .role-grid / .role-btn). */
.sign-role { border: none; margin: 0 0 20px; padding: 0; }
.sign-role__legend { margin: 0 0 10px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.sign-role__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sign-role__option {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 15px; border-radius: 11px; cursor: pointer;
  background: #fff; border: 1px solid var(--input-border);
  font-size: 15px; font-weight: 600; color: var(--ink); transition: all .15s;
}
.sign-role__option:has(input:checked) {
  border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.14);
}
.sign-role__option input[type="radio"] {
  width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; cursor: pointer;
}

/* ESIGN consent row (reference .consent). */
.checkbox-label.sign-consent {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin: 0 0 20px;
}
.checkbox-label.sign-consent input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ink); flex: none; cursor: pointer;
}
.checkbox-label.sign-consent span { font-size: 13.5px; color: var(--gray-600); line-height: 1.55; }

/* Signature pad (reference .sig-pad). */
.sign-pad { margin-top: 4px; }
.sign-pad__hint { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.sig-canvas-wrap {
  position: relative; border: 1px solid var(--input-border); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.sig-canvas-wrap.is-disabled { background: var(--bg); }
/* Signature baseline, shown only when the pad is active. */
.sig-canvas-wrap::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 44px;
  border-bottom: 1px solid var(--border); pointer-events: none;
}
.sig-canvas-wrap.is-disabled::after { display: none; }
.sig-canvas { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.sig-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; background: rgba(250,250,250,0.6);
  font-size: 13.5px; color: var(--gray-400); line-height: 1.5;
}
/* The placeholder overlay is only shown while the pad is locked; sign.js /
   share.js toggle .is-disabled on the wrap but leave the element in the DOM. */
.sig-canvas-wrap:not(.is-disabled) .sig-placeholder { display: none; }
.sign-pad__error { margin: 12px 0 0; font-size: 13.5px; color: var(--danger); }

.sign-pad__actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
/* Clear sits on the left; the primary action on the right. */
.sign-pad__actions .btn-sign-secondary:first-child { margin-right: auto; }

.btn-sign-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  background: #fff; color: var(--gray-600); border: 1px solid var(--input-border);
  border-radius: 10px; padding: 10px 18px; cursor: pointer; transition: all .15s;
}
.btn-sign-secondary:hover { border-color: var(--ink); color: var(--ink); }

.btn-sign-done {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 18px; cursor: pointer; transition: all .15s;
}
.btn-sign-done:hover { background: var(--accent-700); border-color: var(--accent-700); }
.btn-sign-done:disabled {
  background: var(--border); border-color: var(--border); color: var(--gray-400); cursor: not-allowed;
}

/* ---------- QR sharing (share.js) ---------- */
.share-host { margin-top: 26px; }
.share-panel {
  border: 1px solid var(--border); border-radius: 20px; background: var(--bg);
  padding: 26px 28px;
}
.share-panel__title { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.share-status { margin: 0 0 14px; font-size: 15px; color: var(--gray-600); }

.share-box { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-2); }
.share-box__instr { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--gray-700); }
.share-box__instr strong { color: var(--ink); font-weight: 600; }

.share-qr {
  display: inline-flex; justify-content: center; align-items: center;
  border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: #fff;
}
.share-qr canvas, .share-qr img {
  width: 100% !important; height: auto !important; max-width: 180px; image-rendering: pixelated;
}
.share-qr__fallback { margin: 0; font-size: 14px; color: var(--gray-600); }

/* Share.js reuses .btn-sign-done for the primary send action; give it room. */
.share-panel > .btn-sign-done,
.share-box > .btn-sign-done { margin-top: 16px; width: 100%; }

.share-link { margin-top: 16px; }
.share-link__note { margin: 10px 0 0; font-size: 13px; color: var(--gray-600); line-height: 1.55; }
.share-link__sms { margin: 6px 0 0; font-size: 12.5px; color: var(--gray-400); line-height: 1.5; }

.btn-quiet {
  display: block; width: 100%; margin-top: 18px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  background: none; border: none; color: var(--gray-600);
  text-decoration: underline; cursor: pointer;
}
.btn-quiet:hover { color: var(--ink); }
.btn-quiet:disabled { color: var(--gray-400); cursor: default; }

/* First party's signature preview shown to the counterparty. */
.seller-sig { margin: 18px 0; }
.seller-sig__label {
  margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gray-400);
}
.seller-sig__canvas {
  display: block; width: 100%; height: 90px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
}

/* Delivery buttons row (Share / Download). */
.share-choice { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.share-choice__btn { width: 100%; white-space: normal; }

/* ============================================================
   COMPLETION PAGE
   ============================================================ */
.complete-loading { padding: 48px 0; text-align: center; }
.complete-loading__text { margin: 0; font-size: 16px; color: var(--gray-400); }

.complete-save-note {
  margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--gray-600);
}

.complete-actions {
  margin: 32px 0 0; display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;
}
.complete-qr-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.complete-qr-label { margin: 0; font-size: 13px; color: var(--gray-400); }
.complete-action-col {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start; flex: 1; min-width: 200px;
}
.complete-link-row { display: flex; align-items: center; gap: 10px; }
.complete-copy-confirm { font-size: 13.5px; color: var(--accent); font-weight: 500; }

.complete-checklist {
  margin: 44px 0 0; padding: 24px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--bg);
}
.complete-checklist__heading {
  margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.complete-checklist__placeholder {
  margin: 12px 0 0; font-size: 15px; color: var(--gray-400); font-style: italic;
}

.complete-promo {
  margin: 44px 0 0; padding-top: 32px; border-top: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 18px;
}
.complete-promo__item {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--gray-600);
}
.complete-promo__share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--gray-600);
  background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline;
}
.complete-promo__share-btn:hover { color: var(--ink); }
.complete-promo__more { margin-top: 8px; }
.complete-promo__more-note {
  margin: 8px 0 0; font-size: 14px; color: var(--gray-400);
}
.complete-error { padding: 40px 0; }
.complete-error__body {
  margin: 14px 0 24px; font-size: 16px; line-height: 1.6; color: var(--gray-600);
}

/* ---------- responsive type ---------- */
@media (min-width: 600px) {
  .share-choice { flex-direction: row; }
  .share-choice__btn { flex: 1 1 0; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: 36px; }
  .page-h1, .legal h1 { font-size: 30px; }
  .hero { padding-top: 56px; }
  .form-card__head, .form-body { padding-left: 20px; padding-right: 20px; }
  .sign-area, .share-panel { padding-left: 20px; padding-right: 20px; }
}