/* ============================================================
   THE LANDING PAGE — the room, and what follows it.
   10 September 2026.

   WHAT THIS FILE IS. The client asked for the reference's landing page:
   an opening built out of giant type in perspective, a line and two
   buttons held dead centre of it, and a run of full-bleed display
   sections beneath. This is that page, written from the reference's
   SYSTEM — its geometry, its sizes, its rhythm — and not from its code.
   None of the reference's markup, CSS or fonts are used. The typeface is
   GT America, which PRODUCT.md commits to, standing in for the
   reference's three proprietary faces.

   THE SIZES ARE MEASURED, NOT GUESSED. Read off the reference at a
   1440-wide window and written here in the site's own 10px-root rems:

       body copy            16.5px   1.2 leading   weight 500
       feature heading      34.4px   1.0 leading   weight 900  uppercase
       section heading      64.5px   0.9 leading   weight 900  uppercase
       display heading      97.5px   0.9 leading   -0.01em
       full-bleed display  165px     0.9 leading   -0.02em
       button               16px     weight 500    13.5/20.25 padding, pill

   WHAT IS NOT COPIED, AND WHY. The reference sells its own numbers,
   its clients' logos and three case studies. PRODUCT.md forbids
   testimonials, press and invented figures, so those three blocks carry
   Mynichefund's own subject instead — the counts, which are COUNTED
   from campaigns.js at run time rather than typed, the niches, which are
   read from the same file, and the positioning, which is a list of
   things this platform refuses to do.

   THE CAMPAIGN COLUMN IS NOT TOUCHED. lstack.css and lstack.js own it,
   it keeps its place in the flow directly under the room, and there is
   not one rule for it in this file. That was the client's condition.
   ============================================================ */

/* --- THE PALETTE -----------------------------------------------------
   One purple, three accents. The purple is the reference's own value,
   which the client named; the other three are picked to sit beside it at
   the same weight rather than sampled from anywhere. */
.leo{
  --leo-purple:#6E60EE;
  --leo-lime:#C9F24E;
  --leo-amber:#FFC933;
  --leo-coral:#FF5D4B;

}

/* The full-bleed sections are wider than .shell's column. 100vw would
   include the scrollbar and hand the page a horizontal scroll of its own,
   so the overflow is clipped at the one element that owns the whole
   width. clip rather than hidden: hidden on a scroll container would
   break `position:sticky` inside the room. */
.leo .shell{overflow-x:clip}
/* A SECTION THAT IS AS WIDE AS THE WINDOW, from inside a column that is not.
   The margins CANCEL .shell's own padding rather than solving for the middle
   of the window: `margin-left:calc(50% - 50vw)` only lands on the window's
   edge when the column is centred in it, and .shell's is not — it carries a
   wide left gutter for the edge strip and a narrow right one, so every
   full-bleed section came out shifted by half the difference. Mirroring the
   two paddings is exact at both widths, and it keeps following .shell when
   the panel pushes the column across.

   THE STRIP IS THEN CLEARED FROM THE INSIDE. It is fixed, sixty pixels wide
   and part of the site, and a section running under it lost the first
   character of every display line. */
.leo-bleed{
  position:relative;
  margin-inline:calc(var(--shell-pad) * -1);
  padding-left:var(--edge-w);
}
/* except the room, which is meant to be the whole window: it is black, the
   strip is black, and the wordmark above it is fixed to the window rather
   than to the column, so the two have to agree about where the middle is. */
.leo-hero{padding-left:0}

/* --- THE BAR ---------------------------------------------------------
   The reference floats its navigation over the opening rather than
   putting it above it, so the room starts at the top of the window. The
   markup is untouched — this is the same .bar every page has, moved and
   recoloured for the one page that has a black stage under it. */
.leo .bar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding-top:1.8rem; padding-bottom:1.8rem;
  color:var(--ink);
  transition:background var(--speed) var(--easing),
             backdrop-filter var(--speed) var(--easing);
}
/* THE BAR IS EMPTY UNTIL THE NAME LANDS IN IT. Only the house is there while
   the word is still on its way; the links fade up when it arrives, which is
   what makes the arrival mean something rather than just being a resize.
   leo.js sets .is-named at the end of the flight.

   visibility, not just opacity: a link at zero opacity is still a tab stop
   and still takes a click, and there is a whole opening's worth of page
   underneath these. */
.leo .bar-nav,.leo .bar-find,.leo .theme-btn{
  opacity:0; visibility:hidden;
  transition:opacity var(--speed-slow) var(--power3-out),
             visibility 0s linear var(--speed-slow);
}
.leo .bar.is-named .bar-nav,
.leo .bar.is-named .bar-find,
.leo .bar.is-named .theme-btn{
  opacity:1; visibility:visible;
  transition:opacity var(--speed-slow) var(--power3-out), visibility 0s;
}
.leo .bar-home svg{stroke:var(--ink)}
.leo .bar-nav a,.leo .bar-nav .label,.leo .bar-find{color:var(--ink)}
.leo .bar.is-named .bar-nav .label,.leo .bar.is-named .bar-find{opacity:.72}
.leo .bar .label:hover,.leo .bar .label:focus-visible{opacity:1}
.leo .theme-btn i{border-color:var(--ink); background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
/* Once the room is behind you the bar is over the page's own ground, so
   it takes the page's own ink back and lays a sheet of it behind itself.
   leo.js sets .is-past at the foot of the room. */
.leo .bar.is-past{
  color:var(--ink);
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:blur(12px) saturate(140%);
}
.leo .bar.is-past .bar-home svg{stroke:var(--ink)}
.leo .bar.is-past .bar-nav .label,.leo .bar.is-past .bar-find{color:var(--ink)}
.leo .bar.is-past .theme-btn i{
  border-color:var(--ink); background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);
}

/* --- THE NAME, AND ITS FLIGHT ---------------------------------------
   Three states, one transform, and one number driving it.

       on the ceiling   tipped away, oversized, caps clipped by the top
                        edge — the plane the room's other three faces are
                        drawn on, without being on one
       standing up      as the camera flies down the room the word swings
                        upright and settles at full width across the top
       locked           small, at the bar's own left inset, for the rest
                        of the page

   THE TRANSFORM IS WHAT MOVES, not the layout. The element never leaves
   its fixed box at the top of the window: leo.js writes one
   perspective/translate/rotate/scale string per frame, so the whole
   flight is on the compositor and there is not a single reflow in it.
   This is also why it is one element and not a hand-off between two —
   a hand-off is where the earlier version of this page had its bug.

   transform-origin is the TOP CENTRE. That is what makes rotateX read as
   a ceiling: the far edge of the word drops toward the vanishing point
   while the near edge stays put on the frame. */
