/* Lik · "The Title Chase": color-block reels, stickers and tilted phones along one road. */
@font-face{font-family:"Lik Rum Raisin";src:url("../assets/fonts/rum-raisin.ttf") format("truetype");font-display:swap}

:root{
  /* Lik app tokens (src/design/tokens.ts): candy red, blush, wash; gold only for rewards */
  --red:#d40827;--red-hi:#f26a73;--red-2:#e4263f;--red-deep:#a9001f;--wine:#650817;
  --blush:#f8dadd;--blush-2:#f3c4ca;--wash:#fff1f0;--bg:#fff9f5;--cream:#fffaf7;--white:#fff;
  --gold:#ffd34d;--gold-deep:#c48a12;
  --ink:#24151a;--muted:#6e5960;--line:#eac7cb;--line-2:#d99aa3;
  --butter:var(--gold);--butter-soft:var(--wash);--mint:var(--blush);
  --display:"Lik Rum Raisin","Rum Raisin",Georgia,serif;
  --ui:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:var(--ui);
  --gloss:linear-gradient(180deg,#f04459 0%,#d40827 52%,#a9001f 100%);
  --gloss-gold:linear-gradient(180deg,#ffe58a 0%,#ffd34d 48%,#e8a91f 100%);
  --dot:radial-gradient(circle,#d4082724 1.6px,transparent 2px) 0 0/20px 20px;
  --dot-lt:radial-gradient(circle,#ffffff26 1.6px,transparent 2px) 0 0/20px 20px;
  --sh:0 1px 2px #6508170f,0 6px 16px #65081714;
  --sh-lg:0 2px 4px #65081712,0 18px 40px #6508171f;
  --gut:clamp(8px,1.1vw,16px);--rad:clamp(26px,3vw,44px);
  --edge:var(--line);--hl:var(--red);--bar:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 8px);-webkit-text-size-adjust:100%;font-synthesis:none}
body{margin:0;background:var(--dot),var(--bg);background-attachment:fixed;color:var(--ink);font-family:var(--ui);font-weight:600;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.012em;line-height:.95;text-wrap:balance}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}
.c-red :focus-visible,.c-ink :focus-visible{outline-color:var(--gold)}
::selection{background:var(--blush);color:var(--red-deep)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:var(--white);color:var(--red);padding:12px 18px;border-radius:999px;border:0;box-shadow:var(--sh-lg);font:400 1.1rem var(--display)}
.skip:focus{top:12px}
.i{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ───────── top bar: the road ───────── */
.top{position:sticky;top:0;z-index:50;height:var(--bar);display:flex;align-items:center;gap:clamp(10px,2vw,28px);padding:0 clamp(12px,2vw,28px);background:#fff9f5e6;-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid #eac7cb99}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--red);flex:none}
.brand img{width:34px;height:34px;display:block}
.road{position:relative;flex:1;min-width:0;height:44px;margin-inline:6px 10px}
.road ol{position:relative;display:flex;height:100%;align-items:center}
.road ol::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--blush)}
.road ol::after{content:"";position:absolute;left:12px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--gloss);width:calc((100% - 24px) * var(--p,0))}
.road li{flex:1;display:flex;justify-content:center;position:relative;z-index:1}
.road a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:0 2px;text-decoration:none;color:var(--muted);font:400 1.05rem/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.road a::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--white);border:2.5px solid var(--line-2);transition:background .2s,border-color .2s,transform .2s}
.road a span{position:absolute;top:calc(50% + 12px);opacity:0;transition:opacity .15s}
.road a:hover span,.road a:focus-visible span,.road a[aria-current=true] span{opacity:1}
.road a:hover,.road a[aria-current=true]{color:var(--red)}
.road li.done a::before{background:var(--red);border-color:var(--red)}
.road a[aria-current=true]::before{background:var(--gold);border-color:var(--red);transform:scale(1.25)}
/* the rider: grows into a pill for a name and stays inside the road at both ends */
.token{position:absolute;z-index:2;top:50%;left:calc(12px + (100% - 24px) * var(--p,0));translate:calc(-100% * var(--p,0)) -50%;min-width:32px;max-width:8.5em;height:32px;padding:0 10px;border-radius:999px;background:var(--gloss);color:var(--white);box-shadow:inset 0 2px 0 #ffffff66,0 4px 10px #d4082759;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font:400 .9rem/32px var(--display);pointer-events:none;transition:left .12s linear}
.top-links{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);flex:none;font-weight:800;font-size:.95rem}
.top-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink);white-space:nowrap}
.top-links a:hover{color:var(--red)}
/* section menu: a native <details>, so it opens without script */
.menu{display:none;position:relative;flex:none}
.menu summary{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--red);box-shadow:inset 0 0 0 1.5px var(--line),var(--sh);cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary .i{width:22px;height:22px}
.menu[open] summary{background:var(--gloss);color:var(--white);box-shadow:inset 0 2px 0 #ffffff59,0 6px 14px #d4082740}
.menu-sheet{position:absolute;right:0;top:calc(100% + 12px);width:min(calc(100vw - 24px),340px);padding:14px;border:1px solid var(--line);border-radius:26px;background:var(--white);box-shadow:var(--sh-lg)}
.menu-sheet ol{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.menu-sheet ol a{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 10px;border-radius:14px;text-decoration:none;font:400 1.3rem/1 var(--display);color:var(--ink)}
.menu-sheet ol a:hover{background:var(--wash);color:var(--red)}
.menu-sheet ol b{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--wash);color:var(--red);font:400 .8rem/1 var(--display);flex:none}
.menu-sheet p{display:flex;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.menu-sheet p a{flex:1;display:grid;place-items:center;min-height:46px;border-radius:999px;background:var(--wash);color:var(--red-deep);font-weight:800;font-size:.92rem;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:58px;padding:0 30px;border:0;border-radius:999px;background:var(--gloss);color:var(--white);font:400 1.34rem/1 var(--display);letter-spacing:.01em;text-decoration:none;cursor:pointer;box-shadow:inset 0 2px 0 #ffffff59,inset 0 -3px 0 #65081733,0 10px 22px #d408274d;transition:transform .15s,box-shadow .15s,filter .15s;text-align:center}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 2px 0 #ffffff59,inset 0 -3px 0 #65081733,0 14px 28px #d4082759}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 0 #ffffff40,inset 0 -2px 0 #65081733,0 4px 10px #d4082740}
.c-red .btn,.c-ink .btn{background:var(--white);color:var(--red);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #d4082722,0 12px 26px #3a00084d}
.btn .i{width:1.25em;height:1.25em}
.top .btn{min-height:42px;padding:0 20px;font-size:1.1rem;flex:none}
.tag{display:inline-flex;align-items:center;gap:.55em;padding:.42em 1.05em .36em;border-radius:999px;background:var(--white);color:var(--red);font:400 1.1rem/1.1 var(--display);letter-spacing:.015em;box-shadow:inset 0 0 0 1.5px var(--line),var(--sh)}
.tag-ink{background:#ffffff26;color:var(--white);box-shadow:inset 0 0 0 1.5px #ffffff4d}
.tag-butter{background:var(--gloss-gold);color:var(--wine);box-shadow:inset 0 1px 0 #ffffff80,0 6px 14px #3a000833}
.tag-red{background:var(--gloss);color:var(--white);box-shadow:inset 0 1px 0 #ffffff59,0 6px 14px #d4082740}
.tag .dot{width:.55em;height:.55em;border-radius:50%;background:var(--red);flex:none}
.tag-ink .dot{background:var(--gold)}
.tag-red .dot{background:var(--white)}
.soon{display:inline-block;padding:.28em .8em .22em;border-radius:999px;background:var(--gloss-gold);color:var(--wine);font:800 .68rem/1.3 var(--ui);letter-spacing:.03em;white-space:nowrap;vertical-align:middle;box-shadow:inset 0 1px 0 #ffffff80}
.fict{display:inline-flex;align-items:center;gap:.55em;margin-top:18px;padding:.42em 1em;border-radius:999px;background:#ffffffe0;color:var(--muted);font:650 .76rem/1.3 var(--ui);text-align:center;box-shadow:inset 0 0 0 1px var(--line)}
.fict::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--red);flex:none}
.c-red .fict,.c-ink .fict{background:#ffffff1f;color:#ffe9ec;box-shadow:inset 0 0 0 1px #ffffff40}
.c-red .fict::before,.c-ink .fict::before{background:var(--gold)}

/* ───────── reels (sections) ───────── */
.reel{position:relative;margin:var(--gut);border-radius:var(--rad);padding:clamp(60px,7vw,108px) 0;overflow:clip;isolation:isolate}
.wrap{width:min(1240px,calc(100% - clamp(36px,7vw,120px)));margin-inline:auto}
.c-red{background:var(--dot-lt),radial-gradient(1100px 620px at 12% -12%,#f0435a 0%,transparent 62%),radial-gradient(900px 700px at 105% 115%,#8e0a1f 0%,transparent 60%),var(--red);color:var(--white);--hl:var(--gold)}
.c-ink{background:var(--dot-lt),radial-gradient(1000px 560px at 85% -10%,#a3132c 0%,transparent 60%),radial-gradient(800px 600px at 0% 110%,#3e0510 0%,transparent 62%),var(--wine);color:var(--white);--hl:var(--gold)}
.c-mint{background:var(--dot),radial-gradient(900px 520px at 90% 0%,#fde3e6 0%,transparent 65%),var(--white);color:var(--ink);--hl:var(--red)}
.c-butter{background:var(--dot),radial-gradient(900px 520px at 10% 0%,#ffe1e4 0%,transparent 65%),var(--wash);color:var(--ink);--hl:var(--red)}
.c-cream{background:var(--dot),radial-gradient(900px 520px at 0% 100%,#fde6e8 0%,transparent 65%),var(--cream);color:var(--ink);--hl:var(--red)}
.c-mint,.c-butter,.c-cream{box-shadow:inset 0 0 0 1px #eac7cb80}
.c-mint h2,.c-butter h2,.c-cream h2{color:var(--red-deep)}
.stop{position:absolute;right:clamp(16px,3vw,40px);top:clamp(14px,2vw,26px);display:flex;align-items:center;gap:.5em;font:400 1.2rem/1 var(--display);letter-spacing:.01em;color:var(--red)}
.stop b{display:grid;place-items:center;min-width:2.2em;height:2.2em;border-radius:50%;background:var(--gloss);color:var(--white);font:400 .92rem/1 var(--display);box-shadow:inset 0 2px 0 #ffffff59,0 4px 10px #d4082740}
.c-red .stop,.c-ink .stop{color:var(--white)}
.c-red .stop b,.c-ink .stop b{background:var(--white);color:var(--red)}
.kicker{display:inline-flex;margin-bottom:22px;transform:rotate(-2deg)}
h2{font-size:clamp(2.7rem,6vw,6rem)}
.lead{font-size:clamp(1.12rem,1.5vw,1.4rem);font-weight:650;line-height:1.45;max-width:32ch;margin-top:22px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center}
.split>*{min-width:0}
.hl{position:relative;display:inline-block;white-space:nowrap}
.hl .uline{position:absolute;left:-3%;bottom:-.2em;width:106%;height:.34em;overflow:visible;pointer-events:none}
.hl .uline path{fill:none;stroke:var(--uc,var(--hl));stroke-width:7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.js:not(.calm) .hl .uline{clip-path:inset(-20% 100% -20% 0)}
.js:not(.calm) .in .hl .uline,.js:not(.calm) .hl.in .uline{clip-path:inset(-20% -2% -20% 0);transition:clip-path .8s .25s cubic-bezier(.6,.1,.2,1)}
.card{background:var(--white);color:var(--ink);border:1px solid #eac7cbb3;border-radius:28px;box-shadow:var(--sh-lg)}
.c-red .card,.c-ink .card{border-color:transparent;box-shadow:0 2px 4px #3a00081a,0 24px 48px #3a00084d}
.sample{display:inline-block;padding:.22em .8em;border-radius:999px;background:var(--wash);color:var(--red);font:700 .72rem/1.3 var(--ui);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line)}

/* stickers */
.sticker{display:block;width:var(--s,150px);height:auto;transform:rotate(var(--r,0deg));filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 12px #0004);pointer-events:none;user-select:none}
.abs{position:absolute}
.float{animation:bob 5s ease-in-out infinite}
.float.d1{animation-delay:-1.2s}.float.d2{animation-delay:-2.4s}.float.d3{animation-delay:-3.6s}
@keyframes bob{50%{translate:0 -10px}}

/* phone */
.phone{position:relative;width:var(--pw,300px);margin:0 auto;transform:rotate(var(--r,0deg))}
.phone-device{position:relative;aspect-ratio:511/968;filter:drop-shadow(0 22px 30px #65081733) drop-shadow(0 4px 8px #6508171f)}
.c-ink .phone-device{filter:drop-shadow(0 24px 34px #00000059)}
.phone-screen{position:absolute;left:11.55%;top:5.99%;width:76.91%;height:auto;border-radius:11%/5.1%;display:block;background:#f3e6da}
.phone-bezel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ───────── ticker ───────── */
.ticker-wrap{position:relative;z-index:5;margin:calc(var(--gut)*-1) 0;padding:34px 0;overflow:hidden}
.ticker{display:flex;overflow:hidden;white-space:nowrap;background:var(--gloss);color:var(--white);transform:rotate(-1.4deg) scale(1.04);box-shadow:inset 0 2px 0 #ffffff47,inset 0 -3px 0 #65081740,0 14px 28px #d4082740}
.ticker-track{display:flex;flex:none;align-items:center}
.js:not(.calm) .ticker-track{animation:marq 70s linear infinite}
.ticker:hover .ticker-track,.ticker.paused .ticker-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.tk{display:inline-flex;align-items:center;gap:.7em;padding:.82em 1.1em;font-weight:800;font-size:clamp(1rem,1.4vw,1.3rem)}
.tk b{font-family:var(--display);font-weight:400;font-size:1.28em;letter-spacing:.005em}
.tk::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #ffd34d40;margin-left:.6em;flex:none}
.tk-pause{position:absolute;z-index:6;right:clamp(14px,2vw,30px);bottom:6px;display:inline-flex;align-items:center;gap:.4em;min-height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--white);color:var(--red);font:700 .78rem var(--ui);cursor:pointer;box-shadow:var(--sh)}
.tk-pause .i{width:1em;height:1em}
.calm .ticker-track[aria-hidden=true],.calm .tk-pause{display:none}
.calm .ticker{white-space:normal;transform:none}
.calm .ticker-track{flex-wrap:wrap;justify-content:center}

/* ───────── final + footer ───────── */
.foot{margin:var(--gut);border-radius:var(--rad);padding:48px 0 110px;color:#ffffffd9;background:var(--dot-lt),radial-gradient(900px 500px at 90% -10%,#a3132c,transparent 60%),var(--wine)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px 48px;align-items:start}
.foot-in>*{min-width:0}
.foot .brand{font-size:2.4rem;color:var(--white)}
.foot p{font-weight:650;font-size:.98rem;max-width:44ch;margin-top:12px;color:#ffffffd9}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-weight:800;font-size:.96rem;justify-content:flex-end}
.foot nav a{display:inline-flex;align-items:center;min-height:32px;text-decoration-thickness:2px;text-underline-offset:4px}
.foot nav a:hover{color:var(--gold)}
.foot .fine{grid-column:1/-1;border-top:1px solid #ffffff26;padding-top:18px;font:600 .8rem/1.6 var(--ui);color:#ffffffbf;max-width:none}

/* sticky mobile CTA */
.dock{display:none}
@media (max-width:760px){
  .dock{position:fixed;z-index:60;left:10px;right:10px;bottom:10px;display:flex;gap:8px;padding:8px;border:1px solid var(--line);border-radius:999px;background:#fff9f5eb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--sh-lg);transform:translateY(140%);visibility:hidden;transition:transform .25s,visibility 0s .25s}
  .dock.show{transform:none;visibility:visible;transition:transform .25s}
  .dock .btn{flex:1;min-height:46px;padding:0 10px;font-size:1.12rem}
  .dock .btn:hover,.dock .btn:active{transform:none}
}
.calm .dock{transition:none}

/* wide screens name every stop under its dot; the rider shrinks to leave room */
@media (min-width:1181px){
  .road{translate:0 -9px}
  .road a span{opacity:1;top:calc(50% + 16px);font-size:.92rem}
  .token{height:24px;min-width:28px;padding:0 8px;font-size:.76rem;line-height:24px}
}
@media (max-width:1180px){.road a span{display:none}.top-links{display:none}.menu{display:block}}
@media (max-width:760px){
  :root{--bar:58px}
  .brand{font-size:1.6rem}.brand img{width:28px;height:28px}
  .road{height:36px;margin-inline:2px 4px}
  .road a{min-height:36px}
  .road a::before{width:9px;height:9px;border-width:2px}
  .token{min-width:26px;max-width:6.2em;height:26px;padding:0 8px;font-size:.74rem;line-height:26px}
  /* the bottom dock carries Get Lik on phones; the bar keeps the progress line and the menu */
  .top .btn{display:none}
  .road li{visibility:hidden}
  .menu summary{width:40px;height:40px}
  .split{grid-template-columns:minmax(0,1fr);gap:30px}
  .foot-in{grid-template-columns:minmax(0,1fr)}
  .foot nav{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .float{animation:none}
}