/* Clio design system v2 (D1, WEBSITE_REDESIGN_BRIEF_V2.md section 2). Built on site.css brand tokens and motion.css; never redefines them.
   Components: section theme (dark / light "paper" band), crosshair frame marks, section header (eyebrow pill + tight title | lede + link),
   product-UI mocks (call, calendar, WhatsApp) with layered depth and edge fades, the pinned call story, the voice orb + sample players,
   the capabilities bento and its micro-UIs. Motion: transform / opacity only; every loop runs only on visible tiles (.is-live) and stops
   on a hidden tab (html.m-paused-tab) and under prefers-reduced-motion (static end states). */

:root {
  --ds-title: clamp(2.05rem, 4.3vw, 3.6rem);
  --ds-title-track: -0.032em;
  --ds-lede: clamp(1rem, 1.25vw, 1.125rem);
  --ds-radius: 20px;
  --ds-radius-sm: 12px;
  --ds-pad: clamp(4.5rem, 9vw, 8rem);
  --ds-violet: #8b7cf6;
  --ds-paper: #f4f1ea;
}

/* ---------------------------------------------------------------- section + themes */
.ds-section {
  --ds-fg: var(--text); --ds-muted: var(--muted); --ds-border: var(--border); --ds-border-2: var(--border-strong);
  --ds-surface: rgba(255, 255, 255, 0.025); --ds-surface-2: rgba(255, 255, 255, 0.045); --ds-accent: var(--voice); --ds-accent-text: var(--voice);
  --ds-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.9);
  position: relative; padding: var(--ds-pad) 0; color: var(--ds-fg); border-top: 1px solid var(--border);
}
.ds-theme--light {
  --ds-fg: #15130f; --ds-muted: #5c574d; --ds-border: rgba(21, 19, 15, 0.1); --ds-border-2: rgba(21, 19, 15, 0.18);
  --ds-surface: #fffdf9; --ds-surface-2: #ffffff; --ds-accent: #c88a2e; --ds-accent-text: #8f5a10;
  --ds-shadow: 0 30px 60px -35px rgba(60, 40, 10, 0.35);
  background: var(--ds-paper); border-top-color: transparent; color-scheme: light;
}
.ds-theme--light :focus-visible { outline-color: #8f5a10; }
.ds-frame { position: relative; }

/* crosshair "+" marks at the corners of a section's frame: a quiet, engineered signature */
.ds-mark { position: absolute; width: 13px; height: 13px; pointer-events: none; opacity: 0.55; }
.ds-mark::before, .ds-mark::after { content: ""; position: absolute; background: var(--ds-border-2); }
.ds-mark::before { left: 6px; top: 0; width: 1px; height: 13px; }
.ds-mark::after { top: 6px; left: 0; height: 1px; width: 13px; }
.ds-mark--tl { top: calc(var(--ds-pad) * -0.55); left: 0.75rem; }
.ds-mark--tr { top: calc(var(--ds-pad) * -0.55); right: 0.75rem; }
.ds-mark--bl { bottom: calc(var(--ds-pad) * -0.55); left: 0.75rem; }
.ds-mark--br { bottom: calc(var(--ds-pad) * -0.55); right: 0.75rem; }

/* ---------------------------------------------------------------- section header */
.ds-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ds-accent-text); border: 1px solid var(--ds-border-2); border-radius: 999px; padding: 0.32rem 0.75rem; margin-bottom: 1.1rem;
}
.ds-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-accent); }
.ds-title { font-family: var(--font-display); font-weight: 600; font-size: var(--ds-title); letter-spacing: var(--ds-title-track); line-height: 1.04; max-width: 17ch; color: var(--ds-fg); text-wrap: balance; }
.ds-lede { color: var(--ds-muted); font-size: var(--ds-lede); line-height: 1.6; max-width: 34rem; }
.ds-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-weight: 600; font-size: 0.95rem; color: var(--ds-accent-text); }
.ds-link span { display: inline-block; transition: transform var(--m-dur-2) var(--m-ease-out); }
.ds-link:hover span { transform: translateX(4px); }

/* ---------------------------------------------------------------- product-UI mocks */
.ds-mock {
  background: linear-gradient(180deg, var(--ds-surface-2), var(--ds-surface)); border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05); padding: 1rem; color: var(--ds-fg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ds-theme--dark .ds-mock, .ds-section:not(.ds-theme--light) .ds-mock { background: linear-gradient(180deg, rgba(28, 25, 21, 0.92), rgba(14, 13, 11, 0.92)); }
.ds-mock__bar { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--ds-muted); margin-bottom: 0.75rem; }
.ds-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ds-border-2); }
.ds-mock__title { color: var(--ds-fg); font-weight: 600; margin-left: 0.35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-mock__live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--action); }
.ds-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--action); animation: ds-ping 1.8s var(--m-ease-out) infinite; }
@keyframes ds-ping { 0% { box-shadow: 0 0 0 0 rgba(79, 209, 174, 0.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(79, 209, 174, 0); } }
.ds-mock__wave { --m-wave-h: 34px; margin: 0.25rem 0 0.8rem; }
.ds-ico { width: 16px; height: 16px; color: var(--ds-accent); }

.ds-call__lines { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.ds-call__line { display: flex; flex-direction: column; gap: 0.18rem; max-width: 88%; }
.ds-call__line--caller { align-self: flex-end; text-align: right; }
.ds-call__who { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-muted); }
.ds-call__line--agent .ds-call__who { color: var(--ds-accent-text); }
.ds-call__line--caller .ds-call__who { color: var(--action); }
.ds-call__text { padding: 0.5rem 0.75rem; border-radius: 13px; font-size: 0.875rem; line-height: 1.45; text-align: left; border: 1px solid var(--ds-border); background: rgba(255, 255, 255, 0.04); }
.ds-call__line--agent .ds-call__text { background: rgba(232, 168, 87, 0.1); border-color: rgba(232, 168, 87, 0.24); border-top-left-radius: 4px; }
.ds-call__line--caller .ds-call__text { background: rgba(79, 209, 174, 0.08); border-color: rgba(79, 209, 174, 0.22); border-top-right-radius: 4px; }
.ds-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }
.ds-chip { font-family: var(--font-mono); font-size: 0.66rem; padding: 0.25rem 0.55rem; border-radius: 999px; color: var(--action); border: 1px solid rgba(79, 209, 174, 0.35); background: rgba(79, 209, 174, 0.07); }
.ds-chip::before { content: "✓ "; }

