/*
 * PicknDeli marketing page: "Acid Pop", second cut.
 *
 * Deliberately plain CSS in public/, not part of the Vite/Tailwind pipeline
 * that builds the Inertia app. The marketing page is the one thing a
 * non-engineer may want to nudge, and making a copy tweak wait on `npm run
 * build` is how a landing page goes stale. Nothing here shares a class name
 * with the app, so the two cannot collide.
 *
 * The brief for this cut was "more Gen Z, still premium", two asks that pull
 * against each other. What reconciles them: every section gets one loud idea,
 * and everything around it stays quiet.
 *   Loud:  the crossed tape under the hero, the stickers orbiting the phone,
 *          the runner's online switch, the receipt, the FAQ as a chat.
 *   Quiet: an ink stage at the top and the bottom, hairlines instead of white
 *          keylines, one italic serif word per headline, a little grain, and
 *          nothing leans except the small illustrated objects (the phone,
 *          its stickers, the ticket, the switch card).
 *
 * Palette (v3, unchanged): acid lemon #F2E51F, cobalt #3D6BFF, ink #0F110B,
 * cream. Its two contrast traps are handled by tokens rather than by care:
 * raw cobalt is 4.42:1 with white, so any cobalt that carries text is
 * --cobalt-deep (#2E56E8); lemon is 1.2:1 on cream, so it is never text on a
 * light ground. That is why the headline accent word is cobalt-deep on the
 * cream sections and lemon on ink.
 *
 * Type: Bricolage Grotesque for display, Instrument Serif italic for the
 * accent word (and every <em>), Geist to read, Geist Mono for labels/codes.
 *
 * Every colour is a token defined in all three theme states; nothing is
 * declared only inside a media query.
 */

:root{
  color-scheme:light;

  /* brand: the same in every theme */
  --lemon:#F2E51F;
  --lemon-deep:#C9BB00;    /* the pressed edge under a lemon button; a shape, never text */
  --on-lemon:#0F110B;
  --on-lemon-2:#3A3606;    /* 9.4:1 on lemon */
  --cobalt:#3D6BFF;        /* shapes only: pins, radar, focus rings */
  --cobalt-deep:#2E56E8;   /* any cobalt carrying text: 5.7:1 with --on-cobalt */
  --on-cobalt:#FFFDF2;
  --on-cobalt-2:#E4EAFF;
  --ink:#0F110B;
  --paper:#FFFDF2;

  /* the stage: hero, runners panel, footer. Ink in both themes, the page's spine */
  --stage:#0F110B;
  --stage-2:#191C14;
  --stage-3:#262A1F;
  --on-stage:#F4F2E4;
  --on-stage-2:#A9AB9A;    /* 8.1:1 on --stage */
  --stage-rule:rgba(244,242,228,.13);

  /* the page, light */
  --bg:#F6F4E6;
  --bg-2:#EEEBD8;
  --surface:#FFFEF6;
  --surface-2:#F1EEDC;
  --text:#0F110B;
  --text-2:#55574A;        /* 6.7:1 on --bg */
  --rule:#E3DFCA;
  --rule-2:#CFCAAF;
  --accent-word:#2E56E8;   /* 5.3:1 on --bg */
  --link:#2A50D6;
  --pin:#0F110B;
  --on-pin:#F2E51F;
  --chip-ink:#0F110B;
  --shadow:rgba(15,17,11,.16);
  --shadow-2:rgba(15,17,11,.07);
  --grain:var(--grain-dark);

  --grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .3 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.4 5.6 11.3 12 12-6.4.7-11.3 5.6-12 12-.7-6.4-5.6-11.3-12-12C6.4 11.3 11.3 6.4 12 0Z'/%3E%3C/svg%3E");
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm4.7 6.3a1 1 0 0 0-1.4 0l-4.8 4.8-1.8-1.8a1 1 0 1 0-1.4 1.4l2.5 2.5a1 1 0 0 0 1.4 0l5.5-5.5a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E");

  --font-display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-body:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-xl:36px;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --maxw:1200px;
  --gutter:22px;
  --nav-h:72px;            /* the floating pill plus the gap above it */
  --ease-out:cubic-bezier(.2,.9,.3,1);
  --ease-spring:cubic-bezier(.2,1.45,.4,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F110B;
    --bg-2:#151810;
    --surface:#171A12;
    --surface-2:#1F2318;
    --text:#F2F1E4;
    --text-2:#A7A999;
    --rule:#2A2E22;
    --rule-2:#3A3F2E;
    --accent-word:#F2E51F;
    --link:#8FA6FF;
    --pin:#262A1F;
    --on-pin:#F2E51F;
    --chip-ink:#262A1F;
    --shadow:rgba(0,0,0,.55);
    --shadow-2:rgba(0,0,0,.3);
    --grain:var(--grain-light);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F110B;
  --bg-2:#151810;
  --surface:#171A12;
  --surface-2:#1F2318;
  --text:#F2F1E4;
  --text-2:#A7A999;
  --rule:#2A2E22;
  --rule-2:#3A3F2E;
  --accent-word:#F2E51F;
  --link:#8FA6FF;
  --pin:#262A1F;
  --on-pin:#F2E51F;
  --chip-ink:#262A1F;
  --shadow:rgba(0,0,0,.55);
  --shadow-2:rgba(0,0,0,.3);
  --grain:var(--grain-light);
}

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

/* The canvas is ink so an overscroll at either end matches the hero above
   and the footer below, whatever the theme. */
html{background:var(--stage);scroll-padding-top:calc(var(--nav-h) + 16px);}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

body{
  margin:0;
  background-color:var(--bg);
  background-image:var(--grain);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--lemon);color:var(--ink);}