.leo-mark{
  position:fixed; top:0; left:0; width:100vw; z-index:85;
  transform-origin:50% 0%; will-change:transform;
  text-decoration:none; pointer-events:none;
}
.leo-mark span{
  display:block; text-align:center; white-space:nowrap;
  font-family:var(--face); font-weight:900;
  
  font-size:1px; line-height:.78; letter-spacing:-0.02em;
  text-transform:uppercase;
  /* INK, NOT THE PURPLE. The purple came from the reference, where the name
     is the only colour on a black page. Here it is the one word on a page
     that is already one colour, and setting it in the page's own ink is what
     makes it read as the mark rather than as a highlight. The purple is still
     the accent everywhere else — the buttons, the counts, the tabs. */
  color:var(--ink);
}
/* Once it is in the bar it is a link again. It lands in the MIDDLE of the
   bar rather than at its left inset, so the house keeps the left corner and
   the name keeps the centre slot the bar was already built with. */
.leo-mark.is-locked{pointer-events:auto}
.leo-mark.is-locked span{transition:color var(--speed) var(--easing)}
.leo-mark.is-locked:hover span,.leo-mark.is-locked:focus-visible span{color:var(--ink)}

/* ==============================================================
   THE ROOM
   ============================================================== */

/* THREE WINDOWS OF SCROLL, ONE WINDOW OF PICTURE. The section is tall;
   the stage inside it is one window high and sticks to the top. The
   distance between the two IS the length of the flight, and leo.js reads
   its own progress off exactly that. */
.leo-hero{height:300vh; position:relative}
.leo-stage{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden;
  /* ONE GROUND FOR THE WHOLE PAGE. The stage was pinned to #000 in both
     worlds, on the argument that it is a lit room and a room does not
     change colour because the page around it did. That was wrong in
     practice: in the light world it made a black screen that ended on a
     seam and handed over to a white one, and no amount of fading hid the
     fact that the page was two colours. It takes --ground like everything
     else now, so the landing page is black from top to bottom in the dark
     world and paper from top to bottom in the light one — and the switch
     means something on this page instead of half of it. */
  background:var(--ground); color:var(--ink);
}

/* --- THE SCATTER ---
   The work, coming past once the room has opened out. The eight
   positions are the reference's own grid, which is a good scatter; the
   pictures in them are this site's. leo.js writes the transform. */
.leo-scatter{position:absolute; inset:0; z-index:2; pointer-events:none}
/* ONE PICTURE IN THE ARRANGEMENT. Its place and its size are inline
   percentages of the stage, written by leo.js from the grid — so the
   composition is described in one table and not in this file. Absolute
   positioning is what makes those percentages mean anything: without it
   the eight of them stack down the left in source order.

   The corner is in vmin. A 1.2rem radius scaled six times is a 7rem
   radius, which stops reading as a card and starts reading as a blob;
   this one is the same corner on the screen at every size it passes
   through. */
.leo-shot{
  position:absolute; overflow:hidden;
  opacity:0; will-change:transform,opacity;
  border-radius:1.4vmin;
  box-shadow:0 2.4rem 8rem rgba(0,0,0,.55);
}
.leo-shot img{width:100%; height:100%; object-fit:cover; display:block}

/* --- WHAT THE PAGE SAYS ---
   Pinned to the middle of the stage for the whole flight. z-index above
   both the room and the scatter: the type is what the visitor is meant to
   be reading while the rest moves. */
.leo-center{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.4rem; padding:0 var(--s4); text-align:center; pointer-events:none;
}
.leo-center > *{pointer-events:auto}
.leo-h1{
  margin:0; font-family:var(--face); font-weight:900;
  
  font-size:clamp(2.6rem, 4.4vw, 4.4rem); line-height:.93;
  letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink);
}
.leo-h1 span{display:block}

/* --- THE TWO BUTTONS ---
   The reference's pill: 16px at weight 500, 13.5 by 20.25 of padding,
   fully rounded. One filled white, one drawn in a hairline. */
.leo-cta{display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center}
.leo-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.35rem 2.4rem; border-radius:999px; border:1px solid transparent;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500;
  line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background var(--speed) var(--easing),
             color var(--speed) var(--easing),
             border-color var(--speed) var(--easing),
             transform var(--micro) var(--easing);
}
.leo-btn:active{transform:scale(.96)}
/* The pair reads the same in both worlds because both are written in ink and
   ground rather than in black and white: filled is ink on ground, drawn is
   ground with an ink hairline. */
.leo-btn--fill{background:var(--ink); color:var(--ground)}
.leo-btn--fill:hover,.leo-btn--fill:focus-visible{background:var(--leo-purple); color:#fff}
.leo-btn--line{
  background:transparent; color:var(--ink);
  border-color:color-mix(in srgb, var(--ink) 45%, transparent);
}
.leo-btn--line:hover,.leo-btn--line:focus-visible{
  border-color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent);
}
/* the third one, for the sections below, which sit on the page's ground */
.leo-btn--ghost{
  background:transparent; color:var(--ink);
  border-color:color-mix(in srgb, var(--ink) 30%, transparent);
}
.leo-btn--ghost:hover,.leo-btn--ghost:focus-visible{border-color:var(--ink)}
/* and the filled one, on the page's ground rather than on the stage */
.leo-feat .leo-btn--fill,.leo-end .leo-btn--fill{background:var(--ink); color:var(--ground)}
.leo-feat .leo-btn--fill:hover,.leo-end .leo-btn--fill:hover,
.leo-feat .leo-btn--fill:focus-visible,.leo-end .leo-btn--fill:focus-visible{
  background:var(--leo-purple); color:#fff;
}
.leo-end .leo-btn--line{color:var(--ink); border-color:color-mix(in srgb, var(--ink) 30%, transparent)}
.leo-end .leo-btn--line:hover,.leo-end .leo-btn--line:focus-visible{
  border-color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent);
}

