/* Layout and components. Brand values (colours, fonts, type scale, radii, shadows, focus rings, wordmark)
   live only in brand/ (brand/fonts.css, brand/brand.css); this file references them as custom properties. */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--accent2);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
/* Focus ring on dark surfaces and the staging bar: keeps the ring at 3:1 or more against what surrounds it */
footer.site :focus-visible,.feature :focus-visible,.result.dark :focus-visible,.f-demo :focus-visible{outline-color:var(--focus-on-dark)}
.staging-bar :focus-visible{outline-color:var(--focus-on-bar)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--white);padding:8px 14px;border-radius:8px;z-index:50}.skip:focus{left:12px}
h1,h2,h3{font-family:var(--serif);font-weight:560;letter-spacing:-.015em;line-height:1.15;color:var(--ink);font-variation-settings:"opsz" 96}
h1{font-size:var(--fs-h1);margin:.2em 0 .35em}
h2{font-size:var(--fs-h2);margin:2.2em 0 .6em}
h3{font-size:var(--fs-h3);margin:1.6em 0 .4em;font-variation-settings:"opsz" 36}
p{margin:0 0 1.05em}
.eyebrow{font:600 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .7em}
.eyebrow.light{color:var(--on-dark-accent)}
.muted{color:var(--muted)}.center{text-align:center}
.ico{width:20px;height:20px;flex:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:720px;margin:0 auto}
/* header */
header.site{position:sticky;top:0;z-index:20;background:var(--head-bg);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hwrap{max-width:var(--wrap);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
nav.main{display:flex;gap:4px}
nav.main a{font:500 .92rem/1 var(--sans);text-decoration:none;color:var(--ink2);padding:9px 12px;border-radius:var(--pill)}
nav.main a:hover,nav.main a[aria-current]{background:var(--tint);color:var(--ink)}
@media(max-width:720px){.hwrap{flex-wrap:wrap;padding-bottom:8px}nav.main{width:100%;overflow-x:auto;scrollbar-width:none;margin:0 -8px}nav.main a{white-space:nowrap;font-size:.88rem;padding:8px 10px}}
.crumbs{font-size:.84rem;color:var(--muted);padding-top:22px;display:flex;flex-wrap:wrap;gap:8px}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--accent)}
/* buttons */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--btn);color:var(--white);font:600 .95rem/1 var(--sans);padding:15px 22px;border-radius:var(--pill);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s}
.cta .ico{width:18px;height:18px;transition:transform .15s}
.cta:hover{background:var(--btn-hover);color:var(--white)}.cta:hover .ico{transform:translateX(3px)}
.cta.sm{padding:11px 16px;font-size:.86rem}
.cta.light{background:var(--white);color:var(--ink)}.cta.light:hover{background:var(--soft);color:var(--ink)}
.cta.block{width:100%;margin-top:8px;font-size:1rem}
.ghost{display:inline-flex;align-items:center;padding:14px 20px;border-radius:var(--pill);border:1.5px solid var(--line2);text-decoration:none;font:600 .95rem/1 var(--sans);color:var(--ink)}
.ghost:hover{border-color:var(--ink);color:var(--ink)}
.textlink{font:600 .92rem/1.4 var(--sans);color:var(--accent);text-decoration:none}.textlink:hover{text-decoration:underline}
/* hero */
.hero{padding:56px 0 0;background:radial-gradient(1100px 500px at 85% 0%,var(--glow) 0,transparent 60%),var(--paper)}
.hero-grid{display:grid;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.5rem,1.6rem + 4vw,4.3rem);line-height:1.03;letter-spacing:-.03em;margin:.1em 0 .4em;max-width:13ch}
.hero-dek{font-size:1.16rem;color:var(--ink2);max-width:36em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-art{position:relative}
.hero-stage{display:flex;align-items:flex-end;justify-content:center;gap:0;background:linear-gradient(180deg,var(--art-a),var(--art-b));border-radius:var(--r28);padding:34px 18px 22px;min-height:300px;box-shadow:var(--shadow-stage)}
.hero-stage .photo{width:26%;height:auto;margin:0 -2%;filter:var(--drop-hero)}
.hero-stage .photo:nth-child(2){width:23%}.hero-stage .photo:nth-child(4){width:21%}
.credit{font-size:.74rem;color:var(--muted);text-align:right;margin:8px 4px 0}
.trust{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;padding:34px 20px 46px;color:var(--ink2);font-size:.9rem;font-weight:500}
.trust span{display:inline-flex;align-items:center;gap:8px}.trust .ico{color:var(--accent)}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr 1fr}.hero{padding-top:72px}.hero-stage{min-height:420px}}
/* sections */
.sec{padding:64px 0}.sec.tint{background:var(--tint)}
.sec-head{max-width:640px;margin-bottom:30px}.sec-head h2,.sec h2{margin-top:0}
.cards3,.cards4{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.cards3,.cards4{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards3{grid-template-columns:repeat(3,1fr)}.cards4{grid-template-columns:repeat(4,1fr)}}
.gcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.gcard:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:var(--line2);color:var(--ink)}
.gc-art{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:170px;padding:18px 18px 0;background:linear-gradient(180deg,var(--art-a),var(--art-b))}
.gc-art .photo{height:150px;width:auto}
.gc-icon{align-items:center;color:var(--accent)}.gc-icon .ico{width:54px;height:54px}
.gc-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.gc-body h3{margin:0 0 .45em;font-size:1.18rem}
.gc-body p:not(.eyebrow){font-size:.92rem;color:var(--muted);margin-bottom:.9em}
.gc-body .textlink{margin-top:auto}
.sec-h{margin:2em 0 .8em}
.two-col{display:grid;gap:32px}@media(min-width:900px){.two-col{grid-template-columns:.9fr 1.1fr;align-items:start}}
.qa{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qa li+li{border-top:1px solid var(--line)}
.qa a{display:flex;align-items:center;gap:14px;padding:17px 20px;text-decoration:none;font-weight:600;color:var(--ink)}
.qa a .ico{color:var(--accent)}.qa a:hover{background:var(--zebra);color:var(--ink)}.qa-arrow{margin-left:auto;color:var(--muted);transition:transform .15s}.qa a:hover .qa-arrow{transform:translateX(3px);color:var(--accent)}
.feature{display:grid;gap:28px;background:var(--dark);color:var(--on-dark);border-radius:var(--r28);padding:36px 28px;overflow:hidden;position:relative}
.feature h2{color:var(--white);margin:.1em 0 .5em}.feature h2 em{font-style:italic;color:var(--on-dark-accent)}
.feature p{color:var(--on-dark-2);max-width:34em}
.f-demo{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r20);padding:24px}
@media(min-width:900px){.feature{grid-template-columns:1.1fr .9fr;padding:56px;align-items:center}}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 0 20px;display:flex;flex-direction:column;overflow:hidden}
.lc-art{background:linear-gradient(180deg,var(--art-a),var(--art-b));display:flex;justify-content:center;padding:22px 20px 0;height:260px;margin-bottom:18px}
.lc-art .photo{height:238px;width:auto;filter:var(--drop-card)}
.lcard>.eyebrow,.lcard>h3,.lcard>p,.lcard>div:not(.lc-art){padding:0 20px}
.lcard h3{margin:0 0 .35em}.lc-best{font-size:.93rem;color:var(--muted)}
.lc-links{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.method .m-grid{display:grid;gap:22px;margin:8px 0 26px}@media(min-width:800px){.method .m-grid{grid-template-columns:repeat(3,1fr)}}
.m-grid>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.m-grid .ico{color:var(--accent);width:26px;height:26px}.m-grid h3{margin:.6em 0 .35em;font-size:1.1rem}.m-grid p{font-size:.94rem;color:var(--muted);margin:0}
/* article */
.agrid{display:grid;gap:40px;padding-bottom:30px}
@media(min-width:1040px){.agrid{grid-template-columns:minmax(0,1fr) 260px;gap:64px}}
.prose{max-width:700px;width:100%;min-width:0}
.prose.solo{margin:0 auto 40px}
.prose p,.prose li{font-size:1.06rem}
.prose section>p,.prose>p{max-width:68ch}
.ahead{padding:10px 0 4px}.ahead.center{text-align:center;max-width:780px;margin:0 auto}
.ahead.center .byline,.ahead.center .disclosure{justify-content:center}
.dek{font-size:1.2rem;line-height:1.55;color:var(--ink2);margin-bottom:1.1em}
.byline{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:6px}
.byline .avatar svg{width:38px;height:38px;display:block}
.byline p{margin:0;font-size:.88rem;line-height:1.45}.by{font-weight:600}.by a{text-decoration:none}.when{color:var(--muted)}.dot{margin:0 7px}
.disclosure{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;line-height:1.5;color:var(--muted);margin:14px 0 6px}
.disclosure .ico{width:16px;height:16px;margin-top:2px}
.answer-box{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r20);padding:26px 26px 24px;margin:26px 0 8px;box-shadow:var(--sh);overflow:hidden}
.answer-box:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(var(--accent2),var(--accent))}
.v-label{display:inline-flex;align-items:center;gap:8px;font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--soft);padding:8px 12px;border-radius:var(--pill);margin-bottom:14px}
.v-label .ico{width:15px;height:15px}
.answer-box h2{font-size:1.05rem;margin:0 0 10px;letter-spacing:.02em}
.answer-box p{font-family:var(--serif);font-size:1.28rem;line-height:1.5;font-variation-settings:"opsz" 24;margin:0;max-width:none}
.answer-box b{font-weight:640;background:linear-gradient(transparent 62%,var(--hl) 0)}
.pick-lines{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pick-lines li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:.95rem}
.vl-use{font-weight:650}.vl-arrow{color:var(--muted)}
.inline-ctas{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:8px 0 4px}
.inline-cta,.calc-cta-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.il-label{font:700 .72rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.v-art{display:flex;gap:6px;justify-content:flex-start;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line2)}
.v-art .photo{height:96px;width:auto}
.wide-v{max-width:860px;margin:26px auto 22px}
.toc-m{margin:18px 0 0;border:1px solid var(--line);border-radius:var(--r12);background:var(--card);padding:12px 16px}
.toc-m summary{font-weight:600;cursor:pointer}.toc-m ol{margin:10px 0 2px;padding-left:20px}.toc-m li{font-size:.95rem;margin:5px 0}
.toc{display:none}
@media(min-width:1040px){.toc{display:block;position:sticky;top:96px;align-self:start;margin-top:24px;font-size:.9rem}
 .toc-tool{display:grid;gap:8px}.toc-tool a{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r12);background:var(--card);text-decoration:none;font-weight:600;font-size:.86rem}.toc-tool .ico{color:var(--accent)}}
