/* ==========================================================================
   Astute Computer Ribbons — theme + grounded site
   Tokens validated against the three source clips (see DESIGN-PLAN.md §4.1).
   ========================================================================== */

:root {
  --void:  #050C18;   /* page ground, deepest negative space */
  --ink:   #0A1830;   /* base surface between video sections */
  --slate: #14294D;   /* cards, dividers, raised surfaces */
  --steel: #5F84AD;   /* secondary text — corrected to clear AA on --ink (4.54:1) */
  --steel-dim: #5B7FA6; /* original; large text only (18px+/14px bold) */
  --paper: #EEF2F7;   /* headline + body text */
  --cyan:  #2BB3C7;   /* the single interactive accent */
  --cream: #C7BFB2;   /* measured from the paper stack in-frame; used sparingly */

  --gutter: clamp(24px, 6vw, 96px);
  --maxw: 1440px;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

  /* Engine theme hooks — unlayered, so they beat the engine's @layer defaults. */
  --sw-bg: var(--void);
  --sw-ink: var(--paper);
  --sw-ink-soft: var(--steel);
  --sw-accent: var(--cyan);
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-body);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--cyan); color: var(--void); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   0. #beats — the authored copy, and the no-JS fallback
   The seven beats are written in index.html. The engine adopts those nodes into
   its copy layer on load and JS then removes this empty wrapper. If JS never
   runs, this is what the visitor gets: a plain, readable document carrying the
   same words. It must therefore stay VISIBLE by default — never display:none,
   or it becomes hidden text.
   ========================================================================== */

#beats {
  position: relative;
  z-index: 30;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(72px, 12vh, 140px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 9vh, 104px);
}
#beats .beat { display: flex; flex-direction: column; }
#beats .sw-copy__num { order: -1; }
#beats .sw-copy__title { margin-top: 14px; }

/* ==========================================================================
   1. FOOTAGE INTEGRATION — vignette + grain
   The measured black floor of the clips is #0C1517, which is 1.9x brighter in
   luminance than --void. Left alone, every clip reads as a lighter rectangle
   floating on a darker page. The vignette fuses the frame edge into the page;
   the grain hides macroblocking in the large flat navy fields (source is 720p
   and gets upscaled to full-screen). Both are load-bearing, not decoration.
   ========================================================================== */

.sw-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 48%, transparent 34%, rgba(5, 12, 24, .55) 74%, var(--void) 100%),
    linear-gradient(180deg, rgba(5, 12, 24, .75) 0%, transparent 22%, transparent 76%, rgba(5, 12, 24, .8) 100%);
}

.grain {
  position: fixed;
  inset: -150%;
  z-index: 45;
  pointer-events: none;
  opacity: .05;
  background-image: var(--grain-src);
  background-size: 180px 180px;
  animation: grain-shift 900ms steps(4, end) infinite;
  will-change: transform;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.5%); }
  50%  { transform: translate(1.5%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ==========================================================================
   2. ENGINE RESKIN
   ========================================================================== */

.sw-root { color: var(--paper); }

.sw-sky { background: var(--void); }
.sw-sky__grad {
  background: linear-gradient(178deg, #071021 0%, var(--void) 55%, #040A14 100%);
}
.sw-sky__glow {
  background: radial-gradient(58% 42% at 30% 22%, rgba(37, 57, 77, .5), transparent 70%);
}
.sw-particles { display: none; }

/* The scroll progress bar is removed — the numbered route rail already says
   where you are, and the film reads better without a chrome band across it. */
.sw-scrollbar { display: none; }

/* --- top bar --- */
.sw-topbar {
  padding: clamp(16px, 2.2vw, 26px) var(--gutter);
  transition: transform .45s var(--ease-out-expo), opacity .3s linear;
}
.sw-topbar.is-hidden { transform: translateY(-104%); opacity: 0; }
.sw-topbar::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5, 12, 24, .92), rgba(5, 12, 24, 0));
  opacity: 0; transition: opacity .35s linear;
}
.sw-topbar.is-solid::before { opacity: 1; }

.sw-brand { gap: 14px; color: var(--paper); align-items: center; }
/* The supplied ACR monogram, ~2.47:1. Its neutral strokes follow currentColor,
   its blues take --logo-accent, and the four CMYK ink dots keep their own
   colours — except K, which has to invert on a dark ground. */
.sw-brand__mark {
  width: 74px; height: 30px;
  border-radius: 0; background: none; box-shadow: none;
  color: var(--paper);
  --logo-accent: var(--cyan);
  --logo-k: var(--paper);
  flex: none;
}
.sw-brand__mark svg { display: block; width: 100%; height: 100%; }
.sw-brand__name { display: none; }

.brand-word {
  display: flex; flex-direction: column;
  line-height: 1; gap: 5px;
  padding-left: 14px;
  border-left: 1px solid rgba(91, 127, 166, .3);
}
.brand-word b {
  font-family: var(--font-display);
  font-weight: 800; font-size: .82rem;
  letter-spacing: .14em; color: var(--paper);
  white-space: nowrap;
}
.brand-word i {
  font-style: normal; font-family: var(--font-mono);
  font-weight: 500; font-size: .52rem;
  letter-spacing: .26em; color: var(--steel);
  white-space: nowrap;
}

@media (max-width: 1180px) { .brand-word { display: none; } }

.sw-nav {
  background: rgba(10, 24, 48, .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(20, 41, 77, .9);
  border-radius: 2px;
  padding: 4px;
}
.sw-nav__item {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel); border-radius: 1px; padding: 8px 14px;
}
.sw-nav__item:hover { color: var(--paper); }
.sw-nav__item.is-active { background: transparent; color: var(--cyan); }

.sw-topcta {
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .06em; font-weight: 500;
  color: var(--void); background: var(--cyan);
  border-radius: 2px; padding: 11px 18px;
  transition: transform .2s var(--ease-out-expo), box-shadow .2s linear;
}
.sw-topcta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(43, 179, 199, .22);
}

/* --- copy blocks --- */
.sw-copylayer::before { display: none; }   /* replaced by per-section scrims */

/* The engine overwrites `transform` inline every frame with its parallax nudge,
   which wipes out the stylesheet's translateY(-50%). So `top` would position the
   block's TOP edge and any tall block runs off the bottom. Make each copy a
   full-height flex column instead: content centres itself, and the engine's
   inline transform survives as the ±2vh parallax it was meant to be. */
.sw-copy {
  width: min(46vw, 520px);
  left: var(--gutter);
  right: auto;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding-block: 13vh 12vh;   /* clear of the top bar and the scroll hint */
}

/* Per-beat placement, derived from the measured subject occupancy of each
   clip range (DESIGN-PLAN.md §6). The copy always sits in the emptiest
   quadrant of its own frames, so type never lands on the hardware. */
.sw-copy.is-right { left: auto; right: var(--gutter); text-align: left; }
.sw-copy.is-center {
  left: 0; right: 0; width: auto;
  padding-inline: max(var(--gutter), calc((100vw - 760px) / 2));
  align-items: center;
  text-align: center;
}
.sw-copy.is-center .sw-copy__tags,
.sw-copy.is-center .sw-copy__cta { justify-content: center; }
.sw-copy.is-center .sw-copy__body { margin-inline: auto; }

.sw-copy.is-wide { width: min(58vw, 700px); }
.sw-copy.is-wide .sw-copy__body { max-width: 52ch; }

.sw-copy.anchor-low { justify-content: flex-end; }
.sw-copy.anchor-high { justify-content: flex-start; }

/* Each copy block carries its own scrim so it fades in and out with the copy
   instead of a single fixed gradient flipping sides mid-transition. */