/* the hint at the foot of the stage — a rule that fills downward once */
.leo-scroll{
  position:absolute; left:50%; bottom:3.2rem; z-index:6;
  width:1px; height:5.6rem; background:color-mix(in srgb, var(--ink) 22%, transparent);
  transform:translateX(-50%); overflow:hidden;
}
.leo-scroll i{
  position:absolute; inset:0; background:var(--ink);
  transform:translateY(-100%); animation:leo-drip 2.4s var(--power2-in-out) infinite;
}
@keyframes leo-drip{
  0%{transform:translateY(-100%)}
  55%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}

/* ==============================================================
   THE SECTIONS BELOW — on the page's own ground, in either world
   ============================================================== */

.leo-p{
  font-family:var(--face-ui); font-size:1.65rem; font-weight:500;
  line-height:1.35; color:var(--soft); margin:0;
}
.leo-p--mid{
  max-width:52ch; margin-inline:auto; text-align:center;
  padding-inline:var(--s4);
}
.leo-h2{
  margin:0; font-family:var(--face); font-weight:900;
  
  font-size:clamp(2.6rem, 3.4vw, 3.44rem); line-height:1;
  letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink);
}

/* THE FULL-BLEED DISPLAY LINE. The reference sets these as wide as the
   window will take and lets the last line run short; the size is solved
   from the window rather than clamped, so the line always reaches both
   gutters. --mega-fit is written by leo.js. */
.leo-mega{
  margin:0; padding:0 var(--s4);
  font-family:var(--face); font-weight:900;
  
  font-size:clamp(3.4rem, 6.8vw, 9.75rem); line-height:.88; letter-spacing:-0.02em;
  text-transform:uppercase; text-align:center; color:var(--ink);
  overflow-wrap:normal;
}
.leo-mega[data-tone="purple"]{color:var(--leo-purple)}
.leo-mega[data-tone="lime"]{color:var(--leo-lime)}
.leo-mega[data-tone="amber"]{color:var(--leo-amber)}
.leo-mega[data-tone="coral"]{color:var(--leo-coral)}
/* A single word gets fitted to the window instead of clamped — one word
   that stops short of the gutters reads as an accident, where a wrapped
   sentence that does the same reads as a line break. leo.js writes it. */
.leo-mega--wide{white-space:nowrap; font-size:1px; letter-spacing:-0.02em}
/* On the lime and amber the ink is nearly invisible on white paper, so in
   the light world those two take a dark edge instead of a flat fill —
   same drawing, legible ground. */
:root[data-world="white"] .leo-mega[data-tone="lime"],
:root[data-world="white"] .leo-mega[data-tone="amber"]{
  -webkit-text-stroke:1px var(--ink);
}

/* --- IN NUMBERS --- */
.leo-counts{padding-block:12rem 10rem}
.leo-counts_row{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--s4); padding:0 var(--s4); align-items:end;
}
.leo-count b{
  display:block; font-family:var(--face); font-weight:900;
  
  font-size:clamp(4.8rem, 8vw, 11rem); line-height:.84; letter-spacing:-0.02em;
}
.leo-count:nth-child(1) b{color:var(--leo-purple)}
.leo-count:nth-child(2) b{color:var(--leo-lime)}
.leo-count:nth-child(3) b{color:var(--leo-amber)}
.leo-count:nth-child(4) b{color:var(--leo-coral)}
:root[data-world="white"] .leo-count:nth-child(2) b,
:root[data-world="white"] .leo-count:nth-child(3) b{-webkit-text-stroke:1px var(--ink)}
.leo-count span{
  display:block; margin-top:1rem;
  font-family:var(--face); font-weight:700;
  
  font-size:clamp(1.4rem, 1.6vw, 2rem); line-height:1.05;
  letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink);
}

/* --- WHAT IT IS --- */
.leo-feat{padding-block:2rem 10rem; position:relative}
/* THE WORD IS BEHIND THE PICTURE, NOT ABOVE THE SENTENCE. It is set to the
   right, where the picture is, and the picture is pulled up over its foot —
   which is the reference's arrangement and the reason the word can be this
   size without fighting anything. It was overlapping the text column,
   which is the one place it must not go. */
.leo-feat_word{
  position:relative; z-index:0; margin:0; padding:0 var(--s4);
  font-family:var(--face); font-weight:900;
  
  font-size:16vw; line-height:.8; letter-spacing:-0.02em;
  text-transform:uppercase; text-align:right; pointer-events:none;
}
.leo-feat_word[data-tone="purple"]{color:var(--leo-purple)}
.leo-feat_word[data-tone="lime"]{color:var(--leo-lime)}
.leo-feat_word[data-tone="amber"]{color:var(--leo-amber)}
:root[data-world="white"] .leo-feat_word[data-tone="lime"],
:root[data-world="white"] .leo-feat_word[data-tone="amber"]{-webkit-text-stroke:1px var(--ink)}
.leo-feat_in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:var(--s5); align-items:center; padding:0 var(--s4);
}
.leo-feat_text{display:flex; flex-direction:column; gap:2rem; align-items:flex-start}
.leo-feat_text .leo-p{max-width:42ch}
.leo-feat_media{
  margin:-7vw 0 0; border-radius:1.6rem; overflow:hidden; aspect-ratio:4/3;
  position:relative; z-index:1;
}
.leo-feat_media img{width:100%; height:100%; object-fit:cover; display:block}

/* --- BY NICHE --- */
.leo-niches{padding-block:8rem 10rem}
.leo-tabs{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin:4rem auto 2.4rem; padding:.6rem;
  border-radius:3.2rem; width:fit-content; max-width:min(100%, 108rem);
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.leo-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:1rem 1.8rem; border-radius:999px; color:var(--soft);
  font-family:var(--face-ui); font-size:1.5rem; font-weight:700; line-height:1.1;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.leo-tab:hover{color:var(--ink)}
.leo-tab[aria-selected="true"]{background:var(--leo-purple); color:#fff}
.leo-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(22rem, 20vw, 28rem);
  gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4rem var(--s4) 1rem; scrollbar-width:none;
}
.leo-strip::-webkit-scrollbar{display:none}
.leo-tile{
  display:block; text-decoration:none; color:inherit; scroll-snap-align:start;
}
.leo-tile_pic{
  display:block; aspect-ratio:3/4; border-radius:1.4rem; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground));
}
.leo-tile_pic img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--speed-slow) var(--power3-out)}
.leo-tile:hover .leo-tile_pic img{transform:scale(1.04)}
.leo-tile b{
  display:block; margin-top:1.4rem;
  font-family:var(--face); font-weight:700;
  
  font-size:1.8rem; letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink);
}
.leo-tile i{
  display:block; margin-top:.4rem; font-style:normal;
  font-family:var(--face-ui); font-size:1.3rem; color:var(--soft);
}

