/* Pride Printing & Mailing Services: "Paper & ink" design (matches the original Paper & ink mockup).
   Warm ink (dark, default) / warm paper (light). CMYK registration accents. Self-hosted OFL fonts: Fraunces, Inter, IBM Plex Mono. No animation. */
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* ink (dark, default) */
:root{--bg:#211e19;--bg-deep:#1a1712;--paper:#e8e2d4;--on-paper:#1a1712;--ink:#e8e2d4;--strong:#f4efe4;--muted:#b9b1a2;--label:#aaa192;--line:#e8e2d424;--line-strong:#e8e2d455;--mark:#e8e2d466;--accent:#8c2122;--accent-hover:#a5292a;--on-accent:#fff;--btn-shadow:#0b0a08;--link:#ef6b6c;--focus:#ef6b6c;--nav-bg:#1a1712f5;--logo-ink:#f4efe4;--todo-bg:#ef6b6c14;--shadow:#000000a0;--active-bg:#e8e2d40f;
  --c:#00aeef;--m:#ec008c;--y:#fff200;--k:#e8e2d4;--chip-m:#c8007a;--on-k:#1a1712;--grain-op:.05;color-scheme:dark;
  --display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Inter",system-ui,sans-serif;--serif:"Fraunces",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--max:1180px;--pad:clamp(20px,4.5vw,56px)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#f3ede1;--bg-deep:#ebe4d5;--paper:#fffcf5;--on-paper:#1f1b16;--ink:#1f1b16;--strong:#120f0c;--muted:#554e44;--label:#5f574b;--line:#1f1b1624;--line-strong:#1f1b1666;--mark:#1f1b1670;--accent:#8c2122;--accent-hover:#6e1a1b;--on-accent:#fff;--btn-shadow:#1f1b16;--link:#8c2122;--focus:#8c2122;--nav-bg:#f3ede1f5;--logo-ink:#120f0c;--todo-bg:#8c21220f;--shadow:#5a4a3040;--active-bg:#1f1b160d;--c:#0094cc;--m:#d1007f;--y:#e8c800;--k:#1f1b16;--chip-m:#c8007a;--on-k:#f3ede1;--grain-op:.06;color-scheme:light}}
:root[data-theme=light]{--bg:#f3ede1;--bg-deep:#ebe4d5;--paper:#fffcf5;--on-paper:#1f1b16;--ink:#1f1b16;--strong:#120f0c;--muted:#554e44;--label:#5f574b;--line:#1f1b1624;--line-strong:#1f1b1666;--mark:#1f1b1670;--accent:#8c2122;--accent-hover:#6e1a1b;--on-accent:#fff;--btn-shadow:#1f1b16;--link:#8c2122;--focus:#8c2122;--nav-bg:#f3ede1f5;--logo-ink:#120f0c;--todo-bg:#8c21220f;--shadow:#5a4a3040;--active-bg:#1f1b160d;--c:#0094cc;--m:#d1007f;--y:#e8c800;--k:#1f1b16;--chip-m:#c8007a;--on-k:#f3ede1;--grain-op:.06;color-scheme:light}
:root[data-theme=dark]{--bg:#211e19;--bg-deep:#1a1712;--paper:#e8e2d4;--on-paper:#1a1712;--ink:#e8e2d4;--strong:#f4efe4;--muted:#b9b1a2;--label:#aaa192;--line:#e8e2d424;--line-strong:#e8e2d455;--mark:#e8e2d466;--accent:#8c2122;--accent-hover:#a5292a;--on-accent:#fff;--btn-shadow:#0b0a08;--link:#ef6b6c;--focus:#ef6b6c;--nav-bg:#1a1712f5;--logo-ink:#f4efe4;--todo-bg:#ef6b6c14;--shadow:#000000a0;--active-bg:#e8e2d40f;--c:#00aeef;--m:#ec008c;--y:#fff200;--k:#e8e2d4;--chip-m:#c8007a;--on-k:#1a1712;--grain-op:.05;color-scheme:dark}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.6 var(--body);position:relative}
/* subtle paper/ink grain (inline SVG, no request) */
body::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--grain-op);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.footer{position:relative;z-index:1}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--strong);font-weight:600}
h1{font-size:clamp(44px,6.6vw,84px);line-height:1.02;letter-spacing:-.025em}
h2{font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.02em}
h3{font-size:19px;line-height:1.28;letter-spacing:-.005em}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--link)}
.lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:38em}
.lead a{color:var(--link)}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
address{font-style:normal}
.visually-hidden,.details .sec-head h2{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* mono labels */
.eyebrow,.strip,.card-label,.qa-label,.info-label,.fh,.fbar,.tag,.hero-meta,.hero-media figcaption{font:500 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--label)}
/* CMYK registration stripe */
.nav::after,.footer::before{content:"";position:absolute;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--k) 75% 100%)}
/* registration crosshair (one element, pure CSS) */
.hero-in::before,.closing::before{content:"";position:absolute;width:30px;height:30px;pointer-events:none;background:radial-gradient(circle,transparent 0 8.5px,var(--mark) 9px 10px,transparent 10.5px),linear-gradient(var(--mark),var(--mark)) center/1px 100% no-repeat,linear-gradient(var(--mark),var(--mark)) center/100% 1px no-repeat}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg)}
.nav::after{bottom:-4px}
.nav-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:12px;height:64px;padding:0 var(--pad)}
.brand{margin-right:auto;display:flex;align-items:center}
.logo{fill:var(--logo-ink);color:var(--logo-ink)}
.brand .logo{display:block;height:38px;width:auto;aspect-ratio:908/207}
.links{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
.links a{display:block;padding:7px 10px;text-decoration:none;color:var(--muted);font:400 14px/1.4 var(--body);border:1px solid transparent}
.links a:hover{color:var(--strong)}
.links a[aria-current=page]{color:var(--strong);background:var(--active-bg);border-color:var(--line);box-shadow:inset 0 -2px 0 var(--m)}
.links li.tt{display:flex}
.theme-toggle{display:flex;align-items:center;gap:8px;padding:8px 10px;background:none;border:0;color:var(--muted);cursor:pointer;font:400 14px/1.4 var(--body)}
.theme-toggle:hover{color:var(--strong)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.theme-toggle .tt-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root .icon-moon{display:none}
:root[data-theme=light] .icon-sun{display:none}:root[data-theme=light] .icon-moon{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme]) .icon-sun{display:none}:root:not([data-theme]) .icon-moon{display:block}}
.menu-toggle{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;color:var(--ink);padding:0}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:20px;height:2px;background:currentColor;margin:auto;position:relative;content:""}
.menu-toggle span::before{position:absolute;top:-6px}.menu-toggle span::after{position:absolute;top:6px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;text-decoration:none;font:600 15px/1 var(--body);border:1px solid transparent;border-radius:2px;cursor:pointer;white-space:nowrap}
.btn-accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:3px 3px 0 var(--btn-shadow)}
.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{border-color:var(--line-strong);color:var(--strong);background:transparent}
.btn-ghost:hover{border-color:var(--strong)}
.btn-lg{min-height:56px;padding:0 30px;font-size:16px}
.nav-cta{min-height:44px;padding:0 24px}

