/* ============================================================================
   LOYALTY CARDS — the inner marketing pages
   ----------------------------------------------------------------------------
   contact · partnerships · creators

   These are NOT the legal pages. terms and privacy are a single measured
   column of prose on a plain ground, because that is what a document wants to
   be. These three are marketing: they use the landing page's bands, grounds,
   eyebrows, ledes and two-tone headlines, and they obey the same three rules
   it does — backgrounds to the window edge, content to 1440, and no two
   neighbouring bands sharing a shape.

   So this file is small on purpose. Nearly everything is already in site.css
   and landing.css; what is here is only what those two do not have:

     · a first band that clears the fixed glass bar
     · a plain card grid, light and dark
     · the two contact addresses
     · a block that announces itself as a placeholder

   One stylesheet rather than three <style> blocks. A component that exists in
   three copies is a component that will shortly exist in three versions.
   ========================================================================== */

/* ── The first band ──────────────────────────────────────────────────────
   The glass bar is fixed, so the page's own opening band has to leave room
   for it. The landing page never needs this: its first band is the hero,
   which the bar deliberately floats over. */
.phead{padding-top:calc(var(--nav-h) + clamp(56px,7vw,110px))}
.phead h1{font-size:clamp(36px,5vw,62px);letter-spacing:-.04em;margin-bottom:20px}
.phead .lede{max-width:62ch}

/* Centred lede, under a centred heading. Three pages were about to write
   this as an inline style apiece. */
.lede-mid{margin-left:auto;margin-right:auto;text-align:center}

/* A centred row of buttons. .hero-btns is the same object, but it carries a
   large bottom margin for the hero it was written for. */
.cta-mid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ── A plain card grid ───────────────────────────────────────────────────
   .ba in landing.css is the before/after card and carries .was and .now.
   This is the same material — white, hairline, generous radius — with
   nothing presumed about what goes inside it. */
.pgrid{display:grid;gap:clamp(12px,1.4vw,20px)}
.pgrid-2{grid-template-columns:repeat(2,1fr)}
.pgrid-3{grid-template-columns:repeat(3,1fr)}
.pgrid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.pgrid-4{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.pgrid-3{grid-template-columns:1fr}}
@media (max-width:620px){.pgrid-2,.pgrid-4{grid-template-columns:1fr}}

.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;gap:12px}
.pcard .ic{width:44px;height:44px;border-radius:13px;background:var(--lilac-soft);
  color:var(--purple);display:flex;align-items:center;justify-content:center;
  font-size:21px;flex-shrink:0;margin-bottom:4px}
.pcard h3{margin:0}
.pcard h4{font-size:17px;margin:0}
.pcard p{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0}
.pcard p b{color:var(--ink);font-weight:600}
/* A list inside a card: the icon's box is one line of the text beside it and
   never stretches to a wrapped paragraph's height. Same reasoning as .ob-note
   in site.css — see the long note there. */
.pcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pcard li{--fs:15px;--lh:1.55;
  display:flex;gap:10px;font-size:var(--fs);line-height:var(--lh);color:var(--text)}
.pcard li i{color:var(--purple);flex-shrink:0;align-self:flex-start;
  display:grid;place-items:center;
  block-size:calc(var(--fs) * var(--lh));font-size:17px;line-height:1}

/* The same card on a dark band. */
.band-dark .pcard{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17)}
.band-dark .pcard p{color:rgba(255,255,255,.74)}
.band-dark .pcard li{color:rgba(255,255,255,.82)}
.band-dark .pcard li i,.band-dark .pcard .ic{color:var(--peach)}
.band-dark .pcard .ic{background:rgba(255,255,255,.14)}

/* ── The two addresses ───────────────────────────────────────────────────
   The whole point of the contact page is that a reader picks the right one
   of these two, so they are the largest thing on it and they do not look
   alike: one is purple, one is orange, and the address itself is set at
   display size rather than as a link in a sentence.

   The orange is a 1px rule and a tint behind an icon — never type. #FF6432
   on paper is 3.0:1, which is a fill colour here, not a text colour. */
.addr{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,38px);display:flex;flex-direction:column;
  border-top:3px solid var(--purple)}
.addr.biz{border-top-color:var(--orange)}
.addr .ic{width:48px;height:48px;border-radius:14px;background:var(--lilac-soft);
  color:var(--purple);display:flex;align-items:center;justify-content:center;
  font-size:23px;margin-bottom:18px}
.addr.biz .ic{background:var(--peach-soft);color:var(--orange-deep)}
.addr h2{font-size:clamp(21px,2vw,25px);letter-spacing:-.025em;margin-bottom:8px}
.addr .what{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0 0 22px}
/* The address. Allowed to break mid-word, because loyaltycards.click does not
   fit beside "support@" on a 320px screen and a horizontal scrollbar on the
   contact page is worse than a wrap. */
.addr .at{display:inline-block;font-size:clamp(18px,1.9vw,23px);font-weight:500;
  letter-spacing:-.025em;color:var(--purple);line-height:1.25;
  overflow-wrap:anywhere;margin-bottom:22px}
.addr.biz .at{color:var(--purple-deep)}
.addr ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px}
.addr li{--fs:15px;--lh:1.55;
  display:flex;gap:10px;font-size:var(--fs);line-height:var(--lh);color:var(--text)}
.addr li i{color:var(--purple);flex-shrink:0;align-self:flex-start;
  display:grid;place-items:center;
  block-size:calc(var(--fs) * var(--lh));font-size:17px;line-height:1}
.addr.biz li i{color:var(--orange-deep)}
.addr .btn{margin-top:auto}

/* ── A block that says it is not finished ────────────────────────────────
   For the WhatsApp line, which is promised on the landing page and in the
   Terms and does not exist yet. The house already has a convention for this
   — [REGISTERED NAME] in the footer — and this is that convention given a
   surface, so nobody has to notice a square bracket in a paragraph.

   Peach ground and an orange rule: the same pair the landing page uses for
   the film that has not been shot. It is meant to be findable by eye from a
   scroll, and to look wrong enough that it cannot ship by accident. */
.pending{background:var(--peach-soft);border:1px solid rgba(255,100,50,.3);
  border-left:3px solid var(--orange);border-radius:0 var(--r) var(--r) 0;
  padding:clamp(20px,2.2vw,26px) clamp(22px,2.4vw,30px)}
.pending .flag{display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--peach);border-radius:var(--pill);
  padding:6px 14px;margin-bottom:14px}
.pending h3{font-size:19px;margin-bottom:8px}
.pending p{font-size:15.5px;color:var(--text);line-height:1.65;margin:0 0 10px}
.pending p:last-child{margin-bottom:0}
/* The slot itself. A dashed outline and a monospaced label, so it reads as a
   field waiting for a value rather than as a number somebody might dial. */
