/* FF_SiteFixPack_V2 — STABLE
   Goals:
   - One header system across pages (index has .brand div, inner pages have a.brand)
   - Apple-like badge logo (single), subtitle fills empty area
   - Nav always visible and wraps safely
   - No hard seams: soften .hr
*/

:root{
  --ff-header-h: 64px;
  --ff-badge: 112px;
  --ff-badge-r: 26px;
  --ff-logo: 78px;
  --ff-badge-x: -12px;

  --ff-brand-shift: -10px;

  --ff-sub-font: 12px;
  --ff-sub-color: rgba(235,245,255,.62);

  --ff-line-soft: rgba(120,155,190,.18);
}

/* Keep site continuous */
main, section, article{ background:transparent !important; }

/* Header bar */
header.nav{
  position:sticky; top:0; z-index:20;
  overflow:visible !important;
  min-height: var(--ff-header-h) !important;
}

/* Row layout with safe wrap */
header.nav .nav-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap: 10px 18px !important;
}

/* Brand container (works for both div.brand and a.brand) */
header.nav .brand{
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;
  transform: translateX(var(--ff-brand-shift)) !important;
  text-decoration:none !important;
  flex: 0 0 auto !important;
}

/* Turn the dot into “badge slot” (we'll replace dot visually by JS anyway) */
header.nav .dot{
  width:0 !important; height:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* Brand stack */
.ff-brand-stack2{
  display:inline-flex;
  flex-direction:column;
  line-height:1.1;
}
.ff-brand-subline{
  font-size: var(--ff-sub-font);
  color: var(--ff-sub-color);
  letter-spacing:.15px;
  margin-top:3px;
  white-space:nowrap;
}

/* Apple-like badge element */
.ff-logo-badge{
  width:0 !important; height:0 !important;
  position:relative !important;
  display:inline-block !important;
  margin-right: calc(var(--ff-badge) + 14px) !important;
}
.ff-logo-badge::before{
  content:"";
  position:absolute;
  width: var(--ff-badge);
  height: var(--ff-badge);
  border-radius: var(--ff-badge-r);
  left: var(--ff-badge-x);
  top: calc(var(--ff-header-h)/2 - var(--ff-badge)/2);
  background: rgba(12,18,28,.86);
  border: 1px solid rgba(120,155,190,.22);
  box-shadow:
    0 18px 60px rgba(0,0,0,.60),
    0 0 22px rgba(34,211,238,.10);
}
.ff-logo-badge > img.ff-logo{
  position:absolute !important;
  width: var(--ff-logo) !important;
  height: var(--ff-logo) !important;
  left: calc(var(--ff-badge-x) + (var(--ff-badge) - var(--ff-logo))/2);
  top:  calc(var(--ff-header-h)/2 - var(--ff-logo)/2);
  object-fit:contain !important;
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(96,165,250,.12));
}

/* Nav links always visible, wraps if needed */
header.nav .nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap: 18px !important;
  flex: 1 1 520px !important;
  flex-wrap:wrap !important;
  margin-left:auto !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
header.nav .nav-links a{
  padding: 8px 6px !important;
}

/* Soften hard separators (.hr) */
.hr{
  height:1px !important;
  border:0 !important;
  background: linear-gradient(90deg, transparent, var(--ff-line-soft), transparent) !important;
  opacity:.55 !important;
}

/* responsive */
@media (max-width: 920px){
  :root{
    --ff-header-h: 60px;
    --ff-badge: 96px;
    --ff-badge-r: 22px;
    --ff-logo: 66px;
    --ff-badge-x: -10px;
    --ff-brand-shift: -6px;
  }
  header.nav .nav-links{ justify-content:center !important; flex:1 1 100% !important; }
}
@media (max-width: 520px){
  :root{
    --ff-header-h: 56px;
    --ff-badge: 84px;
    --ff-badge-r: 20px;
    --ff-logo: 58px;
    --ff-badge-x: -8px;
    --ff-brand-shift: -2px;
  }
}
/* compact header vars */
  --ff-header-h: 56px;
  --ff-badge: 64px;
  --ff-badge-r: 18px;
  --ff-logo: 44px;
  --ff-badge-x: -6px;
  --ff-brand-shift: -2px;
}

/* In scrolled mode, keep header visually tight */
body.ff-scrolled header.nav{
  min-height: var(--ff-header-h) !important;
}

/* Ensure badge doesn't “hang” too low when scrolled */
body.ff-scrolled .ff-logo-badge::before{
  top: calc(var(--ff-header-h)/2 - var(--ff-badge)/2) !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.55),
    0 0 14px rgba(34,211,238,.08) !important;
}
body.ff-scrolled .ff-logo-badge > img.ff-logo{
  top: calc(var(--ff-header-h)/2 - var(--ff-logo)/2) !important;
}

