
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
/* Layout: a calm shop — announcement bar, sticky header, split hero, problem finder, product grid, detail views by hash. */
:root{
  --bg:#FBF9F3; --surface:#FFFFFF; --sage:#E6EDE2; --sage-2:#D3E0CD; --fg:#1E2B22; --muted:#5E6B60; --line:#E1E5DA;
  --green:#24452F; --green-2:#2F5A3D; --on-green:#F6F3EA; --gold:#B8862D; --gold-soft:#F4E7C9; --coral:#C8664A;
  --shadow:0 1px 2px rgba(30,43,34,.06),0 8px 24px rgba(30,43,34,.08);
  --display:"Fraunces",Georgia,"Times New Roman",serif; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --max:1180px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121A15; --surface:#18221C; --sage:#1D2A22; --sage-2:#26382C; --fg:#E9EEE6; --muted:#A3B0A5; --line:#2A372E;
  --green:#8FC29F; --green-2:#A6D2B4; --on-green:#10180F; --gold:#E0B25A; --gold-soft:#3A3120; --coral:#E68B6F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121A15; --surface:#18221C; --sage:#1D2A22; --sage-2:#26382C; --fg:#E9EEE6; --muted:#A3B0A5; --line:#2A372E;
  --green:#8FC29F; --green-2:#A6D2B4; --on-green:#10180F; --gold:#E0B25A; --gold-soft:#3A3120; --coral:#E68B6F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer;font:800 .92rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;padding:1em 1.5em;border-radius:6px;text-decoration:none;transition:transform .2s,background .2s,box-shadow .2s}
.btn-primary{background:var(--green);color:var(--on-green)}
.btn-primary:hover{background:var(--green-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-ghost:hover{background:var(--sage);transform:translateY(-2px)}
.btn-sm{font-size:.78rem;padding:.8em 1.1em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* announcement + header */
.announce{background:var(--green);color:var(--on-green);font-size:.85rem;font-weight:700;text-align:center}
.announce .wrap{padding-block:.55rem}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:1.5rem;padding-block:.8rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--green)}
.logo svg{width:38px;height:38px;flex:none}
.logo b{display:block;font-family:var(--display);font-weight:600;font-size:1.32rem;line-height:1;color:var(--green)}
.logo small{display:block;font-size:.6rem;letter-spacing:.2em;font-weight:800;color:var(--muted);margin-top:.25rem}
nav.main{margin-left:auto;display:flex;gap:1.6rem}
nav.main a{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--fg);padding:.4rem 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--green);border-color:var(--gold)}
.menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:8px;padding:.5rem .7rem;color:var(--fg);font:800 .8rem var(--body);cursor:pointer}
@media (max-width:760px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:.5rem max(16px,env(safe-area-inset-right,0px)) 1rem max(16px,env(safe-area-inset-left,0px))}
  nav.main.open{display:flex}
  nav.main a{padding:.8rem 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
}

/* views */
.view{animation:viewIn .45s ease both}
@keyframes viewIn{from{opacity:.0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* hero */
.hero{background:linear-gradient(180deg,var(--sage) 0%,var(--bg) 100%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;padding-block:3.5rem 3rem}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);color:var(--green);margin:.8rem 0 1rem}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:34em}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--sage-2)}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;left:1rem;bottom:1rem;background:var(--surface);color:var(--fg);border-radius:12px;padding:.7rem .9rem;box-shadow:var(--shadow);font-size:.82rem;font-weight:700;display:flex;gap:.6rem;align-items:center;max-width:calc(100% - 2rem)}
.hero-badge span.n{font-family:var(--display);font-size:1.6rem;color:var(--green);line-height:1}
.hero .rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .rise:nth-child(2){animation-delay:.08s}.hero .rise:nth-child(3){animation-delay:.16s}.hero .rise:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:2rem;padding-block:2.2rem}}

