/* ============================================================
   SKEDADDLE — landing page
   Ported from BasicLandingPage/index.html. Design language inherited
   from the splash: vibrant pastel "stickers" on warm cream, fat ink
   outlines, hard offset shadows (no blur), bouncy overshoot motion.

   Scoping: the palette + page chrome live on the .skedaddle-landing
   wrapper (never :root), and every bare element / ::selection / reveal
   rule is scoped under it, so none of this leaks into the app. The
   intro splash is NOT here — LandingPage reuses <SplashScreen> (its
   styles live in splash.css).
   ============================================================ */

.skedaddle-landing{
  /* palette */
  --cream:    #F5F0E4;
  --paper:    #FFFDF6;
  --ink:      #33291F;
  --ink-soft: #6B5D4D;
  --coral:    #E8714A;
  --peach:    #FFC09A;
  --butter:   #FFD668;
  --mint:     #6FD9AC;
  --sky:      #7FC4F2;
  --lavender: #B49DF2;
  --lav-soft: #CDBCF7;
  --blush:    #F799C1;

  --shadow:   6px 7px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);

  position:relative;
  min-height:100vh;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:500;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.skedaddle-landing *{ margin:0; padding:0; box-sizing:border-box; }
.skedaddle-landing ::selection{ background:var(--butter); color:var(--ink); }
.skedaddle-landing a{ color:inherit; }
.skedaddle-landing section{ scroll-margin-top:84px; }

/* ---------- shared atoms ---------- */
.skedaddle-landing .eyebrow{
  display:inline-block;
  font-family:'Geist', sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:lowercase;
  color:var(--ink-soft);
}

/* a "sticker" word: ink stroke + hard drop */
.skedaddle-landing .pop{
  color:var(--coral);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:.045em .06em 0 var(--ink);
  display:inline-block;
  transform:skewX(-4deg) rotate(-1.5deg);
}

.skedaddle-landing .btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Inter', sans-serif; font-weight:700; font-size:1rem;
  padding:.85em 1.45em;
  border:3px solid var(--ink); border-radius:999px;
  background:var(--coral); color:var(--paper);
  box-shadow:var(--shadow);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .15s cubic-bezier(.2,1.5,.4,1), box-shadow .15s ease;
}
.skedaddle-landing .btn .arrow{ transition:transform .18s cubic-bezier(.2,1.6,.4,1); }
.skedaddle-landing .btn:hover{ transform:translate(-2px,-2px); box-shadow:9px 11px 0 var(--ink); }
.skedaddle-landing .btn:hover .arrow{ transform:translateX(5px); }
.skedaddle-landing .btn:active{ transform:translate(2px,3px); box-shadow:3px 3px 0 var(--ink); }
.skedaddle-landing .btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.skedaddle-landing .btn.alt{ background:var(--paper); color:var(--ink); }

/* ============================================================
   AMBIENT BACKGROUND (always present, behind the page)
   ============================================================ */
.skedaddle-landing .bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.skedaddle-landing .bg .blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.skedaddle-landing .bg .b1{ width:46vmin; height:46vmin; left:-10vmin; top:-10vmin;
  background:radial-gradient(circle, var(--mint), transparent 70%);
  animation:sk-drift1 26s ease-in-out infinite alternate; }
.skedaddle-landing .bg .b2{ width:54vmin; height:54vmin; right:-14vmin; top:30vh;
  background:radial-gradient(circle, var(--lavender), transparent 70%);
  animation:sk-drift2 32s ease-in-out infinite alternate; }
.skedaddle-landing .bg .b3{ width:38vmin; height:38vmin; right:8vmin; top:-8vmin;
  background:radial-gradient(circle, var(--blush), transparent 70%);
  animation:sk-drift3 22s ease-in-out infinite alternate; }
.skedaddle-landing .bg .b4{ width:48vmin; height:48vmin; left:-6vmin; bottom:-12vmin;
  background:radial-gradient(circle, var(--butter), transparent 70%);
  animation:sk-drift1 30s ease-in-out infinite alternate; }

@keyframes sk-drift1{ to{ transform:translate(7vmin, 5vmin)  scale(1.12); } }
@keyframes sk-drift2{ to{ transform:translate(-6vmin,-7vmin) scale(1.08); } }
@keyframes sk-drift3{ to{ transform:translate(-4vmin, 6vmin) scale(.94); } }