.prose section{scroll-margin-top:90px}
.prose h2{padding-top:.2em}
.fig{margin:6px 0 22px;background:linear-gradient(180deg,var(--art-a),var(--art-b));border-radius:var(--r18);padding:18px 18px 12px;display:flex;flex-direction:column;align-items:center}
.fig img{width:min(300px,70%);height:auto}
.fig figcaption{font-size:.82rem;color:var(--muted);margin-top:8px;text-align:center}
/* product card */
.products .muted{font-size:.9rem}
.pcard{display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r20);overflow:hidden;margin:18px 0;box-shadow:var(--sh)}
.pc-art{background:linear-gradient(180deg,var(--art-a),var(--art-b));display:flex;justify-content:center;align-items:flex-end;padding:20px 20px 0;height:250px}
.pc-art .photo{height:232px;width:auto;filter:var(--drop-card)}
.pc-body{padding:22px 24px 24px}
.pc-body h3{margin:0 0 .35em;font-size:1.4rem}
.pc-best{font-size:.98rem!important;color:var(--ink2)}
@media(min-width:700px){.pcard{grid-template-columns:220px 1fr}.pc-art{height:auto;min-height:100%;align-items:center;padding:20px}.pc-art .photo{height:auto;max-height:300px}}
.proscons{display:grid;gap:16px;margin:14px 0 6px}@media(min-width:560px){.proscons{grid-template-columns:1fr 1fr}}
.pc-h{font:700 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}.pc-h.pro{color:var(--pro)}.pc-h.con{color:var(--con)}
.pros,.cons{list-style:none;margin:0;padding:0}.pros li,.cons li{display:flex;gap:9px;font-size:.93rem!important;line-height:1.45;margin:0 0 9px}
.pros .ico{color:var(--pro);width:18px;height:18px;margin-top:1px}.cons .ico{color:var(--con);width:18px;height:18px;margin-top:1px}
.specs{margin:10px 0 16px;border-top:1px solid var(--line);padding-top:12px}.specs summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink2)}
.specs ul{margin:10px 0 0;padding-left:18px}.specs li{font-size:.9rem!important;color:var(--ink2);margin:4px 0}
.pc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}.pc-note{font-size:.8rem;color:var(--muted)}
/* tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r14);background:var(--card);margin:8px 0 20px;max-width:100%;min-width:0}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.93rem}
th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tbody tr:last-child>*{border-bottom:0}
thead th{background:var(--thead);font:600 .8rem/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.prose .tablewrap td,.prose .tablewrap th{font-size:.95rem}
.ctable{max-width:var(--wrap);margin:22px auto}
.ctable table{min-width:880px}
.ctable thead th{text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink);background:var(--white);vertical-align:bottom;padding-top:18px}
.ctable .th-p{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ctable .photo.mini{height:96px;width:auto}
.ctable tbody th{position:sticky;left:0;background:var(--rowhead);font-weight:600;min-width:150px;z-index:1;box-shadow:1px 0 0 var(--line)}
.ctable thead .corner{position:sticky;left:0;z-index:2;background:var(--white);box-shadow:1px 0 0 var(--line)}
.ctable tbody tr:nth-child(even) td{background:var(--zebra)}
.ctable td a[href^="http"]{font-size:.75rem;color:var(--accent);text-decoration:none;white-space:nowrap}
.buyrow td,.buyrow th{background:var(--thead)!important}
.srcdemo{font-size:.8rem;color:var(--accent);font-weight:600}
.picks{display:grid;gap:12px;max-width:var(--wrap);margin:0 auto 26px}@media(min-width:700px){.picks{grid-template-columns:repeat(3,1fr)}}@media(min-width:1000px){.picks{grid-template-columns:repeat(5,1fr)}}
.pick{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r14);padding:16px 18px;text-decoration:none;color:var(--ink)}
.pick:hover{border-color:var(--line2);box-shadow:var(--sh);color:var(--ink)}.pick .ico{color:var(--accent)}.pk-q{font-size:.84rem;color:var(--muted)}.pk-a{font:600 1.05rem/1.3 var(--serif)}
.arrowlist{padding-left:20px}
/* calc cta, faq, sources, related */
.calc-cta{display:flex;gap:16px;align-items:flex-start;background:var(--sage);border-radius:var(--r18);padding:22px 22px;margin:36px 0}
.cc-ico{background:var(--white);border-radius:var(--r12);padding:10px;color:var(--accent)}.cc-ico .ico{width:24px;height:24px}
.cc-t{font:600 1.15rem/1.3 var(--serif);margin:0 0 .3em}.calc-cta p{font-size:.95rem!important;margin:0 0 .5em}
.faq h3{font-size:1.05rem;margin:1.15em 0 .35em}
.faq p{color:var(--ink2);margin:0 0 12px}
.sources ol{padding-left:22px;margin:0}.sources li{font-size:.86rem!important;color:var(--muted);margin:6px 0;word-break:break-word}.sources a{color:var(--ink2)}
.sources h2{font-size:1.2rem}
.related{background:var(--tint);padding:52px 0 64px;margin-top:20px}.related h2{margin-top:0}
/* calculator */
.calcgrid{display:grid;gap:22px;max-width:1060px;margin:26px auto 40px}
@media(min-width:900px){.calcgrid{grid-template-columns:1fr 1fr;align-items:start}.result{position:sticky;top:96px}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r22);padding:24px;box-shadow:var(--sh)}
.calc fieldset{border:0;margin:0 0 18px;padding:0}
.calc legend{font:600 1.15rem/1.2 var(--serif);margin-bottom:6px;padding:0}
.calc label{display:block;font-weight:600;font-size:.88rem;margin:12px 0 6px;color:var(--ink2)}
.calc .unit{font-weight:400;color:var(--muted)}
.calc select,.calc input{width:100%;padding:13px 14px;border:1.5px solid var(--line2);border-radius:var(--r12);font:500 1rem var(--sans);color:var(--ink);background:var(--white);appearance:none;-webkit-appearance:none;box-sizing:border-box;height:49px;line-height:20px}
.calc select{background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.calc select:focus,.calc input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px var(--ring)}
.calc .row{display:grid;gap:0 14px;grid-template-columns:1fr 1fr}
.hint{font-size:.78rem;color:var(--muted);margin:5px 0 0}.err{color:var(--error);font-size:.9rem;margin:8px 0 0}
.result.dark,.f-demo{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.result h3{color:var(--white);font-size:1.05rem;margin:1.4em 0 .6em}
.r-label{font:600 .86rem/1.3 var(--sans);color:var(--on-dark-2);margin:0 0 6px}
.big{font:600 3.4rem/1 var(--serif);color:var(--white);margin:0 0 6px;letter-spacing:-.02em}.big span{font-size:1.1rem;color:var(--on-dark-2);margin-left:6px}
.mid{font:600 1.8rem/1.1 var(--serif);color:var(--white);margin:0}
.r-break{font-size:.85rem;color:var(--on-dark-2)}
.r-fill{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;padding:16px 0;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
.bottles{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.bottles .b{width:22px;height:46px;border-radius:7px 7px 6px 6px;border:2px solid var(--on-dark-accent);position:relative;overflow:hidden;--f:0%}
.bottles .b:before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--f);background:var(--accent2)}
.bottles .b.full:before{height:100%}.bottles .more{color:var(--on-dark-accent);font-weight:600;align-self:center}
.sched{list-style:none;margin:0;padding:0;counter-reset:s}.sched li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--dark-line);font-size:.93rem}.sched li b{color:var(--on-dark-accent);font-weight:600}
.fills{width:100%;font-size:.9rem}.fills th,.fills td{border-color:var(--dark-line);padding:8px 4px;color:var(--on-dark);background:transparent!important}.fills thead th{color:var(--on-dark-2);font-size:.72rem}
.result a{color:var(--on-dark-accent)}.result p{font-size:.95rem}
/* footer */
footer.site{background:var(--dark);color:var(--on-dark-2);margin-top:0;padding:56px 0 30px;font-size:.92rem}
.fwrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:grid;gap:30px}
@media(min-width:800px){.fwrap{grid-template-columns:1.4fr 1fr 1fr}}

