/* Julius Wellness — shared site styles, v2 (clean product-site look)
   Layout: centered, generous whitespace; white and soft-grey sections alternate; heroes are light with large
   centered headlines; black tiles are reserved for the closing call to action and the Firefly "product shot". */
:root {
  --bg: #FFFFFF;
  --alt: #F5F5F7;          /* soft grey section / tile */
  --paper: #FFFFFF;
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --line: #D2D2D7;
  --red: #0071E3;          /* primary action (blue); token name kept for page compatibility */
  --red-ink: #FFFFFF;
  --red-soft: rgba(0, 113, 227, .09);
  --link: #0066CC;
  --eyebrow: #B64400;      /* small "New"-style labels */
  --nav-bg: rgba(251, 251, 253, .82);
  --band-bg: #000000;      /* black tiles */
  --band-fg: #F5F5F7;
  --band-muted: #A1A1A6;
  --band-red: #FF7A3D;
  --focus: #0071E3;
  --light-1: #FF5A3C;      /* red-light visual only */
  --light-2: #C92C3E;
  --light-3: #652456;

  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --s-xs: .75rem; --s-sm: .875rem; --s-md: 1.0625rem; --s-lg: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  --s-xl: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); --s-xxl: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
  --radius: 22px;
}
/* Always light: the site keeps its white look for every visitor, whatever their device's dark mode setting. */
:root, :root[data-theme="dark"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: var(--s-md); line-height: 1.47; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
img { max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: 1024px; margin: 0 auto;
  padding-left: max(22px, env(safe-area-inset-left, 0px));
  padding-right: max(22px, env(safe-area-inset-right, 0px));
}

/* Type */
h1, h2, h3 { font-family: var(--f-display); line-height: 1.07; margin: 0; text-wrap: balance; letter-spacing: -.025em; font-weight: 600; }
h1 { font-size: var(--s-xxl); letter-spacing: -.03em; }
h2 { font-size: var(--s-xl); }
h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); letter-spacing: -.015em; line-height: 1.15; }
p { margin: 0; max-width: 62ch; }
.lead { font-size: var(--s-lg); line-height: 1.38; color: var(--muted); max-width: 44ch; font-weight: 400; }
.eyebrow { font-family: var(--f-display); font-size: var(--s-md); font-weight: 600; letter-spacing: -.01em; color: var(--eyebrow); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.75rem; }

/* SEO preview ribbon (mockup only) */
.seo-bar { background: var(--alt); color: var(--muted); font-size: var(--s-xs); text-align: center; }
.seo-bar details { padding-block: .55rem; }
.seo-bar summary { cursor: pointer; list-style: none; color: var(--link); }
.seo-bar summary::-webkit-details-marker { display: none; }
.seo-bar summary::after { content: " \203A"; }
.seo-snippet { margin: .7rem auto .2rem; padding: .85rem 1rem; background: #fff; color: #202124; border-radius: 12px; max-width: 640px; font-family: Arial, sans-serif; display: flex; flex-direction: column; gap: .2rem; text-align: left; letter-spacing: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.seo-snippet .u { font-size: 12px; color: #4d5156; }
.seo-snippet .t { font-size: 19px; color: #1a0dab; line-height: 1.3; }
.seo-snippet .d { font-size: 14px; color: #4d5156; line-height: 1.5; }

/* Global nav: slim, translucent */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 52px; padding-block: .35rem; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; margin-right: auto; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.brand span { font-size: .68rem; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.nav { display: flex; gap: 1.6rem; font-size: .8rem; letter-spacing: -.005em; }
.nav a { text-decoration: none; color: var(--ink); opacity: .8; }
.nav a:hover { opacity: 1; text-decoration: none; }
.nav a[aria-current="page"] { opacity: 1; font-weight: 600; }
.header-cta { display: flex; gap: .9rem; align-items: center; }
.phone { font-size: var(--s-sm); white-space: nowrap; user-select: all; font-variant-numeric: tabular-nums; }
.header-cta .btn { white-space: nowrap; }
.menu-toggle { display: none; }
@media (min-width: 901px) { .site-header .wrap { flex-wrap: nowrap; } .nav { white-space: nowrap; } }
@media (max-width: 1100px) { .header-cta .phone { display: none; } }
@media (max-width: 900px) {
  .nav { order: 3; width: 100%; flex-direction: column; gap: 0; display: none; padding-bottom: .75rem; font-size: 1.15rem; }
  .nav a { padding-block: .55rem; border-bottom: 1px solid var(--line); font-weight: 600; }
  .site-header.open .nav { display: flex; }
  .menu-toggle { display: inline-flex; background: none; border: 0; color: var(--ink); padding: .4rem .2rem; font: 400 var(--s-sm) var(--f-body); cursor: pointer; }
}

/* Buttons: pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: var(--f-body); font-weight: 400; font-size: var(--s-md); letter-spacing: -.01em; text-decoration: none; padding: .7rem 1.4rem; border-radius: 980px; border: 1px solid var(--red); background: var(--red); color: var(--red-ink); cursor: pointer; transition: filter .15s ease; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--link); border-color: var(--link); }
.band .btn.ghost { color: var(--band-fg); border-color: var(--band-fg); }
.btn.small { padding: .3rem .85rem; font-size: .8rem; }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.more { color: var(--link); }
.more::after { content: " \203A"; }

/* Sections alternate white / soft grey */
.section { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
main > .section:nth-of-type(even) { background: var(--alt); }
main > .section:nth-of-type(even) .card { background: var(--paper); }
.section-head { display: flex; flex-direction: column; gap: .75rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); align-items: center; text-align: center; }
.section-head .lead, .section-head p { margin-inline: auto; }

/* Bands: black tiles by default; page heroes are light and centered */
.band { background: var(--band-bg); color: var(--band-fg); position: relative; overflow: hidden; }
.band .lead, .band .muted { color: var(--band-muted); }
.band .eyebrow { color: var(--band-red); }
.band a:not(.btn) { color: var(--band-fg); }
.band a.more { color: #2997FF; }
.page-hero a.more, .home-hero a.more { color: var(--link); }
.glow { display: none; }
.page-hero, .home-hero { --band-bg: var(--bg); --band-fg: var(--ink); --band-muted: var(--muted); --band-red: var(--eyebrow); }
.page-hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-hero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.1rem; align-items: center; text-align: center; }
.page-hero .lead { margin-inline: auto; }
.page-hero .btn-row { justify-content: center; }
.page-hero a:not(.btn) { color: var(--link); }
.page-hero .btn.ghost { color: var(--link); border-color: var(--link); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; }
.grid-2 > *, .grid-3 > * { min-width: 0; }

/* Tiles */
.card { background: var(--alt); border: 0; border-radius: var(--radius); padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); display: flex; flex-direction: column; gap: .75rem; }
.card.featured { box-shadow: 0 0 0 2px var(--red) inset; }
.card .price { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card .price small { font-size: var(--s-sm); color: var(--muted); font-weight: 400; letter-spacing: 0; }
.card .spec { font-size: var(--s-xs); color: var(--muted); }
.card .btn { margin-top: auto; align-self: flex-start; }
.tag { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--eyebrow); align-self: flex-start; }

/* Spec list */
.spec-list { display: grid; grid-template-columns: max-content 1fr; gap: .75rem 2rem; margin: 0; }
.spec-list dt { font-size: var(--s-sm); color: var(--muted); padding-top: .1rem; }
.spec-list dd { margin: 0; }

/* Price table */
.table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table th, .price-table td { text-align: left; padding: 1rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th { font-size: var(--s-xs); color: var(--muted); font-weight: 600; }
.price-table td.num { white-space: nowrap; font-weight: 600; }

/* Steps (a real sequence) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; }
.steps li::before { content: counter(step); font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; width: 2rem; height: 2rem; display: grid; place-items: center; font-size: var(--s-sm); }
.steps li > div { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding-block: 1.15rem; }
.faq summary { cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: var(--s-md); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-top: .75rem; display: flex; flex-direction: column; gap: .75rem; color: var(--muted); }

/* Proof */
.rating { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.rating .stars { color: var(--ink); letter-spacing: .1em; }
.rating .score { font-size: 2.5rem; font-weight: 600; letter-spacing: -.03em; }
.placeholder { border: 1.5px dashed var(--line); border-radius: 18px; padding: 1.25rem; color: var(--muted); font-size: var(--s-sm); display: flex; flex-direction: column; gap: .4rem; background: transparent; }
.placeholder .tag { color: var(--muted); }

/* Callouts */
.note { font-size: var(--s-xs); color: var(--muted); line-height: 1.5; }
.cta-band .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); position: relative; z-index: 1; }
.cta-band .btn-row { justify-content: center; }
.cta-band .stack { align-items: center; }

/* Form */
.form { display: grid; gap: 1rem; max-width: 560px; }
.form label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; font-size: var(--s-sm); }
.form input, .form textarea, .form select { font: inherit; font-weight: 400; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.form .ok { color: var(--link); font-size: var(--s-sm); }

/* Footer */
.site-footer { background: var(--alt); font-size: var(--s-xs); color: var(--muted); line-height: 1.6; }
.site-footer .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2rem; padding-block: 2.5rem 1.75rem; }
.site-footer h4 { font-size: var(--s-xs); color: var(--ink); margin: 0 0 .5rem; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer p { max-width: none; }
.footer-legal { border-top: 1px solid var(--line); background: var(--alt); }
.footer-legal .wrap { display: block; padding-block: 1.1rem 2rem; color: var(--muted); font-size: var(--s-xs); }


/* Review cards (real Google reviews, quoted in full) */
.review { margin: 0; background: var(--alt); border-radius: 18px; padding: 1.5rem; display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
main > .section:nth-of-type(even) .review { background: var(--paper); }
.review .stars { color: var(--ink); letter-spacing: .12em; font-size: var(--s-sm); }
.review blockquote { margin: 0; font-size: var(--s-md); line-height: 1.5; color: var(--ink); }
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.review figcaption { display: flex; flex-direction: column; gap: .1rem; font-size: var(--s-sm); margin-top: auto; }
.review-wide { padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.review-wide blockquote { font-size: var(--s-lg); line-height: 1.45; max-width: 70ch; }
.review figcaption span { color: var(--muted); font-size: var(--s-xs); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }