/* ==========================================================================
   Surf Crew landing page: "Aloha Summer"
   Dawn colours, 70s surf-poster type, endless-summer freedom.
   Also styles the legal pages (privacy, terms) and the 404 page.
   ========================================================================== */

:root {
    --plum: #2B1633;
    --plum-soft: #4A2A4F;
    --plum-mute: #6E5373;
    --cream: #FFF4E2;
    --paper: #FFFDF8;
    --sand: #F6D7A7;
    --sand-deep: #E9C28A;
    --lilac: #CDB6EA;
    --pink: #F4A7C0;
    --peach: #FFC59E;
    --gold: #FFE0A6;
    --sun-magenta: #E8457A;
    --sun-orange: #FF8A3D;
    --sun-yellow: #FFD24A;
    --hot: #C92C63;
    --hot-deep: #8E1F4E;
    --lagoon: #3CC2C0;
    --reef: #1C8C94;
    --deep: #0E6070;

    --display: 'Shrikhand', 'Cooper Black', Georgia, serif;
    --body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --gutter: clamp(20px, 5vw, 40px);
    --section-y: clamp(80px, 11vw, 140px);
    --ease-out: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--plum);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, p, ol, ul, dl, dd, figure {
    margin: 0;
}

ol, ul {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
}

img, svg {
    display: block;
}

:focus-visible {
    outline: 3px solid var(--lagoon);
    outline-offset: 3px;
    border-radius: 8px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--plum);
    color: var(--cream);
    font-weight: 700;
    text-decoration: none;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 16px;
}

.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.hot {
    color: var(--hot);
}

.section-title .hot {
    display: inline-block;
}

.section-title,
.section-sub,
.lede,
.fine-print,
.join-sub,
.hero-title {
    text-wrap: balance;
}

/* ---------- Type ---------- */

.eyebrow {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hot-deep);
}

.eyebrow-light {
    color: var(--sun-yellow);
}

.section-title {
    margin-top: 14px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -.005em;
}

.section-title-light {
    color: var(--cream);
}

.section-title-sm {
    font-size: clamp(32px, 4.4vw, 50px);
    margin-top: 0;
}

.section-sub {
    margin-top: 18px;
    max-width: 580px;
    font-size: clamp(17px, 1.6vw, 19px);
    color: var(--plum-soft);
}

.section-sub-light {
    color: #E3F4F2;
}

.fine-print {
    margin-top: 14px;
    font-size: 14px;
    color: var(--plum-soft);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    font-family: var(--display);
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s ease;
}

.btn:hover {
    transform: translate(-2px, -2px);
}

.btn:active {
    transform: translate(1px, 1px);
}

.btn-hot {
    background: var(--hot);
    color: var(--cream);
}

.btn-sun {
    background: var(--sun-yellow);
    color: var(--plum);
    box-shadow: 3px 3px 0 var(--plum);
}

.btn-sun:hover {
    box-shadow: 5px 5px 0 var(--plum);
}

.btn-plum {
    background: var(--plum);
    color: var(--cream);
    box-shadow: 4px 4px 0 var(--hot);
}

.btn-plum:hover {
    box-shadow: 6px 6px 0 var(--hot);
}

.btn.loading {
    opacity: .7;
    pointer-events: none;
}

/* ---------- Nav ---------- */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.nav.scrolled {
    background: rgba(255, 244, 226, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(43, 22, 51, .12);
}

.nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter) 12px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--display);
    font-size: 24px;
    text-decoration: none;
    color: var(--plum);
}

.brand-sun {
    width: 34px;
    height: 34px;
}

.nav-links {
    display: none;
    margin-left: auto;
    gap: 30px;
}

.nav-links a {
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    padding: 10px 0;
    background: linear-gradient(var(--hot), var(--hot)) left 85% / 0 2px no-repeat;
    transition: background-size .25s var(--ease-out);
}

.nav-links a:hover {
    background-size: 100% 2px;
}

.nav-cta {
    margin-left: auto;
    min-height: 46px;
    padding: 0 18px;
    font-size: 16px;
}

@media (min-width: 900px) {
    .nav-links {
        display: flex;
    }

    .nav-cta {
        margin-left: 12px;
    }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    background: var(--sand);
    overflow: hidden;
}

.hero-sky {
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg,
            var(--lilac) 0 18%,
            var(--pink) 18% 34%,
            var(--peach) 34% 50%,
            var(--gold) 50% 100%);
}

.hero-top {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 96px var(--gutter) 0;
    text-align: center;
}

.hero-bottom {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: 8px var(--gutter) clamp(64px, 8vw, 96px);
    text-align: center;
}

.arc-mark {
    width: min(320px, 70vw);
    height: auto;
    margin: 0 auto -6px;
    overflow: visible;
}

.arc-mark text {
    font-family: var(--display);
    font-size: 50px;
    letter-spacing: 3px;
    fill: var(--plum);
    stroke: var(--cream);
    stroke-width: 9px;
    stroke-linejoin: round;
    paint-order: stroke;
}

.hero-eyebrow {
    margin-top: 6px;
}

.hero-title {
    margin-top: 10px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(46px, 7.8vw, 106px);
    line-height: 1;
    letter-spacing: -.01em;
}

.outline {
    display: block;
    color: var(--cream);
    -webkit-text-stroke: .075em var(--plum);
    paint-order: stroke fill;
    text-shadow: .06em .06em 0 var(--plum);
}

.lede {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(18px, 1.9vw, 21px);
    line-height: 1.55;
    color: var(--plum-soft);
}

.waitlist-inline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 540px;
    margin: 30px auto 0;
}

.waitlist-inline input {
    height: 58px;
    padding: 0 22px;
    border: 2.5px solid var(--plum);
    border-radius: 999px;
    background: var(--paper);
    font: 500 17px var(--body);
    color: var(--plum);
}

.waitlist-inline input::placeholder,
.waitlist-card input::placeholder {
    color: #8C7390;
}

.waitlist-inline .btn {
    min-height: 58px;
}

@media (min-width: 560px) {
    .waitlist-inline {
        flex-direction: row;
        gap: 0;
        padding: 6px;
        border: 2.5px solid var(--plum);
        border-radius: 999px;
        background: var(--paper);
        box-shadow: 6px 6px 0 var(--plum);
    }

    .waitlist-inline input {
        flex: 1;
        min-width: 0;
        height: 52px;
        border: 0;
        background: transparent;
    }

    .waitlist-inline input:focus-visible {
        outline-offset: -3px;
        border-radius: 999px;
    }

    .waitlist-inline .btn {
        min-height: 52px;
    }
}

/* The scene stops growing at 1600px wide so palm tops and the sun never get
   cropped on big monitors; the sea and beach run past its edges to fill the
   rest of the screen. */
.scene {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    height: clamp(360px, 38vw, 580px);
    margin: clamp(-150px, -8vw, -24px) auto 0;
    overflow: visible;
}

/* Scene motion */
.sun {
    animation: sun-rise 2.8s var(--ease-out) both;
}

@keyframes sun-rise {
    from { transform: translateY(120px); }
    to { transform: translateY(0); }
}

.drift-slow { animation: drift-160 16s linear infinite; }
.drift-mid { animation: drift-220 13s linear infinite; }
.drift-fast { animation: drift-300 10s linear infinite; }

@keyframes drift-160 { to { transform: translateX(-160px); } }
@keyframes drift-220 { to { transform: translateX(-220px); } }
@keyframes drift-300 { to { transform: translateX(-300px); } }

.spark {
    animation: twinkle 3.2s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
}

.rider {
    animation: bob 3.4s ease-in-out infinite alternate;
}

@keyframes bob {
    from { transform: translate(-6px, 0) rotate(-2deg); }
    to { transform: translate(8px, -6px) rotate(2deg); }
}

.palm {
    animation: sway 7s ease-in-out infinite alternate;
}

.palm-right {
    animation-duration: 8.5s;
    animation-direction: alternate-reverse;
}

@keyframes sway {
    from { transform: rotate(-1.4deg); }
    to { transform: rotate(1.4deg); }
}

.gulls {
    animation: glide 9s ease-in-out infinite alternate;
}

@keyframes glide {
    from { transform: translate(0, 0); }
    to { transform: translate(40px, -12px); }
}

/* ---------- Marquee ---------- */

.marquee {
    overflow: hidden;
    background: var(--plum);
    color: var(--cream);
    padding: 18px 0;
    border-top: 4px solid var(--sun-yellow);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    font-family: var(--display);
    font-size: clamp(22px, 2.6vw, 30px);
    white-space: nowrap;
    animation: marquee 38s linear infinite;
}

