/* Manara Consultancy — additive overlay for the bundled/compiled pages
   (index.html, pricing.html, quote.html, content-studio.html).
   These pages are generated by a third-party "dc" template runtime that
   inline-styles almost every element, so most rules here need !important
   to win over inline styles (a normal external !important rule always
   beats a plain inline style — this is standard CSS cascade behavior,
   not a hack). Only touches broad, stable hooks (tag/attribute selectors,
   the handful of real classes the runtime emits) — never the numbered
   scp / dc-tpl internals, which are compiler output and may change on
   any rebuild. Nothing here touches JS, the manifest, or app logic.

   NB: never write a literal star-slash inside this comment — it closes the
   comment early and the parser then eats the first rule that follows. */

/* ---- iOS Safari corrections (these pages don't load manara-theme.css) ----
   1. Safari "text autosizing" rescales type on its own in narrow columns and on
      rotation, which is what makes these sections read at the wrong size on an
      iPhone while looking correct in Chrome (Chromium ignores the property).
   2. overflow-x:hidden only clips on iOS when it sits on the scrolling element. */
html{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  overflow-x: hidden !important;
}
body{ overflow-x: hidden !important; }

/* Micro-labels the template inline-styles at 10.5–12px with very wide tracking.
   At phone size the tracking is what kills legibility, so raise the floor and
   tighten it. Only on small screens; desktop keeps the intended look. */
@media (max-width: 640px){
  [style*="font-size: 10.5px"]{ font-size: 12px !important; letter-spacing: .08em !important; }
  [style*="font-size: 11px"]  { font-size: 12.5px !important; letter-spacing: .1em !important; }
  [style*="font-size: 11.5px"]{ font-size: 12.5px !important; letter-spacing: .1em !important; }
  [style*="font-size: 12px"]  { font-size: 12.5px !important; letter-spacing: .16em !important; }
  /* emails / URLs must wrap rather than pan the page sideways */
  p, li, td, th, span, div[style*="font-size"]{ overflow-wrap: anywhere; }
  /* the notch: keep content clear of the safe area (viewport-fit=cover) */
  body{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ---- responsive-grid overflow fix ----
   The template emits `repeat(auto-fit, minmax(NNNpx, 1fr))` inline. A bare
   `minmax(300px, …)` track cannot shrink below 300px, so on narrow phones the
   track bursts out of its padded card and the text is clipped by the card's
   `overflow: hidden`. Wrapping the floor in `min(NNNpx, 100%)` lets the track
   collapse to the container width while preserving the multi-column layout at
   every width where it actually fits. One rule per emitted floor value. */
[style*="minmax(340px"]{ grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important; }
[style*="minmax(300px"]{ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }
[style*="minmax(280px"]{ grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
[style*="minmax(220px"]{ grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }
[style*="minmax(190px"]{ grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important; }
[style*="minmax(180px"]{ grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important; }
[style*="auto-fill"][style*="minmax(260px"]{ grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)) !important; }

/* a grid item whose own min-width exceeds the collapsed track re-introduces
   the overflow — clear the floor and let it track its column */
[style*="min-width: 280px"]{ min-width: 0 !important; }
[style*="min-width: 300px"]{ min-width: 0 !important; }

/* long unbroken strings (URLs, emails) must not push a card wider than the screen */
@media (max-width: 720px){
  [style*="grid-column: span 2"]{ grid-column: span 1 !important; }
}

header[data-header]{
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  background: rgba(8,17,28,.68) !important;
}

.nav-dropdown, .ddm{
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

a[href^="https://wa.me"]{
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s !important;
}
a[href^="https://wa.me"]:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px -14px rgba(37,211,102,.55) !important;
}

button, a.serifish, .svc-more{
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, filter .25s !important;
}

::selection{ background:#C7A14E; color:#0C1A2A; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid #E6CC8C !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ---- HRM / careers section (#careers is a stable section id) ---- */
@keyframes manaraCardGlow{
  0%,100%{ box-shadow: 0 1px 0 rgba(244,238,225,.06) inset, 0 24px 50px -30px rgba(0,0,0,.65); }
  50%{ box-shadow: 0 1px 0 rgba(244,238,225,.09) inset, 0 28px 60px -26px rgba(199,161,78,.32); }
}
#careers div[style*="border-radius: 22px"]{
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  border-color: rgba(230,204,140,.4) !important;
  animation: manaraCardGlow 6s ease-in-out infinite;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s !important;
}
#careers div[style*="border-radius: 22px"]:hover{
  transform: translateY(-4px);
  border-color: rgba(230,204,140,.65) !important;
}
#careers div[style*="border-radius: 999px"],
#careers label, #careers input, #careers select, #careers textarea{
  transition: border-color .3s, background .3s, transform .3s cubic-bezier(.2,.7,.2,1) !important;
}
#careers input:focus, #careers select:focus, #careers textarea:focus{
  border-color: #C7A14E !important;
  box-shadow: 0 0 0 3px rgba(199,161,78,.18) !important;
}

/* ---- HRM guided-walkthrough modal (fixed overlay at z-index 80) ---- */
@keyframes manaraModalIn{
  from{ opacity: 0; transform: translateY(18px) scale(.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
div[style*="z-index: 80"] > div[style*="border-radius: 24px"]{
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow: 0 1px 0 rgba(244,238,225,.08) inset, 0 40px 90px -30px rgba(0,0,0,.9), 0 0 50px -20px rgba(199,161,78,.4) !important;
  animation: manaraModalIn .45s cubic-bezier(.2,.7,.2,1);
}

/* ---- "HR Consultancy" service card: heightened glassmorphism + a slow
        conic light-sweep behind the content (tagged .manara-hr-card by JS) ---- */
@keyframes manaraHrSweep{ to{ transform: rotate(360deg); } }
.manara-hr-card{
  position: relative;
  overflow: hidden;
  border-color: rgba(230,204,140,.5) !important;
  background: linear-gradient(160deg, rgba(230,204,140,.10), rgba(12,26,42,.6) 62%) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  box-shadow: 0 1px 0 rgba(244,238,225,.08) inset, 0 26px 55px -30px rgba(0,0,0,.7), 0 0 34px -18px rgba(199,161,78,.5) !important;
  animation: manaraCardGlow 5.5s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s !important;
}
.manara-hr-card::before{
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(230,204,140,.16) 82%, transparent 96%);
  animation: manaraHrSweep 8s linear infinite;
  pointer-events: none;
}
.manara-hr-card > *{ position: relative; z-index: 1; }
.manara-hr-card:hover{
  transform: translateY(-6px) scale(1.015) !important;
  border-color: rgba(230,204,140,.75) !important;
}

/* injected About link in the compiled homepage nav */
.nav-main a[data-manara-about]{ transition: color .25s; }
.nav-main a[data-manara-about]:hover{ color: #E6CC8C !important; }

/* ---- the lighthouse keeper (replaces the pirate face) ----
   transform-box:view-box lets every transform-origin below be written in the
   SVG's own 48x72 coordinates instead of pixels of the rendered element. */
.mnr-keeper{ overflow: visible; }
.mnr-keeper *{ transform-box: view-box; }

/* the button's compiled inline style still carries the old `pirateJump` hop,
   which fights the keeper's own motion */
button[aria-label*="keeper"]{ animation: none !important; }

.mnr-keeper .k-figure{ transform-origin: 24px 66px; }
.mnr-keeper .k-arm-wave{ transform-origin: 17.4px 28.4px; }
.mnr-keeper .k-arm-lantern{ transform-origin: 30.6px 28.4px; }
.mnr-keeper .k-leg-l{ transform-origin: 20.3px 43px; }
.mnr-keeper .k-leg-r{ transform-origin: 27.7px 43px; }
.mnr-keeper .k-shin-l{ transform-origin: 20.3px 54.5px; }
.mnr-keeper .k-shin-r{ transform-origin: 27.7px 54.5px; }
.mnr-keeper .k-glow{ transform-origin: 36px 30.2px; }
.mnr-keeper .k-stool{ opacity: 0; transition: opacity .35s ease; }
/* poses ease between one another; the walk cycle overrides these per-frame */
.mnr-keeper .k-figure,
.mnr-keeper .k-leg,
.mnr-keeper .k-shin,
.mnr-keeper .k-arm-lantern,
.mnr-keeper .k-shadow{ transition: transform .45s cubic-bezier(.2,.7,.2,1); }

/* the lantern never stops burning */
@keyframes kFlicker{
  0%,100%{ opacity: .72; transform: scale(.97); }
  42%{ opacity: 1; transform: scale(1.04); }
  68%{ opacity: .6; transform: scale(.95); }
}
.mnr-keeper .k-glow{ animation: kFlicker 2.6s ease-in-out infinite; }
/* the hot core breathes with the halo, a touch out of phase */
.mnr-keeper .k-core{ transform-origin: 36px 30.2px; animation: kFlicker 1.7s ease-in-out infinite; }

/* standing */
@keyframes kSway{ 0%,100%{ transform: rotate(-1.3deg); } 50%{ transform: rotate(1.3deg); } }
.mnr-keeper.is-idle .k-figure,
.mnr-keeper.is-wave .k-figure,
.mnr-keeper:not(.is-walk):not(.is-sit) .k-figure{ animation: kSway 4.6s ease-in-out infinite; }

/* waving: the free hand goes up and back twice */
@keyframes kWave{
  0%,100%{ transform: rotate(0deg); }
  18%{ transform: rotate(-28deg); }
  38%{ transform: rotate(4deg); }
  58%{ transform: rotate(-24deg); }
  78%{ transform: rotate(2deg); }
}
.mnr-keeper.is-wave .k-arm-wave{ animation: kWave 1.15s ease-in-out 2; }

/* walking: legs alternate, body bobs, and he paces across a little */
@keyframes kStepA{ 0%,100%{ transform: rotate(15deg); } 50%{ transform: rotate(-15deg); } }
@keyframes kStepB{ 0%,100%{ transform: rotate(-15deg); } 50%{ transform: rotate(15deg); } }
@keyframes kShinA{ 0%,100%{ transform: rotate(-4deg); } 55%{ transform: rotate(16deg); } }
@keyframes kShinB{ 0%,100%{ transform: rotate(16deg); } 55%{ transform: rotate(-4deg); } }
@keyframes kBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-1.1px); } }
@keyframes kSwing{ 0%,100%{ transform: rotate(-5deg); } 50%{ transform: rotate(5deg); } }
@keyframes kPace{ 0%,100%{ transform: translateX(-5px); } 50%{ transform: translateX(5px); } }
.mnr-keeper.is-walk{ animation: kPace 5.2s ease-in-out; }
.mnr-keeper.is-walk .k-figure{ animation: kBob .5s ease-in-out infinite; }
.mnr-keeper.is-walk .k-leg-l{ animation: kStepA 1s ease-in-out infinite; }
.mnr-keeper.is-walk .k-leg-r{ animation: kStepB 1s ease-in-out infinite; }
.mnr-keeper.is-walk .k-shin-l{ animation: kShinA 1s ease-in-out infinite; }
.mnr-keeper.is-walk .k-shin-r{ animation: kShinB 1s ease-in-out infinite; }
.mnr-keeper.is-walk .k-arm-wave{ animation: kSwing 1s ease-in-out infinite; }
.mnr-keeper.is-walk .k-arm-lantern{ animation: kSwing 1s ease-in-out infinite reverse; }

