/* /price-it-out, /thanks-price-it-out, /free-lesson/read. Thursday Oct 22 release (from draft price_it_out_v1).
   Loaded AFTER styles.css, so it only adds; the main stylesheet is untouched.
   Rules: light palette, black lettering, big high-contrast text, email only. */
.pio{background:var(--cream);color:#000}
.pio section{padding:2.6rem 0}
.pio .wrap{max-width:820px}
.pio .eyebrow{color:#2f5a12;font-size:1rem}
.pio h1{font-family:var(--display);font-weight:400;color:#000;font-size:clamp(2.4rem,8.5vw,4.2rem);line-height:1.05;letter-spacing:.015em;margin:.3rem 0 .8rem;text-shadow:var(--edge-light)}
.pio h2{color:#000}
.pio-sub{display:block;font-family:var(--support);font-weight:900;font-size:clamp(1rem,3.4vw,1.25rem);letter-spacing:.1em;text-transform:uppercase;margin-top:.7rem;text-shadow:none;color:#000}
.pio .lead{font-size:clamp(1.15rem,3.6vw,1.35rem);line-height:1.55;color:#000;max-width:46ch}
.pio-hero{text-align:center;padding-top:3rem!important}
.pio-hero .lead{margin:0 auto}
.pio-free{display:inline-block;font-family:var(--label);letter-spacing:.06em;background:var(--avocado);color:#000;padding:.3rem .9rem;border-radius:999px;font-size:1rem;margin:0 0 .9rem;border:2px solid #000}
.pio-hero .btn{margin-top:1.4rem;font-size:1.15rem;padding:1rem 1.6rem;border:2px solid #000}

/* The four traps */
.traps{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.9rem;counter-reset:t}
@media(min-width:760px){.traps{grid-template-columns:1fr 1fr}}
.traps li{counter-increment:t;position:relative;background:#fff;border:2px solid #000;border-radius:18px;padding:1.1rem 1.2rem 1.2rem 4rem;font-size:1.1rem;line-height:1.5;color:#000;box-shadow:0 5px 0 rgba(12,15,27,.85)}
.traps li::before{content:counter(t);position:absolute;left:1rem;top:1.05rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--gold);border:2px solid #000;color:#000;font-family:var(--display);font-size:1.15rem;display:grid;place-items:center;line-height:1}
.traps b{display:block;font-family:var(--label);font-weight:400;font-size:1.3rem;letter-spacing:.02em;margin-bottom:.2rem}
.plus{margin:1.2rem 0 0;padding:1.1rem 1.2rem;border:2px dashed #000;border-radius:18px;background:#FFF1CC;font-size:1.1rem;color:#000}
.plus b{font-family:var(--label);font-weight:400;font-size:1.25rem;letter-spacing:.02em}

/* Signup panel (light) */
.pio-signup{scroll-margin-top:80px}
.pio-panel{max-width:600px;margin:0 auto;background:#fff;border:3px solid #000;border-radius:24px;padding:1.6rem 1.3rem 1.4rem;box-shadow:0 8px 0 rgba(12,15,27,.9)}
.pio-panel h2{text-align:center;margin-bottom:.4rem;text-shadow:var(--edge-light)}
.pio-panel > p{text-align:center;font-size:1.1rem;margin:0}
.pio-form{display:grid;gap:1rem;margin-top:1.2rem}
.pio-form label{display:block;font-size:1.1rem;font-weight:800;color:#000}
.pio-form input[type=email]{width:100%;box-sizing:border-box;padding:1rem 1.05rem;border-radius:14px;border:3px solid #000;background:#fff;color:#000;font-size:1.2rem;font-family:var(--font);margin-top:.4rem}
.pio-form input[type=email]::placeholder{color:#55585f}
.pio-form input:focus{outline:4px solid var(--gold);outline-offset:2px}
.pio-form .btn{width:100%;font-size:1.2rem;padding:1.05rem 1.4rem;border:2px solid #000}
.pio-form .fine{color:#000;text-align:center;font-size:1rem;margin:0}
.pio-legal{max-width:600px;margin:1.3rem auto 0;font-size:1rem;line-height:1.55;color:#000}
.pio-legal p{margin:0 0 .7rem}
.pio-legal .disc{border-left:4px solid var(--gold);padding:.2rem 0 .2rem .9rem}

/* Mr. Lime (fruit cast) next to the form */
.pio .lime-spot{display:flex;align-items:flex-end;justify-content:center;gap:.6rem;margin:0 auto 1.2rem;pointer-events:none;user-select:none}
.pio .lime-spot picture{display:block;flex:0 0 auto}
.pio .lime-fig{display:block;width:auto;height:170px;aspect-ratio:271/800;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.pio .lime-bubble{position:relative;max-width:15rem;margin:0 0 5.5rem;padding:.8rem 1.05rem;background:#FFF8E7;color:#000;border:3px solid #000;border-radius:20px;font-family:var(--round);font-weight:700;font-size:1.3rem;line-height:1.2;text-align:center;box-shadow:0 5px 0 rgba(12,15,27,.35)}
.pio .lime-bubble::before,.pio .lime-bubble::after{content:"";position:absolute;top:50%;border-style:solid;border-color:transparent}
.pio .lime-bubble::before{right:-24px;margin-top:-14px;border-width:14px 0 14px 24px;border-left-color:#000}
.pio .lime-bubble::after{right:-16px;margin-top:-10px;border-width:10px 0 10px 17px;border-left-color:#FFF8E7}

/* Thanks page */
.pio-thanks{text-align:center}
.pio-thanks .lead{margin:0 auto 1rem}
.pio-steps{list-style:none;padding:0;margin:1.4rem auto 0;max-width:560px;display:grid;gap:.7rem;text-align:left}
.pio-steps li{background:#fff;border:2px solid #000;border-radius:16px;padding:.9rem 1.1rem;font-size:1.1rem;color:#000}
.pio-steps b{font-family:var(--label);font-weight:400;font-size:1.2rem;letter-spacing:.02em}
.pio-dl{position:relative;max-width:560px;margin:1.6rem auto 0;padding:1.6rem 1.2rem 1.3rem;border:3px dashed #000;border-radius:20px;background:#FFF1CC}
.pio-dl .ph-tag{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);margin:0;background:#000;color:var(--glow);font-weight:800;letter-spacing:.12em;font-size:.8rem;padding:.25rem .7rem;border-radius:8px;white-space:nowrap}
.pio-dl .btn{font-size:1.15rem;padding:1rem 1.5rem;border:2px solid #000}
.pio-dl p{margin:.7rem 0 0;font-size:1rem;color:#000}
.pio-thanks .btn-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.6rem}
.pio .btn-outline{background:#fff;color:#000;border:2px solid #000}
.pio .btn-outline:hover{background:#FFF1CC}
@media(max-width:480px){.pio-sub{letter-spacing:.04em;font-size:1rem}}
.pio h1,.pio-sub,.pio h2{text-wrap:balance}

/* ---- Thursday release additions ---- */
.pio-for{max-width:46ch;margin:1rem auto 0;font-size:1.12rem;line-height:1.5;background:#fff;border:2px solid #000;border-radius:16px;padding:.8rem 1rem}
.pio-for b{font-family:var(--label);font-weight:400;letter-spacing:.02em}
.pio-teaser{margin:1.8rem auto 0;max-width:280px;text-align:center}
.pio-teaser a{position:relative;display:block;border:3px solid #000;border-radius:18px;overflow:hidden;box-shadow:0 6px 0 rgba(12,15,27,.85);aspect-ratio:9/16;background:#DDCBAA}
.pio-teaser img,.pio-teaser .teaser-video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.pio-teaser .teaser-video{border:3px solid #000;border-radius:18px;max-width:280px;background:#DDCBAA}
.pio-teaser .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:var(--gold);border:3px solid #000;display:grid;place-items:center;font-size:1.8rem;color:#000;padding-left:6px;box-sizing:border-box}
.pio-teaser figcaption{margin-top:.7rem;font-size:1rem;color:#000}
.pio-steps3{list-style:none;padding:0;margin:1.4rem auto 0;max-width:640px;display:grid;gap:.9rem;text-align:left}
.pio-steps3 li{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:2px solid #000;border-radius:18px;padding:1rem 1.1rem;font-size:1.08rem;line-height:1.45;color:#000;box-shadow:0 5px 0 rgba(12,15,27,.85)}
.pio-steps3 .n{flex:0 0 2.3rem;height:2.3rem;border-radius:50%;background:var(--gold);border:2px solid #000;display:grid;place-items:center;font-family:var(--display);font-size:1.2rem;line-height:1}
.pio-steps3 b{font-family:var(--label);font-weight:400;font-size:1.25rem;letter-spacing:.02em;display:block;margin-bottom:.15rem}
.pio-steps3 .row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.pio-steps3 .btn{border:2px solid #000;font-size:1.05rem}
.pio-steps3 .share-msg{font-weight:800}
.pio-steps3 .share-url{margin:.5rem 0 0;font-size:.95rem;color:#333;word-break:break-all}
.pio-legal{text-align:left}
/* lesson page */
.lesson{max-width:720px;margin:0 auto;color:#000;font-size:1.1rem;line-height:1.6}
.lesson h1{font-size:clamp(2rem,7vw,3.2rem);margin:.4rem 0 1rem}
.lesson h2{font-size:clamp(1.4rem,4.6vw,1.9rem);margin:2rem 0 .6rem;color:#000}
.lesson blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:5px solid var(--gold);background:#fff;border-radius:0 12px 12px 0}
.lesson blockquote p{margin:0}
.lesson hr{border:0;border-top:2px dashed rgba(0,0,0,.35);margin:2rem 0}
.lesson .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0;border:2px solid #000;border-radius:12px;background:#fff}
.lesson table{border-collapse:collapse;width:100%;font-size:1rem;min-width:520px}
.lesson th,.lesson td{padding:.55rem .7rem;border-bottom:1px solid #ccc;text-align:left;vertical-align:top}
.lesson th{background:#FFF1CC;font-family:var(--label);font-weight:400;letter-spacing:.02em}
.lesson a{color:#000;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.lesson .ws-btn{margin:1rem 0 1.4rem}
.lesson .ws-btn .btn{border:2px solid #000;font-size:1.1rem}
/* Mr. Lime tagline (Oct 21 2026): small playful quote under the H1 on /price-it-out and /thanks-price-it-out. Fredoka = the site's quote font. */
.pio-quote{margin:.2rem auto .9rem;max-width:36ch;padding:0}
.pio-quote blockquote{margin:0}
.pio-quote p{font-family:var(--round);font-weight:700;font-size:clamp(.95rem,3.9vw,1.15rem);line-height:1.35;color:#000;margin:0}
.pio-quote figcaption{font-family:var(--label);font-size:.9rem;letter-spacing:.06em;color:#3a2a12;margin-top:.25rem}
/* Hero CTA under the Mr. Lime quote (Oct 21 2026): jumps to #signup and focuses the email field. Uses .pio-hero .btn (gold). */
.pio-hero-cta{margin:0 0 1.1rem}
.pio-hero-cta .btn{margin-top:.2rem}
#signup{scroll-margin-top:84px}

/* Pop-up sign-up (hero button), Oct 21 2026. Mobile-first: full-width card on a 390px phone, big tap targets. */
.pio-modal{position:fixed;inset:0;z-index:1000;background:rgba(12,15,27,.62);padding:max(1rem,env(safe-area-inset-top)) .75rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pio-modal:not([hidden]){display:flex;align-items:flex-start;justify-content:center}
.pio-modal-card{position:relative;width:100%;max-width:520px;box-sizing:border-box;margin:8vh auto 2rem;background:var(--cream);color:#000;border:3px solid #000;border-radius:24px;padding:1.7rem 1.2rem 1.4rem;box-shadow:0 8px 0 rgba(12,15,27,.9);text-align:center;animation:pioPop .18s ease-out}
.pio-modal-card h2{font-family:var(--display);font-weight:400;color:#000;font-size:clamp(1.9rem,8vw,2.4rem);line-height:1.05;letter-spacing:.015em;margin:.2rem 2.6rem .55rem;text-shadow:var(--edge-light)}
.pio-modal-card > p{font-family:var(--round);font-weight:600;font-size:1.15rem;line-height:1.45;margin:0;color:#000}
.pio-modal-card .pio-form{text-align:left;margin-top:1.1rem}
.pio-modal-card .pio-form .fine{text-align:center}
.pio-modal-x{position:absolute;top:.55rem;right:.55rem;width:48px;height:48px;border-radius:50%;border:2px solid #000;background:#fff;color:#000;font-size:2rem;line-height:1;font-weight:700;cursor:pointer;display:grid;place-items:center;padding:0 0 .15rem}
.pio-modal-x:hover{background:#FFF1CC}
.pio-modal-x:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
html.pio-modal-open,html.pio-modal-open body{overflow:hidden}
@keyframes pioPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pio-modal-card{animation:none}}