/* Bunse Help Centre. Tokens, type, nav, buttons and footer follow the homepage (index.html);
   the help-only parts (search, category tiles, article layout) are built from the same tokens. */
:root{
  --bg:#14131C; --bg-2:#181723; --panel:#1B1A26; --panel-2:#221F30;
  --line:rgba(255,255,255,0.09); --line-strong:rgba(255,255,255,0.16);
  --text:#EDEAE3; --muted:#9C98B2; --faint:#6E6A84;
  --accent:#B4AEF7; --accent-soft:rgba(180,174,247,0.13); --on-accent:#0F0F14;
  --amber:#F5A742; --amber-soft:rgba(245,167,66,0.12); --ember:#E8722C; --green:#4ade80; --rust:#FB7185;
  --display:'Bricolage Grotesque',sans-serif; --font:'Space Grotesk',sans-serif; --mono:'IBM Plex Mono',monospace;
  --radius:22px; --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(16px,4vw,32px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:140px;}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;}
.container{max-width:1200px;margin:0 auto;padding:0 var(--gutter);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation:none !important;transition-duration:0.001ms !important;} }

/* ---------- shared bits (as the homepage) ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0.95rem 1.6rem;border-radius:999px;font-weight:600;font-size:1rem;line-height:1;cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),background-color .2s ease,border-color .2s ease,color .2s ease;white-space:nowrap;font-family:var(--font);}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{transform:translateY(-2px);background:#C4BFFA;}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:transparent;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn .arr{transition:transform .25s var(--ease);}
.btn:hover .arr{transform:translateX(3px);}

/* ---------- nav (as the homepage, always with its scrolled backdrop) ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(20,19,28,0.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px;}
.brand{display:flex;align-items:center;gap:9px;}
.brand-name{font-weight:600;font-size:23px;letter-spacing:-0.01em;line-height:1;}
.nav-links{display:flex;gap:2rem;font-size:0.93rem;color:var(--muted);}
.nav-links a{transition:color .2s ease;}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text);}
.nav .btn{padding:0.7rem 1.2rem;font-size:0.9rem;}
@media (max-width:860px){ .nav-links{display:none;} }

/* ---------- help bar: breadcrumb + search, under the nav on inner pages ---------- */
.helpbar{border-bottom:1px solid var(--line);background:var(--bg-2);}
.helpbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding-block:10px;flex-wrap:wrap;}
.crumb{font-family:var(--mono);font-size:0.78rem;color:var(--faint);display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--accent);}
.helpbar .search{flex:0 1 360px;}
@media (max-width:640px){ .helpbar .search{flex-basis:100%;} }

/* ---------- search ---------- */
.search{position:relative;width:100%;}
.search-field{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);padding:0 16px;transition:border-color .2s ease,background-color .2s ease;}
.search-field:focus-within{border-color:var(--accent);background:var(--panel-2);}
.search-field svg{color:var(--muted);flex-shrink:0;}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-family:var(--font);font-size:0.95rem;padding:0.7rem 0;}
.search input::placeholder{color:var(--faint);}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.search kbd{font-family:var(--mono);font-size:0.72rem;color:var(--faint);border:1px solid var(--line-strong);border-radius:6px;padding:1px 6px;}
.search-lg .search-field{padding:0 22px;}
.search-lg input{font-size:1.08rem;padding:1.05rem 0;}
.results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;background:var(--panel);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,0.45);padding:6px;max-height:min(70vh,520px);overflow-y:auto;text-align:left;}
.result{display:block;padding:10px 14px;border-radius:12px;}
.result[aria-selected="true"],.result:hover{background:var(--accent-soft);}
.result-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.result-title{font-weight:600;font-size:0.95rem;color:var(--text);}
.result-cat{font-family:var(--mono);font-size:0.72rem;color:var(--accent);white-space:nowrap;flex-shrink:0;}
@media (max-width:520px){ .result-head{flex-direction:column;gap:0;} }
.result-summary{font-size:0.84rem;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.results-empty{padding:14px;font-size:0.9rem;color:var(--muted);}
.results-empty a{color:var(--accent);}

/* ---------- help home ---------- */
.help-hero{position:relative;padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem);text-align:center;}
.help-hero::before{content:"";position:absolute;inset:-72px 0 0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(36rem 22rem at 70% 30%, rgba(232,114,44,0.13), transparent 70%),
    radial-gradient(34rem 22rem at 35% 55%, rgba(180,174,247,0.13), transparent 70%);}
