/* marketing.css — the styles shared by the marketing pages: the landing page
   (index.html) and the points page (points.html).

   The campaign's look: a near-white paper ground, near-black type, one accent
   word per headline, white pills and rounded media cards with a soft shadow. */
:root{
    color-scheme:light;
    --bg:#f5f5f9;
    --bg-soft:#ffffff;
    --card:#ffffff;
    --text:#14121a;
    --ink:#14121a;
    --muted:#65636e;
    --muted-strong:#4f4d57;
    --accent:#8b7cff;      /* headline words only: too light for body-size text */
    --accent-ink:#5b47e0;  /* the same violet, dark enough for links and small text */
    --border:rgba(20,18,26,0.08);
    --border-strong:rgba(20,18,26,0.16);
    --shadow-pill:0 0 0 1px rgba(20,18,26,0.08), 0 10px 30px -12px rgba(20,18,26,0.25);
    --shadow-card:0 0 0 1px rgba(20,18,26,0.06), 0 40px 80px -28px rgba(20,18,26,0.35);
    --radius-card:30px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:linear-gradient(180deg,#ffffff 0%, var(--bg) 560px) var(--bg);
    color:var(--text);
    line-height:1.6;
}

a{
    color:inherit;
}

img,
video{
    max-width:100%;
}

:focus-visible{
    outline:3px solid var(--accent-ink);
    outline-offset:3px;
}

.container{
    width:min(1180px,92%);
    margin:auto;
}

.icon{
    width:1.15em;
    height:1.15em;
    flex:none;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.sprite{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

nav{
    position:sticky;
    top:0;
    backdrop-filter:blur(14px);
    background:rgba(255,255,255,0.82);
    border-bottom:1px solid var(--border);
    z-index:100;
}

.nav-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 0;
}

.logo{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:1.2rem;
    font-weight:800;
    letter-spacing:-0.03em;
    text-decoration:none;
    color:var(--text);
}

.logo img{
    width:28px;
    height:28px;
}

.nav-links{
    display:flex;
    gap:18px;
    align-items:center;
}

/* Nothing in the header wraps, shrinks or runs past the container: the links
   keep their width and the button keeps its place at the right edge. */
.nav-links a{
    flex:none;
    text-decoration:none;
    color:var(--muted);
    font-size:0.95rem;
    white-space:nowrap;
    transition:color 0.2s ease;
}

.nav-links a[aria-current="page"]{
    color:var(--text);
}

.nav-links a:hover{
    color:var(--text);
}

.nav-links #nav-auth-link{
    color:var(--text);
    font-weight:600;
}

.nav-links .cta{
    color:white;
    min-height:40px;
    padding:10px 18px;
}

.nav-links .cta:hover{
    color:white;
}

/* Hamburger — shown only on small screens (see the 900px media query). */
.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border-radius:12px;
    border:0;
    background:#fff;
    box-shadow:var(--shadow-pill);
    cursor:pointer;
}

.nav-toggle svg{
    width:22px;
    height:22px;
    fill:var(--text);
}

.nav-toggle .cross{
    display:none;
}

nav.open .nav-toggle .bars{
    display:none;
}

nav.open .nav-toggle .cross{
    display:block;
}

.btn,
.cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:14px 26px;
    border-radius:999px;
    text-decoration:none;
    color:var(--text);
    font-weight:700;
    letter-spacing:-0.01em;
    border:0;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.cta{
    background:var(--ink);
    color:white;
    box-shadow:0 24px 50px -18px rgba(20,18,26,0.5);
}

.secondary{
    background:#fff;
    box-shadow:var(--shadow-pill);
}

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

/* --- Pills and media cards --- */
/* A pill is a label, not a button: nothing happens on hover, and the cursor
   says so. The share labels, which are buttons, opt back in (.label-btn). */
.pill{
    cursor:default;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    background:#fff;
    color:var(--text);
    font-weight:600;
    font-size:1rem;
    line-height:1.3;
    letter-spacing:-0.01em;
    box-shadow:var(--shadow-pill);
}

