/* ==========================================================================
   APERTURE — HOMEPAGE, "THE APERTURE"
   Built from Aperture-Homepage-The-Aperture-2026-08-30.pdf, the approved
   artboard export. Not from the reference build, and not from the superseded
   "The Corridor" export received earlier the same day.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE CORNICE
   A lighter band carrying the nav, 146px deep at 1440. The homepage and the
   application page have it; the FAQ and pricing pages do not. That is what
   their artboards say.
   -------------------------------------------------------------------------- */
.home-cornice {
  position: relative;
  background: linear-gradient(180deg, #3A404A 0%, #333944 62%, #2C323B 100%);
  border-bottom: 1px solid rgba(242,227,196,0.07);
}

/* --------------------------------------------------------------------------
   HERO
   Text left at the 116 gutter, the aperture ring right, and a gold datum line
   running out of the headline into the ring's centre.
   -------------------------------------------------------------------------- */
.home-hero {
  position: relative;
  min-height: calc(420px + 540 * var(--span) / 1050);   /* 960 at 1440 */
  display: flex;
  align-items: center;
  overflow: hidden;
}

.home-hero { --ring: calc(320px + 372 * var(--span) / 1050); }   /* 692 at 1440 */

.home-hero__ring {
  position: absolute;
  top: 50%;
  left: 46%;
  width: var(--ring);
  height: var(--ring);
  transform: translateY(-50%);
  pointer-events: none;
}

/* The gold datum line: it runs out of the headline and stops dead in the
   centre of the aperture. On the artboard it ends at the ring's centre, not at
   its edge, and that is the whole point of the device. */
.home-hero__datum {
  position: absolute;
  top: 50%;
  left: 42%;
  width: calc(4% + var(--ring) / 2);
  height: 1px;
  background: linear-gradient(90deg, rgba(201,162,39,0) 0%, var(--c-gold) 22%, var(--c-gold) 100%);
  opacity: 0.85;
  pointer-events: none;
}

/* Padding sits on the section so the max-width governs the TEXT, not the text
   plus its gutters. Getting this wrong wrapped "THE STANDARD" onto its own
   line, which is a different composition from the approved one. */
.home-hero__inner {
  position: relative;
  margin: 0 var(--gut-hero-r) 0 var(--gut-home);
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 680px;
}

.home-hero__title {
  font-family: var(--f-display);
  font-size: var(--t-home-hero);
  line-height: var(--lh-home-hero);
  letter-spacing: var(--ls-home-hero);
  color: var(--c-display);
  margin: 0 0 calc(6px + (-16) * var(--span) / 1050);
  font-weight: 400;
}

.home-hero__tagline {
  font-size: var(--t-home-tagline);
  letter-spacing: var(--ls-home-tagline);
  line-height: 1.7;
  color: var(--c-body);
  margin: 0;
}

.home-hero__actions {
  display: flex;
  align-items: center;
  gap: calc(18px + 48 * var(--span) / 1050);
  flex-wrap: wrap;
  margin-top: calc(18px + 20 * var(--span) / 1050);
}

.home-welcomed {
  font-size: var(--t-welcomed);
  letter-spacing: var(--ls-welcomed);
  color: var(--c-gold-bright);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   THE MECHANISM
   A descending gold arc with three dots, and the 01 / 02 / 03 panels stepping
   down-right and overlapping. The overlap is part of the approved composition
   and is kept. The panels are sized so that no copy is ever covered by the
   next panel, which is the one liberty taken and it is recorded in the report.
   -------------------------------------------------------------------------- */
/* THE SLOGAN AT THE FOOT OF THE HERO.
   From the board she was shown 13 September 2026 (FullHeader, hero foot).
   The gutter is --gut-home, the same 116 at 1440 the board is drawn at, so
   the slogan lines up with the hero copy above it rather than floating. */
.home-slogan {
  margin-top: calc(40px + 30 * var(--span) / 1050);   /* 70 at 1440 */
  padding: 0 var(--gut-home) calc(34px + 26 * var(--span) / 1050);  /* 60 below at 1440 */
}
.home-slogan__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}
.home-slogan__text {
  margin: calc(16px + 8 * var(--span) / 1050) 0 0;    /* 24 at 1440 */
  font-size: var(--t-home-slogan);
  letter-spacing: 0.16em;
  /*
   * THE BOARD DRAWS THIS IN --c-gold (#C9A227) AND IT DOES NOT CLEAR THE FLOOR.
   * Measured against the pixel actually painted behind it: 4.23:1 at 1440 and
   * 4.13:1 at 390, against contrast.mjs's 4.5 floor for text under 18px. Two
   * NEW failures, and that harness's own verdict on a new failure is "THESE DO
   * NOT SHIP".
   *
   * --c-gold-bright (#E9C860) is already in the approved palette and already
   * used on this site, so this is an existing approved colour rather than an
   * invented one. It measures 6.28:1 at 1440 and 6.13:1 at 390, by the harness's own sampling.
   *
   * The board is a 1440 desktop drawing and says nothing about contrast.
   *
   * RULED BY THE OWNER, 13 September 2026, her words: "Brighter gold for both
   * if possible. Unless the council objects. But definitely for slogan."
   * The council split 4 to 1 for both. The dissent was that the 6.28 figure
   * quoted at the time was this element's number on THIS background and that
   * the mechanism label had never been measured on its own; it was measured
   * before it was changed. Both are settled. Do not put the darker gold back
   * without her.
   */
  color: var(--c-gold-bright);
}

.home-mechanism {
  position: relative;
  padding: calc(48px + 32 * var(--span) / 1050) 0 calc(60px + 60 * var(--span) / 1050);
}

.home-mechanism__label {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  margin-left: var(--gut-home);
  font-size: var(--t-mech-label);
  letter-spacing: var(--ls-mech-label);
  /*
   * 13 September 2026, owner ruling, her words in full: "Brighter gold for
   * both if possible. Unless the council objects. But definitely for slogan."
   * This line was on the 12 September known-findings baseline at 3.80:1. In
   * --c-gold-bright, measured against the pixel actually painted behind it on
   * its own section (not the slogan's), direct sampling gives 5.93:1 and
   * contrast.mjs, the check that governs, gives 5.62 to 5.64:1.
   * The council split 4 to 1
   * and the dissent was a real one: the 6.28 figure quoted at the time was the
   * SLOGAN's number on the SLOGAN's background, and nobody had measured this
   * element. So it was measured before it was changed.
   * Its baseline pin is removed in contrast.mjs, per that list's own rule that
   * a pin which pins nothing failing is deleted rather than left lying around.
   */
  color: var(--c-gold-bright);
  margin-top: 0;
  margin-bottom: calc(24px + 68 * var(--span) / 1050);
  margin-right: 0;
}
.home-mechanism__label::after {
  content: '';
  flex: 0 0 auto;
  width: calc(60px + 60 * var(--span) / 1050);
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold) 0%, rgba(201,162,39,0) 100%);
}

