/* Longevium — Subscribe & Save page. Class prefix: sub- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;700&display=swap');

.sub{
  --forest:#2E4034;--forest-deep:#21302A;--forest-mid:#3A5142;
  --tan:#D6B98E;--tan-light:#F0E4D2;--tan-mid:#E4CFAE;
  --cream-1:#FBF8F0;--cream-2:#F0EBDD;--cream-3:#E7E0CE;
  --gold:#C9A24B;--gold-light:#D8C48A;
  --on-dark:#F5F1E8;--on-light-h:#24352B;--on-cream-b:#4A5A4E;--on-tan-b:#5A4B38;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
  font-family:var(--sans);color:var(--on-cream-b);
}
.sub *{box-sizing:border-box;}
body:has(main.sub) .page-top{display:none;}
main.sub{margin-left:calc(-1 * var(--porto-fluid-spacing,20px));margin-right:calc(-1 * var(--porto-fluid-spacing,20px));}
body:has(main.sub){overflow-x:hidden;}

.sub-sec{position:relative;overflow:hidden;padding:clamp(56px,8vw,96px) clamp(20px,6vw,72px);}
.sub-sec__inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;}
.sub-sec--forest{background:radial-gradient(130% 130% at 82% 0%,var(--forest-mid) 0%,var(--forest) 46%,var(--forest-deep) 100%);color:var(--on-dark);}
.sub-sec--cream{background:var(--cream-1);}
.sub-sec--tan{background:linear-gradient(180deg,var(--tan-light) 0%,var(--tan-mid) 100%);color:var(--on-tan-b);}
.sub-sec--forest .sub-h2,.sub-sec--forest .sub-h1{color:var(--on-dark);}

.sub-kicker{display:inline-block;font:500 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-bottom:22px;}
.sub-h1{font:600 clamp(40px,6vw,68px)/1.05 var(--serif);margin:0 0 22px;}
.sub-h2{font:600 clamp(30px,4vw,44px)/1.1 var(--serif);color:var(--on-light-h);margin:0 0 18px;}
.sub-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;max-width:640px;margin:0 0 30px;opacity:.92;}
.sub-sub{max-width:640px;margin:0 0 32px;line-height:1.6;}
.sub-hero .sub-sec__inner,.sub-end .sub-sec__inner{text-align:center;}
.sub-hero .sub-lead,.sub-end .sub-lead,.sub-sub{margin-left:auto;margin-right:auto;}

.sub-cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.sub-cta{display:inline-block;padding:15px 32px;border-radius:32px;font:700 15px/1 var(--sans);text-decoration:none;transition:transform .15s ease,background .15s ease;}
.sub-cta:hover{transform:translateY(-1px);}
.sub-cta--gold{background:var(--gold);color:var(--forest-deep);}
.sub-cta--ghost{background:transparent;color:inherit;border:1.5px solid currentColor;}
.sub-cta--primary{background:var(--forest);color:var(--on-dark);}

.sub-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.sub-step{background:#fff;border:1px solid var(--cream-3);border-radius:18px;padding:28px;}
.sub-step__n{width:40px;height:40px;border-radius:50%;background:var(--forest);color:var(--on-dark);display:grid;place-items:center;font:600 18px var(--serif);margin-bottom:14px;}
.sub-step h3{font:600 24px/1.2 var(--serif);color:var(--on-light-h);margin:0 0 8px;}
.sub-step p{margin:0;line-height:1.55;}

.sub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.sub-card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--on-cream-b);box-shadow:0 8px 24px rgba(33,48,42,.08);transition:transform .15s ease;}
.sub-card:hover{transform:translateY(-3px);}
.sub-card__img{position:relative;aspect-ratio:1;background:var(--cream-2);display:grid;place-items:center;}
.sub-card__pic{width:100%;height:100%;object-fit:cover;}
.sub-card__label{font:600 20px var(--serif);color:var(--on-light-h);letter-spacing:.08em;}
.sub-card__badge{position:absolute;top:12px;left:12px;background:var(--forest-deep);color:var(--on-dark);font:500 12px/1 var(--sans);padding:7px 10px;border-radius:20px;}
.sub-card--oos .sub-card__pic{filter:grayscale(.5);opacity:.75;}
.sub-card__body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:10px;}
.sub-card__body h4{font:600 22px/1.2 var(--serif);color:var(--on-light-h);margin:0;}
.sub-card__prices{display:flex;flex-direction:column;gap:4px;font-size:15px;}
.sub-card__prices small{display:inline-block;min-width:88px;color:#7a8578;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.sub-card__once .woocommerce-Price-amount{text-decoration:line-through;opacity:.7;}
.sub-card__sub .woocommerce-Price-amount{font-weight:700;color:var(--forest);font-size:18px;}
.sub-card__save{font:500 13px var(--sans);color:var(--gold);}
.sub-card__img{display:grid;text-decoration:none;}
.sub-card__body h4 a{color:inherit;text-decoration:none;}
.sub-card__plans{display:flex;flex-direction:column;gap:8px;margin-top:auto;}
.sub-card .sub-cta{text-align:center;padding:13px 20px;}
.sub-card .sub-cta--ghost{color:var(--forest);border-color:var(--forest);}
.sub-card__view{font-size:13px;color:#7a8578;text-align:center;text-decoration:underline;}

.sub-why{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.sub-why li{background:#fff;border:1px solid var(--cream-3);border-radius:14px;padding:22px 18px;font-weight:500;color:var(--on-light-h);line-height:1.4;}
.sub-why li::before{content:'';display:block;width:28px;height:2px;background:var(--gold);margin-bottom:12px;}

.sub-faq__item{border-bottom:1px solid var(--cream-3);padding:6px 0;}
.sub-faq__item summary{cursor:pointer;font:600 20px/1.3 var(--serif);color:var(--on-light-h);padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;}
.sub-faq__item summary::-webkit-details-marker{display:none;}
.sub-faq__item summary::after{content:'+';font:400 22px var(--sans);color:var(--gold);}
.sub-faq__item[open] summary::after{content:'–';}
.sub-faq__item p{margin:0 0 14px;line-height:1.6;max-width:760px;}

.sub-help{margin:22px 0 0;font-size:15px;}
.sub-help a{color:var(--gold-light);}

@media (max-width:1024px){.sub-grid{grid-template-columns:repeat(2,1fr);}.sub-why{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.sub-steps{grid-template-columns:1fr;}.sub-grid{grid-template-columns:1fr;}.sub-why{grid-template-columns:1fr 1fr;}.sub-sec{padding:48px 20px;}}
@media (max-width:440px){.sub-why{grid-template-columns:1fr;}}
