/* ═══════════════════════════════════════════════════════════════════════════
   REFRESH — the layer that makes the public site feel current and alive
   ═══════════════════════════════════════════════════════════════════════════

   Loaded AFTER marketing.css so it can override it. Kept separate rather than
   merged so that what is structure and what is polish stay tellable apart.

   The brief was "it feels old and dead". Three things were actually wrong:

     1. Every surface was a flat 1px border on a flat fill. Nothing had depth,
        so nothing looked like it could be interacted with.
     2. Nothing moved. No hover state on a card, no response to arriving.
     3. Two sections reused .trust — a component designed as a compact bar of
        four items — inside a half-width column, so a 210px minmax produced two
        ~200px columns and the copy fell into tall thin ribbons.

   The constraint that shapes all of it: this sells health cover to people who
   are worried about money. It has to feel considered and current, not playful.
   So the motion is short, small and consistent, and there is not a single
   bounce, spin or parallax anywhere.

   MOTION IS OPT-OUT AT THE TOP. Everything below is wrapped so that
   prefers-reduced-motion gets a completely static site — not a slower one.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* One control height for everything in a toolbar, so a button and a
     dropdown cannot disagree by 6px the way they did. */
  --ctl-h: 38px;

  /* One easing and two durations, used everywhere. Consistency is most of what
     makes motion read as design rather than as decoration. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 140ms;
  --slow: 420ms;

  /* Layered shadows. A single hard shadow reads as 2010; two offset softer
     ones read as depth. */
  --lift-1: 0 1px 2px rgba(24, 18, 8, .05), 0 4px 12px -6px rgba(24, 18, 8, .18);
  --lift-2: 0 2px 6px rgba(24, 18, 8, .07), 0 18px 38px -18px rgba(24, 18, 8, .32);
  --lift-3: 0 3px 10px rgba(24, 18, 8, .09), 0 34px 60px -28px rgba(24, 18, 8, .40);
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --lift-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -6px rgba(0, 0, 0, .55);
  --lift-2: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 38px -18px rgba(0, 0, 0, .7);
  --lift-3: 0 3px 10px rgba(0, 0, 0, .5), 0 34px 60px -28px rgba(0, 0, 0, .8);
}

/* ── 1. The topbar controls line up ─────────────────────────────────────────
   The sign-in button was padding-sized (~42px) next to fixed 36px dropdowns.
   Height on the container, not on each control, so adding a fourth cannot
   reintroduce the mismatch. */

.pub-head-actions .btn,
.pub-head-actions .drop-trigger,
.drop-trigger {
  height: var(--ctl-h);
  padding-top: 0;
  padding-bottom: 0;
}

.pub-head-actions .btn { padding-left: 16px; padding-right: 16px; }
.drop-icon .drop-trigger { width: var(--ctl-h); }

.pub-head-actions .btn,
.pub-head-actions .drop-trigger {
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}
.pub-head-actions .btn:hover { transform: translateY(-1px); box-shadow: var(--lift-1); }

/* The header itself earns its sticky position once you scroll past the hero. */
.pub-head {
  backdrop-filter: saturate(1.4) blur(10px);
  background: color-mix(in srgb, var(--shell-raised) 86%, transparent);
  transition: box-shadow var(--slow) var(--ease), background-color var(--slow) var(--ease);
}
.pub-head.is-stuck { box-shadow: var(--lift-1); background: var(--shell-raised); }

/* Nav links get a gold underline that grows from the left rather than a
   background swatch that appears all at once. */
.pub-nav a { position: relative; transition: color var(--fast) var(--ease); }
.pub-nav a::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.pub-nav a:hover { background: transparent; color: var(--ink); }
.pub-nav a:hover::after,
.pub-nav a.on::after { transform: scaleX(1); }

/* ── 2. Arriving: content rises into place ──────────────────────────────────
   Applied by motion.js, which adds .reveal to section children and .in when
   they cross the viewport. The CSS does the work; the script only decides when. */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ── 3. Section headings ────────────────────────────────────────────────────
   A short gold rule above the heading, which draws in with the section. It
   replaces nothing and costs no layout, but it makes a band start rather than
   merely continue. */

