/* Campaign pages — tools & lead card (extends ag.css) */
.lead{overflow:hidden; border-radius:26px; box-shadow:var(--shadow-lg); background:var(--surface); border:1px solid var(--line); animation:fadeScale 1.1s var(--ease) .2s both; max-width:540px; width:100%; justify-self:center}
.lead-h{position:relative; display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:end; padding:18px 22px 0; background:radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--accent-2) 38%, transparent), transparent 60%), linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent) 16%, var(--surface))); border-bottom:1px solid var(--line)}
.lead-h .ph{height:176px; display:flex; align-items:flex-end; overflow:hidden}
.lead-h .ph img{width:100%; height:auto; filter:drop-shadow(0 18px 24px rgba(10,26,36,.25))}
.lead-h .msg{padding-bottom:16px; display:flex; flex-direction:column; gap:6px; min-width:0}
.lead-h .hi{font-family:var(--display); font-size:24px; font-weight:700; line-height:1.15; letter-spacing:-.02em}
.lead-h .msg p{font-size:14px; color:var(--ink-2); line-height:1.5}
.sig{font-family:"Mrs Saint Delafield", "Snell Roundhand", cursive; font-size:38px; line-height:.9; color:var(--accent)}
.lead form{padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; background:var(--surface); color:var(--ink); border-radius:0; box-shadow:none}
.lead .fcard{border-radius:0; box-shadow:none}
@media (max-width:520px){ .lead-h{grid-template-columns:104px 1fr; padding:14px 16px 0; gap:12px} .lead-h .ph{height:128px} .lead-h .hi{font-size:20px} .lead-h .msg p{font-size:13px} .sig{font-size:30px} .lead form{padding:16px} }
.opts2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.opts2 label{position:relative; display:flex}
.opts2 input{position:absolute; inset:0; opacity:0; cursor:pointer}
.opts2 span{flex:1; display:flex; align-items:center; min-height:48px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); font-size:13.5px; font-weight:700; transition:all .25s var(--ease)}
.opts2 input:checked + span{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.opts2 input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.ferr{font-size:12.5px; font-weight:700; color:#A3412A}
.trust2{border-block:1px solid var(--line); background:var(--surface)}
.trust2 .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 36px; padding-block:22px}
.trust2 span{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.trust2 .lg{display:flex; flex-wrap:wrap; gap:20px 34px; align-items:center}
.trust2 img{height:38px; width:auto; filter:brightness(0) saturate(0); opacity:.6}
@media (max-width:560px){ .trust2 img{height:28px} }

/* tool shell */
.tool{display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden}
@media (max-width:940px){ .tool{grid-template-columns:1fr} }
.tool .ctl{padding:clamp(22px,3vw,36px); display:flex; flex-direction:column; gap:20px; border-right:1px solid var(--line); min-width:0}
@media (max-width:940px){ .tool .ctl{border-right:0; border-bottom:1px solid var(--line)} }
.tool .viz2{padding:clamp(22px,3vw,36px); background:linear-gradient(180deg, var(--surface), var(--veil)); display:flex; flex-direction:column; gap:16px; min-width:0}
.tabs{display:inline-flex; padding:4px; gap:4px; border-radius:999px; background:var(--veil); border:1px solid var(--line); align-self:flex-start}
.tabs button{border:0; background:none; padding:10px 18px; min-height:42px; border-radius:999px; font-size:14px; font-weight:800; color:var(--muted); cursor:pointer; transition:all .3s var(--ease)}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.rng{display:flex; flex-direction:column; gap:8px}
.rng .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.rng label{font-size:13px; font-weight:700; color:var(--muted)}
.rng output{font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; background:linear-gradient(90deg, var(--accent) 0 var(--p,40%), var(--line) var(--p,40%) 100%); outline:none; cursor:pointer; touch-action:pan-y}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); box-shadow:0 4px 14px -4px rgba(10,26,36,.45); transition:transform .25s var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:28px; height:28px; border-radius:50%; background:var(--surface); border:2px solid var(--accent)}
input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:6px}
.res{padding:18px 20px; border-radius:16px; background:linear-gradient(135deg, var(--gold-soft), color-mix(in srgb, var(--gold-soft) 40%, var(--surface))); border:1px solid color-mix(in srgb, var(--gold) 25%, var(--line))}
.res .l{font-size:12.5px; font-weight:800; color:var(--ink-2)}
.res .big{display:block; font-family:var(--display); font-size:clamp(34px,4.4vw,50px); font-weight:700; line-height:1.05; letter-spacing:-.03em; font-variant-numeric:tabular-nums; background:linear-gradient(120deg, var(--gold-2), var(--gold) 60%); -webkit-background-clip:text; background-clip:text; color:transparent; margin-top:4px}
.res .s{font-size:13.5px; font-weight:600; color:var(--muted)}
.kv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.kv div{padding:14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); min-width:0}
.kv dt{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.kv dd{margin:6px 0 0; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums}
.ok{color:#1F7A55} .warn{color:#A06B12} .bad{color:#A3412A}
.verdict{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--line); font-size:14px; line-height:1.55; color:var(--ink-2)}
.verdict b.dot{flex:0 0 12px; height:12px; margin-top:5px; border-radius:50%; background:currentColor}
.tsvg{width:100%; height:auto; display:block; overflow:visible; touch-action:pan-y}
.tsvg text{font-family:var(--body); font-size:12px; font-weight:600; fill:var(--muted)}
.tsvg .gl{stroke:var(--line); stroke-width:1}
.tsvg .bar{fill:url(#barG); transform-box:fill-box; transform-origin:bottom; animation:growy .6s var(--ease) both}
@keyframes growy{from{transform:scaleY(0)}}
.tsvg .bar:hover{fill:var(--gold)}
.tsvg .cline{fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.tsvg .carea{fill:url(#capArea)}
.tsvg .aline{stroke:var(--gold); stroke-width:2; stroke-dasharray:6 6}
.tsvg .xdot{fill:var(--surface); stroke:var(--gold); stroke-width:3}
.tsvg .xlab rect{fill:var(--ink)} .tsvg .xlab text{fill:var(--bg); font-weight:800}
.gauge-arc{fill:none; stroke-width:16; stroke-linecap:round}
.gauge-needle{transform-origin:150px 150px; transition:transform 1s var(--ease)}
.tnote{font-size:12px; color:var(--muted); line-height:1.55}
/* checklist */
.cl-wrap{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,40px); align-items:start}
@media (max-width:760px){ .cl-wrap{grid-template-columns:1fr} }
.ring{position:relative; width:180px; height:180px; justify-self:center}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring .bg{fill:none; stroke:var(--line); stroke-width:12}
.ring .fg{fill:none; stroke:url(#ringG); stroke-width:12; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s var(--ease)}
.ring .val{position:absolute; inset:0; display:grid; place-items:center; text-align:center}
.ring .val b{display:block; font-family:var(--display); font-size:40px; font-weight:700; line-height:1}
.ring .val span{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-top:4px}
.cl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.cl li{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:16px; border-radius:16px; background:var(--surface); border:1.5px solid var(--line); cursor:pointer; transition:border-color .25s, background .25s, transform .3s var(--ease)}
.cl li:hover{border-color:var(--accent-2); transform:translateX(3px)}
.cl li.done{background:var(--accent-soft); border-color:var(--accent)}
.cl .bx{width:26px; height:26px; border-radius:8px; border:2px solid var(--line-2); display:grid; place-items:center; color:transparent; font-weight:800; transition:all .25s var(--ease); background:var(--surface)}
.cl li.done .bx{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.cl .tt{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.cl .tt b{font-size:15.5px}
.cl .due{font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:999px; background:var(--gold-soft); color:var(--gold)}
.cl p{font-size:14px; color:var(--muted); margin-top:4px; line-height:1.55}
/* compare bars */
.cmpbars{display:flex; flex-direction:column; gap:14px}
.cmpbars .row{display:flex; flex-direction:column; gap:6px}
.cmpbars .row span{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--ink-2)}
.cmpbars .track{height:16px; border-radius:999px; background:var(--line); overflow:hidden}
.cmpbars .fill{height:100%; border-radius:999px; transition:width .8s var(--ease)}
.cmpbars .a .fill{background:var(--accent-2)} .cmpbars .b .fill{background:linear-gradient(90deg, var(--gold-2), var(--gold))}
.toggle2{display:flex; gap:8px; flex-wrap:wrap}
.toggle2 button{flex:1; min-height:46px; padding:10px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); font-size:14px; font-weight:800; color:var(--ink-2); cursor:pointer; transition:all .25s var(--ease)}
.toggle2 button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
/* faq + closer */
.faq{max-width:860px; display:flex; flex-direction:column; gap:10px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:0 22px; transition:box-shadow .4s var(--ease)}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer; list-style:none; padding:20px 0; display:flex; gap:16px; align-items:center; font-size:16.5px; font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; width:30px; height:30px; flex:0 0 30px; border-radius:50%; display:grid; place-items:center; background:var(--veil); color:var(--accent); font-size:18px; transition:transform .45s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px; color:var(--muted); font-size:15.5px; max-width:70ch}
.look{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:860px){ .look{grid-template-columns:1fr} }
.look .card{padding:24px; display:flex; flex-direction:column; gap:10px}
.look .n{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:800}
.look p{color:var(--muted); font-size:15px}
.rng output{white-space:nowrap}
.rng label{min-width:0}
@media (max-width:520px){ .rng output{font-size:20px} .res .big{font-size:34px} .tabs button{padding:10px 14px; font-size:13.5px} }