.pill-dark{
    background:var(--ink);
    color:#fff;
    box-shadow:0 18px 40px -16px rgba(20,18,26,0.55);
}

.media-card{
    position:relative;
    border-radius:var(--radius-card);
    overflow:hidden;
    background:#ececf1;
    box-shadow:var(--shadow-card);
}

.media-card img,
.media-card video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Where a post was made: the frosted tag that sits on the media. */
.place-tag{
    position:absolute;
    left:14px;
    bottom:14px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:999px;
    font-size:0.9rem;
    font-weight:600;
    color:#fff;
    background:rgba(10,8,30,0.55);
    backdrop-filter:blur(14px);
    box-shadow:0 0 0 1px rgba(255,255,255,0.28);
}

/* An app screen: the recording carries its own UI, so the frame is only a
   rounded card. 820x1678 is the recordings' own ratio. */
.phone{
    width:min(300px,78vw);
    margin:0 auto;
    border-radius:34px;
    overflow:hidden;
    background:#fff;
    box-shadow:var(--shadow-card);
}

.phone-screen{
    position:relative;
    aspect-ratio:820/1678;
    background:#ececf1;
}

.phone-screen img,
.phone-screen video{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* --- Stacks --- */
/* Several items in one place, as in the campaign: the next one slides in from
   the side and lands on the pile, and the one before stays in view beneath.
   landing.js turns them over; without it the first two are simply shown. */
.stack{
    position:relative;
    margin:0 auto;
    --peek:40px;
    --from:100vw;
}

.stack-phones{
    width:min(300px,78vw);
    aspect-ratio:820/1678;
}

.stack-cards{
    width:min(380px,82vw);
    aspect-ratio:4/5;
}

.stack .stack-item{
    position:absolute;
    inset:0;
    width:100%;
    margin:0;
    opacity:0;
    z-index:1;
    transform:rotate(var(--rot));
    transition:opacity 0.45s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

.stack-item:nth-child(4n+1){--rot:1.5deg}
.stack-item:nth-child(4n+2){--rot:-2.5deg}
.stack-item:nth-child(4n+3){--rot:2deg}
.stack-item:nth-child(4n+4){--rot:-1.5deg}

.stack .stack-item.is-under{
    opacity:1;
    z-index:2;
    transform:translate(var(--peek),10px) rotate(calc(var(--rot) + 3deg));
}

.stack .stack-item.is-top{
    opacity:1;
    z-index:3;
}

/* Where the next item waits, off screen, before it slides in. */
.stack .stack-item.is-entering{
    opacity:1;
    z-index:4;
    transform:translateX(var(--from)) rotate(calc(var(--rot) + 8deg));
    transition:none;
}

/* A stack on the left of its copy arrives from the left. */
.split.reverse .stack{
    --peek:-40px;
    --from:-100vw;
}

/* --- Hero --- */
/* Copy left, the City Feed right. 92px is the sticky nav's height. */
.hero{
    min-height:min(calc(100vh - 92px),860px);
    display:flex;
    align-items:center;
    padding:40px 0 56px;
    overflow-x:clip;
}

/* A page's opening that isn't the landing page's: it takes the room it needs,
   not the whole screen. */
.hero-short{
    min-height:0;
    padding:clamp(48px,6vw,88px) 0 clamp(32px,4vw,56px);
}

.hero-split{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:56px;
    align-items:center;
    text-align:left;
}

/* The campaign's opening line: the name heavy, the sentence lighter. */
.hero h1{
    font-size:clamp(2.5rem,4vw,3.5rem);
    line-height:1.1;
    letter-spacing:-0.035em;
    font-weight:800;
    margin-bottom:22px;
}

.hero h1 .line{
    display:block;
}

.hero h1 .line-soft{
    font-weight:500;
    letter-spacing:-0.025em;
}

/* The sentence breaks only between its two halves, never inside one. */
.hero h1 .part{
    display:inline-block;
    white-space:nowrap;
}

.hero h1 .mark{
    display:inline-block;
    width:0.95em;
    height:0.95em;
    margin:0 0.04em;
    vertical-align:-0.14em;
}

.gradient{
    color:var(--accent);
}

.hero p{
    color:var(--muted-strong);
    font-size:1.18rem;
    line-height:1.5;
    max-width:460px;
    margin:0 0 28px;
}

.hero p span{
    display:block;
    text-wrap:balance;
}

.hero-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.hero-note{
    margin-top:18px;
    color:var(--muted);
    font-size:0.92rem;
    font-weight:600;
}

.mechanic{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-top:4px;
    color:var(--muted);
    font-size:0.98rem;
    font-weight:600;
    letter-spacing:-0.01em;
}

.mechanic li{
    display:flex;
    align-items:center;
}

.mechanic li+li::before{
    content:"\2192";
    margin:0 12px;
    color:var(--border-strong);
}

.mechanic a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    color:var(--muted-strong);
    text-decoration:none;
    transition:color 0.2s ease;
}

.mechanic a:hover{
    color:var(--accent-ink);
}

@keyframes seq-in{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
}

.js .mechanic li{
    animation:seq-in 0.5s ease both;
}

.js .mechanic li:nth-child(1){animation-delay:0.5s}
.js .mechanic li:nth-child(2){animation-delay:0.8s}
.js .mechanic li:nth-child(3){animation-delay:1.1s}

/* --- Sections --- */
.section{
    position:relative;
    display:flex;
    align-items:center;
    padding:clamp(64px,8vw,112px) 0;
    overflow-x:clip;
}

/* A section that makes one short point takes less room to make it. */
.section-compact{
    padding:clamp(40px,5vw,72px) 0;
}

.section>.container{
    width:min(1180px,92%);
}

/* Anchored jumps land below the sticky nav. */
section[id],
header[id],
.anchor-target{
    scroll-margin-top:84px;
}

/* The ids this page used before (#discover, #rewards, #join) still resolve:
   each is a zero-size marker pinned to the top of the section that replaced
   it (pinned, because the sections centre their flex children). */
.anchor-alias{
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:0;
    scroll-margin-top:84px;
}

.section-header{
    max-width:760px;
    margin-bottom:40px;
}

.section h2,
.cta-section h2{
    font-size:clamp(2.1rem,3.7vw,3.3rem);
    line-height:1.06;
    letter-spacing:-0.035em;
    font-weight:800;
    margin-bottom:18px;
    text-wrap:balance;
}

.section-header p,
.split-copy p{
    color:var(--muted-strong);
    font-size:1.18rem;
    line-height:1.5;
    max-width:520px;
    text-wrap:balance;
}

/* Copy beside its visual. On small screens it is always copy first, visual
   straight underneath. */
.split{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:64px;
    align-items:center;
}

.split.reverse .split-copy{
    order:2;
}

.split-copy .pill{
    margin-top:28px;
}

.fine-print{
    margin-top:18px;
    color:var(--muted);
    font-size:0.9rem;
    line-height:1.5;
}

/* Beside a section's lead paragraph it stays the smaller of the two. */
.split-copy p.fine-print{
    margin-top:12px;
    font-size:0.95rem;
}

.fine-print a,
.accent-ink{
    color:var(--accent-ink);
}

/* --- Share: what a post can be --- */
.label-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-top:28px;
}