/* ---- hero ---- */
.band-hero{border-top:0!important}
.hero-in{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4.5vw,64px);padding:clamp(72px,9vw,120px) var(--pad) clamp(56px,7vw,96px);align-items:center}
.hero-in::before{top:24px;left:calc(var(--pad) - 15px)}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.eyebrow{margin:0 0 22px}
.hero h1{margin-bottom:24px}
.hero .lead{margin-bottom:30px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-note{margin:16px 0 0;font-size:14px;color:var(--muted)}
.hero-meta{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;letter-spacing:.14em}
.hero-meta li{display:flex;align-items:center;gap:9px}
.hero-meta li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.hero-meta li:nth-child(4n+2)::before{background:var(--m)}
.hero-meta li:nth-child(4n+3)::before{background:var(--y)}
.hero-meta li:nth-child(4n+4)::before{background:var(--k)}
.hero-meta.jump a{color:var(--ink)}
.hero-solo .hero-in{grid-template-columns:1fr}
.hero-solo .hero-copy{max-width:50em}
/* photo on a paper matte with crop marks and caption strip */
.hero-media{position:relative;margin:0;padding:10px;background:var(--paper);box-shadow:0 22px 44px -18px var(--shadow)}
.hero-media::before{content:"";position:absolute;inset:-14px;pointer-events:none;background:
 linear-gradient(var(--mark),var(--mark)) 0 14px/10px 1px no-repeat,linear-gradient(var(--mark),var(--mark)) 14px 0/1px 10px no-repeat,
 linear-gradient(var(--mark),var(--mark)) 100% 14px/10px 1px no-repeat,linear-gradient(var(--mark),var(--mark)) calc(100% - 14px) 0/1px 10px no-repeat,
 linear-gradient(var(--mark),var(--mark)) 0 calc(100% - 14px)/10px 1px no-repeat,linear-gradient(var(--mark),var(--mark)) 14px 100%/1px 10px no-repeat,
 linear-gradient(var(--mark),var(--mark)) 100% calc(100% - 14px)/10px 1px no-repeat,linear-gradient(var(--mark),var(--mark)) calc(100% - 14px) 100%/1px 10px no-repeat}
.hero-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hero-media figcaption{position:absolute;left:10px;bottom:10px;padding:9px 18px 9px 12px;background:var(--paper);color:var(--on-paper);letter-spacing:.2em}

/* ---- sections ---- */
.band{border-top:1px dashed var(--line-strong)}
.section{max-width:var(--max);margin:0 auto;padding:clamp(64px,8vw,104px) var(--pad)}
.sec-head{margin:0 0 clamp(36px,4vw,52px)}
.strip{display:flex;align-items:center;gap:10px;margin:0 0 18px}
.strip .num{display:inline-block;padding:2px 7px;background:var(--c);color:#0b0a08;letter-spacing:.1em}
.band-2 .strip .num{background:var(--chip-m);color:#fff}
.band-3 .strip .num{background:var(--y);color:#0b0a08}
.band-4 .strip .num{background:var(--k);color:var(--on-k)}
.strip .t{margin-right:auto}
.strip .r{color:var(--label);opacity:.85}
.sec-head h2{margin:0 0 18px;max-width:15em}
.sec-head .lead{margin:0}
.footnote{padding:0 0 22px;color:var(--muted);font-size:15px;margin:0}

/* crop-mark corners for cards */
.card,.qa{--cm:var(--mark)}
.card{position:relative}
.card::after{content:"";position:absolute;inset:-10px;pointer-events:none;background:
 linear-gradient(var(--cm),var(--cm)) 0 10px/7px 1px no-repeat,linear-gradient(var(--cm),var(--cm)) 10px 0/1px 7px no-repeat,
 linear-gradient(var(--cm),var(--cm)) 100% 10px/7px 1px no-repeat,linear-gradient(var(--cm),var(--cm)) calc(100% - 10px) 0/1px 7px no-repeat,
 linear-gradient(var(--cm),var(--cm)) 0 calc(100% - 10px)/7px 1px no-repeat,linear-gradient(var(--cm),var(--cm)) 10px 100%/1px 7px no-repeat,
 linear-gradient(var(--cm),var(--cm)) 100% calc(100% - 10px)/7px 1px no-repeat,linear-gradient(var(--cm),var(--cm)) calc(100% - 10px) 100%/1px 7px no-repeat}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px);margin:0;padding:10px 0}
.cards.c2{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:transparent}
.card .media{aspect-ratio:4/3;overflow:hidden;background:var(--paper);padding:7px}
.card .media img{width:100%;height:100%;object-fit:cover}
.card .body{padding:18px 8px 22px;display:flex;flex-direction:column;flex:1}
.card-label{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px;order:-1}
.card h3{margin:0 0 10px}
.card p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}
.card .more{margin-top:auto;padding-top:18px;color:var(--link);font-weight:600;font-size:13px}
a.card:hover h3{color:var(--link)}
.card-quote .body{justify-content:center}
/* text/article cards: colored top rule C/M/Y/K */
.card-text{border-top:2px solid var(--c)}
.cards>.card-text:nth-child(4n+2){border-top-color:var(--m)}
.cards>.card-text:nth-child(4n+3){border-top-color:var(--y)}
.cards>.card-text:nth-child(4n+4){border-top-color:var(--k)}
.card-text .body{padding:20px 16px 24px}
/* FAQ mini cards */
.faqs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:clamp(28px,3vw,40px)}
.qa{padding:24px 22px 28px;border:1px dashed var(--line-strong)}
.qa-label{margin:0 0 6px}
.qa h3{font-size:17px;margin-bottom:10px}
.qa p{color:var(--muted);margin:0;font-size:14px;line-height:1.65}
.qa a{color:var(--link)}
/* contact strip: colored left rule C/M/Y/K */
.infos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.infos.i3{grid-template-columns:repeat(3,1fr)}
.info{padding:4px 0 6px 18px;border-left:2px solid var(--c)}
.info:nth-child(4n+2){border-left-color:var(--m)}
.info:nth-child(4n+3){border-left-color:var(--y)}
.info:nth-child(4n+4){border-left-color:var(--k)}
.info-label{margin:0 0 4px}
.info .val{margin:0;font:600 18px/1.35 var(--display);color:var(--strong)}
.info .val a{text-decoration:none;color:var(--link)}.info .val a:hover{text-decoration:underline}
.info p{margin:6px 0 0;color:var(--muted);font-size:14px}
.info p a{color:var(--link)}
/* closing CTA */
.closing{position:relative;max-width:var(--max);margin:0 auto;text-align:center;padding:clamp(80px,10vw,136px) var(--pad)}
.closing::before{top:-15px;left:calc(50% - 15px);background-color:var(--bg)}
.closing h2{margin:0 auto 16px}
.closing .lead{margin:0 auto 30px}
.closing .cta{justify-content:center}

