/* ============================================================
   SHOWCASE — "Selected website work" immersive proof wall
   Solar Halo system: solar orange + aurora violet on charcoal.
   ============================================================ */
.showcase-sec { position: relative; overflow: hidden; padding-top: 96px; padding-bottom: 100px; }
.showcase-sec .haze-bloom { opacity: calc(0.12 * var(--glow-mult)); }
.showcase-sec .wrap { position: relative; z-index: 1; }

/* ---- header --------------------------------------------------- */
.sw-head { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: end; }
.sw-head .p-lead { max-width: 560px; }
.sw-head-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px; justify-content: flex-end; align-content: end; padding-bottom: 8px; }
.sw-stat__num { font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1; letter-spacing: -0.02em; color: var(--fg1); display: inline-flex; align-items: baseline; }
.sw-stat__num span { color: var(--violet-400); font-size: 24px; margin-left: 1px; }
.sw-stat__lbl { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.5; color: var(--fg2); margin-top: 11px; max-width: 18ch; }

/* ---- focus grid + peripheral asides --------------------------- */
.sw-card { min-width: 0; display: flex; flex-direction: column; }
.sw-focus { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; }

/* Focus + aside cards enter with a quick "un-minimize" pop — each scales up from small
   and fast, staggered left-to-right (var --si). Mirrors the card-mat safety pattern:
   visible by default; animates only on a genuine in-view (.seen); .settled +
   reduced-motion force the final state for capture/offscreen contexts. */
.sw-band.seen .sw-card--focus,
.sw-band.seen .sw-aside-card {
  transform-origin: center center;
  animation: swPop .34s cubic-bezier(.2,.72,.26,1.12) backwards;
  animation-delay: calc(var(--si, 0) * .06s);
}
@keyframes swPop {
  0%   { opacity: 0; transform: scale(.46); }
  72%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
/* content rides with the card (no separate, slower content fade) */
.sw-band.seen .sw-card--focus > :not(.card-beam):not(.work-card-glow) { animation: none; opacity: 1; }
/* once settled, or for reduced motion, force the final resting state */
.sw-band.settled .sw-card--focus,
.sw-band.settled .sw-aside-card { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sw-band .sw-card--focus,
  .sw-band .sw-aside-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* the "screenshot" frame */
.sw-shot {
  position: relative; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--border-default); background: #0a090d;
  transform: translate3d(0, var(--par, 0px), 0);
  box-shadow: 0 26px 64px -30px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.05);
  isolation: isolate; transition: box-shadow .35s var(--ease), border-color .35s var(--ease), transform .18s linear;
}
/* featured cards sit in the same glass panel as the testimonial / what-we-build
   cards: dual-gradient fill, hairline white border, soft elevation + inner top
   highlight, and a diagonal sheen via ::before. */