.home-mechanism__arc {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The three panels are placed by proportion, taken from the artboard:
   panel 01 starts at 116 of 1440, 02 at 546, 03 at 924, each 477 wide.
   A column grid cannot express that without inventing a module the design does
   not have, so the positions are stated as the percentages they actually are. */
.home-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-step {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(242,227,196,0.055);
  box-shadow: 0 30px 70px rgba(6,8,12,0.42);
  padding: calc(24px + 16 * var(--span) / 1050) calc(24px + 14 * var(--span) / 1050);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Stepping down-right, overlapping. Column spans give the artboard's
   x-positions; negative margins give the vertical overlap. */
.home-step { width: 33.13%; }
.home-step--01 { margin-left:  8.06%; z-index: 1; }
.home-step--02 { margin-left: 37.92%; z-index: 2; margin-top: calc(-30px - 34 * var(--span) / 1050); }
.home-step--03 { margin-left: 64.17%; z-index: 3; margin-top: calc(-26px - 24 * var(--span) / 1050); }

.home-step__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.home-step__n {
  font-family: var(--f-display);
  font-size: var(--t-step-n);
  letter-spacing: 2px;
  color: var(--c-gold-bright);
}
.home-step__label {
  font-family: var(--f-display);
  font-size: var(--t-step-label);
  letter-spacing: var(--ls-step-label);
  color: var(--c-display);
  margin: 0;
  font-weight: 400;
}
/* FLAGGED: the artboard sets 13.5px; held at the 14px running-prose floor. */
.home-step__body {
  font-size: var(--t-body);
  line-height: 1.75;
  letter-spacing: 0.2px;
  color: var(--c-body);
  margin: 0;
}

/* --------------------------------------------------------------------------
   THE TWO PLATES
   MERCHANT and ALEXIOS, joined by a gold line through a small open iris.
   -------------------------------------------------------------------------- */
.home-plates {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: 0;
  padding: calc(40px + 40 * var(--span) / 1050) var(--gut-nav) calc(40px + 40 * var(--span) / 1050);
}

.home-plate { position: relative; display: flex; flex-direction: column; align-items: center; }
.home-plate--left  { align-items: flex-start; padding-left: calc(20px + 78 * var(--span) / 1050); }
.home-plate--right { align-items: flex-start; padding-left: calc(20px + 78 * var(--span) / 1050); }

.home-plate__face {
  width: calc(180px + 114 * var(--span) / 1050);        /* 294 at 1440 */
  height: calc(150px + 90 * var(--span) / 1050);        /* 240 */
  background: var(--panel-lighter);
  border: 1px solid rgba(242,227,196,0.07);
  box-shadow: 0 26px 60px rgba(6,8,12,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-plate__name {
  font-family: var(--f-display);
  font-size: var(--t-plate);
  letter-spacing: var(--ls-plate);
  color: var(--c-body-bright);
  margin: 0;
  font-weight: 400;
  text-align: center;
}
.home-plate__caption {
  width: calc(180px + 114 * var(--span) / 1050);
  margin: 18px 0 0;
  font-size: var(--t-plate-caption);
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--c-body);
  text-align: center;
}

.home-plates__link {
  position: relative;
  align-self: start;
  margin-top: calc(72px + 46 * var(--span) / 1050);
  height: 1px;
  min-width: 40px;
}

/* --------------------------------------------------------------------------
   CLOSING
   -------------------------------------------------------------------------- */
.home-closing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(28px + 18 * var(--span) / 1050);
  padding: calc(60px + 149 * var(--span) / 1050) var(--gut-nav) calc(50px + 30 * var(--span) / 1050);
}
/* width comes from the box, not from the viewBox aspect ratio. Left it to the
   intrinsic size and the SVG took 1000px, pushing the page 657px wide on a
   phone. Found by the responsive audit. */
.home-closing__arc { position: absolute; top: 0; left: 12%; width: 76%; height: 200px; pointer-events: none; }
/* The homepage closing is 27px where the FAQ's is 26. Different pages, and
   each artboard governs its own. */
.home-closing__line {
  position: relative;
  font-family: var(--f-display);
  font-size: var(--t-home-closing);
  line-height: var(--lh-closing);
  letter-spacing: var(--ls-closing);
  color: var(--c-display);
  margin: 0;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   BELOW 900 — the stepped panels stop stepping
   Overlapping panels need width. Below 900 they stack full width in order,
   which keeps the 01 / 02 / 03 reading and drops the diagonal, exactly as the
   pier lies down on the FAQ.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .home-steps { display: flex; flex-direction: column; gap: 18px; padding: 0 var(--gut-stack-in); }
  .home-step { width: 100%; }
  .home-step--01, .home-step--02, .home-step--03 { margin-top: 0; margin-left: 0; }
  .home-mechanism__arc { display: none; }
}

@media (max-width: 760px) {
  .home-hero { min-height: 0; padding: 40px 0 20px; }
  .home-hero__ring { opacity: 0.5; left: 30%; }
  .home-hero__inner { padding-left: var(--gut-stack-in); padding-right: var(--gut-stack-in); }
  .home-plates { grid-template-columns: 1fr; row-gap: 34px; }
  .home-plates__link { display: none; }
  .home-plate--left, .home-plate--right { padding-left: 0; align-items: center; }
  .home-plate__face, .home-plate__caption { width: 100%; max-width: 320px; }
}

/* The homepage foot CTA is the nav tier's 12px on this artboard, not 13. */
.home-closing .ap-cta--foot { font-size: var(--t-cta-nav); }

/* The cornice pages set the nav a size down from the plain pages: 12px here,
   13px on the FAQ and pricing artboards. Each artboard governs its own page.
   Its CTA label is 11px on the artboard and is held at 12 by the site-wide
   label floor; the one-pixel difference is recorded in docs/DESIGN-TOKENS.md
   rather than left as an unexplained mismatch. */
.home-cornice .ap-nav__link { font-size: 12px; }

/* --------------------------------------------------------------------------
   THE NO-CONCEALMENT STATEMENT (0.4.7, Mockup C as approved)
   After Insights, directly above the closing band. Slate gradient and the
   champagne light from the board; gold and type from the theme tokens. A thin
   gold vertical rule at left on wide screens; a short gold rule on phones.
   -------------------------------------------------------------------------- */
.home-statement {
  position: relative;
  padding: clamp(64px, 10vw, 128px) var(--gut-hero-r) clamp(64px, 10vw, 128px) var(--gut-hero-l);
  background:
    radial-gradient(60% 90% at 78% 30%, rgba(233,200,96,.09), transparent 65%),
    linear-gradient(200deg, #2A3038 0%, #20252D 50%, #191D24 100%);
}
.home-note + .home-statement { margin-top: calc(40px + 40 * var(--span) / 1050); }
.home-statement__wrap {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.home-statement__mark {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--c-gold);
}
.home-statement__display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 5.4vw, 60px);
  letter-spacing: .16em;
  line-height: 1.28;
  text-transform: uppercase;
  color: var(--c-display);
  max-width: 16ch;
  margin: 0;
}
.home-statement__body {
  font-family: var(--f-body);
  font-size: calc(15px + 1 * var(--span) / 1050);
  line-height: 1.7;
  color: var(--c-body);
  max-width: 620px;
  margin: 22px 0 0;
}
.home-statement__fine {
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 620px;
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule-quiet);
}
@media (min-width: 900px) {
  .home-statement__wrap { grid-template-columns: 120px 1fr; }
  .home-statement__mark {
    width: 1px;
    height: 100%;
    min-height: 60px;
    background: linear-gradient(180deg, var(--c-gold), transparent);
  }
}