/* Phase 1.4B Stage 1: representative animated systems for key page types. */
:root {
  --p14b-grid: rgba(226, 204, 138, .11);
  --p14b-line: rgba(226, 204, 138, .38);
  --p14b-panel: rgba(255, 255, 255, .08);
  --p14b-panel-strong: rgba(255, 255, 255, .14);
  --p14b-ease: cubic-bezier(.2, .8, .2, 1);
}

.p14b-command {
  min-height: 620px;
}

.p14b-command .governance-dashboard,
.p14b-resource .governance-dashboard {
  border-color: rgba(226, 204, 138, .36);
}

.p14b-resource .command-grid {
  align-items: center;
}

.p14b-resource .command-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.p14b-resource .command-copy h1 {
  max-width: 760px;
  font-size: clamp(2.35rem, 4.8vw, 4.35rem);
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: normal;
}

.p14b-resource .command-copy .hero-sub {
  max-width: 700px;
  line-height: 1.62;
}

.p14b-resource .governance-dashboard {
  z-index: 1;
  min-width: 0;
}

.p14b-resource .dashboard-top,
.p14b-resource .dashboard-bottom {
  position: relative;
  z-index: 2;
}

#featured-in-the-press > .container {
  position: relative;
  z-index: 1;
}

#featured-in-the-press .section-header h2 {
  line-height: 1.08;
  text-wrap: balance;
}

#featured-in-the-press .command-card {
  display: block;
  max-width: 920px;
  margin: 0 auto;
  text-decoration: none;
}

.p14b-module-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  margin: 1rem 0 .85rem;
}

.p14b-module {
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  padding: .72rem .65rem;
  color: rgba(255,255,255,.76);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow: hidden;
}

.p14b-module::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(226,204,138,.24), transparent);
  transform: translateX(-120%);
  animation: p14bSweep 5.4s var(--p14b-ease) infinite;
}

.p14b-module:nth-child(2)::before { animation-delay: .8s; }
.p14b-module:nth-child(3)::before { animation-delay: 1.6s; }
.p14b-module:nth-child(4)::before { animation-delay: 2.4s; }

.p14b-signal-ring {
  position: absolute;
  inset: 19% 18%;
  border: 1px solid rgba(226,204,138,.16);
  border-radius: 50%;
  pointer-events: none;
  animation: p14bRing 5.2s ease-in-out infinite;
}

.p14b-signal-ring::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px dashed rgba(226,204,138,.18);
  border-radius: 50%;
  animation: p14bSpin 24s linear infinite;
}

.p14b-command .gov-node {
  animation-name: commandFloat, p14bNodeSignal;
  animation-duration: 7s, 9s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.p14b-risk-hero {
  padding: 5rem 0 4rem;
}

.p14b-press-hero {
  padding: 5rem 0 4rem;
  background:
    linear-gradient(120deg, rgba(7,16,32,.98), rgba(11,22,40,.92)),
    radial-gradient(circle at 76% 24%, rgba(226,204,138,.18), transparent 34%),
    linear-gradient(rgba(226,204,138,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,204,138,.05) 1px, transparent 1px);
  background-size: auto, auto, 54px 54px, 54px 54px;
  overflow: hidden;
}

.p14b-press-hero::after {
  content: "";
  position: absolute;
  inset: auto 8% 12% auto;
  width: min(44vw, 520px);
  height: min(44vw, 520px);
  border: 1px solid rgba(226,204,138,.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,204,138,.12), transparent 64%);
  pointer-events: none;
  animation: p14bRing 7s ease-in-out infinite;
}

