/* ============================================================
   Horizon Releaf — homepage sections + the signature horizon.
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  /* Nav height + clearance: 70px chrome on desktop, 77px (burger) <900px. */
  --hero-top: calc(70px + clamp(16px, 3vh, 40px));
  position: relative;
  height: clamp(640px, 100svh, 1080px);
  overflow: hidden;
  background: var(--navy);
}
@media (max-width: 899px) {
  .hero { --hero-top: calc(77px + clamp(16px, 3vh, 40px)); }
}
@media (max-width: 519px) {
  .hero { --hero-top: calc(77px + 28px); }
}
.hero-media, .hero-media img { position: absolute; inset: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 899px) {
  .hero-media img { object-position: 38% 50%; }
}

/* Readability scrim: diagonal, full height, masked so it fades out
   before the dawn band. No edge anywhere (a bottom:50% box drew one
   exactly on the horizon). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.18) 42%, rgba(255,255,255,0) 66%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 46%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 46%);
  z-index: 1;
  pointer-events: none;
}

/* One vertical scrim spanning the FULL hero; fully transparent by 44%
   (6% above the horizon) so the dawn band reads warm right up to the
   horizon line. No edge anywhere: alpha reaches 0 before the gradient ends. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: absolute;
  z-index: 2;
  left: var(--cx);
  width: min(var(--maxw), 100vw - var(--cx) - var(--gutter));
  /* Anchored by its TOP edge in the open upper sky; the font cap
     below keeps the CTA row's bottom >= 8% of hero height above the
     horizon (i.e. above 42% of hero height). */
  top: var(--hero-top);
  color: var(--navy);
}
.hero-content h1 {
  /* max-width 10em forces the 2-line break "YOUR FLORIDA MEDICAL /
     MARIJUANA CARD." (lines measure 9.58em / 7.41em at any size).
     Font cap keeps top-anchored content ending >= 8% of hero height
     above the horizon: 2 lines = 1.84em, sub+row overhead ~152px. */
  font-size: clamp(38px, min(5.6vw, 6.6svh), 92px);
  max-width: 10em;
}
@media (max-width: 519px) {
  /* F2: mobile cap so the CTA row stays above the horizon. */
  .hero-content h1 { font-size: clamp(30px, 8.8vw, 34px); }
  .hero-sub { margin-top: 12px; }
  .hero-row { margin-top: 18px; }
}
.hero-sub {
  margin-top: 16px;
  max-width: 46ch;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
}
.hero-tagline {
  margin-top: 10px;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-stretch: 100%;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.15;
  color: var(--navy);
}
.hero-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 20px;
}
.hero-link {
  color: var(--navy);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.hero-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Price panel — inside the hero on desktop, moved into #how on mobile. */
.price-panel {
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 16px 36px -18px rgba(14, 36, 54, .45);
}
.price-panel strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.3em; color: var(--navy); }
.price-panel .price-line { font-weight: 500; }
.price-panel .price-note { margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.price-panel s { opacity: .7; font-weight: 400; }
.price-panel strong { font-weight: 700; }

/* F3: below 600px the price line renders as two nowrap lines. */
.price-line .price-item { white-space: nowrap; }
@media (max-width: 599px) {
  .price-line .price-item { display: block; }
  .price-line .price-sep { display: none; }
}

.hero-price {
  position: absolute;
  z-index: 2;
  left: var(--cx);
  top: calc(50% + 28px);
  max-width: 460px;
}
.price-panel--inline { display: none; }
@media (max-width: 899px) {
  .hero-price { display: none; }
  .price-panel--inline { display: block; margin-bottom: 56px; }
}

/* ---------- Signature: the horizon line + vertical thread ---------- */
.horizon-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100vw;
  height: 2px;
  margin-top: -1px;
  background: #D99A3E; /* sunlit gold: reads on the bright horizon */
  z-index: 3;
  transform-origin: left;
  animation: line-draw 900ms ease-out 150ms both;
  pointer-events: none;
}
@keyframes line-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.sig-scope { position: relative; }

.thread {
  position: absolute;
  top: calc(clamp(640px, 100svh, 1080px) / 2);
  bottom: 0;
  left: calc(var(--cx) - 20px);
  width: 1px;
  background: rgba(231, 185, 127, .7);
  transform-origin: top;
  transform: scaleY(var(--thread, 1));
  pointer-events: none;
  z-index: 5;
}
@supports (animation-timeline: view()) {
  .thread {
    animation: thread-grow linear both;
    animation-timeline: view();
  }
}
@keyframes thread-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@media (max-width: 719px) { .thread { display: none; } }

