/* ==========================================================================
   APERTURE — APPLICATION PAGE, "THE THRESHOLD"
   Built from Aperture-Application-The-Threshold-2026-08-30.pdf.
   A two-column split: a lighter left rail carrying the argument, a darker
   right column carrying the form. The split falls at 654 of 1440.
   ========================================================================== */

.apply-split {
  position: relative;
  display: grid;
  grid-template-columns: calc(654 / 1440 * 100%) 1fr;
  align-items: stretch;
  min-height: 60vh;
}

/* ---- The left rail ---- */
.apply-rail {
  position: relative;
  background: linear-gradient(158deg, #3A414C 0%, #333944 46%, #2B313A 100%);
  border-right: 1px solid rgba(242,227,196,0.07);
  padding: calc(70px + 96 * var(--span) / 1050) calc(32px + 44 * var(--span) / 1050)
           calc(60px + 60 * var(--span) / 1050) var(--gut-home);
}
.apply-rail__pool {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 520px 420px at 22% 14%,
    rgba(var(--c-light), 0.14) 0%, rgba(var(--c-light), 0) 62%);
  pointer-events: none;
}
.apply-rail__inner { position: relative; max-width: 460px; }

.apply-rail__title {
  font-family: var(--f-display);
  font-size: var(--t-apply-title);
  line-height: 1.2;
  letter-spacing: var(--ls-apply-title);
  color: var(--c-display);
  margin: 0 0 calc(18px + 10 * var(--span) / 1050);
  font-weight: 400;
}
.apply-rail__rule {
  width: 150px; height: 1px;
  background: linear-gradient(90deg, var(--c-gold) 0%, rgba(201,162,39,0) 100%);
  margin-bottom: calc(24px + 16 * var(--span) / 1050);
}
.apply-rail__lead {
  font-size: var(--t-apply-lead);
  line-height: 1.8;
  letter-spacing: 0.2px;
  color: var(--c-body-bright);
  margin: calc(0px + 41 * var(--span) / 1050) 0 calc(40px + 83 * var(--span) / 1050);
}

.apply-note { margin: 0 0 calc(26px + 7 * var(--span) / 1050); }
.apply-note__label {
  font-family: var(--f-display);
  font-size: 12px;                       /* label floor; artboard sets 10 */
  letter-spacing: var(--ls-absence);
  /* THEME 0.3.6, 12 September 2026. This one label sits on the LIGHT note
     panel (#3A414C at its lightest), not on the dark page. --c-gold there is
     4.25:1, under the 4.5:1 floor for text below 18px; every other gold label
     on this page sits on the dark panel at 6.12:1 and is fine. Swapped to
     --c-gold-bright, which is ALREADY IN THE APPROVED PALETTE and measures
     6.32:1 on this panel. No new colour was invented and the brand gold is
     untouched everywhere else. Found by tools/conformance/contrast.mjs.
     OWNER RULING, 12 September 2026, her word: "yes". She was shown this label
     before and after, with both contrast figures, in the message that asked
     for the ruling. APPROVED AND FROZEN. */
  color: var(--c-gold-bright);
  margin: 0 0 10px;
  font-weight: 400;
}
/* FLAGGED, same class as the field labels: the artboard sets these at 13px and
   the build holds them at the 14px running-prose floor. These are sentences a
   person reads on a page that asks for eleven documents. One pixel, raised with
   the owner rather than taken silently. */
.apply-note__body {
  font-size: var(--t-body);
  line-height: 1.8;
  letter-spacing: 0.2px;
  color: var(--c-body);
  margin: 0;
}

.apply-rail__welcomed {
  margin: calc(30px + 117 * var(--span) / 1050) 0 0;
  font-size: var(--t-welcomed);
  letter-spacing: var(--ls-welcomed);
  color: var(--c-gold-bright);
}

/* ---- The right column ---- */
.apply-form {
  position: relative;
  background: linear-gradient(180deg, #23282F 0%, #202429 60%, #1E2227 100%);
  /* The bottom padding was 310 at 1440, sized to land the footer where the
     artboard put it when section 04 filled this column. With that section
     removed by the 30 August change note, the same value left roughly 300px of
     void under the submit button. Closing it is not a design change — it is
     what "composition unchanged" means once the content above it is gone. */
  padding: calc(70px + 96 * var(--span) / 1050) calc(28px + 86 * var(--span) / 1050)
           calc(60px + 60 * var(--span) / 1050) calc(28px + 63 * var(--span) / 1050);
}

.apply-section { margin-bottom: calc(38px + 33 * var(--span) / 1050); }

.apply-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 calc(20px + 14 * var(--span) / 1050);
}
.apply-section__n {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--c-gold-bright);
}
.apply-section__name {
  font-family: var(--f-display);
  font-size: var(--t-sec-name);
  letter-spacing: var(--ls-sec-name);
  color: var(--c-gold-bright);
  margin: 0;
  font-weight: 400;
}