.p14b-risk-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(390px, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.p14b-risk-matrix {
  position: relative;
  min-height: 420px;
  border: 1px solid rgba(226,204,138,.28);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    linear-gradient(rgba(226,204,138,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,204,138,.055) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  box-shadow: 0 30px 86px rgba(0,0,0,.3);
  padding: 1rem;
  overflow: hidden;
  transform: perspective(1100px) rotateY(-5deg) rotateX(2deg);
}

.p14b-risk-matrix::before {
  content: "";
  position: absolute;
  inset: -20% -30%;
  background: linear-gradient(100deg, transparent 30%, rgba(226,204,138,.2), transparent 58%);
  transform: translateX(-55%);
  animation: p14bMatrixScan 6s var(--p14b-ease) infinite;
}

.p14b-risk-axis {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.55);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}

.p14b-risk-cells {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

.p14b-risk-cell {
  min-height: 150px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  background: rgba(7,16,32,.42);
  padding: .95rem;
  box-shadow: 0 18px 45px rgba(0,0,0,.2);
  transition: transform .32s var(--p14b-ease), border-color .32s var(--p14b-ease), box-shadow .32s var(--p14b-ease);
}

.p14b-risk-cell:hover {
  transform: translateY(-5px);
  border-color: rgba(226,204,138,.5);
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}

.p14b-risk-cell strong {
  display: block;
  color: var(--white);
  font-size: .92rem;
  line-height: 1.2;
}

.p14b-risk-cell span {
  display: block;
  color: rgba(255,255,255,.6);
  font-size: .72rem;
  margin-top: .4rem;
}

.p14b-risk-level {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(226,204,138,.14);
  color: var(--gold-light);
  border: 1px solid rgba(226,204,138,.26);
  margin-bottom: .75rem;
  font-weight: 900;
}

.p14b-risk-cell.high,
.p14b-risk-cell.prohibited {
  background: linear-gradient(180deg, rgba(197,164,75,.15), rgba(7,16,32,.42));
}

.p14b-risk-cell.prohibited {
  border-color: rgba(226,204,138,.28);
}

.p14b-risk-foot {
  position: relative;
  z-index: 1;
  margin-top: .85rem;
  border: 1px solid rgba(226,204,138,.18);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  color: rgba(255,255,255,.7);
  font-size: .78rem;
  background: rgba(255,255,255,.055);
}

.p14b-system-section {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.p14b-system-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(226,204,138,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,204,138,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}

.p14b-system-section .container,
.p14b-inline-system {
  position: relative;
  z-index: 1;
}

.p14b-system-section h2,
.p14b-system-section h3 {
  color: var(--white);
}

.p14b-system-section p {
  color: rgba(255,255,255,.72);
}

.p14b-commercial-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.p14b-commercial-copy .eyebrow,
.p14b-inline-kicker {
  display: inline-block;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.p14b-commercial-copy h2 {
  margin-bottom: .9rem;
  line-height: 1.08;
  text-wrap: balance;
}

.p14b-flow-board {
  position: relative;
  border: 1px solid rgba(226,204,138,.28);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    radial-gradient(circle at 24% 18%, rgba(226,204,138,.12), transparent 34%);
  box-shadow: 0 30px 86px rgba(0,0,0,.32);
  padding: 1rem;
  overflow: hidden;
}

.p14b-flow-board::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(226,204,138,.16), rgba(226,204,138,.78), rgba(226,204,138,.16));
  background-size: 240% 100%;
  animation: p14bFlowSignal 5s var(--p14b-ease) infinite;
}

.p14b-flow-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .7rem;
}

.p14b-flow-step {
  min-height: 128px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-md);
  background: rgba(7,16,32,.48);
  padding: .85rem;
  box-shadow: 0 18px 45px rgba(0,0,0,.2);
  animation: p14bNodeSignal 8s ease-in-out infinite;
}

.p14b-flow-step:nth-child(2) { animation-delay: .6s; }
.p14b-flow-step:nth-child(3) { animation-delay: 1.2s; }
.p14b-flow-step:nth-child(4) { animation-delay: 1.8s; }
.p14b-flow-step:nth-child(5) { animation-delay: 2.4s; }

.p14b-flow-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(226,204,138,.16);
  color: var(--gold-light);
  border: 1px solid rgba(226,204,138,.28);
  font-weight: 900;
  margin-bottom: .7rem;
}

.p14b-flow-step strong {
  display: block;
  color: var(--white);
  font-size: .86rem;
  line-height: 1.2;
}

.p14b-flow-step span {
  display: block;
  color: rgba(255,255,255,.58);
  font-size: .68rem;
  line-height: 1.45;
  margin-top: .35rem;
}

.p14b-bridge-board .p14b-flow-track {
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: stretch;
}

.p14b-bridge-board::before {
  top: 52%;
}

.p14b-bridge-node {
  min-height: 170px;
}

.p14b-bridge-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(226,204,138,.14);
  border: 1px solid rgba(226,204,138,.28);
  color: var(--gold-light);
  margin-bottom: .8rem;
  font-weight: 900;
}

.p14b-inline-system {
  margin: 2rem 0 3rem;
  max-width: 940px;
}