/* Prevent header content from being covered by big badge */
header.nav{
  padding-left: 8px !important;
  padding-right: 8px !important;
}




/* FF_BADGE_CLEARANCE_V1 — prevent badge from covering page headings on inner pages */
body.ff-inner-page main{
  /* badge protrudes below header; give content room */
  padding-top: 34px;
}
body.ff-inner-page.ff-scrolled main{
  padding-top: 16px;
}

/* FPF:SERVICE_CARDS_V1 BEGIN */
/* isolated, prefix-based, minimal collision */
.fpf-services{
  --fpf-accent:  var(--accent,  #19B0E8);
  --fpf-accent2: var(--accent2, #0969D3);
  --fpf-warm:    var(--warm,    #E18C25);
  --fpf-text:    var(--text,    rgba(232,238,245,0.95));
  --fpf-muted:   rgba(232,238,245,0.72);
  --fpf-border:  rgba(255,255,255,0.10);
  --fpf-card:    rgba(255,255,255,0.035);
  --fpf-card2:   rgba(255,255,255,0.02);
}

.fpf-services .fpf-h1{ margin: 0 0 .4rem 0; }
.fpf-services .fpf-h2{ margin: 0 0 .8rem 0; }
.fpf-services .fpf-h3{ margin: 0; font-size: 1.05rem; }

.fpf-services .fpf-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.fpf-services .fpf-lead{
  margin: 0 0 1rem 0;
  color: var(--fpf-text);
  max-width: 72ch;
}

.fpf-services .fpf-muted{ color: var(--fpf-muted); }

.fpf-services .fpf-section{ margin: 2rem 0; }

.fpf-services .fpf-services-hero{
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--fpf-border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--fpf-card), var(--fpf-card2));
}

.fpf-services .fpf-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .8rem 0 .6rem 0;
}

.fpf-services .fpf-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.fpf-services .fpf-badge{
  border: 1px solid var(--fpf-border);
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .85rem;
  color: var(--fpf-muted);
  background: rgba(255,255,255,0.02);
}

.fpf-services .fpf-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--fpf-border);
  text-decoration: none;
  color: var(--fpf-text);
  background: rgba(255,255,255,0.02);
}

.fpf-services .fpf-btn:hover{
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

.fpf-services .fpf-btn-primary{
  border-color: rgba(25,176,232,0.55);
  background: linear-gradient(135deg, rgba(25,176,232,0.18), rgba(9,105,211,0.12));
}

.fpf-services .fpf-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem;
}

.fpf-services .fpf-card{
  border: 1px solid var(--fpf-border);
  border-radius: 18px;
  padding: 1rem 1rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

.fpf-services .fpf-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: .55rem;
}

.fpf-services .fpf-tag{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .82rem;
  color: var(--fpf-muted);
  white-space: nowrap;
}

.fpf-services .fpf-tag-accent{
  border-color: rgba(25,176,232,0.45);
  color: rgba(25,176,232,0.95);
}

.fpf-services .fpf-tag-warm{
  border-color: rgba(225,140,37,0.50);
  color: rgba(225,140,37,0.95);
}

.fpf-services .fpf-list{ margin: .6rem 0 0 1.05rem; }
.fpf-services .fpf-ol{ margin: .6rem 0 0 1.25rem; }
.fpf-services .fpf-list li, .fpf-services .fpf-ol li{ margin: .25rem 0; }

.fpf-services .fpf-proofbox{
  margin-top: 1rem;
  padding: .95rem .95rem;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
}

.fpf-services .fpf-proof-links{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .6rem 0;
}

.fpf-services .fpf-pre{
  margin: .5rem 0 0 0;
  padding: .7rem .8rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  overflow: auto;
  color: rgba(232,238,245,0.9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9rem;
}

@media (max-width: 520px){
  .fpf-services .fpf-card-head{ flex-direction: column; align-items: flex-start; }
  .fpf-services .fpf-cta-row{ flex-direction: column; }
  .fpf-services .fpf-btn{ width: 100%; }
}
/* FPF:SERVICE_CARDS_V1 END */
:root{
  --ff-wrap: 1120px;
  --ff-gutter: 24px;

  --ff-header-h: 56px;
  --ff-header-pad-y: 10px;

  --ff-brand-mark: 32px;

  --ff-hero-logo: 300px;
  --ff-hero-gap: clamp(18px, 3vw, 34px);
}

/* keep one SSOT width so “баннеры” не уезжали */
.container,
main,
.nav-inner,
.footer-inner{
  max-width: var(--ff-wrap) !important;
}

/* pages.css uses padding shorthand => avoid horizontal zeroing */
.page-hero{
  padding-left: var(--ff-gutter) !important;
  padding-right: var(--ff-gutter) !important;
}

/* slim header: support both old header.nav and new .site-header */
header.nav .nav-inner,
.site-header .nav-inner{
  padding-top: var(--ff-header-pad-y) !important;
  padding-bottom: var(--ff-header-pad-y) !important;
  min-height: var(--ff-header-h);
}

/* header brand mark */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand .dot{ display:none !important; }

.brand-mark{
  width: var(--ff-brand-mark);
  height: var(--ff-brand-mark);
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}

/* HOME hero: 3-column grid (logo + copy + side) */
html[data-page="home"] .hero-grid{
  align-items: start;
  gap: var(--ff-hero-gap);
}

@media (min-width: 980px){
  html[data-page="home"] .hero-grid{
    grid-template-columns: var(--ff-hero-logo) 1fr minmax(340px, 460px);
  }
}

@media (max-width: 979px){
  html[data-page="home"] .hero-grid{
    grid-template-columns: 1fr;
  }
  html[data-page="home"] .hero-logo-card{
    margin: 0 auto 18px;
  }
}

html[data-page="home"] .hero-logo-card{
  width: var(--ff-hero-logo);
  height: var(--ff-hero-logo);
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-page="home"] .hero-logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,0.55));
}

/* responsive logo size */
@media (max-width: 1200px){
  :root{ --ff-hero-logo: 260px; }
}
@media (max-width: 720px){
  :root{ --ff-hero-logo: 200px; }
}
@media (max-width: 520px){
  :root{ --ff-hero-logo: 170px; --ff-brand-mark: 28px; }
}

/* masthead: slightly tighter (less “empty air”) */
.masthead{
  padding-top: clamp(26px, 4vw, 42px) !important;
  padding-bottom: clamp(14px, 3vw, 26px) !important;
}
/* /FPF_UI_NORMALIZE_V1 */

/* FPF_UI_NORMALIZE_V1
   SSOT goals:
   1) Header slim & identical across all pages
   2) Big logo only in hero/masthead (NOT in header)
   3) Masthead grid: home=logo+copy+side, inner=logo+copy
   4) Consistent container paddings (avoid double padding)
*/

/* ---- container discipline (no double padding) ---- */
:root{
  --ff-container-max: 1160px;
  --ff-container-pad: clamp(18px, 2.6vw, 40px);

  --ff-header-h: 56px;
  --ff-header-pad-y: 10px;

  --ff-brand-mark: 34px;

  --ff-hero-logo: 300px;     /* home big */
  --ff-inner-logo: 150px;    /* inner masthead */
  --ff-mh-gap: clamp(18px, 3vw, 34px);
}

/* Prefer .container as the ONLY horizontal padding system */
.container{
  max-width: var(--ff-container-max);
  padding-left: var(--ff-container-pad);
  padding-right: var(--ff-container-pad);
  margin-left: auto;
  margin-right: auto;
}

/* ---- HEADER (slim, same everywhere) ---- */
/* base.css uses .nav / .nav-inner, so override there */
.nav{
  /* keep existing look, just ensure slim geometry */
}
.nav .nav-inner{
  padding-top: var(--ff-header-pad-y) !important;
  padding-bottom: var(--ff-header-pad-y) !important;
  min-height: var(--ff-header-h);
}

/* brand in header: small mark + text */
.nav .brand{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}

/* Kill any "big badge / card" if it ended up inside header */
.nav .badge,
.nav .brand-badge,
.nav .brand-logo-card,
.nav .brand-avatar,
.nav .hero-logo-card{
  display:none !important;
}

/* Replace dot with real mark (works even if dot still exists) */
.nav .dot{ display:none !important; }

.brand-mark{
  width: var(--ff-brand-mark);
  height: var(--ff-brand-mark);
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}

/* Header typography: tighter, stable */
.nav .brand strong{
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* ---- MASTHEAD / HERO GRID ---- */
.masthead{
  padding-top: 22px;
  padding-bottom: 18px;
}

/* Home: 3 columns (logo | copy | side card) */
.hero-grid{
  align-items: start;
  gap: var(--ff-mh-gap);
}

/* Desktop home grid */
@media (min-width: 980px){
  html[data-page="home"] .hero-grid{
    display:grid;
    grid-template-columns: var(--ff-hero-logo) 1fr minmax(340px, 460px);
  }
}
/* Tablet/mobile: stack */
@media (max-width: 979px){
  html[data-page="home"] .hero-grid{
    display:grid;
    grid-template-columns: 1fr;
  }
}

/* Inner masthead: 2 columns (logo | copy) */
@media (min-width: 820px){
  html[data-page="inner"] .masthead-grid{
    display:grid;
    grid-template-columns: var(--ff-inner-logo) 1fr;
    align-items: start;
    gap: var(--ff-mh-gap);
  }
}
@media (max-width: 819px){
  html[data-page="inner"] .masthead-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* iOS-like logo card (shared) */
.logo-card{
  padding: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
html[data-page="home"]  .logo-card{ width: var(--ff-hero-logo);  height: var(--ff-hero-logo); }
html[data-page="inner"] .logo-card{ width: var(--ff-inner-logo); height: var(--ff-inner-logo); }

.logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,0.55));
}

/* responsive logo sizes */
@media (max-width: 1200px){
  :root{ --ff-hero-logo: 260px; --ff-inner-logo: 140px; }
}
@media (max-width: 720px){
  :root{ --ff-hero-logo: 200px; --ff-inner-logo: 120px; }
}
@media (max-width: 520px){
  :root{ --ff-hero-logo: 170px; --ff-inner-logo: 110px; --ff-brand-mark: 28px; }
}

/* ---- Typography guard (reduce “перекос” от разного line-height) ---- */
h1, .hero-title{
  line-height: 1.05;
  letter-spacing: -0.02em;
}
p, li{
  line-height: 1.55;
}

/* /FPF_UI_NORMALIZE_V1 */


/* FPF_HOME_HERO_FIX_V1
   Fixes:
   - logo must NOT overflow iOS-card on Home (no overlap into text)
   - home hero grid must be stable (logo | copy | side card)
*/
:root{
  --ff-hero-logo: 300px;
  --ff-mh-gap: clamp(18px, 3vw, 34px);
}

/* HOME grid */
html[data-page="home"] .hero-grid{
  display: grid !important;
  grid-template-columns: var(--ff-hero-logo) minmax(420px, 1fr) minmax(340px, 460px);
  align-items: start;
  gap: var(--ff-mh-gap);
}

/* Responsive: stack on narrower screens */
@media (max-width: 1100px){
  html[data-page="home"] .hero-grid{
    grid-template-columns: 1fr;
  }
}

/* iOS-card logo (support both class variants: logo-card / hero-logo-card) */
html[data-page="home"] .logo-card,
html[data-page="home"] .hero-logo-card{
  width: var(--ff-hero-logo) !important;
  height: var(--ff-hero-logo) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;          /* ключ: не даём картинке “вылезать” */
}

/* image containment (support both logo-img / hero-logo) */
html[data-page="home"] .logo-img,
html[data-page="home"] .hero-logo{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: static !important;
  transform: none !important;
}

/* keep text above any shadows just in case */
html[data-page="home"] .hero-grid .reveal{ position: relative; z-index: 2; }
/* /FPF_HOME_HERO_FIX_V1 */


/* FPF_DOCKED_LOGO_V1
   Goals:
   - Header: text-only brand (no logo in header)
   - Logo lives in hero/masthead, but overlaps header strip (up+left)
   - Header brand text shifts right so no collision with overlapped logo
   - Responsive safety: disable overlap on narrow screens
*/

/* kill any header mark if it still exists somewhere */
.nav .brand-mark{ display:none !important; }
.nav .dot{ display:none !important; }

/* size/offset SSOT (tuned for desktop; responsive overrides below) */
html[data-page="home"]{
  --ff-dock-size: 300px;
  --ff-dock-reserve: 320px;   /* header text offset to the right */
  --ff-dock-up: 34px;         /* lift logo into header */
  --ff-dock-left: 12px;       /* push logo a bit to the left */
}
html[data-page="inner"]{
  --ff-dock-size: 150px;
  --ff-dock-reserve: 170px;
  --ff-dock-up: 26px;
  --ff-dock-left: 10px;
}

/* header text shift so it doesn't collide with the docked logo */
.nav .brand{
  padding-left: var(--ff-dock-reserve, 0px);
}

/* make sure nav doesn't get weird on wrap */
.nav .nav-inner{ gap: 18px; }
.nav .nav-links{ flex-wrap: wrap; }

/* --- docked logo itself (we tag it via class fpf-logo in HTML) --- */
.fpf-logo{
  width: var(--ff-dock-size, 150px) !important;
  height: var(--ff-dock-size, 150px) !important;
  position: relative;
  z-index: 20; /* above sticky header (header z=10 in base.css) */
  margin-top: calc(-1 * var(--ff-dock-up, 0px));
  margin-left: calc(-1 * var(--ff-dock-left, 0px));
  overflow: hidden; /* key: no overflow into text */
  will-change: transform;
}

/* contain image inside the card, regardless of class names */
.fpf-logo img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  transform: none !important;
}

/* keep layout grids aligned with our SSOT size */
@media (min-width: 980px){
  html[data-page="home"] .hero-grid{
    grid-template-columns: var(--ff-dock-size) 1fr minmax(340px, 460px) !important;
    align-items: start;
  }
}
@media (min-width: 820px){
  html[data-page="inner"] .masthead-grid{
    grid-template-columns: var(--ff-dock-size) 1fr !important;
    align-items: start;
  }
}

/* Responsive: reduce sizes + disable overlap to prevent header chaos */
@media (max-width: 980px){
  html[data-page="home"]{ --ff-dock-size: 240px; --ff-dock-reserve: 0px; --ff-dock-up: 0px; --ff-dock-left: 0px; }
}
@media (max-width: 820px){
  html[data-page="inner"]{ --ff-dock-size: 130px; --ff-dock-reserve: 0px; --ff-dock-up: 0px; --ff-dock-left: 0px; }
  .nav .brand{ padding-left: 0 !important; }
}
@media (max-width: 520px){
  html[data-page="home"]{ --ff-dock-size: 170px; }
  html[data-page="inner"]{ --ff-dock-size: 110px; }
}

/* /FPF_DOCKED_LOGO_V1 */

/* FPF_DOCKED_LOGO_TUNE_V1
   Fix goals:
   - header stays THIN and identical (text-only brand + nav)
   - docked logo overlaps header (up+left), but header content shifts via SPACER (not padding hacks)
   - masthead/hero top padding reduced to remove "huge empty air"
   - responsive safety: spacer/overlap disabled on narrow
*/

/* 1) remove any old brand padding-left logic if present */
.nav .brand{ padding-left: 0 !important; }

/* 2) only enable docked behavior when JS sets data-docked="1" */
html[data-docked="1"] .nav .nav-inner{
  gap: 18px;
}

/* spacer BEFORE brand+nav, reserves room for the overlapped logo */
@media (min-width: 821px){
  html[data-docked="1"] .nav .nav-inner::before{
    content: "";
    display: block;
    width: var(--ff-dock-reserve, 0px);
    flex: 0 0 auto;
  }
  /* prevent ugly wrapping on desktop */
  html[data-docked="1"] .nav .nav-links{ flex-wrap: nowrap; }
}
@media (max-width: 820px){
  html[data-docked="1"] .nav .nav-inner::before{ display:none; }
  html[data-docked="1"] .nav .nav-links{ flex-wrap: wrap; }
}

/* 3) header slim (hard override) */
:root{
  --ff-header-h: 56px;
  --ff-header-pad-y: 10px;
}
.nav .nav-inner{
  padding-top: var(--ff-header-pad-y) !important;
  padding-bottom: var(--ff-header-pad-y) !important;
  min-height: var(--ff-header-h);
}

/* 4) reduce top air under header (home hero + inner masthead) */
html[data-page="home"] .hero{
  padding-top: 40px !important;   /* was 72px in base.css */
  padding-bottom: 34px !important;
}
.masthead{
  padding-top: 18px !important;
  padding-bottom: 14px !important;
}

/* 5) docked logo: make sure it never leaks outside card */
.fpf-logo{
  overflow: hidden !important;
}
.fpf-logo img{
  object-fit: contain !important;
  transform: none !important;
}

/* 6) tune defaults (safe) — can be adjusted later */
html[data-page="home"]{
  --ff-dock-size: 300px;
  --ff-dock-reserve: 320px;
  --ff-dock-up: 30px;
  --ff-dock-left: 12px;
}
html[data-page="inner"]{
  --ff-dock-size: 150px;
  --ff-dock-reserve: 170px;
  --ff-dock-up: 22px;
  --ff-dock-left: 10px;
}

/* responsive: disable reserve+overlap */
@media (max-width: 980px){
  html[data-page="home"]{ --ff-dock-reserve: 0px; --ff-dock-up: 0px; --ff-dock-left: 0px; }
}
@media (max-width: 820px){
  html[data-page="inner"]{ --ff-dock-reserve: 0px; --ff-dock-up: 0px; --ff-dock-left: 0px; }
}

/* /FPF_DOCKED_LOGO_TUNE_V1 */