/* ==========================================================================
   Gyftup landing page.
   Self-contained: loaded only by layouts/landing.php, so nothing here can
   destabilise app.css, which every signed-in screen depends on.

   Rules this file keeps to:
     - No gradients anywhere. Colour is always solid.
     - No glass, no blur, minimal shadow. Hierarchy comes from colour
       contrast, thin ink rules, scale and photographic cropping.
     - Fonts are system stacks. The Content-Security-Policy is
       default-src 'self', so webfont CDNs are blocked outright - a stack
       led by ui-rounded gives a genuinely warm, rounded display face on
       Apple platforms and degrades sensibly elsewhere.
   ========================================================================== */

.lp {
  /* Surfaces */
  --cream:      #FBF7EF;
  --cream-2:    #F4EEE1;
  --ink:        #111119;
  --forest:     #10312A;
  --paper:      #FFFFFF;

  /* Accents. Each has a job; they are not sprinkled everywhere. */
  --coral:      #FF5A3C;   /* primary emphasis, gifting energy */
  --orange:     #FF8A1E;   /* warmth, secondary highlights */
  --yellow:     #F6C445;   /* celebration, rewards */
  --turquoise:  #16B8A6;   /* businesses, venues */
  --cobalt:     #2F4BF0;   /* structure, links, editorial marks */
  --pink:       #FF7DA8;   /* personal profiles, wishlists */
  /* Verification only. Lifted straight off the app icon, which uses this violet
     and magenta and had no presence on the landing page at all, so the trust
     section reads as the same product without repeating a colour that already
     means something else here. */
  --violet:     #6D3BF5;   /* verified, identity */
  --magenta:    #C81E78;   /* verified, secondary */

  /* Deeper variants for SMALL text on light surfaces. The brand colours above
     are tuned for large fills; at label size they fall under 3:1 on cream, so
     anything set in them at body size uses these instead. */
  --coral-text: #C6341B;
  --turq-text:  #0A7A6E;

  /* Coral as a SOLID FILL behind white text. The bright coral measures 3.1:1
     against white, which is fine under a huge sticker headline but fails for
     button and tag labels. This deeper shade clears white text at ~5.8:1 -
     comfortably past the 4.5:1 floor rather than sitting right on it - and
     still reads as coral. */
  --coral-deep: #BF2F16;

  --on-dark:    #FBF7EF;
  --muted:      #5C5949;
  --muted-dark: rgba(251,247,239,.72);
  --rule:       #1B1A16;

  --display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
             "Segoe UI", Nunito, Quicksand, system-ui, -apple-system, sans-serif;
  --body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pad: calc(var(--spacing-scale, 1) * clamp(20px, 5vw, 72px));
  --maxw: 1240px;

  /* Admin-controlled spacing theme, scoped to this page only (app.css carries
     its own copy for the signed-in app). 1 is the exact off-state: every
     calc(var(--spacing-scale, 1) * ...) below multiplies by 1, so nothing on
     this page moves until the switch is on. Doing it as one multiplier rather
     than a per-value token table (the approach app.css uses) fits this file
     better - nearly everything here is already a responsive clamp(), and
     multiplying the whole clamp() keeps its floor/ceiling shape intact rather
     than needing a second hand-picked clamp per declaration. for-page.css and
     pos-page.css read this same variable: both are loaded on pages wrapped in
     this .lp element, so it reaches them by ordinary inheritance. See
     App\Services\SpacingTheme and Admin > Config > Spacing theme. */
  --spacing-scale: 1;

  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: clip;              /* asymmetry and rotation must never scroll the page */
}

/* The roomier theme for every page this stylesheet serves (home, /for/*,
   /pos): one multiplier re-scales every clamp()/px padding, margin, gap and
   border-radius already wrapped below, pill and circle shapes aside (those
   stay a shape, not a spacing value, same as everywhere else this theme
   touches). */
[data-spacing-theme="roomy"] .lp { --spacing-scale: 1.15; }

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- structure */

.lp-wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.lp-section { padding-block: calc(var(--spacing-scale, 1) * clamp(64px, 11vw, 148px)); position: relative; }
.lp-section.tight { padding-block: calc(var(--spacing-scale, 1) * clamp(44px, 7vw, 92px)); }

.lp-dark   { background: var(--ink);   color: var(--on-dark); }
.lp-forest { background: var(--forest); color: var(--on-dark); }
.lp-warm   { background: var(--cream-2); }
.lp-dark .lp-lead, .lp-forest .lp-lead { color: var(--muted-dark); }

/* Large curved entrance into a colour change, per the reference language. */
.lp-curve-top    { border-radius: calc(var(--spacing-scale, 1) * clamp(28px, 6vw, 64px)) calc(var(--spacing-scale, 1) * clamp(28px, 6vw, 64px)) 0 0; }
.lp-curve-bottom { border-radius: 0 0 calc(var(--spacing-scale, 1) * clamp(28px, 6vw, 64px)) calc(var(--spacing-scale, 1) * clamp(28px, 6vw, 64px)); }

/* An inset colour block: the section pulls in from the page edges so cream shows
   down both sides, which stops a dark band running edge to edge and gives the
   panel the printed, placed-on-the-page feel of the references. */
.lp-inset {
  margin-inline: calc(var(--spacing-scale, 1) * clamp(12px, 3vw, 44px));
  border-radius: calc(var(--spacing-scale, 1) * clamp(20px, 3.4vw, 40px));
}
/* The inner wrap already pads, but an inset block needs a little less or the
   text ends up marooned in the middle of it. */
.lp-inset > .lp-wrap { padding-inline: calc(var(--spacing-scale, 1) * clamp(18px, 3.6vw, 56px)); }

/* A thin ink rule does the work a card border would otherwise do. */
.lp-rule { height: 1px; background: var(--rule); opacity: .16; border: 0; margin: 0; }

/* ------------------------------------------------------------- typography */

.lp h1, .lp h2, .lp h3, .lp .lp-display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: .96;
  margin: 0;
  text-wrap: balance;
}
.lp h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); }
.lp h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
.lp h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.06; }

.lp-eyebrow {
  font-family: var(--body);
  font-style: italic;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral-text);   /* small uppercase text needs the deeper coral */
  margin: 0 0 calc(var(--spacing-scale, 1) * 14px);
}
/* The hero paints its own forest background rather than carrying .lp-forest, so
   it needs listing here too - otherwise the eyebrow keeps the deep coral meant
   for cream and drops to 2.6:1 on green. */
.lp-dark .lp-eyebrow, .lp-forest .lp-eyebrow, .lp-hero .lp-eyebrow { color: var(--yellow); }

