/* =============================================================
   Lemonade redesign: bold and playful
   Loaded after styles.css. Delete this file (and its <link>) to go back to the old look.
   ============================================================= */

@view-transition{ navigation: auto; }

:root{
  --r-xl: 44px;
  --r-lg: 28px;
  --r-md: 18px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --yellow-hi: #FFE55C;
}

html{ scroll-padding-top: 96px; }
body{ overflow-x: clip; }

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

/* soft paper grain over everything (decorative, no pointer events) */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------
   Header: a floating pill
--------------------------------------------- */
.site-header{
  top: 12px;
  width: min(1200px, calc(100% - 24px));
  margin: 12px auto 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,253,246,.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 5px 0 var(--ink);
}
.header-row{ padding: 9px 12px 9px 20px; max-width: none; }
.brand-mark{ height: 40px; }
.site-nav a{ position: relative; border-bottom: 0; padding: 6px 0; }
.site-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--cape);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.site-nav a:hover::after, .site-nav a.active::after{ transform: scaleX(1); }
.header-cta{ box-shadow: 0 3px 0 var(--cape); }

/* ---------------------------------------------
   Buttons: chunky, tactile
--------------------------------------------- */
.btn{
  border-color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
.btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-ink{ box-shadow: 0 4px 0 var(--cape); }
.btn-ink:hover{ box-shadow: 0 7px 0 var(--cape); }
.btn-ink:active{ box-shadow: 0 1px 0 var(--cape); }
.btn-text{ box-shadow: none; border-width: 0 0 2px 0; }
.btn-text:hover, .btn-text:active{ box-shadow: none; transform: none; }
.btn-cream{ border-color: var(--ink); }

/* ---------------------------------------------
   Type
--------------------------------------------- */
h1, h2, h3{ letter-spacing: -0.02em; }
.section-title{
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* numbered section tags (01, 02 ...) */
main{ counter-reset: sec; }
.access, .work, .pricing, .care, .how, .product-teaser, .audit-video{ counter-increment: sec; }
:is(.access, .work, .pricing, .care, .how, .product-teaser, .audit-video) .section-title::before{
  content: counter(sec, decimal-leading-zero);
  display: block;
  width: fit-content;
  margin-bottom: 16px;
  padding: .32em .85em;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  transform: rotate(-3deg);
}
.product-teaser .section-title::before{ border-color: var(--yellow); }
.cta-band .section-title::before{ display: none; }

/* ---------------------------------------------
   Hero: a big rounded yellow stage
--------------------------------------------- */
.hero{
  margin: 14px 12px 0;
  border: 2px solid var(--ink);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 80% at 82% 20%, var(--yellow-hi) 0, rgba(255,229,92,0) 70%),
    radial-gradient(40% 60% at 8% 100%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 70%),
    var(--yellow);
  position: relative;
  isolation: isolate;
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(32,31,27,.13) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 0, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 85%);
}
.hero-grid{ padding-top: 56px; gap: 24px; grid-template-columns: 1.2fr .8fr; }
.hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .45em 1em;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.hero-eyebrow::before{
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 4px rgba(31,122,78,.22);
}
.hero-copy h1.h1-long{
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-bottom: .45em;
}
.swash{
  text-decoration: underline wavy var(--cape);
  text-decoration-thickness: 4px;
  text-underline-offset: .14em;
  text-decoration-skip-ink: none;
}
.hero-sub{ font-size: 1.18rem; max-width: 50ch; color: var(--ink); opacity: .82; }
.hero-actions{ gap: 18px 24px; margin-top: 18px; }

.hero-copy{ padding-bottom: 56px; }
.hero-art{ position: relative; align-self: end; min-height: 420px; }
.hero-blob{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 94%;
  aspect-ratio: 1;
  translate: -50% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0, rgba(255,255,255,.7) 38%, rgba(255,255,255,0) 72%);
  border: 2px dashed rgba(32,31,27,.35);
  animation: spin 60s linear infinite;
}
.mascot{ width: min(100%, 470px); filter: drop-shadow(0 18px 0 rgba(32,31,27,.10)); }