/* --- THE RULE --- */
.leo-say{padding-block:8rem 10rem}
.leo-say .leo-p--mid{margin-top:3.2rem}
.leo-boxes{
  list-style:none; margin:6rem 0 0; padding:0 var(--s4);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s4);
}
.leo-box{
  border-radius:2.4rem; padding:3.6rem 3rem 4rem;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  display:flex; flex-direction:column; gap:1.2rem;
}
.leo-box_k{
  font-family:var(--face-data); font-size:1.2rem; letter-spacing:.16em;
  color:var(--leo-purple);
}
.leo-box h3{
  margin:0; font-family:var(--face); font-weight:900;
  
  font-size:2.8rem; line-height:1; letter-spacing:-0.01em;
  text-transform:uppercase; color:var(--ink);
}
.leo-box p{margin:0; font-family:var(--face-ui); font-size:1.55rem;
  line-height:1.4; color:var(--soft)}

/* --- THE ARTISTS --- */
.leo-artists{padding-block:6rem 10rem; overflow:hidden}
.leo-rail_wrap{position:relative; margin-top:4rem}
.leo-rail{
  display:flex; gap:var(--s3); overflow-x:auto; scroll-behavior:smooth;
  padding:0 var(--s4) 1rem; scrollbar-width:none; scroll-snap-type:x mandatory;
}
.leo-rail::-webkit-scrollbar{display:none}
.leo-card{
  flex:0 0 auto; width:clamp(22rem, 22vw, 30rem);
  text-decoration:none; color:inherit; scroll-snap-align:center;
  border-radius:1.8rem; overflow:hidden; position:relative;
  background:color-mix(in srgb, var(--ink) 92%, var(--ground));
}
.leo-card img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}
.leo-card_say{
  position:absolute; left:0; right:0; bottom:0;
  padding:5rem 2rem 1.8rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.leo-card_say b{
  display:block; font-family:var(--face); font-weight:700;
  
  font-size:2.25rem; line-height:1.05; letter-spacing:-0.01em;
  text-transform:uppercase; color:var(--leo-coral);
}
.leo-card_say i{
  display:block; margin-top:.3rem; font-style:normal;
  font-family:var(--face-ui); font-size:1.3rem; color:rgba(255,255,255,.72);
}
.leo-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:4.8rem; height:4.8rem; border-radius:999px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background:color-mix(in srgb, var(--ground) 78%, transparent);
  backdrop-filter:blur(8px); color:var(--ink); font-size:1.8rem; line-height:1;
}
.leo-arrow--l{left:1.6rem}
.leo-arrow--r{right:1.6rem}
.leo-arrow:hover{border-color:var(--ink)}

/* --- THE FORK --- */
.leo-end{padding-block:8rem 4rem}
.leo-end .leo-p--mid{margin-top:3.2rem}
.leo-end .leo-cta{margin-top:3.2rem}
.leo-marquee{
  margin-top:8rem; overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:2rem 0;
}
.leo-marquee_in{display:inline-block; animation:leo-run 46s linear infinite}
.leo-marquee span{
  font-family:var(--face); font-weight:700;
  
  font-size:2.2rem; letter-spacing:-0.01em; text-transform:uppercase;
  color:var(--soft); padding:0 1.6rem;
}
.leo-marquee span::after{content:"\00b7"; padding-left:1.6rem; color:var(--leo-purple)}
@keyframes leo-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- THE FOOTER'S NAME ---
   The reference signs off with its own wordmark run right across the foot
   of the page, gutter to gutter. leo.js solves the size from the window;
   1px is only what it measures from. */