.lp-lead {
  font-size: clamp(1.02rem, 1.55vw, 1.22rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
  margin: calc(var(--spacing-scale, 1) * 18px) 0 0;
}
.lp-caption { font-size: .92rem; line-height: 1.5; color: var(--muted); margin: calc(var(--spacing-scale, 1) * 8px) 0 0; }
/* The footer is its own dark surface without .lp-dark, so it is listed too -
   otherwise its captions keep the colour meant for cream and sit at 2.7:1. */
.lp-dark .lp-caption, .lp-forest .lp-caption, .lp-footer .lp-caption { color: var(--muted-dark); }

/* Sticker label: a printed, slightly-misaligned highlight on one word. */
.lp-sticker {
  display: inline-block;
  padding: .06em .34em .12em;
  border-radius: calc(var(--spacing-scale, 1) * 10px);
  color: #fff;
  background: var(--coral);
  transform: rotate(-2.2deg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Orange and turquoise are light enough that white on them fails even the
   large-text threshold, so those two take ink. Coral and cobalt are dark
   enough to carry white. */
.lp-sticker.s-orange { background: var(--orange); color: var(--ink); }
.lp-sticker.s-yellow { background: var(--yellow); color: var(--ink); }
.lp-sticker.s-cobalt { background: var(--cobalt); }
.lp-sticker.s-turq   { background: var(--turquoise); color: var(--ink); }
.lp-sticker.s-pink   { background: var(--pink); color: var(--ink); }
.lp-sticker.s-violet { background: var(--violet); }
.lp-sticker.tilt-r   { transform: rotate(1.8deg); }

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

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--spacing-scale, 1) * 10px);
  min-height: 54px; padding: 0 calc(var(--spacing-scale, 1) * 30px);
  font-family: var(--display); font-size: 1.04rem; font-weight: 800;
  border-radius: 999px; border: 2px solid transparent;
  background: var(--ink); color: var(--cream);
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.lp-btn:hover { background: #000; transform: translateY(-2px); }
.lp-btn.b-coral { background: var(--coral-deep); color: #fff; }
.lp-btn.b-coral:hover { background: #9C2610; }
.lp-btn.b-cream { background: var(--cream); color: var(--ink); }
.lp-btn.b-cream:hover { background: #fff; }
.lp-btn.b-ghost {
  background: transparent; border-color: currentColor; color: inherit;
}
.lp-btn.b-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.lp-dark .lp-btn.b-ghost:hover, .lp-forest .lp-btn.b-ghost:hover {
  background: var(--cream); color: var(--ink); border-color: var(--cream);
}
.lp-btn:focus-visible, .lp a:focus-visible, .lp button:focus-visible {
  outline: 3px solid var(--cobalt); outline-offset: 3px;
}

/* ------------------------------------------------------------ photo slots */

/* Every photograph is a real <img>. When the file is absent the browser
   fires onerror, we mark the frame, and a designed ink-and-paint panel shows
   instead - so the page reads as intentional today and becomes photographic
   the moment a real image is dropped in. */
.lp-photo {
  position: relative; overflow: hidden;
  border-radius: calc(var(--spacing-scale, 1) * clamp(18px, 3vw, 34px));
  background: var(--cream-2);
  isolation: isolate;
}
.lp-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.lp-photo:hover img { transform: scale(1.035); }
.lp-photo.is-empty img { display: none; }
.lp-photo.tall  { aspect-ratio: 4 / 5; }
.lp-photo.wide  { aspect-ratio: 16 / 10; }
.lp-photo.square{ aspect-ratio: 1 / 1; }

/* The stand-in: solid colour, ink outline, paint marks. Never a grey box. */
.lp-photo .lp-stand-in {
  display: none;
  position: absolute; inset: 0;
  align-items: flex-end; justify-content: flex-start;
  padding: calc(var(--spacing-scale, 1) * clamp(16px, 3vw, 30px));
  background: var(--cream-2);
  border: 2px solid var(--ink);
  border-radius: inherit;
}
.lp-photo.is-empty .lp-stand-in { display: flex; }
.lp-stand-in .si-label {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(.86rem, 1.5vw, 1.02rem); line-height: 1.2;
  color: var(--ink); max-width: 22ch;
}
/* A stand-in tinted to a dark section needs light text and a light outline;
   ink on forest measured 1.34:1, which is effectively invisible. */
.lp-dark .lp-stand-in, .lp-forest .lp-stand-in { border-color: rgba(251,247,239,.4); }
.lp-dark .lp-stand-in .si-label, .lp-forest .lp-stand-in .si-label { color: var(--on-dark); }
.lp-stand-in .si-art { position: absolute; inset: 0; z-index: 1; }
.lp-stand-in .si-art svg { width: 100%; height: 100%; display: block; }

/* Photographic cut-out treatment, used sparingly so photos stay premium. */
.lp-photo.mask-arch { border-radius: 50% 50% calc(var(--spacing-scale, 1) * clamp(18px,3vw,34px)) calc(var(--spacing-scale, 1) * clamp(18px,3vw,34px)) / 34% 34% 4% 4%; }

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

.lp-hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid; align-items: center;
  background: var(--forest);
  color: var(--on-dark);
  overflow: hidden;
}
.lp-hero-grid {
  position: relative; z-index: 4;    /* above the photograph, veil and paint */
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: calc(var(--spacing-scale, 1) * clamp(96px, 12vh, 150px)) var(--pad) calc(var(--spacing-scale, 1) * clamp(48px, 8vh, 90px));
  display: grid; gap: calc(var(--spacing-scale, 1) * clamp(28px, 4vw, 56px));
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
}
.lp-hero h1 { color: var(--on-dark); }
.lp-hero .lp-lead { color: var(--muted-dark); max-width: 40ch; }
.lp-hero-cta { margin-top: calc(var(--spacing-scale, 1) * clamp(24px, 3.4vw, 38px)); display: flex; }

/* The photograph is the hero's ground. Sits at the very back, cropped to fill. */
.lp-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lp-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.lp-hero-bg.is-empty img { display: none; }

/* A heavy FLAT veil - no gradient, per the brief. Dark enough that white type
   and the coral button stay comfortably above contrast minimums over any part
   of the photograph, sheer enough that the picture still reads through it.
   With no photograph behind it this simply deepens the forest ground, so a
   missing file costs nothing. */
/* 88% rather than a lighter veil for a measured reason: the brightest part of
   the artwork is a yellow paint splash at rgb(250,235,76). Composited under
   88% this leaves white type at about 13:1 and, more importantly, keeps the
   coral button at just over 3:1 against its surroundings so the primary action
   stays distinguishable wherever it lands. At 84% the button dropped to 2.7:1. */
.lp-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(9, 22, 19, .88);
}

/* Paint marks over the veil, solid and flat. Kept low so they read as texture
   rather than muddying the photograph underneath. */
.lp-hero-paint { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55; }
.lp-hero-paint svg { width: 100%; height: 100%; }

/* Clears the next section, which is pulled up over the hero to make the curved
   entrance; at 26px the hint sat underneath it. */
.lp-scroll-hint {
  position: absolute; left: var(--pad); bottom: 62px; z-index: 4;
  display: inline-flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 10px);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-dark);
}

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

/* Analogue face, digital readout: a transfer settling in under two minutes.
   Sits where the cut-out artwork used to, now that the photograph has moved
   behind the whole hero. */
.lp-clock { display: grid; justify-items: center; gap: calc(var(--spacing-scale, 1) * 20px); }

.ck-face {
  position: relative;
  width: clamp(280px, 33vw, 420px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.ck-face svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Darkens the face so the dial reads as a solid object on the photograph and
   the readout keeps its contrast over the bright patches of artwork. */
.ck-plate { fill: rgba(3, 10, 9, .66); }

.ck-track { fill: none; stroke: rgba(251,247,239,.14); stroke-width: 6; }
.ck-ticks line { stroke: rgba(251,247,239,.34); stroke-linecap: round; }

/* The depleting ring. Rotated so it starts at twelve o'clock.
   transform-box is stated rather than left to the initial value because the two
   candidates disagree here: view-box makes 50% resolve against the 200x200
   viewBox, border-box against the element's own bounding box. */
.ck-arc {
  fill: none; stroke: var(--yellow); stroke-width: 6; stroke-linecap: round;
  transform-box: view-box; transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

/* The hand pivots from the middle of the viewBox. The rotation is applied as a
   CSS transform by the script, never as a rotate(angle cx cy) attribute: that
   attribute maps into the same CSS transform property, so the centre it names
   would be applied on top of transform-origin below and the hand would swing
   about a point 100 units off, right outside the dial. */
.ck-hand {
  stroke: var(--coral); stroke-width: 3.4; stroke-linecap: round;
  transform-box: view-box; transform-origin: 100px 100px;
}
.ck-pin { fill: var(--coral); }

.ck-readout {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: calc(var(--spacing-scale, 1) * 2px); text-align: center;
}
/* The readout is HTML rather than SVG, so it does not scale with the dial the
   way the ticks and ring do - these have to be stepped up by hand to keep the
   same proportion inside the bigger face. */
.ck-time {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.8rem, 5.2vw, 3.9rem); line-height: 1;
  letter-spacing: -.02em; color: var(--on-dark);
  font-variant-numeric: tabular-nums;   /* stops the digits jittering as they tick */
  font-feature-settings: "tnum" 1;
}
.ck-state {
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--yellow);
}

/* The completion mark fades in over the readout once the transfer lands.
   Selector has to out-rank `.ck-face svg` above, which stretches every SVG in
   the dial to fill it - otherwise the tick swells to the full 210px face and
   buries the clock instead of landing inside it. Sized and offset in percent
   so it stays centred as the face scales with the viewport. */
.ck-face svg.ck-tick-done {
  position: absolute; z-index: 3;
  inset: auto; top: 27%; left: 27%;
  width: 46%; height: 46%; color: var(--turquoise);
  opacity: 0; transform: scale(.6);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.4,.4,1);
}
.lp-clock.is-done .ck-tick-done { opacity: 1; transform: scale(1); }
.lp-clock.is-done .ck-readout { opacity: 0; transition: opacity .3s ease; }
.lp-clock.is-done .ck-arc { stroke: var(--turquoise); }
.lp-clock.is-done .ck-hand { opacity: 0; transition: opacity .3s ease; }

.ck-label {
  margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600;
  color: var(--muted-dark); text-align: center; min-height: 1.5em;
}
/* The "morph": each new recipient rises and resolves rather than snapping. */
.ck-label.morph { animation: ck-morph .5s cubic-bezier(.2,.7,.3,1); }
@keyframes ck-morph {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.lp-clock.is-done .ck-label { color: var(--on-dark); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ck-label.morph { animation: none; }
  .ck-tick-done { transition: none; }
}

/* -------------------------------------------------------------- editorial */

.lp-split {
  display: grid; gap: calc(var(--spacing-scale, 1) * clamp(28px, 5vw, 72px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.lp-split.rev > :first-child { order: 2; }
.lp-split .lp-copy { min-width: 0; }

/* Heading beside its supporting panel. Slightly wider on the left so the
   headline keeps its line breaks, and top-aligned rather than centred so the
   panel reads as sitting next to the claim it evidences. */
.lp-split.lp-split-lead {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: start;
}
/* The one lp-split-lead pairing where the panel is a short scatter of cards
   beside several long paragraphs, not a short heading beside its panel - top
   alignment left the cards stranded near the top of a much taller row. */
.lp-split-lead.rev {
  align-items: center;
}

/* An outlined editorial panel, occasionally tilted. Replaces the card grid. */
.lp-panel {
  border: 2px solid var(--ink);
  border-radius: calc(var(--spacing-scale, 1) * clamp(16px, 2.4vw, 26px));
  padding: calc(var(--spacing-scale, 1) * clamp(20px, 3vw, 34px));
  background: transparent;
}
.lp-dark .lp-panel, .lp-forest .lp-panel { border-color: rgba(251,247,239,.34); }
.lp-panel.tilt-a { transform: rotate(-1.1deg); }
.lp-panel.tilt-b { transform: rotate(.9deg); }

/* Marker used down the left of a list of ideas, instead of separate cards. */
.lp-points { list-style: none; margin: calc(var(--spacing-scale, 1) * 26px) 0 0; padding: 0; display: grid; gap: calc(var(--spacing-scale, 1) * 16px); }
.lp-points li {
  display: grid; grid-template-columns: 26px 1fr; gap: calc(var(--spacing-scale, 1) * 14px); align-items: start;
  font-size: 1rem; line-height: 1.5;
}
.lp-points .pt-mark {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coral); color: #fff; flex: none;
}
.lp-points .pt-mark svg { width: 14px; height: 14px; }
.lp-points.m-turq  .pt-mark { background: var(--turquoise); }
.lp-points.m-cobalt .pt-mark { background: var(--cobalt); }
.lp-points.m-violet .pt-mark { background: var(--violet); }
.lp-points.m-pink   .pt-mark { background: var(--pink); color: var(--ink); }
.lp-points.m-yellow .pt-mark { background: var(--yellow); color: var(--ink); }

/* ------------------------------------------------------------ phone mock */

/* Deliberately restrained: one obvious action, no dashboard clutter. */
/* Sized so the interface reads as a real thing rather than a thumbnail. It is
   carrying the "one obvious action" story, so the words have to be legible at a
   glance instead of implied. */
.lp-phone {
  width: min(370px, 90vw); margin-inline: auto;
  border: 3px solid var(--ink); border-radius: calc(var(--spacing-scale, 1) * 38px);
  background: var(--paper); color: var(--ink); padding: calc(var(--spacing-scale, 1) * 16px);
  box-shadow: 0 26px 60px rgba(17,17,25,.18);
}
.lp-phone .ph-bar {
  height: 5px; width: 84px; border-radius: 99px;
  background: var(--ink); opacity: .18; margin: calc(var(--spacing-scale, 1) * 2px) auto calc(var(--spacing-scale, 1) * 18px);
}
.lp-phone .ph-row {
  display: flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 14px);
  padding: calc(var(--spacing-scale, 1) * 15px); border: 1.5px solid var(--ink); border-radius: calc(var(--spacing-scale, 1) * 16px); margin-bottom: calc(var(--spacing-scale, 1) * 12px);
}
.lp-phone .ph-row.sel { border-color: var(--coral); border-width: 2.5px; }
.lp-phone .ph-av {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--turquoise); display: grid; place-items: center; color: #fff;
}
.lp-phone .ph-av svg { width: 23px; height: 23px; }
.lp-phone .ph-av.c-pink { background: var(--pink); color: var(--ink); }
.lp-phone .ph-t { font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.lp-phone .ph-s { font-size: .94rem; color: var(--muted); }
.lp-phone .ph-note {
  border: 1.5px dashed var(--ink); border-radius: calc(var(--spacing-scale, 1) * 16px);
  padding: calc(var(--spacing-scale, 1) * 15px); font-size: 1rem; line-height: 1.45; color: var(--muted); margin-bottom: calc(var(--spacing-scale, 1) * 14px);
}
.lp-phone .ph-send {
  height: 56px; border-radius: 999px; background: var(--coral-deep); color: #fff;
  display: grid; place-items: center; font-family: var(--display);
  font-weight: 800; font-size: 1.1rem;
}

/* ---------------------------------------------------------- how it works */

.lp-steps { display: grid; gap: calc(var(--spacing-scale, 1) * clamp(20px, 3vw, 30px)); margin-top: calc(var(--spacing-scale, 1) * clamp(34px, 5vw, 56px)); }
.lp-step {
  position: relative;
  border: 2px solid var(--ink); border-radius: calc(var(--spacing-scale, 1) * clamp(16px, 2.2vw, 24px));
  padding: calc(var(--spacing-scale, 1) * clamp(22px, 3vw, 34px)) calc(var(--spacing-scale, 1) * clamp(22px, 3vw, 38px));
  background: var(--cream);
  display: grid; grid-template-columns: auto 1fr; gap: calc(var(--spacing-scale, 1) * clamp(16px, 2.4vw, 26px)); align-items: center;
}
.lp-step:nth-child(1) { transform: rotate(-.85deg); margin-right: calc(var(--spacing-scale, 1) * clamp(0px, 8vw, 90px)); }
.lp-step:nth-child(2) { transform: rotate(.6deg);  margin-left: calc(var(--spacing-scale, 1) * clamp(0px, 6vw, 64px)); }
.lp-step:nth-child(3) { transform: rotate(-.5deg); margin-right: calc(var(--spacing-scale, 1) * clamp(0px, 5vw, 54px)); }
.lp-step:nth-child(4) { transform: rotate(.75deg); margin-left: calc(var(--spacing-scale, 1) * clamp(0px, 9vw, 100px)); }
.lp-step-n {
  position: absolute; top: -19px; left: 26px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1rem;
}
.lp-step:nth-child(even) .lp-step-n { left: auto; right: 26px; }
.lp-step-icon { width: clamp(44px, 6vw, 62px); height: clamp(44px, 6vw, 62px); flex: none; }
.lp-step-icon svg { width: 100%; height: 100%; }

/* --------------------------------------------------------- social proof */

/* ------------------------------------------------- closing CTA (in footer) */

/* Opens the footer block rather than sitting in its own dark section above it,
   so the page closes on one panel instead of two abutting dark bands. */
.lp-footer-cta {
  display: grid; gap: calc(var(--spacing-scale, 1) * clamp(26px, 5vw, 72px));
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  padding-bottom: calc(var(--spacing-scale, 1) * clamp(38px, 5vw, 64px));
}
/* The closing line is the loudest type on the page, so it takes the heaviest
   weight and the largest size rather than matching the section headings.
   Scoped under .lp to outrank the base ".lp h2" rule, which would otherwise
   win on specificity and hold it at the ordinary heading size and weight. */
.lp .lp-final-h {
  font-size: clamp(2.6rem, 7.6vw, 6.4rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .92;
}
/* Heading over the closing paragraph. Scoped under .lp because the generic
   `.lp h3` sizing would otherwise win and leave it the same weight as the
   footer's column headings, which is not what it is doing here. */
.lp .lp-footer-cta-h {
  margin: 0 0 calc(var(--spacing-scale, 1) * clamp(10px, 1.2vw, 14px));
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05;
  letter-spacing: -.02em; color: var(--on-dark);
}
.lp-footer-cta-side .lp-lead { margin-top: 0; color: var(--muted-dark); }
.lp-footer-marks { display: flex; gap: calc(var(--spacing-scale, 1) * 22px); margin-top: calc(var(--spacing-scale, 1) * 28px); opacity: .6; }
.lp-footer-marks svg { width: 26px; height: 26px; }

/* The rules that separate the footer's three bands. */
.lp-footer-rule {
  height: 1px; border: 0; margin: 0 0 calc(var(--spacing-scale, 1) * clamp(38px, 5vw, 64px));
  background: rgba(251,247,239,.16);
}

@media (max-width: 860px) {
  .lp-footer-cta { grid-template-columns: 1fr; align-items: start; }
}

/* --------------------------------------------------------- social proof */

/* Each figure is an object, like everything else on this page. They were bare
   numbers floating on the green with auto-fit spreading two of them to opposite
   ends of the screen, which read as a layout that had lost its third item
   rather than as a deliberate pair. */
.lp-figures {
  display: grid; gap: calc(var(--spacing-scale, 1) * clamp(14px, 2vw, 20px));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: calc(var(--spacing-scale, 1) * clamp(30px, 4vw, 48px));
}
.lp-figure {
  /* .42 not .28: at .28 the border measured 2.36:1 against the section, under
     the 3:1 a boundary needs to be seen at all. */
  border: 2px solid rgba(251,247,239,.42);
  border-radius: calc(var(--spacing-scale, 1) * clamp(16px, 2.2vw, 22px));
  padding: calc(var(--spacing-scale, 1) * clamp(22px, 3vw, 30px));
  background: rgba(251,247,239,.05);
  display: flex; flex-direction: column;
}
/* The same printed tilt the steps and stickers use, so the row belongs here. */
.lp-figure:nth-child(odd)  { transform: rotate(-.7deg); }
.lp-figure:nth-child(even) { transform: rotate(.55deg); }

.lp-figure .fg-n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.8rem, 6.5vw, 4.6rem); line-height: .9;
  letter-spacing: -.04em; display: block;
  color: var(--yellow);
}
.lp-figure .fg-l {
  display: block; margin-top: calc(var(--spacing-scale, 1) * 10px); font-size: .96rem; line-height: 1.45;
  color: var(--muted-dark); max-width: 22ch;
}
.lp-quote {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.14;
  letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
.lp-quote-by { margin-top: calc(var(--spacing-scale, 1) * 16px); font-size: .92rem; color: var(--muted-dark); }

/* ------------------------------------------------------- use-case strip */

.lp-strip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 30vw);
  gap: calc(var(--spacing-scale, 1) * clamp(14px, 2vw, 22px));
  overflow-x: auto; overscroll-behavior-x: contain;   /* never traps the page */
  scroll-snap-type: x mandatory;
  padding: calc(var(--spacing-scale, 1) * 4px) var(--pad) calc(var(--spacing-scale, 1) * 22px);
  scrollbar-width: none;
  cursor: grab;                 /* signals the drag that landing.js provides */
  touch-action: pan-x;
}
.lp-strip:active { cursor: grabbing; }
/* Dragging must move the strip, not select the captions inside it. */
.lp-strip, .lp-strip * { user-select: none; -webkit-user-select: none; }
.lp-strip img { -webkit-user-drag: none; user-drag: none; }
.lp-strip::-webkit-scrollbar { display: none; }
.lp-vignette {
  position: relative; scroll-snap-align: center;
  border-radius: calc(var(--spacing-scale, 1) * clamp(16px, 2.4vw, 26px)); overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--cream-2);
}
.lp-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-vignette.is-empty img { display: none; }
.lp-vignette .vg-tab {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(.98rem, 1.7vw, 1.22rem); line-height: 1.06;
  padding: .34em .6em; border-radius: calc(var(--spacing-scale, 1) * 10px);
  background: var(--coral-deep); color: #fff; transform: rotate(-1.6deg);
}
.lp-vignette:nth-child(2n) .vg-tab { background: var(--cobalt); }
.lp-vignette:nth-child(3n) .vg-tab { background: var(--yellow); color: var(--ink); }
.lp-vignette:nth-child(4n) .vg-tab { background: var(--turquoise); color: var(--ink); }
.lp-vignette:nth-child(5n) .vg-tab { background: var(--pink); color: var(--ink); }
.lp-strip-hint {
  display: flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 8px);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------- business panel */

