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

:root{
  --bg:#FCFCFB;
  --ink:#1A1A1A;
  --ink-soft:#4C4C49;
  --gray:#8C8C8C;
  --eyebrow:#9B9B9B;
  --line:#E9E8E4;
  --accent:#8B7FE8;
  --accent-text:#5C4FCB;
  --accent-soft:#F1EFFC;
  --measure:680px;
  --measure-wide:820px;
  --section-gap:100px;
  --section-gap-mobile:72px;
}
.cs-root{
  background:var(--bg); color:var(--ink);
  font-family:"General Sans", 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:13px; font-weight:600; letter-spacing:.19em;
  color:var(--eyebrow); margin:0 0 20px;
}
.cs-hero{ padding-top:150px; max-width:var(--measure-wide); margin:0 auto; }
.cs-title{
  text-align:center; font-weight:500;
  font-size:clamp(26px,3.6vw,38px); line-height:1.28; letter-spacing:-.01em;
  color:var(--ink); margin:0 auto; max-width:720px;
}
.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;
}
.cs-inline-link{ color:var(--accent-text); font-weight:600; text-decoration:none; }
.cs-inline-link:hover{ text-decoration:underline; }

.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-video figcaption{ text-align:center; color:var(--gray); font-size:14px; margin-top:14px; }

/* 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(25px,3.2vw,38px); font-weight:600; line-height:1.22;
  letter-spacing:-0.015em; color:var(--ink); margin:0 auto; max-width:780px;
}
.cs-body{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); margin:22px auto 0; max-width:var(--measure); }
.cs-body.is-centered{ text-align:center; max-width:560px; }
.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-image figcaption{ text-align:center; color:var(--gray); font-size:13.5px; margin-top:12px; }

.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 */
.cs-checklist{
  list-style:none; margin:28px auto 0; padding:0; max-width:520px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;
}
.cs-checklist-item{ font-size:15px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; }
.cs-checklist-check{ color:var(--accent-text); font-weight:700; flex-shrink:0; }
@media (max-width:520px){ .cs-checklist{ grid-template-columns:1fr; } }

/* Process flowchart — clickable overview that jumps to each step below */
.cs-flowchart{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;
  max-width:var(--measure-wide); margin:8px auto 0;
}
.cs-flow-node{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:12px 14px; border-radius:12px; text-decoration:none; min-width:92px;
  transition:background-color .18s ease;
}
.cs-flow-node:hover{ background:var(--accent-soft); }
.cs-flow-node-index{ font-size:11px; font-weight:600; color:var(--accent-text); letter-spacing:.06em; }
.cs-flow-node-label{ font-size:13px; font-weight:600; color:var(--ink); }
.cs-flow-arrow{ color:var(--gray); font-size:14px; }
@media (max-width:640px){ .cs-flow-arrow{ display:none; } .cs-flowchart{ gap:2px; } }

/* Process */
.cs-process-steps{ display:flex; flex-direction:column; gap:64px; margin-top:48px; }
.cs-process-step-heading{ display:flex; align-items:baseline; gap:12px; justify-content:center; }
.cs-process-step-index{ font-size:13px; font-weight:600; color:var(--accent-text); letter-spacing:.06em; }
.cs-process-step-heading h3{ margin:0; font-size:21px; font-weight:600; color:var(--ink); text-align:center; }
.cs-process-step-body{
  text-align:center; max-width:600px; margin:14px auto 0; font-size:16.5px; line-height:1.6; 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); }

.cs-process-step-link{ text-align:center; margin:18px auto 0; }
.cs-process-step-link a{ color:var(--accent-text); font-weight:600; font-size:14.5px; text-decoration:none; }
.cs-process-step-link a:hover{ text-decoration:underline; }

.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;
}
.cs-component-gallery-item figcaption{ text-align:center; font-size:13px; color:var(--gray); margin-top:8px; }
@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;
}
.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;
  background:linear-gradient(to top, rgba(20,18,30,.75), transparent);
}
@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;
}
@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; }
.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);
}
.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;
}
.cs-next-shots figcaption{ text-align:center; font-size:12.5px; color:var(--gray); margin-top:8px; }
@media (max-width:700px){ .cs-next-shots{ grid-template-columns:1fr; } }

.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;
  transition:color .18s ease;
}
.cs-textlink:hover{ color:var(--accent-text); }
.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;
}