/* =============================================================
   UX/UI Design services page — composed layout on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   ============================================================= */
.uxp {
  --uxp-max: var(--container-inner);
  /* warm trio sampled from the logo mark — no violet on this page */
  --uxp-orange: #F5822B;
  --uxp-red: #F0324B;
  --uxp-mag: var(--color-secondary-magenta);
}
/* The hero's warm wash is not clipped at the hero's bottom edge, it runs on into
   the page. Every section below sits in its own layer above it and carries no
   background of its own, so the wash shows through the empty space and passes
   behind the text instead of being cut off on a straight line. */
.uxp-section { position: relative; z-index: 1; padding: var(--space-8) var(--gutter) 0; }
.uxp-section--tight { padding-top: var(--space-7); }

.uxp-h2 {
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.01;
  margin: var(--space-3) 0 0;
}
.uxp-sub { font-size: var(--fs-lead); color: var(--color-ink-60); line-height: 1.55; max-width: 620px; margin: var(--space-3) 0 0; }
.uxp-wrap--center-intro > .uxp-eyebrow { display: block; text-align: center; }
.uxp-wrap--center-intro > .uxp-h2 { text-align: center; }
.uxp-wrap--center-intro > .uxp-sub { margin-inline: auto; text-align: center; }

/* ---------- Hero ---------- */
/* No overflow clipping: the bloom, the rings and the wash all reach past the
   bottom of the hero and must dissolve on their own falloff. Clipping them here
   drew a straight edge the full width of the page. */
.uxp-hero {
  position: relative;
  /* No bottom padding: the next section's own padding-top is the gap, the
     same rhythm as between every other pair of sections. */
  padding: calc(var(--header-height) + var(--space-5)) var(--gutter) 0;
}
/* Ambient hero wash: three morphing blobs, two accent families (orange, pink/
   magenta) — same drawing language as the homepage hero glow, re-tuned to this
   page's warm palette. Hue, spread and centre are animated custom properties
   (registered in styles.css) so each blob's gradient drifts and reshapes
   itself instead of a fixed shape just being moved or recolored. */
/* Sized and positioned like the homepage glow: the box is much bigger than
   what's ever visible on screen and sits mostly off-canvas, so only the soft
   fade tail of the gradient shows on the page — never the saturated core.
   Shrinking these boxes (or capping them with max-width) brings the hot
   centre fully on-screen and it reads as a hard, distinct spot instead of a
   wash — that's what happened the first time this was built. */
/* Literal copy of home's hero glow recipe (css/styles.css .hero__glow /
   --lime / --violet), per the "Background glow gradient" rule — position,
   size, timing, keyframe percentage steps, hue-drift deltas, alphas and
   stop percentages are all identical to home's; only the two hues (52deg
   orange, 20deg red, from docs/_as/colors.html) and the pastel oklch
   register (L 0.9, C ~0.1-0.12) are page-specific — see css/resources.css
   for the confirmed-working reference. */
.uxp-hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -24%; right: -42%; width: 100vw; height: 100vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 52deg) / 0.85),
    oklch(0.9 0.1 var(--g-h2, 20deg) / 0.4) 46%,
    transparent 72%
  );
  animation:
    uxp-glow-morph 11s ease-in-out infinite,
    uxp-glow-float 17s ease-in-out infinite;
}
@keyframes uxp-glow-morph {
  0%, 100% { --g-h1: 52deg; --g-h2: 20deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
  30%      { --g-h1: 88deg; --g-h2: 42deg; --g-w: 66%; --g-h: 42%; --g-x: 60%; --g-y: 40%; }
  62%      { --g-h1: 26deg; --g-h2: -6deg; --g-w: 42%; --g-h: 64%; --g-x: 40%; --g-y: 60%; }
}
@keyframes uxp-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: hue-rotate(0deg)  saturate(1); }
  50%      { transform: scale(1.22) translate3d(-8%, 6%, 0); filter: hue-rotate(14deg) saturate(1.1); }
}

/* Bottom-left blob: orange on its own, home's lime formula and delta shape. */
.uxp-hero__glow--pink {
  top: auto; right: auto;
  bottom: -20%; left: -22%; width: 60vw; height: 60vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 52deg) / 0.4),
    transparent 66%
  );
  animation:
    uxp-glow-morph-pink 14s ease-in-out -5s infinite,
    uxp-glow-float-pink 21s ease-in-out -9s infinite;
}
@keyframes uxp-glow-morph-pink {
  0%, 100% { --g-h1: 52deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  40%      { --g-h1: 84deg; --g-w: 68%; --g-h: 56%; --g-x: 60%; --g-y: 42%; }
  72%      { --g-h1: 30deg; --g-w: 42%; --g-h: 66%; --g-x: 40%; --g-y: 58%; }
}
@keyframes uxp-glow-float-pink {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0);    filter: hue-rotate(0deg)   saturate(1); }
  50%      { transform: scale(0.84) translate3d(9%, -7%, 0); filter: hue-rotate(-12deg) saturate(1.12); }
}

/* Top-centre blob: red on its own, home's violet slot (position + timing)
   carrying a single-hue fade instead of a blend. */
.uxp-hero__glow--blend {
  top: -26%; right: auto; bottom: auto;
  left: 52%; width: 44vw; height: 44vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.1 var(--g-h1, 20deg) / 0.28),
    transparent 64%
  );
  animation:
    uxp-glow-morph-blend 18s ease-in-out -7s infinite,
    uxp-glow-float-blend 26s ease-in-out -13s infinite;
}
@keyframes uxp-glow-morph-blend {
  0%, 100% { --g-h1: 20deg; --g-w: 48%; --g-h: 48%; --g-x: 50%; --g-y: 50%; }
  38%      { --g-h1: -4deg; --g-w: 70%; --g-h: 42%; --g-x: 40%; --g-y: 58%; }
  70%      { --g-h1: 40deg; --g-w: 42%; --g-h: 60%; --g-x: 60%; --g-y: 44%; }
}
@keyframes uxp-glow-float-blend {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);     filter: hue-rotate(0deg)   saturate(1);   opacity: 1; }
  45%      { transform: scale(1.28) translate3d(-9%, 5%, 0);   filter: hue-rotate(-10deg) saturate(1.1); opacity: 0.7; }
}

