/* ══════════════════════════════════════════════════════════════════════════
   Circl Support
   ──────────────────────────────────────────────────────────────────────────
   Laid out the way large help centres are: a hero that exists to hold the
   search box, a grid of category cards, then article pages with the rest of
   that category alongside. People arrive with a question, so search leads and
   browsing follows.

   Light, while the app is dark. Long-form reading is easier on a light ground
   and most dark-product companies ship light docs for the same reason. The
   brand carries through the typefaces, the green and the wordmark.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'ClashDisplay';src:url('fonts/ClashDisplay-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'ClashDisplay';src:url('fonts/ClashDisplay-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'ClashDisplay';src:url('fonts/ClashDisplay-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonts/Nunito-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonts/Nunito-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Nunito';src:url('fonts/Nunito-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  /* Deeper than the app's #5BC174, which is tuned for a dark ground and fails
     contrast on white at body size. */
  --green:#3E9A52;
  --green-dark:#2F7A40;
  --hero:#0F1A13;
  --ink:#141D17;
  --body:#3E4A43;
  --dim:#6B7A71;
  --line:#E5EAE6;
  --bg:#FFFFFF;
  --sub:#F6F9F7;
  --card:#FFFFFF;
  --top-bg:rgba(255,255,255,.95);
  --pill-bg:#EDEFEE;
  --wrap:1120px;
}

/* Dark theme.
   Three states, not two: an explicit choice stamps data-theme on the root,
   and the default "system" setting stamps nothing, where only the media
   query separates light from dark. So the tokens are redefined twice, once
   guarded against an explicit light choice beating a dark OS, and once for
   the toggle. Only tokens are redefined here; no component styles, or a rule
   whose only definition sat behind a media query would never apply in the
   unstamped state. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]){
    --green:#5BC174; --green-dark:#7BD494;
    --hero:#080D0A;
    --ink:#ECF2EE; --body:#BDC9C2; --dim:#8B998F;
    --line:#2A352E; --bg:#0E1511; --sub:#172019; --card:#151D18;
    --top-bg:rgba(14,21,17,.95); --pill-bg:#26302A;
  }
}
:root[data-theme="dark"]{
  --green:#5BC174; --green-dark:#7BD494;
  --hero:#080D0A;
  --ink:#ECF2EE; --body:#BDC9C2; --dim:#8B998F;
  --line:#2A352E; --bg:#0E1511; --sub:#172019; --card:#151D18;
  --top-bg:rgba(14,21,17,.95); --pill-bg:#26302A;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'ClashDisplay',sans-serif;color:var(--ink);line-height:1.25;margin:0}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:40px 26px 72px}
.wrap.narrow{max-width:800px}

/* ── Header ─────────────────────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;gap:14px;padding:0 26px;height:62px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
  background:var(--top-bg);backdrop-filter:saturate(180%) blur(8px);
}
.brand img{height:24px;width:auto;display:block}
.top-label{
  font-family:'ClashDisplay',sans-serif;font-weight:600;font-size:14.5px;
  color:var(--ink);border-left:1px solid var(--line);padding-left:14px;
}
.grow{flex:1}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{
  background:var(--hero);color:#fff;text-align:center;
  padding:62px 26px 66px;position:relative;
}
.hero h1{
  color:#fff;font-size:38px;font-weight:600;letter-spacing:-.02em;margin-bottom:9px;
}
.hero p{margin:0 0 26px;color:rgba(255,255,255,.66);font-size:16.5px}

.search{
  font-family:inherit;border-radius:12px;border:1px solid var(--line);
  background:var(--sub);color:var(--ink);
}
.search-lg{
  width:560px;max-width:calc(100vw - 52px);padding:15px 19px;font-size:16px;
  border:none;box-shadow:0 8px 26px rgba(0,0,0,.28);background:#fff;
}
.search-lg:focus{outline:3px solid rgba(62,154,82,.5);outline-offset:1px}
.search-sm{width:250px;max-width:40vw;padding:8px 13px;font-size:14px}
.search-sm:focus{outline:none;border-color:var(--green);background:var(--card)}

/* ── Search results ─────────────────────────────────────────────────────── */
.results{
  position:absolute;z-index:40;width:560px;max-width:calc(100vw - 52px);
  left:50%;transform:translateX(-50%);margin-top:-14px;
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 16px 40px rgba(20,29,23,.17);padding:7px;max-height:64vh;overflow:auto;
}
.results a{display:block;padding:11px 13px;border-radius:9px;color:var(--ink);text-decoration:none}
.results a:hover{background:var(--sub)}
.results .r-t{font-weight:700;font-size:14.5px}
.results .r-s{font-size:12.5px;color:var(--dim);margin-top:2px}
.results .r-none{padding:17px;color:var(--dim);font-size:14px}

