/* ======================================================================
   Sprizzy help centre — /help/, /help/category/<slug>/, /help/<slug>/

   Ported from the design prototype at
   docs/design/2026-09-18-help-center-redesign/prototype/index.html
   (its CSS, lines 38-558), minus the prototype's own demo chrome
   (.proto-bar*, .proto-jump*), its fake site header and footer, and its
   .screen toggling.

   The prototype's resets sat on body; here they are scoped to .sp-help so
   the theme's real header and footer are untouched on these pages.
   ====================================================================== */

:root{
  --ink:#000000;
  --body-c:#292929;
  --meta:#5f5f5f;
  --rule:#e6e6e6;
  --accent:#0042ff;
  --accent-hover:#032fae;
  --accent-dark:#002ba5;
  --accent-soft:#eef3ff;
  --yellow:#ffd600;
  --ground:#f7f6f6;
  --white:#ffffff;
  --green:#4caf50;
  --green-soft:#eaf7eb;
  --orange:#c76f00;
  --orange-soft:#fff3e0;
  --red:#d33a2c;
  --red-soft:#fdecea;
  --grey-status:#757575;
  --grey-status-soft:#eeeeee;
  --radius:12px;
  --radius-sm:4px;
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --shell:1200px;
  --gutter:clamp(16px,5vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}

.sp-help,.sp-help *,.sp-help *::before,.sp-help *::after{box-sizing:border-box}
.sp-help{
  background:var(--white);
  color:var(--body-c);
  font-family:"Founders Grotesk","Founders Grotesk Fallback",Arial,Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:8px;
}
/* Resets use :where() so they carry no specificity: every component rule below wins
   over them without having to repeat .sp-help in front of each selector. */
.sp-help :where(h1,h2,h3,p,ul,figure){margin:0;padding:0}
.sp-help :where(nav ul){list-style:none}
.sp-help :where(img,svg){display:block;max-width:100%}
.sp-help :where(a){color:var(--accent);text-decoration:none}
.sp-help :where(a:hover){color:var(--accent-dark)}
.sp-help :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.sp-help :where(input,textarea){font:inherit;color:inherit}

.sp-help a:focus-visible,
.sp-help button:focus-visible,
.sp-help input:focus-visible,
.sp-help textarea:focus-visible,
.sp-help [tabindex]:focus-visible,
.sp-sheet a:focus-visible,
.sp-sheet button:focus-visible,
.sp-sheet input:focus-visible,
.sp-sheet textarea:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

.sp-shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.sp-help .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Always-visible footer mailto floor, per design §4.1: never hidden behind the ask flow. */
.sp-mailto-floor{
  display:block;margin-top:10px;font-size:14px;color:var(--accent);
  text-decoration:underline;text-underline-offset:2px;
}

/* ---- /help landing ---- */
.sp-help-header{
  padding:28px var(--gutter) 0;
  max-width:var(--shell);margin:0 auto;
  text-align:left;
}
.sp-help-header h1{
  font-size:clamp(28px,5vw,38px);
  font-weight:600;letter-spacing:-.02em;color:var(--ink);
  margin-bottom:6px;
}
.sp-help-header .sp-sub{
  font-size:15px;color:var(--meta);max-width:520px;
}

/* The prototype centred the box in the viewport, which at desktop widths left it
   floating away from the left-aligned heading above it. It sits in the same shell as
   everything else here and caps its own width instead, so the page reads as one column.
   Identical at phone widths, where 600px is wider than the screen either way. */
.sp-ask-wrap{
  max-width:var(--shell);
  padding:20px var(--gutter) 0;
  margin:0 auto;
}
.sp-ask-wrap--sm{padding-top:14px}
.sp-ask-box{
  display:flex;flex-direction:column;gap:10px;
  max-width:600px;
}
.sp-ask-row{
  display:flex;flex-direction:column;gap:10px;
}
@media (min-width:600px){
  .sp-ask-row{flex-direction:row;align-items:stretch}
}
.sp-ask-input{
  flex:1 1 auto;
  width:100%;
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:16px;
  color:var(--ink);
  transition:box-shadow .15s;
}
.sp-ask-input::placeholder{color:#8b8b8b}
.sp-ask-input:focus{
  outline:none;
  box-shadow:0 0 0 2px var(--accent);
  border-color:var(--accent);
}
.sp-ask-btn{
  flex:none;
  width:100%;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  font-size:16px;
  border-radius:var(--radius-sm);
  padding:14px 22px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s, transform .1s;
}
@media (min-width:600px){ .sp-ask-btn{width:auto} }
.sp-ask-btn:hover:not(:disabled){background:var(--accent-hover)}
.sp-ask-btn:active:not(:disabled){transform:translateY(1px)}
.sp-ask-btn:disabled{opacity:.45;cursor:default}
.sp-ask-btn .spinner{display:none}
.sp-ask-btn.is-loading .spinner{display:inline-block}
.sp-ask-btn.is-loading .btn-label{display:none}
.spinner{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.sp-ask-helper{font-size:13px;color:var(--meta);margin-top:2px}

/* Popular question chips */
/* A horizontal scroller, per design §9, so three chips never push the category tiles
   below the fold on a phone. The scrollbar is hidden, so the row has to say for itself
   that there is more to the right: js/help.js adds .is-overflowing while it can scroll
   and .is-at-end once it cannot, and the fade is the only affordance. Without it the
   third chip is simply clipped mid-word by the viewport edge and reads as a bug. */
.sp-chips-row{
  display:flex;gap:8px;overflow-x:auto;padding:16px var(--gutter) 2px;
  max-width:var(--shell);margin:0 auto;
  scrollbar-width:none;
  scroll-padding-inline:var(--gutter);
}
.sp-chips-row::-webkit-scrollbar{display:none}
.sp-chips-row::after{content:'';flex:none;width:calc(var(--gutter) - 8px)}
.sp-chips-row.is-overflowing{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent 100%);
}
.sp-chips-row.is-overflowing.is-at-end{-webkit-mask-image:none;mask-image:none}
.sp-chip{
  flex:none;
  border:1px solid var(--accent);
  color:var(--accent);
  font-size:14px;font-weight:500;
  border-radius:999px;
  padding:9px 15px;
  white-space:nowrap;
  transition:background .15s, color .15s;
}
.sp-chip:hover:not(:disabled){background:var(--accent);color:#fff}
.sp-chip:disabled{opacity:.4}

/* Category tiles */
/* The design's grid was 2/3/6 columns, sized for a tile of a name and a count. With the
   category's own line on the tile, six across at 1280 wraps every description to three lines
   of small type and one across at 390 reads as a list instead of a wall. Widened one step at
   every breakpoint so the line lands on one or two lines at every width. */
.sp-cats{
  display:grid;grid-template-columns:1fr;gap:10px;
  padding:18px var(--gutter) 0;
  max-width:var(--shell);margin:0 auto;
}
@media (min-width:560px){ .sp-cats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .sp-cats{grid-template-columns:repeat(3,1fr)} }
.sp-cat-tile{
  display:block;
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:16px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.sp-cat-tile:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.sp-cat-tile__name{display:block;font-weight:600;color:var(--ink);font-size:15px;margin-bottom:3px}
/* The one line that tells a customer whether their question is in this category. It is the copy
   the design wrote for these tiles; the archive page shows the same line as its sub-head. */
.sp-cat-tile__desc{display:block;font-size:13px;line-height:1.4;color:var(--body-c);margin-bottom:6px}
.sp-cat-tile__count{display:block;font-size:13px;color:var(--meta)}

.sp-help-footer{
  max-width:var(--shell);margin:0 auto;
  padding:30px var(--gutter) 10px;
}

/* The theme's default gap above the site footer is 120px (style.css .site-footer), and every
   page template that wants less overrides it by body class. The help surfaces are short
   utility pages: on /help/ that default left an empty band as tall as the content above it.
   A general sibling selector, because the article page has the sticky bar between the two. */
.sp-help ~ .site-footer{margin-top:56px}

/* ---- Answer panel ----
   The composed answer, its source chips and the campaign status card belong to the
   ask endpoint, which is plan 6. The box ships here in search mode (data-mode="search"),
   so these rules are inert for now and are kept as ported so plan 6 changes one
   attribute and a fetch, not the stylesheet. */
.sp-answer{margin-top:16px}
.sp-answer:empty{margin-top:0}

.sp-skel{
  border:1px solid var(--rule);border-radius:var(--radius);
  padding:18px;background:var(--white);
}
.sp-skel__bar{height:12px;border-radius:6px;background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
.sp-skel__bar + .sp-skel__bar{margin-top:9px}
.sp-skel__bar.w1{width:92%}
.sp-skel__bar.w2{width:78%}
.sp-skel__bar.w3{width:55%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sp-skel__label{margin-top:12px;font-size:13px;color:var(--meta);font-weight:500}

.sp-answer-card{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:18px;
  background:var(--white);
}
.sp-answer-card__text{font-size:16px;line-height:1.55;color:var(--body-c)}
.sp-answer-card__text + .sp-answer-card__text{margin-top:8px}

.sp-sources{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sp-sources__label{font-size:12px;color:var(--meta);width:100%;font-weight:600;letter-spacing:.02em}
.sp-source-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ground);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:7px 13px;
  font-size:13px;color:var(--ink);
  transition:background .15s;
}
.sp-source-chip:hover{background:#eee;color:var(--ink);text-decoration:underline}
.sp-source-chip--dominant{
  background:var(--accent-soft);border-color:var(--accent);
  font-weight:600;font-size:14px;padding:9px 15px;
}

.sp-signin-line{
  margin-top:14px;font-size:14px;color:var(--body-c);
  background:var(--ground);border-radius:var(--radius-sm);padding:10px 12px;
}
.sp-signin-line a{font-weight:600}

.sp-still-need-help{margin-top:16px}
.sp-help-btn{
  background:var(--accent);color:#fff;font-weight:600;font-size:15px;
  border-radius:var(--radius-sm);
  padding:12px 18px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .15s, transform .1s;
}
.sp-help-btn:hover{background:var(--accent-hover);color:#fff}
.sp-help-btn:active{transform:translateY(1px)}

/* Guardrail card (plan 6) */
.sp-guardrail{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:18px;
  background:var(--white);
}
.sp-guardrail__title{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px}
.sp-guardrail__body{font-size:15px;color:var(--body-c);line-height:1.5}

/* Zero match / error */
.sp-plain-card{
  border:1px solid var(--rule);border-radius:var(--radius);
  padding:18px;background:var(--white);
}
.sp-plain-card__title{font-weight:600;color:var(--ink);font-size:16px;margin-bottom:4px}
.sp-plain-card__body{font-size:15px;color:var(--body-c)}
.sp-retry-btn{
  margin-top:12px;
  border:1px solid var(--accent);color:var(--accent);
  font-weight:600;font-size:14px;border-radius:var(--radius-sm);
  padding:9px 14px;
}
.sp-retry-btn:hover{background:var(--accent-soft)}

/* Campaign status card(s) (plan 6) */
.sp-campaigns{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.sp-campaign-card{
  border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:13px 14px;
  display:flex;flex-direction:column;gap:6px;
}
.sp-campaign-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sp-campaign-card__name{font-weight:600;color:var(--ink);font-size:15px}
.sp-status-chip{
  font-size:12px;font-weight:700;letter-spacing:.01em;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.sp-status-chip--green{background:var(--green-soft);color:#2e7d32}
.sp-status-chip--orange{background:var(--orange-soft);color:var(--orange)}
.sp-status-chip--red{background:var(--red-soft);color:var(--red)}
.sp-status-chip--grey{background:var(--grey-status-soft);color:var(--grey-status)}
.sp-campaign-card__line{font-size:14px;color:var(--body-c);line-height:1.45}
.sp-campaign-card__link{font-size:13px;font-weight:600;color:var(--accent)}
.sp-campaign-card__link:hover{text-decoration:underline}
.sp-see-all{font-size:14px;font-weight:600;color:var(--accent);margin-top:2px}
.sp-see-all:hover{text-decoration:underline}

/* ---- Category archive ---- */
.sp-cat-header{max-width:var(--shell);margin:0 auto;padding:26px var(--gutter) 0}
.sp-breadcrumbs{font-size:13px;color:var(--meta);margin-bottom:10px}
.sp-breadcrumbs a{color:var(--meta);text-decoration:underline;text-underline-offset:2px}
.sp-breadcrumbs a:hover{color:var(--accent)}
.sp-cat-header h1{font-size:clamp(24px,4vw,32px);font-weight:600;color:var(--ink);letter-spacing:-.02em}
.sp-cat-header .sp-sub{font-size:15px;color:var(--meta);margin-top:6px;max-width:560px}

.sp-article-list{
  max-width:var(--shell);margin:0 auto;
  padding:22px var(--gutter) 10px;
  display:flex;flex-direction:column;gap:10px;
}
.sp-article-card{
  display:block;
  border:1px solid var(--rule);border-radius:var(--radius);
  padding:15px 16px;
  transition:border-color .15s;
}
.sp-article-card:hover{border-color:var(--accent)}
.sp-article-card__title{display:block;font-weight:600;color:var(--ink);font-size:15.5px;margin-bottom:4px}
.sp-article-card__summary{display:block;font-size:14px;color:var(--meta);line-height:1.45}
.sp-article-card__cat{display:block;font-size:12px;color:var(--meta);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}

/* ---- Article page ---- */
.sp-article{max-width:680px;margin:0 auto;padding:26px var(--gutter) 6px}
.sp-article h1{font-size:clamp(24px,4vw,32px);font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:10px 0 18px}
.sp-article__body h2{font-size:19px;font-weight:600;color:var(--ink);margin:22px 0 8px}
.sp-article__body h2:first-child{margin-top:0}
.sp-article__body p{font-size:16px;line-height:1.65;color:var(--body-c);margin-bottom:12px}
.sp-article__body strong{color:var(--ink);font-weight:600}
.sp-article__body ol,.sp-article__body ul{margin:0 0 12px 20px;list-style:revert;padding-left:4px}
.sp-article__body li{font-size:16px;line-height:1.6;color:var(--body-c);margin-bottom:4px}
.sp-article__body li > ul{margin-top:6px;margin-bottom:2px}
.sp-article__body a{text-decoration:underline;text-underline-offset:2px}
.sp-article__body code{background:var(--ground);border-radius:3px;padding:1px 5px;font-size:15px}
.sp-article__ask-label{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.sp-article__ask{max-width:var(--shell);margin:34px auto 0;padding:20px var(--gutter) 90px;border-top:1px solid var(--rule)}
@media (min-width:900px){ .sp-article__ask{padding-bottom:30px} }

/* Persistent mobile "Still need help" bar — the one deliberate sticky
   element in this design, per design §9: always visible reading a long article. */
.sp-sticky-help{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--white);
  border-top:1px solid var(--rule);
  box-shadow:0 -6px 18px rgba(0,0,0,.06);
  padding:10px var(--gutter);
  display:flex;justify-content:center;
}
.sp-sticky-help[hidden]{display:none}
.sp-sticky-help .sp-help-btn{width:100%;max-width:420px;justify-content:center}
@media (min-width:900px){ .sp-sticky-help{display:none} }

/* ---- Ticket sheet ---- */
.sp-overlay{
  position:fixed;inset:0;z-index:700;
  background:rgba(10,10,12,.42);
  display:flex;align-items:flex-end;justify-content:center;
  font-family:"Founders Grotesk","Founders Grotesk Fallback",Arial,Roboto,sans-serif;
}
.sp-overlay[hidden]{display:none}
@media (min-width:760px){ .sp-overlay{align-items:center} }
.sp-sheet{
  width:100%;max-width:520px;
  background:var(--white);
  border-radius:16px 16px 0 0;
  box-shadow:var(--shadow);
  max-height:92vh;overflow-y:auto;
  padding:22px var(--gutter) 26px;
  animation:sheetUp .22s var(--ease);
}
.sp-sheet *,.sp-sheet *::before,.sp-sheet *::after{box-sizing:border-box}
:where(.sp-sheet h2,.sp-sheet p){margin:0}
:where(.sp-sheet button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
@media (min-width:760px){ .sp-sheet{border-radius:16px} }
@keyframes sheetUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.sp-sheet__close{
  float:right;font-size:22px;line-height:1;color:var(--meta);
  padding:4px;margin:-4px -4px 0 0;
}
.sp-sheet h2{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:6px}
.sp-sheet .sp-sub{font-size:14px;color:var(--meta);margin-bottom:18px}
.sp-field{margin-bottom:14px}
.sp-field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
/* 16px is a hard floor, not a preference: iOS Safari zooms the whole page when a focused input's
   font-size is under 16px, and it does not zoom back out. At 15px, tapping "What do you need help
   with?" threw the sheet off screen mid-sentence. The search input was already 16px, which is why
   only this sheet did it. */
.sp-field input,.sp-field textarea{
  width:100%;border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:11px 12px;font-size:16px;background:var(--white);color:var(--ink);
}
.sp-field input:focus,.sp-field textarea:focus{outline:none;box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
.sp-field textarea{resize:vertical;min-height:70px}
.sp-field input[readonly]{background:var(--ground);color:var(--body-c)}
.sp-field__hint{font-size:12px;color:#9a9a9a;margin-top:4px}
.sp-field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sp-sheet .sp-help-btn{width:100%;justify-content:center;margin-top:4px}
.sp-sheet__error{
  margin-top:12px;font-size:14px;color:var(--red);
  background:var(--red-soft);border-radius:var(--radius-sm);padding:10px 12px;
}
.sp-sheet__error[hidden]{display:none}

.sp-confirm{text-align:left}
.sp-confirm__title{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px}
.sp-confirm__body{font-size:15px;color:var(--body-c);line-height:1.55;margin-bottom:18px}
.sp-confirm .sp-help-btn{width:100%;justify-content:center;background:var(--ground);color:var(--ink)}
.sp-confirm .sp-help-btn:hover{background:#eee}

/* ---- Toast ---- */
.sp-toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);
  background:#131417;color:#fff;font-size:13px;
  padding:10px 16px;border-radius:8px;
  max-width:88vw;text-align:center;z-index:900;
  opacity:0;transition:opacity .18s, transform .18s;
  pointer-events:none;
}
.sp-toast.is-shown{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .sp-sheet{animation:none}
  .spinner,.sp-skel__bar{animation:none}
}