.marquee-track i {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sun-yellow);
    box-shadow: 0 0 0 4px var(--hot);
}

@keyframes marquee {
    to { transform: translateX(calc(-50% - 14px)); }
}

/* ---------- Hero: forecast ticket and calls to action ---------- */

.hero-top:has(.hero-title-long) {
    max-width: 1180px;
}

.hero-title-long {
    margin-top: clamp(26px, 2vw, 30px);
    font-size: clamp(40px, 6vw, 84px);
}

.fc-ticket {
    max-width: 680px;
    margin: 34px auto 0;
    border: 2.5px solid var(--plum);
    border-radius: 22px;
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--plum);
    text-align: left;
    overflow: hidden;
}

.fc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 20px;
    background: var(--gold);
    border-bottom: 2.5px solid var(--plum);
}

.fc-when {
    font-family: var(--display);
    font-size: 22px;
    line-height: 1.1;
}

.fc-where {
    font-size: 14px;
    font-weight: 800;
}

.fc-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fc-stats div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 18px;
    border-bottom: 2px dashed var(--sand-deep);
}

.fc-stats div:nth-child(odd) {
    border-right: 2px dashed var(--sand-deep);
}

.fc-stats dt {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--plum-mute);
}

.fc-stats dd {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fc-stats small {
    font-size: 14px;
    font-weight: 700;
    color: var(--plum-soft);
}

.fc-stats .fc-tag {
    margin-top: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--lagoon);
    font-size: 12px;
}

.fc-crew {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: var(--lagoon);
}

.fc-faces {
    display: flex;
    padding-left: 9px;
}

.fc-faces span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: -9px;
    border: 2px solid var(--plum);
    border-radius: 50%;
    font-family: var(--display);
    font-size: 15px;
}

.fc-count {
    font-family: var(--display);
    font-size: 24px;
}

@media (min-width: 680px) {
    .fc-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fc-stats div {
        border-bottom: 0;
        border-right: 2px dashed var(--sand-deep);
    }

    .fc-stats div:last-child {
        border-right: 0;
    }

    .fc-crew {
        border-top: 2.5px solid var(--plum);
    }
}

@media (max-width: 679px) {
    .fc-stats div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .fc-crew {
        border-top: 2.5px solid var(--plum);
    }
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
    margin-top: 34px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 800;
    color: var(--plum);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.text-link:hover {
    color: var(--hot);
}

.hero-bottom .fine-print {
    margin-top: 18px;
}

/* ---------- Postcards from a good morning ---------- */

.morning {
    padding: var(--section-y) 0;
    background: var(--cream);
}

.postcards {
    display: grid;
    gap: 56px;
    margin-top: 56px;
}

.postcard {
    padding: 12px 12px 26px;
    border: 3px solid var(--plum);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: 8px 8px 0 var(--plum);
}

@media (min-width: 640px) {
    .postcard:nth-child(1) { rotate: -1.5deg; }
    .postcard:nth-child(2) { rotate: 1.2deg; }
    .postcard:nth-child(3) { rotate: -.8deg; }
}

.postcard-pic {
    position: relative;
    margin-bottom: 40px;
}

.postcard-pic svg {
    display: block;
    width: 100%;
    height: auto;
    border: 2.5px solid var(--plum);
    border-radius: 6px;
}

.postcard-sticker {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px 9px 14px;
    border: 2.5px solid var(--plum);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--plum);
    font-size: 14px;
    line-height: 1.3;
}

.postcard-sticker b {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.15;
}

.postcard-sticker small {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--plum-soft);
}

.sticker-good { background: var(--lagoon); }
.sticker-good small { color: var(--plum); }
.sticker-gold { background: var(--gold); }

.sticker-quote {
    font-style: italic;
    font-weight: 500;
    text-align: right;
}

.pill {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.pill-hot { background: var(--hot); color: var(--cream); }
.pill-plum { background: var(--plum); color: var(--cream); }

.postcard-time {
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hot-deep);
}

.postcard h3 {
    margin: 8px 8px 8px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(26px, 2.4vw, 30px);
    line-height: 1.1;
    text-wrap: balance;
}

.postcard h3 + p {
    padding: 0 8px;
    font-size: 17px;
    color: var(--plum-soft);
}

@media (min-width: 640px) and (max-width: 979px) {
    .postcards {
        max-width: 520px;
        margin-inline: auto;
    }
}

