/* Bridge for pages not yet ported to the designed components: the old class names
   (.card .stop .row .locked .lead .skeleton, plain buttons and inputs) drawn
   with the design tokens. Delete each rule when the last template that uses it is ported. */
main:not(:has(.page)){max-width:720px;margin:0 auto;padding:24px 0 80px}
main:not(:has(.page)) h1{margin:0 0 12px;font:600 clamp(30px,5vw,46px)/1.05 var(--display);letter-spacing:-.03em}
main:not(:has(.page)) h2{margin:24px 0 8px;font:600 24px/1.15 var(--display);letter-spacing:-.02em}
main:not(:has(.page)) h3{margin:16px 0 6px;font:600 18px/1.2 var(--display)}
main:not(:has(.page)) a:not(.btn){color:var(--coral-ink)}
main:not(:has(.page)) .lead{margin:0 0 24px;font-size:18px;color:var(--ink-2)}
form.row{display:flex;gap:8px;flex-wrap:wrap}
main:not(:has(.page)) input[type=text]:not(.box input),main:not(:has(.page)) input[type=email]:not(.box input),main:not(:has(.page)) textarea,main:not(:has(.page)) select{min-height:48px;padding:10px 16px;border:0;border-radius:14px;background:var(--raised);color:var(--ink);font:16px var(--sans);box-shadow:0 0 0 1px var(--line);max-width:100%}
main:not(:has(.page)) input:focus,main:not(:has(.page)) textarea:focus{outline:none;box-shadow:0 0 0 2px var(--ink)}
main:not(:has(.page)) button:not(.btn):not(.copy):not(.theme-t),main:not(:has(.page)) button.copy{min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--coral-btn);color:#fff;font:600 15px var(--sans);cursor:pointer;transition:scale 520ms var(--bounce)}
main:not(:has(.page)) button:not(.btn):not(.theme-t):active{scale:.94;transition-duration:120ms}
main:not(:has(.page)) .card{padding:20px;margin:14px 0;min-height:0}
main:not(:has(.page)) .card.stop{box-shadow:0 0 0 1.5px var(--coral-btn);animation:none;display:block}
.skeleton{height:1em;margin:8px 0;border-radius:6px;background:linear-gradient(90deg,var(--sunk) 25%,var(--shimmer) 50%,var(--sunk) 75%);background-size:200% 100%;animation:sh 1.4s infinite}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
.locked{filter:blur(4px);user-select:none}
pre{white-space:pre-wrap;word-break:break-word;background:var(--sunk);border-radius:12px;padding:12px;font:13px var(--mono)}

/* buy flow: three packages, links as package cards, a real checkbox in the consent card */
.pkgs.three{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
@media (max-width:900px){.pkgs.three{grid-template-columns:1fr}}
a.pkg{text-decoration:none;color:inherit}
.pkg .pkg-cta{margin-top:auto;align-self:stretch;justify-content:center}
.pkg ul{margin-left:0}.pkg .for{margin-left:0}
.consent{position:relative}
.consent input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.consent:has(input:checked){box-shadow:0 0 0 1.5px var(--ink),0 10px 24px -18px rgba(0,0,0,.45)}
.consent:has(input:checked) .cb{background:var(--ink);box-shadow:none;scale:1.08}
.consent:has(input:checked) .cb svg{opacity:1}
.consent:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.trio{grid-template-columns:1fr}}
.pkgs.three .top-r{flex-wrap:wrap;row-gap:4px}.pkgs.three .pkg .nm{font-size:19px;min-width:0}.pkgs.three .pkg .pr{font-size:21px;white-space:nowrap}
.blk .lock,.card .lock{display:flex}  /* the design shows locks only under .gated; free-test blocks show them directly */