/* =========================================================================
   Account Editor — style.css
   Section order matches the page: header, hero, pinned stage, then the
   body sections, faq and footer. Breakpoints in responsive.css.
   ========================================================================= */

:root {
  /* the accent: the brand violet, which replaced the old neon lime */
  --lime: #7d40ff;
  --lime-600: #592db5;
  --coral: #ff5c54;
  --black: #000000;
  --white: #ffffff;
  --white-100: #f2f2f2;
  --grey: #e9e9e9;
  --line: #d9d9d9;
  --nav-line: #d2d2d2;
  --shade-500: #71717a;
  --shade-600: #52525b;
  --shade-90: #18181b;

  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* display type is heavy and tightly tracked — that is the page's voice */
  --fw-display: 800;
  --fw-bold: 700;
  --fw-med: 500;
  --fw-body: 400;

  /* type scale transcribed from the reference; t1/t2/t3/dsp step at the
     900 and 1200 breakpoints, body-base and body-lg step at 1200 only */
  --text-hero: 2.1rem;
  --text-dsp: 3.5rem;
  --text-t1: 2.75rem;
  --lh-t1: 2.97rem;
  --text-t2: 2.25rem;
  --text-t3: 1.875rem;

  --text-body-lg: 1.125rem;
  --lh-body-lg: 1.575rem;
  --text-body-base: 1rem;
  --lh-body-base: 1.4rem;
  --text-body-sm: 0.875rem;
  --lh-body-sm: 1.1375rem;

  --text-btn-md: 0.9375rem;
  --text-btn-lg: 1.25rem;
  --text-label-xs: 0.75rem;

  --text-word: 7rem;

  --ls-display: -0.035em;
  --ls-tight: -0.02em;
  --ls-btn: -0.04em;
  --ls-body: -0.006em;

  --r-tile: 10px;
  --r-media: 14px;
  --r-panel: 20px;
  --r-card: 22px;
  --r-pill: 9999px;
  --r-nav: 29px;

  --shadow-nav: 0 0 7px 0 rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 4px 14px 0 rgba(0, 0, 0, 0.18);

  /* Container, measured off the live site: 15px side gutters on small
     screens, 25px from 769px up, and from 1730px it stops growing and
     centres at 1680px. Verified against rendered widths at 1280/1440/1600. */
  --pad: 15px;
}

/* ------------------------------- reset ------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Lenis drives the smooth scroll when it loads; native smooth scrolling
   would fight it, so it stands down while Lenis is running */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background-color: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: var(--text-body-base);
  line-height: 1.45;
  font-weight: var(--fw-body);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, li, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

::selection { background-color: var(--lime); color: var(--white); }
::-moz-selection { background-color: var(--lime); color: var(--white); }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

.skip { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: var(--lime); color: var(--white); }
.skip:focus { top: 16px; }

/* the reference sizes its container off a breakpoint ladder rather than a
   fluid calc: max-width snaps to 640/768/900/1080/1200, then 1600 minus the
   side margin. Steps live in responsive.css; below 640 it is fluid with a
   gutter so the content never touches the edge. */
.wrap {
  width: 100%;
  max-width: var(--wrap-max, none);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ------------------------------- buttons ------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--md { padding: 9px 18px; font-size: var(--text-btn-md); letter-spacing: var(--ls-btn); }

.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--white); }
.btn--lime:hover { background: var(--lime-600); border-color: var(--lime-600); color: var(--white); }

/* the violet the phone's own buttons use, for the header call to action */
.btn--violet {
  background: linear-gradient(180deg, #8b56ff 0%, #7640f5 100%);
  border-color: #7640f5;
  color: var(--white);
  box-shadow: 0 6px 16px -6px rgba(125, 64, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--violet:hover { background: linear-gradient(180deg, #7d46f7 0%, #5f2fd8 100%); border-color: #5f2fd8; color: var(--white); }

.btn--dark { background: var(--black); border-color: var(--black); color: var(--white); }
.btn--dark:hover { background: var(--shade-90); border-color: var(--shade-90); }

/* ------------------------------- header ------------------------------- */

/* The header rides with the page through the dark hero and the zoom stage,
   then pins from the first light section on. Absolute by default so it scrolls
   away; JS swaps it to fixed and slides it in at the handover. */
.hdr {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-top: 31px;
  padding-bottom: 8px;
  pointer-events: none;
}

/* Past the stage the header is fixed but tucked away above the viewport;
   it slides down only while the reader scrolls back up. The transition is
   armed a frame after pinning, so the switch to fixed never animates. */
.hdr.is-pinned { position: fixed; transform: translateY(-130%); }
.hdr.is-pinned.is-armed { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.hdr.is-pinned.is-shown { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hdr.is-pinned.is-armed { transition: none; }
}

.hdr__blur { position: absolute; inset: -32px 0 8px; z-index: 0; overflow: hidden; pointer-events: none; }
.hdr__layer { position: absolute; inset: 0; pointer-events: none; }

/* eight steps, each doubling the blur and masked to its own slice, so the
   band grades instead of showing visible bands */
.hdr__layer--1 { z-index: 1; backdrop-filter: blur(0.078125px); -webkit-backdrop-filter: blur(0.078125px); mask-image: linear-gradient(transparent 87.5%, #000 100%); -webkit-mask-image: linear-gradient(transparent 87.5%, #000 100%); }
.hdr__layer--2 { z-index: 2; backdrop-filter: blur(0.15625px); -webkit-backdrop-filter: blur(0.15625px); mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%); -webkit-mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%); }
.hdr__layer--3 { z-index: 3; backdrop-filter: blur(0.3125px); -webkit-backdrop-filter: blur(0.3125px); mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); -webkit-mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.hdr__layer--4 { z-index: 4; backdrop-filter: blur(0.625px); -webkit-backdrop-filter: blur(0.625px); mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); -webkit-mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.hdr__layer--5 { z-index: 5; backdrop-filter: blur(1.25px); -webkit-backdrop-filter: blur(1.25px); mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); -webkit-mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.hdr__layer--6 { z-index: 6; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); -webkit-mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.hdr__layer--7 { z-index: 7; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); -webkit-mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.hdr__layer--8 { z-index: 8; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); -webkit-mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }

.hdr__overlay {
  position: absolute; inset: -32px 0 8px; z-index: 1;
  background: linear-gradient(rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* At rest the rail itself is the white capsule, with the logo and the lime
   button sitting inside it — one continuous shape, no seam. Scrolling hands
   the capsule styling down to the two pills so they separate cleanly. */
/* the bright catch across the top — the single cue that most makes a
   surface read as curved glass rather than a flat translucent panel */
.hdr__nav::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 52%;
  border-radius: var(--r-nav) var(--r-nav) 40% 40% / var(--r-nav) var(--r-nav) 100% 100%;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}


.hdr__glow {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 1;
  width: 900px;
  max-width: 94vw;
  height: 86px;
  transform: translateX(-50%);
  pointer-events: none;
  /* neutral: same pool of light for the glass to pick up, no colour cast */
  background-image:
    radial-gradient(ellipse 46% 120% at 30% 50%, rgba(255, 255, 255, 0.26), transparent 72%),
    radial-gradient(ellipse 46% 120% at 74% 50%, rgba(255, 255, 255, 0.20), transparent 72%);
  filter: blur(26px);
  opacity: 0.9;
  transition: opacity 0.35s ease;
}
.hdr.is-pinned .hdr__glow { opacity: 0; }
/* over the light sections the dark top wash reads as a grey band, so the
   pinned header drops it and lets the capsule carry the contrast */
.hdr.is-pinned .hdr__overlay { opacity: 0; }

.hdr__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  max-width: 880px;
  height: 51px;
  pointer-events: auto;
  /* Apple-style glass: the surface is genuinely translucent and the blur is
     paired with a saturation boost, which is what makes colour behind it bleed
     through vividly instead of turning to grey mush. The inset highlights give
     the lit top and bottom edges a real pane of glass catches. */
  /* On a dark ground a light pane just greys out, so this is a dark glass:
     a near-black translucent surface with a lit top edge. The saturation
     boost is what keeps colour behind it alive rather than muddy. */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-nav);
  background-color: rgba(14, 15, 20, 0.88);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -16px 22px -16px rgba(255, 255, 255, 0.26),
    inset 0 14px 20px -16px rgba(255, 255, 255, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 16px 44px rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(30px) saturate(210%) brightness(1.04);
  -webkit-backdrop-filter: blur(30px) saturate(210%) brightness(1.04);
  transition:
    max-width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


.pill {
  display: flex;
  align-items: center;
  height: 100%;
  border: 1px solid transparent;
  border-radius: var(--r-nav);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.pill--brand { padding-left: 20px; padding-right: 0; }

/* the capsule carries real navigation, so the links sit between the logo and
   the button and take the leftover space */
.hdr__links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0 20px;
  list-style: none;
}

.hdr__links a {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-med);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.80);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.hdr__links a:hover { color: var(--white); }

/* once the capsule dissolves on scroll the links sit on the dark band, so
   they have to flip to light or they vanish */

.pill--cta { padding: 5px; }
.pill--cta .btn { min-height: 41px; padding-inline: 20px; }

/* once separated, each pill carries the capsule treatment itself */

/* the logo is 794x243, so height drives it and width follows the ratio */
.brand { display: flex; align-items: center; }
.brand img { display: block; height: 34px; width: auto; }

/* ------------------------------- hero ------------------------------- */

.hero {
  position: relative;
  z-index: 2;
  padding-top: 128px;
  padding-bottom: 40px;
  background-color: var(--black);
  color: var(--white);
}

.hero__in { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }

/* Phudu is a condensed display face: it wants less negative tracking than
   Inter did, and a touch more size to hold the same presence */
.hero__title {
  font-family: "Barlow Semi Condensed", var(--font-sans);
  font-size: calc(var(--text-hero) * 1.12);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 600;
  text-wrap: balance;
}

/* one face, one style across the whole heading */
.hero__title em {
  font: inherit;
  letter-spacing: inherit;
}

/* --- glass icon cluster ------------------------------------------------
   Every length below is an em of the HEADING size, so the cluster scales
   with the type. Layered to read as glass: a blurred refraction of what
   sits behind, a light-to-dark body gradient for curvature, an inset top
   specular and inset bottom shade for thickness, then contact and ambient
   shadows so the discs lift off the page.                              */

/* --- scattered hero objects ---------------------------------------------
   Each object is a 36-frame arc rendered in Blender, packed into one row and
   played with `alternate`, so it rocks forward and back without the sheet
   having to store the return frames. Storing all 72 (as before) doubled the
   pixels for no extra motion; spending them on resolution instead is what
   made these sharp.

   Frames are rendered at roughly 2x their display width so they hold up on
   retina, and at 160 samples — at 40 the denoiser left smooth surfaces waxy.

   A strip is 36x the element's width. background-position-x of P% offsets by
   P x (element - image), so 0% -> 100% spans frames 0..35; jump-none makes
   each step land on a frame rather than between two. */

.hero__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__obj {
  position: absolute;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: 3600% 100%;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55));
  animation:
    obj-spin 4s steps(36, jump-none) infinite alternate,
    obj-float 12s ease-in-out infinite;

  will-change: background-position, transform;
}

.hero__obj--1 { width: 142px; left: 1%;   top: 30%;    background-image: url("../images/map-location-icon-spin.webp"); animation-duration: 4.5s,  11s; }
.hero__obj--2 { width: 168px; right: 1%;  top: 17%;    background-image: url("../images/delivery-box-icon-spin.webp"); animation-duration: 4s,    13s; }
.hero__obj--3 { width: 168px; left: 7%;   bottom: -20%;  background-image: url("../images/coin-icon-spin.webp");         animation-duration: 3.5s,  12s; animation-direction: normal, normal; }
.hero__obj--4 { width: 250px; right: 4%;  bottom: -44%; background-image: url("../images/polo-shirt-spin.webp");       animation-duration: 4.75s, 14s; animation-direction: normal, normal; }
.hero__obj--5 { width: 138px; left: 22%;  bottom: -32%; background-image: url("../images/sofa-spin.webp");             animation-duration: 4.25s, 15s; }

@keyframes obj-spin {
  from { background-position-x: 0%; }
  to   { background-position-x: 100%; }
}

/* grid sheets: the column pass runs once per row, the row steps once per pass */
@keyframes obj-col {
  from { background-position-x: 0%; }
  to   { background-position-x: 100%; }
}
@keyframes obj-row {
  from { background-position-y: 0%; }
  to   { background-position-y: 100%; }
}

.hero__obj--3,
.hero__obj--4 {
  background-size: 900% 800%;
  animation:
    obj-col 1.75s steps(9, jump-none) infinite,
    obj-row 14s   steps(8, jump-none) infinite,
    obj-float 12s ease-in-out infinite;
  animation-direction: normal, normal, normal;
}

/* 14s for a full turn — slow, and 72 frames keeps it from stepping */
.hero__obj--4 {
  animation-duration: 2.1s, 16.8s, 14s;
}

/* The two glass orbs drift on a slow loop: a soft figure-eight with a slight
   lean, sine-eased at every stop, so they never pause or snap. Different
   lengths and a negative delay keep the pair out of step with each other. */
.hero__obj--3,
.hero__obj--4 {
  animation-name: obj-col, obj-row, orb-drift;
  animation-timing-function: steps(9, jump-none), steps(8, jump-none), cubic-bezier(0.37, 0, 0.63, 1);
}
.hero__obj--3 { animation-duration: 1.75s, 14s, 11s; }
.hero__obj--4 { animation-duration: 2.1s, 16.8s, 13s; animation-delay: 0s, 0s, -6.5s; }

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(10px, -14px) rotate(2deg); }
  50%      { transform: translate(0, -22px) rotate(0deg); }
  75%      { transform: translate(-10px, -12px) rotate(-2deg); }
}

@keyframes obj-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

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

/* ----------------------------- zoom stage ----------------------------- */

/* a tall track scrolls past a pinned frame; one damped progress value
   drives every layer, so the sequence tracks the wheel without snapping */
/* the last 100vh holds the opened board still while the page below slides
   up over it */
.zoom__track { position: relative; height: 520vh; }

.zoom__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--black);
}

/* the photo starts as a band across the bottom and grows up to fill the
   frame; clipping the top edge is cheaper than animating a height */
.zoom__frame {
  position: absolute;
  inset: 0;
  /* starts as an inset, rounded card and opens out to full-bleed */
  clip-path: inset(25% var(--pad) 0 var(--pad) round 22px);
  will-change: clip-path;
}

/* the picture pushes in continuously behind that growing window.
   Colours sampled off the reference: mid sage #587858, shadows #285840.
   The grid scales with the push-in, which is what a real mat would do. */
.zoom__bg {
  position: absolute;
  inset: 0;
  transform-origin: center 58%;
  will-change: transform;
  /* the mat's own violet, so nothing flashes while the photo loads */
  background-color: #7a5af5;
}

/* the photograph fills the frame */
.zoom__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the phone holds its size through the push-in and only grows at the end.
   phone.webp is a bezel cutout with a transparent screen, so the frame
   carries the corners and the shadow follows its alpha, not a box */
.zoom__phone {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  /* At rest the phone hangs from a fixed offset below the pin's top edge, so
     it can be any size without the top ever being clipped; only its bottom
     runs past the fold, which is what a phone rising into frame should do.
     JS moves it to the vertical centre as the stage pins. */
  --phone-w: min(292px, 70vw);
  width: var(--phone-w);
  aspect-ratio: 740 / 1520;
  /* a soft shadow falling down and to the right, so the phone sits on the
     mat rather than floating over it */
  filter:
    drop-shadow(20px 32px 40px rgba(18, 10, 48, 0.42))
    drop-shadow(0 0 22px rgba(122, 90, 245, 0.55));
  /* scaled from the top edge, so the y offset JS writes is the visual top.
     With the default centre origin, shrinking pushed the phone below the
     middle of the frame by half the height it lost. */
  transform: translate(-50%, 24px);
  transform-origin: 50% 0;
  will-change: transform;
}

/* the screen window, measured off the bezel: x 35-704, y 32-1488 of 740x1520 */
.zoom__viewport {
  position: absolute;
  left: 4.73%;
  top: 2.11%;
  width: 90.54%;
  height: 95.79%;
  overflow: hidden;
  /* The bezel's inner corner measures 93px on its 670px screen — 13.9% — so
     the screen needs at least that, or its squarer corners poke out past the
     frame and show as white against the page.

     Not cqw: on an element that is itself the query container, cqw resolves
     against the nearest ANCESTOR container (here, the viewport), so 15cqw came
     out as 15% of the page width and swallowed the screen. Taking the share off
     the phone's own width is unambiguous — the screen is 90.54% of the phone,
     so 13.9% of the screen is 12.6% of the phone. */
  border-radius: calc(var(--phone-w) * 0.126);
}