@media (min-width: 980px) {
    .postcards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 36px;
        align-items: start;
    }

    .postcard:nth-child(2) {
        margin-top: 36px;
    }
}

/* ---------- Two ways in ---------- */

.ways {
    padding: var(--section-y) 0;
    background: var(--paper);
    border-top: 3px solid var(--plum);
}

.ways-grid {
    display: grid;
    gap: 28px;
    margin-top: 48px;
}

.way {
    padding: clamp(26px, 3vw, 36px);
    border: 3px solid var(--plum);
    border-radius: 28px;
    box-shadow: 8px 8px 0 var(--plum);
}

.way-plan { background: var(--gold); }
.way-now { background: var(--lagoon); }

.way-icon {
    width: 60px;
    height: 60px;
}

.way h3 {
    margin-top: 16px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.1;
}

.way p {
    margin-top: 10px;
    max-width: 460px;
    font-size: 18px;
}

@media (min-width: 760px) {
    .ways-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}

/* ---------- The Aloha Code ---------- */

.code {
    position: relative;
    padding: var(--section-y) 0;
    background-color: var(--reef);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 20q20-14 40 0t40 0 40 0 40 0' fill='none' stroke='%23FFF4E2' stroke-opacity='.09' stroke-width='3'/%3E%3C/svg%3E");
    background-size: 160px 40px;
    color: var(--cream);
    text-align: center;
}

.edge {
    position: absolute;
    left: 0;
    width: 100%;
    height: 48px;
    color: var(--reef);
}

.edge-top {
    top: -47px;
}

.code .section-sub {
    margin-left: auto;
    margin-right: auto;
}

.code-grid {
    display: grid;
    gap: 26px;
    margin-top: 56px;
    text-align: left;
}

.ticket {
    padding: 10px;
    border-radius: 26px;
    background: var(--cream);
    color: var(--plum);
    box-shadow: 10px 10px 0 var(--deep);
    transition: transform .35s var(--ease-out);
}

.ticket:nth-child(2) { background: var(--gold); }
.ticket:nth-child(3) { background: #FFD9E3; }

.ticket:hover {
    transform: translateY(-6px) rotate(-1deg);
}

.ticket-inner {
    height: 100%;
    padding: 28px 24px 30px;
    border: 2.5px dashed var(--hot);
    border-radius: 18px;
}

.ticket-icon {
    width: 64px;
    height: 64px;
}

.ticket-no {
    display: block;
    margin-top: 18px;
    font-family: var(--display);
    font-size: 18px;
    color: var(--hot);
}

.ticket h3 {
    margin-top: 4px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
}

.ticket p {
    margin-top: 10px;
    color: var(--plum-soft);
}

.nos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 56px;
}

.nos li {
    padding: 10px 20px;
    border: 2px solid rgba(255, 244, 226, .6);
    border-radius: 999px;
    font-weight: 800;
    font-size: 16px;
}

@media (min-width: 900px) {
    .code-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ticket:nth-child(2) {
        transform: translateY(28px);
    }

    .ticket:nth-child(2):hover {
        transform: translateY(22px) rotate(-1deg);
    }
}

/* ---------- Ratings ---------- */

.ratings {
    padding: var(--section-y) 0 0;
    background: var(--sand);
    text-align: center;
    overflow: hidden;
}

.ratings .section-sub {
    margin-left: auto;
    margin-right: auto;
}

.boards {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(8px, 4.5vw, 64px);
    margin-top: 64px;
    padding-bottom: clamp(56px, 8vw, 96px);
}

.board {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(72px, 18vw, 140px);
}

.board svg {
    width: clamp(52px, 13vw, 84px);
    height: auto;
    transform-origin: 50% 100%;
    transition: transform .4s var(--ease-out);
}

.board:hover svg {
    transform: rotate(-6deg) translateY(-6px);
}

.board-epic svg {
    animation: epic-wiggle 4s ease-in-out infinite;
}

@keyframes epic-wiggle {
    0%, 80%, 100% { transform: rotate(0); }
    85% { transform: rotate(-5deg); }
    90% { transform: rotate(4deg); }
    95% { transform: rotate(-2deg); }
}

.board-label {
    margin-top: 14px;
    font-family: var(--display);
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.1;
}

.board-epic .board-label {
    color: var(--hot);
}

