/* The Help Centre, on top of doc.css.

   ⚠️ NOT A SECOND DESIGN. doc.css is loaded first and this file adds only what a help
   centre needs that a policy page does not: a search field, a grid of topics, and a list
   of articles. Every colour here is a var() from doc.css — there is not one new hex value
   in this file, deliberately, because that is exactly how the policy pages drifted into
   looking like another company's site (doc.css says so at the top).

   ⚠️ THE READING COLUMN STAYS 44rem. The topic grid is allowed to be wider because a grid
   of two cards in a 44rem column is cramped, but the moment you are reading an ARTICLE you
   are back in doc.css's column, at doc.css's measure. One place to read, one width.

   The accent is a button fill and a focus ring. Never a word of text. */

.wrap-wide{width:min(100% - 2.5rem, 58rem); margin-inline:auto}

/* ---- the search field ---- */
.search{position:relative; margin:2rem 0 0}
.search input{
  width:100%; font:inherit; font-size:1.05rem; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:.95rem 1.25rem .95rem 3rem; appearance:none;
  transition:border-color .16s ease, background .16s ease;
}
.search input::placeholder{color:var(--ink-soft)}
.search input:focus{outline:none; border-color:var(--brand); background:var(--paper)}
.search svg{
  position:absolute; left:1.15rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--ink-soft); pointer-events:none;
}
/* Clears the field. Hidden until there is something to clear, so the resting state is
   one field and nothing else. */
.search button{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:999px; background:transparent;
  color:var(--ink-soft); cursor:pointer; font-size:1.1rem; line-height:1;
}
@media (hover:hover){.search button:hover{background:var(--line); color:var(--ink)}}

/* ---- the topic grid ---- */
.topics{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:1rem; margin:2.5rem 0 0; padding:0; list-style:none;
}
.topics a{
  display:block; height:100%; text-decoration:none;
  border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.5rem;
  transition:border-color .16s ease, transform .16s ease;
}
@media (hover:hover){.topics a:hover{background:var(--paper-2)}}
.topics strong{display:block; font-size:1.04rem; font-weight:600; letter-spacing:-.015em}
.topics span{display:block; margin-top:.35rem; color:var(--ink-soft); font-size:.94rem; line-height:1.5}

/* ---- a list of articles ---- */
.articles{list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--line)}
.articles li{border-bottom:1px solid var(--line)}
.articles a{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  padding:1.05rem .25rem; text-decoration:none; transition:padding-left .16s ease;
}
@media (hover:hover){.articles a:hover{padding-left:.6rem}}
.articles .chev{color:var(--ink-soft); flex:none; width:8px; height:13px}
/* The matched snippet under a search hit. Never shown in a plain article list. */
.articles small{display:block; margin-top:.2rem; color:var(--ink-soft); font-size:.9rem; line-height:1.5}

/* ---- breadcrumb ---- */
.crumb{margin:0 0 1.5rem; font-size:.92rem; color:var(--ink-soft)}
.crumb a{text-decoration:none}
@media (hover:hover){.crumb a:hover{color:var(--ink); text-decoration:underline}}
.crumb span{margin:0 .45rem}

/* ---- the "still stuck" block that ends every view ---- */
.ask{
  margin:4rem 0 0; padding:2rem; border-radius:14px;
  background:var(--paper-2); text-align:center;
}
.ask h2{margin:0; font-size:1.15rem}
.ask p{margin:.6rem auto 0; max-width:26rem; color:var(--ink-soft); font-size:.96rem}
.ask .cta{margin-top:1.4rem}

.empty{margin:2.5rem 0 0; color:var(--ink-soft)}

/* A section heading over a list of articles: "Popular", "More in Chats". Smaller and quieter than
   an h2 in the reading column, because it labels a list rather than opening a section of prose. */
.popular-h{font-size:.8rem; font-weight:500; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-soft); margin:3rem 0 0}

/* ⛔ THE ARTICLE TITLE NEEDS A GAP UNDER IT, and doc.css cannot give it one. There, `h1` is
   `margin:0` because every page that uses it follows the title with `.updated` or `.intro`, both of
   which bring their own top margin. An article's first element is a plain `<p>`, so the body ran
   straight into the heading with nothing between them. Caught by loading the published page rather
   than by reading the file. */
#a-body h1{margin-bottom:1.15rem}
/* Same reason, one level down: `h2` carries 3rem above it for a page of sections, which is too much
   air inside a single short article. */
#a-body h2{margin-top:2rem}

/* Copy link. Quiet by default: it is an action on a reading page, so it should be findable and not
   compete with the words. The label changes in place to confirm, which is why it needs a stable
   min-width — "Link copied" is shorter than "Copy link" and the button jumping is worse than no
   feedback at all. */