/* features strip */
.features{background:var(--surface);border-block:1px solid var(--line)}
.features .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:1.4rem}
.feat{display:flex;gap:.8rem;align-items:flex-start}
.feat svg{width:30px;height:30px;flex:none;color:var(--green)}
.feat b{display:block;font-size:.92rem}
.feat span{font-size:.82rem;color:var(--muted);line-height:1.4;display:block}
@media (max-width:860px){.features .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.features .wrap{grid-template-columns:1fr}}

/* sections */
section.block{padding-block:4.5rem}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.sec-head h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--fg)}
.sec-head p{color:var(--muted);max-width:40em;margin-top:.5rem}
.textlink{font-weight:800;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}

/* problem finder */
.finder{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.prob{display:flex;gap:.9rem;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem .8rem .8rem;text-decoration:none;color:var(--fg);transition:transform .2s,border-color .2s,box-shadow .2s}
.prob:hover{transform:translateY(-3px);border-color:var(--sage-2);box-shadow:var(--shadow)}
.prob img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:var(--sage)}
.prob q{quotes:none;font-weight:700;font-size:.95rem;line-height:1.35;display:block}
.prob small{display:block;color:var(--green);font-weight:800;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;margin-top:.25rem}

/* collection chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:.5rem 1rem;font:700 .86rem var(--body);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--green)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-green)}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media (max-width:1060px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr);gap:1rem}}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;min-width:0}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--sage);position:relative}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .img img{transform:scale(1.045)}
.tag{position:absolute;left:.7rem;top:.7rem;background:var(--surface);color:var(--green);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .55rem;border-radius:6px}
.card .body{padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card h3{font-size:1.12rem;line-height:1.22}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--green)}
.card .benefit{font-size:.88rem;color:var(--muted);line-height:1.45}
.card .meta{font-size:.76rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.card .foot{margin-top:auto;padding-top:.6rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.price{font-weight:800;color:var(--fg)}
.price.soon{font-size:.8rem;color:var(--muted);font-weight:700}

/* end-of-grid tile: fills the last row (13 cards) */
.tile{grid-column:auto/span 3;background:var(--green);color:var(--on-green);border-radius:var(--r);padding:2rem;display:flex;flex-direction:column;justify-content:center;gap:.8rem;min-width:0}
.tile h3{font-size:clamp(1.4rem,2.4vw,2rem);color:var(--on-green)}
.tile p{opacity:.9;max-width:36em}
.tile .btn{align-self:flex-start;background:var(--gold);color:#fff}
@media (max-width:1060px){.tile{grid-column:auto/span 2}}
@media (max-width:760px){.tile{grid-column:auto/span 1;padding:1.3rem}}
/* problem caption on card images */
.qcap{position:absolute;left:0;right:0;bottom:0;padding:2.4rem .9rem .8rem;background:linear-gradient(180deg,rgba(18,30,22,0),rgba(18,30,22,.82));color:#fff;font-weight:800;font-size:.92rem;line-height:1.3;text-wrap:balance}
/* product popup */
#pop{max-width:min(94vw,880px);width:100%;max-height:min(92vh,900px);overflow:auto}
.pop-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:0}
.pop-media{position:relative;background:var(--sage)}
.pop-media img{width:100%;height:100%;object-fit:cover;min-height:100%}
.pop-media .qcap{font-size:1rem;padding:3rem 1.1rem 1rem}
.pop-body{padding:1.6rem 1.6rem 1.4rem;display:grid;gap:.9rem;align-content:start;min-width:0}
.pop-body h2{font-size:1.7rem;color:var(--green)}
.pop-body .x{position:absolute;right:.6rem;top:.4rem;background:var(--surface);border-radius:50%;width:2.2rem;height:2.2rem;border:1px solid var(--line)}
.pop-inc{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pop-inc li{position:relative;padding-left:1.7rem;font-size:.92rem;line-height:1.4}
.pop-inc li::before{content:"";position:absolute;left:0;top:.1rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.pop-inc b{color:var(--fg)}
.pop-buy{display:grid;gap:.6rem;padding-top:.6rem;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface);padding-bottom:.6rem;z-index:1}
.pop-buy .btn{width:100%;font-size:1rem}
.pop-buy small{color:var(--muted);text-align:center;font-size:.8rem}
.pop-wrap{position:relative}
@media (max-width:700px){.pop-grid{grid-template-columns:1fr}.pop-media{aspect-ratio:16/11;overflow:hidden}.pop-buy{position:sticky;bottom:0;background:var(--surface);padding-bottom:max(.6rem,env(safe-area-inset-bottom,0px));box-shadow:0 -10px 16px -12px rgba(0,0,0,.25)}}
/* offers */
.offer-main{position:relative;border-radius:22px;overflow:hidden;background:#1C3524;color:#F6F3EA;display:grid;grid-template-columns:1.2fr 1fr;align-items:center}
.offer-main .txt{position:relative;padding:3rem;display:grid;gap:1rem;z-index:1}
.offer-main h2{font-size:clamp(1.8rem,3.4vw,2.8rem);color:#fff}
.offer-main p{color:#E3EADF;max-width:34em}
.offer-main .pr{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.offer-main .now{font-family:var(--display);font-size:2.6rem;color:#F4D58D;line-height:1}
.offer-main .was{text-decoration:line-through;color:#B9C6BB;font-weight:700}
.offer-main .pct{background:#B8862D;color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.08em;padding:.35rem .6rem;border-radius:6px}
.offer-main .btn{background:#B8862D;color:#fff;justify-self:start}
.offer-main .btn:hover{background:#A2761F}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:1.4rem;transform:rotate(-3deg) scale(1.06)}
.mosaic img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
@media (max-width:860px){.offer-main{grid-template-columns:1fr}.offer-main .txt{padding:2rem 1.4rem}.mosaic{transform:none;padding:0 1.4rem 1.4rem}}
.bundles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.4rem}
@media (max-width:1060px){.bundles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bundles{grid-template-columns:1fr}}
.bundle{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;min-width:0}
.bundle:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.thumbs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:var(--line);aspect-ratio:4/3;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover;min-height:0}
.thumbs.n3 img:first-child{grid-row:span 2}
.thumbs.n2{grid-template-rows:1fr}
.thumbs.n9{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.bundle>a{display:block;text-decoration:none}
.bundle h3 a{text-decoration:none}.bundle h3 a:hover{color:var(--green)}
.card .img .thumbs,.pop-media .thumbs,.detail-top .media .thumbs{aspect-ratio:auto;height:100%;width:100%}
.pop-media .thumbs{min-height:100%}
.card .img .thumbs img,.detail-top .media .thumbs img{transform:none!important}
.card.is-bundle{border-color:var(--gold-soft)}
.card.is-bundle .tag{background:var(--gold);color:#fff}
.price s{color:var(--muted);font-weight:700;font-size:.85em;margin-left:.35em}
.pop-price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.pop-price .now{font-family:var(--display);font-size:1.8rem;color:var(--green);line-height:1}
.pop-price .was{text-decoration:line-through;color:var(--muted);font-weight:700}
.bundle .b{padding:1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.bundle h3{font-size:1.2rem}
.bundle p{font-size:.88rem;color:var(--muted);line-height:1.45}
.bundle ul{list-style:none;margin:0;padding:0;font-size:.84rem;font-weight:700;display:grid;gap:.2rem}
.bundle .pr{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-top:auto;padding-top:.5rem}
.bundle .now{font-family:var(--display);font-size:1.6rem;color:var(--green)}
.bundle .was{text-decoration:line-through;color:var(--muted);font-weight:700;font-size:.9rem}
.save{background:var(--gold-soft);color:var(--gold);font-weight:800;font-size:.72rem;letter-spacing:.06em;padding:.25rem .5rem;border-radius:6px;text-transform:uppercase}
.bundle .btn{width:100%}
/* promo band */
.band{background:var(--sage);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.band .txt{padding:3rem;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.band h2{font-size:clamp(1.7rem,3vw,2.5rem);color:var(--green)}
.band img{width:100%;height:100%;object-fit:cover;min-height:280px}
.band ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.band li{display:flex;gap:.6rem;font-weight:600}
.band li::before{content:"";flex:none;width:.6rem;height:.6rem;margin-top:.55rem;border-radius:50%;background:var(--gold)}
@media (max-width:860px){.band{grid-template-columns:1fr}.band .txt{padding:2rem 1.4rem}}

/* steps */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:s}
.how div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
.how div::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--gold-soft);color:var(--gold);font-family:var(--display);font-size:1.15rem;margin-bottom:.8rem}
.how h3{font-size:1.15rem;margin-bottom:.35rem}
.how p{color:var(--muted);font-size:.93rem}
@media (max-width:760px){.how{grid-template-columns:1fr}}

/* detail */
.crumbs{font-size:.82rem;color:var(--muted);padding-block:1.2rem 0}
.crumbs a{color:var(--green);font-weight:700;text-decoration:none}
.detail-top{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding-block:1.6rem 3rem;align-items:start}
.detail-top .media{border-radius:20px;overflow:hidden;background:var(--sage);box-shadow:var(--shadow);aspect-ratio:1/1;position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px)}
.detail-top .media img{width:100%;height:100%;object-fit:cover}
.detail-top h1{font-size:clamp(2rem,4vw,3rem);color:var(--green);margin:.5rem 0 .8rem}
.detail-top .sub{font-size:1.1rem;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.facts span{background:var(--sage);color:var(--fg);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;font-weight:700}
.buybox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;display:grid;gap:.8rem;margin-top:1.2rem}
.buybox .row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.buybox .big{font-family:var(--display);font-size:1.9rem;color:var(--fg)}
.buybox small{color:var(--muted);font-size:.82rem}
.buybox .btn{width:100%}
.note{font-size:.84rem;color:var(--muted);background:var(--gold-soft);border-radius:10px;padding:.7rem .9rem}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.cols2>*{min-width:0}
table.spec td{overflow-wrap:anywhere}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.panel h2{font-size:1.4rem;margin-bottom:.9rem}
.panel.sagep{background:var(--sage);border-color:transparent}
ul.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
ul.ticks li{position:relative;padding-left:1.9rem;line-height:1.45}
ul.ticks li::before{content:"";position:absolute;left:0;top:.15rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
ul.dots{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
ul.dots li{position:relative;padding-left:1.3rem;line-height:1.45}
ul.dots li::before{content:"";position:absolute;left:0;top:.5rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--coral)}
.inside{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.inside div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem;font-size:.93rem;line-height:1.45}
.inside b{display:block;color:var(--green);font-size:.98rem;margin-bottom:.2rem}
.previews{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.previews button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:.6rem;cursor:zoom-in;transition:transform .25s,box-shadow .25s;text-align:left;color:var(--fg);font:inherit;min-width:0}
.previews button:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow)}
.previews img{width:100%;height:auto;aspect-ratio:210/297;object-fit:cover;object-position:top;border-radius:6px;background:var(--sage)}
.previews span{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-top:.45rem}
@media (max-width:860px){.detail-top{grid-template-columns:1fr;gap:1.6rem}.detail-top .media{position:static}.cols2{grid-template-columns:1fr}}
@media (max-width:520px){.previews{grid-template-columns:1fr 1fr}.previews button:last-child{grid-column:span 2;max-width:50%;justify-self:center}}
table.spec{width:100%;border-collapse:collapse;font-size:.92rem}
table.spec th,table.spec td{text-align:left;padding:.65rem .2rem;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{width:38%;color:var(--muted);font-weight:700}

/* faq */
.faq{display:grid;gap:.7rem;max-width:860px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 1.2rem;transition:border-color .2s}
.faq details[open]{border-color:var(--sage-2)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 0;font-weight:800;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.4rem;line-height:1;color:var(--gold);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.1rem;color:var(--muted)}

/* newsletter / footer */
.cta-band{position:relative;border-radius:22px;overflow:hidden;color:#F6F3EA;background:#1C3524}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.cta-band .inner{position:relative;padding:3.5rem 2rem;display:grid;gap:1rem;justify-items:center;text-align:center;background:linear-gradient(180deg,rgba(20,36,26,.35),rgba(20,36,26,.75))}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.3rem);color:#FFF}
.cta-band p{max-width:36em;color:#E9EEE6}
.signup{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:480px}
.signup input{flex:1 1 220px;min-width:0;border:0;border-radius:6px;padding:.95rem 1rem;font:600 1rem var(--body);color:#1E2B22;background:#FFF}
.signup .btn{background:#B8862D;color:#fff}
.signup-msg{font-size:.88rem;color:#F4E7C9;min-height:1.4em}
footer.site{background:var(--surface);border-top:1px solid var(--line);margin-top:4.5rem}
footer.site .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;padding-block:3rem 2rem}
footer.site h4{margin:0 0 .8rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
footer.site a{text-decoration:none;font-weight:600}
footer.site a:hover{color:var(--green)}
footer.site .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.2rem;font-size:.8rem;color:var(--muted)}
@media (max-width:760px){footer.site .wrap{grid-template-columns:1fr}}

/* lightbox + modal */
dialog{border:0;border-radius:16px;padding:0;max-width:min(92vw,760px);background:var(--surface);color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(15,25,18,.6);backdrop-filter:blur(3px)}
dialog img{max-height:82vh;width:auto;margin:auto}
dialog .bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-weight:700;font-size:.9rem}
dialog .x{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--fg)}
dialog .pad{padding:1.4rem}

/* reveal */
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.pre{opacity:.35;transform:translateY(22px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal.pre{opacity:1;transform:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- multi-page additions ---- */
.sec-head h1{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--fg)}
.band h1{font-size:clamp(1.7rem,3vw,2.5rem);color:var(--green)}
.offer-main h2 a{color:inherit}
.bundle ul a:hover{color:var(--green)}
.detail-top .media.cover{aspect-ratio:210/297;max-width:440px;width:100%;justify-self:center;background:var(--surface)}
.detail-top .media.cover img{object-fit:cover;object-position:top}
/* covers strip */
.covers{list-style:none;margin:0;padding:0 0 .6rem;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.covers li{scroll-snap-align:start;min-width:0}
.covers a{display:grid;gap:.45rem;text-decoration:none;color:var(--fg)}
.covers img{width:100%;height:auto;aspect-ratio:210/297;object-fit:cover;object-position:top;border-radius:8px;box-shadow:var(--shadow);background:var(--sage);transition:transform .25s}
.covers a:hover img{transform:translateY(-4px) rotate(-.6deg)}
.covers b{font-size:.88rem;line-height:1.25}
.covers small{font-size:.76rem;color:var(--muted);font-weight:700}
@media (min-width:1100px){.covers{grid-auto-flow:row;grid-template-columns:repeat(7,1fr);overflow:visible}}
/* reviews */
.revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
.rev{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:1rem}
.rev blockquote{margin:0;font-family:var(--display);font-size:1.12rem;line-height:1.45;color:var(--fg)}
.rev figcaption{display:flex;gap:.7rem;align-items:center;margin-top:auto}
.rev .av{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:var(--sage);color:var(--green);font-family:var(--display);font-weight:700;font-size:1.1rem}
.rev b{display:block;font-size:.92rem}
.rev small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35}
.rev small a{color:var(--green);font-weight:700}
.rev .free{font-size:.74rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:.6rem}
.pop-rev{background:var(--sage);border-radius:10px;padding:.7rem .9rem;font-size:.88rem;font-style:italic;color:var(--fg)}