.label-btn{
    min-height:44px;
    font-family:inherit;
    border:0;
    cursor:pointer;
    transition:background 0.3s ease, color 0.3s ease;
}

.split-copy .label-btn{
    margin-top:0;
}

.label-btn.is-active{
    background:var(--ink);
    color:#fff;
}

/* --- Local knowledge --- */
/* Posts gather into places, places into a city, the city into knowledge:
   each row narrower than the one before, so the column reads as a funnel. */
.gather-figure{
    width:min(460px,100%);
    margin:0 auto;
}

.gather{
    list-style:none;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.gather-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:100%;
}

/* The line that carries one row down into the next. */
.gather-step+.gather-step::before{
    content:"";
    width:2px;
    height:26px;
    margin:14px 0 2px;
    border-radius:2px;
    background:var(--border-strong);
}

.gather-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

.gather-row .pill{
    margin-top:0;
    font-size:0.92rem;
    padding:8px 14px;
}

.thumb-row{
    display:flex;
    justify-content:center;
}

.thumb-row img{
    width:76px;
    height:76px;
    border-radius:22px;
    object-fit:cover;
    border:4px solid #fff;
    box-shadow:var(--shadow-pill);
    margin-left:-14px;
}

.thumb-row img:first-child{
    margin-left:0;
}

