/* This is Velum Organics' storefront, not a theme-adaptive app — the brand look
   (cream/gold) stays the same for every visitor, so we deliberately do NOT
   follow the visitor's OS/browser dark-mode setting here. */

/* ============ BASE ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
:root{--shadow:0 18px 50px -20px rgba(30,25,12,.35); color-scheme:light;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--f-head); font-weight:700; margin:0; text-wrap:balance; color:var(--ink);}
p{margin:0;}
.eyebrow{font-family:var(--f-body); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.72rem;}
.script{font-family:var(--f-script); font-style:italic; font-weight:500;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,48px);}
[hidden]{display:none !important;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ============ HEADER ============ */
header.site{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px clamp(20px,4vw,48px);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{width:34px; height:auto;}
.brand .word{font-family:var(--f-body); font-weight:600; letter-spacing:.2em; font-size:.85rem; text-transform:uppercase;}
.brand .word b{color:var(--brand); font-weight:700;}
.navlinks{display:flex; align-items:center; gap:28px; font-size:.86rem; font-weight:500;}
.navlinks a{text-decoration:none; color:var(--ink-soft); padding:6px 0; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.navlinks a:hover, .navlinks a.active{color:var(--ink); border-color:var(--brand);}
.navlinks .cta{background:var(--ink); color:var(--bg); padding:9px 18px; border-radius:2px; font-weight:600; border:1px solid var(--ink);}
.navlinks .cta:hover{background:transparent; color:var(--ink);}
.burger{display:none; background:none; border:1px solid var(--line-strong); border-radius:2px; padding:8px 10px;}
.burger svg{width:18px; height:18px; display:block;}
@media (max-width:820px){
  .navlinks{position:fixed; inset:60px 0 auto 0; background:var(--bg); flex-direction:column; align-items:stretch; padding:10px 20px 20px; border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;}
  .navlinks.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .navlinks a{padding:12px 4px; border-bottom:1px solid var(--line);}
  .burger{display:inline-flex;}
}

/* ============ REAL LEAF CLUSTER ============ */
.leaf-cluster{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.leaf-cluster img{position:absolute; filter:drop-shadow(0 16px 20px rgba(30,25,12,.16));}
@media (max-width:820px){ .leaf-cluster{display:none;} }

/* ============ AMBIENT LEAF-SHADOW ============ */
.ambient-shadow{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.ambient-shadow svg{width:100%; height:100%;}
.ambient-shadow .leaf-sh{fill:var(--ink); opacity:.09;}

/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:.86rem; letter-spacing:.03em; padding:14px 28px; border-radius:2px; border:1px solid transparent; text-decoration:none; transition:transform .15s, background .15s, color .15s, border-color .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent, var(--brand)); color:#1c1408; border-color:var(--accent, var(--brand));}
.btn-primary:hover{filter:brightness(1.08);}
.btn-order{background:var(--order); color:var(--order-ink); border-color:var(--order);}
.btn-order:hover{background:var(--order-dk); border-color:var(--order-dk);}
.btn-order svg{width:18px; height:18px;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--ink); }
.btn-ghost{background:transparent; color:var(--ink-soft); border:none; text-decoration:underline; text-underline-offset:4px; padding:6px 0;}

/* ============ HOME HERO ============ */
.home-hero{position:relative; padding:64px 0 40px; overflow:hidden;}
.home-hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; min-height:520px; padding-top:20px;}
.home-hero .copy{padding-bottom:24px;}
.home-hero .eyebrow{color:var(--brand-dk);}
.home-hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:.98; margin:16px 0 22px; letter-spacing:-.01em;}
.home-hero h1 em{font-style:italic; font-family:var(--f-script); color:var(--brand);}
.home-hero .lede{font-size:1.1rem; color:var(--ink-soft); max-width:46ch; margin-bottom:30px;}
.home-hero .ctas{display:flex; gap:14px; flex-wrap:wrap;}
.home-hero .side{display:flex; flex-direction:column; align-items:flex-end; gap:14px; padding-bottom:8px;}
.stat-pill{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); padding:10px 16px; border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.03em; box-shadow:var(--shadow);}
.stat-pill svg{width:16px; height:16px; color:var(--brand2);}
@media (max-width:900px){
  .home-hero .wrap{grid-template-columns:1fr; min-height:0;}
  .home-hero .side{align-items:flex-start;}
}