.ds-cal__slots { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.ds-cal__slot { text-align: center; padding: 0.5rem; border-radius: 10px; font-family: var(--font-mono); font-size: 0.78rem; border: 1px solid var(--ds-border-2); color: var(--ds-fg); transition: background-color var(--m-dur-3) ease, color var(--m-dur-3) ease, border-color var(--m-dur-3) ease; }
.ds-cal__slot.is-picked { background: var(--voice); border-color: var(--voice); color: #1a1206; font-weight: 600; }
.ds-cal__booked { margin-top: 0.75rem; font-size: 0.82rem; font-weight: 600; color: var(--action); }
.ds-check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--action); color: #04130e; font-size: 0.7rem; margin-right: 0.2rem; }

.ds-wa__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font-size: 0.82rem; font-weight: 600; }
.ds-wa__avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(79, 209, 174, 0.15); color: var(--action); }
.ds-wa__avatar svg { width: 15px; height: 15px; }
.ds-wa__bubble { background: rgba(79, 209, 174, 0.12); border: 1px solid rgba(79, 209, 174, 0.25); border-radius: 12px 12px 12px 4px; padding: 0.6rem 0.75rem; font-size: 0.85rem; line-height: 1.45; }
.ds-wa__meta { display: block; margin-top: 0.3rem; font-size: 0.68rem; color: var(--ds-muted); text-align: right; }
.ds-wa__ticks { color: var(--action); letter-spacing: -0.2em; margin-right: 0.3rem; }

/* uploaded picture in a slot */
.ds-slot { margin: 0; aspect-ratio: var(--ds-ratio, 16/10); border-radius: var(--ds-radius); overflow: hidden; border: 1px solid var(--ds-border-2); box-shadow: var(--ds-shadow); }
.ds-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- the call story */
.ds-story { padding-bottom: 0; }
.ds-story__inner { display: grid; gap: 2.5rem; padding-bottom: var(--ds-pad); }
.ds-steps { list-style: none; display: grid; grid-template-columns: repeat(var(--ds-n, 5), minmax(0, 1fr)); gap: 1rem; position: relative; padding-top: 1.6rem; }
.ds-steps__rail { position: absolute; left: 0; right: 0; top: 0.42rem; height: 2px; background: var(--ds-border-2); border-radius: 2px; }
.ds-steps__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--voice), var(--action)); transform-origin: 0 50%; transform: scaleX(1); }
.ds-steps__signal { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--voice); box-shadow: 0 0 18px 4px rgba(232, 168, 87, 0.55); transform: translateX(var(--ds-sig, 0px)); display: none; }
.ds-step { display: flex; flex-direction: column; gap: 0.35rem; position: relative; }
.ds-step__dot { position: absolute; top: -1.6rem; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--voice); }
.ds-theme--light .ds-step__dot { background: var(--ds-paper); }
.ds-step__name { font-weight: 600; font-size: 1rem; }
.ds-step__desc { font-size: 0.875rem; color: var(--ds-muted); line-height: 1.5; }

.ds-stage { position: relative; perspective: 1600px; }
.ds-stage__layers { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-rows: auto auto; gap: 1.1rem 1.4rem; max-width: 62rem; margin: 0 auto; transform-style: preserve-3d; }
.ds-layer--call { grid-row: 1 / span 2; transform: translate3d(0, var(--ds-py, 0px), 0) rotateY(5deg) rotateX(2deg); transform-origin: 100% 50%; }
.ds-layer--cal { transform: translate3d(0, var(--ds-py, 0px), 40px) rotateY(-4deg); }
.ds-layer--wa { transform: translate3d(-8%, var(--ds-py, 0px), 70px) rotateY(-4deg); }
.ds-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12%; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg)); }   /* edge fade into the page */
.ds-theme--light .ds-stage::after { background: linear-gradient(180deg, transparent, var(--ds-paper)); }
[data-depth] { will-change: transform; }

/* pinned (wide screens with motion; class set before paint by the inline script after the section) */
.ds-story--pin .ds-story__track { height: 290vh; }
.ds-story--pin .ds-story__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.ds-story--pin .ds-story__inner { width: 100%; padding-bottom: 0; padding-top: 3rem; gap: 3rem; }              /* D2: room between the last step text and the cards (the "Acts" text touched the calendar card at 1440) */
.ds-story--pin .ds-stage__layers { transform: scale(0.86); transform-origin: 50% 0; }
.ds-story--pin .ds-step__desc { font-size: 0.84rem; }
.ds-story--pin .ds-steps__fill { transform: scaleX(var(--ds-progress, 0)); }
.ds-story--pin .ds-steps__signal { display: block; }
.ds-story--pin .ds-step { opacity: 0.38; transition: opacity var(--m-dur-3) var(--m-ease-out); }
.ds-story--pin .ds-step.is-active, .ds-story--pin .ds-step.is-done { opacity: 1; }
.ds-story--pin .ds-step.is-active .ds-step__dot { background: var(--voice); box-shadow: 0 0 0 6px rgba(232, 168, 87, 0.18); }
.ds-story--pin [data-from] { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity var(--m-dur-3) var(--m-ease-out), transform var(--m-dur-3) var(--m-ease-out); }
.ds-story--pin .ds-layer [data-from].is-on, .ds-story--pin [data-from].is-on { opacity: 1; transform: none; }
.ds-story--pin .ds-cal__slot.is-picked:not(.is-on) { background: transparent; color: var(--ds-fg); border-color: var(--ds-border-2); opacity: 1; transform: none; }
.ds-story--pin .ds-mock--call { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- hear for yourself: orb + players */
.ds-hear__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ds-orb { position: relative; width: min(100%, 26rem); aspect-ratio: 1; justify-self: center; }
.ds-orb__fallback, .ds-orb__canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.ds-orb__fallback {
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.55), transparent 22%),
    radial-gradient(circle at 30% 70%, var(--orb-b, #4fd1ae), transparent 55%),
    radial-gradient(circle at 75% 30%, var(--orb-c, #8b7cf6), transparent 55%),
    radial-gradient(circle at 60% 65%, var(--orb-a, #e8a857), transparent 60%),
    radial-gradient(circle at 50% 50%, #1a1206, #000 72%);
  box-shadow: 0 0 90px -10px color-mix(in srgb, var(--orb-a, #e8a857) 45%, transparent);
  inset: 6%;
  transition: opacity var(--m-dur-4) ease;
}
.ds-orb__canvas { opacity: 0; transition: opacity var(--m-dur-4) ease; }
.ds-orb.is-gl .ds-orb__canvas { opacity: 1; }
.ds-orb.is-gl .ds-orb__fallback { opacity: 0; }
.ds-orb:not(.is-gl) .ds-orb__fallback { animation: ds-breathe 5.5s ease-in-out infinite; }
@keyframes ds-breathe { 50% { transform: scale(1.04); } }

.ds-players { list-style: none; display: grid; gap: 0.75rem; }
.ds-player { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-border-2); background: var(--ds-surface); }
.ds-player__btn { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--voice) !important; color: #1a1206 !important; transition: transform var(--m-dur-2) var(--m-ease-spring); }
.ds-player__btn:hover { transform: scale(1.06); }
.ds-player__icon { width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.ds-player__btn[aria-pressed="true"] .ds-player__icon { width: 12px; height: 14px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); }
.ds-player__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.ds-player__title { font-weight: 600; }
.ds-player__desc { font-size: 0.85rem; color: var(--ds-muted); }
.ds-player__track { position: relative; height: 3px; margin-top: 0.5rem; border-radius: 3px; background: var(--ds-border-2); overflow: hidden; }
.ds-player__progress { position: absolute; inset: 0; background: var(--voice); transform-origin: 0 50%; transform: scaleX(0); }
.ds-player__time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ds-muted); }
.ds-hear__empty { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); display: grid; gap: 1rem; justify-items: start; }
.ds-hear__empty-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- capabilities bento */
.ds-bento__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(16.5rem, auto); gap: 1rem; }
.ds-tile { border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); overflow: hidden; transition: border-color var(--m-dur-2) ease, transform var(--m-dur-3) var(--m-ease-out); }
.ds-tile:hover { border-color: var(--ds-accent); transform: translateY(-3px); }
.ds-tile--wide { grid-column: span 2; }
.ds-tile--tall { grid-row: span 2; }
.ds-tile__link { display: flex; flex-direction: column; height: 100%; }
.ds-tile__visual { flex: 1; min-height: 9rem; display: grid; place-items: center; padding: 1.25rem; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(232, 168, 87, 0.09), transparent 70%); }
.ds-tile__visual img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ds-radius-sm); }
.ds-tile__body { padding: 0 1.25rem 1.25rem; display: grid; gap: 0.35rem; }
.ds-tile__title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.ds-tile__desc { font-size: 0.875rem; color: var(--ds-muted); line-height: 1.5; }