.p14b-trust-flow {
  border: 1px solid var(--border-gold);
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55)),
    linear-gradient(rgba(197,164,75,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,164,75,.055) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  box-shadow: 0 24px 62px rgba(11,22,40,.1);
  overflow: hidden;
}

.p14b-trust-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}

.p14b-trust-track::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(197,164,75,.16), rgba(197,164,75,.78), rgba(197,164,75,.16));
  background-size: 240% 100%;
  animation: p14bFlowSignal 5.4s var(--p14b-ease) infinite;
}

.p14b-trust-step {
  position: relative;
  z-index: 1;
  min-height: 126px;
  border: 1px solid var(--border-gold);
  background: var(--cream);
  padding: 1rem;
  box-shadow: 0 14px 34px rgba(11,22,40,.07);
  animation: p14bTrustPulse 8s ease-in-out infinite;
}

.p14b-trust-step:nth-child(2) { animation-delay: .7s; }
.p14b-trust-step:nth-child(3) { animation-delay: 1.4s; }
.p14b-trust-step:nth-child(4) { animation-delay: 2.1s; }

.p14b-trust-step strong {
  display: block;
  color: var(--navy);
  font-size: .86rem;
  line-height: 1.25;
}

.p14b-trust-step span {
  display: block;
  color: var(--text-muted, var(--muted));
  font-size: .72rem;
  line-height: 1.5;
  margin-top: .4rem;
}

.p14b-intelligence-hub {
  position: relative;
  min-height: 360px;
  margin: 2rem 0 0;
  border: 1px solid rgba(226,204,138,.24);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 48%, rgba(226,204,138,.13), transparent 28%),
    linear-gradient(rgba(197,164,75,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,164,75,.055) 1px, transparent 1px),
    var(--navy);
  background-size: auto, 48px 48px, 48px 48px, auto;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(11,22,40,.18);
}

.p14b-intelligence-hub::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px dashed rgba(226,204,138,.22);
  border-radius: 50%;
  animation: p14bSpin 36s linear infinite;
}

.p14b-hub-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  min-height: 112px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(226,204,138,.5);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(197,164,75,.2), rgba(255,255,255,.07));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  color: var(--white);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  animation: p14bCorePulse 4.6s ease-in-out infinite;
}

.p14b-hub-core strong {
  display: block;
  font-size: .86rem;
  line-height: 1.2;
}

.p14b-hub-core span {
  display: block;
  margin-top: .35rem;
  color: rgba(255,255,255,.62);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.p14b-hub-node {
  position: absolute;
  width: 124px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.075);
  color: rgba(255,255,255,.82);
  padding: .62rem .68rem;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  animation: p14bNodeSignal 7s ease-in-out infinite;
}

.p14b-hub-node.n1 { left: 9%; top: 15%; }
.p14b-hub-node.n2 { right: 10%; top: 14%; animation-delay: .7s; }
.p14b-hub-node.n3 { left: 6%; bottom: 18%; animation-delay: 1.4s; }
.p14b-hub-node.n4 { right: 8%; bottom: 18%; animation-delay: 2.1s; }
.p14b-hub-node.n5 { left: 39%; top: 7%; animation-delay: 2.8s; }
.p14b-hub-node.n6 { left: 39%; bottom: 7%; animation-delay: 3.5s; }

.resource-card .reviewed-pill {
  position: relative;
  overflow: hidden;
}

.resource-card .reviewed-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-120%);
  animation: p14bBadgeSweep 7s var(--p14b-ease) infinite;
}

/* Phase 1.4B Stage 3: About authority timeline and assessment intake pathway. */
.p14b-about-authority {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 3.5rem;
  background:
    linear-gradient(180deg, rgba(250,248,243,.98), rgba(250,248,243,.94)),
    linear-gradient(rgba(197,164,75,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,164,75,.05) 1px, transparent 1px);
  background-size: auto, 58px 58px, 58px 58px;
  overflow: hidden;
}

.p14b-about-authority::before {
  content: "";
  position: absolute;
  inset: 10% 6% auto auto;
  width: min(34vw, 420px);
  height: min(34vw, 420px);
  border: 1px solid rgba(197,164,75,.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,164,75,.1), transparent 66%);
  animation: p14bRing 7.5s ease-in-out infinite;
  pointer-events: none;
}