.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.025em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2.1rem,10.2vw,5.4rem);font-stretch:92%;letter-spacing:-.032em;line-height:.95;}
h2{font-size:clamp(2.2rem,5vw,3.8rem);font-stretch:94%;letter-spacing:-.028em;}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.1;}
p{margin:0;}
a{color:var(--link);}

/* Every italic on the page is the serif. In a headline it is the one accent
   word; in running text it is the word the sentence leans on. */
em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:1.1em;
  line-height:1;
  letter-spacing:0;
}
h1 em,h2 em{font-size:1.1em;letter-spacing:-.01em;padding-right:.04em;color:var(--accent-word);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-2);
}
.eyebrow::before{
  content:"";flex:none;width:12px;height:12px;
  background:var(--accent-word);
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;color:var(--text-2);max-width:60ch;}

:where(a,button,summary,input):focus-visible{
  outline:3px solid var(--cobalt);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:0 1.5rem;
  font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  border:0;border-radius:999px;
  text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .18s ease;
}
.btn .arr{display:inline-block;transition:transform .2s var(--ease-out);}
.btn:hover .arr{transform:translateX(4px);}
/* The lemon button sits on a darker lemon edge, so pressing it has somewhere to go. */
.btn--lemon{
  background:var(--lemon);color:var(--on-lemon);
  box-shadow:0 4px 0 var(--lemon-deep),0 14px 28px -12px rgba(242,229,31,.5);
}
.btn--lemon:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--lemon-deep),0 20px 34px -12px rgba(242,229,31,.6);}
.btn--lemon:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lemon-deep),0 8px 16px -10px rgba(242,229,31,.45);}
.btn--ghost{
  background:transparent;color:var(--on-stage);
  box-shadow:inset 0 0 0 1.5px rgba(244,242,228,.28);
}
.btn--ghost:hover{background:rgba(244,242,228,.07);box-shadow:inset 0 0 0 1.5px rgba(244,242,228,.5);}
.btn--sm{min-height:44px;padding:0 1.15rem;font-size:.92rem;box-shadow:0 3px 0 var(--lemon-deep);}
.btn--sm:hover{box-shadow:0 5px 0 var(--lemon-deep);}

/* ---------- nav: a floating pill ---------- */
/* Sticky, and pulled up over the hero by its own height so the ink stage
   runs behind it. Dark glass in both themes: it reads over ink and cream. */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  padding:12px 12px 0;
  margin-bottom:calc(var(--nav-h) * -1);
  pointer-events:none;
}
.nav-in{
  pointer-events:auto;
  max-width:calc(var(--maxw) - 20px);margin:0 auto;
  display:flex;align-items:center;gap:1rem;
  padding:8px 8px 8px 18px;
  border-radius:999px;
  background:rgba(15,17,11,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(244,242,228,.1),0 18px 40px -18px rgba(0,0,0,.55);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--on-stage);}
.brand svg{width:32px;height:32px;border-radius:9px;flex:none;}
.brand b{font-family:var(--font-display);font-weight:800;font-size:1.18rem;letter-spacing:-.04em;}
.nav-links{display:flex;gap:.2rem;margin-left:auto;}
.nav-links a{
  color:var(--on-stage-2);text-decoration:none;
  font-weight:500;font-size:.92rem;
  padding:.5rem .85rem;border-radius:999px;
  transition:color .15s ease,background-color .15s ease;
}
.nav-links a:hover{color:var(--on-stage);background:rgba(244,242,228,.08);}
@media (max-width:900px){.nav-links{display:none;}.nav .btn{margin-left:auto;}}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--stage);
  background-image:var(--grain-light);
  color:var(--on-stage);
  padding:calc(var(--nav-h) + clamp(2.4rem,6vw,4.6rem)) 0 calc(clamp(3rem,6vw,4.5rem) + 40px + 2.2vw);
}
.glow{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;aspect-ratio:1;}
.glow--cobalt{
  width:min(900px,120vw);left:-28%;bottom:-55%;
  background:radial-gradient(closest-side,rgba(61,107,255,.42),rgba(61,107,255,.1) 55%,rgba(61,107,255,0));
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(6%,-5%,0) scale(1.1);}}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);}}

.tagpill{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.5rem 1rem .5rem .85rem;border-radius:999px;
  background:rgba(244,242,228,.06);
  box-shadow:inset 0 0 0 1px var(--stage-rule);
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-stage);
}
.livedot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--lemon);}
.livedot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lemon);animation:beacon 2.2s var(--ease-out) infinite;}
@keyframes beacon{from{transform:scale(1);opacity:.75;}to{transform:scale(3.4);opacity:0;}}

.hero h1{margin-top:1.5rem;color:var(--on-stage);}
@media (min-width:981px){.hero h1{font-size:clamp(3.6rem,5.7vw,5.4rem);}}
.hero h1 em{color:var(--lemon);}
/* The first line is the promise, so it gets the underline, drawn once. */
.hero h1 .l1{position:relative;display:inline-block;white-space:nowrap;}
.scribble{position:absolute;left:-1%;top:84%;width:102%;height:auto;overflow:visible;pointer-events:none;}
.scribble path{
  fill:none;stroke:var(--lemon);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:scrawl 1.1s .5s var(--ease-out) forwards;
}
@keyframes scrawl{to{stroke-dashoffset:0;}}