.copylink{
  margin:1.75rem 0 0; font:inherit; font-size:.92rem; cursor:pointer;
  background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem;
  min-width:11rem; text-align:center;
  transition:border-color .16s ease, color .16s ease;
}
@media (hover:hover){.copylink:hover{border-color:var(--ink-soft); color:var(--ink)}}

/* "Did this answer your question?" — see the note in the markup for why it is a link and not a
   thumbs-up widget. */
.helpful{margin:2.5rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
  color:var(--ink-soft); font-size:.95rem}
.helpful a{color:var(--brand); text-decoration:none}
@media (hover:hover){.helpful a:hover{text-decoration:underline}}

/* Only one of the three views is ever in the document flow. */
[hidden]{display:none !important}


/* ── 2026-09-25: the phone pass — owner, comparing ours to the reference help centre on an
   iPhone: "even when you tap, ours feels cheap". Measured, not guessed: every tap flashed the
   browser's blue box, the hover lift and slide stuck after a tap, and nothing answered a finger
   while it was down. Now: no blue box (doc.css), hover only where there is a mouse, and a quick
   pressed state on everything that can be tapped. ── */
.topics a, .articles a, .copylink, .fb-btn, .fb-reason, .hc-topics a{
  -webkit-tap-highlight-color:transparent;
  transition:background-color .12s ease, transform .12s ease, border-color .16s ease;
}
.topics a:active{background:var(--line); transform:scale(.97)}
.articles a:active{background:var(--line)}
.copylink:active, .fb-btn:active, .fb-reason:active{transform:scale(.97); background:var(--line)}


/* The question, then the field, with no empty band above them. */
#homehead h1{margin:0}
#homehead + .wrap-wide .search{margin-top:1.25rem}

/* Was this helpful. */
.fb{margin:2.5rem 0 0; padding:1.4rem; border:1px solid var(--line); border-radius:14px}
.fb p{margin:0; font-weight:600; font-size:1.02rem}
.fb-row{display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem}
.fb-btn, .fb-reason{font:inherit; cursor:pointer; border:0; border-radius:12px;
  background:var(--paper-2); color:var(--ink); padding:.8rem 1rem}
.fb-btn{font-weight:600}
.fb-reasons{display:grid; gap:.6rem; margin-top:1rem}
.fb-reason{text-align:left}
.fb-done p{font-weight:500; color:var(--ink-soft)}
.fb-mail{display:inline-block; margin-top:.9rem; color:var(--brand); font-weight:600; text-decoration:none}

/* Phone menu. Hidden on wide screens, where the header keeps its text links. */
.hc-menu{display:none; margin-left:auto; width:44px; height:44px; border:0; border-radius:999px;
  background:transparent; color:var(--on-dark); cursor:pointer; -webkit-tap-highlight-color:transparent}
.hc-menu svg{width:24px; height:24px}
.hc-menu:active{background:rgba(255,255,255,.12)}
.hc-sheet{position:fixed; inset:64px 0 0 0; z-index:49; background:var(--paper); overflow-y:auto;
  padding:1rem 0 3rem}
.hc-topics{list-style:none; margin:0; padding:0}
.hc-topics a{display:flex; align-items:center; gap:1rem; padding:.55rem .25rem; border-radius:12px;
  text-decoration:none; font-weight:600; font-size:1.06rem; color:var(--ink)}
.hc-topics a:active{background:var(--line)}
.hc-links{display:grid; gap:.25rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line)}
.hc-links a{padding:.6rem .25rem; color:var(--ink-soft); text-decoration:none}
body.hc-open{overflow:hidden}

@media (max-width:640px){
  .bar nav{display:none}
  .hc-menu{display:inline-grid; place-items:center}
  main{padding-top:1.75rem}
  .popular-h{margin-top:2.25rem}
}


/* ── 2026-09-25, third pass — owner: "don't copy, be creative, our own". The Help Centre now uses
   the homepage's own vocabulary and nothing else: the spaced label over the headline, the faint
   ruled grid behind it, the numbered index (01, 02 ...) for topics, and the homepage's black
   numbered menu with its uneven three-line button. ── */

/* Hero: label, question, and the homepage's ruled grid fading out behind them. */
#homehead{position:relative}
#homehead::before{
  content:""; position:absolute; inset:-3rem -50vw -6rem; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0/88px 88px,
    linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0/88px 88px;
  -webkit-mask-image:radial-gradient(70% 70% at 30% 20%, #000 0%, transparent 72%);
  mask-image:radial-gradient(70% 70% at 30% 20%, #000 0%, transparent 72%);
  opacity:.7;
}
main{position:relative; isolation:isolate; overflow-x:clip}
.hc-eyebrow{margin:0 0 1rem; font-size:.78rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft)}