.p14b-about-shell {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.p14b-about-copy h2,
.p14b-assessment-copy h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.p14b-about-copy p,
.p14b-assessment-copy p {
  color: var(--text-muted, var(--muted));
  line-height: 1.8;
}

.p14b-authority-board {
  position: relative;
  display: grid;
  gap: .75rem;
  border: 1px solid rgba(197,164,75,.26);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.56)),
    radial-gradient(circle at 18% 12%, rgba(197,164,75,.12), transparent 32%);
  box-shadow: 0 28px 76px rgba(11,22,40,.12);
  padding: 1rem;
  overflow: hidden;
}

.p14b-authority-board::before {
  content: "";
  position: absolute;
  top: 9%;
  bottom: 9%;
  left: 2rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(197,164,75,.16), rgba(197,164,75,.8), rgba(197,164,75,.16));
  background-size: 100% 240%;
  animation: p14bFlowSignal 5.6s var(--p14b-ease) infinite;
}

.p14b-authority-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: .9rem;
  align-items: center;
  min-height: 92px;
  border: 1px solid rgba(197,164,75,.2);
  border-radius: var(--radius-sm);
  background: rgba(250,248,243,.78);
  padding: .85rem 1rem;
  box-shadow: 0 14px 34px rgba(11,22,40,.055);
  animation: p14bAuthorityPulse 9s ease-in-out infinite;
}

.p14b-authority-step:nth-child(2) { animation-delay: .6s; }
.p14b-authority-step:nth-child(3) { animation-delay: 1.2s; }
.p14b-authority-step:nth-child(4) { animation-delay: 1.8s; }
.p14b-authority-step:nth-child(5) { animation-delay: 2.4s; }

.p14b-authority-node,
.p14b-assessment-node {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(197,164,75,.14);
  border: 1px solid rgba(197,164,75,.32);
  color: var(--gold);
  font-weight: 900;
  font-size: .76rem;
  letter-spacing: .04em;
}

.p14b-authority-step strong,
.p14b-assessment-step strong {
  display: block;
  color: var(--navy);
  font-size: .92rem;
  line-height: 1.25;
}

.p14b-authority-step small,
.p14b-assessment-step small {
  display: block;
  color: var(--text-muted, var(--muted));
  font-size: .74rem;
  line-height: 1.5;
  margin-top: .25rem;
}

.p14b-assessment-pathway {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:
    linear-gradient(135deg, rgba(7,16,32,.98), rgba(11,22,40,.94)),
    linear-gradient(rgba(226,204,138,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,204,138,.055) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  overflow: hidden;
}

.p14b-assessment-pathway::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 14%;
  width: min(38vw, 460px);
  height: min(38vw, 460px);
  border: 1px solid rgba(226,204,138,.16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226,204,138,.12), transparent 64%);
  animation: p14bRing 6.8s ease-in-out infinite;
  pointer-events: none;
}

.p14b-assessment-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(520px, 1.26fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.p14b-assessment-copy h2,
.p14b-assessment-copy p {
  color: var(--white);
}

.p14b-assessment-copy p {
  color: rgba(255,255,255,.68);
}

.p14b-assessment-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .65rem;
  border: 1px solid rgba(226,204,138,.28);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    radial-gradient(circle at 18% 14%, rgba(226,204,138,.14), transparent 34%);
  box-shadow: 0 30px 86px rgba(0,0,0,.28);
  padding: 1rem;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-4deg) rotateX(1deg);
}

.p14b-assessment-board::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(226,204,138,.14), rgba(226,204,138,.8), rgba(226,204,138,.14));
  background-size: 240% 100%;
  animation: p14bFlowSignal 5.2s var(--p14b-ease) infinite;
}

.p14b-assessment-step {
  position: relative;
  z-index: 1;
  min-height: 150px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-md);
  background: rgba(7,16,32,.5);
  padding: .85rem;
  box-shadow: 0 18px 45px rgba(0,0,0,.2);
  animation: p14bNodeSignal 8s ease-in-out infinite;
}

.p14b-assessment-step:nth-child(2) { animation-delay: .55s; }
.p14b-assessment-step:nth-child(3) { animation-delay: 1.1s; }
.p14b-assessment-step:nth-child(4) { animation-delay: 1.65s; }
.p14b-assessment-step:nth-child(5) { animation-delay: 2.2s; }

.p14b-assessment-step strong {
  color: var(--white);
  margin-top: .75rem;
}

.p14b-assessment-step small {
  color: rgba(255,255,255,.6);
}

