/* ============================================================================
   fm-gate.css - styles for assets/fm-gate.js (the investor-type gate and the
   change dialog; the cookiesOnly renewal dialog shares the same look). Injected
   by fm-gate.js; no page links it. The look is the client's prototype as built on
   investor-tools-v2 (2026-10-05), with Cookies out of this walk again (2026-10-07
   -- the Investor type step carries a plain sentence instead, .fmg-cookienote):
   the F/m logo, a progress strip while a first visit walks Investor type -> Terms
   of Use, three cards side by side, the Terms in a panel with a navy rule, and ONE
   button style (navy-filled pills). The cookiesOnly dialog's banner is styled by
   Cookiebot's custom template (deploy/cookiebot-template/template.css); this file
   only gives it room. Colours, fonts and the shadow come ONLY from the --fm-*
   tokens of assets/fm-theme.css (tints are color-mix() of those tokens), so a
   token change there restyles all of this. Every class is prefixed fmg-. Reduced
   motion and print are respected at the end of the file. Phone width (390px): the
   dialog keeps a 16px gutter each side and never scrolls sideways.
   ========================================================================== */
html.fmg-lock{overflow:hidden}
/* Compliance's decision (2026-10-07): while THIS dialog is open, Cookiebot's own standalone banner stays
   invisible -- the visitor acts on this dialog alone, and its own Terms of Use acceptance already submits the
   site's default cookie consent (fm-gate.js, acceptDefaultCookies()). The banner keeps running: a synthetic click
   on its real button still reaches it, hidden or not, and Cookiebot's own script still records a genuine consent.
   Only its UNCLAIMED, standalone form is hidden (:not(.is-embedded)) -- the SEPARATE cookiesOnly dialog that
   later lets a visitor change their setting (Cookiebot's floating control) deliberately claims and embeds it, so
   that one is never touched by this rule. html.fmg-hold is the brief cover before this dialog mounts (while
   fm-gate.css itself is still loading); html.fmg-lock is while it is open; html.fmg-cookie-wait (fm-gate.js,
   waitForCookieDone()) is the gap right after accepting, until Cookiebot's own callback actually confirms the
   click above went through -- its processing is not guaranteed to finish in the same tick this dialog closes in. */
html.fmg-hold #CookieBanner:not(.is-embedded),html.fmg-lock #CookieBanner:not(.is-embedded),
html.fmg-cookie-wait #CookieBanner:not(.is-embedded){display:none!important}
/* above Cookiebot's own standalone banner (deploy/cookiebot-template/template.css: z-index 2147483645 -- the
   highest safe 32-bit value is 2147483647), which otherwise sits on top of everything, this dialog included, and
   would hide it even while it is genuinely open (THE COOKIE SENTENCE, fm-gate.js: our dialog is the one the
   visitor should see and act on; Cookiebot's banner stays reachable only via its own floating control after). */
.fmg-scrim{position:fixed;inset:0;z-index:2147483646;background:color-mix(in srgb,var(--fm-navy-deep) 60%,transparent);animation:fmg-fade .18s ease-out}
.fmg{position:fixed;z-index:2147483647;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,calc(100vw - 64px));
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:28px 36px 28px;
  background:var(--fm-panel);border:0;border-radius:0;box-shadow:0 24px 60px color-mix(in srgb,var(--fm-navy-deep) 35%,transparent);
  font-family:var(--fm-font);color:var(--fm-navy-deep);line-height:1.5;text-align:left;animation:fmg-pop .18s ease-out}
.fmg *{box-sizing:border-box}
.fmg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fmg-park,.fmg-park[hidden]{display:none}

/* ---- the mark and the progress strip ---- */
.fmg-eyebrow{margin:-4px 0 22px -8px;line-height:0}
.fmg-logo{display:block;height:44px;width:auto}
.fmg-steps{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:0 0 26px;padding:0;border-bottom:1px solid var(--fm-line)}
.fmg-steps li{display:flex;align-items:center;gap:8px;margin-bottom:-1px;padding:0 0 10px;border-bottom:2px solid transparent;
  font-size:14px;font-weight:700;color:var(--fm-mute-text)}