/* Tick branching from the thread to each section H2. */
@media (min-width: 720px) {
  .tick { position: relative; }
  .tick::before {
    content: "";
    position: absolute;
    left: -20px;
    top: .36em;
    width: 20px;
    height: 1px;
    background: rgba(231, 185, 127, .35);
    transition: background .5s ease;
  }
  .in-view .tick::before { background: var(--dawn); }
}

/* ---------- Sections, shared ---------- */
.section { padding-block: clamp(72px, 9vw, 120px); }
.h2 { font-size: clamp(34px, 4.6vw, 64px); }

/* ---------- How it works ---------- */
.stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 64px;
  padding-top: 36px;
}
.stops::before {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.stop { position: relative; }
.stop::before {
  content: "";
  position: absolute;
  top: -36px; left: 0;
  width: 11px; height: 11px;
  border-radius: 100%;
  background: var(--navy);
}
.stop h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.stop p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.how-note { margin-top: 48px; color: var(--muted); font-size: 15px; }

@media (max-width: 719px) {
  .stops { grid-template-columns: 1fr; gap: 40px; padding-top: 0; padding-left: 32px; }
  .stops::before { top: 8px; bottom: 8px; left: 5px; right: auto; width: 1px; height: auto; }
  .stop::before { top: 8px; left: -32px; }
}

/* ---------- Pricing ---------- */
.pricing { background: var(--sand); }
.pricing-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 72px;
  margin-top: 56px;
  align-items: start;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
}
.price-row:first-child { padding-top: 8px; }
.price-row + .price-row { border-top: 1px solid var(--line); }
.price-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.price-val { white-space: nowrap; font-size: clamp(20px, 2vw, 26px); font-weight: 500; }
.price-val s { opacity: .55; font-weight: 400; margin-right: 8px; }
.price-val strong { font-weight: 700; }

.disc-title { font-size: 18px; font-weight: 600; }
.disc { margin: 14px 0 0; }
.disc > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}
.disc dt { color: var(--ink); }
.disc dd { margin: 0; font-weight: 600; }
.pricing-note { margin-top: 18px; color: var(--muted); font-size: 15px; }

.legal {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.pricing .btn { margin-top: 36px; }

@media (max-width: 899px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- Medical director ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 72px;
  align-items: center;
  margin-top: 56px;
}
.portrait {
  background: var(--sand);
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 32px 32px 0;
}
.portrait img { width: 100%; max-width: 320px; height: auto; }
.about-name { margin-top: 0; font-size: 22px; font-weight: 600; }
.about-role { margin-top: 6px; color: var(--muted); font-size: 15px; }
.about-body { margin-top: 22px; max-width: 58ch; }

@media (max-width: 899px) {
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .portrait { max-width: 380px; }
}

/* ---------- Conditions ---------- */
.conditions { background: var(--navy); color: #fff; }
.cond-list {
  margin-top: 52px;
  columns: 3;
  column-gap: 56px;
}
.cond {
  break-inside: avoid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: 17px;
  color: #fff;
}
.cond .arr {
  flex: none;
  color: rgba(255, 255, 255, .6);
  transition: transform .25s ease;
}
.cond:hover .arr, .cond:focus-visible .arr { transform: translateX(4px); }
.cond-note { margin-top: 36px; color: rgba(255, 255, 255, .72); font-size: 15px; max-width: 62ch; }
@media (max-width: 1023px) { .cond-list { columns: 2; } }
@media (max-width: 639px)  { .cond-list { columns: 1; } }

/* ---------- Reduced motion: everything drawn, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .horizon-line { animation: none; }
  .thread { animation: none; transform: scaleY(1); }
  .tick::before { transition: none; }
  .cond .arr { transition: none; }
}

/* About us: mission statement above the medical director. */
.about-mission {
  max-width: 34ch;
  margin: clamp(20px, 2.4vw, 28px) 0 clamp(36px, 5vw, 60px);
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-stretch: 90%;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.22;
  color: var(--ink);
}

/* Phones: the horizon line sits at exactly 50% of the hero (it is tied to the
   photo), so on short visible heights it crossed the booking button. Make the
   hero tall enough that the horizon always falls below the CTA row; site.js
   refines --hero-min from the real content height on each device. */
@media (max-width: 719px) {
  .hero { height: auto; min-height: max(100svh, var(--hero-min, 860px)); max-height: none; }
}
.about-points { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
.about-points li { position: relative; padding: 16px 0 16px 34px; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.5; }
.about-points li:last-child { border-bottom: 1px solid var(--line); }
.about-points li::before { content: ""; position: absolute; left: 0; top: 29px; width: 20px; height: 2px; background: #D99A3E; }
.about-more { margin-top: 24px; }
.about-more a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }