/* =====================================================================
   FunnelX — Web Design Language (presentation styles)
   Builds on assets/colors_and_type.css tokens. Evolve direction.
   ===================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-app); color: var(--fg-1); }
::selection { background: var(--fx-light-blue-tint); color: var(--fx-navy); }

/* ---------- Layout shell ---------- */
.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
@media (max-width: 920px) { .shell { grid-template-columns: 1fr; } }

/* ---------- Side nav ---------- */
.dl-nav {
  position: sticky; top: 0; align-self: start; height: 100vh;
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid var(--border-1);
  background: var(--bg-surface);
  display: flex; flex-direction: column; gap: var(--space-6);
  overflow-y: auto;
}
@media (max-width: 920px) {
  .dl-nav { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: var(--space-4); padding: 10px var(--space-5); border-right: none; border-bottom: 1px solid var(--border-1); overflow-x: auto; overflow-y: hidden; z-index: 50; background: rgba(252,252,252,0.92); backdrop-filter: blur(12px); }
  .dl-nav .brand { flex: none; }
  .dl-nav .brand img { height: 22px; }
  .dl-nav nav { flex: 1; min-width: 0; }
  .dl-nav .navlist { flex-direction: row; gap: 4px; flex-wrap: nowrap; }
  .dl-nav .navlist a { white-space: nowrap; padding: 7px 10px; }
  .dl-nav .navlist a .n { display: none; }
  .dl-nav .foot { display: none; }
}
.dl-nav .brand { display: flex; align-items: center; gap: 10px; }
.dl-nav .brand img { height: 26px; }
.dl-nav .navlist { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; }
.dl-nav .navlist a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-md);
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  color: var(--fg-2); text-decoration: none;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.dl-nav .navlist a:hover { background: var(--bg-muted); color: var(--fg-1); }
.dl-nav .navlist a .n { font-variant-numeric: tabular-nums; color: var(--fg-3); font-size: var(--fs-12); width: 18px; }
.dl-nav .foot { margin-top: auto; font-size: var(--fs-12); color: var(--fg-3); line-height: var(--lh-normal); }

/* ---------- Content column ---------- */
.dl-main { min-width: 0; }
section.band { padding: var(--space-24) var(--space-16); border-bottom: 1px solid var(--border-1); }
@media (max-width: 720px) { section.band { padding: var(--space-16) var(--space-6); } }
.wrap { max-width: 1080px; margin: 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center;
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--fx-orange);
}
.eyebrow .dot { display: none; }
.sec-head { margin: var(--space-3) 0 var(--space-2); }
.sec-head h2 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
.sec-sub { color: var(--fg-2); font-size: var(--fs-18); max-width: 60ch; margin: 0 0 var(--space-10); line-height: var(--lh-relaxed); }

