/* 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}
.dek{font-size:1.2rem;line-height:1.55;color:var(--ink2);margin-bottom:1.1em}
.by{font-weight:600}.by a{text-decoration:none}.when{color:var(--muted)}.dot{margin:0 6px}
.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}}
.pc-art .product-photo{filter:none;object-fit:contain;height:auto;width:auto;max-width:100%;max-height:220px;min-width:0;background:var(--card)}
@media(min-width:700px){.pc-art .product-photo{max-width:190px;max-height:260px}}
.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}
@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)}
.date-caveat{color:var(--muted);font-size:.82rem!important;font-weight:400;margin:4px 0 12px!important}.dl-list+.date-caveat,ul.soon+.date-caveat{margin-top:-6px!important}.calc-cta p.date-caveat{font-size:.82rem!important}
.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-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 .dek{font-family:var(--serif);font-size:var(--fs-dek);font-variation-settings:"opsz" 24}
: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}
/* Top block (Oct 23): byline then the Amazon line, tight, no rules or icons. */
.ahead .byline-line{margin:0}.ahead .disc-line{margin:2px 0 0}.ahead .dek{margin-bottom:.5em}
.ahead.center .byline-line,.ahead.center .disc-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}}
/* soc's answer-first summary (Oct 22): the page's first paragraph under the H1 and byline, in body text. No box, border,
   background, icon or label. It replaces the dek on the page (the meta description is unchanged). */
.ahead .summary{font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--sans);color:var(--ink);text-align:left;margin:.4em 0 1em}
/* Homepage (Shaun, Oct 22): the hero keeps its one-line subline; soc's summary is a plain paragraph below the
   "Who is the gift for?" cards, and any not-a-guarantee wording in it is the small muted dl-note line under it. */
.home-summary{padding-top:0!important}.home-summary .summary{max-width:46em;margin:0 0 .4em}
.home-faq{padding-top:0!important}
/* The not-a-guarantee line in a guide's order-by box: the same small muted dl-note line as under the calendar table. */
.calc-cta p.dl-note{font-size:.86rem!important;margin:.2em 0 .6em}

/* Value-first first screen (tf#95 / playbook §5a): H1, value line, disclosure, then compact picks. */
.vf-lede{font-size:1rem;line-height:1.4;color:var(--ink2);margin:0 0 10px;text-align:left}
.ahead.vf{text-align:left;padding-bottom:0}
.ahead.vf .vf-lede{margin:0 0 4px}
.ahead.vf .disc-line{max-width:none;font-size:.76rem;margin:0 0 10px;line-height:1.4;text-align:left}
.vf-picks{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 10px 8px;margin:0 0 14px;box-shadow:var(--sh)}
.vf-list ol{list-style:none;margin:0;padding:0}
.vf-list li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line);font-size:.86rem;line-height:1.35}
.vf-list li:last-child{border-bottom:0}
.vf-list .vf-name{font-weight:700;grid-column:1}
.vf-list .vf-price{grid-column:1;margin-top:0;font-weight:600;font-size:.8rem;color:var(--muted)}
.vf-list li .cta.sm{grid-column:2;grid-row:1/span 3;width:auto;max-width:8.5rem;white-space:normal;text-align:center;line-height:1.2;padding:8px 6px}
@media(max-width:640px){.vf-list li{grid-template-columns:minmax(0,1fr);row-gap:6px}.vf-list li .cta.sm{grid-column:1;grid-row:auto;justify-self:start;max-width:none}}