/* ==========================================================================
   PRESETS — the main set every text, box and image on the site is built from.
   Put preset classes in the markup; components (components.css) add only layout and behavior on top.
   Four families:  TEXT (.text-*)  ·  SHAPE (.pill-1/2/3)  ·  FILL (.fill-*)  ·  IMAGE (.img, .window, .window-fixed)
   Flat design: no preset ever sets a shadow.
   ========================================================================== */


/* ---------- TEXT presets: size token + weight (+ color where the role needs it) ---------- */
.text-display   { font-size: var(--fs-5); font-weight: 700; }                       /* hero title, H2, big numbers */
.text-title     { font-size: var(--fs-4); font-weight: 700; }                       /* page titles */
.text-fine      { font-size: var(--fs-0); line-height: var(--lh-fine); letter-spacing: var(--tracking-fine); } /* fine print: descriptions, prices, lists, notes (the only text with looser line and letter spacing) */
.text-xl-button { font-size: var(--fs-4); font-weight: 700; text-transform: uppercase; } /* COMPRE */
.text-ui        { font-size: var(--fs-3); }                                         /* pills, stat labels */
.text-ui-bold   { font-size: var(--fs-3); font-weight: 700; }                       /* feature pills, footer CTA */
.text-label     { font-size: var(--fs-3); color: var(--blue-500); text-align: right; margin-bottom: 0.5em; } /* section labels */
.text-body      { font-size: var(--fs-2); }                                         /* paragraphs (the document default) */
.text-nav       { font-size: var(--fs-1); }                                         /* desktop nav */
.text-small     { font-size: var(--fs-1); }                                         /* footer links, copyright, placeholders */
@media (max-width: 719px) { .text-nav { font-size: var(--fs-2); } }                 /* the mobile dropdown is touch-sized */