/* ---- print / contact / other components ---- */
.todo{font:500 11px/1.4 var(--mono);color:var(--link);border:1px dashed var(--link);background:var(--todo-bg);padding:2px 6px;display:inline-block;letter-spacing:.03em}
.quote-line{margin-top:14px}.quote-line a{color:var(--link)}
.plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.cards+.plist{margin-top:clamp(28px,3vw,40px)}
.plist li{display:grid;grid-template-columns:minmax(180px,1fr) 2fr auto;gap:8px 24px;padding:18px 0;border-bottom:1px dashed var(--line-strong);align-items:baseline}
.plist h3{font-size:19px}
.plist p{margin:0;color:var(--muted);font-size:15px}
.plist p a{color:var(--link)}
.plist .thumb{width:240px;height:auto;margin:0 0 10px;padding:6px;background:var(--paper)}
.tag{font-size:10px;line-height:1;border:1px solid var(--line-strong);color:var(--ink);padding:6px 8px;white-space:nowrap}
.mapph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:220px;margin:6px 0 0;background:repeating-linear-gradient(0deg,transparent 0 39px,var(--line) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,var(--line) 39px 40px)}
.mapval{font:600 22px/1.2 var(--display);color:var(--strong)}
.prose{max-width:44em;margin:0 auto;padding:clamp(48px,7vw,96px) var(--pad)}
.prose h1{margin-bottom:24px;font-size:clamp(40px,5.6vw,64px)}
.prose h2{font-size:clamp(24px,3vw,32px);margin:48px 0 14px;padding-top:22px;border-top:1px dashed var(--line-strong)}
.prose p,.prose li{color:var(--ink);font-size:17px;line-height:1.75}
.prose .mast{color:var(--muted);font-size:15px}
.prose ul{padding-left:1.2em;margin:0 0 1em}.prose li{margin:0 0 .4em}
.prose a{color:var(--link)}
.faq-list{border-top:1px solid var(--line-strong)}
.faq-list details{border-bottom:1px dashed var(--line-strong)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font:600 clamp(19px,2.2vw,24px)/1.3 var(--display);color:var(--strong)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:500 22px/1 var(--mono);color:var(--link)}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list .ans{padding:0 0 26px;color:var(--muted);font-size:17px;max-width:46em}
.mat{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.mat>li{display:grid;grid-template-columns:minmax(200px,1.1fr) 2fr auto;gap:8px 24px;padding:20px 0;border-bottom:1px dashed var(--line-strong);align-items:baseline}
.mat h3{font-size:19px}
.mat ul{list-style:none;margin:0;padding:0;color:var(--muted);font-size:15px}.mat ul li{margin:0 0 4px}
.mat .price{font:600 20px/1.2 var(--display);color:var(--strong);white-space:nowrap;text-align:right}
.mat .price small{display:block;font:500 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.spec ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:15px}.spec li{margin:0 0 6px}
.spec h3{margin-bottom:12px}
.callout{margin:clamp(28px,3vw,40px) 0 0;padding:24px 0 24px 20px;border-left:2px solid var(--m);font:400 clamp(20px,2.4vw,26px)/1.35 var(--display);color:var(--strong)}
.tpl ul{list-style:none;margin:0;padding:0}
.tpl li{border-top:1px dashed var(--line-strong)}
.tpl li a{display:flex;justify-content:space-between;gap:12px;padding:11px 0;text-decoration:none;color:var(--ink);font-size:15px}
.tpl li a:hover{color:var(--link)}
.tpl li a span{font:500 10px/1.9 var(--mono);letter-spacing:.14em;color:var(--label)}
.tpl h3{margin-bottom:14px}
.nf{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(72px,12vw,150px) var(--pad);text-align:left}
.nf h1{margin-bottom:20px}

/* ---- footer ---- */
.footer{background:var(--bg-deep);margin-top:0}
.footer::before{top:0}
.fgrid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:60px var(--pad) 44px}
.logo-foot{fill:var(--logo-ink);display:block;height:48px;width:auto;aspect-ratio:908/207;margin-bottom:20px}
.fbrand address{color:var(--muted);font-size:14px;line-height:1.7}
.fbrand address a{color:var(--muted);text-decoration:none}
.fbrand .badge{margin-top:20px}
.fh{margin:0 0 18px;font-weight:500}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin:0 0 10px}
.fgrid a{text-decoration:none;font-size:14px;color:var(--strong)}.fgrid a:hover{color:var(--link);text-decoration:underline}
.fbar{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:22px var(--pad) 30px;border-top:1px solid var(--line);font-size:10px}

