/* Wellix — V2 design system (olive-lime, Apple-like minimal). Hand-written, no framework.
   Self-hosted Geist (MIT). Palette & metrics transcribed from the approved design. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family:'Geist'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/geist-sans-400.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/geist-sans-500.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/geist-sans-600.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/geist-sans-700.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/geist-mono-400.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/geist-mono-500.woff2') format('woff2'); }

:root {
  --canvas:#FAF9F6; --ink:#1C1917; --olive:#3F6212; --lime:#BEF264; --lime-600:#65A30D;
  --lime-100:#ECFCCB; --lime-50:#F7FEE7; --body:#44403C; --muted:#57534E; --faint:#78716C;
  --faintest:#A8A29E; --line:#EAE8E3; --line2:#E2E0DA; --line3:#F0EEE9; --dashed:#D6D3CD;
  --stone-50:#FAFAF9; --stone-100:#F5F5F4; --white:#fff;
  --mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html, body { overflow-x:hidden; }
body {
  margin:0; font-family:var(--sans); background:var(--canvas); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5;
}
::selection { background:var(--lime); color:var(--ink); }
img { display:block; max-width:100%; }
a { color:var(--olive); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-0.025em; }
p { margin:0; }

@keyframes wlxFade { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:none;} }

.container { max-width:1160px; margin:0 auto; padding:0 32px; }
.container.w1000 { max-width:1000px; }
.container.w880  { max-width:880px; }
.container.w760  { max-width:760px; }

/* Accessibility */
.skip-link { position:absolute; left:-999px; top:0; z-index:100; background:var(--olive); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--olive); outline-offset:3px; border-radius:6px; }