/* paper grain over the whole page */
.skedaddle-landing .grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the page content sits above the ambient bg */
.skedaddle-landing .site{ position:relative; z-index:1; }

/* ---------- scroll reveals (driven by an IntersectionObserver in JS) ---------- */
.skedaddle-landing [data-reveal]{ opacity:0; transform:translateY(24px); }
.skedaddle-landing [data-reveal].in{
  animation:sk-revealIn .7s cubic-bezier(.2,1.3,.35,1) both;
  animation-delay:var(--d, 0s);
}
@keyframes sk-revealIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* ============================================================
   NAV
   ============================================================ */
.skedaddle-landing .nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem clamp(1rem, 4vw, 2.2rem);
  background:color-mix(in srgb, var(--cream) 74%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.skedaddle-landing .nav-brand{ display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-family:'Fraunces',serif; font-weight:900; font-size:1.45rem; letter-spacing:-.01em; color:var(--ink); }
.skedaddle-landing .nav-brand .tick{ width:1.05em; height:1.05em; flex:0 0 auto; }
.skedaddle-landing .nav-cta{
  font-family:'Inter',sans-serif; font-weight:700; font-size:.92rem; text-decoration:none;
  padding:.55em 1.1em; border:3px solid var(--ink); border-radius:999px;
  background:var(--mint); color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .14s cubic-bezier(.2,1.5,.4,1), box-shadow .14s;
}
.skedaddle-landing .nav-cta:hover{ transform:translate(-1px,-1px); box-shadow:5px 6px 0 var(--ink); }
.skedaddle-landing .nav-cta:active{ transform:translate(1px,2px); box-shadow:2px 2px 0 var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.skedaddle-landing .hero{
  position:relative; max-width:1180px; margin:0 auto;
  padding:clamp(2.4rem,6vw,5rem) clamp(1.2rem,5vw,2.4rem) clamp(3rem,8vw,6rem);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.skedaddle-landing .hero-badge{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:'Geist',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:lowercase; color:var(--ink);
  background:var(--butter); border:3px solid var(--ink); border-radius:999px;
  padding:.5em 1em; box-shadow:var(--shadow-sm); transform:rotate(-1.5deg);
}
.skedaddle-landing .hero-badge .dot{ width:.6em; height:.6em; border-radius:50%; background:var(--coral); border:2px solid var(--ink); }
.skedaddle-landing .hero h1{
  font-family:'Fraunces',serif; font-weight:900; line-height:.96; letter-spacing:-.02em;
  font-size:clamp(2.7rem, 7.2vw, 5.2rem); margin:1rem 0 0;
}
.skedaddle-landing .hero .lede{ font-size:clamp(1.05rem, 1.5vw, 1.28rem); color:var(--ink-soft); max-width:48ch; margin:1.3rem 0 0; }
.skedaddle-landing .hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }
.skedaddle-landing .hero-micro{ margin-top:1.1rem; font-family:'Geist',sans-serif; font-weight:600; font-size:.82rem; letter-spacing:.04em; color:var(--ink-soft); }

/* floating sticker confetti around the hero */
.skedaddle-landing .float{ position:absolute; pointer-events:none; z-index:-1; opacity:.95; }
.skedaddle-landing .float.f1{ top:8%;  left:-14px;  animation:sk-floatA 7s ease-in-out infinite; }
.skedaddle-landing .float.f2{ top:28%; left:50%;    animation:sk-floatB 9s ease-in-out infinite; }
.skedaddle-landing .float.f3{ top:14%; right:40%;   animation:sk-floatA 8s 1s ease-in-out infinite; }
@keyframes sk-floatA{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-14px) rotate(4deg); } }
@keyframes sk-floatB{ 0%,100%{ transform:translateY(0) rotate(8deg); } 50%{ transform:translateY(12px) rotate(-5deg); } }
.skedaddle-landing .chip{ display:inline-grid; place-items:center; width:42px; height:42px; border:3px solid var(--ink); border-radius:12px; box-shadow:var(--shadow-sm); }

