/* Help centre: question lists, search and screenshots. The sticky contents list reuses .api-layout from api.css. */
.help-faq .help-layout{align-items:start}
.help-group h2{font-size:var(--fs-h3)}
.help-list{margin-top:1rem;border-top:1px solid var(--hairline)}
.help-q{border-bottom:1px solid var(--hairline);scroll-margin-top:6rem}
.help-q>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;padding:1.05rem .2rem;font-weight:600;color:var(--plum);line-height:1.45}
.help-q>summary::-webkit-details-marker{display:none}
.help-q>summary::after{content:"+";flex:none;font-size:1.3rem;font-weight:400;color:var(--violet-deep);line-height:1;margin-left:.2rem}
.help-q[open]>summary::after{content:"\2212"}
.help-q>summary:hover .help-qt{color:var(--violet-deep)}
.help-q>summary:focus-visible{outline:3px solid var(--violet-bright);outline-offset:2px;border-radius:var(--radius-s)}
.help-qt{flex:1}
.help-a{padding:0 .2rem 1.3rem;max-width:62ch;color:var(--graphite);line-height:1.7}
.help-a p{margin:0 0 .9rem}
.help-a ol,.help-a ul{margin:0 0 .9rem;padding-left:1.3rem;display:grid;gap:.4rem}
.help-a li::marker{color:var(--violet-deep)}
.help-note{padding:.7rem 1rem;border-left:3px solid var(--violet-bright);background:var(--mist);border-radius:0 var(--radius-s) var(--radius-s) 0;font-size:.95rem}
.help-shot{margin:1rem 0 .4rem}
.help-shot img{display:block;max-width:100%;height:auto;border:1px solid var(--hairline);border-radius:var(--radius-s)}
.help-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:.4rem 0 0}
.help-links a{font-weight:600;color:var(--violet-deep);text-decoration:none}
.help-links a:hover{text-decoration:underline;text-underline-offset:3px}
.help-search{max-width:44rem;margin:1.6rem auto 0}
.help-search input{width:100%;font:inherit;font-size:1.1rem;padding:1rem 1.2rem;border:1px solid var(--hairline);border-radius:var(--radius-l);background:#fff;color:var(--plum);box-shadow:0 18px 40px -30px color-mix(in srgb,var(--violet-deep) 50%,transparent)}
.help-search input:focus{outline:3px solid var(--violet-bright);outline-offset:2px;border-color:var(--violet)}
.help-results{list-style:none;margin:1rem auto 0;padding:0;max-width:44rem;border:1px solid var(--hairline);border-radius:var(--radius-l);background:#fff;overflow:hidden}
.help-results li+li{border-top:1px solid var(--hairline)}
.help-results a{display:block;padding:.85rem 1.1rem;text-decoration:none;color:inherit}
.help-results a:hover,.help-results a:focus-visible{background:var(--mist)}
.help-results strong{display:block;color:var(--plum);font-size:1rem}
.help-results span{display:block;margin-top:.15rem;color:var(--graphite);font-size:.88rem}
.help-results em{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-deep)}
.help-empty{text-align:center;margin:1rem 0 0;color:var(--graphite)}
.help-search-blk{padding-bottom:1rem}

/* Topic cloud in the hero: linked words in varied sizes, no boxes, the current topic marked like a highlighter stroke */
.cs-cloud{position:relative;padding:2.4rem 1.6rem;display:grid;place-items:center;min-height:21rem;isolation:isolate}
.cs-cloud-glow{position:absolute;inset:0;z-index:-1;border-radius:2.2rem;background:
  radial-gradient(60% 55% at 22% 28%,color-mix(in srgb,var(--ic-magenta) 22%,transparent),transparent 70%),
  radial-gradient(55% 60% at 80% 22%,color-mix(in srgb,var(--ic-cyan) 26%,transparent),transparent 70%),
  radial-gradient(60% 60% at 62% 85%,color-mix(in srgb,var(--ic-violet-bright) 24%,transparent),transparent 70%),
  linear-gradient(160deg,#fff,color-mix(in srgb,var(--mist) 70%,#fff));
  border:1px solid color-mix(in srgb,var(--hairline) 80%,transparent);box-shadow:0 40px 80px -56px color-mix(in srgb,var(--violet-deep) 55%,transparent)}
.cs-cloud-glow::before,.cs-cloud-glow::after{content:"";position:absolute;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--violet) 18%,transparent)}
.cs-cloud-glow::before{width:9rem;height:9rem;right:-2.4rem;top:-2.4rem}
.cs-cloud-glow::after{width:5.5rem;height:5.5rem;left:1.2rem;bottom:1.4rem}
.cs-cloud ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.5rem 1.4rem;max-width:36rem}
.cs-cloud li{font-size:var(--fs);line-height:1.15;transform:rotate(var(--tilt))}
.cs-cloud a{display:inline-block;font-family:var(--display);font-weight:600;letter-spacing:-.015em;text-decoration:none;color:color-mix(in srgb,var(--c) 78%,var(--plum));opacity:.85;transition:opacity .2s ease,transform .2s ease,color .2s ease}
.cs-cloud a:hover,.cs-cloud a:focus-visible{opacity:1;transform:scale(1.07);color:var(--c)}
.cs-cloud a:focus-visible{outline:3px solid var(--violet-bright);outline-offset:3px;border-radius:4px}
.cs-cloud a.is-current{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;opacity:1;font-weight:800;color:var(--plum);font-size:1.3em;padding:0 .15em;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--c) 38%,transparent) 58%,color-mix(in srgb,var(--c) 38%,transparent) 92%,transparent 92%);border-radius:3px}
@media (max-width:900px){.cs-cloud{min-height:0;padding:1.8rem 1.2rem}.cs-cloud li{font-size:calc(var(--fs)*.78)}.cs-cloud ul{gap:.35rem 1rem}}
@media (prefers-reduced-motion:reduce){.cs-cloud a{transition:none}.cs-cloud a:hover{transform:none}}

