/* ==========================================================================
   Sweepr landing page
   --------------------------------------------------------------------------
   One dark page with a colour journey down it: deep blue at the top, violet
   through the middle, magenta at the end. It is the same ramp the App Store
   screenshots are drawn on, so the site, the store listing and the app all
   look like one product.

   The panels are Liquid Glass. The material is built in layers, because a
   single backdrop-filter reads as frosted plastic rather than as glass:

     1  a blur of what is behind, with saturation pushed up
     2  a refraction pass that bends the backdrop near the edges (SVG filter,
        progressive enhancement, see the @supports block)
     3  a tinted scrim so text has somewhere to sit
     4  a specular rim, bright where light would graze the top edge
     5  an inner shadow at the bottom, so the panel has thickness
     6  a cast shadow, large and soft

   No web fonts. On Apple devices the system stack is SF Pro, which is the
   look this page is after anyway, and on everything else it degrades to the
   platform's own UI face. It also keeps the privacy claim on this page true:
   the site makes no third-party requests at all.
   ========================================================================== */

:root {
  /* the ramp, top to bottom */
  --ink:      #05060F;
  --ramp-1:   #0A1740;
  --ramp-2:   #141A5C;
  --ramp-3:   #2E1A6E;
  --ramp-4:   #4A1C78;
  --ramp-5:   #52184F;
  --ramp-6:   #641C43;
  --ramp-7:   #3B0E3A;   /* the page settles again under the footer */

  /* the blooms, lifted straight from the screenshot composer */
  --bloom-1:  30, 100, 215;
  --bloom-2:  90, 52, 210;
  --bloom-3:  142, 74, 224;
  --bloom-4:  194, 91, 176;
  --bloom-5:  216, 87, 127;

  --brand:    #7A45D6;
  --accent:   #C7B4FF;
  --keep:     #4BDD70;   /* lifted from the app's #30D158: that green is
                            tuned for a white sheet, not for a magenta field */
  --discard:  #FF453A;   /* Ink.discard on dark */
  --gold:     #FFB340;

  --txt:      #FFFFFF;
  --txt-2:    rgba(255,255,255,.84);
  --txt-3:    rgba(255,255,255,.70);   /* 6.0:1 */
  --txt-4:    rgba(255,255,255,.66);

  --glass-tint:   rgba(255,255,255,.075);
  --glass-tint-2: rgba(255,255,255,.028);
  --hairline:     rgba(255,255,255,.14);

  --r-lg: 30px;
  --r-md: 22px;
  --r-sm: 15px;
  --r-pill: 999px;

  --gap: clamp(20px, 4vw, 40px);
  --sec: clamp(88px, 13vh, 168px);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  /* html carries a background of its own so that body's does not propagate up
     to the canvas, which would change how it is sized. */
  background: var(--ink);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  position: relative;
  min-height: 100%;
  overflow-x: clip;
  /* The colour journey, painted rather than composited. Same six blooms and the
     same ramp as before, now a background image on the document body, so the
     browser rasterises the visible tiles and nothing else.

     It used to be an absolutely positioned element spanning the whole document:
     20,980 CSS pixels, which on a 2x display is 41,959 device pixels, about two
     and a half times the 16,384 maximum texture size. With a blend-mode layer
     sitting on top of it, every scroll frame was compositing something larger
     than the GPU can hold in one texture. That was the stutter. */
  background-color: var(--ink);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(74% 13% at 14% 5%,   rgba(var(--bloom-1),.44), transparent 72%),
    radial-gradient(66% 12% at 88% 17%,  rgba(var(--bloom-2),.38), transparent 72%),
    radial-gradient(78% 14% at 6% 40%,   rgba(var(--bloom-3),.36), transparent 72%),
    radial-gradient(70% 13% at 94% 58%,  rgba(var(--bloom-4),.32), transparent 72%),
    radial-gradient(82% 15% at 22% 79%,  rgba(var(--bloom-5),.24), transparent 72%),
    radial-gradient(58% 10% at 84% 90%,  rgba(224,112,95,.18),     transparent 72%),
    linear-gradient(180deg,
      var(--ink)    0%,
      var(--ramp-1) 13%,
      var(--ramp-2) 31%,
      var(--ramp-3) 49%,
      var(--ramp-4) 64%,
      var(--ramp-5) 78%,
      var(--ramp-6) 88%,
      var(--ramp-7) 100%);
  color: var(--txt);
  font-family: var(--font);
  font-size: clamp(17px, .42vw + 15.6px, 19px);
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: rgba(185,162,255,.32); }

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

.sr-only, .skip {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px;
  width: auto; height: auto; margin: 0; padding: 12px 18px;
  clip-path: none; z-index: 999;
  background: var(--ink); border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--hairline);
}

/* -------------------------------------------------------------- the field

   The whole document sits on one painted field. It is absolutely positioned
   rather than fixed, so its gradient stops land at different scroll depths
   and the page actually travels from blue to magenta as you read it.

   The blooms are radial-gradient layers on a single element rather than
   blurred divs. A 200px filter blur on five large boxes costs frames on
   every scroll; five gradients on one non-repainting layer cost nothing. */

.field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* Grain, because a gradient this large bands on an 8-bit display and banding is
   the single thing that makes a big gradient look cheap. Fixed and viewport
   sized: blending it over the whole document was costing a full-page composite
   on every frame, and a fixed tile is indistinguishable from a scrolling one. */
.grain {
  position: absolute;
  inset: 0;
  opacity: .042;
  background-image: url("assets/grain.png");
  background-size: 64px 64px;
  mix-blend-mode: overlay;
}
.orb { display: none; }   /* the field's gradients replaced these */

/* -------------------------------------------------------------- glass */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  /* Static fill, no backdrop read. The field behind every panel is a smooth
     gradient that never moves, so sampling it live buys nothing and costs a
     compositor pass per panel per frame. */
  background:
    linear-gradient(157deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.055) 56%, rgba(255,255,255,.09) 100%),
    rgba(14, 8, 30, .34);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.24),
    0 26px 54px -26px rgba(0,0,0,.62);
}

/* The rim. A gradient ring drawn as a 1px border using two masks that cancel
   each other out everywhere except the border box, which is the only way to
   get a gradient border without a wrapper element. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(153deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.13) 26%,
    rgba(255,255,255,.04) 52%,
    rgba(255,255,255,.10) 74%,
    rgba(255,255,255,.34) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* The specular sweep across the top third. Faint. If you can see it as a
   shape rather than as light, it is too strong. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(168deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.05) 18%,
    transparent 42%);
  pointer-events: none;
}

/* No SVG refraction here, deliberately.

   The usual recipe gates it on @supports (backdrop-filter: url(#id)). That test
   is a false positive in both Safari and Firefox: they answer yes and then draw
   nothing, and Safari discards the rest of the declaration with it, so the blur
   and the saturation go too. The panel collapses to a flat tinted rectangle on
   the one browser every iPhone visitor is using. Chromium is the only engine
   that actually renders it, a displacement map has to be regenerated for every
   distinct panel size, and a refracting surface pinned over scrolling content is
   the most expensive thing you can ask a compositor to do.

   What makes a surface read as glass rather than as frosted plastic is the rim
   and the specular edge below, not the refraction, and those work everywhere. */

/* The four surfaces that really do sit over something that moves: the sticky
   bar, the menu it opens, the bar at the foot of the page, and the chip lying
   on the phone. Everything else above is a flat fill. */
.nav-in, .chip {
  -webkit-backdrop-filter: blur(14px) saturate(170%);
          backdrop-filter: blur(14px) saturate(170%);
}
/* The bottom bar is wide, it is fixed, and it is on screen exactly while the
   page is being scrolled. A live backdrop there means re-reading and re-blurring
   that strip every single frame, which is the most expensive thing a compositor
   can be asked for. Solid reads the same and costs nothing. */
.sticky-cta { background: rgba(16, 10, 32, .95); }

/* Engines with no backdrop-filter at all get an opaque panel. @supports is
   honest about plain blur(); it is only url() that it lies about. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .btn-ghost, .lang-menu, .sticky-cta { background: rgba(19, 14, 40, .93); }
}

/* -------------------------------------------------------------- layout */

.wrap {
  width: min(1180px, 100% - clamp(36px, 8vw, 108px));
  margin-inline: auto;
}
.wrap.narrow { max-width: 840px; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

section { padding-block: var(--sec); position: relative; }

/* No containment on the sections, and no content-visibility either.

   Both were tried. Neither ships, for the same reason: there is no measurement
   here that could justify them. Frame timing cannot be read from this machine
   because requestAnimationFrame is throttled whenever the browser window is not
   focused, so a scroll benchmark returns zero frames, and headless Chrome does
   not rasterise a scrolled viewport at all. Two apparent rendering failures I
   saw while testing them turned out to be artefacts of capturing a background
   window, not defects in the CSS.

   So the rule is: ship the reductions that are countable, not the ones that
   need a stopwatch. What was actually costing frames on this page was the
   field, and that is fixed above. */

/* Deliberately uneven. Sections that open a thought get air above them, the
   ones that continue one sit closer to what they follow. */
.problem  { padding-block: calc(var(--sec) * .82) calc(var(--sec) * .95); }
.ways     { padding-block: var(--sec) calc(var(--sec) * .7); }
.compress { padding-block: calc(var(--sec) * .7) var(--sec); }
.feature + .feature { padding-block: calc(var(--sec) * .64); }
.reviews  { padding-block: var(--sec) calc(var(--sec) * .9); }
.pricing  { padding-block: calc(var(--sec) * .9) var(--sec); }
.apps     { padding-block: calc(var(--sec) * .85) calc(var(--sec) * .7); }
.sec-head { margin-bottom: clamp(44px, 6vw, 76px); }

/* -------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-weight: 660;
  letter-spacing: -.035em;
  line-height: 1.045;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.65rem, 5.3vw, 4.15rem);
  font-weight: 700;
  letter-spacing: -.042em;
  line-height: .98;
}
h1 span { display: block; }
h1 .grad {
  background: linear-gradient(96deg, #FFFFFF 4%, var(--accent) 46%, #FF9DD2 84%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding-bottom: .06em;   /* descenders get clipped by background-clip without it */
}