.sticker{
  position: absolute;
  z-index: 2;
  padding: .5em 1.05em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
}
.sticker.s1{ top: 14%; left: 0; background: var(--cream); transform: rotate(-8deg); animation: bob 5.2s ease-in-out infinite; }
.sticker.s2{ top: 38%; right: -2%; background: var(--cape); color: var(--cream); transform: rotate(7deg); animation: bob 6s ease-in-out -2s infinite; }
.sticker.s3{ bottom: 12%; left: 4%; background: var(--ink); color: var(--yellow); transform: rotate(-4deg); animation: bob 5.6s ease-in-out -1s infinite; }
@keyframes bob{
  0%, 100%{ translate: 0 0; }
  50%{ translate: 0 -9px; }
}
@keyframes spin{ to{ rotate: 360deg; } }

/* ---------------------------------------------
   Ticker: a tilted, scrolling band
--------------------------------------------- */
.ticker-wrap{ overflow: hidden; margin: 18px 0 8px; padding: 16px 0; }
.ticker{
  margin: 0 -3%;
  padding: 20px 0;
  background: var(--ink);
  color: var(--yellow);
  transform: rotate(-1.4deg);
  overflow: hidden;
  border-block: 3px solid var(--yellow);
}
.ticker-track{ display: flex; width: max-content; animation: marquee 34s linear infinite; }
.ticker-set{ display: flex; align-items: center; flex-shrink: 0; }
.ticker-set span{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-set i{
  display: inline-block;
  width: 16px; height: 16px;
  margin: 0 34px;
  border-radius: 50%;
  background: var(--cape);
  box-shadow: 0 0 0 4px rgba(213,66,63,.3);
}
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ---------------------------------------------
   Services: a bento grid
--------------------------------------------- */
.access{ background: transparent; padding-top: 56px; }
.plans-two{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 34px;
}
.plans-two .plan{
  grid-column: span 6;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 0 var(--ink);
  padding: 30px 30px 24px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.plans-two .plan:hover{ transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 12px 0 var(--ink); }
@media (min-width: 1000px){
  .plans-two .plan:nth-child(1){ grid-column: span 7; }
  .plans-two .plan:nth-child(2){ grid-column: span 5; }
  .plans-two .plan:nth-child(3){ grid-column: span 5; }
  .plans-two .plan:nth-child(4){ grid-column: span 7; }
}
.plans-two .plan:nth-child(1){ background: var(--yellow); }
.plans-two .plan:nth-child(2){ background: var(--ink); color: var(--cream); }
.plans-two .plan:nth-child(3){ background: #fff; }
.plans-two .plan:nth-child(4){ background: var(--yellow-soft); }
.svc-icon{
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: 18px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-6deg);
  transition: transform .3s var(--ease);
}
.plans-two .plan:hover .svc-icon{ transform: rotate(6deg) scale(1.08); }
.plans-two .plan:nth-child(2) .svc-icon{ background: var(--yellow); border-color: var(--yellow); box-shadow: 0 3px 0 var(--cape); }
.plans-two .plan h3{ font-size: 1.7rem; }
.plans-two .plan:nth-child(2) h3{ color: var(--cream); }
.plans-two .plan:nth-child(2) .plan-for{ color: var(--cream); }
.plans-two .plan:nth-child(2) li{ color: rgba(255,253,246,.92); border-color: rgba(255,253,246,.2); }
.plans-two .plan:nth-child(2) .plan-from{ color: var(--yellow); border-color: rgba(255,253,246,.25); }
.plans-two .plan:nth-child(2) .fold-btn{ color: var(--yellow); }
.plans-two .plan .plan-from{ margin-top: auto; }

/* ---------------------------------------------
   Footer: giant outlined wordmark
--------------------------------------------- */
.site-footer{ position: relative; overflow: hidden; padding-bottom: 0; margin-top: 40px; }
.footer-wordmark{
  margin: 28px 0 -.18em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 21vw, 17rem);
  line-height: .85;
  letter-spacing: -.04em;
  text-align: center;
  color: rgba(255,212,0,.13);
  user-select: none;
  pointer-events: none;
}

/* ---------------------------------------------
   Phones
--------------------------------------------- */
@media (max-width: 880px){
  .site-header{ top: 8px; margin-top: 8px; width: calc(100% - 16px); }
  .header-row{ padding: 7px 8px 7px 14px; }
  .hero{ margin: 10px 8px 0; border-radius: 30px; }
  .hero-grid{ padding-top: 40px; grid-template-columns: 1fr; }
  .hero-copy{ padding-bottom: 8px; }
  .hero-art{ min-height: 0; margin-top: 12px; }
  .mascot{ width: min(78%, 330px); margin: 0 auto; }
  .sticker{ font-size: .84rem; }
  .sticker.s1{ top: 8%; left: 2%; }
  .sticker.s2{ top: 30%; right: 0; }
  .sticker.s3{ bottom: 10%; left: 4%; }
  .ticker{ margin: 0 -6%; padding: 14px 0; }
  .ticker-wrap{ margin: 10px 0 0; padding: 12px 0; }
  .ticker-set i{ margin: 0 22px; width: 12px; height: 12px; }
  .plans-two .plan{ padding: 22px 20px 18px; }
  .plans-two .plan h3{ font-size: 1.45rem; }
  .svc-icon{ width: 50px; height: 50px; margin-bottom: 12px; }
}

/* ---------------------------------------------
   Motion preferences
--------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ticker-track, .hero-blob, .sticker{ animation: none !important; }
  .ticker{ overflow-x: auto; }
  .btn, .plans-two .plan, .svc-icon{ transition: none; }
}

/* =============================================================
   Stage 2: boxed sections, richer cards, timeline, reveals
   ============================================================= */

/* Boxed, rounded "stages" instead of full-bleed bands */
.work, .care, .yowdev, .cta-band, .audit-video, .founder{
  margin: 28px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.work, .care{ padding: 84px 0; }
.yowdev, .audit-video{ padding: 64px 0; }
.cta-band{
  clip-path: none;
  padding: 96px 0;
  position: relative;
  isolation: isolate;
}
.cta-band::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 70% at 92% 10%, rgba(255,212,0,.28) 0, rgba(255,212,0,0) 70%),
    radial-gradient(35% 60% at 4% 95%, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 70%);
}
.cta-band h2{ font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.03em; line-height: 1.02; }
.audit-video{ background: var(--cream); }
.founder{ background: var(--cream); }
.product-teaser{
  margin: 28px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(45% 60% at 85% 0%, rgba(255,212,0,.22) 0, rgba(255,212,0,0) 70%),
    var(--ink);
}