/* Spacious, focused. A few real signals, never a wall of charts. */
/* Sits on a dark section but is itself a light surface, so it must set its own
   text colour - otherwise it inherits the section's cream and renders
   cream-on-white, which is invisible. Same reason .lp-phone does it. */
.lp-biz {
  border: 2px solid var(--ink); border-radius: calc(var(--spacing-scale, 1) * clamp(16px, 2.4vw, 26px));
  background: var(--paper); color: var(--ink); padding: calc(var(--spacing-scale, 1) * clamp(18px, 2.6vw, 28px));
}
.lp-biz .bz-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--spacing-scale, 1) * 12px); padding-bottom: calc(var(--spacing-scale, 1) * 14px); border-bottom: 1.5px solid var(--ink);
}
.lp-biz .bz-title { font-family: var(--display); font-weight: 800; font-size: 1.06rem; }
.lp-biz .bz-live {
  display: inline-flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 7px);
  font-size: .76rem; font-weight: 700; color: var(--turq-text);
}
.lp-biz .bz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); }
.lp-biz .bz-order {
  display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--spacing-scale, 1) * 12px);
  align-items: center; padding: calc(var(--spacing-scale, 1) * 13px) 0; border-bottom: 1px solid rgba(27,26,22,.12);
}
.lp-biz .bz-order:last-child { border-bottom: 0; }
.lp-biz .bz-ic {
  width: 36px; height: 36px; border-radius: calc(var(--spacing-scale, 1) * 11px); display: grid; place-items: center;
  background: var(--yellow); color: var(--ink);
}
.lp-biz .bz-ic.c-coral { background: var(--coral-deep); color: #fff; }
.lp-biz .bz-ic.c-turq  { background: var(--turquoise); color: #fff; }
.lp-biz .bz-n { font-weight: 700; font-size: .9rem; }
.lp-biz .bz-m { font-size: .78rem; color: var(--muted); }
.lp-biz .bz-tag {
  font-size: .72rem; font-weight: 800; padding: calc(var(--spacing-scale, 1) * 5px) calc(var(--spacing-scale, 1) * 11px); border-radius: 999px;
  background: var(--ink); color: var(--cream); white-space: nowrap;
}
.lp-biz .bz-tag.t-new { background: var(--coral-deep); color: #fff; }

/* ------------------------------------------------------------- vouchers */

.lp-vouchers { display: flex; flex-wrap: wrap; gap: calc(var(--spacing-scale, 1) * 14px); margin-top: calc(var(--spacing-scale, 1) * 30px); }
.lp-voucher {
  position: relative; padding: calc(var(--spacing-scale, 1) * 14px) calc(var(--spacing-scale, 1) * 22px);
  border: 2px dashed var(--ink); border-radius: calc(var(--spacing-scale, 1) * 14px);
  font-family: var(--display); font-weight: 800; font-size: .98rem;
  background: var(--cream);
}
.lp-voucher.v-fill { background: var(--yellow); border-style: solid; }
.lp-voucher.v-coral { background: var(--coral-deep); color: #fff; border-style: solid; }
.lp-voucher:nth-child(3n) { transform: rotate(-1.6deg); }
.lp-voucher:nth-child(4n) { transform: rotate(1.4deg); }

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

/* Floats as a placed block rather than a band bolted to the bottom of the page:
   inset on all four sides, so cream shows beneath it as well as down the sides,
   with a generous corner radius. */
.lp-footer {
  background: var(--ink); color: var(--on-dark);
  padding-block: calc(var(--spacing-scale, 1) * clamp(52px, 7.5vw, 92px));
}
.lp-footer.lp-inset {
  margin-bottom: calc(var(--spacing-scale, 1) * clamp(12px, 3vw, 44px));
  border-radius: calc(var(--spacing-scale, 1) * clamp(24px, 3.6vw, 44px));
}
.lp-footer a { color: var(--on-dark); text-decoration: none; opacity: .78; }
.lp-footer a:hover { opacity: 1; text-decoration: underline; }
/* Brand block plus three link columns. Was repeat(2) when the policies lived
   inside Account; the Legal column is its own now, and without the extra track
   it wrapped underneath and left a hole beside it. The brand column keeps the
   larger fraction because it carries the wordmark and the blurb. */
.lp-footer-grid {
  display: grid; gap: calc(var(--spacing-scale, 1) * clamp(26px, 4vw, 52px));
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
}
/* The signature at the foot of the page: accent colour and the heaviest weight
   the display stack offers, so it reads as the brand rather than another link. */
.lp-footer-brand {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.3rem, 4.2vw, 3.2rem); letter-spacing: -.035em; line-height: 1;
  color: var(--yellow); margin-bottom: calc(var(--spacing-scale, 1) * 18px);
}
.lp-footer-blurb {
  font-size: 1.12rem; line-height: 1.55; color: var(--muted-dark);
  max-width: 32ch; margin: 0;
}
/* Column headings were small enough to disappear; these are proper headings. */
.lp-footer h4 {
  font-family: var(--display); font-weight: 800;
  font-size: 1.24rem; letter-spacing: -.01em;
  text-transform: none; margin: 0 0 calc(var(--spacing-scale, 1) * 18px); opacity: 1;
}
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--spacing-scale, 1) * 2px); font-size: 1.06rem; }
/* Tap targets, not just text. At their natural line height these links were
   21px tall - fine for a mouse, awkward for a thumb, and mobile is the primary
   experience here. inline-flex so the hit area matches what is underlined. */
