/* newope.com · the guides ("NIE en Barcelona paso a paso"…): paper, ink, the green, the drawn city behind the title.
   Built by build-guides.mjs from the app's own arrival steps. Sits on top of legal.css (header, brand, language pill). */
.brand::before{background-image:url("/media/mark.svg")}
.wrap{max-width:860px}
header .cta{font:800 13px var(--body);color:#fff;background:var(--ink);text-decoration:none;padding:9px 14px;border-radius:999px;white-space:nowrap}
header .lang{margin-left:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 26px}
.crumbs a{color:var(--dim);font-weight:600;text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs span::before{content:"›";margin-right:6px}
.ghero{position:relative;padding:8px 0 24px;overflow:visible}
.ghero .city{position:absolute;right:-18%;top:-40px;width:min(520px,70vw);opacity:.28;pointer-events:none;z-index:0}
.ghero .city :is(path,circle,ellipse,rect){fill-opacity:0!important}
.ghero>*{position:relative;z-index:1}
.kick{display:inline-flex;align-items:center;gap:10px;font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accd);margin:0 0 14px}
.kick::before{content:"";width:28px;height:2px;background:var(--acc)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.badge{font:800 11px var(--body);letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--mut);background:#fff}
.badge.key{border-color:transparent;background:rgba(63,224,173,.22);color:var(--accd)}
.badge.long{border-color:transparent;background:rgba(255,199,100,.28);color:#7A4A00}
h1{font-family:var(--display);font-weight:900;font-stretch:112%;font-size:clamp(36px,6vw,66px);line-height:.95;letter-spacing:-.035em;margin:0 0 18px;max-width:14ch}
.lead{font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--mut);max-width:40ch;margin:0 0 10px}
.date{font:600 13px var(--body);color:var(--dim);margin:0}
h2{font-family:var(--display);font-weight:900;font-stretch:112%;font-size:clamp(26px,3.4vw,38px);line-height:1;letter-spacing:-.03em;margin:54px 0 22px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:#fff}
.steps li::before{white-space:nowrap;content:counter(s);font-family:var(--display);font-weight:900;font-stretch:125%;font-size:34px;line-height:1;letter-spacing:-.04em;color:var(--ink);opacity:.9}
.steps li p{margin:0;font-size:17px;line-height:1.5;font-weight:600}
.tip{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:22px 24px;border-radius:22px;background:#0A1230;color:#fff;margin-top:30px}
.tip i{width:36px;height:36px;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#06231A;font:900 18px var(--display);font-style:normal}
.tip b{display:block;font:800 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#7FD9FF;margin-bottom:6px}
.tip p{margin:0;font-size:16px;line-height:1.55;color:#E6ECFF}
.links{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.links a{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-weight:700}
.links a::after{content:"↗";color:var(--accd)}
.app{display:grid;grid-template-columns:1fr 200px;gap:28px;align-items:center;margin-top:54px;padding:30px 32px;border-radius:28px;background:linear-gradient(135deg,#0A1230,#12306E);color:#fff;overflow:hidden}
.app h3{font-family:var(--display);font-weight:900;font-stretch:112%;font-size:clamp(24px,3vw,32px);line-height:1;letter-spacing:-.03em;margin:0 0 12px}
.app p{margin:0 0 18px;color:#B8C3E6;line-height:1.5}
.app .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;background:var(--acc);color:#06231A;font-weight:800;text-decoration:none}
.app .phone{width:200px;aspect-ratio:1/2.06;border-radius:15%/7.3%;background:#0B1533;padding:3.6%;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);transform:rotate(-6deg) translateY(24px)}
.app .phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12%/5.9%;display:block}
.offer{margin-top:30px;padding:22px 24px;border-radius:22px;border:1px dashed rgba(11,110,82,.5);background:rgba(63,224,173,.08)}
.offer b{display:block;font:800 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accd);margin-bottom:8px}
.offer p{margin:0 0 12px}
.offer a{display:inline-flex;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:800}
.offer small{display:block;margin-top:12px;color:var(--dim);font-size:12.5px}
.ad{margin-top:30px;min-height:120px;border-radius:22px;border:1px solid var(--line);display:grid;place-items:center;position:relative}
.ad::before{content:attr(data-label);position:absolute;left:14px;top:10px;font:700 10px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.more a{display:grid;gap:8px;padding:20px 22px;border-radius:22px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-weight:800;line-height:1.25;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.more a:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(8,25,54,.35)}
.more a small{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accd)}
.cities{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cities h2{margin-top:30px}
footer{margin-top:72px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;font-size:13.5px;color:var(--dim)}
footer a{color:var(--mut);font-weight:600;text-decoration:none}
footer .tag{margin-left:auto;font:600 12px var(--body);letter-spacing:.08em;color:var(--dim)}
@media(max-width:700px){.app{grid-template-columns:1fr}.app .phone{display:none}.steps li{grid-template-columns:54px 1fr;gap:12px;padding:18px}.steps li::before{font-size:26px}.cities{grid-template-columns:1fr}.ghero{overflow:hidden;margin:0 -20px;padding-left:20px;padding-right:20px}.ghero .city{right:-40%;opacity:.18}header .cta{display:none}}

.cities h3{font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accd);margin:26px 0 12px}
.cities .more{grid-template-columns:1fr}

/* the cost-of-living page */
.ctable{width:100%;min-width:0;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff}
.ctable td,.ctable th{padding:14px 20px;border-top:1px solid var(--line);text-align:left;font-size:16px}
.ctable tr:first-child td,.ctable tr:first-child th{border-top:0}
.ctable td:last-child{text-align:right;font-family:var(--display);font-weight:900;font-stretch:112%;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.ctable td small{font:600 12px var(--body);color:var(--dim);margin-left:4px}
.ctable .total td{background:#0A1230;color:#fff}.ctable .total td small{color:#7FD9FF}
.ctable .area th{font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accd);background:rgba(63,224,173,.08);padding:10px 20px}
.note{color:var(--mut);font-size:15px;margin:12px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chips li{display:grid;gap:2px;padding:12px 16px;border-radius:18px;border:1px solid var(--line);background:#fff;font-size:14px;color:var(--mut)}
.chips li b{font-family:var(--display);font-weight:900;font-stretch:112%;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.areas li{padding:20px 22px;border-radius:22px;border:1px solid var(--line);background:#fff}
.areas b{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-weight:900;font-stretch:112%;font-size:19px;letter-spacing:-.02em}
.areas b span{font:800 12px var(--body);color:var(--accd);letter-spacing:.1em;white-space:nowrap;flex:none;margin-left:8px}
.areas p{margin:8px 0 10px;font-size:15px;line-height:1.5}
.areas small{font:700 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.more a.cost{background:#0A1230;color:#fff;border-color:transparent}.more a.cost small{color:#7FD9FF}
@media(max-width:700px){.ctable td,.ctable th{padding:12px 14px;font-size:15px}.ctable td:last-child{font-size:17px;width:44%}.ctable td small{display:block;margin:0}}

/* ---------- motion (guide.js adds .js to <html>; without it everything is simply visible) ---------- */
.prog{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--acc),#1A4FE8);transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}
.js .ghero .city :is(path,circle,ellipse,rect){stroke-dasharray:1;stroke-dashoffset:1}
.js .ghero .city.draw :is(path,circle,ellipse,rect){animation:gdraw 1.3s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i,0)*3ms)}
@keyframes gdraw{to{stroke-dashoffset:0}}
.js .ghero .city{transform:perspective(900px) rotateX(calc(14deg + var(--rx,0deg))) rotateY(var(--ry,0deg));transform-origin:50% 70%;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .ctable tr.rv{display:table-row;transform:none;opacity:0;transition:opacity .6s ease}.js .ctable tr.rv.in{opacity:1}
.js .steps li.in::before{animation:gpop .7s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--d,0ms) + .2s)}
@keyframes gpop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:.9}}
.js .app .phone{animation:gfloat 6s ease-in-out infinite;transform:rotate(-6deg) translateY(24px)}
@keyframes gfloat{0%,100%{transform:rotate(-6deg) translateY(24px)}50%{transform:rotate(-4deg) translateY(10px)}}
.tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.more a.tilt,.areas li.tilt,.chips li.tilt{transform:perspective(800px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.more a.tilt:hover{transform:perspective(800px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px)}
.app.tilt{transform:perspective(1400px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.app.tilt .phone{transform:rotate(-6deg) translateY(24px) translateZ(40px)}
.still .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .ghero .city :is(path,circle,ellipse,rect){stroke-dashoffset:0;animation:none}.js .rv{opacity:1;transform:none}.prog{display:none}}
/* steps you can tick off, and the phone bar */
.js .steps li{cursor:pointer;transition:border-color .3s,background .3s,transform .9s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.js .steps li:hover{border-color:rgba(63,224,173,.6)}
.steps li.done{border-color:rgba(63,224,173,.7);background:rgba(63,224,173,.08)}
.steps li.done::before{content:"✓";color:var(--accd)}
.steps li.done p{color:var(--mut);text-decoration:line-through;text-decoration-color:rgba(63,224,173,.8);text-decoration-thickness:2px}
.sdone{display:inline-block;margin-left:14px;vertical-align:middle;font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accd);padding:6px 10px;border-radius:999px;background:rgba(63,224,173,.16)}
.sdone:empty{display:none}
.mcta{position:fixed;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom));z-index:60;display:flex;justify-content:center;padding:15px 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 20px 40px -16px rgba(8,25,54,.6);transform:translateY(120%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mcta.on{transform:none}
@media(min-width:701px){.mcta{display:none}}

/* share */
.share{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font:800 13px var(--body);color:var(--ink);transition:background .3s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.share::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M12 15V3M7 8l5-5 5 5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M12 15V3M7 8l5-5 5 5'/%3E%3C/svg%3E") center/contain no-repeat}
.share:hover{background:rgba(63,224,173,.14);transform:scale(1.04)}
.share.ok{background:var(--acc);border-color:transparent;color:#06231A}

/* page transitions (Chrome, Safari): a soft rise between the home and the guides */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){::view-transition-old(root){animation:vtOut .32s ease both}::view-transition-new(root){animation:vtIn .55s cubic-bezier(.16,1,.3,1) both}}
@keyframes vtOut{to{opacity:0;transform:translateY(-14px)}}@keyframes vtIn{from{opacity:0;transform:translateY(22px)}}

/* what to bring, emergency numbers */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.docs li{position:relative;padding:14px 18px 14px 52px;border-radius:18px;border:1px solid var(--line);background:#fff;font-weight:600}
.docs li::before{content:"";position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:6px;border:2px solid var(--accd);background:rgba(63,224,173,.18)}
.docs li::after{content:"";position:absolute;left:24px;top:50%;width:8px;height:4px;margin-top:-4px;border-left:2.5px solid var(--accd);border-bottom:2.5px solid var(--accd);transform:rotate(-45deg)}
.emerg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.emerg li{display:grid;gap:4px;padding:22px 24px;border-radius:22px;background:#0A1230;color:#fff}
.emerg b{font-family:var(--display);font-weight:900;font-stretch:112%;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--acc)}
.emerg span{color:#B8C3E6;font-size:15px}

/* futurist details */
header{position:sticky;top:10px;z-index:30;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 10px 30px -22px rgba(8,25,54,.35)}
.ghero{padding-top:18px}
.ghero .hc{position:absolute;width:22px;height:22px;border:1.5px solid rgba(26,79,232,.45);pointer-events:none;z-index:2}
.ghero .hc.a{left:-6px;top:-4px;border-right:0;border-bottom:0}.ghero .hc.b{right:-6px;top:-4px;border-left:0;border-bottom:0}.ghero .hc.c{left:-6px;bottom:-4px;border-right:0;border-top:0}.ghero .hc.d{right:-6px;bottom:-4px;border-left:0;border-top:0}
.ghero .tag{position:absolute;right:4px;top:4px;z-index:2;font:700 10.5px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:#1A4FE8;opacity:.8}
.ghero::after{content:"";position:absolute;right:-14%;top:-10%;width:60%;height:120%;z-index:0;pointer-events:none;background:repeating-radial-gradient(circle at 70% 45%,rgba(63,224,173,.22) 0 1px,transparent 1px 28px);-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);opacity:.7}
.ghero .city{z-index:1}
@media(max-width:700px){.ghero .hc,.ghero .tag{display:none}.ghero::after{display:none}}
/* the rail along the steps */
.steps{position:relative}
.js .steps::before{content:"";position:absolute;left:55px;top:22px;bottom:22px;width:2px;background:linear-gradient(180deg,var(--acc),rgba(26,79,232,.5));opacity:.35;z-index:0}
.js .steps .srail{position:absolute;left:49px;top:var(--sp,22px);width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px rgba(63,224,173,.22),0 0 26px rgba(63,224,173,.9);z-index:3;transition:top .25s linear;pointer-events:none}
.js .steps li{z-index:1}
.js .steps li.tilt.in{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.js .steps li.in::before{background:linear-gradient(135deg,var(--ink),#1A4FE8);-webkit-background-clip:text;background-clip:text;color:transparent}
.js .steps li.done::before{background:none;-webkit-text-fill-color:var(--accd);color:var(--accd)}
@media(max-width:700px){.js .steps::before{left:7px}.js .steps .srail{left:1px;width:12px;height:12px}}
/* the tip gets a light sweep when it arrives */
/* holographic numbers */
.emerg b,.chips li b{background:linear-gradient(100deg,#3FE0AD,#7FD9FF 50%,#1A4FE8);-webkit-background-clip:text;background-clip:text;color:transparent}
/* a scan line crosses the app card when it arrives */
.app .phone{position:relative}
.app .phone::after{content:"";position:absolute;right:-10px;top:-10px;width:38px;height:38px;border-radius:50%;background:var(--acc);box-shadow:0 10px 24px rgba(8,25,54,.4);transform:scale(0);-webkit-mask:none}
.app .phone::before{content:"";position:absolute;right:0;top:0;width:18px;height:18px;z-index:2;background:#06231A;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(0)}
.js .app.in .phone::after{animation:gbadge .5s cubic-bezier(.2,1.4,.4,1) .7s forwards}.js .app.in .phone::before{animation:gbadge .5s cubic-bezier(.2,1.4,.4,1) .75s forwards}
@keyframes gbadge{to{transform:scale(1)}}
/* cards glow */
.more a:hover{box-shadow:0 30px 60px -30px rgba(8,25,54,.35),0 0 0 1px rgba(63,224,173,.6),0 0 30px rgba(63,224,173,.22)}
.docs li:hover{border-color:rgba(63,224,173,.6);transform:translateX(4px)}.docs li{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s}

/* from the app: boarding pass + ticks */
.gprog{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.bp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:min(320px,100%);padding:9px 13px;border-radius:14px;background:var(--ink);color:#fff}
.bp-end small{font:800 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#9EF0D4}
.bp-end.to small{color:#fff}
.bp.full .bp-end.to small{color:#3FE0AD}
.bp-path{position:relative;height:24px;margin:0 12px}
.bp-line{position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(255,255,255,.35)}
.bp-dot{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(255,255,255,.35)}
.bp-plane{position:absolute;left:0;top:50%;width:22px;height:22px;fill:none;stroke:#3FE0AD;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:translate(-50%,-50%) rotate(45deg);filter:drop-shadow(0 0 8px rgba(63,224,173,.6));transition:left 1s cubic-bezier(.3,.7,.2,1)}
.bp.full .bp-plane{animation:bpbob 1.6s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(63,224,173,.95))}
@keyframes bpbob{0%,100%{transform:translate(-50%,-50%) rotate(45deg)}50%{transform:translate(-50%,-64%) rotate(45deg)}}
.gprog .sdone{margin:0}
.js .steps li.done::before{animation:gck .45s ease both}
@keyframes gck{0%{transform:scale(.6);text-shadow:0 0 0 rgba(63,224,173,0)}60%{transform:scale(1.15);text-shadow:0 0 16px rgba(63,224,173,.9)}100%{transform:none;text-shadow:0 0 10px rgba(63,224,173,.45)}}
.burst{position:fixed;z-index:300;width:0;height:0;pointer-events:none}
.burst i{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50% 50% 50% 0;background:var(--c);transform:rotate(var(--a)) translateY(0) rotate(-45deg);animation:burstOut .7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes burstOut{to{transform:rotate(var(--a)) translateY(-34px) rotate(-45deg) scale(.4);opacity:0}}
.still .bp-plane{transition:none}

/* the skyline before the app card */
.sky{position:relative;width:min(100%,760px);aspect-ratio:var(--ar,1022 / 224);margin:54px auto -26px;opacity:0;transition:opacity .4s}
.sky.draw{opacity:1}
.sky .skyline{position:absolute;inset:0;-webkit-mask-image:var(--sky);mask-image:var(--sky);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:linear-gradient(90deg,#1A4FE8,#22C6C4 50%,#3FE0AD);filter:drop-shadow(0 0 6px rgba(63,224,173,.55)) drop-shadow(0 0 14px rgba(34,198,196,.3));clip-path:inset(0 100% 0 0)}
.sky.draw .skyline{animation:skyDraw 2.3s cubic-bezier(.45,0,.2,1) .2s forwards}
@keyframes skyDraw{to{clip-path:inset(0 0 0 0)}}
.sky .pen{position:absolute;top:0;bottom:0;left:0;width:3px;border-radius:3px;background:linear-gradient(180deg,transparent,#fff 30%,#fff 70%,transparent);box-shadow:0 0 14px 4px rgba(126,227,255,.85);opacity:0}
.sky.draw .pen{animation:penMove 2.3s cubic-bezier(.45,0,.2,1) .2s forwards}
@keyframes penMove{0%{left:0;opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.still .sky{opacity:1}.still .sky .skyline{clip-path:none;animation:none}.still .sky .pen{display:none}
@media(max-width:700px){.sky{margin:40px auto -18px}}

/* small labels read like sentences: no capitals, no tracking, no dash before the eyebrow */
.crumbs{font:500 13px var(--body);letter-spacing:0;text-transform:none}
.kick{font:600 14px var(--body);letter-spacing:0;text-transform:none;color:var(--mut)}
.kick::before{display:none}
.badge{font:700 12.5px var(--body);letter-spacing:0;text-transform:none}
.tip b,.offer b{font:700 14px var(--body);letter-spacing:0;text-transform:none}
.more a small,.areas small{font:600 13px var(--body);letter-spacing:0;text-transform:none}
.cities h3{font:700 15px var(--body);letter-spacing:0;text-transform:none}
.ctable .area th{font:700 13px var(--body);letter-spacing:0;text-transform:none}
.sdone{font:700 13px var(--body);letter-spacing:0;text-transform:none}
.ad::before{font:600 11px var(--body);letter-spacing:0;text-transform:none}

/* phones: links tall enough for a thumb */
@media(max-width:700px){.crumbs a{display:inline-block;padding:8px 0}footer a{display:inline-block;padding:9px 0}footer{gap:0 20px}footer .tag{letter-spacing:0}}

/* a Newope touch of colour: the app's sky at the top of every guide, its mint behind what to bring, numbered steps as the
   app's round markers, the ticket's dotted route with the trail behind the plane, the deep blue of the boarding pass */
body{background:linear-gradient(180deg,#D3E4FF 0,#E6F0FF 380px,var(--paper) 860px) top/100% 900px no-repeat,linear-gradient(0deg,#DDF5EA 0,#E9F1FF 260px,var(--paper) 640px) bottom/100% 640px no-repeat,var(--paper)}
.areas b span{padding:3px 9px;border-radius:999px;background:#DDF5EA;letter-spacing:.04em}
header{background:rgba(255,255,255,.8)}
.ghero::after{display:none}
.steps li{grid-template-columns:44px 1fr;align-items:center;border-color:rgba(26,79,232,.12)}
.steps li::before,.js .steps li.in::before{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:900 19px/1 var(--display);font-stretch:112%;letter-spacing:0;background:linear-gradient(135deg,#1A4FE8,#0F2A6B);-webkit-background-clip:border-box;background-clip:border-box;color:#fff;-webkit-text-fill-color:#fff;opacity:1;box-shadow:0 0 0 5px rgba(63,224,173,.2)}
.steps li.done::before,.js .steps li.done::before{background:var(--acc);color:#06231A;-webkit-text-fill-color:#06231A;box-shadow:0 0 0 5px rgba(63,224,173,.3)}
.js .steps::before{left:46px;opacity:.5}
.js .steps .srail{display:none}
.docs{padding:16px;border-radius:26px;background:linear-gradient(160deg,#DDF5EA,#E6F0FF)}
.docs li{border-color:transparent;box-shadow:0 6px 16px -12px rgba(8,25,54,.25)}
.tip,.emerg li,.ctable .total td,.more a.cost{background:linear-gradient(150deg,#173D8F 0%,#0F2A6B 55%,#0B1F55 100%)}
.app{background:radial-gradient(120% 90% at 85% 110%,#1A4FE8 0%,#123A9A 35%,#0B1F55 75%)}
.bp{background:linear-gradient(150deg,#173D8F 0%,#0F2A6B 55%,#0B1F55 100%);padding:10px 14px;border-radius:16px}
.bp .bp-line{height:4px;margin-top:-2px;border:0;background:radial-gradient(circle,rgba(255,255,255,.42) 1.5px,transparent 2px) 0 50%/9px 4px repeat-x}
.bp-trail{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;width:4%;border-radius:3px;background:linear-gradient(90deg,rgba(63,224,173,.15),#3FE0AD);box-shadow:0 0 10px rgba(63,224,173,.6);transition:width 1s cubic-bezier(.3,.7,.2,1)}
.chips li,.areas li,.ctable{border-color:rgba(26,79,232,.12)}
.ctable .area th{background:linear-gradient(90deg,#DDF5EA,#E6F0FF)}
.cities>section{padding:6px 22px 24px;border-radius:30px;background:linear-gradient(180deg,#E3EDFF,#EEF5FF 60%,#E6F7F0)}
.cities>section .more a{border-color:transparent;box-shadow:0 6px 16px -12px rgba(8,25,54,.25)}
.sky{margin-bottom:-8px}
@media(max-width:700px){.steps li{grid-template-columns:36px 1fr}.steps li::before,.js .steps li.in::before{width:36px;height:36px;font-size:16px}.js .steps::before{left:36px}.docs{padding:10px;margin:0 -8px}.cities>section{padding:4px 14px 18px;margin:0 -8px}}

/* the guide index: pick the city (the home's switch), one city's guides at a time */
.cpick{display:inline-flex;gap:4px;margin-top:20px;padding:4px;border-radius:999px;background:#fff;border:1px solid rgba(26,79,232,.14);box-shadow:0 10px 24px -16px rgba(8,25,54,.35)}
.cpick button{all:unset;cursor:pointer;padding:10px 20px;border-radius:999px;font:800 15px var(--body);color:var(--mut);transition:background .3s,color .3s}
.cpick button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cpick button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cities.picked{grid-template-columns:1fr}
.cities.picked>section{display:none}
.cities.picked>section.on{display:block;animation:cpIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes cpIn{from{opacity:0;transform:translateY(14px)}}
.cities.picked .more{grid-template-columns:1fr 1fr}
.cities.picked .more>li:has(.cost){grid-column:auto}
@media(max-width:700px){.cities.picked .more{grid-template-columns:1fr}.cpick button{padding:10px 18px}}

/* the nudge after the steps: one line, the app's sky, a link to the arrival plan */
.nudge{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:16px 20px;border-radius:20px;background:linear-gradient(120deg,#E3EDFF,#E2F6EE);color:var(--ink);text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.nudge span{font-weight:600;font-size:15.5px;line-height:1.45}
.nudge b{flex:none;font:800 14px var(--body);color:#fff;background:var(--ink);padding:10px 16px;border-radius:999px;white-space:nowrap}
.nudge:hover{transform:translateY(-2px);box-shadow:0 18px 36px -22px rgba(8,25,54,.45)}
@media(max-width:700px){.nudge{flex-direction:column;align-items:flex-start;gap:12px}}