.band-head { position: relative; }
.band-head .kicker {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.band h2 { letter-spacing: -.015em; }
.band h1 { letter-spacing: -.02em; }

.band-head::before {
  content: "";
  display: block;
  width: 46px; height: 3px;
  border-radius: 3px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 25%, transparent));
  transform: scaleX(.25); transform-origin: left;
  transition: transform 600ms var(--ease);
}
.band-head.in::before,
.reveal.in .band-head::before,
.band-head.reveal.in::before { transform: scaleX(1); }
.band-deep .band-head::before { background: linear-gradient(90deg, var(--gold), transparent); }

/* ── 4. Cards: one hover behaviour, everywhere ──────────────────────────────
   .tile, .aud, .pack and the new components below all share it, so the site
   responds the same way wherever you point at it. */

.tile, .aud, .pack, .feature, .newscard, .routecard {
  transition: transform var(--slow) var(--ease),
              box-shadow var(--slow) var(--ease),
              border-color var(--slow) var(--ease);
  will-change: transform;
}
.tile:hover, .aud:hover, .pack:hover,
.feature:hover, .newscard:hover, .routecard:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--shell-hair));
}

/* A card that is a link should say so under the pointer. */
a.routecard, a.newscard { text-decoration: none; color: inherit; }

/* ── 5. Photographs ─────────────────────────────────────────────────────────
   The frame stays put and the image inside it moves. Scaling the frame would
   drag the layout around. */

.photo { overflow: hidden; box-shadow: var(--lift-2); }
.photo img { transition: transform 900ms var(--ease); }
.photo:hover img { transform: scale(1.035); }

/* ── 6. The hero card ───────────────────────────────────────────────────────
   The 3D belongs to the CARD, not to this file.

   card-face.blade.php tracks the pointer into --mx/--my and card-premium.css
   turns those into a rotation on .idcard AND a sweep of the foil highlight
   across its surface - the two together are what read as a physical object
   catching the light. This file previously rotated the WRAPPER as well, so the
   rotations compounded and the sheen no longer lined up with the tilt.

   So there is no rotation here. Two things only:

     the FLOAT, which moves the wrapper on Y and therefore cannot fight a
     rotation applied to the card inside it

     no perspective, because .card3d already establishes one at 1500px and a
     second perspective on the parent distorts the first

   The hero card is the only sample card that opts into the tilt. A page showing
   nine treatments at once should not have all nine swivelling. */

.hero-art .card-wrap { transition: filter 500ms var(--ease); }
.hero-art:hover .card-wrap { filter: drop-shadow(0 30px 50px rgba(24, 18, 8, .28)); }

/* A slow idle float, so the card is alive before anybody touches it - and it
   stands still while somebody is actually handling it, because a card that
   drifts under the pointer is a card that is hard to look at. */
@keyframes ih-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.hero-art .card-wrap { animation: ih-float 7s ease-in-out infinite; }
.hero-art:hover .card-wrap { animation-play-state: paused; }

/* The hero is the showpiece, so its tilt is a degree or two deeper than a card
   sitting in the member portal, and its shadow moves with it. */
.hero-art .idcard {
  transform:
    rotateY(calc(var(--mx) * 9deg))
    rotateX(calc(var(--my) * -9deg))
    translateZ(0);
}
.hero-art .card3d:hover .idcard {
  transform:
    rotateY(calc(var(--mx) * 12deg))
    rotateX(calc(var(--my) * -12deg))
    translateY(calc(var(--card-u) * -1.4))
    scale(1.02);
  box-shadow:
    0 2px 4px rgba(20, 16, 12, .22),
    0 26px 48px -16px rgba(20, 16, 12, .42),
    0 60px 96px -38px rgba(20, 16, 12, .5);
}

/* ── 7. FEATURES — replaces .trust in the two sections it was wrong for ─────
   .trust puts the label and the copy side by side, which works in a full-width
   four-across bar and fails inside a half-width column: the label eats the
   width and the copy falls into a ribbon. This stacks instead, and gives each
   item an icon chip so the group reads as three things rather than as text. */

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1100px) {
  .split .features { gap: 12px; }
}