.pending .slot{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14.5px;font-weight:600;color:var(--orange-deep);
  background:rgba(255,255,255,.7);border:1.5px dashed rgba(255,100,50,.55);
  border-radius:var(--r-sm);padding:9px 14px;margin:4px 0 12px;
  overflow-wrap:anywhere}

/* ── A labelled fact ─────────────────────────────────────────────────────
   Used where a figure needs a name, a value and a sentence of qualification
   and a .tile would be too tall — the commission terms, the payment terms,
   the honest statement of stage. */
.facts{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.facts > div{display:grid;grid-template-columns:minmax(150px,.3fr) 1fr;
  gap:8px clamp(18px,3vw,48px);padding:22px 0;border-bottom:1px solid var(--line);
  align-items:baseline}
.facts dt,.facts .k{font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0}
.facts dd,.facts .v{margin:0;font-size:16.5px;line-height:1.65;color:var(--text)}
.facts .v b{color:var(--ink);font-weight:600}
.facts .v .amt{display:block;font-size:clamp(26px,2.6vw,34px);font-weight:500;
  letter-spacing:-.035em;color:var(--ink);line-height:1.1;margin-bottom:7px}
.band-dark .facts{border-top-color:rgba(255,255,255,.18)}
.band-dark .facts > div{border-bottom-color:rgba(255,255,255,.18)}
.band-dark .facts dt,.band-dark .facts .k{color:rgba(255,255,255,.6)}
.band-dark .facts dd,.band-dark .facts .v{color:rgba(255,255,255,.82)}
.band-dark .facts .v b,.band-dark .facts .v .amt{color:#fff}
@media (max-width:700px){
  .facts > div{grid-template-columns:1fr;gap:6px;padding:20px 0}
}

/* ── A closing band without a photograph ─────────────────────────────────
   The landing page closes on a full-bleed image. These pages have no new
   photography and are not getting invented photography, so they close on
   the dark inset band instead — which is the other ground the site already
   owns, and is the one the card stage uses. */
.pclose{text-align:center}
.pclose h2{margin-left:auto;margin-right:auto;max-width:24ch}
.pclose h2 em{font-style:normal;color:var(--peach)}
.pclose p{color:rgba(255,255,255,.8);font-size:clamp(17px,1.5vw,20px);
  max-width:56ch;margin:0 auto 32px;line-height:1.6}
.pclose .fine{font-size:14px;color:rgba(255,255,255,.55);margin:22px auto 0;max-width:52ch}

/* ── A quiet row of cross-links ──────────────────────────────────────────
   At the foot of a page, above the real footer: the two or three other
   places a reader might actually have wanted. */
.alsorow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.alsorow a{display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--pill);
  font-size:15px;font-weight:500;color:var(--ink);text-decoration:none!important;
  background:var(--white);border:1px solid var(--line);
  transition:border-color .2s,background-color .2s,color .2s}
.alsorow a:hover{border-color:var(--purple);color:var(--purple)}
.alsorow a i{font-size:17px;line-height:0;color:var(--purple)}

/* ============================================================================
   THE AFFILIATE PROGRAMME PAGE
   ----------------------------------------------------------------------------
   This page used to be eight stacked text bands lifted from the landing page,
   with no photograph on it anywhere. Images are not decoration here: somebody
   deciding whether to spend their evenings talking to shop owners wants to
   see the people who already do.
   ========================================================================== */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.aff-hero{padding-bottom:clamp(56px,6vw,92px)}
.aff-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);align-items:stretch}
.aff-hero-grid > div:first-child{align-self:center}
.aff-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.04em;
  margin-bottom:18px;text-wrap:balance}
.aff-hero h1 em{font-style:normal;color:var(--purple)}
.aff-hero-media{aspect-ratio:4/5;align-self:stretch;min-height:clamp(300px,28vw,400px)}
.aff-hero-media img{height:100%}
@media (max-width:860px){
  .aff-hero-grid{grid-template-columns:1fr}
  .aff-hero-media{aspect-ratio:3/2;order:-1}
}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:clamp(22px,2.6vw,32px) 0 0}
.hero-pts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:8px 22px}
.hero-pts li{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--muted)}
.hero-pts i{color:var(--purple);font-size:17px}

/* ── "You do not need a big following" ──────────────────────────────────── */
/* Its own band with its own shape, because it is the single sentence most
   likely to decide whether somebody applies — and in a row of identical cards
   nobody would read it. */
.openarms{display:flex;gap:clamp(18px,2.4vw,30px);align-items:flex-start;
  background:var(--lilac-soft);border-radius:var(--r-xl);
  padding:clamp(28px,3.6vw,48px)}
.openarms-ic{width:58px;height:58px;border-radius:18px;flex-shrink:0;display:grid;
  place-items:center;background:var(--white);color:var(--purple);font-size:27px}
.openarms h2{margin-bottom:14px}   /* the h2 scale is the h2 scale */
.openarms .lede{margin-bottom:12px;max-width:68ch}
.openarms .lede:last-child{margin-bottom:0}
@media (max-width:620px){ .openarms{flex-direction:column} }

/* ── Split sections with a photograph ───────────────────────────────────── */
/* ── A split section, and why the image STRETCHES ──────────────────────────
   align-items:center with a fixed 4/5 image leaves the taller column sticking
   out past the shorter one — and the text is almost always the taller one, so
   every split read as a block of writing with a small picture floating beside
   it.

   stretch plus aspect-ratio:auto lets the media take the row's full height,
   whatever the text does. The img is already object-fit:cover, so it crops
   rather than distorts. min-height stops a two-line paragraph collapsing the
   picture to a letterbox. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:stretch}
.split > *{align-self:center}
.split > .media{align-self:stretch}
/* The floor is deliberately LOW. It exists only so a two-line paragraph
   cannot squash the picture to a letterbox — the text is meant to govern the
   row height, and the image to match it. Set too high (560px) it drove the
   row instead, and the image came out taller than the words beside it, which
   is the same imbalance the other way round. */
/* The img is taken OUT of flow so it cannot size its own container.
   Left in flow, height:100% resolves to auto against a container with no
   definite height, so the image fell back to its intrinsic 4:5 and made the
   row 563px tall next to 440px of text — the picture sizing the row, which
   is exactly backwards. Absolute inside the already-relative .media lets the
   grid row take its height from the words, and the photograph fills whatever
   that turns out to be. */
.split-media{aspect-ratio:auto;min-height:clamp(260px,24vw,340px)}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split-media{aspect-ratio:3/2;min-height:0}
  .split-rev > .media{order:-1}
}