.leo-footmark{
  margin:8rem 0 2rem; padding:0;
  font-family:var(--face); font-weight:900;
  
  font-size:1px; line-height:.8; letter-spacing:-0.02em;
  text-transform:uppercase; white-space:nowrap; text-align:center;
  color:color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ==============================================================
   NARROWER WINDOWS
   ============================================================== */
@media (max-width:1000px){
  .leo-feat_in{grid-template-columns:1fr; gap:3.2rem}
  .leo-feat_word{font-size:24vw; text-align:left}
  .leo-feat_media{margin-top:-5vw}
  .leo-boxes{grid-template-columns:1fr}
  .leo-counts_row{grid-template-columns:repeat(2, 1fr); row-gap:5rem}
}
@media (max-width:768px){
  /* .shell adds the strip to its own left gutter below 768; the sections
     have to subtract exactly the same thing. */
  .leo-bleed{margin-left:calc((var(--edge-w) + var(--shell-pad)) * -1)}

  /* THE OPENING RUNS ON A PHONE TOO.

     It used to be taken out at this width — the hero went to height:auto,
     the stage stopped being sticky, the work was display:none — so a phone
     arrived on the two buttons with nothing in front of them and nothing
     to scroll through. The whole first window was simply missing on the
     device most people would open this on.

     It is the same runway now, three windows long, only measured in svh:
     the small-viewport unit is the one that does not change when a phone's
     URL bar slides away, so the length of the flight cannot move under the
     reader mid-scroll the way 100vh would.

     The stage keeps the sticky rule it has above — nothing to restate. The
     work gets its own portrait arrangement in leo.js, since eight
     landscape rectangles on a phone are eight tall slivers. */
  .leo-hero{height:300svh}
  .leo-center{padding:0 var(--s3); gap:2rem}
  .leo-scroll{bottom:2.4rem; height:4.4rem}
  .leo-counts{padding-block:8rem 6rem}
  .leo-strip{grid-auto-columns:clamp(18rem, 62vw, 24rem)}
  .leo-tabs{border-radius:2rem}
}

/* ==============================================================
   LESS MOTION
   The flight, the drip and the running names are all decoration. The room
   is still a room — it is simply already at the end of itself, which is
   where the campaigns are.
   ============================================================== */
@media (prefers-reduced-motion: reduce){
  .leo-hero{height:100vh}
  .leo-shot{opacity:1; transform:none}
  .leo-scroll i{animation:none; transform:none}
  .leo-marquee_in{animation:none}
  .leo-tile_pic img{transition:none}
}

/* ============================================================
   THE PANELS — one stage, three things said.

   The opening used to hold a single line and both buttons for the whole
   flight, which meant the only thing the first screen did was show work
   going past. It says something now: the name of the thing, then the rule,
   then how the money works — and only then are you offered the two things
   you can do. Nothing moves house to do it; the room, the wordmark and
   the frame are exactly where they were.

   THEY ARE STACKED, NOT SEQUENCED IN FLOW. One grid cell, three children
   in it, so the box never changes height and nothing below it shifts as
   the message changes. leo.js writes opacity and a small rise per frame
   off the same progress that drives the scatter — a CSS transition would
   fight the scroll instead of following it, so there is none here.
   ============================================================ */
.leo-slides{display:grid; place-items:center; width:100%}
.leo-slide{
  grid-area:1/1; text-align:center; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:1.8rem;
  will-change:opacity, transform;
  transform:translateY(1.4rem);
  /* LEAVING is quick and plain, so the old line is nearly gone by the time
     the new one starts — two headlines through each other on a photograph
     is a smear */
  transition:opacity .3s var(--power2-in-out), transform .45s var(--power2-in-out);
}
/* a panel already passed leaves upward, one still to come waits below, so
   the text always moves the way the page is going */
.leo-slide.is-before{transform:translateY(-1.4rem)}
/* ARRIVING waits for the old one to clear, then settles in slowly. The
   compositor runs this on its own clock — see panels() in leo.js for why
   the scroll no longer drives it frame by frame. */
.leo-slide.is-on{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .6s var(--power3-out) .26s, transform .8s var(--power3-out) .26s;
}
.leo-slide .leo-h1{margin:0}
.leo-slide_say{
  margin:0; max-width:42ch;
  font-family:var(--face-ui); font-size:1.6rem; line-height:1.45;
  color:color-mix(in srgb, var(--ink) 66%, var(--ground));
  text-shadow:0 0 3rem var(--ground), 0 0 8rem var(--ground);
}
/* THE BUTTONS AND THE LINE UNDER THEM, on the same terms as the panels:
   leo.js says when, the transition says how. The hidden state is scoped to
   .is-run, which leo.js sets once it is driving the stage — if the script
   never runs, the buttons are simply there rather than waiting forever for
   a class nobody will add. */
.leo-cta{will-change:opacity, transform}
.leo-stage.is-run .leo-cta,
.leo-stage.is-run .leo-next{
  opacity:0; transform:translateY(1.4rem); pointer-events:none;
  transition:opacity .3s var(--power2-in-out), transform .45s var(--power2-in-out);
}
.leo-stage.is-run .leo-cta.is-on{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .6s var(--power3-out) .1s, transform .8s var(--power3-out) .1s;
}
/* a beat behind the buttons: the alternative, not a third thing to weigh */
.leo-stage.is-run .leo-next.is-on{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .6s var(--power3-out) .5s, transform .8s var(--power3-out) .5s;
}
.leo-scroll{transition:opacity .4s var(--power2-in-out)}
.leo-scroll.is-off{opacity:0}

/* no script: the first thing said, and the two ways on */
.leo-stage:not(.is-run) .leo-slide[data-slide="0"]{opacity:1; transform:none}
.leo-stage:not(.is-run) .leo-next{opacity:1}

@media (prefers-reduced-motion: reduce){
  /* no flight to read the panels off, so the opening simply states the
     first one and offers the two things you can do */
  .leo-slide{opacity:0 !important; transform:none !important}
  .leo-slide[data-slide="0"]{opacity:1 !important}
  .leo-cta{opacity:1 !important; transform:none !important}
  .leo-slide,.leo-cta,.leo-next,.leo-scroll{transition:none !important}
  .leo-stage.is-run .leo-cta,.leo-stage.is-run .leo-next{pointer-events:auto}
}

/* THE PANELS NEED A GROUND, AND ONLY WHEN THE WORK IS BEHIND THEM.

   At the top of the flight the words sit on empty paper and read fine. By
   the middle the scatter has filled the frame and they are ink on
   photographs — "All or nothing" all but disappeared into somebody's pink
   hoodie. The halo on the type alone was not enough; a picture is not a
   flat ground and a glow only holds against one.

   So: a soft pool of the page's own ground behind the centre, no edge to
   it anywhere, and leo.js fades it in on the SAME number the scatter comes
   in on. At the start there is nothing there, because there is nothing to
   hold back. It is never a box and never a panel — at full strength it is
   still only three quarters of the ground, so the work stays visible
   through it. */
.leo-center::before{
  content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none;
  opacity:var(--leo-pool, 0);
  background:radial-gradient(52% 42% at 50% 46%,
    color-mix(in srgb, var(--ground) 76%, transparent) 0%,
    color-mix(in srgb, var(--ground) 52%, transparent) 42%,
    transparent 72%);
}

/* --- THE THIRD WAY OUT ------------------------------------------------
   Quieter than the two buttons on purpose. It is not a third choice to
   weigh, it is the answer to "is this the end of the page" — so it is a
   line of small caps and a rule that keeps filling downward, not a pill.
   leo.js brings it in just after the buttons and it stays. */
.leo-next{
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
  margin-top:.6rem; text-decoration:none; color:inherit;
  opacity:0; will-change:opacity, transform;
}
.leo-next_say{
  font-family:var(--face-data); font-size:1.15rem; letter-spacing:.14em;
  text-transform:uppercase; color:color-mix(in srgb, var(--ink) 62%, var(--ground));
  text-shadow:0 0 2.4rem var(--ground), 0 0 6rem var(--ground);
  transition:color var(--speed) var(--easing);
}
.leo-next_say b{font-weight:400; color:var(--ink)}
.leo-next:hover .leo-next_say,.leo-next:focus-visible .leo-next_say{color:var(--ink)}
.leo-next_rule{
  position:relative; display:block; width:1px; height:4.4rem; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 20%, transparent);
}
.leo-next_rule i{
  position:absolute; inset:0; background:var(--ink);
  transform:translateY(-100%); animation:leo-drip 2.4s var(--power2-in-out) infinite;
}
@media (prefers-reduced-motion: reduce){
  .leo-next{opacity:1 !important; transform:none !important}
  .leo-next_rule i{animation:none; transform:none}
}

/* ==============================================================
   THE NEXT CAMPAIGN ARRIVES BEFORE THE ROOM LETS GO

   The column is pulled up into the hero's last stretch, so over the final
   part of the scroll the first card rises into the bottom of the screen
   under "or keep scrolling" and the line shows what it means.

   HOW FAR IS MEASURED, NOT WRITTEN — see peek() in leo.js. It was a fixed
   8rem + 18vh here, which cleared the line on a tall window and ran the
   sort row into it on a shorter one: the line sits a fixed distance below
   the middle of the screen, and 18vh is not a fixed distance from anything.
   leo.js reads where the line ends and stops the column a set gap below it.
   ============================================================== */