.board-cap {
    margin-top: 4px;
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--plum-soft);
}

.board-epic .board-cap {
    color: var(--plum);
    font-weight: 800;
}

/* ---------- Steps ---------- */

.steps {
    padding: var(--section-y) 0;
    background: var(--cream);
}

.steps-grid {
    display: grid;
    gap: 36px;
    margin-top: 48px;
}

.step-no {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--plum);
    color: var(--sun-yellow);
    font-family: var(--display);
    font-size: 26px;
}

.step h3 {
    margin-top: 18px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.step p {
    margin-top: 8px;
    color: var(--plum-soft);
}

@media (min-width: 900px) {
    .steps-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 48px;
    }
}

/* ---------- Join ---------- */

.join {
    position: relative;
    background: var(--pink);
    padding-bottom: var(--section-y);
    text-align: center;
    overflow: hidden;
}

.sunset {
    width: 100%;
    height: clamp(170px, 22vw, 300px);
    background: linear-gradient(180deg, var(--lilac) 0 30%, var(--peach) 30% 60%, var(--gold) 60% 100%);
}

.join-inner {
    padding-top: clamp(48px, 7vw, 80px);
}

.join-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(50px, 9vw, 116px);
    line-height: .98;
}

.join-title span {
    display: block;
    color: var(--hot-deep);
}

.join-sub {
    max-width: 560px;
    margin: 22px auto 0;
    font-size: clamp(18px, 1.9vw, 21px);
    color: var(--plum);
}

.join-beta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
}

.join-beta .btn {
    min-height: 60px;
    padding: 0 34px;
    font-size: 21px;
}

.join-or {
    max-width: 420px;
    font-size: 17px;
    font-weight: 700;
    color: var(--plum);
}

.waitlist-card {
    display: grid;
    gap: 16px;
    max-width: 620px;
    margin: 22px auto 0;
    padding: 26px;
    border: 3px solid var(--plum);
    border-radius: 28px;
    background: var(--paper);
    box-shadow: 10px 10px 0 var(--plum);
    text-align: left;
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    font-size: 14px;
    font-weight: 800;
}

.optional {
    font-weight: 500;
    color: var(--plum-mute);
}

.waitlist-card input,
.waitlist-card select {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 2.5px solid var(--plum);
    border-radius: 16px;
    background: #fff;
    font: 500 17px var(--body);
    color: var(--plum);
}

.waitlist-card select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%232B1633' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px;
}

.waitlist-card .btn {
    width: 100%;
    min-height: 60px;
    margin-top: 6px;
    font-size: 21px;
}

.join .fine-print {
    margin-top: 26px;
    color: var(--plum);
}

@media (min-width: 640px) {
    .waitlist-card {
        grid-template-columns: 1.3fr 1fr;
        padding: 30px;
    }

    .waitlist-card .btn {
        grid-column: 1 / -1;
    }
}

/* ---------- Footer ---------- */

.footer {
    padding: 56px 0 calc(40px + env(safe-area-inset-bottom));
    background: var(--plum);
    color: #E9D6E6;
}

.footer-inner {
    display: grid;
    gap: 28px;
}

.footer-brand {
    display: grid;
    gap: 4px;
}

.footer-mark {
    font-family: var(--display);
    font-size: 40px;
    line-height: 1.1;
    color: var(--peach);
}

.footer-tag {
    font-size: 16px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--cream);
    text-underline-offset: 4px;
}

.footer-copy {
    font-size: 14px;
    color: #BFA8C2;
}

@media (min-width: 800px) {
    .footer-inner {
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 48px;
    }
}

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 14px 22px 14px 14px;
    border-radius: 999px;
    background: var(--plum);
    color: var(--cream);
    font-weight: 700;
    box-shadow: 0 16px 40px rgba(43, 22, 51, .35);
    visibility: hidden;
    transform: translate(-50%, 160%);
    transition: transform .45s var(--ease-out), visibility 0s linear .45s;
}

.toast svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.toast.show {
    visibility: visible;
    transform: translate(-50%, 0);
    transition: transform .45s var(--ease-out), visibility 0s;
}

.toast.error svg circle {
    fill: var(--sun-orange);
}

/* ---------- Scroll reveal: content is always visible, it just settles into place ---------- */

.js .reveal {
    transform: translateY(22px);
    transition: transform .9s var(--ease-out);
}