.lp-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.lp-free {
  margin-top: calc(var(--spacing-scale, 1) * clamp(34px, 5vw, 56px)); padding-top: calc(var(--spacing-scale, 1) * 26px);
  border-top: 1px solid rgba(251,247,239,.16);
  display: flex; flex-wrap: wrap; gap: calc(var(--spacing-scale, 1) * 14px); justify-content: space-between; align-items: center;
}
.lp-free strong { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }

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

/* Fixed rather than sticky: sticky keeps the bar in normal flow, which pushed
   the hero down by the nav's height and left the cream brand mark sitting on the
   cream page background, invisible. Fixed lets the hero run to the very top and
   the nav overlay it, which is what the hero padding already allows for.

   The DEFAULT state is the safe one - cream panel, dark text - and JavaScript
   adds .over-hero for the transparent treatment while the dark hero is behind
   it. Done the other way round, a page where the script fails to run would show
   cream text on the cream background and the navigation would vanish. */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing-scale, 1) * 18px);
  padding: calc(var(--spacing-scale, 1) * 14px) var(--pad);
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(27,26,22,.14);
  transition: background-color .28s ease, box-shadow .28s ease;
}
.lp-nav.over-hero { background: transparent; box-shadow: none; }
.lp-nav .nv-brand {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.28rem, 2.3vw, 1.62rem); letter-spacing: -.03em;
  color: var(--ink); text-decoration: none;
}
.lp-nav.over-hero .nv-brand { color: var(--cream); }
/* Two marks swap on the same .over-hero toggle that used to just recolour
   the plain-text name: the white cutout over the dark hero photo, the
   plum-and-orange default once the nav is on its plain cream bar. */
.lp-nav .nv-brand .nv-logo-hero { display: none; }
.lp-nav .nv-brand .nv-logo-default { display: inline-block; }
.lp-nav.over-hero .nv-brand .nv-logo-hero { display: inline-block; }
.lp-nav.over-hero .nv-brand .nv-logo-default { display: none; }
.lp-nav .nv-links { display: flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 26px); }
.lp-nav .nv-links a {
  font-size: .95rem; font-weight: 600; color: var(--ink);
  text-decoration: none; opacity: .84;
}
.lp-nav.over-hero .nv-links a { color: var(--cream); }
.lp-nav .nv-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.lp-nav .nv-right { display: flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 14px); }
.lp-nav .nv-signin {
  font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none; opacity: .8;
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: calc(var(--spacing-scale, 1) * 6px);
}
.lp-nav .nv-brand { display: inline-flex; align-items: center; min-height: 44px; }
.lp-nav .nv-links a { display: inline-flex; align-items: center; min-height: 44px; }
.lp-nav.over-hero .nv-signin { color: var(--cream); }
.lp-nav .lp-btn { min-height: 44px; padding: 0 calc(var(--spacing-scale, 1) * 20px); font-size: .95rem; }
.lp-nav .lp-btn { background: var(--coral-deep); color: #fff; }

/* ---------------------------------------------------------------- motion */

.lp-reveal { opacity: 0; transform: translateY(22px); }
.lp-reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }

/* Hand-drawn underline that draws itself once its heading arrives. */
.lp-underline { position: relative; display: inline-block; }
.lp-underline svg {
  position: absolute; left: 0; right: 0; bottom: -.34em; width: 100%; height: .38em; overflow: visible;
}
.lp-underline svg path {
  fill: none; stroke: var(--coral); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300;
}
.lp-underline.in svg path { transition: stroke-dashoffset 1s ease .18s; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .lp-reveal { opacity: 1; transform: none; }
  .lp-underline svg path { stroke-dashoffset: 0; }
  .lp-photo:hover img { transform: none; }
}

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

@media (max-width: 960px) {
  .lp-hero-grid { grid-template-columns: 1fr; padding-top: calc(var(--spacing-scale, 1) * clamp(84px, 14vh, 120px)); }
  .lp-hero-art { order: -1; max-width: 520px; margin-inline: auto; }
  .lp-hero-art img { max-height: 38vh; }
  /* .lp-split-lead is listed explicitly: it sets its own columns with a higher
     specificity than .lp-split, so without it the heading and its panel stayed
     side by side on a phone. */
  .lp-split, .lp-split.lp-split-lead { grid-template-columns: 1fr; }
  .lp-split.rev > :first-child { order: 0; }
  /* Two up on a tablet: four columns of links at this width leaves each one
     too narrow for "Community standards" to sit on a single line. */
  .lp-footer-grid { grid-template-columns: 1fr 1fr; }
  .lp-nav .nv-links { display: none; }          /* anchors remain reachable by scrolling */
}

@media (max-width: 640px) {
  /* The hint sits where the primary CTA lands once the hero stacks, and it is
     decorative - the page obviously scrolls. */
  .lp-scroll-hint { display: none; }
  /* Give the headline and CTA the room; the artwork is supporting here. */
  .lp-hero-art .lp-stand-in { min-height: 220px; }
  .lp-hero-art img { max-height: 30vh; }

  /* Rotation is charming on a wide canvas and cramped on a phone. */
  .lp-step, .lp-panel.tilt-a, .lp-panel.tilt-b,
  .lp-voucher:nth-child(3n), .lp-voucher:nth-child(4n) { transform: none !important; }
  .lp-step { margin-inline: 0 !important; grid-template-columns: 1fr; gap: calc(var(--spacing-scale, 1) * 14px); }
  .lp-step-n { position: static; margin-bottom: calc(var(--spacing-scale, 1) * 4px); }
  .lp-strip { grid-auto-columns: minmax(212px, 72vw); }
  .lp-footer-grid { grid-template-columns: 1fr; }
  .lp-free { flex-direction: column; align-items: flex-start; }
}

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

/* Three columns of native <details>, one per audience. The hard 2px outline and
   cream fill are the same object the steps and vignettes are made from, so the
   section reads as part of the page rather than a bolted-on support widget. */
.lp-faq {
  display: grid; gap: calc(var(--spacing-scale, 1) * clamp(22px, 3vw, 34px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  margin-top: calc(var(--spacing-scale, 1) * clamp(34px, 5vw, 56px));
}
.lp-faq-h {
  margin: 0 0 calc(var(--spacing-scale, 1) * clamp(14px, 1.8vw, 20px));
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05;
  letter-spacing: -.01em;
}

.lp-faq-item {
  border: 2px solid var(--ink); border-radius: calc(var(--spacing-scale, 1) * clamp(14px, 1.8vw, 18px));
  background: var(--cream);
  padding: calc(var(--spacing-scale, 1) * clamp(14px, 1.8vw, 18px)) calc(var(--spacing-scale, 1) * clamp(16px, 2vw, 20px));
}
.lp-faq-item + .lp-faq-item { margin-top: calc(var(--spacing-scale, 1) * clamp(10px, 1.2vw, 14px)); }

.lp-faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--spacing-scale, 1) * 14px);
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.35;
  color: var(--ink);
}
/* Safari still paints its own triangle without this, which lands on top of the
   custom mark below. */
