/* The resource pages (2026-10, EC-4852): /guides, /glossary and /faq (main.doc.rs, on top
   of marketing-glossary.css) and /security (main.legal.rs-sec, on top of marketing-legal.css).
   /demo (EC-4856) is here too, under main.doc.dm.
   Loaded by those four pages only (Reading resourceCss). Every selector is under .rs or
   .rs-sec, so the guide, term and topic pages are unchanged. The words are the pages' own;
   this is layout: a hub hero with a count panel, card and tile grids, topic cards whose
   questions link to their answers, and on /security stat tiles, control cards and a section
   list that follows the reader (resources.js). Motion: a rise on scroll where scroll-driven
   animation exists, and hover lifts; none under reduced motion. */

.rs-ico{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;--ic-accent:#EF5A2A}
body.light-mode .rs-ico{--ic-accent:#C2410C}

/* ---------- Hubs ---------- */
.doc.rs{max-width:1080px}
.rs>h2,.rs>p{max-width:760px}

.rs-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px 48px;align-items:center;margin:0 0 40px}
.rs-hero .crumb{margin-bottom:12px}
.rs-hero .definition{margin:0}
.rs-art{position:relative;aspect-ratio:1;border-radius:24px;border:1px solid var(--bdr);background:radial-gradient(90% 90% at 50% 45%,color-mix(in srgb,var(--amber) 16%,var(--s1)),var(--s1) 70%);display:grid;place-content:center;text-align:center;overflow:hidden}
.rs-art::before{content:"";position:absolute;inset:18%;border-radius:50%;border:2px dashed color-mix(in srgb,var(--amber) 35%,transparent)}
.rs-art b{position:relative;font:800 88px/1 'Barlow Condensed',sans-serif;color:var(--txt)}
.rs-art small{position:relative;font:700 14px/1.2 'Barlow Condensed',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-top:4px}
.rs-art span{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--bg);border:1px solid color-mix(in srgb,var(--amber) 40%,var(--bdr));color:var(--accent-text);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--amber) 60%,transparent)}
.rs-art span:nth-of-type(1){top:9%;left:12%}
.rs-art span:nth-of-type(2){top:30%;right:7%}
.rs-art span:nth-of-type(3){bottom:9%;left:24%}

/* Cards (/guides): numbered, an icon and an audience tag, the whole card a link. */
.doc ul.rs-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-reset:rs}
.rs-cards li{position:relative;counter-increment:rs;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;align-content:start;padding:22px 22px 44px;border:1px solid var(--bdr);border-radius:16px;background:var(--s1);transition:border-color .2s,transform .2s,box-shadow .2s}
.rs-cards li::before{content:counter(rs,decimal-leading-zero);position:absolute;top:18px;right:20px;font:800 15px/1 'Barlow Condensed',sans-serif;letter-spacing:.08em;color:var(--mut)}
.rs-cards li::after{content:"\2192";position:absolute;left:86px;bottom:16px;font:700 18px/1 'Barlow',sans-serif;color:var(--accent-text);transition:transform .2s}
.rs-cards .rs-badge{grid-row:span 3;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--amber) 13%,transparent);color:var(--accent-text)}
.rs-tag{justify-self:start;font:700 11px/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--amber) 45%,var(--bdr));color:var(--accent-text);margin-bottom:6px}
.doc .rs-cards a{font:800 21px/1.15 'Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--txt);text-decoration:none;padding-right:28px}
.rs-cards a::after,.rs-tiles a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.rs-cards p{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--sub)}
.rs-cards li:hover,.rs-tiles li:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--amber) 70%,transparent)}
.rs-topics>li:hover{border-color:color-mix(in srgb,var(--amber) 60%,var(--bdr))}
.rs-cards li:last-child:nth-child(odd),.rs-body>ul>li:last-child:nth-child(odd){grid-column:1/-1}
.rs-cards li:hover::after,.rs-tiles li:hover::after{transform:translateX(5px)}
.rs-cards li:focus-within,.rs-tiles li:focus-within{border-color:var(--amber)}
.rs-cards a:focus-visible,.rs-tiles a:focus-visible{outline:none}
.rs-cards li:has(a:focus-visible),.rs-tiles li:has(a:focus-visible){outline:3px solid var(--amber);outline-offset:3px}