/* micro-UIs (decorative). Loops only while the tile is on screen (.is-live) */
.ds-micro { width: 100%; max-width: 20rem; display: grid; place-items: center; }
.ds-micro em { font-style: normal; }
.ds-tile:not(.is-live) .ds-micro *, .m-paused-tab .ds-micro * { animation-play-state: paused !important; }

.ds-mcal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; width: 100%; }
.ds-mcal__slot { height: 1.9rem; border-radius: 7px; border: 1px solid var(--ds-border-2); position: relative; display: grid; place-items: center; }
.ds-mcal__slot:nth-child(3n) { background: var(--ds-border); }
.ds-mcal__slot.is-target { animation: ds-slot 4.5s var(--m-ease-out) infinite; }
.ds-mcal__slot.is-target em { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 600; color: #1a1206; opacity: 0; animation: ds-slot-label 4.5s var(--m-ease-out) infinite; }
@keyframes ds-slot { 0%, 25% { background: transparent; border-color: var(--ds-border-2); transform: scale(1); } 40% { transform: scale(1.12); } 45%, 92% { background: var(--voice); border-color: var(--voice); transform: scale(1); } 100% { background: transparent; } }
@keyframes ds-slot-label { 0%, 42% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

.ds-mlang { height: 2.6rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.ds-mlang__list { list-style: none; animation: ds-lang 26s steps(1) infinite; }
.ds-mlang__list li { height: 2.6rem; display: grid; place-items: center; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ds-fg); }
@keyframes ds-lang { 0% { transform: translateY(0); } 7.1% { transform: translateY(-2.6rem); } 14.3% { transform: translateY(-5.2rem); } 21.4% { transform: translateY(-7.8rem); } 28.6% { transform: translateY(-10.4rem); } 35.7% { transform: translateY(-13rem); } 42.9% { transform: translateY(-15.6rem); } 50% { transform: translateY(-18.2rem); } 57.1% { transform: translateY(-20.8rem); } 64.3% { transform: translateY(-23.4rem); } 71.4% { transform: translateY(-26rem); } 78.6% { transform: translateY(-28.6rem); } 85.7% { transform: translateY(-31.2rem); } 92.9% { transform: translateY(-33.8rem); } }

.ds-mhand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; width: 100%; row-gap: 0.7rem; }
.ds-mhand__node { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.ds-mhand__node--ai { background: radial-gradient(circle at 35% 35%, #ffd9a6, var(--voice) 45%, #8a4f12); box-shadow: 0 0 22px rgba(232, 168, 87, 0.5); }
.ds-mhand__node--team { border: 1px solid var(--ds-border-2); color: var(--action); }
.ds-mhand__node--team svg { width: 22px; height: 22px; }
.ds-mhand__line { height: 2px; background: var(--ds-border-2); position: relative; overflow: hidden; border-radius: 2px; }
.ds-mhand__pulse { position: absolute; top: -3px; left: 0; width: 30%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--action), transparent); animation: ds-hand 2.2s ease-in-out infinite; }
@keyframes ds-hand { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.ds-mhand__label { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.68rem; color: var(--action); text-align: center; }
.ds-mhand__team { display: none; }

.ds-mbars { display: flex; align-items: flex-end; gap: 0.5rem; height: 6.5rem; width: 100%; }
.ds-mbars span { flex: 1; height: calc(18% + var(--i) * 11%); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--voice), rgba(232, 168, 87, 0.25)); transform-origin: 50% 100%; animation: ds-bar 4s var(--m-ease-out) infinite; animation-delay: calc(var(--i) * 90ms); }
.ds-mbars span:nth-child(3n) { background: linear-gradient(180deg, var(--action), rgba(79, 209, 174, 0.25)); }
@keyframes ds-bar { 0% { transform: scaleY(0.15); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0.15); } }

