/* PaperPath Maths — paper-craft storybook landing page */

:root{
  --paper:#F7EEDC;
  --paper-2:#FBF4E3;
  --paper-3:#F1E4C8;
  --card:#FFFDF4;
  --kraft:#C98A4B;
  --kraft-deep:#8A5A33;
  --navy:#16365C;
  --navy-night:#0F2846;
  --forest:#4F8A5B;
  --forest-deep:#3E6E49;
  --leaf:#7BBF6A;
  --sky:#7DBCE8;
  --sun:#F4C542;
  --coral:#E97451;
  --coral-deep:#C25538;
  --ink:#4A4A4A;
  --ink-soft:#6B6355;
  --cream-text:#FBF4E3;
  --stitch:rgba(22,54,92,.3);
  --shadow-warm:0 12px 26px -10px rgba(96,64,24,.25), 0 3px 8px rgba(96,64,24,.1);
  --shadow-soft:0 6px 16px -6px rgba(96,64,24,.18);
  --font-head:"Lexend",sans-serif;
  --font-body:"Nunito",sans-serif;
  --font-hand:"Playpen Sans",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(22,54,92,.05) 1.2px, transparent 1.5px);
  background-size:26px 26px;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483000;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.34 0 0 0 0 0.26 0 0 0 0 0.14 0 0 0 0.05 0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
}

img{max-width:100%}
h1,h2,h3{font-family:var(--font-head);color:var(--navy);margin:0 0 .4em;line-height:1.15;overflow-wrap:break-word}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--navy)}
::selection{background:var(--sun);color:var(--navy)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}
.section--signup :focus-visible{outline-color:var(--cream-text)}

.ico{width:1.05em;height:1.05em;fill:currentColor;vertical-align:-.14em;flex:none}
.center{text-align:center}
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--navy);color:var(--cream-text);
  padding:10px 18px;border-radius:0 0 12px 12px;
  font-weight:700;text-decoration:none;transition:top .2s;
}
.skip-link:focus{top:0}

.shell{width:min(1140px,92vw);margin-inline:auto}
.shell.narrow{width:min(780px,92vw);text-align:center}
.shell.wide{width:min(1240px,94vw)}

/* ---------- shared paper bits ---------- */

.section{position:relative;padding:88px 0 100px}
.section h2{font-size:clamp(1.95rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.3px}
.section-body{
  font-size:1.1rem;line-height:1.72;max-width:62ch;
  margin:18px auto 0;
}
.section-body.left{margin-left:0}

.tear{position:absolute;top:0;left:0;right:0;transform:translateY(-42px);pointer-events:none;line-height:0}
.tear svg{display:block;width:100%;height:44px;fill:currentColor;filter:drop-shadow(0 -5px 5px rgba(96,64,24,.09))}
.section--problem,.tear-color-problem{--bg:var(--paper-2)}

.eyebrow{
  display:inline-block;position:relative;
  font-family:var(--font-hand);font-weight:600;font-size:.98rem;line-height:1.3;
  padding:.55em 1.15em;border-radius:11px;
  --tr:rotate(-1.4deg);
  transform:var(--tr);
  margin:0 0 20px;
  color:var(--cream-text);
  box-shadow:var(--shadow-soft);
}
.eyebrow::before{
  content:"";position:absolute;inset:4px;border-radius:7px;
  border:2px dashed rgba(255,251,238,.5);pointer-events:none;
}
.eyebrow--navy{background:var(--navy)}
.eyebrow--kraft{background:var(--kraft-deep)}
.eyebrow--green{background:var(--forest-deep)}
.eyebrow--sky{background:#34648C}
.eyebrow--sun{background:var(--sun);color:var(--navy)}
.eyebrow--sun::before{border-color:rgba(22,54,92,.35)}

.paper-card{
  position:relative;
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow-warm);
}
.paper-card::before{
  content:"";position:absolute;inset:7px;border-radius:10px;
  border:2px dashed var(--stitch);opacity:.5;pointer-events:none;
}

.stitch-chip{
  display:inline-block;
  background:var(--paper-2);
  border:2px dashed var(--stitch);
  border-radius:12px;
  padding:.5em .95em;
  font-weight:700;font-size:.92rem;color:var(--navy);
  box-shadow:var(--shadow-soft);
}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badge-row .stitch-chip:nth-child(odd){transform:rotate(-1.1deg)}
.badge-row .stitch-chip:nth-child(even){transform:rotate(1.2deg)}

/* ---------- buttons ---------- */

.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-head);font-weight:700;font-size:1.19rem;
  line-height:1.2;text-decoration:none;text-align:center;
  border:0;cursor:pointer;
  border-radius:15px;
  padding:.85em 1.5em;min-height:54px;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn--primary{
  background:var(--coral);color:#FFF9F0;
  box-shadow:0 5px 0 var(--coral-deep), 0 14px 22px -8px rgba(194,85,56,.45);
}
.btn--primary::before{
  content:"";position:absolute;inset:5px;border-radius:10px;
  border:2px dashed rgba(255,249,240,.55);pointer-events:none;
}
.btn--primary:hover,.btn--primary:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 var(--coral-deep), 0 8px 14px -6px rgba(194,85,56,.4);
  background:#E56A45;
}
.btn--secondary{
  background:transparent;color:var(--navy);
  border:2.5px solid var(--navy);
  box-shadow:0 4px 0 rgba(22,54,92,.22);
}
.btn--secondary:hover{
  transform:translateY(2px);
  background:rgba(255,253,244,.75);
  box-shadow:0 2px 0 rgba(22,54,92,.22);
}
.btn--sm{font-size:1rem;min-height:46px;padding:.55em 1.05em;border-radius:12px}
.btn--wide{width:100%}