/* ---------- Cover ---------- */
.cover {
  position: relative; overflow: hidden;
  background: linear-gradient(118deg, #071437 0%, #0a1f5c 28%, #0331F3 70%, #3265FF 100%);
  color: var(--fg-on-dark);
  padding: var(--space-24) var(--space-16) var(--space-20);
  border-bottom: none;
}
.cover .wrap { position: relative; z-index: 2; }
.cover .kicker { color: var(--fx-orange); }
.cover .kicker .dot { background: #fff; }
.cover h1 { color: #fff; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.02em; margin: var(--space-5) 0 var(--space-5); max-width: 16ch; }
.cover p.lead { color: rgba(255,255,255,0.88); font-size: var(--fs-20); max-width: 56ch; }
.cover .meta { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
.cover .meta .m .k { font-size: var(--fs-12); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgba(255,255,255,0.65); }
.cover .meta .m .v { font-size: var(--fs-18); font-weight: var(--fw-medium); color: #fff; margin-top: 4px; }
.cover .funnelfield { position: absolute; inset: 0; z-index: 1; opacity: 0.5; }

/* ---------- Funnel motif ---------- */
.funnel-lines { display: block; }
.funnel-lines line, .funnel-lines path { stroke-linecap: round; }

/* ---------- Cards / panels ---------- */
.card {
  background: var(--bg-surface); border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.panel { background: var(--bg-subtle); border-radius: var(--radius-xl); padding: var(--space-8); }
.grid { display: grid; gap: var(--space-5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.label { font-size: var(--fs-12); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); font-weight: var(--fw-semibold); }
.mono { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-2); }

/* ---------- Color swatches ---------- */
.swatches { display: grid; gap: var(--space-4); }
.swatch { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-1); background: var(--bg-surface); }
.swatch .chip { height: 96px; }
.swatch .info { padding: 12px 14px; }
.swatch .info .nm { font-weight: var(--fw-semibold); font-size: var(--fs-14); }
.swatch .info .hx { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-2); margin-top: 2px; }
.swatch .info .tk { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-3); margin-top: 2px; }

.gradient-tile { height: 180px; border-radius: var(--radius-xl); border: 1px solid var(--border-1); position: relative; overflow: hidden; }
.gradient-tile .tag { position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: var(--fw-medium); font-size: var(--fs-14); text-shadow: 0 1px 8px rgba(7,20,55,0.4); }

/* ---------- Type specimen ---------- */
.specimen { display: flex; flex-direction: column; gap: var(--space-6); }
.specimen .row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-6); align-items: baseline; padding-bottom: var(--space-5); border-bottom: 1px dashed var(--border-1); }
@media (max-width: 640px){ .specimen .row { grid-template-columns: 1fr; gap: 6px; } }
.specimen .row .meta { color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-normal); }
.specimen .row .demo { color: var(--fg-1); }