h2 { font-size: clamp(2.05rem, 4.2vw, 3.35rem); }
h3 { font-size: clamp(1.28rem, 1.7vw, 1.55rem); letter-spacing: -.026em; line-height: 1.2; }
h4 {
  font-size: .8125rem; font-weight: 620; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-4);
}

.eyebrow {
  font-size: .8125rem;
  font-weight: 640;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.15rem;
}

.lede {
  font-size: clamp(1.08rem, 1.15vw, 1.32rem);
  line-height: 1.52;
  color: var(--txt-2);
  max-width: 62ch;
  margin-top: 1.35rem;
  text-wrap: pretty;
}

.fine { font-size: .8125rem; line-height: 1.5; color: var(--txt-4); }

.disclosure {
  margin-top: clamp(34px, 4vw, 52px);
  max-width: 72ch;
  margin-inline: auto;
  text-align: center;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--txt-4);
}

/* Must come after .disclosure: same specificity, and this one has to win.
   A material-connection disclosure that renders smaller and dimmer than the
   claims it qualifies is the textbook failure of "clear and conspicuous", and
   at rgba(255,255,255,.34) it also failed WCAG AA. */
.disclosure-top {
  margin-top: 1.6rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--txt-2);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .58em;
  padding: 1.02em 1.7em;
  border-radius: var(--r-pill);
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.btn .apple { width: 1.05em; height: 1.31em; fill: currentColor; flex: none; margin-top: -.12em; }

.btn-primary {
  color: #10061F;
  background: linear-gradient(178deg, #FFFFFF 0%, #E9E2FF 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(0,0,0,.3),
    0 16px 34px -14px rgba(185,162,255,.62);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.32), 0 22px 44px -14px rgba(185,162,255,.78); }
.btn-primary:active { transform: translateY(0) scale(.985); }

.btn-ghost {
  color: var(--txt);
  background: rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.17), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

.btn-small {
  padding: .62em 1.15em;
  font-size: .9375rem;
  color: #10061F;
  background: linear-gradient(178deg, #FFFFFF 0%, #EDE7FF 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px -10px rgba(185,162,255,.6);
}
.btn-small:hover { transform: translateY(-1px); }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.3rem;
}
.center-cta { justify-content: center; }
.cta-sub { margin-top: 1rem; font-size: .9375rem; color: var(--txt-3); }

/* -------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 14px 0 0;
  transition: padding .3s var(--ease);
}
.nav-in {
  width: min(1180px, 100% - clamp(24px, 5vw, 64px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 32px);
  padding: 9px 9px 9px 18px;
  border-radius: var(--r-pill);
}

/* flex: none, not the default shrink. The bar is a flex row, so without it the
   wordmark is squeezed below the width of its own text and the letters run out
   of their box and under the language control. Only the longest language names
   are wide enough to trigger it, which is why it showed up on Ukrainian and on
   nothing else. */
.brand { display: flex; flex: none; align-items: center; gap: .6rem; font-weight: 640; letter-spacing: -.024em; font-size: 1.06rem; }
.brand img { border-radius: 8px; }

.nav-links { display: flex; gap: clamp(14px, 1.9vw, 28px); margin-inline-start: auto; }
.nav-links a { font-size: .9375rem; color: var(--txt-2); transition: color .18s; }
.nav-links a:hover { color: var(--txt); }

