/* ============================================================
   TWO PACKAGING — 2026 RESTYLE SKIN  v2  (edit-in-place)
   Complete visual redesign in the oncenutrition.com mold:
   near-white paper ground · ink text · FOREST GREEN splashes ·
   Archivo type everywhere · uppercase micro-labels · big-radius
   cards. No orange anywhere. Content/SEO untouched.
   ============================================================ */

:root{
  --tp26-paper:#FAFAF8;         /* near-white ground, ONCE-style */
  --tp26-paper-2:#F1F1EC;       /* soft panel tint */
  --tp26-ink:#0B0B0C;
  --tp26-ink-2:#2A2A2F;
  --tp26-ink-3:#45454A;
  --tp26-mute:#84848A;
  --tp26-line:#E6E6E1;
  --tp26-green:#1E4D3B;         /* THE splash — TWO forest green */
  --tp26-green-deep:#0E2D22;    /* existing brand dark-green */
  --tp26-green-bright:#2E7D5B;  /* hover / lively accents */
  --tp26-sage:#DCE8E0;          /* light green tint for chips/panels */
  --tp26-radius:22px;
  --tp26-radius-sm:14px;
  --tp26-shadow:0 24px 60px -28px rgba(11,11,12,.16);
  --tp26-shadow-lift:0 34px 80px -30px rgba(14,45,34,.30);
  --tp26-font:'Archivo',system-ui,-apple-system,sans-serif;
}

/* ---------- GROUND ---------- */
html{ scroll-behavior:smooth; }
body{
  background:var(--tp26-paper) !important;
  color:var(--tp26-ink-2);
  font-family:var(--tp26-font) !important;
  -webkit-font-smoothing:antialiased;
}
section[class*="bg-[#f5f5f5]"], .bg-\[\#f5f5f5\]{ background:var(--tp26-paper) !important; }
[class*="bg-[#efefef]"], [class*="bg-[#eeeeee]"], [class*="bg-[#e"]{ background:var(--tp26-paper-2) !important; }

/* ---------- TYPE: Archivo EVERYWHERE (complete font swap) ----------
   Excludes Font Awesome so icons keep rendering. */
body :not(i):not([class*="fa-"]):not(.fa){
  font-family:var(--tp26-font) !important;
}
h1,h2,h3{
  font-weight:800 !important;
  letter-spacing:-0.035em !important;
  color:var(--tp26-ink) !important;
  font-stretch:110%;
  line-height:1.04 !important;
}
h1{ font-stretch:112%; }
h4,h5,h6{ font-weight:700 !important; color:var(--tp26-ink); }
p{ color:var(--tp26-ink-3); }
strong,b{ color:var(--tp26-ink); }

/* headline accent words (were orange, hex-swapped to green) */
[class*="text-[#1E4D3B]"]{ color:var(--tp26-green) !important; }

/* ONCE-scale display type: gigantic hero, big section heads */
h2[class*="text-[28px]"]{
  font-size:clamp(50px,6.8vw,104px) !important;
  line-height:.96 !important;
  text-transform:uppercase;
  font-stretch:112%;
  font-weight:900 !important;
  letter-spacing:-0.02em !important;
}
h2[class*="text-[28px]"]::after{ content:"."; color:var(--tp26-green); }
section h2{ font-size:clamp(30px,3.5vw,46px); }

/* dark-green accents sitting ON black (nav links) need the bright green */
nav [class*="text-[#1E4D3B]"], nav [class*="hover:text-[#1E4D3B]"]:hover,
[class*="bg-black"] [class*="text-[#1E4D3B]"]{
  color:var(--tp26-green-bright) !important;
}

/* uppercase micro-labels */
[class*="uppercase"], .tracking-widest, .eyebrow{
  letter-spacing:.18em !important;
  text-transform:uppercase;
  font-weight:700 !important;
  font-size:11.5px !important;
  color:var(--tp26-mute) !important;
}

/* ---------- NAV: ONCE white bar, ink links, black CTA block ---------- */
nav.bg-black, nav[class*="bg-black"]{
  background:rgba(250,250,248,.92) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--tp26-line);
}
nav[class*="bg-black"] a, nav[class*="bg-black"] span{ color:var(--tp26-ink-2) !important; }
nav[class*="bg-black"] a:hover{ color:var(--tp26-green) !important; }
nav img[src*="logo"]{ filter:brightness(0); }  /* cream logo → solid ink on white */
/* nav green links stay legible on white */
nav [class*="text-[#1E4D3B]"]{ color:var(--tp26-green) !important; }

