/* My Potty Train — coming-soon site (Oct 2026) */
:root{
  --navy:#22395a;
  --blue:#2f6ea8;
  --red:#e2513b;
  --red-dark:#c23f2b;
  --wood:#d8b483;
  --cream:#f8eed6;
  --paper:#fffaf0;
  --ink:#2a3442;
  --muted:#5d6a78;
  --font-display:"peachy-keen-jf","Fredoka",ui-rounded,system-ui,sans-serif;
  --font-body:"abadi","Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* book serif for "the method" copy: Adobe kit name first, then the copy built into every Mac/iPhone/iPad */
  --font-serif:"iowan-old-style","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
body{overflow-x:hidden}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--navy);line-height:1.15;margin:0 0 .4em}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 16px 72px;overflow:hidden;
  background:#9fb873 url("img/bg-sm.jpg") center 40%/cover no-repeat}
@media (min-width:700px){.hero{background-image:url("img/bg.jpg")}}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(255,248,226,.55) 0%,rgba(255,248,226,.18) 45%,rgba(0,0,0,0) 72%);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:linear-gradient(180deg,rgba(248,238,214,0),var(--cream));pointer-events:none}
.hero > *{position:relative;z-index:1}
.hero .logo{width:min(560px,86vw);filter:drop-shadow(0 8px 18px rgba(30,40,20,.35))}
.tagline{display:inline-block;margin:14px 0 0;padding:6px 18px;border-radius:999px;background:rgba(255,250,238,.9);
  font-family:var(--font-display);font-size:clamp(18px,3.2vw,28px);color:var(--red);box-shadow:0 6px 18px rgba(40,50,20,.22)}