/* the live hero to-do card */
.skedaddle-landing .hero-demo{ display:flex; justify-content:center; }
.skedaddle-landing .demo-card{
  position:relative; width:min(420px, 100%);
  background:var(--paper); border:3px solid var(--ink); border-radius:26px;
  padding:20px 22px 24px; box-shadow:14px 16px 0 var(--lav-soft);
  transform:rotate(-2deg); animation:sk-cardBob 6.5s ease-in-out infinite;
}
@keyframes sk-cardBob{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(-1deg) translateY(-9px); } }
.skedaddle-landing .demo-sticky{
  position:absolute; top:-30px; right:20px; width:96px; height:84px;
  background:var(--mint); border:3px solid var(--ink); border-radius:8px 8px 14px 8px;
  transform:rotate(7deg); box-shadow:6px 7px 0 var(--sky); z-index:-1; padding:30px 12px 0;
}
.skedaddle-landing .demo-sticky i{ display:block; height:6px; border-radius:3px; background:var(--ink); opacity:.7; margin-bottom:8px; }
.skedaddle-landing .demo-sticky i:last-child{ width:60%; }
.skedaddle-landing .demo-sticky .pin{ position:absolute; top:8px; left:11px; width:15px; height:15px; border-radius:50%; background:var(--coral); border:3px solid var(--ink); }
.skedaddle-landing .demo-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.skedaddle-landing .demo-badge{ font:700 12px/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:lowercase; background:var(--coral); color:var(--paper); border:3px solid var(--ink); padding:7px 13px 8px; border-radius:999px; box-shadow:2.5px 2.5px 0 var(--ink); }
.skedaddle-landing .demo-dots{ display:flex; gap:6px; }
.skedaddle-landing .demo-dots b{ width:11px; height:11px; border-radius:50%; border:2.5px solid var(--ink); }
.skedaddle-landing .demo-dots b:nth-child(1){ background:var(--mint); }
.skedaddle-landing .demo-dots b:nth-child(2){ background:var(--butter); }
.skedaddle-landing .demo-dots b:nth-child(3){ background:var(--sky); }

