/* miles.plutus.it: Plutus Miles landing (11 Oct 2026). Brand: ocean #3103EB, sky #C6F8FF, white, midnight #01114A.
   Youth for display, Banana Grotesk for body. Aero is never used (it belongs on black only). Motion is transform and
   opacity only; prefers-reduced-motion shows the end state. The preserved calculator keeps its own styles (calc.css);
   since 13 Oct 2026 it sits in the hero, laid out by the "calculator, in the hero" block below. */

@font-face{font-family:'Youth';src:url(fonts/youth-300-470.woff2) format('woff2');font-weight:300 470;font-display:swap}
@font-face{font-family:'Youth';src:url(fonts/youth-480-900.woff2) format('woff2');font-weight:480 900;font-display:swap}
@font-face{font-family:'Banana Grotesk';src:url(fonts/banana-grotesk-400.woff2) format('woff2');font-weight:300 500;font-display:swap}
@font-face{font-family:'Banana Grotesk';src:url(fonts/banana-grotesk-700.woff2) format('woff2');font-weight:600 800;font-display:swap}

:root{
  --ocean:#3103EB;--sky:#C6F8FF;--white:#FFFFFF;--midnight:#01114A;--black:#070B19;--lemon:#E3FF74;
  --ink:#01114A;--muted:#525C72;--hair:rgba(1,17,74,.10);--sky-dim:rgba(198,248,255,.74);--white-dim:rgba(255,255,255,.84);
  --pad-x:clamp(20px,4.2vw,76px);
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --display:'Youth',system-ui,sans-serif;--body:'Banana Grotesk',system-ui,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;overflow-x:clip}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px}
.light :focus-visible,.how :focus-visible,.fleet :focus-visible,section:has(#calcWrap) :focus-visible{outline-color:var(--ocean)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--white);color:var(--ocean);padding:10px 16px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none}
.skip:focus{top:12px}

/* ---------------- shared type ---------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border-radius:999px;font:600 13px/1 var(--display);letter-spacing:.02em;white-space:nowrap}
.eyebrow--sky{color:var(--sky);box-shadow:inset 0 0 0 1.5px var(--sky)}
.eyebrow--ocean{color:var(--ocean);box-shadow:inset 0 0 0 1.5px rgba(49,3,235,.35)}
.h2{margin:0;font:500 clamp(34px,4.6vw,64px)/.98 var(--display);letter-spacing:-.022em;text-wrap:balance}
.h2 .tone{color:var(--ocean)}
.lede{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.45;text-wrap:pretty}

/* ---------------- buttons (pill with a nested arrow) ---------------- */
.btn{display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 24px;min-height:56px;border-radius:999px;font:500 17px/1 var(--display);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:transform .35s var(--ease-out),background-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;transition:transform .45s var(--ease-out)}
.btn-ico svg{width:16px;height:16px;display:block}
.btn:hover .btn-ico{transform:translate(2px,-1px) scale(1.05)}
.btn--white{background:var(--white);color:var(--ocean)}
.btn--white .btn-ico{background:var(--ocean);color:var(--white)}
.btn--white:hover{box-shadow:0 16px 40px -18px rgba(1,17,74,.7)}
.btn--ocean{background:var(--ocean);color:var(--white)}
.btn--ocean .btn-ico{background:var(--white);color:var(--ocean)}
.link{display:inline-flex;align-items:center;gap:8px;font:500 16px/1 var(--display);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;padding:12px 4px;white-space:nowrap}
.link--sky{color:var(--sky)}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--ocean);color:var(--white);overflow:hidden;isolation:isolate}
.hdr{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,2.4vw,34px) var(--pad-x) 0}
.lockup{--wm:clamp(22px,1.9vw,28px);display:inline-flex;align-items:baseline;gap:calc(var(--wm)*.42);color:var(--white);text-decoration:none;line-height:1}
.lockup img{display:block;height:var(--wm);width:auto;margin-bottom:calc(var(--wm)*-.0237)}
.lockup span{font:500 calc(var(--wm)*1.3937)/1 var(--display);letter-spacing:-.01em}
.hdr-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;color:var(--white);font:500 15px/1 var(--display);text-decoration:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.hdr-cta:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px var(--white)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;justify-items:center;gap:clamp(16px,2.6vh,32px);padding:clamp(10px,2vh,24px) var(--pad-x) clamp(28px,4vh,56px)}
.ring-slot{position:relative;width:clamp(min(100%,240px),calc(100svh - 560px),min(100%,640px));aspect-ratio:1;container-type:size;z-index:1}
.hero-copy{position:relative;z-index:2;width:100%;max-width:560px;--col:min(560px,calc(100vw - 2 * var(--pad-x)))}
.hero-copy .eyebrow{margin-bottom:clamp(16px,2.4vh,26px)}
.h1{margin:0;font:500 min(64px,calc(var(--col) / 8.3))/1 var(--display);letter-spacing:-.024em}
.h1 .a,.h1 .b{display:block}
.h1 .ln{display:block;white-space:nowrap}
.h1 .b{color:var(--sky)}
.h1 .b .ln:first-child{margin-top:.12em}
.hero-copy .lede{margin-top:clamp(16px,2.4vh,26px);color:var(--white-dim);max-width:30em;text-wrap:balance}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(22px,3.2vh,34px)}
@media (max-width:520px){.hero .cta-row .link{display:none}.hero-copy .lede{font-size:16px}}

@media (min-width:900px) and (min-aspect-ratio:11/10){
  .hero{min-height:100svh;display:flex;flex-direction:column}
  .hero-grid{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:center;justify-items:stretch;column-gap:clamp(40px,6vw,120px);max-width:1680px;width:100%;margin:0 auto;padding-top:clamp(12px,2vh,28px);padding-bottom:clamp(28px,5vh,64px)}
  .ring-slot{justify-self:center;width:min(100%,calc(100svh - 150px));max-width:920px}
  .hero-copy{--col:560px}
  /* beside the ring (13 Oct 2026): the headline above the calculator, one sentence a line (15.08 em is the longer, so
     36 px fits the 560 px column), the calculator, then the CTA under it. The rhythm and the larger type scale with the
     screen's height, so the CTA stays in the first screen from 1920 by 1080 down to a 740 px tall laptop window. */
  .hero-copy .eyebrow{margin-bottom:clamp(8px,1.5vh,18px)}
  .h1{font-size:clamp(28px,3.9vh,36px)}
  .h1 .a,.h1 .b{white-space:nowrap}
  .h1 .ln{display:inline}
  .h1 .b{margin-top:.08em}
  .h1 .b .ln:first-child{margin-top:0}
  .hero-copy .lede{margin-top:clamp(12px,1.6vh,18px);font-size:17px}
  .hero .hero-calc{margin-top:clamp(10px,1.8vh,24px);--hc-pt:clamp(12px,2vh,22px);--hc-pb:clamp(10px,1.5vh,18px);--hc-head:clamp(8px,1.5vh,18px);
    --hc-div:clamp(7px,1.25vh,16px);--hc-fine-mt:clamp(6px,1.2vh,14px);--hc-fine-pt:clamp(6px,1vh,12px);
    --hc-title:clamp(19px,2.7vh,24px);--hc-num:clamp(30px,4.45vh,40px);--hc-goal:clamp(16px,2.25vh,20px)}
  .hero .cta-row{margin-top:clamp(10px,1.6vh,22px)}
  .hero .cta-row .btn{min-height:0}
  .hero .cta-row .btn-ico{width:clamp(34px,4.45vh,40px);height:clamp(34px,4.45vh,40px)}
}
/* the lede only where the screen is tall enough for all of it (the brief: drop the lede first) */
@media (min-width:900px) and (min-aspect-ratio:11/10) and (max-height:999.98px){
  .hero-copy .lede{display:none}
}
/* under 740 px tall the eyebrow steps aside too (the calculator's small print keeps "Claiming needs Premium") */
@media (min-width:900px) and (min-aspect-ratio:11/10) and (max-height:739.98px){
  .hero-copy .eyebrow{display:none}
}
/* under 700 px tall (a 1366 by 768 laptop's browser window): the header and the card's dividers close up */
@media (min-width:900px) and (min-aspect-ratio:11/10) and (max-height:699.98px){
  .hdr{padding-top:16px}
  .hero-grid{padding-top:6px}
  .hero .hero-calc{--hc-div:5px;--hc-pt:10px;--hc-pb:8px}
  .hero-calc .pl-card > div:last-child{font-size:10px !important;line-height:1.3 !important}
}

