';inherits:true;initial-value:rgba(20,35,59,.10)}
.dir-lounge.col-sn,.dir-lounge.col-dn{transition:--ink .9s ease,--muted .9s ease,--card 1.4s ease,--card-ink 1.4s ease,--card-muted 1.4s ease,--line 1.4s ease,--card-rule 1.4s ease}
/* ---------- 14. review fixes, 30 Sep (apply to every option) ---------- */
/* a list card on a phone screen never shows empty: it fades in with its first row */
.hs .mini{opacity:0}
.hs.go .mini{animation:hsin .35s 2.45s forwards}
.s3.go .mini{animation-delay:1.2s}
.s7.go .mini{animation-delay:.35s}
/* in the showcase the costs screen tells its story sooner */
.tiltp .s4.go .sub,.tiltp .s4.go .mini{animation-delay:1.5s}
.tiltp .s4.go .mr:nth-child(1){animation-delay:1.62s}
.tiltp .s4.go .mr:nth-child(2){animation-delay:1.76s}
.tiltp .s4.go .badge{animation-delay:1.9s}
/* reduced motion: every part of a phone screen shows at once instead of staying hidden */
@media (prefers-reduced-motion:reduce){
.hs .mr,.hs .sub,.hs .mini,.s1 .arem,.s1 .dot,.s1 .fl,.s2 .badge,.s4 .badge,.s2 .wasrow,.s3 .badge,.s3 .darea,.s3 .dlast,.s3 .dmed,.s3 .drem,.s3 .dyou,.s4 .yb em,.s5 .opp,.s5 .oppnote,.s5 .oppnum .nw span,.s6 .gate,.s6 .lbr,.s7 .pr,.s7 .srcs,.s8 .s8run,.s8 .s8gapt,.s8 .s8now,.s9 .s9t,.s9 .s9btn{opacity:1 !important;transform:none !important}
.s1 .pl,.s3 .dfly{opacity:1 !important;offset-distance:100% !important}
.s8 .s8b{stroke-dashoffset:0 !important}.s8 .s8fc{opacity:.8 !important}.s8 .s8gap{opacity:.16 !important}
.sc-card .pn-steps .stp.on i::after{animation:none;transform:scaleX(1)}
.s4 .yb i{transform:none !important}
}
/* small flip tiles (the waitlist count): a fine hinge line, no pins, so the number never reads as struck through */
.dir-lounge .fl.small .hinge{height:1px;margin-top:-.5px;background:rgba(0,0,0,.28)}
.dir-lounge .fl.small .hinge::before,.dir-lounge .fl.small .hinge::after{display:none}
.dir-lounge .flc.small{opacity:1;color:var(--muted)}
/* the story line's marker: the accent's own tint on every sky, never a white box */
.dir-lounge.col-sky mark.hl{background:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--ink)}
.dir-lounge.col-sky.theme-dark mark.hl{background:color-mix(in srgb,var(--accent) 30%,transparent)}
/* Frank on the bike sits at the photo's right edge: keep him in frame */
.crew .rot[data-rot="frank"] img:nth-of-type(1){object-position:84% 18%}
/* article pages on a phone: the byline wraps as whole phrases, and the working table fits the card */
#v-lounge-qa .muted[style*="display:flex"],#v-lounge-analysis .muted[style*="display:flex"]{flex-wrap:wrap;row-gap:4px}
#v-lounge-qa .muted[style*="display:flex"] > span,#v-lounge-analysis .muted[style*="display:flex"] > span{white-space:nowrap}
@media (max-width:640px){
#v-lounge-qa .card table{font-size:12.5px;table-layout:fixed;width:100%}
#v-lounge-qa .card table th,#v-lounge-qa .card table td{padding-left:4px;padding-right:4px;overflow-wrap:anywhere}
#v-lounge-qa .card table th:first-child,#v-lounge-qa .card table td:first-child{width:36%}
#v-lounge-qa .card table .num{font-size:12px;letter-spacing:0}
}
/* the Flight plan on a phone: each row becomes a card line (status and date, then the feature and what it does), nothing cut off */
@media (max-width:640px){
#v-lounge-plan table,#v-lounge-plan tbody{display:block;width:auto}
#v-lounge-plan thead{display:none}
#v-lounge-plan tr{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;padding:18px 0;border-bottom:1px solid var(--line)}
#v-lounge-plan td{display:block;padding:0 !important;border:0 !important;white-space:normal !important}
#v-lounge-plan td:nth-child(3),#v-lounge-plan td:nth-child(4){grid-column:1 / -1}
#v-lounge-plan td:nth-child(3){margin-top:4px}
}
/* ---------- 15. review fixes, 1 Oct (every option) ---------- */
/* the carousel phone's shadow was clipped by its scroller into a grey box: draw it from the scroller instead, as a soft drop shadow */
.dir-lounge .wrap .phones[data-car] .dev{box-shadow:none}
.dir-lounge .wrap .phones[data-car]{filter:drop-shadow(0 26px 34px rgba(30,41,59,.16))}
.dir-lounge.theme-dark .wrap .phones[data-car]{filter:drop-shadow(0 26px 40px rgba(0,0,0,.42))}
/* the wall's heading keeps its lift over the other headings on a phone, not a desktop size */
@media (max-width:640px){.dir-lounge.rev-wall #quotes h2{font-size:calc(var(--h2,56px) * .68 * 1.1)}}
/* the dark blocks become cards on a sky: the short answer and the early-access cards on the article pages */
.dir-lounge.col-sky div.dark .eyebrow{color:var(--accent-text)}
/* a waitlist form that has to wrap stacks as a designed pair: the field takes the line, the button fills the next.
On one line the field keeps the spare room (grow 1000 : 1), alone on its own line the button fills it */
.dir-lounge form.wl .field{flex:1000 1 220px}
.dir-lounge form.wl .btn{flex:1 0 auto}
/* Flat: soft text passes 4.5:1 everywhere (it measured 4.49 on the page, 3.7 on the light band, 2.4 on the dark band's cards) */
.dir-lounge.theme-light:not(.col-sky){--muted:#52617A}
.dir-lounge.theme-light:not(.col-sky) .view > .sec:nth-of-type(even) > section:not(.dark){--muted:#46556A}
.dir-lounge.theme-dark:not(.col-sky) .view > .sec:nth-of-type(even) > section:not(.dark){--muted:#DCE2E9}
/* Flat dark: the early-access block is light, so its eyebrow takes the accent's text shade (it was light blue on near white, 1.2:1) */
.dir-lounge.theme-dark:not(.col-sky) .dark .eyebrow{color:var(--accent-on-light,#2F6FA8)}
/* the story line reads in the page's ink on its marker (soft text measured 3.3 to 4.4:1 there) */
.dir-lounge mark.hl{color:var(--ink)}
/* ---------- 16. 1 Oct, second pass ---------- */
/* buttons follow the raw accent rule by the surface they sit on (Rob: "button colours look wrong"). A light surface takes the
accent's text shade with white ink, a dark surface the accent itself with near-black ink. The pale sky fill on a pale sky
read as a disabled button */
.dir-lounge{--btn-bg:var(--btn-light-bg,#2F6FA8);--btn-ink:var(--btn-light-ink,#FFFFFF)}
.dir-lounge.theme-dark,.dir-lounge.col-dd,.dir-lounge.col-du,.dir-lounge.theme-light:not(.col-sky) .dark{--btn-bg:var(--btn-dark-bg,#BFDCF5);--btn-ink:var(--btn-dark-ink,#0A0A0B)}
.dir-lounge.theme-dark:not(.col-sky) .dark{--btn-bg:var(--btn-light-bg,#2F6FA8);--btn-ink:var(--btn-light-ink,#FFFFFF)}
/* the deep skies are dark pages with white cards: a button on a card takes the light pair */
.dir-lounge.col-dd.theme-light .card,.dir-lounge.col-du.theme-light .card,.dir-lounge.col-dd.theme-light div.dark,.dir-lounge.col-du.theme-light div.dark{--btn-bg:var(--btn-light-bg,#2F6FA8);--btn-ink:var(--btn-light-ink,#FFFFFF)}
.dir-lounge .btn:not(.btn-ghost),.dir-lounge .btn:not(.btn-ghost):hover{background:var(--btn-bg);color:var(--btn-ink)}
.dir-lounge .btn:not(.btn-ghost){transition:background-color .35s ease,color .35s ease,filter .15s ease,opacity .25s ease,transform .25s ease}
/* showcase panels sit in their card's free space and never on the phone (Rob: "all the pop outs are covering the phone").
new.js finds the spot; when the phone fills the picture, the phone steps down by --pdrop and the card grows with it */
.dir-lounge .sc-card .pmk{position:absolute;width:0;height:0;pointer-events:none;visibility:hidden}
.dir-lounge .sc-card .panel.pgone{display:none}
.dir-lounge .sc-card .tiltp{margin-top:var(--pdrop,0px)}
.dir-lounge .sc-card .sc-vis{min-height:calc(420px + var(--pdrop,0px))}
.dir-lounge .sc-card.sc-measure .tiltp{transform:translateX(-50%) rotateX(var(--rx,36deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,-26deg)) !important}
@media (max-width:640px){.dir-lounge .sc-card.sc-measure .tiltp{transform:translateX(-50%) scale(.82) rotateX(var(--rx,36deg)) rotateZ(var(--rz,-26deg)) !important}}
/* Copy, Benefit first: benefit-led headlines, cards and steps. Lines without a benefit version keep the loss version */
/* Phone hero, Simple: one column, centred; headline, line, one pill for the email and its button, then the count.
The header's button waits until the hero form has scrolled away, so the first screen has one call to action */
@media (max-width:640px){
.dir-lounge.ph-simple #v-lounge-home header nav.nav .btn{transition:opacity .25s ease,transform .25s ease,background-color .35s ease}
.dir-lounge.ph-simple #v-lounge-home section#top{padding-top:44px !important}
.dir-lounge.ph-simple #v-lounge-home .hero-copy{gap:20px;align-items:center;text-align:center}
.dir-lounge.ph-simple #v-lounge-home .hero-copy > .eyebrow{display:none}
.dir-lounge.ph-simple #v-lounge-home .hero-copy h1{font-size:44px;line-height:1;letter-spacing:-.02em;text-align:center}
.dir-lounge.ph-simple #v-lounge-home .hero-copy .lede{margin:0 auto;font-size:18px;text-wrap:balance}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap{width:100%;gap:16px;margin-top:8px}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap > form{order:2;max-width:none !important}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap > .trust{order:1;justify-content:center}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap > .store{order:3;justify-content:center}
.dir-lounge.ph-simple #top form.wl > div{flex-wrap:nowrap !important;gap:6px !important;padding:5px;border-radius:999px;background:var(--field);box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(20,35,59,.12)}
.dir-lounge.ph-simple.theme-dark #top form.wl > div,.dir-lounge.ph-simple.col-dd #top form.wl > div,.dir-lounge.ph-simple.col-du #top form.wl > div{box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.32)}
.dir-lounge.ph-simple #top form.wl .field{flex:1 1 auto !important;min-width:0;height:48px;border:0 !important;background:transparent !important;padding:0 6px 0 16px}
.dir-lounge.ph-simple #top form.wl .btn{flex:none !important;width:auto !important;height:48px;padding:0 18px}
.dir-lounge.ph-simple #top form.wl > p{display:none}
.dir-lounge.ph-simple #v-lounge-home .hero-grid{row-gap:22px}
}
/* reviews: each card carries its own small Sample tag until members' own words replace it */
.dir-lounge .qcard figcaption::after{content:"Sample";align-self:flex-start;margin-top:8px;font:700 9px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 7px;opacity:.8}
/* Q&A: answered questions as a dated list; each opens in place. Questions not yet answered sit under Up next */
.dir-lounge .qa-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.dir-lounge .qa-item{border-bottom:1px solid var(--line)}
.dir-lounge .qa-item > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:8px;padding:24px 0}
.dir-lounge .qa-item > summary::-webkit-details-marker{display:none}
.dir-lounge .qa-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font:600 12px/1.2 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dir-lounge .qa-meta time{color:var(--accent-text)}
.dir-lounge .qa-q{grid-column:1;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.18;letter-spacing:-.01em;color:var(--ink)}
.dir-lounge .qa-a{grid-column:1;color:var(--muted);font-size:16px;line-height:1.5}
.dir-lounge .qa-x{grid-column:2;grid-row:1 / span 3;align-self:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent-text);font:500 24px/1 var(--body);transition:transform .25s ease,background-color .2s ease}
.dir-lounge .qa-item > summary:hover .qa-x{background:var(--tint)}
.dir-lounge .qa-item[open] .qa-x{transform:rotate(45deg)}
.dir-lounge .qa-item[open] .qa-a{display:none}
.dir-lounge .qa-body{display:flex;flex-direction:column;gap:28px;padding:4px 0 40px}
.dir-lounge .qa-soon{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.dir-lounge .qa-soon .qa-q{font-size:20px;color:var(--muted)}
.dir-lounge .qa-soon .soon-tag{flex:none;font:600 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.dir-lounge .qa-body h2{font-size:26px !important;line-height:1.2}
.dir-lounge .qa-group{margin-top:12px;font:600 12px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){.dir-lounge .qa-q{font-size:21px} .dir-lounge .qa-x{width:34px;height:34px;font-size:20px}}
/* briefings still being written show as such, not as links to another page */
.dir-lounge .card.soon{cursor:default;opacity:.78}
.dir-lounge .card.soon .soon-tag{font:600 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* ---------- 18. 1 Oct, third pass ---------- */
/* Hero, Simple at every width (Rob: "very cluttered and busy"): headline, line, one pill for the email and its button,
the count under it. No reel dots or callout (the reel holds its first screen), no "No spam" line, and the header's
button waits until the hero's own form has scrolled away, so the first screen has one call to action */
.dir-lounge.ph-simple #v-lounge-home .hdots,.dir-lounge.ph-simple #v-lounge-home .ctxcall,.dir-lounge.ph-simple #v-lounge-home .ctxcap,.dir-lounge.ph-simple #v-lounge-home .invite-wrap{display:none !important}
.dir-lounge.ph-simple #v-lounge-home header nav.nav .btn{transition:opacity .25s ease,transform .25s ease,background-color .35s ease}
.dir-lounge.ph-simple #v-lounge-home .hero-copy{gap:28px}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap{gap:16px}
/* the waitlist count sits above the email box, so the proof comes before the ask (Rob, 1 Oct) */
.dir-lounge.ph-simple #v-lounge-home .wl-wrap > form{order:2}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap > .trust{order:1;margin-top:0}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap > .store{order:3}
.dir-lounge.ph-simple #top form.wl > div{flex-wrap:nowrap !important;gap:6px !important;padding:5px;border-radius:999px;background:var(--field);box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(20,35,59,.12)}
.dir-lounge.ph-simple.theme-dark #top form.wl > div,.dir-lounge.ph-simple.col-dd #top form.wl > div,.dir-lounge.ph-simple.col-du #top form.wl > div{box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.32)}
/* on the deep skies the pill is a light field on a dark page: its button takes the light pair, as a button on a card does
(white on that white pill was lost with Ink; pale sky on it read 1.4:1) */
.dir-lounge.ph-simple.theme-light.col-dd #top form.wl .btn,.dir-lounge.ph-simple.theme-light.col-du #top form.wl .btn{--btn-bg:var(--btn-light-bg,#2F6FA8);--btn-ink:var(--btn-light-ink,#FFFFFF)}
.dir-lounge.ph-simple #top form.wl .field{flex:1 1 auto !important;min-width:0;height:50px;border:0 !important;background:transparent !important;padding:0 6px 0 20px}
.dir-lounge.ph-simple #top form.wl .btn{flex:none !important;width:auto !important;height:50px;padding:0 22px}
.dir-lounge.ph-simple #top form.wl > p{display:none}
/* a phone: the pill keeps room for the address beside the longer button words */
@media (max-width:640px){.dir-lounge.ph-simple #top form.wl .field{padding:0 2px 0 14px;font-size:16px}.dir-lounge.ph-simple #top form.wl .btn{padding:0 14px;font-size:14px}}
/* Launch: the boarding pass (Rob, 2 Oct: "can 'boarding pass' (december 2026) move down below / beside land your dream tier
for less"). It sits beside the line, or under it where the row has no room, and the line arrives with the headline (Rob,
2 Oct: "can 'land your dream tier for less' arrive at same time as main heading"). Hidden from screen readers: the eyebrow
stays for them */
.dir-lounge.lx-on #top .hero-copy > .eyebrow{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.dir-lounge.lx-on #top .hero-copy h1{position:relative;width:fit-content;max-width:100%}
/* the headline keeps its two lines, so its box ends where "overpaying" ends */
.dir-lounge.lx-on #top .hero-copy h1 .h1acc{display:block}
/* the hero's row is centred in its section: it keeps its full width when the headline hugs its words */
.dir-lounge.lx-on #top .wrap.hero-grid{width:100%}
.dir-lounge #top .lx{display:none}
.dir-lounge.lx-on #top .lx{display:flex;flex:none;margin:0;padding:0;pointer-events:none;letter-spacing:0}
.dir-lounge #top .lede-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:26px;row-gap:16px;min-width:0}
.dir-lounge #top .lede-row > .lede{flex:0 1 auto;min-width:0;margin:0 !important}
.dir-lounge #top .hero-copy > .lede-row{animation-delay:.75s}
.dir-lounge #top .hero-copy > .wl-wrap{animation-delay:1.35s}
.dir-lounge #top .lx .live{display:none}
.dir-lounge.launched #top .lx .pre{display:none}
.dir-lounge.launched #top .lx .live{display:inline}
.dir-lounge #top .lx-ticket{display:flex;--tk:52px;height:var(--tk);transform:rotate(-5deg);transform-origin:50% 50%;filter:drop-shadow(0 12px 20px rgba(10,12,30,.18)) drop-shadow(0 2px 3px rgba(10,12,30,.12))}
.dir-lounge #top .lx-ticket .lt-main{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--tk) * .07);padding:0 calc(var(--tk) * .3) 0 calc(var(--tk) * .28);background:#fff;color:#14233B;border-radius:calc(var(--tk) * .16) 0 0 calc(var(--tk) * .16);
-webkit-mask:radial-gradient(circle at 100% 0,transparent calc(var(--tk) * .11),#000 calc(var(--tk) * .11 + .5px)) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent calc(var(--tk) * .11),#000 calc(var(--tk) * .11 + .5px)) bottom/100% 51% no-repeat;
mask:radial-gradient(circle at 100% 0,transparent calc(var(--tk) * .11),#000 calc(var(--tk) * .11 + .5px)) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent calc(var(--tk) * .11),#000 calc(var(--tk) * .11 + .5px)) bottom/100% 51% no-repeat}
.dir-lounge #top .lx-ticket .lt-main i{font:700 calc(var(--tk) * .16)/1 var(--label);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#52617A}
.dir-lounge #top .lx-ticket .lt-main b{font:800 calc(var(--tk) * .42)/.9 "Barlow Condensed",var(--label);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.dir-lounge #top .lx-ticket .lt-stub{display:flex;align-items:center;justify-content:center;width:calc(var(--tk) * .78);background:var(--btn-bg,#2F6FA8);border-left:2px dashed rgba(255,255,255,.55);border-radius:0 calc(var(--tk) * .16) calc(var(--tk) * .16) 0;
-webkit-mask:radial-gradient(circle at 0 0,transparent calc(var(--tk) * .11),#000 calc(var(--tk) * .11 + .5px)) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent calc(var(--tk) * .11),#000 calc(var(--tk) * .11 + .5px)) bottom/100% 51% no-repeat;
mask:radial-gradient(circle at 0 0,transparent calc(var(--tk) * .11),#000 calc(var(--tk) * .11 + .5px)) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent calc(var(--tk) * .11),#000 calc(var(--tk) * .11 + .5px)) bottom/100% 51% no-repeat}
.dir-lounge #top .lx-ticket .lt-stub svg{width:calc(var(--tk) * .36);height:calc(var(--tk) * .36);fill:var(--btn-ink,#fff)}
@media (max-width:640px){.dir-lounge #top .lx-ticket{--tk:46px}}
/* Buttons follow the app (Rob, 1 Oct: "synced with the app"): its ink pill. Ink with white words on light surfaces, white
with ink words on dark ones (dark mode, the deep skies); light cards on a dark sky keep the ink pill, as in the app. The
boarding pass is a white card, so its stub stays ink. Hover leans each pill a little towards its own words */
.dir-lounge.cta-ink{--btn-light-bg:#14233B !important;--btn-light-ink:#FFFFFF !important;--btn-dark-bg:#FFFFFF !important;--btn-dark-ink:#10192B !important}
.dir-lounge.cta-ink .btn:not(.btn-ghost):hover{background:color-mix(in srgb,var(--btn-bg) 86%,var(--btn-ink));filter:none}
.dir-lounge.cta-ink #top .lx-ticket .lt-stub{background-color:#14233B}
.dir-lounge.cta-ink #top .lx-ticket .lt-stub svg{fill:#fff}
/* Features, Simple (Rob: "too much information ... more consistent"): one card style all the way down. Each showcase card
keeps its headline and one short line; the other three features sit in one strip in the same style; the light cards go */
.dir-lounge .sc-card .sc-lead .scs,.dir-lounge .sc-more{display:none}
.dir-lounge.feat-simple .sc-card .sc-lead .scb{display:none}
.dir-lounge.feat-simple .sc-card .sc-lead b{display:block;font:700 30px/1.12 var(--display);letter-spacing:-.015em;color:#F4F6FB;text-wrap:balance}
.dir-lounge.feat-simple .sc-card .sc-lead .scs{display:block;margin-top:12px;font:500 18px/1.45 var(--body);color:rgba(244,246,251,.74);text-wrap:pretty}
.dir-lounge.feat-simple #features .feat-grid{display:none !important}
.dir-lounge.feat-simple .sc-more{display:block;margin-top:28px;border-radius:34px;padding:32px 40px 36px;color:#F4F6FB;background:radial-gradient(70% 120% at 100% 0%,rgba(47,111,168,.4),transparent 70%),radial-gradient(60% 120% at 0% 100%,rgba(246,174,127,.18),transparent 70%),#0E1220;border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 80px rgba(10,12,30,.18)}
.dir-lounge .sc-more .scm-l{display:block;margin-bottom:22px;font:700 12px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,246,251,.62)}
.dir-lounge .sc-more .scm-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
.dir-lounge .sc-more .scm-i{display:flex;align-items:flex-start;gap:16px;min-width:0}
.dir-lounge .sc-more .scm-ic{flex:none;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dir-lounge .sc-more .scm-ic svg{width:22px;height:22px;fill:none;stroke:#BFDCF5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dir-lounge .sc-more .scm-h{font:700 19px/1.3 var(--display);letter-spacing:-.005em;color:#F4F6FB;padding-top:2px}
.dir-lounge .sc-more .scm-chip{display:inline-block;margin:0 0 0 8px;vertical-align:3px;font:700 10px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,246,251,.72);border:1px solid rgba(244,246,251,.26);border-radius:999px;padding:4px 8px;white-space:nowrap}
@media (max-width:1000px){.dir-lounge .sc-more .scm-row{grid-template-columns:1fr;gap:18px}}
@media (max-width:640px){
.dir-lounge.feat-simple .sc-card .sc-lead b{font-size:24px}
.dir-lounge.feat-simple .sc-card .sc-lead .scs{font-size:16px;margin-top:8px}
.dir-lounge.feat-simple .sc-more{border-radius:26px;padding:26px 24px 28px}
.dir-lounge .sc-more .scm-h{font-size:17px}
}
/* the first screen ends without the dotted path and plane under the hero (Rob, 1 Oct: simplify) */
.dir-lounge #v-lounge-home section#top::before,.dir-lounge #v-lounge-home section#top::after{display:none !important}
/* the way back from the inner pages: a breadcrumb above each page's title, at every width */
.dir-lounge .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0 0 6px;font:600 14px/1.2 var(--label);letter-spacing:.02em}
.dir-lounge .crumbs a{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .2s ease}
.dir-lounge .crumbs a:hover{text-decoration-color:currentColor}
.dir-lounge .crumbs .cb-ic{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent-text);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dir-lounge .crumbs .cb-sep{color:var(--muted)}
/* Scrollbar, Themed: its own bar, so it shows where the platform's overlay bar would hide (a Mac, at rest). Colours from new.js */
html.sb-themed::-webkit-scrollbar{width:14px;height:14px;background:var(--sb-track,#DCEBF8)}
html.sb-themed::-webkit-scrollbar-track{background:var(--sb-track,#DCEBF8)}
html.sb-themed::-webkit-scrollbar-thumb{min-height:56px;border-radius:999px;border:3px solid var(--sb-track,#DCEBF8);background:var(--sb-thumb,#2F6FA8)}
html.sb-themed::-webkit-scrollbar-thumb:hover,html.sb-themed::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-h,#24577F)}
html.sb-themed::-webkit-scrollbar-corner{background:var(--sb-track,#DCEBF8)}
@supports not selector(::-webkit-scrollbar){html.sb-themed{scrollbar-color:var(--sb-thumb,#2F6FA8) var(--sb-track,#DCEBF8)}}
/* ---------- 19. 1 Oct, fifth pass ---------- */
/* The first screen shows the logo alone (Rob, 1 Oct): the header's links come in once the reader scrolls down, its button
once the hero's own form has scrolled away, so the first screen keeps one call to action. A keyboard reaching the links
brings them in */
.dir-lounge #v-lounge-home header nav.nav > a:not(.btn){transition:opacity .3s ease,transform .3s ease}
.dir-lounge:not(.hd-down) #v-lounge-home header nav.nav > a:not(.btn){opacity:0;transform:translateY(-6px);pointer-events:none}
.dir-lounge:not(.hd-down) #v-lounge-home header nav.nav:focus-within > a:not(.btn){opacity:1;transform:none;pointer-events:auto}
.dir-lounge.ph-simple:not(.hf-past) #v-lounge-home header nav.nav .btn{opacity:0;transform:translateY(-6px);pointer-events:none}
.dir-lounge.ph-simple:not(.hf-past) #v-lounge-home header nav.nav .btn:focus-visible{opacity:1;transform:none;pointer-events:auto}
/* Type (Rob, 1 Oct: one row, three families, each designed as a whole). Body text, buttons and fine print stay in
Schibsted Grotesk in all three; the ticket keeps its printed Barlow Condensed.
Schibsted Grotesk, wayfinding: bold and tight, upright, capitals with wide air for labels, figures in columns.
Editorial New, magazine: a big light serif, the headline upright in one colour, kickers as italic serif, a serif
masthead, quotes set as pull quotes.
Kyoto, lounge: a high-contrast serif, upright and firm, capitals spaced wide for kickers, the wordmark, the header
links and the buttons, quotes in its italic.
Editorial New and Kyoto show free stand-ins until a web licence: Instrument Serif and Playfair Display */
.dir-lounge.ty-g,.dir-lounge.ty-e,.dir-lounge.ty-k{--body:"Schibsted Grotesk",sans-serif;--label:"Schibsted Grotesk",sans-serif}
.dir-lounge.ty-g{--display:"Schibsted Grotesk",sans-serif;--display-weight:700;--display-track:-.035em;--wordmark:"Schibsted Grotesk",sans-serif;--wordmark-weight:700;--wordmark-track:-.03em;--wordmark-case:none;--nav-track:.01em;--nav-case:none}
.dir-lounge.ty-g h1{line-height:.94}
.dir-lounge.ty-g .view .eyebrow{font-weight:700;letter-spacing:.16em;font-size:11.5px}
/* tabular figures only on the counter: in this face they also set the full stop and comma a figure wide (v197: the
questions read "31 October . What"; v199: the showcase cards read "$6 . 10" and "then .") */
.dir-lounge.ty-g .trust{font-variant-numeric:tabular-nums}
.dir-lounge.ty-e{--display:"Instrument Serif",Georgia,serif;--display-weight:400;--display-track:-.012em;--h1:98px;--h2:60px;--h3:31px;--wordmark:"Instrument Serif",Georgia,serif;--wordmark-weight:400;--wordmark-track:-.01em;--wordmark-case:none;--nav-track:0;--nav-case:none}
.dir-lounge.ty-e h1{line-height:.9}
.dir-lounge.ty-e .view .eyebrow{font:italic 400 21px/1.15 "Instrument Serif",Georgia,serif;letter-spacing:0;text-transform:none}
.dir-lounge.ty-e header .serif{font-size:31px !important;letter-spacing:-.01em}
.dir-lounge.ty-e .qa-q{font-size:30px;line-height:1.12}
.dir-lounge.ty-e .sc-card .sc-lead b{font-size:36px;line-height:1.02}
.dir-lounge.ty-e .sc-more .scm-h{font-size:23px;line-height:1.15}
.dir-lounge.ty-e .qw blockquote{font:400 22px/1.32 "Instrument Serif",Georgia,serif;letter-spacing:-.005em}
.dir-lounge.ty-e .qw.lg blockquote{font-size:25px}
.dir-lounge.ty-e .qw .qav{font-weight:400;font-size:22px}
.dir-lounge.ty-k{--display:"Playfair Display",Georgia,serif;--display-weight:600;--display-track:-.012em;--h1:78px;--h2:48px;--h3:25px;--wordmark:"Playfair Display",Georgia,serif;--wordmark-weight:600;--wordmark-track:.16em;--wordmark-case:uppercase;--nav-track:.16em;--nav-case:uppercase}
.dir-lounge.ty-k h1{line-height:1}
.dir-lounge.ty-k .view .eyebrow{font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:.3em;font-size:12px}
.dir-lounge.ty-k header .serif{font-size:18px !important}
.dir-lounge.ty-k .nav > a:not(.btn){font-size:11.5px}
.dir-lounge.ty-k .btn{text-transform:uppercase;letter-spacing:.12em;font-size:12.5px}
.dir-lounge.ty-k .qa-q{font-size:24px;line-height:1.2}
.dir-lounge.ty-k .qw blockquote{font:italic 400 18px/1.5 "Playfair Display",Georgia,serif}
.dir-lounge.ty-k .qw.lg blockquote{font-size:20px}
.dir-lounge.ty-k .qw .qav{font-weight:600}
.dir-lounge.sf-on h1,.dir-lounge.sf-on h2,.dir-lounge.sf-on h3,.dir-lounge.sf-on .qa-q,.dir-lounge.sf-on .sc-card .sc-lead b,.dir-lounge.sf-on .sc-more .scm-h{font-weight:var(--display-weight) !important}
@media (max-width:640px){
.dir-lounge.ty-e.ph-simple #v-lounge-home .hero-copy h1{font-size:54px;line-height:.92}
.dir-lounge.ty-k.ph-simple #v-lounge-home .hero-copy h1{font-size:41px;line-height:1.02}
.dir-lounge.ty-k .btn{letter-spacing:.04em;font-size:11.5px}
}
/* the headline in one colour, upright (Rob, 1 Oct: "keep all in one colour and no italics") */
.dir-lounge #v-lounge-home #top h1 .h1acc{color:inherit !important;font-style:normal !important}
/* Programs (Rob, 1 Oct; rebuilt 2 Oct: "remove toggle ... just keep it showing ... this bit looks weird/undesigned"):
always on, one line under the form, left-aligned. "Works with" and the program share one baseline; the names take turns in
one slot as wide as the longest, so no name is ever cut off; the live program in the ink, the coming ones in the muted
ink with a soft Coming soon tag. Reduced motion: all three, still */
.dir-lounge #v-lounge-home :is(.wl-wrap,.thru-plac) > .progs{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;column-gap:.6em;row-gap:2px;order:3;text-align:left;font:500 14px/1.45 var(--label);color:var(--muted)}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap > .store{order:4}
.dir-lounge .progs .pg-k{white-space:nowrap}
.dir-lounge .progs .pg-roll{display:inline-grid;position:relative;overflow-x:visible;overflow-y:clip;overflow-clip-margin:4px}
.dir-lounge .progs .pg{grid-area:1/1;display:inline-flex;align-items:baseline;gap:.55em;white-space:nowrap;opacity:0;translate:0 100%;transition:opacity .6s cubic-bezier(.22,.7,.2,1),translate .6s cubic-bezier(.22,.7,.2,1)}
.dir-lounge .progs .pg.on{opacity:1;translate:none}
.dir-lounge .progs .pg.out{opacity:0;translate:0 -100%}
.dir-lounge .progs .pg b{font-weight:600;color:var(--ink)}
.dir-lounge .progs .pg.soon b{color:var(--muted)}
.dir-lounge .progs .pg i{font:600 .72em/1 var(--label);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:.36em .62em;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--muted)}
@media (prefers-reduced-motion:reduce){.dir-lounge .progs .pg-roll{display:inline-flex;flex-wrap:wrap;gap:2px 14px;overflow:visible}.dir-lounge .progs .pg{opacity:1;translate:none;transition:none}}
/* =====================================================================================================================
20. Type looks (Rob, 2 Oct): each typeface carries a whole page design, not only its headings.
Product (Schibsted Grotesk): app-store polish. Terminal (Schibsted Grotesk): airport wayfinding. In-flight magazine
(Editorial New): an issue, not a page. Travel journal (Editorial New): paper, prints and captions. First-class lounge
(Kyoto): centred, keylined, unhurried. Every look keeps the app's ink buttons and accent, and a one-colour upright headline
===================================================================================================================== */
.dir-lounge .secno,.dir-lounge .sc-cap{display:none}
.dir-lounge .secno span{white-space:nowrap}
/* the app's own screens, the lock screen, the showcase panels and the orbit cards keep the app's type in every look */
.dir-lounge .phone,.dir-lounge .sc-card .panel,.dir-lounge .fo{--body:"Schibsted Grotesk",sans-serif;--label:"Schibsted Grotesk",sans-serif;--display:"Schibsted Grotesk",sans-serif;--display-weight:700;--display-track:-.02em}
.dir-lounge[class*="lk-"] .view{font-family:var(--body)}
/* the looks that sign their sections drop the old label above each heading */
.dir-lounge:is(.lk-term,.lk-mag,.lk-lng) #founders > .wrap:not(.secno) > div:first-child > .eyebrow,
.dir-lounge:is(.lk-term,.lk-mag,.lk-lng) #quotes > .wrap:not(.secno) > div:first-child > .eyebrow,
.dir-lounge:is(.lk-term,.lk-mag,.lk-lng) #boarding > .wrap:not(.secno) > .eyebrow{display:none}
/* ---- Product: app-store polish. Centred heads, more air, soft round surfaces, labels in plain sentence case ---------- */
.dir-lounge.lk-prod{--display-weight:700;--display-track:-.045em;--h2:60px;--radius:28px;--card-shadow:0 1px 2px rgba(20,35,59,.05),0 26px 60px -26px rgba(20,35,59,.26)}
.dir-lounge.lk-prod.theme-dark{--card-shadow:0 1px 2px rgba(0,0,0,.22),0 30px 60px -26px rgba(0,0,0,.6)}
.dir-lounge.lk-prod h1{letter-spacing:-.05em}
.dir-lounge.lk-prod .view .eyebrow{font:600 15px/1.3 var(--body);letter-spacing:-.005em;text-transform:none}
.dir-lounge.lk-prod.theme-dark .view .eyebrow{color:var(--ink)}
.dir-lounge.lk-prod #v-lounge-home section:not(#top){padding-top:128px !important;padding-bottom:128px !important}
.dir-lounge.lk-prod #founders > .wrap > div:first-child,.dir-lounge.lk-prod #faq .faq-wrap > div:first-child{align-items:center;text-align:center;max-width:860px !important;width:100%;margin:0 auto}
.dir-lounge.lk-prod #founders .story{text-align:center}
.dir-lounge.lk-prod #faq .faq-wrap{gap:48px !important}
.dir-lounge.lk-prod #top .lede{font-size:23px;letter-spacing:-.01em}
.dir-lounge.lk-prod .sc-card{border-radius:40px;border-color:transparent}
.dir-lounge.lk-prod .qwall{column-gap:22px}
.dir-lounge.lk-prod .qw{border-radius:28px;border-color:transparent !important;box-shadow:var(--card-shadow);padding:26px 28px}
.dir-lounge.lk-prod .qw .qh{border-bottom:0;padding-bottom:4px}
.dir-lounge.lk-prod .card{box-shadow:var(--card-shadow)}
.dir-lounge.lk-prod #faq .faq{border-top:0 !important}
.dir-lounge.lk-prod #faq .faq details{background:var(--card);border:0;border-radius:24px;padding:0 26px;margin:0 0 12px;box-shadow:var(--card-shadow)}
.dir-lounge.lk-prod #faq .faq summary{font-size:19px;padding:22px 0;align-items:center}
.dir-lounge.lk-prod #faq .faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;color:var(--ink);background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,color-mix(in srgb,var(--ink) 9%,transparent);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.dir-lounge.lk-prod #faq .faq details[open] summary::after{content:"";transform:rotate(45deg)}
.dir-lounge.lk-prod .faq-sub{padding-top:30px}
.dir-lounge.lk-prod .ask{border-radius:28px}
.dir-lounge.lk-prod .tot2 .pill{padding:10px 16px}
@media (max-width:640px){
.dir-lounge.lk-prod #v-lounge-home section:not(#top){padding-top:84px !important;padding-bottom:84px !important}
.dir-lounge.lk-prod .sc-card{border-radius:30px}
.dir-lounge.lk-prod #faq .faq details{padding:0 20px;border-radius:20px}
.dir-lounge.lk-prod #faq .faq summary{font-size:17px}
}
/* ---- Terminal: airport wayfinding. One left edge, a gate sign over every section, departure-board labels --------------- */
.dir-lounge.lk-term{--display-weight:800;--display-track:-.042em;--radius:8px;--card-shadow:none;--term-sign:"Barlow Semi Condensed","Barlow Condensed",sans-serif;--term-rule:color-mix(in srgb,var(--ink) 24%,transparent)}
.dir-lounge.lk-term.theme-light{--term-badge:#FFFFFF}
.dir-lounge.lk-term.theme-dark{--term-badge:#10192B}
.dir-lounge.lk-term h1{line-height:.9;letter-spacing:-.048em}
.dir-lounge.lk-term h2{line-height:.95}
.dir-lounge.lk-term #top .hero-copy::before{content:"Status planning for frequent flyers";display:block;padding-top:12px;margin-bottom:-6px;border-top:2px solid var(--ink);font:600 13.5px/1.2 var(--term-sign);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.dir-lounge.lk-term #top h1{text-transform:uppercase;letter-spacing:-.025em;line-height:.88}
.dir-lounge.lk-term #boarding > .wrap:not(.secno) > div[style*="justify-content:center"]{justify-content:flex-start !important}
.dir-lounge.lk-term header .serif{font-weight:800;letter-spacing:-.035em}
.dir-lounge.lk-term .nav a:not(.btn){font:600 13.5px/1 var(--term-sign);letter-spacing:.09em;text-transform:uppercase}
.dir-lounge.lk-term .btn{font-family:"Schibsted Grotesk",sans-serif;font-weight:700}
.dir-lounge.lk-term .view .eyebrow{font:600 13.5px/1.2 var(--term-sign);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.dir-lounge.lk-term .view .eyebrow .ei{display:none}
.dir-lounge.lk-term .trust{font:600 14px/1.3 var(--term-sign);letter-spacing:.07em;text-transform:uppercase}
.dir-lounge.lk-term #v-lounge-home :is(.wl-wrap,.thru-plac) > .progs{font:600 14px/1.45 var(--term-sign);letter-spacing:.07em;text-transform:uppercase}
.dir-lounge.lk-term .progs .pg i{border-radius:3px;font-family:var(--term-sign)}
.dir-lounge.lk-term #v-lounge-home .secno{display:flex;align-items:center;gap:14px;margin-bottom:46px;font:600 14.5px/1 var(--term-sign);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.dir-lounge.lk-term #v-lounge-home .secno b{flex:none;display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:40px;padding:0 8px;border-radius:5px;background:var(--ink);color:var(--term-badge);font:700 17px/1 "Barlow Condensed",sans-serif;letter-spacing:.04em}
.dir-lounge.lk-term #v-lounge-home .secno::after{content:"";flex:1;height:2px;background:var(--ink)}
.dir-lounge.lk-term.rev-wall #quotes > .wrap:not(.secno) > div:first-child{align-items:flex-start;text-align:left}
.dir-lounge.lk-term #boarding > .wrap:not(.secno){align-items:flex-start !important;text-align:left !important}
.dir-lounge.lk-term #boarding .trust{justify-content:flex-start}
.dir-lounge.lk-term #boarding h2,.dir-lounge.lk-term #boarding .lede{margin-left:0 !important}
.dir-lounge.lk-term .sc-card{border-radius:14px}
.dir-lounge.lk-term .qw{border-radius:8px;border:1px solid var(--term-rule) !important;box-shadow:none}
.dir-lounge.lk-term .qw .qh{border-bottom:1px solid var(--term-rule)}
.dir-lounge.lk-term .qw .qav{border-radius:6px;font-family:var(--term-sign);font-weight:700}
.dir-lounge.lk-term .qw .qh div b{font-weight:800}
.dir-lounge.lk-term .qw .qft em{border-radius:3px;font-family:var(--term-sign)}
.dir-lounge.lk-term #faq .faq{counter-reset:tq;border-top:2px solid var(--ink) !important}
.dir-lounge.lk-term #faq .faq details{border-radius:0;border-bottom:1px solid var(--term-rule)}
.dir-lounge.lk-term #faq .faq summary{counter-increment:tq;justify-content:flex-start;align-items:baseline;gap:18px;font-weight:700}
.dir-lounge.lk-term #faq .faq summary::before{content:counter(tq,decimal-leading-zero);flex:none;min-width:24px;font:600 13.5px/1 var(--term-sign);letter-spacing:.08em;color:var(--muted)}
.dir-lounge.lk-term #faq .faq summary::after{margin-left:auto;font:500 24px/1 var(--term-sign);color:var(--ink)}
.dir-lounge.lk-term .faq-sub .eyebrow{color:var(--muted)}
.dir-lounge.lk-term .ask{border-radius:8px;border:1px solid var(--term-rule) !important;box-shadow:none}
.dir-lounge.lk-term .card{box-shadow:none}
.dir-lounge.lk-term .tot2 .pill{border-radius:6px}
.dir-lounge.lk-term .tot2 .who,.dir-lounge.lk-term .tot2 .q{font-family:var(--term-sign)}
.dir-lounge.lk-term .tot2 .q{letter-spacing:.02em}
.dir-lounge.lk-term mark.hl{border-radius:3px}
@media (max-width:640px){
.dir-lounge.lk-term #v-lounge-home .secno{gap:10px;margin-bottom:30px;font-size:12px}
.dir-lounge.lk-term #v-lounge-home .secno b{height:24px;min-width:34px;font-size:12.5px}
.dir-lounge.lk-term.ph-simple #v-lounge-home .hero-copy{align-items:flex-start;text-align:left}
.dir-lounge.lk-term.ph-simple #v-lounge-home .hero-copy h1{text-align:left}
.dir-lounge.lk-term.ph-simple #v-lounge-home .hero-copy .lede{margin:0}
.dir-lounge.lk-term.ph-simple #v-lounge-home .wl-wrap > .trust{justify-content:flex-start;align-items:flex-start}
}
/* ---- In-flight magazine: an issue, not a page. Hairlines and pull quotes; its text in the app's sans (v202) ---------- */
.dir-lounge.lk-mag{--body:"Plus Jakarta Sans",system-ui,sans-serif;--label:"Plus Jakarta Sans",system-ui,sans-serif;--h1:104px;--h2:64px;--h3:32px;--radius:4px;--card-shadow:none;--mag-rule:color-mix(in srgb,var(--ink) 34%,transparent)}
.dir-lounge.lk-mag .view{font-variant-numeric:oldstyle-nums proportional-nums}
.dir-lounge.lk-mag .view .lede{font-size:22px;line-height:1.5}
.dir-lounge.lk-mag .crew h3{font-size:30px;line-height:1.08}
.dir-lounge.lk-mag .nav a:not(.btn){font:500 15px/1 var(--label);letter-spacing:0;text-transform:none}
.dir-lounge.lk-mag .btn{font:600 16px/1 var(--label);letter-spacing:.01em}
.dir-lounge.lk-mag .view .eyebrow{font:500 12px/1.3 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.dir-lounge.lk-mag .view .eyebrow .ei{display:none}
.dir-lounge.lk-mag #top .hero-copy::before{content:"Issue 01 \00B7 The status issue";display:block;padding-bottom:12px;margin-bottom:-8px;border-bottom:1px solid var(--mag-rule);font:500 12px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.dir-lounge.lk-mag .trust{font:400 16px/1.3 var(--label)}
.dir-lounge.lk-mag #v-lounge-home :is(.wl-wrap,.thru-plac) > .progs{font:400 16px/1.45 var(--label)}
.dir-lounge.lk-mag #v-lounge-home .secno{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:40px;font:500 12px/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}
.dir-lounge.lk-mag #v-lounge-home .secno::before,.dir-lounge.lk-mag #v-lounge-home .secno::after{content:"";flex:1;height:1px;background:var(--mag-rule)}
.dir-lounge.lk-mag #v-lounge-home .secno b{display:none}
.dir-lounge.lk-mag #founders > .wrap:not(.secno) > div:first-child,.dir-lounge.lk-mag #faq .faq-wrap > div:first-child{align-items:center;text-align:center;max-width:900px !important;width:100%;margin:0 auto}
.dir-lounge.lk-mag #founders .story{text-align:center}
.dir-lounge.lk-mag .crew .txt .bio{font-size:17.5px;line-height:1.6}
.dir-lounge.lk-mag .crew .txt .bio:first-of-type::first-letter{float:left;font:400 66px/.82 var(--display);padding:6px 10px 0 0;color:var(--ink)}
.dir-lounge.lk-mag .crew .txt .eyebrow{letter-spacing:.24em}
.dir-lounge.lk-mag .sc-card{border-radius:6px}
.dir-lounge.lk-mag .qwall{column-gap:48px;column-rule:1px solid var(--mag-rule)}
.dir-lounge.lk-mag .qw,.dir-lounge.lk-mag.theme-dark .qw{background:transparent !important;border:0 !important;border-bottom:1px solid var(--mag-rule) !important;border-radius:0;box-shadow:none !important;padding:4px 0 28px;margin-bottom:28px}
.dir-lounge.lk-mag .qw .qh{order:2;border:0;padding:14px 0 0}
.dir-lounge.lk-mag .qw .qav{display:none}
.dir-lounge.lk-mag .qw .qh div{flex-direction:row;align-items:baseline;gap:8px}
.dir-lounge.lk-mag .qw .qh div b{font:600 12px/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase}
.dir-lounge.lk-mag .qw .qh div span{font:400 15px/1.3 var(--label)}
.dir-lounge.lk-mag .qw .qh div span::before{content:"\00B7";margin-right:8px}
.dir-lounge.lk-mag .qw .qh div span{color:var(--ink)}
.dir-lounge.lk-mag .qw .qft em{color:var(--ink);opacity:1;border-color:var(--mag-rule)}
.dir-lounge.lk-mag .qw blockquote,.dir-lounge.lk-mag .qw.lg blockquote{font:400 25px/1.2 var(--display);letter-spacing:-.008em}
.dir-lounge.lk-mag .qw .qft{order:3;justify-content:flex-start;margin-top:12px}
.dir-lounge.lk-mag .qw .qshot{order:4;margin-top:16px}
.dir-lounge.lk-mag #faq .faq{border-top:1px solid var(--mag-rule) !important}
.dir-lounge.lk-mag #faq .faq details{border-radius:0;border-bottom:1px solid var(--mag-rule)}
.dir-lounge.lk-mag #faq .faq summary{font:400 27px/1.15 var(--display);padding:22px 0}
.dir-lounge.lk-mag #faq .faq summary::after{font:300 30px/1 var(--label);color:var(--ink)}
.dir-lounge.lk-mag .ask,.dir-lounge.lk-mag.theme-dark .ask{background:transparent !important;border:1px solid var(--mag-rule) !important;border-radius:0;box-shadow:none !important}
.dir-lounge.lk-mag .ask .muted{color:var(--ink)}
.dir-lounge.lk-mag .card{box-shadow:none}
.dir-lounge.lk-mag .tot2 .pill{border-radius:3px;font-family:var(--display);font-weight:400;font-size:19px}
.dir-lounge.lk-mag mark.hl{background:none !important;padding:0;font-family:var(--display);font-size:1.25em;color:var(--ink)}
@media (max-width:640px){
.dir-lounge.lk-mag header .serif,.dir-lounge.lk-jrn header .serif{font-size:22px !important}
.dir-lounge.lk-mag header nav.nav .btn{font-size:13.5px !important;padding:0 12px !important}
.dir-lounge.lk-mag .view .lede{font-size:19px}
.dir-lounge.lk-mag #top .hero-copy::before{font-size:11px;letter-spacing:.2em;text-align:center;align-self:stretch}
.dir-lounge.lk-mag #v-lounge-home .secno{gap:14px;margin-bottom:28px;letter-spacing:.22em}
.dir-lounge.lk-mag .qw blockquote,.dir-lounge.lk-mag .qw.lg blockquote{font-size:22px}
.dir-lounge.lk-mag #faq .faq summary{font-size:22px}
}
/* ---- Travel journal: warm paper, prints with captions, wide margins, a serif to read and a small sans to label ----------- */
.dir-lounge.lk-jrn{--body:"Plus Jakarta Sans",system-ui,sans-serif;--label:"Plus Jakarta Sans",system-ui,sans-serif;--h2:60px;--radius:6px}
.dir-lounge.lk-jrn.theme-light{--paper:#FBF6EC;--paper-ink:#2B2620;--paper-muted:#5D5347;--paper-rule:rgba(80,58,34,.18);--paper-shadow:0 1px 1px rgba(60,40,20,.06),0 24px 44px -24px rgba(60,40,20,.45);--tape:rgba(246,226,170,.78)}
.dir-lounge.lk-jrn.theme-dark{--paper:#2C2621;--paper-ink:#F3ECE2;--paper-muted:#D1C6B8;--paper-rule:rgba(255,240,220,.16);--paper-shadow:0 1px 1px rgba(0,0,0,.3),0 26px 48px -24px rgba(0,0,0,.75);--tape:rgba(246,226,170,.34)}
.dir-lounge.lk-jrn .view{font-weight:400}
.dir-lounge.lk-jrn .view .lede{font-size:21px;line-height:1.6;max-width:640px}
.dir-lounge.lk-jrn .view .eyebrow{font:500 14px/1.3 var(--label);letter-spacing:0;text-transform:none;color:var(--ink)}
.dir-lounge.lk-jrn .view .eyebrow .ei{display:none}
.dir-lounge.lk-jrn .crew h3{font-size:29px;line-height:1.1}
.dir-lounge.lk-jrn #v-lounge-home #top .wl-wrap{position:relative;max-width:560px;padding:28px 26px 22px;border-radius:3px;background:var(--paper);color:var(--paper-ink);--ink:var(--paper-ink);--muted:var(--paper-muted);--line:var(--paper-rule);box-shadow:var(--paper-shadow);rotate:-.7deg}
.dir-lounge.lk-jrn #v-lounge-home #top .wl-wrap::before{content:"";position:absolute;top:-12px;left:34px;width:96px;height:24px;background:var(--tape);rotate:-4deg;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dir-lounge.lk-jrn #v-lounge-home section:not(#top){padding-top:120px !important;padding-bottom:120px !important}
.dir-lounge.lk-jrn .qw,.dir-lounge.lk-jrn .card,.dir-lounge.lk-jrn.theme-dark .qw,.dir-lounge.lk-jrn.theme-dark .card{background:var(--paper) !important;color:var(--paper-ink);--ink:var(--paper-ink);--muted:var(--paper-muted);--line:var(--paper-rule);border:0 !important;border-radius:3px;box-shadow:var(--paper-shadow) !important}
.dir-lounge.lk-jrn .qwall{column-gap:30px}
.dir-lounge.lk-jrn .qw{padding:24px 24px 22px;margin-bottom:30px}
.dir-lounge.lk-jrn .qw:nth-child(4n+1){rotate:-.8deg}
.dir-lounge.lk-jrn .qw:nth-child(4n+2){rotate:.6deg}
.dir-lounge.lk-jrn .qw:nth-child(4n+3){rotate:-.4deg}
.dir-lounge.lk-jrn .qw:nth-child(4n){rotate:.9deg}
.dir-lounge.lk-jrn .qw .qh{border-bottom:1px dashed var(--paper-rule)}
.dir-lounge.lk-jrn .qw .qh div b{font-family:var(--label)}
.dir-lounge.lk-jrn .qw blockquote,.dir-lounge.lk-jrn .qw.lg blockquote{font:400 17px/1.62 var(--body)}
.dir-lounge.lk-jrn .sc-grid{gap:48px 44px}
.dir-lounge.lk-jrn .sc-card{border-radius:2px;border:0;padding-bottom:58px;box-shadow:0 0 0 14px var(--paper),0 0 0 15px var(--paper-rule),var(--paper-shadow)}
.dir-lounge.lk-jrn .sc-card:nth-child(odd){rotate:-.5deg}
.dir-lounge.lk-jrn .sc-card:nth-child(even){rotate:.5deg}
.dir-lounge.lk-jrn .sc-cap{display:flex;align-items:center;position:absolute;left:0;right:0;bottom:0;height:58px;padding:0 6px;z-index:3;background:var(--paper);color:var(--paper-ink);font:400 16px/1.2 var(--body)}
.dir-lounge.lk-jrn #faq .faq{border-top:1px dashed color-mix(in srgb,var(--ink) 34%,transparent) !important}
.dir-lounge.lk-jrn #faq .faq details{border-radius:0;border-bottom:1px dashed color-mix(in srgb,var(--ink) 34%,transparent)}
.dir-lounge.lk-jrn #faq .faq summary{font:400 26px/1.2 var(--display);padding:20px 0}
.dir-lounge.lk-jrn .ask{rotate:.6deg}
.dir-lounge.lk-jrn .ask::before{content:"";position:absolute;top:-13px;left:50%;width:112px;height:26px;margin-left:-56px;background:var(--tape);rotate:-3deg;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dir-lounge.lk-jrn .tot2 .pill{border-radius:4px;font-family:var(--display);font-weight:400;font-size:19px}
@media (max-width:640px){
.dir-lounge.lk-jrn #v-lounge-home section:not(#top){padding-top:84px !important;padding-bottom:84px !important}
.dir-lounge.lk-jrn .view .lede{font-size:18px}
.dir-lounge.lk-jrn #v-lounge-home #top .wl-wrap{padding:24px 12px 18px;rotate:-.5deg}
.dir-lounge.lk-jrn.ph-simple #top form.wl .btn{padding:0 14px;font-size:13.5px}
.dir-lounge.lk-jrn .sc-grid{gap:40px}
.dir-lounge.lk-jrn .sc-card{padding-bottom:50px;box-shadow:0 0 0 10px var(--paper),0 0 0 11px var(--paper-rule),var(--paper-shadow)}
.dir-lounge.lk-jrn .sc-cap{height:50px;font-size:15px}
.dir-lounge.lk-jrn #faq .faq summary{font-size:22px}
}
/* ---- First-class lounge: centred and symmetrical, spaced capitals, fine keylines, sharp corners, unhurried motion ------- */
.dir-lounge.lk-lng{--body:"Plus Jakarta Sans",system-ui,sans-serif;--label:"Plus Jakarta Sans",system-ui,sans-serif;--radius:2px;--card-shadow:none}
.dir-lounge.lk-lng.theme-light{--key:color-mix(in srgb,var(--ink) 30%,transparent);--key-soft:color-mix(in srgb,var(--ink) 14%,transparent);--lng-card:rgba(255,253,248,.84)}
.dir-lounge.lk-lng.theme-dark{--key:rgba(255,255,255,.3);--key-soft:rgba(255,255,255,.13);--lng-card:rgba(8,10,24,.62)}
.dir-lounge.lk-lng .view{font-weight:400}
.dir-lounge.lk-lng .view .lede{font-weight:400;letter-spacing:.005em}
.dir-lounge.lk-lng .nav a:not(.btn){font:500 11px/1 var(--label);letter-spacing:.24em;text-transform:uppercase}
.dir-lounge.lk-lng .btn{font:500 12px/1 var(--label);letter-spacing:.2em;text-transform:uppercase}
.dir-lounge.lk-lng .view .eyebrow{font:500 11px/1.3 var(--label);letter-spacing:.34em;text-transform:uppercase}
.dir-lounge.lk-lng .view .eyebrow .ei{display:none}
.dir-lounge.lk-lng .trust{font:400 15px/1.3 var(--label);letter-spacing:.02em}
.dir-lounge.lk-lng #v-lounge-home #top .hero-copy{align-items:center;text-align:center}
.dir-lounge.lk-lng #v-lounge-home #top .hero-copy h1{text-align:center;margin-left:auto;margin-right:auto}
.dir-lounge.lk-lng #v-lounge-home #top .wl-wrap{align-items:center;width:100%;max-width:560px}
.dir-lounge.lk-lng #v-lounge-home #top .wl-wrap > .trust{justify-content:center;align-self:stretch}
.dir-lounge.lk-lng #v-lounge-home #top .wl-wrap > form{width:100%}
.dir-lounge.lk-lng #v-lounge-home #top .lede::after{content:"";display:block;width:120px;height:1px;margin:26px auto 0;background:var(--key)}
.dir-lounge.lk-lng #v-lounge-home .secno{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:26px;font:500 11px/1 var(--label);letter-spacing:.42em;text-transform:uppercase;color:var(--ink)}
.dir-lounge.lk-lng #v-lounge-home .secno span{margin-right:-.42em}
.dir-lounge.lk-lng #v-lounge-home .secno b{display:none}
.dir-lounge.lk-lng #v-lounge-home .secno::before,.dir-lounge.lk-lng #v-lounge-home .secno::after{content:"";flex:none;width:6px;height:6px;border:1px solid currentColor;rotate:45deg}
.dir-lounge.lk-lng #founders > .wrap:not(.secno) > div:first-child,.dir-lounge.lk-lng #faq .faq-wrap > div:first-child{align-items:center;text-align:center;max-width:860px !important;width:100%;margin:0 auto}
.dir-lounge.lk-lng #founders > .wrap:not(.secno) > div:first-child::after,.dir-lounge.lk-lng.rev-wall #quotes > .wrap:not(.secno) > div:first-child::after,.dir-lounge.lk-lng #faq .faq-wrap > div:first-child::after{content:"";width:120px;height:1px;margin:14px auto 0;background:var(--key)}
.dir-lounge.lk-lng #founders .story{text-align:center}
.dir-lounge.lk-lng .crew .txt{align-items:center;text-align:center}
.dir-lounge.lk-lng .crew .txt .eyebrow{justify-content:center}
@media (min-width:641px){.dir-lounge.lk-lng.crew-win .crew .rot{margin-left:auto !important;margin-right:auto !important}}
.dir-lounge.lk-lng .sc-card{border-radius:2px;outline:1px solid rgba(255,255,255,.16);outline-offset:-12px}
.dir-lounge.lk-lng .qw,.dir-lounge.lk-lng .card,.dir-lounge.lk-lng.theme-dark .qw,.dir-lounge.lk-lng.theme-dark .card{background:var(--lng-card) !important;border:1px solid var(--key) !important;border-radius:0;box-shadow:none !important;outline:1px solid var(--key-soft);outline-offset:-7px}
.dir-lounge.lk-lng .qw{padding:30px 28px 24px;text-align:center;align-items:center}
.dir-lounge.lk-lng .qw .qh{order:2;flex-direction:column;border:0;padding:16px 0 0;gap:0}
.dir-lounge.lk-lng .qw .qav{display:none}
.dir-lounge.lk-lng .qw .qh div{align-items:center;gap:4px}
.dir-lounge.lk-lng .qw .qh div b{font:500 11px/1.3 var(--label);letter-spacing:.3em;text-transform:uppercase}
.dir-lounge.lk-lng .qw .qh div span{font:400 13px/1.3 var(--label);letter-spacing:.06em}
.dir-lounge.lk-lng .qw blockquote,.dir-lounge.lk-lng .qw.lg blockquote{font:500 19px/1.5 var(--display);font-style:normal}
.dir-lounge.lk-lng .qw .qft{order:3;justify-content:center;margin-top:12px}
.dir-lounge.lk-lng .qw .qft em{border-radius:0}
.dir-lounge.lk-lng .qw .qshot{order:4;margin-top:16px;border-radius:0}
.dir-lounge.lk-lng #faq .faq{border-top:1px solid var(--key) !important}
.dir-lounge.lk-lng #faq .faq details{border-radius:0;border-bottom:1px solid var(--key)}
.dir-lounge.lk-lng #faq .faq summary{font:500 21px/1.3 var(--display);letter-spacing:0}
.dir-lounge.lk-lng #faq .faq summary::after{font:300 26px/1 var(--label);color:var(--ink)}
.dir-lounge.lk-lng .ask{text-align:center}
.dir-lounge.lk-lng #boarding > .wrap:not(.secno){max-width:920px;padding:64px 48px 56px;border:1px solid var(--key);outline:1px solid var(--key-soft);outline-offset:-9px}
.dir-lounge.lk-lng .tot2 .pill{border-radius:0;font-family:var(--display);font-weight:500}
.dir-lounge.lk-lng .tot2 .who{font:500 11px/1 var(--label);letter-spacing:.3em}
.dir-lounge.lk-lng mark.hl{border-radius:0}
.dir-lounge.lk-lng #top .hero-copy > *{animation-duration:1.1s}
@media (max-width:640px){
.dir-lounge.lk-lng header .serif{font-size:12.5px !important;letter-spacing:.14em}
.dir-lounge.lk-lng header nav.nav .btn{font-size:10.5px !important;letter-spacing:.08em;padding:0 12px !important}
.dir-lounge.lk-lng.ph-simple #top form.wl .btn{font-size:11px;letter-spacing:.06em;padding:0 14px}
.dir-lounge.lk-lng #v-lounge-home .secno{gap:12px;letter-spacing:.3em}
.dir-lounge.lk-lng #v-lounge-home .secno span{margin-right:-.3em}
.dir-lounge.lk-lng #boarding > .wrap:not(.secno){margin:0 20px;padding:44px 22px 40px;outline-offset:-7px}
.dir-lounge.lk-lng .btn{letter-spacing:.12em;font-size:11.5px}
}
/* ---- Review chips (Rob, 2 Oct: "it's just the coloured chips for the names that I hate"): the city's airport code in the
app's ink, one colour for every review, flipped in the dark. Each look keeps its own chip shape -------------------------- */
.dir-lounge.theme-light{--qav-ink:#FFFFFF}
.dir-lounge.theme-dark{--qav-ink:#10192B}
.dir-lounge:is(.ty-g,.ty-e,.ty-k) .qw .qav{background:var(--ink);color:var(--qav-ink);font:700 12.5px/1 "Schibsted Grotesk",sans-serif;letter-spacing:.05em}
.dir-lounge.lk-term .qw .qav{font:700 13.5px/1 var(--term-sign);letter-spacing:.06em}
.dir-lounge.lk-jrn .qw .qav{rotate:-8deg;font-size:12px}
/* ---- Hero: the hand (Rob and Frank, 2 Oct: "it looks a little religious ... like god is endorsing our app"). The hand
reaches in from the page's right edge, in plain light, no glow. Hand in the clouds and Window seat deleted (2 Oct) ---- */
.dir-lounge .cabin{display:none}
.dir-lounge.hero-seat #v-lounge-home #top{overflow-x:clip}
.dir-lounge.hero-seat.theme-dark .jet{opacity:.6}
.dir-lounge.hero-seat.hand-on .hero-phone{overflow:visible;-webkit-mask-image:none;mask-image:none;z-index:2}
.dir-lounge.hero-seat .hero-phone .hand-lit,.dir-lounge.hero-seat .hero-phone .hand-glow{display:none !important}
/* the FAQ's link to the answers reads over the night clouds too: the ink, underlined, in the dark */
.dir-lounge.theme-dark #v-lounge-home .faq-sub a{color:var(--ink) !important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* ---- Hero: Through the window (Rob, 2 Oct). The hero's section is two screens tall; its first screen stays put while the
reader scrolls one screen, and new.js carries them through the window (see Thru). The header shows the cabin's colour
until then. Reduced motion: the cabin is a still first screen that scrolls away as any section does -------------------- */
.dir-lounge.hero-thru.theme-light{--cab-w1:#ECE9E4;--cab-w2:#D8D3CB;--cab-glow:#FFFFFF;--cab-b1:#F8F6F2;--cab-b2:#D6D0C7;--cab-r1:#BDB6AC;--cab-r2:#DED8CF;--cab-sh:#E4DFD7;--cab-top:#E3DFD9}
.dir-lounge.hero-thru.theme-dark,.dir-lounge.hero-thru.theme-light:is(.col-dd,.col-du){--cab-w1:#2C2F38;--cab-w2:#1F2229;--cab-glow:#8A9BD0;--cab-b1:#3B3F4A;--cab-b2:#282B33;--cab-r1:#16181E;--cab-r2:#2E3139;--cab-sh:#31343D;--cab-top:#262931}
.dir-lounge.hero-thru #v-lounge-home .sec[data-sec="hero"]{height:200vh;height:200svh;margin-top:calc(-1 * var(--hd-h, 85px))}
.dir-lounge.hero-thru #v-lounge-home section#top{position:sticky;top:0;height:100vh;height:100svh;min-height:0;box-sizing:border-box;overflow:clip;padding:var(--hd-h, 85px) 0 0 !important;display:flex;flex-direction:column;justify-content:center}
.dir-lounge.hero-thru #v-lounge-home #top > .hero-grid{width:100%}
@media (max-width:900px){.dir-lounge.hero-thru #v-lounge-home section#top{justify-content:flex-start;padding-top:calc(var(--hd-h, 64px) + 18px) !important}}
/* (v224, Rob, 6 Oct: "this spacing feels wrong - too squished up top, too spacious to first feature card?"): the features
block left empty since the carousel went no longer doubles the gap above the first feature card (the words' resting place
under the header is new.js's, see Thru) */
.dir-lounge.scr-show #v-lounge-home #features .feat-top{display:none}
.dir-lounge.hero-thru #v-lounge-home .cabin{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
.dir-lounge.hero-thru .cabin .cab-out{position:absolute;inset:0;will-change:transform}
.dir-lounge.hero-thru .cabin .cab-wall{position:absolute;left:0;top:0;will-change:transform,opacity}
.dir-lounge.hero-thru .cabin .jet{position:absolute;aspect-ratio:1000 / 220;height:auto;overflow:visible;pointer-events:none}
/* the jet flies (Rob, 2 Oct: "can plane be actually flying?"): a photographed 787 and its two contrails (build.py) cross the
window on a gentle climb, one layer the compositor moves, about once every half minute. Its navigation lights glow at the
wingtips, its strobe flashes twice a beat; at night the airframe goes dark and the lights carry it. Reduced motion: it
holds still in the middle of the window */
.dir-lounge .jet .jet-dir{position:absolute;left:3%;top:86%;width:100%;height:0;transform:rotate(-11.3deg);transform-origin:0 0}
.dir-lounge .jet .jet-fly{position:absolute;left:0;top:0;width:74%;transform:translate(-100%,-50%);will-change:transform,opacity;animation:jet-fly 30s linear infinite}
.dir-lounge .jet .jet-art{display:block;width:100%;height:auto}
.dir-lounge .jet .jl{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;opacity:.28}
.dir-lounge .jet .jl-r{background:#FF5A52;box-shadow:0 0 2px rgba(255,80,72,.5)}
.dir-lounge .jet .jl-g{background:#4BE08E;box-shadow:0 0 2px rgba(60,220,130,.5)}
.dir-lounge .jet .jl-w{background:#FFFFFF;box-shadow:0 0 6px 2px rgba(255,255,255,.9);opacity:0;animation:jet-strobe 1.6s linear infinite}
.dir-lounge.hero-seat.theme-dark .jet{opacity:1}
.dir-lounge.theme-dark .jet .jet-art{filter:brightness(.32) saturate(.5)}
.dir-lounge.theme-dark .jet .jl-r,.dir-lounge.theme-dark .jet .jl-g{opacity:1}
.dir-lounge.theme-dark .jet .jl-r{box-shadow:0 0 4px 1px rgba(255,80,72,.7)}
.dir-lounge.theme-dark .jet .jl-g{box-shadow:0 0 4px 1px rgba(60,220,130,.7)}
@keyframes jet-fly{0%{transform:translate(-100%,-50%);opacity:0}3%{opacity:1}86%{opacity:1}92%,100%{transform:translate(120%,-50%);opacity:0}}
@keyframes jet-strobe{0%,3%{opacity:1}3.1%,12%{opacity:0}12.1%,15%{opacity:1}15.1%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dir-lounge .jet .jet-fly{animation:none;transform:translate(-30%,-50%);opacity:1}.dir-lounge .jet .jl-w{animation:none;opacity:.8}}
/* the cloud deck out of the window: drifting layers, far to near, from the page's own cloud bitmaps (new.js) */
.dir-lounge.hero-thru .cabin .cab-cl{position:absolute;overflow:hidden;will-change:transform,opacity}
.dir-lounge.hero-thru .cabin .cab-cl .wcl{position:absolute;left:0;bottom:0;will-change:transform;animation:cdrift var(--sp,150s) linear infinite}
.dir-lounge.hero-thru .cabin .cab-cl canvas{display:block}
@media (prefers-reduced-motion:reduce){.dir-lounge.hero-thru .cabin .cab-cl .wcl{animation:none}}
.dir-lounge.hero-thru #v-lounge-home #top .fo,.dir-lounge.hero-thru #v-lounge-home #top .hdots{display:none !important}
.dir-lounge.hero-thru #v-lounge-home .hero-copy{will-change:transform,opacity}
/* the phone in hand is its own layer: it drops and fades without being drawn again (Rob, 2 Oct: "window is choppy") */
.dir-lounge.hero-thru #v-lounge-home #top .hero-phone{will-change:transform,opacity}
.dir-lounge.hero-thru #v-lounge-home header{transition:background-color .35s ease,border-color .35s ease}
.dir-lounge.hero-thru.thru-in #v-lounge-home header{background:var(--cab-top) !important;border-bottom-color:transparent !important}
@media (prefers-reduced-motion:reduce){
.dir-lounge.hero-thru #v-lounge-home .sec[data-sec="hero"]{height:auto}
.dir-lounge.hero-thru #v-lounge-home section#top{position:relative}
.dir-lounge.hero-thru #v-lounge-home .cabin{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
}
/* ---- the window, fitted whole to every screen (Rob, 2 Oct: at half screen and on a phone it was "cut off"). new.js picks
the layout. thru-side: the words beside the window, in a narrower column on a half-width window. thru-stack: the window
under the words on a tall tablet. thru-inwin (Words in the window, and every phone): the words centred in the window,
sized from its width (--win-cw), each look's headline scaled to its typeface (--hk). thru-nohand: no phone on a phone's
first screen, where there is no room beside or under the window ---- */
@media (min-width:641px) and (max-width:900px){
.dir-lounge.thru-stack #v-lounge-home #top .hero-copy{gap:22px}
.dir-lounge.thru-stack #v-lounge-home #top .hero-copy h1{font-size:calc(clamp(36px,6vw,54px) * var(--hk,1)) !important}
.dir-lounge.thru-side #v-lounge-home section#top{justify-content:center;padding-top:var(--hd-h,64px) !important}
.dir-lounge.thru-side #v-lounge-home #top .hero-copy{max-width:min(54vw,440px)}
.dir-lounge.thru-side #v-lounge-home #top .hero-copy h1{font-size:calc(clamp(32px,5.2vw,46px) * var(--hk,1)) !important}
}
.dir-lounge.hero-thru.ty-e{--hk:1.22}
.dir-lounge.hero-thru.ty-k{--hk:.95}
.dir-lounge.hero-thru.lk-term{--hk:.86}
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top .hero-copy{width:var(--win-cw,320px);max-width:none;align-items:flex-start;text-align:left;gap:clamp(14px,calc(var(--win-cw,320px) * .055),26px)}
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top .hero-copy::before{align-self:stretch;text-align:left}
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top .hero-copy h1{font-size:calc(var(--win-cw,320px) * .118 * var(--hk,1)) !important;margin-left:0 !important;margin-right:0 !important;text-align:left !important}
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top .hero-copy .lede{margin-left:0 !important;margin-right:0 !important;text-align:left;font-size:clamp(16px,calc(var(--win-cw,320px) * .05),21px);text-wrap:balance}
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top .wl-wrap{width:100%;max-width:none;align-items:stretch;margin-top:0}
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top .wl-wrap > .trust{justify-content:flex-start;align-items:center;text-align:left}
/* the form takes the opening's own width, wider than the words above and below it */
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top .wl-wrap > form{width:100%;max-width:none !important;align-self:stretch}
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top form.wl .btn{padding:0 18px}
@media (max-width:640px){.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top form.wl .btn{padding:0 14px;font-size:14px}.dir-lounge.hero-thru.thru-inwin #v-lounge-home #top form.wl .field{padding:0 2px 0 12px}}
.dir-lounge.hero-thru.thru-inwin.lk-jrn #v-lounge-home #top .wl-wrap > form{width:100%}
.dir-lounge.hero-thru.thru-tight #v-lounge-home #top form.wl > div{flex-direction:column;flex-wrap:nowrap !important;border-radius:26px;gap:5px !important}
.dir-lounge.hero-thru.thru-tight #v-lounge-home #top form.wl .field{width:100%;height:46px;text-align:left;padding:0 16px !important}
.dir-lounge.hero-thru.thru-tight #v-lounge-home #top form.wl .btn{width:100% !important;height:46px}
.dir-lounge.hero-thru.thru-nohand #v-lounge-home #top .hero-phone{visibility:hidden}
/* words in the window, simplified (Rob, 2 Oct: "too much content relative to space"; "should we move the 'get my boarding
pass' down below the waitlist count?"): the headline, the line and the pass in the window; the counter, the form and the
programs on a placard on the wall under the window (new.js places it) */
.dir-lounge.hero-thru #v-lounge-home .thru-plac{position:absolute;left:0;top:0;z-index:1;display:flex;flex-direction:column;align-items:stretch;text-align:left;will-change:transform,opacity}
.dir-lounge.hero-thru #v-lounge-home .thru-plac > .wl-wrap{margin:0}
.dir-lounge.hero-thru #v-lounge-home .thru-plac .wl-wrap > .trust{margin:0;justify-content:flex-start}
.dir-lounge.hero-thru #v-lounge-home .thru-plac .trust > span{text-wrap:balance}
/* the welcome out in the sky past the window (Rob, 2 Oct: "nothing to focus on, just blank sky? should there be words /
heading greeting us?"): the features' own welcome, said as the window opens round the reader. Meanwhile the features'
heading steps aside, there for screen readers only (new.js: thru-greet) */
.dir-lounge .cab-greet{display:none}
.dir-lounge.hero-thru.thru-greet .cabin .cab-greet{display:block;position:absolute;left:0;right:0;top:52%;opacity:0;visibility:hidden;will-change:transform,opacity}
.dir-lounge.hero-thru.thru-greet .cabin .cab-greet .wrap{display:flex;flex-direction:column;gap:12px;text-align:left}
.dir-lounge.hero-thru.thru-greet .cabin .cab-greet h2,.dir-lounge.hero-thru.thru-greet .cabin .cab-greet .lede{margin:0;max-width:760px}
.dir-lounge.hero-thru.thru-greet #v-lounge-home #features .feat-head{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* a short screen: the cabin is a plain first screen that scrolls away (new.js holds it still) */
.dir-lounge.hero-thru.thru-short #v-lounge-home .sec[data-sec="hero"]{height:auto}
.dir-lounge.hero-thru.thru-short #v-lounge-home section#top{position:relative;height:auto;min-height:0;justify-content:center;padding:calc(var(--hd-h,64px) + 28px) 0 40px !important}
.dir-lounge.hero-thru.thru-short #v-lounge-home .cabin{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
/* ---- the counters are the logo's own board (Rob, 2 Oct: "it looks like a different font to the soft flipboard logo ... the
numbers are in different spot in board"): the SR mark's tile, glyph and hinge gap, one tile per digit, the comma in the
ink (Rob, 2 Oct: "make it ink"). The digits are drawn exactly as the logo draws its letters; new.js flaps them (Count) ---- */
.dir-lounge .trust .cnt{display:inline-flex;align-items:flex-end;vertical-align:middle;gap:0;margin:0 2px}
.dir-lounge .trust .cb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.dir-lounge .cb{display:inline-flex;align-items:flex-end;gap:2px;color:var(--ink);--cbh:28px;line-height:1}
.dir-lounge .cb-t{position:relative;display:block;flex:none;width:calc(var(--cbh) * .5833);height:var(--cbh);perspective:130px}
.dir-lounge .cb-t > span{position:absolute;left:0;width:100%;height:46.667%;display:block}
.dir-lounge .cb-top{top:0}
.dir-lounge .cb-bot{top:53.333%}
.dir-lounge .cb-flap{top:0;z-index:2;transform-origin:50% 107.143%;transform-style:preserve-3d;visibility:hidden}
.dir-lounge .cb-front,.dir-lounge .cb-back{position:absolute;inset:0;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.dir-lounge .cb-back{transform:rotateX(180deg)}
.dir-lounge .cb svg{display:block;width:100%;height:100%;overflow:hidden}
.dir-lounge .cb-c{display:block;flex:none;font:800 calc(var(--cbh) * .74)/.8 "Barlow Condensed",sans-serif;color:var(--ink);margin:0 1px calc(var(--cbh) * -.1) 0;letter-spacing:0}
/* v199: the count rounds down with a plus (Rob, 3 Oct, "1,200+") */
.dir-lounge .cb-c.cb-plus{align-self:center;position:relative;top:calc(var(--cbh) * -.07);margin:0 0 0 2px;font-size:calc(var(--cbh) * .82);line-height:1}
.dir-lounge .trust .cnt[data-v]{cursor:default}
/* ---- left-aligned throughout (Rob, 2 Oct: "prefer to left align throughout rather than centre align - neater, better for
eye to follow"): every head, line and block starts on its column's left edge, in every look and at every width ---- */
/* the closing: its column, form row and counter */
.dir-lounge #boarding > .wrap:not(.secno){align-items:flex-start !important;text-align:left !important}
.dir-lounge #boarding > .wrap:not(.secno) > div[style*="justify-content:center"]{justify-content:flex-start !important}
.dir-lounge #boarding .trust,.dir-lounge .dark .trust{justify-content:flex-start}
/* the reviews' head */
.dir-lounge.rev-wall #quotes > .wrap:not(.secno) > div:first-child{align-items:flex-start;text-align:left}
/* the crew's and the FAQ's heads, and the crew's story (Product, In-flight magazine, First-class lounge) */
.dir-lounge:is(.lk-prod,.lk-mag,.lk-lng) #founders > .wrap:not(.secno) > div:first-child,.dir-lounge:is(.lk-prod,.lk-mag,.lk-lng) #faq .faq-wrap > div:first-child{align-items:flex-start;text-align:left;margin:0}
.dir-lounge:is(.lk-prod,.lk-mag,.lk-lng) #founders .story{text-align:left}
/* section signs: In-flight magazine's name with its rule running on to the right; First-class lounge's between diamonds, at the left */
.dir-lounge:is(.lk-mag,.lk-lng) #v-lounge-home .secno{justify-content:flex-start}
.dir-lounge.lk-mag #v-lounge-home .secno::before{display:none}
/* First-class lounge: the hero, its keylines, the crew, the reviews and the ask card */
.dir-lounge.lk-lng #v-lounge-home #top .hero-copy{align-items:flex-start;text-align:left}
.dir-lounge.lk-lng #v-lounge-home #top .hero-copy h1{text-align:left;margin-left:0;margin-right:0}
.dir-lounge.lk-lng #v-lounge-home #top .wl-wrap{align-items:stretch}
.dir-lounge.lk-lng #v-lounge-home #top .wl-wrap > .trust{justify-content:flex-start}
.dir-lounge.lk-lng #v-lounge-home #top .lede::after{margin:26px 0 0}
.dir-lounge.lk-lng #founders > .wrap:not(.secno) > div:first-child::after,.dir-lounge.lk-lng.rev-wall #quotes > .wrap:not(.secno) > div:first-child::after,.dir-lounge.lk-lng #faq .faq-wrap > div:first-child::after{margin:14px 0 0}
.dir-lounge.lk-lng .crew .txt{align-items:flex-start;text-align:left}
.dir-lounge.lk-lng .crew .txt .eyebrow{justify-content:flex-start}
.dir-lounge.lk-lng .qw{text-align:left;align-items:flex-start}
.dir-lounge.lk-lng .qw .qft{justify-content:flex-start}
.dir-lounge.lk-lng .ask{text-align:left}
/* the closing's invitation frame starts on the content's left edge, as every other section does */
.dir-lounge.lk-lng #boarding{--wpad:40px}
@media (max-width:1299px){.dir-lounge .rail-on #boarding,.dir-lounge.rail-on #boarding{--wpad:68px}}
@media (max-width:720px){.dir-lounge .rail-on #boarding,.dir-lounge.rail-on #boarding{--wpad:20px}}
@media (min-width:641px){.dir-lounge.lk-lng #boarding > .wrap:not(.secno){margin-left:calc(max(0px, (100% - 1160px) / 2) + var(--wpad));margin-right:auto}}
/* phones: the hero (Hero Simple centred it) and the magazine's masthead line */
@media (max-width:640px){
.dir-lounge.ph-simple #v-lounge-home .hero-copy{align-items:flex-start;text-align:left}
.dir-lounge.ph-simple #v-lounge-home .hero-copy h1{text-align:left}
.dir-lounge.ph-simple #v-lounge-home .hero-copy .lede{margin:0}
.dir-lounge.ph-simple #v-lounge-home .wl-wrap > .trust,.dir-lounge.ph-simple #v-lounge-home .wl-wrap > .store{justify-content:flex-start}
.dir-lounge.lk-mag #top .hero-copy::before{text-align:left}
.dir-lounge .center-m{text-align:left;align-items:flex-start}
}
/* ---- Features (Rob, 2 Oct): a heading to arrive at ("Welcome aboard, Status Runners."), the AI card last, and on the Plan
card a sticker, "Ditch the spreadsheet", with a crying spreadsheet (a plain green grid, no product's mark) ---- */
.dir-lounge #features .feat-head{display:flex;flex-direction:column;gap:12px;max-width:760px;text-align:left}
.dir-lounge #features .feat-head h2,.dir-lounge #features .feat-head .lede{margin:0}
.dir-lounge .sc-card .sc-ditch{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;margin-top:-8px;padding:10px 18px 10px 10px;border-radius:calc(var(--radius,18px) + 2px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16);rotate:-2deg;position:relative;z-index:2}
/* v201: the sheet stands off the card on its white border, and sobs now and then */
.dir-lounge .sc-card .sc-ditch .cry{width:50px;height:50px;flex:none;overflow:visible;margin:-6px 0 -6px -4px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.32)) drop-shadow(0 0 14px rgba(107,230,154,.35));rotate:-6deg;animation:sr-sob 3.2s 1.2s ease-in-out infinite;transform-origin:50% 90%}
.dir-lounge .sc-card .sc-ditch .cry .tear{animation:sr-tear 3.2s 1.2s ease-in infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes sr-sob{0%,40%,100%{transform:none}48%{transform:rotate(-4deg) translateY(-1px)}56%{transform:rotate(3deg)}64%{transform:rotate(-2deg)}72%{transform:none}}
.dir-lounge .sc-card .sc-ditch b{display:block;font:700 15px/1.25 var(--label);letter-spacing:0;color:#F4F6FB}
.dir-lounge .sc-card .sc-ditch i{display:block;font:500 13px/1.3 var(--label);font-style:normal;letter-spacing:0;color:rgba(244,246,251,.72)}
@keyframes sr-tear{0%,55%{transform:none;opacity:1}85%{transform:translateY(5px) scaleY(1.15);opacity:.9}100%{transform:translateY(8px);opacity:0}}
@media (prefers-reduced-motion:reduce){.dir-lounge .sc-card .sc-ditch .cry,.dir-lounge .sc-card .sc-ditch .cry .tear{animation:none}}
@media (max-width:640px){.dir-lounge .sc-card .sc-ditch{margin-top:-12px;padding:8px 14px 8px 8px}.dir-lounge .sc-card .sc-ditch .cry{width:42px;height:42px}}
/* ---- glass (Rob, 2 Oct: "for the following elements we need to align cards underpinning content for consistency and design
elegance: this or that, reviews, flight scroll bar, ask crew, ask your own ... no opaque cards ever - should be
consistently glass / frost with fonts etc that enable clear readability"). One frosted surface, in every look and every
sky: a milky translucent fill, a hairline of light round it, a highlight along its top edge and a soft shadow. No backdrop
blur (it repaints on every frame of a scroll). The words on it take the page's own ink, so they read on a light sky and a
dark one alike. Each look keeps its own corners and type; the journal's paper, tape and tilt and the lounge's double
rule give way to it ---- */
.dir-lounge{--sky-dark:0;--glass-r:24px}
.dir-lounge.theme-dark:not(.col-sky){--sky-dark:1}
.dir-lounge{--page-ink:var(--ink);--page-muted:var(--muted);
--glass:rgba(255,255,255,calc(.38 - .32 * var(--sky-dark)));--glass-chip:rgba(255,255,255,calc(.58 - .46 * var(--sky-dark)));
--glass-line:rgba(255,255,255,calc(.72 - .56 * var(--sky-dark)));--glass-hi:rgba(255,255,255,calc(.85 - .7 * var(--sky-dark)));
--glass-rule:color-mix(in srgb,var(--ink) 15%,transparent);
--glass-shadow:0 22px 48px -14px rgba(16,20,52,calc(.18 + .26 * var(--sky-dark))),0 2px 8px rgba(16,20,52,calc(.05 + .12 * var(--sky-dark)))}
.dir-lounge.lk-term{--glass-r:10px}
.dir-lounge.lk-mag{--glass-r:6px}
.dir-lounge.lk-jrn{--glass-r:10px}
.dir-lounge.lk-lng{--glass-r:2px}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home :is(.tot2,.qw:not(.vid),.ask,.latest,.sp-card),.dir-lounge.dir-lounge.dir-lounge #v-lounge-home #faq .faq{
background:var(--glass) !important;border:1px solid var(--glass-line) !important;border-radius:var(--glass-r) !important;
box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-shadow) !important;outline:0 !important;rotate:none !important;
--ink:var(--page-ink) !important;--muted:color-mix(in srgb,var(--page-muted) calc(100% - 70% * var(--sky-dark)),var(--page-ink)) !important;--line:var(--glass-rule) !important;color:var(--ink) !important}
.dir-lounge.dir-lounge.dir-lounge.lk-jrn #v-lounge-home :is(.qw,.ask,.tot2)::before,.dir-lounge.dir-lounge.dir-lounge.lk-jrn #v-lounge-home :is(.qw,.ask,.tot2)::after{display:none !important}
/* the reviews: one padding, the reviewer's code an ink tile with the sky's colour in it, as the logo's are */
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .qw:not(.vid){padding:24px 26px 22px !important;gap:14px}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .qw .qav{background:var(--ink) !important;color:var(--bg) !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .qw .qh div span,.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .qw .qft em{color:var(--muted) !important;opacity:1}
/* the flight rail: a glass pill */
.dir-lounge.dir-lounge.dir-lounge .rail{background:var(--glass-chip) !important;border:1px solid var(--glass-line) !important;border-radius:min(var(--glass-r),999px) !important;
box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 28px -10px rgba(16,20,52,calc(.22 + .24 * var(--sky-dark))) !important}
.dir-lounge.dir-lounge.dir-lounge.lk-prod .rail{border-radius:999px !important}
/* Ask the crew: the questions on one card, a rule between them */
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home #faq .faq{padding:4px 28px !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home #faq .faq details{background:none !important;box-shadow:none !important;border:0 !important;border-bottom:1px solid var(--line) !important;border-radius:0 !important;margin:0 !important;padding:0 !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home #faq .faq details:last-of-type{border-bottom:0 !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home #faq .faq summary{color:var(--ink)}
/* Ask your own: the same card; its fields stay white, so the words in them read */
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home :is(.ask,.latest){padding:26px 28px !important}
/* This or that: one card, each question on its own row; the answers as chips */
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2{padding:20px 28px 14px !important;gap:0 !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .thead{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:4px}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .trow{padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--page-ink) 8%,transparent)}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .trow:last-child{border-bottom:0}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .pill{background:var(--glass-chip) !important;border:1px solid var(--glass-line);color:var(--ink) !important;box-shadow:0 1px 2px rgba(16,20,52,.06)}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .q{color:var(--muted) !important;font-size:14px}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .who{color:var(--ink)}
.dir-lounge.dir-lounge.dir-lounge.lk-lng #v-lounge-home .tot2 .pill,.dir-lounge.dir-lounge.dir-lounge.lk-term #v-lounge-home .tot2 .pill,.dir-lounge.dir-lounge.dir-lounge.lk-mag #v-lounge-home .tot2 .pill,.dir-lounge.dir-lounge.dir-lounge.lk-jrn #v-lounge-home .tot2 .pill{border-radius:calc(var(--glass-r) * .6)}
@media (max-width:640px){
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2{padding:16px 16px 10px !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home #faq .faq{padding:2px 18px !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home :is(.ask,.latest){padding:22px 18px !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .qw:not(.vid){padding:20px 20px 18px !important}
}
/* ---- the crew (Rob, 2 Oct) ---- */
/* This or that's heading: "Rob vs Frank" */
.dir-lounge #founders .tot-h{margin:0 0 8px;font-size:clamp(24px,2.6vw,32px);line-height:1.15;text-wrap:balance}
.dir-lounge #founders .tot-wrap{align-items:stretch}
.dir-lounge #founders .tot2{margin:0}
/* the story, printed on a boarding pass from the spreadsheet to Status Runner: frosted, the stub torn along its dashes,
notched at both ends of the tear (the shadow is drawn round the notches, so it sits on the wrapper) */
.dir-lounge .story-pass{max-width:880px;width:100%;filter:drop-shadow(0 18px 30px rgba(16,20,52,calc(.12 + .2 * var(--sky-dark))))}
.dir-lounge .story-pass .sp-card{--stub:176px;display:flex;position:relative;padding:0 !important;box-shadow:inset 0 1px 0 var(--glass-hi) !important;
-webkit-mask:radial-gradient(circle at calc(100% - var(--stub)) 0,transparent 13px,#000 13.5px) top/100% 51% no-repeat,radial-gradient(circle at calc(100% - var(--stub)) 100%,transparent 13px,#000 13.5px) bottom/100% 51% no-repeat;
mask:radial-gradient(circle at calc(100% - var(--stub)) 0,transparent 13px,#000 13.5px) top/100% 51% no-repeat,radial-gradient(circle at calc(100% - var(--stub)) 100%,transparent 13px,#000 13.5px) bottom/100% 51% no-repeat}
.dir-lounge .story-pass .sp-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:20px;padding:26px 32px 24px}
.dir-lounge .story-pass .sp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dir-lounge .story-pass :is(.sp-k,.sp-end i,.sp-fields i){font:700 11px/1 var(--label);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dir-lounge .story-pass .sp-air{display:inline-flex;align-items:center;gap:9px;font:800 14px/1 "Barlow Condensed",var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.dir-lounge .story-pass .sp-logo{flex:none;width:auto;height:24px;color:var(--ink)}
/* v199 (Rob, 3 Oct: "the plane between spreadsheet and status runner ... line up with text better"): the route is a grid, labels
over words, so the path shares the words' own line and the plane sits on the middle of their capitals */
.dir-lounge .story-pass .sp-route{display:grid;grid-template-columns:auto minmax(56px,1fr) auto;align-items:end;column-gap:16px;row-gap:8px}
.dir-lounge .story-pass .sp-end{display:contents}
.dir-lounge .story-pass{--sp-dy:.025em}
.dir-lounge .story-pass .sp-end i{grid-row:1}
.dir-lounge .story-pass .sp-end b{grid-row:2}
.dir-lounge .story-pass .sp-end:not(.sp-to) > *{grid-column:1}
.dir-lounge .story-pass .sp-to > *{grid-column:3}
.dir-lounge .story-pass .sp-end b{font:800 clamp(30px,3.7vw,46px)/.92 "Barlow Condensed",var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
/* "TO" sits over the start of its word (Rob, 2 Oct, v198) */
.dir-lounge .story-pass .sp-to{align-items:flex-start;text-align:left}
.dir-lounge .story-pass .sp-path{grid-row:2;grid-column:2;align-self:stretch;display:flex;align-items:center;gap:10px;min-width:0;font-size:clamp(30px,3.7vw,46px);transform:translateY(var(--sp-dy,0em))}
.dir-lounge .story-pass .sp-dash{flex:1 1 0;height:0;border-top:2px dashed color-mix(in srgb,var(--ink) 38%,transparent)}
.dir-lounge .story-pass .sp-plane{flex:none;width:26px;height:26px;fill:var(--ink)}
.dir-lounge .story-pass .sp-fields{display:flex;flex-wrap:wrap;gap:14px 40px;padding-top:18px;border-top:1px solid var(--line)}
.dir-lounge .story-pass .sp-fields div{display:flex;flex-direction:column;gap:7px}
.dir-lounge .story-pass .sp-fields b{font:700 16px/1.15 var(--label);color:var(--ink)}
.dir-lounge .story-pass .sp-fields .sp-seat{display:none}
.dir-lounge .story-pass .live{display:none}
.dir-lounge.launched .story-pass .pre{display:none}
.dir-lounge.launched .story-pass .live{display:inline}
.dir-lounge .story-pass .sp-stub{flex:0 0 var(--stub);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px 24px 22px;border-left:2px dashed color-mix(in srgb,var(--ink) 24%,transparent);box-sizing:border-box}
.dir-lounge .story-pass .sp-stub b{font:800 46px/1 "Barlow Condensed",var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.dir-lounge .story-pass .sp-code{margin-top:12px;font:400 46px/1 "Libre Barcode 128 Text",monospace;color:var(--ink);opacity:.82;white-space:nowrap;overflow:hidden}
/* phones (v198, Rob: "does not look like a boarding pass at all on phone"): a wallet pass. A header band, from and to side by
side with the plane between, the fields in a grid, the stub torn off along a dashed line notched at both edges, the fare
and the barcode on it */
@media (max-width:640px){
.dir-lounge .story-pass .sp-card{--stubh:78px;flex-direction:column;
-webkit-mask:radial-gradient(circle at 0 calc(100% - var(--stubh)),transparent 12px,#000 12.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% calc(100% - var(--stubh)),transparent 12px,#000 12.5px) right/51% 100% no-repeat;
mask:radial-gradient(circle at 0 calc(100% - var(--stubh)),transparent 12px,#000 12.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% calc(100% - var(--stubh)),transparent 12px,#000 12.5px) right/51% 100% no-repeat}
.dir-lounge .story-pass .sp-main{padding:0 20px 20px;gap:18px}
.dir-lounge .story-pass .sp-top{margin:0 -20px;padding:14px 20px;background:color-mix(in srgb,var(--ink) 7%,transparent);border-bottom:1px solid var(--line)}
.dir-lounge .story-pass .sp-route{grid-template-columns:auto minmax(34px,1fr) auto;column-gap:8px;row-gap:6px}
.dir-lounge .story-pass .sp-path{gap:5px;font-size:clamp(19px,6vw,24px)}
.dir-lounge .story-pass .sp-plane{width:20px;height:20px}
.dir-lounge .story-pass .sp-end b{font-size:clamp(19px,6vw,24px)}
.dir-lounge .story-pass .sp-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding-top:16px}
.dir-lounge .story-pass .sp-fields b{font-size:15px}
.dir-lounge .story-pass .sp-stub{flex:none;height:var(--stubh);flex-direction:row;align-items:center;justify-content:center;padding:0 20px;border-left:0;border-top:2px dashed color-mix(in srgb,var(--ink) 24%,transparent)}
.dir-lounge .story-pass .sp-stub :is(.sp-k,b){display:none}
.dir-lounge .story-pass .sp-code{margin:0;font-size:42px}
.dir-lounge .story-pass .sp-fields .sp-seat{display:flex}
}
/* the windows either side along the cabin wall (v198, Rob: "windows spacing off for window to right"; "shade always down
for windows either side"): two each way at the crew windows' own spacing (one column and the gap), blinds down, cut by
the page's edges, on a wide screen only */
.dir-lounge .crew-side{display:none}
@media (min-width:1200px){
.dir-lounge.crew-win #founders{overflow-x:clip}
.dir-lounge.crew-win #founders .crew-grid{position:relative}
.dir-lounge.crew-win #founders .crew-side{display:block;position:absolute;top:22px;width:292px;height:404px;box-sizing:border-box;pointer-events:none;overflow:hidden;
border:13px solid transparent;border-radius:46% / 33%;
background:linear-gradient(180deg,var(--win-top) 0%,color-mix(in srgb,var(--win-top) 45%,var(--win-bot)) 38%,var(--win-bot) 100%) border-box;
box-shadow:0 0 0 1px var(--win-edge),0 22px 48px rgba(10,12,30,.26)}
.dir-lounge.crew-win #founders .cs-p2{left:calc(-100% - 28px)}
.dir-lounge.crew-win #founders .cs-p1{left:calc(-50% - 4px)}
.dir-lounge.crew-win #founders .cs-n1{left:calc(100% + 68px)}
.dir-lounge.crew-win #founders .cs-n2{left:calc(150% + 92px)}
.dir-lounge.crew-win #founders .crew-side .win-glass{display:block;position:absolute;inset:0;z-index:2;border-radius:44% / 32%;box-shadow:inset 0 0 0 1.5px var(--win-gasket),inset 0 7px 10px -6px rgba(0,0,0,.45)}
.dir-lounge.crew-win #founders .crew-side .win-shade{transform:none}
}
/* the blind: a moulded plastic shade inside the window, ribbed, with a lip and a finger grip at its foot. Up out of sight
while a photo shows; down while the view changes (.shut); always down on the windows either side */
.win-shade{display:none}
.dir-lounge.crew-win :is(.crew .rot,.crew-side) .win-shade{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateY(-101%);transition:transform .95s cubic-bezier(.65,0,.35,1);
background:repeating-linear-gradient(180deg,var(--shade-rib,rgba(255,255,255,.22)) 0 1px,rgba(0,0,0,0) 1px 9px),linear-gradient(180deg,var(--shade-a,#EDEAF1) 0%,var(--shade-b,#E0DCE7) 78%,var(--shade-c,#D3CEDC) 100%);
box-shadow:0 3px 8px rgba(0,0,0,.28)}
.dir-lounge.crew-win :is(.crew .rot,.crew-side) .win-shade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;background:linear-gradient(180deg,var(--shade-c,#D3CEDC),var(--shade-d,#C4BECF));border-top:1px solid rgba(0,0,0,.09)}
.dir-lounge.crew-win :is(.crew .rot,.crew-side) .win-shade::before{content:"";position:absolute;z-index:1;left:50%;bottom:5%;width:38px;height:7px;margin-left:-19px;border-radius:4px;background:rgba(0,0,0,.2);box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.35)}
.dir-lounge.crew-win.theme-dark,.dir-lounge.crew-win.col-dd,.dir-lounge.crew-win.col-du{--shade-a:#4A4F5C;--shade-b:#3E4350;--shade-c:#353A46;--shade-d:#2C303B;--shade-rib:rgba(255,255,255,.06)}
.dir-lounge.crew-win .crew .rot.shut .win-shade{transform:translateY(0)}
.dir-lounge.crew-win .crew .rot.shut img{transition:none !important}
/* phone: the window not being read has its blind half down; a tap raises it */
@media (max-width:640px){.dir-lounge.crew-win .crew:not(.sel) .rot:not(.shut) .win-shade{transform:translateY(-46%)}}
@media (prefers-reduced-motion:reduce){.dir-lounge.crew-win :is(.crew .rot,.crew-side) .win-shade{transition:none}}
/* v199 (Rob, 3 Oct: "window dimensions not staying consistent across different screen sizes ... if shrunk squished enough
... show one window"): every window keeps the cabin's own shape, 292 wide to 404 high, and only its size changes. Two
sit side by side while each can be 190px wide or more; below that one shows, with the two names under it to swap */
.dir-lounge.crew-win .crew .rot{height:auto !important;aspect-ratio:292 / 404}
@media (max-width:640px){
.dir-lounge.crew-win .crew .rot{width:calc(100% - 8px) !important;max-width:236px;justify-self:center;height:auto !important;aspect-ratio:292 / 404;border-radius:46% / 33% !important}
}
.dir-lounge .crew-pick{display:none}
@media (max-width:480px){
.dir-lounge.crew-win .crew-grid{grid-template-columns:minmax(0,1fr) !important}
.dir-lounge.crew-win .crew:not(.sel) .rot{display:none !important}
.dir-lounge.crew-win .crew.sel .rot{grid-row:1;grid-column:1;width:min(66vw,250px) !important;max-width:none}
.dir-lounge.crew-win .crew .txt{grid-row:3}
.dir-lounge.crew-win .crew-pick{grid-row:2;grid-column:1;justify-self:center;display:flex;gap:6px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.dir-lounge .crew-pick button{-webkit-appearance:none;appearance:none;margin:0;padding:9px 18px 8px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;
font:700 14px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:background .3s ease,color .3s ease}
.dir-lounge .crew-pick button[aria-pressed="true"]{background:var(--ink);color:var(--bg,#fff)}
.dir-lounge .crew-pick button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
}
/* ---- the reviews: a line across the screen that moves on by itself, card by card (Rob, 2 Oct: "change from a wall to a
rotating line of reviews that move from one side of screen to other - user can click next or back"). The line runs from
one edge of the screen to the other; its cards start on the content's left edge. new.js (Reel) moves it ---- */
.dir-lounge #quotes{overflow-x:clip}
.dir-lounge.rev-wall .qwall{column-count:auto !important;column-rule:none !important;position:relative}
.dir-lounge #quotes .qr-view{margin:0 calc(50% - 50vw);padding:14px calc(50vw - 50%) 34px;overflow:hidden;touch-action:pan-y;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(24px,6vw,96px),#000 calc(100% - clamp(16px,4vw,64px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 clamp(24px,6vw,96px),#000 calc(100% - clamp(16px,4vw,64px)),transparent 100%)}
.dir-lounge #quotes .qr-track{display:flex;align-items:stretch;column-gap:24px;width:max-content;will-change:transform}
.dir-lounge #quotes .qr-track > .qw{flex:0 0 auto;width:min(380px,calc(100vw - 72px));margin:0 !important;break-inside:auto}
.dir-lounge #quotes .qr-track > .qw .qft{margin-top:auto}
.dir-lounge #quotes .qr-track > .qw blockquote{text-wrap:pretty}
.dir-lounge #quotes .qr-nav{display:flex;gap:12px;margin-top:-4px}
.dir-lounge #quotes .qr-b{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:50%;cursor:pointer;color:var(--ink);
background:var(--glass-chip);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 22px -10px rgba(16,20,52,calc(.3 + .2 * var(--sky-dark)));transition:transform .15s ease,background-color .15s ease}
.dir-lounge #quotes .qr-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dir-lounge #quotes .qr-b:hover{transform:translateY(-1px);background:var(--glass-hi)}
.dir-lounge #quotes .qr-b:active{transform:translateY(0) scale(.96)}
.dir-lounge #quotes .qr-b:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dir-lounge.lk-lng #quotes .qr-b,.dir-lounge.lk-term #quotes .qr-b{border-radius:calc(var(--glass-r) * .8)}
@media (max-width:640px){.dir-lounge #quotes .qr-track{column-gap:14px}.dir-lounge #quotes .qr-view{padding-bottom:26px}}
/* ---------- v197 (2 Oct): the showcase's new screens and mini cards ---------- */
/* Plan: the climb to Gold, not a ring (Rob: "something that is diff to qantas app"); the mini card offers the runs that fill the gap */
.s8 .s8top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:8px 16px 0}
.s8 .s8n{display:flex;align-items:baseline;gap:6px}
.s8 .s8n b{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1}
.s8 .s8n span{font-size:11px;font-weight:600;color:var(--s-mute)}
.s8 .s8tier{flex:none;display:inline-flex;align-items:center;gap:4px;margin-bottom:3px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--s-acc) 12%,transparent);color:var(--s-acc);font-size:9.5px;font-weight:600;white-space:nowrap}
.s8 .s8tier b{font-size:8.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.s8 .s8c{margin:12px 16px 0;padding:11px 10px 10px;border-radius:16px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.s8 .s8c .lbl{display:block;padding:0 2px 6px;text-transform:none}
.s8 .s8g{display:block;width:100%;height:auto;overflow:visible;font-family:var(--body)}
.s8 .s8gl{fill:none;stroke:var(--s-mute);stroke-width:1.2;stroke-dasharray:3 3;opacity:.75}
.s8 .s8gt{fill:var(--s-ink);font-size:8.5px;font-weight:800}
.s8 .s8gr{stroke:var(--s-line);stroke-width:1;opacity:.8}
.s8 .s8yl{fill:var(--s-mute);font-size:7.5px;font-weight:600;text-anchor:end}
.s8 .s8gap{fill:var(--s-acc);opacity:0}
.s8 .s8gapt{fill:var(--s-acc);font-size:8px;font-weight:800;opacity:0}
.s8 .s8ax{stroke:var(--s-line);stroke-width:1.2}
.s8 .s8b{fill:none;stroke:var(--s-acc);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.s8 .s8fc{fill:none;stroke:var(--s-mute);stroke-width:1.6;stroke-dasharray:1.5 4;stroke-linecap:round;opacity:0}
.s8 .s8run{opacity:0;transform:translateY(6px)}
.s8 .s8rl{fill:none;stroke:var(--s-good);stroke-width:2;stroke-dasharray:3 3;stroke-linecap:round}
.s8 .s8rd{fill:var(--s-good)}
.s8 .s8rk{fill:none;stroke:var(--s-card);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.s8 .s8rt{fill:var(--s-good);font-size:8px;font-weight:800;text-anchor:end}
.s8 .s8now{fill:var(--s-card);stroke:var(--s-acc);stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center}
.s8 .s8m{fill:var(--s-mute);font-size:8px;font-weight:600}
.s8 .s8today{fill:var(--s-ink);font-weight:800}
.s8 .s8mid{text-anchor:middle}
.s8 .s8end{text-anchor:end}
.s8 .s8k{display:flex;justify-content:space-between;gap:6px;padding:8px 2px 0;font-size:9.5px;color:var(--s-mute)}
.s8 .s8k span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.s8 .s8k b{color:var(--s-ink);font-weight:800}
.s8 .s8k i{width:9px;height:9px;border-radius:3px;flex:none}
.s8 .k1{background:var(--s-flown)}
.s8 .k2{background:var(--s-acc)}
.s8 .k3{background:color-mix(in srgb,var(--s-acc) 18%,transparent);box-shadow:inset 0 0 0 1px var(--s-acc)}
.s8.go .s8now{animation:hspop .4s .25s cubic-bezier(.2,1.3,.4,1) forwards}
.s8.go .s8b{animation:hsdraw .8s .45s cubic-bezier(.4,0,.2,1) forwards}
.s8.go .s8fc{animation:hsfade .4s 1.2s forwards;--o:.8}
.s8.go .s8gap{animation:hsfade .5s 1.45s forwards;--o:.16}
.s8.go .s8gapt{animation:hsin .4s 1.65s forwards}
.s8.go .s8run{animation:hsrise .55s 2.3s cubic-bezier(.2,.8,.2,1) forwards}
.s8.go .sub{animation:hsin .3s .5s forwards}
.s8.go .mini{animation-delay:.5s}
.s8.go .mr:nth-child(1){animation-delay:.6s}
.s8.go .mr:nth-child(2){animation-delay:.72s}
.s8.go .mr:nth-child(3){animation-delay:.84s}
.sc-card .panel .prun{display:flex;align-items:center;gap:10px;padding:9px 0 8px;border-top:1px solid rgba(255,255,255,.09)}
.sc-card .panel .prun div{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.sc-card .panel .prun b{display:flex;align-items:center;gap:7px;font:700 13px/1.2 var(--body);color:#fff}
.sc-card .panel .prun span{font-size:11px;line-height:1.3;color:rgba(232,237,243,.68)}
.sc-card .panel .prun em{flex:none;font:800 15px/1 var(--body);font-style:normal;color:#fff}
.sc-card .panel .prun em small{font-size:10px;font-weight:600;color:rgba(232,237,243,.62);margin-left:1px}
.sc-card .panel .ptag{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.02em;padding:3px 7px;border-radius:999px;color:#9BF0C9;background:rgba(62,214,160,.16)}
.sc-card .panel .ptag.pt2{color:#C9E2FA;background:rgba(143,195,242,.16)}
.sc-card .pn-gap{width:280px;padding-bottom:10px}
.sc-card .panel .prun b{flex-wrap:wrap;row-gap:3px}
.sc-card .pn-gap .pl{margin-bottom:6px}
/* Cards: the bonus and the renewal reminder (a date, never a countdown), two mini cards stacked as one */
.sc-card .panel.pstack{width:276px;padding:0;background:none;border:0;box-shadow:none}
.sc-card .pstack .pc{position:relative;width:248px;border-radius:22px;padding:16px 18px;background:rgba(22,26,34,.88);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04)}
.sc-card .pstack .pc + .pc{margin:-12px 0 0 28px;background:rgba(24,30,42,.96);opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s 1.4s,transform .9s 1.4s cubic-bezier(.2,.8,.2,1)}
.sc-card.in .pstack .pc + .pc{opacity:1;transform:none}
.sc-card .pn-bonus .big{margin:0;font-size:26px}
/* the renewal reminder, v199: every row on one line (Rob, 3 Oct); date and fee as a two-row table, values in a column */
.sc-card .pn-renew .pl{display:flex;align-items:center;color:#BFDCF5;white-space:nowrap}
.sc-card .pn-renew .prn{display:block;font:700 14px/1.25 var(--body);color:#fff;white-space:nowrap}
.sc-card .pn-renew .prt{display:grid;grid-template-columns:max-content max-content;column-gap:14px;row-gap:3px;margin:8px 0 9px;font:500 12px/1.3 var(--body);white-space:nowrap}
.sc-card .pn-renew .prt span{color:rgba(232,237,243,.66)}
.sc-card .pn-renew .prt b{font-weight:700;color:#fff}
.sc-card .pn-renew .pn{display:block;color:#BFDCF5;font-weight:600;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sc-card .pstack .pc + .pc{transition:none}}
/* Compare notes: the phone rolls through three screens; the panel lights the one on show */
.sc-card .roll{position:absolute;inset:0}
.sc-card .roll .hs{opacity:0;transition:opacity .6s ease}
.sc-card .roll .hs.on{opacity:1}
.sc-card .pn-steps{width:236px;padding:10px 14px 8px;display:flex;flex-direction:column}
.sc-card .pn-steps .stp{position:relative;display:flex;align-items:center;gap:11px;padding:9px 2px 12px;color:rgba(232,237,243,.56);cursor:pointer}
.sc-card .pn-steps .stp b{flex:none;width:23px;height:23px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 11px/1 var(--body);background:rgba(255,255,255,.08);color:rgba(232,237,243,.72)}
.sc-card .pn-steps .stp span{font:600 13.5px/1.25 var(--body)}
.sc-card .pn-steps .stp i{position:absolute;left:36px;right:2px;bottom:4px;height:2px;border-radius:1px;background:rgba(255,255,255,.08);overflow:hidden}
.sc-card .pn-steps .stp i::after{content:"";position:absolute;inset:0;background:#F6AE7F;transform-origin:left;transform:scaleX(0)}
.sc-card .pn-steps .stp.on{color:#fff}
.sc-card .pn-steps .stp.on b{background:#F97A2E;color:#170D0A}
.sc-card .pn-steps .stp.on i::after{animation:stpbar 6s linear forwards}
@keyframes stpbar{to{transform:scaleX(1)}}
/* Import your runs: the app's sources, then the runs it finds */
.s9 .s9l{margin:4px 16px 0;font-size:10.5px;line-height:1.35;color:var(--s-mute)}
.s9 .s9src{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 16px 0}
.s9 .s9t{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:14px;background:var(--s-card);border:1.5px solid transparent;box-shadow:0 4px 14px rgba(0,0,0,.07);opacity:0;transform:translateY(8px)}
.s9 .s9t svg{width:17px;height:17px;margin-bottom:3px;fill:none;stroke:var(--s-acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s9 .s9t b{font-size:11px;font-weight:800}
.s9 .s9t em{font-style:normal;font-size:8.5px;color:var(--s-mute)}
.s9.go .s9t{animation:hsrise .45s cubic-bezier(.2,.8,.2,1) forwards}
.s9.go .s9t:nth-child(2){animation-delay:.08s}
.s9.go .s9t:nth-child(3){animation-delay:.16s}
.s9.go .s9t:nth-child(4){animation-delay:.24s}
.s9.go .s9t.on{animation:hsrise .45s cubic-bezier(.2,.8,.2,1) forwards,s9on .45s .75s forwards}
@keyframes s9on{to{border-color:var(--s-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--s-acc) 16%,transparent),0 4px 14px rgba(0,0,0,.07)}}
.s9 .sub{position:relative}
.s9 .s9scan{position:absolute;left:16px;right:16px;bottom:-4px;height:2px;border-radius:1px;background:var(--s-acc);transform-origin:left;transform:scaleX(0);opacity:0}
.s9.go .s9scan{animation:s9scan 1.1s 1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes s9scan{0%{transform:scaleX(0);opacity:.8}85%{transform:scaleX(1);opacity:.8}100%{transform:scaleX(1);opacity:0}}
.s9.go .sub{animation:hsin .3s .9s forwards}
.s9.go .mini{animation-delay:1.25s}
.s9.go .mr:nth-child(1){animation-delay:1.3s}
.s9.go .mr:nth-child(2){animation-delay:1.6s}
.s9.go .mr:nth-child(3){animation-delay:1.9s}
.s9 .s9ok{flex:none;width:18px;height:18px;border-radius:50%;background:var(--s-goodbg);display:inline-flex;align-items:center;justify-content:center}
.s9 .s9ok svg{width:11px;height:11px;fill:none;stroke:var(--s-good);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.s9 .s9btn{display:flex;align-items:center;justify-content:space-between;margin:12px 16px 0;padding:11px 16px;border-radius:999px;background:#14233B;color:#fff;opacity:0;transform:translateY(8px)}
.theme-dark .s9 .s9btn{background:var(--s-acc);color:var(--s-card)}
.s9 .s9btn b{font-size:11.5px;font-weight:800}
.s9 .s9btn span{font-size:11px;font-weight:700;opacity:.82}
.s9.go .s9btn{animation:hsrise .5s 2.3s cubic-bezier(.2,.8,.2,1) forwards}
/* the home FAQ's right column: the latest answer, the whole card a link to its working (Rob, 2 Oct, v197) */
.dir-lounge .faq-cols > .latest{position:sticky;top:110px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);transition:transform .25s ease}
.dir-lounge .faq-cols > .latest:hover{transform:translateY(-2px)}
.dir-lounge .latest .la-top{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.dir-lounge .latest .la-top .eyebrow{margin:0}
.dir-lounge .latest .la-meta{font-size:13px;color:var(--muted)}
.dir-lounge .latest .la-q{font-family:var(--display);font-weight:var(--display-weight,700);letter-spacing:var(--display-track,-.015em);font-size:22px;line-height:1.2;color:var(--ink);text-wrap:balance}
.dir-lounge .latest .la-a{font-size:16px;line-height:1.45;color:var(--ink);padding:12px 14px;border-radius:calc(var(--glass-r,24px) * .6);background:var(--glass-chip);border:1px solid var(--glass-line)}
/* the card is glass on every sky, so its words take the page's ink (a card's accent shade is set for white cards) */
.dir-lounge .latest .la-top .eyebrow{color:var(--ink)}
.dir-lounge .latest .la-go{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.dir-lounge .latest:hover .la-go{text-decoration-thickness:2px}
.dir-lounge.lk-term .latest .la-q{text-transform:uppercase;font-size:21px;line-height:1.05}
@media (max-width:900px){.dir-lounge .faq-cols > .latest{position:static}}
/* the ask card on the questions page sits in the flow */
.dir-lounge #v-lounge-qa .ask{position:static}
/* v198: runs to fill the gap as the app's compare table, one line a run (Rob: "words spilling onto next line") */
.sc-card .pn-gap .gt{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:16px;align-items:baseline}
.sc-card .pn-gap .gh{font:700 10px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:rgba(232,237,243,.5);padding:2px 0 9px;border-bottom:1px solid rgba(255,255,255,.1)}
.sc-card .pn-gap .gh:nth-child(n+2),.sc-card .pn-gap .gn{text-align:right}
.sc-card .pn-gap .gr{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:10px}
.sc-card .pn-gap .gr b{font:700 13.5px/1.2 var(--body);color:#fff;white-space:nowrap}
.sc-card .pn-gap .gr i{font-style:normal;font-size:11px;line-height:1.25;color:rgba(232,237,243,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-card .pn-gap .gn{font:800 14px/1.2 var(--body);color:#fff;white-space:nowrap;padding-top:10px}
.sc-card .pn-gap .gt > :nth-child(n+7){margin-top:10px;border-top:1px solid rgba(255,255,255,.07)}
/* the leaderboard asks for the app (v198) */
.s6 .gate{border-radius:12px;padding:8px 12px}
.s6 .gate span{font-size:10px;line-height:1.3;font-weight:700;color:var(--s-acc)}
/* v198: the FAQ is the questions only, full width, and its last row opens them all */
.dir-lounge .faq-cols.faq-one{grid-template-columns:minmax(0,1fr);max-width:860px}
.dir-lounge #faq .faq .faq-more{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;color:var(--ink);font-weight:600;text-decoration:none}
.dir-lounge #faq .faq .faq-more .fm-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);font-size:20px;line-height:1;padding-bottom:2px;transition:transform .2s ease}
.dir-lounge #faq .faq .faq-more:hover .fm-x{transform:translateX(3px)}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home #faq .faq details:has(+ .faq-more){border-bottom:1px solid var(--line) !important}
/* phones: the mini cards narrow so they still find room, and each tilted phone shifts so its top corner stays on the card */
@media (max-width:640px){.sc-card .pn-gap{width:240px}.sc-card .panel.pstack{width:244px}.sc-card .pstack .pc{width:218px;padding:14px 16px}.sc-card .pstack .pc + .pc{margin-left:26px}.sc-card.cool .tiltp,.sc-card.sky .tiltp{left:57%}.sc-card.warm .tiltp,.sc-card.dusk .tiltp{left:43%}.sc-card .pn-bonus .big small{display:block;margin:6px 0 0}}
/* the footer's logo answers a click (v198) */
.dir-lounge footer .lf-click{cursor:pointer;-webkit-user-select:none;user-select:none}
/* ---------- This or that (v202, Rob, 4 Oct: "let's get rid of the interactive element"): no voting. Each row shows Rob's pick
on his side in the ink and Frank's on his in the sky's horizon colour ---------- */
.dir-lounge .tot2{--tg-l:var(--ink);--tg-r:color-mix(in srgb,var(--s2,#F6AE7F) 88%,var(--ink));--tg-r-pill:var(--tg-r);--tg-l-ink:var(--bg,#fff);--tg-r-ink:#14181F}
/* on the dark skies the right pick takes light words on a deeper rose: dark words on the mid rose read 2.8 to 4:1 */
.dir-lounge.theme-dark .tot2,.dir-lounge.col-dd .tot2,.dir-lounge.col-du .tot2{--tg-r:color-mix(in srgb,var(--s2,#9A4E6E) 80%,#fff);--tg-r-pill:color-mix(in srgb,var(--tg-r) 85%,#000);--tg-r-ink:var(--ink)}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .pill.l.pick{background:var(--tg-l) !important;border-color:var(--tg-l);color:var(--tg-l-ink) !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .pill.r.pick{background:var(--tg-r-pill) !important;border-color:var(--tg-r-pill);color:var(--tg-r-ink) !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .pill.l.pick svg{stroke:var(--tg-l-ink) !important}
.dir-lounge.dir-lounge.dir-lounge #v-lounge-home .tot2 .pill.r.pick svg{stroke:var(--tg-r-ink) !important}
.dir-lounge .tot2 .pill svg{stroke-width:1.8}
/* words for screen readers only: whose pick each pill is */
.dir-lounge .sro{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ---------- the boarding pass's passenger (v202): first names typed in and deleted, landing on You ---------- */
.dir-lounge .story-pass .sp-fields .sp-pax b{display:inline-flex;align-items:center;min-width:6.4ch;white-space:nowrap}
.dir-lounge .story-pass .sp-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;border-radius:1px;background:currentColor;animation:sp-blink 1.05s steps(1) infinite}
.dir-lounge .story-pass .sp-pax.typing .sp-caret{animation:none}
@keyframes sp-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dir-lounge .story-pass .sp-caret{display:none}}
/* ---------- v201 (3 Oct): Cards rolls the app's own two screens, Find your card then Your card ---------- */
.s6a .s6l,.s6b .s6l,.s05 .s6l{margin:4px 16px 0;font-size:10.5px;line-height:1.35;color:var(--s-mute)}
.s6a .s6q{display:flex;align-items:center;gap:7px;margin:12px 16px 0;padding:8px 10px;border-radius:12px;background:var(--s-card);box-shadow:0 4px 14px rgba(0,0,0,.07);font-size:10.5px;color:var(--s-mute)}
.s6a .s6q svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--s-mute);stroke-width:2.2;stroke-linecap:round}
.hs .cc{position:relative;flex:none;width:34px;height:22px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.22),inset 0 0 0 .5px rgba(255,255,255,.18);overflow:hidden}
.hs .cc::before{content:"";position:absolute;left:5px;top:8px;width:6px;height:5px;border-radius:1.5px;background:linear-gradient(135deg,#F1D98F,#BC9545)}
.hs .cc::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22) 0 30%,transparent 46%)}
.hs .cc.k1{background:linear-gradient(135deg,#34363D,#0E0F12)}
.hs .cc.k2{background:linear-gradient(135deg,#DDE1E7,#98A1AE)}
.hs .cc.k3{background:linear-gradient(135deg,#C9CED8,#7F8898)}
.hs .cc.k4{background:linear-gradient(135deg,#454A57,#17191F)}
.hs .cc.wb{background:linear-gradient(135deg,#2A2C33,#060708)}
.hs .s6list{padding-bottom:4px}
.hs .s6list .mr{gap:10px;padding:7px 0}
.hs .s6list .mr b,.hs .s6tl .mr div b{line-height:1.2}
.s6a.go .mini,.s6b.go .mini{animation-delay:.25s}
.s6a.go .mr:nth-child(1){animation-delay:.3s}
.s6a.go .mr:nth-child(2){animation-delay:.38s}
.s6a.go .mr:nth-child(3){animation-delay:.46s}
.s6a.go .mr:nth-child(4){animation-delay:.54s}
.s6a.go .mr:nth-child(5){animation-delay:.62s}
.s6a.go .mr:nth-child(6){animation-delay:.7s}
.s6b .s6card{margin:12px 16px 0;border-radius:14px;background:var(--s-card);box-shadow:0 4px 14px rgba(0,0,0,.07);overflow:hidden}
.s6b .s6top{display:flex;align-items:center;gap:10px;padding:11px 11px 9px}
.s6b .s6top .cc{width:48px;height:31px;border-radius:5px}
.s6b .s6top .cc::before{left:7px;top:11px;width:8px;height:7px}
.s6b .s6top div{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.s6b .s6top b{font-size:11.5px;font-weight:800;line-height:1.2}
.s6b .s6top span{font-size:8.5px;color:var(--s-mute)}
.s6b .s6ap{display:flex;align-items:center;gap:8px;margin:0 11px;padding:8px 0;border-top:1px solid var(--s-line)}
.s6b .s6ap i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--s-line)}
.s6b .s6ap svg{width:12px;height:12px;fill:none;stroke:var(--s-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s6b .s6ap b{flex:1;font-size:10.5px;font-weight:700}
.s6b .s6ap span{font-size:10.5px;color:var(--s-ink)}
.s6b .s6sc{display:flex;align-items:center;gap:5px;padding:6px 11px;background:var(--s-goodbg);color:var(--s-good);font-size:8.5px;opacity:0}
.s6b .s6sc svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.s6b .s6sc b{font-weight:800}
.s6b.go .s6sc{animation:hsin .4s .45s forwards}
.s6b .s6tl .mr{gap:10px;padding:7px 0;align-items:flex-start}
.s6b .s6d{flex:none;width:44px;display:flex;flex-direction:column;gap:1px;font-style:normal}
.s6b .s6d b{font-size:10.5px;font-weight:800;white-space:nowrap}
.s6b .s6d small{font-size:8px;color:var(--s-mute)}
.s6b.go .sub{animation-delay:.5s}
.s6b.go .mr:nth-child(1){animation-delay:.6s}
.s6b.go .mr:nth-child(2){animation-delay:.72s}
.s6b.go .mr:nth-child(3){animation-delay:.84s}
.s6b.go .mr:nth-child(4){animation-delay:.96s}
@media (prefers-reduced-motion:reduce){.s6b .s6sc{opacity:1 !important}}
/* v201: the header's button brings the reader to the form: the field takes the focus and the form rings once */
.dir-lounge form.wl > div.wl-ping{animation:wlping 1.4s cubic-bezier(.2,.8,.2,1)}
@keyframes wlping{0%{outline:3px solid color-mix(in srgb,var(--btn-bg,#14233B) 55%,transparent);outline-offset:0}100%{outline:3px solid transparent;outline-offset:14px}}
/* ---------- v202 (Rob, 4 Oct: "get rid of all eyebrows"): no eyebrow on any page, nor the looks' section numbers and the
kickers over the hero's words; build.py moved the labels that carried meaning into their headings ---------- */
.dir-lounge .eyebrow,.dir-lounge #v-lounge-home .secno{display:none !important}
.dir-lounge #top .hero-copy::before{content:none !important;display:none !important}
/* the analysis page's two table titles, and the answer's two parts, as plain headings */
.dir-lounge .tcap{margin:0;font:700 17px/1.3 var(--label);letter-spacing:0;text-transform:none;color:inherit}
.dir-lounge .qa-sub{margin:0;font:700 18px/1.25 var(--label) !important;letter-spacing:0;text-transform:none;color:inherit}
/* ---------- v202: the FAQ page. Every question grouped by theme on the left; Ask your own on the right, held in view; it
closes with the email field ---------- */
.dir-lounge .fqp-wrap{display:flex;flex-direction:column;gap:44px}
.dir-lounge .fqp-head{display:flex;flex-direction:column;gap:16px;max-width:760px}
.dir-lounge .fqp-head h1,.dir-lounge .fqp-head .lede{margin:0}
.dir-lounge .fqp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:56px;align-items:start}
.dir-lounge .fqp-list{display:flex;flex-direction:column;gap:48px;min-width:0}
.dir-lounge .fqp-ask{position:sticky;top:calc(var(--hd-h,84px) + 24px)}
.dir-lounge .fqp-ask .card.ask{margin:0}
.dir-lounge .fq-grp{display:flex;flex-direction:column;gap:14px}
.dir-lounge .fq-h{margin:0;font-size:28px !important;line-height:1.15}
.dir-lounge .fqp .faq{border-top:1px solid var(--line)}
.dir-lounge .fqp .faq details{border-bottom:1px solid var(--line);border-radius:0}
.dir-lounge .fqp .qa-list{border-top:1px solid var(--line)}
/* one row style for every question: the answered one, the briefing and the ones in the works read as the plain questions do */
.dir-lounge .fqp .qa-item > summary,.dir-lounge .fqp .qa-link{padding:20px 0;row-gap:6px}
.dir-lounge .fqp .qa-q{font:600 20px/1.3 var(--body) !important;letter-spacing:0;color:var(--ink)}
.dir-lounge .fqp .qa-a{grid-row:2;font-size:16px}
.dir-lounge .fqp .qa-meta{grid-row:3;font:500 13px/1.3 var(--label);letter-spacing:0;text-transform:none;color:var(--muted)}
.dir-lounge .fqp .qa-meta time{color:inherit}
.dir-lounge .fqp .qa-meta span::before{content:"\00B7";margin-right:10px}
.dir-lounge .fqp .qa-x{grid-row:1;align-self:start;width:auto;height:auto;border:0;border-radius:0;font:400 22px/1.2 var(--body);color:var(--accent-text);background:none !important}
.dir-lounge .fqp .qa-link{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.dir-lounge .fqp .qa-link:hover .qa-q{text-decoration:underline;text-underline-offset:3px}
.dir-lounge .fqp .qa-soon .qa-q{color:var(--muted)}
.dir-lounge .fqp .faq .fa a{color:var(--accent-text);font-weight:600}
@media (max-width:960px){.dir-lounge .fqp-cols{grid-template-columns:minmax(0,1fr);gap:44px}.dir-lounge .fqp-ask{position:static}}
/* the close: the email field right there */
.dir-lounge .fq-close{border-radius:var(--radius,12px);padding:40px;display:flex;flex-direction:column;gap:12px}
.dir-lounge .fq-close h2{margin:0;font-size:clamp(30px,4vw,44px) !important;line-height:1.08}
.dir-lounge .fq-close .lede{margin:0}
.dir-lounge form.wl-in{margin-top:12px;max-width:540px}
.dir-lounge form.wl-in > div{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--field,rgba(255,255,255,.09));box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.22)}
.dir-lounge form.wl-in .field{flex:1 1 auto;min-width:0;height:48px;border:0 !important;background:transparent !important;padding:0 6px 0 16px;box-shadow:none !important}
.dir-lounge form.wl-in .btn{flex:none;height:48px;padding:0 20px}
@media (max-width:440px){.dir-lounge .fq-close{padding:28px 22px}.dir-lounge form.wl-in > div{flex-direction:column;border-radius:22px;padding:6px}.dir-lounge form.wl-in .btn{width:100%}}
/* ---------- v202: the Cards phone opens on the app's 05, eight cards turning on a ring, the front one largest ---------- */
.s05 .s05h{padding:14px 16px 0;font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.s05 .cc5{position:relative;height:150px;margin:10px 0 0}
.s05 .cc5-c{position:absolute;left:50%;top:60%;width:108px;height:68px;border-radius:7px;will-change:transform;transform:translate(-50%,-50%)}
.s05 .cc5-c::before{left:11px;top:25px;width:14px;height:11px;border-radius:3px}
.s05 .cc5-c::after{background:linear-gradient(115deg,rgba(255,255,255,.26) 0 26%,transparent 44%),radial-gradient(120% 90% at 100% 100%,rgba(255,255,255,.12),transparent 60%)}
.hs .cc.k5{background:linear-gradient(135deg,#EAD49B,#B78D3D)}
.hs .cc.k6{background:linear-gradient(135deg,#3C72BA,#18335F)}
.hs .cc.k7{background:linear-gradient(135deg,#7D3140,#38111A)}
.hs .cc.k8{background:linear-gradient(135deg,#EBC1B2,#B67868)}
.s05 .s05b{position:absolute;left:16px;right:16px;bottom:26px;display:flex;flex-direction:column;align-items:center;gap:10px}
.s05 .s05b b{display:block;width:100%;padding:11px 0;border-radius:999px;background:var(--s-ink);color:var(--s-card);font-size:12px;font-weight:700;text-align:center}
.s05 .s05b span{font-size:11px;font-weight:700;color:var(--s-ink)}
/* ---------- v203 (Rob, 4 Oct: "more 'aha' - as in showing the value and immediately connecting to use case"): each phone
shows the moment, its mini card carries the payoff, in the card's own colour ---------- */
.sc-card.cool{--pay:#3ED6A0;--pay-t:#9BF0C9}
.sc-card.sky{--pay:#8FC3F2;--pay-t:#C9E2FA}
.sc-card.warm{--pay:#F7924F;--pay-t:#FBD3B4}
.sc-card.dusk{--pay:#F6AE7F;--pay-t:#F8CFB2}
.sc-card{--psh:0 30px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.04);--plit:0 30px 60px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--pay,#fff) 60%,transparent),0 0 34px color-mix(in srgb,var(--pay,#fff) 28%,transparent);--pflash:0 30px 60px rgba(0,0,0,.4),0 0 0 1.5px var(--pay,#fff),0 0 56px color-mix(in srgb,var(--pay,#fff) 55%,transparent)}
.sc-card .panel.pay{width:256px;padding:15px 18px 14px}
.sc-card .pay .pss{display:grid}
.sc-card .pay .ps{grid-area:1/1;min-width:0}
.sc-card .pay .pl,.sc-card .pay2 .pl{display:flex;align-items:center;margin-bottom:9px;color:var(--pay-t);white-space:nowrap}
.sc-card .pay .big,.sc-card .pay2 .big{margin:0 0 9px;white-space:nowrap}
.sc-card .pay .pn,.sc-card .pay2 .pn{white-space:nowrap}
.sc-card .pay .big{transform-origin:0 70%}
@keyframes paypop{from{transform:scale(.86);opacity:.2}to{transform:none;opacity:1}}
/* Plan (v205, Rob, 4 Oct: "what's different here is that we can see the gap ... booked but not yet flown ... planned but not
yet booked ... forecast when you will get to your desired status goal"): the dial in three looks, flown solid, booked
hatched, planned outlined, Gold pinned where the forecast lands; under it the year ahead, month by month. The lead is an
option: Forecast date or Flown vs forecast. The card's clock is 10 s */
.s8f{--fe:var(--s-acc);--fb:color-mix(in srgb,var(--s-acc) 70%,transparent);--fbb:color-mix(in srgb,var(--s-acc) 13%,transparent);--fp:var(--s-good);--fpb:color-mix(in srgb,var(--s-good) 15%,transparent);--fg:color-mix(in srgb,var(--s-ink) 9%,transparent);--fgold:#D9A62E;--fgt:#86610D}
.theme-dark .s8f,.dir-lounge.theme-dark .s8f{--fgt:#EBC766}
.s8f .pld{margin:10px 16px 0}
.s8f .pld-a{display:flex;flex-direction:column;gap:3px}
.s8f .pld-a b{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.05}
.s8f .pld-a span:last-child{font-size:10.5px;line-height:1.35;color:var(--s-mute)}
.s8f .pld-b{display:flex;align-items:flex-end;gap:10px}
.s8f .pld-b div{display:flex;flex-direction:column;gap:3px}
.s8f .pld-b b{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.s8f .pld-b div:last-child b{color:var(--s-good)}
.s8f .pld-b span{font-size:9.5px;font-weight:600;color:var(--s-mute);white-space:nowrap}
.s8f .pld-b i{font-style:normal;font-size:17px;font-weight:700;color:var(--s-mute);padding-bottom:13px}
.dir-lounge.plead-1 .s8f .pld-a,.dir-lounge:not(.plead-1) .s8f .pld-b{display:none}
.s8f .fdc{margin:10px 16px 0;padding:12px 12px 10px;border-radius:16px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.s8f .fdw{position:relative;max-width:214px;margin:0 auto}
.s8f .fdsv{display:block;width:100%;height:auto;overflow:visible}
.s8f .ftr{fill:none;stroke:var(--fg);stroke-width:18}
.s8f .fsg{fill:none;stroke-width:18;stroke-dasharray:100;stroke-dashoffset:0}
.s8f .fe{stroke:var(--fe)}
.s8f .fb{stroke:url(#sr-htch)}
.s8f .htb{fill:var(--fbb)}
.s8f .htl{fill:var(--fb)}
.s8f .fpl{fill:var(--fpb);stroke:var(--fp);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.s8f .fgold{transform-box:fill-box;transform-origin:center}
.s8f .fgold circle{fill:var(--fgold)}
.s8f .fgold path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s8f .fde{font:700 10px var(--body);fill:var(--s-mute)}
.s8f .fdg{fill:var(--fgt);font-weight:800}
.s8f .fdm{font:700 11px var(--body);fill:var(--s-mute)}
.s8f .fdn{position:absolute;left:0;right:0;bottom:calc(100% * 25 / 146);display:flex;justify-content:center}
.s8f .fsw{display:inline-grid;font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:.8;font-variant-numeric:tabular-nums;color:var(--s-ink)}
.s8f .fsw > span{grid-area:1/1;opacity:0}
.s8f .fsw > span:first-child{opacity:1}
.s8f .fk{display:flex;justify-content:space-between;gap:6px;padding:10px 2px 0;font-size:9.5px;color:var(--s-mute)}
.s8f .fk span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.s8f .fk b{color:var(--s-ink);font-weight:800}
.s8f .fk i{flex:none;width:13px;height:9px;border-radius:2px}
.s8f .k-e{background:var(--fe)}
.s8f .k-b{background:repeating-linear-gradient(135deg,var(--fb) 0 1.6px,var(--fbb) 1.6px 3.3px)}
.s8f .k-p{background:var(--fpb);box-shadow:inset 0 0 0 1.3px var(--fp)}
.s8f .fyc{margin:10px 16px 0;padding:10px 10px 4px;border-radius:16px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.s8f .fyc .lbl{display:block;padding:0 2px 2px}
.s8f .fysv{display:block;width:100%;height:auto;overflow:visible}
.s8f .fyax{stroke:var(--s-line);stroke-width:1.2}
.s8f .fyb{transform-box:fill-box;transform-origin:50% 100%}
.s8f .fyb.b{fill:url(#sr-htch)}
.s8f .fyb.p{fill:var(--fpb);stroke:var(--fp);stroke-width:1.3}
.s8f .fyv{font:800 8px var(--body);fill:var(--s-ink)}
.s8f .fym{font:600 7.5px var(--body);fill:var(--s-mute)}
.s8f .fyn{fill:var(--s-ink);font-weight:800}
.s8f .fyg{fill:color-mix(in srgb,var(--fgold) 17%,transparent)}
.s8f .fygt{font:800 8.5px var(--body);fill:var(--fgt)}
/* the year lands: flown draws, each booked month fills hatched, the planned month outlines, then Gold pins */
.s8f.go .fe{animation:fdraw .8s .25s cubic-bezier(.4,0,.2,1) both}
.s8f.go .fb1{animation:fdraw .5s 1.3s cubic-bezier(.4,0,.2,1) both}
.s8f.go .fb2{animation:fdraw .5s 2s cubic-bezier(.4,0,.2,1) both}
.s8f.go .fpl{animation:fdraw .7s 2.9s cubic-bezier(.4,0,.2,1) both,fpfill .4s 3.3s both}
@keyframes fdraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fpfill{from{fill-opacity:0}to{fill-opacity:1}}
.s8f.go .fgold{animation:fpin .55s 3.5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes fpin{from{opacity:0;transform:translateY(-10px) scale(.6)}to{opacity:1;transform:none}}
.s8f.go .fsw > span{animation:dnin .35s var(--a) cubic-bezier(.2,.8,.2,1) both,dnout .25s var(--b) forwards}
@keyframes dnin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dnout{to{opacity:0;transform:translateY(-8px)}}
.s8f.go .fyb{animation:fybar .5s var(--d) cubic-bezier(.2,.8,.2,1) both}
@keyframes fybar{from{transform:scaleY(0)}to{transform:none}}
.s8f.go .fyv{animation:fyin .3s calc(var(--d) + .3s) both}
.s8f.go .fyg,.s8f.go .fygt{animation:fyin .5s 3.5s both}
@keyframes fyin{from{opacity:0}to{opacity:1}}
.hs.s8f.go{animation:fcyc 10s linear forwards}
@keyframes fcyc{0%{opacity:.4}4%,95%{opacity:1}100%{opacity:.4}}
/* its mini card lights as Gold pins */
.sc-card.play .pn-plan .ps{animation:ppl 10s linear forwards}
.sc-card.play .pn-plan{animation:pplg 10s linear forwards}
@keyframes ppl{0%,36%{opacity:.42}40%,95%{opacity:1}99%,100%{opacity:.42}}
@keyframes pplg{0%,36%{box-shadow:var(--psh)}40%{box-shadow:var(--pflash)}52%,95%{box-shadow:var(--plit)}99%,100%{box-shadow:var(--psh)}}
/* lock screens (Cards, Import): the wallpaper, the date over the clock, and the alerts on frosted platters. Left-aligned */
.lk{--lk1:#0A1730;--lk2:#24548A;--lk3:#8FBDE6;color:#fff}
.lk.lk-imp{--lk1:#1A1030;--lk2:#5E2F5A;--lk3:#EFA27A}
.lk .lkw{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 60% at 20% 0%,color-mix(in srgb,var(--lk2) 55%,transparent),transparent 70%),linear-gradient(180deg,var(--lk1) 0%,var(--lk2) 58%,var(--lk3) 100%)}
.lk .sb{color:#fff}
.lk .lkt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:20px 20px 0}
.lk .lkd{font-size:12px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.86)}
.lk .lkc{font:700 60px/1 var(--display);letter-spacing:-.04em;margin:4px 0 0 -2px;color:#fff;font-variant-numeric:normal}
.lk .lkn{position:relative;z-index:2;display:flex;flex-direction:column;margin:18px 10px 0}
.lk .nt{overflow:hidden}
.lk .ntc{display:flex;align-items:flex-start;gap:9px;padding:10px 12px 11px 10px;border-radius:18px;background:rgba(245,247,250,.92);color:#141A24}
.theme-dark .lk .ntc{background:rgba(30,36,47,.92);color:#F2F4F7}
.lk .nti{--ink:#15223A;--bg:#FFFFFF;flex:none;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;background:#FFFFFF;box-shadow:inset 0 0 0 .5px rgba(20,26,36,.2),0 1px 2px rgba(0,0,0,.12)}
.lk .nti .nt-logo{display:block;height:11px;width:auto;overflow:visible}
.lk .ntx{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1px}
.lk .nth{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:8.5px;line-height:1.2;color:rgba(20,26,36,.72)}
.theme-dark .lk .nth{color:rgba(242,244,247,.56)}
.lk .nth b{font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.lk .nth em{font-style:normal}
.lk .ntt{font-size:11.5px;font-weight:700;line-height:1.25;margin-top:2px}
.lk .ntb{font-size:10.5px;line-height:1.32}
.lk .lkb{position:absolute;left:24px;right:24px;bottom:26px;z-index:2;display:flex;justify-content:space-between}
.lk .lkb i{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28)}
/* Cards: the app's ring of cards is the wallpaper; the fee alert lands, then the bonus alert above it (9 s) */
.lk .cc5{position:absolute;left:0;right:0;bottom:112px;height:170px}
.lk .cc5-c{position:absolute;left:50%;top:60%;width:108px;height:68px;border-radius:7px;will-change:transform;transform:translate(-50%,-50%)}
.lk .cc5-c::before{left:11px;top:25px;width:14px;height:11px;border-radius:3px}
.lk .cc5-c::after{background:linear-gradient(115deg,rgba(255,255,255,.26) 0 26%,transparent 44%),radial-gradient(120% 90% at 100% 100%,rgba(255,255,255,.12),transparent 60%)}
.lk-cards .nt{max-height:0;opacity:0;transform:translateY(-12px) scale(.96)}
.lk-cards.go .n1{animation:lkn1 9s linear forwards}
.lk-cards.go .n2{animation:lkn2 9s linear forwards}
@keyframes lkn1{0%,8%{max-height:0;opacity:0;transform:translateY(-12px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}14%,93%{max-height:110px;opacity:1;transform:none}98%,100%{max-height:110px;opacity:0;transform:none}}
@keyframes lkn2{0%,37%{max-height:0;opacity:0;margin-bottom:0;transform:translateY(-12px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}44%,93%{max-height:110px;opacity:1;margin-bottom:8px;transform:none}98%,100%{max-height:110px;opacity:0;margin-bottom:8px;transform:none}}
/* each alert lights its mini card */
.sc-card.play .pay2 .pf1{animation:pcl1 9s linear forwards}
.sc-card.play .pay2 .pf2{animation:pcl2 9s linear forwards}
@keyframes pcl1{0%,11%{opacity:.42;box-shadow:var(--psh)}15%{opacity:1;box-shadow:var(--pflash)}26%,93%{opacity:1;box-shadow:var(--plit)}99%,100%{opacity:.42;box-shadow:var(--psh)}}
@keyframes pcl2{0%,40%{opacity:.42;box-shadow:var(--psh)}44%{opacity:1;box-shadow:var(--pflash)}55%,93%{opacity:1;box-shadow:var(--plit)}99%,100%{opacity:.42;box-shadow:var(--psh)}}
/* Best-value runs: overpaying, then where you rank, then the run to steal. The payoff follows the phone; its bars show the roll */
.hs{--s-warn:#B54708}
.dir-lounge.theme-dark .hs,.theme-dark .hs{--s-warn:#FDBA74}
.s1x .fl2 b,.s1x .fl2 em{color:var(--s-warn)}
.s1x .fl2 em svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.s1x .fl3{top:332px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px 10px 12px;box-shadow:0 0 0 1.5px var(--s-good),0 12px 28px rgba(0,0,0,.16)}
.s1x .fl3 > div{display:flex;flex-direction:column;min-width:0}
.s1x .fl3 b,.s1x .fl3 .sv{text-transform:none;letter-spacing:0}
.s1x .fl3 b{font-variant-numeric:normal}
.s1x .fl3 .lbl{color:var(--s-good)}
.s1x .fl3 b{font-size:19px}
.s1x .fl3 b small{font-size:10px;font-weight:700;color:var(--s-mute);margin-left:4px;letter-spacing:0}
.s1x .fl3 .sv{flex:none;padding:7px 11px;border-radius:999px;background:var(--s-good);color:var(--s-card);font-size:11px;font-weight:800;white-space:nowrap}
.s1x.go .fl3{animation:hsrise .55s 2.5s cubic-bezier(.2,.8,.2,1) forwards}
.s1x.go .fl3 .sv{animation:s1sv .6s 3.1s cubic-bezier(.2,1.3,.4,1) both}
@keyframes s1sv{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.sc-card .pn-runs{box-shadow:var(--plit)}
.sc-card .pn-runs .psg{display:flex;gap:6px;margin:0 0 13px}
.sc-card .pn-runs .psg i{position:relative;flex:1 1 0;height:3px;border-radius:2px;background:rgba(255,255,255,.14);cursor:pointer}
.sc-card .pn-runs .psg i::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
.sc-card .pn-runs .psg i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--pay);transform-origin:left;transform:scaleX(0)}
.sc-card .pn-runs .psg i.done::after{transform:scaleX(1);opacity:.5}
.sc-card .pn-runs .psg i.on::after{animation:stpbar 6s linear forwards}
.sc-card .pn-runs .ps{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.sc-card .pn-runs .ps.on{opacity:1;transform:none;transition-delay:.25s}
.sc-card .pn-runs .ps.on .big{animation:paypop .7s .3s cubic-bezier(.2,1.3,.4,1) both}
/* Import: the alert lands, a tap, and the year it built (11 s) */
.s9y .y9,.s9y .lkl{position:absolute;inset:0}
.s9y .lkl{z-index:6;transform-origin:50% 38%}
.s9y.go .lkl{animation:lkout 11s linear forwards}
@keyframes lkout{0%,23%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}28%,93%{opacity:0;transform:scale(1.07);animation-timing-function:ease}98%,100%{opacity:1;transform:none}}
.s9y .lkl .nt{opacity:0;transform:translateY(-12px) scale(.96)}
.s9y.go .lkl .nt{animation:lkimp 11s linear forwards}
@keyframes lkimp{0%,5%{opacity:0;transform:translateY(-12px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}10%,19%{opacity:1;transform:none;animation-timing-function:ease-in-out}20.5%{opacity:1;transform:scale(.965)}22%,100%{opacity:1;transform:none}}
.s9y .lkl .ntc{position:relative;overflow:hidden}
.s9y .lkl .ntc::after{content:"";position:absolute;left:60%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(20,26,36,.16);opacity:0;transform:scale(0)}
.theme-dark .s9y .lkl .ntc::after{background:rgba(255,255,255,.18)}
.s9y.go .lkl .ntc::after{animation:lktap 11s linear forwards}
@keyframes lktap{0%,19%{opacity:0;transform:scale(0)}20%{opacity:1;transform:scale(1)}23%,100%{opacity:0;transform:scale(9)}}
.s9y .y9 .s9l{margin:4px 16px 0;font-size:10.5px;line-height:1.35;color:var(--s-mute)}
.s9y .y9k{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 16px 0}
.s9y .y9k div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:14px;background:var(--s-card);box-shadow:0 4px 14px rgba(0,0,0,.07);opacity:0;transform:translateY(8px)}
.s9y .y9k b{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1}
.s9y .y9k span{font-size:9px;font-weight:600;color:var(--s-mute)}
.s9y .y9g{margin:11px 16px 0;opacity:0}
.s9y .y9g span{display:block;font-size:9.5px;color:var(--s-mute);margin-bottom:5px}
.s9y .y9g span b{color:var(--s-ink);font-weight:800}
.s9y .y9g i{display:block;position:relative;height:6px;border-radius:3px;background:var(--s-line);overflow:hidden}
.s9y .y9g i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:65.7%;border-radius:3px;background:var(--s-acc);transform-origin:left;transform:scaleX(0)}
.s9y.go .y9k div{animation:hsrise .45s cubic-bezier(.2,.8,.2,1) forwards}
.s9y.go .y9k div:nth-child(1){animation-delay:3.05s}
.s9y.go .y9k div:nth-child(2){animation-delay:3.15s}
.s9y.go .y9g{animation:hsin .3s 3.3s forwards}
.s9y.go .y9g i::after{animation:y9grow .9s 3.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes y9grow{to{transform:scaleX(1)}}
.s9y.go .sub{animation:hsin .3s 3.5s forwards}
.s9y.go .mini{animation-delay:3.5s}
.s9y.go .mr:nth-child(1){animation-delay:3.6s}
.s9y.go .mr:nth-child(2){animation-delay:3.72s}
.s9y.go .mr:nth-child(3){animation-delay:3.84s}
.s9y.go .mr:nth-child(4){animation-delay:3.96s}
.s9y .s9ok{flex:none;width:18px;height:18px;border-radius:50%;background:var(--s-goodbg);display:inline-flex;align-items:center;justify-content:center}
.s9y .s9ok svg{width:11px;height:11px;fill:none;stroke:var(--s-good);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* its mini card lights as the year opens */
.sc-card.play .pn-imp .ps{animation:pimp 11s linear forwards}
.sc-card.play .pn-imp{animation:pimpl 11s linear forwards}
@keyframes pimp{0%,30%{opacity:.42}34%,93%{opacity:1}99%,100%{opacity:.42}}
@keyframes pimpl{0%,30%{box-shadow:var(--psh)}34%{box-shadow:var(--pflash)}46%,93%{box-shadow:var(--plit)}99%,100%{box-shadow:var(--psh)}}
@media (max-width:640px){
.sc-card .panel.pay{width:232px;padding:13px 15px 12px}
.sc-card .pay .big,.sc-card .pay2 .big{font-size:26px}
.sc-card .pay .pl,.sc-card .pay2 .pl{letter-spacing:.1em}
.sc-card .pay2 .big small{display:block;margin:6px 0 0}
}
@media (prefers-reduced-motion:reduce){
.s8f .fsw > span{opacity:0 !important}
.s8f .fsw > span:last-child{opacity:1 !important;transform:none !important}
.s8f .fsg,.s8f .fpl{stroke-dashoffset:0 !important;fill-opacity:1 !important}
.s8f .fgold,.s8f .fyg,.s8f .fygt,.s8f .fyv{opacity:1 !important;transform:none !important}
.s8f .fyb{transform:none !important}
.hs.s8f{animation:none !important}
.sc-card .pn-plan .ps{opacity:1 !important}
.sc-card .pay{box-shadow:var(--plit) !important}
.lk-cards .nt{max-height:none !important;opacity:1 !important;transform:none !important}
.lk-cards .n2{margin-bottom:8px !important}
.sc-card .pay2 .pc{opacity:1 !important;box-shadow:var(--plit) !important}
.s9y .lkl{display:none !important}
.s9y .y9k div,.s9y .y9g{opacity:1 !important;transform:none !important}
.s9y .y9g i::after{transform:none !important}
.sc-card .pn-imp .ps{opacity:1 !important}
.s1x .fl3,.s1x .fl3 .sv{opacity:1 !important;transform:none !important}
.sc-card .pn-runs .psg i.on::after{animation:none;transform:scaleX(1)}
.sc-card .pn-runs .ps.on .big{animation:none}
}
/* ---------- v204 (Rob, 4 Oct) ---------- */
/* Cards: each mini card names its bank's card, on a plain card chip */
.sc-card .pay2 .pcard{display:flex;align-items:center;gap:8px;font:600 11.5px/1.25 var(--body);color:rgba(232,237,243,.84);white-space:nowrap}
.sc-card .pay2 .pcc{position:relative;flex:none;width:22px;height:14px;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3)}
.sc-card .pay2 .pcc::before{content:"";position:absolute;left:3px;top:5px;width:4px;height:3.5px;border-radius:1px;background:linear-gradient(135deg,#F1D98F,#BC9545)}
.sc-card .pay2 .pcc.k1{background:linear-gradient(135deg,#3A3C44,#0E0F12)}
.sc-card .pay2 .pcc.wb{background:linear-gradient(135deg,#2E3038,#060708)}
@media (max-width:640px){.sc-card .pay2 .pcard{white-space:normal;align-items:flex-start}.sc-card .pay2 .pcc{margin-top:1px}}
/* Import: the spreadsheet it came from */
.s9y .y9f{display:flex;align-items:center;gap:9px;margin:10px 16px 0;padding:8px 10px;border-radius:12px;background:var(--s-card);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.s9y .y9fi{flex:none;width:24px;height:24px;font-style:normal}
.s9y .y9fi svg{display:block;width:24px;height:24px}
.s9y .y9f span{display:flex;flex-direction:column;gap:1px;min-width:0}
.s9y .y9f b{font-size:10.5px;font-weight:800}
.s9y .y9f em{font-style:normal;font-size:8.5px;color:var(--s-mute);white-space:nowrap}
/* the crew: names under the portraits again (Rob, 4 Oct: "the eyebrows are ok for our names under the portraits") */
.dir-lounge #v-lounge-home .crew .txt > .eyebrow{display:block !important}
/* the pass: the mark and the wordmark on the tear-off stub, the seat under them, the barcode at the foot */
.dir-lounge .story-pass .sp-card{--stub:206px}
.dir-lounge .story-pass .sp-stub{justify-content:space-between;gap:10px;padding:22px 22px 20px;container-type:inline-size}
/* v205 (Rob, 4 Oct: "don't have them under one another - either the screen is big enough to support both (side by side) or
too small and only show logo"): side by side, and the wordmark drops out wherever the stub is too narrow for both */
.dir-lounge .story-pass .sp-stub .sp-air{flex-direction:row;align-items:center;gap:8px;font-size:12px;letter-spacing:.13em;white-space:nowrap}
.dir-lounge .story-pass .sp-stub .sp-logo{height:20px}
@container (max-width:150px){.dir-lounge .story-pass .sp-stub .sp-wm{display:none}}
.dir-lounge .story-pass .sp-seatk{display:flex;flex-direction:column;gap:6px}
.dir-lounge .story-pass .sp-stub b{font-size:40px}
.dir-lounge .story-pass .sp-stub .sp-code{margin-top:0;font-size:40px}
@media (max-width:640px){
.dir-lounge .story-pass .sp-stub{justify-content:space-between;gap:14px;padding:0 20px}
.dir-lounge .story-pass .sp-stub .sp-air{font-size:12px}
.dir-lounge .story-pass .sp-stub .sp-logo{height:20px}
.dir-lounge .story-pass .sp-seatk{display:none}
.dir-lounge .story-pass .sp-stub .sp-code{font-size:38px}
}
/* ---------- v205 (Rob, 4 Oct) ---------- */
/* small SVG labels draw at full precision (headless Chromium dropped half a glyph at 7.5px) */
.s8f .fdsv text,.s8f .fysv text{text-rendering:geometricPrecision}
/* Cards: the ANZ card's line is the call to make, so its card runs a little wider */
.sc-card .panel.pstack.pay2{width:292px}
.sc-card .pay2 .pc{width:264px}
@media (max-width:640px){.sc-card .panel.pstack.pay2{width:244px}.sc-card .pay2 .pc{width:218px}}
/* the pass: the stub's wordmark only beside the barcode where there is room for both, on phones */
@media (max-width:640px){@container (max-width:250px){.dir-lounge .story-pass .sp-stub .sp-wm{display:none}}}
/* the passenger's field holds the longest name, so the fields beside it stay put while names are typed */
.dir-lounge .story-pass .sp-fields .sp-pax b{min-width:15ch}
/* the narrowest phones: the route's words step down so "Status Runner" stays on the pass */
@media (max-width:340px){.dir-lounge .story-pass .sp-end b,.dir-lounge .story-pass .sp-path{font-size:17px}}
/* ---------- v206 (Rob, 4 Oct) ---------- */
/* Cards screen, Card timeline (new option): the two alerts land, a tap on the ANZ one opens its card in the app, and the
screen stays on the call: the 18 Nov fee against the 50,000 points that keeping it earns, the date those points land, then
the next card; a tap on it opens the compare, best value per point first (v207). 17 s, the screen's own clock (v210, Rob: "maybe like 17 seconds"; 14 s before, every beat scaled). The option
shows one screen or the other */
.dir-lounge:not(.cards-1) .s6t,.dir-lounge.cards-1 .lk-cards{display:none}
.s6t{--s6f:color-mix(in srgb,var(--s-warn) 14%,transparent);--s6fx:color-mix(in srgb,var(--s-warn) 30%,transparent);--s6w:var(--s-goodbg);--s6wx:color-mix(in srgb,var(--s-good) 30%,transparent)}
.s6t .lkl{position:absolute;inset:0;z-index:6;transform-origin:50% 38%}
.s6t.go .lkl{animation:lkc2out 17s linear forwards}
@keyframes lkc2out{0%,20%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}23.6%,94.3%{opacity:0;transform:scale(1.07);animation-timing-function:ease}98.6%,100%{opacity:1;transform:none}}
.s6t .lkl .nt{max-height:0;opacity:0;transform:translateY(-12px) scale(.96)}
.s6t.go .lkl .n1{animation:lkc2a 17s linear forwards}
.s6t.go .lkl .n2{animation:lkc2b 17s linear forwards}
@keyframes lkc2a{0%,2.9%{max-height:0;opacity:0;transform:translateY(-12px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}6.4%,18.3%{max-height:110px;opacity:1;transform:none;animation-timing-function:ease-in-out}19%{max-height:110px;opacity:1;transform:scale(.965)}20%,25.7%{max-height:110px;opacity:1;transform:none}26.8%,100%{max-height:110px;opacity:0;transform:none}}
@keyframes lkc2b{0%,9.3%{max-height:0;opacity:0;margin-bottom:0;transform:translateY(-12px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}12.9%,25.7%{max-height:110px;opacity:1;margin-bottom:8px;transform:none}26.8%,100%{max-height:110px;opacity:0;margin-bottom:8px;transform:none}}
.s6t .lkl .n1 .ntc{position:relative;overflow:hidden}
.s6t .lkl .n1 .ntc::after,.s6t .s6w::after{content:"";position:absolute;left:60%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(20,26,36,.16);opacity:0;transform:scale(0);pointer-events:none}
.theme-dark .s6t .lkl .n1 .ntc::after,.theme-dark .s6t .s6w::after{background:rgba(255,255,255,.18)}
.s6t.go .lkl .n1 .ntc::after{animation:lkc2tap 17s linear forwards}
@keyframes lkc2tap{0%,18.6%{opacity:0;transform:scale(0)}19.3%{opacity:1;transform:scale(1)}22.9%,100%{opacity:0;transform:scale(9)}}
/* the app: Your card, then the call, the bonus date and the next card, each lighting in turn with its mini card */
.s6t .s6v{position:relative}
.s6t .y6c{position:absolute;left:0;right:0;top:0;transform:translateX(100%)}
.s6t.go .y6t{animation:y6out 17s linear forwards}
.s6t.go .y6c{animation:y6in 17s linear forwards}
@keyframes y6out{0%,52.5%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}56.1%,100%{transform:translateX(-30%);opacity:0}}
@keyframes y6in{0%,52.5%{transform:translateX(100%);animation-timing-function:cubic-bezier(.2,.8,.2,1)}56.1%,100%{transform:none}}
.s6t .s6tl .mr{border-bottom:0}
.s6t .s6tl .s6f,.s6t .s6tl .s6g,.s6t .s6tl .s6w{margin:0 -11px;padding:9px 11px;border-radius:13px}
.s6t .s6tl .s6g{padding-top:3px}
/* the lit fee row's small print holds 4.5:1 on its amber, light and dark */
.s6t .s6tl .s6f div span,.s6t .s6tl .s6f small{color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s6t .s6tl .s6w{position:relative;overflow:hidden;align-items:center}
.s6t .s6w .cc,.s6t .s6cl .cc{width:38px;height:25px}
.s6t .s6w .cc::before,.s6t .s6cl .cc::before{left:6px;top:9px}
.s6t .s6go{flex:none;width:14px;height:14px;fill:none;stroke:var(--s-mute);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.s6t .s6tl .mr div span,.s6t .s6cl .mr div span{font-size:9px;line-height:1.35}
/* the section labels read on the light screens' lavender too (4.5:1) */
.s6t .sub{color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s6t.go .sub{animation-delay:4.07s}
.s6t.go .s6sub2{animation-delay:4.43s}
.s6t.go .mini{animation-delay:4.07s}
.s6t.go .s6nx{animation-delay:4.43s}
.dir-lounge .s6t.go .s6tl .s6f{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) 4.19s forwards,s6flit 17s linear forwards}
.dir-lounge .s6t.go .s6tl .s6g{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) 4.31s forwards}
.dir-lounge .s6t.go .s6tl .s6w{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) 4.55s forwards,s6wlit 17s linear forwards}
.s6t.go .s6w::after{animation:s6wtap 17s linear forwards}
@keyframes s6flit{0%,30%{background-color:transparent}31.8%{background-color:var(--s6fx)}36.4%,100%{background-color:var(--s6f)}}
@keyframes s6wlit{0%,38.6%{background-color:transparent}40.4%{background-color:var(--s6wx)}45%,100%{background-color:var(--s6w)}}
@keyframes s6wtap{0%,49.6%{opacity:0;transform:scale(0)}50.4%{opacity:1;transform:scale(1)}53.6%,100%{opacity:0;transform:scale(12)}}
/* the compare: best value per point first; the best lights green */
.s6t .s6ch{display:flex;align-items:center;gap:4px}
.s6t .s6bk{width:16px;height:16px;margin-left:-4px;fill:none;stroke:var(--s-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.s6t .y6c .s6l{margin:4px 16px 0;font-size:10.5px;line-height:1.35;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s6t .s6cl{margin-top:12px}
.s6t .s6cl .mr{gap:10px;padding:10px 11px;margin:0 -11px;border-radius:13px;align-items:center;border-bottom:0}
.s6t .s6cl .mr + .mr{box-shadow:inset 0 1px 0 var(--s-line)}
.s6t .s6cp{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font:800 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.s6t .s6cp small{font:800 7.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--s-good);opacity:0}
.s6t.go .s6cl{animation-delay:9.59s}
.dir-lounge .s6t.go .s6cl .s6c1{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) 9.65s forwards,s6clit 17s linear forwards}
.dir-lounge .s6t.go .s6cl .s6c2{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) 9.8s forwards}
.dir-lounge .s6t.go .s6cl .s6c3{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) 9.94s forwards}
.s6t.go .s6c1 .s6cp{animation:s6cbest 17s linear forwards}
.s6t.go .s6c1 .s6cp small{animation:hsin .35s 10.99s forwards}
@keyframes s6clit{0%,63.6%{background-color:transparent}65.4%{background-color:var(--s6wx)}70%,100%{background-color:var(--s6w)}}
@keyframes s6cbest{0%,63.6%{color:var(--s-ink)}65.4%,100%{color:var(--s-good)}}
.dir-lounge.cards-1 .sc-card.play .pay2 .pf1{animation:pcl1t 17s linear forwards}
.dir-lounge.cards-1 .sc-card.play .pay2 .pf2{animation:pcl2t 17s linear forwards}
@keyframes pcl1t{0%,30%{opacity:.42;box-shadow:var(--psh)}32%{opacity:1;box-shadow:var(--pflash)}37%,93%{opacity:1;box-shadow:var(--plit)}99%,100%{opacity:.42;box-shadow:var(--psh)}}
@keyframes pcl2t{0%,38.6%{opacity:.42;box-shadow:var(--psh)}40.7%{opacity:1;box-shadow:var(--pflash)}45.7%,93%{opacity:1;box-shadow:var(--plit)}99%,100%{opacity:.42;box-shadow:var(--psh)}}
@media (prefers-reduced-motion:reduce){
.s6t .lkl,.s6t .y6c{display:none !important}
.s6t .s6f{background-color:var(--s6f) !important}
.s6t .s6w{background-color:var(--s6w) !important}
}
/* ---------- v207 (Rob, 4 Oct) ---------- */
/* the leaderboard: "x to y via z" runs take a second line rather than being cut */
.s6 .lbr .rt{white-space:normal;line-height:1.22}
/* Best-value runs: the 1, 2, 3 checklist heads the payoff card (each step's bar fills while its screen shows) */
.sc-card .pn-runs .psg.pck{display:flex;flex-direction:column;gap:0;margin:0 0 11px;padding:0 0 9px;border-bottom:1px solid rgba(255,255,255,.12)}
.sc-card .pn-runs .psg.pck i{position:relative;display:flex;align-items:center;gap:10px;flex:none;height:auto;padding:6px 0 9px;border-radius:0;background:none;font-style:normal;color:rgba(232,237,243,.66);cursor:pointer}
.sc-card .pn-runs .psg.pck i::before,.sc-card .pn-runs .psg.pck i::after{content:none}
.sc-card .pn-runs .psg.pck b{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 10.5px/1 var(--body);background:rgba(255,255,255,.1);color:rgba(232,237,243,.8);transition:background .3s ease,color .3s ease}
.sc-card .pn-runs .psg.pck span{font:600 12.5px/1.25 var(--body);white-space:nowrap}
.sc-card .pn-runs .psg.pck em{position:absolute;left:30px;right:0;bottom:2px;height:2px;border-radius:1px;background:rgba(255,255,255,.1);overflow:hidden}
.sc-card .pn-runs .psg.pck em::after{content:"";position:absolute;inset:0;background:var(--pay);transform-origin:left;transform:scaleX(0)}
.sc-card .pn-runs .psg.pck i.on{color:#fff}
.sc-card .pn-runs .psg.pck i.on b{background:var(--pay);color:#170D0A}
.sc-card .pn-runs .psg.pck i.on em::after{animation:stpbar 6s linear forwards}
.sc-card .pn-runs .psg.pck i.done{color:rgba(232,237,243,.86)}
.sc-card .pn-runs .psg.pck i.done b{background:color-mix(in srgb,var(--pay) 34%,transparent);color:#fff}
.sc-card .pn-runs .psg.pck i.done em::after{transform:scaleX(1);opacity:.5}
@media (prefers-reduced-motion:reduce){.sc-card .pn-runs .psg.pck i.on em::after{animation:none;transform:scaleX(1)}}
/* Import screen, Mess to order (new option). v208 (Rob, 5 Oct): the credits found lead and climb as each row is read; one
step, Reading 14 rows, with its count and bar; the sheet read row by row, each ticking; then the rows fold into the four
routes; the spreadsheet one line at the bottom. 11 s, the card's clock */
.dir-lounge:not(.imp-1) .s9m,.dir-lounge.imp-1 .s9y{display:none}
.s9m.go .m9w{animation:m9win .35s ease both,m9wout .4s 10.5s ease forwards}
@keyframes m9win{from{opacity:0}to{opacity:1}}
@keyframes m9wout{to{opacity:0}}
/* the lead: credits found, big, with the flights beside */
.s9m .m9k{display:grid;grid-template-columns:1.65fr 1fr;gap:8px;margin:10px 16px 0}
.s9m .m9k > div{position:relative;display:flex;flex-direction:column;gap:4px;padding:11px 12px 10px;border-radius:14px;background:var(--s-card);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.s9m .m9k span{font-size:9px;font-weight:600;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s9m .m9sw{display:inline-grid;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.s9m .m9t .m9sw{font-size:34px;letter-spacing:-.04em}
.s9m .m9sw > span{grid-area:1/1;opacity:0;font-size:inherit;font-weight:inherit;color:var(--s-ink)}
.s9m .m9sw > span:first-child{opacity:1}
.s9m.go .m9sw > span{animation:dnin .2s var(--a) cubic-bezier(.2,.8,.2,1) both,dnout .12s var(--b) forwards}
.s9m .m9tick{position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;background:var(--s-good);opacity:0;transform:scale(.4)}
.s9m .m9tick svg{width:13px;height:13px;fill:none;stroke:var(--s-card);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s9m.go .m9tick{animation:m9pop .55s 4.75s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes m9pop{to{opacity:1;transform:none}}
.s9m.go .m9t{animation:m9glow 1.4s 4.6s ease-out forwards}
@keyframes m9glow{0%{box-shadow:0 4px 14px rgba(0,0,0,.07)}35%{box-shadow:0 0 0 2px var(--s-good),0 0 30px color-mix(in srgb,var(--s-good) 60%,transparent)}100%{box-shadow:0 0 0 1.5px var(--s-good),0 0 18px color-mix(in srgb,var(--s-good) 34%,transparent)}}
/* the one step: Reading 14 rows, its count and its bar; done, it ticks */
.s9m .m9p{margin:10px 16px 0}
.s9m .m9pl{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.s9m .m9pt{display:grid;font-size:10px;font-weight:700;color:var(--s-ink)}
.s9m .m9pt > span{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.s9m .m9pt > span + span{opacity:0;color:color-mix(in srgb,var(--s-good) 52%,var(--s-ink))}
.s9m .m9pt svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s9m.go .m9pt > span:first-child{animation:dnout .2s 3.6s forwards}
.s9m.go .m9pt > span + span{animation:dnin .3s 3.65s cubic-bezier(.2,.8,.2,1) both}
.s9m .m9pc{font-size:9.5px;font-weight:700;letter-spacing:0;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s9m .m9pc > span{color:inherit}
.s9m .m9bar{display:block;position:relative;height:4px;border-radius:2px;background:var(--s-line);overflow:hidden}
.s9m .m9bar::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--s-acc);transform-origin:left;transform:scaleX(0)}
.s9m.go .m9bar::after{animation:m9fill 3.1s .45s linear forwards,m9done .3s 3.6s forwards}
@keyframes m9fill{to{transform:scaleX(1)}}
@keyframes m9done{to{background:var(--s-good)}}
/* the sheet: 14 rows, a flight each, typed every which way and a little askew; each ticks as it is read, then the rows
fold into their routes */
.s9m .m9box{position:relative;height:184px;margin:10px 16px 0;border-radius:14px;background:var(--s-card);box-shadow:0 4px 14px rgba(0,0,0,.07);overflow:hidden}
.s9m .m9sheet{position:absolute;left:0;right:0;top:0}
.s9m .mx{position:relative;display:grid;grid-template-columns:12px 40px 1fr 54px;height:12px;align-items:center;border-bottom:1px solid var(--s-line);font:500 7.5px/1 var(--mono);color:var(--s-ink);box-sizing:border-box;transform:translateX(var(--x,0)) rotate(var(--r,0deg))}
.s9m .mx span{padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:clip;border-right:1px solid var(--s-line);height:100%;display:flex;align-items:center}
.s9m .mx span:last-child{border-right:0;color:var(--s-mute)}
.s9m .mxh{height:14px;font-weight:700;color:var(--s-mute);background:color-mix(in srgb,var(--s-line) 45%,transparent);transform:none}
.s9m .mx .y{background:color-mix(in srgb,#F5C518 32%,transparent)}
.s9m .mx .r{color:var(--s-warn);font-weight:700}
.s9m .mx:nth-child(8) span:last-child{color:var(--s-warn);font-weight:700}
.s9m .mxk{display:flex;align-items:center;justify-content:center;height:100%;border-right:1px solid var(--s-line)}
.s9m .mx:not(.mxh) .mxk::before{content:"";width:5px;height:3px;margin-top:-2px;border-left:1.5px solid var(--s-good);border-bottom:1.5px solid var(--s-good);transform:rotate(-45deg);opacity:0}
.s9m.go .mx:not(.mxh){animation:mxread .5s var(--t) ease-out forwards,mxgo .6s var(--f) cubic-bezier(.4,0,.2,1) forwards}
.s9m.go .mx:not(.mxh) .mxk::before{animation:hsin .15s var(--t) forwards}
.s9m.go .mxh{animation:mxgo .6s var(--f) cubic-bezier(.4,0,.2,1) forwards}
@keyframes mxread{0%{background-color:transparent}20%{background-color:color-mix(in srgb,var(--s-good) 24%,transparent)}100%{background-color:color-mix(in srgb,var(--s-good) 7%,transparent)}}
@keyframes mxgo{0%{transform:translateX(var(--x,0)) rotate(var(--r,0deg));opacity:1}35%{transform:none;opacity:1}100%{transform:translateY(var(--ty,0)) scale(.96);opacity:0}}
/* the routes land where their rows were */
.s9m .m9list{position:absolute;left:11px;right:11px;top:0}
.s9m .m9list .mr{height:43px;padding:0;box-sizing:border-box}
.s9m .m9list .mr:last-child{border-bottom:0}
.s9m .s9ok{flex:none;width:18px;height:18px;border-radius:50%;background:var(--s-goodbg);display:inline-flex;align-items:center;justify-content:center}
.s9m .s9ok svg{width:11px;height:11px;fill:none;stroke:var(--s-good);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.s9m .m9list .v{flex:none;font-size:11px;font-weight:800;color:var(--s-good);font-variant-numeric:tabular-nums}
.s9m.go .m9list .cl0{animation-delay:3.8s}
.s9m.go .m9list .cl1{animation-delay:4s}
.s9m.go .m9list .cl2{animation-delay:4.2s}
.s9m.go .m9list .cl3{animation-delay:4.4s}
/* the spreadsheet: one line at the bottom */
.s9m .m9src{display:flex;align-items:center;gap:6px;margin:10px 16px 0;font-size:9px;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s9m .m9src .y9fi{flex:none;width:14px;height:14px;font-style:normal}
.s9m .m9src .y9fi svg{display:block;width:14px;height:14px}
.s9m .m9src b{font-weight:700;color:var(--s-ink)}
/* its mini card lights as the tick lands */
.dir-lounge.imp-1 .sc-card.play .pn-imp .ps{animation:pimpm 11s linear forwards}
.dir-lounge.imp-1 .sc-card.play .pn-imp{animation:pimplm 11s linear forwards}
@keyframes pimpm{0%,41.5%{opacity:.42}45%,93%{opacity:1}99%,100%{opacity:.42}}
@keyframes pimplm{0%,41.5%{box-shadow:var(--psh)}45%{box-shadow:var(--pflash)}54%,93%{box-shadow:var(--plit)}99%,100%{box-shadow:var(--psh)}}
@media (prefers-reduced-motion:reduce){
.s9m .m9sheet{display:none}
.s9m .m9list .mr{opacity:1 !important;transform:none !important}
.s9m .m9sw > span{opacity:0 !important}
.s9m .m9sw > span:last-child{opacity:1 !important;transform:none !important}
.s9m .m9pt > span:first-child{opacity:0 !important}
.s9m .m9pt > span + span{opacity:1 !important;transform:none !important}
.s9m .m9bar::after{transform:none !important;background:var(--s-good) !important}
.s9m .m9tick{opacity:1 !important;transform:none !important}
.s9m .m9t{box-shadow:0 0 0 1.5px var(--s-good),0 0 18px color-mix(in srgb,var(--s-good) 34%,transparent) !important}
}
/* the Alert option's year: the spreadsheet one line at the bottom too */
.s9y .y9f{margin:10px 16px 0;padding:0;border-radius:0;background:none;box-shadow:none;gap:6px}
.s9y .y9f .y9fi{width:14px;height:14px}
.s9y .y9f .y9fi svg{width:14px;height:14px}
.s9y .y9f > span{display:block;font-size:9px;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s9y .y9f > span b{font-size:inherit;font-weight:700;color:var(--s-ink)}
/* every phone screen's year tag ("2026 to 27") reads at 4.5:1 on the light screens' lavender too */
.hs .hd .yr{color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
/* the Plan screen's lead: its label and small print read at 4.5:1 on the light screens' lavender */
.s8f .pld-a .lbl,.s8f .pld-a span:last-child,.s8f .pld-b span{color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
/* Best-value runs: the map's city names and the price chart's labels read at 4.5:1, light and dark */
.s1x .ct span{color:color-mix(in srgb,var(--s-mute) 45%,var(--s-ink))}
.s3 .dmed text,.s3 .dist .dend{fill:color-mix(in srgb,var(--s-mute) 45%,var(--s-ink))}
/* every phone screen's section label, and the import year's Gold line, read at 4.5:1 on the light screens' lavender */
.hs .sub,.s9y .y9g span{color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
/* Import finish (new option, for Mess to order): 0 Glow and tick (as before); 1 Flipboard: the screen clears, 460 flaps in on
the logo's board, a bold glow and a big tick; 2 Spreadsheet retires: the crying spreadsheet takes a bow and leaves, then
the board (14 s). No particles: a bolder glow only (Rob, 4 Oct) */
.s9m .m9fin{display:none}
.dir-lounge:is(.impfin-1,.impfin-2) .s9m .m9fin{position:absolute;left:0;right:0;top:92px;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.dir-lounge:is(.impfin-1,.impfin-2) .s9m.go .m9t,.dir-lounge:is(.impfin-1,.impfin-2) .s9m.go .m9tick{animation:none}
.dir-lounge:is(.impfin-1,.impfin-2) .s9m.go :is(.m9k,.m9p,.m9box,.m9src){animation:m9clear .45s 4.7s ease forwards}
@keyframes m9clear{to{opacity:0;transform:translateY(-12px) scale(.96)}}
/* the farewell: filename, dates, one line; a bow, then off */
.s9m .m9rip{display:none;flex-direction:column;align-items:center;gap:4px;opacity:0}
.dir-lounge.impfin-2 .s9m .m9rip{display:flex}
.s9m .m9rip .cry{width:92px;height:92px;margin-bottom:12px;overflow:visible;transform-origin:50% 100%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.s9m .m9rip .cry .tear{animation:sr-tear 3.2s .6s ease-in infinite;transform-box:fill-box;transform-origin:50% 0}
.s9m .m9rip b{font-size:13px;font-weight:800;font-family:var(--mono);letter-spacing:-.01em}
.s9m .m9rip span{font-size:10px;font-weight:600;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s9m .m9rip em{margin-top:8px;font-style:normal;font-size:15px;font-weight:800;letter-spacing:-.01em}
.dir-lounge.impfin-2 .s9m.go .m9rip{animation:m9in .45s 5s cubic-bezier(.2,.8,.2,1) forwards,m9out .5s 7.05s ease-in forwards}
.dir-lounge.impfin-2 .s9m.go .m9rip .cry{animation:m9bow .65s 6.3s ease-in-out both}
@keyframes m9in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes m9out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(26px)}}
@keyframes m9bow{0%,100%{transform:none}45%{transform:rotate(16deg) translateY(4px) scaleY(.94)}}
/* the total: the board, its glow, the tick, two lines */
.s9m .m9tot{position:relative;display:flex;flex-direction:column;align-items:center;opacity:0}
.dir-lounge.impfin-2 .s9m .m9tot{position:absolute;top:0}
.s9m .m9brd{position:relative;padding:18px 22px}
.s9m .m9tot .cb{--cbh:62px;gap:3px}
.s9m .m9glow{position:absolute;left:50%;top:46px;width:290px;height:200px;margin:-100px 0 0 -145px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,#3DDC84 72%,#fff) 0%,color-mix(in srgb,#3DDC84 58%,transparent) 40%,color-mix(in srgb,#3DDC84 20%,transparent) 70%,transparent 100%);opacity:0;transform:scale(.6)}
/* a bolder glow: the board lights, and one ring of light runs out from it */
.s9m .m9brd::before{content:"";position:absolute;left:20px;right:20px;top:16px;bottom:16px;border-radius:16px;opacity:0;pointer-events:none}
.s9m .m9tot .cb{transition:none}
@keyframes m9ring{0%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,#3DDC84 75%,transparent)}100%{opacity:1;box-shadow:0 0 0 34px color-mix(in srgb,#3DDC84 0%,transparent)}}
@keyframes m9lit{to{filter:drop-shadow(0 0 12px color-mix(in srgb,#3DDC84 70%,transparent)) drop-shadow(0 0 3px color-mix(in srgb,#3DDC84 80%,transparent))}}
.s9m .m9big{position:absolute;right:-6px;top:4px;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;background:var(--s-good);box-shadow:0 0 0 4px var(--s-bg),0 8px 18px color-mix(in srgb,var(--s-good) 40%,transparent);opacity:0;transform:scale(.4)}
.s9m .m9big svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s9m .m9kick{margin-top:2px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--s-good) 25%,var(--s-ink));opacity:0}
.s9m .m9line{margin-top:7px;font-size:15px;font-weight:800;letter-spacing:-.01em;opacity:0}
/* the two lines keep the screen's own colour close round them, so the glow never washes them out */
.s9m .m9kick,.s9m .m9line{text-shadow:0 0 3px var(--s-bg),0 0 8px var(--s-bg),0 0 14px var(--s-bg)}
.dir-lounge.impfin-1 .s9m.go .m9tot{animation:m9in .4s 4.95s cubic-bezier(.2,.8,.2,1) forwards}
.dir-lounge.impfin-1 .s9m.go .m9glow{animation:m9glowin 1.3s 6.6s ease-out forwards}
.dir-lounge.impfin-1 .s9m.go .m9brd::before{animation:m9ring 1.1s 6.65s ease-out forwards}
.dir-lounge.impfin-1 .s9m.go .m9tot .cb{animation:m9lit .6s 6.6s ease-out forwards}
.dir-lounge.impfin-1 .s9m.go .m9big{animation:m9pop .55s 6.75s cubic-bezier(.2,1.4,.4,1) forwards}
.dir-lounge.impfin-1 .s9m.go .m9kick{animation:hsin .35s 7.4s forwards}
.dir-lounge.impfin-1 .s9m.go .m9line{animation:hsin .35s 7.55s forwards}
.dir-lounge.impfin-2 .s9m.go .m9tot{animation:m9in .4s 7.55s cubic-bezier(.2,.8,.2,1) forwards}
.dir-lounge.impfin-2 .s9m.go .m9glow{animation:m9glowin 1.3s 9.1s ease-out forwards}
.dir-lounge.impfin-2 .s9m.go .m9brd::before{animation:m9ring 1.1s 9.15s ease-out forwards}
.dir-lounge.impfin-2 .s9m.go .m9tot .cb{animation:m9lit .6s 9.1s ease-out forwards}
.dir-lounge.impfin-2 .s9m.go .m9big{animation:m9pop .55s 9.25s cubic-bezier(.2,1.4,.4,1) forwards}
.dir-lounge.impfin-2 .s9m.go .m9kick{animation:hsin .35s 9.9s forwards}
.dir-lounge.impfin-2 .s9m.go .m9line{animation:hsin .35s 10.05s forwards}
.dir-lounge.impfin-2 .s9m.go .m9w{animation:m9win .35s ease both,m9wout .4s 13.5s ease forwards}
@keyframes m9glowin{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.08)}100%{opacity:.85;transform:none}}
/* its mini card lights as the total lands */
.dir-lounge.imp-1.impfin-1 .sc-card.play .pn-imp .ps{animation:pimpf 11s linear forwards}
.dir-lounge.imp-1.impfin-1 .sc-card.play .pn-imp{animation:pimplf 11s linear forwards}
@keyframes pimpf{0%,60.5%{opacity:.42}64%,93%{opacity:1}99%,100%{opacity:.42}}
@keyframes pimplf{0%,60.5%{box-shadow:var(--psh)}64%{box-shadow:var(--pflash)}73%,93%{box-shadow:var(--plit)}99%,100%{box-shadow:var(--psh)}}
.dir-lounge.imp-1.impfin-2 .sc-card.play .pn-imp .ps{animation:pimpr 14s linear forwards}
.dir-lounge.imp-1.impfin-2 .sc-card.play .pn-imp{animation:pimplr 14s linear forwards}
@keyframes pimpr{0%,65.5%{opacity:.42}68.5%,95%{opacity:1}99.5%,100%{opacity:.42}}
@keyframes pimplr{0%,65.5%{box-shadow:var(--psh)}68.5%{box-shadow:var(--pflash)}76%,95%{box-shadow:var(--plit)}99.5%,100%{box-shadow:var(--psh)}}
@media (prefers-reduced-motion:reduce){
.dir-lounge:is(.impfin-1,.impfin-2) .s9m :is(.m9k,.m9p,.m9box,.m9src),.dir-lounge.impfin-2 .s9m .m9rip{display:none !important}
.dir-lounge:is(.impfin-1,.impfin-2) .s9m .m9tot{position:relative;opacity:1 !important;transform:none !important}
.dir-lounge:is(.impfin-1,.impfin-2) .s9m :is(.m9big,.m9kick,.m9line){opacity:1 !important;transform:none !important}
.dir-lounge:is(.impfin-1,.impfin-2) .s9m .m9glow{opacity:.85 !important;transform:none !important}
.dir-lounge:is(.impfin-1,.impfin-2) .s9m .m9tot .cb{filter:drop-shadow(0 0 12px color-mix(in srgb,#3DDC84 70%,transparent)) !important}
}
/* ---------- v209 (Rob, 5 Oct) ---------- */
/* the next card's apply date sits in the date column like the dates above it; each compare row names its own date */
.s6t .s6tl .s6w .s6d{align-self:flex-start}
.s6t .s6cl .s6ca{margin-top:2px;font-style:normal;font-size:9px;font-weight:700;color:var(--s-ink);display:flex;align-items:center;gap:4px}
.s6t .s6cl .s6ca::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--s-good)}
.s6t .s6cl .s6c3 .s6ca::before{background:var(--s-warn)}
/* ---------- v210 (Rob, 5 Oct) ---------- */
/* Best-value runs, the rank screen: "Bad, then fixed". Your dot starts at the run screen's $11.40, flies down the curve to
the 13 Nov fare ($9.20) and leaves the old price behind, struck through; "Moved to 13 Nov" under the trail; then the share
who pay more; your runs on the route follow the chart */
.s3x .dwas{opacity:0;transform-box:fill-box;transform-origin:center}
.s3x .dwas circle{fill:var(--s-warn);stroke:var(--s-card);stroke-width:2.5}
.s3x .dwas text{font-size:10.5px;font-weight:800;text-anchor:middle}
.s3x .dwas .dw1{fill:var(--s-warn)}
.s3x .dwas .dw2{fill:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink));opacity:0;text-decoration:line-through}
.s3x .dmv{fill:var(--s-acc);font-size:9px;font-weight:700;text-anchor:middle;opacity:0}
/* the start holds long enough to read; the flight leaves at 1.7 s and lands at 2.8 s */
.s3x.go .dwas{animation:hspop .4s .8s cubic-bezier(.2,1.3,.4,1) forwards}
.s3x.go .dwas circle{animation:s3ghost .35s 1.7s forwards}
.s3x.go .dwas .dw1{animation:s3out .25s 1.7s forwards}
.s3x.go .dwas .dw2{animation:hsin .3s 1.85s forwards}
.s3x.go .dmv{animation:hsin .3s 1.95s forwards}
.s3x.go .drem{animation:hsfade .3s 1.45s forwards;--o:.45}
.s3x.go .dtrail{animation:hsdraw 1.1s 1.7s cubic-bezier(.4,0,.2,1) forwards}
.s3x.go .dfly{animation:dfly 1.1s 1.7s cubic-bezier(.4,0,.2,1) forwards}
.s3x.go .dyou{animation:hspop .45s 2.65s cubic-bezier(.2,1.3,.4,1) forwards}
.s3x.go .dright{animation:hsfade .4s 2.9s forwards;--o:.3}
.s3x.go .badge{animation:hsrise .45s 3.05s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes s3ghost{to{fill:var(--s-card);stroke:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink));stroke-width:1.8}}
@keyframes s3out{to{opacity:0}}
.s3x.go .sub{animation:hsin .3s 3.25s forwards}
.s3x.go .mini{animation-delay:3.2s}
.s3x.go .mr:nth-child(1){animation-delay:3.35s}
.s3x.go .mr:nth-child(2){animation-delay:3.47s}
.s3x.go .mr:nth-child(3){animation-delay:3.59s}
@media (prefers-reduced-motion:reduce){
.s3x .dwas,.s3x .dmv{opacity:1 !important;transform:none !important}
.s3x .dwas .dw1{opacity:0 !important}
.s3x .dwas .dw2{opacity:1 !important}
.s3x .dwas circle{fill:var(--s-card);stroke:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink));stroke-width:1.8}
.s3x .dline,.s3x .dtrail{stroke-dashoffset:0 !important}
.s3x .dright{opacity:.3 !important}
.s3x .darea{opacity:.55 !important}
}
/* Plan detail (new option): Planned runs. Under the dial the planned runs drop in one by one, each filling its part of the
dial; Gold pins with the last. Booked stays on the dial. The option shows one screen or the other */
.dir-lounge:not(.prun-1) .s8p,.dir-lounge.prun-1 .s8f:not(.s8p){display:none}
.s8p .fb{stroke:url(#sr-htch2)}
/* tighter than the calendar card, so both runs sit in view on a phone-width page */
.s8p .fdc,.s8p .fyc{margin-top:8px}
.s8p .fpr{padding:8px 12px 2px}
.s8p .fpr .lbl{padding-bottom:0}
.s8p .fprl{display:flex;flex-direction:column}
.s8p .fpi{display:flex;align-items:center;gap:10px;padding:0;max-height:0;overflow:hidden;opacity:0;transform:translateY(-14px)}
.s8p .fpi + .fpi{box-shadow:inset 0 1px 0 var(--s-line)}
.s8p .fpd{flex:none;width:38px;display:flex;flex-direction:column;gap:1px;font-style:normal}
.s8p .fpd b{font-size:11px;font-weight:800;line-height:1.1}
.s8p .fpd small,.s8p .fpt span{color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8p .fpd small{font-size:8.5px;font-weight:600}
.s8p .fpt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.s8p .fpt b{font-size:11px;font-weight:800;line-height:1.2}
.s8p .fpt span{font-size:9px;line-height:1.3}
.s8p .fpc{flex:none;font:800 11px/1 var(--mono);font-style:normal;padding:5px 7px;border-radius:7px;background:var(--fpb);box-shadow:inset 0 0 0 1.3px var(--fp);color:var(--s-ink)}
.s8p.go .fpi{animation:fpdrop .5s var(--d) cubic-bezier(.2,1.2,.4,1) both}
/* the list grows as each run lands, so the card never sits empty */
@keyframes fpdrop{from{max-height:0;padding:0;opacity:0;transform:translateY(-14px)}to{max-height:64px;padding:6px 0;opacity:1;transform:none}}
/* the dial keeps time with the runs: booked lands, then each planned run fills its part, then Gold */
.s8p.go .fb1{animation:fdraw .5s 1.3s cubic-bezier(.4,0,.2,1) both}
.s8p.go .fpl1{animation:fdraw .5s 2.3s cubic-bezier(.4,0,.2,1) both,fpfill .35s 2.6s both}
.s8p.go .fpl2{animation:fdraw .7s 3.3s cubic-bezier(.4,0,.2,1) both,fpfill .4s 3.7s both}
.s8p.go .fgold{animation:fpin .55s 3.9s cubic-bezier(.2,1.4,.4,1) both}
@media (prefers-reduced-motion:reduce){
.s8p .fpi{opacity:1 !important;transform:none !important;max-height:none !important;padding:6px 0 !important}
}
/* the hero, Words in the window (and every phone): out in the sky the features come up under the words (Rob, 5 Oct, v211),
above the hero's own layer, so they can be pressed as soon as they show */
.dir-lounge.hero-thru.thru-pull #v-lounge-home .sec[data-sec="features"]{position:relative;z-index:2;will-change:transform,opacity}
/* ---------- v212 (Rob, 5 Oct) ---------- */
/* Cards screen, Three journeys (new option): 1 Annual fee, 2 Next card, 3 Bonus. The phone rolls the three, 12 s each: one
alert, held 5 s to read, a tap, then that journey's own screen with its row lit. The mini card numbers them like the
best-value runs card; a tap on a number goes to it. The option shows its screens and mini card, the others hide */
.dir-lounge.cards-2 .lk-cards,.dir-lounge:not(.cards-2) .rollj{display:none}
.dir-lounge.cards-2 .pay2,.dir-lounge:not(.cards-2) .pn-jour{display:none}
.sc-card .pn-jour .psg.pck i.on em::after{animation-duration:12s}
.s6j{--s6f:color-mix(in srgb,var(--s-warn) 14%,transparent);--s6fx:color-mix(in srgb,var(--s-warn) 30%,transparent);--s6w:var(--s-goodbg);--s6wx:color-mix(in srgb,var(--s-good) 30%,transparent)}
.s6j .s6v{position:relative}
.s6j .lkl{position:absolute;inset:0;z-index:6;transform-origin:50% 38%}
.s6j .lkl .nt{max-height:0;opacity:0;transform:translateY(-12px) scale(.96)}
.s6j .lkl .ntc{position:relative;overflow:hidden}
.s6j .lkl .ntc::after{content:"";position:absolute;left:60%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(20,26,36,.16);opacity:0;transform:scale(0);pointer-events:none}
.theme-dark .s6j .lkl .ntc::after{background:rgba(255,255,255,.18)}
.s6j .s6tl .mr{border-bottom:0}
.s6j .s6tl .s6f,.s6j .s6tl .s6g,.s6j .s6tl .s6m{margin:0 -11px;padding:9px 11px;border-radius:13px}
.s6j .s6tl .s6g{padding-top:3px}
.s6j .s6tl .mr div span,.s6j .s6cl .mr div span{font-size:9px;line-height:1.35}
/* the lit rows' small print holds 4.5:1 on their amber and green, light and dark */
.s6j .s6tl :is(.s6f,.s6m) div span,.s6j .s6tl :is(.s6f,.s6m) small{color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s6j .sub{color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s6j .s6l{margin:4px 16px 0;font-size:10.5px;line-height:1.35;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s6j .s6cl{margin-top:12px}
.s6j .s6cl .mr{gap:10px;padding:10px 11px;margin:0 -11px;border-radius:13px;align-items:center;border-bottom:0}
.s6j .s6cl .mr + .mr{box-shadow:inset 0 1px 0 var(--s-line)}
.s6j .s6cl .cc{width:38px;height:25px}
.s6j .s6cl .cc::before{left:6px;top:9px}
.s6j .s6cp{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font:800 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.s6j .s6cp small{font:800 7.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--s-good);opacity:0}
.s6j .s6cl .s6ca{margin-top:2px;font-style:normal;font-size:9px;font-weight:700;color:var(--s-ink);display:flex;align-items:center;gap:4px}
.s6j .s6cl .s6ca::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--s-good)}
/* each journey's clock, 12 s: the alert lands at .3 s and holds to 5.7 s, a tap at 5.3 s, the lock lifts by 6.2 s, the row lights at 6.8 s */
.s6j.go .lkl{animation:jlk 12s linear forwards}
@keyframes jlk{0%,47.5%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}51.7%,100%{opacity:0;transform:scale(1.07)}}
.s6j.go .lkl .nt{animation:jnt 12s linear forwards}
@keyframes jnt{0%,2.5%{max-height:0;opacity:0;transform:translateY(-12px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}5.8%,44.2%{max-height:110px;opacity:1;transform:none;animation-timing-function:ease-in-out}45%{max-height:110px;opacity:1;transform:scale(.965)}45.8%,100%{max-height:110px;opacity:1;transform:none}}
.s6j.go .lkl .ntc::after{animation:jtap 12s linear forwards}
@keyframes jtap{0%,44.2%{opacity:0;transform:scale(0)}45%{opacity:1;transform:scale(1)}48.3%,100%{opacity:0;transform:scale(9)}}
/* (each lit row keeps its entrance, under the lock, and adds its light) */
.dir-lounge .s6j1.go .s6tl .s6f{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,jlitf 12s linear forwards}
@keyframes jlitf{0%,56.7%{background-color:transparent}58.3%{background-color:var(--s6fx)}62.5%,100%{background-color:var(--s6f)}}
.dir-lounge .s6j2.go .s6cl .s6c1,.dir-lounge .s6j3.go .s6tl .s6m{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,jlitw 12s linear forwards}
@keyframes jlitw{0%,56.7%{background-color:transparent}58.3%{background-color:var(--s6wx)}62.5%,100%{background-color:var(--s6w)}}
.s6j2.go .s6c1 .s6cp{animation:jbest 12s linear forwards}
@keyframes jbest{0%,56.7%{color:var(--s-ink)}58.3%,100%{color:var(--s-good)}}
.s6j2.go .s6c1 .s6cp small{animation:hsin .35s 7s forwards}
@media (prefers-reduced-motion:reduce){
.s6j .lkl{display:none !important}
.s6j1 .s6f{background-color:var(--s6f) !important}
.s6j2 .s6c1,.s6j3 .s6m{background-color:var(--s6w) !important}
.s6j2 .s6c1 .s6cp{color:var(--s-good)}
.s6j2 .s6c1 .s6cp small{opacity:1}
}
/* ---------- v213 (Rob, 5 Oct) ---------- */
/* the next card compare: three cards of different value per point, best first; every row is a card to apply for, so every
dot is green (the amber one marked keeping the ANZ, which left the compare) */
.s6t .s6cl .s6c3 .s6ca::before{background:var(--s-good)}
/* ---------- v214 (Rob, 5 Oct) ---------- */
/* Three journeys, simpler: each lock screen shows the one card its alert is about, tilted in the light, where the ring of
cards was; plain card art, no bank's marks */
.lk .lk1c{position:absolute;left:0;right:0;bottom:122px;height:170px;display:flex;align-items:center;justify-content:center;perspective:700px}
.lk .lk1c::before{content:"";position:absolute;left:50%;top:50%;width:230px;height:150px;margin:-75px 0 0 -115px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);filter:blur(6px)}
.lk .lk1c .cc{position:relative;width:184px;height:116px;border-radius:12px;overflow:hidden;transform:rotateX(16deg) rotateZ(-8deg);box-shadow:0 26px 44px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.26);animation:lk1f 7s ease-in-out infinite}
.lk .lk1c .cc::before{content:"";position:absolute;left:20px;top:44px;width:26px;height:20px;border-radius:5px;background:linear-gradient(135deg,#F1D98F,#BC9545)}
.lk .lk1c .cc::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.26) 0 28%,transparent 46%)}
@keyframes lk1f{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (prefers-reduced-motion:reduce){.lk .lk1c .cc{animation:none}}
/* ---------- v216 (Rob, 5 Oct) ---------- */
/* Plan: the mini card in the sticker's place ("we suggest the runs to help you close your status gap"), flat, a route on the
sticker's green. Import carries the sticker now */
.dir-lounge .sc-card .sc-sugg{rotate:0deg}
.dir-lounge .sc-card .sc-sugg .sgi{flex:none;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#8AF0B2,#2CC36B);box-shadow:0 8px 18px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.9)}
.dir-lounge .sc-card .sc-sugg .sgi svg{width:22px;height:22px;fill:none;stroke:#0B3A20;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.dir-lounge .sc-card .sc-sugg .sgi{width:36px;height:36px;border-radius:10px}.dir-lounge .sc-card .sc-sugg .sgi svg{width:19px;height:19px}}
/* Three journeys: the mini card keeps the 1, 2, 3 only (Rob: "no notification attached to it") */
.sc-card .pn-jour .psg.pck{margin:0;padding:0;border-bottom:0}
/* each journey's alert lifts out of the phone over its screen, in the phone's own 3D space, holds, and sinks back for the
tap. The roll (new.js) places each pop over its alert; the alert under it hides while it is out */
.jpops{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;pointer-events:none}
.dir-lounge:not(.cards-2) .jpops{display:none}
.jpop{position:absolute;left:17px;top:150px;width:266px;font-family:var(--body);font-size:11px;line-height:1.3;opacity:0;transform-origin:50% 50%;--jx:calc(var(--rx,0deg) * -.55);--jy:calc(var(--ry,0deg) * -.55);--jz:calc(var(--rz,0deg) * -.55)}
.jpop .nt{overflow:visible}
.jpop.go{animation:jpop 12s linear forwards}
.jpop.go .ntc{animation:jpsh 12s linear forwards}
@keyframes jpop{0%,8.2%{opacity:0;transform:none}8.3%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.9,.25,1)}13.3%,45%{opacity:1;transform:translateZ(130px) translateY(-8px) rotateZ(var(--jz)) rotateY(var(--jy)) rotateX(var(--jx)) scale(1.06);animation-timing-function:cubic-bezier(.55,0,.75,.2)}49.1%{opacity:1;transform:none}49.2%,100%{opacity:0;transform:none}}
@keyframes jpsh{0%,8.3%{box-shadow:0 1px 2px rgba(4,10,24,.1)}13.3%,45%{box-shadow:0 34px 60px rgba(4,10,24,.42),0 10px 22px rgba(4,10,24,.28)}49.1%,100%{box-shadow:0 1px 2px rgba(4,10,24,.1)}}
@media (max-width:640px){.jpop{--jy:0deg}}
/* each journey's clock, 12 s: the alert lands at .3 s, lifts out at 1 s and holds out to 5.4 s, is back by 5.9 s, a tap at
6 s, the lock lifts by 6.9 s, the row lights at 7.1 s */
.s6j.go .lkl{animation:jlk2 12s linear forwards}
@keyframes jlk2{0%,53.3%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}57.5%,100%{opacity:0;transform:scale(1.07)}}
.s6j.go .lkl .nt{animation:jnt2 12s linear forwards}
@keyframes jnt2{0%,2.5%{max-height:0;opacity:0;transform:translateY(-12px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}5.8%,8.2%{max-height:110px;opacity:1;transform:none}8.3%,49.1%{max-height:110px;opacity:0;transform:none}49.2%,50%{max-height:110px;opacity:1;transform:none;animation-timing-function:ease-in-out}50.8%{max-height:110px;opacity:1;transform:scale(.965)}51.7%,100%{max-height:110px;opacity:1;transform:none}}
.s6j.go .lkl .ntc::after{animation:jtap2 12s linear forwards}
@keyframes jtap2{0%,50%{opacity:0;transform:scale(0)}50.8%{opacity:1;transform:scale(1)}54.2%,100%{opacity:0;transform:scale(9)}}
.dir-lounge .s6j1.go .s6tl .s6f{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,jlitf2 12s linear forwards}
@keyframes jlitf2{0%,59.2%{background-color:transparent}60.8%{background-color:var(--s6fx)}65%,100%{background-color:var(--s6f)}}
.dir-lounge .s6j3.go .s6tl .s6m{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,jlitw2 12s linear forwards}
@keyframes jlitw2{0%,59.2%{background-color:transparent}60.8%{background-color:var(--s6wx)}65%,100%{background-color:var(--s6w)}}
/* the card's timeline (Rob: "the 'inactive' / irrelevant dates really blurred / greyed out so it's just the key one key
thing presented"): the date that matters lit, every other blurred and greyed */
.s6b .s6tx{margin-top:12px}
.s6b .s6tx .s6o > *{opacity:.36;filter:blur(1.8px) grayscale(1)}
/* the next card compare: two cards side by side, each its points and its value a point; the best value lights, with its date
to apply. Three journeys and the Card timeline alike */
.s6vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 16px 0}
.s6vc{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:12px 10px 11px;border-radius:14px;background:var(--s-card);box-shadow:0 4px 14px rgba(0,0,0,.07);opacity:0;transform:translateY(8px)}
.s6vc .cc{width:52px;height:33px;border-radius:5px;margin-bottom:9px}
.s6vc .cc::before{left:7px;top:12px;width:8px;height:7px}
.s6vc .s6vn{font-size:10.5px;font-weight:800;line-height:1.22}
.s6vc .s6vp{margin-top:3px;font-size:8.5px;line-height:1.3;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s6vc .s6cp{display:block;margin-top:10px;font:800 20px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.s6vc .s6vu{margin-top:2px;font-size:8.5px;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s6vc .s6vb{margin-top:8px;font:800 7.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--s-good);opacity:0}
.s6vc .s6ca{margin-top:5px;font-style:normal;font-size:9px;font-weight:700;color:var(--s-ink);display:flex;align-items:center;gap:4px}
.s6vc .s6ca::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--s-good)}
.dir-lounge .s6j2.go .s6vs .s6c1{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,jtile 12s linear forwards}
.dir-lounge .s6j2.go .s6vs .s6c3{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .55s forwards}
@keyframes jtile{0%,59.2%{background-color:var(--s-card)}60.8%{background-color:var(--s6wx)}65%,100%{background-color:var(--s6w)}}
.s6j2.go .s6c1 .s6cp{animation:jbest2 12s linear forwards}
@keyframes jbest2{0%,59.2%{color:var(--s-ink)}60.8%,100%{color:var(--s-good)}}
.s6j2.go .s6c1 .s6vb{animation:hsin .35s 7.6s forwards}
.dir-lounge .s6t.go .s6vs .s6c1{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) 9.65s forwards,s6tile 17s linear forwards}
.dir-lounge .s6t.go .s6vs .s6c3{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) 9.8s forwards}
@keyframes s6tile{0%,63.6%{background-color:var(--s-card)}65.4%{background-color:var(--s6wx)}70%,100%{background-color:var(--s6w)}}
.s6t.go .s6c1 .s6vb{animation:hsin .35s 10.99s forwards}
@media (prefers-reduced-motion:reduce){
.jpops{display:none !important}
.s6vc{opacity:1 !important;transform:none !important}
.s6vs .s6c1{background-color:var(--s6w) !important}
.s6vs .s6c1 .s6cp{color:var(--s-good)}
.s6vs .s6c1 .s6vb{opacity:1}
}
/* ---------- v217 (Rob, 5 Oct) ---------- */
/* the Plan card's bracket line: "Without" in italics (its italic face loads with the page's fonts) */
.sc-card .sc-lead em{font-style:italic}
/* Plan screen (new option): Gap, compare, close. Three screens rolling, 7 s each, with the 1, 2, 3 mini card; the forecast
screens, their mini card and the suggested-runs line step aside. The option shows one or the other */
.dir-lounge:not(.plead-2) .rollp,.dir-lounge:not(.plead-2) .pn-gap{display:none}
.dir-lounge.plead-2 .sc-card.cool .s8:not(.s8g),.dir-lounge.plead-2 .pn-plan{display:none}
/* (v224, Rob, 6 Oct: "include the 'suggested runs' mini card into the feature card"): See suggested runs shows on the story too */
.dir-lounge.prun-1 .rollp .s8g{display:block}
.sc-card .pn-gap .psg.pck{margin:0;padding:0;border-bottom:0}
.sc-card .pn-gap .psg.pck i.on em::after{animation-duration:7s}
.hs.s8g.go{animation:none}
.s8g .fdc{margin-top:12px}
/* 1 Your gap: flown, then booked, then the last 80 dashed in amber, breathing */
.s8g1 .fb{stroke:url(#sr-htch3)}
.s8g1 .fgap{fill:color-mix(in srgb,var(--s-warn) 12%,transparent);stroke:var(--s-warn);stroke-width:1.6;stroke-dasharray:4 3;stroke-linejoin:round;opacity:0}
.s8g1 .k-g{background:color-mix(in srgb,var(--s-warn) 14%,transparent);box-shadow:inset 0 0 0 1.3px var(--s-warn)}
.s8g1.go .fe{animation:fdraw .8s .25s cubic-bezier(.4,0,.2,1) both}
.s8g1.go .fb1{animation:fdraw .6s 1.1s cubic-bezier(.4,0,.2,1) both}
.s8g1.go .fgap{animation:gapin .5s 1.9s cubic-bezier(.2,.8,.2,1) forwards,gappulse 1.6s 2.4s ease-in-out 2}
@keyframes gapin{from{opacity:0}to{opacity:1}}
@keyframes gappulse{0%,100%{fill:color-mix(in srgb,var(--s-warn) 12%,transparent)}50%{fill:color-mix(in srgb,var(--s-warn) 32%,transparent)}}
/* 2 Compare runs: two runs side by side, each its credits and its cost a credit; the best value lights */
.s8g2{--s6w:var(--s-goodbg);--s6wx:color-mix(in srgb,var(--s-good) 30%,transparent)}
.s8g2 .s8rc{display:inline-flex;align-items:center;gap:4px;margin-bottom:9px;padding:4px 7px;border-radius:7px;background:color-mix(in srgb,var(--s-ink) 7%,transparent);color:var(--s-ink);font:800 9px/1 var(--mono);letter-spacing:.04em}
.s8g2 .s8rc svg{width:10px;height:10px;flex:none;fill:currentColor}
.dir-lounge .s8g2.go .s6vs .s6c1{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .4s forwards,gtile 7s linear forwards}
.dir-lounge .s8g2.go .s6vs .s6c3{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .55s forwards}
@keyframes gtile{0%,30%{background-color:var(--s-card)}32.9%{background-color:var(--s6wx)}40%,100%{background-color:var(--s6w)}}
.s8g2.go .s6c1 .s6cp{animation:gbest 7s linear forwards}
@keyframes gbest{0%,30%{color:var(--s-ink)}32.9%,100%{color:var(--s-good)}}
.s8g2.go .s6c1 .s6vb{animation:hsin .35s 2.6s forwards}
/* 3 Gap closed: flown and booked land, the Auckland run drops in and fills the gap, Gold pins */
.s8g3 .fb{stroke:url(#sr-htch4)}
.s8g3.go .fe{animation:fdraw .6s .2s cubic-bezier(.4,0,.2,1) both}
.s8g3.go .fb1{animation:fdraw .5s .75s cubic-bezier(.4,0,.2,1) both}
.s8g3.go .fpl{animation:fdraw .7s 1.9s cubic-bezier(.4,0,.2,1) both,fpfill .4s 2.3s both}
.s8g3.go .fgold{animation:fpin .55s 2.7s cubic-bezier(.2,1.4,.4,1) both}
.s8g3 .fdc,.s8g3 .fyc{margin-top:8px}
.s8g3 .fpr{padding:8px 12px 2px}
.s8g3 .fprl{display:flex;flex-direction:column}
.s8g3 .fpi{display:flex;align-items:center;gap:10px;padding:0;max-height:0;overflow:hidden;opacity:0;transform:translateY(-14px)}
.s8g3 .fpd{flex:none;width:38px;display:flex;flex-direction:column;gap:1px;font-style:normal}
.s8g3 .fpd b{font-size:11px;font-weight:800;line-height:1.1}
.s8g3 .fpd small,.s8g3 .fpt span{color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8g3 .fpd small{font-size:8.5px;font-weight:600}
.s8g3 .fpt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.s8g3 .fpt b{font-size:11px;font-weight:800;line-height:1.2}
.s8g3 .fpt span{font-size:9px;line-height:1.3}
.s8g3 .fpc{flex:none;font:800 11px/1 var(--mono);font-style:normal;padding:5px 7px;border-radius:7px;background:var(--fpb);box-shadow:inset 0 0 0 1.3px var(--fp);color:var(--s-ink)}
.s8g3.go .fpi{animation:fpdrop .5s var(--d) cubic-bezier(.2,1.2,.4,1) both}
@media (prefers-reduced-motion:reduce){
.s8g1 .fgap{opacity:1 !important}
.s8g3 .fpi{opacity:1 !important;transform:none !important;max-height:none !important;padding:6px 0 !important}
.s8g .fsw > span{opacity:0 !important}
.s8g .fsw > span:last-child{opacity:1 !important}
}
/* ---------- v218 (Rob, 5 Oct) ---------- */
/* the Plan story's screens, built like the app's own (v11.1): a big title, the dial card, a call-out card, the flights as the
app lists them, a dark pill for the one action, the app's tab bar. Nothing left half empty */
.hs.s8g{padding-bottom:0}
.s8g .sxh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 16px 0}
.s8g .sxh b{font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.s8g .sxh span{flex:none;font-size:10px;font-weight:700;white-space:nowrap;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8g .fdc{margin-top:9px;padding:10px 12px 9px}
.s8g .fdw{max-width:186px}
.s8g .fsw{font-size:36px}
.s8g .fk{padding-top:8px}
.s8g .sxc{position:relative;display:flex;align-items:center;gap:10px;margin:9px 16px 0;padding:10px 12px;border-radius:14px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08);overflow:hidden;opacity:0;transform:translateY(8px)}
.s8g .sxc b{display:block;font-size:12.5px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.s8g .sxc span{display:block;margin-top:2px;font-size:9.5px;line-height:1.35;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8g .sxi{flex:none;width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.s8g .sxi svg{width:19px;height:19px}
/* 1: mind the gap, a caution sign on the platform edge's yellow and black */
.s8g .sxmind{padding-top:14px}
.s8g .sxmind::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(-45deg,#F5C518 0 6px,#1B2230 6px 12px)}
.s8g .sxmind .sxi{background:#F5C518}
.s8g .sxmind .sxi svg{fill:#1B2230;stroke:none}
.s8g .sxmind .sxi svg .xw{fill:none;stroke:#F5C518;stroke-width:2.4;stroke-linecap:round}
/* 3: back on track, a green tick */
.s8g .sxtrack::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--s-good)}
.s8g .sxtrack .sxi{background:var(--s-goodbg)}
.s8g .sxtrack .sxi svg{fill:var(--s-good);stroke:none}
.s8g .sxtrack .sxi svg .xw{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.theme-dark .s8g .sxtrack .sxi svg .xw{stroke:#0E1116}
/* the flights, as the app lists them: a date block, the codes and an arrow, the fare, the credits */
.s8g .sxl{margin:9px 16px 0;padding:7px 12px 3px;border-radius:14px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.s8g .sxl .lbl{display:block;padding:2px 0 3px}
.s8g .sxr{display:flex;align-items:center;gap:10px;padding:6px 0;opacity:0;transform:translateY(8px)}
.s8g .sxr + .sxr{box-shadow:inset 0 1px 0 var(--s-line)}
.s8g .sxd{flex:none;width:30px;height:31px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal;line-height:1;background:color-mix(in srgb,var(--s-ink) 6%,transparent)}
.s8g .sxd b{font-size:12px;font-weight:800}
.s8g .sxd small{margin-top:2px;font-size:6.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8g .sxr > div{flex:1 1 0;min-width:0}
.s8g .sxr > div b{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:800;letter-spacing:.01em}
.s8g .sxr > div b svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.s8g .sxr > div span{display:block;margin-top:1px;font-size:8.5px;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s8g .sxv{flex:none;font:800 10.5px/1 var(--mono);font-style:normal;font-variant-numeric:tabular-nums}
.s8g .sxr.sxp{margin:0 -12px;padding:6px 12px;background:var(--fpb);box-shadow:inset 0 1px 0 var(--s-line)}
.s8g .sxr.sxp .sxd{background:color-mix(in srgb,var(--s-good) 18%,transparent)}
/* the app's tab bar; Plan lives under Program */
.s8g .sxtab{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:7px 4px 15px;background:color-mix(in srgb,var(--s-card) 94%,transparent);box-shadow:0 -1px 0 var(--s-line)}
.s8g .sxtab span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:7.5px;font-weight:700;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.s8g .sxtab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s8g .sxtab svg.f{fill:currentColor;stroke:none}
.s8g .sxtab .on{color:var(--s-ink)}
/* 2: the gap up top; each run, how much of it it fills; the best value, a pill to plan it */
.s8g2 .sxgap{display:grid;grid-template-columns:1fr auto;gap:7px 8px;align-items:center;margin:9px 16px 0;padding:10px 12px;border-radius:14px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.s8g2 .sxbar{grid-column:1 / -1;position:relative;height:9px;border-radius:5px;background:var(--s-line);overflow:hidden}
.s8g2 .sxbf{position:absolute;left:0;top:0;bottom:0;border-radius:5px 0 0 5px;background:var(--s-acc)}
.s8g2 .sxbg{position:absolute;right:0;top:0;bottom:0;width:11.4%;background:repeating-linear-gradient(-45deg,var(--s-warn) 0 2.5px,transparent 2.5px 5px);opacity:.8}
.s8g2 .sxgap span{font-size:10px;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8g2 .sxgap span b{font-size:12px;font-weight:800;color:var(--s-ink)}
.s8g2 .sxgap em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--s-warn)}
.s8g2 .sxrun{position:relative;margin:9px 16px 0;padding:11px 12px 12px;border-radius:14px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08);opacity:0;transform:translateY(8px)}
.s8g2 .sxrt{display:flex;align-items:center;gap:6px}
.s8g2 .sxrt b{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1}
.s8g2 .sxpl{flex:1 1 0;display:flex;align-items:center;justify-content:center;max-width:58px;height:12px;background:linear-gradient(90deg,var(--s-mute) 50%,transparent 0) 0 50% / 5px 1.3px repeat-x;color:var(--s-ink)}
.s8g2 .sxpl svg{width:13px;height:13px;padding:0 3px;background:var(--s-card)}
.s8g2 .sxbadge{margin-left:auto;padding:4px 7px;border-radius:999px;font:800 7.5px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;font-style:normal;background:var(--s-goodbg);color:var(--s-good);opacity:0}
.s8g2 .sxmeta{display:block;margin-top:4px;font-size:9px;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8g2 .sxfill{position:relative;height:8px;margin-top:10px;border-radius:4px;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--s-warn) 32%,transparent) 0 2.5px,transparent 2.5px 5px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-warn) 40%,transparent)}
.s8g2 .sxfill i{position:absolute;left:0;top:0;bottom:0;width:var(--f);border-radius:4px;background:var(--s-good);transform-origin:left;transform:scaleX(0)}
.s8g2 .sxkpi{display:flex;align-items:baseline;gap:12px;margin-top:8px;font-size:9px;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8g2 .sxkpi b{font:800 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--s-ink)}
.s8g2 .sxkpi .sxn{margin-left:auto;font-size:9.5px;font-weight:800;color:var(--s-ink)}
.s8g2 .sxbest .sxkpi .sxn{color:var(--s-good)}
.s8g2 .sxbtn{position:relative;display:flex;align-items:center;justify-content:center;height:31px;margin-top:11px;border-radius:16px;background:var(--s-ink);color:var(--s-card);font-size:11px;font-weight:800;overflow:hidden}
.s8g2 .sxbtn::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,255,255,.3);opacity:0;transform:scale(0)}
/* each screen's clock, 7 s */
.s8g.go .sxc,.s8g.go .sxr,.s8g2.go .sxrun{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards}
.s8g1.go .sxmind{--d:2.25s}
.s8g1.go .sxmind .sxi{animation:sxwarn .9s 2.6s ease-in-out 2}
@keyframes sxwarn{0%,100%{transform:none}30%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}}
.s8g2.go .sxrun{--d:.35s}
.s8g2.go .sxrun + .sxrun{--d:.5s}
.s8g2.go .sxbest .sxfill i{animation:sxgrow .7s 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.s8g2.go .sxrun + .sxrun .sxfill i{animation:sxgrow .7s 1.35s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes sxgrow{from{transform:scaleX(0)}to{transform:none}}
.s8g2.go .sxbadge{animation:hsin .35s 2.3s forwards}
.s8g2.go .sxbest{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .35s forwards,sxlit 7s linear forwards}
@keyframes sxlit{0%,32%{box-shadow:0 6px 18px rgba(0,0,0,.08)}35%,100%{box-shadow:0 6px 18px rgba(0,0,0,.08),inset 0 0 0 1.5px var(--s-good)}}
.s8g2.go .sxbtn{animation:sxpress 7s linear forwards}
@keyframes sxpress{0%,77%{transform:none}78.5%{transform:scale(.96)}80.5%,100%{transform:none}}
.s8g2.go .sxbtn::after{animation:sxtap 7s linear forwards}
@keyframes sxtap{0%,77%{opacity:0;transform:scale(0)}78.5%{opacity:1;transform:scale(1)}86%,100%{opacity:0;transform:scale(9)}}
.s8g3.go .sxtrack{--d:2.9s}
.s8g3.go .sxtrack .sxi{animation:fpin .55s 3.1s cubic-bezier(.2,1.4,.4,1) both}
.s8g3.go .sxr.sxp{animation:fpdrop .5s var(--d) cubic-bezier(.2,1.2,.4,1) both}
@media (prefers-reduced-motion:reduce){
.s8g .sxc,.s8g .sxr,.s8g2 .sxrun{opacity:1 !important;transform:none !important}
.s8g2 .sxfill i{transform:none !important}
.s8g2 .sxbadge{opacity:1 !important}
.s8g2 .sxbest{box-shadow:0 6px 18px rgba(0,0,0,.08),inset 0 0 0 1.5px var(--s-good) !important}
}
/* the 1, 2, 3: Rob's longer steps get a wider card, and wrap on a phone */
.sc-card .pn-gap{width:288px}
@media (max-width:640px){.sc-card .pn-gap{width:250px}.sc-card .pn-gap .psg.pck span{white-space:normal}}
/* Import: the sticker leaves the copy for the phone's edge, stuck on at a tilt, in the phone's own space; the year card stays
beside the phone */
.sxstick{position:absolute;left:-46px;top:118px;transform:translateZ(36px) rotateZ(calc(var(--rz,0deg) * -.55)) rotateX(calc(var(--rx,0deg) * -.45)) rotate(-7deg);transform-origin:20% 50%;pointer-events:none;z-index:3}
.dir-lounge .sc-card .sxstick .sc-ditch{margin:0;rotate:0deg;background:rgba(30,26,46,.9);border-color:rgba(255,255,255,.28);box-shadow:0 18px 36px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.16)}
@media (max-width:640px){.sxstick{left:-26px;top:96px}}
/* (v218) step 2 fills its screen: bigger runs, a row for more; step 3's list clips its lit row to the card */
.s8g .sxl{overflow:hidden}
.s8g2 .sxgap{padding:12px 13px}
.s8g2 .sxrun{padding:13px 13px 14px}
.s8g2 .sxrt b{font-size:19px}
.s8g2 .sxfill{height:10px;margin-top:12px;border-radius:5px}
.s8g2 .sxfill i{border-radius:5px}
.s8g2 .sxkpi{margin-top:10px}
.s8g2 .sxkpi b{font-size:14px}
.s8g2 .sxbtn{height:34px;margin-top:12px;border-radius:17px;font-size:11.5px}
.s8g2 .sxmore{display:flex;align-items:center;justify-content:space-between;margin:9px 16px 0;padding:11px 13px;border-radius:14px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08);font-size:11px;font-weight:800;opacity:0;transform:translateY(8px)}
.s8g2 .sxmore svg{width:14px;height:14px;fill:none;stroke:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink));stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.s8g2.go .sxmore{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .65s forwards}
@media (prefers-reduced-motion:reduce){.s8g2 .sxmore{opacity:1 !important;transform:none !important}}
.s8g3.go .sxr.sxp{animation:sxdrop .5s var(--d) cubic-bezier(.2,1.2,.4,1) both}
@keyframes sxdrop{from{max-height:0;padding-top:0;padding-bottom:0;opacity:0;transform:translateY(-14px)}to{max-height:64px;padding-top:6px;padding-bottom:6px;opacity:1;transform:none}}
/* (v218) the sticker sits low on the phone's left edge, over the screen's open space, clear of its figures */
.sxstick{left:-64px;top:318px}
@media (max-width:640px){.sxstick{left:-40px;top:300px}}
@media (max-width:640px){.sxstick{left:-8px}}
/* (v218) the planned flight carries a chip, as the app's runs do */
.s8g .sxchip{margin-left:4px;padding:2px 5px;border-radius:5px;font:800 6.5px/1.2 var(--body);letter-spacing:.07em;text-transform:uppercase;font-style:normal;background:color-mix(in srgb,var(--s-good) 22%,transparent);color:color-mix(in srgb,var(--s-good) 70%,var(--s-ink))}
.theme-dark .s8g .sxchip{color:var(--s-ink)}
/* ---------- v219 (Rob, 5 Oct) ---------- */
/* Import: the sticker beside Coming 2027, a chip of its own: the chip's height, glass and type, the crying sheet at its start */
.sc-card.dusk .sc-chips{align-items:center;gap:8px}
.dir-lounge .sc-card.dusk .sc-chips .sc-ditch{margin:0;rotate:0deg;gap:7px;height:28px;padding:0 12px 0 4px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);box-shadow:none}
.dir-lounge .sc-card.dusk .sc-chips .sc-ditch .cry{width:26px;height:26px;margin:-3px 0 -3px -2px}
.dir-lounge .sc-card.dusk .sc-chips .sc-ditch > span{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.dir-lounge .sc-card.dusk .sc-chips .sc-ditch b{font:600 13px/1 var(--body);letter-spacing:0;color:rgba(244,246,251,.92)}
.dir-lounge .sc-card.dusk .sc-chips .sc-ditch i{font:500 12px/1 var(--body);letter-spacing:0;color:rgba(244,246,251,.66)}
@media (max-width:640px){.dir-lounge .sc-card.dusk .sc-chips .sc-ditch{height:26px}.dir-lounge .sc-card.dusk .sc-chips .sc-ditch b{font-size:12.5px}.dir-lounge .sc-card.dusk .sc-chips .sc-ditch i{font-size:11.5px}}
/* ---------- v221 (Rob, 6 Oct) ---------- */
/* the Plan story's screens, ones any member could see: each run's gap in the app's Gap column words, as a chip */
.s8g2 .sxkpi{align-items:center}
/* the Plan card: Ditch the spreadsheet beside See suggested runs, a matched pair; alone on the story option */
.sc-card .sc-minis{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:-8px}
.dir-lounge .sc-card .sc-minis .sc-ditch{margin-top:0;rotate:0deg;align-self:stretch}
/* side by side wherever the card is wide enough: both a size smaller than the lone sticker was */
@media (min-width:641px){
.dir-lounge .sc-card .sc-minis{gap:8px}
.dir-lounge .sc-card .sc-minis .sc-ditch{gap:8px;padding:8px 12px 8px 8px}
.dir-lounge .sc-card .sc-minis .sc-ditch b{font-size:14px}
.dir-lounge .sc-card .sc-minis .sc-ditch i{font-size:12px}
.dir-lounge .sc-card .sc-minis .sc-sugg .sgi{width:36px;height:36px;border-radius:10px}
.dir-lounge .sc-card .sc-minis .sc-sugg .sgi svg{width:19px;height:19px}
.dir-lounge .sc-card .sc-minis .sc-ditch .cry{width:42px;height:42px;margin:-4px 0 -4px -3px}
}
/* ---------- v222 (Rob, 6 Oct) ---------- */
/* Compare, one idea: the gap. The runs lose their bars; the gap bar at the top moves as each run is picked (the Flexible
Economy return at 1.4 s, the Business Sale return at 3.2 s), its numbers with it */
.s8g2 .sxbp{position:absolute;top:0;bottom:0;width:0;border-radius:0 5px 5px 0;background:var(--s-good)}
.s8g2.go .sxbp{animation:sxprev 7s linear forwards}
@keyframes sxprev{0%,25%{width:0}29%,100%{width:11.43%}}
.s8g2 .sxsw{display:inline-grid;font-weight:800}
.s8g2 .sxsw > span{grid-area:1/1;opacity:0}
.s8g2 .sxsw > span:first-child{opacity:1}
.s8g2.go .sxsw > span{animation:dnin .3s var(--a) cubic-bezier(.2,.8,.2,1) both,dnout .2s var(--b) forwards}
.s8g2.go .sxgap em{animation:sxgapok 7s linear forwards}
.s8g2 .sxgap em .sxsw{justify-items:end}
.s8g2 .sxgap .sxsw > span{font-size:inherit;color:inherit}
/* the gap card leads the screen: a little bigger than the runs' type */
.s8g2 .sxgap{padding:14px 14px 13px}
.s8g2 .sxbar{height:12px;border-radius:6px}
.s8g2 .sxbf{border-radius:6px 0 0 6px}
.s8g2 .sxbp{border-radius:0 6px 6px 0}
.s8g2 .sxgap span{font-size:11px}
.s8g2 .sxgap span b{font-size:14px}
.s8g2 .sxgap em{font-size:12px}
.s8g2 .sxrun{padding:14px 14px 15px}
@keyframes sxgapok{0%,26%{color:var(--s-warn)}28%,100%{color:var(--s-good)}}
/* each run: its fit top right and its credits first; its cost a credit and Best value second */
.s8g2 .sxfit{margin-left:auto;padding:5px 9px;border-radius:999px;font-style:normal;font-size:10px;font-weight:800;line-height:1}
.s8g2 .sxfit.ok{background:var(--s-goodbg);color:var(--s-good)}
.s8g2 .sxfit.go{background:color-mix(in srgb,var(--s-warn) 10%,transparent);color:var(--s-warn)}
.s8g2 .sxkpi{align-items:baseline;gap:14px;margin-top:12px}
.s8g2 .sxkpi .sxsc{font-size:10px;font-weight:800;color:var(--s-ink)}
.s8g2 .sxkpi .sxsc b{font-size:21px}
.s8g2 .sxkpi .sxcpc b{font-size:12px;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s8g2 .sxval{margin-left:auto;align-self:center;padding:4px 7px;border-radius:999px;font:800 7.5px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;font-style:normal;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink));box-shadow:inset 0 0 0 1px var(--s-line)}
/* (v223) only the +80 run is picked, at 1.8 s: a tick, a light green card, a lift */
.s8g2.go .sxo1{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .35s forwards,sxpick 7s linear forwards}
.s8g2.go .sxo2{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .5s forwards}
@keyframes sxpick{0%,25%{background-color:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08);translate:0 0}28%,100%{background-color:color-mix(in srgb,var(--s-good) 11%,var(--s-card));box-shadow:0 16px 30px rgba(0,0,0,.16),inset 0 0 0 1.5px var(--s-good);translate:0 -4px}}
.s8g2 .sxtk{position:absolute;top:-7px;left:-7px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;background:var(--s-good);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--s-good) 11%,var(--s-card));transform:scale(0)}
.s8g2 .sxtk svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.theme-dark .s8g2 .sxtk svg{stroke:#0E1116}
.s8g2.go .sxtk{animation:sxtick 7s linear forwards}
@keyframes sxtick{0%,25.5%{transform:scale(0)}27.5%{transform:scale(1.25)}29.5%,100%{transform:scale(1)}}
/* Add to my year, under the runs, for the run picked */
.s8g2 > .sxbtn{margin:12px 16px 0;opacity:0;transform:translateY(8px)}
.s8g2.go > .sxbtn{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .65s forwards,sxpress 7s linear forwards}
.s8g2.go .sxmore{animation-delay:.8s}
@media (prefers-reduced-motion:reduce){
.s8g2 .sxbp{width:11.43% !important}
.s8g2 .sxsw > span{opacity:0 !important}
.s8g2 .sxsw > span:last-child{opacity:1 !important;transform:none !important}
.s8g2 .sxgap em{color:var(--s-good) !important}
.s8g2 .sxo1{background-color:color-mix(in srgb,var(--s-good) 11%,var(--s-card)) !important;box-shadow:0 16px 30px rgba(0,0,0,.16),inset 0 0 0 1.5px var(--s-good) !important;translate:0 -4px}
.s8g2 .sxtk{transform:none !important}
.s8g2 > .sxbtn{opacity:1 !important;transform:none !important}
}
/* (v223) the route's dashes leave a gap for the plane, so the picked card's green shows round it */
.s8g2 .sxpl{position:relative;background:none}
.s8g2 .sxpl::before,.s8g2 .sxpl::after{content:"";position:absolute;top:50%;height:1.3px;margin-top:-.65px;width:calc(50% - 10px);background:linear-gradient(90deg,var(--s-mute) 50%,transparent 0) 0 0 / 5px 1.3px repeat-x}
.s8g2 .sxpl::before{left:0}
.s8g2 .sxpl::after{right:0}
.s8g2 .sxpl svg{background:none}
/* (v223) with Three journeys for everyone, the Cards card no longer sets the first row's height, and the Plan card fell from
918 to 846 px tall at 1440: the story's planned run sank below the card's edge. The Plan card's phone area grows, back to about 910 */
.dir-lounge .sc-card.cool .sc-vis{min-height:calc(540px + var(--pdrop,0px))}
/* (v224) the rank screen compares you with the median: the gap's label comes in once you have landed */
.s3x.go .dmv{animation-delay:2.8s}
.s3x .dmv1{font-size:10.5px;font-weight:800}
/* v225 (Rob, 6 Oct: "for any version where the words are in the window, it's too close to have the next heading so close under
the stop overpaying - so we skip the welcome aboard heading and subhead and instead go straight into feature cards. in version
where words separate from window - keep"). Round the words (Words in the window; Through the window wherever its words sit in
the window: every phone, half a desktop screen) the welcome folds away, kept for screen readers as where the cabin greets, and
the first card comes up under the words (Thru, new.js). Beside or under the window, the cabin's welcome stays. No -1px margin
here: the words take the folded box's left edge */
.dir-lounge.hero-thru.thru-inwin #v-lounge-home #features .feat-head{position:absolute !important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* v227 (Rob, 7 Oct: "the wordmark should not change - should stay as it is for product font for all type options"): the
wordmark, header and footer, keeps Product's type in every look: Schibsted Grotesk 700, -.03em, as cased, at Product's
sizes (the header's 25 px, as its markup sets it, 21 px to 1240 px, 17 px on a phone; the footer's 22 px stays) */
#dir-lounge.dir-lounge{--wordmark:"Schibsted Grotesk",sans-serif;--wordmark-weight:700;--wordmark-track:-.03em;--wordmark-case:none;--wordmark-var:normal}
#dir-lounge.dir-lounge header .serif{font-size:25px !important;letter-spacing:var(--wordmark-track) !important}
@media (max-width:1240px){#dir-lounge.dir-lounge header .serif{font-size:21px !important}}
@media (max-width:640px){#dir-lounge.dir-lounge header .serif{font-size:17px !important}}
/* v228 (Rob, 7 Oct: card 2, journey 2 "should we present options more similar to way options are presented in feature card 1
journey 2? also, the point of that is to be reminded when eligible to reapply right?"; his picks: stacked like Compare, an
eligible-again card on top, each card's chip its eligibility, Add to my cards). Compare's parts on the journey's own 12 s
clock: the lock lifts by 6.9 s, the Westpac is picked at 7.6 s (a tick, a green card, a lift), Add to my cards pressed at 9.4 s */
.s6x .s6xg{display:grid;grid-template-columns:1fr auto;gap:7px 8px;align-items:center;margin:12px 16px 0;padding:13px 14px 13px;border-radius:14px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.s6x .s6xl{grid-column:1 / -1;font-size:10px;font-weight:800;color:var(--s-ink)}
.s6x .s6xb{grid-column:1 / -1;position:relative;height:12px;border-radius:6px;background:var(--s-line);overflow:hidden}
.s6x .s6xb i{position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,var(--s-acc) 0 88%,var(--s-good) 88%)}
.s6x .s6xn{font-size:11px;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s6x .s6xn b{font-size:14px;font-weight:800;color:var(--s-ink)}
.s6x .s6xg em{font-style:normal;font-size:12px;font-weight:800;color:var(--s-good)}
.s6x .s6xo{position:relative;margin:9px 16px 0;padding:14px 14px 15px;border-radius:14px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08);opacity:0;transform:translateY(8px)}
.s6x .s6xt{display:flex;align-items:center;gap:8px}
.s6x .s6xt .cc{width:34px;height:22px}
.s6x .s6xt .cc::before{left:5px;top:8px}
.s6x .s6xt b{min-width:0;font-size:12.5px;font-weight:800;line-height:1.15}
.s6x .s6xf{margin-left:auto;flex:none;padding:5px 9px;border-radius:999px;font-style:normal;font-size:10px;font-weight:800;line-height:1;white-space:nowrap}
.s6x .s6xf.ok{background:var(--s-goodbg);color:var(--s-good)}
.s6x .s6xf.go{background:color-mix(in srgb,var(--s-warn) 10%,transparent);color:var(--s-warn)}
.s6x .s6xm{display:block;margin-top:6px;font-size:9px;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s6x .s6xk{display:flex;align-items:baseline;gap:14px;margin-top:11px}
.s6x .s6xp{font-size:10px;font-weight:800;color:var(--s-ink)}
.s6x .s6xp b{font:800 20px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.s6x .s6xc{font-size:9px;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s6x .s6xc b{font:800 12px/1 var(--mono);font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.s6x .s6xv{margin-left:auto;align-self:center;padding:4px 7px;border-radius:999px;font:800 7.5px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;font-style:normal;color:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink));box-shadow:inset 0 0 0 1px var(--s-line)}
.s6x .sxtk{position:absolute;top:-7px;left:-7px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;background:var(--s-good);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--s-good) 11%,var(--s-card));transform:scale(0)}
.s6x .sxtk svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.theme-dark .s6x .sxtk svg{stroke:#0E1116}
.s6x .s6xbtn{position:relative;display:flex;align-items:center;justify-content:center;height:34px;margin:12px 16px 0;border-radius:17px;background:var(--s-ink);color:var(--s-card);font-size:11.5px;font-weight:800;overflow:hidden;opacity:0;transform:translateY(8px)}
.s6x .s6xbtn::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,255,255,.3);opacity:0;transform:scale(0)}
.dir-lounge .s6x.go .s6xo1{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,s6xpick 12s linear forwards}
.dir-lounge .s6x.go .s6xo2{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .55s forwards}
@keyframes s6xpick{0%,63.3%{background-color:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08);translate:0 0}65.4%,100%{background-color:color-mix(in srgb,var(--s-good) 11%,var(--s-card));box-shadow:0 16px 30px rgba(0,0,0,.16),inset 0 0 0 1.5px var(--s-good);translate:0 -4px}}
.s6x.go .sxtk{animation:s6xtick 12s linear forwards}
@keyframes s6xtick{0%,63.3%{transform:scale(0)}64.6%{transform:scale(1.25)}65.8%,100%{transform:scale(1)}}
.dir-lounge .s6x.go .s6xbtn{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .65s forwards,s6xpress 12s linear forwards}
@keyframes s6xpress{0%,78.3%{transform:none}79.2%{transform:scale(.96)}80.4%,100%{transform:none}}
.s6x.go .s6xbtn::after{animation:s6xtap 12s linear forwards}
@keyframes s6xtap{0%,78.3%{opacity:0;transform:scale(0)}79.2%{opacity:1;transform:scale(1)}83.3%,100%{opacity:0;transform:scale(9)}}
@media (prefers-reduced-motion:reduce){
.s6x .s6xo,.s6x .s6xbtn{opacity:1 !important;transform:none !important}
.s6x .s6xo1{background-color:color-mix(in srgb,var(--s-good) 11%,var(--s-card)) !important;box-shadow:0 16px 30px rgba(0,0,0,.16),inset 0 0 0 1.5px var(--s-good) !important;translate:0 -4px}
.s6x .sxtk{transform:none !important}
}
/* (v228) each card's figures on one line: the points a size down from Compare's credits, nothing wraps */
.s6x .s6xk{gap:12px}
.s6x .s6xp,.s6x .s6xc,.s6x .s6xv{white-space:nowrap}
.s6x .s6xp b{font-size:17px}
/* (v228) each card's name in two lines at most: a little more room beside the chip */
.s6x .s6xo{padding-left:13px;padding-right:13px}
.s6x .s6xt{gap:6px}
.s6x .s6xt .cc{width:32px;height:21px}
.s6x .s6xt b{font-size:12px;letter-spacing:-.01em}
.s6x .s6xf{padding:4px 6px;font-size:9.5px}
/* v228 (Rob, 7 Oct: "the data section in FAQ - merge into one data question (have subsections"): one question, three parts */
.fa-parts{display:flex;flex-direction:column;gap:14px}
.fa-part{display:flex;flex-direction:column;gap:3px}
.fa-part b{font-weight:700;color:var(--ink,inherit)}
/* (v228) card 2's 1, 2, 3: step 2's longer line ("Know when to apply, and for which card"). v229 (Rob, 7 Oct: "'know when to
apply and for which card' doesn't fit on mini card properly": cut off past "which" on a desktop): it wraps at every width, in
two even lines */
.sc-card .pn-jour .psg.pck span{white-space:normal;text-wrap:balance}
/* v228 (Rob, 7 Oct: "why are these not all aligned/right hand side consistent edged"): the crew's bios, the boarding pass and
Rob vs Frank share one right edge, the section's (the pass was capped at 880 px, Rob vs Frank at 960) */
.dir-lounge #founders .story-pass,.dir-lounge #founders .tot2{max-width:none !important}
/* v228 (Rob, 7 Oct: "half the phone screen is empty.... we can't lead with this! please chekc all screens on the phones at top of
page"; "fill the screen / look at the feature mock ups?"): the hero phone's screens fill it, as the feature cards' do: the
app's tab bar at the foot, and each screen's addition in early enough to be seen in the reel */
.hero-phone .hs .sxtab{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-around;padding:7px 4px 15px;background:color-mix(in srgb,var(--s-card) 94%,transparent);box-shadow:0 -1px 0 var(--s-line)}
.hero-phone .hs .sxtab span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:7.5px;font-weight:700;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.hero-phone .hs .sxtab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-phone .hs .sxtab svg.f{fill:currentColor;stroke:none}
.hero-phone .hs .sxtab .on{color:var(--s-ink)}
.hero-phone .s1 .hx1{position:absolute;left:0;right:0;top:342px}
.hero-phone .s1.go .hx1 .sub,.hero-phone .s1.go .hx1 .mini{animation-delay:.45s}
.hero-phone .s1.go .hx1 .mr:nth-child(1){animation-delay:.55s}
.hero-phone .s1.go .hx1 .mr:nth-child(2){animation-delay:.68s}
.hero-phone .s3.go .mr:nth-child(4){animation-delay:1.76s}
.hero-phone .s6.go .r6{animation-delay:1.35s}
.hero-phone .s6.go .r7{animation-delay:1.5s}
.hero-phone .hxbtn{display:flex;align-items:center;justify-content:center;height:34px;margin:12px 16px 0;border-radius:17px;background:var(--s-ink);color:var(--s-card);font-size:11.5px;font-weight:800;opacity:0;transform:translateY(8px)}
.hero-phone .s5.go .hxbtn{animation:hsrise .5s 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero-phone .hxmore{display:flex;align-items:center;justify-content:space-between;margin:9px 16px 0;padding:11px 13px;border-radius:14px;background:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08);font-size:11px;font-weight:800;opacity:0;transform:translateY(8px)}
.hero-phone .hxmore svg{width:14px;height:14px;fill:none;stroke:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink));stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-phone .s7.go .hxmore{animation:hsrise .5s 1.2s cubic-bezier(.2,.8,.2,1) forwards}
.hero-phone .s4.go .hxmore{animation:hsrise .5s 3s cubic-bezier(.2,.8,.2,1) forwards}
@media (prefers-reduced-motion:reduce){.hero-phone .hxbtn,.hero-phone .hxmore{opacity:1 !important;transform:none !important}}
/* (v228) the third line of the working, and the route's fifth run; Your year's lower half in sooner, so no screen sits half empty */
.hero-phone .s1.go .hx1 .mr:nth-child(3){animation-delay:.81s}
.hero-phone .s3.go .mr:nth-child(5){animation-delay:1.88s}
.hero-phone .s4.go .sub,.hero-phone .s4.go .mini{animation-delay:1.1s}
.hero-phone .s4.go .mr:nth-child(1){animation-delay:1.22s}
.hero-phone .s4.go .mr:nth-child(2){animation-delay:1.36s}
.hero-phone .s4.go .hxmore{animation-delay:1.55s}
/* ---------- v229 (Rob, 7 Oct) ---------- */
/* "the font selected for the points / $/SC on journey 2, feature card 2 looks too AI - please choose different font": the
app's figures in the app's own face, bold with even digits, on every phone screen (a direct correction applies everywhere);
the spreadsheet keeps its typewriter face */
.hs{--mono:var(--body)}
.s9m .mx,.s9m .m9rip b{font-family:"IBM Plex Mono",monospace}
.s6x .s6xp b{letter-spacing:-.01em}
/* its digits as set, not spaced to a grid: in this face even digits spread the comma and the point ("150 , 000") */
.hs .mr .v,.s7 .pr .v,.s6 .lbr .cpc,.s6t .s6cp,.s6j .s6cp,.s6vc .s6cp,.s8p .fpc,.s8g3 .fpc,.s8g2 .s8rc,.s8g .sxv,.s8g2 .sxkpi b,.s6x .s6xp b,.s6x .s6xc b{font-variant-numeric:normal}
.hs .num:not(.fsw):not(.m9sw){font-variant-numeric:normal}
/* "let's blur the second card option (similar to 'bank the bonus')": the card you can't get yet, blurred and greyed as the
timelines' other dates */
.s6x .s6xo2 > *{opacity:.36;filter:blur(1.8px) grayscale(1)}
/* "we also need more time on each screen; it's too fast - maybe 3 more seconds": each journey 15 s (data-dwell, build.py).
The alert holds out 1.5 s longer (lands .3 s, out at 1 s, holds to 6.9 s, back by 7.4 s, a tap at 7.5 s, the lock lifts by
8.4 s); the screen after it 1.5 s longer (the row lights at 8.6 s; journey 2's pick at 9.1 s, its press at 11.4 s) */
.sc-card .pn-jour .psg.pck i.on em::after{animation-duration:15s}
.jpop.go{animation:jpop3 15s linear forwards}
.jpop.go .ntc{animation:jpsh3 15s linear forwards}
@keyframes jpop3{0%,6.56%{opacity:0;transform:none}6.667%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.2,.9,.25,1)}10.667%,46%{opacity:1;transform:translateZ(130px) translateY(-8px) rotateZ(var(--jz)) rotateY(var(--jy)) rotateX(var(--jx)) scale(1.06);animation-timing-function:cubic-bezier(.55,0,.75,.2)}49.28%{opacity:1;transform:none}49.36%,100%{opacity:0;transform:none}}
@keyframes jpsh3{0%,6.667%{box-shadow:0 1px 2px rgba(4,10,24,.1)}10.667%,46%{box-shadow:0 34px 60px rgba(4,10,24,.42),0 10px 22px rgba(4,10,24,.28)}49.28%,100%{box-shadow:0 1px 2px rgba(4,10,24,.1)}}
.s6j.go .lkl{animation:jlk3 15s linear forwards}
@keyframes jlk3{0%,52.64%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}56%,100%{opacity:0;transform:scale(1.07)}}
.s6j.go .lkl .nt{animation:jnt3 15s linear forwards}
@keyframes jnt3{0%,2%{max-height:0;opacity:0;transform:translateY(-12px) scale(.96);animation-timing-function:cubic-bezier(.2,.8,.2,1)}4.667%,6.56%{max-height:150px;opacity:1;transform:none}6.667%,49.28%{max-height:150px;opacity:0;transform:none}49.36%,50%{max-height:150px;opacity:1;transform:none;animation-timing-function:ease-in-out}50.64%{max-height:150px;opacity:1;transform:scale(.965)}51.36%,100%{max-height:150px;opacity:1;transform:none}}
.s6j.go .lkl .ntc::after{animation:jtap3 15s linear forwards}
@keyframes jtap3{0%,50%{opacity:0;transform:scale(0)}50.64%{opacity:1;transform:scale(1)}53.36%,100%{opacity:0;transform:scale(9)}}
.dir-lounge .s6j1.go .s6tl .s6f{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,jlitf3 15s linear forwards}
@keyframes jlitf3{0%,57.36%{background-color:transparent}58.64%{background-color:var(--s6fx)}62%,100%{background-color:var(--s6f)}}
.dir-lounge .s6j3.go .s6tl .s6m{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,jlitw3 15s linear forwards}
@keyframes jlitw3{0%,57.36%{background-color:transparent}58.64%{background-color:var(--s6wx)}62%,100%{background-color:var(--s6w)}}
.dir-lounge .s6x.go .s6xo1{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .45s forwards,s6xpick3 15s linear forwards}
@keyframes s6xpick3{0%,60.64%{background-color:var(--s-card);box-shadow:0 6px 18px rgba(0,0,0,.08);translate:0 0}62.32%,100%{background-color:color-mix(in srgb,var(--s-good) 11%,var(--s-card));box-shadow:0 16px 30px rgba(0,0,0,.16),inset 0 0 0 1.5px var(--s-good);translate:0 -4px}}
.s6x.go .sxtk{animation:s6xtick3 15s linear forwards}
@keyframes s6xtick3{0%,60.64%{transform:scale(0)}61.68%{transform:scale(1.25)}62.64%,100%{transform:scale(1)}}
.dir-lounge .s6x.go .s6xbtn{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .65s forwards,s6xpress3 15s linear forwards}
@keyframes s6xpress3{0%,76%{transform:none}76.667%{transform:scale(.96)}77.667%,100%{transform:none}}
.s6x.go .s6xbtn::after{animation:s6xtap3 15s linear forwards}
@keyframes s6xtap3{0%,76%{opacity:0;transform:scale(0)}76.667%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(9)}}
/* ---------- v233 (Rob, 7 Oct: "status runner (to) on boarding pass overwriting seat?") ---------- */
/* the route's words fit the pass at every width: from 641 to 819 px they ran under the stub, and on narrow phones into the
edge. They keep their size wherever they fitted, and shrink only as far as the pass needs */
.dir-lounge .story-pass{container-type:inline-size}
.dir-lounge .story-pass .sp-card{--sp-fs:max(21px,min(clamp(30px,3.7vw,46px),calc((100cqi - var(--stub) - 152px) / 11.5)))}
.dir-lounge .story-pass :is(.sp-end b,.sp-path){font-size:var(--sp-fs)}
@media (max-width:640px){
.dir-lounge .story-pass .sp-card{--sp-fs:max(16px,min(clamp(19px,6vw,24px),calc((100cqi - 94px) / 11.5)))}
}
/* ---------- v234 (Rob, 8 Oct): the top screens tease the cards ---------- */
/* Top screens, Teasers: three of the cards' own screens in the phone (a cheaper run found; the best run on the board, picked;
back on track for Gold), 8 s each; the six dashboards (Dashboards, the site before) sit out */
.hero-phone .tzs,#v-lounge-home .hero-steps{display:none}
.dir-lounge.hero-tz .hero-phone .slides{display:none}
.dir-lounge.hero-tz .hero-phone .tzs{display:flex;width:300%;height:100%;transition:transform .75s cubic-bezier(.65,0,.35,1)}
.hero-phone .tz{flex:none;position:relative;width:33.3334%;height:100%;overflow:hidden}
/* the leaderboard's best run, picked: a green ring and tint, and a tick on its corner */
.s6tz .lbr.r1{position:relative;z-index:0}
.s6tz .lbr.r1::before{content:"";position:absolute;inset:-1px -7px;border-radius:11px;z-index:-1;opacity:0;
background:color-mix(in srgb,var(--s-good) 11%,var(--s-card));box-shadow:inset 0 0 0 1.5px var(--s-good),0 10px 22px rgba(0,0,0,.12)}
.s6tz .tzk{position:absolute;left:-12px;top:-6px;z-index:2;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--s-good);box-shadow:0 0 0 2.5px var(--s-card);transform:scale(0)}
.s6tz .tzk svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.theme-dark .s6tz .tzk svg{stroke:#0E1116}
.s6tz.go .lbr.r1::before{animation:tzon .45s 2.6s ease-out forwards}
.s6tz.go .tzk{animation:tzk .5s 2.75s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes tzon{to{opacity:1}}
@keyframes tzk{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.s6tz .lbr.r1::before{opacity:1}.s6tz .tzk{transform:none}}
/* the mini card beside the phone: the cards' own steps, the one on show lit with its 8 s bar; a tap on a step goes to it (it
does the dots' job). Glass as the hero's own pieces; new.js places it at the phone's left and fades it with the phone */
.dir-lounge.hero-tz #v-lounge-home .hero-steps{display:block}
.hero-steps{position:absolute;left:0;top:0;z-index:7;width:220px;padding:8px 14px 4px;border-radius:18px;box-sizing:border-box;
background:var(--glass-chip,rgba(255,255,255,.6));border:1px solid var(--glass-line,rgba(255,255,255,.7));box-shadow:var(--glass-shadow,0 18px 40px rgba(16,20,52,.18));
-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);color:var(--ink);opacity:0;transition:opacity .6s ease;pointer-events:none}
.hero-steps.ready{opacity:var(--tzo,1);pointer-events:auto}
.hero-steps i{position:relative;display:flex;align-items:center;gap:10px;padding:8px 0 11px;font:600 12.5px/1.25 var(--body);font-style:normal;color:var(--muted);cursor:pointer}
.hero-steps i + i{border-top:0}
.hero-steps b{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 10.5px/1 var(--body);
background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink);transition:background .3s,color .3s}
.hero-steps span{min-width:0;text-wrap:balance}
.hero-steps em{position:absolute;left:30px;right:0;bottom:3px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.hero-steps em::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.hero-steps i.on{color:var(--ink)}
.hero-steps i.on b{background:var(--ink);color:var(--bg,#fff)}
.hero-steps i.on em::after{animation:stpbar 8s linear forwards}
.hero-steps i.done b{background:color-mix(in srgb,var(--ink) 26%,transparent)}
.hero-steps i.done em::after{transform:scaleX(1);opacity:.4}
.hero-steps.paused i.on em::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hero-steps i.on em::after{animation:none;transform:scaleX(1)}}
/* the run screen's working, under the cheaper run, once it has landed (3.1 s): your fare, the cheaper one, the $88 */
.s1x .tzw{position:absolute;left:0;right:0;top:400px}
.s1x.go .tzw .mini{animation-delay:3.35s}
.s1x.go .tzw .mr:nth-child(1){animation-delay:3.5s}
.s1x.go .tzw .mr:nth-child(2){animation-delay:3.65s}
.s1x.go .tzw .mr:nth-child(3){animation-delay:3.8s}
.s1x .tzw .mr:nth-child(3) .v{color:var(--s-good)}
/* ---------- v235 (Rob, 8 Oct): one screen up top, the app's own run screen, and the app's alerts beside it ---------- */
/* Top screens, Cost per credit (2): the six and the teasers sit out; the run screen holds and the alerts move (his picks: cost
per credit only; alerts beside the phone). The probe marks the screen's left edge, 42% down, for new.js to place them */
.hero-phone .h1s,#v-lounge-home .h1al{display:none}
.dir-lounge.hero-one .hero-phone .slides{display:none}
.dir-lounge.hero-one .hero-phone .h1s{display:block;position:relative;width:100%;height:100%;overflow:hidden}
.h1s .h1p{position:absolute;left:0;width:0;height:0;pointer-events:none}
/* the run screen: the app's 23 (Run detail, v11.3) at the hero phone's 288 px */
.r1h{display:flex;align-items:center;gap:5px;padding:12px 14px 0 10px}
.r1h .r1bk{flex:none;width:17px;height:17px;fill:none;stroke:var(--s-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.r1h b{flex:1;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--s-ink)}
.r1h em{font-style:normal;font-size:8.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--s-ink) 9%,var(--s-card));color:var(--s-ink)}
.r1rt{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:8px;margin:14px 16px 0}
.r1ap b{display:block;font-size:31px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--s-ink)}
.r1ap span{display:block;margin-top:3px;font-size:9.5px;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.r1ap.r{text-align:right}
.r1ln{display:flex;align-items:center;gap:4px;height:31px}
.r1ln .r1dash{flex:1;height:0;border-top:1.5px dashed color-mix(in srgb,var(--s-ink) 50%,transparent)}
.r1ln svg{flex:none;width:15px;height:15px;fill:var(--s-ink)}
.r1dt{margin:7px 16px 0;font-size:11px;font-weight:700;color:var(--s-ink)}
.r1c{margin:12px 12px 0;padding:11px 12px 10px;border-radius:16px;background:var(--s-card)}
.r1lb{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.r1d{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.r1d .r1a{fill:color-mix(in srgb,var(--s-acc) 14%,transparent)}
.r1d .r1ar{fill:color-mix(in srgb,var(--s-ink) 54%,transparent)}
.r1d .r1l{fill:none;stroke:var(--s-ink);stroke-width:1.6;stroke-linejoin:round}
.r1d .r1ax{stroke:var(--s-line);stroke-width:1}
.r1d .r1md line{stroke:color-mix(in srgb,var(--s-ink) 62%,transparent);stroke-width:1;stroke-dasharray:2.5 2.5}
.r1d text{font-family:var(--body);font-size:7.6px;font-weight:700;fill:var(--s-ink)}
.r1d .r1md text{font-weight:600;fill:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.r1d .r1y line{stroke:var(--s-ink);stroke-width:1.2}
.r1d .r1y circle{fill:var(--s-card);stroke:var(--s-ink);stroke-width:1.8}
.r1d .r1y text{font-size:8.4px;font-weight:800;paint-order:stroke;stroke:var(--s-card);stroke-width:3px;stroke-linejoin:round}
.r1d .r1e{font-weight:600;fill:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
.r1d .r1e.c{text-anchor:middle}
.r1d .r1e.r{text-anchor:end}
.r1ok{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:4px 9px 4px 7px;border-radius:999px;background:color-mix(in srgb,var(--s-good) 13%,var(--s-card));color:var(--s-good);font-size:9.5px;font-weight:700}
.r1ok svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.r1k{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 12px 0;padding:10px 0;border-radius:16px;background:var(--s-card)}
.r1k > div{padding:0 6px;text-align:center}
.r1k > div + div{border-left:1px solid var(--s-line)}
.r1k b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--s-ink)}
.r1k b u{text-decoration:none;font-size:9px;font-weight:700;margin-left:1px}
.r1k span{display:block;margin-top:3px;font-size:8.5px;line-height:1.3;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.r1cmp{display:flex;align-items:center;gap:9px;margin:10px 12px 0;padding:10px 12px;border-radius:16px;background:var(--s-card)}
.r1cmp > i{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--s-ink) 7%,var(--s-card))}
.r1cmp > i svg{width:12px;height:12px;fill:none;stroke:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink));stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.r1cmp > div{flex:1;min-width:0}
.r1cmp b{display:block;font-size:11px;font-weight:700;color:var(--s-ink)}
.r1cmp span{display:block;margin-top:1px;font-size:9px;color:color-mix(in srgb,var(--s-mute) 62%,var(--s-ink))}
.r1cmp .r1ch{flex:none;width:14px;height:14px;fill:none;stroke:var(--s-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* the screen arrives as the app's does: the route, the card, the curve drawn, the median, then you on it, the share above you,
the figures and the compare row (3.5 s), then holds */
.rr1 :is(.r1rt,.r1dt,.r1c,.r1k,.r1cmp){opacity:0;transform:translateY(10px)}
.rr1 .r1l{stroke-dasharray:100;stroke-dashoffset:100}
.rr1 :is(.r1a,.r1ar,.r1md,.r1y,.r1ok){opacity:0}
.rr1 .r1y,.rr1 .r1ok{transform-box:fill-box;transform-origin:center}
.rr1.go .r1rt{animation:hsrise .5s .1s cubic-bezier(.2,.8,.2,1) forwards}
.rr1.go .r1dt{animation:hsrise .5s .2s cubic-bezier(.2,.8,.2,1) forwards}
.rr1.go .r1c{animation:hsrise .5s .4s cubic-bezier(.2,.8,.2,1) forwards}
.rr1.go .r1l{animation:hsdraw 1.1s .7s ease-out forwards}
.rr1.go .r1a{animation:hsin .5s 1.3s ease forwards}
.rr1.go .r1md{animation:hsin .4s 1.6s ease forwards}
.rr1.go .r1ar{animation:hsin .6s 1.9s ease forwards}
.rr1.go .r1y{animation:hspop .45s 2.1s cubic-bezier(.2,1.4,.4,1) forwards}
.rr1.go .r1ok{animation:hspop .4s 2.5s cubic-bezier(.2,1.4,.4,1) forwards}
.rr1.go .r1k{animation:hsrise .5s 2.75s cubic-bezier(.2,.8,.2,1) forwards}
.rr1.go .r1cmp{animation:hsrise .5s 2.95s cubic-bezier(.2,.8,.2,1) forwards}
@media (prefers-reduced-motion:reduce){
.rr1 :is(.r1rt,.r1dt,.r1c,.r1k,.r1cmp,.r1a,.r1ar,.r1md,.r1y,.r1ok){opacity:1 !important;transform:none !important;animation:none !important}
.rr1 .r1l{stroke-dashoffset:0 !important;animation:none !important}
}
/* the alerts beside the phone, Flighty's way: they land one at a time, then take turns, the one on show lit. new.js places
them at the screen's left edge, clear of the hero's words, and fades them with the phone */
.dir-lounge.hero-one #v-lounge-home .h1al{display:flex}
.dir-lounge.hero-one.hal-in #v-lounge-home .h1al{display:none}
.h1al{position:absolute;left:0;top:0;z-index:7;width:260px;flex-direction:column;gap:10px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.h1al.ready{opacity:var(--tzo,1);pointer-events:auto}
.h1al .nt{position:relative;opacity:0;transform:translateX(28px) scale(.96);transform-origin:100% 50%;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.h1al .nt.in{opacity:.72;transform:scale(.97)}
.h1al .nt.in:not(.on) .ntc{box-shadow:0 4px 12px rgba(16,20,52,.08)} /* the ones not on show step back, their words still 4.5:1 or more */
.h1al .nt.in.on{opacity:1;transform:none}
.h1al .ntc{display:flex;align-items:flex-start;gap:10px;padding:11px 13px 12px 11px;border-radius:18px;font-family:var(--body);background:rgba(245,247,250,.9);color:#141A24;
box-shadow:0 16px 34px rgba(16,20,52,.16),0 2px 6px rgba(16,20,52,.08);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.theme-dark .h1al .ntc{background:rgba(30,36,47,.88);color:#F2F4F7;box-shadow:0 16px 34px rgba(0,0,0,.34)}
.h1al .nti{--ink:#15223A;--bg:#FFFFFF;flex:none;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;background:#FFFFFF;box-shadow:inset 0 0 0 .5px rgba(20,26,36,.2),0 1px 2px rgba(0,0,0,.12)}
.h1al .nti .nt-logo{display:block;height:13px;width:auto;overflow:visible}
.h1al .ntx{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1px}
.h1al .nth{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:10px;line-height:1.2;color:rgba(20,26,36,.7)}
.theme-dark .h1al .nth{color:rgba(242,244,247,.62)}
.h1al .nth b{font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.h1al .nth em{font-style:normal}
.h1al .ntt{font-size:13.5px;font-weight:700;line-height:1.25;margin-top:2px}
.h1al .ntb{font-size:12px;line-height:1.35}
@media (prefers-reduced-motion:reduce){.h1al .nt{transition:none}}
/* with no room beside it, the same alerts drop in at the top of the phone's screen, one at a time */
.h1ban{position:absolute;left:8px;right:8px;top:30px;z-index:6;pointer-events:none;display:none}
.dir-lounge.hero-one.hal-in .hero-phone .h1ban{display:block}
.h1ban .nt{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(-135%);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.h1ban .nt.on{opacity:1;transform:none}
.h1ban .ntc{background:rgba(245,247,250,.985);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.theme-dark .h1ban .ntc{background:rgba(30,36,47,.985)}
@media (prefers-reduced-motion:reduce){.h1ban{display:none !important}}
/* footer: the not-affiliated line and the not-advice line, one under the other; the footer ends 64 px under them (was 32),
so the second line clears the preview's settings pill at the foot of the window */
.ftl{display:flex;flex-direction:column;gap:2px;text-align:right}
#dir-lounge .view > footer{padding-bottom:64px !important}
/* the footer's last row reads at 4.5:1 or more over the clouds at the page's end: its muted ink a step nearer the ink (the
longer not-affiliated line now reaches over the lighter sky) */
#dir-lounge .view > footer .stack-m:last-child .muted{color:color-mix(in srgb,var(--ink) 55%,var(--muted))}
@media (max-width:640px){.ftl{text-align:left}}
/* the Westpac card's fine print takes a second line: the condition behind its bonus */
.s6x .s6xm2{margin-top:2px}
/* "Leave the spreadsheet at the gate" (Rob, 8 Oct): longer than "Ditch the spreadsheet", so on the Plan card the chip takes
the room beside See suggested runs and breaks before "at the gate" where it must; with less room it goes under, on one line */
.dir-lounge .sc-card .sc-minis > .sc-ditch:not(.sc-sugg){flex:1 1 200px;min-width:0}
.sc-ditch .gw{white-space:nowrap}
/* ---------- v237 (Rob, 8 Oct) ---------- */
/* the teasers' dots and arrows (Rob: "I can't see the dots with the left and right arrows under the phone at the top of the
screen. Please include that."): the reel's frosted pill under the phone, back and next either side of a dot per screen.
Hand lays it out with the phone */
.dir-lounge #v-lounge-home .hero-phone .tzdots{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 8px;border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--card,#fff) 84%,transparent);box-shadow:0 6px 18px rgba(10,12,30,.14),inset 0 0 0 1px color-mix(in srgb,var(--card,#fff) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:tzdin .6s 2.9s cubic-bezier(.2,.8,.2,1) both}
.dir-lounge #v-lounge-home .hero-phone .tzdots i{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;cursor:pointer;transition:opacity .2s,transform .2s}
.dir-lounge #v-lounge-home .hero-phone .tzdots i:hover{opacity:.55}
.dir-lounge #v-lounge-home .hero-phone .tzdots i.on{opacity:.9;transform:scale(1.2)}
.dir-lounge #v-lounge-home .hero-phone .tzdots .harw{opacity:.78}
.dir-lounge #v-lounge-home .hero-phone .tzdots .harw:hover{opacity:1}
.dir-lounge #v-lounge-home .hero-phone .tzdots i:focus-visible,.dir-lounge #v-lounge-home .hero-phone .tzdots .harw:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@keyframes tzdin{from{opacity:0;translate:0 6px}}
@media (prefers-reduced-motion:reduce){.dir-lounge #v-lounge-home .hero-phone .tzdots{animation:none}}
/* "Skip the surprise fee" ends with a button to mark the card closed (Rob: "needs a button to mark the card as closed at end
of the journey"), as journey 2 ends with Add to my cards: it rises with the screen and is tapped once the fee row lights */
.s6j1 .s6xbtn{position:relative;display:flex;align-items:center;justify-content:center;height:34px;margin:12px 16px 0;border-radius:17px;background:var(--s-ink);color:var(--s-card);font-size:11.5px;font-weight:800;overflow:hidden;opacity:0;transform:translateY(8px)}
.s6j1 .s6xbtn::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,255,255,.3);opacity:0;transform:scale(0)}
.dir-lounge .s6j1.go .s6xbtn{animation:hsrise .5s cubic-bezier(.2,.8,.2,1) .65s forwards,s6xpress3 15s linear forwards}
.s6j1.go .s6xbtn::after{animation:s6xtap3 15s linear forwards}
@media (prefers-reduced-motion:reduce){.s6j1 .s6xbtn{opacity:1 !important;transform:none !important}}
/* a tap on a rolling card's phone, or on its alert, moves the journey on (Rob: "the user should be able to click the phone /
notification to move to the next screen in the journey") */
.dir-lounge .sc-card.tapnext .tiltp{cursor:pointer}
.dir-lounge .sc-card.tapnext .jpops .jpop.on{pointer-events:auto;cursor:pointer}
/* the rail's plane (Rob: "The colour on the plane marking the position on the left hand website bar isn't right - can you design
colour to be better?"; v237 showed Ink, Sky pair and Pale blue; v238, his pick: Ink). The plane rides in a disc, so the mark
for where you are is the strongest thing on the rail, on every sky: the boarding pass's own navy disc and white plane, a paper
disc and navy plane once the sky turns. Against the rail's glass where it sits: 11:1 or more by day, 5.7:1 or more once the sky
turns; the plane 14:1 or more against its disc */
.dir-lounge{--rp-disc:#14233B;--rp-ink:#FFFFFF;--rp-ring:#14233B}
.dir-lounge.theme-dark{--rp-disc:#F4F6FB;--rp-ink:#14233B;--rp-ring:#F4F6FB}
.dir-lounge .rail .plane{fill:var(--rp-ink);width:16px;height:16px;padding:6px;box-sizing:content-box;border-radius:50%;background:var(--rp-disc);box-shadow:0 0 0 2px var(--rp-ring),0 4px 10px -3px rgba(10,12,30,.4);transition:top .38s cubic-bezier(.4,0,.2,1),transform .4s ease,background-color .3s,fill .3s,box-shadow .3s}
.dir-lounge.dir-lounge .rail .stop.now i{border-color:transparent;background:transparent}
.dir-lounge.dir-lounge .rail .stop.last.now i{border-color:transparent;background:var(--rp-disc);box-shadow:0 0 0 2px var(--rp-ring)}
.dir-lounge.dir-lounge .rail .stop.first.now i svg,.dir-lounge.dir-lounge .rail .stop.last.now i svg{fill:var(--rp-ink)}
.dir-lounge.dir-lounge .rail .stop:hover i{border-color:var(--rp-ring)}
/* ---------- v239 (Rob, 8 Oct: "Under the Your Status screen with the parabola, I think we show the median curve rather than the
you saved 88$ etc - I think it's more like X% of runs are cheaper, etc."; his picks: both runs; keep the Found a cheaper run card)
Teaser 1: under the run found, the route's curve in place of the sums. The runs below yours shaded, those below the run found a
step deeper; once the run found has landed (3.1 s): the card, the curve drawn, the shading, the median, you, the run found,
then the two lines ---------- */
.s1x .tzc .r1c{margin:6px 16px 0;padding:10px 12px 9px}
.s1x .tzc .r1d{margin-top:5px}
.tzd .tza{fill:color-mix(in srgb,var(--s-ink) 12%,transparent)}
.tzd .tzb{fill:color-mix(in srgb,var(--s-ink) 24%,transparent)}
.tzd .tzy text,.tzd .tzf text{text-anchor:end}
.tzd .tzf line{stroke:var(--s-good);stroke-width:1.2}
.tzd .tzf circle{fill:var(--s-good);stroke:var(--s-card);stroke-width:1.6}
.tzd .tzf text{font-size:8.4px;font-weight:800;fill:var(--s-good);paint-order:stroke;stroke:var(--s-card);stroke-width:3px;stroke-linejoin:round}
.s1x .tzt{margin-top:4px;font-size:10px;line-height:1.3;color:var(--s-ink)}
.s1x .tzt + .tzt{margin-top:1px}
.s1x .tzt b{font-weight:800}
.s1x .tzt2 b{color:var(--s-good)}
.s1x .tzc .r1c,.s1x .tzc .tzt{opacity:0;transform:translateY(8px)}
.s1x .tzc .r1l{stroke-dasharray:100;stroke-dashoffset:100}
.s1x .tzc :is(.r1a,.tza,.tzb,.r1md,.tzy,.tzf){opacity:0}
.s1x .tzc :is(.tzy,.tzf){transform-box:fill-box;transform-origin:center}
.s1x.go .tzc .r1c{animation:hsrise .5s 3.3s cubic-bezier(.2,.8,.2,1) forwards}
.s1x.go .tzc .r1l{animation:hsdraw 1s 3.55s ease-out forwards}
.s1x.go .tzc :is(.r1a,.tza,.tzb){animation:hsin .5s 4.15s ease forwards}
.s1x.go .tzc .r1md{animation:hsin .4s 4.35s ease forwards}
.s1x.go .tzc .tzy{animation:hspop .45s 4.55s cubic-bezier(.2,1.4,.4,1) forwards}
.s1x.go .tzc .tzf{animation:hspop .45s 4.8s cubic-bezier(.2,1.4,.4,1) forwards}
.s1x.go .tzc .tzt1{animation:hsrise .45s 5.05s cubic-bezier(.2,.8,.2,1) forwards}
.s1x.go .tzc .tzt2{animation:hsrise .45s 5.25s cubic-bezier(.2,.8,.2,1) forwards}
@media (prefers-reduced-motion:reduce){
.s1x .tzc :is(.r1c,.tzt,.r1a,.tza,.tzb,.r1md,.tzy,.tzf){opacity:1 !important;transform:none !important;animation:none !important}
.s1x .tzc .r1l{stroke-dashoffset:0 !important;animation:none !important}
}
.tzd .r1md text.tzmd{text-anchor:middle;font-weight:600;fill:color-mix(in srgb,var(--s-mute) 55%,var(--s-ink))}
/* ---------- v240 (Rob, 9 Oct: "On the first phone screen, 'Price Your Run' at the top of the page. instead of the median graph,
we should have 'Your Runs on This Route'"; his pick: this run, then your last two) ---------- */
/* teaser 1: your runs on this route under the run found, this run first in the fare card's warning colour; they arrive once the
run found has landed (3.1 s) */
.s1x .tzw.tzl .sub{padding-top:10px}
.s1x.go .tzw.tzl .sub{animation:hsin .3s 3.3s forwards}
.s1x .tzw.tzl .mr b i{margin-left:0}
.s1x .tzw.tzl .mr.you .v{color:var(--s-warn)}
.s1x .tzw.tzl .mr:nth-child(3) .v{color:inherit}
/* ---------- v241 to v243 (Rob, 10 Oct): light and dark ----------
v241's sun/moon switch is gone (v243, Rob: "delete the switch - that should just follow the browser settings"): the site
follows the visitor's own setting, and Preview settings' Mode (Auto, Light, Dark) shows each look. Kept from v241, re-tuned
without the switch: on phones the header's hidden button takes no room until the hero's form has scrolled away, and where
the wordmark and the button (or, once launched, the two store badges) can't share a row, the wordmark makes way while they
show, leaving the mark: up to 390 px before launch, 440 px after (v240 clipped the button at 360 px) */
@media (max-width:640px){
.dir-lounge.ph-simple #v-lounge-home header nav.nav .btn{transition:opacity .25s ease,transform .25s ease,max-width .3s ease,padding .3s ease,background-color .35s ease}
.dir-lounge.ph-simple:not(.hf-past) #v-lounge-home header nav.nav .btn{max-width:0;padding:0 !important;border-width:0;overflow:hidden}
}
@media (max-width:440px){
#dir-lounge.dir-lounge header .wrap > a:first-child .serif{max-width:160px;overflow:hidden;white-space:nowrap;transition:max-width .3s ease,opacity .25s ease}
#dir-lounge.dir-lounge.launched header .wrap > a:first-child .serif{max-width:0;opacity:0}
#dir-lounge.dir-lounge.launched header .wrap > a:first-child{gap:0 !important}
}
@media (max-width:390px){
#dir-lounge.dir-lounge .view:not(#v-lounge-home) header .wrap > a:first-child .serif,
#dir-lounge.dir-lounge.hf-past #v-lounge-home header .wrap > a:first-child .serif{max-width:0;opacity:0}
#dir-lounge.dir-lounge .view:not(#v-lounge-home) header .wrap > a:first-child,
#dir-lounge.dir-lounge.hf-past #v-lounge-home header .wrap > a:first-child{gap:0 !important}
}
/* ---------- v243 (Rob, 10 Oct): Copy, the brand deck's lines or v242's, each line carrying both ---------- */
.dir-lounge:not(.bd-1) .bdn,.dir-lounge.bd-1 .bdo{display:none !important}
/* ---------- v244 (Rob, 11 Oct) ---------- */
/* Best-value runs, step 1: what top runners pay on the route, the typical price beside it in a quiet pill (not a saving) */
.s1x .fl3 .sv.sv-typ{padding:7px 9px;font-size:10.5px;background:color-mix(in srgb,var(--s-ink) 9%,transparent);color:var(--s-ink);font-weight:700}
/* the range and its "a credit" on one line, the pill beside them */
.s1x .fl3{gap:8px}
.s1x .fl3 b{white-space:nowrap}
/* step 2: the same run, its first price struck (Rob's pick, Bad, then fixed) */
.hs .mr .v .was{margin-right:6px;font-size:.84em;font-weight:600;color:var(--s-mute);text-decoration:line-through;text-decoration-thickness:1.4px}
/* the crew's pass (Rob: "can we right align the seat and barcode? on the boarding pass"): on the stub, the seat and the
barcode take its right edge; on a phone, where the seat sits with the fields, the right-hand column (gate, seat) does */
@media (min-width:641px){
.dir-lounge .story-pass .sp-stub .sp-seatk{align-self:flex-end;align-items:flex-end;text-align:right}
.dir-lounge .story-pass .sp-stub .sp-code{align-self:flex-end;text-align:right}
}
@media (max-width:640px){
.dir-lounge .story-pass .sp-fields > div:nth-child(even){align-items:flex-end;text-align:right}
}
/* light and dark at the foot of every page (Rob: "let's add the light or dark mode options at the bottom of the screen"):
Auto, Light, Dark under the copyright line; on a phone, the page's last line. In the footer's own ink, so it reads
wherever the sky has got to by the page's end */
#dir-lounge .view > footer .ftrow{display:grid !important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy note" "mode note";column-gap:32px;row-gap:16px;align-items:start}
#dir-lounge .view > footer .ftrow > .muted:first-child{grid-area:copy}
#dir-lounge .view > footer .ftrow > .ftl{grid-area:note}
#dir-lounge .view > footer .ftrow > .ftmode{grid-area:mode;justify-self:start}
@media (max-width:640px){
#dir-lounge .view > footer .ftrow{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "note" "mode";row-gap:14px}
}
.dir-lounge .ftmode{display:inline-flex;align-items:center;gap:2px;margin:0;padding:3px;min-width:0;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;color:inherit}
.dir-lounge .ftmode label{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 10px;border-radius:999px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .2s ease}
.dir-lounge .ftmode input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dir-lounge .ftmode label:not(:has(input:checked)):hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.dir-lounge .ftmode label:has(input:checked){background:color-mix(in srgb,currentColor 17%,transparent)}
.dir-lounge .ftmode label:has(input:focus-visible){outline:2px solid currentColor;outline-offset:2px}
.dir-lounge .ftmode svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* the closing's line under the headline: no word left alone on its last line */
#dir-lounge #boarding h2 + .lede{text-wrap:pretty}
/* waitlist sign-up: the honeypot sits off-screen for people and screen readers; the Turnstile slot and the honeypot
shed the pill styling every form.wl > div is given; the error line takes the panel's own text colour, warmed toward
the warning amber, so it reads on light, dark and sky panels alike (the site's --s-warn lives only in .hs) */
.hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.dir-lounge form.wl > :is(.cf-turnstile,.hp){padding:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
.dir-lounge form.wl > .cf-turnstile:empty{display:none}
/* the Simple hero hides a form's own (its "No spam" line); the thank-you that replaces the form must still show */
.dir-lounge form.wl > p.wl-done{display:block !important;margin:0}
.wl-err{display:block;margin-top:8px;padding-left:10px;border-left:3px solid #F59E0B;font:600 14px/1.45 var(--body,sans-serif);color:color-mix(in srgb,currentColor 72%,#F97316);text-align:left}