/* ==========================================================================
   Onflow Ads — Growth layer styling (cookie consent · trust).
   Self-contained + scoped under .ofg-* so it can't collide with the page's own
   design system. Dark neon-glass to match the site; --ofg-accent is set inline
   from the admin support accent. Fully responsive (full-screen sheet on mobile).
   ========================================================================== */
.ofg-root{
  --ofg-accent:#FB2C36; --ofg-accent2:#E11D2E;
  --ofg-bg:#101012; --ofg-bg2:#19191C; --ofg-line:rgba(255,255,255,.10);
  --ofg-line2:rgba(255,255,255,.18); --ofg-ink:#F4F5F7; --ofg-dim:#A7A8B0; --ofg-faint:#74757D;
  --ofg-glass:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  --ofg-shadow:0 24px 70px -18px rgba(0,0,0,.7),0 0 0 1px var(--ofg-line);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
.ofg-root *,.ofg-root *::before,.ofg-root *::after{box-sizing:border-box}
.ofg-root button{font-family:inherit;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .ofg-root *{animation-duration:.001ms!important;transition-duration:.05ms!important}
}

/* ============================ Cookie consent ============================ */
.ofg-consent{
  position:fixed;left:18px;bottom:18px;z-index:2147482000;width:min(384px,calc(100vw - 36px));
  background:var(--ofg-glass),var(--ofg-bg);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--ofg-line);border-radius:20px;box-shadow:var(--ofg-shadow);
  padding:20px 20px 18px;color:var(--ofg-ink);
  transform:translateY(140%);opacity:0;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s;
}
.ofg-consent.ofg-in{transform:translateY(0);opacity:1}
.ofg-consent__ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;
  background:linear-gradient(135deg,var(--ofg-accent),var(--ofg-accent2));color:#FFFFFF}
.ofg-consent h3{margin:0 0 6px;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.ofg-consent p{margin:0 0 16px;font-size:.84rem;line-height:1.6;color:var(--ofg-dim)}
.ofg-consent p a{color:var(--ofg-accent);text-decoration:none;border-bottom:1px solid transparent}
.ofg-consent p a:hover{border-bottom-color:currentColor}
.ofg-consent__row{display:flex;gap:9px;flex-wrap:wrap}
.ofg-btn{appearance:none;border:0;border-radius:11px;padding:10px 16px;font-size:.85rem;font-weight:600;
  transition:transform .15s,filter .2s,background .2s,border-color .2s}
.ofg-btn:active{transform:translateY(1px)}
.ofg-btn--primary{flex:1 1 auto;color:#FFFFFF;background:linear-gradient(135deg,var(--ofg-accent),var(--ofg-accent2));
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--ofg-accent) 70%,transparent)}
.ofg-btn--primary:hover{filter:brightness(1.07)}
.ofg-btn--ghost{background:rgba(255,255,255,.05);border:1px solid var(--ofg-line2);color:var(--ofg-ink)}
.ofg-btn--ghost:hover{background:rgba(255,255,255,.10)}

/* mobile: full-screen sheet */
@media (max-width:560px){
  .ofg-consent{left:10px;right:10px;bottom:10px;width:auto}
}

/* ============================ Support panel ============================ */
/* While the cookie-consent card is showing (same corner, higher z-index), the
   help launcher yields — no stacked overlapping cards. Re-appears on dismiss. */
.ofg-root:has(.ofg-consent.ofg-in) .ofg-supp{display:none}
/* Email-first help center, styled after the calmest in-product help panels:
   flat neutral surfaces, one accent, section labels, row lists with
   chevrons, generous spacing. Scoped under .ofg-supp. */
.ofg-supp{--ofg-accent:#FB2C36;position:fixed;right:18px;bottom:18px;z-index:2147481500;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.ofg-supp__fab{position:absolute;right:0;bottom:0;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,var(--ofg-accent),color-mix(in srgb,var(--ofg-accent) 72%,#000));
  box-shadow:0 10px 26px -8px color-mix(in srgb,var(--ofg-accent) 60%,transparent),0 0 0 1px rgba(255,255,255,.06);
  display:grid;place-items:center;transition:transform .18s,filter .2s}