/* Tiles (/glossary): the term's first letter large, the blurb, an arrow. */
.doc ul.rs-tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.rs-tiles li{position:relative;padding:20px 20px 44px;border:1px solid var(--bdr);border-radius:14px;background:var(--s1);transition:border-color .2s,transform .2s,box-shadow .2s}
.rs-tiles li::after{content:"\2192";position:absolute;left:20px;bottom:16px;font:700 18px/1 'Barlow',sans-serif;color:var(--accent-text);transition:transform .2s}
.doc .rs-tiles a{display:block;font:800 22px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--txt);text-decoration:none}
.doc .rs-tiles a::first-letter{color:var(--accent-text);font-size:1.45em}
.rs-tiles p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--sub)}

/* Topic cards (/faq): the topic, its question count, and each question linking to its answer. */
.doc ul.rs-topics{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.rs-topics>li{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:18px 36px;padding:26px 28px;border:1px solid var(--bdr);border-radius:18px;background:var(--s1);transition:border-color .2s,transform .2s,box-shadow .2s}
.doc .rs-topics>li>a{align-self:start;font:800 26px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--txt);text-decoration:none}
.doc .rs-topics>li>a:hover{color:var(--accent-text)}
.rs-qn{align-self:start;margin-top:-6px;font:700 12px/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.rs-topics ul{grid-column:2;grid-row:1/span 2;list-style:none;padding:0;margin:0;display:grid;gap:2px}
.rs-topics ul li{margin:0}
.doc .rs-topics ul a{display:flex;gap:10px;padding:9px 10px;border-radius:8px;font-size:16px;line-height:1.45;color:var(--sub);text-decoration:none;transition:background .15s,color .15s}
.doc .rs-topics ul a::before{content:"Q";flex:none;font:800 13px/1.6 'Barlow Condensed',sans-serif;color:var(--accent-text)}
.doc .rs-topics ul a:hover{background:color-mix(in srgb,var(--amber) 9%,transparent);color:var(--txt)}

/* Bands and pairs: the asks and the "why" at the foot of a hub. */
.rs-band{margin:44px 0 0;padding:22px 26px;border-radius:16px;border:1px solid var(--bdr);background:linear-gradient(100deg,color-mix(in srgb,var(--amber) 10%,var(--s1)),var(--s1) 60%)}
.doc .rs-band h2{margin:0 0 6px;padding:0;border:0;font-size:22px}
.rs-band p{margin:0;max-width:none}
.rs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:44px 0 0}
.rs-pair>section{padding:22px 26px;border-radius:16px;border:1px solid var(--bdr);background:var(--s1)}
.rs-pair>section:first-child{background:linear-gradient(140deg,color-mix(in srgb,var(--amber) 10%,var(--s1)),var(--s1) 70%)}
.doc .rs-pair h2{margin:0 0 8px;padding:0;border:0;font-size:22px}
.rs-pair p{margin:0}
.rs>.cta{max-width:none;margin-top:44px}

/* ---------- /security ---------- */
.legal.rs-sec{max-width:1120px}
.rs-shero{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px 48px;align-items:center;margin:0 0 8px}
.rs-shero .notice{margin:0}
.rs-shield{justify-self:end;display:grid;place-items:center;width:200px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--amber) 20%,var(--s1)) 0 38%,transparent 39%),repeating-radial-gradient(circle,transparent 0 22px,color-mix(in srgb,var(--amber) 14%,transparent) 22px 23px);color:var(--accent-text)}
.rs-shield .rs-ico{width:62px;height:62px;stroke-width:1.6}

