/* deploy/sales/assets/css/sales.css — PlanPress Studio sales funnel (phase16).
   One stylesheet, no external fonts or CDNs: system font stacks only, so the pages load nothing
   from third parties (ANBM) and survive a copy to any host. Brand colours match the app (teal 600). */

:root{
  --ink:#1f2a28; --ink-soft:#44514e; --muted:#5b6664;
  --brand:#115e59; --brand-dark:#0b4642; --brand-soft:#e3f0ee;
  --cta:#f2b632; --cta-hover:#f7c95c; --cta-ink:#2b2104;
  --bg:#fffdf8; --bg-alt:#f4efe4; --line:#d9d2c3;
  --warn:#b4531c;
  --font-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1160px; --gutter:20px; --radius:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.65 var(--font-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
h1,h2,h3{font-family:var(--font-display);line-height:1.2;margin:0 0 16px;color:var(--ink)}
h1{font-size:clamp(30px,5vw,50px)}
h2{font-size:clamp(25px,3.6vw,38px)}
h3{font-size:21px}
p{margin:0 0 16px}
code{font-size:.9em;background:var(--bg-alt);padding:1px 5px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:780px}
.center{text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:700;color:var(--brand);margin-bottom:10px}
.lead{font-size:20px;color:var(--ink-soft)}
.oto-reason{font-size:21px;font-weight:600;color:var(--brand-dark);border-left:4px solid var(--cta);padding-left:14px}
.fine{font-size:14px;color:var(--muted)}

.urgency-bar{background:var(--brand-dark);color:#fff;text-align:center;padding:10px var(--gutter);font-weight:600;font-size:16px}
.urgency-bar [data-countdown]{font-variant-numeric:tabular-nums}

.nav{border-bottom:1px solid var(--line);background:#fff}
.nav-row{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 20px var(--font-display)}
.nav-link{font-size:15px;font-weight:600}

.section{padding:clamp(48px,7vw,88px) 0}
.section-alt{background:var(--bg-alt)}

.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-top:48px;padding-bottom:64px}
.hero-solo{grid-template-columns:1fr}
.hero-solo .hero-copy{max-width:820px}
.hero-art img,.hero-wide img{border-radius:var(--radius);box-shadow:0 18px 50px rgba(31,42,40,.18)}
.hero-wide{max-width:980px}
.trust{font-size:15px;color:var(--muted)}

.cta{display:inline-block;background:var(--cta);color:var(--cta-ink);font:700 19px/1.3 var(--font-body);
  padding:16px 26px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(242,182,50,.45);transition:transform .15s,background .15s}
.cta:hover{background:var(--cta-hover);transform:translateY(-1px)}
.cta.is-pending{background:#e6dfcf;color:var(--ink-soft);box-shadow:none;cursor:not-allowed}
.cta small{font-weight:500;font-size:14px}
.decline{margin-top:6px;font-size:15px}
.decline a{color:var(--muted)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}

.ticks,.crosses{list-style:none;padding:0;margin:0 0 16px}
.ticks li,.crosses li{position:relative;padding-left:30px;margin:10px 0}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.crosses li::before{content:"✕";position:absolute;left:0;color:var(--warn);font-weight:700}

.shot{margin:0}
.shot img{border-radius:10px;border:1px solid var(--line);background:#fff}
.shot video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;border:1px solid var(--line);background:#1f2a28}
#block-demo .demo-video{margin-top:24px}
.shot figcaption{font-size:15px;color:var(--ink-soft);margin-top:8px;font-weight:600}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 16px}
.stats div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.stats strong{display:block;font:700 34px/1.1 var(--font-display);color:var(--brand)}
.stats span{font-size:15px;color:var(--ink-soft)}

.proof-slot{margin:0}
.proof-slot-box{display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:180px;padding:24px;
  border:2px dashed var(--warn);border-radius:var(--radius);background:#fff8ef;color:var(--ink-soft)}
.proof-slot-box strong{color:var(--warn)}
#block-demo .proof-slot{margin-top:24px}
.market-fact{margin:28px 0 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px}
.market-fact strong{display:block;font:700 34px/1.1 var(--font-display);color:var(--brand)}
.market-fact>span{display:block;font-size:17px;color:var(--ink);font-weight:600;margin-top:4px}
.market-fact figcaption{font-size:15px;color:var(--ink-soft);margin-top:8px}
.samples{margin:28px 0 0;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.samples h3{margin:0 0 16px}
.samples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.samples-grid img{display:block;width:100%;height:auto}
.samples figcaption{font-size:15px;color:var(--ink-soft);margin-top:14px;font-weight:600}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature h3{margin-top:14px}
.feature-wide{grid-column:1/-1;display:grid;grid-template-columns:3fr 2fr;gap:28px;align-items:center}
.feature-wide h3{margin-top:0}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:28px}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:720px;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}
.compare-table th,.compare-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:16px;vertical-align:top}
.compare-table thead th{background:var(--brand-soft)}
.compare-table td:last-child,.compare-table thead th:last-child{background:#eaf5f2;font-weight:700}

.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.compare>div{padding:28px;background:#fff}
.compare>div:last-child{background:var(--brand-soft)}

.badge{display:inline-block;background:var(--brand);color:#fff;font-weight:700;padding:8px 18px;border-radius:999px;margin-bottom:16px}

.stack-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.stack-table td{padding:14px 18px;border-bottom:1px solid var(--line)}
.stack-table tr:last-child td{border-bottom:0;font-weight:700;background:var(--brand-soft)}
.price{font:700 28px var(--font-display);color:var(--brand)}
.price s{color:var(--muted);font-size:.7em;margin-right:6px}

.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.tier.is-current{border:2px solid var(--brand);box-shadow:0 8px 24px rgba(17,94,89,.15)}
.tier-tag{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.tier ul{padding-left:18px;margin:0;font-size:15px}
.tier li{margin:6px 0}

.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{margin:10px 0 0}

.legal h2{font-size:24px;margin-top:32px}

/* jv.html affiliate kit: copy blocks are select-and-copy (no JS); wrap long lines, never scroll sideways at 360 px */
.swipe{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.55 var(--font-body);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 24px;color:var(--ink)}
.swipe em{font-style:italic;color:var(--warn)}
.funnel-map{list-style:none;counter-reset:step;padding:0;margin:0 0 16px}
.funnel-map li{counter-increment:step;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px 14px 56px;margin:0 0 28px}
.funnel-map li::before{content:counter(step);position:absolute;left:16px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font:700 14px/26px var(--font-body);text-align:center}
.funnel-map li:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);color:var(--brand);font-weight:700}
.funnel-next{display:block;margin-top:6px;color:var(--muted);font-size:15px}

.footer{background:var(--ink);color:#dfe6e4;padding:40px 0;font-size:15px}
.footer a{color:#fff}
.footer .fine{color:#b9c4c1}
.footer-brand{display:flex;align-items:center;gap:10px;font:700 18px var(--font-display);color:#fff}

@media (max-width:900px){
  .hero,.split{grid-template-columns:1fr}
  .tier-grid,.stats{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.grid-3{grid-template-columns:repeat(2,1fr)}
  .feature-wide{grid-template-columns:1fr}
  .feature-wide h3{margin-top:14px}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  body{font-size:17px}
  .grid-2,.grid-3,.feature-grid,.tier-grid,.compare{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .samples{padding:16px}
  .samples-grid{grid-template-columns:1fr}
  .cta{display:block;text-align:center}
  .cta small{display:block}.cta-sep{display:none} /* note on its own line, no "·" left hanging at the line end */
}