.fmg-steps li[aria-current="step"]{color:var(--fm-navy);border-bottom-color:var(--fm-red)}
.fmg-steps li.is-done{color:var(--fm-navy)}
.fmg-step-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid currentColor;font-size:12px;line-height:1}
.fmg-steps li[aria-current="step"] .fmg-step-n{background:var(--fm-navy);border-color:var(--fm-navy);color:var(--fm-panel)}
.fmg-steps li.is-done .fmg-step-n{background:var(--fm-ice)}

/* ---- the heading ---- */
.fmg-title{margin:0 0 10px;font-size:clamp(24px,2.6vw,34px);line-height:1.12;font-weight:700;letter-spacing:-.01em;color:var(--fm-navy);outline:none}
.fmg-desc{margin:0 0 22px;font-size:15px;color:var(--fm-ink-soft)}

/* ---- the three cards ---- */
.fmg-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 18px}
.fmg-title + .fmg-choices{margin-top:22px}   /* a first visit has no line under the title */
.fmg-choice{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;min-height:210px;margin:0;padding:24px 24px 22px;
  text-align:left;cursor:pointer;appearance:none;-webkit-appearance:none;font-family:inherit;
  background:color-mix(in srgb,var(--fm-line) 50%,var(--fm-panel));border:0;border-top:3px solid transparent;border-radius:0;
  color:var(--fm-navy-deep);transition:background-color .15s ease,border-color .15s ease}
.fmg-choice:hover{background:color-mix(in srgb,var(--fm-line) 85%,var(--fm-panel))}
.fmg-arrow{display:block;margin-top:auto;color:var(--fm-flame);transition:transform .15s ease}
.fmg-arrow svg{display:block}
.fmg-choice:hover .fmg-arrow{transform:translateX(6px)}
.fmg-choice:focus-visible{outline:3px solid var(--fm-navy);outline-offset:3px}
.fmg-choice.is-picked{border-top-color:var(--fm-red)}
.fmg-choice.is-current{background:var(--fm-navy);color:var(--fm-panel)}
.fmg-choice.is-current .fmg-arrow{color:var(--fm-panel)}
.fmg-choice-text{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.fmg-choice-text b{font-size:19px;font-weight:700;line-height:1.25;color:inherit}
.fmg-choice-who{font-size:15px;line-height:1.5;color:inherit}
.fmg-current{position:absolute;top:12px;right:12px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fm-navy);background:var(--fm-panel)}
.fmg-keep{margin:0;font-size:12.5px;line-height:1.45;color:var(--fm-mute-text)}
.fmg-cookienote{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--fm-mute-text)}

/* ---- the Terms (its own step) ---- */
.fmg-mark{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;vertical-align:1px;color:var(--fm-navy-deep);background:var(--fm-gold)}
.fmg-ph{margin:-8px 0 14px;padding:9px 12px;font-size:13px;color:var(--fm-navy-deep);
  background:color-mix(in srgb,var(--fm-gold) 22%,var(--fm-panel));border:1px dashed color-mix(in srgb,var(--fm-gold) 70%,var(--fm-panel))}
.fmg-terms{max-height:min(40vh,420px);overflow:auto;margin:0 0 4px;padding:22px 28px;border:0;border-left:3px solid var(--fm-navy);
  background:color-mix(in srgb,var(--fm-line) 50%,var(--fm-panel));font-size:15px;line-height:1.6;color:var(--fm-navy-deep)}
.fmg-notice{margin:-8px 0 14px;padding:12px 16px;font-size:12.5px;line-height:1.5;color:var(--fm-panel);background:var(--fm-navy)}
.fmg-terms:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}
.fmg-terms p{margin:0 0 12px}
.fmg-terms p:last-child{margin-bottom:0}
.fmg-terms h1,.fmg-terms h2,.fmg-terms h3,.fmg-terms h4{margin:18px 0 8px;font-size:16px;line-height:1.35;font-weight:700;color:var(--fm-navy)}
.fmg-terms h1{font-size:17px}
.fmg-terms h3,.fmg-terms h4{font-size:15px}
.fmg-terms > :first-child{margin-top:0}
.fmg-terms ul,.fmg-terms ol{margin:0 0 12px;padding-left:22px}
.fmg-terms li{margin:0 0 6px}
/* the Admin's formatted Terms (2026-10-12; drawn by FmRich.toNode from the store's html, the rich-text profile "terms":
   h2 h3 h4 p ul ol li b i u br a). Scoped to its own class, so the TEMPORARY hard-coded Terms keep their look. A
   heading (h2) is the size the hard-coded text gives its h1, a sub-heading one step down each. */
