/* pay-online.css: /pay-online/ only.

   Rewritten 29 August 2026, with the page. Every rule is now scoped to
   .page-po, which the page sets as $body_class alongside .page-mod; the first
   version set no body class at all, so nothing here was scoped to anything.

   Four things the first version did that this one does not, recorded so they
   are not reintroduced:

     1. It used var(--rule-strong) three times. That token is defined nowhere
        on this site, so the declarations were invalid at computed-value time:
        the browser-chrome dots resolved to a transparent background and were
        simply not drawn. Everything here uses --rule, --rule-soft or
        --ink-mute, which exist.
     2. It set the h1 with a bespoke clamp(3.2rem, 6vw, 6.7rem), which computes
        to 86px against the type scale's --fs-h1 ceiling of 82px, and tracked
        it at -.055em against --ls-hero's -.02em. core.css is explicit that
        every font-size on the site is one of nine steps. This sheet declares
        no font-size that is not a --fs-* token.
     3. It carried a saturated cyan band (#1675a6-ish) for the American Express
        section. Nothing else on this site is that colour and it has no
        relationship to the palette. The section is the house dark band now.
     4. It drew the Visa, Mastercard and American Express marks in CSS. Those
        are trademarks with their own artwork rules and the Mastercard one read
        as a single orange blob. The methods band carries house-drawn glyphs of
        what each method actually is instead, and names the schemes in words.
        See section 3.

   What is left is one bespoke component, .po-doc, used twice: once in the hero
   as what the client opens, once in #control as what the office sees. The
   subject of this page is an invoice, so the device is drawn as paper. Hairline
   rules, money right-aligned in tabular figures, one hard offset shadow to lift
   it off the page, and no radius: an invoice is not a rounded card.
   ────────────────────────────────────────────────────────────────────────── */


/* ══ 1. HERO ══════════════════════════════════════════════════════════════ */

/* The h1 runs on the house hero rules. Only the accented second clause is
   local: one clause in Oxford blue, which is the same move .pb-v b makes in
   the point bar, rather than a second colour introduced for this page. */
.page-po .pf-hero-copy h1 em {
  color: var(--hazard);
  font-style: normal;
}
.page-po .pf-hero .sub { max-width: 52ch; }

/* platform.css crops .pf-hero-media to a photograph's aspect ratio. This slot
   holds a drawn document instead, which has its own height and must not be
   cropped to a square or stretched to fill one. */
.page-po .po-fig {
  align-self: center;
  margin: 0;
  overflow: visible;
}
.page-po .po-fig img { display: none; }


/* ══ 2. THE INVOICE DEVICE ════════════════════════════════════════════════ */

.page-po .po-doc {
  border: 1px solid var(--rule);
  background: var(--paper);
  /* One hard offset shadow, not a soft blur. The page is about a document, and
     a hard offset reads as paper on paper where a 20px blur reads as a card
     floating in an app. Used once, on this component only. */
  box-shadow: 14px 16px 0 color-mix(in oklab, var(--ink) 7%, transparent);
  font-variant-numeric: tabular-nums;
}

/* The header strip: reference on the left, state on the right. The first
   version put a "Paid" badge here while the body showed an amount due and a
   pay button, which is a contradiction inside one illustration. One state, and
   it agrees with the rest of the document. */
.page-po .po-doc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklab, var(--hazard) 5%, var(--paper));
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.page-po .po-doc-hd b { color: var(--ink); font-weight: 700; }
.page-po .po-doc-hd i {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink-2);
}

.page-po .po-doc-body { padding: 22px 20px 20px; }