/* Mandatory corner-seam accent centered exactly on the point where the hero
   ends and the next section begins (bottom-left), a quiet echo of the
   orange wash. */
.uxp-hero__glow--corner {
  top: auto; right: auto;
  bottom: -37vw; left: -37vw; width: 74vw; height: 74vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.12 var(--g-h1, 52deg) / 0.15),
    transparent 60%
  );
  animation:
    uxp-glow-morph-corner 8s ease-in-out -4s infinite,
    uxp-glow-float-corner 11s ease-in-out -8s infinite;
}
@keyframes uxp-glow-morph-corner {
  0%, 100% { --g-h1: 52deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 74deg; --g-w: 55%; --g-h: 37%; --g-x: 40%; --g-y: 60%; }
}
@keyframes uxp-glow-float-corner {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.15) translate3d(9%, -6%, 0); filter: saturate(1.05); }
}

/* Mandatory mobile override: desktop's percentage-based blob positions
   clip away on a narrow screen. */
@media (max-width: 900px) {
  .uxp-hero {
    background:
      radial-gradient(120% 70% at 85% 0%, oklch(0.9 0.12 52 / 0.28), transparent 62%),
      radial-gradient(90% 55% at 10% 35%, oklch(0.9 0.1 20 / 0.19), transparent 58%),
      radial-gradient(80% 50% at 70% 18%, oklch(0.9 0.12 52 / 0.08), transparent 55%),
      var(--color-paper);
  }
  .uxp-hero__glow {
    top: -8%; right: -28%; width: 100vh; height: 100vh; opacity: 1;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.12 var(--g-h1, 52deg) / 0.45),
      oklch(0.9 0.1 var(--g-h2, 20deg) / 0.22) 42%,
      transparent 70%
    );
  }
  .uxp-hero__glow--pink {
    bottom: 18%; left: -35%; width: 85vh; height: 85vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.12 var(--g-h1, 52deg) / 0.28),
      transparent 68%
    );
  }
  .uxp-hero__glow--blend {
    top: 4%; left: 42%; width: 65vh; height: 65vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.1 var(--g-h1, 20deg) / 0.16),
      transparent 66%
    );
  }
}
/* z-index 0, not 2: the bloom inside .uxp-visual is painted as part of this
   stacking context, so keeping the grid at the same level as the glow lets the
   sections below (z-index 1) pass over both. Inside the hero nothing changes,
   the grid still paints after the glow because it comes later in the markup. */
/* Hero card (hero-panel skill): the whole hero sits on one dark inset panel,
   capped at the content width. The pastel page glows above stay on the
   section and read around it; inside, an orange -> red wash behind the copy. */
.uxp-hero__panel {
  position: relative; z-index: 1; overflow: hidden;
  max-width: var(--uxp-max); margin-inline: auto;
  background: var(--color-ink); color: var(--color-on-dark);
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.uxp-hero__wash {
  position: absolute; z-index: 0; pointer-events: none;
  /* Fade the box itself to transparent before its edge: the morph moves the
     gradient centre off-centre, and a clipped edge would show as a hard arc. */
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  top: -40%; left: -20%; width: 70vw; height: 70vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.72 0.17 var(--g-h1, 52deg) / 0.28),
    oklch(0.8 0.16 var(--g-h2, 20deg) / 0.12) 46%,
    transparent 70%
  );
  animation:
    uxp-wash-morph 9s ease-in-out -3s infinite,
    uxp-wash-float 13s ease-in-out -7s infinite;
}
@keyframes uxp-wash-morph {
  0%, 100% { --g-h1: 52deg; --g-h2: 20deg; --g-w: 46%; --g-h: 56%; --g-x: 50%; --g-y: 46%; }
  50%      { --g-h1: 20deg; --g-h2: 52deg; --g-w: 56%; --g-h: 42%; --g-x: 66%; --g-y: 62%; }
}
@keyframes uxp-wash-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.18) translate3d(-8%, 8%, 0); filter: saturate(1.1); }
}
/* Copy takes the wider column; both columns centre on one midline. */
.uxp-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  /* Wide gutter: the pins and notes overhang the mockup's left edge, so the
     visible gap to the copy is this minus that overhang. */
  gap: clamp(3rem, 7vw, 6.5rem); align-items: center;
}
/* Eyebrow plus a "Human expertise" badge beside it. The eyebrow stays plain
   text; the badge is outlined, text only, in the same eyebrow type. */
.uxp-hero__top {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.uxp-hero__top .uxp-eyebrow { margin: 0; }
.uxp-hero__badge {
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-on-dark);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.uxp-hero__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2.25rem, 4.4vw, 3.6rem); line-height: 0.97; letter-spacing: -0.03em;
  color: var(--color-on-dark);
  margin: var(--space-4) 0 0;
}
.uxp-hero__title em { font-style: normal; }
.uxp-hero__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--color-on-dark-muted); max-width: 540px; margin: var(--space-4) 0 0; }
.uxp-hero__lead strong { color: var(--color-on-dark); }
.uxp-hero__cta { margin-top: var(--space-6); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.uxp-hero__meta {
  margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-title); font-size: 0.75rem; color: var(--color-ink-45);
}
.uxp-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 6px 12px; border: 1px solid var(--border-ink); border-radius: var(--radius-pill);
  background: var(--glass-soft);
}
/* ---------- App-window mockup (hero visual) ----------
   Dark wireframe desktop app in the logo's warm trio (orange / red /
   magenta), with concentric rings + a round warm bloom behind it —
   same drawing language as the Lovable → App Store hero. */
/* Wireframe (hero-panel skill): on the dark card every surface is a 1px line,
   no grey fills; colour only marks the flagged parts. */
.uxp-visual {
  position: relative;
  --uxp-line: rgba(255, 255, 255, 0.18);
  --uxp-line-soft: rgba(255, 255, 255, 0.16);
  --uxp-wire: 1px solid rgba(255, 255, 255, 0.16);
  /* centre of the ring set */
  --uxp-ring-cx: 74%;
  --uxp-ring-cy: 30%;
  /* motion inputs, written by initUxpVisual() in js/main.js */
  --uxp-p: 0;   /* scroll progress through the hero, -1 … 1 */
}

