/* ═══════════════════════════════════════════════════════════════════════════
   FPFX — THE PLINTH
   The shared public footer rendered by public-footer.php.

   MIRRORED FILE. Each surface serves its own document root, so this file lives
   three times:

     assets/css/fpfx-plinth.css            <- EDIT THIS ONE
     portal/assets/css/fpfx-plinth.css     <- cp
     help/assets/css/fpfx-plinth.css       <- cp

   The cache-buster reads the ROOT copy's mtime while the browser fetches the
   surface copy, so editing a surface copy leaves the version string and the
   file disagreeing. Always edit here, then copy across.

   SELF-SUFFICIENT BY REQUIREMENT
   ------------------------------
   This footer renders on the checkout page, which deliberately does NOT load
   fpfx-aurora.css — a drifting gold mesh behind a payment form is not an
   improvement, and pulling the design system in there would also change the
   page's type stack. So every Aurora token below is consumed through a literal
   fallback, e.g. var(--au-gold,#F3C46A). The file defines no --au-* token of
   its own: where Aurora IS loaded the footer picks up the live values, and
   where it is not it still renders exactly as intended.

   TYPOGRAPHY IS INHERITED, NOT IMPOSED
   ------------------------------------
   No font-family on .plinth. Every surface now resolves its body text to
   DM Sans — fpfx.css:26 and fpfx-checkout.css:42 both read var(--au-body)
   with a literal "DM Sans" fallback for the surfaces that do not load
   fpfx-aurora.css. Inheriting rather than declaring is still the right call:
   it is what kept this file correct through the Inter/Manrope sweep without
   being touched, and it is what will keep it correct through the next one.
   The only family this file names is the monospace chain for the figures and
   meta, which is what makes an index number read as an index number on all
   seven surfaces.

   COLOUR
   ------
   Warm only. No blue, violet or teal. #948C82 (--au-dim) is the contrast floor
   and nothing here is dimmer or smaller than 10px. --muted-2 / #948C82 is used
   by 131 declarations elsewhere in the build and is NOT touched by this file;
   new footer meta starts at the floor instead.

   MOTION
   ------
   One easing curve, cubic-bezier(.2,.8,.3,1), on everything.

   THE SIGNATURE INTERACTIONS NEED NO JAVASCRIPT OF THEIR OWN
   ----------------------------------------------------------
   The hand-off cards carry data-au-panel, which the existing sweep in
   assets/js/fpfx-aurora.js binds. It only sets custom properties: --mx/--my
   for the pointer's position over the card and --edge for the angle from the
   card's centre to the pointer. This file draws both effects from those three.

   NOT data-au-btn as well, even though the card is a link and the growing fill
   is the button's effect. fpfx-aurora.js guards bindPanel (:30) and bindButton
   (:51) with the SAME per-element `data-au-bound` flag and init() (:171) sweeps
   panels first, so an element carrying both attributes silently loses the
   button binding — verified by dispatching pointer events at a card with both:
   --mx and --edge were set, --fx and --fy never were. Hence one attribute and
   one source of truth. Without the script the values fall back to the defaults
   below and the cards degrade to a plain hover, which is the intended
   fallback.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Typed so the edge light can rotate smoothly rather than jumping between
   computed values. Declared identically in fpfx-aurora.css; a second identical
   declaration is a no-op, and it is repeated here because the checkout page
   loads this file without that one. */
