/* ==========================================================================
   برمجة وتطوير الأنظمة (.cs-*) — the custom software / ERP page only.

   Reads the site tokens from site.css and adds nothing global. Logical
   properties throughout, so RTL and LTR share every rule.

   One idea carried through the page: a dark panel, a thin border, and an
   orange edge on the thing being pointed at. The page changes density
   rather than style — a card, a chip, a step and a screenshot frame are the
   same surface at four sizes — which is what keeps nine sections from
   reading as nine different pages.
   ========================================================================== */

.cs-sec { padding-block: var(--section-y-tight); }
.cs-sec--tight { padding-block: clamp(1.4rem, 3vw, 2.4rem); }
.cs-sec--alt { background: var(--background-alt); }
.cs-sec--cta { padding-block: clamp(2.2rem, 4.4vw, 3.4rem); }

/* --- Section headings ---------------------------------------------------- */
.cs-head { max-width: 62ch; margin-block-end: clamp(1.3rem, 2.8vw, 2rem); }
.cs-head--c { margin-inline: auto; text-align: center; }
.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-block-end: .6rem;
  padding: .3rem .8rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.cs-eyebrow--solid { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.cs-h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3.1vw, 2.1rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.cs-lead {
  margin: .6rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(.93rem, 1.2vw, 1.02rem);
  line-height: 1.95;
}
.cs-head--c .cs-lead { margin-inline: auto; max-width: 58ch; }

/* ==========================================================================
   §  Hero
   --------------------------------------------------------------------------
   One column, centred, and short. The visitor arrived with a question this
   page answers in its first line; a tall hero would just delay it.
   ========================================================================== */

.cs-hero { position: relative; overflow: hidden; padding-block-end: clamp(1.8rem, 3.6vw, 2.6rem); }
.cs-hero__grid,
.cs-hero__glow { position: absolute; pointer-events: none; }
.cs-hero__grid {
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 72% 70% at 50% 0%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 0%, #000, transparent 74%);
  opacity: .7;
}
.cs-hero__glow {
  inset-block-start: -30%;
  inset-inline-end: -10%;
  width: min(62vw, 660px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-glow), transparent 68%);
  filter: blur(20px);
  opacity: .5;
}

.cs-hero__copy {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}
.cs-hero h1 {
  margin: .8rem 0 .6rem;
  font-size: clamp(1.85rem, 4.6vw, 3.1rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.cs-hero .lead {
  margin: 0;
  max-width: 58ch;
  color: var(--text-secondary);
  font-size: clamp(.95rem, 1.35vw, 1.08rem);
  line-height: 2;
}

.cs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-block-start: 1.4rem;
}

.cs-hero__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.cs-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--text-primary);
  font-size: .85rem;
  font-weight: 600;
}
.cs-hero__ic { display: grid; place-items: center; color: var(--primary); }
.cs-hero__ic .icon { width: 16px; height: 16px; }

/* ==========================================================================
   §  The voice explanation
   --------------------------------------------------------------------------
   Two columns, both vertically centred: the words at the start (right in
   Arabic), the player card at the end. What the recording covers sits under
   the words, so the section still says something to the visitor who never
   presses play. Stacks below 900px, text first.

   The card (.csp) is this page's own markup over the shared audio guide
   script (assets/js/audio-guide.js). The script sets these classes on it:
   is-active · is-loading · is-playing · is-paused · is-error · is-muted ·
   is-vol-lo — and paints progress into --sdg-p (0…1).
   ========================================================================== */

.cs-sec--voice { padding-block: clamp(2rem, 4.6vw, 3.4rem); }
.cs-voice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
}
.cs-voice__text { min-width: 0; }
.cs-voice__text .cs-eyebrow { margin-block-end: .9rem; }
.cs-voice__title { font-size: clamp(1.45rem, 3vw, 2.1rem); }
.cs-voice__lead { max-width: 46ch; margin-block-start: .75rem; }
.cs-voice__side { min-width: 0; }

.cs-voice__topics { margin-block-start: clamp(1.2rem, 2.4vw, 1.6rem); padding-block-start: clamp(1rem, 2vw, 1.3rem); border-block-start: 1px solid var(--border); }
.cs-voice__topics-t { margin: 0 0 .7rem; color: var(--text-primary); font-size: .9rem; font-weight: 700; }
.cs-voice__topics ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.cs-voice__topics li { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.75; }
.cs-voice__topics .num { flex: none; min-width: 1.4rem; color: var(--primary); font-family: var(--font-num); font-size: .74rem; font-weight: 700; line-height: 1.6rem; }

.cs-voice__soon {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--primary-line);
  border-radius: var(--r-lg);
  background: var(--glass);
  color: var(--text-secondary);
  font-size: .88rem;
  line-height: 1.9;
}
.cs-voice__soon .icon { flex: none; margin-block-start: .25rem; color: var(--primary); }

/* --- The card ------------------------------------------------------------ */
.csp {
  --csp-btn: 72px;
  --sdg-p: 0;                   /* progress 0…1 — set on this element by the script */
  position: relative;
  isolation: isolate;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 62%);
  box-shadow: var(--shadow-lg), 0 26px 70px -38px var(--primary-glow);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.csp:hover,
.csp.is-active { border-color: color-mix(in srgb, var(--primary) 48%, transparent); }
.csp.is-playing { box-shadow: var(--shadow-lg), 0 30px 80px -30px var(--primary-glow); }
/* The orange light in the card's start corner — inside the card, so it can
   never widen the page. */
.csp__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(90% 80% at 100% 0%, var(--primary-soft), transparent 60%);
  pointer-events: none;
  transition: opacity .4s ease;
}
[dir="ltr"] .csp__glow { background: radial-gradient(90% 80% at 0% 0%, var(--primary-soft), transparent 60%); }

.csp__head { display: grid; grid-template-columns: var(--csp-btn) minmax(0, 1fr); align-items: center; gap: clamp(.85rem, 2vw, 1.15rem); }

.csp__play {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--csp-btn);
  height: var(--csp-btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 0 0 6px var(--primary-soft), 0 14px 30px -10px var(--primary-glow);
  transition: transform .18s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.csp__play:hover { transform: scale(1.05); box-shadow: 0 0 0 8px var(--primary-soft), 0 16px 34px -10px var(--primary-glow); }
.csp__play:active { transform: scale(.96); }
.csp__play:focus-visible { outline: 2px solid var(--primary); outline-offset: 8px; }
.csp__ico { fill: currentColor; }
.csp__ico--play { margin-inline-start: 3px; }
[dir="rtl"] .csp__ico--play { margin-inline-start: 0; margin-inline-end: -3px; }
.csp__ico--pause,
.is-playing .csp__ico--play { display: none; }
.is-playing .csp__ico--pause { display: block; }
.is-playing .csp__play { animation: csp-pulse 2.2s ease-out infinite; }
.csp__ring { position: absolute; inset: -6px; border: 2px solid transparent; border-top-color: var(--primary); border-radius: 50%; opacity: 0; pointer-events: none; }
.is-loading .csp__ring { opacity: 1; animation: csp-spin .8s linear infinite; }
@keyframes csp-spin { to { transform: rotate(360deg); } }
@keyframes csp-pulse {
  0%   { box-shadow: 0 0 0 6px var(--primary-soft), 0 0 0 6px color-mix(in srgb, var(--primary) 30%, transparent), 0 14px 30px -10px var(--primary-glow); }
  100% { box-shadow: 0 0 0 6px var(--primary-soft), 0 0 0 18px transparent, 0 14px 30px -10px var(--primary-glow); }
}

.csp__info { min-width: 0; }
.csp__kicker { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--primary); font-size: .78rem; font-weight: 700; }
.csp__kicker .num { color: var(--text-secondary); font-family: var(--font-num); font-weight: 600; }
.csp__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
.csp__title { margin: .3rem 0 0; color: var(--text-primary); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 700; line-height: 1.5; }
.csp__state { margin: .2rem 0 0; min-height: 1.6em; color: var(--text-muted); font-size: .8rem; line-height: 1.6; }
.csp__s { display: none; align-items: center; gap: .45rem; }
.csp__s--idle { display: inline-flex; }
.csp:is(.is-loading, .is-playing, .is-paused, .is-error) .csp__s--idle { display: none; }
.csp.is-loading:not(.is-error) .csp__s--load,
.csp.is-playing:not(.is-loading):not(.is-error) .csp__s--live,
.csp.is-paused:not(.is-playing):not(.is-loading):not(.is-error) .csp__s--paused,
.csp.is-error .csp__s--error { display: inline-flex; }
.csp__s--live { color: var(--primary); }
.csp__s--error { color: var(--danger, #F26B6B); }
.csp__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.csp__eq i { width: 2px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: csp-eq .9s ease-in-out infinite alternate; }
.csp__eq i:nth-child(2) { animation-delay: -.3s; }
.csp__eq i:nth-child(3) { animation-delay: -.6s; }
.csp__eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes csp-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* --- Waveform = the progress bar and the seek control -------------------- */
.csp__wave {
  position: relative;
  height: 64px;
  margin-block-start: clamp(1.1rem, 2.4vw, 1.4rem);
  border-radius: 10px;
  cursor: pointer;
  touch-action: pan-y;          /* drag sideways to seek, the page still scrolls */
  -webkit-tap-highlight-color: transparent;
}
.csp__wave:focus { outline: none; }
.csp__wave:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.csp__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 3px; pointer-events: none; }
.csp__bars i { flex: 1 1 0; min-width: 0; height: var(--h); border-radius: 99px; background: var(--border-strong); transition: background-color .2s ease; }
.csp__wave:hover .csp__bars:not(.csp__bars--on) i { background: color-mix(in srgb, var(--text-primary) 26%, transparent); }
/* The played part: the same bars in orange, uncovered from the start edge. */
.csp__bars--on { clip-path: inset(0 calc(100% - var(--sdg-p) * 100%) 0 0); }
[dir="rtl"] .csp__bars--on { clip-path: inset(0 0 0 calc(100% - var(--sdg-p) * 100%)); }
.csp__bars--on i { background: linear-gradient(to top, var(--primary), color-mix(in srgb, var(--primary) 60%, #FFC59E)); }
.csp__head-line {
  position: absolute;
  inset-block: -4px;
  inset-inline-start: calc(var(--sdg-p) * 100%);
  width: 2px;
  margin-inline-start: -1px;
  border-radius: 2px;
  background: var(--text-primary);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.is-active .csp__head-line,
.is-paused .csp__head-line,
.csp__wave:hover .csp__head-line,
.csp__wave:focus-visible .csp__head-line { opacity: .85; }
.is-loading .csp__bars:not(.csp__bars--on) { animation: csp-breathe 1s ease-in-out infinite alternate; }
@keyframes csp-breathe { from { opacity: 1; } to { opacity: .45; } }

.csp__times { display: flex; justify-content: space-between; margin-block-start: .5rem; color: var(--text-muted); font-family: var(--font-num); font-size: .8rem; font-weight: 600; }
.is-active .csp__times [data-sdg-now] { color: var(--text-primary); }

/* --- Secondary controls: volume at the start, stop + speed at the end ---- */
.csp__ctrl { display: flex; align-items: center; gap: .5rem; margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
.csp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  flex: none;
  height: 40px;
  min-width: 40px;
  padding: 0 .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--glass);
  color: var(--text-secondary);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.csp__btn:hover { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.csp__btn:focus-visible,
.csp__opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.csp__btn svg { flex: none; }

.csp__vol { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; }
.csp__vol .csp__btn { padding: 0; }
.csp__vi--lo, .csp__vi--off,
.is-vol-lo .csp__vi--hi, .is-muted .csp__vi--hi, .is-muted .csp__vi--lo { display: none; }
.is-vol-lo:not(.is-muted) .csp__vi--lo, .is-muted .csp__vi--off { display: block; }
.sdg--novol .csp__range { display: none; }   /* iOS: the hardware buttons own volume */

.csp__range { --v: 100%; -webkit-appearance: none; appearance: none; flex: 0 1 130px; width: 130px; min-width: 60px; height: 32px; margin: 0; padding: 0; background: transparent; cursor: pointer; direction: inherit; }
.csp__range:focus { outline: none; }
.csp__range:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.csp__range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(to right, var(--primary) var(--v), var(--border-strong) var(--v)); }
[dir="rtl"] .csp__range::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--primary) var(--v), var(--border-strong) var(--v)); }
.csp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px var(--primary), 0 1px 6px rgba(0, 0, 0, .45); transition: transform .15s ease; }
.csp__range:hover::-webkit-slider-thumb, .csp__range:active::-webkit-slider-thumb { transform: scale(1.15); }
.csp__range::-moz-range-track { height: 4px; border: 0; border-radius: 99px; background: var(--border-strong); }
.csp__range::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--primary); }
.csp__range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px var(--primary), 0 1px 6px rgba(0, 0, 0, .45); }

.csp__stop { width: 40px; padding: 0; }
.csp:not(.is-active):not(.is-paused) .csp__stop { opacity: .5; }

.csp__speed { position: relative; flex: none; }
.csp__speed-btn { min-width: 74px; font-family: var(--font-num); }
.csp__speed-btn.is-changed,
.csp__speed-btn[aria-expanded="true"] { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.csp__menu { position: absolute; z-index: 20; inset-block-end: calc(100% + 8px); inset-inline-end: 0; display: flex; gap: 4px; padding: 5px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface-2); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.csp__menu[hidden] { display: none; }
.csp__opt { min-width: 50px; height: 40px; padding: 0 .4rem; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); font-family: var(--font-num); font-size: .84rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.csp__opt:hover { background: var(--glass-2); color: var(--text-primary); }
.csp__opt[aria-checked="true"] { background: var(--primary); color: #FFFFFF; }

/* ==========================================================================
   §  What a custom system is
   ========================================================================== */

.cs-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 2rem);
  align-items: start;
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.cs-about__text { margin: 0; color: var(--text-secondary); font-size: .95rem; line-height: 2.05; }
.cs-about__differs { min-width: 0; }
.cs-about__differs-t { margin: 0 0 .7rem; color: var(--text-primary); font-size: .9rem; font-weight: 700; }

.cs-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 600;
}
.cs-chip .icon { width: 14px; height: 14px; color: var(--primary); }

/* --- The flow ------------------------------------------------------------ */
.cs-flow { margin-block-start: clamp(1.2rem, 2.6vw, 1.8rem); }
.cs-flow__title {
  margin: 0 0 .9rem;
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
}
.cs-flow__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cs-flow;
}
.cs-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  flex: 0 1 auto;
  min-width: 118px;
  padding: .85rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.cs-flow__step:hover { border-color: var(--primary-line); transform: translateY(-3px); }
/* The arrow between two steps. Not on the last one, and gone the moment the
   row wraps is impossible to know in CSS — so it is drawn small and quiet
   enough that a wrapped row still reads correctly. */
.cs-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -.5rem;
  width: .5rem;
  height: 1px;
  background: var(--border-strong);
}
.cs-flow__ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
}
.cs-flow__label { color: var(--text-primary); font-size: .82rem; font-weight: 600; line-height: 1.6; }

/* ==========================================================================
   §  Cards — customisation
   ========================================================================== */

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(.8rem, 1.8vw, 1.15rem);
}
.cs-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.3rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.cs-card:hover {
  border-color: var(--primary-line);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 26px 60px -46px var(--primary-glow);
}
.cs-card__ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
}
.cs-card__t { margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 700; line-height: 1.55; }
.cs-card__d { margin: 0; color: var(--text-secondary); font-size: .86rem; line-height: 1.85; }

/* ==========================================================================
   §  Modules
   --------------------------------------------------------------------------
   Deliberately lighter than the cards above: these are a menu of parts, not
   ten more things to read. Same surface, less of it.
   ========================================================================== */

.cs-mods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-mod {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  padding: .8rem .95rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-primary);
  font-size: .89rem;
  font-weight: 600;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.cs-mod:hover { border-color: var(--primary-line); background: var(--surface-hover); }
.cs-mod__ic { flex: none; display: grid; place-items: center; color: var(--primary); }
.cs-mod span { min-width: 0; overflow-wrap: anywhere; }

.cs-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: clamp(1rem, 2.2vw, 1.4rem) 0 0;
  padding: .85rem 1.05rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--text-primary);
  font-size: .88rem;
  line-height: 1.85;
}
.cs-note .icon { flex: none; margin-block-start: .25rem; color: var(--primary); }

/* ==========================================================================
   §  The screenshots
   --------------------------------------------------------------------------
   Four pictures of three different shapes, composed rather than tiled:
   the wide dashboard leads, the phone sits beside it in a portrait cell, and
   the two dark screens close the block underneath.

   Every frame uses object-fit: contain. A screenshot cropped to fill a box
   loses the part of the interface that made it worth showing, and these are
   the evidence for the whole page.
   ========================================================================== */

.cs-shots {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.7rem, 1.8vw, 1.1rem);
}
.cs-shot {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
  /* Two per row by default (tablet); the desktop composition is below. */
  grid-column: span 6;
}
.cs-shot:hover {
  border-color: var(--primary-line);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 30px 70px -48px var(--primary-glow);
}
.cs-shot__media {
  position: relative;
  display: block;
  flex: 1 1 auto;
  background: var(--surface-2);
  cursor: zoom-in;
}
.cs-shot__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: clamp(.45rem, 1.2vw, .8rem);
}
.cs-shot--tall .cs-shot__media img { aspect-ratio: 3 / 4; }
.cs-shot__zoom {
  position: absolute;
  inset-block-end: .7rem;
  inset-inline-end: .7rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(4, 5, 9, .72);
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.cs-shot:hover .cs-shot__zoom,
.cs-shot__media:focus-visible .cs-shot__zoom { opacity: 1; transform: none; }
.cs-shot figcaption {
  padding: .8rem clamp(.85rem, 2vw, 1.1rem);
  border-block-start: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: .84rem;
  line-height: 1.8;
}

@media (min-width: 900px) {
  /* The composition: wide dashboard (8) + phone (4, two rows tall), then the
     two dark screens (4 + 4) filling the row beside the phone. */
  .cs-shot--wide { grid-column: span 8; }
  .cs-shot--tall { grid-column: span 4; grid-row: span 2; }
  /* The phone screenshot fills the two-row cell rather than keeping a fixed
     ratio. The anchor becomes the box with the height — a percentage height
     on the image alone would have nothing definite to resolve against and
     would collapse to the image's own size. */
  .cs-shot--tall .cs-shot__media { display: grid; place-items: center; min-height: 420px; }
  .cs-shot--tall .cs-shot__media img { height: 100%; max-height: 100%; aspect-ratio: auto; }
  .cs-shot:not(.cs-shot--wide):not(.cs-shot--tall) { grid-column: span 4; }
}

.cs-hint {
  margin: clamp(.9rem, 2vw, 1.2rem) 0 0;
  color: var(--text-muted);
  font-size: .84rem;
  text-align: center;
}

/* ==========================================================================
   §  You decide, we build
   ========================================================================== */

.cs-decide {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.1rem, 3vw, 2.4rem);
  align-items: center;
}
.cs-decide__copy { min-width: 0; }
.cs-decide__line {
  margin: .7rem 0 0;
  padding-inline-start: .9rem;
  border-inline-start: 3px solid var(--primary);
  color: var(--text-primary);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 600;
  line-height: 1.85;
}
.cs-decide__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-decide__list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-primary);
  font-size: .86rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.cs-decide__list li:hover { border-color: var(--primary-line); background: var(--surface-hover); }
.cs-decide__ic { flex: none; display: grid; place-items: center; color: var(--primary); }

/* ==========================================================================
   §  The process
   ========================================================================== */