.hero .lead{margin-top:1.6rem;color:var(--on-stage-2);max-width:52ch;}
.hero .lead em{color:var(--on-stage);}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem;}
.paylist{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;}
.paylist .lbl{
  margin-right:.4rem;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-stage-2);
}
.paylist .m{
  font-size:.8rem;font-weight:500;color:var(--on-stage);
  background:rgba(244,242,228,.06);box-shadow:inset 0 0 0 1px var(--stage-rule);
  border-radius:999px;padding:.28rem .72rem;
}

/* ---------- the phone, and what orbits it ---------- */
.phone-hold{position:relative;display:flex;justify-content:center;padding:1.75rem 0 1.25rem;}
/* the lemon light the phone stands in */
.phone-hold::before{
  content:"";position:absolute;left:50%;top:50%;z-index:0;
  width:min(680px,150%);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(242,229,31,.3),rgba(242,229,31,.07) 58%,rgba(242,229,31,0));
  pointer-events:none;
}

.phone{
  position:relative;z-index:2;
  width:100%;max-width:318px;
  padding:9px;border-radius:52px;
  background:linear-gradient(150deg,#454B39 0%,#0B0C08 18%,#0B0C08 80%,#33382A 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 3px #050604,
    0 60px 90px -36px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.6);
  transform:rotate(2deg);
}
.screen{
  position:relative;
  background:var(--bg);
  color:var(--text);
  border-radius:43px;
  overflow:hidden;
  display:flex;flex-direction:column;
  height:600px;
}
.notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:90px;height:26px;border-radius:999px;background:#050604;z-index:6;
}

.spin-badge{
  position:absolute;z-index:4;
  right:max(-4px,calc(50% - 250px));top:-10px;
  width:122px;height:122px;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.45));
}
.spin-badge svg{display:block;width:100%;height:100%;overflow:visible;}
.spin-badge .disc{fill:var(--lemon);}
.spin-badge text{font-family:var(--font-mono);font-size:10.4px;font-weight:600;letter-spacing:.04em;fill:var(--on-lemon);}
.spin-badge .ring{transform-origin:60px 60px;animation:spin 26s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.float{
  position:absolute;z-index:5;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem 1rem .5rem .5rem;border-radius:999px;
  font-size:.88rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 20px 36px -14px rgba(0,0,0,.65);
  animation:bob 5s ease-in-out infinite alternate;
}
.float .e{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:15px;line-height:1;flex:none;}
.float--a{left:max(-2px,calc(50% - 262px));top:19%;rotate:-5deg;background:var(--paper);color:var(--ink);}
.float--a .e{background:var(--lemon);}
.float--b{right:max(-2px,calc(50% - 250px));bottom:-.9rem;rotate:4deg;background:var(--cobalt-deep);color:var(--on-cobalt);animation-delay:-2.5s;}
.float--b .e{background:rgba(255,253,242,.18);}
@keyframes bob{from{translate:0 0;}to{translate:0 -12px;}}

@media (max-width:980px){
  .spin-badge{width:100px;height:100px;right:max(-4px,calc(50% - 232px));}
}
@media (max-width:520px){
  .tagpill{font-size:.64rem;letter-spacing:.07em;gap:.55rem;padding:.45rem .85rem .45rem .7rem;}
  .phone{max-width:296px;}
  .screen{height:560px;}
  .spin-badge{width:88px;height:88px;top:.4rem;right:-6px;}
  .float{font-size:.8rem;padding:.4rem .8rem .4rem .4rem;}
  .float .e{width:26px;height:26px;font-size:13px;}
  .float--a{left:-4px;}
  .float--b{right:-4px;}
}

/* map */
.map{position:relative;height:236px;background:var(--bg-2);flex:none;}
.map svg{position:absolute;inset:0;width:100%;height:100%;}
.route{
  fill:none;stroke:var(--text);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1 999;opacity:0;
}
.stage.routing .route{animation:draw 1.5s .1s ease forwards;}
@keyframes draw{from{stroke-dasharray:0 420;opacity:1;}to{stroke-dasharray:420 0;opacity:1;}}

.radar{
  position:absolute;left:50%;top:66%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:var(--cobalt);opacity:0;
}
.stage.searching .radar{opacity:1;}
.radar::after,.radar::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid var(--cobalt);
}
.stage.searching .radar::before{animation:ping 2.4s linear infinite;}
.stage.searching .radar::after{animation:ping 2.4s 1.2s linear infinite;}
@keyframes ping{from{transform:scale(1);opacity:.7;}to{transform:scale(4.2);opacity:0;}}
.radar i{position:absolute;inset:14px;border-radius:50%;background:var(--on-cobalt);}

.puck{
  position:absolute;left:11%;top:83%;width:28px;height:28px;margin:-14px 0 0 -14px;
  border-radius:50%;background:var(--lemon);border:3px solid var(--ink);
  opacity:0;display:grid;place-items:center;
  font-size:12px;line-height:1;
}
.stage.routing .puck{animation:drive 5.6s .9s ease-in-out forwards;}
@keyframes drive{
  0%{opacity:1;left:11%;top:83%;}
  35%{left:27%;top:74%;}
  62%{left:49%;top:53%;}
  100%{opacity:1;left:87%;top:22%;}
}
.mapchip{
  position:absolute;left:12px;bottom:12px;z-index:4;
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--surface);border-radius:999px;
  padding:.3rem .75rem .3rem .6rem;
  font-size:.7rem;font-weight:600;color:var(--text);
  box-shadow:0 8px 18px -8px var(--shadow),0 0 0 1px var(--rule);
}
.mapchip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cobalt);}