footer p{color:var(--on-dark-2);max-width:30em;line-height:1.6}
.fh{font:700 .9rem/1.2 var(--sans)!important;color:var(--white)!important;margin:6px 0 14px}
footer ul{list-style:none;margin:0 0 20px;padding:0}footer li{margin:8px 0}footer a{color:var(--on-dark);text-decoration:none}footer a:hover{color:var(--on-dark-accent)}
.fbase{grid-column:1/-1;border-top:1px solid var(--dark-line);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.8rem}.fbase p{max-width:none;margin:0;color:var(--on-dark-3)}
.notfound{text-align:center;padding:90px 0 110px;max-width:620px;margin:0 auto}.notfound .hero-ctas{justify-content:center}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* iteration 2 */
.fig{max-width:100%}.fig img{width:auto!important;max-width:230px!important;max-height:280px}
@media(min-width:760px){.fig{float:right;width:250px;margin:6px 0 14px 26px;padding:14px 12px 10px}.fig img{max-width:200px!important}}
.prose section:after{content:"";display:table;clear:both}
.pc-art .photo{width:auto;max-width:100%}
@media(min-width:700px){.pc-art{padding:24px 14px}.pc-art .photo{width:100%;max-width:190px;height:auto;max-height:none}}
.v-art .photo{height:120px}
.hero-stage{padding:20px 6px 18px;gap:0}
.hero-stage .photo{width:31%!important;margin:0 -3.5%}
.hero-stage .photo:nth-child(2){width:27%!important}.hero-stage .photo:nth-child(4){width:25%!important}
.toc{margin-top:120px}
.result .big,.f-demo .big{font:600 3.4rem/1 var(--serif);margin:0 0 8px}
.result .mid{font:600 1.9rem/1.1 var(--serif);margin:0}
.result .r-label,.f-demo .r-label{font:600 .86rem/1.3 var(--sans);margin:0 0 6px}
.result .r-break{font-size:.85rem}
.ahead.center .disclosure{max-width:620px;margin-left:auto;margin-right:auto;text-align:left}
@media(max-width:600px){.hero-stage{min-height:260px;padding:16px 0 14px}.hero-stage .photo{width:33%!important;margin:0 -4%}.hero-stage .photo:nth-child(2){width:28%!important}.hero-stage .photo:nth-child(4){width:27%!important}.ctable{margin-left:-20px;margin-right:-20px;border-radius:0;border-left:0;border-right:0}}
@media(max-width:600px){.answer-box{padding:22px 20px}.answer-box p{font-size:1.12rem}.dek{font-size:1.08rem}}
.ctable td a.cta,.ccard a.cta{color:var(--white);font-size:.84rem;white-space:nowrap}
.ccards{display:none}
.ccard{border:1px solid var(--line);border-radius:var(--r16);background:var(--card);padding:16px 16px 18px}
.ccard h3{margin:0 0 4px;font-size:1.15rem}.ccard .fit{margin:0 0 10px;color:var(--ink2)}
.ccard dt{font-size:.75rem;color:var(--muted);margin-top:8px}.ccard dd{margin:0}
@media(max-width:700px){.ctable{display:none}.ccards{display:grid;gap:14px;margin:8px 0 18px}}
.consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:.92rem}
.consent input{margin-top:3px}.result h2.rh{color:var(--white);font-size:1.05rem;margin:1.4em 0 .6em;font-variation-settings:"opsz" 36}
.errline{margin:2rem 0 0;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:10px;font-size:.95rem;background:var(--paper2)}
.errline a[href^="mailto"]{overflow-wrap:anywhere}
.contact-form{display:grid;gap:0;margin:8px 0 28px;max-width:36rem}
.contact-form label{font-weight:600;font-size:.88rem;margin:14px 0 6px;color:var(--ink2)}
.contact-form input,.contact-form textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line2);border-radius:var(--r12);font:500 1rem/1.45 var(--sans);color:var(--ink);background:var(--white)}
.contact-form textarea{min-height:160px;resize:vertical;font-weight:400}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px var(--ring)}
.contact-form .cta{margin-top:18px;justify-self:start}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Bottle Match quiz */
.quiz{max-width:760px;margin:0 auto 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;box-shadow:var(--sh)}
.qq{border:0;margin:0 0 20px;padding:0}.qq legend{font:600 1.12rem/1.3 var(--serif);margin-bottom:10px}
.qopts{display:flex;flex-wrap:wrap;gap:10px}
.qopt{position:relative;cursor:pointer}.qopt input{position:absolute;opacity:0;width:1px;height:1px}
.qopt span{display:inline-block;padding:11px 16px;border:1.5px solid var(--line2);border-radius:var(--pill);font:500 .95rem/1.2 var(--sans);background:var(--paper)}
.qopt input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--white)}
.qopt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.qsubmit{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.qresult{margin:0;font-weight:600;color:var(--accent)}
.matches{margin:46px 0 10px}.mgrid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.mgrid{grid-template-columns:1fr 1fr}}@media(min-width:1100px){.mgrid{grid-template-columns:repeat(3,1fr)}}
.mcard{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;transition:opacity .2s,box-shadow .2s,border-color .2s}
.mc-art{flex:0 0 84px}.mc-art .photo,.mc-art svg{width:84px;height:auto}
.mc-body h3{margin:.1em 0 .2em;font-size:1.2rem}.mc-tag{margin:0 0 .6em;color:var(--ink2)}
.mc-body ul{list-style:none;padding:0;margin:0 0 12px}.mc-body li{display:flex;gap:8px;font-size:.93rem;line-height:1.45;margin:4px 0}
.mc-body .lc-links{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.mcard.is-match{border:2px solid var(--accent);box-shadow:var(--sh)}.mcard.is-dim{opacity:.62}
.mc-badge{display:inline-block;background:var(--accent);color:var(--white);font:700 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:var(--pill);margin:0 0 8px}
.mc-badge[hidden]{display:none}
.prose.narrow{max-width:760px;margin:30px auto 0}
.quizband{background:var(--sage);border-radius:var(--r);padding:26px 24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.quizband h2{margin:0 0 .2em}.quizband p{margin:0;color:var(--ink2)}
/* /links/ hub */
.linkhub{max-width:560px;padding-top:34px;padding-bottom:40px}.linkhub h1{font-size:clamp(1.7rem,5vw,2.2rem);margin:.5em 0 .2em}
.lh-brand{justify-content:center}.lh-h{font-size:1.1rem;margin:28px 0 10px}
.lstack{display:flex;flex-direction:column;gap:10px}
.lbtn{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r14);padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--sh)}
.lbtn:hover{border-color:var(--ink);color:var(--ink)}.lbtn span{display:flex;flex-direction:column;flex:1;line-height:1.35}
.lbtn small{color:var(--muted);font-size:.86rem}.lbtn .ico{color:var(--accent);flex:0 0 auto}
.lbtn.primary{background:var(--ink);color:var(--white);border-color:var(--ink)}.lbtn.primary small{color:var(--on-ink-2)}.lbtn.primary .ico{color:var(--accent2)}
.lh-disc{font-size:.86rem;color:var(--muted);margin-top:26px;text-align:center}
/* Corporate pages: quote form and team band */
.quote-form{max-width:44rem}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.qgrid>div{display:flex;flex-direction:column}
.quote-form select{width:100%;padding:13px 38px 13px 14px;border:1.5px solid var(--line2);border-radius:var(--r12);font:500 1rem var(--sans);color:var(--ink);background:var(--white);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.quote-form select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px var(--ring)}
.quote-form textarea{min-height:110px}
.qnote{font-size:.88rem!important;color:var(--muted);margin:16px 0 0!important}
.qstatus{font-weight:600;margin:12px 0 0!important;min-height:1.2em}
.quote-form button:disabled{opacity:.6;cursor:wait}
.fig svg.illo{width:auto;max-width:230px;height:auto}
.teamband{display:flex;gap:24px;align-items:center;justify-content:space-between;background:var(--sage);border-radius:var(--r22);padding:28px 30px}
.teamband h2{margin:.1em 0 .3em}.teamband p{margin:0}.teamband .cta{flex:none}
@media (max-width:700px){.qgrid{grid-template-columns:1fr}.teamband{flex-direction:column;align-items:flex-start;padding:22px}}
.giftband{background:var(--soft);border:1px solid var(--line)}
.quick-picks,.hub-picker{margin:22px 0 8px}
.quick-picks h2,.hub-picker h2{margin-top:.2em}
.quick-picks table,.hub-picker table{min-width:640px}
.quick-picks td .cta{white-space:nowrap}
.hub-quote{display:flex;gap:16px;align-items:center;justify-content:space-between;background:var(--sage);border-radius:var(--r18);padding:16px 18px;margin:18px 0 8px}
.hub-quote p{margin:0;font-size:.95rem!important}
.answer-box .hub-quote p:not(.cc-t){font-family:var(--sans);font-variation-settings:normal}
.hub-quote .cc-t{margin:0 0 .25em}
.hub-quote .cta{flex:none}
@media(max-width:700px){.hub-quote{flex-direction:column;align-items:flex-start}}
.sticky-quote{position:fixed;z-index:40;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:var(--btn);color:var(--white);font:600 .92rem/1 var(--sans);padding:14px 18px;border-radius:var(--pill);text-decoration:none;box-shadow:var(--shadow-float)}
.sticky-quote:hover{background:var(--btn-hover);color:var(--white)}
body.has-sticky-quote{padding-bottom:88px}
@media(max-width:720px){.sticky-quote{left:0;right:0;bottom:0;border-radius:0;justify-content:center;padding:14px 16px}}
.cfig{width:100%;box-sizing:border-box}.cfig figcaption{max-width:30rem}