.steps{list-style:none;counter-reset:s;margin:0 0 clamp(22px,2.6vw,30px);padding:0;
  display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding-left:40px;font-size:15.5px;
  line-height:1.6;color:var(--muted)}
.steps li b{color:var(--ink);font-weight:600}
.steps li:before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;
  border-radius:50%;background:var(--lilac-soft);color:var(--purple);font-size:13px;
  font-weight:700;display:grid;place-items:center}
.band-dark .steps li:before{background:rgba(255,255,255,.14);color:var(--peach)}

/* ── Who does well ──────────────────────────────────────────────────────── */
.who-media{aspect-ratio:4/5;margin-bottom:16px}
.who h4{font-size:17.5px;margin:0 0 7px;letter-spacing:-.02em}
.who p{font-size:15px;color:var(--muted);line-height:1.6;margin:0}

/* ── How you join ───────────────────────────────────────────────────────── */
.joinflow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(34px,4vw,56px);counter-reset:j}
.joinstep{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px)}   /* matches .pcard */
.joinstep .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--purple);color:#fff;font-size:14px;font-weight:700;margin-bottom:14px}
.joinstep b{display:block;font-size:16px;color:var(--ink);letter-spacing:-.02em;
  margin-bottom:6px}
.joinstep p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}
@media (max-width:880px){ .joinflow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .joinflow{grid-template-columns:1fr} }

/* ── Questions ──────────────────────────────────────────────────────────── */
.qa details{border-bottom:1px solid var(--line);padding:4px 0}
.qa summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.45}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:'+';position:absolute;right:4px;top:16px;font-size:22px;
  font-weight:300;color:var(--purple);transition:transform var(--t)}
.qa details[open] summary:after{content:'–'}
.qa details p{margin:0 0 20px;font-size:15.5px;line-height:1.65;color:var(--muted);
  max-width:64ch}

/* ============================================================================
   THE EARNINGS CALCULATOR
   ----------------------------------------------------------------------------
   Three sliders, because three is what somebody will actually move. The
   version this replaces asked for traffic, click-through rate, average order
   value and a commission percentage — four numbers a person considering this
   does not know about themselves, to produce a figure they have no reason to
   believe.

   Two of ours are OUR numbers, not guesses: the prices are real. The only
   thing being estimated is how many shops they sign up and how long those
   shops stay, which is the honest shape of the question.
   ========================================================================== */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(24px,3.2vw,56px);align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,44px);margin-top:clamp(28px,3.4vw,48px);
  box-shadow:0 1px 2px rgba(25,14,46,.04),0 20px 60px rgba(25,14,46,.06)}
@media (max-width:820px){ .calc{grid-template-columns:1fr} }

.calc-in{display:grid;gap:clamp(20px,2.4vw,30px)}
.calc-f label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:15px;font-weight:500;color:var(--ink);margin-bottom:10px}
.calc-f label b{font-size:19px;font-weight:600;color:var(--purple);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-hint{display:block;font-size:13px;color:var(--faint);margin-top:7px}

/* A real range input, styled. A custom-drawn slider loses the keyboard, the
   screen reader and the touch target that the platform gives for free. */
.calc-f input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  border-radius:999px;background:var(--lilac-soft);outline:none;cursor:pointer}
.calc-f input[type=range]:focus-visible{outline:2px solid var(--purple);outline-offset:4px}
.calc-f input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:var(--purple);cursor:grab;
  border:3px solid var(--white);box-shadow:0 2px 8px rgba(100,50,200,.4)}
.calc-f input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(.94)}
.calc-f input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--purple);cursor:grab;border:3px solid var(--white);
  box-shadow:0 2px 8px rgba(100,50,200,.4)}

.calc-out{background:var(--paper);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px)}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.calc-k{min-width:0}
.calc-k span{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.calc-k b{display:block;font-size:clamp(19px,2vw,23px);font-weight:600;color:var(--ink);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}

.calc-big{background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  border-radius:var(--r);padding:clamp(18px,2.2vw,26px);color:#fff}
.calc-big > span{display:block;font-size:13.5px;color:rgba(255,255,255,.76);
  margin-bottom:4px}
.calc-big > b{display:block;font-size:clamp(34px,4.4vw,48px);font-weight:600;
  letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums}
.calc-per{display:block;font-size:13.5px;color:rgba(255,255,255,.76);margin-top:6px}

.calc-note{display:flex;gap:9px;font-size:13px;line-height:1.55;color:var(--muted);
  margin:16px 0 0}
.calc-note i{color:var(--faint);font-size:16px;flex-shrink:0;margin-top:1px}
.calc-note > span{min-width:0}

/* A centred section heading. The landing page centres by wrapping in
   .hold-mid; these pages have full-width bands with a centred heading above a
   grid, which is a different thing and needs its own name. */
.h2-mid{text-align:center;max-width:22ch;margin-left:auto;margin-right:auto;
  text-wrap:balance}
@media (max-width:620px){ .h2-mid{max-width:none} }

/* ── A list where each item carries a sentence, not a phrase ────────────── */
/* .ticks is for three-word items. These are two-clause points with a bold
   lead, which need the icon to hold its own column rather than sit inline. */
.ticks-lg{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;display:grid;
  gap:clamp(14px,1.6vw,18px)}
.ticks-lg li{display:flex;gap:13px;align-items:flex-start}
.ticks-lg i{color:var(--purple);font-size:21px;flex-shrink:0;margin-top:1px}
.ticks-lg span{font-size:15.5px;line-height:1.6;color:var(--muted);min-width:0}
.ticks-lg b{color:var(--ink);font-weight:600}
.band-dark .ticks-lg i{color:var(--peach)}
.band-dark .ticks-lg span{color:rgba(255,255,255,.8)}
.band-dark .ticks-lg b{color:#fff}

/* ── Now, and next ──────────────────────────────────────────────────────── */
/* Two phases, with the arrow between them an element rather than a border,
   so it can turn ninety degrees when the pair stacks on a phone. */
.phase{display:flex;align-items:stretch;gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(30px,3.4vw,46px);text-align:left}
.phase-step{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);
  border-radius:var(--r-lg);padding:clamp(22px,2.4vw,32px);min-width:0}
.phase-step.now{background:rgba(255,255,255,.14);border-color:var(--peach)}
.phase-n{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--peach);margin-bottom:10px}
.phase-step.now .phase-n{color:var(--peach)}
.phase-step b{display:block;font-size:19px;color:#fff;letter-spacing:-.025em;
  margin-bottom:8px;line-height:1.3}
.phase-step p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.74);margin:0}
.phase-arrow{display:grid;place-items:center;flex-shrink:0;color:var(--peach);font-size:26px}
@media (max-width:760px){
  .phase{flex-direction:column}
  .phase-arrow{transform:rotate(90deg)}
}