.thumb-row img:nth-child(odd){
    transform:rotate(-4deg);
}

.thumb-row img:nth-child(even){
    transform:rotate(3deg) translateY(6px);
}

.knowledge-card{
    list-style:none;
    width:100%;
    padding:8px 22px;
    border-radius:var(--radius-card);
    background:#fff;
    box-shadow:var(--shadow-card);
    text-align:left;
}

.knowledge-card li{
    display:flex;
    flex-direction:column;
    padding:13px 0;
    line-height:1.35;
}

.knowledge-card li+li{
    border-top:1px solid var(--border);
}

.knowledge-card strong{
    font-weight:700;
    letter-spacing:-0.01em;
}

.knowledge-card span{
    color:var(--muted-strong);
    font-size:0.95rem;
}

.gather-figure figcaption{
    margin-top:16px;
    text-align:center;
    color:var(--muted);
    font-size:0.9rem;
    text-wrap:balance;
}

/* --- Ask --- */
.prompt-list{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
    max-width:520px;
}

.prompt-list .pill{
    margin-top:0;
    font-size:0.95rem;
}

.ask-figure{
    width:min(420px,100%);
    margin:0 auto;
}

.ask-panel{
    background:#fff;
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    padding:26px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.ask-place{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:800;
    letter-spacing:-0.01em;
}

.ask-q{
    align-self:flex-end;
    max-width:85%;
    padding:12px 18px;
    border-radius:22px 22px 6px 22px;
    background:var(--ink);
    color:#fff;
    font-weight:600;
}

.ask-a{
    align-self:flex-start;
    max-width:92%;
    padding:16px 18px;
    border-radius:22px 22px 22px 6px;
    background:var(--bg);
}

.ask-a-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
    font-size:0.78rem;
    font-weight:800;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--accent-ink);
}

.ask-sources{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    color:var(--muted);
    font-size:0.85rem;
}

.ask-sources img{
    width:44px;
    height:44px;
    border-radius:12px;
    object-fit:cover;
}

.ask-input{
    padding:13px 18px;
    border-radius:999px;
    border:1px solid var(--border-strong);
    color:var(--muted);
    font-size:0.95rem;
}

.ask-figure figcaption{
    margin-top:16px;
    text-align:center;
    color:var(--muted);
    font-size:0.9rem;
    text-wrap:balance;
}

/* --- Points: post, evaluation, points --- */
.flow{
    list-style:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:32px;
    align-items:center;
    max-width:940px;
}

.flow-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
}

.flow-label{
    font-size:0.8rem;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
}

.flow-card{
    position:relative;
    width:min(300px,78vw);
}

.flow-card .media-card{
    aspect-ratio:4/5;
}

/* The profile is taller than the card: keep its name and points in view. */
.flow-card .media-card img.from-top{
    object-position:top;
}

.flow-ai{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--muted);
}

.flow-ai .icon{
    width:28px;
    height:28px;
}

.ai-node{
    width:112px;
    height:112px;
    border-radius:50%;
    background:#fff;
    box-shadow:var(--shadow-card);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent-ink);
}

.ai-node .icon{
    width:44px;
    height:44px;
    stroke-width:1.8;
}

.flow-note{
    max-width:180px;
    text-align:center;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.3;
}

.points-badge{
    position:absolute;
    top:-20px;
    right:-24px;
    z-index:2;
    font-size:1.2rem;
    font-weight:800;
    padding:12px 22px;
}

.flow-caption{
    max-width:940px;
    margin-top:40px;
    text-align:center;
    color:var(--muted);
    font-size:0.9rem;
    text-wrap:balance;
}