/* ── Category grid ──────────────────────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-card{
  display:flex;flex-direction:column;padding:24px 22px 20px;
  border:1px solid var(--line);border-radius:16px;background:var(--card);color:inherit;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.cat-card:hover{
  border-color:var(--green);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(20,29,23,.08);
}
.cat-ic{
  width:44px;height:44px;border-radius:12px;background:var(--sub);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px;
}
.cat-ic svg{width:23px;height:23px}
.cat-t{font-family:'ClashDisplay',sans-serif;font-weight:600;font-size:17px;color:var(--ink);margin-bottom:5px}
.cat-b{font-size:14px;color:var(--dim);line-height:1.55;flex:1}
.cat-n{font-size:12.5px;color:var(--green);font-weight:700;margin-top:13px}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.crumb{font-size:13.5px;color:var(--dim);margin-bottom:17px}
.crumb i{font-style:normal;margin:0 7px;opacity:.45}
.crumb span{color:var(--body)}

/* ── Article lists ──────────────────────────────────────────────────────── */
.sec-h1{font-size:31px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.art-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.art-row{
  display:block;padding:16px 4px;border-bottom:1px solid var(--line);color:inherit;
}
.art-row:hover{text-decoration:none;background:var(--sub)}
.art-t{display:block;font-weight:700;color:var(--ink);font-size:15.5px}
.art-t::after{content:' ›';color:var(--green)}
.art-s{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}

/* ── Article page ───────────────────────────────────────────────────────── */
.cols{display:flex;gap:46px}
.side{flex:0 0 218px;position:sticky;top:92px;align-self:flex-start;max-height:calc(100vh - 128px);overflow:auto}
.side-cat{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:9px;
}
.side-a{display:block;padding:6px 0;font-size:14.5px;color:var(--body)}
.side-a:hover{color:var(--green);text-decoration:none}
.side-a.on{color:var(--green);font-weight:700}
.content{flex:1;min-width:0;max-width:720px}

article h1{font-size:33px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
article h2{font-size:21px;font-weight:600;margin:34px 0 10px}
article h3{font-size:17px;font-weight:600;margin:25px 0 8px}
.lede{font-size:17px;color:var(--dim);margin:0 0 26px;line-height:1.6}
article p{margin:0 0 15px}
article ul,article ol{margin:0 0 15px;padding-left:23px}
article li{margin-bottom:7px}
article code{
  background:var(--sub);border:1px solid var(--line);border-radius:5px;padding:1px 5px;
  font-size:.89em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
article pre{background:var(--sub);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:0 0 17px}
article pre code{background:none;border:none;padding:0;font-size:13.5px}
article blockquote{
  margin:0 0 17px;padding:13px 18px;background:var(--sub);
  border-left:3px solid var(--green);border-radius:0 10px 10px 0;
}
article blockquote p:last-child{margin-bottom:0}
article hr{border:none;border-top:1px solid var(--line);margin:30px 0}

.helpful{
  margin-top:40px;padding:17px 20px;border:1px solid var(--line);border-radius:13px;
  display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--body);background:var(--sub);
}
.hbtn{
  padding:6px 18px;border:1px solid var(--line);border-radius:9px;background:var(--card);
  font-weight:700;font-size:14px;color:var(--body);
}
.hbtn:hover{border-color:var(--green);color:var(--green);text-decoration:none}
.related{margin-top:44px}
.related h2{font-size:18px;font-weight:600;margin-bottom:12px}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);background:var(--sub);margin-top:20px}
.foot-in{
  max-width:var(--wrap);margin:0 auto;padding:26px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.foot-mark{height:20px;width:auto;opacity:.75}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--dim)}

@media (max-width:900px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cols{flex-direction:column;gap:22px}
  .side{position:static;flex:auto;max-height:none;border-bottom:1px solid var(--line);padding-bottom:15px}
}
@media (max-width:620px){
  .cat-grid{grid-template-columns:1fr}
  .hero{padding:44px 20px 48px}
  .hero h1{font-size:29px}
  .top-label{display:none}
  .wrap{padding:26px 18px 52px}
  article h1,.sec-h1{font-size:26px}
  .results{left:18px;right:18px;transform:none;width:auto;max-width:none}
}