.nav-right { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.nav-links + .nav-right { margin-inline-start: 0; }

.lang { position: relative; }
.lang summary {
  display: flex; align-items: center; gap: .38rem;
  padding: .5rem .72rem;
  font-size: .9375rem; color: var(--txt-2);
  border-radius: var(--r-pill);
  cursor: pointer; list-style: none;
  transition: background .18s, color .18s;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { background: rgba(255,255,255,.08); color: var(--txt); }
.lang summary svg { width: 17px; height: 17px; fill: currentColor; opacity: .8; }
.lang-menu {
  background: #100A1E;   /* a menu is not a window: fully opaque, and nothing to blur behind it */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 24px 48px -18px rgba(0,0,0,.8);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 178px;
  padding: 7px;
  border-radius: var(--r-md);
  display: grid;
  gap: 1px;
  z-index: 20;
}
.lang-menu a {
  padding: .55rem .8rem;
  border-radius: 11px;
  font-size: .9375rem;
  color: var(--txt-2);
  transition: background .16s, color .16s;
}
.lang-menu a:hover { background: rgba(255,255,255,.12); color: var(--txt); }
.lang-menu a[aria-current] { color: var(--accent); font-weight: 600; }

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

.hero { padding-block: clamp(56px, 9vh, 108px) clamp(72px, 11vh, 150px); }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.hero-copy { max-width: 34rem; }
.hero .lede { margin-top: 1.7rem; max-width: 44ch; }

.trust {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  list-style: none; padding: 0; margin-top: 2.1rem;
}
.trust li {
  font-size: .8125rem; font-weight: 550; letter-spacing: -.005em;
  color: var(--txt-3);
  padding: .42em .82em;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

.hero-art { display: grid; place-items: center; }
/* Exactly as wide as the device, so a chip at left:-6% lands six percent of a
   phone outside it and not six percent of a 600px column. */
.phone-stack { position: relative; width: max-content; }
.hero-glow {
  position: absolute;
  inset: -22% -34%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(255,176,120,.20), transparent 68%) 30% 34% / 62% 42% no-repeat,
    radial-gradient(closest-side, rgba(199,180,255,.30), rgba(122,69,214,.13) 44%, transparent 74%);
}

/* -------------------------------------------------------------- the phone

   Drawn in CSS, not a mockup PNG. Seven layers, and the order matters:

     1  the shadow the whole object casts, as a filter so it follows the buttons
     2  the titanium band, lit by a conic sweep because a machined edge carries
        its highlights around the corners and a linear gradient never does
     3  four side buttons standing slightly proud of the band
     4  the black bezel
     5  the capture
     6  the sheen on the cover glass, one diagonal pass
     7  a coloured rim light, picking up the field the phone is sitting on

   Deliberately not tilted. The depth has to come from the lighting. */

.phone {
  --pw: min(304px, 74vw);
  --r: calc(var(--pw) * .152);
  --band: calc(var(--pw) * .034);
  width: var(--pw);
  aspect-ratio: 1320 / 2868;
  position: relative;
  /* One small drop-shadow, kept because it is the only kind that follows the
     side buttons and so reads as an object rather than a picture of one. The
     heavy shadow underneath moved to a box-shadow on the rim: a filter is a
     full-size blur pass, seven of them per page, and this page has to scroll. */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.phone-hero { --pw: min(342px, 76vw); }

.phone-rim {
  position: relative;
  height: 100%;
  padding: var(--band);
  border-radius: var(--r);
  /* A conic sweep was the wrong tool: on a box this tall almost the whole
     angular range lands on the two long sides, so the top and bottom flatten
     into one tone. What a band actually looks like is a cross-section, bright
     where the machined edge catches the light and falling away to dark at the
     inner lip, so that is what these two layers draw. The stops are pinned to
     the band width, 3.4 percent of the device on each side. */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.34)  0%,
      rgba(255,255,255,.55)  0.25%,
      rgba(255,255,255,.03)  1.5%,
      rgba(0,0,0,.20)       26%,
      rgba(0,0,0,.26)       64%,
      rgba(255,255,255,.03) 98.5%,
      rgba(255,255,255,.42) 99.75%,
      rgba(255,255,255,.26) 100%),
    linear-gradient(90deg,
      #EFEFF5  0%,    #FCFCFF 0.55%, #C2C2CE 1.3%,  #6E6E7B 2.1%,
      #2E2E36  2.9%,  #171A20 3.4%,  #14141A 50%,   #171A20 96.6%,
      #2E2E36  97.1%, #6E6E7B 97.9%, #C2C2CE 98.7%, #FCFCFF 99.45%, #EFEFF5 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 calc(var(--pw) * .045) rgba(0,0,0,.30),
    0 18px 26px -12px rgba(0,0,0,.5),
    0 52px 64px -30px rgba(0,0,0,.72);
}

/* The buttons. Same metal, one pixel proud of the band so they catch their own
   highlight and cast their own bit of the drop shadow. */
.phone-btn {
  position: absolute;
  z-index: 1;
  border-radius: calc(var(--pw) * .005);
  width: calc(var(--pw) * .0115);
  background: linear-gradient(90deg, #D8D8E0 0%, #7E7E8A 22%, #2C2C33 60%, #1D1D22 84%, #55555F 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.5);
}
.btn-action { left: calc(var(--pw) * -.0085); top: 15.4%; height: 3.4%; }
.btn-volup  { left: calc(var(--pw) * -.0085); top: 22.6%; height: 5.6%; }
.btn-voldn  { left: calc(var(--pw) * -.0085); top: 30.0%; height: 5.6%; }
.btn-power  {
  right: calc(var(--pw) * -.0085); top: 24.4%; height: 8.4%;
  background: linear-gradient(270deg, #D8D8E0 0%, #7E7E8A 22%, #2C2C33 60%, #1D1D22 84%, #55555F 100%);
}

.phone-screen {
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--r) - var(--band));
  background: #000;
  box-shadow:
    inset 0 0 0 2px #08080A,
    inset 0 0 0 3px rgba(255,255,255,.05);
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }

/* One diagonal pass of light across the cover glass, plus the darkening where
   the glass curves away at the edges. Both faint: if you can point at the
   highlight as a shape, it is too strong. */
.phone-glass {
  position: absolute;
  inset: var(--band);
  z-index: 2;
  border-radius: calc(var(--r) - var(--band));
  pointer-events: none;
  background: linear-gradient(114deg,
    rgba(255,255,255,.15)  0%,
    rgba(255,255,255,.055) 9%,
    rgba(255,255,255,0)    26%,
    rgba(255,255,255,0)    74%,
    rgba(255,255,255,.04)  90%,
    rgba(255,255,255,.11) 100%);
  box-shadow:
    inset 0 0 calc(var(--pw) * .055) rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* The rim light. The page behind is a saturated field, so the edge of a real
   object would catch it. This is the layer that stops the device looking pasted
   on, and it is drawn as a ring so it never touches the screen. */
.phone-rim::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(202deg,
    rgba(205,188,255,.62)  0%,
    rgba(160,120,255,.14) 16%,
    rgba(255,255,255,0)   42%,
    rgba(255,255,255,0)   66%,
    rgba(255,150,210,.12) 86%,
    rgba(255,175,220,.42) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* The Dynamic Island, drawn, because the capture does not contain it: iOS
   composites the island over the screen rather than into it, so a screenshot
   holds only the app's own pixels behind that zone. Measured off the device:
   125 x 36pt on a 440 x 956pt screen, 11pt down. */
.phone-island {
  position: absolute;
  z-index: 4;
  top: calc(var(--pw) * .059);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--pw) * .265);
  height: calc(var(--pw) * .076);
  border-radius: var(--r-pill);
  background: #000;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.07);
}

/* floating chips around the hero phone */
.chip {
  position: absolute;
  display: flex; align-items: center; gap: .45rem;
  padding: .58rem .92rem;
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 580;
  letter-spacing: -.01em;
  white-space: nowrap;
  animation: float 7s var(--ease) infinite;
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-del  { background: var(--discard); box-shadow: 0 0 12px rgba(255,69,58,.8); }
.dot-keep { background: var(--keep);    box-shadow: 0 0 12px rgba(48,209,88,.8); }

.chip-size {
  top: 30%;
  left: -14%;
  gap: .5rem;
  animation-delay: -1.8s;
  font-size: .9375rem;
  padding: .66rem 1.05rem;
}
.chip-size svg { width: 12px; height: 10px; fill: var(--keep); flex: none; }
.chip-size s { color: var(--txt-4); text-decoration-thickness: 1px; }
.chip-size b { color: var(--keep); font-weight: 660; }

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

/* -------------------------------------------------------------- problem */

.problem .stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(42px, 5vw, 66px);
}
.stat {
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2vw, 26px);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.042);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.16);
}
.stat b {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: 680; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(180deg, #FFFFFF, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; margin-top: .7rem; font-size: .9375rem; line-height: 1.42; color: var(--txt-3); }

/* -------------------------------------------------------------- ways */

.ways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.way { padding: clamp(28px, 3.2vw, 42px); }
.way-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.way-mark {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  position: relative;
}
.way-mark::after {
  content: ""; width: 15px; height: 15px;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
  background: #fff;
}
.mark-del {
  background: linear-gradient(160deg, rgba(255,69,58,.95), rgba(190,36,28,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 24px -10px rgba(255,69,58,.7);
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.06 8l5.47-5.47a.75.75 0 10-1.06-1.06L8 6.94 2.53 1.47A.75.75 0 001.47 2.53L6.94 8l-5.47 5.47a.75.75 0 101.06 1.06L8 9.06l5.47 5.47a.75.75 0 101.06-1.06z'/%3E%3C/svg%3E");
}
.mark-keep {
  background: linear-gradient(160deg, rgba(48,209,88,.95), rgba(20,145,75,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 24px -10px rgba(48,209,88,.7);
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.1a.9.9 0 01-.66-.29L1.7 8.66a.9.9 0 111.32-1.22l3.18 3.44 6.78-7.3a.9.9 0 011.32 1.22l-7.44 8a.9.9 0 01-.66.3z'/%3E%3C/svg%3E");
}
.way > p { color: var(--txt-2); }
.tone-del  { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.24), 0 26px 54px -26px rgba(0,0,0,.62), 0 0 62px -30px rgba(255,69,58,.5); }
.tone-keep { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.24), 0 26px 54px -26px rgba(0,0,0,.62), 0 0 62px -30px rgba(48,209,88,.5); }

/* -------------------------------------------------------------- lists */

.ticks { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: .78rem; }
.ticks.two { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: .78rem clamp(18px, 3vw, 40px); }
.ticks li {
  position: relative;
  padding-inline-start: 1.85rem;
  font-size: .9688rem;
  line-height: 1.46;
  color: var(--txt-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .34em;
  width: 15px; height: 15px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.1a.9.9 0 01-.66-.29L1.7 8.66a.9.9 0 111.32-1.22l3.18 3.44 6.78-7.3a.9.9 0 011.32 1.22l-7.44 8a.9.9 0 01-.66.3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.1a.9.9 0 01-.66-.29L1.7 8.66a.9.9 0 111.32-1.22l3.18 3.44 6.78-7.3a.9.9 0 011.32 1.22l-7.44 8a.9.9 0 01-.66.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pointlist { list-style: none; padding: 0; margin-top: 2rem; display: grid; gap: 1.4rem; }
.pointlist li { display: grid; gap: .3rem; }
.pointlist b { font-size: 1.02rem; font-weight: 620; letter-spacing: -.02em; }
.pointlist span { font-size: .9375rem; line-height: 1.5; color: var(--txt-3); }

/* -------------------------------------------------------------- features */

.feature-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.feature-left .feature-in { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.feature-left .feature-art { order: -1; }
.feature-art { display: grid; place-items: center; }

/* before / after */
.ba {
  margin-top: 2.2rem;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  align-items: end;
}
.ba-col { display: grid; gap: .38rem; }
.ba-col > span { font-size: .75rem; font-weight: 620; letter-spacing: .09em; text-transform: uppercase; color: var(--txt-4); }
.ba-col > b { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 660; letter-spacing: -.035em; }
.ba-after > b { color: var(--keep); }
.bar { height: 9px; border-radius: var(--r-pill); display: block; }
.bar-before { width: 100%; background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.18)); }
.bar-after  { width: 62%;  background: linear-gradient(90deg, var(--keep), rgba(48,209,88,.42)); box-shadow: 0 0 18px -4px rgba(48,209,88,.75); }
.ba-note { grid-column: 1 / -1; margin-top: .3rem; font-size: .875rem; color: var(--txt-3); }

/* -------------------------------------------------------------- reviews */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.review { padding: clamp(24px, 2.8vw, 34px); display: grid; align-content: start; gap: 1.1rem; }
.quote-mark {
  font-size: 3.4rem;
  line-height: .72;
  height: .5em;
  font-weight: 700;
  color: var(--accent);
  opacity: .55;
}
.review blockquote { font-size: 1.02rem; line-height: 1.52; color: var(--txt); letter-spacing: -.014em; }
.review figcaption { display: grid; gap: .15rem; }
.review figcaption b { font-size: .9375rem; font-weight: 620; }
.review figcaption span { font-size: .8438rem; color: var(--txt-4); }
/* Points up at the paragraph above the grid, not down at a footnote. Muted
   enough not to read as a rating star, present enough to be seen. */
.rev-mark { color: var(--txt-4); font-weight: 400; margin-inline-start: .12em; }

/* -------------------------------------------------------------- pricing */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.plan {
  padding: clamp(24px, 2.8vw, 32px) clamp(20px, 2.2vw, 26px);
  text-align: center;
  display: grid;
  align-content: start;
  gap: .35rem;
  position: relative;
}
.plan-featured {
  background:
    linear-gradient(157deg, rgba(185,162,255,.21) 0%, rgba(122,69,214,.10) 58%, rgba(255,255,255,.06) 100%),
    rgba(9, 5, 20, .17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.24),
    0 30px 62px -26px rgba(0,0,0,.66),
    0 0 70px -32px rgba(185,162,255,.85);
}
.tag {
  position: absolute;
  top: -11px; left: 50%; transform: translateX(-50%);
  padding: .3em .78em;
  border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 660; letter-spacing: .07em; text-transform: uppercase;
  color: #17082B;
  background: linear-gradient(180deg, #FFFFFF, var(--accent));
  white-space: nowrap;
  z-index: 3;
}
.plan h3 { font-size: 1.02rem; font-weight: 600; color: var(--txt-2); letter-spacing: -.018em; }
.price { font-size: clamp(2.1rem, 3.2vw, 2.7rem); font-weight: 680; letter-spacing: -.045em; line-height: 1.1; }
.price .cur { font-size: .52em; font-weight: 600; vertical-align: .42em; margin-inline-end: .04em; color: var(--txt-3); }
.per { font-size: .875rem; color: var(--txt-4); }
.trial { margin-top: .5rem; font-size: .8438rem; font-weight: 600; color: var(--keep); }
.plan-note { margin-top: .5rem; font-size: .8125rem; line-height: 1.42; color: var(--txt-4); }

.included {
  margin-top: clamp(22px, 3vw, 34px);
  padding: clamp(28px, 3.4vw, 44px);
}
.included h3 { margin-bottom: 1.3rem; }
.included-free {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--txt-2);
  max-width: 66ch;
}
.included-free::first-line { font-weight: 600; }
.included-cta { margin-top: 1.8rem; }

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

.qa-list { display: grid; gap: 12px; }
.qa { border-radius: var(--r-md); }
.qa summary:focus-visible { outline-offset: -3px; border-radius: var(--r-md); }
.qa summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: clamp(19px, 2.1vw, 25px) clamp(20px, 2.3vw, 28px);
  cursor: pointer;
  list-style: none;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.022em; line-height: 1.35;
  position: relative; z-index: 3;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 {
  flex: 1;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.qa summary i {
  flex: none; width: 21px; height: 21px; margin-top: .12em;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  position: relative;
  transition: transform .3s var(--ease-out), background .2s;
}
.qa summary i::before, .qa summary i::after {
  content: ""; position: absolute; inset: 50% 5px auto 5px;
  height: 1.6px; border-radius: 2px; background: var(--txt-2);
  transform: translateY(-50%);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.qa summary i::after { transform: translateY(-50%) rotate(90deg); }
.qa[open] summary i { background: rgba(185,162,255,.28); }
.qa[open] summary i::after { transform: translateY(-50%) rotate(0); opacity: 0; }
.qa-body {
  padding: 0 clamp(20px, 2.3vw, 28px) clamp(21px, 2.3vw, 27px);
  position: relative; z-index: 3;
}
.qa-body p { color: var(--txt-2); font-size: .9688rem; line-height: 1.6; max-width: 68ch; }
.qa[open] .qa-body { animation: qaIn .34s var(--ease-out); }
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

/* -------------------------------------------------------------- other apps */

.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.app {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: clamp(24px, 2.8vw, 32px);
  transition: transform .28s var(--ease);
}
.app:hover { transform: translateY(-4px); }
.app img { border-radius: 17px; flex: none; box-shadow: 0 10px 24px -10px rgba(0,0,0,.7); }
.app h3 { margin-bottom: .42rem; }
.app p { font-size: .9375rem; line-height: 1.48; color: var(--txt-3); }
.app-link {
  display: inline-block; margin-top: .8rem;
  font-size: .875rem; font-weight: 600; color: #E4DAFF;
}
.app-link::after { content: " \2192"; }

/* -------------------------------------------------------------- final + footer */

.final { padding-block: clamp(96px, 15vh, 190px); }
.final h2 { font-size: clamp(2.2rem, 5vw, 3.9rem); }

.foot { padding: clamp(56px, 7vw, 88px) 0 clamp(34px, 4vw, 52px); border-top: 1px solid rgba(255,255,255,.09); }
.foot-in {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(130px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.foot-brand img { border-radius: 11px; margin-bottom: 1rem; }
.foot-brand p { font-size: .9375rem; line-height: 1.5; color: var(--txt-3); max-width: 34ch; }
.foot-col { display: grid; align-content: start; gap: .68rem; }
.foot-col h4 { margin-bottom: .3rem; }
.foot-col a { font-size: .9375rem; color: var(--txt-2); transition: color .18s; }
.foot-col a:hover { color: var(--accent); }

.foot-bottom {
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid rgba(255,255,255,.07);
  display: grid; gap: .8rem;
  font-size: .875rem; color: var(--txt-4);
}
.foot-bottom .sep { margin-inline: .5em; opacity: .5; }
.foot-bottom time { color: var(--txt-3); }
.langs { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.langs a { color: var(--txt-3); transition: color .18s; }
.langs a:hover { color: var(--accent); }

/* -------------------------------------------------------------- sticky cta */

.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translate(-50%, 130%);
  width: min(560px, calc(100% - 28px));
  z-index: 80;
  display: flex; align-items: center; gap: .9rem;
  padding: 10px 10px 10px 14px;
  border-radius: var(--r-pill);
  transition: transform .5s var(--ease-out), opacity .3s;
  opacity: 0;
}
.sticky-cta[hidden] { display: flex; }         /* animate instead of vanishing */
/* Off screen means out of the tab order too, or a keyboard user lands on a
   control they cannot see. inert would be tidier but is not old enough yet. */
.sticky-cta { visibility: hidden; }
.sticky-cta.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.sticky-cta img { border-radius: 9px; flex: none; }
.sticky-cta div { display: grid; line-height: 1.24; min-width: 0; }
.sticky-cta b { font-size: .9375rem; font-weight: 620; }
.sticky-cta span {
  font-size: .8125rem; color: var(--txt-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sticky-cta .btn-small { margin-inline-start: auto; flex: none; }

/* -------------------------------------------------------------- docs */

.doc-body { padding-block: clamp(56px, 8vh, 96px) clamp(72px, 10vh, 128px); }
.doc-body h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin-bottom: 1.2rem; }
.doc-body h2 { font-size: clamp(1.35rem, 2.2vw, 1.72rem); margin-top: 2.8rem; margin-bottom: .9rem; }
.doc-body h3 { margin-top: 1.9rem; margin-bottom: .5rem; }
.doc-body p, .doc-body li { color: var(--txt-2); font-size: 1rem; line-height: 1.66; }
.doc-body p { margin-bottom: 1rem; }
.doc-body ul { margin: 0 0 1.4rem; padding-inline-start: 1.3rem; display: grid; gap: .55rem; }
.doc-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc-body strong { color: var(--txt); font-weight: 620; }
.todo { background: #FFB340; color: #1A0E00; padding: 0 .3em; }
.doc-date { font-size: .875rem; color: var(--txt-4); margin-bottom: 2rem; }
.doc-lede { font-size: 1.12rem; line-height: 1.55; color: var(--txt) !important; }
.doc-body .qa-list { margin: 1.5rem 0 2rem; }
.doc-body .fine { margin-top: 3rem; }

/* -------------------------------------------------------------- reveal */

/* Only hide what the observer is going to bring back. Without the .js gate a
   reader with scripting off, or a crawler that does not run it, gets a page of
   empty sections. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { max-width: 30rem; margin-inline: auto; }
  .hero .lede { margin-inline: auto; }
  .hero-cta, .trust { justify-content: center; }
  .hero-art { margin-top: clamp(30px, 6vw, 56px); }
  .feature-in, .feature-left .feature-in { grid-template-columns: 1fr; text-align: center; }
  .feature-left .feature-art { order: 0; }
  .feature-copy .lede { margin-inline: auto; }
  .ticks, .pointlist { text-align: start; max-width: 46ch; margin-inline: auto; }
  /* Centred body copy is unreadable past two lines. Headings and eyebrows stay
     centred, running prose goes back to the left edge. */
  .feature-copy .lede, .problem .lede, .ways .lede, .pricing .lede { text-align: start; }
  .disclosure { text-align: start; }
  .ba { max-width: 46ch; margin-inline: auto; text-align: start; }
  .feature-art { margin-top: clamp(28px, 5vw, 48px); }
  .nav-links { display: none; }
  .foot-in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  :root { --sec: clamp(66px, 11vh, 104px); --r-lg: 24px; --r-md: 18px; }
  .chip-size { left: -7%; top: 28%; }
  .chip { font-size: .8125rem; padding: .48rem .78rem; }
  .foot-in { grid-template-columns: 1fr; }
  .sticky-cta span { display: none; }
  .ba { grid-template-columns: 1fr; }
  /* The only thing in the bar whose width depends on the language. Below this
     the globe has to carry the meaning on its own, which it does: the control
     still opens the same menu, and the screen reader label stays. */
  .lang-name { display: none; }
  .lang summary { padding-inline: .55rem; }
}

/* -------------------------------------------------------------- preferences */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal], [data-reveal] { opacity: 1 !important; transform: none !important; }
  .chip { animation: none; }
}

/* Someone who has asked the system for less transparency gets a solid panel.
   The rim and the shadow stay, so the design still reads as layered. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn-ghost, .lang-menu, .sticky-cta {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(16, 12, 34, .92);
  }
  .plan-featured { background: rgba(38, 24, 72, .95); }
}

@media (prefers-contrast: more) {
  :root { --txt-2: rgba(255,255,255,.92); --txt-3: rgba(255,255,255,.8); --txt-4: rgba(255,255,255,.68); }
  .glass::before { background: rgba(255,255,255,.5); }
}

@media print {
  .field, .nav, .sticky-cta, .hero-art, .feature-art, .phone { display: none !important; }
  body { background: #fff; color: #111; }
  /* Every colour on this page is a light-on-dark token. Printing without
     reversing them leaves a stack of blank paper. */
  :root {
    --txt: #111; --txt-2: #333; --txt-3: #555; --txt-4: #666;
    --accent: #5B2BB8; --keep: #0A6E2E; --discard: #A32018;
  }
  .glass, .plan, .review, .qa, .app, .stat, .included {
    background: #fff !important; box-shadow: none !important;
    border: 1px solid #ccc; backdrop-filter: none !important;
  }
  .glass::before, .glass::after { display: none; }
  h1 .grad, .stat b { -webkit-text-fill-color: #111; color: #111; }
  .qa-body { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}