*,*::before,*::after{box-sizing:border-box}
/* Typito brand tokens — primary #441A5D, accent #ffd538 (docs/blog-design-system.md) */
:root{--brand:#441A5D;--brand-soft:#5a2478;--accent:#ffd538;
      --ink:#1a1c1e;--ink-2:#3c4043;--muted:#5F6368;--line:#E8EAED;--line-2:#f1f3f4;
      --bg:#F8F9FA;--card:#fff;--link:#441A5D;
      --hdr:96px;                          /* sticky header height: rail + anchors clear it */
  --measure:74ch;                       /* the single most important reading control */
      --r:14px;--shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:17px/1.7 Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
     color:var(--ink);background:var(--bg);display:flex;flex-direction:column;min-height:100vh;
     -webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
header.top{background:#fff;border-top:3px solid var(--brand);position:sticky;top:0;z-index:20}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--brand)}
.brand img{height:24px;width:auto;display:block}
.brand:hover{text-decoration:none}
.topbar .contact{font-size:14px;font-weight:600}
nav.tabs{display:flex;gap:26px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
nav.tabs a{padding:12px 2px;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;font-weight:600}
nav.tabs a:hover{color:var(--ink);text-decoration:none}
nav.tabs a.on{color:var(--brand);border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{background:#fff;border-bottom:1px solid var(--line);padding:34px 0 38px}
.hero h1{margin:0 0 18px;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.searchbox{display:flex;max-width:540px;box-shadow:var(--shadow);border-radius:10px}
.searchbox input{flex:1;padding:13px 16px;border:1px solid #dadce0;border-right:0;border-radius:10px 0 0 10px;
  font-size:16px;min-width:0;font-family:inherit;background:#fff}
.searchbox input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(68,26,93,.12)}
.searchbox button{padding:13px 22px;border:0;background:var(--brand);color:#fff;border-radius:0 10px 10px 0;
  cursor:pointer;font-size:15px;font-weight:600;font-family:inherit}
.searchbox button:hover{background:var(--brand-soft)}
/* stale plan-packaging claims were removed from the body (scrub_plan_gating);
   this replaces them with one pointer to the live source of truth */
article.doc .plan-note{margin:30px 0 0;padding:14px 18px;font-size:15px;line-height:1.6;
  color:var(--ink-2);background:#faf8fb;border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 10px 10px 0}
article.doc .plan-note a{font-weight:600;white-space:nowrap}

.actions{margin-top:15px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-size:14.5px}
/* the assistant launcher is a <button> for semantics but reads as a peer of the
   "Email support" link beside it */
.actions > *{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14.5px;
  color:var(--brand);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.actions > * > svg{flex:none;opacity:.75}
.actions > * > span{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(68,26,93,.32)}
.actions > *:hover > span{text-decoration-color:var(--brand)}
.actions > *:hover > svg{opacity:1}

main{padding:30px 0 60px;flex:1}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px 36px;box-shadow:var(--shadow)}
h2.kb{margin:0 0 6px;font-size:21px;font-weight:700;color:var(--ink)}
.kb-sub{margin:0 0 26px;color:var(--muted);font-size:15px}

/* ---------- knowledge-base index ---------- */
details.catblock > summary{display:none}
.cat{margin:0;padding:22px 0 12px;border-top:1px solid var(--line-2);color:var(--brand);
     font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cat a{color:var(--brand)}
.cat:first-of-type{border-top:0;padding-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:4px 44px;margin-bottom:10px}
.fold{padding:10px 0 14px}
.fold h3{margin:0 0 6px;font-size:15.5px;font-weight:700}
.fold h3 a{color:var(--ink)}
.fold h3 .n{color:var(--muted);font-weight:400;font-size:13px}
ul.arts{list-style:none;margin:0;padding:0}
ul.arts li{position:relative}
ul.arts li a{display:block;padding:6px 10px 6px 22px;font-size:15px;border-radius:7px;color:var(--ink-2);line-height:1.45}
ul.arts li a::before{content:"";position:absolute;left:6px;top:15px;width:6px;height:6px;background:var(--accent);border-radius:50%}
ul.arts li a:hover{background:rgba(68,26,93,.045);color:var(--brand);text-decoration:none}
.more{display:inline-block;margin:4px 0 0 10px;font-size:13.5px;font-weight:600}

/* ---------- article ---------- */
.crumb{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.crumb a{color:var(--muted)}
.artgrid{display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:40px;align-items:start;
         max-width:calc(var(--measure) + 72px + 268px);margin:0 auto}
.panel.article{max-width:none;margin:0}
article.doc h1{font-size:34px;margin:0 0 10px;line-height:1.22;letter-spacing:-.022em;max-width:var(--measure)}
.meta{color:var(--muted);font-size:13.5px;margin:0 0 30px;padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.body{font-size:17px;line-height:1.75;color:var(--ink-2);max-width:var(--measure)}
.body > *{margin:0 0 1.15em}
.body h2,.body h3,.body h4{scroll-margin-top:calc(var(--hdr) + 20px)}
.body h2{font-size:26px;line-height:1.28;font-weight:650;color:var(--ink);margin:2.4em 0 .7em;letter-spacing:-.014em;padding-top:.5em;border-top:1px solid var(--line-2)}
.body h2:first-child{border-top:0;padding-top:0;margin-top:0}
.body h3{font-size:19px;line-height:1.35;font-weight:600;color:var(--ink);margin:1.9em 0 .45em}
.body strong,.body b{font-weight:600;color:inherit}
.body ul,.body ol{padding-left:1.5em}
.body li{margin:.4em 0}
.body a{font-weight:600;text-decoration:underline;text-decoration-color:rgba(68,26,93,.3);text-underline-offset:2px}
.body a:hover{text-decoration-color:var(--brand)}

/* screenshots as figures — one consistent width, framed, zoomable */
/* never upscale a screenshot past its natural size — the source assets range from
   narrow UI panels to full app captures, and stretching the small ones to the text
   measure made them blurry and enormous. Cap height too so tall portrait panels
   don't eat a whole viewport. */
.body figure{margin:1.7em 0;max-width:var(--measure);text-align:center}
.body figure img{display:inline-block;width:auto;max-width:100%;height:auto;max-height:66vh;
  border:1px solid var(--line);border-radius:10px;background:#fbfbfc;
  box-shadow:0 2px 8px rgba(16,24,40,.07);cursor:zoom-in;vertical-align:middle}
.body figure img:hover{border-color:#d3d6da}
.body p > img{max-width:100%;height:auto;border-radius:10px}

/* numbered steps */
/* Asides that are genuinely useful but must not read as a step. The old articles
   fused these into step titles ("Step 4: Creating step sequences Note: ..."). */
.body p.note{background:var(--bg);border-left:3px solid var(--line);border-radius:0 8px 8px 0;
  padding:12px 16px;font-size:15.5px;color:var(--ink-2);margin:1.4em 0}
.body p.note a{font-weight:600}
.body p.step{display:flex;gap:12px;align-items:flex-start;margin:1.8em 0 .7em;font-weight:550;color:var(--ink);font-size:17px}
.body p.step .step-n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.body p.step .step-t{flex:1}

.body pre,.body code{white-space:pre-wrap;overflow-wrap:anywhere}
.body pre{background:#f6f8fa;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.6}
.body .fd-callout{background:rgba(68,26,93,.045);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;
  padding:14px 18px;font-family:inherit;font-size:16px;color:var(--ink-2)}
.body table{border-collapse:collapse;width:100%;display:block;overflow-x:auto;font-size:15.5px;
  border:1px solid var(--line);border-radius:10px}
.body thead th{background:var(--brand);color:#fff;font-weight:600;text-align:left}
.body td,.body th{border-bottom:1px solid var(--line);padding:10px 14px}
.body iframe{max-width:100%;border-radius:10px;aspect-ratio:16/9;height:auto;width:100%}
.body hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}

/* on-this-page */
/* Docked rail, Stripe-style: sticky, scroll-spied, with a moving indicator bar.
   Outside the reading column so nothing floats inside the prose. */
.toc{position:sticky;top:calc(var(--hdr) + 18px);font-size:13.5px;max-height:calc(100vh - var(--hdr) - 40px);
     overflow:auto;padding:2px 0 2px 14px;border-left:2px solid var(--line-2)}
.toc h4{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin:5px 0;line-height:1.4}
.toc li.lv-h3{padding-left:11px}
.toc a{color:var(--muted);text-decoration:none;display:block;padding:1px 0;
       transition:color .15s}
.toc a:hover{color:var(--ink)}
.toc li{position:relative}
.toc li.active > a{color:var(--brand);font-weight:600}
.toc li.active::before{content:"";position:absolute;left:-16px;top:3px;bottom:3px;
       width:2px;background:var(--brand);border-radius:2px}

.related{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.related h4{margin:0 0 10px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.helpful{margin-top:28px;padding:18px 20px;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;font-size:15px}
.helpful a{font-weight:700}

footer.bot{background:var(--brand);color:#cdc2d6;font-size:13.5px;padding:22px 0;margin-top:auto}
footer.bot a{color:#fff;font-weight:600}
footer.bot .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}

/* search results */
#results{list-style:none;padding:0;margin:0}
#results li{padding:16px 0;border-bottom:1px solid var(--line-2)}
#results li a{font-size:17px;font-weight:700}
#results .c{color:var(--muted);font-size:13px;margin-top:2px}
#results .s{color:var(--ink-2);font-size:15px;margin-top:5px;line-height:1.6}
mark{background:#fff3bf;padding:0 2px;border-radius:2px}

/* image lightbox */
.lb{position:fixed;inset:0;background:rgba(20,14,26,.82);display:none;align-items:center;justify-content:center;
    z-index:100;padding:28px;cursor:zoom-out;backdrop-filter:blur(2px)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.4)}

@media(max-width:820px){
  .artgrid{grid-template-columns:1fr;gap:0}
  .toc{position:static;max-height:none;border-left:0;padding:14px 16px;margin:0 0 22px;
       background:var(--bg);border:1px solid var(--line-2);border-radius:10px;order:-1}
  .toc li.active::before{display:none}
  .panel{padding:24px 20px;border-radius:12px}
  .panel.article{max-width:none}
  .hero{padding:26px 0 28px}
  .hero h1{font-size:25px}
  article.doc h1{font-size:27px}
  .body{font-size:16.5px}
  .grid{grid-template-columns:1fr;gap:0}
  /* mobile: categories collapse — 102 links is not a scroll anyone should do */
  details.catblock{border-top:1px solid var(--line-2);padding:2px 0}
  details.catblock:first-of-type{border-top:0}
  details.catblock > summary{display:flex;list-style:none;cursor:pointer;padding:15px 2px;font-size:12px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--brand);display:flex;justify-content:space-between;align-items:center}
  details.catblock > summary::-webkit-details-marker{display:none}
  details.catblock > summary::after{content:"+";font-size:17px;color:var(--muted);font-weight:400}
  details.catblock[open] > summary::after{content:"–"}
  .cat{display:none}
  ul.arts li a{padding:10px 10px 10px 22px}      /* 44px tap targets */
  ul.arts li a::before{top:19px}
  .topbar .contact{font-size:13.5px}
}
@media(max-width:420px){ .wrap{padding:0 16px} .hero h1{font-size:22px} article.doc h1{font-size:24px} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }