@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

:root{
  --bg:#FEFEFE;
  --ink:#222121;
  --ink-soft:#4C4C49;
  --gray:#717171;
  --eyebrow:#717170;
  --line:#E9E8E4;
  --accent:#8B7FE8;
  --accent-text:#6D5DE2;
  --accent-soft:#F1EFFC;
  --measure:680px;
  --measure-wide:820px;
  --section-gap:180px;
  --section-gap-mobile:112px;
}
.cs-root{
  background:var(--bg); color:var(--ink);
  font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;
  padding:0 24px 140px; min-height:100%;
}

.hide-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.hide-scrollbar::-webkit-scrollbar{ display:none; }

.cs-eyebrow{
  text-align:center; text-transform:uppercase;
  font-size:14px; font-weight:500; letter-spacing:0;
  color:var(--eyebrow); line-height:1.2; margin:0 0 16px;
}
/* The eyebrow and the reading estimate sit side by side on one line */
.cs-eyebrow-row{
  display:flex; align-items:baseline; justify-content:center; gap:12px; margin:0 0 20px;
}
.cs-eyebrow-row .cs-eyebrow{ margin:0; }
.cs-eyebrow-row .cs-reading{ margin:0; font-size:12px; color:var(--gray); }
.cs-eyebrow-row .cs-reading::before{
  content:""; display:inline-block; vertical-align:middle;
  width:4px; height:4px; border-radius:999px; background:var(--gray);
  margin-right:12px; transform:translateY(-1px);
}
.cs-hero{ padding-top:150px; max-width:var(--measure-wide); margin:0 auto; }
.cs-title{
  text-align:center; font-weight:400;
  font-size:clamp(26px,4.2vw,42px); line-height:1.2; letter-spacing:0;
  color:var(--ink); margin:0 auto; max-width:936px;
}
.cs-meta{ text-align:center; color:var(--gray); font-size:16px; margin-top:24px; line-height:1.7; }
.cs-demo-credentials{
  text-align:center; margin-top:10px; font-size:13.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--gray);
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
/* Links that sit inside a caption under an image or video. Always the same:
   orange, underlined on hover, and the word itself is the target. */
/* ---- Links and captions: one set of rules for every project ----
   Three kinds only. `cs-inline-link` sits inside a sentence, `cs-textlink`
   stands on its own in a list, `cs-jump-link` moves you down the same page.
   All three use the accent that clears AA on the page, and all three underline
   on hover so the affordance is the same wherever it appears. */
.cs-inline-link,
.cs-process-step-link a{
  color:var(--accent-text); font-weight:600; text-decoration:none;
  text-underline-offset:3px;
}
.cs-inline-link:hover,
.cs-process-step-link a:hover{ text-decoration:underline; }

/* Every caption under an image or a video, at one size and one colour */
.cs-root figcaption{
  text-align:center; font-size:13px; line-height:1.45;
  color:var(--gray); margin-top:10px;
}

.cs-hero-video{ margin:36px auto 0; max-width:var(--measure-wide); }
.cs-hero-video video{
  width:100%; display:block; border-radius:16px; border:1px solid var(--line);
  background:#F7F6F2;
}

.cs-hero-image{ margin:36px auto 0; max-width:var(--measure-wide); }
.cs-hero-image img{
  width:100%; display:block; border-radius:16px; border:1px solid var(--line);
  background:#F7F6F2;
}

/* Every section gets the exact same top offset, no matter what came before it */
.cs-section{ padding-top:var(--section-gap); padding-bottom:0; margin-bottom:0; max-width:var(--measure); margin-left:auto; margin-right:auto; }
.cs-section > *:last-child{ margin-bottom:0 !important; }
#pv-process.cs-section, #pv-solution.cs-section, .cs-section.is-wide{ max-width:var(--measure-wide); }

/* The lead is the scan layer: a statement big enough to read on its own, so
   the eyebrow plus this plus the image below carry the whole section. The
   body underneath is supporting detail for whoever stops to read. */
.cs-lead{
  text-align:center; font-size:clamp(24px,4.2vw,42px); font-weight:400; line-height:1.2;
  letter-spacing:0; color:var(--ink); margin:0 auto; max-width:936px;
}
.cs-body{ font-size:16px; line-height:1.5; color:var(--ink-soft); margin:32px auto 0; max-width:645px; }
.cs-body.is-centered{ text-align:center; max-width:645px; }
.cs-body p{ margin:0 0 18px; }
.cs-body p:last-child{ margin-bottom:0; }
.cs-body strong{ color:var(--ink); font-weight:600; }