.feature {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
}
.band-tint .feature { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.feature:hover { background: var(--shell-raised); }

.feature-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--gold) 26%, transparent),
              color-mix(in srgb, var(--gold) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  transition: transform var(--slow) var(--ease);
}
.feature:hover .feature-ico { transform: scale(1.06) rotate(-3deg); }
.feature-ico svg {
  width: 21px; height: 21px;
  stroke: var(--gold-deep); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.band-deep .feature-ico svg { stroke: var(--gold); }

/* .feature-text, NOT `.feature span`. The icon chip is itself a span, and a
   bare element selector here outranks the chip's own class - which is what
   made every one of these icons sit in the top-left corner of its chip. */
.feature-text b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -.005em;
}
.feature-text span {
  display: block;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-mid);
}
.band-deep .feature-text span { color: rgba(232, 238, 246, .78); }

/* ── 8. ROUTE CARDS — "More than medical care" ──────────────────────────────
   Was two bare outline buttons under a paragraph, which gave the section no
   reason to exist visually. Two real choices, each saying who it is for. */

.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
  margin-top: 8px;
}
.routecard {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--shell-hair);
  background: var(--shell-raised);
  box-shadow: var(--lift-1);
}
.routecard-ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--gold) 24%, transparent),
              color-mix(in srgb, var(--gold) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.routecard-ico svg {
  width: 22px; height: 22px;
  stroke: var(--gold-deep); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.routecard-text b { display: block; font-size: 16.5px; font-weight: 600; }
.routecard-text span { display: block; font-size: 14px; color: var(--ink-mid); margin-top: 3px; line-height: 1.55; }
.routecard-go {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hair-firm);
  color: var(--gold-deep);
  transition: transform var(--slow) var(--ease), background-color var(--slow) var(--ease);
}
.routecard:hover .routecard-go {
  transform: translateX(3px);
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}
.routecard-go svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 9. NEWS AND PRESS ──────────────────────────────────────────────────────
   Both were plain tiles of text. A press mention and a news post are different
   things and now look it. */

.newsgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
}
.newscard {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px;
  border-radius: 16px;
  border: 1px solid var(--shell-hair);
  background: var(--shell-raised);
  box-shadow: var(--lift-1);
  overflow: hidden;
}
/* A gold hairline along the top edge that fills in on hover. */
.newscard::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 20%, transparent));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.newscard:hover::before { transform: scaleX(1); }

.newscard .eyebrow {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-deep);
}
.newscard h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.28;
}
.newscard p { margin: 0; font-size: 14.3px; line-height: 1.6; color: var(--ink-mid); }
.newscard .meta { font-size: 12.8px; color: var(--ink-soft); }

/* The press card carries a play glyph, because these are broadcast segments. */
.newscard-play {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  margin-bottom: 2px;
}
.newscard-play svg {
  width: 14px; height: 14px;
  fill: var(--gold-deep); stroke: none;
  /* 1px, and it is OPTICAL, not a correction. The triangle is now centred
     in its box; a triangle centred by its bounding box still reads as sitting
     left inside a circle, because its visual mass is at the flat edge. The
     2px that was here before was compensating for the path being off-centre
     as well, which double-counted. */
  margin-left: 1px;
}

/* ── 10. "Who this is for" ──────────────────────────────────────────────────
   Kept as cards, but given the same chip-and-lift language as everything else
   and a heading that is not floating on its own. */

.aud {
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: var(--lift-1);
}
.aud-ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  margin-bottom: 4px;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--gold) 24%, transparent),
              color-mix(in srgb, var(--gold) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.aud-ico svg {
  width: 22px; height: 22px;
  stroke: var(--gold-deep); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 11. Tiles ──────────────────────────────────────────────────────────────
   The service tiles keep their shape and gain the shared depth and the chip. */

.tile { border-radius: 16px; box-shadow: var(--lift-1); }
.tile-icon {
  border-radius: 12px;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--gold) 22%, transparent),
              color-mix(in srgb, var(--gold) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  transition: transform var(--slow) var(--ease);
}
.tile:hover .tile-icon { transform: scale(1.06) rotate(-3deg); }

/* ── 12. Bands ──────────────────────────────────────────────────────────────
   A very soft warm glow behind the hero and the deep bands, so a full-width
   colour field has somewhere to look. */

.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: -40% 30% 40% -10%;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--gold) 15%, transparent), transparent);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.band-deep { position: relative; overflow: hidden; }
.band-deep::before {
  content: "";
  position: absolute; inset: -60% -10% 30% 40%;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--gold) 17%, transparent), transparent);
  pointer-events: none;
}
.band-deep .wrap { position: relative; }