.skedaddle-landing .demo-row{ position:relative; display:flex; align-items:center; gap:13px; padding:13px 6px; }
.skedaddle-landing .demo-row + .demo-row{ border-top:2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.skedaddle-landing .demo-card.fadein .demo-row{ animation:sk-softIn .45s ease both; }
@keyframes sk-softIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
.skedaddle-landing .demo-row.bolt{ animation:sk-rowBolt .55s cubic-bezier(.55,-0.35,.8,.5) forwards; }
@keyframes sk-rowBolt{ 0%{ opacity:1; transform:translateX(0); } 22%{ transform:translateX(-22px) skewX(6deg); } 100%{ opacity:0; transform:translateX(150%) skewX(-18deg) scaleY(.85); } }

.skedaddle-landing .demo-box{ flex:0 0 auto; width:28px; height:28px; border:3px solid var(--ink); border-radius:9px; background:var(--paper); display:grid; place-items:center; box-shadow:2.5px 2.5px 0 var(--ink); transition:background .25s ease; }
.skedaddle-landing .demo-row.ticked .demo-box{ background:var(--fill, var(--mint)); }
.skedaddle-landing .demo-box svg{ width:17px; height:17px; overflow:visible; }
.skedaddle-landing .demo-box path{ fill:none; stroke:var(--ink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; }
.skedaddle-landing .demo-row.ticked .demo-box path{ animation:sk-draw .28s ease-out forwards; }
@keyframes sk-draw{ to{ stroke-dashoffset:0; } }
.skedaddle-landing .demo-task{ position:relative; font:600 16px/1.3 'Inter',sans-serif; color:var(--ink); }
.skedaddle-landing .demo-task::after{ content:''; position:absolute; left:-3px; right:-3px; top:54%; height:3px; border-radius:2px; background:var(--coral); transform:scaleX(0); transform-origin:left center; transition:transform .22s ease-out; }
.skedaddle-landing .demo-row.ticked .demo-task::after{ transform:scaleX(1); }

.skedaddle-landing .demo-fx{ position:absolute; right:-6px; top:50%; pointer-events:none; }
.skedaddle-landing .demo-fx .line{ position:absolute; right:0; height:5px; border-radius:3px; background:var(--ink); opacity:0; }
.skedaddle-landing .demo-fx .line.l1{ width:30px; top:-10px; } .skedaddle-landing .demo-fx .line.l2{ width:44px; top:0; } .skedaddle-landing .demo-fx .line.l3{ width:24px; top:10px; }
.skedaddle-landing .demo-fx .puff{ position:absolute; border-radius:50%; border:3px solid var(--ink); opacity:0; }
.skedaddle-landing .demo-fx .puff.p1{ width:14px; height:14px; right:8px; top:-6px; background:var(--peach); }
.skedaddle-landing .demo-fx .puff.p2{ width:10px; height:10px; right:30px; top:6px; background:var(--lav-soft); }
.skedaddle-landing .demo-row.bolt .demo-fx .line{ animation:sk-streak .5s ease-out both; }
.skedaddle-landing .demo-row.bolt .demo-fx .line.l2{ animation-delay:.06s; }
.skedaddle-landing .demo-row.bolt .demo-fx .line.l3{ animation-delay:.12s; }
.skedaddle-landing .demo-row.bolt .demo-fx .puff{ animation:sk-poof .55s .06s ease-out both; }
@keyframes sk-streak{ 0%{ opacity:0; transform:translateX(10px) scaleX(.3); } 25%{ opacity:1; } 100%{ opacity:0; transform:translateX(-78px) scaleX(1.15); } }
@keyframes sk-poof{ 0%{ opacity:0; transform:scale(.2) translate(0,0); } 30%{ opacity:1; } 100%{ opacity:0; transform:scale(1.7) translate(-14px,-10px); } }

.skedaddle-landing .demo-empty{
  position:absolute; left:18px; right:18px; bottom:18px; top:70px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; opacity:0; transform:scale(.9); pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,1.6,.4,1);
}
.skedaddle-landing .demo-card.cleared .demo-empty{ opacity:1; transform:scale(1); }
.skedaddle-landing .demo-empty .runner{ font-size:2rem; }
.skedaddle-landing .demo-empty strong{ font-family:'Fraunces',serif; font-weight:900; font-size:1.4rem; }
.skedaddle-landing .demo-empty span{ font-family:'Geist',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.04em; color:var(--ink-soft); }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.skedaddle-landing .section{ max-width:1100px; margin:0 auto; padding:clamp(2.6rem,7vw,5rem) clamp(1.2rem,5vw,2.4rem); }
.skedaddle-landing .section-head{ text-align:center; max-width:42ch; margin:0 auto clamp(2rem,4vw,3rem); }
.skedaddle-landing .section-head h2{ font-family:'Fraunces',serif; font-weight:900; line-height:1; letter-spacing:-.02em; font-size:clamp(2rem,4.5vw,3.2rem); margin-top:.6rem; }
.skedaddle-landing .section-head p{ color:var(--ink-soft); margin-top:.8rem; font-size:1.05rem; }

/* highlights */
.skedaddle-landing .cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.skedaddle-landing .card2{
  position:relative; background:var(--paper); border:3px solid var(--ink); border-radius:22px;
  padding:1.7rem 1.5rem; box-shadow:var(--shadow);
  transition:transform .2s cubic-bezier(.2,1.4,.4,1), box-shadow .2s ease;
}
.skedaddle-landing .card2:nth-child(1){ transform:rotate(-1.5deg); }
.skedaddle-landing .card2:nth-child(2){ transform:rotate(1deg); }
.skedaddle-landing .card2:nth-child(3){ transform:rotate(-1deg); }
.skedaddle-landing .card2:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:9px 12px 0 var(--ink); }
.skedaddle-landing .card2 .ic{ width:56px; height:56px; border:3px solid var(--ink); border-radius:15px; display:grid; place-items:center; box-shadow:var(--shadow-sm); margin-bottom:1.1rem; }
.skedaddle-landing .card2:nth-child(1) .ic{ background:var(--butter); }
.skedaddle-landing .card2:nth-child(2) .ic{ background:var(--sky); }
.skedaddle-landing .card2:nth-child(3) .ic{ background:var(--mint); }
.skedaddle-landing .card2 .ic svg{ width:28px; height:28px; }
.skedaddle-landing .card2 h3{ font-family:'Fraunces',serif; font-weight:900; font-size:1.4rem; line-height:1.05; }
.skedaddle-landing .card2 .kicker{ font-family:'Geist',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:lowercase; color:var(--coral); display:block; margin-bottom:.5rem; }
.skedaddle-landing .card2 p{ color:var(--ink-soft); margin-top:.6rem; font-size:.98rem; }