/* ── A wider media column ───────────────────────────────────────────────── */
/* The split normally pairs a portrait with text. .split-wide gives the image
   the larger share, because a 16:9 photograph squeezed into half a row at
   portrait proportions is a 16:9 photograph cropped back to a portrait. */
/* A landscape photograph keeps its shape. Stretching a 16:9 to fill a tall
   row crops it back into a portrait, which is the opposite of why it was
   shot wide — it rendered at 0.59:1, narrower than the 4:5 portraits it was
   supposed to vary. */
.split-wide{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.split-wide > .media{align-self:center}
.split-media.wide{aspect-ratio:16/9;min-height:0}
.split-media.wide img{height:100%}
@media (max-width:860px){ .split-wide{grid-template-columns:1fr} }

/* ── Full-bleed band ────────────────────────────────────────────────────── */
/* Edge to edge, outside the .hold measure. A width the rest of the page
   cannot reach is what gives a long scroll a sense of chapters. */
.bleed{position:relative;width:100%;line-height:0}
.bleed img{width:100%;height:clamp(240px,34vw,460px);object-fit:cover;display:block}
.bleed-cap{position:absolute;left:50%;bottom:clamp(18px,3vw,38px);transform:translateX(-50%);
  width:min(100% - 32px,640px);text-align:center}
.bleed-cap p{display:inline-block;margin:0;line-height:1.5;font-size:clamp(14px,1.5vw,17px);
  color:var(--ink);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:var(--r);padding:clamp(12px,1.4vw,18px) clamp(16px,2vw,26px);
  box-shadow:0 2px 10px rgba(25,14,46,.07)}
.bleed-cap b{font-weight:600}
@media (prefers-reduced-transparency:reduce){
  .bleed-cap p{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ── A landscape photograph at the full measure ─────────────────────────── */
/* Not full-bleed — it stays inside .hold, so it reads as part of the section
   rather than as a second chapter break. */
.wide-media{aspect-ratio:16/9;width:100%}
.wide-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:620px){ .wide-media{aspect-ratio:4/3} }

/* ── The numbers, on an investor page ───────────────────────────────────── */
/* A figure, what it counts, and the share it represents. Three tiers,
   because "1,000,876" on its own is a number and "77.4% of every MSME in the
   country" is the argument. Tabular figures so the row reads as a set. */
.statband{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,3.6vw,48px)}
.statcell{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,30px);border-top:3px solid var(--purple)}
.statcell:nth-child(2){border-top-color:var(--orange)}
.statcell:nth-child(3){border-top-color:var(--purple-deep)}
.statcell:nth-child(4){border-top-color:var(--orange-deep,var(--orange))}
.statcell b{display:block;font-size:clamp(27px,3.1vw,40px);font-weight:500;color:var(--ink);
  letter-spacing:-.04em;line-height:1.04;font-variant-numeric:tabular-nums;
  margin-bottom:8px}
.statcell span{display:block;font-size:14.5px;line-height:1.45;color:var(--ink);
  font-weight:500;margin-bottom:6px}
.statcell em{display:block;font-style:normal;font-size:13px;line-height:1.45;
  color:var(--muted)}
@media (max-width:980px){ .statband{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .statband{grid-template-columns:1fr} }

/* The source line. On a page asking somebody for money, an unattributed
   statistic is worse than none — and the caveat about registered
   establishments makes the argument stronger, not weaker. */
.statsrc{font-size:13px;line-height:1.6;color:var(--muted);margin:clamp(14px,1.6vw,20px) 0 0;
  max-width:88ch}
.statsrc b{color:var(--ink);font-weight:600}

/* A dark band's cards and ticks invert. */
.band-dark .statcell{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17)}
.band-dark .statcell b,.band-dark .statcell span{color:#fff}
.band-dark .statcell em{color:rgba(255,255,255,.7)}
.band-dark .ticks-lg i{color:var(--peach)}

/* The "who this address is for" list inside an address card. */
.addr-for{list-style:none;margin:clamp(16px,1.8vw,22px) 0 0;padding:0;display:grid;gap:9px}
.addr-for li{display:flex;gap:9px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.addr-for i{color:var(--purple);flex-shrink:0;font-size:17px;margin-top:1px}
.addr.biz .addr-for i{color:var(--orange-deep,var(--orange))}

/* ── Starting from zero ─────────────────────────────────────────────────── */
/* Alternating cards on a spine. The offset is the point: a straight row of
   four equal cards reads as four options, and this is one thing happening
   over time. */
.growth{list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;position:relative;
  display:grid;gap:clamp(14px,1.8vw,24px)}
.growth:before{content:'';position:absolute;left:50%;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--lilac-soft),var(--purple),var(--lilac-soft));
  transform:translateX(-1px)}
.growth-step{position:relative;width:calc(50% - clamp(22px,2.6vw,38px));
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,30px)}
.growth-step:nth-child(even){margin-left:auto}
/* The node on the spine. */
.growth-step:after{content:'';position:absolute;top:clamp(24px,2.4vw,32px);
  width:13px;height:13px;border-radius:50%;background:var(--purple);
  border:3px solid var(--paper);box-shadow:0 0 0 2px var(--lilac-soft)}
.growth-step:nth-child(odd):after{right:calc(-1 * clamp(22px,2.6vw,38px) - 6px)}
.growth-step:nth-child(even):after{left:calc(-1 * clamp(22px,2.6vw,38px) - 6px)}

.growth-when{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);margin-bottom:8px}
.growth-n{display:block;font-size:clamp(23px,2.6vw,31px);font-weight:500;color:var(--ink);
  letter-spacing:-.035em;line-height:1.1;margin-bottom:8px}
.growth-step p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.growth-earn{display:inline-block;font-size:17px;font-weight:600;color:var(--ink);
  background:var(--lilac-soft);border-radius:var(--pill);padding:6px 14px;
  font-variant-numeric:tabular-nums}
.growth-earn em{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);
  margin-left:4px}

/* On a phone the spine moves to the left edge and the cards stop alternating:
   two columns of 48% at 380px wide is two columns of nothing. */
@media (max-width:760px){
  .growth:before{left:7px}
  .growth-step{width:100%;margin-left:30px!important}
  .growth-step:after{left:-30px!important;right:auto!important}
}

/* ── Four steps, as tabs ────────────────────────────────────────────────── */
.steps{display:grid;gap:clamp(20px,2.4vw,32px)}

.steps-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
.steptab{display:block;text-align:left;background:var(--white);cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);font:inherit;
  padding:clamp(14px,1.5vw,20px) clamp(14px,1.5vw,20px) 0;overflow:hidden;
  transition:border-color var(--t),background var(--t),transform .08s}
