/* ---------- projectreferals.com, the public front ----------
   The site anyone can read: what the network is, how an introduction works, and
   the form that puts a business on the recruiting list. It borrows the palette and
   type of the member screens so the two feel like one product, but shares no CSS
   with them - nothing here can reach into the app, or the app into it.

   Everything that moves is opacity and transform only, starts when it comes into
   view, and stops entirely for anyone whose device asks for less movement. */

:root{
  /* One colour, and greys. Every accent on this page is a tint or a shade of the
     same blue - nothing else is introduced. */
  --brand:#1a56db; --brand-600:#1747b8; --brand-700:#123a98; --brand-900:#0f2f7a;
  --brand-100:#e8eefc; --brand-50:#f4f7fe;
  --ink:#111827; --ink-2:#4b5563; --ink-3:#6b7280; --line:#e5e7eb;
  --surface:#fff; --surface-2:#f8fafc; --ground:#f1f5f9;
  /* kept so older rules resolve to the one colour */
  --blue:var(--brand); --blue-2:var(--brand-600); --blue-soft:var(--brand-100);
  --go:var(--brand); --go-hover:var(--brand-600); --go-soft:var(--brand-100);
  --violet:var(--brand); --violet-soft:var(--brand-100); --teal:var(--brand); --teal-soft:var(--brand-100);
  --mint:#cfe0ff; --amber:var(--ink-2); --amber-soft:var(--ground);
  --dark:var(--brand-900); --dark-2:var(--brand-700);
  --wrap:1150px; --radius:14px;
  --shadow:0 18px 40px -30px rgba(17,24,39,.5);
  --shadow-lift:0 24px 50px -30px rgba(17,24,39,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--surface); color:var(--ink); overflow-x:hidden;
  font:400 17px/1.65 "Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(36px,5.6vw,62px);letter-spacing:-.04em}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:19px;letter-spacing:-.012em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:15px;
}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--ink-2);max-width:62ch}
.section{padding:clamp(60px,8vw,110px) 0;position:relative}
.section.tint{background:var(--surface-2)}
.section-head{max-width:70ch;margin-bottom:clamp(30px,4vw,50px)}
.section-head p{margin-top:15px}

/* ---- how far down the page they are ---- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--brand);z-index:60;pointer-events:none}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;position:relative;
  border-radius:12px;padding:15px 25px;font:700 16px/1 "Figtree",system-ui,sans-serif;
  text-decoration:none;overflow:hidden;
  transition:background .16s,border-color .16s,transform .16s,color .16s,box-shadow .16s;
}
.btn{white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-go{background:var(--brand);color:#fff;box-shadow:0 12px 26px -16px rgba(26,86,219,.85)}
.btn-go:hover{background:var(--brand-600);box-shadow:0 18px 34px -16px rgba(26,86,219,.8)}
.btn-dark{background:#fff;color:var(--brand-700)}
.btn-dark:hover{background:#eef3fb}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
/* a light passing across the main button, once it is in view */
.btn-go::after{
  content:"";position:absolute;top:-60%;bottom:-60%;width:38px;left:-60px;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}
.btn-go.sheen::after{animation:sheen 2.6s ease-in-out 2}
@keyframes sheen{0%{left:-60px}55%,100%{left:125%}}

/* ---- signed in already ---- */
.signed-in{background:var(--blue-soft);border-bottom:1px solid #cfd9fb;color:#1b2f7a;font-size:14.5px}
.signed-in-in{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;padding:9px 0}
.signed-in a{font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap}
.signed-in a:hover{text-decoration:underline}

/* ---- the bar at the top ---- */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s,background .25s}
.top.stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -26px rgba(13,26,45,.6);background:rgba(255,255,255,.94)}
.top-in{display:flex;align-items:center;gap:26px;height:74px;transition:height .25s}
.top.stuck .top-in{height:62px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;text-decoration:none;white-space:nowrap}
.brand .mark{width:33px;height:33px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:17px}
.top nav{display:flex;gap:26px;margin-left:auto}
.top nav a{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none;position:relative;padding:4px 0}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .2s}
.top nav a:hover{color:var(--ink)}
.top nav a:hover::after{transform:scaleX(1)}
.top .btn{padding:11px 18px;font-size:15px}
@media (max-width:980px){.top nav{display:none}.top-in{height:64px;gap:14px}.top .btn{margin-left:auto}}