.js .reveal.in {
    transform: none;
}

.js .ticket.reveal.in:hover {
    transform: translateY(-6px) rotate(-1deg);
}

@media (min-width: 900px) {
    .js .code-grid .ticket.reveal.in:nth-child(2) {
        transform: translateY(28px);
    }

    .js .code-grid .ticket.reveal.in:nth-child(2):hover {
        transform: translateY(22px) rotate(-1deg);
    }
}

/* ---------- Legal pages and 404 ---------- */

.nav-links a[aria-current="page"] {
    background-size: 100% 2px;
}

.legal-hero {
    position: relative;
    padding-top: calc(118px + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, var(--lilac) 0%, var(--pink) 55%, var(--peach) 100%);
    text-align: center;
    overflow: hidden;
}

.legal-hero-inner {
    padding-bottom: clamp(24px, 4vw, 40px);
}

.legal-title {
    margin-top: 12px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(48px, 8vw, 96px);
    line-height: 1;
    text-wrap: balance;
}

.legal-blurb {
    max-width: 560px;
    margin: 20px auto 0;
    font-size: clamp(17px, 1.7vw, 20px);
    color: var(--plum-soft);
    text-wrap: balance;
}

.legal-date {
    display: inline-block;
    margin-top: 22px;
    padding: 8px 16px;
    border: 2px solid var(--plum);
    border-radius: 999px;
    background: var(--cream);
    box-shadow: 3px 3px 0 var(--plum);
    font-size: 14px;
    font-weight: 700;
}

.legal-hero .sunset,
.lost .sunset {
    height: clamp(120px, 16vw, 220px);
    background: none;
}

.legal-body {
    background: var(--cream);
    padding: clamp(40px, 6vw, 72px) 0 var(--section-y);
}

.legal-content {
    max-width: 760px;
    padding-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(28px, 4vw, 48px);
    border: 2px solid var(--plum);
    border-radius: 28px;
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--plum);
}

@media (max-width: 559px) {
    .legal-content {
        width: calc(100% - 32px);
        padding: 24px 20px;
        border-radius: 22px;
        box-shadow: 4px 4px 0 var(--plum);
    }
}

.legal-content h2 {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 2px dashed var(--sand-deep);
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.15;
    color: var(--plum);
}

.legal-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.legal-content h3 {
    margin-top: 26px;
    font-size: 18px;
    font-weight: 800;
    color: var(--deep);
}

.legal-content p,
.legal-content li {
    font-size: 17px;
    line-height: 1.7;
    color: var(--plum-soft);
}

.legal-content p {
    margin-top: 12px;
}

.legal-content h2 + p,
.legal-content h2 + ul {
    margin-top: 14px;
}

.legal-content ul {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.legal-content li {
    position: relative;
    padding-left: 26px;
}

.legal-content li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--sun-magenta) 0 45%, var(--sun-orange) 45% 72%, var(--sun-yellow) 72%);
}

.legal-content strong {
    color: var(--plum);
    font-weight: 800;
}

.legal-content a {
    color: var(--hot);
    font-weight: 700;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.legal-content a:hover {
    color: var(--hot-deep);
}

.legal-contact {
    margin-top: 22px;
    padding: 20px 24px;
    border: 2px solid var(--plum);
    border-radius: 20px;
    background: var(--sun-yellow);
    box-shadow: 4px 4px 0 var(--plum);
}

.legal-contact p {
    margin: 0;
    color: var(--plum);
}

.legal-contact a {
    color: var(--plum);
}

.lost {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(110px + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, var(--lilac) 0%, var(--pink) 50%, var(--peach) 100%);
    text-align: center;
    overflow: hidden;
}

.lost-inner {
    margin: auto 0;
    padding-bottom: 32px;
}

.lost-title {
    margin-top: 10px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(60px, 12vw, 150px);
    line-height: .95;
}

.lost-sub {
    max-width: 440px;
    margin: 20px auto 30px;
    font-size: clamp(18px, 1.9vw, 21px);
    color: var(--plum-soft);
    text-wrap: balance;
}

/* ---------- Changelog page (/changelog) ---------- */

.changelog-body {
    background: var(--cream);
    padding: clamp(40px, 6vw, 72px) 0 var(--section-y);
}

.releases {
    display: grid;
    gap: clamp(48px, 7vw, 88px);
}

.release {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.release + .release::before {
    content: "";
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(clamp(48px, 7vw, 88px) / -2);
    border-top: 2px dashed var(--sand-deep);
}

.release-copy {
    display: grid;
    gap: 16px;
    align-content: start;
}

.release-chip {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: 2px solid var(--plum);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--plum);
    font-size: 14px;
    font-weight: 700;
}

.release-chip span {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--sun-yellow);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.release-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.02;
    text-wrap: balance;
    /* Shrikhand's j, g, p and y swing below and left of the line box, and Safari
       clips that ink while the release slides in. Pad the box out to hold it and
       pull it back with margins, so the layout doesn't move. */
    padding: .08em .16em .2em;
    margin: -.08em -.16em -.2em;
}