/* Media — labeled placeholder for slots with no asset yet, real image otherwise */
.cs-media{
  margin-top:32px; aspect-ratio:16/9; border-radius:16px;
  border:1.5px dashed var(--line); background:#F7F6F2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:20px;
}
.cs-media-type{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent-text); background:var(--accent-soft); padding:4px 10px; border-radius:999px;
}
.cs-media-label{ font-size:14px; color:var(--gray); }

.cs-media-image{ margin:32px auto 0; max-width:var(--measure); }
.cs-media-image img{ width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#fff; cursor:zoom-in; }

.cs-media-pair{ display:flex; gap:16px; margin-top:32px; max-width:var(--measure); margin-left:auto; margin-right:auto; }
.cs-media-pair .cs-media, .cs-media-pair .cs-media-image{ flex:1; margin-top:0; }
.cs-media-pair .cs-media{ aspect-ratio:4/3; }
@media (max-width:640px){ .cs-media-pair{ flex-direction:column; } }

/* Any image that can open in the lightbox */
img.cs-zoomable{ cursor:zoom-in; }

.cs-lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(20,18,30,.9);
  display:flex; align-items:center; justify-content:center; padding:32px;
}
.cs-lightbox-stage{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  overflow:auto; pointer-events:none;
}
.cs-lightbox-stage img{
  max-width:min(92vw,1400px); max-height:88vh; display:block; border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.4); transition:transform .18s ease; transform-origin:center;
  pointer-events:auto;
}
.cs-lightbox-close,
.cs-lightbox-zoom,
.cs-lightbox-nav{
  position:fixed; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease;
}
.cs-lightbox-close:hover,
.cs-lightbox-zoom:hover,
.cs-lightbox-nav:hover{ background:rgba(255,255,255,.24); }

.cs-lightbox-close{ top:20px; right:24px; width:40px; height:40px; font-size:22px; line-height:1; }

.cs-lightbox-zoom-controls{
  position:fixed; top:20px; right:76px; display:flex; gap:8px;
}
.cs-lightbox-zoom{ position:static; width:40px; height:40px; font-size:20px; line-height:1; }

.cs-lightbox-nav{
  top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:30px; line-height:1;
}
.cs-lightbox-prev{ left:20px; }
.cs-lightbox-next{ right:20px; }
@media (max-width:640px){
  .cs-lightbox-nav{ width:42px; height:42px; font-size:24px; }
  .cs-lightbox-prev{ left:8px; } .cs-lightbox-next{ right:8px; }
}

body.cs-lightbox-open{ overflow:hidden; }

/* Role checklist — two columns on a 40px rhythm, each line marked with a
   coloured asterisk sitting in its own 20px column so the text edges line up. */
.cs-checklist{
  list-style:none; margin:32px auto 0; padding:0; width:max-content; max-width:100%;
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--rows,3),auto);
  column-gap:44px; row-gap:14px; text-align:left;
}
.cs-checklist-item{
  display:grid; grid-template-columns:24px 1fr; align-items:baseline;
  font-size:16px; line-height:1.35; color:var(--ink-soft);
}
.cs-checklist-check{
  font-size:26px; line-height:1.2; color:var(--accent-text);
  align-self:start;
}
@media (max-width:640px){
  .cs-checklist{ grid-auto-flow:row; grid-template-rows:none; width:100%; }
  .cs-checklist-item{ margin-bottom:0; }
}

/* Where the project stands, under the title */
.cs-status{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:18px 0 0; font-size:13px; font-weight:600; color:var(--accent-text);
}
.cs-status{ font-size:16px; font-weight:400; color:var(--eyebrow); }
.cs-status-dot{
  width:10px; height:10px; border-radius:999px; display:block; position:relative;
  border:1px solid var(--accent);
}
.cs-status-dot::after{
  content:""; position:absolute; inset:2px; border-radius:999px; background:var(--accent);
  animation:cs-pulse 2s ease-in-out infinite;
}
@keyframes cs-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion: reduce){ .cs-status-dot::after{ animation:none } }

/* Process flowchart — aligned, one colour per step, with a clickable arrow
   between them, the way the note on the design asks for. */
.cs-flowchart{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; max-width:var(--measure-wide); margin:40px auto 0;
}
.cs-flow-item{ display:flex; align-items:center; gap:10px; }
.cs-flow-node{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 20px; border-radius:9999px; text-decoration:none;
  background:var(--flow-color,var(--accent)); color:var(--flow-text,#FEFEFE);
  transition:transform .18s ease, box-shadow .18s ease;
}
a.cs-flow-node:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(20,18,30,.2); }
.cs-flow-node-index{
  font-size:13px; font-weight:600; color:inherit;
  font-variant-numeric:tabular-nums;
}
.cs-flow-node-label{ font-size:16px; font-weight:500; color:inherit; white-space:nowrap; }