.p14b-assessment-trust {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.p14b-assessment-trust span {
  border: 1px solid rgba(226,204,138,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.76);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .55rem .85rem;
}

@keyframes p14bSweep {
  0%, 35% { transform: translateX(-125%); }
  70%, 100% { transform: translateX(125%); }
}

@keyframes p14bRing {
  0%, 100% { opacity: .35; transform: scale(.92); }
  50% { opacity: .9; transform: scale(1.04); }
}

@keyframes p14bSpin {
  to { transform: rotate(360deg); }
}

@keyframes p14bNodeSignal {
  0%, 100% { border-color: rgba(255,255,255,.12); box-shadow: 0 18px 42px rgba(0,0,0,.18); }
  50% { border-color: rgba(226,204,138,.48); box-shadow: 0 24px 62px rgba(197,164,75,.17); }
}

@keyframes p14bMatrixScan {
  0%, 18% { transform: translateX(-58%); opacity: 0; }
  42%, 72% { opacity: 1; }
  100% { transform: translateX(58%); opacity: 0; }
}

@keyframes p14bCorePulse {
  0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 0 rgba(226,204,138,.22); }
  50% { box-shadow: 0 28px 76px rgba(0,0,0,.32), 0 0 0 12px rgba(226,204,138,0); }
}

@keyframes p14bBadgeSweep {
  0%, 55% { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}

@keyframes p14bFlowSignal {
  0%, 100% { background-position: 0% 50%; opacity: .48; }
  50% { background-position: 100% 50%; opacity: 1; }
}

@keyframes p14bTrustPulse {
  0%, 100% { border-color: rgba(197,164,75,.22); transform: translateY(0); }
  50% { border-color: rgba(197,164,75,.5); transform: translateY(-3px); }
}

@keyframes p14bAuthorityPulse {
  0%, 100% { border-color: rgba(197,164,75,.2); transform: translateY(0); }
  50% { border-color: rgba(197,164,75,.48); transform: translateY(-2px); }
}

@media (max-width: 1100px) {
  .p14b-risk-grid { grid-template-columns: 1fr; }
  .p14b-risk-matrix { transform: none; }
  .p14b-commercial-grid { grid-template-columns: 1fr; }
  .p14b-about-shell,
  .p14b-assessment-grid { grid-template-columns: 1fr; }
  .p14b-assessment-board { transform: none; }
  .p14b-flow-track,
  .p14b-bridge-board .p14b-flow-track,
  .p14b-trust-track { grid-template-columns: 1fr; }
  .p14b-flow-board::before,
  .p14b-trust-track::before {
    top: 8%;
    bottom: 8%;
    left: 50%;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(226,204,138,.16), rgba(226,204,138,.78), rgba(226,204,138,.16));
    background-size: 100% 240%;
  }
  .p14b-resource .command-copy h1 {
    max-width: 900px;
  }
}

@media (max-width: 640px) {
  .p14b-command { min-height: auto; }
  .p14b-resource {
    min-height: auto !important;
    padding-bottom: 3rem;
  }
  .p14b-resource .command-copy h1 {
    font-size: clamp(2.1rem, 11vw, 3rem);
    line-height: 1.08;
  }
  .p14b-resource .command-copy .hero-sub {
    font-size: 1rem;
    line-height: 1.58;
  }
  .p14b-module-strip { grid-template-columns: repeat(2, 1fr); }
  .p14b-signal-ring { display: none; }
  .p14b-risk-matrix { min-height: auto; padding: .85rem; }
  .p14b-risk-cells { grid-template-columns: 1fr; }
  .p14b-risk-cell { min-height: auto; }
  .p14b-system-section { padding: 3.5rem 0; }
  .p14b-about-authority { padding: 3rem 1.5rem; }
  .p14b-about-authority::before,
  .p14b-assessment-pathway::after { display: none; }
  .p14b-authority-board::before {
    left: 1.7rem;
  }
  .p14b-assessment-board { grid-template-columns: 1fr; }
  .p14b-assessment-board::before {
    top: 7%;
    bottom: 7%;
    left: 2.35rem;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(226,204,138,.16), rgba(226,204,138,.78), rgba(226,204,138,.16));
    background-size: 100% 240%;
  }
  .p14b-flow-step,
  .p14b-bridge-node,
  .p14b-trust-step,
  .p14b-assessment-step { min-height: auto; }
  .p14b-inline-system { margin: 1.5rem 0 2.25rem; }
  .p14b-intelligence-hub {
    min-height: auto;
    display: grid;
    gap: .7rem;
    padding: 1rem;
  }
  .p14b-intelligence-hub::before { display: none; }
  .p14b-hub-core,
  .p14b-hub-node {
    position: static;
    width: auto;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p14b-module::before,
  .p14b-signal-ring,
  .p14b-signal-ring::after,
  .p14b-command .gov-node,
  .p14b-risk-matrix::before,
  .p14b-press-hero::after,
  .p14b-flow-board::before,
  .p14b-flow-step,
  .p14b-trust-track::before,
  .p14b-trust-step,
  .p14b-about-authority::before,
  .p14b-authority-board::before,
  .p14b-authority-step,
  .p14b-assessment-pathway::after,
  .p14b-assessment-board::before,
  .p14b-assessment-step,
  .p14b-intelligence-hub::before,
  .p14b-hub-core,
  .p14b-hub-node,
  .resource-card .reviewed-pill::after {
    animation: none !important;
  }
  .p14b-risk-matrix,
  .p14b-risk-cell:hover,
  .p14b-trust-step,
  .p14b-authority-step,
  .p14b-assessment-board {
    transform: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   LEXARA ADVISORY — Thematic animations 2026
   Per-page cinematic motion design. Each service has its own
   visual language. Respects prefers-reduced-motion via shared.css.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   SHARED NEW KEYFRAMES
   ───────────────────────────────────────────── */

@keyframes lx-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes lx-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes lx-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197,164,75,0); }
  50%       { box-shadow: 0 0 28px 6px rgba(197,164,75,.18); }
}