.help-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1;letter-spacing:-0.035em;margin:1.1rem 0 1.8rem;text-wrap:balance;}
.help-hero .search{max-width:620px;margin:0 auto;}
.popular{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:1.2rem;font-size:0.85rem;color:var(--faint);}
.popular a{border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;color:var(--muted);transition:border-color .2s ease,color .2s ease;}
.popular a:hover{border-color:var(--accent);color:var(--text);}

.help-section{padding:clamp(2.5rem,5vw,3.5rem) 0;}
.help-section + .help-section{padding-top:0;}
.section-label{font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;}

.start-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:760px){ .start-grid{grid-template-columns:repeat(3,1fr);} }
.start-card{display:flex;flex-direction:column;gap:0.4rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem;transition:border-color .25s ease,transform .25s var(--ease);}
.start-card:hover{border-color:rgba(180,174,247,0.4);transform:translateY(-3px);}
.start-card .num{font-family:var(--mono);font-size:0.78rem;color:var(--accent);}
.start-card h3{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-0.015em;line-height:1.25;}
.start-card p{color:var(--muted);font-size:0.9rem;}

.cat-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:640px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
.cat-tile{display:flex;flex-direction:column;gap:0.55rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;transition:border-color .25s ease;}
.cat-tile:hover{border-color:rgba(180,174,247,0.4);}
.cat-head{display:flex;align-items:center;gap:12px;}
.tile-icon{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent);flex-shrink:0;}
.tile-icon svg{width:20px;height:20px;}
.cat-tile h2{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-0.015em;line-height:1.2;}
.cat-tile h2 a:hover{color:var(--accent);}
.cat-tile > p{color:var(--muted);font-size:0.92rem;}
.cat-links{list-style:none;display:grid;gap:0.35rem;margin-top:0.3rem;font-size:0.9rem;}
.cat-links a{color:var(--text);opacity:0.86;}
.cat-links a:hover{color:var(--accent);opacity:1;}
.cat-more{margin-top:auto;padding-top:0.5rem;font-size:0.85rem;color:var(--accent);}
.cat-more .arr{display:inline-block;transition:transform .25s var(--ease);}
.cat-more:hover .arr{transform:translateX(3px);}

.contact-box{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(2rem,5vw,3rem) 1.5rem;}
.contact-box h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-0.025em;line-height:1.1;}
.contact-box p{color:var(--muted);margin:0.7rem auto 1.4rem;max-width:44ch;}

/* ---------- category and article layout: sidebar + main ---------- */
.help-layout{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,6vw,5rem);}
@media (min-width:960px){ .help-layout{grid-template-columns:240px minmax(0,1fr);gap:3.5rem;} }
.help-layout > *{min-width:0;}
.side{font-size:0.9rem;}
.side-inner{position:sticky;top:96px;}
.side h2{font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);margin:0 0 0.7rem;}
.side ul{list-style:none;display:grid;gap:2px;}
.side a{display:block;padding:7px 12px;border-radius:10px;color:var(--muted);line-height:1.35;}
.side a:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.side a[aria-current]{color:var(--text);background:var(--accent-soft);}
.side ul + h2{margin-top:1.6rem;}
@media (max-width:959px){
  .side{order:2;border-top:1px solid var(--line);padding-top:1.5rem;}
  .side-inner{position:static;}
}

.page-head{max-width:720px;margin-bottom:2rem;}
.page-head h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.6vw,3rem);line-height:1.05;letter-spacing:-0.03em;text-wrap:balance;}
.page-head .lede{color:var(--muted);font-size:1.08rem;margin-top:0.8rem;max-width:60ch;}
.page-head .updated{font-family:var(--mono);font-size:0.75rem;color:var(--faint);margin-top:0.9rem;}

.cat-section{margin-top:2.2rem;max-width:760px;}
.cat-section:first-of-type{margin-top:0;}
.cat-section h2{font-size:0.8rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:0.8rem;}
.article-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem 1.25rem;margin-bottom:0.6rem;transition:border-color .2s ease;}
.article-row:hover{border-color:rgba(180,174,247,0.45);}
.article-row b{display:block;font-weight:600;font-size:1rem;}
.article-row span{display:block;font-size:0.86rem;color:var(--muted);margin-top:2px;}
.article-row .arr{color:var(--faint);flex-shrink:0;transition:transform .25s var(--ease),color .2s ease;}
.article-row:hover .arr{color:var(--accent);transform:translateX(3px);}
.soon{border:1px dashed var(--line-strong);border-radius:16px;padding:1rem 1.25rem;font-size:0.9rem;color:var(--muted);}
.soon b{color:var(--text);}