.hero-product{display:flex; flex-direction:column; align-items:center; gap:14px; text-decoration:none; color:var(--ink); width:100%; max-width:380px;}
.hero-product img{width:78%; max-height:460px; object-fit:contain; filter:drop-shadow(0 28px 34px rgba(0,0,0,.24)); transition:transform .25s;}
.hero-product:hover img{transform:translateY(-8px) rotate(-1.5deg);}
.hero-product-cap{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;}
.hero-product-cap .eyebrow{color:var(--brand2-dk);}
.hero-product-cap b{font-family:var(--f-head); font-size:1.25rem;}
.hero-product-cap .go{font-size:.8rem; font-weight:600; letter-spacing:.05em; color:var(--brand2-dk);}
@media (max-width:900px){ .home-hero .side{align-items:center;} }

/* ============ SECTION HELPERS ============ */
section{position:relative;}
.section-pad{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .eyebrow{color:var(--accent-dk, var(--brand-dk)); margin-bottom:12px; display:block;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.08;}
.section-head p{margin-top:14px; color:var(--ink-soft); font-size:1.02rem;}
.alt{background:var(--bg-alt);}
.dark-panel{background:var(--dark); color:var(--dark-ink);}
.dark-panel .ink-soft{color:#C9C0A6;}

/* ============ STORY STRIP ============ */
.story{display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:32px;}
.story-col .num{font-family:var(--f-head); font-style:italic; font-size:1rem; color:var(--brand-dk); margin-bottom:10px; display:block;}
.story-col h3{font-size:1.3rem; margin-bottom:10px;}
.story-col p{color:var(--ink-soft); font-size:.95rem;}
@media (max-width:760px){ .story{grid-template-columns:1fr; gap:36px;} }

/* ============ PRODUCT CARDS (home) ============ */
.grid-products{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px;}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; box-shadow:0 1px 0 var(--line);}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.pcard .shot{aspect-ratio:4/5; background:var(--pc-tint); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;}
.pcard .shot img{width:72%; height:auto; filter:drop-shadow(0 20px 24px rgba(0,0,0,.18));}
.pcard .body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:8px; flex:1;}
.pcard .tag{font-size:.68rem; letter-spacing:.14em; font-weight:600; text-transform:uppercase; color:var(--pc-accent);}
.pcard h3{font-size:1.4rem;}
.pcard .claim{font-family:var(--f-script); font-style:italic; color:var(--ink-soft); font-size:1rem;}
.pcard .price-row{margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line);}
.pcard .price{font-weight:600;}
.pcard .go{font-size:.78rem; font-weight:600; letter-spacing:.05em; color:var(--pc-accent);}
@media (max-width:900px){ .grid-products{max-width:420px; margin:0 auto;} }

/* ============ TRUST BAR ============ */
.trust-bar{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trust-item{display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--ink-soft); flex:1; min-width:180px;}
.trust-item svg{width:22px; height:22px; color:var(--brand2); flex-shrink:0;}