/* The arrow belongs to the step it points at, so it inherits that step's colour
   and follows it to the next line when the chart wraps. */
.cs-flow-arrow{
  font-size:15px; line-height:1; color:var(--flow-color,var(--gray));
  text-decoration:none; transition:transform .18s ease;
}
a.cs-flow-arrow:hover{ transform:translateX(3px); }

/* Where the project is now, and what is still ahead of it */
.cs-flow-node.is-current{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--flow-color,var(--accent)) 32%, #FEFEFE);
}
.cs-flow-node.is-future{ opacity:.55; position:relative; }
.cs-flow-node.is-future::after{
  content:attr(data-pending); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap; background:#222121; color:#FEFEFE;
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.cs-flow-node.is-future:hover{ opacity:1; }
.cs-flow-node.is-future:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.cs-flow-node-note{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:inherit; opacity:.9;
}

@media (max-width:640px){
  .cs-flowchart{ gap:8px; }
  .cs-flow-node{ padding:0 14px; height:34px; }
  .cs-flow-node-label{ font-size:14px; }
}

/* Process */
.cs-process-steps{ display:flex; flex-direction:column; gap:var(--section-gap); margin-top:var(--section-gap); }
.cs-process-step-heading{ margin:0 0 16px; }
.cs-process-step-index{ display:none; }
.cs-process-step-heading h3{
  margin:0; text-align:center; text-transform:uppercase;
  font-size:14px; font-weight:500; letter-spacing:0; line-height:1.2; color:var(--eyebrow);
}
/* A step leads with a statement at the same size as every other section */
.cs-process-step-lead{
  text-align:center; max-width:936px; margin:0 auto;
  font-size:clamp(24px,4.2vw,42px); line-height:1.2; font-weight:400; color:var(--ink);
}
.cs-process-step-body{
  text-align:center; max-width:645px; margin:32px auto 0; font-size:16px; line-height:1.5; color:var(--ink-soft);
}
.cs-process-step-note{
  text-align:center; max-width:520px; margin:20px auto 0; font-size:15.5px; font-weight:500; color:var(--ink);
}
/* A sentence that doubles as a jump to the section it is talking about */
.cs-jump-link{
  color:inherit; text-decoration:none; border-bottom:1px solid var(--accent);
  padding-bottom:1px; transition:color .18s ease;
}
.cs-jump-link::after{ content:" ↓"; color:var(--accent-text); }
.cs-jump-link:hover{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }

.cs-process-step-link{ text-align:center; margin:24px auto 0; font-size:16px; }

.cs-permissions-map{ margin:32px auto 0; max-width:var(--measure-wide); }
.cs-permissions-roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 24px; }
.cs-permission-role{ border-top:2px solid var(--accent); padding-top:16px; }
.cs-permission-role-name{ font-weight:600; color:var(--ink); margin:0 0 10px; font-size:15px; }
.cs-permission-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cs-permission-list li{
  font-size:13.5px; line-height:1.5; color:var(--ink-soft); padding-left:14px; position:relative;
}
.cs-permission-list li::before{ content:"—"; position:absolute; left:0; color:var(--gray); }
@media (max-width:700px){ .cs-permissions-roles{ grid-template-columns:1fr; gap:24px; } }

.cs-permissions-restrictions{
  margin-top:32px; background:#F7F6F2; border-radius:14px; padding:20px 24px;
}
.cs-permissions-restrictions-title{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--gray); margin:0 0 10px;
}
.cs-permissions-restrictions-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cs-permissions-restrictions-list li{ font-size:13.5px; color:var(--ink-soft); padding-left:14px; position:relative; }
.cs-permissions-restrictions-list li::before{ content:"🔒"; position:absolute; left:0; font-size:10px; top:3px; }

.cs-component-gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:var(--measure-wide); margin:32px auto 0;
}
.cs-component-gallery-item img{
  width:100%; display:block; border-radius:12px; border:1px solid var(--line); background:#fff;
  max-height:260px; object-fit:contain;
}
@media (max-width:700px){ .cs-component-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .cs-component-gallery{ grid-template-columns:1fr; } }

/* Real interface screenshots, shown as a mosaic in the Solution section —
   mixed tile sizes read as a gallery instead of a flat, uniform grid */