.apply-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(20px + 21 * var(--span) / 1050);
  row-gap: calc(22px + 23 * var(--span) / 1050);
}
.apply-fields--single { grid-template-columns: 1fr; }
.apply-field--wide { grid-column: 1 / -1; }

.apply-field { display: flex; flex-direction: column; gap: 8px; }

/* FLAGGED: the artboard sets field labels at 10px. Held at 12px here, which is
   the site-wide label floor, because these label a form collecting legal entity
   and ownership data and 10px is below comfortable reading at arm's length.
   This is one of the few places the build does not reproduce the artboard, it
   is an accessibility judgement rather than a design change, and it is raised
   with the owner in the report rather than made quietly. */
.apply-field__label {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: var(--ls-field-label);
  color: var(--c-gold-bright);
  font-weight: 400;
}


.apply-field__input {
  font-family: var(--f-body);
  font-size: var(--t-field);
  letter-spacing: 0.2px;
  color: var(--c-body-bright);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242,227,196,0.16);
  padding: 6px 0 10px;
  width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.apply-field__input::placeholder { color: var(--c-body); opacity: 0.72; }
.apply-field__input:focus {
  border-bottom-color: var(--c-gold);
}

/* CURRENT MONTHLY PROCESSING dropdown. ADDED BY CHANGE NOTE, 2 September 2026,
   approved by Sanchez. The band boundaries break at $25,000 and $100,000
   deliberately, because that is where the approved fee bands break. Do not
   tidy them into round decades. The field is the tenth on the application page
   and sits inside section 03 THE COMMERCE, immediately after PROCESSING
   STATUS. No section 04 was created; 04 stays deleted. */
.apply-field__select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer;
  padding-right: 22px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-gold) 50%),
    linear-gradient(135deg, var(--c-gold) 50%, transparent 50%);
  background-position: right 9px center, right 4px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.apply-field__select:invalid { color: var(--c-body); opacity: 0.72; }
.apply-field__select option {
  background: var(--c-base);
  color: var(--c-body-bright);
}

/* Section 04 REQUIRED VERIFICATION DOCUMENTS and the upload panel were removed
   on 30 August 2026 by an approved change note: Aperture collects no
   verification documents at any point. Their styles are deleted with them
   rather than left behind as dead rules that suggest the feature exists. */

/* ---- Submit ---- */
.apply-submit {
  display: flex;
  align-items: center;
  gap: calc(20px + 26 * var(--span) / 1050);
  flex-wrap: wrap;
}
.apply-submit__button {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: calc(2.4px + 1.6 * var(--span) / 1050);
  line-height: 1.55;
  color: var(--c-display);
  background: none;
  border: 1px solid var(--c-gold);
  border-radius: 1px;
  padding: calc(12px + 6 * var(--span) / 1050) calc(26px + 23 * var(--span) / 1050);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.apply-submit__button:hover { background: rgba(201,162,39,0.10); }
.apply-submit__note {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--c-body);
  margin: 0;
  max-width: 300px;
}

/* --------------------------------------------------------------------------
   BELOW 900 — the split closes
   The rail is a column device. Below 900 the argument runs above the form.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .apply-split { grid-template-columns: 1fr; }
  .apply-rail {
    border-right: 0;
    border-bottom: 1px solid rgba(242,227,196,0.07);
    padding: 48px var(--gut-stack-in);
  }
  .apply-rail__inner { max-width: none; }
  .apply-form { padding: 48px var(--gut-stack-in); }
  .apply-fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THE CHECKER CONNECTION, 6 September 2026. Every screen after the form.
   Same column, same grid, same engraved labels, same underline treatment,
   same gold-outlined CTA. Sharp corners throughout. The findings are a
   disciplined table with engraved gold page labels, not cards.
   ========================================================================== */

/* ---- The attestation, on the form ---- */
.apply-attest { margin: 0 0 calc(28px + 12 * var(--span) / 1050); }
.apply-attest__label {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  align-items: start;
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--c-body);
  cursor: pointer;
}
.apply-attest__box,
.apflow__check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 6px 0 0;
  border: 1px solid var(--c-gold-dim);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.apply-attest__box:checked,
.apflow__check input[type="checkbox"]:checked { background: var(--c-gold); }
.apply-attest__box:focus-visible,
.apflow__check input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 1px var(--c-gold-dim); }