.ticket{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 22px;border-radius:999px;background:var(--blue);
  color:#fff;font-family:var(--font-display);font-size:clamp(18px,2.6vw,24px);letter-spacing:.02em;
  box-shadow:0 4px 0 #1f4f7c,0 10px 24px rgba(20,40,70,.3);border:2px solid #fff}
.ticket .dot{width:9px;height:9px;border-radius:50%;background:#ffd76a;box-shadow:0 0 0 3px rgba(255,215,106,.35)}
.hero.short{min-height:min(52vh,460px);padding-bottom:56px}
.hero.short .logo{width:min(400px,72vw)}

/* ---------- sections ---------- */
main{padding:0 16px}
.wrap{max-width:1040px;margin:0 auto}
.panel{background:var(--paper);border-radius:22px;box-shadow:0 2px 0 rgba(34,57,90,.08),0 18px 40px rgba(34,57,90,.12);
  border:1px solid rgba(34,57,90,.08);padding:clamp(24px,4vw,44px)}
.intro{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;margin-top:-28px}
@media (min-width:820px){.intro{grid-template-columns:1.1fr .9fr;gap:44px}}
.intro h2{font-size:clamp(28px,4vw,40px)}
.intro p{margin:0 0 1em;color:var(--ink)}
.intro .who{color:var(--muted);font-size:16px;margin-bottom:0}
.box{justify-self:center;width:min(380px,78vw);transform:rotate(2.5deg);border-radius:6px;
  box-shadow:0 2px 0 rgba(0,0,0,.05),0 22px 40px rgba(34,57,90,.28)}

/* ---------- signup ---------- */
.signup{margin:34px auto 0;text-align:center;background:var(--navy);color:#eef3fa;border-radius:22px;padding:clamp(26px,4vw,40px) clamp(18px,4vw,44px);
  box-shadow:0 18px 40px rgba(34,57,90,.25);position:relative;overflow:hidden}
.signup::before,.signup::after{content:"";position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--cream)}
.signup::before{left:-17px}.signup::after{right:-17px}
.signup h2{color:#fff;font-size:clamp(26px,3.6vw,34px)}
.signup p{margin:0 auto 18px;max-width:520px;color:#cfdbea}
.signup form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:540px;margin:0 auto}
.signup input[type=email]{flex:1 1 240px;min-width:0;font:inherit;font-size:17px;padding:13px 16px;border-radius:12px;border:2px solid transparent;background:#fff;color:var(--ink)}
.signup input[type=email]:focus{outline:none;border-color:#ffd76a}
.signup button{flex:0 0 auto;font-family:var(--font-display);font-size:19px;padding:12px 22px;border:0;border-radius:12px;background:var(--red);color:#fff;cursor:pointer;
  box-shadow:0 4px 0 var(--red-dark);transition:transform .1s ease,box-shadow .1s ease}
.signup button:hover{background:#ea5d47}
.signup button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-dark)}
.signup .fine{margin:14px auto 0;font-size:14px;color:#9fb2c9}
.hp{position:absolute!important;left:-9999px!important}

/* ---------- fun page ---------- */
.video-card{margin-top:-28px;text-align:center}
.video-card h2{font-size:clamp(28px,4.2vw,42px)}
.video{position:relative;aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;background:#13202f;box-shadow:0 14px 30px rgba(20,32,48,.25)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card .lead{margin:0 auto 22px;max-width:620px;color:var(--muted)}
.soon{margin-top:26px;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){.soon{grid-template-columns:1fr 1fr}}
.soon .tile{border:2px dashed rgba(34,57,90,.22);border-radius:16px;padding:20px 22px;text-align:left;background:rgba(248,238,214,.45)}
.soon .tile h3{font-size:22px;margin-bottom:.2em}
.soon .tile p{margin:0;color:var(--muted);font-size:16px}

.cta-row{text-align:center;margin:30px 0 0}
.btn{display:inline-block;font-family:var(--font-display);font-size:20px;text-decoration:none;color:#fff;background:var(--blue);padding:12px 24px;border-radius:14px;
  box-shadow:0 4px 0 #1f4f7c}
.btn:hover{background:#3779b6}
.btn.alt{background:#fff;color:var(--navy);box-shadow:0 4px 0 rgba(34,57,90,.25);border:2px solid rgba(34,57,90,.15)}

/* ---------- footer + Two-Ply ---------- */
footer{position:relative;margin-top:56px;padding:34px 16px 40px;text-align:center;color:var(--muted);font-size:15px;border-top:1px solid rgba(34,57,90,.12)}
footer .route{font-family:var(--font-display);color:var(--navy);font-size:20px;margin-bottom:8px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:10px 0}
footer a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(34,57,90,.25)}
footer a:hover{color:var(--red);border-color:var(--red)}
.twoply{position:absolute;right:max(10px,4vw);top:-58px;width:78px;cursor:pointer;background:none;border:0;padding:0;
  transform:rotate(8deg);transition:transform .25s ease}
.twoply img{width:100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.twoply:hover,.twoply:focus-visible{transform:rotate(-4deg) translateY(-6px) scale(1.06)}
.twoply-msg{position:absolute;right:max(10px,4vw);top:-96px;background:#fff;color:var(--navy);font-family:var(--font-display);font-size:16px;padding:7px 12px;border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.twoply-msg.on{opacity:1;transform:none}

.center-page{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:40px 16px;text-align:center}
.center-page .panel{max-width:620px}
.center-page .logo-sm{width:min(260px,60vw);margin:0 auto 18px}

@media (max-width:600px){
  .twoply{width:52px;top:-44px;right:12px}
  .twoply-msg{top:-82px;right:8px;font-size:15px}
  footer{padding-top:40px}
}
/* ---------- /fun: the end frame header, names rising along the diagonal ----------
   The picture is anchored to the bottom of the header. Desktop crops sky off the top so the train
   sits higher; phones show the whole frame. Names are placed from the picture's bottom edge
   (in units of its width), so they stay over their cars either way. */
.funhero{position:relative;width:100%;aspect-ratio:1.6;overflow:hidden;background:#3f74d0;container-type:inline-size}
.funhero-art{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block}
.funhero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:8%;background:linear-gradient(180deg,rgba(248,238,214,0),var(--cream));pointer-events:none}
.funhero-logo{position:absolute;left:50%;top:5%;width:25%;z-index:2}
.funhero-logo img{display:block;width:100%;height:auto}
.funhero-welcome{position:absolute;left:50%;top:26%;z-index:2;margin:0;white-space:nowrap;
  padding:.18em .95em .22em;border-radius:999px;background:rgba(255,250,238,.92);color:var(--red);line-height:1.2;
  font-family:"peachy-keen-jf",var(--font-display);font-size:clamp(15px,1.75vw,26px);letter-spacing:.01em;box-shadow:0 5px 14px rgba(20,40,90,.18)}
.funhero .car-name{position:absolute;left:var(--x);bottom:calc(var(--b) * 76.25cqw);width:var(--w);height:auto;z-index:2;
  transform:translate(-50%,22px) rotate(var(--r,0deg));opacity:0;filter:drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 10px rgba(255,255,255,.55));
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.funhero-logo,.funhero-welcome{opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.funhero-logo{transform:translate(-50%,18px)}
.funhero-welcome{transform:translate(-50%,12px)}
.funhero.named .funhero-logo{opacity:1;transform:translate(-50%,0)}
.funhero.named .funhero-welcome{opacity:1;transform:translate(-50%,0);transition-delay:.35s}
.funhero.named .car-name{opacity:1;transform:translate(-50%,0) rotate(var(--r,0deg))}
.funhero.named .car-name:nth-of-type(2){transition-delay:.9s}
.funhero.named .car-name:nth-of-type(3){transition-delay:1.3s}
.funhero.named .car-name:nth-of-type(4){transition-delay:1.7s}
.funhero.named .car-name:nth-of-type(5){transition-delay:2.1s}
.funhero.named .car-name:nth-of-type(6){transition-delay:2.5s}
@media (max-width:700px){
  .funhero{aspect-ratio:2000/1525}
  .funhero-logo{width:42%;top:2%}
  .funhero-welcome{top:29%;font-size:13px}
}
/* ---------- /fun: full-width bands (the header melts into the white film section) ---------- */
.fun-page{--band-white:#fffdf8}
.fun-page main{padding:0}
.fun-page .funhero::after{background:linear-gradient(180deg,rgba(255,253,248,0),var(--band-white))}
.fun-page .band{padding:clamp(36px,5.5vw,72px) 16px}
.fun-page .band > .wrap{max-width:960px;margin:0 auto}
.fun-page .band-white{background:var(--band-white);margin:0;text-align:center}
.fun-page .band-white h1{font-size:clamp(28px,4vw,44px);margin-bottom:.7em}
.fun-page .band-navy{margin:0;border-radius:0;background:var(--navy)}
.fun-page .band-navy::before,.fun-page .band-navy::after{display:none}
.fun-page .cta-row{margin:0;padding:34px 16px 6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* ---------- /fun: the method block under the train picture ----------
   Default = Abadi (already the body face). Add class "serif" to the section (or open /fun/?iowan) to try Iowan Old Style. */
.fun-page .method{padding-bottom:0}
.fun-page .method .wrap{max-width:680px}
.method-eyebrow{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 1.1em}
.method p{font-family:var(--font-body);font-size:clamp(19px,2vw,22px);line-height:1.6;color:var(--navy);margin:0 0 .9em;text-wrap:pretty}
.method .method-cta{color:var(--ink);font-size:clamp(17px,1.7vw,19px);margin-bottom:0}
.method .method-lead strong{font-weight:700}
.method .method-sub{color:var(--navy);font-size:clamp(17px,1.7vw,19px);margin-bottom:0}
.method-fl{display:block;width:min(575px,88%);height:auto;margin:0 auto}
.method-fl-top{margin-bottom:clamp(14px,1.75vw,22px)}
.method-fl-bot{margin-top:clamp(16px,2vw,25px);margin-bottom:clamp(14px,1.9vw,24px)}
.method.serif .method-sub{font-size:clamp(17px,1.8vw,20px)}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.method .method-cta a{color:var(--red);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(226,81,59,.45)}
.method .method-cta a:hover{border-bottom-color:var(--red)}
.method.serif p{font-family:var(--font-serif);font-size:clamp(19px,2.1vw,23px);font-feature-settings:"onum" 1,"kern" 1}
.method.serif .method-cta{font-style:italic;font-size:clamp(17px,1.8vw,20px)}
.method.serif .method-cta a{font-weight:inherit}
.method-rule{display:block;width:64px;height:3px;border-radius:3px;margin:clamp(30px,4vw,44px) auto 0;background:var(--wood)}
.fun-page .method + .video-card{padding-top:clamp(28px,4vw,48px)}
#signup-h{scroll-margin-top:24px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ---------- /fun: the method block as a full-width tan band (Oct 9) ----------
   The train picture fades into the tan; the band ends with a straight edge where the white film section begins. */
.fun-page{--band-tan:#e4cb9b}
.fun-page .funhero::after{background:linear-gradient(180deg,rgba(228,203,155,0),var(--band-tan))}
.fun-page .method{background:var(--band-tan);padding-bottom:clamp(36px,5vw,60px)}
.fun-page .method .method-rule{display:none}
.method-eyebrow{color:#9e2f1c}
.method p{color:var(--navy)}
.method .method-cta{color:var(--navy)}
.method .method-cta a{color:#9e2f1c;border-bottom-color:rgba(158,47,28,.5)}
.method .method-cta a:hover{border-bottom-color:#9e2f1c}
.fun-page .method + .video-card{padding-top:clamp(40px,5.5vw,72px)}
/* ---------- /fun: the kit, beneath the video (tan band, like the method block) ---------- */
.fun-page .kit{background:var(--band-tan);text-align:center}
.fun-page .kit .wrap{max-width:680px}
.kit-shot{display:block;margin:0 auto;padding:0;border:0;background:none;cursor:pointer;width:min(360px,74vw);
  transform:rotate(-2deg);transition:transform .25s ease}
.kit-shot img{width:100%;height:auto;border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.05),0 22px 40px rgba(34,57,90,.28)}
.kit-shot:hover,.kit-shot:focus-visible{transform:rotate(1deg) translateY(-4px) scale(1.02)}
.kit-shot:focus-visible{outline:3px solid var(--navy);outline-offset:6px;border-radius:8px}
.fun-page .kit .kit-cta{padding:clamp(24px,3.5vw,34px) 0 0}
.kit-cta .btn{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.45em}
.kit-cta .spin{display:inline-block;font-size:1.15em;line-height:1;transition:transform .5s ease}
.kit-cta .btn:hover .spin{transform:rotate(360deg)}
.kit-cta .btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
/* the pop-up */
html.kit-open,html.kit-open body{overflow:hidden}
.kit-pop{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:clamp(8px,3vw,32px);
  background:rgba(14,20,34,.78);opacity:0;transition:opacity .25s ease}
.kit-pop[hidden]{display:none}
.kit-pop.on{opacity:1}
.kit-frame{position:relative;width:min(1100px,100%);height:min(780px,100%);border-radius:16px;overflow:hidden;background:#f4f1e8;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.kit-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.kit-close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--navy);color:#fff;font-size:26px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.kit-close:hover{background:var(--red)}
.kit-close:focus-visible{outline:3px solid #ffd76a;outline-offset:2px}
@media (max-width:600px){ .kit-pop{padding:0} .kit-frame{border-radius:0;height:100%} }