/* text modifiers (they never change size) */
.text-bold   { font-weight: 700; }
.text-upper  { text-transform: uppercase; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-justify { hyphens: none; overflow-wrap: normal; } /* long answers: justified once the column is wide enough, left-aligned on phones; words are never hyphenated or broken */
@media (min-width: 640px) { .text-justify { text-align: justify; } }
.text-blue   { color: var(--blue-500); }
.text-white  { color: var(--color-white); }
/* text painted with the liquid gradient: pair with .fill-liquid (the gradient shows through the letters) */
/* line-height .9 makes the text box shorter than the letters, and the gradient only paints inside the box — so the box is
   extended downward by --descent (the tails of g, q, p, y) and the layout is kept with an equal negative margin */
.text-liquid {
  --descent: 0.2em;
  width: fit-content; padding-bottom: var(--descent); margin-bottom: calc(-1 * var(--descent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}


/* ---------- SHAPE presets: the pill standard — three radii, nothing else ----------
   pill 1 = the biggest, major sections · pill 2 = the common pill, buttons and windows ·
   pill 3 = the smallest, only for a pill inside a pill 2 (knob, dots).
   Each also exposes its radius as --r so components can build concentric inner shapes (radius − rim). */
.pill-1     { --r: var(--pill-1); border-radius: var(--r); }
.pill-2     { --r: var(--pill-2); border-radius: var(--r); }
.pill-3     { --r: var(--pill-3); border-radius: var(--r); }
.pill-1-top { --r: var(--pill-1); border-radius: var(--r) var(--r) 0 0; }           /* footer: rounded on top only */
/* The one circle in the site (exception): step buttons of a carousel, which sit on a photo inside a pill-2 window. */
.pill-circle { --r: 50%; border-radius: var(--r); }
.pill-capsule { --r: var(--pill-capsule); border-radius: var(--r); }   /* the product color swatches: a tall capsule */


/* ---------- FILL presets: background + the text color that goes with it ---------- */
/* Liquid glass, "wavy": a deep blue base (blue-500) crossed by soft light RIBBONS (blue-200 / blue-300), like the reference image. A ribbon is a very
   large soft ELLIPTICAL RING (a radial-gradient that is transparent inside, bright at ~64% of its radius, transparent again outside) whose layer is far
   bigger than any shape (multiples of --liquid-blob, the same on every shape): the shape is only a window onto it, so it sees a curved band sweeping across
   (a small pill just a calm slice of it). Rings of different proportions bend differently and two of them cross into an S; a round glow and a broad
   blue-400 mid tone fill the rest. With % positions each layer travels |shape − layer| of the shape, so the ribbons really glide and change curvature
   (~14s cycle, alternating; neighbours are offset with nth-child). Also the hover "flood" layer (.flood-liquid). --liquid-light / --liquid-mid are the ribbon colors
   (r g b): the gradient TITLES (.text-liquid) and the wordmark, which sit on white, cap them at blue-400 / blue-500 so no letter fades into the page. Plain gradients only: no image, no
   filter, no script — the same paint cost as any other gradient background. */
.fill-liquid,
.flood-liquid::before,
.ring-liquid::after {
  --liquid-light: 125 202 239;   /* blue-200: the lightest ribbon */
  --liquid-mid: 85 182 229;      /* blue-300: the other ribbons */
  background-color: var(--blue-500);
  background-image:
    radial-gradient(closest-side, rgb(var(--liquid-light) / 0) 42%, rgb(var(--liquid-light) / 0.75) 60%, rgb(var(--liquid-light) / 0) 78%),   /* light ribbon, top left, curving down to the right */
    radial-gradient(closest-side, rgb(var(--liquid-mid) / 0) 42%, rgb(var(--liquid-mid) / 0.95) 58%, rgb(var(--liquid-mid) / 0) 74%),                                 /* blue-300 ribbon, right, sweeping to the bottom right */
    radial-gradient(closest-side, rgb(var(--liquid-light) / 0) 48%, rgb(var(--liquid-light) / 0.4) 64%, rgb(var(--liquid-light) / 0) 78%),   /* wide, flat, faint ribbon */
    radial-gradient(closest-side, rgb(var(--liquid-mid) / 0) 44%, rgb(var(--liquid-mid) / 0.5) 60%, rgb(var(--liquid-mid) / 0) 76%),                                /* tall ribbon, right side */
    radial-gradient(circle closest-side, rgb(var(--liquid-light) / 0.8), rgb(var(--liquid-light) / 0.45) 40%, rgb(var(--liquid-light) / 0)),  /* glow, bottom right */
    radial-gradient(circle closest-side, rgb(50 162 216 / 0.22), rgb(50 162 216 / 0.1) 55%, rgb(50 162 216 / 0));                                /* blue-400: the mid tone */
  background-size:
    var(--liquid-wave) calc(var(--liquid-wave) * 0.61), calc(var(--liquid-wave) * 0.78) calc(var(--liquid-wave) * 0.78),
    calc(var(--liquid-wave) * 1.1) calc(var(--liquid-wave) * 0.44), calc(var(--liquid-wave) * 0.55) var(--liquid-wave),
    calc(var(--liquid-blob) * 1.3) calc(var(--liquid-blob) * 1.3), calc(var(--liquid-blob) * 2.6) calc(var(--liquid-blob) * 2.6);
  background-repeat: no-repeat;
  background-position: 93% 18%, 49% 10%, 40% 30%, -98% 50%, 104% 163%, 8% 52%;
  animation: liquid-drift 14s ease-in-out infinite alternate;
}.fill-liquid { color: var(--color-white); }
/* .ring-liquid: a fine ring of the liquid gradient drawn over the outer edge of a shape (its width is --ring): the shape's own fill ends exactly under it, so
   nothing of that fill shows outside the ring. The ring is a pseudo-element painted with the gradient and cut out to a frame with a gradient mask (works on file://). */
.ring-liquid::after {
  content: ""; position: absolute; inset: 0; z-index: 2; box-sizing: border-box; border-radius: inherit; padding: var(--ring, var(--rim)); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* letters / a mask over WHITE (gradient titles, the wordmark): a small window would often see only a light ribbon and the text would fade into the page, so the lightest ribbon stops at blue-400 and the others at blue-500 */
.fill-liquid.text-liquid, .logo.fill-liquid { --liquid-light: 50 162 216; --liquid-mid: 15 138 197; }   /* blue-400 / blue-500 */
.fill-liquid:nth-child(2n) { animation-delay: -5s; animation-duration: 16s; }
.fill-liquid:nth-child(3n) { animation-delay: -9s; animation-duration: 12s; }
.fill-liquid:nth-child(5n) { animation-delay: -3s; animation-duration: 17s; }

@keyframes liquid-drift {
  0%   { background-position: 93% 18%, 49% 10%, 40% 30%, -98% 50%, 104% 163%, 8% 52%; }
  50%  { background-position: 71% 22%, 61% 16%, 49% 37%, -57% 52%, 96% 140%, 30% 55%; }
  100% { background-position: 55% 26%, 74% 21%, 59% 44%, -15% 55%, 108% 120%, 20% 50%; }
}
/* hover flood colors (the flood layer of a .flood element): liquid blue over a white shape, white over a blue one;
   .flood-flush = no rim (for controls that sit on a photo) */
.flood-white::before { background: var(--color-white); }
.flood-flush { --rim: 0px; }

.fill-white       { background-color: var(--color-white); color: var(--blue-500); }   /* white shape, blue text */
.fill-black       { background-color: var(--color-black); color: var(--color-white); } /* hero */
.fill-placeholder { background-color: #ff0000; color: var(--color-white); }            /* missing image (spec: plain red) */


/* ---------- IMAGE presets ---------- */
.img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* every photo fills its box */
.window { overflow: hidden; }                                             /* a box that crops its photo (with a pill radius) */

/* Fixed-background window: the photo is pinned to the screen and the rounded window scrolls over it
   (a position:fixed image inside a clip-path window — not background-attachment:fixed, which iOS ignores).
   Never put a transform (e.g. data-reveal) on this element: it would break the fixed positioning. */
.window-fixed { position: relative; clip-path: inset(0 round var(--r)); }
.window-fixed > .img { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100lvh; }


@media (prefers-reduced-motion: reduce) {
  .fill-liquid, .flood-liquid::before, .ring-liquid::after { animation: none; }
  .window-fixed > .img { position: absolute; width: 100%; height: 100%; }
}