/* price bar */
.pricebar{
  display:flex;align-items:center;gap:.7rem;
  padding:.85rem .95rem;background:var(--surface);border-bottom:1px solid var(--rule);
}
.pricebar .lbl{font-family:var(--font-mono);font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-2);}
.pricebar .amt{
  font-family:var(--font-display);font-weight:800;font-size:1.7rem;
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.stepper{margin-left:auto;display:flex;gap:.4rem;}
.stepper b{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--lemon);color:var(--on-lemon);font-size:1rem;font-weight:700;
}
.bump{animation:bump .5s ease;}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.22);}100%{transform:scale(1);}}

/* offers */
.feed{flex:1;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;}
.feedhead{font-family:var(--font-mono);font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-2);padding:0 .2rem;}
.offer{
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface);border-radius:16px;
  padding:.55rem .65rem;
  box-shadow:0 0 0 1px var(--rule),0 10px 18px -14px var(--shadow);
  opacity:0;transform:translateX(-26px) rotate(-2deg);
  transition:opacity .38s ease,transform .38s var(--ease-spring),background-color .3s ease,box-shadow .3s ease;
}
.offer.in{opacity:1;transform:translateX(0) rotate(0);}
.offer.out{opacity:0;transform:translateX(-30px) scale(.94);}
.offer.picked{background:var(--lemon);box-shadow:0 0 0 1px var(--lemon-deep),0 14px 24px -12px rgba(201,187,0,.8);transform:translateX(0) rotate(.8deg) scale(1.03);}
.offer.picked .oname,.offer.picked .ometa,.offer.picked .oprice{color:var(--on-lemon);}
.av{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--cobalt-deep);color:var(--on-cobalt);
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
}
.offer.picked .av{background:var(--ink);color:var(--lemon);}
.oname{font-weight:700;font-size:.84rem;line-height:1.2;letter-spacing:-.01em;}
.ometa{font-size:.66rem;color:var(--text-2);font-weight:500;line-height:1.3;}
.oprice{
  margin-left:auto;text-align:right;
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.enroute{
  margin-top:auto;display:flex;align-items:center;gap:.6rem;
  background:var(--chip-ink);color:var(--on-stage);border-radius:18px;padding:.65rem .75rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s ease;
}
.stage.routing .enroute{opacity:1;transform:translateY(0);}
.enroute .av{background:var(--lemon);color:var(--on-lemon);}
.enroute .oname{color:var(--on-stage);}
.enroute .ometa{color:var(--on-stage-2);}
.enroute .oprice{color:var(--lemon);}

/* ---------- the fact band ---------- */
.stats{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(3rem,6vw,4.8rem);
  border-top:1px solid var(--stage-rule);
}
.stat{padding:1.6rem 1.5rem 0 0;}
.stat + .stat{padding-left:1.5rem;border-left:1px solid var(--stage-rule);}
.stat .n{
  font-family:var(--font-display);font-weight:800;font-stretch:92%;
  font-size:clamp(2.5rem,4.6vw,3.6rem);letter-spacing:-.035em;line-height:1;
  color:var(--on-stage);font-variant-numeric:tabular-nums;
}
.stat .n small{font-size:.38em;font-weight:700;font-stretch:100%;letter-spacing:-.01em;color:var(--lemon);margin-left:.18em;}
.stat p{margin-top:.75rem;font-size:.9rem;color:var(--on-stage-2);line-height:1.5;max-width:28ch;}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat{padding:1.3rem 1rem 1.3rem 0;}
  .stat:nth-child(2n){padding-left:1rem;border-left:1px solid var(--stage-rule);}
  .stat:nth-child(2n+1){padding-left:0;border-left:0;}
  .stat:nth-child(n+3){border-top:1px solid var(--stage-rule);}
  .stat p{font-size:.84rem;}
}

/* ---------- the crossed tape ---------- */
/* Pulled up so the crossing sits exactly on the seam between the ink hero and
   the cream page. The box is sized for the tilt at any width: a band leaning
   2.2deg across 110vw rises about 4.2vw from one end to the other. */
.tapes{
  position:relative;z-index:5;
  height:calc(80px + 4.4vw);
  margin-top:calc(-40px - 2.2vw);
  overflow:hidden;
}
.tape{
  position:absolute;left:-5%;top:50%;width:110%;height:58px;
  display:flex;align-items:center;overflow:hidden;
}
.tape--lemon{z-index:2;background:var(--lemon);color:var(--on-lemon);transform:translateY(-50%) rotate(-2.2deg);box-shadow:0 16px 30px -16px rgba(15,17,11,.55);}
.tape--cobalt{z-index:1;background:var(--cobalt-deep);color:var(--on-cobalt);transform:translateY(-50%) rotate(2deg);}
.tape-run{display:flex;flex:none;align-items:center;animation:tape 70s linear infinite;}
.tape--cobalt .tape-run{animation-duration:80s;animation-direction:reverse;}
.tapes:hover .tape-run{animation-play-state:paused;}
.tape-run span{
  flex:none;padding:0 1.15rem;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;font-stretch:84%;
  font-size:1.35rem;letter-spacing:.01em;text-transform:uppercase;
}
.tape-run svg{flex:none;width:16px;height:16px;}
@keyframes tape{to{transform:translateX(-50%);}}

/* ---------- generic section ---------- */
.sec{position:relative;padding:clamp(3.5rem,6.5vw,5.5rem) 0;}
.sec-head{max-width:780px;margin-bottom:clamp(2.2rem,4.5vw,3.5rem);}
.sec-head h2{margin-top:1.1rem;}
.sec-head .lead{margin-top:1.2rem;}

/* ---------- kinds ---------- */
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
@media (max-width:900px){.kinds{grid-template-columns:minmax(0,1fr);}}
.kind{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-lg);
  padding:1.6rem 1.55rem 1.5rem;
  box-shadow:0 0 0 1px var(--rule),0 1px 2px var(--shadow-2);
  transition:transform .4s var(--ease-spring),box-shadow .4s ease;
}
.kind:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 0 0 1px var(--rule-2),0 28px 44px -22px var(--shadow);}
.kind .ic{
  width:62px;height:62px;border-radius:20px;display:grid;place-items:center;
  font-size:34px;line-height:1;background:var(--surface-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.08),0 12px 22px -12px var(--shadow);
}
.kind--person .ic{background:linear-gradient(160deg,#5B82FF,var(--cobalt-deep));}
.kind--food .ic{background:linear-gradient(160deg,#FFF475,var(--lemon));}
.kind--package .ic{background:linear-gradient(160deg,#343A2A,var(--ink));}
.kind h3{margin-top:1.4rem;font-size:1.75rem;}
.kind .kind-tag{margin-top:.2rem;font-family:var(--font-serif);font-style:italic;font-size:1.25rem;line-height:1.2;color:var(--accent-word);}
.kind .kind-desc{margin-top:.85rem;font-size:.95rem;color:var(--text-2);}
.kind .ex{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.15rem 0 1.3rem;}
.kind .ex span{
  font-size:.8rem;font-weight:500;color:var(--text);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--rule);
  border-radius:999px;padding:.3rem .75rem;
}
.kind .note{
  margin-top:auto;padding-top:1.05rem;border-top:1px dashed var(--rule-2);
  font-size:.9rem;font-weight:500;line-height:1.5;color:var(--text);
}

/* ---------- express / scheduled ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
@media (max-width:900px){.duo{grid-template-columns:minmax(0,1fr);}}
.mode{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(1.8rem,3.6vw,2.7rem);
}
.mode::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
.mode--x{background:var(--lemon);color:var(--on-lemon);}
/* speed lines for the one in a hurry, a calendar's dot grid for the one that isn't */
.mode--x::before{
  background:repeating-linear-gradient(118deg,rgba(15,17,11,.075) 0 2px,transparent 2px 20px);
  -webkit-mask:linear-gradient(to left,#000 10%,transparent 70%);
  mask:linear-gradient(to left,#000 10%,transparent 70%);
}
.mode--s{background:var(--cobalt-deep);color:var(--on-cobalt);}
.mode--s::before{
  background:radial-gradient(rgba(255,253,242,.22) 1.4px,transparent 1.6px) 0 0/20px 20px;
  -webkit-mask:linear-gradient(to left,#000 10%,transparent 70%);
  mask:linear-gradient(to left,#000 10%,transparent 70%);
}
.mode-ic{
  position:absolute;top:clamp(1.4rem,3vw,2rem);right:clamp(1.4rem,3vw,2rem);
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;line-height:1;rotate:10deg;
  box-shadow:0 14px 24px -12px rgba(15,17,11,.45);
}
.mode--x .mode-ic{background:var(--ink);}
.mode--s .mode-ic{background:var(--paper);}
.mode h3{font-size:clamp(2.4rem,4.4vw,3.3rem);letter-spacing:-.03em;font-stretch:92%;}
.mode .sub{margin-top:.2rem;font-family:var(--font-serif);font-style:italic;font-size:1.55rem;line-height:1.1;}
.mode--x .sub{color:var(--on-lemon-2);}
.mode--s .sub{color:var(--on-cobalt-2);}
.mode p{margin-top:1.2rem;font-size:1rem;line-height:1.6;max-width:54ch;}
.mode--x p{color:#2C2A08;}
.mode--s p{color:var(--on-cobalt-2);}
.mode ul{list-style:none;margin:1.5rem 0 0;padding:1.3rem 0 0;display:grid;gap:.7rem;}
.mode--x ul{border-top:1px solid rgba(15,17,11,.16);}
.mode--s ul{border-top:1px solid rgba(255,253,242,.22);}
.mode li{display:flex;gap:.7rem;font-size:.96rem;font-weight:600;line-height:1.45;}
.mode li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:.12rem;
  -webkit-mask:var(--tick) center/contain no-repeat;
  mask:var(--tick) center/contain no-repeat;
}
.mode--x li::before{background:var(--ink);}
.mode--s li::before{background:var(--lemon);}
.anchors{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem;}
.anchors b{
  font-size:.8rem;font-weight:600;padding:.34rem .85rem;border-radius:999px;
  background:rgba(255,253,242,.14);color:var(--on-cobalt);
  box-shadow:inset 0 0 0 1px rgba(255,253,242,.3);
}

/* ---------- steps: five stops on one route ---------- */
.steps{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem;
}
/* the road the pins sit on, in the P's own lane dashes */
.steps::before{
  content:"";position:absolute;left:23px;right:12%;top:21px;height:4px;border-radius:2px;
  background:repeating-linear-gradient(to right,var(--rule-2) 0 16px,transparent 16px 28px);
}
.step{position:relative;}
.step .pin{
  position:relative;z-index:1;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--pin);color:var(--on-pin);
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  box-shadow:0 0 0 7px var(--bg);
}
.step:last-child .pin{background:var(--lemon);color:var(--on-lemon);box-shadow:0 0 0 7px var(--bg),inset 0 0 0 2.5px var(--ink);}
.step h3{margin-top:1.35rem;font-size:1.3rem;}
.step p{margin-top:.55rem;font-size:.95rem;color:var(--text-2);line-height:1.55;}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr);gap:0;}
  .steps::before{left:21px;right:auto;top:24px;bottom:40px;width:4px;height:auto;background:repeating-linear-gradient(to bottom,var(--rule-2) 0 16px,transparent 16px 28px);}
  .step{display:grid;grid-template-columns:46px 1fr;column-gap:1.25rem;padding-bottom:2rem;}
  .step .pin{grid-row:span 2;}
  .step h3{margin-top:.7rem;}
  .step:last-child{padding-bottom:0;}
}

/* ---------- tracking ---------- */
.track{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(2.5rem,6vw,5rem);align-items:center;}
@media (max-width:900px){.track{grid-template-columns:minmax(0,1fr);}}
.track h2{margin-top:1.1rem;}
.tlist{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.4rem;}
.tlist li{display:grid;grid-template-columns:46px 1fr;gap:1.05rem;align-items:start;}
.tlist .dot{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  font-size:20px;line-height:1;background:var(--surface);
  box-shadow:0 0 0 1px var(--rule),0 10px 18px -12px var(--shadow);
}
.tlist b{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--text);}
.tlist p{margin-top:.2rem;font-size:.95rem;color:var(--text-2);line-height:1.55;}

.ticket{
  position:relative;justify-self:center;width:100%;max-width:440px;
  background:var(--surface);border-radius:var(--r-xl);
  padding:1.7rem;
  box-shadow:0 0 0 1px var(--rule),0 40px 70px -40px var(--shadow);
  rotate:-1.5deg;
}
.ticket .top{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.ticket .who{font-family:var(--font-mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--text-2);}
.ticket h3{font-size:1.7rem;margin-top:.3rem;}
.ticket .top svg{width:46px;height:46px;border-radius:13px;flex:none;}
/* the perforation, with a bite out of each edge */
.ticket .perf{position:relative;height:0;border-top:2px dashed var(--rule-2);margin:1.5rem -1.7rem;}
.ticket .perf::before,.ticket .perf::after{content:"";position:absolute;top:-14px;width:26px;height:26px;border-radius:50%;background-color:var(--bg);background-image:var(--grain);}
.ticket .perf::before{left:-13px;}
.ticket .perf::after{right:-13px;}
.code{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.code b{
  display:grid;place-items:center;height:78px;border-radius:18px;
  background:var(--lemon);color:var(--on-lemon);
  font-family:var(--font-mono);font-size:2.3rem;font-weight:600;line-height:1;
  box-shadow:inset 0 -4px 0 rgba(15,17,11,.12);
}
.sms{margin-top:1.4rem;}
.sms-meta{
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--text-2);
}
.sms-bubble{
  margin-top:.55rem;max-width:92%;
  background:var(--surface-2);color:var(--text);
  border-radius:20px 20px 20px 6px;padding:.8rem 1rem;
  font-size:.92rem;line-height:1.5;
}

/* ---------- runners panel ---------- */
.runners{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--stage-2);
  background-image:var(--grain-light);
  color:var(--on-stage);
  border-radius:var(--r-xl);
  padding:clamp(1.3rem,5vw,3.8rem);
  box-shadow:0 0 0 1px var(--stage-rule),0 50px 90px -50px rgba(15,17,11,.6);
}
.runners::before{
  content:"";position:absolute;z-index:-1;right:-18%;top:-40%;
  width:min(760px,110%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,229,31,.2),rgba(242,229,31,0));
  pointer-events:none;
}
.rgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media (max-width:900px){.rgrid{grid-template-columns:minmax(0,1fr);}}
.runners h2{color:var(--on-stage);}
.runners h2 em{color:var(--lemon);}
.runners .eyebrow{color:var(--on-stage-2);}
.runners .eyebrow::before{background:var(--lemon);}
.runners .lead{margin-top:1.2rem;color:var(--on-stage-2);}
.runners h2{margin-top:1.1rem;}
.vehicles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;}
.vehicles b{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(244,242,228,.06);box-shadow:inset 0 0 0 1px var(--stage-rule);
  border-radius:999px;padding:.45rem .95rem;
  font-size:.88rem;font-weight:500;color:var(--on-stage);
}
.runners .btn{margin-top:2rem;}

/* The switch a runner flips to go online. It flips itself when it scrolls
   into view (the .seen that every .rise gets), then the jobs land. */
.online{
  justify-self:center;width:100%;max-width:390px;
  background:var(--stage);border-radius:var(--r-lg);padding:clamp(1rem,4vw,1.35rem);
  box-shadow:0 0 0 1px var(--stage-rule),0 34px 60px -30px rgba(0,0,0,.7);
  rotate:1.5deg;
}
.online-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;}
.online-lbl{font-family:var(--font-mono);font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--on-stage-2);}
.online-state{display:grid;height:1.9rem;margin-top:.3rem;overflow:hidden;font-family:var(--font-display);font-weight:800;font-size:1.55rem;letter-spacing:-.025em;line-height:1.9rem;}
.online-state span{grid-area:1/1;white-space:nowrap;transition:transform .5s .7s var(--ease-spring),opacity .3s .7s ease;}
.online-state .st-on{color:var(--lemon);transform:translateY(100%);opacity:0;}
.online.seen .st-off{transform:translateY(-100%);opacity:0;}
.online.seen .st-on{transform:none;opacity:1;}
.switch{
  position:relative;flex:none;width:78px;height:46px;border-radius:999px;
  background:var(--stage-3);box-shadow:inset 0 0 0 1px var(--stage-rule);
  transition:background-color .35s .6s ease;
}
.switch i{
  position:absolute;top:5px;left:5px;width:36px;height:36px;border-radius:50%;
  background:var(--on-stage);box-shadow:0 4px 10px rgba(0,0,0,.45);
  transition:transform .5s .6s var(--ease-spring);
}
.online.seen .switch{background:var(--lemon);}
.online.seen .switch i{transform:translateX(32px);}
.online-radius{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--stage-rule);font-size:.86rem;color:var(--on-stage-2);}
.pings{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem;}
.pings li{
  display:flex;align-items:center;gap:.7rem;
  background:var(--stage-2);border-radius:16px;padding:.55rem .75rem .55rem .55rem;
  box-shadow:inset 0 0 0 1px var(--stage-rule);
  font-size:.9rem;font-weight:500;color:var(--on-stage);
  opacity:0;transform:translateY(12px) scale(.96);
  transition:opacity .4s ease,transform .55s var(--ease-spring);
}
.pings li span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--stage-3);font-size:16px;line-height:1;flex:none;}
.pings li::after{content:"New";margin-left:auto;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lemon);}
.online.seen .pings li{opacity:1;transform:none;}
.online.seen .pings li:nth-child(1){transition-delay:1.3s;}
.online.seen .pings li:nth-child(2){transition-delay:1.65s;}
.online.seen .pings li:nth-child(3){transition-delay:2s;}

.rpoints{
  list-style:none;margin:clamp(2.4rem,5vw,3.4rem) 0 0;padding:clamp(1.8rem,3vw,2.2rem) 0 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;
  border-top:1px solid var(--stage-rule);
}
@media (max-width:1000px){.rpoints{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.rpoints{grid-template-columns:minmax(0,1fr);}}
.rpoints li::before{content:"";display:block;width:30px;height:4px;border-radius:2px;background:var(--lemon);margin-bottom:1rem;}
.rpoints b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--on-stage);}
.rpoints span{display:block;margin-top:.45rem;font-size:.9rem;color:var(--on-stage-2);line-height:1.55;}

/* ---------- trust: the receipt ---------- */
.trust-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem);align-items:start;}
@media (max-width:900px){.trust-grid{grid-template-columns:minmax(0,1fr);}}
.trust-grid .sec-head{position:sticky;top:calc(var(--nav-h) + 2rem);}
@media (max-width:900px){.trust-grid .sec-head{position:static;}}
/* The paper's torn edge is a mask, so the shadow has to come from a filter on
   the parent, which draws around the teeth instead of the box. */
.receipt-hold{filter:drop-shadow(0 26px 30px var(--shadow)) drop-shadow(0 2px 3px var(--shadow-2));}
.receipt{
  position:relative;
  background:var(--surface);
  padding:1.8rem clamp(1.3rem,3vw,2rem) 2.8rem;
  border-radius:8px 8px 0 0;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/22px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/22px 100%;
}
.receipt-head{
  display:flex;align-items:center;gap:.7rem;
  padding-bottom:1.2rem;border-bottom:2px dashed var(--rule-2);
}
.receipt-head svg{width:34px;height:34px;border-radius:10px;flex:none;}
.receipt-head b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;}
.receipt-head span{margin-left:auto;font-family:var(--font-mono);font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-2);}
.receipt ol{list-style:none;margin:0;padding:0;}
.receipt li{
  display:grid;grid-template-columns:40px 1fr;gap:1rem;align-items:start;
  padding:1.15rem 0;border-bottom:1px dashed var(--rule-2);
}
.receipt li .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);font-size:19px;line-height:1;}
.receipt li b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;}
.receipt li p{margin-top:.25rem;font-size:.92rem;color:var(--text-2);line-height:1.55;}
.receipt-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.3rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-2);
}
.barcode{
  flex:none;width:132px;height:34px;
  background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 5px,var(--text) 5px 9px,transparent 9px 11px,var(--text) 11px 12px,transparent 12px 16px,var(--text) 16px 19px,transparent 19px 21px);
  opacity:.85;
}
.stamp{
  position:absolute;right:clamp(1rem,4vw,2.2rem);bottom:4.4rem;
  padding:.35rem .9rem;border:3px solid var(--accent-word);border-radius:12px;
  font-family:var(--font-mono);font-weight:600;font-size:1.15rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-word);
  rotate:-11deg;opacity:.9;
}
.receipt.seen .stamp{animation:stamp .55s .5s var(--ease-spring) both;}
@keyframes stamp{from{transform:scale(1.8);opacity:0;}to{transform:none;opacity:.9;}}