/* sitting: hips drop onto the stool, knees fold forward */
.mnr-keeper.is-sit .k-stool{ opacity: 1; }
.mnr-keeper.is-sit .k-figure{ transform: translateY(6.5px); }
.mnr-keeper.is-sit .k-leg-l{ transform: rotate(-72deg); }
.mnr-keeper.is-sit .k-leg-r{ transform: rotate(-68deg); }
.mnr-keeper.is-sit .k-shin-l{ transform: rotate(72deg); }
.mnr-keeper.is-sit .k-shin-r{ transform: rotate(68deg); }
.mnr-keeper.is-sit .k-arm-lantern{ transform: rotate(6deg); }
.mnr-keeper.is-sit .k-shadow{ transform: scaleX(.82); }

@media (prefers-reduced-motion: reduce){
  .mnr-keeper *{ animation: none !important; transition: none !important; }
}

/* ======================================================================
   "Marsa" — the harbour beacon (the AI agent)
   A Fresnel optic that sweeps, breathes and stands in water, plus a panel
   restyled as a signal station. Injected by manara-agent.js.
   ====================================================================== */

.mnr-beacon{ display: block; overflow: visible; }
.mnr-beacon *{ transform-box: view-box; }
.mnr-beacon-lg{ width: 38px; height: 38px; }
.mnr-beacon-sm{ width: 34px; height: 34px; flex: 0 0 auto; }

@keyframes mbSweep{ to{ transform: rotate(360deg); } }
@keyframes mbOrbit{ to{ transform: rotate(-360deg); } }
@keyframes mbCore{
  0%,100%{ transform: scale(.92); opacity: .82; }
  45%{ transform: scale(1.12); opacity: 1; }
  70%{ transform: scale(.97); opacity: .7; }
}
@keyframes mbHalo{ 0%,100%{ opacity: .55; } 50%{ opacity: 1; } }
@keyframes mbRipple{
  0%,100%{ transform: translateX(-2px) scaleY(1); }
  50%{ transform: translateX(2px) scaleY(.72); }
}