/* THE COMPACT BAR ON THE LANDING PAGE (13 September 2026). The floating bar
   keeps its fade-in and its sheet, at the new height. Log in keeps its
   ground-coloured word on the ink pill: the rules above set every nav word
   to ink and dim it, which on the pill would be ink on ink. */
.leo .bar{padding-top:.8rem; padding-bottom:.8rem}
.leo .bar .bar-actions .bar-nav li:last-child .label,
.leo .bar.is-named .bar-actions .bar-nav li:last-child .label,
.leo .bar.is-past .bar-actions .bar-nav li:last-child .label{color:var(--ground); opacity:1}
.leo .bar .bar-actions .bar-nav li:last-child .label:hover,
.leo .bar .bar-actions .bar-nav li:last-child .label:focus-visible{color:#fff}


/* ============================================================
   AFTER THE WALL (13 September 2026)
   The profile page's panels — a whisper of ink over the ground, rounded
   at 2.8rem — holding the numbers, how it works, the niche browser, the
   questions and the closing ask. The landing page's four colours stay on
   the numbers only; everything else is ink, soft and the one purple on
   hover, as on the rest of the site.
   ============================================================ */
/* one column, pinned to the page's width: left to size itself, the column
   grew to the niche strip's full row of tiles and ran every panel off a
   phone's screen */
.lp{display:grid; grid-template-columns:minmax(0, 1fr); gap:1.6rem; max-width:132rem; margin:9.6rem auto 0;
  position:relative}   /* the thread below is measured against this box */
.lp-panel{min-width:0; position:relative; z-index:1}   /* content over the thread */

/* THE DRAWN BORDER — one line threading the four panels, drawn by the
   page's own scroll. leo.js builds the path and scrubs stroke-dashoffset;
   everything here is only how it looks. See the long note in leo.js.

   FULL BLEED, not the container's width: left/right are pulled to the
   window edges with the 50%/50vw trick, because the panels have no side
   padding and a vertical drawn at the container's edge would run through
   the left edge of every paragraph.

   vector-effect keeps the stroke exactly 1px while the viewBox is stretched
   to the section stack's height — without it a non-uniform scale would
   render the horizontals and the verticals at different thicknesses. */
.lp-thread{
  position:absolute; top:0; bottom:0;
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  width:100vw; height:100%;
  pointer-events:none; z-index:0; overflow:visible;
}
/* THE BUS. It shares the thread's coordinate box exactly — same top, same
   full-bleed left — so leo.js can hand it a point straight off the path with
   no conversion. translate(-50%,-50%) after the point centres it on the line
   rather than hanging it off the corner.

   It fades in on .is-on, which leo.js sets only once the model has actually
   loaded: a model-viewer with nothing in it is a blank square, and a blank
   square sliding down the page is worse than no bus at all. */
.lp-bus{
  position:absolute; top:0; left:calc(50% - 50vw);
  /* an explicit height, not aspect-ratio: model-viewer's own :host rule sets
     a default height and wins, so the box came out 70 wide by 150 tall */
  width:clamp(6.4rem, 8vw, 11rem); height:clamp(6.4rem, 8vw, 11rem);
  /* BEHIND THE WORDS, with the thread (z-index 0) and under .lp-panel (1).
     The drops run in the page's outer margin, which is 5px wide on a phone —
     no bus fits there, so on a drop it has to come inboard over the reading
     column. Above the text it covered a heading; below it, the type draws
     over the bus and stays perfectly legible while the bus passes behind.
     The panels have no fill any more, so nothing else hides it. */
  z-index:0; pointer-events:none;
  opacity:0; transition:opacity .5s var(--easing);
  --poster-color:transparent; background:transparent;
}
.lp-bus.is-on{opacity:1}
model-viewer.lp-bus::part(default-progress-bar){display:none}
@media (prefers-reduced-motion:reduce){.lp-bus{display:none}}

.lp-thread path{
  fill:none; stroke:var(--rule); stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square; stroke-linejoin:miter;
}
/* NO PANEL FILL (23 Sept 2026, client: "i dont like this big bubbles
   (background) everywhere ... however the small ones that are used for
   'log in' 'support' i like those"). The tinted rounded box is gone; the
   padding that shaped it stays as VERTICAL rhythm only, so the content
   now aligns to the page grid instead of sitting inset inside a card.
   Pills and buttons keep their fills — those were never the complaint. */
/* THE LINES WENT (23 September 2026, same day they arrived). A hairline at
   the head of every section was the specimen-sheet reading of the reference;
   the client tried it and preferred the page without: "we liked it more
   without the lines". The sections are told apart by their headings and
   their air, which is what they were doing between the fills going and the
   lines arriving. Do not put them back without being asked. */
.lp-panel{
  margin:0; padding:clamp(2.4rem, 4vw, 5.6rem) 0; color:var(--ink);
}
.lp-head{margin:0 0 clamp(2.4rem, 3.2vw, 4rem)}
.lp-head--row{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.lp-k{
  margin:0 0 1.2rem; font-family:var(--face-ui); font-weight:700; font-size:1.2rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--soft);
}
.lp-h{
  margin:0; max-width:20ch; font-family:var(--face-ui); font-weight:600;
  font-size:clamp(3rem, 4.4vw, 5.6rem); line-height:1.02; letter-spacing:-0.02em; text-wrap:balance;
}
.lp-p{
  margin:1.6rem 0 0; max-width:52ch; font-family:var(--face-ui);
  font-size:1.7rem; line-height:1.5; letter-spacing:-0.011em; color:var(--soft);
}
.lp-p a,.lp-q p a,.lp-small a{color:var(--ink); text-underline-offset:.2em}

/* ---- the numbers ---- */
.lp-nums_row{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2.4rem}
.lp-nums .leo-count{display:flex; flex-direction:column; gap:1.2rem; min-width:0}
.lp-nums .leo-count b{
  display:block; font-size:clamp(5.2rem, 7.2vw, 9.6rem); line-height:.9; letter-spacing:-0.02em;
}
.lp-nums .leo-count span{
  display:block; font-family:var(--face-ui); font-size:1.3rem; font-weight:600; line-height:1.35;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}

/* ---- how it works ---- */
.lp-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.2rem}
.lp-step{padding:clamp(2rem, 2.4vw, 3.2rem) 0}   /* card fill removed with .lp-panel above */
.lp-step_n{
  display:inline-grid; place-items:center; height:3.2rem; min-width:3.2rem; padding:0 1rem;
  border-radius:99px; background:var(--ink); color:var(--ground);
  font-family:var(--face-ui); font-size:1.2rem; font-weight:700; letter-spacing:.08em; font-variant-numeric:tabular-nums;
}
.lp-step h3{margin:2.4rem 0 0; font-family:var(--face-ui); font-weight:600; font-size:2.2rem; line-height:1.15; letter-spacing:-0.02em}
.lp-step p{margin:1rem 0 0; font-family:var(--face-ui); font-size:1.55rem; line-height:1.5; color:var(--soft)}