/* ---------- article body ---------- */
.prose{max-width:720px;font-size:1.02rem;line-height:1.7;}
.prose > * + *{margin-top:1rem;}
.prose h2{font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-0.02em;line-height:1.2;margin-top:2.2rem;}
.prose h3{font-weight:600;font-size:1.1rem;margin-top:1.6rem;}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(180,174,247,0.4);text-underline-offset:3px;}
.prose a:hover{text-decoration-color:var(--accent);}
.prose strong{font-weight:600;color:var(--text);}
.prose ul{padding-left:1.2rem;display:grid;gap:0.4rem;}
.prose ul li::marker{color:var(--faint);}
/* Numbered steps: a counter chip per step, as the homepage's chapter numbers */
.prose ol{list-style:none;counter-reset:step;display:grid;gap:0;border-top:1px solid var(--line);}
.prose ol > li{counter-increment:step;position:relative;padding:0.8rem 0 0.8rem 46px;border-bottom:1px solid var(--line);}
.prose ol > li::before{content:counter(step);position:absolute;left:0;top:calc(0.8rem + 1px);font-family:var(--mono);font-size:0.78rem;color:var(--accent);background:var(--accent-soft);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;}
.prose .muted{color:var(--muted);}
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:0.74rem;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:2px 10px;margin:0 6px 4px 0;vertical-align:middle;}
.callout{border:1px solid var(--line-strong);border-radius:16px;padding:0.9rem 1.1rem;background:var(--panel);font-size:0.95rem;}
.callout-label{display:block;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.25rem;}
.callout.note .callout-label{color:var(--accent);}
.callout.tip{border-color:rgba(74,222,128,0.3);} .callout.tip .callout-label{color:var(--green);}
.callout.warning{border-color:rgba(245,167,66,0.35);background:var(--amber-soft);} .callout.warning .callout-label{color:var(--amber);}
/* Screenshots: the app screen in a phone frame, as the homepage hero */
.shot{margin:1.6rem 0;display:flex;flex-direction:column;align-items:center;gap:0.7rem;}
.shot.screen .frame{width:min(290px,78vw);border-radius:34px;padding:9px;background:#0c0b12;border:1px solid var(--line-strong);box-shadow:0 30px 70px rgba(0,0,0,0.45);}
.shot.screen img{width:100%;height:auto;border-radius:26px;}
.shot.crop .frame{width:min(360px,100%);border-radius:20px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 20px 50px rgba(0,0,0,0.35);}
.shot.crop img{width:100%;height:auto;}
/* Tables in articles scroll sideways on a phone rather than widening the page */
.prose .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;}
.prose table{border-collapse:collapse;width:100%;font-size:0.92rem;min-width:520px;}
.prose th,.prose td{text-align:left;padding:0.65rem 0.9rem;border-bottom:1px solid var(--line);vertical-align:top;}
.prose th{font-size:0.74rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--panel);}
.prose tr:last-child td{border-bottom:none;}
.prose td:first-child{font-weight:600;color:var(--text);}
.shot figcaption{font-size:0.85rem;color:var(--muted);text-align:center;max-width:46ch;}
.checked{font-family:var(--mono);font-size:0.78rem;color:var(--faint);border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem !important;}
.checked a{color:var(--muted);}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;max-width:720px;margin-top:2.5rem;}
.pager a{border:1px solid var(--line);border-radius:16px;padding:0.9rem 1.1rem;background:var(--panel);transition:border-color .2s ease;min-width:0;}
.pager a:hover{border-color:rgba(180,174,247,0.45);}
.pager small{display:block;font-family:var(--mono);font-size:0.72rem;color:var(--faint);}
.pager b{display:block;font-weight:600;font-size:0.93rem;margin-top:2px;}
.pager .next{text-align:right;grid-column:2;}
@media (max-width:560px){ .pager{grid-template-columns:1fr;} .pager .next{grid-column:1;} }

.related{max-width:720px;margin-top:2.5rem;}
.related h2{font-size:0.8rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:0.8rem;}

/* ---------- footer (as the homepage) ---------- */
footer{border-top:1px solid var(--line);padding:3rem 0 2.5rem;color:var(--muted);font-size:0.88rem;}
.foot{display:grid;grid-template-columns:1fr;gap:2rem;}
@media (min-width:760px){ .foot{grid-template-columns:1.4fr repeat(3,1fr);} }
.foot p{margin-top:0.8rem;max-width:30ch;}
.foot h4{color:var(--text);font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.9rem;}
.foot ul{list-style:none;display:grid;gap:0.5rem;}
.foot a:hover{color:var(--accent);}
.foot-base{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:0.8rem;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;}
@media (hover:none){ .search kbd{display:none;} }