.sw-copy .scrim {
  position: absolute;
  top: -110vh; bottom: -110vh;
  left: -100vw; right: -30vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--void) 0%,
    rgba(5, 12, 24, .88) 52%,
    rgba(5, 12, 24, .55) 74%,
    transparent 100%);
}
.sw-copy.is-right .scrim {
  left: -30vw; right: -100vw;
  background: linear-gradient(270deg,
    var(--void) 0%,
    rgba(5, 12, 24, .88) 52%,
    rgba(5, 12, 24, .55) 74%,
    transparent 100%);
}
.sw-copy.is-center .scrim {
  left: -60vw; right: -60vw;
  background: radial-gradient(60% 52% at 50% 50%, rgba(5, 12, 24, .9) 30%, transparent 78%);
}

/* Some footage has no empty quadrant to sit in (clipC stays tight on the
   machine for its whole run). Those beats get a heavier, wider scrim so the
   copy still reads without moving it somewhere the composition doesn't want. */
.sw-copy.scrim-strong .scrim {
  background: linear-gradient(90deg,
    var(--void) 0%, rgba(5, 12, 24, .97) 44%,
    rgba(5, 12, 24, .86) 70%, rgba(5, 12, 24, .34) 90%, transparent 100%);
}
.sw-copy.scrim-strong.is-right .scrim {
  background: linear-gradient(270deg,
    var(--void) 0%, rgba(5, 12, 24, .97) 44%,
    rgba(5, 12, 24, .86) 70%, rgba(5, 12, 24, .34) 90%, transparent 100%);
}

.sw-copy__num {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .16em; color: var(--steel);
}
.sw-copy__num::before {
  content: ""; display: inline-block;
  width: 18px; height: 1px; margin-right: 10px; vertical-align: middle;
  background: var(--cyan);
}

.sw-copy__eyebrow {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700; font-size: .76rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan);
}

.sw-copy__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: .98;
  letter-spacing: -.032em;
  color: var(--paper);
  margin: 14px 0 0;
  text-shadow: 0 2px 40px rgba(5, 12, 24, .9);
}

.sw-copy .rule {
  display: block;
  width: 64px; height: 2px;
  margin-top: 24px;
  background: var(--cyan);
  transform-origin: left center;
}
.sw-copy.is-center .rule { transform-origin: center; }

.sw-copy__body {
  margin-top: 22px;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.62;
  color: var(--steel);
  max-width: 44ch;
  text-shadow: 0 1px 20px rgba(5, 12, 24, .95);
}

.sw-copy__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 30px; padding: 0; list-style: none;
}
.sw-copy__tags li {
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel);
  background: rgba(20, 41, 77, .32);
  border: 1px solid rgba(20, 41, 77, .9);
  border-radius: 2px;
  padding: 7px 12px;
}

.sw-copy__cta { gap: 12px; margin-top: 34px; }

.sw-btn {
  font-family: var(--font-mono);
  font-weight: 500; font-size: .82rem; letter-spacing: .06em;
  border-radius: 2px; padding: 15px 24px;
  transition: transform .2s var(--ease-out-expo), box-shadow .2s linear,
              background .2s linear, color .2s linear;
}
.sw-btn--primary { color: var(--void); background: var(--cyan); }
.sw-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--cyan), 0 10px 28px rgba(43, 179, 199, .22);
}
.sw-btn--ghost {
  color: var(--paper);
  border: 1px solid rgba(91, 127, 166, .42);
  background: rgba(5, 12, 24, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sw-btn--ghost:hover { transform: translateY(-2px); border-color: var(--cyan); color: var(--cyan); }

/* The route rail is removed. The top nav already carries the section list with
   an active state, and each copy block prints its own 01 / 07 marker — a third
   position indicator sitting over the film was one too many. */
.sw-route { display: none; }

/* --- scroll hint --- */
.sw-hint {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .18em;
  color: var(--steel);
}
.sw-hint i { border-color: rgba(91, 127, 166, .4); border-radius: 2px; }
.sw-hint i::after { background: var(--cyan); }

/* --- scroll-driven counters --- */
.stat-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--paper);
}