/* the ring: 27 airline cards, one even fan (equal angles on a circle are equal arcs), overlapping 22% at mid card.
   The static layout below is the opening's end state (and what reduced motion and no script show).
   R = 3.352 card widths; the outer reach is 4.05 card widths, so a card is the slot's width over 8.1. */
.ring{position:absolute;inset:0;--cw:calc(100cqw / 8.1);--ch:calc(var(--cw) * 4 / 3);--R:calc(var(--cw) * 3.352)}
.ring-card{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);margin:0;border-radius:calc(var(--cw) * .16);overflow:hidden;background:var(--bg,var(--white));box-shadow:0 10px 22px -10px rgba(1,17,74,.6);z-index:var(--z);
  transform:translate(-50%,-50%) rotate(var(--phi)) translateY(calc(var(--R) * -1)) rotate(var(--flip,0deg)) scale(var(--lift,1));backface-visibility:hidden}
.ring-card.lo{--flip:180deg}
.ring-card img,.al-card img{position:absolute;display:block;height:auto;max-width:none;-webkit-user-drag:none;user-select:none}
/* a name card: the airline's IATA code and name as live text, for airlines whose art in the app is too small to show */
.nc{background:var(--midnight);container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* the gap is the name's own margin: a container's cqw in its own properties would measure the ring's slot, not the card */
.nc-code + .nc-name{margin-top:5cqw}
.ring-card.nc{background:var(--midnight)}
/* Where a card's content sits on the ring, all by transform, all scaled by --k (0 in the opening's list, 1 on the ring):
   - a neighbour covers one side of a card: its content leans 6% of the card's width to the open side;
   - the neighbours overlap least at a card's outer end: a logo moves 7% toward it, and a name card's name changes
     places with its code (on the ring's upper half; a card on the lower half is turned, so its outer end is its foot,
     where the name already is). The name box is two lines tall on every name card, so the move is one constant.
   - in the opening's list (--k 0) the card further from the middle is on top, so content leans away from it (--lx0);
   - the ANA tail fin fills its card: it never moves. */
.ring{--k:1}
.ring-card{container-type:inline-size}
.ring-card > *{translate:calc(var(--lx0,0cqw) * (1 - var(--k)) + var(--lx,0cqw) * var(--k)) calc(var(--ly,0cqw) * var(--k))}
.ring-card.ll{--lx0:6cqw}
.ring-card.lr{--lx0:-6cqw}
.ring-card.sr:not([data-mark-kind="cover"]){--lx:6cqw}
.ring-card.sl:not([data-mark-kind="cover"]){--lx:-6cqw}
.ring-card:not(.nc):not([data-mark-kind="cover"]){--ly:-7cqw}
.ring-card.lo:not(.nc):not([data-mark-kind="cover"]){--ly:7cqw}
/* the top card (12 Oct 2026, every card a logo) sits under both neighbours, which cover it most toward the ring's centre:
   on the ring its mark takes a smaller square box near the outer end (its inline placement); in the opening's list it
   shows the regular placement (scaled by --ts0 and moved by --tx0/--ty0 about the mark's centre) and settles with --k */
.ring-card.tp > img{transform-origin:var(--to);scale:calc(var(--ts0) + (1 - var(--ts0)) * var(--k));translate:calc(var(--tx0) * (1 - var(--k))) calc(var(--ty0) * (1 - var(--k)) + var(--ly,0cqw) * var(--k))}
.no-js .ring-card.tp > img{translate:none}
.ring-card.nc .nc-name{display:grid;align-content:center;min-height:2.24em}
.ring-card.nc:not(.lo) .nc-code{--ly:30.76cqw}
.ring-card.nc:not(.lo) .nc-name{--ly:-36cqw}
.no-js .ring-card > *{translate:none}
.no-js .ring-card.nc:not(.lo){flex-direction:column-reverse}
.ring-card.nc .nc-name{padding:0 14cqw}
.ring-card.nc.cb .nc-name{padding:0 21cqw}
.nc-code{font:500 31cqw/1 var(--display);letter-spacing:-.02em;color:var(--sky)}
.nc-name{font:500 11.5cqw/1.12 var(--display);letter-spacing:-.005em;color:var(--white);padding:0 9cqw;text-wrap:balance}
.ring-mark{position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);display:block;pointer-events:none}
.ring.ready .ring-card{transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ring.ready .ring-card:hover{--lift:1.14;z-index:200}
}
.js .ring:not(.ready) .ring-card{will-change:transform,opacity}

