/* Peekaboo One pricing TEST page (unlisted /pricing-test). Uses the site's tokens from style.css. */
body{overflow-x:clip} /* hidden makes body a scroll container and breaks position:sticky (matrix header, mobile total) */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.p1-hero{background:var(--teal);color:#fff;clip-path:polygon(0 0,100% 0,100% 88%,0 100%);padding:44px 0 110px;text-align:center;position:relative}
.p1-hero .kicker{color:var(--sun);font-size:18px}
.p1-hero h1{font-size:clamp(44px,6vw,80px);margin:6px 0 16px}
.p1-hero h1 span{display:block;font-size:.5em;color:var(--sun);margin-top:8px}
.p1-hero p{font-size:20px;font-weight:600;max-width:760px;margin:0 auto 22px}
.p1-hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.p1-testlabel{background:#fff;color:var(--ink);font:900 16px var(--display);text-transform:uppercase;letter-spacing:.04em;padding:6px 14px;border-radius:999px;border:3px solid var(--ink)}
.p1-calm{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;padding:6px 14px 6px 6px;font:800 16px var(--display);cursor:pointer}
.p1-calm .knob{width:40px;height:24px;border-radius:999px;background:rgba(255,255,255,.3);position:relative;flex:none}
.p1-calm .knob::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.p1-calm[aria-checked="true"] .knob{background:var(--sun)}.p1-calm[aria-checked="true"] .knob::after{left:19px}
.p1-calm:focus-visible,.p1-pick button:focus-visible,.p1-mod:focus-within,.faq summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--sun)}
.p1-pills{list-style:none;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:0;margin:0}
.p1-pills li{background:#fff;color:var(--ink);font:900 17px var(--display);padding:10px 20px;border-radius:999px;border:4px solid var(--berry)}
.p1-pills .nh{border-color:var(--aqua)}.p1-pills .ns{border-color:var(--sun)}
.p1-trial{display:inline-block;margin-top:24px!important;background:var(--sun);color:var(--ink);font:900 18px var(--display)!important;padding:10px 22px;border-radius:999px;box-shadow:0 5px 0 #D99E00}
.p1-sec{padding:70px 0}
.p1-sec h2{margin-bottom:10px}
.p1-sub{text-align:center;font-size:19px;font-weight:600;margin:0 0 30px}
/* package cards (site .price look: white frame, colour top) */
.p1-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:stretch;margin-top:10px}
.p1-card{position:relative;background:#fff;border:6px solid #fff;border-radius:var(--r);box-shadow:var(--shadow),0 0 0 4px var(--mist);display:flex;flex-direction:column}
.p1-card .top{color:#fff;border-radius:20px 20px 0 0;padding:26px 22px 22px}
.p1-card h3{font-size:28px;margin:0}
.p1-card .who{font-weight:700;font-size:16px;opacity:.95}
.p1-card .amt{font:900 56px/1 var(--display);margin-top:14px}
.p1-card .per{font-size:16px;font-weight:700;opacity:.95}
.p1-card .ticks{padding:6px 22px 0;flex:1;margin:14px 0}
.p1-card .ticks li{font-size:16px;margin:10px 0}
.p1-card .go{padding:0 22px 26px}
.p1-card .go .btn{width:100%;justify-content:center;padding:16px 10px;font-size:16px}
.p1-card.pop{transform:translateY(-14px)}
.p1-badge{display:inline-block;background:var(--sun);color:var(--ink);font:900 16px var(--display);padding:4px 14px;border-radius:999px;margin-bottom:10px;transform:rotate(-3deg)}
.p1-best{display:none;position:absolute;bottom:-18px;right:16px;background:var(--berry);color:#fff;font:900 16px var(--display);padding:4px 14px;border-radius:999px;border:3px solid #fff}
.p1-card.best{box-shadow:var(--shadow),0 0 0 6px var(--berry)}.p1-card.best .p1-best{display:block}
.p1-soon{display:inline-block;background:var(--sun);color:var(--ink);font:900 16px var(--display);text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:2px 10px;vertical-align:middle}
.p1-solo{text-align:center;margin:40px 0 0;font-size:18px;font-weight:700}.p1-solo em{font-weight:600}
/* flow */
.p1-flow{background:var(--ink);color:#fff;border-radius:34px;padding:46px 30px;text-align:center;border:6px solid #fff;box-shadow:var(--shadow)}
.p1-flow .p1-sub{color:#DDEFED}
.p1-inc{display:inline-block;margin:0 auto 28px;background:var(--sun);color:var(--ink);font:900 16px var(--display);padding:8px 18px;border-radius:999px}
.p1-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;text-align:left}
.p1-steps li{background:#fff;color:var(--ink);border-radius:22px;padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.p1-steps .num{width:38px;height:38px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font:900 18px var(--display)}
.p1-steps b{font:900 18px var(--display)}.p1-steps span{font-size:16px}
.p1-steps i{font-style:normal;align-self:flex-start;margin-top:auto;font:900 16px var(--display);text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--aqua)}
.p1-steps i.w-pb{background:var(--berry);color:#fff}
/* matrix */
.p1-ph{border:4px dashed var(--teal);background:var(--cream);border-radius:26px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 22px var(--display);color:var(--teal);margin-bottom:28px}
.p1-ph span{font-size:44px}
.p1-pick{display:none;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.p1-pick button{font:900 16px var(--display);border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer}
.p1-pick button[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.p1-mx{width:100%;border-collapse:separate;border-spacing:0;font-size:17px;background:#fff;border-radius:22px;box-shadow:0 0 0 6px #fff,0 0 0 10px var(--mist)}
.p1-mx thead th{position:sticky;top:96px;z-index:2;background:var(--ink);color:#fff;font:900 18px var(--display);padding:14px 10px;text-align:center}
.p1-mx thead th:first-child{text-align:left;border-radius:16px 0 0 0}.p1-mx thead th:last-child{border-radius:0 16px 0 0}
.p1-mx thead th span{display:block;color:var(--sun);font-size:22px}
.p1-mx thead th.t2{background:var(--teal)}
.p1-mx tbody th,.p1-mx td{padding:10px 12px;border-bottom:2px solid var(--mist)}
.p1-mx tbody th{text-align:left;font-weight:700}
.p1-mx td{text-align:center;font-weight:900;font-size:20px}
.p1-mx td.tx{font-size:16px;font-weight:800;color:var(--ink)}
.p1-mx tr.cath .cnote{display:block;font:700 16px var(--display);margin-top:2px}
.p1-mx td.y{color:var(--teal)}.p1-mx td.n{color:#9AAEB0}
.p1-mx td:nth-child(4){background:#EEF7F6}
.p1-mx tr.cath th{background:var(--sun);font:900 19px var(--display);text-align:left;padding:12px}
/* build your own */
.p1-ex{text-align:center;margin:-12px 0 26px;font:900 18px var(--display);color:var(--berry)}
.p1-bgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:26px;align-items:start}
.p1-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border:0;padding:0;margin:0;min-width:0}
.p1-mod{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:#fff;border:4px solid var(--ink);border-radius:22px;padding:14px 16px;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.p1-mod:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.p1-mod input{width:24px;height:24px;accent-color:var(--teal);grid-row:span 2;margin:0}
.p1-mod .mn{font-weight:800;font-size:17px}.p1-mod .mp{font:900 18px var(--display)}.p1-mod .mt{grid-column:2/4;font-size:16px}
.p1-mod:has(input:checked){background:#E6F6F4;border-color:var(--teal);box-shadow:0 5px 0 var(--teal)}
.p1-sum{position:sticky;top:116px;background:var(--cream);border:6px solid #fff;border-radius:30px;padding:26px;box-shadow:var(--shadow),0 0 0 4px var(--ink)}
.p1-sum .sl{font-weight:700}.p1-sum .sv{font:900 22px var(--display);margin-bottom:10px}
.p1-sum .tot{font:900 56px/1.1 var(--display)}.p1-sum .per2{font-weight:700;margin-bottom:14px}
.p1-sum .rec{border-radius:20px;padding:14px 16px;background:#fff;font-size:17px;margin-bottom:18px}
.p1-sum .rec b{display:block;font:900 20px var(--display);margin-bottom:4px}
.p1-sum .rec.go{background:var(--teal);color:#fff}.p1-sum .rec.near{background:var(--sun)}
.p1-sum .btn{width:100%;justify-content:center;font-size:16px;padding:16px 10px;text-align:center}
.p1-mini{display:none}
.p1-xlink{font:900 18px var(--display);color:var(--teal);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.p1-xlink:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.p1-note{text-align:center;font-weight:700;margin-top:30px}
.p1-sec .faq summary{font-size:19px}.p1-sec .faq p{font-size:17px}
@media (max-width:1100px){.p1-mx thead th{top:118px}.p1-sum{top:138px}.p1-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}.p1-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.p1-mini{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;bottom:12px;z-index:5;background:var(--ink);color:#fff;border:4px solid #fff;border-radius:999px;padding:10px 18px;font:800 16px var(--display);text-decoration:none;box-shadow:var(--shadow);margin-right:72px}.p1-mini b{color:var(--sun);font-size:20px}.p1-bgrid{grid-template-columns:minmax(0,1fr)}.p1-sum{position:static}.p1-mods{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
 .p1-tiers{grid-template-columns:minmax(0,1fr)}.p1-card.pop{transform:none}
 .p1-steps{grid-template-columns:minmax(0,1fr)}
 .p1-flow{padding:34px 18px}
 .p1-hero{padding:30px 0 90px}.p1-hero p{font-size:18px}
 .p1-pick{display:flex}
 .p1-mx{table-layout:auto}
 .p1-mx thead th{font-size:16px;padding:12px 8px}
 .p1-mx thead th,.p1-mx tbody td{display:none}
 .p1-mx thead th:first-child{display:table-cell;width:62%}
 .p1-mx.show0 :is(th,td):nth-child(2),.p1-mx.show1 :is(th,td):nth-child(3),.p1-mx.show2 :is(th,td):nth-child(4),.p1-mx.show3 :is(th,td):nth-child(5){display:table-cell}
 .p1-mx thead th:nth-child(n+2){border-radius:0 16px 0 0}
 .p1-mx tbody th{word-break:break-word;font-size:16px}
}
/* Calm colours: same tokens as app-test (html[data-theme=calm]) */
html[data-theme="calm"]{--teal:#3D7470;--aqua:#A6D1CC;--sun:#E8DCB4;--berry:#8A5868;--grape:#5B5475;--tang:#93604A;--sky:#486C88;--mist:#EEF2F0;--shadow:0 8px 20px -16px rgba(18,58,64,.28)}
html[data-theme="calm"] .btn-sun{--sc:#C4B78E}html[data-theme="calm"] .btn-teal{--sc:#2D5754}html[data-theme="calm"] .btn-ink{--sc:#0B2427}
html[data-theme="calm"] .btn{--d:3px}
html[data-theme="calm"] .p1-trial{box-shadow:0 3px 0 #C4B78E}
html[data-theme="calm"] .p1-mod{box-shadow:0 3px 0 var(--ink)}
html[data-theme="calm"] .site-footer .bars,html[data-theme="calm"] .p1-ph span{filter:saturate(.6)}
@media (prefers-reduced-motion:reduce){.p1-card.pop{transform:none}.p1-mod,.p1-calm .knob::after{transition:none}}