.sw-card--focus {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), linear-gradient(180deg, rgba(16,14,20,0.6), rgba(11,10,15,0.6));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: 18px;
  padding: 14px 14px 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16);
}
.sw-card--focus::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, transparent 40%); }
.sw-card--focus > * { position: relative; z-index: 1; }
.sw-card--focus .sw-shot { height: 268px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.sw-card--focus .sw-meta { margin-top: 15px; padding: 0 4px; }
.sw-card--focus .sw-about { margin-top: 13px; padding: 0 4px 2px; }
.sw-fc--ez { align-self: stretch; }
.sw-fc--ez .sw-shot { height: auto; flex: 1 1 auto; min-height: 360px; }
.sw-aside-card .sw-shot { height: 252px; }
/* device-card ambient: orange ← → violet, like the real mockups */
.sw-shot--device { background:
  radial-gradient(58% 92% at -4% 112%, rgba(242,100,34,0.18), transparent 56%),
  radial-gradient(58% 92% at 104% -10%, rgba(140,107,240,0.22), transparent 56%),
  linear-gradient(160deg, #100e16 0%, #09080c 100%); }
/* desktop browser frame (kept landscape; phone overlaps its corner) */
.sw-desktop { position: absolute; left: 5%; top: 9%; bottom: 9%; right: 6%; border-radius: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #0a090d; box-shadow: 0 26px 54px -24px rgba(0,0,0,0.8); display: flex; flex-direction: column; }
/* EZ-Raider featured: size the browser to the clip's exact aspect (640×414) so
   it fills edge-to-edge with no letterbox, centered in the tall card; the phone
   is enlarged and overlaps its lower-right corner. */
.sw-fc--ez .sw-desktop { left: 2%; right: 6%; top: 50%; bottom: auto; transform: translateY(calc(-50% - 20px)); }
.sw-fc--ez .sw-desktop .sw-vid { flex: none; width: 100%; height: auto; aspect-ratio: 640 / 414; object-fit: cover; }
/* phone overlapping the desktop's bottom-right corner */
.sw-phone { position: absolute; z-index: 4; right: 4%; bottom: 6%; width: 21%; aspect-ratio: 0.485; border-radius: 16px; overflow: hidden; background: #0a090d; border: 3px solid #1a1822; box-shadow: 0 22px 46px -16px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.07); }
.sw-fc--ez .sw-phone { width: 22%; right: 3%; bottom: 7%; }
/* other featured cards: size the browser to the clip aspect (no side gray),
   centered; cards that also have a phone hug the browser left and place the
   phone beside it on the right instead of overlapping on top. */
.sw-card--focus:not(.sw-fc--ez) .sw-desktop {
  top: 50%; bottom: auto; left: 50%; right: auto;
  transform: translate(-50%, -50%); width: 62%;
}
.sw-card--focus:not(.sw-fc--ez) .sw-desktop .sw-vid {
  flex: none; width: 100%; height: auto; aspect-ratio: 640 / 414; object-fit: cover;
}
/* Majestic (focus card with no phone) has spare width — enlarge its browser/video */
.sw-card--focus:not(.sw-fc--ez):not(.sw-fc--mob) .sw-desktop { width: 86%; }
.sw-card--focus.sw-fc--mob .sw-scene {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 7% 4%;
  container-type: size;
}
/* both devices share ONE height (so they always match), capped by BOTH the scene
   height and the available width — so the pair never overflows / clips the card
   at narrow breakpoints. ~1.85 = desktop(1.31) + phone(0.485) aspect widths + margin. */
.sw-card--focus.sw-fc--mob .sw-desktop,
.sw-card--focus.sw-fc--mob .sw-phone {
  position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto;
  transform: none; flex: 0 0 auto; width: auto;
  height: min(100cqh, calc((100cqw - 14px) / 1.85));
}
.sw-card--focus.sw-fc--mob .sw-desktop { aspect-ratio: 1.31; }
.sw-card--focus.sw-fc--mob .sw-phone { aspect-ratio: 0.485; }
.sw-card--focus.sw-fc--mob .sw-desktop .sw-vid {
  flex: 1 1 auto; width: 100%; height: auto; aspect-ratio: auto; min-height: 0; object-fit: cover;
}
/* the recorded clips */
.sw-vid { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #0a090d; }
.sw-desktop .sw-vid { flex: 1 1 auto; min-height: 0; }
.sw-aside-card .sw-desktop { position: absolute; inset: 0; left: 0; right: 0; top: 0; bottom: 0; border-radius: 13px; box-shadow: none; }
.sw-phone-scr { position: absolute; inset: 0; overflow: hidden; padding: 8px 8px 0; display: flex; flex-direction: column;
  background:
    radial-gradient(110% 70% at 80% -8%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 60%),
    linear-gradient(162deg, #15121b 0%, #0a090d 100%); }
.sw-phone-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.sw-phone-logo { height: 8px; max-width: 60%; object-fit: contain; object-position: left center; }
.sw-phone-name { font-family: var(--font-display); font-weight: 700; font-size: 8px; letter-spacing: -0.01em; color: #fff; }
.sw-phone-burger i { font-size: 10px; color: #fff; opacity: 0.85; }
.sw-phone-hero { margin: auto 0; position: relative; z-index: 1; }
.sw-ph-h { font-family: var(--font-display); font-weight: 600; font-size: 11px; line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 4px 0 0; }
.sw-fc--ez .sw-ph-h { font-size: 14px; }
.sw-ph-cta { margin-top: 7px; display: inline-flex; padding: 4px 9px; border-radius: 6px; font-family: var(--font-ui); font-weight: 600; font-size: 7.5px; color: #0b0a0e; background: #fff; }
/* peripheral asides: vertical drift, faded to black at the screen edges */
.sw-band { position: relative; margin-top: 52px; }
.sw-band .wrap { position: relative; z-index: 1; }
.sw-aside { position: absolute; top: -8px; bottom: -8px; width: 340px; z-index: 0; overflow: hidden; }
.sw-aside--left { right: calc(50% + 600px); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 80%); mask-image: linear-gradient(90deg, transparent 0%, #000 80%); }
.sw-aside--right { left: calc(50% + 600px); -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 100%); mask-image: linear-gradient(90deg, #000 20%, transparent 100%); }
.sw-aside-inner { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }
.sw-aside-track { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; gap: 16px; padding: 0 16px; }
.sw-aside-card .sw-meta { margin-top: 9px; }
.sw-aside-card .sw-lens { padding: 11px 14px; }
.sw-aside-card .sw-lens-head { margin-bottom: 7px; padding-bottom: 7px; }
.sw-aside-card .sw-lens-grid { gap: 5px 12px; }
.sw-aside-card .sw-lens-v { font-size: 11.5px; line-height: 1.3; }
.sw-aside-card .sw-name { font-size: 13px; }
.sw-aside-card .sw-cat { font-size: 10px; padding: 3px 9px; }
/* RIGHT aside only (LDR, Enso, Moonshot, Airtop): size each card to its clip so
   the browser has no top/bottom black bands, and use the height we free up to
   add more breathing room between cards in the column. (Left side unchanged for
   now — pending approval.) */
.sw-aside--right .sw-aside-track { gap: 34px; }
.sw-aside--right .sw-aside-card .sw-shot { height: auto; }
.sw-aside--right .sw-aside-card .sw-desktop { position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; }
.sw-aside--right .sw-aside-card .sw-desktop .sw-vid { flex: none; width: 100%; height: auto; aspect-ratio: 640 / 414; min-height: 0; object-fit: cover; }
/* LEFT aside (Bluegrid, Viola, iCoStore, Vimi): same fit-to-clip + spacing. */
.sw-aside--left .sw-aside-track { gap: 34px; }
.sw-aside--left .sw-aside-card .sw-shot { height: auto; }
.sw-aside--left .sw-aside-card .sw-desktop { position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; }
.sw-aside--left .sw-aside-card .sw-desktop .sw-vid { flex: none; width: 100%; height: auto; aspect-ratio: 640 / 414; min-height: 0; object-fit: cover; }
.sw-card:hover .sw-shot { transform: translate3d(0, calc(var(--par, 0px) - 3px), 0); }
.sw-card--featured .sw-shot {
  border-color: var(--border-brand);
  box-shadow: 0 26px 64px -28px rgba(0,0,0,0.78), 0 0 36px rgba(242,100,34, calc(0.16 * var(--glow-mult)));
}

/* inner scene that zooms / brightens on hover */
.sw-scene { position: absolute; inset: 0; transform-origin: 50% 42%; transition: transform .65s var(--ease), filter .65s var(--ease); }
.sw-card:hover .sw-scene { transform: scale(1.045); filter: brightness(1.09) saturate(1.06); }

/* browser chrome */
.sw-chrome { position: relative; z-index: 3; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: rgba(255,255,255,0.045); border-bottom: 1px solid var(--border-subtle); }
.sw-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); flex-shrink: 0; }
.sw-url { margin-left: 12px; height: 19px; flex: 1; max-width: 280px; border-radius: 999px; background: rgba(255,255,255,0.05); display: inline-flex; align-items: center; padding: 0 11px; font-family: var(--font-ui); font-weight: 500; font-size: 10px; color: var(--fg3); letter-spacing: 0.01em; overflow: hidden; white-space: nowrap; }
.sw-url i { font-size: 11px; margin-right: 5px; color: var(--fg3); }

/* faux site body — tinted by --acc */
.sw-site { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; overflow: hidden;
  background:
    radial-gradient(95% 75% at 80% -8%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 58%),
    radial-gradient(72% 62% at 8% 112%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
    linear-gradient(162deg, #15121b 0%, #0a090d 100%);
}
.sw-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 30%, #000 10%, transparent 80%);
  mask-image: radial-gradient(80% 80% at 50% 30%, #000 10%, transparent 80%); }
.sw-bloom { position: absolute; width: 60%; height: 70%; right: -6%; top: -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 60%, transparent), transparent 64%); filter: blur(46px); opacity: 0.85; }

.sw-frame { position: absolute; inset: 0; padding: 20px 26px; display: flex; flex-direction: column; }
.sw-card--focus .sw-frame { padding: 13px 15px; }
.sw-fc--ez .sw-frame { padding: 18px 22px; }
.sw-aside-card .sw-frame { padding: 11px 13px; }

/* nav */
.sw-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sw-logo { height: 16px; width: auto; max-width: 128px; object-fit: contain; object-position: left center; opacity: 0.97; display: block; }
.sw-logo-txt { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: #fff; }
.sw-nav-items { display: flex; align-items: center; gap: 11px; }
.sw-nav-link { width: 22px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.22); }
.sw-nav-cta { padding: 5px 11px; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; font-size: 9px; color: #0c0a10;
  background: color-mix(in srgb, var(--acc) 82%, #fff 18%); white-space: nowrap; letter-spacing: 0.01em; }

/* hero */
.sw-stage { flex: 1; display: flex; align-items: center; gap: 22px; min-height: 0; }
.sw-frame--center .sw-stage { justify-content: center; text-align: center; }
.sw-frame--center .sw-hero { align-items: center; }
.sw-hero { display: flex; flex-direction: column; align-items: flex-start; max-width: 80%; min-width: 0; }
.sw-frame--split .sw-hero { max-width: 54%; }
.sw-eybr { font-family: var(--font-ui); font-weight: 600; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--acc) 55%, #fff); }
.sw-h { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: 9px 0 0; text-wrap: balance; }
.sw-card--focus .sw-h { font-size: 18px; }
.sw-fc--ez .sw-h { font-size: 27px; }
.sw-aside-card .sw-h { font-size: 13px; }
.sw-sub { font-family: var(--font-body); font-weight: 300; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.72); margin: 10px 0 0; max-width: 32ch; }
.sw-card--focus .sw-sub { display: none; }
.sw-fc--ez .sw-sub { display: block; }
.sw-cta-pill { margin-top: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-family: var(--font-ui); font-weight: 600; font-size: 10.5px; color: #0b0a0e; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.sw-cta-pill i { font-size: 12px; }

/* split-variant faux UI panel */
.sw-panel { flex-shrink: 0; width: 38%; max-width: 230px; align-self: center; display: flex; flex-direction: column; gap: 9px; padding: 16px; border-radius: 12px;
  background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(8px); box-shadow: 0 16px 40px -18px rgba(0,0,0,0.7); }
.sw-panel-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, var(--acc)); box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 70%, transparent); margin-bottom: 4px; }
.sw-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.20); }
.sw-bar.w90 { width: 90%; } .sw-bar.w80 { width: 80%; background: color-mix(in srgb, var(--acc) 60%, rgba(255,255,255,0.2)); } .sw-bar.w70 { width: 70%; } .sw-bar.w55 { width: 55%; }
@media (max-width: 1180px) { .sw-panel { display: none; } .sw-frame--split .sw-hero { max-width: 80%; } }
.sw-aside-card .sw-panel { display: none; }

.sw-horizon { position: absolute; left: 0; right: 0; bottom: 23%; height: 1px; background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: 0.55; }

/* ---- the lens overlay (slides up on hover) -------------------- */
.sw-lens { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; border-radius: 13px; padding: 13px 16px;
  background: linear-gradient(158deg, rgba(30,26,37,0.90), rgba(11,9,15,0.94));
  border: 1px solid var(--border-default); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 22px 54px -22px rgba(0,0,0,0.85);
  transform: translateY(calc(100% + 16px)); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), opacity .42s var(--ease); }
.sw-card:hover .sw-lens, .sw-card:focus-within .sw-lens { transform: none; opacity: 1; }
.sw-lens-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.sw-lens-brand { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: #fff; }
.sw-lens-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 600; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta-200); white-space: nowrap; }
.sw-lens-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--magenta-400); box-shadow: 0 0 8px var(--magenta-400); }
.sw-lens-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.sw-lens-k { font-family: var(--font-ui); font-weight: 600; font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg3); white-space: nowrap; padding-top: 1px; }
.sw-lens-v { font-family: var(--font-body); font-weight: 300; font-size: 12px; line-height: 1.34; color: var(--neutral-050); }

/* ---- meta row (always visible) -------------------------------- */
.sw-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.sw-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--fg1); }
.sw-cat { font-family: var(--font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; color: var(--fg2); padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); white-space: nowrap; }

/* ---- "About this site" dropdown (replaces the hover lens) ------ */
.sw-about { margin-top: 12px; border-top: 1px solid var(--border-subtle); }
.sw-about-sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 2px 3px; font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg2); transition: color .18s ease; }
.sw-about-sum::-webkit-details-marker { display: none; }
.sw-about-sum:hover { color: var(--fg1); }
.sw-about-chev { font-size: 17px; color: var(--magenta-300); transition: transform .28s var(--ease); }
.sw-about[open] .sw-about-chev { transform: rotate(180deg); }
.sw-about-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding: 10px 2px 4px; animation: sw-about-in .32s var(--ease); }
@keyframes sw-about-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- bottom CTA band ------------------------------------------ */
/* shared CTA text classes (also used by testimonials + how-it-works CTAs) */
.sw-cta-h { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; color: var(--fg1); margin: 14px auto 0; max-width: 18ch; text-wrap: balance; }
.sw-cta-micro { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.55; color: var(--fg2); margin: 16px auto 0; max-width: 46ch; }
.sw-foot-cta { margin: 56px auto 0; max-width: 720px; text-align: center; }
.sw-foot-h { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg1); margin: 0 auto; max-width: 24ch; text-wrap: balance; }
.sw-foot-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---- responsive collapses ------------------------------------- */
@media (max-width: 1240px) {
  .sw-aside { display: none; }
}
@media (max-width: 1140px) {
  .sw-focus { grid-template-columns: repeat(6, 1fr); }
  .sw-card--focus { grid-column: auto / span 3 !important; grid-row: auto !important; }
  .sw-fc--ez { grid-column: auto / span 6 !important; grid-row: auto !important; align-self: auto; }
  .sw-card--focus .sw-shot { height: 300px !important; }
  .sw-fc--ez .sw-shot { flex: none !important; min-height: 0 !important; }
  /* cap the EZ browser to the (300px) shot here so its content-height layout
     can't overflow / clip the chrome; video fills the fixed-height box */
  .sw-fc--ez .sw-desktop { top: 8%; bottom: 8%; left: 4%; right: 9%; transform: none; }
  .sw-fc--ez .sw-desktop .sw-vid { flex: 1 1 auto; height: auto; aspect-ratio: auto; min-height: 0; }
  .sw-fc--ez .sw-phone { width: 12%; }
}
@media (max-width: 980px) {
  .sw-head { grid-template-columns: 1fr; gap: 26px; }
  .sw-head-aside { justify-content: flex-start; gap: 30px 48px; }
}
@media (max-width: 620px) {
  .sw-focus { grid-template-columns: 1fr; }
  .sw-card--focus, .sw-fc--ez { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .sw-card--focus .sw-shot { height: 256px !important; }
  .sw-card--focus .sw-phone { width: 15%; }
  .sw-cta-h { font-size: 24px; }
}