/* Demo cards: big, springy, with an arrow */
.work-card, .work-card-plain{
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.work-card:hover{ transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 11px 0 var(--ink); background: var(--yellow); }
.work-card-plain .work-card-body{ padding: 26px 24px 64px; }
.work-card-plain h3{ font-size: 1.3rem; }
.work-card-plain::after{
  content: "\2197";
  position: absolute;
  right: 18px; bottom: 16px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  font-size: 1.2rem; font-weight: 700;
  color: var(--cream);
  background: var(--ink);
  border-radius: 50%;
  transition: transform .3s var(--ease), background .25s, color .25s;
}
.work-card-plain:hover::after{ transform: rotate(45deg) scale(1.1); background: var(--cape); }

/* Pricing and care cards */
.pricing .plan, .care .plan{
  border-radius: var(--r-lg);
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pricing .plan:hover, .care .plan:hover{ transform: translateY(-6px); box-shadow: 0 12px 0 var(--ink); }
.plan-featured{ box-shadow: 0 6px 0 var(--ink); background: linear-gradient(160deg, var(--yellow-hi), var(--yellow) 55%); }
.plan-tag{
  top: -16px;
  left: 22px;
  padding: .3em 1em;
  font-weight: 700;
  border: 2px solid var(--ink);
  background: var(--cape);
  color: var(--cream);
  transform: rotate(-4deg);
}
.price{ letter-spacing: -.03em; }

/* How it works: numbered stops on a dashed line */
.steps.steps-four{ position: relative; counter-reset: stp; }
.steps.steps-four::before{
  content: "";
  position: absolute;
  top: 34px; left: 8%; right: 8%;
  border-top: 3px dashed rgba(32,31,27,.28);
  z-index: 0;
}
.step{ position: relative; z-index: 1; }
.step-num{
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  -webkit-text-stroke: 0;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .3s var(--ease);
}
.step:hover .step-num{ transform: rotate(-10deg) scale(1.08); background: var(--cape); color: var(--cream); }
.step h3{ font-size: 1.35rem; }

/* Videos */
.video-frame{
  border-radius: var(--r-lg);
  box-shadow: 10px 10px 0 var(--yellow), 10px 10px 0 2px var(--ink);
  background: var(--ink);
}
.process-video{ box-shadow: 10px 10px 0 var(--yellow), 10px 10px 0 2px var(--ink); }

/* Product teaser cards on the dark band */
.teaser-feature{ border-radius: var(--r-lg); box-shadow: 10px 10px 0 var(--yellow); }
.mini-product{ border-radius: var(--r-md); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.mini-product:hover{ transform: translateX(6px) rotate(-.4deg); }

/* ---------------------------------------------
   Scroll reveals (added by script.js; never applied above the fold)
--------------------------------------------- */
.rv{ opacity: 0; transform: translateY(28px) scale(.985); }
.rv.in{
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease) var(--rv-d, 0ms), transform .7s var(--ease) var(--rv-d, 0ms);
}

@media (max-width: 880px){
  .work, .care, .yowdev, .cta-band, .audit-video, .founder, .product-teaser{ margin: 18px 8px; border-radius: 30px; }
  .work, .care{ padding: 56px 0; }
  .yowdev, .audit-video{ padding: 44px 0; }
  .cta-band{ padding: 64px 0; }
  .steps.steps-four::before{ display: none; }
  .video-frame, .process-video{ box-shadow: 6px 6px 0 var(--yellow), 6px 6px 0 2px var(--ink); }
}
@media (prefers-reduced-motion: reduce){
  .rv{ opacity: 1; transform: none; }
  .work-card, .pricing .plan, .care .plan, .mini-product, .step-num{ transition: none; }
}

/* Hero entrance: copy rises in, one piece at a time */
@keyframes rise{ from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } }
.hero-copy > *{ animation: rise .8s var(--ease) both; }
.hero-copy > :nth-child(1){ animation-delay: .05s; }
.hero-copy > :nth-child(2){ animation-delay: .15s; }
.hero-copy > :nth-child(3){ animation-delay: .27s; }
.hero-copy > :nth-child(4){ animation-delay: .38s; }
.sticker{ animation-fill-mode: both; }
@keyframes pop{ from{ opacity: 0; scale: .4; } to{ opacity: 1; scale: 1; } }
.sticker.s1{ animation: pop .6s var(--ease) .7s both, bob 5.2s ease-in-out 1.3s infinite; }
.sticker.s2{ animation: pop .6s var(--ease) .85s both, bob 6s ease-in-out -2s infinite; }
.sticker.s3{ animation: pop .6s var(--ease) 1s both, bob 5.6s ease-in-out -1s infinite; }

/* Easter egg: tapping the mascot makes it hop */
.mascot.hop{ animation: hop .7s var(--ease); }
@keyframes hop{
  0%{ transform: rotate(-3deg) translateY(0); }
  35%{ transform: rotate(8deg) translateY(-46px) scale(1.04); }
  70%{ transform: rotate(-6deg) translateY(4px); }
  100%{ transform: rotate(-3deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-copy > *, .sticker, .mascot.hop{ animation: none !important; }
}

/* Products page band: boxed like the other stages */
.product.product-dark{
  margin: 14px 12px 28px;
  border: 2px solid var(--ink);
  border-radius: var(--r-xl);
  padding-top: 84px;
  padding-bottom: 84px;
}
.product.product-dark .section-title{ font-size: clamp(2.2rem, 5vw, 3.6rem); }
.products-cta{
  margin: 28px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r-xl);
}
@media (max-width: 880px){
  .product.product-dark{ margin: 10px 8px 18px; border-radius: 30px; padding-top: 56px; padding-bottom: 56px; }
  .products-cta{ margin: 18px 8px; border-radius: 30px; }
}

/* Home teaser without a flagship: the remaining products as two roomy cards with a screenshot */
.teaser-grid.teaser-solo{ grid-template-columns: 1fr; }
.teaser-solo .teaser-minis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 28px; }
.mini-product.has-thumb{
  flex: none;
  justify-content: flex-start;
  gap: 6px;
  padding: 14px 14px 24px;
  border-left-width: 2px;
  border-top: 10px solid var(--accent, var(--yellow));
  border-radius: var(--r-lg);
  box-shadow: 8px 8px 0 var(--accent, var(--yellow));
}
.mini-product.has-thumb:hover{ transform: translateY(-6px) rotate(-.4deg); box-shadow: 8px 14px 0 var(--accent, var(--yellow)); }
.mini-thumb{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 14px;
  margin-bottom: 12px;
  background: var(--yellow-soft);
}
.mini-product.has-thumb b{ padding: 0 10px; font-size: 1.55rem; }
.mini-product.has-thumb span{ padding: 0 10px; font-size: 1rem; }
@media (max-width: 700px){
  .teaser-solo .teaser-minis{ grid-template-columns: 1fr; gap: 22px; }
}