.weights { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
@media (max-width: 640px){ .weights { grid-template-columns: repeat(2,1fr);} }
.weights .w .big { font-size: var(--fs-48); line-height: 1; }
.weights .w .lab { margin-top: 8px; }

/* ---------- Icon system ---------- */
.icon {
  display: inline-block; width: 24px; height: 24px;
  background-color: currentColor; flex: none;
  -webkit-mask-image: var(--src); mask-image: var(--src);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.icon-tile {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  background: var(--fx-light-blue); color: #fff;
  transition: background-color 240ms var(--ease-in-out), color 240ms var(--ease-in-out), transform 240ms var(--ease-in-out);
}
.icon-tile .icon { width: 28px; height: 28px; }
.icon-tile.lg { width: 72px; height: 72px; border-radius: var(--radius-xl); }
.icon-tile.lg .icon { width: 36px; height: 36px; }
.tile-blue, .tile-royal { background: var(--fx-light-blue); color: #fff; }
.tile-navy { background: var(--fx-navy); color: #fff; }
.tile-orange { background: var(--fx-orange); color: #fff; }
.tile-green { background: var(--fx-green); color: #fff; }
.tile-yellow { background: var(--fx-yellow); color: var(--fx-navy); }

/* ---------- Global icon rollover ---------- */
/* Every icon tile shifts color on hover of the tile or its interactive parent */
.tile-blue:hover, .tile-royal:hover,
.pillar:hover .tile-royal, .feature-card:hover .tile-royal, .ichip:hover .tile-royal,
.icontext:hover .tile-royal, .ind-tab:hover .tile-royal, a:hover .tile-royal, button:hover .tile-royal,
.pillar:hover .tile-blue, .feature-card:hover .tile-blue { background: var(--fx-blue); }
.tile-navy:hover, .pillar:hover .tile-navy, .feature-card:hover .tile-navy,
.icontext:hover .tile-navy, a:hover .tile-navy, button:hover .tile-navy { background: var(--fx-light-blue); }
.tile-orange:hover, .ichip:hover .tile-orange, a:hover .tile-orange, button:hover .tile-orange { background: var(--fx-yellow); color: var(--fx-navy); }
.tile-green:hover { background: #02a87d; }
.tile-yellow:hover { background: var(--fx-orange); color: #fff; }

.icon-gallery { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-4); }
@media (max-width: 720px){ .icon-gallery { grid-template-columns: repeat(4,1fr);} }
.icon-gallery .g { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.icon-gallery .g .nm { font-size: var(--fs-12); color: var(--fg-3); }

/* ---------- Component demos ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-semibold);
  padding: 12px 22px; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: all var(--duration-base) var(--ease-out); text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:hover, .btn:focus, .btn:focus-visible { text-decoration: none; }
.nav-links a:hover, .nav-signin:hover, .dl-nav .navlist a:hover { text-decoration: none; }
.btn:hover, .btn:focus, .btn:focus-visible { text-decoration: none; }
.btn-primary { background: var(--fx-orange); color: #fff; }
.btn-primary:hover { background: var(--fx-yellow); color: var(--fx-navy); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--fg-1); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--bg-muted); color: var(--fg-1); }
.btn-soft { background: var(--accent-soft); color: var(--fx-blue); }
.btn-soft:hover { background: var(--fx-light-blue-tint); }
.btn .icon { width: 18px; height: 18px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: 0.01em; }
.badge .ic { width: 8px; height: 8px; border-radius: 999px; }
.badge-live { background: var(--danger-soft); color: var(--fx-red); }
.badge-new { background: var(--accent-soft); color: var(--fx-blue); }
.badge-win { background: var(--success-soft); color: #028a67; }
.badge-warn { background: var(--warning-soft); color: #9a7d06; }

.feature-card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: var(--space-8); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-card h4 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-20); }
.feature-card p { margin: 0; color: var(--fg-2); font-size: var(--fs-16); }

.stat-tile { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: var(--space-6); }
.stat-tile .num { font-size: var(--fs-48); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1; color: var(--fx-light-blue); font-variant-numeric: tabular-nums; }
.stat-tile .num .ph { color: var(--border-2); }
.stat-tile .cap { margin-top: 10px; color: var(--fg-2); font-size: var(--fs-14); }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--fg-1); }
.field input, .field select {
  height: 44px; padding: 0 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-2); background: var(--bg-surface); color: var(--fg-1);
  font-family: var(--font-sans); font-size: var(--fs-16); outline: none;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.field input:focus, .field select:focus { border-color: var(--fx-light-blue); box-shadow: var(--focus-ring); }
.field .hint { font-size: var(--fs-12); color: var(--fg-3); }

/* ---------- Elevation / radii rows ---------- */
.shadow-row, .radii-row { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-6); }
@media (max-width: 720px){ .shadow-row, .radii-row { grid-template-columns: repeat(2,1fr);} }
.shadow-row .s { height: 110px; border-radius: var(--radius-lg); background: var(--bg-surface); display: grid; place-items: end center; padding-bottom: 12px; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-12); }
.radii-row .r { aspect-ratio: 1; background: var(--accent-soft); border: 1px solid var(--fx-light-blue-tint); display: grid; place-items: center; color: var(--fx-blue); font-family: var(--font-mono); font-size: var(--fs-12); }

/* ---------- Spacing scale ---------- */
.space-scale { display: flex; flex-direction: column; gap: 10px; }
.space-scale .sr { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: var(--space-4); }
.space-scale .sr .bar { height: 16px; background: var(--fx-light-blue); border-radius: 4px; }
.space-scale .sr .lab { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-2); }

/* ---------- Surfaces ---------- */
.surface-tile { border-radius: var(--radius-xl); padding: var(--space-8); min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; border: 1px solid var(--border-1); }
.surface-tile .nm { font-weight: var(--fw-semibold); }
.surface-tile .ds { font-size: var(--fs-14); opacity: 0.8; }
.s-clean { background: var(--bg-surface); color: var(--fg-1); }
.s-subtle { background: var(--bg-subtle); color: var(--fg-1); }
.s-inverse { background: var(--bg-inverse); color: #fff; border-color: transparent; }
.s-gradient { background: var(--gradient-deep-blue); color: #fff; border-color: transparent; }

/* ---------- Motion demo ---------- */
.motion-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
@media (max-width: 720px){ .motion-row { grid-template-columns: 1fr; } }
.motion-card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: var(--space-6); overflow: hidden; }
.motion-card .track { height: 8px; background: var(--bg-muted); border-radius: 999px; margin-top: var(--space-5); position: relative; }
.motion-card .track .dot { position: absolute; top: -4px; left: 0; width: 16px; height: 16px; border-radius: 999px; background: var(--fx-light-blue); animation: slide 2.4s infinite; }
.motion-card.ease-out .track .dot { animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
.motion-card.ease-io .track .dot { animation-timing-function: cubic-bezier(0.65,0,0.35,1); }
.motion-card.linear .track .dot { animation-timing-function: linear; }
@keyframes slide { 0%{left:0} 50%{left:calc(100% - 16px)} 100%{left:0} }
@media (prefers-reduced-motion: reduce){ .motion-card .track .dot { animation: none; } }

.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 640px){ .do-dont { grid-template-columns: 1fr; } }
.dd { border-radius: var(--radius-lg); padding: var(--space-5); font-size: var(--fs-14); line-height: var(--lh-relaxed); border: 1px solid var(--border-1); }
.dd .h { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); margin-bottom: 8px; }
.dd.do { background: var(--success-soft); } .dd.do .h { color: #028a67; }
.dd.dont { background: var(--danger-soft); } .dd.dont .h { color: var(--fx-red); }
.dd ul { margin: 0; padding-left: 18px; color: var(--fg-2); }

hr.soft { border: 0; border-top: 1px solid var(--border-1); margin: var(--space-10) 0; }
.note { font-size: var(--fs-14); color: var(--fg-3); }


/* ===== ADDED: interaction, icons-with-text, navigation ===== */

/* ===== Interaction / morph ===== */
.morph-tile { cursor: pointer; transition: transform 320ms var(--ease-in-out), border-radius 320ms var(--ease-in-out), box-shadow 320ms var(--ease-in-out); }
.morph-tile:hover { transform: translateY(-4px) rotate(-6deg); border-radius: 50%; box-shadow: var(--shadow-md); }
.btn-morph { position: relative; overflow: hidden; }
.btn-morph .bm-default, .btn-morph .bm-hover { display: inline-flex; align-items: center; gap: 8px; transition: transform 280ms var(--ease-in-out), opacity 220ms var(--ease-out); }
.btn-morph .bm-hover { position: absolute; inset: 0; justify-content: center; transform: translateY(110%); opacity: 0; }
.btn-morph:hover .bm-default { transform: translateY(-110%); opacity: 0; }
.btn-morph:hover .bm-hover { transform: translateY(0); opacity: 1; }
.lift-card { transition: transform 320ms var(--ease-in-out), box-shadow 320ms var(--ease-in-out); }
.lift-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ===== Icons with text ===== */
.icontext-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
@media (max-width: 860px){ .icontext-grid { grid-template-columns: 1fr; } }
.icontext { display: flex; gap: 16px; align-items: flex-start; }
.icontext .tx h4 { margin: 4px 0 6px; font-size: var(--fs-20); }
.icontext .tx p { margin: 0; color: var(--fg-2); font-size: var(--fs-16); line-height: var(--lh-relaxed); }
.icontext.stack { flex-direction: column; gap: 16px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ichip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border: 1px solid var(--border-1); border-radius: var(--radius-pill); background: var(--bg-surface); font-weight: var(--fw-medium); cursor: pointer; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.ichip .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.ichip .icon-tile .icon { width: 18px; height: 18px; }
.ichip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--fx-light-blue-tint); }

/* ===== Navigation ===== */
.navwrap { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-1); box-shadow: var(--shadow-sm); }
.navbar.dark { background: var(--fx-navy); }
.navbar.light { background: #fff; }
.navbar .nav-inner { display: flex; align-items: center; gap: 16px; padding: 0 22px; height: 74px; }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 26px; display: block; }
.nav-links { display: flex; gap: 2px; margin-left: 14px; }
.nav-links a { padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--fs-14); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: color 200ms var(--ease-out); }
.navbar.dark .nav-links a { color: rgba(255,255,255,0.82); }
.navbar.dark .nav-links a:hover { color: var(--fx-orange); }
.navbar.light .nav-links a { color: var(--fx-navy); }
.navbar.light .nav-links a:hover { color: var(--fx-orange); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-signin { font-size: var(--fs-14); font-weight: var(--fw-medium); text-decoration: none; transition: color 200ms var(--ease-out); }
.navbar.dark .nav-signin { color: rgba(255,255,255,0.82); }
.navbar.dark .nav-signin:hover { color: var(--fx-orange); }
.navbar.light .nav-signin { color: var(--fx-navy); }
.navbar.light .nav-signin:hover { color: var(--fx-orange); }
.nav-cta .btn { padding: 10px 18px; }

/* ===== Mobile nav ===== */
.phones { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.phone { width: 300px; border-radius: 34px; border: 11px solid #0b1020; background: #fff; overflow: hidden; box-shadow: var(--shadow-lg); }
.phone .m-bar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: var(--fx-navy); position: relative; z-index: 3; }
.phone .m-bar img { height: 21px; display: block; }
.m-burger { width: 26px; height: 18px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; background: none; border: 0; padding: 0; }
.m-burger span { height: 2.5px; width: 100%; background: #fff; border-radius: 2px; transition: transform 280ms var(--ease-in-out), opacity 200ms var(--ease-out); }
.phone.open .m-burger span:nth-child(1){ transform: translateY(7.75px) rotate(45deg); }
.phone.open .m-burger span:nth-child(2){ opacity: 0; }
.phone.open .m-burger span:nth-child(3){ transform: translateY(-7.75px) rotate(-45deg); }
.phone .m-body { height: 400px; position: relative; background: var(--bg-subtle); }
.phone .m-screen { padding: 22px 20px; }
.phone .m-screen .ph-h { height: 26px; width: 70%; border-radius: 7px; background: #dfe4f0; margin-bottom: 12px; }
.phone .m-screen .ph-l { height: 12px; border-radius: 6px; background: #e7ebf4; margin-bottom: 9px; }
.phone .m-menu { position: absolute; inset: 0; z-index: 2; background: var(--fx-navy); padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 2px; transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-out), transform 320ms var(--ease-in-out); }
.phone.open .m-menu { opacity: 1; transform: none; pointer-events: auto; }
.phone .m-menu a { color: #fff; font-size: var(--fs-18); font-weight: var(--fw-medium); padding: 15px 8px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.09); transition: padding-left 200ms var(--ease-out); }
.phone .m-menu a:hover { padding-left: 14px; }
.phone .m-menu .btn { margin-top: 18px; justify-content: center; }
.phone-label { margin-top: 12px; text-align: center; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-12); }

/* ---------------- Utility / announcement bar (global) ---------------- */
:root { --utilbar-h: 44px; }
.announce { position: relative; z-index: 120; display: flex; align-items: center; justify-content: center; min-height: var(--utilbar-h); padding: 0 16px; margin: 0; background: var(--fx-navy); color: #fff; font-size: var(--fs-14); text-align: center; }
.announce .wrap { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.announce-tag { flex: none; background: var(--fx-orange); color: #fff; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); }
.announce a { color: var(--fx-yellow); text-decoration: none; font-weight: var(--fw-medium); }
.announce a:hover { color: #fff; text-decoration: underline; }
body:has(> .announce) .site-header { top: var(--utilbar-h); }
body:has(> .announce) .site-header.scrolled { top: 0; }
@media (max-width: 760px) { .announce { display: none; } body:has(> .announce) .site-header { top: 0; } }

/* =====================================================================
   BRAND RULE — no coloured bar across the top of a box.
   Accent-coloured border-top / ::before strips on cards and panels are
   NOT an approved FunnelX element. Signal category with the icon tile,
   the label colour, a tinted surface, or the hover border instead.
   Kept as a guard so the pattern does not creep back in.
   ===================================================================== */