/* Real estate mortgage application (/real-estate/application) */
:root {
      --bg: #f4f6f4;
      --panel: #ffffff;
      --ink: #1a2421;
      --muted: #5c6b66;
      --line: #d5ddd9;
      --accent: #0d6e6e;
      --accent-soft: #e6f3f2;
      --danger: #b42318;
      --warn: #8a6a14;
    }
    * { box-sizing: border-box; }
    .real-estate-application {
      margin: 0;
      font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.45;
    }
    header {
      background: var(--panel);
      border-bottom: 1px solid var(--line);
      padding: 1rem 1.25rem;
    }
    header h1 {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 650;
      letter-spacing: -0.02em;
    }
    header .sub {
      margin: 0.25rem 0 0;
      color: var(--muted);
      font-size: 0.85rem;
    }
    header .nav {
      margin-top: 0.65rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    a.btn, button.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font: inherit;
      font-size: 0.85rem;
      font-weight: 600;
      text-decoration: none;
      border-radius: 6px;
      padding: 0.45rem 0.75rem;
      min-height: 2.2rem;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      cursor: pointer;
    }
    a.btn.primary, button.btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    main {
      max-width: 720px;
      margin: 0 auto;
      padding: 1.1rem 1rem 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    section {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 1rem 1.05rem 1.1rem;
    }
    h2 {
      margin: 0 0 0.65rem;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      font-weight: 600;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.55rem;
    }
    @media (max-width: 560px) {
      .grid { grid-template-columns: 1fr; }
    }
    .field {
      background: var(--accent-soft);
      border-radius: 8px;
      padding: 0.55rem 0.65rem;
    }
    .field.span2 { grid-column: 1 / -1; }
    .field span {
      display: block;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--muted);
    }
    .field b {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.95rem;
      font-variant-numeric: tabular-nums;
      font-weight: 650;
    }
    .field .detail {
      display: block;
      margin-top: 0.25rem;
      font-size: 0.78rem;
      font-weight: 400;
      color: var(--muted);
    }
    .status-pill {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 0.2rem 0.45rem;
      border-radius: 99px;
      margin-bottom: 0.55rem;
    }
    .status-pill.have {
      background: #d8f0eb;
      color: #0d6e6e;
    }
    .status-pill.need {
      background: #fff1d6;
      color: var(--warn);
    }
    ul.check {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    ul.check li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.45rem 0.55rem;
      padding: 0.55rem 0.6rem;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      font-size: 0.88rem;
    }
    ul.check li.have { border-color: #9dcdc6; background: #f3faf8; }
    ul.check li.need { border-color: #e6c98a; background: #fffbf0; }
    ul.check .mark {
      font-weight: 700;
      font-size: 0.75rem;
      color: var(--muted);
      padding-top: 0.1rem;
    }
    ul.check li.have .mark { color: var(--accent); }
    ul.check li.need .mark { color: var(--warn); }
    ul.check .meta {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.75rem;
      color: var(--muted);
    }
    .empty {
      color: var(--muted);
      font-size: 0.9rem;
    }
    .footnote {
      font-size: 0.75rem;
      color: var(--muted);
      margin: 0;
    }
    .banks {
      margin: 0;
      padding-left: 1.1rem;
      font-size: 0.88rem;
    }
    .property-card {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 0.85rem;
      align-items: start;
    }
    @media (max-width: 560px) {
      .property-card { grid-template-columns: 1fr; }
    }
    .property-card img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #eef3f1;
    }
    .property-card .ph {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 8px;
      border: 1px dashed var(--line);
      background: #f0f5f3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: var(--muted);
      text-align: center;
      padding: 0.5rem;
    }
    .property-card h3 {
      margin: 0 0 0.35rem;
      font-size: 1.05rem;
      font-weight: 650;
      letter-spacing: -0.02em;
      line-height: 1.3;
    }
    .property-card .price {
      font-size: 1.05rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--accent);
      margin-bottom: 0.35rem;
    }
    .property-card .meta-line {
      font-size: 0.85rem;
      color: var(--muted);
      margin: 0.15rem 0;
    }
    .property-card a {
      color: var(--accent);
      font-weight: 600;
      font-size: 0.88rem;
    }