/* The fuel card application - the applicant's screens. One card per step,
   the masthead, the stamp, the steps. Everything else comes from site.css.
   Dan: no wasted space, no glorified Excel (build spec §3.1). */

.apply-page { background: #f4f5f7; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.apply-mast { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.1rem; background: #fff; border-bottom: 1px solid #e3e6ea; }
/* Their wordmark is 3251x695, so 4.68:1. Height-driven, width auto, which keeps
   it honest if the file is ever swapped for one PFC sends. 24px reads level with
   the ROMOTANA lockup opposite without overpowering it. */
.apply-mast__pfc { height: 24px; width: auto; display: block; }
.apply-mast__romotana { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: #0b2a5b; }
.apply-mast__romotana img { height: 30px; width: auto; }
.apply-mast__romotana strong { font-size: .95rem; letter-spacing: .04em; }

.apply-stamp { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
  padding: .35rem 1.1rem 0; font-size: .74rem; color: #5b6472; font-variant-numeric: tabular-nums; }
.apply-stamp span { white-space: nowrap; }
@media (max-width: 40rem) {
  /* On a phone the stamp wraps rather than widening the page: a line that
     pushes the viewport sideways is the one thing a stamp must never do. */
  .apply-stamp span { white-space: normal; overflow-wrap: anywhere; }
}

.apply-steps { display: flex; justify-content: center; gap: 0; list-style: none; margin: .9rem auto 0; padding: 0 .5rem; max-width: 44rem; width: 100%; box-sizing: border-box; }
/* width: 100% matters: the page is a column flexbox, and a flex item with auto
   margins shrinks to its content - the seven labels were running together. */
.apply-steps li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; position: relative; font-size: .72rem; color: #7a8491; padding: 0 .3rem; min-width: 0; }
.apply-steps__label { white-space: nowrap; }
.apply-steps li::before { content: ""; position: absolute; top: .45rem; left: -50%; width: 100%; height: 2px; background: #d7dbe1; z-index: 0; }
.apply-steps li:first-child::before { display: none; }
.apply-steps__dot { width: .95rem; height: .95rem; border-radius: 50%; background: #fff; border: 2px solid #c9cfd7; z-index: 1; box-sizing: border-box; }
.apply-steps li.is-done .apply-steps__dot { background: #0b2a5b; border-color: #0b2a5b; }
.apply-steps li.is-done::before, .apply-steps li.is-current::before { background: #0b2a5b; }
.apply-steps li.is-current .apply-steps__dot { border-color: #0b2a5b; border-width: 4px; }
.apply-steps li.is-current { color: #0b2a5b; font-weight: 600; }
.apply-steps__phone { display: none; text-align: center; font-size: .85rem; color: #0b2a5b; margin: .6rem 0 0; font-weight: 600; }
@media (max-width: 40rem) {
  .apply-steps__label { display: none; }
  .apply-steps__phone { display: block; }
  .apply-stamp { align-items: flex-start; }
}

.apply-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; max-width: 44rem; width: calc(100% - 2rem);
  margin: 1rem auto; padding: 1.4rem 1.4rem 1.6rem; box-sizing: border-box; }
.apply-card h1 { font-size: 1.35rem; margin: 0 0 .35rem; }
.apply-card .lede { margin: 0 0 1.1rem; color: #4a5361; font-size: .98rem; line-height: 1.5; }
.apply-card .form__row { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .apply-card .form__row--name { grid-template-columns: 1fr 5rem 1fr; }
  .apply-card .form__row--2 { grid-template-columns: 1fr 1fr; }
  .apply-card .form__row--place { grid-template-columns: 1fr 7rem 7rem; }
}
.apply-card .field { margin: 0 0 .8rem; }
.apply-card .field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.apply-card .field input, .apply-card .field select { width: 100%; min-height: 44px; box-sizing: border-box; font-size: 1rem; }
.apply-card .field__hint { margin: .25rem 0 0; font-size: .82rem; color: #6b7686; }
.apply-card .field__error { margin: .25rem 0 0; font-size: .85rem; color: #b42318; }
.apply-card .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; margin: .4rem 0 1rem; }
.apply-card .consent input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: 0 0 auto; }
.apply-card .btn--block { width: 100%; min-height: 48px; font-size: 1.02rem; }
/* On the new-application door: the way in for someone coming back from one of our emails. */
.apply-card .apply-returning { margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 8px; background: #eef4ff; border: 1px solid #c9daf5; font-size: .92rem; }
.apply-card .apply-returning a { font-weight: 700; }
.apply-card .needs__title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #55606e; margin: 0 0 .5rem; }
.apply-card .needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.apply-card .needs li { background: #f4f5f7; border-radius: 8px; padding: .6rem .7rem; font-size: .86rem; }
.apply-card .needs strong { display: block; font-size: .95rem; margin-bottom: .1rem; }
@media (max-width: 40rem) { .apply-card .needs { grid-template-columns: 1fr; } }

.apply-code input { font-family: "Courier New", monospace; font-size: 1.9rem; letter-spacing: .35em; text-align: center; min-height: 56px; }
.apply-ref { font-family: "Courier New", monospace; font-size: 1.5rem; letter-spacing: .06em; color: #0b2a5b; margin: .2rem 0 .8rem; }
.apply-stage { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: #e8eef9; color: #0b2a5b; font-weight: 600; font-size: .85rem; }
.apply-next { margin: 1rem 0 0; padding: 0 0 0 1.1rem; }
.apply-next li { margin: .25rem 0; }
.apply-foot { text-align: center; font-size: .78rem; color: #7a8491; padding: .8rem 1rem 1.4rem; margin-top: auto; }
.apply-foot a { color: inherit; }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Phase B1: the steps ---------------------------------------------- */
.apply-steps li a { display: flex; flex-direction: column; align-items: center; gap: .3rem; color: inherit; text-decoration: none; }
.apply-steps li a:hover .apply-steps__label { text-decoration: underline; }
.apply-page .btn--link { background: none; border: 0; color: #0b2a5b; text-decoration: underline; padding: .3rem .4rem; cursor: pointer; }
.apply-aside { text-align: center; margin-top: .6rem; }
.apply-card .apply-notice { margin: 0 0 1rem; }
.apply-card .form__row--2 .field { margin-bottom: .8rem; }
.apply-card .field textarea { width: 100%; box-sizing: border-box; font-size: 1rem; font: inherit; padding: .55rem .7rem; border: 1px solid #c9cfd7; border-radius: 6px; }
.apply-card .field__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.apply-card .field__tick { display: flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 400; margin: .35rem 0 0; }
.apply-card .field__tick input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; }
.apply-card .field__tick--lead { margin: 0 0 .7rem; font-size: .95rem; }
.apply-choice { display: flex; gap: 1.2rem; flex-wrap: wrap; min-height: 44px; align-items: center; }
.apply-choice label { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; }
.apply-card .field .apply-choice input, .apply-card .field .field__tick input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; }
/* One choice per line, each with its own explanation under it. For a question
   where the wrong answer is costly and the difference needs a sentence, not a
   word — the bank account type (step 4). */
.apply-choice--stacked { flex-direction: column; align-items: stretch; gap: .6rem; }
.apply-choice--stacked label { align-items: flex-start; gap: .55rem; }
.apply-choice--stacked label > span { display: block; }
.apply-choice--stacked .field__hint { margin: .1rem 0 0; }

/* an address group: three fields and, under them, the post office's answer */
.apply-addr { border: 0; padding: 0; margin: 0 0 .4rem; min-width: 0; }
.apply-addr legend { font-weight: 700; font-size: .95rem; padding: 0; margin: .2rem 0 .5rem; }
.apply-addr__card { border: 1px solid #cfe3d2; background: #f1faf3; border-radius: 8px; padding: .7rem .8rem; margin: -.2rem 0 .9rem; font-size: .9rem; }
.apply-addr__card--miss { border-color: #e8d9a8; background: #fdf8e7; }
.apply-addr__card p { margin: 0 0 .45rem; }
.apply-addr__card ins { text-decoration: underline; text-decoration-color: #0b2a5b; }
.apply-addr__card .apply-addr__btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.apply-addr__card .btn--sm { min-height: 36px; }

/* the SSN field: a password input with its own show/hide */
.apply-reveal { display: flex; gap: .4rem; }
.apply-reveal input { flex: 1 1 auto; min-width: 0; }
.apply-reveal__btn { flex: 0 0 auto; min-height: 44px; padding: 0 .8rem; border: 1px solid #c9cfd7; background: #f4f5f7; border-radius: 6px; font: inherit; font-size: .88rem; cursor: pointer; }

/* the company card at step 2 */
.apply-company { border: 1px solid #e3e6ea; border-radius: 10px; padding: .9rem 1rem; margin: 0 0 1.1rem; background: #fafbfc; }
.apply-company__name { font-weight: 700; font-size: 1.12rem; margin: 0; }
.apply-company__dba { margin: .15rem 0 0; color: #4a5361; font-size: .92rem; }
.apply-company__facts { display: grid; grid-template-columns: repeat(3, auto); gap: .6rem 1.4rem; margin: .7rem 0 0; justify-content: start; }
.apply-company__facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #7a8491; }
.apply-company__facts dd { margin: .1rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.apply-company__standing { display: inline-block; margin: .8rem 0 0; padding: .25rem .65rem; border-radius: 999px; font-weight: 600; font-size: .86rem; }
.apply-company__standing--good { background: #e3f4e6; color: #1d6b2f; }
.apply-company__standing--warn { background: #fbf1d2; color: #7a5c00; }
.apply-company__standing--bad  { background: #fbe3e1; color: #a12a22; }
.apply-company--compact { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .9rem; }
.apply-company--compact .apply-company__name { font-size: .98rem; }
.apply-company__reset { margin: 0; }
@media (max-width: 40rem) {
  .apply-company__facts { grid-template-columns: 1fr 1fr; }
  .apply-choice { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ---- Phase B2: Agree, Documents, Membership, Review ---------------------- */

/* step 3: one card per document, the text folded under its title */
.apply-agree { border: 1px solid #e3e6ea; border-radius: 10px; background: #fafbfc; margin: 0 0 .8rem; padding: 0 .9rem .5rem; }
.apply-agree.is-invalid { border-color: #b42318; }
.apply-agree__doc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; padding: .8rem 0 .6rem; }
.apply-agree__doc summary::-webkit-details-marker { display: none; }
.apply-agree__title { font-weight: 700; font-size: 1rem; grid-column: 1; }
.apply-agree__about { font-size: .86rem; color: #5b6472; grid-column: 1; line-height: 1.4; }
.apply-agree__toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .85rem; color: #0b2a5b; text-decoration: underline; white-space: nowrap; }
.apply-agree__doc[open] .apply-agree__toggle { text-decoration: none; color: #7a8491; }
.apply-agree__doc[open] .apply-agree__toggle::after { content: " (close)"; }
.apply-agree__text { border-top: 1px solid #e3e6ea; padding: .7rem 0 .3rem; font-size: .9rem; line-height: 1.55; color: #2b3340; }
.apply-agree__text h2 { font-size: 1.08rem; margin: 1.2rem 0 .4rem; color: #0b2a5b; }
.apply-agree__text > h2:first-child,
.apply-agree__text > .keep:first-child > h2:first-child { margin-top: .2rem; }
.apply-agree__text h3 { font-size: .98rem; margin: .8rem 0 .3rem; }
.apply-agree__text h4 { font-size: .92rem; margin: .6rem 0 .25rem; color: #3d4654; }
.apply-agree__text p { margin: 0 0 .7rem; overflow-wrap: anywhere; }
.apply-agree__text ul { margin: 0 0 .7rem 1.1rem; padding: 0; }
.apply-agree__text li { margin: 0 0 .3rem; overflow-wrap: anywhere; }
.apply-agree__text code { font-size: .85em; overflow-wrap: anywhere; }
.apply-agree__draft { color: #7a5c00; background: #fbf1d2; border-radius: 6px; padding: .4rem .6rem; font-size: .84rem; }
.apply-agree__links, .apply-agree__hash { font-size: .82rem; color: #6b7686; }
.apply-agree__hash code { font-size: .8rem; }
/* The checkbox that signs a document is the one thing on the card a person
   must not miss, so it is a box of its own: amber until checked, green after,
   red when it was missed (Dan, 5 October: "are easy to miss by a human"). */
.apply-card .apply-agree__tick { margin: .6rem 0 .5rem; padding: .75rem .9rem; gap: .75rem; align-items: center;
  background: #fff8e1; border: 2px solid #e2b33c; border-radius: 8px; font-weight: 600; font-size: .98rem; color: #1f2733; cursor: pointer; }
.apply-card .apply-agree__tick input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: #0b2a5b; cursor: pointer; }
.apply-card .apply-agree__tick:has(input:checked) { background: #e8f5ec; border-color: #2e8b57; }
.apply-card .apply-agree__tick:has(input[aria-invalid]),
.apply-agree.is-invalid .apply-agree__tick:has(input:not(:checked)) { background: #fdecea; border-color: #b42318; }
.apply-card .apply-agree__tick:has(input:disabled) { background: #f3f4f6; border-color: #d5d9df; color: #7a8491; cursor: default; }
.apply-agree--signed { padding-bottom: 0; }

/* The bank account an authorization debits: the values in bold, the labels quieter. */
.apply-agree__text p.text-fields { font-weight: 700; color: #0b2a5b; background: #fff; border: 1px solid #d5dce6;
  border-radius: 8px; padding: .6rem .8rem; font-variant-numeric: tabular-nums; }
.apply-agree__text p.text-fields strong { font-weight: 500; color: #5b6472; }

/* While a form that takes a few seconds is on its way: the page is covered so
   nothing can be pressed twice, and it says what is happening. */
.apply-busy { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(11, 42, 91, .55); }
.apply-busy__box { background: #fff; border-radius: 12px; padding: 1.4rem 1.6rem; max-width: 22rem; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.apply-busy__spin { width: 2.6rem; height: 2.6rem; margin: 0 auto .9rem; border: 4px solid #d8dee8; border-top-color: #0b2a5b;
  border-radius: 50%; animation: apply-spin .9s linear infinite; }
.apply-busy__title { margin: 0 0 .35rem; font-weight: 700; font-size: 1.05rem; color: #0b2a5b; }
.apply-busy__say { margin: 0; font-size: .9rem; color: #4a5463; }
@keyframes apply-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .apply-busy__spin { animation-duration: 2.4s; } }

/* the signature pad: touch-action none, or a finger scrolls instead of signing */
.apply-sig-field { margin-bottom: 1rem; }
.apply-sig { position: relative; border: 1px dashed #9aa4b2; border-radius: 10px; background: #fff; overflow: hidden; }
.apply-sig.is-signed { border-style: solid; border-color: #0b2a5b; }
.apply-sig__pad { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.apply-sig__line { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 2.4rem; border-top: 1px solid #c9cfd7; pointer-events: none; }
.apply-sig__clear { position: absolute; right: .5rem; top: .5rem; font: inherit; font-size: .82rem; padding: .3rem .6rem; border: 1px solid #c9cfd7; border-radius: 6px; background: #f4f5f7; cursor: pointer; min-height: 32px; }
.apply-sig__noscript { position: absolute; inset: 0; margin: 0; padding: 1rem; background: #fdf8e7; color: #7a5c00; font-size: .9rem; }
.apply-card .field.apply-sig-field .field__error { margin-top: .4rem; }

/* step 4: three tiles */
.apply-why { font-size: .86rem; color: #5b6472; background: #f4f5f7; border-radius: 8px; padding: .55rem .75rem; margin: -.4rem 0 1rem; }
.apply-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 0 0 1.1rem; }
.apply-tile { border: 1px solid #e3e6ea; border-radius: 10px; padding: .8rem .8rem .7rem; background: #fafbfc; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.apply-tile.is-done { border-color: #a9d3b2; background: #f6fbf7; }
.apply-tile__title { font-size: .92rem; margin: 0; line-height: 1.3; }
.apply-tile__hint { margin: 0; font-size: .84rem; color: #6b7686; flex: 1 1 auto; }
.apply-tile__shot { display: block; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; }
.apply-tile__shot img { display: block; width: 100%; height: 150px; object-fit: contain; }
.apply-tile__meta { margin: 0; font-size: .8rem; color: #6b7686; flex: 1 1 auto; }
.apply-tile__form { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.apply-tile__pick { position: relative; overflow: hidden; cursor: pointer; text-align: center; }
.apply-tile__pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.apply-tile__pick.is-busy span { opacity: .6; }
.apply-tile__send { min-height: 36px; }
.js .apply-tile__send { display: none; }
@media (max-width: 40rem) { .apply-tiles { grid-template-columns: 1fr; } .apply-tile__shot img { height: 180px; } }

/* step 5: levels as cards, the price for the chosen cycle */
.apply-cycle { margin-bottom: .2rem; }
.apply-levels { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0 0 .5rem; }
.apply-level { position: relative; display: flex; flex-direction: column; gap: .2rem; border: 2px solid #e3e6ea; border-radius: 10px; padding: .8rem .9rem .8rem 2.4rem; background: #fff; cursor: pointer; min-width: 0; }
.apply-level.is-selected { border-color: #0b2a5b; background: #f3f6fb; }
.apply-level input { position: absolute; left: .9rem; top: 1rem; width: 1.1rem; height: 1.1rem; margin: 0; }
.apply-level__name { font-weight: 700; font-size: 1.02rem; }
.apply-level__tag { display: inline-block; margin-left: .4rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #1d6b2f; background: #e3f4e6; border-radius: 999px; padding: .1rem .45rem; vertical-align: middle; }
.apply-level__blurb { font-size: .84rem; color: #5b6472; line-height: 1.4; }
.apply-level__prices { font-size: .95rem; margin-top: .2rem; }
.apply-level__prices strong { font-size: 1.1rem; color: #0b2a5b; }
@media (max-width: 40rem) { .apply-levels { grid-template-columns: 1fr; } }

/* step 6: cards of labeled pairs, two columns on a desk */
.apply-review { border: 1px solid #e3e6ea; border-radius: 10px; background: #fafbfc; margin: 0 0 .8rem; padding: .7rem .9rem .5rem; }
.apply-review__head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin: 0 0 .5rem; }
.apply-review__head h2 { font-size: 1.02rem; margin: 0; }
.apply-review__head a { font-size: .88rem; color: #0b2a5b; }
.apply-review__gap { margin: 0 0 .5rem; font-size: .88rem; color: #b42318; }
.apply-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.2rem; margin: 0; }
.apply-kvs > div { min-width: 0; }
.apply-kvs dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #7a8491; }
.apply-kvs dd { margin: .1rem 0 0; font-size: .95rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.apply-review__sig { display: block; max-width: 220px; max-height: 70px; border: 1px solid #e3e6ea; border-radius: 6px; background: #fff; margin-top: .2rem; }
.apply-review__shot { display: block; max-width: 220px; border: 1px solid #e3e6ea; border-radius: 6px; overflow: hidden; background: #fff; margin-top: .2rem; }
.apply-review__shot img { display: block; width: 100%; height: 110px; object-fit: contain; }
.apply-submit { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #e3e6ea; }
.apply-submit h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
@media (max-width: 40rem) { .apply-kvs { grid-template-columns: 1fr; } }

/* ---- Phase C1: a round of questions ------------------------------------- */
.apply-q { border: 1px solid #e3e6ea; border-radius: 10px; background: #fafbfc; margin: 0 0 .9rem; padding: .8rem .9rem .5rem; }
.apply-q.has-doc { border-color: #a9d3b2; }
.apply-q__title { font-size: 1rem; margin: 0 0 .6rem; line-height: 1.4; display: flex; gap: .55rem; align-items: flex-start; }
.apply-q__n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #0b2a5b; color: #fff; font-size: .8rem; font-weight: 700; }
.apply-q__orig { display: grid; gap: .1rem; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: .5rem .7rem; margin: 0 0 .7rem; }
.apply-q__orig-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #7a8491; }
.apply-q__orig-value { font-size: .98rem; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.apply-q__opt { font-weight: 400; color: #7a8491; font-size: .82rem; }
.apply-q__about { margin: 0 0 .6rem; font-size: .86rem; color: #5b6472; }
.apply-q__file { margin-bottom: .6rem; }
.apply-q__pick { position: relative; overflow: hidden; cursor: pointer; text-align: center; }
.apply-q__pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.apply-q__pick.is-picked { border-color: #0b2a5b; background: #f3f6fb; }
.apply-q__received { margin: 0; font-size: .88rem; color: #1d6b2f; background: #e3f4e6; border-radius: 8px; padding: .5rem .7rem; }
.apply-card .apply-q .field:last-child { margin-bottom: .3rem; }

/* ---- Phase C2: the terms page, the copy screen ------------------------- */
/* the statement: the spec's box, line for line, no wasted space */
.apply-terms__line { margin: 0 0 .7rem; font-size: .98rem; line-height: 1.5; color: #2b3340; }
.apply-account dd a { color: #0b2a5b; }
.apply-account__big { font-size: 1.15rem; font-weight: 700; color: #0b2a5b; }
.apply-account__cond { background: #fdf8e7; border: 1px solid #e8d9a8; border-radius: 6px; padding: .35rem .55rem; line-height: 1.5; }
.apply-review .apply-terms { margin-bottom: .3rem; }
.apply-terms { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.apply-terms td { padding: .38rem 0; border-bottom: 1px solid #eceff2; vertical-align: top; }
.apply-terms td.num { text-align: right; white-space: nowrap; padding-left: .8rem; }
.apply-terms__waive td { color: #1d6b2f; }
.apply-terms__sub td { border-top: 1px solid #c9cfd7; font-weight: 600; }
.apply-terms__note td { font-size: .86rem; color: #5b6472; border-bottom: 0; padding-top: .1rem; }
.apply-terms__due td { border-top: 2px solid #0b2a5b; border-bottom: 0; font-weight: 700; font-size: 1.05rem; padding-top: .5rem; }
.apply-terms__cond { background: #fdf8e7; border: 1px solid #e8d9a8; border-radius: 8px; padding: .6rem .8rem; margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; }
.apply-terms__cond strong { display: block; margin-bottom: .2rem; }
.apply-card .apply-agree__tick--auth { margin: .6rem 0; font-size: .95rem; line-height: 1.45; }
.apply-copy { display: grid; gap: .6rem; margin: .2rem 0 0; }
.apply-copy form { margin: 0; }
@media (min-width: 40rem) { .apply-copy { grid-template-columns: 1fr 1fr 1fr; } }

/* ---- Phase D: the closing page after Agree ---------------------------- */
.apply-done__lines { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.apply-done__lines li { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; font-size: 1rem; border-bottom: 1px solid #eef0f3; }
.apply-done__lines li:last-child { border-bottom: 0; }
.apply-done__label { white-space: nowrap; font-weight: 600; }
.apply-done__dots { flex: 1 1 auto; border-bottom: 2px dotted #c9cfd7; min-width: 1rem; }
.apply-done__words { white-space: nowrap; color: #4a5361; }
.apply-done__lines li.is-done .apply-done__words { color: #1d6b2f; font-weight: 600; }
.apply-done__lines li.is-bad .apply-done__words { color: #a12a22; font-weight: 600; }
.apply-done__note { margin: 0 0 1rem; color: #2b3340; line-height: 1.5; }
@media (max-width: 40rem) { .apply-done__lines li { flex-wrap: wrap; } .apply-done__dots { display: none; } .apply-done__words { white-space: normal; } }

/* The address card while the provider is answering (about two seconds). */
.apply-addr__waiting { margin: 0; color: #5b6472; font-size: .9rem; }
.apply-addr__waiting::before {
  content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .45rem;
  border: 2px solid #c9cfd7; border-top-color: #0b2a5b; border-radius: 50%;
  vertical-align: -1px; animation: apply-spin .7s linear infinite;
}
@keyframes apply-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .apply-addr__waiting::before { animation: none; } }

/* After a declined fuel card: membership is still open. Nothing is created
   here - the applicant joins the ordinary way if they want to. */
.apply-offer { margin: 1.2rem 0 0; padding: 1rem 1.1rem; background: #f4f7fb; border: 1px solid #dbe4f0; border-radius: 10px; }
.apply-offer strong { display: block; color: #0b2a5b; margin-bottom: .4rem; }
.apply-offer p { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.55; }
.apply-offer .btn { margin-top: .2rem; }

/* Device confirmation at a signing moment.
   Quiet on purpose: it sits above the signature pad and must read as an extra,
   not as another required step. Hidden until apply.js confirms the browser can
   actually do it, so nobody is offered a button that cannot work. */
.apply-webauthn {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 1rem; padding: .85rem 1rem;
  border: 1px solid #d8dee7; border-left: 3px solid #9aa4b2; border-radius: 10px;
  background: #f7f9fc;
}
.apply-webauthn__text { flex: 1 1 18rem; min-width: 0; }
.apply-webauthn__text strong { display: block; font-size: .95rem; }
.apply-webauthn__text p { margin: .3rem 0 0; font-size: .85rem; color: #55606e; }
.apply-webauthn__say:empty { display: none; }
.apply-webauthn__say { margin-top: .4rem; font-weight: 600; }
.apply-webauthn__say.is-busy { color: #55606e; }
.apply-webauthn__say.is-ok { color: #1c7c45; }
.apply-webauthn.is-confirmed { border-left-color: #1c7c45; background: #f2faf5; }
@media (max-width: 30rem) {
  .apply-webauthn { flex-direction: column; align-items: stretch; }
  /* In a column the 18rem basis above becomes a height: an empty box on every phone. */
  .apply-webauthn__text { flex: 0 0 auto; }
  .apply-webauthn .btn { width: 100%; }
}

/* Live camera capture on the document tiles. The preview is mirrored so it reads
   like a mirror to the person using it; the canvas we actually send is not (see
   apply.js), because an underwriter comparing a face with an ID should not be
   fighting a flipped image. */
.apply-cam { margin-bottom: .5rem; }
.apply-cam__stage:empty { display: none; }
.apply-cam__video, .apply-cam__canvas {
  display: block; width: 100%; height: auto; border-radius: 8px; background: #11161d;
  /* Capped so a tall portrait stream cannot push the buttons off the screen on a
     phone, which is where this is actually used. */
  max-height: 60vh; object-fit: contain;
}
/* Mirrored only for the camera facing the person; a document mirrored would
   read backward while it is being lined up. */
.apply-cam[data-cam-facing="user"] .apply-cam__video { transform: scaleX(-1); }
.apply-cam__say:empty { display: none; }
.apply-cam__say { margin: .4rem 0; font-size: .85rem; color: #55606e; }
.apply-cam__after { display: flex; gap: .5rem; }
.apply-cam__after .btn { flex: 1 1 0; }
.apply-tile__src { font-size: .78rem; color: #1c7c45; font-weight: 600; }

/* What the applicant has already added to a submitted application. A list of
   what they sent and when, so a second visit does not become a second copy of
   the same explanation. */
.apply-added { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.apply-added li {
  padding: .6rem .8rem; border: 1px solid #d8dee7; border-radius: 8px; background: #fff;
}
.apply-added__when { display: block; font-size: .76rem; color: #6b7686; }
.apply-added__what { display: block; margin-top: .15rem; font-size: .9rem; color: #2b3340; }

/* The to-do list on the status page. Two headings, never one list: "we are
   reading what you sent" beside "answer 3 questions" buries the only line that
   needs doing. When there is nothing on the applicant the panel says so in its
   heading rather than leaving them to infer it from an absence. */
.apply-todo {
  margin: 1.1rem 0 0; padding: .9rem 1rem;
  border: 1px solid #d8dee7; border-left: 3px solid #0b2a5b; border-radius: 10px; background: #fff;
}
.apply-todo--ours { border-left-color: #1c7c45; background: #f7faf8; }
.apply-todo__title { margin: 0 0 .45rem; font-size: .95rem; }
.apply-todo__list { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.apply-todo__list li { font-size: .92rem; line-height: 1.5; }
.apply-todo--ours .apply-todo__list li { color: #44505f; }

/* The owner's preview of a document text (admin, Document texts): a band that
   says this is not a real application, and the two marks a signed copy and a
   letter put in place of {signature} and {decline_reason}. */
.doc-preview-bar { margin: 0 0 1.2rem; padding: .7rem .9rem; border: 1px dashed #b7791f; border-radius: 10px; background: #fffaf0; font-size: .88rem; line-height: 1.5; }
.doc-preview-bar p { margin: 0; }
.doc-preview-bar__warn { margin-top: .5rem !important; color: #b42318; }
.doc-preview__sig { margin: .4rem 0 .9rem; padding: .7rem .8rem; border: 1px dashed #9aa3af; border-radius: 8px; color: #5b6472; font-size: .85rem; text-align: center; }
.doc-preview__reason { padding: .5rem .7rem; background: #f6f7f9; border-left: 3px solid #b3261e; }