.rs-sec .facts{padding:22px;border-left-width:1px;border-radius:16px}
.rs-sec .facts ul{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.rs-sec .facts li{padding:14px 16px;border-radius:12px;border:1px solid var(--f-bdr);background:color-mix(in srgb,var(--f-acc) 5%,transparent)}
.rs-sec .facts strong{font-weight:800;color:var(--f-acc)}

.rs-body>p{max-width:760px}
.rs-body h2{display:flex;align-items:center;gap:14px;scroll-margin-top:96px}
.rs-h{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--amber) 13%,transparent);color:var(--accent-text)}
.rs-h .rs-ico{width:21px;height:21px}
.rs-body>ul{list-style:none;padding:0;margin:8px 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.legal .rs-body>ul>li{margin:0;padding:16px 18px 16px 20px;border:1px solid var(--bdr);border-left:3px solid color-mix(in srgb,var(--amber) 55%,var(--bdr));border-radius:12px;background:var(--s1);font-size:15px;line-height:1.55;color:var(--sub);transition:border-color .2s}
.legal .rs-body>ul>li:hover{border-color:color-mix(in srgb,var(--amber) 60%,var(--bdr))}
.legal .rs-body>ul>li strong{color:var(--txt);font-weight:700}
.rs-call{margin:40px 0 0;padding:4px 26px 12px;border:1px solid color-mix(in srgb,var(--amber) 45%,var(--bdr));border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--amber) 9%,var(--s1)),var(--s1) 65%)}
.legal .rs-call h2{border-top:0;margin-top:18px;padding-top:0}
.rs-call+.rs-call{margin-top:16px}

/* The section list (built by resources.js from the h2s; absent without script). */
.rs-has-toc .rs-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start}
.rs-toc{position:sticky;top:96px;margin-top:44px;padding-left:2px}
.rs-toc p{margin:0 0 10px;font:700 12px/1 'Barlow Condensed',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.rs-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--bdr)}
.rs-toc li{margin:0}
.legal .rs-toc a{display:block;margin-left:-2px;padding:6px 0 6px 14px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--mut);text-decoration:none;transition:color .15s,border-color .15s}
.legal .rs-toc a:hover{color:var(--txt)}
.legal .rs-toc a.on{color:var(--accent-text);border-left-color:var(--amber);font-weight:600}

/* ---------- /demo (EC-4856) ---------- */
/* The intro beside the form card; the roles as icon tiles. Only /demo carries .dm, so the
   .demo-form on /pricing and /api-reference keeps marketing-glossary.css's look. */
.doc.dm{max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:40px 56px;align-items:start}
.dm-intro{position:sticky;top:104px}
.dm-intro .definition{margin-bottom:28px}
.dm h1{font-size:clamp(40px,5.5vw,64px)}
.doc ul.dm-sides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dm-sides li{display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px;border:1px solid var(--bdr);border-radius:12px;background:var(--s1);font:700 14px/1 'Barlow Condensed',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--txt)}
.dm-sides .rs-ico{flex:none;width:34px;height:34px;padding:7px;border-radius:9px;background:color-mix(in srgb,var(--amber) 13%,transparent);color:var(--accent-text)}