/* one tall screen that slides behind the bezel, so the app content scrolls
   continuously instead of cutting between stills */

/* ------------------------- phone screen UI ------------------------- */

/* the viewport is a query container, so every size below is expressed in
   cqw and the whole interface scales with the phone */
.zoom__viewport { container-type: inline-size; }

.ui__bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.5cqw 7cqw 0;
  font-size: 4.4cqw;
  font-weight: 600;
  color: #111;
}
.ui__sig { display: flex; align-items: flex-end; gap: 0.8cqw; }
.ui__sig i { width: 1.1cqw; background: #111; border-radius: 0.4cqw; }
.ui__sig i:nth-child(1) { height: 2cqw; }
.ui__sig i:nth-child(2) { height: 3cqw; }
.ui__sig i:nth-child(3) { height: 4cqw; }

.ui__clip {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
  font-family: var(--ph-sans); color: var(--ph-ink);
}
/* home indicator, so the foot of the screen reads as a device, not a gap */
.ui__clip::after {
  content: ""; position: absolute; left: 50%; bottom: 2.4cqw; z-index: 3;
  width: 34%; height: 1.2cqw; transform: translateX(-50%);
  border-radius: 99px; background: rgba(10, 10, 10, 0.82);
}

/* The four flows the hero phone walks through as the page scrolls. They
   are the same screens as the v2 draft's hero, rebuilt in cqw so the whole
   interface scales with whatever width the phone is drawn at. */

.ui__nav {
  position: absolute; left: 0; right: 0; top: 12.5cqw; z-index: 2;
  display: flex; align-items: center; gap: 3cqw;
  padding: 0 5.5cqw 3cqw;
  border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}
.ui__back { display: grid; place-items: center; width: 7cqw; height: 7cqw; color: var(--ph-ink-2); }
.ui__back svg { width: 5.6cqw; height: 5.6cqw; }
.ui__mark { flex: 1; display: flex; justify-content: center; }
.ui__mark img { display: block; height: 7.6cqw; width: auto; }
.ui__me {
  display: grid; place-items: center; width: 8cqw; height: 8cqw;
  border-radius: 50%; background: var(--ph-tint); color: var(--ph-ink-2);
  font-size: 3.6cqw; font-weight: 600;
}

/* story bars: one per flow, each filling as its slice of the scroll passes */
.ui__story { position: absolute; left: 6cqw; right: 6cqw; top: 27.5cqw; z-index: 2; }
.ui__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.ui__bars span { height: 1.2cqw; border-radius: 99px; background: var(--ph-line); overflow: hidden; }
.ui__bars i {
  display: block; height: 100%;
  background: var(--ph-violet);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
.ui__now {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 2.6cqw;
  font-size: 3.5cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ph-violet);
}
.ui__now em { font-style: normal; font-weight: 600; letter-spacing: 0.04em; color: var(--ph-ink-3); }
.ui__now span.is-swap { animation: ui-now 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes ui-now {
  from { opacity: 0; transform: translateY(1.6cqw); }
  to   { opacity: 1; transform: none; }
}

.ui__stack { position: absolute; inset: 41cqw 0 0; }
.ui__feat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 3.8cqw;
  padding: 0 6cqw 9.5cqw;
  will-change: opacity, transform;
}
/* before the script runs, only the first flow shows */
.ui__feat + .ui__feat { opacity: 0; visibility: hidden; }

/* --- screen parts ---------------------------------------------------- */
.sx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 3cqw; }
.sx-kick { display: block; font-size: 3.5cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ph-violet); }
.sx-title { display: block; margin-top: 1cqw; font-size: 8.4cqw; font-weight: 650; line-height: 1.08; letter-spacing: -0.025em; }
.sx-badge { flex: none; margin-top: 1cqw; padding: 1.5cqw 3cqw; border-radius: 99px; background: var(--ph-tint); color: var(--ph-ink-2); font-size: 3.4cqw; }

.sx-window {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 3cqw 4cqw 3.8cqw; border-radius: 3cqw;
  background: var(--ph-tint); color: var(--ph-violet-deep);
  font-size: 4.2cqw;
}
.sx-window svg { width: 5.1cqw; height: 5.1cqw; flex: none; }
.sx-window b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-window__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.9cqw; background: rgba(125, 64, 255, 0.14); }
.sx-window__bar i {
  display: block; height: 100%; background: var(--ph-violet);
  transform-origin: 0 50%; transform: scaleX(0.89);
  transition: transform 1s linear;
}

.sx-list { display: grid; gap: 2.6cqw; }
.sx-item {
  display: grid; grid-template-columns: 14cqw 1fr auto; align-items: center; gap: 4cqw;
  padding: 3.3cqw 4cqw; border-radius: 4cqw;
  background: #fff; border: 1px solid var(--ph-line);
  border-color: rgba(10, 10, 10, 0.06);
  box-shadow: 0 0.3cqw 0.6cqw rgba(38, 20, 90, 0.04), 0 3cqw 7cqw -2cqw rgba(38, 20, 90, 0.1);
}
/* product photos sit on a soft tint, contained rather than cropped */
.sx-thumb {
  display: block; width: 14cqw; height: 14cqw; border-radius: 3.3cqw; overflow: hidden;
  background: linear-gradient(160deg, #f6f4fb 0%, #ebe7f4 100%);
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.05);
}
.sx-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; }
.sx-thumb--lg { width: 17.5cqw; height: 17.5cqw; border-radius: 4cqw; }
.sx-item__text { display: grid; gap: 0.3cqw; min-width: 0; }
.sx-item__text b { font-size: 4.4cqw; font-weight: 600; letter-spacing: -0.01em; }
.sx-item__text em { font-style: normal; font-size: 3.8cqw; color: var(--ph-ink-2); }
.sx-item__price { font-size: 4.2cqw; font-weight: 600; }

.sx-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 3.3cqw; border-top: 1px solid var(--ph-line);
  font-size: 4.2cqw; color: var(--ph-ink-2);
}
.sx-total__n { font-size: 8.4cqw; font-weight: 650; letter-spacing: -0.03em; color: var(--ph-ink); font-variant-numeric: tabular-nums; }
.sx-total--sm b { font-size: 5.4cqw; font-weight: 700; color: var(--ph-ink); font-variant-numeric: tabular-nums; }