/* ── "Still need help?" ─────────────────────────────────────────────────────
   Closes the home page. Deliberately after the category grid: it is the route
   you take once browsing has not answered the question, not a rival to it. */
.contact{
  display:flex;align-items:center;gap:20px;margin-top:40px;padding:26px 28px;
  border:1px solid var(--line);border-radius:16px;background:var(--sub);
}
.contact-ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:var(--card);
  border:1px solid var(--line);color:var(--green);
  display:flex;align-items:center;justify-content:center;
}
.contact-ic svg{width:23px;height:23px}
.contact-tx{flex:1;min-width:0}
.contact-tx h2{font-family:'ClashDisplay',sans-serif;font-size:19px;font-weight:600;margin-bottom:3px}
.contact-tx p{margin:0;font-size:14.5px;color:var(--dim);line-height:1.55}
.contact-btn{
  flex:0 0 auto;padding:11px 22px;border-radius:11px;background:var(--green);
  color:#fff;font-weight:700;font-size:14.5px;
}
.contact-btn:hover{background:var(--green-dark);text-decoration:none}
@media (max-width:620px){
  .contact{flex-direction:column;align-items:flex-start;gap:15px;padding:22px}
  .contact-btn{width:100%;text-align:center}
}

/* ── Live status strip ──────────────────────────────────────────────────────
   Sits on the dark hero under the search box, so it is tinted from white
   rather than given its own colour: the dot carries the signal and the pill
   stays quiet. Hidden until the status page answers. */