/* how it works */
.skedaddle-landing .how{ position:relative; }
.skedaddle-landing .steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.skedaddle-landing .step{ text-align:center; padding:0 .5rem; }
.skedaddle-landing .step .num{
  width:74px; height:74px; margin:0 auto 1.1rem;
  display:grid; place-items:center; border:3px solid var(--ink); border-radius:50%;
  font-family:'Fraunces',serif; font-weight:900; font-size:2rem; box-shadow:var(--shadow);
}
.skedaddle-landing .step:nth-child(1) .num{ background:var(--coral); color:var(--paper); }
.skedaddle-landing .step:nth-child(2) .num{ background:var(--lavender); color:var(--ink); }
.skedaddle-landing .step:nth-child(3) .num{ background:var(--mint); color:var(--ink); }
.skedaddle-landing .step h3{ font-family:'Fraunces',serif; font-weight:900; font-size:1.4rem; }
.skedaddle-landing .step p{ color:var(--ink-soft); margin-top:.5rem; font-size:.98rem; }

/* ============================================================
   GET STARTED (was the waitlist — now a sign-up call to action)
   ============================================================ */
.skedaddle-landing .waitlist{ padding:clamp(2.6rem,7vw,5rem) clamp(1.2rem,5vw,2.4rem); }
.skedaddle-landing .waitlist-card{
  position:relative; overflow:hidden; max-width:680px; margin:0 auto; text-align:center;
  background:linear-gradient(155deg, var(--peach), var(--butter));
  border:3px solid var(--ink); border-radius:30px;
  padding:clamp(2rem,5vw,3.4rem) clamp(1.4rem,5vw,3rem);
  box-shadow:14px 16px 0 var(--ink);
}
.skedaddle-landing .waitlist-card .wl-blob{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.45; pointer-events:none; }
.skedaddle-landing .waitlist-card .wl-blob.w1{ width:30vmin; height:30vmin; left:-8vmin; top:-10vmin; background:radial-gradient(circle,var(--blush),transparent 70%); }
.skedaddle-landing .waitlist-card .wl-blob.w2{ width:26vmin; height:26vmin; right:-8vmin; bottom:-10vmin; background:radial-gradient(circle,var(--sky),transparent 70%); }
.skedaddle-landing .waitlist-card > *{ position:relative; z-index:1; }
.skedaddle-landing .waitlist-card h2{ font-family:'Fraunces',serif; font-weight:900; line-height:1; letter-spacing:-.02em; font-size:clamp(2rem,5vw,3.2rem); margin-top:.5rem; }
.skedaddle-landing .waitlist-card .sub{ color:var(--ink); opacity:.82; margin:.9rem auto 0; max-width:46ch; }
.skedaddle-landing .waitlist-cta{ display:flex; justify-content:center; margin:1.7rem auto 0; }
.skedaddle-landing .wl-micro{ font-family:'Geist',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.06em; color:var(--ink); opacity:.7; margin-top:1rem; }

/* ============================================================
   APP SHOWCASE — landing-styled window frame, authentic app
   screen inside (tokens scoped so they never touch the page)
   ============================================================ */
.skedaddle-landing .showcase{ max-width:1100px; margin:0 auto; padding:clamp(2.6rem,7vw,5rem) clamp(1.2rem,5vw,2.4rem); }
.skedaddle-landing .appwin{
  position:relative; max-width:600px; margin:1.4rem auto 0;
  background:var(--cream); border:3px solid var(--ink); border-radius:24px;
  box-shadow:16px 18px 0 var(--lav-soft); overflow:hidden; transform:rotate(-.6deg);
}
.skedaddle-landing .appwin-bar{ display:flex; align-items:center; gap:8px; padding:12px 15px; background:var(--cream); border-bottom:3px solid var(--ink); }
.skedaddle-landing .appwin-bar .wd{ display:flex; gap:7px; }
.skedaddle-landing .appwin-bar .wd b{ width:13px; height:13px; border-radius:50%; border:2.5px solid var(--ink); }
.skedaddle-landing .appwin-bar .wd b:nth-child(1){ background:var(--coral); }
.skedaddle-landing .appwin-bar .wd b:nth-child(2){ background:var(--butter); }
.skedaddle-landing .appwin-bar .wd b:nth-child(3){ background:var(--mint); }
.skedaddle-landing .appwin-title{ font:700 .78rem/1 'Geist',sans-serif; letter-spacing:.02em; color:var(--ink-soft); margin-left:6px; }
.skedaddle-landing .appwin-mode{ margin-left:auto; font:700 .58rem/1 'Geist',sans-serif; text-transform:uppercase; letter-spacing:.13em; color:var(--ink); background:var(--butter); border:2px solid var(--ink); border-radius:999px; padding:.42em .7em; }