/* ---- the niche browser ---- */
.lp-gridbtn{
  display:inline-flex; align-items:center; gap:1rem; flex:none;
  height:4.4rem; padding:0 2rem 0 1.6rem; border-radius:1.6rem;
  background:color-mix(in srgb, var(--ink) 11%, var(--ground)); color:var(--ink); text-decoration:none;
  font-family:var(--face-ui); font-size:1.3rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.lp-gridbtn:hover,.lp-gridbtn:focus-visible{background:var(--ink); color:var(--ground); outline:none}
.lp-gridbtn i{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:.3rem; width:1.5rem; height:1.5rem}
.lp-gridbtn i s{display:block; background:currentColor; border-radius:.2rem}
.lp-tabs{display:flex; flex-wrap:wrap; gap:.8rem}
.lp-tabs .leo-tab{
  display:inline-flex; align-items:center; height:4rem; padding:0 1.6rem; margin:0;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--ground); color:var(--ink);
  font-family:var(--face-ui); font-size:1.4rem; font-weight:500; letter-spacing:0; text-transform:none;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.lp-tabs .leo-tab:hover{background:color-mix(in srgb, var(--ink) 10%, var(--ground)); color:var(--ink)}
.lp-tabs .leo-tab[aria-selected="true"]{background:var(--ink); color:var(--ground)}
.lp-tabs .leo-tab:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.lp-say{margin:2rem 0 0; font-family:var(--face-ui); font-size:1.4rem; color:var(--soft)}
.lp-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(18rem, 22vw, 26rem); gap:1.2rem;
  margin:2rem 0 0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.4rem;
}
.lp-strip::-webkit-scrollbar{display:none}
.lp-strip .leo-tile{display:flex; flex-direction:column; min-width:0; margin:0; scroll-snap-align:start; color:var(--ink); text-decoration:none}
.lp-strip .leo-tile_pic{display:block; width:auto; height:auto; aspect-ratio:3 / 4; overflow:hidden; border-radius:2rem; margin:0 0 1.2rem;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground))}
.lp-strip .leo-tile_pic img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--speed-slow) var(--power3-out)}
.lp-strip .leo-tile:hover .leo-tile_pic img{transform:scale(1.04)}
.lp-strip .leo-tile b{display:block; margin:0; font-family:var(--face-ui); font-size:1.6rem; font-weight:600; letter-spacing:-0.01em; text-transform:none; line-height:1.25}
.lp-strip .leo-tile i{display:block; margin:.3rem 0 0; font-style:normal; font-family:var(--face-ui); font-size:1.15rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}