/* Every drifting layer eases back to rest when the pointer leaves */
.uxp-mock,
.uxp-visual__arcs,
.uxp-sticky,
.uxp-pin {
  transition: transform 0.5s var(--ease), rotate 0.5s var(--ease),
              scale 0.35s var(--ease), translate 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
  will-change: transform;
}

/* Concentric rings behind the window.
   Scroll parallax owns transform, so the breathing lives on the independent
   scale property: the rings ease outward and back instead of holding still. */
.uxp-visual__arcs {
  position: absolute; z-index: 0; pointer-events: none;
  left: var(--uxp-ring-cx); top: var(--uxp-ring-cy);
  width: 190%; aspect-ratio: 1;
  translate: -50% -50%;
  transform: translateY(calc(var(--uxp-p) * 46px));
  animation: uxp-in-fade 1.4s var(--ease-out) 0.15s backwards,
             uxp-arcs-expand 19s ease-in-out infinite alternate;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 71px,
    color-mix(in srgb, var(--uxp-mag) 26%, transparent) 71px 72px
  );
  /* radial falloff × a fade at each end, so the rings dissolve before they reach
     the top of the page or the copy in the section below */
  -webkit-mask-image:
    radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0,0,0,0.78) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 18%, #000 32% 58%, transparent 70%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle closest-side at 50% 50%, #000 0%, rgba(0,0,0,0.78) 50%, transparent 100%),
    linear-gradient(to bottom, transparent 18%, #000 32% 58%, transparent 70%);
  mask-composite: intersect;
}
/* Kept small on purpose: past ~5% the rings read as a pulse rather than a
   drift, and the outermost ones start pushing past their own mask. */
@keyframes uxp-arcs-expand {
  from { scale: 1; }
  to   { scale: 1.04; }
}

.uxp-mock {
  position: relative; z-index: 2;
  background: var(--color-ink);
  border: 1px solid var(--uxp-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: translateY(calc(var(--uxp-p) * -16px));
  animation: uxp-in-rise 0.9s var(--ease-out) 0.3s backwards;
}
.uxp-mock:hover { scale: 1.02; }
.uxp-mock__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--uxp-line-soft);
}
.uxp-mock__dot { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: var(--uxp-wire); }
.uxp-mock__dot:first-child { border-color: var(--uxp-orange); }
.uxp-mock__url {
  margin-left: auto; flex: 0 0 46%; height: 18px; border-radius: var(--radius-pill);
  border: var(--uxp-wire);
}
/* Taller screen: reads as an app window, not a strip. */
.uxp-mock__body { display: grid; grid-template-columns: 74px 1fr; min-height: clamp(180px, 22vw, 300px); }
.uxp-mock__side { border-right: 1px solid var(--uxp-line-soft); padding: 14px 12px; display: grid; gap: 9px; align-content: start; }
.uxp-mock__navline { height: 9px; border-radius: 5px; box-sizing: border-box; border: var(--uxp-wire); }
.uxp-mock__navline:nth-child(2) { width: 86%; }
.uxp-mock__navline:nth-child(3) { width: 94%; }
.uxp-mock__navline:nth-child(4) { width: 74%; }
.uxp-mock__navline:nth-child(5) { width: 90%; }
.uxp-mock__navline--on {
  height: 14px; display: flex; align-items: center; padding-left: 6px;
  border-color: var(--uxp-mag);
  border-radius: var(--radius-pill);
}
.uxp-mock__navline--on b { width: 5px; height: 5px; border-radius: 50%; background: var(--uxp-mag); }

.uxp-mock__main {
  padding: 14px 16px; display: grid; gap: 10px;
  grid-template-rows: auto auto 1fr auto;
}
.uxp-mock__topbar { display: flex; align-items: center; gap: 10px; }
.uxp-mock__head { height: 9px; width: 38%; border-radius: 5px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.3); }
.uxp-mock__account {
  margin-left: auto; width: 44px; height: 16px; border-radius: var(--radius-pill);
  border: var(--uxp-wire);
}
.uxp-mock__foot { display: flex; justify-content: flex-end; }
.uxp-mock__cta {
  width: 86px; height: 22px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--uxp-mag) 70%, transparent);
}
.uxp-mock__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uxp-mock__tile {
  border: 1px solid var(--uxp-line-soft); border-radius: 10px;
  padding: 12px 10px; display: grid; gap: 8px; justify-items: start;
}
.uxp-mock__tile i { height: 8px; width: 72%; border-radius: 4px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.3); }
.uxp-mock__tile b { height: 10px; width: 44%; border-radius: 5px; box-sizing: border-box; border: var(--uxp-wire); }
.uxp-mock__tile--flag b { border-color: var(--uxp-orange); }

.uxp-mock__rows { display: grid; grid-template-columns: 1.75fr 1fr; gap: 10px; min-height: 0; }
.uxp-mock__chart {
  position: relative; overflow: hidden; min-height: 70px;
  border: 1px solid var(--uxp-line-soft); border-radius: 10px;
}
/* An absolutely positioned <svg> does not stretch to its insets like a div,
   so its box is sized explicitly; the end dot below relies on these numbers. */
.uxp-mock__chart svg { position: absolute; top: 22%; left: 9%; width: 82%; height: 54%; display: block; color: var(--uxp-red); }
.uxp-mock__chart span {
  /* The line ends at y=34/40 of an SVG inset 22%/24%: 24% + 54% * 6/40. */
  position: absolute; right: 9%; bottom: 32.1%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--uxp-red);
  transform: translate(50%, 50%);
}
.uxp-mock__list {
  border: 1px solid var(--uxp-line-soft); border-radius: 10px;
  padding: 12px 11px; display: grid; gap: 9px; align-content: start;
}
.uxp-mock__row { height: 8px; border-radius: 4px; box-sizing: border-box; border: var(--uxp-wire); }
.uxp-mock__row:first-child { width: 78%; border-color: rgba(255, 255, 255, 0.3); }
.uxp-mock__row:nth-child(2) { width: 92%; }
.uxp-mock__row:nth-child(3) { width: 64%; }
.uxp-mock__row:nth-child(4) { width: 84%; }