.page-po .po-doc-to {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.page-po .po-doc small,
.page-po .po-doc-pay small {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.page-po .po-doc-to strong { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.page-po .po-doc-amt { text-align: right; }
.page-po .po-doc-amt b {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* The lines. A definition list, because that is what a pair of a description
   and an amount is, and money right-aligned because that is how money is set. */
.page-po .po-doc-lines,
.page-po .po-doc-rows { margin: 0; }
.page-po .po-doc-lines > div,
.page-po .po-doc-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
}
.page-po .po-doc-lines > div { padding: 9px 0; }
.page-po .po-doc-lines { padding: 12px 0 18px; }
.page-po .po-doc-lines dt,
.page-po .po-doc-rows dt {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-2);
}
.page-po .po-doc-lines dd,
.page-po .po-doc-rows dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

/* The payment panel. The options are drawn, not real, so they are <span>s and
   the whole device is aria-hidden. The selected one is marked by a filled ring
   and by weight, never by colour alone. */
.page-po .po-doc-pay {
  padding: 16px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.page-po .po-opt {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.page-po .po-opt i {
  width: 13px;
  height: 13px;
  border: 1px solid var(--ink-mute);
  border-radius: 50%;
}
.page-po .po-opt.is-on { color: var(--ink); font-weight: 600; }
.page-po .po-opt.is-on i { border: 4px solid var(--hazard); }

.page-po .po-doc-btn {
  display: block;
  margin-top: 12px;
  padding: 13px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
/* The cancel control is a secondary action in the real product, so it is drawn
   as one here rather than as a second black bar competing with the first. */
.page-po .po-doc-btn.is-quiet {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-2);
}

/* The office view has no body wrapper, so its own padding lives here. */
.page-po .po-doc-office .po-doc-rows { padding: 6px 20px 12px; }
.page-po .po-doc-office .po-doc-rows > div {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.page-po .po-doc-office .po-doc-rows > div:last-child { border-bottom: 0; }
.page-po .po-doc-foot {
  padding: 16px 20px 18px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.page-po .po-doc-foot p {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Caption, on the same footing as .ae-cap and .wie-cap: this site says plainly
   when a device is drawn rather than captured. */
.page-po .po-cap {
  margin-top: 16px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-mute);
}


/* ══ 3. THE METHODS BAND ══════════════════════════════════════════════════

   The at-a-glance proof, directly under the hero, so it is drawn at size: a
   56px mark and the name at --fs-xl in four ruled cells. The first version was
   a thin strip of four bold words, which said the right thing quietly; the
   brief was that one look should settle it, and one look is a matter of scale.

   Two faults from that version are fixed here as a side effect of the rebuild:
   its label sat outside the gutter, flush to the viewport edge, and its last
   item ran underneath the floating WhatsApp button. Both came of laying the
   band out as a single space-between flex row across the full wrap.

   The cell grid is the same device as .po-links lower down the page: 1px gaps
   over a --rule background, so the rules are the grid rather than eight
   separate borders that have to meet. ────────────────────────────────────── */

.page-po .po-methods {
  padding: clamp(52px, 6vw, 84px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.page-po .po-methods-hd { margin-bottom: clamp(28px, 3vw, 44px); }
.page-po .po-methods-hd h2 {
  margin: 14px 0 0;
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: var(--ls-hero);
  color: var(--ink);
}

.page-po .po-pay {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.page-po .po-pay li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 28px) clamp(26px, 2.6vw, 36px);
  background: var(--paper);
}
.page-po .po-pay li::before { content: none; }

/* The mark. Oxford blue rather than ink: this is the one band on the page
   whose job is to be noticed from a scroll, and the accent is what the site
   already uses to mean "this is the thing". */
.page-po .po-pay-ic {
  display: block;
  margin-bottom: 6px;
  color: var(--hazard);
}
/* Sized off the glyph, not the box. The drawn content occupies roughly the
   middle 15 of the 24 viewBox units, so a 56px box was showing a 36px mark:
   the brief was that one look settles it, and at 36px it did not. */
.page-po .po-pay-ic svg {
  display: block;
  width: clamp(64px, 6.4vw, 92px);
  height: clamp(64px, 6.4vw, 92px);
  margin-left: -3px; /* optical: the glyphs are inset in their viewBox */
}
/* The AMEX lettering is the only type inside a glyph, so it takes the UI face
   explicitly: an SVG <text> otherwise inherits whatever the cascade hands it. */
.page-po .po-pay-ic svg text {
  font-family: var(--f-ui);
  paint-order: stroke;
}

.page-po .po-pay b {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.page-po .po-pay em {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .page-po .po-pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* One column rather than two: at 390px a two-up cell is 160px wide, which
     puts "American Express" on three lines under a 44px mark. */
  .page-po .po-pay { grid-template-columns: minmax(0, 1fr); }
  .page-po .po-pay li { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
  .page-po .po-pay-ic { margin-bottom: 0; }
  .page-po .po-pay-ic svg { width: 52px; height: 52px; margin-left: -2px; }
  .page-po .po-pay b { flex: 1 1 auto; font-size: var(--fs-lg); }
  .page-po .po-pay em { flex: 1 0 100%; }
}


/* ══ 4. THE AMERICAN EXPRESS ANSWER ═══════════════════════════════════════ */

.page-po #amex .po-yes {
  margin: 0 0 18px;
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h1);
  line-height: 0.9;
  letter-spacing: var(--ls-hero);
  color: var(--accent-on-dark);
}
.page-po #amex .po-yes-body p { max-width: 62ch; }

/* The text link on the dark band, matching how the hero's secondary action is
   treated elsewhere: an underlined text link rather than a competing button. */
.page-po .po-ask {
  display: inline-block;
  margin-top: 22px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--paper) 45%, transparent);
  text-underline-offset: 6px;
}
.page-po .po-ask:hover { text-decoration-color: var(--paper); }
.page-po .po-ask span { margin-left: 6px; }


/* ══ 5. THE THREE ONWARD LINKS ════════════════════════════════════════════ */

.page-po .po-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 4.5vw, 64px);
  background: var(--rule);
  border: 1px solid var(--rule);
}
.page-po .po-links a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 26px 26px;
  background: var(--paper);
  text-decoration: none;
}
.page-po .po-links a:hover { background: var(--paper-2); }
.page-po .po-links small {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hazard);
}
.page-po .po-links b {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-po .po-links span {
  margin-top: auto;
  padding-top: 14px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.page-po .po-links a:hover span i { margin-left: 4px; }
.page-po .po-links span i { font-style: normal; transition: margin-left .15s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .page-po .po-links span i { transition: none; }
}


/* ══ 6. FAQ AND CLOSING BAND ══════════════════════════════════════════════ */

.page-po #faq .faq-list { padding-bottom: 0; }
.page-po #faq { padding-bottom: clamp(72px, 8vw, 112px); }

/* Inline links in the FAQ answers take the site's prose treatment; core.css
   only shifts them to --ink, which against the answer's --ink-2 is too small a
   difference to read as a link. Same rule as /where-is-everybody/. */
.page-po #faq .faq-a .body a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1.5px solid var(--hazard);
}
.page-po #faq .faq-a .body a:hover {
  background: var(--hazard);
  color: var(--hazard-ink);
}


/* ══ 7. RESPONSIVE ════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* The offset shadow costs 14px of horizontal room the phone has not got. */
  .page-po .po-doc { box-shadow: 8px 9px 0 color-mix(in oklab, var(--ink) 7%, transparent); }
  .page-po .po-doc-to { flex-direction: column; gap: 14px; }
  .page-po .po-doc-amt { text-align: left; }
  .page-po #amex .po-yes { font-size: var(--fs-h2); }
}