.ofg-supp__fab:hover{filter:brightness(1.07);transform:translateY(-2px)}
.ofg-supp__fab svg{width:24px;height:24px}
.ofg-supp__fab-close{display:none}
.ofg-supp.is-open .ofg-supp__fab-open{display:none}
.ofg-supp.is-open .ofg-supp__fab-close{display:block}
.ofg-supp__fab-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:#fff;color:var(--ofg-accent);font-size:.7rem;font-weight:800;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4);border:2px solid var(--ofg-accent)}
/* Same [hidden] trap as the panel: author display:grid beats the UA rule. */
.ofg-supp__fab-badge[hidden]{display:none}
/* The panel is CLASS-driven, not [hidden]-driven: an author display:flex would
   override the UA [hidden] rule and the close button would appear dead (the
   exact bug this replaces). Closed by default; .is-open shows it. */
.ofg-supp__panel{display:none;position:absolute;right:0;bottom:70px;width:min(396px,calc(100vw - 32px));
  max-height:min(660px,calc(100dvh - 104px));flex-direction:column;overflow:hidden;
  background:#0E0F13;border:1px solid rgba(255,255,255,.09);border-radius:18px;
  box-shadow:0 28px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03);color:var(--ofg-ink,#F4F5F7)}
.ofg-supp.is-open .ofg-supp__panel{display:flex;animation:ofgSuppIn .26s cubic-bezier(.22,1,.36,1)}
@keyframes ofgSuppIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
/* ---- header: flat, quiet, informative ---- */
.ofg-supp__head{display:flex;align-items:center;gap:12px;padding:15px 18px 13px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.07)}
.ofg-supp__head-tx{min-width:0;flex:1 1 auto}
.ofg-supp__head-tx strong{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.ofg-supp__status{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ofg-dim,#A7A8B0);margin-top:3px}
.ofg-supp__status i{width:7px;height:7px;border-radius:50%;background:#6b6c74;flex-shrink:0}
.ofg-supp__status.is-on i{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.ofg-supp__status em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofg-supp__x{border:0;background:rgba(255,255,255,.06);color:var(--ofg-dim,#A7A8B0);width:30px;height:30px;
  border-radius:9px;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .15s,color .15s}
.ofg-supp__x:hover{background:rgba(255,255,255,.12);color:#fff}
.ofg-supp__x svg{width:15px;height:15px}
/* ---- body ---- */
.ofg-supp__body{flex:1 1 auto;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.ofg-supp__greet{margin:0 0 2px;font-size:.9rem;line-height:1.55;color:var(--ofg-ink,#F4F5F7)}
.ofg-supp__sec{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ofg-faint,#74757D);margin-top:6px}
.ofg-supp__card{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.07);border-radius:14px}
.ofg-supp__ask{padding:12px;display:flex;flex-direction:column;gap:9px}
/* row lists (topics + your messages) */
.ofg-supp__rows{overflow:hidden}
.ofg-supp__row{appearance:none;display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:12px 14px;background:none;border:0;border-top:1px solid rgba(255,255,255,.05);cursor:pointer;
  color:var(--ofg-ink,#F4F5F7);font-family:inherit;font-size:.84rem;font-weight:600;line-height:1.35;transition:background .14s}
.ofg-supp__row:first-child{border-top:0}
.ofg-supp__row:hover{background:rgba(255,255,255,.045)}
.ofg-supp__row>span:first-child{flex:1 1 auto;min-width:0}
.ofg-supp__row i{font-style:normal;color:var(--ofg-faint,#74757D);font-size:1rem;flex-shrink:0}
.ofg-supp__conv-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.ofg-supp__conv-tx b{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofg-supp__conv-tx small{font-size:.68rem;font-weight:500;color:var(--ofg-faint,#74757D)}
.ofg-supp__conv-st{flex-shrink:0}
.ofg-chip{display:inline-block;font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.ofg-chip--wait{background:rgba(255,255,255,.07);color:var(--ofg-dim,#A7A8B0)}
.ofg-chip--replied{background:rgba(52,211,153,.14);color:#5be8b4}
.ofg-chip--closed{background:rgba(255,255,255,.05);color:var(--ofg-faint,#74757D)}
.ofg-chip--ai{background:color-mix(in srgb,var(--ofg-accent) 14%,transparent);color:#ff9d9d}
/* form */
.ofg-supp__form{padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.ofg-supp__lbl{font-size:.72rem;font-weight:600;color:var(--ofg-dim,#A7A8B0)}
.ofg-supp__lbl span{font-weight:400;color:var(--ofg-faint,#74757D)}
.ofg-supp__in,.ofg-supp__ta{width:100%;background:#15161B;border:1px solid rgba(255,255,255,.11);
  border-radius:11px;padding:10px 12px;color:var(--ofg-ink,#F4F5F7);font-size:.86rem;font-family:inherit;outline:none;resize:none}
.ofg-supp__in:focus,.ofg-supp__ta:focus{border-color:var(--ofg-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ofg-accent) 20%,transparent)}
.ofg-supp__btn{width:100%;margin-top:2px}
.ofg-btn--ghost.ofg-supp__btn{margin-top:6px}
.ofg-supp__err{margin:0;font-size:.76rem;color:#ff8a7a;min-height:1em}
.ofg-supp__note{margin:0;font-size:.74rem;line-height:1.55;color:var(--ofg-faint,#74757D)}
.ofg-supp__muted{color:var(--ofg-faint,#74757D);font-size:.82rem;text-align:center;padding:18px}
.ofg-supp__back{appearance:none;background:none;border:0;align-self:flex-start;cursor:pointer;
  color:var(--ofg-dim,#A7A8B0);font-family:inherit;font-size:.78rem;font-weight:600;line-height:1;padding:2px 0 4px;transition:color .15s}
.ofg-supp__back:hover{color:#fff}
.ofg-supp__topicpill{align-self:flex-start;font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--ofg-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--ofg-accent) 40%,transparent);color:#fff}
/* instant answers */
.ofg-supp__faq{padding:12px 14px}
.ofg-supp__faq strong{display:block;font-size:.84rem;margin-bottom:4px}
.ofg-supp__faq p{margin:0;font-size:.82rem;line-height:1.55;color:var(--ofg-dim,#A7A8B0);white-space:pre-wrap}
.ofg-supp__faq a{display:inline-block;margin-top:7px;color:var(--ofg-accent);font-size:.78rem;font-weight:600;text-decoration:none}
/* confirmation */
.ofg-supp__done{text-align:center;padding:18px 8px 6px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ofg-supp__done-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--ofg-accent),color-mix(in srgb,var(--ofg-accent) 72%,#000));
  box-shadow:0 10px 26px -10px color-mix(in srgb,var(--ofg-accent) 65%,transparent)}
.ofg-supp__done-ic svg{width:22px;height:22px}
.ofg-supp__done h4{margin:2px 0 0;font-size:1rem;font-weight:700}
.ofg-supp__done p{margin:0;font-size:.82rem;line-height:1.6;color:var(--ofg-dim,#A7A8B0);max-width:30ch}
.ofg-supp__done p strong{color:var(--ofg-ink,#F4F5F7)}
.ofg-supp__ref{font-size:.68rem;color:var(--ofg-faint,#74757D)}
/* AI instant-answer card */
.ofg-supp__ai{padding:12px 14px;border-left:3px solid var(--ofg-accent)}
.ofg-supp__ai-who{display:block;font-size:.68rem;font-weight:700;color:var(--ofg-dim,#A7A8B0);margin-bottom:6px}
.ofg-supp__ai p{margin:0;font-size:.84rem;line-height:1.6;white-space:pre-wrap}
.ofg-supp__ai small{display:block;margin-top:8px;font-size:.7rem;color:var(--ofg-faint,#74757D)}
.ofg-supp__typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.ofg-supp__typing i{width:6px;height:6px;border-radius:50%;background:var(--ofg-accent);opacity:.5;animation:ofgTyping 1.1s infinite ease-in-out}
.ofg-supp__typing i:nth-child(2){animation-delay:.18s}
.ofg-supp__typing i:nth-child(3){animation-delay:.36s}
@keyframes ofgTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* history detail */
.ofg-supp__dbody{display:flex;flex-direction:column;gap:10px}
.ofg-supp__dbody .ofg-supp__topicpill{align-self:flex-start}
.ofg-supp__banner{padding:11px 14px;font-size:.8rem;line-height:1.55;color:var(--ofg-dim,#A7A8B0)}
.ofg-supp__banner--ok{border-color:rgba(52,211,153,.3);color:var(--ofg-ink,#F4F5F7)}
.ofg-supp__hist{display:flex;flex-direction:column;gap:8px}
.ofg-supp__mine{align-self:flex-end;max-width:88%;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ofg-supp__mine>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;
  border-bottom-right-radius:4px;padding:9px 12px;font-size:.83rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.ofg-supp__mine>span{font-size:.62rem;color:var(--ofg-faint,#74757D);margin-right:3px}
.ofg-supp__sys{align-self:center;font-size:.72rem;color:var(--ofg-faint,#74757D);text-align:center}
.ofg-supp__day{display:flex;align-items:center;gap:10px;margin:4px 0 0;color:var(--ofg-faint,#74757D);
  font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ofg-supp__day::before,.ofg-supp__day::after{content:'';flex:1 1 auto;height:1px;background:rgba(255,255,255,.07)}
/* footer */
.ofg-supp__foot{flex-shrink:0;text-align:center;font-size:.64rem;color:var(--ofg-faint,#74757D);
  padding:8px 10px;border-top:1px solid rgba(255,255,255,.07)}
@media (max-width:560px){
  .ofg-supp{right:12px;bottom:12px}
  .ofg-supp__panel{right:0;bottom:68px;width:calc(100vw - 24px);max-height:calc(100dvh - 94px)}
  /* 16px inputs stop iOS Safari auto-zooming on focus; taller fields for thumbs. */
  .ofg-supp__in,.ofg-supp__ta{font-size:16px;padding:12px 14px}
  .ofg-supp__row{padding:14px;min-height:48px}
}

/* ============================ Trust widgets ============================ */
.ofg-trust-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;
  padding:18px 20px;margin:0;border-top:1px solid var(--ofg-line)}
.ofg-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border-radius:14px;
  background:var(--ofg-glass),rgba(255,255,255,.015);border:1px solid var(--ofg-line);color:var(--ofg-ink);
  text-decoration:none;transition:border-color .2s,transform .2s}
.ofg-badge:hover{border-color:var(--ofg-line2);transform:translateY(-2px)}
.ofg-badge__logo{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center}
.ofg-badge__txt{display:flex;flex-direction:column;line-height:1.15}
.ofg-badge__txt b{font-size:.92rem;font-weight:700}
.ofg-badge__txt span{font-size:.72rem;color:var(--ofg-dim)}
.ofg-stars{display:inline-flex;gap:1px;color:#ffc83d}
.ofg-stars svg{width:15px;height:15px}
.ofg-secure{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ofg-dim)}
.ofg-secure svg{width:16px;height:16px;color:#34d399}

/* testimonials */
.ofg-tm{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.ofg-tm-card{background:var(--ofg-glass),rgba(255,255,255,.012);border:1px solid var(--ofg-line);border-radius:20px;
  padding:22px;display:flex;flex-direction:column;gap:13px;transition:border-color .25s,transform .25s}
.ofg-tm-card:hover{border-color:var(--ofg-line2);transform:translateY(-3px)}
.ofg-tm-card__q{margin:0;font-size:.95rem;line-height:1.62;color:var(--ofg-ink)}
.ofg-tm-card__who{display:flex;align-items:center;gap:11px;margin-top:auto}
.ofg-tm-av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:700;color:#FFFFFF;
  background:linear-gradient(135deg,var(--ofg-accent),var(--ofg-accent2));background-size:cover;background-position:center;font-size:.95rem}
.ofg-tm-card__who b{display:block;font-size:.9rem;font-weight:700}
.ofg-tm-card__who span{display:block;font-size:.76rem;color:var(--ofg-dim)}
.ofg-tm-head{text-align:center;max-width:620px;margin:0 auto 34px}
.ofg-tm-head .ofg-stars{justify-content:center;margin-bottom:12px}
.ofg-tm-head h2{margin:0 0 10px;font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;letter-spacing:-.02em;
  font-family:'Space Grotesk','Inter',sans-serif;
  background:linear-gradient(120deg,var(--ofg-accent),var(--ofg-accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ofg-tm-head p{margin:0;color:var(--ofg-dim);font-size:1rem}
.ofg-tm-section{padding:clamp(48px,8vw,90px) 20px}
.ofg-tm-wrap{max-width:1140px;margin:0 auto}