/* the opening: cards fly in as a list, curl into the ring, then the copy and the calculator rise (script sets the frames) */
.js .hero.opening :is(.hero-copy .eyebrow,.h1 .a,.h1 .b,.hero-copy .lede,.hero-calc,.hero-copy .cta-row){opacity:0;transform:translateY(18px)}
.js .hero.opening .ring-mark{opacity:0}

/* ---------------- how it works (white, sticky stage) ---------------- */
.how{position:relative;background:var(--white);padding:clamp(96px,14vh,168px) var(--pad-x) clamp(72px,10vh,128px)}
.how-head{max-width:1280px;margin:0 auto clamp(40px,6vh,72px);display:grid;gap:22px;justify-items:start}
.how-body{max-width:1280px;margin:0 auto;display:block}
.steps{list-style:none;margin:0;padding:0;counter-reset:none}
.step{display:flex;flex-direction:column;justify-content:flex-end;min-height:72svh;padding:0 0 clamp(28px,6vh,56px)}
.step-k{margin:0 0 14px;font:600 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ocean);display:flex;gap:12px;align-items:center}
.step-k i{font-style:normal;color:var(--muted);letter-spacing:.04em}
.step h3{margin:0;font:500 clamp(28px,3vw,44px)/1.02 var(--display);letter-spacing:-.02em;text-wrap:balance}
.step p.cap{margin:14px 0 0;max-width:27em;color:var(--muted);font-size:clamp(17px,1.25vw,19px);line-height:1.45;min-height:2.9em;text-wrap:pretty}
.step{opacity:.28;transition:opacity .6s var(--ease-out)}
.step.on{opacity:1}
.stage-wrap{position:sticky;top:0;z-index:2;height:calc(min(58svh,560px) + 12px);padding-top:12px;margin:0 calc(var(--pad-x) * -.25);background:var(--white);box-shadow:0 18px 22px -6px var(--white)}
.stage-box{position:relative;height:100%;border-radius:clamp(24px,3vw,40px);background:var(--ocean);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.stage{position:absolute;left:50%;top:50%;width:460px;height:640px;transform-origin:50% 50%}
/* phones: block flow, the stage sticks at the top and the steps scroll under it; wide: two columns, the stage sticks in
   the right column (a sticky box inside a grid only sticks within its own row, so the row spans the whole story) */
@media (min-width:900px){
  .how-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:clamp(48px,7vw,140px);align-items:start}
  .how-body > .stage-wrap{grid-column:2;grid-row:1;top:calc(50svh - min(340px,44svh));height:min(680px,88svh);padding-top:0;margin:0;background:none;box-shadow:none}
  .how-body > .steps{grid-column:1;grid-row:1}
  .step{justify-content:center;min-height:86svh;padding:0}
}
.stage-fallback{display:none}
.no-js .stage-wrap{display:none}