/* the thin announcement microbar goes ONCE black */
body > [class*="bg-[#0e2d22]"]:first-child, body > div:first-child [class*="bg-[#0e2d22]"]{
  background:var(--tp26-ink) !important;
}
[class*="bg-[#0e2d22]"] { }

/* ---------- BUTTONS / PILLS (were orange → now green) ---------- */
[class*="bg-[#1E4D3B]"]{
  background:var(--tp26-green) !important;
  box-shadow:0 16px 34px -16px rgba(30,77,59,.5);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  border-radius:3px !important;   /* ONCE: sharp rectangular blocks */
}
/* button text reads like ONCE: small caps, spaced */
a[class*="bg-[#1E4D3B]"], button[class*="bg-[#1E4D3B]"],
[class*="bg-[#1E4D3B]"] > span{
  text-transform:uppercase; letter-spacing:.12em;
  font-size:12.5px !important; font-weight:700 !important;
}
/* outlined secondary buttons square off too */
[class*="rounded-full"][class*="border"]{ border-radius:3px !important; border-color:var(--tp26-ink) !important; }
[class*="bg-[#1E4D3B]"]:hover{
  background:var(--tp26-green-bright) !important;
  transform:translateY(-1px);
  box-shadow:0 22px 44px -18px rgba(30,77,59,.6);
}
[class*="hover:text-[#1E4D3B]"]:hover{ color:var(--tp26-green) !important; }
[class*="border-[#1E4D3B]"]{ border-color:var(--tp26-green) !important; }

/* ---------- CARDS ---------- */
[class*="rounded-[16px]"],[class*="rounded-[20px]"],[class*="rounded-2xl"],
.card,.package-card{ border-radius:var(--tp26-radius) !important; }
[class*="border-[#d9d9d9]"]{ border-color:var(--tp26-line) !important; }
[class*="shadow"], .card{ box-shadow:var(--tp26-shadow); }

/* deep-green feature tiles — the signature splash blocks */
[class*="bg-[#0e2d22]"], [class*="bg-[#0E2D22]"]{
  background:linear-gradient(150deg,var(--tp26-green) 0%,var(--tp26-green-deep) 78%) !important;
  box-shadow:var(--tp26-shadow-lift);
  border:none !important;
}
/* everything inside a deep-green tile reads WHITE */
[class*="bg-[#0e2d22]"] h1,[class*="bg-[#0e2d22]"] h2,[class*="bg-[#0e2d22]"] h3,
[class*="bg-[#0e2d22]"] h4,[class*="bg-[#0e2d22]"] p,[class*="bg-[#0e2d22]"] span,
[class*="bg-[#0e2d22]"] li,[class*="bg-[#0e2d22]"] a,
[class*="bg-[#0E2D22]"] h1,[class*="bg-[#0E2D22]"] h2,[class*="bg-[#0E2D22]"] h3,
[class*="bg-[#0E2D22]"] h4,[class*="bg-[#0E2D22]"] p,[class*="bg-[#0E2D22]"] span,
[class*="bg-[#0E2D22]"] li,[class*="bg-[#0E2D22]"] a{
  color:#F2F6F3 !important;
}
/* the announcement bar's phone link pops white */
[class*="bg-[#0e2d22]"] a[href^="tel"], [class*="bg-[#0E2D22]"] a[href^="tel"],
[class*="bg-[#0e2d22]"] a[class*="text-"], [class*="bg-[#0E2D22]"] a[class*="text-"]{
  color:#fff !important; font-weight:700;
}

/* dark bands (TWOFORM cross-promo etc.): white text on any dark section */
#design-studio h1,#design-studio h2,#design-studio h3,#design-studio p,
#design-studio span,#design-studio li{
  color:#F2F6F3 !important;
}
#design-studio h2::after{ background:var(--tp26-green-bright); }
section[class*="bg-black"] h2, section[class*="bg-black"] p,
section[class*="bg-[#0"] h2, section[class*="bg-[#0"] p{ color:#F2F6F3 !important; }

/* section heading underline splash */
section h2{ text-transform:uppercase; font-stretch:110%; font-weight:900 !important; }
section h2::after{ content:"."; color:var(--tp26-green); }
footer h2::after, nav h2::after{ content:none; }

/* splash chips for additive hero garnish */
.tp-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  font:700 11.5px/1 var(--tp26-font); letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--tp26-green);
}
.tp-chip.deep{ background:var(--tp26-green-deep); }
.tp-chip.sage{ background:var(--tp26-sage); color:var(--tp26-green-deep); }
.tp-chip.ink{ background:var(--tp26-ink); }