/* ---------- faq: a chat ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start;}
@media (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr);}}
.faq-grid .sec-head{position:sticky;top:calc(var(--nav-h) + 2rem);}
@media (max-width:900px){.faq-grid .sec-head{position:static;}}
.faq-hint{margin-top:1.2rem;font-size:.95rem;color:var(--text-2);}
.chat{
  display:flex;flex-direction:column;gap:1rem;
  background:var(--surface);border-radius:var(--r-xl);
  padding:1.1rem clamp(1rem,3vw,1.7rem) 1.7rem;
  box-shadow:0 0 0 1px var(--rule),0 40px 70px -46px var(--shadow);
}
.chat-head{display:flex;align-items:center;gap:.75rem;padding-bottom:1rem;margin-bottom:.3rem;border-bottom:1px solid var(--rule);}
.chat-head svg{width:38px;height:38px;border-radius:12px;flex:none;}
.chat-head b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;line-height:1.15;}
.chat-head span{display:block;font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);}
/* The question is the bubble you sent; opening it gets you the reply. */
details.q summary{
  display:flex;align-items:center;gap:.8rem;list-style:none;cursor:pointer;
  width:fit-content;max-width:88%;margin-left:auto;
  background:var(--cobalt-deep);color:var(--on-cobalt);
  border-radius:24px 24px 6px 24px;
  padding:.85rem 1.1rem .85rem 1.2rem;
  font-weight:500;font-size:1rem;line-height:1.4;
  box-shadow:0 14px 26px -16px rgba(46,86,232,.8);
  transition:transform .2s var(--ease-out),box-shadow .2s ease;
}
details.q summary::-webkit-details-marker{display:none;}
details.q summary::marker{content:"";}
details.q summary:hover{transform:translateY(-2px);box-shadow:0 18px 30px -16px rgba(46,86,232,.9);}
details.q summary::after{
  content:"+";flex:none;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,253,242,.2);
  font-size:1rem;font-weight:500;line-height:1;
  transition:transform .25s var(--ease-out);
}
details.q[open] summary::after{transform:rotate(45deg);}
.q .a{display:flex;align-items:flex-end;gap:.65rem;margin-top:.75rem;max-width:94%;}
.q .a svg{flex:none;width:32px;height:32px;border-radius:10px;}
.q .a p{
  background:var(--surface-2);color:var(--text);
  border-radius:24px 24px 24px 6px;padding:.95rem 1.15rem;
  font-size:.98rem;line-height:1.6;
}
details.q[open] .a{animation:reply .45s var(--ease-spring);}
@keyframes reply{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}

/* ---------- cta ---------- */
.getit{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--lemon);
  background-image:var(--grain-dark);
  color:var(--on-lemon);
  border-radius:var(--r-xl);
  padding:clamp(3rem,7vw,5.5rem) clamp(1.4rem,5vw,4rem);
  text-align:center;
}
/* the P, peeking in from the corner like a sticker half off the sheet */
.getit .peek{
  position:absolute;z-index:-1;right:-70px;bottom:-90px;
  width:clamp(220px,30vw,340px);height:auto;aspect-ratio:1;
  rotate:-14deg;opacity:.14;
}
.getit h2{font-size:clamp(2.5rem,6.4vw,5rem);color:var(--on-lemon);}
.getit h2 em{color:var(--on-lemon);}
.getit p{margin:1.2rem auto 0;max-width:46ch;color:var(--on-lemon-2);font-size:1.1rem;font-weight:500;}
.stores{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.2rem;}
.store{
  display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;
  min-height:62px;padding:.7rem 1.35rem .7rem 1.05rem;border-radius:18px;
  background:var(--ink);color:var(--on-stage);text-align:left;
  box-shadow:0 4px 0 #000,0 18px 30px -16px rgba(15,17,11,.7);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.store:hover{transform:translateY(-2px);box-shadow:0 6px 0 #000,0 24px 34px -16px rgba(15,17,11,.7);}
.store .glyph{width:24px;height:24px;flex:none;fill:var(--lemon);}
.store small{display:block;font-family:var(--font-mono);font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-stage-2);}
.store b{display:block;margin-top:.1rem;font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:-.025em;line-height:1.1;}
/* An unset store URL renders as a chip, not a button: dashed, flat, no hover, no pointer. */
.store--soon{background:transparent;color:var(--on-lemon);border:2px dashed rgba(15,17,11,.45);box-shadow:none;cursor:default;}
.store--soon:hover{transform:none;box-shadow:none;}
.store--soon .glyph{fill:var(--on-lemon);}
.store--soon small{color:var(--on-lemon-2);}

/* ---------- footer ---------- */
.foot{
  position:relative;overflow:hidden;
  background-color:var(--stage);
  background-image:var(--grain-light);
  color:var(--on-stage);
  border-top:1px solid var(--stage-rule);
  padding:clamp(3rem,6vw,4.5rem) 0 0;
}
.foot-in{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;}
.foot-links{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin-left:auto;}
.foot-links a{color:var(--on-stage-2);text-decoration:none;font-size:.9rem;font-weight:500;}
.foot-links a:hover{color:var(--on-stage);}
.foot .copy{width:100%;font-size:.84rem;color:var(--on-stage-2);}
.foot .made{margin-top:-.9rem;}
/* The name once more, too big to fit, cut off by the bottom of the page. */
.foot-mega{
  margin:clamp(2rem,5vw,3.5rem) 0 -.13em;
  font-family:var(--font-display);font-weight:800;font-stretch:88%;
  font-size:clamp(4.5rem,27vw,30rem);line-height:.8;letter-spacing:-.05em;
  color:var(--lemon);text-align:center;white-space:nowrap;
  -webkit-user-select:none;user-select:none;
}

/* ---------- scroll reveal ---------- */
/* Only hidden when script is running to reveal it (home.blade.php stamps .js
   on <html> before first paint); with scripts off or failed, it all shows. */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s var(--ease-out);}
.js .rise.seen{opacity:1;transform:none;}

/* Anything that loops pauses once it is off screen (marketing.js sets .idle). */
.idle,.idle *{animation-play-state:paused !important;}

@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none;}
  .glow,.livedot::after,.spin-badge .ring,.float,.tape-run{animation:none;}
  .scribble path{animation:none;stroke-dashoffset:0;}
  .stage.searching .radar::before,.stage.searching .radar::after,
  .stage.routing .puck,.stage.routing .route{animation:none;}
  .stage.routing .route{stroke-dasharray:420 0;opacity:1;}
  .offer,.btn,.kind,.store,details.q summary{transition:none;}
  details.q[open] .a,.receipt.seen .stamp{animation:none;}
  .online-state span,.switch,.switch i,.pings li{transition:none;}
  .online .st-off{opacity:0;}
  .online .st-on{transform:none;opacity:1;}
  .online .switch{background:var(--lemon);}
  .online .switch i{transform:translateX(32px);}
  .pings li{opacity:1;transform:none;}
}