/* ---- responsive ---- */
@media (max-width:1080px){.links a,.theme-toggle{padding:7px 7px}}
@media (max-width:1000px){
  .menu-toggle{display:block}
  .links{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg-deep);border-bottom:1px solid var(--line-strong);gap:0;padding:8px 0}
  .links.open{display:flex}
  .links a{padding:14px var(--pad);font-size:16px;border:0}
  .links a[aria-current=page]{box-shadow:inset 3px 0 0 var(--m)}
  .links li.tt{border-top:1px solid var(--line)}
  .theme-toggle{width:100%;padding:16px var(--pad);font-size:15px}
  .theme-toggle .tt-text{position:static;width:auto;height:auto;clip:auto}
  .nav-in{gap:8px}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .cards.c3,.infos.i3,.faqs{grid-template-columns:1fr}
  .infos{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero-in{grid-template-columns:1fr;padding-top:56px;padding-bottom:56px}
  .hero-in::before{top:14px}
  .cards.c2{grid-template-columns:1fr}
  .plist li{grid-template-columns:1fr auto}.plist .pdesc{grid-column:1/-1}.plist .tag{justify-self:start;grid-column:1/-1}
  .mat>li{grid-template-columns:1fr auto}.mat ul{grid-column:1/-1;grid-row:2}
}
@media (max-width:560px){
  h1{font-size:46px}
  .lead{font-size:16px}
  .nav-in{height:60px;padding:0 4px 0 16px;gap:4px}
  .brand .logo{height:30px}
  .nav-cta{min-height:40px;padding:0 14px;font-size:14px;box-shadow:2px 2px 0 var(--btn-shadow)}
  .hero-in{padding-top:60px}.hero-in::before{top:12px}
  .strip .r{display:none}
  .cards,.infos,.fgrid{grid-template-columns:1fr}
  .btn-lg{width:100%}
  .hero-meta{gap:8px 18px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* ---- home hero: storefront photo ~25% larger on tablet/desktop (Rick, Oct 21). Mobile unchanged. ---- */
@media (min-width:761px){
  main:has(.faqs) .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,3.6vw,52px)}
  main:has(.faqs) .hero h1{font-size:clamp(40px,5.4vw,70px)}
}