/* ---- Gift site additions ---- */
.staging-bar{background:var(--bar);color:var(--white);font:600 .8rem/1.3 var(--sans);text-align:center;padding:7px 12px}
.exbadge{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:var(--pill);background:var(--note-bg);color:var(--note-ink);font:700 .64rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.cta.pending{background:var(--tint);color:var(--muted);cursor:not-allowed;border:1.5px dashed var(--line2)}
.cta.pending:hover{background:var(--tint);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:var(--pill);padding:6px 12px;font-size:.84rem}.chip b{color:var(--accent);font-weight:600;margin-right:4px}
.pc-who{font-size:.9rem!important;color:var(--muted);margin:-.4em 0 .6em}
.pfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:10px 0 16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pfacts dt{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.pfacts dd{margin:0;font-weight:600;font-size:.95rem}

.gcardp .pc-art .photo{max-width:170px}
.season-note{display:flex;gap:14px;align-items:flex-start;background:var(--note-bg);border:1px solid var(--note-line);border-radius:var(--r16);padding:16px 18px;margin:18px 0}
.season-note .ico{color:var(--note-ink);width:24px;height:24px;flex:none}.season-note p{margin:0 0 .3em}
.legal-draft{display:block}
.calc-cta .cc-body{min-width:0;flex:1}.calc-cta .tablewrap{margin:8px 0 10px}
.countdown{display:inline-block;font-weight:600;color:var(--accent);white-space:nowrap}
.countdown.is-urgent{color:var(--error)}.countdown.is-passed{color:var(--muted);text-decoration:line-through}
.result .countdown{color:var(--on-dark-accent)}
.occ .gc-body{padding-top:22px}.occ-when,.occ-next{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:.92rem!important;color:var(--ink2)!important;margin:0 0 .6em!important}
.occ-when .ico{width:18px;height:18px;color:var(--accent)}
.hub-count{max-width:760px;margin:22px auto 8px;display:grid;gap:6px 30px}
@media(min-width:760px){.hub-count{grid-template-columns:1fr 1fr;align-items:end}.hub-count>.r-label:nth-of-type(1),.hub-count>.big{grid-column:1}.hub-count>.r-label:nth-of-type(2),.hub-count>.mid,.hub-count>.r-break{grid-column:2}}
.hub-count{grid-auto-flow:dense}
.sec-tight h2,#guides h2,.quick-picks h2{margin-top:1.6em}
.dl-table table{min-width:640px}.dl-note{font-size:.86rem;margin-top:-8px}
.qa.soon li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:15px 20px;font-size:.95rem}
.qa.soon li a{display:inline;padding:0;font-weight:600}
.center-row{justify-content:center;margin:14px 0 22px}
.embed{max-width:760px;margin:36px auto 0}.embed textarea{width:100%;font:500 .82rem/1.5 var(--mono);padding:12px;border:1.5px solid var(--line2);border-radius:var(--r12);background:var(--white);color:var(--ink)}
.gift-stage{align-items:flex-end;gap:8px;padding:30px 16px 24px!important}
.gift-stage .photo{width:32%!important;margin:0!important;height:auto}
.gift-stage .photo:nth-child(2){width:38%!important}
.gc-art .photo{height:130px;width:auto}
.sched li small{color:var(--on-dark-2)}.sched li a{white-space:nowrap}
/* printable / embeddable deadline table */
body.printable{background:var(--white)}
.printwrap{max-width:1000px;margin:0 auto;padding:20px}
.print-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:16px}
.print-head h1{font-size:1.6rem;margin:0}.print-head p{margin:.2em 0 0;font-size:.85rem}
.print-foot{font-size:.82rem;color:var(--muted);margin-top:12px}
@media print{.noprint,.staging-bar{display:none!important}.printwrap{padding:0}.tablewrap{border:0;overflow:visible}.dl-table table{min-width:0}a{text-decoration:none;color:var(--black)}th,td{padding:7px 8px}}
table.cmp{min-width:0}.quick-picks table.cmp{min-width:600px}
.cmp td,.cmp th{padding:12px 12px}.cmp .nw{white-space:nowrap}
.cmp .ord{display:block;white-space:nowrap;font-size:.86rem}
.cmp td .cta{white-space:nowrap}
.dl-list{list-style:none;margin:8px 0 12px;padding:0}
.dl-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:10px 0;border-bottom:1px dashed var(--line2);font-size:.93rem!important}
.dl-list small{color:var(--muted)}
.big .num{font:inherit;color:var(--white);margin:0;letter-spacing:inherit}
@media(max-width:700px){
 .quick-picks table.cmp{min-width:0}
 .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .cmp tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:14px 16px;border-bottom:1px solid var(--line)}
 .cmp tbody tr:last-child{border-bottom:0}
 .cmp th,.cmp td{display:block;padding:0;border:0!important}
 .cmp th[scope=row]{grid-column:1/-1;font-size:1rem}
 .cmp td[data-label="Made for"]{grid-column:1/-1}
 .cmp td:before{content:attr(data-label);display:block;font:600 .68rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
 .cmp td[data-label="Offer"]:before{content:none}.cmp td[data-label="Offer"]{align-self:end}
 .dl-table table{min-width:560px}
}
@media(max-width:700px){.dl-table table.dl{min-width:0}.cmp.dl td[data-label="Order type"]{grid-column:1/-1}.cmp.dl td[data-label="Occasion"]{grid-column:1/-1}}
@media print{.cmp thead{position:static;width:auto;height:auto;clip:auto}.cmp tr{display:table-row}.cmp th,.cmp td{display:table-cell}.cmp td:before{content:none}}
.calc .consent{display:flex;font-weight:500}.calc .consent input{width:18px;height:18px;padding:0;margin:3px 0 0;appearance:auto;-webkit-appearance:checkbox;flex:none}
.sched li b{white-space:nowrap}
/* Home hub tiles (by recipient / budget), also used for hub children */
.tiles{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r16);padding:12px 16px;text-decoration:none;color:var(--ink);min-height:76px;transition:box-shadow .2s,border-color .2s}
.tile:hover{box-shadow:var(--sh);border-color:var(--line2);color:var(--ink)}
.tile .t-ico{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r12);background:var(--sage);overflow:hidden}
.tile .t-ico .photo,.tile .t-ico svg{width:44px;height:44px;max-width:44px}
.tile .t-body{display:flex;flex-direction:column;min-width:0;flex:1}
.tile .t-k{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tile .t-h{font-weight:650;font-size:1.02rem;line-height:1.25}
.tile .t-arrow{flex:none;color:var(--accent);font-weight:700}
.prose .tiles{margin:12px 0 6px}.prose .tile{color:var(--ink)}
.hero .jump{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;font-size:.92rem}
.hero .jump a{font-weight:600}
.occ-block{margin:30px 0 8px}.occ-block h2 small{display:block;font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--muted);margin-top:.25em}
.occ-guides{margin-top:8px}
.chips.center-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
a.chip{text-decoration:none}
.occ-when{flex-wrap:nowrap!important;align-items:flex-start!important}.occ-when .ico{flex:none;margin-top:2px}
@media(min-width:1000px){.tiles.t4{grid-template-columns:repeat(4,1fr)}}
/* Five nav items: wrap onto two rows on phones instead of hiding the last ones off-screen */
.occ-grid{display:grid;gap:14px;grid-template-columns:1fr}@media(min-width:900px){.occ-grid{grid-template-columns:repeat(3,1fr)}}
.occ-grid .occ-block{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r16);padding:16px 18px}
.occ-grid .occ-block h2{font-size:1.35rem;margin:0 0 .4em}
@media(min-width:640px){.prose .tiles{grid-template-columns:1fr 1fr}}

