/* Recovery Familia P0 design system — solid black, white type, green/red accents.
   The owner's official image assets retain their original gold artwork. */
:root{
  --ink:#050505;
  --panel:#101010;
  --panel2:#171717;
  --stroke:#343434;
  --text:#fff;
  --muted:#d5d5d5;
  --gold:#fff;
  --gold2:#fff;
  --rf-gold:#fff;
  --rf-cream:#fff;
  --rf-line:#414141;
  --rf-deep:#050505;
  --rf-green:#05c747;
  --rf-red:#ec272f;
  --rf-white:#fff;
}
html,body{background:#050505;color:#fff}
body{color-scheme:dark}
.site-head{background:rgba(0,0,0,.98);border:0}
.site-head:after{height:2px;background:linear-gradient(90deg,#05c747 0 33.333%,#fff 33.333% 66.666%,#ec272f 66.666%);opacity:1}
.eyebrow,.hero-kicker,.hero-kicker span,.hero-proof{color:#fff}
.hero-kicker span{background:var(--rf-green)}
.home-hero h1,.home-hero h1 em,
.page-hero-copy h1,.section h2,.section h3,
.footer-title,.page h1,.visual-tile-caption strong,
.feature-card h3,.board-desc strong,.merch-copy h2,
.split-editorial h2,.final-cta h2,
.rf-approved-thread h2{color:#fff}
.home-hero p,.page-hero-copy p,.section-head>p,
.section-intro,.merch-copy p,.split-editorial p,
.feature-card p,.board-desc small,.board-type,
.meeting-card p,.meeting-card small,.tile p,
.notice,.footer p,.footer a,
.visual-tile-caption>span,.rf-product-info p,
.rf-empty-message,.rf-approved-thread p,
.prose p,.prose li,.faq p,.small{color:#e1e1e1}
.home-hero-shade{background:linear-gradient(90deg,#000e 0%,#000b 50%,#0003 100%),linear-gradient(0deg,#000c,transparent 40%)}
.section-alt,.page-hero{background:#0d0d0d}
.feature-card,.tile,.board-panel,.collection-card,
.rf-product,.meeting-card,.site-search-result{background:#141414;border-color:#414141}
.feature-band{background:linear-gradient(115deg,#171717,#090909);border-color:#383838}
.board-panel-top,.rf-thread-link{background:#1b1b1b}
.board-row{border-color:#363636}
.board-row:hover{background:#222}
.board-icon{border-color:#777;color:#fff}
.board-row:nth-child(2n) .board-icon{border-color:#555}
.board-row:nth-child(2n+1) .board-icon{border-color:#555}
.feature-card:nth-child(3n+1){border-top:1px solid #505050}
.feature-card:nth-child(3n+2){border-top:1px solid #505050}
.feature-card:nth-child(3n){border-top:1px solid #505050}
.collection-card:nth-child(3n+1){border-top:1px solid #505050}
.collection-card:nth-child(3n+2){border-top:1px solid #505050}
.collection-card:nth-child(3n){border-top:1px solid #505050}
.program-pill{color:#fff;background:#181818;border-color:#666}
.program-pill:hover{border-color:#eee;color:#fff}
.pill-row span{color:#fff;border-color:#666}
.text-link{color:#fff!important;border-color:#999}
.text-link:hover{color:#fff!important;border-color:var(--rf-green)}
.button,.head-join{background:#fff;color:#070707;border:1px solid #fff;box-shadow:none}
.button:hover,.head-join:hover{background:#eee;border-color:#eee;color:#000;filter:none}
.button-ghost{border:1px solid #fff;color:#fff}
.button-ghost:hover{background:#242424;border-color:#fff;color:#fff}
.final-cta{background:linear-gradient(150deg,#151515,#050505);border-top:1px solid #414141}
.notice{background:#181818;border-left:2px solid #666}
.notice:nth-of-type(2n){border-left-color:#666}
.visual-tile{border-color:#444}
.visual-tile-caption small{color:#fff}
.visual-tile-caption b{color:#fff}
.visual-tile:nth-child(3) .visual-tile-caption b{color:#fff}
.merch-mark,.collection-logo-art{background:#050505}
/* Match the already approved neutral gray outlines of the other site cards. */
.merch-visual>.editorial-image,.merch-visual .merch-mark{border-color:var(--rf-line,#414141)}
.rf-thread-link:hover{border-color:var(--rf-green)}
.rf-thread-link strong,.rf-product-info h3{color:#fff}
.rf-product-info small{color:#eee}
.rf-price{color:#fff}
.footer{background:#050505;border-top-color:#444}
.footer-top .eyebrow,.footer strong{color:#fff}
.footer a:hover{color:#fff}
.footer-bottom{border-top-color:#333;color:#bdbdbd}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--rf-green);outline-offset:3px}

/* The header itself owns the only brand wordmark above the fold. */
.head-inner{position:relative;min-width:0}
.brand-wordmark{object-fit:contain;object-position:center}
.menu{background:#080808;color:#fff;border:1px solid #fff;border-radius:8px}
.menu:hover{background:#1a1a1a;border-color:#fff}
.hamburger-lines{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:24px;height:26px}
.hamburger-lines i{display:block;width:24px;height:2px;border-radius:2px;background:#fff}
.head-inner .nav a{color:#fff}
.head-inner .nav a:hover{color:#fff;border-color:#666}
.head-inner .nav a[aria-current=page]{color:#fff;border-color:var(--rf-green)}

/* Native modal side drawer — same interaction pattern as WHB and Recovery Scout. */
.rf-site-drawer{
  box-sizing:border-box;position:fixed;inset:0 auto 0 0;
  width:min(420px,calc(100vw - 18px));height:100dvh;max-height:100dvh;max-width:none;
  padding:0;margin:0;border:0;border-radius:0 16px 16px 0;
  background:#080808;color:#fff;box-shadow:18px 0 55px #0009;
  overscroll-behavior:contain;overflow:hidden
}
.rf-site-drawer:not([open]){display:none}
.rf-site-drawer[open]{display:flex;flex-direction:column;animation:rf-drawer-enter .25s cubic-bezier(.2,.75,.25,1) both}
.rf-site-drawer::backdrop{background:rgba(0,0,0,.72)}
@keyframes rf-drawer-enter{from{transform:translateX(-100%)}to{transform:translateX(0)}}
html.rf-drawer-active{overflow:hidden}
.rf-drawer-heading{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:13px;
  background:#050505;padding:20px 18px 17px;border-bottom:1px solid #363636
}
.rf-drawer-lockup{flex:1;min-width:0}
.rf-drawer-lockup img{width:min(218px,100%);height:auto;max-height:85px;object-fit:contain;object-position:left}
.rf-drawer-close{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid #fff;border-radius:8px;background:transparent;
  color:#fff;line-height:1;font-size:32px;padding:0;cursor:pointer
}
.rf-drawer-close:hover{background:#262626;border-color:#fff}
.rf-drawer-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:18px 20px 27px}
.rf-drawer-eyebrow{margin:0 0 12px;font-size:.74rem;letter-spacing:.16em;font-weight:750;color:#e9e9e9}
.rf-drawer-links,.rf-drawer-group{display:flex;flex-direction:column;gap:0}
.rf-drawer-links a,.rf-drawer-group a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:46px;padding:12px 11px;color:#fff;
  border-bottom:1px solid #2e2e2e;border-radius:4px;
  font-size:.96rem;line-height:1.45;font-weight:650
}
.rf-drawer-links a span{color:#bbb}
.rf-drawer-links a:hover,.rf-drawer-group a:hover{background:#191919;color:#fff;border-left:2px solid #888}
.rf-drawer-group{margin-top:22px}
.rf-drawer-group h2{font:700 .78rem/1.45 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;margin:0 0 6px;padding:0 11px;color:#fff}
.rf-drawer-group:nth-of-type(2) h2{color:#fff}
.rf-drawer-bottom{flex:none;padding:15px 20px max(16px,env(safe-area-inset-bottom));border-top:1px solid #303030;background:#0c0c0c}
.rf-drawer-bottom p{margin:12px 0 2px;font-size:.95rem;font-weight:700;color:#fff}
.rf-drawer-bottom a{font-size:.82rem;color:#d6d6d6}
.rf-drawer-tricolor{display:grid;grid-template-columns:repeat(3,1fr);height:2px;width:92px;max-width:35%;gap:0}
.rf-drawer-tricolor i:first-child{background:var(--rf-green)}
.rf-drawer-tricolor i:nth-child(2){background:#fff}
.rf-drawer-tricolor i:last-child{background:var(--rf-red)}

/* Restore the approved black button, thin green ring and white arrow. */
#mmg-back-to-top{background:var(--rf-black,#050505);border:1.5px solid var(--rf-green,#05c747);color:var(--rf-white,#fff);box-shadow:0 7px 24px #0009}
#mmg-back-to-top:hover{background:var(--rf-black,#050505);border-color:var(--rf-green,#05c747);color:var(--rf-white,#fff);box-shadow:0 9px 28px #000b,0 0 0 2px rgba(5,199,71,.16)}
#mmg-back-to-top:focus-visible{outline-color:var(--rf-green,#05c747)}
body:has(.rf-site-drawer[open]) #mmg-back-to-top{visibility:hidden;opacity:0;pointer-events:none}

/* Keep responsive logo truly centered on the viewport—not centered in the remaining flex space. */
@media(max-width:820px){
  .head-inner{display:flex;align-items:center;justify-content:flex-start;min-height:80px;gap:0}
  .head-inner .menu{
    display:inline-flex;position:relative;order:0;flex:0 0 46px;
    align-items:center;justify-content:center;width:46px;height:46px;padding:0;margin:0;z-index:2
  }
  .head-inner .brand{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;grid-column:auto;grid-row:auto;
    width:min(212px,calc(100vw - 124px));max-width:calc(100vw - 124px);
    min-width:0;margin:0;padding:0;z-index:1
  }
  .head-inner .brand-wordmark{width:100%;max-width:100%;height:auto;max-height:72px;object-fit:contain;object-position:center}
  .head-inner .nav,.head-inner .head-join{display:none!important}
  .rf-drawer-heading{padding-top:max(20px,env(safe-area-inset-top))}
}
@media(max-width:375px){.head-inner .brand{width:min(192px,calc(100vw - 112px));max-width:calc(100vw - 112px)}}
@media(max-width:320px){.head-inner .brand{width:min(180px,calc(100vw - 106px));max-width:calc(100vw - 106px)}}
@media(prefers-reduced-motion:reduce){.rf-site-drawer[open]{animation:none}}


/* P0 owner screenshot QA: one centered enlarged official wordmark, never a
   fallback text copy. Crop only the approved image's existing black margins.
   The image itself is not redrawn or recolored. */
.brand-fallback,.site-head .brand-fallback{display:none!important}
@media(max-width:820px){
  .head-inner{min-height:86px}
  .head-inner .brand{
    width:min(274px,calc(100vw - 108px));
    max-width:calc(100vw - 108px);
    height:79px;
    flex:0 0 auto;
    overflow:hidden;
    isolation:isolate;
  }
  .head-inner .brand-wordmark{
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    width:137%;
    height:auto;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    transform:translate(-50%,-50%);
    margin:0;
    pointer-events:none;
  }
  .head-inner .menu{z-index:3}
  /* Do not begin the modal off screen on Safari. The native dialog is
     immediately usable; no translate animation or horizontal overscroll. */
  .rf-site-drawer[open]{animation:none!important;transform:none!important}
}
@media(max-width:375px){
 .head-inner .brand{width:min(240px,calc(100vw - 108px));max-width:calc(100vw - 108px)}
}
@media(max-width:320px){
 .head-inner .brand{width:min(215px,calc(100vw - 108px));max-width:calc(100vw - 108px)}
}


/* P0: single sitewide CTA contrast contract.
   All .button surfaces use black lettering on white; outlined buttons use white
   lettering on their dark/transparent surfaces. Applies to links (including
   visited links) and native form controls. Never inherit inline link colors. */
:is(a,button,input).button,
a.button:link,
a.button:visited {
  color:#080808;
  -webkit-text-fill-color:#080808;
  background:#fff;
  border-color:#fff;
}
:is(a,button,input).button:is(:hover,:focus-visible,:active),
a.button:visited:hover {
  color:#050505;
  -webkit-text-fill-color:#050505;
  background:#ececec;
  border-color:#ececec;
  filter:none;
}
:is(a,button,input).button-ghost,
a.button-ghost:link,
a.button-ghost:visited {
  color:#fff;
  -webkit-text-fill-color:#fff;
}
:is(a,button,input).button-ghost:is(:hover,:focus-visible,:active){
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:#242424;
  border-color:#fff;
}
/* Existing header CTA must retain the same legible filled treatment. */
a.head-join:link,a.head-join:visited {
  color:#080808;
  -webkit-text-fill-color:#080808;
}
a.head-join:is(:hover,:focus-visible,:active){
  color:#050505;
  -webkit-text-fill-color:#050505;
}

/* P0 2026-11-08: Align the approved image in the usable mobile header strip.
   The wordmark is centered between the hamburger's right edge and the right
   content boundary, not at 50% of the entire viewport. No artwork alteration. */
@media(max-width:820px){
  .head-inner{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    column-gap:0;
  }
  .head-inner .menu{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    position:relative;
    margin:0;
    flex:none;
  }
  .head-inner .brand{
    grid-column:2;
    grid-row:1;
    display:flex;
    position:relative;
    left:auto;
    top:auto;
    /* Shell has 16px right inset; half that aligns with the viewport edge. */
    transform:translateX(8px);
    justify-self:center;
    align-self:center;
    width:min(285px,calc(100% - 12px));
    max-width:calc(100% - 12px);
    min-width:0;
    height:auto;
    min-height:76px;
    margin:0;
    overflow:visible;
    isolation:auto;
  }
  .head-inner .brand-wordmark{
    display:block;
    position:static;
    left:auto;
    top:auto;
    transform:none;
    /* Match the mobile hamburger button's 46px height, retaining the
       authentic wordmark's aspect ratio and centering in the available strip. */
    width:auto;
    max-width:100%;
    height:46px;
    max-height:46px;
    object-fit:contain;
    object-position:center;
    margin:0;
  }
}
/* P0 RF header lockup: ~10% optical size refinement of the unchanged official artwork, together
   centered in the space to the right of the mobile hamburger. The RF bitmap
   keeps its original artwork; only black margins inside the frame are clipped.
   Desktop continues to show the original single wordmark. */
.head-inner .brand-monogram-frame{display:none}
@media(max-width:820px){
  .head-inner .brand{
    gap:9px;
    flex-wrap:nowrap;
    white-space:nowrap;
  }
  .head-inner .brand-monogram-frame{
    display:block;
    position:relative;
    flex:0 0 53px;
    width:53px;
    height:51px;
    overflow:hidden;
  }
  .head-inner .brand-monogram{
    position:absolute;
    left:50%;
    top:50%;
    width:97px;
    height:97px;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .head-inner .brand-wordmark{
    flex:0 1 auto;
    min-width:0;
    height:51px;
    max-height:51px;
    max-width:calc(100% - 62px);
  }
}
/* At the narrowest phone widths, protect the existing menu clearance
   instead of enlarging the artwork beyond the available header space. */
@media(max-width:340px){
  .head-inner .brand{gap:6px}
  .head-inner .brand-monogram-frame{flex-basis:44px;width:44px;height:46px}
  .head-inner .brand-monogram{width:82px;height:82px}
  .head-inner .brand-wordmark{height:46px;max-height:46px;max-width:calc(100% - 50px)}
}

/* P0 desktop header contract: visible full official wordmark, legible navigation,
   and a nonshrinking CTA. Mobile lockup rules above are intentionally preserved. */
@media(min-width:821px){
  .head-inner{display:flex;align-items:center;min-width:0;gap:clamp(12px,1.3vw,22px)}
  .head-inner .brand{flex:0 0 clamp(195px,19vw,245px);width:clamp(195px,19vw,245px);max-width:245px;min-width:0}
  .head-inner .brand-wordmark{display:block;width:100%;max-width:100%;height:auto;max-height:75px;object-fit:contain;object-position:left center}
  .head-inner .nav{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;min-width:0;margin-left:auto;gap:clamp(8px,1.2vw,16px)}
  .head-inner .nav a{font-size:clamp(.75rem,.91vw,.83rem);line-height:1.35;white-space:nowrap}
  .head-inner .head-join{flex:0 0 auto;white-space:nowrap}
}
@media(min-width:821px) and (max-width:1050px){
  .head-inner{gap:12px}
  .head-inner .brand{flex-basis:195px;width:195px}
  .head-inner .nav{gap:9px}
  .head-inner .nav a{font-size:.75rem}
}