/* ============================================================
   Encore — shared base
   HomeUI design system · light-premium · brand green #0A855C
   (matches --one-commerce-color-oc-primary-default in the admin)

   Every page on this site links this file. Brand tokens live here
   and nowhere else — change a colour once, it changes everywhere.
   ============================================================ */
:root{
  /* Brand */
  --brand:#0A855C; --brand-strong:#076647; --brand-lift:#12A374; --brand-10:rgba(10,133,92,.10);
  --brand-soft:#E8F6F0; --info-glow:rgba(47,190,140,.10);
  /* Surfaces */
  --white:#fff; --page:#F9FAFB; --grey:#F7F8FA;
  --border:rgba(0,0,0,.10); --border-strong:rgba(0,0,0,.16);
  /* Dark (glass showcase cards) */
  --dark:#06120D; --dark-2:#0A1A14; --dark-card:rgba(255,255,255,.04);
  --bd-dark:rgba(255,255,255,.10); --bd-dark-2:rgba(255,255,255,.20);
  --mint:#6FE0B4; --mint-2:#2FBE8C;
  /* Text */
  --tx:#16181D; --tx-80:rgba(22,24,29,.80); --tx-60:rgba(22,24,29,.62); --tx-45:rgba(22,24,29,.55);
  --w-90:rgba(255,255,255,.92); --w-70:rgba(255,255,255,.72); --w-55:rgba(255,255,255,.55);
  /* Accent */
  --amber:#E08B00; --coral:#FF775C;
  /* Radius */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-pill:100px;
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-weight:400;color:var(--tx);background:var(--white);
  line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;overflow-wrap:anywhere;
  background:var(--grey);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
::selection{background:var(--brand-10)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* ---------- Layout container ---------- */
.inner{width:min(100% - 14vw,1200px);margin-inline:auto}
@media (min-width:1921px){ .inner{width:min(100% - 16vw,1800px)} }
@media (min-width:1440px) and (max-width:1920px){ .inner{width:min(100% - 14vw,1366px)} }
@media (min-width:700px) and (max-width:1149px){ .inner{width:calc(100% - 10vw)} }
@media (max-width:699px){ .inner{width:calc(100% - 40px)} }

section{padding:96px 0}
@media (max-width:1149px){ section{padding:80px 0} }
@media (max-width:699px){ section{padding:56px 0} }

/* ---------- Typography ---------- */
.display{font-weight:600;font-size:72px;line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}
@media (max-width:1149px){ .display{font-size:54px} }
@media (max-width:699px){ .display{font-size:38px;line-height:1.12} }
.h2{font-weight:600;font-size:46px;line-height:1.12;letter-spacing:-.01em;margin:0;text-wrap:balance}
@media (max-width:1439px){ .h2{font-size:42px} }
@media (max-width:1149px){ .h2{font-size:38px} }
@media (max-width:699px){ .h2{font-size:30px} }
.lead{font-size:18px;line-height:1.6;color:var(--tx-60);margin:0;text-wrap:pretty}
@media (max-width:699px){ .lead{font-size:16px} }
.overline{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.grad{background:linear-gradient(100deg,var(--brand-lift),var(--brand-strong));-webkit-background-clip:text;background-clip:text;color:transparent}

.section-head{max-width:760px;margin:0 auto 56px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
@media (max-width:699px){ .section-head{margin-bottom:40px} }

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);font-weight:600;font-size:15px;
  border-radius:var(--r-pill);padding:12px 24px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{color:#fff;background:linear-gradient(180deg,var(--brand-lift),var(--brand));
  box-shadow:0 6px 20px rgba(10,133,92,.30),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{box-shadow:0 10px 30px rgba(10,133,92,.40),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-ghost{background:var(--white);color:var(--tx);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--grey)}
.btn-lg{padding:15px 30px;font-size:16px}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Brand mark ---------- */
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand-mark{width:32px;height:32px;flex:none}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease}
.nav.scrolled{border-bottom-color:var(--border);background:rgba(255,255,255,.85)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-links{display:flex;gap:30px}
.nav-link{font-size:15px;color:var(--tx-60);font-weight:500;transition:color .15s ease}
.nav-link:hover{color:var(--tx)}
.nav-link.current{color:var(--tx)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--tx);border-radius:2px}
@media (max-width:960px){
  .nav-links{display:none}
  .nav-actions .btn-primary{display:none}
  .nav-toggle{display:flex}
}
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--white);padding:88px 32px 32px;
  display:flex;flex-direction:column;gap:8px;transform:translateY(-100%);opacity:0;pointer-events:none;transition:.28s ease}
.mobile-menu.active{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-menu a:not(.btn){font-size:20px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--border)}
.mobile-menu .btn{margin-top:16px;justify-content:center}
.mobile-close{position:absolute;top:22px;right:26px;background:none;border:none;font-size:34px;line-height:1;cursor:pointer;color:var(--tx)}

/* ---------- Footer ---------- */
.footer{background:var(--white);border-top:1px solid var(--border);padding:64px 0 40px}
.footer-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:40px;margin-bottom:44px}
@media (max-width:820px){ .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px} }
@media (max-width:520px){ .footer-top{grid-template-columns:minmax(0,1fr)} }
.footer-brand .brand{margin-bottom:14px}
.footer-brand p{font-size:14px;color:var(--tx-60);max-width:300px;line-height:1.6;margin:0}
.footer h5{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-45);margin:0 0 16px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer ul a{font-size:14px;color:var(--tx-60)}
.footer ul a:hover{color:var(--brand)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--border);font-size:13px;color:var(--tx-45)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }

/* ---------- Disclosure / FAQ list ---------- */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;cursor:pointer;font-family:var(--font);font-size:16px;font-weight:600;color:var(--tx);text-align:left;padding:20px 22px}
.faq-q .plus{position:relative;width:16px;height:16px;flex:none}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--brand);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.faq-q .plus::before{top:7px;left:0;width:16px;height:2px}
.faq-q .plus::after{top:0;left:7px;width:2px;height:16px}
.faq-item.open .plus::after{transform:rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{margin:0;padding:0 22px 22px;font-size:14.5px;color:var(--tx-60);line-height:1.65}
.faq-a a{color:var(--brand-strong);font-weight:600}
.faq-a a:hover{text-decoration:underline}