.sx-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqw; margin-top: 1cqw; }
.sx-act {
  display: flex; flex-direction: column; align-items: center; gap: 1.8cqw;
  padding: 3.3cqw 0.7cqw; border-radius: 3.6cqw;
  background: #fff; border: 1px solid rgba(10, 10, 10, 0.07);
  font-size: 3.5cqw; font-weight: 500;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sx-act svg { width: 5.1cqw; height: 5.1cqw; color: var(--ph-violet); }
.sx-act--quiet { background: transparent; border-style: dashed; color: var(--ph-ink-3); }
.sx-act--quiet svg { color: var(--ph-ink-3); }
/* each beat lights the next action, the way a thumb would move across them */
.ui__feat.s1:not(.s2) .sx-act:nth-child(1),
.ui__feat.s2:not(.s3) .sx-act:nth-child(2),
.ui__feat.s3:not(.s4) .sx-act:nth-child(3),
.ui__feat.s4 .sx-act:nth-child(4) {
  background: var(--ph-tint); border-color: var(--ph-violet); border-style: solid;
  color: var(--ph-violet-deep); transform: translateY(-0.9cqw);
}
.ui__feat.s4 .sx-act:nth-child(4) svg { color: var(--ph-violet); }

.sx-field {
  display: flex; align-items: baseline; justify-content: space-between; gap: 3.6cqw;
  padding-bottom: 2.6cqw; border-bottom: 1px solid var(--ph-line);
  font-size: 4.2cqw;
}
.sx-field__k { font-size: 3.6cqw; color: var(--ph-ink-3); }
.sx-zip { display: inline-flex; align-items: baseline; gap: 2cqw; }
.sx-zip b { font-weight: 400; color: var(--ph-violet-deep); }
.ui__feat.s1 .sx-zip b { color: var(--ph-ink); }
.sx-chip {
  padding: 0.7cqw 2.2cqw; border-radius: 99px;
  background: var(--ph-tint); color: var(--ph-violet-deep);
  font-style: normal; font-size: 3.3cqw;
}
.sx-chip--ok { background: var(--ph-green-soft); color: var(--ph-green); }

/* two values sharing one slot: the second replaces the first on its beat */
.sx-swap { display: inline-grid; }
.sx-swap > * { grid-area: 1 / 1; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sx-swap .sx-now { opacity: 0; transform: translateY(60%); }
.ui__feat.s1 .sx-swap .sx-was { opacity: 0; transform: translateY(-60%); }
.ui__feat.s1 .sx-swap .sx-now { opacity: 1; transform: none; }

.sx-ok {
  display: grid; grid-template-columns: 7.3cqw 1fr; align-items: start; gap: 3.3cqw;
  padding: 3.6cqw; border-radius: 3.3cqw; background: var(--ph-green-soft);
}
.sx-ok__i { display: grid; place-items: center; width: 7.3cqw; height: 7.3cqw; border-radius: 50%; background: var(--ph-green); color: #fff; }
.sx-ok__i svg { width: 4.6cqw; height: 4.6cqw; }
.sx-ok b { display: block; font-size: 4.2cqw; font-weight: 600; }
.sx-ok em { font-style: normal; font-size: 3.6cqw; line-height: 1.35; color: var(--ph-ink-2); }
.sx-reveal { opacity: 0; transform: translateY(2.4cqw) scale(0.97); transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ui__feat.s1 .sx-reveal { opacity: 1; transform: none; }

.sx-btn {
  position: relative; overflow: hidden; display: block;
  margin-top: 1.4cqw; padding: 4.2cqw;
  border: 1px solid transparent; border-radius: 3.8cqw;
  background: linear-gradient(180deg, #8b56ff 0%, #7640f5 100%); color: #fff;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(125, 64, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-size: 4.6cqw; font-weight: 600; text-align: center;
}
.sx-btn__done {
  position: absolute; inset: -1px; border-radius: inherit;
  display: flex; align-items: center; justify-content: center; gap: 1.8cqw;
  background: linear-gradient(180deg, #17a35a 0%, #0c8a45 100%); color: #fff;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sx-btn__done svg { width: 4.6cqw; height: 4.6cqw; }
/* address saves on its second beat; the cancel and upsell buttons on their last */
.ui__feat[data-feat="Address check"].s2 .sx-btn__done,
.ui__feat[data-feat="Cancel offer"].s2 .sx-btn__done,
.ui__feat[data-feat="Same-box upsell"].s1 .sx-btn__done { opacity: 1; transform: none; }
.sx-btn--ghost { margin-top: 0; background: #fff; color: var(--ph-ink-2); border-color: rgba(10, 10, 10, 0.1); box-shadow: none; }
.sx-fine { font-size: 3.5cqw; color: var(--ph-ink-3); text-align: center; }
.ui__feat .sx-btn:not(.sx-btn--ghost),
.ui__feat .sx-acts { margin-top: auto; }

/* order status: done, in progress (breathing), still to come */
.sx-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0.6cqw; }
.sx-track::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 2.8cqw; height: 0.5cqw;
  background: linear-gradient(90deg, var(--ph-violet) 50%, rgba(10, 10, 10, 0.08) 50%);
}
.sx-track span { position: relative; display: grid; justify-items: center; gap: 1.8cqw; font-size: 3.3cqw; color: var(--ph-ink-3); }
.sx-track span::before {
  content: ""; width: 4.4cqw; height: 4.4cqw; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 0.9cqw solid rgba(10, 10, 10, 0.12);
}
.sx-track .is-done { color: var(--ph-ink-2); }
.sx-track .is-done::before { background: var(--ph-violet); border-color: var(--ph-violet); }
.sx-track .is-now { color: var(--ph-ink); font-weight: 600; }
.sx-track .is-now::before { border-color: var(--ph-violet); box-shadow: 0 0 0 1.2cqw rgba(125, 64, 255, 0.18); animation: sx-breathe 1.8s ease-in-out infinite; }
@keyframes sx-breathe { 50% { box-shadow: 0 0 0 2.4cqw rgba(125, 64, 255, 0); } }

/* map: the pin moves from the typo's location to the corrected one */
.sx-map {
  position: relative; height: 28cqw; overflow: hidden;
  border-radius: 4cqw; border: 1px solid rgba(10, 10, 10, 0.06);
}
.sx-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sx-pin {
  position: absolute; left: 30%; top: 58%;
  width: 7.5cqw; height: 7.5cqw; margin: -7.5cqw 0 0 -3.75cqw;
  color: var(--ph-ink-3);
  filter: drop-shadow(0 1.2cqw 1.4cqw rgba(38, 20, 90, 0.3));
  transition: left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.4s ease;
}
.sx-pin svg { display: block; width: 100%; height: 100%; }
.ui__feat.s1 .sx-pin { left: 81.6%; top: 31%; color: var(--ph-violet); }

/* a compact order row: overlapping thumbs, a line of context, a figure */
.sx-mini {
  display: flex; align-items: center; gap: 3cqw;
  padding: 2.8cqw 3.6cqw; border-radius: 3.6cqw;
  background: #fff; border: 1px solid rgba(10, 10, 10, 0.06);
}
.sx-mini__thumbs { display: flex; flex: none; }
.sx-mini__thumbs .sx-thumb { width: 9.5cqw; height: 9.5cqw; border-radius: 2.6cqw; box-shadow: 0 0 0 0.7cqw #fff; }
.sx-mini__thumbs .sx-thumb + .sx-thumb { margin-left: -2.6cqw; }
.sx-mini__text { flex: 1; display: grid; gap: 0.3cqw; min-width: 0; }
.sx-mini__text b { font-size: 3.9cqw; font-weight: 600; }
.sx-mini__text em { font-style: normal; font-size: 3.4cqw; color: var(--ph-ink-2); }
.sx-mini__n { font-size: 4.2cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-pop { transform: scale(0); opacity: 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; }
.ui__feat.s1 .sx-pop { transform: none; opacity: 1; }

/* when a button confirms, its glow turns green with it rather than
   leaving a violet halo round the green face */
.sx-btn { transition: box-shadow 0.45s ease, background 0.45s ease; }
.ui__feat[data-feat="Address check"].s2 .sx-btn:not(.sx-btn--ghost),
.ui__feat[data-feat="Cancel offer"].s2 .sx-btn:not(.sx-btn--ghost),
.ui__feat[data-feat="Same-box upsell"].s1 .sx-btn:not(.sx-btn--ghost) {
  background: #0c8a45;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(12, 138, 69, 0.55);
}

/* --- guide cursor ----------------------------------------------------
   Sits at the pointer's tip, so --cx/--cy are exactly where it points. */
.ui__cursor {
  position: absolute; left: 0; top: 0; z-index: 5;
  transform: translate3d(var(--cx, 50%), var(--cy, 50%), 0);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
  will-change: transform;
}
.ui__cursor.is-still { transition: none; }
.ui__arrow {
  position: absolute; left: -1.8cqw; top: -1.1cqw;
  width: 8cqw; height: 8cqw; display: block;
  filter: drop-shadow(0 0.8cqw 1.4cqw rgba(21, 17, 42, 0.32));
  transform-origin: 20% 12%;
  transition: transform 0.16s ease;
}
.ui__cursor.is-tap .ui__arrow { animation: ui-press 0.42s ease; }
@keyframes ui-press { 40% { transform: scale(0.84); } }

.ui__ripple {
  position: absolute; left: -5cqw; top: -5cqw;
  width: 10cqw; height: 10cqw; border-radius: 50%;
  background: rgba(125, 64, 255, 0.3);
  opacity: 0; transform: scale(0.2);
}
.ui__cursor.is-tap .ui__ripple { animation: ui-ripple 0.65s ease-out; }
@keyframes ui-ripple {
  0%   { opacity: 1; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* confirmations land just after the tap reaches them, not before */
.sx-btn__done, .sx-act { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .ui__cursor { transition: none; }
  .ui__cursor.is-tap .ui__arrow, .ui__cursor.is-tap .ui__ripple { animation: none; }
  .sx-btn__done, .sx-act { transition-delay: 0s; }
  .sx-track .is-now::before { animation: none; }
  .sx-pin, .sx-pop, .sx-btn { transition: none; }
}


.sx-offer {
  position: relative; display: grid; gap: 0.7cqw;
  padding: 5cqw; border-radius: 4cqw;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(160, 120, 255, 0.35) 0%, rgba(160, 120, 255, 0) 60%),
    linear-gradient(150deg, #3a2a7a 0%, #231850 100%);
  color: #fff;
  box-shadow: 0 3cqw 8cqw -3cqw rgba(35, 24, 80, 0.55);
}
.sx-offer__tag {
  position: absolute; top: 4cqw; right: 4cqw;
  padding: 1.1cqw 2.6cqw; border-radius: 99px;
  background: var(--ph-green); color: #fff;
  font-size: 3.3cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ui__feat.s1 .sx-offer__tag { opacity: 1; transform: none; }
.sx-offer__n { font-size: 11cqw; font-weight: 650; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sx-offer__sub { font-size: 3.8cqw; color: rgba(255, 255, 255, 0.68); }
.sx-alt { display: grid; gap: 2.2cqw; }
.sx-alt span {
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 3cqw 3.6cqw; border-radius: 3cqw;
  background: var(--ph-tint); color: var(--ph-ink-2); font-size: 4cqw;
}
.sx-alt svg { width: 4.7cqw; height: 4.7cqw; flex: none; }

.sx-promo {
  display: grid; grid-template-columns: 17.5cqw 1fr; align-items: center; gap: 4cqw;
  padding: 4cqw; border-radius: 3.6cqw;
  background: #fff; border: 1px solid var(--ph-line);
}
.sx-promo__text { display: grid; gap: 0.3cqw; }
.sx-promo__text b { font-size: 4.4cqw; font-weight: 600; }
.sx-promo__text em { font-style: normal; font-size: 3.8cqw; color: var(--ph-ink-2); }
.sx-promo__price { margin-top: 0.7cqw; font-size: 6.2cqw; font-weight: 700; color: var(--ph-violet); }

@media (prefers-reduced-motion: reduce) {
  .sx-act, .sx-swap > *, .sx-reveal, .sx-btn__done, .sx-offer__tag { transition: none; }
  .ui__now span.is-swap { animation: none; }
}

/* the mat's violet catching the frame: a 3% wash, cut to the bezel's own
   shape so it tints the metal and never the screen */
.zoom__phone::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: #8a6bff;
  opacity: 0.14;
  -webkit-mask: url("../images/phone.webp") center / 100% 100% no-repeat;
  mask: url("../images/phone.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}

.zoom__bezel {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the board grows out of the phone rather than fading in: it scales up
   from roughly the phone's footprint, centred on it */
.zoom__board {
  position: absolute;
  /* it opens to a framed panel, not full bleed: the mat stays visible as a
     margin on every side */
  inset: 50px;
  z-index: 3;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background-color: #0b0a10;
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
/* a flat dot grid, no wash */
.zoom__board::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* Every length on the board is in --u, a unit tied to the board's own size,
   so the composition holds its proportions at any viewport. */
.bd {
  --u: min(0.86cqh, 0.54cqw);
  --pw: calc(var(--u) * 41);          /* phone width */
  position: absolute; inset: 0;
  container-type: size;
  font-family: var(--ph-sans);
}

/* the hero's own handset: phone.webp over a live screen, using the same
   measured window (x 35-704, y 32-1488 of 740x1520). It breathes gently. */
.bd-phone {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: var(--pw); aspect-ratio: 740 / 1520;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0, 0, 0, 0.55));
  animation: bd-bob 7s ease-in-out infinite;
}
@keyframes bd-bob { 50% { translate: 0 calc(var(--u) * -1.4); } }
.bd-phone__bezel {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.bd-phone__screen {
  position: absolute;
  left: 4.73%; top: 2.11%; width: 90.54%; height: 95.79%;
  overflow: hidden;
  /* 13.9% of the screen is 12.6% of the phone, as on the hero */
  border-radius: calc(var(--pw) * 0.126);
  container-type: inline-size;
}
.bd-phone .ui__stack { inset: 30cqw 0 0; }

/* the board's screens cross-fade as the live flow changes */
.bd .ui__feat {
  opacity: 0; visibility: hidden; transform: translateY(3cqw);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.5s;
}
.bd .ui__feat.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.45s ease 0.08s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s, visibility 0s;
}

/* --- the flow cards ---------------------------------------------------
   They slide in from their own side once the board has opened, one after
   another, then each floats on its own beat. Entrance rides `translate`,
   the float rides `transform`, and the live card's lift rides `scale`, so
   the three never overwrite each other. */
.bd-card {
  position: absolute; z-index: 1;
  width: calc(var(--u) * 33);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 2.3) calc(var(--u) * 2.5) calc(var(--u) * 2.1);
  border-radius: calc(var(--u) * 1.6);
  background: #ececf0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--ph-ink);
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 7) calc(var(--u) * -2) rgba(0, 0, 0, 0.6);
  cursor: default;
  opacity: 0;
  translate: var(--ex) 0;
  animation: bd-float 6s ease-in-out infinite;
  animation-delay: var(--fd);
  transition:
    opacity 0.6s ease var(--in-d),
    translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--in-d),
    scale 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.4s ease, box-shadow 0.45s ease, border-color 0.4s ease;
}
@keyframes bd-float { 50% { transform: translateY(calc(var(--u) * -1)); } }

.zoom__board.is-open .bd-card { opacity: 1; translate: 0 0; }
/* cards take the pointer only while the board is open */
.zoom__board.is-open .bd-card { pointer-events: auto; }

/* Mirrored seats: the upper pair sits close to the phone, the lower pair a
   step further out, both sides at the same heights. --gap is the distance
   to the phone's edge, which the connector line then spans exactly. */
.bd-card--l1, .bd-card--r1 { --gap: calc(var(--u) * 7);  top: 25%; }
.bd-card--l2, .bd-card--r2 { --gap: calc(var(--u) * 15); top: 56%; }
.bd-card--l1, .bd-card--l2 { right: calc(50% + var(--pw) / 2 + var(--gap)); --ex: calc(var(--u) * -5); }
.bd-card--r1, .bd-card--r2 { left:  calc(50% + var(--pw) / 2 + var(--gap)); --ex: calc(var(--u) * 5); }
.bd-card--l1 { --in-d: 0.05s; --fd: 0s; }
.bd-card--r1 { --in-d: 0.12s; --fd: -1.5s; }
.bd-card--l2 { --in-d: 0.2s;  --fd: -3s; }
.bd-card--r2 { --in-d: 0.28s; --fd: -4.5s; }

/* the connector: a dashed rule from the card to the phone, ending in a dot */
.bd-card::before,
.bd-card::after { content: ""; position: absolute; top: 50%; pointer-events: none; }
.bd-card::before {
  width: var(--gap); height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
  transition: border-color 0.4s ease;
}
.bd-card::after {
  width: calc(var(--u) * 1); height: calc(var(--u) * 1); margin-top: calc(var(--u) * -0.5);
  border-radius: 50%; background: rgba(255, 255, 255, 0.35);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.bd-card--l1::before, .bd-card--l2::before { left: 100%; }
.bd-card--r1::before, .bd-card--r2::before { right: 100%; }
.bd-card--l1::after, .bd-card--l2::after { left: calc(100% + var(--gap) - var(--u) * 0.5); }
.bd-card--r1::after, .bd-card--r2::after { right: calc(100% + var(--gap) - var(--u) * 0.5); }
.bd-card.is-on::before { border-top: 1px solid var(--ph-violet); }
.bd-card.is-on::after { background: var(--ph-violet); box-shadow: 0 0 0 calc(var(--u) * 0.6) rgba(125, 64, 255, 0.28); }

.bd-card__top { display: flex; align-items: center; gap: calc(var(--u) * 1.3); }
.bd-card__i {
  display: grid; place-items: center; flex: none;
  width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * 0.9);
  background: #fff; color: var(--ph-ink);
  transition: background 0.35s ease, color 0.35s ease;
}
.bd-card__i svg { width: 55%; height: 55%; }
.bd-card__label { font-size: calc(var(--u) * 2.15); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.35s ease; }
.bd-card__blurb { font-size: calc(var(--u) * 1.6); line-height: 1.4; color: var(--ph-ink-2); }
.bd-card__bars { display: grid; gap: calc(var(--u) * 0.6); padding-top: calc(var(--u) * 0.3); }
.bd-card__bars i { height: calc(var(--u) * 0.55); border-radius: 99px; background: rgba(10, 10, 10, 0.06); transition: background 0.35s ease; }
.bd-card__bars i:nth-child(2) { width: 78%; }
.bd-card__bars i:nth-child(3) { width: 52%; }
.bd-card__go { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6); font-size: calc(var(--u) * 1.65); font-weight: 600; color: var(--ph-violet); }
.bd-card__go svg { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }

.bd-card.is-on {
  scale: 1.04;
  background: #fff;
  border-color: var(--ph-violet);
  box-shadow:
    0 0 0 calc(var(--u) * 0.4) var(--ph-violet),
    0 calc(var(--u) * 3.5) calc(var(--u) * 8) calc(var(--u) * -2) rgba(0, 0, 0, 0.6);
}
.bd-card.is-on .bd-card__i { background: var(--ph-violet); color: #fff; }
.bd-card.is-on .bd-card__label { color: var(--ph-violet-deep); }
.bd-card.is-on .bd-card__bars i { background: rgba(125, 64, 255, 0.16); }
.bd-card.is-on .bd-card__go svg { transform: translateX(calc(var(--u) * 0.5)); }

/* --- the name, huge and barely there, drifting behind everything ---
   The track holds the phrase twice over and slides by exactly half its
   width, so the loop has no seam. */
.bd-marquee {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 0;
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
}
.bd-marquee__track {
  display: flex; width: max-content;
  animation: bd-marquee 60s linear infinite;
}
.bd-marquee__track span {
  flex: none;
  padding-right: calc(var(--u) * 12);
  font-size: calc(var(--u) * 34);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.08);
}
@keyframes bd-marquee { to { transform: translateX(-50%); } }

/* --- quiet structure around the phone: outlines only, no wash --- */
.bd-ring {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.bd-ring--1 { width: calc(var(--pw) * 1.9); aspect-ratio: 1; }
.bd-ring--2 { width: calc(var(--pw) * 3.1); aspect-ratio: 1; border-style: dashed; border-color: rgba(255, 255, 255, 0.05); animation: bd-spin 90s linear infinite; }
@keyframes bd-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* two published results, set diagonally so the pair balances the cards */
.bd-stat {
  position: absolute; z-index: 1;
  display: grid; gap: calc(var(--u) * 0.3);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.2);
  border-radius: calc(var(--u) * 1.4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  opacity: 0; translate: 0 calc(var(--u) * 2);
  transition: opacity 0.6s ease 0.4s, translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
}
.bd-stat b { font-size: calc(var(--u) * 3); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.bd-stat em { font-style: normal; font-size: calc(var(--u) * 1.4); color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.bd-stat--a { left: calc(50% + var(--pw) / 2 + var(--u) * 7); top: 9%; }
.bd-stat--b { right: calc(50% + var(--pw) / 2 + var(--u) * 15); top: 82%; }
.zoom__board.is-open .bd-stat { opacity: 1; translate: 0 0; }

.bd-caption {
  position: absolute; left: 50%; bottom: 4%; z-index: 2;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 0.9);
  transform: translateX(-50%);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.8);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(var(--u) * 1.45); white-space: nowrap;
}
.bd-caption i { width: calc(var(--u) * 0.8); height: calc(var(--u) * 0.8); border-radius: 50%; background: #7d40ff; box-shadow: 0 0 0 calc(var(--u) * 0.5) rgba(125, 64, 255, 0.28); animation: bd-live 1.8s ease-in-out infinite; }
@keyframes bd-live { 50% { opacity: 0.4; } }

@media (max-width: 1023px) {
  /* no room either side: the phone carries the board on its own */
  .bd { --u: min(0.86cqh, 1.3cqw); }
  .bd-card, .bd-stat, .bd-ring--2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-phone, .bd-card, .bd-ring--2, .bd-caption i, .bd-marquee__track { animation: none; }
  .bd .ui__feat, .bd .ui__feat.is-on, .bd-card, .bd-card__i, .bd-card__label, .bd-card__bars i, .bd-card__go svg { transition: none; }
}

/* ------------------------------- heads ------------------------------- */

.head { display: flex; flex-direction: column; align-items: center; text-align: center; }

.head__title {
  font-size: var(--text-t1);
  line-height: var(--lh-t1);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-display);
}
.head__text { margin-top: 12px; font-size: var(--text-body-base); line-height: var(--lh-body-base); }
.head__btn { margin-top: 14px; }

/* =======================================================================
   PAGE BODY SECTIONS — trust, jobs, wides, cases, compare, integrations,
   calculator, steps, extras. Shared primitives first.
   ======================================================================= */

:root {
  --lav: #e4e0fb;
  --rose: #fbdde6;
  --blush: #f8e3e0;
  --peach: #fbe6d4;
  --mint: #dbf2e4;
  --violet: #6d5cf6;
  --grape: #8b5cf6;
  --indigo: #4f46e5;
  --ink: #101014;
  --purple-deep: #2a1a5e;
}

/* --- shared: eyebrow, heads, reveal, link ----------------------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 11px;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.6);
  font-size: var(--text-label-xs); font-weight: var(--fw-med);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--shade-600);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 3px rgba(125,64,255,0.25);
}
.eyebrow--light {
  border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}

.head--left { align-items: flex-start; text-align: left; }
.head--tight .head__title { max-width: 20ch; }
.head--left .head__title { max-width: 24ch; }
.head .eyebrow { margin-bottom: 18px; }
.head--left .head__text { max-width: 52ch; }
.head__title em { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }


/* scroll reveal — one transition, staggered by a modifier */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.btn--ghost-light {
  background: transparent; border-color: rgba(255,255,255,0.3); color: var(--white);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }

/* ------------------------------- trust ------------------------------- */

.trust { padding-block: 72px 72px; background: #fff; border-top: 1px solid rgba(0,0,0,0.06); overflow: hidden; }

/* Everything after the stage rides above it. The first section is pulled up
   into the stage's final 100vh, so as the board holds pinned the page scrolls
   up and covers it like a sheet. Positioned with a z-index, or the static
   sections would paint underneath the sticky pin. */
.zoom ~ section,
.zoom ~ footer { position: relative; z-index: 4; }
.zoom + .trust {
  margin-top: -100vh;
  border-top: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.35);
}
.trust__head {
  position: relative;
  display: grid; grid-template-columns: 1fr; justify-items: center;
  max-width: 1240px; margin-inline: auto; text-align: center;
}
.trust__title {
  max-width: 30ch;
  font-size: clamp(34px, 4.2vw, 60px); line-height: 1.02;
  color: #0a0a0a;
  text-wrap: balance;
}
.trust__sub {
  max-width: 62ch; margin: 18px auto 0; text-align: center;
  font-size: 17px; line-height: 1.5; color: #4a4a50;
}

/* hand-drawn arrows either side of the heading; they draw themselves in */
.trust__arrow {
  position: absolute; top: 50%;
  width: 56px; height: 130px; margin-top: -65px;
  fill: none; stroke: #2b2b2e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  display: none;
}
.trust__arrow--l { left: 0; }
.trust__arrow--r { right: 0; width: 64px; }
.trust__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.trust__arrow path + path { transition-delay: 1.1s; transition-duration: 0.45s; }
.trust__arrow.is-in path { stroke-dashoffset: 0; }
/* the reveal's own lift would fight the drawing, so the arrows only fade */
.trust__arrow.reveal { transform: none; }

/* the brands roll past as wordmarks, fading out at both edges */
.trust__marquee {
  display: flex; overflow: hidden; margin-top: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.trust__track {
  display: flex; flex: none; align-items: center; gap: 72px; padding-right: 72px;
  list-style: none; margin: 0;
  animation: trust-roll 38s linear infinite;
}
.trust__marquee:hover .trust__track { animation-play-state: paused; }
@keyframes trust-roll { to { transform: translateX(-100%); } }

.twm { flex: none; white-space: nowrap; line-height: 1; }
.twm--bf { font-family: "Phudu", var(--font-sans); font-weight: 700; font-size: 30px; text-transform: uppercase; letter-spacing: 0.02em; color: #1f3a5f; }
.twm--fc { font-family: var(--font-serif); font-style: italic; font-size: 36px; color: #c23b6c; }
.twm--mv { font-family: var(--font-sans); font-weight: 900; font-size: 30px; letter-spacing: 0.24em; color: #141416; }
.twm--ms { font-family: "Plus Jakarta Sans", var(--font-sans); font-weight: 700; font-size: 29px; letter-spacing: -0.03em; color: #0f8f7d; }
.twm--pm { font-family: "Plus Jakarta Sans", var(--font-sans); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: #7d40ff; }


@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }
  .trust__arrow path { stroke-dashoffset: 0; transition: none; }
}

/* ------------------------------- jobs ------------------------------- */

/* the page background is what lets this section cover the pinned board as
   it scrolls up over it; without it the board shows through */
.jx { padding-top: 88px; padding-bottom: 40px; background: #fff; }

.jx__head { max-width: 780px; }
.jx__title {
  margin-top: 18px;
  font-size: clamp(38px, 5vw, 72px); line-height: 1.02;
  font-weight: 800; letter-spacing: -0.04em; color: var(--black);
  text-wrap: balance;
}
.jx__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: #7d40ff; }
.jx__lede { margin-top: 16px; max-width: 44ch; font-size: 18px; line-height: 1.5; color: var(--shade-600); }

.jx__body { position: relative; display: grid; grid-template-columns: 1fr; margin-top: 48px; }

/* --- the story: one job per step, the one in view lit --- */
.jx__steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 40px; }
.jx__rail { position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(10, 10, 10, 0.08); }
.jx__rail i {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background: #7d40ff;
  transform: scaleY(var(--jx-p, 0)); transform-origin: 50% 0;
}
.jx-step {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 62vh; padding-block: 32px;
  opacity: 0.3;
  transition: opacity 0.5s ease;
}
.jx-step.is-on { opacity: 1; }
/* the marker on the rail beside each job */
.jx-step::before {
  content: ""; position: absolute; left: -35px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 2px solid rgba(10, 10, 10, 0.18);
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.jx-step.is-on::before { border-color: #7d40ff; background: #7d40ff; box-shadow: 0 0 0 6px rgba(125, 64, 255, 0.16); }

.jx-step__n { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: #7d40ff; font-variant-numeric: tabular-nums; }
.jx-step__t {
  margin-top: 10px;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05;
  font-weight: 700; letter-spacing: -0.03em; color: var(--black);
}
.jx-step__p { margin-top: 14px; max-width: 42ch; font-size: 18px; line-height: 1.55; color: var(--shade-600); }
.jx-step__proof {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-top: 22px; padding: 10px 16px; border-radius: 14px;
  background: var(--white); border: 1px solid rgba(10, 10, 10, 0.07);
}
.jx-step__proof b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--black); }
.jx-step__proof span { font-size: 13px; color: var(--shade-500); }

/* --- the stage: one handset, the live job on its screen --- */
.jx__stage {
  position: sticky; top: 64px; z-index: 2; order: -1;
  height: 60vh; min-height: 420px;
  padding-bottom: 12px; background: #fff;
}
/* the stage as a ruled box, drawn like the footer's: a hairline frame with
   solid squares on its corners, no fill */
.jx__panel {
  position: relative; height: 100%;
  border: 1px solid #0b0a10;
  background: transparent;
}
.jx__sq { position: absolute; z-index: 4; width: 9px; height: 9px; background: #0b0a10; }
.jx__sq--tl { left: -5px; top: -5px; } .jx__sq--tr { right: -5px; top: -5px; }
.jx__sq--bl { left: -5px; bottom: -5px; } .jx__sq--br { right: -5px; bottom: -5px; }
.jx__big {
  position: absolute; left: 24px; top: 6px;
  font-size: clamp(110px, 16vw, 220px); font-weight: 800; line-height: 1;
  letter-spacing: -0.06em; color: rgba(11, 10, 16, 0.07);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s ease;
}
.jx__big.is-swap { opacity: 0; }

.jx__device {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(var(--jx-scale, 0.7));
  transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.jx__device .phone { box-shadow: 0 40px 80px -24px rgba(38, 20, 90, 0.45), 0 6px 18px rgba(10, 10, 10, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.jx__device .phone__mark { display: flex; justify-content: center; }
.jx__device .phone__mark img { display: block; height: 20px; width: auto; }

.jx-views { position: relative; flex: 1; min-height: 0; }
.jx-view {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.jx-view.is-on { opacity: 1; transform: none; transition-delay: 0.08s; }

/* job 05 belongs to the merchant: the handset steps aside for the dashboard */
.jx__dash {
  position: absolute; left: 50%; top: 50%;
  width: min(440px, 86%);
  transform: translate(-50%, -50%);
  opacity: 0; translate: 0 40px;
  transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.jx__panel[data-active="4"] .jx__device { opacity: 0; translate: 0 60px; }
.jx__panel[data-active="4"] .jx__dash { opacity: 1; translate: 0 0; }

/* the result of the job, popping in beside the handset */
.jx-chip {
  position: absolute; right: 22px; bottom: 60px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 9px; border-radius: 99px;
  background: var(--white); color: var(--black);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 16px 40px -12px rgba(38, 20, 90, 0.35);
  opacity: 0; transform: translateY(12px) scale(0.94);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jx-chip i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0c8a45; color: #fff; }
.jx-chip.is-on { opacity: 1; transform: none; transition-delay: 0.25s; }

.jx__dots { position: absolute; left: 50%; bottom: 18px; display: flex; gap: 6px; transform: translateX(-50%); }
.jx__dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(89, 45, 181, 0.25); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; }
.jx__dots i.is-on { width: 22px; background: #7d40ff; }

@media (prefers-reduced-motion: reduce) {
  .jx-step, .jx-step::before, .jx__big, .jx__device, .jx-view, .jx__dash, .jx-chip, .jx__dots i { transition: none; }
}

/* the handset palette, shared by the job story and the phones on the stage */
.jx,
.zoom__viewport,
.bd {
  --ph-violet: #7d40ff;
  --ph-violet-deep: #592db5;
  --ph-tint: #f2edff;
  --ph-green: #007d33;
  --ph-green-soft: #eafff4;
  --ph-ink: #0a0a0a;
  --ph-ink-2: #525252;
  --ph-ink-3: #6c6c6c;
  --ph-line: #e5e5e5;
  --ph-line-strong: #d4d4d4;
  --ph-sans: "Plus Jakarta Sans", var(--font-sans);
}

/* --- the handset ----------------------------------------------------- */
.phone {
  width: 292px; height: 548px; padding: 9px;
  border-radius: 46px;
  /* literal darks: this is the physical shell */
  background: linear-gradient(158deg, #3a3330 0%, #201a17 42%, #14100e 100%);
  box-shadow: 0 46px 90px rgba(10, 10, 10, 0.34), 0 6px 18px rgba(10, 10, 10, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.phone__screen {
  height: 100%; border-radius: 38px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.phone__status {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px 8px; font-size: 11.5px; font-weight: 600;
}
.phone__island {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 78px; height: 22px; border-radius: 999px; background: var(--ph-ink);
}
.phone__right { display: inline-flex; align-items: center; gap: 5px; }
.phone__sig { display: inline-flex; align-items: flex-end; gap: 1.6px; }
.phone__sig i { width: 2.8px; background: currentColor; border-radius: 1px; }
.phone__sig i:nth-child(1) { height: 4px; }
.phone__sig i:nth-child(2) { height: 6.5px; }
.phone__sig i:nth-child(3) { height: 9px; }
.phone__sig i:nth-child(4) { height: 11px; opacity: 0.35; }
.phone__batt {
  position: relative; display: inline-flex; align-items: center;
  width: 21px; height: 11px; padding: 1.4px;
  border: 1.2px solid currentColor; border-radius: 3px; opacity: 0.9;
}
.phone__batt::after {
  content: ""; position: absolute; right: -3px; top: 50%; margin-top: -2px;
  width: 1.6px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor;
}
.phone__batt i { display: block; width: 72%; height: 100%; border-radius: 1.5px; background: currentColor; }
.phone__bar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 6px 16px 10px; border-bottom: 1px solid var(--ph-line);
}
.phone__back { display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: var(--ph-ink-2); }
.phone__mark { flex: 1; text-align: center; font-size: 14.5px; letter-spacing: -0.01em; }
.phone__avatar {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; background: var(--ph-tint); color: var(--ph-ink-2);
  font-size: 10.5px; font-weight: 600;
}
.phone__view {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px 18px;
}

/* --- the screens ----------------------------------------------------- */
.ph-head { display: block; }
.ph-kicker { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ph-violet); }
.ph-title { display: block; margin-top: 2px; font-weight: 700; font-size: 25px; line-height: 1.05; letter-spacing: -0.03em; }

.ph-item {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 11px;
  background: #fff; border: 1px solid var(--ph-line);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 6px 14px rgba(10, 10, 10, 0.04);
}
.ph-thumb {
  display: block; width: 38px; height: 38px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(160deg, #f6f4fb 0%, #ebe7f4 100%);
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.05);
}
.ph-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; }
.ph-item__text { display: grid; gap: 1px; min-width: 0; }
.ph-item__text b { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.ph-item__text em { font-style: normal; font-size: 10.5px; color: var(--ph-ink-2); }
.ph-item__price { font-size: 11.5px; font-weight: 600; }

.ph-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ph-ink-3); }
.ph-sizes { display: flex; gap: 7px; }
.ph-size {
  flex: 1; padding: 9px 0; border-radius: 8px; text-align: center;
  border: 1px solid var(--ph-line-strong); background: #fff;
  font-size: 12px; font-weight: 600;
}
.ph-size.is-on { background: var(--ph-ink); border-color: var(--ph-ink); color: #fafafa; }
.ph-size.is-out { color: var(--ph-ink-3); text-decoration: line-through; background: var(--ph-tint); }
.ph-delta {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 9px; border-top: 1px solid var(--ph-line);
  font-size: 11.5px; color: var(--ph-ink-2);
}
.ph-delta__n { font-weight: 600; color: var(--ph-green); }

.ph-offer {
  position: relative; display: grid; gap: 2px;
  padding: 14px; border-radius: 10px;
  background: var(--ph-ink); color: #fafafa;
}
.ph-offer__tag {
  position: absolute; top: 11px; right: 11px;
  padding: 3px 7px; border-radius: 999px;
  background: var(--ph-green); color: #fff;
  font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.ph-offer__n { font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.03em; }
.ph-offer__sub { font-size: 10.5px; color: #b8b8b8; }
.ph-alt { display: grid; gap: 6px; }
.ph-alt span {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--ph-tint); color: var(--ph-ink-2); font-size: 11px;
}

.ph-field {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--ph-line);
}
.ph-field__k { font-size: 10px; color: var(--ph-ink-3); }
.ph-field span:last-child { font-size: 11.5px; text-align: right; }
.ph-field--warn span:last-child { color: var(--ph-violet-deep); }
.ph-field--warn i {
  margin-left: 6px; padding: 2px 6px; border-radius: 999px;
  background: var(--ph-tint); color: var(--ph-violet-deep);
  font-style: normal; font-size: 9px;
}
.ph-ok {
  display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 9px;
  padding: 10px; border-radius: 9px; background: var(--ph-green-soft);
}
.ph-ok__i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ph-green); color: #fff; }
.ph-ok b { display: block; font-size: 11.5px; font-weight: 600; }
.ph-ok em { font-style: normal; font-size: 10px; color: var(--ph-ink-2); }

.ph-btn {
  display: block; width: 100%; margin-top: 4px; padding: 11px;
  border: 1px solid transparent; border-radius: 9px;
  background: var(--ph-violet); color: #fff;
  font-size: 12.5px; font-weight: 600; text-align: center;
}
.ph-btn--ghost { margin-top: 6px; background: transparent; color: var(--ph-ink-2); border-color: var(--ph-line-strong); }
.ph-fine { font-size: 9.5px; color: var(--ph-ink-3); text-align: center; }



/* same-box upsell card inside the screen */
.ph-promo {
  display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 11px;
  padding: 11px; border-radius: 10px;
  background: #fff; border: 1px solid var(--ph-line);
}
.ph-thumb--lg { width: 48px; height: 48px; border-radius: 11px; }
.ph-promo__text { display: grid; gap: 1px; }
.ph-promo__text b { font-size: 12px; font-weight: 600; }
.ph-promo__text em { font-style: normal; font-size: 10.5px; color: var(--ph-ink-2); }
.ph-promo__price { margin-top: 2px; font-size: 17px; font-weight: 700; color: var(--ph-violet); }

/* --- the merchant dashboard ------------------------------------------
   Analytics is the one merchant-facing feature, so it gets a dashboard
   rather than a handset: in a phone it would say the wrong thing about who
   uses it. */
.mdash {
  position: relative;
  display: grid; gap: 12px; padding: 16px;
  background: #fff; border: 1px solid var(--ph-line); border-radius: 14px;
  box-shadow: 0 24px 60px -26px rgba(10, 10, 10, 0.35);
}
.mdash__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mdash__title { font-size: 14px; font-weight: 600; }
.mdash__pill { padding: 2px 9px; border-radius: 999px; background: var(--ph-tint); color: var(--ph-ink-3); font-size: 11px; }
.mdash__figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mdash__n { display: block; font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mdash__l { display: block; margin-top: 3px; font-size: 11px; color: var(--ph-ink-3); }
.mdash__chart {
  display: flex; align-items: flex-end; gap: 5px; height: 68px;
  padding-top: 8px; border-top: 1px solid var(--ph-line);
}
.mdash__chart i { flex: 1; border-radius: 3px 3px 0 0; background: var(--ph-violet); opacity: 0.28; }
.mdash__chart i:last-child { opacity: 0.85; }
.mdash__rows { display: grid; gap: 1px; background: var(--ph-line); border-radius: 6px; overflow: hidden; }
.mdash__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: #fff;
  font-size: 13px; color: var(--ph-ink-2);
}
.mdash__row b { color: var(--ph-ink); font-variant-numeric: tabular-nums; }

/* ------------------------------- cases -------------------------------
   Editorial "work" layout: a big centred heading over one ruled row of
   number | photo | story. The row pins while its track scrolls, and each
   stretch of the scroll brings the next study in. */

.wk { --wk-ink: #ffffff; --wk-ground: #0b0a10; background: var(--wk-ground); color: var(--wk-ink); }
.wk__track { position: relative; height: calc(var(--n) * 90vh + 10vh); }
.wk__pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  /* heading and row sit centred in the pinned screen, so the space above
     and below them is even rather than all piling up underneath */
  display: grid; grid-template-rows: auto auto; align-content: center;
  padding-block: 40px;
}

.wk__plus { position: absolute; width: 20px; height: 20px; pointer-events: none; }
.wk__plus::before, .wk__plus::after { content: ""; position: absolute; background: var(--wk-ink); opacity: 0.6; }
.wk__plus::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.wk__plus::after { top: 50%; left: 0; right: 0; height: 1px; }
.wk__plus--tl { left: 12px; top: 12px; } .wk__plus--tc { left: calc(50% - 10px); top: 12px; } .wk__plus--tr { right: 12px; top: 12px; }

.wk__heading {
  padding-inline: var(--pad); text-align: center;
  font-size: clamp(44px, 7.2vw, 128px); line-height: 0.9;
  color: var(--wk-ink);
}

/* the row: rules top and bottom, slides stacked inside it */
.wk__row {
  position: relative; align-self: start;
  height: min(58vh, 560px); margin-top: clamp(28px, 5vh, 56px);
  border-top: 1px solid var(--wk-ink); border-bottom: 1px solid var(--wk-ink);
}
.wk__slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 28% 44% 28%;
  visibility: hidden;
  transition: visibility 0s linear 0.7s;
}
.wk__slide.is-on { visibility: visible; transition-delay: 0s; }

.wk__left, .wk__right { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 18px 16px; }

.wk__num {
  display: block;
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(56px, 6vw, 96px); line-height: 0.9; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(40%);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wk__btn {
  align-self: flex-start;
  padding: 7px 10px; border: 1px solid var(--wk-ink); color: var(--wk-ink);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s ease, background 0.2s ease, color 0.2s ease;
}
.wk__btn:hover { background: var(--wk-ink); color: var(--wk-ground); }

.wk__media {
  margin: 0; overflow: hidden;
  border-left: 1px solid var(--wk-ink); border-right: 1px solid var(--wk-ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.wk__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.wk__meta, .wk__title, .wk__text, .wk__stats {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wk__meta { font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; }
.wk__title { font-size: clamp(22px, 1.8vw, 30px); line-height: 1.05; color: var(--wk-ink); }
.wk__text { margin-top: 10px; max-width: 46ch; font-size: 13px; line-height: 1.55; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.wk__stats { display: flex; gap: 28px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.wk__stats dd { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.wk__stats dt { margin-top: 4px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* the live study: photo wipes down, number rises, copy follows */
.wk__slide.is-on .wk__media { clip-path: inset(0 0 0 0); }
.wk__slide.is-on .wk__media img { transform: scale(1); }
.wk__slide.is-on .wk__num { opacity: 1; transform: none; }
.wk__slide.is-on .wk__btn { opacity: 1; transition-delay: 0.3s; }
.wk__slide.is-on .wk__meta { opacity: 1; transform: none; transition-delay: 0.15s; }
.wk__slide.is-on .wk__title { opacity: 1; transform: none; transition-delay: 0.25s; }
.wk__slide.is-on .wk__text { opacity: 1; transform: none; transition-delay: 0.33s; }
.wk__slide.is-on .wk__stats { opacity: 1; transform: none; transition-delay: 0.41s; }
/* the outgoing photo stays under the incoming one while it wipes in */
.wk__slide.is-on .wk__media { position: relative; z-index: 1; }

.wk__progress {
  position: absolute; left: 18px; top: calc(18px + clamp(56px, 6vw, 96px) + 14px); z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.wk__progress i { position: relative; width: 90px; height: 1px; background: rgba(255, 255, 255, 0.2); }
.wk__progress b { position: absolute; inset: 0; background: var(--wk-ink); transform: scaleX(var(--wk-p, 0.2)); transform-origin: 0 50%; transition: transform 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .wk__slide, .wk__num, .wk__btn, .wk__media, .wk__media img, .wk__meta, .wk__title, .wk__text, .wk__stats, .wk__progress b { transition: none; }
}

/* ---------------------------- comparison ----------------------------
   Continues the dark ground of the work section. The heading holds still
   on the left while six rows scroll on the right; each row gives the job,
   Account Editor's tick, and the three alternatives as tags that are either
   lit (they manage it) or struck through (they don't). */

.vsx {
  padding-block: clamp(80px, 12vh, 140px);
  background: #0b0a10; color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.vsx__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.vsx__title { max-width: 12ch; font-size: clamp(40px, 5vw, 84px); line-height: 0.92; color: #fff; }
.vsx__lede { margin-top: 20px; max-width: 38ch; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); }
.vsx__score { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 14px; margin-top: 32px; }
.vsx__score b { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #a98bff; }
.vsx__score b.is-dim { font-size: 28px; color: rgba(255, 255, 255, 0.4); }
.vsx__score span { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

.vsx__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.vsx__row {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px 16px;
  padding: 22px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.25s ease;
}
.vsx__row:hover { background: rgba(255, 255, 255, 0.03); }
.vsx__n { font-size: 12.5px; color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; }
.vsx__feat { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.01em; }
.vsx__us {
  display: inline-flex; align-items: center; gap: 8px; justify-self: end;
  padding: 7px 12px 7px 8px; border-radius: 99px;
  background: #7d40ff; color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.vsx__us svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #fff; fill: none; stroke: #7d40ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.vsx__alts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.vsx__alts li { padding: 4px 10px; border-radius: 99px; font-size: 12px; white-space: nowrap; }
.vsx__alts .is-yes { border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); }
.vsx__alts .is-no { border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.32); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.28); }

/* --------------------------- integrations ---------------------------
   The editorial language of the work section and the footer: a dark ground,
   a big centred heading, and two full-width ruled rows of partner logos set
   in white that roll past in opposite directions. */

.ig { padding-block: clamp(96px, 13vh, 140px); background: #0b0a10; color: #fff; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.1); }

.ig__kicker, .ig__lede { text-align: center; font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.ig__title {
  max-width: 17ch; margin: 18px auto 0; text-align: center;
  font-size: clamp(42px, 6.4vw, 112px); line-height: 0.92; color: #fff;
  text-wrap: balance;
}
.ig__lede { margin-top: 22px; }

.igx { margin-top: clamp(48px, 7vh, 72px); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.igx__row { display: flex; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.igx__track { display: flex; flex: none; margin: 0; padding: 0; list-style: none; animation: igx-left 40s linear infinite; }
.igx__row--right .igx__track { animation-name: igx-right; animation-duration: 46s; }
.igx__row:hover .igx__track { animation-play-state: paused; }
@keyframes igx-left { to { transform: translateX(-100%); } }
@keyframes igx-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.igx__cell {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 260px; height: 150px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.3s ease;
}
.igx__cell img {
  max-width: 150px; max-height: 32px; width: auto; height: auto; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.72;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.igx__cell span { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); transition: color 0.3s ease; }
.igx__cell:hover { background: #7d40ff; }
.igx__cell:hover img { opacity: 1; transform: scale(1.06); }
.igx__cell:hover span { color: rgba(255, 255, 255, 0.85); }

.ig__foot { display: flex; justify-content: center; margin-top: 44px; }
.ig__btn {
  padding: 12px 20px; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ig__btn:hover { background: #fff; border-color: #fff; color: #0b0a10; }

@media (prefers-reduced-motion: reduce) {
  .igx__track { animation: none; }
  .igx__cell, .igx__cell img, .ig__btn { transition: none; }
}

/* ---------------------------- calculator ---------------------------- */

.calc { padding-top: 78px; padding-bottom: 78px; background: var(--white); }
.calc__grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }

.calc__pane { padding: 28px 24px; border-radius: var(--r-card); background: var(--white-100); }
.calc__pane--dark {
  display: flex; flex-direction: column;
  background:
    radial-gradient(110% 80% at 90% 0%, rgba(125,64,255,0.16) 0%, rgba(125,64,255,0) 58%),
    linear-gradient(155deg, #1d1d24 0%, var(--ink) 100%);
  color: var(--white);
}

.calc__label { display: block; font-size: var(--text-body-base); font-weight: var(--fw-med); color: var(--shade-600); }
.calc__value {
  display: block; margin-top: 6px;
  font-size: var(--text-t2); line-height: 1.05; font-weight: var(--fw-display); letter-spacing: var(--ls-display);
}

.calc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin-top: 20px;
  border-radius: 3px; background: rgba(0,0,0,0.12); cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--lime); border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.calc__range::-moz-range-thumb {
  width: 24px; height: 24px; border: 3px solid var(--white); border-radius: 50%;
  background: var(--lime); box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.calc__rows { margin-top: 24px; display: grid; }
.calc__rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-block: 12px; border-top: 1px solid rgba(0,0,0,0.08);
}
.calc__rows span { font-size: var(--text-body-base); color: var(--shade-600); }
.calc__rows b { font-size: var(--text-body-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.calc__rows--dark li { border-top-color: rgba(255,255,255,0.12); }
.calc__rows--dark span { color: rgba(255,255,255,0.6); }
.calc__rows--dark b { color: var(--white); }

.calc__cap { font-size: var(--text-body-sm); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.calc__big {
  margin-top: 8px; font-size: var(--text-dsp); line-height: 1;
  font-weight: var(--fw-display); letter-spacing: var(--ls-display); color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.calc__btn { align-self: flex-start; margin-top: auto; }
.calc__pane--dark .calc__rows { margin-bottom: 26px; }

/* ------------------------------- steps -------------------------------
   The ruled-box language of the footer and the job stage: one hairline
   frame with square corners, split into four columns. The column under the
   pointer draws a violet line along its top. */

.steps { padding-top: 88px; padding-bottom: 88px; background: var(--ink); color: var(--white); }
.steps .eyebrow { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.78); }
.steps .head__title { color: var(--white); max-width: 16ch; }

.stx__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.stx__total { display: grid; gap: 4px; text-align: right; }
.stx__total b { font-size: clamp(34px, 3.4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #a98bff; }
.stx__total span { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

.stx { position: relative; margin-top: 48px; border: 1px solid rgba(255,255,255,0.28); }
.stx__sq { position: absolute; z-index: 2; width: 9px; height: 9px; background: #fff; }
.stx__sq--tl { left: -5px; top: -5px; } .stx__sq--tr { right: -5px; top: -5px; }
.stx__sq--bl { left: -5px; bottom: -5px; } .stx__sq--br { right: -5px; bottom: -5px; }


.stx__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.stx__col { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; transition: background 0.3s ease; }
/* only the column under the pointer gets the violet line along its top */
.stx__col::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: #7d40ff;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.stx__col:hover::before { transform: scaleX(1); }
.stx__col + .stx__col { border-top: 1px solid rgba(255,255,255,0.18); }
.stx__col:hover { background: rgba(255,255,255,0.03); }

.stx__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stx__n { font-size: clamp(48px, 4.2vw, 72px); font-weight: 500; line-height: 0.9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.stx__time {
  margin-top: 6px; padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255,255,255,0.8);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.stx__col:hover .stx__time { background: #7d40ff; border-color: #7d40ff; color: #fff; }

.stx__t { margin-top: 28px; font-size: clamp(24px, 1.9vw, 30px); line-height: 1.02; color: #fff; }
.stx__c { margin-top: 12px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.6); }

.stx__shot { margin: auto 0 0; padding-top: 24px; overflow: hidden; }
.stx__shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1320; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.stx__col:hover .stx__shot img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .stx__col, .stx__col::before, .stx__time, .stx__shot img { transition: none; }
}


/* the steps board pins itself, and the four columns arrive from the right
   one after another as the track is scrolled */
.steps { padding-block: 0; overflow: visible; }
.steps__pin { padding-block: var(--sec-y); }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .steps__track { height: calc(var(--n, 4) * 46vh + 30vh); }
  .steps__pin {
    position: sticky; top: 0;
    height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(32px, 5vh, 64px);
  }
  .steps__pin .stx { margin-top: clamp(20px, 3vh, 40px); }
  .steps__pin .stx__col { padding: clamp(14px, 2vh, 24px) clamp(14px, 1.4vw, 24px); }
  .steps__pin .stx__n { font-size: clamp(30px, 4vh, 56px); }
  .steps__pin .stx__t { margin-top: clamp(10px, 1.6vh, 22px); font-size: clamp(18px, 2.2vh, 26px); }
  .steps__pin .stx__c { margin-top: 8px; font-size: clamp(12px, 1.5vh, 15px); }
  .steps__pin .stx__shot { padding-top: clamp(12px, 2vh, 22px); }
  .steps__pin .stx__ph { aspect-ratio: auto; height: clamp(90px, 20vh, 220px); }
}


/* no outer frame around the board; each step is its own card instead */
.stx { border: 0; }
.stx__sq { display: none; }
.stx__col + .stx__col { border-top: 0; }
.stx__col {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
  padding: 22px 20px 20px;
}
.stx__col:hover { border-color: rgba(255, 255, 255, 0.3); }
@media (min-width: 900px) {
  .stx__cols { gap: clamp(16px, 1.8vw, 28px); }
  .steps__pin .stx__col { padding: clamp(16px, 2.2vh, 26px) clamp(16px, 1.4vw, 24px); }
}

/* ------------------------------- extras -------------------------------
   An index of the four apps set huge, one per row. Pointing at a row sweeps
   violet up behind it and floats a small working preview of that app beside
   the cursor. */

.extras { position: relative; padding-top: 96px; padding-bottom: 96px; background: var(--ink); color: #fff; overflow: hidden; }

.exh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.exh__title { margin-top: 18px; font-size: clamp(40px, 5vw, 84px); line-height: 0.92; color: #fff; }
.exh__side { max-width: 36ch; }
.exh__side p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
.exh__side .exh__sum { margin-top: 14px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.exh__sum b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #a98bff; }
.exh__sum span { margin-inline: 6px; color: rgba(255, 255, 255, 0.3); }

.exl { list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.exl__row { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.exl__link {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px 20px;
  padding: 26px 8px; color: #fff;
}
/* the violet sweep behind a pointed-at row */
.exl__link::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: #7d40ff;
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.exl__link > * { position: relative; z-index: 1; }
.exl__n { font-size: 13px; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; transition: color 0.3s ease; }
.exl__name {
  font-size: clamp(40px, 7vw, 120px); line-height: 0.9; color: #fff;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.exl__meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.exl__desc { font-size: 15px; color: rgba(255, 255, 255, 0.6); transition: color 0.3s ease; }
.exl__tag {
  padding: 4px 9px; border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.exl__arrow {
  grid-column: 2; grid-row: 1;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, border-color 0.3s ease;
}
.exl__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.exl__row.is-on .exl__link::before { transform: scaleY(1); }
.exl__row.is-on .exl__name { transform: translateX(18px); }
.exl__row.is-on .exl__n, .exl__row.is-on .exl__desc { color: rgba(255, 255, 255, 0.9); }
.exl__row.is-on .exl__arrow { background: #fff; border-color: #fff; color: #7d40ff; transform: rotate(45deg); }
.exl__link:focus-visible { outline: 2px solid #a98bff; outline-offset: -2px; }

/* --- the floating preview --- */
.exl__preview {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 280px; height: 230px;
  pointer-events: none;
  opacity: 0; scale: 0.85;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg));
  transition: opacity 0.3s ease, scale 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.exl__preview.is-on { opacity: 1; scale: 1; }
.exp { font-size: 13px; box-shadow: 0 40px 80px -30px rgba(38, 20, 90, 0.4), 0 0 0 1px rgba(11, 10, 16, 0.06); }

.exp {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border-radius: 16px;
  background: #fff; color: #0b0a10;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 12px;
}
.exp.is-on { opacity: 1; transform: none; }
.exp__bar { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid #eee; font-size: 11px; font-weight: 600; color: #555; }
.exp__bar i { width: 8px; height: 8px; border-radius: 50%; background: #7d40ff; box-shadow: 0 0 0 3px rgba(125, 64, 255, 0.18); }
.exp__msg { align-self: flex-start; max-width: 85%; padding: 7px 10px; border-radius: 12px 12px 12px 4px; background: #f2edff; line-height: 1.35; }
.exp__msg--me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: #0b0a10; color: #fff; }
.exp__chips { display: flex; gap: 5px; }
.exp__chips span { flex: 1; padding: 5px 0; border: 1px solid #ddd; border-radius: 7px; text-align: center; font-weight: 600; }
.exp__chips .is-on { background: #7d40ff; border-color: #7d40ff; color: #fff; }
.exp__item { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid #eee; border-radius: 10px; }
.exp__item b { display: block; font-size: 12px; }
.exp__item em { font-style: normal; font-size: 11px; color: #777; }
.exp__item--new { border-color: #7d40ff; background: #f7f3ff; }
.exp__thumb { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #ffd9c7, #f29b79); flex: none; }
.exp__thumb--b { background: linear-gradient(135deg, #d7ccff, #7d40ff); }
.exp__note { margin-top: auto; font-size: 11px; font-weight: 600; color: #0c8a45; }
.exp__big { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.exp__track { position: relative; display: flex; justify-content: space-between; margin: 6px 8px 0; }
.exp__track::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: linear-gradient(90deg, #7d40ff 50%, #e4e4e4 50%); }
.exp__track span { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #ddd; }
.exp__track .is-done { background: #7d40ff; border-color: #7d40ff; }
.exp__caps { display: flex; justify-content: space-between; font-size: 10px; color: #777; }
.exp__btn { margin-top: auto; padding: 8px; border-radius: 8px; background: #7d40ff; color: #fff; text-align: center; font-weight: 600; }
.exp__feed { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #f0f0f0; }
.exp__feed:last-child { border-bottom: 0; }
.exp__feed i { width: 8px; height: 8px; border-radius: 50%; }
.exp__feed .c1 { background: #7d40ff; } .exp__feed .c2 { background: #0c8a45; } .exp__feed .c3 { background: #f0a020; }
.exp__feed b { font-size: 12px; font-weight: 600; }
.exp__feed em { font-style: normal; font-size: 11px; color: #999; }

/* touch screens: no pointer to follow, so the list stands on its own */
@media (hover: none) { .exl__preview { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .exl__link::before, .exl__name, .exl__arrow, .exl__preview, .exp { transition: none; }
}

/* ------------------------------- last CTA -------------------------------
   An editorial closing line set across the full width, with the products
   themselves tucked into it. The customer's own fix is underlined in violet
   as it scrolls in, and a slowly turning badge carries the install link. */

.last { position: relative; padding-top: 110px; padding-bottom: 90px; background: var(--ink); color: #fff; }

.lc__title {
  margin-top: 22px;
  font-size: clamp(44px, 6.6vw, 118px); line-height: 0.96;
  color: #fff;
}
.lc__pill {
  display: inline-flex; align-items: center; vertical-align: middle;
  height: 0.8em; padding: 0 0.12em; margin: -0.1em 0.08em 0;
  border-radius: 99px; background: #fff;
}
.lc__pill img {
  width: 0.66em; height: 0.66em; object-fit: contain; border-radius: 50%;
  background: #f2edff; padding: 0.06em; box-sizing: border-box;
}
.lc__pill img + img { margin-left: -0.14em; box-shadow: -0.03em 0 0 #fff; }
.lc__fix { position: relative; color: #a98bff; white-space: nowrap; }
.lc__fix::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.06em;
  background: #7d40ff;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}
.lc__title.is-in .lc__fix::after { transform: scaleX(1); }

.lc__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; margin-top: 48px; }
.lc__copy { max-width: 44ch; }
.lc__copy p { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.64); }
.lc__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.lc__badge { position: relative; display: grid; place-items: center; width: 168px; height: 168px; flex: none; color: #fff; }
.lc__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: lc-turn 18s linear infinite; }
.lc__ring text { font-size: 15px; font-weight: 600; fill: currentColor; }
.lc__core {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: #7d40ff; box-shadow: 0 20px 40px -14px rgba(125, 64, 255, 0.7);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.lc__arrow { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.lc__badge:hover .lc__core { transform: scale(1.1); background: #8b56ff; }
.lc__badge:hover .lc__arrow { transform: rotate(45deg); }
.lc__badge:hover .lc__ring { animation-duration: 6s; }
.lc__badge:focus-visible { outline: 2px solid #a98bff; outline-offset: 6px; border-radius: 50%; }
@keyframes lc-turn { to { transform: rotate(360deg); } }

.lc__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.lc__stats > div { padding: 20px 0 0; }
.lc__stats > div + div { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.lc__stats dt { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.lc__stats dd { margin: 0; display: flex; align-items: center; gap: 6px; padding-top: 6px; font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .lc__ring { animation: none; }
  .lc__fix::after { transform: scaleX(1); transition: none; }
  .lc__core, .lc__arrow { transition: none; }
}

/* ------------------------------- faq ------------------------------- */

.faq { padding-top: 78px; padding-bottom: 78px; background: var(--white); }

/* title on the left, the list holding its own column on the right */
.faq__in { display: grid; grid-template-columns: 1fr; gap: 20px; }

.faq__title { font-size: var(--text-body-base); line-height: var(--lh-body-base); font-weight: var(--fw-med); }

.faq__list { display: flex; flex-direction: column; }

.acc { position: relative; }

.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding-block: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.acc--last .acc__q { border-bottom: 1px solid var(--line); }

.acc__label { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-bold); }

.acc__sign { flex-shrink: 0; display: block; color: rgba(0,0,0,0.45); font-size: 12px; transition: transform 0.25s ease, color 0.2s ease; }
.acc:hover .acc__sign { color: var(--black); }
.acc__q[aria-expanded="true"] .acc__sign { transform: rotate(45deg); }

/* height animates 0fr → 1fr, no hardcoded max-height */
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; }
.acc__a.is-open { grid-template-rows: 1fr; }
.acc__a-in { overflow: hidden; min-height: 0; }
.acc__a-in p { padding-bottom: 14px; font-size: var(--text-body-base); line-height: var(--lh-body-base); color: var(--shade-600); }
.acc__a-in a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------- footer ------------------------------- */

/* ------------------------------- footer -------------------------------
   A poster in the brand violet: a ruled three-column box with square
   corner marks, registration crosses in the page corners, and the name set
   edge to edge underneath. Type is the site's own: Phudu and Inter. */
.ftr {
  --fg: #ffffff;
  /* the site's own body face for the small type */
  --mono: var(--font-sans);
  position: relative; z-index: 4; overflow: hidden;
  padding: 72px 36px 0;
  background: #7d40ff; color: var(--fg);
}
.ftr a { color: inherit; }

.ftr__plus { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.ftr__plus::before, .ftr__plus::after { content: ""; position: absolute; background: var(--fg); opacity: 0.55; }
.ftr__plus::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ftr__plus::after { top: 50%; left: 0; right: 0; height: 1px; }
.ftr__plus--tl { left: 14px; top: 14px; } .ftr__plus--tc { left: calc(50% - 11px); top: 14px; } .ftr__plus--tr { right: 14px; top: 14px; }
.ftr__plus--bl { left: 14px; bottom: 14px; } .ftr__plus--bc { left: calc(50% - 11px); bottom: 14px; } .ftr__plus--br { right: 14px; bottom: 14px; }

.ftr__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--fg);
}
.ftr__sq { position: absolute; width: 9px; height: 9px; background: var(--fg); }
.ftr__sq--tl { left: -5px; top: -5px; } .ftr__sq--tr { right: -5px; top: -5px; }
.ftr__sq--bl { left: -5px; bottom: -5px; } .ftr__sq--br { right: -5px; bottom: -5px; }

.ftr__cell { position: relative; padding: 34px 32px 40px; min-height: 0; }
.ftr__cell + .ftr__cell { border-top: 1px solid var(--fg); }

.ftr__cta {
  max-width: 11ch;
  font-size: clamp(40px, 4.4vw, 68px); line-height: 0.98;
  color: var(--fg);
}
.ftr__mono {
  margin-top: 28px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.45;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ftr__h { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ftr__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.ftr__list a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.3s ease;
}
.ftr__list a:hover { background-size: 100% 1px; }
.ftr__go { display: inline-flex; align-items: center; gap: 9px; }
.ftr__go i { width: 9px; height: 9px; background: currentColor; transition: transform 0.3s ease; }
.ftr__go:hover i { transform: rotate(45deg); }

.ftr__mono--label { margin-top: 34px; }
.ftr__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ftr__chips a {
  padding: 5px 9px; border: 1px solid var(--fg);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.ftr__chips a:hover, .ftr__chips a.is-on { background: var(--fg); color: #7d40ff; }

.ftr__dot { position: absolute; right: 22%; top: 76px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); animation: ftr-dot 3.2s ease-in-out infinite; }
@keyframes ftr-dot { 50% { transform: translate(-10px, 8px); } }

.ftr__mail { display: flex; align-items: flex-end; gap: 12px; max-width: 360px; margin-top: 36px; border-bottom: 1px solid var(--fg); padding-bottom: 9px; }
.ftr__mail input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--fg); outline: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
}
.ftr__mail input::placeholder { color: var(--fg); opacity: 1; }
.ftr__mail button {
  padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
}
.ftr__mail button:hover { text-decoration: underline; }
.ftr__mail:focus-within { border-bottom-width: 2px; padding-bottom: 8px; }

.ftr__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
}
.ftr__legal a:hover { text-decoration: underline; }

/* the name, set across the full width and running off the bottom edge */
.ftr__word {
  margin: 48px -10px 0;
  font-family: "Phudu", var(--font-sans); font-weight: 800;
  font-size: 14.3vw; line-height: 0.78; letter-spacing: -0.02em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--fg);
  transform: translateY(0.09em);
}
.ftr__slash { display: inline-block; margin-right: 0.04em; font-weight: 300; }

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

/* ------------------------------- popup ------------------------------- */

.popup {
  position: fixed;
  right: 16px; bottom: 16px; left: 16px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 48px rgba(6,6,8,0.14), 0 4px 8px rgba(24,24,27,0.07);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.popup.is-open { opacity: 1; transform: translateY(0); }
.popup[hidden] { display: none; }

.popup__close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--shade-500); }
.popup__close:hover { color: var(--black); }
.popup__app { display: flex; align-items: center; gap: 10px; padding-right: 22px; }
.popup__icon { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.06); }
.popup__name { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.2; }
.popup__rating { margin-top: 2px; font-size: 12px; color: var(--shade-500); }
.popup__stars { color: #f5b400; letter-spacing: 1px; }
.popup__text { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); color: var(--shade-600); }
.popup__list { display: flex; flex-wrap: wrap; gap: 6px; }
.popup__list li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 99px;
  background: #f2edff; color: #592db5;
  font-size: 12px; font-weight: var(--fw-med);
}
.popup__list svg { color: #7d40ff; }
.popup__cta { align-self: stretch; justify-content: center; gap: 6px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----------------------- faq polish (new layout) ----------------------- */

.faq__title { font-size: var(--text-t2); line-height: 1.06; font-weight: var(--fw-display); letter-spacing: var(--ls-display); }
.faq__list { margin-top: 4px; }

/* a wash that grows behind the row on hover, under the text */
.acc__hover {
  position: absolute; inset: 0 -14px; z-index: 0;
  border-radius: 14px; background: var(--white-100);
  opacity: 0; transform: scaleY(0.82);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.acc:hover .acc__hover { opacity: 1; transform: none; }
.acc__z { position: relative; z-index: 1; }

/* ------------------------- site-wide headings -------------------------
   Every heading on the page shares one voice: Barlow Semi Condensed at a
   semibold weight, in the case it was written. (Phudu has no lowercase.) Placed last so it settles over each section's own
   weight and tracking; sizes stay with the sections. Phudu is condensed,
   so the tight negative tracking the old face needed is dropped. */
h1, h2, h3, h4,
.hero__title, .jx__title, .jx-step__t, .trust__title,
.head__title, .ig__title, .wk__heading, .wk__title, .vsx__title, .stx__t,
.exh__title, .exl__name, .faq__title, .lc__title {
  font-family: "Barlow Semi Condensed", var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* emphasised words keep their colour but no longer switch face */
:is(h1, h2, h3, h4, .hero__title, .jx__title, .jx-step__t, .trust__title, .head__title, .ig__title, .wk__heading, .wk__title, .vsx__title, .stx__t, .exh__title, .exl__name, .faq__title, .lc__title) em {
  font: inherit;
  letter-spacing: inherit;
}

/* visually hidden, still read aloud */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------- footer reveal ---------------------------
   When the footer fits the screen it is fixed behind the page, and the body
   reserves its height at the bottom. The last section scrolls up off it like
   a curtain, and the footer's contents settle into place as it opens. The
   script only turns this on when the footer is no taller than the window. */
html.ftr-reveal body { padding-bottom: var(--ftr-h, 0px); }
html.ftr-reveal .ftr { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; }
/* everything above the footer paints over it: the hero and the pinned stage
   had transparent stretches (the stage's tall track) it showed through */
html.ftr-reveal .hero { position: relative; z-index: 3; background-color: var(--black); }
html.ftr-reveal .zoom { position: relative; z-index: 2; background-color: var(--black); }
/* and it stays hidden until the page actually starts to uncover it */
html.ftr-reveal .ftr.is-hidden { visibility: hidden; }
html.ftr-reveal .ftr__grid,
html.ftr-reveal .ftr__legal,
html.ftr-reveal .ftr__word {
  transform: translate3d(0, calc((1 - var(--fr, 1)) * -90px), 0);
  opacity: calc(0.35 + var(--fr, 1) * 0.65);
  will-change: transform, opacity;
}
/* the section lifting off it throws a soft shadow onto the footer */
html.ftr-reveal .last { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
@media (prefers-reduced-motion: reduce) {
  html.ftr-reveal .ftr__grid, html.ftr-reveal .ftr__legal, html.ftr-reveal .ftr__word { transform: none; opacity: 1; }
}

/* ======================================================================
   Today's work — these blocks come after the originals above, so they are
   the ones that take effect.
   ====================================================================== */

/* the app plays inside a handset, the same one the hero uses */
.exs__left { display: flex; flex-direction: column; align-items: center; }
.exs__stage { position: relative; width: 100%; }
.exs__phone {
  --phone-w: min(330px, 78vw);
  position: relative; width: var(--phone-w); margin-inline: auto;
  aspect-ratio: 740 / 1520;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.65));
}
.exs__bezel { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.exs__screen {
  position: absolute; z-index: 1;
  left: 4.73%; top: 2.11%; width: 90.54%; height: 95.79%;
  border-radius: calc(var(--phone-w) * 0.126);
  overflow: hidden; background: #fff;
  container-type: inline-size;
}

/* the app playing inside the handset: a real, light product screen */
.exp {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 3cqw;
  padding: 4cqw 4.5cqw 0; font-size: 4cqw;
  background: #fff; color: #14131a;
}

/* status bar and the app's own header */
.exp__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1cqw 2cqw 0; font-size: 3.4cqw; font-weight: 600; color: #14131a;
}
.exp__sig { display: inline-flex; align-items: flex-end; gap: 0.8cqw; }
.exp__sig i { width: 1.1cqw; background: #14131a; border-radius: 0.4cqw; }
.exp__sig i:nth-child(1) { height: 1.6cqw; } .exp__sig i:nth-child(2) { height: 2.4cqw; } .exp__sig i:nth-child(3) { height: 3.2cqw; }

.exp__app { display: flex; align-items: center; gap: 2.6cqw; padding-bottom: 3cqw; border-bottom: 1px solid rgba(20, 19, 26, 0.1); }
.exp__app img { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; }
.exp__app b { display: block; font-size: 4cqw; font-weight: 600; }
.exp__app em { display: block; margin-top: 0.4cqw; font-style: normal; font-size: 3.2cqw; letter-spacing: 0.04em; text-transform: uppercase; color: #7d40ff; }

.exp__ttl { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; font-size: 4.6cqw; font-weight: 600; }
.exp__ttl em { font-style: normal; font-size: 3cqw; letter-spacing: 0.06em; text-transform: uppercase; color: #7d40ff; }

/* chat */
.exp__msg {
  align-self: flex-start; max-width: 88%; padding: 3cqw 3.6cqw;
  border-radius: 3.6cqw 3.6cqw 3.6cqw 1.2cqw; line-height: 1.4; font-size: 3.8cqw;
  background: #f2edff; color: #241a3d;
}
.exp__msg--me { align-self: flex-end; border-radius: 3.6cqw 3.6cqw 1.2cqw 3.6cqw; background: #14131a; color: #fff; }

.exp__chips { display: flex; gap: 1.8cqw; }
.exp__chips span {
  flex: 1; padding: 3cqw 0; text-align: center; font-weight: 600; font-size: 3.8cqw;
  border: 1px solid rgba(20, 19, 26, 0.16); border-radius: 2.2cqw; color: #14131a;
}
.exp__chips .is-on { background: #7d40ff; border-color: #7d40ff; color: #fff; }
.exp__chips--sm span { padding: 2.4cqw 0; font-size: 3.4cqw; }

.exp__ok {
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 3cqw 3.4cqw; border-radius: 2.4cqw;
  font-size: 3.6cqw; font-weight: 500; color: #241a3d; background: #f2edff;
}
.exp__tick { flex: none; position: relative; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: #7d40ff; }
.exp__tick::after {
  content: ""; position: absolute; left: 1.5cqw; top: 1.6cqw; width: 2.2cqw; height: 1.1cqw;
  border-left: 0.5cqw solid #fff; border-bottom: 0.5cqw solid #fff; transform: rotate(-45deg);
}
.exp__input {
  display: flex; align-items: center; justify-content: space-between; gap: 3cqw;
  margin-top: auto; padding: 3.2cqw 4cqw; border-radius: 999px;
  border: 1px solid rgba(20, 19, 26, 0.14); font-size: 3.4cqw; color: rgba(20, 19, 26, 0.45);
}
.exp__input b { font-size: 3.4cqw; font-weight: 600; color: #7d40ff; }

/* rows of things in the order */
.exp__item {
  display: flex; align-items: center; gap: 3cqw; padding: 3cqw;
  border: 1px solid rgba(20, 19, 26, 0.12); border-radius: 2.6cqw;
}
.exp__item b { display: block; font-size: 3.8cqw; font-weight: 600; }
.exp__item em { display: block; font-style: normal; font-size: 3.2cqw; color: rgba(20, 19, 26, 0.5); }
.exp__item--new { border-color: #7d40ff; background: #f7f3ff; }
.exp__thumb { flex: none; width: 10cqw; height: 10cqw; border-radius: 2.2cqw; background: linear-gradient(135deg, #ffd9c7, #f29b79); }
.exp__thumb--b { background: linear-gradient(135deg, #d7ccff, #7d40ff); }
.exp__thumb--c { background: linear-gradient(135deg, #cfe6ff, #7aa7ff); }

.exp__track { position: relative; display: flex; justify-content: space-between; margin: 2cqw 2cqw 0; }
.exp__track::before { content: ""; position: absolute; left: 0; right: 0; top: 1.4cqw; height: 0.6cqw; background: linear-gradient(90deg, #7d40ff 50%, rgba(20, 19, 26, 0.12) 50%); }
.exp__track span { position: relative; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: rgba(20, 19, 26, 0.14); }
.exp__track .is-done { background: #7d40ff; }
.exp__caps { display: flex; justify-content: space-between; font-size: 2.9cqw; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(20, 19, 26, 0.45); }

.exp__feed {
  display: grid; grid-template-columns: 3cqw 1fr auto; align-items: center; gap: 2.6cqw;
  padding: 3cqw 0; border-bottom: 1px solid rgba(20, 19, 26, 0.08); font-size: 3.6cqw;
}
.exp__feed:last-of-type { border-bottom: 0; }
.exp__feed i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; }
.exp__feed .c1 { background: #7d40ff; } .exp__feed .c2 { background: #12a05c; } .exp__feed .c3 { background: #e08b12; }
.exp__feed b { font-size: 3.7cqw; font-weight: 600; }
.exp__feed em { font-style: normal; font-size: 3.2cqw; color: rgba(20, 19, 26, 0.45); }

.exp__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 3cqw;
  margin-top: auto; padding-top: 3cqw; border-top: 1px solid rgba(20, 19, 26, 0.1);
  font-size: 3.4cqw; color: rgba(20, 19, 26, 0.55);
}
.exp__row b { font-family: "Phudu", var(--font-sans); font-weight: 500; font-size: 6cqw; color: #14131a; }
.exp__btn { padding: 3.8cqw; border-radius: 2.4cqw; background: #7d40ff; color: #fff; text-align: center; font-weight: 600; font-size: 3.8cqw; }

/* the app's tab bar closes every screen */
.exp__tabs {
  display: flex; justify-content: space-between; gap: 2cqw;
  margin: 0 -4.5cqw; padding: 2.6cqw 6cqw 4.4cqw;
  border-top: 1px solid rgba(20, 19, 26, 0.1);
  font-size: 3cqw; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(20, 19, 26, 0.38);
}
.exp__tabs span { position: relative; padding-top: 2.6cqw; }
/* the live tab gets the bar above it and the app's colour */
.exp__tabs .is-on { color: #7d40ff; font-weight: 700; }
.exp__tabs .is-on::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 7cqw; height: 0.9cqw; border-radius: 99px; background: #7d40ff;
}

/* ------------------------- staggered entrances -------------------------
   A container marked [data-stagger] hands each of its children the same
   short move, one after the other, the first time it comes into view. */
[data-stagger] > * {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}
[data-stagger="up"] > * { translate: 0 22px; }
[data-stagger="left"] > * { translate: -40px 0; }
[data-stagger="right"] > * { translate: 40px 0; }
[data-stagger].is-in > * { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * { opacity: 1; translate: none; transition: none; }
}

/* ---------------------------- page colour ----------------------------
   The sections under the stage share one background, so a change of colour
   happens across the whole window at once instead of as a line sliding
   past. The script hands the colour to whichever section has more of its
   content on screen, so text never waits on the wrong ground. */
:root { --page-bg: #ffffff; }
[data-bg] {
  position: relative; z-index: 4;
  background-color: var(--page-bg) !important;
  transition: background-color 0.3s linear;
}
.zoom + .trust { margin-top: -100vh; }
@media (prefers-reduced-motion: reduce) { [data-bg] { transition: none; } }

/* ------------------------------- footer ------------------------------- */

/* ------------------------------- footer -------------------------------
   A poster in the brand violet: a ruled three-column box with square
   corner marks, registration crosses in the page corners, and the name set
   edge to edge underneath. Type is the site's own: Phudu and Inter. */
.ftr {
  --fg: #ffffff;
  /* the site's own body face for the small type */
  --mono: var(--font-sans);
  position: relative; z-index: 4; overflow: hidden;
  padding: 72px 36px 0;
  background: #0b0a10; color: var(--fg);
}
.ftr a { color: inherit; }

.ftr__plus { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.ftr__plus::before, .ftr__plus::after { content: ""; position: absolute; background: var(--fg); opacity: 0.55; }
.ftr__plus::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ftr__plus::after { top: 50%; left: 0; right: 0; height: 1px; }
.ftr__plus--tl { left: 14px; top: 14px; } .ftr__plus--tc { left: calc(50% - 11px); top: 14px; } .ftr__plus--tr { right: 14px; top: 14px; }
.ftr__plus--bl { left: 14px; bottom: 14px; } .ftr__plus--bc { left: calc(50% - 11px); bottom: 14px; } .ftr__plus--br { right: 14px; bottom: 14px; }

.ftr__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--fg);
}
.ftr__sq { position: absolute; width: 9px; height: 9px; background: var(--fg); }
.ftr__sq--tl { left: -5px; top: -5px; } .ftr__sq--tr { right: -5px; top: -5px; }
.ftr__sq--bl { left: -5px; bottom: -5px; } .ftr__sq--br { right: -5px; bottom: -5px; }

.ftr__cell { position: relative; padding: 34px 32px 40px; min-height: 0; }
.ftr__cell + .ftr__cell { border-top: 1px solid var(--fg); }

.ftr__cta {
  max-width: 11ch;
  font-size: clamp(40px, 4.4vw, 68px); line-height: 0.98;
  color: var(--fg);
}
.ftr__mono {
  margin-top: 28px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.45;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ftr__h { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ftr__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.ftr__list a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.3s ease;
}
.ftr__list a:hover { background-size: 100% 1px; }
.ftr__go { display: inline-flex; align-items: center; gap: 9px; }
.ftr__go i { width: 9px; height: 9px; background: currentColor; transition: transform 0.3s ease; }
.ftr__go:hover i { transform: rotate(45deg); }

.ftr__mono--label { margin-top: 34px; }
.ftr__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ftr__chips a {
  padding: 5px 9px; border: 1px solid var(--fg);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.ftr__chips a:hover, .ftr__chips a.is-on { background: var(--fg); color: #7d40ff; }

.ftr__dot { position: absolute; right: 22%; top: 76px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); animation: ftr-dot 3.2s ease-in-out infinite; }
@keyframes ftr-dot { 50% { transform: translate(-10px, 8px); } }

.ftr__mail { display: flex; align-items: flex-end; gap: 12px; max-width: 360px; margin-top: 36px; border-bottom: 1px solid var(--fg); padding-bottom: 9px; }
.ftr__mail input {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--fg); outline: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
}
.ftr__mail input::placeholder { color: var(--fg); opacity: 1; }
.ftr__mail button {
  padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
}
.ftr__mail button:hover { text-decoration: underline; }
.ftr__mail:focus-within { border-bottom-width: 2px; padding-bottom: 8px; }

.ftr__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
}
.ftr__legal a:hover { text-decoration: underline; }

/* the name, set across the full width and running off the bottom edge */
.ftr__word {
  margin: 48px -10px 0;
  font-family: "Phudu", var(--font-sans); font-weight: 800;
  font-size: 14.3vw; line-height: 0.78; letter-spacing: -0.02em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--fg);
  transform: translateY(0.09em);
}
.ftr__slash { display: inline-block; margin-right: 0.04em; font-weight: 300; }

/* the name comes up letter by letter as the footer is uncovered: --fr is how
   far it is open (0 → 1), --i the letter's place in the word */
.ftr__ch {
  display: inline-block;
  --lp: clamp(0, calc((var(--fr, 1) * (var(--n, 14) + 5) - var(--i, 0)) / 5), 1);
  translate: 0 calc((1 - var(--lp)) * 0.5em);
  opacity: var(--lp);
  will-change: translate, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .ftr__ch { translate: none; opacity: 1; }
}

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

/* ------------------------------- popup ------------------------------- */

.popup {
  position: fixed;
  right: 16px; bottom: 16px; left: 16px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 48px rgba(6,6,8,0.14), 0 4px 8px rgba(24,24,27,0.07);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.popup.is-open { opacity: 1; transform: translateY(0); }
.popup[hidden] { display: none; }

.popup__close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--shade-500); }
.popup__close:hover { color: var(--black); }
.popup__app { display: flex; align-items: center; gap: 10px; padding-right: 22px; }
.popup__icon { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.06); }
.popup__name { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.2; }
.popup__rating { margin-top: 2px; font-size: 12px; color: var(--shade-500); }
.popup__stars { color: #f5b400; letter-spacing: 1px; }
.popup__text { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); color: var(--shade-600); }
.popup__list { display: flex; flex-wrap: wrap; gap: 6px; }
.popup__list li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 99px;
  background: #f2edff; color: #592db5;
  font-size: 12px; font-weight: var(--fw-med);
}
.popup__list svg { color: #7d40ff; }
.popup__cta { align-self: stretch; justify-content: center; gap: 6px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----------------------- faq polish (new layout) ----------------------- */


/* a wash that grows behind the row on hover, under the text */

/* ------------------------- site-wide headings -------------------------
   Every heading on the page shares one voice: Phudu, set in capitals at a
   medium weight. Placed last so it settles over each section's own
   weight and tracking; sizes stay with the sections. Phudu is condensed,
   so the tight negative tracking the old face needed is dropped. */
h1, h2, h3, h4,
.hero__title, .jx__title, .jx-step__t, .trust__title,
.head__title, .ig__title, .wk__heading, .wk__title, .vsx__title, .stx__t,
.exh__title, .faq__title, .lc__title {
  font-family: "Phudu", var(--font-sans);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0;
}
/* emphasised words keep their colour but no longer switch face */
:is(h1, h2, h3, h4, .hero__title, .jx__title, .jx-step__t, .trust__title, .head__title, .ig__title, .wk__heading, .wk__title, .vsx__title, .stx__t, .exh__title, .faq__title, .lc__title) em {
  font: inherit;
  letter-spacing: inherit;
}

/* visually hidden, still read aloud */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------- footer reveal ---------------------------
   When the footer fits the screen it is fixed behind the page, and the body
   reserves its height at the bottom. The last section scrolls up off it like
   a curtain, and the footer's contents settle into place as it opens. The
   script only turns this on when the footer is no taller than the window. */
html.ftr-reveal body { padding-bottom: var(--ftr-h, 0px); }
html.ftr-reveal .ftr { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; }
/* everything above the footer paints over it: the hero and the pinned stage
   had transparent stretches (the stage's tall track) it showed through */
html.ftr-reveal .hero { position: relative; z-index: 3; background-color: var(--black); }
html.ftr-reveal .zoom { position: relative; z-index: 2; background-color: var(--black); }
/* and it stays hidden until the page actually starts to uncover it */
html.ftr-reveal .ftr.is-hidden { visibility: hidden; }
html.ftr-reveal .ftr__grid,
html.ftr-reveal .ftr__legal,
html.ftr-reveal .ftr__word {
  transform: translate3d(0, calc((1 - var(--fr, 1)) * -90px), 0);
  opacity: calc(0.35 + var(--fr, 1) * 0.65);
  will-change: transform, opacity;
}
/* the section lifting off it throws a soft shadow onto the footer */
html.ftr-reveal .last { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
@media (prefers-reduced-motion: reduce) {
  html.ftr-reveal .ftr__grid, html.ftr-reveal .ftr__legal, html.ftr-reveal .ftr__word { transform: none; opacity: 1; }
}


/* ------------------------------- aura ---------------------------------
   Three soft violet lights drifting behind everything. They are screened
   over the page, so they glow through the dark sections and barely touch
   the pale ones — the look a background shader gives, without one. */
.aura {
  position: fixed; inset: 0; z-index: 9989;
  pointer-events: none; overflow: hidden;
  mix-blend-mode: screen; opacity: 0.62;
}
.aura__b {
  position: absolute; display: block;
  width: 62vmax; height: 62vmax; border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.aura__b--1 {
  left: -18vmax; top: -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(125, 64, 255, 0.55), transparent 65%);
  animation: aura-1 17s ease-in-out infinite;
}
.aura__b--2 {
  right: -24vmax; top: 18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(169, 139, 255, 0.4), transparent 65%);
  animation: aura-2 21s ease-in-out infinite;
}
.aura__b--3 {
  left: 24vmax; bottom: -30vmax;
  background: radial-gradient(circle at 50% 50%, rgba(90, 30, 220, 0.45), transparent 65%);
  animation: aura-3 26s ease-in-out infinite;
}
@keyframes aura-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  30%      { transform: translate3d(26vmax, 16vmax, 0) scale(1.25); }
  60%      { transform: translate3d(10vmax, 34vmax, 0) scale(0.85); }
}
@keyframes aura-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  35%      { transform: translate3d(-30vmax, 20vmax, 0) scale(0.85); }
  70%      { transform: translate3d(-12vmax, -24vmax, 0) scale(1.3); }
}
@keyframes aura-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-26vmax, -28vmax, 0) scale(1.28); }
  75%      { transform: translate3d(22vmax, -12vmax, 0) scale(0.88); }
}
@media (prefers-reduced-motion: reduce) { .aura__b { animation: none; } }

/* ------------------------------ film grain ------------------------------
   A tiled noise image over the whole page, the way the reference does it,
   but in two passes so it reads on both the light and the dark sections:
   one multiplies fine dark specks into the pale ones, the other screens
   fine light specks into the dark ones. */
body::before, body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none;
  background-image: url("../images/noise.png");
  background-repeat: repeat;
  background-size: 150px 150px;
}
body::before { mix-blend-mode: multiply; filter: brightness(1.85); opacity: 0.16; }
body::after  { mix-blend-mode: screen;   filter: brightness(0.16); opacity: 0.12; }



/* the board's content keeps 50px clear of both edges, while the rules above
   and below the row still run the full width */
.wk__heading { padding-inline: 50px; }
.wk__slide { padding-inline: 50px; }
@media (max-width: 899px) {
  .wk__heading, .wk__slide { padding-inline: var(--pad); }
}



/* ------------------------ five jobs, as a board ------------------------
   One light panel split in two: the jobs listed down the left, each with
   its own mark, the live one opened to show what it does; the handset and
   a browser window layered on the right. */
.jx { background: #fff; }
.jx__body {
  margin-top: clamp(32px, 5vh, 56px);
  border-radius: 28px; overflow: hidden;
  background: #f3f1ee;
  grid-template-columns: 1fr;
}
.jx__rail { display: none; }

.jx__steps { padding: 0; margin: 0; list-style: none; background: #e9e6e0; }
.jx-step {
  display: block; min-height: 0; padding: 0;
  opacity: 1; cursor: pointer;
  border-bottom: 1px solid rgba(20, 19, 16, 0.08);
  transition: background 0.35s ease;
}
.jx-step:last-child { border-bottom: 0; }
.jx-step:hover { background: #efece7; }
/* the live one lifts to the panel's own light tone */
.jx-step.is-on { background: #fbfaf8; }
.jx-step::before { content: none; }

.jx-step__top { display: flex; align-items: center; gap: 18px; padding: 26px 30px; }
.jx-step__ic {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: #e2d7ff; color: #5b23c4;
  transition: background 0.35s ease, color 0.35s ease;
}
.jx-step.is-on .jx-step__ic { background: #7d40ff; color: #fff; }
.jx-step__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jx-step__t {
  margin: 0; font-family: var(--font-sans); font-weight: 600; text-transform: none;
  font-size: 19px; letter-spacing: -0.01em; line-height: 1.2; color: #14130f;
}

/* the live job opens underneath its own row */
.jx-step__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.jx-step.is-on .jx-step__more { grid-template-rows: 1fr; }
.jx-step__more-in { overflow: hidden; min-height: 0; }
.jx-step__p {
  margin: 0; padding: 0 30px 6px 30px;
  font-size: 15px; line-height: 1.55; color: rgba(20, 19, 16, 0.62);
}
.jx-step__proof {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0; padding: 12px 30px 28px 30px;
}
.jx-step__proof b { font-family: "Phudu", var(--font-sans); font-weight: 500; font-size: 22px; color: #14130f; }
.jx-step__proof span { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(20, 19, 16, 0.45); }

/* the right half: a browser window with the handset over it */
.jx__stage {
  position: relative; top: 0; order: 0;
  display: grid; place-items: center;
  min-height: clamp(460px, 62vh, 660px); padding: 44px 40px; background: none;
}
.jx__win {
  position: absolute; right: 4%; top: 14%; width: 72%; height: 72%;
  border-radius: 16px; background: #fff;
  box-shadow: 0 40px 80px -40px rgba(20, 19, 16, 0.45);
  overflow: hidden;
}
.jx__win-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding-inline: 16px; border-bottom: 1px solid rgba(20, 19, 16, 0.07); }
.jx__win-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20, 19, 16, 0.1); }
.jx__win-body { display: grid; place-items: center; height: calc(100% - 38px); }
.jx__win-body img { width: 150px; height: auto; opacity: 0.22; }

/* the handset sits over the window's left edge, as in the reference */
/* the panel is just the box the handset centres itself in */
.jx__panel {
  position: relative; z-index: 1;
  justify-self: start; align-self: center;
  width: 46%; min-width: 250px; height: 88%;
  margin-left: 2%; background: none; border: 0;
}
.jx__device { --jx-scale: 0.62; }
.jx__sq { display: none; }
.jx__big { display: none; }

@media (prefers-reduced-motion: reduce) { .jx-step, .jx-step__more, .jx-step__ic { transition: none; } }

@media (min-width: 900px) {
  .jx__body { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 0; }
  .jx__steps { border-right: 1px solid rgba(20, 19, 16, 0.08); }
}

/* ---------------------- rhythm and heading scale ----------------------
   One vertical rhythm and one heading size for every section below the
   stage, so the page keeps a single measure. */
:root {
  --sec-y: clamp(84px, 10vh, 128px);
  --h-sec: clamp(38px, 4.8vw, 82px);
}
.trust, .jx, .vsx, .steps, .extras, .faq, .last { padding-block: var(--sec-y); }
.ig { padding-block: var(--sec-y) calc(var(--sec-y) * 2); }
.calc { padding-top: 0; padding-bottom: var(--sec-y); }

.head__title, .trust__title, .jx__title, .exh__title, .faq__title, .lc__title {
  font-size: var(--h-sec); line-height: 0.98;
}
.wk__heading { font-size: clamp(48px, 7.4vw, 132px); line-height: 0.9; }

/* the two buttons the dark and light sections need */
.btn--light { background: #fff; border-color: #fff; color: #17111f; }
.btn--light:hover { background: #ece0ff; border-color: #ece0ff; }
.btn--ghost { background: transparent; border-color: rgba(11, 10, 16, 0.22); color: #0b0a10; }
.btn--ghost:hover { background: rgba(11, 10, 16, 0.05); border-color: rgba(11, 10, 16, 0.4); }

/* ------------------------------ trust --------------------------------
   The three figures count up when they arrive. */
.trust { background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.06); overflow: hidden; }
.trust__stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0; margin: 40px auto 0; padding: 0; list-style: none;
}
.tstat {
  flex: 1 1 200px; max-width: 300px;
  padding: 6px 28px; text-align: center;
  border-left: 1px solid rgba(11, 10, 16, 0.1);
}
.tstat:first-child { border-left: 0; }
.tstat__n {
  display: block;
  font-family: "Phudu", var(--font-sans); font-weight: 500;
  font-size: clamp(40px, 4.6vw, 62px); line-height: 1; letter-spacing: -0.01em; color: #7d40ff;
}
.tstat__stars { display: inline-block; margin-left: 10px; vertical-align: 0.28em; font-style: normal; font-size: 12px; letter-spacing: 0.16em; color: #7d40ff; }
.tstat__l { display: block; margin-top: 10px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(11, 10, 16, 0.5); }

/* ------------------------------ cases --------------------------------
   The live case study shows through the letters of the heading. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wk__heading {
    background-image: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)), var(--wk-shot, none);
    background-size: var(--wk-zoom, 128%) auto;
    background-position: 50% 42%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: wk-drift 16s ease-in-out infinite;
    transition: background-size 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .wk__heading:not([style*="--wk-shot"]) { -webkit-text-fill-color: var(--wk-ink); color: var(--wk-ink); animation: none; }
}
@keyframes wk-drift {
  0%   { background-position: 44% 38%; }
  50%  { background-position: 58% 54%; }
  100% { background-position: 44% 38%; }
}
@media (prefers-reduced-motion: reduce) { .wk__heading { animation: none; transition: none; } }

/* ---------------------------- comparison ------------------------------
   Heading on the left, the two routes drawn as boards on the right:
   square corners, registration marks, hairline rules, and the winning
   card lit violet. */
.vsx { background: var(--ink); color: #fff; border-top: 0; }
.vsx .head__title { color: #fff; }

.vsx__in { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.vsx__side .head__title { max-width: 16ch; }
.vsx__side .led__lede { margin-top: 20px; max-width: 38ch; }
.vsx__total { margin-top: 26px; }
.vsx__total b {
  display: block;
  font-family: "Phudu", var(--font-sans); font-weight: 500; font-size: clamp(26px, 2.4vw, 38px); line-height: 1;
  color: #a98bff;
}
.vsx__total span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.led__lede { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); }

.led { display: grid; grid-template-columns: 1fr; gap: 18px; }
.led__col {
  position: relative;
  display: flex; flex-direction: column;
  background: #16151c;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9);
}
.led__sq { position: absolute; z-index: 3; width: 8px; height: 8px; background: #fff; }
.led__sq--tl { left: -4px; top: -4px; }
.led__sq--br { right: -4px; bottom: -4px; }
.led__col--new {
  border-color: rgba(169, 139, 255, 0.5);
  background: #26105c;
  box-shadow: 0 30px 70px -30px rgba(90, 30, 220, 0.6);
}
.led__col--new .led__sq { background: #a98bff; }

.led__top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px;
  padding: 20px 24px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.led__col--new .led__top { border-bottom-color: rgba(255, 255, 255, 0.28); }
.led__title {
  font-family: "Phudu", var(--font-sans); font-weight: 500; font-size: 20px;
  letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.led__col--new .led__title { color: #fff; }
.led__badge {
  padding: 5px 9px; border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.led__badge--on { color: #2c0d6e; background: #fff; border-color: #fff; }

.led__rows { flex: 1; list-style: none; margin: 0; padding: 0 24px; }
.led__rows li {
  position: relative;
  display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.led__rows li:first-child { border-top: 0; }
.led__rows li::before {
  content: ""; position: absolute; left: -24px; right: -24px; top: 0; height: 1px;
  background: #a98bff; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.led__rows li:hover::before { transform: scaleX(1); }
.led__t {
  font-family: "Phudu", var(--font-sans); font-weight: 500; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.42);
}
.led__col--new .led__t { color: #c8b2ff; }
.led__e { font-size: 16.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.led__col--new .led__e { color: #fff; }

.led__end {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin: 0; padding: 22px 24px 24px; border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.led__col--new .led__end { border-top-color: rgba(255, 255, 255, 0.34); }
.led__end b {
  font-family: "Phudu", var(--font-sans); font-weight: 500;
  font-size: clamp(38px, 3.8vw, 58px); line-height: 0.9; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
}
.led__col--new .led__end b { color: #fff; }
.led__end span { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); }
.led__col--new .led__end span { color: rgba(255, 255, 255, 0.72); }

.led__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.led__cta span { font-size: 14px; color: rgba(255, 255, 255, 0.5); }

@media (prefers-reduced-motion: reduce) { .led__rows li::before { transition: none; } }

/* --------------------------- integrations -----------------------------
   Two rows of logos crawling in opposite directions, taking an extra
   shove from the scroll. */
.ig { background: #7d40ff; color: #fff; border-top: 0; overflow: hidden; }
.ig .head__title { color: #fff; }
.ig__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.ig__head > div { flex: 1 1 520px; }
.ig__head .head__title { max-width: 20ch; }
.ig__total { flex: none; text-align: right; }
.ig__total b {
  display: block;
  font-family: "Phudu", var(--font-sans); font-weight: 500; font-size: clamp(26px, 2.4vw, 38px); line-height: 1; color: #fff;
}
.ig__total span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }

.igb { position: relative; margin-top: 52px; }
.igm { overflow: hidden; }
.igm + .igm { margin-top: 16px; }
.igm__track { display: flex; margin: 0; padding: 0; list-style: none; width: max-content; will-change: transform; }
.igb__cell {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 238px; min-height: 120px; margin: 0 8px; padding: 20px 24px;
  background: #fff;
}
.igb__cell img {
  max-width: 150px; max-height: 38px; width: auto; height: auto;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.igb__cell:hover img { transform: scale(1.06); }

.ig__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.ig__note { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.ig__link { font-size: 14px; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 5px; }

@media (prefers-reduced-motion: reduce) { .igb__cell img { transition: none; } .igm__track { transform: none !important; } }

/* ---------------------------- calculator ------------------------------ */
.calc { background: #7d40ff; color: #fff; }
.calc .head__title { color: #fff; }
.calc .head__text { color: rgba(255, 255, 255, 0.78); }
.calc__pane { color: #0b0a10; }

/* ------------------------------- steps --------------------------------
   The four columns come in from the left, and the shots are grey plates
   until the real screenshots land. */
.steps { background: var(--ink); color: var(--white); }
.stx__shot { margin: auto 0 0; padding-top: 24px; }
.stx__ph {
  display: block; width: 100%; aspect-ratio: 1200 / 1320;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.stx__col:hover .stx__ph { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); }

.stx__col.reveal {
  opacity: 0; transform: translate3d(120px, 0, 0);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.stx__col.reveal.is-in { opacity: 1; transform: none; }
.stx__col.reveal--d1 { transition-delay: 0.12s; }
.stx__col.reveal--d2 { transition-delay: 0.24s; }
.stx__col.reveal--d3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) { .stx__col.reveal, .stx__ph { opacity: 1; transform: none; transition: none; } }

/* ------------------------------- extras -------------------------------
   An index of the four apps: the live one is set solid on the right, and
   the app itself plays in a handset on the left. */
.extras { background: var(--ink); color: #fff; }
.exh__title { color: #fff; }
.exs { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: clamp(40px, 6vh, 72px); align-items: start; }


.exi__lbl { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.exl { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.exl__row { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.exl__link {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  padding: 24px 4px; color: #fff;
}
.exl__n { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.35); transition: color 0.35s ease; }
.exl__name {
  font-family: var(--font-sans); font-weight: 500; text-transform: none;
  font-size: clamp(32px, 4.2vw, 68px); line-height: 1; letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.26);
  transition: color 0.4s ease;
}
.exl__arrow {
  grid-column: 3; grid-row: 1;
  display: grid; place-items: center; width: 44px; height: 44px; color: #fff;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.exl__arrow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.exl__row.is-on .exl__name { color: #fff; }
.exl__row.is-on .exl__n { color: #a98bff; }
.exl__row.is-on .exl__arrow { opacity: 1; transform: none; }
.exl__link:focus-visible { outline: 2px solid #a98bff; outline-offset: 4px; }

.exi__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-top: 26px; }
.exi__note { max-width: 40ch; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.exi__all { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; color: #fff; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.exi__all:hover { transform: translateX(4px); }

.exs__stage .exp { opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.exs__stage .exp.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .exs__stage .exp, .exl__name, .exl__arrow, .exl__n, .exi__all { transition: none; }
}

/* --------------------------------- faq --------------------------------
   Heading left, questions right in a dark panel: numbered rows, the open
   one lifted, its answer behind a violet rule. */
.faq { background: #0b0a10; color: #fff; }
.faq__in { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.faq__kicker { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #a98bff; }
.faq__title { margin-top: 16px; max-width: 16ch; color: #fff; }
.faq__note { margin-top: 20px; max-width: 34ch; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); }
.faq__mail {
  display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 600; color: #fff;
  text-decoration: underline; text-decoration-color: rgba(169, 139, 255, 0.6); text-underline-offset: 5px;
}
.faq__list {
  position: relative; overflow: hidden; border-radius: 22px;
  background: #16151c; border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.acc + .acc { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.acc__h { margin: 0; font: inherit; }
.acc__q {
  display: flex; align-items: center; gap: 18px;
  width: 100%; padding: 22px 24px; text-align: left; background: none; border: 0;
  transition: background-color 0.25s ease;
}
.acc:hover .acc__q { background: rgba(255, 255, 255, 0.04); }
.acc__q[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); }
.acc__no {
  flex: none; font-family: "Phudu", var(--font-sans); font-weight: 500; font-size: 14px;
  letter-spacing: 0.04em; color: rgba(169, 139, 255, 0.85);
}
.acc__label { flex: 1; font-size: 17px; font-weight: 500; line-height: 1.35; color: #fff; }
.acc__sign {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px;
  background: rgba(255, 255, 255, 0.85); transition: opacity 0.25s ease, background-color 0.25s ease;
}
.acc__sign::after { transform: rotate(90deg); }
.acc__q[aria-expanded="true"] .acc__sign { background: #7d40ff; border-color: #7d40ff; transform: rotate(180deg); }
.acc__q[aria-expanded="true"] .acc__sign::before,
.acc__q[aria-expanded="true"] .acc__sign::after { background: #fff; }
.acc__q[aria-expanded="true"] .acc__sign::after { opacity: 0; }
.acc__a { display: grid; grid-template-rows: 0fr; background: rgba(255, 255, 255, 0.04); transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.acc__a.is-open { grid-template-rows: 1fr; }
.acc__a-in { overflow: hidden; min-height: 0; }
.acc__a-in p {
  margin: 0 24px 22px 74px; padding-left: 16px; border-left: 2px solid #7d40ff;
  font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.68);
}
.acc__q:focus-visible { outline: 2px solid #a98bff; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .acc__q, .acc__sign, .acc__a { transition: none; } }

/* ------------------------------ last CTA ------------------------------ */
.last { position: relative; z-index: 4; background: #fff; color: #0b0a10; }
.lc__title { color: #0b0a10; }
.lc__fix { color: #7d40ff; }
.lc__fix::after { background: #7d40ff; }
.lc__pill { background: #0b0a10; }
.lc__pill img { background: #f2edff; }
.lc__pill img + img { box-shadow: -0.03em 0 0 #0b0a10; }
.lc__copy p { color: rgba(11, 10, 16, 0.6); }
.lc__badge { color: #0b0a10; }
.lc__core { background: #7d40ff; box-shadow: 0 20px 40px -14px rgba(125, 64, 255, 0.6); }
.lc__arrow { stroke: #fff; }
.lc__badge:hover .lc__core { background: #8b56ff; }
.lc__stats { border-top-color: rgba(11, 10, 16, 0.14); }
.lc__stats > div + div { border-left-color: rgba(11, 10, 16, 0.12); }
.lc__stats dt { color: rgba(11, 10, 16, 0.45); }


/* the screen's body carries the app's content between the header and the
   tab bar, and fills the height so no hole opens in the middle */
.exp { padding-bottom: 0; }
.exp__body { flex: 1; display: flex; flex-direction: column; gap: 2.6cqw; min-height: 0; }
.exp__body > .exp__msg:first-of-type { margin-top: 1cqw; }
.exp__row { margin-top: auto; }
.exp__input { margin-top: auto; }
.exp__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 3cqw;
  padding: 2.2cqw 0; border-bottom: 1px solid rgba(20, 19, 26, 0.08);
  font-size: 3.4cqw; color: rgba(20, 19, 26, 0.55);
}
.exp__line b { font-size: 3.6cqw; font-weight: 600; color: #14131a; }
.exp__feed { padding: 2.6cqw 0; }


/* the section pins itself while the four apps step past, the way the case
   studies and the job story do */
/* the old preview needed clipping; sticky does not survive it, so the
   section no longer hides its overflow */
.extras { padding-block: 0; overflow: visible; }
.extras__track { position: relative; }
.extras__pin { position: relative; padding-block: var(--sec-y); }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .extras__track { height: calc(var(--n, 4) * 52vh + 24vh); }
  .extras__pin {
    position: sticky; top: 0;
    height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(36px, 5vh, 72px);
  }
  /* the handset is sized off the window height so the pinned view always fits */
  .extras__pin .exs__phone { --phone-w: min(300px, 30vh); }
  .extras__pin .exh { margin-bottom: 4px; }
  .extras__pin .exs { margin-top: clamp(24px, 3vh, 44px); }
  .extras__pin .exl__link { padding-block: clamp(14px, 2.2vh, 24px); }
  .extras__pin .exi__foot { margin-top: clamp(14px, 2vh, 26px); }
}


/* spacing and alignment inside the pinned view */
.exl__row.is-on .exl__arrow { background: none; border: 0; border-radius: 0; color: #fff; }
.exs { align-items: start; }
.exs__left { justify-content: flex-start; }

@media (min-width: 900px) {
  .extras__pin .exh { margin-bottom: clamp(10px, 1.6vh, 22px); }
  .extras__pin .exs { margin-top: clamp(30px, 4.6vh, 60px); column-gap: 72px; }
  /* the list lines up with the top of the handset */
  .extras__pin .exi { padding-top: 6px; }
}


/* both columns run to the same height, so the rows and the handset end
   together and the two captions sit on one line */
@media (min-width: 900px) {
  .extras__pin .exs { align-items: stretch; }
  .extras__pin .exs__left { display: flex; flex-direction: column; }
  .extras__pin .exs__stage { flex: 1; display: flex; align-items: flex-start; }
  .extras__pin .exi { display: flex; flex-direction: column; }
  .extras__pin .exl { flex: 1; display: flex; flex-direction: column; }
  .extras__pin .exl__row { flex: 1; display: flex; align-items: center; }
  .extras__pin .exl__link { width: 100%; padding-block: 0; }
  .extras__pin .exi__foot { margin-top: 18px; padding-top: 18px; }
}

/* the older extras styling is superseded by the index above */
.exl__link::before { content: none; }
.exl__row { background: none; }
.exl__arrow { border: 0; background: none; border-radius: 0; }