.steptab:hover{border-color:var(--lilac)}
.steptab:active{transform:translateY(1px)}
.steptab:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.steptab.on{border-color:var(--purple);background:var(--lilac-soft)}

.steptab-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--lilac-soft);color:var(--purple);font-size:13px;font-weight:700;
  margin-bottom:9px}
.steptab.on .steptab-n{background:var(--purple);color:#fff}
.steptab-t{display:block;font-size:15px;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;line-height:1.3;margin-bottom:clamp(14px,1.5vw,18px)}

/* The progress bar doubles as the tab's bottom edge, so a tab that is filling
   is also a tab that is obviously selected. */
.steptab-bar{display:block;height:3px;margin:0 clamp(-20px,-1.5vw,-14px);
  background:var(--line-soft)}
.steptab-bar > i{display:block;height:100%;width:0;background:var(--purple)}
.steptab.on .steptab-bar > i{width:100%;transition:width 6s linear}
.steps[data-paused="1"] .steptab.on .steptab-bar > i{transition:none;width:100%}

.steps-panes{position:relative}
.steppane{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;
  animation:stepIn .5s cubic-bezier(.22,1,.36,1) both}
.steppane[hidden]{display:none}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}}

.steppane-media{aspect-ratio:4/3;overflow:hidden}
.steppane-media img{width:100%;height:100%;object-fit:cover;display:block}
.steppane-n{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);margin-bottom:10px}
.steppane-body h3{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.035em;
  line-height:1.12;margin-bottom:12px}
.steppane-body p{font-size:16.5px;line-height:1.65;color:var(--muted);margin:0;
  max-width:46ch}
.steppane-body b{color:var(--ink);font-weight:600}

@media (max-width:860px){
  .steps-nav{grid-template-columns:repeat(2,1fr)}
  .steppane{grid-template-columns:1fr}
  .steppane-media{aspect-ratio:16/9}
}
@media (max-width:480px){
  .steptab-t{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .steppane{animation:none}
  .steptab.on .steptab-bar > i{transition:none}
}

/* ============================================================================
   HEADING RHYTHM
   ----------------------------------------------------------------------------
   The landing page sets h2 { margin-bottom: 0 } because its headings live in
   .head-row, a grid where the lede is a sibling COLUMN and never sits under
   the heading at all. These pages stack them, so every h2 was touching the
   paragraph below it — measured gap: 0, on nine headings out of nine.

   Adjacent-sibling selectors, so this only applies where something actually
   follows a heading in flow. .head-row is unaffected, because in a grid the
   lede is not the heading's next sibling in the same column.
   ========================================================================== */
/* The heading-to-sentence gap now comes from site.css, so the landing page
   gets it too. What stays here is only the block-level spacing below, which
   names classes that exist on these pages and nowhere else. */

/* A heading straight into a grid, a list or a media block needs the section
   gap rather than the paragraph gap — more space, because the next thing is
   a block rather than a sentence. */
.band h2 + .pgrid,
.band h2 + .statband,
.band h2 + .growth,
.band h2 + .steps,
.band h2 + .joinflow,
.band h2 + .media,
.band h2 + .qa,
.band h2 + .ticks,
.band h2 + .ticks-lg{margin-top:clamp(26px,3vw,40px)}

/* A run of ledes under one heading: the first takes the heading gap above,
   the rest a paragraph gap between them. */
.band .lede + .lede{margin-top:clamp(10px,1.2vw,15px)}

/* The eyebrow belongs to the heading under it, so it sits closer to that
   than to whatever came before. */
.band .eyebrow + h1,
/* The eyebrow gap is one number for the whole site now; see site.css. This
   override made it 10-14px here and 27px on the landing page. */

/* .openarms had invented its own heading margin. One rule now owns this. */
.openarms h2{margin-bottom:0}

/* ── The Earnings screen, as a live panel ────────────────────────────────
   Replaces a stock photograph in the no-clawbacks band. It is the app's own
   wording and its own two states, so the picture cannot drift from what the
   product actually does. Styled to read as a product surface, not a card:
   a window bar, a totals strip, rows, and a footnote.
   ---------------------------------------------------------------------- */
.payui{background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(10,4,24,.6),0 2px 0 rgba(255,255,255,.14) inset}

.payui-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;
  background:#F7F5FB;border-bottom:1px solid var(--line)}
.payui-dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.payui-dot:first-child{background:#E9B4AC}
.payui-dot:nth-child(2){background:#EBD9A8}
.payui-dot:nth-child(3){background:#AFD4BC}
.payui-ttl{margin-left:8px;font-size:13px;font-weight:500;color:var(--muted);
  letter-spacing:.01em}

.payui-body{padding:clamp(18px,2vw,24px)}

/* The two totals. They move when the row below flips. */
.payui-tot{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-bottom:clamp(16px,1.8vw,22px)}
.payui-tot > div{background:var(--lilac-soft);border-radius:var(--r-sm);
  padding:14px 16px}
.payui-tot > div:last-child{background:var(--peach-soft)}
.payui-tot span{display:block;font-size:12.5px;font-weight:500;color:var(--muted);
  letter-spacing:.02em;text-transform:uppercase}
.payui-tot b{display:block;font-size:clamp(23px,2.3vw,28px);color:var(--ink);
  letter-spacing:-.02em;margin:5px 0 3px;
  transition:color .4s ease,transform .4s cubic-bezier(.2,.9,.25,1)}
.payui-tot em{font-style:normal;font-size:12px;color:var(--faint)}
/* The brief lift as a figure changes — enough to notice, not enough to bounce. */
.payui-tot b[data-moved]{color:var(--ok);transform:translateY(-2px)}
.payui-tot > div:last-child b[data-moved]{color:var(--faint)}

.payui-list{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line-2)}
.payui-list li{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:13px 2px;border-bottom:1px solid var(--line-2)}
.payui-shop{font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.payui-shop em{display:block;font-style:normal;font-size:12.5px;font-weight:400;
  color:var(--faint);margin-top:3px}
.payui-amt{display:flex;align-items:center;gap:10px;flex:none}
.payui-amt b{font-size:15.5px;color:var(--ink)}
/* The row that changes. The sweep reads as the row settling, once. */
.payui-list li[data-flip]{position:relative;overflow:hidden;
  transition:background .5s ease}
.payui-list li[data-flip][data-paid]{background:rgba(46,125,79,.055)}
.payui-list li[data-flip][data-paid]:before{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(46,125,79,.16),transparent 80%);
  animation:payui-sweep .9s ease-out}
@keyframes payui-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.payui-note{display:flex;align-items:flex-start;gap:9px;margin:16px 0 0;
  font-size:13.5px;line-height:1.5;color:var(--muted)}
.payui-note i{color:var(--ok);font-size:17px;flex:none;margin-top:1px}
.payui-note b{color:var(--ink);font-weight:500}

@media (max-width:420px){
  .payui-tot{grid-template-columns:1fr}
  .payui-list li{align-items:flex-start}
}
/* No sweep, no lift — the row still changes, so the point still lands. */
@media (prefers-reduced-motion:reduce){
  .payui-tot b,.payui-list li[data-flip]{transition:none}
  .payui-list li[data-flip][data-paid]:before{display:none}
}

/* The badge is an APP component — .badge lives in app/css/app.css, which the
   landing never loads, so on this page it was inheriting the dark band's
   white text on no background and rendering as bare words. Restated here at
   the app's own values, scoped to the panel so nothing else picks it up. */
.payui .badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  font-weight:600;padding:3px 10px;border-radius:var(--pill);
  background:#F1EEF8;color:var(--muted);white-space:nowrap;letter-spacing:-.005em;
  transition:background .4s ease,color .4s ease}
.payui .badge.ok{background:#E4F2E9;color:var(--ok)}
/* Likewise .nums — app.css only. Ringgit figures that change under a
   transition must not reflow, so the digits need to be the same width. */
.payui .nums{font-variant-numeric:tabular-nums}

/* ── Glass caption, inside the picture ───────────────────────────────────
   Sits on the image rather than under it. Real backdrop blur where the
   browser has it, and a solid-enough background underneath so the words are
   legible if it does not — a caption that depends on backdrop-filter is a
   caption that vanishes on the browsers that lack it.
   ---------------------------------------------------------------------- */
.glasscap{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);
  right:auto;max-width:min(380px,calc(100% - clamp(28px,4vw,56px)));
  display:flex;flex-direction:column;gap:5px;
  padding:clamp(13px,1.3vw,17px) clamp(15px,1.5vw,20px);
  border-radius:var(--r-sm);
  background:rgba(22,12,40,.62);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.6),
             0 1px 0 rgba(255,255,255,.22) inset;
  color:#fff;z-index:2}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
  .glasscap{background:rgba(22,12,40,.38);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%)}
}
.glasscap b{font-family:var(--font);font-weight:500;font-size:clamp(15px,1.5vw,17.5px);
  letter-spacing:-.015em;line-height:1.25}
.glasscap span{font-size:clamp(12.5px,1.1vw,13.5px);line-height:1.45;
  color:rgba(255,255,255,.84)}
/* The tag sits top-left, the caption bottom-left — they never collide. */
@media (max-width:560px){
  .glasscap{left:10px;right:10px;bottom:10px;max-width:none}
}
@media (prefers-reduced-transparency:reduce){
  .glasscap{background:rgba(22,12,40,.88);backdrop-filter:none;
    -webkit-backdrop-filter:none}
}
/* <figure> carries a default 1em/40px margin that would inset the picture. */
figure.media{margin:0}

/* ════════════════════════════════════════════════════════════════════════
   "WHAT YOU GET ON DAY ONE" — a bento, not four of a kind
   ------------------------------------------------------------------------
   The four things are different in kind, so they are shown differently: a
   photograph for the course, an icon that moves for the copy, and two
   miniatures of real app screens for the two screens. Six columns, so a
   4+2 row can sit over a 3+3 row and nothing is a third of anything.

   Every animation hangs off .rv.in, the class the site's own reveal already
   adds when an element scrolls into view. No observers, no new script, and
   nothing moves until it is actually on screen.
   ══════════════════════════════════════════════════════════════════════ */
.daygrid{display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.4vw,20px)}
.day-wide{grid-column:span 4}
.day-narrow{grid-column:span 2}
.day-half{grid-column:span 3}

.daycard{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(24px,2.4vw,32px);
  display:flex;flex-direction:column;gap:12px;overflow:hidden}
.daycard h4{font-size:17px;margin:0;letter-spacing:-.015em}
.daycard p{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0}
.daycard .ic{width:44px;height:44px;border-radius:13px;background:var(--lilac-soft);
  color:var(--purple);display:flex;align-items:center;justify-content:center;
  font-size:21px;flex-shrink:0;margin-bottom:4px}

/* ── 1. The course: photograph beside the words ──────────────────────── */
.day-wide{flex-direction:row;align-items:stretch;gap:0;padding:0}
.day-shot{position:relative;flex:0 0 40%;min-height:260px;overflow:hidden}
/* Absolute, because an image in flow sizes its own box from its intrinsic
   ratio and would drive the height of the whole card. */
.day-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.day-txt{flex:1 1 auto;padding:clamp(24px,2.4vw,32px);
  display:flex;flex-direction:column;gap:12px;justify-content:center}
.day-chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 0;padding:0}
.day-chips li{font-size:12.5px;font-weight:500;color:var(--purple);
  background:var(--lilac-soft);border-radius:var(--pill);padding:5px 11px;
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.25,1)}
.rv.in .day-chips li{opacity:1;transform:none}
.rv.in .day-chips li:nth-child(1){transition-delay:.20s}
.rv.in .day-chips li:nth-child(2){transition-delay:.30s}
.rv.in .day-chips li:nth-child(3){transition-delay:.40s}
.rv.in .day-chips li:nth-child(4){transition-delay:.50s}

/* ── 2. Copy you can send: the message writes itself ─────────────────── */
.day-anim{position:relative;display:flex;align-items:center;gap:14px;
  margin-bottom:4px}
.ic-lg{width:54px!important;height:54px!important;border-radius:16px!important;
  font-size:26px!important;margin-bottom:0!important}
/* The icon gives one slow, single tilt as it arrives — not a loop. */
.rv.in .day-anim .ic-lg{animation:day-nudge .9s cubic-bezier(.2,.9,.25,1) .15s both}
@keyframes day-nudge{
  0%{transform:rotate(-9deg) scale(.86)}
  60%{transform:rotate(3deg) scale(1.03)}
  100%{transform:none}
}
.bubbles{display:flex;flex-direction:column;gap:5px;flex:1}
.bub{display:block;height:8px;border-radius:var(--pill);background:var(--line);
  opacity:0;transform:translateX(-8px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.9,.25,1)}
.bub:nth-child(2){background:var(--lilac-soft)}
.bub-sm{width:52%}
.rv.in .bub{opacity:1;transform:none}
.rv.in .bub:nth-child(1){transition-delay:.35s}
.rv.in .bub:nth-child(2){transition-delay:.50s}
.rv.in .bub:nth-child(3){transition-delay:.65s}