@property --edge { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ── ground ───────────────────────────────────────────────────────────────
   `footer{}` in assets/css/fpfx.css sets padding, border and background on the
   bare element (0,0,1). Every one of those is restated here at (0,1,0) so the
   inherited rule cannot reach this component on the pages that load both. */
.plinth{
  position:relative;
  z-index:1;
  padding:0;
  border-top:1px solid var(--au-line,rgba(255,255,255,.10));
  background:var(--au-bg,#0A0806);
  color:var(--au-text,#F5F3F0);
  line-height:1.5;
}
/* A single warm bloom on the top edge, so the band reads as lit from the page
   above rather than as a black box bolted underneath it. */
.plinth::before{
  content:"";position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,
    rgba(243,196,106,.055),rgba(154,90,46,.02) 46%,transparent 72%);
}

/* Local resets. These pages carry four different base stylesheets between
   them; the footer must not inherit a list bullet or an h2 size from any of
   them. */
.plinth ul,.plinth ol{list-style:none;margin:0;padding:0}
.plinth dl,.plinth dd,.plinth p,.plinth h2{margin:0}
.plinth a{text-decoration:none}
.plinth b{font-weight:700}

.plinth-handoff,.plinth-id,.plinth-dir,.plinth-reg,.plinth-base{
  max-width:1240px;margin:0 auto;padding-left:26px;padding-right:26px;
  position:relative;z-index:1;
}

/* ── 1 · hand-off ─────────────────────────────────────────────────────────
   Destinations lead. Three cards on desktop, two on a tablet, one stacked on a
   phone — the tiles are the band that closes the link graph, so they never
   collapse into a list of text links. */
.plinth-handoff{
  padding-top:52px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.plinth-go{
  position:relative;isolation:isolate;overflow:hidden;display:block;
  padding:20px 22px 22px;
  border:1px solid var(--au-line,rgba(255,255,255,.10));
  border-radius:var(--au-rad,18px);
  background:var(--au-glass,rgba(13,11,10,.58));
  -webkit-backdrop-filter:blur(20px) saturate(150%);
          backdrop-filter:blur(20px) saturate(150%);
  transition:transform var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             border-color var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
/* The fill grows from the point the pointer is at — which, on the first frame
   of a hover, is the point it crossed the edge. Keyed to --mx/--my, the two
   properties the panel binder actually feeds. */
.plinth-go::before{
  content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);z-index:-1;
  width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(243,196,106,.16),rgba(224,145,60,.08) 48%,rgba(154,90,46,0) 76%);
  transition:width var(--au-slow,.55s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             height var(--au-slow,.55s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
/* The edge lights on the side the cursor is on: a conic gradient rotated to
   face the pointer and masked to 1px, not a uniform border glow. */
.plinth-go::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  pointer-events:none;opacity:0;
  transition:opacity var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
  background:conic-gradient(from var(--edge,0deg),transparent 0deg,
    var(--au-line-hi,rgba(243,196,106,.42)) 26deg,rgba(255,240,206,.85) 46deg,
    var(--au-line-hi,rgba(243,196,106,.42)) 66deg,transparent 96deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.plinth-go:hover,.plinth-go:focus-visible{transform:translateY(-2px)}
.plinth-go:hover::before,.plinth-go:focus-visible::before{width:240%;height:240%}
.plinth-go:hover::after{opacity:1}
.plinth-go:focus-visible{outline:2px solid var(--au-gold,#F3C46A);outline-offset:3px}

.plinth-go-k{
  display:block;margin-bottom:12px;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.16em;color:var(--au-dim,#AEA8A1);
}
.plinth-go-t{
  display:block;margin-bottom:6px;
  font-size:1.02rem;font-weight:700;letter-spacing:-.015em;
  color:var(--au-text,#F5F3F0);
}
.plinth-go-d{
  display:block;max-width:34ch;
  font-size:.83rem;line-height:1.55;color:var(--au-muted,#BCB5AB);
}
.plinth-go-arw{
  position:absolute;right:20px;top:18px;font-style:normal;font-size:15px;
  color:var(--au-gold,#F3C46A);
  transition:transform var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-go:hover .plinth-go-arw{transform:translate(4px,-4px)}

/* ── 2 · identity ─────────────────────────────────────────────────────────
   One horizontal line: mark, sentence, profiles. Not a 2fr cell heading a
   five-column grid. */
.plinth-id{
  margin-top:42px;padding-top:26px;padding-bottom:26px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px;
}
.plinth-mark{display:inline-flex;align-items:center;gap:10px;flex:none}
.plinth-word{
  /* Logotype - display face, and a line-height that actually contains the
     glyphs (was .98, 2px short, which risks shaving the gradient second line). */
  display:flex;flex-direction:column;line-height:1.06;
  font-family:var(--au-disp,"Outfit",system-ui,sans-serif);
  font-weight:800;letter-spacing:-.035em;font-size:.9rem;
  color:var(--au-text,#F5F3F0);
}
.plinth-word em{
  font-style:normal;
  background:var(--au-grad,linear-gradient(100deg,#FFF0CE,#F3C46A 46%,#C08C2E));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plinth-lede{
  flex:1 1 420px;max-width:74ch;
  font-size:.8rem;line-height:1.62;color:var(--au-muted,#BCB5AB);
}
.plinth-social{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-left:auto;flex:none;
}
/* Scoped one level deeper than assets/css/fpfx-socials.css's own
   `.fpfx-social-links .fpfx-social-link`, so the profiles look the same on all
   seven surfaces whether or not that file happens to be loaded. */
.plinth .plinth-social .fpfx-social-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 5px 5px;min-height:32px;
  border:1px solid var(--au-line,rgba(255,255,255,.10));
  border-radius:var(--au-pill,100px);
  background:rgba(255,255,255,.04);
  color:var(--au-muted,#BCB5AB);
  font-size:11px;font-weight:600;line-height:1;
  box-shadow:none;
  transition:color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             border-color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             transform var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth .plinth-social .fpfx-social-link:hover,
.plinth .plinth-social .fpfx-social-link:focus-visible{
  transform:translateY(-2px);
  color:var(--au-gold-hi,#FFF0CE);
  border-color:var(--au-line-hi,rgba(243,196,106,.42));
  background:rgba(243,196,106,.08);
  outline:none;
}
.plinth .plinth-social .fpfx-social-mark{
  width:22px;height:22px;flex:0 0 22px;border-radius:var(--au-pill,100px);
  display:inline-grid;place-items:center;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:9px;font-weight:700;letter-spacing:.02em;color:#150F05;
  background:var(--au-grad,linear-gradient(100deg,#FFF0CE,#F3C46A 46%,#C08C2E));
  box-shadow:none;
}

/* ── 3 · directory ───────────────────────────────────────────────────────
   One wrapping chip rail with inline set labels. It wraps; it never collapses
   into columns, so no set can be pushed off a narrow screen. */
.plinth-dir{
  padding-top:26px;padding-bottom:26px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  display:flex;flex-direction:column;gap:14px;
}
.plinth-set{display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px}
.plinth-set-h{
  flex:none;min-width:104px;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--au-dim,#AEA8A1);
}
.plinth-lnk{
  position:relative;isolation:isolate;overflow:hidden;
  padding:7px 13px;border-radius:var(--au-pill,100px);
  border:1px solid var(--au-line-2,rgba(255,255,255,.06));
  font-size:.81rem;color:var(--au-muted,#BCB5AB);
  transition:color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             border-color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
/* The chip fills from the leading edge rather than lifting or brightening. */
.plinth-lnk::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(243,196,106,.16),rgba(224,145,60,.06));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-lnk:hover,.plinth-lnk:focus-visible{
  color:var(--au-gold-hi,#FFF0CE);
  border-color:var(--au-line-hi,rgba(243,196,106,.42));
  outline:none;
}
.plinth-lnk:hover::before,.plinth-lnk:focus-visible::before{transform:scaleX(1)}

/* ── 4 · disclosure register ─────────────────────────────────────────────
   Full-width bands, not a two-column split.

   This used to be a sidebar layout: facts in a minmax(240px,.85fr) column and
   the risk disclosure in a 1.6fr column beside it. On a 1280px viewport that
   computed to columns of 396.891px and 747.094px with a 44px gap, so
   .plinth-risk-h and .plinth-risk started at left:479 while .plinth-handoff,
   .plinth-id, .plinth-dir, .plinth-reg and .plinth-base all started at
   left:13 (content edge left:39). The heading therefore sat 440px inside the
   footer's own left edge and no sibling agreed with it — that is the reported
   misalignment. It also left ~310px of dead space below the short facts
   column, because the facts stack measured 204px tall against the register's
   514px.

   Facts now run as a horizontal fact row and the risk register spans the full
   container width beneath them, so every band in the footer shares one left
   and one right edge. */
.plinth-reg{
  padding-top:28px;padding-bottom:26px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  align-items:start;
}
.plinth-facts{
  grid-column:1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px 44px;
}
.plinth-facts>div{display:grid;gap:3px}
.plinth-facts dt{
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--au-dim,#AEA8A1);
}
.plinth-facts dd{font-size:.84rem;font-weight:600;color:var(--au-text,#F5F3F0)}
.plinth-rel{
  grid-column:1;font-size:.78rem;line-height:1.6;color:var(--au-muted,#BCB5AB);
}
/* The heading opens its own band now, so it carries the hairline that the
   column split used to imply. grid-row is left to flow: pinning it to row 1
   is what held it level with the facts in the old sidebar. */
.plinth-risk-h{
  grid-column:1;margin-top:4px;padding-top:18px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--au-gold,#F3C46A);
}
/* Four statements across two columns rather than one 747px-wide stack, so the
   band fills the width it now spans instead of running long and thin. */
.plinth-risk{
  grid-column:1;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 44px;
}
.plinth-risk li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding-left:12px;border-left:1px solid var(--au-line-2,rgba(255,255,255,.06));
}
.plinth-risk-n{
  padding-top:2px;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.1em;color:var(--au-dim,#AEA8A1);
}
.plinth-risk p{font-size:.775rem;line-height:1.62;color:var(--au-muted,#BCB5AB)}
.plinth-risk-lite{
  grid-column:1;font-size:.8rem;line-height:1.64;color:var(--au-muted,#BCB5AB);
}
.plinth-risk-lnk{
  color:var(--au-gold,#F3C46A);
  border-bottom:1px solid rgba(243,196,106,.34);
  transition:border-color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1)),
             color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-risk-lnk:hover{color:var(--au-gold-hi,#FFF0CE);border-bottom-color:var(--au-gold,#F3C46A)}
.plinth-extra{
  grid-column:1;margin-top:14px;padding-left:12px;
  border-left:2px solid var(--au-line-hi,rgba(243,196,106,.42));
  font-size:.775rem;line-height:1.6;color:var(--au-muted,#BCB5AB);
}

/* ── 5 · baseline ────────────────────────────────────────────────────────
   Three cells, so it cannot read as the inherited two-cell copyright bar. */
.plinth-base{
  padding-top:16px;padding-bottom:24px;
  border-top:1px solid var(--au-line-2,rgba(255,255,255,.06));
  display:grid;grid-template-columns:1fr auto auto;gap:10px 22px;align-items:center;
}
.plinth-cr{font-size:11px;color:var(--au-dim,#AEA8A1)}
.plinth-note{
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--au-dim,#AEA8A1);
}
.plinth-top{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--au-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--au-dim,#AEA8A1);
  transition:color var(--au-fast,.18s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-top i{
  font-style:normal;
  transition:transform var(--au-base,.35s) var(--au-ease,cubic-bezier(.2,.8,.3,1));
}
.plinth-top:hover{color:var(--au-gold,#F3C46A)}
.plinth-top:hover i{transform:translateY(-3px)}

/* ── density ─────────────────────────────────────────────────────────────
   Compact is for a visitor mid-task — support, sign-in, checkout, the
   certificate wall. Same bands, less air, condensed disclosure. */
.plinth[data-density=compact] .plinth-handoff{padding-top:38px}
.plinth[data-density=compact] .plinth-id{margin-top:30px;padding-top:22px;padding-bottom:22px}
.plinth[data-density=compact] .plinth-dir,
.plinth[data-density=compact] .plinth-reg{padding-top:22px;padding-bottom:22px}
/* With no hand-off band the identity line is the first thing in the footer and
   needs its own top air instead of a rule. */
.plinth[data-density=compact] .plinth-handoff+.plinth-id{margin-top:26px}
.plinth[data-surface=checkout] .plinth-id{margin-top:0;padding-top:34px;border-top:0}

/* ── responsive ──────────────────────────────────────────────────────────
   Tiles 3 -> 2 -> 1, register 2 columns -> 1, chip rail wraps throughout. */
@media (max-width:1040px){
  .plinth-handoff{grid-template-columns:repeat(2,1fr)}
  .plinth-social{margin-left:0;width:100%}
}
@media (max-width:900px){
  /* .plinth-reg is a single column at every width now, so only the two inner
     grids need to collapse: the risk register from two statement columns to
     one, and the fact row from three cells to two. */
  .plinth-risk{grid-template-columns:minmax(0,1fr)}
  .plinth-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Three cells stop fitting well before they stop fitting at all: the
     copyright cell is the flexible one, so it is the one that gets crushed
     to a five-line column while the other two keep their width. Stack here
     rather than at the last possible moment. */
  .plinth-base{grid-template-columns:1fr;gap:12px}
  .plinth-top{justify-self:start}
}
@media (max-width:680px){
  .plinth-handoff,.plinth-id,.plinth-dir,.plinth-reg,.plinth-base{
    padding-left:20px;padding-right:20px;
  }
  .plinth-handoff{grid-template-columns:1fr;padding-top:38px}
  .plinth-set-h{min-width:100%}
  .plinth-facts{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .plinth-go,.plinth-go::before,.plinth-go::after,.plinth-lnk,.plinth-lnk::before,
  .plinth-go-arw,.plinth-top i,.plinth .plinth-social .fpfx-social-link{
    transition-duration:.001ms !important;
  }
  .plinth-go:hover{transform:none}
}