.statuslink{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  padding:9px 17px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.9);font-size:14px;font-weight:600;
  transition:background .12s,border-color .12s;
}
.statuslink:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26);text-decoration:none}
.statusdot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#9AA5A0}
.statusdot.ok  {background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.statusdot.warn{background:#FBBF24;box-shadow:0 0 0 3px rgba(251,191,36,.2)}
.statusdot.down{background:#F87171;box-shadow:0 0 0 3px rgba(248,113,113,.2)}
.statusgo{color:rgba(255,255,255,.52);font-weight:400}
.statusgo::before{content:'·';margin-right:10px}
@media (max-width:620px){ .statusgo{display:none} }

/* The class sets `display`, which outranks the browser's own [hidden] rule, so
   the element rendered as an empty grey pill whenever the fetch had not
   returned. Hiding has to be restated at equal-or-higher specificity. */
.statuslink[hidden]{display:none}

/* Its own row. The hero centres inline content, so without a block-level
   wrapper the pill sits beside the search input instead of beneath it. */
.statusrow{display:block}

/* ── Forms, tickets, staff console ──────────────────────────────────────────
   Shares the help centre's type and green so the contact form reads as part
   of the same place, rather than a bolted-on widget. */
.tform{display:flex;flex-direction:column;gap:18px;max-width:640px;margin-top:8px}
.tfield{display:flex;flex-direction:column;gap:6px}
.tfield > span{font-size:13.5px;font-weight:700;color:var(--ink)}
.tfield > span i{font-style:normal;font-weight:400;color:var(--dim);margin-left:5px}
.tfield input,.tfield select,.tfield textarea{
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;
}
.tfield textarea{resize:vertical;line-height:1.6}
.tfield input:focus,.tfield select:focus,.tfield textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(62,154,82,.15)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tbtn{
  align-self:flex-start;padding:12px 26px;border:none;border-radius:11px;
  background:var(--green);color:#fff;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer}
.tbtn:hover:not(:disabled){background:var(--green-dark)}
.tbtn:disabled{opacity:.6;cursor:default}
.terr{margin:0;color:#B3261E;font-size:14px;font-weight:600}
/* Off-screen rather than display:none - a bot reading the DOM fills anything
   it can find, and the ones worth catching skip hidden inputs. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.tdone{border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--sub);max-width:640px}
.tdone h2{font-size:21px;font-weight:600;margin-bottom:8px}
.tdone p{margin:0 0 18px}
.tdone strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--green);font-size:17px}

.sbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sbar-r{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--dim)}
.tfilters{display:flex;gap:8px;margin:18px 0}
.tfilter{
  padding:7px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--body);cursor:pointer}
.tfilter.on{border-color:var(--green);color:var(--green);background:rgba(62,154,82,.07)}
.tlist{display:flex;flex-direction:column;gap:10px}
.trow-btn{
  display:flex;flex-direction:column;gap:5px;text-align:left;width:100%;cursor:pointer;
  padding:15px 17px;border:1px solid var(--line);border-radius:13px;background:var(--card);font-family:inherit}
.trow-btn:hover{border-color:var(--green);background:var(--sub)}
.trow-top{display:flex;align-items:center;gap:10px}
.tref-sm{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--green);font-weight:700}
.tpill{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:999px}
.tpill.open{background:rgba(62,154,82,.13);color:var(--green-dark)}
.tpill.closed{background:var(--pill-bg);color:var(--dim)}
.tsub{font-weight:700;color:var(--ink);font-size:15px}
.tmeta{font-size:13px;color:var(--dim)}
.tdetail{margin-top:30px;border-top:1px solid var(--line);padding-top:26px;display:flex;flex-direction:column;gap:18px}
.tdetail-h h2{font-size:22px;font-weight:600;margin:6px 0 4px}
.tbody{background:var(--sub);border-left:3px solid var(--green);border-radius:0 10px 10px 0;
  padding:16px 20px;white-space:pre-wrap;line-height:1.65}
.reply{border:1px solid var(--line);border-radius:12px;padding:14px 17px;margin-bottom:10px;background:var(--card)}
.reply-h{font-size:12.5px;color:var(--dim);margin-bottom:6px}
.reply-b{white-space:pre-wrap;line-height:1.6}
.tactions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.empty{color:var(--dim);font-size:14.5px}
@media (max-width:620px){ .tgrid{grid-template-columns:1fr} }

/* Staff entrance. Labelled "Staff login" rather than "Login" because this is a
   public help centre with no end-user accounts, and a bare "Login" invites
   people to hunt for a password they were never issued. */
.top-login{
  flex:0 0 auto;padding:7px 15px;border:1px solid var(--line);border-radius:9px;
  font-size:13.5px;font-weight:700;color:var(--body);background:var(--card);
}
.top-login:hover{border-color:var(--green);color:var(--green);text-decoration:none}
@media (max-width:620px){ .top-login{padding:6px 11px;font-size:12.5px} }

/* Submitted state. Takes the full column on its own, because the form it
   replaces is gone and a small card adrift in the space reads as an aside
   rather than the answer. */
.tdone{
  max-width:640px;margin:34px auto;text-align:center;
  border:1px solid var(--line);border-radius:18px;padding:46px 34px;background:var(--sub);
}
.tdone-ic{
  display:flex;align-items:center;justify-content:center;width:62px;height:62px;
  margin:0 auto 20px;border-radius:50%;background:var(--green);color:#fff;
}
.tdone-ic svg{width:31px;height:31px}
.tdone h2{font-size:25px;font-weight:600;margin-bottom:10px}
.tdone p{margin:0 auto 22px;max-width:440px}

/* The helpful control is buttons now, not mail links, so it needs the reset a
   button carries that an anchor does not. */
button.hbtn{cursor:pointer;font-family:inherit;line-height:1.4}
.hthanks{color:var(--green);font-weight:700}

/* Theme toggle. Shows the icon for the theme it switches to, which is the
   convention people already read without a label. */
.themebtn{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--body);cursor:pointer;
}
.themebtn:hover{border-color:var(--green);color:var(--green)}
.themebtn svg{width:17px;height:17px}
.themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .sun{display:block}
:root[data-theme="dark"] .themebtn .moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themebtn .sun{display:block}
  :root:not([data-theme="light"]) .themebtn .moon{display:none}
}

/* Header search dropdown.
   Fixed rather than absolute so it tracks the sticky header instead of
   scrolling out from under the input that opened it. */
.results.compact{
  position:fixed;top:68px;right:26px;left:auto;transform:none;
  width:400px;max-width:calc(100vw - 36px);margin-top:0;
}
@media (max-width:620px){
  .results.compact{left:18px;right:18px;width:auto;max-width:none;top:60px}
}

/* Step illustrations: a single wide image showing the three screens of a
   flow. Rendered full bleed to the prose column, rounded to match the cards
   elsewhere on the site, and given a border so the dark green field does not
   float on a light page with no edge. */
article .step-shot{
  display:block;width:100%;height:auto;margin:22px 0 26px;
  border-radius:16px;border:1px solid var(--line);
}