.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--olive); margin-bottom:14px; }
.eyebrow.on-dark { color:var(--lime); }
.eyebrow a { color:inherit; }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(20px); background:rgba(250,249,246,0.8); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand:hover { text-decoration:none; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:var(--olive); }
.brand-dot { width:8px; height:8px; border-radius:50%; background:var(--lime); }
.brand-name { font-size:19px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a { font-size:14.5px; font-weight:450; color:var(--body); padding:8px 14px; border-radius:8px; }
.nav-links a:hover { background:var(--stone-100); text-decoration:none; }
.nav-links a.active { color:var(--olive); }
.nav-links a.cta { margin-left:8px; background:var(--ink); color:var(--canvas); font-size:14px; font-weight:500; padding:9px 18px; border-radius:999px; }
.nav-links a.cta:hover { background:#000; text-decoration:none; }
.nav-desktop { display:flex; }
.nav-mobile { display:none; position:relative; }
.nav-mobile > summary { display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font-size:14px; font-weight:500; color:var(--ink); padding:8px 14px; border:1px solid var(--line2); border-radius:999px; background:#fff; }
.nav-mobile > summary::-webkit-details-marker { display:none; }
.nav-mobile[open] > summary { background:var(--lime-100); border-color:var(--olive); color:var(--olive); }

/* ---------- Buttons / pills ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:15.5px; font-weight:500; padding:14px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; }
.btn:hover { text-decoration:none; }
.btn-olive { background:var(--olive); color:#fff; }
.btn-olive:hover { background:#355212; color:#fff; }
.btn-secondary { background:#fff; color:var(--ink); border-color:var(--line2); }
.btn-secondary:hover { border-color:var(--olive); color:var(--olive); }
.btn-ink { background:var(--ink); color:var(--canvas); }
.btn-sm { padding:10px 18px; font-size:14px; }

.pill { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--line2); border-radius:999px; background:#fff; font-size:13px; color:var(--muted); }
.pill-dot { width:6px; height:6px; border-radius:50%; background:var(--olive); }
.badge-live { font-size:12px; color:var(--lime-600); background:var(--lime-100); padding:5px 12px; border-radius:999px; font-weight:500; }

/* Letter tile (E / Y) */
.tile { display:inline-flex; align-items:center; justify-content:center; border-radius:15px; font-weight:600; }

main { animation:wlxFade .5s ease; }
section { /* spacing set per-section via .sec* */ }
.sec { padding:80px 0; }
.sec-tight { padding:64px 0; }

/* ---------- Home hero (editorial / V2) ---------- */
.hero { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; padding:88px 0 72px; }
.hero h1 { font-size:64px; line-height:1.04; letter-spacing:-0.035em; text-wrap:balance; }
.hero-lead { font-size:19px; line-height:1.55; color:var(--muted); max-width:480px; margin-top:26px; }
.hero-actions { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }
.hero-visual { position:relative; height:500px; display:flex; align-items:center; justify-content:center; }
.hero-visual img { width:auto; }
.hero-visual .ph-yogi { height:378px; transform:rotate(7deg) translate(34px,18px); filter:drop-shadow(0 26px 46px rgba(28,25,23,0.22)); position:relative; z-index:1; }
.hero-visual .ph-eatr { height:432px; transform:rotate(-6deg) translate(-30px,-6px); filter:drop-shadow(0 30px 50px rgba(63,98,18,0.25)); position:relative; z-index:2; }

/* ---------- Dark "what we do" ---------- */
.band-dark { background:var(--ink); color:var(--canvas); }
.band-dark .h-sec { color:var(--canvas); }
.ww-head { font-size:36px; line-height:1.1; letter-spacing:-0.025em; max-width:620px; }
.ww-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:rgba(255,255,255,0.08); border-radius:20px; overflow:hidden; }
.ww-cell { background:var(--ink); padding:32px; }
.ww-cell h3 { font-size:17px; margin-bottom:10px; }
.ww-cell p { font-size:14.5px; line-height:1.55; color:var(--faintest); }

/* ---------- Section heads ---------- */
.h-sec { font-size:38px; letter-spacing:-0.025em; }
.h-page { font-size:56px; line-height:1.05; letter-spacing:-0.035em; text-wrap:balance; }
.lead { font-size:20px; line-height:1.55; color:var(--muted); }

/* ---------- Home product rows (angled phones) ---------- */
.prod-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.prod-card { position:relative; overflow:hidden; height:340px; padding:34px; border:1px solid var(--line); border-radius:26px; display:flex; flex-direction:column; color:var(--ink); }
.prod-card:hover { text-decoration:none; }
.prod-card .pc-top { display:flex; align-items:center; gap:12px; }
.prod-card .pc-body { margin-top:auto; max-width:56%; position:relative; z-index:2; }
.prod-card .pc-name { font-size:26px; font-weight:600; letter-spacing:-0.02em; }
.prod-card .pc-desc { display:block; font-size:15px; margin-top:8px; line-height:1.5; }
.prod-card .pc-link { display:inline-block; font-size:13.5px; color:var(--olive); font-weight:600; margin-top:14px; }
.prod-card .pc-phone { position:absolute; right:-4px; bottom:-34px; height:300px; width:auto; pointer-events:none; }
.more-row { margin-top:24px; padding:24px 28px; border:1px dashed var(--dashed); border-radius:22px; display:flex; align-items:center; gap:14px; color:var(--faint); font-size:15px; }
.more-row .plus { font-family:var(--mono); font-size:18px; color:var(--faintest); }

/* ---------- About ---------- */
.about-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.info-card { padding:32px; border:1px solid var(--line); border-radius:22px; background:#fff; }
.info-card h2, .info-card h3 { font-size:18px; margin-bottom:10px; }
.info-card p { font-size:15px; line-height:1.6; color:var(--muted); }
.legal-entity { border:1px solid var(--line); border-radius:24px; background:var(--ink); color:var(--canvas); padding:44px; }
.le-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px 48px; }
.le-item .le-k { font-size:12.5px; color:var(--faint); margin-bottom:6px; }
.le-item .le-v { font-size:16px; font-weight:500; line-height:1.5; }
.le-item .le-v.mono { font-family:var(--mono); }

/* ---------- Products listing ---------- */
.list-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.list-card { padding:36px; border:1px solid var(--line); border-radius:24px; display:flex; flex-direction:column; gap:20px; color:var(--ink); }
.list-card:hover { text-decoration:none; border-color:var(--line2); }
.list-card .lc-top { display:flex; align-items:center; justify-content:space-between; }
.list-card .lc-name { font-size:26px; font-weight:600; letter-spacing:-0.02em; }
.list-card .lc-desc { font-size:15.5px; line-height:1.55; color:var(--muted); margin-top:10px; }
.list-card .lc-link { font-size:14px; color:var(--olive); font-weight:500; margin-top:auto; }

/* ---------- Product page ---------- */
.product-hero { display:grid; grid-template-columns:1fr 0.8fr; gap:56px; align-items:center; }
.back-link { font-size:14px; color:var(--faint); display:inline-block; margin-bottom:24px; }
.ph-titlerow { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.product-hero h1 { font-size:54px; letter-spacing:-0.035em; }
.product-hero .lead { margin-top:20px; max-width:460px; }
.product-hero .site-link { display:inline-block; font-size:14px; color:var(--olive); font-weight:500; margin-top:18px; }
.store-row { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.store-pill { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; padding:12px 20px; border-radius:12px; }
.store-pill.ink { background:var(--ink); color:var(--canvas); }
.store-pill.out { background:#fff; color:var(--ink); border:1px solid var(--line2); }
.product-hero .hero-shot { display:flex; justify-content:center; }
.product-hero .hero-shot img { height:480px; width:auto; }

.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card { padding:28px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.feature-card h3 { font-size:16px; margin-bottom:8px; }
.feature-card p { font-size:14.5px; line-height:1.55; color:var(--muted); }

.shots-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.shot { height:360px; border:1px solid var(--line); border-radius:24px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.shot img { max-height:300px; max-width:90%; width:auto; }
.shot.tall img { max-height:330px; max-width:100%; }
.shot-wide { border:1px solid var(--line); border-radius:24px; background:var(--ink); display:flex; align-items:center; justify-content:center; padding:28px; overflow:hidden; }
.shot-wide img { width:100%; max-width:880px; height:auto; }
.shots-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.shots-2 .shot { height:430px; }
.shots-2 .shot img { max-height:388px; max-width:100%; }

.prod-cta { display:flex; gap:16px; padding:24px 28px; border:1px solid var(--line); border-radius:20px; background:#fff; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.prod-cta span { font-size:15px; color:var(--muted); }
.prod-cta .cta-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Support ---------- */
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.support-card { padding:32px; border:1px solid var(--line); border-radius:22px; background:#fff; }
.support-card .sc-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.support-card h2 { font-size:18px; }
.support-card p { font-size:14.5px; line-height:1.6; color:var(--muted); margin-bottom:14px; }
.support-card a.sc-mail { font-size:14px; color:var(--olive); font-weight:500; }
.faq { border:1px solid var(--line); border-radius:14px; padding:4px 20px; margin-bottom:12px; background:#fff; }
.faq summary { cursor:pointer; font-weight:500; padding:14px 0; list-style:none; font-size:15px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"+ "; color:var(--olive); font-weight:700; }
.faq[open] summary::before { content:"– "; }
.faq p { padding-bottom:14px; font-size:14.5px; line-height:1.6; color:var(--muted); }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.contact-card { padding:36px; border:1px solid var(--line); border-radius:24px; background:#fff; }
.contact-card .cc-k { font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faintest); margin-bottom:18px; }
.contact-card address { font-style:normal; font-size:16px; line-height:1.65; color:var(--ink); font-weight:450; }
.contact-card .cc-sub { margin-top:24px; padding-top:20px; border-top:1px solid var(--line3); }
.contact-card.dark { background:var(--ink); color:var(--canvas); }
.contact-card.dark .cc-k { color:var(--lime); }
.contact-card.dark .ch-days { font-size:28px; font-weight:600; letter-spacing:-0.02em; }
.contact-card.dark .ch-time { font-size:22px; color:var(--dashed); margin-top:4px; }
.contact-card.dark .ch-tz { font-size:14px; color:var(--faint); margin-top:8px; }
.contact-card.dark .ch-note { margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); font-size:13.5px; color:var(--faintest); line-height:1.6; }

/* ---------- Legal ---------- */
.legal-updated { font-size:14px; color:var(--faintest); margin-top:16px; font-family:var(--mono); }
.legal-sections { margin-top:44px; display:flex; flex-direction:column; gap:36px; }
.legal-sections h2 { font-size:20px; margin-bottom:10px; }
.legal-sections p, .legal-sections li { font-size:16px; line-height:1.7; color:var(--body); }
.legal-sections ul { margin:0; padding-left:1.2em; }
.legal-sections li { margin-bottom:.4rem; }
.legal-note { background:var(--lime-50); border:1px solid var(--lime-100); border-radius:14px; padding:16px 20px; font-size:14.5px; color:var(--body); }

/* ---------- 404 ---------- */
.notfound { text-align:center; padding:120px 0; }
.notfound h1 { font-size:72px; letter-spacing:-0.04em; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); background:#fff; margin-top:0; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding:56px 0 0; }
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.footer-legal { font-size:14px; line-height:1.6; color:var(--muted); max-width:340px; }
.footer-license { font-family:var(--mono); font-size:12.5px; color:var(--faint); margin-top:16px; }
.footer-email { display:inline-block; font-size:14px; color:var(--olive); margin-top:10px; font-weight:500; }
.footer-col .fc-h { font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faintest); margin-bottom:16px; }
.footer-col nav { display:flex; flex-direction:column; gap:12px; }
.footer-col nav a { font-size:14px; color:var(--body); }
.footer-bottom { margin-top:48px; padding:24px 0; border-top:1px solid var(--line3); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--faintest); }
.footer-bottom .fb-domain { font-family:var(--mono); font-size:12px; }

/* ---------- Responsive ---------- */
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; gap:24px; padding:56px 0 48px; }
  .hero h1 { font-size:clamp(40px,9vw,56px); }
  .hero-visual { height:auto; padding:24px 0 8px; }
  .hero-visual .ph-eatr { height:300px; }
  .hero-visual .ph-yogi { height:262px; }
  .ww-grid, .prod-grid, .about-cards, .list-grid, .product-hero, .features-grid,
  .shots-3, .shots-2, .support-grid, .contact-grid, .le-grid, .footer-grid {
    grid-template-columns:1fr;
  }
  .product-hero .hero-shot { order:-1; }
  .prod-card { height:auto; min-height:300px; }
  .prod-card .pc-body { max-width:62%; }
  .h-page, .product-hero h1 { font-size:clamp(36px,8vw,48px); }
  .h-sec, .ww-head { font-size:clamp(28px,6vw,34px); }
  .footer-grid { gap:32px; padding-top:44px; }
}

@media (max-width:720px) {
  .container { padding:0 20px; }
  .sec { padding:56px 0; }
  /* JS-free mobile menu: hide desktop nav, show <details> dropdown */
  .nav-desktop { display:none; }
  .nav-mobile { display:block; }
  .nav-mobile .nav-links { position:absolute; right:0; top:calc(100% + 10px); flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(28,25,23,0.12); padding:8px; min-width:210px; gap:2px; z-index:60; }
  .nav-mobile .nav-links a { padding:11px 14px; }
  .nav-mobile .nav-links a.cta { margin-left:0; text-align:center; justify-content:center; }
  .footer-bottom { flex-direction:column; gap:10px; align-items:flex-start; }
  .prod-card .pc-phone { height:240px; bottom:-26px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, main { animation:none !important; transition:none !important; }
}