/* ---- Letterpress treatments: cream stationery, cranberry and gold. Centered masthead, framed cards.
   Display serif + text sans (see brand/fonts.css). Every colour, font, type size and radius is a token from brand/.
   Every selector is scoped to the html element (:root) so these rules layer over the base rules above
   with the same cascade the reviewed design had (one attribute-level step of specificity). ---- */
:root h1,:root h2{text-wrap:balance}
:root h1,:root h2,:root h3{font-weight:var(--fw-heading);font-variation-settings:"opsz" 120}
:root h2,:root h3{font-variation-settings:"opsz" 48}
:root .eyebrow{color:var(--accent);letter-spacing:var(--ls-eyebrow);font-size:var(--fs-eyebrow)}
:root .eyebrow.light{color:var(--on-dark-accent)}
:root nav.main a[aria-current]{background:transparent;color:var(--accent)}
@media(min-width:900px){
 :root .hwrap{flex-direction:column;gap:6px;padding:16px 20px 8px}
 :root header.site{border-bottom:1px solid var(--line2);box-shadow:0 3px 0 -2px var(--paper),0 4px 0 -2px var(--line2)}}
/* home hub */
:root .hero{background:radial-gradient(900px 420px at 50% 0%,var(--glow) 0,transparent 70%),var(--paper);padding-top:48px}
:root .hero-grid{grid-template-columns:1fr!important;gap:28px;justify-items:center;text-align:center}
:root .hero-copy{max-width:820px;display:flex;flex-direction:column;align-items:center}
:root .hero h1{max-width:18ch;margin-left:auto;margin-right:auto;font-size:var(--fs-hero)}
:root .hero-dek{margin-left:auto;margin-right:auto}
:root .hero .disclosure{max-width:560px;text-align:left}
:root .hero-ctas,:root .hero .jump{justify-content:center}
:root .hero-art{width:100%;max-width:640px}
:root .hero-stage{min-height:200px!important;border-radius:999px 999px 24px 24px;background:linear-gradient(180deg,var(--art-a),var(--art-b));padding:22px 10px 16px}
:root .hero-stage .photo{width:26%!important}
:root .hero-stage .photo:nth-child(2){width:24%!important}
@media(max-width:899px){:root .hero-stage{min-height:170px!important}}
:root .credit{text-align:center}
:root .trust .ico{color:var(--accent2)}
:root .sec-head{text-align:center;margin-left:auto;margin-right:auto}
:root .sec-head .eyebrow{display:flex;justify-content:center;align-items:center;gap:12px}
:root .sec-head .eyebrow:before,:root .sec-head .eyebrow:after{content:"";width:34px;height:1px;background:var(--accent2)}
:root .sec.tint{background:var(--tint)}
:root .tile{border-radius:18px;padding:14px 18px}
:root .tile:hover{border-color:var(--accent2)}
:root .tile .t-ico{border-radius:50%;background:var(--art-a);box-shadow:inset 0 0 0 1px var(--line2)}
:root .tile .t-k{letter-spacing:.12em;font-size:.68rem;color:var(--accent)}
:root .tile .t-h{font-family:var(--serif);font-weight:560;font-size:1.16rem;font-variation-settings:"opsz" 36}
:root .tile .t-arrow{color:var(--accent2)}
:root .gcard{border-color:var(--line2);box-shadow:0 0 0 4px var(--card) inset,0 0 0 5px var(--line) inset}
:root .gc-body{padding:22px 24px 24px}
:root .feature{background:radial-gradient(600px 300px at 90% 0,var(--dark-glow) 0,transparent 70%),var(--dark)}
:root .feature h2 em{color:var(--on-dark-accent)}
:root .m-grid>div{text-align:center}
:root .m-grid .ico{color:var(--accent2);margin:0 auto}
/* guide */
:root .ahead{text-align:center;max-width:760px;margin:0 auto}
:root .ahead .eyebrow{justify-content:center}
:root .ahead .byline{justify-content:center;text-align:left}
:root .ahead .disclosure{text-align:left}
:root .dek{font-family:var(--serif);font-size:var(--fs-dek);font-variation-settings:"opsz" 24}
:root .byline{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
:root .answer-box{border:1px solid var(--accent2);box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--line2);padding:22px 26px 22px;margin-top:34px;overflow:visible}
:root .answer-box:before{display:none}
:root .answer-box b{background:linear-gradient(transparent 62%,var(--hl) 0)}
:root .prose h2{text-align:left}
:root .prose .tablewrap thead th{color:var(--accent)}
:root .pcard{border-color:var(--line2)}
:root .calc-cta{background:var(--sage)}
:root .cc-ico,:root .toc-tool .ico{color:var(--accent)}
:root .related{background:var(--tint)}
/* Short-answer pick rows: label over product name, button pinned right, same shape on every row */
:root .pick-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center}
:root .pick-lines .vl-use{grid-column:1;font-size:.8rem;letter-spacing:.02em;color:var(--muted);font-weight:600}
:root .pick-lines .vl-arrow{display:none}
:root .pick-lines .vl-name{grid-column:1;font-weight:600}
:root .pick-lines li>.cta{grid-column:2;grid-row:1/span 2}
/* Narrow screens: the button stacks under the name so the name keeps the full row width */
@media (max-width:640px){:root .pick-lines li{grid-template-columns:minmax(0,1fr);row-gap:6px}:root .pick-lines li>.cta{grid-column:1;grid-row:auto;justify-self:start;margin-top:2px}}