/* ── 13. Buttons ────────────────────────────────────────────────────────────
   Everywhere, not just the topbar. A button that does not move under the
   pointer is the single clearest tell of an old page. */

.btn {
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              filter var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--lift-1); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary { box-shadow: 0 1px 2px rgba(120, 84, 8, .25), 0 8px 20px -10px rgba(184, 132, 16, .7); }
.btn-primary:hover { box-shadow: 0 2px 4px rgba(120, 84, 8, .28), 0 14px 28px -10px rgba(184, 132, 16, .8); }

/* ── 14. Focus ──────────────────────────────────────────────────────────────
   Restated here because several rules above touch the same elements, and a
   focus ring that a hover rule quietly overrides is an accessibility bug that
   only keyboard users ever meet. */

.btn:focus-visible,
.drop-trigger:focus-visible,
.pub-nav a:focus-visible,
a.routecard:focus-visible,
a.newscard:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* ═══ Reduced motion: static, not slower ════════════════════════════════════
   Somebody who has asked their system for less motion is often asking because
   motion makes them ill. Halving a duration does not help; removing it does. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .band-head::before { transform: scaleX(1) !important; }
  .hero-art .card-wrap { animation: none !important; transform: none !important; }
  .hero-art .idcard,
  .hero-art .card3d:hover .idcard { transform: none !important; }
  .tile:hover, .aud:hover, .pack:hover,
  .feature:hover, .newscard:hover, .routecard:hover,
  .btn:hover { transform: none !important; }
  .photo:hover img { transform: none !important; }
}

/* ── 15. Footer ─────────────────────────────────────────────────────────────
   Four equal columns meant nothing led, and the contact details were an
   unlabelled list with the phone number buried between a fax and an address -
   on a site whose every page header pushes that number. */

.site-foot {
  position: relative;
  padding: 66px 0 28px;
  background:
    radial-gradient(120% 80% at 12% -10%,
      color-mix(in srgb, var(--gold) 13%, transparent), transparent 60%),
    var(--navy);
}
/* A gold hairline across the very top, so the footer starts rather than the
   page merely running out. */
.site-foot::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .75;
}

.site-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(min(130px, 100%), .8fr)) minmax(min(230px, 100%), 1.15fr);
  gap: 40px 34px;
  align-items: start;
}
@media (max-width: 900px) {
  .site-foot-grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 32px 26px; }
}

.foot-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
}
.foot-brand img { border-radius: 10px; }

