/* gratora-hq apps (help center, submit form and its dock, account portal and
   its panels, signup) in Stone, and the theme's help article template.
   Each app declares its own tokens on its root, and gratora-hq prints an inline
   brand style after every stylesheet, so each app rule starts with body to win
   without !important. Ink for actions and tiles, indigo for small details. */

/* 0. The base the apps were built on, inside their roots only. Zero or element
   specificity, so every gratora-hq rule still wins. */
:where(.dsupport-help, .dsupport-fe, .dsupport-portal, .gratora-signup, .gratora-statement, .dsupport-gate, .portal-ext) :where(*) {
  margin: 0;
  padding: 0;
}
:where(.dsupport-help, .dsupport-fe, .dsupport-portal, .gratora-signup, .gratora-statement, .dsupport-gate, .portal-ext) :is(h1, h2, h3, h4) {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
:where(.dsupport-help, .dsupport-fe, .dsupport-portal, .gratora-signup, .gratora-statement, .dsupport-gate, .portal-ext) img { display: revert; }
/* Form controls take the app's face, not the browser's */
body :where(.dsupport-help, .dsupport-fe, .dsupport-portal, .gratora-signup, .gratora-statement, .dsupport-gate, .portal-ext) :is(button, input, select, textarea) { font-family: inherit; }

/* 1. Tokens: portal (and the account panels inside it), form, dock, help, gate */
body .dsupport-portal,
body .dsupport-fe,
body .dsupport-help,
body .dsupport-gate {
  --accent: #3b30a8;
  --accent-dark: #3b30a8;
  --accent-soft: #ecebfb;
  --accent-tint: #f7f6f3;
  --ink: #1c1b19;
  --muted: #5e5b55;
  --soft-meta: #77746d;
  --surface: #fff;
  --page-bg: #f7f6f3;
  --hairline: rgba(28, 27, 25, .1);
  --faint-divider: rgba(28, 27, 25, .07);
  --border: rgba(28, 27, 25, .1);
  --border-soft: rgba(28, 27, 25, .07);
  --text: #1c1b19;
  --deep: #1c1b19;
  --deep-2: #2b2a27;
  --display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-1: 0 1px 2px rgba(28, 27, 25, .05);
  --shadow-2: 0 1px 2px rgba(28, 27, 25, .05), 0 12px 24px -12px rgba(28, 27, 25, .1), 0 32px 64px -32px rgba(28, 27, 25, .1);
  --shadow-3: 0 1px 2px rgba(28, 27, 25, .05), 0 6px 12px -6px rgba(28, 27, 25, .1), 0 16px 32px -14px rgba(28, 27, 25, .2);
  --shadow-float: 0 1px 2px rgba(28, 27, 25, .04), 0 12px 24px -14px rgba(28, 27, 25, .1), 0 40px 80px -32px rgba(28, 27, 25, .16);
}
body .portal-ext {
  --gfl-accent: #1c1b19;
  --gfl-accent-dark: #2b2a27;
}
body .gratora-signup,
body .gratora-statement {
  --ink: #1c1b19;
  --action-dark: #2b2a27;
  --muted: #5e5b55;
  --hairline: rgba(28, 27, 25, .14);
  --page-bg: #f7f6f3;
  --red: #b42318;
  --display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-family: var(--body);
}

/* 2. Actions are ink pills, as in Stone. Indigo stays for details only. */
body .dsupport-portal .btn-accent,
body .dsupport-fe .btn-accent,
body .dsupport-portal .new-request,
body .dsupport-portal .settings__save,
body .dsupport-help .empty-cta,
body .dsupport-help .help-cta,
body .gratora-signup .gfs-submit,
body .gratora-statement .gst-submit {
  background: #1c1b19;
  border-color: #1c1b19;
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(28, 27, 25, .24);
}
body .dsupport-portal .btn-accent:hover:not(:disabled),
body .dsupport-fe .btn-accent:hover,
body .dsupport-portal .new-request:hover,
body .dsupport-portal .settings__save:hover:not(:disabled),
body .dsupport-help .empty-cta:hover,
body .dsupport-help .help-cta:hover,
body .gratora-signup .gfs-submit:hover:not(:disabled),
body .gratora-statement .gst-submit:hover:not(:disabled) {
  background: #2b2a27;
  border-color: #2b2a27;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(28, 27, 25, .24), 0 8px 16px -6px rgba(28, 27, 25, .32);
}
body :is(.gratora-signup .gfs-submit, .gratora-statement .gst-submit) { height: 48px; border-radius: 999px; }
body .dsupport-help .art:hover .art-go { background: #1c1b19; }

/* 3. Stone's inline link inside prose; indigo for standalone links */
body .dsupport-help .body a,
body .dsupport-portal .bubble a,
body .gratora-signup a,
body .gratora-statement .gst-note a {
  color: #1c1b19;
  border-bottom: 0;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(28, 27, 25, .28);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body .dsupport-help .body a:hover,
body .dsupport-portal .bubble a:hover,
body .gratora-signup a:hover,
body .gratora-statement .gst-note a:hover { text-decoration-color: currentColor; }
body .dsupport-help .help-track,
body .dsupport-portal .link-error p.link-error__signup a { color: #3b30a8; }

/* 4. Lists keep their markers: replies in the portal, and any list the help
   center's article view does not mark itself (it marks the top level) */
body .dsupport-portal .bubble :is(ul, ol) { margin: 8px 0; padding-left: 1.3em; list-style: revert; }
body .dsupport-help .body :not(.body) > ul { margin: 8px 0; padding-left: 1.3em; list-style: disc; }

/* 5. Help center: no dark bands. Light hero, a tray of white cards, ink tiles.
   The page body already spaces it from the header and the footer. */
body .dsupport-help .dsupport-shell { padding-bottom: 0; }
body .dsupport-help .dsupport-hero {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #1c1b19;
}
body .dsupport-help .dsupport-hero::after,
body .dsupport-help .help-card::after { content: none; }
body .dsupport-help .dsupport-hero h1,
body .dsupport-help .dsupport-article h1 {
  color: #1c1b19;
  font-size: clamp(32px, 18px + 2.2vw, 48px);
  font-weight: 560;
  letter-spacing: -.035em;
}
body .dsupport-help .dsupport-hero .sub { color: #5e5b55; font-size: 18px; }
body .dsupport-help .search-shell {
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .09), 0 1px 2px rgba(28, 27, 25, .05), 0 12px 24px -12px rgba(28, 27, 25, .1);
}
body .dsupport-help .search-shell:focus-within { box-shadow: 0 0 0 2px #3b30a8, 0 12px 24px -12px rgba(28, 27, 25, .1); }
body .dsupport-help .cat-grid {
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  background: linear-gradient(180deg, #f6f5f2, #f2f1ed);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(28, 27, 25, .07), 0 1px 2px rgba(28, 27, 25, .04), 0 12px 24px -14px rgba(28, 27, 25, .1), 0 40px 80px -32px rgba(28, 27, 25, .16);
}
body .dsupport-help .cat {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .07), 0 1px 2px rgba(28, 27, 25, .05), 0 2px 6px -2px rgba(28, 27, 25, .06), 0 14px 24px -14px rgba(28, 27, 25, .14);
}
body .dsupport-help .cat:hover {
  transform: none;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .1), 0 1px 2px rgba(28, 27, 25, .05), 0 6px 12px -6px rgba(28, 27, 25, .1), 0 16px 32px -14px rgba(28, 27, 25, .2);
}
@media (prefers-reduced-motion: no-preference) {
  body .dsupport-help .cat:hover { transform: translateY(-2px); }
}
body .dsupport-help .cat-ic,
body .dsupport-help .help-copy .hc-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #1c1b19;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(28, 27, 25, .24);
}
body .dsupport-help .cat-ic svg,
body .dsupport-help .help-copy .hc-ic svg { width: 18px; height: 18px; }
body .dsupport-help .help-card {
  border: 0;
  background: #fff;
  color: #1c1b19;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .09), 0 1px 2px rgba(28, 27, 25, .05), 0 12px 24px -12px rgba(28, 27, 25, .1), 0 32px 64px -32px rgba(28, 27, 25, .1);
}
body .dsupport-help .help-copy :is(h2, h3) { color: #1c1b19; font-weight: 600; letter-spacing: -.025em; }
body .dsupport-help .help-copy p,
body .dsupport-help .help-note { color: #5e5b55; }
body .dsupport-help .help-cta { height: 48px; padding: 0 24px; }
body .dsupport-help .body { color: #1c1b19; }
body .dsupport-help .art-cat-chip { border-color: rgba(59, 48, 168, .16); }

/* 6. Form: no cream slab behind it and no box of its own inside the page body,
   and its own centered head, spaced from the card like a hero from its page */
body .dsupport-fe:not(.dsupport-dock) { padding: 0; background: transparent; }
body .dsupport-fe .page-head { max-width: 760px; margin: 0 auto; padding-bottom: 56px; text-align: center; }
body .dsupport-fe .page-head h2 { font-size: clamp(32px, 18px + 2.2vw, 48px); font-weight: 560; letter-spacing: -.035em; }
body .dsupport-fe .page-head p.sub { font-size: 18px; }
body .dsupport-fe .success-top { background: #fff; color: #1c1b19; border-bottom: 1px solid rgba(28, 27, 25, .07); }
body .dsupport-fe .success-top::before { content: none; }
body .dsupport-fe .success-top h2 { color: #1c1b19; font-weight: 600; }
body .dsupport-fe .success-top p { color: #5e5b55; }
body .dsupport-fe .success-check { width: 40px; height: 40px; border: 0; border-radius: 10px; background: #1c1b19; }
body .dsupport-fe .success-check svg { width: 22px; height: 22px; color: #fff; }
body .dsupport-fe .success-ref { border: 0; background: #ecebfb; color: #3b30a8; box-shadow: inset 0 0 0 1px rgba(59, 48, 168, .16); }
body .dsupport-fe .success-ref svg { color: currentColor; }

/* 7. Portal odds and ends painted in literal colors */
body .dsupport-portal .avatar { background: #1c1b19; }
body .dsupport-portal .msg--agent .bubble { border-color: rgba(28, 27, 25, .07); }
body .dsupport-portal .link-error {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .09), 0 1px 2px rgba(28, 27, 25, .05), 0 12px 24px -12px rgba(28, 27, 25, .1), 0 32px 64px -32px rgba(28, 27, 25, .1);
}
body .dsupport-portal .link-error p,
body .dsupport-portal .link-error__sent p { color: #5e5b55; }
body .dsupport-portal .acct-head h1 { font-weight: 560; letter-spacing: -.035em; }

/* 8. Rich text editor (form message, portal reply): literal cool greys */
body .gratora-support-rte { border-color: rgba(28, 27, 25, .14); }
body .gratora-support-rte:focus-within { border-color: #3b30a8; box-shadow: 0 0 0 1px #3b30a8; }
body .gratora-support-rte__bar { background: #f7f6f3; border-bottom-color: rgba(28, 27, 25, .08); }
body .gratora-support-rte__btn:hover { background: #ecebfb; color: #3b30a8; }
body .gratora-support-rte__btn.is-active { background: #1c1b19; color: #fff; }

/* 9. Signup card. The page prints the title as its H1, so the card's own
   first heading would repeat it. */
body .gratora-signup :is(.gfs-form, .gfs-done) {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .09), 0 1px 2px rgba(28, 27, 25, .05), 0 12px 24px -12px rgba(28, 27, 25, .1), 0 32px 64px -32px rgba(28, 27, 25, .1);
}
body .gratora-signup h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
body .gratora-signup .gfs-form > h2 { display: none; }

/* 9b. Withdraw and cancel pages, the same card. The page prints the title as
   its H1; the form's own H2 would repeat it, the done card's is new. */
body .gratora-statement .gst-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .09), 0 1px 2px rgba(28, 27, 25, .05), 0 12px 24px -12px rgba(28, 27, 25, .1), 0 32px 64px -32px rgba(28, 27, 25, .1);
}
body .gratora-statement form.gst-card > h2 { display: none; }
body .gratora-statement .gst-done h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; }

/* 9c. Room for the apps before their scripts draw them, so the footer does
   not jump up and back down on a phone */
body .gratora-statement:has(> noscript:only-child) { min-height: 560px; }
body :is(.gratora-support-help, .gratora-support-form):empty { min-height: 100vh; }
body .gratora-support-portal:empty { min-height: 480px; }

/* 10. Help article (single-dsupport_kb.php): the back link above the title
   points left, and screenshots get a hairline edge on the ground */
.kb-back .ico { transform: scaleX(-1); }
.kb-back:hover .ico { transform: scaleX(-1) translateX(3px); }
.kb-back + h1 { margin-top: 4px; }
.kb-article .prose p:has(> img:only-child) { margin-block: 1.5em; }
.kb-article .prose img { box-shadow: 0 0 0 1px var(--line); }

/* 11. Steps, as the page body's and the tray's */
@media (max-width: 880px) {
  body .dsupport-fe .page-head { padding-bottom: 48px; }
}

@media (max-width: 560px) {
  body .dsupport-fe .page-head { padding-bottom: 40px; }
  body .dsupport-help .cat-grid { gap: 8px; padding: 8px; border-radius: 20px; }
}