/* Annotation pins over the mockup */
.uxp-pin { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; }
.uxp-pin__label {
  font-family: var(--font-mono); font-size: var(--fs-label-xs); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--radius-pill); white-space: nowrap;
  /* Dark chip on the dark card: tinted ink, light text, a line in the pin's tone. */
  background: color-mix(in srgb, currentColor 14%, var(--color-ink));
  color: var(--color-on-dark);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  box-shadow: 0 18px 38px -20px rgba(0,0,0,0.9);
}
.uxp-pin__dot {
  width: 9px; height: 9px; border-radius: 50%; background: currentColor;
}
.uxp-pin {
  transform: translateY(calc(var(--uxp-p) * var(--uxp-pin-dy, -26px)));
  animation: uxp-in-pop 0.55s var(--ease-out) var(--uxp-in, 1.6s) backwards;
}
.uxp-pin:hover { translate: 0 -3px; scale: 1.06; z-index: 6; }
.uxp-pin--a { top: 24%; right: -5%; color: var(--uxp-orange); --uxp-pin-dy: -30px; --uxp-in: 1.55s; }
.uxp-pin--b { top: 50%; left: -8%; color: var(--uxp-red); --uxp-pin-dy: -20px; --uxp-in: 1.75s; }
.uxp-pin--c { bottom: 5%; right: calc(86px + 28px); color: var(--uxp-mag); --uxp-pin-dy: -34px; --uxp-in: 1.95s; }
.uxp-pin--b .uxp-pin__label { order: 2; }

/* FigJam-style sticky notes: what we'd change */
.uxp-sticky {
  position: absolute; z-index: 3;
  width: 112px; min-height: 92px;
  padding: 11px 12px;
  border-radius: 4px;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.625rem; line-height: 1.35; letter-spacing: -0.005em;
  /* Dark note on the dark card: ink tinted with the note's accent, light text. */
  color: var(--color-on-dark);
  background: color-mix(in srgb, var(--uxp-sticky, var(--uxp-orange)) 22%, var(--color-ink));
  border: 1px solid color-mix(in srgb, var(--uxp-sticky, var(--uxp-orange)) 50%, transparent);
  box-shadow: 0 14px 28px -14px rgba(0,0,0,0.7), 0 2px 4px -2px rgba(0,0,0,0.4);
}
.uxp-sticky {
  rotate: var(--uxp-tilt, 0deg);
  transform: translateY(calc(var(--uxp-p) * var(--uxp-dy, 24px)));
  /* dropped onto the board one at a time, after the window has landed */
  animation: uxp-in-stick 0.6s var(--ease-out) var(--uxp-in, 0.9s) backwards;
}
/* only the hovered note moves: a small lift, zoom and straighten */
.uxp-sticky:hover {
  translate: 0 -4px;
  scale: 1.06;
  rotate: calc(var(--uxp-tilt, 0deg) * 0.6);
  z-index: 6;
  box-shadow: 0 26px 46px -16px rgba(0,0,0,0.75), 0 4px 8px -2px rgba(0,0,0,0.45);
}
.uxp-sticky--a { --uxp-sticky: var(--uxp-orange); --uxp-tilt: -5deg;   top: -9%;     left: -6%; --uxp-dy: -34px; --uxp-in: 0.85s; }
.uxp-sticky--b { --uxp-sticky: var(--uxp-red);    --uxp-tilt: 3.5deg;  bottom: -14%; left: 6%;  --uxp-dy: 30px; --uxp-in: 1.25s; }
/* Top-right, over the window's title bar, so the bottom edge stays clear for
   the "Unclear CTA" pin and the CTA it points at. */
.uxp-sticky--c { --uxp-sticky: var(--uxp-mag);    --uxp-tilt: 3deg;    top: -14%; right: 10%; --uxp-dy: 40px; --uxp-in: 1.05s; }

/* Load sequence: rings, window, chart line, notes, then pins.
   Every entrance uses fill-mode backwards, so once it ends the element's own
   transform / rotate / scale (scroll, pointer, hover) are back in charge.
   The keyframes animate the independent translate/scale/rotate properties
   and leave transform alone for the same reason. */
