@font-face{font-family:"Inter";src:url(assets/inter-latin-var.woff2?v=b9528b9a) format("woff2-variations"),url(assets/inter-latin-var.woff2?v=b9528b9a) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Version F (run 100) layer on top of D's d2.css. Same palette, type and components; adds the stacked hero, three step line, walkthrough and What it does panels. */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--ink)}
/* hero: big stacked words */
.fhero{padding:56px 0 64px}
.fh-grid{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,4fr);gap:36px;align-items:center}
h1.stack{font-size:clamp(44px,5vw,66px);line-height:1.02;letter-spacing:-.035em;margin-top:18px;max-width:none}
h1.stack .ln{display:block}
h1.stack .hl{background:linear-gradient(transparent 62%,var(--lime) 62%);-webkit-box-decoration-break:clone;box-decoration-break:clone;display:inline}
.fhero .nm{font-size:19px;font-weight:650;margin-top:26px;max-width:600px;line-height:1.45}
.fhero .ctl{font-size:17px;color:var(--ink2);margin-top:10px;max-width:600px}
.fhero .acts{display:flex;gap:22px;align-items:center;margin-top:28px;flex-wrap:wrap}
.ticks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:15px;color:var(--ink2)}
.ticks li{display:inline-flex;align-items:center;gap:8px}
.ticks li:before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink);font-size:11px;font-weight:800;color:var(--ink)}
.fart img{width:100%;max-width:520px;margin-left:auto}
/* industry hero stacked */
.ihero h1.stack{font-size:clamp(34px,3.7vw,50px);margin-top:14px}
.ihero .eyebrow{margin-top:18px}
/* where the checking goes wrong */
.wrongsec .head h2{max-width:820px}
.wcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wcards li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 26px}
.wcards .n{font-size:13px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--flag)}
.wcards h3{margin-top:10px}.wcards p{margin-top:8px;color:var(--ink2);font-size:16px}
/* product line, three stations */
.fline:not(.d4) .line{background:var(--paper);border:1.5px solid var(--ink);border-radius:26px;padding:30px 36px 32px;box-shadow:4px 4px 0 var(--ink)}
.fline:not(.d4) .line figure{max-width:880px;margin:22px auto 6px}
@media (min-width:761px){.fline:not(.d4) .stations{grid-template-columns:268fr 762fr 350fr}.iline .stations.s3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fline:not(.d4) .stations{max-width:880px}
/* walkthrough */
.wt{background:var(--paper);border:1.5px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.wthead{padding:24px 28px 18px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between}
.wthead .team{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wthead h3{font-size:clamp(22px,2.4vw,28px);margin-top:6px}
/* run 103 (8:41 PM PT): scoped to F's walkthrough so D's industry-page label keeps d2.css styling */.wt .elab,.wthead .elab,.mini>.elab{display:inline-block;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mini>.elab{display:block;font-size:11px;margin-bottom:8px}
.wthead .elab{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.flow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,5fr)}
.flow .col{padding:24px 26px 28px;border-right:1px solid var(--line);min-width:0}
.flow .col:last-child{border-right:0}
.flow .out{background:var(--tint)}
.st{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st b{background:var(--ink);color:#fff;border-radius:999px;padding:3px 10px;font-size:11.5px;letter-spacing:.06em}
.out .st b{background:var(--lime);color:var(--ink);border:1.5px solid var(--ink)}
.flow h4{font-size:18px;line-height:1.3;margin-top:14px;letter-spacing:-.01em}
.docs{display:grid;gap:8px;margin-top:14px}
.docs li{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:600;font-size:15px}
.docs li:before{content:"";flex:none;width:14px;height:17px;border:1.5px solid var(--ink);border-radius:3px;background:#fff}
.rulesnote{margin-top:12px;background:var(--tint);border:1px solid #C9E59A;border-radius:12px;padding:10px 12px;font-size:14.5px;color:var(--ink2)}
.flow .wimg{margin-top:14px;width:100%;height:auto;border-radius:12px;background:var(--bg)}
.chk{margin-top:12px}
.chk li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px}
.chk li:last-child{border-bottom:0}
.dot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:800;margin-top:1px}
.dot.ok{background:var(--okt);color:var(--ok)}.dot.fl{background:var(--flagt);color:var(--flag)}
.chk small{display:block;color:var(--flag);font-size:13.5px;margin-top:2px}
.chk li.f{background:var(--flagt);border-radius:10px;padding:10px;border-bottom:0;margin:4px 0}
.pl{font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pl.ok{background:var(--okt);color:var(--ok)}.pl.fl{background:#fff;color:var(--flag);border:1px solid #E8C78F}
.light{margin-top:12px;font-size:14.5px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ans{font:inherit;font-size:14px;font-weight:700;min-height:40px;padding:8px 14px;border-radius:10px;border:1.5px solid var(--ink);background:#fff;cursor:pointer}
.ans:hover{background:var(--tint)}
.ans[aria-pressed=true]{background:var(--ink);color:#fff}
.lead2{margin-top:6px;font-size:15.5px;color:var(--ink2)}
/* run 103 (8:41 PM PT): scoped to F's walkthrough so D's industry-page chip keeps d2.css styling */.wt .fu{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:750;border-radius:999px;padding:4px 12px;background:var(--flagt);color:var(--flag);border:1px solid #E8C78F}
.wt.done .fu{background:var(--lime);color:var(--ink);border-color:var(--ink)}
.orows{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 14px}
.orows div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.orows div:last-child{border-bottom:0}
.orows dt{font-weight:650}.orows dd{color:var(--ink2);text-align:right}
.orows .held dd{color:var(--flag);font-weight:600}
.wt.done .orows .held dd{color:var(--ok)}
.wt.done .chk li.f{background:var(--okt)}
.wt.done .chk li.f .pl{color:var(--ok);border-color:#B9DDA6}
.cfoot2{margin-top:12px;font-weight:650;font-size:15px}
.wtlink{margin-top:16px}
/* What it does */
/* run 103 7:58 PM PT: home What it does picker removed, rule unused, kept: .picker{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px} */
/* run 103 7:58 PM PT: home What it does picker removed, rule unused, kept: .picker .plbl{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px} */
/* run 103 7:58 PM PT: home What it does picker removed, rule unused, kept: .pb{min-height:44px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);font:inherit;font-weight:650;font-size:15px;cursor:pointer;color:var(--ink)} */
/* run 103 7:58 PM PT: home What it does picker removed, rule unused, kept: .pb[aria-pressed=true]{background:var(--ink);color:#fff} */
/* run 103 7:58 PM PT: home What it does picker removed, rule unused, kept: .pfull{margin:-6px 0 18px;display:inline-flex} */
.wcards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;min-width:0}
.wcard .k{font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wcard h3{margin-top:8px}.wcard>p{margin-top:8px;font-size:15.5px;color:var(--ink2)}
.mini{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;flex:1;display:flex;flex-direction:column}
.exset{display:none}.exset.on{display:block}
.mini-t{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.mini-t .bad{color:var(--flag)}
.mrow{display:flex;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-top:6px;font-size:14.5px}
.mrow .good{color:var(--ok);font-weight:650;text-align:right}.mrow .bad{color:var(--flag);font-weight:650;text-align:right}
.exc{margin-top:8px;background:var(--tint);border-radius:10px;padding:9px 12px;font-size:14px}
.rule{display:block;width:100%;text-align:left;font:inherit;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:6px;cursor:pointer;color:var(--ink);min-height:44px}
.rule.ex{background:var(--tint)}
.rule .why{display:none;margin-top:4px;font-size:13.5px;color:var(--muted)}
.rule[aria-expanded=true] .why{display:block}
.rule .rt:after{content:" +";color:var(--muted)}
.rule[aria-expanded=true] .rt:after{content:" ×"}
.srow{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 8px 8px 12px;margin-top:6px;font-size:14.5px}
.sb{font:inherit;font-size:12.5px;font-weight:750;border-radius:999px;padding:6px 12px;min-height:36px;min-width:76px;cursor:pointer;border:1px solid transparent}
.sb.miss{background:#FBE3DF;color:#8F2A1C}.sb.rev{background:var(--flagt);color:var(--flag)}.sb.wait{background:#ECEFE8;color:var(--ink2)}.sb.ok{background:var(--okt);color:var(--ok)}
.tip{margin-top:10px;font-size:13px;color:var(--muted)}
.exnav{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px}
.exnav button{font:inherit;font-size:14px;font-weight:650;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
.exnav.single{display:none}
#control .cgrid.noimg{grid-template-columns:1fr}
/* responsive */
@media (max-width:1000px){.fh-grid{grid-template-columns:1fr;gap:30px}.fart img{max-width:380px;margin:0}.flow{grid-template-columns:1fr}.flow .col{border-right:0;border-bottom:1px solid var(--line)}.flow .col:last-child{border-bottom:0}.wcards3,.wcards{grid-template-columns:1fr}}
@media (max-width:760px){.fhero{padding:30px 0 40px}h1.stack{font-size:clamp(40px,11.6vw,52px)}.ihero h1.stack{font-size:clamp(32px,9vw,40px)}.fhero .nm{font-size:17px}.fart{display:none}.fline:not(.d4) .line{padding:20px 16px 22px;border-radius:20px}.wthead{padding:18px 18px 14px}.flow .col{padding:18px 18px 22px}.wcard{padding:20px 18px}.picker .plbl{width:100%}}
/* UX pass (run 100): 44px tap targets, visible focus, no layout jump on toggles */
.ans,.sb,.exnav button{min-height:44px}
.sb{min-width:92px;text-align:center}
.ans{min-width:150px}
.pl{min-width:0}
.tlink{display:inline-flex;align-items:center;min-height:44px}
.faq summary{min-height:44px}
.onward a,footer a,.crumbs a{display:inline-flex;align-items:center;min-height:44px}
:where(a,button,summary,[role=tab]):focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.btn:focus-visible{outline-offset:4px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
footer nav a{min-height:44px}
footer nav{gap:0}
.logo{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{min-width:44px;justify-content:center}
/* run 103 (6:44 PM PT): rulefinch.com product samples as the step visuals of the walkthrough, restyled to D. Phone first */
.wt .hc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:4px}
.wt .hc small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:750}
.wt .hc b.t{display:block;font-size:16px;line-height:1.35;margin-top:4px}
.docs.rcv{list-style:none;padding:0;margin:10px 0 0;gap:6px}
.docs.rcv li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 8px 7px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:14.5px}
.docs.rcv li span:first-child{flex:1;min-width:0}
.docs.rcv li:last-child{border-bottom:1px solid var(--line)}
.rpanel{margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px}
.rpanel .mini-t{margin-bottom:4px}
.rule.rp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.rule.rp .rt:after{content:""}
.rule.rp .why{grid-column:1/-1}
.rule.rp .on1{font-size:12px;font-weight:750;color:var(--ok);background:var(--okt);border-radius:999px;padding:3px 10px}
.rule.ex.rp{border-color:#B9D97A}
.rrow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 6px 6px 12px;margin-top:6px;font-size:14.5px;min-height:44px}
.rrow.off span{color:var(--muted)}
.tg{width:44px;height:44px;border:0;padding:0;background:transparent;position:relative;flex:none;cursor:pointer}
.tg:before{content:"";position:absolute;left:3px;top:12px;width:38px;height:22px;border-radius:999px;background:#C9D2C6}
.tg:after{content:"";position:absolute;top:15px;left:6px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.tg.on:before{background:var(--ink)}.tg.on:after{left:22px;background:var(--lime)}
.tg:focus-visible,.rexc:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rexc{margin-top:6px;padding:9px 12px;border-radius:10px;background:var(--tint);border:1px solid #B9D97A;font-size:14px;color:var(--ink2)}
.cbadge{margin:8px 0 0}
.hbadge{display:inline-block;font-size:12.5px;font-weight:750;border-radius:999px;padding:5px 12px}
.hbadge.flag{background:var(--flagt);color:var(--flag)}.hbadge.ok{background:var(--okt);color:var(--ok)}
.wt .light{font-size:13.5px;color:var(--muted);margin-top:8px}
.fl3{margin-top:10px}
.fl3 .srow{align-items:center;padding:9px 10px 9px 12px}
.fl3 .srow>span:first-child{flex:1;min-width:0}
.fl3 .srow small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.fl3 .srow.top{border:2px solid var(--ink)}
.st3{flex:none;font-size:12.5px;font-weight:750;border-radius:999px;padding:5px 11px;white-space:nowrap}
.st3.ok{background:var(--okt);color:var(--ok)}.st3.rev{background:var(--flagt);color:var(--flag)}
.wt.done .st3.rev{background:var(--okt);color:var(--ok)}
.wt.done .fl3 .srow.top{border:1px solid var(--line)}
.wt.done .hbadge{background:var(--okt);color:var(--ok)}
.hc-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:14px;color:var(--ink2)}
.hbtns{display:flex;gap:8px;flex-wrap:wrap}
.hbtns button{font:inherit;font-size:14px;font-weight:650;min-height:44px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.hbtns button.k{background:var(--ink);color:#fff;border-color:var(--ink)}
.hbtns button.k[aria-pressed=true]{background:var(--okt);color:var(--ok);border-color:#B9DDA6}
.hbtns button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hnote{margin-top:10px;font-size:13.5px;color:var(--ink2);background:#fff;border:1px dashed var(--line);border-radius:10px;padding:8px 12px}
.fnext{margin-top:10px;background:var(--tint);border:1px solid #B9D97A;border-radius:10px;padding:9px 12px;font-size:14px;color:var(--ink2)}
.fart .illo{width:100%;height:auto;max-width:520px;margin-left:auto;display:block}
@media (max-width:760px){.fart{display:block}.fart .illo{max-width:280px;margin:0 auto}}
/* run 103 (7:31 PM PT): rulefinch.com hero sample case card, overlapping the bottom of the illustration. In flow (no absolute), phone first */
.fh-grid.fh-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fart.hasc{position:relative;max-width:500px;margin-left:auto;width:100%}
.fart.hasc .illo{max-width:100%;margin:0}
.hcase{position:relative;margin:-96px 0 0 -6%;width:94%;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -18px rgba(23,40,30,.35);padding:16px 16px 14px}
.hc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.hc-head small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:750}
.hc-head b.t{display:block;font-size:16px;line-height:1.35;margin-top:3px}
.hcase .hbadge{flex:none}
.hcase .chk{margin-top:6px}
.hcase .chk li{padding:7px 0;font-size:14px}
.hcase .chk li.f{padding:9px 10px}
.hcase .hc-foot{margin-top:10px;font-size:13.5px}
.hcase.done .hbadge,.hcase.done .pl.fl{background:var(--okt);color:var(--ok)}
.hcase.done li.f{background:var(--okt)}
@media (max-width:1000px){.fh-grid.fh-card{grid-template-columns:1fr}.fart.hasc{margin:0 auto;max-width:460px}}
@media (max-width:760px){.fart.hasc .illo{max-width:240px;margin:0 auto}.hcase{margin:-34px 0 0;width:100%;padding:14px 14px 12px}.hc-head b.t{font-size:15.5px}}
/* run 103 (7:48 PM PT): D's four-step product line, in D's layout. The d2.css .hhero line rules apply through the .d4w wrapper. F's box overrides above are scoped to :not(.d4) */
.fline .hhero.d4w{padding:0}
.fline .hhero.d4w .line{margin-top:0}
/* run 103 (7:51 PM PT): Where the checking goes wrong picture as a soft corner underlay. Never behind body text; cards stay opaque on top. Phone: small, in flow above the cards */
.wrongsec .wrap{position:relative}
.wrongsec .head,.wrongsec .wcards{position:relative;z-index:1}
.wart{display:block;width:210px;height:auto;margin:-18px auto 10px;opacity:.9;pointer-events:none}
@media (min-width:761px){.wart{position:absolute;z-index:0;top:-30px;right:0;width:min(34%,400px);margin:0;opacity:.55}.wrongsec .head{max-width:min(62%,760px)}}
/* run 103 (8:09 PM PT, Angel "copy this layout for FAQ"): two-column card grid copied from c-run98-local c.css (.faq.acc, .eyebrow line); scoped to #faq so d2.css (shared with D) is untouched.
   align-items:start: an opened card grows on its own, the card beside it keeps its height and position. Odd count: last card spans both columns. One column at 640px and below. */
.kicker.eyeline:before{content:"";width:22px;height:2px;background:var(--ink)}
#faq .faq.acc{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px;align-items:start}
#faq .faq.acc details.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:0}
#faq .faq.acc details.q:last-of-type:nth-of-type(odd){grid-column:1/-1}
#faq .faq.acc summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:44px;padding:22px 24px;font-size:17px;font-weight:700;line-height:1.35;cursor:pointer;list-style:none;border-radius:16px}
#faq .faq.acc summary::-webkit-details-marker{display:none}
#faq .faq.acc summary::marker{content:""}
#faq .faq.acc summary:after{content:"+";content:"+"/"";flex:none;width:28px;height:28px;margin-top:-3px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:52% 48% 50% 46%/48% 54% 46% 52%;background:#fff;font-weight:800;font-size:18px;line-height:1;transform:rotate(-4deg);transition:transform .2s ease,background-color .2s ease}
#faq .faq.acc summary:hover:after{background:var(--tint)}
#faq .faq.acc details[open] summary:after{content:"+";content:"+"/"";background:var(--lime);box-shadow:2px 2px 0 var(--ink);transform:rotate(41deg)}
#faq .faq.acc details.q p{margin-top:0;padding:0 24px 22px;color:var(--ink2);font-size:15.5px}
@media (prefers-reduced-motion:reduce){#faq .faq.acc summary:after{transition:none}}
@media (max-width:640px){#faq .faq.acc{grid-template-columns:1fr;gap:14px;margin-top:24px}#faq .faq.acc details.q:last-of-type:nth-of-type(odd){grid-column:auto}#faq .faq.acc summary{padding:20px}#faq .faq.acc details.q p{padding:0 20px 20px}}

/* run 103 (8:44 PM PT): Angel's file-types line under D's step 1 "Loaded in" on industry pages; same type as D's step text, a little air above */
.iline .stations span.d.fin{margin-top:8px}
/* run 103 (8:53 PM PT): Without / With comparison (merged Where the checking goes wrong + In control). Phone: stacked pairs, each card labelled. 761px+: two aligned columns, labels on top. */
.cmp{position:relative;z-index:1;margin-top:26px}
.cmphd{display:none}
.cmprows{display:grid;gap:22px}
.cmprow{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.cmpc{border:1px solid var(--line);padding:20px 20px 22px}
.cmpc h3{margin-top:8px}.cmpc p{margin-top:8px;color:var(--ink2);font-size:16px}
.cwo{background:var(--paper);border-radius:var(--r) var(--r) 0 0}
.cwi{background:var(--tint);border-top:0;border-radius:0 0 var(--r) var(--r);box-shadow:inset 4px 0 0 var(--lime)}
.cmp .cl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.cmp .cl i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink)}
.cmpc .n{display:inline-block;margin-top:10px;font-size:13px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--flag)}
.cwo .cl,.cmphd .hwo{color:var(--flag)}
.cmpsec .sendbar{position:relative;z-index:1;margin-top:22px}
/* r108b: icons 28px (strokes scale with the 20 unit viewBox: ring 2.1px, mark 2.8px), active growth stays 1.15x. r108: warning mark (!) before each Without label, tick before each mirrored With label; icon, label and heading line up across each pair */
.cmpc .n{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.cmpc .n .cmpi{flex:none;width:28px;height:28px}.cwi .n{color:var(--ok)}.cmpc.cwi h3{margin-top:8px}
/* r108: With cards only respond to hover, keyboard focus and tap (tap focuses the card). Transform and shadow only, so nothing reflows; content is fully visible at rest */
.cwi{position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cwi .tk{transition:transform .18s ease}
.cwi:hover,.cwi:focus{border-color:var(--ink);box-shadow:inset 6px 0 0 var(--lime),3px 3px 0 var(--ink);z-index:1}
.cwi:hover .tk,.cwi:focus .tk{transform:scale(1.15)}
.cwi:focus{outline:none}.cwi:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (min-width:761px){.cwi:hover,.cwi:focus{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.cwi,.cwi .tk{transition:none}.cwi:hover,.cwi:focus{transform:none}.cwi:hover .tk,.cwi:focus .tk{transform:none}}
@media (min-width:761px){
.cmphd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0 0 10px;border-bottom:1.5px solid var(--ink);margin-bottom:16px}
.cmphd .cl{font-size:14px}
.cmprows{gap:16px}
.cmprow{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;position:relative}
.cmprow:not(:last-child){padding-bottom:16px;border-bottom:1px solid var(--line)}
.cmpc{border-radius:var(--r);padding:22px 24px 24px}
.cwi{border-top:1px solid var(--line)}
.cmpc>.cl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmpc .n{margin-top:0}
.cwi h3{margin-top:0}
}
/* r108b: phone widths only (760px and below): the description line under each compare heading is visually hidden in both columns; icon, label and heading stay. The words stay in the page for screen readers (no display:none). Desktop unchanged */
@media (max-width:760px){.cmpc>p{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.cmpc{position:relative}}
/* r108c: phone layout (option C, kept as the base) (760px and below) of the compare section. Column labels shown once as a key above the pairs (icons tie the key to the cards); per card column labels become screen reader only; icon sits beside label and heading (one fewer row); balanced heading wrap so no word is left alone; more air between pairs. 761px and up unchanged */
.cmphd .cmpi{display:none}
@media (max-width:760px){
.cmphd{display:flex;flex-wrap:wrap;gap:8px 20px;padding:0 0 12px;margin-bottom:16px;border-bottom:1.5px solid var(--ink)}
.cmphd .cl{gap:8px}.cmphd .cmpi{display:block;flex:none;width:18px;height:18px}.cmphd .hwi i{display:none}
.cmpc>.cl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cmpc{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:center;padding:18px 18px 20px}
.cmpc .n{display:contents}
.cmpc .n .cmpi{grid-column:1;grid-row:1/span 2;align-self:center}
.cmpc .n>span{grid-column:2;grid-row:1;line-height:1.4}
.cmpc h3,.cmpc.cwi h3{grid-column:2;grid-row:2;margin-top:4px;text-wrap:balance}
.cmprows{gap:28px}
}
/* r108c option S: on phone (760px and below) the three Without cards sit together under one Without header, then the three With cards under one With header. Same markup as desktop (pairs in the DOM; the list and rows use display:contents so a grid can regroup them). Descriptions visible again here; every card is a separate rounded card */
@media (max-width:760px){
.cmp{display:grid;grid-template-columns:minmax(0,1fr);row-gap:12px}
.cmphd,.cmprows,.cmprow{display:contents}
.cmphd .cl{font-size:14px;padding-bottom:10px;border-bottom:1.5px solid var(--ink);margin:0}
.cmphd .hwo{grid-row:1}.cmphd .hwi{grid-row:5;margin-top:22px}
.cmprow:nth-child(1) .cwo{grid-row:2}.cmprow:nth-child(2) .cwo{grid-row:3}.cmprow:nth-child(3) .cwo{grid-row:4}
.cmprow:nth-child(1) .cwi{grid-row:6}.cmprow:nth-child(2) .cwi{grid-row:7}.cmprow:nth-child(3) .cwi{grid-row:8}
.cwo,.cwi{border:1px solid var(--line);border-radius:var(--r)}
.cmpc>p{position:static;width:auto;height:auto;margin:6px 0 0;padding:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;grid-column:2;grid-row:3;font-size:15px}
.cmpc .n .cmpi{grid-row:1/span 2}
}