/* ── 3 & 4. Two miniatures of real screens ───────────────────────────── */
.day-ui{background:#FAF8FD;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:14px;margin-bottom:6px}

.daybars{display:flex;align-items:flex-end;gap:10px;height:128px}
.daybar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:7px;height:100%}
/* Capped, or a bar in a wide card ends up wider than it is tall and
   reads as a block rather than a bar. */
.daybar span{display:block;width:min(100%,44px);border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--purple),#8A5BE0);
  height:0;transition:height .85s cubic-bezier(.22,.85,.3,1)}
.rv.in .daybar span{height:var(--h)}
.rv.in .daybar:nth-child(1) span{transition-delay:.15s}
.rv.in .daybar:nth-child(2) span{transition-delay:.26s}
.rv.in .daybar:nth-child(3) span{transition-delay:.37s}
.rv.in .daybar:nth-child(4) span{transition-delay:.48s}
/* The tallest bar is the point of the card, so it is the one with colour. */
.daybar:nth-child(2) span{background:linear-gradient(180deg,var(--orange),#E8893F)}
.daybar em{font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap}

.renews{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.renews li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--white);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 11px;opacity:0;transform:translateY(7px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.25,1)}
.renews b{font-size:13px;font-weight:500;color:var(--ink)}
.renews .d{font-size:11.5px;color:var(--faint);white-space:nowrap}
.renews .soon{border-color:#F2D7B8;background:var(--peach-soft)}
.renews .soon .d{color:var(--orange-deep);font-weight:600}
.rv.in .renews li{opacity:1;transform:none}
.rv.in .renews li:nth-child(1){transition-delay:.15s}
.rv.in .renews li:nth-child(2){transition-delay:.27s}
.rv.in .renews li:nth-child(3){transition-delay:.39s}

/* ── Narrower ─────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .day-wide{grid-column:span 6}
  .day-narrow{grid-column:span 6}
  .day-half{grid-column:span 3}
}
@media (max-width:700px){
  .day-half{grid-column:span 6}
  .day-wide{flex-direction:column}
  .day-shot{flex:none;min-height:0;aspect-ratio:16/10}
}
/* Everything still ARRIVES, it just does not travel. */
@media (prefers-reduced-motion:reduce){
  .day-chips li,.bub,.renews li{transition:opacity .3s ease;transform:none}
  .rv.in .day-anim .ic-lg{animation:none}
  .daybar span{transition:none;height:var(--h)}
}
/* The narrow card is shorter than the photo card beside it, so its content
   centres rather than stacking at the top over a pool of empty space. */
.day-narrow{justify-content:center}

/* ════════════════════════════════════════════════════════════════════════
   THE WALKTHROUGH — four steps, one sticky screen
   ------------------------------------------------------------------------
   Steps scroll on the left; the screen on the right is sticky and swaps to
   whichever step is being read. Below 900px the two columns become one and
   each screen sits under its own step: the same information, without a
   mechanism that needs a tall viewport to make sense.
   ══════════════════════════════════════════════════════════════════════ */
.walk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:start;margin-top:clamp(30px,3.6vw,48px)}

/* A tail below the last step, so the sticky screen stays pinned while step
   four is still being read instead of being pushed up by the end of the
   column. */
.walk-steps{display:flex;flex-direction:column;padding-bottom:12vh}
/* Each step is a screen tall, so exactly one is ever the obvious subject. */
.walk-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(18px,2vw,26px) 0;opacity:.34;
  transition:opacity .45s ease}
.walk-step.on{opacity:1}
.walk-n{width:40px;height:40px;border-radius:50%;background:var(--lilac-soft);
  color:var(--purple);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;margin-bottom:16px;
  transition:background .45s ease,color .45s ease,transform .45s cubic-bezier(.2,.9,.25,1)}