/* the screen renders in the app's OWN minimal style (scoped tokens) */
.skedaddle-landing .appwin-screen{
  --ap:#faf9f6; --ap-warm:#f5f3ef; --su:#fff;
  --ak:#1a1a1a; --ak-mut:#6b6b6b; --ak-lt:#999; --aru:#e0ddd8; --ash:rgba(0,0,0,.08);
  background:var(--ap); color:var(--ak);
  font-family:'Geist', system-ui, sans-serif;
  padding:16px 15px 18px;
}
.skedaddle-landing .ax-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 14px; }
.skedaddle-landing .ax-wordmark{ display:inline-flex; align-items:center; gap:.4em; font:700 1.18rem/1 'Fraunces',serif; letter-spacing:-.01em; color:var(--ak); }
.skedaddle-landing .ax-logo{ width:1.05em; height:1.05em; flex:0 0 auto; }
.skedaddle-landing .ax-views{ display:flex; gap:3px; background:var(--ap-warm); border-radius:999px; padding:4px; }
.skedaddle-landing .ax-views button{ font:600 .7rem/1 'Geist',sans-serif; padding:.5em .85em; border-radius:999px; border:none; background:transparent; color:var(--ak-mut); cursor:default; }
.skedaddle-landing .ax-views button.is-active{ background:var(--su); color:var(--ak); box-shadow:0 1px 4px var(--ash); }
.skedaddle-landing .ax-theme{ width:34px; height:34px; border-radius:999px; border:1px solid var(--aru); background:var(--su); color:var(--ak); font-size:.95rem; line-height:1; cursor:default; }

