/* Captain's Club · screen layouts (the components and the frame are in ../app.css) */

/* =============== welcome =============== */
.wel{position:relative;overflow:hidden;background:var(--y);min-height:calc(100dvh - var(--top-h) - env(safe-area-inset-top));padding:4px 0 34px;isolation:isolate}
.wel::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 70% at 75% 8%,#ffd877 0,transparent 60%),radial-gradient(rgba(11,11,12,.11) 1.3px,transparent 1.6px) 0 0/13px 13px;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
.wel__clouds{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cl{position:absolute;height:auto;opacity:.92}
.cl--1{width:150px;left:-38px;top:118px}
.cl--2{width:120px;right:-26px;top:40px;opacity:.85}
.cl--3{width:96px;right:12%;top:300px;opacity:.6}
@media (prefers-reduced-motion:no-preference){.cl--1{animation:drift 26s ease-in-out infinite alternate}.cl--2{animation:drift 20s ease-in-out infinite alternate-reverse}.cl--3{animation:drift 32s ease-in-out infinite alternate}}
@keyframes drift{to{transform:translateX(26px)}}
.wel__in{display:grid;grid-template-areas:"cap" "copy" "card";gap:8px;max-width:1180px;margin:0 auto;padding:0 var(--gxr) 0 var(--gx)}
.wel__art{display:contents}
.wel__cap{grid-area:cap;justify-self:center;width:min(330px,82%);margin:6px 0 -6px;transform:rotate(-5deg)}
@media (prefers-reduced-motion:no-preference){.wel__cap{animation:fly 5.5s ease-in-out infinite}}
@keyframes fly{0%,100%{translate:0 0;rotate:-1deg}50%{translate:8px -14px;rotate:2deg}}
.wel__copy{grid-area:copy;position:relative}
.wel__h{display:flex;flex-direction:column;align-items:flex-start;margin:2px 0 14px;outline:none}
.wel__h1{font-weight:900;text-transform:uppercase;letter-spacing:-.055em;line-height:.82;font-size:clamp(3.4rem,17vw,7.4rem)}
.wel__script{position:relative;margin:-.12em 0 0 .42em;font-size:clamp(3.3rem,16vw,7rem);line-height:.9;color:#fff!important;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:5px 6px 0 var(--ink);transform:rotate(-6deg);transform-origin:left center}
.wel__h .wel__script::before{display:none}
.wel__lead{max-width:44ch;font-size:1.04rem;line-height:1.5;color:var(--y-ink);font-weight:500}
.perks{display:grid;gap:0;margin:20px 0 22px;border-top:2px dashed rgba(11,11,12,.3)}
.perk{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:2px dashed rgba(11,11,12,.3)}
.perk__i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--y-100);border:2px solid var(--ink)}
.perk__i .i3d{width:38px;height:38px}
.perk b{display:block;font-weight:900;font-size:1rem;line-height:1.2;letter-spacing:-.01em}
.perk small{display:block;font-size:.84rem;color:var(--y-ink);line-height:1.35}
.wel__cta{display:grid;gap:12px}
.wel__cta .btn--ghost{--bd:var(--ink)}
.wel__fine{margin-top:16px;font-size:.86rem;color:var(--y-ink)}
.wel__card{grid-area:card;justify-self:center;width:min(380px,100%);margin-top:30px;transform:rotate(-4deg)}
.wel__cardk{margin-top:16px;text-align:center;font-family:var(--f-script);font-size:1.5rem;transform:rotate(3deg)}
@media (min-width:760px){
  .wel{padding:36px 0 70px}
  .wel__in{grid-template-areas:"copy art";grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
  .wel__art{display:grid;grid-area:art;align-content:center;position:relative;padding-top:10px}
  .wel__cap,.wel__card{grid-area:auto}
  .wel__cap{justify-self:start;width:min(440px,92%);margin:0 0 -6px -10px;z-index:1}
  .wel__card{justify-self:end;margin:0 8px 0 0;width:min(410px,86%)}
  .wel__cta{display:flex;flex-wrap:wrap}
  .cl--1{width:260px;left:-60px;top:auto;bottom:90px;opacity:.75}
  .cl--2{width:220px;right:-40px;top:60px}
  .cl--3{width:150px;right:auto;left:44%;top:40px;opacity:.55}
}

/* =============== sign in · code · join =============== */
.auth{position:relative;min-height:calc(100dvh - var(--top-h) - env(safe-area-inset-top));padding:52px var(--gxr) 40px var(--gx);background:radial-gradient(rgba(11,11,12,.07) 1.2px,transparent 1.5px) 0 0/14px 14px,var(--paper)}
.auth__aside{display:none}
.auth__box{position:relative;max-width:470px;margin:0 auto;padding:30px 22px 24px;background:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:9px 9px 0 var(--y)}
.auth__box--wide{max-width:600px}
.auth__box--center{text-align:center}
.auth__cap{position:absolute;right:-6px;top:-62px;width:112px;height:auto;transform:rotate(4deg)}
.auth--join .auth__cap{width:96px;top:-58px}
.auth__h{max-width:calc(100% - 92px);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.92;font-size:clamp(2rem,9vw,2.8rem);margin-bottom:12px;outline:none}
.auth__box--center .auth__h{max-width:none}
/* the email-link card: the Captain stands in the flow above the heading, so he never covers the message */
.auth__box--center .auth__cap{position:relative;display:block;right:auto;top:auto;width:96px;margin:-76px auto 10px;transform:none}
.auth__p{color:var(--steel);margin-bottom:20px}
.auth__p b{color:var(--ink);overflow-wrap:anywhere}
.auth__form{display:grid;gap:16px}
.auth__fine{display:flex;gap:.55rem;align-items:flex-start;margin-top:18px;font-size:.82rem;color:var(--steel)}
.auth__fine .i{width:18px;height:18px;flex:none;margin-top:1px}
.auth__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:10px}
.auth__acts{margin-top:18px}
@media (min-width:960px){
  .auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0;padding:0;background:var(--paper)}
  .auth__aside{position:relative;display:grid;align-content:center;justify-items:start;gap:14px;min-height:calc(100dvh - var(--top-h));padding:48px 56px 48px max(56px,calc((100vw - 1180px) / 2 + 24px));background:radial-gradient(rgba(11,11,12,.1) 1.3px,transparent 1.6px) 0 0/13px 13px,var(--y);border-right:2.5px solid var(--ink);overflow:hidden}
  .auth__big{display:flex;flex-direction:column;align-items:flex-start;line-height:.85}
  .auth__big span:first-child{font-weight:900;text-transform:uppercase;letter-spacing:-.055em;font-size:clamp(3.6rem,6vw,5.6rem)}
  .auth__big .script{margin:-.1em 0 0 .4em;font-size:clamp(3.2rem,5.2vw,5rem);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);transform:rotate(-6deg)}
  .auth__card{width:min(400px,90%);margin:26px 0 10px 10px;transform:rotate(-4deg)}
  .auth__line{max-width:40ch;color:var(--y-ink);font-weight:500}
  .auth__box{margin:60px auto;width:min(470px,calc(100% - 64px))}
  .auth__box--wide{width:min(560px,calc(100% - 64px))}
  .auth--solo{display:block;padding:40px 0}
}
.otp__lbl{font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.otp{position:relative;width:100%;max-width:400px}
.otp__boxes{display:grid;grid-template-columns:repeat(3,1fr) 0 repeat(3,1fr);gap:8px}
.otp__boxes span{display:grid;place-items:center;height:62px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);font-weight:900;font-size:1.7rem;font-variant-numeric:tabular-nums;transition:background .15s,transform .15s,box-shadow .15s}
.otp__boxes span:nth-child(4){grid-column:5}
.otp__boxes span.is-full{background:#fff}
.otp__boxes span.is-on{background:var(--y);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.otp__boxes span.is-on:empty::after{content:"";width:2px;height:28px;background:var(--ink);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.otp__in{position:absolute;inset:0;width:100%;height:100%;z-index:1;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;letter-spacing:2em;padding:0 0 0 12px;outline:none;-webkit-text-fill-color:transparent}
.otp__in::selection{background:transparent}
.is-bad .otp__boxes{animation:shake .42s}
.is-bad .otp__boxes span{border-color:var(--sl-maroon)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@media (max-width:370px){.otp__boxes{gap:6px}.otp__boxes span{height:54px;font-size:1.45rem}}

/* the welcome moment (a sheet) */
.sheet--moment .sheet__panel{background:var(--y);text-align:center;overflow:hidden}
.moment{position:relative;display:grid;justify-items:center;gap:6px;padding:4px 4px 6px;isolation:isolate}
.moment__rays{position:absolute;inset:-40% -40% auto;height:160%;z-index:-1;background:repeating-conic-gradient(from 0deg at 50% 38%,rgba(255,255,255,.28) 0 7deg,transparent 7deg 19deg)}
@media (prefers-reduced-motion:no-preference){.moment__rays{animation:rays 40s linear infinite}.moment__cap{animation:pop .6s var(--spring) both}}
@keyframes rays{to{rotate:360deg}}
@keyframes pop{from{transform:scale(.6) translateY(30px);opacity:0}}
.moment__cap{width:150px;height:auto;margin-bottom:4px}
.moment__k{font-family:var(--f-script);font-size:1.5rem;line-height:1}
.moment__h{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;font-size:clamp(1.9rem,8vw,2.6rem);outline:none;max-width:16ch}
.moment__pts{display:flex;align-items:baseline;gap:.4rem;margin:8px 0 2px;font-weight:700}
.moment__plus{display:inline-block;padding:.1rem .7rem;border:3px solid var(--ink);border-radius:12px;background:#fff;font-weight:900;font-size:2rem;letter-spacing:-.03em;transform:rotate(-4deg);box-shadow:var(--sh-hard-s)}
.moment__p{max-width:36ch;color:var(--y-ink);margin-bottom:14px}

/* =============== home =============== */
.hero-y{position:relative;background:var(--y);padding:10px 0 46px;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%);isolation:isolate}
.hero-y::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(11,11,12,.1) 1.3px,transparent 1.6px) 0 0/13px 13px;-webkit-mask-image:linear-gradient(170deg,#000 0,transparent 55%);mask-image:linear-gradient(170deg,#000 0,transparent 55%)}
.hero-y__in{display:grid;grid-template-areas:"hello" "card" "prog";gap:6px;max-width:1100px;margin:0 auto;padding:0 var(--gxr) 0 var(--gx)}
.hello{grid-area:hello;margin-bottom:12px}
.hello__ciao{font-size:2rem;line-height:1;margin-bottom:-.12em;transform:rotate(-4deg);transform-origin:left;display:inline-block}
.hello__name{font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.88;font-size:clamp(2.6rem,13vw,4.6rem);outline:none;overflow-wrap:anywhere}
.hello__tier{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px;font-size:.86rem;font-weight:600;color:var(--y-ink)}
.home__card{grid-area:card;min-width:0}
.home__prog{grid-area:prog;margin-top:22px}
.prog__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:9px}
.prog__t{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:1rem}
.prog__t b{font-weight:900;font-size:1.15rem}
.prog__t .i{width:22px;height:22px}
.prog__sub{font-size:.8rem;font-weight:600;color:var(--y-ink)}
.prog__bar{position:relative;height:16px;border-radius:999px;background:rgba(255,255,255,.55);border:2.5px solid var(--ink);overflow:hidden}
.prog__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:repeating-linear-gradient(-45deg,var(--ink) 0 8px,#2a2a30 8px 14px);transition:width 1.2s var(--ease)}
.prog__ends{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--y-ink)}
.prog--top .prog__t{font-size:1.05rem}
.home__body{max-width:1100px;margin:0 auto;padding:6px var(--gxr) 0 var(--gx)}
.home__grid{display:grid;gap:14px}
.wallets{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.wbtn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px 6px 7px;border-radius:14px;background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s);transition:transform .2s var(--ease),box-shadow .2s}
.wbtn__ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:var(--y);border:2px solid var(--ink)}
.wbtn__ic .i{width:22px;height:22px}
.wbtn__t{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.wbtn__t small{font-size:.66rem;font-weight:600;color:var(--steel)}
.wbtn__t b{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.wbtn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
@media (hover:hover){.wbtn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
.nt{position:relative;display:flex;flex-direction:column;gap:4px;min-height:150px;padding:18px 18px 16px;border-radius:22px;background:var(--ink);color:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s);overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),box-shadow .2s}
.nt::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;z-index:-1;border-radius:50%;border:2px dashed rgba(253,182,28,.35)}
.nt:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
@media (hover:hover){.nt:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
.nt__k{display:flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.nt__k .i{width:17px;height:17px}
.nt__t{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:1.35rem;line-height:1.02;margin-top:4px}
.nt__d{font-size:.84rem;color:var(--mist)}
.nt__r{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:2px;font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--y)}
.nt__r i{opacity:.5;font-style:normal}
.nt .cd{margin-top:auto;padding-top:12px}
.nt__plan{display:inline-flex;align-items:center;gap:.35rem;margin-top:12px;font-size:.84rem;font-weight:800;color:var(--y)}
.nt__plan .i{width:17px;height:17px}
.nt__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:10px;font-weight:800;color:var(--y);font-size:.9rem}
.nt__go .i{width:18px;height:18px}
.nt--none{background:#fff;color:var(--ink)}
.nt--none .nt__k,.nt--none .nt__go{color:var(--y-ink)}
.nt--on{background:var(--sl-green);border-color:var(--ink)}
/* split-flap countdown */
.cd{display:flex;gap:8px;margin-top:12px}
.cd__u{display:grid;justify-items:center;gap:4px}
.cd__v{position:relative;display:block;min-width:2.1em;padding:.18em .2em;border-radius:7px;background:var(--ink-3);color:var(--y);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:700;font-size:1.5rem;line-height:1;text-align:center;box-shadow:inset 0 -2px 0 rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.4)}
.cd__v::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:rgba(0,0,0,.65)}
.cd__u small{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
@media (prefers-reduced-motion:no-preference){.cd__v.is-flip{animation:flap .45s var(--ease)}}
@keyframes flap{0%{transform:rotateX(70deg);filter:brightness(1.6)}100%{transform:none}}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{position:relative;display:grid;gap:2px;align-content:start;min-height:112px;padding:14px 14px 13px;border-radius:20px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s);transition:transform .2s var(--ease),box-shadow .2s}
.tile:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
@media (hover:hover){.tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
.tile__i{display:block;width:54px;height:54px;margin:-6px 0 4px -4px}
.tile__i .i3d{width:100%;height:100%}
.tile b{font-weight:900;text-transform:uppercase;font-size:.98rem;letter-spacing:-.01em;line-height:1.1}
.tile small{font-size:.8rem;color:var(--steel);font-weight:600;line-height:1.3}
.tile--y{background:var(--y)}
.tile--y .tile__i .i3d{filter:drop-shadow(0 3px 3px rgba(11,11,12,.3))}
.tile--y small{color:var(--y-ink)}
.vline{display:flex;align-items:center;gap:12px;min-height:56px;margin-top:14px;padding:10px 16px;border-radius:16px;background:var(--y-100);border:2.5px dashed var(--ink);font-weight:800}
.vline span{flex:1}
.lgs{display:grid;border-top:2px solid var(--line)}
.lg{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:2px solid var(--line)}
.lg__i{display:grid;place-items:center;width:42px;height:42px}
.lg__i .i3d{width:42px;height:42px}
.lg__t{min-width:0}
.lg__t b{display:block;font-weight:700;font-size:.95rem;line-height:1.25;overflow-wrap:anywhere}
.lg__t small{display:block;font-size:.78rem;color:var(--steel);line-height:1.35;overflow-wrap:anywhere}
.lg__n{font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.lg--plus .lg__n{color:var(--plus)}
.ibn-slot:empty{display:none}
.ibn{display:grid;grid-template-columns:48px minmax(0,1fr) auto 44px;gap:12px;align-items:center;margin:4px 0 18px;padding:12px 8px 12px 12px;border-radius:18px;background:var(--ink);color:#fff;box-shadow:var(--sh-hard-s)}
.ibn__ic img{width:48px;height:48px;border-radius:12px}
.ibn__t{min-width:0;font-size:.8rem;line-height:1.3;color:var(--mist)}
.ibn__t b{display:block;color:#fff;font-size:.92rem}
.ibn__x{display:grid;place-items:center;width:44px;height:44px;color:var(--mist)}
.ibn__x .i{width:18px;height:18px}
@media (max-width:420px){.ibn{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"ic t x" "b b b"}.ibn__ic{grid-area:ic}.ibn__t{grid-area:t}.ibn__x{grid-area:x}.ibn .btn{grid-area:b;width:100%}.ibn__ic img{width:44px;height:44px}}
/* C-14: the one-time "Attiva le notifiche" card on the installed app's first start */
.pnc{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;margin:4px 0 18px;padding:14px 14px 14px 12px;border-radius:20px;background:var(--y-100);border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s)}
.pnc__i .i3d{width:56px;height:56px}
.pnc__t{display:grid;gap:4px;min-width:0}
.pnc__h{font-weight:900;text-transform:uppercase;font-size:1rem;letter-spacing:-.01em;line-height:1.15}
.pnc__t p{font-size:.88rem;color:var(--steel);line-height:1.4}
.pnc__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
@media (min-width:760px){
  .hero-y{padding:26px 0 70px}
  .hero-y__in{grid-template-areas:"hello card" "prog card";grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:56px;align-items:start}
  .hello{align-self:end;margin:30px 0 0}
  .home__prog{margin-top:6px;max-width:460px}
  .home__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .nt{min-height:100%}
  .home__body{padding-top:0}
}
/* a big card (desktop home) gets bigger type: keyed to the card's own width, not the window */
@container card (min-width:470px){.mcard__face{--tk-at:128px}.mcard__name{max-width:calc(100% - 98px)}.mcard__row{max-width:calc(100% - 96px)}.mcard__stampw{width:92px;height:92px}.mcard__pts{font-size:2.1rem}.mcard__main{padding:22px 20px 20px 24px}.mcard__logo{width:72px}.mcard__lbl{font-size:12px}.mcard__val{font-size:1.08rem}.mcard__bno{font-size:1.9rem}.mcard__bname{font-size:.95rem}.mcard__tip{font-size:.8rem}}

/* =============== rewards + vouchers =============== */
.rws{display:grid;gap:16px}
.rw{position:relative;display:grid;grid-template-columns:108px minmax(0,1fr);border-radius:22px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s);overflow:hidden}
.rw__art{position:relative;display:grid;place-items:center;padding:10px 6px;background:var(--y-100);border-right:2.5px dashed var(--ink)}
.rw__art .art{width:100%;height:auto;max-width:96px}
.rw__tier{position:absolute;left:6px;right:6px;bottom:8px;display:flex;align-items:center;justify-content:center;gap:3px;padding:2px 4px;border-radius:999px;background:var(--ink);color:var(--y);font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.rw__tier .i{width:11px;height:11px;fill:var(--y);stroke:var(--y)}
.rw__body{display:flex;flex-direction:column;gap:3px;min-width:0;padding:14px 14px 13px 16px}
.rw__n{font-weight:800;font-size:1.02rem;line-height:1.2;letter-spacing:-.01em}
.rw__d{font-size:.84rem;color:var(--steel);line-height:1.4;white-space:pre-line}
.rw__low{font-size:.76rem;font-weight:800;color:var(--sl-maroon)}
.rw__when{display:flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:700;color:var(--steel);line-height:1.3}
.rw__when .i{width:14px;height:14px;flex:none}
.rw__foot .lock{line-height:1.25}
.rw__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin-top:auto;padding-top:10px}
.rw__cost{font-size:.82rem;font-weight:600;color:var(--steel)}
.rw__cost b{font-size:1.25rem;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.rw__need{display:grid;gap:5px;flex:1 1 140px;font-size:.78rem;font-weight:700;color:var(--y-ink)}
.mbar{position:relative;display:block;height:10px;border-radius:999px;background:var(--y-100);border:2px solid var(--ink);overflow:hidden}
.mbar__f{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--y);border-right:2px solid var(--ink);transition:width 1s var(--ease)}
.mbar--y{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.mbar--y .mbar__f{background:var(--y);border-right-color:var(--ink)}
.rw.is-tier .rw__art,.rw.is-stock .rw__art{background:#efe7d3}
.rw.is-tier .art,.rw.is-stock .art{filter:grayscale(1);opacity:.6}
@media (min-width:760px){.rws{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){
  .rws{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rw{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .rw__art{border-right:0;border-bottom:2.5px dashed var(--ink);padding:18px 30px}
  .rw__art .art{max-width:150px}
  .rw__tier{left:auto;right:12px;top:12px;bottom:auto;padding:4px 10px}
}
.rd{display:grid;gap:8px;text-align:center;justify-items:center}
.rd__art{width:180px;padding:10px 14px;border-radius:20px;background:var(--y-100);border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s);margin-bottom:6px}
.rd__art .art{width:100%;height:auto}
.rd__h{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:1.45rem;line-height:1.05;max-width:22ch;outline:none}
.rd__p{color:var(--steel);max-width:44ch;white-space:pre-line}
.rd__sum{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:10px 0 4px;border:2.5px solid var(--ink);border-radius:16px;background:#fff;overflow:hidden}
.rd__sum div{padding:10px 6px}
.rd__sum div+div{border-left:2px dashed rgba(11,11,12,.3)}
.rd__sum dt{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.rd__sum dd{font-weight:900;font-size:.95rem;line-height:1.2}
.rd__fine{font-size:.8rem;color:var(--steel);max-width:46ch}
.rd__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px;width:100%}
.rd__acts .btn{flex:1 1 180px}
.rd__cap{width:130px;height:auto;margin:-6px 0 0}
.rd--ok .vt{width:100%;text-align:left;margin:8px 0 6px}
/* voucher tickets */
.vts{display:grid;gap:18px}
.vts li{min-width:0}
.vt{--tk-at:112px;--tk-main:#fff;--tk-stub:var(--y);--tk-r:18px;--tk-n:11px;display:grid;grid-template-columns:minmax(0,1fr) var(--tk-at);min-height:132px}
.vt__main{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:center;padding:14px 10px 14px 14px;min-width:0}
.vt__art{width:62px;height:62px;display:grid;place-items:center;border-radius:14px;background:var(--y-100);border:2px solid var(--ink)}
.vt__art .art{width:54px;height:54px}
.vt__k{font-size:.6rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--steel)}
.vt__n{font-weight:800;font-size:.95rem;line-height:1.2;overflow-wrap:anywhere}
.vt__code{margin-top:4px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:700;font-size:1.1rem;letter-spacing:.08em}
.vt__when{font-size:.74rem;color:var(--steel);font-weight:600}
.vt__stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border-radius:0 18px 18px 0}
.vt__stub .qr{width:84px;height:84px;border-radius:6px;border:2px solid var(--ink)}
button.vt__stub:hover .qr{transform:scale(1.04)}
.vt__stub--off{background:transparent}
.vt__stamp{display:inline-block;padding:.25rem .45rem;border:3px double var(--sl-maroon);border-radius:9px;color:var(--sl-maroon);font-size:.7rem;font-weight:900;letter-spacing:.1em;transform:rotate(-10deg)}
.vt.is-used,.vt.is-cancelled,.vt.is-expired{--tk-stub:#f1ead8;--tk-main:#faf6ea;--tk-ink:rgba(11,11,12,.45);--tk-shadow:rgba(11,11,12,.18);color:var(--steel)}
.vt.is-used .vt__art,.vt.is-cancelled .vt__art,.vt.is-expired .vt__art{filter:grayscale(1);opacity:.7}
@media (min-width:760px){.vts{grid-template-columns:repeat(2,minmax(0,1fr))}.vt{--tk-at:132px}.vt__stub .qr{width:100px;height:100px}}

/* =============== activity =============== */
.astats{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:16px;border:2.5px solid var(--ink);border-radius:18px;background:#fff;overflow:hidden}
.astats p{display:grid;padding:12px 12px 10px}
.astats p+p{border-left:2px dashed rgba(11,11,12,.25)}
.astats b{font-weight:900;font-size:1.3rem;letter-spacing:-.03em;line-height:1.1}
.astats span{font-size:.72rem;font-weight:600;color:var(--steel);line-height:1.25}
.seg--f{margin-bottom:6px}
.amon{margin-top:18px}
.amon__h{position:sticky;top:calc(var(--top-h) + 2.5px + env(safe-area-inset-top));z-index:2;padding:8px 0 6px;background:var(--paper);font-weight:900;text-transform:uppercase;font-size:.8rem;letter-spacing:.14em;color:var(--y-ink)}

/* =============== trips =============== */
.trips-hero{position:relative;background:var(--ink);color:#fff;padding:24px 0 34px;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),0 100%);isolation:isolate}
.trips-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(253,182,28,.16) 1.3px,transparent 1.6px) 0 0/14px 14px;-webkit-mask-image:linear-gradient(160deg,#000,transparent 60%);mask-image:linear-gradient(160deg,#000,transparent 60%)}
.trips-hero__in{position:relative;display:grid;gap:18px;max-width:1100px;margin:0 auto;padding:0 var(--gxr) 0 var(--gx)}
.trips-hero__head{position:relative;z-index:1;max-width:calc(100% - 96px)}
.trips-hero__cap{position:absolute;right:calc(var(--gxr) - 4px);top:-14px;width:108px;height:auto}
.trips-hero__acts{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:10px}
.trips-hero__pass{min-width:0}
.tp__note{display:flex;gap:.6rem;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:16px;background:var(--ink-3);border:2px dashed rgba(253,182,28,.45);color:#fff;font-size:.9rem;font-weight:600;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.tp__note .i{width:19px;height:19px;flex:none;margin-top:1px;color:var(--y)}
.btn--light-ghost{--fg:#fff;--bd:rgba(255,255,255,.55)}
.btn--light-ghost .i{width:18px;height:18px}
@media (hover:hover){.btn--light-ghost:hover{--bg:#fff;--fg:var(--ink)}}
/* the boarding pass of a trip */
.tp{--tk-at:150px;--tk-main:var(--y);--tk-stub:var(--y);--tk-shadow:var(--y-600);--tk-r:20px;--tk-n:13px;--tk-bw:2.5px;display:grid;grid-template-columns:minmax(0,1fr) var(--tk-at);color:var(--ink)}
.trips-hero .tp{--tk-shadow:#000;--tk-ink:var(--ink)}
.tp__main{display:grid;gap:8px;align-content:start;min-width:0;padding:18px 16px 18px 20px}
.tp__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.tp__k{display:inline-flex;align-items:center;gap:.4rem;font-size:.64rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.tp__k .i{width:16px;height:16px;fill:currentColor;stroke:none}
.tp__st{padding:.2rem .6rem;border-radius:999px;background:var(--ink);color:var(--y);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tp__route{display:flex;flex-wrap:nowrap;align-items:center;gap:4px 6px;min-width:0;font-size:.78rem;font-weight:800;letter-spacing:.06em;white-space:nowrap}
.tp__route b{font-size:1.5rem;font-weight:900;letter-spacing:-.02em}
.tp__route i{width:12px;border-top:2px dotted currentColor;opacity:.6}
.tp__route span{opacity:.82}
.tp__more{padding:0 .35rem;border-radius:6px;background:rgba(11,11,12,.12)}
.tp__name{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:1;font-size:1.3rem;overflow-wrap:anywhere}
.tp--big .tp__name{font-size:clamp(1.6rem,7vw,2.3rem)}
.tp__f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:4px}
.tp__f dt{font-size:.58rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.tp__f dd{font-weight:800;font-size:.92rem;line-height:1.2}
.tp__stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 12px;text-align:center}
.tp__lbl{font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.tp__big{font-weight:900;font-size:2rem;line-height:1;letter-spacing:-.04em}
.tp__small{font-size:.8rem;font-weight:700}
.tp__gate{display:flex;flex-direction:column;align-items:center;font-size:.56rem;font-weight:800;letter-spacing:.2em;opacity:.7}
.tp__gate b{font-size:.95rem;letter-spacing:.12em}
.tp .cd{margin-top:2px;gap:5px}
.tp .cd__v{font-size:1.25rem;background:var(--ink)}
.tp .cd__u small{color:var(--ink);opacity:.75}
.tp__hit{position:absolute;inset:0;z-index:2;border-radius:20px}
.tp--past{--tk-main:#fff;--tk-stub:#fff}
.tps{display:grid;gap:18px}
.tps .tp{--tk-at:118px}
.tps .tp__route b{font-size:1.15rem}
.tps .tp__f{grid-template-columns:repeat(3,minmax(0,1fr))}
.tps .tp__f div:nth-child(4){display:none}
@media (max-width:719px){
  .tp{grid-template-columns:1fr;grid-template-rows:auto var(--tk-at)}
  .tp--big{--tk-at:128px}
  .tps .tp{--tk-at:96px}
  .tp__stub{flex-direction:row;flex-wrap:wrap;gap:6px 16px;padding:12px 16px}
  .tps .tp__stub{justify-content:center;flex-wrap:nowrap;gap:10px}
  .tp__gate{display:none}
  .tp--big .tp__stub{flex-direction:column}
}
@media (min-width:720px){.tps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){
  .trips-hero{padding:34px 0 56px}
  .trips-hero__in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head cap" "pass pass" "acts acts"}
  .trips-hero__head{grid-area:head}.trips-hero__cap{position:relative;grid-area:cap;right:auto;top:auto;width:150px;margin:-20px 10px -40px 0}
  .trips-hero__pass{grid-area:pass}
  .tp--big{--tk-at:220px}
  .tp--big .tp__main{padding:26px 28px}
  .tp--big .tp__f{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tp--big .cd__v{font-size:1.7rem}
  .trips-hero__acts{grid-area:acts}
}
/* day by day */
.plan{display:grid;gap:10px;counter-reset:d}
.plan__d details{border:2.5px solid var(--ink);border-radius:18px;background:#fff;overflow:hidden}
.plan__d summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;min-height:62px;padding:10px 14px;cursor:pointer;list-style:none}
.plan__d summary::-webkit-details-marker{display:none}
.plan__n{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--paper);border:2px solid var(--ink);font-weight:900;font-size:1rem;color:transparent;-webkit-text-stroke:1.3px var(--ink)}
.plan__t b{display:block;font-weight:800;font-size:.96rem;line-height:1.2}
.plan__t small{display:block;font-size:.74rem;color:var(--steel);font-weight:600;letter-spacing:.03em}
.plan__chev{transition:transform .25s var(--ease)}
details[open] .plan__chev{transform:rotate(180deg)}
.plan__now{padding:.15rem .55rem;border-radius:999px;background:var(--sl-green);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.plan__b{padding:2px 16px 16px 68px}
.plan__b ul{display:grid;gap:7px;font-size:.9rem;line-height:1.5}
.plan__b li{position:relative;padding-left:16px}
.plan__b li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--y);border:1.5px solid var(--ink);transform:rotate(45deg)}
.plan__meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:.8rem;font-weight:700;color:var(--y-ink)}
.plan__meta span{display:inline-flex;align-items:center;gap:.35rem}
.plan__meta .i{width:17px;height:17px}
.plan__d.is-done .plan__n{background:var(--y);color:var(--ink);-webkit-text-stroke:0}
.plan__d.is-now details{border-color:var(--sl-green);box-shadow:4px 4px 0 var(--sl-green)}
.plan__none{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem}
.plan__none .i{width:18px;height:18px;flex:none;margin-top:2px}
@media (max-width:480px){.plan__b{padding-left:16px}}

/* =============== passport =============== */
.pp{background:var(--ink-2);color:#fff;padding:22px 0 34px;position:relative;isolation:isolate;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%)}
.pp::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;background:repeating-radial-gradient(circle at 18% 8%,transparent 0 10px,rgba(253,182,28,.75) 10px 11px),repeating-radial-gradient(circle at 92% 86%,transparent 0 14px,rgba(253,182,28,.6) 14px 15px)}
.pp__in{display:grid;gap:20px;max-width:1100px;margin:0 auto;padding:0 var(--gxr) 0 var(--gx)}
.pp__head{position:relative;display:grid;gap:12px}
.pp .shead{margin-bottom:0}
.pp .shead__h{color:#fff;max-width:calc(100% - 100px)}
.pp .shead__h .script{color:var(--y)}
.pp .shead__h .script::before{display:none}
.pp .shead__lead{color:var(--mist)}
.pp .shead__t{padding-right:92px}
.pp__cap{position:absolute;right:-6px;top:-6px;width:96px;height:auto}
.pp__count{display:grid;gap:6px;max-width:360px}
.pp__n{font-weight:900;letter-spacing:-.05em;line-height:.9}
.pp__n b{font-size:3.4rem;color:var(--y)}
.pp__n span{font-size:1.6rem;opacity:.8}
.pp__nl{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pp__page{position:relative;padding:16px 14px 14px;border-radius:22px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--y)}
.pp__page::before{content:"";position:absolute;inset:8px;border-radius:16px;border:1.5px solid rgba(141,21,58,.25);pointer-events:none}
.pp__map{display:grid;place-items:center;min-height:300px}
.pp__mapph{width:min(300px,80%);aspect-ratio:.58;border-radius:40% 45% 40% 45%;background:rgba(11,11,12,.06)}
.pm{width:min(330px,100%);height:auto;overflow:visible}
.pm__seab{opacity:.9}
.pm__hatch{stroke:rgba(0,83,78,.16);stroke-width:1.2}
.pm__sea{font-family:var(--f);font-size:7px;font-weight:800;letter-spacing:.4em;fill:rgba(0,83,78,.55)}
.pm__n path{fill:var(--ink)}.pm__n text{font-family:var(--f);font-size:8px;font-weight:900;fill:var(--ink)}
.pm__sh{fill:var(--ink)}
.pm__land{fill:var(--y);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.pm__dot{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.pm__lead{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 2;opacity:.7}
.pm__pin{fill:var(--ink)}
.pm__st{--c:var(--sl-maroon)}
.pm__st--g{--c:var(--sl-green)}.pm__st--k{--c:var(--ink)}.pm__st--o{--c:#B5560B}
.pm__st-o{fill:rgba(255,250,238,.88);stroke:var(--c);stroke-width:1.8}
.pm__st-i{fill:none;stroke:var(--c);stroke-width:.8}
.pm__st-t{fill:var(--c);font-family:var(--f);font-weight:900;font-size:7px;letter-spacing:.04em}
.pm__st-s{fill:var(--c)}
.pm__st.is-new{transform-box:fill-box;transform-origin:center;animation:thunk .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes thunk{0%{transform:scale(2.6);opacity:0}55%{transform:scale(.88);opacity:1}100%{transform:scale(1)}}
.pp__legend{display:flex;justify-content:center;gap:18px;margin-top:10px;font-size:.76rem;font-weight:700}
.pp__legend span{display:inline-flex;align-items:center;gap:6px}
.lg-dot{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.lg-st{width:16px;height:16px;border-radius:50%;border:2px solid var(--sl-maroon);box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--sl-maroon)}
.pp__nomap{padding:40px 10px;text-align:center}
.pls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pl{min-width:0}
.pl__ph{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;background:var(--ink-3);border:2.5px solid var(--ink)}
.pl__ph img{width:100%;height:100%;object-fit:cover;object-position:center 70%;filter:grayscale(1) contrast(.9);opacity:.55;transition:filter .3s,opacity .3s}
.pl.is-on .pl__ph img{filter:none;opacity:1}
.pl__ph img[src$=".png"]{object-fit:contain;object-position:center 45%}
.pl__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(11,11,12,.82) 92%)}
.pl__ph0{display:grid;place-items:center;width:100%;height:100%;color:var(--mist);background:radial-gradient(rgba(253,182,28,.18) 1.2px,transparent 1.5px) 0 0/11px 11px,var(--ink-2)}
.pl__ph0 .i{width:28px;height:28px}
.pl__code{position:absolute;top:0;right:0;z-index:1;padding:.35rem .6rem .35rem .7rem;border-radius:0 0 0 12px;background:var(--ink);color:var(--y);font-weight:900;font-size:.82rem;letter-spacing:.12em}
.pl__stamp{position:absolute;left:8px;bottom:8px;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--y);border:2.5px solid var(--ink);transform:rotate(-12deg)}
.pl__stamp .i{width:18px;height:18px;stroke-width:3}
.pl__n{margin-top:8px;font-weight:800;font-size:.92rem;line-height:1.2}
.pl__s{font-size:.74rem;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.08em}
.pl.is-on .pl__s{color:var(--sl-green)}
.bdgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bdg{display:grid;justify-items:center;text-align:center;gap:4px;padding:16px 10px 14px;border-radius:18px;background:#fff;border:2.5px dashed rgba(11,11,12,.3)}
.bdg.is-on{border-style:solid;border-color:var(--ink);box-shadow:var(--sh-hard-s)}
.bdg .i3d{width:74px;height:74px}
.bdg__n{font-weight:900;font-size:.88rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.15}
.bdg__h{font-size:.74rem;color:var(--steel);line-height:1.35}
.bdg:not(.is-on) .bdg__n{color:var(--steel)}
@media (min-width:600px){.pls{grid-template-columns:repeat(3,minmax(0,1fr))}.bdgs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){
  .pp{padding:36px 0 44px}
  .pp__in{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:44px}
  .pp__cap{position:relative;right:auto;top:auto;width:150px;margin-top:6px}
  .pp .shead__h{max-width:none}
  .pp .shead__t{padding-right:0}
  .pls{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bdgs{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* =============== invite =============== */
.inv{background:var(--y);padding:20px 0 34px;position:relative;isolation:isolate;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%)}
.inv::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from 0deg at 88% 20%,rgba(255,255,255,.22) 0 7deg,transparent 7deg 19deg)}
.inv__in{position:relative;display:grid;gap:10px;max-width:1100px;margin:0 auto;padding:0 var(--gxr) 0 var(--gx)}
.inv .shead__lead{color:var(--y-ink);font-weight:500}
.inv .shead__t{padding-right:92px}
.inv__cap{position:absolute;right:calc(var(--gxr) - 10px);top:-8px;width:104px;height:auto}
.inv__code{--tk-at:96px;--tk-main:#fff;--tk-stub:var(--ink);--tk-perf:rgba(11,11,12,.3);display:grid;grid-template-columns:minmax(0,1fr) var(--tk-at);min-height:96px;margin:4px 0 6px}
.inv__cm{display:grid;align-content:center;padding:12px 16px 12px 20px;min-width:0}
.inv__k{font-size:.62rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--steel)}
.inv__c{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:800;font-size:clamp(1.5rem,8vw,2.2rem);letter-spacing:.1em;line-height:1.1;overflow-wrap:anywhere}
.inv__copy-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--y);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:0 18px 18px 0}
.inv__copy-b .i{width:24px;height:24px}
.inv__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.inv__acts .btn--lg{flex:1 1 240px}
.steps{display:grid;gap:12px}
.step{position:relative;padding:16px 16px 14px 80px;border-radius:18px;background:#fff;border:2.5px solid var(--ink);min-height:80px}
.step__n{position:absolute;left:14px;top:12px;font-weight:900;font-size:2.25rem;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ink)}
.step__t{font-weight:900;text-transform:uppercase;font-size:.95rem;line-height:1.2}
.step__p{font-size:.86rem;color:var(--steel)}
.istats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.istats p{display:grid;align-content:start;padding:14px 12px;border-radius:18px;background:#fff;border:2.5px solid var(--ink)}
.istats b{font-weight:900;font-size:1.8rem;line-height:1;letter-spacing:-.04em}
.istats span{font-size:.76rem;font-weight:600;color:var(--steel);line-height:1.3;margin-top:4px}
.istats__y{background:var(--y)!important}
.istats__y span{color:var(--y-ink)}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){
  .inv{padding:40px 0 64px}
  .inv__in{grid-template-columns:minmax(0,1fr) 300px;align-items:center}
  .inv__cap{position:relative;right:auto;top:auto;width:260px;justify-self:center}
  .inv .shead__t{padding-right:0}
  .inv__copy{max-width:600px}
}

/* =============== offers =============== */
.ofs{display:grid;gap:18px}
.of{display:grid;border-radius:22px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s);overflow:hidden}
.of__ph{position:relative;display:block;aspect-ratio:16/9;background:var(--ink-2);overflow:hidden}
.of__ph img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.of__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.12) 0,transparent 26%,transparent 38%,rgba(11,11,12,.9) 86%)}
.of__ph--none{display:grid;place-items:center;aspect-ratio:auto;height:96px;background:radial-gradient(rgba(11,11,12,.12) 1.3px,transparent 1.6px) 0 0/12px 12px,var(--y)}
.of__ph--none::after{display:none}
.of__ph--none .i3d{width:72px;height:72px}
.of__code{position:absolute;top:0;right:0;z-index:1;padding:.5rem .9rem .5rem 1rem;border-radius:0 0 0 16px;background:var(--ink);color:var(--y);font-weight:900;font-size:1rem;letter-spacing:.12em}
.of__tour{position:absolute;left:16px;right:16px;bottom:12px;z-index:1;color:#fff;font-weight:900;text-transform:uppercase;font-size:1.2rem;letter-spacing:-.02em;line-height:1.05}
.of__tour small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;opacity:.85;margin-top:3px}
.of__b{display:grid;gap:6px;align-content:start;padding:16px 18px 18px}
.of__tier{display:inline-flex;align-items:center;gap:.3rem;width:max-content;padding:.2rem .6rem;border-radius:999px;background:var(--ink);color:var(--y);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.of__tier .i{width:13px;height:13px;fill:var(--y)}
.of__t{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.2rem;line-height:1.1}
.of__p{font-size:.92rem;color:var(--steel);white-space:pre-line}
.of__until{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:800;color:var(--sl-maroon)}
.of__until .i{width:17px;height:17px}
.of__b .btn{justify-self:start;margin-top:8px}
.of__lock{justify-self:start;margin-top:8px}
/* C-02: a promotion on this offer ("Punti ×2"): a yellow comic flag across the photo's top left corner */
.of--promo{position:relative}
.of__promo{position:absolute;top:14px;left:-3px;z-index:2;display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem .4rem .75rem;border-radius:0 12px 12px 0;background:var(--y);color:var(--ink);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:900;font-size:.95rem;letter-spacing:.01em;text-transform:uppercase;pointer-events:none}
.of__promo .i{width:18px;height:18px}
.of__pline{font-size:.82rem;font-weight:800;color:var(--y-ink)}
.of--locked .of__ph img{filter:grayscale(1);opacity:.6}
.of--locked .of__tier{background:var(--steel);color:#fff}
.of--locked .of__tier .i{fill:none;stroke:#fff}
@media (min-width:760px){.ofs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}

/* =============== inbox =============== */
.ibs{display:grid;gap:10px}
.ib__a{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px 12px 14px 14px;border-radius:18px;background:#fff;border:2.5px solid var(--line)}
a.ib__a:hover{border-color:var(--ink)}
.ib.is-new .ib__a{border-color:var(--ink);box-shadow:var(--sh-hard-s)}
.ib__i{display:grid;place-items:center;width:42px;height:42px}
.ib__i .i3d{width:42px;height:42px}
.ib__t{display:grid;gap:2px;min-width:0}
.ib__t b{font-weight:800;font-size:.95rem;line-height:1.25}
.ib__t span{font-size:.86rem;color:var(--steel);line-height:1.4;white-space:pre-line;overflow-wrap:anywhere}
.ib__t small{font-size:.74rem;color:var(--steel);font-weight:600}
.ib__dot{width:12px;height:12px;border-radius:50%;background:var(--sl-maroon);box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--sl-maroon)}
.ib__go{width:18px;height:18px;color:var(--steel)}

/* =============== profile =============== */
.idc{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:18px;padding:16px 16px 16px 16px;border-radius:22px;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.idc__av{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--y);color:var(--ink);border:3px solid #fff;font-weight:900;font-size:1.4rem;letter-spacing:-.02em}
.idc__t{min-width:0;padding-right:70px}
.idc__n{font-weight:900;text-transform:uppercase;font-size:1.2rem;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.idc__e{font-size:.86rem;color:var(--mist);overflow-wrap:anywhere}
.idc__m{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:.76rem;color:var(--mist)}
.idc__m b{color:var(--y)}
.idc__cap{position:absolute;right:-8px;bottom:-34px;width:96px;height:auto;z-index:-1;opacity:.95}
.pgrid{display:grid;gap:16px}
.pcard{padding:18px 16px;border-radius:22px;background:#fff;border:2.5px solid var(--ink)}
.pcard__h{display:flex;align-items:center;gap:.55rem;margin-bottom:14px;font-weight:900;text-transform:uppercase;font-size:1rem;letter-spacing:-.01em}
.pcard__h .i{width:22px;height:22px;padding:3px;border-radius:8px;background:var(--y);border:2px solid var(--ink);width:30px;height:30px}
.form__acts{display:flex;flex-wrap:wrap;gap:10px}
.locked{display:flex;align-items:center;gap:.55rem;min-height:54px;padding:.6rem 1rem;border-radius:14px;border:2.5px dashed rgba(11,11,12,.35);background:var(--y-100)}
.locked .i{width:20px;height:20px}
.locked b{flex:1}
.locked__l{color:var(--steel)}
.prow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:2px solid var(--line)}
.pcard__h+.prow{border-top:0;padding-top:0}
.prow--col{flex-direction:column;align-items:stretch}
.prow__t{min-width:0}
.prow__n{font-weight:800;font-size:.95rem}
.prow__s{font-size:.8rem;color:var(--steel);line-height:1.4}
.prow__ok{color:var(--plus)}
.prow .seg{flex:none}
.prow .wallets{margin-top:4px}
.plink{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 4px;border-top:2px solid var(--line);text-align:left;font-weight:700;font-size:.95rem}
.pcard__h+.plink{border-top:0}
.plink span{flex:1;min-width:0}
.plink small{display:block;font-size:.78rem;font-weight:500;color:var(--steel)}
.plink:hover{color:var(--y-ink)}
.plink--danger{color:var(--sl-maroon)}
.plink--danger:hover{color:#5e0e27}
.ver{margin:26px 0 6px;text-align:center;font-size:.76rem;color:var(--steel);letter-spacing:.04em}
.del,.ask{display:grid;gap:12px}
.del__h,.ask__h{font-weight:900;text-transform:uppercase;font-size:1.4rem;letter-spacing:-.02em;line-height:1.05;padding-right:46px;outline:none}
.del p,.ask p{color:var(--steel)}
@media (min-width:880px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.idc{padding:20px 24px}.idc__cap{width:130px;bottom:-50px;right:6px}}

/* =============== rules =============== */
.rgrid{display:grid;gap:26px}
.rsec{margin-bottom:24px}
.rsec>.h2s{margin-bottom:10px}
.rsec p{margin-bottom:10px;font-size:.95rem;line-height:1.6;max-width:68ch}
.rcol--priv{position:relative}
.rcol--priv .rsec{padding:20px 18px;border-radius:22px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s)}
.rtiers{display:grid;gap:10px;margin-top:10px}
.rtier{padding:14px 16px;border-radius:16px;border:2.5px solid var(--ink);background:#fff}
.rtier--1{background:var(--y)}
.rtier--2,.rtier--3{background:var(--ink);color:#fff}
.rtier--3{box-shadow:inset 0 0 0 2px var(--y)}
.rtier__n{font-weight:900;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em}
.rtier__m{font-size:.78rem;font-weight:700;opacity:.75;margin-bottom:6px}
.rtier ul{display:grid;gap:3px;font-size:.88rem}
.rtier li{position:relative;padding-left:1.4em}
.rtier li::before{content:"";position:absolute;left:.2em;top:.38em;width:.35em;height:.65em;border:solid currentColor;border-width:0 .16em .16em 0;transform:rotate(42deg)}
.rules__cap{width:140px;margin:10px auto 0}
.rules__back{margin-top:10px}
@media (min-width:960px){.rgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}.rcol--priv{position:sticky;top:calc(var(--top-h) + 24px);align-self:start}}

/* =============== iOS install sheet =============== */
.ios{display:grid;gap:10px}
.ios__h{font-weight:900;text-transform:uppercase;font-size:1.35rem;letter-spacing:-.02em;line-height:1.05;padding-right:46px;outline:none}
.ios>p{color:var(--steel)}
.ios__steps{display:grid;gap:10px;margin:8px 0 12px}
.ios__s{display:grid;grid-template-columns:30px 120px 1fr;gap:12px;align-items:center;padding:10px;border-radius:16px;background:#fff;border:2px solid var(--line)}
.ios__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--y);font-weight:900}
.ios__art svg{width:120px;height:60px}
.ios__t{font-weight:700;font-size:.9rem;line-height:1.35}
@media (max-width:360px){.ios__s{grid-template-columns:30px 1fr}.ios__art{display:none}}

/* =============== launch release (A1): rules version, help, next reward, earn card, banners =============== */
/* the regolamento: version line, numbered sections, print button */
.rmeta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:-6px 0 22px;padding:10px 14px;border-radius:16px;background:#fff;border:2.5px dashed var(--ink)}
.rver{font-weight:800;font-size:.88rem;letter-spacing:.02em}
.rprint .i{width:18px;height:18px}
.rsec__h{display:flex;align-items:baseline;gap:.55rem}
.rsec__n{display:inline-grid;place-items:center;flex:none;min-width:1.9em;height:1.9em;padding:0 .3em;border-radius:10px;background:var(--y);border:2px solid var(--ink);font-size:.78em;letter-spacing:0;transform:translateY(-.08em)}
.rfull{display:inline-flex;align-items:center;min-height:44px}
/* a balance below zero (LB-04) */
.negnote{display:flex;gap:.55rem;align-items:flex-start;margin:0 0 16px;padding:10px 14px;border-radius:14px;background:#fff;border:2.5px solid var(--sl-maroon);color:var(--sl-maroon);font-size:.86rem;font-weight:700;line-height:1.4}
.negnote .i{width:18px;height:18px;flex:none;margin-top:1px}
.negnote--hero{margin:14px 0 0}
/* the rules changed (SH-09 LIGHT) */
.rbanner{display:flex;align-items:center;gap:10px;min-height:56px;margin:14px 0 4px;padding:10px 14px;border-radius:16px;background:var(--ink);color:#fff;font-weight:700;font-size:.9rem;box-shadow:var(--sh-hard-s)}
.rbanner span{flex:1;min-width:0}
.rbanner b{color:var(--y);font-weight:800}
.rbanner .i{width:20px;height:20px;flex:none;color:var(--y)}
/* next reward strip (SH-07), under the tier bar */
.nrw{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:14px;padding:10px 12px;border-radius:18px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s)}
.nrw__art{width:56px;height:56px}
.nrw__t{display:grid;gap:4px;min-width:0}
.nrw__k{font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--y-ink)}
.nrw__t b{font-size:.92rem;line-height:1.2;overflow-wrap:anywhere}
.nrw__t small{font-size:.78rem;font-weight:700;color:var(--steel)}
.nrw__go{width:20px;height:20px}
/* how you earn points (SH-07) */
.earn{margin-top:26px}
.earn__l{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.earn__l li{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:14px;background:#fff;border:2px solid var(--line);font-weight:700;font-size:.88rem}
.earn__i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--y);border:2px solid var(--ink)}
.earn__i .i{width:18px;height:18px}
/* voucher expiry chip (SH-03) */
.vt__soon{display:inline-block;margin-top:5px;padding:.15rem .55rem;border-radius:999px;background:var(--y);border:2px solid var(--ink);font-size:.68rem;font-weight:800;letter-spacing:.02em}
.vt__soon.is-hot{background:var(--sl-maroon);border-color:var(--sl-maroon);color:#fff}
/* review prompt on past trips (SH-05) */
.rv{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.rv--ink{padding-bottom:10px}
.rv .btn{white-space:normal;text-align:left;max-width:100%}
.rv .btn .i{flex:none}
.rv__done{display:flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:700;color:var(--plus)}
.rv--ink .rv__done{color:var(--y)}
.rv__done .i{width:18px;height:18px}
/* help and contacts (SH-06) */
.hgrid{display:grid;gap:22px}
.hcard{position:relative;overflow:hidden}
.hcard__cap{position:absolute;right:-8px;bottom:-26px;width:96px;opacity:.95;pointer-events:none}
.hnow{display:flex;align-items:center;gap:.5rem;margin-bottom:10px;padding:8px 12px;border-radius:12px;background:var(--paper);border:2px solid var(--line);font-size:.86rem;font-weight:600}
.hnow b{color:var(--sl-maroon)}
.hnow.is-open b{color:var(--plus)}
.hnow .i{width:18px;height:18px;flex:none}
.hrow{position:relative;z-index:1;display:grid;grid-template-columns:40px minmax(0,1fr) 20px;gap:12px;align-items:center;min-height:62px;padding:10px 4px;border-top:2px solid var(--line);margin-right:70px}
.hnow+.hrow{border-top:0}
.hrow__i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--y);border:2px solid var(--ink)}
.hrow__i .i{width:21px;height:21px}
.hrow--wa .hrow__i{background:var(--ink)}
.hrow--wa .hrow__i .i path:first-child{fill:var(--wa);stroke:var(--wa)}
.hrow--wa .hrow__i .i path:nth-child(2){stroke:#fff}
.hrow__t{display:grid;min-width:0}
.hrow__t b{font-size:.95rem}
.hrow__t small{font-size:.8rem;color:var(--steel);overflow-wrap:anywhere}
.hrow__go{width:20px;height:20px}
.hrow:hover b{color:var(--y-ink)}
.faqs{display:grid;gap:10px}
.faq details{border:2.5px solid var(--ink);border-radius:18px;background:#fff;overflow:hidden}
.faq summary{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:12px;align-items:center;min-height:58px;padding:10px 16px;cursor:pointer;list-style:none;font-weight:800;font-size:.95rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq__chev{width:22px;height:22px;transition:transform .2s var(--ease)}
.faq details[open] .faq__chev{transform:rotate(180deg)}
.faq details[open] summary{background:var(--y-100);border-bottom:2px dashed var(--ink)}
.faq__b{padding:12px 16px 16px;font-size:.92rem;line-height:1.6}
.faq__act{margin-top:10px}
@media (min-width:960px){.hgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}.hcard{position:sticky;top:calc(var(--top-h) + 24px)}}
.earn .block__h .lnk{flex:none;white-space:nowrap}

/* =============== trips: companions (C-03), before you go and in Sri Lanka (C-15) =============== */
.tp__with{position:relative;display:flex;align-items:center;gap:.4rem;margin:-2px 0 8px;font-size:.8rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.tp__with .i{width:16px;height:16px;flex:none}
.prep .block__h{align-items:baseline}
.prep__n{flex:none;font-size:.8rem;font-weight:800;color:var(--y-ink)}
.prep__l{display:grid;gap:4px;padding:6px 16px;border-radius:20px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s)}
.prep__i{display:grid;gap:0;padding:6px 0;border-top:2px solid var(--line)}
.prep__i:first-child{border-top:0}
.prep__i .check{font-weight:700}
.prep__go{display:inline-flex;align-items:center;gap:.35rem;width:max-content;min-height:44px;margin-left:40px;font-size:.86rem;font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prep__go .i{width:16px;height:16px}
.prep .fine{margin-top:12px}
.prep__guide,.slx .hrow{margin-right:0}
.prep__guide{margin-top:8px;border-top:0;padding-left:0}
.slx__lead{margin:-6px 0 14px;font-size:.9rem;color:var(--steel)}
.slx__help{margin-bottom:16px}
.slx__help .pcard__h{margin-bottom:6px}
.slx__help .hrow:first-of-type{border-top:0}
.slx__h3{margin:22px 0 10px;font-weight:900;text-transform:uppercase;font-size:.95rem;letter-spacing:-.01em}
.slx__phr{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.slx__phr li{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:var(--y-100);border:2px solid var(--ink)}
.slx__phr b{font-weight:900;font-size:.95rem}
.slx__phr span{font-size:.8rem;color:var(--steel);line-height:1.35}