/* ---------- header ---------- */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:12px 0;
  transition:background-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  background:rgba(247,238,220,.93);
  box-shadow:0 4px 18px -6px rgba(96,64,24,.25);
  backdrop-filter:blur(7px);
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.logo-word{font-family:var(--font-head);font-weight:800;font-size:1.32rem;color:var(--navy);letter-spacing:-.3px}
.logo-tag{
  position:relative;
  font-family:var(--font-hand);font-weight:700;font-size:.9rem;
  background:var(--forest-deep);color:var(--cream-text);
  padding:.22em .7em;border-radius:8px;
  transform:rotate(-2deg);
}
.logo-tag::before{content:"";position:absolute;inset:3px;border-radius:5px;border:1.5px dashed rgba(255,251,238,.5)}
.logo-plane{width:36px;height:23px;transform:rotate(-8deg) translateY(-5px)}
.header-cta{opacity:0;pointer-events:none;transition:opacity .25s ease}
.site-header.scrolled .header-cta{opacity:1;pointer-events:auto}

/* ---------- hero ---------- */

.hero{
  position:relative;overflow:hidden;
  padding:clamp(108px,14vh,150px) 0 96px;
}
.hero-blob{position:absolute;border-radius:52% 48% 58% 42% / 50% 55% 45% 50%;pointer-events:none}
.hero-blob--green{
  width:640px;height:560px;right:-190px;top:-140px;
  background:radial-gradient(circle at 40% 40%, rgba(123,191,106,.24), rgba(123,191,106,.06) 68%, transparent 75%);
}
.hero-blob--sky{
  width:520px;height:470px;left:-180px;bottom:-160px;
  background:radial-gradient(circle at 60% 40%, rgba(125,188,232,.26), rgba(125,188,232,.07) 66%, transparent 74%);
}
.hero-leaf{position:absolute;width:34px;height:38px;opacity:.85}
.hero-leaf--1{left:1.5%;top:14%;transform:rotate(-24deg)}
.hero-leaf--2{left:44%;bottom:9%;transform:rotate(38deg);width:27px}
.hero-doodle-star{position:absolute;right:8%;bottom:14%;width:30px;color:var(--sun);transform:rotate(14deg)}