.mnr-beacon .b-sweep{ transform-origin: 24px 23px; animation: mbSweep 7s linear infinite; }
.mnr-beacon .b-orbit{ transform-origin: 24px 23px; animation: mbOrbit 18s linear infinite; }
.mnr-beacon .b-core{ transform-origin: 24px 23px; animation: mbCore 2.3s ease-in-out infinite; }
.mnr-beacon .b-halo{ transform-origin: 24px 23px; animation: mbHalo 3.4s ease-in-out infinite; }
.mnr-beacon .b-r1{ transform-origin: 24px 44.6px; animation: mbRipple 3.2s ease-in-out infinite; }

/* ---- the launcher ---- */
button.scpf.mnr-launch{
  position: relative;
  width: 62px !important; height: 62px !important;
  background: radial-gradient(120% 120% at 30% 20%, rgba(230,204,140,.16), rgba(10,19,31,.94) 60%) !important;
  border: 1px solid rgba(230,204,140,.55) !important;
  box-shadow: 0 0 0 1px rgba(6,13,22,.6), 0 18px 40px -16px rgba(0,0,0,.85),
              0 0 34px -8px rgba(199,161,78,.5) !important;
}
/* two rings pulse outward, like a signal going out over water */
@keyframes mbPing{
  0%{ transform: scale(.92); opacity: .55; }
  100%{ transform: scale(1.9); opacity: 0; }
}
button.scpf.mnr-launch::before,
button.scpf.mnr-launch::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(230,204,140,.45); pointer-events: none;
  animation: mbPing 3.4s cubic-bezier(.2,.7,.2,1) infinite;
}
button.scpf.mnr-launch::after{ animation-delay: 1.7s; }
button.scpf.mnr-launch:hover{ transform: translateY(-3px) scale(1.05) !important; }
button.scpf.mnr-launch:hover .b-sweep{ animation-duration: 2.4s; }

/* the one-time invitation beside the launcher */
.mnr-hint{
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 12.5px; letter-spacing: .04em; color: #EBE2CF;
  background: rgba(10,19,31,.92); border: 1px solid rgba(230,204,140,.35);
  padding: 7px 12px; border-radius: 999px; pointer-events: none;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.8);
  animation: mbHintIn .5s .8s both, mbHintFloat 3.6s 1.3s ease-in-out infinite;
}
@keyframes mbHintIn{ from{ opacity: 0; transform: translate(8px,-50%); } to{ opacity: 1; transform: translate(0,-50%); } }
@keyframes mbHintFloat{ 0%,100%{ transform: translate(0,-50%); } 50%{ transform: translate(-3px,-50%); } }
@media (max-width: 640px){ .mnr-hint{ display: none; } }

/* ---- the panel: a signal station ---- */
@keyframes mbRise{
  from{ opacity: 0; transform: translateY(20px) scale(.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel{
  /* .80 let the hero's clocks read straight through the glass wherever a browser
     declines to composite backdrop-filter. Message legibility beats translucency. */
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(199,161,78,.10), transparent 60%),
    rgba(9,17,28,.97) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
  border: 1px solid rgba(230,204,140,.38) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 0 rgba(244,238,225,.09) inset, 0 40px 90px -30px rgba(0,0,0,.9),
              0 0 46px -18px rgba(199,161,78,.4) !important;
  animation: mbRise .42s cubic-bezier(.2,.7,.2,1);
}
/* a beam crosses the panel each time it opens, then settles */
@keyframes mbSweepBar{
  0%{ transform: translateX(-120%); opacity: 0; }
  25%{ opacity: 1; }
  100%{ transform: translateX(120%); opacity: 0; }
}
.mnr-sweep{
  position: absolute; top: 0; left: 0; right: 0; height: 78px; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 30%, rgba(255,232,168,.16) 50%, transparent 70%);
  animation: mbSweepBar 2.6s cubic-bezier(.2,.7,.2,1) .25s 1;
}
.mnr-agent .mnr-head{ position: relative; z-index: 3; }

/* live "on watch" pip */
@keyframes mbPip{ 0%,100%{ box-shadow: 0 0 0 0 rgba(143,227,176,.55); } 70%{ box-shadow: 0 0 0 5px rgba(143,227,176,0); } }
.mnr-status{
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #8fe3b0; margin-right: 7px; vertical-align: middle;
  animation: mbPip 2.4s ease-out infinite;
}

/* ---- messages ---- */
.mnr-msgs{ scrollbar-width: thin; scrollbar-color: rgba(199,161,78,.45) transparent; }
.mnr-msgs::-webkit-scrollbar{ width: 6px; }
.mnr-msgs::-webkit-scrollbar-thumb{ background: rgba(199,161,78,.4); border-radius: 999px; }
@keyframes mbMsgIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.mnr-msgs > div{ animation: mbMsgIn .35s cubic-bezier(.2,.7,.2,1); }

/* the agent speaks from the light: a gold edge and a warm wash */
.mnr-msgs > div[style*="align-items: flex-start"] > div[style*="border-radius: 14px"]{
  background: linear-gradient(150deg, rgba(230,204,140,.12), rgba(244,238,225,.04) 60%) !important;
  border-color: rgba(230,204,140,.3) !important;
  border-left: 2px solid rgba(230,204,140,.65) !important;
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.8), 0 0 22px -14px rgba(199,161,78,.6) !important;
}
/* the visitor speaks back in gold */
.mnr-msgs > div[style*="align-items: flex-end"] > div[style*="border-radius: 14px"]{
  background: linear-gradient(150deg, rgba(199,161,78,.9), rgba(138,109,43,.85)) !important;
  color: #0C1A2A !important;
  border-color: rgba(230,204,140,.5) !important;
  box-shadow: 0 12px 28px -18px rgba(199,161,78,.9) !important;
}

/* ---- suggested prompts (the POC's whole point) ---- */
.mnr-prompts{
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 0 14px 12px; position: relative; z-index: 2;
  transition: opacity .35s ease, max-height .4s ease;
  max-height: 140px;
}
.mnr-prompts.is-spent{ opacity: 0; max-height: 0; padding-bottom: 0; pointer-events: none; }
.mnr-chip{
  font: 500 12px/1 Archivo, system-ui, sans-serif; letter-spacing: .01em;
  color: #EBE2CF; cursor: pointer; white-space: nowrap;
  background: rgba(244,238,225,.05);
  border: 1px solid rgba(230,204,140,.32); border-radius: 999px;
  padding: 8px 12px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s, color .25s;
}
.mnr-chip:hover{
  transform: translateY(-2px);
  background: rgba(199,161,78,.16); border-color: rgba(230,204,140,.7); color: #FFF4DA;
}
.mnr-chip:focus-visible{ outline: 2px solid #E6CC8C; outline-offset: 2px; }

/* ---- composer ---- */
.mnr-form{ position: relative; z-index: 2; background: rgba(6,13,22,.35); }
.mnr-form input.scpb{
  background: rgba(6,13,22,.6) !important;
  border-color: rgba(230,204,140,.28) !important;
  transition: border-color .25s, box-shadow .25s !important;
}
.mnr-form input.scpb:focus{
  border-color: #C7A14E !important;
  box-shadow: 0 0 0 3px rgba(199,161,78,.18) !important;
  outline: none !important;
}
.mnr-form button.scph{
  background: linear-gradient(145deg, #E6CC8C, #C7A14E) !important;
  box-shadow: 0 10px 24px -12px rgba(199,161,78,.9) !important;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s !important;
}
.mnr-form button.scph:hover{ transform: translateY(-2px) scale(1.05) !important; }
.mnr-form button.scph:active{ transform: scale(.94) !important; }
.mnr-form button.scph svg{ filter: drop-shadow(0 1px 1px rgba(12,26,42,.35)); }

@media (prefers-reduced-motion: reduce){
  .mnr-beacon *, .mnr-sweep, .chat-panel, .mnr-status,
  button.scpf.mnr-launch::before, button.scpf.mnr-launch::after,
  .mnr-hint, .mnr-msgs > div{ animation: none !important; }
}

/* ---- floating launcher buttons ---- */
@keyframes manaraFloatBtn{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}
a.scpf, button.scpf{
  animation: manaraFloatBtn 3.4s ease-in-out infinite;
}
a.scpf:hover, button.scpf:hover{
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.06) !important;
}

/* ---- engagement chart (Content Studio) ----
   Two steps of a single-hue gold ramp, generated in OKLCH and validated against
   this card's composited surface (#0a1522): base 7.38:1, peak 12.36:1.
   One series => one colour; the peak is emphasis, never a value ramp. */
/* an author `display` beats the UA's [hidden]{display:none} — restore it so the
   toggle can actually hide the flex/table children */
.mchart [hidden]{ display: none !important; }
.mchart{
  --surface: #0a1522;
  --bar: #c59f4c;
  --bar-peak: #f6cf7c;
  --grid: rgba(244,238,225,.08);
  --axis: rgba(244,238,225,.16);
  --ink-muted: #8C99A8;
  --ink-2: #CBBA98;
  --up: #7fd6a2;
  position: relative; margin: 20px 0 0; padding: 0;
}
/* height includes headroom for the peak's direct label — the axis band is a
   separate row below, so nothing gets a nested scrollbar */
.mchart-plot{ position: relative; height: 176px; }
.mchart-grid{ position: absolute; inset: 0; pointer-events: none; }
/* solid hairlines, one step off surface — never dashed */
.mchart-gline{ position: absolute; left: 0; right: 0; height: 1px; background: var(--grid); }
.mchart-gline:first-child{ background: var(--axis); }
.mchart-gline span{
  position: absolute; left: 0; bottom: 3px; font-size: 10.5px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.mchart-bars{
  position: absolute; inset: 0 0 0 34px; display: flex; align-items: flex-end;
  gap: 2px; /* the 2px surface gap does the separating — no borders on marks */
}
.mcol{
  /* the column is the hit target (full plot height), not the bar. min-width:0 so
     14 columns never overflow the plot and give the card a nested scrollbar. */
  flex: 1 1 0; min-width: 0;
  height: 100%; display: flex; align-items: flex-end; justify-content: center;
  position: relative; background: none; border: 0; padding: 0 2px; cursor: pointer;
  transition: opacity .18s ease;
}
/* the column is a tall hit target; ring the bar, not the whole 176px box.
   Overrides the global focus-visible rule above (later + !important). */
.mcol:focus{ outline: none; }
.mcol:focus-visible{ outline: none !important; }
.mcol:focus-visible .mbar{ outline: 2px solid var(--bar-peak); outline-offset: 2px; }
.mbar{
  display: block; width: 100%; max-width: 24px; /* cap thickness, leave air */
  height: var(--h);
  background: var(--bar);
  border-radius: 4px 4px 0 0;        /* rounded cap, square at the baseline */
  transform-origin: center bottom;
  transition: background .18s ease, filter .18s ease;
}
.mcol.is-peak .mbar{ background: var(--bar-peak); }
.mchart:not(.no-anim) .mbar{ animation: mbarGrow .7s cubic-bezier(.2,.7,.2,1) var(--d) both; }
@keyframes mbarGrow{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
.mcol.is-dim{ opacity: .45; }
.mcol:hover .mbar{ filter: brightness(1.18); }
/* direct label rides just above the bar cap, inside the plot box (never clipped) */
.mpeak{
  position: absolute; bottom: var(--h); left: 50%; transform: translate(-50%, -3px);
  font-size: 11px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
}
.mchart-x{
  display: flex; justify-content: space-between; margin: 8px 0 0 34px;
}
.mchart-x span{
  font-size: 10.5px; color: var(--ink-muted); letter-spacing: .04em; white-space: nowrap;
}
.mchart-tip{
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(8,17,28,.96); border: 1px solid rgba(230,204,140,.4); border-radius: 10px;
  padding: 9px 12px; min-width: 150px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
}
.mchart-tip .tip-day{ font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.mchart-tip .tip-val{ font-size: 14.5px; font-weight: 600; color: #F4EEE1; margin-top: 3px; font-variant-numeric: tabular-nums; }
.mchart-tip .tip-delta{ font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.mchart-tip .tip-delta.up{ color: var(--up); }
.mchart-toggle{
  margin-top: 14px; background: none; border: 1px solid rgba(244,238,225,.2); color: var(--ink-2);
  border-radius: 999px; padding: 6px 14px; font-size: 11.5px; cursor: pointer;
  transition: border-color .25s, color .25s;
}
.mchart-toggle:hover{ border-color: rgba(230,204,140,.6); color: #E6CC8C; }
.mchart-note{ margin-top: 10px; font-size: 11px; color: var(--ink-muted); font-style: italic; }
.mchart-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.mchart-table caption{ text-align: left; font-size: 11px; color: var(--ink-muted); padding-bottom: 8px; }
.mchart-table th, .mchart-table td{
  text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--grid); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mchart-table th[scope=row]{ text-align: left; color: var(--ink-muted); font-weight: 500; }
.mchart-table thead th{ color: var(--ink-muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}