/* the stage's scenes (sizes in design px; the stage is scaled to fit its box) */
.scene{position:absolute;left:0;top:0;width:460px;height:640px}
.scene-ladder{display:grid;place-items:center}
.phone-host{position:absolute;left:23px;top:0}
.ui-content-scroll{will-change:transform}
.fly-label{font:800 9px/1 var(--display);letter-spacing:1.2px;text-transform:uppercase;color:var(--ocean);margin:6px 4px 8px}
.fly-note{display:flex;gap:8px;padding:12px 14px;border-radius:13px;background:#F5F6F9;border:1.5px dashed #E0E4ED;font:500 11px/16px var(--display);color:#525C72}
.fly-note img{width:16px;height:16px;flex:none;margin-top:1px}
.fly-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#fff;border:1.5px solid var(--midnight);box-shadow:2px 2px 0 var(--midnight)}
.fly-row .al-card{width:30px;flex:none;border-radius:6px;box-shadow:none}
.fly-row .nc-name{display:none}
.fly-row b{display:block;font:700 13px/1.15 var(--display);color:var(--midnight)}
.fly-row small{display:block;margin-top:3px;font:500 10px/1.2 var(--display);color:#525C72}

/* ---------------- the calculator, in the hero (13 Oct 2026) ----------------
   The owner: once the fan ring completes, the miles calculator sits on its right with the main CTA under it. The
   calculator is the live page's own markup and script, moved (not copied) into the hero copy column; it keeps its own
   component styles (calc.css). This block only lays it out: the earnings block becomes one white card with its own title
   inside, and where the card is wide its level and its two switches share the top row. The preserved markup carries
   inline styles, so each override names its property and uses !important; nothing here changes what the calculator
   says or does. */
.hero-calc{--hc-pt:20px;--hc-pb:16px;--hc-px:20px;--hc-head:16px;--hc-div:14px;--hc-fine-mt:12px;--hc-fine-pt:10px;
  margin-top:clamp(22px,3.2vh,34px);container-type:inline-size;text-align:left}
.hero-calc > div{background:var(--white);color:var(--ink);border-radius:24px;padding:var(--hc-pt) var(--hc-px) var(--hc-pb);box-shadow:0 30px 60px -34px rgba(1,17,74,.7)}
.hero-calc :focus-visible{outline-color:var(--ocean)}
/* its title, on the white card: the live page's sky and white words turn ocean and midnight */
.hero-calc [aria-label="PLU Stackers"]{margin:0 0 6px !important;gap:1px !important}
.hero-calc [aria-label="PLU Stackers"] svg{width:11px !important;height:12px !important}
.hero-calc [aria-label="PLU Stackers"] path{fill:var(--ocean)}
.hero-calc [aria-label="PLU Stackers"] b{font-size:15px !important;color:var(--ocean) !important}
.hero-calc h2{margin:0 0 var(--hc-head) !important;font-size:var(--hc-title,24px) !important;line-height:1.08 !important;color:var(--ink) !important}
/* the card inside the card goes flat: one surface */
.hero-calc .pl-card{background:none;border:0;box-shadow:none;border-radius:0;padding:0 !important}
/* tighter rhythm: the labels, the reward level, the dividers, the result, the flight goals and the small print */
.hero-calc label[for="levelRange"],.hero-calc [role="group"] > div:first-child{margin-bottom:6px !important}
.hero-calc div:has(> #levelBadge){gap:12px !important;margin-bottom:12px !important}
.hero-calc #levelBadge,.hero-calc #levelStar{width:44px !important;height:44px !important}
.hero-calc #levelZeroNote{margin-top:4px !important;font-size:12px !important;line-height:1.3 !important}
.hero-calc .pl-card > div:has(> [role="group"][aria-label="Daily claim streak"]){margin-top:16px !important;gap:12px !important}
.hero-calc .pl-card > div[style^="height:1px"]{margin:var(--hc-div) 0 !important}
.hero-calc div:has(> #monthlyDisplay){font-size:var(--hc-num,40px) !important}
.hero-calc div:has(> #perDayChip){margin-top:10px !important}
.hero-calc #goalHead,.hero-calc #goalHeadZero{font-size:16px !important}
.hero-calc div:has(> div > #etaOneway){margin-top:10px !important;gap:10px !important}
.hero-calc div:has(> #etaOneway),.hero-calc div:has(> #etaBusiness){padding:10px 14px 11px !important}
.hero-calc div:has(> #etaOneway) > div:first-child,.hero-calc div:has(> #etaBusiness) > div:first-child{font-size:var(--hc-goal,20px) !important}
.hero-calc #etaOneway,.hero-calc #etaBusiness{margin-top:4px !important}
.hero-calc .pl-card > div:last-child{margin-top:var(--hc-fine-mt) !important;padding-top:var(--hc-fine-pt) !important;font-size:10.5px !important;line-height:1.42 !important;text-wrap:pretty}
/* the streak toggle's label is longer than the live page's: where the card is narrow its row stacks, so the label keeps
   the card's full width (it would wrap to five lines in half a row) */
@container (max-width:479.98px){
  .hero-calc .pl-card > div:has(> [role="group"][aria-label="Daily claim streak"]){grid-template-columns:1fr !important}
  /* the two flight goals stack too: side by side each would have 122 px for its words, and leave one word alone */
  .hero-calc div:has(> div > #etaOneway){grid-template-columns:1fr !important}
}
/* no word alone on a last line, whatever the calculator writes (level 0, euros, the streak) */
.hero-calc :is(#levelZeroNote,#goalHead,#goalHeadZero,#etaOneway,#etaBusiness,label,[role="group"] > div:first-child){text-wrap:pretty}
/* a wide card: the title and its label share the top line; the reward level on the left, the streak and the goal stacked
   on the right; then the result, the flight goals and the small print across. Every control keeps the markup's order,
   so the tab order is the reading order (the label sits right of the title only on screen; it is not focusable). */
@container (min-width:480px){
  .hero-calc > div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px}
  .hero-calc h2{grid-column:1;grid-row:1;margin:0 !important}
  .hero-calc [aria-label="PLU Stackers"]{grid-column:2;grid-row:1;margin:0 !important}
  .hero-calc .pl-card{grid-column:1 / -1;grid-row:2;margin-top:var(--hc-head);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px}
  .hero-calc .pl-card > *{grid-column:1 / -1}
  .hero-calc .pl-card > :first-child{grid-column:1;align-self:start}
  .hero-calc .pl-card > div:has(> [role="group"][aria-label="Daily claim streak"]){grid-column:2;margin-top:0 !important;grid-template-columns:1fr !important;gap:10px !important}
  .hero-calc [role="group"][aria-label="Daily claim streak"] > div:last-child{padding:8px 12px !important}
  /* one height in every state (13 Oct 2026, the coordinator): the streak and goal column sets this row's height, and the
     reward level column keeps inside it (it sets no height of its own). Level 0's note uses the room that column already
     leaves under the slider (27.96 px), so choosing level 0 moves neither the ring nor the CTA. */
  .hero-calc .pl-card > :first-child{height:0}
  .hero-calc #levelZeroNote{margin-top:1px !important;font-size:11.5px !important;line-height:1.15 !important}
}

/* ---------------- partner airlines ---------------- */
.fleet{background:var(--white);padding:clamp(96px,14vh,168px) var(--pad-x)}
.fleet-head{max-width:1280px;margin:0 auto clamp(40px,6vh,64px);display:grid;gap:22px;justify-items:start}
.fleet-head .lede{color:var(--muted);max-width:34em}
.fleet-grid{--cols:3;--gx:12px;list-style:none;margin:0 auto;padding:0;max-width:1280px;display:flex;flex-wrap:wrap;justify-content:center;gap:24px var(--gx)}
/* one card wall at every width: the tile, then the name in a two line box (every name keeps the same footprint), then the region */
.al{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols));min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.al-card{position:relative;width:64%;aspect-ratio:3/4;border-radius:16%/12%;overflow:hidden;background:var(--bg,var(--white));box-shadow:0 10px 20px -12px rgba(1,17,74,.5)}
.al-card.nc{background:var(--midnight)}
.al .nc-name{display:none}
.al-name{margin-top:10px;font:500 13.5px/1.15 var(--display);letter-spacing:-.005em;color:var(--ink);min-height:2.3em;align-self:stretch;text-align:center;text-wrap:balance}
.al-region{font-size:12px;line-height:1.2;color:var(--muted);align-self:stretch;text-align:center}
@media (min-width:520px){.fleet-grid{--cols:4}}
@media (min-width:768px){.fleet-grid{--cols:6;--gx:14px}}
@media (min-width:1100px){
  .fleet-grid{--cols:9;--gx:clamp(10px,1vw,16px);row-gap:clamp(14px,1.4vw,22px)}
  .al-card{width:100%;box-shadow:0 12px 24px -14px rgba(1,17,74,.5)}
  .al-name{margin-top:12px;font-size:14px}
}

/* ---------------- end and footer ---------------- */
.end{background:var(--ocean);color:var(--white);padding:clamp(104px,15vh,176px) var(--pad-x) clamp(40px,6vh,64px)}
.end-inner{max-width:1280px;margin:0 auto}
.end .h2{font-size:clamp(34px,calc((100vw - 2 * var(--pad-x)) / 15.9),84px)}
.end .h2 .a,.end .h2 .b{display:block;text-wrap:balance}
.end .h2 .b{color:var(--sky)}
.end .cta-row{margin-top:clamp(28px,4vh,44px)}
.stores{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font:500 15px/1 var(--display)}
.stores a{color:var(--sky);text-underline-offset:5px}
.site-foot{background:var(--ocean);color:var(--white);padding:clamp(56px,8vh,96px) var(--pad-x) clamp(36px,5vh,56px)}
.foot{max-width:1280px;margin:0 auto;padding-top:28px;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:18px}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font:500 15px/1 var(--display)}
.foot nav a{color:var(--white);text-decoration:none;opacity:.9}
.foot nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.fine{margin:0;max-width:72em;font-size:13px;line-height:1.55;color:var(--sky-dim);text-wrap:pretty}

/* ---------------- reveal on scroll ---------------- */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .js .hero.opening :is(.hero-copy .eyebrow,.h1 .a,.h1 .b,.hero-copy .lede,.hero-calc,.hero-copy .cta-row){opacity:1;transform:none}
  .js .hero.opening .ring-mark{opacity:1}
  .ring.ready .ring-card,.btn,.btn-ico,.step{transition:none}
  .step{opacity:1}
}

/* QA probe (?probe=magenta|green): the hero panel in a flat probe colour, everything but the ring hidden */
.probe .hero{background:var(--probe)}
.probe .hdr,.probe .hero-copy,.probe .ring-mark{visibility:hidden}
.probe .ring-card{box-shadow:none}

/* ---------------- the recreated Plutus app surfaces (from docs/ux/plutus-miles-streak-20261009/lib/ui.css, 9 Oct 2026) ---------------- */

.ui-hero,.ui-streak,.ui-sheet,.ui-phone,.ui-ladder{box-sizing:border-box;font-family:'Youth',sans-serif;-webkit-font-smoothing:antialiased;font-kerning:normal}
.ui-hero *,.ui-streak *,.ui-sheet *,.ui-phone *,.ui-ladder *{box-sizing:border-box}
.ui-hero,.ui-streak{position:relative}
.ui-label{font-weight:800;text-transform:uppercase;white-space:nowrap;line-height:1}
.ui-chip{display:inline-flex;align-items:center;font-weight:800;white-space:nowrap;line-height:1.2;font-variant-numeric:tabular-nums}
.ui-balance{display:flex;align-items:flex-end;white-space:nowrap}
.ui-balance .num{font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ui-balance .unit{font-weight:600;color:rgba(255,255,255,.62);line-height:1}
.ui-month{display:inline-block;background:rgba(198,248,255,.16);color:#C6F8FF;font-weight:800;white-space:nowrap;line-height:1.2;font-variant-numeric:tabular-nums}
.ui-resets{font-weight:500;line-height:1.2;white-space:nowrap}
.ui-badge{font-weight:800;white-space:nowrap;line-height:1.2}
.ui-cta{font-weight:800;white-space:nowrap;line-height:1.2;text-align:center;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.ui-cta.sky{background:#C6F8FF;color:#01114A}
.ui-cta.ocean{background:#3103EB;color:#FFFFFF}
.ui-cta.lemon{background:#E3FF74;color:#01114A}
.ui-panel{background:rgba(1,17,74,.06)}
.ui-dot{background:rgba(1,17,74,.15);flex:none}
.ui-dot.on{background:#3103EB}
.ui-togo{font-weight:700;white-space:nowrap;line-height:1}
.ui-stats{display:grid;grid-template-columns:1fr 1fr 1fr}
.ui-stat{background:rgba(1,17,74,.06);text-align:center}
.ui-stat .v{font-weight:800;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
.ui-stat .v img{display:block;object-fit:contain}
.ui-stat .l{font-weight:700;text-transform:uppercase;color:#525C72;white-space:nowrap;line-height:1}
.ui-star{display:block}

.ui-sheet{position:relative}
.ui-sheet-top{position:relative}
.ui-plane{position:absolute;display:block;object-fit:contain}
.ui-sheet .c,.ui-sheet .ui-label{text-align:center}
.ui-pop-title{font-weight:700;text-align:center;line-height:1.1;white-space:nowrap}
.ui-pop-pill{display:inline-block;background:#E3FF74;color:#01114A;font-weight:800;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-pop-body{font-weight:500;color:#525C72;text-align:center;line-height:1.3;white-space:nowrap}

.ui-lvl{display:inline-flex;align-items:center;background:#FFFFFF;color:#01114A;font-weight:700;white-space:nowrap;line-height:1.2}
.ui-lvl img{display:block;object-fit:contain}
.ui-note{font-weight:600;line-height:1.25}

.ui-phone{position:relative}
.ui-screen{position:relative;overflow:hidden}
.ui-island{position:absolute;background:#070B19}
.ui-time{position:absolute;font-weight:600;color:#01114A;line-height:1}
.ui-batt{position:absolute;border-style:solid;border-color:#01114A}
.ui-batt-in{position:absolute;background:#01114A}
.ui-batt-nub{position:absolute;background:#01114A}
.ui-back{position:absolute}
.ui-title{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;font-weight:500;color:#01114A;white-space:nowrap}
.ui-content{position:absolute;display:flex;flex-direction:column}
.ui-dim{position:absolute;inset:0;background:rgba(1,17,74,.55);opacity:0}
.ui-sheet-host{position:absolute;left:0;bottom:0;width:100%}
.ui-home{position:absolute;background:#01114A}

.ui-ladder{position:relative;background:#FFFFFF;color:#01114A}
.ui-ladder-title{font-weight:600;white-space:nowrap;line-height:1;color:#01114A}
.ui-ladder.h .ui-ladder-title{position:absolute}
.ui-ladder.v .ui-lrow{display:flex;align-items:center}
.ui-lbadge{display:block;object-fit:contain;flex:none}
.ui-lname{font-weight:600;white-space:nowrap;line-height:1;flex:none}
.ui-lbar{flex:1;background:rgba(1,17,74,.06);overflow:hidden}
.ui-lfill{height:100%;background:#3103EB}
.ui-lval{white-space:nowrap;font-weight:700;color:#3103EB;line-height:1;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.ui-lval .u{font-weight:600;color:#525C72}
.ui-ladder.h .ui-lcell{position:absolute}
.ui-ladder.h .ui-lbadge{position:absolute}
.ui-ladder.h .ui-lname,.ui-ladder.h .ui-lval{position:absolute;left:0;right:0;text-align:center}