.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(36px,5vw,76px);
  align-items:center;
}
.hero h1{
  font-size:clamp(2.35rem,4.7vw,3.55rem);
  font-weight:800;line-height:1.07;letter-spacing:-1px;
  margin-bottom:.45em;
}
.underlined{position:relative;display:inline-block}
.underlined svg{
  position:absolute;left:2%;bottom:-.18em;width:96%;height:.24em;
  color:var(--sun);pointer-events:none;
}
.lead{font-size:1.17rem;line-height:1.66;max-width:56ch;margin-bottom:1.5em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.microcopy{font-size:.95rem;font-style:italic;color:var(--ink-soft);margin-bottom:.5em}
.trust-line{
  display:flex;align-items:center;gap:8px;
  font-weight:800;font-size:.99rem;color:var(--navy);margin-bottom:0;
}

/* phone mockup */

.hero-visual{position:relative;justify-self:center}
.phone{
  position:relative;
  width:min(378px,90vw);
  background:var(--navy);
  border-radius:48px;
  padding:13px;
  box-shadow:0 34px 60px -22px rgba(76,48,16,.45), 0 10px 22px -8px rgba(76,48,16,.28);
  transform:rotate(1.4deg);
}
.phone::after{
  content:"";position:absolute;top:23px;left:50%;transform:translateX(-50%);
  width:88px;height:8px;border-radius:8px;background:rgba(247,238,220,.16);
}
.phone-screen{
  background:var(--paper);
  background-image:radial-gradient(rgba(22,54,92,.05) 1px, transparent 1.3px);
  background-size:20px 20px;
  border-radius:37px;
  padding:34px 13px 10px;
  display:flex;flex-direction:column;gap:9px;
  overflow:hidden;
}
.app-top{display:flex;align-items:center;justify-content:space-between}
.app-logo{font-family:var(--font-head);font-weight:800;font-size:.96rem;color:var(--navy)}
.app-logo em{
  font-style:normal;font-family:var(--font-hand);font-weight:700;font-size:.74rem;
  background:var(--forest-deep);color:var(--cream-text);
  border-radius:6px;padding:.14em .5em;margin-left:2px;
  display:inline-block;transform:rotate(-2deg);
}
.app-year{
  font-size:.7rem;font-weight:800;color:var(--navy);
  background:var(--card);border:1.5px dashed var(--stitch);
  border-radius:9px;padding:.3em .6em;
}
.ico-star{width:.85em;height:.85em}
.app-welcome{display:flex;align-items:center;gap:8px}
.app-avatar{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--coral);color:#FFF9F0;
  font-family:var(--font-hand);font-weight:700;font-size:.85rem;
  display:grid;place-items:center;
  box-shadow:0 0 0 3px var(--card), 0 2px 6px rgba(96,64,24,.3);
}
.app-welcome-tag{
  background:#3E6FA3;color:#FFF9F0;
  font-size:.8rem;font-weight:700;
  padding:.32em .8em;border-radius:9px;
  transform:rotate(-1deg);
  box-shadow:0 2px 5px rgba(96,64,24,.25);
}
.app-pip{position:relative;display:flex;align-items:flex-start;gap:7px;padding-right:2px}
.app-pip-owl{width:56px;height:63px;flex:none;filter:drop-shadow(0 3px 4px rgba(96,64,24,.25))}
.app-pip-name{
  position:absolute;left:8px;bottom:-4px;
  font-family:var(--font-hand);font-weight:700;font-size:.62rem;color:var(--navy);
  background:var(--paper-3);border:1.5px dashed var(--stitch);border-radius:6px;
  padding:.05em .5em;transform:rotate(-3deg);
}
.app-pip-bubble{
  position:relative;flex:1;margin:0;
  background:var(--card);border-radius:11px;
  font-size:.8rem;line-height:1.45;color:var(--ink);
  padding:.55em .8em;
  box-shadow:var(--shadow-soft);
}
.app-pip-bubble::before{
  content:"";position:absolute;left:-7px;top:20px;
  border:7px solid transparent;border-right-color:var(--card);border-left:0;
}
.app-pip-bubble strong{color:var(--forest-deep)}
.app-map{margin:0;position:relative;border-radius:14px;box-shadow:var(--shadow-soft)}
.app-map img{display:block;width:100%;height:auto;border-radius:14px}
.app-map-label{position:absolute;left:-9999px}
.app-card{
  position:relative;background:var(--card);border-radius:14px;
  padding:12px 12px 10px;box-shadow:var(--shadow-soft);
}
.app-card::before{content:"";position:absolute;inset:5px;border-radius:9px;border:1.5px dashed var(--stitch);opacity:.5;pointer-events:none}
.app-ribbon{
  position:absolute;top:-9px;left:10px;z-index:1;
  font-family:var(--font-hand);font-weight:700;font-size:.62rem;
  color:#FFF9F0;padding:.2em .7em;border-radius:7px;
  transform:rotate(-1.6deg);box-shadow:0 2px 4px rgba(96,64,24,.3);
}
.app-ribbon--blue{background:#3E6FA3}
.app-ribbon--green{background:var(--forest-deep)}
.app-card-body{display:flex;align-items:center;justify-content:space-between;gap:10px}
.app-card h3{font-size:.88rem;font-weight:700;margin:6px 0 2px}
.app-card p{font-size:.74rem;line-height:1.4;margin:0 0 4px;color:var(--ink)}
.app-meta{display:flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;color:var(--ink-soft)}
.app-acorn{width:34px;height:43px;flex:none;filter:drop-shadow(0 2px 3px rgba(96,64,24,.3))}
.app-plane{width:64px;height:40px;flex:none;filter:drop-shadow(0 2px 3px rgba(96,64,24,.3))}
.app-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.5em;
  margin-top:7px;
  background:var(--coral);color:#FFF9F0;
  font-family:var(--font-head);font-weight:700;font-size:.8rem;
  border-radius:10px;padding:.6em .9em;
  box-shadow:0 3px 0 var(--coral-deep);
}
.app-btn::before{content:"";position:absolute;inset:3px;border-radius:7px;border:1.5px dashed rgba(255,249,240,.55)}
.app-progress{
  position:relative;height:9px;border-radius:99px;
  background:#EADFC2;overflow:hidden;margin:6px 0 4px;
  max-width:150px;
}
.app-progress span{
  position:absolute;inset:0 auto 0 0;border-radius:99px;
  background:linear-gradient(90deg,#8FCB79,var(--leaf));
}
.app-progress--lg{height:14px;max-width:280px;margin:10px 0 8px}
.app-nav{
  display:flex;justify-content:space-between;
  border-top:2px dashed rgba(22,54,92,.18);
  padding:8px 4px 4px;margin-top:2px;
}
.app-nav span{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:.58rem;font-weight:800;color:rgba(74,74,74,.65);
}
.app-nav .ico{width:15px;height:15px}
.app-nav .on{color:var(--coral)}

.float-chip{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:7px;
  background:var(--card);
  font-family:var(--font-hand);font-weight:600;font-size:.86rem;color:var(--navy);
  padding:.55em .9em;border-radius:13px;
  box-shadow:var(--shadow-warm);
  white-space:nowrap;margin:0;
}
.float-chip .ico{color:var(--forest)}
.float-chip--star{top:-16px;right:-26px;transform:rotate(3deg);animation:bob 5.2s ease-in-out infinite alternate}
.float-chip--track{top:41%;left:-58px;transform:rotate(-4deg);animation:bob 6.1s .8s ease-in-out infinite alternate}
.hero-plane-fly{
  position:absolute;top:-44px;left:-64px;width:110px;
  transform:rotate(-10deg);
  filter:drop-shadow(0 6px 8px rgba(96,64,24,.2));
  animation:drift 7s ease-in-out infinite alternate;
}
@keyframes bob{from{translate:0 0}to{translate:0 -9px}}
@keyframes drift{from{translate:0 0;rotate:0deg}to{translate:14px -10px;rotate:4deg}}

/* ---------- problem ---------- */

.section--problem{background:var(--paper-2)}
.section--problem .tear{color:var(--paper-2)}
.pain-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:54px;
  filter:drop-shadow(0 14px 14px rgba(96,64,24,.14));
}
.pain-card{
  background-color:var(--card);
  background-image:
    linear-gradient(90deg, transparent 30px, rgba(233,116,81,.28) 30px, rgba(233,116,81,.28) 32px, transparent 32px),
    repeating-linear-gradient(transparent, transparent 27px, rgba(125,188,232,.3) 27px, rgba(125,188,232,.3) 29px);
  padding:44px 26px 26px 46px;
  clip-path:polygon(0 14px,4% 5px,10% 15px,16% 7px,23% 14px,29% 5px,36% 13px,43% 6px,50% 15px,57% 7px,64% 14px,71% 5px,78% 13px,85% 6px,92% 14px,97% 7px,100% 12px,100% 100%,0 100%);
}
.pain-card:nth-child(1){--tr:rotate(-.9deg);transform:var(--tr)}
.pain-card:nth-child(2){--tr:rotate(.7deg) translateY(10px);transform:var(--tr)}
.pain-card:nth-child(3){--tr:rotate(-.5deg);transform:var(--tr)}
.pain-ico{
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--paper-3);color:var(--navy);
  border:2px dashed var(--stitch);
  margin-bottom:14px;
}
.pain-ico .ico{width:22px;height:22px}
.pain-card p{
  font-family:var(--font-hand);font-weight:600;
  font-size:1.04rem;line-height:1.5;color:var(--navy);
  margin:0;
}

