/* footer.css — THE FOOTER, ONCE.
 *
 * These rules lived in app.css, which subscribe.html does not load: it has its
 * own 20 KB stylesheet because a pricing page has no business carrying the
 * terminal's. The result was two different footers on one site — the wire's
 * carried the brand block, the credits, the AI-assistance disclosure and the
 * route for reporting an error; the pricing page, the one that asks for money,
 * carried none of them.
 *
 * Copied into subscribe.css instead would have been two copies to keep in
 * step, which is the failure this codebase keeps paying for elsewhere. One
 * file, linked by both.
 */

.ftr { background: #1D6BB4; color: #e9f2fb; border-top: none;
       padding: 34px max(20px, calc((100% - 1560px) / 2 + 20px)) 30px;
       margin-top: 30px; }
.ftwrap { max-width: 1520px; margin: 0; }
.ftcols { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ftlogo { height: 40px; width: auto; display: block; margin-bottom: 12px;
          opacity: .95; }
.ftlogo { filter: brightness(0) invert(1); }
.ftdesc { font-size: 12.5px; line-height: 1.6; color: #e9f2fb; max-width: 560px; }
.ftdesc b { color: #fff; }
.ftdesc a, .cred a, .ftcopy a, .ftdisc a, .ftlegal a { color: #fff; font-weight: 600; }
.ftdesc a:hover, .cred a:hover, .ftcopy a:hover, .ftdisc a:hover, .ftlegal a:hover { text-decoration: underline; }
.ftcredits { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cred { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.82); }
.madeby { display: inline-flex; align-items: center; gap: 8px;
          text-decoration: none; width: fit-content; color: rgba(255,255,255,.82); }
.madeby .anthropic-logo { height: 13px; width: auto; display: block;
          filter: brightness(0) invert(1); opacity: .92; }
.madeby:hover { text-decoration: none; }
.madeby:hover .anthropic-logo { opacity: 1; }
.ftkeys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
          margin-top: 24px; padding-top: 16px;
          border-top: 1px solid rgba(255,255,255,.24); }
.ftkeys-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
            text-transform: uppercase; color: rgba(255,255,255,.7); margin-right: 2px; }
.ftkeys .k { display: inline-flex; align-items: center; gap: 6px;
             font-size: 11.5px; color: #e9f2fb; }
.ftkeys kbd {
  font-family: var(--mono); font-size: 11px; line-height: 1;
  min-width: 20px; padding: 5px 6px; text-align: center;
  color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); border-bottom-width: 2px;
  border-radius: 4px;
}
.ftkeys .k.op { display: none; }
.ftparent { margin: 22px 0 0; font-size: 13px; font-weight: 600; color: #fff; }
.ftdisc { margin: 12px 0 0; padding-top: 16px; max-width: 900px;
          font-size: 11.5px; line-height: 1.65; color: rgba(255,255,255,.72);
          border-top: 1px solid rgba(255,255,255,.24); }
/* THE FOURTEEN LEGAL LINKS. This row is the only route to the Terms, the
 * Privacy Policy and the cancellation route from most pages on the site, and
 * until this rule existed it had no styling anywhere: `grep ftlegal
 * assets/*.css` returned nothing while the markup shipped in four places.
 * What it fell through to depended on which stylesheet the page loaded, and
 * both answers were wrong:
 *
 *   subscribe.css:86 and legal.css:164 both end `a { color: var(--brand) }`,
 *   so on the page that takes the money and on all fourteen legal pages the
 *   links rendered #2F6FAE on this band's #1D6BB4 — 1.05:1 measured, 1.86:1
 *   in dark where --brand is #4D9BE0. app.css:4070 had already computed that
 *   exact pair for this exact band. Fourteen compliance links the same blue
 *   as the blue behind them.
 *
 *   app.css:152 is `a { color: inherit }`, so on index.html and the shell.js
 *   pages they inherited .ftr's #e9f2fb at normal weight with no underline —
 *   legible, but with nothing at all marking them as links.
 *
 * So: white and semibold like every other link down here (the selector two
 * rules above), and permanently underlined, which the rest of the footer does
 * not need and this row does. The others are one or two links inside a
 * sentence; this is fourteen labels in a row separated by middots, where
 * weight alone is not an affordance a reader can see. The paragraph's own
 * colour is .94 rather than .82 because the separators between the links are
 * text too: .94 white on #1D6BB4 measures 5.13:1 at this size and .82 does
 * not clear 4.5:1, which is what build/audit.py fails subscribe.html over. */
.ftlegal { margin: 12px 0 0; max-width: 900px;
           font-size: 12px; line-height: 1.95; color: rgba(255,255,255,.94); }
.ftlegal a { text-decoration: underline; text-underline-offset: 2px;
             text-decoration-color: rgba(255,255,255,.5); }
.ftlegal a:hover { text-decoration-color: #fff; }
.ftcopy { margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.82); }
/* .86, not .55: on the #1D6BB4 band .55 measured 2.79:1 and an 11px stamp needs
   4.5:1 (build/audit.py flagged it on every page that carries this footer). */
.ftver { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
         color: rgba(255,255,255,.86); }
.ftrev { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
         color: rgba(255,255,255,.38); }
.ftr a:focus-visible { outline-color: #fff; }
.ftkeys-l { color: rgba(255,255,255,.92); }
.ftdisc   { color: rgba(255,255,255,.90); }
.cred     { color: rgba(255,255,255,.94); }
.ftcopy   { color: rgba(255,255,255,.94); }
.ftkeys kbd { background: rgba(3, 32, 60, .40);
              border-color: rgba(255,255,255,.44); }
.ftbug {
  display: inline-block; cursor: pointer;
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--grid); background: var(--panel2);
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-dim);
  line-height: 1.7; vertical-align: baseline;
}
.ftr a.ftbug { color: var(--text-dim); border-bottom: 0; }   /* shell.js renders it as a link */
.ftbug:hover {
  border-color: var(--brand); color: var(--brand-l);
  background: rgba(77,155,224,.10);
}

@media (max-width: 780px) {
  
}

@media (max-width: 780px) {
  .ftcols { gap: 18px; }
  .ftr { padding: 22px 14px 20px; }
}

/* The focus ring. app.css declares this once for .ftr a and .foot a together,
   but subscribe.html does not load app.css, so without it here the links in
   its footer would have the browser default ring — a blue that appears
   nowhere in this palette. */
:where(.ftr a, .ftr button):focus-visible {
  outline: var(--ring-w, 2px) solid var(--ring-c, currentColor);
  outline-offset: var(--ring-o, 2px);
  border-radius: var(--r-row, 6px);
}