@keyframes lx-scan-h {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes lx-scan-v {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

@keyframes lx-draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes lx-badge-pop {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  70%  { transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes lx-tick {
  0%   { stroke-dashoffset: 40; opacity: 0; }
  40%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes lx-progress-bar {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes lx-orbit {
  from { transform: rotate(0deg) translateX(44px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(44px) rotate(-360deg); }
}

@keyframes lx-data-flow {
  0%   { opacity: 0; transform: translateX(-10px); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(10px); }
}

@keyframes lx-node-ping {
  0%   { transform: scale(1); opacity: .9; }
  60%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes lx-stamp {
  0%   { opacity: 0; transform: scale(1.6) rotate(-18deg); }
  55%  { transform: scale(0.94) rotate(3deg); }
  75%  { transform: scale(1.03) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes lx-typewriter {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

@keyframes lx-blink-cursor {
  0%, 100% { border-right-color: var(--gold); }
  50%       { border-right-color: transparent; }
}

@keyframes lx-card-stagger {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lx-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─────────────────────────────────────────────
   GLOBAL UTILITY — shimmer text
   Usage: <span class="lx-shimmer-text">word</span>
   ───────────────────────────────────────────── */
.lx-shimmer-text {
  background: linear-gradient(
    105deg,
    var(--gold-light) 0%,
    var(--gold) 30%,
    var(--gold-light) 50%,
    var(--gold) 70%,
    var(--gold-light) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: lx-shimmer 4s linear infinite;
}

/* ─────────────────────────────────────────────
   HOMEPAGE — Governance command center
   Animated node-and-connection grid
   ───────────────────────────────────────────── */
.lx-home-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Pulsing connection nodes */
.lx-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .5;
}
.lx-node::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: lx-node-ping 3s var(--ease-out) infinite;
}

.lx-node:nth-child(1)  { top: 18%; left: 12%; animation: lx-node-ping 3.2s ease infinite; }
.lx-node:nth-child(2)  { top: 42%; left: 28%; animation: lx-node-ping 4s ease infinite .8s; }
.lx-node:nth-child(3)  { top: 72%; left: 18%; animation: lx-node-ping 2.8s ease infinite 1.4s; }
.lx-node:nth-child(4)  { top: 28%; right: 22%; animation: lx-node-ping 3.6s ease infinite .4s; }
.lx-node:nth-child(5)  { top: 62%; right: 14%; animation: lx-node-ping 3s ease infinite 2s; }

/* Horizontal scan line on hero */
.lx-hero-scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,204,138,.6), transparent);
  animation: lx-scan-v 8s linear infinite;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   EU AI ACT AUDIT PAGE — Document flow
   Animated checklist / compliance pipeline
   ───────────────────────────────────────────── */
.lx-audit-pipeline {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: relative;
}

.lx-audit-pipeline::before {
  content: "";
  position: absolute;
  left: 17px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(197,164,75,.1) 100%);
}

.lx-audit-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem .85rem .5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(226,204,138,.12);
  border-radius: 6px;
  opacity: 0;
  transform: translateX(-16px);
  animation: lx-card-stagger .5s var(--ease-expo) forwards;
}

.lx-audit-step:nth-child(1) { animation-delay: .1s; }
.lx-audit-step:nth-child(2) { animation-delay: .25s; }
.lx-audit-step:nth-child(3) { animation-delay: .4s; }
.lx-audit-step:nth-child(4) { animation-delay: .55s; }
.lx-audit-step:nth-child(5) { animation-delay: .7s; }

.lx-audit-step-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--gold);
  font-size: .75rem;
  font-weight: 700;
  background: rgba(197,164,75,.1);
  animation: lx-glow-pulse 3s ease-in-out infinite;
}

.lx-audit-step:nth-child(2) .lx-audit-step-icon { animation-delay: .6s; }
.lx-audit-step:nth-child(3) .lx-audit-step-icon { animation-delay: 1.2s; }
.lx-audit-step:nth-child(4) .lx-audit-step-icon { animation-delay: 1.8s; }
.lx-audit-step:nth-child(5) .lx-audit-step-icon { animation-delay: 2.4s; }

.lx-audit-step-label {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  letter-spacing: .04em;
}

/* Scan beam over audit matrix */
.p14b-system-section .lx-scan-beam {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(226,204,138,.5) 50%, transparent 100%);
  pointer-events: none;
  animation: lx-scan-v 5s linear infinite;
}

/* ─────────────────────────────────────────────
   AI RISK ASSESSMENT — Risk matrix quadrant
   Quadrants animate in staggered with color coding
   ───────────────────────────────────────────── */
.lx-risk-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.lx-risk-quad-cell {
  display: flex;
  align-items: flex-end;
  padding: .75rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  opacity: 0;
  animation: lx-card-stagger .45s var(--ease-spring) forwards;
  position: relative;
  overflow: hidden;
}

.lx-risk-quad-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}

.lx-risk-quad-cell:nth-child(1) { background: rgba(192,57,43,.55);  animation-delay: .1s; }
.lx-risk-quad-cell:nth-child(2) { background: rgba(214,158,46,.45);  animation-delay: .25s; }
.lx-risk-quad-cell:nth-child(3) { background: rgba(214,158,46,.35);  animation-delay: .4s; }
.lx-risk-quad-cell:nth-child(4) { background: rgba(47,133,90,.45);   animation-delay: .55s; }

/* ─────────────────────────────────────────────
   CROSS-BORDER — Network connection bridge
   Animated SVG-like connection lines via CSS
   ───────────────────────────────────────────── */
.lx-bridge-visual {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lx-bridge-node {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  border: 1.5px solid rgba(226,204,138,.45);
  display: grid;
  place-items: center;
  font-size: .6rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: lx-float 5s ease-in-out infinite, lx-glow-pulse 4s ease-in-out infinite;
}

.lx-bridge-node.us   { left: 8%; top: 50%; transform: translateY(-50%); animation-delay: 0s, .5s; }
.lx-bridge-node.eu   { right: 8%; top: 50%; transform: translateY(-50%); animation-delay: .8s, 1.2s; }
.lx-bridge-node.gdpr { top: 12%; left: 50%; transform: translateX(-50%); animation-delay: .4s, 1.8s; }
.lx-bridge-node.nist { bottom: 12%; left: 50%; transform: translateX(-50%); animation-delay: 1.2s, .2s; }

/* Animated data packets traveling between nodes */
.lx-bridge-packet {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(197,164,75,.8);
  animation: lx-data-flow 2.4s ease-in-out infinite;
}

.lx-bridge-packet:nth-child(1) { top: 50%; left: 50%; transform: translateX(-120px); animation-delay: 0s; }
.lx-bridge-packet:nth-child(2) { top: 50%; left: 50%; transform: translateX(120px); animation-delay: .8s; }
.lx-bridge-packet:nth-child(3) { top: 30%; left: 50%; animation-delay: 1.6s; }

/* ─────────────────────────────────────────────
   EU REPRESENTATION — Authority stamp effect
   Circular seal with rotation and pop
   ───────────────────────────────────────────── */
.lx-seal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.lx-seal {
  position: relative;
  width: 160px; height: 160px;
  display: grid;
  place-items: center;
}

.lx-seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: .6;
  animation: lx-glow-pulse 4s ease-in-out infinite;
}

.lx-seal-ring-inner {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px dashed rgba(226,204,138,.4);
  animation: p14bSpin 20s linear infinite;
}

.lx-seal-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.lx-seal-text {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}

.lx-seal-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cream);
  display: block;
  margin: .2rem 0;
}

/* Stamp entry animation for the seal wrapper */
.lx-seal-wrapper.animate-stamp .lx-seal {
  animation: lx-stamp .8s var(--ease-spring) both;
}

/* ─────────────────────────────────────────────
   BLOG / RESOURCE CENTER — Reading progress bar
   Fixed top bar that fills as user scrolls
   ───────────────────────────────────────────── */
.lx-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .1s linear;
  pointer-events: none;
  will-change: transform;
}

