/* SCOPED (451): every selector below is prefixed with .kz-pricing, so this file can load beside proof.css on one page without touching its .rl .lk .gp .cn .stage rules, and without a global [hidden] or .d+.d rule. Wrap the pricing or guarantee block in <div class="kz-pricing">. The old main[data-bill] switch is now .kz-pricing[data-bill]. Original copy: brand-review/pricing-v6/pricing.css. */
/* brand-review/pricing-v6/pricing.css: the pricing component v6, three options (Josh, 2026-10-30, decisions 5646, 5647, 5651, 5652, 5668, 5687). v6 drops the old price and its switch, writes /mo., sets prices on one baseline and moves the Option B billing switch down (last block of this file). Built on pricing-v2/pricing.css and the system-v3 files (buttons/tab.css:9-27, data/tab.css:24-26,30-45, cards/tab.css:22-33). Every color comes from tokens.css; no hex value is typed here.
   Glass never sits on glass (decision 5628): buttons sit on plain ground frames. Strip bands are never glass. Never a gradient on top of a different gradient (decision 5652). */
.kz-pricing .sym{position:absolute;width:0;height:0}
.kz-pricing .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kz-pricing [hidden]{display:none!important}
.kz-pricing :is(a,button):not(.bevel):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.kz-pricing .d+.d{border-top:1px solid var(--gl)}
.kz-pricing .sub+figure{margin-top:clamp(26px,3vw,40px)}
.kz-pricing .lk{display:inline-flex;align-items:center;min-height:44px;font:800 .9rem var(--fd);color:var(--h);text-decoration:underline 2px var(--ac);text-underline-offset:5px}
.kz-pricing .lk:hover{color:var(--ac)}
.kz-pricing .nt{margin:0;padding:12px clamp(12px,2vw,28px);font:700 .95rem var(--fd);color:var(--tx);background:var(--bar);border-bottom:1px solid var(--line)}
.kz-pricing .react{display:flex;gap:8px;max-width:30rem;margin:18px 0 0}
.kz-pricing .react button{flex:1;min-height:44px;padding:0 12px;font:700 .95rem var(--fd);color:var(--h);background:transparent;--cut:var(--bevel-ctl);--band:1px;--band-color:var(--line)}
.kz-pricing .react button[aria-pressed=true]{color:var(--onsel);background:var(--sel);--band-color:var(--sel)}
/* the billing period shown everywhere at once: main[data-bill] is y (yearly, the default) or m (monthly) */
.kz-pricing[data-bill=y] .m,.kz-pricing[data-bill=m] .y{display:none!important}
/* strip colors: each tier takes one band gradient (Graphite to Pewter, Orange-red, Green; no blue on pricing, decision 5651); --sa is the start stop, --sb the end stop */
.kz-pricing .s-slate{--sa:var(--graphite);--sb:var(--pewter)}.kz-pricing .s-orange{--sa:var(--card-orange-a);--sb:var(--card-orange-b)}.kz-pricing .s-green{--sa:var(--card-green-a);--sb:var(--card-green-b)}
.kz-pricing .bd{background:linear-gradient(135deg,var(--sa),var(--sb))}
/* buttons: always filled. Main is the Orange-red gradient with a White label; secondary is glass. */
.kz-pricing .btn{--bh:48px;--px:26px;--fs:1.0625rem;display:inline-flex;align-items:center;justify-content:center;min-height:var(--bh);padding:0 var(--px);font:800 var(--fs)/1 var(--fd);text-decoration:none;white-space:nowrap;cursor:pointer;color:var(--bt,var(--h));background:var(--bf,transparent);--cut:var(--bevel-ctl);--band:1px;--band-color:var(--bb,transparent)}
.kz-pricing .btn.lg{--bh:56px;--px:34px;--fs:1.17rem}
.kz-pricing .btn.w{width:100%}
.kz-pricing .p{--bt:var(--white);--bb:var(--cta-a);--bf:linear-gradient(135deg,var(--cta-a),var(--cta-b))}
.kz-pricing .p:hover{--band-color:var(--cta-a);--bf:linear-gradient(135deg,var(--cta-a),color-mix(in srgb,var(--cta-b) 70%,var(--cta-a)))}
.kz-pricing .p:active{--band-color:var(--cta-a);--bf:linear-gradient(135deg,var(--cta-a),var(--cta-a))}
.kz-pricing .sg{--bt:var(--h);--bb:var(--chip);--bf:color-mix(in srgb,var(--tint) var(--ta),transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.kz-pricing .sg:hover{--bf:color-mix(in srgb,var(--tint) 80%,transparent)}
.kz-pricing .sg:active{--bf:color-mix(in srgb,var(--h) 14%,transparent);--band-color:var(--accent)}
.dark .kz-pricing .sg:hover{--bt:var(--white);--bf:var(--steel)}
.dark .kz-pricing .sg:active{--bt:var(--white);--bf:var(--night)}
/* segmented bar: switches a view inside the page (decision 5625) */
.kz-pricing .seg{display:flex;gap:4px;width:min(100%,390px);padding:4px;--cut:var(--bevel-md);--bc:var(--mu)}
.kz-pricing .tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font:800 .95rem var(--fd);color:var(--h);background:transparent;--cut:var(--bevel-ctl);--band-color:transparent}
.kz-pricing .seg .tab{flex:1 1 0;min-width:0;padding:0 8px}
.kz-pricing .seg .tab[aria-checked=true]{color:var(--onsel);background:var(--sel);--band-color:var(--sel)}
.kz-pricing [data-bs]+.tiers{margin-top:20px}
.kz-pricing .pk{display:none;margin-bottom:16px}
/* outlined badge: plain body, solid start-color band, a 3 px stripe in the end color, a word */
.kz-pricing .bdg{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 11px 0 9px;font:800 .72rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--h);background:var(--ground);--cut:var(--bevel-sm);--bc:var(--ca)}
.kz-pricing .bdg::before{content:"";width:3px;height:12px;background:var(--cb)}
:root.dark .kz-pricing .bdg.bx{--bc:var(--cb)}
.kz-pricing .bdg.nw{min-height:20px;padding:0 7px 0 6px;font-size:.62rem}
.kz-pricing .bdg.nw::before{height:9px}
/* checks are a square with cut corners, a SOLID Green fill and a White glyph (decision 5652: no gradient on a gradient), so they read on any ground; a dash is muted and never red */
.kz-pricing .cg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square}
.kz-pricing .cg.no{width:20px;color:var(--mu)}
.kz-pricing .ck{flex:none;display:grid;place-items:center;width:24px;height:24px;color:var(--white);background:var(--green-b);--cut:var(--bevel-sm);--band:2px;--bc:var(--green-b)}
.kz-pricing .ck .i{width:16px;height:16px}
.kz-pricing .cmp td .ck{margin-inline:auto}
.kz-pricing .fl{display:grid;gap:9px;padding:0;list-style:none}
.kz-pricing .fl li{display:flex;gap:10px;align-items:flex-start;font:500 .96rem/1.4 var(--fd);color:var(--tx)}
.kz-pricing .fl li>span:not(.ck){padding-top:1px}
.kz-pricing .fl b,.kz-pricing .vl b{font-weight:800;color:var(--h)}
.kz-pricing .fl .bdg{margin-left:4px;vertical-align:1px}
/* prices: the price you pay is White in dark and Navy (the heading color) in light; the amount and /mo. share one baseline (align-items:baseline, never center) */
.kz-pricing .pp{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.kz-pricing .pp b,.kz-pricing .hp b{font:800 clamp(2.5rem,3.3vw,3.1rem)/1 var(--fd);color:var(--h)}
:root.dark .kz-pricing :is(.pp,.hp) b{color:var(--white)}
.kz-pricing .pp .u{font:700 .95rem var(--fd);color:var(--mu)}
.kz-pricing .pl{font:600 .9rem/1.4 var(--fd);color:var(--tx)}
.kz-pricing .pl+.pl{margin-top:-6px}
.kz-pricing .vl{display:flex;gap:8px;align-items:center;font:800 .95rem/1.3 var(--fd);color:var(--h)}
.kz-pricing .nu{padding:0;border:0;background:none;font:800 .9rem var(--fd);color:var(--h);text-decoration:underline 2px var(--ac);text-underline-offset:4px}
.kz-pricing .nu:hover{color:var(--ac)}
.kz-pricing .tray{padding:14px var(--pad,24px);background:var(--ground);border-block:1px solid var(--gl)}
/* Option A: three glass cards; each has a strip-colored band header (never glass), a plain tray for the button, then the feature groups */
.kz-pricing .tiers{display:grid;gap:20px}
@media(min-width:860px){.kz-pricing .tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kz-pricing .pc{--pad:clamp(20px,2.4vw,28px);display:flex;--cut:var(--bevel-lg);color:var(--tx)}
.kz-pricing .pc>.bevel-in{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
/* the plan to buy: a 3 px Orange-red outline from the bevel band (no fill, no clip-path on a bordered box); overflow:hidden lives on the inner box so the outline is never cut */
.kz-pricing .pc.rc{--bc:var(--cta-b);--band:3px}
@media(min-width:860px){.kz-pricing .pc.rc{margin-block:-14px}}
.kz-pricing .bd{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:78px;padding:14px var(--pad);color:var(--white)}
.kz-pricing .bd h3{font-size:1.5rem;color:var(--white)}
.kz-pricing .eb{display:block;margin-bottom:6px;font:800 .7rem/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.kz-pricing .pa{display:grid;gap:12px;align-content:start;padding:var(--pad)}
.kz-pricing .tg{font:700 1rem/1.3 var(--fd);color:var(--tx)}
.kz-pricing .pz{flex:1;display:flex;flex-direction:column;gap:18px;padding:var(--pad)}
.kz-pricing .ev{font:800 .98rem/1.3 var(--fd);color:var(--h)}
.kz-pricing .gp h4{margin-bottom:9px;font:800 .72rem/1 var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.kz-pricing .nl{margin-top:auto;padding-top:6px;font:600 .92rem var(--fd);color:var(--tx)}
/* Option B: a glass panel holds the table (v5, decision 5668). The header row is an opaque match of the glass (--gs, so rows never show through and no glass sits on glass) that stays under the page bar while the rows scroll; its corner cell holds the heading and the billing toggle (a small .ph row holds them below 700 px). Each column has a strip-colored top edge; the Standard column wears a 3 px Orange-red outline from its header to its last row (decision 5651) */
.kz-pricing .ph{display:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:0 0 14px}
.kz-pricing .ph h3,.kz-pricing .cn h3{font-size:1.4rem}
.kz-pricing .ph>[data-bs]{flex:0 1 390px;min-width:min(100%,300px)}
.kz-pricing .cmp{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.kz-pricing .cmp :is(th,td){padding:13px 12px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--gl)}
.kz-pricing .cmp tbody tr:last-child>*{border-bottom:0}
.kz-pricing .cmp th:first-child{width:31%;text-align:left}
.kz-pricing .cmp thead th{position:sticky;top:var(--bt,0);z-index:2;padding:16px 14px 14px;vertical-align:top;border-top:1px solid var(--gl);background:var(--gs)}
.kz-pricing .cmp thead th:first-child{text-align:left;border-top:0}
.kz-pricing .cmp thead .te:not(.rc){background:linear-gradient(90deg,var(--sa),var(--sb)) 0 0/100% 5px no-repeat,var(--gs)}
:root.dark .kz-pricing .cmp thead .te:not(.rc){background:linear-gradient(var(--sb),var(--sb)) 0 0/100% 5px no-repeat,var(--gs)}
/* Standard: no tint, no fill; the outline is a CSS border on table cells (none of them carries clip-path), the row hairline is an inset shadow so the side borders run unbroken */
.kz-pricing .cmp .rc{border-inline:3px solid var(--cta-b);border-bottom:0;box-shadow:inset 0 -1px 0 var(--gl)}
.kz-pricing .cmp thead .rc{padding-top:14px;border-top:3px solid var(--cta-b)}
.kz-pricing .cmp tbody tr:last-child>.rc{border-bottom:3px solid var(--cta-b);box-shadow:none}
.kz-pricing .hn{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;min-height:30px}
.kz-pricing .tn{font:800 1.2rem var(--fd);color:var(--h)}
.kz-pricing .hp{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 8px;margin:6px 0 8px}
.kz-pricing .hp b{font-size:2rem}
.kz-pricing .hp .y{display:inline-flex;align-items:baseline;gap:8px}
.kz-pricing .hp .u{font:700 .8rem var(--fd);color:var(--mu)}
.kz-pricing .cmp .btn{--bh:44px;--fs:1rem;--px:10px}
.kz-pricing .hv{margin-bottom:10px}.kz-pricing[data-bill=m] .hv{visibility:hidden}
.kz-pricing .cmp tbody th{font:700 .98rem/1.3 var(--fd);color:var(--h)}
.kz-pricing .cmp .sr th{padding:24px 12px 8px;font:800 .74rem var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--h)}
.kz-pricing .rl{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
/* info button (decision 5660, option C icon only): a Material Symbols Sharp glyph alone in the muted text color, no box at rest. Hover, press and an open note bring a 2 px cut-corner outline in that same color, never a fill or a color change; the 2 px band is always there (transparent at rest) so nothing shifts. The focus ring is the bevel recipe's. */
.kz-pricing .ms{--fill:0;--wg:400;--gd:0;--os:24;--sz:24px;font-family:'Material Symbols Sharp';font-weight:400;font-style:normal;font-size:var(--sz);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;flex:none;width:1em;height:1em;overflow:hidden;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:'liga';font-variation-settings:'FILL' var(--fill),'wght' var(--wg),'GRAD' var(--gd),'opsz' var(--os)}
.dark .kz-pricing .ms{--gd:-25}
.kz-pricing .ib{--ic:var(--mu);display:inline-grid;place-items:center;width:28px;height:28px;padding:0;color:var(--ic);background:transparent;--cut:var(--bevel-sm);--band:2px;--band-color:transparent}
.kz-pricing .ib .ms{--sz:20px;--os:20}
.kz-pricing .ib:hover,.kz-pricing .ib:active,.kz-pricing .ib[aria-expanded=true]{--band-color:var(--ic)}
.kz-pricing .ib:focus-visible{--band-color:var(--focus)}
.kz-pricing .ex{display:block;margin-top:8px;font:500 .85rem/1.45 var(--fd);color:var(--tx)}
.kz-pricing .tv{font:700 .95rem/1.3 var(--fd);color:var(--h)}
.kz-pricing .na{font:600 .9rem var(--fd);color:var(--mu)}
.kz-pricing .fn{padding:14px 12px 0;font:500 .85rem/1.5 var(--fd);color:var(--mu)}
/* at phone width a segmented picker shows one plan at a time next to the feature column, the header no longer sticks, and the table scrolls inside its own box */
@media(max-width:699px){
.kz-pricing .tw{overflow-x:auto}.kz-pricing .ph{display:flex}.kz-pricing .cn{display:none}
.kz-pricing .cmp{table-layout:auto}
.kz-pricing .pk{display:flex}
.kz-pricing .cmp :is(th,td){padding:12px 8px}
.kz-pricing .cmp thead th{position:static;padding:16px 8px 12px}
.kz-pricing .cmp th:first-child{width:46%}
.kz-pricing .cmp :is(th,td):not(:first-child){display:none}
.kz-pricing .tp[data-show="1"] .cmp :is(th,td):nth-child(2),.kz-pricing .tp[data-show="2"] .cmp :is(th,td):nth-child(3),.kz-pricing .tp[data-show="3"] .cmp :is(th,td):nth-child(4){display:table-cell}
.kz-pricing .hp b{font-size:1.8rem}
.kz-pricing .cmp .btn{--px:6px}
}
/* Option C: one featured card on the same neutral glass surface as the plan cards (decision 5651). */
.kz-pricing .cs{display:grid;gap:clamp(24px,3vw,44px);padding:clamp(24px,4vw,48px);--cut:var(--bevel-lg);color:var(--tx)}
@media(min-width:800px){.kz-pricing .cs{grid-template-columns:1fr 1fr;align-items:center}}
.kz-pricing .cl{display:grid;gap:14px;justify-items:start;align-content:start}
.kz-pricing .cs h3{font-size:1.6rem}
.kz-pricing .cr{display:grid;gap:16px}
.kz-pricing .gu{padding-top:16px;border-top:1px solid var(--gl);font:700 1rem/1.4 var(--fd)}
.kz-pricing .rw2{display:grid;margin-top:16px;overflow:hidden;--cut:var(--bevel-md)}
.kz-pricing .rw2>p{align-self:center;padding:18px 24px;font:500 1rem/1.45 var(--fd);color:var(--tx)}
.kz-pricing .rw2 b{color:var(--h)}
@media(min-width:700px){.kz-pricing .rw2{grid-template-columns:1fr auto}.kz-pricing .rw2 .tray{display:grid;align-content:center;padding:16px 24px;border-block:0;border-left:1px solid var(--gl)}}

/* v4: billing toggle badge, savings chip, refund line, guarantee block */
.kz-pricing .bsw{position:relative;width:min(100%,390px);margin-top:14px}
.kz-pricing .bsw .seg{width:100%}
.kz-pricing .bsw .bdg{position:absolute;z-index:1;top:0;left:min(75%,calc(100% - 80px));transform:translate(-50%,-50%);pointer-events:none}
.kz-pricing .bdg.so{color:var(--white);background:linear-gradient(135deg,var(--ca),var(--cb))}.kz-pricing .bdg.so::before{display:none}
.kz-pricing .sv{--bc:var(--green-a);display:inline-flex;align-items:center;gap:8px;padding:5px 10px;font:800 .92rem/1.2 var(--fd);color:var(--green-b);background:var(--ground)}
:root.dark .kz-pricing .sv{background:var(--snow)}
.kz-pricing .pa .sv{justify-self:start}
.kz-pricing .rf{margin-top:8px;font:600 .8rem/1.3 var(--fd);color:var(--tx)}
.kz-pricing .gn{margin-top:16px;padding:18px 24px;--cut:var(--bevel-md);--bc:var(--gl)}.kz-pricing .gn p{margin-top:6px;font:500 1rem/1.45 var(--fd);color:var(--tx)}

.kz-pricing .vn{font:700 .9rem var(--fd);color:var(--tx)}
/* v5: Option B on a glass panel, the same glass surface and cut corners as the Option A cards. overflow lives on the inner .tw (phone width only), never on the bevel box, so the band is not cut and the header can still stick */
.kz-pricing .tp{--cut:var(--bevel-lg);--gs:color-mix(in srgb,var(--tint) var(--ta),var(--ground));padding:clamp(16px,2.4vw,28px);color:var(--tx)}
/* glass never sits on glass (decision 5628): inside the panel the secondary button is the plain-ground fill the page already uses for chips and trays, with no blur */
.kz-pricing .cmp .sg{--bf:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none}
.kz-pricing .cmp .sg:hover{--bf:var(--tint)}
.kz-pricing .cmp .sg:active{--bf:color-mix(in srgb,var(--h) 14%,var(--ground))}
.dark .kz-pricing .cmp .sg:hover{--bf:var(--steel)}
.dark .kz-pricing .cmp .sg:active{--bf:var(--night)}

/* v6 (decision 5687): Option B's Monthly and Yearly switch moves down the table's corner cell. The cell is as tall as the plan columns; the switch is positioned from the cell's bottom edge (the sticky header cell is its containing block) so it sits a header padding (14 px) above the first table row, and the Compare plans heading stays at the top. Below 700 px the .ph row holds both, and a taller row gap keeps the Save badge off the heading. */
.kz-pricing .cn .bsw{position:absolute;left:14px;right:14px;bottom:14px;width:auto;max-width:390px;margin:0}
.kz-pricing .ph{row-gap:36px}

/* v4 tab: each figure is a picture stage (base.css .stage, 60 percent overlay) with glass over it (decisions 5690, 5697) */
.kz-pricing .d.pr{padding-bottom:0}
.kz-pricing .pr>figure.stage{padding-block:clamp(40px,6vw,80px);margin-top:clamp(26px,3vw,40px)}
.kz-pricing .pr>.wrap>.sub+figure{margin-top:0}
.kz-pricing .gn{margin-top:16px;padding:18px 24px;--cut:var(--bevel-md);color:var(--tx)}
/* base.css turns a glass button inside glass into a plain --bar fill; keep the hover and press fills working */
.kz-pricing .glass .sg{background:var(--bf,var(--bar))}
.kz-pricing .glass .sg{--bf:var(--bar)}.kz-pricing .glass .sg:hover{--bf:var(--tint)}.kz-pricing .glass .sg:active{--bf:color-mix(in srgb,var(--h) 14%,var(--bar))}
.dark .kz-pricing .glass .sg:hover{--bf:var(--steel)}.dark .kz-pricing .glass .sg:active{--bf:var(--night)}
/* guarantee, Option 1 (decision 5693): the Navy section with Josh's photo, over a picture */
.kz-pricing .gs{--cut:var(--bevel-xl);--bc:var(--gl);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(22px,3vw,44px);padding:clamp(24px,4vw,52px);background:var(--bandbg);color:var(--white)}
.kz-pricing .gs .copy{display:grid;gap:14px;justify-items:start}
.kz-pricing .gs-h{font:800 clamp(1.5rem,2.4vw,2rem)/1.15 var(--fd);letter-spacing:-.02em;color:var(--white)}
.kz-pricing .gs-b{max-width:34rem;font:500 1.05rem/1.5 var(--fd);color:var(--silver);text-wrap:balance}
.kz-pricing .gs-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}
.kz-pricing .photo{--cut:var(--bevel-lg);--band:2px;--bc:var(--fog);width:240px;max-width:100%;margin:0}
.kz-pricing .photo img{width:240px;max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
@media(max-width:640px){.kz-pricing .gs{grid-template-columns:1fr}}