/* ---- Homepage, simplified (Shaun's cut list + soc's copy, Oct 21): fewer blocks, more white space ---- */
.home .sec{padding:88px 0}
.chooser-grid{display:grid;gap:28px}
.chooser-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.chooser-head h2{margin:0}
.card-art{display:block;width:150px;height:auto;border-radius:var(--r16)}
@media(min-width:900px){.chooser-grid{grid-template-columns:260px 1fr;gap:48px;align-items:start}.chooser-head{flex-direction:column;align-items:flex-start}.card-art{width:100%}}
.home .tile{min-height:64px}
@media(max-width:639px){.home .tiles{grid-template-columns:1fr 1fr;gap:10px}.home .tile{padding:12px;gap:10px}.home .tile .t-ico{display:none}.home .tile .t-arrow{display:none}.card-art{width:110px}}
@media(min-width:1000px){.home .tiles.t3{grid-template-columns:repeat(3,1fr)}}
.dates-grid{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.dates-grid{grid-template-columns:260px 1fr;gap:48px}.dates-grid .card-art{width:100%}}
.dates-grid h2{margin:0 0 .6em}
ul.soon{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--line)}
ul.soon li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
ul.soon li b{min-width:8.5em}ul.soon li span{color:var(--ink2)}ul.soon .countdown{margin-left:auto;color:var(--muted);font-size:.88rem}
.feature.slim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.feature.slim h2{margin:0 0 .3em}.feature.slim p{margin:0}
.research{padding-top:0!important}
.research-line{max-width:46em;margin:0 auto;text-align:center;color:var(--ink2)}
.research-line a{font-weight:600;color:var(--accent)}
/* One small muted Amazon line (footer everywhere, above the first pick on guides) and the one-line byline. */
.disc-line{font-size:.8rem;line-height:1.5;color:var(--muted);margin:10px 0}
.disc-line a{color:inherit}
.fbase .disc-line{color:var(--on-dark-2)}
.byline-line{font-size:.86rem;color:var(--muted);margin:.2em 0 1em}
.byline-line a{color:inherit;font-weight:600}
.ahead.center .byline-line{text-align:center}
.method-note{border-top:1px solid var(--line);margin-top:2em;padding-top:1em}.method-note h2{font-size:1.1rem}
.method-note p,.tax-note{color:var(--muted);font-size:.92rem}
/* Homepage hero: a compact band (Praveen, Oct 21: the chooser cards must start on the first screen).
   Desktop: text left, Gen's art right (object-fit cover), band <= 340px. Below 900px: a square close-up beside the intro (see below); the <picture> source loads only that crop. */