.cs-interface-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:110px; gap:12px;
  max-width:var(--measure-wide); margin:0 auto;
}
.cs-interface-grid-item{
  position:relative; margin:0; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#fff;
}
.cs-interface-grid-item.size-sm{ grid-column:span 1; grid-row:span 1; }
.cs-interface-grid-item.size-wide{ grid-column:span 2; grid-row:span 1; }
.cs-interface-grid-item.size-tall{ grid-column:span 1; grid-row:span 2; }
.cs-interface-grid-item.size-lg{ grid-column:span 2; grid-row:span 2; }
.cs-interface-grid-item img{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:top;
}
/* The one caption that deliberately breaks the rule above: it sits on top of
   the screenshot rather than under it, so it needs its own colour and scrim. */
.cs-interface-grid-item figcaption{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:16px 10px 8px;
  font-size:12px; color:#fff; text-align:left;
  /* The scrim has to hold at least 0.7 alpha everywhere the text sits, so the
     caption still clears AA over the lightest screenshot underneath it. */
  background:linear-gradient(
    to top,
    rgba(20,18,30,.82) 0%,
    rgba(20,18,30,.78) 60%,
    rgba(20,18,30,0) 100%
  );
}
@media (max-width:700px){
  .cs-interface-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .cs-interface-grid-item.size-lg{ grid-column:span 2; grid-row:span 2; }
}

/* Visual identity, nested inside the process "Identity" step */
.cs-typography{ margin:36px auto 0; max-width:var(--measure-wide); }
.cs-typography-font{
  display:flex; align-items:baseline; gap:10px; justify-content:center; margin-bottom:20px;
}
.cs-typography-font span{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--gray); }
.cs-typography-font strong{ font-size:22px; font-weight:600; color:var(--ink); }
.cs-typography-table{ border-top:1px solid var(--line); }
.cs-typography-row{
  display:grid; grid-template-columns:1.2fr .9fr .7fr .8fr 1.6fr; gap:10px;
  padding:10px 4px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-soft); align-items:center;
}
.cs-typography-row--head{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gray); font-weight:600; }
.cs-typography-row:not(.cs-typography-row--head) span:first-child{ color:var(--ink); font-weight:600; }
@media (max-width:640px){
  .cs-typography-row{ grid-template-columns:1fr; gap:2px; padding:12px 4px; }
  .cs-typography-row--head{ display:none; }
  .cs-typography-row:not(.cs-typography-row--head) span:first-child{ font-size:15px; }
}