/* ---- product illustrations (transparent WebP art) on paper tiles ---- */
:root{--ill-tile:#e8e2d4}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--ill-tile:#e9e2d2}}
:root[data-theme=light]{--ill-tile:#e9e2d2}
:root[data-theme=dark]{--ill-tile:#e8e2d4}
img.ill{background:var(--ill-tile)}
.media img.ill{object-fit:contain;padding:5% 7%}
.hero-media img.ill{object-fit:contain;padding:5% 8%}
.plist .thumb.ill-thumb{width:200px;aspect-ratio:4/3;height:auto;object-fit:contain;padding:8px 12px;background:var(--ill-tile);outline:7px solid var(--paper);outline-offset:-7px;margin:0 0 12px}
.plist li:has(.ill-thumb){align-items:center}
.pdesc:has(.ill-thumb){display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 24px;align-items:center}
.pdesc:has(.ill-thumb) .thumb{margin:0}
@media (max-width:560px){.pdesc:has(.ill-thumb){grid-template-columns:128px minmax(0,1fr);gap:8px 16px}.plist .thumb.ill-thumb{width:128px;padding:5px 7px;outline-width:5px;outline-offset:-5px}}
@media (min-width:761px){.plist li{grid-template-columns:minmax(180px,1fr) 2fr 110px}.plist .tag{justify-self:end}}

/* ---- FAQ rewrite (13 Q&A, Oct 21): question headings inside <summary> ---- */
.faq-list summary h2{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
.faq-list .ans p{margin:0}