.skedaddle-landing .ax-filters{ display:flex; gap:7px; padding:0 2px 14px; flex-wrap:wrap; }
.skedaddle-landing .ax-chip{ font:700 .6rem/1 'Geist',sans-serif; text-transform:uppercase; letter-spacing:.06em; padding:.55em .8em; border-radius:999px; border:1px solid var(--c,#999); color:var(--c,#999); background:transparent; opacity:.55; cursor:default; }
.skedaddle-landing .ax-chip.is-active{ opacity:1; }

.skedaddle-landing .ax-list{ display:flex; flex-direction:column; gap:10px; }
.skedaddle-landing .ax-bullet{ display:flex; gap:12px; align-items:flex-start; background:var(--su); border-radius:16px; padding:14px 15px; box-shadow:0 2px 8px var(--ash); }
.skedaddle-landing .ax-dot{ color:var(--ak); font-size:1.3rem; line-height:1.12; flex:0 0 auto; }
.skedaddle-landing .ax-body{ flex:1 1 auto; min-width:0; }
.skedaddle-landing .ax-text{ font:500 1.02rem/1.3 'Geist',sans-serif; letter-spacing:-.01em; color:var(--ak); }
.skedaddle-landing .ax-text.is-done{ color:var(--ak-lt); text-decoration:line-through; text-decoration-color:color-mix(in srgb,#27ae60 70%, transparent); }
.skedaddle-landing .ax-desc{ font:400 .88rem/1.4 'Geist',sans-serif; color:var(--ak-mut); margin-top:3px; }
.skedaddle-landing .ax-meta{ display:flex; gap:8px; align-items:center; margin-top:11px; flex-wrap:wrap; }

.skedaddle-landing .ax-label{ font:600 .72rem/1 'Geist',sans-serif; padding:.42em .72em; border-radius:999px; border:1px solid var(--neon,#999); color:var(--neon,#999); background:transparent; animation:sk-ax-glow 4.8s ease-in-out infinite; }
.skedaddle-landing .ax-status{ font:700 .6rem/1 'Geist',sans-serif; text-transform:uppercase; letter-spacing:.06em; padding:.55em .8em; border-radius:999px; color:var(--ak); background:transparent; animation:sk-ax-ring 4.8s ease-in-out infinite; }
.skedaddle-landing .ax-status[data-status="not_started"]{ --neon:#9aa0a6; }
.skedaddle-landing .ax-status[data-status="in_progress"]{ --neon:#f39c12; }
.skedaddle-landing .ax-status[data-status="complete"]{ --neon:#27ae60; }
@keyframes sk-ax-ring{
  0%,100%{ box-shadow:0 0 0 1px var(--neon), 0 0 9px color-mix(in srgb,var(--neon) 30%, transparent); }
  50%    { box-shadow:0 0 0 1px var(--neon), 0 0 20px color-mix(in srgb,var(--neon) 62%, transparent); }
}
@keyframes sk-ax-glow{
  0%,100%{ box-shadow:0 0 9px color-mix(in srgb,var(--neon) 30%, transparent); }
  50%    { box-shadow:0 0 20px color-mix(in srgb,var(--neon) 62%, transparent); }
}

.skedaddle-landing .ax-fab{ display:flex; align-items:center; justify-content:center; gap:14px; padding-top:18px; }
.skedaddle-landing .ax-fab-main{ width:54px; height:54px; border-radius:999px; background:var(--ak); color:var(--ap); font-size:1.7rem; line-height:1; border:none; display:grid; place-items:center; box-shadow:0 5px 16px var(--ash); cursor:default; }
.skedaddle-landing .ax-fab-ghost{ width:44px; height:44px; border-radius:999px; background:transparent; color:var(--ak-mut); border:1px solid var(--aru); font-size:1.05rem; line-height:1; display:grid; place-items:center; cursor:default; }

.skedaddle-landing .showcase-note{ text-align:center; margin-top:1.7rem; font-family:'Geist',sans-serif; font-weight:600; font-size:.84rem; letter-spacing:.02em; color:var(--ink-soft); }

/* ============================================================
   CLOSER — the emphasized sign-off
   ============================================================ */
.skedaddle-landing .closer{ max-width:900px; margin:0 auto; padding:clamp(2.6rem,7vw,5rem) clamp(1.2rem,5vw,2.4rem); text-align:center; }
.skedaddle-landing .closer p{ font-family:'Fraunces',serif; font-weight:900; line-height:1.04; letter-spacing:-.02em; font-size:clamp(2.1rem,6vw,3.8rem); color:var(--ink); }
.skedaddle-landing .closer .closer-hl{ color:var(--coral); -webkit-text-stroke:2.5px var(--ink); paint-order:stroke fill; text-shadow:.04em .055em 0 var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.skedaddle-landing .footer{ text-align:center; padding:clamp(2.4rem,6vw,4rem) 1.4rem 3rem; border-top:3px dashed color-mix(in srgb,var(--ink) 25%, transparent); margin-top:1rem; }
.skedaddle-landing .footer .fbrand{ display:inline-flex; align-items:center; gap:.5em; font-family:'Fraunces',serif; font-weight:900; font-size:2rem; color:var(--ink); }
.skedaddle-landing .footer .ftick{ width:1em; height:1em; }
.skedaddle-landing .footer .ftag{ font:700 13px/1 'Geist',sans-serif; letter-spacing:.32em; text-transform:lowercase; color:var(--ink-soft); margin-top:.6rem; }
.skedaddle-landing .footer .fline{ color:var(--ink-soft); margin-top:1.1rem; font-size:.95rem; }
.skedaddle-landing .footer .fcopy{ font-family:'Geist',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.08em; color:var(--ink-soft); opacity:.7; margin-top:1.4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .skedaddle-landing .hero{ grid-template-columns:1fr; text-align:center; }
  .skedaddle-landing .hero-badge{ margin:0 auto; }
  .skedaddle-landing .hero .lede{ margin-left:auto; margin-right:auto; }
  .skedaddle-landing .hero-cta{ justify-content:center; }
  .skedaddle-landing .hero-demo{ margin-top:1rem; }
  .skedaddle-landing .float.f2, .skedaddle-landing .float.f3{ display:none; }
  .skedaddle-landing .cards{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .skedaddle-landing .steps{ grid-template-columns:1fr; max-width:420px; margin:0 auto; gap:2rem; }
}
@media (max-width:520px){
  .skedaddle-landing .nav-brand{ font-size:1.25rem; }
  .skedaddle-landing .appwin{ transform:none; box-shadow:10px 12px 0 var(--lav-soft); }
  .skedaddle-landing .ax-wordmark{ font-size:1rem; }
  .skedaddle-landing .ax-views button{ padding:.5em .6em; font-size:.66rem; }
}

/* ============================================================
   REDUCED MOTION — keep it calm
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .skedaddle-landing [data-reveal]{ opacity:1 !important; transform:none !important; animation:none !important; }
  .skedaddle-landing .bg .blob{ animation:none !important; }
  .skedaddle-landing .demo-card{ animation:none !important; }
  .skedaddle-landing .float{ animation:none !important; }
  .skedaddle-landing .ax-status, .skedaddle-landing .ax-label{ animation:none !important; }
}