.cs-color-groups{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; margin:36px auto 0; max-width:var(--measure-wide); }
.cs-color-group-name{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--gray); margin:0 0 10px; text-align:center; }
.cs-color-swatches{ display:flex; gap:8px; }
.cs-color-swatch{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cs-color-swatch-fill{ width:34px; height:34px; border-radius:8px; border:1px solid rgba(0,0,0,.06); display:block; }
.cs-color-swatch-label{ font-size:10.5px; color:var(--gray); }

/* Solution blocks */
.cs-solutions{ display:flex; flex-direction:column; gap:56px; margin-top:44px; max-width:var(--measure-wide); margin-left:auto; margin-right:auto; }
.cs-solution{ text-align:center; }
.cs-solution-problem{ margin:0 auto 8px; max-width:540px; font-size:17px; color:var(--ink); }
.cs-solution-decision{ margin:0 auto; max-width:540px; font-size:16.5px; line-height:1.6; color:var(--ink-soft); }

/* Code + live component showcase — dark code on one side, light demo on the
   other, so the two read as clearly different surfaces */
.cs-code-showcase{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:var(--measure-wide); margin:28px auto 0; align-items:stretch;
}
.cs-code-showcase > *{ min-width:0; }
@media (max-width:760px){ .cs-code-showcase{ grid-template-columns:1fr; } }

.cs-code-panel{ background:#1E1B2E; border-radius:14px; padding:20px 22px; overflow-x:auto; text-align:left; box-sizing:border-box; max-width:100%; }
.cs-code-file{ margin:0 0 12px; font-size:12px; font-weight:600; color:#A99EDB; letter-spacing:.03em; }
.cs-code-pre{ margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.6; color:#E4E1F2; white-space:pre; }

.cs-component-demo{
  background:#fff; border-radius:14px; padding:24px 22px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(20,18,30,.06);
  box-sizing:border-box; max-width:100%;
}
.cs-component-demo-mount{ width:100%; display:flex; justify-content:center; }

/* Fixed width so selecting/deselecting options never resizes the dropdown.
   The component's own code and classes stay untouched, this only constrains
   the box it renders into. */
#multiselect{ width:260px; max-width:100%; }

/* Results */
.cs-result-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:var(--measure); margin:36px auto 0; }
.cs-result-card{ text-align:center; padding:24px 18px; border-radius:16px; background:#F7F6F2; border:1px solid var(--line); }
.cs-result-card h3{ margin:0 0 10px; font-size:16px; font-weight:600; color:var(--accent-text); }
.cs-result-card p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-soft); }
@media (max-width:700px){ .cs-result-cards{ grid-template-columns:1fr; } }

/* Concept screens for features that were designed but never built */
.cs-next-disclaimer{
  text-align:center; margin:14px 0 0; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent-text);
}
.cs-next-features{ display:flex; flex-direction:column; gap:56px; margin-top:44px; }
.cs-next-feature h3{ margin:0 0 8px; font-size:20px; font-weight:600; color:var(--ink); text-align:center; }
.cs-next-feature > p{
  margin:0 auto; max-width:560px; font-size:16px; line-height:1.6; color:var(--ink-soft); text-align:center;
}
.cs-next-shots{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.cs-next-shots.is-single{ grid-template-columns:1fr; max-width:720px; margin-left:auto; margin-right:auto; }
.cs-next-shots figure{ margin:0; }
.cs-next-shots img{
  width:100%; display:block; border-radius:12px; border:1px solid var(--line); background:#fff;
}
@media (max-width:700px){ .cs-next-shots{ grid-template-columns:1fr; } }

/* Research findings — the reasoning behind the rest of the design */
.cs-findings{ max-width:645px; margin:40px auto 0; text-align:left; }
.cs-findings-title{
  margin:0 0 20px; padding-left:24px;
  font-size:16px; font-weight:600; line-height:1.2; color:var(--ink);
}
.cs-findings-title::after{ content:":"; }
.cs-findings ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.cs-findings.is-profiles ul{ gap:28px; }
.cs-findings.is-profiles li{ line-height:1.6; }
/* The part before the colon names the reader, so it leads the entry */
.cs-findings.is-profiles b{ display:block; font-weight:600; margin-bottom:4px; }
.cs-findings li{
  position:relative; padding-left:24px;
  font-size:16px; line-height:1.5; color:var(--ink-soft);
}
.cs-findings li::before{
  content:"*"; position:absolute; left:0; top:0;
  font-size:26px; line-height:1.5; color:var(--accent-text);
}

/* Two topic lists that belong side by side, as the design pairs analysis with
   its conclusions. */
.cs-findings-pair{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px;
  max-width:var(--measure-wide); margin:40px auto 0;
}
.cs-findings-pair .cs-findings{ margin:0; max-width:none; }
@media (max-width:720px){ .cs-findings-pair{ grid-template-columns:1fr; gap:32px; } }


.cs-links-label{
  text-align:center; text-transform:uppercase; font-size:12px; font-weight:600;
  letter-spacing:.1em; color:var(--gray); margin:44px 0 0;
}
.cs-links{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.cs-textlink{
  font-size:16px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  text-underline-offset:3px; transition:color .18s ease;
}
.cs-textlink:hover{ color:var(--accent-text); text-decoration:underline; }

/* A link with no destination yet, and the badge that says so */
.cs-textlink.is-soon{
  color:var(--gray); cursor:default; display:inline-flex; align-items:center; gap:8px;
}
.cs-textlink.is-soon:hover{ text-decoration:none; }
.cs-textlink-soon{
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent-text); background:var(--accent-soft); border-radius:999px; padding:3px 8px;
}
.cs-textlink .arr{ display:inline-block; transition:margin-left .18s ease; }
.cs-textlink:hover .arr{ margin-left:4px; }

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .cs-textlink,.cs-textlink .arr{ transition:none; }
}
@media (max-width:560px){
  .cs-hero{ padding-top:96px; }
  .cs-section{ padding-top:var(--section-gap-mobile); }
}

/* Reading estimate under the hero meta: present, but never competing */
.cs-reading{
  text-align:center; margin:8px 0 0; font-size:13px; color:var(--gray); letter-spacing:.01em;
}

/* Click-to-copy credentials, and the confirmation they raise */
.cs-copy{
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; border-bottom: 1px dashed var(--line);
  transition: color .15s ease, border-color .15s ease;
}
.cs-copy:hover{ color: var(--accent-text); border-bottom-color: var(--accent); }
.cs-copy-sep{ color: var(--gray); }

.cs-toast{
  position: fixed; bottom: 32px; left: 50%; z-index: 60;
  transform: translate(-50%, 8px);
  background: #222121; color: #FEFEFE;
  font-size: 14px; padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(20, 18, 30, .2);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.cs-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce){ .cs-toast{ transition: opacity .01ms; } }

/* A single figure inside a process step, at the section's own measure */
.cs-figure{ margin:36px auto 0; max-width:var(--measure-wide); }
.cs-figure img{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#fff;
}