.foot-about { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; max-width: 34ch; }
.foot-strap {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: color-mix(in srgb, var(--gold) 78%, #fff);
}
.foot-cta { align-self: start; }

.site-foot h4 {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(232, 238, 246, .5);
  font-weight: 700;
}

.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-links a {
  position: relative;
  color: rgba(232, 238, 246, .82);
  text-decoration: none;
  font-size: 14.5px;
  transition: color var(--fast) var(--ease);
}
.foot-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.foot-links a:hover { color: #fff; }
.foot-links a:hover::after { transform: scaleX(1); }

/* The phone number is the product's main call to action; it should not look
   like a list item. */
.foot-call {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  text-decoration: none;
  margin-bottom: 18px;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.foot-call:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--gold) 17%, transparent);
}
.foot-call-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 20%, transparent);
}
.foot-call-ico svg {
  width: 17px; height: 17px;
  stroke: var(--gold); fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.foot-call-text { display: block; font-size: 17px; font-weight: 600; color: #fff; line-height: 1.25; }
.foot-call-text small {
  display: block;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: rgba(232, 238, 246, .5);
  margin-bottom: 2px;
}

.foot-detail { margin: 0; display: grid; gap: 2px; font-size: 14px; }
.foot-detail dt {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: rgba(232, 238, 246, .42);
  margin-top: 10px;
}
.foot-detail dt:first-of-type { margin-top: 0; }
.foot-detail dd { margin: 0; color: rgba(232, 238, 246, .82); line-height: 1.5; }
.foot-detail a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(232, 238, 246, .25); }
.foot-detail a:hover { color: #fff; border-bottom-color: var(--gold); }

.foot-equity {
  margin: 44px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(232, 238, 246, .12);
  font-size: 12.8px;
  line-height: 1.65;
  color: rgba(232, 238, 246, .5);
  max-width: 96ch;
}

/* NO second rule here. The equity statement already sits under one, and a
   divider above this row as well fenced two lines of fine print between two
   hairlines 40px apart. The equity line, the copyright and the claim are one
   closing block; separated ONCE from the columns above.

   border-top: 0 explicitly, not just omitted: marketing.css sets one on this
   same selector and loads first, so leaving the declaration out keeps the old
   line rather than removing it. That is what happened on the first attempt. */
.site-foot-base {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  justify-content: space-between; align-items: center;
  border-top: 0;
  padding-top: 0;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(232, 238, 246, .55);
}
/* SCOPE 9 - this is a claim about what the product is, so it is a statement
   rather than fine print. */
.foot-claim {
  font-weight: 600;
  color: #fff;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

/* ── 16. Price chips ────────────────────────────────────────────────────────
   These were .pill-info, which is blue. On a gold and cream palette a blue chip
   is the one element on the page that looks borrowed from somewhere else. */

.pill-price {
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border-color: color-mix(in srgb, var(--gold) 42%, transparent);
  color: var(--gold-deep);
  font-weight: 600;
}
.pill-quiet {
  background: transparent;
  border-color: var(--hair-firm);
  color: var(--ink-soft);
}

/* A standfirst under a section heading: the sentence that used to be crammed
   into the kicker and set in letter-spaced capitals. */
.band-head p { font-size: 16.5px; line-height: 1.62; color: var(--ink-mid); max-width: 54ch; }
.split .band-head p { max-width: 46ch; }

/* ── 17. Final corrections from looking at the rendered page ────────────────
   Every one of these was invisible in the markup and obvious in a screenshot,
   which is the argument for taking one. */

/* The equity rule stopped short of the contact column, because max-width also
   truncates the border it sits on. The rule spans the footer; the TEXT is what
   should be measured. */
.foot-equity { max-width: none; }
.foot-equity > span { display: block; max-width: 96ch; }

/* Four press cards in a 3-across grid left one alone on a second row. At 250px
   the fourth column lost to the gaps by four pixels. */
.newsgrid { grid-template-columns: repeat(auto-fit, minmax(min(228px, 100%), 1fr)); }

/* The brand logo is a full-colour mark with dark strokes; on navy it lost its
   outline. A soft light plate under it, not a hard box. */
.foot-brand img {
  background: rgba(255, 255, 255, .92);
  padding: 3px;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .5);
}

/* The hero's phone link sat on its own line under the two buttons, orphaned.
   Part of the same action group, just quieter than the other two. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-actions .btn-quiet { padding-left: 4px; }

/* On a phone these stack, and stacked buttons of four different widths down a
   ragged edge read as a mistake rather than as a choice. Same rule as `.row`
   in brand.css, for the same reason — this is the container the marketing
   pages use for the pair of calls to action at the top of a screen.
   `.btn-quiet` is excluded: it is a text link wearing a button class, and
   stretching it to full width draws a box around a link. */
@media (max-width: 560px) {
  .hero-actions > .btn:not(.btn-quiet) { flex: 1 1 100%; justify-content: center; }
}

/* ── 18. The chips are grids, and stay grids ───────────────────────────────
   Every icon on the site sat in the top-left of its chip because a rule
   written for a caption - `.feature span { display: block }` - also matched
   the chip, which is a span, and outranked the chip's own class.

   The selectors above no longer style bare elements, so that cannot recur.
   This is the second lock: if some future rule does reach one of these, the
   chip is still a centred grid. */
.feature-ico,
.routecard-ico,
.routecard-go,
.aud-ico,
.tile-icon,
.foot-call-ico,
.newscard-play {
  display: grid;
  place-items: center;
}

/* ── 19. The hero card's sheen ──────────────────────────────────────────────
   The card component's foil sweep is tuned for a card sitting in a list in the
   member portal, where it should be a hint. In the hero it is the product shot,
   so it travels further and catches a little more light — which is most of what
   makes the tilt read as a physical object rather than a skewed picture.

   Only .hero-art. Every other card on the site keeps the quieter original. */

.hero-art .idcard .foil {
  opacity: .72;
  transform: translateX(calc(var(--mx) * 22%)) translateY(calc(var(--my) * 13%));
}
.hero-art .card3d:hover .idcard .foil { opacity: .9; }

/* The guilloche and the motif sit at different depths, so they slide by
   different amounts. Two planes moving at different rates is what the eye reads
   as depth — it is the whole trick, and it costs two transforms. */
.hero-art .idcard .geo {
  transform: translate3d(calc(var(--mx) * -1.1%), calc(var(--my) * -1.1%), 0);
  transition: transform .3s ease;
}
/* The motif is CENTRED BY ITS TRANSFORM (translateY(-50%)), so the parallax
   has to carry that -50% with it. Overwriting transform outright drops the
   centring and the watermark jumps half its own height down the card. */
.hero-art .idcard .motif {
  transform:
    translateY(-50%)
    translate3d(calc(var(--mx) * 2.4%), calc(var(--my) * 2%), 0);
  transition: transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-art .idcard .foil,
  .hero-art .idcard .geo { transform: none !important; }
  /* not `none` - that would un-centre it. */
  .hero-art .idcard .motif { transform: translateY(-50%) !important; }
}

/* ── 20. The header cannot be allowed to wrap ───────────────────────────────
   Found by rendering the page with the webfonts blocked, which is what a slow
   connection shows for its first moments. The fallback serif is wider than
   Cormorant, and at that width the brand broke onto two lines and the Sign in
   button became "Sign" / "in" - a header that rearranges itself while you are
   looking at it.

   Self-hosting removes most of that window. These make the outcome impossible
   rather than merely unlikely, which matters because the fallback also renders
   for anyone whose browser blocks webfonts outright. */

.brand-mark,
.pub-head-actions .btn,
.pub-head-actions .drop-trigger { white-space: nowrap; }

.brand-mark .wordmark,
.brand-mark span { white-space: nowrap; }

/* NOT `flex-wrap: nowrap` on the bar itself. That was tried and it was much
   worse: at 320px the brand, the controls and the burger cannot fit on one
   row, so refusing to wrap forced the whole PAGE to 547px and every screen
   narrower than that scrolled sideways. Measured, and reverted.

   The bar is allowed to wrap. What must not wrap is the TEXT inside a
   control, which is what made "Sign in" break into two lines - and that is
   the white-space rule above, which costs nothing. */
.pub-head-actions { flex-wrap: wrap; justify-content: flex-end; }

/* ...except once the header has collapsed. Then this row is not a toolbar
   hugging the right edge of a wide bar — it is a list of controls inside an
   opened menu, and a list is read from the left. Right-aligned, the language
   pill and the theme toggle floated into the middle of the panel with the
   toggle clipped against the edge.

   The override lives HERE rather than in marketing.css because the rule it
   corrects is the line above: this file loads last, so a media query over
   there would lose to it however it were written, and the two rules being
   three lines apart is what stops the next person re-adding one of them. */
@media (max-width: 940px) {
  .pub-head-actions { justify-content: flex-start; }
}

/* ── 21. Small phones ───────────────────────────────────────────────────────
   The grid tracks themselves are capped at their container in the files that
   define them - `minmax(min(300px, 100%), 1fr)` rather than a duplicate rule
   here. A second rule that exists only to correct the first leaves both in
   the codebase, and neither the reader nor a lint can tell which one wins. */

@media (max-width: 380px) {
  /* The wrap padding is 20px a side. Below this width that is a tenth of the
     screen spent on margin. */
  .wrap { padding-left: 16px; padding-right: 16px; }
}