:root .home-hero{padding:0;background:var(--paper)}
:root .home-hero .hero-band{display:grid;gap:0;align-items:center}
:root .home-hero .hero-copy{display:block;max-width:none;text-align:left;padding:28px 0 20px}
:root .home-hero h1{margin:0 0 .35em;font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1.05;max-width:none}
:root .home-hero .hero-dek{margin:0;max-width:30em;font-size:1.05rem}
:root .home-hero .hero-ctas{justify-content:flex-start;margin-top:18px}
.home-hero .hero-media{margin:0 -20px;height:96px;overflow:hidden}
.home-hero .hero-media picture{display:block;height:100%}
.home-hero .hero-img{display:block;width:100%;height:100%;object-fit:cover;object-position:75% 60%}
@media(min-width:900px){
  :root .home-hero .hero-band{grid-template-columns:1fr 1fr;gap:40px;height:340px}
  :root .home-hero .hero-copy{padding:0}
  .home-hero .hero-media{margin:0;height:300px;border-radius:var(--r28)}
  .home-hero .hero-img{object-position:80% 55%}
}
.home .sec{padding:56px 0}
.home .sec.chooser:first-of-type{padding-top:40px}
@media(max-width:639px){
  .home .sec{padding:36px 0}
  :root .home-hero .hero-copy{padding:20px 0 16px}
  :root .home-hero .hero-dek{font-size:1rem}
  .chooser-grid{gap:16px}
  .home .card-art{width:84px}
}
/* Phones and tablets (<900px): Gen's square close-up as a thumbnail beside the intro (120px on phones, 168px from 640px).
   The <picture> source serves only the small crop below 900px. */