/* ---------- solution ---------- */

.section--solution{background:var(--paper)}
.section--solution .tear{color:var(--paper)}
.steps{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  margin:96px 0 58px;
}
.steps-trail{position:absolute;inset:-70px 10px auto;height:calc(100% + 90px);width:calc(100% - 20px);z-index:0}
.step{
  position:relative;z-index:1;
  background:var(--card);border-radius:16px;
  box-shadow:var(--shadow-warm);
  padding:0 20px 24px;text-align:center;
}
.step::before{content:"";position:absolute;inset:7px;border-radius:10px;border:2px dashed var(--stitch);opacity:.5;pointer-events:none}
.step--down{--tr:translateY(48px);transform:var(--tr)}
.milestone{
  position:relative;
  display:grid;place-items:center;
  width:64px;height:64px;border-radius:50%;
  margin:-32px auto 12px;
  background:var(--paper-2);
  box-shadow:var(--shadow-soft);
}
.milestone::before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px dashed var(--stitch)}
.milestone i{font-style:normal;font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--navy)}
.milestone-flag{
  position:absolute;top:-7px;right:-9px;
  width:26px;height:26px;padding:5px;border-radius:50%;
  background:var(--coral);color:#FFF9F0;fill:currentColor;
  box-shadow:0 2px 5px rgba(96,64,24,.3);
}
.step h3{font-size:1.13rem;font-weight:700;margin:4px 0 6px}
.step p{font-size:.97rem;line-height:1.55;margin:0}

/* ---------- why paper ---------- */

.section--why{background:var(--paper-3)}
.section--why .tear{color:var(--paper-3)}
.compare{
  display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;
  max-width:1000px;margin:56px auto 0;
}
.compare-card{border-radius:16px;padding:32px 30px}
.compare-card h3{font-size:1.3rem;margin-bottom:16px}
.compare-card li{
  display:flex;align-items:center;gap:12px;
  padding:7px 0;font-size:1.02rem;font-weight:600;
}
.compare-card--them{
  background:#ECE8DC;color:#6E6A5E;
  border:2px solid #D9D4C4;
  --tr:rotate(-.6deg);
  transform:var(--tr);
  box-shadow:0 4px 10px rgba(96,64,24,.08);
}
.compare-card--them h3{color:#6E6A5E}
.compare-card--them .ico{color:#A8A294}
.compare-card--us{
  position:relative;
  background:var(--card);
  box-shadow:var(--shadow-warm);
  --tr:rotate(.8deg) scale(1.03);
  transform:var(--tr);
  padding:36px 32px;
}
.compare-card--us::before{
  content:"";position:absolute;inset:8px;border-radius:10px;
  border:2px dashed var(--stitch);opacity:.55;pointer-events:none;
}
.compare-card--us::after{
  content:"";position:absolute;inset:14px -12px -12px 14px;
  background:var(--paper-3);
  border-radius:16px;z-index:-1;transform:rotate(1.2deg);
  box-shadow:var(--shadow-soft);
}
.compare-card--us .ico{color:var(--forest)}
.compare-card--us li{color:var(--navy);font-weight:700}
.gold-badge{
  position:absolute;top:-30px;right:-16px;z-index:2;
  width:96px;height:96px;border-radius:50%;
  background:var(--sun);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transform:rotate(7deg);
  box-shadow:0 6px 14px -4px rgba(96,64,24,.35), inset 0 0 0 5px rgba(255,253,244,.4);
}
.gold-badge::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed rgba(22,54,92,.35)}
.gold-badge svg{width:26px;height:26px}
.gold-badge em{
  font-style:normal;font-family:var(--font-hand);font-weight:700;
  font-size:.56rem;line-height:1.15;color:var(--navy);text-align:center;
  max-width:70px;
}
.compare-vs{
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--paper-2);
  font-family:var(--font-hand);font-weight:700;font-size:1.05rem;color:var(--navy);
  border:2px dashed var(--stitch);
  box-shadow:var(--shadow-soft);
}