/* ==========================================================================
   THE SCREENS AFTER THE FORM, in the DOCUMENT treatment.
   Owner's ruling, 6 September 2026 (afternoon): the VERIFICATION rail stays
   on the form only, and every screen after it drops the two-column split and
   is built exactly as the Terms, Fees and Privacy pages are built: the page
   backdrop those pages sit on, the engraved title at top left, the short gold
   rule, a caption line where needed, then content in the prose column with
   thin section rules between blocks and engraved gold section labels. No
   panel blocks, no card backgrounds, no boxed sections. The structure and
   classes are legal.css's (.legal-hero, .legal, .legal__h, .legal__p,
   .legal__list); what is here is only what those pages do not have: the
   gold section label, the scanning pulse, the choice, the ruled findings
   table, the setup key display and the copy control, which are the site's
   own controls and stay as they were.
   ========================================================================== */

/* A short screen (SCANNING, CLEARED, the sign-in) ends above the foot of a
   desktop viewport. Without this the flat page base shows beneath the footer
   as a band, which reads as a panel. The frame fills the viewport and the
   footer sits at its foot on the same backdrop as the Terms page. Only the
   flow screens and the account page carry the class; no other page is
   touched. The stage and the relief are absolutely placed and unaffected. */
.ap-frame--fill { min-height: 100vh; display: flex; flex-direction: column; }
.ap-frame--fill > .ap-content { flex: 1 0 auto; display: flex; flex-direction: column; }
.ap-frame--fill > .ap-content > main { flex: 1 0 auto; }

/* The engraved gold section label: the document page's section heading
   (rule above, same rhythm) at the site's engraved-label size and colour. */
/* WARNING, FOUND BY THE TECHNICAL REVIEWER 13 September 2026: THIS WHOLE RULE
   IS CURRENTLY DEAD. It is only ever emitted as class="legal__h legal__h--label"
   (inc/apply-flow.php:423, inc/account.php:655). .legal__h in legal.css has the
   SAME specificity (0,1,0) and legal.css is enqueued AFTER apply.css
   (inc/enqueue.php:29), so .legal__h wins on document order and this element
   renders cream at ~18px, not gold at 12px. Every declaration below is
   overridden, not just the colour. The gold below was moved to --c-gold-bright
   with the owner's 13 September uniformity ruling so it is the right value IF
   this rule is ever repaired; it changes nothing on screen today. REPAIRING IT
   IS NOT A COLOUR CHANGE: it would turn a cream 18px heading into a gold 12px
   label on the application and account pages, which is a visible change to what
   an applicant sees, so it is the owner's to call and it is on her list. */
.legal__h--label {
  font-size: 12px;
  letter-spacing: var(--ls-absence);
  color: var(--c-gold-bright);
  line-height: 1.6;
  margin-bottom: 14px;
}
/* The first heading in a document column follows the hero, which already
   rules the page; a second rule directly under it is not needed. */
.legal > .legal__h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* The swapped-in screen moves focus to its title; the title needs no ring. */
.legal-hero__title:focus { outline: none; }

.apflow__line { color: var(--c-body-bright); }
.apflow__note,
.legal__p--note {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.4px;
  color: var(--c-body);
  margin: calc(20px + 8 * var(--span) / 1050) 0 0;
  max-width: var(--measure);
}
.apflow__meta,
.legal-hero__sub .apflow__inline-label { letter-spacing: var(--ls-field-label); }
.apflow__inline-label {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: var(--ls-field-label);
  color: var(--c-gold-bright);
}
/* NOTE 13 September 2026: emitted by NO php file in this theme. Self-described
   legacy alias, kept rather than deleted because deleting it is not part of a
   colour ruling. Its colour was moved with the other nineteen. */
.apflow__sublabel { /* legacy alias, kept so nothing outside this file breaks */
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: var(--ls-absence);
  color: var(--c-gold-bright);
  font-weight: 400;
}

/* The scanning pulse: one thin gold line that breathes. Felt, not seen. */
.apflow__pulse {
  position: relative;
  height: 1px;
  width: 100%;
  max-width: 320px;
  background: rgba(242,227,196,0.10);
  overflow: hidden;
  margin-top: calc(10px + 6 * var(--span) / 1050);
}
.apflow__pulse span {
  position: absolute; top: 0; left: 0;
  width: 34%; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,39,0) 0%, var(--c-gold) 50%, rgba(201,162,39,0) 100%);
  animation: apflow-sweep 2.4s var(--ease) infinite;
}
@keyframes apflow-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .apflow__pulse span { animation: none; width: 100%; opacity: 0.6; }
}