.release-line {
    max-width: 40ch;
    font-size: clamp(17px, 1.6vw, 19px);
    color: var(--plum-soft);
}

.ba {
    display: grid;
    gap: 10px;
    max-width: 44ch;
    margin-top: 4px;
}

.ba-card {
    padding: 12px 16px;
    border: 2px solid var(--plum);
    border-radius: 16px;
    background: var(--paper);
    font-size: 16px;
    line-height: 1.45;
    color: var(--plum-soft);
}

.ba-card b {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--plum-mute);
}

.ba-now {
    background: var(--gold);
    box-shadow: 4px 4px 0 var(--plum);
    color: var(--plum);
}

.ba-now b {
    color: var(--hot);
}

/* The little dawn poster each release's phone sits on */
.release-stage {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 40px 24px 36px;
    border: 2.5px solid var(--plum);
    border-radius: 28px;
    background: linear-gradient(180deg, var(--lilac) 0%, var(--pink) 55%, var(--peach) 100%);
    box-shadow: 6px 6px 0 var(--plum);
    overflow: hidden;
    isolation: isolate;
}

.stage-lagoon {
    background: linear-gradient(180deg, #BFEDE6 0%, var(--lagoon) 70%, var(--reef) 100%);
}

.stage-dusk {
    background: linear-gradient(180deg, var(--gold) 0%, var(--peach) 50%, var(--pink) 100%);
}

.stage-sun {
    position: absolute;
    z-index: -1;
    width: 360px;
    height: 360px;
    right: -90px;
    bottom: -120px;
    border-radius: 50%;
    background: repeating-linear-gradient(180deg, var(--sun-yellow) 0 30px, var(--sun-orange) 30px 40px, var(--sun-yellow) 40px 66px, var(--sun-magenta) 66px 74px);
    opacity: .85;
}

.phone {
    position: relative;
    width: min(250px, 72%);
    aspect-ratio: 540 / 1174;
    border: 7px solid #1A0F1F;
    border-radius: 38px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 40px -18px rgba(43, 22, 51, .6);
}

.phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.phone-back {
    position: absolute;
    width: min(180px, 50%);
    left: 6%;
    bottom: 18px;
    rotate: -8deg;
    opacity: .95;
}

.phone-back + .phone {
    margin-left: 22%;
}

/* Push: four banners drop in, one after another, on a loop */
.pings {
    position: absolute;
    top: 22px;
    left: 50%;
    translate: -50% 0;
    width: min(320px, calc(100% - 24px));
    display: grid;
}

.ping {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 253, 248, .95);
    box-shadow: 0 10px 24px -8px rgba(43, 22, 51, .45);
    opacity: 0;
}

.ping img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.ping small {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--plum-mute);
}

.ping small em {
    font-style: normal;
}