/* Topic photographs: one treatment for all of them. Greyscale photo blended over a brand gradient (--c is the topic colour), soft grain, rounded corners. */
.duo{position:relative;display:block;overflow:hidden;margin:0;border-radius:var(--radius-l);background:var(--mist);isolation:isolate}
.duo img{display:block;width:100%;height:100%;object-fit:cover;}
.cs-media{aspect-ratio:4/3;box-shadow:0 40px 80px -56px color-mix(in srgb,var(--violet-deep) 60%,transparent)}
.cs-media figcaption{position:absolute;left:1rem;bottom:1rem;z-index:2;display:flex;align-items:center;gap:.55rem;padding:.55rem .85rem;border-radius:var(--radius-s);background:rgba(255,255,255,.92);color:var(--plum);font-family:var(--display);font-weight:600;font-size:.95rem;backdrop-filter:blur(6px)}
.cs-media figcaption .ico{display:inline-grid;color:var(--c)}
.cs-media figcaption .ico svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-collage{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:5.2rem;gap:.8rem}
.cs-tile{text-decoration:none}
.cs-tile span{position:absolute;left:.7rem;bottom:.6rem;right:.7rem;z-index:2;font-family:var(--display);font-weight:600;font-size:.88rem;line-height:1.25;color:#fff;text-shadow:0 1px 10px rgba(20,10,50,.55)}
.cs-tile::before{content:"";position:absolute;inset:auto 0 0 0;height:70%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(24,10,56,.82),rgba(24,10,56,0))}
.cs-tile img{transition:transform .5s ease}
.cs-tile:hover img,.cs-tile:focus-visible img{transform:scale(1.06)}
.cs-tile:focus-visible{outline:3px solid var(--violet-bright);outline-offset:3px}
.cs-tile.t3 span,.cs-tile.t5 span{font-size:.7rem;left:.5rem;right:.4rem;overflow-wrap:anywhere}
.cs-tile.t0{grid-column:1/4;grid-row:1/4}
.cs-tile.t1{grid-column:4/7;grid-row:1/3}
.cs-tile.t2{grid-column:4/6;grid-row:3/5}
.cs-tile.t3{grid-column:6/7;grid-row:3/5}
.cs-tile.t4{grid-column:1/3;grid-row:4/6}
.cs-tile.t5{grid-column:3/4;grid-row:4/6}
.cs-tile.t6{grid-column:4/7;grid-row:5/6}
.gcard.link .gimg{aspect-ratio:16/9;margin:-1.7rem -1.7rem 1.1rem;border-radius:var(--radius-l) var(--radius-l) 0 0}
@media (max-width:900px){.cs-collage{grid-auto-rows:4rem}.cs-media{aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.cs-tile img{transition:none}.cs-tile:hover img{transform:none}}