.ds-mwa { width: 100%; display: grid; gap: 0.6rem; }
.ds-mwa__head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; padding-bottom: 0.6rem; border-bottom: 1px solid var(--ds-border); margin-bottom: 0.2rem; }
.ds-mwa__head span { width: 26px; height: 26px; border-radius: 50%; background: rgba(79, 209, 174, 0.16); display: grid; place-items: center; color: var(--action); }
.ds-mwa__head svg { width: 14px; height: 14px; }
.ds-mwa__bubble { background: rgba(79, 209, 174, 0.14); border: 1px solid rgba(79, 209, 174, 0.3); border-radius: 14px 14px 14px 4px; padding: 0.7rem 0.85rem; font-size: 0.875rem; line-height: 1.45; animation: ds-wa 5s var(--m-ease-out) infinite; }
.ds-mwa__bubble > span { display: block; margin-top: 0.3rem; font-size: 0.68rem; color: var(--ds-muted); text-align: right; }
.ds-mwa__ticks { color: var(--action); letter-spacing: -0.2em; margin-right: 0.3rem; }
.ds-mwa__typing { display: flex; gap: 4px; padding: 0.6rem 0.8rem; width: max-content; border-radius: 12px; border: 1px solid var(--ds-border-2); }
.ds-mwa__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-muted); animation: ds-dot 1.2s ease-in-out infinite; }
.ds-mwa__typing i:nth-child(2) { animation-delay: 0.15s; } .ds-mwa__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ds-wa { 0%, 8% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.97); } 18%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ds-dot { 50% { transform: translateY(-3px); opacity: 0.5; } }

.ds-mbill { width: 100%; display: grid; gap: 0.6rem; }
.ds-mbill__label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ds-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ds-mbill__meter { height: 10px; border-radius: 5px; background: var(--ds-border); overflow: hidden; }
.ds-mbill__meter span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--action), var(--voice)); transform-origin: 0 50%; animation: ds-meter 5s var(--m-ease-out) infinite; }
.ds-mbill__ticks { display: flex; justify-content: space-between; }
.ds-mbill__ticks i { width: 1px; height: 7px; background: var(--ds-border-2); }
@keyframes ds-meter { 0% { transform: scaleX(0.05); } 70%, 90% { transform: scaleX(0.72); } 100% { transform: scaleX(0.05); } }

.ds-mlead { display: grid; place-items: center; gap: 0.4rem; }
.ds-mlead svg { width: 5.5rem; height: 5.5rem; transform: rotate(-90deg); }
.ds-mlead circle { fill: none; stroke-width: 6; }
.ds-mlead__bg { stroke: var(--ds-border-2); }
.ds-mlead__ring { stroke: var(--voice); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 29; animation: ds-ring 4.5s var(--m-ease-out) infinite; }
.ds-mlead em { font-family: var(--font-mono); font-size: 0.72rem; color: var(--voice); }
@keyframes ds-ring { 0% { stroke-dashoffset: 163.4; } 45%, 90% { stroke-dashoffset: 29; } 100% { stroke-dashoffset: 163.4; } }

