:root {
  --ink: #0B1020;
  --muted: #596475;
  --muted-soft: #7B8492;
  --line: rgba(11, 16, 32, 0.12);
  --line-soft: rgba(11, 16, 32, 0.08);
  --blue: #2F80EC;
  --paper: #FFFFFF;
  --max: 1040px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(47,128,236,.28);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  width: min(var(--max), calc(100% - 40px));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand img {
  display: block;
  width: 156px;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  color: rgba(11,16,32,.72);
  font-size: 14px;
  font-weight: 620;
}

.nav-links a:hover,
.mobile-panel a:hover {
  color: var(--ink);
}

/* Active nav item on the white company header: full dark ink (vs the softer
   grey of inactive items). Subtle, no underline. Eye Routine's dark header
   overrides this with its own white active rule (higher specificity). */
.nav-links a[aria-current="page"] {
  color: var(--ink);
}

.mobile-nav {
  display: none;
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.hero {
  padding: 96px 0 90px;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 76px;
  align-items: center;
}

.kicker,
.section-label {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.kicker { margin-bottom: 26px; }

h1, h2, h3, p { margin-top: 0; }

.hero h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: clamp(36px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 720;
}

/* Controlled hero headline break — desktop / iPad Pro only (v8.15) */
.hero-break {
  display: none;
}

@media (min-width: 821px) {
  .hero-break {
    display: inline;
  }
}

.hero-copy {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.hero-symbol {
  display: flex;
  justify-content: flex-end;
}

.hero-symbol img {
  width: 168px;
  height: auto;
  display: block;
}

.text-link {
  display: inline-flex;
  margin-top: 30px;
  color: var(--ink);
  font-weight: 650;
  font-size: 15px;
  border-bottom: 1px solid rgba(11,16,32,.28);
  padding-bottom: 3px;
}

.rule { border-top: 1px solid var(--line-soft); }

/* v8.10: anchor offset so deep-linked sections clear the sticky header */
#company,
#products {
  scroll-margin-top: 92px;
}

.section {
  padding: 86px 0;
}

.section-grid,
.subpage-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.section h2,
.subpage h1,
.legal-content h1 {
  max-width: 720px;
  margin-bottom: 22px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 700;
}

.section-copy,
.subpage-intro {
  max-width: 680px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.statement-list {
  max-width: 760px;
  margin-top: 46px;
  border-top: 1px solid var(--line);
}

.statement-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 34px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.statement-row h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 680;
  letter-spacing: -.01em;
}

.statement-row p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.68;
}

.products-note {
  max-width: 700px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}

.subpage {
  min-height: calc(100vh - 72px);
  padding: 70px 0 88px;
}

.subpage-content,
.legal-content {
  max-width: 760px;
}

.legal-content {
  max-width: 700px;
}

.updated {
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.legal-content h2 {
  margin-top: 34px;
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -.01em;
  font-weight: 680;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.contact-form {
  max-width: 640px;
  margin-top: 30px;
}

.form-grid {
  display: grid;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 620;
}

.optional-label {
  color: var(--muted-soft);
  font-weight: 500;
}

input, select, textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  padding: 13px 14px;
  box-shadow: none;
}

select { appearance: auto; }

textarea {
  min-height: 132px;
  resize: vertical;
}

.hidden-field { display: none !important; }

.submit-button {
  min-height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

.submit-button:hover { background: #151B2B; }

.form-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.contact-footnote,
.support-helper {
  max-width: 620px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.support-helper {
  margin: 12px 0 0;
}

.contact-footnote {
  margin: 20px 0 0;
}

.contact-footnote a,
.legal-content a,
.products-note a {
  color: var(--blue);
  font-weight: 650;
}

.site-footer {
  border-top: 1px solid var(--line-soft);
  background: #fff;
}

.footer-inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  min-height: 86px;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links a {
  color: rgba(11,16,32,.78);
  font-weight: 620;
}

.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease-out, transform .4s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 820px) {
  .hero-layout,
  .section-grid,
  .subpage-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero {
    padding: 62px 0 64px;
  }

  /* v8.10: hide the large decorative hero star in the stacked tablet state
     (it appeared as an orphan below the hero text on iPad Mini portrait) */
  .hero-symbol {
    display: none;
  }

  .section {
    padding: 64px 0;
  }

  .subpage {
    padding-top: 52px;
  }
}

/* v8.10.2: tablet-only hero refinement for the iPad Mini / iPad Air range.
   Must stay AFTER the max-width: 820px block so it re-enables the star that
   the stacked tablet state hides (.hero-symbol { display: none }) — for this
   range only. Restores a two-column hero with a smaller, calmer star than
   iPad Pro: narrower right column, tighter gap, top-aligned and centred star.
   Lower bound 768px keeps every phone below 768px on the hidden stacked
   layout. No copy, colour, or headline line-break changes. */
@media (min-width: 768px) and (max-width: 820px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 40px;
    align-items: start;
  }

  .hero-symbol {
    display: flex;
    justify-content: center;
    align-self: start;
    padding-top: 26px;
  }

  .hero-symbol img {
    width: 96px;
  }
}

/* v8.10: keep the hero star on the iPad Pro / tablet-desktop range but
   reduce it slightly so it feels less dominant */
@media (min-width: 821px) and (max-width: 1100px) {
  /* v8.10.1: the earlier transform nudge on .hero-symbol never took effect.
     .hero-symbol also carries the .reveal class, and .reveal.is-visible
     { transform: translateY(0) } (two-class specificity 0,2,0) overrides the
     single-class .hero-symbol transform (0,1,0) as soon as the star scrolls
     into view, cancelling the move. Position the star with layout instead of
     transform so it no longer fights the reveal animation: narrow the right
     column, tighten the gap, then top-align and centre the star so it sits
     closer to the hero headline. iPad Pro / tablet-desktop range only. */
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 44px;
  }

  .hero-symbol {
    justify-content: center;
    align-self: start;
    padding-top: 22px;
  }

  .hero-symbol img {
    width: 140px;
  }
}

@media (max-width: 640px) {
  .container,
  .nav,
  .footer-inner {
    width: min(100% - 28px, var(--max));
  }

  .brand img {
    width: 142px;
  }

  .nav {
    min-height: 70px;
  }

  .nav-links {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .mobile-nav summary {
    list-style: none;
    cursor: pointer;
    color: rgba(11,16,32,.72);
    font-size: 14px;
    font-weight: 620;
    padding: 14px 0;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .mobile-panel {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 19;
    background: #fff;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }

  .mobile-panel a {
    display: block;
    width: min(100% - 28px, var(--max));
    margin: 0 auto;
    padding: 14px 0;
    color: rgba(11,16,32,.78);
    font-size: 17px;
    font-weight: 620;
    border-bottom: 1px solid var(--line-soft);
  }

  .mobile-panel a:last-child {
    border-bottom: 0;
  }

  .hero {
    padding: 54px 0 56px;
  }

  .hero-symbol {
    display: none;
  }

  .section {
    padding: 58px 0;
  }

  .subpage {
    padding-top: 44px;
    padding-bottom: 64px;
  }

  .kicker,
  .section-label {
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 650;
  }

  .hero h1,
  .section h2,
  .subpage h1,
  .legal-content h1 {
    font-size: clamp(32px, 8.4vw, 38px);
    line-height: 1.12;
    letter-spacing: -.022em;
  }

  .hero-copy,
  .section-copy,
  .subpage-intro,
  .legal-content p,
  .legal-content li {
    font-size: 16px;
    line-height: 1.68;
  }

  .legal-content h2 {
    font-size: 22px;
    line-height: 1.28;
  }

  .statement-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 23px 0;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  textarea {
    min-height: 118px;
  }

  .footer-inner {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 24px 0 calc(40px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .footer-links a {
    color: rgba(11,16,32,.58);
    font-size: 13px;
    font-weight: 560;
  }

  .footer-links a[href="/support"],
  .footer-links a[href^="mailto:"] {
    display: none;
  }
}


/* V8.5 consistent page navigation */
.subpage .statement-list {
  margin-top: 38px;
}

@media (max-width: 640px) {
  .subpage .statement-list {
    margin-top: 34px;
  }
}


/* V8.6: consistent vertical rhythm + modern mobile overlay menu */
.hero {
  padding-top: 76px;
}

.mobile-menu-button,
.mobile-menu-overlay {
  display: none;
}

@media (max-width: 640px) {
  .hero {
    padding-top: 44px;
  }

  .nav-links,
  .mobile-nav,
  .mobile-menu,
  .menu-toggle {
    display: none !important;
  }

  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  .menu-mark {
    position: relative;
    width: 25px;
    height: 16px;
    display: block;
  }

  .menu-mark span {
    position: absolute;
    left: 0;
    width: 25px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
    transition: transform .22s ease, top .22s ease, opacity .22s ease;
  }

  .menu-mark span:first-child {
    top: 3px;
  }

  .menu-mark span:last-child {
    top: 11px;
  }

  .mobile-menu-button.is-open .menu-mark span:first-child {
    top: 7px;
    transform: rotate(45deg);
  }

  .mobile-menu-button.is-open .menu-mark span:last-child {
    top: 7px;
    transform: rotate(-45deg);
  }

  .mobile-menu-overlay {
    display: block;
    position: fixed;
    z-index: 18;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease;
  }

  .mobile-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-menu-content {
    width: min(100% - 44px, var(--max));
    margin: 0 auto;
    padding-top: 42px;
    display: grid;
  }

  .mobile-menu-content a {
    display: block;
    padding: 18px 0;
    color: var(--ink);
    font-size: clamp(32px, 9vw, 42px);
    line-height: 1.05;
    letter-spacing: -.028em;
    font-weight: 700;
    border-bottom: 1px solid var(--line-soft);
  }

  .mobile-menu-content a:last-child {
    border-bottom: 0;
  }

  body.menu-open {
    overflow: hidden;
  }

  .footer-inner {
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  }

  .footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }

  .footer-links a[href="/support"],
  .footer-links a[href^="mailto:"] {
    display: none !important;
  }

  .footer-links a {
    font-size: 13px;
    color: rgba(11,16,32,.55);
    font-weight: 560;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-mark span,
  .mobile-menu-overlay {
    transition: none;
  }
}


/* V8.7 mobile readability polish */
@media (max-width: 640px) {
  :root {
    --muted: #4D5868;
    --muted-soft: #707A89;
  }

  .hero-copy,
  .section-copy,
  .subpage-intro,
  .legal-content p,
  .legal-content li,
  .statement-row p,
  .products-note,
  .support-helper,
  .contact-footnote {
    color: #4D5868;
    line-height: 1.58;
  }

  .hero-copy,
  .section-copy,
  .subpage-intro,
  .legal-content p,
  .legal-content li {
    font-size: 16.5px;
  }

  .section h2,
  .subpage h1,
  .legal-content h1 {
    letter-spacing: -.026em;
  }

  .legal-content h2 {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line-soft);
  }

  .legal-content h2:first-of-type {
    margin-top: 34px;
  }

  .updated {
    margin-bottom: 28px;
    color: #5E6878;
  }

  .subpage-content,
  .legal-content {
    max-width: none;
  }

  .subpage-intro {
    margin-bottom: 0;
  }

  .statement-list {
    margin-top: 36px;
  }

  .statement-row h3,
  .legal-content h2 {
    color: var(--ink);
  }

  .products-note {
    margin-top: 30px;
    padding-top: 26px;
  }

  label {
    font-weight: 660;
  }

  input,
  select,
  textarea {
    border-color: rgba(11,16,32,.14);
  }

  .mobile-menu-content a {
    font-size: clamp(31px, 8.6vw, 40px);
  }
}


/* V8.8 mobile footer simplification */
@media (max-width: 640px) {
  .footer-inner {
    gap: 0;
    padding-top: 24px;
    padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px));
  }

  .footer-legal,
  .footer-inner > div:first-child {
    color: #667182;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 450;
  }

  .footer-links {
    display: none !important;
  }
}


/* V8.9 very small mobile spacing fix
   Scope: very small phones only, up to 370px wide (e.g. Samsung Galaxy S8+ 360px).
   Goal: stop the blue section label (COMPANY, PRODUCTS) from sitting alone with a
   large empty area below it after the hero, by slightly tightening the homepage
   section vertical padding and the gap between each label and its heading. Calm
   "Quiet Publisher" spacing is kept; labels, colours and copy are unchanged.
   Capped at 370px so iPhone SE (375px), iPhone 12 Pro (390px), Pixel 7 (412px)
   and iPad stay unchanged. */
@media (max-width: 370px) {
  .section {
    padding: 44px 0;
  }

  .section-grid {
    gap: 16px;
  }
}


/* LOCAL DRAFT (working copy only): homepage Products card linking to the
   local Eye Routine product page. Minimal additive styling; light theme. */
.product-card {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 640px;
  margin-top: 8px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  transition: border-color .2s ease, transform .2s ease;
}

.product-card:hover {
  border-color: rgba(11, 16, 32, 0.22);
  transform: translateY(-1px);
}

.product-card img {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  display: block;
  flex-shrink: 0;
}

.product-card-body h3 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -.01em;
  color: var(--ink);
}

.product-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.product-card-cta {
  margin: 7px 0 0;
  color: var(--blue);
  font-size: 14px;
  font-weight: 650;
}

@media (max-width: 640px) {
  .product-card {
    gap: 16px;
    padding: 18px;
  }

  .product-card img {
    width: 56px;
    height: 56px;
  }
}