.fmg-terms--rich h2{font-size:17px}
.fmg-terms--rich h3{font-size:16px}
.fmg-terms--rich h4{font-size:15px}
.fmg-terms--rich ul{list-style:disc outside}
.fmg-terms--rich ol{list-style:decimal outside}
.fmg-terms--rich li{display:list-item}
.fmg-terms--rich b{font-weight:700}
.fmg-terms--rich i{font-style:italic}
.fmg-terms--rich u{text-decoration:underline;text-underline-offset:2px}
.fmg-terms--rich a{color:var(--fm-navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.fmg-terms--rich a:hover{color:var(--fm-red)}
.fmg-terms--rich a:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}

/* ---- the buttons: one style everywhere, the cookie step's ---- */
.fmg-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}
.fmg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:12px 28px;border:2px solid var(--fm-navy);
  border-radius:999px;cursor:pointer;appearance:none;-webkit-appearance:none;font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;
  background:var(--fm-navy);color:var(--fm-panel);transition:background-color .15s ease,border-color .15s ease}
.fmg-btn--navy,.fmg-btn--outline{background:var(--fm-navy);color:var(--fm-panel)}
.fmg-btn:hover{background:color-mix(in srgb,var(--fm-navy) 82%,var(--fm-panel));border-color:color-mix(in srgb,var(--fm-navy) 82%,var(--fm-panel))}
.fmg-btn:focus-visible,.fmg-x:focus-visible{outline:2px solid var(--fm-red);outline-offset:3px}
.fmg-btn:disabled{cursor:not-allowed;opacity:.45}
.fmg-btn:disabled:hover{background:var(--fm-navy);border-color:var(--fm-navy)}
.fmg-scrollhint{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--fm-mute-text);text-align:right}
.fmg-x{position:absolute;top:14px;right:14px;z-index:1;width:40px;height:40px;border:0;border-radius:50%;background:none;cursor:pointer;
  color:var(--fm-navy-deep);appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center}
.fmg-x::before{content:"";display:block;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--fm-ico-close) center/contain no-repeat;mask:var(--fm-ico-close) center/contain no-repeat}
.fmg-x:hover{background:var(--fm-ice);color:var(--fm-navy)}

/* ---- the cookie step: the banner sits in the slot, styled by its template ---- */
.fmg-cookie-slot{min-height:120px}
/* its buttons on the right like every other step's, the details link on the left (the template puts the link right;
   overridden here, in the slot only, so the standalone banner and Cookiebot's Admin copy stay as they are) */
@media (min-width:601px){
  .fmg-cookie-slot #CookieBanner .fmcb-buttons{justify-content:flex-end}
  .fmg-cookie-slot #CookieBanner .fmcb-main .fmcb-link{order:-1;margin:0 auto 0 0}
}

@media (max-width:860px){
  .fmg-choices{grid-template-columns:1fr;gap:12px}
  .fmg-choice{min-height:0;padding:20px}
}
@media (max-width:520px){
  .fmg{padding:22px 18px 20px;width:calc(100vw - 32px)}
  .fmg-logo{height:36px}
  .fmg-steps{gap:6px 16px;margin-bottom:20px}
  .fmg-steps li{font-size:13px}
  .fmg-title{font-size:22px}
  .fmg-terms{max-height:38vh;padding:16px 18px}
  .fmg-actions{flex-direction:column-reverse}
  .fmg-actions .fmg-btn{width:100%}
}
@keyframes fmg-pop{from{opacity:0;transform:translate(-50%,-50%) translateY(-6px)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fmg-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .fmg,.fmg-scrim{animation:none!important}
  .fmg-choice,.fmg-arrow,.fmg-btn{transition:none!important}
}
@media print{.fmg,.fmg-scrim{display:none!important}}