.ds-mrec { width: 100%; display: grid; gap: 0.6rem; justify-items: center; }
.ds-mrec__wave { --m-wave-h: 34px; width: 100%; }
.ds-mrec__lines { display: grid; gap: 0.35rem; width: 100%; }
.ds-mrec__lines i { height: 7px; border-radius: 4px; background: var(--ds-border-2); transform-origin: 0 50%; animation: ds-line 4s var(--m-ease-out) infinite; }
.ds-mrec__lines i:nth-child(2) { width: 82%; animation-delay: 0.3s; } .ds-mrec__lines i:nth-child(3) { width: 58%; animation-delay: 0.6s; }
.ds-mrec em { font-family: var(--font-mono); font-size: 0.68rem; color: var(--action); }
@keyframes ds-line { 0% { transform: scaleX(0); } 40%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* light paper band: surfaces of the micro-UIs */
.ds-theme--light .ds-tile { background: #fffdf9; box-shadow: 0 1px 0 rgba(21, 19, 15, 0.04), 0 18px 40px -30px rgba(60, 40, 10, 0.35); }
.ds-theme--light .ds-tile__visual { background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(232, 168, 87, 0.16), transparent 70%); }
.ds-theme--light .ds-mwa__bubble, .ds-theme--light .ds-wa__bubble { background: #e3f6ef; border-color: #b9e7d6; }
.ds-theme--light .ds-mhand__label, .ds-theme--light .ds-mrec em, .ds-theme--light .ds-chip, .ds-theme--light .ds-mwa__ticks { color: #157a63; }
.ds-theme--light .ds-mlead em { color: #8f5a10; }
.ds-theme--light .m-wave[data-mode="caller"] .m-wave__bar { background: #2bb08f; }

/* ================================================================ D2: home sections 4-10 */

/* ---- 4. dashboard preview: tabs over a layered stack (JS); a plain list of screens without JS */
.ds-dash__tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ds-dash__tab { padding: 0.5rem 1rem; min-height: 40px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--ds-muted) !important; border: 1px solid var(--ds-border-2) !important; transition: color var(--m-dur-2) ease, background-color var(--m-dur-2) ease, border-color var(--m-dur-2) ease; }
.ds-dash__tab:hover { color: var(--ds-fg) !important; }
.ds-dash__tab[aria-selected="true"] { color: #1a1206 !important; background: var(--voice) !important; border-color: var(--voice) !important; }
.ds-dash__stack { display: grid; gap: 2rem; transform: translate3d(0, var(--ds-py, 0px), 0); }
.ds-dash__panel { margin: 0; }
.ds-dash__frame { display: flex; gap: 0.4rem; padding: 0.7rem 0.9rem; border: 1px solid var(--ds-border-2); border-bottom: 0; border-radius: var(--ds-radius) var(--ds-radius) 0 0; background: rgba(255, 255, 255, 0.03); }
.ds-dash__shot { border: 1px solid var(--ds-border-2); border-radius: 0 0 var(--ds-radius) var(--ds-radius); overflow: hidden; aspect-ratio: 16 / 10; background: #0b0b0c; position: relative; box-shadow: var(--ds-shadow); }
.ds-dash__shot img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.ds-dash__shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.ds-dash__caption { display: grid; gap: 0.2rem; margin-top: 1rem; max-width: 46rem; }
.ds-dash__caption strong { font-size: 1.05rem; }
.ds-dash__caption span { color: var(--ds-muted); font-size: 0.95rem; }
.m-js .ds-dash__stack { display: block; position: relative; perspective: 1800px; }
.m-js .ds-dash__panel { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translate3d(0, 28px, -80px) scale(0.96); transition: opacity var(--m-dur-3) var(--m-ease-out), transform var(--m-dur-3) var(--m-ease-out); pointer-events: none; }
.m-js .ds-dash__panel.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; z-index: 2; }
.m-js .ds-dash__panel.is-next { opacity: 0.35; transform: translate3d(3%, -22px, -120px) scale(0.94); z-index: 1; filter: saturate(0.6); }
.m-js .ds-dash__panel.is-next .ds-dash__caption, .m-js .ds-dash__panel.is-next .ds-dash__frame { visibility: hidden; }

/* ---- shared horizontal carousel (industries, testimonials): native scroll-snap + edge fades; buttons in ds.js */
.ds-carousel { position: relative; }
.ds-carousel__track {
  list-style: none; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  max-width: var(--max-w); margin-inline: auto;                         /* same width as the page column, so cards, header and the buttons below share both edges */
  padding: 0.5rem var(--space-4) 1rem; scroll-padding-inline: var(--space-4); scrollbar-width: none;            /* scroll-padding: snapping keeps the first card on the page grid */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ds-carousel__track::-webkit-scrollbar { display: none; }
.ds-carousel__track > li { scroll-snap-align: start; flex: none; }
.ds-carousel__controls { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.75rem; }
.ds-carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ds-border-2) !important; color: var(--ds-fg) !important; font-size: 1.1rem; transition: border-color var(--m-dur-2) ease, background-color var(--m-dur-2) ease; }
.ds-carousel__btn:hover { border-color: var(--ds-accent) !important; background: var(--voice-dim) !important; }
.ds-carousel__btn:disabled { opacity: 0.35; cursor: default; }

/* ---- 5. built for your business */
.ds-biz__card { width: min(78vw, 21rem); border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); overflow: hidden; transition: transform var(--m-dur-3) var(--m-ease-out), border-color var(--m-dur-2) ease; }
.ds-biz__card:hover { transform: translateY(-4px); border-color: var(--ds-accent); }
.ds-biz__link { display: flex; flex-direction: column; height: 100%; }
.ds-biz__media { aspect-ratio: 3 / 2; display: block; overflow: hidden; }
.ds-biz__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-dur-4) var(--m-ease-out); }
.ds-biz__card:hover .ds-biz__media img { transform: scale(1.04); }
.ds-biz__fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.ds-biz__fallback--a { background: radial-gradient(circle at 30% 30%, rgba(232, 168, 87, 0.35), transparent 60%), radial-gradient(circle at 80% 80%, rgba(79, 209, 174, 0.22), transparent 55%), #0f0d0a; }
.ds-biz__fallback--b { background: radial-gradient(circle at 70% 30%, rgba(79, 209, 174, 0.3), transparent 60%), radial-gradient(circle at 20% 85%, rgba(139, 124, 246, 0.25), transparent 55%), #0b0d0e; }
.ds-biz__icon { width: 4rem; height: 4rem; color: var(--voice); transition: transform var(--m-dur-3) var(--m-ease-spring); }
.ds-biz__icon svg { width: 100%; height: 100%; }
.ds-biz__card:hover .ds-biz__icon { transform: translateY(-4px) scale(1.06); }
.ds-biz__body { display: grid; gap: 0.4rem; padding: 1.1rem 1.2rem 1.25rem; }
.ds-biz__name { font-size: 1.1rem; font-weight: 600; }
.ds-biz__outcome { color: var(--ds-muted); font-size: 0.9rem; line-height: 1.5; }
.ds-biz__body .ds-link { margin-top: 0.3rem; }

/* ---- 6. control and safety */
.ds-safety__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ds-safety__features { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; }
.ds-safety__feature h3 { font-size: 1rem; font-weight: 600; margin: 0.7rem 0 0.3rem; }
.ds-safety__feature p { font-size: 0.9rem; color: var(--ds-muted); line-height: 1.55; }
.ds-safety__icon { width: 28px; height: 28px; color: var(--ds-accent); }
.ds-proof .ds-call__lines { gap: 0.75rem; }
.ds-proof__wait { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ds-muted); align-self: flex-end; }
.ds-proof__dots { display: inline-flex; gap: 3px; }
.ds-proof__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ds-muted); }
.ds-proof__result { margin-top: 1rem; font-size: 0.85rem; font-weight: 600; color: var(--action); }
.ds-proof.is-live .ds-proof__dots i { animation: ds-dot 1.1s ease-in-out infinite; }
.ds-proof.is-live .ds-proof__dots i:nth-child(2) { animation-delay: 0.15s; } .ds-proof.is-live .ds-proof__dots i:nth-child(3) { animation-delay: 0.3s; }
.ds-proof.is-live .ds-proof__wait { animation: ds-proof-wait 7s var(--m-ease-out) infinite; }
.ds-proof.is-live .ds-proof__yes { animation: ds-proof-yes 7s var(--m-ease-out) infinite; }
.ds-proof.is-live .ds-proof__result { animation: ds-proof-result 7s var(--m-ease-out) infinite; }
@keyframes ds-proof-wait { 0%, 8% { opacity: 0; } 14%, 46% { opacity: 1; } 52%, 100% { opacity: 0.35; } }
@keyframes ds-proof-yes { 0%, 46% { opacity: 0; transform: translate3d(0, 10px, 0); } 54%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ds-proof-result { 0%, 60% { opacity: 0; transform: scale(0.94); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.m-paused-tab .ds-proof * { animation-play-state: paused !important; }

/* ---- 7. integrations marquee */
.ds-integ__marquee { --m-gap: 1rem; --m-marquee-dur: 42s; padding: 0.5rem 0; }
.ds-integ__tile { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 1.3rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); width: 21rem; }
.ds-integ__tile .ts__icon { width: 30px; height: 30px; }
.ds-integ__tile span { display: grid; gap: 0.15rem; min-width: 0; }
.ds-integ__tile strong { font-size: 1rem; }
.ds-integ__tile em { font-style: normal; font-size: 0.85rem; color: var(--ds-muted); white-space: normal; }

/* ---- 8. old way vs Clio */
.ds-compare__table { border: 1px solid var(--ds-border-2); border-radius: var(--ds-radius); overflow: hidden; }
.ds-compare__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ds-compare__row > span { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-top: 1px solid var(--ds-border); font-size: 0.95rem; line-height: 1.45; }
.ds-compare__row--head > span { border-top: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-muted); }
.ds-compare__row > span + span { border-left: 1px solid var(--ds-border); background: rgba(232, 168, 87, 0.04); }
.ds-compare__old { color: var(--ds-muted); }
.ds-compare__x, .ds-compare__tick { width: 20px; height: 20px; flex: none; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-compare__x { stroke: var(--muted-2); }
.ds-compare__tick { stroke: var(--action); }
.ds-compare__tick path { stroke-dasharray: 14; stroke-dashoffset: 0; }
.m-js .ds-compare__row[data-reveal] .ds-compare__tick path { stroke-dashoffset: 14; transition: stroke-dashoffset var(--m-dur-3) var(--m-ease-out) calc(var(--m-delay, 0ms) + 250ms); }
.m-js .ds-compare__row[data-reveal].is-in .ds-compare__tick path { stroke-dashoffset: 0; }

/* ---- 9. plans (paper band), testimonials, logos */
.ds-plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.ds-plan { position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); }
.ds-plan--featured { border-color: var(--ds-accent); box-shadow: 0 24px 50px -30px rgba(200, 138, 46, 0.55); }
.ds-plan__ribbon { position: absolute; top: -0.7rem; left: 1.5rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 999px; background: var(--voice); color: #1a1206; }
.ds-plan__name { font-weight: 600; color: var(--ds-muted); }
.ds-plan__price { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.ds-plan__price span { font-size: 0.9rem; font-weight: 500; color: var(--ds-muted); margin-left: 0.2rem; letter-spacing: 0; }
.ds-plan__credits { font-size: 0.9rem; color: var(--ds-muted); margin-bottom: 0.75rem; }
.ds-plan .l-cta { justify-self: start; }
.ds-theme--light .l-cta--ghost { color: var(--ds-fg); border-color: var(--ds-border-2); }
.ds-tst__card { width: min(84vw, 26rem); }
.ds-tst__card figure { margin: 0; height: 100%; display: grid; gap: 1.25rem; align-content: space-between; padding: 1.5rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); }
.ds-tst__card blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.ds-tst__card figcaption { display: flex; align-items: center; gap: 0.75rem; }
.ds-tst__card figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ds-tst__card figcaption span { display: grid; }
.ds-tst__card em { font-style: normal; font-size: 0.85rem; color: var(--ds-muted); }
.ds-logos { padding: 3rem 0; text-align: center; }
.ds-logos__title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.ds-logos__wall { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3rem; }
.ds-logos__wall img { height: 34px; width: auto; filter: grayscale(1) brightness(1.6); opacity: 0.75; transition: opacity var(--m-dur-2) ease, filter var(--m-dur-2) ease; }
.ds-logos__wall a:hover img, .ds-logos__wall img:hover { opacity: 1; filter: none; }

/* ---- 10. FAQ (restyled existing accordion) + final CTA with the orb */
.ds-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ds-faq__head { position: sticky; top: 6rem; }
.ds-faq__head .ds-title { margin-bottom: 0.5rem; }
.ds-faq .faq-list { margin: 0; max-width: none; }
.ds-faq .faq-item { border-color: var(--ds-border-2); }
.ds-final { position: relative; overflow: hidden; padding: clamp(6rem, 12vw, 10rem) 0; text-align: center; border-top: 1px solid var(--border); }
.ds-orb--final { position: absolute; left: 50%; top: 58%; width: min(44rem, 120vw); transform: translate(-50%, -50%); opacity: 0.3; pointer-events: none; }
.ds-final::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 32% at 50% 45%, rgba(0, 0, 0, 0.55), transparent 75%); }   /* keeps the text readable over the orb */
.ds-final__inner { z-index: 1; }
.ds-orb--final .ds-orb__fallback { filter: blur(30px); }
.ds-final__inner { position: relative; display: grid; justify-items: center; gap: 1.25rem; }
.ds-final__title { font-weight: 600; font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -0.035em; line-height: 1.03; max-width: 16ch; text-wrap: balance; }
.ds-final__body { text-align: center; }
.ds-final__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }

/* ================================================================ D3: inner pages (body.ds-inner) */

/* ---- page hero: text left, product visual right */
.ds-phero { padding-top: calc(var(--space-6) + var(--space-3)); border-top: 0; overflow: hidden; }
.ds-phero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 80% 35%, rgba(232, 168, 87, 0.10), transparent 65%), radial-gradient(ellipse 40% 45% at 10% 90%, rgba(79, 209, 174, 0.06), transparent 65%); }
.ds-phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; position: relative; }
.ds-phero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 4.8vw, 4.1rem); letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; max-width: 15ch; }
.ds-phero__lede { margin-top: 1.25rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); }
.ds-phero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.ds-pagehead { padding-top: calc(var(--space-6) + var(--space-3)); }
.ds-pagehead .ds-phero__title { max-width: 24ch; }                /* 20ch wrapped the FAQ title in the fallback font only: a 0.09 shift at font swap */

/* ---- the visual frame used everywhere on inner pages */
.ds-vis { position: relative; width: 100%; }
.ds-vis--image img { width: 100%; height: auto; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); box-shadow: var(--ds-shadow); }
.ds-vis--narrow { max-width: 26rem; margin-inline: auto; }
.ds-vis--orb .ds-orb { width: min(100%, 24rem); margin-inline: auto; }
.ds-vis--dash { margin: 0; }
.ds-vis--stack { perspective: 1600px; }
.ds-vis--stack .ds-stage__layers { max-width: 36rem; }
.ds-vis--micro { min-height: 15rem; display: grid; place-items: center; padding: 2rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2);
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(232, 168, 87, 0.10), transparent 70%), var(--ds-surface); }
.ds-vis--micro:hover { transform: none; }
.ds-vcard { max-width: 28rem; margin-inline: auto; padding: 1.4rem 1.5rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface-2); box-shadow: var(--ds-shadow); }
.ds-vcard__title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-accent-text); margin: 0 0 0.8rem; }
.ds-vcard__rows { margin: 0; }
.ds-vcard__rows div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid var(--ds-border); font-size: 0.95rem; }
.ds-vcard__rows dt { color: var(--ds-muted); }
.ds-vcard__rows dd { margin: 0; color: var(--ds-fg); font-weight: 500; text-align: right; }

/* ---- alternating feature rows */
.ds-rows .ds-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--ds-border); }
.ds-rows .ds-head + .ds-row { border-top: 0; padding-top: 0; }
.ds-row--flip .ds-row__text { order: 2; }
.ds-row__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ds-accent-text); letter-spacing: 0.1em; }
.ds-row__title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 0.6rem 0 0.9rem; }
.ds-row__tag { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--action); border: 1px solid rgba(79, 209, 174, 0.35); border-radius: 999px; padding: 0.25rem 0.65rem; }