.lp-faq-item summary::-webkit-details-marker { display: none; }

/* Keyboard focus has to stay visible: the outline is on the summary, which is
   the actual focusable element, not on the details wrapper. */
.lp-faq-item summary:focus-visible {
  outline: 3px solid var(--cobalt); outline-offset: 4px; border-radius: calc(var(--spacing-scale, 1) * 6px);
}

/* Plus that becomes a minus. Two bars, and the vertical one is what rotates. */
.fq-mark {
  position: relative; flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: calc(var(--spacing-scale, 1) * 2px);
}
.fq-mark::before, .fq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--coral-deep); border-radius: calc(var(--spacing-scale, 1) * 2px);
  transform: translate(-50%, -50%);
}
.fq-mark::before { width: 100%; height: 3px; }
.fq-mark::after  { width: 3px; height: 100%; transition: transform .22s ease; }
.lp-faq-item[open] .fq-mark::after { transform: translate(-50%, -50%) scaleY(0); }

.fq-a {
  margin: calc(var(--spacing-scale, 1) * clamp(10px, 1.2vw, 14px)) 0 0;
  font-size: clamp(.95rem, 1.1vw, 1rem); line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}

@media (max-width: 960px) {
  .lp-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lp-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fq-mark::after { transition: none; }
}

/* ------------------------------------------------------------ contact */

.lp-contact {
  display: grid; gap: calc(var(--spacing-scale, 1) * clamp(28px, 4vw, 64px));
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
}
.lp-contact .lp-lead { color: var(--muted-dark); }

/* Reason pills. The radio itself is kept in the DOM and hidden visually rather
   than with display:none, so it stays focusable and screen readers still
   announce it as a radio in a named group. */
.lp-pills { border: 0; padding: 0; margin: 0 0 calc(var(--spacing-scale, 1) * clamp(20px, 2.4vw, 26px)); }
.lp-pills legend {
  padding: 0; margin-bottom: calc(var(--spacing-scale, 1) * 12px);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-dark);
}
.lp-pills { display: flex; flex-wrap: wrap; gap: calc(var(--spacing-scale, 1) * 10px); }
.lp-pills legend { flex: 0 0 100%; }

.lp-pill input {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.lp-pill span {
  display: inline-flex; align-items: center;
  min-height: 44px;                       /* full touch target, not just text */
  padding: calc(var(--spacing-scale, 1) * 10px) calc(var(--spacing-scale, 1) * 18px);
  border: 2px solid rgba(251,247,239,.46); border-radius: 999px;
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  color: var(--on-dark); cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.lp-pill input:checked + span {
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
}
.lp-pill input:focus-visible + span {
  outline: 3px solid var(--yellow); outline-offset: 3px;
}
@media (hover: hover) {
  .lp-pill input:not(:checked) + span:hover { border-color: var(--on-dark); }
}

.lp-field { margin-bottom: calc(var(--spacing-scale, 1) * clamp(16px, 2vw, 20px)); }
.lp-field label {
  display: block; margin-bottom: calc(var(--spacing-scale, 1) * 7px);
  font-weight: 700; font-size: .95rem; color: var(--on-dark);
}
.lp-field input,
.lp-field textarea {
  width: 100%; box-sizing: border-box;
  padding: calc(var(--spacing-scale, 1) * 13px) calc(var(--spacing-scale, 1) * 15px);
  border: 2px solid rgba(251,247,239,.46); border-radius: calc(var(--spacing-scale, 1) * 12px);
  background: rgba(251,247,239,.06); color: var(--on-dark);
  font: inherit; font-size: 1rem; line-height: 1.5;
}
.lp-field textarea { resize: vertical; min-height: 128px; }
.lp-field input::placeholder,
.lp-field textarea::placeholder { color: rgba(251,247,239,.5); }
.lp-field input:focus, .lp-field textarea:focus {
  outline: none; border-color: var(--yellow);
  background: rgba(251,247,239,.1);
}
.lp-field input:focus-visible, .lp-field textarea:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 2px;
}
.lp-hint {
  display: block; margin-top: calc(var(--spacing-scale, 1) * 6px);
  font-size: .85rem; color: var(--muted-dark);
}

/* The honeypot. Off-screen rather than display:none, which more bots skip. */
.lp-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 860px) {
  .lp-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-pill span { transition: none; }
}

/* The contact band runs edge to edge with square corners, and keeps a clear
   cream gap beneath it so it never touches the footer. Both are dark panels, so
   without the gap they merge into one slab. Stated explicitly rather than left
   to the absence of .lp-inset, so nothing can quietly round it later. */
.lp-contact-band {
  margin-inline: 0;
  border-radius: 0;
  margin-bottom: calc(var(--spacing-scale, 1) * clamp(28px, 5vw, 72px));
}

/* Result of an in-place send. Both states carry a word as well as a colour, so
   the outcome does not depend on being able to tell green from red. */
.lp-form-msg {
  margin: calc(var(--spacing-scale, 1) * clamp(14px, 1.8vw, 18px)) 0 0;
  padding: calc(var(--spacing-scale, 1) * 12px) calc(var(--spacing-scale, 1) * 16px);
  border-radius: calc(var(--spacing-scale, 1) * 12px);
  border: 2px solid transparent;
  font-weight: 600; font-size: .98rem; line-height: 1.5;
}
.lp-form-msg.is-ok  { background: rgba(22,184,166,.16); border-color: var(--turquoise); color: var(--on-dark); }
.lp-form-msg.is-bad { background: rgba(255,90,60,.16);  border-color: var(--coral);     color: var(--on-dark); }

/* Reduced motion gets them straight, since the tilt is pure decoration. */
@media (prefers-reduced-motion: reduce) {
  .lp-figure:nth-child(odd), .lp-figure:nth-child(even) { transform: none; }
}

/* ----------------------------------------------------- gifts in flight */

/* A scatter of tickets rather than a tidy grid. The whole point of this block
   is that it should look like fun, so the cards overlap slightly, tilt at
   different angles and carry different accents - the same printed, placed-by-
   hand language the steps and stickers use elsewhere on the page. */
.lp-hops { position: relative; display: grid; gap: calc(var(--spacing-scale, 1) * 12px); padding-bottom: calc(var(--spacing-scale, 1) * 26px); }

.hop-card {
  transform: rotate(var(--tilt, 0deg));
  border: 2px solid var(--ink);
  border-radius: calc(var(--spacing-scale, 1) * 14px);
  padding: calc(var(--spacing-scale, 1) * 14px) calc(var(--spacing-scale, 1) * 18px);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--spacing-scale, 1) * 14px); flex-wrap: wrap;
  background: var(--cream); color: var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,.28);
}
/* Each card is pulled in from a different side, so the stack reads as a pile
   someone dropped rather than a list someone aligned. */
.hop-card:nth-child(1) { margin-right: calc(var(--spacing-scale, 1) * clamp(0px, 6vw, 54px)); }
.hop-card:nth-child(2) { margin-left:  calc(var(--spacing-scale, 1) * clamp(0px, 8vw, 72px)); }
.hop-card:nth-child(3) { margin-right: calc(var(--spacing-scale, 1) * clamp(0px, 4vw, 36px)); }
.hop-card:nth-child(4) { margin-left:  calc(var(--spacing-scale, 1) * clamp(0px, 5vw, 46px)); }

.hop-card.c-yellow { background: var(--yellow); }
/* The deeper coral, not the bright one: white on --coral measures 3.10:1,
   which the route line at .95rem does not clear. --coral-deep exists for
   exactly this and still reads as coral. */