/* ============ FOOTER ============ */
footer.site{background:var(--dark); color:var(--dark-ink); padding:64px 0 28px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(241,236,220,.15);}
footer.site h4{color:var(--dark-ink); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-family:var(--f-body); font-weight:600; margin-bottom:16px;}
footer.site .brand-col p{color:#C9C0A6; font-size:.9rem; max-width:36ch; margin-top:14px;}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
footer.site a{color:#C9C0A6; text-decoration:none; font-size:.9rem;}
footer.site a:hover{color:var(--dark-ink);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:.78rem; color:#8f866f;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:30px;} }

/* ============ PRODUCT PAGE ============ */
.p-hero{position:relative; padding:52px 0 0; overflow:hidden;}
/* Desktop: title block + text block share the left column, the gallery sits in
   its own column spanning both rows. Mobile (below) reorders to title -> photo -> text,
   since the photo should land right under the title, not at the bottom of the copy. */
.p-grid{display:grid; grid-template-columns:.95fr 1.05fr; grid-template-areas:"top shot" "bottom shot"; column-gap:56px; row-gap:6px; align-items:start;}
.p-top{grid-area:top;}
.p-bottom{grid-area:bottom;}
.p-gallery{grid-area:shot; position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px 20px 0;}
.p-gallery-main{width:100%; display:flex; align-items:center; justify-content:center;}
.p-gallery-main img{max-width:92%; filter:drop-shadow(0 30px 40px rgba(0,0,0,.22));}
.p-gallery-thumbs{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.p-thumb{width:52px; height:52px; padding:4px; border-radius:4px; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:border-color .15s;}
.p-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.p-thumb.active{border-color:var(--accent-dk);}
.crumb{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-faint); margin-bottom:22px;}
.crumb a{text-decoration:none; color:var(--ink-faint);}
.crumb a:hover{color:var(--ink);}
.p-hero .tag{font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-dk);}
.p-hero h1{font-size:clamp(2.3rem,4.4vw,3.4rem); margin:14px 0 6px; line-height:1.02;}
.p-hero .sub{font-family:var(--f-head); font-weight:600; font-size:1.2rem; color:var(--ink-soft); margin-bottom:14px;}
.p-hero .claim{font-family:var(--f-script); font-style:italic; font-size:1.25rem; color:var(--accent-dk); margin-top:22px; margin-bottom:22px;}
.p-hero .desc{color:var(--ink-soft); max-width:52ch; margin-bottom:26px;}
.badges-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; letter-spacing:.04em; padding:7px 12px; border-radius:999px; background:var(--accent-tint); color:var(--accent-dk); border:1px solid var(--line);}
.badge svg{width:13px; height:13px;}
@media (max-width:820px){
  .p-grid{grid-template-columns:1fr; grid-template-areas:"top" "shot" "bottom"; row-gap:24px;}
  .p-gallery{padding:0;}
  .p-gallery-main img{max-width:78%;}
}

/* Buy box */
.buybox{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:26px 26px 24px; box-shadow:var(--shadow); max-width:440px;}
.buybox .price-line{display:flex; align-items:baseline; gap:12px; margin-bottom:4px;}
.buybox .price-now{font-family:var(--f-head); font-weight:700; font-size:2rem; color:var(--ink);}
.buybox .price-was{text-decoration:line-through; color:var(--ink-faint); font-size:1rem;}
.buybox .save-note{font-size:.78rem; color:var(--brand2-dk); font-weight:600; margin-bottom:18px; min-height:1em;}
.tier-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px;}
.tier-btn{border:1px solid var(--line); background:var(--bg); border-radius:3px; padding:10px 4px; text-align:center; font-size:.78rem; font-weight:600; color:var(--ink-soft); transition:border-color .15s, color .15s, background .15s;}
.tier-btn .n{display:block; font-family:var(--f-head); font-size:1.15rem; color:var(--ink); font-weight:700;}
.tier-btn .d{display:block; font-size:.68rem; letter-spacing:.02em; margin-top:2px;}
.tier-btn:hover{border-color:var(--accent-dk);}
.tier-btn.active{border-color:var(--accent-dk); background:var(--accent-tint); color:var(--accent-dk);}
.tier-btn.active .n{color:var(--accent-dk);}
.qty-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-top:14px; border-top:1px dashed var(--line);}
.qty-row .lbl{font-size:.82rem; color:var(--ink-soft); font-weight:600;}
.stepper{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:3px;}
.stepper button{width:34px; height:34px; background:none; border:none; font-size:1.1rem; color:var(--ink);}
.stepper button:hover{background:var(--bg-alt);}
.stepper .qv{width:34px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums;}
.buybox .btn-primary{width:100%; padding:16px; font-size:.92rem; margin-top:4px;}
.buybox .fine{font-size:.72rem; color:var(--ink-faint); margin-top:12px; line-height:1.5;}