/* ---- hero ---- */
.hero{color:#f2f5ff;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--brand-900) 0%,var(--brand-700) 45%,var(--brand-600) 100%)}
/* two slow lights behind everything, and a faint grid over them */
.hero .glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:-2;pointer-events:none}
.hero .glow.a{width:640px;height:640px;top:-240px;right:-140px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 64%)}
.hero .glow.b{width:600px;height:600px;bottom:-280px;left:-160px;background:radial-gradient(circle,rgba(120,160,255,.32),transparent 64%)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(circle at 50% 35%,#000 20%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 35%,#000 20%,transparent 78%);
}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center;
  padding:clamp(52px,7vw,92px) 0 clamp(56px,7vw,96px)}
@media (max-width:980px){.hero-in{grid-template-columns:1fr;gap:44px;padding-bottom:64px}}
.hero .eyebrow{color:#9fb3d9}
.hero h1{color:#fff;max-width:16ch}
.hero h1 .w{display:inline-block}
.hero h1 em{display:inline-block;font-style:normal;color:#cfe0ff}
.hero p.lede{color:#c9d5e8;margin-top:22px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-marks{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.hero-marks span{
  font-size:14px;color:#dbe4f3;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  padding:8px 14px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;
}
.hero-marks svg{width:16px;height:16px;stroke:#cfe0ff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* ---- the phone in the hero, showing the real screens ---- */
.device-wrap{position:relative;display:flex;justify-content:center}
.device{
  width:298px;max-width:100%;aspect-ratio:9/18.6;background:#0a1422;border-radius:38px;padding:11px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.09) inset;
  position:relative;z-index:1;
}
/* The screen is its own world: dark ink on light, whatever the section round it. */
.device .screen{width:100%;height:100%;background:var(--ground);color:var(--ink);border-radius:28px;overflow:hidden;position:relative}
.device .bar{height:30px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px;
  font-size:10.5px;font-weight:800;color:var(--ink)}
.device .bar i{width:15px;height:15px;border-radius:5px;background:var(--blue);color:#fff;display:grid;place-items:center;
  font-style:normal;font-size:9px}
.scenes{position:relative;height:calc(100% - 30px)}
.scene{position:absolute;inset:0;padding:13px;display:flex;flex-direction:column;opacity:0;transform:translateY(10px);
  transition:opacity .5s,transform .5s;pointer-events:none}
.scene.on{pointer-events:auto}
.scene .acts{margin-top:auto}
.scene.on{opacity:1;transform:none}
.scene .kick{display:flex;justify-content:space-between;align-items:center;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
.scene .kick b{background:var(--blue-soft);color:var(--blue);border-radius:99px;padding:2px 7px;letter-spacing:0;font-size:9px}
.scene h4{margin:7px 0 10px;font-size:15.5px;line-height:1.2;letter-spacing:-.02em}
.mini{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 8px 18px -16px rgba(13,26,45,.7)}
.mini .row{display:flex;gap:8px;align-items:center}
.mini .av{width:30px;height:30px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;
  font-size:10.5px;font-weight:800;flex:none}
.mini b{font-size:11.5px;display:block;line-height:1.25}
.mini small{font-size:9.5px;color:var(--ink-3);display:block}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.chips span{font-size:8.5px;font-weight:700;background:var(--surface-2);color:#55647a;border-radius:4px;padding:3px 6px}
.why{background:var(--brand-50);border-left:3px solid var(--brand);border-radius:8px;padding:8px;margin-top:8px}
.why em{font-style:normal;font-size:8px;letter-spacing:.1em;color:var(--brand);font-weight:800;text-transform:uppercase}
.why p{font-size:9.5px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.acts{display:flex;gap:6px;margin-top:10px}
.acts .a{flex:1;text-align:center;border-radius:8px;padding:8px 6px;font-size:10px;font-weight:700}
.acts .a.no{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.acts .a.yes{background:var(--brand);color:#fff}
.days,.times{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}
.days b,.times b{font-size:9.5px;font-weight:700;text-align:center;border:1px solid var(--line);border-radius:7px;padding:7px 2px;background:#fff}
.days b.on,.times b.on{background:var(--blue);border-color:var(--blue);color:#fff}
.times b.dash{border-style:dashed;border-color:var(--blue);color:var(--blue)}
.summary{margin-top:8px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px 10px}
.summary div{display:flex;justify-content:space-between;gap:8px;font-size:10px;padding:3px 0}
.summary span{color:var(--ink-3)}
.summary b{font-weight:700}
/* cards that drift beside the phone */
.float{position:absolute;background:#fff;color:var(--ink);border-radius:13px;padding:11px 13px;box-shadow:var(--shadow);
  border:1px solid var(--line);display:flex;gap:9px;align-items:center;font-size:12.5px;font-weight:650;z-index:2;max-width:210px}
.float small{display:block;font-weight:500;font-size:11px;color:var(--ink-3)}
.float .dot{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--go-soft);color:var(--go)}
.float .dot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.float.one{top:7%;right:-6%}
.float.two{bottom:11%;left:-7%}
@media (max-width:1180px){.float.one{right:-2%}.float.two{left:-2%}}
@media (max-width:980px){.float.one{right:2%}.float.two{left:2%}}
@media (max-width:560px){.float{display:none}}

/* ---- the ribbon of trades ---- */
.ribbon{background:var(--surface-2);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;position:relative}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ribbon::before{left:0;background:linear-gradient(90deg,var(--surface-2),transparent)}
.ribbon::after{right:0;background:linear-gradient(270deg,var(--surface-2),transparent)}
.ribbon-track{display:flex;gap:14px;width:max-content;animation:slide 44s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-track span{display:inline-flex;align-items:center;gap:9px;color:var(--ink-2);font-size:14.5px;font-weight:600;white-space:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 16px;box-shadow:0 8px 18px -18px rgba(16,25,53,.7)}
.ribbon-track svg{width:16px;height:16px;fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- cards ---- */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:27px 25px;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:#cbd5e6}
.section.tint .card{background:#fff}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:15.5px}
.card-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:17px;
  background:var(--blue-soft);color:var(--blue);transition:transform .25s}
.card:hover .card-ico{transform:scale(1.07) rotate(-4deg)}
.card-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card-ico.go{background:var(--go-soft);color:var(--go)}
.card-ico.amber{background:var(--amber-soft);color:var(--amber)}
.card-ico.violet{background:var(--violet-soft);color:var(--violet)}
.card-ico.teal{background:var(--teal-soft);color:var(--teal)}

/* ---- the four steps, on a line that draws itself ---- */
.steps{position:relative;display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:41px;height:2px;background:var(--line);z-index:0}
.steps::after{content:"";position:absolute;left:6%;top:41px;height:2px;width:88%;z-index:0;transform:scaleX(0);transform-origin:0 50%;
  background:var(--brand);transition:transform 1.6s ease-out}
.steps.drawn::after{transform:scaleX(1)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps::before,.steps::after{display:none}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;position:relative;z-index:1;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:#cbd5e6}
.step b{display:block;font-size:17px;margin:15px 0 8px;letter-spacing:-.012em}
.step p{font-size:15px;color:var(--ink-2)}
.step .n{width:36px;height:36px;border-radius:50%;background:var(--brand-100);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:15px}
.after-steps{margin-top:20px;background:var(--brand-900);color:#dbe5fb;border-radius:var(--radius);padding:27px 25px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden}
.after-steps b{color:#fff;display:block;margin-bottom:4px;font-size:17px}
.after-steps p{font-size:15.5px;max-width:64ch}

/* ---- the figures ---- */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:820px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
.figure{text-align:center;padding:26px 16px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.figure b{display:block;font-size:clamp(34px,4.6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--brand);font-variant-numeric:tabular-nums}
.figure span{display:block;margin-top:9px;font-size:14.5px;color:var(--ink-2)}

/* ---- seats ---- */
.seats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:20px}
@media (max-width:620px){.seats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.seat{border:1px dashed var(--line);border-radius:12px;padding:14px 12px;text-align:center;font-size:13.5px;font-weight:600;
  color:var(--ink-3);background:#fff;transition:transform .25s,border-color .25s,color .25s}
.seat:hover{transform:translateY(-3px)}
.seat.yours{border-style:solid;border-color:var(--brand);background:var(--brand-100);color:var(--brand);box-shadow:0 14px 28px -20px rgba(26,86,219,.8)}
.seat small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:5px;opacity:.85}

/* ---- trades ---- */
.trades{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.trade{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:10px 16px;font-size:15px;font-weight:600;transition:transform .2s,border-color .2s,box-shadow .2s}
.trade:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 12px 24px -20px rgba(35,70,216,.9)}
.trade svg{width:17px;height:17px;fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---- the plain-dealing list ---- */
.plain{display:grid;gap:12px;padding:0;margin:0}
.plain li{list-style:none;display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:17px 18px;font-size:15.5px;color:var(--ink-2);transition:transform .2s,box-shadow .2s}
.plain li:hover{transform:translateX(3px);box-shadow:var(--shadow-lift)}
.plain li b{color:var(--ink);font-weight:650}
.plain .yes,.plain .no{flex:none;width:23px;height:23px;border-radius:99px;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.plain .yes{background:var(--brand-100);color:var(--brand)}
.plain .no{background:var(--ground);color:var(--ink-3)}

/* ---- questions ---- */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:21px 44px 21px 0;font-weight:650;font-size:17.5px;position:relative;
  transition:color .2s}
.qa summary:hover{color:var(--blue)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .25s}
.qa details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.qa details p{padding:0 0 22px;color:var(--ink-2);max-width:74ch;font-size:16px}
.qa details[open] p{animation:fade-up .35s ease-out}
@keyframes fade-up{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ---- the closing band and the form ---- */
.join{color:#eef3ff;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--brand-900) 0%,var(--brand-700) 55%,var(--brand-600) 100%)}
.join .glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;z-index:-1;pointer-events:none}
.join .glow.a{width:580px;height:580px;top:-250px;left:-140px;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 64%)}
.join .glow.b{width:540px;height:540px;bottom:-270px;right:-120px;background:radial-gradient(circle,rgba(120,160,255,.3),transparent 64%)}
.join .eyebrow{color:#9fb3d9}
.join h2{color:#fff}
.join .lede{color:#c9d5e8}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.join-grid .wide{grid-column:1 / -1}
@media (max-width:760px){.join-grid{grid-template-columns:1fr}}
.field label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9fb3d9;margin-bottom:7px}
.field input,.field textarea{width:100%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;
  border-radius:11px;padding:14px 15px;font:400 16px/1.5 "Figtree",system-ui,sans-serif;transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:#8ba0c0}
.field input:focus,.field textarea:focus{outline:none;border-color:#cfe0ff;background:rgba(255,255,255,.14)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.join-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px}
.join-note{font-size:14px;color:#9fb3d9;max-width:52ch}
.join-said{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:17px 19px;margin-top:26px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:15.5px;
  animation:fade-up .4s ease-out}
.join-said.bad{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.join-said b{display:block;margin-bottom:2px}

/* ---- footer ---- */
.foot{background:var(--surface-2);border-top:1px solid var(--line);padding:46px 0 40px;font-size:15px;color:var(--ink-2)}
.foot-in{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--blue)}
.foot-links{display:flex;flex-wrap:wrap;gap:18px}
.foot small{display:block;margin-top:10px;color:var(--ink-3);font-size:13.5px;max-width:58ch}

/* ---- arriving on screen ----
   Only ever hidden while the script that shows them again is running: the html
   element carries .js from the head, so with no script nothing is hidden at all. */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
  .js .rise.in{opacity:1;transform:none}
  .js .rise[data-delay="1"]{transition-delay:.08s}
  .js .rise[data-delay="2"]{transition-delay:.16s}
  .js .rise[data-delay="3"]{transition-delay:.24s}
  .js .hero h1 .w{opacity:0;transform:translateY(22px);animation:word .7s cubic-bezier(.2,.7,.3,1) forwards}
  .js .device-wrap{opacity:0;transform:translateY(26px) scale(.97);animation:word .9s .25s cubic-bezier(.2,.7,.3,1) forwards}
  .js .float{opacity:0}
  .js .float.one{animation:word .7s 1s cubic-bezier(.2,.7,.3,1) forwards,drift 7s 1.9s ease-in-out infinite}
  .js .float.two{animation:word .7s 1.3s cubic-bezier(.2,.7,.3,1) forwards,drift 8s 2.3s ease-in-out infinite reverse}
}
@keyframes word{to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ribbon-track{animation:none}
  .steps::after{transition:none;transform:scaleX(1)}
  .btn:hover,.card:hover,.step:hover,.trade:hover,.seat:hover,.plain li:hover{transform:none}
  /* The phone still walks through the screens - it fades rather than slides, and the
     caption still changes. Turning the story off entirely leaves nothing to read. */
  .scene{transition:opacity .45s}
  .scene:not(.on){transform:none}
  .phone-cap{transition:opacity .3s}
  .badge i{animation:none}
  .journey .spark{animation:none;opacity:.55;left:0;width:100%;background:linear-gradient(90deg,var(--blue),var(--teal))}
}

/* ---------- the second pass: more life, and the whole story in the phone ---------- */

/* what is happening right now, above the headline */
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#dbe4f3;border-radius:99px;padding:8px 15px 8px 12px;font-size:13.5px;font-weight:600;margin-bottom:22px}
.badge i{width:8px;height:8px;border-radius:50%;background:#cfe0ff;box-shadow:0 0 0 0 rgba(207,224,255,.6);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(207,224,255,.6)}70%,100%{box-shadow:0 0 0 9px rgba(207,224,255,0)}}

/* a word in a heading, picked out */
.grad{font-style:normal;color:var(--brand)}

/* the four steps, inside the phone */
.prog{display:flex;gap:4px;padding:8px 12px 0;background:#fff}
.prog b{height:3px;flex:1;border-radius:9px;background:var(--line);transition:background .4s}
.prog b.done{background:var(--blue)}
.prog b.done:last-of-type{background:var(--brand)}

/* the screens of the first visit */
.scene .note{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.scene .note li{display:flex;gap:6px;align-items:flex-start;font-size:9.5px;color:var(--ink-2);line-height:1.45}
.scene .note s{flex:none;width:13px;height:13px;border-radius:99px;display:grid;place-items:center;font-size:7px;font-weight:800;text-decoration:none;margin-top:1px}
.scene .note s.ok{background:var(--brand-100);color:var(--brand)}
.scene .note s.x{background:var(--ground);color:var(--ink-3)}
.mini.list{padding:0}
.lrow{display:flex;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow s{flex:none;width:15px;height:15px;border-radius:4px;background:var(--brand);color:#fff;display:grid;place-items:center;
  font-size:8px;text-decoration:none;font-weight:800;margin:0}
.lrow > span{flex:1;min-width:0;text-align:left}
.lrow b{font-size:11px;display:block;line-height:1.25}
.lrow i{font-style:normal;font-size:8.5px;color:var(--brand);background:var(--brand-100);border-radius:99px;padding:1px 6px;display:inline-block;margin-top:3px}
.mini.tight{padding:8px 10px;margin-bottom:6px}
.pick{font-size:9.5px;font-weight:700;margin-top:10px}
.pick.blue{color:var(--blue)}
.tick-big{width:38px;height:38px;border-radius:50%;background:var(--brand-100);color:var(--brand);display:grid;place-items:center;margin:14px auto 8px}
.tick-big svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tabs-mini{position:absolute;left:0;right:0;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);padding:7px 4px}
.tabs-mini span{flex:1;text-align:center;font-size:8px;font-weight:700;color:#93a3b4}
.tabs-mini span.on{color:var(--blue)}
.scene .acts{margin-top:auto;padding-top:12px}

/* the caption under the phone, and the dots that steer it */
.phone-cap{margin-top:18px;text-align:center;font-size:14px;color:#c9d5e8;min-height:21px;opacity:0;transform:translateY(5px);
  transition:opacity .35s,transform .35s}
.phone-cap.in{opacity:1;transform:none}
.phone-dots{display:flex;gap:7px;justify-content:center;margin-top:12px}
.phone-dots button{width:7px;height:7px;border-radius:99px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.25);
  transition:width .25s,background .25s}
.phone-dots button.on{width:20px;background:#cfe0ff}
.device-wrap{flex-direction:column;align-items:center}

/* ---- how an introduction travels ---- */
.journey-sec{background:var(--brand-50);overflow:hidden;isolation:isolate;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.journey-sec .glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;z-index:-1;width:560px;height:560px;
  top:-220px;right:-140px;background:radial-gradient(circle,rgba(26,86,219,.18),transparent 64%)}
.journey{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:26px}
@media (max-width:900px){.journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media (max-width:560px){.journey{grid-template-columns:1fr}}
.journey .lane{position:absolute;left:10%;right:10%;top:52px;height:3px;border-radius:9px;background:#dbe2f6;overflow:hidden}
@media (max-width:900px){.journey .lane{display:none}}
.journey .spark{position:absolute;top:-1px;left:0;width:90px;height:5px;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);animation:travel 4.6s ease-in-out infinite}
@keyframes travel{0%{left:-10%}55%,100%{left:105%}}
.node{position:relative;text-align:center;padding:0 6px}
.node .ring{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  background:#fff;border:1px solid var(--line);color:var(--blue);box-shadow:0 14px 30px -20px rgba(47,84,255,.75);
  transition:transform .3s,background .3s,border-color .3s,box-shadow .3s}
.node .ring.mid{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 16px 32px -20px rgba(26,86,219,.9)}
.node .ring.go{background:var(--brand-100);border-color:#c9d9fb;color:var(--brand)}
.node .ring svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.node:hover .ring{transform:translateY(-4px) scale(1.05)}
.node b{display:block;color:var(--ink);font-size:16.5px;letter-spacing:-.01em}
.node small{display:block;margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.5}

/* ---- a dark section, with glass cards ---- */
.section.dark{background:var(--brand-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.dark .card{background:#fff}
.section.dark .seat{background:#fff}

/* a coloured hairline that grows across a card as it is hovered */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;transform:scaleX(0);transform-origin:0 50%;
  background:var(--brand);transition:transform .3s}
.card:hover::before{transform:scaleX(1)}