.hop-card.c-coral  { background: var(--coral-deep); color: #fff; }
.hop-card.c-turq   { background: var(--turquoise); }
/* Pink, not cobalt: cobalt sits at 2.26:1 against the forest ground, so that
   card would have had no visible edge. */
.hop-card.c-pink   { background: var(--pink); color: var(--ink); }

.hop-what {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: -.02em;
}
.hop-route { font-size: .95rem; font-weight: 600; opacity: .9; }
.hop-arrow { margin: 0 calc(var(--spacing-scale, 1) * 6px); font-weight: 800; }

/* The aside at the bottom, given the sticker treatment.
   Matches .lp-sticker.s-cobalt.tilt-r exactly - same fill, same radius, same
   box-decoration-break, same 1.8deg tilt - rather than adding those classes in
   the markup, so this stays a stylesheet-only change and one file to upload.
   Cobalt was not otherwise used in this section, so it reads as its own thing
   against the yellow, coral, turquoise and pink tickets above it. */
.hop-stamp {
  position: absolute; right: 4px; bottom: 0;
  display: inline-block;
  padding: .06em .34em .12em;
  border-radius: calc(var(--spacing-scale, 1) * 10px);
  background: var(--cobalt);
  color: #fff;
  transform: rotate(1.8deg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: var(--display); font-weight: 800;
  font-size: .95rem;
}

.lp-hop-stats { margin: calc(var(--spacing-scale, 1) * 22px) 0 0; font-size: .92rem; line-height: 1.6; color: var(--muted-dark); }
.lp-hop-stats strong { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .hop-card, .hop-stamp { transform: none; }
}
@media (max-width: 560px) {
  /* Straighten up and stop the offsets, so nothing drifts off a small screen. */
  .hop-card { margin-inline: 0 !important; transform: rotate(calc(var(--tilt, 0deg) * .5)); }
}

/* The little quoted reason under each amount. */
.hop-card .hop-note { display: block; font-weight: 600; opacity: .82; margin-top: calc(var(--spacing-scale, 1) * 2px); }
.hop-card .hop-what { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* ------------------------------------------------- who vouchers are for row */
/* A wrapping row of labelled glyphs rather than a grid of cards: the list is
   illustrative, not a menu, and cards would give each entry more weight than
   it deserves.

   The svg rule is explicit and scoped. Inline width/height attributes are the
   floor, but a container rule elsewhere would still outrank them, so this
   states the size where it cannot be lost. */
.lp-creators { display: flex; flex-wrap: wrap; gap: calc(var(--spacing-scale, 1) * 12px); }
.lp-creator {
  display: inline-flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 11px);
  padding: calc(var(--spacing-scale, 1) * 13px) calc(var(--spacing-scale, 1) * 20px) calc(var(--spacing-scale, 1) * 13px) calc(var(--spacing-scale, 1) * 16px);
  border: 2px solid currentColor; border-radius: 999px;
  font-size: .96rem; font-weight: 600; line-height: 1.3;
}
.lp-creator svg { width: 26px; height: 26px; flex: none; }

/* On the dark section the outline would be full-strength white and shout over
   the text it sits beside. */
.lp-dark .lp-creator { border-color: rgba(255, 255, 255, .28); }
.lp-dark .lp-creator svg { opacity: .92; }

@media (max-width: 560px) {
  .lp-creator { padding: calc(var(--spacing-scale, 1) * 11px) calc(var(--spacing-scale, 1) * 16px) calc(var(--spacing-scale, 1) * 11px) calc(var(--spacing-scale, 1) * 13px); font-size: .9rem; gap: calc(var(--spacing-scale, 1) * 9px); }
  .lp-creator svg { width: 22px; height: 22px; }
}

/* Voucher pills on a dark section.
   They were built for .lp-warm, which is light, so they inherit ink text and
   carry cream and yellow backgrounds. Dropped onto .lp-dark they inherit
   --on-dark instead while keeping those light backgrounds: cream text on a
   cream pill, measured at a contrast ratio of 1.0, which is invisible. Their
   backgrounds are light wherever they sit, so the text is ink wherever they
   sit. The coral variant sets its own white and keeps it. */
.lp-dark .lp-voucher { color: var(--ink); }
.lp-dark .lp-voucher.v-coral { color: #fff; }

/* --------------------------------------------------- trust: shield + badge */
/* Both SVGs carry width and height ATTRIBUTES as their floor, and both get an
   explicit CSS size here as well. A container rule elsewhere in this file
   (.lp-step-icon svg, .lp-hero-paint svg) sets svg { width:100% }, and any such
   rule outranks an inline attribute - which is how a 52px mark becomes a
   full-width one. Stating the size in both places is the belt and braces. */

.trust-h { display: flex; align-items: flex-start; gap: calc(var(--spacing-scale, 1) * clamp(14px, 1.8vw, 22px)); }
.trust-shield { flex: none; margin-top: .12em; }
.trust-shield svg { width: clamp(40px, 4.4vw, 52px); height: auto; display: block; }

/* Top-aligned by .lp-split-lead (see the comment on that rule), which left
   the pair sitting flush with the top of a much taller text column. Pushed
   down so they sit level with the paragraph instead of the heading. */
.trust-badge-wrap {
  display: flex; align-items: center; justify-content: center;
  margin-top: calc(var(--spacing-scale, 1) * clamp(32px, 6vw, 72px));
}
.trust-badge-stack {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2.6vw, 28px);
}
/* The same "Verified" pill used on gifter, business and user pages
   (.badge.verified), just sized for a hero spot. Both colors are shown
   together here, fixed rather than following var(--primary), since this
   spot is meant to read as "these are the two badges", not as a live sample
   of whichever theme the visitor happens to be in. Each gets its own drift,
   offset in timing and direction, so the pair doesn't bob in lockstep. */
.trust-badge-pill {
  display: inline-flex; align-items: center; gap: clamp(10px, 1.6vw, 16px);
  font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; line-height: 1;
  padding: clamp(18px, 2.4vw, 26px) clamp(28px, 4vw, 48px);
  border-radius: 999px;
}
.trust-badge-pill svg { width: clamp(20px, 2.4vw, 30px); height: auto; flex: none; }
.trust-badge-pill-black {
  background: #1B1A16; color: #fff;
  animation: trust-float 7s ease-in-out infinite;
}
.trust-badge-pill-yellow {
  background: #F4CE38; color: #1B1A16;
  animation: trust-pulse 5s ease-in-out infinite;
}
@keyframes trust-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
/* A breathing scale rather than a drift, so the two pills read as doing
   different things, not just one copied under the other. */
@keyframes trust-pulse {
  0%, 100% { transform: scale(1) rotate(2deg); }
  50%      { transform: scale(1.06) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-badge-pill-black { animation: none; transform: rotate(-2deg); }
  .trust-badge-pill-yellow { animation: none; transform: rotate(2deg); }
}

/* Below the split's own breakpoint the badge sits under the copy, where a
   full-size pill is too much of the screen. */
@media (max-width: 900px) {
  .trust-badge-wrap {
    justify-content: flex-start;
    margin-top: calc(var(--spacing-scale, 1) * clamp(20px, 5vw, 32px));
  }
  .trust-badge-stack { gap: clamp(10px, 3vw, 16px); }
  .trust-badge-pill {
    font-size: clamp(17px, 4.4vw, 22px);
    padding: clamp(13px, 3vw, 17px) clamp(20px, 5vw, 28px);
    gap: clamp(8px, 2vw, 10px);
  }
  .trust-badge-pill svg { width: clamp(15px, 4vw, 19px); }
}

/* ─────────────────────────── hero effect layer (pixelblast.js, over the photo)
   The dithered pixel field sits between the photograph and the veil, so the
   veil and the paint layer each move up one. pointer-events stays none: the
   hero button must remain clickable, and the script reads presses from the
   hero itself. */

.lp-hero-fx {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}
.lp-hero .lp-hero-veil  { z-index: 2; }
.lp-hero .lp-hero-paint { z-index: 3; }

/* ──────────────────────── GyftPool animation (gyftpool.js), in its own section
   Sits in the left column of #gyftpools, filling the room the taller steps
   panel opposite leaves under the bullet points. Square, so the pool has space
   to grow in every direction, and capped so it never dwarfs the copy above. */

.lp-pool-slot {
  position: relative;
  width: min(400px, 100%);
  aspect-ratio: 1;
  margin: calc(var(--spacing-scale, 1) * 26px) auto 0;
  /* Makes cqw units inside resolve against this box. The total sits over a
     canvas that is capped at 400px, so sizing it against the viewport would
     keep growing the number after the circle had stopped. */
  container-type: inline-size;
}
.lp-pool-slot canvas { width: 100%; height: 100%; display: block; }

/* Confetti is injected as a sibling canvas and must clear everything the
   animation draws, while never intercepting a click. */
.gp-confetti {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}

/* The running total, centred over the pool.
 *
 * There is still no replay control and nothing asking to be operated: the
 * animation loops on its own. The number is the exception, because the copy
 * beside it promises you can watch a total add up, and without it the canvas
 * showed blobs merging and said nothing about what had been raised.
 *
 * Sits above the confetti so a burst never obscures the figure it is
 * celebrating, and takes no pointer events so it cannot swallow a tap.
 */
.gp-total {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--spacing-scale, 1) * 2px); pointer-events: none; text-align: center;
}
.gp-total-n {
  display: block;
  font-family: var(--display); font-weight: 900;
  /* Plain value first: a browser without container-query units treats the clamp
     below as invalid and drops it, which would leave the number at the
     inherited body size. This keeps it large everywhere. */
  font-size: 2.4rem;
  /* Scales with the slot, not the viewport: the canvas is capped at 400px, so a
     vw-based size would keep growing after the circle had stopped. */
  font-size: clamp(1.9rem, 8cqw, 3rem);
  letter-spacing: -.03em; line-height: 1; color: #fff;
  /* The pool starts black and ends violet, so white needs a shadow to survive
     both. Two shadows: a tight one for edge definition, a wide one for lift. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 22px rgba(0, 0, 0, .35);
  font-variant-numeric: tabular-nums;
}
.gp-total-l {
  display: block;
  font-size: .78rem;                       /* fallback, as above */
  font-size: clamp(.72rem, 2.6cqw, .9rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------- splash cursor */
/* Fixed full-viewport fluid that trails the pointer. Desktop only, mounted by
   splashcursor.js which refuses to run without a fine hovering pointer.
   Below the nav so it never sits over the menu, and pointer-events none so it
   cannot swallow a click on anything underneath. */
.splash-cursor {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
}
.splash-cursor canvas { width: 100vw; height: 100vh; display: block; }

/* ──────────────────────────────────────────────── pricing worked example (#pricing)
   A four-row ledger inside an .lp-panel: the gift, the fee, what the giver pays,
   what the recipient receives. Rows are a two-column grid rather than a table so
   the label can wrap on a narrow phone while the figure stays on its own line and
   right-aligned. Figures use tabular numerals so the column lines up. */

.lp-price { display: grid; gap: 0; margin-top: calc(var(--spacing-scale, 1) * 14px); }

.lp-price-row {
  display: grid; grid-template-columns: 1fr auto; gap: calc(var(--spacing-scale, 1) * 16px);
  align-items: baseline;
  padding: calc(var(--spacing-scale, 1) * 13px) 0;
  border-bottom: 1px solid rgba(17, 17, 25, .14);
}
.lp-price-row span { color: var(--muted); }
.lp-price-row b {
  font-weight: 700; font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The total is the pivot of the example, so it gets the firmer rule and the
   ink-coloured label: everything above it is arithmetic, everything below is
   the point. */
.lp-price-total {
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
}
.lp-price-total span { color: var(--ink); font-weight: 600; }

/* The row the whole section exists to land. No bottom rule - it is the last
   thing in the ledger, and a rule under it would imply another row. */
.lp-price-get { border-bottom: 0; padding-bottom: calc(var(--spacing-scale, 1) * 4px); }
.lp-price-get span { color: var(--turq-text); font-weight: 700; }
.lp-price-get b { color: var(--turq-text); font-size: 1.45rem; }

.lp-price-note {
  margin: calc(var(--spacing-scale, 1) * 12px) 0 0;
  font-size: .92rem; line-height: 1.5;
  color: var(--muted);
}

/* On dark sections the hairlines have to come from the cream side instead, or
   they vanish. The section is cream today; this keeps it correct if it moves. */
.lp-dark .lp-price-row, .lp-forest .lp-price-row { border-bottom-color: rgba(251, 247, 239, .2); }
.lp-dark .lp-price-total, .lp-forest .lp-price-total { border-bottom-color: rgba(251, 247, 239, .5); }
.lp-dark .lp-price-total span, .lp-forest .lp-price-total span { color: var(--cream); }

/* ------------------------------------------------- "for you" menu and cards
   The nav menu and the five account cards on the home page. The pages they
   lead to have their own stylesheet, for-page.css. */

.lp-nav .nv-menu { position: relative; }
.lp-nav .nv-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 7px); min-height: 44px;
  font-size: .95rem; font-weight: 600; color: var(--ink); opacity: .84;
}
.lp-nav .nv-menu summary::-webkit-details-marker { display: none; }
.lp-nav .nv-menu summary::after {
  content: ''; width: 7px; height: 7px; margin-top: calc(var(--spacing-scale, 1) * -3px);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .16s ease;
}
.lp-nav .nv-menu[open] summary::after { transform: rotate(-135deg); margin-top: calc(var(--spacing-scale, 1) * 3px); }
.lp-nav .nv-menu summary:hover { opacity: 1; }
.lp-nav.over-hero .nv-menu summary { color: var(--cream); }
.lp-nav .nv-menu summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: calc(var(--spacing-scale, 1) * 6px); }
.lp-nav .nv-menu-list {
  position: absolute; top: calc(100% + 8px); left: -14px; z-index: 70;
  display: grid; min-width: 200px; padding: calc(var(--spacing-scale, 1) * 8px);
  background: #fff; border: 2px solid var(--ink); border-radius: calc(var(--spacing-scale, 1) * 16px);
  box-shadow: 6px 6px 0 var(--ink);
}
.lp-nav .nv-links .nv-menu-list a,
.lp-nav.over-hero .nv-links .nv-menu-list a {
  color: var(--ink); opacity: 1; padding: 0 calc(var(--spacing-scale, 1) * 12px); border-radius: calc(var(--spacing-scale, 1) * 10px); min-height: 44px;
}
.lp-nav .nv-links .nv-menu-list a:hover { background: var(--cream-2); text-decoration: none; }

.lp-who {
  list-style: none; margin: calc(var(--spacing-scale, 1) * clamp(30px, 4.4vw, 52px)) 0 0; padding: 0;
  display: grid; gap: calc(var(--spacing-scale, 1) * clamp(14px, 1.8vw, 22px));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.lp-who li { display: flex; }
.lp-who-card {
  --who: var(--yellow);
  display: flex; flex-direction: column; gap: calc(var(--spacing-scale, 1) * 10px); width: 100%;
  padding: calc(var(--spacing-scale, 1) * clamp(22px, 2.4vw, 30px));
  background: #fff; color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); border-radius: calc(var(--spacing-scale, 1) * 24px);
  box-shadow: 6px 6px 0 var(--who);
  transition: transform .16s ease, box-shadow .16s ease;
}
.lp-who-card:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--who); }
.lp-who-card.w-coral     { --who: var(--pink); }
.lp-who-card.w-cobalt    { --who: var(--cobalt); }
.lp-who-card.w-turquoise { --who: var(--turquoise); }
.lp-who-card.w-orange    { --who: var(--orange); }
.lp-who-icon {
  width: 56px; height: 56px; border-radius: calc(var(--spacing-scale, 1) * 18px);
  display: grid; place-items: center; font-size: 1.4rem;
  background: var(--who); color: var(--ink); margin-bottom: calc(var(--spacing-scale, 1) * 4px);
}
.lp-who-card.w-cobalt .lp-who-icon { color: #fff; }
.lp-who-card strong { font-family: var(--display); font-size: 1.4rem; line-height: 1.1; }
.lp-who-line { font-size: .95rem; line-height: 1.5; color: var(--muted); }
.lp-who-go {
  margin-top: auto; padding-top: calc(var(--spacing-scale, 1) * 10px);
  display: inline-flex; align-items: center; gap: calc(var(--spacing-scale, 1) * 8px);
  font-family: var(--display); font-weight: 800; font-size: .98rem;
}
.lp-who-card:hover .lp-who-go i { transform: translateX(4px); }
.lp-who-go i { transition: transform .16s ease; }
@media (prefers-reduced-motion: reduce) {
  .lp-who-card, .lp-who-go i { transition: none; }
  .lp-who-card:hover { transform: none; }
}