.ping strong {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.ping span {
    display: block;
    font-size: 13px;
    line-height: 1.3;
}

.release.in .ping {
    animation: ping-drop 10s var(--ease-out) infinite both;
}

.release.in .ping:nth-child(2) { animation-delay: 2.5s; }
.release.in .ping:nth-child(3) { animation-delay: 5s; }
.release.in .ping:nth-child(4) { animation-delay: 7.5s; }

@keyframes ping-drop {
    0% { opacity: 0; transform: translateY(-22px); }
    4%, 22% { opacity: 1; transform: none; }
    25%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* Answers: the pick moves In, Maybe, Out, Maybe */
.answers {
    position: absolute;
    bottom: 22px;
    left: 50%;
    translate: -50% 0;
    display: flex;
    gap: 6px;
    padding: 6px;
    border: 2.5px solid var(--plum);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--plum);
}

.answers span {
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.answers span:nth-child(2) {
    background: var(--sun-yellow);
}

.release.in .answers span {
    animation: pick-in 6s steps(1) infinite;
}

.release.in .answers span:nth-child(2) { animation-name: pick-maybe; }
.release.in .answers span:nth-child(3) { animation-name: pick-out; }

@keyframes pick-in { 0%, 25% { background: var(--sun-yellow); } 25.01%, 100% { background: transparent; } }
@keyframes pick-maybe { 0%, 25% { background: transparent; } 25.01%, 50% { background: var(--sun-yellow); } 50.01%, 75% { background: transparent; } 75.01%, 100% { background: var(--sun-yellow); } }
@keyframes pick-out { 0%, 50% { background: transparent; } 50.01%, 75% { background: var(--sun-yellow); } 75.01%, 100% { background: transparent; } }

.tally {
    position: absolute;
    top: 26px;
    right: 18px;
    padding: 9px 12px;
    border: 2.5px solid var(--plum);
    border-radius: 12px;
    background: var(--sun-yellow);
    box-shadow: 3px 3px 0 var(--plum);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    rotate: 4deg;
}

/* Forecast: spots tick on one by one */
.spots {
    position: absolute;
    top: 30px;
    right: 18px;
    display: grid;
    gap: 6px;
}

.spots li {
    padding: 7px 11px;
    border: 2px solid var(--plum);
    border-radius: 10px;
    background: var(--paper);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.spots li::before {
    content: "\2713  ";
    color: var(--hot);
}

.js .release:not(.in) .spots li {
    opacity: 0;
}

.release.in .spots li {
    animation: spot-on .5s var(--ease-out) both;
}

.release.in .spots li:nth-child(2) { animation-delay: .6s; }
.release.in .spots li:nth-child(3) { animation-delay: 1.2s; }

@keyframes spot-on {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

/* Sessions v2: a pick slides 1, 2, 3 and settles on 4 */
.rates {
    position: absolute;
    bottom: 22px;
    left: 50%;
    translate: -50% 0;
    display: flex;
    gap: 6px;
    padding: 6px;
    border: 2.5px solid var(--plum);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--plum);
}

.rates span {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.rates i {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 38px;
    height: 38px;
    border: 2px solid var(--plum);
    border-radius: 10px;
    background: var(--lagoon);
    translate: 132px 0;
}

.release.in .rates i {
    animation: rate-slide 6s var(--ease-out) infinite;
}

@keyframes rate-slide {
    0%, 12% { translate: 0 0; }
    18%, 30% { translate: 44px 0; }
    36%, 48% { translate: 88px 0; }
    54%, 100% { translate: 132px 0; }
}

/* Tide: the curve draws itself, then the dot lands on the start time */
.tide-card {
    position: absolute;
    top: 26px;
    right: 18px;
    width: 168px;
    padding: 10px 12px;
    border: 2.5px solid var(--plum);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--plum);
    rotate: 3deg;
}

.tide-card small {
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.tide-card small:first-child {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--plum-mute);
}

.tide-card svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 4px 0;
}

.tide-card path {
    stroke-dasharray: 1;
}

.js .release:not(.in) .tide-card path {
    stroke-dashoffset: 1;
}

.js .release:not(.in) .tide-card circle {
    opacity: 0;
}

.release.in .tide-card path {
    animation: tide-draw 1.6s var(--ease-out) both;
}

.release.in .tide-card circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: tide-dot .5s var(--ease-out) 1.2s both;
}

@keyframes tide-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes tide-dot {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: none; }
}

.changelog-cta {
    margin-top: clamp(64px, 9vw, 110px);
    display: grid;
    justify-items: center;
    text-align: center;
}

.changelog-cta .section-sub {
    margin-bottom: 26px;
}

@media (max-width: 860px) {
    .release {
        grid-template-columns: 1fr;
    }

    .release-stage {
        padding: 34px 16px 30px;
    }

    .tally,
    .spots,
    .tide-card {
        right: 10px;
    }

    .answers span {
        padding: 9px 11px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ping:first-child {
        opacity: 1;
    }

    .js .release .spots li,
    .js .release .tide-card circle {
        opacity: 1;
    }

    .js .release .tide-card path {
        stroke-dashoffset: 0;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js .reveal {
        transform: none;
    }
}