/* ---- questions: Cash App's accordion ---- */
.lp-faq{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); gap:clamp(2.4rem, 5vw, 8rem); align-items:start}
.lp-faq .lp-head{margin:0}
.lp-qs{border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.lp-q{border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.lp-q summary{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:2.2rem 0; cursor:pointer; list-style:none;
  font-family:var(--face-ui); font-size:clamp(1.7rem, 1.6vw, 2rem); font-weight:600; letter-spacing:-0.015em; line-height:1.3;
}
.lp-q summary::-webkit-details-marker{display:none}
.lp-q summary:focus-visible{outline:2px solid var(--ink); outline-offset:4px; border-radius:.6rem}
/* the plus, drawn from two hairlines, turns to a cross when open */
.lp-q summary i{
  position:relative; flex:none; width:3.6rem; height:3.6rem; border-radius:50%;
  background:var(--ground); transition:transform var(--speed) var(--power3-out), background var(--speed) var(--easing);
}
.lp-q summary i::before,.lp-q summary i::after{
  content:""; position:absolute; left:50%; top:50%; width:1.3rem; height:1.5px; border-radius:2px;
  background:var(--ink); transform:translate(-50%, -50%);
}
.lp-q summary i::after{transform:translate(-50%, -50%) rotate(90deg)}
/* OPEN, so it takes the spark — the reference does the same with its team
   accordion. The strokes stay ground-coloured, so it reads as a white cross
   on a blue disc. See --spark in tokens.css. */
.lp-q[open] summary i{transform:rotate(45deg); background:var(--spark)}
.lp-q[open] summary i::before,.lp-q[open] summary i::after{background:var(--ground)}
.lp-q summary:hover i{background:color-mix(in srgb, var(--ink) 12%, var(--ground))}
.lp-q[open] summary:hover i{background:var(--spark)}
.lp-q p{
  margin:-.6rem 0 2.4rem; max-width:54ch; font-family:var(--face-ui);
  font-size:1.6rem; line-height:1.55; color:var(--soft);
  animation:lp-open .45s var(--power3-out);
}
@keyframes lp-open{from{opacity:0; transform:translateY(-.6rem)}}

/* ---- the last panel: words left, a fan of the wall's photographs right ---- */
.lp-end{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:clamp(2.4rem, 4vw, 6.4rem); align-items:center; overflow:hidden;
}
.lp-end .lp-h{margin:0; max-width:14ch}
.lp-end .lp-p{margin:1.6rem 0 0}
/* ============================================================
   THE CLOSING ASK, RE-SET 23 September 2026 (client: "delete the bubbles
   from these two and make them all caps, also space the whole thing
   differently, use more of the page ... get inspired from the cassette
   website code").

   NO PILLS. cassettemusic.com's footer does the same thing: its calls to
   action are uppercase words with a small arrow and nothing drawn around
   them. A pill is a box that says "this is a control"; at the end of a page
   that has just made its case, the words can carry that themselves.

   HIERARCHY WITHOUT SHAPE. The two used to be told apart by a filled pill
   against an outlined one. With no shapes left, the primary takes the
   page's ink and the secondary takes --soft: the difference is tone, not
   furniture, and it survives at any size.

   THE ARROW IS AN ADDITION the client did not ask for, and it is here for
   one reason — with the box gone and the case gone to capitals, two short
   labels side by side can read as headings rather than as things you can
   press. The site already speaks this way ("MORE CAMPAIGNS ->" in the
   foot), and so does the reference. It is one ::after; delete it and the
   layout does not move.
   ============================================================ */
.lp-btns{display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(2.8rem, 5vw, 6.4rem); margin-top:clamp(4.8rem, 7vw, 8rem)}
.lp-btn{
  display:inline-flex; align-items:center; gap:.8rem;
  height:auto; padding:0; border:0; border-radius:0; background:none;
  font-family:var(--face-ui); font-size:clamp(1.3rem, 1.5vw, 1.6rem); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transition:color var(--speed) var(--easing);
}
.lp-btn::after{content:"\2192"; font-size:1.1em; line-height:1; transition:transform var(--speed) var(--easing)}
.lp-btn--fill{color:var(--ink)}
.lp-btn--line{color:var(--soft)}
.lp-btn:hover,.lp-btn:focus-visible{
  background:none; border:0; color:var(--ink); outline:none;
  text-decoration:underline; text-underline-offset:.55em; text-decoration-thickness:1px;
}
.lp-btn:hover::after,.lp-btn:focus-visible::after{transform:translateX(.3rem)}

/* the fan: the front card upright, the two behind it smaller, turned away
   and veiled a step, as the card stack holds the cards waiting behind */
.lp-fan{position:relative; height:clamp(30rem, 30vw, 40rem)}
.lp-fan_card{
  position:absolute; left:50%; top:50%;
  width:clamp(17rem, 17vw, 22rem); aspect-ratio:3 / 4; overflow:hidden; border-radius:2rem;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground));
  box-shadow:0 1.8rem 4.4rem color-mix(in srgb, #000 16%, transparent);
  transition:transform .7s var(--power3-out);
}
.lp-fan_card img{display:block; width:100%; height:100%; object-fit:cover}
.lp-fan_card::after{content:""; position:absolute; inset:0; background:var(--ground); opacity:0; pointer-events:none}
.lp-fan_card:nth-child(1){z-index:1; transform:translate(-112%, -50%) rotate(-9deg) scale(.86)}
.lp-fan_card:nth-child(3){z-index:1; transform:translate(12%, -50%) rotate(9deg) scale(.86)}
.lp-fan_card:nth-child(2){z-index:2; transform:translate(-50%, -52%)}
.lp-fan_card:nth-child(1)::after,.lp-fan_card:nth-child(3)::after{opacity:.15}
.lp-end:hover .lp-fan_card:nth-child(1){transform:translate(-124%, -50%) rotate(-12deg) scale(.86)}
.lp-end:hover .lp-fan_card:nth-child(3){transform:translate(24%, -50%) rotate(12deg) scale(.86)}
.lp-end:hover .lp-fan_card:nth-child(2){transform:translate(-50%, -55%)}

/* ---- the small print ---- */
.lp-small{
  margin:2.4rem auto 0; max-width:72ch; text-align:center;
  font-family:var(--face-ui); font-size:1.25rem; line-height:1.55; color:var(--soft);
}

@media (max-width:900px){
  .lp-end{grid-template-columns:minmax(0, 1fr)}
  .lp-fan{height:30rem}
  .lp-nums_row{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:3.2rem}
  .lp-steps{grid-template-columns:minmax(0, 1fr)}
  .lp-faq{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:600px){
  /* the fan fits the phone's panel: smaller cards, so the two behind stay
     inside its rounded edge instead of being cut by it */
  .lp-fan{height:26rem}
  .lp-fan_card{width:13.5rem}
  .lp{margin-top:6.4rem; gap:1.2rem}
  /* THE PHONE'S OWN PANEL RADIUS WENT 23 September 2026 with the fills. It
     survived the first sweep because that sweep looked for rules carrying a
     background AND a radius, and this one only ever carried the radius — so
     on a phone the section rule still curved up at both ends like the top of
     a card that was no longer there. Sweep on EITHER property, not both. */
  .lp-strip{grid-auto-columns:clamp(16rem, 58vw, 22rem)}
  .lp-head--row{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .lp-q p{animation:none}
  .lp-q summary i,.lp-strip .leo-tile_pic img,.lp-btn,.lp-gridbtn,.lp-tabs .leo-tab,.lp-fan_card{transition:none}
}


/* THE LAST PANEL, CENTRED AND WITHOUT PHOTOGRAPHS (13 September 2026) */
/* MORE OF THE PAGE (23 September 2026). The section was a heading, a line
   and two pills stacked tight inside a seventh of the window; the client
   asked for it to be spaced "differently, use more of the page". So the
   padding roughly doubles, the heading is no longer capped at 18ch and runs
   nearly twice the size of the ones above it — this is the last thing on the
   page and the only one asking for something, so it is allowed to be the
   biggest — and the air under it grows with it rather than staying at a flat
   1.6rem. Every value is a clamp on vw, so the phone gets the same
   proportions and not the desktop's absolute gaps. */
.lp-end{display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-block:clamp(9.6rem, 15vw, 19rem)}
.lp-end .lp-end_t{display:flex; flex-direction:column; align-items:center}
.lp-end .lp-h{
  margin:0 auto; max-width:none;
  font-size:clamp(3.6rem, 7.6vw, 9.6rem); line-height:.96;
}
.lp-end .lp-p{
  margin:clamp(2.4rem, 3.4vw, 4rem) auto 0;
  /* 56ch, not 36: at 36 the line broke after "everyone" and left "else."
     alone on a line of its own. The sentence is 52 characters, so a 56ch
     measure holds it on ONE line on a laptop and balance splits it evenly
     when the screen is too narrow for that. */
  max-width:56ch; text-wrap:balance;
  font-size:clamp(1.6rem, 1.9vw, 2.2rem);
}
.lp-end .lp-btns{justify-content:center}
.lp-fan{display:none}

/* no panel behind the closing ask — it sits on the page's own ground (13
   September 2026). Since 23 September no panel has a fill or a radius at
   all, so this says nothing the base rule does not; it is kept as the record
   that this one was first, and it still carries the section line above it. */
.lp-panel.lp-end{background:none; border-radius:0}