/* ---- numbered steps strip */
.ds-steps3__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; counter-reset: s; }
.ds-steps3__item { position: relative; padding: 1.4rem 1.25rem 1.5rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); }
.ds-steps3__item::after { content: ""; position: absolute; top: 2.05rem; right: -0.6rem; width: 0.6rem; height: 1px; background: var(--ds-border-2); }
.ds-steps3__item:last-child::after { display: none; }
.ds-steps3__num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: #1a1206; background: var(--voice); }
.ds-steps3__item h3 { font-size: 1rem; font-weight: 600; margin-top: 0.9rem; line-height: 1.35; }
.ds-steps3__item p { font-size: 0.875rem; color: var(--ds-muted); margin-top: 0.35rem; line-height: 1.5; }

/* ---- capability points, proof band, capability cards */
.ds-points__grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ds-points__item { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.25rem 1.3rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); font-size: 1rem; line-height: 1.5; }
.ds-points__check { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--action); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 0.05rem; }
.ds-cproof__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ds-cproof .ds-lede { margin-top: 1rem; }
.ds-capgrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.ds-capcard { border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); transition: transform var(--m-dur-3) var(--m-ease-out), border-color var(--m-dur-2) ease; }
.ds-carousel .ds-capcard { width: min(80vw, 19rem); }
.ds-capcard:hover { transform: translateY(-4px); border-color: var(--ds-accent); }
.ds-capcard__link { display: grid; gap: 0.55rem; padding: 1.4rem; height: 100%; align-content: start; }
.ds-capcard__icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; color: var(--voice); background: var(--voice-dim); }
.ds-capcard__icon svg { width: 1.4rem; height: 1.4rem; }
.ds-capcard__name { font-size: 1.05rem; font-weight: 600; margin-top: 0.4rem; }
.ds-capcard__desc { font-size: 0.9rem; color: var(--ds-muted); line-height: 1.5; }
.ds-capcard .ds-link { margin-top: 0.4rem; }

/* ---- About: transparency band */
.ds-transp__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ds-transp .ds-lede { margin-top: 1rem; }
.ds-transp__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.ds-transp__chips li { font-size: 0.85rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--ds-border-2); background: var(--ds-surface); }
.ds-transp__chips li span { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-accent-text); margin-right: 0.4rem; }

/* ---- How it works: the pinned story on its own page has six steps */
.ds-story--page .ds-step__name { font-size: 0.95rem; }

/* ---- blog list + article (existing bl-* markup, restyled) */
.ds-inner .bl-section { padding-bottom: var(--ds-pad); }
.ds-inner .bl-head { margin-bottom: 2.5rem; }
.ds-inner .bl-head .ds-lede { margin-top: 1rem; }
.ds-inner .bl-card { border: 1px solid var(--border-strong); border-radius: var(--ds-radius); overflow: hidden; background: rgba(255, 255, 255, 0.02); transition: transform var(--m-dur-3) var(--m-ease-out), border-color var(--m-dur-2) ease; }
.ds-inner .bl-card:hover { transform: translateY(-4px); border-color: var(--voice); }
.ds-inner .bl-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.bl-cover__img { width: 100%; height: 100%; object-fit: cover; }
.ds-inner .bl-meta, .ds-inner .bl-title, .ds-inner .bl-excerpt, .ds-inner .bl-read { padding-inline: 1.25rem; }
.ds-inner .bl-read { display: inline-block; padding-bottom: 1.25rem; }
.bl-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-bottom: var(--space-5); }
.bl-article-wrap:has(.bl-toc) { grid-template-columns: 14rem minmax(0, 1fr); }
.bl-toc { position: sticky; top: 6.5rem; align-self: start; font-size: 0.875rem; }
.bl-toc__title { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.75rem; }
.bl-toc ol { list-style: none; display: grid; gap: 0.5rem; border-left: 1px solid var(--border-strong); padding-left: 0.9rem; }
.bl-toc a { color: var(--muted); }
.bl-toc a:hover { color: var(--text); }
.ds-inner .bl-article { max-width: 70ch; font-size: 1.075rem; line-height: 1.75; }
.ds-inner .bl-article h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.2; margin: 2.5rem 0 0.9rem; scroll-margin-top: 6rem; }
.ds-inner .bl-article h3 { font-size: 1.2rem; margin: 1.8rem 0 0.6rem; }
.ds-inner .bl-article p, .ds-inner .bl-article li { color: #d6d3cd; }
.ds-inner .bl-article p { margin: 0 0 1.1rem; }
.ds-inner .bl-article ul, .ds-inner .bl-article ol { padding-left: 1.3rem; margin: 0 0 1.1rem; display: grid; gap: 0.4rem; }
.ds-inner .bl-article ul { list-style: disc; } .ds-inner .bl-article ol { list-style: decimal; }
.ds-inner .bl-article a { color: var(--voice); text-decoration: underline; text-underline-offset: 3px; }
.ds-inner .bl-article__cover { width: 100%; height: auto; border-radius: var(--ds-radius); margin-bottom: 2rem; }

/* ---- FAQ page (existing fq-* markup, restyled) + the search box */
.fq-search { margin-bottom: 1.75rem; }
/* at <= 900px the category chips wrap above the answers: a bold active chip re-wrapped the row while scrolling (CLS 0.1 measured at 390) */
@media (max-width: 900px) { .ds-inner .fq-nav a.is-active { font-weight: inherit; } }
.fq-search__label { display: block; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.5rem; }
.fq-search__box { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.9rem; border-radius: 14px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03); transition: border-color var(--m-dur-2) ease; }
.fq-search__box:focus-within { border-color: var(--voice); }
.fq-search__box svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.fq-search__box input { flex: 1; min-width: 0; height: 3rem; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 1rem; }
.fq-search__box input:focus { outline: none; }
.fq-search__clear { width: 2rem; height: 2rem; border-radius: 50%; color: var(--muted) !important; font-size: 1.2rem; }
.fq-search__clear:hover { color: var(--text) !important; background: var(--surface-2) !important; }
.ds-inner .fq-cat { padding: 1.5rem; border-radius: var(--ds-radius); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.015); margin-bottom: 1rem; }

/* ---- D3 priority-2 pages */
.ds-valtiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.ds-valtile { padding: 1.5rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); }
.ds-valtile h2 { font-size: 1.05rem; font-weight: 600; }
.ds-valtile p { margin-top: 0.4rem; font-size: 0.9rem; color: var(--ds-muted); line-height: 1.55; }
.ds-bizgrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.ds-bizgrid .ds-biz__card { width: auto; }
.ds-theme--light .ds-biz__card { background: #fffdf9; }
.ds-theme--light .ds-biz__outcome { color: var(--ds-muted); }
.ds-igroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.ds-igroup { padding: 1.5rem; border-radius: var(--ds-radius); border: 1px solid var(--ds-border-2); background: var(--ds-surface); }
.ds-igroup__title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-accent-text); font-weight: 500; }
.ds-igroup__items { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.ds-igroup__items li { font-size: 0.875rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--ds-border-2); }

