@font-face{
    font-family:'Lato';
    src:url('/fonts/lato/Lato-Regular.woff2') format('woff2');
    font-weight:400;font-display:swap;
}
@font-face{
    font-family:'Lato';
    src:url('/fonts/lato/Lato-Bold.woff2') format('woff2');
    font-weight:700;font-display:swap;
}

:root{
    --blue:#4664ff; --blue-dark:#3a54e0;
    --ink:#333; --muted:#666; --line:#ddd; --soft:#f4f4f4;
    --field-width:92%;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Lato',sans-serif;}

body{
    min-height:100vh;
    background:linear-gradient(165deg,#8e00ff,#4664ff,#24c8ff);
    background-attachment:fixed;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
}

/* ---- animated background ----

   The same canvas the signup screen uses. particles.js paints into
   this div, which stays empty in the HTML.

   Fixed rather than absolute, which is where this differs from
   signup: that screen is one viewport tall with overflow hidden, so
   absolute covers it. This page scrolls, and absolute would stop the
   particles at the first screenful and leave bare gradient below.

   pointer-events off because the config can make particles react to
   the cursor, and there are buttons here people have to reach. */
#particles-js{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.panel{
    min-height:100vh;
    padding:34px 15px 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
}

/* Soft colour pools over the gradient. Kept alongside the particles:
   they are diffuse where the particles are points, so the two do not
   compete. Painted above the canvas — .panel comes later in the DOM
   and both sit at z-index 0 — but they are translucent, so the
   particles still read through. Move #particles-js to z-index 1 to
   put the points in front. */
.panel::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.20), transparent 42%),
        radial-gradient(circle at 82% 12%, rgba(36,200,255,.26),  transparent 46%),
        radial-gradient(circle at 62% 88%, rgba(142,0,255,.26),   transparent 50%);
}

/* Everything that sits over the background needs this. A component
   left out of the list renders behind the gradient pools and looks
   washed out — that is the symptom to look for when adding one. */
.card, .brand-footer, .lead, .hero{
    position:relative;z-index:2;width:100%;max-width:700px;
}

/* Above the claim, where the logo used to be. height:auto keeps
   whatever proportion the file has; the width comes from the shared
   rule above. */
.hero{
    display:block;
    margin:0 auto 18px;
    height:auto;
    border-radius:12px;
}

/* At the foot now. Smaller than it was at the top: up there it was
   the first thing on the page and had to carry weight, down here it
   closes and should not compete with the button above it. */
.brand-logo{
    width:450px;
    max-width:70%;
    height:auto;
    display:block;
    margin:0 auto 10px;
    opacity:.9;
}

/* ---- the claim, on the gradient ----

   Outside the card on purpose. It is the one sentence somebody has
   to read, and a white box around it would make it look like a
   feature among others.

   Wider than the card too: 700 is the card's measure, and the
   headline does not fit one line inside it at this size. The
   override has to come after the shared rule above. */
.lead{margin:-6px auto 26px;max-width:1000px;text-align:center;color:#fff;}

/* text-wrap:balance spreads the wrap across lines instead of filling
   the first one to the edge. Browsers that ignore it wrap the old
   way — no broken state.

   The shadow lifts the line off a background that now has moving
   points behind it. */
.lead h1{
    color:#ffffff;
    font-size:46px;
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.02em;
    text-wrap:balance;
    text-shadow:0 3px 14px rgba(15,5,50,.35);
}

.lead h2{
    color:#ffd166;
    font-size:58px;
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.02em;
    text-wrap:balance;
    text-shadow:0 3px 14px rgba(15,5,50,.35);
}

/* For marking a single word inside either heading. Harmless when the
   span is not in the HTML. */
.lead h1 .hl,
.lead h2 .hl{
    color:#ffd166;
}

.lead p{
    margin:14px auto 0;
    max-width:720px;
    font-size:36px;
    line-height:1.75;
    color:rgba(255,255,255,.9);
}

/* The figures, on the gradient. Everything up there is already white,
   so weight and a touch of colour do the lifting — a light tint
   behind them would turn into a bright block over the violet. */
.lead p b{
    font-weight:700;
    color:#ffd166;
}

.card{background:#fff;border-radius:12px;padding:35px;margin:0 auto 16px;
    box-shadow:0 15px 40px rgba(0,0,0,.25);}

/* Weight 400 by default: two of the three endings deliver news
   ("Not open yet", "You need an invitation") and an invitation is not
   what they are. */
h2{font-size:32px;font-weight:400;color:var(--ink);margin-bottom:12px;
   text-align:center;line-height:1.25;}

/* The only ending with something to press. Lato ships 400 and 700
   here — asking for 600 would make the browser fake the weight. */
h2.invite-open{font-weight:700;}

.sub{color:var(--muted);line-height:1.65;font-size:18px;text-align:center;}

/* ---- what it is ----

   Three lines, not a feature grid. Somebody who has read this far
   wants to know whether it is for them, and three sentences answer
   that faster than nine boxes. */
.points{margin-top:0px;}

.point{
    display:flex;
    gap:14px;
    padding:16px 0;
    border-bottom:5px solid #c9d2e3;
}
.point:last-child{border-bottom:0;}

.point .n{
    flex:none;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#eef1f8;
    color:var(--blue);
    font-size:20px;
    font-weight:700;
}

.point .t{font-size:21px;font-weight:700;line-height:1.3;}
.point .d{margin-top:5px;font-size:17px;line-height:1.6;color:var(--muted);}

/* ---- the way in ----

   An anchor shaped like the buttons everywhere else, so the reader
   does not have to work out that it is the thing to press. */
.go{
    display:block;
    width:var(--field-width);
    margin:0 auto;
    padding:15px;
    border-radius:6px;
    background:var(--blue);
    color:#fff;
    font-size:21px;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    transition:.3s;
}

/* The second copy, above the card. Traffic exchanges show this page
   in a short iframe where the button at the bottom is off screen, and
   the visitor has seconds.

   It sits on the gradient rather than inside a white card, so it
   needs the width limit the card would otherwise give it — without
   the cap, the inherited 92% turns it into a bar across the screen —
   and its own stacking context to clear the particles.

   Larger type than the bottom copy, so the padding grows with it:
   the inherited 15px leaves 28px text almost touching the edge.

   Same two blues as the bottom button, in reverse order: this one
   starts dark and lightens on hover, that one starts light and
   darkens. Over a violet gradient the darker blue is the one that
   holds its shape.

   MUST come after .go: same specificity, so the later rule wins. */
.go-top{
    max-width:450px;
    margin:0 auto 22px;
    padding:18px 15px;
    position:relative;
    z-index:2;
    font-size:28px;
    background:var(--blue-dark);
}

.go:hover{background:var(--blue-dark);transform:translateY(-2px);}

.go-top:hover{background:var(--blue);transform:translateY(-2px);}

.fineprint{
    width:var(--field-width);
    margin:14px auto 0;
    font-size:15px;
    line-height:1.6;
    color:var(--muted);
    text-align:center;
}

/* Shown when there is no usable referral code: not an error, just the
   shape of the thing. Amber rather than red for that reason. */
.noinvite{
    width:var(--field-width);
    margin:8px auto 0;
    padding:16px 18px;
    background:#fff4d4;
    border:1px solid #ffe08a;
    border-radius:6px;
    color:#6b5400;
    font-size:16px;
    line-height:1.6;
}

.brand-footer{margin:22px auto 0;color:rgba(255,255,255,.85);font-size:18px;
    letter-spacing:.3px;line-height:1.8;text-align:center;}
.brand-footer a{color:rgba(255,255,255,.85);}
.brand-footer a:hover{text-decoration:underline;}

.brand-footer .tagline{font-size:18px;}

/* ---- RESPONSIVE ---- */

@media(max-width:600px){
    :root{--field-width:100%;}
    .brand-logo{max-width:300px;}
    .lead h1{font-size:34px;}
    .lead h2{font-size:38px;}
    .lead p{font-size:20px; line-height:1.4;}
    .card{padding:28px 22px;}
    h2{font-size:27px;}
    .go{font-size:19px;}

    /* .go-top carries its own font-size, so the .go rule above does
       not reach it. At 28px the label needs about 340px and a 320px
       phone does not have it. */
    .go-top{max-width:100%;font-size:21px;padding:16px 15px;}
}

/* Traffic exchanges embed this page in a short, fixed-height iframe,
   where a fixed-position canvas anchors to the frame rather than the
   page and pushes the content out of view. The animation is worth
   nothing to a visitor with five seconds; the content is everything. */
@media (max-height:700px){
    #particles-js{display:none;}
    .hero{max-width:340px;margin-bottom:10px;}
}

@media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
    .go:hover,
    .go-top:hover{transform:none;}
}