.walk-step.on .walk-n{background:var(--purple);color:#fff;transform:scale(1.08)}
.walk-step h3{font-size:clamp(23px,2.4vw,30px);letter-spacing:-.025em;margin:0 0 12px}
.walk-step p{font-size:clamp(15.5px,1.5vw,17px);color:var(--muted);line-height:1.6;
  margin:0;max-width:46ch}
.walk-step p b{color:var(--ink);font-weight:600}

/* ── The sticky screen ────────────────────────────────────────────────── */
.walk-stage{position:sticky;top:clamp(90px,12vh,130px);
  height:min(620px,76vh);display:flex;align-items:center}
.walk-phone{width:100%;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 36px 80px -40px rgba(25,14,46,.42)}
.walk-bar{display:flex;align-items:center;gap:7px;padding:13px 17px;
  background:#F7F5FB;border-bottom:1px solid var(--line)}
.walk-dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.walk-dot:first-child{background:#E9B4AC}
.walk-dot:nth-child(2){background:#EBD9A8}
.walk-dot:nth-child(3){background:#AFD4BC}
.walk-ttl{margin-left:8px;font-size:12.5px;font-weight:500;color:var(--muted)}

.walk-screens{position:relative;padding:clamp(18px,2vw,24px)}
.walk-screen{display:flex;flex-direction:column;gap:11px}
/* The outgoing screen is removed with [hidden], so the box is always the
   height of the one screen you can see and never the tallest of the four. */
.walk-screen[hidden]{display:none}
.walk-screen.in{animation:walk-in .42s cubic-bezier(.2,.9,.25,1) both}
@keyframes walk-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.walk-prog{display:block;height:5px;border-radius:var(--pill);background:var(--line-2);
  overflow:hidden;margin-bottom:3px}
.walk-prog i{display:block;height:100%;width:var(--w);border-radius:var(--pill);
  background:var(--purple)}
.walk-lead{font-size:12px;font-weight:600;color:var(--faint);letter-spacing:.04em;
  text-transform:uppercase;margin:0}

.wfield{display:flex;flex-direction:column;gap:5px;flex:1}
.wfield label{font-size:12.5px;font-weight:500;color:var(--muted)}
.winput{display:block;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font-size:14px;color:var(--ink);background:var(--white)}
.wrow{display:flex;gap:10px}
.wbtn{align-self:flex-start;background:var(--ink);color:#fff;border-radius:var(--pill);
  padding:10px 20px;font-size:14px;font-weight:500;margin-top:4px}
.wbtn-sm{padding:7px 15px;font-size:13px;margin:0;flex:none}

.wq{display:flex;gap:9px;font-size:15px;font-weight:500;color:var(--ink);
  line-height:1.45;margin:2px 0 4px}
.wq-n{width:22px;height:22px;border-radius:50%;background:var(--purple);color:#fff;
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;
  flex:none;margin-top:1px}
.wopt{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:11px 13px;font-size:13.5px;color:var(--text);
  line-height:1.45}
.wopt i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);
  flex:none;margin-top:2px}
.wopt.on{border-color:var(--purple);background:var(--lilac-soft)}
.wopt.on i{border-color:var(--purple);background:var(--purple);
  box-shadow:inset 0 0 0 3px #fff}
.wnote{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted);
  line-height:1.5;margin:2px 0 0}
.wnote i{color:var(--purple);font-size:15px;flex:none;margin-top:1px}

.wstate{text-align:center;padding:16px 10px 4px}
.wstate-ic{width:52px;height:52px;border-radius:50%;background:var(--lilac-soft);
  color:var(--purple);display:flex;align-items:center;justify-content:center;
  font-size:26px;margin:0 auto 12px}
.wstate-ok .wstate-ic{background:#E4F2E9;color:var(--ok)}
.wstate b{display:block;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.wstate p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:7px auto 0;
  max-width:36ch}
.wbadge{display:inline-flex;margin-top:11px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:var(--pill);background:#F1EEF8;color:var(--muted)}

.wtimeline{list-style:none;margin:14px 0 0;padding:0;display:flex;
  flex-direction:column;gap:9px}
.wtimeline li{display:flex;align-items:center;gap:9px;font-size:13.5px;
  color:var(--faint)}
.wtimeline li i{width:21px;height:21px;border-radius:50%;background:var(--line-2);
  color:var(--faint);display:flex;align-items:center;justify-content:center;
  font-size:13px;flex:none}
.wtimeline .done{color:var(--text)}
.wtimeline .done i{background:#E4F2E9;color:var(--ok)}
.wtimeline .now{color:var(--ink);font-weight:500}
.wtimeline .now i{background:var(--lilac-soft);color:var(--purple)}

.wlink{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:9px 10px 9px 13px;
  margin-top:4px}
.wlink > span:first-child{font-size:13px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wgot{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.wgot li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text)}
.wgot li i{color:var(--ok);font-size:16px;flex:none}

.walk-cta{margin-top:clamp(34px,4vw,52px)}

/* ── One column ───────────────────────────────────────────────────────── */
/* The screen moves ABOVE the steps and stays stuck to the top while they
   scroll underneath it. Keeping the swap is the point of the section; the
   alternative — four screens listed after four steps — pairs nothing with
   anything. The panel is capped so a step is always readable beneath it. */
@media (max-width:900px){
  .walk{grid-template-columns:1fr;gap:0}
  .walk-stage{order:-1;position:sticky;top:64px;height:auto;display:block;
    margin-bottom:18px;background:var(--bg,#FBFAF7);
    padding-bottom:12px;z-index:3}
  .walk-phone{max-height:46vh;display:flex;flex-direction:column}
  .walk-screens{overflow:hidden}
  .walk-step{min-height:0;padding:16px 0 22px}
  .walk-step h3{font-size:21px}
}
@media (max-width:620px){
  .walk-phone{max-height:42vh}
  .wrow{flex-direction:column;gap:11px}
}
@media (prefers-reduced-motion:reduce){
  .walk-screen.in{animation:none}
  .walk-step,.walk-n{transition:none}
}

/* .band carries overflow:hidden, which clips its full-bleed children — and
   which also makes it the scrollport for anything sticky inside it, so the
   sticky element sticks to a box that is itself scrolling away. The
   walkthrough's band opts out; it has no full-bleed child to clip. */
.band-sticky{overflow:visible}

/* ════════════════════════════════════════════════════════════════════════
   THE HORIZONTAL RAIL
   ------------------------------------------------------------------------
   Native overflow scrolling with snap, not a vertical-scroll-driven
   translate. A scroll-jacked carousel fights the trackpad, breaks the
   scrollbar and strands anybody on a phone who swipes the wrong way; this
   one is draggable, swipeable, keyboard-reachable and works with the page
   stopped. The motion is the user's, which is the kind that never misfires.
   ══════════════════════════════════════════════════════════════════════ */
.hrail{display:flex;gap:clamp(14px,1.6vw,20px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:clamp(22px,2.6vw,34px) 0 clamp(16px,2vw,22px);
  margin-top:clamp(20px,2.4vw,30px);
  /* The row runs to the edge of the screen rather than stopping at the
     measure, so it reads as something that continues. */
  margin-inline:calc(50% - 50vw);
  padding-inline:max(calc(50vw - 50%),20px);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.hrail::-webkit-scrollbar{height:8px}
.hrail::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--pill)}
.hrail:focus-visible{outline:2px solid var(--purple);outline-offset:4px}

.hcard{flex:0 0 clamp(248px,24vw,300px);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,2.1vw,26px);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .35s ease}
.hcard:hover{transform:translateY(-4px);
  box-shadow:0 22px 44px -26px rgba(25,14,46,.3)}
/* Ours is the one being compared against, so it is the one that is filled. */
.hcard.is-us{background:var(--ink);border-color:var(--ink)}
.hcard.is-us h3,.hcard.is-us .hcard-price b{color:#fff}
.hcard.is-us .hcard-price span,.hcard.is-us li{color:rgba(255,255,255,.82)}
.hcard.is-us .hcard-src{color:rgba(255,255,255,.6)}
.hcard.is-us li i{color:var(--peach)}
.hcard.is-us .hcard-tag{background:rgba(255,255,255,.16);color:#fff}

.hcard-tag{align-self:flex-start;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--purple);
  background:var(--lilac-soft);border-radius:var(--pill);padding:4px 10px}
.hcard h3{font-size:18px;letter-spacing:-.02em;margin:2px 0 0}
.hcard-price{display:flex;align-items:baseline;gap:5px;margin:2px 0 4px}
.hcard-price b{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.03em;color:var(--ink)}
.hcard-price span{font-size:13.5px;color:var(--muted)}
.hcard-list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:7px;flex:1}
.hcard-list li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;
  line-height:1.5;color:var(--text)}
.hcard-list li i{flex:none;font-size:15px;margin-top:2px;color:var(--ok)}
.hcard-list li .ti-x{color:var(--danger)}
.hcard-list li .ti-minus{color:var(--faint)}
.hcard-src{font-size:11.5px;line-height:1.5;color:var(--faint);
  margin:2px 0 0;padding-top:10px;border-top:1px solid var(--line-2)}
.hcard.is-us .hcard-src{border-top-color:rgba(255,255,255,.16)}

/* A hint that the row moves, for a mouse user with no touch to try it. */
.hrail-hint{display:flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--faint);margin:0}
.hrail-hint i{font-size:16px}

@media (prefers-reduced-motion:reduce){
  .hrail{scroll-behavior:auto}
  .hcard{transition:none}
  .hcard:hover{transform:none}
}