@media(max-width:899px){
  :root .home-hero .hero-band{grid-template-columns:minmax(0,1fr) 120px;column-gap:16px;align-items:center;
    grid-template-areas:"h1 h1" "dek media" "cta media";padding-top:20px;padding-bottom:18px}
  :root .home-hero .hero-copy{display:contents}
  :root .home-hero h1{grid-area:h1}
  :root .home-hero .hero-dek{grid-area:dek;align-self:end}
  :root .home-hero .hero-ctas{grid-area:cta;align-self:start;margin-top:14px}
  .home-hero .hero-media{grid-area:media;margin:0;width:120px;height:120px;border-radius:var(--r16)}
  .home-hero .hero-img{object-position:50% 50%}
}
@media(max-width:899px){.chooser-head .card-art{display:none}}
/* Tablets: the thumbnail sits beside the whole intro (headline, dek and button). */
@media(min-width:640px) and (max-width:899px){
  :root .home-hero .hero-band{grid-template-columns:minmax(0,1fr) 168px;column-gap:32px;padding-top:28px;padding-bottom:28px;
    grid-template-areas:"h1 media" "dek media" "cta media";grid-template-rows:auto auto auto;align-content:center}
  :root .home-hero h1{align-self:end}
  :root .home-hero .hero-dek{align-self:start}
  .home-hero .hero-media{width:168px;height:168px}
}
/* Tablet header (721-899px): logo above a one-line menu, as on desktop, so no menu item wraps onto two lines. */
@media(min-width:721px) and (max-width:899px){:root .hwrap{flex-direction:column;gap:6px;padding:14px 20px 8px}nav.main a{white-space:nowrap}}
/* Phone header: logo, then the menu as one horizontally scrollable row. */
@media(max-width:720px){nav.main{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}:root .hwrap{gap:2px;padding:10px 20px 4px}}
/* Phone nav: one scrolling row. The right edge fades out so the row reads as scrollable; the fade goes once the row
   is scrolled to its end (the inline script in the header toggles .at-end) and whenever keyboard focus is in the nav,
   so focus rings are never dimmed. The padding keeps the focus ring inside the scroll box, which would clip it. */
@media(max-width:720px){
 nav.main{width:calc(100% + 16px);margin:-7px -8px;padding:7px 8px;box-sizing:border-box;
  -webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - 48px),transparent);mask-image:linear-gradient(to right,var(--ink) calc(100% - 48px),transparent)}
 nav.main.at-end,nav.main:focus-within{-webkit-mask-image:none;mask-image:none}}
/* Clients hub: compact cards right under the intro, so the short answer still starts on the first screen. */
#in-this-hub{margin:0 0 4px}#in-this-hub h2{font-size:1.05rem;margin:.4em 0 .6em}
#in-this-hub .tiles{gap:8px}
#in-this-hub .tile{min-height:0;padding:10px 14px}#in-this-hub .tile .t-ico{display:none}
#in-this-hub .tile .t-h{font-size:.95rem}
@media(min-width:1000px){#in-this-hub .tiles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:639px){#in-this-hub .tiles{display:flex;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px}#in-this-hub .tile{flex:0 0 auto}#in-this-hub .tile .t-arrow{display:none}}