/* the drop-off line draws left to right */
.uxp-mock__chart svg { animation: uxp-in-draw 0.9s var(--ease-out) 0.75s backwards; }
.uxp-mock__chart span { animation: uxp-in-fade 0.3s var(--ease-out) 1.55s backwards; }
@keyframes uxp-in-fade { from { opacity: 0; } }
@keyframes uxp-in-rise { from { opacity: 0; translate: 0 22px; scale: 0.97; } }
@keyframes uxp-in-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes uxp-in-stick {
  0%   { opacity: 0; translate: 0 -18px; scale: 1.18; rotate: calc(var(--uxp-tilt, 0deg) * -1.6); }
  70%  { opacity: 1; translate: 0 2px;  scale: 0.98; }
  100% { translate: 0 0; scale: 1; rotate: var(--uxp-tilt, 0deg); }
}
@keyframes uxp-in-pop {
  0%   { opacity: 0; scale: 0.7; }
  70%  { opacity: 1; scale: 1.05; }
  100% { scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .uxp-hero__wash { animation: none; }
  .uxp-mock, .uxp-visual__arcs, .uxp-sticky, .uxp-pin,
  .uxp-mock__chart svg, .uxp-mock__chart span {
    transition: none; transform: none; animation: none; scale: none;
  }
  .uxp-mock__chart span { transform: translate(50%, 50%); }
}

/* ---------- 80/20 gap meter ---------- */
.uxp-gap {
  position: relative; overflow: hidden;
  background: var(--color-ink); color: var(--color-on-dark);
  border-radius: var(--radius-xl); padding: var(--space-7) var(--space-6);
}
/* Same warm wash as the hero, so the block reads as part of the page instead of
   a cold panel dropped into it. */
/* Registered so both blobs' hue, centre and size can morph, matching the
   Background glow gradient rule — was a static two-gradient background.
   Each blob fully swaps color with its own opposite stop (orange <-> magenta)
   rather than nudging shade, so the crossfade reads as one color becoming
   another instead of a static wash trembling in place. */
@property --gap-h1  { syntax: "<angle>";      inherits: false; initial-value: 30deg; }
@property --gap-h2  { syntax: "<angle>";      inherits: false; initial-value: 355deg; }
@property --gap-h3  { syntax: "<angle>";      inherits: false; initial-value: 320deg; }
@property --gap-x1  { syntax: "<percentage>"; inherits: false; initial-value: 82%; }
@property --gap-y1  { syntax: "<percentage>"; inherits: false; initial-value: 6%; }
@property --gap-x2  { syntax: "<percentage>"; inherits: false; initial-value: 12%; }
@property --gap-y2  { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --gap-w1  { syntax: "<percentage>"; inherits: false; initial-value: 45%; }
@property --gap-sz1 { syntax: "<percentage>"; inherits: false; initial-value: 90%; }
@property --gap-w2  { syntax: "<percentage>"; inherits: false; initial-value: 55%; }
@property --gap-sz2 { syntax: "<percentage>"; inherits: false; initial-value: 80%; }

.uxp-gap__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(var(--gap-w1, 45%) var(--gap-sz1, 90%) at var(--gap-x1, 82%) var(--gap-y1, 6%),
      oklch(0.78 0.15 var(--gap-h1, 30deg) / 0.3),
      oklch(0.68 0.19 var(--gap-h2, 355deg) / 0.18) 44%, transparent 70%),
    radial-gradient(var(--gap-w2, 55%) var(--gap-sz2, 80%) at var(--gap-x2, 12%) var(--gap-y2, 100%),
      oklch(0.68 0.17 var(--gap-h3, 320deg) / 0.16), transparent 64%);
  /* 34s round trip — slow enough that no single moment reads as "jumping" */
  animation: uxp-gap-morph 7s ease-in-out infinite;
}
@keyframes uxp-gap-morph {
  0%, 100% {
    --gap-h1: 30deg;  --gap-h2: 355deg; --gap-h3: 320deg;
    --gap-x1: 82%;    --gap-y1: 6%;     --gap-w1: 45%;    --gap-sz1: 90%;
    --gap-x2: 12%;    --gap-y2: 100%;   --gap-w2: 55%;    --gap-sz2: 80%;
  }
  50% {
    /* blob 1 (orange/red) swaps toward magenta, blob 2 (magenta) swaps
       toward orange — the two trade colors instead of drifting within one */
    --gap-h1: 340deg; --gap-h2: 300deg; --gap-h3: 40deg;
    /* centres each travel ~40-44 points, opposite diagonals, never over 50% */
    --gap-x1: 38%;    --gap-y1: 46%;    --gap-w1: 54%;    --gap-sz1: 72%;
    --gap-x2: 54%;    --gap-y2: 58%;    --gap-w2: 44%;    --gap-sz2: 96%;
  }
}
.uxp-gap__in { position: relative; max-width: 900px; margin-inline: auto; text-align: center; }
.uxp-gap__title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.03; color: var(--color-on-dark); margin: var(--space-2) 0 0; }
.uxp-gap__title em { font-style: normal; }
.uxp-gap__bar { display: flex; gap: 6px; margin-top: var(--space-6); height: 64px; }
.uxp-gap__seg { border-radius: 14px; display: flex; flex-direction: column; justify-content: center; padding: 0 18px; font-family: var(--font-title); }
.uxp-gap__seg--ai { flex: 80; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); color: var(--color-on-dark-muted); }
.uxp-gap__seg--human { flex: 20; background: linear-gradient(120deg, var(--uxp-orange), var(--uxp-mag)); color: var(--color-on-dark); }
.uxp-gap__pct { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.uxp-gap__cap { font-size: 0.875rem; letter-spacing: 0.04em; opacity: 0.85; }
.uxp-gap__seg--human .uxp-gap__cap { opacity: 1; font-weight: 600; }
.uxp-gap__note { margin-top: var(--space-4); margin-inline: auto; font-size: var(--fs-md); color: var(--color-on-dark-muted); max-width: 640px; }
.uxp-gap__note em { font-style: normal; font-weight: 600; color: var(--color-on-dark); }

/* ---------- Problem grid ----------
   Holds two groups in one grid: what AI misses, then what a person adds.
   The second group carries the dark icon tile so the two read apart. */
.uxp-probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.uxp-probs--human { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uxp-prob { background: var(--color-surface-light); border: 1px solid transparent; border-radius: var(--radius-lg); padding: var(--space-5); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.uxp-prob:hover { transform: translateY(-3px); border-color: var(--border-ink); }
.uxp-prob__icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-paper); border: 1px solid var(--border-ink); color: var(--uxp-red); margin-bottom: var(--space-4); }
.uxp-prob__icon svg { width: 20px; height: 20px; }
.uxp-prob__title { font-family: var(--font-title); font-size: var(--fs-card-title); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.uxp-prob__body { font-size: 0.9375rem; color: var(--color-ink-60); line-height: 1.55; margin: 0; }
.uxp-prob--human .uxp-prob__icon { background: var(--color-ink); border-color: var(--color-ink); color: var(--uxp-orange); }
.uxp-probs__label {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--font-title); font-size: var(--fs-eyebrow); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-70);
}
.uxp-probs__label:not(:first-child) { margin-top: var(--space-5); }

/* ---------- Services ----------
   Four cards on one horizontal track, 2.5 of them in view at 1280px so the
   cut-off third card shows there is more to scroll to.

   A horizontal scroll container clips its vertical overflow, and it clips at
   the left and right edges too, so the hover lift and its shadow only survive
   if the scrollport is wider and taller than the content column. The viewport
   bleeds into the page gutters and the track pads that room back, which keeps
   the card edges lined up with the heading above. Padding on the track, not on
   the viewport: the slider JS scrolls the viewport by pixel offset, and inline
   padding on the scroll container itself would shift that. */