/* Blog post: animated inline callout */
.lx-callout {
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--gold);
  padding: 1.25rem 1.5rem;
  background: rgba(197,164,75,.06);
  margin: 1.5rem 0;
}

.lx-callout::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  animation: lx-shimmer 3s linear infinite;
  background-size: 200% auto;
}

/* Blog cards hover — lift with shimmer */
.lx-blog-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-sm) var(--ease-spring), box-shadow var(--dur-sm) var(--ease-out);
}
.lx-blog-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(226,204,138,.08) 50%, transparent 60%);
  background-size: 200% auto;
  opacity: 0;
  transition: opacity var(--dur-sm) var(--ease-out);
}
.lx-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(11,22,40,.18), 0 0 0 1px rgba(197,164,75,.2);
}
.lx-blog-card:hover::after {
  opacity: 1;
  animation: lx-shimmer 1.2s linear infinite;
}

/* ─────────────────────────────────────────────
   ABOUT PAGE — Credential badge entry
   ───────────────────────────────────────────── */
.lx-credential-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid rgba(197,164,75,.3);
  background: linear-gradient(135deg, rgba(197,164,75,.08), transparent);
  font-size: .72rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  animation: lx-badge-pop .6s var(--ease-spring) forwards;
}

.lx-credential-badge:nth-child(1) { animation-delay: .2s; }
.lx-credential-badge:nth-child(2) { animation-delay: .4s; }
.lx-credential-badge:nth-child(3) { animation-delay: .6s; }