/* ==========================================================================
   3. GROUNDED SITE
   Not used by index.html any more — the content sections moved out to
   _seo-sections.html to become standalone pages. Kept here so those pages
   inherit the same system when they are built.
   ========================================================================== */

.ground {
  position: relative;
  z-index: 25;
  background: var(--ink);
  border-top: 1px solid var(--slate);
}
/* the cinematic is fixed behind; this lifts the page back over it */
.ground::before {
  content: "";
  position: absolute;
  top: -14vh; left: 0; right: 0; height: 14vh;
  background: linear-gradient(180deg, transparent, var(--ink));
  pointer-events: none;
}

.section {
  padding-block: clamp(88px, 13vh, 180px);
  padding-inline: var(--gutter);
}
.section__inner { max-width: var(--maxw); margin-inline: auto; }

.section__head { max-width: 780px; margin-bottom: clamp(48px, 7vh, 84px); }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-weight: 700; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 20px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--cyan); flex: none;
}

h2.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1.02; letter-spacing: -.028em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
.section__head p {
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.62; color: var(--steel);
  max-width: 58ch;
}

/* --- services --- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--slate); border: 1px solid var(--slate); }
.card {
  background: var(--ink);
  padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; gap: 18px;
  transition: background .3s linear;
}
.card:hover { background: #0C1C38; }
.card__num {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .14em; color: var(--cyan);
}
.card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.16; letter-spacing: -.016em;
  color: var(--paper); margin: 0;
}
.card p { margin: 0; color: var(--steel); font-size: .98rem; line-height: 1.62; }
.card ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.card li {
  position: relative; padding-left: 20px;
  font-size: .92rem; color: var(--steel); line-height: 1.5;
}
.card li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--cyan); opacity: .8;
}

/* --- brands --- */
.brands {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: 8px;
}
.brands span {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  letter-spacing: -.02em; color: var(--steel);
  transition: color .3s linear;
}
.brands span:hover { color: var(--paper); }
.brands .more {
  font-family: var(--font-body); font-weight: 400;
  font-size: 1rem; letter-spacing: 0; color: var(--steel);
}

/* --- steps --- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); }
.step { border-top: 1px solid var(--slate); padding-top: 24px; }
.step b {
  display: block;
  font-family: var(--font-mono); font-weight: 500;
  font-size: .74rem; letter-spacing: .16em; color: var(--cyan);
  margin-bottom: 16px;
}
.step h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: -.014em; color: var(--paper); margin: 0 0 10px;
}
.step p { margin: 0; color: var(--steel); font-size: .95rem; line-height: 1.6; }

/* --- proof strip --- */
.proof {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--slate);
  border-block: 1px solid var(--slate);
}
.proof div { background: var(--ink); padding: clamp(26px, 3vw, 40px) clamp(20px, 2vw, 32px); }
.proof dt {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--paper); line-height: 1;
}
.proof dd {
  margin: 14px 0 0; font-size: .84rem; line-height: 1.45;
  letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--font-mono); color: var(--steel);
}

/* --- contact --- */
.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.tel {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  letter-spacing: -.01em; color: var(--paper);
  text-decoration: none; line-height: 1.1;
  transition: color .25s linear;
}
.tel:hover { color: var(--cyan); }
.contact__meta { display: flex; flex-direction: column; gap: 28px; }
.meta-row { border-top: 1px solid var(--slate); padding-top: 16px; }
.meta-row b {
  display: block; font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 10px; font-weight: 500;
}
.meta-row p { margin: 0; color: var(--paper); font-size: 1rem; line-height: 1.55; }
.meta-row p span { color: var(--steel); }