.uxp-svcs {
  margin-top: calc(var(--space-6) - 20px);
  --svc-gap: 20px;
  /* 2.5 cards in view. Percentages here resolve against the track's content
     box, which runs from the first card's left edge to the right edge of the
     screen, so this is 2.5 cards of screen width. Two whole gaps sit between
     them, so those come off before dividing. */
  --svc-card: calc((100% - var(--svc-gap) * 2) / 2.5);
  /* How far the first card sits from the true window edge. Normally that's
     just the gutter, but past the site's 1600px container cap .uxp-wrap
     picks up extra auto-centering margin, so this grows to match it —
     otherwise the peeking card gets clipped short of the real edge,
     leaving empty page background instead of the intended crop. */
  --svc-inset: max(var(--gutter), calc((100vw - var(--container-inner)) / 2));
}
.uxp-svcs__viewport {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  /* proximity, not mandatory: the last card cannot align to the start edge of a
     2.5-up track, and mandatory snapping would pull the scroll back off it. */
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--svc-inset);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.uxp-svcs__viewport::-webkit-scrollbar { display: none; }
.uxp-svcs__viewport:focus-visible { outline: 2px solid var(--color-active); outline-offset: 4px; }
.uxp-svcs__track {
  display: flex;
  align-items: stretch;
  gap: var(--svc-gap);
  margin: 0;
  padding: 20px 0 44px var(--svc-inset);
}
/* End padding on a flex track is left out of scrollWidth, so the last card
   would still end flush against the right edge of the scrollport. A flex item
   always counts, so the trailing room is a spacer instead. It has to keep a
   hairline of width: at the sizes where the gap equals the inset the spacer
   works out to zero, and a zero-width box drops out of the overflow again,
   taking the gap in front of it with it. */
.uxp-svcs__track::after {
  content: "";
  flex: 0 0 max(1px, calc(var(--svc-inset) - var(--svc-gap)));
}
.uxp-svc {
  --card-accent: var(--uxp-orange);
  --art-x: 100%; --art-y: 100%;
  flex: 0 0 var(--svc-card);
  min-width: 0;
  min-height: 520px;
  scroll-snap-align: start;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--color-ink); color: var(--color-on-dark);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl); padding: var(--space-6);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.uxp-svc::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 58% at var(--art-x) var(--art-y),
      color-mix(in srgb, var(--card-accent) 30%, transparent), transparent 60%),
    repeating-radial-gradient(circle at var(--art-x) var(--art-y),
      transparent 0 27px,
      color-mix(in srgb, var(--card-accent) 13%, transparent) 27px 28.5px);
  -webkit-mask: radial-gradient(78% 78% at var(--art-x) var(--art-y), #000 28%, transparent 80%);
  mask: radial-gradient(78% 78% at var(--art-x) var(--art-y), #000 28%, transparent 80%);
  transition: transform 0.3s var(--ease);
}
/* Flex items honour z-index once positioned, so the copy stays above the art */
.uxp-svc > * { position: relative; z-index: 1; }
.uxp-svc:hover::before { transform: scale(1.06); }
.uxp-svc:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,0.55);
  border-color: color-mix(in srgb, var(--card-accent) 42%, transparent);
}
/* Four cards read across the warm trio plus the logo gold, so the rings behind
   each one differ without any card turning cold. */
.uxp-svc--audit  { --card-accent: var(--uxp-orange); }
.uxp-svc--design { --card-accent: var(--uxp-mag); }
.uxp-svc--advise { --card-accent: var(--uxp-red); }
.uxp-svc--fix    { --card-accent: var(--color-secondary-gold); }
.uxp-svc__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.uxp-svc__tag { font-family: var(--font-title); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-on-dark-muted); padding: 5px 11px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-pill); }
.uxp-svc__title { font-family: var(--font-title); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 8px; color: var(--color-on-dark); }
.uxp-svc__lead { font-size: var(--fs-md); font-weight: 600; color: var(--color-on-dark); line-height: 1.45; margin: 0 0 10px; }
.uxp-svc__desc { font-size: 0.9375rem; color: var(--color-on-dark-muted); line-height: 1.55; margin: 0 0 var(--space-4); }
.uxp-svc__meta { margin: auto 0 0; padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.12); display: grid; gap: var(--space-3); }
.uxp-svc__row { display: grid; gap: 3px; margin: 0; }
.uxp-svc__label { font-family: var(--font-title); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--card-accent); margin: 0; }
.uxp-svc__val { font-size: 0.9375rem; color: var(--color-on-dark-muted); line-height: 1.5; margin: 0; }
.uxp-svcs__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: var(--space-2);
}
.uxp-svcs__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--color-paper);
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.uxp-svcs__nav:hover { opacity: 0.76; transform: translateY(-2px); }
.uxp-svcs__nav:focus-visible { outline: 2px solid var(--color-active); outline-offset: 3px; }
.uxp-svcs__nav svg { width: 19px; height: 19px; }
.uxp-svcs__dots { display: flex; align-items: center; gap: 8px; }
.uxp-svcs__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-ink) 28%, transparent);
  cursor: pointer;
  transition: width 0.2s var(--ease), background 0.2s var(--ease);
}
.uxp-svcs__dot.is-active { width: 26px; background: var(--color-ink); }
.uxp-svcs__dot:focus-visible { outline: 2px solid var(--color-active); outline-offset: 3px; }

/* ---------- Stepper (card layout) ---------- */
.uxp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.uxp-step { position: relative; background: var(--color-paper); border: 1px solid var(--border-ink); border-radius: var(--radius-lg); padding: var(--space-5); }
.uxp-step__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--color-ink); color: var(--uxp-orange); margin-bottom: var(--space-4); }
.uxp-step__icon svg { width: 20px; height: 20px; }
.uxp-step__title { font-family: var(--font-title); font-size: var(--fs-step); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.uxp-step__body { font-size: 0.9375rem; color: var(--color-ink-60); line-height: 1.55; margin: 0; }

/* ---------- Work carousel ----------
   Native scroll-snap track, one project per view. js/main.js adds the
   arrows, the dots and the autoplay through initSnapSlider('works'). */
.uxp-works {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "prev view next"
    "dots dots dots";
  align-items: center;
  column-gap: clamp(var(--space-3), 2.4vw, var(--space-4));
  row-gap: var(--space-4);
  margin-top: var(--space-6);
}
.uxp-works__viewport {
  grid-area: view;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.uxp-works__viewport::-webkit-scrollbar { display: none; }
.uxp-works__viewport:focus-visible { outline: 2px solid var(--color-active); outline-offset: 4px; }
/* A horizontal scroll container always clips its vertical overflow, so the
   drop shadow under each mockup only survives if the track reserves room for
   it inside the scrollport. Padding here, not on the viewport: the slider JS
   scrolls to slides[i].offsetLeft, which inline padding on the container
   would throw off. */
.uxp-works__track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 6px 0 clamp(34px, 4vw, 56px);
  list-style: none;
}
.uxp-works__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }

.uxp-works__nav {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0;
  color: var(--color-ink); background: var(--color-paper);
  border: 1.5px solid var(--border-ink-strong); border-radius: 50%;
  cursor: pointer;
  transition: transform 0.18s var(--ease), color 0.18s var(--ease),
              background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.uxp-works__nav--prev { grid-area: prev; }
.uxp-works__nav--next { grid-area: next; }
.uxp-works__nav svg { width: 20px; height: 20px; }
.uxp-works__nav:hover { transform: translateY(-2px); color: var(--color-paper); background: var(--color-ink); border-color: var(--color-ink); }
.uxp-works__nav:focus-visible { outline: 2px solid var(--color-active); outline-offset: 3px; }

.uxp-works__dots { grid-area: dots; justify-self: center; display: flex; align-items: center; gap: 8px; }
.uxp-works__dot {
  width: 8px; height: 8px; padding: 0; border: none;
  border-radius: var(--radius-pill); background: var(--color-ink-25); cursor: pointer;
  transition: width 0.22s var(--ease), background 0.22s var(--ease);
}
.uxp-works__dot.is-active { width: 26px; background: var(--color-ink); }
.uxp-works__dot:focus-visible { outline: 2px solid var(--color-active); outline-offset: 3px; }

.uxp-work {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: 0;
}
.uxp-work__browser,
.uxp-work__phone,
.uxp-work__tablet {
  box-shadow: 0 26px 46px -22px rgba(10, 10, 8, 0.55);
}
.uxp-work__browser {
  width: 95%;
  overflow: hidden;
  background: #fff;
  border-radius: clamp(12px, 1.5vw, 20px);
}
.uxp-work__browser-bar {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.55vw, 6px);
  height: clamp(22px, 2.2vw, 28px);
  padding-inline: clamp(9px, 1vw, 13px);
  background: var(--color-ink);
}
.uxp-work__browser-bar span {
  width: clamp(6px, 0.65vw, 8px);
  height: clamp(6px, 0.65vw, 8px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.uxp-work__browser > img {
  display: block;
  width: 100%;
  height: auto;
}
.uxp-work--mobile-set {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  padding: clamp(14px, 2vw, 26px) clamp(20px, 3.6vw, 54px);
}
.uxp-work__phone {
  min-width: 0;
  padding: clamp(4px, 0.65vw, 7px);
  overflow: hidden;
  background: #0a0a08;
  border-radius: clamp(14px, 2vw, 26px);
}
.uxp-work__phone > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(10px, 1.5vw, 20px);
}
/* Two tablets on one slide. The screens are 1440x1165, so a pair fits inside
   the 16/10 slide with room to spare and the columns stay even. The 2.5% side
   padding puts the pair at the same 95% of the slide as the browser mockups on
   the other slides. */
.uxp-work--tablet-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  padding: clamp(14px, 2vw, 26px) 2.5%;
}
.uxp-work__tablet {
  min-width: 0;
  padding: clamp(6px, 0.9vw, 11px);
  overflow: hidden;
  background: #0a0a08;
  border-radius: clamp(12px, 1.7vw, 22px);
}
.uxp-work__tablet > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(7px, 1.1vw, 14px);
}
/* ---------- About ---------- */
.uxp-about {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-6); align-items: center;
  margin-top: var(--space-6); border-radius: var(--radius-xl); padding: var(--space-6);
  background:
    radial-gradient(58% 130% at 100% 100%, color-mix(in srgb, var(--uxp-orange) 26%, transparent), transparent 70%),
    radial-gradient(42% 100% at 88% 100%, color-mix(in srgb, var(--uxp-mag) 18%, transparent), transparent 72%),
    var(--color-ink);
}
.uxp-about__avatar { width: 160px; height: 160px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; }
.uxp-about__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uxp-about__body p { font-size: var(--fs-md); color: var(--color-on-dark-muted); line-height: 1.6; margin: 0; }
.uxp-about__body p strong { color: var(--color-on-dark); }
.uxp-about__body p + p { margin-top: var(--space-3); }
.uxp-about__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); }
.uxp-stat { font-family: var(--font-title); font-size: 0.75rem; color: var(--color-on-dark); padding: 7px 13px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-pill); background: var(--color-ink-elevated); }

/* ---------- FAQ accordion ---------- */
.uxp-faq { max-width: 820px; margin: var(--space-6) auto 0; border-top: 1px solid var(--border-ink); }
.uxp-faq__item { border-bottom: 1px solid var(--border-ink); }
.uxp-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; font-family: var(--font-title); font-size: var(--fs-faq); font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink); }
.uxp-faq__q::-webkit-details-marker { display: none; }
.uxp-faq__icon { color: var(--uxp-red); }
.uxp-faq__a { font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.65; margin: 0; padding: 0 0 var(--space-5); max-width: 700px; }
/* The open question is body-size text on paper, so the red is dropped toward ink
   until it clears 4.5:1. The raw --uxp-red only reaches 3.5:1. */
.uxp-faq__item[open] .uxp-faq__q { color: color-mix(in srgb, var(--uxp-red) 82%, var(--color-ink)); }

/* ---------- Closing CTA ---------- */
/* the shared band ships with the site's green glow; this page runs the warm trio.
   nc-hue's 26deg swing would carry the orange into yellow-green, so it is dropped
   here like on the other glows on this page. */
.uxp .cta__glow {
  background:
    radial-gradient(42% 90% at 42% 45%, color-mix(in srgb, var(--uxp-orange) 34%, transparent), transparent 68%),
    radial-gradient(38% 85% at 66% 52%, color-mix(in srgb, var(--uxp-mag) 26%, transparent), transparent 70%);
  animation: none;
}

/* ---------- Responsive ---------- */
/* Tablet and phone both get the same slider: one card, plus the front edge of
   the next one cropped by the right side of the screen so the track still
   reads as scrollable. --svc-sliver is how much of that next card shows;
   subtracting it and the gap from the full width is what leaves room for it. */