/* ─────────────────────────────────────────────
   TYPEWRITER EFFECT — for hero subtitles
   Usage: <span class="lx-typewriter">text</span>
   ───────────────────────────────────────────── */
.lx-typewriter {
  white-space: nowrap;
  border-right: 2px solid var(--gold);
  animation:
    lx-typewriter 1.8s steps(40) .5s forwards,
    lx-blink-cursor .75s step-end infinite;
}

/* ─────────────────────────────────────────────
   STAT COUNTERS — .lx-stat-block
   JS-driven number animation via shared.js
   ───────────────────────────────────────────── */
.lx-stat-block {
  text-align: center;
  padding: 1.5rem;
}

.lx-stat-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 600;
  color: var(--gold);
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lx-stat-label {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: .4rem;
  display: block;
}

.lx-stat-bar {
  height: 2px;
  background: rgba(226,204,138,.15);
  border-radius: 2px;
  margin-top: .75rem;
  overflow: hidden;
}

.lx-stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  width: 100%;
  transition: transform 1.2s var(--ease-expo) .3s;
}

.lx-stat-block.visible .lx-stat-bar-fill {
  transform: scaleX(1);
}

/* ─────────────────────────────────────────────
   GLOBAL — Premium link underline animation
   ───────────────────────────────────────────── */
.lx-link-anim {
  position: relative;
  display: inline-block;
  color: var(--gold);
  text-decoration: none;
}
.lx-link-anim::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--dur-sm) var(--ease-expo);
}
.lx-link-anim:hover::after {
  width: 100%;
}

/* ─────────────────────────────────────────────
   GRADIENT BORDER — animated gold border
   Usage: add .lx-gradient-border to any div
   ───────────────────────────────────────────── */
.lx-gradient-border {
  position: relative;
  background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box,
              linear-gradient(135deg, var(--gold), rgba(226,204,138,.3), var(--gold)) border-box;
  border: 1px solid transparent;
  background-size: auto, 300% 300%;
  animation: lx-gradient-shift 6s ease infinite;
}