/* ═══════════════════════════════════════════════════════════════
   Persona Support Section Styles
   Used by: support, support-article, support-category, support-contact
   Depends on: persona-tokens.css, persona-styles.css
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-deep);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}
:root{
  /* Support pages use a slightly different bg/border shade than marketing —
     everything else (purple, orange, teal, text, radii, fonts, --sw, --tw)
     comes from persona-styles.css. Edit there for anything not listed here. */
  --bg:var(--bg-deep);
  --bd:rgba(0,0,0,.08);--bds:rgba(0,0,0,.05);
  --border:rgba(0,0,0,.08);--border-soft:rgba(0,0,0,.05);
}
/* ─── Site nav ─────────────────────────────────────── */
.snav{position:sticky;top:0;z-index:100;display:flex;align-items:center;
  height:58px;padding:0 28px;gap:20px;
  background:rgba(var(--white-rgb),.94);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border)}
.nlogo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-size:14px;font-weight:700;margin-inline-end:auto;flex-shrink:0}
.nmark{width:28px;height:28px;border-radius:var(--radius-sm);
  background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nmark svg{width:14px;height:14px}
.nlink{font-size:13px;font-weight:500;color:var(--text-faint);white-space:nowrap;transition:color .15s}
.nlink:hover{color:var(--text)}
.nlink.active{color:var(--purple);font-weight:600}
.nsep{width:1px;height:16px;background:var(--border);flex-shrink:0}
.nghost{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid var(--border-strong);background:transparent;color:var(--text-muted)}
.nghost:hover{background:rgba(var(--black-rgb),.04);color:var(--text)}
.ncta{font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;
  background:var(--grad-purple);color:#fff;border:none}
.ncta:hover{opacity:.9;transform:translateY(-1px)}



.nburger{display:none;width:32px;height:32px;border-radius:50%;
  align-items:center;justify-content:center;color:var(--text-faint);
  background:transparent;border:none}
.nburger svg{width:16px;height:16px}
.mdrawer{display:none;position:fixed;inset:0;z-index:200;
  background:rgba(var(--black-rgb),.4);backdrop-filter:blur(3px)}
.mdrawer.open{display:block}
.mpanel{position:absolute;top:0;right:0;bottom:0;width:min(270px,82vw);
  background:var(--bg-card);border-inline-start:1px solid var(--border);
  padding:20px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mclose{width:28px;height:28px;border-radius:50%;background:rgba(var(--black-rgb),.06);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);border:none;cursor:pointer}
.mclose svg{width:12px;height:12px}
.mlink{display:block;padding:9px 10px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:500;color:var(--text-muted)}
.mlink:hover{background:rgba(var(--black-rgb),.04);color:var(--text)}
.mcta{display:flex;align-items:center;justify-content:center;
  padding:11px;margin-top:8px;border-radius:999px;
  background:var(--grad-purple);color:#fff;
  font-weight:700;font-size:14px}
/* ─── KB top bar (breadcrumb only — no search) ─────── */
.kbtop{display:none}
.kbtop-in{display:flex;align-items:center;gap:7px;height:44px}
.kbcrumb{display:flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--text-faint);overflow:hidden;flex-wrap:nowrap}
.kbcrumb a{color:var(--text-faint);white-space:nowrap}
.kbcrumb a:hover{color:var(--purple)}
.kbcrumb svg{width:11px;height:11px;flex-shrink:0}
.kbcrumb .cur{color:var(--text-muted);font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* ─── Full-width page shell ─────────────────────────── */
.kbpage{display:flex;min-height:calc(100vh - 102px)}
/* ─── Left sidebar ──────────────────────────────────── */
.kbsidebar{width:var(--sw);flex-shrink:0;background:var(--bg-card);
  border-inline-end:1px solid var(--border);
  padding:16px 0;position:sticky;top:102px;
  height:calc(100vh - 102px);overflow-y:auto}
.sbtitle{font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);padding:8px 18px 5px}
.sblink{display:flex;align-items:center;gap:9px;padding:9px 18px;
  font-size:13px;color:var(--text-muted);transition:background .12s,color .12s}
.sblink:hover{background:var(--purple-dim);color:var(--text)}
.sblink.active{background:var(--purple-dim);color:var(--purple);font-weight:600}
.sblink svg{width:14px;height:14px;flex-shrink:0}
.sbdiv{height:1px;background:var(--border-soft);margin:8px 0}
/* ─── Main content ──────────────────────────────────── */
.kbmain{flex:1;min-width:0;padding:36px 44px 72px}
/* ─── Right TOC sidebar ─────────────────────────────── */
.kbtoc{width:var(--tw);flex-shrink:0;
  padding:36px 22px 36px 0;position:sticky;
  top:102px;align-self:flex-start;
  height:calc(100vh - 102px);overflow-y:auto}
.toctitle{font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.toclink{display:block;padding:5px 10px;border-radius:6px;
  font-size:12.5px;color:var(--text-faint);
  border-inline-start:2px solid transparent;line-height:1.4}
.toclink:hover{color:var(--text);border-color:var(--purple-bright)}
.toclink.active{color:var(--purple);border-color:var(--purple);font-weight:600}
.tocsep{margin:10px 0;border:none;border-top:1px solid var(--border-soft)}
/* ─── Cards ─────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:22px;box-shadow:var(--card-shadow)}
/* ─── Prose ─────────────────────────────────────────── */
.prose h2{font-family:var(--font-display);font-size:17px;font-weight:700;
  margin:34px 0 11px;letter-spacing:-.2px;color:var(--text)}
.prose h3{font-size:14.5px;font-weight:700;margin:22px 0 7px;color:var(--text)}
.prose p{font-size:14.5px;color:var(--text-muted);line-height:1.8;margin-bottom:13px}
.prose ul,.prose ol{padding-inline-start:20px;margin-bottom:14px}
.prose li{font-size:14.5px;color:var(--text-muted);line-height:1.8;margin-bottom:5px}
/* .prose a — see persona-styles.css: it IS the .link component now (states included) */
.prose strong{color:var(--text);font-weight:600}
/* ─── Note boxes ────────────────────────────────────── */
.note{display:flex;gap:10px;padding:13px 15px;border-radius:var(--radius-sm);
  margin:16px 0;font-size:13.5px;line-height:1.6}
.note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.note-i{background:#eef2ff;border:1px solid #c7d2fe}
.note-i svg{color:#4f46e5}
.note-t{background:var(--teal-dim);border:1px solid rgba(var(--teal-rgb),.2)}
.note-t svg{color:var(--teal)}
.note-w{background:#fffbeb;border:1px solid #fde68a}
.note-w svg{color:var(--yellow)}
/* ─── Step blocks ───────────────────────────────────── */
.steps{display:flex;flex-direction:column;gap:18px;margin:18px 0}
.step{display:flex;gap:14px}
.stepn{width:30px;height:30px;border-radius:50%;
  background:var(--purple-dim);color:var(--purple);font-family:var(--font-mono);
  font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.stepc h3{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--text)}
.stepc p{font-size:13.5px;color:var(--text-muted);line-height:1.7;margin:0}
/* ─── Feedback bar ───────────────────────────────────── */
.fbar{display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--bg-card);margin-top:32px}
.fbar-lbl{font-size:13.5px;font-weight:600;color:var(--text-muted);flex:1}
.fbtn{display:flex;align-items:center;gap:5px;padding:7px 13px;
  border-radius:999px;border:1px solid var(--border-strong);
  font-size:13px;font-weight:600;color:var(--text-muted);
  transition:all .15s;cursor:pointer;background:transparent}
.fbtn:hover,.fbtn.active{background:var(--purple-dim);
  border-color:rgba(var(--purple-rgb),.3);color:var(--purple)}
.fbtn svg{width:13px;height:13px}
/* ─── Homepage hero ─────────────────────────────────── */
.kbhero{padding:48px 40px 36px;text-align:center;
  background:linear-gradient(180deg,var(--purple-dim) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border)}
.kbhero h1{font-family:var(--font-display);
  font-size:clamp(20px,2.8vw,30px);font-weight:800;
  letter-spacing:-.4px;margin-bottom:8px;color:var(--text)}
.kbhero p{font-size:15px;color:var(--text-muted);margin-bottom:22px}
.hsearch-wrap{position:relative;max-width:540px;margin:0 auto 18px}
.hsearch{width:100%;padding:13px 18px 13px 46px;border-radius:999px;
  border:1px solid rgba(var(--purple-rgb),.2);background:var(--bg-card);
  font-size:14.5px;color:var(--text);font-family:var(--font-body);
  box-shadow:0 4px 18px -6px rgba(var(--purple-rgb),.16)}
.hsearch:focus{border-color:rgba(var(--purple-rgb),.5)}
.hsearch-ico{position:absolute;inset-inline-start:15px;top:50%;
  transform:translateY(-50%);color:var(--text-faint);pointer-events:none}
.hsearch-ico svg{width:17px;height:17px}
.qtags{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.qtag{font-size:12px;color:var(--purple);background:var(--purple-dim);
  padding:4px 11px;border-radius:999px;cursor:pointer;transition:background .15s}
.qtag:hover{background:#e0d7ff}
/* ─── Category grid ─────────────────────────────────── */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:40px}
.catcard{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  padding:18px 16px;display:flex;gap:12px;align-items:flex-start;
  transition:border-color .15s,box-shadow .15s;cursor:pointer}
.catcard:hover{border-color:var(--purple-bright);
  box-shadow:0 4px 14px -6px rgba(var(--purple-rgb),.14)}
.catico{width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.catico svg{width:18px;height:18px}
.catname{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.catdesc{font-size:12px;color:var(--text-faint);line-height:1.5}
.catcnt{font-size:11px;color:var(--text-faint);margin-top:4px}
/* ─── Popular articles grid ─────────────────────────── */
.popgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.popcard{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  padding:14px 16px;display:flex;gap:10px;transition:border-color .15s}
.popcard:hover{border-color:var(--purple-bright)}
.popico{width:32px;height:32px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.popico svg{width:15px;height:15px}
.poptitle{font-size:13px;font-weight:600;color:var(--text);
  margin-bottom:2px;line-height:1.35}
.popmeta{font-size:11.5px;color:var(--text-faint)}
/* ─── Article list rows ─────────────────────────────── */
.artlist{display:flex;flex-direction:column;gap:2px}
.artrow{background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  transition:background .12s}
.artrow:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}
.artrow:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}
.artrow:not(:first-child){border-top:none}
.artrow:hover{background:var(--bg-deep)}
.artcat{font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;width:88px;flex-shrink:0;color:var(--text-faint)}
.artttl{font-size:13.5px;font-weight:500;color:var(--text);flex:1}
.artdur{font-size:11.5px;color:var(--text-faint);white-space:nowrap}
.artrow svg{width:13px;height:13px;color:var(--text-faint);flex-shrink:0}
/* ─── Category page ─────────────────────────────────── */
.cathero{padding:24px 40px 20px;background:var(--bg-card);border-bottom:1px solid var(--border)}
.cathero-in{display:flex;align-items:center;gap:14px}
.cathero-ico{width:50px;height:50px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cathero-ico svg{width:24px;height:24px}
.catartlist{display:flex;flex-direction:column;gap:2px}
.catartrow{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:15px 18px;display:flex;align-items:center;gap:12px;
  transition:background .12s,border-color .15s}
.catartrow:hover{background:var(--bg-deep);border-color:rgba(var(--purple-rgb),.2)}
.catartbody{flex:1;min-width:0}
.catarttitle{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.catartdesc{font-size:12px;color:var(--text-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catartmeta{font-size:11px;color:var(--text-faint);flex-shrink:0;text-align:end}
/* ─── Contact form ───────────────────────────────────── */
.ctform{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:28px;box-shadow:var(--card-shadow);max-width:660px}
.fg{margin-bottom:16px}
.flbl{display:block;font-size:12.5px;font-weight:600;
  color:var(--text-muted);margin-bottom:5px;letter-spacing:.02em}
.finput,.ftarea,.fsel{width:100%;padding:10px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text);
  font-size:13.5px;font-family:var(--font-body)}
.finput::placeholder,.ftarea::placeholder{color:var(--text-faint)}
.finput:focus,.ftarea:focus,.fsel:focus{border-color:var(--purple);border-width:1.5px;outline:none}
.ftarea{min-height:120px;resize:vertical;line-height:1.6}
.fsel{appearance:none;cursor:pointer}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.popt{padding:10px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:var(--bg-card);text-align:center;cursor:pointer;transition:all .15s}
.popt.sel{border-color:var(--purple);background:var(--purple-dim)}
.popt h5{font-size:12.5px;font-weight:700;margin-bottom:2px}
.popt p{font-size:11px;color:var(--text-faint);line-height:1.3}
.upzone{border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  padding:22px;text-align:center;cursor:pointer;transition:border-color .15s}
.upzone:hover{border-color:var(--purple)}
.upzone svg{width:22px;height:22px;color:var(--text-faint);margin:0 auto 7px}
.upzone p{font-size:12.5px;color:var(--text-faint)}
.subbtn{width:100%;padding:13px;border-radius:999px;
  background:linear-gradient(135deg,var(--purple),var(--purple));
  color:#fff;font-size:15px;font-weight:700;border:none;
  cursor:pointer;margin-top:4px}
.subbtn:hover{opacity:.92;transform:translateY(-1px)}
.fsucc{display:none;text-align:center;padding:44px 24px}
.succico{width:56px;height:56px;border-radius:50%;
  background:rgba(var(--teal-rgb),.12);display:flex;align-items:center;
  justify-content:center;margin:0 auto 16px}
.succico svg{width:26px;height:26px;color:var(--teal)}
/* ─── Status strip ───────────────────────────────────── */
.status{display:flex;align-items:center;gap:7px;padding:6px 13px;
  border-radius:999px;background:var(--teal-dim);
  border:1px solid rgba(var(--teal-rgb),.2);font-size:12px;font-weight:600;
  color:var(--teal);margin:0 auto 22px;width:fit-content}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--teal);
  animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* WCAG 2.2.2: this pulses for as long as the status strip is on screen —
   an OS-level reduce-motion preference is the standard way to opt out. */
@media (prefers-reduced-motion: reduce){ .sdot{ animation:none !important; } }
/* ─── Section labels ────────────────────────────────── */
.slbl{font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
/* ─── RT grid ───────────────────────────────────────── */
.rtgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rtitem{padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg-card);text-align:center}
.rtlbl{font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:3px}
.rtval{font-size:13.5px;font-weight:700;color:var(--text)}
/* ─── Footer ─────────────────────────────────────────── */
/* ─── Reveal ─────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.rv.vis{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
/* ─── Responsive ─────────────────────────────────────── */
@media(max-width:1100px){.kbtoc{display:none}}
@media(max-width:900px){
  .kbsidebar{display:none}
  .kbmain{padding:28px 28px 60px}
  .catgrid{grid-template-columns:1fr 1fr}
  .popgrid{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
}
@media(max-width:600px){
  .snav{padding:0 14px;gap:8px}
  .nlink,.nsep,.nghost{display:none}
  .nburger{display:flex}
  .kbtop{padding:0 14px}
  .kbhero{padding:32px 14px 26px}
  .kbmain{padding:20px 14px 52px}
  .catgrid,.popgrid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .rtgrid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}



  .lang-dd{padding:5px 26px 5px 10px;border-radius:7px;
    border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text);
    font-size:12.5px;font-weight:600;font-family:var(--font-body);
    cursor:pointer;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239088a8' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center;}
  .lang-dd:focus{border-color:rgba(var(--purple-rgb),.4);}

  /* ── General cleanup ── */
  body{background:var(--bg-card);color:var(--text);}
  .kbhero{background:linear-gradient(180deg,var(--bg-tint) 0%,#ffffff 100%);}
  .kbtop{background:var(--bg-card);}
  .snav{background:rgba(var(--white-rgb),.95);}
  .kbsidebar{background:var(--bg-card);border-inline-end-color:rgba(var(--black-rgb),.08);}
  .sblink{color:var(--text-muted);}
  .sblink:hover{background:var(--bg-tint);color:var(--text);}
  .sblink.active{background:#ede9ff;color:var(--purple);}
  .cartrow,
  .art-row,
  .artrow{background:var(--bg-card);}
  /* Cleaner TOC */
  .kbtoc{padding-top:32px;padding-inline-end:20px;}
  /* Status note in contact form */
  .statnote{display:flex;align-items:center;gap:8px;padding:11px 14px;
    border-radius:var(--radius-sm);background:#e6faf7;border:1px solid rgba(var(--teal-rgb),.2);
    font-size:13px;color:var(--teal);margin-bottom:20px;font-weight:500;}
  .statnote svg{width:14px;height:14px;color:var(--teal);flex-shrink:0;}
  /* Upload zone */
  .upzone{border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
    padding:20px;text-align:center;cursor:pointer;transition:border-color .15s;}
  .upzone:hover{border-color:var(--purple);}
  .upzone svg{width:20px;height:20px;color:var(--text-faint);margin:0 auto 7px;display:block;}
  .upzone p{font-size:12.5px;color:var(--text-faint);}
  /* Char counter */
  .ccount{font-size:11.5px;color:var(--text-faint);text-align:end;margin-top:4px;}
  /* Success state */
  .fsucc{display:none;text-align:center;padding:44px 24px;}
  .succico{width:52px;height:52px;border-radius:50%;background:rgba(var(--teal-rgb),.12);
    display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
  .succico svg{width:24px;height:24px;color:var(--teal);}


  /* ── Compact footer ── */


  /* ── Real logo image ── */
  .brand-mark-img,
  .nmark-img {
    background: none !important;
    padding: 0 !important;
  }
  .brand-mark-img img,
  .nmark-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
  }

  /* ── Canonical footer (matches marketing pages) ── */
  .site-footer{border-top:1px solid var(--border);padding:52px 40px 36px;background:rgba(var(--white-rgb),.01)}
  .footer-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
  .footer-brand-col{}
  .footer-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display,'Unbounded',sans-serif);font-size:13px;font-weight:700;margin-bottom:10px}
  .footer-tagline{font-size:13px;color:var(--text-faint);line-height:1.6;max-width:220px}
  .footer-lang{margin-top:14px}
  .footer-lang-dd{padding:7px 28px 7px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239088a8' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;flex-shrink:0}
  .fcol-title{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
  .footer-col a{display:block;font-size:13px;color:var(--text-faint);margin-bottom:9px}
  .footer-col a:hover{color:var(--text-muted)}
  .footer-bottom{width:100%;max-width:1100px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border-soft);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
  .footer-copy{font-size:12px;color:var(--text-muted);flex-shrink:0}
  .footer-legal{display:flex;flex-wrap:wrap;gap:18px}
  .footer-legal a{font-size:12px;color:var(--text-faint)}
  .footer-legal a:hover{color:var(--text-muted)}
  .nav-mark{width:32px;height:32px;border-radius:9px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  .nav-mark-img{background:none !important;padding:0 !important}
  .nav-mark-img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
  @media(max-width:960px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.footer-brand-col{grid-column:1/-1}}
  @media(max-width:600px){.site-footer{padding:36px 20px 28px}.footer-grid{grid-template-columns:1fr;gap:22px}}

/* ── .fbtn — promoted from support, support-article, support-category, support-contact (4 pages, byte-identical on each). Lives here, not in the shared layer:
   it is used only on this surface. ── */
.fbtn{ display:flex;align-items:center;gap:5px;padding:7px 13px; border-radius:999px;border:1px solid var(--border-strong); font-size:13px;font-weight:600;color:var(--muted); transition:all .15s;cursor:pointer;background:transparent }
.fbtn:hover,.fbtn.active{ background:var(--pl); border-color:var(--purple-bright);color:var(--purple) }

/* ── .qtag — promoted from support, support-article, support-category, support-contact (4 pages, byte-identical on each). Lives here, not in the shared layer:
   it is used only on this surface. ── */
.qtag{ font-size:12px;color:var(--purple);background:var(--pl); padding:4px 11px;border-radius:999px;cursor:pointer;transition:background .15s }