@media (max-width: 1080px) {
  .uxp-svcs {
    --svc-gap: 16px;
    --svc-sliver: clamp(2.5rem, 9vw, 5.25rem);
    --svc-card: calc(100% - var(--svc-sliver) - var(--svc-gap));
  }
  /* One card no longer has neighbours to match height with, so the floor that
     kept a row of them even goes away and the card sizes to its own copy. */
  .uxp-svc { min-height: 0; }
}
@media (max-width: 980px) {
  .uxp-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  /* The hero copy and visual stack in one column here, so the sticky notes'
     negative top offset (poking above the mockup) now eats into the gap
     above it instead of floating beside the copy column like on desktop.
     Extra margin keeps the notes clear of the CTA buttons. */
  .uxp-visual { max-width: 520px; margin-inline: auto; width: 100%; margin-top: var(--space-6); }
  .uxp-probs { grid-template-columns: 1fr 1fr; }
  .uxp-probs--human { grid-template-columns: 1fr; gap: var(--space-3); }
  .uxp-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .uxp-section { padding-top: var(--space-5); }
  .uxp-section--tight { padding-top: var(--space-4); }
  .uxp-h2 { font-size: clamp(1.75rem, 7vw, 2.125rem); margin-top: var(--space-2); }
  .uxp-sub { font-size: var(--fs-md); margin-top: var(--space-2); }
  .uxp-hero { padding-top: calc(var(--header-height) + var(--space-3)); padding-bottom: 0; }
  .uxp-hero__panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .uxp-hero__title { font-size: clamp(1.5rem, 7vw, 2.1rem); margin-top: var(--space-3); }
  .uxp-hero__lead { margin-top: var(--space-3); }
  .uxp-hero__cta { margin-top: var(--space-4); }
  .uxp-hero__cta .btn { width: 100%; }

  .uxp-gap { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .uxp-gap__title { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .uxp-gap__bar { height: 112px; margin-top: var(--space-4); }
  .uxp-gap__seg { padding: 0 12px; min-width: 0; }
  .uxp-gap__pct { font-size: 1.15rem; }
  .uxp-gap__cap { font-size: 0.75rem; letter-spacing: 0.02em; }
  .uxp-gap__note { margin-top: var(--space-3); }

  .uxp-probs, .uxp-steps { margin-top: var(--space-4); }
  .uxp-svcs {
    margin-top: calc(var(--space-4) - 20px);
    --svc-gap: 12px;
  }
  .uxp-probs, .uxp-steps { grid-template-columns: 1fr; gap: var(--space-3); }
  .uxp-prob, .uxp-step { padding: var(--space-4); }
  .uxp-prob__icon, .uxp-step__icon { margin-bottom: var(--space-3); }
  .uxp-svcs__track { padding-bottom: 34px; }
  .uxp-svc {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
  .uxp-svc__title { font-size: 1.125rem; }
  .uxp-svcs__nav { width: 42px; height: 42px; }

  .uxp-probs__label:not(:first-child) { margin-top: var(--space-4); }

  /* Arrows move under the slide so the card keeps the full width. */
  .uxp-works {
    grid-template-areas:
      "view view view"
      "prev dots next";
    column-gap: var(--space-3);
    row-gap: var(--space-4);
    margin-top: var(--space-4);
  }
  .uxp-works__nav { width: 44px; height: 44px; }
  .uxp-works__nav--prev { justify-self: start; }
  .uxp-works__nav--next { justify-self: end; }
  .uxp-works__track { padding-bottom: 24px; }
  .uxp-work {
    padding: 0;
  }
  .uxp-work__browser,
  .uxp-work__phone,
  .uxp-work__tablet {
    box-shadow: 0 14px 26px -12px rgba(10, 10, 8, 0.5);
  }
  .uxp-work__browser { width: 95%; }
  .uxp-work--mobile-set {
    gap: 6px;
    padding: 8px 14px;
  }
  .uxp-work__phone { padding: 3px; border-radius: 10px; }
  .uxp-work__phone > img { border-radius: 7px; }
  .uxp-work--tablet-set {
    gap: 8px;
    padding: 8px 0;
  }
  .uxp-work__tablet { padding: 3px; border-radius: 9px; }
  .uxp-work__tablet > img { border-radius: 6px; }

  .uxp-about { grid-template-columns: 1fr; justify-items: start; text-align: left; padding: var(--space-4); margin-top: var(--space-4); gap: var(--space-4); }
  .uxp-about__avatar { width: 100%; height: auto; aspect-ratio: 4 / 3; justify-self: center; }
  .uxp-about__stats { justify-content: flex-start; }
  .uxp-faq { margin-top: var(--space-4); }
  .uxp-pin { display: none; }
  .uxp-visual { margin-top: var(--space-4); }
  /* Shorter window on phones: the body drops its min-height and every inner
     gap tightens, so the mockup reads as a wide strip, not a tall card. */
  .uxp-mock__body { grid-template-columns: 56px 1fr; min-height: 0; }
  .uxp-mock__side { padding: 10px 9px; gap: 7px; }
  .uxp-mock__side .uxp-mock__navline:nth-child(n+4) { display: none; }
  .uxp-mock__main { padding: 10px 12px; gap: 7px; }
  .uxp-mock__tile { padding: 8px; gap: 6px; }
  .uxp-mock__chart { min-height: 52px; }
  .uxp-mock__list { gap: 7px; }
  .uxp-mock__list .uxp-mock__row:nth-child(4) { display: none; }
  .uxp-mock__cta { height: 18px; width: 72px; }
  /* the notes tuck inside the frame so nothing is cut off */
  .uxp-sticky { width: 94px; min-height: 76px; padding: 8px 9px; font-size: 0.625rem; }
  /* No scroll drift on phones: the drift pushed the bottom notes past the
     card's rounded edge, where the panel's overflow cut them off. The margin
     leaves room for the part of each note that hangs below the window. */
  .uxp-sticky { --uxp-dy: 0px; }
  .uxp-visual { margin-bottom: var(--space-4); }
  .uxp-sticky--a { top: -7%; left: 1%; }
  .uxp-sticky--b { bottom: -4%; left: 3%; }
  .uxp-sticky--c { top: auto; bottom: -4%; left: auto; right: 3%; }
}
@media (prefers-reduced-motion: reduce) {
  .uxp-hero__glow,
  .uxp-hero__glow--pink,
  .uxp-hero__glow--blend,
  .uxp-hero__glow--corner,
  .uxp-gap__glow { animation: none; }
}