/* Topics: a numbered index, like the homepage menu, on white. */
.topics{display:block; margin:1rem 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.topics li{border-bottom:1px solid var(--line)}
.topics a{display:flex; align-items:baseline; gap:1.1rem; height:auto; border:0; border-radius:0;
  padding:1.15rem .15rem; text-decoration:none}
.topics em{flex:none; width:1.6rem; font-style:normal; font-size:.78rem; font-weight:600;
  letter-spacing:.12em; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.topics .tt strong{display:block; font-size:1.3rem; font-weight:600; letter-spacing:-.02em;
  line-height:1.2; color:var(--ink)}
.topics .tt span{display:block; margin-top:.3rem; color:var(--ink-soft); font-size:.92rem; line-height:1.45}
.topics a:active{background:var(--paper-2); transform:none}
.topics a:active em{color:var(--brand)}
@media (hover:hover){.topics a:hover em{color:var(--brand)}}

/* The homepage's menu button: three uneven lines that fold into a cross. */
.hc-burger{position:relative; display:block; width:24px; height:14px}
.hc-burger i{position:absolute; left:0; height:2px; border-radius:2px; background:currentColor;
  transition:transform .22s ease, opacity .22s ease, width .22s ease}
.hc-burger i:nth-child(1){top:0; width:24px}
.hc-burger i:nth-child(2){top:6px; width:16px; left:8px}
.hc-burger i:nth-child(3){top:12px; width:20px}
body.hc-open .hc-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.hc-open .hc-burger i:nth-child(2){opacity:0}
body.hc-open .hc-burger i:nth-child(3){width:24px; transform:translateY(-6px) rotate(-45deg)}

/* The menu: the homepage's black numbered sheet. */
.hc-sheet{background:var(--dark); color:var(--on-dark)}
.hc-topics li + li{border-top:0}
.hc-topics a{display:flex; align-items:baseline; gap:1rem; padding:1rem 0; border-radius:0;
  border-bottom:1px solid var(--on-dark-line); color:var(--on-dark); font-weight:500; font-size:1.3rem}
.hc-topics a:active{background:rgba(255,255,255,.06)}
.hc-topics em{font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  color:var(--on-dark-soft); width:1.6rem; flex:none}
.hc-links{border-top:0}
.hc-links a{color:var(--on-dark-soft)}

/* Headings in Outfit (see the note in help.html), reading text stays system. Weight and tracking
   carry the hierarchy: the question is heavy and tight, a topic name is firm, a label is caps. */
h1, #a-body h1, #a-body h2, #t-title, .topics .tt strong, .hc-topics a, .fb p, .ask h2{
  font-family:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1{font-weight:700; letter-spacing:-.035em}
#a-body h1{font-size:clamp(2rem,7vw,2.6rem); line-height:1.08}
#a-body h2{font-weight:600; letter-spacing:-.02em}
.topics .tt strong{font-size:1.4rem; font-weight:600; letter-spacing:-.025em}
.hc-topics a{font-size:1.45rem; font-weight:500; letter-spacing:-.02em}
.fb p{font-size:1.15rem; font-weight:600; letter-spacing:-.01em}

/* Undo in the feedback card. */
.fb-back{font:inherit; font-size:.92rem; border:0; background:transparent; color:var(--ink-soft);
  padding:.2rem 0; margin:0 0 .6rem; cursor:pointer}
.fb-change{display:block; font:inherit; font-size:.92rem; border:0; background:transparent;
  color:var(--ink-soft); padding:.2rem 0; margin-top:.9rem; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px}
.fb-back:active, .fb-change:active{color:var(--ink)}

/* Fariin blue, in the text shade, where it marks something: the topic numbers and the label.
   Whole-row lists keep ink (the rule in doc.css colours links inside prose only). */
.topics a, .articles a, .hc-topics a, .hc-links a{color:inherit; font-weight:inherit}
.hc-topics a{color:var(--on-dark)}
.hc-links a{color:var(--on-dark-soft)}
.topics em, .hc-eyebrow{color:var(--brand-ink)}
.hc-topics em{color:#4DAEFF}

/* "Help Centre" beside the wordmark: a hairline, then the name in the heading face. */
.hc-label{display:inline-flex; align-items:center; gap:.85rem; margin-left:-.35rem;
  color:var(--on-dark); text-decoration:none; font-family:"Outfit",-apple-system,sans-serif;
  font-weight:500; font-size:1.12rem; letter-spacing:-.01em; white-space:nowrap}
.hc-label::before{content:""; width:1px; height:22px; background:var(--on-dark-line)}
.hc-label:active{opacity:.7}