/* The choice: the gold-outlined CTA and a quieter second word. */
.apflow__choice {
  display: flex;
  align-items: center;
  gap: calc(20px + 20 * var(--span) / 1050);
  flex-wrap: wrap;
  margin: calc(8px + 8 * var(--span) / 1050) 0 14px;
}
.apflow__cta {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: calc(2.4px + 1.6 * var(--span) / 1050);
  line-height: 1.55;
  color: var(--c-display);
  background: none;
  border: 1px solid var(--c-gold);
  border-radius: 1px;
  padding: calc(12px + 6 * var(--span) / 1050) calc(26px + 23 * var(--span) / 1050);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.apflow__cta:hover, .apflow__cta:focus-visible { background: rgba(201,162,39,0.10); }
.apflow__quiet {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--c-body);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(242,227,196,0.16);
  padding: 0 0 2px;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.apflow__quiet:hover, .apflow__quiet:focus-visible { color: var(--c-gold-bright); border-bottom-color: var(--c-gold); }
.apflow__form { margin: 0; }
.apflow__form--inline { margin-top: 14px; }

/* ---- Findings: a table, ruled, with engraved gold page labels ---- */
.apflow__findings { margin: 0 0 calc(6px + 6 * var(--span) / 1050); }
.apflow-findings {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--c-gold);
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--c-body);
}
.apflow-findings th, .apflow-findings td {
  text-align: left;
  vertical-align: top;
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid rgba(242,227,196,0.09);
  font-weight: 400;
}
.apflow-findings thead th {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: var(--ls-field-label);
  color: var(--c-gold-bright);
  padding-top: 12px;
  padding-bottom: 12px;
}
.apflow-findings__page {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: var(--ls-field-label);
  color: var(--c-gold-bright);
  text-transform: uppercase;
  width: 120px;
  min-width: 96px;
  overflow-wrap: anywhere;
  padding-top: 19px;
}
.apflow-findings__excerpt { width: 38%; }
.apflow-findings--two .apflow-findings__excerpt { display: none; }
.apflow-findings__message { color: var(--c-body-bright); }
.apflow-findings__excerpt { color: var(--c-body); }
.apflow-findings__excerpt q { quotes: '\201C' '\201D'; font-style: normal; overflow-wrap: anywhere; }
.apflow-findings__excerpt:last-child, .apflow-findings th:last-child { padding-right: 0; }

/* ---- The agreement: document prose in the prose column ---- */
.apflow__agreement-version { font-size: 12px; letter-spacing: 0.4px; margin-bottom: 8px; }
.apflow__agreement-sub { padding-left: 28px; }
.apflow__agreement-end { margin-top: 26px; }
.apflow__check {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  align-items: start;
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--c-body-bright);
  cursor: pointer;
  margin: calc(28px + 8 * var(--span) / 1050) 0 calc(22px + 10 * var(--span) / 1050);
  padding-top: calc(22px + 10 * var(--span) / 1050);
  border-top: 1px solid var(--rule-quiet);
  max-width: var(--measure);
}

/* ---- The install screen: the key display and the copy control ---- */
.apflow__key {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-gold);
  padding: 8px 0 14px;
  max-width: var(--measure);
}
.apflow__key-text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: calc(15px + 5 * var(--span) / 1050);
  letter-spacing: 0.6px;
  line-height: 1.4;
  color: var(--c-display);
  overflow-wrap: anywhere;
  flex: 1 1 auto;
}
.apflow__copy {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: calc(2px + 1 * var(--span) / 1050);
  color: var(--c-display);
  background: none;
  border: 1px solid var(--c-gold);
  border-radius: 1px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.apflow__copy:hover, .apflow__copy:focus-visible { background: rgba(201,162,39,0.10); }
.apflow__sha {
  font-size: 12px;
  letter-spacing: 0.3px;
  line-height: 1.7;
  color: var(--c-body);
  margin: 0 0 14px;
  overflow-wrap: anywhere;
}
.apflow__sha code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  color: var(--c-body-bright);
}
.apflow__steps { list-style: decimal; }
.apflow__steps .legal__li { color: var(--c-body-bright); }

@media (max-width: 900px) {
  .apflow-findings, .apflow-findings thead, .apflow-findings tbody, .apflow-findings tr,
  .apflow-findings th, .apflow-findings td { display: block; }
  .apflow-findings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .apflow-findings tr { padding: 14px 0; border-bottom: 1px solid rgba(242,227,196,0.09); }
  .apflow-findings th, .apflow-findings td { border: 0; padding: 4px 0; }
  .apflow-findings__page { width: auto; }
}
@media (max-width: 480px) {
  .apflow__choice .apflow__cta { width: 100%; text-align: center; }
}