.cs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(.7rem, 1.6vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ic num" "ic title";
  align-items: center;
  column-gap: .75rem;
  row-gap: .1rem;
  padding: clamp(.9rem, 2vw, 1.15rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.cs-step:hover { border-color: var(--primary-line); transform: translateY(-3px); }
.cs-step__ic {
  grid-area: ic;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
}
.cs-step__n {
  grid-area: num;
  align-self: end;
  color: var(--text-faint);
  font-family: var(--font-num);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.cs-step__t {
  grid-area: title;
  align-self: start;
  margin: 0;
  color: var(--text-primary);
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   §  Call to action
   ========================================================================== */

.cs-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 1.8rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-2xl);
  background: linear-gradient(120deg, var(--primary-soft), transparent 62%), var(--surface);
  box-shadow: var(--shadow-lg);
}
.cs-cta__ic {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 14px 30px -14px var(--primary-glow);
}
.cs-cta__copy { min-width: 0; }
.cs-cta h2 { margin: 0 0 .3rem; font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-weight: 700; line-height: 1.45; }
.cs-cta p { margin: 0; color: var(--text-secondary); font-size: .93rem; line-height: 1.85; }
.cs-cta__btns { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ==========================================================================
   §  Narrow screens
   --------------------------------------------------------------------------
   The grids collapse by themselves — `auto-fill` with a `min(100%, …)`
   minimum can never demand more width than there is, which is what keeps
   the page off a horizontal scroll bar at 320px. These rules take back the
   two-column blocks, the glow, and the padding a small screen cannot spare.
   ========================================================================== */

@media (max-width: 1000px) {
  .cs-about { grid-template-columns: minmax(0, 1fr); }
  .cs-decide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  .cs-shot,
  .cs-shot--wide,
  .cs-shot--tall { grid-column: span 6; grid-row: auto; }

  /* Voice: text, then the card at full width. */
  .cs-voice { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cs-voice__lead { max-width: 60ch; }
}

@media (max-width: 860px) {
  .cs-cta { grid-template-columns: auto minmax(0, 1fr); }
  .cs-cta__btns { grid-column: 1 / -1; }
  .cs-cta__btns .fq-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 640px) {
  .cs-hero__glow { inset-block-start: -36%; width: 92vw; opacity: .4; }
  .cs-hero__actions { width: 100%; }
  .cs-hero__actions .fq-btn { flex: 1 1 100%; justify-content: center; }
  .cs-hero__points { gap: .4rem; }
  .cs-hero__points li { flex: 1 1 100%; justify-content: center; }

  .cs-shot,
  .cs-shot--wide,
  .cs-shot--tall { grid-column: 1 / -1; }
  .cs-shot--tall .cs-shot__media img { aspect-ratio: 3 / 4; }

  .cs-flow__list { gap: .4rem; }
  .cs-flow__step { flex: 1 1 calc(50% - .2rem); min-width: 0; }
  .cs-flow__step:not(:last-child)::after { display: none; }

  .cs-cta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .cs-cta__btns { width: 100%; }
}

/* Phones: a smaller play button, a shorter waveform, 44px targets. */
@media (max-width: 560px) {
  .cs-voice__topics ul { grid-template-columns: minmax(0, 1fr); }
  .csp { --csp-btn: 60px; padding: 1rem; }
  .csp__wave { height: 52px; }
  .csp__bars { gap: 2px; }
  .csp__btn { height: 44px; min-width: 44px; }
  .csp__stop { width: 44px; }
  .csp__range { flex: 1 1 auto; width: auto; height: 44px; }
  .csp__range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; }
  .csp__range::-moz-range-thumb { width: 18px; height: 18px; }
  .csp__opt { min-width: 48px; height: 44px; }
}

@media (max-width: 380px) {
  .cs-mods,
  .cs-decide__list { grid-template-columns: minmax(0, 1fr); }
  .cs-flow__step { flex: 1 1 100%; }

  .csp { --csp-btn: 54px; padding: .9rem; }
  .csp__ctrl { gap: .4rem; }
  .csp__speed-btn { min-width: 64px; padding: 0 .45rem; }
  .csp__opt { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card:hover,
  .cs-shot:hover,
  .cs-step:hover,
  .cs-flow__step:hover { transform: none; }

  .csp__play, .csp__play:hover { transform: none; transition: none; }
  .is-playing .csp__play { animation: none; }
  .is-loading .csp__ring { animation-duration: 2s; }
  .is-loading .csp__bars:not(.csp__bars--on) { animation: none; }
  .csp__eq i { animation: none; transform: scaleY(.7); }
}