/* --- footer --- */
.foot {
  border-top: 1px solid var(--slate);
  padding: 40px var(--gutter);
  /* keep the last line clear of the floating call pill */
  padding-inline-end: clamp(var(--gutter), 6vw, 264px);
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  background: var(--void);
}
.foot small {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .06em; color: var(--steel);
}
.foot .brand-word b { font-size: .84rem; }

/* --- persistent call pill --- */
.callpill {
  position: fixed; z-index: 55;
  right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 500; font-size: .82rem;
  letter-spacing: .06em;
  color: var(--void); background: var(--cyan);
  border-radius: 2px; padding: 15px 22px;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(5, 12, 24, .6);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s linear, transform .4s var(--ease-out-expo);
}
.callpill.is-on { opacity: 1; transform: none; pointer-events: auto; }
.callpill:hover { box-shadow: 0 0 0 1px var(--cyan), 0 14px 38px rgba(43, 179, 199, .28); }
.callpill i { width: 5px; height: 5px; border-radius: 50%; background: var(--void); opacity: .5; }

/* --- desktop cursor ring --- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 70;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 1px solid var(--cyan); border-radius: 50%;
  pointer-events: none; opacity: 0;
  transition: opacity .3s linear, width .2s var(--ease-out-expo), height .2s var(--ease-out-expo), margin .2s var(--ease-out-expo);
  mix-blend-mode: screen;
}
.cursor.is-on { opacity: .75; }
.cursor.is-lg { width: 38px; height: 38px; margin: -19px 0 0 -19px; opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* A portrait crop has only one sensible place for copy, so the per-beat
     alignment derived from the landscape framing collapses to a single
     bottom-anchored column. Explicit block layout — not the desktop flex
     column — so the anchor is deterministic and always clears the top bar. */
  .sw-copy,
  .sw-copy.is-right,
  .sw-copy.is-center {
    display: block;
    left: var(--gutter); right: var(--gutter);
    top: auto; width: auto;
    height: auto;
    bottom: clamp(56px, 12vh, 104px);
    bottom: calc(clamp(52px, 11dvh, 100px) + env(safe-area-inset-bottom));
    padding-block: 0;
    padding-inline: 0;
    transform: none !important;
    text-align: left;
  }
  .sw-copy.is-center .sw-copy__tags,
  .sw-copy.is-center .sw-copy__cta { justify-content: flex-start; }
  .sw-copy.is-center .rule,
  .sw-copy.is-center .sw-copy__body { margin-inline: 0; }
  /* The mobile scrim is a vertical wash, so its horizontal extent only has to
     clear the viewport — it must NOT be sized off the copy box. The engine caps
     mobile copy at max-width:560px, so between ~560 and 860px wide (tablets, and
     any narrowed desktop window) a copy-relative bleed stops short of the right
     edge and leaves an unscrimmed strip. Bleed far enough that it cannot. */
  .sw-copy .scrim,
  .sw-copy.is-right .scrim,
  .sw-copy.is-center .scrim {
    left: -60vw; right: -60vw; top: auto; bottom: -60vh; height: 150vh;
    background: linear-gradient(0deg, var(--void) 14%, rgba(5, 12, 24, .8) 46%, transparent 100%);
  }
  .sw-copy__title { font-size: clamp(1.85rem, 7.4vw, 2.6rem); }
  .sw-copy__body { max-width: none; }
  .sw-copy__tags { margin-top: 22px; }
  .sw-copy__cta { margin-top: 26px; }

  .callpill {
    left: 0; right: 0; bottom: 0; border-radius: 0;
    justify-content: center;
    padding: 17px 22px calc(17px + env(safe-area-inset-bottom));
  }
  .sw-hint { display: none; }
  .proof { grid-template-columns: 1fr 1fr; }
  .brands { gap: 24px 36px; }
}

@media (max-width: 520px) {
  .proof { grid-template-columns: 1fr; }
}