/* Agitation */
.agitate{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.agitate .script-line{font-size:1.5rem; margin-bottom:6px;}
.agitate ul{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.agitate li{display:flex; gap:12px; font-size:.98rem; color:var(--ink-soft);}
.agitate li svg{width:18px; height:18px; color:var(--accent-dk); flex-shrink:0; margin-top:2px;}
@media (max-width:820px){ .agitate{grid-template-columns:1fr;} }

/* Benefit grid */
.benefit-grid{display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.benefit{background:var(--surface); padding:32px 26px;}
.benefit svg{width:26px; height:26px; color:var(--accent-dk); margin-bottom:16px;}
.benefit h3{font-size:1.08rem; margin-bottom:8px;}
.benefit p{font-size:.88rem; color:var(--ink-soft);}
@media (max-width:820px){ .benefit-grid{grid-template-columns:1fr;} }
@media (min-width:821px) and (max-width:1000px){ .benefit-grid[style*='--cols:4']{grid-template-columns:repeat(2,1fr);} }

/* Ingredients */
.ing-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start;}
.ing-list{display:flex; flex-wrap:wrap; gap:10px;}
.ing-chip{border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:.82rem; color:var(--ink-soft); background:var(--surface);}
.ing-chip b{color:var(--ink); font-weight:600;}
.ing-note{margin-top:22px; font-size:.82rem; color:var(--ink-faint); border-left:2px solid var(--accent); padding-left:14px; display:flex; align-items:flex-start; gap:8px;}
.ing-note svg{width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--accent-dk);}
@media (max-width:900px){ .ing-wrap{grid-template-columns:1fr;} }

/* How to use */
.steps-row{display:grid; grid-template-columns:repeat(var(--n,4),1fr); gap:0; counter-reset:step; position:relative;}
.step{position:relative; padding:0 20px 0 0; text-align:left;}
.step .stepline{position:absolute; top:26px; left:calc(50% + 26px); right:calc(-50% + 26px); height:1px; background:var(--line-strong);}
.step:last-child .stepline{display:none;}
.step .ico{width:52px; height:52px; border-radius:50%; border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:var(--surface); position:relative; z-index:2;}
.step .ico svg{width:24px; height:24px; color:var(--accent-dk);}
.step .idx{font-family:var(--f-head); font-style:italic; color:var(--accent-dk); font-size:.85rem; display:block; margin-bottom:4px;}
.step h4{font-size:1rem; margin-bottom:6px;}
.step p{font-size:.84rem; color:var(--ink-soft);}
@media (max-width:900px){ .steps-row{grid-template-columns:1fr; gap:26px;} .step .stepline{display:none;} }

/* FAQ */
.faq{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none; cursor:pointer; padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; font-weight:600; font-size:1rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{width:20px; height:20px; flex-shrink:0; position:relative;}
.faq-item summary .plus::before, .faq-item summary .plus::after{content:''; position:absolute; background:var(--ink); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-item summary .plus::before{width:14px; height:2px;}
.faq-item summary .plus::after{width:2px; height:14px; transition:transform .18s;}
.faq-item[open] summary .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
.faq-item p{padding:0 0 20px; color:var(--ink-soft); font-size:.92rem; max-width:64ch;}

/* Cross-sell */
.crosssell{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media (max-width:760px){ .crosssell{grid-template-columns:1fr;} }

/* misc */
.center{text-align:center;}
.mx-auto{margin-left:auto; margin-right:auto;}
.divider-root{height:64px; position:relative;}
.spine{position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(var(--line-strong), transparent);}
.disclaimer-box{background:var(--surface-2); border:1px solid var(--line); border-radius:3px; padding:16px 18px; font-size:.8rem; color:var(--ink-soft); display:flex; gap:12px; align-items:flex-start;}
.disclaimer-box svg{width:18px; height:18px; color:var(--accent-dk); flex-shrink:0; margin-top:1px;}

/* ============ CMS additions ============ */
.brand img{width:34px; height:auto; max-height:44px; object-fit:contain;}
footer.site .brand img{width:30px;}
.hero-center .wrap{grid-template-columns:1fr; text-align:center; min-height:0; padding-bottom:20px;}
.hero-center .lede{margin-left:auto; margin-right:auto;}
.hero-center .ctas{justify-content:center;}
.hero-product{display:flex; flex-direction:column; align-items:center; gap:14px; text-decoration:none; color:var(--ink); width:100%; max-width:380px;}
.hero-product img{width:78%; max-height:460px; object-fit:contain; filter:drop-shadow(0 28px 34px rgba(0,0,0,.24)); transition:transform .25s;}
a.hero-product:hover img{transform:translateY(-8px) rotate(-1.5deg);}
.hero-product-cap{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;}
.hero-product-cap .eyebrow{color:var(--brand2-dk);}
.hero-product-cap b{font-family:var(--f-head); font-size:1.25rem;}
.hero-product-cap .go{font-size:.8rem; font-weight:600; letter-spacing:.05em; color:var(--brand2-dk);}
@media (max-width:900px){ .home-hero .side{align-items:center;} }
.home-hero.dark-panel h1,.home-hero.dark-panel .lede{color:var(--dark-ink);}
.dark-panel h2,.dark-panel h3,.dark-panel h4{color:var(--dark-ink);}
.dark-panel .section-head p{color:#C9C0A6;}
.dark-panel .btn-outline{color:var(--dark-ink); border-color:rgba(241,236,220,.4);}
.prose{max-width:720px;}
.prose.center{text-align:center;}
.prose-body p{margin:0 0 1em; color:var(--ink-soft);}
.prose-body ul{margin:0 0 1em; padding-left:1.2em; color:var(--ink-soft);}
.prose-body li{margin-bottom:.4em;}
.prose-body a,.faq a{color:var(--brand-dk); text-underline-offset:3px;}
.image-text{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.image-text.rev .it-img{order:2;}
.it-img img{width:100%; border-radius:4px; box-shadow:var(--shadow);}
@media (max-width:820px){ .image-text{grid-template-columns:1fr; gap:28px;} .image-text.rev .it-img{order:0;} }
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px;}
.quote{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:26px;}
.quote blockquote{margin:0 0 18px; font-family:var(--f-script); font-style:italic; font-size:1.2rem; line-height:1.4;}
.quote figcaption{display:flex; align-items:center; gap:12px; font-size:.86rem;}
.quote figcaption img{width:44px; height:44px; border-radius:50%; object-fit:cover;}
.quote figcaption small{display:block; color:var(--ink-faint);}
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; align-items:stretch;}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:30px 26px; display:flex; flex-direction:column; gap:16px;}
.plan.hl{border-color:var(--brand); box-shadow:var(--shadow);}
.plan h3{font-size:1.2rem;}
.plan-price b{font-family:var(--f-head); font-size:2.2rem;} .plan-price small{color:var(--ink-faint); margin-left:6px;}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; font-size:.92rem; color:var(--ink-soft);}
.plan li{display:flex; gap:10px;} .plan li svg{width:17px; height:17px; flex-shrink:0; margin-top:3px; color:var(--brand-dk);}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:28px; text-align:center;}
.stat b{display:block; font-family:var(--f-head); font-size:2.6rem; color:var(--brand-dk); line-height:1.1;}
.stat span{font-size:.86rem; color:var(--ink-soft); letter-spacing:.03em;}
.dark-panel .stat b{color:var(--brand);} .dark-panel .stat span{color:#C9C0A6;}
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;}
.gal figure{margin:0;} .gal img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px;}
.gal figcaption{font-size:.8rem; color:var(--ink-faint); margin-top:6px;}
.formbox{max-width:640px; margin:0 auto;}
.cform{display:grid; grid-template-columns:1fr 1fr; gap:16px; position:relative;}
.cform label{display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:600; color:var(--ink-soft);}
.cform .full{grid-column:1/-1;}
.cform input,.cform textarea{font:inherit; padding:12px 14px; border:1px solid var(--line-strong); background:var(--surface); border-radius:3px; color:var(--ink);}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--brand); outline-offset:1px;}
@media (max-width:620px){ .cform{grid-template-columns:1fr;} }
.form-ok{background:var(--surface); border:1px solid var(--brand); border-radius:4px; padding:22px; font-weight:500;}
.dark-panel .cform label{color:#C9C0A6;}
/* order form inside buy box */
.buybox .ofields{display:grid; gap:10px; margin:6px 0 14px;}
.buybox .ofields input,.buybox .ofields textarea{font:inherit; font-size:.9rem; padding:11px 12px; border:1px solid var(--line-strong); background:var(--bg); border-radius:3px; width:100%;}
.buybox .oerr{color:#a33; font-size:.8rem; margin-top:8px; min-height:1em;}
.buybox .odone{padding:10px 2px; font-weight:500;}
.buybox .btn-order{width:100%; padding:16px; margin-top:4px;}
.prose-body{overflow-wrap:anywhere;}