@keyframes badge-pop{
    0%{transform:scale(0.7);opacity:0}
    70%{transform:scale(1.06);opacity:1}
    100%{transform:scale(1);opacity:1}
}

.js .reveal .points-badge{
    opacity:0;
}

.js .reveal.is-visible .points-badge{
    animation:badge-pop 0.5s 0.35s ease-out both;
}

/* --- Token eligibility and wallet --- */
.eligibility-split{
    align-items:start;
}

.timeline{
    list-style:none;
    margin-top:36px;
}

.timeline li{
    position:relative;
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    gap:20px;
    padding-bottom:30px;
}

.timeline li:last-child{
    padding-bottom:0;
}

/* The line that joins one step to the next. */
.timeline li::before{
    content:"";
    position:absolute;
    left:27px;
    top:56px;
    bottom:0;
    width:2px;
    background:var(--ink);
}

.timeline li:last-child::before{
    display:none;
}

.timeline .node{
    width:56px;
    height:56px;
    border-radius:50%;
    border:2px solid var(--ink);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.timeline .node .icon{
    width:24px;
    height:24px;
}

.timeline li:last-child .node{
    background:var(--ink);
    color:#fff;
}

.timeline h3{
    font-size:1.25rem;
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.2;
    margin:4px 0 4px;
}

.timeline p{
    color:var(--muted-strong);
    font-size:1rem;
    line-height:1.45;
    max-width:420px;
}

.text-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    margin-top:22px;
    color:var(--accent-ink);
    font-weight:600;
    text-decoration:none;
}

.text-link:hover{
    text-decoration:underline;
}

/* The same link, said quietly: it points somewhere, it doesn't sell it. */
.text-link.quiet{
    margin-top:0;
    color:var(--muted-strong);
    font-size:0.95rem;
}

.flow-more{
    max-width:940px;
    margin-top:6px;
    text-align:center;
}

/* --- Steps (points page) --- */
.steps-list{
    margin-top:0;
}

.steps-list p{
    max-width:none;
}

.sub-steps{
    list-style:none;
    display:grid;
    gap:10px;
    margin-top:14px;
}

/* Plain cards: not steps of the timeline they sit inside. */
.sub-steps li{
    display:block;
    padding:14px 18px;
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow-pill);
    color:var(--muted-strong);
    font-size:0.98rem;
    line-height:1.45;
}

.sub-steps li::before{
    display:none;
}

.sub-steps strong{
    color:var(--text);
}

.step-btn{
    margin-top:14px;
}

.side-cards{
    display:grid;
    gap:24px;
    align-self:start;
    position:sticky;
    top:100px;
}

.side-cards .wallet-card .disclaimer{
    margin:0 0 16px;
    padding-top:16px;
}

.side-cards .text-link{
    margin-top:0;
}

.pill-label{
    margin-top:16px;
}

.wallet-card{
    background:#fff;
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    padding:36px;
}

.wallet-card h3{
    font-size:1.6rem;
    font-weight:800;
    letter-spacing:-0.03em;
    line-height:1.15;
    margin-bottom:8px;
}

.wallet-card>p{
    color:var(--muted-strong);
}

.steps{
    list-style:none;
    counter-reset:step;
    display:grid;
    gap:10px;
    margin:24px 0;
}

.steps li{
    counter-increment:step;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 16px;
    border-radius:18px;
    background:var(--bg);
    font-weight:600;
    line-height:1.3;
}

.steps li::before{
    content:counter(step);
    flex:none;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    font-size:0.9rem;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}

.steps small{
    display:block;
    color:var(--muted);
    font-size:0.85rem;
    font-weight:500;
}

.wallet-card .fine-print{
    margin:0 0 22px;
}

.disclaimer{
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:0.95rem;
    line-height:1.55;
    max-width:760px;
}

.disclaimer a{
    color:var(--accent-ink);
}

/* Inside the wallet card it sits straight above the button. */
.wallet-card .disclaimer{
    margin:0 0 22px;
    padding-top:18px;
    font-size:0.9rem;
}

/* --- Questions --- */
.faq{
    max-width:760px;
    border-bottom:1px solid var(--border);
}

.faq details{
    border-top:1px solid var(--border);
}

.faq summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:60px;
    padding:12px 0;
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:-0.01em;
    cursor:pointer;
    list-style:none;
}

.faq summary::-webkit-details-marker{
    display:none;
}

.faq summary::after{
    content:"+";
    flex:none;
    color:var(--muted);
    font-size:1.5rem;
    font-weight:500;
    line-height:1;
}

.faq details[open] summary::after{
    content:"\2212";
}

.faq details p{
    max-width:620px;
    padding:0 0 20px;
    color:var(--muted-strong);
    line-height:1.55;
}

/* --- Final CTA --- */
.cta-section{
    position:relative;
    display:flex;
    align-items:center;
    padding:clamp(64px,8vw,112px) 0;
    overflow-x:clip;
}

.cta-section .split-copy p{
    margin-bottom:30px;
}

.cta-section .split-copy p span{
    display:block;
}

.cta-section .split-copy .fine-print{
    margin:16px 0 0;
    font-size:0.9rem;
}

.cta-media{
    width:min(380px,82vw);
    aspect-ratio:4/5;
    margin:0 auto;
    transform:rotate(1.5deg);
}

.store-buttons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.store-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-width:190px;
    min-height:56px;
    padding:10px 24px;
    border-radius:999px;
    text-decoration:none;
    background:var(--ink);
    color:#fff;
    box-shadow:0 24px 50px -18px rgba(20,18,26,0.5);
    text-align:left;
    transition:transform 0.2s ease;
}

.store-btn:hover{
    transform:translateY(-3px);
}

.store-btn svg{
    width:26px;
    height:26px;
    fill:white;
    flex:none;
}

.store-btn small{
    display:block;
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.72);
}

.store-btn strong{
    display:block;
    font-size:1.12rem;
    letter-spacing:-0.02em;
    line-height:1.2;
}

/* --- Support --- */
/* Linked from the App Store / Google Play listings as https://www.auggle.ai/#support,
   so this section must always exist on the landing page with that exact id. */
#support{
    padding:72px 0 40px;
}

.support-grid{
    display:grid;
    grid-template-columns:minmax(280px,5fr) 7fr;
    gap:48px;
    align-items:start;
    background:var(--card);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-card);
    padding:44px;
}

.support-grid .section-header{
    margin-bottom:0;
}

.support-contact{
    margin-top:22px;
    display:grid;
    gap:12px;
    color:var(--muted-strong);
}

.support-contact a{
    color:var(--accent-ink);
    text-decoration:none;
    font-weight:600;
}

.support-contact a:hover{
    text-decoration:underline;
}

.support-form label{
    display:block;
    font-size:0.85rem;
    font-weight:600;
    color:var(--muted-strong);
    margin:0 0 6px;
}

.support-form .form-group{
    margin-bottom:16px;
}

.support-form input,
.support-form textarea{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--border-strong);
    background:#fff;
    color:var(--text);
    font-family:inherit;
    font-size:1rem;
    line-height:1.5;
}

.support-form textarea{
    min-height:140px;
    resize:vertical;
}

.support-form input:focus,
.support-form textarea:focus{
    outline:3px solid rgba(91,71,224,0.25);
    outline-offset:0;
    border-color:var(--accent-ink);
}

.support-form .btn{
    cursor:pointer;
    font-family:inherit;
    font-size:1rem;
}

.support-form .btn[disabled]{
    opacity:0.6;
    cursor:wait;
}

/* Honeypot: hidden from people, filled only by bots. */
.support-form .hp{
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.form-status{
    margin-top:16px;
    padding:14px 16px;
    border-radius:12px;
    border:1px solid rgba(91,71,224,0.3);
    background:rgba(139,124,255,0.1);
    color:var(--text);
}

.form-status.error{
    border-color:rgba(168,106,18,0.45);
    background:rgba(246,200,95,0.16);
}

.form-status a{
    color:var(--accent-ink);
    font-weight:600;
}

/* Replaces the form once a message is sent. */
.support-done{
    margin-top:0;
    padding:20px;
    font-weight:600;
}

.support-form [aria-invalid="true"]{
    border-color:#a86a12;
}

footer{
    padding:40px 0;
    border-top:1px solid var(--border);
    color:var(--muted);
    text-align:center;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 22px;
    margin-bottom:14px;
}

.footer-links a{
    color:var(--muted-strong);
    text-decoration:none;
}

.footer-links a:hover{
    color:var(--text);
}

.footer-social a{
    font-weight:600;
}

/* --- Scroll reveal --- */
/* Only under .js, so the page is complete without scripts. */
.js .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

.js .reveal.is-visible{
    opacity:1;
    transform:none;
}

/* A list inside a reveal whose items arrive one after the other. */
.js .seq>*{
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}

.js .is-visible .seq>*{
    opacity:1;
    transform:none;
}

.seq>*:nth-child(1){transition-delay:0.15s}
.seq>*:nth-child(2){transition-delay:0.35s}
.seq>*:nth-child(3){transition-delay:0.55s}
.seq>*:nth-child(4){transition-delay:0.75s}

@media(max-width:960px){
    .hero{
        min-height:0;
        padding:40px 0 32px;
    }

    .hero h1{
        font-size:clamp(2.5rem,7vw,3.6rem);
    }

    /* One column, copy first and left-aligned as in the campaign's vertical
       cuts, the visual centred straight beneath it. */
    .hero-split,
    .split{
        grid-template-columns:minmax(0,1fr);
        gap:40px;
    }

    .split.reverse .split-copy{
        order:0;
    }

    .label-list{
        flex-direction:row;
        flex-wrap:wrap;
        gap:10px;
    }

    .flow{
        grid-template-columns:minmax(0,1fr);
        gap:28px;
        max-width:none;
    }

    .flow-caption{
        max-width:none;
    }

    .flow-ai{
        flex-direction:column;
    }

    .flow-ai>.icon{
        transform:rotate(90deg);
    }

    .wallet-card{
        width:100%;
        max-width:520px;
    }

    .side-cards{
        position:static;
        max-width:520px;
        margin:0 auto;
    }
}

@media(max-width:900px){
    /* Nav links collapse into a hamburger dropdown. */
    .nav-toggle{
        display:flex;
    }

    .nav-links{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 4% 18px;
        background:#ffffff;
        border-bottom:1px solid var(--border);
        box-shadow:0 30px 40px -30px rgba(20,18,26,0.3);
    }

    nav.open .nav-links{
        display:flex;
    }

    .nav-links a{
        padding:14px 4px;
        font-size:1.05rem;
        border-bottom:1px solid var(--border);
    }

    .nav-links a:last-of-type{
        border-bottom:none;
    }

    .nav-links .cta{
        min-height:48px;
        margin-top:12px;
        text-align:center;
    }
}

@media(max-width:760px){
    .hero-buttons{
        flex-direction:column;
    }

    .btn,
    .cta{
        width:100%;
    }

    .stack{
        --peek:18px;
    }

    .split.reverse .stack{
        --peek:-18px;
    }

    .points-badge{
        right:-8px;
    }

    .wallet-card{
        padding:26px 22px;
    }

    .support-grid{
        grid-template-columns:1fr;
        gap:28px;
        padding:26px 20px;
        border-radius:22px;
    }

    .store-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .store-btn{
        justify-content:center;
    }

    .thumb-row img{
        width:64px;
        height:64px;
        border-radius:18px;
        margin-left:-12px;
    }
}

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

    .js .reveal,
    .stack .stack-item,
    .btn,
    .cta,
    .store-btn,
    .label-btn{
        transition:none;
    }

    .js .reveal{
        opacity:1;
        transform:none;
    }

    .js .reveal .points-badge,
    .js .reveal.is-visible .points-badge,
    .js .mechanic li{
        opacity:1;
        animation:none;
    }

    .js .seq>*{
        opacity:1;
        transform:none;
        transition:none;
    }
}