/* ---------- journey map ---------- */

.section--journey{background:#F3EDD6}
.section--journey .tear{color:#F3EDD6}
.map-frame{
  position:relative;
  background:var(--card);border-radius:24px;
  box-shadow:var(--shadow-warm);
  padding:13px;margin-top:52px;
}
.map-frame::before{content:"";position:absolute;inset:6px;border-radius:18px;border:2px dashed var(--stitch);opacity:.4;pointer-events:none;z-index:2}
.map-scroll{overflow-x:auto;border-radius:14px;-webkit-overflow-scrolling:touch}
.map-canvas{position:relative;min-width:980px}
.map-canvas img{display:block;width:100%;height:auto;border-radius:14px}
.map-pin{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-100%);
  display:flex;align-items:center;gap:7px;
  background:var(--card);
  border:2px dashed rgba(22,54,92,.3);
  border-radius:12px;
  padding:6px 11px 6px 7px;
  font-family:var(--font-hand);font-weight:600;font-size:.8rem;line-height:1.2;
  color:var(--navy);white-space:nowrap;
  box-shadow:0 5px 12px rgba(60,40,12,.3);
}
.map-pin::after{
  content:"";position:absolute;left:16px;bottom:-8px;
  border:8px solid transparent;border-top-color:var(--card);border-bottom:0;
}
.map-pin:nth-of-type(odd){rotate:-1.6deg}
.map-pin:nth-of-type(even){rotate:1.4deg}
.pin-dot{
  display:grid;place-items:center;flex:none;
  width:23px;height:23px;border-radius:50%;
  color:#FFF9F0;
}
.pin-dot .ico{width:13px;height:13px}
.map-pin.is-done .pin-dot,.pin-dot--done{background:var(--sun);color:var(--kraft-deep)}
.map-pin.is-here{z-index:3;font-weight:700;background:#FFF3EC;border-color:rgba(233,116,81,.6);animation:pulse 2.4s infinite}
.map-pin.is-here .pin-dot,.pin-dot--here{background:var(--coral)}
.map-pin.is-here::after{border-top-color:#FFF3EC}
.map-pin.is-locked{background:#F2EFE4;color:#77725F;border-color:rgba(110,106,94,.35)}
.map-pin.is-locked .pin-dot,.pin-dot--locked{background:#A9A493}
.map-pin.is-locked::after{border-top-color:#F2EFE4}
.map-pin.is-goal{background:#FFF6D6;border-color:rgba(196,150,30,.5);z-index:2}
.map-pin.is-goal .pin-dot{background:var(--navy);color:var(--sun)}
.map-pin.is-goal::after{border-top-color:#FFF6D6}
@keyframes pulse{
  0%{box-shadow:0 5px 12px rgba(60,40,12,.3), 0 0 0 0 rgba(233,116,81,.5)}
  70%{box-shadow:0 5px 12px rgba(60,40,12,.3), 0 0 0 14px rgba(233,116,81,0)}
  100%{box-shadow:0 5px 12px rgba(60,40,12,.3), 0 0 0 0 rgba(233,116,81,0)}
}
.map-hint{
  display:none;text-align:center;margin:10px 0 0;
  font-family:var(--font-hand);font-weight:600;font-size:.9rem;color:var(--ink-soft);
}
.map-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;
  margin-top:26px;font-weight:800;font-size:.95rem;color:var(--navy);
}
.map-legend li{display:flex;align-items:center;gap:9px}

/* ---------- pip ---------- */

.section--pip{background:#EEF0DC}
.section--pip .tear{color:#EEF0DC}
.pip-grid{
  display:grid;grid-template-columns:.88fr 1.12fr;
  gap:clamp(36px,5vw,72px);align-items:center;
}
.pip-visual{text-align:center;position:relative}
.pip-owl{
  width:min(330px,72vw);height:auto;
  filter:drop-shadow(0 16px 18px rgba(76,48,16,.25));
}
.speech-bubble{
  position:relative;
  background:var(--card);border-radius:18px;
  padding:18px 22px;margin:0 auto 30px;max-width:340px;
  font-family:var(--font-hand);font-weight:600;font-size:1.06rem;line-height:1.5;color:var(--navy);
  box-shadow:var(--shadow-warm);
  transform:rotate(-1deg);
}
.speech-bubble::after{
  content:"";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  border:12px solid transparent;border-top-color:var(--card);border-bottom:0;
}
.pip-tag{
  display:inline-block;margin-top:14px;
  font-family:var(--font-hand);font-weight:700;font-size:1.05rem;color:var(--navy);
  background:var(--paper-3);border:2px dashed var(--stitch);
  border-radius:10px;padding:.3em 1.1em;
  transform:rotate(-2deg);
  box-shadow:var(--shadow-soft);
}
.check-list{
  display:grid;grid-template-columns:1fr 1fr;gap:15px 22px;
  padding:28px 30px;margin-top:26px;
  text-align:left;
}
.check-list li{display:flex;align-items:flex-start;gap:11px;font-weight:700;color:var(--navy);line-height:1.4}
.check-list .ico{
  width:23px;height:23px;padding:5px;border-radius:50%;
  background:var(--leaf);color:#FFF9F0;margin-top:1px;
}

/* ---------- parent dashboard ---------- */

.section--parents{background:var(--paper)}
.section--parents .tear{color:var(--paper)}
.dash{
  position:relative;
  background:var(--card);border-radius:22px;
  box-shadow:var(--shadow-warm);
  padding:24px 24px 26px;
  max-width:1080px;margin:56px auto 44px;
  --tr:rotate(-.35deg);
  transform:var(--tr);
}
.dash::before{content:"";position:absolute;inset:8px;border-radius:15px;border:2px dashed var(--stitch);opacity:.35;pointer-events:none}
.dash-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:2px 6px 14px;border-bottom:2px dashed rgba(22,54,92,.18);
}
.dash-title{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:var(--navy)}
.dash-child{
  font-family:var(--font-hand);font-weight:600;font-size:.9rem;color:var(--cream-text);
  background:var(--kraft-deep);border-radius:9px;padding:.3em .85em;transform:rotate(1.2deg);
}
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.dash-card{
  background:#FFFEF9;border:1.5px dashed rgba(22,54,92,.16);
  border-radius:14px;padding:16px 18px;
  box-shadow:0 3px 8px rgba(96,64,24,.07);
}
.dash-card h3{font-size:.94rem;font-weight:700;margin-bottom:10px}
.bars{display:flex;align-items:flex-end;gap:7px;height:72px;padding:0 2px}
.bars i{
  flex:1;height:var(--h);
  background:linear-gradient(180deg,#93CE7D,var(--leaf));
  border-radius:6px 6px 3px 3px;
  box-shadow:inset 0 -3px 0 rgba(79,138,91,.4);
}
.dash-note{font-size:.85rem;color:var(--ink-soft);margin:10px 0 0}
.dash-note--good{display:flex;align-items:center;gap:7px;color:var(--forest-deep);font-weight:800}
.skill-chips{display:flex;flex-wrap:wrap;gap:8px}
.skill-chips li{
  display:flex;align-items:center;gap:5px;
  background:#E9F3E2;border:1.5px dashed rgba(79,138,91,.4);
  color:var(--forest-deep);font-weight:800;font-size:.85rem;
  border-radius:10px;padding:.35em .7em;
}
.skill-chips .ico{width:.8em;height:.8em}
.align-meter{
  position:relative;height:15px;border-radius:99px;
  background:#EADFC2;margin:16px 0 6px;
}
.align-fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#93CE7D,var(--leaf))}
.align-marker{
  position:absolute;top:-5px;transform:translateX(-50%);
  width:24px;height:24px;border-radius:50%;
  background:var(--sun);border:3px solid var(--card);
  box-shadow:0 2px 6px rgba(96,64,24,.35);
}
.dash-list li{display:flex;align-items:center;gap:9px;padding:4px 0;font-weight:700;color:var(--navy);font-size:.93rem}
.dash-list .ico{color:var(--forest)}
.dash-card--support{background:#FBF0E9;border-color:rgba(233,116,81,.35)}
.support-item{font-family:var(--font-hand);font-weight:600;font-size:1rem;color:var(--navy);margin:0 0 4px}
.dash-card--feedback{grid-column:span 2;background:#F5F7EC;border-color:rgba(79,138,91,.3)}
.dash-quote{font-family:var(--font-hand);font-weight:600;font-size:.97rem;line-height:1.6;color:var(--navy);margin:0}
.focus-item{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--navy);font-size:.95rem;margin:0}
.ico-lg{width:27px;height:34px;flex:none}
.float-chip--dash{top:-18px;right:26px;transform:rotate(2deg)}

/* ---------- rewards ---------- */

.section--rewards{background:var(--paper-2)}
.section--rewards .tear{color:var(--paper-2)}
.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px}
.reward-card{
  position:relative;
  background:var(--card);border-radius:16px;
  box-shadow:var(--shadow-warm);
  padding:32px 24px 26px;text-align:center;
}
.reward-card::before{content:"";position:absolute;inset:7px;border-radius:10px;border:2px dashed var(--stitch);opacity:.45;pointer-events:none}
.reward-card:nth-child(odd){--tr:rotate(-.5deg);transform:var(--tr)}
.reward-card:nth-child(even){--tr:rotate(.55deg);transform:var(--tr)}
.reward-badge{position:relative;display:block;width:88px;height:88px;margin:0 auto 16px}
.reward-badge::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:32px;height:32px;border-radius:50%;background:var(--paper-3);
  box-shadow:
    0 -31px 0 var(--paper-3), 0 31px 0 var(--paper-3),
    -31px 0 0 var(--paper-3), 31px 0 0 var(--paper-3),
    -22px -22px 0 var(--paper-3), 22px -22px 0 var(--paper-3),
    -22px 22px 0 var(--paper-3), 22px 22px 0 var(--paper-3);
}
.reward-badge::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--card);
  border:2px dashed var(--stitch);
  box-shadow:0 4px 10px rgba(96,64,24,.18);
}
.reward-ico{position:absolute;left:50%;top:50%;translate:-50% -50%;width:44px;height:44px;z-index:1}
.reward-card h3{font-size:1.22rem;margin-bottom:6px}
.reward-card p{font-size:.96rem;line-height:1.55;margin:0}
.featured-reward{
  display:flex;align-items:center;gap:38px;
  max-width:840px;margin:52px auto 0;
  padding:34px 40px;
  --tr:rotate(-.4deg);
  transform:var(--tr);
}
.featured-plane{
  width:170px;height:106px;flex:none;
  filter:drop-shadow(0 10px 12px rgba(76,48,16,.25));
  animation:drift 6s ease-in-out infinite alternate;
}
.featured-copy h3{font-size:1.5rem;margin:10px 0 2px}
.featured-note{margin:0;font-size:1rem;color:var(--ink)}
.featured-note strong{color:var(--forest-deep)}

/* ---------- benefits ---------- */

.section--benefits{background:var(--paper-3)}
.section--benefits .tear{color:var(--paper-3)}
.benefit-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;
  max-width:980px;margin:52px auto 0;
}
.benefit-card{padding:34px 36px}
.benefit-card h3{display:flex;align-items:center;gap:10px;font-size:1.32rem;margin-bottom:18px}
.benefit-card li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-weight:700;color:var(--navy);line-height:1.45}
.benefit-card .ico{flex:none}
.benefit-card li .ico{
  width:23px;height:23px;padding:5px;border-radius:50%;
  background:var(--leaf);color:#FFF9F0;margin-top:2px;
}
.benefit-card--kids{--tr:rotate(-.6deg);transform:var(--tr)}
.benefit-card--parents{--tr:rotate(.6deg);transform:var(--tr);background:#FFF9EA}
.benefit-card--parents li .ico{background:var(--navy)}
.benefit-card h3 .ico{width:24px;height:24px;padding:0;background:none}
.benefit-card--parents h3 .ico{color:var(--navy)}

/* ---------- final CTA / signup ---------- */

.section--signup{background:var(--navy);padding-bottom:150px}
.section--signup .tear{color:var(--navy)}
.night-stars{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(rgba(247,238,220,.9) 1.4px, transparent 1.8px),
    radial-gradient(rgba(247,238,220,.55) 1px, transparent 1.4px),
    radial-gradient(rgba(244,197,66,.75) 1.7px, transparent 2.2px);
  background-size:210px 180px, 120px 140px, 340px 300px;
  background-position:30px 40px, 70px 90px, 160px 120px;
}
.on-night{color:var(--cream-text)}
h2.on-night{color:var(--cream-text)}
.section--signup .section-body{color:rgba(247,238,220,.88)}
.signup{
  max-width:780px;margin:48px auto 0;
  padding:40px 44px 36px;
  --tr:rotate(-.4deg);
  transform:var(--tr);
}
.signup-strap{
  text-align:center;font-family:var(--font-hand);font-weight:600;
  font-size:1.08rem;color:var(--navy);margin-bottom:26px;
}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.field{margin:0}
.field label{display:block;font-weight:800;font-size:.94rem;color:var(--navy);margin-bottom:7px}
.field input,.field select{
  width:100%;
  font-family:var(--font-body);font-size:1.02rem;color:var(--ink);
  background:#FBF6E9;
  border:2px dashed rgba(22,54,92,.35);
  border-radius:12px;
  padding:13px 15px;min-height:52px;
}
.field input::placeholder{color:#A79E8B}
.field input:focus,.field select:focus{
  outline:none;border:2px solid var(--navy);
  box-shadow:0 0 0 4px rgba(125,188,232,.35);
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M2 2l6 6 6-6' fill='none' stroke='%2316365C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:44px;
}
.field--company{position:absolute;left:-9999px;top:auto}
.form-error{
  background:#FBE3DA;color:#9E3517;font-weight:800;
  border-radius:11px;padding:12px 16px;margin:16px 0 0;
  border:2px dashed rgba(194,85,56,.4);
}
.signup .btn--wide{margin-top:24px}
.reassure{text-align:center;font-size:.92rem;color:var(--ink-soft);margin:16px 0 0}
.signup.is-submitted .signup-strap,
.signup.is-submitted .field-grid,
.signup.is-submitted .btn--wide,
.signup.is-submitted .form-error,
.signup.is-submitted .reassure{display:none}
.signup-success{text-align:center;padding:26px 0 12px}
.signup-success h3{font-size:1.6rem;margin:14px 0 8px}
.signup-success p{max-width:44ch;margin:0 auto;color:var(--ink)}
.success-plane{width:140px;height:88px;animation:fly-in 1.4s cubic-bezier(.2,.7,.3,1) both}
@keyframes fly-in{
  from{translate:-70px 40px;rotate:-14deg;opacity:0}
  to{translate:0 0;rotate:2deg;opacity:1}
}
.night-forest{position:absolute;left:0;right:0;bottom:-2px;pointer-events:none;line-height:0}
.night-forest svg{display:block;width:100%;height:110px}

/* ---------- FAQ ---------- */

.section--faq{background:var(--paper)}
.section--faq .tear{color:var(--paper)}
.faq-shell{width:min(780px,92vw);margin-inline:auto;display:grid;gap:16px;margin-top:44px}
.faq{padding:0}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  list-style:none;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:1.07rem;color:var(--navy);
  padding:20px 24px;min-height:44px;
  border-radius:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq-mark{position:relative;flex:none;width:26px;height:26px}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:16px;height:3.5px;border-radius:3px;background:var(--coral);
  transition:rotate .25s ease;
}
.faq-mark::after{rotate:90deg}
.faq[open] .faq-mark::after{rotate:0deg}
.faq[open] .faq-mark::before{rotate:180deg}
.faq p{padding:0 56px 22px 24px;margin:0;line-height:1.68}
.faq[open] summary{padding-bottom:12px}
.section--faq .center{margin-top:36px}

/* ---------- footer ---------- */

.site-footer{background:#EBDDBE;position:relative}
.footer-forest svg{display:block;width:100%;height:130px}
.footer-row{text-align:center;padding:10px 0 46px}
.logo--footer{justify-content:center;margin-bottom:8px}
.footer-tag{
  font-family:var(--font-hand);font-weight:600;color:var(--navy);
  margin:4px 0 10px;
}
.footer-fine{font-size:.87rem;color:var(--ink-soft);margin:0}

/* ---------- sticky mobile CTA ---------- */

.sticky-cta{
  position:fixed;left:14px;right:14px;z-index:60;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  animation:rise .35s ease both;
}
.sticky-cta[hidden]{display:none}
.sticky-cta .btn{box-shadow:0 5px 0 var(--coral-deep), 0 18px 30px -6px rgba(60,36,10,.5)}
@keyframes rise{from{translate:0 70px;opacity:0}to{translate:0 0;opacity:1}}
@media (min-width:861px){.sticky-cta{display:none !important}}

/* ---------- reveal animations ---------- */

html.js .reveal{opacity:0;transform:translateY(26px)}
html.js .reveal.in{
  opacity:1;transform:var(--tr, none);
  transition:opacity .7s ease, transform .75s cubic-bezier(.2,.85,.3,1);
}
html.js .reveal[data-d="1"].in{transition-delay:.08s}
html.js .reveal[data-d="2"].in{transition-delay:.16s}
html.js .reveal[data-d="3"].in{transition-delay:.24s}
html.js .reveal[data-d="4"].in{transition-delay:.32s}
html.js .reveal[data-d="5"].in{transition-delay:.4s}

/* ---------- responsive ---------- */

section{scroll-margin-top:84px}

@media (max-width:1080px){
  .steps{gap:18px}
  .float-chip--star{right:-10px}
  .float-chip--track{left:-14px}
}

@media (max-width:960px){
  .hero{padding-top:96px}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-copy{text-align:center}
  .lead{margin-inline:auto}
  .cta-row,.badge-row{justify-content:center}
  .trust-line{justify-content:center}
  .hero-visual{margin-top:8px}
  .steps{grid-template-columns:1fr 1fr;row-gap:56px;margin-top:72px}
  .step--down{--tr:none}
  .steps-trail{display:none}
  .pip-grid{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr;max-width:560px}
  .compare-vs{margin:0 auto}
  .compare-card--us{--tr:rotate(.8deg)}
  .dash-grid{grid-template-columns:1fr 1fr}
  .benefit-grid{grid-template-columns:1fr;max-width:600px}
  .map-hint{display:block}
  .header-cta{display:none}
}

@media (max-width:660px){
  .section{padding:66px 0 78px}
  .pain-grid{grid-template-columns:1fr;gap:22px;max-width:440px;margin-inline:auto}
  .pain-card:nth-child(2){--tr:rotate(.7deg)}
  .steps{grid-template-columns:1fr;row-gap:20px;margin-top:44px;padding-left:6px}
  .steps::before{
    content:"";position:absolute;left:37px;top:30px;bottom:40px;
    border-left:3px dashed rgba(22,54,92,.3);
  }
  .step{
    display:grid;grid-template-columns:64px 1fr;column-gap:16px;
    text-align:left;padding:18px 18px 18px 12px;
  }
  .step .milestone{margin:0;grid-row:1 / span 2;width:56px;height:56px}
  .step h3{margin:0 0 4px}
  .reward-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto;gap:22px}
  .dash-grid{grid-template-columns:1fr}
  .dash-card--feedback{grid-column:auto}
  .featured-reward{flex-direction:column;text-align:center;gap:18px;padding:30px 24px}
  .featured-reward .eyebrow{margin-bottom:6px}
  .app-progress--lg{margin-inline:auto}
  .field-grid{grid-template-columns:1fr}
  .signup{padding:30px 22px 28px}
  .float-chip{font-size:.78rem}
  .float-chip--star{top:-14px;right:0}
  .float-chip--track{top:44%;left:-8px}
  .hero-plane-fly{width:76px;top:-30px;left:-14px}
  .float-chip--dash{position:static;display:inline-flex;margin:14px 6px 0;transform:rotate(0);white-space:normal}
  .check-list{grid-template-columns:1fr;gap:12px;padding:22px 22px}
  .faq p{padding-right:24px}
  .footer-forest svg{height:92px}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.js .reveal{opacity:1;transform:none}
}