/* ---------- IMAGERY ---------- */
img{ border-radius:var(--tp26-radius-sm); }
nav img, footer img, .logo img, img[src*="logo"], img[src*=".svg"]{ border-radius:0; }
section img{ box-shadow:var(--tp26-shadow); }
section img[src*=".svg"], section img[src*="icon"]{ box-shadow:none; }

/* the leafy hero background image gets retired — clean paper hero */
[style*="hero-bg"], .hero-bg, [class*="bg-hero"]{ background-image:none !important; }
section img[src*="hero-bg"]{ display:none !important; }

/* ---------- VIDEO BLOCKS ---------- */
.tp-video{
  position:relative; overflow:hidden; border-radius:var(--tp26-radius);
  box-shadow:var(--tp26-shadow-lift); background:var(--tp26-green-deep);
}
.tp-video video{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none; }
.tp-video .tp-video-tag{ position:absolute; left:18px; bottom:16px; z-index:2; }

/* ---------- FOOTER: ink black w/ green accents ---------- */
footer{ background:var(--tp26-ink) !important; }
footer, footer p, footer a, footer li, footer span{ color:#B8B8BE !important; }
footer a:hover{ color:var(--tp26-green-bright) !important; }
footer h3, footer h4{ color:#fff !important; }

/* ============================================================
   NON-TAILWIND PAGES (faq / devices / catalog / guides)
   ============================================================ */
article h1, main h1, body > h1{ font-size:clamp(34px,5.6vw,58px); line-height:1.03; }
article h2, main h2{ font-size:clamp(24px,3.4vw,34px); margin-top:1.6em; }
article p, main p{ font-size:17px; line-height:1.75; color:var(--tp26-ink-3); }
article a, main a{ color:var(--tp26-green); text-decoration-color:rgba(30,77,59,.35); text-underline-offset:3px; }
article a:hover, main a:hover{ color:var(--tp26-green-bright); }
blockquote{
  border-left:6px solid var(--tp26-green); background:var(--tp26-sage);
  border-radius:0 var(--tp26-radius-sm) var(--tp26-radius-sm) 0;
  padding:14px 20px; color:var(--tp26-green-deep);
}
table{ border-collapse:separate; border-spacing:0; border:1px solid var(--tp26-line);
  border-radius:var(--tp26-radius-sm); overflow:hidden; }
th{ background:var(--tp26-green-deep); color:#fff !important;
  letter-spacing:.06em; text-transform:uppercase; font-size:12px; }
td,th{ padding:12px 16px; }
tr:nth-child(even) td{ background:var(--tp26-paper-2); }

/* catalog page exposes --orange as a var — retarget it to green */
:root{ --orange:#1E4D3B; }

::selection{ background:var(--tp26-sage); color:var(--tp26-green-deep); }
:focus-visible{ outline:3px solid var(--tp26-green-bright); outline-offset:2px; }

/* ============ v3.1 — hero + band refinements ============ */
/* HERO H1: the full ONCE treatment (beats the `capitalize` utility) */
h1[class*="capitalize"]{
  text-transform:uppercase !important;
  font-size:clamp(54px,7vw,112px) !important;
  line-height:.95 !important;
  font-stretch:112%;
  font-weight:900 !important;
  letter-spacing:-0.02em !important;
}
h1[class*="capitalize"]::after{ content:"."; color:var(--tp26-green); }

/* hero deep-green buttons: ONCE sharp blocks */
a[class*="bg-[#0e2d22]"], button[class*="bg-[#0e2d22]"],
a[class*="bg-[#0E2D22]"], button[class*="bg-[#0E2D22]"]{
  border-radius:3px !important;
}
a[href^="tel"][class*="rounded-full"], a[href^="tel"][class*="border"]{
  border-radius:3px !important;
}

/* TWOFORM cross-promo band: ink black (white/black/green only) */
#design-studio{ background:var(--tp26-ink) !important; }
#design-studio [class*="bg-gradient"], #design-studio [style*="gradient"]{
  background:var(--tp26-ink) !important;
}

/* nav buttons with green/dark fills keep white text */
nav a[class*="bg-[#0e2d22]"], nav a[class*="bg-[#1E4D3B]"],
nav a[class*="bg-[#0e2d22]"] span, nav a[class*="bg-[#1E4D3B]"] span{
  color:#fff !important;
}


/* ===== dark standalone pages (devices) — opt-in via body.tp-dark ===== */
body.tp-dark h1, body.tp-dark h2, body.tp-dark h3{ color:#F2F6F3 !important; }
body.tp-dark section h2::after, body.tp-dark h1::after,
body.tp-dark h2[class*="text-[28px]"]::after{ content:none !important; }
body.tp-dark{ background:#0B0B0C !important; }