/* ============================================================
   Capital Mortgages — resource & company pages
   (about, careers, apply, first-time buyers, mortgage basics,
    glossary)
   ============================================================ */

/* ---------- shared page hero (matches faq-hero proportions) ---------- */
.page-hero { padding: 64px 0 46px; }
.page-hero.darkbg .eyebrow { color: var(--brand-ink); }
.page-hero h1 { font-size: 54px; line-height: 1.06; max-width: 22ch; }
.page-hero.darkbg h1 { color: var(--on-dark); }
.page-hero .sub { font-size: 21px; max-width: 58ch; margin-top: 18px; }
.page-hero.darkbg .sub { color: var(--on-dark-soft); }
.page-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* in-page jump pills (same look as the FAQ hero's) */
.page-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.page-jump a {
  font-size: 13.5px; font-weight: 600; padding: 9px 16px;
  border: 1px solid rgba(247, 244, 236, .3); border-radius: 999px;
  color: var(--on-dark-soft); transition: border-color .15s ease, color .15s ease;
}
.page-jump a:hover { border-color: var(--on-dark); color: var(--on-dark); }

/* ---------- generic prose sections ---------- */
.prose { max-width: 68ch; }
.prose p + p { margin-top: 14px; }
.prose h3 { font-size: 24px; margin: 34px 0 10px; }
.prose ul { margin: 12px 0 0 20px; display: grid; gap: 8px; }
.prose li { color: var(--ink-soft); }
/* The long-form reading copy on about / mortgage-basics / first-time-buyers /
   glossary. It matches the body floor rather than sitting under it — these
   are the pages people actually read, and 16.5px against a 19px base made
   the prose the smallest text on its own page. */
.prose p { color: var(--ink-soft); font-size: 19px; }
.prose strong { color: var(--ink); }

/* ---------- pillar / benefit cards ---------- */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar-grid .card { padding: 28px 26px; display: grid; gap: 10px; align-content: start; }
.pillar-grid .card .k { font-size: 12.5px; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.pillar-grid .card h3 { font-size: 21px; }
.pillar-grid .card p { font-size: 17px; color: var(--ink-soft); }

/* numbered steps (first-time buyers, careers) */
.step-list { display: grid; gap: 0; counter-reset: step; max-width: 68ch; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line-soft); }
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step .n { font-family: var(--serif); font-size: 30px; color: var(--brand-ink); font-weight: 560; }
.step h3 { font-size: 20px; margin-bottom: 6px; }
.step p { font-size: 17.5px; color: var(--ink-soft); }

/* ---------- mortgage basics ---------- */
.basic { scroll-margin-top: calc(var(--bar-h) + 16px); }
.basic + .basic { margin-top: 64px; }
.basic-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: start; }
.basic-grid aside .card { padding: 26px 24px; display: grid; gap: 8px; }
.basic-grid aside .card .k { font-size: 12.5px; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.basic-grid aside .card p { font-size: 16.5px; color: var(--ink-soft); }
.basic-grid aside .card .big { font-family: var(--serif); font-size: 30px; letter-spacing: -0.01em; }

/* ---------- glossary ---------- */
.gloss-group { padding: 34px 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 90px 1fr; gap: 24px; }
.gloss-group:first-of-type { border-top: 0; padding-top: 0; }
.gloss-letter { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--brand-ink); }
.gloss-group dl { display: grid; gap: 20px; }
.gloss-group dt { font-weight: 650; font-size: 18px; }
.gloss-group dd { color: var(--ink-soft); font-size: 17.5px; margin-top: 4px; max-width: 68ch; }

/* ---------- apply page ---------- */
.apply-grid { display: grid; grid-template-columns: 1fr .95fr; gap: 72px; align-items: start; padding-top: 76px; }
.apply-copy { display: grid; gap: 24px; }
.apply-copy .sub { font-size: 21px; color: var(--ink-soft); max-width: 44ch; }
.apply-next { display: grid; margin-top: 12px; }
.anext { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.anext .n { font-family: var(--serif); font-size: 26px; color: var(--brand-ink); font-weight: 560; }
.anext h3 { font-size: 17px; margin-bottom: 4px; }
.anext p { font-size: 16.5px; color: var(--ink-soft); }

/* form controls (same recipe as the contact page) */
.form-card { padding: 34px 32px 32px; display: grid; gap: 16px; }
.form-card h2 { font-size: 24px; }
.form-card .hint { font-size: 16px; color: var(--ink-soft); margin-top: -8px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 620; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  /* 17px, not 15: iOS Safari zooms the page on focus for any input under
     16px, and the old 15 sat just under that line. */
  font-family: var(--sans); font-size: 17px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-mid);
}
.form-card .btn { justify-self: start; margin-top: 4px; }
.form-note { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- closing CTA band (shared) ---------- */
.page-closing { padding: 96px 0; }
.page-closing .card { padding: 44px 40px; display: grid; gap: 14px; }
.page-closing h2 { font-size: 34px; max-width: 24ch; }
.page-closing p { color: var(--ink-soft); max-width: 58ch; }
.page-closing .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pillar-grid { grid-template-columns: 1fr 1fr; }
  .basic-grid, .apply-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .page-hero h1 { font-size: 38px; }
  .pillar-grid, .frow { grid-template-columns: 1fr; }
  .gloss-group { grid-template-columns: 1fr; gap: 10px; }
  .gloss-letter { font-size: 34px; }
}

/* A form field must be allowed to SHRINK. An <input> carries an intrinsic
   width from its default size attribute (~20 characters), and in a grid the
   item's automatic minimum is that intrinsic width — so the field could not
   go below roughly 208px, two of them in a .frow could not go below 431px,
   and the form card's min-content pinned the whole .contact-grid track to
   497px inside a 375px phone. The page scrolled sideways by 144px because of
   an input's default size attribute. min-width:0 removes the automatic
   minimum; width:100% then ties the control to whatever the track gives it. */
.field { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
/* Two fields side by side stop being two fields at phone widths — the pair is
   ~431px of min-content before either can shrink. */
@media (max-width: 620px) { .frow { grid-template-columns: 1fr; } }