/* existing sections on the restyled pages (industry detail, workflows, pricing, demo): same type and surfaces as the design system */
.ds-inner .l-section { padding-top: var(--ds-pad); padding-bottom: var(--ds-pad); }
/* site.css's .l-section { padding: X 0 } comes after .l-shell and wiped its side gutter on every "l-section l-shell" (text touched the screen edge at 390) */
.ds-inner .l-section.l-shell { padding-left: var(--space-4); padding-right: var(--space-4); }
@media (max-width: 1024px) { .ds-inner .l-section.l-shell { padding-left: var(--space-3); padding-right: var(--space-3); } }
.ds-inner .l-section .l-heading { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.032em; line-height: 1.05; }
.ds-inner .l-card, .ds-inner .l-problem-card { border-radius: var(--ds-radius); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.02); }
.ds-inner .l-cap { border-radius: var(--ds-radius); }
.ds-inner .l-rail__dot { background: var(--voice); color: #1a1206; border-color: var(--voice); }
.ds-inner .l-preview { border-radius: var(--ds-radius); }
.ds-inner .wf-chip, .ds-inner .wf-panel, .ds-inner .wf-decide { border-radius: var(--ds-radius); }
.ds-inner .l-page-header { padding-top: calc(var(--space-6) + var(--space-3)); }
.ds-inner .l-page-header .l-heading--page, .ds-inner .pr-hero h1, .ds-inner .bd-hero h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; }

/* legal pages: a readable article, no animation */
.ds-legal .l-page-header { padding-bottom: 1rem; }
.ds-legal .l-legal { max-width: 70ch; margin-inline: auto; font-size: 1.05rem; line-height: 1.75; }
.ds-legal .l-legal h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 2.5rem 0 0.8rem; }
.ds-legal .l-legal h3 { font-size: 1.1rem; color: var(--text); margin: 1.6rem 0 0.5rem; }
.ds-legal .l-legal p, .ds-legal .l-legal li { color: #d2cfc8; }
.ds-legal .l-legal ul { list-style: disc; padding-left: 1.3rem; }
.ds-legal .l-legal a { color: var(--voice); text-decoration: underline; text-underline-offset: 3px; }
.ds-legal *, .ds-legal *::before, .ds-legal *::after { animation: none !important; transition: none !important; }
.ds-legal [data-reveal], .ds-legal .l-reveal { opacity: 1 !important; transform: none !important; }

/* every inner page: a visible focus ring on dark and light bands */
.ds-inner :focus-visible { outline: 2px solid var(--voice); outline-offset: 3px; }
/* AA on inner pages: the second muted tone (#616166) measured 3.4:1 on black and 2.8:1 on the demo card (meta lines, small labels, consent text); the home page keeps its own */
.ds-inner { --muted-2: #8b8a8e; }
.ds-inner .ds-theme--light :focus-visible { outline-color: #8f5a10; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1023px) {
  .ds-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-tile--tall { grid-row: auto; }
}
@media (max-width: 899px) {
  .ds-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ds-phero__grid, .ds-rows .ds-row, .ds-cproof__grid, .ds-transp__grid { grid-template-columns: minmax(0, 1fr); }
  .ds-row--flip .ds-row__text { order: 0; }
  .ds-points__grid { grid-template-columns: minmax(0, 1fr); }
  .bl-article-wrap:has(.bl-toc) { grid-template-columns: minmax(0, 1fr); }
  .bl-toc { position: static; }
  .ds-steps3__item::after { display: none; }
  .ds-safety__grid, .ds-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .ds-faq__head { position: static; }
  .ds-compare__row > span { padding: 0.85rem 0.9rem; font-size: 0.875rem; gap: 0.5rem; }
  .ds-steps { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding-top: 0; padding-left: 1.9rem; }
  .ds-steps__rail { top: 0.35rem; bottom: 0.35rem; left: 0.42rem; right: auto; width: 2px; height: auto; }
  .ds-step__dot { top: 0.15rem; left: -1.9rem; }
  .ds-stage__layers { grid-template-columns: minmax(0, 1fr); }
  .ds-layer--call { grid-row: auto; }
  .ds-layer--call, .ds-layer--cal, .ds-layer--wa { transform: none; }
  .ds-hear__grid { grid-template-columns: minmax(0, 1fr); }
  .ds-orb { width: min(100%, 18rem); }
}
@media (max-width: 1024px) {
  .ds-carousel__track { padding-inline: var(--space-3); scroll-padding-inline: var(--space-3); }      /* the same gutter as .l-shell at this width */
}
@media (max-width: 599px) {
  .ds-bento__grid { grid-template-columns: minmax(0, 1fr); }
  .ds-phero { padding-top: calc(var(--space-5) + var(--space-2)); }
  .ds-phero__ctas .l-cta { flex: 1 1 100%; justify-content: center; }
  .ds-safety__features { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ds-dash__tab { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
  .ds-tile--wide { grid-column: auto; }
  .ds-mark { display: none; }
}

/* ---------------------------------------------------------------- reduced motion: final states, nothing loops */
@media (prefers-reduced-motion: reduce) {
  .ds-micro *, .ds-pulse, .ds-orb__fallback { animation: none !important; }
  .ds-mcal__slot.is-target { background: var(--voice); border-color: var(--voice); }
  .ds-mcal__slot.is-target em { opacity: 1; }
  .ds-mlang__list { transform: translateY(-5.2rem); }
  .ds-mhand__pulse { transform: translateX(120%); }
  .ds-tile, .ds-link span, .ds-player__btn { transition: none; }
  .ds-tile:hover { transform: none; }
  [data-depth] { --ds-py: 0px !important; will-change: auto; }
  .ds-proof *, .ds-proof__wait, .ds-proof__yes, .ds-proof__result { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ds-dash__panel, .ds-biz__card, .ds-biz__media img, .ds-biz__icon, .ds-logos__wall img { transition: none !important; }
  .ds-carousel__track { scroll-behavior: auto; }
  .m-js .ds-compare__row[data-reveal] .ds-compare__tick path { stroke-dashoffset: 0; transition: none; }
  .ds-capcard, .ds-inner .bl-card, .fq-search__box { transition: none !important; }
  .ds-capcard:hover, .ds-inner .bl-card:hover { transform: none; }
}