/* ILIT Society — home page
   Design width 1440px. Tokens sampled from the approved mockup. */

:root {
  --navy:        #1B2A4A;
  --navy-deep:   #16233F;
  --navy-line:   #2A3A5C;
  --gold:        #C4A23C;
  --gold-text:   #A8862E;
  --gold-soft:   #C9A961;
  --cream:       #F5EFE3;
  --cream-tile:  #F3ECDC;
  --cream-line:  #E2DAC7;
  --blue:        #B0CFEF;
  --blue-text:   #3F5578;
  --ink:         #1B2A4A;
  --ink-soft:    #5B6577;
  --ink-faint:   #8A8374;
  --line:        #E1E4EA;
  --white:       #FFFFFF;
  --font:        "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--gold-text); text-decoration: none; }
a:hover { color: #8C6F22; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The layout is fixed at the 1440px design width and scaled to fit narrower
   desktop/tablet viewports (see the script at the end of index.html, which sets
   --scale). Below 760px it switches to a stacked phone layout instead. */
.site-frame { width: 1440px; margin: 0 auto; overflow: hidden; zoom: var(--scale, 1); }
.split { display: flex; align-items: stretch; }
.split > * { min-width: 0; }
.col-l { flex: 0 0 735px; }
.col-r { flex: 1 1 auto; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 28px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--gold); color: var(--navy); font-weight: 700; font-size: 16.5px; white-space: nowrap;
}
.btn:hover { background: #B9963A; color: var(--navy); }
.btn svg { flex: none; }
.btn-sm { height: 48px; padding: 0 22px; font-size: 15px; }

/* ---------- utility strip ---------- */
.utility {
  display: flex; justify-content: space-between; align-items: center;
  height: 40px; padding: 0 40px; background: var(--cream);
  font-size: 12.5px; color: #6E6858;
}
.utility ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.utility a { color: #6E6858; }
.utility a.ul { text-decoration: underline; text-underline-offset: 3px; }
.utility .user { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- header ---------- */
.header {
  display: flex; justify-content: space-between; align-items: center;
  height: 92px; padding: 0 40px; background: var(--navy);
  position: relative; z-index: 2; /* paints over the hero's 1px overlap below */
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--white); }
.brand .mark { flex: none; display: block; }
.brand-name { display: flex; flex-direction: column; gap: 3px; }
.brand-name b { font-size: 21px; font-weight: 500; letter-spacing: 0.06em; line-height: 1; }
.brand-name small { font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: #7F8AA6; }
.nav { display: flex; align-items: center; gap: 36px; }
.nav a { font-size: 15.5px; color: #E6EAF2; }
.nav a:hover { color: var(--white); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  /* overlap the header by 1px: the scaled page puts the header bottom on a fractional pixel,
     and the clipped hero is its own layer, so without this a hairline seam can show */
  margin-top: -1px; padding-top: 1px;
  /* shallow arc along the bottom, measured from the mockup: ~36px rise at the left edge,
     ~32px at the right, flat around x=700. A circle of r=6806px whose lowest point is the
     hero bottom reproduces it. */
  clip-path: circle(6806px at 700px calc(100% - 6806px));
}
.hero .col-l {
  background: var(--cream);
  padding: 68px 30px 0 35px;
}
.hero h1 { /* line breaks are set in the markup to match the mockup */
  margin: 32px 0 16px; font-size: 82px; line-height: 0.94; letter-spacing: -0.03em; font-weight: 700;
}
.hero .lede { margin: 0 0 24px; font-size: 22px; line-height: 32px; color: var(--ink-soft); }
.hero .fine { margin: 18px 0 40px; font-size: 14px; line-height: 1.55; color: var(--ink-faint); }
.hero .btn { height: 62px; padding: 0 40px; font-size: 18px; }
.hero .fine a { text-decoration: underline; text-underline-offset: 3px; }
.hero .col-r { position: relative; min-height: 668px; }
.hero .col-r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }

/* ---------- search band ---------- */
.search { position: relative; padding: 30px 40px 64px; }
.search .copy { width: 660px; max-width: 100%; }
.search h2 { margin: 0 0 16px; font-size: 40px; line-height: 1.12; letter-spacing: -0.028em; font-weight: 700; max-width: 500px; }
.search p { margin: 0 0 30px; font-size: 17px; line-height: 1.62; color: var(--ink-soft); max-width: 600px; }

.searchbar {
  display: flex; align-items: stretch; height: 60px;
  border: 1px solid #D9D5CB; border-radius: 6px; background: var(--white); overflow: hidden;
}
.searchbar .field { display: flex; align-items: center; gap: 12px; padding: 0 18px; flex: 1 1 auto; }
.searchbar .field input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16.5px; color: var(--ink); background: transparent; }
.searchbar .field input::placeholder { color: #9AA2AF; }
.searchbar .field svg { flex: none; color: #9AA2AF; }
.searchbar .sep { width: 1px; background: #E7E3D9; margin: 12px 0; }
.searchbar .select { display: flex; align-items: center; gap: 10px; padding: 0 20px; flex: none; font-size: 16px; color: var(--ink-soft); cursor: pointer; }
.searchbar .select svg { color: #9AA2AF; }
.searchbar .go { flex: none; width: 128px; border: 0; background: var(--navy); color: var(--white); font-size: 16px; font-weight: 700; cursor: pointer; }
.searchbar .go:hover { background: #24375F; }

.popular { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.popular span { font-size: 13.5px; color: #7A8393; margin-right: 2px; }
.popular a { padding: 9px 15px; border: 1px solid var(--line); border-radius: 5px; font-size: 13.5px; color: #3E4A63; background: var(--white); }
.popular a:hover { border-color: var(--gold); color: var(--ink); }

/* device cluster */
.devices { position: absolute; left: 804px; top: -35px; width: 560px; height: 400px; pointer-events: none; }
.tablet {
  position: absolute; left: 0; top: 0; width: 498px;
  border-radius: 14px; background: var(--navy); padding: 12px;
  box-shadow: 0 26px 52px rgba(27, 42, 74, 0.22);
}
.tablet .screen { border-radius: 7px; overflow: hidden; background: #E4EAEC; }
.tablet .bar, .phone .bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; background: var(--white); border-bottom: 1px solid #EDF0F3; font-size: 13px; color: #9AA2AF; }
.tablet .map, .phone .map { display: block; width: 100%; height: auto; }
.tablet .caption { padding: 16px 18px 18px; background: var(--white); font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.phone {
  position: absolute; left: 366px; top: 92px; width: 168px;
  border-radius: 22px; background: var(--navy); padding: 9px;
  box-shadow: 0 20px 40px rgba(27, 42, 74, 0.3);
}
.phone .screen { border-radius: 14px; overflow: hidden; background: #E4EAEC; }
.phone .bar { height: 32px; padding: 0 10px; font-size: 10px; gap: 6px; }
.phone .caption { padding: 10px 11px 12px; background: var(--white); font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }

/* ---------- treatment ---------- */
.treatment .col-l { flex-basis: 720px; position: relative; min-height: 550px; }
.treatment .col-l img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.treatment .col-r { background: var(--cream); padding: 72px 40px 64px 48px; }
.treatment h2 { margin: 22px 0 22px; font-size: 40px; line-height: 1.12; letter-spacing: -0.028em; font-weight: 700; }
.treatment p { margin: 0 0 40px; font-size: 16.5px; line-height: 1.66; color: var(--ink-soft); max-width: 52ch; }
.stats { display: flex; align-items: stretch; padding: 26px 0; border-top: 1px solid var(--cream-line); border-bottom: 1px solid var(--cream-line); }
.stats > div { flex: 1; padding: 0 28px; }
.stats > div:first-child { padding-left: 0; }
.stats > div + div { border-left: 1px solid var(--cream-line); }
.stats b { display: block; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats small { display: block; margin-top: 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.treatment .fine { margin: 24px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); max-width: 62ch; }

/* ---------- explainer + allergens ---------- */
.learn { background: var(--blue); }
.learn .col-l { flex-basis: 720px; padding: 64px 48px 64px 40px; }
.learn .col-r { padding: 64px 40px 40px 32px; }
.learn h2 { margin: 0 0 6px; font-size: 38px; line-height: 1.12; letter-spacing: -0.028em; font-weight: 700; }
.learn .sub { margin: 0 0 28px; font-size: 16.5px; color: var(--blue-text); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.faq article { padding: 22px 22px 24px; background: var(--white); border-radius: 6px; }
.faq h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.faq p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.allergens-label { margin: 8px 0 22px; font-size: 14.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.tiles a { display: block; padding: 20px 18px 18px; background: var(--cream-tile); border-radius: 6px; color: var(--ink); min-height: 160px; }
.tiles a:hover { background: #EFE6D2; color: var(--ink); }
.tiles svg { width: 40px; height: 40px; color: var(--ink); }
.tiles b { display: block; margin-top: 16px; font-size: 18px; font-weight: 700; }
.tiles small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-faint); }

.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.story { padding: 24px 24px 22px; background: var(--cream-tile); border-radius: 6px; }
.story .eyebrow { font-size: 11px; }
.story .quote { display: flex; gap: 16px; margin-top: 18px; }
.story img { flex: none; width: 96px; height: 96px; border-radius: 6px; object-fit: cover; }
.story blockquote { margin: 0; }
.story blockquote p { margin: 0 0 8px; font-size: 16.5px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.story blockquote footer { font-size: 12.5px; color: var(--ink-faint); }
.story .fine { margin: 18px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }
.cta { border-radius: 6px; overflow: hidden; background: var(--navy); display: flex; flex-direction: column; }
.cta img { width: 100%; height: 130px; object-fit: cover; object-position: 50% 30%; }
.cta .body { padding: 22px 24px 24px; color: var(--white); }
.cta h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.cta p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: #B6C2D8; }

/* ---------- legal + footer ---------- */
.legal { padding: 44px 40px 36px; background: var(--navy-deep); color: #92A3C0; }
.legal h4 { margin: 0 0 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); }
.legal .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.legal p { margin: 0 0 12px; font-size: 12px; line-height: 1.7; }
.legal b { color: #C5D0E3; }

.footer { padding: 34px 40px 40px; background: var(--navy-deep); border-top: 1px solid var(--navy-line); color: #92A3C0; }
.footer .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer .brand-name b { font-size: 16px; }
.footer .copy { margin-top: 12px; font-size: 12px; color: #6E7F9E; }
.footer nav { display: flex; gap: 84px; }
.footer nav div { display: flex; flex-direction: column; gap: 10px; }
.footer nav h5 { margin: 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold-soft); }
.footer nav a { font-size: 13.5px; color: #92A3C0; }
.footer nav a:hover { color: var(--white); }

/* ---------- responsive ---------- */
@media (max-width: 759px) {
  .site-frame { width: 100%; zoom: 1; }
  .split { flex-direction: column; }
  .col-l, .col-r, .treatment .col-l, .learn .col-l { flex-basis: auto; }
  .hero { clip-path: none; }
  .hero .col-l { padding: 56px 24px 8px; }
  .hero h1 { font-size: 44px; }
  .hero .col-r { min-height: 420px; }
  .treatment .col-l { min-height: 380px; }
  .treatment .col-r, .learn .col-l, .learn .col-r { padding: 48px 24px; }
  .utility, .header, .search, .legal, .footer { padding-left: 24px; padding-right: 24px; }
  .nav a:not(.btn) { display: none; }
  .brand-name small, .utility li:nth-child(2) { display: none; }
  .utility { height: auto; padding-block: 10px; }
  .header { height: 76px; }
  .devices { display: none; }
  .searchbar { flex-wrap: wrap; height: auto; }
  .searchbar .field { flex-basis: 100%; height: 56px; }
  .searchbar .sep { display: none; }
  .searchbar .select { flex: 1; height: 52px; border-top: 1px solid #E7E3D9; }
  .searchbar .go { height: 52px; border-top: 1px solid #E7E3D9; }
  .faq, .proof, .legal .cols, .tiles { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div { padding: 0 16px; }
  .stats b { font-size: 34px; }
  .footer .row, .footer nav { flex-direction: column; gap: 28px; }
}