/*
 * Pricing page layout.
 *
 * This lived in an inline <style> block until the hosting Content-Security-Policy
 * arrived with `style-src 'self'` and no 'unsafe-inline'. The browser then dropped
 * the whole block, so the plan cards and the feature panel rendered as unstyled
 * text with default bullets. A same-origin stylesheet satisfies the policy without
 * weakening it.
 */

.planGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 8px}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column}
.plan.featured{border-color:var(--teal);box-shadow:0 14px 34px rgba(8,126,120,.13)}
.plan .tag{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal-deep);background:var(--soft);border-radius:20px;padding:5px 11px;margin-bottom:13px}
.plan h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--navy)}
.plan .price{font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--navy);margin:9px 0 2px}
.plan .price small{font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--muted)}
.plan .who{color:var(--muted);font-size:13.5px;line-height:1.7;margin:6px 0 16px;min-height:44px}
.plan ul{list-style:none;margin:0;padding:0}
.plan li{position:relative;padding:9px 0 9px 25px;font-size:14px;line-height:1.6;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li:before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;border-left:2.2px solid var(--teal-dark);border-bottom:2.2px solid var(--teal-dark);transform:rotate(-45deg)}
.plan li b{color:var(--navy)}
.everything{background:var(--navy);color:#fff;border-radius:22px;padding:30px 32px;margin:30px 0}
.everything h2{color:#fff;margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.3px}
.everything p{color:#d6dfe8;font-size:14px;line-height:1.75;margin:0 0 18px;max-width:70ch}
.featureCols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.featureCols h3{color:var(--soft);font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 9px}
.featureCols ul{list-style:none;margin:0;padding:0}
.featureCols li{color:#e2eaf1;font-size:13.5px;line-height:1.7;padding:3px 0}
.cmp{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:11px 10px;text-align:left}
.cmp th{font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center;width:19%}
.cmp tbody td:first-child{font-weight:700;color:var(--navy)}
.cmp .num{font-weight:700;color:var(--navy)}
.steps{counter-reset:step;list-style:none;margin:14px 0 0;padding:0}
.steps li{position:relative;padding:0 0 20px 46px;border-left:2px solid var(--line);margin-left:14px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:-16px;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--teal-dark);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.steps h3{margin:2px 0 5px;font-size:15px;font-weight:700;color:var(--navy)}
.steps p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.7}
@media(max-width:900px){.planGrid,.featureCols{grid-template-columns:1fr}.cmp{font-size:13px}.cmp th,.cmp td{padding:9px 6px}}