.dm .demo-form{position:relative;gap:18px 16px;padding:32px;border-radius:20px;box-shadow:0 30px 70px -40px color-mix(in srgb,var(--amber) 55%,transparent),0 2px 0 0 var(--amber) inset}
.dm .form-group:has(#demo-company){grid-column:1/-1}
.dm .demo-form .form-label{font-size:12px}
.dm .demo-form .form-input,.dm .demo-form .form-textarea{border-radius:10px;padding:13px 15px;transition:border-color .15s,box-shadow .15s}
.dm .demo-form .form-input:hover,.dm .demo-form .form-textarea:hover{border-color:color-mix(in srgb,var(--amber) 45%,var(--bdr))}
.dm .demo-form .form-input:focus,.dm .demo-form .form-textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 22%,transparent)}
.dm .demo-form .role-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dm .demo-form .role-check-item{flex-direction:column;align-items:flex-start;gap:10px;min-height:104px;padding:14px;border-radius:12px;transition:border-color .15s,background .15s,transform .15s}
.dm .demo-form .role-check-item:hover{border-color:color-mix(in srgb,var(--amber) 55%,var(--bdr))}
.dm .demo-form .role-check-box{position:absolute;top:12px;right:12px;border-radius:50%}
.dm .dm-ri{width:32px;height:32px;padding:6px;border-radius:9px;background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--accent-text)}
.dm .demo-form .role-check-lbl{font-size:14px;line-height:1.3}
.dm .demo-form .role-check-item:has(.ec-role-input:checked){box-shadow:0 0 0 1px var(--amber) inset}
.dm .demo-form .role-check-item:has(.ec-role-input:checked) .dm-ri{background:var(--amber);color:#0F1117}
.dm .demo-form .role-check-item:has(.ec-role-input:focus-visible){outline:2px solid var(--amber);outline-offset:2px}
.dm .demo-form .form-submit{padding:17px;border-radius:12px;font-size:17px;transition:transform .15s,box-shadow .15s}
.dm .demo-form .form-submit:hover{opacity:1;transform:translateY(-1px);box-shadow:0 14px 30px -14px #EF4444}
.dm .ec-form-status:not(:empty){padding:12px 14px;border-radius:10px;border:1px solid currentColor;background:color-mix(in srgb,currentColor 8%,transparent)}

/* ---------- Phones and tablets ---------- */
@media(max-width:900px){
  .doc.dm{grid-template-columns:1fr}
  .dm-intro{position:static}
  .dm-sides{display:none}
  .rs-hero{grid-template-columns:1fr}
  .rs-art{aspect-ratio:auto;grid-template-columns:auto auto auto auto;grid-auto-flow:column;place-content:start;align-items:center;gap:10px 12px;padding:14px 16px;text-align:left;border-radius:16px}
  .rs-art::before{display:none}
  .rs-art span{position:static;width:40px;height:40px;border-radius:11px}
  .rs-art span .rs-ico{width:20px;height:20px}
  .rs-art b{font-size:40px;margin-left:8px}
  .rs-art small{margin:0}
  .rs-topics>li{grid-template-columns:1fr;padding:22px}
  .rs-topics ul{grid-column:auto;grid-row:auto}
  .rs-shero{grid-template-columns:1fr}
  .rs-shield{display:none}
  .rs-has-toc .rs-wrap{display:block}
  .rs-toc{position:static;margin:28px 0 0}
  .rs-toc ol{display:flex;gap:8px;overflow-x:auto;border:0;padding-bottom:6px;scrollbar-width:thin}
  .legal .rs-toc a{margin:0;white-space:nowrap;padding:7px 12px;border:1px solid var(--bdr);border-radius:999px;background:var(--s1)}
  .legal .rs-toc a.on{border-color:var(--amber)}
}
@media(max-width:640px){
  .doc ul.rs-cards,.rs-pair,.rs-body>ul{grid-template-columns:1fr}
  .rs-cards li{grid-template-columns:40px minmax(0,1fr);padding:18px 18px 42px}
  .rs-cards .rs-badge{width:40px;height:40px}
  .rs-cards li::after{left:74px}
  .doc .rs-cards a{font-size:19px}
  .rs-band,.rs-pair>section,.rs-call{padding-left:18px;padding-right:18px}
  .dm .demo-form{padding:20px;border-radius:16px}
  .dm .demo-form .role-checklist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm .demo-form .role-check-item{min-height:92px}
}

@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rs-cards>li,.rs-tiles>li,.rs-topics>li,.rs-band,.rs-pair>section,.rs-body>ul>li,.rs-call{animation:rs-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
  .dm .demo-form,.dm-intro{animation:rs-rise .6s cubic-bezier(.2,.7,.2,1) both}
  .dm .demo-form{animation-delay:.12s}
  .dm .demo-form .role-check-item:active{transform:scale(.98)}
  .rs-art span{animation:rs-bob 6s ease-in-out infinite}
  .rs-art span:nth-of-type(2){animation-delay:-2s}
  .rs-art span:nth-of-type(3){animation-delay:-4s}
}
@media(prefers-reduced-motion:no-preference) and (max-width:900px){.rs-art span{animation:none}}
@media(prefers-reduced-motion:reduce){.rs-cards li,.rs-tiles li,.rs-topics>li{transition:none}.rs-cards li:hover,.rs-tiles li:hover{transform:none}}
@keyframes rs-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rs-bob{50%{transform:translateY(-7px)}}